@capillarytech/creatives-library 7.12.51 → 7.12.53

package/v2Containers/Whatsapp/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable camelcase */
 /* eslint-disable no-undef */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -43,7 +43,8 @@ import {
   UNSUBSCRIBE_TEXT_LENGTH,
   TEMPLATE_MESSAGE_MAX_LENGTH,
   WHATSAPP,
-  CATEGORY_OPTIONS,
+  TWILIO_CATEGORY_OPTIONS,
+  KARIX_CATEGORY_OPTIONS,
   LANGUAGE_OPTIONS,
   WHATSAPP_STATUSES,
   TAG,
@@ -55,14 +56,19 @@ import {
   WHATSAPP_MEDIA_TYPES,
   WHATSAPP_BUTTON_TYPES,
   INITIAL_CTA_DATA,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  WHATSAPP_IMG_SIZE,
+  HOST_KARIX,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
 import globalMessages from '../Cap/messages';
 import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
+import CapImageUpload from '../../v2Components/CapImageUpload';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
+import { capitalizeString } from '../../utils/Formatter';
 import CapWhatsappCTA from '../../v2Components/CapWhatsappCTA';
 import {
   PHONE_NUMBER,
@@ -104,14 +110,19 @@ export const Whatsapp = (props) => {
   const [templateLanguage, setTemplateLanguage] = useState(
     formatMessage(messages.select),
   );
+  const [templateMediaType, setTemplateMediaType] = useState(
+    WHATSAPP_MEDIA_TYPES.TEXT,
+  );
   const [templateMessage, setTemplateMessage] = useState('');
   const [templateMessageError, setTemplateMessageError] = useState(false);
   const [addedVarCount, setAddedVarCount] = useState(0);
   const [accountId, setAccountId] = useState('');
   const [accessToken, setAccessToken] = useState('');
-  const [accountName, setAccountName] = useState('');
+  const [host, setHost] = useState('');
   const [spin, setSpin] = useState(false);
   const [unsubscribeRequired, setUnsubscribeRequired] = useState(false);
+  const [whatsappImageSrc, setWhatsappImageSrc] = useState('');
+  const [karixFileHandle, setKarixFileHandle] = useState('');
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
@@ -129,6 +140,8 @@ export const Whatsapp = (props) => {
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
 
+  const isBtnTypeCta = buttonType === WHATSAPP_BUTTON_TYPES.CTA;
+  const isMediaTypeImage = templateMediaType === WHATSAPP_MEDIA_TYPES.IMAGE;
   const WhatsappFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -148,14 +161,17 @@ export const Whatsapp = (props) => {
   useEffect(() => {
     const accountObj = accountData.selectedWhatsappAccount || {};
     if (!isEmpty(accountObj)) {
-      const {
-        sourceAccountIdentifier = '',
-        configs = {},
-        name = '',
-      } = accountObj;
-      setAccountId(sourceAccountIdentifier);
-      setAccessToken(configs.accessToken || '');
-      setAccountName(name);
+      const { connectionProperties = {}, hostName = '' } = accountObj;
+      if (hostName === HOST_KARIX) {
+        const { authToken = '', wabaId = '' } = connectionProperties;
+        setAccessToken(authToken);
+        setAccountId(wabaId);
+      } else {
+        const { auth_token = '', account_sid = '' } = connectionProperties;
+        setAccessToken(auth_token);
+        setAccountId(account_sid);
+      }
+      setHost(hostName);
     }
   }, [accountData.selectedWhatsappAccount]);
 
@@ -192,6 +208,9 @@ export const Whatsapp = (props) => {
         status = WHATSAPP_STATUSES.unsubmitted,
         rejection_reason = null,
         languages = [],
+        mediaType = WHATSAPP_MEDIA_TYPES.TEXT,
+        imageUrl = '',
+        karixFileHandle = '',
         buttonType: btnType = WHATSAPP_BUTTON_TYPES.NONE,
         buttons = [],
       } = editContent;
@@ -199,6 +218,9 @@ export const Whatsapp = (props) => {
       setTemplateStatus(status);
       setTemplateRejectionReason(rejection_reason);
       setTemplateLanguage(languages[0]?.language);
+      setTemplateMediaType(mediaType);
+      setWhatsappImageSrc(imageUrl);
+      setKarixFileHandle(karixFileHandle);
       setButtonType(btnType);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
@@ -407,7 +429,12 @@ export const Whatsapp = (props) => {
     </CapRow>
   );
 
-  const templateCategoryOptions = CATEGORY_OPTIONS.map((option) => ({
+  const karixCategoryOptions = KARIX_CATEGORY_OPTIONS.map((option) => ({
+    value: option.value,
+    label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
+  }));
+
+  const twilioCategoryOptions = TWILIO_CATEGORY_OPTIONS.map((option) => ({
     value: option.value,
     label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
   }));
@@ -415,16 +442,22 @@ export const Whatsapp = (props) => {
   const mediaRadioOptions = [
     {
       value: WHATSAPP_MEDIA_TYPES.TEXT,
-      label: formatMessage(messages.mediaTextMessage),
+      label: formatMessage(messages.mediaText),
     },
     {
       value: WHATSAPP_MEDIA_TYPES.IMAGE,
       label: (
-        <CapTooltip title={formatMessage(messages.disabledFeatureTooltip)}>
+        <CapTooltip
+          title={
+            host !== HOST_KARIX
+              ? formatMessage(messages.disabledFeatureTooltip)
+              : ''
+          }
+        >
           {formatMessage(messages.mediaImage)}
         </CapTooltip>
       ),
-      disabled: true,
+      disabled: host !== HOST_KARIX,
     },
     {
       value: WHATSAPP_MEDIA_TYPES.VIDEO,
@@ -435,6 +468,15 @@ export const Whatsapp = (props) => {
       ),
       disabled: true,
     },
+    {
+      value: WHATSAPP_MEDIA_TYPES.DOCUMENT,
+      label: (
+        <CapTooltip title={formatMessage(messages.disabledFeatureTooltip)}>
+          {formatMessage(messages.mediaDocument)}
+        </CapTooltip>
+      ),
+      disabled: true,
+    },
   ];
 
   const onChangeButtonType = ({ target: { value } }) => {
@@ -484,11 +526,13 @@ export const Whatsapp = (props) => {
             </CapHeading>
             <CapLabel>{formatMessage(messages.ctaDesc)}</CapLabel>
           </div>
-          {buttonType === WHATSAPP_BUTTON_TYPES.CTA && (
+          {isBtnTypeCta && (
             <CapWhatsappCTA
               ctaData={ctaData}
               updateHandler={updateHandler}
               deleteHandler={deleteHandler}
+              isEditFlow={isEditFlow}
+              hostName={host}
             />
           )}
         </>
@@ -504,8 +548,7 @@ export const Whatsapp = (props) => {
           <div
             className="whatsapp-button-quick-reply"
             style={{
-              marginTop:
-                buttonType === WHATSAPP_BUTTON_TYPES.CTA ? '0px' : '24px',
+              marginTop: isBtnTypeCta ? '0px' : '24px',
               opacity: isEditFlow ? '' : '0.4',
             }}
           >
@@ -609,17 +652,55 @@ export const Whatsapp = (props) => {
         }
       />
       <CapRadioGroup
-        disabled={isEditFlow}
-        options={buttonRadioOptions || []}
+        options={buttonRadioOptions}
         value={buttonType}
         onChange={onChangeButtonType}
-        className={`whatsapp-btn-radio-group ${
-          isEditFlow ? 'whatsapp-btn-radio-edit' : ''
-        }`}
+        className="whatsapp-btn-radio-group"
       />
     </>
   );
 
+  const uploadWhatsappImage = (file, type, fileParams) => {
+    const whatsappParams = {
+      source: WHATSAPP.toLowerCase(),
+      wabaId: accountId,
+      accessToken,
+    };
+    actions.uploadWhatsappAsset(file, type, fileParams, 0, whatsappParams);
+  };
+
+  const setUpdateWhatsappImageSrc = useCallback(
+    (filePath, fileHandle) => {
+      setWhatsappImageSrc(filePath);
+      setKarixFileHandle(fileHandle);
+      actions.clearWhatsappAsset(0);
+    },
+    [whatsappImageSrc],
+  );
+
+  const updateOnWhatsappImageReUpload = useCallback(() => {
+    setWhatsappImageSrc('');
+    setKarixFileHandle('');
+  }, [whatsappImageSrc]);
+
+  const renderImageComponent = () => (
+    <CapImageUpload
+      style={{ paddingTop: '20px' }}
+      allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+      imgSize={WHATSAPP_IMG_SIZE}
+      uploadAsset={uploadWhatsappImage}
+      isFullMode={isFullMode}
+      imageSrc={whatsappImageSrc}
+      updateImageSrc={setUpdateWhatsappImageSrc}
+      updateOnReUpload={updateOnWhatsappImageReUpload}
+      index={0}
+      className="cap-custom-image-upload"
+      key="whatsapp-uploaded-image"
+      imageData={editData}
+      channel={WHATSAPP}
+    />
+  );
+
   const onTemplateNameChange = ({ target: { value } }) => {
     setTemplateName(value);
     templateNameErrorHandler(value);
@@ -647,6 +728,10 @@ export const Whatsapp = (props) => {
     setTemplateLanguage(value);
   };
 
+  const onTemplateMediaTypeChange = ({ target: { value } }) => {
+    setTemplateMediaType(value);
+  };
+
   const onAddVar = () => {
     const validVarArr = templateMessage.match(validVarRegex) || [];
     const tempMsg = `${templateMessage}{{${validVarArr.length + 1}}}`;
@@ -765,16 +850,20 @@ export const Whatsapp = (props) => {
                 content: getPayloadContent(),
               },
             ],
-            ...(buttonType === WHATSAPP_BUTTON_TYPES.CTA && {
+            ...(isBtnTypeCta && {
               buttonType,
               buttons: getCtaPayload(),
             }),
-            mediaType: WHATSAPP_MEDIA_TYPES.TEXT,
+            mediaType: templateMediaType,
+            ...(isMediaTypeImage && {
+              imageUrl: whatsappImageSrc,
+              karixFileHandle,
+            }),
             varMapped: !isFullMode ? varMap : {},
             templateEditor: !isFullMode && tempMsgArray.join(''),
             accountId,
             accessToken,
-            accountName,
+            hostName: host,
           },
         },
       },
@@ -782,7 +871,7 @@ export const Whatsapp = (props) => {
     type: WHATSAPP,
   });
 
-  const actionCallback = ({ errorMessage, resp }) => {
+  const actionCallback = ({ errorMessage }) => {
     const error = errorMessage?.message || errorMessage;
     if (!error) {
       CapNotification.success({
@@ -842,24 +931,41 @@ export const Whatsapp = (props) => {
     if (templateMessage.trim() === '' || templateMessageError) {
       return 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;
+    //if media type is image and image is not uploaded
+    if (isMediaTypeImage && karixFileHandle === '') {
+      return true;
     }
-    //if button type is cta and there are no buttons saved
-    return true;
-  }
-  return false;
-};
+    //cta
+    if (isBtnTypeCta) {
+      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;
+      }
+      //if button type is cta and there are no buttons saved
+      return true;
+    }
+    return false;
+  };
+
+  const renderMediaSection = () => (
+    <>
+      {renderLabel('mediaLabel')}
+      <CapRadioGroup
+        id="whatsapp-media-radio"
+        options={mediaRadioOptions}
+        value={templateMediaType}
+        onChange={onTemplateMediaTypeChange}
+        className="whatsapp-media-radio"
+      />
+    </>
+  );
 
   const createModeContent = (
     <>
@@ -896,7 +1002,9 @@ export const Whatsapp = (props) => {
       {renderLabel('templateCategoryLabel')}
       <CapSelect
         id="select-whatsapp-category"
-        options={templateCategoryOptions || []}
+        options={
+          host === HOST_KARIX ? karixCategoryOptions : twilioCategoryOptions
+        }
         onChange={onTemplateCategoryChange}
         value={templateCategory}
       />
@@ -909,13 +1017,11 @@ export const Whatsapp = (props) => {
         value={templateLanguage}
       />
       {/* template media type */}
-      {renderLabel('mediaLabel')}
-      <CapRadioGroup
-        options={mediaRadioOptions || []}
-        defaultValue={WHATSAPP_MEDIA_TYPES.TEXT}
-      />
+      {renderMediaSection()}
+      {isMediaTypeImage && renderImageComponent()}
       {/* template message create flow */}
       <CapHeader
+        className={`${isMediaTypeImage ? 'whatsapp-heading-spacing' : ''}`}
         title={
           <CapHeading type="h4" className="whatsapp-render-heading">
             {formatMessage(messages.templateMessageLabel)}
@@ -952,7 +1058,7 @@ export const Whatsapp = (props) => {
       />
       <CapRow className="whatsapp-create-template-message-input">
         <TextArea
-          id={`whatsapp-create-template-message-input`}
+          id="whatsapp-create-template-message-input"
           autosize={{ minRows: 3, maxRows: 5 }}
           placeholder={formatMessage(messages.templateMessagePlaceholder)}
           onChange={onTemplateMessageChange}
@@ -1139,6 +1245,11 @@ export const Whatsapp = (props) => {
           type={getTemplateStatusType()}
         />
       )}
+      {/* template media type */}
+      {renderLabel('mediaLabel')}
+      <CapLabel type="label15">{capitalizeString(templateMediaType)}</CapLabel>
+      {isMediaTypeImage && renderImageComponent()}
+
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -1181,13 +1292,26 @@ export const Whatsapp = (props) => {
       ) : (
         ''
       )}
-
-      <CapTooltip
-        placement="bottom"
-        title={formatMessage(messages.disabledButtonsSection)}
-      >
-        <CapRow>{renderButtonsSection()}</CapRow>
-      </CapTooltip>
+      {/* button section view in edit mode*/}
+      <CapRow>
+        <CapHeading type="h4" className="whatsapp-render-heading">
+          {formatMessage(messages.btnLabel)}
+        </CapHeading>
+        <CapLabel type="label15">
+          {isBtnTypeCta
+            ? formatMessage(messages.btnTypeCTA)
+            : formatMessage(messages.btnTypeNone)}
+        </CapLabel>
+        {isBtnTypeCta && (
+          <CapWhatsappCTA
+            ctaData={ctaData}
+            updateHandler={updateHandler}
+            deleteHandler={deleteHandler}
+            isEditFlow={isEditFlow}
+            hostName={host}
+          />
+        )}
+      </CapRow>
     </>
   );
   //edit methods end
@@ -1210,13 +1334,15 @@ export const Whatsapp = (props) => {
       <TemplatePreview
         channel={WHATSAPP}
         content={{
+          ...(isMediaTypeImage && {
+            whatsappImageSrc,
+          }),
           templateMsg,
-          ...(buttonType === WHATSAPP_BUTTON_TYPES.CTA && {
+          ...(isBtnTypeCta && {
             ctaData,
           }),
         }}
         whatsappContentLen={computeTextLength()}
-        whatsappAccountName={accountName}
       />
     );
   };
@@ -1225,6 +1351,7 @@ export const Whatsapp = (props) => {
     isTagValidationError ||
     Object.values(varMap).some((inputValue) => inputValue === '') ||
     computeTextLength() > TEMPLATE_MESSAGE_MAX_LENGTH;
+
   return (
     <CapSpin spinning={spin}>
       <CapRow className="cap-whatsapp-creatives">
@@ -1239,13 +1366,24 @@ export const Whatsapp = (props) => {
       <WhatsappFooter>
         {!isEditFlow && (
           <>
-            <CapButton
-              onClick={onDoneCallback()}
-              disabled={isDisableDone()}
-              className="whatsapp-create-btn"
+            <CapTooltip
+              title={
+                isDisableDone()
+                  ? formatMessage(messages.sendForApprovalToolTip)
+                  : ''
+              }
+              placement={'right'}
             >
-              <FormattedMessage {...messages.sendForApprovalButtonLabel} />
-            </CapButton>
+              <div className="button-disabled-tooltip-wrapper">
+                <CapButton
+                  onClick={onDoneCallback()}
+                  disabled={isDisableDone()}
+                  className="whatsapp-create-btn"
+                >
+                  <FormattedMessage {...messages.sendForApprovalButtonLabel} />
+                </CapButton>
+              </div>
+            </CapTooltip>
             <CapButton
               onClick={handleClose}
               className="whatsapp-cancel-btn"

package/v2Containers/Whatsapp/index.scss

@@ -1,6 +1,10 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables';
 
 .cap-whatsapp-creatives {
+  .whatsapp-heading-spacing {
+    margin-top: $CAP_SPACE_16;
+  }
+
   .whatsapp-render-heading {
     margin-top: $CAP_SPACE_16;
     margin-bottom: 6px;
@@ -67,8 +71,7 @@
     text-overflow: ellipsis;
   }
 
-  .whatsapp-edit-disabled,
-  .whatsapp-btn-radio-edit {
+  .whatsapp-edit-disabled {
     cursor: not-allowed;
     opacity: 0.5;
     overflow-wrap: anywhere;
@@ -115,4 +118,17 @@
     font-weight: normal;
     font-size: 12px;
   }
+
+  .whatsapp-media-radio>label.ant-radio-wrapper {
+    margin-right: 50px;
+  }
+
+  .cap-custom-image-upload {
+    .dragger-button.re-upload {
+      top: -175px;
+      position: relative;
+      left: 525px;
+      color: $FONT_COLOR_05;
+    }
+  }
 }

package/v2Containers/Whatsapp/messages.js

@@ -66,6 +66,30 @@ export default defineMessages({
     defaultMessage:
       'Send confirmations, reminders, or other updates to customers about their reservations.',
   },
+  transactional: {
+    id: `${prefix}.transactional`,
+    defaultMessage: 'Transactional',
+  },
+  transactionalTooltip: {
+    id: `${prefix}.transactionalTooltip`,
+    defaultMessage: 'Send account updates, order updates, alerts, and more to share important information.',
+  },
+  marketing: {
+    id: `${prefix}.marketing`,
+    defaultMessage: 'Marketing',
+  },
+  marketingTooltip: {
+    id: `${prefix}.marketingTooltip`,
+    defaultMessage: 'Send promotional offers, product announcements, and more to increase awareness and engagement.',
+  },
+  otp: {
+    id: `${prefix}.otp`,
+    defaultMessage: 'Otp',
+  },
+  otpTooltip: {
+    id: `${prefix}.otpTooltip`,
+    defaultMessage: 'Send codes that allow your customers to securely access their accounts.',
+  },
   messageLanguageLabel: {
     id: `${prefix}.messageLanguageLabel`,
     defaultMessage: 'Message language',
@@ -78,9 +102,9 @@ export default defineMessages({
     id: `${prefix}.mediaLabel`,
     defaultMessage: 'Media',
   },
-  mediaTextMessage: {
-    id: `${prefix}.mediaTextMessage`,
-    defaultMessage: 'Text Message',
+  mediaText: {
+    id: `${prefix}.mediaText`,
+    defaultMessage: 'Text',
   },
   mediaImage: {
     id: `${prefix}.mediaImage`,
@@ -90,6 +114,10 @@ export default defineMessages({
     id: `${prefix}.mediaVideo`,
     defaultMessage: 'Video',
   },
+  mediaDocument: {
+    id: `${prefix}.mediaDocument`,
+    defaultMessage: 'Document',
+  },
   disabledFeatureTooltip: {
     id: `${prefix}.disabledFeatureTooltip`,
     defaultMessage: 'Not yet enabled. Coming soon!',
@@ -157,6 +185,10 @@ export default defineMessages({
     id: `${prefix}.sendForApprovalButtonLabel`,
     defaultMessage: 'Send for approval',
   },
+  sendForApprovalToolTip: {
+    id: `${prefix}.sendForApprovalToolTip`,
+    defaultMessage: 'Please add all mandatory fields to proceed further',
+  },
   cancelButtonLabel: {
     id: `${prefix}.cancelButtonLabel`,
     defaultMessage: 'Cancel',
@@ -264,10 +296,6 @@ export default defineMessages({
     id: `${prefix}.optional`,
     defaultMessage: '(Optional)',
   },
-  disabledButtonsSection: {
-    id: `${prefix}.disabledButtonsSection`,
-    defaultMessage: 'Buttons are not editable once template is sent for approval',
-  },
 
   afrikaans: {
     id: `${prefix}.afrikaans`,

package/v2Containers/Whatsapp/reducer.js

@@ -8,9 +8,16 @@ import {
   GET_TEMPLATE_DETAILS_SUCCESS,
   GET_TEMPLATE_DETAILS_FAILURE,
   RESET_EDIT_TEMPLATE,
+  UPLOAD_WHATSAPP_ASSET_REQUEST,
+  UPLOAD_WHATSAPP_ASSET_SUCCESS,
+  UPLOAD_WHATSAPP_ASSET_FAILURE,
+  CLEAR_WHATSAPP_ASSET,
 } from './constants';
 
-const initialState = fromJS({ createTemplateInProgress: false });
+const initialState = fromJS({
+  uploadedAssetData: {},
+  createTemplateInProgress: false,
+});
 
 function whatsappReducer(state = initialState, action) {
   switch (action.type) {
@@ -46,6 +53,33 @@ function whatsappReducer(state = initialState, action) {
       return state.set('getTemplateDetailsInProgress', false);
     case RESET_EDIT_TEMPLATE:
       return state.set('templateDetails', {});
+    case UPLOAD_WHATSAPP_ASSET_REQUEST:
+      return state.set('uploadAssetSuccess', false).set('assetUploading', true);
+    case UPLOAD_WHATSAPP_ASSET_SUCCESS:
+      return state
+        .set(
+          'uploadAssetSuccess',
+          action.statusCode !== undefined &&
+            action.statusCode !== '' &&
+            action.statusCode < 300,
+        )
+        .set('assetUploading', false)
+        .set(
+          action.templateType !== undefined
+            ? `uploadedAssetData${action.templateType}`
+            : 'uploadedAssetData',
+          action.data,
+        );
+    case UPLOAD_WHATSAPP_ASSET_FAILURE:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    case CLEAR_WHATSAPP_ASSET:
+      return state.delete(
+        action.templateType !== undefined
+          ? `uploadedAssetData${action.templateType}`
+          : 'uploadedAssetData',
+      );
     default:
       return state;
   }