@woovi/ui 4.0.942

package/src/import/xlsx/ImportUtils.tsx

@@ -0,0 +1,726 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import { formatAnyDateToMongoDate, isValidAnyDate } from '@woovi/dates';
+import {
+  IMPORT_STATUS,
+  InputCell,
+  InputDateCell,
+  InputMoneyCell,
+  InputPhoneCell,
+  InputTaxIDCell,
+} from '@woovi/table';
+import {
+  convertToCents,
+  convertToMoney,
+  isSafeCNPJ,
+  isSafeCPF,
+} from '@woovi/utils';
+
+export const EMAIL_REGEX =
+  // eslint-disable-next-line
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+export const formatValue = (value: string | boolean): string => {
+  if (typeof value === 'boolean') {
+    return value.toString().toLowerCase();
+  }
+
+  return typeof value === 'string' ? value?.trim()?.toLowerCase() : value;
+};
+
+const getDateFormat = (value: string | boolean): string => {
+  if (typeof value === 'boolean') {
+    return value.toString().toLowerCase();
+  }
+
+  const splittedValue = value.split('/');
+  const year = splittedValue.at(2);
+
+  if (!year) {
+    return 'DD/MM/YY';
+  }
+
+  if (year.length === 4) {
+    return 'DD/MM/YYYY';
+  }
+
+  return 'DD/MM/YY';
+};
+
+export const formatDate = (value: string | boolean | Date): string => {
+  if (moment.isDate(value)) {
+    return moment(value).format('DD/MM/YYYY');
+  }
+
+  if (typeof value === 'boolean') {
+    return value.toString().toLowerCase();
+  }
+
+  const dateFormat = getDateFormat(value);
+
+  return moment(value, dateFormat).format('DD/MM/YYYY');
+};
+
+export const formatTaxID = (value: string | number | null): string | null => {
+  if (typeof value === 'number') {
+    return value.toString();
+  }
+
+  if (!value) {
+    return null;
+  }
+
+  return value?.trim()?.replace(/\D+/g, '');
+};
+
+export const formatCurrency = (value: string | number): string | null => {
+  if (typeof value === 'number') {
+    const valueString = value.toString();
+
+    return convertToMoney(
+      convertToCents(valueString, {
+        decimalSeparator: '.',
+        thousandSeparator: ',',
+      }),
+    );
+  }
+
+  if (!value) {
+    return null;
+  }
+
+  return convertToMoney(
+    convertToCents(value, {
+      decimalSeparator: '.',
+      thousandSeparator: ',',
+    }),
+  );
+};
+
+export const COLUMN_TYPE = {
+  TAX_ID: 'taxID',
+  ACTIVE: 'active',
+  EMAIL: 'email',
+  GENDER: 'gender',
+  DATE: 'date',
+  TEXT: 'text',
+  PHONE: 'phone',
+  SING_PHONE: 'phone',
+  TAG: 'tag',
+  VALUE: 'currency',
+};
+
+const ACTIVE_VALUES = {
+  YES: ['sim', 'true', 'ativo', 'átivo', 'si'],
+  NO: ['não', 'false', 'inativo', 'nao', 'no'],
+};
+
+export const TRUTH_VALUES = ['sim', 'true', 'ativo', 'átivo', 'si'];
+
+export const getActiveValue = (value: string): boolean =>
+  TRUTH_VALUES.includes(formatValue(value));
+
+export const isActiveValid = (value: string): boolean => {
+  const formattedValue = formatValue(value);
+
+  if (
+    ACTIVE_VALUES.YES.includes(formattedValue) ||
+    ACTIVE_VALUES.NO.includes(formattedValue)
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export const getDateValue = (value: string): string | null => {
+  const formattedDate = formatAnyDateToMongoDate(value);
+
+  if (formattedDate) {
+    return formattedDate;
+  }
+
+  return null;
+};
+
+export const getPhoneNumbersValue = (value: string): string[] | null => {
+  if (!value) {
+    return null;
+  }
+
+  const phones = value.toString().split(';');
+
+  const phonesFormatted = phones.map((phone) => {
+    if (phone.substring(0, 3) === '+55') {
+      return phone.slice(1);
+    }
+
+    if (phone.substring(0, 2) === '55') {
+      return phone;
+    }
+
+    return `55${phone}`;
+  });
+
+  return phonesFormatted;
+};
+
+export const getSingPhoneNumberValue = (value: string): string | null => {
+  if (!value) {
+    return null;
+  }
+
+  const phone = value.toString();
+
+  if (phone.substring(0, 3) === '+55') {
+    return phone.slice(1);
+  }
+
+  if (phone.substring(0, 2) === '55') {
+    return phone;
+  }
+
+  return `55${phone}`;
+};
+
+export const getTagsValue = (value: string): string[] | null => {
+  if (!value) {
+    return null;
+  }
+
+  const tags = value.toString().split(';');
+
+  const tagsFormatted = tags.map((tag) => {
+    return tag.trim().toLowerCase();
+  });
+
+  return tagsFormatted;
+};
+
+/* const optionsActive = [
+  {
+    value: 'true',
+    label: 'Yes',
+  },
+  {
+    value: 'false',
+    label: 'No',
+  },
+];
+
+const optionsGender = [
+  {
+    value: 'female',
+    label: 'Feminino',
+  },
+  {
+    value: 'male',
+    label: 'Masculino',
+  },
+  {
+    value: 'other',
+    label: 'Outro',
+  },
+]; */
+
+export const getCellProps = (
+  type,
+  value,
+  onChange,
+  onBlur,
+  onChangeRadioGroup,
+  isValid,
+  isProcessing,
+) => {
+  /* const CELL_COMPONENT_PROPS = {
+    [COLUMN_TYPE.ACTIVE]: {
+      options: optionsActive,
+      value,
+      onChangeRadioGroup,
+      isValid,
+    },
+    [COLUMN_TYPE.GENDER]: {
+      options: optionsGender,
+      value,
+      onChangeRadioGroup,
+      isValid,
+    },
+    [COLUMN_TYPE.DATE]: {
+      value,
+      onChange,
+      isValid,
+    },
+  }; */
+
+  return {
+    value,
+    onChange,
+    onBlur,
+    isValid,
+    isProcessing,
+  };
+};
+
+const COLUMN_TYPE_MAP = {
+  TAX_ID: ['CPF Colaborador', 'CPF Gestor', 'CPF/CNPJ do Cliente'],
+  ACTIVE: ['Ativo'],
+  EMAIL: ['E-mail Colaborador', 'E-mail Gestor'],
+  GENDER: ['Gênero Colaborador'],
+  DATE: [
+    'Nascimento Colaborador',
+    'Admissão Colaborador',
+    'Demissão Colaborador',
+    'Data de Vencimento',
+  ],
+  PHONE: ['Celulares'],
+  SING_PHONE: ['Celular do Cliente'],
+  TAG: ['Tags'],
+  VALUE: ['Valor', 'Valor em Reais'],
+};
+
+export const getColumnType = (name: string): string => {
+  if (COLUMN_TYPE_MAP.TAX_ID.includes(name)) {
+    return COLUMN_TYPE.TAX_ID;
+  }
+
+  if (COLUMN_TYPE_MAP.ACTIVE.includes(name)) {
+    return COLUMN_TYPE.ACTIVE;
+  }
+
+  if (COLUMN_TYPE_MAP.EMAIL.includes(name)) {
+    return COLUMN_TYPE.EMAIL;
+  }
+
+  if (COLUMN_TYPE_MAP.GENDER.includes(name)) {
+    return COLUMN_TYPE.GENDER;
+  }
+
+  if (COLUMN_TYPE_MAP.DATE.includes(name)) {
+    return COLUMN_TYPE.DATE;
+  }
+
+  if (COLUMN_TYPE_MAP.PHONE.includes(name)) {
+    return COLUMN_TYPE.PHONE;
+  }
+
+  if (COLUMN_TYPE_MAP.SING_PHONE.includes(name)) {
+    return COLUMN_TYPE.SING_PHONE;
+  }
+
+  if (COLUMN_TYPE_MAP.TAG.includes(name)) {
+    return COLUMN_TYPE.TAG;
+  }
+
+  if (COLUMN_TYPE_MAP.VALUE.includes(name)) {
+    return COLUMN_TYPE.VALUE;
+  }
+
+  return COLUMN_TYPE.TEXT;
+};
+
+const getFormattedValue = (value: string, type: string) => {
+  const FORMATTED_VALUE = {
+    [COLUMN_TYPE.TAX_ID]: () => formatTaxID(value),
+    [COLUMN_TYPE.EMAIL]: () => formatValue(value),
+    [COLUMN_TYPE.DATE]: () => formatDate(value),
+    [COLUMN_TYPE.VALUE]: () => formatCurrency(value),
+  };
+
+  return type && FORMATTED_VALUE[type]
+    ? FORMATTED_VALUE[type]() ?? value
+    : value;
+};
+
+const fieldsToFormat = [
+  COLUMN_TYPE.TAX_ID,
+  COLUMN_TYPE.EMAIL,
+  COLUMN_TYPE.VALUE,
+  COLUMN_TYPE.DATE,
+];
+
+const getItemsRow = (row, dataImportTable, header) =>
+  dataImportTable.reduce((acc, { name }) => {
+    const correctIndex = header
+      ?.map((item) => item?.trim().replace(/\.+$/, ''))
+      .indexOf(name?.trim());
+
+    const columnType = getColumnType(name);
+    const value = row[correctIndex];
+
+    const formattedValue =
+      value && fieldsToFormat.includes(columnType)
+        ? getFormattedValue(value, columnType)
+        : value;
+
+    return {
+      ...acc,
+      [name]: {
+        value: formattedValue,
+        isValid: true,
+        columnType,
+      },
+    };
+  }, {});
+
+export const getData = ({ excelData, dataImportTable, header, t }) => {
+  let newData = [];
+
+  for (const [i, row] of excelData.entries()) {
+    if (row.length === 0) {
+      continue;
+    }
+
+    const itemsRow = getItemsRow(row, dataImportTable, header);
+
+    const rowId = {
+      field: 'rowId',
+      value: uuidv4(),
+    };
+
+    const index = {
+      field: 'index',
+      value: i,
+    };
+
+    const importStatus = {
+      field: 'importStatus',
+      value: {
+        status: IMPORT_STATUS.PROCESSING,
+        message: [
+          t(
+            'We are processing your data, after that you will be able to edit and import',
+          ),
+        ],
+      },
+    };
+
+    const processed = {
+      ...itemsRow,
+      rowId,
+      importStatus,
+      index,
+    };
+
+    newData = [...newData, processed];
+  }
+
+  return newData;
+};
+
+export const isGenderValid = (value: string): boolean => {
+  const formattedValue = formatValue(value);
+
+  const isValid =
+    GENDER_VALUES.MALE.includes(formattedValue) ||
+    GENDER_VALUES.FEMALE.includes(formattedValue) ||
+    GENDER_VALUES.OTHER.includes(formattedValue);
+
+  return isValid;
+};
+
+type customColumnValidation = {
+  [key: string]: (value: string) => boolean;
+};
+type validateCellInput = {
+  type: string;
+  value: string;
+  requiredMessage: 'Não obrigatório' | 'Obrigatório';
+  customColumnValidation?: customColumnValidation;
+  columnName?: string;
+};
+export const validateCell = ({
+  type,
+  value,
+  requiredMessage,
+  customColumnValidation,
+  columnName = '',
+}: validateCellInput): boolean => {
+  const requiredValidateMapper = {
+    'Não obrigatório': true,
+    Obrigatório: false,
+  };
+
+  if (!value) {
+    return requiredValidateMapper[requiredMessage];
+  }
+
+  const COLUMN_VALIDATION_TYPE = {
+    [COLUMN_TYPE.TAX_ID]: () => isSafeCPF(value) || isSafeCNPJ(value),
+    [COLUMN_TYPE.ACTIVE]: () => isActiveValid(value),
+    [COLUMN_TYPE.GENDER]: () => isGenderValid(value),
+    [COLUMN_TYPE.EMAIL]: () => EMAIL_REGEX.test(value),
+    [COLUMN_TYPE.DATE]: () => isValidAnyDate(value),
+  };
+
+  const customValidationFn = customColumnValidation?.[columnName];
+  const isCustomValid = customValidationFn ? customValidationFn(value) : true;
+
+  if (!isCustomValid) {
+    return false;
+  }
+
+  return value && COLUMN_VALIDATION_TYPE[type]
+    ? COLUMN_VALIDATION_TYPE[type]() ?? true
+    : true;
+};
+
+export const getCellComponent = (field: string): React.ReactNode => {
+  const CELL_COMPONENTS = {
+    [COLUMN_TYPE.ACTIVE]: InputCell,
+    [COLUMN_TYPE.GENDER]: InputCell,
+    [COLUMN_TYPE.DATE]: InputDateCell,
+    [COLUMN_TYPE.VALUE]: InputMoneyCell,
+    [COLUMN_TYPE.TAX_ID]: InputTaxIDCell,
+    [COLUMN_TYPE.SING_PHONE]: InputPhoneCell,
+  };
+
+  return CELL_COMPONENTS[field] || InputCell;
+};
+
+export const EditableCell = ({
+  value: initialState,
+  row: { index },
+  column: { id, columnType, customColumnValidation, requiredMessage },
+  updateMyData, // This is a custom function that we supplied to our table instance
+  isProcessing,
+}): React.ReactNode => {
+  // We need to keep and update the state of the cell normally
+  const [cell, setCell] = useState({
+    value: initialState?.value,
+    isValid: initialState?.isValid,
+  });
+
+  const onChange = (e) => {
+    setCell({ ...cell, value: e?.target?.value });
+
+    if (columnType === COLUMN_TYPE.DATE) {
+      const newCell = {
+        ...initialState,
+        ...cell,
+        value: e?.target?.value,
+        isValid: validateCell({
+          type: columnType,
+          value: e?.target?.value,
+          columnName: id,
+          customColumnValidation,
+          requiredMessage,
+        }),
+      };
+
+      updateMyData(index, id, newCell);
+    }
+  };
+
+  // We'll only update and validate the external data when the input is blurred
+  const onBlur = () => {
+    const newCell = {
+      ...initialState,
+      ...cell,
+      isValid: validateCell({
+        type: columnType,
+        value: cell.value,
+        columnName: id,
+        customColumnValidation,
+        requiredMessage,
+      }),
+    };
+
+    updateMyData(index, id, newCell);
+  };
+
+  const onChangeRadioGroup = (value) => {
+    setCell({ ...cell, value });
+    const newCell = {
+      value,
+      isValid: validateCell({
+        type: columnType,
+        value,
+        columnName: id,
+        customColumnValidation,
+        requiredMessage,
+      }),
+    };
+
+    updateMyData(index, id, newCell);
+  };
+
+  // If the initialState.value is changed external, sync it up with our state
+  useEffect(() => {
+    setCell({
+      value: initialState?.value,
+      isValid: initialState?.isValid,
+    });
+  }, [initialState]);
+
+  const renderField = () => {
+    const Comp = getCellComponent(columnType);
+
+    if (!Comp) {
+      return null;
+    }
+
+    const itemProps = getCellProps(
+      columnType,
+      cell.value,
+      onChange,
+      onBlur,
+      onChangeRadioGroup,
+      cell.isValid,
+      isProcessing,
+    );
+
+    return (
+      <Comp
+        {...itemProps}
+        inputProps={{
+          'data-testid': `${columnType}-${index}-${id}`
+            .replaceAll(' ', '')
+            .toLocaleLowerCase(),
+        }}
+      />
+    );
+  };
+
+  return <>{renderField()}</>;
+};
+
+export const DEFAULT_QUEUE_ACTIONS = {
+  ADD: 'add',
+  REMOVE: 'remove',
+  UPDATE: 'update',
+};
+export const TAXID_TYPE = {
+  BR_CPF: 'BR:CPF',
+  BR_CNPJ: 'BR:CNPJ',
+  US_SOCIALSECURITY: 'US:SOCIALSECURITY',
+};
+
+const GENDER_VALUES = {
+  MALE: ['masculino', 'male'],
+  FEMALE: ['feminino', 'female', 'femenino'],
+  OTHER: ['outro', 'other', 'otro'],
+};
+
+export const getGenderValue = (value: string): string => {
+  const formattedValue = formatValue(value);
+
+  if (GENDER_VALUES.MALE.includes(formattedValue)) {
+    return 'male';
+  }
+
+  if (GENDER_VALUES.FEMALE.includes(formattedValue)) {
+    return 'female';
+  }
+
+  if (GENDER_VALUES.OTHER.includes(formattedValue)) {
+    return 'other';
+  }
+
+  return value;
+};
+
+const getFieldValue = (value: string, type: string) => {
+  const FORMATTED_VALUE = {
+    [COLUMN_TYPE.ACTIVE]: () => getActiveValue(value),
+    [COLUMN_TYPE.GENDER]: () => getGenderValue(value),
+    [COLUMN_TYPE.TAX_ID]: () => ({
+      type: TAXID_TYPE.BR_CPF,
+      taxID: value,
+    }),
+    [COLUMN_TYPE.DATE]: () => getDateValue(value),
+    [COLUMN_TYPE.PHONE]: () => getPhoneNumbersValue(value),
+    [COLUMN_TYPE.SING_PHONE]: () => getSingPhoneNumberValue(value),
+    [COLUMN_TYPE.EMAIL]: () => formatValue(value),
+    [COLUMN_TYPE.TAG]: () => getTagsValue(value),
+  };
+
+  return type && FORMATTED_VALUE[type]
+    ? FORMATTED_VALUE[type]() ?? value
+    : value;
+};
+
+export const getFields = (item) => {
+  const fields = Object.entries(item).reduce((acc, [, obj]) => {
+    if (obj.field && obj.value) {
+      const value = getFieldValue(obj.value, obj.columnType);
+
+      return { ...acc, [obj.field]: value };
+    }
+
+    return acc;
+  }, {});
+
+  return fields;
+};
+
+export const importFn = (selected, dispatch) => {
+  const items = selected.map((d) => {
+    return {
+      ...d?.original,
+      rowIndex: {
+        field: 'rowIndex',
+        value: d?.id,
+      },
+    };
+  });
+
+  for (const item of items) {
+    const fields = getFields(item);
+
+    if (Object.keys(fields).length <= 1) {
+      continue;
+    }
+
+    dispatch({ type: DEFAULT_QUEUE_ACTIONS.ADD, fields });
+  }
+};
+
+const isRequiredMapper = {
+  Obrigatório: true,
+  'Não obrigatório': false,
+};
+
+type DefaultHeader = {
+  name: string;
+  requiredMessage: string;
+  description: string;
+};
+
+type ValidateHeaderProps = {
+  header: string[];
+  defaultHeader: DefaultHeader[];
+};
+
+export const validateHeader = ({
+  header,
+  defaultHeader,
+}: ValidateHeaderProps): boolean => {
+  const hasSameLength = header.length === defaultHeader.length;
+
+  if (!hasSameLength) {
+    const missingColumns = defaultHeader.filter(
+      (column) => !header.includes(column.name),
+    );
+
+    const missingRequiredColumns = missingColumns.filter(
+      (column) => isRequiredMapper[column?.requiredMessage] ?? false,
+    );
+
+    return missingRequiredColumns.length > 0 ? false : true;
+  }
+
+  const isSame = defaultHeader.every((column) => {
+    const isRequired = isRequiredMapper[column?.requiredMessage] ?? false;
+    const headerHasName = header.includes(column?.name);
+
+    if (!headerHasName && !isRequired) {
+      return true;
+    }
+
+    return headerHasName;
+  });
+
+  return isSame;
+};