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

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

@@ -200,6 +200,370 @@ describe('ViberPreviewContent', () => {
 
       expect(screen.getByText('Click Here')).toBeTruthy();
     });
+
+    it('should not render button when buttonText has only whitespace', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            messageContent: 'Message',
+            buttonText: '   ',
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-button-base')).toBeFalsy();
+    });
+  });
+
+  describe('Carousel Content', () => {
+    it('should render no content when carousel is selected but cards are empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: '',
+                mediaUrl: '',
+                buttons: [
+                  { title: '', action: '' },
+                ],
+              },
+              {
+                text: '   ',
+                mediaUrl: '   ',
+                buttons: [
+                  { title: '   ', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('No content available')).toBeTruthy();
+    });
+
+    it('should render carousel cards when type is CAROUSEL', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card 1 text',
+                mediaUrl: 'https://image.url/card1.jpg',
+                buttons: [
+                  { title: 'Button 1', action: 'https://example.com/1' },
+                ],
+              },
+              {
+                text: 'Card 2 text',
+                mediaUrl: 'https://image.url/card2.jpg',
+                buttons: [
+                  { title: 'Button 2', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Card 1 text')).toBeTruthy();
+      expect(screen.getByText('Card 2 text')).toBeTruthy();
+      expect(screen.getByText('Button 1')).toBeTruthy();
+      expect(screen.getByText('Button 2')).toBeTruthy();
+    });
+
+    it('should not render empty carousel button placeholder', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card 1 text',
+                mediaUrl: 'https://image.url/card1.jpg',
+                buttons: [
+                  { title: '', action: 'https://example.com/1' },
+                  { title: '   ', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-preview-button')).toBeNull();
+    });
+
+    it('should show carousel shell when showCarouselEditorPreview is true even if cards are empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            showCarouselEditorPreview: true,
+            cards: [
+              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
+              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByText('No content available')).toBeNull();
+      expect(container.querySelector('.viber-carousel-preview-scroll')).toBeTruthy();
+      expect(container.querySelector('.viber-carousel-message-box-placeholder')).toBeTruthy();
+    });
+
+    it('should render carousel message text in message box when type is CAROUSEL', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            messageContent: 'Carousel intro copy',
+            cards: [
+              {
+                text: 'Card text',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [{ title: 'Go', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-message-box-text')).toHaveTextContent('Carousel intro copy');
+      expect(screen.queryByText('Carousel intro copy')).toBeTruthy();
+    });
+
+    it('should hide account icon when carousel is shown', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Carousel card line',
+                mediaUrl: '',
+                buttons: [{ title: 'Open link', action: 'https://x.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-account-icon')).toBeNull();
+    });
+
+    it('should use image placeholder when carousel card mediaUrl is whitespace only', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Only text',
+                mediaUrl: '   ',
+                buttons: [{ title: 'Btn', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-preview-image-placeholder')).toBeTruthy();
+      expect(container.querySelector('.viber-carousel-preview-image')).toBeNull();
+    });
+
+    it('should render at most two carousel buttons per card', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [
+                  { title: 'One', action: 'https://a.com' },
+                  { title: 'Two', action: 'https://b.com' },
+                  { title: 'Three', action: 'https://c.com' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelectorAll('.viber-carousel-preview-button')).toHaveLength(2);
+      expect(screen.getByText('One')).toBeTruthy();
+      expect(screen.getByText('Two')).toBeTruthy();
+      expect(screen.queryByText('Three')).toBeNull();
+    });
+
+    it('should apply secondary class to second carousel button', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [
+                  { title: 'Primary', action: 'https://a.com' },
+                  { title: 'Secondary', action: 'https://b.com' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const buttons = container.querySelectorAll('.viber-carousel-preview-button');
+      expect(buttons[0].className).toContain('viber-carousel-preview-button');
+      expect(buttons[0].className).not.toContain('viber-carousel-preview-button-secondary');
+      expect(buttons[1].className).toContain('viber-carousel-preview-button-secondary');
+    });
+
+    it('should show carousel when only a button title is present on a card', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: '',
+                mediaUrl: '',
+                buttons: [{ title: 'Tap me', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Tap me')).toBeTruthy();
+      expect(screen.queryByText('No content available')).toBeNull();
+    });
+
+    it('should show one placeholder card when editor preview and cards array is empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            showCarouselEditorPreview: true,
+            cards: [],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelectorAll('.viber-carousel-preview-card')).toHaveLength(1);
+    });
+
+    it('should show no content when CAROUSEL has empty cards and no editor preview flag', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('No content available')).toBeTruthy();
+    });
   });
 
   describe('Account and Brand Name', () => {

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

@@ -119,21 +119,6 @@ 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) => (
@@ -991,244 +976,4 @@ 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,11 +179,10 @@ 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', 'WEBPUSH'];
+      const expectedChannels = ['EMAIL', 'SMS', 'RCS', 'WHATSAPP', 'INAPP', 'MOBILEPUSH', 'VIBER', 'ZALO'];
       expect(Object.keys(CHANNELS)).toEqual(expect.arrayContaining(expectedChannels));
       expect(Object.keys(CHANNELS).length).toBe(expectedChannels.length);
     });