@capillarytech/creatives-library 2.0.71 → 2.0.73

package/components/CapTagList/index.js

@@ -65,13 +65,11 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     return list;
   }
 
-  handleOnChange = (data, e) => {
-    console.log('module data', data, e);
+  handleOnChange = (data) => {
     this.props.onContextChange(data);
   };
 
-  handleDynamicDateChange = (data, e) => {
-    console.log('data.target', data.target.value, e);
+  handleDynamicDateChange = (data) => {
     this.setState({dynamicDateValue: data.target.value});
   };
 
@@ -126,7 +124,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({expandedKeys, autoExpandParent: false});
   };
   togglePopoverVisibility = (visible) => {
-    console.log('popover ');
     this.setState({visible});
   };
 
@@ -135,7 +132,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   renderTags(tags, searchString) {
-    console.log('final tags list', tags);
     const list = [];
     _.forEach(tags, (val, key) => {
       let supportedTagsString = '';
@@ -143,7 +139,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      console.log('supportedTagsString', supportedTagsString);
       if (_.has(val, 'subtags')) {
         const temp = this.renderTags(val.subtags);
         list.push((

package/components/EmailMobilePreview/index.scss

@@ -9,7 +9,6 @@ $classPrefix: email-mobile-preview-container;
         #emailPreivew-content-wrapper{
           width: 100%;
           height: 90%;
-          overflow: auto;
           // display: table;
     
           #emailPreivew-content {

package/components/EmailPreviewV2/_emailPreviewV2.scss

@@ -6,10 +6,13 @@ $classPrefix: email-preview-v2;
         overflow-y: auto;
         // font-family: 'proxima-nova';
         overflow: hidden;
+
+        #email-iframe {
+          width: -webkit-fill-available;
+        }
         #emailPreivew-content-wrapper{
           width: 100%;
           height: 90%;
-          overflow: auto;
           // display: table;
     
           #emailPreivew-content {

package/components/EmailPreviewV2/index.js

@@ -88,7 +88,7 @@ class EmailPreviewV2 extends React.Component {
                     {currentDevice === devices.mobile ?
                       <img src={mobileBody} alt="capillary" width="85%" /> : ''}
                     <div className={messageContainerName}>
-                      <iframe srcDoc={templateContent} {...deviceAspectRatio[currentDevice]} >
+                      <iframe id="email-iframe" srcDoc={templateContent} {...deviceAspectRatio[currentDevice]} >
                         <p><FormattedMessage {...messages.noIframeSupport}/></p>
                       </iframe>
                     </div>

package/components/FormBuilder/index.js

@@ -31,7 +31,10 @@ const {CapRadioGroup} = CapRadio;
 
 // import { FormattedMessage } from 'react-intl';
 // import messages from './messages';
-
+const isUrl = (str) => {
+  const res = str.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
+  return res;
+};
 class FormBuilder extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -409,7 +412,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
   }
-
+  isValidExternalLink = ({obj, key}) => {
+    const url = _.get(obj, key);
+    return (url && url !== "" && isUrl(url));
+  }
   /* eslint-disable */
   validateForm(tags, injectedTags, isSave, showMessages) {
     
@@ -640,15 +646,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               errorData[parseInt(index)]['cta-deeplink2-select'] = false;
             }
             // }
-            if(tab[`cta-deeplink-text`] === ""){
+            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-text'})){
               errorData[parseInt(index)][`cta-deeplink-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
             }else {
               errorData[parseInt(index)]['cta-deeplink-text'] = false;
             }
-
-            if(tab['cta-deeplink2-text'] === ""){
+            
+            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink2-text'})){
               errorData[parseInt(index)][`cta-deeplink2-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
@@ -671,7 +677,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }else {
               errorData[parseInt(index)]['secondary-cta-0-label'] = false;
             }
-            if(tab['cta-deeplink-secondary-cta-0-text'] === ""){
+
+            
+            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-secondary-cta-0-text'})){
               errorData[parseInt(index)][`cta-deeplink-secondary-cta-0-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
@@ -692,7 +700,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }else {
               errorData[parseInt(index)]['secondary-cta-1-label'] = false;
             }
-            if(tab['cta-deeplink-secondary-cta-1-text'] === ""){
+            
+            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-secondary-cta-1-text'})){
               errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
@@ -706,7 +715,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }else {
               errorData[parseInt(index)]['cta-deeplink-secondary-cta-1-select'] = false;
             }
-            if(tab['cta-deeplink-secondary-cta-1-text2'] === ""){
+            
+            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-secondary-cta-1-text2'})){
               errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-text2`] = true;
               isValid = false;
               isCurrentTabValid = false;

package/config/app.js

@@ -8,6 +8,7 @@ const config = {
     login_url: 'auth/login',
     //dashboard_url: '/sms',
     dashboard_url: '/v2',
+    accountConfig: (strs, accountId) => `org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
     api_endpoint: 'https://nightly.capillary.in/arya/api/v1/creatives',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.71",
+  "version": "2.0.73",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@capillarytech/cap-ui-library": "^1.0.140",
+    "@capillarytech/cap-ui-library": "^1.0.144",
     "antd": "3.19.6",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",

package/v2Containers/Email/index.js

@@ -307,7 +307,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           this.setEditData(nextProps.Email.templateDetails);
         });
       }
-      if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData) {
+      if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
         this.startTemplateCreation(nextProps.templateData);
       }
       if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
@@ -2065,6 +2065,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           "language": this.supportedLanguages[languageIndex].language,
           "template-content": !data.base.is_drag_drop && data.base.is_drag_drop !== 1 ? data.base.html_content : "",
         };
+        const dragDropId = _.get(data, 'base.drag_drop_id');
+        if (dragDropId) {
+          tempData.drag_drop_id = dragDropId;
+        }
         formData[0].base = true;
         formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);
         formData[0][this.supportedLanguages[languageIndex].iso_code] = tempData;

package/v2Containers/MobilePush/Create/index.js

@@ -269,7 +269,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                     type: "input",  //Resembles component to be used
                     metaType: "text",
                     datatype: "string",
-                    errorMessage: "External Link cannot be empty",
+                    errorMessage: <FormattedMessage {...messages.invalidExternalLink}/>,
                     required: true,
                     fluid: true,
                     width: 18,
@@ -277,7 +277,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                     style: {
                       width: '100%',
 
-                      marginBottom: '16px',
                     },
                     styling: "semantic",
                     order: 1,

package/v2Containers/MobilePush/Create/messages.js

@@ -154,6 +154,10 @@ export default defineMessages({
     id: 'app.containers.MobilePush.Create.externalLinkCantEmpty',
     defaultMessage: 'External Link cannot be empty',
   },
+  "invalidExternalLink": {
+    id: 'app.containers.MobilePush.Create.invalidExternalLink',
+    defaultMessage: 'External Link cannot be empty / Invalid url',
+  },
   "Do you really want to go back? All your temporary changes will be lost!": {
     id: 'app.containers.MobilePush.Create.goBackConfirmation',
     defaultMessage: "Going back will discard all the changes you've made. Continue?",

package/v2Containers/MobilePush/Edit/index.js

@@ -604,6 +604,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     if (androidData) {
       if (androidData.cta) {
+        android['add-pri-cta'] = true;
         android['cta-deeplink'] = androidData.cta.type === "DEEP_LINK" ? "Deeplink" : "External Link";
         if ( androidData.cta.type === "DEEP_LINK") {
           android['cta-deeplink-select'] = androidData ? androidData.cta.actionLink : '';
@@ -623,6 +624,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         android.image = androidData.expandableDetails.image;
       }
       if (androidData.expandableDetails && androidData.expandableDetails.ctas && androidData.expandableDetails.ctas.length) {
+        android['add-sec-cta'] = true;
         android['cta-deeplink-secondary-cta-0'] = androidData.expandableDetails.ctas[0].type === "DEEP_LINK" ? "Deeplink" : "External Link";
         if ( androidData.expandableDetails.ctas[0].type === "DEEP_LINK") {
           android['cta-deeplink-secondary-cta-0-select'] = androidData.expandableDetails.ctas[0].actionLink;
@@ -640,6 +642,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         }
       }
       if (androidData.expandableDetails && androidData.expandableDetails.ctas && androidData.expandableDetails.ctas.length > 1) {
+        android['add-sec-cta-2'] = true;
         android['cta-deeplink-secondary-cta-1'] = androidData.expandableDetails.ctas[1].type === "DEEP_LINK" ? "Deeplink" : "External Link";
         if (androidData.expandableDetails.ctas[1].type === "DEEP_LINK") {
           android['cta-deeplink-secondary-cta-1-select'] = androidData.expandableDetails.ctas[1].actionLink;
@@ -667,6 +670,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     if (iosData) {
       if (iosData.cta) {
+        ios['add-pri-cta-ios'] = true;
         ios['cta-deeplink2'] = iosData.cta.type === "DEEP_LINK" ? "Deeplink" : "External Link";
         if (iosData.cta.type === "DEEP_LINK") {
           ios['cta-deeplink2-select'] = iosData ? iosData.cta.actionLink : '';
@@ -689,6 +693,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         ios.image = iosData.expandableDetails.image;
       }
       if (iosData.expandableDetails && iosData.expandableDetails.ctas && iosData.expandableDetails.ctas.length) {
+        iosData['add-sec-cta-ios'] = true;
         if (iosData.expandableDetails.ctas[0].type) {
           ios['cta-deeplink-secondary-cta-1'] = iosData.expandableDetails.ctas[0].type === "DEEP_LINK" ? "Deeplink" : "External Link";
         }

package/v2Containers/MobilePush/commonMethods.js

@@ -1,5 +1,7 @@
 import {get, filter, cloneDeep} from 'lodash';
-
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import messages from './Create/messages';
 function getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions}) {
   const newInputFields = cloneDeep(inputFields);
   newInputFields.splice(fieldIndex + 1, 0, {
@@ -205,15 +207,13 @@ function getLinkTypeFields({inputFieldsArgs, fieldIndex, deepLinkOptions, formDa
           type: "input",  //Resembles component to be used
           metaType: "text",
           datatype: "string",
-          errorMessage: "External Link cannot be empty",
+          errorMessage: <FormattedMessage {...messages.invalidExternalLink}/>,
           required: true,
           fluid: true,
           width: 18,
           offset: 1,
           style: {
             width: '100%',
-
-            marginBottom: '16px',
           },
           styling: "semantic",
           order: 1,

package/v2Containers/Templates/index.js

@@ -8,13 +8,14 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
+import styled from 'styled-components';
 import {injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { Modal} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox} from '@capillarytech/cap-ui-library';
+import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -33,6 +34,7 @@ import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Create/actions';
 import CardGrid from '../../components/CardGrid';
+import config from '../../config/app';
 import './_templates.scss';
 import * as globalActions from '../Cap/actions';
 import { makeSelectAuthenticated } from '../Cap/selectors';
@@ -44,7 +46,15 @@ import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
 const {CapCustomCardList} = CapCustomCard;
-
+const InlineDiv = styled.div`
+  display: inline;
+  .ant-anchor.fixed{
+    display: inline;
+    .ant-anchor-link{
+      display: inline;
+    }
+  }
+`;
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -141,7 +151,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
       }
       if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
-        queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
+        const account = this.props.Templates.selectedWeChatAccount;
+        queryParams.accountId = account.id;
+        const isAndroidSupported = _.get(account, "configs.android") === '1';
+        const isIosSupported = _.get(account, "configs.ios") === '1';
+        if (!(isAndroidSupported || isIosSupported)) {
+          this.props.actions.resetAccount();
+          return;
+        }
       }
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
@@ -360,8 +377,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.originalId = this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})].sourceAccountIdentifier;
       } else if (this.state.channel.toLowerCase() === 'mobilepush') {
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
-        params.accountId = this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})].id;
+        const account = this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})];
+        params.accountId = account.id;
+        const isAndroidSupported = _.get(account, "configs.android") === '1';
+        const isIosSupported = _.get(account, "configs.ios") === '1';
+        if (!(isAndroidSupported || isIosSupported)) {
+          this.setState({selectedAccountError: true});
+          this.props.actions.resetTemplate();
+          return;
+        }
       }
+
       console.log("getAllTemplates params: ", params);
       this.getAllTemplates({params, resetPage: true});
     });
@@ -501,15 +527,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       return templateData;
     }) : [];
+    const accountId = _.get(this.props, 'Templates.selectedWeChatAccount.uuid');
     return (<div>
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip}>
         {!_.isEmpty(templates) && <div className="pagination-container">
           <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
         </div>}
-        {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-          <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
+        {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
+        <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+          <CapHeading type="h6">{this.props.intl.formatMessage(messages.noAccountMessage)}</CapHeading>
         </div>}
+        { !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError &&
+          <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+            <CapHeading type="h6" >
+              {this.props.intl.formatMessage(messages.accountConfigError)}
+              <InlineDiv>
+                <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
+              </InlineDiv>
+            </CapHeading>
+          </div>
+        }
       </CapSpin>
 
     </div>);
@@ -1282,9 +1320,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   isFullMode = () => this.props.location.query.type !== "embedded" || this.props.isFullMode
   isCreateDisabled = () => {
     let isDisabled = this.isLoading();
-    if (this.state.channel === MOBILE_PUSH || this.state.channel === WECHAT) {
+    const channel = this.state.channel.toUpperCase();
+    if (channel === MOBILE_PUSH || channel === WECHAT) {
       isDisabled = isDisabled || _.isEmpty(this.props.Templates.selectedWeChatAccount);
     }
+    if (channel === MOBILE_PUSH) {
+      isDisabled = isDisabled || this.state.selectedAccountError;
+    }
     return isDisabled;
   }
 
@@ -1569,8 +1611,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               >
               </CardGrid>
             </Pagination>} */}
-          {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-            <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
+          {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress &&
+            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+              <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesMessage)}</CapHeading>
             </div>}
         </CapRow>
         <CapRow>

package/v2Containers/Templates/messages.js

@@ -270,4 +270,9 @@ export default defineMessages({
     id: `${scope}.wechatAccountNotConfigured`,
     defaultMessage: 'Selected wechat account is not configured to create wechat templates',
   },
+  "accountConfigError": {
+    id: `${scope}.accountConfigError`,
+    defaultMessage: 'This account is not configured properly. You can configure it ',
+  },
+
 });