fix(cc-digital-channels): get-theme-value-from-store (#625)

Author: akulakum

packages/contact-center/cc-digital-channels/src/digital-channels/DigitalChannelsComponent.tsx

@@ -20,7 +20,7 @@ const DigitalChannelsComponent: React.FunctionComponent<DigitalChannelsComponent
     return `${conversationId}-${jwtToken.slice(-8)}-${dataCenter}`;
   }, [conversationId, jwtToken, dataCenter]);
 
-  const isDarkTheme = currentTheme === 'DARK';
+  const isDarkTheme = currentTheme?.toUpperCase() === 'DARK';
 
   return (
     <div>

packages/contact-center/cc-digital-channels/src/digital-channels/digital-channels.types.ts

@@ -22,10 +22,6 @@ export interface DigitalChannelsDataHookProps {
   };
 }
 
-export interface DigitalChannelsProps {
-  currentTheme?: string;
-}
-
 export interface DigitalChannelsComponentProps {
   conversationId: string;
   jwtToken: string;

packages/contact-center/cc-digital-channels/src/digital-channels/index.tsx

@@ -5,11 +5,17 @@ import {ErrorBoundary} from 'react-error-boundary';
 import store from '@webex/cc-store';
 import {useDigitalChannelsInit, useDigitalChannelsData} from '../helper';
 import {DigitalChannelsComponent} from './DigitalChannelsComponent';
-import {DigitalChannelsProps} from './digital-channels.types';
 
-const DigitalChannelsInternal: React.FunctionComponent<DigitalChannelsProps> = observer(({currentTheme}) => {
-  const {logger, currentTask, isDigitalChannelsInitialized, setDigitalChannelsInitialized, getAccessToken, dataCenter} =
-    store;
+const DigitalChannelsInternal: React.FunctionComponent = observer(() => {
+  const {
+    logger,
+    currentTask,
+    isDigitalChannelsInitialized,
+    setDigitalChannelsInitialized,
+    getAccessToken,
+    dataCenter,
+    currentTheme,
+  } = store;
 
   // Fetch JWT token and conversation ID
   const {jwtToken, conversationId, hasError} = useDigitalChannelsData({
@@ -45,15 +51,15 @@ const DigitalChannelsInternal: React.FunctionComponent<DigitalChannelsProps> = o
   );
 });
 
-const DigitalChannels: React.FunctionComponent<DigitalChannelsProps> = (props) => {
+const DigitalChannels: React.FunctionComponent = () => {
   return (
     <ErrorBoundary
       fallbackRender={() => <></>}
       onError={(error: Error) => {
         if (store.onErrorCallback) store.onErrorCallback('DigitalChannels', error);
       }}
     >
-      <DigitalChannelsInternal {...props} />
+      <DigitalChannelsInternal />
     </ErrorBoundary>
   );
 };

packages/contact-center/cc-digital-channels/tests/digital-channels/DigitalChannelsComponent.test.tsx

@@ -92,4 +92,58 @@ describe('DigitalChannelsComponent', () => {
     expect(engageWidget).toHaveAttribute('data-conversation-id', 'test-conv-123');
     expect(engageWidget).toHaveAttribute('data-visual-rebrand', 'true');
   });
+
+  it('should render dark theme when currentTheme is lowercase "dark"', () => {
+    const {container, getByTestId} = render(
+      <DigitalChannelsComponent
+        conversationId="conversation-id"
+        jwtToken="jwt-token"
+        dataCenter="produs1"
+        currentTheme="dark"
+      />
+    );
+
+    const mdTheme = container.querySelector('md-theme#app-theme');
+    expect(mdTheme).toBeInTheDocument();
+    expect(mdTheme).toHaveAttribute('darktheme');
+
+    const engageWidget = getByTestId('engage-widget');
+    expect(engageWidget).toHaveAttribute('data-theme', 'dark');
+  });
+
+  it('should render dark theme when currentTheme is mixed-case "Dark"', () => {
+    const {container, getByTestId} = render(
+      <DigitalChannelsComponent
+        conversationId="conversation-id"
+        jwtToken="jwt-token"
+        dataCenter="produs1"
+        currentTheme="Dark"
+      />
+    );
+
+    const mdTheme = container.querySelector('md-theme#app-theme');
+    expect(mdTheme).toBeInTheDocument();
+    expect(mdTheme).toHaveAttribute('darktheme');
+
+    const engageWidget = getByTestId('engage-widget');
+    expect(engageWidget).toHaveAttribute('data-theme', 'dark');
+  });
+
+  it('should render light theme when currentTheme is lowercase "light"', () => {
+    const {container, getByTestId} = render(
+      <DigitalChannelsComponent
+        conversationId="conversation-id"
+        jwtToken="jwt-token"
+        dataCenter="produs1"
+        currentTheme="light"
+      />
+    );
+
+    const mdTheme = container.querySelector('md-theme#app-theme');
+    expect(mdTheme).toBeInTheDocument();
+    expect(mdTheme).toHaveAttribute('lighttheme');
+
+    const engageWidget = getByTestId('engage-widget');
+    expect(engageWidget).toHaveAttribute('data-theme', 'light');
+  });
 });

packages/contact-center/cc-digital-channels/tests/digital-channels/index.tsx

@@ -70,6 +70,7 @@ jest.mock('@webex/cc-store', () => {
     currentTask = mockCurrentTaskWithConversationId;
     isDigitalChannelsInitialized = false;
     dataCenter = mockDataCenter;
+    currentTheme = 'LIGHT';
     onErrorCallback = jest.fn();
 
     constructor() {
@@ -85,6 +86,12 @@ jest.mock('@webex/cc-store', () => {
       });
     });
 
+    setCurrentTheme = jest.fn((theme: string) => {
+      runInAction(() => {
+        this.currentTheme = theme;
+      });
+    });
+
     getAccessToken = jest.fn().mockResolvedValue(mockJwtToken);
   }
 
@@ -94,7 +101,6 @@ jest.mock('@webex/cc-store', () => {
 import {DigitalChannels} from '../../src/digital-channels';
 import {mockTask as mockTaskFixture} from '@webex/test-fixtures';
 
-const mockProps = {};
 let mockShouldThrow = false;
 
 jest.mock('../../src/digital-channels/DigitalChannelsComponent', () => {
@@ -117,7 +123,7 @@ describe('DigitalChannels Component - Integration Tests with Real Components', (
   });
 
   it('should successfully load and initialize real Engage component without errors', async () => {
-    const screen = render(<DigitalChannels {...mockProps} />);
+    const screen = render(<DigitalChannels />);
 
     // Wait for the widget to be loaded in the DOM
     await waitFor(
@@ -155,8 +161,16 @@ describe('DigitalChannels Component - Integration Tests with Real Components', (
     expect(engageWidget).toHaveAttribute('data-visual-rebrand', 'true');
   });
 
-  it('should render with dark theme when currentTheme is DARK', async () => {
-    const screen = render(<DigitalChannels currentTheme="DARK" />);
+  it('should render with dark theme when currentTheme is DARK in store', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const storeModule = require('@webex/cc-store');
+
+    // Set dark theme in store before rendering
+    runInAction(() => {
+      storeModule.default.currentTheme = 'DARK';
+    });
+
+    const screen = render(<DigitalChannels />);
 
     // Wait for the widget to be loaded in the DOM
     await waitFor(
@@ -179,6 +193,14 @@ describe('DigitalChannels Component - Integration Tests with Real Components', (
     const engageWidget = screen.getByTestId('engage-widget');
     expect(engageWidget).toBeInTheDocument();
     expect(engageWidget).toHaveAttribute('data-theme', 'dark');
+
+    // Unmount the component before resetting theme to avoid act() warning
+    screen.unmount();
+
+    // Reset theme to default for other tests
+    runInAction(() => {
+      storeModule.default.currentTheme = 'LIGHT';
+    });
   });
 
   it('should have proper store integration', async () => {
@@ -194,7 +216,7 @@ describe('DigitalChannels Component - Integration Tests with Real Components', (
     expect(storeModule.default.onErrorCallback).toBeDefined();
 
     // Component should be able to access store without issues
-    const screen = render(<DigitalChannels {...mockProps} />);
+    const screen = render(<DigitalChannels />);
 
     // Wait for the widget to appear in the DOM, proving store integration works
     await waitFor(
@@ -231,7 +253,7 @@ describe('DigitalChannels Component - Integration Tests with Real Components', (
       });
     });
 
-    const screen = render(<DigitalChannels {...mockProps} />);
+    const screen = render(<DigitalChannels />);
 
     // Verify nothing is rendered when currentTask is null
     expect(screen.container.querySelector('md-theme')).toBeNull();
@@ -295,7 +317,7 @@ describe('DigitalChannels Component - Integration Tests with Real Components', (
     });
 
     it('should not render', async () => {
-      const screen = render(<DigitalChannels {...mockProps} />);
+      const screen = render(<DigitalChannels />);
 
       // Wait for any async updates to complete
       await waitFor(() => {
@@ -333,7 +355,7 @@ describe('DigitalChannels Component - Integration Tests with Real Components', (
     });
 
     it('should not render', async () => {
-      const screen = render(<DigitalChannels {...mockProps} />);
+      const screen = render(<DigitalChannels />);
 
       // Wait for any async updates to complete
       await waitFor(() => {
@@ -369,7 +391,7 @@ describe('DigitalChannels ErrorBoundary', () => {
 
     mockShouldThrow = true;
 
-    const screen = render(<DigitalChannels {...mockProps} />);
+    const screen = render(<DigitalChannels />);
 
     await waitFor(() => {
       expect(onErrorCallback).toHaveBeenCalledWith('DigitalChannels', expect.any(Error));
@@ -392,7 +414,7 @@ describe('DigitalChannels ErrorBoundary', () => {
     mockShouldThrow = true;
 
     // Render should not throw when onErrorCallback is undefined
-    const screen = render(<DigitalChannels {...mockProps} />);
+    const screen = render(<DigitalChannels />);
 
     // Wait for error boundary to catch and handle the error
     await waitFor(() => {

packages/contact-center/cc-widgets/src/wc.ts

@@ -54,11 +54,7 @@ const WebCallControlCAD = r2wc(CallControlCAD, {
 
 const WebOutdialCall = r2wc(OutdialCall, {});
 
-const WebDigitalChannels = r2wc(DigitalChannels, {
-  props: {
-    currentTheme: 'string',
-  },
-});
+const WebDigitalChannels = r2wc(DigitalChannels, {});
 
 // Whenever there is a new component, add the name of the component
 // and the web-component to the components object

widgets-samples/cc/samples-cc-react-app/src/EngageWidget.tsx

@@ -77,7 +77,7 @@ const EngageWidget: React.FC<EngageWidgetProps> = ({currentTheme, isSdkReady}) =
         </div>
         <div className={`${CSS_CLASSES.CONTENT_AREA} ${themeClass}`}>
           {isSupportedTask && isSdkReady ? (
-            <DigitalChannels currentTheme={currentTheme} />
+            <DigitalChannels />
           ) : (
             <div className={CSS_CLASSES.CONTENT_PLACEHOLDER}>
               {!isSdkReady ? MESSAGES.INITIALIZING : MESSAGES.NO_ACTIVE_TASKS}