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 | 21x 82x 82x 82x 82x 82x 82x 82x 82x 82x 82x 64x 142x 21x 185x 82x | import { useState } from "react";
import { Box, Stack } from "@mui/material";
import GiveButton from "@shared/Button/GiveButton";
import { styled } from "@theme/v2/Provider";
import useTasksFooterActions from "../hooks/useTasksFooterActions";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import { TabNames } from "@features/Merchants/MerchantsTable/hooks/useTabs";
import { IParsedData } from "@components/Merchants/MerchantPreview/data.types";
import { ApprovalType } from "@features/Merchants/MerchantSidePanel/Provider/types";
import ButtonWithSpinner from "@shared/Button/ButtonWithSpinner";
import GiveCircularProgress from "@shared/GiveCircularProgress";
type Props = {
data: IParsedData;
tabName: keyof typeof TabNames;
staticApprovalType: ApprovalType;
};
const TasksFooter = ({ data, tabName, staticApprovalType }: Props) => {
const {
header: {
accountStatus: { statusDisplayName },
},
} = data;
const tabKey =
statusDisplayName === "ready for review" ? "sponsor" : statusDisplayName;
const tabFromData = TabNames[tabKey as keyof typeof TabNames];
const usedTab = tabFromData || tabName;
const { footerActions, menuOptions } = useTasksFooterActions({
data,
tabName: usedTab as keyof typeof TabNames,
staticApprovalType,
});
const { isMobileView } = useCustomThemeV2();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
// if we open underwriting panel from all tab, we use status from data instead
const actions = footerActions[usedTab];
const handleCloseMenu = () => {
setAnchorEl(null);
};
return (
<Footer isMobile={isMobileView}>
{!isMobileView ? (
<>
<Box display="flex" gap={2} flex={1}>
{actions?.left?.map((btn, idx) => (
<ButtonWithSpinner isLoading={btn.isLoading} key={idx}>
<GiveButton
variant="ghost"
onClick={btn.action}
label={btn.label}
size="large"
disabled={btn.disabled}
/>
</ButtonWithSpinner>
))}
</Box>
<Box display="flex" gap="12px" justifyContent="flex-end" flex={1}>
{actions?.right.map((btn, idx) => (
<GiveButton
key={idx}
onClick={btn.action}
color={btn.color ?? "primary"}
label={btn.label}
size="large"
variant={btn.variant ?? "filled"}
sx={{ whiteSpace: "nowrap" }}
disabled={btn.disabled}
loading={btn.isLoading}
/>
))}
</Box>
</>
) : (
<GiveButton
variant="filled"
size="large"
label="Options"
onClick={(e) => setAnchorEl(e.target as HTMLElement)}
sx={{ flex: 1 }}
/>
)}
<ContextualMenu
anchorEl={anchorEl}
color={isMobileView ? "secondary" : "tertiary"}
texture={isMobileView ? "solid" : "blurred"}
options={menuOptions}
handleClose={handleCloseMenu}
/>
</Footer>
);
};
const Footer = styled(Stack, {
shouldForwardProp: (prop) => prop !== "isMobile",
})<{ isMobile: boolean }>(({ isMobile, theme }) => ({
padding: "16px 33px",
gap: "20px",
height: "74px",
flexDirection: "row",
borderTop: "1px solid #E5E5E3",
position: "sticky",
bottom: 0,
marginTop: "auto",
...(isMobile && {
backgroundColor: theme.palette.surface?.secondary,
zIndex: 2,
}),
}));
export default TasksFooter;
|