monorepo/LCU.WebApps.Operations.IncentiveManager/src/containers/payouts/ExportPayoutPage.tsx

import React, { useState } from "react";
import moment from "moment";
import GoalService from "../../shared/services/GoalService";
import Translate from "../../translate/Translate";
import { Alert } from "reactstrap";
import PayoutService from "../../shared/services/PayoutService";
import { IAccountingSummary, IPayoutEntry } from "../../shared/models/Payout";
import AsyncState from "../../shared/enumerations/AsyncState";
import IAsyncStateContainer from "../../shared/types/IAsyncStateContainer";
import AsyncGuard from "../shared/AsyncGuard";
import PayoutEntryTable from "../../components/payouts/PayoutEntryTable";
import ExportCsvService from "../../shared/services/ExportCsvService";

const ExportPayoutPage: React.FC = () => {
    const [month, setMonth] = useState<number>(
        moment().add(1, "months").month()
    );
    const [year, setYear] = useState<number>(moment().year());
    const [payouts, setPayouts] = useState<
        IAsyncStateContainer<IPayoutEntry[]>
    >({
        state: AsyncState.Inactive
    });
    const [accountingReport, setAccountingReport] = useState<
        IAsyncStateContainer<IAccountingSummary>
    >({
        state: AsyncState.Inactive
    });

    const years = [moment().year() - 2, moment().year() - 1, moment().year()];

    const submitForm = async () => {
        await fetchPayoutData();
    };

    const submitAccountingForm = async () => {
        setAccountingReport({
            state: AsyncState.Loading
        });
        const date = moment({ year: year, month: month - 1, day: 1 });
        const response = await PayoutService.GetAccountingReport(date);
        if (response.data) {
            setAccountingReport(response);
            ExportCsvService.exportAccountingReportCSV(response.data);
        } else {
            setAccountingReport({
                state: AsyncState.NotFound
            });
        }
    };

    const fetchPayoutData = async () => {
        setPayouts({
            state: AsyncState.Loading
        });
        const response = await PayoutService.GetExportPayouts(year, month);
        setPayouts(response);
        setAccountingReport({
            state: AsyncState.Inactive
        });
    };

    const exportCsv = () => {
        if (payouts.data && payouts.data.length > 0) {
            ExportCsvService.exportDayforcePayoutCSV(payouts.data);
        }
    };

    return (
        <div data-test="export-payout-page">
            <Alert color="info">
                {Translate.Get.containers.exportPayoutPage.instructions}
            </Alert>
            <select
                className="mx-1"
                id="fromMonth"
                value={month}
                onChange={(event) => {
                    setMonth(parseInt(event.target.value, 10));
                }}
            >
                {GoalService.Months.map(
                    (monthStr: string, monthNum: number) => (
                        <option key={monthNum} value={monthNum + 1}>
                            {monthStr}
                        </option>
                    )
                )}
            </select>
            <select
                className="mx-1"
                id="fromYear"
                value={year}
                onChange={(event) => {
                    setYear(parseInt(event.target.value, 10));
                }}
            >
                {years.map((year: number) => (
                    <option key={year} value={year}>
                        {year}
                    </option>
                ))}
            </select>
            <button
                className="btn btn-outline-info btn-sm mx-2"
                type="button"
                onClick={submitForm}
            >
                {Translate.Get.containers.exportPayoutPage.exportButton}
            </button>
            <button
                className="btn btn-outline-info btn-sm mx-2"
                type="button"
                onClick={submitAccountingForm}
            >
                {
                    Translate.Get.containers.exportPayoutPage
                        .exportAccountingButton
                }
            </button>
            <AsyncGuard container={payouts}>
                <>
                    {payouts.data && payouts.data.length > 0 ? (
                        <button
                            className="btn btn-secondary btn-sm"
                            onClick={exportCsv}
                        >
                            {" "}
                            {
                                Translate.Get.containers.exportPayoutPage
                                    .downloadButton
                            }
                        </button>
                    ) : (
                        <></>
                    )}
                </>
            </AsyncGuard>
            <br />
            <AsyncGuard container={accountingReport}>
                <Alert color="info" className="mt-2">
                    Accounting Report Exported
                </Alert>
            </AsyncGuard>
            <AsyncGuard container={payouts}>
                <PayoutEntryTable payoutEntries={payouts.data || []} />
            </AsyncGuard>
        </div>
    );
};

export default ExportPayoutPage;