IO-849 Remove class when not enforced.

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -27,10 +27,13 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
   const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
   const { t } = useTranslation();
+  const [form] = Form.useForm();
 
   const handleConvert = async (values) => {
+    setLoading(true);
     const res = await mutationConvertJob({
       variables: { jobId: job.id, ...values },
     });
@@ -42,12 +45,14 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
       });
       setVisible(false);
     }
+    setLoading(false);
   };
 
   const popMenu = (
     <div>
       <Form
         layout="vertical"
+        form={form}
         onFinish={handleConvert}
         initialValues={{ driveable: true, towin: false }}
       >
@@ -69,24 +74,26 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
             ))}
           </Select>
         </Form.Item>
-        <Form.Item
-          name={"class"}
-          label={t("jobs.fields.class")}
-          rules={[
-            {
-              required: bodyshop.enforce_class,
-              message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <Select>
-            {bodyshop.md_classes.map((s) => (
-              <Select.Option key={s} value={s}>
-                {s}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
+        {bodyshop.enforce_class && (
+          <Form.Item
+            name={"class"}
+            label={t("jobs.fields.class")}
+            rules={[
+              {
+                required: bodyshop.enforce_class,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Select>
+              {bodyshop.md_classes.map((s) => (
+                <Select.Option key={s} value={s}>
+                  {s}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+        )}
         <Form.Item
           label={t("jobs.fields.ca_gst_registrant")}
           name="ca_gst_registrant"
@@ -109,7 +116,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
           <Switch />
         </Form.Item>
         <Space wrap>
-          <Button type="danger" htmlType="submit">
+          <Button type="danger" onClick={() => form.submit()} loading={loading}>
             {t("jobs.actions.convert")}
           </Button>
           <Button onClick={() => setVisible(false)}>
@@ -129,6 +136,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO }) {
         type="danger"
         // style={{ display: job.converted ? "none" : "" }}
         disabled={job.converted || jobRO}
+        loading={loading}
         onClick={() => setVisible(true)}
       >
         {t("jobs.actions.convert")}