[web] Streamline the family portal redirect (#3181)

web/apps/photos/src/components/pages/gallery/PlanSelector.tsx

@@ -1,5 +1,6 @@
 import log from "@/base/log";
 import { bytesInGB, formattedStorageByteSize } from "@/new/photos/utils/units";
+import { openURL } from "@/new/photos/utils/web";
 import {
     FlexWrapper,
     FluidContainer,
@@ -31,6 +32,7 @@ import { GalleryContext } from "pages/gallery";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { Trans } from "react-i18next";
 import billingService, { type PlansResponse } from "services/billingService";
+import { getFamilyPortalRedirectURL } from "services/userService";
 import { Plan, Subscription } from "types/billing";
 import { SetLoading } from "types/gallery";
 import { BonusData } from "types/user";
@@ -46,7 +48,6 @@ import {
     isSubscriptionActive,
     isSubscriptionCancelled,
     isUserSubscribedPlan,
-    manageFamilyMethod,
     planForSubscription,
     planSelectionOutcome,
     updatePaymentMethod,
@@ -686,9 +687,22 @@ function ManageSubscription({
     closeModal,
     setLoading,
 }: ManageSubscriptionProps) {
-    const appContext = useContext(AppContext);
-    const openFamilyPortal = () =>
-        manageFamilyMethod(appContext.setDialogMessage, setLoading);
+    const { setDialogMessage } = useContext(AppContext);
+
+    const openFamilyPortal = async () => {
+        setLoading(true);
+        try {
+            openURL(await getFamilyPortalRedirectURL());
+        } catch (e) {
+            log.error("Could not redirect to family portal", e);
+            setDialogMessage({
+                title: t("ERROR"),
+                content: t("UNKNOWN_ERROR"),
+                close: { variant: "critical" },
+            });
+        }
+        setLoading(false);
+    };
 
     return (
         <Stack spacing={1}>

web/apps/photos/src/constants/redirects.ts

@@ -1,9 +0,0 @@
-export enum REDIRECTS {
-    FAMILIES = "families",
-}
-
-export const getRedirectURL = (redirect: REDIRECTS) => {
-    const url = new URL("https://web.ente.io");
-    url.searchParams.set("redirect", redirect);
-    return url.href;
-};

web/apps/photos/src/pages/_app.tsx

@@ -23,7 +23,6 @@ import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { MessageContainer } from "@ente/shared/components/MessageContainer";
-import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { useLocalState } from "@ente/shared/hooks/useLocalState";
 import HTTPService from "@ente/shared/network/HTTPService";
 import {
@@ -43,7 +42,6 @@ import ArrowForward from "@mui/icons-material/ArrowForward";
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import Notification from "components/Notification";
-import { REDIRECTS } from "constants/redirects";
 import { t } from "i18next";
 import isElectron from "is-electron";
 import type { AppProps } from "next/app";
@@ -67,8 +65,6 @@ import {
     getUpdateReadyToInstallMessage,
 } from "utils/ui";
 
-const redirectMap = new Map([[REDIRECTS.FAMILIES, getFamilyPortalRedirectURL]]);
-
 /**
  * Properties available via {@link AppContext} to the Photos app's React tree.
  */
@@ -105,7 +101,6 @@ export default function App({ Component, pageProps }: AppProps) {
         typeof window !== "undefined" && !window.navigator.onLine,
     );
     const [showNavbar, setShowNavBar] = useState(false);
-    const [redirectName, setRedirectName] = useState<string>(null);
     const [mapEnabled, setMapEnabled] = useState(false);
     const isLoadingBarRunning = useRef(false);
     const loadingBar = useRef(null);
@@ -203,44 +198,23 @@ export default function App({ Component, pageProps }: AppProps) {
     const setUserOffline = () => setOffline(true);
 
     useEffect(() => {
-        const redirectTo = async (redirect) => {
-            if (
-                redirectMap.has(redirect) &&
-                typeof redirectMap.get(redirect) === "function"
-            ) {
-                const redirectAction = redirectMap.get(redirect);
-                window.location.href = await redirectAction();
-            } else {
-                log.error(`invalid redirection ${redirect}`);
-            }
-        };
-
         const query = new URLSearchParams(window.location.search);
-        const redirectName = query.get("redirect");
-        if (redirectName) {
-            const user = getData(LS_KEYS.USER);
-            if (user?.token) {
-                redirectTo(redirectName);
-            } else {
-                setRedirectName(redirectName);
-            }
-        }
+        const needsFamilyRedirect = query.get("redirect") == "families";
+        if (needsFamilyRedirect && getData(LS_KEYS.USER)?.token)
+            redirectToFamilyPortal();
 
         router.events.on("routeChangeStart", (url: string) => {
-            const newPathname = url.split("?")[0] as PAGES;
+            const newPathname = url.split("?")[0];
             if (window.location.pathname !== newPathname) {
                 setLoading(true);
             }
 
-            if (redirectName) {
-                const user = getData(LS_KEYS.USER);
-                if (user?.token) {
-                    redirectTo(redirectName);
+            if (needsFamilyRedirect && getData(LS_KEYS.USER)?.token) {
+                redirectToFamilyPortal();
 
-                    // https://github.com/vercel/next.js/issues/2476#issuecomment-573460710
-                    // eslint-disable-next-line no-throw-literal
-                    throw "Aborting route change, redirection in process....";
-                }
+                // https://github.com/vercel/next.js/issues/2476#issuecomment-573460710
+                // eslint-disable-next-line no-throw-literal
+                throw "Aborting route change, redirection in process....";
             }
         });
 
@@ -255,7 +229,7 @@ export default function App({ Component, pageProps }: AppProps) {
             window.removeEventListener("online", setUserOnline);
             window.removeEventListener("offline", setUserOffline);
         };
-    }, [redirectName]);
+    }, []);
 
     useEffect(() => {
         setMessageDialogView(true);
@@ -384,3 +358,8 @@ export default function App({ Component, pageProps }: AppProps) {
         </>
     );
 }
+
+const redirectToFamilyPortal = () =>
+    void getFamilyPortalRedirectURL().then((url) => {
+        window.location.href = url;
+    });

web/apps/photos/src/utils/billing/index.ts

@@ -1,8 +1,6 @@
 import log from "@/base/log";
-import { openURL } from "@/new/photos/utils/web";
 import { SetDialogBoxAttributes } from "@ente/shared/components/DialogBox/types";
 import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
-import { REDIRECTS, getRedirectURL } from "constants/redirects";
 import { t } from "i18next";
 import type { NextRouter } from "next/router";
 import billingService from "services/billingService";
@@ -247,26 +245,6 @@ export async function updatePaymentMethod(
     }
 }
 
-export async function manageFamilyMethod(
-    setDialogMessage: SetDialogBoxAttributes,
-    setLoading: SetLoading,
-) {
-    try {
-        setLoading(true);
-        const familyPortalRedirectURL = getRedirectURL(REDIRECTS.FAMILIES);
-        openURL(familyPortalRedirectURL);
-    } catch (e) {
-        log.error("failed to redirect to family portal", e);
-        setDialogMessage({
-            title: t("ERROR"),
-            content: t("UNKNOWN_ERROR"),
-            close: { variant: "critical" },
-        });
-    } finally {
-        setLoading(false);
-    }
-}
-
 export async function checkSubscriptionPurchase(
     setDialogMessage: SetDialogBoxAttributes,
     router: NextRouter,