cart refactor code
This commit is contained in:
566
src/pages/cart/components/CartMobileTabletLayout.tsx
Normal file
566
src/pages/cart/components/CartMobileTabletLayout.tsx
Normal file
@@ -0,0 +1,566 @@
|
||||
import ProHeader from "components/ProHeader/ProHeader.tsx";
|
||||
import styles from "pages/cart/cart.module.css";
|
||||
import { Space, Card, Divider, Input, Button, message } from "antd";
|
||||
import ProTitle from "components/ProTitle.tsx";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { colors, ProBlack2 } from "ThemeConstants.ts";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import ProText from "components/ProText.tsx";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
|
||||
import YouMightAlsoLike from "pages/cart/components/YouMightAlsoLike.tsx";
|
||||
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
|
||||
import DonateIcon from "components/Icons/cart/DonateIcon.tsx";
|
||||
import CouponHeartIcon from "components/Icons/cart/CouponHeart.tsx";
|
||||
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
|
||||
import {
|
||||
updateCollectionMethod,
|
||||
updateTables,
|
||||
removeTable,
|
||||
updateCoupon,
|
||||
updateTip,
|
||||
updateEstimateTime,
|
||||
selectCart,
|
||||
} from "features/order/orderSlice.ts";
|
||||
import DonateHandIcon from "components/Icons/cart/DonateHandIcon.tsx";
|
||||
import EditIcon from "components/Icons/EditIcon.tsx";
|
||||
import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
|
||||
import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
|
||||
import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet.tsx";
|
||||
import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet.tsx";
|
||||
import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet.tsx";
|
||||
import { getTableOptions } from "pages/cart/page.tsx";
|
||||
import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
|
||||
import useBreakPoint from "hooks/useBreakPoint.ts";
|
||||
|
||||
export default function CartMobileTabletLayout() {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
const { items, coupon, tip, tables, estimateTimeDate, collectionMethod } =
|
||||
useAppSelector(selectCart);
|
||||
const { id } = useParams();
|
||||
|
||||
const { isMobile, isTablet } = useBreakPoint();
|
||||
|
||||
const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
|
||||
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const orderType = localStorage.getItem("orderType");
|
||||
|
||||
const [isCouponOpen, setIsCouponOpen] = useState(false);
|
||||
const [estimateWay, setEstimateWay] = useState("now");
|
||||
const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
|
||||
const [isTipOpen, setIsTipOpen] = useState(false);
|
||||
|
||||
const handleCouponSave = (value: string) => {
|
||||
dispatch(updateCoupon(value));
|
||||
message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
|
||||
};
|
||||
|
||||
const handleCouponClose = () => {
|
||||
setIsCouponOpen(false);
|
||||
};
|
||||
|
||||
const handleTipSave = (value: string) => {
|
||||
dispatch(updateTip(value));
|
||||
message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
|
||||
};
|
||||
|
||||
const handleTipClose = () => {
|
||||
setIsTipOpen(false);
|
||||
};
|
||||
|
||||
const handleEstimateTimeSave = (date: Date, time: string) => {
|
||||
dispatch(updateEstimateTime({ date, time }));
|
||||
message.success(t("cart.estimateTime") + " " + t("updatedSuccessfully"));
|
||||
};
|
||||
|
||||
const handleEstimateTimeClose = () => {
|
||||
setIsEstimateTimeOpen(false);
|
||||
};
|
||||
|
||||
const getMenuItemImageStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 80,
|
||||
};
|
||||
}
|
||||
return {
|
||||
width: 120,
|
||||
height: 120,
|
||||
};
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<ProHeader>{t("cart.title")}</ProHeader>
|
||||
<div
|
||||
className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
|
||||
>
|
||||
<Space
|
||||
direction="vertical"
|
||||
size={isMobile ? "middle" : isTablet ? "large" : "large"}
|
||||
style={{ width: "100%", gap: 16 }}
|
||||
>
|
||||
<div className={`${styles.cartContent} ${getResponsiveClass()}`}>
|
||||
<div className={styles.cartItems}>
|
||||
<Card hoverable className={styles.cartItem}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 10,
|
||||
boxSizing: "border-box", // Explicit box model definition
|
||||
}}
|
||||
>
|
||||
<ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
|
||||
{t("cart.yourOrder")}
|
||||
</ProTitle>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={`/${id}/menu?${
|
||||
orderType ? `orderType=${orderType}` : ""
|
||||
}`}
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "end",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
color: colors.primary,
|
||||
}}
|
||||
>
|
||||
<PlusOutlined
|
||||
style={{
|
||||
color: colors.primary,
|
||||
marginLeft: 5,
|
||||
marginTop: 15,
|
||||
}}
|
||||
/>
|
||||
{t("cart.addMore")}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{items.length >= 1 && (
|
||||
<Divider style={{ margin: "0px 0px 10px 0px" }} />
|
||||
)}
|
||||
{items.map((item, index) => (
|
||||
<div key={index}>
|
||||
<Space
|
||||
size="middle"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Space
|
||||
direction="vertical"
|
||||
size="small"
|
||||
style={{ flex: 1, gap: isMobile ? "50px" : "60px" }}
|
||||
>
|
||||
<div>
|
||||
<ProText
|
||||
style={{
|
||||
margin: 0,
|
||||
lineClamp: 1,
|
||||
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText
|
||||
type="secondary"
|
||||
className={`${styles.itemDescription} responsive-text`}
|
||||
style={{
|
||||
margin: 0,
|
||||
lineClamp: 1,
|
||||
padding: isMobile ? 3 : isTablet ? 8 : 10,
|
||||
fontSize: isMobile ? 14 : isTablet ? 18 : 20,
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
lineHeight: "1.4",
|
||||
maxHeight: "2.8em",
|
||||
fontWeight: "500",
|
||||
letterSpacing: "0.01em",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</ProText>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "start",
|
||||
gap: isMobile ? 20 : 24,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
strong
|
||||
style={{
|
||||
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
||||
}}
|
||||
>
|
||||
<ArabicPrice price={item.price} />
|
||||
</ProText>
|
||||
</div>
|
||||
</Space>
|
||||
<div style={{ position: "relative" }}>
|
||||
<ImageWithFallback
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
className={`${styles.menuItemImage} responsive-image`}
|
||||
{...getMenuItemImageStyle()}
|
||||
fallbackSrc={
|
||||
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
||||
}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 10,
|
||||
}}
|
||||
>
|
||||
<CartActionsButtons item={item} />
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
|
||||
{index !== items.length - 1 && (
|
||||
<Divider style={{ margin: "10px 0" }} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<YouMightAlsoLike />
|
||||
|
||||
{/* Mobile/Tablet layout */}
|
||||
{/* Special Request */}
|
||||
<SpecialRequestCard />
|
||||
{/* Coupon Code */}
|
||||
<ProInputCard
|
||||
title={t("cart.couponCode")}
|
||||
titleRight={
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
}}
|
||||
onClick={() => setIsCouponOpen(true)}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
color: colors.primary,
|
||||
fontSize: 14,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{t("cart.viewOffers")}
|
||||
</ProText>
|
||||
<DonateIcon />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Input
|
||||
placeholder={t("cart.couponCode")}
|
||||
size="large"
|
||||
autoFocus={false}
|
||||
style={{ padding: "7px 11px", height: 50 }}
|
||||
suffix={
|
||||
<Button
|
||||
style={{
|
||||
width: 100,
|
||||
height: 32,
|
||||
borderRadius: 100,
|
||||
backgroundColor: "black",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{t("cart.apply")}
|
||||
<CouponHeartIcon className={styles.couponApplyIcon} />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</ProInputCard>
|
||||
|
||||
{/* Car Plate*/}
|
||||
{orderType === "pickup" && (
|
||||
<ProInputCard title={t("cart.plateNumber")}>
|
||||
<Input
|
||||
placeholder={t("plateNumber")}
|
||||
size="large"
|
||||
autoFocus={false}
|
||||
style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
|
||||
/>
|
||||
</ProInputCard>
|
||||
)}
|
||||
|
||||
{/* Estimate Time */}
|
||||
{(orderType === "delivery" || orderType === "pickup") && (
|
||||
<ProInputCard title={t("cart.estimateTime")}>
|
||||
<ProRatioGroups
|
||||
options={[
|
||||
{ label: t("cart.now"), value: "now", price: "" },
|
||||
{ label: t("cart.later"), value: "later", price: "" },
|
||||
]}
|
||||
value={estimateWay}
|
||||
onRatioClick={(value) => {
|
||||
if (value === "now") {
|
||||
setEstimateWay(value);
|
||||
handleEstimateTimeSave(new Date(), "now");
|
||||
} else {
|
||||
setEstimateWay(value);
|
||||
setIsEstimateTimeOpen(true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ProInputCard>
|
||||
)}
|
||||
|
||||
{/* Collection Method */}
|
||||
{orderType === "pickup" && (
|
||||
<ProInputCard title={t("cart.collectionMethod")}>
|
||||
<ProRatioGroups
|
||||
options={[
|
||||
{ label: t("cart.Cash"), value: "cod", price: "" },
|
||||
{
|
||||
label: t("cart.e-payment"),
|
||||
value: "paymentgateway",
|
||||
price: "",
|
||||
},
|
||||
]}
|
||||
value={collectionMethod}
|
||||
onRatioClick={(value) => {
|
||||
if (value === "cod") {
|
||||
updateCollectionMethod(value);
|
||||
} else {
|
||||
updateCollectionMethod(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ProInputCard>
|
||||
)}
|
||||
|
||||
{/* Reward Your Waiter */}
|
||||
<Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "start",
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 48,
|
||||
gap: 10,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
<DonateHandIcon className={styles.donateHandIcon} />
|
||||
</div>
|
||||
<div style={{ marginTop: 7 }}>
|
||||
<ProTitle style={{ fontSize: 18, margin: 0 }}>
|
||||
{t("cart.rewardYourWaiter")}
|
||||
</ProTitle>
|
||||
<ProText
|
||||
style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}
|
||||
>
|
||||
{t("cart.rewardYourWaiter100")}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
<Divider style={{ margin: "15px 0 15px 0" }} />
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
borderRadius: 100,
|
||||
height: 32,
|
||||
borderColor: "rgba(255, 183, 0, 0.12)",
|
||||
backgroundColor: "#FFB7001F",
|
||||
color: colors.primary,
|
||||
}}
|
||||
>
|
||||
<ArabicPrice price={0.5} />
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
borderRadius: 100,
|
||||
height: 32,
|
||||
backgroundColor: "#5F6C7B0D",
|
||||
color: "rgba(95, 108, 123, 1)",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
<ArabicPrice price={1.0} />
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
borderRadius: 100,
|
||||
height: 32,
|
||||
color: colors.primary,
|
||||
borderColor: "#d9d9d9",
|
||||
}}
|
||||
onClick={() => setIsTipOpen(true)}
|
||||
>
|
||||
<EditIcon />
|
||||
<ProText
|
||||
style={{
|
||||
color: colors.primary,
|
||||
}}
|
||||
>
|
||||
{t("cart.other")}
|
||||
</ProText>
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Table Number */}
|
||||
{orderType === "dine-in" && (
|
||||
<ProInputCard
|
||||
title={t("cart.tableNumber")}
|
||||
className={styles.tableNumberCard}
|
||||
>
|
||||
<ProInModalMultiSelect
|
||||
value={tables}
|
||||
placeholder={t("tableNumber")}
|
||||
size="large"
|
||||
optionList={getTableOptions()}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 50,
|
||||
fontSize: 12,
|
||||
}}
|
||||
onSelect={(value) => {
|
||||
updateTables(value);
|
||||
}}
|
||||
onClear={() => {
|
||||
removeTable();
|
||||
}}
|
||||
/>
|
||||
</ProInputCard>
|
||||
)}
|
||||
|
||||
{/* Invoice Summary */}
|
||||
<OrderSummary />
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "16px 16px 0",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
height: "10vh",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
gap: "1rem",
|
||||
backgroundColor: themeName === "light" ? "white" : ProBlack2,
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
borderRadius: 100,
|
||||
height: isMobile ? 48 : isTablet ? 56 : 64,
|
||||
borderColor: "black",
|
||||
width: "100%",
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
{t("cart.addItem")}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to={`/${id}/checkout`}
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
backgroundColor: colors.primary,
|
||||
borderRadius: 100,
|
||||
height: isMobile ? 48 : isTablet ? 56 : 64,
|
||||
borderColor: "#F2F2F2",
|
||||
fontSize: 16,
|
||||
color: "white",
|
||||
width: "100%",
|
||||
}}
|
||||
disabled={items.length === 0}
|
||||
>
|
||||
{t("cart.checkout")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile/Tablet Bottom Sheets */}
|
||||
|
||||
<CouponBottomSheet
|
||||
isOpen={isCouponOpen}
|
||||
onClose={handleCouponClose}
|
||||
initialValue={coupon}
|
||||
onSave={handleCouponSave}
|
||||
/>
|
||||
|
||||
<TipBottomSheet
|
||||
isOpen={isTipOpen}
|
||||
onClose={handleTipClose}
|
||||
initialValue={tip}
|
||||
onSave={handleTipSave}
|
||||
/>
|
||||
|
||||
<EstimateTimeBottomSheet
|
||||
isOpen={isEstimateTimeOpen}
|
||||
onClose={handleEstimateTimeClose}
|
||||
initialDate={estimateTimeDate}
|
||||
onSave={handleEstimateTimeSave}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user