@capillarytech/creatives-library 7.12.32 → 7.12.33

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

@@ -4,7 +4,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { Templates } from '../index';
 import mockdata from '../../mockdata';
 
-const { Templates: TemplatesProp, getCreativesParamsOutput } = mockdata;
+const { whatsappTemplates: TemplatesProp, getCreativesParamsOutput } = mockdata;
 
 jest.mock("../../CreativesContainer", () => ({
   __esModule: true,
@@ -16,6 +16,7 @@ describe('Test Templates container', () => {
   const getWeCrmAccounts = jest.fn();
   const setChannelAccount = jest.fn();
   const getAllTemplates = jest.fn();
+  const getUserList = jest.fn();
   let renderedComponent;
 
   beforeEach(() => {
@@ -33,6 +34,7 @@ describe('Test Templates container', () => {
           getWeCrmAccounts,
           setChannelAccount,
           getAllTemplates,
+          getUserList,
         }}
         location={{
           pathname: "/whatsapp",
@@ -43,6 +45,9 @@ describe('Test Templates container', () => {
           duplicateTemplateInProgress: false,
         }}
         isFullMode={isFullMode}
+        intl={{
+          formatMessage: () => {},
+        }}
       />
     );
   };
@@ -92,16 +97,15 @@ describe('Test Templates container', () => {
     renderFunction();
     renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
     renderedComponent.setState({selectedWhatsappStatus: 'approved'});
-    //remove status filter
-    
     getFilterContainer().find('CapTag').props().onClose();
     expect(renderedComponent).toMatchSnapshot();
   });
 
 
-  it('Test removing all whatsapp filters', () => {
+  it('Test removing all whatsapp filterss', () => {
     renderFunction();
     renderedComponent.setProps({TemplatesList: TemplatesProp.templates});
+
     renderedComponent.setState({selectedWhatsappStatus: 'approved'});
     renderedComponent.setState({selectedWhatsappCategory: 'ALERT_UPDATE'});
     expect(renderedComponent).toMatchSnapshot();

package/v2Containers/Whatsapp/constants.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import messages from './messages';
 import {
   CAP_ORANGE,
   CAP_PURPLE02,
@@ -9,7 +8,7 @@ import {
   CAP_GREEN01,
   CAP_GREEN02,
 } from '@capillarytech/cap-ui-library/styled/variables';
-
+import messages from './messages';
 export const UNSUBSCRIBE_TEXT_LENGTH = 36;
 export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
 export const WHATSAPP = 'WHATSAPP';
@@ -130,6 +129,24 @@ export const WHATSAPP_MEDIA_TYPES = {
   VIDEO: 'VIDEO',
 };
 
+export const WHATSAPP_BUTTON_TYPES = {
+  NONE: 'NONE',
+  CTA: 'CTA',
+  QUICK_REPLY: 'QUICK_REPLY',
+};
+
+export const INITIAL_CTA_DATA = [
+  {
+    index: 0,
+    ctaType: 'PHONE_NUMBER',
+    text: '',
+    phone_number: '',
+    urlType: 'STATIC_URL',
+    url: '',
+    isSaved: false,
+  },
+];
+
 export const LANGUAGE_OPTIONS = [
   {
     value: 'af',
@@ -273,7 +290,7 @@ export const LANGUAGE_OPTIONS = [
     value: 'kk',
     label: <FormattedMessage {...messages.kazakh} />,
   },
-   // commenting this as twilio api is throwing some error on this lang
+  // commenting this as twilio api is throwing some error on this lang
   // will uncomment once this issue will be resolved by twilio api
   // {
   //   value: 'rw_RW',
@@ -283,7 +300,7 @@ export const LANGUAGE_OPTIONS = [
     value: 'ko',
     label: <FormattedMessage {...messages.korean} />,
   },
-   // commenting this as twilio api is throwing some error on this lang
+  // commenting this as twilio api is throwing some error on this lang
   // will uncomment once this issue will be resolved by twilio api
   // {
   //   value: 'ky_KG',
@@ -309,7 +326,7 @@ export const LANGUAGE_OPTIONS = [
     value: 'ms',
     label: <FormattedMessage {...messages.malay} />,
   },
-   // commenting this as twilio api is throwing some error on this lang
+  // commenting this as twilio api is throwing some error on this lang
   // will uncomment once this issue will be resolved by twilio api
   // {
   //   value: 'ml',

package/v2Containers/Whatsapp/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /* eslint-disable no-undef */
 import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
@@ -50,6 +51,8 @@ import {
   ALL,
   LIBRARY,
   WHATSAPP_MEDIA_TYPES,
+  WHATSAPP_BUTTON_TYPES,
+  INITIAL_CTA_DATA,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -58,7 +61,12 @@ import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
-
+import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
+import {
+  PHONE_NUMBER,
+  STATIC_URL,
+  WEBSITE,
+} from '../../v2Components/CapWhatsappCTA/constants';
 let varMap = {};
 let editContent = {};
 let tagValidationResponse = {};
@@ -112,6 +120,9 @@ export const Whatsapp = (props) => {
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
   const [isTagValidationError, updateIsTagValidationError] = useState(false);
+  //buttons
+  const [buttonType, setButtonType] = useState(WHATSAPP_BUTTON_TYPES.NONE);
+  const [ctaData, setCtadata] = useState(INITIAL_CTA_DATA);
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
 
@@ -178,11 +189,46 @@ export const Whatsapp = (props) => {
         status = WHATSAPP_STATUSES.unsubmitted,
         rejection_reason = null,
         languages = [],
+        buttonType: btnType = WHATSAPP_BUTTON_TYPES.NONE,
+        buttons = [],
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
       setTemplateRejectionReason(rejection_reason);
       setTemplateLanguage(languages[0]?.language);
+      setButtonType(btnType);
+      if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
+        setCtadata(
+          buttons.map((cta) => {
+            const {
+              index,
+              type,
+              text,
+              phone_number = '',
+              url = '',
+            } = cta || {};
+            const obj = {
+              index,
+              text,
+              phone_number,
+              url,
+              urlType: STATIC_URL,
+              isSaved: true,
+            };
+            obj.phone_number = obj.phone_number.replace('+', '');
+            if (type === PHONE_NUMBER) {
+              return {
+                ...obj,
+                ctaType: type,
+              };
+            }
+            return {
+              ...obj,
+              ctaType: WEBSITE,
+            };
+          }),
+        );
+      }
       computeTempMsgArray();
     }
   }, [editData.templateDetails || templateData]);
@@ -367,7 +413,7 @@ export const Whatsapp = (props) => {
     {
       value: WHATSAPP_MEDIA_TYPES.IMAGE,
       label: (
-        <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
+        <CapTooltip title={formatMessage(messages.disabledFeatureTooltip)}>
           {formatMessage(messages.mediaImage)}
         </CapTooltip>
       ),
@@ -376,7 +422,7 @@ export const Whatsapp = (props) => {
     {
       value: WHATSAPP_MEDIA_TYPES.VIDEO,
       label: (
-        <CapTooltip title={formatMessage(messages.disabledMediaTooltip)}>
+        <CapTooltip title={formatMessage(messages.disabledFeatureTooltip)}>
           {formatMessage(messages.mediaVideo)}
         </CapTooltip>
       ),
@@ -384,6 +430,80 @@ export const Whatsapp = (props) => {
     },
   ];
 
+  const onChangeButtonType = ({ target: { value } }) => {
+    setButtonType(value);
+    setCtadata(INITIAL_CTA_DATA);
+  };
+
+  const updateHandler = (data, index, full) => {
+    if (full) {
+      setCtadata(data);
+    } else {
+      setCtadata((prevState) => {
+        const clonedCta = cloneDeep(prevState);
+        clonedCta[index] = data;
+        return clonedCta;
+      });
+    }
+  };
+
+  const deleteHandler = (index) => {
+    setCtadata((prevState) => {
+      const clonedCta = cloneDeep(prevState);
+      const filteredCta = clonedCta.filter((i) => i.index !== index);
+      if(filteredCta.length === 1){
+        filteredCta[0].index = 0;
+      }
+      return filteredCta;
+    });
+  };
+
+  const buttonRadioOptions = [
+    {
+      value: WHATSAPP_BUTTON_TYPES.NONE,
+      label: formatMessage(messages.btnTypeNone),
+    },
+    {
+      value: WHATSAPP_BUTTON_TYPES.CTA,
+      label: (
+        <>
+          <div className="whatsapp-button">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnTypeCTA)}
+            </CapHeading>
+            <CapLabel className="whatsapp-cta-desc">
+              {formatMessage(messages.ctaDesc)}
+            </CapLabel>
+          </div>
+          {buttonType === WHATSAPP_BUTTON_TYPES.CTA && (
+            <CapWhatsappCTA
+              ctaData={ctaData}
+              updateHandler={updateHandler}
+              deleteHandler={deleteHandler}
+            />
+          )}
+        </>
+      ),
+    },
+    {
+      value: WHATSAPP_BUTTON_TYPES.QUICK_REPLY,
+      label: (
+        <CapTooltip
+          placement="bottom"
+          title={!isEditFlow && formatMessage(messages.disabledFeatureTooltip)}
+        >
+          <div className="whatsapp-button">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnTypeQuickReply)}
+            </CapHeading>
+            <CapLabel>{formatMessage(messages.quickReplyDesc)}</CapLabel>
+          </div>
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
+  ];
+
   const renderLabel = (value) => (
     <CapHeading type="h4" className="whatsapp-render-heading">
       {formatMessage(messages[value])}
@@ -414,7 +534,7 @@ export const Whatsapp = (props) => {
 
   //used by create and edit
   const renderMessageLength = () => (
-    <CapHeading type="h6" className="whatsapp-render-message-length">
+    <CapHeading type="label1" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
         currentLength: isEditFlow
           ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH
@@ -424,6 +544,35 @@ export const Whatsapp = (props) => {
     </CapHeading>
   );
 
+  const renderButtonsSection = () => (
+    <>
+      <CapHeader
+        className="whatsapp-render-heading"
+        title={
+          <CapRow type="flex">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnLabel)}
+            </CapHeading>
+            <CapHeading className="whatsapp-optional-label">
+              {formatMessage(messages.optional)}
+            </CapHeading>
+          </CapRow>
+        }
+        description={
+          <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
+        }
+      />
+      <CapRadioGroup
+        options={buttonRadioOptions || []}
+        value={buttonType}
+        onChange={onChangeButtonType}
+        className={`whatsapp-btn-radio-group ${
+          isEditFlow ? 'whatsapp-btn-radio-edit' : ''
+        }`}
+      />
+    </>
+  );
+
   const onTemplateNameChange = ({ target: { value } }) => {
     setTemplateName(value);
     templateNameErrorHandler(value);
@@ -513,15 +662,34 @@ export const Whatsapp = (props) => {
     }
     return errorMessage;
   };
-
+  // prettier-ignore
   const getPayloadContent = () =>
     isEditFlow && !isFullMode
       ? `${updatedSmsEditor.join('')}\n${formatMessage(
           messages.templateMessageUnsubscribeText,
         )}`
       : `${templateMessage}\n${formatMessage(messages.modifiedUnsubscribeText, {
-          value: `{{${addedVarCount + 1}}}`,
-        })}`;
+        value: `{{${addedVarCount + 1}}}`,
+      })}`;
+
+  const getCtaPayload = () =>
+    ctaData.map((cta) => {
+      const { index, ctaType, text, phone_number, urlType, url } = cta || {};
+      if (ctaType === PHONE_NUMBER) {
+        return {
+          index,
+          type: ctaType,
+          text,
+          phone_number: `+${phone_number}`,
+        };
+      }
+      return {
+        index,
+        type: urlType,
+        text,
+        url,
+      };
+    });
 
   const createPayload = () => ({
     name: templateName,
@@ -536,6 +704,10 @@ export const Whatsapp = (props) => {
                 content: getPayloadContent(),
               },
             ],
+            ...(buttonType === WHATSAPP_BUTTON_TYPES.CTA && {
+              buttonType,
+              buttons: getCtaPayload(),
+            }),
             mediaType: WHATSAPP_MEDIA_TYPES.TEXT,
             varMapped: !isFullMode ? varMap : {},
             templateEditor: !isFullMode && tempMsgArray.join(''),
@@ -609,6 +781,9 @@ export const Whatsapp = (props) => {
     if (templateMessage.trim() === '' || templateMessageError) {
       return true;
     }
+    if (buttonType === WHATSAPP_BUTTON_TYPES.CTA) {
+      return !ctaData.every((i) => i.isSaved === true);
+    }
     return false;
   };
 
@@ -659,7 +834,7 @@ export const Whatsapp = (props) => {
         onChange={onTemplateLanguageChange}
         value={templateLanguage}
       />
-      {/* template mdeia type */}
+      {/* template media type */}
       {renderLabel('mediaLabel')}
       <CapRadioGroup
         options={mediaRadioOptions || []}
@@ -719,6 +894,7 @@ export const Whatsapp = (props) => {
         {renderUnsubscribeText()}
       </CapRow>
       {renderMessageLength()}
+      {renderButtonsSection()}
     </>
   );
   //create methods end
@@ -923,6 +1099,15 @@ export const Whatsapp = (props) => {
 
       {renderMessageLength()}
       {isTagValidationError && tagValidationErrorMessage()}
+
+      <CapTooltip
+        placement="bottom"
+        title={formatMessage(messages.disabledButtonsSection)}
+      >
+        <CapRow className="whatsapp-edit-disabled">
+          {renderButtonsSection()}
+        </CapRow>
+      </CapTooltip>
     </>
   );
   //edit methods end
@@ -942,7 +1127,12 @@ export const Whatsapp = (props) => {
     return (
       <TemplatePreview
         channel={WHATSAPP}
-        content={{ templateMsg }}
+        content={{
+          templateMsg,
+          ...(buttonType === WHATSAPP_BUTTON_TYPES.CTA && {
+            ctaData,
+          }),
+        }}
         whatsappContentLen={
           isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length
         }

package/v2Containers/Whatsapp/index.scss

@@ -5,53 +5,66 @@
     margin-top: $CAP_SPACE_16;
     margin-bottom: 6px;
   }
+
   .whatsapp-template-name-desc {
     margin-bottom: 6px;
   }
+
   .whatsapp-create-render-unsubscribe-text {
     color: $FONT_COLOR_02;
     margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
   }
+
   .whatsapp-edit-render-unsubscribe-text {
     color: $FONT_COLOR_02;
   }
+
   .whatsapp-render-message-length {
     text-align: right;
   }
+
   .whatsapp-create-template-message-input {
     background-color: $CAP_G10;
     padding-top: $CAP_SPACE_16;
   }
+
   .whatsapp-template-message-error {
     margin-left: $CAP_SPACE_16;
     margin-right: $CAP_SPACE_16;
   }
+
   .whatsapp-scroll-div {
     margin-bottom: 250px;
   }
+
   .whatsapp-edit-alert-margin {
     margin-top: 46px;
   }
+
   .whatsapp-edit-template-message-input {
     background-color: $CAP_G10;
     padding: 0 $CAP_SPACE_16;
   }
+
   .whatsapp-edit-template-message-heading {
     margin-top: $CAP_SPACE_16;
     margin-bottom: $CAP_SPACE_08;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   .whatsapp-edit-disabled {
     cursor: not-allowed;
     opacity: 0.4;
     overflow-wrap: anywhere;
   }
+
   #whatsapp-create-template-message-input {
     margin-left: $CAP_SPACE_16;
     margin-right: $CAP_SPACE_16;
     width: 95%;
   }
+
   #select-whatsapp-category,
   #select-whatsapp-language {
     width: 100%;
@@ -62,4 +75,32 @@
       position: fixed;
     }
   }
-}
+
+  .whatsapp-btn-radio-group {
+    display: grid;
+  }
+
+  .whatsapp-btn-radio-group>.ant-radio-wrapper {
+    line-height: 45px;
+    font-weight: 500;
+  }
+
+  .whatsapp-btn-radio-edit>label.ant-radio-wrapper.ant-radio-wrapper-disabled {
+    margin-top: -32px;
+  }
+
+  .whatsapp-optional-label {
+    margin-left: 8px;
+    color: $FONT_COLOR_03;
+    font-weight: normal;
+    font-size: 12px;
+  }
+
+  .whatsapp-button {
+    display: inline-grid;
+  }
+
+  .whatsapp-cta-desc {
+    margin-bottom: 17px;
+  }
+}

package/v2Containers/Whatsapp/messages.js

@@ -90,8 +90,8 @@ export default defineMessages({
     id: `${prefix}.mediaVideo`,
     defaultMessage: 'Video',
   },
-  disabledMediaTooltip: {
-    id: `${prefix}.disabledMediaTooltip`,
+  disabledFeatureTooltip: {
+    id: `${prefix}.disabledFeatureTooltip`,
     defaultMessage: 'Not yet enabled. Coming soon!',
   },
   templateMessageLabel: {
@@ -228,6 +228,43 @@ export default defineMessages({
     id: `${prefix}.useTwoBracketsOnly`,
     defaultMessage: 'Use two brackets on each side to declare a variable',
   },
+  btnLabel: {
+    id: `${prefix}.btnLabel`,
+    defaultMessage: 'Buttons',
+  },
+  btnDesc: {
+    id: `${prefix}.btnDesc`,
+    defaultMessage: 'These will be show clickable buttons below your message.',
+  },
+  btnTypeNone: {
+    id: `${prefix}.btnTypeNone`,
+    defaultMessage: 'None',
+  },
+  btnTypeCTA: {
+    id: `${prefix}.btnTypeCTA`,
+    defaultMessage: 'Call to action',
+  },
+  ctaDesc: {
+    id: `${prefix}.ctaDesc`,
+    defaultMessage: 'Create up to 2 buttons that let customers respond to your messages or take action.',
+  },
+  btnTypeQuickReply: {
+    id: `${prefix}.btnTypeQuickReply`,
+    defaultMessage: 'Quik reply',
+  },
+  quickReplyDesc: {
+    id: `${prefix}.quickReplyDesc`,
+    defaultMessage: 'Create up to 3 buttons that let customers respond to your messages or take action.',
+  },
+  optional: {
+    id: `${prefix}.optional`,
+    defaultMessage: '(Optional)',
+  },
+  disabledButtonsSection: {
+    id: `${prefix}.disabledButtonsSection`,
+    defaultMessage: 'Buttons are not editable once template is sent for approval',
+  },
+
   afrikaans: {
     id: `${prefix}.afrikaans`,
     defaultMessage: 'Afrikaans',