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

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -91,6 +91,7 @@ import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants'
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { RCS_STATUSES, contentType as RCS_CONTENT_TYPE, EMBEDDED } from '../Rcs/constants';
 import { pickRcsCardVarMappedEntries } from '../Rcs/rcsLibraryHydrationUtils';
+import { resolveRcsCardPreviewStrings, isRcsTextOnlyCardMediaType } from '../Rcs/utils';
 import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
@@ -1444,7 +1445,28 @@ export class Creatives extends React.Component {
           const firstCardFromSubmit = Array.isArray(cardContentFromSubmit)
             ? cardContentFromSubmit[0]
             : null;
-          const cardContent = cardContentFromSubmit;
+          const isLibraryModeForRcsConsumerPayload = isFullModeForRcsConsumerPayload !== true;
+          // Consumers (e.g. campaigns) display `cardDisplayTitle`/`cardDisplayDescription` in
+          // preference to `title`/`description` when present (see getRcsCardDisplayTitle/
+          // Description) but getTemplateData strips them before re-hydrating this editor — so
+          // populating them here with resolved tag values is display-only and never feeds back
+          // into `templateTitle`/`templateDesc` on reopen. Keep raw `title`/`description` as-is.
+          const cardContent = Array.isArray(cardContentFromSubmit)
+            ? cardContentFromSubmit.map((card = {}) => {
+                const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+                  card.title || '',
+                  card.description || '',
+                  card.cardVarMapped || {},
+                  isLibraryModeForRcsConsumerPayload,
+                  isRcsTextOnlyCardMediaType(card.mediaType),
+                );
+                return {
+                  ...card,
+                  cardDisplayTitle: rcsTitle,
+                  cardDisplayDescription: rcsDesc,
+                };
+              })
+            : cardContentFromSubmit;
           const rcsContent = {
             contentType,
             cardType,

package/v2Containers/Rcs/index.js

@@ -1432,6 +1432,31 @@ export const Rcs = (props) => {
     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) => {
     if (!varSegmentCompositeDomId) return;
     const underscoreIndexInCompositeId = varSegmentCompositeDomId.lastIndexOf('_');
@@ -1497,36 +1522,47 @@ export const Rcs = (props) => {
       return updatedCardVarMapped;
     });
 
-    if (
-      isNumericPlaceholderSlot
-      && (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC)
-    ) {
+    if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC) {
+      // A numeric slot (e.g. {{1}}) is replaced by its unique placeholder text; a 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 = isNumericPlaceholderSlot
+            ? replaceNumericPlaceholderWithTagInTemplate(
+                previousTitle || '',
+                semanticOrNumericVarName,
+                selectedTagNameFromPicker,
+              )
+            : replaceTagAtFieldSlotOrdinal(previousTitle || '', localSlotOrdinal, selectedTagNameFromPicker);
+          if (titleAfterReplacingTag === previousTitle) return previousTitle;
+          setTemplateTitleError(variableErrorHandling(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 = isNumericPlaceholderSlot
+            ? replaceNumericPlaceholderWithTagInTemplate(
+                previousDescription || '',
+                semanticOrNumericVarName,
+                selectedTagNameFromPicker,
+              )
+            : replaceTagAtFieldSlotOrdinal(previousDescription || '', localSlotOrdinal, selectedTagNameFromPicker);
+          if (descriptionAfterReplacingTag === previousDescription) {
             return previousDescription;
           }
-          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingNumericPlaceholder));
+          setTemplateDescError(variableErrorHandling(descriptionAfterReplacingTag));
           setRcsVarSegmentEditorRemountKey((remountKey) => remountKey + 1);
-          return descriptionAfterReplacingNumericPlaceholder;
+          return descriptionAfterReplacingTag;
         });
       }
     }