@oxyhq/services 11.0.0 → 11.1.1

package/src/ui/screens/NotificationsScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -12,9 +12,6 @@ import { useOxy } from '../context/OxyContext';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUpdateNotificationPreferences } from '../hooks/mutations/useAccountMutations';
 import { useSettingToggles } from '../hooks/useSettingToggle';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { Colors } from '../constants/theme';
-import { normalizeColorScheme, normalizeTheme } from '@oxyhq/core';
 
 interface NotificationToggleValues {
     pushEnabled: boolean;
@@ -38,14 +35,9 @@ const DEFAULT_VALUES: NotificationToggleValues = {
  * from the current user's `notificationPreferences` field, defaulting to the
  * platform defaults when the field has never been set.
  */
-const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }) => {
+const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     const bloomTheme = useTheme();
     const { t } = useI18n();
-    const colorScheme = useColorScheme();
-    const palette = useMemo(
-        () => Colors[normalizeColorScheme(colorScheme, normalizeTheme(theme))],
-        [colorScheme, theme],
-    );
     const { isAuthenticated } = useOxy();
     const { data: user } = useCurrentUser({ enabled: isAuthenticated });
     const updateMutation = useUpdateNotificationPreferences();
@@ -77,113 +69,122 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack
     const isSaving = savingKeys.size > 0;
 
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
             <Header
                 title={t('notifications.title') || 'Notifications'}
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
             />
-            <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
-                <SettingsListGroup
-                    title={t('notifications.sections.channels') || 'Channels'}
-                >
-                    <SettingsListItem
-                        icon={<SettingsIcon name="bell" color={palette.iconPersonalInfo} />}
-                        title={t('notifications.items.push.title') || 'Push notifications'}
-                        description={
-                            t('notifications.items.push.subtitle')
-                            || 'Real-time alerts on your devices'
-                        }
-                        rightElement={
-                            <Switch
-                                value={values.pushEnabled}
-                                onValueChange={() => toggle('pushEnabled')}
-                                disabled={isSaving}
-                            />
-                        }
-                        showChevron={false}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="email" color={palette.iconData} />}
-                        title={t('notifications.items.emailDigest.title') || 'Email digest'}
-                        description={
-                            t('notifications.items.emailDigest.subtitle')
-                            || 'Periodic summary of your account activity'
-                        }
-                        rightElement={
-                            <Switch
-                                value={values.emailDigest}
-                                onValueChange={() => toggle('emailDigest')}
-                                disabled={isSaving}
-                            />
-                        }
-                        showChevron={false}
-                    />
-                </SettingsListGroup>
+            <ScrollView className="flex-1">
+                <View className="px-screen-margin pb-space-24">
+                    <SettingsListGroup
+                        title={t('notifications.sections.channels') || 'Channels'}
+                    >
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="bell"
+                                    color={bloomTheme.colors.primary}
+                                />
+                            }
+                            title={t('notifications.items.push.title') || 'Push notifications'}
+                            description={
+                                t('notifications.items.push.subtitle')
+                                || 'Real-time alerts on your devices'
+                            }
+                            rightElement={
+                                <Switch
+                                    value={values.pushEnabled}
+                                    onValueChange={() => toggle('pushEnabled')}
+                                    disabled={isSaving}
+                                />
+                            }
+                            showChevron={false}
+                        />
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="email"
+                                    color={bloomTheme.colors.info}
+                                />
+                            }
+                            title={t('notifications.items.emailDigest.title') || 'Email digest'}
+                            description={
+                                t('notifications.items.emailDigest.subtitle')
+                                || 'Periodic summary of your account activity'
+                            }
+                            rightElement={
+                                <Switch
+                                    value={values.emailDigest}
+                                    onValueChange={() => toggle('emailDigest')}
+                                    disabled={isSaving}
+                                />
+                            }
+                            showChevron={false}
+                        />
+                    </SettingsListGroup>
 
-                <SettingsListGroup
-                    title={t('notifications.sections.alerts') || 'Alerts'}
-                >
-                    <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={palette.iconSecurity} />}
-                        title={
-                            t('notifications.items.securityAlerts.title') || 'Security alerts'
-                        }
-                        description={
-                            t('notifications.items.securityAlerts.subtitle')
-                            || 'Sign-ins, recovery codes, and key changes'
-                        }
-                        rightElement={
-                            <Switch
-                                value={values.securityAlerts}
-                                onValueChange={() => toggle('securityAlerts')}
-                                disabled={isSaving}
-                            />
-                        }
-                        showChevron={false}
-                    />
-                </SettingsListGroup>
+                    <SettingsListGroup
+                        title={t('notifications.sections.alerts') || 'Alerts'}
+                    >
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="shield-check"
+                                    color={bloomTheme.colors.success}
+                                />
+                            }
+                            title={
+                                t('notifications.items.securityAlerts.title') || 'Security alerts'
+                            }
+                            description={
+                                t('notifications.items.securityAlerts.subtitle')
+                                || 'Sign-ins, recovery codes, and key changes'
+                            }
+                            rightElement={
+                                <Switch
+                                    value={values.securityAlerts}
+                                    onValueChange={() => toggle('securityAlerts')}
+                                    disabled={isSaving}
+                                />
+                            }
+                            showChevron={false}
+                        />
+                    </SettingsListGroup>
 
-                <SettingsListGroup
-                    title={t('notifications.sections.marketing') || 'Marketing'}
-                >
-                    <SettingsListItem
-                        icon={<SettingsIcon name="megaphone" color={palette.iconSharing} />}
-                        title={
-                            t('notifications.items.marketingEmails.title')
-                            || 'Marketing emails'
-                        }
-                        description={
-                            t('notifications.items.marketingEmails.subtitle')
-                            || 'Product news and occasional offers'
-                        }
-                        rightElement={
-                            <Switch
-                                value={values.marketingEmails}
-                                onValueChange={() => toggle('marketingEmails')}
-                                disabled={isSaving}
-                            />
-                        }
-                        showChevron={false}
-                    />
-                </SettingsListGroup>
+                    <SettingsListGroup
+                        title={t('notifications.sections.marketing') || 'Marketing'}
+                    >
+                        <SettingsListItem
+                            icon={
+                                <SettingsIcon
+                                    name="megaphone"
+                                    color={bloomTheme.colors.secondary}
+                                />
+                            }
+                            title={
+                                t('notifications.items.marketingEmails.title')
+                                || 'Marketing emails'
+                            }
+                            description={
+                                t('notifications.items.marketingEmails.subtitle')
+                                || 'Product news and occasional offers'
+                            }
+                            rightElement={
+                                <Switch
+                                    value={values.marketingEmails}
+                                    onValueChange={() => toggle('marketingEmails')}
+                                    disabled={isSaving}
+                                />
+                            }
+                            showChevron={false}
+                        />
+                    </SettingsListGroup>
+                </View>
             </ScrollView>
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scroll: {
-        flex: 1,
-    },
-    scrollContent: {
-        paddingHorizontal: 16,
-        paddingBottom: 24,
-    },
-});
-
 export default React.memo(NotificationsScreen);

package/src/ui/screens/OxyAuthScreen.tsx

@@ -16,21 +16,25 @@
  */
 
 import type React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Linking } from 'react-native';
+import { View, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { Loading } from '@oxyhq/bloom/loading';
+import { H4, Text } from '@oxyhq/bloom/typography';
+import { IconCircle } from '@oxyhq/bloom/icon-circle';
+import * as Icons from '@oxyhq/bloom/icons';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from '../components/OxyLogo';
 import AnotherDeviceQR from '../components/AnotherDeviceQR';
+import LoadingState from '../components/LoadingState';
 import { useOxyAuthSession, OXY_ACCOUNTS_WEB_URL } from '../hooks/useOxyAuthSession';
 
 const OxyAuthScreen: React.FC<BaseScreenProps> = ({ goBack, onAuthenticated }) => {
   const bloomTheme = useTheme();
   const { oxyServices, switchSession, clientId } = useOxy();
 
-  const { qrData, isLoading, error, isWaiting, openAuthApproval, retry } = useOxyAuthSession(
+  const { qrData, qrPayload, isLoading, error, isWaiting, openAuthApproval, openSameDeviceApproval, retry } = useOxyAuthSession(
     oxyServices,
     clientId,
     switchSession,
@@ -39,20 +43,33 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({ goBack, onAuthenticated }) =
 
   if (isLoading) {
     return (
-      <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-        <Loading size="large" />
-        <Text style={styles.loadingText} className="text-muted-foreground">
-          Preparing sign in...
-        </Text>
+      <View className="flex-1 items-center justify-center bg-bg">
+        <LoadingState
+          size="large"
+          color={bloomTheme.colors.primary}
+          message="Preparing sign in..."
+        />
       </View>
     );
   }
 
   if (error) {
     return (
-      <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-        <Text style={styles.errorText} className="text-destructive">{error}</Text>
-        <Button variant="primary" onPress={retry} style={styles.primaryButton}>
+      <View className="flex-1 items-center justify-center bg-bg px-screen-margin gap-space-16">
+        <IconCircle icon={Icons.Warning_Stroke2_Corner0_Rounded} />
+        <Text className="font-sans text-body text-text-secondary text-center">{error}</Text>
+        <Button
+          variant="primary"
+          fullWidth
+          className="w-full"
+          onPress={retry}
+          icon={
+            <Icons.ArrowRotateClockwise_Stroke2_Corner0_Rounded
+              size="sm"
+              style={{ color: bloomTheme.colors.primaryForeground }}
+            />
+          }
+        >
           Try Again
         </Button>
       </View>
@@ -60,12 +77,14 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({ goBack, onAuthenticated }) =
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+    <View className="flex-1 items-center justify-center bg-bg px-screen-margin">
       {/* Branded header */}
-      <View style={styles.header}>
-        <OxyLogo variant="icon" size={48} />
-        <Text style={styles.title} className="text-foreground">Sign in to Oxy</Text>
-        <Text style={styles.subtitle} className="text-muted-foreground">
+      <View className="items-center mb-space-24 gap-space-12">
+        <OxyLogo variant="icon" size={56} />
+        <H4 className="text-headerBold font-headerBold text-text text-center">
+          Sign in to Oxy
+        </H4>
+        <Text className="font-sans text-body text-text-secondary text-center">
           Continue with your Oxy identity to sign in securely
         </Text>
       </View>
@@ -73,124 +92,72 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({ goBack, onAuthenticated }) =
       {/* Primary action — Continue with Oxy */}
       <Button
         variant="primary"
+        size="large"
+        fullWidth
+        className="w-full"
         onPress={openAuthApproval}
-        icon={<OxyLogo variant="icon" size={20} fillColor={bloomTheme.colors.primaryForeground} style={styles.buttonIcon} />}
-        style={styles.primaryButton}
+        icon={
+          <OxyLogo variant="icon" size={20} fillColor={bloomTheme.colors.primaryForeground} />
+        }
       >
         Continue with Oxy
       </Button>
 
+      {/* Same-device "Sign in with Oxy" handoff — deep-links into the native Oxy
+          app to approve. Shown only when the handoff backend returned a payload. */}
+      {qrPayload && (
+        <Button
+          variant="secondary"
+          size="large"
+          fullWidth
+          className="w-full mt-space-12"
+          onPress={openSameDeviceApproval}
+          icon={
+            <OxyLogo variant="icon" size={20} fillColor={bloomTheme.colors.text} />
+          }
+        >
+          Sign in with the Oxy app
+        </Button>
+      )}
+
       {/* Waiting status */}
       {isWaiting && (
-        <View style={styles.statusContainer}>
-          <Loading size="small" style={styles.statusSpinner} />
-          <Text style={styles.statusText} className="text-muted-foreground">
+        <View className="flex-row items-center mt-space-16 gap-space-8">
+          <Loading size="small" />
+          <Text className="font-sans text-body text-text-secondary">
             Waiting for authorization...
           </Text>
         </View>
       )}
 
       {/* Collapsed "sign in on another device" QR disclosure */}
-      <View style={styles.qrSection}>
-        <AnotherDeviceQR qrData={qrData} />
+      <View className="w-full mt-space-24">
+        <AnotherDeviceQR qrData={qrData} qrPayload={qrPayload} />
       </View>
 
       {/* Footer — create an account */}
-      <View style={styles.footer}>
-        <Text style={styles.footerText} className="text-muted-foreground">
-          Don't have an Oxy account?{' '}
+      <View className="flex-row flex-wrap justify-center items-center mt-space-24">
+        <Text className="font-sans text-body text-text-secondary">
+          Don't have an Oxy account?
         </Text>
-        <TouchableOpacity onPress={() => Linking.openURL(OXY_ACCOUNTS_WEB_URL)} accessibilityRole="link">
-          <Text style={styles.footerLink} className="text-primary">
-            Create one
-          </Text>
-        </TouchableOpacity>
+        <Button
+          variant="text"
+          size="small"
+          onPress={() => Linking.openURL(OXY_ACCOUNTS_WEB_URL)}
+          accessibilityLabel="Create an Oxy account"
+        >
+          Create one
+        </Button>
       </View>
 
       {/* Cancel */}
       {goBack && (
-        <TouchableOpacity style={styles.cancelButton} onPress={goBack} accessibilityRole="button">
-          <Text style={styles.cancelText} className="text-muted-foreground">Cancel</Text>
-        </TouchableOpacity>
+        <Button variant="text" onPress={goBack} className="mt-space-8" accessibilityLabel="Cancel">
+          Cancel
+        </Button>
       )}
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  header: {
-    alignItems: 'center',
-    marginBottom: 28,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginTop: 16,
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontSize: 14,
-    marginTop: 8,
-    textAlign: 'center',
-  },
-  primaryButton: {
-    width: '100%',
-    borderRadius: 12,
-  },
-  buttonIcon: {
-    marginRight: 10,
-  },
-  statusContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 20,
-  },
-  statusSpinner: {
-    flex: undefined,
-  },
-  statusText: {
-    marginLeft: 8,
-    fontSize: 14,
-  },
-  qrSection: {
-    width: '100%',
-    marginTop: 24,
-  },
-  footer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    marginTop: 28,
-  },
-  footerText: {
-    fontSize: 14,
-  },
-  footerLink: {
-    fontSize: 14,
-    fontWeight: '600',
-  },
-  cancelButton: {
-    marginTop: 16,
-    padding: 12,
-  },
-  cancelText: {
-    fontSize: 14,
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 14,
-  },
-  errorText: {
-    fontSize: 14,
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-});
-
 export default OxyAuthScreen;

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -2,7 +2,6 @@ import type React from 'react';
 import { useState, useRef, useMemo, useCallback } from 'react';
 import {
     View,
-    Text,
     ScrollView,
     Animated,
     Platform,
@@ -12,6 +11,8 @@ import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles/theme';
 import { normalizeTheme } from '@oxyhq/core';
 import { Button } from '@oxyhq/bloom/button';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { H4 } from '@oxyhq/bloom/typography';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import QRCode from 'react-native-qrcode-svg';
@@ -22,7 +23,6 @@ import PaymentDetailsStep from '../components/payment/PaymentDetailsStep';
 import PaymentReviewStep from '../components/payment/PaymentReviewStep';
 import PaymentSuccessStep from '../components/payment/PaymentSuccessStep';
 import { PAYMENT_METHODS } from '../components/payment/constants';
-import { createPaymentStyles } from '../components/payment/paymentStyles';
 import type { PaymentItem, PaymentGatewayResult, CardDetails } from '../components/payment/types';
 
 export type { PaymentItem, PaymentGatewayResult };
@@ -77,9 +77,11 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     const progressAnim = useRef(new Animated.Value(0.2)).current;
 
     const normalizedTheme = normalizeTheme(theme);
+    // `colors` (PaymentColors) is the contract the wizard step components consume.
     const colors = useThemeColors(normalizedTheme);
+    // Bloom theme drives screen-shell icon roles (no hardcoded hex).
+    const bloomTheme = useTheme();
     const { t } = useI18n();
-    const styles = useMemo(() => createPaymentStyles(colors), [colors]);
 
     // Determine if the payment is for a recurring item (subscription)
     const isRecurring = paymentItems.length > 0 && paymentItems[0].type === 'subscription';
@@ -181,8 +183,11 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     // Validate amount
     if (!amount || Number.isNaN(Number(amount)) || Number(amount) <= 0) {
         return (
-            <View style={styles.errorContainer}>
-                <Text style={styles.errorText}>{t('payment.errors.invalidAmount')}</Text>
+            <View className="flex-1 bg-bg items-center justify-center px-screen-margin gap-space-24">
+                <Ionicons name="alert-circle-outline" size={48} color={bloomTheme.colors.error} />
+                <H4 className="text-text text-center">
+                    {t('payment.errors.invalidAmount')}
+                </H4>
                 <Button
                     variant="primary"
                     onPress={handleClose}
@@ -277,8 +282,12 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     };
 
     return (
-        <View style={[styles.container, { backgroundColor: colors.background }]}>
-            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        <View className="flex-1 bg-bg">
+            <ScrollView
+                className="flex-1"
+                contentContainerClassName="p-space-16"
+                showsVerticalScrollIndicator={false}
+            >
                 {renderCurrentStep()}
             </ScrollView>
         </View>