bodyshop/client/src/components/job-payments/job-payments.component.jsx

import { Button, Card, Space, Table } from "antd";
import Dinero from "dinero.js";
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import { alphaSort } from "../../utils/sorters";
import { TemplateList } from "../../utils/TemplateConstants";
import DataLabel from "../data-label/data-label.component";
import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly,
});

const mapDispatchToProps = (dispatch) => ({
  setPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "payment" })),
});

const stripeTestEnv = process.env.REACT_APP_STRIPE_PUBLIC_KEY; //.includes("test");

export function JobPayments({
  job,
  jobRO,
  bodyshop,
  setPaymentContext,
  refetch,
}) {
  const { t } = useTranslation();
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: {},
  });
  const columns = [
    {
      title: t("payments.fields.created_at"),
      dataIndex: "created_at",
      key: "created_at",
      sortOrder:
        state.sortedInfo.columnKey === "created_at" && state.sortedInfo.order,
      render: (text, record) => (
        <DateTimeFormatter>{record.created_at}</DateTimeFormatter>
      ),
    },
    {
      title: t("payments.fields.payer"),
      dataIndex: "payer",
      key: "payer",
      sorter: (a, b) => alphaSort(a.payer, b.payer),
      sortOrder:
        state.sortedInfo.columnKey === "payer" && state.sortedInfo.order,
    },
    {
      title: t("payments.fields.amount"),
      dataIndex: "amount",
      key: "amount",
      sorter: (a, b) => a.amount - b.amount,
      sortOrder:
        state.sortedInfo.columnKey === "amount" && state.sortedInfo.order,
      render: (text, record) => (
        <CurrencyFormatter>{record.amount}</CurrencyFormatter>
      ),
    },
    {
      title: t("payments.fields.memo"),
      dataIndex: "memo",
      key: "memo",
      sorter: (a, b) => alphaSort(a.memo, b.memo),
      sortOrder:
        state.sortedInfo.columnKey === "memo" && state.sortedInfo.order,
    },
    {
      title: t("payments.fields.type"),
      dataIndex: "type",
      key: "type",
      sorter: (a, b) => alphaSort(a.type, b.type),
      sortOrder:
        state.sortedInfo.columnKey === "type" && state.sortedInfo.order,
    },
    {
      title: t("payments.fields.transactionid"),
      dataIndex: "transactionid",
      key: "transactionid",
      sorter: (a, b) => alphaSort(a.transactionid, b.transactionid),
      sortOrder:
        state.sortedInfo.columnKey === "transactionid" &&
        state.sortedInfo.order,
    },
    {
      title: t("payments.fields.stripeid"),
      dataIndex: "stripeid",
      key: "stripeid",
      render: (text, record) =>
        record.stripeid ? (
          <a
            href={
              stripeTestEnv
                ? `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/test/payments/${record.stripeid}`
                : `https://dashboard.stripe.com/${bodyshop.stripe_acct_id}/payments/${record.stripeid}`
            }
          >
            {record.stripeid}
          </a>
        ) : null,
    },
    {
      title: t("general.labels.actions"),
      dataIndex: "actions",
      key: "actions",
      render: (text, record) => (
        <PrintWrapperComponent
          templateObject={{
            name: TemplateList("payment").payment_receipt.key,
            variables: { id: record.id },
          }}
          messageObject={{
            to: job.ownr_ea,
          }}
        />
      ),
    },
  ];

  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(() => {
    if (job && job.job_totals && job.job_totals.totals.total_repairs)
      return Dinero(job.job_totals.totals.total_repairs).subtract(total);
    return Dinero({ amount: 0 }).subtract(total);
  }, [job, total]);

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };

  return (
    <Card
      title={t("payments.labels.title")}
      extra={
        <Space wrap>
          <Button
            disabled={jobRO}
            onClick={() =>
              setPaymentContext({
                actions: { refetch: refetch },
                context: { jobid: job.id },
              })
            }
          >
            {t("menus.header.enterpayment")}
          </Button>
          <DataLabel
            valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
            label={t("payments.labels.balance")}
          >
            {balance.toFormat()}
          </DataLabel>
        </Space>
      }
    >
      <Table
        columns={columns}
        rowKey="id"
        pagination={false}
        onChange={handleTableChange}
        dataSource={job && job.payments}
        scroll={{
          x: true,
        }}
        summary={() => (
          <>
            <Table.Summary.Row>
              <Table.Summary.Cell>
                <strong>{t("payments.labels.totalpayments")}</strong>
              </Table.Summary.Cell>
              <Table.Summary.Cell />
              <Table.Summary.Cell>
                <strong>{total.toFormat()}</strong>
              </Table.Summary.Cell>
              <Table.Summary.Cell />
              <Table.Summary.Cell />
              <Table.Summary.Cell />
            </Table.Summary.Row>
          </>
        )}
      />
    </Card>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobPayments);