diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 696586697..ddfbcfd9c 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -13749,6 +13749,27 @@ + + pae + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + pal false @@ -20102,6 +20123,48 @@ labels + + balance + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + customer + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + electronicpayment false @@ -20123,6 +20186,27 @@ + + insurance + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + new false @@ -20186,6 +20270,27 @@ + + totalpayments + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + diff --git a/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx b/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx index dd6d371d3..e36fd3d47 100644 --- a/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx +++ b/client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx @@ -1,8 +1,10 @@ -import { Divider, Typography } from "antd"; -import React from "react"; +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 { setModalContext } from "../../redux/modals/modals.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; import CurrencyFormatter from "../../utils/CurrencyFormatter"; import { DateTimeFormatter } from "../../utils/DateFormatter"; @@ -12,63 +14,110 @@ const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, }); +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, bodyshop }) { +export function JobsDetailTotals({ + job, + 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(() => { + return Dinero(job.job_totals.totals.total_repairs).subtract(total); + }, [job.job_totals.totals.total_repairs, total]); + return (
{t("payments.labels.title")} - - - - - - - - - - - - - - {job.payments.map((p, idx) => ( - - - - - - - - - - ))} - -
{t("payments.fields.created_at")}{t("payments.fields.payer")}{t("payments.fields.amount")}{t("payments.fields.memo")}{t("payments.fields.type")}{t("payments.fields.transactionid")}{t("payments.fields.stripeid")}
- {p.created_at} - {p.payer} - {p.amount} - {p.memo}{p.type}{p.transactionid} - {p.stripeid ? ( - - {p.stripeid} - - ) : null} -
+
+ + + + + + + + + + + + + + {job.payments.map((p, idx) => ( + + + + + + + + + + ))} + +
{t("payments.fields.created_at")}{t("payments.fields.payer")}{t("payments.fields.amount")}{t("payments.fields.memo")}{t("payments.fields.type")}{t("payments.fields.transactionid")}{t("payments.fields.stripeid")}
+ {p.created_at} + {p.payer} + {p.amount} + {p.memo}{p.type}{p.transactionid} + {p.stripeid ? ( + + {p.stripeid} + + ) : null} +
+ + + + 0 ? "red" : "green" }} + value={balance.toFormat()} + /> + +
); } -export default connect(mapStateToProps, null)(JobsDetailTotals); +export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailTotals); diff --git a/client/src/components/payment-form/payment-form.component.jsx b/client/src/components/payment-form/payment-form.component.jsx index 53cc09242..695776db0 100644 --- a/client/src/components/payment-form/payment-form.component.jsx +++ b/client/src/components/payment-form/payment-form.component.jsx @@ -59,6 +59,26 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) { + + + + AMEX Discover Cash + EFT diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx index 6cb82e558..5302e0ff9 100644 --- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx +++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx @@ -208,7 +208,7 @@ export function JobsDetailPage({ } key="totals" > - + { - accum += block.fn({ key, value: obj[key] }); - }); + obj && + Object.keys(obj).map((key) => { + accum += block.fn({ key, value: obj[key] }); + }); return accum; });