@capillarytech/creatives-library 6.0.4 → 6.1.0

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -583,7 +583,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'WECHAT') {
       
       _.forEach(this.state.formData, (val, index) => {
-        
+
         if (index.indexOf('template') > -1 && this.state.formData[index] !== undefined) {
           const content = this.state.formData[index];
           if (content.trim() === '') {
@@ -2519,6 +2519,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           );
         }
           break;
+        case "label": {
+          columns.push(
+            <CapHeading
+              type={val.headingType || "h4"}
+              style={val.style || {}}
+          >
+              {val.value}
+            </CapHeading>
+          );
+          break;
+        }
         default:
           break;
       }
@@ -2878,7 +2889,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <div className={`image-container ${props.ifError ? 'error' : ''}`}>
 
                   {isImage ?
-                    <CapImage src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>                    
+                    <CapImage src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>
                      :
                     <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{props.placeholder}</span></div>
                   }

package/v2Components/NewCallTask/index.js

@@ -6,13 +6,18 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CapRow, CapColumn, CapInput, CapButton, CapSpin } from '@capillarytech/cap-ui-library';
-import { injectIntl, intlShape } from 'react-intl';
+import { CapRow, CapColumn, CapInput, CapButton, CapSpin, CapCheckbox } from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import {
+  FONT_SIZE_S,
+} from '@capillarytech/cap-ui-library/styled/variables';
 import TagList from '../../v2Containers/TagList';
 import CallTaskPreview from '../CallTaskPreview';
 import messages from './messages';
 import './_newCallTask.scss';
 
+const CALL = 'CALL';
+const STOREMAX_WHATSAPP = 'STOREMAX_WHATSAPP';
 class NewCallTask extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -25,6 +30,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
       subject: templateData && templateData.subject ? templateData.subject : '',
       messageBody: templateData && templateData.messageBody ? templateData.messageBody : '',
       description: templateData && templateData.description ? templateData.description : '',
+      callTaskActionType: CALL,
     };
   }
 
@@ -82,6 +88,14 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
     this.props.onCallTaskSubmit(this.state);
   }
 
+  onS2DCheckChange = (e) => {
+    if (e.target.checked) {
+      this.setState({callTaskActionType: STOREMAX_WHATSAPP});
+    } else {
+      this.setState({callTaskActionType: CALL});
+    }
+  };
+
   render() {
     const { intl, isLoading, metaEntities, selectedOfferDetails } = this.props;
     const { formatMessage } = intl;
@@ -123,6 +137,13 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
                 value={description}
                 isRequired
                 />
+              <CapCheckbox
+                onChange={this.onS2DCheckChange}
+                checked={this.state.callTaskActionType !== CALL}
+                style={{marginTop: FONT_SIZE_S}}
+              >
+                <FormattedMessage {...messages.useInS2D}/>
+              </CapCheckbox>
             </div>
             <CapButton
               disabled={!subject || !messageBody || !description}

package/v2Components/NewCallTask/messages.js

@@ -26,4 +26,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.NewCallTask.personalisationTags',
     defaultMessage: 'Add Labels',
   },
+  useInS2D: {
+    id: 'creatives.componentsV2.NewCallTask.useInS2D',
+    defaultMessage: 'Use in Store2Door',
+  },
 });

package/v2Containers/WeChat/MapTemplates/_mapTemplates.scss

@@ -1,3 +1,4 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 .wechat-container {
   #wechat-template {
     width: 100%;
@@ -21,4 +22,10 @@
   .link-row{
     margin-top: 16px;
   }
+  .mini-program-row {
+    margin-top: $CAP_SPACE_12;
+    .component-with-label-label {
+      font-size: $FONT_SIZE_M;
+    }
+  }
 }

package/v2Containers/WeChat/MapTemplates/index.js

@@ -34,6 +34,8 @@ import { TRACK_CREATE_WECHAT, TRACK_EDIT_WECHAT } from '../../App/constants';
 
 const SELECT_TEMPLATE_MODE = "selectTemplate";
 const MAP_TEMPLATE_MODE = "mapTemplateMode";
+const URL = "URL";
+const MINI_PROGRAM = "Mini-Program";
 const { CapCustomCardList } = CapCustomCard;
 
 export class MapTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -66,6 +68,10 @@ 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,
@@ -438,6 +444,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       Title: 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: {},
       BrandId: (selectedWeChatAccount.configs.brand_id ? selectedWeChatAccount.configs.brand_id : ''),
@@ -517,6 +525,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
   }
   
   setSelectedTemplateData(weChatData) {
+    const { intl } = this.props;
     let schema = cloneDeep(this.state.baseSchema);
     // schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
     if (isEmpty(weChatData)) {
@@ -616,82 +625,61 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       
       schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(...colsData);
     });
-    
-    schema.standalone.sections[0].childSections[1].childSections[0].childSections.push(
-      {
-        type: "multicols",
-        inputFields: [{
-          rowClassName: 'link-row',
+
+    schema.standalone.sections[0].childSections[1].childSections[0].childSections.push({
+      type: "col-label",
+      inputFields: [{
+        id: 'redirect-options-heading',
+        type: "label",
+        metaType: "text",
+        datatype: "string",
+        value: intl.formatMessage(messages.redirectOptionsHeadingValue),
+        required: true,
+        fluid: true,
+        headingType: "h4",
+        disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
+        styling: "semantic",
+        style: {
+          marginTop: 24
+        },
+        order: 1,
+        width: 23,
+        customComponent: false,
+        standalone: true,
+      },
+    ]},{
+      type: "multicols",
+        inputFields: [
+          {
+          rowClassName: 'redirect-options-row',
           cols: [
             {
-              id: 'template-link',
-              placeholder: 'Link',
-              label: 'Link',
-              type: "input",  //Resembles component to be used
+              id: 'template-redirect-options-radio',
+              type: "radioGroup",
               metaType: "text",
               datatype: "string",
-              errorMessage: 'Link cannot be empty.',
+              options: [intl.formatMessage(messages.redirectOptionURL), intl.formatMessage(messages.redirectOptionMiniProgram)],
+              errorMessage: intl.formatMessage(messages.redirectionOptionError),
               required: true,
               fluid: true,
               disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
               style: {
-                fontSize: '14px',
-                fontStyle: 'normal',
+                marginTop: 8,
+                display: 'grid',
               },
               styling: "semantic",
               order: 1,
               width: 23,
-              // offSet: 6,
               customComponent: false,
               standalone: true,
               supportedEvents: [
-                'onChange',
+                'onChange'
               ],
-              size: "large",
             },
           ],
         },
-        {
-          cols: [
-            {
-              id: "is-internal-url",
-              label: 'Is this internal url',
-              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,
-              onlyDisplay: false,
-              customComponent: false,
-              supportedEvents: [
-                'onChange',
-              ],
-            },
-          ],
-        }],
-      }
-      );
+      ]});
+    
       if (this.state.isEdit) {
         forEach(this.state.editTemplateData.versions.base.Tag, (tag) => {
           let tagName = tag;
@@ -704,11 +692,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;
@@ -939,6 +935,155 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     internalUrlChecked() {
       
     }
+
+    getURLSchema = () => ({
+      type: "multicols",
+      inputFields: [{
+        rowClassName: 'link-row',
+        cols: [
+          {
+            id: 'template-link',
+            placeholder: this.props.intl.formatMessage(messages.templateLinkLabel),
+            label: this.props.intl.formatMessage(messages.templateLinkLabel),
+            type: "input",
+            metaType: "text",
+            datatype: "string",
+            errorMessage: this.props.intl.formatMessage(messages.templateLinkError),
+            required: true,
+            fluid: true,
+            disabled: (this.props.location.query.type === 'embedded' && this.state.isEdit),
+            style: {
+              fontSize: '14px',
+              fontStyle: 'normal',
+            },
+            styling: "semantic",
+            order: 1,
+            width: 23,
+            customComponent: false,
+            standalone: true,
+            supportedEvents: [
+              'onChange',
+            ],
+            size: "large",
+          },
+        ],
+      },
+      {
+        cols: [
+          {
+            id: "is-internal-url",
+            label: this.props.intl.formatMessage(messages.internalUrlLabel),
+            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,
+            onlyDisplay: false,
+            customComponent: false,
+            supportedEvents: [
+              'onChange',
+            ],
+          },
+        ],
+      }],
+    })
+
+    getMiniProgramSchema = () => ({
+      type: "multicols",
+      inputFields: [{
+        rowClassName: 'mini-program-row',
+        cols: [
+          {
+            id: 'template-mini-program-id',
+            placeholder: this.props.intl.formatMessage(messages.miniWeChatPlaceholder),
+            inductiveText: this.props.intl.formatMessage(messages.miniWechatIdInductive),
+            label:  this.props.intl.formatMessage(messages.miniWechatIdLabel),
+            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: 23,
+            customComponent: false,
+            standalone: true,
+          },
+        ],
+      },
+      {
+        rowClassName: 'mini-program-row',
+        cols: [
+          {
+            id: 'template-mini-program-page-path',
+            placeholder: this.props.intl.formatMessage(messages.pagePathPlaceholder),
+            inductiveText: this.props.intl.formatMessage(messages.pagePathInductive),
+            label: this.props.intl.formatMessage(messages.pagePathLabel),
+            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: 23,
+            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: {}});
@@ -980,6 +1125,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         "template_id": selectedWechatData.template_id,
         "Title": selectedWechatData.title,
         Tag: [],
+        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'] : '',
         url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
         TopColor: "#000000",
         data: {},

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -106,4 +106,64 @@ export default defineMessages({
     id: 'creatives.containersV2.WeChat.templateName',
     defaultMessage: 'Template Name',
   },
+  "redirectionOptionError": {
+    id: 'creatives.containersV2.WeChat.redirectionOptionError',
+    defaultMessage: 'Please select a redirect option',
+  },
+  "miniWechatIdInductive": {
+    id: 'creatives.containersV2.WeChat.miniWechatIdInductive',
+    defaultMessage: 'Unique alpha numeric code for this specific app',
+  },
+  "miniWechatIdLabel": {
+    id: 'creatives.containersV2.WeChat.miniWechatIdLabel',
+    defaultMessage: 'Mini-Program ID',
+  },
+  "miniWechatIdError": {
+    id: 'creatives.containersV2.WeChat.miniWechatIdError',
+    defaultMessage: 'Mini-Program ID cannot be empty',
+  },
+  "miniWeChatPlaceholder": {
+    id: 'creatives.containersV2.WeChat.miniWeChatPlaceholder',
+    defaultMessage: 'E.g. ab4892njkl4l2op',
+  },
+  "templateLinkLabel": {
+    id: 'creatives.containersV2.WeChat.templateLinkLabel',
+    defaultMessage: 'Link',
+  },
+  "templateLinkError": {
+    id: 'creatives.containersV2.WeChat.templateLinkError',
+    defaultMessage: 'Link cannot be empty.',
+  },
+  "internalUrlLabel": {
+    id: 'creatives.containersV2.WeChat.internalUrlLabel',
+    defaultMessage: 'Is this internal url',
+  },
+  "pagePathPlaceholder": {
+    id: 'creatives.containersV2.WeChat.pagePathPlaceholder',
+    defaultMessage: 'E.g. pages/user/profile',
+  },
+  "pagePathInductive": {
+    id: 'creatives.containersV2.WeChat.pagePathInductive',
+    defaultMessage: 'Provide the path within the Mini-Program user will taken to',
+  },
+  "pagePathLabel": {
+    id: 'creatives.containersV2.WeChat.pagePathLabel',
+    defaultMessage: 'Page path',
+  },
+  "pagePathError": {
+    id: 'creatives.containersV2.WeChat.pagePathError',
+    defaultMessage: 'Page path cannot be empty.',
+  },
+  "redirectOptionsHeadingValue": {
+    id: 'creatives.containersV2.WeChat.redirectOptionsHeadingValue',
+    defaultMessage: 'URL or Mini-Program',
+  },
+  "redirectOptionURL": {
+    id: 'creatives.containersV2.WeChat.redirectOptionURL',
+    defaultMessage: 'URL',
+  },
+  "redirectOptionMiniProgram": {
+    id: 'creatives.containersV2.WeChat.redirectOptionMiniProgram',
+    defaultMessage: 'Mini-Program',
+  },
 });