122 lines
3.1 KiB
TypeScript
122 lines
3.1 KiB
TypeScript
import { Button, Form } from "antd";
|
|
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
|
|
import { useState, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import {
|
|
selectCart,
|
|
selectGrandTotal,
|
|
updateGiftDetails,
|
|
updateSplitBillAmount,
|
|
} from "features/order/orderSlice";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
import ProText from "components/ProText";
|
|
import { ProInputNumber } from "components/Inputs/ProInputNumber";
|
|
|
|
interface SplitBillChoiceBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function GiftAmountBottomSheet({
|
|
isOpen,
|
|
onClose,
|
|
}: SplitBillChoiceBottomSheetProps) {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { giftDetails } = useAppSelector(selectCart);
|
|
const [amount, setAmount] = useState<string>(
|
|
giftDetails?.amount && giftDetails?.amount > 0
|
|
? giftDetails?.amount?.toString()
|
|
: "",
|
|
);
|
|
|
|
const handleSave = () => {
|
|
const numAmount = parseFloat(amount) || 0;
|
|
dispatch(updateGiftDetails({ amount: numAmount }));
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={t("cardDetails.customAmount")}
|
|
showCloseButton={true}
|
|
initialSnap={1}
|
|
height={295}
|
|
snapPoints={[295]}
|
|
contentStyle={{
|
|
padding: 0,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: "20px 20px 0 20px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 400,
|
|
fontStyle: "Regular",
|
|
fontSize: 16,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{t("cardDetails.enterCustomOucherAmount")}
|
|
</ProText>
|
|
<Form.Item name="amount">
|
|
<ProInputNumber
|
|
value={amount}
|
|
onChange={(value) => {
|
|
setAmount(value?.toString() || "");
|
|
dispatch(updateGiftDetails({ amount: Number(value) || 0 }));
|
|
}}
|
|
placeholder={t("cardDetails.amount")}
|
|
min={0}
|
|
/>
|
|
</Form.Item>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 12,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#B1B0B6",
|
|
}}
|
|
>
|
|
{t("cardDetails.minimumAmountShouldBe1OMR")}
|
|
</ProText>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
gap: 12,
|
|
margin: 20,
|
|
}}
|
|
>
|
|
<Button
|
|
type="primary"
|
|
style={{
|
|
flex: 1,
|
|
boxShadow: "none",
|
|
height: 48,
|
|
}}
|
|
onClick={handleSave}
|
|
disabled={!amount || parseFloat(amount) <= 0}
|
|
>
|
|
{t("cardDetails.add")}
|
|
</Button>
|
|
</div>
|
|
</ProBottomSheet>
|
|
);
|
|
}
|