@capillarytech/creatives-library 7.17.39 → 7.17.40

package/v2Containers/Zalo/index.js

@@ -1,29 +1,32 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect } from "react";
-import { injectIntl } from "react-intl";
-import { createStructuredSelector } from "reselect";
-import { bindActionCreators } from "redux";
-import { get } from "lodash";
+/* eslint-disable camelcase */
+/* eslint-disable react/jsx-indent */
+import React, { useState, useEffect } from 'react';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import { get, isEmpty } from 'lodash';
 import styled from 'styled-components';
-import {
-  CapSpin,
-  CapRow,
-  CapColumn,
-  CapLabel,
-  CapAlert,
-  CapInput,
-  CapHeading,
-  CapHeader,
-  CapIcon,
-} from "@capillarytech/cap-ui-library";
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import {
   CAP_SPACE_16,
   CAP_SPACE_24,
   CAP_SPACE_32,
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
-import messages from "./messages";
-import withCreatives from "../../hoc/withCreatives";
+import { makeSelectZalo, makeSelectAccount } from './selectors';
+import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+import * as zaloActions from './actions';
+import './index.scss';
 import {
   SUCCESS_ALERT,
   REQUEST,
@@ -36,40 +39,48 @@ import {
   ERROR_ALERT,
   WARNING_ALERT,
   ZALO_STATUSES,
-  ENABLE,
-} from "./constants";
-import "./index.scss";
-import { makeSelectZalo } from "./selectors";
-import * as zaloActions from "./actions";
-import * as templateActions from "../Templates/actions";
-import { makeSelectTemplates } from "../Templates/selectors";
-import TagList from "../TagList";
-import globalMessages from "../Cap/messages";
-import { makeSelectMetaEntities, setInjectedTags } from "../Cap/selectors";
-import * as globalActions from "../Cap/actions";
-import { validateTags } from "../../utils/tagValidations";
-
+} from './constants';
+import { ZALO } from '../CreativesContainer/constants';
+import messages from './messages';
+import globalMessages from '../Cap/messages';
+import withCreatives from '../../hoc/withCreatives';
+import TagList from '../TagList';
+import { validateTags } from '../../utils/tagValidations';
+import TemplatePreview from '../../v2Components/TemplatePreview';
 
-export const Zalo = ({
-  intl,
-  actions,
-  zaloTemplateInfoData,
-  templateData,
-  location,
-  metaEntities,
-  getDefaultTags,
-  supportedTags,
-  injectedTags,
-  selectedOfferDetails,
-  template,
-}) => {
+export const Zalo = (props) => {
+  const {
+    intl,
+    actions,
+    isFullMode,
+    templateData = {},
+    editData = {},
+    accountData = {},
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    getFormData,
+    selectedOfferDetails,
+  } = props || {};
   const { formatMessage } = intl;
-  const [zaloTemplateListParams, setZaloTemplateListParams] = useState([]);
-  const [templatePreviewUrl, setTemplatePreviewUrl] = useState("");
+  const [oa_id, setOaId] = useState('');
+  const [token, setToken] = useState('');
+  const [username, setUsername] = useState('');
+  const [templateName, setTemplateName] = useState('');
+  const [templateId, setTemplateId] = useState('');
+  const [templateListParams, setTemplateListParams] = useState([]);
+  const [templatePreviewUrl, setTemplatePreviewUrl] = useState('');
+  const [templateStatus, setZaloTemplateStatus] = useState(
+    ZALO_STATUSES.ENABLE,
+  );
   const [tags, updateTags] = useState([]);
-  const [textAreaId, updateTextAreaId] = useState("");
-  const [templateStatus, setZaloTemplateStatus] = useState(ENABLE);
-
+  const [textAreaId, updateTextAreaId] = useState('');
+  const { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
+    editData;
+  const { _id, templateConfigs: { varMapped = {} } = {} } = templateData;
   const ZaloFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -84,47 +95,79 @@ export const Zalo = ({
     }
     }
 `;
-
-  const { zaloTemplateInfoStatus, zaloTemplateInfoValue } =
-    zaloTemplateInfoData;
-
-  // here listParams and previewUrl data will be setting in respective states. We got that data by destructring
+  //gets account details
   useEffect(() => {
-    if (zaloTemplateInfoValue) {
+    const accountObj = accountData.selectedZaloAccount || {};
+    if (!isEmpty(accountObj)) {
       const {
-        versions: {
-          base: {
-            content: {
-              zalo: { listParams = [], previewUrl = "", status = "" } = {},
+        sourceAccountIdentifier = '',
+        configs: { token: accessToken = '' } = {},
+        name = '',
+      } = accountObj;
+      setOaId(sourceAccountIdentifier);
+      setToken(accessToken);
+      setUsername(name);
+    }
+  }, [accountData.selectedZaloAccount]);
+
+  //gets template details
+  useEffect(() => {
+    if (_id && oa_id && token && username && isEmpty(varMapped)) {
+      actions.getTemplateInfoById({
+        username,
+        oa_id,
+        token,
+        id: _id,
+        actionCallback,
+      });
+    }
+  }, [_id, oa_id, token, username]);
+
+  const handleSetValues = (paramsData = []) =>
+    paramsData.map((paramData) => {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key in varMapped) {
+        if (paramData?.name === key) {
+          // eslint-disable-next-line no-param-reassign
+          paramData.value = varMapped[key];
+        }
+      }
+      return paramData;
+    });
+
+  const setDataForEdit = (setValues) => {
+    const {
+      name = '',
+      _id: id = '',
+      versions: {
+        base: {
+          content: {
+            zalo: {
+              listParams: paramsData = [],
+              previewUrl = '',
+              status = '',
             } = {},
           } = {},
         } = {},
-      } = zaloTemplateInfoValue;
-      setZaloTemplateListParams(listParams);
-      setTemplatePreviewUrl(previewUrl);
-      setZaloTemplateStatus(status);
-      updateTextAreaId(listParams[0]?.name);
-    }
+      } = {},
+    } = zaloTemplateInfoValue;
+    setTemplateName(name);
+    setTemplateId(id);
+    setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
+    setTemplatePreviewUrl(previewUrl);
+    setZaloTemplateStatus(status);
+    updateTextAreaId(paramsData[0]?.name);
+  };
+
+  useEffect(() => {
+    setDataForEdit(false);
   }, [zaloTemplateInfoValue]);
 
   useEffect(() => {
-    const {
-      weCrmAccounts: [
-        {
-          name,
-          sourceAccountIdentifier,
-          configs: { token },
-        },
-      ],
-    } = template;
-    const { _id: id } = templateData;
-    actions.getTemplateInfoById({
-      username: name,
-      oa_id: sourceAccountIdentifier,
-      token,
-      id,
-    });
-  }, []);
+    if (!isEmpty(varMapped)) {
+      setDataForEdit(true);
+    }
+  }, [varMapped]);
 
   useEffect(() => {
     let tag = get(metaEntities, `tags.standard`, []);
@@ -140,7 +183,7 @@ export const Zalo = ({
     const { type, module } = location?.query || {};
     const isEmbedded = type === EMBEDDED;
     const query = {
-      layout: "SMS",
+      layout: 'SMS',
       type: TAG,
       context: isEmbedded ? module : DEFAULT,
       embedded: isEmbedded ? type : FULL,
@@ -148,44 +191,46 @@ export const Zalo = ({
     if (getDefaultTags) {
       query.context = getDefaultTags;
     }
-    actions.fetchSchemaForEntity(query);
+    globalActions.fetchSchemaForEntity(query);
   }, []);
 
   const handleOnTagsContextChange = (data) => {
     const { type } = location?.query || {};
     const isEmbedded = type === EMBEDDED;
     const query = {
-      layout: "SMS",
+      layout: 'SMS',
       type: TAG,
       context:
-        (data || "").toLowerCase() === ALL
+        (data || '').toLowerCase() === ALL
           ? DEFAULT
-          : (data || "").toLowerCase(),
+          : (data || '').toLowerCase(),
       embedded: isEmbedded ? type : FULL,
     };
-    actions.fetchSchemaForEntity(query);
+    globalActions.fetchSchemaForEntity(query);
   };
 
   const onTagSelect = (data) => {
     if (data && textAreaId) {
-      const updatedZaloTemplateInfo = zaloTemplateListParams.map((item) => {
-        if (item?.name === textAreaId) {
-          const text = `${item?.value ? item?.value : ""}{{${data}}}`;
+      const updatedZaloTemplateInfo = templateListParams?.map((listParams) => {
+        const { name = '', value = '', minLength, maxLength } = listParams;
+        if (name === textAreaId) {
+          const text = `${value}{{${data}}}`;
+          const isLengthError =
+            text.length <= minLength || text.length > maxLength;
           return {
-            ...item,
+            ...listParams,
             value: text,
-            error:
-              text.length <= item?.minLength || text.length > item?.maxLength
-                ? formatMessage(messages.maxMinLengthMessage, {
-                  minLength: item?.minLength,
-                  maxLength: item?.maxLength,
+            error: isLengthError
+              ? formatMessage(messages.maxMinLengthMessage, {
+                  minLength,
+                  maxLength,
                 })
-                : "",
+              : '',
           };
         }
-        return item;
+        return listParams;
       });
-      setZaloTemplateListParams(updatedZaloTemplateInfo);
+      setTemplateListParams(updatedZaloTemplateInfo);
     }
   };
 
@@ -199,7 +244,7 @@ export const Zalo = ({
         tagModule: getDefaultTags,
       }) || {};
     const { unsupportedTags = [], isBraceError } = tagValidationResponse;
-    let tagError = "";
+    let tagError = '';
     if (unsupportedTags.length > 0) {
       tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
         unsupportedTags,
@@ -211,38 +256,36 @@ export const Zalo = ({
     return tagError;
   };
 
+  //this function is used for checking errror validation in this it validate tags error and length error
+  const handleErrorValidation = (e, field) => {
+    const { minLength, maxLength } = field;
+    let error = e ? tagValidationErrorMessage(e) : '';
+    if (!e || e.length <= minLength || e.length > maxLength) {
+      error = formatMessage(messages.maxMinLengthMessage, {
+        minLength,
+        maxLength,
+      });
+    }
+    return error;
+  };
+
   // this function is used for handle form data change in this also handle error validtion on change of value
   const handleFormDataChange = (e, field) => {
     const {
       target: { value },
     } = e;
-    const updatedZaloTemplateInfo = zaloTemplateListParams?.map((item) => {
-      if (item?.name === field?.name) {
+    const updatedZaloTemplateInfo = templateListParams?.map((listParams) => {
+      if (listParams?.name === field?.name) {
         const error = handleErrorValidation(value, field);
         return {
-          ...item,
+          ...listParams,
           value,
           error,
         };
       }
-      return item;
+      return listParams;
     });
-    setZaloTemplateListParams(updatedZaloTemplateInfo);
-  };
-
-  //this function is used for checking errror validation in this it validate tags error and length error
-  const handleErrorValidation = (e, field) => {
-    const { minLength, maxLength } = field;
-    let error = tagValidationErrorMessage(e);
-
-    if (e.length <= minLength || e.length > maxLength) {
-      error = formatMessage(messages.maxMinLengthMessage, {
-        minLength,
-        maxLength,
-      });
-    }
-
-    return error;
+    setTemplateListParams(updatedZaloTemplateInfo);
   };
 
   const renderTextBoxesForListParams = (listParam) => {
@@ -253,10 +296,11 @@ export const Zalo = ({
         onChange={(e) => handleFormDataChange(e, listParam)}
         errorMessage={error}
         placeholder={formatMessage(messages.addVariableWithMessage)}
-        defaultValue={value || ""}
-        value={value || ""}
+        defaultValue={value || ''}
+        value={value || ''}
         size="default"
         onFocus={() => setTextAreaId(name)}
+        disabled={isFullMode}
       />
     );
   };
@@ -265,10 +309,6 @@ export const Zalo = ({
     updateTextAreaId(fieldName);
   };
 
-  const handlePreview = () => {
-    window.open(templatePreviewUrl, "_blank");
-  };
-
   const getTemplateStatusType = () => {
     switch (templateStatus) {
       case ZALO_STATUSES.ENABLE:
@@ -280,20 +320,93 @@ export const Zalo = ({
     }
   };
 
+  const actionCallback = () => {
+    CapNotification.error({
+      message: formatMessage(messages.zaloFailureNotificationTemplate),
+    });
+  };
+
+  const isEditDoneDisabled = () => {
+    let disableCheck = false;
+    templateListParams.forEach((listParams) => {
+      const { error, value } = listParams;
+      const errorMessage = !error
+        ? handleErrorValidation(value, listParams)
+        : error;
+      if (errorMessage) {
+        disableCheck = true;
+      }
+    });
+    return disableCheck;
+  };
+  const createPayload = () => {
+    const varMap = {};
+    templateListParams.forEach((listParam) => {
+      const { name, value } = listParam;
+      varMap[name] = value;
+    });
+    const payload = {
+      channel: ZALO,
+      accountId: oa_id,
+      accountName: username,
+      templateConfigs: {
+        id: templateId?.toString(),
+        name: templateName,
+        template: templatePreviewUrl,
+        varMapped: varMap,
+      },
+    };
+    return payload;
+  };
+
+  const saveToMessage = () => {
+    getFormData({
+      value: createPayload(),
+      _id: templateId,
+      validity: true,
+      type: ZALO,
+    });
+  };
+
+  const renderContent = () =>
+    templateListParams?.map((listParam) => {
+      const { name = '', value = '', maxLength } = listParam;
+      return (
+        <>
+          {renderTextBoxesForListParams(listParam)}
+          <CapRow className="variable-field-container">
+            <CapLabel className="variable-field-name">
+              {formatMessage(messages.variableType, {
+                name,
+              })}
+            </CapLabel>
+            <CapLabel className="variable-field-length">
+              {formatMessage(messages.charactersCount, {
+                variableLength: value.length,
+                maxLength,
+              })}
+            </CapLabel>
+          </CapRow>
+        </>
+      );
+    });
+
   return (
     <CapSpin spinning={zaloTemplateInfoStatus === REQUEST}>
       <CapRow type="flex" className="cap-zalo-creatives">
         <CapColumn span={14}>
-          <CapAlert
-            message={
-              <CapLabel type="label2">
-                {formatMessage(messages.approvedStatusMsg, {
-                  status: formatMessage(messages?.[templateStatus]),
-                })}
-              </CapLabel>
-            }
-            type={getTemplateStatusType()}
-          />
+          {templateStatus && (
+            <CapAlert
+              message={
+                <CapLabel type="label2">
+                  {formatMessage(messages.approvedStatusMsg, {
+                    status: formatMessage(messages?.[templateStatus]),
+                  })}
+                </CapLabel>
+              }
+              type={getTemplateStatusType()}
+            />
+          )}
           <CapRow>
             <CapRow className="whatsapp-render-heading">
               <CapHeader
@@ -312,75 +425,56 @@ export const Zalo = ({
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
                     selectedOfferDetails={selectedOfferDetails}
+                    disabled={isFullMode}
                   />
                 }
               />
             </CapRow>
-            <CapRow className="zalo-variable-list">
-              {zaloTemplateListParams?.map((listParam) => {
-                const { name = "", maxLength, value = "" } = listParam;
-                return (
-                  <>
-                    {renderTextBoxesForListParams(listParam)}
-                      <CapRow className="variable-field-container">
-                        <CapLabel className="variable-field-name">
-                          {formatMessage(messages.variableType, {
-                            fieldName: name,
-                          })}
-                        </CapLabel>
-                          <CapLabel className="variable-field-length">
-                            {formatMessage(messages.charactersCount, {
-                              variableLength: value?.length,
-                              fixedLength: maxLength,
-                            })}
-                          </CapLabel>
-                      </CapRow>
-                  </>
-                );
-              })}
-            </CapRow>
+            <CapRow className="zalo-variable-list">{renderContent()}</CapRow>
           </CapRow>
         </CapColumn>
-        <CapColumn type="flex" span={10} className="zalo-preview-container">
-          <CapRow>
-            <CapLabel className="preview-head">
-              {formatMessage(messages.previewHead)}
-            </CapLabel>
-          </CapRow>
-          <CapRow>
-            <CapLabel className="preview-text">
-              {formatMessage(messages.previewText)}
-            </CapLabel>
-          </CapRow>
-          <CapRow>
-            <CapLabel
-              data-testid="preview-link-button"
-              onClick={handlePreview}
-              className="preview-link"
-            >
-              {formatMessage(messages.openPreview)}{" "}
-              <CapIcon type="open-in-new-light"></CapIcon>
-            </CapLabel>
-          </CapRow>
+        <CapColumn span={10}>
+          <TemplatePreview
+            channel={ZALO}
+            templateData={{templatePreviewUrl, fullMode: isFullMode}}
+          />
         </CapColumn>
       </CapRow>
-      <ZaloFooter></ZaloFooter>
+      <ZaloFooter>
+        {!isFullMode && (
+          <CapTooltip
+            title={
+              isEditDoneDisabled()
+                ? formatMessage(messages.btnDisabledTooltip)
+                : ''
+            }
+            placement={'right'}
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                onClick={saveToMessage}
+                disabled={isEditDoneDisabled()}
+                className="whatsapp-create-btn"
+              >
+                <FormattedMessage {...globalMessages.done} />
+              </CapButton>
+            </div>
+          </CapTooltip>
+        )}
+      </ZaloFooter>
     </CapSpin>
   );
 };
 
 const mapStateToProps = createStructuredSelector({
-  zaloTemplateInfoData: makeSelectZalo(),
-  template: makeSelectTemplates(),
+  editData: makeSelectZalo(),
+  accountData: makeSelectAccount(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  actions: bindActionCreators(
-    { ...zaloActions, ...templateActions, ...globalActions },
-    dispatch
-  ),
+  actions: bindActionCreators(zaloActions, dispatch),
 });
 
 export default withCreatives({

package/v2Containers/Zalo/index.scss

@@ -42,11 +42,10 @@
   }
 
   .zalo-preview-container {
-    text-align: center;
     position: fixed;
-    right: 0;
-    padding-left: 194px;
-    padding-right: 116px;
+    text-align: center;
+    padding-left: 72px;
+    padding-right: 110px;
 
     .preview-head {
       font-weight: 500;

package/v2Containers/Zalo/messages.js

@@ -16,19 +16,19 @@ export default defineMessages({
   },
   variableType: {
     id: `${prefix}.variableType`,
-    defaultMessage: "Variable type: <{fieldName}>",
+    defaultMessage: "Variable type: <{name}>",
   },
   charactersCount: {
     id: `${prefix}.charactersCount`,
-    defaultMessage: "Characters count {variableLength}/{fixedLength}",
+    defaultMessage: "Characters count {variableLength}/{maxLength}",
   },
   maxMinLengthMessage: {
-    id: `${prefix}.maxLengthMessage`,
+    id: `${prefix}.maxMinLengthMessage`,
     defaultMessage:
       "Character count for this variable should be in between {minLength} to {maxLength}",
   },
   previewHead: {
-    id: `${prefix}.previewText`,
+    id: `${prefix}.previewHead`,
     defaultMessage: "Preview",
   },
   previewText: {
@@ -70,5 +70,17 @@ export default defineMessages({
   PENDING_REVIEW: {
     id: `${prefix}.PENDING_REVIEW`,
     defaultMessage: 'pending review',
-  }
+  },
+  zaloFailureNotificationTemplate: {
+    id: `${prefix}.zaloFailureNotificationTemplate`,
+    defaultMessage: 'Unable to load zalo template',
+  },
+  zaloFailureNotificationPreview: {
+    id: `${prefix}.zaloFailureNotificationPreview`,
+    defaultMessage: 'Unable to load zalo preview',
+  },
+  btnDisabledTooltip: {
+    id: `${prefix}.btnDisabledTooltip`,
+    defaultMessage: 'Please add all mandatory fields to proceed further',
+  },
 });