bodyshop/client/src/components/job-bills-total/job-bills-total.component.jsx

import { Alert, Card, Col, Row, Space, Statistic, Tooltip, Typography } from "antd";
import Dinero from "dinero.js";
import React from "react";
import { useTranslation } from "react-i18next";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import "./job-bills-total.styles.scss";

export default function JobBillsTotalComponent({
  loading,
  bills,
  partsOrders,
  jobTotals,
  showWarning,
  warningCallback
}) {
  const { t } = useTranslation();

  if (loading) return <LoadingSkeleton />;
  if (!!!jobTotals) {
    if (showWarning && warningCallback && typeof warningCallback === "function") {
      warningCallback({ key: "bills", warning: t("jobs.errors.nofinancial") });
    }
    return <AlertComponent type="error" message={t("jobs.errors.nofinancial")} />;
  }

  const totals = jobTotals;

  let billTotals = Dinero();
  let billCms = Dinero();
  let lbrAdjustments = Dinero();
  let totalReturns = Dinero();
  let totalReturnsMarkedNotReceived = Dinero();
  let totalReturnsMarkedReceived = Dinero();

  partsOrders.forEach((p) =>
    p.parts_order_lines.forEach((pol) => {
      if (p.return) {
        totalReturns = totalReturns.add(
          Dinero({
            amount: Math.round((pol.act_price || 0) * 100)
          }).multiply(pol.quantity)
        );

        if (pol.cm_received === null) {
          return; //TODO:AIO This was previously removed. Check if functionality impacted.
          // Skip this calculation for bills posted prior to the CNR change.
        } else {
          if (pol.cm_received === false) {
            totalReturnsMarkedNotReceived = totalReturnsMarkedNotReceived.add(
              Dinero({
                amount: Math.round((pol.act_price || 0) * 100)
              }).multiply(pol.quantity)
            );
          } else {
            totalReturnsMarkedReceived = totalReturnsMarkedReceived.add(
              Dinero({
                amount: Math.round((pol.act_price || 0) * 100)
              }).multiply(pol.quantity)
            );
          }
        }
      }
    })
  );

  bills.forEach((i) =>
    i.billlines.forEach((il) => {
      if (!i.is_credit_memo) {
        billTotals = billTotals.add(
          Dinero({
            amount: Math.round((il.actual_price || 0) * 100)
          }).multiply(il.quantity)
        );
      } else {
        billCms = billCms.add(
          Dinero({
            amount: Math.round((il.actual_price || 0) * 100)
          }).multiply(il.quantity)
        );
      }
      if (il.deductedfromlbr) {
        lbrAdjustments = lbrAdjustments.add(
          Dinero({
            amount: Math.round((il.actual_price || 0) * 100)
          }).multiply(il.quantity)
        );
      }
    })
  );

  const totalPartsSublet = Dinero(totals.parts.parts.total)
    .add(Dinero(totals.parts.sublets.total))
    .add(Dinero(totals.additional.shipping))
    .add(Dinero(totals.additional.towing))
    .add(
      InstanceRenderManager({
        imex: Dinero(),
        rome: Dinero(totals.additional.additionalCosts),
        promanager: "USE_ROME"
      })
    ); // Additional costs were captured for Rome, but not imex.

  const discrepancy = totalPartsSublet.subtract(billTotals);

  const discrepWithLbrAdj = discrepancy.add(lbrAdjustments);

  const discrepWithCms = discrepWithLbrAdj.add(totalReturns);
  const calculatedCreditsNotReceived = totalReturns.subtract(billCms); //billCms is tracked as a negative number.

  if (showWarning && warningCallback && typeof warningCallback === "function") {
    if (discrepWithCms.getAmount() !== 0) {
      warningCallback({
        key: "bills",
        warning: t("jobs.labels.outstanding_reconciliation_discrep")
      });
    }
    if (calculatedCreditsNotReceived.getAmount() > 0) {
      warningCallback({ key: "cm", warning: t("jobs.labels.outstanding_credit_memos") });
    }
  }

  return (
    <Row gutter={[16, 16]}>
      <Col md={24} lg={18}>
        <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
          <Space wrap size="large">
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.partstotal")
                  }}
                />
              }
            >
              <Statistic title={t("jobs.labels.rosaletotal")} value={totalPartsSublet.toFormat()} />
            </Tooltip>
            <Typography.Title>-</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.billtotal")
                  }}
                />
              }
            >
              <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.discrep1")
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.discrepancy")}
                valueStyle={{
                  color: discrepancy.getAmount() === 0 ? "green" : "red"
                }}
                value={discrepancy.toFormat()}
              />
            </Tooltip>
            <Typography.Title>+</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.laboradj")
                  }}
                />
              }
            >
              <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.discrep2")
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.discrepancy")}
                valueStyle={{
                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
                }}
                value={discrepWithLbrAdj.toFormat()}
              />
            </Tooltip>
            <Typography.Title>+</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.creditmemos")
                  }}
                />
              }
            >
              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
            </Tooltip>
            <Typography.Title>=</Typography.Title>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.discrep3")
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.discrepancy")}
                valueStyle={{
                  color: discrepWithCms.getAmount() === 0 ? "green" : "red"
                }}
                value={discrepWithCms.toFormat()}
              />
            </Tooltip>
          </Space>

          {showWarning &&
            (discrepWithCms.getAmount() !== 0 ||
              discrepWithLbrAdj.getAmount() !== 0 ||
              discrepancy.getAmount() !== 0) && (
              <Alert
                style={{ margin: "8px 0px" }}
                type="warning"
                message={t("jobs.labels.outstanding_reconciliation_discrep")}
              />
            )}
        </Card>
      </Col>
      <Col md={24} lg={6}>
        <Card title={t("jobs.labels.returntotals")} style={{ height: "100%" }}>
          <Space wrap>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.totalreturns")
                  }}
                />
              }
            >
              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
            </Tooltip>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.calculatedcreditsnotreceived")
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.calculatedcreditsnotreceived")}
                valueStyle={{
                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
                }}
                value={
                  calculatedCreditsNotReceived.getAmount() >= 0
                    ? calculatedCreditsNotReceived.toFormat()
                    : Dinero().toFormat()
                }
              />
            </Tooltip>
            <Tooltip
              title={
                <div
                  dangerouslySetInnerHTML={{
                    __html: t("jobs.labels.plitooltips.creditsnotreceived")
                  }}
                />
              }
            >
              <Statistic
                title={t("bills.labels.creditsnotreceived")}
                valueStyle={{
                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
                }}
                value={
                  totalReturnsMarkedNotReceived.getAmount() >= 0
                    ? totalReturnsMarkedNotReceived.toFormat()
                    : Dinero().toFormat()
                }
              />
            </Tooltip>
          </Space>
          {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
            <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_credit_memos")} />
          )}
        </Card>
      </Col>
    </Row>
  );
}