@capillarytech/creatives-library 8.0.345-alpha.13 → 8.0.345-alpha.15

package/v2Containers/Rcs/utils.js

@@ -1,11 +1,28 @@
 import React from 'react';
 import {CapIcon, CapImage, CapLabel, CapDivider } from '@capillarytech/cap-ui-library';
-import { RCS } from './constants';
+import {
+  RCS,
+  RCS_MEDIA_TYPES,
+  RCS_NUMERIC_VAR_NAME_REGEX,
+  RCS_REGEX_META_CHARS_PATTERN,
+  RCS_STRIP_MUSTACHE_DELIMITERS_REGEX,
+} from './constants';
 import './index.scss';
 // import { formatMessage } from '../../../utils/intl';
 import messages from './messages';
-import { STATUS_OPTIONS, RCS_BUTTON_TYPES, RCS_STATUSES, RCS_MEDIA_TYPES } from './constants';
-
+import {
+  STATUS_OPTIONS,
+  RCS_BUTTON_TYPES,
+  RCS_STATUSES,
+  rcsVarRegex,
+  rcsVarTestRegex,
+} from './constants';
+import {
+  splitTemplateVarString,
+  COMBINED_SMS_TEMPLATE_VAR_REGEX,
+  isAnyTemplateVarToken,
+} from '../../utils/templateVarUtils';
+import { pickRcsCardVarMappedEntries } from './rcsLibraryHydrationUtils';
 
 export const getRcsStatusType = (status) => {
   switch (status) {
@@ -33,6 +50,388 @@ export const getTemplateStatusType = (templateStatus) => {
   }
 };
 
+/** Localized label for a carousel video thumbnail size (width × height in px). */
+export const formatRcsCarouselVideoThumbnailLabel = (formatMessage, dimensionEntry) => {
+  if (!dimensionEntry) return '';
+  const { width, height } = dimensionEntry;
+  return formatMessage(messages.rcsCarouselVideoThumbnailLabel, { width, height });
+};
+
+/**
+ * Global RegExp matching `{{numericVarName}}` in RCS template strings.
+ * `numericVarName` is escaped for regex metacharacters.
+ */
+export function buildRcsNumericMustachePlaceholderRegex(numericVarName) {
+  const escaped = String(numericVarName).replace(RCS_REGEX_META_CHARS_PATTERN, '\\$&');
+  return new RegExp(`\\{\\{${escaped}\\}\\}`, 'g');
+}
+
+export function normalizeCardVarMapped(rawCardVarMapped, orderedTagNames) {
+  if (!rawCardVarMapped || typeof rawCardVarMapped !== 'object') return {};
+  const normalizedMap = {};
+  const templateVarNamesInOrder = Array.isArray(orderedTagNames) ? orderedTagNames : null;
+  const hasOrderedSlots =
+    Boolean(templateVarNamesInOrder?.length);
+  Object.entries(rawCardVarMapped).forEach(([entryKey, entryValue]) => {
+    const trimmedValue = entryValue == null ? '' : String(entryValue).trim();
+    const entryKeyIsNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(String(entryKey));
+    const mustacheInnerMatch = trimmedValue.match(/^\{\{([^}]+)\}\}$/);
+    const innerFromMustache =
+      mustacheInnerMatch?.[1] != null ? String(mustacheInnerMatch[1]).trim() : null;
+
+    if (innerFromMustache !== null && entryKeyIsNumericSlot) {
+      const slotIndexZeroBased = parseInt(String(entryKey), 10) - 1;
+      const expectedVarForSlot =
+        hasOrderedSlots
+        && slotIndexZeroBased >= 0
+        && slotIndexZeroBased < templateVarNamesInOrder.length
+          ? templateVarNamesInOrder[slotIndexZeroBased]
+          : null;
+      const innerMatchesSlotToken =
+        expectedVarForSlot != null && innerFromMustache === expectedVarForSlot;
+      const legacyUnorderedPlaceholder = !hasOrderedSlots;
+      /* Library: slot "1" + {{user_id_b64}} when token is user_id_b64 → empty semantic. With ordered
+       * slots, only clear when inner matches that slot's template token; else keep (e.g. {{1}}+{{FirstName}}). */
+      const clearNumericSlotMustacheAsUnfilled =
+        !RCS_NUMERIC_VAR_NAME_REGEX.test(innerFromMustache)
+        && (legacyUnorderedPlaceholder || innerMatchesSlotToken);
+      if (clearNumericSlotMustacheAsUnfilled) {
+        const outputKey = innerFromMustache;
+        const existingValue = normalizedMap[outputKey];
+        if (existingValue != null && String(existingValue).trim() !== '') {
+          return;
+        }
+        normalizedMap[outputKey] = '';
+        return;
+      }
+      if (RCS_NUMERIC_VAR_NAME_REGEX.test(innerFromMustache)) {
+        const outputKey = innerFromMustache;
+        const existingValue = normalizedMap[outputKey];
+        if (existingValue != null && String(existingValue).trim() !== '') {
+          return;
+        }
+        normalizedMap[outputKey] = '';
+        return;
+      }
+    }
+
+    if (innerFromMustache !== null && !entryKeyIsNumericSlot) {
+      if (innerFromMustache === String(entryKey)) {
+        const existingValue = normalizedMap[entryKey];
+        if (existingValue != null && String(existingValue).trim() !== '') {
+          return;
+        }
+        normalizedMap[entryKey] = '';
+        return;
+      }
+    }
+
+    if (entryKeyIsNumericSlot && templateVarNamesInOrder?.length) {
+      const slotIndexZeroBased = parseInt(String(entryKey), 10) - 1;
+      if (slotIndexZeroBased >= 0 && slotIndexZeroBased < templateVarNamesInOrder.length) {
+        normalizedMap[templateVarNamesInOrder[slotIndexZeroBased]] = trimmedValue;
+        return;
+      }
+    }
+    normalizedMap[entryKey] = trimmedValue;
+  });
+  return normalizedMap;
+}
+
+/**
+ * Semantic names that appear in both title and description (e.g. `{{adv}}` in header and body).
+ * Those slots must not share one semantic `cardVarMapped` key — otherwise VarSegment inputs mirror.
+ */
+export function getRcsSemanticVarNamesSpanningTitleAndDesc(
+  templateTitle,
+  templateDesc,
+  rcsVarRegex,
+) {
+  const getVarNameFromToken = (token = '') => token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+  const titleTokens = templateTitle?.match(rcsVarRegex) ?? [];
+  const descTokens = templateDesc?.match(rcsVarRegex) ?? [];
+  const titleNames = new Set(titleTokens.map(getVarNameFromToken).filter(Boolean));
+  const descNames = new Set(descTokens.map(getVarNameFromToken).filter(Boolean));
+  const spanning = new Set();
+  titleNames.forEach((n) => {
+    if (descNames.has(n)) spanning.add(n);
+  });
+  return spanning;
+}
+
+/**
+ * Rebuild `cardVarMapped` so keys match the current title/description tokens (title tokens first,
+ * then description), in order. Values are taken from the matching key, else from legacy slot
+ * `1`, `2`, … by index. If there are no `{{...}}` tokens, returns a shallow clone of `raw`.
+ */
+export function coalesceCardVarMappedToTemplate(
+  sourceCardVarMap,
+  templateTitle,
+  templateDesc,
+  rcsVarRegex,
+) {
+  const getVarNameFromToken = (token = '') => token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+  const templateVarTokens = [
+    ...(templateTitle?.match(rcsVarRegex) ?? []),
+    ...(templateDesc?.match(rcsVarRegex) ?? []),
+  ];
+  const lookupSourceMap =
+    sourceCardVarMap != null && typeof sourceCardVarMap === 'object' ? sourceCardVarMap : {};
+  if (!templateVarTokens.length) {
+    return { ...lookupSourceMap };
+  }
+  const semanticNamesSpanningTitleAndDesc = getRcsSemanticVarNamesSpanningTitleAndDesc(
+    templateTitle,
+    templateDesc,
+    rcsVarRegex,
+  );
+  const coalescedMap = { ...lookupSourceMap };
+  const seenSemanticVarNames = new Set();
+  templateVarTokens.forEach((token, slotIndexZeroBased) => {
+    const semanticVarName = getVarNameFromToken(token);
+    if (!semanticVarName) return;
+    const numericSlotKey = String(slotIndexZeroBased + 1);
+    const isRepeatOfSemanticName = seenSemanticVarNames.has(semanticVarName);
+    const skipSharedSemanticLookup =
+      isRepeatOfSemanticName && semanticNamesSpanningTitleAndDesc.has(semanticVarName);
+    let valueFromSource = lookupSourceMap[numericSlotKey];
+    if (valueFromSource === undefined || valueFromSource === null) {
+      if (!skipSharedSemanticLookup) {
+        valueFromSource = lookupSourceMap[semanticVarName];
+      }
+    }
+    if (valueFromSource === undefined || valueFromSource === null) {
+      valueFromSource = lookupSourceMap[String(slotIndexZeroBased + 1)];
+    }
+    if (valueFromSource === undefined || valueFromSource === null) {
+      valueFromSource = lookupSourceMap[slotIndexZeroBased + 1];
+    }
+    const trimmedSlotValue = valueFromSource == null ? '' : String(valueFromSource).trim();
+    coalescedMap[numericSlotKey] = trimmedSlotValue;
+    if (!seenSemanticVarNames.has(semanticVarName)) {
+      seenSemanticVarNames.add(semanticVarName);
+      coalescedMap[semanticVarName] = trimmedSlotValue;
+    }
+  });
+  return coalescedMap;
+}
+
+/**
+ * Resolve the personalization value for a variable slot — aligned with createPayload:
+ * per-slot numeric keys `1`, `2`, … win over legacy semantic keys when both exist (duplicate
+ * `{{name}}` in title+desc). If semantic is explicitly cleared to '', that still wins over a
+ * stale numeric value (see tests) — except in embedded library / journey mode (`isLibraryMode`).
+ *
+ * In library mode, campaign payloads often set semantic keys to '' while numeric slot `1`,`2`,…
+ * still holds the value selected in the library; prefer that so VarSegment prepopulates.
+ *
+ * When a numeric slot is present but only whitespace / empty (common after hydration), do not
+ * treat it as authoritative — fall through to the semantic key so preview and payload match the
+ * tag the user selected (e.g. `1: ''` but `promotion_points: '{{newTag}}'`).
+ *
+ * @param {boolean} [omitSemanticFallback=false] When true, do not read `varName` on the map (and do
+ * not apply the early `semanticEmpty` short-circuit). Use when the same semantic name appears in
+ * both title and description so each global slot stays independent.
+ */
+export function resolveCardVarMappedSlotValue(
+  cardVarMapped,
+  varName,
+  globalSlotIndexZeroBased,
+  isLibraryMode = false,
+  omitSemanticFallback = false,
+) {
+  const varMap = cardVarMapped ?? {};
+  const slotKey = String(globalSlotIndexZeroBased + 1);
+  const semanticEmpty =
+    Object.prototype.hasOwnProperty.call(varMap, varName)
+    && String(varMap[varName] ?? '') === '';
+  const slotNonEmpty =
+    Object.prototype.hasOwnProperty.call(varMap, slotKey)
+    && String(varMap[slotKey] ?? '').trim() !== '';
+
+  if (semanticEmpty && !(isLibraryMode && slotNonEmpty) && !omitSemanticFallback) {
+    return '';
+  }
+  let numericSlotValue = '';
+  if (Object.prototype.hasOwnProperty.call(varMap, slotKey)) {
+/** Text-only RCS card: editor shows a single "Text message" field (description); title row is hidden. */
+    numericSlotValue = String(varMap[slotKey] ?? '');
+  } else if (Object.prototype.hasOwnProperty.call(varMap, globalSlotIndexZeroBased + 1)) {
+    numericSlotValue = String(varMap[globalSlotIndexZeroBased + 1] ?? '');
+  }
+  if (numericSlotValue.trim() !== '') {
+    return numericSlotValue;
+  }
+  if (!omitSemanticFallback && Object.prototype.hasOwnProperty.call(varMap, varName)) {
+    return String(varMap[varName] ?? '');
+  }
+  return '';
+}
+
+/** Text-only RCS card: editor shows a single “Text message” field (description); title row is hidden. */
+export function isRcsTextOnlyCardMediaType(mediaType) {
+  return (
+    mediaType === RCS_MEDIA_TYPES.NONE
+    || String(mediaType || '').toUpperCase() === 'TEXT'
+  );
+}
+
+/**
+ * Resolve RCS card title/description for TemplatePreview (e.g. campaign slidebox preview).
+ * Mirrors `resolveTemplateWithMap` in the Rcs editor: title vars use global slots 0..n-1, then description.
+ * For text-only cards (`textOnlyCard`), ignore persisted `title` and resolve description from slot 0 — matches
+ * the editor where only the message body is shown.
+ */
+export function resolveRcsCardPreviewStrings(
+  title,
+  description,
+  cardVarMapped,
+  isLibraryMode = false,
+  textOnlyCard = false,
+) {
+  const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
+  const getVarNameFromToken = (token = '') =>
+    token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+  const semanticNamesSpanningTitleAndDesc = textOnlyCard
+    ? new Set()
+    : getRcsSemanticVarNamesSpanningTitleAndDesc(title, description, rcsVarRegex);
+
+  const resolveTemplateWithMap = (str = '', slotOffset = 0) => {
+    if (!str) return '';
+    const arr = splitTemplateVarStringRcs(str);
+    let varOrdinal = 0;
+    return arr
+      .map((elem) => {
+        if (rcsVarTestRegex.test(elem)) {
+          const key = getVarNameFromToken(elem);
+          const globalSlot = slotOffset + varOrdinal;
+          varOrdinal += 1;
+          const omitSemantic = semanticNamesSpanningTitleAndDesc.has(key);
+          const v = resolveCardVarMappedSlotValue(
+            cardVarMapped,
+            key,
+            globalSlot,
+            isLibraryMode,
+            omitSemantic,
+          );
+          if (v == null || String(v).trim() === '') return elem;
+          return String(v);
+        }
+        return elem;
+      })
+      .join('');
+  };
+
+  const effectiveTitle = textOnlyCard ? '' : String(title || '');
+  const titleVarCount = textOnlyCard
+    ? 0
+    : (effectiveTitle.match(rcsVarRegex) || []).length;
+  return {
+    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, 0),
+    rcsDesc: resolveTemplateWithMap(String(description || ''), titleVarCount),
+  };
+}
+
+/**
+ * Campaign consumer payload: replace each card's `title` / `description` with VarSegment-resolved
+ * tag strings (same rules as {@link resolveRcsCardPreviewStrings}). Root `rcsCardVarMapped` merges
+ * with per-card `cardVarMapped` for resolution; emitted `cardVarMapped` omits SMS-fallback slot keys
+ * (root/nested merged with {@link pickRcsCardVarMappedEntries} per side).
+ */
+export function mapRcsCardContentForConsumerWithResolvedTags(
+  cardContentArray,
+  rootRcsCardVarMapped,
+  isFullMode,
+) {
+  const rootRecord =
+    rootRcsCardVarMapped != null && typeof rootRcsCardVarMapped === 'object'
+      ? rootRcsCardVarMapped
+      : {};
+  const list = Array.isArray(cardContentArray) ? cardContentArray : [];
+  const isLibraryMode = isFullMode !== true;
+  return list.map((card) => {
+    if (!card || typeof card !== 'object') return card;
+    const nested =
+      card.cardVarMapped != null && typeof card.cardVarMapped === 'object'
+        ? card.cardVarMapped
+        : {};
+    const rootClean = pickRcsCardVarMappedEntries(rootRecord);
+    const nestedClean = pickRcsCardVarMappedEntries(nested);
+    const merged = { ...rootClean, ...nestedClean };
+    const textOnly = isRcsTextOnlyCardMediaType(card.mediaType);
+    const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+      card.title ?? '',
+      card.description ?? '',
+      merged,
+      isLibraryMode,
+      textOnly,
+    );
+    const { cardVarMapped: _drop, ...cardRest } = card;
+    return {
+      ...cardRest,
+      title: rcsTitle,
+      description: rcsDesc,
+      ...(Object.keys(nestedClean).length > 0 ? { cardVarMapped: nestedClean } : {}),
+    };
+  });
+}
+
+/**
+ * Before save: strip only legacy numeric self-placeholders (`{{1}}`, `{{2}}`, …) mistakenly stored as
+ * slot values. Preserve semantic tokens like `{{FirstName}}` from TagList — those are valid mappings.
+ */
+export function sanitizeCardVarMappedValue(val) {
+  if (val == null) return '';
+  const trimmedDisplayString = String(val).trim();
+  if (/^\{\{\d+\}\}$/.test(trimmedDisplayString)) return '';
+  return String(val);
+}
+
+/**
+ * Same completion rule as SmsTraiEdit RCS fallback — used by `isDisableDone` from
+ * `smsFallbackData.rcsSmsFallbackVarMapped` + template string.
+ * Every variable token (DLT {#…#} or mustache {{…}}) must have a non-empty trimmed value in the map.
+ *
+ * Slot keys are usually `${token}_${segmentIndex}` (same as VarSegmentMessageEditor). Persisted / API
+ * payloads may use `${token}_${varOrdinal}` with a 1-based occurrence index (see SmsTraiEdit init).
+ * We try segment index first, then ordinal — so e.g. template `{#var#}` (segment index 0) still matches
+ * map `{#var#}_1`.
+ *
+ * @param {string} templateText
+ * @param {Record<string, string>} [varSlotValueMap={}]
+ * @returns {boolean}
+ */
+export function areAllRcsSmsFallbackVarSlotsFilled(templateText, varSlotValueMap = {}) {
+  if (!templateText || typeof templateText !== 'string') return true;
+  const segments = splitTemplateVarString(templateText, COMBINED_SMS_TEMPLATE_VAR_REGEX);
+  const hasVarToken = segments.some(
+    (segment) =>
+      typeof segment === 'string'
+      && isAnyTemplateVarToken(segment),
+  );
+  if (!hasVarToken) return true;
+  let varOrdinal = 0;
+  return segments.every((segment, segmentIndex) => {
+    if (
+      typeof segment !== 'string'
+      || !isAnyTemplateVarToken(segment)
+    ) return true;
+    varOrdinal += 1;
+    const indexKey = `${segment}_${segmentIndex}`;
+    const ordinalKey = `${segment}_${varOrdinal}`;
+    let mappedSlotValue;
+    if (Object.prototype.hasOwnProperty.call(varSlotValueMap, indexKey)) {
+      mappedSlotValue = varSlotValueMap[indexKey];
+    } else if (Object.prototype.hasOwnProperty.call(varSlotValueMap, ordinalKey)) {
+      mappedSlotValue = varSlotValueMap[ordinalKey];
+    } else {
+      mappedSlotValue = undefined;
+    }
+    if (mappedSlotValue == null) return false;
+    return String(mappedSlotValue).trim() !== '';
+  });
+}
+
 export const getRCSContent = (template) => {
   const renderRcsSuggestionsPreview = (rcsSuggestions) => {
     const renderArray = [];
@@ -72,6 +471,7 @@ export const getRCSContent = (template) => {
         content: {
           [RCS]: {
             rcsContent: {
+              cardType = '',
               cardContent = [{}],
               cardSettings = {},
             } = {},
@@ -84,9 +484,75 @@ export const getRCSContent = (template) => {
     media = {},
     description,
     title,
+    mediaType,
     suggestions = [],
   } = cardContent[0];
+  const isCarousel =
+    (cardType || '').toString().toLowerCase() === 'carousel' ||
+    (cardContent || []).length > 1;
+  const isTextOnlyCard = isRcsTextOnlyCardMediaType(mediaType);
   const mediaPreview = media?.thumbnailUrl ? media.thumbnailUrl : media.mediaUrl;
+
+  const renderCarouselListingPreview = () => {
+    const cards = Array.isArray(cardContent) ? cardContent : [];
+    if (!cards.length) return null;
+    const cardsToShow = cards.slice(0, 3); // enough to show a "peek" of next card
+    return (
+      <div className="scroll-container">
+        {cardsToShow.map((c, idx) => {
+          const m = c?.media || {};
+          const isVideo = (m?.mediaType || '').toString().toUpperCase() === RCS_MEDIA_TYPES.VIDEO;
+          const thumbUrl = m?.thumbnailUrl;
+          const mediaUrl = m?.mediaUrl;
+          // Avoid rendering an <img src="...mp4"> when a video doesn't have a thumbnail.
+          const url = thumbUrl ? thumbUrl : (isVideo ? '' : mediaUrl);
+          return (
+            <div
+              key={`rcs-carousel-listing-${idx}-${url || ''}`}
+              className="whatsapp-carousel-container"
+              role="group"
+            >
+              <div className="whatsapp-carousel-card">
+                {url && (
+                  <CapImage
+                    src={url}
+                    className="whatsapp-image"
+                  />
+                )}
+                {!url && isVideo && (
+                  <div
+                    className="whatsapp-image video-preview rcs-video-preview-placeholder"
+                  >
+                    <CapLabel type="label9" className="rcs-video-preview-label">
+                      Video preview
+                    </CapLabel>
+                  </div>
+                )}
+                <span
+                  className={`${url ? 'whatsapp-message-with-media' : 'whatsapp-message-without-media'}`}
+                >
+                  <CapLabel type="label9" className="whatsapp-carousel-body">
+                    {c?.title || ''}
+                    {c?.description ? `\n${c?.description}` : ''}
+                  </CapLabel>
+                </span>
+                {Array.isArray(c?.suggestions) && c.suggestions.length > 0 && (
+                  <>
+                    {renderRcsSuggestionsPreview(c.suggestions)}
+                  </>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  if (isCarousel) {
+    return renderCarouselListingPreview();
+  }
+
   return (
     <div className="cap-rcs-creatives">
       {mediaPreview && (
@@ -95,13 +561,15 @@ export const getRCSContent = (template) => {
           className="rcs-listing-image"
         />
       )}
-      <CapLabel
-        type="label19"
-        className="rcs-listing-content title"
-        fontWeight="bold"
-      >
-        {title}
-      </CapLabel>
+      {!isTextOnlyCard && (
+        <CapLabel
+          type="label19"
+          className="rcs-listing-content title"
+          fontWeight="bold"
+        >
+          {title}
+        </CapLabel>
+      )}
       <CapLabel type="label19" className="rcs-listing-content desc">
         {description}
       </CapLabel>
@@ -109,4 +577,3 @@ export const getRCSContent = (template) => {
     </div>
   );
 };
-