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

package/v2Containers/Sms/Create/index.js

@@ -1096,6 +1096,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 onTestContentClicked={this.props.onTestContentClicked}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
               />
             </CapColumn>
           </CapRow>
@@ -1132,6 +1133,7 @@ Create.propTypes = {
   isLoadingMetaEntities: PropTypes.bool,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,

package/v2Containers/Sms/Edit/index.js

@@ -1091,6 +1091,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
@@ -1131,6 +1132,7 @@ Edit.propTypes = {
   injectedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   messageDetails: PropTypes.object,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,

package/v2Containers/SmsTrai/Edit/index.js

@@ -82,6 +82,7 @@ export const SmsTraiEdit = (props) => {
     templateData = {},
     selectedOfferDetails,
     eventContextTags,
+    waitEventContextTags,
     fetchingLiquidTags,
     getLiquidTags,
     showLiquidErrorInFooter,
@@ -645,7 +646,7 @@ export const SmsTraiEdit = (props) => {
             </TraiEditTemplateDetails>
           )}
           <CapColumn span={14}>
-            <CapRow>
+            <CapRow useLegacy>
               <CapHeader
                 title={formatMessage(messages.traiEditTitle)}
                 size="regular"
@@ -660,12 +661,14 @@ export const SmsTraiEdit = (props) => {
                     hidePopover={disablehandler()}
                     selectedOfferDetails={selectedOfferDetails}
                     eventContextTags={eventContextTags}
+                    waitEventContextTags={waitEventContextTags}
                   />
                 )}
               />
             </CapRow>
 
             <CapRow
+              useLegacy
               style={{
                 backgroundColor: CAP_G10,
                 padding: CAP_SPACE_16,
@@ -673,7 +676,7 @@ export const SmsTraiEdit = (props) => {
             >
               {renderedContent()}
             </CapRow>
-            <CapRow>
+            <CapRow useLegacy>
               {smsLengthForVar()}
             </CapRow>
             <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed} disabled={disablehandler()}>

package/v2Containers/SmsWrapper/index.js

@@ -30,6 +30,7 @@ const SmsWrapper = (props) => {
     smsRegister,
     onShowTemplates,
     eventContextTags,
+    waitEventContextTags,
     showLiquidErrorInFooter,
     getLiquidTags,
     showTestAndPreviewSlidebox,
@@ -53,6 +54,7 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    waitEventContextTags,
     showLiquidErrorInFooter,
     getLiquidTags,
     showTestAndPreviewSlidebox,

package/v2Containers/TagList/index.js

@@ -94,10 +94,28 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   componentDidUpdate(prevProps) {
-    const { tags, injectedTags, selectedOfferDetails } = this.props;
-    const { tags: prevTags, injectedTags: prevInjectedTags, selectedOfferDetails: prevSelectedOfferDetails } = prevProps;
-
-    if (tags !== prevTags || injectedTags !== prevInjectedTags || selectedOfferDetails !== prevSelectedOfferDetails) {
+    const {
+      tags,
+      injectedTags,
+      selectedOfferDetails,
+      eventContextTags,
+      waitEventContextTags,
+    } = this.props;
+    const {
+      tags: prevTags,
+      injectedTags: prevInjectedTags,
+      selectedOfferDetails: prevSelectedOfferDetails,
+      eventContextTags: prevEventContextTags,
+      waitEventContextTags: prevWaitEventContextTags,
+    } = prevProps;
+
+    if (
+      tags !== prevTags
+      || injectedTags !== prevInjectedTags
+      || selectedOfferDetails !== prevSelectedOfferDetails
+      || !_.isEqual(eventContextTags, prevEventContextTags)
+      || !_.isEqual(waitEventContextTags, prevWaitEventContextTags)
+    ) {
       this.generateTags(this.props);
     }
   }
@@ -162,7 +180,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     let injectedTags = {};
     const eventContextTagsObj = {};
 
-    const {selectedOfferDetails, eventContextTags } = props;
+    const {selectedOfferDetails, eventContextTags, waitEventContextTags } = props;
     if (props.injectedTags && !_.isEmpty(props.injectedTags)) {
       const formattedInjectedTags = handleInjectedData(
         props.injectedTags,
@@ -214,6 +232,43 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         };
       });
     }
+    // Wait event context tags should be displayed in the Add Labels when node is next to Event based wait node.
+    if (waitEventContextTags && Object.keys(waitEventContextTags)?.length) {
+
+      Object.keys(waitEventContextTags).forEach((blockId) => {
+      const WAIT_EVENT_HEADER_MSG_LABEL = `${waitEventContextTags[blockId].eventName} (${waitEventContextTags[blockId].blockName})`;
+        eventContextTagsObj[blockId] = {
+          "name": WAIT_EVENT_HEADER_MSG_LABEL,
+          "desc": WAIT_EVENT_HEADER_MSG_LABEL,
+          "resolved": true,
+          'tag-header': true,
+          "subtags": {},
+        };
+
+      waitEventContextTags?.[blockId]?.tags?.forEach((tag) => {
+        const {
+          tagName, label, profileId, profileName, blockName, eventName
+        } = tag || {};
+        if (!profileId || !tagName || !label || !profileName) return;
+        // Initializing the tags profile if it doesn't exist
+        if (!eventContextTagsObj?.[blockId]?.subtags?.[profileId]) {
+          eventContextTagsObj[blockId].subtags[profileId] = {
+            "name": profileName,
+            "desc": profileName,
+            "resolved": true,
+            'tag-header': true,
+            "subtags": {},
+          };
+        }
+        // Adding the current tag to the profile group
+        eventContextTagsObj[blockId].subtags[profileId].subtags[tagName] = {
+          name: label,
+          desc: label,
+          resolved: true,
+        };
+      });
+    });
+    }
     this.setState({tags: _.merge( {}, tags, injectedTags, eventContextTagsObj )});
   }
 
@@ -432,6 +487,7 @@ TagList.defaultProps = {
   isNewVersionFlow: false,
   userLocale: 'en',
   eventContextTags: [],
+  waitEventContextTags: {},
 };
 
 TagList.propTypes = {
@@ -452,6 +508,7 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   popoverPlacement: PropTypes.string,
   // message to show when Add Label button is disabled (e.g. personalization restriction)
   disableTooltipMsg: PropTypes.string,

package/v2Containers/TagList/messages.js

@@ -19,4 +19,8 @@ export default defineMessages({
     id: `${scope}.personalizationNotSupportedAnonymous`,
     defaultMessage: 'Personalization tags are not supported for anonymous customers',
   },
+  waitEvent: {
+    id: `${scope}.waitEvent`,
+    defaultMessage: 'Wait Event',
+  },
 });

package/v2Containers/TagList/tests/TagList.test.js

@@ -5,28 +5,34 @@ import { initialReducer } from '../../../initialReducer';
 import { injectIntl } from "react-intl";
 import { fireEvent } from "@testing-library/react";
 import { TagList } from '../index';
-import { TagListData, eventContextTags } from './mockdata';
+import { TagListData, eventContextTags, waitEventContextTags } from './mockdata';
+import { OfferTag, badgesTags, offer } from '../../../utils/tests/common.mockdata';
+import * as commonUtils from "../../../utils/common";
 import { Provider } from 'react-redux';
 import { screen, render } from '../../../utils/test-utils';
 import history from '../../../utils/history';
 const { getByText, queryByText } = screen;
 
+const buildProps = (props = {}) => ({
+  ...TagListData,
+  onTagSelect: jest.fn(),
+  ...props,
+});
 
-const initializeTagList = (props) => {
+const initializeTagList = (props = {}) => {
   const store = configureStore({}, initialReducer, history);
   const Component = injectIntl(TagList);
-
-  const propsObj = {
-    ...TagListData,
-    onTagSelect: jest.fn(),
-    ...props,
+  const propsObj = buildProps(props);
+  return {
+    ...render(
+      <Provider store={store}>
+        <Component {...propsObj} />
+      </Provider>
+    ),
+    store,
+    Component,
+    propsObj,
   };
-
-  return render(
-    <Provider store={store}>
-      <Component {...propsObj} />
-    </Provider>
-  );
 };
 
 const addLabelBtnAssertion = () => {
@@ -41,19 +47,117 @@ describe("TagList test :  UNIT", () => {
     addLabelBtnAssertion();
   });
 
-  it('should render event context tags correctly from generateTags and show tags under profile', () => {
-    initializeTagList({eventContextTags});
+  it('should render event context tag section from generateTags', () => {
+    initializeTagList({ eventContextTags, moduleFilterEnabled: false });
     addLabelBtnAssertion();
     const EVENT_CONTEXT_TAG_HEADER = getByText(/Entry event/i);
     expect(EVENT_CONTEXT_TAG_HEADER).toBeInTheDocument();
-    fireEvent.click(EVENT_CONTEXT_TAG_HEADER);
-    // Customer profile tags
-    const CUSTOMER_PROFILE = getByText(/Current Customer/i);
-    fireEvent.click(CUSTOMER_PROFILE);
-    expect(getByText(/lifetimePurchases/i)).toBeInTheDocument();
 
     // Behavioural event profile tags should not be visible as label and profile name is not present
     const BEHAVIOURAL_EVENT_PROFILE = queryByText(/Behavioural event/i);
     expect(BEHAVIOURAL_EVENT_PROFILE).not.toBeInTheDocument();
   });
+
+  it('should render wait event context section when waitEventContextTags is provided', () => {
+    initializeTagList({ waitEventContextTags, moduleFilterEnabled: false });
+    addLabelBtnAssertion();
+    const WAIT_EVENT_HEADER = getByText(/Order Placed \(Wait Block\)/i);
+    expect(WAIT_EVENT_HEADER).toBeInTheDocument();
+  });
+
+  it('should merge empty waitEventContextTags with entry event tags', () => {
+    initializeTagList({ eventContextTags, waitEventContextTags: {}, moduleFilterEnabled: false });
+    addLabelBtnAssertion();
+    expect(getByText(/Entry event/i)).toBeInTheDocument();
+  });
+
+  it('calls parent onContextChange with Outbound when tags and injectedTags are empty on popover open', () => {
+    const onContextChange = jest.fn();
+    initializeTagList({
+      tags: [],
+      injectedTags: {},
+      onContextChange,
+      onTagSelect: jest.fn(),
+    });
+    // Default fetch is triggered when the Add Label popover opens (not on mount)
+    addLabelBtnAssertion();
+    expect(onContextChange).toHaveBeenCalledWith('Outbound');
+  });
+
+  it('applies fetchingSchemaError from props via componentWillReceiveProps', () => {
+    const { rerender, Component, propsObj, store } = initializeTagList({ fetchingSchemaError: false });
+    addLabelBtnAssertion();
+    rerender(
+      <Provider store={store}>
+        <Component {...propsObj} fetchingSchemaError />
+      </Provider>
+    );
+    expect(screen.getByText(/add label/i)).toBeInTheDocument();
+  });
+
+  it('disables Add label when restrictPersonalization is true', () => {
+    initializeTagList({
+      restrictPersonalization: true,
+      disabled: false,
+      moduleFilterEnabled: false,
+    });
+    const btn = screen.getByText(/add label/i).closest('button');
+    expect(btn).toBeDisabled();
+  });
+
+  it('calls transformCouponTags when selectedOfferDetails and coupon tags are present', () => {
+    const spy = jest.spyOn(TagList.prototype, 'transformCouponTags');
+    initializeTagList({
+      tags: OfferTag,
+      injectedTags: {},
+      selectedOfferDetails: [{ id: 'c1', couponName: 'Promo Coupon', couponSeriesId: 'c1' }],
+      moduleFilterEnabled: false,
+    });
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  it('calls transformBadgeTags from common when badge offer and Badge tags are present', () => {
+    const spy = jest.spyOn(commonUtils, 'transformBadgeTags');
+    initializeTagList({
+      tags: badgesTags,
+      injectedTags: {},
+      selectedOfferDetails: offer,
+      moduleFilterEnabled: false,
+    });
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  it('unmounts without throwing', () => {
+    const { unmount } = initializeTagList();
+    expect(() => unmount()).not.toThrow();
+  });
+
+  it('regenerates tags when props.tags change (componentDidUpdate)', () => {
+    const { rerender, Component, store } = initializeTagList({ tags: TagListData.tags });
+    const extra = [
+      ...TagListData.tags,
+      {
+        _id: 'extra-tag',
+        type: 'TAG',
+        definition: {
+          label: { en: 'Extra' },
+          value: 'extra_value',
+          subtags: [],
+          'tag-header': false,
+          supportedModules: [{ context: 'default', layout: 'sms', mandatory: false }],
+        },
+        scope: { tag: 'STANDARD', orgId: -1, verticals: [] },
+        isActive: true,
+      },
+    ];
+    rerender(
+      <Provider store={store}>
+        <Component {...buildProps({ tags: extra })} />
+      </Provider>
+    );
+    addLabelBtnAssertion();
+    expect(screen.getByText(/add label/i)).toBeInTheDocument();
+  });
 });

package/v2Containers/TagList/tests/mockdata.js

@@ -149,3 +149,20 @@ export const eventContextTags = [
         "isDynamicFact": false
     }
 ];
+
+export const waitEventContextTags = {
+  block1: {
+    eventName: 'Order Placed',
+    blockName: 'Wait Block',
+    tags: [
+      {
+        tagName: 'waitEvent.orderId',
+        label: 'Order ID',
+        profileId: 'ORDER_PROFILE',
+        profileName: 'Order Profile',
+        blockName: 'Wait Block',
+        eventName: 'Order Placed',
+      },
+    ],
+  },
+};

package/v2Containers/Templates/index.js

@@ -1906,7 +1906,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <span title={template?.name}>
             {template?.name}
             {currentChannel === INAPP && (
-              <CapRow>
+              <CapRow useLegacy>
                 <CapColoredTag
                   tagColor={INAPP_LAYOUT_DETAILS[inappBodyType]?.tagColor}
                   tagTextColor={
@@ -1937,7 +1937,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             // Show preview icon for other channels (e.g., WeChat, Line, Facebook, Ebill)
             if (currentChannel === ZALO && isZaloPreviewLoading) {
               return (
-                <CapSpin style={{ marginRight: "16px", position: "static", display: "inline" }} spinning />
+                <CapSpin style={{ position: "static", display: "inline" }} spinning />
               );
             }
             
@@ -2312,7 +2312,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WHATSAPP: {
           const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview, carouselData = [] } = getWhatsappContent(template);
           templateData.title = (
-            <CapRow>
+            <CapRow useLegacy>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
               <WhatsappStatusContainer template={template} />
             </CapRow>
@@ -2405,15 +2405,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const name = get(template, "name", "");
           const statusDisplay=getRcsStatusType(status);
           templateData.title = (
-            <CapRow>
+            <CapRow useLegacy>
               <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
-              <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
+              <CapColumn type="flex" align="middle" className="rcs-status-container zalo-status-color">
                 <CapStatus
                   type={statusDisplay}
                   text={statusDisplay && this.props.intl.formatMessage(rcsMessages?.[`${statusDisplay}_STATUS`])}
                   labelType="label3"
                 />
-              </CapRow>
+              </CapColumn>
             </CapRow>
           );
         
@@ -2431,11 +2431,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             } = {},
           } = template;
           templateData.title = (
-            <CapRow>
+            <CapRow useLegacy>
               <CapLabel className="zalo-template-name">
                 {templateId}
               </CapLabel>
-              <CapRow
+              <CapColumn
                 type="flex"
                 align="middle"
                 className="zalo-status-container zalo-status-color"
@@ -2451,7 +2451,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   text={status && this.props.intl.formatMessage(zaloMessages?.[`${status}_STATUS`])}
                   labelType="label3"
                 />
-              </CapRow>
+              </CapColumn>
             </CapRow>
           );
           templateData.content = <CapLabel type="label19" className="zalo-listing-content desc">{template.name}</CapLabel>;
@@ -3477,8 +3477,8 @@ return (<div>
         content = (<div className="sms-template-content">
           <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
             <div>
-              <button type="button" className="ant-btn cap-button edit-button ant-btn-ghost" onClick={() => this.handleBlankTemplateAction('uploadFile')}><span>Upload File</span></button>
-              <button type="button" className="ant-btn cap-button preview-button ant-btn-danger" onClick={() => this.handleBlankTemplateAction('editor')}><span>Use Editor</span></button>
+              <button type="button" className="ant-btn cap-button-v2 edit-button ant-btn-ghost" onClick={() => this.handleBlankTemplateAction('uploadFile')}><span>Upload File</span></button>
+              <button type="button" className="ant-btn cap-button-v2 preview-button ant-btn-danger" onClick={() => this.handleBlankTemplateAction('editor')}><span>Use Editor</span></button>
             </div>
           </div>
         </div>);
@@ -3488,13 +3488,13 @@ return (<div>
             <div>
               <button
                 type="button"
-                className="ant-btn cap-button edit-button ant-btn-ghost"
+                className="ant-btn cap-button-v2 edit-button ant-btn-ghost"
                 onClick={() => this.handleBlankTemplateAction('textTemplate', channel)}>
                 <span>{this.props.intl.formatMessage(messages.textTemplate)}</span>
               </button>
               <button
                 type="button"
-                className="ant-btn cap-button preview-button ant-btn-danger"
+                className="ant-btn cap-button-v2 preview-button ant-btn-danger"
                 onClick={() => this.handleBlankTemplateAction('imageTemplate', channel)}>
                 <span>{this.props.intl.formatMessage(messages.imageTemplate)}</span>
               </button>
@@ -4453,7 +4453,7 @@ return (<div>
               message={formatMessage(messages.zaloOnlyApprovedTemplates)}
             />
           ) : null}
-          <CapRow>
+          <CapRow useLegacy>
             <Pagination
               templateInProgress={
                 this.props.Templates.getAllTemplatesInProgress
@@ -4493,7 +4493,7 @@ return (<div>
             )}
           </CapRow>
 
-          <CapRow>
+          <CapRow useLegacy>
             {!isEmpty(creativesParams.mode) &&
             isFullMode && ( //creatives container for fullmode
                 <CreativesContainer
@@ -4517,7 +4517,7 @@ return (<div>
                 />
               )}
           </CapRow>
-          <CapRow>
+          <CapRow useLegacy>
             {(this.state.channel.toLowerCase() === "ebill" ||
               this.state.channel.toLowerCase() === "email") &&
               htmlPreviewContent && (

package/v2Containers/Viber/index.js

@@ -16,6 +16,7 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import ConfigProvider from 'antd/lib/config-provider';
 import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import { GA } from '@capillarytech/cap-ui-utils';
 import * as globalActions from '../Cap/actions';
@@ -82,6 +83,7 @@ export const Viber = (props) => {
     viberData = {},
     selectedOfferDetails = [],
     eventContextTags,
+    waitEventContextTags,
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
     handleTestAndPreview: propsHandleTestAndPreview,
@@ -287,6 +289,7 @@ export const Viber = (props) => {
           userLocale={localStorage.getItem("jlocale") || "en"}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
+          waitEventContextTags={waitEventContextTags}
         />
       </CapColumn>
       <div className="viber-textarea-wrapper">
@@ -373,13 +376,15 @@ export const Viber = (props) => {
       <CapHeading type="h4" className="viber-render-heading">
         {formatMessage(messages.mediaLabel)}
       </CapHeading>
-      <CapRadioGroup
-        id="viber-media-radio"
-        options={mediaRadioOptions}
-        value={templateMediaType}
-        onChange={onTemplateMediaTypeChange}
-        className="viber-media-radio"
-      />
+      <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+        <CapRadioGroup
+          id="viber-media-radio"
+          options={mediaRadioOptions}
+          value={templateMediaType}
+          onChange={onTemplateMediaTypeChange}
+          className="viber-media-radio"
+        />
+      </ConfigProvider>
     </>
   );
 
@@ -592,6 +597,7 @@ export const Viber = (props) => {
         userLocale={localStorage.getItem("jlocale") || "en"}
         selectedOfferDetails={selectedOfferDetails}
         eventContextTags={eventContextTags}
+        waitEventContextTags={waitEventContextTags}
       />
       <CapColumn className="cta-actions">
         <CapButton
@@ -651,13 +657,15 @@ export const Viber = (props) => {
           {formatMessage(messages.videoButtonDisabled)}
         </CapLabel>
       )}
-      <CapRadioGroup
-        options={buttonRadioOptions}
-        value={buttonType}
-        onChange={onChangeButtonType}
-        disabled={templateMediaType === VIBER_MEDIA_TYPES.VIDEO}
-        className="viber-btn-radio-group"
-      />
+      <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+        <CapRadioGroup
+          options={buttonRadioOptions}
+          value={buttonType}
+          onChange={onChangeButtonType}
+          disabled={templateMediaType === VIBER_MEDIA_TYPES.VIDEO}
+          className="viber-btn-radio-group"
+        />
+      </ConfigProvider>
       {isBtnTypeCta && ButtonViber}
     </div>
   );

package/v2Containers/Viber/index.scss

@@ -7,13 +7,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/WeChat/RichmediaTemplates/Create/_createRichmedia.scss

@@ -147,7 +147,7 @@
   }
   .embedded-mode {
     .cover-image-row {
-      display: none;
+      display: none !important;
     }
   }
 }

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -500,12 +500,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       if (id === 0) {
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
-            <CapRow>
+            <CapRow useLegacy>
               <img alt="default" width="100%" height="110px" src={contentData.imageUrl} />
               <div style={{ position: "absolute", bottom: "5%", left: "5%" }}>{contentData.formData['title-value'] ? contentData.formData['title-value'] : ""}</div>
             </CapRow>
             {Object.keys(templateData).length === 1 ?
-              <CapRow style={{ height: 32 }}>
+              <CapRow useLegacy style={{ height: 32 }}>
                 {contentData.formData['cover-abstract-value'] ? contentData.formData['cover-abstract-value'] : ""}
               </CapRow>
               :

package/v2Containers/WebPush/Create/components/BrandIconSection.js

@@ -56,7 +56,7 @@ export const BrandIconSection = ({
         />
       </CapRow>
       {brandIconOption === BRAND_ICON_OPTIONS.UPLOAD_IMAGE && (
-        <CapRow
+        <CapRow useLegacy
           className="webpush-brand-icon-upload-section"
           style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
           aria-disabled={isLocked}

package/v2Containers/WebPush/Create/components/ButtonForm.js

@@ -98,7 +98,7 @@ const ButtonForm = ({
 
   return (
     <div className="webpush-button-form" onKeyDown={handleKeyDown}>
-      <CapRow className="button-form-row">
+      <CapRow useLegacy className="button-form-row">
         <CapHeading type="h4" className="button-form-heading">
           <FormattedMessage {...messages.buttonText} />
         </CapHeading>
@@ -116,7 +116,7 @@ const ButtonForm = ({
           />
         </div>
       </CapRow>
-      <CapRow className="button-form-row">
+      <CapRow useLegacy className="button-form-row">
         <CapHeading type="h4" className="button-form-heading">
           <FormattedMessage {...messages.buttonUrlLabel} />
         </CapHeading>