From 0c88af51b56771676be68c866ce6b7b359002954 Mon Sep 17 00:00:00 2001 From: Alireza Date: Wed, 29 Nov 2023 11:37:57 +0330 Subject: [PATCH] feat: loading spinners on my-account and payment-callback pages --- frontend/src/pages/my-account/MyAccount.jsx | 13 +- frontend/src/pages/my-account/useMyAccount.js | 4 + .../payment-callback/PaymentCallbackPage.jsx | 179 ++++++++++-------- .../usePaymentCallbackPage.js | 4 +- 4 files changed, 115 insertions(+), 85 deletions(-) diff --git a/frontend/src/pages/my-account/MyAccount.jsx b/frontend/src/pages/my-account/MyAccount.jsx index 480d0bf..85f882e 100644 --- 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, handleBuyCart, cart, removeFromCartHandler, toastData, openToast, setOpenToast } = useMyAccount(); + const { talks, workshops, handleBuyCart, buyButtonLoading, cart, removeFromCartHandler, toastData, openToast, setOpenToast } = useMyAccount(); const [tabValue, setTabValue] = useState(TAB_ITEMS[0]); const handleChangeTab = (event, newValue) => { @@ -73,13 +73,13 @@ const MyAccount = () => { endDate={item.end_date} presenterName={item.presenters?.join(", ") ?? item.teachers?.join(", ")} cost={item.cost} - hasProject={item.hasProject} + hasProject={item.has_project} prerequisites={item.prerequisites} syllabus={item.syllabus} capacity={item.capacity} remainingCapacity={item.remaining_capacity} - isFull={item.isFull} - addToCalendarLink={item.addToCalendarLink} + isFull={item.remaining_capacity === 0} + addToCalendarLink={item.google_calendar_link} onClickAddToCart={() => {}} onClickRemoveFromCart={() => removeFromCartHandler({ id: item.id, type: item.type })} /> @@ -121,8 +121,9 @@ const MyAccount = () => { Total: {calculateTotalCost()} T - diff --git a/frontend/src/pages/my-account/useMyAccount.js b/frontend/src/pages/my-account/useMyAccount.js index 6352892..190eb43 100644 --- a/frontend/src/pages/my-account/useMyAccount.js +++ b/frontend/src/pages/my-account/useMyAccount.js @@ -38,6 +38,7 @@ export default function useMyAccount() { const [cart, setCart] = useState() const [openToast, setOpenToast] = useState() const [toastData, setToastData] = useState() + const [buyButtonLoading, setBuyButtonLoading] = useState(false) const removeFromCartHandler = useCallback(({id, type}) => { removeFromUserCart({ @@ -48,6 +49,7 @@ export default function useMyAccount() { const handleBuyCart = useCallback(() => { postPaymentData({call_back: 'https://aaiss.ir/callback'}); + setBuyButtonLoading(true) }, [postPaymentData]); useEffect(() => { @@ -60,6 +62,7 @@ export default function useMyAccount() { message: "There was an Error Regarding Payment! Please Try Again Later", alertType: "error" }) + setBuyButtonLoading(false) return } @@ -219,6 +222,7 @@ export default function useMyAccount() { toastData, openToast, setOpenToast, + buyButtonLoading, handleBuyCart, }; } diff --git a/frontend/src/pages/payment-callback/PaymentCallbackPage.jsx b/frontend/src/pages/payment-callback/PaymentCallbackPage.jsx index a6b7a00..88441cf 100644 --- a/frontend/src/pages/payment-callback/PaymentCallbackPage.jsx +++ b/frontend/src/pages/payment-callback/PaymentCallbackPage.jsx @@ -1,85 +1,108 @@ -import { Button } from '@mui/material'; +import {Button, CircularProgress} from '@mui/material'; import SvgIcon from '@mui/material/SvgIcon'; import usePaymentCallbackPage from './usePaymentCallbackPage'; export default function PaymentCallbackPage() { - const { paymentStatus, paymentResultsData } = usePaymentCallbackPage(); + const {paymentStatus, isLoading, paymentResultsData} = usePaymentCallbackPage(); - const iconStyles = { - width: '150px', - height: '150px', - marginBottom: 'auto', - marginTop: 'auto', - }; + const iconStyles = { + width: '150px', + height: '150px', + marginBottom: 'auto', + marginTop: 'auto', + }; - return ( -
- {!paymentStatus && ( - - - - - - - )} - {paymentStatus && ( - - - - - - - )} -
- {paymentResultsData && - Object.keys(paymentResultsData).map((key, index) => ( -
-

{key}

-

{paymentResultsData[key]}

-
- ))} -
- -
- ); + return ( + <> + {isLoading && +
+
+ +
+
} + {!isLoading && +
+ {!paymentStatus && ( + + + + + + + )} + {paymentStatus && ( + + + + + + + )} +
+ {paymentResultsData && + Object.keys(paymentResultsData).map((key, index) => ( +
+

{key}

+

{paymentResultsData[key]}

+
+ ))} +
+ +
+ } + + ) + ; } diff --git a/frontend/src/pages/payment-callback/usePaymentCallbackPage.js b/frontend/src/pages/payment-callback/usePaymentCallbackPage.js index 7c45283..7b749cd 100644 --- a/frontend/src/pages/payment-callback/usePaymentCallbackPage.js +++ b/frontend/src/pages/payment-callback/usePaymentCallbackPage.js @@ -9,6 +9,7 @@ export default function usePaymentCallbackPage() { const [paymentStatus, setPaymentStatus] = useState(false); const [paymentResultsData, setPaymentResultsData] = useState(); + const [isLoading, setIsLoading] = useState(true) useEffect(() => { if (routeParams == null) return; @@ -47,12 +48,13 @@ export default function usePaymentCallbackPage() { else paymentResultTemp[key] = verifyPaymentData.data[key]; }); setPaymentResultsData(paymentResultTemp); - console.log(paymentResultTemp); + setIsLoading(false) }, [verifyPaymentData]); return { routeParams, paymentStatus, + isLoading, paymentResultsData, }; }