@capillarytech/creatives-library 3.1.14 → 3.1.16

package/components/TemplatePreview/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { injectIntl, intlShape} from 'react-intl';
-// import styled from 'styled-components';
+import styled from 'styled-components';
 import {CapColumn} from '@capillarytech/cap-react-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
@@ -51,6 +51,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         return undefined;
       });
     }
+    const BoldText = styled.span`
+    font-weight: 800;`;
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
         { channel && channel.toLowerCase() === 'sms' &&
@@ -152,6 +154,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 }
                 <div style={{marginTop: '8px', fontSize: '16px'}} >{`${this.props.intl.formatMessage(messages.sms)}: ${smsDetails.parts}`}</div>
                 <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.charactersPerSms)}: ${smsDetails.chars_used}`}</div>
+                {smsDetails.optoutUrlPresent && <div style={{fontWeight: '100', fontSize: '12px'}}>
+                  {`${this.props.intl.formatMessage(messages.includes)} `}<BoldText>{`${this.props.intl.formatMessage(messages.optout)} `}</BoldText>{this.props.intl.formatMessage(messages.tag)}: {smsDetails.optouturlLength}
+                </div>}
               </p>
             </div>
             : ''

package/components/TemplatePreview/messages.js

@@ -26,6 +26,18 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
+  includes: {
+    id: 'app.components.TemplatePreview.includes',
+    defaultMessage: 'Includes',
+  },
+  optout: {
+    id: 'app.components.TemplatePreview.optout',
+    defaultMessage: 'Optout',
+  },
+  tag: {
+    id: 'app.components.TemplatePreview.tag',
+    defaultMessage: 'tag',
+  },
   previewGenerated: {
     id: 'creatives.components.TemplatePreview.previewGenerated',
     defaultMessage: 'Preview is being generated',

package/config/app.js

@@ -9,12 +9,14 @@ const config = {
     login_url: 'auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',
+    subscription_api_endpoint: '/arya/api/v1/subscription',
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
     api_endpoint: 'https://nightly.capillary.in/arya/api/v1/creatives',
     auth_endpoint: 'https://nightly.capillary.in/arya/api/v1/auth',
     arya_endpoint: 'https://nightly.capillary.in/arya/api/v1',
+    subscription_api_endpoint: 'https://nightly.capillary.in/arya/api/v1/subscription',
     login_url: 'auth/login',
     dashboard_url: '/sms',
     dashboard_url_v2: '/v2',

package/containers/Sms/Create/index.js

@@ -20,8 +20,7 @@ import './_smsCreate.scss';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
-import * as charCount from '../../../utils/smsCharCount';
-import {checkUnicode} from '../../../utils/smsCharCountV2';
+import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 
@@ -223,7 +222,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const result = {};
     result.base = baseData;
-    const msgObj = charCount.updateCharCount(baseData['sms-editor']);
+    const msgObj = updateCharCount(baseData['sms-editor']);
     result.base.msg_count = msgObj.msgCount;
     console.log("Message Count", msgObj.msgCount);
     const response = {

package/index.js

@@ -59,7 +59,7 @@ import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
 import CreativesContainer from './v2Containers/CreativesContainer';
 import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
-
+import { updateCharCount } from './utils/smsCharCountV2';
 
 export {default as Ebill} from './v2Containers/Ebill';
 export {default as EbillReducer} from './v2Containers/Ebill/reducer';
@@ -116,4 +116,5 @@ export { CapContainer,
   MobilePushEditContainer,
   TemplatesV2Container,
   CreativesContainer,
+  updateCharCount,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.1.14",
+  "version": "3.1.16",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,6 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@babel/node": "^7.8.4",
     "@babel/polyfill": "7.4.3",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/routes.js

@@ -12,7 +12,7 @@ import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 import * as lineSagas from 'containers/Line/Create/sagas';
 import * as languageSaga from './v2Containers/LanguageProvider/sagas';
-
+import {updateCharCount} from './utils/smsCharCountV2';
 const errorLoading = (err) => {
   console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
 };
@@ -23,6 +23,7 @@ const loadModule = (cb) => (componentModule) => {
 
 export default function createRoutes(store) {
   // Create reusable async injectors using getAsyncInjectors factory
+  updateCharCount("", false); // calling here to get unsubscribeurl from api.
   const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
   injectSagas(rootSaga.default);
   injectSagas(languageSaga.default);

package/services/api.js

@@ -10,10 +10,12 @@ import * as API from '../utils/ApiCaller';
 let API_ENDPOINT = config.development.api_endpoint;
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
+let SUBSCRIPTION_API_ENDPOINT = config.development.subscription_api_endpoint;
 if (process.env.NODE_ENV === 'production') {
   API_ENDPOINT = config.production.api_endpoint;
   API_AUTH_ENDPOINT = config.production.auth_endpoint;
   ARYA_ENDPOINT = config.production.arya_endpoint;
+  SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
 }
 
 const isProd = process.env.NODE_ENV === 'production';
@@ -325,3 +327,15 @@ export const getLocizMessage = async (locale) => {
   const response = await request(url, getAPICallObject('GET'));
   return response;
 };
+
+export const getUnsubscribeUrl = () => {
+  const body = {
+    orgUnitId: -1,
+    source: 'INSTORE',
+    accountId: '',
+    priority: 'BULK',
+    channel: 'mobile',
+  };
+  const url = `${SUBSCRIPTION_API_ENDPOINT}/unsubscribeUrl`;
+  return request(url, getAPICallObject('POST', body));
+};

package/utils/smsCharCountV2.js

@@ -1,4 +1,9 @@
 import React from 'react';
+import * as Api from './../services/api';
+let optoutUrl;
+let showOptoutCount = true;
+let responseState = "REQUEST";
+
 function getURLParameter(name) {
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
 }
@@ -49,13 +54,26 @@ export function checkUnicode(content) {
   return false;
 }
 export function updateCharCount(content, isUnicodeEnabled) {
-  console.log(content);
-  var chars_arr = content.split("");
-  console.log(chars_arr);
+  if (showOptoutCount && optoutUrl === undefined && responseState === 'REQUEST') {
+    Api.getUnsubscribeUrl().then((res) => {
+      optoutUrl = res.response.response;
+      responseState = "SUCCESS";
+    }).catch((err) => {
+      showOptoutCount = false;
+      responseState = "FAIL";
+      optoutUrl = undefined;
+    });
+  }
+  const optoutTag = /{{optout}}/g;
+  const optoutTagLength = 14;
+  const contentOriginal = content;
+  const noOfOptout = (content.match(optoutTag) || []).length;
+  content = showOptoutCount ? content.replace(optoutTag, "") : content;
+  var chars_arr = contentOriginal.split("");
   var coding = '7bit';
   var parts = 1;
   var part = 1;
-  var chars_used = 0;
+  var chars_used = showOptoutCount ? ((optoutUrl && optoutUrl.length || 0) * noOfOptout) : 0;
   var chars_sms = 160;
   var sms_parts_container = [];
   var partc = [];
@@ -127,17 +145,15 @@ export function updateCharCount(content, isUnicodeEnabled) {
     }
   }
 
-  console.log('Type:', (coding == '7bit' ? '7bit' : 'Unicode'));
-  console.log('Parts:', parts);
-  console.log('SMS Chars:', chars_sms);
-  console.log('SMS Char total:', chars_used);
-
+  chars_used = showOptoutCount ? (chars_used - (optoutTagLength * noOfOptout)) : chars_used;
   return {
     unicode: (coding === '7bit' ? false : true),
     parts,
     chars_sms,
     chars_used,
     char_list: partc,
+    optouturlLength: (optoutUrl && optoutUrl.length) || 0,
+    optoutUrlPresent: noOfOptout > 0,
+    responseState,
   };
 }
-

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -350,3 +350,11 @@
   background-color: #333333;
   margin-right: 4px;
 }
+
+.character-count-col{
+  margin-top: 8px;
+  margin-left: 40px;
+  .optout-tag-heading{
+    font-size: 12px;
+  }
+}

package/v2Components/TemplatePreview/index.js

@@ -59,24 +59,42 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               <FormattedMessage {...messages.smsFormatType}/>
             }
           </CapHeading>}
+          {smsDetails.optoutUrlPresent && <CapHeading type="h6">
+            <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
+          </CapHeading>}
         </CapColumn>}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
             { channel && channel.toLowerCase() === 'sms' &&
-              <div className="shell align-center" id="sms-preview">
-                <img className="preview-image sms" src={smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-                <div className="msgContainer sms">
-                  <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />
-                  <div className={"message-pop sms"}>
-                    {content && content.length && content.map((msg, index) =>
-                      <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
-                        {msg}
-                      </CapColumn>)
-                }
+              <div>
+                <div className="shell align-center" id="sms-preview">
+                  <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+                  <div className="msgContainer sms">
+                    <img className="sms-icon" src={smsIcon} alt="Sms icon" />
+                    <div className={"message-pop sms"}>
+                      {content && content.length && content.map((msg, index) =>
+                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                          {msg}
+                        </CapColumn>)
+                  }
+                    </div>
                   </div>
                 </div>
+                {!this.props.showCount && <div>
+                  <CapColumn className="character-count-col" span={20}>
+                    {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
+                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
+                      {smsDetails.unicode &&
+                        <FormattedMessage {...messages.smsFormatType}/>
+                      }
+                    </CapHeading>}
+                    {smsDetails.optoutUrlPresent && <CapHeading type="h6" className="optout-tag-heading">
+                      <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
+                    </CapHeading>}
+                  </CapColumn>
+                </div>}
               </div>
-          }
+            }
             {channel && channel.toLowerCase() === 'wechat' ?
             ( <div className="shell align-center" id="sms-preview">
               <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>

package/v2Components/TemplatePreview/messages.js

@@ -22,6 +22,10 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.charactersTotal',
     defaultMessage: "{smsCount} SMS ({charCount} characters)",
   },
+  optoutCharactersTotal: {
+    id: 'app.components.TemplatePreview.optoutCharactersTotal',
+    defaultMessage: "Includes Optout tag ({optoutUrlLength} characters)",
+  },
   smsFormatType: {
     id: 'creatives.componentsV2.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',

package/v2Containers/Sms/Create/index.js

@@ -742,7 +742,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData});
+    this.setState({formData}, () => this.onTemplateContentChange());
   }
 
   startTemplateCreation(data) {

package/v2Containers/Sms/Edit/index.js

@@ -789,7 +789,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
     formData.base[field.id] = myField.value;
-    this.setState({formData});
+    this.setState({formData}, () => this.onTemplateContentChange());
   }
 
   handleFrameTasks = (e) => {