Initial commit

src/components/OrderSummary/OrderSummary.tsx

@@ -0,0 +1,62 @@
+import { Card, Divider, Space } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import { selectCartTotal } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import ProText from "../ProText";
+import ProTitle from "../ProTitle";
+import styles from "./OrderSummary.module.css";
+
+export default function OrderSummary() {
+  const { t } = useTranslation();
+  const subtotal = useAppSelector(selectCartTotal);
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const tax = subtotal * 0.1; // 10% tax
+  const total = subtotal + tax;
+
+  return (
+    <>
+      <Card className={`${styles.orderSummary}`}>
+        <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
+        <Divider style={{ margin: "15px 0 15px 0" }} />
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <div className={styles.summaryRow}>
+            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
+              {t("cart.basketTotal")}
+            </ProText>
+            <ArabicPrice 
+              price={subtotal} 
+              style={{ color: "rgba(67, 78, 92, 1)" }}
+            />
+          </div>
+          <div className={styles.summaryRow}>
+            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
+              {t("cart.discount")}
+            </ProText>
+            <ArabicPrice 
+              price={0} 
+              style={{ color: "rgba(67, 78, 92, 1)" }}
+            />
+          </div>
+          <div className={styles.summaryRow}>
+            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
+              {t("cart.riderTip")}
+            </ProText>
+            <ArabicPrice 
+              price={tax} 
+              style={{ color: "rgba(67, 78, 92, 1)" }}
+            />
+          </div>
+          <Divider className={styles.summaryDivider} />
+          <div className={`${styles.summaryRow} ${styles.totalRow}`}>
+            <ProText strong>{t("cart.totalAmount")}</ProText>
+            <ArabicPrice 
+              price={total} 
+              strong
+            />
+          </div>
+        </Space>
+      </Card>
+    </>
+  );
+}