Use 3

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

@@ -136,16 +136,21 @@ type SidebarProps = ModalVisibilityProps & {
      * items shown in the shortcut section within the sidebar.
      */
     collectionSummaries: CollectionSummaries;
+    /**
+     * Called when the plan selection modal should be shown.
+     */
+    onShowPlanSelector: () => void;
 };
 
 export const Sidebar: React.FC<SidebarProps> = ({
     open,
     onClose,
     collectionSummaries,
+    onShowPlanSelector,
 }) => (
     <RootSidebarDrawer open={open} onClose={onClose}>
         <HeaderSection onCloseSidebar={onClose} />
-        <UserDetailsSection sidebarOpen={open} />
+        <UserDetailsSection sidebarOpen={open} {...{ onShowPlanSelector }} />
         <Stack sx={{ gap: 0.5, mb: 3 }}>
             <ShortcutSection
                 onCloseSidebar={onClose}
@@ -183,14 +188,14 @@ const HeaderSection: React.FC<SectionProps> = ({ onCloseSidebar }) => (
     </SpacedRow>
 );
 
-interface UserDetailsSectionProps {
+type UserDetailsSectionProps = Pick<SidebarProps, "onShowPlanSelector"> & {
     sidebarOpen: boolean;
-}
+};
 
 const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
     sidebarOpen,
+    onShowPlanSelector,
 }) => {
-    const galleryContext = useContext(GalleryContext);
     const userDetails = useUserDetailsSnapshot();
     const [memberSubscriptionManageView, setMemberSubscriptionManageView] =
         useState(false);
@@ -223,7 +228,7 @@ const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
             ) {
                 redirectToCustomerPortal();
             } else {
-                galleryContext.showPlanSelectorModal();
+                onShowPlanSelector();
             }
         }
     };
@@ -244,7 +249,9 @@ const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
                     onClick={handleSubscriptionCardClick}
                 />
                 {userDetails && (
-                    <SubscriptionStatus userDetails={userDetails} />
+                    <SubscriptionStatus
+                        {...{ userDetails, onShowPlanSelector }}
+                    />
                 )}
             </Box>
             {isNonAdminFamilyMember && (
@@ -258,15 +265,14 @@ const UserDetailsSection: React.FC<UserDetailsSectionProps> = ({
     );
 };
 
-interface SubscriptionStatusProps {
+type SubscriptionStatusProps = Pick<SidebarProps, "onShowPlanSelector"> & {
     userDetails: UserDetails;
-}
+};
 
 const SubscriptionStatus: React.FC<SubscriptionStatusProps> = ({
     userDetails,
+    onShowPlanSelector,
 }) => {
-    const { showPlanSelectorModal } = useContext(GalleryContext);
-
     const hasAMessage = useMemo(() => {
         if (isPartOfFamily(userDetails) && !isFamilyAdmin(userDetails)) {
             return false;
@@ -286,7 +292,7 @@ const SubscriptionStatus: React.FC<SubscriptionStatusProps> = ({
 
             if (isSubscriptionActive(userDetails.subscription)) {
                 if (hasExceededStorageQuota(userDetails)) {
-                    showPlanSelectorModal();
+                    onShowPlanSelector();
                 }
             } else {
                 if (
@@ -295,7 +301,7 @@ const SubscriptionStatus: React.FC<SubscriptionStatusProps> = ({
                 ) {
                     redirectToCustomerPortal();
                 } else {
-                    showPlanSelectorModal();
+                    onShowPlanSelector();
                 }
             }
         };

web/apps/photos/src/components/Upload.tsx

@@ -101,6 +101,10 @@ interface UploadProps {
      * @param file The newly uploaded file.
      */
     onUploadFile: (file: EnteFile) => void;
+    /**
+     * Called when the plan selection modal should be shown.
+     */
+    onShowPlanSelector: () => void;
     setCollections?: (cs: Collection[]) => void;
     isFirstUpload?: boolean;
     uploadTypeSelectorView: boolean;
@@ -120,6 +124,7 @@ export const Upload: React.FC<UploadProps> = ({
     isFirstUpload,
     dragAndDropFiles,
     onUploadFile,
+    onShowPlanSelector,
     showSessionExpiredMessage,
     ...props
 }) => {
@@ -725,7 +730,7 @@ export const Upload: React.FC<UploadProps> = ({
                     captionFirst: true,
                     caption: t("storage_quota_exceeded"),
                     title: t("upgrade_now"),
-                    onClick: galleryContext.showPlanSelectorModal,
+                    onClick: onShowPlanSelector,
                     startIcon: <DiscFullIcon />,
                 });
                 break;

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

@@ -133,7 +133,6 @@ import {
 import { FILE_OPS_TYPE, getSelectedFiles, handleFileOps } from "utils/file";
 
 const defaultGalleryContext: GalleryContextType = {
-    showPlanSelectorModal: () => null,
     setActiveCollectionID: () => null,
     onShowCollection: () => null,
     syncWithRemote: () => null,
@@ -812,7 +811,6 @@ const Page: React.FC = () => {
         <GalleryContext.Provider
             value={{
                 ...defaultGalleryContext,
-                showPlanSelectorModal: showPlanSelector,
                 setActiveCollectionID: handleSetActiveCollectionID,
                 onShowCollection: (id) =>
                     dispatch({
@@ -983,6 +981,7 @@ const Page: React.FC = () => {
                     onUploadFile={(file) =>
                         dispatch({ type: "uploadFile", file })
                     }
+                    onShowPlanSelector={showPlanSelector}
                     setCollections={(collections) =>
                         dispatch({ type: "setNormalCollections", collections })
                     }
@@ -999,6 +998,7 @@ const Page: React.FC = () => {
                 <Sidebar
                     {...sidebarVisibilityProps}
                     {...{ collectionSummaries }}
+                    onShowPlanSelector={showPlanSelector}
                 />
                 <WhatsNew {...whatsNewVisibilityProps} />
                 {!isInSearchMode &&

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

@@ -39,7 +39,6 @@ export interface MergedSourceURL {
 }
 
 export interface GalleryContextType {
-    showPlanSelectorModal: () => void;
     setActiveCollectionID: (collectionID: number) => void;
     /** Newer and almost equivalent alternative to setActiveCollectionID. */
     onShowCollection: (collectionID: number) => void;