@capillarytech/creatives-library 7.17.35 → 7.17.37-alpha.0

package/v2Containers/Zalo/index.js

@@ -0,0 +1,390 @@
+/* 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,
+  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 messages from "./messages";
+import withCreatives from "../../hoc/withCreatives";
+import {
+  SUCCESS_ALERT,
+  REQUEST,
+  EMBEDDED,
+  DEFAULT,
+  TAG,
+  FULL,
+  ALL,
+  LIBRARY,
+  ERROR_ALERT,
+  WARNING_ALERT,
+  ZALO_STATUSES,
+} 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 = ({
+  intl,
+  actions,
+  zaloTemplateInfoData,
+  templateData,
+  location,
+  metaEntities,
+  getDefaultTags,
+  supportedTags,
+  injectedTags,
+  selectedOfferDetails,
+  template,
+}) => {
+  const { formatMessage } = intl;
+  const [zaloTemplateListParams, setZaloTemplateListParams] = useState([]);
+  const [templatePreviewUrl, setTemplatePreviewUrl] = useState("");
+  const [tags, updateTags] = useState([]);
+  const [textAreaId, updateTextAreaId] = useState("");
+  const [templateStatus, setZaloTemplateStatus] = useState(ZALO_STATUSES.ENABLE);
+
+  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};
+    }
+    }
+`;
+
+  const { zaloTemplateInfoStatus, zaloTemplateInfoValue } =
+    zaloTemplateInfoData;
+
+  // 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;
+      setZaloTemplateListParams(listParams);
+      setTemplatePreviewUrl(previewUrl);
+      setZaloTemplateStatus(status);
+      updateTextAreaId(listParams[0]?.name);
+    }
+  }, [zaloTemplateInfoValue]);
+
+  useEffect(() => {
+    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`, []);
+    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;
+    }
+    actions.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,
+    };
+    actions.fetchSchemaForEntity(query);
+  };
+
+  const onTagSelect = (data) => {
+    if (data && textAreaId) {
+      const updatedZaloTemplateInfo = zaloTemplateListParams.map((item) => {
+        if (item?.name === textAreaId) {
+          const text = `${item?.value ? item?.value : ""}{{${data}}}`;
+          return {
+            ...item,
+            value: text,
+            error:
+              text.length <= item?.minLength || text.length > item?.maxLength
+                ? formatMessage(messages.maxMinLengthMessage, {
+                  minLength: item?.minLength,
+                  maxLength: item?.maxLength,
+                })
+                : "",
+          };
+        }
+        return item;
+      });
+      setZaloTemplateListParams(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 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 error = handleErrorValidation(value, field);
+        return {
+          ...item,
+          value,
+          error,
+        };
+      }
+      return item;
+    });
+    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) => {
+    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)}
+      />
+    );
+  };
+
+  const setTextAreaId = (fieldName) => {
+    updateTextAreaId(fieldName);
+  };
+
+  const handlePreview = () => {
+    window.open(templatePreviewUrl, "_blank");
+  };
+
+  const getTemplateStatusType = () => {
+    switch (templateStatus) {
+      case ZALO_STATUSES.ENABLE:
+        return SUCCESS_ALERT;
+      case ZALO_STATUSES.REJECT:
+        return ERROR_ALERT;
+      default:
+        return WARNING_ALERT;
+    }
+  };
+
+  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()}
+          />
+          <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}
+                  />
+                }
+              />
+            </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 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></ZaloFooter>
+    </CapSpin>
+  );
+};
+
+const mapStateToProps = createStructuredSelector({
+  zaloTemplateInfoData: makeSelectZalo(),
+  template: makeSelectTemplates(),
+  metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(
+    { ...zaloActions, ...templateActions, ...globalActions },
+    dispatch
+  ),
+});
+
+export default withCreatives({
+  WrappedComponent: injectIntl(Zalo),
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/Zalo/index.scss

@@ -0,0 +1,76 @@
+@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 {
+    text-align: center;
+    position: fixed;
+    right: 0;
+    padding-left: 194px;
+    padding-right: 116px;
+
+    .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;
+      }
+    }
+  }
+}

package/v2Containers/Zalo/messages.js

@@ -0,0 +1,74 @@
+import { defineMessages } from "react-intl";
+const prefix = `creatives.containersV2.zalo`;
+
+export default defineMessages({
+  approvedStatusMsg: {
+    id: `${prefix}.approvedStatusMsg`,
+    defaultMessage: "This template has been {status}",
+  },
+  variables: {
+    id: `${prefix}.variables`,
+    defaultMessage: "Variables",
+  },
+  addVariableWithMessage: {
+    id: `${prefix}.addVariableWithMessage`,
+    defaultMessage: "Add labels or text or combination of both",
+  },
+  variableType: {
+    id: `${prefix}.variableType`,
+    defaultMessage: "Variable type: <{fieldName}>",
+  },
+  charactersCount: {
+    id: `${prefix}.charactersCount`,
+    defaultMessage: "Characters count {variableLength}/{fixedLength}",
+  },
+  maxMinLengthMessage: {
+    id: `${prefix}.maxLengthMessage`,
+    defaultMessage:
+      "Character count for this variable should be in between {minLength} to {maxLength}",
+  },
+  previewHead: {
+    id: `${prefix}.previewText`,
+    defaultMessage: "Preview",
+  },
+  previewText: {
+    id: `${prefix}.previewText`,
+    defaultMessage: `Preview of the template is generated on the Zalo platform. Click on ‘Open preview’ to view it in a new tab`,
+  },
+  openPreview: {
+    id: `${prefix}.openPreview`,
+    defaultMessage: "Open Preview",
+  },
+  ENABLE_STATUS: {
+    id: `${prefix}.ENABLE_STATUS`,
+    defaultMessage: 'Enable',
+  },
+  REJECT_STATUS: {
+    id: `${prefix}.REJECT_STATUS`,
+    defaultMessage: 'Reject',
+  },
+  DISABLE_STATUS: {
+    id: `${prefix}.DISABLE_STATUS`,
+    defaultMessage: 'Disable',
+  },
+  PENDING_REVIEW_STATUS: {
+    id: `${prefix}.PENDING_REVIEW_STATUS`,
+    defaultMessage: 'Review Pending',
+  },
+  ENABLE: {
+    id: `${prefix}.ENABLE`,
+    defaultMessage: 'enabled',
+  },
+  REJECT: {
+    id: `${prefix}.REJECT`,
+    defaultMessage: 'rejected',
+  },
+  DISABLE: {
+    id: `${prefix}.DISABLE`,
+    defaultMessage: 'disabled',
+  },
+  PENDING_REVIEW: {
+    id: `${prefix}.PENDING_REVIEW`,
+    defaultMessage: 'pending review',
+  },
+});

package/v2Containers/Zalo/reducer.js

@@ -0,0 +1,57 @@
+import { fromJS } from "immutable";
+import {
+  ZALO_TEMPLATE_INFO_ERROR,
+  ZALO_TEMPLATE_INFO_SUCCESS,
+  ZALO_TEMPLATE_INFO_REQUEST,
+  ZALO_TEMPLATE_PREVIEW_RESET,
+  ZALO_TEMPLATE_PREVIEW_INFO,
+  SUCCESS,
+  REQUEST,
+  ERROR,
+} from "./constants";
+
+const initialState = fromJS({
+  zaloTemplateInfoStatus: "",
+  zaloTemplateInfoValue: "",
+  zaloTemplateInfoError: "",
+  zaloTemplatePreviewData: "",
+});
+
+const zaloReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ZALO_TEMPLATE_INFO_REQUEST:
+      return state
+        .set("zaloTemplateInfoStatus", REQUEST)
+        .set("zaloTemplateInfoValue", "")
+        .set("zaloTemplateInfoError", null);
+
+    case ZALO_TEMPLATE_INFO_SUCCESS:
+      return state
+        .set("zaloTemplateInfoStatus", SUCCESS)
+        .set("zaloTemplateInfoValue", action.result)
+        .set("zaloTemplateInfoError", null);
+
+    case ZALO_TEMPLATE_INFO_ERROR:
+      return state
+        .set("zaloTemplateInfoStatus", ERROR)
+        .set("zaloTemplateInfoValue", "")
+        .set("zaloTemplateInfoError", action.error);
+
+    case ZALO_TEMPLATE_PREVIEW_INFO:
+      return state
+        .set("zaloTemplateInfoStatus", SUCCESS)
+        .set("zaloTemplatePreviewData", action.result)
+        .set("zaloTemplateInfoError", null);
+
+    case ZALO_TEMPLATE_PREVIEW_RESET:
+      return state
+        .set("zaloTemplateInfoStatus", REQUEST)
+        .set("zaloTemplatePreviewData", "")
+        .set("zaloTemplateInfoError", null);
+
+    default:
+      return state;
+  }
+};
+
+export default zaloReducer;

package/v2Containers/Zalo/saga.js

@@ -0,0 +1,35 @@
+import { call, put, takeLatest } from "redux-saga/effects";
+import * as Api from "../../services/api";
+import {
+  ZALO_TEMPLATE_INFO_REQUEST,
+  ZALO_TEMPLATE_INFO_SUCCESS,
+  ZALO_TEMPLATE_INFO_ERROR,
+  ZALO_TEMPLATE_PREVIEW_INFO,
+} from "./constants";
+
+export function* getTemplateInfoById({ payload }) {
+  try {
+    const res = yield call(Api.getTemplateInfoById, payload);
+    if (res?.success) {
+      yield put({
+        type: payload?.preview
+          ? ZALO_TEMPLATE_PREVIEW_INFO
+          : ZALO_TEMPLATE_INFO_SUCCESS,
+        result: res?.response || {},
+      });
+    } else {
+      yield put({
+        type: ZALO_TEMPLATE_INFO_ERROR,
+        error: res?.error || res?.message,
+      });
+    }
+  } catch (error) {
+    yield put({ type: ZALO_TEMPLATE_INFO_ERROR, error });
+  }
+}
+
+export function* watchForGetTemplateInfoById() {
+  yield takeLatest(ZALO_TEMPLATE_INFO_REQUEST, getTemplateInfoById);
+}
+
+export default [watchForGetTemplateInfoById];

package/v2Containers/Zalo/selectors.js

@@ -0,0 +1,14 @@
+import { createSelector } from "reselect";
+import { fromJS } from "immutable";
+
+const selectZaloDomain = (state = fromJS({})) => state.get("zalo");
+
+const makeSelectZalo = () =>
+  createSelector(selectZaloDomain, (substate = fromJS({})) => ({
+    zaloTemplateInfoStatus: substate.get("zaloTemplateInfoStatus"),
+    zaloTemplateInfoValue: substate.get("zaloTemplateInfoValue"),
+    zaloTemplateInfoError: substate.get("zaloTemplateInfoError"),
+    zaloTemplatePreviewData: substate.get("zaloTemplatePreviewData"),
+  }));
+
+export { makeSelectZalo, selectZaloDomain };

package/v2Containers/Zalo/tests/actions.test.js

@@ -0,0 +1,20 @@
+import * as types from "../constants";
+import * as actions from "../actions";
+
+describe("Test zalo actions", () => {
+  it("has a type of ZALO_TEMPLATE_INFO_REQUEST action", () => {
+    const payload = {};
+    const expected = {
+      type: types.ZALO_TEMPLATE_INFO_REQUEST,
+      payload,
+    };
+    expect(actions.getTemplateInfoById(payload)).toEqual(expected);
+  });
+
+  it("has a type of ZALO_TEMPLATE_PREVIEW_RESET action", () => {
+    const expected = {
+      type: types.ZALO_TEMPLATE_PREVIEW_RESET,
+    };
+    expect(actions.resetTemplateInfoData()).toEqual(expected);
+  });
+});