@capillarytech/creatives-library 8.0.323 → 8.0.324-alpha.0

package/package.json

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

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -150,8 +150,7 @@
   margin-right: 0.5rem;
 }
 
-/* CapSlideBox defaults to z-index 100; RCS SMS fallback slidebox + tag popovers use 10010–10020 — must stack above or close control is not clickable. */
-.cap-slide-box-v2.common-test-and-preview-slidebox {
+.cap-slide-box-v2.common-test-and-preview-slidebox .cap-slide-box-v2-container {
   z-index: 10030;
 }
 

package/v2Components/SmsFallback/index.js

@@ -789,7 +789,6 @@ export function SmsFallback({
           ? { rcsSmsFallbackVarMapped: rcsFallbackVarMappedFromBase }
           : {}),
       });
-      slideboxDispatch({ type: 'SET_PENDING_FALLBACK_DATA', payload: null });
       if (!skipClose) closeSlidebox();
     },
     [onChange, closeSlidebox, value, pendingFallbackData]

package/v2Containers/Rcs/constants.js

@@ -93,6 +93,8 @@ export const RCS_MEDIA_TYPES = {
 export const rcsVarRegex = /\{\{\w+\}\}/g;
 export const rcsVarTestRegex = /\{\{\w+\}\}/;
 
+/** 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+$/;
 /** Escape `RegExp` metacharacters when building a pattern from user/tag text. */

package/v2Containers/Rcs/index.js

@@ -88,6 +88,7 @@ import {
   MEDIUM,
   RICHCARD,
   RCS_NUMERIC_VAR_NAME_REGEX,
+  RCS_NUMERIC_VAR_TOKEN_REGEX,
   RCS_TAG_AREA_FIELD_TITLE,
   RCS_TAG_AREA_FIELD_DESC,
 } from './constants';
@@ -245,8 +246,12 @@ export const Rcs = (props) => {
   const handleSmsFallbackEditorStateChange = useCallback((patch) => {
     setSmsFallbackData((prev) => {
       if (!patch || typeof patch !== 'object') return prev;
-      // Merge even when `prev` is null so tag/slot updates apply on top of `smsFromApiShape` in createPayload.
-      return { ...(prev || {}), ...patch };
+      // Bail out when no template has been selected yet — SmsTraiEdit fires
+      // onRcsFallbackEditorStateChange on mount (unicodeValidity, varMapped),
+      // which would create a non-null smsFallbackData from nothing and cause
+      // the card to appear as "Untitled creative" before any save.
+      if (!prev) return prev;
+      return { ...prev, ...patch };
     });
   }, []);
 
@@ -910,11 +915,17 @@ export const Rcs = (props) => {
         delete next[variableName];
         next[data] = nextVal;
       } else {
-        next[variableName] = nextVal;
-        // resolveCardVarMappedSlotValue prefers numeric slot keys ("1","2",…) over semantic names;
-        // hydration may set "1": ''. Use global slot index — suffix is segment index (includes static text), not var ordinal.
+        // 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];
+        } else {
+          next[variableName] = nextVal;
         }
       }
       return next;
@@ -1102,15 +1113,31 @@ export const Rcs = (props) => {
   onAddVar(templateDesc);
 };
 
-const onAddVar = (messageContent) => {
-  // Always append the next variable at the end, like WhatsApp
-  const existingVars = messageContent.match(/\{\{(\d+)\}\}/g) || [];
-  const existingNumbers = existingVars.map(v => parseInt(v.match(/\d+/)[0], 10));
+/**
+ * Returns the smallest positive integer not already used as a `{{N}}` variable
+ * in either the title or description fields, or null if the limit (19) is reached.
+ * Scans both fields so title and description vars never share the same number
+ * (duplicate numbers would share a cardVarMapped key and bleed values across fields).
+ */
+const getNextRcsNumericVarNumber = (titleStr, descStr) => {
+  const allExistingVars = [
+    ...(titleStr.match(RCS_NUMERIC_VAR_TOKEN_REGEX) || []),
+    ...(descStr.match(RCS_NUMERIC_VAR_TOKEN_REGEX) || []),
+  ];
+  const existingNumbers = allExistingVars.flatMap(v => {
+    const m = v.match(/\d+/);
+    return m ? [parseInt(m[0], 10)] : [];
+  });
   let nextNumber = 1;
   while (existingNumbers.includes(nextNumber)) {
     nextNumber++;
   }
-  if (nextNumber > 19) {
+  return nextNumber > 19 ? null : nextNumber;
+};
+
+const onAddVar = (messageContent) => {
+  const nextNumber = getNextRcsNumericVarNumber(templateTitle, messageContent);
+  if (nextNumber === null) {
     return;
   }
   const nextVar = `{{${nextNumber}}}`;
@@ -1122,15 +1149,13 @@ const onAddVar = (messageContent) => {
 };
 
 const onTitleAddVar = () => {
-  // Always append the next variable at the end, like WhatsApp
+  // Scan both title AND description so the new title var number doesn't
+  // duplicate a number already used in the description. Duplicate numeric
+  // names would share the same cardVarMapped semantic key, causing the
+  // description slot to reflect the title slot value and vice-versa.
   const messageContent = templateTitle;
-  const existingVars = messageContent.match(/\{\{(\d+)\}\}/g) || [];
-  const existingNumbers = existingVars.map(v => parseInt(v.match(/\d+/)[0], 10));
-  let nextNumber = 1;
-  while (existingNumbers.includes(nextNumber)) {
-    nextNumber++;
-  }
-  if (nextNumber > 19) {
+  const nextNumber = getNextRcsNumericVarNumber(templateTitle, templateDesc);
+  if (nextNumber === null) {
     return;
   }
   const nextVar = `{{${nextNumber}}}`;
@@ -1216,9 +1241,22 @@ const onTitleAddVar = () => {
     const fieldStr = type === TITLE_TEXT ? templateTitle : templateDesc;
     const globalSlot = getGlobalSlotIndexForRcsFieldId(id, fieldStr, type);
     setCardVarMapped((previousVarMap) => {
-      const nextVarMap = { ...previousVarMap, [variableName]: coercedSlotValue };
+      const nextVarMap = { ...previousVarMap };
       if (globalSlot !== null && globalSlot !== undefined) {
-        nextVarMap[String(globalSlot + 1)] = coercedSlotValue;
+        // 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;
       }
       return nextVarMap;
     });

package/v2Containers/Sms/Create/index.js

@@ -57,6 +57,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       isTestAndPreviewMode: false,
       pendingGetFormData: false,
     };
+    // Tracks the last validity value reported to SmsFallback so componentDidUpdate
+    // does not dispatch on every render and create an infinite update loop.
+    // Intentionally undefined (not true) so the first render always reports the
+    // real validity rather than assuming the form starts invalid.
+    this._lastReportedSmsFooterInvalid = undefined;
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
     this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
@@ -182,10 +187,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (!this.props.embeddedSmsFallback || typeof this.props.onEmbeddedSmsFooterValidity !== 'function') {
       return;
     }
-    // Report validity on every update. The reducer in SmsFallback bails out (returns same
-    // state reference) when the value is unchanged, so no re-render loop is triggered.
-    // Calling unconditionally handles both mutation-based and reference-based FormBuilder updates.
-    this.props.onEmbeddedSmsFooterValidity(getSmsEmbeddedFooterValidity(this.state.formData, this.state.tabCount));
+    const validity = getSmsEmbeddedFooterValidity(this.state.formData, this.state.tabCount);
+    const isInvalid = !!validity.isTemplateNameEmpty || !!validity.isMessageEmpty;
+    // Only dispatch when the validity value changes. Dispatching unconditionally caused
+    // an infinite loop: componentDidUpdate → dispatch → SmsFallback re-render →
+    // SmsCreate re-render → componentDidUpdate → ... even when state was unchanged.
+    // The instance variable handles both reference-based and mutation-based FormBuilder
+    // updates: validity is recomputed from current formData content, not by reference.
+    if (this._lastReportedSmsFooterInvalid === isInvalid) return;
+    this._lastReportedSmsFooterInvalid = isInvalid;
+    this.props.onEmbeddedSmsFooterValidity(validity);
   }
 
   componentWillUnmount() {
@@ -911,23 +922,29 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   removeStandAlone() {
     const schema = _.cloneDeep(this.state.schema);
     const childSections = _.get(schema, 'standalone.sections[0].childSections');
-    if (!childSections || childSections.length <= 2) {
-      return;
-    }
-    /* In-form Save / Test row removed for embedded SMS; slidebox footer (SlideBoxFooter) provides actions — see CreativesContainer. */
-    childSections.splice(2, 1);
-    /*
-     * Creatives library also drops the standalone template-name block because `SlideBoxHeader` shows the name.
-     * RCS SMS fallback uses the same slidebox footer but no template-name header — keep Creative name in the form.
-     */
-    if (!this.props.embeddedSmsFallback) {
-      const fields = _.get(childSections, '[1].childSections[0].childSections');
-      if (fields && fields.length > 0) {
-        fields.splice(0, 1);
-        _.set(childSections, '[1].childSections[0].childSections', fields);
+    if (childSections) {
+      /* In-form Save / Test row (index 2) only exists when the schema has > 2 sections. */
+      if (childSections.length > 2) {
+        childSections.splice(2, 1);
+      }
+      /*
+       * Creatives library drops the standalone template-name block because `SlideBoxHeader`
+       * shows the name. This is independent of the section count — guard it separately so
+       * it still runs even when childSections.length <= 2 (e.g. schema arrives pre-trimmed).
+       * RCS SMS fallback uses the same slidebox footer but keeps the name in the form.
+       */
+      if (!this.props.embeddedSmsFallback) {
+        const fields = _.get(childSections, '[1].childSections[0].childSections');
+        if (fields && fields.length > 0) {
+          fields.splice(0, 1);
+          _.set(childSections, '[1].childSections[0].childSections', fields);
+        }
       }
+      _.set(schema, 'standalone.sections[0].childSections', childSections);
     }
-    _.set(schema, 'standalone.sections[0].childSections', childSections);
+    // Always increment loadingStatus — isSmsLoading() requires >= 2 in library mode
+    // (isFullMode=false). The early return previously skipped this, leaving the
+    // spinner stuck forever when the schema had <= 2 childSections.
     this.setState({ schema, loadingStatus: this.state.loadingStatus + 1 });
   }
 

package/v2Containers/Templates/_templates.scss

@@ -673,6 +673,8 @@
 
   &__toolbar-row .search-text {
     width: 13.125rem;
+    min-width: 13.125rem;
+    flex: 1;
   }
 
   &__create-row {