npm - @capillarytech/creatives-library - Versions diffs - 8.0.359-alpha.0 → 8.0.359-alpha.1 - Mend

@capillarytech/creatives-library 8.0.359-alpha.0 → 8.0.359-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

package/constants/unified.js CHANGED Viewed

@@ -160,6 +160,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',
@@ -197,3 +215,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/index.html CHANGED Viewed

@@ -23,6 +23,7 @@
     <!-- End Google Tag Manager -->
     <script>try{Typekit.load({ async: true });}catch(e){console.log(e)}</script>
     <title>Capillary - Creatives</title>
+    <script>try{window.APP_ENV=__ENV_OBJECT__;}catch(e){window.APP_ENV={};}</script>
   </head>
   <body>
     <noscript>

package/package.json CHANGED Viewed

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

package/services/tests/api.test.js CHANGED Viewed

@@ -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/cdnTransformation.js CHANGED Viewed

@@ -422,14 +422,86 @@ export function removeAllCdnLocalStorageItems() {
 }
 /**
- *
- * @param {*} configsResponse
+ * Safe JSON.parse — returns fallback if value is empty or malformed.
+ * Used to parse the JSON-string env vars (qualityCfg, mapping, s3CdnMap) injected via window.APP_ENV.
+ */
+function safeJsonParse(value, fallback) {
+  if (!value) return fallback;
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    return fallback;
+  }
+}
+/**
+ * Reads CDN config from window.APP_ENV (injected at container startup by entrypoint.sh)
+ * and populates localStorage via saveCdnConfigs — same shape as the legacy API response.
+ *
+ * Returns true if env config was found and applied, false otherwise (saga falls back to API).
+ *
+ * In deployed containers, window.APP_ENV is populated → no API call. In local dev
+ * (`npm start`), window.APP_ENV is empty → returns false → saga falls back to the API
+ * (legacy path, retained for the rollout window).
+ *
+ * Closes the VAPT info-disclosure surface (CAP-183204) by eliminating the
+ * /getCdnTransformationConfig API response in production.
+ */
+export function initCdnConfigFromEnv() {
+  try {
+    const env = (typeof window !== 'undefined' && window.APP_ENV) || {};
+    // All four fields are required to construct a CDN URL. If any is missing,
+    // partial config would silently make every getCdnUrl call fall through to the
+    // raw S3 URL. Return false so the saga falls back to the API (which may still
+    // have the values during the cluster-by-cluster rollout window).
+    if (!env.CDN_HOSTNAME
+        || !env.CDN_IMG_TRANSFORMATION_URL_SUFFIX
+        || !env.CREATIVE_ASSETS_BUCKET_PATH
+        || !env.S3_CDN_MAP) {
+      return false;
+    }
+    // Parse and validate S3_CDN_MAP before proceeding; malformed or empty map
+    // means CDN lookups would silently fail, so fall back to the API instead.
+    const parsedS3CdnMap = safeJsonParse(env.S3_CDN_MAP, null);
+    if (
+      !parsedS3CdnMap
+      || typeof parsedS3CdnMap !== 'object'
+      || Array.isArray(parsedS3CdnMap)
+      || !Object.keys(parsedS3CdnMap).length
+    ) {
+      return false;
+    }
+    saveCdnConfigs({
+      hostname: env.CDN_HOSTNAME,
+      transformationUrlSuffix: env.CDN_IMG_TRANSFORMATION_URL_SUFFIX,
+      bucketPath: env.CREATIVE_ASSETS_BUCKET_PATH,
+      qualityCfg: safeJsonParse(env.CDN_IMG_QUALITY_CFG, {}),
+      overrideEmailQuality: env.OVERRIDE_IMAGE_QUALITY === 'true',
+      overrideEmailQualityMapping: safeJsonParse(env.IMAGE_QUALITY_MAPPING, []),
+      s3CdnMap: parsedS3CdnMap,
+    });
+    return true;
+  } catch (e) {
+    Bugsnag.leaveBreadcrumb('initCdnConfigFromEnv failed to apply window.APP_ENV');
+    Bugsnag.notify(e, (event) => {
+      event.severity = 'error';
+    });
+    return false;
+  }
+}
+/**
+ *
+ * @param {*} configsResponse
  * This util function saves the getCdnConfigs response into the local storage.
  * The following response items are mapped into the following keys in local storage:
  * hostname -> CREATIVES_CDN_BASE_URL
  * qualityCfg ->CREATIVES_CDN_QUALITY_CONFIG
  * transformationUrlSuffix -> CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX
- *
+ *
  * 1. If configsReponse is empty. All above mentioned keys are deleted from localstorage.
  * 2. If any one of the above keys is missing. The respective keys are deleted from localstorage.
  * 3. Else it is saved into the localstorage.

package/utils/commonUtils.js CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 add = (name) => {
+    const n = (name || '').trim();
+    if (n && !variables.includes(n)) variables.push(n);
+  };
+  const mustacheRe = ensureGlobalRegexForExecLoop(
+    captureRegex || MUSTACHE_VAR_NAME_CAPTURE_REGEX,
+  );
+  let match;
+  while ((match = mustacheRe.exec(templateStr)) !== null) {
+    add(match?.[1]);
+  }
+  if (!captureRegex) {
+    const dltRe = ensureGlobalRegexForExecLoop(DLT_VAR_BODY_CAPTURE_REGEX);
+    let dltMatch;
+    while ((dltMatch = dltRe.exec(templateStr)) !== null) {
+      add(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('');
+};

package/utils/tests/cdnTransformation.test.js CHANGED Viewed

@@ -546,6 +546,133 @@ describe("cdnTransformationTests", () => {
     });
   });
+  describe("initCdnConfigFromEnv()", () => {
+    afterEach(() => {
+      delete window.APP_ENV;
+    });
+    it("returns false when window.APP_ENV is undefined", () => {
+      delete window.APP_ENV;
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    const completeEnv = {
+      CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+      CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+      CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+      OVERRIDE_IMAGE_QUALITY: "false",
+      CDN_IMG_QUALITY_CFG: "{}",
+      IMAGE_QUALITY_MAPPING: "[]",
+      S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+    };
+    it.each([
+      ["CDN_HOSTNAME"],
+      ["CDN_IMG_TRANSFORMATION_URL_SUFFIX"],
+      ["CREATIVE_ASSETS_BUCKET_PATH"],
+      ["S3_CDN_MAP"],
+    ])("returns false when required field %s is missing", (missingKey) => {
+      window.APP_ENV = { ...completeEnv };
+      delete window.APP_ENV[missingKey];
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it.each([
+      ["CDN_HOSTNAME"],
+      ["CDN_IMG_TRANSFORMATION_URL_SUFFIX"],
+      ["CREATIVE_ASSETS_BUCKET_PATH"],
+      ["S3_CDN_MAP"],
+    ])("returns false when required field %s is empty string", (emptyKey) => {
+      window.APP_ENV = { ...completeEnv, [emptyKey]: "" };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it("populates localStorage and returns true for a complete env", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "true",
+        CDN_IMG_QUALITY_CFG: '{"EMAIL":65,"DEFAULT":70}',
+        IMAGE_QUALITY_MAPPING: '[[30,90],[80,85]]',
+        S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+      };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(true);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe("https://storage.crm.n.content-cdn.io");
+      expect(localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")).toBe("cdn-cgi/image");
+      expect(localStorage.getItem("CREATIVES_S3_BUCKET_PATH")).toBe("intouch_creative_assets");
+      expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe('{"EMAIL":65,"DEFAULT":70}');
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY")).toBe("true");
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING")).toBe("[[30,90],[80,85]]");
+      expect(JSON.parse(localStorage.getItem("S3_CDN_MAP"))).toEqual({
+        "host.s3.amazonaws.com": { cdn_host: "cdn.example.com", bucket_path: "x" },
+      });
+    });
+    it("uses fallback values for malformed optional JSON env vars (qualityCfg, mapping)", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "false",
+        CDN_IMG_QUALITY_CFG: "not-valid-json{{",
+        IMAGE_QUALITY_MAPPING: "also-broken",
+        S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+      };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(true);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe("https://storage.crm.n.content-cdn.io");
+    });
+    it("returns false when S3_CDN_MAP is malformed JSON", () => {
+      window.APP_ENV = { ...completeEnv, S3_CDN_MAP: "}{" };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it.each([
+      ["empty object", "{}"],
+      ["array", '["a","b"]'],
+      ["null", "null"],
+      ["number", "42"],
+      ["string", '"foo"'],
+    ])("returns false when S3_CDN_MAP parses to %s (not a non-empty object)", (_label, value) => {
+      window.APP_ENV = { ...completeEnv, S3_CDN_MAP: value };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it("treats OVERRIDE_IMAGE_QUALITY values other than the string \"true\" as false", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "no",
+        CDN_IMG_QUALITY_CFG: "{}",
+        IMAGE_QUALITY_MAPPING: "[]",
+        S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+      };
+      cdnUtils.initCdnConfigFromEnv();
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY")).toBe(undefined);
+    });
+    it("returns false and notifies Bugsnag when window.APP_ENV access throws", () => {
+      // Force the `window.APP_ENV` read inside initCdnConfigFromEnv to throw,
+      // which exercises the function's outer catch block.
+      Object.defineProperty(window, "APP_ENV", {
+        get() { throw new Error("APP_ENV access boom"); },
+        configurable: true,
+      });
+      const breadcrumbSpy = jest.spyOn(Bugsnag, "leaveBreadcrumb");
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+      expect(breadcrumbSpy).toHaveBeenCalledWith(
+        "initCdnConfigFromEnv failed to apply window.APP_ENV"
+      );
+      expect(bugsnagSpy).toHaveBeenCalled();
+    });
+  });
   describe("getEmailImageOverrideQuality()",()=>{
     it("Should return quality of last element in array if file size is greater than max provided in array",()=>{
       localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");