@capillarytech/creatives-library 9.0.35 → 9.0.36

package/v2Containers/Rcs/index.js

@@ -71,7 +71,6 @@ import {
   mergeSmsFallbackForLibrary,
   buildSmsFallBackContentForPayload,
   pickRcsCardVarMappedEntries,
-  extractRegisteredSenderIdsFromSmsFallbackRecord,
 } from './rcsLibraryHydrationUtils';
 import {
   RCS,
@@ -153,6 +152,7 @@ import { isTagIncluded } from '../../utils/commonUtils';
 import injectReducer from '../../utils/injectReducer';
 import v2RcsReducer from './reducer';
 import {
+  buildRcsNumericMustachePlaceholderRegex,
   getTemplateStatusType,
   normalizeCardVarMapped,
   coalesceCardVarMappedToTemplate,
@@ -175,7 +175,7 @@ import {
   getCarouselDescriptionCharacterCount,
   buildCarouselCardsForPreview as buildCarouselCardsForPreviewUtil,
   buildCarouselCardContentForPayload,
-  getCarouselVarMapKey,
+  computeCarouselVarSlotKeys,
 } from './carouselUtils';
 import CarouselDimensionSelection from './components/CarouselDimensionSelection';
 import CarouselCard from './components/CarouselCard';
@@ -271,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({});
@@ -597,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 }])}
@@ -656,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()}
           />
@@ -776,7 +783,7 @@ export const Rcs = (props) => {
       ['title', 'description'].forEach((field) => {
         const templateStr = card?.[field] || '';
         if (!templateStr) return;
-        const resolved = resolveCarouselTemplateWithMap(templateStr, idx);
+        const resolved = resolveCarouselTemplateWithMap(templateStr, idx, field === 'description');
         if (!resolved) {
           updateCarouselErrors(idx, { [field]: false });
           return;
@@ -869,17 +876,22 @@ export const Rcs = (props) => {
   };
 
   /**
-   * 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.
+   * 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) => {
+  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 varName = getVarNameFromToken(elem);
-        const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)];
+        const slotKey = fieldKeys[varOrdinal];
+        varOrdinal += 1;
+        const slotValue = cardVarMapped?.[slotKey];
         if (isNil(slotValue) || String(slotValue)?.trim?.() === '') return elem;
         return String(slotValue);
       }
@@ -888,7 +900,7 @@ export const Rcs = (props) => {
   };
 
   const buildCarouselCardsForPreview = (cards = []) =>
-    buildCarouselCardsForPreviewUtil(cards, { isFullMode, resolveCarouselTemplateWithMap });
+    buildCarouselCardsForPreviewUtil(cards, { isFullMode, rcsVarRegex, resolveTemplateWithMap });
 
   /**
    * Content for TestAndPreviewSlidebox — apply cardVarMapped whenever the slot editor is shown
@@ -1086,9 +1098,9 @@ export const Rcs = (props) => {
       if (mediaType) {
       setTemplateMediaType(mediaType);
     }
-    const tempOrientation = cardSettings?.cardOrientation;
-    const tempAlignment = cardSettings?.mediaAlignment;
-    const tempHeight = mediaData?.height;
+    const tempOrientation = cardSettings.cardOrientation;
+    const tempAlignment = cardSettings.mediaAlignment;
+    const tempHeight = mediaData.height;
     
     // Map to actual RCS_IMAGE_DIMENSIONS keys
     let tempDimension;
@@ -1216,56 +1228,34 @@ export const Rcs = (props) => {
 
         setTemplateType(contentType.carousel);
         setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
-
+        // Library/campaign payloads can store cardSettings/cardContent at the flat top-level
+        // `rcsContent` instead of nested under versions.base.content.RCS (same fallback already
+        // used for the rich_card media lookup below, line ~1793). Without it, cardWidth/height
+        // silently fall back to SMALL/MEDIUM, mismatching the dimensions the thumbnail was
+        // actually uploaded at and causing object-fit:cover to crop the preview image.
         const cardSettings = rcsContent?.cardSettings
           || get(details, 'rcsContent.cardSettings', {});
         const cardWidth = cardSettings?.cardWidth || SMALL;
         setSelectedCarouselWidth(cardWidth);
 
-        const nestedCards = Array.isArray(rcsContent?.cardContent) ? rcsContent.cardContent : [];
-        const topCardsRaw = get(details, 'rcsContent.cardContent', []);
-        const topCards = Array.isArray(topCardsRaw) ? topCardsRaw : [];
-        const cardCount = Math.max(nestedCards.length, topCards.length);
-        const mergedCards = Array.from({ length: cardCount }, (_, idx) => ({
-          ...(topCards[idx] || {}),
-          ...(nestedCards[idx] || {}),
-        }));
-        const cards = cardCount > 0 ? mergedCards : topCards;
+        const cards = Array.isArray(rcsContent?.cardContent)
+          ? rcsContent.cardContent
+          : get(details, 'rcsContent.cardContent', []);
         const firstHeight = cards?.[0]?.media?.height || MEDIUM;
         setSelectedCarouselHeight(firstHeight);
         setSelectedCarousel(`${firstHeight}_${cardWidth}`);
         setActiveCarouselIndex('0');
 
         if (cards.length > 1) {
-
-          setCardVarMapped((previousVarMap) => cards.reduce((merged, c = {}, idx) => {
+          // 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;
-            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 };
+            return { ...merged, ...rawCardMap };
           }, { ...(previousVarMap || {}) }));
         }
 
@@ -1474,29 +1464,10 @@ export const Rcs = (props) => {
     globalActions.fetchSchemaForEntity(query);
   };
 
-  /**
-   * Replaces only the var token at `slotOrdinalZeroBased` (the field-local ordinal among
-   * `{{...}}` tokens, left to right) with `{{tagName}}`. Unlike a name-based regex replace,
-   * this targets a single slot even when the same tag name appears in other slots of the field.
-   */
-  const replaceTagAtFieldSlotOrdinal = (templateStr, slotOrdinalZeroBased, tagName) => {
-    if (!templateStr || slotOrdinalZeroBased === null || slotOrdinalZeroBased === undefined || !tagName) {
-      return templateStr;
-    }
-    let varOrdinal = 0;
-    let replaced = false;
-    const updatedSegments = splitTemplateVarStringRcs(templateStr).map((segment) => {
-      if (rcsVarTestRegex.test(segment)) {
-        const currentOrdinal = varOrdinal;
-        varOrdinal += 1;
-        if (currentOrdinal === slotOrdinalZeroBased) {
-          replaced = true;
-          return `{{${tagName}}}`;
-        }
-      }
-      return segment;
-    });
-    return replaced ? updatedSegments.join('') : templateStr;
+  const replaceNumericPlaceholderWithTagInTemplate = (templateStr, numericVarName, tagName) => {
+    if (!templateStr || !numericVarName || !tagName) return templateStr;
+    const placeholderRegex = buildRcsNumericMustachePlaceholderRegex(numericVarName);
+    return templateStr.replace(placeholderRegex, `{{${tagName}}}`);
   };
 
   const onTagSelect = (selectedTagNameFromPicker, varSegmentCompositeDomId, tagAreaField) => {
@@ -1526,15 +1497,16 @@ export const Rcs = (props) => {
     setCardVarMapped((previousCardVarMapped) => {
       const updatedCardVarMapped = { ...(previousCardVarMapped || {}) };
       if (isNumericPlaceholderSlot) {
-        // Numeric slot ({{1}}, {{2}}, …) is the persisted API contract — keep the numeric key
-        // itself (do not fork off a semantic-name key); the template text stays {{N}} below.
         const existingValueBeforeAppend = (
           previousCardVarMapped?.[semanticOrNumericVarName] ?? ''
         ).toString();
         const mappedValueAfterAppendingTag = `${existingValueBeforeAppend}{{${selectedTagNameFromPicker}}}`;
-        updatedCardVarMapped[semanticOrNumericVarName] = mappedValueAfterAppendingTag;
+        delete updatedCardVarMapped[semanticOrNumericVarName];
+        updatedCardVarMapped[selectedTagNameFromPicker] = mappedValueAfterAppendingTag;
       } else {
-
+        // Same semantic token (e.g. {{adv}}) in title and body must not share one map key for
+        // "existing value" — that appends the new tag onto the other field. Match handleRcsVarChange:
+        // read/write the global numeric slot only and drop the shared semantic key.
         const existingValueBeforeAppend = cardVarMappedNumericSlotKey
           ? String(previousCardVarMapped?.[cardVarMappedNumericSlotKey] ?? '')
           : String(previousCardVarMapped?.[semanticOrNumericVarName] ?? '');
@@ -1563,40 +1535,36 @@ export const Rcs = (props) => {
       return updatedCardVarMapped;
     });
 
-    // Numeric slot ({{1}}, {{2}}, …): the token is already the persisted API contract — leave
-    // templateTitle/templateDesc untouched. The chip label re-resolves via titleVarSegmentValueMapById
-    // / descriptionVarSegmentValueMapById, both keyed off cardVarMapped (updated above).
-    if (isNumericPlaceholderSlot) return;
-
-    if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC) {
-      // Legacy slot that already holds a named tag (e.g. {{first_name}}) is replaced by
-      // field-local position, since a name-based replace would also overwrite other slots
-      // sharing that same tag name.
-      const fieldOffsetForSlot = tagAreaField === RCS_TAG_AREA_FIELD_TITLE
-        ? 0
-        : (templateTitle?.match(rcsVarRegex) ?? []).length;
-      const localSlotOrdinal = (globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined)
-        ? globalVarSlotIndexZeroBased - fieldOffsetForSlot
-        : null;
-
+    if (
+      isNumericPlaceholderSlot
+      && (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC)
+    ) {
       if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE) {
         setTemplateTitle((previousTitle) => {
-          const titleAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousTitle || '', localSlotOrdinal, selectedTagNameFromPicker);
-          if (titleAfterReplacingTag === previousTitle) return previousTitle;
-          setTemplateTitleError(computeTemplateTitleError(titleAfterReplacingTag));
+          const titleAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
+            previousTitle || '',
+            semanticOrNumericVarName,
+            selectedTagNameFromPicker,
+          );
+          if (titleAfterReplacingNumericPlaceholder === previousTitle) return previousTitle;
+          setTemplateTitleError(variableErrorHandling(titleAfterReplacingNumericPlaceholder));
           // Remount segment editor: tag insert replaces {{n}} with e.g. {{tag.FORMAT_1}} — slot ids change; avoids stale UI vs manual typing in full-mode TextArea
           setRcsVarSegmentEditorRemountKey((remountKey) => remountKey + 1);
-          return titleAfterReplacingTag;
+          return titleAfterReplacingNumericPlaceholder;
         });
       } else {
         setTemplateDesc((previousDescription) => {
-          const descriptionAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousDescription || '', localSlotOrdinal, selectedTagNameFromPicker);
-          if (descriptionAfterReplacingTag === previousDescription) {
+          const descriptionAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
+            previousDescription || '',
+            semanticOrNumericVarName,
+            selectedTagNameFromPicker,
+          );
+          if (descriptionAfterReplacingNumericPlaceholder === previousDescription) {
             return previousDescription;
           }
-          setTemplateDescError(computeTemplateDescError(descriptionAfterReplacingTag));
+          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingNumericPlaceholder));
           setRcsVarSegmentEditorRemountKey((remountKey) => remountKey + 1);
-          return descriptionAfterReplacingTag;
+          return descriptionAfterReplacingNumericPlaceholder;
         });
       }
     }
@@ -1606,25 +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;
+  /** 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 mapKey = getCarouselVarMapKey(isNaN(activeIdx) ? 0 : activeIdx, variableName);
-    setCardVarMapped((prev) => {
-      const base = (prev?.[mapKey] ?? '').toString();
-      const nextVal = `${base}{{${data}}}`;
-      return {
-        ...(prev || {}),
-        [mapKey]: nextVal,
-      };
-    });
+    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);
@@ -1710,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)}
             />
@@ -1732,13 +1726,31 @@ export const Rcs = (props) => {
     return renderArray;
   };
   const onTemplateTitleChange = ({ target: { value } }) => {
+    let errorMessage = false;
+    if (templateType === contentType.rich_card && !value.trim()) {
+      errorMessage = formatMessage(messages.emptyTemplateTitleErrorMessage);
+    } else if (value.length > TEMPLATE_TITLE_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.templateHeaderLengthError);
+    } else {
+      errorMessage = variableErrorHandling(value);
+    }
     setTemplateTitle(value);
-    setTemplateTitleError(computeTemplateTitleError(value));
+    setTemplateTitleError(errorMessage);
   };
 
   const onTemplateDescChange = ({ target: { value } }) => {
+    let errorMessage = false;
+    if(templateType === contentType.text_message && value?.length > (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : RCS_TEXT_MESSAGE_MAX_LENGTH)){
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+     } else if(templateType === contentType.rich_card && value?.length > RCS_RICH_CARD_MAX_LENGTH){
+      errorMessage = formatMessage(messages.templateMessageLengthError);
+     } else {
+      errorMessage = false;
+    }
+    const varError = variableErrorHandling(value);
+    const error = errorMessage || varError;
     setTemplateDesc(value);
-    setTemplateDescError(computeTemplateDescError(value));
+    setTemplateDescError(error);
   };
 
 
@@ -1821,29 +1833,6 @@ export const Rcs = (props) => {
     return false;
   };
 
-  // Shared with onTemplateTitleChange so tag-picker inserts enforce the same length limit as manual typing.
-  const computeTemplateTitleError = (value) => {
-    if (templateType === contentType.rich_card && !value.trim()) {
-      return formatMessage(messages.emptyTemplateTitleErrorMessage);
-    }
-    if (value.length > TEMPLATE_TITLE_MAX_LENGTH) {
-      return formatMessage(messages.templateHeaderLengthError);
-    }
-    return variableErrorHandling(value);
-  };
-
-  // Shared with onTemplateDescChange so tag-picker inserts enforce the same length limit as manual typing.
-  const computeTemplateDescError = (value) => {
-    let errorMessage = false;
-    if (templateType === contentType.text_message && value?.length > (isHostInfoBip ? RCS_TEXT_MESSAGE_MAX_LENGTH_INFOBIP : RCS_TEXT_MESSAGE_MAX_LENGTH)) {
-      errorMessage = formatMessage(messages.templateMessageLengthError);
-    } else if (templateType === contentType.rich_card && value?.length > RCS_RICH_CARD_MAX_LENGTH) {
-      errorMessage = formatMessage(messages.templateMessageLengthError);
-    }
-    const varError = variableErrorHandling(value);
-    return errorMessage || varError;
-  };
-
   const onMessageAddVar = () => {
   onAddVar(templateDesc);
 };
@@ -1930,31 +1919,37 @@ 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 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) => {
+  // 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 = getCarouselVarMapKey(cardIndex, varName);
+          const mapKey = fieldKeys[varOrdinal];
+          varOrdinal += 1;
           const computedValue = varName ? ((cardVarMapped?.[mapKey] ?? '').toString()) : '';
           renderArray.push(
-            <div
-              key={`${elem}_${index}_${rcsVarSegmentEditorRemountKey}`}
-              className="var-segment-message-editor__var-slot"
-            >
+            <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, cardIndex)}
+                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>
@@ -1975,7 +1970,7 @@ const onTitleAddVar = () => {
     return <CapRow className="rcs-edit-template-message-input">{renderArray}</CapRow>;
   };
 
-  const textAreaValueChange = (e, cardIndex) => {
+  const textAreaValueChange = (e) => {
     const value = e?.target?.value ?? '';
     const id = e?.target?.id || e?.currentTarget?.id || '';
     if (!id) return;
@@ -1986,14 +1981,38 @@ const onTitleAddVar = () => {
     const variableName = getVarNameFromToken(token);
 
     if (variableName) {
-      const mapKey = getCarouselVarMapKey(cardIndex, variableName);
+      const nextVal = isInvalidValue ? "" : value;
       setCardVarMapped((prev) => ({
         ...prev,
-        [mapKey]: 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.
@@ -2031,11 +2050,6 @@ const onTitleAddVar = () => {
                         isFullMode={isFullMode}
                         maxButtons={MAX_BUTTONS}
                         host={hostName}
-                        location={location}
-                        tags={getRcsTags()}
-                        injectedTags={injectedTags || {}}
-                        selectedOfferDetails={selectedOfferDetails}
-                        onContextChange={handleOnTagsContextChange}
           />
       </>
     );
@@ -2657,6 +2671,8 @@ const onTitleAddVar = () => {
       const carouselVidDims =
         RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS[carouselDimKey]
         || RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS.MEDIUM_MEDIUM;
+      // Debug log for embedded/library mode preview payload (carousel)
+      // eslint-disable-next-line no-console
       return (
         <UnifiedPreview
           channel={RCS}
@@ -2840,55 +2856,40 @@ const onTitleAddVar = () => {
     const cardContent = rcsForTest.rcsContent?.cardContent;
     if (Array.isArray(cardContent) && cardContent[0]) {
       if (isCarouselType) {
-        // Carousel: resolve {{N}}/named slot tokens to the actual tag expressions / static values
-        // the user mapped via cardVarMapped. Run this for ALL modes (create, edit, consumer) so that:
+        // Carousel: resolve {{N}} slot tokens to the actual tag expressions / static values 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 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).
+        // 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: {
             ...rcsForTest.rcsContent,
-            cardContent: cardContent.map((card, cardIndex) => {
+            cardContent: cardContent.map((card) => {
               const rawTitle = card.title || '';
               const rawDesc = card.description || '';
-              const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex);
-              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex);
+              const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex, false);
+              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex, true);
               return { ...card, title: resolvedTitle, description: resolvedDesc };
             }),
           },
         };
       } else if (isSlotMappingModeForPreview) {
         // Standalone card: coalesce cardVarMapped with the template's slot names so the preview
-        // API receives a correctly-keyed var map for non-carousel templates. Also resolve the
-        // {{N}} slot tokens in title/description themselves (mirrors the carousel branch above) —
-        // otherwise prepareTagExtractionPayload/getRcsPrimaryTagExtractionText send the raw "{{1}}"
-        // token as template text, which the extract-tags API doesn't recognize, so the
-        // synthetic-tag fallback names the row "1" instead of the real tag.
+        // API receives a correctly-keyed var map for non-carousel templates.
         const fullCardVarMapped = coalesceCardVarMappedToTemplate(
           pickRcsCardVarMappedEntries(cardVarMapped),
           templateTitle,
           templateDesc,
           rcsVarRegex,
         );
-        const rawStandaloneTitle = cardContent[0].title || '';
-        const rawStandaloneDesc = cardContent[0].description || '';
-        const standaloneTitleVarCount = (rawStandaloneTitle.match(rcsVarRegex) || []).length;
-        const resolvedStandaloneTitle = resolveTemplateWithMap(rawStandaloneTitle, 0);
-        const resolvedStandaloneDesc = resolveTemplateWithMap(rawStandaloneDesc, standaloneTitleVarCount);
         rcsForTest = {
           ...rcsForTest,
           rcsContent: {
             ...rcsForTest.rcsContent,
             cardContent: [
-              {
-                ...cardContent[0],
-                title: resolvedStandaloneTitle,
-                description: resolvedStandaloneDesc,
-                cardVarMapped: fullCardVarMapped,
-              },
+              { ...cardContent[0], cardVarMapped: fullCardVarMapped },
               ...cardContent.slice(1),
             ],
           },
@@ -2904,23 +2905,16 @@ const onTitleAddVar = () => {
         },
       },
     };
-
-    // buildSmsFallBackContentForPayload nests registeredSenderIds under smsFallBackContent.templateConfigs
-    // only for full mode, or for campaign mode when isDltCampaign (smsRegister === 'DLT') is true — but it
-    // always sets the flat smsFallBackContent.registeredSenderIds whenever the fallback template has them.
-    // Extract via both so Test & Preview's DLT sender-id filter still sees real ids (and actually filters)
-    // even when isDltCampaign was false at payload-build time.
-    const smsFallbackRecordForTest = rcs?.rcsContent?.smsFallBackContent;
-    const smsFallbackTcFromPayload = smsFallbackRecordForTest?.templateConfigs;
-    const registeredSenderIdsForTest = extractRegisteredSenderIdsFromSmsFallbackRecord(smsFallbackRecordForTest);
-    const hasRegisteredSenderIdsForTest =
-      Array.isArray(registeredSenderIdsForTest) && registeredSenderIdsForTest.length > 0;
-    if ((smsFallbackTcFromPayload && typeof smsFallbackTcFromPayload === 'object') || hasRegisteredSenderIdsForTest) {
+    // Use the smsFallbackTemplateConfigs already built by createPayload() / buildSmsFallBackContentForPayload —
+    // it merges the API baseline (templateId, registeredSenderIds, templateName, etc.) with local
+    // smsFallbackData state. Reading raw smsFallbackData here would miss the API-sourced smsTemplateId
+    // in campaign mode. This also keeps templateName (and all other fields) in sync with the approval
+    // payload automatically.
+    const smsFallbackTcFromPayload = rcs?.rcsContent?.smsFallBackContent?.templateConfigs;
+    if (smsFallbackTcFromPayload && typeof smsFallbackTcFromPayload === 'object') {
       out.templateConfigs = {
-        ...(smsFallbackTcFromPayload && typeof smsFallbackTcFromPayload === 'object' ? smsFallbackTcFromPayload : {}),
-        ...(hasRegisteredSenderIdsForTest && { registeredSenderIds: registeredSenderIdsForTest }),
-        // Real registered sender IDs mean filtering should happen regardless of the smsRegister heuristic.
-        traiDltEnabled: isTraiDLTEnable(isFullMode, smsRegister) || hasRegisteredSenderIdsForTest,
+        ...smsFallbackTcFromPayload,
+        traiDltEnabled: isTraiDLTEnable(isFullMode, smsRegister),
       };
     }
     return out;
@@ -3066,12 +3060,16 @@ 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));
-        return tokens.some((token) => {
-          const name = token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
-          const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, 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() === '';
         });
       })
@@ -3079,19 +3077,6 @@ const onTitleAddVar = () => {
     return unfilledVar;
   };
 
-  // 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}}')
-        );
-
   const isDisableDone = () => {
     if(isEditFlow){
       return false;
@@ -3133,9 +3118,6 @@ const onTitleAddVar = () => {
         return true;
       }
     }
-    if (hasUnresolvedDynamicCtaUrl()) {
-      return true;
-    }
     if (templateDescError || templateTitleError) {
       return true;
     }
@@ -3180,9 +3162,6 @@ const onTitleAddVar = () => {
         return true;
       }
     }
-    if (hasUnresolvedDynamicCtaUrl()) {
-      return true;
-    }
     if (templateTitleError || templateDescError) {
       return true;
     }