fix family admin api called for non family user

src/components/MemberSubscriptionManage.tsx

@@ -6,6 +6,7 @@ import billingService from 'services/billingService';
 import { getFamilyPlanAdmin } from 'utils/billing';
 import constants from 'utils/strings/constants';
 import DialogTitleWithCloseButton from './DialogBox/TitleWithCloseButton';
+
 export function MemberSubscriptionManage({ open, userDetails, onClose }) {
     const { setDialogMessage, isMobile } = useContext(AppContext);
 

src/components/Sidebar/SubscriptionCard/index.tsx

@@ -1,30 +1,20 @@
 import { BackgroundOverlay } from './backgroundOverlay';
 import { ClickOverlay } from './clickOverlay';
-import React, { useContext } from 'react';
+import React from 'react';
 import { Box, Skeleton } from '@mui/material';
 import { UserDetails } from 'types/user';
 
-import { GalleryContext } from 'pages/gallery';
-import {
-    hasNonAdminFamilyMembers,
-    isFamilyAdmin,
-    isPartOfFamily,
-} from 'utils/billing';
+import { hasNonAdminFamilyMembers } from 'utils/billing';
 import { SubscriptionCardContent } from './contentOverlay';
 
 const SUBSCRIPTION_CARD_SIZE = 152;
 
 interface Iprops {
     userDetails: UserDetails;
-    openMemberSubscriptionDialog: () => void;
+    onClick: () => void;
 }
 
-export default function SubscriptionCard({
-    userDetails,
-    openMemberSubscriptionDialog,
-}: Iprops) {
-    const { showPlanSelectorModal } = useContext(GalleryContext);
-
+export default function SubscriptionCard({ userDetails, onClick }: Iprops) {
     if (!userDetails) {
         return (
             <Skeleton
@@ -36,10 +26,6 @@ export default function SubscriptionCard({
         );
     }
 
-    const isMemberSubscription =
-        isPartOfFamily(userDetails.familyData) &&
-        !isFamilyAdmin(userDetails.familyData);
-
     return (
         <Box position="relative" height={SUBSCRIPTION_CARD_SIZE}>
             <SubscriptionCardContent
@@ -47,13 +33,7 @@ export default function SubscriptionCard({
                 userDetails={userDetails}
             />
             <BackgroundOverlay />
-            <ClickOverlay
-                onClick={
-                    isMemberSubscription
-                        ? openMemberSubscriptionDialog
-                        : showPlanSelectorModal
-                }
-            />
+            <ClickOverlay onClick={onClick} />
         </Box>
     );
 }

src/components/Sidebar/userDetailsSection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import SubscriptionCard from './SubscriptionCard';
 import { getUserDetailsV2 } from 'services/userService';
 import { UserDetails } from 'types/user';
@@ -9,12 +9,15 @@ import SubscriptionStatus from './SubscriptionStatus';
 import Stack from '@mui/material/Stack';
 import { Skeleton } from '@mui/material';
 import { MemberSubscriptionManage } from '../MemberSubscriptionManage';
+import { GalleryContext } from 'pages/gallery';
+import { isPartOfFamily, isFamilyAdmin } from 'utils/billing';
 
 export default function UserDetailsSection({ sidebarView }) {
+    const galleryContext = useContext(GalleryContext);
+
     const [userDetails, setUserDetails] = useLocalState<UserDetails>(
         LS_KEYS.USER_DETAILS
     );
-
     const [memberSubscriptionManageView, setMemberSubscriptionManageView] =
         useState(false);
 
@@ -34,6 +37,18 @@ export default function UserDetailsSection({ sidebarView }) {
         main();
     }, [sidebarView]);
 
+    const isMemberSubscription = useMemo(
+        () =>
+            userDetails &&
+            isPartOfFamily(userDetails.familyData) &&
+            !isFamilyAdmin(userDetails.familyData),
+        [userDetails]
+    );
+
+    const handleSubscriptionCardClick = isMemberSubscription
+        ? openMemberSubscriptionManage
+        : galleryContext.showPlanSelectorModal;
+
     return (
         <>
             <Stack spacing={1}>
@@ -47,16 +62,18 @@ export default function UserDetailsSection({ sidebarView }) {
 
                 <SubscriptionCard
                     userDetails={userDetails}
-                    openMemberSubscriptionDialog={openMemberSubscriptionManage}
+                    onClick={handleSubscriptionCardClick}
                 />
                 <SubscriptionStatus userDetails={userDetails} />
             </Stack>
 
-            <MemberSubscriptionManage
-                userDetails={userDetails}
-                open={memberSubscriptionManageView}
-                onClose={closeMemberSubscriptionManage}
-            />
+            {isMemberSubscription && (
+                <MemberSubscriptionManage
+                    userDetails={userDetails}
+                    open={memberSubscriptionManageView}
+                    onClose={closeMemberSubscriptionManage}
+                />
+            )}
         </>
     );
 }