@capillarytech/creatives-library 8.0.345-alpha.12 → 8.0.345-alpha.14

package/v2Containers/Rcs/utils.js

@@ -1,28 +1,11 @@
 import React from 'react';
 import {CapIcon, CapImage, CapLabel, CapDivider } from '@capillarytech/cap-ui-library';
-import {
-  RCS,
-  RCS_MEDIA_TYPES,
-  RCS_NUMERIC_VAR_NAME_REGEX,
-  RCS_REGEX_META_CHARS_PATTERN,
-  RCS_STRIP_MUSTACHE_DELIMITERS_REGEX,
-} from './constants';
+import { RCS } from './constants';
 import './index.scss';
 // import { formatMessage } from '../../../utils/intl';
 import messages from './messages';
-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';
+import { STATUS_OPTIONS, RCS_BUTTON_TYPES, RCS_STATUSES, RCS_MEDIA_TYPES } from './constants';
+
 
 export const getRcsStatusType = (status) => {
   switch (status) {
@@ -50,388 +33,6 @@ 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 = [];
@@ -471,7 +72,6 @@ export const getRCSContent = (template) => {
         content: {
           [RCS]: {
             rcsContent: {
-              cardType = '',
               cardContent = [{}],
               cardSettings = {},
             } = {},
@@ -484,75 +84,9 @@ 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 && (
@@ -561,15 +95,13 @@ export const getRCSContent = (template) => {
           className="rcs-listing-image"
         />
       )}
-      {!isTextOnlyCard && (
-        <CapLabel
-          type="label19"
-          className="rcs-listing-content title"
-          fontWeight="bold"
-        >
-          {title}
-        </CapLabel>
-      )}
+      <CapLabel
+        type="label19"
+        className="rcs-listing-content title"
+        fontWeight="bold"
+      >
+        {title}
+      </CapLabel>
       <CapLabel type="label19" className="rcs-listing-content desc">
         {description}
       </CapLabel>
@@ -577,3 +109,4 @@ export const getRCSContent = (template) => {
     </div>
   );
 };
+