cart refactor code

src/pages/cart/components/CartDesktopLayout.tsx

@@ -1,5 +1,5 @@
 import styles from "pages/cart/cart.module.css";
-import { Row, Col, Button, Card, Divider, Space } from "antd";
+import { Row, Col, Button, Card } from "antd";
 import ProTitle from "components/ProTitle.tsx";
 import { colors } from "ThemeConstants.ts";
 import ProText from "components/ProText.tsx";
@@ -10,7 +10,7 @@ import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import { CartItem } from "utils/types/appTypes.ts";
 
-import { selectCart, selectCartTotal } from "features/order/orderSlice.ts";
+import { selectCart } from "features/order/orderSlice.ts";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks.ts";
 import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
@@ -20,19 +20,17 @@ import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import YouMightAlsoLike from "pages/cart/components/YouMightAlsoLike.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
+import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
+import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
 
 export default function CartDesktopLayout() {
   const { t } = useTranslation();
   const { items } = useAppSelector(selectCart);
   const orderType = localStorage.getItem("orderType");
 
-  const subtotal = useAppSelector(selectCartTotal);
-  const tax = subtotal * 0.1; // 10% tax
-  const total = subtotal + tax;
-
   return (
     <>
-      <div className={styles.desktopCartContainer}>
+      <div className={`${styles.cartContainer} ${styles.desktopCartContainer}`}>
         <Row gutter={[40, 40]} style={{ width: "100%" }}>
           {/* Main Content Column */}
           <Col xs={24} lg={16} xl={17}>
@@ -213,72 +211,13 @@ export default function CartDesktopLayout() {
                 className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
                 style={{ "--animation-order": 4 } as React.CSSProperties}
               >
-                <ProTitle
-                  level={3}
-                  style={{ marginBottom: "20px", color: colors.primary }}
-                >
-                  {t("orderSummary")}
-                </ProTitle>
-
-                <Divider style={{ margin: "20px 0" }} />
-
-                <Space
-                  direction="vertical"
-                  style={{ width: "100%" }}
-                  size="large"
-                >
-                  <div className={styles.desktopSummaryRow}>
-                    <ProText>{t("basketTotal")}</ProText>
-                    <ArabicPrice price={subtotal} strong />
-                  </div>
-                  <div className={styles.desktopSummaryRow}>
-                    <ProText>{t("discount")}</ProText>
-                    <ArabicPrice price={0} />
-                  </div>
-                  <div className={styles.desktopSummaryRow}>
-                    <ProText>{t("riderTip")}</ProText>
-                    <ArabicPrice price={tax} />
-                  </div>
-
-                  <Divider style={{ margin: "24px 0" }} />
-
-                  <div className={styles.desktopTotalRow}>
-                    <ProTitle
-                      level={4}
-                      style={{ margin: 0, color: colors.primary }}
-                    >
-                      {t("totalAmount")}
-                    </ProTitle>
-                    <ProTitle
-                      level={4}
-                      style={{ margin: 0, color: colors.primary }}
-                    >
-                      <ArabicPrice price={total} />
-                    </ProTitle>
-                  </div>
-                </Space>
+                <OrderSummary />
               </Card>
-
-              {/* Checkout Button */}
-              <Button
-                type="primary"
-                size="large"
-                className={styles.desktopCheckoutButton}
-                style={{
-                  height: "56px",
-                  borderRadius: "16px",
-                  fontSize: "18px",
-                  fontWeight: 600,
-                  backgroundColor: colors.primary,
-                  border: "none",
-                  width: "100%",
-                }}
-              >
-                {t("checkout")}
-              </Button>
             </div>
           </Col>
         </Row>
+
+        <CartFooter />
       </div>
     </>
   );

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,9 +1,9 @@
 import ProHeader from "components/ProHeader/ProHeader.tsx";
 import styles from "pages/cart/cart.module.css";
-import { Space, Card, Divider, Button } from "antd";
+import { Space, Card, Divider } from "antd";
 import ProTitle from "components/ProTitle.tsx";
 import { Link, useParams } from "react-router-dom";
-import { colors, ProBlack2 } from "ThemeConstants.ts";
+import { colors } from "ThemeConstants.ts";
 import { PlusOutlined } from "@ant-design/icons";
 import ProText from "components/ProText.tsx";
 import ArabicPrice from "components/ArabicPrice";
@@ -28,6 +28,7 @@ import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
+import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
 
 export default function CartMobileTabletLayout() {
   const { t } = useTranslation();
@@ -38,7 +39,6 @@ export default function CartMobileTabletLayout() {
 
   const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");
 
-  const { themeName } = useAppSelector((state) => state.theme);
   const orderType = localStorage.getItem("orderType");
 
   const getMenuItemImageStyle = () => {
@@ -259,68 +259,11 @@ export default function CartMobileTabletLayout() {
 
           {/* Invoice Summary */}
           <OrderSummary />
+          {/* space keeper*/}
+          <div style={{ height: "10vh" }} />
         </Space>
       </div>
-
-      <div
-        style={{
-          width: "100%",
-          padding: "16px 16px 0",
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          height: "10vh",
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-around",
-          gap: "1rem",
-          backgroundColor: themeName === "light" ? "white" : ProBlack2,
-          boxShadow: "none",
-        }}
-      >
-        <Link
-          to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
-          style={{
-            width: "100%",
-          }}
-        >
-          <Button
-            style={{
-              borderRadius: 100,
-              height: isMobile ? 48 : isTablet ? 56 : 64,
-              borderColor: "black",
-              width: "100%",
-              fontSize: 16,
-            }}
-          >
-            {t("cart.addItem")}
-          </Button>
-        </Link>
-
-        <Link
-          to={`/${id}/checkout`}
-          style={{
-            width: "100%",
-          }}
-        >
-          <Button
-            style={{
-              backgroundColor: colors.primary,
-              borderRadius: 100,
-              height: isMobile ? 48 : isTablet ? 56 : 64,
-              borderColor: "#F2F2F2",
-              fontSize: 16,
-              color: "white",
-              width: "100%",
-            }}
-            disabled={items.length === 0}
-          >
-            {t("cart.checkout")}
-          </Button>
-        </Link>
-      </div>
-
-      {/* Mobile/Tablet Bottom Sheets */}
+      <CartFooter />
     </>
   );
 }

src/pages/cart/components/cartFooter/CartFooter.tsx

@@ -0,0 +1,61 @@
+import { colors } from "ThemeConstants.ts";
+import { Link, useParams } from "react-router-dom";
+import { Button } from "antd";
+import { useAppSelector } from "redux/hooks.ts";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { useTranslation } from "react-i18next";
+import { selectCart } from "features/order/orderSlice.ts";
+import styles from "./footer.module.css";
+
+export default function CartFooter() {
+  const { t } = useTranslation();
+  const { items } = useAppSelector(selectCart);
+  const { id } = useParams();
+  const { isMobile, isTablet } = useBreakPoint();
+  const orderType = localStorage.getItem("orderType");
+
+  return (
+    <div className={styles.cartFooter}>
+      <Link
+        to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
+        style={{
+          width: "100%",
+        }}
+      >
+        <Button
+          style={{
+            borderRadius: 100,
+            height: isMobile ? 48 : isTablet ? 56 : 64,
+            borderColor: "black",
+            width: "100%",
+            fontSize: 16,
+          }}
+        >
+          {t("cart.addItem")}
+        </Button>
+      </Link>
+
+      <Link
+        to={`/${id}/checkout`}
+        style={{
+          width: "100%",
+        }}
+      >
+        <Button
+          style={{
+            backgroundColor: colors.primary,
+            borderRadius: 100,
+            height: isMobile ? 48 : isTablet ? 56 : 64,
+            borderColor: "#F2F2F2",
+            fontSize: 16,
+            color: "white",
+            width: "100%",
+          }}
+          disabled={items.length === 0}
+        >
+          {t("cart.checkout")}
+        </Button>
+      </Link>
+    </div>
+  );
+}

src/pages/cart/components/cartFooter/footer.module.css

@@ -0,0 +1,23 @@
+.cartFooter {
+  width: 100%;
+  padding: 16px 16px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 10vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 1rem;
+  background-color: var(--background);
+  box-shadow: none;
+}
+/* :global(.darkApp) .cartFooter {
+  background-color: var(--background) !important;
+} */
+@media (min-width: 992px) {
+  .cartFooter {
+    position: absolute;
+    height: 12vh;
+  }
+}