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

order details sheet: work on components

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-01 21:49:55 +03:00
parent eb60b9a0ef
commit 0a9e49838d
7 changed files with 139 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/CustomBottomSheet/OrderDetailsBottomSheet.tsx
View File

@@ -1,138 +0,0 @@
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import { useAppSelector } from "redux/hooks";
import ProText from "components/ProText";
import { OrderType } from "pages/checkout/hooks/types";
interface OrderDetailsBottomSheetProps {
isOpen: boolean;
onClose: () => void;
}
export function OrderDetailsBottomSheet({
isOpen,
onClose,
}: OrderDetailsBottomSheetProps) {
const { t } = useTranslation();
const { orderType, restaurant, specialRequest, items } = useAppSelector(
(state) => state.order,
);
// const { isRTL } = useAppSelector((state) => state.locale);
return (
<ProBottomSheet
isOpen={isOpen}
onClose={onClose}
title={t("Order Details")}
height={500}
snapPoints={["60vh"]}
>
<div style={{ padding: "16px 0" }}>
{/* Order Type */}
<div style={{ marginBottom: 16 }}>
<ProText style={{ fontSize: 18, fontWeight: 600 }}>
{t("Order Type")}: {orderType && t(orderType)}
</ProText>
</div>
{/* Items List */}
<div style={{ marginBottom: 16 }}>
<ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
{t("Items")}
</ProText>
{items.length > 0 ? (
<div>
{items.map((item) => (
<div
key={item.id}
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
padding: "8px 0",
borderBottom: "1px solid #eee",
}}
>
<div>
<ProText style={{ fontWeight: 500 }}>
{item.quantity} x {item.name}
</ProText>
</div>
<ProText style={{ fontWeight: 500 }}>{}</ProText>
</div>
))}
</div>
) : (
<ProText>{t("No items in cart")}</ProText>
)}
</div>
{/* Special Request */}
{specialRequest && (
<div style={{ marginBottom: 16 }}>
<ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
{t("Special Request")}
</ProText>
<ProText>{specialRequest}</ProText>
</div>
)}
{/* Order Summary */}
<div style={{ marginTop: 24 }}>
<ProText style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>
{t("Order Summary")}
</ProText>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
}}
>
<ProText>{t("Subtotal")}</ProText>
<ProText>{}</ProText>
</div>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
}}
>
<ProText>{t("Tax")}</ProText>
<ProText>{}</ProText>
</div>
{orderType !== OrderType.DineIn && restaurant?.delivery_fees && (
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
}}
>
<ProText>{t("Delivery Fee")}</ProText>
<ProText>{Number(restaurant.delivery_fees)}</ProText>
</div>
)}
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: 16,
paddingTop: 16,
borderTop: "1px solid #eee",
fontWeight: 600,
}}
>
<ProText style={{ fontWeight: 600 }}>{t("Total")}</ProText>
<ProText style={{ fontWeight: 600 }}>{}</ProText>
</div>
</div>
</div>
</ProBottomSheet>
);
}

9
src/components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.module.css Normal file
View File

@@ -0,0 +1,9 @@
.saveButton {
border-radius: 100px;
height: 48px;
width: 100%;
font-size: 16px;
box-shadow: none;
position: fixed;
bottom: 0;left: 0;
}

108
src/components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.tsx Normal file
View File

@@ -0,0 +1,108 @@
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useAppSelector } from "redux/hooks.ts";
import ProText from "components/ProText.tsx";
import { OrderType } from "pages/checkout/hooks/types.ts";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { Segmented, Button } from "antd";
import DineInIcon from "./icons/dineIn.svg?react";
import DeliveryIcon from "./icons/delivery.svg?react";
import PickupIcon from "./icons/pickup.svg?react";
import styles from "./OrderDetailsBottomSheet.module.css";
import { GoogleMap } from "components/CustomBottomSheet/GoogleMap.tsx";
interface OrderDetailsBottomSheetProps {
isOpen: boolean;
onClose: () => void;
}
export function OrderDetailsBottomSheet({
isOpen,
onClose,
}: OrderDetailsBottomSheetProps) {
const { t } = useTranslation();
const { orderType, location } = useAppSelector((state) => state.order);
return (
<ProBottomSheet
isOpen={isOpen}
onClose={onClose}
title={t("orderDetails.title")}
height={500}
snapPoints={["60vh"]}
showCloseButton={false}
>
<div style={{ padding: "16px 0", position: "relative" }}>
{/* Order Type */}
<ProInputCard
title={t("orderDetails.fulfillmentType")}
dividerStyle={{ margin: "5px 0 0 0" }}
>
<Segmented
options={[
{
value: OrderType.DineIn,
label: t("orderTypes.dine-in"),
icon: <DineInIcon />,
},
{
value: OrderType.Pickup,
label: t("orderTypes.pickup"),
icon: <PickupIcon />,
},
{
value: OrderType.Delivery,
label: t("orderTypes.delivery"),
icon: <DeliveryIcon />,
},
]}
value={orderType}
size="small"
/>
</ProInputCard>
<ProInputCard
title={t("orderDetails.location")}
dividerStyle={{ margin: "5px 0 0 0" }}
>
{!location ? (
<div className={styles.noLocationContainer}>
<ProText type="secondary">
{t("address.noLocationSelected")}
</ProText>
<br />
<ProText type="secondary" className={styles.smallTextStyle}>
{t("address.clickEditToSelect")}
</ProText>
</div>
) : (
<div className={styles.mapContainer}>
<GoogleMap
readOnly={true}
initialLocation={location}
height="160px"
/>
</div>
)}
</ProInputCard>
<ProInputCard
title={t("orderDetails.pickupTime")}
dividerStyle={{ margin: "5px 0 0 0" }}
>
<div className={styles.noLocationContainer}>
<ProText type="secondary">
{t("address.noLocationSelected")}
</ProText>
<br />
<ProText type="secondary" className={styles.smallTextStyle}>
{t("address.clickEditToSelect")}
</ProText>
</div>
</ProInputCard>
<Button type="primary" className={styles.saveButton}>
{t("orderDetails.save")}
</Button>
</div>
</ProBottomSheet>
);
}