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

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2116,6 +2116,8 @@
         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;
@@ -2141,6 +2143,12 @@
           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;
@@ -2169,6 +2177,18 @@
             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;
@@ -2240,6 +2260,149 @@
               }
             }
 
+            .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;
             }
@@ -2350,60 +2513,6 @@
     }
   }
 
-  // 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/index.js

@@ -6,7 +6,7 @@
  * Routes to channel-specific preview content components
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
@@ -21,7 +21,6 @@ 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';
@@ -45,7 +44,6 @@ 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
@@ -199,45 +197,6 @@ 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">
@@ -253,8 +212,6 @@ const UnifiedPreview = ({
     }
   };
 
-  const showToggle = channel !== CHANNELS.WEBPUSH && showDeviceToggle;
-
   /**
    * Render loading state for all channels
    */
@@ -265,10 +222,9 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showToggle}
+            showDeviceToggle={showDeviceToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
-            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-loading-container">
@@ -291,10 +247,9 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showToggle}
+            showDeviceToggle={showDeviceToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
-            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-error-container">
@@ -320,16 +275,15 @@ const UnifiedPreview = ({
         <PreviewHeader
           selectedCustomer={selectedCustomer}
           device={device}
-          showDeviceToggle={showToggle}
+          showDeviceToggle={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, CHANNELS.WEBPUSH].includes(channel) ? (
+        {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER].includes(channel) ? (
           renderChannelContent()
         ) : (
           <DeviceFrame device={device || DESKTOP}>
@@ -365,7 +319,7 @@ const UnifiedPreview = ({
 UnifiedPreview.propTypes = {
   // Core
   channel: PropTypes.oneOf(Object.values(CHANNELS)).isRequired,
-  content: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+  content: PropTypes.object.isRequired,
 
   // Display options
   device: PropTypes.oneOf([DESKTOP, TABLET, MOBILE, ANDROID, IOS]),

package/v2Components/CommonTestAndPreview/constants.js

@@ -85,7 +85,6 @@ 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];
 
@@ -204,7 +203,6 @@ 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 = {