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

import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Select,
  Switch,
  Tag
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";

export default function InvoiceEnterModalComponent({
  visible,
  invoice,
  handleCancel,
  handleFinish,
  handleRoSelect,
  roAutoCompleteOptions,
  handleVendorSelect,
  vendorAutoCompleteOptions,
  lineData,
  vendor,
  job,
  responsibilityCenters
}) {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const { resetFields } = form;

  return (
    <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
      <Modal
        title={
          invoice && invoice.id
            ? t("invoices.labels.edit")
            : t("invoices.labels.new")
        }
        width={"90%"}
        visible={visible}
        okText={t("general.labels.save")}
        onOk={() => form.submit()}
        okButtonProps={{ htmlType: "submit" }}
        onCancel={handleCancel}
      >
        <div style={{ display: "flex" }}>
          <Form.Item
            name="jobid"
            label={t("invoices.fields.ro_number")}
            rules={[
              {
                required: true,
                message: t("general.validation.required")
              }
            ]}
          >
            <Select
              showSearch
              defaultValue={
                job ? (job.ro_number ? job.ro_number : job.est_number) : null
              }
              autoFocus
              defaultOpen
              style={{ width: "300px" }}
              onSelect={handleRoSelect}
            >
              {roAutoCompleteOptions
                ? roAutoCompleteOptions.map(o => (
                    <Select.Option
                      key={o.id}
                      value={o.ro_number ? o.ro_number : o.est_number}
                    >
                      {`${
                        o.ro_number ? o.ro_number : o.est_number
                      } | ${o.ownr_ln || ""} ${o.ownr_fn || ""} | ${o.vehicle
                        .v_model_yr || ""} ${o.vehicle.v_make_desc || ""} ${o
                        .vehicle.v_model_desc || ""}`}
                    </Select.Option>
                  ))
                : null}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("invoices.fields.vendor")}
            name="vendorid"
            rules={[
              {
                required: true,
                message: t("general.validation.required")
              }
            ]}
          >
            <Select
              showSearch
              onSelect={handleVendorSelect}
              style={{ width: "300px" }}
            >
              {vendorAutoCompleteOptions
                ? vendorAutoCompleteOptions.map(o => (
                    <Select.Option key={o.id} value={o.name}>
                      <div style={{ display: "flex" }}>
                        {o.name}
                        <Tag color="green">{`${o.discount * 100}%`}</Tag>
                      </div>
                    </Select.Option>
                  ))
                : null}
            </Select>
          </Form.Item>

          <Button onClick={() => resetFields()}>
            {t("general.actions.reset")}
          </Button>
        </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={vendor && vendor.discount}
          form={form}
          responsibilityCenters={responsibilityCenters}
        />

        <Button onClick={() => console.log(form.getFieldsValue())}>
          Field Values
        </Button>
      </Modal>
    </Form>
  );
}