@capillarytech/creatives-library 2.0.70 → 2.0.72

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+import { CapHeader, CapIcons, CapLabel } from '@capillarytech/cap-ui-library';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import messages from './messages';
+const PrefixWrapper = styled.div`
+  margin-right: 16px;
+`;
+function SlideBoxHeader(props) {
+  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, showTemplateName } = props;
+  const TemplateName = isFullMode && showTemplateName;
+  return (
+    <div key="creatives-container-slidebox-header-content">
+      {slidBoxContent === 'templates' && !TemplateName && (
+      <CapHeader
+        title={<FormattedMessage {...messages.creativeTemplates} />}
+        description={
+          <FormattedMessage {...messages.creativeTemplatesDesc} />
+            }
+          />
+        )}
+      {TemplateName && <TemplateName/>}
+      {slidBoxContent === 'preview' && (
+      <CapHeader
+        title={templateData.name}
+        description={<CapLabel type="label3">
+          <FormattedMessage {...messages.lastUpdated}/>{moment(templateData.updatedAt).format('DD MMM YYYY')} <FormattedMessage {...messages.by}/>{templateData.updatedByName}
+        </CapLabel>}
+        prefix={!isFullMode &&
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+      {!TemplateName && slidBoxContent === 'editTemplate' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.editMessageContent} />}
+        prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+      {!TemplateName && slidBoxContent === 'createTemplate' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.createMessageContent} />}
+        prefix={!isFullMode && showPrefix &&
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+    </div>
+  );
+}
+SlideBoxHeader.propTypes = {
+  slidBoxContent: PropTypes.node,
+  templateData: PropTypes.object,
+  onShowTemplates: PropTypes.func,
+  creativesMode: PropTypes.string,
+  isFullMode: PropTypes.bool,
+  showPrefix: PropTypes.bool,
+  showTemplateName: PropTypes.func,
+};
+export default SlideBoxHeader;

package/v2Containers/CreativesContainer/actions.js

@@ -0,0 +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,
+  };
+}

package/v2Containers/CreativesContainer/constants.js

@@ -0,0 +1,16 @@
+/*
+ *
+ * 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 SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
+export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -0,0 +1,483 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  CapSlideBox, CapHeader, CapLink, CapInput,
+} from '@capillarytech/cap-ui-library';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import classnames from 'classnames';
+import {isEmpty, get, forEach} from 'lodash';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators } from 'redux';
+import styled from 'styled-components';
+
+import * as actions from './actions';
+import {selectEmailLayout, uploadSelector, templateUserList} from '../Templates/selectors';
+import SlideBoxContent from './SlideBoxContent';
+import SlideBoxHeader from './SlideBoxHeader';
+import SlideBoxFooter from './SlideBoxFooter';
+import * as constants from './constants';
+import * as commonUtil from '../../utils/common';
+
+import './index.scss';
+import * as templateActions from '../Templates/actions';
+import * as globalActions from '../Cap/actions';
+import {isLoading as isLoadingSelector} from './selectors';
+import messages from './messages';
+const classPrefix = 'add-creatives-section';
+
+const SlideBoxWrapper = styled.div`
+  .cap-slide-box-v2-container{
+    .slidebox-header, .slidebox-content-container, .slidebox-footer{
+      padding: 0 32px;
+    }
+  }
+`;
+class Creatives extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoadingContent: true,
+      templateStep: 1, //modeSelection: for template name and (for email selecting upload or editor), and createTemplate to create template create based on modeSelection
+      showSlideBox: true,
+      slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
+      templateData: this.getTemplateData(props.templateData),
+      currentChannel: this.props.channel || 'sms',
+    };
+    this.creativesTemplateSteps = {
+      1: 'modeSelection',
+      2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
+      3: 'createTemplateContent',
+    };
+  }
+  componentWillUnmount() {
+    if (!this.props.isFullMode) {
+      this.props.templateActions.resetTemplateStoreData();
+      this.props.globalActions.clearMetaEntities();
+    }
+  }
+
+
+  onSelectTemplate = (template) => {
+    this.setState({ slidBoxContent: 'editTemplate', templateData: template });
+  };
+  onPreviewTemplate = (template) => {
+    const templateData = template;
+    const usersList = commonUtil.getMergedUserList(this.props.templateUserList);
+    const userId = parseInt(template.updatedBy, 10);
+    templateData.updatedByName = commonUtil.getUserNameById(userId, usersList );
+    this.setState({ slidBoxContent: 'preview', templateData });
+  };
+  onEditTemplate = () => {
+    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
+  };
+  onCreateNew = () => {
+    this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true });
+  };
+
+  onShowTemplates = () => {
+    this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
+  };
+  onChannelChange = (channel) => {
+    this.setState({currentChannel: channel});
+  }
+  onCreateNextStep = () => {
+    this.setState((prevState) => {
+      let templateStep = prevState.templateStep + 1;
+      const {emailCreateMode, currentChannel} = prevState;
+      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
+        templateStep = prevState.templateStep + 2;
+      }
+
+      return {
+        templateStep,
+      };
+    });
+  }
+
+  onEmailModeChange = (mode) => {
+    this.setState({ emailCreateMode: mode});
+  }
+  onMobilepushModeChange = (mode) => {
+    this.setState({ mobilePushCreateMode: mode});
+  }
+
+  onCallTaskSubmit = (data) => {
+    this.props.getCreativesData({
+      channel: 'CALL_TASK',
+      ...data,
+    });
+  }
+
+  getTemplateData = (templateData) => { //from consumers to creatives
+    const {isFullMode} = this.props;
+    if (!isFullMode && templateData) { // for component mode
+      const {channel} = templateData;
+      let creativesTeplateData = {type: channel };
+      if (channel === constants.SMS) {
+        const formData = {
+          "sms-editor": templateData.messageBody,
+        };
+        creativesTeplateData = {
+          type: channel,
+          name: "Campaign message SMS content",
+          versions: {
+            base: formData,
+            history: [formData],
+          },
+        };
+      } else if (channel === constants.EMAIL) {
+        const formData = {
+          subject: templateData.emailSubject,
+          html_content: templateData.emailBody,
+          is_drag_drop: templateData.is_drag_drop,
+          lang_id: templateData.lang_id,
+          iso_code: templateData.iso_code,
+          language: templateData.language,
+          drag_drop_id: templateData.drag_drop_id,
+        };
+        creativesTeplateData = {
+          base: formData,
+          edit: true,
+          type: channel,
+        };
+      } else if (channel === constants.CALL_TASK) {
+        creativesTeplateData = {
+          subject: templateData.subject,
+          messageBody: templateData.messageBody,
+          description: templateData.description,
+          edit: true,
+          type: channel,
+        };
+      } else if (channel === constants.MOBILE_PUSH) {
+        const mode = get(templateData, 'androidContent.type') || get(templateData, 'iosContent.type');
+        creativesTeplateData = {
+          type: channel,
+          name: templateData.messageSubject,
+          versions: {
+            base: {
+              ANDROID: templateData.androidContent,
+              IOS: templateData.iosContent,
+            },
+          },
+          definition: {accountId: templateData.accountId, mode: mode.toLowerCase()},
+        };
+      }
+      return creativesTeplateData;
+    }
+    return templateData || null;
+  }
+
+  getCreativesData = (channel, template) => { //from creatives to consumers
+    let templateData = {channel };
+    if (channel === constants.SMS && template.value.base) {
+      templateData.messageBody = template.value.base['sms-editor'];
+    } else if (channel === constants.EMAIL && template.value.base) {
+      const emailBase = template.value.base;
+      templateData = {...templateData, ...emailBase, emailBody: emailBase.html_content, emailSubject: emailBase.subject};
+      delete templateData.html_content;
+      delete templateData.subject;
+    } else if (channel === constants.MOBILE_PUSH && get(template, "value.versions.base")) {
+      const mobilpushTemplate = template.value;
+      templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
+      const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
+      if (!isEmpty(androidContent)) {
+        delete androidContent.cuid;
+        delete androidContent.luid;
+        delete androidContent.communicationId;
+        const custom = {};
+        forEach(androidContent.custom, (customKeyValue) => {
+          custom[customKeyValue.key] = customKeyValue.value;
+        } );
+        androidContent.custom = custom;
+        templateData.androidContent = androidContent;
+        templateData.androidContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
+        templateData.androidContent.deviceType = 'ANDROID';
+      }
+      const iosContent = get(mobilpushTemplate, 'versions.base.IOS');
+      if (!isEmpty(iosContent)) {
+        delete iosContent.cuid;
+        delete iosContent.luid;
+        delete iosContent.communicationId;
+        const custom = {};
+        forEach(iosContent.custom, (customKeyValue) => {
+          custom[customKeyValue.key] = customKeyValue.value;
+        } );
+        iosContent.custom = custom;
+        templateData.iosContent = iosContent;
+        templateData.iosContent.type = get(mobilpushTemplate, 'definition.mode').toUpperCase();
+        templateData.iosContent.deviceType = 'IOS';
+      }
+      templateData.messageSubject = mobilpushTemplate.name;
+    }
+    return templateData;
+  };
+  getSlideBocContent({mode, templateData, isFullMode}) {
+    let creativesMode = isFullMode ? 'createTemplate' : 'templates';// for library mode templates page is initial mode and for full mode createTemplates
+    if (mode === 'create' && isFullMode) {
+      creativesMode = 'createTemplate';
+    } else if (mode === 'create' && isEmpty(templateData)) {
+      creativesMode = 'templates';
+    } else if (mode === 'edit') {
+      creativesMode = 'editTemplate';
+    } else if (mode === 'preview' && isFullMode) {
+      creativesMode = 'preview';
+    }
+    return creativesMode;
+  }
+
+  getFormData = (template) => {
+    if (template.validity) {
+      this.setState(
+        {
+          isGetFormData: false,
+        },
+        () => {
+          const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
+          const channel = templateData.type;
+          const creativesData = this.getCreativesData(channel, template);// convers data to consumer understandable format
+          this.props.getCreativesData(creativesData);// send data to consumer
+        },
+      );
+    }
+  };
+  setIsLoadingContent = (isLoadingContent) => {
+    if (this.state.isLoadingContent !== isLoadingContent) {
+      this.setState({isLoadingContent });
+    }
+  }
+  resetStep = () => {
+    this.setState((prevState) => {
+      let newState = {
+        templateStep: 1,
+      };
+      if (prevState.currentChannel.toUpperCase() === constants.EMAIL) {
+        newState = { ...newState, emailCreateMode: null };
+      }
+      return newState;
+    });
+  }
+  handleCloseSlideBox = () => {
+    this.setState((prevState) => ({
+      ...prevState,
+      templateData: undefined,
+      showSlideBox: false,
+    }), this.props.handleCloseCreatives);
+  };
+  saveMessage = () => {
+    this.setState({ isGetFormData: true });
+  };
+  discardMessage = () => {
+    this.setState({ isDiscardMessage: true });
+  }
+  shouldShowFooter = () => {
+    const {isFullMode } = this.props;
+    const {slidBoxContent, currentChannel, emailCreateMode, templateStep, mobilePushCreateMode} = this.state;
+    const channel = currentChannel.toUpperCase();
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    let showFooter = false;
+    showFooter = isFullMode && slidBoxContent === "preview";
+    const isMobilepush = channel === constants.MOBILE_PUSH;
+    if (!isFullMode ) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
+      const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+      const isCallTask = channel === constants.CALL_TASK;
+      showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview') && !isCallTask;
+      if (isMobilepush) {
+        showFooter = currentStep === "modeSelection" || (currentStep === 'createTemplateContent' && !isEmpty(mobilePushCreateMode));
+      }
+    } else if (channel === constants.EMAIL && isFullMode) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL && currentStep !== 'createTemplateContent';
+      showFooter = isEmailCreate && emailCreateMode;
+    }
+    if (channel === constants.EMAIL && emailCreateMode === "upload") {
+      showFooter = showFooter && !this.props.isUploading;
+    }
+    if (slidBoxContent === 'createTemplate' && channel === constants.EMAIL && emailCreateMode && currentStep === 'createTemplateContent') { // full mode create flow email
+      showFooter = true;
+    }
+    if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection'))) {
+      showFooter = true;
+    }
+    if (channel === constants.MOBILE_PUSH && ((slidBoxContent === 'createTemplate' && !isEmpty(mobilePushCreateMode)) || (slidBoxContent === 'editTemplate' && currentStep === 'modeSelection'))) {
+      showFooter = true;
+    }
+
+
+    if (showFooter) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+        showFooter = showFooter && !this.state.isLoadingContent;
+      } else if (slidBoxContent === "editTemplate" && ((channel === constants.EMAIL && currentStep === 'modeSelection') || (channel === constants.SMS && currentStep === 'modeSelection'))) {
+        showFooter = showFooter && !this.state.isLoadingContent;
+      }
+    }
+    return showFooter;
+  }
+  shouldShowDoneFooter = () => {
+    const {slidBoxContent, templateStep, currentChannel} = this.state;
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    let showDone = false;
+    const channel = currentChannel.toUpperCase();
+    if (channel === constants.EMAIL || channel === constants.SMS) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL && currentStep !== 'createTemplateContent';
+      showDone = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+    } else if (channel === constants.MOBILE_PUSH) {
+      showDone = currentStep === "createTemplateContent" || slidBoxContent === "editTemplate";
+    }
+
+    return showDone;
+  }
+  showTemplateName = ({formData, onFormDataChange}) => { //gets called from email/index after template data is fetched
+    const {slidBoxContent, currentChannel, isEditName} = this.state;
+    const channel = currentChannel.toUpperCase();
+    if ((channel === constants.EMAIL || channel === constants.MOBILE_PUSH) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
+      const name = get(formData, 'template-name');
+      if (name && !isEditName) {
+        const TemplateNameComponent = () => (
+          <CapHeader
+            inline
+            title={name}
+            description={<CapLink
+              title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
+              onClick={() => { this.setState({isEditName: true}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}/>
+          }/>);
+        this.setState({templateNameComponent: TemplateNameComponent});
+      } else if (isEditName) {
+        const TemplateNameComponent = () => (<CapInput
+          key="cap-input-template-name"
+          value={name}
+          suffix={<span/>}
+          onBlur={() => { this.setState({isEditName: false}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}
+          onChange={(ev) => {
+            const value = ev.currentTarget.value;
+            const newFormData = {...formData, 'template-name': value};
+            onFormDataChange(newFormData);
+          }}
+          />);
+        this.setState({templateNameComponent: TemplateNameComponent});
+      }
+    }
+  }
+  shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
+    const {slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode} = this.state;
+    let isShowContinueFooter = false;
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    const channel = currentChannel.toUpperCase();
+    if (channel === constants.EMAIL || channel === constants.SMS) {
+      if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
+        let isEmailCreate = slidBoxContent === 'createTemplate';
+        isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
+        isShowContinueFooter = isEmailCreate && emailCreateMode;
+      }
+    } else if (currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
+      isShowContinueFooter = !isEmpty(mobilePushCreateMode) && currentStep === "modeSelection";
+    }
+
+    return isShowContinueFooter;
+  }
+  render() {
+    const {templateNameComponent, slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage} = this.state;
+    const {isFullMode, creativesMode, cap, isUploading} = this.props;
+    return (
+      <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
+        <CapSlideBox
+          header={
+            <SlideBoxHeader
+              key="creatives-container-slidebox-header"
+              messages={this.props.messages}
+              slidBoxContent={this.state.slidBoxContent}
+              templateData={templateData}
+              onShowTemplates={this.onShowTemplates}
+              creativesMode={creativesMode}
+              isFullMode={isFullMode}
+              isLoadingContent={isLoadingContent}
+              showTemplateName={templateNameComponent}
+              showPrefix={!isUploading} // not show back button when email template is being uploaded
+            />
+          }
+          content={
+            <SlideBoxContent
+              key="creatives-container-slidebox-content"
+              onSelectTemplate={this.onSelectTemplate}
+              onPreviewTemplate={this.onPreviewTemplate}
+              slidBoxContent={slidBoxContent}
+              templateData={templateData}
+              location={this.props.location}
+              messageDetails={this.props.messageDetails}
+              getFormData={this.getFormData}
+              onCallTaskSubmit={this.onCallTaskSubmit}
+              onCreateNew={this.onCreateNew}
+              isGetFormData={isGetFormData}
+              isDiscardMessage={isDiscardMessage}
+              isFullMode={isFullMode}
+              currentChannel={currentChannel.toUpperCase()}
+              onChannelChange={this.onChannelChange}
+              onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
+              emailCreateMode={emailCreateMode}// upload zip || use editor are values
+              templateStep={this.creativesTemplateSteps[templateStep]}
+              onCreateNextStep={this.onCreateNextStep}
+              onResetStep={this.resetStep}
+              cap={cap}
+              setIsLoadingContent={this.setIsLoadingContent}
+              onMobilepushModeChange={this.onMobilepushModeChange}
+              mobilePushCreateMode={mobilePushCreateMode}
+              showTemplateName={this.showTemplateName}
+            />
+          }
+          footer={this.shouldShowFooter() &&
+            <SlideBoxFooter
+              isFullMode={isFullMode}
+              messages={this.props.messages}
+              onSave={this.saveMessage}
+              onDiscard={this.discardMessage}
+              onEditTemplate={this.onEditTemplate}
+              slidBoxContent={slidBoxContent}
+              onCreateNextStep={this.onCreateNextStep}
+              currentChannel={currentChannel.toUpperCase()}
+              templateStep={this.creativesTemplateSteps[templateStep]}
+              emailCreateMode={emailCreateMode}
+              shouldShowContinueFooter={this.shouldShowContinueFooter}
+              shouldShowDoneFooter={this.shouldShowDoneFooter}
+            />
+          }
+          handleClose={this.handleCloseSlideBox}
+          show={showSlideBox}
+          size="size-l"
+        />
+      </SlideBoxWrapper>
+    );
+  }
+}
+
+Creatives.propTypes = {
+  getCreativesData: PropTypes.func,
+  messages: PropTypes.object,
+  messageDetails: PropTypes.object,
+  creativesMode: PropTypes.string,
+  location: PropTypes.object,
+  handleCloseCreatives: PropTypes.func,
+  templateData: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  channel: PropTypes.string,
+  templateActions: PropTypes.object,
+  globalActions: PropTypes.object,
+  cap: PropTypes.object,
+  // isLoading: PropTypes.bool,
+  templateUserList: PropTypes.array,
+  isUploading: PropTypes.bool,
+  EmailLayout: PropTypes.string,
+};
+const mapStatesToProps = () => createStructuredSelector({
+  isLoading: isLoadingSelector(),
+  templateUserList: templateUserList(),
+  EmailLayout: selectEmailLayout(),
+  isUploading: uploadSelector(),
+});
+function mapDispatchToProps(dispatch) {
+  return {
+    templateActions: bindActionCreators(templateActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/v2Containers/CreativesContainer/index.scss

@@ -0,0 +1,27 @@
+@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%;
+        }
+    }
+}