Detect declined sessions (200 + Status:Error); theme Sessions screen

- startParkingSession: server returns HTTP 200 even on a declined charge — now
  detect Response.Status:"Error" and throw the gateway reason (e.g. "DECLINED")
  so the app shows the failure instead of a false "Parked!"
- Confirmed the session request format is correct (server processed it); expand
  StartParkingSessionResponse with the real fields (OriginalErrorMessage, etc.)
- Theme SessionsScreen (was black-on-black in dark mode)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/src/screens/SessionsScreen.tsx

@@ -2,9 +2,11 @@ import React, { useCallback, useState } from 'react';
 import { RefreshControl, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 import { ps } from '@/api/client';
+import { useTheme } from '@/theme/ThemeContext';
 import type { ActiveSession, PastSession } from 'parksmarter-client';
 
 export function SessionsScreen() {
+  const { colors } = useTheme();
   const [active, setActive] = useState<ActiveSession[]>([]);
   const [past, setPast] = useState<PastSession[]>([]);
   const [refreshing, setRefreshing] = useState(false);
@@ -31,31 +33,32 @@ export function SessionsScreen() {
 
   return (
     <ScrollView
+      style={{ backgroundColor: colors.bg }}
       contentContainerStyle={{ padding: 16 }}
       refreshControl={<RefreshControl refreshing={refreshing} onRefresh={load} />}
     >
-      <Text style={styles.header}>Active</Text>
+      <Text style={[styles.header, { color: colors.text }]}>Active</Text>
       {active.length === 0 ? (
-        <Text style={styles.empty}>No active sessions.</Text>
+        <Text style={[styles.empty, { color: colors.subtext }]}>No active sessions.</Text>
       ) : (
         active.map((s, i) => (
-          <View key={i} style={[styles.card, styles.activeCard]}>
-            <Text style={styles.zone}>{s.ZoneName ?? 'Session'}</Text>
-            <Text style={styles.meta}>
+          <View key={i} style={[styles.card, { backgroundColor: colors.primary + '22' }]}>
+            <Text style={[styles.zone, { color: colors.text }]}>{s.ZoneName ?? 'Session'}</Text>
+            <Text style={[styles.meta, { color: colors.subtext }]}>
               {s.SpaceName ?? s.Space ?? ''} · ends {s.EndTimeDisplay ?? s.EndTime ?? ''}
             </Text>
           </View>
         ))
       )}
 
-      <Text style={[styles.header, { marginTop: 20 }]}>History</Text>
+      <Text style={[styles.header, { color: colors.text, marginTop: 20 }]}>History</Text>
       {past.length === 0 ? (
-        <Text style={styles.empty}>No past sessions.</Text>
+        <Text style={[styles.empty, { color: colors.subtext }]}>No past sessions.</Text>
       ) : (
         past.map((s, i) => (
-          <View key={i} style={styles.card}>
-            <Text style={styles.zone}>{s.ZoneName ?? 'Session'}</Text>
-            <Text style={styles.meta}>
+          <View key={i} style={[styles.card, { backgroundColor: colors.card }]}>
+            <Text style={[styles.zone, { color: colors.text }]}>{s.ZoneName ?? 'Session'}</Text>
+            <Text style={[styles.meta, { color: colors.subtext }]}>
               {s.StartTime ?? ''} · {s.Amount != null ? `$${s.Amount}` : ''}
             </Text>
           </View>
@@ -67,9 +70,8 @@ export function SessionsScreen() {
 
 const styles = StyleSheet.create({
   header: { fontSize: 18, fontWeight: '700', marginBottom: 8 },
-  empty: { color: '#888', marginBottom: 8 },
-  card: { backgroundColor: '#f4f4f4', borderRadius: 10, padding: 14, marginBottom: 10 },
-  activeCard: { backgroundColor: '#e8f5e9' },
+  empty: { marginBottom: 8 },
+  card: { borderRadius: 10, padding: 14, marginBottom: 10 },
   zone: { fontSize: 16, fontWeight: '600' },
-  meta: { color: '#777', fontSize: 13, marginTop: 2 },
+  meta: { fontSize: 13, marginTop: 2 },
 });

parksmarter-client/src/client.ts

@@ -598,13 +598,20 @@ export class ParkSmarterClient {
       MeterTypeId: params.meterTypeId,
     };
     if (params.bleEncBytes) body.BleEncBytes = params.bleEncBytes;
-    return this.unwrap(
-      this.http.request<T.StartParkingSessionResponse>({
-        method: 'POST',
-        path: '/api/Session',
-        body,
-      }),
-    );
+    return this.http
+      .request<T.StartParkingSessionResponse>({ method: 'POST', path: '/api/Session', body })
+      .then((res) => {
+        // The server returns HTTP 200 even when the charge is declined, signalling
+        // failure via Response.Status:"Error" (+ OriginalErrorMessage like "DECLINED").
+        const env = res.data?.Response as { Status?: string; Message?: string } | undefined;
+        if (env?.Status === 'Error') {
+          throw new Error(
+            (env.Message || 'Payment failed.') +
+              (res.data?.OriginalErrorMessage ? ` (${res.data.OriginalErrorMessage})` : ''),
+          );
+        }
+        return res.data;
+      });
   }
 
   /** GET /api/ParkingSession — currently active sessions. */

parksmarter-client/src/types.ts

@@ -452,8 +452,29 @@ export interface StartParkingSessionParams {
   bleEncBytes?: string;
 }
 
+/**
+ * POST /api/Session. CONFIRMED via live capture. Returns HTTP 200 even on a
+ * declined charge — check `Response.Status === 'Error'` (the client does this and
+ * throws). `OriginalErrorMessage` carries the gateway reason (e.g. "DECLINED").
+ */
 export interface StartParkingSessionResponse {
-  BleEncBytes?: string;
+  Response?: ResponseEnvelope;
+  BleEncBytes?: string | null;
+  PBPParkingSessionId?: number;
+  OriginalErrorMessage?: string;
+  StartTime?: string | null;
+  EndTime?: string | null;
+  TimePurchased?: string | null;
+  ZoneID?: number | string | null;
+  Zone?: string | null;
+  SpaceID?: number | string | null;
+  Space?: string | null;
+  VehicleNumber?: string | null;
+  Lat?: number | null;
+  Long?: number | null;
+  TransactionFee?: string | number | null;
+  Amount?: string | number | null;
+  AmountCharged?: string | number | null;
   [key: string]: unknown;
 }