@capillarytech/creatives-library 7.12.38 → 7.12.40

package/v2Containers/Whatsapp/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-boolean-value */
 /* eslint-disable camelcase */
 /* eslint-disable no-undef */
 import React, { useState, useEffect } from 'react';
@@ -21,6 +22,7 @@ import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import moment from 'moment';
 import {
   CAP_SPACE_04,
@@ -109,6 +111,7 @@ export const Whatsapp = (props) => {
   const [accessToken, setAccessToken] = useState('');
   const [accountName, setAccountName] = useState('');
   const [spin, setSpin] = useState(false);
+  const [unsubscribeRequired, setUnsubscribeRequired] = useState(false);
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
@@ -236,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
@@ -519,35 +526,60 @@ export const Whatsapp = (props) => {
     </CapHeading>
   );
 
+  const unsubscribeHandler = ({ target: { checked } }) => {
+    setUnsubscribeRequired(checked);
+    const error = templateMessageErrorHandler(templateMessage);
+    setTemplateMessageError(error);
+  };
+
   const renderUnsubscribeText = () => (
     <>
       <CapColumn span={12}>
-        <CapTooltip
-          placement="bottom"
-          title={!isEditFlow && formatMessage(messages.unsubscribeTextTooltip)}
+        <CapCheckbox
+          className={`whatsapp-unsubscribe-checkbox ${
+            isEditFlow
+              ? 'whatsapp-edit-unsubscribe-checkbox'
+              : 'whatsapp-create-unsubscribe-checkbox'
+          }`}
+          onChange={unsubscribeHandler}
+          checked={unsubscribeRequired}
+          disabled={
+            isEditFlow ||
+            templateMessage.length + UNSUBSCRIBE_TEXT_LENGTH >
+              TEMPLATE_MESSAGE_MAX_LENGTH
+          }
+          autoFocus={true}
         >
-          <CapHeading
-            className={
-              !isEditFlow
-                ? 'whatsapp-create-render-unsubscribe-text'
-                : 'whatsapp-edit-render-unsubscribe-text'
+          <CapTooltip
+            placement="bottom"
+            title={
+              !isEditFlow && formatMessage(messages.unsubscribeTextTooltip)
             }
           >
-            {formatMessage(messages.templateMessageUnsubscribeText)}
-          </CapHeading>
-        </CapTooltip>
+            <span className="whatsapp-render-unsubscribe-text">
+              {formatMessage(messages.templateMessageUnsubscribeText)}
+            </span>
+          </CapTooltip>
+        </CapCheckbox>
       </CapColumn>
       <CapColumn span={12}></CapColumn>
     </>
   );
 
+  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>
@@ -628,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);
@@ -640,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) {
@@ -671,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) => {
@@ -1065,6 +1111,7 @@ export const Whatsapp = (props) => {
     }
     return <CapError>{tagError}</CapError>;
   };
+
   const editModeContent = (
     <>
       {templateStatus && (
@@ -1113,9 +1160,7 @@ export const Whatsapp = (props) => {
         placement="bottom"
         title={formatMessage(messages.disabledButtonsSection)}
       >
-        <CapRow>
-          {renderButtonsSection()}
-        </CapRow>
+        <CapRow>{renderButtonsSection()}</CapRow>
       </CapTooltip>
     </>
   );
@@ -1128,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 (
@@ -1142,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,13 +10,27 @@
     margin-bottom: 6px;
   }
 
-  .whatsapp-create-render-unsubscribe-text {
-    color: $FONT_COLOR_02;
+  .whatsapp-unsubscribe-checkbox {
+    .ant-checkbox-inner {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  .whatsapp-create-unsubscribe-checkbox {
     margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
   }
 
-  .whatsapp-edit-render-unsubscribe-text {
+  .whatsapp-edit-unsubscribe-checkbox {
+    margin: $CAP_SPACE_08 0px;
+  }
+
+  .whatsapp-render-unsubscribe-text {
     color: $FONT_COLOR_02;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 24px;
+    margin-left: -8px;
   }
 
   .whatsapp-render-message-length {