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

package/v2Containers/Rcs/index.js

@@ -71,6 +71,7 @@ import {
   mergeSmsFallbackForLibrary,
   buildSmsFallBackContentForPayload,
   pickRcsCardVarMappedEntries,
+  extractRegisteredSenderIdsFromSmsFallbackRecord,
 } from './rcsLibraryHydrationUtils';
 import {
   RCS,
@@ -152,7 +153,6 @@ import { isTagIncluded } from '../../utils/commonUtils';
 import injectReducer from '../../utils/injectReducer';
 import v2RcsReducer from './reducer';
 import {
-  buildRcsNumericMustachePlaceholderRegex,
   getTemplateStatusType,
   normalizeCardVarMapped,
   coalesceCardVarMappedToTemplate,
@@ -175,6 +175,7 @@ import {
   getCarouselDescriptionCharacterCount,
   buildCarouselCardsForPreview as buildCarouselCardsForPreviewUtil,
   buildCarouselCardContentForPayload,
+  getCarouselVarMapKey,
 } from './carouselUtils';
 import CarouselDimensionSelection from './components/CarouselDimensionSelection';
 import CarouselCard from './components/CarouselCard';
@@ -775,7 +776,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);
         if (!resolved) {
           updateCarouselErrors(idx, { [field]: false });
           return;
@@ -867,8 +868,27 @@ export const Rcs = (props) => {
     }).join('');
   };
 
+  /**
+   * 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) => {
+    if (!str) return '';
+    const arr = splitTemplateVarStringRcs(str);
+    return arr.map((elem) => {
+      if (rcsVarTestRegex.test(elem)) {
+        const varName = getVarNameFromToken(elem);
+        const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)];
+        if (isNil(slotValue) || String(slotValue)?.trim?.() === '') return elem;
+        return String(slotValue);
+      }
+      return elem;
+    }).join('');
+  };
+
   const buildCarouselCardsForPreview = (cards = []) =>
-    buildCarouselCardsForPreviewUtil(cards, { isFullMode, rcsVarRegex, resolveTemplateWithMap });
+    buildCarouselCardsForPreviewUtil(cards, { isFullMode, resolveCarouselTemplateWithMap });
 
   /**
    * Content for TestAndPreviewSlidebox — apply cardVarMapped whenever the slot editor is shown
@@ -1196,28 +1216,56 @@ 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 cards = Array.isArray(rcsContent?.cardContent)
-          ? rcsContent.cardContent
-          : get(details, 'rcsContent.cardContent', []);
+        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 firstHeight = cards?.[0]?.media?.height || MEDIUM;
         setSelectedCarouselHeight(firstHeight);
         setSelectedCarousel(`${firstHeight}_${cardWidth}`);
         setActiveCarouselIndex('0');
 
         if (cards.length > 1) {
-          setCardVarMapped((previousVarMap) => cards.reduce((merged, c) => {
-            const cardMap = c?.cardVarMapped;
-            return cardMap != null && typeof cardMap === 'object' ? { ...merged, ...cardMap } : merged;
+
+          setCardVarMapped((previousVarMap) => cards.reduce((merged, c = {}, idx) => {
+            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 };
           }, { ...(previousVarMap || {}) }));
         }
 
@@ -1426,10 +1474,29 @@ export const Rcs = (props) => {
     globalActions.fetchSchemaForEntity(query);
   };
 
-  const replaceNumericPlaceholderWithTagInTemplate = (templateStr, numericVarName, tagName) => {
-    if (!templateStr || !numericVarName || !tagName) return templateStr;
-    const placeholderRegex = buildRcsNumericMustachePlaceholderRegex(numericVarName);
-    return templateStr.replace(placeholderRegex, `{{${tagName}}}`);
+  /**
+   * 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 onTagSelect = (selectedTagNameFromPicker, varSegmentCompositeDomId, tagAreaField) => {
@@ -1459,16 +1526,15 @@ 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}}}`;
-        delete updatedCardVarMapped[semanticOrNumericVarName];
-        updatedCardVarMapped[selectedTagNameFromPicker] = mappedValueAfterAppendingTag;
+        updatedCardVarMapped[semanticOrNumericVarName] = 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] ?? '');
@@ -1497,36 +1563,40 @@ export const Rcs = (props) => {
       return updatedCardVarMapped;
     });
 
-    if (
-      isNumericPlaceholderSlot
-      && (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC)
-    ) {
+    // 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 (tagAreaField === RCS_TAG_AREA_FIELD_TITLE) {
         setTemplateTitle((previousTitle) => {
-          const titleAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
-            previousTitle || '',
-            semanticOrNumericVarName,
-            selectedTagNameFromPicker,
-          );
-          if (titleAfterReplacingNumericPlaceholder === previousTitle) return previousTitle;
-          setTemplateTitleError(variableErrorHandling(titleAfterReplacingNumericPlaceholder));
+          const titleAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousTitle || '', localSlotOrdinal, selectedTagNameFromPicker);
+          if (titleAfterReplacingTag === previousTitle) return previousTitle;
+          setTemplateTitleError(computeTemplateTitleError(titleAfterReplacingTag));
           // 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 titleAfterReplacingNumericPlaceholder;
+          return titleAfterReplacingTag;
         });
       } else {
         setTemplateDesc((previousDescription) => {
-          const descriptionAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
-            previousDescription || '',
-            semanticOrNumericVarName,
-            selectedTagNameFromPicker,
-          );
-          if (descriptionAfterReplacingNumericPlaceholder === previousDescription) {
+          const descriptionAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousDescription || '', localSlotOrdinal, selectedTagNameFromPicker);
+          if (descriptionAfterReplacingTag === previousDescription) {
             return previousDescription;
           }
-          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingNumericPlaceholder));
+          setTemplateDescError(computeTemplateDescError(descriptionAfterReplacingTag));
           setRcsVarSegmentEditorRemountKey((remountKey) => remountKey + 1);
-          return descriptionAfterReplacingNumericPlaceholder;
+          return descriptionAfterReplacingTag;
         });
       }
     }
@@ -1543,12 +1613,14 @@ export const Rcs = (props) => {
     const token = carouselFocusedVarId.slice(0, sep);
     const variableName = getVarNameFromToken(token);
     if (!variableName) return;
+    const activeIdx = parseInt(activeCarouselIndex, 10);
+    const mapKey = getCarouselVarMapKey(isNaN(activeIdx) ? 0 : activeIdx, variableName);
     setCardVarMapped((prev) => {
-      const base = (prev?.[variableName] ?? '').toString();
+      const base = (prev?.[mapKey] ?? '').toString();
       const nextVal = `${base}{{${data}}}`;
       return {
         ...(prev || {}),
-        [variableName]: nextVal,
+        [mapKey]: nextVal,
       };
     });
   };
@@ -1660,31 +1732,13 @@ 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(errorMessage);
+    setTemplateTitleError(computeTemplateTitleError(value));
   };
 
   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(error);
+    setTemplateDescError(computeTemplateDescError(value));
   };
 
 
@@ -1767,6 +1821,29 @@ 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);
 };
@@ -1851,23 +1928,30 @@ 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 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);
     if (templateArr?.length) {
       templateArr.forEach((elem, index) => {
         if (rcsVarTestRegex.test(elem)) {
           const varName = getVarNameFromToken(elem);
+          const mapKey = getCarouselVarMapKey(cardIndex, varName);
+          const computedValue = varName ? ((cardVarMapped?.[mapKey] ?? '').toString()) : '';
           renderArray.push(
-            <div key={`${elem}_${index}`} className="var-segment-message-editor__var-slot">
+            <div
+              key={`${elem}_${index}_${rcsVarSegmentEditorRemountKey}`}
+              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) => textAreaValueChange(e, cardIndex)}
+                value={computedValue}
                 onFocus={(e) => {
                   const id = e?.target?.id || e?.currentTarget?.id || '';
                   setCarouselFocusedVarId(id);
@@ -1891,7 +1975,7 @@ const onTitleAddVar = () => {
     return <CapRow className="rcs-edit-template-message-input">{renderArray}</CapRow>;
   };
 
-  const textAreaValueChange = (e, type) => {
+  const textAreaValueChange = (e, cardIndex) => {
     const value = e?.target?.value ?? '';
     const id = e?.target?.id || e?.currentTarget?.id || '';
     if (!id) return;
@@ -1902,9 +1986,10 @@ const onTitleAddVar = () => {
     const variableName = getVarNameFromToken(token);
 
     if (variableName) {
+      const mapKey = getCarouselVarMapKey(cardIndex, variableName);
       setCardVarMapped((prev) => ({
         ...prev,
-        [variableName]: isInvalidValue ? "" : value,
+        [mapKey]: isInvalidValue ? "" : value,
       }));
     }
   };
@@ -2572,8 +2657,6 @@ 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}
@@ -2757,46 +2840,55 @@ const onTitleAddVar = () => {
     const cardContent = rcsForTest.rcsContent?.cardContent;
     if (Array.isArray(cardContent) && cardContent[0]) {
       if (isCarouselType) {
-        // 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:
+        // 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:
         //  - 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 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: {
             ...rcsForTest.rcsContent,
-            cardContent: cardContent.map((card) => {
+            cardContent: cardContent.map((card, cardIndex) => {
               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);
+              const resolvedDesc = resolveCarouselTemplateWithMap(rawDesc, cardIndex);
               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.
+        // 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.
         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], cardVarMapped: fullCardVarMapped },
+              {
+                ...cardContent[0],
+                title: resolvedStandaloneTitle,
+                description: resolvedStandaloneDesc,
+                cardVarMapped: fullCardVarMapped,
+              },
               ...cardContent.slice(1),
             ],
           },
@@ -2812,16 +2904,23 @@ const onTitleAddVar = () => {
         },
       },
     };
-    // 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') {
+
+    // 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) {
       out.templateConfigs = {
-        ...smsFallbackTcFromPayload,
-        traiDltEnabled: isTraiDLTEnable(isFullMode, smsRegister),
+        ...(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,
       };
     }
     return out;
@@ -2967,12 +3066,12 @@ const onTitleAddVar = () => {
       ['title', 'description'].some((field) => !(card?.[field] || '').trim())
     );
     if (hasEmptyField) return true;
-    const unfilledVar = (carouselData || []).some((card) =>
+    const unfilledVar = (carouselData || []).some((card, cardIndex) =>
       ['title', 'description'].some((field) => {
         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];
+          const slotValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, name)];
           return slotValue == null || String(slotValue).trim() === '';
         });
       })

package/v2Containers/Rcs/rcsLibraryHydrationUtils.js

@@ -217,6 +217,24 @@ export function buildSmsFallBackContentForPayload({
         ? tcSibling.header
         : null;
   const hasRegisteredSenderIds = Array.isArray(registeredSenderIdsForPayload);
+  // `rcsSmsFallbackVarMapped` (root of smsFallBackContent) is a custom field that
+  // normalizeRcsMessageContentForApi strips before the real API call (see comment below) — it
+  // only survives for same-session local re-hydration. templateConfigs.templateVariableMapping is
+  // the field the backend actually persists (same shape TRAI/DLT registration uses), so mirror the
+  // var map there too — otherwise slot values saved through campaigns/library mode are lost on reopen.
+  const varMapForTemplateConfigs =
+    smsFallbackForPayload?.[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]
+    || mergedFallback[RCS_SMS_FALLBACK_VAR_MAPPED_PROP];
+  const templateVariableMappingForPayload =
+    varMapForTemplateConfigs && typeof varMapForTemplateConfigs === 'object'
+      ? Object.entries(varMapForTemplateConfigs).reduce((acc, [slotKey, slotValue], index) => {
+          if (slotValue == null || slotValue === '') return acc;
+          acc[slotKey] = { data: slotValue, count: index + 1 };
+          return acc;
+        }, {})
+      : null;
+  const hasTemplateVariableMapping =
+    templateVariableMappingForPayload && Object.keys(templateVariableMappingForPayload).length > 0;
   const smsFallbackTemplateConfigs =
     smsFallbackTemplateId || hasRegisteredSenderIds
       ? {
@@ -228,6 +246,9 @@ export function buildSmsFallBackContentForPayload({
           ...(hasRegisteredSenderIds && {
             registeredSenderIds: registeredSenderIdsForPayload,
           }),
+          ...(hasTemplateVariableMapping && {
+            templateVariableMapping: templateVariableMappingForPayload,
+          }),
         }
       : null;
   const isDltCampaign = !isFullMode && isTraiDLTEnable(isFullMode, smsRegister);
@@ -295,17 +316,37 @@ export function resolveSmsFallbackHydrationFromDetails(details) {
   const fromNested = Array.isArray(updatedEditor)
     ? updatedEditor.join('')
     : (typeof updatedEditor === 'string' ? updatedEditor : (smsEditor || ''));
-  const fallbackMessage = smsFallbackContent.smsContent
+  const templateConfigsRecord =
+    smsFallbackContent.templateConfigs && typeof smsFallbackContent.templateConfigs === 'object'
+      ? smsFallbackContent.templateConfigs
+      : {};
+  // For DLT/TRAI fallbacks, smsContent/smsTemplateContent/message are the send-ready text —
+  // {#var#} slots are already baked into a literal value there (required to match the
+  // TRAI-approved template). Only templateConfigs.template keeps {#var#} intact, so prefer it
+  // here — otherwise reopening the editor can never re-render that slot as its own box again.
+  const rawDltTemplate =
+    typeof templateConfigsRecord.template === 'string' && templateConfigsRecord.template.trim() !== ''
+      ? templateConfigsRecord.template
+      : '';
+  const fallbackMessage = rawDltTemplate
+    || smsFallbackContent.smsContent
     || smsFallbackContent.smsTemplateContent
     || smsFallbackContent.message
     || fromNested
     || '';
-  const varMappedFromPayload = smsFallbackContent[RCS_SMS_FALLBACK_VAR_MAPPED_PROP] || {};
+  const varMapFromTemplateVariableMapping =
+    templateConfigsRecord.templateVariableMapping && typeof templateConfigsRecord.templateVariableMapping === 'object'
+      ? Object.entries(templateConfigsRecord.templateVariableMapping).reduce((acc, [slotKey, slotEntry]) => {
+          const slotValue = slotEntry && typeof slotEntry === 'object' ? slotEntry.data : slotEntry;
+          if (slotValue != null) acc[slotKey] = slotValue;
+          return acc;
+        }, {})
+      : null;
+  const varMappedFromPayload = {
+    ...(varMapFromTemplateVariableMapping || {}),
+    ...(smsFallbackContent[RCS_SMS_FALLBACK_VAR_MAPPED_PROP] || {}),
+  };
   const hasVarMapped = Object.keys(varMappedFromPayload).length > 0;
-  const templateConfigsRecord =
-    smsFallbackContent.templateConfigs && typeof smsFallbackContent.templateConfigs === 'object'
-      ? smsFallbackContent.templateConfigs
-      : {};
   const smsFallbackTemplateName =
     smsFallbackContent.templateName
     || smsFallbackContent.smsTemplateName