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

refactor special request & time estimate components

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-11 10:55:19 +03:00
parent cef2804ee6
commit 3ea54c0b3d
9 changed files with 69 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ProBottomSheet/ProBottomSheet.tsx
View File

@@ -63,7 +63,7 @@ export function ProBottomSheet({
const deltaY = clientY - startPosRef.current; const deltaY = clientY - startPosRef.current;
sheetRef.current.style.transform = `translateY(${Math.max(0, deltaY)}px)`; sheetRef.current.style.transform = `translateY(${Math.max(0, deltaY)}px)`;
}, },
[isDragging] [isDragging],
); );
const endDrag = useCallback( const endDrag = useCallback(
@@ -91,7 +91,7 @@ export function ProBottomSheet({
sheetRef.current.style.transform = "translateY(0)"; sheetRef.current.style.transform = "translateY(0)";
} }
}, },
[isDragging, currentSnap, snapPoints.length, onClose] [isDragging, currentSnap, snapPoints.length, onClose],
); );
// Touch event handlers // Touch event handlers
@@ -99,21 +99,21 @@ export function ProBottomSheet({
(e: React.TouchEvent) => { (e: React.TouchEvent) => {
startDrag(e.touches[0].clientY); startDrag(e.touches[0].clientY);
}, },
[startDrag] [startDrag],
); );
const handleTouchMove = useCallback( const handleTouchMove = useCallback(
(e: React.TouchEvent) => { (e: React.TouchEvent) => {
handleDrag(e.touches[0].clientY); handleDrag(e.touches[0].clientY);
}, },
[handleDrag] [handleDrag],
); );
const handleTouchEnd = useCallback( const handleTouchEnd = useCallback(
(e: React.TouchEvent) => { (e: React.TouchEvent) => {
endDrag(e.changedTouches[0].clientY); endDrag(e.changedTouches[0].clientY);
}, },
[endDrag] [endDrag],
); );
// Mouse event handlers // Mouse event handlers
@@ -121,21 +121,21 @@ export function ProBottomSheet({
(e: React.MouseEvent) => { (e: React.MouseEvent) => {
startDrag(e.clientY); startDrag(e.clientY);
}, },
[startDrag] [startDrag],
); );
const handleMouseMove = useCallback( const handleMouseMove = useCallback(
(e: MouseEvent) => { (e: MouseEvent) => {
handleDrag(e.clientY); handleDrag(e.clientY);
}, },
[handleDrag] [handleDrag],
); );
const handleMouseUp = useCallback( const handleMouseUp = useCallback(
(e: MouseEvent) => { (e: MouseEvent) => {
endDrag(e.clientY); endDrag(e.clientY);
}, },
[endDrag] [endDrag],
); );
// Mouse event listeners // Mouse event listeners
@@ -212,8 +212,6 @@ export function ProBottomSheet({
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
minHeight: 60, minHeight: 60,
backgroundColor:
themeName === "dark" ? "rgba(42, 42, 42, 0.8)" : "transparent",
backdropFilter: themeName === "dark" ? "blur(8px)" : "none", backdropFilter: themeName === "dark" ? "blur(8px)" : "none",
}; };

25
src/pages/cart/components/specialRequest/Dialog.tsx
View File

@@ -41,13 +41,6 @@ export function Dialog({
open={isOpen} open={isOpen}
onCancel={handleCancel} onCancel={handleCancel}
footer={[ footer={[
<Button
key="cancel"
onClick={handleCancel}
className={styles.actionButton}
>
{t("cart.cancel")}
</Button>,
<Button <Button
key="save" key="save"
type="primary" type="primary"
@@ -61,16 +54,14 @@ export function Dialog({
destroyOnHidden destroyOnHidden
> >
<div className="space-y-4"> <div className="space-y-4">
<div> <TextArea
<TextArea value={value}
value={value} onChange={(e) => setValue(e.target.value)}
onChange={(e) => setValue(e.target.value)} placeholder={t("cart.specialRequest")}
placeholder={t("cart.specialRequest")} rows={6}
rows={6} autoFocus={false}
autoFocus={false} className={styles.textArea}
className={styles.textArea} />
/>
</div>
</div> </div>
</Modal> </Modal>
); );

12
src/pages/cart/components/specialRequest/SpecialRequestCard.module.css
View File

@@ -3,14 +3,16 @@
} }
.editButton { .editButton {
color: var(--primary, #FFB700); color: var(--primary, #ffb700);
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.textArea{ .textArea {
border-radius: 24px; border-radius: 24px;
margin: 40px 0;
} }
.actionButton{ .actionButton {
border-radius: 24px; border-radius: 24px;
width: 100px; width: 100% !important;
} height: 48px !important;
}

6
src/pages/cart/components/timeEstimate/BottomSheet.tsx
View File

@@ -1,6 +1,6 @@
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx"; import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import Content from "pages/cart/components/timeEstimate/Content.tsx"; import Content from "pages/cart/components/timeEstimate/Content.tsx";
import { useTranslation } from "react-i18next";
interface EstimateTimeBottomSheetProps { interface EstimateTimeBottomSheetProps {
isOpen: boolean; isOpen: boolean;
@@ -24,8 +24,8 @@ export function BottomSheet({
title={t("cart.selectTimeEstimate")} title={t("cart.selectTimeEstimate")}
showCloseButton={true} showCloseButton={true}
initialSnap={1} initialSnap={1}
height={"50vh"} height={"510px"}
snapPoints={["50vh", "60vh"]} snapPoints={["65vh"]}
> >
<Content onSave={onSave} initialDate={initialDate} onClose={onClose} /> <Content onSave={onSave} initialDate={initialDate} onClose={onClose} />
</ProBottomSheet> </ProBottomSheet>

55
src/pages/cart/components/timeEstimate/Content.tsx
View File

@@ -1,9 +1,10 @@
import { Button, Divider } from "antd"; import { Button, Divider } from "antd";
import NextIcon from "components/Icons/NextIcon.tsx";
import styles from "components/CustomBottomSheet/CustomBottomSheet.module.css";
import BackIcon from "components/Icons/BackIcon.tsx"; import BackIcon from "components/Icons/BackIcon.tsx";
import { useState, useEffect } from "react"; import NextIcon from "components/Icons/NextIcon.tsx";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "./TimeEstimateCard.module.css";
const timeSlots = [ const timeSlots = [
"12:00", "12:00",
@@ -31,10 +32,10 @@ export default function Content({
onClose, onClose,
}: EstimateTimeContentProps) { }: EstimateTimeContentProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const isRTL = false; // Default to LTR
const [selectedDate, setSelectedDate] = useState(initialDate); const [selectedDate, setSelectedDate] = useState(initialDate);
const [selectedTime, setSelectedTime] = useState("12:00"); const [selectedTime, setSelectedTime] = useState("12:00");
const [isAM, setIsAM] = useState(true); const [isAM, setIsAM] = useState(true);
const { isRTL } = useAppSelector((state) => state.locale);
useEffect(() => { useEffect(() => {
setSelectedDate(initialDate); setSelectedDate(initialDate);
@@ -79,7 +80,7 @@ export default function Content({
}; };
return ( return (
<div style={{ padding: "0 20px" }}> <div style={{ padding: "0 20px", marginTop: 30 }}>
{/* Day Selection */} {/* Day Selection */}
<div style={{ marginBottom: 30 }}> <div style={{ marginBottom: 30 }}>
<div <div
@@ -157,32 +158,14 @@ export default function Content({
}} }}
> >
<Button <Button
type={isAM ? "primary" : "default"}
onClick={() => setIsAM(true)} onClick={() => setIsAM(true)}
style={{ className={styles.toggleButton + " " + (isAM ? styles.active : "")}
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 AM
</Button> </Button>
<Button <Button
type={!isAM ? "primary" : "default"}
onClick={() => setIsAM(false)} onClick={() => setIsAM(false)}
style={{ className={styles.toggleButton + " " + (!isAM ? styles.active : "")}
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 PM
</Button> </Button>
@@ -200,24 +183,12 @@ export default function Content({
{timeSlots.map((time) => ( {timeSlots.map((time) => (
<Button <Button
key={time} key={time}
type={selectedTime === time ? "primary" : "default"}
onClick={() => handleTimeSelect(time)} onClick={() => handleTimeSelect(time)}
style={{ className={
height: 32, styles.timeButton +
width: 70, " " +
borderRadius: 888, (selectedTime === time ? styles.active : "")
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} {time}
</Button> </Button>

8
src/pages/cart/components/timeEstimate/Dialog.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Modal } from "antd"; import { Modal } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Content from "pages/cart/components/timeEstimate/Content.tsx"; import Content from "pages/cart/components/timeEstimate/Content.tsx";
@@ -23,11 +23,7 @@ export function Dialog({
title={t("cart.selectTimeEstimate")} title={t("cart.selectTimeEstimate")}
open={isOpen} open={isOpen}
onCancel={onClose} onCancel={onClose}
footer={[ footer={[]}
<Button key="cancel" onClick={onClose}>
{t("cart.cancel")}
</Button>,
]}
width={500} width={500}
destroyOnHidden destroyOnHidden
> >

27
src/pages/cart/components/timeEstimate/TimeEstimateCard.module.css Normal file
View File

@@ -0,0 +1,27 @@
.timeButton {
height: 32px !important;
width: 100% !important;
border-radius: 888px !important;
font-weight: 600 !important;
font-size: 16 !important;
border: none;
background-color: rgba(95, 108, 123, 0.05);
color: rgba(95, 108, 123, 1);
box-shadow: none;
}
.toggleButton {
height: 32px !important;
border-radius: 888px !important;
font-weight: 600 !important;
font-size: 16 !important;
border: none;
background-color: rgba(95, 108, 123, 0.05);
color: rgba(95, 108, 123, 1);
box-shadow: none;
}
.active {
background-color: rgba(255, 183, 0, 0.12) !important;
color: rgba(204, 147, 0, 1) !important;
}

2
src/pages/checkout/components/BriefMenu.tsx
View File

@@ -11,8 +11,6 @@ import styles from "../../address/address.module.css";
export default function BriefMenu() { export default function BriefMenu() {
const { tables, items } = useAppSelector(selectCart); const { tables, items } = useAppSelector(selectCart);
const { t } = useTranslation(); const { t } = useTranslation();
const { isRTL } = useAppSelector((state) => state.locale);
const orderType = useMemo(() => localStorage.getItem("orderType"), []); const orderType = useMemo(() => localStorage.getItem("orderType"), []);
const menuItems = useMemo( const menuItems = useMemo(

2
src/pages/split-bill/page.tsx
View File

@@ -128,7 +128,7 @@ export default function SplitBillPage() {
backgroundColor: themeName === "light" ? "white" : ProBlack2, backgroundColor: themeName === "light" ? "white" : ProBlack2,
}} }}
> >
<Link to={`${id}/order`} style={{ width: "100%" }}> <Link to={`/${id}/order`} style={{ width: "100%" }}>
<Button <Button
type="primary" type="primary"
shape="round" shape="round"