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 | 6x 6x 6x 22x 22x 1x 8x | import { Box, Skeleton, Stack } from "@mui/material";
import { JoinedProps } from "../agreements.types";
import MerchantInfo from "./components/merchantApplication/MerchantInfo";
import BusinessProfile from "./components/merchantApplication/BusinessProfile";
import BankAccount from "./components/merchantApplication/BankAccount";
import PrimaryAccountHolder from "./components/merchantApplication/PrimaryAccountHolder";
import BusinessOwner from "./components/merchantApplication/BusinessOwner";
import TractionFees from "./components/FreeSchedule/TractionFees";
import GiveText from "@shared/Text/GiveText";
import { useMerchantSidePanelContext } from "../../Provider/MerchantSidePanelProvider";
import MonthlyAccountFees from "./components/FreeSchedule/MonthlyAccountFees";
import GatewayFees from "./components/FreeSchedule/GatewayFees";
import ChargeBackFees from "./components/FreeSchedule/ChargeBackFees";
import MiscellaneousFees from "./components/FreeSchedule/MiscellaneousFees";
import { skeletonDefaultProps } from "../../constants";
import TransferFees from "./components/FreeSchedule/TransferFees";
import useAgreementSnapshot from "@components/Merchants/MerchantPreview/MerchantAgreement/AgreementSnapshot/hooks/useAgreementSnapshot";
function SnapshotPanel({ page: { tab } }: JoinedProps) {
const { data, id, isLoading } = useMerchantSidePanelContext();
const { data: snapshot } = useAgreementSnapshot({
merchantId: id,
enabled: !!id,
});
return (
<Box px="16px" pb="20px">
{isLoading ? (
<LoadingSkeletons />
) : (
<>
{tab === "merchantApplication" && (
<Box data-testid="merchant-application-section">
<MerchantInfo />
<BankAccount />
<PrimaryAccountHolder />
<BusinessProfile />
<BusinessOwner />
</Box>
)}
{tab === "fees" && (
<Box data-testid="fees-schedule-section">
<TractionFees />
<TransferFees />
<MonthlyAccountFees />
<GatewayFees />
<ChargeBackFees />
<MiscellaneousFees />
</Box>
)}
{tab === "refund" && (
<GiveText mt="10px" variant="bodyS" color="primary">
{snapshot?.merchantAgreement?.msaRefundPolicy ||
data?.merchantAgreement?.msaRefundPolicy ||
"30 days of purchase"}
</GiveText>
)}{" "}
</>
)}
</Box>
);
}
export default SnapshotPanel;
const skeletonsConfig = [
{ height: "22px", width: "45%" },
{ height: "368px", 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%" },
];
const LoadingSkeletons = () => (
<Stack gap={2} flex={1} data-testid="snapshot-skeletons">
{skeletonsConfig.map((config, index) => (
<Skeleton key={index} {...config} {...skeletonDefaultProps} />
))}
</Stack>
);
|