@capillarytech/creatives-library 7.11.2 → 7.11.3

package/package.json

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

package/v2Components/TemplatePreview/index.js

@@ -219,7 +219,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       'border-radius': '6px',
       'background-color': CAP_G15,
       'width': '88%',
-      'left': '10%',
+      'left': 0,
     };
     const getVideoContent = ({
       video,

package/v2Components/TemplatePreview/messages.js

@@ -32,7 +32,7 @@ export default defineMessages({
   },
   whatsappUnsubscribeLength: {
     id: 'app.components.TemplatePreview.whatsappUnsubscribeLength',
-    defaultMessage: "Includes 36 characters of (Click {{unsubscribe}} to unsubscribe)",
+    defaultMessage: "Includes 37 characters of (Click {{unsubscribe}} to unsubscribe)",
   },
   whatsappMessageLength: {
     id: 'app.components.TemplatePreview.whatsappMessageLength',

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -329,7 +329,7 @@ export function SlideBoxContent(props) {
       }
       case constants.WHATSAPP: {
         return {
-          templateMsg: getWhatsappContent(templateDataObject),
+          templateMsg: getWhatsappContent(templateDataObject, true),
         };
       }
       default:

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
-import { CapHeader, CapIcons, CapLabel, CapSteps } from '@capillarytech/cap-ui-library';
+import { CapHeader, CapIcons, CapLabel, CapLink, CapSteps, CapIcon } from '@capillarytech/cap-ui-library';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
@@ -15,6 +15,8 @@ import { formatString } from '../../utils/Formatter';
 import {
   CAP_SPACE_12,
 } from '@capillarytech/cap-ui-library/styled/variables';
+import { WHATSAPP_HELP_DOC_LINK } from './constants';
+
 const { CapLabelInline } = CapLabel;
 const StyledLabel = styled(CapLabelInline)`
   margin-right: ${CAP_SPACE_12};
@@ -35,6 +37,7 @@ export function SlideBoxHeader(props) {
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
   const isWhatsappEdit = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'editTemplate';
+  const isWhatsappCreate = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'createTemplate';
   const whatsappOverview = isWhatsappEdit && isFullMode;
   const headerMessage = whatsappOverview ? messages.whatsappOverview : messages.editMessageContent;
   const {
@@ -58,6 +61,10 @@ export function SlideBoxHeader(props) {
     return labels[currentChannel.toLowerCase()];
   };
 
+  const openWhatsappHelpDoc = () => {
+    window.open(WHATSAPP_HELP_DOC_LINK, '_blank')
+  }
+
   return (
     <div key="creatives-container-slidebox-header-content">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
@@ -115,6 +122,14 @@ export function SlideBoxHeader(props) {
             }
           />
         )}
+        {isWhatsappCreate && (
+          <CapLink 
+            onClick={openWhatsappHelpDoc} 
+            title={<FormattedMessage {...messages.learnTips} />} 
+            suffix={<CapIcon type="open-in-new" size="s" />}
+            className="learn-tips-link"
+          />
+        )}
       {mapTemplateCreate && (
         <CapSteps
           onChange={onWeChatMaptemplateStepChange}

package/v2Containers/CreativesContainer/constants.js

@@ -20,3 +20,5 @@ export const WHATSAPP = "WHATSAPP";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
+
+export const WHATSAPP_HELP_DOC_LINK = "https://support.capillarytech.com/en/support/solutions/articles/4000180620-create-whatsapp-template";

package/v2Containers/CreativesContainer/index.js

@@ -368,6 +368,7 @@ export class Creatives extends React.Component {
         case constants.WHATSAPP: {
           const { 
             templateConfigs: {
+              id,
               name,
               template,
               varMapped,
@@ -377,6 +378,7 @@ export class Creatives extends React.Component {
             } = {},
           } = templateData;
           creativesTemplateData = {
+            _id: id,
             type: constants.WHATSAPP,
             edit: true,
             name,

package/v2Containers/CreativesContainer/messages.js

@@ -314,4 +314,8 @@ export default defineMessages({
     id: `${scope}.whatsappTemplate`,
     defaultMessage: `WhatsApp template`,
   },
+  "learnTips": {
+    id: `${scope}.learnTips`,
+    defaultMessage: `Learn tips to get approved`,
+  },
 });

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -31,9 +31,11 @@ exports[`Test SlideBoxContent container Should render correct component for what
     templateData={
       Object {
         "_id": "620e213d39bd394c58aeaaca",
+        "channel": "WHATSAPP",
         "mode": "edit",
         "modeType": "",
         "type": "WHATSAPP",
+        "validity": true,
         "whatsappTemplateCategory": "ALERT_UPDATE",
         "whatsappTemplateName": "amit123456",
       }
@@ -49,8 +51,19 @@ exports[`Test SlideBoxContent container Should render correct component for what
     charCounterEnabled={false}
     content={
       Object {
-        "templateMsg": "1234567890
-Click {{unsubscribe}} to unsubscribe",
+        "templateMsg": <React.Fragment>
+          <CapLabel
+            type="label5"
+          >
+            1234567890
+          </CapLabel>
+          <CapLabel
+            type="label11"
+          >
+            
+Click {{unsubscribe}} to unsubscribe
+          </CapLabel>
+        </React.Fragment>,
       }
     }
     showCount={true}

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap

@@ -3,7 +3,26 @@
 exports[`Test SlideBoxHeader container Should render correct component for whatsapp channel create mode 1`] = `
 <div
   key="creatives-container-slidebox-header-content"
-/>
+>
+  <CapLink
+    className="learn-tips-link"
+    disabled={false}
+    onClick={[Function]}
+    suffix={
+      <CapIcon
+        size="s"
+        type="open-in-new"
+      />
+    }
+    title={
+      <FormattedMessage
+        defaultMessage="Learn tips to get approved"
+        id="creatives.containersV2.Creatives.learnTips"
+        values={Object {}}
+      />
+    }
+  />
+</div>
 `;
 
 exports[`Test SlideBoxHeader container Should render correct component for whatsapp channel edit mode 1`] = `

package/v2Containers/Templates/_templates.scss

@@ -6,12 +6,29 @@
       padding: unset;
     }
   }
-.creatives-templates-list.full-mode{
-  .pagination-container {
-    .cap-custom-card-list-row {
-      .cap-custom-card-list-col{
-        &:nth-child(4n+4) { //every 4th child
-          margin-right: unset;
+
+@media screen and (max-width: 1172px) {
+  .creatives-templates-list.full-mode{
+    .pagination-container {
+      .cap-custom-card-list-row {
+        .cap-custom-card-list-col{
+          &:nth-child(3n+3) { //every 4th child
+            margin-right: unset;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1172px) {
+  .creatives-templates-list.full-mode{
+    .pagination-container {
+      .cap-custom-card-list-row {
+        .cap-custom-card-list-col{
+          &:nth-child(4n+4) { //every 4th child
+            margin-right: unset;
+          }
         }
       }
     }

package/v2Containers/Whatsapp/constants.js

@@ -10,7 +10,7 @@ import {
   CAP_GREEN02,
 } from '@capillarytech/cap-ui-library/styled/variables';
 
-export const UNSUBSCRIBE_TEXT_LENGTH = 36;
+export const UNSUBSCRIBE_TEXT_LENGTH = 37;
 export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
 export const WHATSAPP = 'WHATSAPP';
 

package/v2Containers/Whatsapp/index.js

@@ -410,8 +410,8 @@ export const Whatsapp = (props) => {
     <CapHeading type="h6" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
         currentLength: isEditFlow
-          ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH
-          : templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH + 1,
+          ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH - 1
+          : templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH,
         maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
       })}
     </CapHeading>
@@ -438,18 +438,30 @@ export const Whatsapp = (props) => {
     setTemplateCategory(value);
   };
 
-  const onAddVar = () => {
-    const validVarArr = templateMessage.match(validVarRegex) || [];
-    const tempMsg = `${templateMessage}{{${validVarArr.length + 1}}}`;
+  const onAddVar = (isAutoComplete) => {
+    let tempMessage = templateMessage;
+
+    //if autocomplete feature, first remove the trailing bracket and then add variable
+    if (isAutoComplete) {
+      tempMessage = tempMessage.slice(0, templateMessage.length - 1);
+    }
+    const validVarArr = tempMessage.match(validVarRegex) || [];
+    const tempMsg = `${tempMessage}{{${validVarArr.length + 1}}}`;
     const error = templateMessageErrorHandler(tempMsg);
     setTemplateMessage(tempMsg);
     setTemplateMessageError(error);
   };
 
   const onTemplateMessageChange = ({ target: { value } }) => {
-    const error = templateMessageErrorHandler(value);
-    setTemplateMessage(value);
-    setTemplateMessageError(error);
+    // autocomplete feature
+    if ( value.slice(-2) === '{{' ) {
+      onAddVar(true);
+    }
+    else {
+      const error = templateMessageErrorHandler(value);
+      setTemplateMessage(value);
+      setTemplateMessageError(error);
+    }
   };
 
   const templateMessageErrorHandler = (value) => {
@@ -457,7 +469,7 @@ export const Whatsapp = (props) => {
     if (value === '') {
       errorMessage = formatMessage(messages.emptyTemplateMessageErrorMessage);
     } else if (
-      UNSUBSCRIBE_TEXT_LENGTH + value?.length + 1 >
+      UNSUBSCRIBE_TEXT_LENGTH + value?.length >
       TEMPLATE_MESSAGE_MAX_LENGTH
     ) {
       errorMessage = formatMessage(messages.templateMessageLengthError);
@@ -465,7 +477,7 @@ export const Whatsapp = (props) => {
       const validVarArr = value.match(validVarRegex) || [];
       const validVarSet = [...new Set(validVarArr)];
 
-      const invalidVarRegex = /{{(.+?)}}/g;
+      const invalidVarRegex = /{{(.*?)}}/g;
       const invalidVarArr = value.match(invalidVarRegex) || [];
       const invalidVarSet = [...new Set(invalidVarArr)];
 
@@ -680,7 +692,7 @@ export const Whatsapp = (props) => {
             type="flat"
             isAddBtn
             onClick={onAddVar}
-            disabled={addedVarCount >= 19 || templateMessageError}
+            disabled={(addedVarCount >= 19 || templateMessageError) && templateMessage}
           >
             {formatMessage(messages.addVar)}
           </CapButton>
@@ -928,7 +940,7 @@ export const Whatsapp = (props) => {
         channel={WHATSAPP}
         content={{ templateMsg }}
         whatsappContentLen={
-          isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length
+          isEditFlow ? updatedSmsEditor.join('').length - 1 : templateMessage.length
         }
         whatsappAccountName={accountName}
       />

package/v2Containers/Whatsapp/index.scss

@@ -39,6 +39,8 @@
   .whatsapp-edit-template-message-heading {
     margin-top: $CAP_SPACE_16;
     margin-bottom: $CAP_SPACE_08;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .whatsapp-edit-disabled {
     cursor: not-allowed;