@capillarytech/creatives-library 8.0.353-alpha.0 → 8.0.353-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.353-alpha.0",
+  "version": "8.0.353-alpha.1",
   "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';
 
@@ -43,7 +50,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 ((card.text || '').trim()) return true;
+    if ((card.mediaUrl || '').trim()) return true;
+    const buttons = card.buttons || [];
+    return buttons.some((button) => (button?.title || '').trim());
+  };
+
+  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 = (messageContent || '').trim();
+  const trimmedButtonText = (buttonText || '').trim();
 
   // Get account name (first letter for icon)
   const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
@@ -99,8 +133,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
+    || (imageURL || '').trim()
+    || videoParams?.viberVideoSrc
+    || trimmedButtonText
+    || hasMeaningfulCarousel
+    || (hasCarouselContent && showCarouselEditorPreview)
+  );
 
   // Render normal Viber preview
   return (
@@ -129,19 +170,21 @@ const ViberPreviewContent = ({
             {/* Brand Name Display (from TemplatePreview line 1136) */}
             <CapRow className="msg-container viber-preview">
               {/* 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">
                 {/* Text Viber preview */}
-                {messageContent && (
+                {trimmedMessageContent && !hasCarouselContent && (
                   <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                 )}
 
                 {/* Image Viber preview */}
-                {imageURL && (
+                {(imageURL || '').trim() && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -171,13 +214,59 @@ const ViberPreviewContent = ({
                 )}
 
                 {/* Button Viber preview */}
-                {buttonText && (
+                {trimmedButtonText && (
                   <CapLabel className="viber-button-base">
                     <p className="viber-button-card-text">
                       {buttonText}
                     </p>
                   </CapLabel>
                 )}
+                {/* Carousel Viber preview */}
+                {showCarouselInPreview && (
+                  <>
+                    <CapRow className="viber-carousel-message-box">
+                      {trimmedMessageContent ? (
+                        <CapLabel type="label15" className="viber-carousel-message-box-text">
+                          {messageContent}
+                        </CapLabel>
+                      ) : (
+                        <CapRow className="viber-carousel-message-box-placeholder" />
+                      )}
+                    </CapRow>
+                    <CapRow className="viber-carousel-preview-scroll">
+                      {previewCarouselCards?.map((card, index) => (
+                        <CapRow className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
+                          {(card?.mediaUrl || '').trim() ? (
+                            <CapImage
+                              src={card?.mediaUrl}
+                              className="viber-carousel-preview-image"
+                              alt="Viber carousel card"
+                            />
+                          ) : (
+                            <CapRow className="viber-carousel-preview-image-placeholder" />
+                          )}
+                          {(card?.text || '').trim() ? (
+                            <CapLabel type="label15" className="viber-carousel-preview-text">
+                              {card?.text}
+                            </CapLabel>
+                          ) : (
+                            <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
+                          )}
+                          {(card?.buttons?.filter((cardButton) => (cardButton?.title || '').trim()) ?? [])
+                            .slice(0, 2)
+                            .map((cardButton, btnIndex) => (
+                              <CapLabel
+                                className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
+                                key={`viber-carousel-preview-btn-${index}-${btnIndex}-${(cardButton?.title || '').trim()}`}
+                              >
+                                {(cardButton?.title || '').trim()}
+                              </CapLabel>
+                            ))}
+                        </CapRow>
+                      ))}
+                    </CapRow>
+                  </>
+                )}
                 <CapLabel type="label1" className="viber-timestamp">
                   {timestamp}
                 </CapLabel>
@@ -214,6 +303,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/WhatsAppPreviewContent.js

@@ -17,7 +17,7 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import { ANDROID, IOS } from '../constants';
 import messages from '../messages';
-import { getWhatsappQuickReply, getWhatsappCarouselButtonView, getWhatsappDocPreview } from '../../../v2Containers/Whatsapp/utils';
+import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY, PHONE_NUMBER, WHATSAPP_CATEGORIES, TEMPLATE_VARIABLE_REGEX } from '../../../v2Containers/Whatsapp/constants';
 import videoPlay from '../../../assets/videoPlay.svg';
 import whatsappImageEmptyPreview from '../../TemplatePreview/assets/images/empty_image_preview.svg';
@@ -256,9 +256,9 @@ const WhatsAppPreviewContent = ({
         )}
 
         {/* Document Preview */}
-        {content?.whatsappDocSource && content?.whatsappDocParams && (
+        {content?.docPreview && (
           <CapRow className="whatsapp-image">
-            {getWhatsappDocPreview(content.whatsappDocParams)}
+            {content.docPreview}
           </CapRow>
         )}
 

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2240,6 +2240,99 @@
               }
             }
 
+            .viber-carousel-preview-scroll {
+              margin-top: $CAP_SPACE_08;
+              display: flex;
+              overflow-x: auto;
+              gap: $CAP_SPACE_08;
+              white-space: nowrap;
+              scrollbar-width: none;
+
+              &::-webkit-scrollbar {
+                display: none;
+              }
+
+              .viber-carousel-preview-card {
+                min-width: 8.75rem;
+                background: $CAP_WHITE;
+                border-radius: $CAP_SPACE_04;
+                padding: $CAP_SPACE_06;
+                display: flex;
+                flex-direction: column;
+                gap: $CAP_SPACE_04;
+
+                .viber-carousel-preview-image {
+                  width: 100%;
+                  height: 5.357rem;
+                  object-fit: cover;
+                  border-radius: $CAP_SPACE_04;
+                }
+
+                .viber-carousel-preview-image-placeholder {
+                  width: 100%;
+                  height: 5.357rem;
+                  border-radius: $CAP_SPACE_04;
+                  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;
+                  padding: 0.179rem $CAP_SPACE_08;
+                  white-space: normal;
+                  min-height: 1rem;
+                }
+
+                .viber-carousel-preview-button-secondary {
+                  color: $CAP_PURPLE01;
+                  background: $CAP_WHITE;
+                  border: 1px solid $CAP_PURPLE01;
+                }
+              }
+            }
+
+            .viber-carousel-message-box {
+              width: 100%;
+              height: 2.25rem;
+              border-radius: $CAP_SPACE_04;
+              background: $CAP_WHITE;
+              margin-top: $CAP_SPACE_08;
+              padding: 0 $CAP_SPACE_08;
+              display: flex;
+              align-items: center;
+            }
+
+            .viber-carousel-message-box-text {
+              color: $CAP_G01;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              width: 100%;
+            }
+
+            .viber-carousel-message-box-placeholder {
+              width: 100%;
+              height: 0.875rem;
+              border-radius: $CAP_SPACE_04;
+              background: $CAP_G07;
+            }
+
             .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