@capillarytech/creatives-library 8.0.359-alpha.0 → 8.0.359-alpha.1

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/index.test.js

@@ -9,7 +9,16 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { injectIntl, IntlProvider } from 'react-intl';
 import UnifiedPreview from '../../UnifiedPreview';
-import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../../constants';
+import {
+  CHANNELS,
+  DESKTOP,
+  TABLET,
+  MOBILE,
+  ANDROID,
+  IOS,
+  PREVIEW_TAB_RCS,
+  PREVIEW_TAB_SMS_FALLBACK,
+} from '../../constants';
 import messages from '../../messages';
 
 // Convert messages object to format expected by IntlProvider
@@ -119,6 +128,21 @@ jest.mock('../../UnifiedPreview/ZaloPreviewContent', () => ({
   ),
 }));
 
+jest.mock('../../UnifiedPreview/WebPushPreviewContent', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div data-testid="webpush-preview">
+      <div data-testid="webpush-title">{props.notificationTitle}</div>
+      <div data-testid="webpush-body">{props.notificationBody}</div>
+      <div data-testid="webpush-image">{props.imageSrc}</div>
+      <div data-testid="webpush-icon">{props.brandIconSrc}</div>
+      <div data-testid="webpush-url">{props.url}</div>
+      <div data-testid="webpush-buttons">{JSON.stringify(props.buttons)}</div>
+      <div data-testid="webpush-fullscreen">{props.isFullscreenOpen ? 'true' : 'false'}</div>
+    </div>
+  ),
+}));
+
 jest.mock('../../UnifiedPreview/PreviewHeader', () => ({
   __esModule: true,
   default: (props) => (
@@ -547,6 +571,195 @@ describe('UnifiedPreview', () => {
 
       expect(screen.getByTestId('rcs-sender-id')).toHaveTextContent('RCS_SENDER');
     });
+
+    describe('RCS SMS fallback — Test & Preview tabs', () => {
+      it('without SMS fallback selected, shows only RCS preview (no RCS+SMS tab layout)', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: undefined,
+        };
+
+        const { container } = render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(container.querySelector('.unified-preview-rcs-tabs')).toBeNull();
+        expect(screen.getByTestId('rcs-preview')).toBeInTheDocument();
+        expect(screen.queryByTestId('sms-preview')).not.toBeInTheDocument();
+      });
+
+      it('with SMS fallback template body, shows RCS and Fallback SMS tabs', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'SMS fallback body',
+            templateContent: 'SMS fallback body',
+          },
+        };
+
+        const { container } = render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(container.querySelector('.unified-preview-rcs-tabs')).toBeInTheDocument();
+        expect(
+          screen.getByRole('tab', { name: messages.rcsTab.defaultMessage })
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole('tab', { name: messages.smsFallbackTab.defaultMessage })
+        ).toBeInTheDocument();
+      });
+
+      it('on SMS fallback tab, renders SMS preview with resolved fallback text when smsFallbackResolvedText is set', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: '{{var}}',
+            templateContent: '{{var}}',
+          },
+          smsFallbackResolvedText: 'Resolved SMS for preview',
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Resolved SMS for preview');
+      });
+
+      it('on RCS tab (default), renders RCS preview when dual tabs are shown', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Only RCS pane' },
+          smsFallbackContent: { content: 'SMS', templateContent: 'SMS' },
+          activePreviewTab: PREVIEW_TAB_RCS,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(screen.getByTestId('rcs-preview')).toBeInTheDocument();
+        expect(screen.getByTestId('rcs-content')).toHaveTextContent(/Only RCS pane/);
+      });
+
+      it('on SMS fallback tab, shows raw template when no varmap and no resolved text', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Hello {{name}}',
+            templateContent: 'Hello {{name}}',
+            // no rcsSmsFallbackVarMapped
+          },
+          smsFallbackResolvedText: undefined,
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        // rawFallbackTemplate is shown directly — {{tags}} remain visible
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello {{name}}');
+      });
+
+      it('on SMS fallback tab, treats empty resolved text as absent and shows raw template', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Raw {{var}} template',
+            templateContent: 'Raw {{var}} template',
+          },
+          smsFallbackResolvedText: '',
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Raw {{var}} template');
+      });
+
+      it('on SMS fallback tab, applies varmap slot substitution when varmap entries exist and no resolved text', () => {
+        // getFallbackResolvedContent key format: `${fullToken}_${segmentIndex}`
+        // 'Hello {{name}}' → segments ['Hello ', '{{name}}'], so {{name}} is at index 1 → key '{{name}}_1'
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Hello {{name}}',
+            templateContent: 'Hello {{name}}',
+            rcsSmsFallbackVarMapped: { '{{name}}_1': 'World' },
+          },
+          smsFallbackResolvedText: undefined,
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello World');
+      });
+
+      it('on SMS fallback tab, resolved text takes priority over varmap entries', () => {
+        const props = {
+          ...defaultProps,
+          channel: CHANNELS.RCS,
+          content: { rcsTitle: 'Hello RCS' },
+          smsFallbackContent: {
+            content: 'Hello {{name}}',
+            templateContent: 'Hello {{name}}',
+            rcsSmsFallbackVarMapped: { '{{name}}_1': 'World' },
+          },
+          smsFallbackResolvedText: 'Hello John',
+          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
+          onPreviewTabChange: jest.fn(),
+        };
+
+        render(
+          <TestWrapper>
+            <ComponentToRender {...props} />
+          </TestWrapper>
+        );
+
+        // resolvedText wins over varmap substitution
+        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello John');
+      });
+    });
   });
 
   describe('Channel Routing - INAPP', () => {
@@ -976,4 +1189,244 @@ describe('UnifiedPreview', () => {
       consoleSpy.mockRestore();
     });
   });
+
+  describe('Channel Routing - WEBPUSH', () => {
+    it('should render WebPushPreviewContent for WEBPUSH channel with object content', () => {
+      const content = {
+        content: {
+          title: 'Hello World',
+          message: 'This is a notification',
+          iconImageUrl: 'https://example.com/icon.png',
+          cta: { actionLink: 'https://example.com' },
+          expandableDetails: {
+            media: [{ url: 'https://example.com/image.jpg' }],
+            ctas: [{ title: 'Click me', actionLink: 'https://example.com/btn', type: 'EXTERNAL_URL' }],
+          },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('Hello World');
+      expect(screen.getByTestId('webpush-body')).toHaveTextContent('This is a notification');
+      expect(screen.getByTestId('webpush-icon')).toHaveTextContent('https://example.com/icon.png');
+      expect(screen.getByTestId('webpush-url')).toHaveTextContent('https://example.com');
+    });
+
+    it('should render WebPushPreviewContent for WEBPUSH channel with JSON string content', () => {
+      const contentObj = {
+        content: {
+          title: 'Push Title',
+          message: 'Push message body',
+          iconImageUrl: 'https://example.com/brand.png',
+        },
+      };
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: JSON.stringify(contentObj),
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('Push Title');
+      expect(screen.getByTestId('webpush-body')).toHaveTextContent('Push message body');
+      expect(screen.getByTestId('webpush-icon')).toHaveTextContent('https://example.com/brand.png');
+    });
+
+    it('should fallback to empty object when JSON parse fails', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: 'INVALID_JSON{{{{',
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('');
+      expect(screen.getByTestId('webpush-body')).toHaveTextContent('');
+    });
+
+    it('should fallback to empty object when content is null', () => {
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content: null };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.getByTestId('webpush-title')).toHaveTextContent('');
+    });
+
+    it('should extract imageSrc from expandableDetails.media[0].url', () => {
+      const content = {
+        content: {
+          title: 'T',
+          message: 'M',
+          expandableDetails: {
+            media: [{ url: 'https://example.com/media.jpg' }],
+            ctas: [],
+          },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-image')).toHaveTextContent('https://example.com/media.jpg');
+    });
+
+    it('should pass empty imageSrc when media array is empty', () => {
+      const content = {
+        content: {
+          title: 'T',
+          message: 'M',
+          expandableDetails: { media: [], ctas: [] },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('webpush-image')).toHaveTextContent('');
+    });
+
+    it('should map CTA buttons from expandableDetails.ctas', () => {
+      const content = {
+        content: {
+          title: 'T',
+          message: 'M',
+          expandableDetails: {
+            media: [],
+            ctas: [
+              { title: 'Btn1', actionLink: 'https://a.com', type: 'EXTERNAL_URL' },
+              { title: 'Btn2', actionLink: 'https://b.com', type: 'SITE_URL' },
+            ],
+          },
+        },
+      };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const buttons = JSON.parse(screen.getByTestId('webpush-buttons').textContent);
+      expect(buttons).toHaveLength(2);
+      expect(buttons[0]).toEqual({ text: 'Btn1', url: 'https://a.com', type: 'EXTERNAL_URL' });
+      expect(buttons[1]).toEqual({ text: 'Btn2', url: 'https://b.com', type: 'SITE_URL' });
+    });
+
+    it('should pass empty buttons array when no ctas', () => {
+      const content = { content: { title: 'T', message: 'M' } };
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const buttons = JSON.parse(screen.getByTestId('webpush-buttons').textContent);
+      expect(buttons).toEqual([]);
+    });
+
+    it('should NOT show device toggle for WEBPUSH channel', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        showDeviceToggle: true,
+        showHeader: true,
+        selectedCustomer: { name: 'Alice' },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // PreviewHeader is mocked - verify it receives showDeviceToggle=false for WEBPUSH
+      const header = screen.getByTestId('preview-header');
+      expect(header).toBeTruthy();
+    });
+
+    it('should include WEBPUSH in supported channels list', () => {
+      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content: {} };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // WEBPUSH should render WebPushPreviewContent, not the unsupported placeholder
+      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
+      expect(screen.queryByText(/Coming Soon/)).toBeNull();
+    });
+
+    it('should pass isUpdating to WebPushPreviewContent in loading state', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: { content: { title: 'T', message: 'M' } },
+        isUpdating: true,
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // When isUpdating, component shows loading spinner, not WebPushPreviewContent
+      expect(screen.queryByTestId('webpush-preview')).toBeNull();
+    });
+
+    it('should pass error to WebPushPreviewContent in error state', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        content: { content: { title: 'T', message: 'M' } },
+        error: 'Network error',
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      // When error, component shows error state, not WebPushPreviewContent
+      expect(screen.queryByTestId('webpush-preview')).toBeNull();
+    });
+  });
 });

package/v2Components/CommonTestAndPreview/tests/constants.test.js

@@ -179,10 +179,11 @@ describe('CommonTestAndPreview Constants', () => {
       expect(CHANNELS.MOBILEPUSH).toBe('MOBILEPUSH');
       expect(CHANNELS.VIBER).toBe('VIBER');
       expect(CHANNELS.ZALO).toBe('ZALO');
+      expect(CHANNELS.WEBPUSH).toBe('WEBPUSH');
     });
 
     it('should have all required channel keys', () => {
-      const expectedChannels = ['EMAIL', 'SMS', 'RCS', 'WHATSAPP', 'INAPP', 'MOBILEPUSH', 'VIBER', 'ZALO'];
+      const expectedChannels = ['EMAIL', 'SMS', 'RCS', 'WHATSAPP', 'INAPP', 'MOBILEPUSH', 'VIBER', 'ZALO', 'WEBPUSH'];
       expect(Object.keys(CHANNELS)).toEqual(expect.arrayContaining(expectedChannels));
       expect(Object.keys(CHANNELS).length).toBe(expectedChannels.length);
     });