imexrps/src/components/pages/audit/audit.page.jsx

import { PrinterFilled } from "@ant-design/icons";
import { Alert, Button, Card, Col, DatePicker, Form, Input, Result, Row, Space } from "antd";
import React, { useRef } from "react";
import { connect } from "react-redux";
import { useReactToPrint } from "react-to-print";
import { createStructuredSelector } from "reselect";
import ipcTypes from "../../../ipc.types";
import { queryReportingData } from "../../../redux/reporting/reporting.actions";
import { selectAuditError } from "../../../redux/reporting/reporting.selectors";
import dayjs from "../../../util/day";
import AuditResultsOrganism from "../../organisms/audit-results/audit-results.organism";
import FeatureWrapper from "../../templates/feature-wrapper";
import "./audit.page.styles.scss";
import { selectBodyshop } from "../../../redux/user/user.selectors";

const { ipcRenderer } = window;

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
  auditError: selectAuditError
});
const mapDispatchToProps = (dispatch) => ({
  queryReportingData: (dates) => dispatch(queryReportingData(dates))
});
export default connect(mapStateToProps, mapDispatchToProps)(AuditPage);

export function AuditPage({ auditError, queryReportingData, bodyshop }) {
  const handleBrowseForFile = async ({ sheetName, dateRange }) => {
    queryReportingData({
      startDate: dateRange[0] || dayjs("2024-03-01"),
      endDate: dateRange[1] || dayjs("2024-03-31")
    });
    ipcRenderer.send(ipcTypes.audit.toMain.browseForFile, { sheetName });
  };
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
    bodyClass: "audit-container-print"
  });

  window.ref = componentRef.current;
  if (auditError) console.log("Error when opening audit file.", auditError);
  return (
    <FeatureWrapper featureName="audit" noauth={<NoAuditAccess features={bodyshop.features} />}>
      <div className="audit-container" id="audit-results-container">
        {bodyshop.features.audit_trial && (
          <Alert
            type="info"
            message={`You are currently on a trial of the RPS audit functionality. It will expire on ${bodyshop.features.audit_trial}`}
          />
        )}
        <Row gutter={[16, 16]} ref={componentRef}>
          <Col span={24}>
            <Card>
              <Form onFinish={handleBrowseForFile}>
                <Form.Item
                  label="1. Ready for Payment Date Between"
                  name="dateRange"
                  tooltip="Select the time period that you would like to audit. This is typically a whole month or quarter."
                  rules={[
                    { type: "array", required: true },
                    {
                      validator(rule, value) {
                        if (!value || !value.length === 2) {
                          return Promise.resolve();
                        }

                        // if (dayjs(value[1]).diff(dayjs(value[0]), "month", true) > 1) {
                        //   return Promise.reject("Time period exceeds 1 month. Please select a shorter date range.");
                        // } else {
                        return Promise.resolve();
                        // }
                      }
                    }
                  ]}
                >
                  <DatePicker.RangePicker
                    format="MM/DD/YYYY"
                    ranges={{
                      "2 Months ago": [
                        dayjs().startOf("month").subtract(2, "month"),
                        dayjs().startOf("month").subtract(2, "month").endOf("month")
                      ],
                      "Last Month": [
                        dayjs().startOf("month").subtract(1, "month"),
                        dayjs().startOf("month").subtract(1, "month").endOf("month")
                      ],
                      "This Month": [dayjs().startOf("month"), dayjs().endOf("month")],
                      "Last Quarter": [
                        dayjs().startOf("quarter").subtract(1, "quarter"),
                        dayjs().startOf("quarter").subtract(1, "day")
                      ],
                      "Last 3 Months": [
                        dayjs().startOf("month").subtract(3, "month"),
                        dayjs().startOf("month").subtract(1, "month").endOf("month")
                      ]
                    }}
                  />
                </Form.Item>

                <Space align="middle" wrap>
                  <Form.Item
                    label="2. Sheet Name"
                    tooltip="The name of the sheet which contains detailed RPS claim data."
                    name="sheetName"
                    initialValue="Shop RPS Claim Detail"
                    required
                  >
                    <Input width="200px" />
                  </Form.Item>
                  <Button type="primary" htmlType="submit">
                    Select MPI Audit XLS File
                  </Button>
                  <Button onClick={handlePrint}>
                    <PrinterFilled />
                  </Button>
                </Space>
              </Form>
            </Card>
          </Col>
          {auditError && (
            <Col span={24}>
              <Alert
                type="error"
                banner
                message="Error encountered when opening the audit file. Please ensure it is not open in any other programs, and the sheet name is correct."
              />
            </Col>
          )}
          <AuditResultsOrganism />
        </Row>
      </div>
    </FeatureWrapper>
  );
}

function NoAuditAccess({ features }) {
  return (
    <Result
      status="warning"
      title="You do not currently have access to the audit feature of RPS."
      subTitle="Auditing allows you to instantly and automatically find discrepancies between the data you have recorded in RPS and the scorecard provided to your by your SRA."
      extra={[
        <Button
          size="large"
          type="primary"
          onClick={() => {
            window.$crisp.push(["do", "chat:open"]);
            window.$crisp.push(["do", "message:thread:start", ["Subscription Upgrade - RPS Audit"]]);
            window.$crisp.push([
              "do",
              "message:send",
              ["text", "Hello, I would like to subscribe to the RPS audit feature."]
            ]);
          }}
        >
          Subscribe
        </Button>,
        <Button
          size="large"
          disabled={features.audit_trial}
          onClick={() => {
            window.$crisp.push(["do", "chat:open"]);
            window.$crisp.push(["set", "session:event", [[["trial_request", { feature: "audit" }]]]]);
            window.$crisp.push(["do", "message:thread:start", ["Trial Request - RPS Audit"]]);
            window.$crisp.push([
              "do",
              "message:send",
              ["text", "Hello, I would like to request a trial of the RPS audit feature."]
            ]);
          }}
        >
          {features.audit_trial ? `(Trial ended on ${features.audit_trial})` : "Request Trial"}
        </Button>
      ]}
    />
  );
}