@capillarytech/creatives-library 2.0.62 → 2.0.63

package/components/TemplatePreview/index.js

@@ -155,7 +155,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
             : ''
         }
-        {this.props.templateData &&
+        {this.props.templateData && this.props.templateData.updatedByName &&
           [<p className="preview-info" key="preview-info-modified"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
             <p style={{marginBottom: '8px'}} className="preview-info" key="preview-info-updated"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
           ]

package/containers/CreativesContainer/SlideBoxContent.js

@@ -7,6 +7,7 @@ import SmsCreate from '../Sms/Create';
 import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
+import MobilepusWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../components/EmailPreviewV2';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
@@ -33,8 +34,10 @@ function SlideBoxContent(props) {
       onChannelChange,
       onEmailModeChange,
       emailCreateMode,
+      onMobilepushModeChange,
+      mobilePushCreateMode,
       templateStep,
-      onEmailNextStep,
+      onCreateNextStep,
       cap,
       onResetStep,
       isFullMode,
@@ -152,7 +155,7 @@ function SlideBoxContent(props) {
         templateData={templateData}
         type={type}
         step={templateStep}
-        showNextStep={onEmailNextStep}
+        showNextStep={onCreateNextStep}
         isFullMode={isFullMode}
         cap={cap}
         onResetStep={onResetStep}
@@ -181,7 +184,7 @@ function SlideBoxContent(props) {
           getFormLibraryData={getFormData}
           setIsLoadingContent={setIsLoadingContent}
           location={{
-            pathname: `/mobilepush`,
+            pathname: `/mobilepush/edit/`,
             query,
           }}
           isFullMode={false}
@@ -190,6 +193,24 @@ function SlideBoxContent(props) {
           templateData={templateData}
         />
         }
+      {isCreateMPush &&
+      <MobilepusWrapper
+        key="creatives-mobilepush-wrapper"
+        date={new Date().getMilliseconds()}
+        setIsLoadingContent={setIsLoadingContent}
+        onMobilepushModeChange={onMobilepushModeChange}
+        mobilePushCreateMode={mobilePushCreateMode}
+        isGetFormData={isGetFormData}
+        getFormData={getFormData}
+        templateData={templateData}
+        type={type}
+        step={templateStep}
+        showNextStep={onCreateNextStep}
+        isFullMode={isFullMode}
+        cap={cap}
+        onResetStep={onResetStep}
+        query={query}/>
+        }
     </CreativesWrapper>
   );
 }
@@ -208,11 +229,13 @@ SlideBoxContent.propTypes = {
   onEmailModeChange: PropTypes.func,
   emailCreateMode: PropTypes.string,
   templateStep: PropTypes.string,
-  onEmailNextStep: PropTypes.func,
+  onCreateNextStep: PropTypes.func,
   cap: PropTypes.object,
   onResetStep: PropTypes.func,
   onCallTaskSubmit: PropTypes.func,
   isFullMode: PropTypes.bool,
   setIsLoadingContent: PropTypes.func,
+  onMobilepushModeChange: PropTypes.func,
+  mobilePushCreateMode: PropTypes.string,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { CapButton } from '@capillarytech/cap-ui-library';
 import PropTypes from 'prop-types';
 function SlideBoxFooter(props) {
-  const { slidBoxContent, onSave, messages, onEditTemplate, onEmailNextStep} = props;
+  const { slidBoxContent, onSave, messages, onEditTemplate, onCreateNextStep} = props;
   return (
     <div>
       <div>
@@ -13,7 +13,7 @@ function SlideBoxFooter(props) {
         </CapButton>
           )}
         {props.shouldShowContinueFooter() &&
-          <CapButton onClick={onEmailNextStep}>
+          <CapButton onClick={onCreateNextStep}>
             <FormattedMessage {...messages.continue} />
           </CapButton>
           }
@@ -31,7 +31,7 @@ SlideBoxFooter.propTypes = {
   onSave: PropTypes.func,
   messages: PropTypes.object,
   onEditTemplate: PropTypes.func,
-  onEmailNextStep: PropTypes.func,
+  onCreateNextStep: PropTypes.func,
   shouldShowContinueFooter: PropTypes.func,
   shouldShowDoneFooter: PropTypes.func,
 };

package/containers/CreativesContainer/index.js

@@ -5,7 +5,7 @@ import {
 } from '@capillarytech/cap-ui-library';
 import { injectIntl } from 'react-intl';
 import classnames from 'classnames';
-import {isEmpty, get} from 'lodash';
+import {isEmpty, get, forEach} from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
@@ -71,11 +71,11 @@ class Creatives extends React.Component {
   onChannelChange = (channel) => {
     this.setState({currentChannel: channel});
   }
-  onEmailNextStep = () => {
+  onCreateNextStep = () => {
     this.setState((prevState) => {
       let templateStep = prevState.templateStep + 1;
       const {emailCreateMode, currentChannel} = prevState;
-      if (currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") {
+      if ((currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") || currentChannel.toUpperCase() === constants.MOBILE_PUSH) {
         templateStep = prevState.templateStep + 2;
       }
 
@@ -88,7 +88,9 @@ class Creatives extends React.Component {
   onEmailModeChange = (mode) => {
     this.setState({ emailCreateMode: mode});
   }
-
+  onMobilepushModeChange = (mode) => {
+    this.setState({ mobilePushCreateMode: mode});
+  }
 
   onCallTaskSubmit = (data) => {
     this.props.getCreativesData({
@@ -118,10 +120,11 @@ class Creatives extends React.Component {
         const formData = {
           subject: templateData.emailSubject,
           html_content: templateData.emailBody,
-          is_drag_drop: false,
-          lang_id: 411,
-          iso_code: "en",
-          language: "English",
+          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,
@@ -136,6 +139,19 @@ class Creatives extends React.Component {
           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;
     }
@@ -143,12 +159,14 @@ class Creatives extends React.Component {
   }
 
   getCreativesData = (channel, template) => { //from creatives to consumers
-    const templateData = {channel };
+    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) {
-      templateData.emailBody = template.value.base.html_content;
-      templateData.emailSubject = template.value.base.subject;
+      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');
@@ -157,6 +175,11 @@ class Creatives extends React.Component {
         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';
@@ -166,6 +189,11 @@ class Creatives extends React.Component {
         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';
@@ -229,15 +257,19 @@ class Creatives extends React.Component {
   };
   shouldShowFooter = () => {
     const {isFullMode } = this.props;
-    const {slidBoxContent, currentChannel, emailCreateMode, templateStep} = this.state;
+    const {slidBoxContent, currentChannel, emailCreateMode, templateStep, mobilePushCreateMode} = this.state;
     const channel = currentChannel.toUpperCase();
     const currentStep = this.creativesTemplateSteps[templateStep];
     let showFooter = false;
+    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;
@@ -257,23 +289,36 @@ class Creatives extends React.Component {
   shouldShowDoneFooter = () => {
     const {slidBoxContent, templateStep, currentChannel} = this.state;
     const currentStep = this.creativesTemplateSteps[templateStep];
-    const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL && currentStep !== 'createTemplateContent';
-    const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-    return isCreate;
+    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;
   }
   shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel
-    const {slidBoxContent, templateStep, currentChannel, emailCreateMode} = this.state;
+    const {slidBoxContent, templateStep, currentChannel, emailCreateMode, mobilePushCreateMode} = this.state;
     let isShowContinueFooter = false;
-    if ((emailCreateMode === "upload" && !isEmpty(this.props.EmailLayout)) || emailCreateMode === "editor") {
-      const currentStep = this.creativesTemplateSteps[templateStep];
-      let isEmailCreate = slidBoxContent === 'createTemplate';
-      isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
-      isShowContinueFooter = isEmailCreate && emailCreateMode;
+    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 {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent} = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode} = this.state;
     const {isFullMode, creativesMode, cap, isUploading} = this.props;
     return (
       <div className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
@@ -308,10 +353,12 @@ class Creatives extends React.Component {
               onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
               emailCreateMode={emailCreateMode}// upload zip || use editor are values
               templateStep={this.creativesTemplateSteps[templateStep]}
-              onEmailNextStep={this.onEmailNextStep}
+              onCreateNextStep={this.onCreateNextStep}
               onResetStep={this.resetStep}
               cap={cap}
               setIsLoadingContent={this.setIsLoadingContent}
+              onMobilepushModeChange={this.onMobilepushModeChange}
+              mobilePushCreateMode={mobilePushCreateMode}
             />
           }
           footer={this.shouldShowFooter() &&
@@ -320,7 +367,7 @@ class Creatives extends React.Component {
               onSave={this.saveMessage}
               onEditTemplate={this.onEditTemplate}
               slidBoxContent={slidBoxContent}
-              onEmailNextStep={this.onEmailNextStep}
+              onCreateNextStep={this.onCreateNextStep}
               currentChannel={currentChannel.toUpperCase()}
               templateStep={this.creativesTemplateSteps[templateStep]}
               emailCreateMode={emailCreateMode}

package/containers/MobilePush/Create/_mobilePushCreate.scss

@@ -19,3 +19,16 @@
   padding: 16px 16px 16px 0;
   border: solid 1px #D6D6D6;
 }
+ 
+.ant-tabs-tab {
+  .form-tab-header{
+    .unsupported-channel {
+      .ant-tabs-nav & {
+        display: none;
+    
+      }
+    }  
+  }
+}
+
+

package/containers/MobilePush/Create/actions.js

@@ -44,3 +44,9 @@ export function clearAsset() {
     type: types.CLEAR_ASSET,
   };
 }
+
+export function resetStore() {
+  return {
+    type: types.RESET_STORE,
+  };
+}

package/containers/MobilePush/Create/constants.js

@@ -21,3 +21,4 @@ export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/containers/PushMessage/Create/
 export const GET_IOS_CTAS = 'app/containers/PushMessage/Create/GET_IOS_CTAS';
 export const GET_IOS_CTAS_SUCCESS = 'app/containers/PushMessage/Create/GET_IOS_CTAS_SUCCESS';
 export const GET_IOS_CTAS_FAILURE = 'app/containers/PushMessage/Create/GET_IOS_CTAS_FAILURE';
+export const RESET_STORE = 'app/containers/PushMessage/Create/RESET_STORE';