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

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -63,6 +63,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
           }
         }
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -159,6 +160,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
           }
         }
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -250,6 +252,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         showTestAndPreviewSlidebox={false}
         slidBoxContent="editTemplate"
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -388,6 +391,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         showTestAndPreviewSlidebox={false}
         slidBoxContent="editTemplate"
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />
@@ -526,6 +530,7 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         showTestAndPreviewSlidebox={false}
         slidBoxContent="editTemplate"
         templateStep="modeSelection"
+        waitEventContextTags={Object {}}
         weChatMaptemplateStep={0}
         weChatTemplateType=""
       />

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}
@@ -3170,14 +3170,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   moduleType={moduleType}
                   showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
                   eventContextTags={this.props?.eventContextTags}
+                  waitEventContextTags={this.props?.waitEventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
                   isGetBeeData={this.state.isGetBeeData}
                   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/EmailWrapper/components/EmailHTMLEditor.js

@@ -54,6 +54,7 @@ const EmailHTMLEditor = (props) => {
     globalActions,
     loadingTags,
     eventContextTags,
+    waitEventContextTags,
     forwardedTags,
     selectedOfferDetails,
     currentOrgDetails,
@@ -510,7 +511,7 @@ const EmailHTMLEditor = (props) => {
         setTagValidationError(null);
       }
     }
-  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, showLiquidErrorInFooter]);
+  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, waitEventContextTags, showLiquidErrorInFooter]);
 
   // Store the last validation state received from HTMLEditor
   const lastValidationStateRef = useRef(null);
@@ -1100,6 +1101,7 @@ const EmailHTMLEditor = (props) => {
               injectedTags={injectedTags || {}}
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               showHeading
               showTagList
               showInput
@@ -1124,6 +1126,7 @@ const EmailHTMLEditor = (props) => {
             injectedTags={injectedTags}
             location={location}
             eventContextTags={eventContextTags}
+            waitEventContextTags={waitEventContextTags}
             selectedOfferDetails={selectedOfferDetails}
             channel={EMAIL}
             userLocale={intl.locale || 'en'}
@@ -1151,6 +1154,7 @@ EmailHTMLEditor.propTypes = {
   globalActions: PropTypes.object,
   loadingTags: PropTypes.bool,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   forwardedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   currentOrgDetails: PropTypes.object,
@@ -1197,6 +1201,7 @@ EmailHTMLEditor.defaultProps = {
   globalActions: {},
   loadingTags: false,
   eventContextTags: [],
+  waitEventContextTags: {},
   forwardedTags: {},
   selectedOfferDetails: [],
   currentOrgDetails: {},

package/v2Containers/EmailWrapper/components/EmailWrapperView.js

@@ -173,6 +173,7 @@ const EmailWrapperView = ({
   forwardedTags,
   selectedOfferDetails,
   eventContextTags,
+  waitEventContextTags,
   getFormdata,
   isGetFormData,
   getLiquidTags,
@@ -246,6 +247,7 @@ const EmailWrapperView = ({
     globalActions,
     loadingTags,
     eventContextTags,
+    waitEventContextTags,
     forwardedTags,
     selectedOfferDetails,
     currentOrgDetails,
@@ -371,6 +373,7 @@ EmailWrapperView.propTypes = {
   forwardedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   emailActions: PropTypes.object,
   Email: PropTypes.object,
   templateData: PropTypes.object,

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -71,7 +71,10 @@ jest.mock('../../../../v2Components/HtmlEditor/index.lazy', () => {
     }));
 
     return (
-      <div data-testid="html-editor">
+      <div
+        data-testid="html-editor"
+        data-wait-event-context-tags={JSON.stringify(props.waitEventContextTags ?? null)}
+      >
         <button
           onClick={() => props.onContentChange && props.onContentChange('<p>New content</p>')}
           data-testid="trigger-content-change"
@@ -130,7 +133,10 @@ jest.mock('../../../../v2Components/HtmlEditor', () => {
     }));
 
     return (
-      <div data-testid="html-editor">
+      <div
+        data-testid="html-editor"
+        data-wait-event-context-tags={JSON.stringify(props.waitEventContextTags ?? null)}
+      >
         <button
           onClick={() => props.onContentChange && props.onContentChange('<p>New content</p>')}
           data-testid="trigger-content-change"
@@ -364,6 +370,7 @@ const defaultProps = {
   },
   loadingTags: false,
   eventContextTags: [],
+  waitEventContextTags: {},
   forwardedTags: {},
   selectedOfferDetails: [],
   currentOrgDetails: {
@@ -522,6 +529,17 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('waitEventContextTags', () => {
+    it('forwards waitEventContextTags to HTMLEditor', () => {
+      const waitMap = { b1: { eventName: 'E', blockName: 'B', tags: ['t'] } };
+      renderWithIntl({ waitEventContextTags: waitMap });
+      expect(screen.getByTestId('html-editor')).toHaveAttribute(
+        'data-wait-event-context-tags',
+        JSON.stringify(waitMap),
+      );
+    });
+  });
+
   describe('Content Initialization', () => {
     it('initializes with empty content in create mode', () => {
       renderWithIntl({ isGetFormData: false });

package/v2Containers/EmailWrapper/components/__tests__/EmailWrapperView.test.js

@@ -37,7 +37,14 @@ jest.mock('../EmailHTMLEditor', () => {
       getContentForPreview: jest.fn(() => '<p>Test</p>'),
     }));
 
-    return <div data-testid="email-html-editor">HTML Editor</div>;
+    return (
+      <div
+        data-testid="email-html-editor"
+        data-wait-event-context-tags={JSON.stringify(props.waitEventContextTags ?? null)}
+      >
+        HTML Editor
+      </div>
+    );
   });
 });
 
@@ -137,6 +144,7 @@ const defaultProps = {
   forwardedTags: {},
   selectedOfferDetails: [],
   eventContextTags: [],
+  waitEventContextTags: {},
   getFormdata: jest.fn(),
   isGetFormData: false,
   getLiquidTags: jest.fn(),
@@ -171,6 +179,13 @@ describe('EmailWrapperView', () => {
     jest.clearAllMocks();
   });
 
+  it('passes waitEventContextTags to EmailHTMLEditor when HTML editor is shown', () => {
+    const waitMap = { b1: { eventName: 'E', blockName: 'B', tags: [] } };
+    renderWithIntl({ waitEventContextTags: waitMap });
+    const el = screen.getByTestId('email-html-editor');
+    expect(el).toHaveAttribute('data-wait-event-context-tags', JSON.stringify(waitMap));
+  });
+
   describe('Mode Selection UI', () => {
     it('renders mode selection when step is MODE_SELECTION', () => {
       renderWithIntl({ step: STEPS.MODE_SELECTION });

package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js

@@ -51,6 +51,7 @@ const useEmailWrapper = ({
   editor,
   moduleType,
   eventContextTags,
+  waitEventContextTags,
   isLoyaltyModule,
   // Props for CmsTemplates component
   cmsTemplatesLoader,
@@ -736,6 +737,7 @@ const useEmailWrapper = ({
       selectedEditorMode, // Pass selected mode to Email component (only for HTML_EDITOR)
       moduleType,
       eventContextTags,
+      waitEventContextTags,
       isLoyaltyModule,
       showTestAndPreviewSlidebox,
       handleTestAndPreview,
@@ -765,6 +767,7 @@ const useEmailWrapper = ({
     editor,
     moduleType,
     eventContextTags,
+    waitEventContextTags,
     isLoyaltyModule,
     showTestAndPreviewSlidebox,
     handleTestAndPreview,

package/v2Containers/EmailWrapper/index.js

@@ -63,6 +63,7 @@ const EmailWrapper = (props) => {
     onEnterTemplateName,
     onRemoveTemplateName,
     eventContextTags,
+    waitEventContextTags,
     isLoyaltyModule,
     cmsTemplatesLoader,
     onPreviewContentClicked,
@@ -130,6 +131,7 @@ const EmailWrapper = (props) => {
     onEnterTemplateName,
     onRemoveTemplateName,
     eventContextTags,
+    waitEventContextTags,
     isLoyaltyModule,
     cmsTemplatesLoader,
     onPreviewContentClicked,
@@ -184,6 +186,7 @@ const EmailWrapper = (props) => {
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
         getFormdata={getFormdata}
         isGetFormData={isGetFormData}
         getLiquidTags={globalActionsProp?.getLiquidTags}
@@ -241,6 +244,7 @@ EmailWrapper.propTypes = {
   onEnterTemplateName: PropTypes.func,
   onRemoveTemplateName: PropTypes.func,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   isLoyaltyModule: PropTypes.bool,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,

package/v2Containers/EmailWrapper/tests/useEmailWrapper.edgeCases.test.js

@@ -112,6 +112,7 @@ describe('useEmailWrapper - Edge Cases', () => {
       editor: 'HTML',
       moduleType: null,
       eventContextTags: [],
+      waitEventContextTags: {},
       isLoyaltyModule: false,
       cmsTemplatesLoader: jest.fn(),
       currentOrgDetails: {},

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -102,6 +102,7 @@ describe('useEmailWrapper', () => {
       editor: null,
       moduleType: '',
       eventContextTags: [],
+      waitEventContextTags: {},
       isLoyaltyModule: false,
       cmsTemplatesLoader: false,
       currentOrgDetails: { id: 'org1' },
@@ -120,6 +121,14 @@ describe('useEmailWrapper', () => {
     expect(result.current.onTemplateNameChange).toBeInstanceOf(Function);
   });
 
+  it('passes waitEventContextTags through emailProps', () => {
+    const waitMap = { block1: { eventName: 'E', blockName: 'B', tags: [] } };
+    const { result } = renderHook(() =>
+      useEmailWrapper({ ...mockProps, waitEventContextTags: waitMap }),
+    );
+    expect(result.current.emailProps.waitEventContextTags).toEqual(waitMap);
+  });
+
   it('handles template name change correctly', () => {
     const { result } = renderHook(() => useEmailWrapper(mockProps));
 

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}
                         >

package/v2Containers/InApp/index.js

@@ -10,6 +10,7 @@ import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes'
 import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
 import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
 import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
+import ConfigProvider from 'antd/lib/config-provider';
 import CapRow from "@capillarytech/cap-ui-library/CapRow";
 import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 import CapButton from "@capillarytech/cap-ui-library/CapButton";
@@ -1434,7 +1435,7 @@ export const InApp = (props) => {
           {/* Creative layout type */}
           {shouldUseHTMLEditor && (
             <>
-              <CapRow>
+              <CapRow useLegacy>
                 <CapHeading type="h4">
                   <FormattedMessage {...messages.creativeLayout} />
                 </CapHeading>
@@ -1442,13 +1443,15 @@ export const InApp = (props) => {
                   <FormattedMessage {...messages.creativeLayoutDesc} />
                 </CapHeading>
               </CapRow>
-              <CapRadioGroup
-                id="inapp-layout-radio"
-                options={LAYOUT_RADIO_OPTIONS}
-                value={templateLayoutType}
-                onChange={onTemplateLayoutTypeChange}
-                className="inapp-layout-radio"
-              />
+              <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+                <CapRadioGroup
+                  id="inapp-layout-radio"
+                  options={LAYOUT_RADIO_OPTIONS}
+                  value={templateLayoutType}
+                  onChange={onTemplateLayoutTypeChange}
+                  className="inapp-layout-radio"
+                />
+              </ConfigProvider>
             </>
           )}
           {shouldUseHTMLEditor && (
@@ -1510,7 +1513,7 @@ export const InApp = (props) => {
                 labelPosition="top"
                 size="default"
               />
-              <CapRow>
+              <CapRow useLegacy>
                 <CapHeading type="h4">
                   <FormattedMessage {...messages.creativeLayout} />
                 </CapHeading>
@@ -1518,13 +1521,15 @@ export const InApp = (props) => {
                   <FormattedMessage {...messages.creativeLayoutDesc} />
                 </CapHeading>
               </CapRow>
-              <CapRadioGroup
-                id="inapp-layout-radio"
-                options={LAYOUT_RADIO_OPTIONS}
-                value={templateLayoutType}
-                onChange={onTemplateLayoutTypeChange}
-                className="inapp-layout-radio"
-              />
+              <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+                <CapRadioGroup
+                  id="inapp-layout-radio"
+                  options={LAYOUT_RADIO_OPTIONS}
+                  value={templateLayoutType}
+                  onChange={onTemplateLayoutTypeChange}
+                  className="inapp-layout-radio"
+                />
+              </ConfigProvider>
               <CapTab
                 panes={DEVICE_PANES.filter((devicePane) => devicePane?.isSupported === true)}
                 onChange={(value) => setPanes(value)}

package/v2Containers/InApp/index.scss

@@ -36,13 +36,6 @@
   margin-right: $CAP_SPACE_24;
 }
 
-.ant-radio-inner::after{
-  top: 3px;
-  left: 3px;
-}
-.ant-radio-inner{
-  border: 1px solid #d9d9d9;
-}
 .ant-radio-checked .ant-radio-inner{
   border: 1px solid #47af46;
 }

package/v2Containers/InAppWrapper/components/InAppWrapperView.js

@@ -35,7 +35,7 @@ const ModeSelectionUI = ({
       labelPosition="top"
       size="default"
     />
-    <CapRow className="inapp-wrapper__card-container">
+    <CapRow useLegacy className="inapp-wrapper__card-container">
       <CapRadioCardWithLabel
         panes={modes}
         onChange={onChange}
@@ -49,7 +49,7 @@ const ModeSelectionUI = ({
       </CapError>
     )}
     {inAppEditorType && !isTemplateNameEmpty && (
-      <CapRow className="next-button-container">
+      <CapRow useLegacy className="next-button-container">
         <CapButton
           onClick={handleEditorTypeSelection}
           disabled={isFullMode && isTemplateNameEmpty}

package/v2Containers/InAppWrapper/hooks/__tests__/useInAppWrapper.test.js

@@ -424,6 +424,7 @@ describe('useInAppWrapper', () => {
 
       expect(capturedState.inAppProps.getDefaultTags).toBe('defaultTags');
     });
+
   });
 
   describe('isShowInAppCreate', () => {

package/v2Containers/InappAdvance/index.js

@@ -885,10 +885,10 @@ export const InappAdvanced = (props) => {
 
   return (
     <CapSpin spinning={spin}>
-      <CapRow className="cap-inapp-creatives">
+      <CapRow useLegacy className="cap-inapp-creatives">
         {/* Creative layout type*/}
         <>
-          <CapRow className="inapp-creative-layout">
+          <CapRow useLegacy className="inapp-creative-layout">
             <CapHeading type="h4">
               <FormattedMessage {...messages.creativeLayout} />
             </CapHeading>
@@ -907,7 +907,7 @@ export const InappAdvanced = (props) => {
           <CapColumn span={24}>
             {/* Content Sync Checkbox - positioned after device tabs */}
             {isAndroidSupported && isIosSupported && (
-              <CapRow>
+              <CapRow useLegacy>
                 <CapCheckbox
                   checked={keepContentSame}
                   onChange={handleCheckboxChange}
@@ -917,7 +917,7 @@ export const InappAdvanced = (props) => {
                 </CapCheckbox>
               </CapRow>
             )}
-            <CapRow>
+            <CapRow useLegacy>
               {/* device tab */}
               <CapTab
                 panes={PANES.filter(

package/v2Containers/LanguageProvider/index.js

@@ -10,9 +10,9 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { ConfigProvider } from 'antd';
-import enUS from 'antd/es/locale-provider/en_US';
-import zhCN from 'antd/es/locale-provider/zh_CN';
-import jaJP from 'antd/es/locale-provider/ja_JP';
+import enUS from 'antd/es/locale/en_US';
+import zhCN from 'antd/es/locale/zh_CN';
+import jaJP from 'antd/es/locale/ja_JP';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { IntlProvider } from 'react-intl';

package/v2Containers/LanguageProvider/tests/index.test.js

@@ -17,9 +17,9 @@ const messages = defineMessages({
   },
 });
 
-jest.mock('antd/es/locale-provider/en_US', () => 'enUS');
-jest.mock('antd/es/locale-provider/zh_CN', () => 'zhCN');
-jest.mock('antd/es/locale-provider/ja_JP', () => 'jaJP');
+jest.mock('antd/es/locale/en_US', () => 'enUS');
+jest.mock('antd/es/locale/zh_CN', () => 'zhCN');
+jest.mock('antd/es/locale/ja_JP', () => 'jaJP');
 
 describe('<LanguageProvider />', () => {
   it('should render its children', () => {

package/v2Containers/Line/Container/Image/index.js

@@ -328,7 +328,7 @@ export const LineImage = ({
             return (
                 <CapButton
                     className="dragger-button"
-                    type="flat"
+                    type="link"
                     style={{
                         top: isFullMode ? 105 : -8,
                         position: 'absolute',

package/v2Containers/Line/Container/ImageCarousel/Content.js

@@ -288,7 +288,7 @@ export const LineImageCarouselContent = ({
     return (
       <CapButton
         className="dragger-button"
-        type="flat"
+        type="link"
         style={{
           top: 0,
           position: 'absolute',