feat: did stuff

AAISS · Nov 27, 2023 · 8962ae8 · 8962ae8
1 parent 11e8ad0
commit 8962ae8
Show file tree

Hide file tree

Showing 11 changed files with 400 additions and 173 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -2,6 +2,7 @@ import './App.css';
 import './App-mobile.css';
 import './css/Nav.css';
 import './css/Theme.css';
+import './css/callback-page.css'
 
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';

diff --git a/frontend/src/components/main-content/MainContent.jsx b/frontend/src/components/main-content/MainContent.jsx
@@ -3,6 +3,7 @@ import PageFooter from '../footer/PageFooter';
 import ForgotPassword from '../../pages/ForgotPassword/ForgotPassword.jsx';
 import { useConfig } from '../../providers/config-provider/ConfigProvider.jsx';
 import DrawerAppBar from '../app-bar/AppBar.jsx';
+import PaymentCallbackPage from '../../pages/payment-callback/PaymentCallbackPage';
 
 export default function MainContent() {
   const { ROUTES } = useConfig();
@@ -19,6 +20,7 @@ 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="/payment-callback" element={<PaymentCallbackPage />} />
         </Routes>
       </main>
       {pathname !== '/' && (

diff --git a/frontend/src/css/callback-page.css b/frontend/src/css/callback-page.css
@@ -0,0 +1,7 @@
+.back-to-home-container {
+    background-color: var(--background-color-lighter-40);
+}
+
+.back-to-home {
+    color: var(--light-text-color);
+}
diff --git a/frontend/src/pages/Signup/Signup.jsx b/frontend/src/pages/Signup/Signup.jsx
@@ -48,20 +48,19 @@ const SignUpForm = ({ onLoginClick }) => {
     navigate(ROUTES.myAccount);
   };
 
-  // const handleSignUp = useCallback(() => {
-  //   const data = {};
-  //   data.name = fullname;
-  //   data.phone_number = phoneNumber;
-  //   data.account = {
-  //     password: password,
-  //     email: email,
-  //   };
-  //   createUser(data);
-  // }, [createUser, email, fullname, password, phoneNumber]);
+  const handleSignUp = useCallback(() => {
+    const data = {};
+    data.name = fullname;
+    data.phone_number = phoneNumber;
+    data.account = {
+      password: password,
+      email: email,
+    };
+    createUser(data);
+  }, [createUser, email, fullname, password, phoneNumber]);
 
   // TODO: add form validation
-  const handleFormSubmit = async (e) => {
-    console.log('handle form submit');
+  const handleFormSubmit = (e) => {
     e.preventDefault();
     if (hasEmailError(email)) {
       setIsEmailWrong(true);
@@ -84,42 +83,33 @@ const SignUpForm = ({ onLoginClick }) => {
       setSecondPassHelperText('Passwords are not the same');
       return;
     }
-
-    // API call
-    const data = {
-      name: fullname,
-      phone_number: phoneNumber,
-      account: {
-        password: password,
-        email: email,
-      },
-    };
-    createUser(data);
+    // TODO: route to my-account page
   };
 
   useEffect(() => {
+    if (createUserData == null) return;
+
     const toastDataTemp = {};
-    if (createUserData) {
-      switch (createUserData.status) {
-        case 200:
-        case 201:
-          toastDataTemp.message = 'Account Created Successfully! Please Check Your Email.';
-          toastDataTemp.alertType = 'success';
-          navToMyAccountPage();
-          break;
-        case 400:
-          toastDataTemp.message = 'User with This Email Already Exists!';
-          toastDataTemp.alertType = 'error';
-          break;
-        default:
-          toastDataTemp.message = 'Unexpected Error! Please Try Again Later.';
-          toastDataTemp.alertType = 'error';
-          break;
-      }
-      setAccessTokenFromLocalStorage();
-      setToastData(toastDataTemp);
-      setOpenToast(true);
+    switch (createUserData.status) {
+      case 200:
+      case 201:
+        toastDataTemp.message = 'Account Created Successfully! Please Check Your Email.';
+        toastDataTemp.alertType = 'success';
+        navToMyAccountPage();
+        break;
+      case 400:
+        toastDataTemp.message = 'User with This Email Already Exists!';
+        toastDataTemp.alertType = 'error';
+        break;
+      default:
+        toastDataTemp.message = 'Unexpected Error! Please Try Again Later.';
+        toastDataTemp.alertType = 'error';
+        break;
     }
+
+    setAccessTokenFromLocalStorage();
+    setToastData(toastDataTemp);
+    setOpenToast(true);
   }, [createUserData]);
 
   return (
@@ -195,7 +185,7 @@ const SignUpForm = ({ onLoginClick }) => {
               }}
             />
             <Stack gap={2}>
-              <Button color="primary" variant="contained" type="submit">
+              <Button onClick={handleSignUp} color="primary" variant="contained" type="submit">
                 SignUp
               </Button>
               <Button color="primary" variant="outlined" onClick={onLoginClick}>
@@ -234,9 +224,11 @@ const LoginForm = ({ onSignUpClick }) => {
     // TODO: route to my-account page if it's successful
   };
 
-  const { navigate } = useNavigate();
+  const {navigate} = useNavigate()
   const { issueToken, issueTokenResponse } = useAPI();
-  const { setAccessTokenFromLocalStorage } = useConfig();
+  const {
+    setAccessTokenFromLocalStorage
+  } = useConfig()
 
   useEffect(() => {
     if (issueTokenResponse == null) return;
@@ -245,7 +237,8 @@ const LoginForm = ({ onSignUpClick }) => {
     setOpenToast(true);
 
     localStorage['user'] = JSON.stringify(issueTokenResponse.data);
-    setAccessTokenFromLocalStorage();
+    setAccessTokenFromLocalStorage()
+
   }, [issueTokenResponse]);
 
   const handleClickOnForgotPass = () => {

diff --git a/frontend/src/pages/my-account/MyAccount.jsx b/frontend/src/pages/my-account/MyAccount.jsx
@@ -8,7 +8,7 @@ import useMyAccount from './useMyAccount.js';
 const TAB_ITEMS = ['Workshops', 'Presentations', 'Cart'];
 
 const MyAccount = () => {
-  const { talks, workshops, cart, removeFromCartHandler, toastData, openToast, setOpenToast } = useMyAccount();
+  const { talks, workshops, handleBuyCart, cart, removeFromCartHandler, toastData, openToast, setOpenToast } = useMyAccount();
   const [tabValue, setTabValue] = useState(TAB_ITEMS[0]);
 
   const handleChangeTab = (event, newValue) => {
@@ -60,7 +60,8 @@ const MyAccount = () => {
   };
 
   const List = ({ type, items }) => {
-    return items?.map((item, index) => (
+    if (items == null) return;
+    return items.map((item, index) => (
       <ItemCard
         key={index}
         isWorkshop={type === 'Workshops'}
@@ -119,7 +120,7 @@ const MyAccount = () => {
             <Divider sx={{ my: 2 }} />
             <Stack alignItems="center" gap={1}>
               <Typography>Total: {calculateTotalCost()} T</Typography>
-              <Button variant="contained" sx={{ px: 4 }} disabled={calculateTotalCost() === 0}>
+              <Button onClick={handleBuyCart} variant="contained" sx={{ px: 4 }} disabled={calculateTotalCost() === 0}>
                 Buy
               </Button>
             </Stack>