Initial commit

src/components/PaymentDetails/PaymentDetails.tsx

@@ -0,0 +1,37 @@
+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 "./PaymentDetails.module.css";
+
+export default function PaymentDetails() {
+  const { t } = useTranslation();
+  const total = useAppSelector(selectCartTotal);
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  const subtotal = total;
+  const tax = subtotal * 0.1; // 10% tax
+  const finalTotal = 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} ${styles.totalRow}`}>
+            <ProText strong>{t("cart.totalAmount")}</ProText>
+            <ArabicPrice 
+              price={finalTotal} 
+              strong
+            />
+          </div>
+        </Space>
+      </Card>
+    </>
+  );
+}