Forward storage

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

@@ -9,7 +9,7 @@ import Plans from "../plans";
 import { BFAddOnRow } from "../plans/BfAddOnRow";
 
 export default function FreeSubscriptionPlanSelectorCard({
-    plans,
+    plansResponse,
     subscription,
     bonusData,
     closeModal,
@@ -36,7 +36,7 @@ export default function FreeSubscriptionPlanSelectorCard({
                         </Typography>
                     </Box>
                     <Plans
-                        plans={plans}
+                        plansResponse={plansResponse}
                         planPeriod={planPeriod}
                         onPlanSelect={onPlanSelect}
                         subscription={subscription}

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

@@ -1,7 +1,5 @@
 import log from "@/next/log";
 import { SUPPORT_EMAIL } from "@ente/shared/constants/urls";
-import { useLocalState } from "@ente/shared/hooks/useLocalState";
-import { LS_KEYS } from "@ente/shared/storage/localStorage";
 import { Link, Stack } from "@mui/material";
 import { PLAN_PERIOD } from "constants/gallery";
 import { t } from "i18next";
@@ -9,7 +7,7 @@ import { AppContext } from "pages/_app";
 import { GalleryContext } from "pages/gallery";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { Trans } from "react-i18next";
-import billingService from "services/billingService";
+import billingService, { type PlansResponse } from "services/billingService";
 import { Plan } from "types/billing";
 import { SetLoading } from "types/gallery";
 import {
@@ -36,7 +34,9 @@ interface Props {
 
 function PlanSelectorCard(props: Props) {
     const subscription = useMemo(() => getLocalUserSubscription(), []);
-    const [plans, setPlans] = useLocalState<Plan[]>(LS_KEYS.PLANS);
+    const [plansResponse, setPlansResponse] = useState<
+        PlansResponse | undefined
+    >();
 
     const [planPeriod, setPlanPeriod] = useState<PLAN_PERIOD>(
         subscription?.period || PLAN_PERIOD.MONTH,
@@ -76,7 +76,8 @@ function PlanSelectorCard(props: Props) {
         const main = async () => {
             try {
                 props.setLoading(true);
-                const plans = await billingService.getPlans();
+                const response = await billingService.getPlans();
+                const { plans } = response;
                 if (isSubscriptionActive(subscription)) {
                     const planNotListed =
                         plans.filter((plan) =>
@@ -90,7 +91,7 @@ function PlanSelectorCard(props: Props) {
                         plans.push(planForSubscription(subscription));
                     }
                 }
-                setPlans(plans);
+                setPlansResponse(response);
             } catch (e) {
                 log.error("plan selector modal open failed", e);
                 props.closeModal();
@@ -172,7 +173,7 @@ function PlanSelectorCard(props: Props) {
             <Stack spacing={3} p={1.5}>
                 {hasPaidSubscription(subscription) ? (
                     <PaidSubscriptionPlanSelectorCard
-                        plans={plans}
+                        plansResponse={plansResponse}
                         subscription={subscription}
                         bonusData={bonusData}
                         closeModal={props.closeModal}
@@ -184,7 +185,7 @@ function PlanSelectorCard(props: Props) {
                     />
                 ) : (
                     <FreeSubscriptionPlanSelectorCard
-                        plans={plans}
+                        plansResponse={plansResponse}
                         subscription={subscription}
                         bonusData={bonusData}
                         closeModal={props.closeModal}

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

@@ -13,7 +13,7 @@ import Plans from "../plans";
 import { BFAddOnRow } from "../plans/BfAddOnRow";
 
 export default function PaidSubscriptionPlanSelectorCard({
-    plans,
+    plansResponse,
     subscription,
     bonusData,
     closeModal,
@@ -70,7 +70,7 @@ export default function PaidSubscriptionPlanSelectorCard({
                         </Typography>
                     </Box>
                     <Plans
-                        plans={plans}
+                        plansResponse={plansResponse}
                         planPeriod={planPeriod}
                         onPlanSelect={onPlanSelect}
                         subscription={subscription}

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

@@ -3,6 +3,7 @@ import ArrowForward from "@mui/icons-material/ArrowForward";
 import { Box, IconButton, Stack, Typography, styled } from "@mui/material";
 import { PLAN_PERIOD } from "constants/gallery";
 import { t } from "i18next";
+import type { PlansResponse } from "services/billingService";
 import { Plan, Subscription } from "types/billing";
 import { BonusData } from "types/user";
 import {
@@ -14,7 +15,7 @@ import {
 import { PlanRow } from "./planRow";
 
 interface Iprops {
-    plans: Plan[];
+    plansResponse: PlansResponse;
     planPeriod: PLAN_PERIOD;
     subscription: Subscription;
     bonusData?: BonusData;
@@ -23,35 +24,43 @@ interface Iprops {
 }
 
 const Plans = ({
-    plans,
+    plansResponse,
     planPeriod,
     subscription,
     bonusData,
     onPlanSelect,
     closeModal,
-}: Iprops) => (
-    <Stack spacing={2}>
-        {plans
-            ?.filter((plan) => plan.period === planPeriod)
-            ?.map((plan) => (
-                <PlanRow
-                    disabled={isUserSubscribedPlan(plan, subscription)}
-                    popular={isPopularPlan(plan)}
-                    key={plan.stripeID}
-                    plan={plan}
-                    subscription={subscription}
-                    onPlanSelect={onPlanSelect}
-                />
-            ))}
-        {!hasPaidSubscription(subscription) && !hasAddOnBonus(bonusData) && (
-            <FreePlanRow closeModal={closeModal} />
-        )}
-    </Stack>
-);
+}: Iprops) => {
+    const { freePlan, plans } = plansResponse;
+    return (
+        <Stack spacing={2}>
+            {plans
+                ?.filter((plan) => plan.period === planPeriod)
+                ?.map((plan) => (
+                    <PlanRow
+                        disabled={isUserSubscribedPlan(plan, subscription)}
+                        popular={isPopularPlan(plan)}
+                        key={plan.stripeID}
+                        plan={plan}
+                        subscription={subscription}
+                        onPlanSelect={onPlanSelect}
+                    />
+                ))}
+            {!hasPaidSubscription(subscription) &&
+                !hasAddOnBonus(bonusData) && (
+                    <FreePlanRow
+                        storage={freePlan.storage}
+                        closeModal={closeModal}
+                    />
+                )}
+        </Stack>
+    );
+};
 
 export default Plans;
 
 interface FreePlanRowProps {
+    storage: number;
     closeModal: () => void;
 }
 

web/apps/photos/src/services/billingService.ts

@@ -19,8 +19,18 @@ enum PaymentActionType {
     Update = "update",
 }
 
+export interface FreePlan {
+    /* Number of bytes available in the free plan */
+    storage: number;
+}
+
+export interface PlansResponse {
+    freePlan: FreePlan;
+    plans: Plan[];
+}
+
 class billingService {
-    public async getPlans(): Promise<Plan[]> {
+    public async getPlans(): Promise<PlansResponse> {
         const token = getToken();
         try {
             let response;
@@ -37,8 +47,7 @@ class billingService {
                     },
                 );
             }
-            const { plans } = response.data;
-            return plans;
+            return response.data;
         } catch (e) {
             log.error("failed to get plans", e);
         }

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

@@ -14,6 +14,7 @@ export interface Subscription {
     price: string;
     period: PLAN_PERIOD;
 }
+
 export interface Plan {
     id: string;
     androidID: string;

web/packages/shared/storage/localStorage/index.ts

@@ -7,7 +7,6 @@ export enum LS_KEYS {
     ORIGINAL_KEY_ATTRIBUTES = "originalKeyAttributes",
     SUBSCRIPTION = "subscription",
     FAMILY_DATA = "familyData",
-    PLANS = "plans",
     IS_FIRST_LOGIN = "isFirstLogin",
     JUST_SIGNED_UP = "justSignedUp",
     SHOW_BACK_BUTTON = "showBackButton",