@capillarytech/creatives-library 6.1.0 → 6.2.0

package/containers/WeChat/MapTemplates/index.js

@@ -29,6 +29,18 @@ import * as templateActions from '../../Templates/actions';
 // import PageHeader from '../../components/PageHeader';
 import './_mapTemplates.scss';
 // const Option = Select.Option;
+const URL = "URL";
+const MINI_PROGRAM = "Mini-Program";
+const labelStyle = {
+  backgroundColor: 'white',
+  textAlign: 'left',
+  color: '#333333',
+  lineHeight: '24px',
+  fontSize: '14px',
+  fontFamily: 'open-sans',
+  fontStyle: 'normal',
+  padding: '1em .833em',
+};
 
 export class MapTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -59,6 +71,9 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         "is-internal-url": {
           onChange: this.internalUrlChecked,
         },
+        "template-redirect-options-radio": {
+          onChange: this.onRedirectOptionSelection,
+        },
       },
       selectedTemplateTags: [],
       isEdit: false,
@@ -445,6 +460,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       Title: this.state.editTemplateData.versions.base.Title,
       Tag: [],
       url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
+      userName: this.state.formData['template-mini-program-id'] ? this.state.formData['template-mini-program-id'] : '',
+      path: this.state.formData['template-mini-program-page-path'] ? this.state.formData['template-mini-program-page-path'] : '',
       TopColor: "#000000",
       data: {},
       preview: '',
@@ -587,6 +604,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   setSelectedTemplateData(weChatData) {
     let schema = _.cloneDeep(this.state.baseSchema);
+    const { intl: {formatMessage}} = this.props;
     schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
     if (_.isEmpty(weChatData)) {
       // schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
@@ -719,101 +737,59 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields.push(colsData);
     });
 
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields.push(
-      {
-        cols: [
+    schema.standalone.sections[0].childSections[1].childSections[0].childSections.push({
+      type: "multicols",
+        inputFields: [
           {
-            id: "template-label-link",
-            metaType: "label",
-            value: this.props.intl.formatMessage(messages.loadingEDMTemplates),
-            primitive: true,
-            type: "div",
-            width: 4,
-            offset: 0,
-            onlyDisplay: true,
-            colStyle: {
-              flex: 1,
-              textAlign: 'left',
-              color: '#333333',
-              lineHeight: '24px',
-              fontSize: '14px',
-              fontWeight: '400',
-              fontFamily: 'open-sans',
-              fontStyle: 'normal',
-              textTransform: 'capitalize',
-              padding: '.5em .833em',
+          rowClassName: 'redirect-options-row',
+          cols: [
+            {
+              id: "redirect-options-heading",
+              metaType: "label",
+              value: formatMessage(messages.redirectOptionsHeadingValue),
+              primitive: true,
+              dynamicTab: false,
+              type: "div",
+              width: 4,
+              style: {
+                backgroundColor: 'white',
+                textAlign: 'left',
+                color: '#333333',
+                lineHeight: '24px',
+                fontSize: '14px',
+                fontFamily: 'open-sans',
+                fontStyle: 'normal',
+                padding: '1em .833em',
+              },
+              offset: 0,
+              onlyDisplay: true,
+              colStyle: {
+                flex: 1,
+              },
             },
-          },
-          {
-            id: 'template-link',
-            placeholder: this.props.intl.formatMessage(messages.Link),
-            type: "input",  //Resembles component to be used
-            metaType: "text",
-            datatype: "string",
-            errorMessage: this.props.intl.formatMessage(messages.linkCantEmpty),
-            required: true,
-            fluid: true,
-            disabled: (this.props.location.query.type === 'embedded'),
-            style: {
-              fontSize: '14px',
-              fontFamily: 'open-sans',
-              fontStyle: 'normal',
-              // fontWeight: 600,
-              // marginBottom: '16px',
+            {
+              id: 'template-redirect-options-radio',
+              type: "radioGroup",
+              metaType: "text",
+              datatype: "string",
+              options: [formatMessage(messages.redirectOptionURL), formatMessage(messages.redirectOptionMiniProgram)],
+              errorMessage: formatMessage(messages.redirectionOptionError),
+              required: true,
+              fluid: true,
+              disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
+              style: {
+                marginTop: 8,
+              },
+              styling: "semantic",
+              customComponent: false,
+              standalone: true,
+              supportedEvents: [
+                'onChange'
+              ],
             },
-            styling: "semantic",
-            order: 1,
-            width: 15,
-            // offSet: 6,
-            customComponent: false,
-            standalone: true,
-            supportedEvents: [
-              'onChange',
-            ],
-          },
-        ],
-      },
-      {
-        cols: [
-          {
-            id: "is-internal-url",
-            label: this.props.intl.formatMessage(messages.isInternalUrl),
-            standalone: true,
-            labelStyle: {
-              backgroundColor: "white",
-            },
-            colStyle: {
-              marginBottom: '24px',
-            },
-            style: {
-              textAlign: 'left',
-              color: '#262626',
-              fontFamily: 'Open-Sans',
-              lineHeight: '24px',
-              fontSize: '14px',
-              padding: '.5833em .833em',
-              marginBottom: '24px',
-              paddingLeft: '0',
-            },
-            type: "checkbox",
-            disabled: (this.props.location.query.type === 'embedded'),
-            metaType: "text",
-            datatype: "boolean",
-            required: true,
-            fluid: true,
-            styling: "semantic",
-            order: 1,
-            width: 10,
-            offset: 4,
-            onlyDisplay: false,
-            customComponent: false,
-            supportedEvents: [
-              'onChange',
-            ],
-          },
-        ],
-      }
-    );
+          ],
+        },
+      ]});
     if (this.state.isEdit) {
       _.forEach(this.state.editTemplateData.versions.base.Tag, (tag) => {
         let tagName = tag;
@@ -826,11 +802,19 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         formData[`template-${tagName}`] = this.state.editTemplateData.versions.base.data[tag].value;
       });
       if (this.state.editTemplateData.versions.base.url) {
+        formData['template-redirect-options-radio'] = URL;
         formData[`template-link`] = this.state.editTemplateData.versions.base.isInternalUrl ? this.unMaskTemplateUrl(this.state.editTemplateData.versions.base.url) : this.state.editTemplateData.versions.base.url;
+        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getURLSchema());
       }
       if (this.state.editTemplateData.versions.base.isInternalUrl) {
         formData['is-internal-url'] = this.state.editTemplateData.versions.base.isInternalUrl;
       }
+      if (this.state.editTemplateData.versions.base.userName && this.state.editTemplateData.versions.base.path) {
+        formData['template-redirect-options-radio'] = MINI_PROGRAM;
+        formData['template-mini-program-id'] = this.state.editTemplateData.versions.base.userName;
+        formData['template-mini-program-page-path'] = this.state.editTemplateData.versions.base.path;
+        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getMiniProgramSchema());
+      }
       // schema.standalone.sections[0].childSections[1].childSections[1].inputFields[0].cols[0].content = weChatData.content;
     } else {
       // schema.standalone.sections[0].childSections[1].childSections[1].inputFields[0].cols[0].content = weChatData.content;
@@ -1053,6 +1037,195 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   }
 
+  getURLSchema = () => ({
+    type: "multicols",
+    inputFields: [{
+      rowClassName: 'link-row',
+      cols: [
+        {
+          id: "template-label-link",
+          metaType: "label",
+          value: this.props.intl.formatMessage(messages.link),
+          primitive: true,
+          dynamicTab: false,
+          type: "div",
+          width: 4,
+          style: labelStyle,
+          onlyDisplay: true,
+          colStyle: {
+            flex: 1,
+          },
+        },
+        {
+          id: 'template-link',
+          placeholder: this.props.intl.formatMessage(messages.link),
+          type: "input",
+          metaType: "text",
+          datatype: "string",
+          errorMessage: this.props.intl.formatMessage(messages.linkCantEmpty),
+          required: true,
+          fluid: true,
+          disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
+          style: {
+            fontSize: '14px',
+            fontStyle: 'normal',
+          },
+          styling: "semantic",
+          order: 1,
+          width: 15,
+          customComponent: false,
+          standalone: true,
+          supportedEvents: [
+            'onChange',
+          ],
+          size: "large",
+        },
+      ],
+    },
+    {
+      cols: [
+        {
+          id: "is-internal-url",
+          label: this.props.intl.formatMessage(messages.isInternalUrl),
+          standalone: true,
+          labelStyle: {
+            backgroundColor: "white",
+          },
+          colStyle: {
+            marginBottom: '24px',
+          },
+          style: {
+            textAlign: 'left',
+            color: '#262626',
+            fontFamily: 'Open-Sans',
+            lineHeight: '24px',
+            fontSize: '14px',
+            padding: '.5833em .833em',
+            marginBottom: '24px',
+            paddingLeft: '0',
+          },
+          type: "checkbox",
+          disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
+          metaType: "text",
+          datatype: "boolean",
+          required: true,
+          fluid: true,
+          styling: "semantic",
+          order: 1,
+          width: 10,
+          offset: 4,
+          onlyDisplay: false,
+          customComponent: false,
+          supportedEvents: [
+            'onChange',
+          ],
+        },
+      ],
+    }],
+  })
+
+  getMiniProgramSchema = () => ({
+    type: "multicols",
+    inputFields: [{
+      rowClassName: 'mini-program-row',
+      cols: [
+        {
+          id: "template-mini-program-id-heading",
+          metaType: "label",
+          value: this.props.intl.formatMessage(messages.miniWechatIdLabel),
+          primitive: true,
+          dynamicTab: false,
+          type: "div",
+          width: 4,
+          style: labelStyle,
+          onlyDisplay: true,
+          colStyle: {
+            flex: 1,
+          },
+        },
+        {
+          id: 'template-mini-program-id',
+          placeholder: this.props.intl.formatMessage(messages.miniWeChatPlaceholder),
+          inductiveText: this.props.intl.formatMessage(messages.miniWechatIdInductive),
+          type: "input",
+          metaType: "text",
+          datatype: "string",
+          errorMessage: this.props.intl.formatMessage(messages.miniWechatIdError),
+          required: true,
+          fluid: true,
+          disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
+          styling: "semantic",
+          order: 1,
+          width: 15,
+          customComponent: false,
+          standalone: true,
+        },
+      ],
+    },
+    {
+      rowClassName: 'mini-program-row',
+      cols: [
+        {
+          id: "template-mini-program-page-path-heading",
+          metaType: "label",
+          value: this.props.intl.formatMessage(messages.pagePathLabel),
+          primitive: true,
+          dynamicTab: false,
+          type: "div",
+          width: 4,
+          style: labelStyle,
+          onlyDisplay: true,
+          colStyle: {
+            flex: 1,
+          },
+        },
+        {
+          id: 'template-mini-program-page-path',
+          placeholder: this.props.intl.formatMessage(messages.pagePathPlaceholder),
+          inductiveText: this.props.intl.formatMessage(messages.pagePathInductive),
+          type: "input",
+          metaType: "text",
+          datatype: "string",
+          errorMessage: this.props.intl.formatMessage(messages.pagePathError),
+          required: true,
+          fluid: true,
+          disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
+          styling: "semantic",
+          order: 1,
+          width: 15,
+          customComponent: false,
+          standalone: true,
+        }
+      ],
+    }],
+  })
+  
+  deletePreviousRedirectOptionSelection = () => {
+    let schema = _.cloneDeep(this.state.schema);
+    const formChildSections = _.get(schema, 'standalone.sections[0].childSections[1].childSections[0].childSections', []);
+    const lastChildSection = formChildSections[formChildSections.length - 1];
+    const lastInputField = _.get(lastChildSection, 'inputFields[0].rowClassName', '');
+    if(lastInputField === 'mini-program-row' || lastInputField === 'link-row') {
+      schema.standalone.sections[0].childSections[1].childSections[0].childSections.pop();
+    }
+    return schema;
+  }
+
+  onRedirectOptionSelection = (paramOne, formData) => {
+    let schema = this.deletePreviousRedirectOptionSelection();
+    switch (formData['template-redirect-options-radio']) {
+      case URL: {
+        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getURLSchema());
+        break;
+      }
+      case MINI_PROGRAM: {
+        schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(this.getMiniProgramSchema());
+        break;
+      }
+    }
+    this.setState({schema});
+  }
+
   discardValues() {
     // this.setState({ schema: this.state.baseSchema, formData: {}});
     this.resetSchema();
@@ -1092,6 +1265,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       "Title": selectedWechatData.title,
       Tag: [],
       url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
+      userName: this.state.formData['template-mini-program-id'] ? this.state.formData['template-mini-program-id'] : '',
+        path: this.state.formData['template-mini-program-page-path'] ? this.state.formData['template-mini-program-page-path'] : '',
       TopColor: "#000000",
       data: {},
       preview: '',

package/containers/WeChat/MapTemplates/messages.js

@@ -106,4 +106,52 @@ export default defineMessages({
     id: 'creatives.containers.WeChat.loadingEDMTemplates',
     defaultMessage: "loading EDM Templates",
   },
+  "redirectOptionsHeadingValue": {
+    id: 'creatives.containers.WeChat.redirectOptionsHeadingValue',
+    defaultMessage: 'URL or Mini-Program',
+  },
+  "redirectOptionURL": {
+    id: 'creatives.containers.WeChat.redirectOptionURL',
+    defaultMessage: 'URL',
+  },
+  "redirectOptionMiniProgram": {
+    id: 'creatives.containers.WeChat.redirectOptionMiniProgram',
+    defaultMessage: 'Mini-Program',
+  },
+  "redirectionOptionError": {
+    id: 'creatives.containers.WeChat.redirectionOptionError',
+    defaultMessage: 'Please select a redirect option',
+  },
+  "miniWechatIdLabel": {
+    id: 'creatives.containers.WeChat.miniWechatIdLabel',
+    defaultMessage: 'Mini-Program ID',
+  },
+  "miniWeChatPlaceholder": {
+    id: 'creatives.containers.WeChat.miniWeChatPlaceholder',
+    defaultMessage: 'E.g. ab4892njkl4l2op',
+  },
+  "miniWechatIdInductive": {
+    id: 'creatives.containers.WeChat.miniWechatIdInductive',
+    defaultMessage: 'Unique alpha numeric code for this specific app',
+  },
+  "miniWechatIdError": {
+    id: 'creatives.containers.WeChat.miniWechatIdError',
+    defaultMessage: 'Mini-Program ID cannot be empty',
+  },
+  "pagePathLabel": {
+    id: 'creatives.containers.WeChat.pagePathLabel',
+    defaultMessage: 'Page path',
+  },
+  "pagePathError": {
+    id: 'creatives.containers.WeChat.pagePathError',
+    defaultMessage: 'Page path cannot be empty.',
+  },
+  "pagePathPlaceholder": {
+    id: 'creatives.containers.WeChat.pagePathPlaceholder',
+    defaultMessage: 'E.g. pages/user/profile',
+  },
+  "pagePathInductive": {
+    id: 'creatives.containers.WeChat.pagePathInductive',
+    defaultMessage: 'Provide the path within the Mini-Program user will taken to',
+  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CallTaskPreview/_callTaskPreview.scss

@@ -1,12 +1,12 @@
 .call-task-preview {
-  .call-task-subject-container {
+  .call-task-subject-container-CALL {
     padding: 8px;
     background: #444;
     color: white;
     font-size: 12px;
     font-weight: 500;
   }
-  .call-task-message-container {
+  .call-task-message-container-CALL {
     overflow-y: auto;
     height: 150px;
     width: 100%;
@@ -14,4 +14,19 @@
     background: #eee;
     padding: 8px;
   }
+  .call-task-image-CALL {
+    width: 100%;
+  }
+  .call-task-image-STOREMAX_WHATSAPP {
+    width: 220px;
+    margin-left: 92px;
+  }
+  .call-task-message-container-STOREMAX_WHATSAPP {
+    position: absolute;
+    overflow-y: auto;
+    left: 118px;
+    top: 190px;
+    font-size: 12px;
+    width: 172px;
+  }
 }

package/v2Components/CallTaskPreview/index.js

@@ -8,22 +8,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPng from './images/Header.png';
 import FooterPng from './images/Footer.png';
+import WhatsAppPng from './images/Whatsapp.png';
 
 import './_callTaskPreview.scss';
 
+const STOREMAX_WHATSAPP = 'STOREMAX_WHATSAPP';
 class CallTaskPreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
-    const { subject, messageBody } = this.props;
+    const { subject, messageBody, callTaskActionType } = this.props;
     return (
       <div className="call-task-preview">
-        <img style={{ width: '100%' }} src={HeaderPng} alt="header" />
-        <div className="call-task-subject-container">
+        <img className={`call-task-image-${callTaskActionType}`} src={callTaskActionType === STOREMAX_WHATSAPP ? WhatsAppPng : HeaderPng} alt="header" />
+        {callTaskActionType !== STOREMAX_WHATSAPP && <div className={`call-task-subject-container-${callTaskActionType}`}>
           {subject}
-        </div>
-        <div className="call-task-message-container">
+        </div>}
+        <div className={`call-task-message-container-${callTaskActionType}`}>
           {messageBody}
         </div>
-        <img style={{ width: '100%' }} src={FooterPng} alt="footer" />
+        {callTaskActionType !== STOREMAX_WHATSAPP && <img style={{ width: '100%' }} src={FooterPng} alt="footer" />}
       </div>
     );
   }
@@ -32,6 +34,7 @@ class CallTaskPreview extends React.Component { // eslint-disable-line react/pre
 CallTaskPreview.propTypes = {
   subject: PropTypes.string,
   messageBody: PropTypes.string,
+  callTaskActionType: PropTypes.string,
 };
 
 export default CallTaskPreview;

package/v2Components/NewCallTask/index.js

@@ -25,12 +25,13 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
   }
 
   getInitialState = () => {
-    const { templateData } = this.props;
+    const { templateData, messageDetails, mode } = this.props;
+    const actionType = mode === 'edit' ? messageDetails.messageContent.message_content_id_1.callTaskActionType : CALL;
     return {
       subject: templateData && templateData.subject ? templateData.subject : '',
       messageBody: templateData && templateData.messageBody ? templateData.messageBody : '',
       description: templateData && templateData.description ? templateData.description : '',
-      callTaskActionType: CALL,
+      callTaskActionType: actionType,
     };
   }
 
@@ -99,7 +100,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
   render() {
     const { intl, isLoading, metaEntities, selectedOfferDetails } = this.props;
     const { formatMessage } = intl;
-    const { subject, messageBody, description } = this.state;
+    const { subject, messageBody, description, callTaskActionType } = this.state;
     const tags = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
     return (
       <CapSpin spinning={isLoading}>
@@ -139,7 +140,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
                 />
               <CapCheckbox
                 onChange={this.onS2DCheckChange}
-                checked={this.state.callTaskActionType !== CALL}
+                checked={callTaskActionType === STOREMAX_WHATSAPP}
                 style={{marginTop: FONT_SIZE_S}}
               >
                 <FormattedMessage {...messages.useInS2D}/>
@@ -156,6 +157,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
             <CallTaskPreview
               subject={subject}
               messageBody={messageBody}
+              callTaskActionType={callTaskActionType}
             />
           </CapColumn>
         </CapRow>
@@ -171,6 +173,8 @@ NewCallTask.propTypes = {
   isLoading: PropTypes.bool,
   metaEntities: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
+  messageDetails: PropTypes.object,
+  mode: PropTypes.string,
 };
 
 export default injectIntl(NewCallTask);

package/v2Containers/CallTask/index.js

@@ -71,7 +71,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
     };
   }
   render() {
-    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, selectedOfferDetails } = this.props;
+    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, selectedOfferDetails, messageDetails } = this.props;
     const { formatMessage } = intl;
     const { mode } = this.state;
     return (
@@ -84,6 +84,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
             templateData={templateData}
             onCallTaskSubmit={onCallTaskSubmit}
             selectedOfferDetails={selectedOfferDetails}
+            messageDetails={messageDetails}
           />
           :
             <div>
@@ -135,6 +136,7 @@ CallTask.propTypes = {
   onCreateNew: PropTypes.func,
   isFullMode: PropTypes.bool,
   selectedOfferDetails: PropTypes.array,
+  messageDetails: PropTypes.object,
 };
 
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -276,6 +276,7 @@ function SlideBoxContent(props) {
             onCallTaskSubmit={onCallTaskSubmit}
             forwardedTags={forwardedTags}
             selectedOfferDetails={selectedOfferDetails}
+            messageDetails={messageDetails}
           />
       }
       {
@@ -285,6 +286,7 @@ function SlideBoxContent(props) {
            onCallTaskSubmit={onCallTaskSubmit}
            forwardedTags={forwardedTags}
            selectedOfferDetails={selectedOfferDetails}
+           messageDetails={messageDetails}
         />
        }
       {isCreateSms && (