Added length of appointment to config + fixed appointments not showing in scheduling modal + added appointment confirmation template. BOD-141 BOD-149 BOD-148

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

@@ -46,7 +46,7 @@ export function JobsDetailHeader({
 
   const tombstoneTitle = (
     <div>
-      <Avatar size='large' alt='Vehicle Image' src={CarImage} />
+      <Avatar size="large" alt="Vehicle Image" src={CarImage} />
       {job.ro_number
         ? `${t("jobs.fields.ro_number")} ${job.ro_number}`
         : `EST-${job.est_number}`}
@@ -57,7 +57,8 @@ export function JobsDetailHeader({
     <Menu
       onClick={(e) => {
         updateJobStatus(e.key);
-      }}>
+      }}
+    >
       {bodyshop.md_ro_statuses.statuses.map((item) => (
         <Menu.Item key={item}>{item}</Menu.Item>
       ))}
@@ -65,12 +66,12 @@ export function JobsDetailHeader({
   );
 
   const menuExtra = [
-    <Dropdown overlay={statusmenu} key='changestatus'>
+    <Dropdown overlay={statusmenu} key="changestatus">
       <Button>
         {t("jobs.actions.changestatus")} <DownCircleFilled />
       </Button>
     </Dropdown>,
-    <Badge key='schedule' count={job.appointments_aggregate.aggregate.count}>
+    <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
       <Button
         //TODO Enabled logic based on status.
         onClick={() => {
@@ -78,15 +79,17 @@ export function JobsDetailHeader({
             actions: { refetch: refetch },
             context: {
               jobId: job.id,
+              job: job,
             },
           });
-        }}>
+        }}
+      >
         {t("jobs.actions.schedule")}
       </Button>
     </Badge>,
     <Button
-      key='convert'
-      type='dashed'
+      key="convert"
+      type="dashed"
       disabled={job.converted}
       onClick={() => {
         mutationConvertJob({
@@ -98,11 +101,12 @@ export function JobsDetailHeader({
             message: t("jobs.successes.converted"),
           });
         });
-      }}>
+      }}
+    >
       {t("jobs.actions.convert")}
     </Button>,
-    <JobsDetailHeaderActions key='actions' job={job} refetch={refetch} />,
-    <Button type='primary' key='submit' htmlType='submit'>
+    <JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />,
+    <Button type="primary" key="submit" htmlType="submit">
       {t("general.actions.save")}
     </Button>,
   ];
@@ -115,48 +119,53 @@ export function JobsDetailHeader({
       title={tombstoneTitle}
       //subTitle={tombstoneSubtitle}
       tags={
-        <span key='job-status'>
-          {job.status ? <Tag color='blue'>{job.status}</Tag> : null}
+        <span key="job-status">
+          {job.status ? <Tag color="blue">{job.status}</Tag> : null}
           {job.inproduction ? (
-            <Tag color='#f50'>{t("jobs.labels.inproduction")}</Tag>
+            <Tag color="#f50">{t("jobs.labels.inproduction")}</Tag>
           ) : null}
           <OwnerTagPopoverComponent job={job} />
           <VehicleTagPopoverComponent job={job} />
           <BarcodePopup value={job.id} />
         </span>
       }
-      extra={menuExtra}>
-      <Descriptions size='small' column={5}>
-        <Descriptions.Item key='total' label={t("jobs.fields.repairtotal")}>
+      extra={menuExtra}
+    >
+      <Descriptions size="small" column={5}>
+        <Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}>
           <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
         </Descriptions.Item>
 
         <Descriptions.Item
-          key='custowing'
-          label={t("jobs.fields.customerowing")}>
+          key="custowing"
+          label={t("jobs.fields.customerowing")}
+        >
           <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
         </Descriptions.Item>
 
         <Descriptions.Item
-          key='scp'
-          label={t("jobs.fields.specialcoveragepolicy")}>
+          key="scp"
+          label={t("jobs.fields.specialcoveragepolicy")}
+        >
           <Checkbox checked={job.special_coverage_policy} />
         </Descriptions.Item>
 
         <Descriptions.Item
-          key='sched_comp'
-          label={t("jobs.fields.scheduled_completion")}>
+          key="sched_comp"
+          label={t("jobs.fields.scheduled_completion")}
+        >
           {job.scheduled_completion ? (
-            <Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment>
+            <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
           ) : null}
         </Descriptions.Item>
 
-        <Descriptions.Item key='servicecar' label={t("jobs.fields.servicecar")}>
+        <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
           {job.cccontracts &&
             job.cccontracts.map((item) => (
               <Link
                 key={item.id}
-                to={`/manage/courtesycars/contracts/${item.id}`}>
+                to={`/manage/courtesycars/contracts/${item.id}`}
+              >
                 <div>{`${item.agreementnumber} - ${item.start} - ${item.scheduledreturn}`}</div>
               </Link>
             ))}