49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { FC, useCallback, useEffect, useState } from 'react';
|
|
import Loading from 'react-loading';
|
|
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
|
import { timer } from '@gitroom/helpers/utils/timer';
|
|
import { useToaster } from '@gitroom/react/toaster/toaster';
|
|
|
|
export const CheckPayment: FC<{ check: string; mutate: () => void }> = (props) => {
|
|
const [showLoader, setShowLoader] = useState(true);
|
|
const fetch = useFetch();
|
|
const toaster = useToaster();
|
|
|
|
const checkSubscription = useCallback(async () => {
|
|
const {status} = await (await fetch('/billing/check/' + props.check)).json();
|
|
if (status === 0) {
|
|
await timer(1000);
|
|
return checkSubscription();
|
|
}
|
|
|
|
if (status === 1) {
|
|
toaster.show(
|
|
'We could not validate your payment method, please try again',
|
|
'warning'
|
|
);
|
|
setShowLoader(false);
|
|
}
|
|
|
|
if (status === 2) {
|
|
setShowLoader(false);
|
|
props.mutate();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
checkSubscription();
|
|
}, []);
|
|
|
|
if (showLoader) {
|
|
return (
|
|
<div className="fixed bg-black/40 w-full h-full flex justify-center items-center z-[400]">
|
|
<div>
|
|
<Loading type="spin" color="#612AD5" height={250} width={250} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|