@capillarytech/creatives-library 9.0.34 → 9.0.35-alpha.1

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

@@ -554,15 +554,13 @@ describe('buildCarouselCardsForPreview', () => {
     expect(
       buildCarouselCardsForPreview(undefined, {
         isFullMode: false,
-        rcsVarRegex,
-        resolveTemplateWithMap: jest.fn(),
+        resolveCarouselTemplateWithMap: jest.fn(),
       }),
     ).toEqual([]);
     expect(
       buildCarouselCardsForPreview([], {
         isFullMode: false,
-        rcsVarRegex,
-        resolveTemplateWithMap: jest.fn(),
+        resolveCarouselTemplateWithMap: jest.fn(),
       }),
     ).toEqual([]);
   });
@@ -571,47 +569,45 @@ describe('buildCarouselCardsForPreview', () => {
     expect(
       buildCarouselCardsForPreview(null, {
         isFullMode: false,
-        rcsVarRegex,
-        resolveTemplateWithMap: jest.fn(),
+        resolveCarouselTemplateWithMap: jest.fn(),
       }),
     ).toEqual([]);
   });
 
-  it('passes title/description through unresolved in full mode without calling resolveTemplateWithMap', () => {
-    const resolveTemplateWithMap = jest.fn();
+  it('passes title/description through unresolved in full mode without calling resolveCarouselTemplateWithMap', () => {
+    const resolveCarouselTemplateWithMap = jest.fn();
     const out = buildCarouselCardsForPreview(
       [{ title: 'Hi {{a}}', description: 'Bye {{b}}' }],
-      { isFullMode: true, rcsVarRegex, resolveTemplateWithMap },
+      { isFullMode: true, resolveCarouselTemplateWithMap },
     );
-    expect(resolveTemplateWithMap).not.toHaveBeenCalled();
+    expect(resolveCarouselTemplateWithMap).not.toHaveBeenCalled();
     expect(out[0].title).toBe('Hi {{a}}');
     expect(out[0].bodyText).toBe('Bye {{b}}');
   });
 
-  it('resolves title/description through resolveTemplateWithMap and accumulates slot offset across cards', () => {
-    const resolveTemplateWithMap = jest.fn((str, offset) => `R(${str}|${offset})`);
+  it('resolves title/description through resolveCarouselTemplateWithMap, scoped per card index', () => {
+    const resolveCarouselTemplateWithMap = jest.fn((str, cardIndex) => `R(${str}|${cardIndex})`);
     const out = buildCarouselCardsForPreview(
       [
         { title: 'Hi {{a}}', description: 'Bye {{b}} {{c}}' },
         { title: 'Solo {{d}}', description: 'none' },
       ],
-      { isFullMode: false, rcsVarRegex, resolveTemplateWithMap },
+      { isFullMode: false, resolveCarouselTemplateWithMap },
     );
-    expect(resolveTemplateWithMap).toHaveBeenNthCalledWith(1, 'Hi {{a}}', 0);
-    expect(resolveTemplateWithMap).toHaveBeenNthCalledWith(2, 'Bye {{b}} {{c}}', 1);
-    expect(resolveTemplateWithMap).toHaveBeenNthCalledWith(3, 'Solo {{d}}', 3);
-    expect(resolveTemplateWithMap).toHaveBeenNthCalledWith(4, 'none', 4);
+    expect(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(1, 'Hi {{a}}', 0);
+    expect(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(2, 'Bye {{b}} {{c}}', 0);
+    expect(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(3, 'Solo {{d}}', 1);
+    expect(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(4, 'none', 1);
     expect(out[0].title).toBe('R(Hi {{a}}|0)');
-    expect(out[0].bodyText).toBe('R(Bye {{b}} {{c}}|1)');
-    expect(out[1].title).toBe('R(Solo {{d}}|3)');
-    expect(out[1].bodyText).toBe('R(none|4)');
+    expect(out[0].bodyText).toBe('R(Bye {{b}} {{c}}|0)');
+    expect(out[1].title).toBe('R(Solo {{d}}|1)');
+    expect(out[1].bodyText).toBe('R(none|1)');
   });
 
   it('defaults missing card fields, including a default {} for a missing array item', () => {
     const out = buildCarouselCardsForPreview([undefined], {
       isFullMode: true,
-      rcsVarRegex,
-      resolveTemplateWithMap: jest.fn(),
+      resolveCarouselTemplateWithMap: jest.fn(),
     });
     expect(out[0]).toEqual({
       mediaType: '',
@@ -635,7 +631,7 @@ describe('buildCarouselCardsForPreview', () => {
           description: '',
         },
       ],
-      { isFullMode: true, rcsVarRegex, resolveTemplateWithMap: jest.fn() },
+      { isFullMode: true, resolveCarouselTemplateWithMap: jest.fn() },
     );
     expect(out[0].mediaType).toBe('image');
     expect(out[0].imageSrc).toBe('img.png');
@@ -651,7 +647,7 @@ describe('buildCarouselCardsForPreview', () => {
           videoAsset: { videoSrc: 'v.mp4', videoThumbnail: 'other-thumb.png' },
         },
       ],
-      { isFullMode: true, rcsVarRegex, resolveTemplateWithMap: jest.fn() },
+      { isFullMode: true, resolveCarouselTemplateWithMap: jest.fn() },
     );
     expect(out[0].videoPreviewImg).toBe('thumb.png');
     expect(out[0].videoSrc).toBe('v.mp4');
@@ -665,7 +661,7 @@ describe('buildCarouselCardsForPreview', () => {
           videoAsset: { videoSrc: 'v.mp4', videoThumbnail: 'other-thumb.png' },
         },
       ],
-      { isFullMode: true, rcsVarRegex, resolveTemplateWithMap: jest.fn() },
+      { isFullMode: true, resolveCarouselTemplateWithMap: jest.fn() },
     );
     expect(out[0].videoPreviewImg).toBe('other-thumb.png');
   });
@@ -673,7 +669,7 @@ describe('buildCarouselCardsForPreview', () => {
   it('defaults videoPreviewImg and videoSrc to empty string when nothing is set', () => {
     const out = buildCarouselCardsForPreview(
       [{ mediaType: RCS_MEDIA_TYPES.IMAGE }],
-      { isFullMode: true, rcsVarRegex, resolveTemplateWithMap: jest.fn() },
+      { isFullMode: true, resolveCarouselTemplateWithMap: jest.fn() },
     );
     expect(out[0].videoPreviewImg).toBe('');
     expect(out[0].videoSrc).toBe('');

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 each carousel card\'s same-named variable independently scoped in both inline preview and Test&Preview slidebox', async () => {
     const templateData = {
       name: 'CarouselVarsTemplate',
       versions: {
@@ -553,37 +553,64 @@ 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}}_');
+        });
+
+    const card0NameAreas = nameVarAreaForCard(0);
+    expect(card0NameAreas.length).toBeGreaterThanOrEqual(1);
 
     act(() => {
-      const slotId = nameVarAreas.at(0).prop('id') || nameVarAreas.at(0).key();
-      nameVarAreas.at(0).props().onChange({ target: { id: slotId, value: 'madhavi' } });
+      const slotId = card0NameAreas.at(0).prop('id') || card0NameAreas.at(0).key();
+      card0NameAreas.at(0).props().onChange({ target: { id: slotId, value: 'madhavi' } });
     });
     wrapper.update();
 
-    // Inline preview should now show resolved values across BOTH cards
+    // Inline preview should resolve card 0 only — card 1's own `{{name}}` slot is untouched.
     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[1].title).toBe('Offer for {{name}}');
+    expect(inlineCards[1].bodyText).toBe('Dear {{name}}');
 
-    // Slidebox content should also be resolved (same underlying mapping)
+    // Slidebox content should mirror the same per-card scoping (same underlying mapping)
     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[1].title).toBe('Offer for {{name}}');
+    expect(slideboxContent.carouselData[1].bodyText).toBe('Dear {{name}}');
+
+    // Setting card 1's own `{{name}}` slot 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).toBeGreaterThanOrEqual(1);
+    act(() => {
+      const slotId = card1NameAreas.at(0).prop('id') || card1NameAreas.at(0).key();
+      card1NameAreas.at(0).props().onChange({ target: { id: slotId, value: 'raghav' } });
+    });
+    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 madhavi');
+    expect(finalInlineCards[1].title).toBe('Offer for raghav');
+    expect(finalInlineCards[1].bodyText).toBe('Dear raghav');
   });
 });
 
@@ -1161,7 +1188,12 @@ describe('RCS createPayload', () => {
                 cardContent: [
                   {
                     title: 'Hello {{user_name}} and {{user_name}}',
-                    description: 'Hi {{user_name}}',
+                    // Distinct from the title's var name: VarSegmentMessageEditor ids are
+                    // `${token}_${localSegmentIndex}`, not scoped per-field, so reusing
+                    // {{user_name}} here would collide with the title's own id and get
+                    // picked up by the `{{user_name}}_` filter below once the tag-select
+                    // renames the title's first occurrence.
+                    description: 'Hi {{other_var}}',
                     mediaType: 'IMAGE',
                     media: { mediaUrl: '', thumbnailUrl: '' },
                     cardVarMapped: {},
@@ -1227,12 +1259,18 @@ describe('RCS createPayload', () => {
     });
     wrapper.update();
 
-    const updatedTitleVarAreas = wrapper.find('CapInputTextArea').filterWhere((n) => {
+    // The focused occurrence's own token is replaced with the picked tag, while the untouched
+    // duplicate keeps its original {{user_name}} token but syncs to the same resolved value.
+    const renamedVarArea = wrapper.find('CapInputTextArea').filterWhere((n) => {
+      const id = n.prop('id') || '';
+      return id.includes('{{first_name}}_');
+    });
+    const duplicateVarArea = wrapper.find('CapInputTextArea').filterWhere((n) => {
       const id = n.prop('id') || '';
       return id.includes('{{user_name}}_');
     });
-    expect(updatedTitleVarAreas.at(0).prop('value')).toBe('{{first_name}}');
-    expect(updatedTitleVarAreas.at(1).prop('value')).toBe('{{first_name}}');
+    expect(renamedVarArea.at(0).prop('value')).toBe('{{first_name}}');
+    expect(duplicateVarArea.at(0).prop('value')).toBe('{{first_name}}');
   });
 
   it('should keep two tags + freetext inside the variable textarea in non-full mode edit (not merged into static text)', () => {

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

@@ -364,6 +364,14 @@ describe('rcsLibraryHydrationUtils', () => {
       expect(out).toEqual({ 1: 'x', user_name: 'y' });
     });
 
+    it('keeps function-style tag keys with parentheses (voucher/offer/badge tags)', () => {
+      const input = {
+        'voucher(1190738)': 'SAVE20',
+        'badges_enroll_no_expiry(123)': 'Gold',
+      };
+      expect(pickRcsCardVarMappedEntries(input)).toEqual(input);
+    });
+
     it('returns {} for an empty object', () => {
       expect(pickRcsCardVarMappedEntries({})).toEqual({});
     });
@@ -439,6 +447,7 @@ describe('rcsLibraryHydrationUtils', () => {
             template: 'Hello',
             templateName: 'T1',
             registeredSenderIds: ['S1'],
+            templateVariableMapping: { '{#a#}_0': { data: 'x', count: 1 } },
           },
         },
       });
@@ -497,6 +506,7 @@ describe('rcsLibraryHydrationUtils', () => {
       expect(out.smsFallBackContent.templateConfigs).toEqual({
         templateName: 'ConfigName',
         registeredSenderIds: ['H1'],
+        templateVariableMapping: { a: { data: '1', count: 1 } },
       });
       expect(out.smsFallBackContent.rcsSmsFallbackVarMapped).toEqual({ a: '1' });
     });
@@ -537,6 +547,25 @@ describe('rcsLibraryHydrationUtils', () => {
       });
     });
 
+    it('non-full mode: DLT campaign with registeredSenderIds carries the var map into templateConfigs.templateVariableMapping (so it survives normalizeRcsMessageContentForApi stripping rcsSmsFallbackVarMapped)', () => {
+      enableTraiDlt();
+      const out = buildSmsFallBackContentForPayload({
+        smsFallbackData: {
+          message: 'Hi {#var#} your OTP is {#var#}.Capillary Tech.',
+          templateName: 'TEST_FALLBACK',
+          registeredSenderIds: ['CPLRYT'],
+          rcsSmsFallbackVarMapped: { '{#var#}_1': 'test1', '{#var#}_3': 'test2' },
+        },
+        templateData: {},
+        isFullMode: false,
+        smsRegister: 'DLT',
+      });
+      expect(out.smsFallBackContent.templateConfigs.templateVariableMapping).toEqual({
+        '{#var#}_1': { data: 'test1', count: 1 },
+        '{#var#}_3': { data: 'test2', count: 2 },
+      });
+    });
+
     it('non-full mode: DLT campaign but no derivable templateConfigs omits templateConfigs', () => {
       enableTraiDlt();
       const out = buildSmsFallBackContentForPayload({
@@ -744,6 +773,48 @@ describe('rcsLibraryHydrationUtils', () => {
       ).toBe('Direct Template');
     });
 
+    it('prefers templateConfigs.template (raw, {#var#} intact) over smsContent/message for DLT', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          smsContent: 'hey user this is a test',
+          message: 'hey user this is a test',
+          templateConfigs: {
+            templateName: 'RCSDLT2',
+            template: 'hey{#var#}test',
+            templateVariableMapping: {
+              '{#var#}_1': { data: ' user this is a ', count: 1 },
+            },
+          },
+        },
+      });
+      expect(out.nextSmsState.content).toBe('hey{#var#}test');
+      expect(out.nextSmsState.templateContent).toBe('hey{#var#}test');
+      expect(out.nextSmsState.rcsSmsFallbackVarMapped).toEqual({ '{#var#}_1': ' user this is a ' });
+    });
+
+    it('merges templateVariableMapping-derived slots with an explicit rcsSmsFallbackVarMapped (explicit wins)', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: {
+          smsContent: 'hey user this is a test',
+          rcsSmsFallbackVarMapped: { '{#var#}_1': 'explicit override' },
+          templateConfigs: {
+            template: 'hey{#var#}test',
+            templateVariableMapping: {
+              '{#var#}_1': { data: ' user this is a ', count: 1 },
+            },
+          },
+        },
+      });
+      expect(out.nextSmsState.rcsSmsFallbackVarMapped).toEqual({ '{#var#}_1': 'explicit override' });
+    });
+
+    it('falls back to smsContent when templateConfigs.template is absent (non-DLT)', () => {
+      const out = resolveSmsFallbackHydrationFromDetails({
+        smsFallBackContent: { smsContent: 'Hi {{first_name}}, your OTP is 1234' },
+      });
+      expect(out.nextSmsState.content).toBe('Hi {{first_name}}, your OTP is 1234');
+    });
+
     it('joins an updated-sms-editor array into the fallback message', () => {
       const out = resolveSmsFallbackHydrationFromDetails({
         smsFallBackContent: {

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

@@ -648,6 +648,69 @@ 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('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', () => {
@@ -701,6 +764,42 @@ describe('RCS utils', () => {
       expect(rcsTitle).toBe('');
       expect(rcsDesc).toBe('Visit Store for {{loyalty_points}} discount');
     });
+
+    it('carousel card 1+: cardSlotOffset param resolves against its own global slots, not card 0\'s', () => {
+      // Full, correctly-populated carousel-wide map: slot 1 = card 0 title (user_id_b64), slot 2 =
+      // card 0 desc (voucher(1190738)), slot 3 = card 1 title (user_id_b64), slot 4 = card 1 desc
+      // (first_name).
+      const fullCarouselWideMap = {
+        1: '{{user_id_b64}}',
+        2: '{{voucher(1190738)}}',
+        3: '{{user_id_b64}}',
+        4: '{{first_name}}',
+      };
+      // Card 1's own title/description, called with cardSlotOffset=2 (card 0 contributed 2 slots) —
+      // the same way mapRcsCardContentForConsumerWithResolvedTags now calls it per card.
+      const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+        'This is a park {{3}}',
+        'This park has a cat and a bird {{4}}',
+        fullCarouselWideMap,
+        true,
+        false,
+        false,
+        2,
+      );
+      expect(rcsTitle).toBe('This is a park {{user_id_b64}}');
+      expect(rcsDesc).toBe('This park has a cat and a bird {{first_name}}');
+    });
+
+    it('omitting cardSlotOffset defaults to 0 (single-card / standalone callers unaffected)', () => {
+      const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+        'Hi {{1}}',
+        'Pts {{2}}',
+        { 1: '{{first_name}}', 2: '{{loyalty_points}}' },
+        true,
+      );
+      expect(rcsTitle).toBe('Hi {{first_name}}');
+      expect(rcsDesc).toBe('Pts {{loyalty_points}}');
+    });
   });
 
   describe('sanitizeCardVarMappedValue', () => {

package/v2Containers/Rcs/utils.js

@@ -6,6 +6,7 @@ import {
   RCS_NUMERIC_VAR_NAME_REGEX,
   REGEX_SPECIAL_CHARS_ESCAPE_PATTERN,
   RCS_STRIP_MUSTACHE_DELIMITERS_REGEX,
+  RCS_MUSTACHE_WRAPPED_REGEX,
 } from './constants';
 import './index.scss';
 // import { formatMessage } from '../../../utils/intl';
@@ -287,6 +288,20 @@ 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)
+ * is left as the raw token instead of being baked into the returned string. Personalization-style
+ * values (themselves another mustache tag, e.g. `{{loyalty_points}}`) still resolve either way — those
+ * are internal-alias renames, not literal content. Pass true for payloads that get persisted/replayed
+ * (see `mapRcsCardContentForConsumerWithResolvedTags`) so a voucher's saved token survives for the
+ * editor to re-render an editable slot from, and for the backend to resolve per-recipient at send time.
+ *
+ * @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,
@@ -294,6 +309,8 @@ export function resolveRcsCardPreviewStrings(
   cardVarMapped,
   isLibraryMode = false,
   textOnlyCard = false,
+  preserveLiteralValueTokens = false,
+  cardSlotOffset = 0,
 ) {
   const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
   const getVarNameFromToken = (token = '') =>
@@ -321,6 +338,10 @@ export function resolveRcsCardPreviewStrings(
             omitSemantic,
           );
           if (slotValue == null || String(slotValue).trim() === '') return elem;
+          const trimmedSlotValue = String(slotValue).trim();
+          if (preserveLiteralValueTokens && !RCS_MUSTACHE_WRAPPED_REGEX.test(trimmedSlotValue)) {
+            return elem;
+          }
           return String(slotValue);
         }
         return elem;
@@ -333,8 +354,8 @@ export function resolveRcsCardPreviewStrings(
     ? 0
     : (effectiveTitle.match(rcsVarRegex) || []).length;
   return {
-    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, 0),
-    rcsDesc: resolveTemplateWithMap(String(description || ''), titleVarCount),
+    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, cardSlotOffset),
+    rcsDesc: resolveTemplateWithMap(String(description || ''), cardSlotOffset + titleVarCount),
   };
 }
 
@@ -355,6 +376,7 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
       : {};
   const list = Array.isArray(cardContentArray) ? cardContentArray : [];
   const isLibraryMode = isFullMode !== true;
+  let carouselSlotOffset = 0;
   return list.map((card) => {
     if (!card || typeof card !== 'object') return card;
     const nested =
@@ -365,13 +387,21 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
     const nestedClean = pickRcsCardVarMappedEntries(nested);
     const merged = { ...rootClean, ...nestedClean };
     const textOnly = isRcsTextOnlyCardMediaType(card.mediaType);
+    const cardTitle = card.title ?? '';
+    const cardDescription = card.description ?? '';
     const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
-      card.title ?? '',
-      card.description ?? '',
+      cardTitle,
+      cardDescription,
       merged,
       isLibraryMode,
       textOnly,
+      true,
+      carouselSlotOffset,
     );
+    const effectiveTitleForCount = textOnly ? '' : String(cardTitle);
+    const titleVarCount = (effectiveTitleForCount.match(rcsVarRegex) || []).length;
+    const descVarCount = (String(cardDescription).match(rcsVarRegex) || []).length;
+    carouselSlotOffset += titleVarCount + descVarCount;
     const { cardVarMapped: _drop, ...cardRest } = card;
     return {
       ...cardRest,