IO-808 Add claim and balance to payment modal

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