@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/v2Containers/Zalo/constants.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+export const SUCCESS_ALERT = 'success';
+export const WARNING_ALERT = 'warning';
+export const ERROR_ALERT = 'error';
+export const SUCCESS = 'SUCCESS';
+export const REQUEST = 'REQUEST';
+export const ERROR = 'ERROR';
+export const STRING = 'STRING';
+export const NUMBER = 'NUMBER';
+export const DATE = 'DATE';
+
+export const TAG = 'TAG';
+export const EMBEDDED = 'embedded';
+export const DEFAULT = 'default';
+export const LIBRARY = 'library';
+export const FULL = 'full';
+export const ALL = 'all';
+export const OUTBOUND = 'outbound';
+export const VIET_GUYS = 'vietguyszalotrans';
+
+const prefix = 'app/v2Containers/Zalo';
+export const ZALO_TEMPLATE_INFO_REQUEST = `${prefix}/ZALO_TEMPLATE_INFO_REQUEST`;
+export const ZALO_TEMPLATE_INFO_SUCCESS = `${prefix}/ZALO_TEMPLATE_INFO_SUCCESS`;
+export const ZALO_TEMPLATE_INFO_ERROR = `${prefix}/ZALO_TEMPLATE_INFO_ERROR`;
+export const ZALO_TEMPLATE_PREVIEW_RESET = `${prefix}/ZALO_TEMPLATE_PREVIEW_RESET`;
+export const ZALO_TEMPLATE_PREVIEW_INFO = `${prefix}/ZALO_TEMPLATE_PREVIEW_INFO`;
+export const ZALO_TEMPLATE_INFO_RESET = `${prefix}/ZALO_TEMPLATE_INFO_RESET`;
+
+export const ZALO_STATUSES = {
+  PENDING_REVIEW: 'PENDING_REVIEW',
+  REJECT: 'REJECT',
+  ENABLE: 'ENABLE',
+  DISABLE: 'DISABLE',
+};
+
+export const ZALO_STATUS_OPTIONS = [
+  {
+    key: 'enable',
+    value: ZALO_STATUSES.ENABLE,
+    label: <FormattedMessage {...messages.ENABLE_STATUS} />,
+  },
+  {
+    key: 'reject',
+    value: ZALO_STATUSES.REJECT,
+    label: <FormattedMessage {...messages.REJECT_STATUS} />,
+  },
+  {
+    key: 'disable',
+    value: ZALO_STATUSES.DISABLE,
+    label: <FormattedMessage {...messages.DISABLE_STATUS} />,
+  },
+  {
+    key: 'reviewPending',
+    value: ZALO_STATUSES.PENDING_REVIEW,
+    label: <FormattedMessage {...messages.PENDING_REVIEW_STATUS} />,
+  },
+];

package/v2Containers/Zalo/index.js

@@ -0,0 +1,548 @@
+/* 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, update } 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 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 { makeSelectZalo, makeSelectAccount, makeSelectGapitTemplates } from './selectors';
+import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
+import * as zaloActions from './actions';
+import './index.scss';
+import {
+  SUCCESS_ALERT,
+  REQUEST,
+  EMBEDDED,
+  DEFAULT,
+  TAG,
+  FULL,
+  ALL,
+  OUTBOUND,
+  LIBRARY,
+  ERROR_ALERT,
+  WARNING_ALERT,
+  ZALO_STATUSES,
+  VIET_GUYS,
+} from './constants';
+import { SMS, 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 = (props) => {
+  const {
+    intl,
+    actions,
+    isFullMode,
+    templateData = {},
+    editData = {},
+    accountData: { selectedZaloAccount = {}, senderDetails = {} } = {},
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    getFormData,
+    selectedOfferDetails,
+    gapItTemplateData,
+  } = props || {};
+  const {hostName = ''} = senderDetails;
+  const { formatMessage } = intl;
+  const [oa_id, setOaId] = useState('');
+  const [token, setToken] = useState('');
+  const [username, setUsername] = useState('');
+  const [templateName, setTemplateName] = useState('');
+  const [templateId, setTemplateId] = useState('');
+// Initialize the state for templateListParams based on the nested properties of templateData.
+// If templateData.versions.base.content.zalo.listParams is available, use it.
+// Otherwise, if hostName is VIET_GUYS and templateData.templateConfigs.varMapped is available,
+// convert it to an array of entries. If not, use templateData.templateConfigs.varMapped or an empty array.
+  const [templateListParams, setTemplateListParams] = useState(
+      (templateData?.versions?.base?.content?.zalo?.listParams ||
+      ((hostName === VIET_GUYS && templateData?.templateConfigs?.varMapped)
+        ? Object.entries(templateData?.templateConfigs?.varMapped)
+        : templateData?.templateConfigs?.varMapped)) ?? []
+    );
+  const [templatePreviewUrl, setTemplatePreviewUrl] = useState('');
+  const [templateStatus, setZaloTemplateStatus] = useState(
+    ZALO_STATUSES.ENABLE,
+  );
+  const [gapitAllTemplateData, setGapitAllTemplateData] = useState([]);
+  const [tags, updateTags] = useState([]);
+  const [textAreaId, updateTextAreaId] = useState('');
+  const { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
+    editData;
+  const {
+    _id = '',
+    accountId = '',
+    zaloAccountId = '',
+    accountName = '',
+    templateConfigs: { id = '', varMapped = {} } = {},
+    token: zaloToken = '',
+  } = templateData;
+  const zaloTempId = _id || id;
+  const ZaloFooter = styled.div`
+    background-color: ${CAP_WHITE};
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    margin-left: -32px;
+    padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+    z-index: 1;
+    
+    .ant-btn {
+      margin-right: ${CAP_SPACE_16};
+    }
+    }
+`;
+  //gets account details
+  useEffect(() => {
+    if (!isEmpty(selectedZaloAccount) || !isEmpty(templateData)) {
+      const {
+        sourceAccountIdentifier = '',
+        configs: { token: accessToken = '' } = {},
+        name = '',
+      } = selectedZaloAccount;
+      const oaId = getDefaultTags === OUTBOUND ? zaloAccountId : accountId;
+      setOaId(sourceAccountIdentifier || oaId);
+      setToken(accessToken || zaloToken);
+      setUsername(name || accountName);
+    }
+    setGapitAllTemplateData(gapItTemplateData);
+  }, [selectedZaloAccount, templateData, gapItTemplateData]);
+
+  const updateTemplateData = (gapitTemplateId, templateName, listParams, previewUrl, status) => {
+    setTemplateName(templateName);
+    setTemplateId(gapitTemplateId);
+    setTemplateListParams(listParams);
+    setTemplatePreviewUrl(previewUrl);
+    setZaloTemplateStatus(status);
+    updateTextAreaId(listParams[0]?.name);
+  };
+
+  //gets template details
+  useEffect(() => {
+    if (zaloTempId && oa_id && token && username && hostName === VIET_GUYS) {
+      actions.getTemplateInfoById({
+        username,
+        oa_id,
+        token,
+        id: zaloTempId,
+        actionCallback,
+      });
+    } else if (hostName !== VIET_GUYS) {
+      const { _id: gapitTemplateId = '' } = templateData;
+      if (gapitTemplateId) {
+        const data = gapitAllTemplateData.find(template => template._id == gapitTemplateId);
+        const { templateName = "", listParams = [], previewUrl = "", status = "" } = data?.versions?.base?.content?.zalo || {};
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, status);
+      } else {
+        const { id: gapitTemplateId = '', name: templateName = '', template: previewUrl = '', varMapped: listParams = {} } = templateData?.templateConfigs || {};
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, ZALO_STATUSES.ENABLE);
+      }
+    }
+    //cleanup code
+    return () => {
+      actions.resetTemplateInfoData();
+    };
+  }, [zaloTempId, oa_id, token, username]);
+
+  const handleSetValues = (paramsData = []) =>
+    paramsData?.map((paramData) => {
+      for (const key in varMapped) {
+        if (paramData?.name === key) {
+          paramData.value = varMapped[key];
+        }
+      }
+      return paramData;
+    });
+
+  const setDataForEdit = (setValues) => {
+    if(hostName === VIET_GUYS) {
+      const {
+        name = '',
+        _id: zaloId = '',
+        versions: {
+          base: {
+            content: {
+              zalo: {
+                listParams: paramsData = [],
+                previewUrl = '',
+                status = '',
+              } = {},
+            } = {},
+          } = {},
+        } = {},
+      } = zaloTemplateInfoValue;
+      const handledListParams = setValues ? handleSetValues(paramsData) : paramsData;
+      updateTemplateData(zaloId, name, handledListParams, previewUrl, status);
+    } else {
+      if (setValues) {
+        const { id: gapitTemplateId = '', name: templateName = '', template: previewUrl = '', varMapped: listParams = {} } = templateData?.templateConfigs || {};
+        const handledListParams = handleSetValues(listParams);
+        updateTemplateData(gapitTemplateId, templateName, handledListParams, previewUrl, ZALO_STATUSES.ENABLE);
+      } else {
+        const { _id: gapitTemplateId = '' } = templateData;
+        let data = gapitAllTemplateData?.find(template => template?._id == gapitTemplateId);
+        const { templateName = "", listParams = [], previewUrl = "", status = "" } = data?.versions?.base?.content?.zalo || {};
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, status);
+      }
+    }
+  };
+
+  useEffect(() => {
+    setDataForEdit(false);
+  }, [zaloTemplateInfoValue]);
+
+  useEffect(() => {
+    if (!isEmpty(varMapped)) {
+      setDataForEdit(true);
+    }
+  }, [varMapped, zaloTemplateInfoValue]);
+
+  useEffect(() => {
+    let tag = get(metaEntities, `tags.standard`, []);
+    const { type, module } = location?.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+      tag = supportedTags;
+    }
+    updateTags(tag);
+  }, [metaEntities]);
+
+  useEffect(() => {
+    //fetching tags
+    const { type, module } = location?.query || {};
+    const isEmbedded = type === EMBEDDED;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context: isEmbedded ? module : DEFAULT,
+      embedded: isEmbedded ? type : FULL,
+    };
+    if (getDefaultTags) {
+      query.context = getDefaultTags;
+    }
+    globalActions.fetchSchemaForEntity(query);
+  }, []);
+
+  const handleOnTagsContextChange = (data) => {
+    const { type } = location?.query || {};
+    const isEmbedded = type === EMBEDDED;
+    const query = {
+      layout: SMS,
+      type: TAG,
+      context:
+        (data || '').toLowerCase() === ALL
+          ? DEFAULT
+          : (data || '').toLowerCase(),
+      embedded: isEmbedded ? type : FULL,
+    };
+    globalActions.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;
+          return {
+            ...listParams,
+            value: text,
+            error: isLengthError
+              ? formatMessage(messages.maxMinLengthMessage, {
+                  minLength,
+                  maxLength,
+                })
+              : '',
+          };
+        }
+        return listParams;
+      });
+      setTemplateListParams(updatedZaloTemplateInfo);
+    }
+  };
+
+  const tagValidationErrorMessage = (message) => {
+    const tagValidationResponse =
+      validateTags({
+        content: message,
+        tagsParam: tags,
+        injectedTagsParams: injectedTags,
+        location,
+        tagModule: getDefaultTags,
+      }) || {};
+    const { unsupportedTags = [], isBraceError } = tagValidationResponse;
+    let tagError = '';
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
+    if (isBraceError) {
+      tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
+    }
+    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 error = handleErrorValidation(value, field);
+        return {
+          ...listParams,
+          value,
+          error,
+        };
+      }
+      return listParams;
+    });
+    setTemplateListParams(updatedZaloTemplateInfo);
+  };
+
+  const renderTextBoxesForListParams = (listParam) => {
+    const { name, error, value } = listParam;
+    return (
+      <CapInput
+        id={`zalo-${name}`}
+        onChange={(e) => handleFormDataChange(e, listParam)}
+        errorMessage={error}
+        placeholder={formatMessage(messages.addVariableWithMessage)}
+        defaultValue={value || ''}
+        value={value || ''}
+        size="default"
+        onFocus={() => setTextAreaId(name)}
+        disabled={isFullMode}
+      />
+    );
+  };
+
+  const setTextAreaId = (fieldName) => {
+    updateTextAreaId(fieldName);
+  };
+
+  const getTemplateStatusType = () => {
+    switch (templateStatus) {
+      case ZALO_STATUSES.ENABLE:
+        return SUCCESS_ALERT;
+      case ZALO_STATUSES.REJECT:
+        return ERROR_ALERT;
+      default:
+        return WARNING_ALERT;
+    }
+  };
+
+  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 = () => {
+    let varMap = {};
+    if (hostName !== VIET_GUYS) {
+      varMap = templateListParams;
+    } else {
+      templateListParams?.forEach((listParam) => {
+        const { name = '', value = '' } = listParam;
+        varMap[name] = value;
+      }
+      );
+    }
+    const payload = {
+      channel: ZALO,
+      accountId: oa_id,
+      ...(getDefaultTags === OUTBOUND && {
+        zaloAccountId: oa_id,
+      }),
+      accountName: username,
+      templateConfigs: {
+        id: templateId?.toString(),
+        name: templateName,
+        template: templatePreviewUrl,
+        varMapped: varMap,
+      },
+      token,
+      host: hostName,
+    };
+    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 && hostName === VIET_GUYS}>
+      <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()}
+            />
+          )}
+          <CapRow>
+            <CapRow className="whatsapp-render-heading">
+              <CapHeader
+                className="zalo-variable-heading"
+                title={
+                  <CapHeading type="h4">
+                    {formatMessage(messages.variables)}
+                  </CapHeading>
+                }
+                suffix={
+                  <TagList
+                    label={formatMessage(globalMessages.addLabels)}
+                    onTagSelect={onTagSelect}
+                    location={location}
+                    tags={tags || []}
+                    onContextChange={handleOnTagsContextChange}
+                    injectedTags={injectedTags || {}}
+                    selectedOfferDetails={selectedOfferDetails}
+                    disabled={isFullMode}
+                  />
+                }
+              />
+            </CapRow>
+            <CapRow className="zalo-variable-list">{renderContent()}</CapRow>
+          </CapRow>
+        </CapColumn>
+        <CapColumn span={10}>
+          <TemplatePreview
+            channel={ZALO}
+            templateData={{ templatePreviewUrl, fullMode: isFullMode }}
+          />
+        </CapColumn>
+      </CapRow>
+      {!isFullMode && (
+        <ZaloFooter>
+          <CapTooltip
+            title={
+              isEditDoneDisabled()
+                ? formatMessage(messages.btnDisabledTooltip)
+                : ''
+            }
+            placement={'right'}
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                onClick={saveToMessage}
+                disabled={isEditDoneDisabled()}
+              >
+                <FormattedMessage {...globalMessages.done} />
+              </CapButton>
+            </div>
+          </CapTooltip>
+        </ZaloFooter>
+      )}
+    </CapSpin>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  editData: makeSelectZalo(),
+  accountData: makeSelectAccount(),
+  metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
+  gapItTemplateData: makeSelectGapitTemplates(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(zaloActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(Zalo),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/Zalo/index.scss

@@ -0,0 +1,75 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+
+.cap-zalo-creatives {
+  .zalo-variable-heading {
+    margin-top: $CAP_SPACE_24;
+  }
+
+  .zalo-variable-list {
+    margin: 0px 0px 200px; 
+
+    input {
+      height: $CAP_SPACE_40;
+      margin-top: $CAP_SPACE_16;
+    }
+
+    .ant-calendar-picker {
+      width: 100%;
+
+      .ant-calendar-picker-icon {
+        top: 50%;
+      }
+    }
+
+    .ant-input-suffix {
+      top: 62%;
+    }
+  }
+
+  .variable-field-container {
+    display: flex;
+    margin-top: $CAP_SPACE_08;
+
+    div {
+      font-weight: 400;
+    }
+
+    .variable-field-length {
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  .zalo-preview-container {
+    position: fixed;
+    text-align: center;
+    padding-left: 72px;
+    padding-right: 110px;
+
+    .preview-head {
+      font-weight: 500;
+      font-size: $FONT_SIZE_M;
+      color: $FONT_COLOR_01;
+    }
+
+    .preview-text {
+      font-weight: 400;
+      font-size: $FONT_SIZE_S;
+      padding-top: $CAP_SPACE_08;
+    }
+
+    .preview-link {
+      font-weight: 500;
+      font-size: $FONT_SIZE_M;
+      color: $FONT_COLOR_05;
+      margin-top: $CAP_SPACE_19;
+      cursor: pointer;
+
+      svg {
+        height: $CAP_SPACE_16;
+        width: $CAP_SPACE_16;
+      }
+    }
+  }
+}