bodyshop/client/src/components/dms-post-form/dms-post-form.component.jsx

import { DeleteFilled } from "@ant-design/icons";
import {
  Button,
  Form,
  Input,
  InputNumber,
  Select,
  Space,
  Statistic,
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import DmsCdkMakes from "../dms-cdk-makes/dms-cdk-makes.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import Dinero from "dinero.js";
import { determineDmsType } from "../../pages/dms/dms.container";
import DmsCdkMakesRefetch from "../dms-cdk-makes/dms-cdk-makes.refetch.component";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(DmsPostForm);

export function DmsPostForm({ bodyshop, socket, job }) {
  const [form] = Form.useForm();
  const { t } = useTranslation();

  const handlePayerSelect = (value, index) => {
    form.setFieldsValue({
      payers: form.getFieldValue("payers").map((payer, mapIndex) => {
        if (index !== mapIndex) return payer;
        const cdkPayer =
          bodyshop.cdk_configuration.payers &&
          bodyshop.cdk_configuration.payers.find((i) => i.name === value);

        if (!cdkPayer) return payer;

        return {
          ...cdkPayer,
          dms_acctnumber: cdkPayer.dms_acctnumber,
          controlnumber: job && job[cdkPayer.control_type],
        };
      }),
    });
  };
  console.log("🚀  ~ file: dms-post-form.component.jsx  ~ line 58  ~ job", job);

  const handleFinish = (values) => {
    socket.emit(`${determineDmsType(bodyshop)}-export-job`, {
      jobid: job.id,
      txEnvelope: values,
    });
  };

  return (
    <Form form={form} layout="vertical" onFinish={handleFinish}>
      <LayoutFormRow>
        <Form.Item
          name="journal"
          label={t("jobs.fields.dms.journal")}
          initialValue={
            bodyshop.cdk_configuration &&
            bodyshop.cdk_configuration.default_journal
          }
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="kmin"
          label={t("jobs.fields.kmin")}
          initialValue={job && job.kmin}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber disabled />
        </Form.Item>
        <Form.Item
          name="kmout"
          label={t("jobs.fields.kmout")}
          initialValue={job && job.kmout}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber disabled />
        </Form.Item>
        <Form.Item
          name="dms_make"
          label={t("jobs.fields.dms.dms_make")}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input disabled />
        </Form.Item>
        <Form.Item
          name="dms_model"
          label={t("jobs.fields.dms.dms_model")}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input disabled />
        </Form.Item>
        <DmsCdkMakes form={form} socket={socket} job={job} />
        <DmsCdkMakesRefetch />
      </LayoutFormRow>

      <Form.List name={["payers"]}>
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Form.Item key={field.key}>
                  <LayoutFormRow>
                    <Form.Item
                      label={t("jobs.fields.dms.payer.name")}
                      key={`${index}name`}
                      name={[field.name, "name"]}
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Select
                        onSelect={(value) => handlePayerSelect(value, index)}
                      >
                        {bodyshop.cdk_configuration &&
                          bodyshop.cdk_configuration.payers &&
                          bodyshop.cdk_configuration.payers.map((payer) => (
                            <Select.Option key={payer.name}>
                              {payer.name}
                            </Select.Option>
                          ))}
                      </Select>
                    </Form.Item>

                    <Form.Item
                      label={t("jobs.fields.dms.payer.dms_acctnumber")}
                      key={`${index}dms_acctnumber`}
                      name={[field.name, "dms_acctnumber"]}
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input disabled />
                    </Form.Item>

                    <Form.Item
                      label={t("jobs.fields.dms.payer.amount")}
                      key={`${index}amount`}
                      name={[field.name, "amount"]}
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <CurrencyInput min={0} />
                    </Form.Item>

                    <Form.Item
                      label={t("jobs.fields.dms.payer.controlnumber")}
                      key={`${index}controlnumber`}
                      name={[field.name, "controlnumber"]}
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>

                    <Form.Item shouldUpdate>
                      {() => {
                        const payers = form.getFieldValue("payers");

                        const row = payers && payers[index];

                        const cdkPayer =
                          bodyshop.cdk_configuration.payers &&
                          bodyshop.cdk_configuration.payers.find(
                            (i) => i && row && i.name === row.name
                          );

                        return (
                          <div>
                            {cdkPayer &&
                              t(`jobs.fields.${cdkPayer.control_type}`)}
                          </div>
                        );
                      }}
                    </Form.Item>

                    <DeleteFilled
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  </LayoutFormRow>
                </Form.Item>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  disabled={!(fields.length < 3)}
                  onClick={() => {
                    if (fields.length < 3) add();
                  }}
                  style={{ width: "100%" }}
                >
                  {t("dms.actions.addpayer")}
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>
      <Form.Item shouldUpdate>
        {() => {
          //Perform Calculation to determine discrepancy.
          let totalAllocated = Dinero();

          const payers = form.getFieldValue("payers");
          payers &&
            payers.forEach((payer) => {
              totalAllocated = totalAllocated.add(
                Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
              );
            });
          const discrep = Dinero(job.job_totals.totals.total_repairs).subtract(
            totalAllocated
          );
          return (
            <Space>
              <Statistic
                title={t("jobs.labels.dms.totalallocated")}
                value={totalAllocated.toFormat()}
              />
              <Statistic
                title={t("jobs.fields.subtotal")}
                value={Dinero(job.job_totals.totals.total_repairs).toFormat()}
              />
              <Statistic
                title={t("jobs.labels.dms.notallocated")}
                valueStyle={{
                  color: discrep.getAmount() === 0 ? "green" : "red",
                }}
                value={discrep.toFormat()}
              />
              <Button //disabled={discrep.getAmount() !== 0} //TODO: REMOVE THIS COMMENT.
                htmlType="submit"
              >
                {t("jobs.actions.dms.post")}
              </Button>
              <Button
                onClick={() => {
                  socket.emit(`${determineDmsType(bodyshop)}-export-job`, {
                    jobid: job.id,
                  });
                }}
              >
                Bypass
              </Button>
            </Space>
          );
        }}
      </Form.Item>
    </Form>
  );
}