75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
import { Divider, 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 JobTotalsTable from "../job-totals-table/job-totals-table.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();
|
|
|
|
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);
|