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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | import NiceModal from "@ebay/nice-modal-react";
import { Box, Stack } from "@mui/material";
import { CREATE_PAYMENT_FORM_MODAL } from "modals/modal_names";
import {
CampaignMapperValues,
useCreateCampaignFn,
} from "../PaymentFormMinibuilder/useCreateCampaignFn";
import GiveSidePanel from "@shared/SidePanel/GiveSidePanel";
import GiveText from "@shared/Text/GiveText";
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import { SidePanelHeaderBase } from "@shared/SidePanel/components/SidePanelHeader/SidePanelHeader";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import {
CalendarBlankIcon,
PackageIcon,
SealCheckIcon,
TicketIcon,
XIcon,
} from "@phosphor-icons/react";
import { styled, useAppTheme } from "@theme/v2/Provider";
import DonationBox from "@assets/iconsV2/DonationBox";
import FileDollar from "@assets/iconsV2/FileDollar";
import useGenerateTypeList from "./hooks/useGenerateTypeListV2";
import { CampaignModal } from "./utils";
const PaymentFormSelectionPanel = () => {
const { open, onClose } = useNiceModal();
const { palette } = useAppTheme();
const { createCampaignFn } = useCreateCampaignFn();
const { typeList } = useGenerateTypeList();
const Icons = {
Products: <PackageIcon color={palette.icon?.["icon-primary"]} size={24} />,
Fundraiser: (
<DonationBox fill={palette.icon?.["icon-primary"] || ""} size={24} />
),
Event: (
<CalendarBlankIcon color={palette.icon?.["icon-primary"]} size={24} />
),
Invoice: (
<FileDollar fill={palette.icon?.["icon-primary"] || ""} size={24} />
),
Membership: (
<SealCheckIcon color={palette.icon?.["icon-primary"]} size={24} />
),
Sweepstakes: (
<TicketIcon color={palette.icon?.["icon-primary"]} size={24} />
),
};
const waitForClose = () => {
return new Promise<void>((resolve) => {
onClose();
setTimeout(() => {
resolve();
}, 300);
});
};
const fn = async (name: CampaignMapperValues) => {
await waitForClose();
if (CampaignModal[name])
return createCampaignFn<CampaignMapperValues>(CampaignModal[name], name);
else return NiceModal.show(CREATE_PAYMENT_FORM_MODAL);
};
return (
<GiveSidePanel onClose={onClose} open={open}>
<Box component="form" id="create-payment-form">
<SidePanelHeaderBase
leftItems={
<GiveText variant="bodyM" color="primary">
Create a Payment Form
</GiveText>
}
rightItems={
<GiveIconButton
Icon={XIcon}
variant="ghost"
onClick={onClose}
size="small"
/>
}
/>
<Stack padding="30px 20px 20px 20px">
<GiveText variant="h3" color="primary" fontWeight={300}>
Choose a Payment Form Type
</GiveText>
<Container>
{typeList.map((type, index) => {
return (
<Item direction="row" key={index} onClick={() => fn(type.key)}>
<IconContainer>{(Icons as any)[type.name]}</IconContainer>
<Stack direction="column" gap="4px">
<GiveText variant="bodyS">{type.name}</GiveText>
<GiveText variant="bodyS" color="secondary">
{type.description}
</GiveText>
</Stack>
</Item>
);
})}
</Container>
</Stack>
</Box>
</GiveSidePanel>
);
};
export default PaymentFormSelectionPanel;
const Container = styled(Stack)(({ theme }) => ({
backgroundColor: theme.palette.surface?.primary,
borderRadius: theme.customs?.radius.medium,
padding: "20px",
gap: "12px",
flex: 1,
marginTop: "16px",
maxHeight: "calc(100vh - 175px)",
overflow: "auto",
}));
const Item = styled(Stack)(({ theme }) => ({
width: "100%",
borderRadius: "12px",
border: `1px solid ${theme.palette.border?.primary}`,
padding: "16px",
gap: "20px",
cursor: "pointer",
"&:hover": {
backgroundColor: theme.palette.primitive?.transparent["darken-2"],
border: `1px solid ${theme.palette.border?.secondary}`,
},
}));
const IconContainer = styled(Box)(({ theme }) => ({
width: "48px",
height: "48px",
borderRadius: "40px",
backgroundColor: theme.palette.primitive?.transparent["darken-5"],
padding: "12px",
justifyContent: "center",
alignItems: "center",
}));
|