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

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/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',

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