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

import { Button, Card, Space, Table } from "antd";
import { EditFilled } from "@ant-design/icons";
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 { DateFormatter } from "../../utils/DateFormatter";
import { alphaSort, dateSort } from "../../utils/sorters";
import { TemplateList } from "../../utils/TemplateConstants";
import DataLabel from "../data-label/data-label.component";
import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
import PaymentExpandedRowComponent from "../payment-expanded-row/payment-expanded-row.component";
import {
  setMessage,
  openChatByPhone,
} from "../../redux/messaging/messaging.actions";
import { parsePhoneNumber } from "libphonenumber-js";
import axios from "axios";

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

const mapDispatchToProps = (dispatch) => ({
  setPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "payment" })),
  setCardPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
  setMessage: (text) => dispatch(setMessage(text)),
});

export function JobPayments({
  job,
  jobRO,
  bodyshop,
  setMessage,
  openChatByPhone,
  setPaymentContext,
  setCardPaymentContext,
  refetch,
}) {
  const { t } = useTranslation();
  const [state, setState] = useState({
    sortedInfo: {},
    filteredInfo: {},
  });
  const [generatingURL, setGeneratingtURL] = useState(false);

  const columns = [
    {
      title: t("payments.fields.date"),
      dataIndex: "date",
      key: "date",
      sorter: (a, b) => dateSort(a.date, b.date),

      sortOrder:
        state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
      render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
    },
    {
      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("general.labels.actions"),
      dataIndex: "actions",
      key: "actions",
      render: (text, record) => (
        <Space wrap>
          <Button
            disabled={record.exportedat}
            onClick={() => {
              setPaymentContext({
                actions: { refetch: refetch },
                context: record,
              });
            }}
          >
            <EditFilled />
          </Button>
          <PrintWrapperComponent
            templateObject={{
              name: TemplateList("payment").payment_receipt.key,
              variables: { id: record.id },
            }}
            messageObject={{
              to: job.ownr_ea,
            }}
            id={job.id}
          />
        </Space>
      ),
    },
  ];

  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={!job.converted}
            loading={generatingURL}
            onClick={async () => {
              const p = parsePhoneNumber(job.ownr_ph1, "CA");
              setGeneratingtURL(true);
              const response = await axios.post(
                "/intellipay/generate_payment_url",
                {
                  bodyshop,
                  amount: balance.getAmount(),
                  account: job.ro_number,
                }
              );
              setGeneratingtURL(false);

              console.log("SMS", response);

              openChatByPhone({
                phone_num: p.formatInternational(),
                jobid: job.id,
              });
              setMessage(
                t("appointments.labels.smspaymentreminder", {
                  shopname: bodyshop.shopname,
                  amount: balance.toFormat(),
                  payment_link: response.data.shorUrl,
                })
              );
            }}
          >
            {t("menus.header.paymentremindersms")}
          </Button>
          <Button
            disabled={!job.converted}
            onClick={() =>
              setPaymentContext({
                actions: { refetch: refetch },
                context: { jobid: job.id },
              })
            }
          >
            {t("menus.header.enterpayment")}
          </Button>
          <Button
            onClick={() =>
              setCardPaymentContext({
                actions: { refetch },
                context: { jobid: job.id, balance },
              })
            }
          >
            {t("menus.header.entercardpayment")}
          </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,
        }}
        expandable={{
          expandedRowRender: (record) => (
            <PaymentExpandedRowComponent record={record} bodyshop={bodyshop} />
          ),
        }}
        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);