diff --git a/apps/infoalloggi/src/components/onboard_tutorial.tsx b/apps/infoalloggi/src/components/onboard_tutorial.tsx new file mode 100644 index 0000000..c1d1f97 --- /dev/null +++ b/apps/infoalloggi/src/components/onboard_tutorial.tsx @@ -0,0 +1,123 @@ +"use client"; +import { getCookie, setCookie } from "cookies-next/client"; +import { add } from "date-fns"; +import { ArrowRight, CheckCircle } from "lucide-react"; +import { useEffect, useState } from "react"; +import { Button } from "~/components/ui/button"; +import { useTranslation } from "~/providers/I18nProvider"; +import { + AlertDialog, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "./ui/alert-dialog"; + +const COOKIE_KEY = "onboard_tutorial_shown"; + +export const OnboardTutorial = () => { + const { t } = useTranslation(); + const hasCookie = getCookie(COOKIE_KEY) === "true"; + + const handleClose = () => { + setCookie(COOKIE_KEY, "true", { + expires: add(new Date(), { days: 30 }), + }); + setOpen(false); + }; + + const [open, setOpen] = useState(false); + + useEffect(() => { + if (!hasCookie) { + const timer = setTimeout(() => { + setOpen(true); + }, 1000); // 1 second delay + return () => clearTimeout(timer); + } + }, [hasCookie]); + + return ( + + + + + + {t.onboarding_tutorial.title} + + + descrizione + +
+

+ {t.onboarding_tutorial.sub_title} +

+ +
+
+
+ 1 +
+
+

+ {t.onboarding_tutorial.step1_title} +

+

+ {t.onboarding_tutorial.step1_desc} +

+
+
+ +
+
+ 2 +
+
+

+ {t.onboarding_tutorial.step2_title} +

+

+ {t.onboarding_tutorial.step2_desc} +

+
+
+ +
+
+ 3 +
+
+

+ {t.onboarding_tutorial.step3_title} +

+

+ {t.onboarding_tutorial.step3_desc} +

+
+
+
+ +
+

+ 💡 {t.onboarding_tutorial.tip_title}{" "} + {t.onboarding_tutorial.tip} +

+
+
+
+ + + +
+
+ ); +}; diff --git a/apps/infoalloggi/src/i18n/en.ts b/apps/infoalloggi/src/i18n/en.ts index c8794cd..6993b5f 100644 --- a/apps/infoalloggi/src/i18n/en.ts +++ b/apps/infoalloggi/src/i18n/en.ts @@ -1333,4 +1333,19 @@ The Stable Rent service, ideal for those with demonstrable work references and f verificata: "Email verified", verificata_desc: "You can now access your account.", }, + onboarding_tutorial: { + title: "Welcome to Infoalloggi!", + sub_title: "Follow these simple steps to activate the service:", + step1_title: "Verify the pre-filled data", + step1_desc: + "We have pre-filled some fields, please check that everything is correct.", + step2_title: "Complete the missing fields", + step2_desc: "Add the required information to complete your request.", + step3_title: "Proceed to payment", + step3_desc: + "Once the data is completed, you can proceed with the activation of the service.", + tip_title: "Tip:", + tip: "Make sure the entered data matches your search to get the best results.", + button_text: "Got it, let's get started!", + }, }; diff --git a/apps/infoalloggi/src/i18n/it.ts b/apps/infoalloggi/src/i18n/it.ts index bf989a8..33443a5 100644 --- a/apps/infoalloggi/src/i18n/it.ts +++ b/apps/infoalloggi/src/i18n/it.ts @@ -1331,4 +1331,20 @@ export const it: LangDict = { verificata: "Email verificata", verificata_desc: "Ora puoi accedere al tuo account.", }, + onboarding_tutorial: { + title: "Benvenuto in Infoalloggi!", + sub_title: "Segui questi semplici passi per attivare il servizio:", + step1_title: "Verifica i dati precompilati", + step1_desc: + "Abbiamo precompilato alcuni campi, controlla che tutto sia corretto.", + step2_title: "Completa i campi mancanti", + step2_desc: + "Aggiungi le informazioni richieste per completare la tua richiesta.", + step3_title: "Procedi al pagamento", + step3_desc: + "Una volta completati i dati, potrai procedere con l'attivazione del servizio.", + tip_title: "Suggerimento:", + tip: "Assicurati che i dati inseriti corrispondano alla tua ricerca per ottenere i migliori risultati.", + button_text: "Ho capito, iniziamo!", + }, }; diff --git a/apps/infoalloggi/src/i18n/locales.ts b/apps/infoalloggi/src/i18n/locales.ts index 6b0d9b0..4df5431 100644 --- a/apps/infoalloggi/src/i18n/locales.ts +++ b/apps/infoalloggi/src/i18n/locales.ts @@ -769,6 +769,19 @@ export type LangDict = { error: string; download: string; }; + onboarding_tutorial: { + title: string; + sub_title: string; + step1_title: string; + step1_desc: string; + step2_title: string; + step2_desc: string; + step3_title: string; + step3_desc: string; + tip_title: string; + tip: string; + button_text: string; + }; }; export type Locales = "it" | "en"; diff --git a/apps/infoalloggi/src/pages/servizio/onboard/[servizioId].tsx b/apps/infoalloggi/src/pages/servizio/onboard/[servizioId].tsx index 75ee221..76cec00 100644 --- a/apps/infoalloggi/src/pages/servizio/onboard/[servizioId].tsx +++ b/apps/infoalloggi/src/pages/servizio/onboard/[servizioId].tsx @@ -1,6 +1,7 @@ import type { GetServerSideProps } from "next"; import { AreaRiservataLayout } from "~/components/Layout"; import { LoadingPage } from "~/components/loading"; +import { OnboardTutorial } from "~/components/onboard_tutorial"; import { Status500 } from "~/components/status-page"; import { FormNewServizioAcquisto } from "~/forms/FormNewServizioAcquisto"; import type { NextPageWithLayout } from "~/pages/_app"; @@ -34,7 +35,7 @@ const OnboardServizio: NextPageWithLayout = ({ {locale === "it" ? "Dettagli del servizio" : "Service Details"} - + );