From d646b5db80b4d1d1e876b1336692468dafd077aa Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Sun, 18 Jan 2026 19:53:12 -0600
Subject: [PATCH] feat: add Subscription section to mobile Settings (refs #55)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a Subscription section to the mobile Settings screen that displays:
- Current subscription tier (Free/Pro/Enterprise)
- Status indicator for non-active subscriptions
- Manage button linking to the subscription screen
- Descriptive text based on current tier

This completes the subscription section on both desktop and mobile.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../settings/mobile/MobileSettingsScreen.tsx  | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

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 = () => {
           </div>
         </GlassCard>
 
+        {/* Subscription Section */}
+        <GlassCard padding="md">
+          <div>
+            <div className="flex justify-between items-center mb-4">
+              <div className="flex items-center gap-2">
+                <svg className="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                </svg>
+                <h2 className="text-lg font-semibold text-slate-800 dark:text-avus">
+                  Subscription
+                </h2>
+              </div>
+              <button
+                onClick={() => navigateToScreen('Subscription')}
+                className="px-3 py-1.5 bg-primary-500 text-white rounded-lg text-sm font-medium hover:bg-primary-600 transition-colors dark:bg-primary-600 dark:hover:bg-primary-700"
+                style={{ minHeight: '44px', minWidth: '44px' }}
+              >
+                Manage
+              </button>
+            </div>
+
+            {subscriptionLoading ? (
+              <div className="flex justify-center py-4">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-500"></div>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-slate-800 dark:text-avus">Current Plan:</span>
+                  <span className="px-2 py-0.5 bg-primary-500 text-white text-xs font-semibold rounded-full">
+                    {(subscription?.tier || 'free').toUpperCase()}
+                  </span>
+                  {subscription?.status && subscription.status !== 'active' && (
+                    <span className={`px-2 py-0.5 text-xs font-semibold rounded-full ${
+                      subscription.status === 'past_due'
+                        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'
+                        : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
+                    }`}>
+                      {subscription.status.replace('_', ' ')}
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm text-slate-500 dark:text-titanio">
+                  {!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.'}
+                </p>
+              </div>
+            )}
+          </div>
+        </GlassCard>
+
         {/* Notifications Section */}
         <GlassCard padding="md">
           <div>