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

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

@@ -253,7 +253,7 @@ export const LineImageCarousel = (props) => {
 		<>
 			<CapButton
 				onClick={addContent}
-				type="flat"
+				type="link"
 				disabled={MAX_CAROUSEL_ALLOWED === carouselImages.length}
 				isAddBtn
 				style={{ padding: 0, marginTop: 12 }}
@@ -274,7 +274,7 @@ export const LineImageCarousel = (props) => {
 					<CapButton
 						onClick={duplicateContent}
 						disabled={MAX_CAROUSEL_ALLOWED === carouselImages.length}
-						type="flat"
+						type="link"
 					>
 							<CapIcon type="copy" size="s" />
 					</CapButton>
@@ -285,7 +285,7 @@ export const LineImageCarousel = (props) => {
 					<CapButton
 						onClick={shiftLeftContent}
 						disabled={defaultActiveIndex === Number(activeIndex)}
-						type="flat"
+						type="link"
 					>
 						<CapIcon type="left" size="s" />
 					</CapButton>
@@ -296,7 +296,7 @@ export const LineImageCarousel = (props) => {
 					<CapButton
 						onClick={shiftRightContent}
 						disabled={carouselImages.length === (Number(activeIndex) + 1)}
-						type="flat"
+						type="link"
 					>
 							<CapIcon type="right" size="s" />
 					</CapButton>
@@ -307,7 +307,7 @@ export const LineImageCarousel = (props) => {
 					<CapButton
 						onClick={deleteContent}
 						disabled={1 === carouselImages.length}
-						type="flat"
+						type="link"
 					>
 							<CapIcon type="delete" size="s" />
 					</CapButton>

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

@@ -284,7 +284,7 @@ export const LineImageMap = ({
                     assetType === DEFAULT_ASSET_TYPE ? formatMessage(messages.squareAssetDesc) : formatMessage(messages.customAssetDesc)
                   }
                 </CapLabel>
-                <CapRow>
+                <CapRow useLegacy>
                     {getTemplatesSelection()}
                 </CapRow>
             </>
@@ -301,7 +301,7 @@ export const LineImageMap = ({
                     return (
                         <CapColumn span={12} key={template}>
                         <CapButton
-                            type="flat"
+                            type="link"
                             style={{ padding: 0, marginTop: CAP_SPACE_12, marginRight: CAP_SPACE_16, height: 'auto' }}
                             onClick={() => changeImageMapTemplate(template)}
                         >
@@ -537,7 +537,7 @@ export const LineImageMap = ({
                         {isImage &&
                             <CapButton
                             className="dragger-button"
-                            type="flat"
+                            type="link"
                             style={{ top: 180 , position: 'absolute', right: 0, color: FONT_COLOR_05 }}
                             onClick={onReUpload}
                             >

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

@@ -114,7 +114,7 @@ export const LineSticker = ({
                         }}
                     />
                     <CapButton
-                        type="flat"
+                        type="link"
                         style={{ padding: 0, top: -34, right: 8 }}
                         onClick={removeSelectedSticker}
                     >
@@ -192,7 +192,7 @@ export const LineSticker = ({
                     ? (
                         <CapButton
                             onClick={removeSelectedSticker}
-                            type="flat"
+                            type="link"
                             style={{
                                 padding: 0,
                                 marginLeft: 400,

package/v2Containers/Line/Container/Sticker/utils.js

@@ -40,7 +40,7 @@ export const getContent = ({ lineStickers, onStickerSelect }) => (
       }) => (
           <CapColumn span={6} key={_id}>
             <CapButton
-              type="flat"
+              type="link"
               style={{ padding: 0, margin: 10, height: 'auto' }}
               onClick={() => onStickerSelect(definition)}
             >

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

@@ -387,7 +387,7 @@ export const LineVideo = ({
         <div style={{ overflow: 'hidden' }}>
           <CapButton
             className="dragger-button"
-            type="flat"
+            type="link"
             style={{
               float: 'right',
               color: FONT_COLOR_05,

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

@@ -101,7 +101,7 @@ export const LineWrapper = ({
     const operations = (
         <>
             <CapButton
-                type="flat"
+                type="link"
                 onClick={() => shiftUp(index)}
                 disabled={index === 0 || rest.isFullMode}
                 style={{ padding: 0 }}
@@ -109,7 +109,7 @@ export const LineWrapper = ({
                 <CapIcon type="back" size="s" style={{ transform: 'rotate(90deg)'}}/>
             </CapButton>
             <CapButton
-                type="flat"
+                type="link"
                 onClick={() => shiftDown(index)}
                 style={{ padding: `0 0 0 ${CAP_SPACE_08}` }}
                 disabled={(index+1) === lineWrappers || rest.isFullMode}
@@ -117,7 +117,7 @@ export const LineWrapper = ({
                 <CapIcon type="back" size="s"  style={{ transform: 'rotate(270deg)'}}/>
             </CapButton>
             <CapButton
-                type="flat"
+                type="link"
                 onClick={() => deleteWrapper(index)}
                 disabled={rest.isFullMode || lineWrappers === 1}
                 style={{ padding: `0 ${CAP_SPACE_16} 0 ${CAP_SPACE_16}`, marginRight: -20 }}

package/v2Containers/Line/Container/Wrapper/style.js

@@ -27,15 +27,11 @@ export default css`
 `;
 
 export const CapModalStyles = css`
-  .ant-modal.cap-modal-v2 {
-    max-width: unset;
-  }
-
   .modal-description {
     margin-top: ${CAP_SPACE_12};
   }
 
-  .ant-modal.cap-modal-v2 .ant-modal-footer {
+  .ant-modal-footer {
     padding-bottom: ${CAP_SPACE_20};
     padding-left: ${CAP_SPACE_24};
   }

package/v2Containers/Line/Container/index.js

@@ -789,7 +789,7 @@ export const LineContainer = ({
                     <span>{accountName}</span>
                     <CapButton
                         onClick={onShowTemplates}
-                        type="flat"
+                        type="link"
                         style={{ fontWeight: 500, color: FONT_COLOR_05 }}
                     >
                         <FormattedMessage {...messages.changeAccount} />
@@ -821,7 +821,7 @@ export const LineContainer = ({
                             <CapButton
                                 onClick={addLineWrappers}
                                 disabled={lineWrapperContents.length === (isFullMode ? MAX_LINE_WRAPPER_LIMIT_FULL_MODE : MAX_LINE_WRAPPER_LIMIT)}
-                                type="flat"
+                                type="link"
                                 isAddBtn
                                 className="add-msg"
                             >

package/v2Containers/Login/components/LoginForm/index.js

@@ -1,62 +1,49 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Form, Icon } from 'antd';
-import { CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import { Form } from 'antd';
+import { CapInput, CapButton, CapIcon } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import messages from './messages';
 const FormItem = Form.Item;
 
-class NormalLoginForm extends React.Component {
-  handleSubmit = (e) => {
-    e.preventDefault();
-    this.props.form.validateFields((err, values) => {
-      if (!err) {
-        this.props.authenticate(values);
+const NormalLoginForm = ({ authenticate, loginInProgress, isError, intl }) => {
+  const [form] = Form.useForm();
+  return (
+    <Form form={form} onFinish={(values) => authenticate(values)} className="login-form">
+      <FormItem
+        className="login-form-item"
+        name="username"
+        rules={[{ required: true, message: intl.formatMessage(messages.inputUsernameMandatory) }]}
+      >
+        <CapInput prefix={<CapIcon type="user" outlined style={{ fontSize: 13 }} />} placeholder={intl.formatMessage(messages.username)} />
+      </FormItem>
+      <FormItem
+        className="login-form-item"
+        name="password"
+        rules={[{ required: true, message: intl.formatMessage(messages.inputPasswordMandatory) }]}
+      >
+        <CapInput prefix={<CapIcon type="lock" outlined style={{ fontSize: 13 }} />} type="password" placeholder={intl.formatMessage(messages.password)} />
+      </FormItem>
+      {isError
+      ? <FormItem>
+        <span style={{color: "red"}}>{intl.formatMessage(messages.invalidCredentials)}</span>
+      </FormItem>
+      : null
       }
-    });
-  }
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    return (
-      <Form onSubmit={this.handleSubmit} className="login-form">
-        <FormItem className="login-form-item">
-          {getFieldDecorator('username', {
-            rules: [{ required: true, message: this.props.intl.formatMessage(messages.inputUsernameMandatory) }],
-          })(
-            <CapInput prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder={this.props.intl.formatMessage(messages.username)} />
-          )}
-        </FormItem>
-        <FormItem className="login-form-item">
-          {getFieldDecorator('password', {
-            rules: [{ required: true, message: this.props.intl.formatMessage(messages.inputPasswordMandatory) }],
-          })(
-            <CapInput prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder={this.props.intl.formatMessage(messages.password)} />
-          )}
-        </FormItem>
-        {this.props.isError
-        ? <FormItem>
-          <span style={{color: "red"}}>{this.props.intl.formatMessage(messages.invalidCredentials)}</span>
-        </FormItem>
-        : null
-        }
-        <FormItem>
-          <CapButton loading={this.props.loginInProgress} type="primary" htmlType="submit" className="login-form-button">
-            Log in
-          </CapButton>
-        </FormItem>
-      </Form>
-    );
-  }
-}
+      <FormItem>
+        <CapButton loading={loginInProgress} type="primary" htmlType="submit" className="login-form-button">
+          Log in
+        </CapButton>
+      </FormItem>
+    </Form>
+  );
+};
 
 NormalLoginForm.propTypes = {
   authenticate: PropTypes.func.isRequired,
   loginInProgress: PropTypes.bool,
   isError: PropTypes.bool,
-  form: PropTypes.object,
   intl: intlShape.isRequired,
 };
 
-const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
-export default injectIntl(WrappedNormalLoginForm);
+export default injectIntl(NormalLoginForm);

package/v2Containers/Login/index.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
 import { routerActions } from 'connected-react-router';
-import { Row, Col } from 'antd';
+import { CapRow, CapColumn } from '@capillarytech/cap-ui-library';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import makeSelectLogin from './selectors';
@@ -60,7 +60,7 @@ export class Login extends React.Component { // eslint-disable-line react/prefer
             ]}
           />}
         </FormattedMessage>
-        <Row align="middle" justify="center" type="flex" className="login-container">
+        <CapRow align="middle" justify="center" type="flex" className="login-container">
           {process.env.NODE_ENV === "production"
           ? <div className="cap-loader-box">
             <img
@@ -68,14 +68,14 @@ export class Login extends React.Component { // eslint-disable-line react/prefer
               src={"https://storage.crm.n.content-cdn.io/capillary/capillary_loading_logo.gif"}
               alt="Capillary"/>
           </div>
-          : <Col className="login-box" style={{textAlign: 'center'}}>
+          : <CapColumn className="login-box" style={{textAlign: 'center'}}>
             <h2 className="ui image header">
               <img alt="" src={logo} className="login-logo" />
             </h2>
             <LoginForm isError={this.state.isLoginError} authenticate={this.props.actions.authenticate} loginInProgress={loginProgress} />
-          </Col>
+          </CapColumn>
           }
-        </Row>
+        </CapRow>
       </div>
     );
   }

package/v2Containers/MobilePush/Create/index.js

@@ -1966,6 +1966,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 messageDetails={this.props?.messageDetails}
                 restrictPersonalization={this.props.restrictPersonalization}
               />
@@ -2068,6 +2069,7 @@ Create.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   getLiquidTags: PropTypes.func,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,

package/v2Containers/MobilePush/Edit/index.js

@@ -2233,6 +2233,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 restrictPersonalization={this.props.restrictPersonalization}
               />;
               })()}
@@ -2339,6 +2340,7 @@ Edit.propTypes = {
   onTestContentClicked: PropTypes.func,
   creativesMode: PropTypes.string,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   getLiquidTags: PropTypes.func,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,

package/v2Containers/MobilePushNew/components/CtaButtons.js

@@ -117,7 +117,7 @@ const CtaButtons = ({
         </CapHeading>
         {!isPrimaryButtonSaved && !shouldShowPrimaryCTA && (
           <CapButton
-            type="flat"
+            type="link"
             id="add-primary-button"
             onClick={handleAddPrimary}
           >
@@ -149,7 +149,7 @@ const CtaButtons = ({
         >
           <div style={{ display: 'inline-block' }}>
             <CapButton
-              type="flat"
+              type="link"
               id="add-secondary-button"
               onClick={handleAddSecondary}
               disabled

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -591,8 +591,8 @@ const MediaUploaders = ({
       return (
         <>
           <CapDivider />
-          <CapRow className="creatives-mpush-actions">
-            <CapRow className="mpush-actions-main">
+          <CapRow useLegacy className="creatives-mpush-actions">
+            <CapRow useLegacy className="mpush-actions-main">
               <CapHeading type="h4" className="mpush-actions">
                 <FormattedMessage {...messages.buttonsAndLinks} />
               </CapHeading>
@@ -607,7 +607,7 @@ const MediaUploaders = ({
             >
               <FormattedMessage {...messages.actionOnClickBody} />
             </CapCheckbox>
-            <CapRow>
+            <CapRow useLegacy>
               <CapLabel className="action-description">
                 <FormattedMessage {...messages.actionDescription} />
               </CapLabel>
@@ -772,7 +772,7 @@ const MediaUploaders = ({
             title={`${formatMessage(messages.card)} ${index + 1}`}
             extra={(
               <CapButton
-                type="flat"
+                type="link"
                 onClick={() => deleteCarouselCard(index)}
                 disabled={currentData?.length === 1}
               >
@@ -781,16 +781,16 @@ const MediaUploaders = ({
             )}
             className="mobile-push-carousel-card"
           >
-            <CapRow>
+            <CapRow useLegacy>
               {carouselMediaType === IMAGE.toLowerCase() ? (
-                <CapRow>
+                <CapRow useLegacy>
                   <CapHeading type="h4">
                     {formatMessage(messages.mediaImage)}
                   </CapHeading>
                   {renderCarouselImageComponent(index)}
                 </CapRow>
               ) : (
-                <CapRow>
+                <CapRow useLegacy>
                   <CapHeading type="h4">
                     {formatMessage(messages.mediaVideo)}
                   </CapHeading>
@@ -809,7 +809,7 @@ const MediaUploaders = ({
         <CapDivider type="vertical" />
         <CapButton
           onClick={addCarouselCard}
-          type="flat"
+          type="link"
           className="add-carousel-content-button"
           disabled={getCurrentCarouselData()?.length >= MAX_CAROUSEL_ALLOWED}
         >
@@ -849,7 +849,7 @@ const MediaUploaders = ({
               </div>
             </CapColumn>
           </CapRow>
-          <CapRow className="mobile-push-carousel-tab">
+          <CapRow useLegacy className="mobile-push-carousel-tab">
             <CapTab
               defaultActiveKey="0"
               activeKey={carouselActiveTabIndex.toString()}

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -227,7 +227,7 @@ const PlatformContentFields = ({
           />
         </CapRow>
         <CapDivider />
-        <CapRow className="creatives-mpush-media">
+        <CapRow useLegacy className="creatives-mpush-media">
           <CapHeading type="h3" className="mpush-media-type">
             <FormattedMessage {...messages.mediaType} />
           </CapHeading>
@@ -252,8 +252,8 @@ const PlatformContentFields = ({
         {content?.mediaType !== CAROUSEL && (
           <>
             <CapDivider />
-            <CapRow className="creatives-mpush-actions">
-              <CapRow className="mpush-actions-main">
+            <CapRow useLegacy className="creatives-mpush-actions">
+              <CapRow useLegacy className="mpush-actions-main">
                 <CapHeading type="h3" className="mpush-actions">
                   <FormattedMessage {...messages.buttonsAndLinks} />
                 </CapHeading>
@@ -268,7 +268,7 @@ const PlatformContentFields = ({
               >
                 <FormattedMessage {...messages.actionOnClickBody} />
               </CapCheckbox>
-              <CapRow>
+              <CapRow useLegacy>
                 <CapLabel className="action-description">
                   <FormattedMessage {...messages.actionDescription} />
                 </CapLabel>

package/v2Containers/MobilePushNew/index.js

@@ -2152,7 +2152,7 @@ const MobilePushNew = ({
       panes.push({
         key: ANDROID,
         tab: (
-          <CapRow>
+          <CapRow useLegacy>
             <CapIcon type="android" />
             {formatMessage(messages.android)}
           </CapRow>
@@ -2164,7 +2164,7 @@ const MobilePushNew = ({
       panes.push({
         key: IOS,
         tab: (
-          <CapRow>
+          <CapRow useLegacy>
             <CapIcon type="ios" />
             {formatMessage(messages.ios)}
           </CapRow>

package/v2Containers/MobilePushNew/index.scss

@@ -67,14 +67,16 @@
 
 .input-group {
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  flex-flow: column nowrap;
   gap: $CAP_SPACE_16;
 }
 
 .creatives-mpush-title,
 .creatives-mpush-message {
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  flex-flow: column nowrap;
   gap: $CAP_SPACE_08;
 }
 
@@ -122,8 +124,9 @@
   background: #fafafa;
 }
 
+/* TODO: cap-react-ui-library class removed — review this override */
 .button-form .cap-input,
-.button-form .cap-select {
+.button-form .cap-select-v2 {
   margin-bottom: $CAP_SPACE_16;
 }
 

package/v2Containers/MobilepushWrapper/index.js

@@ -72,7 +72,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
   }
 
   render() {
-    const {mobilePushCreateMode, step, getFormData, getLiquidTags, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview, restrictPersonalization, isAnonymousType, onPersonalizationTokensChange} = this.props;
+    const {mobilePushCreateMode, step, getFormData, getLiquidTags, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], waitEventContextTags = {},showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview, restrictPersonalization, isAnonymousType, onPersonalizationTokensChange} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -121,6 +121,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               templateData={templateData}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
@@ -155,6 +156,7 @@ MobilepushWrapper.propTypes = {
   type: PropTypes.string,
   onValidationFail: PropTypes.func,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,

package/v2Containers/Rcs/index.js

@@ -16,6 +16,7 @@ import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import ConfigProvider from 'antd/lib/config-provider';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
@@ -148,6 +149,7 @@ export const Rcs = (props) => {
     smsRegister,
     selectedOfferDetails,
     eventContextTags,
+    waitEventContextTags,
     accountData = {},
     // TestAndPreviewSlidebox props
     showTestAndPreviewSlidebox: propsShowTestAndPreviewSlidebox,
@@ -1143,7 +1145,7 @@ const splitTemplateVarString = (str) => {
             ) : (
               <CapButton
                 data-testid="suffix-button"
-                type="flat"
+                type="link"
                 isAddBtn
                 onClick={onTitleAddVar}
                 disabled={!!templateTitleError}
@@ -1182,7 +1184,7 @@ const splitTemplateVarString = (str) => {
   )}
 
 {/* Template Message */}
-       <CapRow id="rcs-template-message-label">
+       <CapRow useLegacy id="rcs-template-message-label">
          <CapHeader
             title={(
               <CapRow type="flex">
@@ -1205,7 +1207,7 @@ const splitTemplateVarString = (str) => {
               ) : (
                 <CapButton
                   data-testid="suffix-button"
-                  type="flat"
+                  type="link"
                   isAddBtn
                   onClick={onMessageAddVar}
                   disabled={templateDescError && templateDesc}
@@ -1216,7 +1218,7 @@ const splitTemplateVarString = (str) => {
             }
           />
         </CapRow>
-        <CapRow className="rcs-create-template-message-input">
+        <CapRow useLegacy className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
             {(isEditFlow || !isFullMode)
               ? renderedRCSEditMessage(splitTemplateVarString(templateDesc), MESSAGE_TEXT)
@@ -2275,7 +2277,7 @@ const splitTemplateVarString = (str) => {
 
     return (
       <>
-        {templateStatus !== '' && (<CapRow className="template-status-container">
+        {templateStatus !== '' && (<CapRow useLegacy className="template-status-container">
           <CapLabel type="label2">
             {formatMessage(messages.templateStatusLabel)}
           </CapLabel>
@@ -2307,25 +2309,29 @@ const splitTemplateVarString = (str) => {
               />
             )}
             {renderLabel('templateTypeLabel')}
-            <CapRadioGroup
-              id="select-rcs-template-type"
-              options={TEMPLATE_TYPE_OPTIONS}
-              onChange={onTemplateTypeChange}
-              value={templateType}
-              disabled={(isEditFlow || !isFullMode)}
-            />
+            <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+              <CapRadioGroup
+                id="select-rcs-template-type"
+                options={TEMPLATE_TYPE_OPTIONS}
+                onChange={onTemplateTypeChange}
+                value={templateType}
+                disabled={(isEditFlow || !isFullMode)}
+              />
+            </ConfigProvider>
 
             {/* Show media only for rich_card or carousel */}
             {(templateType === contentType.rich_card || templateType === contentType.carousel) && (
               <>
                 {renderLabel('mediaLabel')}
-                  <CapRadioGroup
-                    options={mediaRadioOptions || []}
-                    value={templateMediaType}
-                    onChange={onTemplateMediaTypeChange}
-                    disabled={(isEditFlow || !isFullMode)}
-                    className="rcs-radio"
-                  />
+                  <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+                    <CapRadioGroup
+                      options={mediaRadioOptions || []}
+                      value={templateMediaType}
+                      onChange={onTemplateMediaTypeChange}
+                      disabled={(isEditFlow || !isFullMode)}
+                      className="rcs-radio"
+                    />
+                  </ConfigProvider>
                 <div className="rcs-container-image">
                   {getMediaBasedComponent()}
                 </div>

package/v2Containers/Rcs/index.scss

@@ -44,13 +44,6 @@
     margin-right: 50px;
   }
 
-  .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;
   }