@capillarytech/creatives-library 9.0.73-alpha.sprint-testpreview.22 → 9.0.73-alpha.sprint-testpreview.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.73-alpha.sprint-testpreview.22",
+  "version": "9.0.73-alpha.sprint-testpreview.23",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CommonTestAndPreview/index.js

@@ -40,7 +40,9 @@ import {
   getRcsPrimaryTagExtractionText,
   mergeSyntheticMustacheTags,
   getWhatsappTagExtractionText,
+  getWhatsappCarouselCardBodyText,
   mergeZaloUnfilledParamTags,
+  fillSlotMapFromCustomValues,
 } from './utils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
@@ -1090,9 +1092,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: {
@@ -1189,9 +1192,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 {
@@ -1214,10 +1218,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,
@@ -1289,7 +1297,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
@@ -1524,7 +1534,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
@@ -1559,7 +1569,10 @@ const CommonTestAndPreview = (props) => {
         const whatsappMedia = {
           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,
@@ -1632,7 +1645,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;
         }
 
@@ -2674,6 +2687,16 @@ const CommonTestAndPreview = (props) => {
           ...contentObj,
           templateHeader: resolvePreviewText(contentObj.templateHeader),
           templateMsg: resolvePreviewText(contentObj.templateMsg),
+          // Carousel cards render bodyText/updatedBodyText directly, so resolve both shapes.
+          ...(Array.isArray(contentObj.carouselData) && {
+            carouselData: contentObj.carouselData.map((card) => ({
+              ...card,
+              bodyText: resolvePreviewText(card?.bodyText),
+              ...(Array.isArray(card?.updatedBodyText) && {
+                updatedBodyText: card.updatedBodyText.map((segment) => resolvePreviewText(segment)),
+              }),
+            })),
+          }),
         };
       }
     } else if (channel === CHANNELS.RCS) {
@@ -3533,6 +3556,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

@@ -667,6 +667,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,
@@ -3843,6 +3878,31 @@ describe('CommonTestAndPreview', () => {
       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>

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

@@ -12,7 +12,10 @@ import {
   getCarouselButtonSlotCount,
   mergeSyntheticMustacheTags,
   getWhatsappTagExtractionText,
+  getWhatsappCarouselCardBodyText,
+  getWhatsappCarouselTagExtractionText,
   mergeZaloUnfilledParamTags,
+  fillSlotMapFromCustomValues,
 } from '../utils';
 
 describe('CommonTestAndPreview/utils', () => {
@@ -220,6 +223,48 @@ describe('CommonTestAndPreview/utils', () => {
       });
       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', () => {
@@ -257,6 +302,40 @@ describe('CommonTestAndPreview/utils', () => {
     });
   });
 
+  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']);

package/v2Components/CommonTestAndPreview/utils.js

@@ -61,9 +61,25 @@ export const mergeSyntheticMustacheTags = (apiTags = [], rawText = '') => {
   return [...(apiTags ?? []), ...synthetic];
 };
 
-/** WhatsApp header + body text, scanned for unmapped `{{N}}` slots. */
+/**
+ * A WhatsApp carousel card's body as the user sees it: the slot-resolved text when Overview
+ * mapping produced one, else the raw body. Mirrors the templateHeader/headerTemplate pair.
+ */
+export const getWhatsappCarouselCardBodyText = (card) => {
+  const resolvedBody = Array.isArray(card?.updatedBodyText) ? card.updatedBodyText.join('') : '';
+  return resolvedBody || (card?.bodyText ?? '');
+};
+
+/** Carousel card bodies joined — they live outside templateMsg, so a tag scan misses them. */
+export const getWhatsappCarouselTagExtractionText = (formDataObj) => (
+  Array.isArray(formDataObj?.carouselData) ? formDataObj.carouselData : [])
+  .map(getWhatsappCarouselCardBodyText)
+  .filter((bodyText) => hasTrimmedText(bodyText))
+  .join(' ');
+
+/** WhatsApp header + body + carousel card bodies, scanned for unmapped `{{N}}` slots. */
 export const getWhatsappTagExtractionText = (formDataObj) => (
-  `${formDataObj?.templateHeader || ''} ${formDataObj?.templateMsg || ''}`.trim()
+  `${formDataObj?.templateHeader || ''} ${formDataObj?.templateMsg || ''} ${getWhatsappCarouselTagExtractionText(formDataObj)}`.trim()
 );
 
 /** Zalo params left empty on Overview, surfaced as fillable test values (keyed by param name). */
@@ -75,6 +91,34 @@ export const mergeZaloUnfilledParamTags = (apiTags = [], formDataObj = {}) => {
   return [...(apiTags ?? []), ...unfilledParamTags];
 };
 
+/**
+ * Slot key -> the variable name it holds. WhatsApp keys a slot by token and occurrence index
+ * (`<token>_<index>`); RCS keys it by the variable's own name, per card.
+ */
+const getSlotKeyVarName = (slotKey) => String(slotKey).replace(/^\{\{(.+?)\}\}_\d+$/, '$1');
+
+/**
+ * A slot map holds what the user mapped on Overview, per variable of the template.
+ * Slots left blank there take the value entered in Test & Preview for the same variable, so
+ * createMessageMeta gets a complete map instead of empty slots. Mapped slots are left untouched.
+ */
+export const fillSlotMapFromCustomValues = (slotMap, customValues = {}) => {
+  if (!slotMap || typeof slotMap !== 'object') return slotMap;
+  const customValueByVarName = {};
+  Object.keys(customValues || {}).forEach((tagPath) => {
+    customValueByVarName[tagPath.split('.').pop()] = customValues[tagPath];
+  });
+  if (Object.keys(customValueByVarName).length === 0) return slotMap;
+  const hasValue = (value) => value != null && String(value).trim() !== '';
+  const filledSlotMap = { ...slotMap };
+  Object.keys(filledSlotMap).forEach((slotKey) => {
+    if (hasValue(filledSlotMap[slotKey])) return;
+    const customValue = customValueByVarName[getSlotKeyVarName(slotKey)];
+    if (hasValue(customValue)) filledSlotMap[slotKey] = String(customValue);
+  });
+  return filledSlotMap;
+};
+
 /** RCS createMessageMeta: normalize media shape (mediaUrl, thumbnailUrl, height string). */
 export const normalizeRcsTestCardMedia = (media) => {
   if (!media || typeof media !== 'object') return undefined;

package/v2Containers/Whatsapp/index.js

@@ -3176,13 +3176,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       templateMsgText += `\n${formatMessage(messages.templateMessageUnsubscribeText)}`;
     }
 
-    // Get templateEditor from editData or construct from templateMessage
-    const templateEditorValue = isEditFlow && editData?.templateEditor
-      ? editData.templateEditor
-      : templateMsgText;
+    // Raw body, slots intact — pairs with varMapped below; templateMsg carries the resolved text.
+    const templateEditorValue = tempMsgArray.length > 0 ? tempMsgArray.join("") : templateMsgText;
 
-    // Get varMapped from editData or empty object
-    const varMappedValue = editData?.varMapped || {};
+    // Live slot map (`{{1}}_1` -> mapped tag/value); `editData` has no varMapped, so it was always {}.
+    const varMappedValue = { ...varMap };
 
     return {
       // Preview structure (for WhatsAppPreviewContent component)
@@ -3220,7 +3218,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       mediaType: templateMediaType,
       isPreviewUrl: false,
       headerVarMapped: headerVarMappedData,
-      headerTemplate: isEditFlow ? updatedHeaderData.join("") : templateHeader,
+      // Raw header, slots intact — pairs with headerVarMapped; templateHeader carries the resolved text.
+      headerTemplate: tempHeaderData.length > 0 ? tempHeaderData.join("") : templateHeader,
       whatsappVideoSrcAndPreview,
       whatsappDocSource,
       whatsappDocParams,
@@ -3239,6 +3238,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     docPreview,
     isEditFlow,
     updatedSmsEditor,
+    tempMsgArray,
+    tempHeaderData,
     templateMessage,
     unsubscribeRequired,
     isAuthenticationTemplate,

package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap
-size: 57271855 bytes
-sha256: d1e9c0cd51e8b68c9acd1ddeee01866302a054ed135d594d34509d92a3e39124
+size: 57295127 bytes
+sha256: 3ca4752bd0410b9d7f0e57070855228ef817cc04531f23794bf27e2647b4f7a2