@capillarytech/creatives-library 7.11.3 → 7.11.5

package/package.json

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

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} />

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,
       })}
@@ -515,7 +515,7 @@ export const Whatsapp = (props) => {
 
   const getPayloadContent = () => (
     (isEditFlow && !isFullMode)
-    ? `${updatedSmsEditor.join('')} ${formatMessage(
+    ? `${updatedSmsEditor.join('')}\n${formatMessage(
         messages.templateMessageUnsubscribeText,
       )}`
     : `${templateMessage}\n${formatMessage(
@@ -940,7 +940,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}
       />

package/v2Containers/Whatsapp/utils.js

@@ -5,6 +5,7 @@ import {
     STATUS_OPTIONS,
     CATEGORY_OPTIONS,
     WHATSAPP_STATUSES,
+    UNSUBSCRIBE_TEXT_LENGTH
 } from '../Whatsapp/constants';
 
 export const getWhatsappContent = (template, isPreview) => {
@@ -28,16 +29,19 @@ export const getWhatsappContent = (template, isPreview) => {
         `${validVarArr[validVarArr.length - 1]}`,
         '{{unsubscribe}}',
     );
-    return (
-        <>
-          <CapLabel type={ isPreview ? "label5" : "label9" }>
-            {text.slice(0, text.length - 37)}
-          </CapLabel>
-          <CapLabel type={ isPreview ? "label11" : "label1" }>
-            {text.slice(-37)}
-          </CapLabel>
-        </>
-    );
+    return {
+        templateMsg: (
+            <>
+              <CapLabel type={ isPreview ? "label5" : "label9" }>
+                {text.slice(0, text.length - UNSUBSCRIBE_TEXT_LENGTH)}
+              </CapLabel>
+              <CapLabel type={ isPreview ? "label11" : "label1" }>
+                {text.slice(-UNSUBSCRIBE_TEXT_LENGTH)}
+              </CapLabel>
+            </>
+        ),
+        charCount: text?.length - 1,
+    };
 }
 
 export const getWhatsappCategory = (category) => {