Initial commit

src/pages/restaurant/RestaurantServices.tsx

@@ -0,0 +1,213 @@
+import { Card } from "antd";
+import BackIcon from "components/Icons/BackIcon";
+import BookingIcon from "components/Icons/BookingIcon";
+import DeliveryIcon from "components/Icons/DeliveryIcon";
+import DineInIcon from "components/Icons/DineInIcon";
+import NextIcon from "components/Icons/NextIcon";
+import PickupIcon from "components/Icons/PickupIcon";
+import SendGiftIcon from "components/Icons/SendGiftIcon";
+import ToOfficeIcon from "components/Icons/ToOfficeIcon";
+import ToRoomIcon from "components/Icons/ToRoomIcon";
+import ProTitle from "components/ProTitle";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import styles from "./restaurant.module.css";
+
+interface RestaurantServicesProps {
+  dineIn?: boolean;
+  pickup?: boolean;
+  gift?: boolean;
+  delivery?: boolean;
+  toRoom?: boolean;
+  toOffice?: boolean;
+  is_booking_enabled?: boolean;
+  params: { locale: string; id: string };
+}
+
+export default function RestaurantServices({
+  dineIn,
+  pickup,
+  gift,
+  delivery,
+  toRoom,
+  toOffice,
+  is_booking_enabled,
+}: RestaurantServicesProps) {
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const id = localStorage.getItem("restaurantName");
+
+  const services = [
+    ...((dineIn && [
+      {
+        id: "dine-in",
+        title: t("common.dineIn"),
+        description: t("home.services.dineIn"),
+        icon: (
+          <DineInIcon
+            className={styles.serviceIcon + " " + styles.dineInIcon}
+          />
+        ),
+        color: "bg-blue-50 text-blue-600",
+        href: `/${id}/menu?orderType=dine-in`,
+      },
+    ]) ||
+      []),
+    ...((pickup && [
+      {
+        id: "pickup",
+        title: t("common.pickup"),
+        description: t("home.services.pickup"),
+        icon: (
+          <PickupIcon
+            className={styles.serviceIcon + " " + styles.pickupIcon}
+          />
+        ),
+        color: "bg-green-50 text-green-600",
+        href: `/${id}/menu?orderType=pickup`,
+      },
+    ]) ||
+      []),
+    ...((gift && [
+      {
+        id: "gift",
+        title: t("common.sendGift"),
+        description: t("home.services.gift"),
+        icon: (
+          <SendGiftIcon
+            className={styles.serviceIcon + " " + styles.giftIcon}
+          />
+        ),
+        color: "bg-pink-50 text-pink-600",
+        href: `/${id}/menu?orderType=gift`,
+      },
+    ]) ||
+      []),
+    ...((toRoom && [
+      {
+        id: "room",
+        title: t("common.roomService"),
+        description: t("home.services.room"),
+        icon: (
+          <ToRoomIcon className={styles.serviceIcon + " " + styles.roomIcon} />
+        ),
+        color: "bg-purple-50 text-purple-600",
+        href: `/${id}/menu?orderType=room`,
+      },
+    ]) ||
+      []),
+    ...((toOffice && [
+      {
+        id: "office",
+        title: t("common.officeDelivery"),
+        description: t("home.services.office"),
+        icon: (
+          <ToOfficeIcon
+            className={styles.serviceIcon + " " + styles.officeIcon}
+          />
+        ),
+        color: "bg-orange-50 text-orange-600",
+        href: `/${id}/menu?orderType=office`,
+      },
+    ]) ||
+      []),
+    ...((is_booking_enabled && [
+      {
+        id: "booking",
+        title: t("common.tableBooking"),
+        description: t("home.services.booking"),
+        icon: (
+          <BookingIcon
+            className={styles.serviceIcon + " " + styles.bookingIcon}
+          />
+        ),
+        color: "bg-indigo-50 text-indigo-600",
+        href: `/${id}/menu?orderType=booking`,
+      },
+    ]) ||
+      []),
+    ...((delivery && [
+      {
+        id: "delivery",
+        title: t("common.delivery"),
+        description: t("home.services.delivery"),
+        icon: (
+          <DeliveryIcon
+            className={styles.serviceIcon + " " + styles.deliveryIcon}
+          />
+        ),
+        color: "bg-indigo-50 text-indigo-600",
+        href: `/${id}/address`,
+      },
+    ]) ||
+      []),
+  ];
+
+  // Determine grid class based on number of services
+  const getGridClass = () => {
+    const serviceCount = services.length;
+    if (serviceCount <= 2) return `${styles.servicesGrid} ${styles.twoColumns}`;
+    if (serviceCount >= 4)
+      return `${styles.servicesGrid} ${styles.manyServices}`;
+    return styles.servicesGrid;
+  };
+
+  return (
+    <div className={getGridClass()}>
+      {services?.map((s) => {
+        return (
+          <Link
+            to={s?.href}
+            key={s?.id}
+            onClick={() => {
+              localStorage.setItem("orderType", s?.id);
+            }}
+            style={{
+              width: "100%",
+            }}
+          >
+            <Card className={styles.homeServiceCard}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  width: "100%",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 12,
+                  }}
+                >
+                  {s?.icon}
+                  <ProTitle
+                    level={5}
+                    style={{
+                      margin: 0,
+                      fontSize: 14,
+                      fontWeight: 600,
+                    }}
+                  >
+                    {s?.title}
+                  </ProTitle>
+                </div>
+
+                {isRTL ? (
+                  <BackIcon className={styles.serviceIcon} />
+                ) : (
+                  <NextIcon className={styles.serviceIcon} />
+                )}
+              </div>
+            </Card>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}