IO-2214 Add lost sale reason tracking.

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,6 +1,15 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
-import { Button, Dropdown, Menu, notification, Popconfirm } from "antd";
+import {
+  Button,
+  Dropdown,
+  Form,
+  Menu,
+  notification,
+  Popconfirm,
+  Popover,
+  Select,
+} from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -127,35 +136,63 @@ export function JobsDetailHeaderActions({
       <Menu.Item
         disabled={job.status !== bodyshop.md_ro_statuses.default_scheduled}
       >
-        <Popconfirm
-          title={t("general.labels.areyousure")}
-          okText="Yes"
-          cancelText="No"
-          onClick={(e) => e.stopPropagation()}
+        <Popover
+          trigger="click"
           disabled={job.status !== bodyshop.md_ro_statuses.default_scheduled}
-          onConfirm={async () => {
-            const jobUpdate = await cancelAllAppointments({
-              variables: {
-                jobid: job.id,
-                job: {
-                  date_scheduled: null,
-                  scheduled_in: null,
-                  scheduled_completion: null,
-                  status: bodyshop.md_ro_statuses.default_imported,
-                },
-              },
-            });
-            if (!jobUpdate.errors) {
-              notification["success"]({
-                message: t("appointments.successes.canceled"),
-              });
-              return;
-            }
-          }}
-          getPopupContainer={(trigger) => trigger.parentNode}
+          content={
+            <Form
+              layout="vertical"
+              onFinish={async ({ lost_sale_reason }) => {
+                const jobUpdate = await cancelAllAppointments({
+                  variables: {
+                    jobid: job.id,
+                    job: {
+                      date_scheduled: null,
+                      scheduled_in: null,
+                      scheduled_completion: null,
+                      lost_sale_reason,
+                      status: bodyshop.md_ro_statuses.default_imported,
+                    },
+                  },
+                });
+                if (!jobUpdate.errors) {
+                  notification["success"]({
+                    message: t("appointments.successes.canceled"),
+                  });
+                  return;
+                }
+              }}
+            >
+              <Form.Item
+                name="lost_sale_reason"
+                label={t("jobs.fields.lost_sale_reason")}
+                rules={[
+                  {
+                    required: true,
+                    //message: t("general.validation.required"),
+                  },
+                ]}
+              >
+                <Select
+                  options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
+                    label: lsr,
+                    value: lsr,
+                  }))}
+                />
+              </Form.Item>
+              <Button
+                htmlType="submit"
+                disabled={
+                  job.status !== bodyshop.md_ro_statuses.default_scheduled
+                }
+              >
+                {t("appointments.actions.cancel")}
+              </Button>
+            </Form>
+          }
         >
           {t("menus.jobsactions.cancelallappointments")}
-        </Popconfirm>
+        </Popover>
       </Menu.Item>
       <Menu.Item
         disabled={