order page: integration

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,