@capillarytech/creatives-library 7.12.40 → 7.12.42

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -4,11 +4,22 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { Creatives } from '../index';
 import mockdata from '../../mockdata';
 
-const { whatsappTemplates, rcsTemplates, whatsappEditTemplateData, rcsEditTemplateData } = mockdata;
+const {
+  whatsappTemplates,
+  rcsTemplates,
+  whatsappGetCreativeData,
+  whatsappGetTemplateData,
+  rcsEditTemplateData,
+  whatsappGetCreativeData2,
+} = mockdata;
 
-jest.mock("../../../v2Components/FormBuilder", () => ({
+jest.mock('../../../v2Components/FormBuilder', () => ({
   __esModule: true,
-  default: (props) => <div className="FormBuilder-mock" {...props}>FormBuilder</div>,
+  default: (props) => (
+    <div className="FormBuilder-mock" {...props}>
+      FormBuilder
+    </div>
+  ),
 }));
 
 describe('Test SlideBoxContent container', () => {
@@ -29,17 +40,24 @@ describe('Test SlideBoxContent container', () => {
         templateData={templateData}
         handleCloseCreatives={handleCloseCreatives}
         getCreativesData={getCreativesData}
-      />
+      />,
     );
   };
 
   it('Should render correct component for whatsapp channel create mode', () => {
-    renderFunction("WHATSAPP", "createTemplate", whatsappTemplates, { mode: "create" });
+    renderFunction('WHATSAPP', 'createTemplate', whatsappTemplates, {
+      mode: 'create',
+    });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Should render correct component for whatsapp channel edit mode', () => {
-    renderFunction("WHATSAPP", "editTemplate", whatsappTemplates, whatsappEditTemplateData);
+    renderFunction(
+      'WHATSAPP',
+      'editTemplate',
+      whatsappTemplates,
+      whatsappGetTemplateData,
+    );
     renderedComponent.instance().onEditTemplate();
     renderedComponent.find('CapSlideBox').props().content.props.handleClose();
     expect(renderedComponent).toMatchSnapshot();
@@ -48,23 +66,38 @@ describe('Test SlideBoxContent container', () => {
   });
 
   it('Text getCreatives data for whatsapp', () => {
-    renderFunction("WHATSAPP", "editTemplate", whatsappTemplates, whatsappEditTemplateData);
+    console.log('abcRcb');
+    renderFunction(
+      'WHATSAPP',
+      'editTemplate',
+      whatsappTemplates,
+      whatsappGetCreativeData,
+    );
     renderedComponent.instance().onEditTemplate();
-    renderedComponent.find('CapSlideBox').props().content.props.getFormData(whatsappEditTemplateData);
-    expect(getCreativesData).toHaveBeenCalledTimes(1);
-    expect(getCreativesData).toHaveBeenCalledWith({ channel: "WHATSAPP" });
+    renderedComponent
+      .find('CapSlideBox')
+      .props()
+      .content.props.getFormData(whatsappGetCreativeData);
+    renderedComponent
+      .find('CapSlideBox')
+      .props()
+      .content.props.getFormData(whatsappGetCreativeData2);
+    expect(getCreativesData).toHaveBeenCalledTimes(2);
   });
 
   it('Should render correct component for rcs channel create mode', () => {
-    renderFunction("RCS", "createTemplate", rcsTemplates, { mode: "create" });
+    renderFunction('RCS', 'createTemplate', rcsTemplates, { mode: 'create' });
     expect(renderedComponent).toMatchSnapshot();
   });
 
   it('Text getCreatives data for rcs', () => {
-    renderFunction("RCS", "editTemplate", rcsTemplates, rcsEditTemplateData);
+    renderFunction('RCS', 'editTemplate', rcsTemplates, rcsEditTemplateData);
     renderedComponent.instance().onEditTemplate();
-    renderedComponent.find('CapSlideBox').props().content.props.getFormData(rcsEditTemplateData);
+    renderedComponent
+      .find('CapSlideBox')
+      .props()
+      .content.props.getFormData(rcsEditTemplateData);
     expect(getCreativesData).toHaveBeenCalledTimes(1);
-    expect(getCreativesData).toHaveBeenCalledWith({ channel: "RCS" });
+    expect(getCreativesData).toHaveBeenCalledWith({ channel: 'RCS' });
   });
 });

package/v2Containers/Whatsapp/constants.js

@@ -128,20 +128,23 @@ export const WHATSAPP_MEDIA_TYPES = {
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
 };
-
+export const NONE = 'NONE';
+export const CTA = 'CTA';
+export const QUICK_REPLY = 'QUICK_REPLY';
 export const WHATSAPP_BUTTON_TYPES = {
-  NONE: 'NONE',
-  CTA: 'CTA',
-  QUICK_REPLY: 'QUICK_REPLY',
+  NONE,
+  CTA,
+  QUICK_REPLY,
 };
-
+export const PHONE_NUMBER = 'PHONE_NUMBER';
+export const STATIC_URL = 'STATIC_URL';
 export const INITIAL_CTA_DATA = [
   {
     index: 0,
-    ctaType: 'PHONE_NUMBER',
+    ctaType: PHONE_NUMBER,
     text: '',
     phone_number: '',
-    urlType: 'STATIC_URL',
+    urlType: STATIC_URL,
     url: '',
     isSaved: false,
   },

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,23 @@ 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 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);
-    if (msg.match(unsubscribePresent)?.length > 0) {
-      //removing Click {{unsubscribe}} to unsubscribe
+    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 last var added for Click {{unsubscribe}} 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();
       }
@@ -532,41 +532,46 @@ export const Whatsapp = (props) => {
     setTemplateMessageError(error);
   };
 
-  const renderUnsubscribeText = () => (
-    <>
-      <CapColumn span={12}>
-        <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}
-        >
-          <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 computeLength = () => {
+  const computeTextLength = () => {
     let whatsappContentLen = 0;
     whatsappContentLen = isEditFlow
       ? updatedSmsEditor.join('').length
@@ -579,7 +584,7 @@ export const Whatsapp = (props) => {
   const renderMessageLength = () => (
     <CapHeading type="label1" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
-        currentLength: computeLength(),
+        currentLength: computeTextLength(),
         maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
       })}
     </CapHeading>
@@ -604,6 +609,7 @@ export const Whatsapp = (props) => {
         }
       />
       <CapRadioGroup
+        disabled={isEditFlow}
         options={buttonRadioOptions || []}
         value={buttonType}
         onChange={onChangeButtonType}
@@ -729,7 +735,7 @@ export const Whatsapp = (props) => {
 
   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,
@@ -836,11 +842,24 @@ export const Whatsapp = (props) => {
     if (templateMessage.trim() === '' || templateMessageError) {
       return true;
     }
-    if (buttonType === WHATSAPP_BUTTON_TYPES.CTA) {
-      return !ctaData.every((i) => i.isSaved === true);
+   //cta
+   if (buttonType === WHATSAPP_BUTTON_TYPES.CTA) {
+    if (ctaData.length === 1 && ctaData[0].isSaved) {
+      //if button type is cta and 1st button is saved
+      return false;
+    } else if (
+      ctaData.length === 2 &&
+      ctaData[0].isSaved &&
+      ctaData[1].isSaved
+    ) {
+      //if button type is cta and 2nd button is saved
+      return false;
     }
-    return false;
-  };
+    //if button type is cta and there are no buttons saved
+    return true;
+  }
+  return false;
+};
 
   const createModeContent = (
     <>
@@ -1155,6 +1174,13 @@ export const Whatsapp = (props) => {
 
       {renderMessageLength()}
       {isTagValidationError && tagValidationErrorMessage()}
+      {computeTextLength() > TEMPLATE_MESSAGE_MAX_LENGTH ? (
+        <CapError>
+          {formatMessage(messages.templateMessageLengthError)}
+        </CapError>
+      ) : (
+        ''
+      )}
 
       <CapTooltip
         placement="bottom"
@@ -1189,7 +1215,7 @@ export const Whatsapp = (props) => {
             ctaData,
           }),
         }}
-        whatsappContentLen={computeLength()}
+        whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}
       />
     );
@@ -1197,7 +1223,8 @@ export const Whatsapp = (props) => {
 
   const isEditDoneDisabled = () =>
     isTagValidationError ||
-    Object.values(varMap).some((inputValue) => inputValue === '');
+    Object.values(varMap).some((inputValue) => inputValue === '') ||
+    computeTextLength() > TEMPLATE_MESSAGE_MAX_LENGTH;
   return (
     <CapSpin spinning={spin}>
       <CapRow className="cap-whatsapp-creatives">

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',