bodyshop/client/src/components/payment-form/payment-form.component.jsx

import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Form, Input, Radio, Select } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import PaymentFormTotalPayments from "./payment-form.totalpayments.component";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

export function PaymentFormComponent({ form, bodyshop, disabled }) {
  const {
    treatments: { Qb_Multi_Ar }
  } = useSplitTreatments({
    attributes: {},
    names: ["Qb_Multi_Ar"],
    splitKey: bodyshop?.imexshopid
  });

  const { t } = useTranslation();

  return (
    <div>
      <LayoutFormRow grow>
        <Form.Item
          name="jobid"
          label={t("bills.fields.ro_number")}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <JobSearchSelect disabled={disabled} notExported={false} clm_no />
        </Form.Item>
        <Form.Item shouldUpdate={(prev, cur) => cur.jobid && prev.jobid !== cur.jobid}>
          {() => {
            return <PaymentFormTotalPayments jobid={form.getFieldValue("jobid")} />;
          }}
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item
          label={t("payments.fields.amount")}
          name="amount"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <CurrencyInput disabled={disabled} />
        </Form.Item>
        <Form.Item label={t("payments.fields.transactionid")} name="transactionid">
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item label={t("payments.fields.memo")} name="memo">
          <Input disabled={disabled} />
        </Form.Item>
        <Form.Item
          label={t("payments.fields.date")}
          name="date"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <DateTimePicker isDateOnly disabled={disabled} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow grow>
        <Form.Item
          label={t("payments.fields.payer")}
          name="payer"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Select disabled={disabled}>
            <Select.Option value={t("payments.labels.customer")}>{t("payments.labels.customer")}</Select.Option>
            {Qb_Multi_Ar.treatment === "on" ? (
              <Select.OptGroup label={t("payments.labels.external")}>
                {bodyshop.md_ins_cos.map((i, idx) => (
                  <Select.Option key={idx} value={i.name}>
                    {i.name}
                  </Select.Option>
                ))}
              </Select.OptGroup>
            ) : (
              <Select.Option value={t("payments.labels.insurance")}>{t("payments.labels.insurance")}</Select.Option>
            )}
          </Select>
        </Form.Item>

        <Form.Item
          label={t("payments.fields.type")}
          name="type"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Select disabled={disabled}>
            {bodyshop.md_payment_types.map((v, idx) => (
              <Select.Option key={idx} value={v}>
                {v}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow>
        <Form.Item label={t("general.labels.sendby")} name="sendby" initialValue="none">
          <Radio.Group disabled={disabled}>
            <Radio value="none">{t("general.labels.none")}</Radio>
            <Radio value="email">{t("general.labels.email")}</Radio>
            <Radio value="print">{t("general.labels.print")}</Radio>
          </Radio.Group>
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}

export default connect(mapStateToProps, null)(PaymentFormComponent);