split bill: reorder flow
This commit is contained in:
@@ -387,7 +387,8 @@
|
||||
"pleaseLoginToAllowRating": "يرجى تسجيل الدخول لتمكين التقييم",
|
||||
"remainingTime": "الوقت المتبقي",
|
||||
"sec": "ثانية",
|
||||
"min": "دقيقة"
|
||||
"min": "دقيقة",
|
||||
"inviteToBill": "دع الجميع يدفعوا معك"
|
||||
},
|
||||
"orderTypes": {
|
||||
"dine-in": "في المطعم",
|
||||
|
||||
@@ -398,7 +398,8 @@
|
||||
"pleaseLoginToAllowRating": "Please login to allow rating",
|
||||
"remainingTime": "Remaining Time",
|
||||
"sec": "Sec",
|
||||
"min": "Min"
|
||||
"min": "Min",
|
||||
"inviteToBill": "Invite to Bill"
|
||||
},
|
||||
"orderTypes": {
|
||||
"dine-in": "Dine In",
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
// import { useGlobals } from "../../hooks/useGlobals";
|
||||
import { Button, Card, message } from "antd";
|
||||
import BackIcon from "components/Icons/BackIcon";
|
||||
import NextIcon from "components/Icons/NextIcon";
|
||||
import RateIcon from "components/Icons/order/RateIcon";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
@@ -6,13 +6,24 @@ import { useTranslation } from "react-i18next";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { selectCart } from "features/order/orderSlice";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useGetOrderDetailsQuery } from "redux/api/others";
|
||||
|
||||
export default function BriefMenuCard() {
|
||||
const { t } = useTranslation();
|
||||
const { items } = useAppSelector(selectCart);
|
||||
const totalItems = items.length;
|
||||
const { subdomain } = useParams();
|
||||
const { subdomain, orderId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const { data: orderDetails } = useGetOrderDetailsQuery(
|
||||
{
|
||||
orderID: orderId || "",
|
||||
restaurantID: localStorage.getItem("restaurantID") || "",
|
||||
},
|
||||
{
|
||||
skip: !orderId,
|
||||
// return it t0 60000 after finish testing
|
||||
},
|
||||
);
|
||||
const totalItems = items.length || orderDetails?.orderItems.length;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -1,23 +1,59 @@
|
||||
import { Button, FormInstance, Layout } from "antd";
|
||||
import { selectCart } from "features/order/orderSlice";
|
||||
import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
|
||||
import { OrderType } from "pages/checkout/hooks/types.ts";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
import styles from "../../address/address.module.css";
|
||||
import useOrder from "../hooks/useOrder";
|
||||
import { EqualltyChoiceBottomSheet } from "pages/pay/components/splitBill/EqualltyChoiceBottomSheet";
|
||||
import { SplitBillChoiceBottomSheet } from "pages/pay/components/splitBill/SplitBillChoiceBottomSheet";
|
||||
import { CustomAmountChoiceBottomSheet } from "pages/pay/components/splitBill/CustomAmountChoiceBottomSheet";
|
||||
import { PayForYourItemsChoiceBottomSheet } from "pages/pay/components/splitBill/PayForYourItemsChoiceBottomSheet";
|
||||
|
||||
type SplitWay = "customAmount" | "equality" | "payForItems" | null;
|
||||
|
||||
export default function CheckoutButton({ form }: { form: FormInstance }) {
|
||||
const dispatch = useAppDispatch();
|
||||
const { t } = useTranslation();
|
||||
const { orderType } = useAppSelector(selectCart);
|
||||
const navigate = useNavigate();
|
||||
const { handleCreateOrder } = useOrder();
|
||||
const { subdomain } = useParams();
|
||||
const [selectedSplitWay, setSelectedSplitWay] = useState<SplitWay>(null);
|
||||
const [
|
||||
isSplitBillChoiceBottomSheetOpen,
|
||||
setIsSplitBillChoiceBottomSheetOpen,
|
||||
] = useState(false);
|
||||
const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
|
||||
const [isEqualityOpen, setIsEqualityOpen] = useState(false);
|
||||
const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);
|
||||
|
||||
const handleSplitBillClick = useCallback(() => {
|
||||
navigate(`/${subdomain}/split-bill`);
|
||||
}, [navigate, subdomain]);
|
||||
if (selectedSplitWay === "customAmount") {
|
||||
setIsCustomAmountOpen(true);
|
||||
} else if (selectedSplitWay === "equality") {
|
||||
setIsEqualityOpen(true);
|
||||
} else if (selectedSplitWay === "payForItems") {
|
||||
setIsPayForItemsOpen(true);
|
||||
} else {
|
||||
setIsSplitBillChoiceBottomSheetOpen(true);
|
||||
}
|
||||
}, [selectedSplitWay]);
|
||||
|
||||
const handleRemoveSplitWay = useCallback(() => {
|
||||
setSelectedSplitWay(null);
|
||||
dispatch(updateSplitBillAmount(0));
|
||||
}, [dispatch]);
|
||||
|
||||
const getSplitButtonTitle = useMemo(() => {
|
||||
if (selectedSplitWay === "customAmount") {
|
||||
return t("splitBill.payAsCustomAmount");
|
||||
} else if (selectedSplitWay === "equality") {
|
||||
return t("splitBill.divideTheBillEqually");
|
||||
} else if (selectedSplitWay === "payForItems") {
|
||||
return t("splitBill.payForYourItems");
|
||||
}
|
||||
return t("checkout.splitBill");
|
||||
}, [selectedSplitWay, t]);
|
||||
|
||||
const handlePlaceOrderClick = useCallback(async () => {
|
||||
try {
|
||||
@@ -34,24 +70,56 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout.Footer className={styles.checkoutButtonContainer}>
|
||||
{shouldShowSplitBill && (
|
||||
<Button
|
||||
className={styles.splitBillButton}
|
||||
onClick={handleSplitBillClick}
|
||||
>
|
||||
{t("checkout.splitBill")}
|
||||
</Button>
|
||||
)}
|
||||
<>
|
||||
<Layout.Footer className={styles.checkoutButtonContainer}>
|
||||
{shouldShowSplitBill && (
|
||||
<Button
|
||||
className={styles.splitBillButton}
|
||||
onClick={handleSplitBillClick}
|
||||
>
|
||||
{getSplitButtonTitle}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
shape="round"
|
||||
className={styles.placeOrderButton}
|
||||
onClick={handlePlaceOrderClick}
|
||||
>
|
||||
{t("checkout.placeOrder")}
|
||||
</Button>
|
||||
</Layout.Footer>
|
||||
<Button
|
||||
type="primary"
|
||||
shape="round"
|
||||
className={styles.placeOrderButton}
|
||||
onClick={handlePlaceOrderClick}
|
||||
>
|
||||
{t("checkout.placeOrder")}
|
||||
</Button>
|
||||
</Layout.Footer>
|
||||
|
||||
<SplitBillChoiceBottomSheet
|
||||
isOpen={isSplitBillChoiceBottomSheetOpen}
|
||||
onClose={() => setIsSplitBillChoiceBottomSheetOpen(false)}
|
||||
onSelectSplitWay={setSelectedSplitWay}
|
||||
/>
|
||||
|
||||
<CustomAmountChoiceBottomSheet
|
||||
isOpen={isCustomAmountOpen}
|
||||
onClose={() => {
|
||||
setIsCustomAmountOpen(false);
|
||||
}}
|
||||
onRemoveSplitWay={handleRemoveSplitWay}
|
||||
/>
|
||||
|
||||
<EqualltyChoiceBottomSheet
|
||||
isOpen={isEqualityOpen}
|
||||
onClose={() => {
|
||||
setIsEqualityOpen(false);
|
||||
}}
|
||||
onRemoveSplitWay={handleRemoveSplitWay}
|
||||
/>
|
||||
|
||||
<PayForYourItemsChoiceBottomSheet
|
||||
isOpen={isPayForItemsOpen}
|
||||
onClose={() => {
|
||||
setIsPayForItemsOpen(false);
|
||||
}}
|
||||
onRemoveSplitWay={handleRemoveSplitWay}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -244,4 +244,19 @@
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.inviteToBillCard {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 12px 18px !important;
|
||||
row-gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.inviteToBillCard :global(.ant-card-body) {
|
||||
padding: 0px !important;
|
||||
text-align: start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ import TimeIcon from "components/Icons/order/TimeIcon";
|
||||
import OrderDishIcon from "components/Icons/OrderDishIcon";
|
||||
import PaymentDetails from "components/PaymentDetails/PaymentDetails";
|
||||
import ProHeader from "components/ProHeader/ProHeader";
|
||||
import ProInputCard from "components/ProInputCard/ProInputCard";
|
||||
import ProText from "components/ProText";
|
||||
import ProTitle from "components/ProTitle";
|
||||
import dayjs from "dayjs";
|
||||
@@ -24,6 +23,8 @@ import styles from "./order.module.css";
|
||||
import BackIcon from "components/Icons/BackIcon";
|
||||
import NextIcon from "components/Icons/NextIcon";
|
||||
import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet";
|
||||
import BriefMenuCard from "pages/checkout/components/BriefMenuCard";
|
||||
import { QRBottomSheet } from "pages/pay/components/splitBill/QRBottomSheet";
|
||||
|
||||
export default function OrderPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -32,6 +33,7 @@ export default function OrderPage() {
|
||||
const { restaurant } = useAppSelector((state) => state.order);
|
||||
const navigate = useNavigate();
|
||||
const hasRefetchedRef = useRef(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const { data: orderDetails } = useGetOrderDetailsQuery(
|
||||
{
|
||||
@@ -346,7 +348,7 @@ export default function OrderPage() {
|
||||
|
||||
<Ads2 />
|
||||
|
||||
<ProInputCard
|
||||
{/* <ProInputCard
|
||||
title={
|
||||
<div style={{ marginBottom: 7 }}>
|
||||
<ProText style={{ fontSize: "1rem" }}>
|
||||
@@ -393,7 +395,9 @@ export default function OrderPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ProInputCard>
|
||||
</ProInputCard> */}
|
||||
|
||||
<BriefMenuCard />
|
||||
|
||||
<PaymentDetails order={orderDetails?.order} />
|
||||
|
||||
@@ -439,6 +443,34 @@ export default function OrderPage() {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className={styles.inviteToBillCard}
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
marginTop: 1,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
|
||||
<ProTitle
|
||||
level={5}
|
||||
style={{
|
||||
marginTop: 1,
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{t("order.inviteToBill")}
|
||||
</ProTitle>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
|
||||
|
||||
<RateBottomSheet />
|
||||
|
||||
<CancelOrderBottomSheet />
|
||||
|
||||
@@ -12,7 +12,6 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
import ProText from "components/ProText";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import styles from "./SplitBill.module.css";
|
||||
import { QRBottomSheet } from "./QRBottomSheet";
|
||||
|
||||
interface SplitBillChoiceBottomSheetProps {
|
||||
isOpen: boolean;
|
||||
@@ -32,7 +31,6 @@ export function CustomAmountChoiceBottomSheet({
|
||||
const [amount, setAmount] = useState<string>(
|
||||
splitBillAmount > 0 ? splitBillAmount.toString() : "",
|
||||
);
|
||||
const [isQROpen, setIsQROpen] = useState(false);
|
||||
useEffect(() => {
|
||||
if (isOpen && splitBillAmount > 0) {
|
||||
setAmount(splitBillAmount.toString());
|
||||
@@ -42,7 +40,6 @@ export function CustomAmountChoiceBottomSheet({
|
||||
const handleSave = () => {
|
||||
const numAmount = parseFloat(amount) || 0;
|
||||
dispatch(updateSplitBillAmount(numAmount));
|
||||
setIsQROpen(true);
|
||||
onClose();
|
||||
};
|
||||
|
||||
@@ -62,7 +59,6 @@ export function CustomAmountChoiceBottomSheet({
|
||||
const previewRemaining = originalTotalBill - currentAmount;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
@@ -193,7 +189,5 @@ export function CustomAmountChoiceBottomSheet({
|
||||
</Button>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
<QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,7 +15,6 @@ import { ProGray1 } from "ThemeConstants";
|
||||
import PayForActions from "../../../split-bill/components/PayForActions";
|
||||
import TotalPeopleActions from "../../../split-bill/components/TotalPeopleActions";
|
||||
import styles from "./SplitBill.module.css";
|
||||
import { QRBottomSheet } from "./QRBottomSheet";
|
||||
|
||||
interface SplitBillChoiceBottomSheetProps {
|
||||
isOpen: boolean;
|
||||
@@ -38,7 +37,6 @@ export function EqualltyChoiceBottomSheet({
|
||||
const dispatch = useAppDispatch();
|
||||
const { tmp, splitBillAmount } = useAppSelector(selectCart);
|
||||
const grandTotal = useAppSelector(selectGrandTotal);
|
||||
const [isQROpen, setIsQROpen] = useState(false);
|
||||
const splitBillTmp = tmp as SplitBillTmp;
|
||||
const totalPeople = splitBillTmp?.totalPeople || 2;
|
||||
const payFor = splitBillTmp?.payFor || 1;
|
||||
@@ -56,7 +54,6 @@ export function EqualltyChoiceBottomSheet({
|
||||
|
||||
const handleSave = () => {
|
||||
dispatch(updateSplitBillAmount(splitAmount));
|
||||
setIsQROpen(true);
|
||||
onClose();
|
||||
};
|
||||
|
||||
@@ -67,284 +64,281 @@ export function EqualltyChoiceBottomSheet({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={t("splitBill.divideTheBillEqually")}
|
||||
showCloseButton={true}
|
||||
initialSnap={1}
|
||||
height={630}
|
||||
snapPoints={[630]}
|
||||
contentStyle={{
|
||||
padding: 0,
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={t("splitBill.divideTheBillEqually")}
|
||||
showCloseButton={true}
|
||||
initialSnap={1}
|
||||
height={630}
|
||||
snapPoints={[630]}
|
||||
contentStyle={{
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: 20,
|
||||
}}
|
||||
>
|
||||
{/* Spinner Visualization - Blank Spin Wheel */}
|
||||
{totalPeople > 0 && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 12,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: 200,
|
||||
height: 200,
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="200"
|
||||
height="200"
|
||||
viewBox="0 0 200 200"
|
||||
style={{
|
||||
transform: "rotate(-90deg)",
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: totalPeople }).map((_, index) => {
|
||||
const anglePerSlice = 360 / totalPeople;
|
||||
const startAngle = index * anglePerSlice;
|
||||
const endAngle = (index + 1) * anglePerSlice;
|
||||
const isSelected = index < payFor;
|
||||
|
||||
// Convert angles to radians
|
||||
const startAngleRad = (startAngle * Math.PI) / 180;
|
||||
const endAngleRad = (endAngle * Math.PI) / 180;
|
||||
|
||||
// Calculate path for pie slice (fit 200x200 viewBox)
|
||||
const radius = 90;
|
||||
const centerX = 100;
|
||||
const centerY = 100;
|
||||
|
||||
const x1 = centerX + radius * Math.cos(startAngleRad);
|
||||
const y1 = centerY + radius * Math.sin(startAngleRad);
|
||||
const x2 = centerX + radius * Math.cos(endAngleRad);
|
||||
const y2 = centerY + radius * Math.sin(endAngleRad);
|
||||
|
||||
const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
|
||||
|
||||
const pathData = [
|
||||
`M ${centerX} ${centerY}`,
|
||||
`L ${x1} ${y1}`,
|
||||
`A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
|
||||
"Z",
|
||||
].join(" ");
|
||||
|
||||
return (
|
||||
<path
|
||||
key={index}
|
||||
d={pathData}
|
||||
fill={
|
||||
isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"
|
||||
}
|
||||
stroke="#fff"
|
||||
strokeWidth="5"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
{/* Center circle with total bill amount */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
// Keep the SVG at 200x200, but make the center content smaller
|
||||
// so the wheel remains visible around it.
|
||||
width: 160,
|
||||
height: 160,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "var(--secondary-background)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 10,
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
color: "var(--primary)",
|
||||
lineHeight: 1.1,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ArabicPrice
|
||||
price={originalTotalBill}
|
||||
style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<ProText
|
||||
style={{
|
||||
fontSize: 11,
|
||||
color: ProGray1,
|
||||
marginTop: 6,
|
||||
textAlign: "center",
|
||||
lineHeight: 1.2,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.totalBill")}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
marginTop: 20,
|
||||
gap: "1rem",
|
||||
padding: 20,
|
||||
}}
|
||||
>
|
||||
{/* Spinner Visualization - Blank Spin Wheel */}
|
||||
{totalPeople > 0 && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 12,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: 200,
|
||||
height: 200,
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="200"
|
||||
height="200"
|
||||
viewBox="0 0 200 200"
|
||||
style={{
|
||||
transform: "rotate(-90deg)",
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: totalPeople }).map((_, index) => {
|
||||
const anglePerSlice = 360 / totalPeople;
|
||||
const startAngle = index * anglePerSlice;
|
||||
const endAngle = (index + 1) * anglePerSlice;
|
||||
const isSelected = index < payFor;
|
||||
|
||||
// Convert angles to radians
|
||||
const startAngleRad = (startAngle * Math.PI) / 180;
|
||||
const endAngleRad = (endAngle * Math.PI) / 180;
|
||||
|
||||
// Calculate path for pie slice (fit 200x200 viewBox)
|
||||
const radius = 90;
|
||||
const centerX = 100;
|
||||
const centerY = 100;
|
||||
|
||||
const x1 = centerX + radius * Math.cos(startAngleRad);
|
||||
const y1 = centerY + radius * Math.sin(startAngleRad);
|
||||
const x2 = centerX + radius * Math.cos(endAngleRad);
|
||||
const y2 = centerY + radius * Math.sin(endAngleRad);
|
||||
|
||||
const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
|
||||
|
||||
const pathData = [
|
||||
`M ${centerX} ${centerY}`,
|
||||
`L ${x1} ${y1}`,
|
||||
`A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
|
||||
"Z",
|
||||
].join(" ");
|
||||
|
||||
return (
|
||||
<path
|
||||
key={index}
|
||||
d={pathData}
|
||||
fill={
|
||||
isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"
|
||||
}
|
||||
stroke="#fff"
|
||||
strokeWidth="5"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
{/* Center circle with total bill amount */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
// Keep the SVG at 200x200, but make the center content smaller
|
||||
// so the wheel remains visible around it.
|
||||
width: 160,
|
||||
height: 160,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "var(--secondary-background)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 10,
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
color: "var(--primary)",
|
||||
lineHeight: 1.1,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ArabicPrice
|
||||
price={originalTotalBill}
|
||||
style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<ProText
|
||||
style={{
|
||||
fontSize: 11,
|
||||
color: ProGray1,
|
||||
marginTop: 6,
|
||||
textAlign: "center",
|
||||
lineHeight: 1.2,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.totalBill")}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
gap: "1rem",
|
||||
padding: 20,
|
||||
padding: 8,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
<ProText
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
gap: "1rem",
|
||||
padding: 8,
|
||||
fontSize: "1rem",
|
||||
marginTop: 3,
|
||||
color: ProGray1,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
marginTop: 3,
|
||||
color: ProGray1,
|
||||
}}
|
||||
>
|
||||
{t("checkout.totalPeople")}
|
||||
</ProText>
|
||||
{t("checkout.totalPeople")}
|
||||
</ProText>
|
||||
|
||||
<TotalPeopleActions />
|
||||
<TotalPeopleActions />
|
||||
|
||||
<ProText
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
marginTop: 3,
|
||||
color: ProGray1,
|
||||
}}
|
||||
>
|
||||
{t("checkout.totalPeople")}
|
||||
</ProText>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<ProText
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
gap: "1rem",
|
||||
padding: 8,
|
||||
fontSize: "1rem",
|
||||
marginTop: 3,
|
||||
color: ProGray1,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
marginTop: 2,
|
||||
color: ProGray1,
|
||||
}}
|
||||
>
|
||||
{t("checkout.payFor")}
|
||||
</ProText>
|
||||
|
||||
<PayForActions />
|
||||
|
||||
<ProText
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
marginTop: 2,
|
||||
color: ProGray1,
|
||||
}}
|
||||
>
|
||||
{t("checkout.payFor")}
|
||||
</ProText>
|
||||
</div>
|
||||
{t("checkout.totalPeople")}
|
||||
</ProText>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "var(--background)",
|
||||
padding: 20,
|
||||
opacity: 1,
|
||||
gap: 8,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
paddingTop: 12,
|
||||
paddingRight: 24,
|
||||
paddingBottom: 24,
|
||||
paddingLeft: 24,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
gap: "1rem",
|
||||
padding: 8,
|
||||
}}
|
||||
>
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontStyle: "Regular",
|
||||
fontSize: 14,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
}}
|
||||
>
|
||||
{t("splitBill.yourShare")}
|
||||
</ProText>
|
||||
<ArabicPrice price={splitAmount} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 12,
|
||||
margin: 20,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
<ProText
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#FEEDED",
|
||||
color: "#DD4143",
|
||||
boxShadow: "none",
|
||||
border: "none",
|
||||
fontSize: "1rem",
|
||||
marginTop: 2,
|
||||
color: ProGray1,
|
||||
}}
|
||||
onClick={handleRemoveSplitWay}
|
||||
>
|
||||
{t("splitBill.removeSplit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ flex: 1, boxShadow: "none" }}
|
||||
onClick={handleSave}
|
||||
{t("checkout.payFor")}
|
||||
</ProText>
|
||||
|
||||
<PayForActions />
|
||||
|
||||
<ProText
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
marginTop: 2,
|
||||
color: ProGray1,
|
||||
}}
|
||||
>
|
||||
{t("cart.save")}
|
||||
</Button>
|
||||
{t("checkout.payFor")}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
<QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
|
||||
</>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "var(--background)",
|
||||
padding: 20,
|
||||
opacity: 1,
|
||||
gap: 8,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
paddingTop: 12,
|
||||
paddingRight: 24,
|
||||
paddingBottom: 24,
|
||||
paddingLeft: 24,
|
||||
}}
|
||||
>
|
||||
<div className={styles.summaryRow}>
|
||||
<ProText
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontStyle: "Regular",
|
||||
fontSize: 14,
|
||||
lineHeight: "140%",
|
||||
letterSpacing: "0%",
|
||||
}}
|
||||
>
|
||||
{t("splitBill.yourShare")}
|
||||
</ProText>
|
||||
<ArabicPrice price={splitAmount} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 12,
|
||||
margin: 20,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#FEEDED",
|
||||
color: "#DD4143",
|
||||
boxShadow: "none",
|
||||
border: "none",
|
||||
}}
|
||||
onClick={handleRemoveSplitWay}
|
||||
>
|
||||
{t("splitBill.removeSplit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ flex: 1, boxShadow: "none" }}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{t("cart.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,6 @@ import ProText from "components/ProText";
|
||||
import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
import styles from "./SplitBill.module.css";
|
||||
import { QRBottomSheet } from "./QRBottomSheet";
|
||||
|
||||
interface SplitBillChoiceBottomSheetProps {
|
||||
isOpen: boolean;
|
||||
@@ -26,7 +25,6 @@ export function PayForYourItemsChoiceBottomSheet({
|
||||
const dispatch = useAppDispatch();
|
||||
const { items } = useAppSelector(selectCart);
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||||
const [isQROpen, setIsQROpen] = useState(false);
|
||||
// Calculate total for selected items
|
||||
const selectedTotal = items
|
||||
.filter((item) => selectedItems.has(item.uniqueId || item.id.toString()))
|
||||
@@ -57,7 +55,6 @@ export function PayForYourItemsChoiceBottomSheet({
|
||||
|
||||
const handleSave = () => {
|
||||
dispatch(updateSplitBillAmount(selectedTotal));
|
||||
setIsQROpen(true);
|
||||
onClose();
|
||||
};
|
||||
|
||||
@@ -69,162 +66,159 @@ export function PayForYourItemsChoiceBottomSheet({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={t("splitBill.payForYourItems")}
|
||||
showCloseButton={true}
|
||||
initialSnap={1}
|
||||
height={720}
|
||||
snapPoints={[720]}
|
||||
contentStyle={{ padding: 0 }}
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={t("splitBill.payForYourItems")}
|
||||
showCloseButton={true}
|
||||
initialSnap={1}
|
||||
height={720}
|
||||
snapPoints={[720]}
|
||||
contentStyle={{ padding: 0 }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: 20,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 12,
|
||||
maxHeight: "455px",
|
||||
minHeight: "455px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{items.length === 0 ? (
|
||||
<ProText
|
||||
type="secondary"
|
||||
style={{ textAlign: "center", padding: 20 }}
|
||||
>
|
||||
{t("cart.emptyCart")}
|
||||
</ProText>
|
||||
) : (
|
||||
items.map((item) => {
|
||||
const itemId = item.uniqueId || item.id.toString();
|
||||
const isSelected = selectedItems.has(itemId);
|
||||
const itemTotal = item.price * item.quantity;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
key={itemId}
|
||||
style={{
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
padding: 0,
|
||||
}}
|
||||
onClick={() => handleItemToggle(itemId)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
width={60}
|
||||
height={60}
|
||||
preview={false}
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<ProText style={{ fontSize: 14, fontWeight: 500 }}>
|
||||
{item.name}
|
||||
</ProText>
|
||||
<ArabicPrice price={itemTotal} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
minWidth: 32,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Checkbox
|
||||
className={styles.circleCheckbox}
|
||||
checked={isSelected}
|
||||
onChange={() => handleItemToggle(itemId)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{item !== items[items.length - 1] && (
|
||||
<Divider style={{ margin: "0" }} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: 16,
|
||||
backgroundColor: "rgba(255, 183, 0, 0.08)",
|
||||
borderRadius: 8,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: 20,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 12,
|
||||
maxHeight: "455px",
|
||||
minHeight: "455px",
|
||||
overflowY: "auto",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{items.length === 0 ? (
|
||||
<ProText
|
||||
type="secondary"
|
||||
style={{ textAlign: "center", padding: 20 }}
|
||||
>
|
||||
{t("cart.emptyCart")}
|
||||
</ProText>
|
||||
) : (
|
||||
items.map((item) => {
|
||||
const itemId = item.uniqueId || item.id.toString();
|
||||
const isSelected = selectedItems.has(itemId);
|
||||
const itemTotal = item.price * item.quantity;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
key={itemId}
|
||||
style={{
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
padding: 0,
|
||||
}}
|
||||
onClick={() => handleItemToggle(itemId)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
width={60}
|
||||
height={60}
|
||||
preview={false}
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<ProText style={{ fontSize: 14, fontWeight: 500 }}>
|
||||
{item.name}
|
||||
</ProText>
|
||||
<ArabicPrice price={itemTotal} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
minWidth: 32,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Checkbox
|
||||
className={styles.circleCheckbox}
|
||||
checked={isSelected}
|
||||
onChange={() => handleItemToggle(itemId)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{item !== items[items.length - 1] && (
|
||||
<Divider style={{ margin: "0" }} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<ProText style={{ fontSize: 16, fontWeight: 600 }}>
|
||||
{t("splitBill.selectedTotal")}:
|
||||
</ProText>
|
||||
<ArabicPrice price={selectedTotal} />
|
||||
</div>
|
||||
<div
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 12,
|
||||
margin: 20,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
padding: 16,
|
||||
backgroundColor: "rgba(255, 183, 0, 0.08)",
|
||||
borderRadius: 8,
|
||||
marginTop: 8,
|
||||
flex: 1,
|
||||
backgroundColor: "#FEEDED",
|
||||
color: "#DD4143",
|
||||
boxShadow: "none",
|
||||
border: "none",
|
||||
}}
|
||||
onClick={handleRemoveSplitWay}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<ProText style={{ fontSize: 16, fontWeight: 600 }}>
|
||||
{t("splitBill.selectedTotal")}:
|
||||
</ProText>
|
||||
<ArabicPrice price={selectedTotal} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 12,
|
||||
margin: 20,
|
||||
}}
|
||||
{t("splitBill.removeSplit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ flex: 1, boxShadow: "none" }}
|
||||
onClick={handleSave}
|
||||
disabled={selectedTotal === 0}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#FEEDED",
|
||||
color: "#DD4143",
|
||||
boxShadow: "none",
|
||||
border: "none",
|
||||
}}
|
||||
onClick={handleRemoveSplitWay}
|
||||
>
|
||||
{t("splitBill.removeSplit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ flex: 1, boxShadow: "none" }}
|
||||
onClick={handleSave}
|
||||
disabled={selectedTotal === 0}
|
||||
>
|
||||
{t("cart.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
<QRBottomSheet isOpen={isQROpen} onClose={() => setIsQROpen(false)} />
|
||||
</>
|
||||
{t("cart.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,126 +55,123 @@ export function SplitBillChoiceBottomSheet({
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={handleCancel}
|
||||
title={t("splitBill.title")}
|
||||
showCloseButton={false}
|
||||
initialSnap={1}
|
||||
height={290}
|
||||
snapPoints={[290]}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 20,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 10,
|
||||
}}
|
||||
<ProBottomSheet
|
||||
isOpen={isOpen}
|
||||
onClose={handleCancel}
|
||||
title={t("splitBill.title")}
|
||||
showCloseButton={false}
|
||||
initialSnap={1}
|
||||
height={290}
|
||||
snapPoints={[290]}
|
||||
>
|
||||
<Card
|
||||
className={styles.backToHomePage}
|
||||
onClick={handleCustomAmountClick}
|
||||
<div
|
||||
style={{
|
||||
marginTop: 20,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 1,
|
||||
}}
|
||||
<Card
|
||||
className={styles.backToHomePage}
|
||||
onClick={handleCustomAmountClick}
|
||||
>
|
||||
<ProTitle
|
||||
level={5}
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 1,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.payAsCustomAmount")}
|
||||
</ProTitle>
|
||||
<ProTitle
|
||||
level={5}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.payAsCustomAmount")}
|
||||
</ProTitle>
|
||||
|
||||
{isRTL ? (
|
||||
<BackIcon className={styles.serviceIcon} />
|
||||
) : (
|
||||
<NextIcon className={styles.serviceIcon} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
{isRTL ? (
|
||||
<BackIcon className={styles.serviceIcon} />
|
||||
) : (
|
||||
<NextIcon className={styles.serviceIcon} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className={styles.backToHomePage}
|
||||
onClick={handleEqualityClick}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 1,
|
||||
}}
|
||||
>
|
||||
<ProTitle
|
||||
level={5}
|
||||
<Card className={styles.backToHomePage} onClick={handleEqualityClick}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 1,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.divideTheBillEqually")}
|
||||
</ProTitle>
|
||||
<ProTitle
|
||||
level={5}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.divideTheBillEqually")}
|
||||
</ProTitle>
|
||||
|
||||
{isRTL ? (
|
||||
<BackIcon className={styles.serviceIcon} />
|
||||
) : (
|
||||
<NextIcon className={styles.serviceIcon} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
{isRTL ? (
|
||||
<BackIcon className={styles.serviceIcon} />
|
||||
) : (
|
||||
<NextIcon className={styles.serviceIcon} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className={styles.backToHomePage}
|
||||
onClick={handlePayForItemsClick}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 1,
|
||||
}}
|
||||
<Card
|
||||
className={styles.backToHomePage}
|
||||
onClick={handlePayForItemsClick}
|
||||
>
|
||||
<ProTitle
|
||||
level={5}
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginTop: 1,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.payForYourItems")}
|
||||
</ProTitle>
|
||||
<ProTitle
|
||||
level={5}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{t("splitBill.payForYourItems")}
|
||||
</ProTitle>
|
||||
|
||||
{isRTL ? (
|
||||
<BackIcon className={styles.serviceIcon} />
|
||||
) : (
|
||||
<NextIcon className={styles.serviceIcon} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
{isRTL ? (
|
||||
<BackIcon className={styles.serviceIcon} />
|
||||
) : (
|
||||
<NextIcon className={styles.serviceIcon} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</ProBottomSheet>
|
||||
|
||||
<CustomAmountChoiceBottomSheet
|
||||
isOpen={isCustomAmountOpen}
|
||||
onClose={() => setIsCustomAmountOpen(false)}
|
||||
/>
|
||||
<CustomAmountChoiceBottomSheet
|
||||
isOpen={isCustomAmountOpen}
|
||||
onClose={() => setIsCustomAmountOpen(false)}
|
||||
/>
|
||||
|
||||
<EqualltyChoiceBottomSheet
|
||||
isOpen={isEqualityOpen}
|
||||
onClose={() => setIsEqualityOpen(false)}
|
||||
/>
|
||||
<EqualltyChoiceBottomSheet
|
||||
isOpen={isEqualityOpen}
|
||||
onClose={() => setIsEqualityOpen(false)}
|
||||
/>
|
||||
|
||||
<PayForYourItemsChoiceBottomSheet
|
||||
isOpen={isPayForItemsOpen}
|
||||
onClose={() => setIsPayForItemsOpen(false)}
|
||||
/>
|
||||
<PayForYourItemsChoiceBottomSheet
|
||||
isOpen={isPayForItemsOpen}
|
||||
onClose={() => setIsPayForItemsOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -158,21 +158,21 @@ export default function RestaurantServices() {
|
||||
},
|
||||
]) ||
|
||||
[]),
|
||||
...((true && [
|
||||
{
|
||||
id: OrderType.Pay,
|
||||
title: t("common.pay"),
|
||||
description: t("home.services.pay"),
|
||||
icon: (
|
||||
<ToOfficeIcon
|
||||
className={styles.serviceIcon + " " + styles.officeIcon}
|
||||
/>
|
||||
),
|
||||
color: "bg-orange-50 text-orange-600",
|
||||
href: `/${subdomain}/pay`,
|
||||
},
|
||||
]) ||
|
||||
[]),
|
||||
// ...((true && [
|
||||
// {
|
||||
// id: OrderType.Pay,
|
||||
// title: t("common.pay"),
|
||||
// description: t("home.services.pay"),
|
||||
// icon: (
|
||||
// <ToOfficeIcon
|
||||
// className={styles.serviceIcon + " " + styles.officeIcon}
|
||||
// />
|
||||
// ),
|
||||
// color: "bg-orange-50 text-orange-600",
|
||||
// href: `/${subdomain}/pay`,
|
||||
// },
|
||||
// ]) ||
|
||||
// []),
|
||||
];
|
||||
|
||||
// Determine grid class based on number of services
|
||||
|
||||
Reference in New Issue
Block a user