diff --git a/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx b/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx index 8fe6ed8..b2c1ae9 100644 --- a/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx +++ b/frontend/src/features/settings/mobile/MobileSettingsScreen.tsx @@ -7,6 +7,7 @@ import { useSettings } from '../hooks/useSettings'; import { useProfile, useUpdateProfile } from '../hooks/useProfile'; import { useExportUserData } from '../hooks/useExportUserData'; import { useVehicles } from '../../vehicles/hooks/useVehicles'; +import { useSubscription } from '../../subscription/hooks/useSubscription'; import { useAdminAccess } from '../../../core/auth/useAdminAccess'; import { useNavigationStore } from '../../../core/store'; import { DeleteAccountModal } from './DeleteAccountModal'; @@ -86,6 +87,8 @@ export const MobileSettingsScreen: React.FC = () => { const updateProfileMutation = useUpdateProfile(); const exportMutation = useExportUserData(); const { data: vehicles, isLoading: vehiclesLoading } = useVehicles(); + const { data: subscriptionData, isLoading: subscriptionLoading } = useSubscription(); + const subscription = subscriptionData?.data; const { isAdmin, loading: adminLoading } = useAdminAccess(); const [showDataExport, setShowDataExport] = useState(false); const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); @@ -382,6 +385,60 @@ export const MobileSettingsScreen: React.FC = () => { + {/* Subscription Section */} + +
+
+
+ + + +

+ Subscription +

+
+ +
+ + {subscriptionLoading ? ( +
+
+
+ ) : ( +
+
+ Current Plan: + + {(subscription?.tier || 'free').toUpperCase()} + + {subscription?.status && subscription.status !== 'active' && ( + + {subscription.status.replace('_', ' ')} + + )} +
+

+ {!subscription || subscription.tier === 'free' + ? 'Upgrade to Pro or Enterprise for more features and vehicle slots.' + : subscription.tier === 'pro' + ? 'Pro plan with up to 5 vehicles and full features.' + : 'Enterprise plan with unlimited vehicles and all features.'} +

+
+ )} +
+
+ {/* Notifications Section */}