IO-808 Add claim and balance to payment modal

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>
+  );
+}