Inline

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

@@ -43,6 +43,7 @@ import type {
 } from "services/billingService";
 import billingService, {
     getPlansData,
+    redirectToCustomerPortal,
     redirectToPaymentsApp,
 } from "services/billingService";
 import { getFamilyPortalRedirectURL } from "services/userService";
@@ -59,7 +60,6 @@ import {
     isSubscriptionCancelled,
     isUserSubscribedPlan,
     planSelectionOutcome,
-    updatePaymentMethod,
 } from "utils/billing";
 
 interface PlanSelectorProps {
@@ -816,11 +816,19 @@ function StripeSubscriptionOptions({
         }
     };
 
-    const openManagementPortal = updatePaymentMethod.bind(
-        null,
-        appContext.setDialogMessage,
-        setLoading,
-    );
+    const openManagementPortal = async () => {
+        try {
+            setLoading(true);
+            await redirectToCustomerPortal();
+        } catch (error) {
+            setLoading(false);
+            setDialogMessage({
+                title: t("error"),
+                content: t("generic_error_retry"),
+                close: { variant: "critical" },
+            });
+        }
+    };
 
     return (
         <>

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

@@ -144,23 +144,6 @@ export function isSubscriptionPastDue(subscription: Subscription) {
 export const isPopularPlan = (plan: Plan) =>
     plan.storage === 100 * 1024 * 1024 * 1024; /* 100 GB */
 
-export async function updatePaymentMethod(
-    setDialogMessage: SetDialogBoxAttributes,
-    setLoading: SetLoading,
-) {
-    try {
-        setLoading(true);
-        await redirectToCustomerPortal();
-    } catch (error) {
-        setLoading(false);
-        setDialogMessage({
-            title: t("error"),
-            content: t("generic_error_retry"),
-            close: { variant: "critical" },
-        });
-    }
-}
-
 /**
  * When the payments app redirects back to us after a plan purchase or update
  * completes, it sets various query parameters to relay the status of the action
@@ -207,12 +190,19 @@ export async function checkSubscriptionPurchase(
                     proceed: {
                         text: t("UPDATE_PAYMENT_METHOD"),
                         variant: "accent",
-                        action: updatePaymentMethod.bind(
-                            null,
-
-                            setDialogMessage,
-                            setLoading,
-                        ),
+                        action: async () => {
+                            try {
+                                setLoading(true);
+                                await redirectToCustomerPortal();
+                            } catch (error) {
+                                setLoading(false);
+                                setDialogMessage({
+                                    title: t("error"),
+                                    content: t("generic_error_retry"),
+                                    close: { variant: "critical" },
+                                });
+                            }
+                        },
                     },
                     close: { text: t("cancel") },
                 });
@@ -226,12 +216,19 @@ export async function checkSubscriptionPurchase(
                     proceed: {
                         text: t("UPDATE_PAYMENT_METHOD"),
                         variant: "accent",
-                        action: updatePaymentMethod.bind(
-                            null,
-
-                            setDialogMessage,
-                            setLoading,
-                        ),
+                        action: async () => {
+                            try {
+                                setLoading(true);
+                                await redirectToCustomerPortal();
+                            } catch (error) {
+                                setLoading(false);
+                                setDialogMessage({
+                                    title: t("error"),
+                                    content: t("generic_error_retry"),
+                                    close: { variant: "critical" },
+                                });
+                            }
+                        },
                     },
                     close: { text: t("cancel") },
                 });