@capillarytech/creatives-library 8.0.354 → 8.0.356

package/v2Components/CommonTestAndPreview/index.js

@@ -81,7 +81,8 @@ import {
   IMAGE,
   VIDEO,
   URL,
-  CHANNELS_USING_ANDROID_PREVIEW_DEVICE
+  CHANNELS_USING_ANDROID_PREVIEW_DEVICE,
+  DAYS,
 } from './constants';
 
 // Import utilities
@@ -610,6 +611,12 @@ const CommonTestAndPreview = (props) => {
           messageBody: contentStr,
         };
 
+      case CHANNELS.WEBPUSH:
+        return {
+          ...basePayload,
+          messageBody: contentStr,
+        };
+
       default:
         return basePayload;
     }
@@ -662,6 +669,12 @@ const CommonTestAndPreview = (props) => {
           templateContent: contentStr,
         };
 
+      case CHANNELS.WEBPUSH:
+        return {
+          templateSubject: formDataObj?.content?.title || '',
+          templateContent: contentStr,
+        };
+
       case CHANNELS.ZALO: {
         // For Zalo, extract content from templateListParams array
         // Combine all variable values into a single string for tag extraction
@@ -1801,6 +1814,42 @@ const CommonTestAndPreview = (props) => {
         };
       }
 
+      case CHANNELS.WEBPUSH: {
+        const webpushData = (typeof formDataObj === 'object' && formDataObj !== null)
+          ? formDataObj
+          : {};
+        const innerContent = webpushData?.content || {};
+
+        const resolvedTitle = resolveTagsInText(innerContent?.title || '', customValuesObj);
+        const resolvedMessage = resolveTagsInText(innerContent?.message || '', customValuesObj);
+
+        return {
+          ...basePayload,
+          webPushMessageContent: {
+            channel: CHANNELS.WEBPUSH,
+            accountId: webpushData?.accountId || null,
+            content: {
+              title: resolvedTitle,
+              message: resolvedMessage,
+              ...(innerContent?.iconImageUrl && { iconImageUrl: innerContent.iconImageUrl }),
+              ...(innerContent?.cta && { cta: innerContent.cta }),
+              ...(innerContent?.expandableDetails && { expandableDetails: innerContent.expandableDetails }),
+            },
+            messageSubject: webpushData?.messageSubject || resolvedTitle || '',
+          },
+          webPushDeliverySettings: {
+            channelSettings: {
+              channel: CHANNELS.WEBPUSH,
+              notificationTtl: {
+                duration: 7,
+                timeUnit: DAYS,
+              },
+            },
+            additionalSettings: {},
+          },
+        };
+      }
+
       default:
         return basePayload;
     }
@@ -1832,7 +1881,7 @@ const CommonTestAndPreview = (props) => {
       contentObj = hasPreviewCallBeenMade && previewDataHtml?.resolvedBody
         ? previewDataHtml.resolvedBody
         : getCurrentContent || '';
-    } else if (channel === CHANNELS.WHATSAPP) {
+    } else if ([CHANNELS.WHATSAPP, CHANNELS.WEBPUSH].includes(channel)) {
       // For WhatsApp, content is an object with templateMsg, media, CTA, etc.
       // Content comes from WhatsApp component state, passed via content prop
       let resolvedContent = null;

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

@@ -514,4 +514,167 @@ describe('PreviewHeader', () => {
       consoleSpy.mockRestore();
     });
   });
+
+  describe('WEBPUSH channel - Fullscreen expander', () => {
+    it('should render expander icon for WEBPUSH channel', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // expander icon should be present for WEBPUSH
+      const expanderIcon = container.querySelector('[class*="expander"], [aria-label*="expander"], .anticon');
+      expect(expanderIcon).toBeTruthy();
+    });
+
+    it('should NOT render expander icon for non-WEBPUSH channels', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.EMAIL,
+        setIsFullscreenOpen,
+        showDeviceToggle: false,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // No expander icon for EMAIL channel (only device toggle icons may appear)
+      const expanderIcon = container.querySelector('[class*="expander"]');
+      expect(expanderIcon).toBeNull();
+    });
+
+    it('should call setIsFullscreenOpen(true) when expander icon is clicked', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      const expanderIcon = container.querySelector('[class*="expander"]') ||
+        container.querySelector('.anticon');
+      if (expanderIcon) {
+        fireEvent.click(expanderIcon);
+        expect(setIsFullscreenOpen).toHaveBeenCalledWith(true);
+      }
+    });
+
+    it('should render expander icon without ACTIVE class when device is MOBILE', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        device: MOBILE,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // Expander icon no longer adds ACTIVE class based on device
+      const activeEl = container.querySelector('.active');
+      expect(activeEl).toBeNull();
+      // But the expander icon itself should still be present
+      const expanderIcon = container.querySelector('[class*="expander"]') ||
+        container.querySelector('.anticon');
+      expect(expanderIcon).toBeTruthy();
+    });
+
+    it('should render expander icon without ACTIVE class when device is DESKTOP', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        device: DESKTOP,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // Expander icon does not have ACTIVE class for any device
+      const activeEl = container.querySelector('.active');
+      expect(activeEl).toBeNull();
+    });
+
+    it('should render expander icon alongside device content for WEBPUSH', () => {
+      // Note: suppression of showDeviceToggle for WEBPUSH is done in UnifiedPreview (parent),
+      // not in PreviewHeader itself. PreviewHeader only adds the expander icon for WEBPUSH.
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        setIsFullscreenOpen,
+        showDeviceToggle: false,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // expander icon should be present for WEBPUSH
+      const expanderIcon = container.querySelector('[class*="expander"]') ||
+        container.querySelector('.anticon');
+      expect(expanderIcon).toBeTruthy();
+    });
+
+    it('should accept isFullscreenOpen and setIsFullscreenOpen as props', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        isFullscreenOpen: false,
+        setIsFullscreenOpen,
+      };
+
+      expect(() =>
+        render(
+          <TestWrapper>
+            <PreviewHeader {...props} />
+          </TestWrapper>
+        )
+      ).not.toThrow();
+    });
+
+    it('should use default setIsFullscreenOpen when not provided', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+      };
+
+      expect(() =>
+        render(
+          <TestWrapper>
+            <PreviewHeader {...props} />
+          </TestWrapper>
+        )
+      ).not.toThrow();
+    });
+  });
 });