add split bill choice bottom sheet

src/assets/locals/ar.json

@@ -401,5 +401,17 @@
     "payDescription": "الدفع للطلب",
     "payButton": "الدفع",
     "payButtonDescription": "الدفع للطلب"
+  },
+  "splitBill": {
+    "title": "تقسيم الفاتورة",
+    "description": "تقسيم الفاتورة",
+    "splitBill": "تقسيم الفاتورة",
+    "splitBillDescription": "تقسيم الفاتورة",
+    "splitBillButton": "تقسيم الفاتورة",
+    "splitBillButtonDescription": "تقسيم الفاتورة",
+    "payAsCustomAmount": "دفع كمبلغ مخصص",
+    "payAsSplitAmount": "دفع كمبلغ مقسم",
+    "divideTheBillEqually": "تقسيم الفاتورة الى حسب العدد",
+    "payForYourItems": "دفع للطلبات الخاصة بي"
   }
 }

src/assets/locals/en.json

@@ -413,5 +413,17 @@
     "payDescription": "Pay for your order",
     "payButton": "Pay",
     "payButtonDescription": "Pay for your order"
+  },
+  "splitBill": {
+    "title": "Split Bill",
+    "description": "Split Bill",
+    "splitBill": "Split Bill",
+    "splitBillDescription": "Split Bill",
+    "splitBillButton": "Split Bill",
+    "splitBillButtonDescription": "Split Bill",
+    "payAsCustomAmount": "Pay as Custom Amount",
+    "payAsSplitAmount": "Pay as Split Amount",
+    "divideTheBillEqually": "Divide the Bill Equally",
+    "payForYourItems": "Pay for Your Items"
   }
 }

src/pages/checkout/components/BriefMenu.tsx

@@ -42,7 +42,7 @@ export default function BriefMenu() {
 
   const cardTitle = useMemo(
     () =>
-      orderType === OrderType.DineIn
+      orderType === OrderType.DineIn || orderType === OrderType.Pay
         ? t("checkout.table") + " " + tables
         : t("checkout.items"),
     [orderType, t, tables],

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)}
+      />
+    </>
+  );
+}

src/pages/pay/components/splitBill/SplitBill.module.css

@@ -0,0 +1,48 @@
+.inputField {
+  height: 50px;
+}
+
+.editButton {
+  color: var(--primary);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.textArea {
+  border-radius: 24px;
+  margin: 40px 0;
+}
+
+.actionButton {
+  border-radius: 24px;
+  width: 100% !important;
+  height: 48px !important;
+}
+
+
+.backToHomePage {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
+
+.backToHomePage :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.nextIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.backIcon {
+  width: 24px;
+  height: 24px;
+}

src/pages/pay/components/splitBill/SplitBillChoiceBottomSheet.tsx

@@ -0,0 +1,150 @@
+import { Card } from "antd";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import { useTranslation } from "react-i18next";
+
+import BackIcon from "components/Icons/BackIcon";
+import NextIcon from "components/Icons/NextIcon";
+import ProTitle from "components/ProTitle";
+import { useNavigate, useParams } from "react-router-dom";
+import { useGetRestaurantDetailsQuery } from "redux/api/others";
+import { useAppSelector } from "redux/hooks";
+import styles from "./SplitBill.module.css";
+
+interface SplitBillChoiceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave?: (value: string) => void;
+}
+
+export function SplitBillChoiceBottomSheet({
+  isOpen,
+  onClose,
+  // onSave,
+}: SplitBillChoiceBottomSheetProps) {
+  const { t } = useTranslation();
+  // const [value, setValue] = useState(initialValue);
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { subdomain } = useParams();
+  const navigate = useNavigate();
+  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
+    skip: !subdomain,
+  });
+
+  // const handleSave = () => {
+  //   onSave(value);
+  //   onClose();
+  // };
+
+  const handleCancel = () => {
+    // setValue(initialValue);
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("splitBill.title")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={290}
+      snapPoints={[290]}
+    >
+      <div
+        style={{
+          marginTop: 20,
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+        }}
+      >
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {t("splitBill.payAsCustomAmount")}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {t("splitBill.divideTheBillEqually")}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+
+        <Card
+          className={styles.backToHomePage}
+          onClick={() => navigate(`/${restaurant?.subdomain}`)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginTop: 1,
+            }}
+          >
+            <ProTitle
+              level={5}
+              style={{
+                fontSize: 14,
+              }}
+            >
+              {t("splitBill.payForYourItems")}
+            </ProTitle>
+
+            {isRTL ? (
+              <BackIcon className={styles.serviceIcon} />
+            ) : (
+              <NextIcon className={styles.serviceIcon} />
+            )}
+          </div>
+        </Card>
+      </div>
+    </ProBottomSheet>
+  );
+}

src/pages/pay/components/splitBill/SplitBillChoiceDialog.tsx

@@ -0,0 +1,68 @@
+import { Button, Input, Modal } from "antd";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./SplitBill.module.css";
+
+const { TextArea } = Input;
+
+interface SplitBillChoiceDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialValue: string;
+  onSave: (value: string) => void;
+}
+
+export function SplitBillChoiceDialog({
+  isOpen,
+  onClose,
+  initialValue,
+  onSave,
+}: SplitBillChoiceDialogProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const handleSave = () => {
+    onSave(value);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={t("cart.specialRequest")}
+      open={isOpen}
+      onCancel={handleCancel}
+      footer={[
+        <Button
+          key="save"
+          type="primary"
+          onClick={handleSave}
+          className={styles.actionButton}
+        >
+          {t("cart.save")}
+        </Button>,
+      ]}
+      width={500}
+      destroyOnHidden
+    >
+      <div>
+        <TextArea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={t("cart.specialRequest")}
+          rows={6}
+          autoFocus={false}
+          className={styles.textArea}
+        />
+      </div>
+    </Modal>
+  );
+}

src/pages/pay/page.tsx

@@ -6,13 +6,13 @@ import ProHeader from "components/ProHeader/ProHeader";
 import { selectCart } from "features/order/orderSlice";
 import { AddressSummary } from "pages/checkout/components/AddressSummary";
 import BriefMenu from "pages/checkout/components/BriefMenu";
-import CheckoutButton from "pages/checkout/components/CheckoutButton";
 import { GiftCard } from "pages/checkout/components/GiftCard";
 import PhoneCard from "pages/checkout/components/phoneCard";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import styles from "../address/address.module.css";
+import PayButton from "./components/PayButton";
 
 
 export default function PayPage() {
@@ -58,7 +58,7 @@ export default function PayPage() {
             <PaymentMethods />
           </Layout.Content>
 
-          <CheckoutButton form={form} />
+          <PayButton form={form} />
         </Layout>
       </Form>
     </>