@capillarytech/creatives-library 7.17.80 → 7.17.81-alpha.0

package/containers/App/constants.js

@@ -72,7 +72,6 @@ export const PROMO_ENGINE_RELATED_TAGS = [
 ];
 
 export const BADGES_RELATED_TAGS = [
-  "Badge",
   "Badge_expiry_date",
   "badge_expiry_mm_slash_dd_slash_yyyy",
   "badge_expiry_dd_slash_mm_slash_yyyy",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.80",
+  "version": "7.17.81-alpha.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/InApp/index.js

@@ -0,0 +1,499 @@
+/* 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 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 } 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,
+} 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 InApp = (props) => {
+  const {
+    intl,
+    actions,
+    isFullMode,
+    templateData = {},
+    editData = {},
+    accountData: { selectedZaloAccount = {} } = {},
+    globalActions,
+    location,
+    getDefaultTags,
+    supportedTags,
+    metaEntities,
+    injectedTags,
+    getFormData,
+    selectedOfferDetails,
+  } = props || {};
+  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 [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);
+    }
+  }, [selectedZaloAccount, templateData]);
+
+  //gets template details
+  useEffect(() => {
+    if (zaloTempId && oa_id && token && username) {
+      actions.getTemplateInfoById({
+        username,
+        oa_id,
+        token,
+        id: zaloTempId,
+        actionCallback,
+      });
+    }
+    //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) => {
+    const {
+      name = '',
+      _id: zaloId = '',
+      versions: {
+        base: {
+          content: {
+            zalo: {
+              listParams: paramsData = [],
+              previewUrl = '',
+              status = '',
+            } = {},
+          } = {},
+        } = {},
+      } = {},
+    } = zaloTemplateInfoValue;
+    setTemplateName(name);
+    setTemplateId(zaloId);
+    setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
+    setTemplatePreviewUrl(previewUrl);
+    setZaloTemplateStatus(status);
+    updateTextAreaId(paramsData[0]?.name);
+  };
+
+  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 = () => {
+    const varMap = {};
+    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,
+    };
+    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()}
+            />
+          )}
+          <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(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(zaloActions, dispatch),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(InApp),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});