add split bill choice bottom sheet

src/pages/pay/components/PayButton.tsx

@@ -0,0 +1,66 @@
+import { Button, FormInstance, Layout } from "antd";
+import { selectCart } 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 { useAppSelector } from "redux/hooks";
+import styles from "../../address/address.module.css";
+import { SplitBillChoiceBottomSheet } from "./splitBill/SplitBillChoiceBottomSheet";
+
+export default function PayButton({ form }: { form: FormInstance }) {
+  const { t } = useTranslation();
+  const { orderType } = useAppSelector(selectCart);
+  const { handleCreateOrder } = useOrder();
+  const [
+    isSplitBillChoiceBottomSheetOpen,
+    setIsSplitBillChoiceBottomSheetOpen,
+  ] = useState(false);
+
+  const handleSplitBillClick = useCallback(() => {
+    setIsSplitBillChoiceBottomSheetOpen(true);
+  }, []);
+
+  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}
+          >
+            {t("checkout.splitBill")}
+          </Button>
+        )}
+
+        <Button
+          type="primary"
+          shape="round"
+          className={styles.placeOrderButton}
+          onClick={handlePlaceOrderClick}
+        >
+          {t("checkout.placeOrder")}
+        </Button>
+      </Layout.Footer>
+
+      <SplitBillChoiceBottomSheet
+        isOpen={isSplitBillChoiceBottomSheetOpen}
+        onClose={() => setIsSplitBillChoiceBottomSheetOpen(false)}
+      />
+    </>
+  );
+}