@capillarytech/creatives-library 8.0.328 → 8.0.330-alpha.0

package/v2Containers/CreativesContainer/index.js

@@ -43,6 +43,7 @@ import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants'
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { RCS_STATUSES } from '../Rcs/constants';
 import { mapRcsCardContentForConsumerWithResolvedTags } from '../Rcs/utils';
+import { pickRcsCardVarMappedEntries } from '../Rcs/rcsLibraryHydrationUtils';
 import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
@@ -743,7 +744,6 @@ export class Creatives extends React.Component {
             smsFallBackContent = {},
             creativeName = "",
             channel = constants.RCS,
-            accountId = "",
             rcsCardVarMapped,
           } = templateData || {};
           const { isFullMode: isFullModeForRcsPayload } = this.props;
@@ -765,8 +765,13 @@ export class Creatives extends React.Component {
               rootMirrorCardVarMapped != null && typeof rootMirrorCardVarMapped === 'object'
                 ? rootMirrorCardVarMapped
                 : {};
-            const mergedFromRootAndNested = { ...rootRecord, ...nestedRecord };
-            return Object.keys(mergedFromRootAndNested).length > 0 ? mergedFromRootAndNested : null;
+            const mergedFromRootAndNested = {
+              ...pickRcsCardVarMappedEntries(rootRecord),
+              ...pickRcsCardVarMappedEntries(nestedRecord),
+            };
+            return Object.keys(mergedFromRootAndNested).length > 0
+              ? mergedFromRootAndNested
+              : null;
           })();
           // Campaigns (embedded): do not duplicate `cardVarMapped` as root `rcsCardVarMapped` on send —
           // slot map stays on `versions…cardContent[0].cardVarMapped` only. Library full mode keeps root mirror.
@@ -785,7 +790,6 @@ export class Creatives extends React.Component {
                   RCS: {
                     rcsContent: {
                       ...rcsContent,
-                      ...(accountId && !isFullMode && { accountId }),
                       cardContent: [
                         {
                           ...cardContent,
@@ -1237,7 +1241,7 @@ export class Creatives extends React.Component {
           };
         }
         break;
-      case constants.FACEBOOK:
+      case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
           const { type } = FacebookAd[0];
@@ -1281,8 +1285,9 @@ export class Creatives extends React.Component {
             selectedMarketingObjective: template.value.selectedMarketingObjective,
           };
         }
+      }
         break;
-      case constants.RCS:
+      case constants.RCS: {
         if (template.value) {
           const { isFullMode: isFullModeForRcsConsumerPayload } = this.props;
           const { name = "", versions = {} } = template.value || {};
@@ -1330,7 +1335,6 @@ export class Creatives extends React.Component {
             contentType = "",
             cardType = "",
             cardSettings = {},
-            accountId = "",
           } = get(versions, 'base.content.RCS.rcsContent', {});
           const rootRcsCardVarMappedFromSubmit = get(template, 'value.rcsCardVarMapped');
           const firstCardFromSubmit = Array.isArray(cardContentFromSubmit)
@@ -1350,7 +1354,7 @@ export class Creatives extends React.Component {
           const cardVarMappedFromFirstRcsCard =
             firstCardFromSubmit?.cardVarMapped != null
             && typeof firstCardFromSubmit.cardVarMapped === 'object'
-              ? firstCardFromSubmit.cardVarMapped
+              ? pickRcsCardVarMappedEntries(firstCardFromSubmit.cardVarMapped)
               : null;
           const includeRootRcsCardVarMappedOnConsumerPayload =
             cardVarMappedFromFirstRcsCard
@@ -1360,7 +1364,6 @@ export class Creatives extends React.Component {
             channel,
             creativeName: name,
             rcsContent,
-            accountId: accountId,
             ...(includeRootRcsCardVarMappedOnConsumerPayload
               ? { rcsCardVarMapped: cardVarMappedFromFirstRcsCard }
               : {}),
@@ -1382,8 +1385,9 @@ export class Creatives extends React.Component {
             };
           }
         }
+      }
         break;
-      case constants.ZALO:
+      case constants.ZALO: {
         if (template.value) {
           templateData = {
             ...template.value,
@@ -1392,6 +1396,7 @@ export class Creatives extends React.Component {
             delete templateData.type;
           }
         }
+      }
         break;
       case constants.WEBPUSH: {
         if (template.value) {

package/v2Containers/Rcs/constants.js

@@ -90,13 +90,17 @@ export const RCS_MEDIA_TYPES = {
   VIDEO: 'VIDEO',
 };
 
-export const rcsVarRegex = /\{\{\w+\}\}/g;
-export const rcsVarTestRegex = /\{\{\w+\}\}/;
+/** Match `{{…}}` placeholders including Liquid-style names (e.g. `tag.FORMAT_1`). Must align with split + `isAnyTemplateVarToken` / SMS fallback. */
+export const rcsVarRegex = /\{\{[^}]+\}\}/g;
+/** True when the whole string is a single RCS/mustache token (used when testing segment tokens). */
+export const rcsVarTestRegex = /^\{\{[^}]+\}\}$/;
 
 /** Matches all `{{N}}` numeric-index variable tokens in a template string (global). */
 export const RCS_NUMERIC_VAR_TOKEN_REGEX = /\{\{(\d+)\}\}/g;
 /** `cardVarMapped` slot keys that are numeric only (legacy ordering). */
 export const RCS_NUMERIC_VAR_NAME_REGEX = /^\d+$/;
+/** Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the editor). */
+export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^[\w.]+$/;
 /** Escape `RegExp` metacharacters when building a pattern from user/tag text. */
 export const RCS_REGEX_META_CHARS_PATTERN = /[.*+?^${}()|[\]\\]/g;
 /** Entire string is a single `{{tag}}` token (value still a placeholder). */

package/v2Containers/Rcs/index.js

@@ -44,10 +44,12 @@ import {
   normalizeLibraryLoadedTitleDesc,
   mergeRcsSmsFallBackContentFromDetails,
   mergeRcsSmsFallbackVarMapLayers,
+  extractRegisteredSenderIdsFromSmsFallbackRecord,
   pickFirstSmsFallbackTemplateString,
   syncCardVarMappedSemanticsFromSlots,
   hasMeaningfulSmsFallbackShape,
   getLibrarySmsFallbackApiBaselineFromTemplateData,
+  pickRcsCardVarMappedEntries,
 } from './rcsLibraryHydrationUtils';
 import {
   RCS,
@@ -118,6 +120,7 @@ import {
   getTemplateStatusType,
   normalizeCardVarMapped,
   coalesceCardVarMappedToTemplate,
+  getRcsSemanticVarNamesSpanningTitleAndDesc,
   resolveCardVarMappedSlotValue,
   sanitizeCardVarMappedValue,
 } from './utils';
@@ -261,7 +264,6 @@ export const Rcs = (props) => {
   const [accessToken, setAccessToken] = useState('');
   const [hostName, setHostName] = useState('');
   const [accountName, setAccountName] = useState('');
-  const [rcsAccount, setRcsAccount] = useState('');
   useEffect(() => {
     const accountObj = accountData.selectedRcsAccount || {};
     if (!isEmpty(accountObj)) {
@@ -277,14 +279,12 @@ export const Rcs = (props) => {
       setAccessToken(configs.accessToken || '');
       setHostName(accountObj.hostName || '');
       setAccountName(accountObj.name || '');
-      setRcsAccount(accountObj.id || '');
     } else {
       setAccountId('');
       setWecrmAccountId('');
       setAccessToken('');
       setHostName('');
       setAccountName('');
-      setRcsAccount('');
     }
   }, [accountData.selectedRcsAccount]);
 
@@ -389,6 +389,12 @@ export const Rcs = (props) => {
 
   const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
 
+  /** Same `{{tag}}` in both title and description must not share one semantic map entry. */
+  const rcsSpanningSemanticVarNames = useMemo(
+    () => getRcsSemanticVarNamesSpanningTitleAndDesc(templateTitle, templateDesc, rcsVarRegex),
+    [templateTitle, templateDesc],
+  );
+
   /** Global slot index (0-based, title vars then desc) for a VarSegmentMessageEditor `id` (`{{tok}}_segIdx`), or null if not found. */
   const getGlobalSlotIndexForRcsFieldId = (varSegmentCompositeId, fieldTemplateStr, fieldType) => {
     const titleVarTokenMatches = templateTitle?.match(rcsVarRegex) ?? [];
@@ -421,6 +427,7 @@ export const Rcs = (props) => {
           key,
           globalSlot,
           isEditLike,
+          rcsSpanningSemanticVarNames.has(key),
         );
         if (isNil(v) || String(v)?.trim?.() === '') return elem;
         return String(v);
@@ -487,6 +494,7 @@ export const Rcs = (props) => {
     isFullMode,
     isEditFlow,
     cardVarMapped,
+    rcsSpanningSemanticVarNames,
   ]);
 
   const testAndPreviewContent = useMemo(() => getTemplateContent(), [getTemplateContent]);
@@ -517,7 +525,7 @@ export const Rcs = (props) => {
       const nextVarMap = {};
       let varOrdinal = 0;
       arr.forEach((elem, idx) => {
-        // RCS placeholders are alphanumeric/underscore (e.g. {{user_name}}), not numeric-only
+        // Mustache tokens: {{1}}, {{user_name}}, {{tag.FORMAT_1}}, etc.
         if (rcsVarTestRegex.test(elem)) {
           const id = `${elem}_${idx}`;
           const varName = getVarNameFromToken(elem);
@@ -528,6 +536,7 @@ export const Rcs = (props) => {
             varName,
             globalSlot,
             isEditLike,
+            rcsSpanningSemanticVarNames.has(varName),
           );
           nextVarMap[id] = mappedValue;
         }
@@ -537,7 +546,7 @@ export const Rcs = (props) => {
 
     initField(templateTitle, setTitleVarMappedData, 0);
     initField(templateDesc, setDescVarMappedData, titleTokenCount);
-  }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode]);
+  }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames]);
 
   useEffect(() => {
     if (!isEditFlow && isFullMode) {
@@ -752,10 +761,7 @@ export const Rcs = (props) => {
         get(details, 'versions.base.content.RCS.rcsContent.cardSettings', '')
         || get(details, 'rcsContent.cardSettings', '');
       setMediaData(mediaData, mediaType, cardSettings);
-      if (details?.edit) {
-        const rcsAccountId = get(details, 'versions.base.content.RCS.rcsContent.accountId', '');
-        setRcsAccount(rcsAccountId);
-      }
+
       const smsFallbackContent = mergeRcsSmsFallBackContentFromDetails(details);
       const base = get(smsFallbackContent, 'versions.base', {});
       const updatedEditor = base['updated-sms-editor'] ?? base['sms-editor'];
@@ -786,12 +792,17 @@ export const Rcs = (props) => {
           typeof smsFallbackContent.unicodeValidity === 'boolean'
             ? smsFallbackContent.unicodeValidity
             : (typeof base['unicode-validity'] === 'boolean' ? base['unicode-validity'] : true);
+        const registeredSenderIdsFromApi =
+          extractRegisteredSenderIdsFromSmsFallbackRecord(smsFallbackContent);
         const nextSmsState = {
           templateName: smsFallbackContent.smsTemplateName || '',
           content: fallbackMessage,
           templateContent: fallbackMessage,
           unicodeValidity: unicodeFromApi,
           ...(hasVarMapped && { rcsSmsFallbackVarMapped: varMappedFromPayload }),
+          ...(Array.isArray(registeredSenderIdsFromApi) && registeredSenderIdsFromApi.length > 0
+            ? { registeredSenderIds: registeredSenderIdsFromApi }
+            : {}),
         };
         const hydrationKey = JSON.stringify({
           creativeKey: details._id || details.name || details.creativeName || '',
@@ -799,6 +810,10 @@ export const Rcs = (props) => {
           content: nextSmsState.content,
           unicodeValidity: nextSmsState.unicodeValidity,
           varMapped: nextSmsState.rcsSmsFallbackVarMapped || {},
+          senderIds:
+            Array.isArray(registeredSenderIdsFromApi)
+              ? registeredSenderIdsFromApi.join('\u001f')
+              : '',
         });
         if (
           isFullMode
@@ -898,58 +913,87 @@ export const Rcs = (props) => {
     return templateStr.replace(re, `{{${tagName}}}`);
   };
 
-  const onTagSelect = (data, areaId, field) => {
-    if (!areaId) return;
-    const sep = areaId.lastIndexOf('_');
-    if (sep === -1) return;
-    const slotSuffix = areaId.slice(sep + 1);
-    if (slotSuffix === '' || isNaN(Number(slotSuffix))) return;
-    const token = areaId.slice(0, sep);
-    const variableName = getVarNameFromToken(token);
-    if (!variableName) return;
-    const isNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(String(variableName));
-    const fieldStr = field === RCS_TAG_AREA_FIELD_TITLE ? templateTitle : templateDesc;
-    const fieldType = field === RCS_TAG_AREA_FIELD_TITLE ? TITLE_TEXT : MESSAGE_TEXT;
-    const globalSlotForArea = getGlobalSlotIndexForRcsFieldId(areaId, fieldStr, fieldType);
-
-    setCardVarMapped((prev) => {
-      const base = (prev?.[variableName] ?? '').toString();
-      const nextVal = `${base}{{${data}}}`;
-      const next = { ...(prev || {}) };
-      if (isNumericSlot) {
-        delete next[variableName];
-        next[data] = nextVal;
+  const onTagSelect = (selectedTagNameFromPicker, varSegmentCompositeDomId, tagAreaField) => {
+    if (!varSegmentCompositeDomId) return;
+    const underscoreIndexInCompositeId = varSegmentCompositeDomId.lastIndexOf('_');
+    if (underscoreIndexInCompositeId === -1) return;
+    const segmentIndexSuffix = varSegmentCompositeDomId.slice(underscoreIndexInCompositeId + 1);
+    if (segmentIndexSuffix === '' || isNaN(Number(segmentIndexSuffix))) return;
+    const mustacheTokenFromCompositeId = varSegmentCompositeDomId.slice(0, underscoreIndexInCompositeId);
+    const semanticOrNumericVarName = getVarNameFromToken(mustacheTokenFromCompositeId);
+    if (!semanticOrNumericVarName) return;
+    const isNumericPlaceholderSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(String(semanticOrNumericVarName));
+    const templateStringForField =
+      tagAreaField === RCS_TAG_AREA_FIELD_TITLE ? templateTitle : templateDesc;
+    const titleOrMessageFieldType =
+      tagAreaField === RCS_TAG_AREA_FIELD_TITLE ? TITLE_TEXT : MESSAGE_TEXT;
+    const globalVarSlotIndexZeroBased = getGlobalSlotIndexForRcsFieldId(
+      varSegmentCompositeDomId,
+      templateStringForField,
+      titleOrMessageFieldType,
+    );
+    const cardVarMappedNumericSlotKey =
+      globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined
+        ? String(globalVarSlotIndexZeroBased + 1)
+        : null;
+
+    setCardVarMapped((previousCardVarMapped) => {
+      const updatedCardVarMapped = { ...(previousCardVarMapped || {}) };
+      if (isNumericPlaceholderSlot) {
+        const existingValueBeforeAppend = (
+          previousCardVarMapped?.[semanticOrNumericVarName] ?? ''
+        ).toString();
+        const mappedValueAfterAppendingTag = `${existingValueBeforeAppend}{{${selectedTagNameFromPicker}}}`;
+        delete updatedCardVarMapped[semanticOrNumericVarName];
+        updatedCardVarMapped[selectedTagNameFromPicker] = mappedValueAfterAppendingTag;
       } else {
-        // Use the global slot index key only — writing by semantic name (variableName)
-        // would contaminate any other field that shares the same var name (e.g. {{gt}}
-        // in both title and description), causing the label value to bleed across fields.
-        if (globalSlotForArea !== null && globalSlotForArea !== undefined) {
-          next[String(globalSlotForArea + 1)] = nextVal;
-          // Same reasoning as handleRcsVarChange: delete the semantic key so
-          // resolveCardVarMappedSlotValue uses only the numeric slot and the
-          // value cannot bleed across fields that share the same var name.
-          delete next[variableName];
+        // 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] ?? '');
+        const mappedValueAfterAppendingTag = `${existingValueBeforeAppend}{{${selectedTagNameFromPicker}}}`;
+        delete updatedCardVarMapped[semanticOrNumericVarName];
+        if (cardVarMappedNumericSlotKey) {
+          updatedCardVarMapped[cardVarMappedNumericSlotKey] = mappedValueAfterAppendingTag;
         } else {
-          next[variableName] = nextVal;
+          updatedCardVarMapped[semanticOrNumericVarName] = mappedValueAfterAppendingTag;
         }
       }
-      return next;
+      return updatedCardVarMapped;
     });
 
-    if (isNumericSlot && (field === RCS_TAG_AREA_FIELD_TITLE || field === RCS_TAG_AREA_FIELD_DESC)) {
-      if (field === RCS_TAG_AREA_FIELD_TITLE) {
-        setTemplateTitle((prev) => {
-          const nextStr = replaceNumericPlaceholderWithTagInTemplate(prev || '', variableName, data);
-          if (nextStr === prev) return prev;
-          setTemplateTitleError(variableErrorHandling(nextStr));
-          return nextStr;
+    if (
+      isNumericPlaceholderSlot
+      && (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC)
+    ) {
+      if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE) {
+        setTemplateTitle((previousTitle) => {
+          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((k) => k + 1);
+          return titleAfterReplacingNumericPlaceholder;
         });
       } else {
-        setTemplateDesc((prev) => {
-          const nextStr = replaceNumericPlaceholderWithTagInTemplate(prev || '', variableName, data);
-          if (nextStr === prev) return prev;
-          setTemplateDescError(variableErrorHandling(nextStr));
-          return nextStr;
+        setTemplateDesc((previousDescription) => {
+          const descriptionAfterReplacingNumericPlaceholder = replaceNumericPlaceholderWithTagInTemplate(
+            previousDescription || '',
+            semanticOrNumericVarName,
+            selectedTagNameFromPicker,
+          );
+          if (descriptionAfterReplacingNumericPlaceholder === previousDescription) {
+            return previousDescription;
+          }
+          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingNumericPlaceholder));
+          setRcsVarSegmentEditorRemountKey((k) => k + 1);
+          return descriptionAfterReplacingNumericPlaceholder;
         });
       }
     }
@@ -1107,7 +1151,8 @@ export const Rcs = (props) => {
       if(!isFullMode){
         return false;
       }
-      if (!/^\w+$/.test(paramName)) {
+      // Allow Liquid-style param names: letters, digits, underscore, dots (e.g. dynamic_expiry_date_after_3_days.FORMAT_1)
+      if (!/^[\w.]+$/.test(paramName)) {
         return formatMessage(messages.unknownCharactersError);
       }
     }
@@ -1220,6 +1265,7 @@ const onTitleAddVar = () => {
           varName,
           globalSlot,
           isEditLike,
+          rcsSpanningSemanticVarNames.has(varName),
         );
       }
     });
@@ -1228,42 +1274,37 @@ const onTitleAddVar = () => {
 
   const titleVarSegmentValueMapById = useMemo(
     () => getRcsValueMap(templateTitle, TITLE_TEXT),
-    [templateTitle, cardVarMapped, isEditFlow, isFullMode],
+    [templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
   );
   const descriptionVarSegmentValueMapById = useMemo(
     () => getRcsValueMap(templateDesc, MESSAGE_TEXT),
-    [templateDesc, templateTitle, cardVarMapped, isEditFlow, isFullMode],
+    [templateDesc, templateTitle, cardVarMapped, isEditFlow, isFullMode, rcsSpanningSemanticVarNames],
   );
 
-  const handleRcsVarChange = (id, value, type) => {
-    const sep = id.lastIndexOf('_');
-    if (sep === -1) return;
-    const token = id.slice(0, sep);
-    const variableName = getVarNameFromToken(token);
+  const handleRcsVarChange = (varSegmentCompositeDomId, value, type) => {
+    const underscoreIndexInCompositeId = varSegmentCompositeDomId.lastIndexOf('_');
+    if (underscoreIndexInCompositeId === -1) return;
+    const mustacheTokenFromCompositeId = varSegmentCompositeDomId.slice(0, underscoreIndexInCompositeId);
+    const variableName = getVarNameFromToken(mustacheTokenFromCompositeId);
     if (variableName === undefined || variableName === null || variableName === '') return;
     const isInvalidValue = value?.trim() === '';
     const coercedSlotValue = isInvalidValue ? '' : value;
-    const fieldStr = type === TITLE_TEXT ? templateTitle : templateDesc;
-    const globalSlot = getGlobalSlotIndexForRcsFieldId(id, fieldStr, type);
-    setCardVarMapped((previousVarMap) => {
-      const nextVarMap = { ...previousVarMap };
-      if (globalSlot !== null && globalSlot !== undefined) {
-        // Write by global slot index only — title and description can share the
-        // same var name (e.g. {{gt}}), and writing by semantic name would cause
-        // the description slot to resolve the title's value and vice-versa.
-        const numericKey = String(globalSlot + 1);
-        nextVarMap[numericKey] = coercedSlotValue;
-        // Remove any stale semantic key so resolveCardVarMappedSlotValue never
-        // falls back to it. Guard: when variableName is already the numeric slot
-        // key (e.g. {{1}} at slot 0 → both equal "1"), skip the delete or it
-        // would erase the value we just wrote.
-        if (variableName !== numericKey) {
-          delete nextVarMap[variableName];
-        }
-      } else {
-        nextVarMap[variableName] = coercedSlotValue;
+    const templateStringForField = type === TITLE_TEXT ? templateTitle : templateDesc;
+    const globalVarSlotIndexZeroBased = getGlobalSlotIndexForRcsFieldId(
+      varSegmentCompositeDomId,
+      templateStringForField,
+      type,
+    );
+    setCardVarMapped((previousCardVarMapped) => {
+      const updatedCardVarMapped = { ...previousCardVarMapped };
+      // Remove stale semantic key: keeping it causes every other slot sharing the same
+      // variable name (e.g. {{adv}} in both title and description) to read the same value
+      // via the semantic-key fallback in resolveCardVarMappedSlotValue.
+      delete updatedCardVarMapped[variableName];
+      if (globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined) {
+        updatedCardVarMapped[String(globalVarSlotIndexZeroBased + 1)] = coercedSlotValue;
       }
-      return nextVarMap;
+      return updatedCardVarMapped;
     });
   };
 
@@ -1381,6 +1422,7 @@ const onTitleAddVar = () => {
         </CapRow>
         <CapRow className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
+            {/* Edit/library: segmented inputs (split on {{…}}). Full-mode create: single TextArea below — manual entry there never hits segment split. TagList replaces {{n}} in template string here. */}
             {(isEditFlow || !isFullMode)
               ? (
                 <VarSegmentMessageEditor
@@ -1971,7 +2013,6 @@ const onTitleAddVar = () => {
           content: {
             RCS: {
               rcsContent: {
-                ...(rcsAccount && !isFullMode && { accountId: rcsAccount }),
                 cardType: STANDALONE,
                 cardSettings: {
                   cardOrientation: isMediaTypeImage ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.orientation || VERTICAL : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.orientation || VERTICAL,
@@ -1997,23 +2038,25 @@ const onTitleAddVar = () => {
                         ...(templateTitle?.match(rcsVarRegex) ?? []),
                         ...(templateDesc?.match(rcsVarRegex) ?? []),
                       ];
+                      const cardVarMappedForRcsCardOnly = pickRcsCardVarMappedEntries(
+                        cardVarMapped,
+                      );
+                      // Persist numeric slot keys only ("1","2",…) — avoids duplicating the same value under
+                      // semantic names (e.g. both "1" and dynamic_expiry_date_after_3_days.FORMAT_1). Hydration
+                      // and coalesceCardVarMappedToTemplate still resolve from numeric keys + template tokens.
                       const persistedSlotVarMap = {};
-                      const seenSemanticVarNames = new Set();
                       templateVarTokens.forEach((token, slotIndexZeroBased) => {
                         const varName = getVarNameFromToken(token);
                         if (!varName) return;
                         const resolvedRawValue = resolveCardVarMappedSlotValue(
-                          cardVarMapped,
+                          cardVarMappedForRcsCardOnly,
                           varName,
                           slotIndexZeroBased,
                           isSlotMappingMode,
+                          rcsSpanningSemanticVarNames.has(varName),
                         );
                         const sanitizedSlotValue = sanitizeCardVarMappedValue(resolvedRawValue);
                         persistedSlotVarMap[String(slotIndexZeroBased + 1)] = sanitizedSlotValue;
-                        if (!seenSemanticVarNames.has(varName)) {
-                          seenSemanticVarNames.add(varName);
-                          persistedSlotVarMap[varName] = sanitizedSlotValue;
-                        }
                       });
                       return { cardVarMapped: persistedSlotVarMap };
                     })()),
@@ -2030,6 +2073,53 @@ const onTitleAddVar = () => {
                   || smsFallbackForPayload.message
                   || smsFallbackForPayload.smsContent
                   || '';
+                /**
+                 * Campaigns `getTraiSenderIds` / Iris read `smsFallBackContent.templateConfigs.registeredSenderIds`.
+                 * Library `smsFallbackForPayload` omits ids — use merged state (`smsFallbackMerged`) like test preview.
+                 */
+                const m = smsFallbackMerged || {};
+                const tcSibling = m.templateConfigs && typeof m.templateConfigs === 'object'
+                  ? m.templateConfigs
+                  : {};
+                const smsFallbackTemplateId =
+                  (m.smsTemplateId != null && String(m.smsTemplateId).trim() !== ''
+                    ? String(m.smsTemplateId)
+                    : '')
+                  || (tcSibling.templateId != null && String(tcSibling.templateId).trim() !== ''
+                    ? String(tcSibling.templateId)
+                    : '');
+                const smsFallbackTemplateStr =
+                  pickFirstSmsFallbackTemplateString(m)
+                  || (typeof m.templateContent === 'string' ? m.templateContent : '')
+                  || (typeof tcSibling.template === 'string' ? tcSibling.template : '')
+                  || '';
+                const smsFallbackTemplateName =
+                  m.templateName
+                  || m.smsTemplateName
+                  || tcSibling.templateName
+                  || tcSibling.name
+                  || '';
+                const registeredSenderIdsForPayload = Array.isArray(m.registeredSenderIds)
+                  ? m.registeredSenderIds
+                  : Array.isArray(tcSibling.registeredSenderIds)
+                    ? tcSibling.registeredSenderIds
+                    : Array.isArray(tcSibling.header)
+                      ? tcSibling.header
+                      : null;
+                const hasRegisteredSenderIds = Array.isArray(registeredSenderIdsForPayload);
+                const smsFallbackTemplateConfigs =
+                  smsFallbackTemplateId || hasRegisteredSenderIds
+                    ? {
+                        ...(smsFallbackTemplateId && { templateId: smsFallbackTemplateId }),
+                        ...(smsFallbackTemplateStr && { template: smsFallbackTemplateStr }),
+                        ...(smsFallbackTemplateName && {
+                          templateName: smsFallbackTemplateName,
+                        }),
+                        ...(hasRegisteredSenderIds && {
+                          registeredSenderIds: registeredSenderIdsForPayload,
+                        }),
+                      }
+                    : null;
                 return {
                   smsFallBackContent: {
                     smsTemplateName: smsFallbackForPayload.templateName || '',
@@ -2043,6 +2133,9 @@ const onTitleAddVar = () => {
                       && Object.keys(smsFallbackForPayload.rcsSmsFallbackVarMapped).length > 0 && {
                       [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: smsFallbackForPayload.rcsSmsFallbackVarMapped,
                     }),
+                    ...(smsFallbackTemplateConfigs && {
+                      templateConfigs: smsFallbackTemplateConfigs,
+                    }),
                   },
                 };
               })()),
@@ -2065,13 +2158,36 @@ const onTitleAddVar = () => {
       (wecrmAccountId != null && String(wecrmAccountId).trim() !== '')
         ? String(wecrmAccountId)
         : accountId;
-    const rcsForTest = {
+    const isSlotMappingModeForPreview = isEditFlow || !isFullMode;
+    let rcsForTest = {
       ...rcs,
       rcsContent: {
         ...rcs.rcsContent,
         ...(accountIdForCreateMessageMeta ? { accountId: accountIdForCreateMessageMeta } : {}),
       },
     };
+    /** Approval payload keeps numeric-only `cardVarMapped`; preview APIs still need semantic keys. */
+    if (isSlotMappingModeForPreview) {
+      const cardContent = rcsForTest.rcsContent?.cardContent;
+      if (Array.isArray(cardContent) && cardContent[0]) {
+        const fullCardVarMapped = coalesceCardVarMappedToTemplate(
+          pickRcsCardVarMappedEntries(cardVarMapped),
+          templateTitle,
+          templateDesc,
+          rcsVarRegex,
+        );
+        rcsForTest = {
+          ...rcsForTest,
+          rcsContent: {
+            ...rcsForTest.rcsContent,
+            cardContent: [
+              { ...cardContent[0], cardVarMapped: fullCardVarMapped },
+              ...cardContent.slice(1),
+            ],
+          },
+        };
+      }
+    }
     const out = {
       versions: {
         base: {
@@ -2242,7 +2358,13 @@ const onTitleAddVar = () => {
       return true;
     }
     return orderedVarNames.some((name, globalIdx) => {
-      const v = resolveCardVarMappedSlotValue(cardVarMapped, name, globalIdx, true);
+      const v = resolveCardVarMappedSlotValue(
+        cardVarMapped,
+        name,
+        globalIdx,
+        true,
+        rcsSpanningSemanticVarNames.has(name),
+      );
       const s = v == null ? '' : String(v);
       return s.trim() === '';
     });
@@ -2561,13 +2683,19 @@ const onTitleAddVar = () => {
         content={testAndPreviewContent}
         currentChannel={RCS}
         orgUnitId={orgUnitId}
+        rcsTestPreviewOptions={{ isLibraryMode: !isFullMode }}
         smsFallbackContent={
           smsFallbackData && (smsFallbackData.templateContent || smsFallbackData.content)
             ? {
               templateContent:
                 smsFallbackData.templateContent || smsFallbackData.content || '',
               templateName: smsFallbackData.templateName || '',
-              [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: smsFallbackData?.rcsSmsFallbackVarMapped ?? {},
+              [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: !isFullMode
+                ? mergeRcsSmsFallbackVarMapLayers(
+                  getLibrarySmsFallbackApiBaselineFromTemplateData(templateData),
+                  smsFallbackData,
+                )
+                : mergeRcsSmsFallbackVarMapLayers({}, smsFallbackData),
             }
             : null
         }