costamdlamarka

gistfile1.txt

/* eslint no-console: ["error", { allow: ["warn", "error"] }] */

import React, { useState } from 'react';
import { Form, message, Modal } from 'antd';
import { useHistory } from 'react-router-dom';
import { useGlobalState } from '../../components/GlobalStateContext';
import { RequestDocumentsScreen } from './RequestDocuments';
import {
  FormValues,
  RequestDocumentsScreenProps,
} from './RequestDocuments.interface';
import { ROUTES } from '../../constants/routes';
import { getTaskDetails, postDocumentRequest } from '../../api/api.requests';
import { Branch, TaskResponse, Document } from '../../api/api.interface';

const { confirm } = Modal;

export const RequestDocuments = () => {
  const { user } = useGlobalState();
  const history = useHistory();
  const [form] = Form.useForm<FormValues>();
  const [submitDisabled, setSubmitDisabled] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [nlsLoading, setNlsLoading] = useState(false);
  const [borrowersData, setBorrowersData] = useState<
    RequestDocumentsScreenProps['borrowersData']
  >();
  const [editBranchInfoModalVisible, setEditBranchInfoModalVisible] = useState(
    false,
  );

  const toggleEditBranchInfoModal = () => {
    setEditBranchInfoModalVisible(!editBranchInfoModalVisible);
  };

  const checkIfSubmitDisabled = () => {
    const {
      borrowersEmail,
      identification,
      incomeProof,
      residenceProof,
      identificationOther,
      incomeProofOther,
      residenceProofOther,
    } = form.getFieldsValue();

    const hasErrors = form.getFieldsError().some(({ errors }) => errors.length);
    const hasIdentificationOther = identification.includes('other')
      ? !identificationOther?.length
      : false;
    const hasIncomeProofOther = incomeProof.includes('other')
      ? !incomeProofOther?.length
      : false;
    const hasResidenceProofOther = residenceProof.includes('other')
      ? !residenceProofOther?.length
      : false;
    const atLeastOneCheckboxSelected =
      [...identification, ...incomeProof, ...residenceProof].length !== 0;

    return (
      hasErrors ||
      !atLeastOneCheckboxSelected ||
      !borrowersEmail ||
      hasIdentificationOther ||
      hasIncomeProofOther ||
      hasResidenceProofOther
    );
  };

  const removeOtherFromDocuments = (items: string[]) =>
    items.filter((item) => item !== 'other');

  const getRequiredDocuments = (values: FormValues): Document[] => {
    const documents: Document[] = [];
    if (values.identification?.length) {
      documents.push({
        type: 'Identification',
        items: [
          ...removeOtherFromDocuments(values.identification),
          ...(values.identification.includes('other')
            ? [values.identificationOther]
            : []),
        ],
      });
    }
    if (values.incomeProof?.length) {
      documents.push({
        type: 'Proof of Income',
        items: [
          ...removeOtherFromDocuments(values.incomeProof),
          ...(values.incomeProof.includes('other')
            ? [values.incomeProofOther]
            : []),
        ],
      });
    }
    if (values.residenceProof?.length) {
      documents.push({
        type: 'Proof of Residence',
        items: [
          ...removeOtherFromDocuments(values.residenceProof),
          ...(values.residenceProof.includes('other')
            ? [values.residenceProofOther]
            : []),
        ],
      });
    }
    return documents;
  };

  const onFinishHandler: RequestDocumentsScreenProps['handleOnFinish'] = async (
    values: FormValues,
  ) => {
    if (!borrowersData || !values) {
      message.error('Something went wrong');
      return;
    }

    try {
      setSubmitting(true);
      setSubmitDisabled(true);
      const payload = {
        task_id: values.taskNumber,
        branch_id: borrowersData?.branch.id,
        customer_first_name: borrowersData?.customer.firstName,
        customer_last_name: borrowersData?.customer.lastName,
        customer_email: values.borrowersEmail,
        required_documents: getRequiredDocuments(values),
      };
      await postDocumentRequest(payload);
      history.push(ROUTES.requestDocumentsSuccess, {
        borrowersEmail: values.borrowersEmail,
        branchName: borrowersData.branch.name,
        branchEmail: borrowersData.branch.email,
      });
    } catch (e) {
      console.error(e);
      setSubmitting(false);
      setSubmitDisabled(false);
    }
  };

  const handleTaskSearch: RequestDocumentsScreenProps['handleTaskSearch'] = async (
    taskNumber,
  ) => {
    if (!taskNumber) return;
    try {
      setSubmitDisabled(true);
      setNlsLoading(true);
      const response = await getTaskDetails(taskNumber);
      setBorrowersData(response);
      form.setFieldsValue({ borrowersEmail: response.customer.email });
      form.setFields([{ name: 'taskNumber', errors: undefined }]);
    } catch (e) {
      setBorrowersData(undefined);
      form.setFieldsValue({ borrowersEmail: undefined });
      form.setFields([{ name: 'taskNumber', errors: ['Task not found'] }]);
    } finally {
      setNlsLoading(false);
      setSubmitDisabled(checkIfSubmitDisabled());
    }
  };

  if (!user) return null;

  const requesterName = `${user.firstName} ${user.lastName}`;

  const onFieldsChangeHandler = () => {
    setSubmitDisabled(checkIfSubmitDisabled());
  };

  const onConfirmCancelHandler = () => {
    history.push(ROUTES.root);
  };

  const updateBranchData = (branchData: Branch) => {
    setBorrowersData(
      (previous) =>
        ({
          customer: previous?.customer,
          branch: branchData,
        } as TaskResponse),
    );
  };

  const onCancelClickHandler = () => {
    confirm({
      title: 'Are you sure?',
      onOk: onConfirmCancelHandler,
      okText: 'Confirm',
      icon: null,
    });
  };

  return (
    <RequestDocumentsScreen
      form={form}
      requesterName={requesterName}
      handleTaskSearch={handleTaskSearch}
      handleOnFinish={onFinishHandler}
      handleFieldsChange={onFieldsChangeHandler}
      borrowersData={borrowersData}
      submitDisabled={submitDisabled}
      submitting={submitting}
      nlsLoading={nlsLoading}
      updateBranchData={updateBranchData}
      toggleEditBranchInfoModal={toggleEditBranchInfoModal}
      editBranchInfoModalVisible={editBranchInfoModalVisible}
      onCancelClick={onCancelClickHandler}
    />
  );
};