@capillarytech/creatives-library 8.0.353-alpha.2 → 8.0.353-alpha.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.353-alpha.2",
+  "version": "8.0.353-alpha.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CommonTestAndPreview/UnifiedPreview/PreviewHeader.js

@@ -23,6 +23,7 @@ const PreviewHeader = ({
   showDeviceToggle,
   onDeviceChange,
   channel,
+  setIsFullscreenOpen,
 }) => {
   // Determine if this is SMS, WhatsApp, RCS, InApp, MobilePush, or Viber channel (uses Android/iOS) or other channels (uses Desktop/Mobile)
   const isSmsChannel = channel === CHANNELS.SMS;
@@ -31,8 +32,13 @@ const PreviewHeader = ({
   const isInAppChannel = channel === CHANNELS.INAPP;
   const isMobilePushChannel = channel === CHANNELS.MOBILEPUSH;
   const isViberChannel = channel === CHANNELS.VIBER;
+  const isWebPushChannel = channel === CHANNELS.WEBPUSH;
   const isAndroidIosToggle = isSmsChannel || isWhatsappChannel || isRcsChannel || isInAppChannel || isMobilePushChannel || isViberChannel;
 
+  const handleOpenFullscreen = () => {
+    setIsFullscreenOpen(true);
+  };
+
   return (
     <CapRow className="preview-chrome">
       <div className="preview-header">
@@ -80,6 +86,13 @@ const PreviewHeader = ({
             )}
           </CapRow>
         )}
+        {isWebPushChannel && (
+          <CapIcon
+            type="expander"
+            className={device === MOBILE ? ACTIVE : ''}
+            onClick={() => handleOpenFullscreen()}
+          />
+        )}
       </div>
     </CapRow>
   );
@@ -95,6 +108,8 @@ PreviewHeader.propTypes = {
   showDeviceToggle: PropTypes.bool,
   onDeviceChange: PropTypes.func,
   channel: PropTypes.string,
+  isFullscreenOpen: PropTypes.bool,
+  setIsFullscreenOpen: PropTypes.func,
 };
 
 PreviewHeader.defaultProps = {
@@ -103,6 +118,8 @@ PreviewHeader.defaultProps = {
   showDeviceToggle: false,
   onDeviceChange: () => {},
   channel: null,
+  isFullscreenOpen: () => {},
+  setIsFullscreenOpen: () => false,
 };
 
 export default PreviewHeader;

package/v2Components/CommonTestAndPreview/UnifiedPreview/WebPushPreviewContent.js

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapModal from '@capillarytech/cap-ui-library/CapModal';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import PreviewControls from '../../../v2Containers/WebPush/Create/preview/PreviewControls';
+import PreviewContent from '../../../v2Containers/WebPush/Create/preview/PreviewContent';
+import DevicePreviewContent from '../../../v2Containers/WebPush/Create/preview/DevicePreviewContent';
+import {
+  OS_OPTIONS,
+  DEFAULT_OS,
+  DEFAULT_BROWSER,
+} from '../../../v2Containers/WebPush/Create/preview/constants';
+import { getBrowserOptionsForOS } from '../../../v2Containers/WebPush/Create/preview/config/notificationMappings';
+import messages from '../messages';
+
+const WebPushPreviewContent = ({
+  notificationTitle,
+  notificationBody,
+  imageSrc,
+  brandIconSrc,
+  buttons,
+  url,
+  isUpdating,
+  error,
+  isFullscreenOpen,
+  setIsFullscreenOpen,
+  selectedCustomer,
+}) => {
+  const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
+  const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);
+
+  const browserOptionsForOS = getBrowserOptionsForOS(selectedOS);
+
+  // Coerce browser when OS change removes current browser from available options
+  useEffect(() => {
+    const isValid = browserOptionsForOS.some((opt) => opt.value === selectedBrowser);
+    if (!isValid && browserOptionsForOS.length) {
+      setSelectedBrowser(browserOptionsForOS[0].value);
+    }
+  }, [browserOptionsForOS, selectedBrowser]);
+
+  const handleOSChange = (value) => {
+    setSelectedOS(value);
+  };
+
+  const handleBrowserChange = (value) => {
+    setSelectedBrowser(value);
+  };
+
+  const handleCloseFullscreen = () => {
+    setIsFullscreenOpen(false);
+  };
+
+  if (isUpdating) {
+    return null;
+  }
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <CapRow className="webpush-test-preview-container webpush-preview-container">
+      <div className="webpush-preview-panel">
+        <PreviewControls
+          selectedOS={selectedOS}
+          selectedBrowser={selectedBrowser}
+          osOptions={OS_OPTIONS}
+          browserOptions={browserOptionsForOS}
+          onOSChange={handleOSChange}
+          onBrowserChange={handleBrowserChange}
+          layoutMode="newRow"
+          showStateDropdown={false}
+        />
+
+        <PreviewContent
+          notificationTitle={notificationTitle}
+          notificationBody={notificationBody}
+          url={url}
+          selectedOS={selectedOS}
+          selectedBrowser={selectedBrowser}
+          notificationState="Collapsed"
+          imageSrc={imageSrc}
+          brandIconSrc={brandIconSrc}
+          buttons={buttons}
+        />
+      </div>
+
+      <CapModal
+        visible={isFullscreenOpen}
+        onCancel={handleCloseFullscreen}
+        width="90%"
+        centered
+        closable={false}
+        footer={null}
+        title={null}
+        maskClosable
+        className="webpush-fullscreen-modal webpush-preview-container"
+      >
+        <CapRow className="webpush-preview-header">
+          <div className="webpush-heading-container">
+            <CapRow type="flex" className="preview-for">
+              <CapLabel type="label16">
+                <FormattedMessage {...messages.previewFor} />
+              </CapLabel>
+              <CapLabel type="label2">
+                {selectedCustomer ? selectedCustomer.name : <FormattedMessage {...messages.defaultPreview} />}
+              </CapLabel>
+            </CapRow>
+            <CapIcon
+              type="collapse2"
+              onClick={() => handleCloseFullscreen()}
+              className="webpush-fullscreen-close-icon"
+            />
+          </div>
+        </CapRow>
+        <CapDivider className="webpush-fullscreen-divider" />
+        <DevicePreviewContent
+          notificationTitle={notificationTitle}
+          notificationBody={notificationBody}
+          url={url}
+          imageSrc={imageSrc}
+          brandIconSrc={brandIconSrc}
+          buttons={buttons}
+        />
+      </CapModal>
+    </CapRow>
+  );
+};
+
+WebPushPreviewContent.propTypes = {
+  notificationTitle: PropTypes.string,
+  notificationBody: PropTypes.string,
+  imageSrc: PropTypes.string,
+  brandIconSrc: PropTypes.string,
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      url: PropTypes.string,
+      type: PropTypes.string,
+    })
+  ),
+  url: PropTypes.string,
+  isUpdating: PropTypes.bool,
+  error: PropTypes.string,
+  isFullscreenOpen: PropTypes.bool,
+  setIsFullscreenOpen: PropTypes.func,
+  selectedCustomer: PropTypes.object,
+};
+
+WebPushPreviewContent.defaultProps = {
+  notificationTitle: '',
+  notificationBody: '',
+  imageSrc: '',
+  brandIconSrc: '',
+  buttons: [],
+  url: '',
+  isUpdating: false,
+  error: null,
+  isFullscreenOpen: false,
+  setIsFullscreenOpen: () => {},
+  selectedCustomer: null,
+};
+
+export default WebPushPreviewContent;

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2350,6 +2350,76 @@
     }
   }
 
+  // WebPush Test & Preview Styles
+  .webpush-test-preview-container {
+    width: 100%;
+    position: relative;
+    padding-left: $CAP_SPACE_16;
+    padding-right: $CAP_SPACE_16;
+  }
+
+  .webpush-preview-panel {
+    position: relative;
+    width: 100%;
+  }
+
+  .webpush-expand-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 10;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+    }
+  }
+
+  .webpush-fullscreen-modal {
+    .webpush-fullscreen-divider {
+      margin-top: 0;
+      margin-bottom: $CAP_SPACE_16;
+    }
+    .ant-modal.cap-modal-v2 {
+      width: 90%;
+      max-width: 100%;
+      margin-top: $CAP_SPACE_40;
+    }
+    // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
+    .webpush-preview-header {
+      background: $CAP_WHITE;
+      overflow: hidden;
+  
+      .preview-divider {
+        margin: 0;
+      }
+  
+      .webpush-heading-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: $CAP_SPACE_16 0 $CAP_SPACE_16 0;
+  
+        .preview-for {
+          gap: $CAP_SPACE_04;
+          align-items: center;
+          b {
+            margin-left: $CAP_SPACE_08;
+          }
+        }
+        
+        .webpush-fullscreen-close-icon {
+          width: $CAP_SPACE_24;
+          height: $CAP_SPACE_24;
+        }
+      }
+    }
+  }
+
   // Responsive adjustments
   @media (max-width: 85.714rem) {
     .unified-preview {

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -6,7 +6,7 @@
  * Routes to channel-specific preview content components
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
@@ -21,6 +21,7 @@ import InAppPreviewContent from './InAppPreviewContent';
 import MobilePushPreviewContent from './MobilePushPreviewContent';
 import ViberPreviewContent from './ViberPreviewContent';
 import ZaloPreviewContent from './ZaloPreviewContent';
+import WebPushPreviewContent from './WebPushPreviewContent';
 import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../constants';
 import messages from '../messages';
 import './_unifiedPreview.scss';
@@ -44,6 +45,7 @@ const UnifiedPreview = ({
    * For Phase 5, we'll render placeholders
    * Phase 6+ will implement actual content components
    */
+  const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);
   const renderChannelContent = () => {
     // Phase 5: Placeholder content for all channels
     // Phase 6+: Import and render actual channel-specific components
@@ -197,6 +199,40 @@ const UnifiedPreview = ({
         );
       }
 
+      case CHANNELS.WEBPUSH: {
+        // WebPush content arrives as a JSON string (from getCurrentContent or preview API response)
+        let webPushOuter = {};
+        try {
+          webPushOuter = typeof content === 'string' ? JSON.parse(content) : (typeof content === 'object' && content !== null ? content : {});
+        } catch (e) {
+          webPushOuter = {};
+        }
+        const webPushInner = webPushOuter?.content || {};
+        const webPushExpandable = webPushInner?.expandableDetails || {};
+        const webPushMedia = webPushExpandable?.media || [];
+        const webPushCtas = webPushExpandable?.ctas || [];
+        const webPushButtons = webPushCtas.map((cta) => ({
+          text: cta?.title || '',
+          url: cta?.actionLink || '',
+          type: cta?.type || '',
+        }));
+        return (
+          <WebPushPreviewContent
+            notificationTitle={webPushInner?.title || ''}
+            notificationBody={webPushInner?.message || ''}
+            imageSrc={webPushMedia[0]?.url || ''}
+            brandIconSrc={webPushInner?.iconImageUrl || ''}
+            buttons={webPushButtons}
+            url={webPushInner?.cta?.actionLink || ''}
+            isUpdating={isUpdating}
+            error={error}
+            isFullscreenOpen={isFullscreenOpen}
+            setIsFullscreenOpen={setIsFullscreenOpen}
+            selectedCustomer={selectedCustomer}
+          />
+        );
+      }
+
       default:
         return (
           <div className="channel-preview-placeholder">
@@ -222,9 +258,10 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showDeviceToggle}
+            showDeviceToggle={channel !== CHANNELS.WEBPUSH && showDeviceToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
+            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-loading-container">
@@ -247,9 +284,10 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showDeviceToggle}
+            showDeviceToggle={channel !== CHANNELS.WEBPUSH && showDeviceToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
+            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-error-container">
@@ -275,15 +313,16 @@ const UnifiedPreview = ({
         <PreviewHeader
           selectedCustomer={selectedCustomer}
           device={device}
-          showDeviceToggle={showDeviceToggle}
+          showDeviceToggle={channel !== CHANNELS.WEBPUSH && showDeviceToggle}
           onDeviceChange={onDeviceChange}
           channel={channel}
+          setIsFullscreenOpen={setIsFullscreenOpen}
         />
       )}
 
       {/* Channel-specific preview content */}
       <CapRow className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
-        {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER].includes(channel) ? (
+        {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.WEBPUSH].includes(channel) ? (
           renderChannelContent()
         ) : (
           <DeviceFrame device={device || DESKTOP}>

package/v2Components/CommonTestAndPreview/constants.js

@@ -85,6 +85,7 @@ export const CHANNELS = {
   MOBILEPUSH: 'MOBILEPUSH',
   VIBER: 'VIBER',
   ZALO: 'ZALO',
+  WEBPUSH: 'WEBPUSH',
 };
 export const CHANNELS_USING_ANDROID_PREVIEW_DEVICE = [CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.INAPP, CHANNELS.MOBILEPUSH];
 
@@ -203,6 +204,7 @@ export const DYNAMIC_URL = 'DYNAMIC_URL';
 export const IMAGE = 'IMAGE';
 export const VIDEO = 'VIDEO';
 export const URL = 'URL';
+export const DAYS = 'DAYS';
 
 // Initial Payload Template (for reference)
 export const INITIAL_PAYLOAD = {

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 (channel === CHANNELS.WHATSAPP || channel === CHANNELS.WEBPUSH) {
       // 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,163 @@ 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 with 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>
+      );
+
+      // MOBILE device should give ACTIVE class to expander
+      const activeEl = container.querySelector('.active');
+      expect(activeEl).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>
+      );
+
+      // DESKTOP device should NOT give ACTIVE class to expander
+      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();
+    });
+  });
 });