Update NotFoundPart.tsx

src/pages/parts/errors/NotFoundPart.tsx

@@ -1,6 +1,7 @@
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 
+import { isExtensionActiveCached } from "@/backend/extension/messaging";
 import { Button } from "@/components/buttons/Button";
 import { Icons } from "@/components/Icon";
 import { IconPill } from "@/components/layout/IconPill";
@@ -8,9 +9,19 @@ import { Navigation } from "@/components/layout/Navigation";
 import { Title } from "@/components/text/Title";
 import { Paragraph } from "@/components/utils/Text";
 import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout";
+import { conf } from "@/setup/config";
+import { useOnboardingStore } from "@/stores/onboarding";
+import { usePreferencesStore } from "@/stores/preferences";
 
 export function NotFoundPart() {
   const { t } = useTranslation();
+  const setOnboardingCompleted = useOnboardingStore((s) => s.setCompleted);
+  const febboxKey = usePreferencesStore((s) => s.febboxKey);
+
+  function handleOnboarding() {
+    setOnboardingCompleted(false);
+    window.location.reload();
+  }
 
   return (
     <div className="relative flex flex-1 flex-col">
@@ -42,6 +53,21 @@ export function NotFoundPart() {
                 {t("notFound.reloadButton")}
               </Button>
             </div>
+            {(!isExtensionActiveCached() || !febboxKey) &&
+            conf().HAS_ONBOARDING ? (
+              <div className="flex flex-col max-w-md gap-3 items-center py-3">
+                <Paragraph>
+                  {t("player.scraping.notFound.onboarding")}
+                </Paragraph>
+                <Button
+                  onClick={() => handleOnboarding()}
+                  theme="purple"
+                  className="w-fit"
+                >
+                  {t("player.scraping.notFound.onboardingButton")}
+                </Button>
+              </div>
+            ) : null}
           </ErrorContainer>
         </ErrorLayout>
       </div>