@capillarytech/creatives-library 6.12.4 → 6.12.7

package/v2Components/TemplatePreview/assets/images/wechat_mobile_android.svg

@@ -1,20 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
-    <g fill="none" fill-rule="evenodd">
-        <rect width="220" height="472" fill="#101211" rx="26"/>
-        <rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
-        <rect width="182" height="136" x="19" y="112" fill="#F4F5F7" rx="17.5"/>
-        <path fill="#F4F5F7" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
-        <path fill="#F4F5F7" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
-        <rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
-        <rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
-        <circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
-        <circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
-        <text fill="#000" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
-            <tspan x="49.5" y="71">Muji India</tspan>
-        </text>
-        <circle cx="199" cy="63" r="1" fill="#000"/>
-        <circle cx="199" cy="70" r="1" fill="#000"/>
-        <circle cx="199" cy="66.5" r="1" fill="#000"/>
-        <path fill="#000" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="220" height="472" fill="#101211" rx="26"/>
+        <rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
+        <rect width="182" height="136" x="19" y="112" fill="#F4F5F7" rx="17.5"/>
+        <path fill="#F4F5F7" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
+        <path fill="#F4F5F7" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
+        <rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
+        <rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
+        <circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+        <circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+        <text fill="#000" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
+            <tspan x="49.5" y="71">Muji India</tspan>
+        </text>
+        <circle cx="199" cy="63" r="1" fill="#000"/>
+        <circle cx="199" cy="70" r="1" fill="#000"/>
+        <circle cx="199" cy="66.5" r="1" fill="#000"/>
+        <path fill="#000" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
+    </g>
+</svg>

package/v2Components/TemplatePreview/tests/index.test.js

@@ -1,10 +1,10 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import TemplatePreview from '../index';
-
-describe('<TemplatePreview />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import TemplatePreview from '../index';
+
+describe('<TemplatePreview />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/Cap/_cap.scss

@@ -0,0 +1,6 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables.scss";
+
+ .seconds-right {
+   text-align: right;
+   padding: $CAP_SPACE_16 0;
+ } 

package/v2Containers/Cap/constants.js

@@ -31,3 +31,7 @@ export const CLEAR_TOPBAR_MENU_DATA = 'creatives/cap/CLEAR_TOPBAR_MENU_DATA';
 export const CAMPAIGN_SETTINGS_URL = '/creatives/settings/message';
 export const ORG_SETTINGS_URL = '/org/index';
 export const HELP_URL = 'https://support.capillarytech.com/en/support/solutions/4000007853';
+
+export const ORG_REFRESH_SEC = 10; 
+export const ORG_CHANGED = 'ORG_CHANGED'; 
+

package/v2Containers/Cap/index.js

@@ -2,15 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-import {CapNotification} from '@capillarytech/cap-ui-library';
+import { CapNotification, CapModal, CapSnackBar } from '@capillarytech/cap-ui-library';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from 'moment';
 // import 'moment/locale/zh-cn';
-import { GA } from '@capillarytech/cap-ui-utils';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { GA, multipleOrgSwitch, utilsSessionStorageApi } from '@capillarytech/cap-ui-utils';
+import { injectIntl, FormattedMessage, intlShape, FormattedHTMLMessage } from 'react-intl';
 import messages from './messages';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
@@ -25,8 +25,24 @@ import {
   HELP_URL,
   ORG_SETTINGS_URL,
   CAMPAIGN_SETTINGS_URL,
+  ORG_REFRESH_SEC,
+  ORG_CHANGED
 } from './constants';
+import './_cap.scss';
+import { BugsnagClient } from '../../app';
+
 const gtm = window.dataLayer || [];
+const {
+  logNewTab,
+  getOrgNameFromId,
+  tabBeforeUnloadEventHandler,
+  utilsHandleStorageChange,
+  isMultipleTabsOpen,
+} = multipleOrgSwitch;
+const {
+  loadSessionItem,
+  saveSessionItem,
+} = utilsSessionStorageApi;
 
 const CapWrapper = styled.div`
   margin: 0 auto;
@@ -45,6 +61,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.state = {
       switchedOrg: false,
       isCreativesAccessible: true,
+      refreshSeconds: ORG_REFRESH_SEC,
+      selectedOrgId: null,
+      showRefreshModal: false,
+      showOrgChangeModal: false,
+      localStorageOrgInfo: { oldValue: null, newValue: null },
     };
     this.changeOrg = this.changeOrg.bind(this);
     this.logout = this.logout.bind(this);
@@ -85,6 +106,14 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     //locale = 'zh';
     console.log('Setting final locale as', locale);
     moment.locale(locale);
+    window.addEventListener('storage', this.handleStorageChange, false);
+    document.addEventListener(
+      'visibilitychange',
+      this.handleVisibilityChange,
+      false,
+    );
+    window.addEventListener('pageshow', this.tabOnloadEventHandler, false);
+    window.addEventListener('pagehide', tabBeforeUnloadEventHandler, false);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -119,10 +148,41 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      !(prevProps.Global.currentOrgDetails) &&
+      this.props.Global.currentOrgDetails &&
+      loadSessionItem(ORG_CHANGED)
+    ) {
+      this.showOrgChangeSnackBar();
+    }
+  }
+
   componentWillUnmount() {
     this.setState({ switchedOrg: false });
     this.props.actions.clearTopbarMenuData();
+    window.removeEventListener('storage', this.handleStorageChange, false);
+    document.removeEventListener(
+      'visibilitychange',
+      this.handleVisibilityChange,
+      false,
+    );
+    window.removeEventListener(
+      'pageshow',
+      this.tabOnloadEventHandler,
+      false,
+    );
+    window.removeEventListener(
+      'pagehide',
+      tabBeforeUnloadEventHandler,
+      false,
+    );
   }
+
+  tabOnloadEventHandler = () => {
+    logNewTab(BugsnagClient);
+  }
+  
   setDimensionData() {
     const userGtmData = this.getUserGtmData();
     Object.values(userGtmData).forEach((value, index) => {
@@ -158,6 +218,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     };
     return map[locale];
   }
+
   handleRemoveMessage(messageIndex) {
     this.props.actions.removeMessageFromQueue(messageIndex);
   }
@@ -172,17 +233,157 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.props.actions.logout();
   }
   changeOrg(orgId) {
-    this.props.actions.changeOrg(orgId);
-    this.navigateToDashboard();
+    //display orgChangeModal if more than one tabs is open
+    if (isMultipleTabsOpen()) {
+      this.setState({
+        showOrgChangeModal: true,
+        selectedOrgId: orgId,
+      });
+    } else {
+      this.props.actions.changeOrg(orgId);
+    }
   }
 
+  showOrgChangeSnackBar = () => {
+    saveSessionItem(ORG_CHANGED, false);
+    const {
+      Global: {
+        currentOrgDetails: {
+          basic_details: { name: currentOrgName } = {},
+        } = {},
+      } = {},
+      intl: { formatMessage } = {},
+    } = this.props;
+    CapSnackBar.warning({
+      content: (
+        <div>
+          {formatMessage(messages.orgChangedText)}
+          <b>
+            {formatMessage(messages.newOrgName, {
+              newOrgName: currentOrgName,
+            })}
+          </b>
+        </div>
+      ),
+      showCloseIcon: true,
+    });
+  };
+
+  handleVisibilityChange = () => {
+    const activeDoc = document.hidden || false;
+    const { showRefreshModal, refreshSeconds } = this.state;
+    if (
+      activeDoc === false &&
+      showRefreshModal &&
+      refreshSeconds === ORG_REFRESH_SEC
+    ) {
+      const timer = setInterval(() => {
+        this.setState(prevState => ({
+          refreshSeconds: prevState.refreshSeconds - 1,
+        }));
+      }, 1000);
+      setTimeout(() => {
+        clearInterval(timer);
+        saveSessionItem(ORG_CHANGED, true);
+        this.navigateToDashboard();
+      }, refreshSeconds * 1000);
+    }
+  };
+
+  handleStorageChange = (e) => {
+    const { oldValue, newValue } = e;
+     if (utilsHandleStorageChange(e, 'orgID')) {
+      const localStorageOrgInfo = { oldValue, newValue };
+      this.setState({ showRefreshModal: true, localStorageOrgInfo });
+    }
+  };
+
+  renderOrgRefreshModal = () => {
+    const {
+      localStorageOrgInfo: { oldValue: oldOrgId, newValue: newOrgId } = {},
+      showRefreshModal,
+      refreshSeconds,
+    } = this.state;
+    const {
+      Global: { user: { proxyOrgList } = {} } = {},
+      intl: { formatMessage } = {},
+    } = this.props;
+    const oldOrgName = getOrgNameFromId(Number(oldOrgId), proxyOrgList);
+    const newOrgName = getOrgNameFromId(Number(newOrgId), proxyOrgList);
+    const modalData = (
+      <CapModal
+        title={formatMessage(messages.orgRefreshHeading)}
+        visible={showRefreshModal}
+        closable={false}
+        centered
+        maskClosable={false}
+        footer={null}
+      >
+        <div className="modal-body">
+          <span className="title">
+            <FormattedHTMLMessage
+              {...messages.refreshOrgText}
+              values={{ oldOrgName, newOrgName }}
+            />
+          </span>
+          <div className="content seconds-right">
+            {formatMessage(messages.refreshText, {
+              time: `${refreshSeconds}s`,
+            })}
+          </div>
+        </div>
+      </CapModal>
+    );
+    return modalData;
+  };
+
+  renderOrgChangeModal = () => {
+    const { selectedOrgId, showOrgChangeModal } = this.state;
+    const {
+      Global: { user: { proxyOrgList } = {},
+      currentOrgDetails: { basic_details: { name: oldOrgName } = {} } = {},
+      },
+      intl: { formatMessage } = {},
+    } = this.props; 
+    const newOrgName = getOrgNameFromId(selectedOrgId, proxyOrgList);
+    return (
+      <CapModal
+        className="change-org-confirm"
+        title={formatMessage(messages.areYouSureText)}
+        visible={showOrgChangeModal}
+        onOk={this.handleOrgChangeOk}
+        onCancel={this.handleOrgChangeCancel}
+        centered
+        okText={formatMessage(messages.changeOk)}
+        cancelText={formatMessage(messages.cancel)}
+      >
+        <FormattedHTMLMessage
+          {...messages.orgChangeText}
+          values={{ oldOrgName, newOrgName }}
+        />
+      </CapModal>
+    );
+  };
+
+  handleOrgChangeOk = () => {
+    const { selectedOrgId: orgId } = this.state;
+    if (orgId !== null) {
+      this.props.actions.changeOrg(orgId);
+      this.setState({ showOrgChangeModal: false });
+    }
+  };
+
+  handleOrgChangeCancel = () => {
+    this.setState({ showOrgChangeModal: false });
+  };
+
   render() {
     const { Global, location } = this.props;
     const { topbarMenuData, isLoggedIn, currentOrgDetails } = Global;
     const topbarMenuDataOptions = topbarMenuData && topbarMenuData.data ? topbarMenuData.data : [];
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
-    const { isCreativesAccessible } = this.state;
+    const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
     console.log('v2 locale loading', this.props.loader.localeLoading);
     return (
       <CapWrapper>
@@ -231,6 +432,8 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
           )
         }
          </> }
+        {showRefreshModal && this.renderOrgRefreshModal()}
+        {showOrgChangeModal && this.renderOrgChangeModal()}
       </CapWrapper>
     );
   }
@@ -244,6 +447,7 @@ Cap.propTypes = {
   appActions: PropTypes.object,
   locationActions: PropTypes.object,
   location: PropTypes.object,
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Cap/messages.js

@@ -72,4 +72,45 @@ export default defineMessages({
     id: 'creatives.containersV2.incentive',
     defaultMessage: 'Incentive',
   },
+
+    //refresh due to org change messages
+
+  "refreshOrgText": {
+    id: `creatives.containersV2.refreshOrgText`,
+    defaultMessage:
+      'Refreshing this page & changing the Org from <b>{oldOrgName}</b> to <b>{newOrgName}</b>. At a time only one Org can be selected on the browser.',
+  },
+  "refreshText": {
+    id: `creatives.containersV2.refreshText`,
+    defaultMessage: 'Refreshing in {time}...',
+  },
+  "areYouSureText": {
+    id: `creatives.containersV2.areYouSureText`,
+    defaultMessage: 'Are you sure?',
+  },
+  "changeOk": {
+    id: `creatives.containersV2.changeOk`,
+    defaultMessage: 'Ok, change',
+  },
+  "cancel": {
+    id: `creatives.containersV2.cancel`,
+    defaultMessage: 'Cancel',
+  },
+  "orgChangeText": {
+    id: `creatives.containersV2.orgChangeText`,
+    defaultMessage:
+      'Changing from <b>{oldOrgName}</b> to <b>{newOrgName}</b> will change the organisation for applications open in other tabs as well.<br/>Do you want to make the change to <b>{newOrgName}</b>?',
+  },
+  "orgChangedText": {
+    id: `creatives.containersV2.orgChangedText`,
+    defaultMessage: 'Organization changed to ',
+  },
+  "orgRefreshHeading": {
+    id: `creatives.containersV2.orgRefreshHeading`,
+    defaultMessage: 'Org refresh',
+  },
+  "newOrgName": {
+    id: `creatives.containersV2.newOrgName`,
+    defaultMessage: '{newOrgName}',
+  },
 });

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -69,7 +69,7 @@ const getLineType = ({
     }
   }
   return {};
-}
+};
 
 function SlideBoxContent(props) {
   const {
@@ -96,6 +96,7 @@ function SlideBoxContent(props) {
       cap,
       onResetStep,
       isFullMode,
+      editor,
       onCallTaskSubmit,
       setIsLoadingContent,
       showTemplateName,
@@ -184,7 +185,7 @@ function SlideBoxContent(props) {
           } = {},
           template,
         }) => {
-          let previewContent = {};
+          const previewContent = {};
           previewContent.messageContent = text;
           previewContent.previewImageUrl = previewImageUrl;
           previewContent.selectedSticker = selectedSticker || {
@@ -366,6 +367,7 @@ function SlideBoxContent(props) {
         step={templateStep}
         showNextStep={onCreateNextStep}
         isFullMode={isFullMode}
+        editor={editor}
         cap={cap}
         onResetStep={onResetStep}
         showTemplateName={showTemplateName}
@@ -392,6 +394,7 @@ function SlideBoxContent(props) {
         getFormSubscriptionData={getFormData}
         getDefaultTags={type}
         isFullMode={isFullMode}
+        editor={editor}
         cap={cap}
         showTemplateName={showTemplateName}
         onValidationFail={onValidationFail}
@@ -456,6 +459,7 @@ function SlideBoxContent(props) {
             messageDetails={messageDetails}
             cap={cap}
             onFacebookSubmit={onFacebookSubmit}
+            isFullMode={isFullMode}
           />
         )
       }

package/v2Containers/CreativesContainer/actions.js

@@ -1,27 +1,27 @@
-/*
- *
- * CreativesContainer actions
- *
- */
-
-import {
-  DEFAULT_ACTION,
-  HIDE_CONTAINER_LOADER,
-  SHOW_CONTANER_LOADER,
-} from './constants';
-
-export function defaultAction() {
-  return {
-    type: DEFAULT_ACTION,
-  };
-}
-export function showCreativesContainerLoader() {
-  return {
-    type: SHOW_CONTANER_LOADER,
-  };
-}
-export function hideCreativesContanerLoader() {
-  return {
-    type: HIDE_CONTAINER_LOADER,
-  };
-}
+/*
+ *
+ * CreativesContainer actions
+ *
+ */
+
+import {
+  DEFAULT_ACTION,
+  HIDE_CONTAINER_LOADER,
+  SHOW_CONTANER_LOADER,
+} from './constants';
+
+export function defaultAction() {
+  return {
+    type: DEFAULT_ACTION,
+  };
+}
+export function showCreativesContainerLoader() {
+  return {
+    type: SHOW_CONTANER_LOADER,
+  };
+}
+export function hideCreativesContanerLoader() {
+  return {
+    type: HIDE_CONTAINER_LOADER,
+  };
+}

package/v2Containers/CreativesContainer/constants.js

@@ -1,17 +1,17 @@
-/*
- *
- * CreativesContainer constants
- *
- */
-
-export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
-export const EMAIL = "EMAIL";
-export const SMS = "SMS";
-export const EBILL = "EBILL";
-export const LINE = "LINE";
-export const CALL_TASK = "CALL_TASK";
-export const MOBILE_PUSH = "MOBILEPUSH";
-export const WECHAT = "WECHAT";
-export const FACEBOOK = "FACEBOOK";
-export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
-export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
+/*
+ *
+ * CreativesContainer constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
+export const EMAIL = "EMAIL";
+export const SMS = "SMS";
+export const EBILL = "EBILL";
+export const LINE = "LINE";
+export const CALL_TASK = "CALL_TASK";
+export const MOBILE_PUSH = "MOBILEPUSH";
+export const WECHAT = "WECHAT";
+export const FACEBOOK = "FACEBOOK";
+export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
+export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -225,9 +225,9 @@ class Creatives extends React.Component {
           const messagesDefinition = JSON.parse(messages);
           let lineContent = JSON.parse(messageBody || '{}').messages || [{}];
           lineContent = lineContent.map((content, index) => ({
-              ...content,
-              ...(messagesDefinition[index] || {})
-            }));
+            ...content,
+            ...(messagesDefinition[index] || {}),
+          }));
           creativesTemplateData = {
             type: constants.LINE,
             isDefault,
@@ -529,7 +529,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -602,6 +602,7 @@ class Creatives extends React.Component {
               selectedAccount={this.props.selectedAccount}
               onShowTemplates={this.onShowTemplates}
               handleClose={this.handleCloseSlideBox}
+              editor={editor}
           />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/CreativesContainer/index.scss

@@ -1,45 +1,45 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-$classPrefix: add-creatives-section;
-
-.#{$classPrefix} {
-    &.creatives-library-mode{
-        .sms-create-container,  .sms-email-container{
-            .ant-tabs-top-bar{
-                display: none;
-            }
-        }
-    }
-    .#{$classPrefix}-footer {
-        position: absolute;
-        bottom: 0;
-        left: 1px;
-        padding: 0 12px;
-        display: flex;
-        align-items: center;
-        height: 48px;
-        border-top: 1px solid $CAP_G07;
-
-        &.with-creative {
-            width: 100%;
-        }
-    }
-    .wechat-steps {
-        width: 40% !important;
-        left: 20%;
-        position: relative;
-        .ant-steps-item-title::after {
-            top: 8px;
-        }
-        .ant-steps-item-content {
-            vertical-align: middle;
-            padding-top: 4px;
-        }
-    }
-}
-
-.map-template-create {
-    .slidebox-header div:first-child {
-        width: 100%;
-    }
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: add-creatives-section;
+
+.#{$classPrefix} {
+    &.creatives-library-mode{
+        .sms-create-container,  .sms-email-container{
+            .ant-tabs-top-bar{
+                display: none;
+            }
+        }
+    }
+    .#{$classPrefix}-footer {
+        position: absolute;
+        bottom: 0;
+        left: 1px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        height: 48px;
+        border-top: 1px solid $CAP_G07;
+
+        &.with-creative {
+            width: 100%;
+        }
+    }
+    .wechat-steps {
+        width: 40% !important;
+        left: 20%;
+        position: relative;
+        .ant-steps-item-title::after {
+            top: 8px;
+        }
+        .ant-steps-item-content {
+            vertical-align: middle;
+            padding-top: 4px;
+        }
+    }
+}
+
+.map-template-create {
+    .slidebox-header div:first-child {
+        width: 100%;
+    }
 }