2023-06-23 20:07:49 +02:00
|
|
|
import { Button, Stack, Text } from "@mantine/core";
|
2022-04-25 15:15:17 +02:00
|
|
|
import { useModals } from "@mantine/modals";
|
|
|
|
|
import { ModalsContextProps } from "@mantine/modals/lib/context";
|
2022-10-09 22:30:32 +02:00
|
|
|
import moment from "moment";
|
2022-04-25 15:15:17 +02:00
|
|
|
import { useRouter } from "next/router";
|
2023-07-20 15:32:07 +02:00
|
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
|
import useTranslate, {
|
|
|
|
|
translateOutsideContext,
|
|
|
|
|
} from "../../../hooks/useTranslate.hook";
|
2022-10-18 14:27:14 +02:00
|
|
|
import { Share } from "../../../types/share.type";
|
2023-06-23 20:07:49 +02:00
|
|
|
import CopyTextField from "../CopyTextField";
|
2022-10-14 18:14:46 -04:00
|
|
|
|
2023-01-11 13:06:38 +01:00
|
|
|
const showCompletedUploadModal = (
|
|
|
|
|
modals: ModalsContextProps,
|
|
|
|
|
share: Share,
|
2023-08-17 14:47:58 +02:00
|
|
|
appUrl: string,
|
2023-01-11 13:06:38 +01:00
|
|
|
) => {
|
2023-07-20 15:32:07 +02:00
|
|
|
const t = translateOutsideContext();
|
2022-04-25 15:15:17 +02:00
|
|
|
return modals.openModal({
|
|
|
|
|
closeOnClickOutside: false,
|
|
|
|
|
withCloseButton: false,
|
|
|
|
|
closeOnEscape: false,
|
2023-07-20 15:32:07 +02:00
|
|
|
title: t("upload.modal.completed.share-ready"),
|
2023-01-11 13:06:38 +01:00
|
|
|
children: <Body share={share} appUrl={appUrl} />,
|
2022-04-25 15:15:17 +02:00
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2023-01-11 13:06:38 +01:00
|
|
|
const Body = ({ share, appUrl }: { share: Share; appUrl: string }) => {
|
2022-04-25 15:15:17 +02:00
|
|
|
const modals = useModals();
|
|
|
|
|
const router = useRouter();
|
2023-07-20 15:32:07 +02:00
|
|
|
const t = useTranslate();
|
2023-01-11 13:06:38 +01:00
|
|
|
|
2023-07-22 16:09:10 +02:00
|
|
|
const link = `${appUrl}/s/${share.id}`;
|
2023-06-23 20:07:49 +02:00
|
|
|
|
2022-04-25 15:15:17 +02:00
|
|
|
return (
|
2022-10-14 11:59:40 +02:00
|
|
|
<Stack align="stretch">
|
2023-06-23 20:07:49 +02:00
|
|
|
<CopyTextField link={link} />
|
2022-04-25 15:15:17 +02:00
|
|
|
<Text
|
|
|
|
|
size="xs"
|
|
|
|
|
sx={(theme) => ({
|
|
|
|
|
color: theme.colors.gray[6],
|
|
|
|
|
})}
|
|
|
|
|
>
|
2022-10-16 00:08:37 +02:00
|
|
|
{/* If our share.expiration is timestamp 0, show a different message */}
|
|
|
|
|
{moment(share.expiration).unix() === 0
|
2023-07-20 15:32:07 +02:00
|
|
|
? t("upload.modal.completed.never-expires")
|
|
|
|
|
: t("upload.modal.completed.expires-on", {
|
|
|
|
|
expiration: moment(share.expiration).format("LLL"),
|
|
|
|
|
})}
|
2022-04-25 15:15:17 +02:00
|
|
|
</Text>
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
onClick={() => {
|
|
|
|
|
modals.closeAll();
|
|
|
|
|
router.push("/upload");
|
|
|
|
|
}}
|
|
|
|
|
>
|
2023-07-20 15:32:07 +02:00
|
|
|
<FormattedMessage id="common.button.done" />
|
2022-04-25 15:15:17 +02:00
|
|
|
</Button>
|
2022-10-10 22:14:23 +02:00
|
|
|
</Stack>
|
2022-04-25 15:15:17 +02:00
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default showCompletedUploadModal;
|
