@capillarytech/creatives-library 3.1.29 → 3.1.31

package/components/TemplatePreview/index.js

@@ -149,7 +149,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 {smsDetails.unicode &&
                 <div style={{fontSize: '16px'}}>{`${this.props.intl.formatMessage(messages.smsFormatType)}`}</div>
                 }
-                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.actual_chars_used} ${this.props.intl.formatMessage(messages.characters)})`}</div>
+                <div style={{marginTop: '8px', fontSize: '16px'}} >{`${smsDetails.parts} ${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`}</div>
                 {smsDetails.optoutUrlPresent && <div style={{fontWeight: '100', fontSize: '12px'}}>
                   {`${this.props.intl.formatMessage(messages.includesOptoutTag)} (${smsDetails.optouturlLength} ${this.props.intl.formatMessage(messages.characters)})`}
                 </div>}

package/components/TemplatePreview/messages.js

@@ -28,7 +28,7 @@ export default defineMessages({
   },
   includesOptoutTag: {
     id: 'app.components.TemplatePreview.includesOptoutTag',
-    defaultMessage: 'Includes optout tag',
+    defaultMessage: 'Includes Optout tag',
   },
   previewGenerated: {
     id: 'creatives.components.TemplatePreview.previewGenerated',

package/package.json

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

package/utils/smsCharCountV2.js

@@ -73,27 +73,30 @@ export function updateCharCount(content, isUnicodeEnabled) {
   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 = [];
   for (let i = 0; i < chars_arr.length; i++) {
     if (charset7bit.indexOf(chars_arr[i]) >= 0) {
       chars_used = chars_used + 1;
+      console.log('X1:', chars_used);
     } else if (charset7bitext.indexOf(chars_arr[i]) >= 0) {
       chars_used = chars_used + 2;
+      console.log('X2:', chars_used);
     } else {
       coding = '16bit';
       chars_used = chars_arr.length;
+      console.log('X3:', chars_used);
       break;
     }
   }
-  chars_used = showOptoutCount ? (chars_used + (((optoutUrl && optoutUrl.length) || 0) * noOfOptout) - (optoutTagLength * noOfOptout)) : chars_used;
   if (coding == '7bit') {
     if (chars_used > 160) {
       var parts = Math.ceil(chars_used / 153);
       var part_chars_used = 7;
       chars_sms = 153;
+      // partc.push(getUHDHtml(parts, part));
       for (let i = 0; i < chars_arr.length; i++) {
         if (part_chars_used + 1 > 160) {
           part = part + 1;
@@ -120,12 +123,15 @@ export function updateCharCount(content, isUnicodeEnabled) {
     }
   } else {
     if (chars_used > 70) {
+
       parts = Math.ceil(chars_used / 67);
       var part_chars_used = 3;
       chars_sms = 67;
+      //partc.push(getUHDHtml(parts, part));
       for (let i = 0; i < chars_arr.length; i++) {
         if (part_chars_used + 1 > 70) {
           part = part + 1;
+          // partc.push(getUHDHtml(parts, part));
           part_chars_used = 3;
         }
         partc = [...partc, charToSpan(chars_arr[i], coding, isUnicodeEnabled)];
@@ -138,6 +144,8 @@ export function updateCharCount(content, isUnicodeEnabled) {
       }
     }
   }
+
+  chars_used = showOptoutCount ? (chars_used - (optoutTagLength * noOfOptout)) : chars_used;
   return {
     unicode: (coding === '7bit' ? false : true),
     parts,

package/v2Components/TemplatePreview/index.js

@@ -54,7 +54,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       <CapRow>
         {this.props.showCount && <CapColumn span={16}>
           {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
-            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.actual_chars_used}}/>
+            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
             {smsDetails.unicode &&
               <FormattedMessage {...messages.smsFormatType}/>
             }
@@ -83,7 +83,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                 {!this.props.showCount && <div>
                   <CapColumn className="character-count-col" span={22}>
                     {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
-                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.actual_chars_used}}/>
+                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
                       {smsDetails.unicode &&
                         <FormattedMessage {...messages.smsFormatType}/>
                       }

package/v2Components/TemplatePreview/messages.js

@@ -24,7 +24,7 @@ export default defineMessages({
   },
   optoutCharactersTotal: {
     id: 'app.components.TemplatePreview.optoutCharactersTotal',
-    defaultMessage: "Includes optout tag ({optoutUrlLength} characters)",
+    defaultMessage: "Includes Optout tag ({optoutUrlLength} characters)",
   },
   smsFormatType: {
     id: 'creatives.componentsV2.TemplatePreview.smsFormatType',

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -21,6 +21,7 @@ function getChannelLabel(channel) {
 function SlideBoxHeader(props) {
   const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
+  const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
   return (
     <div key="creatives-container-slidebox-header-content">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
@@ -65,7 +66,7 @@ function SlideBoxHeader(props) {
             }
           />
         )}
-      {!showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection' && (
+      {mapTemplateCreate && (
         <CapSteps
           onChange={onWeChatMaptemplateStepChange}
           current={weChatMaptemplateStep}

package/v2Containers/CreativesContainer/index.js

@@ -24,6 +24,8 @@ import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
 import {isLoading as isLoadingSelector} from './selectors';
 import messages from './messages';
+import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
+
 const classPrefix = 'add-creatives-section';
 
 const SlideBoxWrapper = styled.div`
@@ -464,8 +466,9 @@ class Creatives extends React.Component {
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
     const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags} = this.props;
+    const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     return (
-      <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
+      <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}>
         <CapSlideBox
           header={
             <SlideBoxHeader

package/v2Containers/CreativesContainer/index.scss

@@ -24,9 +24,6 @@ $classPrefix: add-creatives-section;
             width: 100%;
         }
     }
-    .slidebox-header div:first-child {
-        width: 100%;
-    }
     .wechat-steps {
         width: 40% !important;
         left: 20%;
@@ -39,4 +36,10 @@ $classPrefix: add-creatives-section;
             padding-top: 4px;
         }
     }
+}
+
+.map-template-create {
+    .slidebox-header div:first-child {
+        width: 100%;
+    }
 }

package/containers/Cap/messsages.js

@@ -1,63 +0,0 @@
-import { defineMessages } from 'react-intl';
-export default defineMessages({
-  "sms": {
-    id: 'reon.components.Cap.sms',
-    defaultMessage: 'SMS',
-  },
-  "wechat": {
-    id: 'reon.components.Cap.wechat',
-    defaultMessage: 'WeChat',
-  },
-  "gallery": {
-    id: 'reon.components.Cap.gallery',
-    defaultMessage: 'Gallery',
-  },
-  "creativesDashboard": {
-    id: 'reon.components.Cap.creativesDashboard',
-    defaultMessage: 'Creatives',
-  },
-  "creatives": {
-    id: 'reon.components.Cap.creatives',
-    defaultMessage: 'Creatives',
-  },
-  "campaigns": {
-    id: 'reon.components.Cap.campaigns',
-    defaultMessage: 'Campaigns',
-  },
-  "loyalty": {
-    id: 'reon.components.Cap.loyalty',
-    defaultMessage: 'Loyalty',
-  },
-  "member care": {
-    id: 'reon.components.Cap.memberCare',
-    defaultMessage: 'Member Care',
-  },
-  "workbench": {
-    id: 'reon.components.Cap.Workbench',
-    defaultMessage: 'WorkBench',
-  },
-  "store care": {
-    id: 'reon.components.Cap.storeCare',
-    defaultMessage: 'Store Care',
-  },
-  "store performance": {
-    id: 'reon.components.Cap.storePerformance',
-    defaultMessage: 'Store Performance',
-  },
-  "email": {
-    id: 'reon.components.Cap.email',
-    defaultMessage: 'Email',
-  },
-  "ebill": {
-    id: 'reon.components.Cap.ebill',
-    defaultMessage: 'Ebill',
-  },
-  "campaignsDashboard": {
-    id: 'reon.components.campaignsDashboard',
-    defaultMessage: 'Campaigns',
-  },
-  "campaignsHome": {
-    id: 'reon.components.campaignsHome',
-    defaultMessage: "Campaigns Home",
-  },
-});

package/v2Components/Header/index.js

@@ -1,46 +0,0 @@
-/**
-*
-* Header
-*
-*/
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-// import styled from 'styled-components';
-import { FormattedMessage } from 'react-intl';
-
-import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
-import messages from './messages';
-
-
-function Header(props) {
-  return (
-    <div>
-      <CapRow className="template-form-header">
-        <CapColumn span={10}>
-          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
-        </CapColumn>
-        <CapColumn span={2} offset={8}>
-          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
-        </CapColumn>
-        <CapColumn span={2}>
-          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
-        </CapColumn>
-        <CapColumn span={2}>
-          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
-        </CapColumn>
-      </CapRow>
-    </div>
-  );
-}
-
-Header.propTypes = {
-  templateNameHandler: PropTypes.func,
-  previewHandler: PropTypes.func,
-  cancelHandler: PropTypes.func,
-  saveHandler: PropTypes.func,
-  templateName: PropTypes.string,
-};
-
-export default Header;

package/v2Components/Header/tests/index.test.js

@@ -1,10 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import Header from '../index';
-
-describe('<Header />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});