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

package/v2Containers/Rcs/constants.js

@@ -78,8 +78,13 @@ export const rcsVarTestRegex = /^\{\{[^}]+\}\}$/;
 export const RCS_NUMERIC_VAR_TOKEN_REGEX = /\{\{(\d+)\}\}/g;
 /** `cardVarMapped` slot keys that are numeric only (legacy ordering). */
 export const RCS_NUMERIC_VAR_NAME_REGEX = /^\d+$/;
-/** Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the editor). */
-export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^[\w.]+$/;
+/**
+ * Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the
+ * editor). Carousel slots are now keyed by global position (see `computeCarouselVarSlotKeys`), a
+ * plain number, so this only needs to match bare semantic names — the optional `cN::` prefix is
+ * kept solely so `pickRcsCardVarMappedEntries` doesn't drop legacy scoped keys from older payloads.
+ */
+export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^(?:c\d+::)?[\w.()]+$/;
 /** Escape all special RegExp characters in an arbitrary string before using it in `new RegExp(...)`. */
 export const REGEX_SPECIAL_CHARS_ESCAPE_PATTERN = /[-/\\^$*+?.()|[\]{}]/g;
 /** Entire string is wrapped in `{{…}}` mustache delimiters (allows any content including `}`). */

package/v2Containers/Rcs/index.js

@@ -175,6 +175,7 @@ import {
   getCarouselDescriptionCharacterCount,
   buildCarouselCardsForPreview as buildCarouselCardsForPreviewUtil,
   buildCarouselCardContentForPayload,
+  computeCarouselVarSlotKeys,
 } from './carouselUtils';
 import CarouselDimensionSelection from './components/CarouselDimensionSelection';
 import CarouselCard from './components/CarouselCard';
@@ -270,7 +271,12 @@ export const Rcs = (props) => {
   const [carouselErrors, setCarouselErrors] = useState([]); // [{ title: string|false, description: string|false }]
   const [activeCarouselIndex, setActiveCarouselIndex] = useState('0');
   const [carouselResetNonce, setCarouselResetNonce] = useState(0);
-  const [carouselFocusedVarId, setCarouselFocusedVarId] = useState('');
+  // Title and description each track their own last-focused var slot (mirrors titleTextAreaId/
+  // descTextAreaId for the single-card flow) — a single shared id would let a click on the
+  // "Add Labels" picker next to one field silently apply to whichever field was focused last,
+  // if the user hadn't just clicked into that field's own var slot.
+  const [carouselTitleFocusedVarId, setCarouselTitleFocusedVarId] = useState('');
+  const [carouselDescFocusedVarId, setCarouselDescFocusedVarId] = useState('');
    const [imageError, setImageError] = useState(null);
   const [templateTitleError, setTemplateTitleError] = useState(false);
   const [cardVarMapped, setCardVarMapped] = useState({});
@@ -596,7 +602,8 @@ export const Rcs = (props) => {
           }}
           onTitleAddVar={() => appendVarToCarouselField(index, 'title')}
           onDescriptionAddVar={() => appendVarToCarouselField(index, 'description')}
-          onTagSelect={onCarouselTagSelect}
+          onTitleTagSelect={onCarouselTitleTagSelect}
+          onDescTagSelect={onCarouselDescTagSelect}
           onContextChange={handleOnTagsContextChange}
           renderEditMessage={renderCarouselEditMessage}
           onFieldChange={(fieldName, value) => handleCarouselValueChange(index, [{ fieldName, value }])}
@@ -655,7 +662,8 @@ export const Rcs = (props) => {
             onChange={(key) => {
               setActiveCarouselIndex(`${key}`);
               // reset focused var when switching cards (as per requirement)
-              setCarouselFocusedVarId('');
+              setCarouselTitleFocusedVarId('');
+              setCarouselDescFocusedVarId('');
             }}
             panes={getCarouselTabPanes()}
           />
@@ -775,7 +783,7 @@ export const Rcs = (props) => {
       ['title', 'description'].forEach((field) => {
         const templateStr = card?.[field] || '';
         if (!templateStr) return;
-        const resolved = resolveTemplateWithMap(templateStr);
+        const resolved = resolveCarouselTemplateWithMap(templateStr, idx, field === 'description');
         if (!resolved) {
           updateCarouselErrors(idx, { [field]: false });
           return;
@@ -867,6 +875,30 @@ export const Rcs = (props) => {
     }).join('');
   };
 
+  /**
+   * Carousel resolve: each variable slot's key comes from `computeCarouselVarSlotKeys` (title,
+   * then description, per card; same name within a card shares one key; different cards never
+   * collide). A slot's key never depends on which tag currently fills it.
+   */
+  const resolveCarouselTemplateWithMap = (str = '', cardIndex, isDescField = false) => {
+    if (!str) return '';
+    const arr = splitTemplateVarStringRcs(str);
+    const fieldKeys = (isDescField
+      ? computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex]?.description
+      : computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex]?.title) ?? [];
+    let varOrdinal = 0;
+    return arr.map((elem) => {
+      if (rcsVarTestRegex.test(elem)) {
+        const slotKey = fieldKeys[varOrdinal];
+        varOrdinal += 1;
+        const slotValue = cardVarMapped?.[slotKey];
+        if (isNil(slotValue) || String(slotValue)?.trim?.() === '') return elem;
+        return String(slotValue);
+      }
+      return elem;
+    }).join('');
+  };
+
   const buildCarouselCardsForPreview = (cards = []) =>
     buildCarouselCardsForPreviewUtil(cards, { isFullMode, rcsVarRegex, resolveTemplateWithMap });
 
@@ -1214,6 +1246,19 @@ export const Rcs = (props) => {
         setSelectedCarousel(`${firstHeight}_${cardWidth}`);
         setActiveCarouselIndex('0');
 
+        if (cards.length > 1) {
+          // Each card's own `cardVarMapped` is already keyed by global var position (see
+          // computeCarouselVarSlotKeys) — a slot's key is assigned once, from where its token
+          // sits in the template text, and never depends on which tag fills it. So merging every
+          // card's own map directly is correct and collision-free: no per-card coalescing,
+          // normalizing, or re-scoping needed (unlike the old name-based scoped-key scheme).
+          setCardVarMapped((previousVarMap) => cards.reduce((merged, c = {}) => {
+            const rawCardMap = c?.cardVarMapped;
+            if (rawCardMap == null || typeof rawCardMap !== 'object') return merged;
+            return { ...merged, ...rawCardMap };
+          }, { ...(previousVarMap || {}) }));
+        }
+
         const hydratedCards = cards.map((c = {}, idx) => {
           const mediaType = c.mediaType;
           const media = c.media || {};
@@ -1529,23 +1574,51 @@ export const Rcs = (props) => {
 
   const onDescTagSelect = (tagName) => onTagSelect(tagName, descTextAreaId, RCS_TAG_AREA_FIELD_DESC);
 
-  const onCarouselTagSelect = (data) => {
-    if (!carouselFocusedVarId) return;
-    const sep = carouselFocusedVarId.lastIndexOf('_');
-    if (sep === -1) return;
-    const token = carouselFocusedVarId.slice(0, sep);
-    const variableName = getVarNameFromToken(token);
-    if (!variableName) return;
-    setCardVarMapped((prev) => {
-      const base = (prev?.[variableName] ?? '').toString();
-      const nextVal = `${base}{{${data}}}`;
-      return {
-        ...(prev || {}),
-        [variableName]: nextVal,
-      };
-    });
+  /** Field-local var ordinal (0-based, vars only) for a `{{tok}}_segIdx` composite id — scoped to
+   * a single field's own template string (title and description are tracked independently). */
+  const getCarouselFieldLocalVarOrdinal = (compositeId, fieldTemplateStr) => {
+    const segments = splitTemplateVarStringRcs(fieldTemplateStr ?? '');
+    let varOrdinal = 0;
+    for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex += 1) {
+      if (rcsVarTestRegex.test(segments[segmentIndex])) {
+        if (`${segments[segmentIndex]}_${segmentIndex}` === compositeId) return varOrdinal;
+        varOrdinal += 1;
+      }
+    }
+    return null;
+  };
+
+  // The card's placeholder (numeric {{N}} or a bare semantic token like {{first_name}}) is locked
+  // here — picking a tag only supplies/replaces the *value* behind that slot in cardVarMapped, it
+  // never rewrites the card's title/description text. `focusedVarId` is passed in by the caller
+  // (title vs description each track their own last-focused slot, like titleTextAreaId/
+  // descTextAreaId) so a click on one field's "Add Labels" can never apply to the other field's
+  // last-focused slot. The slot's key is its global position across the whole carousel — assigned
+  // once from where its token sits in the template text, never from whatever tag currently fills
+  // it — so swapping tags never changes the key and never collides with another card's slot.
+  const onCarouselTagSelect = (data, focusedVarId, isDescField) => {
+    if (!focusedVarId) return;
+    const activeIdx = parseInt(activeCarouselIndex, 10);
+    const cardIndex = isNaN(activeIdx) ? 0 : activeIdx;
+    const fieldTemplateStr = (isDescField
+      ? carouselData?.[cardIndex]?.description
+      : carouselData?.[cardIndex]?.title) || '';
+    const localVarOrdinal = getCarouselFieldLocalVarOrdinal(focusedVarId, fieldTemplateStr);
+    if (localVarOrdinal == null) return;
+    const slotKeys = computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex];
+    const slotKey = (isDescField ? slotKeys?.description : slotKeys?.title)?.[localVarOrdinal];
+    if (!slotKey) return;
+
+    setCardVarMapped((prev) => ({
+      ...(prev || {}),
+      [slotKey]: `{{${data}}}`,
+    }));
   };
 
+  const onCarouselTitleTagSelect = (data) => onCarouselTagSelect(data, carouselTitleFocusedVarId, false);
+
+  const onCarouselDescTagSelect = (data) => onCarouselTagSelect(data, carouselDescFocusedVarId, true);
+
   //removing optout tag for rcs
   const getRcsTags = () => {
     const tempTags = cloneDeep(tags);
@@ -1631,7 +1704,7 @@ export const Rcs = (props) => {
               key={`${elem}_${index}`}
               placeholder={`enter the value for ${elem}`}
               autosize={{ minRows: 1, maxRows: 3 }}
-              onChange={e => textAreaValueChange(e, type)}
+              onChange={e => textAreaValueChange(e)}
               value={textAreaValue(index, type)}
               onFocus={(e) => setTextAreaId(e, type)}
             />
@@ -1844,26 +1917,39 @@ const onTitleAddVar = () => {
     return "";
   };
 
-  // Carousel: render variable-value editor for a given template string (title/description).
-  // This matches rich-card/text edit behavior: static pieces are read-only, variable tokens are editable.
-  const renderCarouselEditMessage = (templateStr) => {
+  // Carousel: render variable-value editor for a given template string (title/description) belonging
+  // to `cardIndex`. This matches rich-card/text edit behavior: static pieces are read-only, variable
+  // tokens are editable. Each slot's key comes from `computeCarouselVarSlotKeys` — stable regardless
+  // of which tag fills it, and independent even from another occurrence of the same tag name.
+  const renderCarouselEditMessage = (templateStr, cardIndex, fieldType) => {
     const renderArray = [];
     const templateArr = splitTemplateVarString(templateStr);
+    const isDescField = fieldType === RCS_TAG_AREA_FIELD_DESC;
+    const slotKeysForCard = computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex];
+    const fieldKeys = (isDescField ? slotKeysForCard?.description : slotKeysForCard?.title) ?? [];
+    let varOrdinal = 0;
     if (templateArr?.length) {
       templateArr.forEach((elem, index) => {
         if (rcsVarTestRegex.test(elem)) {
           const varName = getVarNameFromToken(elem);
+          const mapKey = fieldKeys[varOrdinal];
+          varOrdinal += 1;
+          const computedValue = varName ? ((cardVarMapped?.[mapKey] ?? '').toString()) : '';
           renderArray.push(
             <div key={`${elem}_${index}`} className="var-segment-message-editor__var-slot">
               <TextArea
                 id={`${elem}_${index}`}
                 placeholder={`enter the value for ${elem}`}
                 autosize={{ minRows: 1, maxRows: 3 }}
-                onChange={(e) => textAreaValueChange(e, TITLE_TEXT)}
-                value={varName ? ((cardVarMapped?.[varName] ?? '').toString()) : ''}
+                onChange={(e) => carouselTextAreaValueChange(e, cardIndex, fieldType)}
+                value={computedValue}
                 onFocus={(e) => {
                   const id = e?.target?.id || e?.currentTarget?.id || '';
-                  setCarouselFocusedVarId(id);
+                  if (fieldType === RCS_TAG_AREA_FIELD_DESC) {
+                    setCarouselDescFocusedVarId(id);
+                  } else {
+                    setCarouselTitleFocusedVarId(id);
+                  }
                 }}
               />
             </div>
@@ -1884,7 +1970,7 @@ const onTitleAddVar = () => {
     return <CapRow className="rcs-edit-template-message-input">{renderArray}</CapRow>;
   };
 
-  const textAreaValueChange = (e, type) => {
+  const textAreaValueChange = (e) => {
     const value = e?.target?.value ?? '';
     const id = e?.target?.id || e?.currentTarget?.id || '';
     if (!id) return;
@@ -1895,13 +1981,38 @@ const onTitleAddVar = () => {
     const variableName = getVarNameFromToken(token);
 
     if (variableName) {
+      const nextVal = isInvalidValue ? "" : value;
       setCardVarMapped((prev) => ({
         ...prev,
-        [variableName]: isInvalidValue ? "" : value,
+        [variableName]: nextVal,
       }));
     }
   };
 
+  // Carousel: typing directly into a slot's value box (as opposed to picking a tag) — same global
+  // positional key as onCarouselTagSelect/renderCarouselEditMessage, so both ways of filling a
+  // slot land on the identical key.
+  const carouselTextAreaValueChange = (e, cardIndex, fieldType) => {
+    const value = e?.target?.value ?? '';
+    const id = e?.target?.id || e?.currentTarget?.id || '';
+    if (!id) return;
+    const isDescField = fieldType === RCS_TAG_AREA_FIELD_DESC;
+    const fieldTemplateStr = (isDescField
+      ? carouselData?.[cardIndex]?.description
+      : carouselData?.[cardIndex]?.title) || '';
+    const localVarOrdinal = getCarouselFieldLocalVarOrdinal(id, fieldTemplateStr);
+    if (localVarOrdinal == null) return;
+    const slotKeys = computeCarouselVarSlotKeys(carouselData, rcsVarRegex)[cardIndex];
+    const mapKey = (isDescField ? slotKeys?.description : slotKeys?.title)?.[localVarOrdinal];
+    if (!mapKey) return;
+    const isInvalidValue = value?.trim() === "";
+    const nextVal = isInvalidValue ? "" : value;
+    setCardVarMapped((prev) => ({
+      ...prev,
+      [mapKey]: nextVal,
+    }));
+  };
+
   const setTextAreaId = (e, type) => {
     // VarSegmentMessageEditor calls onFocus(id) with a plain string; DOM events
     // have an `.target.id` shape. Support both.
@@ -2749,11 +2860,8 @@ const onTitleAddVar = () => {
         // user mapped via cardVarMapped. Run this for ALL modes (create, edit, consumer) so that:
         //  - buildRcsTestMessagePayload sends real Capillary tag names to the test API, and
         //  - prepareTagExtractionPayload can extract tag metadata from the card content.
-        // Track cumulative slotOffset across cards: each card's title/description vars occupy
-        // sequential global slot indices ({{1}},{{2}} in card 0; {{3}},{{4}} in card 1, …).
-        // Without the offset, every card restarts at slotKey="1" and resolves against card 0's
-        // mappings, causing tags from card 1+ to be missing or wrong.
-        let carouselSlotOffset = 0;
+        // Each variable slot's key comes from computeCarouselVarSlotKeys, so two cards' variables
+        // never share a key even when they pick the same tag name for their own slot.
         rcsForTest = {
           ...rcsForTest,
           rcsContent: {
@@ -2761,11 +2869,8 @@ const onTitleAddVar = () => {
             cardContent: cardContent.map((card) => {
               const rawTitle = card.title || '';
               const rawDesc = card.description || '';
-              const titleVarCount = (rawTitle.match(rcsVarRegex) || []).length;
-              const descVarCount = (rawDesc.match(rcsVarRegex) || []).length;
-              const resolvedTitle = resolveTemplateWithMap(rawTitle, carouselSlotOffset);
-              const resolvedDesc = resolveTemplateWithMap(rawDesc, carouselSlotOffset + titleVarCount);
-              carouselSlotOffset += titleVarCount + descVarCount;
+              const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex, false);
+              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex, true);
               return { ...card, title: resolvedTitle, description: resolvedDesc };
             }),
           },
@@ -2955,12 +3060,16 @@ const onTitleAddVar = () => {
       ['title', 'description'].some((field) => !(card?.[field] || '').trim())
     );
     if (hasEmptyField) return true;
-    const unfilledVar = (carouselData || []).some((card) =>
+    const slotKeysByCard = computeCarouselVarSlotKeys(carouselData, rcsVarRegex);
+    const unfilledVar = (carouselData || []).some((card, cardIndex) =>
       ['title', 'description'].some((field) => {
+        const isDescField = field === 'description';
         const tokens = splitTemplateVarStringRcs(card?.[field] || '').filter((token) => rcsVarTestRegex.test(token));
-        return tokens.some((token) => {
-          const name = token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
-          const slotValue = cardVarMapped?.[name];
+        if (tokens.length === 0) return false;
+        const fieldKeys = (isDescField ? slotKeysByCard[cardIndex]?.description : slotKeysByCard[cardIndex]?.title) ?? [];
+        return tokens.some((token, localVarOrdinal) => {
+          const slotKey = fieldKeys[localVarOrdinal];
+          const slotValue = cardVarMapped?.[slotKey];
           return slotValue == null || String(slotValue).trim() === '';
         });
       })
@@ -3053,20 +3162,6 @@ const onTitleAddVar = () => {
         return true;
       }
     }
-    // Mirror WhatsApp's isEditDoneDisabled: block Done while a CTA button's dynamic URL still
-    // holds the unresolved {{1}} placeholder (no real personalization tag assigned yet).
-    const hasUnresolvedDynamicCtaUrl = isCarouselType
-      ? (carouselData || []).some((card) =>
-          (card?.suggestions || []).some((suggestion) =>
-            suggestion?.type === CTA && (suggestion?.url || '').includes('{{1}}')
-          )
-        )
-      : suggestions.some((suggestion) =>
-          suggestion?.type === CTA && (suggestion?.url || '').includes('{{1}}')
-        );
-    if (hasUnresolvedDynamicCtaUrl) {
-      return true;
-    }
     if (templateTitleError || templateDescError) {
       return true;
     }

package/v2Containers/Rcs/rcsLibraryHydrationUtils.js

@@ -396,6 +396,7 @@ export function syncCardVarMappedSemanticsFromSlots(
   templateDesc,
   rcsVarRegex,
 ) {
+  console.log('syncCardVarMappedSemanticsFromSlots', cardVarMappedInput, templateTitle, templateDesc);
   const cardVarMappedSynced =
     cardVarMappedInput != null && typeof cardVarMappedInput === 'object'
       ? { ...cardVarMappedInput }
@@ -408,11 +409,48 @@ export function syncCardVarMappedSemanticsFromSlots(
   templateVarTokens.forEach((token, slotIndexZeroBased) => {
     const semanticVarName = getVarNameFromToken(token);
     if (!semanticVarName) return;
-    const numericSlotKey = String(slotIndexZeroBased + 1);
-    const semanticValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
-    const numericSlotValueTrimmed = String(cardVarMappedSynced[numericSlotKey] ?? '').trim();
-    if (!semanticValueTrimmed && numericSlotValueTrimmed) {
-      cardVarMappedSynced[semanticVarName] = cardVarMappedSynced[numericSlotKey];
+
+    if (!RCS_NUMERIC_VAR_NAME_REGEX.test(semanticVarName)) {
+      // 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 —
+      // that numeric key is the source of truth, not this token's position.
+      const mustacheSelfReference = `{{${semanticVarName}}}`;
+      const existingNumericKeyForSemantic = Object.keys(cardVarMappedSynced).find((key) => (
+        RCS_NUMERIC_VAR_NAME_REGEX.test(key) && cardVarMappedSynced[key] === mustacheSelfReference
+      ));
+      if (existingNumericKeyForSemantic) {
+        const semanticValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
+        const numericValueTrimmed = String(cardVarMappedSynced[existingNumericKeyForSemantic] ?? '').trim();
+        if (!semanticValueTrimmed && numericValueTrimmed) {
+          cardVarMappedSynced[semanticVarName] = cardVarMappedSynced[existingNumericKeyForSemantic];
+        }
+        return;
+      }
+
+      // Legacy: template embeds the semantic token directly ({{user_name}}), but older payloads
+      // stored the resolved value under a position-based numeric key ("1", "2", …).
+      const numericSlotKey = String(slotIndexZeroBased + 1);
+      const semanticValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
+      const numericSlotValueTrimmed = String(cardVarMappedSynced[numericSlotKey] ?? '').trim();
+      if (!semanticValueTrimmed && numericSlotValueTrimmed) {
+        cardVarMappedSynced[semanticVarName] = cardVarMappedSynced[numericSlotKey];
+      }
+      return;
+    }
+
+    // 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 a position-based key here would target the wrong slot. Its value
+    // may be a mustache-wrapped tag reference (e.g. "3" -> "{{last_name}}") — mirror that onto the
+    // bare semantic key too so VarSegment editors keyed by tag name also prepopulate.
+    const slotValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
+    if (!slotValueTrimmed) return;
+    const mustacheInnerMatch = slotValueTrimmed.match(/^\{\{([^}]+)\}\}$/);
+    const innerSemanticName = mustacheInnerMatch?.[1]?.trim();
+    if (!innerSemanticName || innerSemanticName === semanticVarName) return;
+    const existingSemanticValue = String(cardVarMappedSynced[innerSemanticName] ?? '').trim();
+    if (!existingSemanticValue) {
+      cardVarMappedSynced[innerSemanticName] = cardVarMappedSynced[semanticVarName];
     }
   });
   return cardVarMappedSynced;

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

@@ -220,7 +220,8 @@ const baseProps = {
   onDescriptionChange: jest.fn(),
   onTitleAddVar: jest.fn(),
   onDescriptionAddVar: jest.fn(),
-  onTagSelect: jest.fn(),
+  onTitleTagSelect: jest.fn(),
+  onDescTagSelect: jest.fn(),
   onContextChange: jest.fn(),
   renderEditMessage: (val) => <div data-testid="render-edit-message">{val}</div>,
   onFieldChange: jest.fn(),

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

@@ -588,8 +588,8 @@ describe('buildCarouselCardsForPreview', () => {
     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 and field', () => {
+    const resolveCarouselTemplateWithMap = jest.fn((str, cardIndex, isDescField) => `R(${str}|${cardIndex}|${isDescField})`);
     const out = buildCarouselCardsForPreview(
       [
         { title: 'Hi {{a}}', description: 'Bye {{b}} {{c}}' },
@@ -597,14 +597,14 @@ describe('buildCarouselCardsForPreview', () => {
       ],
       { isFullMode: false, rcsVarRegex, resolveTemplateWithMap },
     );
-    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(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(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(1, 'Hi {{a}}', 0, false);
+    expect(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(2, 'Bye {{b}} {{c}}', 0, true);
+    expect(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(3, 'Solo {{d}}', 1, false);
+    expect(resolveCarouselTemplateWithMap).toHaveBeenNthCalledWith(4, 'none', 1, true);
+    expect(out[0].title).toBe('R(Hi {{a}}|0|false)');
+    expect(out[0].bodyText).toBe('R(Bye {{b}} {{c}}|0|true)');
+    expect(out[1].title).toBe('R(Solo {{d}}|1|false)');
+    expect(out[1].bodyText).toBe('R(none|1|true)');
   });
 
   it('defaults missing card fields, including a default {} for a missing array item', () => {
@@ -857,17 +857,17 @@ describe('buildCarouselCardContentForPayload', () => {
       expect(out[0].cardVarMapped).toBeUndefined();
     });
 
-    it('builds cardVarMapped from title and description tokens, sanitizing values', () => {
+    it('builds cardVarMapped from title and description tokens, keyed by global position, sanitizing values', () => {
       const out = buildCarouselCardContentForPayload(
         [{ title: 'Hi {{name}}', description: 'Pts {{points}}', mediaType: RCS_MEDIA_TYPES.NONE }],
         {
           isSlotMappingMode: true,
-          cardVarMapped: { name: 'Bob', points: '{{2}}' },
+          cardVarMapped: { 1: 'Bob', 2: '{{2}}' },
           selectedCarouselHeight: 'SHORT',
           rcsVarRegex,
         },
       );
-      expect(out[0].cardVarMapped).toEqual({ name: 'Bob', points: '' });
+      expect(out[0].cardVarMapped).toEqual({ 1: 'Bob', 2: '' });
     });
 
     it('defaults an unmapped token value to empty string via sanitizeCardVarMappedValue', () => {
@@ -875,7 +875,7 @@ describe('buildCarouselCardContentForPayload', () => {
         [{ title: 'Hi {{missing}}', description: 'D', mediaType: RCS_MEDIA_TYPES.NONE }],
         { isSlotMappingMode: true, cardVarMapped: {}, selectedCarouselHeight: 'SHORT', rcsVarRegex },
       );
-      expect(out[0].cardVarMapped).toEqual({ missing: '' });
+      expect(out[0].cardVarMapped).toEqual({ 1: '' });
     });
 
     it('handles a missing cardVarMapped object entirely', () => {
@@ -883,7 +883,7 @@ describe('buildCarouselCardContentForPayload', () => {
         [{ title: 'Hi {{name}}', description: 'D', mediaType: RCS_MEDIA_TYPES.NONE }],
         { isSlotMappingMode: true, cardVarMapped: undefined, selectedCarouselHeight: 'SHORT', rcsVarRegex },
       );
-      expect(out[0].cardVarMapped).toEqual({ name: '' });
+      expect(out[0].cardVarMapped).toEqual({ 1: '' });
     });
 
     it('skips a matched token that strips down to an empty variable name', () => {