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 | 16x 16x 16x 3x 3x 16x 2x 1x 16x 32x 32x | import {
organizationType,
useFormData,
} from "@components/Signup/Forms/SignupFormProvider";
import { Stack } from "@mui/material";
import { BriefcaseIcon, HandCoinsIcon } from "@phosphor-icons/react";
import { StepCard } from "./StepCard";
import SignupNavigation from "./SignupNavigation";
import { useState } from "react";
import ScrollableContent from "./ScrollableContent";
function GiveBusinessType({ setIsStart }: { setIsStart: () => void }) {
const { setFormValues } = useFormData();
const [selectedType, setSelectedType] = useState<
organizationType | undefined
>(undefined);
const onClick = () => {
setIsStart();
setFormValues("organizationType", selectedType);
};
const cardData = [
{
title: "I manage a merchant portfolio",
Icon: BriefcaseIcon,
value: "manage_submerchants",
onClick: () => setSelectedType("manage_submerchants"),
},
{
title: "I accept payments or donations",
Icon: HandCoinsIcon,
value: "accept_payments",
onClick: () => setSelectedType("accept_payments"),
},
];
return (
<Stack width="100%" component="form" onSubmit={onClick}>
<ScrollableContent>
{cardData.map((data) => {
const isSelected = selectedType === data?.value;
return (
<StepCard {...data} key={data?.title} isSelected={isSelected} />
);
})}
</ScrollableContent>
<SignupNavigation disabled={!selectedType} hideBackBtn />
</Stack>
);
}
export default GiveBusinessType;
|