bodyshop/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx

import { DatePicker, Form, Input, Switch } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";

export default function InvoiceEnterModalComponent({
  form,
  roAutoCompleteOptions,
  vendorAutoCompleteOptions,
  lineData,
  responsibilityCenters,
  loadLines
}) {
  const { t } = useTranslation();

  const [discount, setDiscount] = useState(0);

  const handleVendorSelect = (props, opt) => {
    setDiscount(opt.discount);
  };

  return (
    <div>
      <div style={{ display: "flex" }}>
        <Form.Item
          name="jobid"
          label={t("invoices.fields.ro_number")}
          rules={[
            {
              required: true,
              message: t("general.validation.required")
            }
          ]}
        >
          <JobSearchSelect
            options={roAutoCompleteOptions}
            onBlur={() => {
              if (form.getFieldValue("jobid") !== null) {
                loadLines({ variables: { id: form.getFieldValue("jobid") } });
              }
            }}
          />
        </Form.Item>
        <Form.Item
          label={t("invoices.fields.vendor")}
          name="vendorid"
          rules={[
            {
              required: true,
              message: t("general.validation.required")
            }
          ]}
        >
          <VendorSearchSelect
            options={vendorAutoCompleteOptions}
            onSelect={handleVendorSelect}
          />
        </Form.Item>
      </div>
      <div style={{ display: "flex" }}>
        <Form.Item
          label={t("invoices.fields.invoice_number")}
          name="invoice_number"
          rules={[
            {
              required: true,
              message: t("general.validation.required")
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("invoices.fields.date")}
          name="date"
          rules={[
            {
              required: true,
              message: t("general.validation.required")
            }
          ]}
        >
          <DatePicker />
        </Form.Item>
        <Form.Item
          label={t("invoices.fields.is_credit_memo")}
          name="is_credit_memo"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("invoices.fields.total")}
          name="total"
          rules={[
            {
              required: true,
              message: t("general.validation.required")
            }
          ]}
        >
          <CurrencyInput />
        </Form.Item>
      </div>
      <InvoiceEnterModalLinesComponent
        lineData={lineData}
        discount={discount}
        form={form}
        responsibilityCenters={responsibilityCenters}
      />
    </div>
  );
}