@capillarytech/creatives-library 9.0.36 → 9.0.37-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,
@@ -900,7 +900,7 @@ export const Rcs = (props) => {
   };
 
   const buildCarouselCardsForPreview = (cards = []) =>
-    buildCarouselCardsForPreviewUtil(cards, { isFullMode, rcsVarRegex, resolveTemplateWithMap });
+    buildCarouselCardsForPreviewUtil(cards, { isFullMode, resolveCarouselTemplateWithMap });
 
   /**
    * Content for TestAndPreviewSlidebox — apply cardVarMapped whenever the slot editor is shown
@@ -1098,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;
@@ -1228,19 +1228,21 @@ 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}`);
@@ -1464,10 +1466,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) => {
@@ -1497,16 +1518,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] ?? '');
@@ -1535,36 +1555,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;
         });
       }
     }
@@ -1726,31 +1750,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));
   };
 
 
@@ -1833,6 +1839,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);
 };
@@ -1936,7 +1965,10 @@ const onTitleAddVar = () => {
           varOrdinal += 1;
           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}`}
@@ -2050,6 +2082,11 @@ const onTitleAddVar = () => {
                         isFullMode={isFullMode}
                         maxButtons={MAX_BUTTONS}
                         host={hostName}
+                        location={location}
+                        tags={getRcsTags()}
+                        injectedTags={injectedTags || {}}
+                        selectedOfferDetails={selectedOfferDetails}
+                        onContextChange={handleOnTagsContextChange}
           />
       </>
     );
@@ -2671,8 +2708,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}
@@ -2856,8 +2891,8 @@ 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.
         // Each variable slot's key comes from computeCarouselVarSlotKeys, so two cards' variables
@@ -2866,7 +2901,7 @@ const onTitleAddVar = () => {
           ...rcsForTest,
           rcsContent: {
             ...rcsForTest.rcsContent,
-            cardContent: cardContent.map((card) => {
+            cardContent: cardContent.map((card, cardIndex) => {
               const rawTitle = card.title || '';
               const rawDesc = card.description || '';
               const resolvedTitle = resolveCarouselTemplateWithMap(rawTitle, cardIndex, false);
@@ -2877,19 +2912,33 @@ const onTitleAddVar = () => {
         };
       } 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),
             ],
           },
@@ -2905,16 +2954,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;
@@ -3077,6 +3133,19 @@ 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;
@@ -3118,6 +3187,9 @@ const onTitleAddVar = () => {
         return true;
       }
     }
+    if (hasUnresolvedDynamicCtaUrl()) {
+      return true;
+    }
     if (templateDescError || templateTitleError) {
       return true;
     }
@@ -3162,6 +3234,9 @@ const onTitleAddVar = () => {
         return true;
       }
     }
+    if (hasUnresolvedDynamicCtaUrl()) {
+      return true;
+    }
     if (templateTitleError || templateDescError) {
       return true;
     }

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,18 +316,48 @@ 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 smsFallbackTemplateName =
+    smsFallbackContent.templateName
+    || smsFallbackContent.smsTemplateName
+    || templateConfigsRecord.templateName
+    || templateConfigsRecord.name
+    || '';
   const hasFallbackPayload =
     smsFallbackContent
     && Object.keys(smsFallbackContent).length > 0
     && (
-      !!smsFallbackContent.smsTemplateName
+      !!smsFallbackTemplateName
       || !!fallbackMessage
       || hasVarMapped
     );
@@ -325,7 +376,7 @@ export function resolveSmsFallbackHydrationFromDetails(details) {
       : (typeof base['unicode-validity'] === 'boolean' ? base['unicode-validity'] : true);
   const registeredSenderIds = extractRegisteredSenderIdsFromSmsFallbackRecord(smsFallbackContent);
   const nextSmsState = {
-    templateName: smsFallbackContent.smsTemplateName || '',
+    templateName: smsFallbackTemplateName,
     content: fallbackMessage,
     templateContent: fallbackMessage,
     unicodeValidity: unicodeFromApi,