EqualltyChoiceBottomSheet: update UI
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user