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

EqualltyChoiceBottomSheet: enhance styles

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-04 23:04:03 +03:00
parent f9ea67ed3b
commit fc8e274f58
3 changed files with 70 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/order/orderSlice.ts
View File

@@ -44,7 +44,7 @@ interface DiscountData {
interface CartState {
restaurant: Partial<RestaurantDetails>;
items: CartItem[];
tmp: unknown;
tmp: any;
specialRequest: string;
location: LocationData | null;
roomDetails: RoomDetailsType | null;

143
src/pages/pay/components/splitBill/EqualltyChoiceBottomSheet.tsx
View File

@@ -1,12 +1,10 @@
import { Button } from "antd";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useEffect, useMemo } from "react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import PeopleIcon from "components/Icons/PeopleIcon";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import {
selectCart,
selectGrandTotal,
@@ -40,7 +38,7 @@ export function EqualltyChoiceBottomSheet({
const grandTotal = useAppSelector(selectGrandTotal);
const splitBillTmp = tmp as SplitBillTmp;
const totalPeople = splitBillTmp?.totalPeople || 1;
const totalPeople = splitBillTmp?.totalPeople || 2;
const payFor = splitBillTmp?.payFor || 1;
// Calculate split amount
@@ -62,8 +60,6 @@ export function EqualltyChoiceBottomSheet({
onClose();
};
console.log(grandTotal);
return (
<ProBottomSheet
isOpen={isOpen}
@@ -71,108 +67,105 @@ export function EqualltyChoiceBottomSheet({
title={t("splitBill.divideTheBillEqually")}
showCloseButton={true}
initialSnap={1}
height={810}
snapPoints={[810]}
height={610}
snapPoints={[610]}
>
<div
style={{
padding: "20px 0",
display: "flex",
flexDirection: "column",
gap: 20,
marginTop: 20,
}}
>
<ProInputCard title={t("checkout.splitBill")}>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
<Button
type="text"
shape="circle"
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<Button
type="text"
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
{t("checkout.totalPeople")}
</ProText>
</div>
<TotalPeopleActions />
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
{t("checkout.totalPeople")}
</ProText>
</div>
<TotalPeopleActions />
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
<Button
type="text"
shape="circle"
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<Button
type="text"
shape="circle"
style={{
backgroundColor: "rgba(95, 108, 123, 0.05)",
position: "relative",
top: -10,
}}
>
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 2,
color: ProGray1,
}}
>
{t("checkout.payFor")}
</ProText>
</div>
<PayForActions />
<PeopleIcon />
</Button>
<ProText
style={{
fontSize: "1rem",
marginTop: 2,
color: ProGray1,
}}
>
{t("checkout.payFor")}
</ProText>
</div>
<PayForActions />
</div>
</ProInputCard>
</div>
{/* Spinner Visualization - Blank Spin Wheel */}
{totalPeople > 0 && (
@@ -181,13 +174,9 @@ export function EqualltyChoiceBottomSheet({
display: "flex",
flexDirection: "column",
gap: 12,
padding: 16,
alignItems: "center",
}}
>
<ProTitle level={5} style={{ marginBottom: 8 }}>
{t("splitBill.divisionPreview")}
</ProTitle>
<div
style={{
position: "relative",
@@ -237,7 +226,9 @@ export function EqualltyChoiceBottomSheet({
<path
key={index}
d={pathData}
fill={isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"}
fill={
isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"
}
stroke="#fff"
strokeWidth="2"
/>

4
src/pages/split-bill/components/TotalPeopleActions.tsx
View File

@@ -8,10 +8,10 @@ export default function TotalPeopleActions() {
return (
<ActionsButtons
quantity={tmp?.totalPeople || 1}
quantity={tmp?.totalPeople || 2}
setQuantity={(value) => dispatch(setTmp({ ...tmp, totalPeople: value }))}
max={10}
min={1}
min={2}
/>
);
}