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

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -281,7 +281,7 @@ export const CapWhatsappCarouselButton = (props) => {
       )
       }
       {/* it render save and delete button */}
-      <CapRow className="whatsapp-cta-save-delete-btn whatsapp-carousel-save-edit-btn">
+      <CapRow useLegacy className="whatsapp-cta-save-delete-btn whatsapp-carousel-save-edit-btn">
         <CapTooltip
           title={
             ctaSaveDisabled(buttonIndex)
@@ -379,7 +379,7 @@ export const CapWhatsappCarouselButton = (props) => {
                   </CapColumn>
                   {parseInt(carouselIndex, 10) === 0 && (
                     <CapColumn span={1}>
-                      <CapButton type="flat" className="whatsapp-carousel-delete-icon-btn" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}>
+                      <CapButton type="link" className="whatsapp-carousel-delete-icon-btn" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}>
                         <CapIcon size="s" type="delete" />
                       </CapButton>
                     </CapColumn>
@@ -415,7 +415,7 @@ export const CapWhatsappCarouselButton = (props) => {
             </CapRow>
           );
         } return (
-          <CapRow
+          <CapRow useLegacy
             key={`${button.buttonType}_${index}`}
             className="cap-whatsapp-carousel-button"
           >
@@ -431,32 +431,30 @@ export const CapWhatsappCarouselButton = (props) => {
           </CapRow>
         );
       })}
-      <CapRow>
-        {/* user can add only two button in the first carousel in other carousel user dont allow to add buttons */}
-        {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex, 10) === 0 && (
-          <CapRow>
-            <CapTooltip
-              title={
-                isCarouselAddButtonDisable ? formatMessage(capWhatsappCTAMsg.ctaAddDisabled) : ""
-              }
-              placement="right"
-            >
-              <div className="button-disabled-tooltip-wrapper">
-                <CapButton
-                  type="flat"
-                  id="whatsapp-quick-reply-add-button"
-                  disabled={isCarouselAddButtonDisable}
-                  className="margin-t-12 margin-l-24"
-                  isAddBtn
-                  onClick={addCarouselButton}
-                >
-                  {formatMessage(capWhatsappCTAMsg.addButton)}
-                </CapButton>
-              </div>
-            </CapTooltip>
-          </CapRow>
-        )}
-      </CapRow>
+      {/* user can add only two button in the first carousel in other carousel user dont allow to add buttons */}
+      {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex, 10) === 0 && (
+        <CapRow useLegacy>
+          <CapTooltip
+            title={
+              isCarouselAddButtonDisable ? formatMessage(capWhatsappCTAMsg.ctaAddDisabled) : ""
+            }
+            placement="right"
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                type="link"
+                id="whatsapp-quick-reply-add-button"
+                disabled={isCarouselAddButtonDisable}
+                className="margin-t-12 margin-l-24"
+                isAddBtn
+                onClick={addCarouselButton}
+              >
+                {formatMessage(capWhatsappCTAMsg.addButton)}
+              </CapButton>
+            </div>
+          </CapTooltip>
+        </CapRow>
+      )}
     </CapRow>
   );
 };

package/v2Components/CapWhatsappQuickReply/index.js

@@ -121,13 +121,13 @@ export const CapWhatsappQuickReply = (props) => {
         </> :
         <>
       {quickReplyDataLength > 0 && !isEditFlow && (
-        <CapRow>
+        <CapRow useLegacy>
           {quickReplyData?.map(({ index, isSaved, text, error }) => {
             if (!isSaved) {
               //this section is render textfield when its not saved or in edit condition
               return (
-                <CapRow className="cap-whatsapp-quick-reply">
-                  <CapRow
+                <CapRow useLegacy className="cap-whatsapp-quick-reply">
+                  <CapRow useLegacy
                     className="whatsapp-button-text-container"
                     key={index}
                   >
@@ -147,7 +147,7 @@ export const CapWhatsappQuickReply = (props) => {
                         </CapHeading>
                       }
                     />
-                      <CapRow className="whatsapp-button-text-input">
+                      <CapRow useLegacy className="whatsapp-button-text-input">
                         <TextArea
                           autosize={{ minRows: 1, maxRows: 5 }}
                           placeholder={formatMessage(
@@ -166,7 +166,7 @@ export const CapWhatsappQuickReply = (props) => {
                       </CapRow>
                     {renderMessageLength(BUTTON_TEXT, text?.length || 0)}
                     {/* it render save and delete button */}
-                      <CapRow className="whatsapp-cta-save-delete-btn">
+                      <CapRow useLegacy className="whatsapp-cta-save-delete-btn">
                         <CapTooltip
                           title={
                           (text === "" || error)
@@ -217,7 +217,7 @@ export const CapWhatsappQuickReply = (props) => {
       }
       {/* this section render add button section with condition */}
       {quickReplyDataLength < 3 && !isEditFlow && (
-        <CapRow>
+        <CapRow useLegacy>
           <CapTooltip
             title={
               isQuickReplyDisable ? formatMessage(ctaMessages.ctaAddDisabled) : ""
@@ -226,7 +226,7 @@ export const CapWhatsappQuickReply = (props) => {
           >
             <div className="button-disabled-tooltip-wrapper">
               <CapButton
-                type="flat"
+                type="link"
                 id="whatsapp-quick-reply-add-button"
                 disabled={isQuickReplyDisable}
                 className="margin-t-12 margin-l-24"

package/v2Components/Carousel/index.js

@@ -26,7 +26,7 @@ const Arrow = (props) => {
     <CapButton
       className={className}
       onClick={onClick}
-      type="flat"
+      type="link"
       style={{
         ...style,
         ...arrowStyle,

package/v2Components/CommonTestAndPreview/AddTestCustomer.js

@@ -11,7 +11,7 @@ const AddTestCustomerButton = ({
 }) => (
   <CapButton
     onClick={handleAddTestCustomer}
-    type="flat"
+    type="link"
     size="small"
     className="test-customer-add-btn"
     prefix={

package/v2Components/CommonTestAndPreview/CustomValuesEditor.js

@@ -27,9 +27,9 @@ const CustomValuesEditor = ({
 }) => {
   if (isExtractingTags) {
     return (
-      <CapRow className="loading-container">
+      <CapRow useLegacy className="loading-container">
         <CapSpin size="large" />
-        <CapRow className="loading-text">
+        <CapRow useLegacy className="loading-text">
           <FormattedMessage {...messages.extractingTags} />
         </CapRow>
       </CapRow>
@@ -44,7 +44,7 @@ const CustomValuesEditor = ({
         </CapLabel>
       )}
       <CapRow className="editor-header">
-        <CapRow className="json-toggle">
+        <CapRow className="json-toggle" align='middle' justify='start'>
           <span className="toggle-label">
             <FormattedMessage {...messages.showJSON} />
           </span>
@@ -57,7 +57,7 @@ const CustomValuesEditor = ({
       </CapRow>
       {showJSON ? (
         <CapRow className="json-editor">
-          <CapRow className="json-editor-container">
+          <CapRow className="json-editor-container" align='center' justify='start'>
             <CapRow className="line-numbers">
               {JSON.stringify(customValues, null, 2).split('\n').map((_, index) => (
                 <CapRow key={`line-${index + 1}`} className="line-number">
@@ -79,7 +79,7 @@ const CustomValuesEditor = ({
         <>
           {extractedTags?.length > 0 && (
             <CapRow className="values-table">
-              <CapRow className="table-header">
+              <CapRow className="table-header" align='middle' justify='space-between'>
                 <CapLabel type="label31" className="header-cell">
                   <FormattedMessage {...messages.personalizationTags} />
                 </CapLabel>
@@ -88,10 +88,9 @@ const CustomValuesEditor = ({
                 </CapLabel>
               </CapRow>
               {requiredTags.map((tag) => (
-                <CapRow key={tag.fullPath} className="value-row">
-                  <CapRow className="tag-name">
-                    {tag.fullPath}
-                    <span className="required-tag-indicator">*</span>
+                <CapRow key={tag.fullPath} className="value-row" align='middle' justify='start'>
+                  <CapRow className="tag-name" align='top' justify='start'>
+                    {`${tag.fullPath}*`}
                   </CapRow>
                   <CapRow className="tag-input">
                     <CapInput
@@ -125,10 +124,10 @@ const CustomValuesEditor = ({
           )}
         </>
       )}
-      <CapRow className="editor-actions">
+      <CapRow type='flex' align='middle' justify='space-between' className="editor-actions">
         <CapButton
           className="discard-button"
-          type="flat"
+          type="link"
           size="small"
           onClick={handleDiscardCustomValues}
           icon="close"

package/v2Components/CommonTestAndPreview/CustomerCreationModal.js

@@ -45,7 +45,7 @@ const CustomerCreationModal = ({
       width={500}
       maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
       footer={
-        <CapRow justify="start" gutter={8}>
+        <CapRow useLegacy justify="start" gap={8}>
             <CapButton
               type="primary"
               onClick={() => onSave(EMPTY_VALIDATION, setIsLoading)}

package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js

@@ -238,7 +238,7 @@ const ModifyDeliverySettings = (props) => {
     ({
       titleMessage, options, value, onChange, rowKey, disabled,
     }) => (
-      <CapRow className="modify-delivery-settings__field-row" key={rowKey}>
+      <CapRow useLegacy className="modify-delivery-settings__field-row" key={rowKey}>
         <CapHeader
           size="label"
           title={<FormattedMessage {...titleMessage} />}
@@ -367,20 +367,20 @@ const ModifyDeliverySettings = (props) => {
 
   if (isLoading) {
     return (
-      <CapRow className="modify-delivery-settings__loading-row">
+      <CapRow useLegacy className="modify-delivery-settings__loading-row">
         <CapSpin spinning />
       </CapRow>
     );
   }
 
   return (
-    <CapRow className="modify-delivery-settings">
+    <CapRow useLegacy className="modify-delivery-settings">
       {getChannelFields().map((field, idx) => renderSelectRow({
         ...field,
         rowKey: field.titleMessage?.id || `${ROW_KEY_PREFIX}${idx}`,
         disabled: field.disabled,
       }))}
-      <CapRow className="modify-delivery-settings__actions">
+      <CapRow useLegacy className="modify-delivery-settings__actions">
         <CapButton type="primary" onClick={handleDone}>
           <FormattedMessage {...messages.done} />
         </CapButton>

package/v2Components/CommonTestAndPreview/DeliverySettings/index.js

@@ -151,7 +151,7 @@ const DeliverySettings = (props) => {
   const summaryObject = getSummaryObject();
 
   return (
-    <CapRow className="delivery-settings">
+    <CapRow useLegacy className="delivery-settings">
       <CapRow className="delivery-settings__heading-row">
         <CapHeading type="h10">
           <FormattedMessage {...messages.deliverySettings} />

package/v2Components/CommonTestAndPreview/ExistingCustomerModal.js

@@ -19,7 +19,7 @@ const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerDa
       width={500}
       maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
       footer={
-        <CapRow justify="start">
+        <CapRow useLegacy justify="start">
           <CapButton
             type="primary"
             onClick={() => onSave({}, setIsLoading)}
@@ -42,7 +42,7 @@ const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerDa
       className="common-test-preview-modal"
     >
       <div className="existing-customer-modal">
-        <CapRow className="existing-customer-modal-intro-row">
+        <CapRow useLegacy className="existing-customer-modal-intro-row">
           <FormattedMessage {...messages.existingCustomerModalDescription} />
         </CapRow>
         <CapCard className="existing-customer-modal-card">
@@ -51,17 +51,17 @@ const ExistingCustomerModal = ({ customerModal, onCloseCustomerModal, customerDa
               <CapIcon type="user-profile" className="existing-customer-modal-avatar-icon" />
             </CapColumn>
             <CapColumn className="existing-customer-modal-details">
-              <CapRow className="existing-customer-modal-name">
+              <CapRow useLegacy className="existing-customer-modal-name">
                 {customerData.name || "-"}
               </CapRow>
               <CapColumn className="existing-customer-modal-meta">
                 {channel === CHANNELS.EMAIL && customerData.email && (
-                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerEmail} />: </span> {customerData.email}</CapRow>
+                  <CapRow useLegacy><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerEmail} />: </span> {customerData.email}</CapRow>
                 )}
                 {channel === CHANNELS.SMS && customerData.mobile && (
-                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerMobile} />: </span>{customerData.mobile}</CapRow>
+                  <CapRow useLegacy><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerMobile} />: </span>{customerData.mobile}</CapRow>
                 )}
-                <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerID} />: </span>{customerData.customerId}</CapRow>
+                <CapRow useLegacy><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerID} />: </span>{customerData.customerId}</CapRow>
               </CapColumn>
             </CapColumn>
           </CapRow>

package/v2Components/CommonTestAndPreview/LeftPanelContent.js

@@ -28,9 +28,9 @@ const LeftPanelContent = ({
 }) => {
   if (isExtractingTags) {
     return (
-      <CapRow className="loading-container">
+      <CapRow useLegacy className="loading-container">
         <CapSpin size="large" />
-        <CapRow className="loading-text">
+        <CapRow useLegacy className="loading-text">
           <FormattedMessage {...messages.extractingTags} />
         </CapRow>
       </CapRow>
@@ -41,7 +41,7 @@ const LeftPanelContent = ({
       <>
         {/* Customer Search Section - Only show if enabled */}
         {enableCustomerSearch && (
-          <CapRow className="panel-section customer-section">
+          <CapRow useLegacy className="panel-section customer-section">
             <CapHeader size="label1" title={<FormattedMessage {...messages.customerSearchTitle} />} />
             <CustomerSearchSection
               selectedCustomer={selectedCustomer}
@@ -66,8 +66,8 @@ const LeftPanelContent = ({
         )}
         {/* Tags Section - Only show if tag extraction enabled */}
         {enableTagExtraction && !tagsExtracted && (
-          <CapRow className="panel-section">
-            <CapButton type="flat" className="extract-tags-button" onClick={handleExtractTags}>
+          <CapRow useLegacy className="panel-section">
+            <CapButton type="link" className="extract-tags-button" onClick={handleExtractTags}>
               <CapLabel type="label33">
                 <FormattedMessage {...messages.enterCustomValuesForTags} />
               </CapLabel>

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/PreviewHeader.js

@@ -45,7 +45,7 @@ const PreviewHeader = ({
           </CapLabel>
         </CapRow>
         {showDeviceToggle && (
-          <CapRow className="device-toggle">
+          <CapRow type="flex" align="middle" className="device-toggle">
             {isAndroidIosToggle ? (
               // Android/iOS toggle for SMS, WhatsApp, RCS, InApp, and MobilePush
               <>