admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added reminaing balance to payments screen BOD-231

Browse Source
This commit is contained in:
Patrick Fic
2020-09-08 10:23:25 -07:00
parent af8e39da75
commit 92ee64a413
8 changed files with 244 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
client/src/components/jobs-detail-totals/jobs-detail-totals.component.jsx
View File

@@ -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 (
<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>
<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>
</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>
<Space direction="vertical">
<Button
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>
<Divider />
<JobTotalsTable job={job} />
</div>
);
}
export default connect(mapStateToProps, null)(JobsDetailTotals);
export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailTotals);

21
client/src/components/payment-form/payment-form.component.jsx
View File

@@ -59,6 +59,26 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
<Input />
</Form.Item>
<Form.Item
label={t("payments.fields.payer")}
name="payer"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Select>
<Select.Option value={t("payments.labels.customer")}>
{t("payments.labels.customer")}
</Select.Option>
<Select.Option value={t("payments.labels.insurance")}>
{t("payments.labels.insurance")}
</Select.Option>
</Select>
</Form.Item>
<Form.Item
label={t("payments.fields.type")}
name="type"
@@ -75,6 +95,7 @@ export function PaymentFormComponent({ form, stripeStateArr, bodyshop }) {
<Select.Option value="AMEX">AMEX</Select.Option>
<Select.Option value="Discover">Discover</Select.Option>
<Select.Option value="Cash">Cash</Select.Option>
<Select.Option value="EFT">EFT</Select.Option>
</Select>
</Form.Item>