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

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -107,6 +107,14 @@
         box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.15);
         overflow: hidden;
         transition: all 0.3s ease;
+        // iOS Safari fails to clip a `transform`ed descendant (.rcs-carousel-panel
+        // uses translateX(-50%) to center itself) to this ancestor's border-radius —
+        // its white background bleeds past the rounded edge on real devices, even
+        // though overflow:hidden clips it correctly everywhere else. Forcing Safari
+        // onto its masking render path (instead of the buggy transform+overflow-clip
+        // path) fixes this; no-op on every other browser.
+        -webkit-mask-image: -webkit-radial-gradient(white, black);
+        mask-image: radial-gradient(white, black);
 
         // Desktop Frame
         &.device-frame-desktop {
@@ -785,39 +793,59 @@
     }
   }
 
-  // RCS-only overrides for SMS-style preview frame (scoped; does not affect SMS channel preview)
+  // RCS Carousel card styles — scoped to .rcs-carousel-panel (which lives outside the
+  // overflow-x:hidden overlay so horizontal scroll events reach .scroll-container freely).
   .rcs-device-container {
+    .rcs-carousel-panel {
+      position: absolute;
+      // Centered via left/right auto-margins instead of left:50% + translateX(-50%) —
+      // a `transform` on this element put every rounded+overflow:hidden box nested
+      // inside it (this panel's own corners, the card corners, the image corners...)
+      // in a transformed stacking context that iOS Safari fails to clip correctly,
+      // letting their square corners/backgrounds bleed past the rounded edges. Plain
+      // auto-margin centering has no such bug.
+      left: 0;
+      right: 0;
+      margin-left: auto;
+      margin-right: auto;
+      width: 100%;
+      max-width: 26.786rem;
+      box-sizing: border-box;
+      top: 4.143rem;
+      height: calc(100% - 2.5rem);
+      display: flex;
+      flex-direction: column;
+      padding-top: 5.857rem; // nav (3.428rem) + date separator (~2.429rem)
+      padding-bottom: $CAP_SPACE_16;
+      padding-left: 0.4rem;
+      padding-right: 0.4rem;
+      background-color: $CAP_WHITE;
+      background-clip: content-box;
+      border-bottom-left-radius: 2.429rem;
+      border-bottom-right-radius: 2.429rem;
+      // background-clip only clips the background fill to these rounded corners —
+      // it does NOT clip child content, so message/card boxes could render past the
+      // rounded edge regardless of browser. This doesn't affect the horizontal touch
+      // scroll .scroll-container needs: that workaround was about not nesting inside
+      // the *other* sibling overlay (.sms-content-overlay's overflow-x:hidden), not
+      // about this element's own overflow.
+      overflow: hidden;
 
-    // Carousel panel: sibling of .sms-content-overlay, positioned absolutely within
-    // .sms-device-container (position:relative). Has NO overflow-x:hidden ancestor,
-    // mirroring the WhatsApp carousel approach so horizontal scroll events reach the
-    // inner .scroll-container directly.
-    &.rcs-device-container-carousel {
-      // Carousel panel: same geometry as .sms-content-overlay but NO overflow-x:hidden.
-      // padding-top skips past the nav bar ($CAP_SPACE_48 = 3.428rem) and date separator
-      // (~2.429rem), placing the carousel right where the original .sms-message-container
-      // started (which had flex:1 and filled from below the date separator downward).
-      .rcs-carousel-panel {
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 100%;
-        max-width: 26.786rem;
-        box-sizing: border-box;
-        top: 4.143rem;
-        height: calc(100% - 4.5rem);
-        display: flex;
-        flex-direction: column;
-        padding-top: 5.857rem; // nav (3.428rem) + date separator (~2.429rem)
-        padding-bottom: $CAP_SPACE_16;
+      &.rcs-carousel-panel-android {
+        top: 3.1rem;
+        border-radius: 4rem;
+      }
 
-        &.rcs-carousel-panel-android {
-          top: 3.1rem;
-          height: calc(100% - 3.8rem);
-        }
+      &.rcs-carousel-panel-ios {
+        height: calc(100% - 4.2rem);
+      }
 
-        &.rcs-carousel-panel-ios {
-          height: calc(100% - 5rem);
+        .rcs-carousel-timestamp {
+          font-size: $FONT_SIZE_S;
+          color: #8c8c8c;
+          align-self: flex-end;
+          padding-right: $CAP_SPACE_04;
+          padding-top: $CAP_SPACE_04;
         }
 
         .msg-container-carousel {
@@ -825,52 +853,42 @@
           flex-direction: column;
           width: 100%;
           padding: 0 $CAP_SPACE_16;
-        }
 
-        .scroll-container {
-          display: flex;
-          flex-wrap: nowrap;
-          gap: 0.75rem;
-          overflow-x: auto;
-          overflow-y: hidden;
-          width: 100%;
-          scrollbar-width: none;
+          .scroll-container {
+            display: flex;
+            flex-wrap: nowrap;
+            gap: 0.75rem;
+            overflow-x: auto;
+            overflow-y: hidden;
+            width: 100%;
+            scrollbar-width: none;
 
-          &::-webkit-scrollbar {
-            display: none;
+            &::-webkit-scrollbar {
+              display: none;
+            }
           }
         }
 
-        .rcs-carousel-timestamp {
-          font-size: $FONT_SIZE_S;
-          color: #8c8c8c;
-          align-self: flex-end;
-          padding-right: $CAP_SPACE_04;
-          padding-top: $CAP_SPACE_04;
-        }
-      }
-    }
-
-    .rcs-content-overlay {
-      // no carousel-specific overlay overrides needed (carousel lives outside the overlay now)
-    }
-  }
-
-  // RCS Carousel card styles — scoped to .rcs-carousel-panel (which lives outside the
-  // overflow-x:hidden overlay so horizontal scroll events reach .scroll-container freely).
-  .rcs-device-container {
-    .rcs-carousel-panel {
+          // Wraps the card + its CTA bar so both scroll horizontally together as one unit,
+          // while remaining two visually distinct, separately-rounded elements (Figma reference —
+          // the CTA bar is its own floating pill below the card, not part of it).
+          .rcs-carousel-item {
+            display: flex;
+            flex-direction: column;
+            gap: $CAP_SPACE_04;
+            // Ensure item width is stable and does not shrink to text width
+            flex: 0 0 15.375rem; // ~246px; fills container leaving ~50% of next card peeking
+            margin-right: 0; // spacing handled by scroll-container gap
+          }
 
           .message-pop-carousel {
             // Match TemplatePreview carousel card look (big card + subtle shadow)
             background-color: $CAP_WHITE;
-            border-radius: $CAP_SPACE_08;
-            // Ensure card width is stable and does not shrink to text width
-            width: 15.375rem; // ~246px; fills container leaving ~50% of next card peeking
-            min-width: 15.375rem;
-            flex: 0 0 15.375rem;
+            border: 1px solid $CAP_G07; // #dfe2e7 — keeps the card visible against the
+            // chat background when there's no photo yet to provide contrast (Figma empty state)
+            border-radius: $CAP_SPACE_04; // 4px (Figma RCS carousel card corner)
+            width: 100%;
             padding: 0;
-            margin-right: 0; // spacing handled by scroll-container gap
             color: $CAP_G01;
             overflow: hidden;
             box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
@@ -890,7 +908,7 @@
             aspect-ratio: 1280 / 720; // MEDIUM_MEDIUM image fallback when dimensions not passed
             display: block;
             overflow: hidden;
-            border-radius: 0.5rem 0.5rem 0 0; // 8px
+            border-radius: $CAP_SPACE_04 $CAP_SPACE_04 0 0; // 4px (Figma)
             margin-bottom: 0;
 
             // CapImage (antd Image) applies className on wrapper; ensure inner img is constrained too.
@@ -967,12 +985,12 @@
           .carousel-content {
             padding: 0.625rem 0.75rem; // 10px 12px
             width: 100%;
-            background-color: $CAP_WHITE;
+            background-color: $CAP_G08; // #ebecf0 (Figma: grey info panel, not white)
             white-space: normal; // override scroll-container's nowrap so text can wrap
             display: flex;
             flex-direction: column;
-            border-bottom-left-radius: 0.25rem; // 4px — text panel tucks above CTA gap (Figma)
-            border-bottom-right-radius: 0.25rem;
+            border-bottom-left-radius: 0.25rem; // 4px — this is the card's own bottom edge;
+            border-bottom-right-radius: 0.25rem; // the CTA bar below is a separate element (Figma)
 
             // Title/body typography via CapLabel type (label1 / label2, etc.)
             .carousel-title {
@@ -981,6 +999,8 @@
               overflow: visible;
               white-space: normal;
               overflow-wrap: anywhere;
+              color: $CAP_G04; // #5e6c84 (Figma)
+              font-weight: $FONT_WEIGHT_BOLD;
             }
 
             .carousel-message {
@@ -988,6 +1008,8 @@
               overflow: visible;
               white-space: normal;
               overflow-wrap: anywhere;
+              color: $FONT_COLOR_03; // #97a0af (Figma)
+              font-weight: $FONT_WEIGHT_REGULAR;
             }
 
             .rcs-carousel-field-placeholder {
@@ -1007,7 +1029,8 @@
             border-top: 1px solid $CAP_WHITE;
           }
 
-          // Stacked full-width CTA bars below card copy, separated by white gap (Figma RCS carousel)
+          // Own floating pill(s) below the card (NOT part of .message-pop-carousel) — sits in
+          // .rcs-carousel-item, separated from the card by that wrapper's `gap` (Figma reference).
           .rcs-carousel-cta-stack.cap-row-v2 {
             display: flex;
             flex-direction: column;
@@ -1027,18 +1050,13 @@
             margin: 0;
             padding: 0.625rem 0.75rem;
             box-sizing: border-box;
-            background-color: $CAP_WHITE;
+            background-color: $CAP_G08; // #ebecf0 (Figma: grey "Call Now" pill, not white)
             border-radius: 0.25rem;
             font-size: $FONT_SIZE_M;
             font-weight: $FONT_WEIGHT_MEDIUM;
-            color: $CAP_G01;
+            color: $CAP_G04; // #5e6c84 (Figma)
             text-align: center;
           }
-
-          .rcs-cta-preview-phone-icon-end {
-            margin-left: 0.25rem;
-            flex-shrink: 0;
-          }
     }
   }
 
@@ -2715,10 +2733,14 @@
           max-width: 100% !important;
         }
 
-        &.device-frame-mobile {
-          width: 100% !important;
-          max-width: 100% !important;
-        }
+        // NOT stretched to 100% here like desktop/tablet — this frame simulates a
+        // phone, so on a narrow (e.g. real iOS) viewport it should stay phone-width
+        // and shrink via its own `max-width: 90%` rule, not stretch to fill the
+        // container. The old `width: 100% !important` made the frame's white
+        // background render far wider than the phone silhouette, visibly eating
+        // into the grey backdrop around it, while the carousel content inside
+        // stayed capped at its normal phone width — a width mismatch, not a
+        // clipping bug.
       }
     }
   }

package/v2Components/CommonTestAndPreview/messages.js

@@ -222,7 +222,7 @@ export default defineMessages({
   },
   smsFallbackTab: {
     id: `${scope}.smsFallbackTab`,
-    defaultMessage: 'Fallback SMS',
+    defaultMessage: 'SMS Fallback',
   },
   previewPlaceholder: {
     id: `${scope}.previewPlaceholder`,
@@ -338,11 +338,11 @@ export default defineMessages({
   },
   rcsCarouselPreviewTitlePlaceholder: {
     id: `${scope}.rcsCarouselPreviewTitlePlaceholder`,
-    defaultMessage: 'Card title',
+    defaultMessage: 'Your title goes here',
   },
   rcsCarouselPreviewBodyPlaceholder: {
     id: `${scope}.rcsCarouselPreviewBodyPlaceholder`,
-    defaultMessage: 'Card description',
+    defaultMessage: 'Your text message goes here',
   },
   toMe: {
     id: `${scope}.toMe`,

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/RcsPreviewContent.test.js

@@ -413,7 +413,7 @@ describe('RcsPreviewContent', () => {
       };
       renderRcsPreview(props);
       expect(screen.getByText('OnlyTitle')).toBeTruthy();
-      expect(screen.getByText('Card description')).toBeTruthy();
+      expect(screen.getByText('Your text message goes here')).toBeTruthy();
       expect(document.querySelector('.carousel-message.rcs-carousel-field-placeholder')).toBeTruthy();
     });
 
@@ -433,7 +433,7 @@ describe('RcsPreviewContent', () => {
       };
       renderRcsPreview(props);
       expect(screen.getByText('OnlyBody')).toBeTruthy();
-      expect(screen.getByText('Card title')).toBeTruthy();
+      expect(screen.getByText('Your title goes here')).toBeTruthy();
       expect(document.querySelector('.carousel-title.rcs-carousel-field-placeholder')).toBeTruthy();
     });
 
@@ -452,8 +452,8 @@ describe('RcsPreviewContent', () => {
       };
       const { container } = renderRcsPreview(props);
       expect(container.querySelector('.carousel-content')).toBeTruthy();
-      expect(screen.getByText('Card title')).toBeTruthy();
-      expect(screen.getByText('Card description')).toBeTruthy();
+      expect(screen.getByText('Your title goes here')).toBeTruthy();
+      expect(screen.getByText('Your text message goes here')).toBeTruthy();
       expect(container.querySelectorAll('.rcs-carousel-field-placeholder').length).toBe(2);
     });
   });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -13,9 +13,7 @@
 
 .shell-v2 {
   position: relative;
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
-  left: 50%;
+  margin: 0 auto;
   padding: 0 10px;
   width: 450px;
 
@@ -572,6 +570,9 @@
             margin-top: 0;
             padding: 4px 8px;
           }
+          &.rcs-desc {
+            margin-top: $CAP_SPACE_08;
+          }
           &.rcs-button-text{
             color: $FONT_COLOR_05;
             .rcs-icon{
@@ -876,7 +877,7 @@
         left: 0;
         flex-shrink: 0;
         padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
-        border-radius: 0.428rem;
+        border-radius: $CAP_SPACE_04; // 4px (Figma RCS carousel card corner)
 
         .carousel-title {
           font-weight: 700 !important;

package/v2Components/TemplatePreview/index.js

@@ -521,7 +521,10 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
         } else if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
           renderArray.push(
             <CapLabel key={`rcs-suggestion-${suggestionKey}`} type="label21" className="rcs-cta-preview">
-              <CapIcon type="launch" size="xs" />
+              {/* "launch" icon's hardcoded SVG <defs>/<mask> ids collide when 2+
+                  CTA buttons render together, showing as a solid square — "open-in-new"
+                  is a single flat path with no ids, so it can't collide. */}
+              <CapIcon type="open-in-new" size="xs" />
               {suggestion.text}
             </CapLabel>,
           );

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -455,6 +455,7 @@ export function SlideBoxContent(props) {
     getFormData,
     eventContextTags,
     waitEventContextTags,
+    handleClose,
   };
 
   return (