57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
"use client";
|
|
import { Box, Button, Container } from "@mui/material";
|
|
import Grid from "@mui/material/Grid2";
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useCallback, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Title from "@atoms/Title";
|
|
|
|
const PreCheckout: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
|
|
const handleStartCheckout = useCallback(() => {
|
|
router.push("/selfcheckout/verifyAffiliation");
|
|
}, [router]);
|
|
|
|
useEffect(() => {
|
|
const handleKeyPress = () => {
|
|
handleStartCheckout();
|
|
};
|
|
|
|
document.addEventListener("keydown", handleKeyPress);
|
|
|
|
// Cleanup the event listener
|
|
return () => {
|
|
document.removeEventListener("keydown", handleKeyPress);
|
|
};
|
|
}, [handleStartCheckout]);
|
|
|
|
return (
|
|
<Container maxWidth="md" sx={{ textAlign: "center", marginTop: "20vh" }}>
|
|
<Box sx={{ backgroundColor: "#f1f1f1", padding: "80px", borderRadius: "10px", boxShadow: 6 }}>
|
|
<Grid size={{ xs: 4, md: 6 }}>
|
|
<Title text={t("msj_this_box_is")} size="h3" />
|
|
</Grid>
|
|
<Grid size={{ xs: 4, md: 6 }}>
|
|
<Title text={t("lb_open")} size="h1" />
|
|
</Grid>
|
|
<Grid size={{ xs: 4, md: 6 }}>
|
|
<Title text={t("msj_press_any_key_button_start")} size="h5" />
|
|
</Grid>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
size="large"
|
|
sx={{ marginTop: "40px" }}
|
|
onClick={handleStartCheckout}
|
|
>
|
|
{t("lbl_start")}
|
|
</Button>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default PreCheckout;
|