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

package/v2Containers/Rcs/index.scss

@@ -5,56 +5,18 @@
   position: fixed;
   bottom: 0;
   width: 100%;
-  margin-left: -2rem;
+  margin-left: -32px;
   padding: $CAP_SPACE_32 $CAP_SPACE_24;
-  margin-top: 2.5rem;
+  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 {
-  .rcs-creative-name-readonly {
-    margin-bottom: $CAP_SPACE_24;
-  }
-
-  .rcs-creative-name-value {
-    margin-top: $CAP_SPACE_08;
-    font-weight: 400;
-  }
-
   .rcs-scroll-div {
-    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;
+    margin-bottom: 150px;
   }
   .rcs-preview-container {
     .cap-row-v2 {
@@ -62,52 +24,18 @@
     }
   }
   .rcs-optional-label {
-    margin-left: $CAP_SPACE_08;
+    margin-left: 8px;
     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-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;
+  .rcs-button-label{
+    margin-bottom: 17px;
   }
   .disabled-button{
      opacity: 0.5;
@@ -141,11 +69,9 @@
     overflow: hidden;
     &.title{
       -webkit-line-clamp: 1;
-      line-clamp: 1;
     }
     &.desc{
       -webkit-line-clamp: 5;
-      line-clamp: 5;
     }
     &.rcs-button-text{
       padding-top: 13px;
@@ -157,66 +83,10 @@
     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;
   }
@@ -250,140 +120,6 @@
   #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;
@@ -391,12 +127,6 @@
     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,14 +6,6 @@ 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',
@@ -47,10 +39,6 @@ export default defineMessages({
     id: `${prefix}.btnLabel`,
     defaultMessage: 'Buttons',
   },
-  carouselMediaVideoOption:{
-    id: `${prefix}.carouselMediaVideoOption`,
-    defaultMessage: 'Video',
-  },
   btnTypeNone: {
     id: `${prefix}.btnTypeNone`,
     defaultMessage: 'None',
@@ -206,10 +194,6 @@ 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',
@@ -278,10 +262,6 @@ 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',
@@ -301,12 +281,7 @@ export default defineMessages({
   },
   fallbackMsgPlaceholder: {
     id: `${prefix}.fallbackMsgPlaceholder`,
-    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',
+    defaultMessage: 'Enter the text message content for fallback SMS',
   },
   totalCharacters: {
     id: `${prefix}.totalCharacters`,
@@ -482,8 +457,7 @@ export default defineMessages({
   },
   unknownCharactersError: {
     id: `${prefix}.unknownCharactersError`,
-    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.',
+    defaultMessage: 'Only alphanumeric characters and underscore are allowed in custom param. Spaces/other special characters are not allowed.',
   },
   emptyVariableError: {
     id: `${prefix}.emptyVariableError`,
@@ -513,13 +487,4 @@ 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})',
-  },
-});
+});