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 121 122 | import * as React from "react";
import { palette } from "@palette";
// nice-modal
import NiceModal, { muiDialogV5, useModal } from "@ebay/nice-modal-react";
// mui
import {
Box,
Stack,
useTheme,
useMediaQuery,
DialogActions,
} from "@mui/material";
// components
import { Text } from "@common/Text";
import { Button } from "@common/Button";
import { BaseModal } from "@common/Modal";
// assets
import { CloseIcon } from "@assets/icons";
// localization
import { useTranslation } from "react-i18next";
import { namespaces } from "localization/resources/i18n.constants";
type IProps = {
title: string;
removeAction: () => void;
children?: React.ReactNode;
};
const RemoveWatchlist = NiceModal.create(
({ title, children, removeAction }: IProps) => {
const modal = useModal();
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
const { t } = useTranslation(namespaces.common);
const handleClose = () => modal.hide();
const handleRemoveWatchlist = () => {
removeAction();
handleClose();
};
return (
<BaseModal
{...muiDialogV5(modal)}
sx={{
"& .MuiDialog-paper": {
width: 563,
maxWidth: "none",
"@media (max-width: 600px)": {
top: "50px",
height: "auto",
borderRadius: "8px",
maxHeight: "none",
},
},
}}
>
<Stack
gap={1}
p="24px 16px"
bgcolor="#FFFFFF"
position="relative"
textAlign={isDesktop ? "left" : "center"}
>
<Box
onClick={handleClose}
sx={{
top: 8,
right: 10,
cursor: "pointer",
position: "absolute",
}}
>
<CloseIcon />
</Box>
{children ? (
<>{children}</>
) : (
<>
<Text variant="h5" fontWeight="semibold">
{/* {t("remove_from_watchlist", { ns: namespaces.common })} */}
Remove from Watchlist
</Text>
<Text variant="headline" color={palette.neutral[600]}>
{/* {t("delete.are_you_sure_remove", {
ns: namespaces.common,
})}{" "} */}
Are you sure that you want to remove “{title}” from the
watchlist?
</Text>
</>
)}
</Stack>
<DialogActions>
<Button
size="medium"
background="tertiary"
fullWidth={!isDesktop}
onClick={handleClose}
>
{t("delete.cancel", { ns: namespaces.common })}
</Button>
<Button
background="primary"
size="medium"
fullWidth={!isDesktop}
onClick={handleRemoveWatchlist}
>
{/* {t("remove", { ns: namespaces.common })} */}
Remove
</Button>
</DialogActions>
</BaseModal>
);
},
);
export default RemoveWatchlist;
|