@capillarytech/creatives-library 7.12.39 → 7.12.41

package/v2Containers/Whatsapp/index.js

@@ -203,13 +203,7 @@ export const Whatsapp = (props) => {
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
-            const {
-              index,
-              type,
-              text,
-              phone_number = '',
-              url = '',
-            } = cta || {};
+            const { index, type, text, phone_number = '', url = '' } = cta;
             const obj = {
               index,
               text,
@@ -239,17 +233,27 @@ export const Whatsapp = (props) => {
   const computeTempMsgArray = () => {
     let msg = get(editContent, `languages[0].content`, '');
     const validVarArr = msg.match(validVarRegex) || [];
+    const unsubscribeRegex1 = /Click {{([1-9]|1[0-9])}} to unsubscribe/g;
+    const unsubscribeRegex2 = /Click {{unsubscribe}} 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(unsubscribeRegex1)?.length > 0 ||
+      msg.match(unsubscribeRegex2)?.length > 0
+    ) {
+      //removing Click  {{([1-9]|1[0-9])}} to unsubscribe
+      msg = msg.replace(
+        `\nClick ${validVarArr[validVarArr.length - 1]} to unsubscribe`,
+        '',
+      );
+      //removing Click {{unsubscribe}} to unsubscribe
+      msg = msg.replace(`\nClick {{unsubscribe}} to unsubscribe`, '');
+      //removing last var added for Click  {{([1-9]|1[0-9])}} to unsubscribe
+      if (isFullMode) {
+        validVarArr.pop();
+      }
+      setUnsubscribeRequired(true);
     }
     while (msg.length !== 0) {
       //converting content string to an array split at var
@@ -524,43 +528,63 @@ 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'
-          }`}
-          onChange={unsubscribeHandler}
-          checked={unsubscribeRequired}
-          disabled={isEditFlow}
-          autoFocus={true}
-        >
-          <CapTooltip
-            placement="bottom"
-            title={
-              !isEditFlow && formatMessage(messages.unsubscribeTextTooltip)
-            }
+  const renderUnsubscribeText = () => {
+    const isDisabled =
+      isEditFlow ||
+      templateMessage.length + UNSUBSCRIBE_TEXT_LENGTH >
+        TEMPLATE_MESSAGE_MAX_LENGTH;
+    return (
+      <>
+        <CapColumn span={12}>
+          <CapCheckbox
+            className={`whatsapp-unsubscribe-checkbox ${
+              isEditFlow
+                ? 'whatsapp-edit-unsubscribe-checkbox'
+                : 'whatsapp-create-unsubscribe-checkbox'
+            }`}
+            onChange={unsubscribeHandler}
+            checked={unsubscribeRequired}
+            disabled={isDisabled}
+            autoFocus={true}
           >
-            <span className="whatsapp-render-unsubscribe-text">
-              {formatMessage(messages.templateMessageUnsubscribeText)}
-            </span>
-          </CapTooltip>
-        </CapCheckbox>
-      </CapColumn>
-      <CapColumn span={12}></CapColumn>
-    </>
-  );
+            <CapTooltip
+              placement="bottom"
+              title={
+                isDisabled &&
+                (isEditFlow
+                  ? formatMessage(messages.unsubscribeTextTooltipEditFlow)
+                  : formatMessage(messages.unsubscribeTextTooltipCreateFlow))
+              }
+            >
+              <span className="whatsapp-render-unsubscribe-text">
+                {formatMessage(messages.templateMessageUnsubscribeText)}
+              </span>
+            </CapTooltip>
+          </CapCheckbox>
+        </CapColumn>
+        <CapColumn span={12}></CapColumn>
+      </>
+    );
+  };
+
+  const computeTextLength = () => {
+    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: computeTextLength(),
         maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
       })}
     </CapHeading>
@@ -641,7 +665,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 +677,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,19 +708,33 @@ 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) => {
-      const { index, ctaType, text, phone_number, urlType, url } = cta || {};
+      const { index, ctaType, text, phone_number, urlType, url } = cta;
       if (ctaType === PHONE_NUMBER) {
         return {
           index,
@@ -1078,6 +1116,7 @@ export const Whatsapp = (props) => {
     }
     return <CapError>{tagError}</CapError>;
   };
+
   const editModeContent = (
     <>
       {templateStatus && (
@@ -1139,9 +1178,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 +1194,7 @@ export const Whatsapp = (props) => {
             ctaData,
           }),
         }}
-        whatsappContentLen={
-          isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length
-        }
+        whatsappContentLen={computeTextLength()}
         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;

package/v2Containers/Whatsapp/messages.js

@@ -127,10 +127,14 @@ export default defineMessages({
     id: `${prefix}.modifiedUnsubscribeText`,
     defaultMessage: 'Click {value} to unsubscribe',
   },
-  unsubscribeTextTooltip: {
-    id: `${prefix}.unsubscribeTextTooltip`,
+  unsubscribeTextTooltipEditFlow: {
+    id: `${prefix}.unsubscribeTextTooltipEditFlow`,
     defaultMessage: 'This is non-editable',
   },
+  unsubscribeTextTooltipCreateFlow: {
+    id: `${prefix}.unsubscribeTextTooltipCreateFlow`,
+    defaultMessage: 'To enable the checkbox, reduce the message character count to 988',
+  },
   repetativeVars: {
     id: `${prefix}.repetativeVars`,
     defaultMessage: 'Variables cannot be repeated',