cart refactor code

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