Minor fixed + refactored job details screens based on review.

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

@@ -0,0 +1,81 @@
+import { Col, Divider, Form, Row, Select, Typography } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import JobTotalsTable from "../job-totals-table/job-totals-table.component";
+import FormRow from "../layout-form-row/layout-form-row.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");
+
+export function JobsDetailTotals({ job, bodyshop }) {
+  const { t } = useTranslation();
+
+  const colSpan = {
+    sm: { span: 24 },
+    lg: { span: 12 },
+  };
+
+  return (
+    <div>
+      <Typography.Title level={4}>
+        {t("payments.labels.title")}
+      </Typography.Title>
+      <table style={{ width: "100%" }}>
+        <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>
+          </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>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <Divider />
+
+      <JobTotalsTable job={job} />
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(JobsDetailTotals);