@capillarytech/creatives-library 9.0.26 → 9.0.29-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,53 @@
     }
   }
   .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;
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  .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 +137,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,18 +150,77 @@
   }
   .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;
   }
   .rcs-image-dimensions-label{
     margin-top: 1.25rem;
+    margin-bottom: $CAP_SPACE_08;
   }
   .rcs-template-title-input {
     .rcs-edit-disabled {
@@ -95,12 +231,14 @@
   }
   .rcs-template-title-label {
     margin-top: 1.25rem;
+    margin-bottom: $CAP_SPACE_08;
   }
   #rcs-template-message-label .ant-btn.cap-button-v2 {
     height: 32px;
   }
   #rcs-template-message-label {
     margin-top: 1.25rem;
+    margin-bottom: $CAP_SPACE_08;
   }
   .rcs-container-image {
     .image-container {
@@ -113,6 +251,297 @@
   #rcs-dimension-select{
     width: 100%;
   }
+
+  .rcs-carousel-section {
+    margin-top: $CAP_SPACE_12;
+  }
+
+  .rcs-carousel-dimension-section {
+    margin-top: 1.25rem;
+  }
+
+  // Edit mode: the readonly Template Type block right above (.rcs-creative-name-readonly)
+  // already has its own margin-bottom — stacking these two top-margins on top of that
+  // (flex prevents them from collapsing into it) left an oversized gap before Card height.
+  .rcs-carousel-section--readonly-above {
+    margin-top: 0;
+
+    .rcs-carousel-dimension-section {
+      margin-top: 0;
+    }
+  }
+
+  .rcs-carousel-selected-dimension {
+    display: block;
+    margin-top: 8px;
+    color: $FONT_COLOR_03;
+  }
+
+  .rcs-carousel-dimension-label {
+    display: inline-block;
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  #rcs-carousel-height-select,
+  #rcs-carousel-width-select {
+    width: 100%;
+  }
+
+  .rcs-carousel-tab {
+    margin-top: 0.75rem;
+
+    // Tab list (.ant-tabs-nav-wrap) defaults to flex:auto and stretches to fill the row,
+    // pushing tabBarExtraContent (the "+" add-card button) to the far right edge. Size it
+    // to its own content instead so "+" sits right next to the last tab (Figma reference).
+    .ant-tabs-nav-wrap {
+      flex: none;
+    }
+
+    // .ant-tabs-nav already centers its direct children (antd default), but antd
+    // also gives .ant-tabs-nav-wrap AND .ant-tabs-nav-operations (an always-present,
+    // just visually-hidden, third sibling for the overflow "more" dropdown)
+    // `align-self: stretch` — forcing them to the FULL bar height, while
+    // .ant-tabs-extra-content has no such override and centers at its own natural
+    // (shorter) height. So a divider centered inside the stretched tab list and a
+    // divider centered inside the un-stretched extra-content land at different Y
+    // positions even though each is individually "centered" — in its own box.
+    // Cancel the stretch so every direct child centers the same way.
+    .ant-tabs-nav {
+      align-items: center;
+
+      > .ant-tabs-nav-wrap,
+      > .ant-tabs-nav-operations {
+        align-self: auto;
+      }
+    }
+
+    // antd ALWAYS renders `.ant-tabs-nav-operations` as a flex sibling between the
+    // tab list and the right extra-content (it holds the overflow "more" dropdown).
+    // With no overflow it's only `visibility:hidden`, so it's invisible but STILL
+    // occupies a flex slot with real width — that phantom slot is the extra gap
+    // showing up before the "|" and "+". Collapse it to zero width when hidden so
+    // the divider sits the same distance from "2" as the 1|2 divider does from "1".
+    .ant-tabs-nav-operations.ant-tabs-nav-operations-hidden {
+      width: 0;
+      padding: 0;
+      margin: 0;
+      border: none;
+    }
+
+    // .ant-tabs-extra-content itself is only a flex ITEM (antd sets `flex: none`
+    // on it), not a flex CONTAINER — its own children (the CapDivider and the
+    // "+" button's tooltip-wrapper span) fall back to inline layout, where
+    // CapDivider's antd default `vertical-align: middle` aligns it to the
+    // surrounding line box rather than to the button, which is what was making
+    // the "|" and "+" drift out of alignment with each other. Make it an
+    // explicit flex row so both children center against each other directly.
+    .ant-tabs-extra-content {
+      display: flex;
+      align-items: center;
+    }
+
+    // Vertical divider between the tabs and "+": antd default (0.9em) reads too short.
+    // Also pin its own margin explicitly (antd's default didn't match the gap
+    // used for the divider between tab numbers below), which was making this
+    // divider float away from "2" instead of sitting the same distance from it
+    // as the 1|2 divider sits from "1".
+    // 12px each side = the same visual gap the 1|2 divider has (that one uses a
+    // 24px margin-left with the divider pseudo offset to its center, i.e. ~12px
+    // of clear space on each side). Keep these equal so all three gaps match.
+    .ant-tabs-extra-content .ant-divider-vertical {
+      height: $CAP_SPACE_24;
+      margin: 0 $CAP_SPACE_12;
+    }
+
+    // Same divider treatment between each numbered tab (1 | 2 | ...), not just
+    // before the "+" button (Figma reference). antd's own `.ant-tabs-tab` rule
+    // already applies `margin: 0 0 0 var(--ant-tabs-horizontal-item-gutter)`
+    // (~32px) to every tab — our earlier `margin-right` was ADDING to that
+    // instead of replacing it, stacking both gaps into one huge gutter before
+    // "2". Zero out antd's own margin first so this is the only gap in play.
+    .ant-tabs-tab {
+      margin: 0 !important;
+    }
+
+    // `:not(:last-of-type)` matched more than intended: antd renders
+    // `.ant-tabs-ink-bar` as another <div> sibling AFTER the last tab inside the
+    // same nav list, so that ink-bar div — not tab "2" — was `:last-of-type`,
+    // leaving tab "2" wrongly matched and given its own extra divider on top of
+    // the real one before "+". Target adjacency to a PRECEDING tab instead
+    // (`.ant-tabs-tab + .ant-tabs-tab`), which only ever matches actual tabs
+    // regardless of what non-tab siblings antd adds elsewhere in the list.
+    .ant-tabs-tab + .ant-tabs-tab {
+      position: relative;
+      margin-left: $CAP_SPACE_24 !important;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: -$CAP_SPACE_12;
+        transform: translateY(-50%);
+        width: 1px;
+        height: $CAP_SPACE_24;
+        background-color: $CAP_G07;
+      }
+    }
+
+    // The "+" wrapper reuses .button-disabled-tooltip-wrapper from CapActionButton
+    // (display: inline-block; margin-top: 1.25rem) — that margin was meant for a
+    // different context and pushes the "+" button below the tab row/divider baseline
+    // here. Re-align it inline with the tabs and vertical divider.
+    .button-disabled-tooltip-wrapper {
+      display: inline-flex;
+      align-items: center;
+      margin-top: 0;
+    }
+  }
+
+  .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;
+
+    // Card title / Card body text headers sit directly above their input —
+    // CapHeader itself has no bottom margin, so without this the input hugged
+    // the header text with no gap.
+    .cap-header-v2 {
+      margin-bottom: $CAP_SPACE_08;
+    }
+  }
+
+  .rcs-carousel-media-selection {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    align-items: center;
+  }
+
+  .rcs-carousel-media-selection-heading {
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  // Carousel upload previews: keep media preview compact (CapImageUpload uses height=400 by default)
+  .rcs-carousel-media-upload {
+    padding-top: $CAP_SPACE_20;
+
+    // Edit mode: the readonly Media type block right above (.rcs-creative-name-readonly)
+    // already has its own margin-bottom, plus .rcs-image-dimensions-label's own
+    // margin-top — stacking this padding-top on top of both left an oversized gap.
+    &.rcs-carousel-media-upload--readonly-above {
+      padding-top: 0;
+
+      // Only the first heading (Upload Video, or Image) sits right below the
+      // readonly block above — the video variant's second heading (Upload
+      // Thumbnail) still needs its own margin-top to separate it from the
+      // video upload widget above it.
+      > .rcs-image-dimensions-label:first-child {
+        margin-top: 0;
+      }
+    }
+    .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;
+    }
+  }
+
+  // The divider's own margin already provides the gap before "+" — this button's
+  // extra left padding was stacking on top of that margin, making the gap after
+  // the divider visibly bigger than the gap before it (between "2" and the
+  // divider). Drop the left padding so both sides of the divider match; keep a
+  // little on the right as breathing room since nothing follows "+".
+  .add-carousel-content-button {
+    padding: 0 $CAP_SPACE_08 0 0;
+    display: inline-flex;
+    align-items: center;
+  }
 }
 .rcs-fallback-preview > .cap-slide-box-v2-container.size-r{
     min-width: 430px;
@@ -120,6 +549,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,18 @@ 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',
+  },
+  rcsCarouselAddCardDisabledTooltip: {
+    id: `${prefix}.rcsCarouselAddCardDisabledTooltip`,
+    defaultMessage: 'Please set-up the first card before creating the next ones',
+  },
+  rcsCarouselMaxCardTooltip: {
+    id: `${prefix}.rcsCarouselMaxCardTooltip`,
+    defaultMessage: 'RCS carousel cannot contain more than {max} content cards.',
+  },
   templateNamePlaceholder: {
     id: `${prefix}.templateNamePlaceholder`,
     defaultMessage: 'Enter template name',
@@ -232,15 +252,15 @@ export default defineMessages({
   },
   text_message: {
     id: `${prefix}.text_message`,
-    defaultMessage: 'text message',
+    defaultMessage: 'Text message',
   },
   richCard: {
     id: `${prefix}.richCard`,
-    defaultMessage: 'rich card',
+    defaultMessage: 'Rich card',
   },
   carousel: {
     id: `${prefix}.carousel`,
-    defaultMessage: 'carousel',
+    defaultMessage: 'Carousel',
   },
   rcsDoneBtnToolTip: {
     id: `${prefix}.rcsDoneBtnToolTip`,
@@ -262,6 +282,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',
@@ -271,17 +295,18 @@ export default defineMessages({
     defaultMessage:
       'This is to deliver an RCS message as an SMS message to end users whose phones do not support RCS',
   },
-  fallbackMsgLenError: {
-    id: `${prefix}.fallbackMsgLenError`,
-    defaultMessage: 'Only 1 SMS (160 characters) allowed for fallback sms',
-  },
   fallbackTextAreaLabel: {
     id: `${prefix}.fallbackTextAreaLabel`,
     defaultMessage: 'SMS message',
   },
   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`,
@@ -291,18 +316,6 @@ export default defineMessages({
     id: `${prefix}.addSmsCreative`,
     defaultMessage: 'Add SMS creative',
   },
-  rcsDltTitle: {
-    id: `${prefix}.rcsDltTitle`,
-    defaultMessage: 'SMS creative templates',
-  },
-  rcsDltDesc: {
-    id: `${prefix}.rcsDltDesc`,
-    defaultMessage: 'Select any of the existing templates',
-  },
-  dltEditHeader: {
-    id: `${prefix}.dltEditHeader`,
-    defaultMessage: 'Edit SMS',
-  },
   rcsCreateNotification: {
     id: `${prefix}.rcsCreateNotification`,
     defaultMessage: 'RCS template created successfully',
@@ -457,7 +470,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 +501,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})',
+  },
+});