126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
import { Button, FormInstance, Layout } from "antd";
|
|
import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
|
|
import { OrderType } from "pages/checkout/hooks/types.ts";
|
|
import useOrder from "pages/checkout/hooks/useOrder";
|
|
import { useCallback, useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
import styles from "../../address/address.module.css";
|
|
import { CustomAmountChoiceBottomSheet } from "./splitBill/CustomAmountChoiceBottomSheet";
|
|
import { EqualltyChoiceBottomSheet } from "./splitBill/EqualltyChoiceBottomSheet";
|
|
import { PayForYourItemsChoiceBottomSheet } from "./splitBill/PayForYourItemsChoiceBottomSheet";
|
|
import { SplitBillChoiceBottomSheet } from "./splitBill/SplitBillChoiceBottomSheet";
|
|
|
|
type SplitWay = "customAmount" | "equality" | "payForItems" | null;
|
|
|
|
export default function PayButton({ form }: { form: FormInstance }) {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { orderType } = useAppSelector(selectCart);
|
|
const { handleCreateOrder } = useOrder();
|
|
const [selectedSplitWay, setSelectedSplitWay] = useState<SplitWay>(null);
|
|
const [
|
|
isSplitBillChoiceBottomSheetOpen,
|
|
setIsSplitBillChoiceBottomSheetOpen,
|
|
] = useState(false);
|
|
const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
|
|
const [isEqualityOpen, setIsEqualityOpen] = useState(false);
|
|
const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);
|
|
|
|
const handleSplitBillClick = useCallback(() => {
|
|
if (selectedSplitWay === "customAmount") {
|
|
setIsCustomAmountOpen(true);
|
|
} else if (selectedSplitWay === "equality") {
|
|
setIsEqualityOpen(true);
|
|
} else if (selectedSplitWay === "payForItems") {
|
|
setIsPayForItemsOpen(true);
|
|
} else {
|
|
setIsSplitBillChoiceBottomSheetOpen(true);
|
|
}
|
|
}, [selectedSplitWay]);
|
|
|
|
const handleRemoveSplitWay = useCallback(() => {
|
|
setSelectedSplitWay(null);
|
|
dispatch(updateSplitBillAmount(0));
|
|
}, [dispatch]);
|
|
|
|
const getSplitButtonTitle = useMemo(() => {
|
|
if (selectedSplitWay === "customAmount") {
|
|
return t("splitBill.payAsCustomAmount");
|
|
} else if (selectedSplitWay === "equality") {
|
|
return t("splitBill.divideTheBillEqually");
|
|
} else if (selectedSplitWay === "payForItems") {
|
|
return t("splitBill.payForYourItems");
|
|
}
|
|
return t("checkout.splitBill");
|
|
}, [selectedSplitWay, t]);
|
|
|
|
const handlePlaceOrderClick = useCallback(async () => {
|
|
try {
|
|
await form.validateFields();
|
|
handleCreateOrder();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}, [handleCreateOrder, form]);
|
|
|
|
const shouldShowSplitBill = useMemo(
|
|
() => orderType === OrderType.DineIn || orderType === OrderType.Pay,
|
|
[orderType],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Layout.Footer className={styles.checkoutButtonContainer}>
|
|
{shouldShowSplitBill && (
|
|
<Button
|
|
className={styles.splitBillButton}
|
|
onClick={handleSplitBillClick}
|
|
>
|
|
{getSplitButtonTitle}
|
|
</Button>
|
|
)}
|
|
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
className={styles.placeOrderButton}
|
|
onClick={handlePlaceOrderClick}
|
|
>
|
|
{t("checkout.placeOrder")}
|
|
</Button>
|
|
</Layout.Footer>
|
|
|
|
<SplitBillChoiceBottomSheet
|
|
isOpen={isSplitBillChoiceBottomSheetOpen}
|
|
onClose={() => setIsSplitBillChoiceBottomSheetOpen(false)}
|
|
onSelectSplitWay={setSelectedSplitWay}
|
|
/>
|
|
|
|
<CustomAmountChoiceBottomSheet
|
|
isOpen={isCustomAmountOpen}
|
|
onClose={() => {
|
|
setIsCustomAmountOpen(false);
|
|
}}
|
|
onRemoveSplitWay={handleRemoveSplitWay}
|
|
/>
|
|
|
|
<EqualltyChoiceBottomSheet
|
|
isOpen={isEqualityOpen}
|
|
onClose={() => {
|
|
setIsEqualityOpen(false);
|
|
}}
|
|
onRemoveSplitWay={handleRemoveSplitWay}
|
|
/>
|
|
|
|
<PayForYourItemsChoiceBottomSheet
|
|
isOpen={isPayForItemsOpen}
|
|
onClose={() => {
|
|
setIsPayForItemsOpen(false);
|
|
}}
|
|
onRemoveSplitWay={handleRemoveSplitWay}
|
|
/>
|
|
</>
|
|
);
|
|
}
|