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 | 19x 15x 15x 15x 2x 15x 19x | import React from "react";
import { Box, Collapse, Stack, Grid, Skeleton } from "@mui/material";
import OnboardingPlaidCard from "./OnboardingPlaidCard";
import { Button } from "@common/Button";
import CreateOnboardingBankAccount from "./CreateOnboardingBankAccount";
import { FormProvider } from "react-hook-form";
import OnboardingBankStatement from "./OnboardingBankStatement";
import useAddOnboardingBankAccounts from "@hooks/onboarding/useAddOnboardingBankAccounts";
import {
ProfileSetupFormActions,
ProfileSetupFormContainer,
ProfileSetupFormTitle,
} from "../form.components";
import { gridItemsRenderer } from "@utils/rendering/nodesRenderers";
type Props = {
backLink: () => void;
merchantId: number;
firstAccount: any;
};
const BankAccountSetup = ({ backLink, merchantId, firstAccount }: Props) => {
const {
methods,
onSubmit,
isDisabled,
plaidHandler,
plaidData,
bankFiles,
bankFilesLoading,
isCreatingAccount,
} = useAddOnboardingBankAccounts(merchantId, backLink, firstAccount);
const [isManual, setIsManual] = React.useState(true);
const content = [
{
node: isCreatingAccount ? (
<LoadingPlaidCard />
) : (
<OnboardingPlaidCard
name={plaidData?.name || null}
accountNumber={plaidData?.numberLast4 || null}
onClick={plaidHandler}
/>
),
hidden: isManual,
},
{
node: <OnboardingBankStatement />,
hidden: !plaidData,
},
{
node: (
<Box>
<Collapse orientation="vertical" in={!isManual}>
<Button
background="tertiary"
sx={{ margin: "0 auto" }}
onClick={() => setIsManual(true)}
data-testid="link-manually"
>
or link manually
</Button>
</Collapse>
<Collapse orientation="vertical" in={isManual} unmountOnExit>
<CreateOnboardingBankAccount
bankFiles={bankFiles}
bankFilesLoading={bankFilesLoading}
firstAccount={firstAccount}
/>
</Collapse>
</Box>
),
hidden: !!plaidData,
},
];
return (
<Stack
direction="column"
justifyContent="stretch"
height="inherit"
flexGrow={1}
>
<FormProvider {...methods}>
<Box
id="onboarding-bank-accounts"
component="form"
onSubmit={methods.handleSubmit(onSubmit)}
flexGrow={1}
display="flex"
>
<ProfileSetupFormContainer sx={{ paddingTop: 0 }}>
<Stack direction="column" gap={4} height="min-content">
<ProfileSetupFormTitle title="Connect Business Bank Account" />
<Grid container spacing="12px" overflow="hidden">
{gridItemsRenderer(content)}
</Grid>
</Stack>
<ProfileSetupFormActions
secondaryAction={{
onClick: backLink,
}}
primaryAction={{
form: "onboarding-bank-accounts",
children: "Add Bank Account",
}}
/>
</ProfileSetupFormContainer>
</Box>
</FormProvider>
</Stack>
);
};
const LoadingPlaidCard = () => {
return (
<Skeleton width="100%" sx={{ borderRadius: "12px", height: "200px" }} />
);
};
export default BankAccountSetup;
|