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

import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
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 }
  } = useTreatmentsWithConfig({
    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}
            options={Qb_Multi_Ar.treatment === "on" 
              ? [
                  { value: t("payments.labels.customer"), label: t("payments.labels.customer") },
                  {
                    label: t("payments.labels.external"),
                    options: bodyshop.md_ins_cos.map((i, idx) => ({
                      key: idx,
                      value: i.name,
                      label: i.name
                    }))
                  }
                ]
              : [
                  { value: t("payments.labels.customer"), label: t("payments.labels.customer") },
                  { value: t("payments.labels.insurance"), label: t("payments.labels.insurance") }
                ]
            }
          />
        </Form.Item>

        <Form.Item
          label={t("payments.fields.type")}
          name="type"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Select disabled={disabled}
            options={bodyshop.md_payment_types.map((v, idx) => ({
              key: idx,
              value: v,
              label: v
            }))}
          />
        </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);