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 | import React from "react";
// nice-modal
import NiceModal, { muiDialogV5, useModal } from "@ebay/nice-modal-react";
// mui
import {
DialogContent,
DialogActions,
Box,
Stack,
useMediaQuery,
useTheme,
} from "@mui/material";
// components
import { BaseModal, ModalTitle } from "@common/Modal";
// assets
import Payment from "./Payment/Payment";
import { Button } from "@common/Button";
import { Text } from "@common/Text";
import ErrorCatcher from "@common/Error/ErrorCatcher";
import Icon from "@assets/icons/RebrandedIcons/LogoBlueAccent";
const CheckoutModal = NiceModal.create(
({
destinationAccountMerchantName,
}: {
destinationAccountMerchantName?: string;
}) => {
const modal = useModal();
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
const [isDisabled, setIsDisabled] = React.useState<boolean>(true);
return (
<BaseModal
width="720px"
{...muiDialogV5(modal)}
sx={{
"& .MuiDialogActions-root": {
"@media (max-width: 600px)": {
flexDirection: "column",
},
},
}}
>
<ModalTitle
title="Checkout"
onClose={() => modal.hide()}
backgroundColor="transparent"
/>
<DialogContent>
<ErrorCatcher errorID="Payment">
<Payment
setIsDisabled={setIsDisabled}
destinationAccountMerchantName={destinationAccountMerchantName}
/>
</ErrorCatcher>
</DialogContent>
<DialogActions
sx={{
background: "white",
padding: 0,
}}
>
<Box
sx={actionsContainerStyle}
height={isDesktop ? "64px" : "auto"}
px="16px"
>
<Stack direction="row" alignItems="center" justifyContent="center">
<Text color="#8F8F8F">Powered by</Text>
<Icon width={210} />
</Stack>
<Stack
direction={isDesktop ? "row" : "column"}
gap={1}
alignItems="center"
width={isDesktop ? "auto" : "100%"}
>
<Button
fullWidth={!isDesktop}
onClick={() => modal.hide()}
size="medium"
background="secondary"
>
Cancel
</Button>
<Button
fullWidth={!isDesktop}
type="submit"
size="medium"
background="primary"
form="credit-card-payment"
disabled={isDisabled}
>
Pay now
</Button>
</Stack>
</Box>
</DialogActions>
</BaseModal>
);
},
);
const actionsContainerStyle = {
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
"@media (max-width: 900px)": {
flexDirection: "column-reverse",
gap: "16px",
},
};
export default CheckoutModal;
|