@capillarytech/creatives-library 8.0.340-0 → 8.0.340-beta.0

package/v2Components/CommonTestAndPreview/PreviewSection.js

@@ -10,7 +10,7 @@ import UnifiedPreview from './UnifiedPreview';
 const PreviewSection = ({
   unifiedPreviewProps,
 }) => (
-  <CapRow className="test-and-preview-section panel-section">
+  <CapRow useLegacy className="test-and-preview-section panel-section">
     <UnifiedPreview {...unifiedPreviewProps} />
   </CapRow>
 );

package/v2Components/CommonTestAndPreview/UnifiedPreview/DeviceFrame.js

@@ -24,7 +24,7 @@ const DeviceFrame = ({ device, children, className }) => {
   };
 
   return (
-    <CapRow className={`unified-preview-frame ${className || ''}`}>
+    <CapRow useLegacy className={`unified-preview-frame ${className || ''}`}>
       <div className={getFrameClass()}>
         {/* Device chrome/decorations */}
         {device === DESKTOP && (

package/v2Components/CommonTestAndPreview/UnifiedPreview/EmailPreviewContent.js

@@ -60,9 +60,9 @@ const EmailPreviewContent = ({
         <CapLabel type="label17" className="email-subject">{subject || ''}</CapLabel>
         <CapRow className="email-meta">
           <span><FormattedMessage {...messages.timeAgo} /></span>
-          <CapRow className="dots" />
-          <CapRow className="dots" />
-          <CapRow className="dots" />
+          <CapRow useLegacy className="dots" />
+          <CapRow useLegacy className="dots" />
+          <CapRow useLegacy className="dots" />
         </CapRow>
       </CapRow>
 
@@ -70,8 +70,8 @@ const EmailPreviewContent = ({
       <CapRow className="email-from">
         <CapRow className="sender-avatar" />
         <CapRow className="sender-info">
-          <CapRow className="sender-name"><FormattedMessage {...messages.senderName} /></CapRow>
-          <CapRow className="recipient-info">{formatMessage(messages.toMe)}</CapRow>
+          <CapRow useLegacy className="sender-name"><FormattedMessage {...messages.senderName} /></CapRow>
+          <CapRow useLegacy className="recipient-info">{formatMessage(messages.toMe)}</CapRow>
         </CapRow>
       </CapRow>
 
@@ -89,7 +89,7 @@ const EmailPreviewContent = ({
     contentSection = (
       <CapRow className="loading-container">
         <CapSpin size="large" />
-        <CapRow className="loading-text">
+        <CapRow useLegacy className="loading-text">
           {formatMessage(messages.updatingPreview)}
         </CapRow>
       </CapRow>
@@ -99,10 +99,10 @@ const EmailPreviewContent = ({
     contentSection = (
       <CapRow className="error-container">
         <CapIcon type="exclamation-circle" style={{ fontSize: '48px', color: '#ff4d4f' }} />
-        <CapRow className="error-text">
+        <CapRow useLegacy className="error-text">
           {formatMessage(messages.previewError)}
         </CapRow>
-        <CapRow className="error-message">{error}</CapRow>
+        <CapRow useLegacy className="error-message">{error}</CapRow>
       </CapRow>
     );
   } else if (cleanContent) {

package/v2Components/CommonTestAndPreview/UnifiedPreview/InAppPreviewContent.js

@@ -55,16 +55,16 @@ const InAppPreviewContent = ({
   // Render loading state
   if (isUpdating) {
     return (
-      <CapRow className="sms-device-container">
+      <CapRow useLegacy className="sms-device-container">
         <CapImage
           className="sms-device-image"
           src={deviceImage}
           alt={`${deviceName} Device`}
         />
-        <CapRow className="sms-content-overlay inapp-content-overlay-height">
-          <CapRow className="sms-loading-container">
+        <CapRow useLegacy className="sms-content-overlay inapp-content-overlay-height">
+          <CapRow useLegacy className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -76,19 +76,19 @@ const InAppPreviewContent = ({
   // Render error state
   if (error) {
     return (
-      <CapRow className="sms-device-container">
+      <CapRow useLegacy className="sms-device-container">
         <CapImage
           className="sms-device-image"
           src={deviceImage}
           alt={`${deviceName} Device`}
         />
-        <CapRow className="sms-content-overlay inapp-content-overlay-height">
-          <CapRow className="sms-error-container">
+        <CapRow useLegacy className="sms-content-overlay inapp-content-overlay-height">
+          <CapRow useLegacy className="sms-error-container">
             <CapIcon type="exclamation-circle" style={{ fontSize: '48px', color: '#ff4d4f' }} />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -98,7 +98,7 @@ const InAppPreviewContent = ({
   // Render InApp content
   // Use SMS device structure (device frame) but TemplatePreview's InApp content structure inside
   return (
-    <CapRow className="sms-device-container">
+    <CapRow useLegacy className="sms-device-container">
       {/* Device Background Image - Same as SMS */}
       <CapImage
         className="sms-device-image"
@@ -107,16 +107,17 @@ const InAppPreviewContent = ({
       />
 
       {/* Content Overlay - Use TemplatePreview's InApp structure (lines 1409-1486) */}
-      <CapRow className={`sms-content-overlay inapp-content-overlay-height ${!showHeader ? 'inapp-content-overlay' : ''} sms-${device}`}>
+      <CapRow useLegacy className={`sms-content-overlay inapp-content-overlay-height ${!showHeader ? 'inapp-content-overlay' : ''} sms-${device}`}>
         {/* TemplatePreview InApp structure - shell-v2 wrapper */}
-        <CapRow className={`inapp-shell-v2 inapp-${device}`}>
+        <CapRow useLegacy className={`inapp-shell-v2 inapp-${device}`}>
           {/* preview-image div wrapper */}
           {/* inapp-message-container with layout type and device */}
           <CapRow
+            useLegacy
             className={`inapp-message-container-${deviceLayoutType || LAYOUT_TYPE_POPUP} ${!showHeader && deviceLayoutType === LAYOUT_TYPE_FOOTER ? 'inapp-message-container-FOOTER-no-header' : ''} ${CHANNELS.SMS.toLowerCase()}`}
           >
             {/* preview-inapp-screen - content container */}
-            <CapRow className="preview-inapp-screen">
+            <CapRow useLegacy className="preview-inapp-screen">
               {/* Title - Same as TemplatePreview (line 1420-1435) */}
               <CapLabel
                 type="label16"

package/v2Components/CommonTestAndPreview/UnifiedPreview/MobilePushPreviewContent.js

@@ -44,16 +44,16 @@ const MobilePushPreviewContent = ({
   // Render loading state
   if (isUpdating) {
     return (
-      <CapRow className="sms-device-container">
+      <CapRow useLegacy className="sms-device-container">
         <CapImage
           className="sms-device-image"
           src={deviceImage}
           alt={`${deviceName} Device`}
         />
-        <CapRow className="sms-content-overlay">
-          <CapRow className="sms-loading-container">
+        <CapRow useLegacy className="sms-content-overlay">
+          <CapRow useLegacy className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -65,19 +65,19 @@ const MobilePushPreviewContent = ({
   // Render error state
   if (error) {
     return (
-      <CapRow className="sms-device-container">
+      <CapRow useLegacy className="sms-device-container">
         <CapImage
           className="sms-device-image"
           src={deviceImage}
           alt={`${deviceName} Device`}
         />
-        <CapRow className="sms-content-overlay">
-          <CapRow className="sms-error-container">
+        <CapRow useLegacy className="sms-content-overlay">
+          <CapRow useLegacy className="sms-error-container">
             <CapIcon type="exclamation-circle" className="exclamation-circle" />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -91,8 +91,8 @@ const MobilePushPreviewContent = ({
     }
 
     return (
-      <CapRow className="msg-container-carousel mobile-push-carousel-container">
-        <CapRow className="scroll-container mobile-push-scroll-container">
+      <CapRow useLegacy className="msg-container-carousel mobile-push-carousel-container">
+        <CapRow useLegacy className="scroll-container mobile-push-scroll-container">
           {contentData?.carouselData?.map((item, idx) => (
             <CapColumn
               key={`carousel-card-${idx}`}
@@ -142,7 +142,7 @@ const MobilePushPreviewContent = ({
   // Render MobilePush notification preview
   // Structure based on TemplatePreview MobilePush rendering (lines 790-928)
   return (
-    <CapRow className="sms-device-container">
+    <CapRow useLegacy className="sms-device-container">
       {/* Device Background Image - Same as SMS */}
       <CapImage
         className="sms-device-image"
@@ -151,25 +151,26 @@ const MobilePushPreviewContent = ({
       />
 
       {/* Content Overlay - MobilePush notification structure */}
-      <CapRow className="sms-content-overlay">
+      <CapRow useLegacy className="sms-content-overlay">
         {/* MobilePush notification container */}
         {hasContent && (
           <CapRow
+            useLegacy
             className={`${
               device === IOS ? 'iphone' : device
             }-push-message-Container`}
           >
             {/* Notification message pop */}
-            <CapRow className="message-pop align-left">
+            <CapRow useLegacy className="message-pop align-left">
               {/* App Header */}
 
               {/* Body Text */}
-              <CapRow className="app-header">
-                <CapRow className="app-header-left">
+              <CapRow useLegacy className="app-header">
+                <CapRow useLegacy className="app-header-left">
                   <span className="app-icon">{""}</span>
                   <CapLabel type="label16" className="title">{deviceContent?.header || ''}</CapLabel>
                 </CapRow>
-                <CapRow className="app-header-right">
+                <CapRow useLegacy className="app-header-right">
                   <CapLabel type="label11">2:29 PM</CapLabel>
                 </CapRow>
                 </CapRow>
@@ -179,7 +180,7 @@ const MobilePushPreviewContent = ({
 
               {/* Body Image/Video/GIF */}
               {(deviceContent?.bodyImage || deviceContent?.bodyVideo?.videoSrc || deviceContent?.bodyGif) && (
-                <CapRow className="body-image">
+                <CapRow useLegacy className="body-image">
                   {(() => {
                     if (deviceContent?.bodyVideo?.videoSrc && !deviceContent?.bodyImage && !deviceContent?.bodyGif) {
                       return (
@@ -216,7 +217,7 @@ const MobilePushPreviewContent = ({
               {/* Action Buttons */}
               {(deviceContent?.actions || []).filter((action) => action?.label || action?.actionText).length > 0
                 && deviceContent?.carouselData?.length === 0 && (
-                <CapRow className="actions">
+                <CapRow useLegacy className="actions">
                   {(deviceContent?.actions || []).map((action) => (
                     (action?.label || action?.actionText) && (
                       <span
@@ -241,8 +242,8 @@ const MobilePushPreviewContent = ({
 
         {/* No content state */}
         {!hasContent && (
-          <CapRow className="sms-loading-container">
-            <CapRow className="sms-loading-text">
+          <CapRow useLegacy className="sms-loading-container">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage({ id: 'app.components.CommonTestAndPreview.noContent', defaultMessage: 'No content to preview' })}
             </CapRow>
           </CapRow>

package/v2Components/CommonTestAndPreview/UnifiedPreview/RcsPreviewContent.js

@@ -185,7 +185,7 @@ const RcsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -206,10 +206,10 @@ const RcsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-error-container">
             <CapIcon type="exclamation-circle" className="exclamation-circle" />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -241,7 +241,7 @@ const RcsPreviewContent = ({
       {/* Content Overlay */}
       <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
         {/* Navigation Bar - Same as SMS */}
-        <CapRow className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
+        <CapRow useLegacy className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
           <CapLabel type="label2" className="sms-sender-id">
             {senderId || formatMessage(messages.senderId)}
@@ -250,21 +250,21 @@ const RcsPreviewContent = ({
         </CapRow>
 
         {/* Date Separator - Same as SMS */}
-        <CapRow className="sms-date-separator">
+        <CapRow useLegacy className="sms-date-separator">
           <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
         </CapRow>
 
         {/* Message Container - Same structure as SMS, only content inside is RCS-specific */}
         <CapRow className="sms-message-container">
-          <CapRow className="sms-message-bubble">
-            <CapRow className="sms-message-text">
+          <CapRow useLegacy className="sms-message-bubble">
+            <CapRow useLegacy className="sms-message-text">
               {/* RCS-specific content rendering */}
-              <CapRow className="message-pop sms">
+              <CapRow useLegacy className="message-pop sms">
                 {contentToRender}
               </CapRow>
             </CapRow>
           </CapRow>
-          <CapRow className="sms-timestamp">
+          <CapRow useLegacy className="sms-timestamp">
             {timestamp}
           </CapRow>
         </CapRow>

package/v2Components/CommonTestAndPreview/UnifiedPreview/SmsPreviewContent.js

@@ -53,7 +53,7 @@ const SmsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -74,10 +74,10 @@ const SmsPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device}`}>
           <CapRow className="sms-error-container">
             <CapIcon type="exclamation-circle" className="exclamation-circle" />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -106,7 +106,7 @@ const SmsPreviewContent = ({
       {/* Content Overlay */}
       <CapRow className={`sms-content-overlay sms-content-overlay-${device} sms-preview sms-${device}`}>
         {/* Navigation Bar */}
-        <CapRow className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
+        <CapRow useLegacy className={`sms-navigation-bar ${!showHeader ? 'sms-navigation-bar-no-header' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
           <CapLabel type="label15" className="sms-sender-id">
             {senderId || formatMessage(messages.senderId)}
@@ -115,18 +115,18 @@ const SmsPreviewContent = ({
         </CapRow>
 
         {/* Date Separator */}
-        <CapRow className="sms-date-separator">
+        <CapRow useLegacy className="sms-date-separator">
           <FormattedMessage {...messages.timeAgo} defaultMessage="Today" />
         </CapRow>
 
         {/* Message Bubble */}
         <CapRow className="sms-message-container">
-          <CapRow className="sms-message-bubble">
-            <CapRow className="sms-message-text">
+          <CapRow useLegacy className="sms-message-bubble">
+            <CapRow useLegacy className="sms-message-text">
               {content || formatMessage(messages.noContent)}
             </CapRow>
           </CapRow>
-          <CapRow className="sms-timestamp">
+          <CapRow useLegacy className="sms-timestamp">
             {timestamp}
           </CapRow>
         </CapRow>

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -68,7 +68,7 @@ const ViberPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device} viber-content-overlay`}>
           <CapRow className="sms-loading-container">
             <CapSpin size="large" />
-            <CapRow className="sms-loading-text">
+            <CapRow useLegacy className="sms-loading-text">
               {formatMessage(messages.updatingPreview)}
             </CapRow>
           </CapRow>
@@ -89,10 +89,10 @@ const ViberPreviewContent = ({
         <CapRow className={`sms-content-overlay sms-content-overlay-${device} viber-content-overlay`}>
           <CapRow className="sms-error-container">
             <CapIcon type="exclamation-circle" className="exclamation-circle" />
-            <CapRow className="sms-error-text">
+            <CapRow useLegacy className="sms-error-text">
               {formatMessage(messages.previewError)}
             </CapRow>
-            <CapRow className="sms-error-message">{error}</CapRow>
+            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
           </CapRow>
         </CapRow>
       </CapRow>
@@ -113,9 +113,9 @@ const ViberPreviewContent = ({
       />
 
       {/* Content Overlay */}
-      <CapRow className={`sms-content-overlay sms-content-overlay-${device} ${device === ANDROID ? 'viber-content-overlay' : ''} viber-preview viber-${device}`}>
+      <CapRow useLegacy className={`sms-content-overlay sms-content-overlay-${device} ${device === ANDROID ? 'viber-content-overlay' : ''} viber-preview viber-${device}`}>
         {/* Navigation Bar (same as SMS) */}
-        <CapRow className={`sms-navigation-bar ${device === ANDROID && !showHeader ? 'viber-navigation-bar' : ''}`}>
+        <CapRow useLegacy className={`sms-navigation-bar ${device === ANDROID && !showHeader ? 'viber-navigation-bar' : ''}`}>
           <CapIcon type="chevron-left" className="sms-back-arrow" />
           <CapLabel type="label16" className="sms-sender-id">
             {displayBrandName}
@@ -125,7 +125,7 @@ const ViberPreviewContent = ({
 
         {/* Viber Message Container */}
         {hasContent && (
-          <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
+          <CapRow useLegacy className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
             {/* Brand Name Display (from TemplatePreview line 1136) */}
             <CapRow className="msg-container viber-preview">
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
@@ -181,7 +181,7 @@ const ViberPreviewContent = ({
                 <CapLabel type="label1" className="viber-timestamp">
                   {timestamp}
                 </CapLabel>
-                <CapRow className="empty-placeholder" />
+                <CapRow useLegacy className="empty-placeholder" />
               </CapRow>
 
             </CapRow>
@@ -191,9 +191,9 @@ const ViberPreviewContent = ({
 
         {/* No Content State */}
         {!hasContent && (
-          <CapRow className="viber-message-container">
-            <CapRow className="sms-message-bubble">
-              <CapRow className="sms-message-text">
+          <CapRow useLegacy className="viber-message-container">
+            <CapRow useLegacy className="sms-message-bubble">
+              <CapRow useLegacy className="sms-message-text">
                 {formatMessage(messages.noContent)}
               </CapRow>
             </CapRow>

package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js

@@ -115,8 +115,8 @@ const WhatsAppPreviewContent = ({
 
   // Render WhatsApp structure (common for all states) - Based on TemplatePreview lines 1229-1328
   const renderWhatsAppStructure = (contentSection) => (
-    <CapRow className="whatsapp-preview-wrapper">
-      <CapRow className="shell-v2-whatsapp align-center">
+    <CapRow useLegacy className="whatsapp-preview-wrapper">
+      <CapRow useLegacy className="shell-v2-whatsapp align-center">
         <CapImage
           className="preview-image"
           src={deviceImage}
@@ -125,11 +125,12 @@ const WhatsAppPreviewContent = ({
         <CapLabel className={`whatsapp-brand-name whatsapp-brand-name-${device}`}>
           {accountName || ''}
         </CapLabel>
-        <CapRow className={`msg-container whatsapp-message-container ${content?.carouselData && 'msg-container-carousel'}`}>
+        <CapRow useLegacy className={`msg-container whatsapp-message-container ${content?.carouselData && 'msg-container-carousel'}`}>
           <CapRow
+            useLegacy
             className={`message-pop align-left whatsapp-message-pop ${content?.carouselData && 'message-pop-carousel'}`}
           >
-            <CapRow className="whatsapp-content">
+            <CapRow useLegacy className="whatsapp-content">
               {contentSection}
             </CapRow>
           </CapRow>
@@ -140,7 +141,7 @@ const WhatsAppPreviewContent = ({
                   key={`carousel-${data?.bodyText || data?.imageSrc || data?.videoPreviewImg || Math.random()}`}
                   className="message-pop align-left message-pop-carousel whatsapp-message-pop-carousel"
                 >
-                  <CapRow className="whatsapp-content">
+                  <CapRow useLegacy className="whatsapp-content">
                     {content?.carouselMediaType === 'image' && (
                       <CapImage
                         src={data?.imageSrc ? data.imageSrc : whatsappImageEmptyPreview}
@@ -187,9 +188,9 @@ const WhatsAppPreviewContent = ({
   if (isUpdating) {
     // Loading state
     contentSection = (
-      <CapRow className="whatsapp-loading-container">
+      <CapRow useLegacy className="whatsapp-loading-container">
         <CapSpin size="large" />
-        <CapRow className="whatsapp-loading-text">
+        <CapRow useLegacy className="whatsapp-loading-text">
           {formatMessage(messages.updatingPreview)}
         </CapRow>
       </CapRow>
@@ -197,12 +198,12 @@ const WhatsAppPreviewContent = ({
   } else if (error) {
     // Error state
     contentSection = (
-      <CapRow className="whatsapp-error-container">
+      <CapRow useLegacy className="whatsapp-error-container">
         <CapIcon type="exclamation-circle" className="exclamation-circle" />
-        <CapRow className="whatsapp-error-text">
+        <CapRow useLegacy className="whatsapp-error-text">
           {formatMessage(messages.previewError)}
         </CapRow>
-        <CapRow className="whatsapp-error-message">{error}</CapRow>
+        <CapRow useLegacy className="whatsapp-error-message">{error}</CapRow>
       </CapRow>
     );
   } else if (content) {
@@ -245,7 +246,7 @@ const WhatsAppPreviewContent = ({
 
         {/* Document Preview */}
         {content?.docPreview && (
-          <CapRow className="whatsapp-image">
+          <CapRow useLegacy className="whatsapp-image">
             {content.docPreview}
           </CapRow>
         )}
@@ -290,7 +291,7 @@ const WhatsAppPreviewContent = ({
   } else {
     // No content state
     contentSection = (
-      <CapRow className="whatsapp-no-content">
+      <CapRow useLegacy className="whatsapp-no-content">
         {formatMessage(messages.noContent)}
       </CapRow>
     );

package/v2Components/CommonTestAndPreview/UnifiedPreview/ZaloPreviewContent.js

@@ -33,23 +33,24 @@ const ZaloPreviewContent = ({
   // Render Zalo preview - exact structure from TemplatePreview (lines 1356-1385)
   return (
     <CapRow
+      useLegacy
       className={`zalo-preview-container ${
         fullMode
           ? "zalo-preview-container-creative"
           : "zalo-preview-container-campaign"
       }`}
     >
-      <CapRow>
+      <CapRow useLegacy>
         <CapLabel className="preview-head">
           {formatMessage(zaloMessages.previewHead)}
         </CapLabel>
       </CapRow>
-      <CapRow>
+      <CapRow useLegacy>
         <CapLabel className="preview-text">
           {formatMessage(zaloMessages.previewText)}
         </CapLabel>
       </CapRow>
-      <CapRow>
+      <CapRow useLegacy>
         <CapLabel
           data-testid="preview-link-button"
           onClick={handlePreview}

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -289,7 +289,8 @@
       .preview-loading-container {
         flex: 1;
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
         gap: $CAP_SPACE_16;
@@ -508,7 +509,8 @@
 
       .loading-container {
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
         height: 100%;
@@ -709,7 +711,8 @@
       .sms-loading-container {
         flex: 1;
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
         gap: $CAP_SPACE_16;
@@ -801,7 +804,8 @@
 
       &.msg-container-carousel {
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
+        flex-flow: column nowrap;
 
         .scroll-container {
           overflow-x: auto;
@@ -967,7 +971,8 @@
         color: #ff4d4f;
       }
       display: flex;
-      flex-direction: column;
+      flex-direction: column !important;
+      flex-flow: column nowrap;
       align-items: center;
       justify-content: center;
       gap: $CAP_SPACE_16;

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -282,7 +282,7 @@ const UnifiedPreview = ({
       )}
 
       {/* Channel-specific preview content */}
-      <CapRow className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
+      <CapRow useLegacy className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
         {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER].includes(channel) ? (
           renderChannelContent()
         ) : (

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -31,10 +31,8 @@
 /* Customer creation modal content – avoid inline styles */
 .common-test-preview-modal.common-test-preview-modal {
   color: $CAP_G01;
-  width: 32.571em;
   margin-left: auto;
   margin-right: auto;
-  max-width: 32.571em;
 
   .ant-modal-footer {
     text-align: left;
@@ -302,7 +300,8 @@
 
   .loading-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
     align-items: center;
     justify-content: center;
     padding: $CAP_SPACE_32;
@@ -635,7 +634,7 @@
 
 .test-customer-add-btn {
   width: 100%;
-  &.ant-btn.cap-button-v2.flat-btn {
+  &.ant-btn.cap-button-v2.ant-btn-link {
     background-color: transparent;
     color: $FONT_COLOR_05;
   }

package/v2Components/CommonTestAndPreview/index.js

@@ -2983,7 +2983,7 @@ const CommonTestAndPreview = (props) => {
           <CapRow className="test-preview-container">
             <CapRow className="test-and-preview-panels">
               {/* Left Panel */}
-              <CapRow className="left-panel">
+              <CapRow useLegacy className="left-panel">
                 {channel === CHANNELS.ZALO ? null : renderLeftPanelContent()}
                 <CapDivider className="panel-divider" />