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

105
bodyshop_translations.babel
View File

@@ -13749,6 +13749,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>pae</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>pal</name>
<definition_loaded>false</definition_loaded>
@@ -20102,6 +20123,48 @@
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>balance</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>customer</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>electronicpayment</name>
<definition_loaded>false</definition_loaded>
@@ -20123,6 +20186,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>insurance</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>new</name>
<definition_loaded>false</definition_loaded>
@@ -20186,6 +20270,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>totalpayments</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>

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>

2
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -208,7 +208,7 @@ export function JobsDetailPage({
}
key="totals"
>
<JobsDetailTotals job={job} />
<JobsDetailTotals job={job} refetch={refetch} />
</Tabs.TabPane>
<Tabs.TabPane
tab={

7
client/src/translations/en_us/common.json
View File

@@ -867,6 +867,7 @@
"ownr_ea": "Email",
"ownr_ph1": "Phone 1",
"paa": "Aftermarket",
"pae": "Existing",
"pal": "LKQ",
"pam": "Remanufactured",
"pan": "OEM/New",
@@ -1240,10 +1241,14 @@
"type": "Type"
},
"labels": {
"balance": "Balance",
"customer": "Customer",
"electronicpayment": "Use Electronic Payment Processing?",
"insurance": "Insurance",
"new": "New Payment",
"signup": "Please contact support to sign up for electronic payments.",
"title": "Payments"
"title": "Payments",
"totalpayments": "Total Payments"
},
"successes": {
"payment": "Payment created successfully. ",

7
client/src/translations/es/common.json
View File

@@ -867,6 +867,7 @@
"ownr_ea": "Email",
"ownr_ph1": "Teléfono 1",
"paa": "",
"pae": "",
"pal": "",
"pam": "",
"pan": "",
@@ -1240,10 +1241,14 @@
"type": ""
},
"labels": {
"balance": "",
"customer": "",
"electronicpayment": "",
"insurance": "",
"new": "",
"signup": "",
"title": ""
"title": "",
"totalpayments": ""
},
"successes": {
"payment": "",

7
client/src/translations/fr/common.json
View File

@@ -867,6 +867,7 @@
"ownr_ea": "Email",
"ownr_ph1": "Téléphone 1",
"paa": "",
"pae": "",
"pal": "",
"pam": "",
"pan": "",
@@ -1240,10 +1241,14 @@
"type": ""
},
"labels": {
"balance": "",
"customer": "",
"electronicpayment": "",
"insurance": "",
"new": "",
"signup": "",
"title": ""
"title": "",
"totalpayments": ""
},
"successes": {
"payment": "",

7
server/render/renderHandlebars.js
View File

@@ -29,9 +29,10 @@ Handlebars.registerHelper("dinerof", function (context, block) {
Handlebars.registerHelper("objectKeys", function (obj, block) {
var accum = "";
Object.keys(obj).map((key) => {
accum += block.fn({ key, value: obj[key] });
});
obj &&
Object.keys(obj).map((key) => {
accum += block.fn({ key, value: obj[key] });
});
return accum;
});