IO-808 Add claim and balance to payment modal

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

@@ -19,6 +19,7 @@ const JobSearchSelect = (
     disabled,
     convertedOnly = false,
     notExported = true,
+    clm_no = false,
   },
   ref
 ) => {
@@ -55,7 +56,7 @@ const JobSearchSelect = (
 
   useEffect(() => {
     if (value === option && value) {
-      callIdSearch({ variables: { id: value } });
+      callIdSearch({ variables: { id: value } }); // Sometimes results in a no-op. Not sure how to fix.
     }
   }, [value, option, callIdSearch]);
 
@@ -66,10 +67,13 @@ const JobSearchSelect = (
     }
   };
 
-  const theOptions = [
+  const theOptions = _.uniqBy(
-    ...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
+    [
-    ...(data && data.search_jobs ? data.search_jobs : []),
+      ...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
-  ];
+      ...(data && data.search_jobs ? data.search_jobs : []),
+    ],
+    "id"
+  );
 
   return (
     <div>
@@ -93,9 +97,9 @@ const JobSearchSelect = (
         {theOptions
           ? theOptions.map((o) => (
               <Option key={o.id} value={o.id}>
-                {`${o.ro_number || t("general.labels.na")} | ${
+                {`${clm_no ? `${o.clm_no} | ` : ""}${
-                  o.ownr_ln || ""
+                  o.ro_number || t("general.labels.na")
-                } ${o.ownr_fn || ""} ${
+                } | ${o.ownr_ln || ""} ${o.ownr_fn || ""} ${
                   o.ownr_co_nm ? ` ${o.ownr_co_num}` : ""
                 }| ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
                   o.v_model_desc || ""

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

@@ -9,6 +9,7 @@ import Alert from "../alert/alert.component";
 import DatePickerFormItem 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 PaymentFormTotalPayments from "./payment-form.totalpayments.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -39,8 +40,18 @@ export function PaymentFormComponent({
           },
         ]}
       >
-        <JobSearchSelect disabled={disabled} notExported={false} />
+        <JobSearchSelect disabled={disabled} notExported={false} clm_no />
       </Form.Item>
+      <Form.Item
+        shouldUpdate={(prev, cur) => cur.jobid && prev.jobid !== cur.jobid}
+      >
+        {() => {
+          return (
+            <PaymentFormTotalPayments jobid={form.getFieldValue("jobid")} />
+          );
+        }}
+      </Form.Item>
+
       <Form.Item
         label={t("payments.fields.amount")}
         name="amount"

client/src/components/payment-form/payment-form.totalpayments.component.jsx

@@ -0,0 +1,43 @@
+import { useQuery } from "@apollo/client";
+import { Statistic } from "antd";
+import Dinero from "dinero.js";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { QUERY_JOB_PAYMENT_TOTALS } from "../../graphql/payments.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+export default function PaymentFormTotalPayments({ jobid }) {
+  const { t } = useTranslation();
+
+  const { loading, error, data } = useQuery(QUERY_JOB_PAYMENT_TOTALS, {
+    variables: { id: jobid },
+    skip: !jobid,
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  if (!data) return <div>Select a job</div>;
+  const totalPayments = data.jobs_by_pk.payments.reduce((acc, val) => {
+    return acc.add(Dinero({ amount: (val.amount || 0) * 100 }));
+  }, Dinero());
+
+  const balance = Dinero(
+    data.jobs_by_pk.job_totals.totals.total_repairs
+  ).subtract(totalPayments);
+
+  return (
+    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
+      <Statistic
+        title={t("payments.labels.totalpayments")}
+        value={totalPayments.toFormat()}
+      />
+      <Statistic
+        title={t("payments.labels.balance")}
+        valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
+        value={balance.toFormat()}
+      />
+    </div>
+  );
+}

client/src/graphql/jobs.queries.js

@@ -949,7 +949,7 @@ export const SEARCH_JOBS_FOR_AUTOCOMPLETE = gql`
       ownr_fn
       ownr_ln
       ro_number
-
+      clm_no
       vehicleid
       v_make_desc
       v_model_desc
@@ -964,7 +964,7 @@ export const SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE = gql`
       ownr_fn
       ownr_ln
       ro_number
-
+      clm_no
       vehicleid
       v_make_desc
       v_model_desc

client/src/graphql/payments.queries.js

@@ -95,3 +95,17 @@ export const UPDATE_PAYMENTS = gql`
     }
   }
 `;
+
+export const QUERY_JOB_PAYMENT_TOTALS = gql`
+  query QUERY_JOB_PAYMENT_TOTALS($id: uuid!) {
+    jobs_by_pk(id: $id) {
+      id
+      job_totals
+      payments {
+        id
+        amount
+        date
+      }
+    }
+  }
+`;