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

EqualltyChoiceBottomSheet: update UI

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-17 01:05:02 +03:00
parent c369807f40
commit 9a3608d5ab
5 changed files with 215 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ActionsButtons/ActionsButtons.module.css
View File

@@ -1,7 +1,7 @@
.quantityControls {
display: flex;
align-items: center;
background-color: #ffb70014;
background-color: var(--background);
border-radius: 888px;
width: fit-content;
}
@@ -15,7 +15,7 @@
.quantityInputContainer {
display: flex;
align-items: center;
padding: 8px;
padding: 0 1px;
border-radius: 888px;
width: 100px;
height: 32px;
@@ -77,7 +77,12 @@
}
.plusIcon {
margin-bottom: 1px;
margin-bottom: 1px;
color: var(--secondary-background);
}
.minusIcon {
color: var(--secondary-foreground);
}
.deleteIcon {

49
src/components/ActionsButtons/ActionsButtons.tsx
View File

@@ -1,7 +1,6 @@
import { MinusOutlined } from "@ant-design/icons";
import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, Grid, InputNumber, Popconfirm } from "antd";
import DeleteIcon from "components/Icons/DeleteIcon";
import PlusIcon from "components/Icons/PlusIcon";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import { colors } from "../../ThemeConstants";
@@ -51,14 +50,19 @@ export default function ActionsButtons({
<div className={styles.quantityInputContainer}>
{quantity > 0 ? (
<Button
type="text"
shape="circle"
iconPlacement="start"
icon={<MinusOutlined title="add" className={styles.minusIcon} />}
size="small"
onClick={() => setQuantity(Math.max(1, quantity - 1))}
className={styles.quantityButton}
{...(min && { disabled: quantity === min })}
>
<MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
</Button>
style={{
width: 28,
height: 28,
border: "none",
}}
/>
) : (
<Popconfirm
title={t("cart.deleteConfirmation.title")}
@@ -70,17 +74,20 @@ export default function ActionsButtons({
placement={isRTL ? "left" : "right"}
styles={{
root: getPopconfirmOverlayStyle(),
body: {
padding: xs ? "12px" : "16px",
},
}}
>
<Button
type="text"
shape="circle"
iconPlacement="start"
icon={<DeleteIcon />}
size="small"
danger
icon={<DeleteIcon className={styles.deleteIcon} />}
className={styles.removeButton}
className={styles.addButton}
style={{
background: "#FEF2F2",
width: 28,
height: 28,
border: "none",
}}
/>
</Popconfirm>
)}
@@ -88,21 +95,27 @@ export default function ActionsButtons({
min={min || 1}
max={max || 100}
value={quantity || 1}
onChange={(value) => setQuantity(value || 1)}
onChange={(value: number | null) => setQuantity(value || 1)}
size="small"
controls={false}
className={styles.quantityInput}
name="id"
/>
<Button
type="text"
shape="circle"
iconPlacement="start"
icon={<PlusOutlined title="add" className={styles.plusIcon} />}
size="small"
onClick={() => setQuantity(Math.min(100, quantity + 1))}
className={styles.quantityButton}
{...(max && { disabled: quantity >= max })}
>
<PlusIcon className={styles.plusIcon} />
</Button>
style={{
backgroundColor: colors.primary,
width: 28,
height: 28,
border: "none",
}}
/>
</div>
</div>
</div>

1
src/components/CartActionsButtons/CartActionsButtons.module.css
View File

@@ -56,7 +56,6 @@
position: absolute;
top: 12px;
right: 12px;
background-color: #ffb70014;
border-radius: 50%;
padding: 8px;
cursor: pointer;

11
src/components/CartActionsButtons/CartActionsButtons.tsx
View File

@@ -46,7 +46,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
{item.quantity > 1 ? (
<Button
shape="circle"
iconPosition="start"
iconPlacement="start"
icon={<MinusOutlined title="add" className={styles.minusIcon} />}
size="small"
onClick={() =>
@@ -76,14 +76,11 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
placement={isRTL ? "left" : "right"}
styles={{
root: getPopconfirmOverlayStyle(),
body: {
padding: isMobile ? "12px" : "16px",
},
}}
>
<Button
shape="circle"
iconPosition="start"
iconPlacement="start"
icon={<DeleteIcon />}
size="small"
onClick={() =>
@@ -109,7 +106,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
min={1}
max={100}
value={item.quantity || 1}
onChange={(value: number) =>
onChange={(value: number | null) =>
dispatch(
updateQuantity({
id: item.id,
@@ -125,7 +122,7 @@ export default function CartActionsButtons({ item }: { item: CartItem }) {
/>
<Button
shape="circle"
iconPosition="start"
iconPlacement="start"
icon={<PlusOutlined title="add" className={styles.plusIcon} />}
size="small"
onClick={() =>

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

@@ -3,8 +3,8 @@ import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import PeopleIcon from "components/Icons/PeopleIcon";
import ProText from "components/ProText";
import ArabicPrice from "components/ArabicPrice";
import {
selectCart,
selectGrandTotal,
@@ -14,6 +14,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
import { ProGray1 } from "ThemeConstants";
import PayForActions from "../../../split-bill/components/PayForActions";
import TotalPeopleActions from "../../../split-bill/components/TotalPeopleActions";
import styles from "./SplitBill.module.css";
interface SplitBillChoiceBottomSheetProps {
isOpen: boolean;
@@ -34,20 +35,23 @@ export function EqualltyChoiceBottomSheet({
}: SplitBillChoiceBottomSheetProps) {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { tmp } = useAppSelector(selectCart);
const { tmp, splitBillAmount } = useAppSelector(selectCart);
const grandTotal = useAppSelector(selectGrandTotal);
const splitBillTmp = tmp as SplitBillTmp;
const totalPeople = splitBillTmp?.totalPeople || 2;
const payFor = splitBillTmp?.payFor || 1;
// Calculate split amount
// Calculate original total bill (grandTotal already subtracts splitBillAmount)
const originalTotalBill = grandTotal + splitBillAmount;
// Calculate split amount based on original total bill
const splitAmount = useMemo(() => {
if (totalPeople > 0) {
return (grandTotal / totalPeople) * payFor;
return (originalTotalBill / totalPeople) * payFor;
}
return 0;
}, [grandTotal, totalPeople, payFor]);
}, [originalTotalBill, totalPeople, payFor]);
const handleSave = () => {
dispatch(updateSplitBillAmount(splitAmount));
@@ -67,8 +71,11 @@ export function EqualltyChoiceBottomSheet({
title={t("splitBill.divideTheBillEqually")}
showCloseButton={true}
initialSnap={1}
height={610}
snapPoints={[610]}
height={630}
snapPoints={[630]}
contentStyle={{
padding: 0,
}}
>
<div
style={{
@@ -77,96 +84,6 @@ export function EqualltyChoiceBottomSheet({
marginTop: 20,
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
gap: "1rem",
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
}}
>
<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 />
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
}}
>
<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 />
</div>
</div>
{/* Spinner Visualization - Blank Spin Wheel */}
{totalPeople > 0 && (
<div
@@ -203,7 +120,7 @@ export function EqualltyChoiceBottomSheet({
const startAngleRad = (startAngle * Math.PI) / 180;
const endAngleRad = (endAngle * Math.PI) / 180;
// Calculate path for pie slice
// Calculate path for pie slice (fit 200x200 viewBox)
const radius = 90;
const centerX = 100;
const centerY = 100;
@@ -230,57 +147,189 @@ export function EqualltyChoiceBottomSheet({
isSelected ? "var(--primary)" : "rgba(0, 0, 0, 0.1)"
}
stroke="#fff"
strokeWidth="2"
strokeWidth="5"
/>
);
})}
</svg>
{/* Center circle to make it look like a blank wheel */}
{/* Center circle with total bill amount */}
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 60,
height: 60,
// 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(--background)",
border: "3px solid var(--primary)",
backgroundColor: "var(--secondary-background)",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
fontSize: 18,
fontWeight: 600,
color: "var(--primary)",
zIndex: 10,
padding: 10,
}}
>
{payFor}
<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>
<ProText
style={{
textAlign: "center",
marginTop: 12,
fontSize: 16,
fontWeight: 600,
}}
>
{t("splitBill.yourAmount")}: {splitAmount.toFixed(2)}
</ProText>
</div>
)}
<div
style={{
display: "flex",
gap: 12,
marginTop: 20,
flexDirection: "column",
gap: "1rem",
padding: 20,
}}
>
<Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
{t("splitBill.removeSplitWay")}
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<ProText
style={{
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
{t("checkout.totalPeople")}
</ProText>
<TotalPeopleActions />
<ProText
style={{
fontSize: "1rem",
marginTop: 3,
color: ProGray1,
}}
>
{t("checkout.totalPeople")}
</ProText>
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "1rem",
padding: 8,
}}
>
<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>
</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,
}}
>
<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"