web-menu-react-version-/src/pages/restaurant/RestaurantServices.tsx

import { ScheduleFilled } from "@ant-design/icons";
import { Card } from "antd";
import BackIcon from "components/Icons/BackIcon";
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 { updateOrderType } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "./restaurant.module.css";

export default function RestaurantServices() {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { subdomain } = useParams();
  const dispatch = useAppDispatch();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
    skip: !subdomain,
  });

  const {
    dineIn,
    pickup,
    gift,
    toRoom,
    toOffice,
    // is_booking_enabled,
    delivery,
    is_schedule_order_enabled,
    pickup_type,
  } = restaurant || {};

  const services = [
    ...((dineIn && [
      {
        id: OrderType.DineIn,
        title: t("common.dineIn"),
        description: t("home.services.dineIn"),
        icon: (
          <DineInIcon
            className={styles.serviceIcon + " " + styles.dineInIcon}
          />
        ),
        color: "bg-blue-50 text-blue-600",
        href: `/${subdomain}/menu?orderType=${OrderType.DineIn}`,
      },
    ]) ||
      []),
    ...((pickup && [
      {
        id: OrderType.Pickup,
        title: pickup_type === "car" ? t("common.car") : t("common.pickup"),
        description: t("home.services.pickup"),
        icon: (
          <PickupIcon
            className={styles.serviceIcon + " " + styles.pickupIcon}
          />
        ),
        color: "bg-green-50 text-green-600",
        href: `/${subdomain}/menu?orderType=${OrderType.Pickup}`,
      },
    ]) ||
      []),
    ...((gift && [
      {
        id: OrderType.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: `/${subdomain}/menu?orderType=${OrderType.Gift}`,
      },
    ]) ||
      []),
    ...((toRoom && [
      {
        id: OrderType.ToRoom,
        title: t("common.roomService"),
        description: t("home.services.room"),
        icon: (
          <ToRoomIcon className={styles.serviceIcon + " " + styles.roomIcon} />
        ),
        color: "bg-purple-50 text-purple-600",
        href: `/${subdomain}/menu?orderType=${OrderType.ToRoom}`,
      },
    ]) ||
      []),
    ...((toOffice && [
      {
        id: OrderType.ToOffice,
        title: t("common.officeDelivery"),
        description: t("home.services.office"),
        icon: (
          <ToOfficeIcon
            className={styles.serviceIcon + " " + styles.officeIcon}
          />
        ),
        color: "bg-orange-50 text-orange-600",
        href: `/${subdomain}/menu?orderType=${OrderType.ToOffice}`,
      },
    ]) ||
      []),

    // ...((is_booking_enabled && [
    //   {
    //     id: OrderType.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: `/${subdomain}/menu?orderType=${OrderType.Booking}`,
    //   },
    // ]) ||
    //   []),
    ...((delivery && [
      {
        id: OrderType.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: `/${subdomain}/address`,
      },
    ]) ||
      []),
    ...((is_schedule_order_enabled === 1 && [
      {
        id: OrderType.ScheduledOrder,
        title: t("common.scheduledOrder"),
        description: t("home.services.scheduledOrder"),
        icon: (
          <ScheduleFilled
            className={styles.serviceIcon + " " + styles.scheduledOrderIcon}
          />
        ),
        color: "bg-indigo-50 text-indigo-600",
        href: `/${subdomain}/menu?orderType=${OrderType.ScheduledOrder}`,
      },
    ]) ||
      []),
    // ...((true && [
    //   {
    //     id: OrderType.Pay,
    //     title: t("common.pay"),
    //     description: t("home.services.pay"),
    //     icon: (
    //       <ToOfficeIcon
    //         className={styles.serviceIcon + " " + styles.officeIcon}
    //       />
    //     ),
    //     color: "bg-orange-50 text-orange-600",
    //     href: `/${subdomain}/pay`,
    //   },
    // ]) ||
    //   []),
  ];

  // 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={() => {
              dispatch(updateOrderType(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>
  );
}