Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 4x 4x 9x 9x | import {
forwardRef,
useEffect,
useImperativeHandle,
useMemo,
useState,
} from "react";
import { StepViewContainer } from "@features/GiveOnboarding/container/StepViewContainer";
import { useGetCurrentMerchantId } from "@hooks/common";
import { IStep } from "@features/GiveOnboarding/types";
import { UploadDisclaimer } from "./UploadDisclaimer";
import {
QKEY_GET_MERCHANT_BY_ID,
QKEY_IDENTIFICATION_FILES,
} from "@constants/queryKeys";
import { challengeSlugs } from "@constants/challengeSlugs";
import { TMerchantDocument } from "@components/Merchants/MerchantPreview/data.types";
import { useQueryClient } from "react-query";
import { useGetIdentificationFiles } from "@sections/VerifyAccountHolder_v2/hooks/useCamera";
import { IOnSubmitOptions } from "@features/GiveOnboarding/types/handlers";
import { IApiData } from "@features/GiveOnboarding/types/form";
import { PagesContainer } from "../../pages.atoms";
import { FormLoader } from "@features/GiveOnboarding/components/loaders/FormLoader";
import BankFilesUploader from "../BankFilesUploader";
import { FileAttachmentType } from "@hooks/upload-api/uploadHooks";
import { TSetFormValues } from "@components/ProfilePage/BusinessProfileSetupNew/types";
interface Props {
data_key: IStep;
bankData: IApiData["data"]["business_bank_connect"];
id?: number;
handleAutoNavigate: () => void;
}
function BankStatement(props: Props, ref: any) {
const { merchantId } = useGetCurrentMerchantId();
const { bankData, id, handleAutoNavigate } = props;
const [isLoading, setIsLoading] = useState(false);
const queryClient = useQueryClient();
const idToUse = bankData?.bankDataAux?.id || id;
const { data: files, isLoading: areFilesLoading } =
useGetIdentificationFiles();
const bankFiles = useMemo(
() =>
files?.data
?.filter((doc: any) => doc?.attTypeName === "bank_account")
?.filter((doc: any) => doc?.bankAccountID === idToUse) || [],
[files],
) as TMerchantDocument[];
const [isFormError, setIsFormError] = useState(false);
const submit = ({ onInvalid, onValid }: IOnSubmitOptions<TSetFormValues>) => {
if (bankFiles.length) {
onValid?.({} as any);
} else if (!isLoading) {
setIsFormError(true);
onInvalid?.({
type: "formValidation",
error: {
business_bank_statement: {
message: "Uploading a bank statement document is required",
},
},
});
}
};
useImperativeHandle(
ref,
() => ({
data_key: props.data_key,
submit,
}),
[props.data_key, bankFiles, setIsFormError, isLoading],
);
useEffect(() => {
//separate effect to not update the intiial values, like submit when it shouldnt
Eif (ref && typeof ref === "object" && ref.current) {
ref.current.isLoading = areFilesLoading;
}
}, [areFilesLoading, ref]);
Iif (areFilesLoading)
return (
<PagesContainer>
<FormLoader />
</PagesContainer>
);
return (
<StepViewContainer>
<UploadDisclaimer />
<BankFilesUploader
title="Business Bank Account Statement"
tag={FileAttachmentType.BankAccount}
slug={challengeSlugs.BANK_ACCOUNT_2}
onSuccess={async () => {
await Promise.all([
queryClient.invalidateQueries([
QKEY_GET_MERCHANT_BY_ID,
merchantId,
]),
queryClient.invalidateQueries([
QKEY_IDENTIFICATION_FILES,
merchantId,
]),
]);
handleAutoNavigate();
}}
isFormError={isFormError}
setIsLoading={setIsLoading}
merchantId={merchantId}
resourceID={idToUse}
bankFiles={bankFiles}
allowMultiple
/>
</StepViewContainer>
);
}
const BankStatementStep = forwardRef(BankStatement);
BankStatementStep.displayName = "BankStatement";
export default forwardRef(BankStatement);
|