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 | 26x 1x 1x 1x 1x 26x 26x 5x 40x | import { useMerchantSidePanelContext } from "../../Provider/MerchantSidePanelProvider";
import AgreementStatusWrapper from "./wraper/AgreementStatusWrapper";
import { JoinedProps } from "../agreements.types";
import { Skeleton, Stack } from "@mui/material";
import { skeletonDefaultProps } from "../../constants";
import GiveMerchantAgreementContent from "@components/Merchants/MerchantPreview/MerchantAgreement/GiveMerchantAgreementContent";
//AGREEMENT USED IN MERCHANT SIDE PANEL
const AgreementPanel = ({ setPage }: JoinedProps) => {
const { data, isLoading } = useMerchantSidePanelContext();
const openSnapShot = () => {
setPage({
mainPage: "Snapshot",
tab: "merchantApplication",
});
};
const isApproved = data?.status?.sponsorStatusName === "approved";
return (
<>
{isLoading ? (
<LoadingSkeletons />
) : (
<AgreementStatusWrapper>
<GiveMerchantAgreementContent
data={data}
isSidepanel
openSnapShot={isApproved ? openSnapShot : undefined}
/>
</AgreementStatusWrapper>
)}
</>
);
};
export default AgreementPanel;
const skeletonsConfig = [
{ height: "46px", width: "100%" },
{ height: "72px", width: "100%" },
{ height: "22px", width: "40%" },
{ height: "144px", width: "100%" },
{ height: "22px", width: "40%" },
{ height: "226px", width: "100%" },
{ height: "22px", width: "50%" },
{ height: "226px", width: "100%" },
];
export const LoadingSkeletons = () => (
<Stack p="20px" gap={2} flex={1} data-testid="agreement-skeletons">
{skeletonsConfig.map((config, index) => (
<Skeleton key={index} {...config} {...skeletonDefaultProps} />
))}
</Stack>
);
|