@capillarytech/creatives-library 9.0.38 → 9.0.39

package/v2Containers/Rcs/components/CarouselCard.js

@@ -15,7 +15,6 @@ import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import TagList from '../../TagList';
 import globalMessages from '../../Cap/messages';
 import messages from '../messages';
-import { RCS_TAG_AREA_FIELD_TITLE, RCS_TAG_AREA_FIELD_DESC } from '../constants';
 import CarouselCardMedia from './CarouselCardMedia';
 import CarouselCardButtons from './CarouselCardButtons';
 import CarouselCharacterCount from './CarouselCharacterCount';
@@ -51,8 +50,7 @@ const CarouselCard = ({
   onDescriptionChange,
   onTitleAddVar,
   onDescriptionAddVar,
-  onTitleTagSelect,
-  onDescTagSelect,
+  onTagSelect,
   onContextChange,
   renderEditMessage,
   onFieldChange,
@@ -139,7 +137,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onTitleTagSelect}
+              onTagSelect={onTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -161,7 +159,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.title || '', cardIndex, RCS_TAG_AREA_FIELD_TITLE)
+          renderEditMessage(card.title || '', cardIndex)
         ) : (
           <CapInput
             value={card.title || ''}
@@ -191,7 +189,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onDescTagSelect}
+              onTagSelect={onTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -213,7 +211,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.description || '', cardIndex, RCS_TAG_AREA_FIELD_DESC)
+          renderEditMessage(card.description || '', cardIndex)
         ) : (
           <TextArea
             autosize={{ minRows: 3, maxRows: 5 }}
@@ -288,8 +286,7 @@ CarouselCard.propTypes = {
   onDescriptionChange: PropTypes.func.isRequired,
   onTitleAddVar: PropTypes.func.isRequired,
   onDescriptionAddVar: PropTypes.func.isRequired,
-  onTitleTagSelect: PropTypes.func.isRequired,
-  onDescTagSelect: PropTypes.func.isRequired,
+  onTagSelect: PropTypes.func.isRequired,
   onContextChange: PropTypes.func,
   renderEditMessage: PropTypes.func.isRequired,
   onFieldChange: PropTypes.func.isRequired,

package/v2Containers/Rcs/constants.js

@@ -78,13 +78,8 @@ 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). 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.()]+$/;
+/** 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.()]+$/;
 /** 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,7 +175,7 @@ import {
   getCarouselDescriptionCharacterCount,
   buildCarouselCardsForPreview as buildCarouselCardsForPreviewUtil,
   buildCarouselCardContentForPayload,
-  computeCarouselVarSlotKeys,
+  getCarouselVarMapKey,
 } from './carouselUtils';
 import CarouselDimensionSelection from './components/CarouselDimensionSelection';
 import CarouselCard from './components/CarouselCard';
@@ -271,12 +271,7 @@ export const Rcs = (props) => {
   const [carouselErrors, setCarouselErrors] = useState([]); // [{ title: string|false, description: string|false }]
   const [activeCarouselIndex, setActiveCarouselIndex] = useState('0');
   const [carouselResetNonce, setCarouselResetNonce] = useState(0);
-  // 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 [carouselFocusedVarId, setCarouselFocusedVarId] = useState('');
    const [imageError, setImageError] = useState(null);
   const [templateTitleError, setTemplateTitleError] = useState(false);
   const [cardVarMapped, setCardVarMapped] = useState({});
@@ -602,8 +597,7 @@ export const Rcs = (props) => {
           }}
           onTitleAddVar={() => appendVarToCarouselField(index, 'title')}
           onDescriptionAddVar={() => appendVarToCarouselField(index, 'description')}
-          onTitleTagSelect={onCarouselTitleTagSelect}
-          onDescTagSelect={onCarouselDescTagSelect}
+          onTagSelect={onCarouselTagSelect}
           onContextChange={handleOnTagsContextChange}
           renderEditMessage={renderCarouselEditMessage}
           onFieldChange={(fieldName, value) => handleCarouselValueChange(index, [{ fieldName, value }])}
@@ -662,8 +656,7 @@ export const Rcs = (props) => {
             onChange={(key) => {
               setActiveCarouselIndex(`${key}`);
               // reset focused var when switching cards (as per requirement)
-              setCarouselTitleFocusedVarId('');
-              setCarouselDescFocusedVarId('');
+              setCarouselFocusedVarId('');
             }}
             panes={getCarouselTabPanes()}
           />
@@ -783,7 +776,7 @@ export const Rcs = (props) => {
       ['title', 'description'].forEach((field) => {
         const templateStr = card?.[field] || '';
         if (!templateStr) return;
-        const resolved = resolveCarouselTemplateWithMap(templateStr, idx, field === 'description');
+        const resolved = resolveCarouselTemplateWithMap(templateStr, idx);
         if (!resolved) {
           updateCarouselErrors(idx, { [field]: false });
           return;
@@ -876,22 +869,17 @@ export const Rcs = (props) => {
   };
 
   /**
-   * 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.
+   * Carousel resolve: each card's variables live under their own `getCarouselVarMapKey(cardIndex, name)`
+   * key in `cardVarMapped` (see that helper's doc) — no global slot-offset arithmetic needed since
+   * cards can no longer collide with each other's entries.
    */
-  const resolveCarouselTemplateWithMap = (str = '', cardIndex, isDescField = false) => {
+  const resolveCarouselTemplateWithMap = (str = '', cardIndex) => {
     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];
+        const varName = getVarNameFromToken(elem);
+        const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)];
         if (isNil(slotValue) || String(slotValue)?.trim?.() === '') return elem;
         return String(slotValue);
       }
@@ -1249,15 +1237,35 @@ export const Rcs = (props) => {
         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 = {}) => {
+
+          setCardVarMapped((previousVarMap) => cards.reduce((merged, c = {}, idx) => {
             const rawCardMap = c?.cardVarMapped;
             if (rawCardMap == null || typeof rawCardMap !== 'object') return merged;
-            return { ...merged, ...rawCardMap };
+            if (idx === 0) return { ...merged, ...rawCardMap };
+            const cardTitle = c?.title != null ? String(c.title) : '';
+            const cardDesc = c?.description != null ? String(c.description) : '';
+            const cardTokens = [
+              ...(cardTitle ? cardTitle.match(rcsVarRegex) ?? [] : []),
+              ...(cardDesc ? cardDesc.match(rcsVarRegex) ?? [] : []),
+            ];
+            const cardOrderedTagNames = cardTokens.map((token) => getVarNameFromToken(token)).filter(Boolean);
+            const cardMapBeforeCoalesce = isFullMode
+              ? normalizeCardVarMapped(rawCardMap, cardOrderedTagNames)
+              : { ...rawCardMap };
+            const cardMapAfterCoalesce = coalesceCardVarMappedToTemplate(
+              cardMapBeforeCoalesce,
+              cardTitle,
+              cardDesc,
+              rcsVarRegex,
+            );
+            const cardMapAfterSlotSync = !isFullMode
+              ? syncCardVarMappedSemanticsFromSlots(cardMapAfterCoalesce, cardTitle, cardDesc, rcsVarRegex)
+              : cardMapAfterCoalesce;
+            const namespacedCardMap = {};
+            Object.entries(cardMapAfterSlotSync).forEach(([key, value]) => {
+              namespacedCardMap[getCarouselVarMapKey(idx, key)] = value;
+            });
+            return { ...merged, ...namespacedCardMap };
           }, { ...(previousVarMap || {}) }));
         }
 
@@ -1598,51 +1606,25 @@ export const Rcs = (props) => {
 
   const onDescTagSelect = (tagName) => onTagSelect(tagName, descTextAreaId, RCS_TAG_AREA_FIELD_DESC);
 
-  /** 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 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;
     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 mapKey = getCarouselVarMapKey(isNaN(activeIdx) ? 0 : activeIdx, variableName);
+    setCardVarMapped((prev) => {
+      const base = (prev?.[mapKey] ?? '').toString();
+      const nextVal = `${base}{{${data}}}`;
+      return {
+        ...(prev || {}),
+        [mapKey]: nextVal,
+      };
+    });
   };
 
-  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);
@@ -1728,7 +1710,7 @@ export const Rcs = (props) => {
               key={`${elem}_${index}`}
               placeholder={`enter the value for ${elem}`}
               autosize={{ minRows: 1, maxRows: 3 }}
-              onChange={e => textAreaValueChange(e)}
+              onChange={e => textAreaValueChange(e, type)}
               value={textAreaValue(index, type)}
               onFocus={(e) => setTextAreaId(e, type)}
             />
@@ -1948,21 +1930,16 @@ const onTitleAddVar = () => {
 
   // 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) => {
+  // tokens are editable. Each card's values live under their own `getCarouselVarMapKey(cardIndex, name)`
+  // key in `cardVarMapped` so two cards using the same variable/tag name never collide.
+  const renderCarouselEditMessage = (templateStr, cardIndex) => {
     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 mapKey = getCarouselVarMapKey(cardIndex, varName);
           const computedValue = varName ? ((cardVarMapped?.[mapKey] ?? '').toString()) : '';
           renderArray.push(
             <div
@@ -1973,15 +1950,11 @@ const onTitleAddVar = () => {
                 id={`${elem}_${index}`}
                 placeholder={`enter the value for ${elem}`}
                 autosize={{ minRows: 1, maxRows: 3 }}
-                onChange={(e) => carouselTextAreaValueChange(e, cardIndex, fieldType)}
+                onChange={(e) => textAreaValueChange(e, cardIndex)}
                 value={computedValue}
                 onFocus={(e) => {
                   const id = e?.target?.id || e?.currentTarget?.id || '';
-                  if (fieldType === RCS_TAG_AREA_FIELD_DESC) {
-                    setCarouselDescFocusedVarId(id);
-                  } else {
-                    setCarouselTitleFocusedVarId(id);
-                  }
+                  setCarouselFocusedVarId(id);
                 }}
               />
             </div>
@@ -2002,7 +1975,7 @@ const onTitleAddVar = () => {
     return <CapRow className="rcs-edit-template-message-input">{renderArray}</CapRow>;
   };
 
-  const textAreaValueChange = (e) => {
+  const textAreaValueChange = (e, cardIndex) => {
     const value = e?.target?.value ?? '';
     const id = e?.target?.id || e?.currentTarget?.id || '';
     if (!id) return;
@@ -2013,38 +1986,14 @@ const onTitleAddVar = () => {
     const variableName = getVarNameFromToken(token);
 
     if (variableName) {
-      const nextVal = isInvalidValue ? "" : value;
+      const mapKey = getCarouselVarMapKey(cardIndex, variableName);
       setCardVarMapped((prev) => ({
         ...prev,
-        [variableName]: nextVal,
+        [mapKey]: isInvalidValue ? "" : value,
       }));
     }
   };
 
-  // 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.
@@ -2895,8 +2844,9 @@ const onTitleAddVar = () => {
         // the 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.
-        // 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.
+        // Each card's variables live under their own getCarouselVarMapKey(cardIndex, name) slot, so
+        // no cross-card slot-offset bookkeeping is needed (or safe — two cards' variables never share
+        // a key, so there is nothing to accidentally collide).
         rcsForTest = {
           ...rcsForTest,
           rcsContent: {
@@ -2904,8 +2854,8 @@ const onTitleAddVar = () => {
             cardContent: cardContent.map((card, cardIndex) => {
               const rawTitle = card.title || '';
               const rawDesc = card.description || '';
-              const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex, false);
-              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex, true);
+              const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex);
+              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex);
               return { ...card, title: resolvedTitle, description: resolvedDesc };
             }),
           },
@@ -3116,16 +3066,12 @@ const onTitleAddVar = () => {
       ['title', 'description'].some((field) => !(card?.[field] || '').trim())
     );
     if (hasEmptyField) return true;
-    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));
-        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 tokens.some((token) => {
+          const name = token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+          const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, name)];
           return slotValue == null || String(slotValue).trim() === '';
         });
       })

package/v2Containers/Rcs/rcsLibraryHydrationUtils.js

@@ -459,48 +459,11 @@ export function syncCardVarMappedSemanticsFromSlots(
   templateVarTokens.forEach((token, slotIndexZeroBased) => {
     const semanticVarName = getVarNameFromToken(token);
     if (!semanticVarName) return;
-
-    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];
+    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 cardVarMappedSynced;

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

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