once over

web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx

@@ -1,9 +1,9 @@
 import { Overlay } from "@/base/components/mui/Container";
 import type { ButtonishProps } from "@/new/photos/components/mui";
 import {
-    isPartOfFamily,
+    familyUsage,
     isPartOfFamilyWithOtherMembers,
-} from "@/new/photos/services/family";
+} from "@/new/photos/services/plan";
 import type { UserDetails } from "@/new/photos/services/user";
 import { bytesInGB, formattedStorageByteSize } from "@/new/photos/utils/units";
 import { SpaceBetweenFlex } from "@ente/shared/components/Container";
@@ -20,7 +20,6 @@ import {
 } from "@mui/material";
 import { t } from "i18next";
 import type React from "react";
-import { useMemo } from "react";
 
 interface SubscriptionCardProps {
     userDetails: UserDetails;
@@ -219,18 +218,9 @@ interface FamilySubscriptionCardContentProps {
 const FamilySubscriptionCardContent: React.FC<
     FamilySubscriptionCardContentProps
 > = ({ userDetails }) => {
-    const totalUsage = useMemo(() => {
-        if (isPartOfFamily(userDetails.familyData)) {
-            return userDetails.familyData.members.reduce(
-                (sum, currentMember) => sum + currentMember.usage,
-                0,
-            );
-        } else {
-            return userDetails.usage;
-        }
-    }, [userDetails]);
+    const totalUsage = familyUsage(userDetails);
     const totalStorage =
-        userDetails.familyData.storage + userDetails.storageBonus;
+        (userDetails.familyData?.storage ?? 0) + userDetails.storageBonus;
 
     return (
         <>

web/apps/photos/src/components/Sidebar/index.tsx

@@ -23,9 +23,9 @@ import {
     isFamilyAdmin,
     isPartOfFamily,
     isSubscriptionActive,
-    isSubscriptionActiveFree,
     isSubscriptionActivePaid,
     isSubscriptionCancelled,
+    isSubscriptionFree,
     isSubscriptionPastDue,
     isSubscriptionStripe,
     redirectToCustomerPortal,
@@ -156,7 +156,7 @@ const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
         if (sidebarView) void syncUserDetails();
     }, [sidebarView]);
 
-    const isMemberSubscription = useMemo(
+    const isNonAdminFamilyMember = useMemo(
         () =>
             userDetails &&
             isPartOfFamily(userDetails) &&
@@ -165,7 +165,7 @@ const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
     );
 
     const handleSubscriptionCardClick = () => {
-        if (isMemberSubscription) {
+        if (isNonAdminFamilyMember) {
             openMemberSubscriptionManage();
         } else {
             if (
@@ -199,7 +199,7 @@ const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
                     <SubscriptionStatus userDetails={userDetails} />
                 )}
             </Box>
-            {isMemberSubscription && (
+            {isNonAdminFamilyMember && (
                 <MemberSubscriptionManage
                     userDetails={userDetails}
                     open={memberSubscriptionManageView}
@@ -220,9 +220,6 @@ const SubscriptionStatus: React.FC<SubscriptionStatusProps> = ({
     const { showPlanSelectorModal } = useContext(GalleryContext);
 
     const hasAMessage = useMemo(() => {
-        if (!userDetails) {
-            return false;
-        }
         if (isPartOfFamily(userDetails) && !isFamilyAdmin(userDetails)) {
             return false;
         }
@@ -266,7 +263,7 @@ const SubscriptionStatus: React.FC<SubscriptionStatusProps> = ({
     let message: React.ReactNode;
     if (!hasAddOnBonus) {
         if (isSubscriptionActive(userDetails.subscription)) {
-            if (isSubscriptionActiveFree(userDetails.subscription)) {
+            if (isSubscriptionFree(userDetails.subscription)) {
                 message = t("subscription_info_free");
             } else if (isSubscriptionCancelled(userDetails.subscription)) {
                 message = t("subscription_info_renewal_cancelled", {

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

@@ -12,6 +12,7 @@ import type {
 import {
     activateStripeSubscription,
     cancelStripeSubscription,
+    getFamilyPortalRedirectURL,
     getPlansData,
     isSubscriptionActive,
     isSubscriptionActivePaid,
@@ -54,7 +55,6 @@ import Typography from "@mui/material/Typography";
 import { t } from "i18next";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { Trans } from "react-i18next";
-import { getFamilyPortalRedirectURL } from "services/userService";
 import { SetLoading } from "types/gallery";
 
 type PlanSelectorProps = ModalVisibilityProps & {
@@ -247,7 +247,7 @@ const PlanSelectorCard: React.FC<PlanSelectorCardProps> = ({
 
     return (
         <Stack spacing={3} p={1.5}>
-            {isSubscriptionActivePaid(subscription) ? (
+            {subscription && isSubscriptionActivePaid(subscription) ? (
                 <PaidSubscriptionPlanSelectorCard
                     {...commonCardData}
                     usage={usage}
@@ -327,7 +327,7 @@ function FreeSubscriptionPlanSelectorCard({
                         </Typography>
                     </Box>
                     {children}
-                    {addOnBonuses.length > 0 && (
+                    {subscription && addOnBonuses.length > 0 && (
                         <>
                             <AddOnBonusRows
                                 addOnBonuses={addOnBonuses}
@@ -499,7 +499,10 @@ const Plans = ({
                 ?.filter((plan) => plan.period === planPeriod)
                 ?.map((plan) => (
                     <PlanRow
-                        disabled={isUserSubscribedPlan(plan, subscription)}
+                        disabled={
+                            subscription &&
+                            isSubscriptionForPlan(subscription, plan)
+                        }
                         popular={isPopularPlan(plan)}
                         key={plan.stripeID}
                         plan={plan}
@@ -507,7 +510,7 @@ const Plans = ({
                         onPlanSelect={onPlanSelect}
                     />
                 ))}
-            {!isSubscriptionActivePaid(subscription) &&
+            {!(subscription && isSubscriptionActivePaid(subscription)) &&
                 !hasAddOnBonus &&
                 freePlan && (
                     <FreePlanRow
@@ -537,9 +540,7 @@ function PlanRow({
     disabled,
     popular,
 }: PlanRowProps) {
-    const handleClick = () => {
-        !isUserSubscribedPlan(plan, subscription) && onPlanSelect(plan);
-    };
+    const handleClick = () => !disabled && onPlanSelect(plan);
 
     const PlanButton = disabled ? DisabledPlanButton : ActivePlanButton;
 
@@ -553,9 +554,11 @@ function PlanRow({
                     <Typography variant="h3" color="text.muted">
                         {t("storage_unit.gb")}
                     </Typography>
-                    {popular && !isSubscriptionActivePaid(subscription) && (
-                        <Badge>{t("POPULAR")}</Badge>
-                    )}
+                    {popular &&
+                        !(
+                            subscription &&
+                            isSubscriptionActivePaid(subscription)
+                        ) && <Badge>{t("POPULAR")}</Badge>}
                 </FlexWrapper>
             </TopAlignedFluidContainer>
             <Box width="136px">

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

@@ -24,6 +24,7 @@ import { photosDialogZIndex } from "@/new/photos/components/utils/z-index";
 import DownloadManager from "@/new/photos/services/download";
 import { runMigrations } from "@/new/photos/services/migrations";
 import { initML, isMLSupported } from "@/new/photos/services/ml";
+import { getFamilyPortalRedirectURL } from "@/new/photos/services/plan";
 import { AppContext } from "@/new/photos/types/context";
 import DialogBox from "@ente/shared/components/DialogBox";
 import { DialogBoxAttributes } from "@ente/shared/components/DialogBox/types";
@@ -52,7 +53,6 @@ import { useCallback, useEffect, useState } from "react";
 import LoadingBar from "react-top-loading-bar";
 import { resumeExportsIfNeeded } from "services/export";
 import { photosLogout } from "services/logout";
-import { getFamilyPortalRedirectURL } from "services/userService";
 import "styles/global.css";
 import { NotificationAttributes } from "types/Notification";
 

web/packages/new/photos/services/plan.ts

@@ -318,7 +318,7 @@ export const isSubscriptionStripe = (subscription: Subscription) =>
  * Return true if the given {@link Subscription} has the cancelled attribute.
  */
 export const isSubscriptionCancelled = (subscription: Subscription) =>
-    subscription && subscription.attributes?.isCancelled;
+    subscription.attributes?.isCancelled;
 
 /**
  * Return true if the user (represented by the given {@link userDetails}) is
@@ -437,6 +437,5 @@ export const hasExceededStorageQuota = (userDetails: UserDetails) => {
         usage = userDetails.usage;
         storage = userDetails.subscription.storage;
     }
-
     return usage > storage + userDetails.storageBonus;
 };