web-menu-react-version-/src/pages/cart/components/CartMobileTabletLayout.tsx

import { Card, Divider, Space, Layout, Button, Popconfirm } from "antd";

import ProHeader from "components/ProHeader/ProHeader.tsx";
import ProTitle from "components/ProTitle.tsx";
import { clearCart, selectCart } from "features/order/orderSlice.ts";
import styles from "pages/cart/cart.module.css";
import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
import { useNavigate, useParams } from "react-router-dom";

import { useAppDispatch, useAppSelector } from "redux/hooks.ts";

import { FormInstance } from "antd";
import useBreakPoint from "hooks/useBreakPoint.ts";
import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import DeleteIcon from "components/Icons/DeleteIcon";
import PlusIcon from "components/Icons/PlusIcon";
import { GiftItemsCard } from "pages/redeem/components/GiftItemsCard";
import ProductChoicesCard from "components/productChoicesCard/ProductChoicesCard.tsx";

interface CartMobileTabletLayoutProps {
  form: FormInstance;
}

export default function CartMobileTabletLayout({
  form,
}: CartMobileTabletLayoutProps) {
  const { t } = useTranslation();
  const { items, orderType } = useAppSelector(selectCart);
  const { isRTL } = useAppSelector((state) => state.locale);
  const { subdomain } = useParams();
  const { pickup_type } = useAppSelector((state) => state.order.restaurant);
  const { isMobile, isTablet } = useBreakPoint();
  const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  return (
    <Layout>
      <ProHeader>{t("cart.title")}</ProHeader>
      <Layout.Content
        className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
      >
        <Space
          orientation="vertical"
          size={isMobile ? "middle" : isTablet ? "large" : "large"}
          style={{ width: "100%", gap: 16, padding: 0 }}
        >
          {/* Table Number */}
          {(orderType === OrderType.DineIn ||
            orderType === OrderType.ToOffice) && <TableNumberCard />}

          {orderType === OrderType.Redeem && <GiftItemsCard isCart={true} />}

          <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
            <Card className={styles.cartItem}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-between",
                }}
              >
                <div
                  style={{
                    marginTop: 3,
                    boxSizing: "border-box", // Explicit box model definition
                  }}
                >
                  <ProTitle
                    level={5}
                    style={{
                      whiteSpace: "nowrap",
                      fontWeight: 500,
                      fontStyle: "Medium",
                      fontSize: 18,
                      lineHeight: "140%",
                      letterSpacing: 0,
                    }}
                  >
                    {t("cart.yourOrder")}
                  </ProTitle>
                </div>

                <Popconfirm
                  title={t("cart.clearCartConfirmation.title")}
                  description={t("cart.clearCartConfirmation.content")}
                  onConfirm={() => {
                    dispatch(clearCart());
                  }}
                  okText={t("cart.clearCartConfirmation.confirm")}
                  cancelText={t("cart.clearCartConfirmation.cancel")}
                  okButtonProps={{ danger: true }}
                  placement={isRTL ? "left" : "right"}
                >
                  <Button
                    shape="circle"
                    iconPlacement="start"
                    icon={
                      <DeleteIcon
                        className={styles.deleteIcon}
                        color={"#C0BFC4"}
                        dimension={16}
                      />
                    }
                    size="small"
                    className={styles.addButton}
                    style={{
                      width: 32,
                      height: 32,
                      border: "1px solid #DEDEE0",
                    }}
                  />
                </Popconfirm>
              </div>

              {items.length >= 1 && (
                <Divider style={{ margin: "8px 0px 12px 0px" }} />
              )}
              {items.map((item, index) => (
                <ProductChoicesCard
                  key={index}
                  product={{ ...item, type: "CartItem" }}
                  addDividerAfter={index !== items.length - 1}
                />
              ))}
              <Button
                style={{ width: "100%", marginTop: 24, color: "#4C4A58" }}
                onClick={() => {
                  navigate(
                    `/${subdomain}/menu?${
                      orderType ? `orderType=${orderType}` : ""
                    }`,
                  );
                }}
              >
                <PlusIcon dimension="18" /> {t("cart.addMore")}
              </Button>
            </Card>
          </div>

          {/* <YouMightAlsoLike /> */}

          <SpecialRequestCard />

          {/* Car Plate*/}
          {/* {((orderType === OrderType.Pickup && pickup_type === "car") ||
            orderType === OrderType.ScheduledOrder) && <CarPlateCard />} */}

          {/* Estimate Time */}
          {/* {(orderType === OrderType.Pickup ||
            orderType === OrderType.ScheduledOrder) && <TimeEstimateCard />} */}

          {/* Collection Method */}
          {/* {orderType === OrderType.Pickup && (
            <ProInputCard title={t("cart.collectionMethod")}>
              <Form.Item
                name="collectionMethod"
                required
                rules={[
                  {
                    required: true,
                    message: t("cart.pleaseSelectCollectionMethod"),
                  },
                ]}
              >
                <ProRatioGroups
                  options={[
                    { label: t("cart.Cash"), value: "cod", price: "" },
                    {
                      label: t("cart.e-payment"),
                      value: "paymentgateway",
                      price: "",
                    },
                  ]}
                  value={collectionMethod}
                  onRatioClick={(value) => {
                    if (value === "cod") {
                      updateCollectionMethod(value);
                    } else {
                      updateCollectionMethod(value);
                    }
                  }}
                />
              </Form.Item>
            </ProInputCard>
          )} */}

          {/* Reward Your Waiter */}
          {/* <RewardWaiterCard /> */}

          {/* Invoice Summary */}
          {/* <OrderSummary /> */}
        </Space>
      </Layout.Content>
      <CartFooter form={form} />
    </Layout>
  );
}