84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import { Button, Input } from "antd";
|
|
import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
|
|
import { updateTip } from "features/order/orderSlice";
|
|
import { useAppDispatch } from "redux/hooks";
|
|
|
|
interface TipBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
initialValue: string;
|
|
}
|
|
|
|
export function TipBottomSheet({
|
|
isOpen,
|
|
onClose,
|
|
initialValue,
|
|
}: TipBottomSheetProps) {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const [value, setValue] = useState(initialValue);
|
|
|
|
useEffect(() => {
|
|
setValue(initialValue);
|
|
}, [initialValue]);
|
|
|
|
const handleSave = () => {
|
|
const numAmount = parseFloat(value) || 0;
|
|
dispatch(updateTip(numAmount.toString()));
|
|
onClose();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setValue(initialValue);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={handleCancel}
|
|
title={t("cart.tip")}
|
|
initialSnap={1}
|
|
height={370}
|
|
snapPoints={[370]}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<div style={{ marginTop: 20 }}>
|
|
<WaiterRewardingIcon />
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<Input
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
placeholder={t("cart.amount")}
|
|
autoFocus={false}
|
|
size="large"
|
|
style={{ height: 48 }}
|
|
/>
|
|
|
|
<br />
|
|
|
|
<Button
|
|
type="primary"
|
|
style={{ width: "100%", height: 48 }}
|
|
onClick={handleSave}
|
|
>
|
|
{t("cart.addTip")}
|
|
</Button>
|
|
</div>
|
|
</ProBottomSheet>
|
|
);
|
|
}
|