@capillarytech/creatives-library 7.12.39 → 7.12.40

package/v2Containers/Whatsapp/index.js

@@ -239,17 +239,21 @@ export const Whatsapp = (props) => {
   const computeTempMsgArray = () => {
     let msg = get(editContent, `languages[0].content`, '');
     const validVarArr = msg.match(validVarRegex) || [];
+    const unsubscribePresent = /Click {{([1-9]|1[0-9])}} to unsubscribe/g;
     const templateMessageArray = [];
     //removing $'' which was added for twilio enter handling
     // msg = msg.slice(2, -1);
-    //removing Click {{unsubscribe}} to unsubscribe
-    msg = msg.replace(
-      `\nClick ${validVarArr[validVarArr.length - 1]} to unsubscribe`,
-      '',
-    );
-    //removing last var added for Click {{unsubscribe}} to unsubscribe
-    if (isFullMode) {
-      validVarArr.pop();
+    if (msg.match(unsubscribePresent)?.length > 0) {
+      //removing Click {{unsubscribe}} to unsubscribe
+      msg = msg.replace(
+        `\nClick ${validVarArr[validVarArr.length - 1]} to unsubscribe`,
+        '',
+      );
+      //removing last var added for Click {{unsubscribe}} to unsubscribe
+      if (isFullMode) {
+        validVarArr.pop();
+      }
+      setUnsubscribeRequired(true);
     }
     while (msg.length !== 0) {
       //converting content string to an array split at var
@@ -524,18 +528,26 @@ export const Whatsapp = (props) => {
 
   const unsubscribeHandler = ({ target: { checked } }) => {
     setUnsubscribeRequired(checked);
+    const error = templateMessageErrorHandler(templateMessage);
+    setTemplateMessageError(error);
   };
 
   const renderUnsubscribeText = () => (
     <>
       <CapColumn span={12}>
         <CapCheckbox
-          className={`whatsapp-create-unsubscribe-checkbox ${
-            isEditFlow ? '' : 'whatsapp-create-unsubscribe'
+          className={`whatsapp-unsubscribe-checkbox ${
+            isEditFlow
+              ? 'whatsapp-edit-unsubscribe-checkbox'
+              : 'whatsapp-create-unsubscribe-checkbox'
           }`}
           onChange={unsubscribeHandler}
           checked={unsubscribeRequired}
-          disabled={isEditFlow}
+          disabled={
+            isEditFlow ||
+            templateMessage.length + UNSUBSCRIBE_TEXT_LENGTH >
+              TEMPLATE_MESSAGE_MAX_LENGTH
+          }
           autoFocus={true}
         >
           <CapTooltip
@@ -554,13 +566,20 @@ export const Whatsapp = (props) => {
     </>
   );
 
+  const computeLength = () => {
+    let whatsappContentLen = 0;
+    whatsappContentLen = isEditFlow
+      ? updatedSmsEditor.join('').length
+      : templateMessage.length;
+    whatsappContentLen += unsubscribeRequired ? UNSUBSCRIBE_TEXT_LENGTH : 0;
+    return whatsappContentLen;
+  };
+
   //used by create and edit
   const renderMessageLength = () => (
     <CapHeading type="label1" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
-        currentLength: isEditFlow
-          ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH
-          : templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH,
+        currentLength: computeLength(),
         maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
       })}
     </CapHeading>
@@ -641,7 +660,7 @@ export const Whatsapp = (props) => {
     if (value === '') {
       errorMessage = formatMessage(messages.emptyTemplateMessageErrorMessage);
     } else if (
-      UNSUBSCRIBE_TEXT_LENGTH + value?.length >
+      value?.length + (unsubscribeRequired ? UNSUBSCRIBE_TEXT_LENGTH : 0) >
       TEMPLATE_MESSAGE_MAX_LENGTH
     ) {
       errorMessage = formatMessage(messages.templateMessageLengthError);
@@ -653,7 +672,7 @@ export const Whatsapp = (props) => {
       const invalidVarArr = value.match(invalidVarRegex) || [];
       const invalidVarSet = [...new Set(invalidVarArr)];
 
-      const noContentBetweenVars = /}}[^a-zA-Z]*{{/g;
+      const noContentBetweenVars = /}}\s*{{/g;
       const moreThanTwoBrackets = /{{3,}([1-9]|1[0-9])}{3,}/g;
 
       if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
@@ -684,15 +703,29 @@ export const Whatsapp = (props) => {
     }
     return errorMessage;
   };
-  // prettier-ignore
-  const getPayloadContent = () =>
-    isEditFlow && !isFullMode
-      ? `${updatedSmsEditor.join('')}\n${formatMessage(
+
+  const getPayloadContent = () => {
+    if (isEditFlow && !isFullMode) {
+      //campaigns edit flow + unsubscribeRequired
+      if (unsubscribeRequired) {
+        return `${updatedSmsEditor.join('')}\n${formatMessage(
           messages.templateMessageUnsubscribeText,
-        )}`
-      : `${templateMessage}\n${formatMessage(messages.modifiedUnsubscribeText, {
-        value: `{{${addedVarCount + 1}}}`,
-      })}`;
+        )}`;
+      }
+      //campaigns edit flow + unsubscribeNotRequired
+      return updatedSmsEditor.join('');
+    } else if (unsubscribeRequired) {
+      //creatives create and edit flow + unsubscribeRequired
+      return `${templateMessage}\n${formatMessage(
+        messages.modifiedUnsubscribeText,
+        {
+          value: `{{${addedVarCount + 1}}}`,
+        },
+      )}`;
+    }
+    //creatives create and edit flow + unsubscribeNotRequired
+    return templateMessage;
+  };
 
   const getCtaPayload = () =>
     ctaData.map((cta) => {
@@ -1078,6 +1111,7 @@ export const Whatsapp = (props) => {
     }
     return <CapError>{tagError}</CapError>;
   };
+
   const editModeContent = (
     <>
       {templateStatus && (
@@ -1139,9 +1173,11 @@ export const Whatsapp = (props) => {
         <CapLabel type="label5">
           {isEditFlow ? updatedSmsEditor.join('') : templateMessage}
         </CapLabel>
-        <CapLabel type="label5">
-          {formatMessage(messages.templateMessageUnsubscribeText)}
-        </CapLabel>
+        {unsubscribeRequired && (
+          <CapLabel type="label5">
+            {formatMessage(messages.templateMessageUnsubscribeText)}
+          </CapLabel>
+        )}
       </>
     );
     return (
@@ -1153,9 +1189,7 @@ export const Whatsapp = (props) => {
             ctaData,
           }),
         }}
-        whatsappContentLen={
-          isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length
-        }
+        whatsappContentLen={computeLength()}
         whatsappAccountName={accountName}
       />
     );

package/v2Containers/Whatsapp/index.scss

@@ -10,17 +10,21 @@
     margin-bottom: 6px;
   }
 
-  .whatsapp-create-unsubscribe-checkbox {
+  .whatsapp-unsubscribe-checkbox {
     .ant-checkbox-inner {
       height: 16px;
       width: 16px;
     }
   }
 
-  .whatsapp-create-unsubscribe {
+  .whatsapp-create-unsubscribe-checkbox {
     margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
   }
 
+  .whatsapp-edit-unsubscribe-checkbox {
+    margin: $CAP_SPACE_08 0px;
+  }
+
   .whatsapp-render-unsubscribe-text {
     color: $FONT_COLOR_02;
     font-size: 14px;