@capillarytech/creatives-library 9.0.14 → 9.0.15-alpha.1

package/constants/unified.js

@@ -45,6 +45,9 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
 export const ENABLE_NEW_EDITOR_FLOW_INAPP = 'ENABLE_NEW_EDITOR_FLOW_INAPP';
+// Per-channel flag for the FormBuilder V3 migration. Routes SMS templates to the
+// new functional FormBuilder; later channels get their own flags (…_MPUSH, …_EMAIL).
+export const ENABLE_NEW_FORMBUILDER_SMS = 'ENABLE_NEW_FORMBUILDER_SMS';
 export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
@@ -159,6 +162,24 @@ export const TAG_CONTENT_REGEX = /{{([^}]+)}}/g;
 export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/g;
 export const SKIP_TAGS_REGEX_GROUPS = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)", "Link_to_[a-zA-Z]", "SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)", "referral_unique_(code|url).*userid"];
 
+// --- Template variable tokens (`{{var}}`, DLT `{#var#}`) ---
+/** Global: all `{{…}}` placeholders in a string. */
+export const DEFAULT_MUSTACHE_VAR_REGEX = /\{\{[^}]+\}\}/g;
+/** Global: `{{…}}` or DLT `{#…#}` tokens (SMS combined mode). */
+export const COMBINED_SMS_TEMPLATE_VAR_REGEX = /\{\{[^}]+\}\}|\{\#[^#]*\#\}/g;
+/** Full-string check: one mustache token. */
+export const MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX = /^\{\{[^}]+\}\}$/;
+/** Full-string check: one DLT hash token. */
+export const DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX = /^\{\#[^#]*\#\}$/;
+/** Full-string with capture group: inner name for `{{ name }}`-style tokens (whitespace-tolerant). */
+export const MUSTACHE_TOKEN_INNER_NAME_REGEX = /^\{\{\s*([^}]+?)\s*\}\}$/;
+/** Full-string with capture group: inner name/body for `{# name #}` DLT tokens (whitespace-tolerant). */
+export const DLT_HASH_TOKEN_INNER_NAME_REGEX = /^\{#\s*(.*?)\s*#\}$/;
+/** Global with capture group: inner name inside `{{name}}`. */
+export const MUSTACHE_VAR_NAME_CAPTURE_REGEX = /\{\{([^}]+)\}\}/g;
+/** Global with capture group: inner body inside `{#body#}`. */
+export const DLT_VAR_BODY_CAPTURE_REGEX = /\{\#([^#]*)\#\}/g;
+
 export const GET_TRANSLATION_MAPPED = {
   'en': 'en-US',
   'zh-cn': 'zh',
@@ -196,3 +217,14 @@ export const LOGOUT_FAILURE = 'cap/LOGOUT_FAILURE';
 export const JAPANESE_HELP_TEXT = 'ヘルプ :トークンの定義';
 
 export const TAG_TRANSLATION_DOC = 'https://docs.capillarytech.com/docs/tags-translation';
+
+// --- RCS SMS fallback API contract (shared across modules: campaigns, journey, etc.) ---
+
+/** Keys on `messageContent.*.smsFallBackContent` sent to the API: only `message` + `templateConfigs`.
+ *  `rcsSmsFallbackVarMapped` is editor-only — merged into `message` at normalize, not sent on the wire. */
+export const RCS_API_SMS_FALLBACK_KEYS = Object.freeze({
+  MESSAGE: 'message',
+  TEMPLATE_CONFIGS: 'templateConfigs',
+  RCS_SMS_FALLBACK_VAR_MAPPED: 'rcsSmsFallbackVarMapped',
+});
+

package/global-styles.js

@@ -51,7 +51,7 @@ export default createGlobalStyle`
     }
 
     .slidebox-header-icon-right {
-      .title-desc-container:not(:has(.whatsapp-rcs-slidebox-template-name)) {
+      .title-desc-container:not(:has(.whatsapp-rcs-slidebox-template-name)):not(:has(.cap-header-v2-description)) {
         display: flex;
         align-items: center;
       }

package/package.json

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

package/services/tests/api.test.js

@@ -89,21 +89,26 @@ describe('uploadFile -- whatsapp image upload', () => {
 
   it('Uploads the file with the original filename when encodeURIComponent fails', async () => {
     // Mocking the encodeURIComponent function to throw an error
+    const originalEncodeURIComponent = global.encodeURIComponent;
     global.encodeURIComponent = jest.fn(() => { throw new Error('encodeURIComponent error'); });
     const blob = new Blob([''], { type: 'image/jpeg' });
     const file = new File([blob], '@%test.jpeg', { type: 'image/jpeg' });
-    expect(
-        uploadFile({
-          file,
-          assetType: 'image',
-          fileParams: {
-            width: 275,
-            height: 183,
-            error: false,
-          },
-          whatsappParams: {},
-        }),
-      ).toEqual(Promise.resolve());
+    try {
+      expect(
+          uploadFile({
+            file,
+            assetType: 'image',
+            fileParams: {
+              width: 275,
+              height: 183,
+              error: false,
+            },
+            whatsappParams: {},
+          }),
+        ).toEqual(Promise.resolve());
+    } finally {
+      global.encodeURIComponent = originalEncodeURIComponent;
+    }
   });
 });
 
@@ -1037,16 +1042,26 @@ describe('getMembersLookup', () => {
     expect(result).toBeInstanceOf(Promise);
   });
 
-  it('should call fetch with correct URL encoding and GET method', () => {
+  it('should call fetch with correct URL encoding and GET method', async () => {
     global.fetch.mockClear();
-    getMembersLookup('email', 'user+test@example.com');
+    await getMembersLookup('email', 'user+test@example.com');
     expect(global.fetch).toHaveBeenCalled();
-    const calls = global.fetch.mock.calls;
-    const anyMembersCall = calls.find((c) => c[0] && String(c[0]).includes('members'));
-    expect(anyMembersCall).toBeDefined();
-    expect(anyMembersCall[0]).toContain('identifierType=');
-    expect(anyMembersCall[0]).toContain('identifierValue=');
-    expect(anyMembersCall[1]?.method || 'GET').toBe('GET');
+
+    // Find the first call that uses both the members endpoint and proper encoding
+    const call = global.fetch.mock.calls.find(
+      ([url]) =>
+        url &&
+        url.includes('members') &&
+        url.includes('identifierType=email') &&
+        url.includes('identifierValue=user%2Btest%40example.com')
+    );
+    expect(call).toBeDefined();
+
+    // Check URL structure
+    const [url, options] = call;
+    expect(url).toContain('identifierType=email');
+    expect(url).toContain('identifierValue=user%2Btest%40example.com');
+    expect((options && options.method) || 'GET').toBe('GET');
   });
 });
 

package/utils/common.js

@@ -26,6 +26,7 @@ import {
   SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH,
   ENABLE_NEW_EDITOR_FLOW_INAPP,
+  ENABLE_NEW_FORMBUILDER_SMS,
   SUPPORT_ENGAGEMENT_MODULE,
   ENABLE_CREATIVES_ARCHIVAL,
 } from '../constants/unified';
@@ -162,6 +163,13 @@ export const hasNewEditorFlowInAppEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_NEW_EDITOR_FLOW_INAPP,
 );
 
+// FormBuilder V3 — per-org flag that routes the SMS channel to the new
+// functional FormBuilder. Off => the legacy class implementation (Classic).
+export const hasNewFormBuilderEnabledForSms = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_NEW_FORMBUILDER_SMS,
+);
+
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/utils/commonUtils.js

@@ -539,4 +539,22 @@ export const isValidMobile = (mobile) => PHONE_REGEX.test(mobile);
 export const formatPhoneNumber = (phone) => {
   if (!phone) return '';
   return String(phone).replace(/[^\d]/g, '');
-};
+};
+
+/**
+ * TRAI sender IDs on persisted RCS SMS fallback: may live on the merged object, under
+ * `templateConfigs`, or (legacy) `templateConfigs.header`. Same resolution order as
+ * `createPayload` in `Rcs/index.js`.
+ */
+export function extractRegisteredSenderIdsFromSmsFallbackRecord(record) {
+  if (!record || typeof record !== 'object') return null;
+  const tc = record.templateConfigs && typeof record.templateConfigs === 'object'
+    ? record.templateConfigs
+    : {};
+  const candidates = [record.registeredSenderIds, tc.registeredSenderIds, tc.header];
+  for (let i = 0; i < candidates.length; i += 1) {
+    const a = candidates[i];
+    if (Array.isArray(a) && a.length > 0) return a;
+  }
+  return null;
+}

package/utils/rcsPayloadUtils.js

@@ -0,0 +1,92 @@
+import isEmpty from 'lodash/isEmpty';
+import { RCS_API_SMS_FALLBACK_KEYS } from '../constants/unified';
+import {
+  COMBINED_SMS_TEMPLATE_VAR_REGEX,
+  isAnyTemplateVarToken,
+  splitTemplateVarString,
+} from './templateVarUtils';
+
+const {
+  MESSAGE,
+  TEMPLATE_CONFIGS,
+  RCS_SMS_FALLBACK_VAR_MAPPED,
+} = RCS_API_SMS_FALLBACK_KEYS;
+
+function mergeSmsFallbackSlots(templateStr, varMapped) {
+  const map = varMapped != null && typeof varMapped === 'object' ? varMapped : {};
+  if (!Object.keys(map).length) return typeof templateStr === 'string' ? templateStr : '';
+  const str = typeof templateStr === 'string' ? templateStr : '';
+  return splitTemplateVarString(str, COMBINED_SMS_TEMPLATE_VAR_REGEX)
+    .map((seg, i) => {
+      if (!isAnyTemplateVarToken(seg)) return seg;
+      const key = `${seg}_${i}`;
+      if (Object.prototype.hasOwnProperty.call(map, key)) {
+        const v = map[key];
+        return v == null ? '' : String(v);
+      }
+      return seg;
+    })
+    .join('');
+}
+
+/**
+ * Mutates one RCS messageContent entry: strips UI-only fields, promotes smsFallBackContent to a
+ * sibling of rcsContent, and folds rcsSmsFallbackVarMapped into the message string for the API.
+ */
+export const normalizeRcsMessageContentForApi = messageContentItem => {
+  const {
+    rcsContent = {},
+    smsFallBackContent: rootSmsFallbackContent = {},
+  } = messageContentItem;
+  const {
+    smsFallBackContent: legacySmsFallbackNestedUnderCard,
+    ...rcsCardPayloadOnly
+  } = { ...rcsContent };
+  /* Legacy nested first, then root — so current root `smsFallBackContent` wins on key clashes. */
+  const mergedSmsFallbackSources = {
+    ...(legacySmsFallbackNestedUnderCard ?? {}),
+    ...rootSmsFallbackContent,
+  };
+  messageContentItem.rcsContent = rcsCardPayloadOnly;
+
+  delete messageContentItem.templateConfigs;
+  delete rcsCardPayloadOnly.templateConfigs;
+
+  if (Array.isArray(rcsCardPayloadOnly.cardContent)) {
+    rcsCardPayloadOnly.cardContent.forEach(card => {
+      if (Array.isArray(card.suggestions)) {
+        card.suggestions.forEach(suggestion => {
+          delete suggestion.isSaved;
+        });
+      }
+    });
+  }
+
+  const varMappedMerged = mergedSmsFallbackSources[RCS_SMS_FALLBACK_VAR_MAPPED];
+  const hasVarMapped =
+    varMappedMerged != null
+    && typeof varMappedMerged === 'object'
+    && Object.keys(varMappedMerged).length > 0;
+  const hasMessageKey = Object.prototype.hasOwnProperty.call(mergedSmsFallbackSources, MESSAGE);
+  const rawMessage = hasMessageKey ? mergedSmsFallbackSources[MESSAGE] : undefined;
+  const messageForApi =
+    hasMessageKey && hasVarMapped
+      ? mergeSmsFallbackSlots(rawMessage == null ? '' : String(rawMessage), varMappedMerged)
+      : rawMessage;
+
+  const apiSiblingSmsFallback = Object.fromEntries(
+    [
+      hasMessageKey && [MESSAGE, messageForApi],
+      !isEmpty(mergedSmsFallbackSources[TEMPLATE_CONFIGS]) && [
+        TEMPLATE_CONFIGS,
+        mergedSmsFallbackSources[TEMPLATE_CONFIGS],
+      ],
+    ].filter(Boolean),
+  );
+
+  if (Object.keys(apiSiblingSmsFallback).length) {
+    messageContentItem.smsFallBackContent = apiSiblingSmsFallback;
+  } else {
+    delete messageContentItem.smsFallBackContent;
+  }
+};

package/utils/templateVarUtils.js

@@ -0,0 +1,201 @@
+/**
+ * Shared utilities for templates containing {{var}} and DLT `{#var#}` tokens.
+ * Same split process used by WhatsApp/RCS: match vars with regex, then split content at each var.
+ */
+
+import {
+  COMBINED_SMS_TEMPLATE_VAR_REGEX,
+  DEFAULT_MUSTACHE_VAR_REGEX,
+  DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX,
+  DLT_HASH_TOKEN_INNER_NAME_REGEX,
+  DLT_VAR_BODY_CAPTURE_REGEX,
+  MUSTACHE_TOKEN_INNER_NAME_REGEX,
+  MUSTACHE_VAR_NAME_CAPTURE_REGEX,
+  MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX,
+} from '../constants/unified';
+
+export { COMBINED_SMS_TEMPLATE_VAR_REGEX, DEFAULT_MUSTACHE_VAR_REGEX } from '../constants/unified';
+
+const isMustacheVarToken = (s) =>
+  typeof s === 'string' && MUSTACHE_VAR_TOKEN_FULL_STRING_REGEX.test(s);
+
+export const isDltHashVarToken = (s) =>
+  typeof s === 'string' && DLT_HASH_VAR_TOKEN_FULL_STRING_REGEX.test(s);
+
+export const isAnyTemplateVarToken = (s) => isMustacheVarToken(s) || isDltHashVarToken(s);
+
+/**
+ * `RegExp.prototype.exec` only advances `lastIndex` when the `g` and/or `y` flag is set.
+ * A non-global regex in a `while ((m = re.exec(s)) !== null)` loop never advances and can run forever.
+ *
+ * @param {RegExp} regex
+ * @returns {RegExp} Same instance if already global; otherwise a new RegExp with `g` appended to flags.
+ */
+function ensureGlobalRegexForExecLoop(regex) {
+  if (!regex || !(regex instanceof RegExp) || regex.global) {
+    return regex;
+  }
+  return new RegExp(regex.source, `${regex.flags}g`);
+}
+
+/**
+ * Splits `content` into alternating plain-text segments and variable tokens, using the order of
+ * matches in `matchedVariableTokens` (e.g. from `String.prototype.match` with a global regex).
+ *
+ * @param {string[]} matchedVariableTokens - Matched tokens in left-to-right order
+ * @param {string} content - Full template string
+ * @returns {string[]}
+ */
+export const splitContentByOrderedVarTokens = (matchedVariableTokens, content) => {
+  const segmentList = [];
+  const tokenQueue = [...(matchedVariableTokens ?? [])];
+  let remainder = content ?? '';
+  while ((remainder?.length ?? 0) > 0) {
+    const nextVarToken = tokenQueue?.[0];
+    if (nextVarToken == null || nextVarToken === '') {
+      segmentList.push(remainder);
+      break;
+    }
+    const varStartIndex = remainder.indexOf(nextVarToken);
+    if (varStartIndex !== -1) {
+      segmentList.push(remainder.substring(0, varStartIndex));
+      segmentList.push(nextVarToken);
+      const afterVar = varStartIndex + (nextVarToken?.length ?? 0);
+      remainder = remainder.substring(afterVar, remainder?.length ?? 0);
+      tokenQueue.shift();
+    } else {
+      segmentList.push(remainder);
+      break;
+    }
+  }
+  return segmentList;
+};
+
+/**
+ * Splits a template string into an array of text + {{var}} segments using the given regex.
+ *
+ * @param {string} str - Template string
+ * @param {RegExp} [varRegex] - Regex that matches var tokens; defaults to DEFAULT_MUSTACHE_VAR_REGEX
+ * @returns {string[]}
+ */
+export const splitTemplateVarString = (str = '', varRegex = DEFAULT_MUSTACHE_VAR_REGEX) => {
+  if (!str) return [];
+  const matchedVariableTokens = str.match(varRegex) || [];
+  return splitContentByOrderedVarTokens(matchedVariableTokens, str).filter(
+    (segment) => segment !== ''
+  );
+};
+
+/**
+ * Extracts unique variable names from `{{var}}` (and, when using default capture, `{#var#}`) strings.
+ *
+ * @param {string} templateStr
+ * @param {RegExp} [captureRegex] - regex with a single capture group for the var name; if omitted, also scans DLT `{#…#}`.
+ * @returns {string[]}
+ */
+export const extractTemplateVariables = (templateStr = '', captureRegex) => {
+  if (!templateStr) return [];
+  const variables = [];
+  const addUniqueVar = (name) => {
+    const trimmedName = (name || '').trim();
+    if (trimmedName && !variables.includes(trimmedName)) variables.push(trimmedName);
+  };
+  const mustacheRe = ensureGlobalRegexForExecLoop(
+    captureRegex || MUSTACHE_VAR_NAME_CAPTURE_REGEX,
+  );
+  let match;
+  while ((match = mustacheRe.exec(templateStr)) !== null) {
+    addUniqueVar(match?.[1]);
+  }
+  if (!captureRegex) {
+    const dltRe = ensureGlobalRegexForExecLoop(DLT_VAR_BODY_CAPTURE_REGEX);
+    let dltMatch;
+    while ((dltMatch = dltRe.exec(templateStr)) !== null) {
+      addUniqueVar(dltMatch?.[1] || 'var');
+    }
+  }
+  return variables;
+};
+
+/**
+ * Looks up the inner name of a `{{name}}` or `{#name#}` token in a flat key→value map.
+ * Handles both exact matches and dot-path suffixes (e.g. `tag.FORMAT_1` → name `FORMAT_1`).
+ * Returns the resolved string value, or `undefined` if not found / blank.
+ */
+function resolveUserVarForToken(segment, userVarMap) {
+  if (!userVarMap || typeof userVarMap !== 'object') return undefined;
+  const mMustache = segment.match(MUSTACHE_TOKEN_INNER_NAME_REGEX);
+  const mDlt = segment.match(DLT_HASH_TOKEN_INNER_NAME_REGEX);
+  const innerName = ((mMustache ? mMustache[1] : (mDlt ? mDlt[1] : '')) ?? '').trim();
+  if (!innerName) return undefined;
+  const direct = userVarMap[innerName];
+  if (direct != null && String(direct).trim() !== '') return String(direct);
+  const hit = Object.keys(userVarMap).find((k) => k === innerName || k.endsWith(`.${innerName}`));
+  if (hit != null && userVarMap[hit] != null && String(userVarMap[hit]).trim() !== '') return String(userVarMap[hit]);
+  return undefined;
+}
+
+/**
+ * SMS / DLT template preview: replace `{{…}}` / `{#…#}` tokens using `varMapData` keys `${token}_${index}`.
+ * Used by SmsTraiEdit (RCS SMS fallback) and UnifiedPreview fallback SMS bubble.
+ * DLT `{#…#}`: empty / unset slot values show the raw token (matches DLT preview UX); mustache `{{…}}` still
+ * resolves to empty when the slot is cleared.
+ *
+ * @param {string} templateStr
+ * @param {Object} varMapData - Slot map (`${token}_${index}` → value)
+ * @param {Object|null} [userVarMap] - Optional Test & Preview custom values; used as fallback when a slot
+ *   is absent or blank. When omitted the function behaves identically to its original two-argument form.
+ */
+export const getFallbackResolvedContent = (templateStr = '', varMapData = {}, userVarMap = null) => {
+  const fallbackVarSlotMap = varMapData ?? {};
+  const templateSegments = splitTemplateVarString(templateStr, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  return templateSegments
+    .map((segment, segmentIndex) => {
+      const isVariableToken = typeof segment === 'string' && isAnyTemplateVarToken(segment);
+      if (!isVariableToken) return segment;
+      const slotKey = `${segment}_${segmentIndex}`;
+      if (Object.prototype.hasOwnProperty.call(fallbackVarSlotMap, slotKey)) {
+        const slotValue = fallbackVarSlotMap[slotKey];
+        if (isDltHashVarToken(segment)) {
+          if (slotValue == null || String(slotValue).trim() === '') {
+            if (userVarMap) { const uv = resolveUserVarForToken(segment, userVarMap); if (uv !== undefined) return uv; }
+            return segment;
+          }
+          return String(slotValue);
+        }
+        if (slotValue != null && String(slotValue).trim() !== '') return String(slotValue);
+        if (userVarMap) { const uv = resolveUserVarForToken(segment, userVarMap); if (uv !== undefined) return uv; }
+        return '';
+      }
+      if (userVarMap) { const uv = resolveUserVarForToken(segment, userVarMap); if (uv !== undefined) return uv; }
+      if (isDltHashVarToken(segment)) return segment;
+      return '';
+    })
+    .join('');
+};
+
+/**
+ * SMS fallback **card** (library list): show filled slot text; if a slot is empty, unset, or
+ * whitespace-only, show the raw `{{…}}` / `{#…#}` token so “save without labels” still shows
+ * `{#var#}` in the card. {@link getFallbackResolvedContent} keeps DLT placeholders in preview when
+ * slots are empty; mustache cleared slots can still render empty.
+ */
+export const getFallbackResolvedContentForCardDisplay = (templateStr = '', varMapData = {}) => {
+  const fallbackVarSlotMap = varMapData ?? {};
+  const templateSegments = splitTemplateVarString(templateStr, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  return templateSegments
+    .map((segment, segmentIndex) => {
+      const isVariableToken = typeof segment === 'string' && isAnyTemplateVarToken(segment);
+      if (!isVariableToken) return segment;
+      const slotKey = `${segment}_${segmentIndex}`;
+      if (Object.prototype.hasOwnProperty.call(fallbackVarSlotMap, slotKey)) {
+        const slotValue = fallbackVarSlotMap[slotKey];
+        if (slotValue == null) return segment;
+        const str = String(slotValue);
+        if (str.trim() === '') return segment;
+        return str;
+      }
+      return segment;
+    })
+    .join('');
+};