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

package/v2Containers/Rcs/index.js

@@ -206,6 +206,7 @@ export const Rcs = (props) => {
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
     handleCloseTestAndPreview: propsHandleCloseTestAndPreview,
+    handleClose,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -621,31 +622,43 @@ export const Rcs = (props) => {
         <CapRow gutter={16} className="rcs-carousel-dimension-row">
           <CapColumn span={12}>
             <CapHeading type="h4" className="rcs-carousel-dimension-label">Card height</CapHeading>
-            <CapSelect
-              id="rcs-carousel-height-select"
-              value={selectedCarouselHeight}
-              onChange={(val) => {
-                // Like rich-card dimension changes: clear media so user re-uploads matching new dimensions.
-                resetCarouselMediaForAllCards();
-                setSelectedCarouselHeight(val);
-              }}
-              options={CAROUSEL_HEIGHT_OPTIONS}
-              disabled={isEditFlow || !isFullMode}
-            />
+            {isEditFlow ? (
+              <CapHeading type="h5" className="rcs-creative-name-value">
+                {CAROUSEL_HEIGHT_OPTIONS.find((option) => option.value === selectedCarouselHeight)?.label || '-'}
+              </CapHeading>
+            ) : (
+              <CapSelect
+                id="rcs-carousel-height-select"
+                value={selectedCarouselHeight}
+                onChange={(val) => {
+                  // Like rich-card dimension changes: clear media so user re-uploads matching new dimensions.
+                  resetCarouselMediaForAllCards();
+                  setSelectedCarouselHeight(val);
+                }}
+                options={CAROUSEL_HEIGHT_OPTIONS}
+                disabled={!isFullMode}
+              />
+            )}
           </CapColumn>
           <CapColumn span={12}>
             <CapHeading type="h4" className="rcs-carousel-dimension-label">Card width</CapHeading>
-            <CapSelect
-              id="rcs-carousel-width-select"
-              value={selectedCarouselWidth}
-              onChange={(val) => {
-                // Like rich-card dimension changes: clear media so user re-uploads matching new dimensions.
-                resetCarouselMediaForAllCards();
-                setSelectedCarouselWidth(val);
-              }}
-              options={CAROUSEL_WIDTH_OPTIONS}
-              disabled={isEditFlow || !isFullMode}
-            />
+            {isEditFlow ? (
+              <CapHeading type="h5" className="rcs-creative-name-value">
+                {CAROUSEL_WIDTH_OPTIONS.find((option) => option.value === selectedCarouselWidth)?.label || '-'}
+              </CapHeading>
+            ) : (
+              <CapSelect
+                id="rcs-carousel-width-select"
+                value={selectedCarouselWidth}
+                onChange={(val) => {
+                  // Like rich-card dimension changes: clear media so user re-uploads matching new dimensions.
+                  resetCarouselMediaForAllCards();
+                  setSelectedCarouselWidth(val);
+                }}
+                options={CAROUSEL_WIDTH_OPTIONS}
+                disabled={!isFullMode}
+              />
+            )}
           </CapColumn>
         </CapRow>
         {!!selectedCarousel && (
@@ -672,7 +685,7 @@ export const Rcs = (props) => {
               </CapHeading>
             </CapRow>
           )}
-          description={(
+          description={!isEditFlow && (
             <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
           )}
         />
@@ -771,7 +784,7 @@ export const Rcs = (props) => {
     // Default: IMAGE
     return (
       <>
-        <CapHeading type="h4" className="rcs-image-dimensions-label">Upload Image</CapHeading>
+        <CapHeading type="h4" className="rcs-image-dimensions-label">{formatMessage(messages.mediaImage)}</CapHeading>
         <CapImageUpload
           allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
           imgWidth={RCS_CAROUSEL_IMAGE_DIMENSIONS?.[dimKey]?.width}
@@ -838,41 +851,50 @@ export const Rcs = (props) => {
             className="rcs-carousel-card"
           >
             {/* Media selection should be at top of card */}
-            <CapRow className="rcs-carousel-media-selection">
-              <CapColumn className="rcs-carousel-media-selection-heading">
+            {isEditFlow ? (
+              <div className="rcs-creative-name-readonly">
                 <CapHeading type="h4">{formatMessage(messages.mediaTypeLabel)}</CapHeading>
-              </CapColumn>
-              <CapColumn>
-                <CapRadioGroup
-                  id={`rcs-carousel-media-radio-${index}`}
-                  options={mediaRadioOptions}
-                  value={card.mediaType}
-                  onChange={({ target: { value } }) => {
-                    // Reset media fields when switching type
-                    if (value === RCS_MEDIA_TYPES.IMAGE) {
-                      // Switching to IMAGE: clear video + thumbnail uploads so they don't auto-restore.
-                      clearCarouselCardMedia(index, { clearImage: false, clearVideo: true, clearThumb: true });
-                      handleCarouselValueChange(index, [
-                        { fieldName: 'mediaType', value },
-                        { fieldName: 'videoAsset', value: {} },
-                        { fieldName: 'thumbnailSrc', value: '' },
-                      ]);
-                    } else {
-                      // Switching to VIDEO: clear image upload so it doesn't auto-restore.
-                      clearCarouselCardMedia(index, { clearImage: true, clearVideo: false, clearThumb: false });
-                      handleCarouselValueChange(index, [
-                        { fieldName: 'mediaType', value },
-                        { fieldName: 'imageSrc', value: '' },
-                      ]);
-                    }
-                  }}
-                  disabled={isEditFlow || !isFullMode}
-                  className="rcs-radio"
-                />
-              </CapColumn>
-            </CapRow>
+                <CapHeading type="h5" className="rcs-creative-name-value">
+                  {mediaRadioOptions.find((option) => option.value === card.mediaType)?.label || '-'}
+                </CapHeading>
+              </div>
+            ) : (
+              <CapRow className="rcs-carousel-media-selection">
+                <CapColumn className="rcs-carousel-media-selection-heading">
+                  <CapHeading type="h4">{formatMessage(messages.mediaTypeLabel)}</CapHeading>
+                </CapColumn>
+                <CapColumn>
+                  <CapRadioGroup
+                    id={`rcs-carousel-media-radio-${index}`}
+                    options={mediaRadioOptions}
+                    value={card.mediaType}
+                    onChange={({ target: { value } }) => {
+                      // Reset media fields when switching type
+                      if (value === RCS_MEDIA_TYPES.IMAGE) {
+                        // Switching to IMAGE: clear video + thumbnail uploads so they don't auto-restore.
+                        clearCarouselCardMedia(index, { clearImage: false, clearVideo: true, clearThumb: true });
+                        handleCarouselValueChange(index, [
+                          { fieldName: 'mediaType', value },
+                          { fieldName: 'videoAsset', value: {} },
+                          { fieldName: 'thumbnailSrc', value: '' },
+                        ]);
+                      } else {
+                        // Switching to VIDEO: clear image upload so it doesn't auto-restore.
+                        clearCarouselCardMedia(index, { clearImage: true, clearVideo: false, clearThumb: false });
+                        handleCarouselValueChange(index, [
+                          { fieldName: 'mediaType', value },
+                          { fieldName: 'imageSrc', value: '' },
+                        ]);
+                      }
+                    }}
+                    disabled={!isFullMode}
+                    className="rcs-radio"
+                  />
+                </CapColumn>
+              </CapRow>
+            )}
 
-            <CapRow className="rcs-carousel-media-upload">
+            <CapRow className={`rcs-carousel-media-upload ${isEditFlow ? 'rcs-carousel-media-upload--readonly-above' : ''}`}>
               {renderCarouselCardMedia(index)}
             </CapRow>
 
@@ -1015,27 +1037,41 @@ export const Rcs = (props) => {
   const renderCarouselSection = () => {
     if (!isCarouselType) return null;
 
-    const operations = (
+    const isMaxCarouselCardsReached = MAX_RCS_CAROUSEL_ALLOWED === (carouselData?.length || 0);
+    const addCardTooltipTitle = isMaxCarouselCardsReached
+      ? formatMessage(messages.rcsCarouselMaxCardTooltip, { max: MAX_RCS_CAROUSEL_ALLOWED })
+      // "Set up the first card" only makes sense while creating a new template —
+      // in edit flow the cards already exist, so don't show it there.
+      : (!isEditFlow && checkDisableAddCarouselButton() ? formatMessage(messages.rcsCarouselAddCardDisabledTooltip) : '');
+
+    // No "+" in edit flow (cards can't be added there) — and with no "+", the
+    // divider before it has nothing to separate, so skip both together instead
+    // of rendering a dangling divider.
+    const operations = isEditFlow ? null : (
       <>
         <CapDivider type="vertical" />
-        <CapButton
-          onClick={addCarouselCard}
-          type="flat"
-          className="add-carousel-content-button"
-          disabled={
-            isEditFlow ||
-            !isFullMode ||
-            MAX_RCS_CAROUSEL_ALLOWED === (carouselData?.length || 0) ||
-            checkDisableAddCarouselButton()
-          }
-        >
-          <CapIcon type="plus" />
-        </CapButton>
+        <CapTooltip title={addCardTooltipTitle}>
+          <span className="button-disabled-tooltip-wrapper">
+            <CapButton
+              onClick={addCarouselCard}
+              type="flat"
+              className="add-carousel-content-button"
+              disabled={
+                isEditFlow ||
+                !isFullMode ||
+                isMaxCarouselCardsReached ||
+                checkDisableAddCarouselButton()
+              }
+            >
+              <CapIcon type="plus" />
+            </CapButton>
+          </span>
+        </CapTooltip>
       </>
     );
 
     return (
-      <CapRow className="rcs-carousel-section">
+      <CapRow className={`rcs-carousel-section ${isEditFlow ? 'rcs-carousel-section--readonly-above' : ''}`}>
         {renderCarouselDimensionSelection()}
         <CapRow className="rcs-carousel-tab">
           <CapTab
@@ -1617,11 +1653,19 @@ export const Rcs = (props) => {
 
         setTemplateType(contentType.carousel);
         setTemplateMediaType(RCS_MEDIA_TYPES.NONE);
-        const cardSettings = rcsContent?.cardSettings || {};
+        // Library/campaign payloads can store cardSettings/cardContent at the flat top-level
+        // `rcsContent` instead of nested under versions.base.content.RCS (same fallback already
+        // used for the rich_card media lookup below, line ~1793). Without it, cardWidth/height
+        // silently fall back to SMALL/MEDIUM, mismatching the dimensions the thumbnail was
+        // actually uploaded at and causing object-fit:cover to crop the preview image.
+        const cardSettings = rcsContent?.cardSettings
+          || get(details, 'rcsContent.cardSettings', {});
         const cardWidth = cardSettings?.cardWidth || SMALL;
         setSelectedCarouselWidth(cardWidth);
 
-        const cards = Array.isArray(rcsContent?.cardContent) ? rcsContent.cardContent : [];
+        const cards = Array.isArray(rcsContent?.cardContent)
+          ? rcsContent.cardContent
+          : get(details, 'rcsContent.cardContent', []);
         const firstHeight = cards?.[0]?.media?.height || MEDIUM;
         setSelectedCarouselHeight(firstHeight);
         setSelectedCarousel(`${firstHeight}_${cardWidth}`);
@@ -2502,10 +2546,12 @@ const onTitleAddVar = () => {
             </CapRow>
           }
           description={
-            <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
+            !isEditFlow && (
+              <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
+            )
           }
         />
-        
+
         <CapActionButton
                         buttonType={buttonType}
                         updateButtonChange={updateButtonChange}
@@ -4101,17 +4147,29 @@ const onTitleAddVar = () => {
                 />
               )
             )}
-            {renderLabel('templateTypeLabel')}
-            <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
-              
-            <CapRadioGroup
-                id="select-rcs-template-type"
-                options={TEMPLATE_TYPE_OPTIONS}
-                onChange={onTemplateTypeChange}
-                value={templateType}
-                disabled={(isEditFlow || !isFullMode)}
-              />
-            </ConfigProvider>
+            {isEditFlow ? (
+              <div className="rcs-creative-name-readonly">
+                <CapHeading type="h4">
+                  {formatMessage(messages.templateTypeLabel)}
+                </CapHeading>
+                <CapHeading type="h5" className="rcs-creative-name-value">
+                  {TEMPLATE_TYPE_OPTIONS.find((option) => option.value === templateType)?.label || '-'}
+                </CapHeading>
+              </div>
+            ) : (
+              <>
+                {renderLabel('templateTypeLabel')}
+                <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+                <CapRadioGroup
+                    id="select-rcs-template-type"
+                    options={TEMPLATE_TYPE_OPTIONS}
+                    onChange={onTemplateTypeChange}
+                    value={templateType}
+                    disabled={!isFullMode}
+                  />
+                </ConfigProvider>
+              </>
+            )}
 
             {templateType === contentType.carousel ? (
               renderCarouselSection()

package/v2Containers/Rcs/index.scss

@@ -98,6 +98,7 @@
   .rcs-form-section-heading {
     display: flex;
     margin-top: $CAP_SPACE_20;
+    margin-bottom: $CAP_SPACE_08;
   }
 
   .rcs-image-upload--top-spacing {
@@ -219,6 +220,7 @@
   }
   .rcs-image-dimensions-label{
     margin-top: 1.25rem;
+    margin-bottom: $CAP_SPACE_08;
   }
   .rcs-template-title-input {
     .rcs-edit-disabled {
@@ -229,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 {
@@ -256,6 +260,17 @@
     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;
@@ -264,7 +279,7 @@
 
   .rcs-carousel-dimension-label {
     display: inline-block;
-    margin-bottom: 0.375rem;
+    margin-bottom: $CAP_SPACE_08;
   }
 
   #rcs-carousel-height-select,
@@ -274,6 +289,112 @@
 
   .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 {
@@ -330,6 +451,13 @@
 
   .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 {
@@ -338,9 +466,28 @@
     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;
@@ -385,8 +532,15 @@
     }
   }
 
+  // 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;
+    padding: 0 $CAP_SPACE_08 0 0;
+    display: inline-flex;
+    align-items: center;
   }
 }
 .rcs-fallback-preview > .cap-slide-box-v2-container.size-r{

package/v2Containers/Rcs/messages.js

@@ -206,6 +206,14 @@ export default defineMessages({
     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',
@@ -244,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`,