@capillarytech/creatives-library 8.0.329 → 8.0.330-alpha.1

package/v2Containers/Rcs/index.scss

@@ -141,9 +141,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;
@@ -155,11 +157,66 @@
     width: 220px;
     height: 103px;
   }
+
+  // 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;
   }
@@ -193,6 +250,140 @@
   #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: 6px;
+  }
+
+  #rcs-carousel-height-select,
+  #rcs-carousel-width-select {
+    width: 100%;
+  }
+
+  .rcs-carousel-tab {
+    margin-top: 12px;
+  }
+
+  .rcs-carousel-card {
+    margin-top: 12px;
+
+    // Match carousel card header: title left, icon-only delete right (Figma / product reference).
+    &.cap-card-v2.ant-card {
+      .ant-card-head {
+        min-height: 48px;
+        padding: 0 $CAP_SPACE_16;
+        border-bottom: 1px solid #e8e8e8;
+      }
+
+      .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 {
+        // Match $CAP_SECONDARY base from cap-ui-library (avoid map-get — node-sass can mis-resolve imported maps).
+        color: #2466ea;
+        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: 12px;
+  }
+
+  .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: 560px;
+    }
+
+    .image-container img {
+      width: 100%;
+      height: auto !important;
+      max-height: 240px;
+      object-fit: contain;
+      display: block;
+    }
+  }
+
+  .rcs-carousel-card-divider {
+    margin: $CAP_SPACE_24 0;
+  }
+
+  .rcs-content-section-divider {
+    margin: $CAP_SPACE_28 0;
+  }
+
+  .rcs-edit-template-message-static-textarea {
+    background: #fafafa;
+    color: #888;
+
+    // Ensure styles apply to underlying textarea/input for CapInput TextArea.
+    textarea,
+    .ant-input {
+      background: #fafafa;
+      color: #888;
+    }
+  }
+
+  .add-carousel-content-button {
+    padding: 0 $CAP_SPACE_08;
+  }
 }
 .rcs-fallback-preview > .cap-slide-box-v2-container.size-r{
     min-width: 430px;

package/v2Containers/Rcs/index.scss.rej

@@ -0,0 +1,74 @@
+diff a/app/v2Containers/Rcs/index.scss b/app/v2Containers/Rcs/index.scss	(rejected hunks)
+@@ -5,109 +5,54 @@
+   position: fixed;
+   bottom: 0;
+   width: 100%;
++  margin-left: -32px;
+   padding: $CAP_SPACE_32 $CAP_SPACE_24;
++  margin-top: 40px;
+   z-index: 1;
+   .ant-btn {
+     margin-right: $CAP_SPACE_16;
+   }
+-
+   .rcs-test-preview-btn {
+     margin-left: $CAP_SPACE_08;
+   }
+ }
+ 
+ .cap-rcs-creatives {
+-
+-
+-
+-
++  .template-status-container {
++    width: 100%;
++    display: flex;
++    flex-direction: column;
++    align-items: flex-start;
++    margin-bottom: 1.25rem; // match spacing used across label sections (eg title/message labels)
+ 
++    .ant-alert {
++      width: 100%;
++      margin-top: $CAP_SPACE_08; // match label -> field spacing like other sections
+     }
+   }
+ 
++  .rcs-scroll-div {
++    margin-bottom: 150px;
+   }
++  // Match WhatsApp visual spacing between editor column and preview column
+   .rcs-preview-container {
++    padding-left: $CAP_SPACE_24;
++    display: flex;
++    justify-content: center;
+   }
+   .rcs-optional-label {
++    margin-left: 8px;
+     color: $FONT_COLOR_03;
+     font-weight: normal;
+   }
+   .rcs_text_area_wrapper {
+     position: relative;
+   }
+   .rcs-button{
+     display: inline-grid;
+   }
+-
+-
+-
+-
++  .rcs-button-label{
++    margin-bottom: 17px;
+   }
+   .disabled-button{
+      opacity: 0.5;
+@@ -202,12 +288,6 @@
+     width: 430px;
+ }
+ 
+-
+-
+ .rcs-fallback-preview {
+   &__header {
+     color: $CAP_G01;

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',
@@ -39,6 +47,10 @@ export default defineMessages({
     id: `${prefix}.btnLabel`,
     defaultMessage: 'Buttons',
   },
+  carouselMediaVideoOption:{
+    id: `${prefix}.carouselMediaVideoOption`,
+    defaultMessage: 'Video',
+  },
   btnTypeNone: {
     id: `${prefix}.btnTypeNone`,
     defaultMessage: 'None',
@@ -194,6 +206,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',
@@ -466,7 +482,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`,
@@ -496,4 +513,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

@@ -1,6 +1,24 @@
 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,
+} 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)
@@ -88,6 +106,8 @@ export function getLibrarySmsFallbackApiBaselineFromTemplateData(templateData) {
   };
 }
 
+export { extractRegisteredSenderIdsFromSmsFallbackRecord } from '../../utils/commonUtils';
+
 export function pickFirstSmsFallbackTemplateString(sms = {}) {
   if (!sms || typeof sms !== 'object') return '';
   const keys = [