"use client";
import { Box, styled } from "@mui/material";
import ThankYouRequest from "@/_components/thankyourequest";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
const FOOTER_HEIGHT = 60; // Constant for the footer height
const HEADER_HEIGHT = 80; // Adjust this value to control the header height
const SectionContainer = styled(Box)({
position: "relative",
height: `calc(100vh - ${HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px)`,
display: "flex",
justifyContent: "center",
alignItems: "center",
overflow: "hidden",
});
const useBackButtonDetector = (onBack) => {
useEffect(() => {
const handleBackButton = (event) => {
event.preventDefault();
onBack(); // Callback function when back button is detected
};
window.history.pushState(null, null, window.location.pathname);
window.addEventListener("popstate", handleBackButton);
return () => window.removeEventListener("popstate", handleBackButton);
}, [onBack]);
};
export default function ThankYouPage({
params,
}: {
params: { businessName: string; requestID: string };
}) {
const router = useRouter();
const handleBack = () => {
console.log("Back button pressed");
router.push(`/client/${params.businessName}/book`); // Redirect to the business page
// Your custom logic here
};
useBackButtonDetector(handleBack);
return (
<>
<SectionContainer>
<ThankYouRequest booking_request_id={params.requestID} />
</SectionContainer>
</>
);
}
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)