113 lines
3.0 KiB
TypeScript
113 lines
3.0 KiB
TypeScript
import { Button, Form, InputNumber } from "antd";
|
|
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
|
|
import { useState, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
selectCart,
|
|
selectGrandTotal,
|
|
updateSplitBillAmount,
|
|
} from "features/order/orderSlice";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard";
|
|
|
|
interface SplitBillChoiceBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave?: (value: string) => void;
|
|
onRemoveSplitWay?: () => void;
|
|
}
|
|
|
|
export function CustomAmountChoiceBottomSheet({
|
|
isOpen,
|
|
onClose,
|
|
onRemoveSplitWay,
|
|
}: SplitBillChoiceBottomSheetProps) {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { splitBillAmount } = useAppSelector(selectCart);
|
|
const grandTotal = useAppSelector(selectGrandTotal);
|
|
const [amount, setAmount] = useState<string>(
|
|
splitBillAmount > 0 ? splitBillAmount.toString() : "",
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && splitBillAmount > 0) {
|
|
setAmount(splitBillAmount.toString());
|
|
}
|
|
}, [isOpen, splitBillAmount]);
|
|
|
|
const handleSave = () => {
|
|
const numAmount = parseFloat(amount) || 0;
|
|
dispatch(updateSplitBillAmount(numAmount));
|
|
onClose();
|
|
};
|
|
|
|
const handleRemoveSplitWay = () => {
|
|
setAmount("");
|
|
dispatch(updateSplitBillAmount(0));
|
|
onRemoveSplitWay?.();
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={t("splitBill.payAsCustomAmount")}
|
|
showCloseButton={true}
|
|
initialSnap={1}
|
|
height={400}
|
|
snapPoints={[400]}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: "20px 0",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 20,
|
|
}}
|
|
>
|
|
<div>
|
|
<ProInputCard title={t("splitBill.payAsCustomAmount")}>
|
|
<Form.Item
|
|
label={t("splitBill.amount")}
|
|
name="amount"
|
|
style={{ position: "relative", top: -5 }}
|
|
>
|
|
<InputNumber
|
|
value={amount}
|
|
onChange={(value) => setAmount(value?.toString() || "")}
|
|
placeholder={t("splitBill.amount")}
|
|
max={grandTotal.toString()}
|
|
min={"0"}
|
|
style={{ width: "100%", fontSize:"1rem" }}
|
|
/>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
gap: 12,
|
|
marginTop: 20,
|
|
}}
|
|
>
|
|
<Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
|
|
{t("splitBill.removeSplitWay")}
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
style={{ flex: 1, boxShadow: "none" }}
|
|
onClick={handleSave}
|
|
disabled={!amount || parseFloat(amount) <= 0}
|
|
>
|
|
{t("cart.save")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</ProBottomSheet>
|
|
);
|
|
}
|