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

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -7,8 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // import { connect } from 'react-redux';
-import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
-import { CapHeading, CapLabel, CapTab, CapIcon, CapImage } from '@capillarytech/cap-ui-library/';
+import { CapRow, CapColumn, CapButton, CapHeading, CapLabel, CapTab, CapIcon, CapImage } from '@capillarytech/cap-ui-library';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import './_wechatRichmediaTemplatePrev.scss';
@@ -61,12 +60,12 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
       if (id === 0) {
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
-            <CapRow>
+            <CapRow useLegacy>
               <CapImage alt="default" width="100%" height="110px" src={contentData.image_url} />
               <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "10%", width: "auto" }}>{contentData.title ? contentData.title : ""}</div>
             </CapRow>
             {Object.keys(mediaList).length === 1 ?
-              <CapRow style={{ height: 32, left: "12%" }}>
+              <CapRow useLegacy style={{ height: 32, left: "12%" }}>
                 {contentData.digest ? contentData.digest : ""}
               </CapRow>
               :

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -818,7 +818,8 @@
 
   .msg-container-carousel {
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
     .scroll-container {
       overflow-x: auto;
       display: flex;
@@ -987,7 +988,7 @@
   margin-bottom: 12px;
 }
 
-.ant-btn.cap-button-v2.flat-btn.preview-video-btn {
+.ant-btn.cap-button-v2.ant-btn-link.preview-video-btn {
   padding: 0;
   background-color: transparent;
   height: auto;
@@ -1218,7 +1219,8 @@
             padding: $CAP_SPACE_08;
             text-align: center;
             display: flex;
-            flex-direction: column;
+            flex-direction: column !important;
+            flex-flow: column nowrap;
             align-items: center;
             justify-content: center;
             gap: $CAP_SPACE_08;

package/v2Components/TemplatePreview/index.js

@@ -196,7 +196,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   </CapRow>
                 </CapRow>
               )}
-              <CapRow className="carousel-content">
+              <CapRow useLegacy className="carousel-content">
                 <CapLabel className="carousel-title">
                   {item?.title || item?.header || ""}
                 </CapLabel>
@@ -350,7 +350,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                 >
                   <CapButton
                     className="preview-video-btn"
-                    type="flat"
+                    type="link"
                   >
                   <CapIcon type="play"/>
                     <FormattedMessage {...messages.playVideo} />
@@ -360,7 +360,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       ? (
                         <CapButton
                           className="preview-video-btn"
-                          type="flat"
+                          type="link"
                         >
                       <CapIcon type="reply" style={{ fontSize: 18 }}/>
                           <FormattedMessage {...messages.showDetails} />
@@ -739,6 +739,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   !!content.bodyText ||
                   !!content.bodyImage || !!content.bodyVideo?.videoSrc || !!content.bodyGif) && (
                   <CapRow
+                    useLegacy
                     className={`${
                       this.props.device === "ios" ? "iphone" : this.props.device
                     }-push-message-Container`}
@@ -757,7 +758,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapRow>
                         <CapLabel className="body-text">{content.bodyText}</CapLabel>
                         {(content.bodyImage || content?.bodyVideo?.videoSrc || content?.bodyGif) && (
-                          <CapRow className="body-image">
+                          <CapRow useLegacy className="body-image">
                             {(() => {
                               if (content?.bodyVideo?.videoSrc && !content?.bodyImage && !content?.bodyGif) {
                                 return (
@@ -821,7 +822,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         </CapRow>
                         <CapLabel className="body-text">{content.bodyText}</CapLabel>
                         {(content?.bodyImage || content?.bodyVideo?.videoSrc || content?.bodyGif) && (
-                          <CapRow className="body-image">
+                          <CapRow useLegacy className="body-image">
                             {(() => {
                               if (content?.bodyVideo?.videoSrc && !content?.bodyImage && !content?.bodyGif) {
                                 return (
@@ -1303,23 +1304,24 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             )}
             {channel?.toUpperCase() === ZALO && (
               <CapRow
+                useLegacy
                 className={`zalo-preview-container ${
                   templateData?.fullMode
                     ? "zalo-preview-container-creative"
                     : "zalo-preview-container-campaign"
                 }`}
               >
-                <CapRow>
+                <CapRow useLegacy>
                   <CapLabel className="preview-head">
                     {formatMessage(zaloMessage.previewHead)}
                   </CapLabel>
                 </CapRow>
-                <CapRow>
+                <CapRow useLegacy>
                   <CapLabel className="preview-text">
                     {formatMessage(zaloMessage.previewText)}
                   </CapLabel>
                 </CapRow>
-                <CapRow>
+                <CapRow useLegacy>
                   <CapLabel
                     data-testid="preview-link-button"
                     onClick={handlePreview}
@@ -1356,7 +1358,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             {channel?.toUpperCase() === INAPP && (
               isBeeFreeTemplate ? (
                   <div className="shell-v2 align-center">
-                    <CapRow className="preview-image-container">
+                    <CapRow useLegacy className="preview-image-container">
                       <CapImage
                         className="preview-image"
                         src={this.props.device === ANDROID ? inAppMobileDeviceAndroid : inAppMobileDeviceIos}

package/v2Components/TestAndPreviewSlidebox/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>
@@ -128,7 +128,7 @@ const CustomValuesEditor = ({
       <div className="editor-actions">
         <CapButton
           className="discard-button"
-          type="flat"
+          type="link"
           size="small"
           onClick={handleDiscardCustomValues}
           icon="close"

package/v2Components/TestAndPreviewSlidebox/LeftPanelContent.js

@@ -25,9 +25,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>
@@ -37,7 +37,7 @@ const LeftPanelContent = ({
     return (
       <>
         {/* Customer Search Section */}
-        <CapRow className="panel-section customer-section">
+        <CapRow useLegacy className="panel-section customer-section">
           <CapHeader size="label1" title={<FormattedMessage {...messages.customerSearchTitle} />} />
           <CustomerSearchSection
             selectedCustomer={selectedCustomer}
@@ -50,8 +50,8 @@ const LeftPanelContent = ({
         </CapRow>
         {/* Tags Section */}
         {!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/TestAndPreviewSlidebox/PreviewSection.js

@@ -15,7 +15,7 @@ const PreviewSection = ({
   formatMessage,
   PreviewChrome,
 }) => (
-  <CapRow className="test-and-preview-section panel-section">
+  <CapRow useLegacy className="test-and-preview-section panel-section">
     <PreviewChrome
       device={previewDevice}
       onDeviceChange={setPreviewDevice}
@@ -23,9 +23,9 @@ const PreviewSection = ({
       subject={previewDataHtml?.resolvedTitle || formData['template-subject']}
     >
       {isUpdatingPreview && (
-        <CapRow className="loading-container">
+        <CapRow useLegacy className="loading-container">
           <CapSpin />
-          <CapRow className="loading-text">{formatMessage(messages.updatingPreview)}</CapRow>
+          <CapRow useLegacy className="loading-text">{formatMessage(messages.updatingPreview)}</CapRow>
         </CapRow>
       )}
       {!isUpdatingPreview && previewDataHtml && (

package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss

@@ -31,7 +31,8 @@
     margin-left: 2%;
     height: 100%;
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
   }
 
   .discard-button {
@@ -79,7 +80,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;

package/v2Containers/BeePopupEditor/index.js

@@ -152,7 +152,7 @@ function BeePopupEditor(props) {
   };
 
   return (
-    <CapRow>
+    <CapRow useLegacy>
       <div id="bee-plugin-container" className="bee-popup-editor__container"></div>
       <TagList
         moduleFilterEnabled={moduleFilterEnabled}

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -127,7 +127,7 @@ const CommunicationFlow = ({
     switch (step) {
       case STEPS.MESSAGE_TYPE:
         return (
-          <CapRow key={step}>
+          <CapRow useLegacy key={step}>
             <MessageTypeStep
               {...commonProps}
               value={stepData.messageType}
@@ -140,7 +140,7 @@ const CommunicationFlow = ({
         );
       case STEPS.COMMUNICATION_STRATEGY:
         return (
-          <CapRow key={step}>
+          <CapRow useLegacy key={step}>
             <CommunicationStrategyStep
               {...commonProps}
               value={stepData.communicationStrategy}
@@ -158,7 +158,7 @@ const CommunicationFlow = ({
           return null;
         }
         return (
-          <CapRow key={step}>
+          <CapRow useLegacy key={step}>
             <ChannelSelectionStep
               {...commonProps}
               value={stepData}
@@ -206,10 +206,10 @@ const CommunicationFlow = ({
   }), [enabledSteps, stepData, validationErrors, config, handleStepChange, messageTypeData, communicationStrategyData, contentTemplateData]);
 
   return (
-    <CapRow className="communication-flow-container">
+    <CapRow useLegacy className="communication-flow-container">
       {renderSteps()}
       {onSave && (
-        <CapRow className="communication-flow-container__footer">
+        <CapRow useLegacy className="communication-flow-container__footer">
           <CapButton type="primary" onClick={() => onSave(getAggregatedData())}>
             {formatMessage(messages.save)}
           </CapButton>

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.js

@@ -367,7 +367,7 @@ const ChannelSelectionStep = ({
             onVisibleChange={(visible) => handleIncentivesVisibleChange(visible, item.contentId)}
             visible={!!showIncentivesMenuMap[item.contentId]}
           >
-            <CapButton isAddBtn type="flat" className="add-incentives-button add-incentive-link">
+            <CapButton isAddBtn type="link" className="add-incentives-button add-incentive-link">
               {formatMessage(messages.addIncentive)}
             </CapButton>
           </CapDropdown>
@@ -389,6 +389,7 @@ const ChannelSelectionStep = ({
         </CapHeading>
 
         <CapRow
+          useLegacy
           className={`content-template-container ${contentItems?.length > 0 ? 'content-template-container--has-content' : ''}`}
         >
           {contentItems?.length === 0 ? (
@@ -427,7 +428,7 @@ const ChannelSelectionStep = ({
                   onVisibleChange={(visible) => handleIncentivesVisibleChange(visible, 'standalone')}
                   visible={!!showIncentivesMenuMap.standalone}
                 >
-                  <CapButton isAddBtn type="flat" className="add-incentive-button">
+                  <CapButton isAddBtn type="link" className="add-incentive-button">
                     {formatMessage(messages.addIncentive)}
                   </CapButton>
                 </CapDropdown>
@@ -449,7 +450,7 @@ const ChannelSelectionStep = ({
         </CapRow>
 
         {error && (
-          <CapRow className="validation-error">
+          <CapRow useLegacy className="validation-error">
             {error}
           </CapRow>
         )}

package/v2Containers/CommunicationFlow/steps/CommunicationStrategyStep/CommunicationStrategyStep.js

@@ -53,7 +53,7 @@ const CommunicationStrategyStep = ({
   const selectValue = (value === null || value === '') ? undefined : value;
 
   return (
-    <CapRow className="communication-strategy-step">
+    <CapRow useLegacy className="communication-strategy-step">
       <CapHeading type="h3" className="heading-style">
         {formatMessage(messages.communicationStrategyHeading)}
       </CapHeading>
@@ -68,7 +68,7 @@ const CommunicationStrategyStep = ({
       />
 
       {error && (
-        <CapRow className="validation-error">
+        <CapRow useLegacy className="validation-error">
           {error}
         </CapRow>
       )}

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/DeliverySettingsSection.js

@@ -216,13 +216,14 @@ const DeliverySettingsSection = ({
   return (
     <>
       <CapRow
+        useLegacy
         type="flex"
         align="middle"
         justify="space-between"
         className="delivery-settings-section delivery-settings-section--clickable"
         onClick={() => setShowSlidebox(true)}
       >
-        <CapRow type="flex" className="delivery-settings-section__content">
+        <CapRow useLegacy type="flex" className="delivery-settings-section__content">
           <CapHeading type="h5">
             {formatMessage(messages.senderDetails)}
           </CapHeading>
@@ -236,7 +237,7 @@ const DeliverySettingsSection = ({
                 return value != null && value !== '';
               })
               .map((channelConfig) => (
-                <CapRow key={`${channel}-${channelConfig.valueKey}`} type="flex" align="middle" justify="space-between" className="delivery-settings-section__field-row">
+                <CapRow useLegacy key={`${channel}-${channelConfig.valueKey}`} type="flex" align="middle" justify="space-between" className="delivery-settings-section__field-row">
                   <CapHeading type="label4" className="delivery-settings-section__label">
                     {formatMessage(messages[channelConfig.labelKey])}
                   </CapHeading>

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/SenderDetails.js

@@ -180,7 +180,7 @@ const SenderDetails = ({
   );
 
   const footer = (
-    <CapRow className="sender-details__footer">
+    <CapRow useLegacy className="sender-details__footer">
       <CapButton type="primary" onClick={handleSave} disabled={!hasChanges || !hasAllValues}>
         {formatMessage(messages.saveChanges)}
       </CapButton>
@@ -209,11 +209,11 @@ const SenderDetails = ({
         />
       );
       return (
-        <CapRow key={fieldKey} className="sender-details__field">
+        <CapRow useLegacy key={fieldKey} className="sender-details__field">
           <CapHeading type="h4">{formatMessage(messages[messageKey] || { defaultMessage: messageKey })}</CapHeading>
-          <CapRow type="flex" align="middle" className="sender-details__field-row">
+          <CapRow useLegacy type="flex" align="middle" className="sender-details__field-row">
             {fieldKey === 'whatsappAccount' ? (
-              <CapTooltip title={formatMessage(messages.whatsappAccountTooltip)} overlayClassName="sender-details__account-name-tooltip">
+              <CapTooltip title={formatMessage(messages.whatsappAccountTooltip)} overlayStyle={{ width: '21.3rem' }}>
                 {selectNode}
               </CapTooltip>
             ) : selectNode}
@@ -236,9 +236,9 @@ const SenderDetails = ({
         ? formatMessage(messages.domainGatewayError)
         : formatMessage(messages.senderNotConfiguredError);
       return (
-        <CapRow key={fieldKey} className="sender-details__field">
+        <CapRow useLegacy key={fieldKey} className="sender-details__field">
           <CapHeading type="h4">{formatMessage(messages[messageKey] || { defaultMessage: messageKey })}</CapHeading>
-          <CapRow type="flex" align="middle" className="sender-details__field-row">
+          <CapRow useLegacy type="flex" align="middle" className="sender-details__field-row">
             <CapSelect
               value={value}
               onChange={(val) => handleFieldChange(fieldKey, val)}
@@ -271,7 +271,7 @@ const SenderDetails = ({
 
   const content = (
     <CapSpin spinning={loading}>
-      <CapRow className="sender-details__content">
+      <CapRow useLegacy className="sender-details__content">
         {error && <CapLabel type="label2" className="sender-details__error">{error}</CapLabel>}
         {!loading && !error && entity && fieldConfigs.length > 0 && (
         <>

package/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/SenderDetails.scss

@@ -61,9 +61,4 @@
   &__footer {
     justify-content: flex-end;
   }
-  &__account-name-tooltip {
-    .ant-tooltip-content {
-      width: 21.3rem;
-    }
-  }
 }

package/v2Containers/CommunicationFlow/steps/DynamicControlsStep/DynamicControlsStep.js

@@ -49,7 +49,7 @@ const DynamicControlsStep = ({
             justify="space-between"
             className="dynamic-controls-step__row"
           >
-            <CapRow className="dynamic-controls-step__label-wrap">
+            <CapRow useLegacy className="dynamic-controls-step__label-wrap">
               <CapHeading type="h4" className="dynamic-controls-step__label">
                 {displayLabel}
               </CapHeading>
@@ -69,7 +69,7 @@ const DynamicControlsStep = ({
       })}
 
       {error && (
-        <CapRow className="validation-error dynamic-controls-step__error">
+        <CapRow useLegacy className="validation-error dynamic-controls-step__error">
           {error}
         </CapRow>
       )}

package/v2Containers/CommunicationFlow/steps/MessageTypeStep/MessageTypeStep.js

@@ -34,7 +34,7 @@ const MessageTypeStep = ({
   };
 
   return (
-    <CapRow className="message-type-step">
+    <CapRow useLegacy className="message-type-step">
       <CapHeading type="h3" className="heading-style">
         {formatMessage(messages.messageTypeHeading)}
       </CapHeading>
@@ -53,7 +53,7 @@ const MessageTypeStep = ({
       </CapRow>
 
       {error && (
-        <CapRow className="validation-error">
+        <CapRow useLegacy className="validation-error">
           {error}
         </CapRow>
       )}

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -181,7 +181,7 @@ function SlideBoxFooter(props) {
                 <FormattedMessage {...messages.templateNameEmpty} />
               </CapError>
             )}
-            <CapRow>
+            <CapRow useLegacy>
               <CapButton
                 onClick={onSave}
                 disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}

package/v2Containers/CreativesContainer/index.js

@@ -2165,7 +2165,7 @@ export class Creatives extends React.Component {
               hasPersonalizationTokenError={this.state.hasPersonalizationTokenError}
             />
           ) : isLiquidValidationError && (
-            <CapRow className="template-footer-width">
+            <CapRow useLegacy className="template-footer-width">
               {(() => {
                 const errorsToShow = get(liquidErrorMessage, constants.LIQUID_ERROR_MSG, []);
                 const standardErrorsToShow = get(liquidErrorMessage, constants.STANDARD_ERROR_MSG, []);

package/v2Containers/Ebill/index.js

@@ -8,7 +8,8 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
-import { Spin, Row, Col, Breadcrumb } from 'antd';
+import { Spin, Breadcrumb } from 'antd';
+import { CapRow, CapColumn } from '@capillarytech/cap-ui-library';
 import Helmet from 'react-helmet';
 import { intlShape } from 'react-intl';
 import _ from 'lodash';
@@ -1168,8 +1169,8 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
           title="Ebill"
         />
         <Spin spinning={spinning}>
-          {this.props.location.query.type !== 'embedded' && <Row>
-            <Col span={24}>
+          {this.props.location.query.type !== 'embedded' && <CapRow>
+            <CapColumn span={24}>
               {this.props.location.query.type !== "embedded" &&
                 <Breadcrumb>
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
@@ -1177,10 +1178,10 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.ebill)}</BreadcrumbItem>
                 </Breadcrumb>
               }
-            </Col>
-          </Row>}
-          <Row>
-            <Col>
+            </CapColumn>
+          </CapRow>}
+          <CapRow>
+            <CapColumn>
               <FormBuilder
                 schema={schema}
                 onSubmit={this.saveFormData}
@@ -1208,8 +1209,8 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
                 // supportedLanguages={this.props.Global.currentOrgDetails.basic_details.supported_languages}
                 // isSchemaChanged={this.state.isSchemaChanged}
               />
-            </Col>
-          </Row>
+            </CapColumn>
+          </CapRow>
         </Spin>
         {/* <div style={{display: 'inline-block', verticalAlign: 'top', width: '100%', height: '450px', borderLeft: '1px solid #b7b7b7'}}>
           <div style={{width: "100%", height: '100%'}}>

package/v2Containers/Email/index.js

@@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
-import { Row, Col, Popover, Modal } from 'antd';
+import { Popover, Modal } from 'antd';
 import { intlShape, FormattedMessage } from 'react-intl';
-import { CapButton, CapIcon, CapInput, CapSpin, CapSlideBox, CapCustomCard, CapNotification, CapImage } from '@capillarytech/cap-ui-library';
+import { CapButton, CapIcon, CapInput, CapSpin, CapSlideBox, CapCustomCard, CapNotification, CapImage, CapRow, CapColumn } from '@capillarytech/cap-ui-library';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";
@@ -3024,7 +3024,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           display: 'inline-block',
           padding: '0 6px',
         }}
-        type="flat"
+        type="link"
         onClick={() => action === 'PREVIEW' ? onPreviewContentClicked(testOrPreviewProps) : onTestContentClicked(testOrPreviewProps)}
       >
         <CapIcon type={action === 'PREVIEW' ? "eye" : "lab"}/>
@@ -3118,8 +3118,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     return (
       <div className="email-container">
         <CapSpin spinning={isLoading}>
-          <Row>
-            <Col>
+          <CapRow>
+            <CapColumn>
               { !_.isEmpty(schema) && (this.state.formData[0] || this.state.formData["0"]) ?
                 <FormBuilder
                   editor={this.props.editor}
@@ -3177,8 +3177,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   getBEEData={this.getBEEData}
                   isTestAndPreviewMode={this.state.isTestAndPreviewMode} // Add flag to prevent validation
               /> : ''}
-            </Col>
-          </Row>
+            </CapColumn>
+          </CapRow>
         </CapSpin>
         {!_.isEmpty(this.state.formData[(this.state.currentTab - 1)]) && <EmailPreview
           header={previewHeader}

package/v2Containers/Email/initialSchema.js

@@ -269,7 +269,7 @@ export const response = {
                           metaType: "label",
                           type: "div",
                           primitive: true,
-                          value: <CapButton isAddBtn type="flat"><FormattedMessage {...messages.image} /></CapButton>,
+                          value: <CapButton isAddBtn type="link"><FormattedMessage {...messages.image} /></CapButton>,
                           fluid: true,
                           onlyDisplay: false,
                           styling: "semantic",

package/v2Containers/FTP/index.js

@@ -325,7 +325,7 @@ export class FTP extends React.Component {
           </CapColumn>
           <CapColumn span={3} offset={13} className="add-column">
             <CapButton
-              type="flat"
+              type="link"
               isAddBtn
               onClick={this.addNewColumn}
             >

package/v2Containers/Facebook/Advertisement/index.js

@@ -724,7 +724,7 @@ export const Advertisement = (props) => {
   <>
     <CapButton
       onClick={addContent}
-      type="flat"
+      type="link"
       disabled={MAX_CAROUSEL_ALLOWED === carouselData.length}
       isAddBtn
       style={{ padding: 0, marginTop: 12 }}
@@ -744,7 +744,7 @@ export const Advertisement = (props) => {
         <CapButton
           onClick={shiftLeftContent}
           disabled={defaultActiveIndex === Number(activeIndex)}
-          type="flat">
+          type="link">
           <CapIcon type="left" size="s" />
         </CapButton>
       </CapTooltip>
@@ -753,7 +753,7 @@ export const Advertisement = (props) => {
         <CapButton
           onClick={shiftRightContent}
           disabled={carouselData.length === (Number(activeIndex) + 1)}
-          type="flat">
+          type="link">
           <CapIcon type="right" size="s" />
         </CapButton>
       </CapTooltip>
@@ -762,7 +762,7 @@ export const Advertisement = (props) => {
         <CapButton
           onClick={deleteContent}
           disabled={carouselData.length === 1}
-          type="flat">
+          type="link">
           <CapIcon type="delete" size="s" />
         </CapButton>
       </CapTooltip>

package/v2Containers/Facebook/index.js

@@ -326,7 +326,7 @@ const Facebook = (props) => {
                   span={index % 2 === 0 ? 6 : 14}
                   key={label}
                 >
-                  <CapRow>
+                  <CapRow useLegacy>
                     <CapLabel type="label2">
                       <FormattedMessage {...messages[label]} />
                     </CapLabel>
@@ -334,7 +334,7 @@ const Facebook = (props) => {
                       {value}
                       {!socialRemoteCampaignId && onChange && (
                       <CapButton
-                        type="flat"
+                        type="link"
                         className="marketingObjective-change-button facebook-marketing-objective-change"
                         onClick={onChange}
                         >