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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.353-alpha.3",
+  "version": "8.0.353-alpha.4",
   "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';
 
@@ -29,9 +22,6 @@ 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,
@@ -53,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 (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();
@@ -136,15 +99,8 @@ const ViberPreviewContent = ({
     );
   }
 
-  // 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)
-  );
+  // Check if there's any content to display
+  const hasContent = messageContent || imageURL || videoParams?.viberVideoSrc || buttonText;
 
   // Render normal Viber preview
   return (
@@ -171,23 +127,21 @@ 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 ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}>
+            <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 ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}>
+              <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 */}
-                {hasTrimmedText(imageURL) && (
+                {imageURL && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -217,78 +171,16 @@ 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-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>
-                )}
+                <CapLabel type="label1" className="viber-timestamp">
+                  {timestamp}
+                </CapLabel>
                 <CapRow className="empty-placeholder" />
               </CapRow>
 
@@ -322,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

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