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

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2116,8 +2116,6 @@
         flex: 1;
         display: flex;
         flex-direction: column;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
         padding: 0 $CAP_SPACE_16;
         background-color: #ffffff;
         margin-left: $CAP_SPACE_06;
@@ -2143,12 +2141,6 @@
           margin-top: $CAP_SPACE_16;
           width: 68%;
 
-          &.viber-preview-carousel {
-            width: 100%;
-            margin-left: $CAP_SPACE_12;
-            max-height: none;
-          }
-
           // Account icon (from TemplatePreview line 1146-1160)
           .viber-account-icon {
             width: $CAP_SPACE_20;
@@ -2177,18 +2169,6 @@
             border-radius: $CAP_SPACE_04;
             padding: $CAP_SPACE_04;
 
-            &.viber-message-pop-carousel {
-              width: 100%;
-              left: 0;
-              margin-top: 0;
-              padding: 0;
-              background: transparent;
-              display: flex;
-              flex-direction: column;
-              align-items: flex-start;
-              gap: $CAP_SPACE_06;
-            }
-
             // Text Viber preview (from TemplatePreview line 1166-1174)
             .viber-message-text {
               margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
@@ -2260,149 +2240,6 @@
               }
             }
 
-            .viber-carousel-message-pop,
-            .viber-carousel-cards-pop {
-              width: 100%;
-              background: $CAP_G08;
-              border-radius: $CAP_SPACE_06;
-              padding: $CAP_SPACE_08;
-            }
-
-            .viber-carousel-message-pop {
-              margin-top: 0;
-              width: 68%;
-              border-radius: 0 $CAP_SPACE_06 $CAP_SPACE_06 $CAP_SPACE_06;
-            }
-
-            .viber-carousel-cards-pop {
-              margin-top: 0;
-              width: 100%;
-              background: transparent;
-              border: none;
-              border-radius: 0;
-              padding: 0;
-            }
-
-            .viber-carousel-message-box {
-              width: 100%;
-              min-height: 2.25rem;
-              height: auto;
-              border-radius: $CAP_SPACE_04;
-              background: transparent;
-              padding: 0 $CAP_SPACE_08;
-              display: flex;
-              align-items: center;
-            }
-
-            .viber-carousel-message-box-text {
-              color: $CAP_G01;
-              margin: 0.107rem $CAP_SPACE_06 $CAP_SPACE_01 0.5rem;
-              white-space: normal;
-              word-break: break-word;
-              overflow: visible;
-              width: 100%;
-            }
-
-            .viber-carousel-message-box-placeholder {
-              width: 100%;
-              height: 0.875rem;
-              border-radius: $CAP_SPACE_04;
-              background: $CAP_G07;
-            }
-
-            .viber-carousel-message-timestamp,
-            .viber-carousel-cards-timestamp {
-              display: block;
-              text-align: right;
-              margin-top: $CAP_SPACE_06;
-              color: $CAP_G04;
-            }
-
-            .viber-carousel-preview-scroll {
-              display: flex;
-              width: 100%;
-              overflow-x: auto;
-              overflow-y: visible;
-              
-              scrollbar-width: none;
-              -webkit-overflow-scrolling: touch;
-
-              &::-webkit-scrollbar {
-                display: none;
-              }
-
-              .viber-carousel-preview-card {
-                flex: 0 0 68%;
-                min-width: 68%;
-                margin-right: $CAP_SPACE_08;
-                background: $CAP_G09;
-                border: 1px solid $CAP_G07;
-                border-radius: $CAP_SPACE_12;
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-
-                &:last-child {
-                  margin-right: 0;
-                }
-
-                .viber-carousel-preview-card-body {
-                  padding: $CAP_SPACE_08;
-                  display: flex;
-                  flex-direction: column;
-                  gap: $CAP_SPACE_06;
-                }
-
-                .viber-carousel-preview-image {
-                  width: 100%;
-                  height: 10rem;
-                  object-fit: cover;
-                  border-radius: 0;
-                }
-
-                .viber-carousel-preview-image-placeholder {
-                  width: 100%;
-                  height: 10rem;
-                  border-radius: 0;
-                  background: $CAP_G07;
-                }
-
-                .viber-carousel-preview-text {
-                  color: $CAP_G01;
-                  line-height: 1.3;
-                  white-space: normal;
-                }
-
-                .viber-carousel-preview-text-placeholder {
-                  width: 100%;
-                  height: 0.875rem;
-                  border-radius: $CAP_SPACE_04;
-                  background: $CAP_G07;
-                  min-height: 0.875rem;
-                }
-
-                .viber-carousel-preview-button {
-                  color: $CAP_WHITE;
-                  background: $CAP_PURPLE01;
-                  border-radius: $CAP_SPACE_12;
-                  text-align: center;
-                  width: 100%;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  min-height: 1.5rem;
-                  padding: $CAP_SPACE_06 $CAP_SPACE_08;
-                  white-space: normal;
-                }
-
-                .viber-carousel-preview-button-secondary {
-                  color: $CAP_PURPLE01;
-                  background: transparent;
-                  border: none;
-                }
-              }
-            }
-
             .empty-placeholder {
               height: $CAP_SPACE_08;
             }
@@ -2513,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
@@ -1554,8 +1567,6 @@ const CommonTestAndPreview = (props) => {
         let imageData = null;
         let videoData = null;
         let buttonData = null;
-        let cardsData = [];
-        let messageType = '';
         let accountId = null;
         let accountDetails = null;
         let scenarioKey = '';
@@ -1570,8 +1581,6 @@ const CommonTestAndPreview = (props) => {
           imageData = formDataObj.image || null;
           videoData = formDataObj.video || null;
           buttonData = formDataObj.button || null;
-          cardsData = formDataObj.cards || [];
-          messageType = formDataObj.type || '';
           accountId = formDataObj.accountId || null;
           accountDetails = formDataObj.accountDetails || null;
           scenarioKey = formDataObj.scenarioKey || VIBER_API_SCENARIO_KEY;
@@ -1598,8 +1607,6 @@ const CommonTestAndPreview = (props) => {
               url: formDataObj?.buttonURL || '',
             };
           }
-          cardsData = viberPreview.cards || formDataObj?.cards || [];
-          messageType = viberPreview.type || formDataObj?.type || '';
           // Extract account info from parent formDataObj if available
           accountId = formDataObj.accountId || null;
           accountDetails = formDataObj.accountDetails || null;
@@ -1642,10 +1649,6 @@ const CommonTestAndPreview = (props) => {
           text: messageText,
         };
 
-        if (messageType === CHANNELS.VIBER) {
-          messageType = '';
-        }
-
         // Add image if present
         if (imageData && imageData.url) {
           viberContent.image = {
@@ -1674,19 +1677,6 @@ const CommonTestAndPreview = (props) => {
           }
         }
 
-        if (messageType === MEDIA_TYPE_CAROUSEL || (Array.isArray(cardsData) && cardsData.length)) {
-          viberContent.type = MEDIA_TYPE_CAROUSEL;
-          viberContent.cards = (cardsData || []).map((card) => ({
-            text: card?.text || '',
-            mediaUrl: card?.mediaUrl || '',
-            buttons: (card?.buttons || []).map((button) => ({
-              title: button?.title || '',
-              action: button?.action || '',
-            })),
-          }));
-          delete viberContent.button;
-        }
-
         // Resolve tags in text if custom values are provided
         if (customValuesObj && Object.keys(customValuesObj).length > 0 && viberContent.text) {
           viberContent.text = resolveTagsInText(viberContent.text, customValuesObj);
@@ -1824,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;
     }
@@ -1855,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;
@@ -2033,13 +2059,6 @@ const CommonTestAndPreview = (props) => {
       // Only use previewDataHtml if preview call was made
       if (hasPreviewCallBeenMade && previewDataHtml?.resolvedBody) {
         resolvedContent = previewDataHtml.resolvedBody;
-        if (typeof resolvedContent === 'string') {
-          try {
-            resolvedContent = JSON.parse(resolvedContent);
-          } catch (e) {
-            resolvedContent = null;
-          }
-        }
       }
 
       // Parse content if it's a string
@@ -2051,25 +2070,15 @@ const CommonTestAndPreview = (props) => {
           parsedViberContent = {};
         }
       }
-      // Merge template preview state with API resolved body so carousel type/cards survive slim responses
+      // Use resolvedContent if available (from preview call), otherwise use raw content
       if (resolvedContent && typeof resolvedContent === 'object') {
-        const base = parsedViberContent && typeof parsedViberContent === 'object' ? parsedViberContent : {};
-        contentObj = {
-          ...base,
-          ...resolvedContent,
-          viberPreviewContent: {
-            ...base.viberPreviewContent,
-            ...resolvedContent.viberPreviewContent,
-            ...(resolvedContent.messageContent != null && typeof resolvedContent.messageContent === 'string'
-              ? { messageContent: resolvedContent.messageContent }
-              : {}),
-          },
-        };
-        if (base.accountName && !contentObj.accountName) {
-          contentObj.accountName = base.accountName;
+        contentObj = { ...resolvedContent };
+        // Merge in accountName and brandName from raw content if not in resolvedContent
+        if (parsedViberContent?.accountName && !contentObj.accountName) {
+          contentObj.accountName = parsedViberContent.accountName;
         }
-        if (base.brandName && !contentObj.brandName) {
-          contentObj.brandName = base.brandName;
+        if (parsedViberContent?.brandName && !contentObj.brandName) {
+          contentObj.brandName = parsedViberContent.brandName;
         }
       } else {
         // Use raw content if no preview call was made or resolvedContent is not available