@capillarytech/creatives-library 9.0.29-alpha.1 → 9.0.29-alpha.2

package/v2Containers/Rcs/tests/index.test.js

@@ -475,7 +475,7 @@ describe('Creatives rcs test/>', () => {
 });
 
 describe('RCS carousel label resolution in non-full mode', () => {
-  it('should resolve shared variables across multiple carousel cards in both inline preview and Test&Preview slidebox', async () => {
+  it('keeps every carousel variable slot independent, even when they share a literal tag name, in both inline preview and Test&Preview slidebox', async () => {
     const templateData = {
       name: 'CarouselVarsTemplate',
       versions: {
@@ -553,13 +553,21 @@ describe('RCS carousel label resolution in non-full mode', () => {
     expect(inlinePreview.exists()).toBe(true);
     expect(inlinePreview.props().content?.carouselData?.length).toBeGreaterThanOrEqual(2);
 
-    // Variable slot id may live on `id` or React `key` depending on CapInput/TextArea wiring.
-    const nameVarAreas = wrapper.find('CapInputTextArea').filterWhere((n) => {
-      const id = String(n.prop('id') || '');
-      const key = String(n.key() || '');
-      return id.includes('{{name}}_') || key.includes('{{name}}_');
-    });
-    expect(nameVarAreas.length).toBeGreaterThanOrEqual(1);
+    const nameVarAreaForCard = (cardIndex) =>
+      wrapper
+        .find('CarouselCard')
+        .filterWhere((n) => n.prop('cardIndex') === cardIndex)
+        .find('CapInputTextArea')
+        .filterWhere((n) => {
+          const id = String(n.prop('id') || '');
+          const key = String(n.key() || '');
+          return id.includes('{{name}}_') || key.includes('{{name}}_');
+        });
+
+    // Card 0 has two `{{name}}` occurrences — title's, then description's, in DOM order — and
+    // each is now its own independent slot despite sharing the literal name.
+    const card0NameAreas = nameVarAreaForCard(0);
+    expect(card0NameAreas.length).toBe(2);
 
     act(() => {
       const slotId = nameVarAreas.at(0).prop('id') || nameVarAreas.at(0).key();
@@ -567,23 +575,264 @@ describe('RCS carousel label resolution in non-full mode', () => {
     });
     wrapper.update();
 
-    // Inline preview should now show resolved values across BOTH cards
+    // Only the title resolves — description's own `{{name}}` slot is untouched (independent slot).
     const updatedInlinePreview = wrapper.find('UnifiedPreview').filterWhere((n) => n.prop('content')?.carouselData).at(0);
     const inlineCards = updatedInlinePreview.props().content.carouselData;
     expect(inlineCards[0].title).toBe('Hi madhavi');
-    expect(inlineCards[0].bodyText).toBe('Welcome madhavi');
-    expect(inlineCards[1].title).toBe('Offer for madhavi');
-    expect(inlineCards[1].bodyText).toBe('Dear madhavi');
+    expect(inlineCards[0].bodyText).toBe('Welcome {{name}}');
+    expect(inlineCards[1].title).toBe('Offer for {{name}}');
+    expect(inlineCards[1].bodyText).toBe('Dear {{name}}');
+
+    // Filling card 0's description slot separately resolves it without disturbing the title.
+    act(() => {
+      const descSlotId = nameVarAreaForCard(0).at(1).prop('id') || nameVarAreaForCard(0).at(1).key();
+      nameVarAreaForCard(0).at(1).props().onChange({ target: { id: descSlotId, value: 'lakshmi' } });
+    });
+    wrapper.update();
+
+    const afterDescInlinePreview = wrapper.find('UnifiedPreview').filterWhere((n) => n.prop('content')?.carouselData).at(0);
+    const afterDescInlineCards = afterDescInlinePreview.props().content.carouselData;
+    expect(afterDescInlineCards[0].title).toBe('Hi madhavi');
+    expect(afterDescInlineCards[0].bodyText).toBe('Welcome lakshmi');
 
-    // Slidebox content should also be resolved (same underlying mapping)
+    // Slidebox content should mirror the same independent-slot resolution.
     const slidebox = wrapper.find('TestAndPreviewSlidebox').at(0);
     expect(slidebox.exists()).toBe(true);
     const slideboxContent = slidebox.props().content;
     expect(slideboxContent?.carouselData?.length).toBeGreaterThanOrEqual(2);
     expect(slideboxContent.carouselData[0].title).toBe('Hi madhavi');
-    expect(slideboxContent.carouselData[0].bodyText).toBe('Welcome madhavi');
-    expect(slideboxContent.carouselData[1].title).toBe('Offer for madhavi');
-    expect(slideboxContent.carouselData[1].bodyText).toBe('Dear madhavi');
+    expect(slideboxContent.carouselData[0].bodyText).toBe('Welcome lakshmi');
+    expect(slideboxContent.carouselData[1].title).toBe('Offer for {{name}}');
+    expect(slideboxContent.carouselData[1].bodyText).toBe('Dear {{name}}');
+
+    // Setting card 1's own `{{name}}` slots independently resolves card 1 without disturbing card 0.
+    // Inactive tab panes aren't mounted until switched to, so activate card 1's tab first.
+    act(() => {
+      wrapper.find('CapTab').prop('onChange')('1');
+    });
+    wrapper.update();
+    const card1NameAreas = nameVarAreaForCard(1);
+    expect(card1NameAreas.length).toBe(2);
+    act(() => {
+      const slotId = card1NameAreas.at(0).prop('id') || card1NameAreas.at(0).key();
+      card1NameAreas.at(0).props().onChange({ target: { id: slotId, value: 'raghav' } });
+    });
+    wrapper.update();
+    act(() => {
+      const descSlotId = nameVarAreaForCard(1).at(1).prop('id') || nameVarAreaForCard(1).at(1).key();
+      nameVarAreaForCard(1).at(1).props().onChange({ target: { id: descSlotId, value: 'suresh' } });
+    });
+    wrapper.update();
+
+    const finalInlinePreview = wrapper.find('UnifiedPreview').filterWhere((n) => n.prop('content')?.carouselData).at(0);
+    const finalInlineCards = finalInlinePreview.props().content.carouselData;
+    expect(finalInlineCards[0].title).toBe('Hi madhavi');
+    expect(finalInlineCards[0].bodyText).toBe('Welcome lakshmi');
+    expect(finalInlineCards[1].title).toBe('Offer for raghav');
+    expect(finalInlineCards[1].bodyText).toBe('Dear suresh');
+  });
+
+  it('picking a tag from "Add Labels" for card 2\'s description (a bare semantic token with no numeric backing) shows the value live, without touching card 2\'s title slot', async () => {
+    const templateData = {
+      name: 'CarouselTagPickTemplate',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'CAROUSEL',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    title: 'Hi {{name}}',
+                    description: 'Welcome {{name}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c1.png', height: 'MEDIUM' },
+                    cardVarMapped: {},
+                    suggestions: [],
+                  },
+                  {
+                    title: 'sdvsdvs {{first_name_capital}}',
+                    description: 'dssdfv {{adv}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c2.png', height: 'MEDIUM' },
+                    cardVarMapped: {},
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            uploadRcsAsset,
+            clearRcsMediaAsset,
+            createTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            editTemplate,
+            clearEditResponse,
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/edit', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          templateData={templateData}
+          rcsData={{}}
+          isFullMode={false}
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+        />
+      </Provider>,
+    );
+
+    // Flush hydration useEffects
+    await act(async () => {
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    // Card 2 is inactive until switched to.
+    act(() => {
+      wrapper.find('CapTab').prop('onChange')('1');
+    });
+    wrapper.update();
+
+    const card2 = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+
+    const descVarArea = card2
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{adv}}_'));
+    expect(descVarArea.length).toBeGreaterThanOrEqual(1);
+
+    // Focus card 2's description var slot, exactly like a user clicking into that box.
+    act(() => {
+      const id = descVarArea.at(0).prop('id');
+      descVarArea.at(0).props().onFocus({ target: { id } });
+    });
+    wrapper.update();
+
+    // Card 2's description TagList (the second .tag-mock under this card) picks "adv".
+    const card2AfterFocus = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+    const descTagList = card2AfterFocus.find('.tag-mock').at(1);
+    act(() => {
+      descTagList.props().onTagSelect('adv');
+    });
+    wrapper.update();
+
+    // Live (no save/reload) — the description's own box should now show the picked tag as its value.
+    const card2Final = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+    const descVarAreaAfterPick = card2Final
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{adv}}_'));
+    expect(descVarAreaAfterPick.at(0).prop('value')).toBe('{{adv}}');
+
+    // Title's own slot must be untouched by the description's tag pick.
+    const titleVarAreaAfterPick = card2Final
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{first_name_capital}}_'));
+    expect(titleVarAreaAfterPick.at(0).prop('value')).toBe('');
+  });
+
+  it('reopening a carousel after a prior save shows card 2\'s description value (persisted under its global positional key), not empty', async () => {
+    // Shape of a template that was already saved once: card 2 (index 1) picked "adv" for its
+    // description slot in an earlier session. Card 0 has 2 var tokens (title + desc), so card 2's
+    // title is global position 3 and its description is global position 4 — key "4".
+    const templateData = {
+      name: 'CarouselReopenTemplate',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'CAROUSEL',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    title: 'Hi {{name}}',
+                    description: 'Welcome {{name}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c1.png', height: 'MEDIUM' },
+                    cardVarMapped: {},
+                    suggestions: [],
+                  },
+                  {
+                    title: 'sdvsdvs {{first_name_capital}}',
+                    description: 'dssdfv {{adv}}',
+                    mediaType: 'IMAGE',
+                    media: { mediaUrl: 'https://cdn.example.com/c2.png', height: 'MEDIUM' },
+                    cardVarMapped: { '4': '{{adv}}' },
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            uploadRcsAsset,
+            clearRcsMediaAsset,
+            createTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            editTemplate,
+            clearEditResponse,
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/edit', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          templateData={templateData}
+          rcsData={{}}
+          isFullMode={false}
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+        />
+      </Provider>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    act(() => {
+      wrapper.find('CapTab').prop('onChange')('1');
+    });
+    wrapper.update();
+
+    const card2 = wrapper.find('CarouselCard').filterWhere((n) => n.prop('cardIndex') === 1);
+    const descVarArea = card2
+      .find('CapInputTextArea')
+      .filterWhere((n) => String(n.prop('id') || '').includes('{{adv}}_'));
+    expect(descVarArea.length).toBeGreaterThanOrEqual(1);
+    expect(descVarArea.at(0).prop('value')).toBe('{{adv}}');
   });
 });
 
@@ -940,74 +1189,6 @@ describe('RCS createPayload', () => {
     expect(Object.prototype.hasOwnProperty.call(card, 'cardVarMapped')).toBe(true);
   });
 
-  it('disables Done in non-full mode when a CTA button URL still holds the unresolved {{1}} placeholder', () => {
-    const templateData = {
-      name: 'PromoCard',
-      type: 'RCS',
-      versions: {
-        base: {
-          content: {
-            RCS: {
-              rcsContent: {
-                cardType: 'STANDALONE',
-                cardSettings: { cardOrientation: 'VERTICAL' },
-                cardContent: [
-                  {
-                    title: 'Title',
-                    description: 'Desc',
-                    mediaType: 'VIDEO',
-                    media: {
-                      mediaUrl: 'https://cdn.example.com/video.mp4',
-                      thumbnailUrl: 'https://cdn.example.com/video-thumb.jpg',
-                    },
-                    suggestions: [
-                      { type: 'CTA', text: 'Visit here', url: 'https://example.com{{1}}' },
-                    ],
-                  },
-                ],
-                contentType: 'RICHCARD',
-              },
-            },
-          },
-        },
-      },
-    };
-
-    const wrapper = mountWithIntl(
-      <Provider store={store}>
-        <Rcs
-          actions={{
-            clearCreateResponse: jest.fn(),
-            getTemplateDetails: jest.fn(),
-            uploadRcsAsset: jest.fn(),
-            clearRcsMediaAsset: jest.fn(),
-            editTemplate: jest.fn(),
-            clearEditResponse: jest.fn(),
-          }}
-          globalActions={{ fetchSchemaForEntity }}
-          onCreateComplete={onCreateComplete}
-          handleClose={handleClose}
-          intl={{ formatMessage }}
-          location={{ pathname: '/rcs/create', query: { type: false, module: 'default' }, search: '' }}
-          params={params}
-          templateData={templateData}
-          rcsData={{}}
-          isFullMode={false}
-          isEditFlow={false}
-          loadingTags={false}
-          metaEntities={[]}
-          isDltEnabled={false}
-          smsRegister={'DLT'}
-          getFormData={jest.fn()}
-        />
-      </Provider>,
-    );
-
-    const doneBtn = wrapper.find('CapButton.rcs-done-btn').at(0);
-    expect(doneBtn.exists()).toBe(true);
-    expect(doneBtn.prop('disabled')).toBe(true);
-  });
-
   it('should sync duplicate placeholders via cardVarMapped in non-full mode (typing once updates all occurrences)', () => {
     const templateData = {
       name: 'DupVarsTemplate',

package/v2Containers/Rcs/tests/utils.test.js

@@ -648,6 +648,86 @@ describe('RCS utils', () => {
       const out = mapRcsCardContentForConsumerWithResolvedTags([null, 'string', 42], {}, false);
       expect(out).toEqual([null, 'string', 42]);
     });
+
+    it('preserves a voucher/offer tag value (parenthesized key) in the emitted cardVarMapped, and keeps the raw tag in the description', () => {
+      const out = mapRcsCardContentForConsumerWithResolvedTags(
+        [
+          {
+            title: '',
+            description: 'This is Bird with colorful feathers {{voucher(1190738)}}',
+            mediaType: 'NONE',
+            cardVarMapped: { 'voucher(1190738)': 'SAVE20' },
+          },
+        ],
+        {},
+        false,
+      );
+      expect(out[0].cardVarMapped).toEqual({ 'voucher(1190738)': 'SAVE20' });
+      // The typed value is a literal preview string, not another mustache tag — the raw
+      // {{voucher(...)}} token must survive so the editor can re-render an editable slot
+      // on reopen, and so the backend can resolve a real per-recipient code at send time.
+      expect(out[0].description).toBe('This is Bird with colorful feathers {{voucher(1190738)}}');
+    });
+
+    it('substitutes plain text typed into a numeric personalization slot (not a tag pick)', () => {
+      const out = mapRcsCardContentForConsumerWithResolvedTags(
+        [
+          {
+            title: 'Hello {{1}}',
+            description: 'Visit us at {{2}} today',
+            mediaType: 'IMAGE',
+            cardVarMapped: { 1: 'World', 2: 'Downtown Store' },
+          },
+        ],
+        {},
+        false,
+      );
+      expect(out[0].title).toBe('Hello World');
+      expect(out[0].description).toBe('Visit us at Downtown Store today');
+    });
+
+    it('BUG REPRO: 2-card carousel — card 1 description resolves to card 0\'s value instead of its own tag pick', () => {
+      // Mirrors CreativesContainer/index.js ~1448-1461: rootRcsCardVarMapped is derived ONLY from
+      // cardContentFromSubmit[0] (the FIRST card's own cardVarMapped) and reused for every card.
+      // Card 0: title slot 1 -> user_id_b64, desc slot 2 -> voucher(1190738).
+      // Card 1: title slot 3 -> user_id_b64 (same semantic name as card 0), desc slot 4 -> first_name
+      // (the user's actual pick for card 1's own description slot, via "Add labels" while focused on card 1).
+      const card0 = {
+        title: 'This is a bird {{1}}',
+        description: 'This is Bird with colorful feathers {{2}}',
+        mediaType: 'IMAGE',
+        cardVarMapped: { 1: '{{user_id_b64}}', 2: '{{voucher(1190738)}}' },
+      };
+      const card1 = {
+        title: 'This is a park {{3}}',
+        description: 'This park has a cat and a bird {{4}}',
+        mediaType: 'IMAGE',
+        cardVarMapped: { 3: '{{user_id_b64}}', 4: '{{first_name}}' },
+      };
+      // rootRcsCardVarMapped, as CreativesContainer actually builds it: card 0's own map only.
+      const rootRcsCardVarMappedFromFirstCardOnly = { 1: '{{user_id_b64}}', 2: '{{voucher(1190738)}}' };
+
+      const out = mapRcsCardContentForConsumerWithResolvedTags(
+        [card0, card1],
+        rootRcsCardVarMappedFromFirstCardOnly,
+        true,
+      );
+
+      // Card 0 resolves correctly.
+      expect(out[0].title).toBe('This is a bird {{user_id_b64}}');
+      expect(out[0].description).toBe('This is Bird with colorful feathers {{voucher(1190738)}}');
+
+      // Card 1's title happens to resolve "correctly" only by coincidence (both root slot "1" and
+      // card 1's own slot "3" hold the same semantic value, user_id_b64).
+      expect(out[1].title).toBe('This is a park {{user_id_b64}}');
+
+      // Card 1's description SHOULD resolve using its own cardVarMapped slot 4 ({{first_name}}),
+      // not card 0's leaked slot 2 ({{voucher(1190738)}}). This is the reported bug: it currently
+      // resolves to card 0's value because resolveRcsCardPreviewStrings restarts slot numbering at
+      // 0 for every card (utils.js ~345-351) while the merged map still carries card 0's leftover
+      // global-numbered keys (via the root map bug in CreativesContainer).
+      expect(out[1].description).toBe('This park has a cat and a bird {{first_name}}');
+    });
   });
 
   describe('isRcsTextOnlyCardMediaType', () => {

package/v2Containers/Rcs/utils.js

@@ -196,6 +196,50 @@ export function coalesceCardVarMappedToTemplate(
   templateVarTokens.forEach((token, slotIndexZeroBased) => {
     const semanticVarName = getVarNameFromToken(token);
     if (!semanticVarName) return;
+
+    if (RCS_NUMERIC_VAR_NAME_REGEX.test(semanticVarName)) {
+      // Carousel numeric placeholder ({{3}}, {{4}}, …): the slot key IS the token digit itself —
+      // numbers are allocated globally across the whole carousel (getNextCarouselVarToken), not
+      // re-numbered per card, so the position-based `slotIndexZeroBased + 1` key below would target
+      // the wrong slot for every card after the first (e.g. card 2's first token is digit "3", not "1").
+      const numericSlotKey = semanticVarName;
+      const trimmedSlotValue = String(lookupSourceMap[numericSlotKey] ?? '').trim();
+      coalescedMap[numericSlotKey] = trimmedSlotValue;
+      // The slot's value may itself be a mustache-wrapped tag reference (e.g. "3" -> "{{last_name}}")
+      // — mirror it onto the bare semantic key too so VarSegment editors keyed by tag name also
+      // prepopulate (same rule as syncCardVarMappedSemanticsFromSlots).
+      const mustacheInnerMatch = trimmedSlotValue.match(/^\{\{([^}]+)\}\}$/);
+      const innerSemanticName = mustacheInnerMatch?.[1]?.trim();
+      if (innerSemanticName && innerSemanticName !== numericSlotKey) {
+        const existingInnerValue = String(coalescedMap[innerSemanticName] ?? '').trim();
+        if (!existingInnerValue) {
+          coalescedMap[innerSemanticName] = trimmedSlotValue;
+        }
+      }
+      return;
+    }
+
+    // A numeric slot may already self-reference this exact tag (e.g. "4" -> "{{last_name}}") when
+    // the template's own numeric placeholder has since been resolved to this tag in the text (see
+    // mapRcsCardContentForConsumerWithResolvedTags). That numeric key is the source of truth — don't
+    // fall through to the position-based legacy lookup below, which targets an unrelated (or
+    // nonexistent) slot and would clobber the real value with an empty string.
+    const mustacheSelfReference = `{{${semanticVarName}}}`;
+    const existingNumericKeyForSemantic = Object.keys(lookupSourceMap).find((key) => (
+      RCS_NUMERIC_VAR_NAME_REGEX.test(key) && lookupSourceMap[key] === mustacheSelfReference
+    ));
+    if (existingNumericKeyForSemantic) {
+      const trimmedSlotValue = String(lookupSourceMap[existingNumericKeyForSemantic] ?? '').trim();
+      coalescedMap[existingNumericKeyForSemantic] = trimmedSlotValue;
+      if (!seenSemanticVarNames.has(semanticVarName)) {
+        seenSemanticVarNames.add(semanticVarName);
+        coalescedMap[semanticVarName] = trimmedSlotValue;
+      }
+      return;
+    }
+
+    // Legacy: template embeds the semantic token directly ({{user_name}}); older payloads stored
+    // the resolved value under a position-based numeric key ("1", "2", …) by order of appearance.
     const numericSlotKey = String(slotIndexZeroBased + 1);
     const isRepeatOfSemanticName = seenSemanticVarNames.has(semanticVarName);
     const skipSharedSemanticLookup =
@@ -206,12 +250,6 @@ export function coalesceCardVarMappedToTemplate(
         valueFromSource = lookupSourceMap[semanticVarName];
       }
     }
-    if (valueFromSource === undefined || valueFromSource === null) {
-      valueFromSource = lookupSourceMap[String(slotIndexZeroBased + 1)];
-    }
-    if (valueFromSource === undefined || valueFromSource === null) {
-      valueFromSource = lookupSourceMap[slotIndexZeroBased + 1];
-    }
     const trimmedSlotValue = valueFromSource == null ? '' : String(valueFromSource).trim();
     coalescedMap[numericSlotKey] = trimmedSlotValue;
     if (!seenSemanticVarNames.has(semanticVarName)) {
@@ -287,6 +325,15 @@ export function isRcsTextOnlyCardMediaType(mediaType) {
  * Mirrors `resolveTemplateWithMap` in the Rcs editor: title vars use global slots 0..n-1, then description.
  * For text-only cards (`textOnlyCard`), ignore persisted `title` and resolve description from slot 0 — matches
  * the editor where only the message body is shown.
+ *
+ * @param {boolean} [preserveLiteralValueTokens=false] When true, a slot value that is NOT itself a
+ * `{{...}}`-wrapped tag (e.g. a literal preview string like "SAVE20" typed for a voucher/offer tag)
+ *
+ * @param {number} [cardSlotOffset=0] Starting global slot index for this card's title. Carousel cards
+ * beyond index 0 must pass the running total of every prior card's var count — numeric `{{N}}` tokens
+ * are numbered globally across the whole carousel, not per card (see `getNextCarouselVarToken` in
+ * carouselUtils.js). Without this, every card resolves as if it were card 0, colliding with an earlier
+ * card's numeric slot key in the merged map.
  */
 export function resolveRcsCardPreviewStrings(
   title,
@@ -321,6 +368,15 @@ export function resolveRcsCardPreviewStrings(
             omitSemantic,
           );
           if (slotValue == null || String(slotValue).trim() === '') return elem;
+          const trimmedSlotValue = String(slotValue).trim();
+          const isPlainNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(key);
+          if (
+            preserveLiteralValueTokens
+            && !isPlainNumericSlot
+            && !RCS_MUSTACHE_WRAPPED_REGEX.test(trimmedSlotValue)
+          ) {
+            return elem;
+          }
           return String(slotValue);
         }
         return elem;
@@ -373,6 +429,7 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
       textOnly,
     );
     const { cardVarMapped: _drop, ...cardRest } = card;
+
     return {
       ...cardRest,
       title: rcsTitle,