@capillarytech/creatives-library 7.11.4 → 7.11.6

package/package.json

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

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -43,6 +43,7 @@
     &.line-preview {
       margin-left: $CAP_SPACE_16;
       width: 40%;
+      left: 197px;
 
       .message-pop {
         width: 80%;

package/v2Components/TemplatePreview/index.js

@@ -294,7 +294,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     );
 
     const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
-    const whatsappUpdatedLen = whatsappContentLen !== undefined ? UNSUBSCRIBE_TEXT_LENGTH + whatsappContentLen : content?.templateMsg?.length;
+    const whatsappUpdatedLen = whatsappContentLen !== undefined ? UNSUBSCRIBE_TEXT_LENGTH + whatsappContentLen : content?.charCount;
 
     return (
       <CapRow>
@@ -312,7 +312,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             <>
               <WhatsappStatusContainer template={templateData} />
               <CapHeading type="h3" className='margin-t-12'>
-                <FormattedMessage {...messages.whatsappCharactersTotal} values={{charCount: content?.templateMsg?.length}} />
+                <FormattedMessage {...messages.whatsappCharactersTotal} values={{charCount: whatsappUpdatedLen}} />
               </CapHeading>
               <CapHeading type="h6">
                 <FormattedMessage {...messages.whatsappUnsubscribeLength} />
@@ -447,7 +447,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     className="msg-container line-preview"
                 style={{
                   maxHeight: 330,
-                  overflow: 'scroll',
+                  overflow: 'auto',
                   flexDirection: 'column',
                   marginLeft: 40,
                 }}

package/v2Components/TemplatePreview/messages.js

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

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -329,13 +329,14 @@ export function SlideBoxContent(props) {
       }
       case constants.WHATSAPP: {
         return {
-          templateMsg: getWhatsappContent(templateDataObject, true),
+          ...getWhatsappContent(templateDataObject, true),
         };
       }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
   };
+
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (

package/v2Containers/Templates/index.js

@@ -993,7 +993,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </CapRow>
           );
 
-          templateData.content = getWhatsappContent(template);
+          templateData.content = getWhatsappContent(template).templateMsg;
           break;
         default:
           templateData.content = "";

package/v2Containers/Whatsapp/constants.js

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

package/v2Containers/Whatsapp/index.js

@@ -188,7 +188,7 @@ export const Whatsapp = (props) => {
     // msg = msg.slice(2, -1);
     //removing Click {{unsubscribe}} to unsubscribe
     msg = msg.replace(
-      `Click ${validVarArr[validVarArr.length - 1]} to unsubscribe`,
+      `\nClick ${validVarArr[validVarArr.length - 1]} to unsubscribe`,
       '',
     );
     //removing last var added for Click {{unsubscribe}} to unsubscribe
@@ -410,7 +410,7 @@ export const Whatsapp = (props) => {
     <CapHeading type="h6" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
         currentLength: isEditFlow
-          ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH - 1
+          ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH
           : templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH,
         maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
       })}
@@ -438,30 +438,18 @@ export const Whatsapp = (props) => {
     setTemplateCategory(value);
   };
 
-  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 onAddVar = () => {
+    const validVarArr = templateMessage.match(validVarRegex) || [];
+    const tempMsg = `${templateMessage}{{${validVarArr.length + 1}}}`;
     const error = templateMessageErrorHandler(tempMsg);
     setTemplateMessage(tempMsg);
     setTemplateMessageError(error);
   };
 
   const onTemplateMessageChange = ({ target: { value } }) => {
-    // autocomplete feature
-    if ( value.slice(-2) === '{{' ) {
-      onAddVar(true);
-    }
-    else {
-      const error = templateMessageErrorHandler(value);
-      setTemplateMessage(value);
-      setTemplateMessageError(error);
-    }
+    const error = templateMessageErrorHandler(value);
+    setTemplateMessage(value);
+    setTemplateMessageError(error);
   };
 
   const templateMessageErrorHandler = (value) => {
@@ -515,7 +503,7 @@ export const Whatsapp = (props) => {
 
   const getPayloadContent = () => (
     (isEditFlow && !isFullMode)
-    ? `${updatedSmsEditor.join('')} ${formatMessage(
+    ? `${updatedSmsEditor.join('')}\n${formatMessage(
         messages.templateMessageUnsubscribeText,
       )}`
     : `${templateMessage}\n${formatMessage(
@@ -940,7 +928,7 @@ export const Whatsapp = (props) => {
         channel={WHATSAPP}
         content={{ templateMsg }}
         whatsappContentLen={
-          isEditFlow ? updatedSmsEditor.join('').length - 1 : templateMessage.length
+          isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length
         }
         whatsappAccountName={accountName}
       />