Further UI Improvements

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

@@ -1,143 +1,15 @@
-import { Button, Divider, Space, Statistic, Typography } from "antd";
-import Dinero from "dinero.js";
-import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectJobReadOnly } from "../../redux/application/application.selectors";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-import { TemplateList } from "../../utils/TemplateConstants";
+import { Divider } from "antd";
+import React from "react";
+import JobPayments from "../job-payments/job-payments.component";
 import JobTotalsTable from "../job-totals-table/job-totals-table.component";
-import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  jobRO: selectJobReadOnly,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  setPaymentContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "payment" })),
-});
-
-const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");
-
-export function JobsDetailTotals({
-  job,
-  jobRO,
-  bodyshop,
-  setPaymentContext,
-  refetch,
-}) {
-  const { t } = useTranslation();
-
-  const total = useMemo(() => {
-    return (
-      job.payments &&
-      job.payments.reduce((acc, val) => {
-        acc = acc.add(Dinero({ amount: Math.round(val.amount * 100) }));
-        return acc;
-      }, Dinero())
-    );
-  }, [job.payments]);
-
-  const balance = useMemo(() => {
-    if (job && job.job_totals && job.job_totals.totals.total_repairs)
-      return Dinero(job.job_totals.totals.total_repairs).subtract(total);
-    return Dinero({ amount: 0 }).subtract(total);
-  }, [job, total]);
 
+export function JobsDetailTotals({ job, refetch }) {
   return (
     <div>
-      <Typography.Title level={4}>
-        {t("payments.labels.title")}
-      </Typography.Title>
-
-      <div className="imex-flex-row">
-        <table style={{ flex: 1 }}>
-          <thead>
-            <tr>
-              <th>{t("payments.fields.created_at")}</th>
-              <th>{t("payments.fields.payer")}</th>
-              <th>{t("payments.fields.amount")}</th>
-              <th>{t("payments.fields.memo")}</th>
-              <th>{t("payments.fields.type")}</th>
-              <th>{t("payments.fields.transactionid")}</th>
-              <th>{t("payments.fields.stripeid")}</th>
-              <th>{t("general.labels.actions")}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {job.payments.map((p, idx) => (
-              <tr key={idx}>
-                <td>
-                  <DateTimeFormatter>{p.created_at}</DateTimeFormatter>
-                </td>
-                <td>{p.payer}</td>
-                <td>
-                  <CurrencyFormatter>{p.amount}</CurrencyFormatter>
-                </td>
-                <td>{p.memo}</td>
-                <td>{p.type}</td>
-                <td>{p.transactionid}</td>
-                <td>
-                  {p.stripeid ? (
-                    <a
-                      href={
-                        stripeTestEnv
-                          ? `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/test/payments/${p.stripeid}`
-                          : `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/payments/${p.stripeid}`
-                      }
-                    >
-                      {p.stripeid}
-                    </a>
-                  ) : null}
-                </td>
-                <td>
-                  <PrintWrapperComponent
-                    templateObject={{
-                      name: TemplateList("payment").payment_receipt.key,
-                      variables: { id: p.id },
-                    }}
-                    messageObject={{
-                      to: job.ownr_ea,
-                    }}
-                  />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <Space direction="vertical">
-          <Button
-            disabled={jobRO}
-            onClick={() =>
-              setPaymentContext({
-                actions: { refetch: refetch },
-                context: { jobid: job.id },
-              })
-            }
-          >
-            {t("menus.header.enterpayment")}
-          </Button>
-          <Statistic
-            title={t("payments.labels.totalpayments")}
-            value={total.toFormat()}
-          />
-          <Statistic
-            title={t("payments.labels.balance")}
-            valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
-            value={balance.toFormat()}
-          />
-        </Space>
-      </div>
+      <JobPayments job={job} refetch={refetch} />
       <Divider />
-
       <JobTotalsTable job={job} />
     </div>
   );
 }
-export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailTotals);
+export default JobsDetailTotals;