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

package/v2Containers/Rcs/index.scss

@@ -5,18 +5,58 @@
   position: fixed;
   bottom: 0;
   width: 100%;
-  margin-left: -32px;
+  margin-left: -2rem;
   padding: $CAP_SPACE_32 $CAP_SPACE_24;
-  margin-top: 40px;
+  margin-top: 2.5rem;
   z-index: 1;
   .ant-btn {
     margin-right: $CAP_SPACE_16;
   }
+
+  .rcs-test-preview-btn {
+    margin-left: $CAP_SPACE_08;
+  }
+}
+
+// Shared between the standalone form (.cap-rcs-creatives) and the slidebox header.
+.rcs-creative-name-readonly {
+  margin-bottom: $CAP_SPACE_24;
+}
+
+.rcs-creative-name-value {
+  margin-top: $CAP_SPACE_08;
+  font-weight: 400;
 }
 
 .cap-rcs-creatives {
+
   .rcs-scroll-div {
-    margin-bottom: 150px;
+    margin-bottom: 9.375rem;
+  }
+
+  &.rcs-edit-mode {
+    .rcs-scroll-div {
+      margin-bottom: 15.625rem;
+    }
+
+    .rcs-edit-template-message-input {
+      background-color: $CAP_G10;
+      padding: $CAP_SPACE_12 $CAP_SPACE_16;
+    }
+
+    .rcs-edit-template-message-split {
+      margin-bottom: $CAP_SPACE_08;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: $FONT_COLOR_03;
+      font-weight: 500;
+    }
+  }
+
+  /* Keep message box text lighter across RCS flows */
+  .rcs-edit-template-message-split {
+    color: $FONT_COLOR_03;
+    font-weight: 500;
   }
   .rcs-preview-container {
     .cap-row-v2 {
@@ -24,18 +64,52 @@
     }
   }
   .rcs-optional-label {
-    margin-left: 8px;
+    margin-left: $CAP_SPACE_08;
     color: $FONT_COLOR_03;
     font-weight: normal;
   }
   .rcs_text_area_wrapper {
     position: relative;
   }
+  .rcs-edit-template-message-input .ant-input,
+  .rcs-edit-template-message-input textarea.ant-input {
+    border-color: $CAP_G07;
+    box-shadow: none;
+    min-height: 2.5rem;
+    padding-top: $CAP_SPACE_08;
+    padding-bottom: $CAP_SPACE_08;
+    overflow: hidden;
+  }
+  .rcs-edit-template-message-input .ant-input:focus,
+  .rcs-edit-template-message-input .ant-input:active,
+  .rcs-edit-template-message-input textarea.ant-input:focus,
+  .rcs-edit-template-message-input textarea.ant-input:active {
+    border-color: $CAP_G07;
+    box-shadow: none;
+    outline: none;
+  }
   .rcs-button{
     display: inline-grid;
   }
-  .rcs-button-label{
-    margin-bottom: 17px;
+  .rcs-form-field-caption {
+    margin-bottom: $CAP_SPACE_16;
+  }
+
+  .rcs-form-section-heading {
+    display: flex;
+    margin-top: $CAP_SPACE_20;
+  }
+
+  .rcs-image-upload--top-spacing {
+    padding-top: $CAP_SPACE_20;
+  }
+
+  .rcs-dimension-select--bottom-spacing {
+    margin-bottom: $CAP_SPACE_20;
+  }
+
+  .rcs-fallback-section-divider {
+    margin: $CAP_SPACE_28 0;
   }
   .disabled-button{
      opacity: 0.5;
@@ -62,9 +136,11 @@
     overflow: hidden;
     &.title{
       -webkit-line-clamp: 1;
+      line-clamp: 1;
     }
     &.desc{
       -webkit-line-clamp: 5;
+      line-clamp: 5;
     }
     &.rcs-button-text{
       padding-top: 13px;
@@ -73,13 +149,71 @@
   }
   .rcs-listing-image {
     margin-bottom: 8px;
-    width: 220px;
-    height: 103px;
+    width: 100%;
+    max-height: 7.357rem;
+    object-fit: cover;
+    display: block;
+  }
+
+  // Templates listing preview (RCS): carousel should show a "peek" of next card like WhatsApp listing.
+  &.rcs-template-listing-preview {
+    &.is-carousel {
+      .rcs-listing-carousel-scroll {
+        overflow-x: auto;
+        display: flex;
+        padding-top: $CAP_SPACE_06;
+        padding-right: $CAP_SPACE_06;
+        white-space: nowrap;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        // Listing should show a peek (no horizontal scroll interaction needed)
+        overflow: hidden;
+      }
+
+      .rcs-listing-carousel-card {
+        padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
+        border-radius: $CAP_SPACE_06;
+        background-color: $CAP_WHITE;
+        width: 80%;
+        flex-shrink: 0;
+        margin-right: $CAP_SPACE_04;
+        white-space: normal;
+        text-align: left;
+      }
+
+      .rcs-listing-carousel-img {
+        width: 100%;
+        height: 6.4375rem; // match rcs-listing-image height (103px)
+        object-fit: cover;
+        display: block;
+        margin-bottom: $CAP_SPACE_08;
+      }
+
+      .rcs-listing-carousel-title,
+      .rcs-listing-carousel-desc {
+        display: block;
+        padding: 0 $CAP_SPACE_12;
+      }
+      .rcs-listing-carousel-desc {
+        margin-top: $CAP_SPACE_04;
+      }
+    }
   }
   .fallback-sms-length {
     margin-top: 13px;
     float: right;
   }
+  .rcs-character-count {
+    color: $FONT_COLOR_03;
+  }
+
+  .rcs-carousel-character-count-row {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: $CAP_SPACE_08;
+  }
   .rcs-fallback-len-error{
     margin-top: 8px;
   }
@@ -113,6 +247,147 @@
   #rcs-dimension-select{
     width: 100%;
   }
+
+  .rcs-carousel-section {
+    margin-top: $CAP_SPACE_12;
+  }
+
+  .rcs-carousel-dimension-section {
+    margin-top: 1.25rem;
+  }
+
+  .rcs-carousel-selected-dimension {
+    display: block;
+    margin-top: 8px;
+    color: $FONT_COLOR_03;
+  }
+
+  .rcs-carousel-dimension-label {
+    display: inline-block;
+    margin-bottom: 0.375rem;
+  }
+
+  #rcs-carousel-height-select,
+  #rcs-carousel-width-select {
+    width: 100%;
+  }
+
+  .rcs-carousel-tab {
+    margin-top: 0.75rem;
+  }
+
+  .rcs-carousel-card {
+    margin-top: 0.75rem;
+
+    // Match carousel card header: title left, icon-only delete right (Figma / product reference).
+    &.cap-card-v2.ant-card {
+      .ant-card-head {
+        min-height: 3rem;
+        padding: 0 $CAP_SPACE_16;
+        border-bottom: 1px solid $CAP_G12;
+      }
+
+      .ant-card-head-title {
+        padding: $CAP_SPACE_12 0;
+        font-weight: 600;
+        color: $CAP_G01;
+      }
+
+      .ant-card-extra {
+        padding: $CAP_SPACE_08 0;
+      }
+    }
+
+    .rcs-carousel-card-delete.ant-btn.cap-button-v2 {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: auto;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      border: none;
+      box-shadow: none;
+      color: $CAP_G01;
+
+      &:not(:disabled):hover {
+        color: $FONT_COLOR_05;
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      &:disabled {
+        color: rgba(0, 0, 0, 0.25);
+        background: transparent;
+      }
+    }
+
+    .rcs-carousel-delete-tooltip-wrap.button-disabled-tooltip-wrapper {
+      display: inline-flex;
+      align-items: center;
+      cursor: not-allowed;
+    }
+  }
+
+  .rcs-carousel-card-row {
+    margin-bottom: $CAP_SPACE_12;
+  }
+
+  .rcs-carousel-media-selection {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    align-items: center;
+  }
+
+  // Carousel upload previews: keep media preview compact (CapImageUpload uses height=400 by default)
+  .rcs-carousel-media-upload {
+    padding-top: $CAP_SPACE_20;
+    .image-container {
+      background-image: none;
+      border: 0;
+      width: 100%;
+      max-width: 35rem;
+    }
+
+    .image-container img {
+      width: 100%;
+      height: auto !important;
+      max-height: 15rem;
+      object-fit: contain;
+      display: block;
+    }
+  }
+
+  .rcs-carousel-card-divider {
+    margin: $CAP_SPACE_24 0;
+  }
+
+  .rcs-image-upload-with-top-padding {
+    padding-top: $CAP_SPACE_20;
+  }
+
+  .rcs-dlt-edit-icon {
+    margin-right: $CAP_SPACE_08;
+  }
+
+  .rcs-content-section-divider {
+    margin: $CAP_SPACE_28 0;
+  }
+
+  .rcs-edit-template-message-static-textarea {
+    background: $CAP_G21;
+    color: #888;
+
+    // Ensure styles apply to underlying textarea/input for CapInput TextArea.
+    textarea,
+    .ant-input {
+      background: $CAP_G21;
+      color: #888;
+    }
+  }
+
+  .add-carousel-content-button {
+    padding: 0 $CAP_SPACE_08;
+  }
 }
 .rcs-fallback-preview > .cap-slide-box-v2-container.size-r{
     min-width: 430px;
@@ -120,6 +395,12 @@
     width: 430px;
 }
 
+// SMS fallback slidebox / tag popover: see v2Components/SmsFallback/index.scss (loaded with SmsFallback)
+
+.template-status-container {
+  margin-bottom: $CAP_SPACE_24;
+}
+
 .rcs-button-cta{
   margin-top: 1.25rem;
   margin-bottom: 0.75rem;

package/v2Containers/Rcs/messages.js

@@ -6,6 +6,14 @@ export default defineMessages({
     id: `${prefix}.mediaLabel`,
     defaultMessage: 'Media',
   },
+  mediaTypeLabel: {
+    id: `${prefix}.mediaTypeLabel`,
+    defaultMessage: 'Media type',
+  },
+  carouselMediaVideoOption: {
+    id: `${prefix}.carouselMediaVideoOption`,
+    defaultMessage: 'Video',
+  },
   approvedStatusMsg: {
     id: `${prefix}.approvedStatusMsg`,
     defaultMessage: 'This template has been approved',
@@ -194,6 +202,10 @@ export default defineMessages({
     id: `${prefix}.disabledCarouselTooltip`,
     defaultMessage: 'Not yet enabled. Coming soon!',
   },
+  rcsCarouselMinCardDeleteTooltip: {
+    id: `${prefix}.rcsCarouselMinCardDeleteTooltip`,
+    defaultMessage: 'At least 1 card needs to be added in the carousel template',
+  },
   templateNamePlaceholder: {
     id: `${prefix}.templateNamePlaceholder`,
     defaultMessage: 'Enter template name',
@@ -262,6 +274,10 @@ export default defineMessages({
     id: `${prefix}.fallbackLabel`,
     defaultMessage: 'Fallback SMS message',
   },
+  smsFallbackOptional: {
+    id: `${prefix}.smsFallbackOptional`,
+    defaultMessage: 'Fallback SMS message (Optional)',
+  },
   fallbackDesc: {
     id: `${prefix}.fallbackDesc`,
     defaultMessage: 'We would suggest to add fallback SMS',
@@ -281,7 +297,12 @@ export default defineMessages({
   },
   fallbackMsgPlaceholder: {
     id: `${prefix}.fallbackMsgPlaceholder`,
-    defaultMessage: 'Enter the text message content for fallback SMS',
+    defaultMessage: 'Add labels or text',
+  },
+  /** Shown only when a {{…}} slot has no value — not the saved text (that uses the input value). */
+  rcsVarSlotPlaceholder: {
+    id: `${prefix}.rcsVarSlotPlaceholder`,
+    defaultMessage: 'Add labels or text',
   },
   totalCharacters: {
     id: `${prefix}.totalCharacters`,
@@ -457,7 +478,8 @@ export default defineMessages({
   },
   unknownCharactersError: {
     id: `${prefix}.unknownCharactersError`,
-    defaultMessage: 'Only alphanumeric characters and underscore are allowed in custom param. Spaces/other special characters are not allowed.',
+    defaultMessage:
+      'Only letters, numbers, underscores, and dots are allowed in custom param (e.g. tag.FORMAT_1). Spaces and other special characters are not allowed.',
   },
   emptyVariableError: {
     id: `${prefix}.emptyVariableError`,
@@ -487,4 +509,13 @@ export default defineMessages({
     id: `${prefix}.rcsTestPreviewDisabledTooltip`,
     defaultMessage: 'Preview and test is only available after the template is approved.',
   },
-});
+  reUpload: {
+    id: `${prefix}.reUpload`,
+    defaultMessage: 'Reupload',
+  },
+  /** Carousel video card thumbnail size label (see RCS_CAROUSEL_VIDEO_THUMBNAIL_DIMENSIONS). */
+  rcsCarouselVideoThumbnailLabel: {
+    id: `${prefix}.rcsCarouselVideoThumbnailLabel`,
+    defaultMessage: 'Thumbnail ({width} × {height})',
+  },
+});

package/v2Containers/Rcs/rcsLibraryHydrationUtils.js

@@ -0,0 +1,227 @@
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
+import {
+  RCS_NUMERIC_VAR_NAME_REGEX,
+  RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX,
+  REGEX_SPECIAL_CHARS_ESCAPE_PATTERN,
+  RCS_MUSTACHE_WRAPPED_REGEX,
+} from './constants';
+
+/** RCS card `cardVarMapped` / `rcsCardVarMapped` only (SMS fallback slot keys stay on `smsFallBackContent`). */
+export function pickRcsCardVarMappedEntries(record) {
+  if (record == null || typeof record !== 'object' || Array.isArray(record)) return {};
+  return Object.fromEntries(
+    Object.entries(record).filter(([k]) => {
+      const key = String(k);
+      return (
+        RCS_NUMERIC_VAR_NAME_REGEX.test(key)
+        || RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX.test(key)
+      );
+    }),
+  );
+}
+
+/**
+ * Nested `versions…smsFallBackContent` and root `smsFallBackContent` (CreativesContainer mirror)
+ * can diverge. Merge explicitly (avoid `get(..., {}) || root` — `{}` is truthy and blocks fallback).
+ *
+ * When both exist, **nested wins on overlap**: the canonical RCS path is what `createPayload` / submit
+ * update; the root mirror can lag behind campaign parent state and would otherwise keep old
+ * `message` / `rcsSmsFallbackVarMapped` in hydration and approval payloads.
+ */
+export function mergeRcsSmsFallBackContentFromDetails(details) {
+  if (!details || typeof details !== 'object') return {};
+  const nestedSmsFallback = details?.versions?.base?.content?.RCS?.smsFallBackContent;
+  const rootSmsFallback = details?.smsFallBackContent;
+  const nestedRecord =
+    nestedSmsFallback != null && typeof nestedSmsFallback === 'object' ? nestedSmsFallback : {};
+  const rootRecord =
+    rootSmsFallback != null && typeof rootSmsFallback === 'object' ? rootSmsFallback : {};
+  return { ...rootRecord, ...nestedRecord };
+}
+
+/**
+ * Merge SMS fallback slot maps from API/templateData (`apiShape`) and editor state (`localShape`).
+ * Spreading `{ ...api, ...local }` lets `rcsSmsFallbackVarMapped: {}` on local wipe a populated API map,
+ * which keeps Done disabled in DLT campaigns until fixed.
+ */
+export function mergeRcsSmsFallbackVarMapLayers(apiShape = {}, localShape = {}) {
+  const readMap = (o) => {
+    if (!o || typeof o !== 'object') return {};
+    const camel = o.rcsSmsFallbackVarMapped;
+    const kebab = o['rcs-sms-fallback-var-mapped'];
+    const src =
+      camel && typeof camel === 'object'
+        ? camel
+        : kebab && typeof kebab === 'object'
+          ? kebab
+          : {};
+    return { ...src };
+  };
+  return { ...readMap(apiShape), ...readMap(localShape) };
+}
+
+/**
+ * First non-empty trimmed string for SMS fallback body used in DLT slot checks / payload `templateContent`.
+ * Prefer **raw** template fields before resolved `message` so `{#…#}` / `{{…}}` tokens are not lost
+ * when `message` is consumer-resolved text (campaigns).
+ */
+/**
+ * Whether an SMS fallback object carries template body, name, or var-map data (same rule as Rcs `createPayload`).
+ */
+export function hasMeaningfulSmsFallbackShape(smsFallback) {
+  return !!(
+    smsFallback
+    && (
+      String(
+        smsFallback.content
+        || smsFallback.templateContent
+        || smsFallback.message
+        || smsFallback.smsContent
+        || smsFallback.smsTemplateContent
+        || '',
+      ).trim() !== ''
+      || String(smsFallback.templateName || smsFallback.smsTemplateName || '').trim() !== ''
+      || (smsFallback.rcsSmsFallbackVarMapped && Object.keys(smsFallback.rcsSmsFallbackVarMapped).length > 0)
+      || (smsFallback[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]
+        && Object.keys(smsFallback[RCS_SMS_FALLBACK_VAR_MAPPED_PROP]).length > 0)
+    )
+  );
+}
+
+/**
+ * Library `templateData`: merged root + nested `smsFallBackContent` (nested wins), matching `createPayload`.
+ */
+export function getLibrarySmsFallbackApiBaselineFromTemplateData(templateData) {
+  const smsFromTemplateRoot = get(
+    templateData,
+    'versions.base.content.RCS.smsFallBackContent',
+  );
+  return {
+    ...(templateData?.smsFallBackContent && typeof templateData.smsFallBackContent === 'object'
+      ? templateData.smsFallBackContent
+      : {}),
+    ...(smsFromTemplateRoot && typeof smsFromTemplateRoot === 'object'
+      ? smsFromTemplateRoot
+      : {}),
+  };
+}
+
+export { extractRegisteredSenderIdsFromSmsFallbackRecord } from '../../utils/commonUtils';
+
+export function pickFirstSmsFallbackTemplateString(sms = {}) {
+  if (!sms || typeof sms !== 'object') return '';
+  const keys = [
+    'templateContent',
+    'smsTemplateContent',
+    'content',
+    'smsContent',
+    'message',
+  ];
+  for (let i = 0; i < keys.length; i += 1) {
+    const fieldValue = sms[keys[i]];
+    if (fieldValue == null) continue;
+    const trimmedValue = String(fieldValue).trim();
+    if (trimmedValue) return trimmedValue;
+  }
+  return '';
+}
+
+/**
+ * Campaign reopen: payloads often keep tag/label values on numeric keys (`"1"`, `"2"`, …) while
+ * semantic keys (`user_name`, …) stay `""`. Copy non-empty slot values onto empty semantic keys so
+ * VarSegment editors prepopulate after Done → Edit without changing global resolve behavior.
+ */
+export function syncCardVarMappedSemanticsFromSlots(
+  cardVarMappedInput,
+  templateTitle,
+  templateDesc,
+  rcsVarRegex,
+) {
+  const cardVarMappedSynced =
+    cardVarMappedInput != null && typeof cardVarMappedInput === 'object'
+      ? { ...cardVarMappedInput }
+      : {};
+  const getVarNameFromToken = (token = '') => token.replace(/^\{\{|\}\}$/g, '').trim();
+  const templateVarTokens = [
+    ...(templateTitle?.match(rcsVarRegex) ?? []),
+    ...(templateDesc?.match(rcsVarRegex) ?? []),
+  ];
+  templateVarTokens.forEach((token, slotIndexZeroBased) => {
+    const semanticVarName = getVarNameFromToken(token);
+    if (!semanticVarName) return;
+    const numericSlotKey = String(slotIndexZeroBased + 1);
+    const semanticValueTrimmed = String(cardVarMappedSynced[semanticVarName] ?? '').trim();
+    const numericSlotValueTrimmed = String(cardVarMappedSynced[numericSlotKey] ?? '').trim();
+    if (!semanticValueTrimmed && numericSlotValueTrimmed) {
+      cardVarMappedSynced[semanticVarName] = cardVarMappedSynced[numericSlotKey];
+    }
+  });
+  return cardVarMappedSynced;
+}
+
+/**
+ * Maps resolved campaign values back to `{{semanticKey}}` using `cardVarMapped` keys.
+ * Used when hydrating library/journey RCS edit from payloads without existing `{{…}}` tokens.
+ */
+export function getUnmappedDesc(str, mapping) {
+  if (!str) return '';
+  if (!mapping || Object.keys(mapping).length === 0) return str;
+  let result = str;
+  const replacements = [];
+  Object.entries(mapping).forEach(([key, value]) => {
+    const raw = (value ?? '').toString();
+    if (!raw || raw?.trim?.() === '') return;
+    const braced = RCS_MUSTACHE_WRAPPED_REGEX.test(raw) ? raw : `{{${raw}}}`;
+    replacements.push({ key, needle: raw });
+    if (braced !== raw) replacements.push({ key, needle: braced });
+  });
+  const seen = new Set();
+  const uniq = replacements
+    .filter(({ key, needle }) => {
+      const id = `${key}::${needle}`;
+      if (seen.has(id)) return false;
+      seen.add(id);
+      return true;
+    })
+    .sort((a, b) => (b.needle.length - a.needle.length));
+
+  uniq.forEach(({ key, needle }) => {
+    if (!needle) return;
+    const escaped = needle.replace(REGEX_SPECIAL_CHARS_ESCAPE_PATTERN, '\\$&');
+    const regex = new RegExp(escaped, 'g');
+    result = result.replace(regex, `{{${key}}}`);
+  });
+  return result;
+}
+
+export function hasRcsVarTokens(str, rcsVarRegex) {
+  return (str?.match(rcsVarRegex) ?? []).length > 0;
+}
+
+/**
+ * Library / journey: only run `getUnmappedDesc` when the loaded copy has no `{{…}}` tokens
+ * (e.g. fully resolved campaign text). If the API already has numeric or named slots, keep as-is.
+ */
+export function normalizeLibraryLoadedTitleDesc({
+  loadedTitle,
+  loadedDesc,
+  isFullMode,
+  cardVarMappedAfterHydration,
+  rcsVarRegex,
+}) {
+  const normalizedTitle =
+    !isFullMode
+    && !isEmpty(cardVarMappedAfterHydration)
+    && !hasRcsVarTokens(loadedTitle, rcsVarRegex)
+      ? getUnmappedDesc(loadedTitle, cardVarMappedAfterHydration)
+      : loadedTitle;
+  const normalizedDesc =
+    !isFullMode
+    && !isEmpty(cardVarMappedAfterHydration)
+    && !hasRcsVarTokens(loadedDesc, rcsVarRegex)
+      ? getUnmappedDesc(loadedDesc, cardVarMappedAfterHydration)
+      : loadedDesc;
+  return { normalizedTitle, normalizedDesc };
+}