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 | 22x 22x 22x 12x 12x 12x 12x 12x 12x 12x 12x 12x 1x | import { useState } from "react";
import { Stack } from "@mui/material";
import { ArrowLeftIcon, CertificateIcon, XIcon } from "@phosphor-icons/react";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { SidePanelHeaderBase } from "@shared/SidePanel/components/SidePanelHeader/SidePanelHeader";
import GiveText from "@shared/Text/GiveText";
import {
SidePanelBodyWrapper,
SidePanelContainerWrapper,
} from "@shared/SidePanel/SidePanelAtoms";
import AgreementPanel from "./Agreement/AgreementPanel";
import SnapshotPanel from "./Snapshot/Snapshot";
import { JoinedProps, StateType, tabs, MainPages } from "./agreements.types";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import GiveLink from "@shared/Link/GiveLink";
import { useAppTheme } from "@theme/v2/Provider";
interface Props {
handleClose: () => void;
}
const sections = (props: JoinedProps) => ({
Agreement: <AgreementPanel {...props} />,
Snapshot: <SnapshotPanel {...props} />,
});
const defaultValues: StateType = {
mainPage: "Agreement" as MainPages,
tab: "merchantApplication" as tabs,
};
const AgreementAndSnapshot = ({ handleClose }: Props) => {
const [page, setPage] = useState<StateType>(defaultValues);
const { mainPage, tab } = page;
const { isMobileView } = useCustomThemeV2();
const { palette } = useAppTheme();
const resetPage = () => setPage(defaultValues);
const props = { setPage, page };
const isNextPage = mainPage !== "Agreement";
const tabsData = [
{
label: "Merchant Application",
onClick: () =>
setPage((prev) => ({ ...prev, tab: "merchantApplication" })),
isActive: tab === "merchantApplication",
},
{
label: "Fees Schedule",
onClick: () => setPage((prev) => ({ ...prev, tab: "fees" })),
isActive: tab === "fees",
},
{
label: "Refund Policy",
onClick: () => setPage((prev) => ({ ...prev, tab: "refund" })),
isActive: tab === "refund",
},
];
return (
<SidePanelContainerWrapper>
<SidePanelHeaderBase
leftItems={
<Stack gap="8px" alignItems="center" flexDirection="row">
{isNextPage && (
<GiveIconButton
variant="ghost"
Icon={ArrowLeftIcon}
size="small"
onClick={() => resetPage()}
/>
)}
{!isMobileView || (isMobileView && !isNextPage) ? (
<GiveLink
component="button"
color={isNextPage ? "secondary" : "inherit"}
disabled={!isNextPage}
onClick={resetPage}
Icon={CertificateIcon}
iconSize="22px"
sx={{
color: isNextPage
? `${palette.text.secondary} !important`
: `${palette.text.primary} !important`,
"&:hover": {
color: `${palette.text.primary} !important`,
},
}}
>
Merchant Agreement
</GiveLink>
) : (
<></>
)}
{isNextPage && !isMobileView && <GiveText>/</GiveText>}
{isNextPage && (
<GiveText variant="bodyS" color="primary">
Snapshot
</GiveText>
)}
</Stack>
}
rightItems={
<GiveIconButton
Icon={XIcon}
variant="ghost"
onClick={isNextPage ? resetPage : handleClose}
/>
}
{...(isNextPage && { tabsData })}
showGradientTabs
/>
<SidePanelBodyWrapper>{sections(props)[mainPage]}</SidePanelBodyWrapper>
</SidePanelContainerWrapper>
);
};
export default AgreementAndSnapshot;
|