fix(frontend): localize onboarding tour to user

IgnisDa · IgnisDa · commit 0db1ec5e0b6e · 2025-03-16T10:54:48.000+05:30
diff --git a/apps/frontend/app/lib/state/general.tsx b/apps/frontend/app/lib/state/general.tsx
@@ -15,6 +15,7 @@ import { useNavigate } from "react-router";
 import { $path } from "safe-routes";
 import { match } from "ts-pattern";
 import { clientGqlService } from "../common";
+import { useDashboardLayoutData } from "../hooks";
 
 type OpenedSidebarLinks = {
 	media: boolean;
@@ -75,8 +76,6 @@ export enum OnboardingTourStepTargets {
 	OpenSettingsPreferences = "tour-step-open-settings-preferences",
 }
 
-export const ONBOARDING_COMPLETED_COOKIE_KEY = "OnboardingCompleted";
-
 const onboardingTourAtom = atomWithStorage<
 	| undefined
 	| {
@@ -89,6 +88,7 @@ const onboardingTourAtom = atomWithStorage<
 export const useOnboardingTour = () => {
 	const [tourState, setTourState] = useAtom(onboardingTourAtom);
 	const navigate = useNavigate();
+	const dashboardData = useDashboardLayoutData();
 	const { setOpenedSidebarLinks } = useOpenedSidebarLinks();
 	const isOnboardingTourInProgress =
 		isNumber(tourState?.currentStepIndex) && !tourState?.isCompleted;
@@ -114,7 +114,7 @@ export const useOnboardingTour = () => {
 				if (draft) draft.isCompleted = true;
 			}),
 		);
-		Cookies.set(ONBOARDING_COMPLETED_COOKIE_KEY, "true");
+		Cookies.set(dashboardData.onboardingTourCompletedCookie, "true");
 		navigate($path("/"));
 	};
 
diff --git a/apps/frontend/app/lib/utilities.server.ts b/apps/frontend/app/lib/utilities.server.ts
@@ -349,11 +349,20 @@ export const extendResponseHeaders = (
 		responseHeaders.append(key, value);
 };
 
-export const getEnhancedCookieName = async (path: string, request: Request) => {
+export const getEnhancedCookieName = async (
+	path: string,
+	name: string,
+	request: Request,
+) => {
 	const userDetails = await redirectIfNotAuthenticatedOrUpdated(request);
-	return `SearchParams__${userDetails.id}__${path}`;
+	return `${name}__${userDetails.id}__${path}`;
 };
 
+export const getSearchEnhancedCookieName = async (
+	path: string,
+	request: Request,
+) => getEnhancedCookieName(path, "SearchParams", request);
+
 export const redirectUsingEnhancedCookieSearchParams = async (
 	request: Request,
 	cookieName: string,
diff --git a/apps/frontend/app/routes/_dashboard.calendar.tsx b/apps/frontend/app/routes/_dashboard.calendar.tsx
@@ -24,7 +24,7 @@ import { MetadataDisplayItem } from "~/components/media";
 import { dayjsLib } from "~/lib/common";
 import { useAppSearchParam } from "~/lib/hooks";
 import {
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
 } from "~/lib/utilities.server";
@@ -37,7 +37,7 @@ const searchParamsSchema = z.object({
 export type SearchParams = z.infer<typeof searchParamsSchema>;
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-	const cookieName = await getEnhancedCookieName("calendar", request);
+	const cookieName = await getSearchEnhancedCookieName("calendar", request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const query = parseSearchQuery(request, searchParamsSchema);
 	const date = dayjsLib(query.date);
diff --git a/apps/frontend/app/routes/_dashboard.collections.$id._index.tsx b/apps/frontend/app/routes/_dashboard.collections.$id._index.tsx
@@ -54,7 +54,7 @@ import { useAppSearchParam, useUserPreferences } from "~/lib/hooks";
 import { useBulkEditCollection } from "~/lib/state/collection";
 import { useReviewEntity } from "~/lib/state/media";
 import {
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
@@ -87,7 +87,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 		params,
 		z.object({ id: z.string() }),
 	);
-	const cookieName = await getEnhancedCookieName(
+	const cookieName = await getSearchEnhancedCookieName(
 		`collections.details.${collectionId}`,
 		request,
 	);
diff --git a/apps/frontend/app/routes/_dashboard.collections.list.tsx b/apps/frontend/app/routes/_dashboard.collections.list.tsx
@@ -82,15 +82,18 @@ import {
 } from "~/lib/hooks";
 import {
 	createToastHeaders,
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	getUserCollectionsListRaw,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
 } from "~/lib/utilities.server";
 import type { Route } from "./+types/_dashboard.collections.list";
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-	const cookieName = await getEnhancedCookieName("collections.list", request);
+	const cookieName = await getSearchEnhancedCookieName(
+		"collections.list",
+		request,
+	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const [{ usersList }, userCollectionsList] = await Promise.all([
 		serverGqlService.authenticatedRequest(request, UsersListDocument, {}),
diff --git a/apps/frontend/app/routes/_dashboard.fitness.$entity.list.tsx b/apps/frontend/app/routes/_dashboard.fitness.$entity.list.tsx
@@ -92,7 +92,7 @@ import {
 	useOnboardingTour,
 } from "~/lib/state/general";
 import {
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
@@ -120,7 +120,10 @@ export const loader = async ({ params, request }: Route.LoaderArgs) => {
 		params,
 		z.object({ entity: z.nativeEnum(FitnessEntity) }),
 	);
-	const cookieName = await getEnhancedCookieName(`${entity}.list`, request);
+	const cookieName = await getSearchEnhancedCookieName(
+		`${entity}.list`,
+		request,
+	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const query = parseSearchQuery(request, searchParamsSchema);
 	const input: UserTemplatesOrWorkoutsListInput = {
diff --git a/apps/frontend/app/routes/_dashboard.fitness.exercises.list.tsx b/apps/frontend/app/routes/_dashboard.fitness.exercises.list.tsx
@@ -90,7 +90,7 @@ import {
 	useOnboardingTour,
 } from "~/lib/state/general";
 import {
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	redirectUsingEnhancedCookieSearchParams,
 	redirectWithToast,
@@ -125,7 +125,10 @@ const searchParamsSchema = z.object({
 export type SearchParams = z.infer<typeof searchParamsSchema>;
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-	const cookieName = await getEnhancedCookieName("exercises.list", request);
+	const cookieName = await getSearchEnhancedCookieName(
+		"exercises.list",
+		request,
+	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const query = parseSearchQuery(request, searchParamsSchema);
 	query.sortBy = query.sortBy ?? defaultFiltersValue.sortBy;
diff --git a/apps/frontend/app/routes/_dashboard.fitness.measurements.list.tsx b/apps/frontend/app/routes/_dashboard.fitness.measurements.list.tsx
@@ -50,7 +50,7 @@ import {
 import { useMeasurementsDrawerOpen } from "~/lib/state/fitness";
 import {
 	createToastHeaders,
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
 } from "~/lib/utilities.server";
@@ -65,7 +65,10 @@ export type SearchParams = z.infer<typeof searchParamsSchema>;
 const defaultTimeSpan = TimeSpan.Last30Days;
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-	const cookieName = await getEnhancedCookieName("measurements.list", request);
+	const cookieName = await getSearchEnhancedCookieName(
+		"measurements.list",
+		request,
+	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const query = parseSearchQuery(request, searchParamsSchema);
 	const now = dayjsLib();
diff --git a/apps/frontend/app/routes/_dashboard.media.$action.$lot.tsx b/apps/frontend/app/routes/_dashboard.media.$action.$lot.tsx
@@ -97,7 +97,7 @@ import {
 } from "~/lib/state/media";
 import {
 	getCoreDetails,
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
@@ -129,7 +129,7 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 			lot: z.string().transform((v) => getLot(v) as MediaLot),
 		}),
 	);
-	const cookieName = await getEnhancedCookieName(
+	const cookieName = await getSearchEnhancedCookieName(
 		`media.${action}.${lot}`,
 		request,
 	);
diff --git a/apps/frontend/app/routes/_dashboard.media.genre.$id._index.tsx b/apps/frontend/app/routes/_dashboard.media.genre.$id._index.tsx
@@ -20,7 +20,7 @@ import { MetadataDisplayItem } from "~/components/media";
 import { pageQueryParam } from "~/lib/common";
 import { useAppSearchParam } from "~/lib/hooks";
 import {
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
@@ -35,7 +35,10 @@ export type SearchParams = z.infer<typeof searchParamsSchema>;
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
 	const { id: genreId } = parseParameters(params, z.object({ id: z.string() }));
-	const cookieName = await getEnhancedCookieName(`genre.${genreId}`, request);
+	const cookieName = await getSearchEnhancedCookieName(
+		`genre.${genreId}`,
+		request,
+	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const query = parseSearchQuery(request, searchParamsSchema);
 	const [{ genreDetails }] = await Promise.all([
diff --git a/apps/frontend/app/routes/_dashboard.media.genre.list.tsx b/apps/frontend/app/routes/_dashboard.media.genre.list.tsx
@@ -48,7 +48,7 @@ import {
 	useGetRandomMantineColor,
 } from "~/lib/hooks";
 import {
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
@@ -63,7 +63,7 @@ const searchParamsSchema = z.object({
 export type SearchParams = z.infer<typeof searchParamsSchema>;
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-	const cookieName = await getEnhancedCookieName("genre.list", request);
+	const cookieName = await getSearchEnhancedCookieName("genre.list", request);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const query = parseSearchQuery(request, searchParamsSchema);
 	const [{ genresList }] = await Promise.all([
diff --git a/apps/frontend/app/routes/_dashboard.media.groups.$action.tsx b/apps/frontend/app/routes/_dashboard.media.groups.$action.tsx
@@ -61,7 +61,7 @@ import { useAppSearchParam, useCoreDetails } from "~/lib/hooks";
 import { useBulkEditCollection } from "~/lib/state/collection";
 import {
 	getCoreDetails,
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	serverGqlService,
 } from "~/lib/utilities.server";
@@ -87,7 +87,10 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 		params,
 		z.object({ action: z.nativeEnum(Action) }),
 	);
-	const cookieName = await getEnhancedCookieName(`groups.${action}`, request);
+	const cookieName = await getSearchEnhancedCookieName(
+		`groups.${action}`,
+		request,
+	);
 	const schema = z.object({
 		query: z.string().optional(),
 		[pageQueryParam]: zodIntAsString.default("1"),
diff --git a/apps/frontend/app/routes/_dashboard.media.people.$action.tsx b/apps/frontend/app/routes/_dashboard.media.people.$action.tsx
@@ -60,7 +60,7 @@ import { pageQueryParam, zodCollectionFilter } from "~/lib/common";
 import { useAppSearchParam, useCoreDetails } from "~/lib/hooks";
 import { useBulkEditCollection } from "~/lib/state/collection";
 import {
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectToFirstPageIfOnInvalidPage,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
@@ -94,7 +94,10 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
 		params,
 		z.object({ action: z.nativeEnum(Action) }),
 	);
-	const cookieName = await getEnhancedCookieName(`people.${action}`, request);
+	const cookieName = await getSearchEnhancedCookieName(
+		`people.${action}`,
+		request,
+	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const schema = z.object({
 		query: z.string().optional(),
diff --git a/apps/frontend/app/routes/_dashboard.settings.profile-and-sharing.tsx b/apps/frontend/app/routes/_dashboard.settings.profile-and-sharing.tsx
@@ -64,10 +64,7 @@ import {
 	useIsOnboardingTourCompleted,
 	useUserDetails,
 } from "~/lib/hooks";
-import {
-	ONBOARDING_COMPLETED_COOKIE_KEY,
-	useOnboardingTour,
-} from "~/lib/state/general";
+import { useOnboardingTour } from "~/lib/state/general";
 import {
 	createToastHeaders,
 	getDecodedJwt,
@@ -266,7 +263,9 @@ export default function Page() {
 										variant="default"
 										onClick={() => {
 											startOnboardingTour();
-											Cookies.remove(ONBOARDING_COMPLETED_COOKIE_KEY);
+											Cookies.remove(
+												dashboardData.onboardingTourCompletedCookie,
+											);
 											navigate("/");
 										}}
 									>
diff --git a/apps/frontend/app/routes/_dashboard.settings.users.tsx b/apps/frontend/app/routes/_dashboard.settings.users.tsx
@@ -53,7 +53,7 @@ import { openConfirmationModal } from "~/lib/common";
 import { useConfirmSubmit, useCoreDetails } from "~/lib/hooks";
 import {
 	createToastHeaders,
-	getEnhancedCookieName,
+	getSearchEnhancedCookieName,
 	redirectIfNotAuthenticatedOrUpdated,
 	redirectUsingEnhancedCookieSearchParams,
 	serverGqlService,
@@ -69,7 +69,10 @@ export type SearchParams = z.infer<typeof searchParamsSchema>;
 export const loader = async ({ request }: Route.LoaderArgs) => {
 	const userDetails = await redirectIfNotAuthenticatedOrUpdated(request);
 	if (userDetails.lot !== UserLot.Admin) throw redirect($path("/"));
-	const cookieName = await getEnhancedCookieName("settings.users", request);
+	const cookieName = await getSearchEnhancedCookieName(
+		"settings.users",
+		request,
+	);
 	await redirectUsingEnhancedCookieSearchParams(request, cookieName);
 	const query = parseSearchQuery(request, searchParamsSchema);
 	const [{ usersList }] = await Promise.all([
diff --git a/apps/frontend/app/routes/_dashboard.tsx b/apps/frontend/app/routes/_dashboard.tsx
@@ -134,7 +134,6 @@ import {
 import { useBulkEditCollection } from "~/lib/state/collection";
 import { useMeasurementsDrawerOpen } from "~/lib/state/fitness";
 import {
-	ONBOARDING_COMPLETED_COOKIE_KEY,
 	OnboardingTourStepTargets,
 	useOnboardingTour,
 	useOpenedSidebarLinks,
@@ -149,6 +148,7 @@ import {
 	getCookieValue,
 	getCoreDetails,
 	getDecodedJwt,
+	getEnhancedCookieName,
 	getUserCollectionsList,
 	getUserPreferences,
 	redirectIfNotAuthenticatedOrUpdated,
@@ -175,9 +175,14 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
 	const currentColorScheme = await colorSchemeCookie.parse(
 		request.headers.get("cookie") || "",
 	);
+	const onboardingTourCompletedCookie = await getEnhancedCookieName(
+		"empty",
+		"OnboardingCompleted",
+		request,
+	);
 	const isOnboardingTourCompleted = getCookieValue(
 		request,
-		ONBOARDING_COMPLETED_COOKIE_KEY,
+		onboardingTourCompletedCookie,
 	);
 
 	const decodedCookie = getDecodedJwt(request);
@@ -201,6 +206,7 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
 		isAccessLinkSession,
 		desktopSidebarCollapsed,
 		isOnboardingTourCompleted,
+		onboardingTourCompletedCookie,
 	};
 };
 
