fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cart refactor code

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-05 22:35:22 +03:00
parent 9903387e87
commit 8df4477ac5
9 changed files with 402 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
src/components/CustomBottomSheet/EstimateTimeBottomSheet.tsx
View File

@@ -1,265 +0,0 @@
// import { useGlobals } from "../../hooks/useGlobals";
import { Button, Divider } from "antd";
import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import styles from "./CustomBottomSheet.module.css";
interface EstimateTimeBottomSheetProps {
isOpen: boolean;
onClose: () => void;
onSave: (date: Date, time: string) => void;
initialDate?: Date;
}
export function EstimateTimeBottomSheet({
isOpen,
onClose,
onSave,
initialDate = new Date(),
}: EstimateTimeBottomSheetProps) {
const { t } = useTranslation();
const isRTL = false; // Default to LTR
const [selectedDate, setSelectedDate] = useState(initialDate);
const [selectedTime, setSelectedTime] = useState("12:00");
const [isAM, setIsAM] = useState(true);
useEffect(() => {
setSelectedDate(initialDate);
}, [initialDate]);
const formatDate = (date: Date) => {
return date.toLocaleDateString("en-US", {
weekday: "long",
month: "short",
day: "numeric",
});
};
const goToPreviousDay = () => {
const newDate = new Date(selectedDate);
newDate.setDate(newDate.getDate() - 1);
setSelectedDate(newDate);
};
const goToNextDay = () => {
const newDate = new Date(selectedDate);
newDate.setDate(newDate.getDate() + 1);
setSelectedDate(newDate);
};
const handleTimeSelect = (time: string) => {
setSelectedTime(time);
};
const handleSave = () => {
const [hours, minutes] = selectedTime.split(":");
const date = new Date(selectedDate);
date.setHours(
isAM ? parseInt(hours) : parseInt(hours) + 12,
parseInt(minutes),
0,
0
);
onSave(date, `${selectedTime} ${isAM ? "AM" : "PM"}`);
onClose();
};
const timeSlots = [
"12:00",
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"9:00",
"10:00",
"11:00",
];
return (
<ProBottomSheet
isOpen={isOpen}
onClose={onClose}
title="Select Estimate Time"
showCloseButton={true}
initialSnap={1}
height={"50vh"}
snapPoints={["50vh", "60vh"]}
>
<div style={{ padding: "0 20px" }}>
{/* Day Selection */}
<div style={{ marginBottom: 30 }}>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 20,
}}
>
<Button
type="text"
icon={
isRTL ? (
<NextIcon className={styles.nextIcon} />
) : (
<BackIcon className={styles.backIcon} />
)
}
onClick={goToPreviousDay}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
/>
<div
style={{
flex: 1,
textAlign: "center",
padding: "0 20px",
}}
>
<div
style={{
fontSize: 20,
fontWeight: 600,
color: "rgba(95, 108, 123, 1)",
marginBottom: 4,
}}
>
{formatDate(selectedDate)}
</div>
</div>
<Button
type="text"
icon={
isRTL ? (
<BackIcon className={styles.backIcon} />
) : (
<NextIcon className={styles.nextIcon} />
)
}
onClick={goToNextDay}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
/>
</div>
</div>
{/* Time Selection */}
<div>
{/* AM/PM Toggle */}
<div
style={{
display: "flex",
justifyContent: "end",
marginBottom: 20,
gap: 10,
}}
>
<Button
type={isAM ? "primary" : "default"}
onClick={() => setIsAM(true)}
style={{
height: 32,
borderRadius: 888,
fontWeight: 600,
backgroundColor: isAM
? "rgba(255, 183, 0, 0.12)"
: "transparent",
color: isAM ? "rgba(204, 147, 0, 1)" : "rgba(95, 108, 123, 1)",
border: "none",
}}
>
AM
</Button>
<Button
type={!isAM ? "primary" : "default"}
onClick={() => setIsAM(false)}
style={{
height: 32,
borderRadius: 888,
fontWeight: 600,
backgroundColor: !isAM
? "rgba(255, 183, 0, 0.12)"
: "rgba(95, 108, 123, 0.05)",
color: !isAM ? "rgba(204, 147, 0, 1)" : "rgba(95, 108, 123, 1)",
border: "none",
}}
>
PM
</Button>
</div>
{/* Time Slots Grid */}
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gap: 12,
marginBottom: 30,
}}
>
{timeSlots.map((time) => (
<Button
key={time}
type={selectedTime === time ? "primary" : "default"}
onClick={() => handleTimeSelect(time)}
style={{
height: 32,
width: 70,
borderRadius: 888,
fontWeight: 600,
fontSize: 16,
border: "none",
backgroundColor:
selectedTime === time
? "rgba(255, 183, 0, 0.12)"
: "rgba(95, 108, 123, 0.05)",
color:
selectedTime === time
? "rgba(204, 147, 0, 1)"
: "rgba(95, 108, 123, 1)",
}}
>
{time}
</Button>
))}
</div>
<Divider />
{/* Save Button */}
<Button
type="primary"
onClick={handleSave}
style={{
width: "100%",
height: 50,
borderRadius: 12,
fontSize: 16,
fontWeight: 600,
backgroundColor: "var(--primary)",
border: "none",
}}
>
{t("cart.confirmTime")}
</Button>
</div>
</div>
</ProBottomSheet>
);
}