@capillarytech/creatives-library 9.0.36-alpha.0 → 9.0.36

package/v2Components/CommonTestAndPreview/index.js

@@ -37,8 +37,6 @@ import {
   buildSyntheticSmsMustacheTags,
   normalizeRcsTestCardMedia,
   mapRcsSuggestionForTestMeta,
-  getRcsPrimaryTagExtractionText,
-  mergeSyntheticMustacheTags,
 } from './utils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
@@ -246,8 +244,6 @@ const CommonTestAndPreview = (props) => {
   const [smsFallbackPreviewText, setSmsFallbackPreviewText] = useState(undefined);
   // 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) {
@@ -578,7 +574,7 @@ const CommonTestAndPreview = (props) => {
     }
     const hasFallbackSmsBody = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
     if (channel === CHANNELS.RCS && hasFallbackSmsBody) {
-      const rcsPrimaryTags = mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
+      const rcsPrimaryTags = extractedTags ?? [];
       const fallbackSmsTextForTags = smsFallbackTextForTagExtraction ?? '';
       const fallbackSmsTagRows = smsTemplateHasMustacheTags(fallbackSmsTextForTags)
         ? (smsFallbackExtractedTags?.length > 0
@@ -589,15 +585,11 @@ const CommonTestAndPreview = (props) => {
       if (mergedRcsAndFallbackTags.length > 0) return mergedRcsAndFallbackTags;
       return buildSyntheticSmsMustacheTags(fallbackSmsTextForTags);
     }
-    if (channel === CHANNELS.RCS) {
-      return mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
-    }
     return extractedTags ?? [];
   }, [
     channel,
     extractedTags,
     getCurrentContent,
-    formData,
     smsFallbackContent,
     smsFallbackExtractedTags,
     smsFallbackTextForTagExtraction,
@@ -673,175 +665,15 @@ const CommonTestAndPreview = (props) => {
     let resolvedText = text;
 
     // Replace each tag with its custom value
-    Object.keys(tagValues || {}).forEach((tagPath) => {
+    Object.keys(tagValues).forEach((tagPath) => {
       const tagName = tagPath.split('.').pop(); // Get the actual tag name from the path
-      // Escape regex metacharacters in tagName (arbitrary JSON key) so it can't break the pattern.
-      const escapedTagName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      const tagRegex = new RegExp(`{{${escapedTagName}}}`, 'g');
-      const rawValue = tagValues[tagPath];
-      // Preserve legitimate falsy values (0, false); only an unset/blank slot keeps the placeholder.
-      const hasValue = rawValue !== null && rawValue !== undefined && rawValue !== '';
-      const replacement = hasValue ? String(rawValue) : `{{${tagName}}}`;
-      // Replacer function (not a string) so `$&`/`$1`-style sequences in the value are inserted literally.
-      resolvedText = resolvedText.replace(tagRegex, () => replacement);
+      const tagRegex = new RegExp(`{{${tagName}}}`, 'g');
+      resolvedText = resolvedText.replace(tagRegex, tagValues[tagPath] || `{{${tagName}}}`);
     });
 
     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 isCarousel = Boolean(
-      formDataObj.type === MEDIA_TYPE_CAROUSEL
-      || contentObj.type === MEDIA_TYPE_CAROUSEL
-      || (Array.isArray(previewCards) && previewCards.length > 0),
-    );
-    const mergedPreview = {
-      ...(contentObj.viberPreviewContent || {}),
-      ...(formDataObj.viberPreviewContent || {}),
-      ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
-      ...(isCarousel ? {
-        type: MEDIA_TYPE_CAROUSEL,
-        showCarouselEditorPreview: true,
-      } : {}),
-    };
-    return {
-      ...contentObj,
-      ...formDataObj,
-      ...(Array.isArray(previewCards) && previewCards.length ? { cards: previewCards } : {}),
-      ...(isCarousel ? { type: MEDIA_TYPE_CAROUSEL } : {}),
-      ...(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 || (mergedCards.length ? MEDIA_TYPE_CAROUSEL : ''),
-        cards: mergedCards.length ? mergedCards : (resolvedPreview.cards || basePreview.cards),
-        showCarouselEditorPreview: Boolean(
-          basePreview.showCarouselEditorPreview
-          || resolvedPreview.showCarouselEditorPreview
-          || mergedCards.length > 0,
-        ),
-        ...(resolvedMessage != null ? { messageContent: resolvedMessage } : {}),
-      },
-    };
-  };
-
   /**
    * Common handler for saving test customers (both new and existing)
    */
@@ -1120,13 +952,11 @@ const CommonTestAndPreview = (props) => {
           templateContent: formDataObj?.bodyText || contentStr,
         };
 
-      case CHANNELS.VIBER: {
-        const viberFormData = getViberMergedFormData(formDataObj);
+      case CHANNELS.VIBER:
         return {
-          templateSubject: viberFormData?.messageTitle || '',
-          templateContent: getViberTagExtractionContent(viberFormData, contentStr),
+          templateSubject: formDataObj?.messageTitle || '',
+          templateContent: contentStr,
         };
-      }
 
       case CHANNELS.WEBPUSH:
         return {
@@ -1226,7 +1056,7 @@ const CommonTestAndPreview = (props) => {
   const buildRcsTestMessagePayload = (
     creativeFormData,
     _unusedEditorContentString,
-    customValuesObj,
+    _customValuesObj,
     deliverySettingsOverride,
     basePayload,
     _rcsTestMetaExtras = {},
@@ -1241,9 +1071,7 @@ const CommonTestAndPreview = (props) => {
     } else if (rcsContentFromForm?.cardContent) {
       rcsCardPayloadList = [rcsContentFromForm.cardContent];
     }
-    // Title/description/suggestion text carry {{tag}} placeholders; resolve them against the
-    // user's test values here, same as every other channel (see resolveTagsInText usage below
-    // for SMS/EMAIL/WHATSAPP) — otherwise the test send goes out with literal tags unresolved.
+    // Raw title/description with template tags; SMS fallback uses tagged template fields (pickFirst…).
     const cardContentForTestMetaApi = rcsCardPayloadList.map((singleRcsCardPayload) => {
       const normalizedCardMediaForTestApi = singleRcsCardPayload?.media
         ? normalizeRcsTestCardMedia(singleRcsCardPayload.media)
@@ -1251,25 +1079,11 @@ const CommonTestAndPreview = (props) => {
       const suggestionsFromCard = Array.isArray(singleRcsCardPayload?.suggestions)
         ? singleRcsCardPayload.suggestions
         : [];
-      const suggestionsFormattedForTestMeta = suggestionsFromCard.map((suggestionItem, index) => mapRcsSuggestionForTestMeta(
-        {
-          ...suggestionItem,
-          text: resolveTagsInText(
-            suggestionItem?.text != null ? String(suggestionItem.text) : '',
-            customValuesObj,
-          ),
-        },
-        index,
-      ));
+      const suggestionsFormattedForTestMeta = suggestionsFromCard.map((suggestionItem, index) =>
+        mapRcsSuggestionForTestMeta(suggestionItem, index));
       return {
-        title: resolveTagsInText(
-          singleRcsCardPayload?.title != null ? String(singleRcsCardPayload.title) : '',
-          customValuesObj,
-        ),
-        description: resolveTagsInText(
-          singleRcsCardPayload?.description != null ? String(singleRcsCardPayload.description) : '',
-          customValuesObj,
-        ),
+        title: singleRcsCardPayload?.title ?? '',
+        description: singleRcsCardPayload?.description ?? '',
         mediaType: singleRcsCardPayload?.mediaType ?? MEDIA_TYPE_TEXT,
         ...(normalizedCardMediaForTestApi && { media: normalizedCardMediaForTestApi }),
         ...(suggestionsFormattedForTestMeta.length > 0 && {
@@ -2180,16 +1994,11 @@ 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 = '';
@@ -2204,8 +2013,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;
@@ -2232,8 +2039,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;
@@ -2276,10 +2081,6 @@ const CommonTestAndPreview = (props) => {
           text: messageText,
         };
 
-        if (messageType === CHANNELS.VIBER) {
-          messageType = '';
-        }
-
         // Add image if present
         if (imageData && imageData.url) {
           viberContent.image = {
@@ -2308,34 +2109,9 @@ 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/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),
-            };
-          }
+        // Resolve tags in text if custom values are provided
+        if (customValuesObj && Object.keys(customValuesObj).length > 0 && viberContent.text) {
+          viberContent.text = resolveTagsInText(viberContent.text, customValuesObj);
         }
 
         // Build messageBody JSON string
@@ -2727,39 +2503,33 @@ 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, then merge with formData for carousel + tags in all entry flows
-      let parsedViberContent = getViberMergedFormData();
-      if (!parsedViberContent || typeof parsedViberContent !== 'object') {
-        parsedViberContent = {};
+      // Parse content if it's a string
+      let parsedViberContent = content;
+      if (typeof content === 'string') {
+        try {
+          parsedViberContent = JSON.parse(content);
+        } catch (e) {
+          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 = mergeViberPreviewWithResolved(base, resolvedContent);
-        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 {
-        contentObj = parsedViberContent && typeof parsedViberContent === 'object' ? parsedViberContent : {};
-      }
-      if (
-        hasPreviewCallBeenMade
-        && viberPreviewTagValues
-        && Object.keys(viberPreviewTagValues).length > 0
-      ) {
-        contentObj = applyViberCustomValuesToContent(contentObj, viberPreviewTagValues);
+        // 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};
+        }
       }
     } else if (channel === CHANNELS.ZALO) {
       // For Zalo, content is an object with templatePreviewUrl, templateStatus, etc.
@@ -3143,11 +2913,6 @@ 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)
       // For RCS: always dispatch with RCS channel/content so previewDataHtml stays RCS-shaped.
       // SMS fallback preview is kept in sync by syncSmsFallbackPreview via smsFallbackPreviewText.
@@ -3230,7 +2995,6 @@ const CommonTestAndPreview = (props) => {
     setPreviewDevice(DESKTOP);
     setPreviewDataHtml('');
     setHasPreviewCallBeenMade(false); // Reset preview call flag
-    setViberPreviewTagValues(null);
     setSelectedTestEntities([]);
     setBeeContent('');
     previousBeeContentRef.current = '';
@@ -3268,7 +3032,6 @@ 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();
@@ -3327,9 +3090,6 @@ const CommonTestAndPreview = (props) => {
       emptyValues,
       selectedCustomer
     );
-    if (channel === CHANNELS.VIBER) {
-      setViberPreviewTagValues({ ...emptyValues });
-    }
     actions.updatePreviewRequested(payload);
     setHasPreviewCallBeenMade(true); // Mark that preview call was made
   };
@@ -3355,9 +3115,6 @@ const CommonTestAndPreview = (props) => {
         customValues,
         selectedCustomer
       );
-      if (channel === CHANNELS.VIBER) {
-        setViberPreviewTagValues({ ...customValues });
-      }
       await actions.updatePreviewRequested(payload);
 
       await syncSmsFallbackPreview(customValues, selectedCustomer);
@@ -3404,8 +3161,7 @@ const CommonTestAndPreview = (props) => {
    * Apply tag extraction when content comes from RCS + SMS fallback (no API call).
    */
   const applyRcsSmsFallbackTagExtraction = () => {
-    const rcsPrimaryTagTree = mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
-    const rcsPrimaryCategorized = categorizeTags(rcsPrimaryTagTree);
+    const rcsPrimaryCategorized = categorizeTags(extractedTags ?? []);
     const fallbackSmsResolvedForTags = smsFallbackTextForTagExtraction ?? '';
     let fallbackSmsTagTree = smsFallbackExtractedTags?.length > 0
       ? smsFallbackExtractedTags
@@ -3431,7 +3187,8 @@ const CommonTestAndPreview = (props) => {
    */
   useEffect(() => {
     if (!show) return;
-    if (channel === CHANNELS.RCS) {
+    const hasFallbackSmsTemplate = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+    if (channel === CHANNELS.RCS && hasFallbackSmsTemplate) {
       applyRcsSmsFallbackTagExtraction();
       return;
     }
@@ -3447,8 +3204,8 @@ const CommonTestAndPreview = (props) => {
     setOptionalTags(optional);
     setTagsExtracted(hasPersonalizationTags);
     setCustomValues((prev) => mergeCustomValuesWithTagKeys(prev, { required, optional }, { required: [], optional: [] }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- applyRcsSmsFallbackTagExtraction closes over latest extractedTags/smsFallbackExtractedTags/formData
-  }, [show, extractedTags, channel, formData, smsFallbackContent, smsFallbackExtractedTags, getCurrentContent, smsFallbackTextForTagExtraction]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- applyRcsSmsFallbackTagExtraction closes over latest extractedTags/smsFallbackExtractedTags
+  }, [show, extractedTags, channel, smsFallbackContent, smsFallbackExtractedTags, getCurrentContent, smsFallbackTextForTagExtraction]);
 
   /**
    * Get content to run tag extraction on (channel-specific).