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

package/v2Components/CommonTestAndPreview/index.js

@@ -81,8 +81,7 @@ import {
   IMAGE,
   VIDEO,
   URL,
-  CHANNELS_USING_ANDROID_PREVIEW_DEVICE,
-  DAYS,
+  CHANNELS_USING_ANDROID_PREVIEW_DEVICE
 } from './constants';
 
 // Import utilities
@@ -189,6 +188,8 @@ const CommonTestAndPreview = (props) => {
   const [previewDevice, setPreviewDevice] = useState(initialDevice);
   // Track if a preview call has been made (to know when to use previewDataHtml vs raw content)
   const [hasPreviewCallBeenMade, setHasPreviewCallBeenMade] = useState(false);
+  // Viber: tag values applied to preview only after explicit Update preview / Discard (not while typing)
+  const [viberPreviewTagValues, setViberPreviewTagValues] = useState(null);
   const [previewDataHtml, setPreviewDataHtml] = useState(() => {
     // Initialize preview data based on channel
     if (channel === CHANNELS.EMAIL && formData) {
@@ -456,6 +457,144 @@ const CommonTestAndPreview = (props) => {
     return resolvedText;
   };
 
+  const getViberMergedFormData = useCallback((formDataOverride) => {
+    const formDataObj = formDataOverride && typeof formDataOverride === 'object'
+      ? formDataOverride
+      : (formData && typeof formData === 'object' ? formData : {});
+    let contentObj = {};
+    if (content && typeof content === 'object') {
+      contentObj = content;
+    } else if (typeof content === 'string' && content.trim()) {
+      try {
+        contentObj = JSON.parse(content);
+      } catch (e) {
+        contentObj = {};
+      }
+    }
+    const previewCards = formDataObj.viberPreviewContent?.cards
+      ?? formDataObj.cards
+      ?? contentObj.viberPreviewContent?.cards
+      ?? contentObj.cards;
+    const mergedPreview = {
+      ...(contentObj.viberPreviewContent || {}),
+      ...(formDataObj.viberPreviewContent || {}),
+      ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
+    };
+    return {
+      ...contentObj,
+      ...formDataObj,
+      ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
+      ...(Object.keys(mergedPreview).length ? { viberPreviewContent: mergedPreview } : {}),
+    };
+  }, [formData, content]);
+
+  const getViberCarouselCardsFromFormData = (formDataObj) => {
+    const previewCards = formDataObj?.viberPreviewContent?.cards;
+    if (Array.isArray(previewCards) && previewCards.length) {
+      return previewCards;
+    }
+    const rootCards = formDataObj?.cards;
+    if (Array.isArray(rootCards) && rootCards.length) {
+      return rootCards;
+    }
+    return [];
+  };
+
+  const getViberTagExtractionContent = (formDataObj, contentStr = '') => {
+    const messageText = formDataObj?.messageContent
+      || formDataObj?.viberPreviewContent?.messageContent
+      || contentStr
+      || '';
+    const cardFieldTexts = getViberCarouselCardsFromFormData(formDataObj).flatMap((card) => {
+      const fields = [card?.text || ''];
+      (card?.buttons || []).forEach((button) => {
+        fields.push(button?.title || '', button?.action || '');
+      });
+      return fields;
+    });
+    return [messageText, ...cardFieldTexts]
+      .filter((value) => typeof value === 'string' && value.trim())
+      .join(' ');
+  };
+
+  const resolveViberCarouselCards = (cards, tagValues) => {
+    if (!Array.isArray(cards) || !tagValues || !Object.keys(tagValues).length) {
+      return cards;
+    }
+    return cards.map((card) => ({
+      ...card,
+      text: resolveTagsInText(card?.text || '', tagValues),
+      buttons: (card?.buttons || []).map((button) => ({
+        ...button,
+        title: resolveTagsInText(button?.title || '', tagValues),
+        action: resolveTagsInText(button?.action || '', tagValues),
+      })),
+    }));
+  };
+
+  const applyViberCustomValuesToContent = (contentObj, tagValues) => {
+    if (!contentObj || typeof contentObj !== 'object' || !tagValues || !Object.keys(tagValues).length) {
+      return contentObj;
+    }
+    const result = { ...contentObj };
+    if (typeof result.messageContent === 'string') {
+      result.messageContent = resolveTagsInText(result.messageContent, tagValues);
+    }
+    if (Array.isArray(result.cards)) {
+      result.cards = resolveViberCarouselCards(result.cards, tagValues);
+    }
+    if (result.viberPreviewContent && typeof result.viberPreviewContent === 'object') {
+      const preview = result.viberPreviewContent;
+      result.viberPreviewContent = {
+        ...preview,
+        messageContent: resolveTagsInText(preview.messageContent || '', tagValues),
+        cards: resolveViberCarouselCards(preview.cards, tagValues),
+      };
+    }
+    return result;
+  };
+
+  const mergeViberPreviewWithResolved = (base, resolved) => {
+    if (!resolved || typeof resolved !== 'object') {
+      return base && typeof base === 'object' ? base : {};
+    }
+    const baseObj = base && typeof base === 'object' ? base : {};
+    const basePreview = baseObj.viberPreviewContent || {};
+    const resolvedPreview = resolved.viberPreviewContent || {};
+    const baseCards = basePreview.cards || baseObj.cards || [];
+    const resolvedCards = resolvedPreview.cards || resolved.cards || [];
+    const mergedCards = baseCards.length
+      ? baseCards.map((card, index) => {
+        const resolvedCard = resolvedCards[index];
+        if (!resolvedCard) {
+          return card;
+        }
+        return {
+          ...card,
+          ...(resolvedCard.text != null ? { text: resolvedCard.text } : {}),
+          ...(resolvedCard.mediaUrl != null ? { mediaUrl: resolvedCard.mediaUrl } : {}),
+          buttons: (card.buttons || []).map((button, buttonIndex) => ({
+            ...button,
+            ...(resolvedCard.buttons?.[buttonIndex] || {}),
+          })),
+        };
+      })
+      : resolvedCards;
+    const resolvedMessage = resolved.messageContent ?? resolvedPreview.messageContent;
+
+    return {
+      ...baseObj,
+      ...resolved,
+      viberPreviewContent: {
+        ...basePreview,
+        ...resolvedPreview,
+        type: resolvedPreview.type || basePreview.type || baseObj.type,
+        cards: mergedCards.length ? mergedCards : (resolvedPreview.cards || basePreview.cards),
+        ...(resolvedMessage != null ? { messageContent: resolvedMessage } : {}),
+      },
+    };
+  };
+
   /**
    * Common handler for saving test customers (both new and existing)
    */
@@ -611,12 +750,6 @@ const CommonTestAndPreview = (props) => {
           messageBody: contentStr,
         };
 
-      case CHANNELS.WEBPUSH:
-        return {
-          ...basePayload,
-          messageBody: contentStr,
-        };
-
       default:
         return basePayload;
     }
@@ -663,17 +796,13 @@ const CommonTestAndPreview = (props) => {
           templateContent: formDataObj?.bodyText || contentStr,
         };
 
-      case CHANNELS.VIBER:
-        return {
-          templateSubject: formDataObj?.messageTitle || '',
-          templateContent: contentStr,
-        };
-
-      case CHANNELS.WEBPUSH:
+      case CHANNELS.VIBER: {
+        const viberFormData = getViberMergedFormData(formDataObj);
         return {
-          templateSubject: formDataObj?.content?.title || '',
-          templateContent: contentStr,
+          templateSubject: viberFormData?.messageTitle || '',
+          templateContent: getViberTagExtractionContent(viberFormData, contentStr),
         };
+      }
 
       case CHANNELS.ZALO: {
         // For Zalo, extract content from templateListParams array
@@ -1562,11 +1691,16 @@ const CommonTestAndPreview = (props) => {
         // 1. formDataObj from getTemplateContent (contains both viberPreviewContent and payload fields)
         // 2. formDataObj[0] (array format - legacy)
         // 3. contentStr (direct string - legacy)
+        // Merge content prop so listing / preview-only flows include carousel card tags
+        const viberFormData = getViberMergedFormData(formDataObj);
+        formDataObj = viberFormData;
 
         let messageText = '';
         let imageData = null;
         let videoData = null;
         let buttonData = null;
+        let cardsData = [];
+        let messageType = '';
         let accountId = null;
         let accountDetails = null;
         let scenarioKey = '';
@@ -1581,6 +1715,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;
@@ -1607,6 +1743,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;
@@ -1649,6 +1787,10 @@ const CommonTestAndPreview = (props) => {
           text: messageText,
         };
 
+        if (messageType === CHANNELS.VIBER) {
+          messageType = '';
+        }
+
         // Add image if present
         if (imageData && imageData.url) {
           viberContent.image = {
@@ -1677,9 +1819,34 @@ const CommonTestAndPreview = (props) => {
           }
         }
 
-        // Resolve tags in text if custom values are provided
-        if (customValuesObj && Object.keys(customValuesObj).length > 0 && viberContent.text) {
-          viberContent.text = resolveTagsInText(viberContent.text, customValuesObj);
+        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/cards if custom values are provided
+        if (customValuesObj && Object.keys(customValuesObj).length > 0) {
+          if (viberContent.text) {
+            viberContent.text = resolveTagsInText(viberContent.text, customValuesObj);
+          }
+          if (Array.isArray(viberContent.cards)) {
+            viberContent.cards = resolveViberCarouselCards(viberContent.cards, customValuesObj);
+          }
+          if (viberContent.button) {
+            viberContent.button = {
+              ...viberContent.button,
+              text: resolveTagsInText(viberContent.button.text || '', customValuesObj),
+              url: resolveTagsInText(viberContent.button.url || '', customValuesObj),
+            };
+          }
         }
 
         // Build messageBody JSON string
@@ -1814,42 +1981,6 @@ const CommonTestAndPreview = (props) => {
         };
       }
 
-      case CHANNELS.WEBPUSH: {
-        const webpushData = (typeof formDataObj === 'object' && formDataObj !== null)
-          ? formDataObj
-          : {};
-        const innerContent = webpushData?.content || {};
-
-        const resolvedTitle = resolveTagsInText(innerContent?.title || '', customValuesObj);
-        const resolvedMessage = resolveTagsInText(innerContent?.message || '', customValuesObj);
-
-        return {
-          ...basePayload,
-          webPushMessageContent: {
-            channel: CHANNELS.WEBPUSH,
-            accountId: webpushData?.accountId || null,
-            content: {
-              title: resolvedTitle,
-              message: resolvedMessage,
-              ...(innerContent?.iconImageUrl && { iconImageUrl: innerContent.iconImageUrl }),
-              ...(innerContent?.cta && { cta: innerContent.cta }),
-              ...(innerContent?.expandableDetails && { expandableDetails: innerContent.expandableDetails }),
-            },
-            messageSubject: webpushData?.messageSubject || resolvedTitle || '',
-          },
-          webPushDeliverySettings: {
-            channelSettings: {
-              channel: CHANNELS.WEBPUSH,
-              notificationTtl: {
-                duration: 7,
-                timeUnit: DAYS,
-              },
-            },
-            additionalSettings: {},
-          },
-        };
-      }
-
       default:
         return basePayload;
     }
@@ -1881,7 +2012,7 @@ const CommonTestAndPreview = (props) => {
       contentObj = hasPreviewCallBeenMade && previewDataHtml?.resolvedBody
         ? previewDataHtml.resolvedBody
         : getCurrentContent || '';
-    } else if ([CHANNELS.WHATSAPP, CHANNELS.WEBPUSH].includes(channel)) {
+    } else if (channel === CHANNELS.WHATSAPP) {
       // For WhatsApp, content is an object with templateMsg, media, CTA, etc.
       // Content comes from WhatsApp component state, passed via content prop
       let resolvedContent = null;
@@ -2059,33 +2190,39 @@ 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
-      let parsedViberContent = content;
-      if (typeof content === 'string') {
-        try {
-          parsedViberContent = JSON.parse(content);
-        } catch (e) {
-          parsedViberContent = {};
-        }
+      // Parse content if it's a string, then merge with formData for carousel + tags in all entry flows
+      let parsedViberContent = getViberMergedFormData();
+      if (!parsedViberContent || typeof parsedViberContent !== 'object') {
+        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 = mergeViberPreviewWithResolved(base, resolvedContent);
+        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
-        contentObj = {...parsedViberContent, messageContent: resolvedContent};
-        if (resolvedContent) {
-          contentObj.viberPreviewContent = {...parsedViberContent?.viberPreviewContent, messageContent: resolvedContent};
-        }
+        contentObj = parsedViberContent && typeof parsedViberContent === 'object' ? parsedViberContent : {};
+      }
+      if (
+        hasPreviewCallBeenMade
+        && viberPreviewTagValues
+        && Object.keys(viberPreviewTagValues).length > 0
+      ) {
+        contentObj = applyViberCustomValuesToContent(contentObj, viberPreviewTagValues);
       }
     } else if (channel === CHANNELS.ZALO) {
       // For Zalo, content is an object with templatePreviewUrl, templateStatus, etc.
@@ -2341,6 +2478,8 @@ const CommonTestAndPreview = (props) => {
       setShowJSON(false);
       setTagsExtracted(false);
       setPreviewDevice(DESKTOP);
+      setHasPreviewCallBeenMade(false);
+      setViberPreviewTagValues(null);
       setSelectedTestEntities([]);
       actions.clearPrefilledValues();
     } else {
@@ -2470,6 +2609,11 @@ const CommonTestAndPreview = (props) => {
 
       setCustomValues(updatedValues);
 
+      // Viber: do not auto-resolve tags in preview; user must click Update preview
+      if (channel === CHANNELS.VIBER) {
+        return;
+      }
+
       // Update preview with prefilled values (this is a valid preview call trigger)
       const payload = preparePreviewPayload(
         channel,
@@ -2547,6 +2691,7 @@ const CommonTestAndPreview = (props) => {
     setPreviewDevice(DESKTOP);
     setPreviewDataHtml('');
     setHasPreviewCallBeenMade(false); // Reset preview call flag
+    setViberPreviewTagValues(null);
     setSelectedTestEntities([]);
     setBeeContent('');
     previousBeeContentRef.current = '';
@@ -2588,6 +2733,7 @@ const CommonTestAndPreview = (props) => {
   const handleClearSelection = () => {
     setSelectedCustomer(null);
     setHasPreviewCallBeenMade(false); // Reset flag when customer is cleared
+    setViberPreviewTagValues(null);
 
     // Clear all preview errors when customer is cleared
     actions.clearPreviewErrors();
@@ -2647,6 +2793,9 @@ const CommonTestAndPreview = (props) => {
       emptyValues,
       selectedCustomer
     );
+    if (channel === CHANNELS.VIBER) {
+      setViberPreviewTagValues({ ...emptyValues });
+    }
     actions.updatePreviewRequested(payload);
     setHasPreviewCallBeenMade(true); // Mark that preview call was made
   };
@@ -2664,6 +2813,9 @@ const CommonTestAndPreview = (props) => {
         customValues,
         selectedCustomer
       );
+      if (channel === CHANNELS.VIBER) {
+        setViberPreviewTagValues({ ...customValues });
+      }
       await actions.updatePreviewRequested(payload);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
     } catch (error) {
@@ -2685,6 +2837,8 @@ const CommonTestAndPreview = (props) => {
       const activeTab = currentTabData?.activeTab;
       const templateContent = currentTabData?.[activeTab]?.['template-content'];
       contentToExtract = templateContent || contentToExtract;
+    } else if (channel === CHANNELS.VIBER) {
+      contentToExtract = getViberTagExtractionContent(getViberMergedFormData(), contentToExtract);
     }
 
     // Check for personalization tags (excluding unsubscribe)

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/PreviewHeader.test.js

@@ -514,167 +514,4 @@ describe('PreviewHeader', () => {
       consoleSpy.mockRestore();
     });
   });
-
-  describe('WEBPUSH channel - Fullscreen expander', () => {
-    it('should render expander icon for WEBPUSH channel', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // expander icon should be present for WEBPUSH
-      const expanderIcon = container.querySelector('[class*="expander"], [aria-label*="expander"], .anticon');
-      expect(expanderIcon).toBeTruthy();
-    });
-
-    it('should NOT render expander icon for non-WEBPUSH channels', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.EMAIL,
-        setIsFullscreenOpen,
-        showDeviceToggle: false,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // No expander icon for EMAIL channel (only device toggle icons may appear)
-      const expanderIcon = container.querySelector('[class*="expander"]');
-      expect(expanderIcon).toBeNull();
-    });
-
-    it('should call setIsFullscreenOpen(true) when expander icon is clicked', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      const expanderIcon = container.querySelector('[class*="expander"]') ||
-        container.querySelector('.anticon');
-      if (expanderIcon) {
-        fireEvent.click(expanderIcon);
-        expect(setIsFullscreenOpen).toHaveBeenCalledWith(true);
-      }
-    });
-
-    it('should render expander icon without ACTIVE class when device is MOBILE', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        device: MOBILE,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // Expander icon no longer adds ACTIVE class based on device
-      const activeEl = container.querySelector('.active');
-      expect(activeEl).toBeNull();
-      // But the expander icon itself should still be present
-      const expanderIcon = container.querySelector('[class*="expander"]') ||
-        container.querySelector('.anticon');
-      expect(expanderIcon).toBeTruthy();
-    });
-
-    it('should render expander icon without ACTIVE class when device is DESKTOP', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        device: DESKTOP,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // Expander icon does not have ACTIVE class for any device
-      const activeEl = container.querySelector('.active');
-      expect(activeEl).toBeNull();
-    });
-
-    it('should render expander icon alongside device content for WEBPUSH', () => {
-      // Note: suppression of showDeviceToggle for WEBPUSH is done in UnifiedPreview (parent),
-      // not in PreviewHeader itself. PreviewHeader only adds the expander icon for WEBPUSH.
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        setIsFullscreenOpen,
-        showDeviceToggle: false,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // expander icon should be present for WEBPUSH
-      const expanderIcon = container.querySelector('[class*="expander"]') ||
-        container.querySelector('.anticon');
-      expect(expanderIcon).toBeTruthy();
-    });
-
-    it('should accept isFullscreenOpen and setIsFullscreenOpen as props', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        isFullscreenOpen: false,
-        setIsFullscreenOpen,
-      };
-
-      expect(() =>
-        render(
-          <TestWrapper>
-            <PreviewHeader {...props} />
-          </TestWrapper>
-        )
-      ).not.toThrow();
-    });
-
-    it('should use default setIsFullscreenOpen when not provided', () => {
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-      };
-
-      expect(() =>
-        render(
-          <TestWrapper>
-            <PreviewHeader {...props} />
-          </TestWrapper>
-        )
-      ).not.toThrow();
-    });
-  });
 });