Added config provider with default small text. Replcaed all datepicker components to add proper format. BOD-166 BOD-246

bodyshop_translations.babel

@@ -17452,6 +17452,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>receiveinvoice</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>

client/src/App/App.container.jsx

@@ -15,6 +15,11 @@ import GlobalLoadingBar from "../components/global-loading-bar/global-loading-ba
 import { auth } from "../firebase/firebase.utils";
 import errorLink from "../graphql/apollo-error-handling";
 import App from "./App";
+import { ConfigProvider } from "antd";
+import enLocale from "antd/es/locale/en_US";
+import moment from "moment";
+
+moment.locale("en-US");
 
 if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
 
@@ -124,8 +129,14 @@ export const client = new ApolloClient({
 export default function AppContainer() {
   return (
     <ApolloProvider client={client}>
-      <GlobalLoadingBar />
+      <ConfigProvider
-      <App />
+        componentSize="small"
+        input={{ autoComplete: "new-password" }}
+        locale={enLocale}
+      >
+        <GlobalLoadingBar />
+        <App />
+      </ConfigProvider>
     </ApolloProvider>
   );
 }

client/src/components/_test/test.component.jsx

@@ -1,6 +1,6 @@
 import {
   PaymentRequestButtonElement,
-  useStripe,
+  useStripe
 } from "@stripe/react-stripe-js";
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
@@ -9,8 +9,6 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { TemplateList } from "../../utils/TemplateConstants";
-import { Input, InputNumber, Popover } from "antd";
-import { isInteger } from "lodash";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -20,8 +18,6 @@ const mapDispatchToProps = (dispatch) => ({
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
 });
 
-
-
 function Test({ bodyshop, setEmailOptions }) {
   const stripe = useStripe();
 
@@ -48,18 +44,17 @@ function Test({ bodyshop, setEmailOptions }) {
           // var details = {
           //   total: { label: "", amount: { currency: "CAD", value: "0.00" } },
           // };
-          // new PaymentRequest(
+          new PaymentRequest(
-          //   [{ supportedMethods: ["basic-card"] }],
+            [{ supportedMethods: ["basic-card"] }],
-          //   {}
+            {}
-          //   //  details
+            //  details
-          // ).show();
+          ).show();
         }
       });
     }
   }, [stripe]);
 
   if (paymentRequest) {
-
     return (
       <div style={{ height: "300px" }}>
         <PaymentRequestButtonElement options={{ paymentRequest }} />

client/src/components/contract-form/contract-form.component.jsx

@@ -1,11 +1,11 @@
-import { DatePicker, Form, Input, InputNumber } from "antd";
+import { Form, Input, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-
 export default function ContractFormComponent({ form }) {
   const { t } = useTranslation();
   return (
@@ -36,7 +36,7 @@ export default function ContractFormComponent({ form }) {
             },
           ]}
         >
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item
           label={t("contracts.fields.scheduledreturn")}
@@ -48,13 +48,13 @@ export default function ContractFormComponent({ form }) {
             },
           ]}
         >
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item
           label={t("contracts.fields.actualreturn")}
           name="actualreturn"
         >
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
       </LayoutFormRow>
 
@@ -98,7 +98,7 @@ export default function ContractFormComponent({ form }) {
             },
           ]}
         >
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item
           label={t("contracts.fields.driver_dlst")}
@@ -212,7 +212,7 @@ export default function ContractFormComponent({ form }) {
             },
           ]}
         >
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
       </LayoutFormRow>
 

client/src/components/contract-status-select/contract-status-select.component.jsx

@@ -14,7 +14,7 @@ const ContractStatusComponent = (
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [option, onChange]);
+  }, [value, option, onChange]);
 
   return (
     <Select

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -1,8 +1,9 @@
-import { Button, DatePicker, Form, Input, InputNumber } from "antd";
+import { Button, Form, Input, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
 import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component";
+import FormDatePicker from '../form-date-picker/form-date-picker.component';
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 
@@ -98,7 +99,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
         label={t("courtesycars.fields.purchasedate")}
         name="purchasedate"
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("courtesycars.fields.servicestartdate")}
@@ -110,13 +111,13 @@ export default function CourtesyCarCreateFormComponent({ form }) {
         label={t("courtesycars.fields.serviceenddate")}
         name="serviceenddate"
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("courtesycars.fields.leaseenddate")}
         name="leaseenddate"
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("courtesycars.fields.status")}
@@ -152,7 +153,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
           },
         ]}
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item label={t("courtesycars.fields.damage")} name="damage">
         <Input />
@@ -182,7 +183,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
           },
         ]}
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("courtesycars.fields.insuranceexpires")}
@@ -194,7 +195,7 @@ export default function CourtesyCarCreateFormComponent({ form }) {
           },
         ]}
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
         <CurrencyInput />

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -10,7 +10,7 @@ const CourtesyCarFuelComponent = ({ value = 100, onChange }, ref) => {
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [option, onChange]);
+  }, [value, option, onChange]);
 
   const marks = {
     0: {

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.component.jsx

@@ -1,7 +1,8 @@
-import { Form, DatePicker, InputNumber } from "antd";
+import { Form, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
+import FormDatePicker from '../form-date-picker/form-date-picker.component';
 
 export default function CourtesyCarReturnModalComponent() {
   const { t } = useTranslation();
@@ -18,7 +19,7 @@ export default function CourtesyCarReturnModalComponent() {
           }
         ]}
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.kmend")}

client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx

@@ -14,7 +14,7 @@ const CourtesyCarStatusComponent = (
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [option, onChange]);
+  }, [value, option, onChange]);
 
   return (
     <Select

client/src/components/employee-search-select/employee-search-select.component.jsx

@@ -1,7 +1,6 @@
 import { Select, Tag } from "antd";
-import React, { useEffect, useState, forwardRef } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 const { Option } = Select;
 //To be used as a form element only.
 
@@ -15,7 +14,7 @@ const EmployeeSearchSelect = (
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [option, onChange]);
+  }, [value, option, onChange]);
 
   return (
     <Select

client/src/components/form-date-picker/form-date-picker.component.jsx

@@ -1,12 +1,11 @@
-import React, { forwardRef, useEffect } from "react";
 import { DatePicker } from "antd";
-import { useTranslation } from "react-i18next";
 import moment from "moment";
+import React, { forwardRef } from "react";
 //To be used as a form element only.
 
-const CustomDatePicker = ({ value, onChange, onBlur, ...restProps }, ref) => {
+const dateFormat = "MM/DD/YYYY";
-  const { t } = useTranslation();
 
+const FormDatePicker = ({ value, onChange, onBlur, ...restProps }, ref) => {
   const handleChange = (newDate) => {
     if (value !== newDate && onChange) {
       onChange(newDate);
@@ -23,9 +22,14 @@ const CustomDatePicker = ({ value, onChange, onBlur, ...restProps }, ref) => {
 
   return (
     <div onKeyDown={handleKeyDown}>
-      <DatePicker value={value} onChange={handleChange} {...restProps} />
+      <DatePicker
+        value={value}
+        onChange={handleChange}
+        format={dateFormat}
+        {...restProps}
+      />
     </div>
   );
 };
 
-export default forwardRef(CustomDatePicker);
+export default forwardRef(FormDatePicker);

client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx

@@ -50,7 +50,7 @@ const FormInputNUmberCalculator = (
 
   useEffect(() => {
     if (value !== formValue && formOnChange) formOnChange(value);
-  }, [formOnChange, value]);
+  }, [formOnChange, formValue, value]);
 
   useEffect(() => {
     if (history.length > 2) {

client/src/components/invoice-form/invoice-form.component.jsx

@@ -1,15 +1,8 @@
-import {
+import { Button, Form, Input, Statistic, Switch, Upload } from "antd";
-  Button,
-  DatePicker,
-  Form,
-  Input,
-  Statistic,
-  Switch,
-  Upload,
-} from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../alert/alert.component";
+import FormDatePicker 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 VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
@@ -113,7 +106,7 @@ export default function InvoiceFormComponent({
             },
           ]}
         >
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.is_credit_memo")}

client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx

@@ -16,7 +16,7 @@ const InvoiceLineSearchSelect = (
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [option, onChange]);
+  }, [value, option, onChange]);
 
   return (
     <Select
@@ -28,9 +28,10 @@ const InvoiceLineSearchSelect = (
         width: 300,
       }}
       onChange={setOption}
-      optionFilterProp='line_desc'
+      optionFilterProp="line_desc"
       onBlur={onBlur}
-      onSelect={onSelect}>
+      onSelect={onSelect}
+    >
       <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
         {t("invoicelines.labels.other")}
       </Select.Option>
@@ -42,14 +43,15 @@ const InvoiceLineSearchSelect = (
               cost={item.act_price ? item.act_price : 0}
               part_type={item.part_type}
               line_desc={item.line_desc}
-              part_qty={item.part_qty}>
+              part_qty={item.part_qty}
-              <Row justify='center' align='middle'>
+            >
+              <Row justify="center" align="middle">
                 <Col span={12}>{item.line_desc}</Col>
                 <Col span={8}>
-                  <Tag color='blue'>{item.oem_partno}</Tag>
+                  <Tag color="blue">{item.oem_partno}</Tag>
                 </Col>
                 <Col span={4}>
-                  <Tag color='green'>
+                  <Tag color="green">
                     <CurrencyFormatter>{item.act_price || 0}</CurrencyFormatter>
                   </Tag>
                 </Col>

client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -1,18 +1,11 @@
 import { useMutation } from "@apollo/react-hooks";
-import {
+import { Button, Card, Form, InputNumber, notification, Popover } from "antd";
-  Button,
-  Card,
-  DatePicker,
-  Form,
-  InputNumber,
-  notification,
-  Popover,
-} from "antd";
 import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { INSERT_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { INSERT_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 export default function ScoreboardAddButton({ job, ...otherBtnProps }) {
   const { t } = useTranslation();
@@ -49,44 +42,48 @@ export default function ScoreboardAddButton({ job, ...otherBtnProps }) {
       <div>
         <Form
           form={form}
-          layout='vertical'
+          layout="vertical"
           onFinish={handleFinish}
-          initialValues={{}}>
+          initialValues={{}}
+        >
           <Form.Item
             label={t("scoreboard.fields.date")}
-            name='date'
+            name="date"
             rules={[
               {
                 required: true,
                 message: t("general.validation.required"),
               },
-            ]}>
+            ]}
-            <DatePicker />
+          >
+            <FormDatePicker />
           </Form.Item>
           <Form.Item
             label={t("scoreboard.fields.bodyhrs")}
-            name='bodyhrs'
+            name="bodyhrs"
             rules={[
               {
                 required: true,
                 message: t("general.validation.required"),
               },
-            ]}>
+            ]}
+          >
             <InputNumber precision={1} />
           </Form.Item>
           <Form.Item
             label={t("scoreboard.fields.painthrs")}
-            name='painthrs'
+            name="painthrs"
             rules={[
               {
                 required: true,
                 message: t("general.validation.required"),
               },
-            ]}>
+            ]}
+          >
             <InputNumber precision={1} />
           </Form.Item>
 
-          <Button type='primary' htmlType='submit'>
+          <Button type="primary" htmlType="submit">
             {t("general.actions.save")}
           </Button>
         </Form>

client/src/components/job-search-select/job-search-select.component.jsx

@@ -14,7 +14,7 @@ const JobSearchSelect = (
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [option, onChange]);
+  }, [value, option, onChange]);
 
   return (
     <Select
@@ -28,8 +28,9 @@ const JobSearchSelect = (
       }}
       loading={loading}
       onChange={setOption}
-      optionFilterProp='children'
+      optionFilterProp="children"
-      onBlur={onBlur}>
+      onBlur={onBlur}
+    >
       {options
         ? options.map((o) => (
             <Option key={o.id} value={o.id}>

client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx

@@ -1,6 +1,7 @@
-import { Collapse, Form, Input, InputNumber, Switch, DatePicker } from "antd";
+import { Collapse, Form, Input, InputNumber, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import FormDatePicker from '../form-date-picker/form-date-picker.component';
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -30,7 +31,7 @@ export default function JobsCreateJobsInfo({ form }) {
               <Input />
             </Form.Item>
             <Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
-              <DatePicker />
+              <FormDatePicker />
             </Form.Item>
             <Form.Item label={t("jobs.fields.ins_co_nm")} name='ins_co_nm'>
               <Input />

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx

@@ -1,7 +1,8 @@
-import { DatePicker, Form, Input, Checkbox } from "antd";
+import { Checkbox, Form, Input } from "antd";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function JobsCreateVehicleInfoNewComponent() {
@@ -22,7 +23,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               selectedid: null,
             },
           });
-        }}>
+        }}
+      >
         {t("jobs.labels.create.newvehicle")}
       </Checkbox>
 
@@ -35,7 +37,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               required: state.vehicle.new,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
@@ -48,7 +51,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               required: state.vehicle.new,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
@@ -59,7 +63,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               required: state.vehicle.new,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
@@ -73,7 +78,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               required: state.vehicle.new,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
@@ -84,7 +90,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               required: state.vehicle.new,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
@@ -98,7 +105,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               required: state.vehicle.new,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
@@ -109,7 +117,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
               required: state.vehicle.new,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
@@ -117,72 +126,84 @@ export default function JobsCreateVehicleInfoNewComponent() {
       <LayoutFormRow header={t("vehicles.forms.misc")} grow>
         <Form.Item
           label={t("vehicles.fields.v_type")}
-          name={["vehicle", "data", "v_type"]}>
+          name={["vehicle", "data", "v_type"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_trimcode")}
-          name={["vehicle", "data", "v_trimcode"]}>
+          name={["vehicle", "data", "v_trimcode"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item
           label={t("vehicles.fields.v_tone")}
-          name={["vehicle", "data", "v_tone"]}>
+          name={["vehicle", "data", "v_tone"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_bstyle")}
-          name={["vehicle", "data", "v_bstyle"]}>
+          name={["vehicle", "data", "v_bstyle"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item
           label={t("vehicles.fields.v_stage")}
-          name={["vehicle", "data", "v_stage"]}>
+          name={["vehicle", "data", "v_stage"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_prod_dt")}
-          name={["vehicle", "data", "v_prod_dt"]}>
+          name={["vehicle", "data", "v_prod_dt"]}
-          <DatePicker disabled={!state.vehicle.new} />
+        >
+          <FormDatePicker disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item
           label={t("vehicles.fields.v_paint_codes")}
-          name={["vehicle", "data", "v_paint_codes"]}>
+          name={["vehicle", "data", "v_paint_codes"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_options")}
-          name={["vehicle", "data", "v_options"]}>
+          name={["vehicle", "data", "v_options"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item
           label={t("vehicles.fields.trim_color")}
-          name={["vehicle", "data", "trim_color"]}>
+          name={["vehicle", "data", "trim_color"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_mldgcode")}
-          name={["vehicle", "data", "v_mldgcode"]}>
+          name={["vehicle", "data", "v_mldgcode"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item
           label={t("vehicles.fields.v_makecode")}
-          name={["vehicle", "data", "v_makecode"]}>
+          name={["vehicle", "data", "v_makecode"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_engine")}
-          name={["vehicle", "data", "v_engine"]}>
+          name={["vehicle", "data", "v_engine"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>
@@ -190,7 +211,8 @@ export default function JobsCreateVehicleInfoNewComponent() {
       <LayoutFormRow grow>
         <Form.Item
           label={t("vehicles.fields.v_cond")}
-          name={["vehicle", "data", "v_cond"]}>
+          name={["vehicle", "data", "v_cond"]}
+        >
           <Input disabled={!state.vehicle.new} />
         </Form.Item>
       </LayoutFormRow>

client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx

@@ -1,15 +1,14 @@
-import { Col, Form, Input, Row, Divider, Select } from "antd";
+import { Col, Divider, Form, Row, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import JobTotalsTable from "../job-totals-table/job-totals-table.component";
-import FormRow from "../layout-form-row/layout-form-row.component";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import FieldInputNumberCalculator from "../field-input-number-calculator/field-input-number-calculator.component";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import JobTotalsTable from "../job-totals-table/job-totals-table.component";
+import FormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,

client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx

@@ -1,6 +1,7 @@
-import { DatePicker, Form, Input } from "antd";
+import { Form, Input } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
 import Car from "../job-damage-visual/job-damage-visual.component";
@@ -13,47 +14,48 @@ export default function JobsDetailInsurance({ job, form }) {
   return (
     <div>
       <FormRow header={t("jobs.forms.inscoinfo")}>
-        <Form.Item label={t("jobs.fields.ins_co_id")} name='ins_co_id'>
+        <Form.Item label={t("jobs.fields.ins_co_id")} name="ins_co_id">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.ins_co_nm")} name='ins_co_nm'>
+        <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.ins_addr1")} name='ins_addr1'>
+        <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.ins_city")} name='ins_city'>
+        <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.ins_ct_ln")} name='ins_ct_ln'>
+        <Form.Item label={t("jobs.fields.ins_ct_ln")} name="ins_ct_ln">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.ins_ct_fn")} name='ins_ct_fn'>
+        <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.ins_ph1")} name='ins_ph1'>
+        <Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
           <FormItemPhone customInput={Input} />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.ins_ea")}
-          name='ins_ea'
+          name="ins_ea"
           rules={[
             {
               type: "email",
               message: "This is not a valid email address.",
             },
-          ]}>
+          ]}
+        >
           <FormItemEmail email={getFieldValue("ins_ea")} />
         </Form.Item>
       </FormRow>
       <FormRow header={t("jobs.forms.claiminfo")}>
-        <Form.Item label={t("jobs.fields.clm_no")} name='clm_no'>
+        <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.policy_no")} name='policy_no'>
+        <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.regie_number")} name='regie_number'>
+        <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
           <Input />
         </Form.Item>
       </FormRow>
@@ -68,60 +70,65 @@ export default function JobsDetailInsurance({ job, form }) {
             t("jobs.errors.nodamage")
           )}
         </div>
-        <Form.Item label={t("jobs.fields.loss_desc")} name='loss_desc'>
+        <Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
+        <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
       </FormRow>
       <FormRow header={t("jobs.forms.appraiserinfo")}>
-        <Form.Item label={t("jobs.fields.est_co_nm")} name='est_co_nm'>
+        <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.est_ct_fn")} name='est_ct_fn'>
+        <Form.Item label={t("jobs.fields.est_ct_fn")} name="est_ct_fn">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.est_ct_ln")} name='est_ct_ln'>
+        <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
           <Input />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.est_ph1")} name='est_ph1'>
+        <Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
           <Input />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.est_ea")}
-          name='est_ea'
+          name="est_ea"
           rules={[
             {
               type: "email",
               message: "This is not a valid email address.",
             },
-          ]}>
+          ]}
+        >
           <FormItemEmail email={getFieldValue("est_ea")} />
         </Form.Item>
       </FormRow>
-      <FormRow header='TODO: TO BE PLACED'>
+      <FormRow header="TODO: TO BE PLACED">
-        <Form.Item label={t("jobs.fields.pay_date")} name='pay_date'>
+        <Form.Item label={t("jobs.fields.pay_date")} name="pay_date">
           <Input />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.selling_dealer")}
-          name='selling_dealer'>
+          name="selling_dealer"
+        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.servicing_dealer")}
-          name='servicing_dealer'>
+          name="servicing_dealer"
+        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.selling_dealer_contact")}
-          name='selling_dealer_contact'>
+          name="selling_dealer_contact"
+        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.servicing_dealer_contact")}
-          name='servicing_dealer_contact'>
+          name="servicing_dealer_contact"
+        >
           <Input />
         </Form.Item>
         TODO: Adding servicing/selling dealer contact info?

client/src/components/notes-preset-button/notes-preset-button.component.jsx

@@ -4,7 +4,6 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { setMessage } from "../../redux/messaging/messaging.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({

client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx

@@ -1,12 +1,13 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, notification, Popover } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, notification, DatePicker, Popover } from "antd";
-import { useMutation } from "@apollo/react-hooks";
-import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -74,7 +75,7 @@ export function PartsOrderLineBackorderButton({
 
   const popContent = (
     <div>
-      <DatePicker onChange={(e) => setEta(e)} />
+      <FormDatePicker onChange={(e) => setEta(e)} />
       <Button type="primary" disabled={eta === null} onClick={handleSave}>
         {t("parts_orders.actions.backordered")}
       </Button>

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -209,11 +209,10 @@ export function PartsOrderListTableComponent({
     ];
 
     return (
-      <div>
+      <div style={{ margin: ".5rem" }}>
         <Table
           size="small"
           scroll={{ x: "50%", y: "40rem" }}
-          pagination={{ position: "top", defaultPageSize: 25 }}
           columns={columns}
           rowKey="id"
           dataSource={record.parts_order_lines}

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,13 +1,15 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { DatePicker, Form, Input, Radio, InputNumber } from "antd";
+import { Form, Input, InputNumber, Radio } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+
 export default function PartsOrderModalComponent({
   vendorList,
   sendTypeState,
-  isReturn
+  isReturn,
 }) {
   const [sendType, setSendType] = sendTypeState;
 
@@ -37,7 +39,7 @@ export default function PartsOrderModalComponent({
         ]}
         label={t("parts_orders.fields.deliver_by")}
       >
-        <DatePicker />
+        <FormDatePicker />
       </Form.Item>
       {t("parts_orders.labels.inthisorder")}
 

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -1,18 +1,11 @@
-import {
+import { Button, Form, Input, InputNumber, Select, Switch } from "antd";
-  Button,
-  DatePicker,
-  Form,
-  Input,
-  InputNumber,
-  Select,
-  Switch,
-} from "antd";
 import moment from "moment";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -47,95 +40,105 @@ export function ShopEmployeesFormComponent({
         termination_date: selectedEmployee.termination_date
           ? moment(selectedEmployee.termination_date)
           : null,
-      }}>
+      }}
-      <Button type='primary' htmlType='submit'>
+    >
+      <Button type="primary" htmlType="submit">
         {t("general.actions.save")}
       </Button>
 
       <Form.Item
-        name='first_name'
+        name="first_name"
         label={t("employees.fields.first_name")}
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
+      >
         <Input />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.last_name")}
-        name='last_name'
+        name="last_name"
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
+      >
         <Input />
       </Form.Item>
       <Form.Item
-        name='employee_number'
+        name="employee_number"
         label={t("employees.fields.employee_number")}
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
+      >
         <Input />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.pin")}
-        name='pin'
+        name="pin"
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
+      >
         <Input />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.active")}
-        valuePropName='checked'
+        valuePropName="checked"
-        name='active'>
+        name="active"
+      >
         <Switch />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.flat_rate")}
-        name='flat_rate'
+        name="flat_rate"
-        valuePropName='checked'>
+        valuePropName="checked"
+      >
         <Switch />
       </Form.Item>
       <Form.Item
-        name='hire_date'
+        name="hire_date"
         label={t("employees.fields.hire_date")}
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
-        <DatePicker />
+      >
+        <FormDatePicker />
       </Form.Item>
       <Form.Item
         label={t("employees.fields.termination_date")}
-        name='termination_date'>
+        name="termination_date"
-        <DatePicker />
+      >
+        <FormDatePicker />
       </Form.Item>
       {
         //TODO Make this a picklist.
       }
       <Form.Item
         label={t("employees.fields.cost_center")}
-        name='cost_center'
+        name="cost_center"
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
+      >
         <Select>
           {bodyshop.md_responsibility_centers.costs.map((c) => (
             <Select.Option key={c.name} value={c.name}>
@@ -146,16 +149,17 @@ export function ShopEmployeesFormComponent({
       </Form.Item>
       <Form.Item
         label={t("employees.fields.base_rate")}
-        name='base_rate'
+        name="base_rate"
         rules={[
           {
             required: true,
             message: t("general.validation.required"),
           },
-        ]}>
+        ]}
+      >
         <InputNumber />
       </Form.Item>
-      <Form.Item label={t("employees.fields.user_email")} name='user_email'>
+      <Form.Item label={t("employees.fields.user_email")} name="user_email">
         <Input />
       </Form.Item>
     </Form>

client/src/components/time-ticket-modal/time-ticket-modal.component.jsx

@@ -1,7 +1,8 @@
-import { DatePicker, Form, InputNumber, Input, Select } from "antd";
+import { Form, Input, InputNumber, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 
@@ -19,14 +20,15 @@ export default function TimeTicketModalComponent({
     <div>
       <div style={{ display: "flex" }}>
         <Form.Item
-          name='jobid'
+          name="jobid"
           label={t("timetickets.fields.ro_number")}
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <JobSearchSelect
             options={roAutoCompleteOptions}
             onBlur={() => {
@@ -39,14 +41,15 @@ export default function TimeTicketModalComponent({
           />
         </Form.Item>
         <Form.Item
-          name='employeeid'
+          name="employeeid"
           label={t("timetickets.fields.employee")}
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <EmployeeSearchSelect options={employeeAutoCompleteOptions} />
         </Form.Item>
       </div>
@@ -54,65 +57,71 @@ export default function TimeTicketModalComponent({
       <div style={{ display: "flex" }}>
         <Form.Item
           label={t("timetickets.fields.date")}
-          name='date'
+          name="date"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
-          <DatePicker />
+        >
+          <FormDatePicker />
         </Form.Item>
         <Form.Item
           label={t("timetickets.fields.productivehrs")}
-          name='productivehrs'
+          name="productivehrs"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <InputNumber min={0} precision={1} />
         </Form.Item>
         <Form.Item
           label={t("timetickets.fields.actualhrs")}
-          name='actualhrs'
+          name="actualhrs"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <InputNumber min={0} precision={1} />
         </Form.Item>
         <Form.Item
-          name='cost_center'
+          name="cost_center"
           label={t("timetickets.fields.cost_center")}
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Select
             style={{ width: "150px" }}
             onChange={() => {
               console.log("Changed.");
-            }}>
+            }}
+          >
             {responsibilityCenters.costs.map((item) => (
               <Select.Option key={item.name}>{item.name}</Select.Option>
             ))}
           </Select>
         </Form.Item>
         <Form.Item
-          name='ciecacode'
+          name="ciecacode"
           label={t("timetickets.fields.ciecacode")}
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input disabled />
         </Form.Item>
       </div>

client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx

@@ -1,6 +1,7 @@
-import { Button, DatePicker, Form, Input, InputNumber } from "antd";
+import { Button, Form, Input, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
@@ -9,15 +10,16 @@ export default function VehicleDetailFormComponent({ form }) {
 
   return (
     <div>
-      <div className='imex-flex-row imex-flex-row__flex-space-around'>
+      <div className="imex-flex-row imex-flex-row__flex-space-around">
         <Button
-          className='imex-flex-row__margin-large'
+          className="imex-flex-row__margin-large"
-          type='primary'
+          type="primary"
-          key='submit'
+          key="submit"
-          htmlType='submit'>
+          htmlType="submit"
+        >
           {t("general.actions.save")}
         </Button>
-        <div className='imex-flex-row__grow imex-flex-row__margin-large'>
+        <div className="imex-flex-row__grow imex-flex-row__margin-large">
           <FormFieldsChanged form={form} />
         </div>
       </div>
@@ -25,57 +27,62 @@ export default function VehicleDetailFormComponent({ form }) {
       <LayoutFormRow header={t("vehicles.forms.detail")}>
         <Form.Item
           label={t("vehicles.fields.v_model_yr")}
-          name='v_model_yr'
+          name="v_model_yr"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <InputNumber precision={0} />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_make_desc")}
-          name='v_make_desc'
+          name="v_make_desc"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_model_desc")}
-          name='v_model_desc'
+          name="v_model_desc"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_color")}
-          name='v_color'
+          name="v_color"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.v_vin")}
-          name='v_vin'
+          name="v_vin"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input />
         </Form.Item>
       </LayoutFormRow>
@@ -83,75 +90,78 @@ export default function VehicleDetailFormComponent({ form }) {
       <LayoutFormRow header={t("vehicles.forms.registration")}>
         <Form.Item
           label={t("vehicles.fields.plate_st")}
-          name='plate_st'
+          name="plate_st"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input />
         </Form.Item>
         <Form.Item
           label={t("vehicles.fields.plate_no")}
-          name='plate_no'
+          name="plate_no"
           rules={[
             {
               required: true,
               message: t("general.validation.required"),
             },
-          ]}>
+          ]}
+        >
           <Input />
         </Form.Item>
       </LayoutFormRow>
 
       <LayoutFormRow header={t("vehicles.forms.misc")}>
-        <Form.Item label={t("vehicles.fields.v_type")} name='v_type'>
+        <Form.Item label={t("vehicles.fields.v_type")} name="v_type">
           <Input />
         </Form.Item>
-        <Form.Item label={t("vehicles.fields.v_trimcode")} name='v_trimcode'>
+        <Form.Item label={t("vehicles.fields.v_trimcode")} name="v_trimcode">
           <Input />
         </Form.Item>
-        <Form.Item label={t("vehicles.fields.v_tone")} name='v_tone'>
+        <Form.Item label={t("vehicles.fields.v_tone")} name="v_tone">
           <Input />
         </Form.Item>
-        <Form.Item label={t("vehicles.fields.v_bstyle")} name='v_bstyle'>
+        <Form.Item label={t("vehicles.fields.v_bstyle")} name="v_bstyle">
           <Input />
         </Form.Item>
 
-        <Form.Item label={t("vehicles.fields.v_stage")} name='v_stage'>
+        <Form.Item label={t("vehicles.fields.v_stage")} name="v_stage">
           <Input />
         </Form.Item>
-        <Form.Item label={t("vehicles.fields.v_prod_dt")} name='v_prod_dt'>
+        <Form.Item label={t("vehicles.fields.v_prod_dt")} name="v_prod_dt">
-          <DatePicker />
+          <FormDatePicker />
         </Form.Item>
         {
           //TODO Add handling for paint code json
         }
         <Form.Item
           label={t("vehicles.fields.v_paint_codes")}
-          name='v_paint_codes'>
+          name="v_paint_codes"
+        >
           <Input />
         </Form.Item>
-        <Form.Item label={t("vehicles.fields.v_options")} name='v_options'>
+        <Form.Item label={t("vehicles.fields.v_options")} name="v_options">
           <Input />
         </Form.Item>
 
-        <Form.Item label={t("vehicles.fields.trim_color")} name='trim_color'>
+        <Form.Item label={t("vehicles.fields.trim_color")} name="trim_color">
           <Input />
         </Form.Item>
 
-        <Form.Item label={t("vehicles.fields.v_mldgcode")} name='v_mldgcode'>
+        <Form.Item label={t("vehicles.fields.v_mldgcode")} name="v_mldgcode">
           <Input />
         </Form.Item>
-        <Form.Item label={t("vehicles.fields.v_makecode")} name='v_makecode'>
+        <Form.Item label={t("vehicles.fields.v_makecode")} name="v_makecode">
           <Input />
         </Form.Item>
 
-        <Form.Item label={t("vehicles.fields.v_engine")} name='v_engine'>
+        <Form.Item label={t("vehicles.fields.v_engine")} name="v_engine">
           <Input />
         </Form.Item>
-        <Form.Item label={t("vehicles.fields.v_cond")} name='v_cond'>
+        <Form.Item label={t("vehicles.fields.v_cond")} name="v_cond">
           <Input />
         </Form.Item>
       </LayoutFormRow>

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -14,7 +14,7 @@ const VendorSearchSelect = (
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [option, onChange]);
+  }, [value, option, onChange]);
 
   return (
     <Select
@@ -25,15 +25,16 @@ const VendorSearchSelect = (
         width: 300,
       }}
       onChange={setOption}
-      optionFilterProp='name'
+      optionFilterProp="name"
       onSelect={onSelect}
-      disabled={disabled || false}>
+      disabled={disabled || false}
+    >
       {options
         ? options.map((o) => (
             <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
               <div style={{ display: "flex" }}>
                 {o.name}
-                <Tag color='green'>{`${o.discount * 100}%`}</Tag>
+                <Tag color="green">{`${o.discount * 100}%`}</Tag>
               </div>
             </Option>
           ))

client/src/translations/en_us/common.json

@@ -1067,7 +1067,8 @@
 		"parts_orders": {
 			"actions": {
 				"backordered": "Backordered",
-				"receive": "Receive"
+				"receive": "Receive",
+				"receiveinvoice": "Receive Invoice"
 			},
 			"errors": {
 				"backordering": "Error backordering part {{message}}.",

client/src/translations/es/common.json

@@ -1067,7 +1067,8 @@
 		"parts_orders": {
 			"actions": {
 				"backordered": "",
-				"receive": ""
+				"receive": "",
+				"receiveinvoice": ""
 			},
 			"errors": {
 				"backordering": "",

client/src/translations/fr/common.json

@@ -1067,7 +1067,8 @@
 		"parts_orders": {
 			"actions": {
 				"backordered": "",
-				"receive": ""
+				"receive": "",
+				"receiveinvoice": ""
 			},
 			"errors": {
 				"backordering": "",