@capillarytech/creatives-library 2.0.25 → 2.0.27

package/components/CmsTemplatesComponent/index.js

@@ -0,0 +1,33 @@
+/**
+*
+* CmsTemplatesComponent
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import {CapButton, CapCustomCard} from '@capillarytech/cap-ui-library';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+const {CapCustomCardList} = CapCustomCard;
+function CmsTemplatesComponent(props) {
+  const cardDataList = props.cmsTemplates.map((template) => (
+    {
+      title: template.name,
+      content: template.versions.base.preview_http_url,
+      hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
+    }));
+  return (<div>
+    <div className="pagination-container">
+      <CapCustomCardList cardList={cardDataList} type="SMS" />
+    </div>
+  </div>);
+}
+
+CmsTemplatesComponent.propTypes = {
+  cmsTemplates: PropTypes.array,
+  handleEdmDefaultTemplateSelection: PropTypes.func,
+};
+
+export default CmsTemplatesComponent;

package/components/CmsTemplatesComponent/messages.js

@@ -0,0 +1,17 @@
+/*
+ * CmsTemplatesComponent Messages
+ *
+ * This contains all the text for the CmsTemplatesComponent component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.CmsTemplatesComponent.header',
+    defaultMessage: 'This is the CmsTemplatesComponent component !',
+  },
+  select: {
+    id: 'app.components.CmsTemplatesComponent.select',
+    defaultMessage: 'Select',
+  },
+});

package/components/CmsTemplatesComponent/tests/index.test.js

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

package/containers/CreativesContainer/SlideBoxContent.js

@@ -6,6 +6,7 @@ import TemplatePreview from '../../components/TemplatePreview';
 import SmsCreate from '../Sms/Create';
 import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
+import EmailWrapper from '../EmailWrapper';
 import EmailPreviewV2 from '../../components/EmailPreviewV2';
 import * as constants from './constants';
 const CreativesWrapper = styled.div`
@@ -28,6 +29,9 @@ function SlideBoxContent(props) {
       onCreateNew,
       currentChannel,
       onChannelChange,
+      onEmailModeChange,
+      emailCreateMode,
+      emailStep,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: 'embedded', module: 'library' };
@@ -36,18 +40,17 @@ function SlideBoxContent(props) {
     query,
     search: '',
   };
+  let channel = currentChannel;//for create mode
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
   let isPreview = false;
   let isEmailPreview = false;
-  //let isEmailCreate = false;
-  let channel = currentChannel;//for create mode
+  const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
-    //isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isPreview = slidBoxContent === 'preview' && channel !== constants.EMAIL;
@@ -100,6 +103,18 @@ function SlideBoxContent(props) {
         getDefaultTags={type}
           />
         )}
+      {isEmailCreate && (
+      <EmailWrapper
+        onEmailModeChange={onEmailModeChange}
+        emailCreateMode={emailCreateMode}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        templateData={templateData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={type}
+        step={emailStep}
+      />
+        )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
       <Email
         location={{

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -2,18 +2,23 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { CapButton } from '@capillarytech/cap-ui-library';
 import PropTypes from 'prop-types';
-
-function SlideBoxHeader(props) {
-  const { slidBoxContent, onSave, messages, onEditTemplate } = props;
-
+import * as constants from './constants';
+function SlideBoxFooter(props) {
+  const { slidBoxContent, onSave, messages, onEditTemplate, currentChannel, onEmailNextStep } = props;
+  const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL;
+  const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
   return (
     <div>
-      {(slidBoxContent === 'editTemplate' ||
-          slidBoxContent === 'createTemplate') && (
-          <CapButton onClick={onSave}>
-            <FormattedMessage {...messages.creativesTemplatesSave} />
-          </CapButton>
+      {(isCreate) && (
+      <CapButton onClick={onSave}>
+        <FormattedMessage {...messages.creativesTemplatesSave} />
+      </CapButton>
         )}
+      {slidBoxContent &&
+        <CapButton onClick={onEmailNextStep}>
+          <FormattedMessage {...messages.continue} />
+        </CapButton>
+        }
       {slidBoxContent === 'preview' && (
         <CapButton onClick={onEditTemplate} type="secondary">
           <FormattedMessage {...messages.creativesTemplatesEdit} />
@@ -22,10 +27,12 @@ function SlideBoxHeader(props) {
     </div>
   );
 }
-SlideBoxHeader.propTypes = {
+SlideBoxFooter.propTypes = {
   slidBoxContent: PropTypes.node,
   onSave: PropTypes.func,
   messages: PropTypes.object,
   onEditTemplate: PropTypes.func,
+  currentChannel: PropTypes.string,
+  onEmailNextStep: PropTypes.func,
 };
-export default SlideBoxHeader;
+export default SlideBoxFooter;

package/containers/CreativesContainer/index.js

@@ -21,6 +21,7 @@ class Creatives extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      emailStep: 'modeSelection', //modeSelection: for 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),
@@ -112,6 +113,12 @@ class Creatives extends React.Component {
     }
     return creativesMode;
   }
+  onEmailModeChange = (mode) => {
+    this.setState({ emailCreateMode: mode});
+  }
+  onEmailNextStep = (step) => {
+    this.setState({emailStep: step });
+  }
   getFormData = (template) => {
     if (template.validity) {
       this.setState(
@@ -119,7 +126,8 @@ class Creatives extends React.Component {
           isGetFormData: false,
         },
         () => {
-          const channel = this.state.templateData.type;
+          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
         },
@@ -135,8 +143,9 @@ class Creatives extends React.Component {
   saveMessage = () => {
     this.setState({ isGetFormData: true });
   };
+
   render() {
-    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel} = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, emailStep} = this.state;
     const {isFullMode} = this.props;
     return (
       <div className={classnames(`${classPrefix}`)}>
@@ -165,6 +174,9 @@ class Creatives extends React.Component {
               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
+              emailStep={emailStep}
             />
           }
           footer={
@@ -173,6 +185,8 @@ class Creatives extends React.Component {
               onSave={this.saveMessage}
               onEditTemplate={this.onEditTemplate}
               slidBoxContent={slidBoxContent}
+              onEmailNextStep={this.onEmailNextStep}
+              currentChannel={currentChannel.toUpperCase()}
             />
           }
           handleClose={this.toggleShowSlideBox}

package/containers/CreativesContainer/messages.js

@@ -0,0 +1,17 @@
+/*
+ * EmailWrapper Messages
+ *
+ * This contains all the text for the EmailWrapper component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.containers.EmailWrapper.header',
+    defaultMessage: 'This is EmailWrapper container !',
+  },
+  continue: {
+    id: 'app.containers.EmailWrapper.continue',
+    defaultMessage: 'Continue',
+  },
+});