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

import { useTreatments } from "@splitsoftware/splitio-react";
import { Form, Input, Radio, Select } 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 DatePickerFormItem from "../form-date-picker/form-date-picker.component";
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";

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

export function PaymentFormComponent({
  form,
  bodyshop,
  disabled,
}) {
  const { Qb_Multi_Ar } = useTreatments(
    ["Qb_Multi_Ar"],
    {},
    bodyshop && 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"),
            },
          ]}
        >
          <DatePickerFormItem 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);