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

package/package.json

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -14,7 +14,14 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import { ANDROID, IOS, ANDROID_DEVICE_NAME, IOS_DEVICE_NAME, VIBER_ACCOUNT_NAME } from '../constants';
+import {
+  ANDROID,
+  IOS,
+  ANDROID_DEVICE_NAME,
+  IOS_DEVICE_NAME,
+  VIBER_ACCOUNT_NAME,
+  MEDIA_TYPE_CAROUSEL,
+} from '../constants';
 import messages from '../messages';
 import videoPlay from '../../../assets/videoPlay.svg';
 
@@ -22,6 +29,9 @@ import videoPlay from '../../../assets/videoPlay.svg';
 const smsMobileAndroid = require('../../../assets/Android.png');
 const smsMobileIos = require('../../../assets/iOS.png');
 
+const getTrimmedText = (value = '') => (value ?? '').trim();
+const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
+
 const ViberPreviewContent = ({
   content,
   device,
@@ -43,7 +53,34 @@ const ViberPreviewContent = ({
     imageURL = '',
     videoParams = {},
     buttonText = '',
+    type = '',
+    cards = [],
+    showCarouselEditorPreview = false,
   } = viberContent;
+  const hasCarouselContent = type === MEDIA_TYPE_CAROUSEL;
+
+  const cardHasMeaningfulContent = (card) => {
+    if (!card || typeof card !== 'object') return false;
+    if (hasTrimmedText(card?.text)) return true;
+    if (hasTrimmedText(card?.mediaUrl)) return true;
+    const buttons = card?.buttons ?? [];
+    return buttons.some((button) => hasTrimmedText(button?.title));
+  };
+
+  const hasMeaningfulCarousel =
+    hasCarouselContent &&
+    Array.isArray(cards) &&
+    cards.length > 0 &&
+    cards.some(cardHasMeaningfulContent);
+
+  const showCarouselInPreview =
+    hasCarouselContent && (Boolean(showCarouselEditorPreview) || hasMeaningfulCarousel);
+
+  const previewCarouselCards =
+    hasCarouselContent && Array.isArray(cards) && cards.length ? cards : hasCarouselContent ? [{}] : [];
+
+  const trimmedMessageContent = getTrimmedText(messageContent);
+  const trimmedButtonText = getTrimmedText(buttonText);
 
   // Get account name (first letter for icon)
   const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
@@ -99,8 +136,15 @@ const ViberPreviewContent = ({
     );
   }
 
-  // Check if there's any content to display
-  const hasContent = messageContent || imageURL || videoParams?.viberVideoSrc || buttonText;
+  // Check if there's any content to display (whitespace-only strings do not count)
+  const hasContent = Boolean(
+    trimmedMessageContent
+    || hasTrimmedText(imageURL)
+    || videoParams?.viberVideoSrc
+    || trimmedButtonText
+    || hasMeaningfulCarousel
+    || (hasCarouselContent && showCarouselEditorPreview)
+  );
 
   // Render normal Viber preview
   return (
@@ -127,21 +171,23 @@ const ViberPreviewContent = ({
         {hasContent && (
           <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
             {/* Brand Name Display (from TemplatePreview line 1136) */}
-            <CapRow className="msg-container viber-preview">
+            <CapRow className={`msg-container viber-preview ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}>
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
-              <CapRow className="viber-account-icon">
-                {accountIcon}
-              </CapRow>
+              {!hasCarouselContent && (
+                <CapRow className="viber-account-icon">
+                  {accountIcon}
+                </CapRow>
+              )}
 
               {/* Message Bubble (from TemplatePreview line 1161-1223) */}
-              <CapRow className="message-pop align-left viber-message-pop">
+              <CapRow className={`message-pop align-left viber-message-pop ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}>
                 {/* Text Viber preview */}
-                {messageContent && (
+                {trimmedMessageContent && !hasCarouselContent && (
                   <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                 )}
 
                 {/* Image Viber preview */}
-                {imageURL && (
+                {hasTrimmedText(imageURL) && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -171,16 +217,78 @@ const ViberPreviewContent = ({
                 )}
 
                 {/* Button Viber preview */}
-                {buttonText && (
+                {trimmedButtonText && (
                   <CapLabel className="viber-button-base">
                     <p className="viber-button-card-text">
                       {buttonText}
                     </p>
                   </CapLabel>
                 )}
-                <CapLabel type="label1" className="viber-timestamp">
-                  {timestamp}
-                </CapLabel>
+                {/* Carousel Viber preview */}
+                {showCarouselInPreview && (
+                  <>
+                    <CapRow className="viber-carousel-message-pop">
+                      {trimmedMessageContent ? (
+                        <CapLabel
+                          type="label15"
+                          className="message-pop-item align-left viber-message-text viber-carousel-message-box-text"
+                        >
+                          {messageContent}
+                        </CapLabel>
+                      ) : (
+                        <CapRow className="viber-carousel-message-box-placeholder" />
+                      )}
+                      <CapLabel type="label1" className="viber-carousel-message-timestamp">
+                        {timestamp}
+                      </CapLabel>
+                    </CapRow>
+
+                    <CapRow className="viber-carousel-cards-pop">
+                      <CapRow className="viber-carousel-preview-scroll">
+                        {previewCarouselCards?.map((card, index) => (
+                          <CapRow className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
+                            {hasTrimmedText(card?.mediaUrl) ? (
+                              <CapImage
+                                src={card?.mediaUrl}
+                                className="viber-carousel-preview-image"
+                                alt="Viber carousel card"
+                              />
+                            ) : (
+                              <CapRow className="viber-carousel-preview-image-placeholder" />
+                            )}
+                            <CapRow className="viber-carousel-preview-card-body">
+                              {hasTrimmedText(card?.text) ? (
+                                <CapLabel type="label15" className="viber-carousel-preview-text">
+                                  {card?.text}
+                                </CapLabel>
+                              ) : (
+                                <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
+                              )}
+                              {(card?.buttons?.filter((cardButton) => hasTrimmedText(cardButton?.title)) ?? [])
+                                .slice(0, 2)
+                                .map((cardButton, btnIndex) => {
+                                  const trimmedCardButtonTitle = getTrimmedText(cardButton?.title);
+                                  return (
+                                    <CapLabel
+                                      className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
+                                      key={`viber-carousel-preview-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
+                                    >
+                                      {trimmedCardButtonTitle}
+                                    </CapLabel>
+                                  );
+                                })}
+                            </CapRow>
+                          </CapRow>
+                        ))}
+                      </CapRow>
+                    </CapRow>
+                  </>
+                )}
+                {!showCarouselInPreview && (
+                  <CapLabel type="label1" className="viber-timestamp">
+                    {timestamp}
+                  </CapLabel>
+                )}
                 <CapRow className="empty-placeholder" />
               </CapRow>
 
@@ -214,6 +322,16 @@ ViberPreviewContent.propTypes = {
         viberVideoPreviewImg: PropTypes.string,
       }),
       buttonText: PropTypes.string,
+      type: PropTypes.string,
+      cards: PropTypes.arrayOf(PropTypes.shape({
+        text: PropTypes.string,
+        mediaUrl: PropTypes.string,
+        buttons: PropTypes.arrayOf(PropTypes.shape({
+          title: PropTypes.string,
+          action: PropTypes.string,
+        })),
+      })),
+      showCarouselEditorPreview: PropTypes.bool,
     }),
   }),
   device: PropTypes.oneOf([ANDROID, IOS]),

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;
             }

package/v2Components/CommonTestAndPreview/index.js

@@ -1554,6 +1554,8 @@ const CommonTestAndPreview = (props) => {
         let imageData = null;
         let videoData = null;
         let buttonData = null;
+        let cardsData = [];
+        let messageType = '';
         let accountId = null;
         let accountDetails = null;
         let scenarioKey = '';
@@ -1568,6 +1570,8 @@ 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;
@@ -1594,6 +1598,8 @@ 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;
@@ -1636,6 +1642,10 @@ const CommonTestAndPreview = (props) => {
           text: messageText,
         };
 
+        if (messageType === CHANNELS.VIBER) {
+          messageType = '';
+        }
+
         // Add image if present
         if (imageData && imageData.url) {
           viberContent.image = {
@@ -1664,6 +1674,19 @@ 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);
@@ -2010,6 +2033,13 @@ 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
@@ -2021,15 +2051,25 @@ const CommonTestAndPreview = (props) => {
           parsedViberContent = {};
         }
       }
-      // Use resolvedContent if available (from preview call), otherwise use raw content
+      // Merge template preview state with API resolved body so carousel type/cards survive slim responses
       if (resolvedContent && typeof resolvedContent === 'object') {
-        contentObj = { ...resolvedContent };
-        // Merge in accountName and brandName from raw content if not in resolvedContent
-        if (parsedViberContent?.accountName && !contentObj.accountName) {
-          contentObj.accountName = parsedViberContent.accountName;
+        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;
         }
-        if (parsedViberContent?.brandName && !contentObj.brandName) {
-          contentObj.brandName = parsedViberContent.brandName;
+        if (base.brandName && !contentObj.brandName) {
+          contentObj.brandName = base.brandName;
         }
       } else {
         // Use raw content if no preview call was made or resolvedContent is not available