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

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2,7 +2,7 @@
 
 /**
  * UnifiedPreview Styles
- * 
+ *
  * Consistent styling for preview across all channels
  */
 
@@ -11,25 +11,24 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: $CAP_WHITE;
     overflow: hidden;
-  
+
     // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
     .preview-chrome {
       background: $CAP_WHITE;
       overflow: hidden;
-  
+
       .preview-divider {
         margin: 0;
       }
-  
+
       .preview-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
         background: $CAP_G09;
-  
+
         .preview-for {
           font-size: $FONT_SIZE_M;
           color: #595959;
@@ -39,20 +38,20 @@
             margin-left: $CAP_SPACE_04;
           }
         }
-  
+
         .device-toggle {
           display: flex;
           gap: $CAP_SPACE_08;
           background-color: #e0e0e0;
           padding: $CAP_SPACE_06 $CAP_SPACE_08;
           border-radius: $CAP_SPACE_08;
-  
+
           .anticon {
             padding: $CAP_SPACE_04;
             border-radius: $CAP_SPACE_04;
             cursor: pointer;
             color: #595959;
-  
+
             &.active {
               background-color: $CAP_WHITE;
               color: #262626;
@@ -62,7 +61,27 @@
         }
       }
     }
-  
+
+    .unified-preview.unified-preview-rcs-tabs {
+      .ant-tabs-nav {
+        margin: 0;
+        padding: 0 $CAP_SPACE_16;
+      }
+
+      // Prevent white hover/active backgrounds from default antd styles
+      .ant-tabs-tab,
+      .ant-tabs-tab:hover,
+      .ant-tabs-tab-active {
+        background: transparent;
+      }
+
+      .ant-tabs-tab-btn,
+      .ant-tabs-tab-btn:hover,
+      .ant-tabs-tab-btn:active {
+        background: transparent;
+      }
+    }
+
     // Preview Content Container
     .preview-content-container {
       flex: 1;
@@ -75,25 +94,25 @@
     .preview-content-container-no-header {
       background-color: $CAP_WHITE;
     }
-  
+
     // Device Frames
     .unified-preview-frame {
       width: 100%;
       display: flex;
       justify-content: center;
-  
+
       .device-frame {
         background: $CAP_WHITE;
         border-radius: $CAP_SPACE_08;
         box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.15);
         overflow: hidden;
         transition: all 0.3s ease;
-  
+
         // Desktop Frame
         &.device-frame-desktop {
           width: 100%;
           min-height: 42.857rem;
-  
+
           .desktop-chrome {
             height: $CAP_SPACE_40;
             background: $CAP_G12;
@@ -102,30 +121,30 @@
             align-items: center;
             padding: 0 $CAP_SPACE_12;
             gap: $CAP_SPACE_12;
-  
+
             .chrome-dots {
               display: flex;
               gap: $CAP_SPACE_06;
-  
+
               .dot {
                 width: $CAP_SPACE_12;
                 height: $CAP_SPACE_12;
                 border-radius: 50%;
-  
+
                 &.dot-close {
                   background: #ff5f56;
                 }
-  
+
                 &.dot-minimize {
                   background: #ffbd2e;
                 }
-  
+
                 &.dot-maximize {
                   background: #27c93f;
                 }
               }
             }
-  
+
             .chrome-address-bar {
               flex: 1;
               background: $CAP_WHITE;
@@ -135,25 +154,25 @@
               color: #8c8c8c;
             }
           }
-  
+
           .device-content {
             min-height: 40rem;
             background: $CAP_WHITE;
           }
         }
-  
+
         // Tablet Frame
         &.device-frame-tablet {
           width: 54.857rem;
           max-width: 90%;
-  
+
           .tablet-chrome {
             height: $CAP_SPACE_24;
             background: #333333;
             display: flex;
             align-items: center;
             justify-content: center;
-  
+
             .tablet-camera {
               width: $CAP_SPACE_08;
               height: $CAP_SPACE_08;
@@ -162,19 +181,19 @@
               border: $CAP_SPACE_01 solid #666666;
             }
           }
-  
+
           .device-content {
             min-height: 73.143rem;
             background: $CAP_WHITE;
           }
-  
+
           .tablet-footer {
             height: 3.571rem;
             background: #333333;
             display: flex;
             align-items: center;
             justify-content: center;
-  
+
             .home-button {
               width: $CAP_SPACE_40;
               height: $CAP_SPACE_40;
@@ -184,19 +203,19 @@
             }
           }
         }
-  
+
         // Mobile Frame
         &.device-frame-mobile {
           width: 26.786rem;
           max-width: 90%;
-  
+
           .mobile-chrome {
             height: $CAP_SPACE_24;
             background: #000000;
             display: flex;
             align-items: center;
             justify-content: center;
-  
+
             .mobile-notch {
               width: 10.714rem;
               height: 1.571rem;
@@ -204,19 +223,19 @@
               border-radius: 0 0 $CAP_SPACE_12 $CAP_SPACE_12;
             }
           }
-  
+
           .device-content {
             min-height: 47.643rem;
             background: $CAP_WHITE;
           }
-  
+
           .mobile-footer {
             height: $CAP_SPACE_24;
             background: #000000;
             display: flex;
             align-items: center;
             justify-content: center;
-  
+
             .home-indicator {
               width: $CAP_SPACE_80;
               height: $CAP_SPACE_04;
@@ -228,7 +247,7 @@
         }
       }
     }
-  
+
     // Channel Preview Placeholders (Phase 5)
     .channel-preview-placeholder {
       display: flex;
@@ -238,7 +257,7 @@
       padding: $CAP_SPACE_60 $CAP_SPACE_24;
       text-align: center;
       min-height: 28.571rem;
-    
+
       .question-circle {
         font-size: $CAP_SPACE_48;
         color: $CAP_COLOR_16;
@@ -249,13 +268,13 @@
         font-weight: 600;
         color: #262626;
       }
-  
+
       p {
         margin-top: $CAP_SPACE_08;
         font-size: $FONT_SIZE_M;
         color: #8c8c8c;
       }
-  
+
       .preview-subject {
         margin-top: $CAP_SPACE_24;
         padding: $CAP_SPACE_12 $CAP_SPACE_16;
@@ -264,26 +283,26 @@
         text-align: left;
         width: 100%;
         max-width: 35.714rem;
-  
+
         strong {
           color: #595959;
           margin-right: $CAP_SPACE_08;
         }
       }
-  
+
       .preview-body-placeholder {
         margin-top: $CAP_SPACE_12;
         padding: $CAP_SPACE_08 $CAP_SPACE_12;
         background: #fafafa;
         border: $CAP_SPACE_01 dashed $CAP_COLOR_16;
         border-radius: $CAP_SPACE_04;
-  
+
         small {
           color: #8c8c8c;
         }
       }
     }
-  
+
     // Loading State
     &.unified-preview-loading {
       .preview-loading-container {
@@ -294,14 +313,14 @@
         justify-content: center;
         gap: $CAP_SPACE_16;
         min-height: 28.571rem;
-  
+
         .loading-text {
           font-size: $FONT_SIZE_M;
           color: #8c8c8c;
         }
       }
     }
-  
+
     // Error State
     &.unified-preview-error {
       .preview-error-container {
@@ -312,7 +331,7 @@
         justify-content: center;
         gap: $CAP_SPACE_16;
         min-height: 28.571rem;
-        
+
         .exclamation-circle {
           font-size: $CAP_SPACE_48;
           color: #ff4d4f;
@@ -322,7 +341,7 @@
           font-weight: 600;
           color: #262626;
         }
-  
+
         .error-message {
           font-size: $FONT_SIZE_M;
           color: #ff4d4f;
@@ -331,7 +350,7 @@
         }
       }
     }
-  
+
     // Preview Metadata
     .preview-metadata {
       padding: $CAP_SPACE_12 $CAP_SPACE_24;
@@ -341,7 +360,7 @@
       color: #8c8c8c;
       display: flex;
       gap: $CAP_SPACE_16;
-  
+
       .metadata-item {
         display: flex;
         gap: $CAP_SPACE_04;
@@ -534,7 +553,7 @@
           font-weight: 600;
           color: #262626;
         }
-  
+
         .error-message {
           font-size: $FONT_SIZE_M;
           color: #ff4d4f;
@@ -576,9 +595,12 @@
       transform: translateX(-50%);
       width: 100%;
       max-width: 26.786rem;
+      min-width: 0; // flex descendant overflow: allow shrink inside narrow screen
       height: calc(100% - 4.5rem);
       display: flex;
       flex-direction: column;
+      overflow-x: hidden;
+      box-sizing: border-box;
 
       &.sms-content-overlay-android {
         height: calc(100% - 3.8rem);
@@ -740,7 +762,7 @@
           font-weight: 600;
           color: #262626;
         }
-  
+
         .sms-error-message {
           font-size: $FONT_SIZE_M;
           color: #ff4d4f;
@@ -762,13 +784,256 @@
     }
   }
 
+  // RCS carousel: allow cards to slide "behind" the phone frame/bezel
+  // (device png covers overflow while screen cutout still shows overlay)
+  .rcs-device-container.rcs-device-container-carousel {
+    .sms-device-image {
+      position: relative;
+      z-index: 0; // keep device image behind the overlay so preview never disappears
+      pointer-events: none; // allow horizontal scroll/drag on carousel underneath
+    }
+
+    .rcs-content-overlay {
+      z-index: 1; // overlay above device image (preview visible)
+    }
+  }
+
+  // RCS-only overrides for SMS-style preview frame (scoped; does not affect SMS channel preview)
+  .rcs-device-container {
+    .rcs-content-overlay {
+
+      &.sms-preview.sms-ios {
+        .sms-message-container.rcs-message-container-carousel {
+          margin-right: 0; // allow carousel to reach device edge
+        }
+      }
+
+      .sms-message-container {
+        &.rcs-message-container-carousel {
+          // Let carousel reach the right edge of the device frame (match expected)
+          padding-right: 0;
+        }
+
+        .sms-message-bubble {
+          &.rcs-message-bubble-carousel {
+            background: transparent;
+            padding: 0;
+            max-width: 100%;
+            border-radius: 0;
+            width: 100%;
+
+            .sms-message-text {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // RCS Carousel preview inside SMS-style device frame
+  // RcsPreviewContent uses msg-container-carousel/scroll-container/message-pop-carousel classes.
+  .rcs-device-container {
+    .rcs-content-overlay {
+      .sms-message-text {
+        .message-pop.sms {
+          width: 100%;
+          .msg-container-carousel {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+          }
+
+          .scroll-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            display: flex;
+            flex-wrap: nowrap; // CapRow defaults can wrap; carousel must stay in one row
+            align-items: stretch;
+            padding-top: $CAP_SPACE_06;
+            padding-right: 0; // allow cards to align flush on the right
+            white-space: nowrap;
+            scrollbar-width: none; // Hide scrollbar in Firefox
+            gap: 0.75rem; // 12px; no trailing whitespace like margin-right
+            width: 100%;
+
+            &::-webkit-scrollbar {
+              display: none; // Hide scrollbar in Chrome/Safari/Opera
+            }
+          }
+
+          .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: 16.125rem; // 258px (shows 1 card + a peek of the next)
+            min-width: 16.125rem;
+            flex: 0 0 16.125rem;
+            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);
+            position: relative;
+          }
+
+          .whatsapp-content {
+            font-family: Roboto, 'Open Sans', sans-serif;
+            margin: 0;
+            width: 100%;
+          }
+
+          // Height follows width × aspect-ratio; inline style from carouselPreviewDimensions overrides fallback.
+          .whatsapp-image.rcs-carousel-media-wrap {
+            width: 100%;
+            height: auto;
+            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
+            margin-bottom: 0;
+
+            // CapImage (antd Image) applies className on wrapper; ensure inner img is constrained too.
+            img,
+            .ant-image-img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              border-radius: inherit;
+              display: block;
+            }
+
+            // Plain <img> in RCS carousel preview (not CapImage)
+            .rcs-carousel-img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              border-radius: inherit;
+              display: block;
+            }
+          }
+
+          .video-preview {
+            position: relative;
+            width: 100%;
+            margin-bottom: 0;
+
+            .whatsapp-image.rcs-carousel-media-wrap {
+              width: 100%;
+              height: auto;
+              aspect-ratio: 796 / 448; // MEDIUM_MEDIUM video thumbnail fallback
+              margin-bottom: 0;
+
+              img,
+              .ant-image-img,
+              .rcs-carousel-img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: inherit;
+                display: block;
+              }
+            }
+
+            .icon-position {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              .video-icon {
+                width: $CAP_SPACE_48;
+                height: $CAP_SPACE_48;
+              }
+            }
+          }
+
+          .carousel-content {
+            padding: 0.625rem 0.75rem; // 10px 12px
+            width: 100%;
+            background-color: #ebecf0;
+            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;
+
+            // Title/body typography via CapLabel type (label1 / label2, etc.)
+            .carousel-title {
+              margin-bottom: 0.25rem; // 4px
+              display: block;
+              overflow: visible;
+              white-space: normal;
+              overflow-wrap: anywhere;
+            }
+
+            .carousel-message {
+              display: block;
+              overflow: visible;
+              white-space: normal;
+              overflow-wrap: anywhere;
+            }
+
+            .rcs-carousel-field-placeholder {
+              color: $CAP_G05;
+              font-weight: $FONT_WEIGHT_REGULAR;
+            }
+          }
+
+          // Divider and suggestions should render like a CTA bar list (no extra margins)
+          .whatsapp-divider {
+            margin: 0;
+            border-top: 1px solid $CAP_WHITE;
+          }
+
+          // Stacked full-width CTA bars below card copy, separated by white gap (Figma RCS carousel)
+          .rcs-carousel-cta-stack.cap-row-v2 {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            width: 100%;
+            gap: 0.25rem;
+            box-sizing: border-box;
+            align-items: stretch;
+          }
+
+          .rcs-cta-preview--carousel-bar {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.375rem;
+            width: 100%;
+            margin: 0;
+            padding: 0.625rem 0.75rem;
+            box-sizing: border-box;
+            background-color: #ebecf0;
+            border-radius: 0.25rem;
+            font-size: $FONT_SIZE_M;
+            font-weight: $FONT_WEIGHT_MEDIUM;
+            color: $CAP_G01;
+            text-align: center;
+          }
+
+          .rcs-cta-preview-phone-icon-end {
+            margin-left: 0.25rem;
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+
   // WhatsApp Preview Content Styles (Phase 8)
   // All WhatsApp styles wrapped in parent class for increased specificity
   // This prevents other CSS (like CapLabel) from overriding WhatsApp-specific styles
   .whatsapp-preview-wrapper {
     // Using same CSS classes as TemplatePreview for consistency
     // Styles are copied from TemplatePreview/_templatePreview.scss to ensure they work
-    
+
     .shell-v2-whatsapp {
       position: relative;
       -webkit-transform: translate(-50%);
@@ -843,23 +1108,23 @@
         }
 
         // WhatsApp message pop styles (matching TemplatePreview)
-        &.whatsapp-message-pop {
+        &.whatsapp-message-pop,
+        &.whatsapp-message-pop-carousel {
           padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
           border-radius: $CAP_SPACE_06;
           background-color: $CAP_WHITE;
-          width: 88%;
           left: 0;
         }
 
+        &.whatsapp-message-pop {
+          width: 88%;
+        }
+
         // WhatsApp carousel message pop styles
         &.whatsapp-message-pop-carousel {
-          padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
-          border-radius: $CAP_SPACE_06;
-          background-color: $CAP_WHITE;
           width: 10.4rem;
           cursor: pointer;
           flex-shrink: 0;
-          left: 0;
         }
       }
     }
@@ -924,7 +1189,7 @@
         line-height: 1rem;
         font-family: Roboto, 'Open Sans', sans-serif;
       }
-  
+
       .whatsapp-template-footer-preview {
         // From WhatsApp/index.scss: color: $CAP_G04, but use white for preview
         color: $CAP_G01;
@@ -980,19 +1245,19 @@
       color: #8c8c8c;
       font-size: $FONT_SIZE_M;
     }
-  
+
     .whatsapp-error-text {
       font-size: $FONT_SIZE_L;
       font-weight: 600;
       color: #262626;
     }
-  
+
     .whatsapp-error-message {
       font-size: $FONT_SIZE_M;
       color: #ff4d4f;
       text-align: center;
     }
-  
+
     .whatsapp-no-content {
       color: #8c8c8c;
       font-size: $FONT_SIZE_M;
@@ -1044,14 +1309,14 @@
       color: #8c8c8c;
       margin-top: $CAP_SPACE_04;
     }
-  
+
     .url-preview {
       font-size: $FONT_SIZE_S;
       color: #1890ff;
       word-break: break-all;
     }
   }
-  
+
   // InApp Preview Content Styles (Phase 10)
   // Styles copied from TemplatePreview/_templatePreview.scss to ensure consistency
   // These styles work within the SMS device container structure
@@ -1112,11 +1377,11 @@
         .inapp-message-container-FULLSCREEN {
           position: relative;
           background-color: $CAP_WHITE;
-          width: 100%;  
+          width: 100%;
           height: 100%;
           align-items: center;
           padding: 0 $CAP_SPACE_16;
-          border-bottom-left-radius: 2.6rem;   
+          border-bottom-left-radius: 2.6rem;
           border-bottom-right-radius: 2.6rem;
           .inapp-title-FULLSCREEN {
             align-items: center;
@@ -1946,7 +2211,7 @@
             max-height: 7.5rem;
             margin-left: $CAP_SPACE_24;
           }
-          
+
           .mpush-gif-preview {
             max-width: 100%;
             max-height: 7.5rem;
@@ -2206,6 +2471,7 @@
                 font-weight: 500;
                 display: -webkit-box;
                 -webkit-line-clamp: 1;
+                line-clamp: 1;
                 -webkit-box-orient: vertical;
                 overflow: hidden;
                 color: $CAP_WHITE;
@@ -2257,7 +2523,7 @@
       color: $FONT_COLOR_01;
       margin-bottom: $CAP_SPACE_12;
     }
-  
+
     .preview-text {
       font-weight: 400;
       font-size: $FONT_SIZE_S;
@@ -2292,13 +2558,13 @@
       justify-content: center;
       padding: $CAP_SPACE_60 $CAP_SPACE_24;
       gap: $CAP_SPACE_16;
-  
+
       .zalo-loading-text {
         color: #8c8c8c;
         font-size: $FONT_SIZE_M;
       }
     }
-  
+
     // Error state
     .zalo-error-container {
       display: flex;
@@ -2307,13 +2573,13 @@
       justify-content: center;
       padding: $CAP_SPACE_60 $CAP_SPACE_24;
       gap: $CAP_SPACE_16;
-  
+
       .zalo-error-text {
         font-size: $FONT_SIZE_L;
         font-weight: 600;
         color: #262626;
       }
-  
+
       .zalo-error-message {
         font-size: $FONT_SIZE_M;
         color: #ff4d4f;
@@ -2331,31 +2597,31 @@
       }
     }
   }
-  
+
   @media (max-width: 54.857rem) {
     .unified-preview {
       .preview-header {
         flex-direction: column;
         align-items: flex-start;
         gap: $CAP_SPACE_12;
-  
+
         .preview-header-right {
           width: 100%;
           justify-content: flex-start;
         }
       }
-  
+
       .preview-content-container {
         padding: $CAP_SPACE_16;
       }
-  
+
       .device-frame {
         &.device-frame-desktop,
         &.device-frame-tablet {
           width: 100% !important;
           max-width: 100% !important;
         }
-  
+
         &.device-frame-mobile {
           width: 100% !important;
           max-width: 100% !important;
@@ -2363,4 +2629,3 @@
       }
     }
   }
-