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

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -1,4 +1,5 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
+@import './_viberCarouselPreviewCards.scss';
 
 /**
  * UnifiedPreview Styles
@@ -2318,91 +2319,6 @@
               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 +2429,60 @@
     }
   }
 
+  // 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-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/_viberCarouselPreviewCards.scss

@@ -0,0 +1,127 @@
+// Shared Viber carousel card row (Test & Preview device preview)
+.viber-carousel-preview-scroll {
+  display: flex;
+  align-items: stretch;
+  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;
+    align-self: stretch;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .viber-carousel-preview-card-body {
+      flex: 1;
+      padding: $CAP_SPACE_08;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    .viber-carousel-preview-text-wrap {
+      flex-shrink: 0;
+      width: 100%;
+
+      &--1-line {
+        min-height: 1.3em;
+      }
+
+      &--2-line {
+        min-height: 2.6em;
+      }
+    }
+
+    .viber-carousel-preview-text-inner {
+      width: 100%;
+    }
+
+    .viber-carousel-preview-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: $CAP_SPACE_06;
+      margin-top: auto;
+      width: 100%;
+      flex-shrink: 0;
+    }
+
+    .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;
+      word-break: break-word;
+      display: block;
+      width: 100%;
+      margin: 0;
+    }
+
+    .viber-carousel-preview-text-placeholder {
+      width: 100%;
+      height: 0.875rem;
+      border-radius: $CAP_SPACE_04;
+      background: $CAP_G07;
+      min-height: 0.875rem;
+      display: block;
+    }
+
+    .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;
+      box-sizing: border-box;
+    }
+
+    .viber-carousel-preview-button-placeholder {
+      visibility: hidden;
+      pointer-events: none;
+      padding: 0;
+      background: transparent;
+      border: none;
+    }
+
+    .viber-carousel-preview-button-secondary {
+      color: $CAP_PURPLE01;
+      background: transparent;
+      border: none;
+    }
+  }
+}

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,45 @@ 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 { content: webPushInner = {} } = webPushOuter;
+        const {
+          title,
+          message,
+          iconImageUrl,
+          cta,
+          expandableDetails = {},
+        } = webPushInner;
+        const { media: webPushMedia = [], ctas: webPushCtas = [] } = expandableDetails;
+        const webPushButtons = webPushCtas.map(({ title: text = '', actionLink: url = '', type = '' }) => ({
+          text,
+          url,
+          type,
+        }));
+        return (
+          <WebPushPreviewContent
+            notificationTitle={title || ''}
+            notificationBody={message || ''}
+            imageSrc={webPushMedia[0]?.url || ''}
+            brandIconSrc={iconImageUrl || ''}
+            buttons={webPushButtons}
+            url={cta?.actionLink || ''}
+            isUpdating={isUpdating}
+            error={error}
+            isFullscreenOpen={isFullscreenOpen}
+            setIsFullscreenOpen={setIsFullscreenOpen}
+            selectedCustomer={selectedCustomer}
+          />
+        );
+      }
+
       default:
         return (
           <div className="channel-preview-placeholder">
@@ -212,6 +253,8 @@ const UnifiedPreview = ({
     }
   };
 
+  const showToggle = channel !== CHANNELS.WEBPUSH && showDeviceToggle;
+
   /**
    * Render loading state for all channels
    */
@@ -222,9 +265,10 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showDeviceToggle}
+            showDeviceToggle={showToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
+            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-loading-container">
@@ -247,9 +291,10 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showDeviceToggle}
+            showDeviceToggle={showToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
+            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-error-container">
@@ -275,15 +320,16 @@ const UnifiedPreview = ({
         <PreviewHeader
           selectedCustomer={selectedCustomer}
           device={device}
-          showDeviceToggle={showDeviceToggle}
+          showDeviceToggle={showToggle}
           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}>
@@ -319,7 +365,7 @@ const UnifiedPreview = ({
 UnifiedPreview.propTypes = {
   // Core
   channel: PropTypes.oneOf(Object.values(CHANNELS)).isRequired,
-  content: PropTypes.object.isRequired,
+  content: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
 
   // Display options
   device: PropTypes.oneOf([DESKTOP, TABLET, MOBILE, ANDROID, IOS]),

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
@@ -475,15 +476,25 @@ const CommonTestAndPreview = (props) => {
       ?? formDataObj.cards
       ?? contentObj.viberPreviewContent?.cards
       ?? contentObj.cards;
+    const isCarousel = Boolean(
+      formDataObj.type === MEDIA_TYPE_CAROUSEL
+      || contentObj.type === MEDIA_TYPE_CAROUSEL
+      || (Array.isArray(previewCards) && previewCards.length > 0),
+    );
     const mergedPreview = {
       ...(contentObj.viberPreviewContent || {}),
       ...(formDataObj.viberPreviewContent || {}),
       ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
+      ...(isCarousel ? {
+        type: MEDIA_TYPE_CAROUSEL,
+        showCarouselEditorPreview: true,
+      } : {}),
     };
     return {
       ...contentObj,
       ...formDataObj,
       ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
+      ...(isCarousel ? { type: MEDIA_TYPE_CAROUSEL } : {}),
       ...(Object.keys(mergedPreview).length ? { viberPreviewContent: mergedPreview } : {}),
     };
   }, [formData, content]);
@@ -588,8 +599,13 @@ const CommonTestAndPreview = (props) => {
       viberPreviewContent: {
         ...basePreview,
         ...resolvedPreview,
-        type: resolvedPreview.type || basePreview.type || baseObj.type,
+        type: resolvedPreview.type || basePreview.type || baseObj.type || (mergedCards.length ? MEDIA_TYPE_CAROUSEL : ''),
         cards: mergedCards.length ? mergedCards : (resolvedPreview.cards || basePreview.cards),
+        showCarouselEditorPreview: Boolean(
+          basePreview.showCarouselEditorPreview
+          || resolvedPreview.showCarouselEditorPreview
+          || mergedCards.length > 0,
+        ),
         ...(resolvedMessage != null ? { messageContent: resolvedMessage } : {}),
       },
     };
@@ -750,6 +766,12 @@ const CommonTestAndPreview = (props) => {
           messageBody: contentStr,
         };
 
+      case CHANNELS.WEBPUSH:
+        return {
+          ...basePayload,
+          messageBody: contentStr,
+        };
+
       default:
         return basePayload;
     }
@@ -804,6 +826,12 @@ const CommonTestAndPreview = (props) => {
         };
       }
 
+      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
@@ -1981,6 +2009,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;
     }
@@ -2012,7 +2076,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;