[MP-2044] Add support for theme data (#32)

Author: SamborGornicz

packages/agent-app-sdk/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @livechat/agent-app-sdk
 
+## 1.12.0
+
+### Minor Changes
+
+- aab5da0: Added support for retrieving theme values via the `getTheme` method or by listening to the `change_theme` event
+
 ## 1.11.0
 
 ### Minor Changes

packages/agent-app-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/agent-app-sdk",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "SDK for extending LiveChat's Agent App",
   "license": "MIT",
   "repository": {
@@ -28,8 +28,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.2.0",
-    "@livechat/mitt": "0.1.2",
-    "@livechat/postmessage": "^0.3.2",
     "@livechat/widget-core-sdk": "^1.1.0"
   },
   "devDependencies": {

packages/agent-app-sdk/src/index.ts

@@ -4,4 +4,4 @@ export * from './widgets/fullscreen';
 export * from './widgets/messagebox';
 export * from './widgets/settings';
 export * from './widgets/shared/customer-profile';
-
+export { IThemeData, Theme } from './widgets/shared/theme';

packages/agent-app-sdk/src/widgets/details/details-widget.spec.ts

@@ -31,6 +31,15 @@ jest.mock('../shared/rich-messages', () => {
   };
 });
 
+jest.mock('../shared/theme', () => {
+  return {
+    withTheme: jest.fn().mockImplementation(widget => ({
+      ...widget, 
+      getTheme: jest.fn()
+    }))
+  };
+});
+
 describe('DetailsWidget', () => {
   it('has a correct methods', () => {
     const connection = createMockConnection();
@@ -107,7 +116,7 @@ describe('createDetailsWidget', () => {
   });
 
   it('returns the correct object with correct properties', async () => {
-    expect.assertions(5);
+    expect.assertions(6);
 
     const widget = await createDetailsWidget();
 
@@ -116,5 +125,6 @@ describe('createDetailsWidget', () => {
     expect(widget).toHaveProperty('on');
     expect(widget).toHaveProperty('off');
     expect(widget).toHaveProperty('sendMessage');
+    expect(widget).toHaveProperty('getTheme');
   });
 });

packages/agent-app-sdk/src/widgets/details/details-widget.ts

@@ -1,10 +1,10 @@
 import { createConnection, createWidget, IConnection, withAmplitude, withPayments } from '@livechat/widget-core-sdk';
 import { withCustomerProfile } from '../shared/customer-profile';
 import { withRichMessages } from '../shared/rich-messages';
+import { withTheme } from '../shared/theme';
 import assertSection from './custom-sections';
 import { IDetailsWidgetApi, IDetailsWidgetEvents, ISection } from './interfaces';
 
-
 export function DetailsWidget(connection: IConnection<IDetailsWidgetEvents>) {
   const base = createWidget<IDetailsWidgetApi, IDetailsWidgetEvents>(
     connection,
@@ -25,7 +25,7 @@ export function DetailsWidget(connection: IConnection<IDetailsWidgetEvents>) {
     }
   );
 
-  const widget = withAmplitude(withRichMessages(withCustomerProfile(withPayments(base))));
+  const widget = withAmplitude(withRichMessages(withCustomerProfile(withTheme(withPayments(base)))));
 
   return widget;
 }

packages/agent-app-sdk/src/widgets/fullscreen/fullscreen-widget.spec.ts

@@ -27,6 +27,15 @@ jest.mock('../shared/page-data', () => {
   };
 });
 
+jest.mock('../shared/theme', () => {
+  return {
+    withTheme: jest.fn().mockImplementation(widget => ({
+      ...widget, 
+      getTheme: jest.fn()
+    }))
+  };
+});
+
 describe('FullscreenWidget', () => {
   it('has a `setNotificationBadge` method', () => {
     const connection = createMockConnection();
@@ -117,13 +126,14 @@ describe('createFullscreenWidget', () => {
   });
 
   it('returns the correct object with correct properties', async () => {
-    expect.assertions(5);
+    expect.assertions(6);
 
     const widget = await createFullscreenWidget();
     expect(widget).toHaveProperty('setNotificationBadge');
     expect(widget).toHaveProperty('on');
     expect(widget).toHaveProperty('off');
     expect(widget).toHaveProperty('sendMessage');
     expect(widget).toHaveProperty('getPageData');
+    expect(widget).toHaveProperty('getTheme');
   });
 });

packages/agent-app-sdk/src/widgets/fullscreen/fullscreen-widget.ts

@@ -1,5 +1,6 @@
 import { createConnection, createWidget, IConnection, withAmplitude, withPayments } from '@livechat/widget-core-sdk';
 import { withPageData } from '../shared/page-data';
+import { withTheme } from '../shared/theme';
 import { IFullscreenWidgetApi, IFullscreenWidgetEvents, ReportsFilters } from './interfaces';
 
 export { ReportsFilters } from './interfaces';
@@ -28,7 +29,7 @@ export function FullscreenWidget(
     }
   );
 
-  return withAmplitude(withPageData(withPayments(base)));
+  return withAmplitude(withPageData(withTheme(withPayments(base))));
 }
 
 export type IFullscreenWidget = ReturnType<typeof FullscreenWidget>;

packages/agent-app-sdk/src/widgets/messagebox/messagebox-widget.spec.ts

@@ -24,6 +24,15 @@ jest.mock('../shared/customer-profile', () => {
   };
 });
 
+jest.mock('../shared/theme', () => {
+  return {
+    withTheme: jest.fn().mockImplementation(widget => ({
+      ...widget, 
+      getTheme: jest.fn()
+    }))
+  };
+});
+
 jest.mock('../shared/rich-messages', () => {
   return {
     withRichMessages: jest.fn().mockImplementation(widget => widget)
@@ -72,7 +81,7 @@ describe('createMessageBoxWidget', () => {
   });
 
   it('returns the correct object with correct properties', async () => {
-    expect.assertions(5);
+    expect.assertions(6);
 
     const widget = await createMessageBoxWidget();
 
@@ -81,5 +90,6 @@ describe('createMessageBoxWidget', () => {
     expect(widget).toHaveProperty('off');
     expect(widget).toHaveProperty('sendMessage');
     expect(widget).toHaveProperty('trackEvent');
+    expect(widget).toHaveProperty('getTheme');
   });
 });

packages/agent-app-sdk/src/widgets/messagebox/messagebox-widget.ts

@@ -1,6 +1,7 @@
 import { createConnection, createWidget, IConnection, withAmplitude, withPayments } from '@livechat/widget-core-sdk';
 import { withCustomerProfile } from '../shared/customer-profile';
 import { withRichMessages } from '../shared/rich-messages';
+import { withTheme } from '../shared/theme';
 import { IMessageBoxWidgetApi, IMessageBoxWidgetEvents, IRichMessage } from './interfaces';
 
 export function MessageBoxWidget(
@@ -21,7 +22,7 @@ export function MessageBoxWidget(
     }
   );
 
-  const widget = withAmplitude(withRichMessages(withCustomerProfile(withPayments(base))));
+  const widget = withAmplitude(withRichMessages(withCustomerProfile(withTheme(withPayments(base)))));
 
   return widget;
 }

packages/agent-app-sdk/src/widgets/settings/settings-widget.spec.ts

@@ -26,6 +26,15 @@ jest.mock('../shared/page-data', () => {
   };
 });
 
+jest.mock('../shared/theme', () => {
+  return {
+    withTheme: jest.fn().mockImplementation(widget => ({
+      ...widget, 
+      getTheme: jest.fn()
+    }))
+  };
+});
+
 describe('SettingsWidget', () => {
   it('has a `redirect` method', () => {
     const connection = createMockConnection();
@@ -75,13 +84,14 @@ describe('createSettingsWidget', () => {
   });
 
   it('returns the correct object with correct properties', async () => {
-    expect.assertions(5);
+    expect.assertions(6);
 
     const widget = await createSettingsWidget();
     expect(widget).toHaveProperty('redirect');
     expect(widget).toHaveProperty('on');
     expect(widget).toHaveProperty('off');
     expect(widget).toHaveProperty('sendMessage');
     expect(widget).toHaveProperty('getPageData');
+    expect(widget).toHaveProperty('getTheme');
   });
 });