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

package/package.json

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -14,14 +14,7 @@ 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,
-  MEDIA_TYPE_CAROUSEL,
-} from '../constants';
+import { ANDROID, IOS, ANDROID_DEVICE_NAME, IOS_DEVICE_NAME, VIBER_ACCOUNT_NAME } from '../constants';
 import messages from '../messages';
 import videoPlay from '../../../assets/videoPlay.svg';
 
@@ -50,34 +43,7 @@ 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();
@@ -133,15 +99,8 @@ const ViberPreviewContent = ({
     );
   }
 
-  // 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)
-  );
+  // Check if there's any content to display
+  const hasContent = messageContent || imageURL || videoParams?.viberVideoSrc || buttonText;
 
   // Render normal Viber preview
   return (
@@ -170,21 +129,19 @@ const ViberPreviewContent = ({
             {/* Brand Name Display (from TemplatePreview line 1136) */}
             <CapRow className="msg-container viber-preview">
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
-              {!hasCarouselContent && (
-                <CapRow className="viber-account-icon">
-                  {accountIcon}
-                </CapRow>
-              )}
+              <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 */}
-                {trimmedMessageContent && !hasCarouselContent && (
+                {messageContent && (
                   <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                 )}
 
                 {/* Image Viber preview */}
-                {(imageURL || '').trim() && (
+                {imageURL && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -214,59 +171,13 @@ const ViberPreviewContent = ({
                 )}
 
                 {/* Button Viber preview */}
-                {trimmedButtonText && (
+                {buttonText && (
                   <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>
@@ -303,16 +214,6 @@ 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

@@ -2240,99 +2240,6 @@
               }
             }
 
-            .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,8 +1554,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 +1568,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 +1594,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 +1636,6 @@ const CommonTestAndPreview = (props) => {
           text: messageText,
         };
 
-        if (messageType === CHANNELS.VIBER) {
-          messageType = '';
-        }
-
         // Add image if present
         if (imageData && imageData.url) {
           viberContent.image = {
@@ -1674,19 +1664,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);
@@ -2033,13 +2010,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 +2021,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