import { ReactNode } from "react"; import { Trans, useTranslation } from "react-i18next"; import { useAsyncFn, useInterval } from "react-use"; import { isAllowedExtensionVersion } from "@/backend/extension/compatibility"; import { extensionInfo, sendPage } from "@/backend/extension/messaging"; import { Button } from "@/components/buttons/Button"; import { Icon, Icons } from "@/components/Icon"; import { Loading } from "@/components/layout/Loading"; import { Stepper } from "@/components/layout/Stepper"; import { CenterContainer } from "@/components/layout/ThinContainer"; import { Heading2, Paragraph } from "@/components/utils/Text"; import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; import { useNavigateOnboarding, useRedirectBack, } from "@/pages/onboarding/onboardingHooks"; import { Card, Link } from "@/pages/onboarding/utils"; import { PageTitle } from "@/pages/parts/util/PageTitle"; import { conf } from "@/setup/config"; type ExtensionStatus = | "unknown" | "failed" | "disallowed" | "noperms" | "outdated" | "success"; async function getExtensionState(): Promise { const info = await extensionInfo(); if (!info) return "unknown"; // cant talk to extension if (!info.success) return "failed"; // extension failed to respond if (!info.allowed) return "disallowed"; // extension is not enabled on this page if (!info.hasPermission) return "noperms"; // extension has no perms to do it's tasks if (!isAllowedExtensionVersion(info.version)) return "outdated"; // extension is too old return "success"; // no problems } export function ExtensionStatus(props: { status: ExtensionStatus; loading: boolean; }) { const { t } = useTranslation(); let content: ReactNode = null; if (props.loading || props.status === "unknown") content = ( <>

{t("onboarding.extension.status.loading")}

); if (props.status === "disallowed" || props.status === "noperms") content = ( <>

{t("onboarding.extension.status.disallowed")}

); else if (props.status === "failed") content =

{t("onboarding.extension.status.failed")}

; else if (props.status === "outdated") content =

{t("onboarding.extension.status.outdated")}

; else if (props.status === "success") content = (

{t("onboarding.extension.status.success")}

); return ( <>
{content}

, }} />

); } export function OnboardingExtensionPage() { const { t } = useTranslation(); const navigate = useNavigateOnboarding(); const { completeAndRedirect } = useRedirectBack(); const installLink = conf().ONBOARDING_EXTENSION_INSTALL_LINK; const [{ loading, value }, exec] = useAsyncFn( async (triggeredManually: boolean = false) => { const status = await getExtensionState(); if (status === "success" && triggeredManually) completeAndRedirect(); return status; }, [completeAndRedirect], ); useInterval(exec, 1000); return ( {t("onboarding.extension.title")} {t("onboarding.extension.explainer")} {installLink ? ( {t("onboarding.extension.link")} ) : null}
{value === "success" ? ( ) : null}
); }