order page: integration

src/components/PaymentDetails/PaymentDetails.tsx

@@ -1,20 +1,13 @@
 import { Card, Divider, Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
-import { selectCartTotal } from "features/order/orderSlice";
+import { Order } from "pages/checkout/hooks/types";
 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() {
+export default function PaymentDetails({ order }: { order?: Order }) {
   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 (
     <>
@@ -26,7 +19,7 @@ export default function PaymentDetails() {
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
             <ProText strong>{t("cart.totalAmount")}</ProText>
             <ArabicPrice 
-              price={finalTotal} 
+              price={order?.total_price || 0} 
               strong
             />
           </div>

src/components/PaymentMethods/PaymentMethods.tsx

@@ -3,17 +3,18 @@ import { Group } from "antd/es/radio";
 import ArabicPrice from "components/ArabicPrice";
 import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
 import ProText from "components/ProText";
+import { selectCart, updatePaymentMethod } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProGray1 } from "../../ThemeConstants";
 import ProInputCard from "../ProInputCard/ProInputCard";
 import styles from "./PaymentMethods.module.css";
 
-interface PaymentMethodsProps {
-  onPaymentSelect?: () => void;
-}
 
-const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
+const PaymentMethods = () => {
   const { t } = useTranslation();
+  const { paymentMethod } = useAppSelector(selectCart);
+  const dispatch = useAppDispatch();
 
   const options: {
     label: string;
@@ -48,6 +49,10 @@ const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
     },
   ];
 
+  const onPaymentSelect = (value: string) => {
+    dispatch(updatePaymentMethod(value));
+  };
+
   return (
     <ProInputCard title={t("checkout.selectedPaymentMethod")}>
       <Form.Item
@@ -56,13 +61,13 @@ const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
         rules={[
           { required: true, message: t("checkout.pleaseSelectPaymentMethod") },
         ]}
+        initialValue={paymentMethod}
       >
         <Group
           className={styles.paymentMethods}
           style={{
             width: "100%",
           }}
-          {...props}
           size="large"
         >
           <Space direction="vertical" style={{ width: "100%" }}>
@@ -71,7 +76,7 @@ const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
                 <Radio
                   key={option.value}
                   value={option.value}
-                  onClick={onPaymentSelect}
+                  onClick={() => onPaymentSelect(option.value)}
                   style={{
                     height: 50,
                     borderRadius: 888,