@capillarytech/creatives-library 8.0.238 → 8.0.239

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.238",
+  "version": "8.0.239",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/Rcs/index.js

@@ -183,8 +183,12 @@ export const Rcs = (props) => {
   const [templateHeaderError, setTemplateHeaderError] = useState('');
   const [templateMessageError, setTemplateMessageError] = useState('');
   const validVarRegex = /\{\{(\d+)\}\}/g;
-  const [rcsTextVariables, setRcsTextVariables] = useState({});
-  const [focusedVarId, setFocusedVarId] = useState("");
+  const [updatedTitleData, setUpdatedTitleData] = useState([]);
+  const [updatedDescData, setUpdatedDescData] = useState([]);
+  const [titleVarMappedData, setTitleVarMappedData] = useState({});
+  const [descVarMappedData, setDescVarMappedData] = useState({});
+  const [titleTextAreaId, setTitleTextAreaId] = useState();
+  const [descTextAreaId, setDescTextAreaId] = useState();
   const [assetList, setAssetList] = useState({});
   const [assetListImage, setAssetListImage] = useState('');
   const [rcsImageSrc, updateRcsImageSrc] = useState('');
@@ -193,7 +197,6 @@ export const Rcs = (props) => {
   const [selectedDimension, setSelectedDimension] = useState(RCS_IMAGE_DIMENSIONS.MEDIUM_HEIGHT.type);
   const [imageError, setImageError] = useState(null);
   const [templateTitleError, setTemplateTitleError] = useState(false);
-  const [focusedVarType, setFocusedVarType] = useState(MESSAGE_TEXT);
   const [cardVarMapped, setCardVarMapped] = useState({});
 
   const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
@@ -269,83 +272,27 @@ export const Rcs = (props) => {
     });
   };
 
-  // Check if all variables are resolved (no empty variables left)
-  const areAllVariablesResolved = () => {
-    // Get all variables from template content
-    const titleVars = splitTemplateVarString(templateTitle).filter(elem => rcsVarTestRegex.test(elem));
-    const descVars = splitTemplateVarString(templateDesc).filter(elem => rcsVarTestRegex.test(elem));
-    const allVars = [...titleVars, ...descVars];
-    
-    // If no variables, consider resolved
-    if (allVars.length === 0) return true;
-    
-    // Check if all variables have values in cardVarMapped
-    for (const variable of allVars) {
-      const variableName = variable.replace(/^\{\{|\}\}$/g, '');
-      const mappedValue = cardVarMapped[variableName] || cardVarMapped[variable];
-      if (!mappedValue || mappedValue.trim() === '') {
-        return false; // Found empty variable
-      }
-    }
-    
-    return true;
-  };
-
-  const tagValidation = (content, type) => {
-    // Only validate tags in edit mode (!isFullMode)
-    if (isFullMode) {
+  const validateResolvedTagsForType = (type) => {
+    if (isFullMode) return;
+    if (loadingTags || !tags || tags.length === 0) return;
+    const templateStr = type === TITLE_TEXT ? templateTitle : templateDesc;
+    const resolved = resolveTemplateWithMap(templateStr); // placeholders -> mapped value (or '')
+    if (!resolved) {
+      if (type === TITLE_TEXT) setTemplateTitleError(false);
+      if (type === MESSAGE_TEXT) setTemplateDescError(false);
       return;
     }
-    
-    // Only show unsupported tags error after all variables are resolved
-    if (!areAllVariablesResolved()) {
-      // Clear any existing unsupported tags errors while variables are still empty
-      if (type === titletype && templateTitleError && templateTitleError.includes('Unsupported tags:')) {
-        setTemplateTitleError(false);
-      } else if (type === descType && templateDescError && templateDescError.includes('Unsupported tags:')) {
-        setTemplateDescError(false);
-      }
-      return;
-    }
-    
-    const validationResponse = validateTags({
-      content: Array.isArray(content) ? content.join('') : content,
+    const validationResponse =
+      validateTags({
+        content: resolved,
       tagsParam: tags,
       injectedTagsParams: injectedTags,
       location,
       tagModule: getDefaultTags,
       eventContextTags,
     }) || {};
-    const unsupportedTagsLengthCheck = validationResponse?.unsupportedTags?.length > 0;
-    // if (type === 'title') {
-    //   setTemplateTitleError(
-    //     unsupportedTagsLengthCheck
-    //       ? formatMessage(globalMessages.unsupportedTagsValidationError, { unsupportedTags: validationResponse.unsupportedTags })
-    //       : validationResponse.isBraceError
-    //         ? formatMessage(globalMessages.unbalanacedCurlyBraces)
-    //         : false
-    //   );
-    // } else if (type === 'description') {
-    //   setTemplateDescError(
-    //     unsupportedTagsLengthCheck
-    //       ? formatMessage(globalMessages.unsupportedTagsValidationError, { unsupportedTags: validationResponse.unsupportedTags })
-    //       : validationResponse.isBraceError
-    //         ? formatMessage(globalMessages.unbalanacedCurlyBraces)
-    //         : false
-    //   );
-    // }
-    if (type === titletype) {
-      const errorMsg =
-        (unsupportedTagsLengthCheck &&
-          formatMessage(globalMessages.unsupportedTagsValidationError, {
-            unsupportedTags: validationResponse.unsupportedTags,
-          })) ||
-        (validationResponse.isBraceError &&
-          formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
-        false;
-      // Only update if changed to prevent flicker
-      setTemplateTitleError((prev) => (prev !== errorMsg ? errorMsg : prev));
-    } else if (type === descType) {
+    const unsupportedTagsLengthCheck =
+      validationResponse?.unsupportedTags?.length > 0;
       const errorMsg =
         (unsupportedTagsLengthCheck &&
           formatMessage(globalMessages.unsupportedTagsValidationError, {
@@ -354,55 +301,54 @@ export const Rcs = (props) => {
         (validationResponse.isBraceError &&
           formatMessage(globalMessages.unbalanacedCurlyBraces)) ||
         false;
-      setTemplateDescError((prev) => (prev !== errorMsg ? errorMsg : prev));
-    }    
+    if (type === TITLE_TEXT) setTemplateTitleError(errorMsg);
+    if (type === MESSAGE_TEXT) setTemplateDescError(errorMsg);
   };
 
   useEffect(() => {
-    if (isFullMode) {
-      return;
-    }
-    const hasInteraction = !isEmpty(cardVarMapped) || Object.values(rcsTextVariables || {}).some(group => Object.values(group || {}).some(v => (v || '').trim() !== ''));
-    if (!hasInteraction) {
-      setTemplateTitleError(false);
-      return;
-    }
-    // If any current title variable input has unbalanced braces, show that error and skip tag validation
-    const titleInputs = Object.values((rcsTextVariables || {})[TITLE_TEXT] || {});
-    for (let i = 0; i < titleInputs.length; i += 1) {
-      const v = titleInputs[i];
-      const varErr = variableErrorHandling(v);
-      if (varErr) {
-        setTemplateTitleError(varErr);
-        return;
-      }
-    }
-    const mapped = getMappedDesc(templateTitle, cardVarMapped);
-    tagValidation(mapped, titletype);
-  }, [templateTitle, tags, injectedTags, cardVarMapped, rcsTextVariables, isFullMode]);
-  
+    validateResolvedTagsForType(TITLE_TEXT);
+  }, [cardVarMapped, templateTitle, tags, injectedTags, loadingTags]);
+
   useEffect(() => {
-    if (isFullMode) {
-      return;
-    }
-    const hasInteraction = !isEmpty(cardVarMapped) || Object.values(rcsTextVariables || {}).some(group => Object.values(group || {}).some(v => (v || '').trim() !== ''));
-    if (!hasInteraction) {
-      setTemplateDescError(false);
-      return;
-    }
-    // If any current message variable input has unbalanced braces, show that error and skip tag validation
-    const msgInputs = Object.values((rcsTextVariables || {})[MESSAGE_TEXT] || {});
-    for (let i = 0; i < msgInputs.length; i += 1) {
-      const v = msgInputs[i];
-      const varErr = variableErrorHandling(v);
-      if (varErr) {
-        setTemplateDescError(varErr);
-        return;
+    validateResolvedTagsForType(MESSAGE_TEXT);
+  }, [cardVarMapped, templateDesc, tags, injectedTags, loadingTags]);
+
+  const getVarNameFromToken = (token = '') => token.replace(/^\{\{|\}\}$/g, '');
+
+  const resolveTemplateWithMap = (str = '') => {
+    if (!str) return '';
+    const arr = splitTemplateVarString(str);
+    return arr.map((elem) => {
+      if (rcsVarTestRegex.test(elem)) {
+        const key = getVarNameFromToken(elem);
+        const v = cardVarMapped?.[key];
+        return (v ?? '').toString();
       }
-    }
-    const mapped = getMappedDesc(templateDesc, cardVarMapped);
-    tagValidation(mapped, descType);
-  }, [templateDesc, tags, injectedTags, cardVarMapped, rcsTextVariables, isFullMode]);
+      return elem;
+    }).join('');
+  };
+
+
+  useEffect(() => {
+    if (isFullMode) return;
+    const tokens = [
+      ...(templateTitle ? (templateTitle.match(rcsVarRegex) || []) : []),
+      ...(templateDesc ? (templateDesc.match(rcsVarRegex) || []) : []),
+    ];
+    if (!tokens.length) return;
+    setCardVarMapped((prev) => {
+      const next = { ...(prev || {}) };
+      let changed = false;
+      tokens.forEach((t) => {
+        const name = getVarNameFromToken(t);
+        if (name && !Object.prototype.hasOwnProperty.call(next, name)) {
+          next[name] = '';
+          changed = true;
+        }
+      });
+      return changed ? next : prev;
+    });
+  }, [isFullMode, templateTitle, templateDesc]);
 
 
   const RcsLabel = styled.div`
@@ -422,84 +368,38 @@ export const Rcs = (props) => {
   }, [paramObj.id]);
 
   useEffect(() => {
-      // Clean up rcsTextVariables when templateDesc changes
-      const descArray = splitTemplateVarString(templateDesc);
-      const validIndexes = descArray
-        .map((elem, idx) => (rcsVarTestRegex.test(elem) ? idx : null))
-        .filter(idx => idx !== null);
-      setRcsTextVariables(prev => {
-        const updated = { ...prev };
-        if (updated[MESSAGE_TEXT]) {
-          Object.keys(updated[MESSAGE_TEXT]).forEach(idx => {
-            if (!validIndexes.includes(Number(idx))) {
-              delete updated[MESSAGE_TEXT][idx];
-            }
-          });
-        }
-        return updated;
-      });
-    }, [templateDesc]);
-    
-    useEffect(() => {
-      // Clean up rcsTextVariables when templateTitle changes
-      const titleArray = splitTemplateVarString(templateTitle);
-      const validIndexes = titleArray
-        .map((elem, idx) => (rcsVarTestRegex.test(elem) ? idx : null))
-        .filter(idx => idx !== null);
-      setRcsTextVariables(prev => {
-        const updated = { ...prev };
-        if (updated[TITLE_TEXT]) {
-          Object.keys(updated[TITLE_TEXT]).forEach(idx => {
-            if (!validIndexes.includes(Number(idx))) {
-              delete updated[TITLE_TEXT][idx];
-            }
-          });
-        }
-        return updated;
-      });
-    }, [templateTitle]);
+      if (!(isEditFlow || !isFullMode)) return;
 
-    // Prefill variable inputs from existing mapping on load/edit
-    useEffect(() => {
-      if (!templateTitle && !templateDesc) return;
-      const buildPrefill = (targetString) => {
+      const initField = (targetString, currentVarMap, setVarMap, setUpdated) => {
         const arr = splitTemplateVarString(targetString);
-        const pre = {};
+        if (!arr?.length) {
+          setVarMap({});
+          setUpdated([]);
+          return;
+        }
+        const nextVarMap = {};
+        const nextUpdated = [...arr];
         arr.forEach((elem, idx) => {
+          // RCS placeholders are alphanumeric/underscore (e.g. {{user_name}}), not numeric-only
           if (rcsVarTestRegex.test(elem)) {
-            const varName = elem.replace(/^\{\{|\}\}$/g, '');
-            const mapped = cardVarMapped[varName] ?? cardVarMapped[elem];
-            if (mapped !== undefined && mapped.trim() !== '') {
-              const value = /^\{\{[\s\S]*\}\}$/.test(mapped) ? mapped : `{{${mapped}}}`;
-              pre[idx] = value;
+            const id = `${elem}_${idx}`;
+            const varName = getVarNameFromToken(elem);
+            const mappedValue = (cardVarMapped?.[varName] ?? '').toString();
+            nextVarMap[id] = mappedValue;
+            if (mappedValue !== '') {
+              nextUpdated[idx] = mappedValue;
+            } else {
+              nextUpdated[idx] = elem;
             }
           }
         });
-        return pre;
+        setVarMap(nextVarMap);
+        setUpdated(nextUpdated);
       };
-      const prefilledTitle = buildPrefill(templateTitle);
-      const prefilledDesc = buildPrefill(templateDesc);
-      if (Object.keys(prefilledTitle).length === 0 && Object.keys(prefilledDesc).length === 0) return;
-      setRcsTextVariables(prev => {
-        const next = { ...prev };
-        // Only prefill if that slot is currently empty to avoid overwriting user typing
-        next[TITLE_TEXT] = { ...(prev[TITLE_TEXT] || {}) };
-        Object.keys(prefilledTitle).forEach((idx) => {
-          const current = next[TITLE_TEXT][idx];
-          if (!current || String(current).trim() === '') {
-            next[TITLE_TEXT][idx] = prefilledTitle[idx];
-          }
-        });
-        next[MESSAGE_TEXT] = { ...(prev[MESSAGE_TEXT] || {}) };
-        Object.keys(prefilledDesc).forEach((idx) => {
-          const current = next[MESSAGE_TEXT][idx];
-          if (!current || String(current).trim() === '') {
-            next[MESSAGE_TEXT][idx] = prefilledDesc[idx];
-          }
-        });
-        return next;
-      });
-    }, [templateTitle, templateDesc, cardVarMapped]);
+
+      initField(templateTitle, titleVarMappedData, setTitleVarMappedData, setUpdatedTitleData);
+      initField(templateDesc, descVarMappedData, setDescVarMappedData, setUpdatedDescData);
+    }, [templateTitle, templateDesc, cardVarMapped, isEditFlow, isFullMode]);
     
     useEffect(() => {
       if(!isEditFlow && isFullMode){
@@ -685,106 +585,29 @@ export const Rcs = (props) => {
     globalActions.fetchSchemaForEntity(query);
   };
 
-  const onTagSelect = (tag) => {
-    // Determine target input (index and type). If nothing focused, pick the first available variable slot.
-    let targetType = focusedVarType;
-    let targetIndex;
-    let tokenAtIndex = '';
-    if (!focusedVarId) {
-      // Try description first
-      const descArray = splitTemplateVarString(templateDesc);
-      let found = false;
-      for (let i = 0; i < descArray.length; i += 1) {
-        const elem = descArray[i];
-        if (rcsVarTestRegex.test(elem)) {
-          const currentVal = (rcsTextVariables?.[MESSAGE_TEXT]?.[i]) || '';
-          if (!currentVal) {
-            targetType = MESSAGE_TEXT;
-            targetIndex = i;
-            tokenAtIndex = elem;
-            found = true;
-            break;
-          }
-        }
-      }
-      // If no empty slot in description, try title
-      if (!found) {
-        const titleArray = splitTemplateVarString(templateTitle);
-        for (let i = 0; i < titleArray.length; i += 1) {
-          const elem = titleArray[i];
-          if (rcsVarTestRegex.test(elem)) {
-            const currentVal = (rcsTextVariables?.[TITLE_TEXT]?.[i]) || '';
-            if (!currentVal) {
-              targetType = TITLE_TEXT;
-              targetIndex = i;
-              tokenAtIndex = elem;
-              found = true;
-              break;
-            }
-          }
-        }
-      }
-      if (!targetType || targetIndex === undefined) {
-        CapNotification.error({
-          message: formatMessage(messages.noVariableFocused) || "Please select a variable to insert the label.",
-        });
-        return;
-      }
-    } else {
-      targetIndex = parseInt(focusedVarId.split('_').pop(), 10);
-      const arr = splitTemplateVarString(targetType === TITLE_TEXT ? templateTitle : templateDesc);
-      tokenAtIndex = arr[targetIndex] || '';
-    }
-
-    // Update the visual input field
-    // First-time select from label: insert with braces
-    setRcsTextVariables((prev) => {
-      const next = {
-        ...prev,
-        [targetType]: {
-          ...(prev[targetType] || {}),
-          [targetIndex]: `{{${tag}}}`,
-        },
-      };
-      return next;
-    });
-
-    // Store the variable-to-tag mapping
+  const onTagSelect = (data, areaId) => {
+    if (!areaId) return;
+    const sep = areaId.lastIndexOf('_');
+    if (sep === -1) return;
+    const numId = Number(areaId.slice(sep + 1));
+    if (isNaN(numId)) return;
+    const token = areaId.slice(0, sep);
+    const variableName = getVarNameFromToken(token);
+    if (!variableName) return;
     setCardVarMapped((prev) => {
-      // Determine stable variable name
-      const defaultVarName = (focusedVarId ? focusedVarId.split('_')[0] : tokenAtIndex).replace(/^\{\{|\}\}$/g, '');
-      const tokenName = tokenAtIndex.replace(/^\{\{|\}\}$/g, '');
-
-      // If this template had been saved with resolved tags, infer original key via inverse lookup
-      let variableName = defaultVarName;
-      if (prev && Object.keys(prev).length > 0) {
-        const entry = Object.entries(prev).find(([, v]) => {
-          const val = v || '';
-          const braced = /^\{\{[\s\S]*\}\}$/.test(val) ? val : `{{${val}}}`;
-          return braced === `{{${tokenName}}}`;
-        });
-        if (entry) {
-          const [keyFromMap] = entry;
-          variableName = keyFromMap;
-        }
-      }
-
-      const mappedValue = isFullMode ? tag : `{{${tag}}}`; // brace only on select
-
-      // Clean up any accidental keys equal to the tag token name (e.g., 'gt') to avoid duplicates
-      const cleaned = { ...prev };
-      if (tokenName && Object.prototype.hasOwnProperty.call(cleaned, tokenName)) {
-        delete cleaned[tokenName];
-      }
-
+      const base = (prev?.[variableName] ?? '').toString();
+      const nextVal = `${base}{{${data}}}`;
       return {
-        ...cleaned,
-        [variableName]: mappedValue,
+        ...(prev || {}),
+        [variableName]: nextVal,
       };
     });
-
   };
 
+  const onTitleTagSelect = (data) => onTagSelect(data, titleTextAreaId);
+
+  const onDescTagSelect = (data) => onTagSelect(data, descTextAreaId);
+
   const onTagSelectFallback = (data) => {
     const tempMsg = `${fallbackMessage}{{${data}}}`;
     const error = fallbackMessageErrorHandler(tempMsg);
@@ -1097,79 +920,43 @@ const splitTemplateVarString = (str) => {
   return templateVarArray.filter(Boolean);
 };
 
-  const textAreaValue = (index, type) => {
-    return rcsTextVariables?.[type]?.[index] || "";
+  const textAreaValue = (idValue, type) => {
+    if (idValue >= 0) {
+      const templateStr = type === TITLE_TEXT ? templateTitle : templateDesc;
+      const templateArr = splitTemplateVarString(templateStr);
+      const token = templateArr?.[idValue] || "";
+      if (token && rcsVarTestRegex.test(token)) {
+        const varName = getVarNameFromToken(token);
+        return (cardVarMapped?.[varName] ?? '').toString();
+      }
+      return "";
+    }
+    return "";
   };
 
   const textAreaValueChange = (e, type) => {
-    const value = e.target.value;
-  const inputId = e.target.id;
-  const index = parseInt(inputId.split("_").pop(), 10);
-
-  setRcsTextVariables((prev) => {
-    const updated = {
-      ...prev,
-      [type]: {
-        ...(prev[type] || {}),
-        [index]: value,
-      },
-    };
-
-    let reconstructed = '';
-    let varCount = 0;
-    const targetString = type === TITLE_TEXT ? templateTitle : templateDesc;
-    splitTemplateVarString(targetString).forEach((elem, idx) => {
-      if (rcsVarTestRegex.test(elem)) {
-        varCount += 1;
-        reconstructed += updated[type]?.[idx] || '';
-      } else {
-        reconstructed += elem;
-      }
-    });
-
-    if (isFullMode) {
-      // Creation flow: validate only variables using variableErrorHandling
-      if (type === TITLE_TEXT) {
-        const err = variableErrorHandling(reconstructed) || templateHeaderErrorHandler(reconstructed);
-        setTemplateTitleError(err);
-      } else {
-        const err = variableErrorHandling(reconstructed) || templateDescErrorHandler(reconstructed);
-        setTemplateDescError(err);
-      }
-    } else {
-      // Edit/library flow: validate only tags
-      if (type === TITLE_TEXT) {
-        tagValidation(reconstructed, titletype);
-      } else {
-        tagValidation(reconstructed, descType);
-      }
+    const value = e?.target?.value ?? '';
+    const id = e?.target?.id || e?.currentTarget?.id || '';
+    if (!id) return;
+    const sep = id.lastIndexOf('_');
+    if (sep === -1) return;
+    const isInvalidValue = value?.trim() === "";
+    const token = id.slice(0, sep);
+    const variableName = getVarNameFromToken(token);
+
+    if (variableName) {
+      setCardVarMapped((prev) => ({
+        ...prev,
+        [variableName]: isInvalidValue ? "" : value,
+      }));
     }
-
-    return updated;
-  });
-
-  // Keep mapping in sync with what user types in the variable input
-  const targetStringForMap = type === TITLE_TEXT ? templateTitle : templateDesc;
-  const arrForMap = splitTemplateVarString(targetStringForMap);
-  const token = arrForMap[index] || '';
-  if (rcsVarTestRegex.test(token)) {
-    const variableName = token.replace(/^\{\{|\}\}$/g, '');
-    // In !isFullMode, do not auto-wrap while typing; store raw input as-is
-    const normalized = isFullMode
-      ? (value ? (/^\{\{[\s\S]*\}\}$/.test(value) ? value : `{{${value}}}`) : '')
-      : (value || '');
-    setCardVarMapped(prev => {
-      const next = { ...prev };
-      // Keep the variable key even when empty; store empty string as value
-      next[variableName] = (normalized && normalized.trim() !== '') ? normalized : '';
-      return next;
-    });
-  }
   };
 
   const setTextAreaId = (e, type) => {
-    setFocusedVarId(e.target.id);
-    setFocusedVarType(type);
+    const id = e?.target?.id || e?.currentTarget?.id || '';
+    if (!id) return;
+    if (type === TITLE_TEXT) setTitleTextAreaId(id);
+    else setDescTextAreaId(id);
   };
 
   const renderButtonComponent = () => {
@@ -1257,7 +1044,7 @@ const splitTemplateVarString = (str) => {
             {(isEditFlow || !isFullMode) ? (
               <TagList
                 label={formatMessage(globalMessages.addLabels)}
-                onTagSelect={onTagSelect}
+                onTagSelect={onTitleTagSelect}
                 location={location}
                 tags={getRcsTags()}
                 onContextChange={handleOnTagsContextChange}
@@ -1319,7 +1106,7 @@ const splitTemplateVarString = (str) => {
               (isEditFlow || !isFullMode) ? (
                 <TagList
                   label={formatMessage(globalMessages.addLabels)}
-                  onTagSelect={onTagSelect}
+                  onTagSelect={onDescTagSelect}
                   location={location}
                   tags={getRcsTags()}
                   onContextChange={handleOnTagsContextChange}
@@ -1484,12 +1271,13 @@ const splitTemplateVarString = (str) => {
       if (hasTagInMapped) return true;
     }
     
-    // Check rcsTextVariables values for tags
-    if (rcsTextVariables && Object.keys(rcsTextVariables).length > 0) {
-      const hasTagInVariables = Object.values(rcsTextVariables).some(typeGroup => 
-        Object.values(typeGroup || {}).some(value => isTagIncluded(value))
-      );
-      if (hasTagInVariables) return true;
+    if (titleVarMappedData && Object.keys(titleVarMappedData).length > 0) {
+      const hasTagInTitle = Object.values(titleVarMappedData).some((value) => isTagIncluded(value));
+      if (hasTagInTitle) return true;
+    }
+    if (descVarMappedData && Object.keys(descVarMappedData).length > 0) {
+      const hasTagInDesc = Object.values(descVarMappedData).some((value) => isTagIncluded(value));
+      if (hasTagInDesc) return true;
     }
     
     return false;
@@ -1942,6 +1730,8 @@ const splitTemplateVarString = (str) => {
           return (
             <>
             {renderLabel('cardOrientationLabel')}
+            {/* Match image behavior: allow changing dimensions only in full-mode create flow */}
+            {!isEditFlow && isFullMode && (
             <CapSelect
               id="rcs-dimension-select"
               value={currentDimension}
@@ -1955,6 +1745,7 @@ const splitTemplateVarString = (str) => {
               }))}
               style={{ marginBottom: '20px' }}
             />
+            )}
               {(isEditFlow || !isFullMode) ? (
                 <div className="rcs-video-preview">
                   <CapImage
@@ -2012,9 +1803,8 @@ const splitTemplateVarString = (str) => {
   const getRcsPreview = () => {
     
     const dimensionObj = RCS_IMAGE_DIMENSIONS[selectedDimension];
-    // Always show resolved values in preview
-    const mappedDesc = getMappedDesc(templateDesc, cardVarMapped);
-    const mappedTitle = getMappedDesc(templateTitle, cardVarMapped);
+    const resolvedTitle = !isFullMode ? resolveTemplateWithMap(templateTitle) : templateTitle;
+    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(templateDesc) : templateDesc;
     return (
       <TemplatePreview
         channel={RCS}
@@ -2022,8 +1812,8 @@ const splitTemplateVarString = (str) => {
         rcsOrientation={dimensionObj?.orientation}
         content={{
           rcsPreviewContent: {
-            rcsTitle: mappedTitle,
-            rcsDesc: mappedDesc,
+            rcsTitle: resolvedTitle,
+            rcsDesc: resolvedDesc,
             ...(!isMediaTypeText && {
               rcsImageSrc,
               rcsVideoSrc: rcsThumbnailSrc,
@@ -2034,26 +1824,6 @@ const splitTemplateVarString = (str) => {
       />
     );
   };
-
-  const getMappedDesc = (str, cardVarMapped) => {
-    if (!str) return '';
-    const descArray = splitTemplateVarString(str);
-    return descArray.map((elem, index) => {
-      if (rcsVarTestRegex.test(elem)) {
-        // Extract just the variable name (e.g., "{{1}}" -> "1")
-        const variableName = elem.replace(/^\{\{|\}\}$/g, '');
-        // Support both unbraced and braced keys
-        const mapped = cardVarMapped[variableName] ?? cardVarMapped[elem];
-        // In edit mode (!isFullMode), if mapped value is empty, return original variable placeholder
-        if (!mapped || mapped.trim() === '') {
-          return elem; // Return original {{1}} instead of {{}}
-        }
-        const hasBraces = /^\{\{[\s\S]*\}\}$/.test(mapped);
-        return hasBraces ? mapped : `{{${mapped}}}`;
-      }
-      return elem;
-    }).join('');
-  };
   
   const getUnmappedDesc = (str, mapping) => {
     if (!str) return '';
@@ -2078,8 +1848,8 @@ const splitTemplateVarString = (str) => {
       'sms-editor': template = '',
       header: registeredSenderIds = [],
     } = base;
-    const mappedDesc = getMappedDesc(templateDesc, cardVarMapped);
-    const mappedTitle = getMappedDesc(templateTitle, cardVarMapped);
+    const resolvedTitle = !isFullMode ? resolveTemplateWithMap(templateTitle) : templateTitle;
+    const resolvedDesc = !isFullMode ? resolveTemplateWithMap(templateDesc) : templateDesc;
     const alignment = isMediaTypeImage
       ? RCS_IMAGE_DIMENSIONS[selectedDimension]?.alignment
       : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.alignment;
@@ -2099,8 +1869,8 @@ const splitTemplateVarString = (str) => {
                 },
                 cardContent: [
                   {
-                    title: mappedTitle,
-                    description: mappedDesc,
+                    title: resolvedTitle,
+                    description: resolvedDesc,
                     mediaType: templateMediaType,
                     ...(!isMediaTypeText && {media: {
                       mediaUrl: rcsImageSrc || rcsVideoSrc.videoSrc || '',

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

@@ -800,6 +800,174 @@ describe('RCS createPayload', () => {
     // cardVarMapped should exist on non-full mode (may be empty)
     expect(Object.prototype.hasOwnProperty.call(card, 'cardVarMapped')).toBe(true);
   });
+
+  it('should sync duplicate placeholders via cardVarMapped in non-full mode (typing once updates all occurrences)', () => {
+    const templateData = {
+      name: 'DupVarsTemplate',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'STANDALONE',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    // same placeholder appears twice
+                    title: 'Hello {{user_name}} and {{user_name}}',
+                    description: 'Hi {{user_name}}',
+                    mediaType: 'NONE',
+                    cardVarMapped: {}, // empty on load
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails: jest.fn(),
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/create', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          templateData={templateData}
+          rcsData={{}}
+          isFullMode={false}
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+          getFormData={jest.fn()}
+        />
+      </Provider>,
+    );
+
+    // Find both Title variable textareas for {{user_name}} and ensure they stay in sync
+    const titleVarAreas = wrapper.find('TextArea').filterWhere((n) => {
+      const id = n.prop('id') || '';
+      return id.includes('{{user_name}}_');
+    });
+    expect(titleVarAreas.length).toBeGreaterThanOrEqual(2);
+
+    act(() => {
+      const id = titleVarAreas.at(0).prop('id');
+      titleVarAreas.at(0).props().onChange({ target: { id, value: 'Alice' } });
+    });
+    wrapper.update();
+
+    const updatedTitleVarAreas = wrapper.find('TextArea').filterWhere((n) => {
+      const id = n.prop('id') || '';
+      return id.includes('{{user_name}}_');
+    });
+
+    // Both occurrences should show the same value (from cardVarMapped.user_name)
+    expect(updatedTitleVarAreas.at(0).prop('value')).toBe('Alice');
+    expect(updatedTitleVarAreas.at(1).prop('value')).toBe('Alice');
+  });
+
+  it('should insert TagList label into focused placeholder and sync duplicates in non-full mode', () => {
+    const templateData = {
+      name: 'DupVarsTemplate2',
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardType: 'STANDALONE',
+                cardSettings: { cardOrientation: 'VERTICAL', cardWidth: 'SMALL' },
+                cardContent: [
+                  {
+                    title: 'Hello {{user_name}} and {{user_name}}',
+                    description: 'Hi {{user_name}}',
+                    mediaType: 'NONE',
+                    cardVarMapped: {},
+                    suggestions: [],
+                  },
+                ],
+                contentType: 'RICHCARD',
+              },
+            },
+          },
+        },
+      },
+      type: 'RCS',
+    };
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails: jest.fn(),
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/create', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          templateData={templateData}
+          rcsData={{}}
+          isFullMode={false}
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+          getFormData={jest.fn()}
+        />
+      </Provider>,
+    );
+
+    const titleVarAreas = wrapper.find('TextArea').filterWhere((n) => {
+      const id = n.prop('id') || '';
+      return id.includes('{{user_name}}_');
+    });
+    expect(titleVarAreas.length).toBeGreaterThanOrEqual(2);
+
+    // Focus the first variable textarea so TagList knows where to insert
+    act(() => {
+      const id = titleVarAreas.at(0).prop('id');
+      titleVarAreas.at(0).props().onFocus({ target: { id } });
+    });
+    wrapper.update();
+
+    // Trigger TagList selection (mocked TagList calls onTagSelect with string)
+    const tagList = wrapper.find('.tag-mock').at(0);
+    act(() => {
+      tagList.props().onTagSelect('first_name');
+    });
+    wrapper.update();
+
+    const updatedTitleVarAreas = wrapper.find('TextArea').filterWhere((n) => {
+      const id = n.prop('id') || '';
+      return id.includes('{{user_name}}_');
+    });
+    expect(updatedTitleVarAreas.at(0).prop('value')).toBe('{{first_name}}');
+    expect(updatedTitleVarAreas.at(1).prop('value')).toBe('{{first_name}}');
+  });
 });
 
 describe('Character Counting Functions', () => {