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 | 21x 159x 159x 159x | import { Box, SxProps } from "@mui/material";
import { ComponentPropsWithoutRef, ReactNode } from "react";
import useMerchantSidePanel from "../hooks/useMerchantSidePanel";
import { useMerchantSidePanelContext } from "../Provider/MerchantSidePanelProvider";
type TMerchantSidePanelData = ReturnType<typeof useMerchantSidePanel>["data"];
export type TMerchantDataFields = {
riskProfile: TMerchantSidePanelData["riskProfile"];
statusName: TMerchantSidePanelData["status"]["statusName"];
merchantId: TMerchantSidePanelData["merchantInfo"]["merchantID"];
status: TMerchantSidePanelData["status"];
handleManageRiskProfile: () => void;
id: number;
};
type ContainerProps<T> = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
children: (data: T) => ReactNode | ReactNode[];
sx?: SxProps;
};
// This component will do the heavy lifting
const GiveMerchantSectionsContainer = <T extends TMerchantDataFields>({
children,
sx,
...divProps
}: ContainerProps<T>) => {
const { data, id } = useMerchantSidePanelContext();
const riskSummary = {
riskProfile: data?.riskProfile,
statusName: data?.status?.statusName,
merchantId: data?.merchantInfo?.merchantID,
status: data?.status,
handleManageRiskProfile: () => void 0,
} as T;
return (
<Box {...divProps} component="form" sx={{ ...sx }}>
{children({ ...riskSummary, id })}
</Box>
);
};
export default GiveMerchantSectionsContainer;
|