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