@capillarytech/creatives-library 7.17.39-alpha.5 → 7.17.40-alpha.0

package/v2Containers/Zalo/index.js

@@ -1,33 +1,29 @@
-/* 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';
+/* 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";
 import styled from 'styled-components';
-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 CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import {
+  CapSpin,
+  CapRow,
+  CapColumn,
+  CapLabel,
+  CapAlert,
+  CapInput,
+  CapHeading,
+  CapHeader,
+  CapIcon,
+} from "@capillarytech/cap-ui-library";
 import {
   CAP_SPACE_16,
   CAP_SPACE_24,
   CAP_SPACE_32,
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
-import { makeSelectZalo, makeSelectAccount } from './selectors';
-import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
-import * as zaloActions from './actions';
-import './index.scss';
+import messages from "./messages";
+import withCreatives from "../../hoc/withCreatives";
 import {
   SUCCESS_ALERT,
   REQUEST,
@@ -40,47 +36,40 @@ import {
   ERROR_ALERT,
   WARNING_ALERT,
   ZALO_STATUSES,
-} 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';
+  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";
+
 
-export const Zalo = (props) => {
-  const {
-    intl,
-    actions,
-    isFullMode,
-    templateData = {},
-    editData = {},
-    accountData = {},
-    globalActions,
-    location,
-    getDefaultTags,
-    supportedTags,
-    metaEntities,
-    injectedTags,
-    getFormData,
-    selectedOfferDetails,
-  } = props || {};
+export const Zalo = ({
+  intl,
+  actions,
+  zaloTemplateInfoData,
+  templateData,
+  location,
+  metaEntities,
+  getDefaultTags,
+  supportedTags,
+  injectedTags,
+  selectedOfferDetails,
+  template,
+}) => {
   const { formatMessage } = intl;
-  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 [zaloTemplateListParams, setZaloTemplateListParams] = useState([]);
+  const [templatePreviewUrl, setTemplatePreviewUrl] = useState("");
   const [tags, updateTags] = useState([]);
-  const [textAreaId, updateTextAreaId] = useState('');
-  const { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
-    editData;
-  const { _id, templateConfigs: { varMapped = {} } = {} } = templateData;
+  const [textAreaId, updateTextAreaId] = useState("");
+  const [templateStatus, setZaloTemplateStatus] = useState(ENABLE);
+
   const ZaloFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -95,79 +84,47 @@ export const Zalo = (props) => {
     }
     }
 `;
-  //gets account details
-  useEffect(() => {
-    const accountObj = accountData.selectedZaloAccount || {};
-    if (!isEmpty(accountObj)) {
-      const {
-        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 { zaloTemplateInfoStatus, zaloTemplateInfoValue } =
+    zaloTemplateInfoData;
 
-  const setDataForEdit = (setValues) => {
-    const {
-      name = '',
-      _id: id = '',
-      versions: {
-        base: {
-          content: {
-            zalo: {
-              listParams: paramsData = [],
-              previewUrl = '',
-              status = '',
+  // here listParams and previewUrl data will be setting in respective states. We got that data by destructring
+  useEffect(() => {
+    if (zaloTemplateInfoValue) {
+      const {
+        versions: {
+          base: {
+            content: {
+              zalo: { listParams = [], previewUrl = "", status = "" } = {},
             } = {},
           } = {},
         } = {},
-      } = {},
-    } = zaloTemplateInfoValue;
-    setTemplateName(name);
-    setTemplateId(id);
-    setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
-    setTemplatePreviewUrl(previewUrl);
-    setZaloTemplateStatus(status);
-    updateTextAreaId(paramsData[0]?.name);
-  };
-
-  useEffect(() => {
-    setDataForEdit(false);
+      } = zaloTemplateInfoValue;
+      setZaloTemplateListParams(listParams);
+      setTemplatePreviewUrl(previewUrl);
+      setZaloTemplateStatus(status);
+      updateTextAreaId(listParams[0]?.name);
+    }
   }, [zaloTemplateInfoValue]);
 
   useEffect(() => {
-    if (!isEmpty(varMapped)) {
-      setDataForEdit(true);
-    }
-  }, [varMapped]);
+    const {
+      weCrmAccounts: [
+        {
+          name,
+          sourceAccountIdentifier,
+          configs: { token },
+        },
+      ],
+    } = template;
+    const { _id: id } = templateData;
+    actions.getTemplateInfoById({
+      username: name,
+      oa_id: sourceAccountIdentifier,
+      token,
+      id,
+    });
+  }, []);
 
   useEffect(() => {
     let tag = get(metaEntities, `tags.standard`, []);
@@ -183,7 +140,7 @@ export const Zalo = (props) => {
     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,
@@ -191,46 +148,44 @@ export const Zalo = (props) => {
     if (getDefaultTags) {
       query.context = getDefaultTags;
     }
-    globalActions.fetchSchemaForEntity(query);
+    actions.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,
     };
-    globalActions.fetchSchemaForEntity(query);
+    actions.fetchSchemaForEntity(query);
   };
 
   const onTagSelect = (data) => {
     if (data && textAreaId) {
-      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;
+      const updatedZaloTemplateInfo = zaloTemplateListParams.map((item) => {
+        if (item?.name === textAreaId) {
+          const text = `${item?.value ? item?.value : ""}{{${data}}}`;
           return {
-            ...listParams,
+            ...item,
             value: text,
-            error: isLengthError
-              ? formatMessage(messages.maxMinLengthMessage, {
-                  minLength,
-                  maxLength,
+            error:
+              text.length <= item?.minLength || text.length > item?.maxLength
+                ? formatMessage(messages.maxMinLengthMessage, {
+                  minLength: item?.minLength,
+                  maxLength: item?.maxLength,
                 })
-              : '',
+                : "",
           };
         }
-        return listParams;
+        return item;
       });
-      setTemplateListParams(updatedZaloTemplateInfo);
+      setZaloTemplateListParams(updatedZaloTemplateInfo);
     }
   };
 
@@ -244,7 +199,7 @@ export const Zalo = (props) => {
         tagModule: getDefaultTags,
       }) || {};
     const { unsupportedTags = [], isBraceError } = tagValidationResponse;
-    let tagError = '';
+    let tagError = "";
     if (unsupportedTags.length > 0) {
       tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
         unsupportedTags,
@@ -256,36 +211,38 @@ export const Zalo = (props) => {
     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 = templateListParams?.map((listParams) => {
-      if (listParams?.name === field?.name) {
+    const updatedZaloTemplateInfo = zaloTemplateListParams?.map((item) => {
+      if (item?.name === field?.name) {
         const error = handleErrorValidation(value, field);
         return {
-          ...listParams,
+          ...item,
           value,
           error,
         };
       }
-      return listParams;
+      return item;
     });
-    setTemplateListParams(updatedZaloTemplateInfo);
+    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;
   };
 
   const renderTextBoxesForListParams = (listParam) => {
@@ -296,11 +253,10 @@ export const Zalo = (props) => {
         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}
       />
     );
   };
@@ -310,7 +266,7 @@ export const Zalo = (props) => {
   };
 
   const handlePreview = () => {
-    window.open(templatePreviewUrl, '_blank');
+    window.open(templatePreviewUrl, "_blank");
   };
 
   const getTemplateStatusType = () => {
@@ -324,93 +280,20 @@ export const Zalo = (props) => {
     }
   };
 
-  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}>
-          {templateStatus && (
-            <CapAlert
-              message={
-                <CapLabel type="label2">
-                  {formatMessage(messages.approvedStatusMsg, {
-                    status: formatMessage(messages?.[templateStatus]),
-                  })}
-                </CapLabel>
-              }
-              type={getTemplateStatusType()}
-            />
-          )}
+          <CapAlert
+            message={
+              <CapLabel type="label2">
+                {formatMessage(messages.approvedStatusMsg, {
+                  status: formatMessage(messages?.[templateStatus]),
+                })}
+              </CapLabel>
+            }
+            type={getTemplateStatusType()}
+          />
           <CapRow>
             <CapRow className="whatsapp-render-heading">
               <CapHeader
@@ -429,74 +312,75 @@ export const Zalo = (props) => {
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
                     selectedOfferDetails={selectedOfferDetails}
-                    disabled={isFullMode}
                   />
                 }
               />
             </CapRow>
-            <CapRow className="zalo-variable-list">{renderContent()}</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>
         </CapColumn>
-        <CapColumn span={10}>
-          <CapRow 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 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>
       </CapRow>
-      <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>
+      <ZaloFooter></ZaloFooter>
     </CapSpin>
   );
 };
 
 const mapStateToProps = createStructuredSelector({
-  editData: makeSelectZalo(),
-  accountData: makeSelectAccount(),
+  zaloTemplateInfoData: makeSelectZalo(),
+  template: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  actions: bindActionCreators(zaloActions, dispatch),
+  actions: bindActionCreators(
+    { ...zaloActions, ...templateActions, ...globalActions },
+    dispatch
+  ),
 });
 
 export default withCreatives({

package/v2Containers/Zalo/index.scss

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