Merge branch 'fix/buy-cart'

# Conflicts: # frontend/src/pages/my-account/useMyAccount.js
AAISS · Nov 28, 2023 · 9eaba75 · 9eaba75
2 parents d5f0c10 + 5dfa7fb
commit 9eaba75
Show file tree

Hide file tree

Showing 6 changed files with 591 additions and 550 deletions.
diff --git a/frontend/src/components/main-content/MainContent.jsx b/frontend/src/components/main-content/MainContent.jsx
@@ -1,12 +1,13 @@
 import { Route, Routes, useLocation } from 'react-router-dom';
-import PageFooter from '../footer/PageFooter';
 import ForgotPassword from '../../pages/ForgotPassword/ForgotPassword.jsx';
+import PaymentCallbackPage from '../../pages/payment-callback/PaymentCallbackPage.jsx';
 import { useConfig } from '../../providers/config-provider/ConfigProvider.jsx';
 import DrawerAppBar from '../app-bar/AppBar.jsx';
+import PageFooter from '../footer/PageFooter';
 
 export default function MainContent() {
   const { ROUTES } = useConfig();
-  const { hash, pathname, search } = useLocation();
+  const { pathname } = useLocation();
 
   return (
     <div className="main-content">
@@ -19,11 +20,10 @@ export default function MainContent() {
             return <Route path={ROUTES[name].path} element={ROUTES[name]?.component} key={name} />;
           })}
           <Route path="/forgotpassword" element={<ForgotPassword />} key="forgot" />
+          <Route path="/callback" element={<PaymentCallbackPage />} />
         </Routes>
       </main>
-      {pathname !== '/' && (
-        <PageFooter/>
-      )}
+      {pathname !== '/' && <PageFooter />}
     </div>
   );
 }
diff --git a/frontend/src/pages/my-account/useMyAccount.js b/frontend/src/pages/my-account/useMyAccount.js
@@ -1,7 +1,7 @@
-import {useCallback, useEffect, useState} from "react";
-import {useAPI} from "../../providers/APIProvider/APIProvider.jsx";
-import {useConfig} from "../../providers/config-provider/ConfigProvider.jsx";
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useAPI } from '../../providers/APIProvider/APIProvider.jsx';
+import { useConfig } from '../../providers/config-provider/ConfigProvider.jsx';
 
 export default function useMyAccount() {
 
@@ -46,13 +46,22 @@ export default function useMyAccount() {
         })
     }, [removeFromUserCart])
 
-    const handleBuyCart = useCallback(() => {
-        postPaymentData()
-    }, [postPaymentData])
-
-    useEffect(() => {
-        if (paymentData == null)
-            return
+  const handleBuyCart = useCallback(() => {
+    // TODO: this endpoint has some issues
+    postPaymentData({ call_back: 'https://aaiss.ir/callback' });
+  }, [postPaymentData]);
+
+  useEffect(() => {
+    if (paymentData) {
+      console.log({ paymentData });
+      const { message } = paymentData;
+      // TODO: THIS SHOULD BE TESTED ON LIVE TEST!!!!!
+      window.location.replace(message);
+    }
+  }, [paymentData]);
+
+  useEffect(() => {
+    if (paymentData == null) return;
 
         if (paymentData.status !== 200 || paymentData.data.status !== 200) {
             const toastTemp = {}

diff --git a/frontend/src/pages/payment-callback/PaymentCallbackPage.jsx b/frontend/src/pages/payment-callback/PaymentCallbackPage.jsx
@@ -1,83 +1,85 @@
+import { Button } from '@mui/material';
+import SvgIcon from '@mui/material/SvgIcon';
 import usePaymentCallbackPage from './usePaymentCallbackPage';
-import SvgIcon from "@mui/material/SvgIcon";
-import {Button} from "@mui/material";
 
 export default function PaymentCallbackPage() {
-    const {
-        paymentStatus,
-        paymentResultsData,
-    } = usePaymentCallbackPage()
+  const { paymentStatus, paymentResultsData } = usePaymentCallbackPage();
 
-    const iconStyles = {
-        width: "150px",
-        height: "150px",
-        marginBottom: "auto",
-        marginTop: "auto",
-    }
+  const iconStyles = {
+    width: '150px',
+    height: '150px',
+    marginBottom: 'auto',
+    marginTop: 'auto',
+  };
 
-    return (
-        <section style={{
-            display: "flex",
-            flexWrap: "nowrap",
-            alignItems: "center",
-            flexDirection: 'column',
-            minHeight: "60vh",
-        }}>
-            {!paymentStatus &&
-                <SvgIcon style={iconStyles}>
-                    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" fill="#fd5154" r="10"/>
-                        <path clipRule="evenodd"
-                              d="m8.44461 9.17169c-.19588-.19464-.19689-.51122-.00224-.7071.19464-.19588.51122-.19689.7071-.00225l2.85073 2.83266 2.8502-2.83217c.1959-.19464.5125-.19363.7071.00225.1947.19588.1937.51246-.0022.7071l-2.8457 2.82772 2.8457 2.8277c.1959.1947.1969.5112.0023.7071-.1947.1959-.5113.1969-.7071.0023l-2.8503-2.8323-2.85077 2.8328c-.19589.1946-.51247.1936-.70711-.0023s-.19363-.5125.00225-.7071l2.84623-2.8282z"
-                              fill="#fff" fillRule="evenodd"/>
-                    </svg>
-                </SvgIcon>
-            }
-            {paymentStatus &&
-                <SvgIcon style={iconStyles}>
-                    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" fill="#21c179" r="10"/>
-                        <path clipRule="evenodd"
-                              d="m16.6766 8.58327c.1936.19698.1908.51355-.0062.70708l-5.7054 5.60545c-.1914.1881-.4972.1915-.6927.0078l-2.67382-2.5115c-.20128-.189-.21118-.5055-.02212-.7067.18906-.2013.50548-.2112.70676-.0222l2.32368 2.1827 5.3628-5.26888c.1969-.19353.5135-.19073.707.00625z"
-                              fill="#fff" fillRule="evenodd"/>
-                    </svg>
-                </SvgIcon>
-            }
-            <div style={{
-                display: "flex",
-                flexDirection: "column",
-                width: "70vw",
-                maxWidth: "700px",
-                borderTop: "2px solid grey",
-                borderLeft: "2px solid grey",
-                backgroundColor: "rgba(126,126,126,0.2)",
-                padding: "10px",
-                borderRadius: "10px"
-            }}>
-                {paymentResultsData && Object.keys(paymentResultsData).map((key, index) => (
-                    <div key={index} style={{
-                        display: "flex",
-                        flexWrap: "nowrap",
-                        flexDirection: "row",
-                        justifyContent: "space-between"
-                    }}>
-                        <h3>
-                            {key}
-                        </h3>
-                        <p>
-                            {paymentResultsData[key]}
-                        </p>
-                    </div>
-                ))}
+  return (
+    <section
+      style={{
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        flexDirection: 'column',
+        minHeight: '60vh',
+      }}
+    >
+      {!paymentStatus && (
+        <SvgIcon style={iconStyles}>
+          <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" fill="#fd5154" r="10" />
+            <path
+              clipRule="evenodd"
+              d="m8.44461 9.17169c-.19588-.19464-.19689-.51122-.00224-.7071.19464-.19588.51122-.19689.7071-.00225l2.85073 2.83266 2.8502-2.83217c.1959-.19464.5125-.19363.7071.00225.1947.19588.1937.51246-.0022.7071l-2.8457 2.82772 2.8457 2.8277c.1959.1947.1969.5112.0023.7071-.1947.1959-.5113.1969-.7071.0023l-2.8503-2.8323-2.85077 2.8328c-.19589.1946-.51247.1936-.70711-.0023s-.19363-.5125.00225-.7071l2.84623-2.8282z"
+              fill="#fff"
+              fillRule="evenodd"
+            />
+          </svg>
+        </SvgIcon>
+      )}
+      {paymentStatus && (
+        <SvgIcon style={iconStyles}>
+          <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="12" cy="12" fill="#21c179" r="10" />
+            <path
+              clipRule="evenodd"
+              d="m16.6766 8.58327c.1936.19698.1908.51355-.0062.70708l-5.7054 5.60545c-.1914.1881-.4972.1915-.6927.0078l-2.67382-2.5115c-.20128-.189-.21118-.5055-.02212-.7067.18906-.2013.50548-.2112.70676-.0222l2.32368 2.1827 5.3628-5.26888c.1969-.19353.5135-.19073.707.00625z"
+              fill="#fff"
+              fillRule="evenodd"
+            />
+          </svg>
+        </SvgIcon>
+      )}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '70vw',
+          maxWidth: '700px',
+          borderTop: '2px solid grey',
+          borderLeft: '2px solid grey',
+          backgroundColor: 'rgba(126,126,126,0.2)',
+          padding: '10px',
+          borderRadius: '10px',
+        }}
+      >
+        {paymentResultsData &&
+          Object.keys(paymentResultsData).map((key, index) => (
+            <div
+              key={index}
+              style={{
+                display: 'flex',
+                flexWrap: 'nowrap',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}
+            >
+              <h3>{key}</h3>
+              <p>{paymentResultsData[key]}</p>
             </div>
-            <div className="back-to-home-container" style={{
-                marginTop: "30px",
-                borderRadius: "5px"
-            }}>
-                <Button className={"back-to-home"}>
-                    Back to Home Page!
-                </Button>
-            </div>
-        </section>
-    )
-}
+          ))}
+      </div>
+      <Button variant="contained" sx={{ mt: 5 }} href="/">
+        Back to Home Page
+      </Button>
+    </section>
+  );
+}
diff --git a/frontend/src/pages/payment-callback/usePaymentCallbackPage.js b/frontend/src/pages/payment-callback/usePaymentCallbackPage.js
@@ -1,59 +1,51 @@
-import {useConfig} from '../../providers/config-provider/ConfigProvider';
-import {useEffect, useState} from 'react';
-import {useAPI} from '../../providers/APIProvider/APIProvider';
+import { useEffect, useState } from 'react';
+import { useAPI } from '../../providers/APIProvider/APIProvider';
+import { useConfig } from '../../providers/config-provider/ConfigProvider';
 
 export default function usePaymentCallbackPage() {
-    const {
-        routeParams
-    } = useConfig()
-
-    const {
-        verifyPaymentData,
-        postVerifyPayment
-    } = useAPI()
-
-    const [paymentStatus, setPaymentStatus] = useState(false)
-    const [paymentResultsData, setPaymentResultsData] = useState()
-
-    useEffect(() => {
-        if (routeParams == null)
-            return
-
-        const refID = routeParams['clientrefid']
-        postVerifyPayment(0)
-    }, [routeParams])
-
-    useEffect(() => {
-        if (verifyPaymentData == null)
-            return
-
-        if (verifyPaymentData.status !== 200
-            || verifyPaymentData.data.status !== 200) {
-            setPaymentStatus(false)
-        } else {
-            setPaymentStatus(true)
-        }
-        setPaymentStatus(false)
-
-        const paymentResultTemp = {}
-        const keyDict = {
-            'message': "Message",
-            'refid': "Reference ID",
-            "card_number": "Credit Card Number"
-        }
-        Object.keys(verifyPaymentData.data).forEach(key => {
-            if (key in keyDict)
-                paymentResultTemp[keyDict[key]] = verifyPaymentData.data[key]
-            else
-                paymentResultTemp[key] = verifyPaymentData.data[key]
-        })
-        setPaymentResultsData(paymentResultTemp)
-        console.log(paymentResultTemp)
-    }, [verifyPaymentData])
-
-    return {
-        routeParams,
-        paymentStatus,
-        paymentResultsData,
+  const { routeParams } = useConfig();
+
+  const { verifyPaymentData, postVerifyPayment } = useAPI();
+
+  const [paymentStatus, setPaymentStatus] = useState(false);
+  const [paymentResultsData, setPaymentResultsData] = useState();
+
+  useEffect(() => {
+    if (routeParams == null) return;
+
+    const clientrefid = routeParams['clientrefid'];
+    postVerifyPayment({
+      clientrefid,
+    });
+  }, [routeParams]);
+
+  useEffect(() => {
+    if (verifyPaymentData == null) return;
+
+    if (verifyPaymentData.status !== 200 || verifyPaymentData.data.status !== 200) {
+      setPaymentStatus(false);
+    } else {
+      setPaymentStatus(true);
     }
-}
+    setPaymentStatus(false);
+
+    const paymentResultTemp = {};
+    const keyDict = {
+      message: 'Message',
+      refid: 'Reference ID',
+      card_number: 'Credit Card Number',
+    };
+    Object.keys(verifyPaymentData.data).forEach((key) => {
+      if (key in keyDict) paymentResultTemp[keyDict[key]] = verifyPaymentData.data[key];
+      else paymentResultTemp[key] = verifyPaymentData.data[key];
+    });
+    setPaymentResultsData(paymentResultTemp);
+    console.log(paymentResultTemp);
+  }, [verifyPaymentData]);
+
+  return {
+    routeParams,
+    paymentStatus,
+    paymentResultsData,
+  };
+}