bodyshop/client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

import { Alert, Button, Card, Table, Typography } from "antd";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import Dinero from "dinero.js";
import { SyncOutlined } from "@ant-design/icons";
import { pageLimit } from "../../utils/config";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { useSocket } from "../../contexts/SocketIO/useSocket";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop
});

const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummary);

export function DmsAllocationsSummary({ socket, bodyshop, jobId, title }) {
  const { t } = useTranslation();
  const [allocationsSummary, setAllocationsSummary] = useState([]);
  const {
    treatments: { Fortellis }
  } = useSplitTreatments({
    attributes: {},
    names: ["Fortellis"],
    splitKey: bodyshop.imexshopid
  });
  const { socket: wsssocket } = useSocket();

  useEffect(() => {
    if (Fortellis.treatment === "on") {
      wsssocket.emit("cdk-calculate-allocations", jobId, (ack) => {
        setAllocationsSummary(ack);
        socket.allocationsSummary = ack;
      });
    } else {
      if (socket.connected) {
        socket.emit("cdk-calculate-allocations", jobId, (ack) => {
          setAllocationsSummary(ack);
          socket.allocationsSummary = ack;
        });
      }
    }
  }, [socket, socket.connected, jobId]);

  const columns = [
    {
      title: t("jobs.fields.dms.center"),
      dataIndex: "center",
      key: "center"
    },
    {
      title: t("jobs.fields.dms.sale"),
      dataIndex: "sale",
      key: "sale",
      render: (text, record) => Dinero(record.sale).toFormat()
    },
    {
      title: t("jobs.fields.dms.cost"),
      dataIndex: "cost",
      key: "cost",
      render: (text, record) => Dinero(record.cost).toFormat()
    },
    {
      title: t("jobs.fields.dms.sale_dms_acctnumber"),
      dataIndex: "sale_dms_acctnumber",
      key: "sale_dms_acctnumber",
      render: (text, record) => record.profitCenter?.dms_acctnumber
    },
    {
      title: t("jobs.fields.dms.cost_dms_acctnumber"),
      dataIndex: "cost_dms_acctnumber",
      key: "cost_dms_acctnumber",
      render: (text, record) => record.costCenter?.dms_acctnumber
    },
    {
      title: t("jobs.fields.dms.dms_wip_acctnumber"),
      dataIndex: "dms_wip_acctnumber",
      key: "dms_wip_acctnumber",
      render: (text, record) => record.costCenter?.dms_wip_acctnumber
    }
  ];

  return (
    <Card
      title={title}
      extra={
        <Button
          onClick={() => {
            socket.emit("cdk-calculate-allocations", jobId, (ack) => setAllocationsSummary(ack));
          }}
        >
          <SyncOutlined />
        </Button>
      }
    >
      {bodyshop.pbs_configuration?.disablebillwip && (
        <Alert type="warning" message={t("jobs.labels.dms.disablebillwip")} />
      )}
      <Table
        pagination={{ position: "top", defaultPageSize: pageLimit }}
        columns={columns}
        rowKey="center"
        dataSource={allocationsSummary}
        locale={{ emptyText: t("dms.labels.refreshallocations") }}
        summary={() => {
          const totals =
            allocationsSummary &&
            allocationsSummary.reduce(
              (acc, val) => {
                return {
                  totalSale: acc.totalSale.add(Dinero(val.sale)),
                  totalCost: acc.totalCost.add(Dinero(val.cost))
                };
              },
              {
                totalSale: Dinero(),
                totalCost: Dinero()
              }
            );

          return (
            <Table.Summary.Row>
              <Table.Summary.Cell>
                <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
              </Table.Summary.Cell>
              <Table.Summary.Cell>{totals && totals.totalSale.toFormat()}</Table.Summary.Cell>
              <Table.Summary.Cell>
                {
                  //  totals.totalCost.toFormat()
                }
              </Table.Summary.Cell>
              <Table.Summary.Cell></Table.Summary.Cell>
              <Table.Summary.Cell></Table.Summary.Cell>
            </Table.Summary.Row>
          );
        }}
      />
    </Card>
  );
}