Skip to content

Commit

Permalink
Merge pull request #40 from AAISS/fix/small-defects
Browse files Browse the repository at this point in the history 
feat: loading spinners on my-account and payment-callback pages
  • Loading branch information
@AlirezaYousefpourM
AlirezaYousefpourM authored Nov 29, 2023
2 parents 01e6897 + 0c88af5 commit eadb91a
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 85 deletions.
13 changes: 7 additions & 6 deletions frontend/src/pages/my-account/MyAccount.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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 })}
/>
Expand Down Expand Up @@ -121,8 +121,9 @@ const MyAccount = () => {
<Divider sx={{ my: 2 }} />
<Stack alignItems="center" gap={1}>
<Typography>Total: {calculateTotalCost()} T</Typography>
<Button onClick={handleBuyCart} variant="contained" sx={{ px: 4 }} disabled={calculateTotalCost() === 0}>
Buy
<Button onClick={handleBuyCart} variant="contained" sx={{ px: 4 }} disabled={buyButtonLoading || calculateTotalCost() === 0}>
{!buyButtonLoading && "Buy"}
{buyButtonLoading && <CircularProgress/>}
</Button>
</Stack>
</>
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/pages/my-account/useMyAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -48,6 +49,7 @@ export default function useMyAccount() {

const handleBuyCart = useCallback(() => {
postPaymentData({call_back: 'https://aaiss.ir/callback'});
setBuyButtonLoading(true)
}, [postPaymentData]);

useEffect(() => {
Expand All @@ -60,6 +62,7 @@ export default function useMyAccount() {
message: "There was an Error Regarding Payment! Please Try Again Later",
alertType: "error"
})
setBuyButtonLoading(false)
return
}

Expand Down Expand Up @@ -219,6 +222,7 @@ export default function useMyAccount() {
toastData,
openToast,
setOpenToast,
buyButtonLoading,
handleBuyCart,
};
}
179 changes: 101 additions & 78 deletions frontend/src/pages/payment-callback/PaymentCallbackPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<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>
<Button variant="contained" sx={{ mt: 5 }} href="/">
Back to Home Page
</Button>
</section>
);
return (
<>
{isLoading &&
<section style={{
minHeight: '60vh',
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<div style={{
flex: '1',
textAlign: "center",
}}>
<CircularProgress/>
</div>
</section>}
{!isLoading &&
<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 style={{
padding: '0px 0px 5px 20px',
}}>{paymentResultsData[key]}</p>
</div>
))}
</div>
<Button variant="contained" sx={{mt: 5}} href="/">
Back to Home Page
</Button>
</section>
}
</>
)
;
}
4 changes: 3 additions & 1 deletion frontend/src/pages/payment-callback/usePaymentCallbackPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
};
}

0 comments on commit eadb91a

Please sign in to comment.