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 | 21x 21x 21x | import { Skeleton, Stack } from "@mui/material";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { SidePanelHeaderBase } from "@shared/SidePanel/components/SidePanelHeader/SidePanelHeader";
import {
SidePanelBodyWrapper,
SidePanelContainerWrapper,
} from "@shared/SidePanel/SidePanelAtoms";
import GiveText from "@shared/Text/GiveText";
import { useGetAgreementData } from "../Agreement/useGetAgreementData";
import AgreementStatusWrapper from "../Agreement/wraper/AgreementStatusWrapper";
import GiveProviderAgreementContent from "@components/Merchants/MerchantPreview/MerchantAgreement/GiveProviderAgreementContent";
import { XIcon, CertificateIcon } from "@phosphor-icons/react";
import { skeletonDefaultProps } from "@features/Merchants/MerchantSidePanel/constants";
import { useMerchantSidePanelContext } from "@features/Merchants/MerchantSidePanel/Provider/MerchantSidePanelProvider";
import { useRef, useState, useEffect } from "react";
//AGREEMENT USED IN PROVIDER SIDEPANEL
const GiveProviderAgreementPanel = ({
handleClose,
}: {
handleClose: () => void;
}) => {
const { data, isLoading } = useMerchantSidePanelContext();
const statusInfo = useGetAgreementData(data?.merchantAgreement);
const [agreementInView, setAgreementInView] = useState<boolean>(false);
const signatureSectionRef = useRef<HTMLDivElement>(null);
const sidePanelBodyRef = useRef<HTMLDivElement>(null);
// Auto-scroll to signature section when user reaches bottom of agreement
useEffect(() => {
if (agreementInView && signatureSectionRef.current && sidePanelBodyRef.current) {
setTimeout(() => {
const bodyElement = sidePanelBodyRef.current;
const signatureElement = signatureSectionRef.current;
if (
bodyElement &&
signatureElement &&
typeof bodyElement.scrollTo === "function"
) {
// Calculate the position relative to the scrollable parent
const relativeTop = signatureElement.offsetTop - bodyElement.offsetTop;
bodyElement.scrollTo({
top: relativeTop,
behavior: "smooth",
});
}
}, 100);
}
}, [agreementInView]);
return (
<SidePanelContainerWrapper>
<SidePanelHeaderBase
leftItems={
<Stack gap="8px" alignItems="center" flexDirection="row">
<CertificateIcon size={22} />
<GiveText variant="bodyS" color="primary">
Provider Agreement
</GiveText>
</Stack>
}
rightItems={
<GiveIconButton Icon={XIcon} variant="ghost" onClick={handleClose} />
}
sx={{
position: "sticky",
top: 0,
zIndex: 10,
}}
/>
<SidePanelBodyWrapper ref={sidePanelBodyRef}>
{isLoading ? (
<LoadingSkeletons />
) : (
<AgreementStatusWrapper>
<GiveProviderAgreementContent
data={data}
isSidepanel
onAgreementInViewChange={setAgreementInView}
signatureSectionRef={signatureSectionRef}
/>
</AgreementStatusWrapper>
)}
</SidePanelBodyWrapper>
</SidePanelContainerWrapper>
);
};
export default GiveProviderAgreementPanel;
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}>
{skeletonsConfig.map((config, index) => (
<Skeleton key={index} {...config} {...skeletonDefaultProps} />
))}
</Stack>
);
|