101 lines
2.5 KiB
JavaScript
101 lines
2.5 KiB
JavaScript
import { Button, Result, Spin, notification } from "antd";
|
|
import { Link, useParams, useNavigate } from "react-router-dom";
|
|
import { Constants, myFetch } from "../../../../utils";
|
|
import { useEffect, useState } from "react";
|
|
import MyCenteredContainer from "../../../../Components/MyContainer";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function StoreCalendarAuth() {
|
|
const { t } = useTranslation();
|
|
const [notificationApi, notificationContextHolder] =
|
|
notification.useNotification();
|
|
|
|
const { status } = useParams();
|
|
|
|
const [isRequesting, setIsRequesting] = useState(true);
|
|
const [storeId, setStoreId] = useState("");
|
|
|
|
useEffect(() => {
|
|
myFetch({
|
|
url: "/calendar/store",
|
|
method: "GET",
|
|
notificationApi: notificationApi,
|
|
t: t,
|
|
})
|
|
.then((res) => {
|
|
setIsRequesting(false);
|
|
setStoreId(res.storeId);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}, [status]);
|
|
|
|
if (isRequesting) {
|
|
return (
|
|
<MyCenteredContainer>
|
|
<Spin size="large" />
|
|
</MyCenteredContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{notificationContextHolder}
|
|
|
|
<Result
|
|
status={status === "finish" ? "success" : "error"}
|
|
title={
|
|
status === "finish"
|
|
? t("calendar.authFinish.title")
|
|
: t("calendar.authFailed.title")
|
|
}
|
|
subTitle={
|
|
status === "finish"
|
|
? t("calendar.authFinish.description")
|
|
: t("calendar.authFailed.description")
|
|
}
|
|
extra={[
|
|
<div key="1">
|
|
<Link to={`${Constants.ROUTE_PATHS.STORE.CALENDAR}/${storeId}`}>
|
|
<Button>
|
|
{status === "finish"
|
|
? t("calendar.authFinish.button")
|
|
: t("calendar.authFailed.button")}
|
|
</Button>
|
|
</Link>
|
|
|
|
{status === "finish" && <CountdownRedirect storeId={storeId} />}
|
|
</div>,
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function CountdownRedirect({ storeId }) {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
const [count, setCount] = useState(5);
|
|
|
|
useEffect(() => {
|
|
if (count > 0) {
|
|
const timer = setTimeout(() => {
|
|
setCount(count - 1);
|
|
}, 1000);
|
|
return () => clearTimeout(timer);
|
|
} else {
|
|
navigate(`${Constants.ROUTE_PATHS.STORE.CALENDAR}/${storeId}`);
|
|
}
|
|
}, [count, navigate]);
|
|
|
|
return (
|
|
<>
|
|
<p style={{ paddingTop: 10, color: "#8c8c8c" }}>
|
|
{t("calendar.authFinish.countDownRedirect", { countDown: count })}
|
|
</p>
|
|
</>
|
|
);
|
|
}
|