@capillarytech/creatives-library 9.1.3 → 9.1.4

package/package.json

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

package/v2Components/CommonTestAndPreview/constants.js

@@ -123,6 +123,9 @@ export const CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY = 'section';
  */
 export const SMS_MUSTACHE_TAG_PATTERN = /\{\{[^}]+\}\}/;
 
+/** WhatsApp slot key `{{<var>}}_<index>`; captures `<var>`. */
+export const WHATSAPP_SLOT_KEY_PATTERN = /^\{\{(.+?)\}\}_\d+$/;
+
 /**
  * Key on `smsFallbackContent` passed into Test & Preview — RCS slot map from SmsTraiEdit
  * (`onRcsFallbackEditorStateChange`), merged before tag extraction like the embedded SMS editor.

package/v2Components/CommonTestAndPreview/index.js

@@ -39,6 +39,10 @@ import {
   mapRcsSuggestionForTestMeta,
   getRcsPrimaryTagExtractionText,
   mergeSyntheticMustacheTags,
+  getWhatsappTagExtractionText,
+  getWhatsappCarouselCardBodyText,
+  mergeZaloUnfilledParamTags,
+  fillSlotMapFromCustomValues,
 } from './utils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
@@ -235,6 +239,8 @@ const CommonTestAndPreview = (props) => {
   const [isExtractingSmsFallbackTags, setIsExtractingSmsFallbackTags] = useState(false);
   const [customValues, setCustomValues] = useState({});
   const previewCustomValuesRef = useRef({});
+  // Values last applied to the preview (Update / Discard / customer prefill); drives client-side fill-in.
+  const [previewTagValues, setPreviewTagValues] = useState(null);
   const [showJSON, setShowJSON] = useState(false);
   const [tagsExtracted, setTagsExtracted] = useState(false);
 
@@ -595,6 +601,12 @@ const CommonTestAndPreview = (props) => {
     if (channel === CHANNELS.RCS) {
       return mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
     }
+    if (channel === CHANNELS.WHATSAPP) {
+      return mergeSyntheticMustacheTags(extractedTags, getWhatsappTagExtractionText(formData));
+    }
+    if (channel === CHANNELS.ZALO) {
+      return mergeZaloUnfilledParamTags(extractedTags, formData);
+    }
     return extractedTags ?? [];
   }, [
     channel,
@@ -680,7 +692,8 @@ const CommonTestAndPreview = (props) => {
       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');
+      // Braces escaped: unescaped `{{1}}` parses `{1}` as a quantifier and never matches numbered slots.
+      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 !== '';
@@ -1081,9 +1094,10 @@ const CommonTestAndPreview = (props) => {
         };
 
       case CHANNELS.WHATSAPP:
+        // contentStr is templateMsg alone; carousel card bodies live in carouselData[].
         return {
           templateSubject: formDataObj?.title || '',
-          templateContent: contentStr,
+          templateContent: getWhatsappTagExtractionText(formDataObj) || contentStr,
         };
 
       case CHANNELS.RCS: {
@@ -1180,9 +1194,10 @@ const CommonTestAndPreview = (props) => {
    * Updated to match API structure with ouId, sourceEntityId, module, deliverySettings, etc.
    */
 
-  const getCarouselMappedData = (carouselData = []) => carouselData.map((carousel) => {
+  const getCarouselMappedData = (carouselData = [], customValuesObj = {}) => carouselData.map((carousel) => {
     const {
-      bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate,
+      imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate,
+      varMap, tempBodyData,
     } = carousel || {};
     const buttonData = buttons.map((button, index) => {
       const {
@@ -1205,10 +1220,14 @@ const CommonTestAndPreview = (props) => {
       }
       return buttonObj;
     });
+    // Overview state keys a card's slot map `varMap` / `tempBodyData`; the saved-template shape
+    // uses cardVarMapped / bodyTemplate. Read both, as whatsappMedia does for the header.
+    // varMap wins: the editor seeds it from carousel.varMap and never from cardVarMapped, so on a
+    // library-saved template the saved map is stale relative to what the user sees on Overview.
     return {
-      body: bodyText,
-      cardVarMapped,
-      bodyTemplate,
+      body: resolveTagsInText(getWhatsappCarouselCardBodyText(carousel), customValuesObj),
+      cardVarMapped: fillSlotMapFromCustomValues(varMap ?? cardVarMapped, customValuesObj),
+      bodyTemplate: Array.isArray(tempBodyData) ? tempBodyData.join('') : bodyTemplate,
       media: {
         ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
           url: imageUrl,
@@ -1280,7 +1299,9 @@ const CommonTestAndPreview = (props) => {
         ...(suggestionsFormattedForTestMeta.length > 0 && {
           suggestions: suggestionsFormattedForTestMeta,
         }),
-        ...(singleRcsCardPayload?.cardVarMapped && { cardVarMapped: singleRcsCardPayload.cardVarMapped }),
+        ...(singleRcsCardPayload?.cardVarMapped && {
+          cardVarMapped: fillSlotMapFromCustomValues(singleRcsCardPayload.cardVarMapped, customValuesObj),
+        }),
       };
     });
     // Use the component-level smsFallbackContent prop (has rcsSmsFallbackVarMapped) so DLT
@@ -1525,7 +1546,7 @@ const CommonTestAndPreview = (props) => {
         const language = formDataObj?.language || formDataObj?.templateLanguage || 'en';
         const mediaType = formDataObj?.mediaType || formDataObj?.templateMediaType || MEDIA_TYPE_TEXT;
         const buttonType = formDataObj?.buttonType || BUTTON_TYPE_NONE;
-        const varMapped = formDataObj?.varMapped || {};
+        const varMapped = fillSlotMapFromCustomValues(formDataObj?.varMapped || {}, customValuesObj);
         const isPreviewUrl = formDataObj?.isPreviewUrl || false;
 
         // Extract buttons from ctaData or quickReplyData
@@ -1558,9 +1579,12 @@ const CommonTestAndPreview = (props) => {
 
         // Build whatsappMedia structure
         const whatsappMedia = {
-          header: formDataObj?.templateHeader || formDataObj?.header || '',
+          header: resolveTagsInText(formDataObj?.templateHeader || formDataObj?.header || '', customValuesObj),
           footer: formDataObj?.templateFooter || formDataObj?.footer || '',
-          headerVarMapped: formDataObj?.headerVarMapped || formDataObj?.headerVarMappedData || {},
+          headerVarMapped: fillSlotMapFromCustomValues(
+            formDataObj?.headerVarMapped || formDataObj?.headerVarMappedData || {},
+            customValuesObj,
+          ),
           headerTemplate: formDataObj?.headerTemplate || formDataObj?.templateHeader || '',
           buttons: modifiedButtons,
           language,
@@ -1633,7 +1657,7 @@ const CommonTestAndPreview = (props) => {
 
         // Add carousel data if mediaType is CAROUSEL
         if (mediaType === MEDIA_TYPE_CAROUSEL && formDataObj?.carouselData) {
-          templateConfigs.cards = getCarouselMappedData(formDataObj.carouselData);
+          templateConfigs.cards = getCarouselMappedData(formDataObj.carouselData, customValuesObj);
           templateConfigs.mediaType = formDataObj?.carouselMediaType?.toUpperCase() || MEDIA_TYPE_IMAGE;
         }
 
@@ -2426,7 +2450,10 @@ const CommonTestAndPreview = (props) => {
             const resolvedVarMapped = {};
             Object.keys(templateConfigs.varMapped).forEach((key) => {
               const value = templateConfigs.varMapped[key];
-              resolvedVarMapped[key] = resolveTagsInText(value, customValuesObj);
+              // Param left empty on Overview → use the value entered in Test & Preview.
+              resolvedVarMapped[key] = value
+                ? resolveTagsInText(value, customValuesObj)
+                : (customValuesObj[key] ?? '');
             });
             templateConfigs.varMapped = resolvedVarMapped;
           }
@@ -2457,7 +2484,9 @@ const CommonTestAndPreview = (props) => {
             const resolvedVarMapped = {};
             Object.keys(varMapped).forEach((key) => {
               const value = varMapped[key];
-              resolvedVarMapped[key] = resolveTagsInText(value, customValuesObj);
+              resolvedVarMapped[key] = value
+                ? resolveTagsInText(value, customValuesObj)
+                : (customValuesObj[key] ?? '');
             });
             varMapped = resolvedVarMapped;
           }
@@ -2547,10 +2576,31 @@ const CommonTestAndPreview = (props) => {
    *
    * IMPORTANT: Use raw content/formData initially, only use previewDataHtml if preview call was made
    */
+  // Fills last-applied test values into raw template text when the preview API reply isn't usable.
+  const resolvePreviewText = (text) => (
+    typeof text === 'string' && previewTagValues ? resolveTagsInText(text, previewTagValues) : text
+  );
+
   // Memoized RCS carousel content: only recomputes when the API response or raw template changes,
   // NOT on every customValues keystroke. Uses previewCustomValuesRef captured at Update Preview time.
   const rcsCarouselContentObj = useMemo(() => {
     if (channel !== CHANNELS.RCS) return null;
+    // Standalone card: fill entered values client-side; the preview API leaves numbered {{N}} unresolved.
+    const fillStandaloneCard = (card) => {
+      if (!hasPreviewCallBeenMade || !previewTagValues || !card || typeof card !== 'object' || Array.isArray(card.carouselData)) {
+        return card;
+      }
+      const {
+        templateHeader, templateMessage, rcsTitle, rcsDesc,
+      } = card;
+      return {
+        ...card,
+        templateHeader: resolvePreviewText(templateHeader),
+        templateMessage: resolvePreviewText(templateMessage),
+        rcsTitle: resolvePreviewText(rcsTitle),
+        rcsDesc: resolvePreviewText(rcsDesc),
+      };
+    };
     let resolvedContent = null;
     if (hasPreviewCallBeenMade && previewDataHtml?.resolvedBody) {
       resolvedContent = previewDataHtml.resolvedBody;
@@ -2558,7 +2608,7 @@ const CommonTestAndPreview = (props) => {
         try { resolvedContent = JSON.parse(resolvedContent); } catch (e) { resolvedContent = null; }
       }
     }
-    if (resolvedContent && typeof resolvedContent === 'object') return resolvedContent;
+    if (resolvedContent && typeof resolvedContent === 'object') return fillStandaloneCard(resolvedContent);
 
     let rawRcs = content;
     if (typeof rawRcs === 'string') {
@@ -2583,9 +2633,9 @@ const CommonTestAndPreview = (props) => {
         }),
       };
     }
-    return rawRcs || {};
+    return fillStandaloneCard(rawRcs) || {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel, content, hasPreviewCallBeenMade, previewDataHtml, formData]);
+  }, [channel, content, hasPreviewCallBeenMade, previewDataHtml, formData, previewTagValues]);
 
   const prepareUnifiedPreviewProps = () => {
     // Prepare content based on channel
@@ -2651,6 +2701,28 @@ const CommonTestAndPreview = (props) => {
         // Use raw content if no preview call was made or resolvedContent is not available
         contentObj = parsedContent || {};
       }
+      // WhatsApp: fill entered values client-side; the preview API leaves numbered {{N}} unresolved.
+      if (channel === CHANNELS.WHATSAPP && hasPreviewCallBeenMade) {
+        const { templateHeader, templateMsg, carouselData } = contentObj;
+        contentObj = {
+          ...contentObj,
+          templateHeader: resolvePreviewText(templateHeader),
+          templateMsg: resolvePreviewText(templateMsg),
+          // Carousel cards render bodyText/updatedBodyText directly, so resolve both shapes.
+          ...(Array.isArray(carouselData) && {
+            carouselData: carouselData.map((card) => {
+              const { bodyText, updatedBodyText } = card || {};
+              return {
+                ...card,
+                bodyText: resolvePreviewText(bodyText),
+                ...(Array.isArray(updatedBodyText) && {
+                  updatedBodyText: updatedBodyText.map((segment) => resolvePreviewText(segment)),
+                }),
+              };
+            }),
+          }),
+        };
+      }
     } else if (channel === CHANNELS.RCS) {
       // rcsCarouselContentObj is a useMemo that handles both the API-response path and the
       // client-side fallback. It is stable across keystrokes (only recomputes when
@@ -3104,6 +3176,7 @@ const CommonTestAndPreview = (props) => {
       previousBeeContentRef.current = '';
       setBeeContent('');
       setPreviewDataHtml('');
+      setPreviewTagValues(null);
       setSelectedCustomer(null);
       setRequiredTags([]);
       setOptionalTags([]);
@@ -3193,6 +3266,7 @@ const CommonTestAndPreview = (props) => {
         updatedValues,
         selectedCustomer
       );
+      setPreviewTagValues(updatedValues);
       actions.updatePreviewRequested(payload);
       setHasPreviewCallBeenMade(true); // Mark that preview call was made
       void syncSmsFallbackPreview(updatedValues, selectedCustomer);
@@ -3262,6 +3336,7 @@ const CommonTestAndPreview = (props) => {
     setTagsExtracted(false);
     setPreviewDevice(DESKTOP);
     setPreviewDataHtml('');
+    setPreviewTagValues(null);
     setHasPreviewCallBeenMade(false); // Reset preview call flag
     setViberPreviewTagValues(null);
     setSelectedTestEntities([]);
@@ -3300,6 +3375,7 @@ const CommonTestAndPreview = (props) => {
    */
   const handleClearSelection = () => {
     setSelectedCustomer(null);
+    setPreviewTagValues(null);
     setHasPreviewCallBeenMade(false); // Reset flag when customer is cleared
     setViberPreviewTagValues(null);
 
@@ -3363,6 +3439,8 @@ const CommonTestAndPreview = (props) => {
     if (channel === CHANNELS.VIBER) {
       setViberPreviewTagValues({ ...emptyValues });
     }
+    previewCustomValuesRef.current = emptyValues;
+    setPreviewTagValues(emptyValues);
     actions.updatePreviewRequested(payload);
     setHasPreviewCallBeenMade(true); // Mark that preview call was made
   };
@@ -3376,6 +3454,7 @@ const CommonTestAndPreview = (props) => {
       // Capture customValues at click time so the carousel preview only updates here,
       // not on every subsequent keystroke.
       previewCustomValuesRef.current = customValues;
+      setPreviewTagValues(customValues);
       // For RCS: always dispatch with RCS channel/content so previewDataHtml stays RCS-shaped,
       // even when the user triggers update from the SMS fallback tab.
       // SMS fallback preview is kept in sync by syncSmsFallbackPreview via smsFallbackPreviewText.
@@ -3475,6 +3554,13 @@ const CommonTestAndPreview = (props) => {
     if (channel === CHANNELS.SMS && !smsTemplateHasMustacheTags(smsEditorBody)) {
       smsTagSource = [];
     }
+    // Unmapped variables become fillable test values, like RCS.
+    if (channel === CHANNELS.WHATSAPP) {
+      smsTagSource = mergeSyntheticMustacheTags(smsTagSource, getWhatsappTagExtractionText(formData));
+    }
+    if (channel === CHANNELS.ZALO) {
+      smsTagSource = mergeZaloUnfilledParamTags(smsTagSource, formData);
+    }
     const { required, optional, hasPersonalizationTags } = categorizeTags(smsTagSource);
     setRequiredTags(required);
     setOptionalTags(optional);
@@ -3494,6 +3580,10 @@ const CommonTestAndPreview = (props) => {
       const templateContent = currentTabData?.[activeTab]?.['template-content'];
       contentToExtract = templateContent || contentToExtract;
     }
+    // Include carousel card bodies, else a carousel-only template scans as tag-free.
+    if (channel === CHANNELS.WHATSAPP) {
+      contentToExtract = getWhatsappTagExtractionText(formData || {}) || contentToExtract;
+    }
     return contentToExtract;
   };
 

package/v2Components/CommonTestAndPreview/tests/index.test.js

@@ -7,7 +7,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { render, screen, waitFor } from '@testing-library/react';
+import {
+  render, screen, waitFor, act,
+} from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import CommonTestAndPreview from '../index';
 import { CHANNELS, MEDIA_TYPE_CAROUSEL } from '../constants';
@@ -70,12 +72,14 @@ jest.mock('../SendTestMessage', () => {
   };
 });
 
+let lastPreviewSectionProps = null;
 jest.mock('../PreviewSection', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockPreviewSection() {
+    default: function MockPreviewSection(props) {
+      lastPreviewSectionProps = props;
       return ReactLib.createElement('div', { 'data-testid': 'preview-section' }, 'Preview Section');
     },
   };
@@ -199,6 +203,7 @@ describe('CommonTestAndPreview', () => {
     lastSendTestMessageProps = null;
     lastLeftPanelContentProps = null;
     lastCustomValuesEditorProps = null;
+    lastPreviewSectionProps = null;
     // Reset all mock function implementations
     Object.values(mockActions).forEach((mockFn) => {
       if (jest.isMockFunction(mockFn)) {
@@ -701,6 +706,41 @@ describe('CommonTestAndPreview', () => {
       expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('VIDEO');
     });
 
+    it('should resolve entered values into card body and fill the card slot map', async () => {
+      const formData = {
+        templateMsg: 'Deals inside',
+        mediaType: MEDIA_TYPE_CAROUSEL,
+        carouselMediaType: 'IMAGE',
+        carouselData: [
+          {
+            bodyText: 'Save {{1}} today',
+            tempBodyData: ['Save ', '{{1}}', ' today'],
+            varMap: { '{{1}}_1': '' },
+            mediaType: 'image',
+            buttons: [],
+          },
+        ],
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.WHATSAPP} formData={formData} />
+        </TestWrapper>
+      );
+      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
+      act(() => {
+        lastCustomValuesEditorProps.handleCustomValueChange('1', '20%');
+      });
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const { cards } = payload.whatsappMessageContent.templateConfigs;
+      expect(cards[0].body).toBe('Save 20% today');
+      expect(cards[0].bodyTemplate).toBe('Save {{1}} today');
+      expect(cards[0].cardVarMapped).toEqual({ '{{1}}_1': '20%' });
+    });
+
     it('should map button type PHONE_NUMBER to buttonObj with phoneNumber', async () => {
       const props = {
         ...defaultProps,
@@ -3877,5 +3917,125 @@ describe('CommonTestAndPreview', () => {
       expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('client-side preview fill-in when the preview API reply is not an object', () => {
+    const getPreviewContent = () => lastPreviewSectionProps.unifiedPreviewProps.content;
+
+    const enterValuesAndUpdatePreview = async (values) => {
+      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
+      act(() => {
+        Object.entries(values).forEach(([tag, value]) => lastCustomValuesEditorProps.handleCustomValueChange(tag, value));
+      });
+      await act(async () => {
+        await lastCustomValuesEditorProps.handleUpdatePreview();
+      });
+    };
+
+    const whatsappContent = {
+      templateHeader: 'Order for {{1}}',
+      templateMsg: 'Hi {{1}}, delivered by {{2}}',
+    };
+
+    it('fills entered values into the WhatsApp header and message', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            content={whatsappContent}
+            formData={whatsappContent}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Sh', 2: 'Monday' });
+
+      expect(getPreviewContent().templateHeader).toBe('Order for Sh');
+      expect(getPreviewContent().templateMsg).toBe('Hi Sh, delivered by Monday');
+    });
+
+    it('fills entered values when the preview API returns an object with unresolved {{N}}', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            content={whatsappContent}
+            formData={whatsappContent}
+            previewData={{ resolvedBody: JSON.stringify(whatsappContent) }}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Shash', 2: 'Name' });
+
+      expect(getPreviewContent().templateHeader).toBe('Order for Shash');
+      expect(getPreviewContent().templateMsg).toBe('Hi Shash, delivered by Name');
+    });
+
+    it('fills entered values into WhatsApp carousel card bodies', async () => {
+      const carouselContent = {
+        templateMsg: 'Deals inside',
+        carouselData: [
+          { bodyText: 'Card A {{1}}' },
+          { bodyText: 'Card B {{2}}', updatedBodyText: ['Card B ', '{{2}}'] },
+        ],
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            content={carouselContent}
+            formData={carouselContent}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Sh', 2: 'Monday' });
+
+      expect(getPreviewContent().carouselData[0].bodyText).toBe('Card A Sh');
+      expect(getPreviewContent().carouselData[1].updatedBodyText.join('')).toBe('Card B Monday');
+    });
+
+    it('restores WhatsApp placeholders after Discard custom values', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            content={whatsappContent}
+            formData={whatsappContent}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Sh', 2: 'Monday' });
+      act(() => {
+        lastCustomValuesEditorProps.handleDiscardCustomValues();
+      });
+
+      expect(getPreviewContent().templateMsg).toBe('Hi {{1}}, delivered by {{2}}');
+    });
+
+    it('fills entered values into an RCS standalone card', async () => {
+      const rcsContent = { templateHeader: 'Store {{1}}', templateMessage: 'Visit store for {{1}} offer' };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.RCS}
+            content={rcsContent}
+            formData={{ rcsTitle: 'Store {{1}}', rcsDesc: 'Visit store for {{1}} offer' }}
+          />
+        </TestWrapper>
+      );
+
+      await enterValuesAndUpdatePreview({ 1: 'Goog' });
+
+      expect(getPreviewContent().templateHeader).toBe('Store Goog');
+      expect(getPreviewContent().templateMessage).toBe('Visit store for Goog offer');
+    });
+  });
 });
 

package/v2Components/CommonTestAndPreview/tests/utils.test.js

@@ -10,6 +10,12 @@ import {
   hasTrimmedText,
   getCarouselButtonsWithTitles,
   getCarouselButtonSlotCount,
+  mergeSyntheticMustacheTags,
+  getWhatsappTagExtractionText,
+  getWhatsappCarouselCardBodyText,
+  getWhatsappCarouselTagExtractionText,
+  mergeZaloUnfilledParamTags,
+  fillSlotMapFromCustomValues,
 } from '../utils';
 
 describe('CommonTestAndPreview/utils', () => {
@@ -197,4 +203,143 @@ describe('CommonTestAndPreview/utils', () => {
       expect(getCarouselButtonSlotCount([{ buttons: [{ title: '  ' }] }])).toBe(0);
     });
   });
+
+  describe('getWhatsappTagExtractionText', () => {
+    it('joins header and message', () => {
+      expect(getWhatsappTagExtractionText({ templateHeader: 'Order {{1}}', templateMsg: 'Hi {{2}}' }))
+        .toBe('Order {{1}} Hi {{2}}');
+    });
+
+    it('handles missing fields', () => {
+      expect(getWhatsappTagExtractionText({ templateMsg: 'Hi {{1}}' })).toBe('Hi {{1}}');
+      expect(getWhatsappTagExtractionText(undefined)).toBe('');
+    });
+
+    it('surfaces unmapped WhatsApp slots as tags alongside API tags', () => {
+      const apiTags = [{ name: 'adv', metaData: { userDriven: false }, children: [] }];
+      const text = getWhatsappTagExtractionText({
+        templateHeader: 'Order {{1}}',
+        templateMsg: 'Hi {{adv}}, by {{2}}',
+      });
+      expect(mergeSyntheticMustacheTags(apiTags, text).map((tag) => tag.name)).toEqual(['adv', '1', '2']);
+    });
+
+    it('includes carousel card bodies', () => {
+      expect(getWhatsappTagExtractionText({
+        templateMsg: 'Hi {{1}}',
+        carouselData: [{ bodyText: 'Card A {{1}}' }, { bodyText: 'Card B {{2}}' }],
+      })).toBe('Hi {{1}} Card A {{1}} Card B {{2}}');
+    });
+
+    it('surfaces a carousel-only template as having tags', () => {
+      const text = getWhatsappTagExtractionText({
+        templateMsg: 'Hi there',
+        carouselData: [{ bodyText: 'Save {{1}} today' }],
+      });
+      expect(mergeSyntheticMustacheTags([], text).map((tag) => tag.name)).toEqual(['1']);
+    });
+  });
+
+  describe('getWhatsappCarouselCardBodyText', () => {
+    it('prefers the slot-resolved updatedBodyText', () => {
+      expect(getWhatsappCarouselCardBodyText({
+        bodyText: 'Hi {{1}}',
+        updatedBodyText: ['Hi ', '{{firstName}}'],
+      })).toBe('Hi {{firstName}}');
+    });
+
+    it('falls back to bodyText when no resolved text exists', () => {
+      expect(getWhatsappCarouselCardBodyText({ bodyText: 'Hi {{1}}', updatedBodyText: [] })).toBe('Hi {{1}}');
+      expect(getWhatsappCarouselCardBodyText({ bodyText: 'Hi {{1}}' })).toBe('Hi {{1}}');
+      expect(getWhatsappCarouselCardBodyText(undefined)).toBe('');
+    });
+  });
+
+  describe('getWhatsappCarouselTagExtractionText', () => {
+    it('skips blank card bodies', () => {
+      expect(getWhatsappCarouselTagExtractionText({
+        carouselData: [{ bodyText: '  ' }, { bodyText: 'Card B {{2}}' }, {}],
+      })).toBe('Card B {{2}}');
+    });
+
+    it('returns empty string for a non-carousel template', () => {
+      expect(getWhatsappCarouselTagExtractionText({ templateMsg: 'Hi' })).toBe('');
+    });
+  });
+
+  describe('mergeZaloUnfilledParamTags', () => {
+    const formData = {
+      templateListParams: [
+        { name: 'danh_xung', value: '' },
+        { name: 'name', value: '{{first_name}}' },
+        { name: 'ma_so', value: '   ' },
+      ],
+    };
+
+    it('adds a tag for each empty param', () => {
+      expect(mergeZaloUnfilledParamTags([], formData)).toEqual([
+        { name: 'danh_xung', metaData: { userDriven: false }, children: [] },
+        { name: 'ma_so', metaData: { userDriven: false }, children: [] },
+      ]);
+    });
+
+    it('keeps API tags and does not duplicate names', () => {
+      const apiTags = [{ name: 'danh_xung', metaData: { userDriven: true }, children: [] }];
+      const result = mergeZaloUnfilledParamTags(apiTags, formData);
+      expect(result.map((tag) => tag.name)).toEqual(['danh_xung', 'ma_so']);
+      expect(result[0]).toBe(apiTags[0]);
+    });
+
+    it('returns API tags when there are no params', () => {
+      expect(mergeZaloUnfilledParamTags(undefined, {})).toEqual([]);
+    });
+
+    it('handles missing args, unnamed params and null values', () => {
+      expect(mergeZaloUnfilledParamTags()).toEqual([]);
+      expect(mergeZaloUnfilledParamTags(null, {
+        templateListParams: [{ value: '' }, { name: 'a', value: null }, { name: 'b' }],
+      }).map((tag) => tag.name)).toEqual(['a', 'b']);
+    });
+  });
+
+  describe('fillSlotMapFromCustomValues', () => {
+    it('fills blank slots from custom values, keyed by tag name', () => {
+      expect(fillSlotMapFromCustomValues(
+        { '{{1}}_1': '', '{{2}}_3': '   ' },
+        { 1: 'Shash', 2: 'Name' },
+      )).toEqual({ '{{1}}_1': 'Shash', '{{2}}_3': 'Name' });
+    });
+
+    it('keeps slots already mapped on Overview', () => {
+      expect(fillSlotMapFromCustomValues(
+        { '{{1}}_1': '{{first_name}}', '{{adv}}_3': '' },
+        { first_name: 'ignored', adv: 'Promo' },
+      )).toEqual({ '{{1}}_1': '{{first_name}}', '{{adv}}_3': 'Promo' });
+    });
+
+    it('supports bare numeric and semantic slot keys (RCS cardVarMapped)', () => {
+      expect(fillSlotMapFromCustomValues({ 1: '', user_name: '' }, { 1: 'A', user_name: 'B' }))
+        .toEqual({ 1: 'A', user_name: 'B' });
+    });
+
+    it('matches custom values given as nested tag paths', () => {
+      expect(fillSlotMapFromCustomValues({ '{{first_name}}_0': '' }, { 'customer.first_name': 'Sh' }))
+        .toEqual({ '{{first_name}}_0': 'Sh' });
+    });
+
+    it('returns the map unchanged when there is nothing to fill', () => {
+      const slotMap = { '{{1}}_1': '' };
+      expect(fillSlotMapFromCustomValues(slotMap, {})).toBe(slotMap);
+      expect(fillSlotMapFromCustomValues(slotMap, { 2: 'x' })).toEqual(slotMap);
+      expect(fillSlotMapFromCustomValues(null, { 1: 'x' })).toBeNull();
+      expect(fillSlotMapFromCustomValues(undefined)).toBeUndefined();
+    });
+  });
+
+  describe('mergeSyntheticMustacheTags', () => {
+    it('handles null API tags', () => {
+      expect(mergeSyntheticMustacheTags(null, 'Hi {{1}}').map((tag) => tag.name)).toEqual(['1']);
+      expect(mergeSyntheticMustacheTags(null, 'no tags')).toEqual([]);
+    });
+  });
 });