@capillarytech/creatives-library 2.0.71 → 2.0.72

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/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.72",
   "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/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/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 ',
+  },
+
 });