@oxyhq/services 10.5.0 → 11.1.0

package/src/ui/hooks/useProfileEditing.ts

@@ -29,6 +29,9 @@ export interface ProfileUpdateData {
     links?: string[];
     linksMetadata?: ProfileLinkMetadata[];
     avatar?: string;
+    phone?: string;
+    address?: string;
+    birthday?: string;
 }
 
 type ProfileFieldValue = string | ProfileLocation[] | ProfileLinkMetadata[];
@@ -81,6 +84,15 @@ export const useProfileEditing = () => {
         if (updates.avatar !== undefined) {
             updateData.avatar = updates.avatar;
         }
+        if (updates.phone !== undefined) {
+            updateData.phone = updates.phone;
+        }
+        if (updates.address !== undefined) {
+            updateData.address = updates.address;
+        }
+        if (updates.birthday !== undefined) {
+            updateData.birthday = updates.birthday;
+        }
 
         // Handle name field
         if (updates.firstName !== undefined || updates.lastName !== undefined) {
@@ -124,6 +136,18 @@ export const useProfileEditing = () => {
                 if (typeof value !== 'string') return false;
                 updates.bio = value;
                 break;
+            case 'phone':
+                if (typeof value !== 'string') return false;
+                updates.phone = value;
+                break;
+            case 'address':
+                if (typeof value !== 'string') return false;
+                updates.address = value;
+                break;
+            case 'birthday':
+                if (typeof value !== 'string') return false;
+                updates.birthday = value;
+                break;
             case 'location':
                 if (!isProfileLocationArray(value)) return false;
                 updates.locations = value;

package/src/ui/hooks/useSessionManagement.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { ApiError, User } from '@oxyhq/core';
+import { isDev, type ApiError, type User } from '@oxyhq/core';
 import type { ClientSession } from '@oxyhq/core';
 import { mergeSessions, normalizeAndSortSessions, sessionsArraysEqual } from '@oxyhq/core';
 import { fetchSessionsWithFallback, validateSessionBatch } from '../utils/sessionHelpers';
@@ -30,7 +30,7 @@ export interface UseSessionManagementResult {
   sessions: ClientSession[];
   activeSessionId: string | null;
   setActiveSessionId: (sessionId: string | null) => void;
-  updateSessions: (incoming: ClientSession[], options?: { merge?: boolean }) => void;
+  updateSessions: (incoming: ClientSession[], options?: { merge?: boolean; preserveSessionIds?: string[] }) => void;
   switchSession: (sessionId: string) => Promise<User>;
   refreshSessions: (activeUserId?: string) => Promise<void>;
   clearSessionState: () => Promise<void>;
@@ -86,7 +86,7 @@ export const useSessionManagement = ({
       } catch (error) {
         if (logger) {
           logger(DEFAULT_SAVE_ERROR_MESSAGE, error);
-        } else if (__DEV__) {
+        } else if (isDev()) {
           console.warn('Failed to save session IDs:', error);
         }
       }
@@ -95,14 +95,17 @@ export const useSessionManagement = ({
   );
 
   const updateSessions = useCallback(
-    (incoming: ClientSession[], options: { merge?: boolean } = {}): void => {
+    (incoming: ClientSession[], options: { merge?: boolean; preserveSessionIds?: string[] } = {}): void => {
       setSessions((prevSessions) => {
         const processed = options.merge
           ? mergeSessions(prevSessions, incoming, activeSessionIdRef.current, false)
           : normalizeAndSortSessions(incoming, activeSessionIdRef.current, false);
 
         if (storage) {
-          void saveSessionIds(processed.map((session) => session.sessionId));
+          void saveSessionIds([
+            ...processed.map((session) => session.sessionId),
+            ...(options.preserveSessionIds ?? []),
+          ]);
         }
 
         if (sessionsArraysEqual(prevSessions, processed)) {
@@ -309,7 +312,7 @@ export const useSessionManagement = ({
           });
           updateSessions(deviceSessions, { merge: true });
         } catch (error) {
-          if (__DEV__) {
+          if (isDev()) {
             console.warn('Failed to synchronize sessions after switch:', error);
           }
         }

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -1,36 +1,38 @@
 import React, { useState, useCallback } from 'react';
 import {
     View,
-    Text,
-    StyleSheet,
     ScrollView,
-    TextInput,
-    TouchableOpacity,
-    ActivityIndicator,
+    StyleSheet,
+    Platform,
+    KeyboardAvoidingView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { H4, Text } from '@oxyhq/bloom/typography';
+import { Button } from '@oxyhq/bloom/button';
+import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
+import { IconCircle } from '@oxyhq/bloom/icon-circle';
+import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
+import * as Icons from '@oxyhq/bloom/icons';
 import Header from '../components/Header';
-import { SettingsListGroup } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
-import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 
 const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     onClose,
-    theme,
     goBack,
 }) => {
     // Use useOxy() hook for OxyContext values
-    const { oxyServices, user } = useOxy();
+    const { oxyServices } = useOxy();
     const { t } = useI18n();
+    const bloomTheme = useTheme();
+
     const [reason, setReason] = useState('');
     const [evidence, setEvidence] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [successMessage, setSuccessMessage] = useState('');
 
-    const bloomTheme = useTheme();
-
     // Dialog controls
     const successDialog = useDialogControl();
 
@@ -74,90 +76,117 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
         }
     }, [reason, evidence, oxyServices, t, successDialog]);
 
+    const canSubmit = Boolean(reason.trim()) && !isSubmitting;
+
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <KeyboardAvoidingView
+            className="flex-1 bg-bg"
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        >
             <Header
                 title={t('accountVerification.title') || 'Account Verification'}
-
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
             />
 
-            <ScrollView style={styles.content}>
-                <SettingsListGroup>
-                    <Text style={styles.description} className="text-muted-foreground">
+            <ScrollView
+                className="flex-1 px-screen-margin"
+                showsVerticalScrollIndicator={false}
+                contentContainerClassName="pb-space-32"
+                keyboardShouldPersistTaps="handled"
+            >
+                {/* Hero */}
+                <View className="items-center py-space-24 gap-space-12">
+                    <IconCircle icon={Icons.Verified_Stroke2_Corner2_Rounded} />
+                    <H4 className="text-headerBold font-headerBold text-text text-center">
+                        {t('accountVerification.heroTitle') || 'Get a verified badge'}
+                    </H4>
+                    <Text className="font-sans text-body text-text-secondary text-center">
                         {t('accountVerification.description') || 'Request a verified badge for your account. Verified accounts help establish authenticity and credibility.'}
                     </Text>
-                </SettingsListGroup>
-
-                <SettingsListGroup title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'}>
-                    <View style={styles.inputGroup}>
-                        <Text style={styles.label} className="text-foreground">
-                            {t('accountVerification.reasonLabel') || 'Reason for Verification *'}
-                        </Text>
-                        <TextInput
-                            style={[
-                                styles.textInput,
-                                styles.textArea,
-                            ]}
-                            className="bg-secondary text-foreground border-border"
+                </View>
+
+                {/* Benefits */}
+                <BenefitList
+                    className="mb-space-24"
+                    accessibilityLabel={t('accountVerification.sections.benefits') || 'What verification gives you'}
+                >
+                    <BenefitRow
+                        icon={<Icons.ShieldCheck_Stroke2_Corner0_Rounded size="sm" style={{ color: bloomTheme.colors.primary }} />}
+                        label={t('accountVerification.benefits.authenticity') || 'Confirms your identity is authentic and trusted'}
+                    />
+                    <BenefitRow
+                        icon={<Icons.Verified_Stroke2_Corner2_Rounded size="sm" style={{ color: bloomTheme.colors.primary }} />}
+                        label={t('accountVerification.benefits.badge') || 'Displays a verified badge across the platform'}
+                    />
+                    <BenefitRow
+                        icon={<Icons.Sparkle_Stroke2_Corner0_Rounded size="sm" style={{ color: bloomTheme.colors.primary }} />}
+                        label={t('accountVerification.benefits.credibility') || 'Builds credibility with people who follow you'}
+                    />
+                </BenefitList>
+
+                {/* Verification request form */}
+                <Text className="text-sectionTitle font-sectionTitle text-text-secondary mb-space-12">
+                    {t('accountVerification.sections.request') || 'VERIFICATION REQUEST'}
+                </Text>
+
+                <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
+                    <TextField>
+                        <TextFieldInput
+                            floatingLabel
+                            label={t('accountVerification.reasonLabel') || 'Reason for Verification *'}
                             value={reason}
                             onChangeText={setReason}
                             placeholder={t('accountVerification.reasonPlaceholder') || 'Explain why you need a verified badge (e.g., public figure, brand, organization)'}
-                            placeholderTextColor={bloomTheme.colors.textSecondary}
                             multiline
                             numberOfLines={4}
                             textAlignVertical="top"
                             editable={!isSubmitting}
+                            style={styles.multiline}
                         />
-                    </View>
-
-                    <View style={styles.inputGroup}>
-                        <Text style={styles.label} className="text-foreground">
-                            {t('accountVerification.evidenceLabel') || 'Evidence (Optional)'}
-                        </Text>
-                        <TextInput
-                            style={[
-                                styles.textInput,
-                                styles.textArea,
-                            ]}
-                            className="bg-secondary text-foreground border-border"
+                    </TextField>
+
+                    <TextField>
+                        <TextFieldInput
+                            floatingLabel
+                            label={t('accountVerification.evidenceLabel') || 'Evidence (Optional)'}
                             value={evidence}
                             onChangeText={setEvidence}
                             placeholder={t('accountVerification.evidencePlaceholder') || 'Provide any supporting documentation or links (e.g., official website, social media profiles)'}
-                            placeholderTextColor={bloomTheme.colors.textSecondary}
                             multiline
                             numberOfLines={4}
                             textAlignVertical="top"
                             editable={!isSubmitting}
+                            style={styles.multiline}
                         />
-                    </View>
-                </SettingsListGroup>
-
-                <SettingsListGroup>
-                    <TouchableOpacity
-                        style={styles.submitButton}
-                        className={isSubmitting ? 'bg-muted-foreground' : 'bg-primary'}
-                        onPress={handleSubmit}
-                        disabled={isSubmitting || !reason.trim()}
-                    >
-                        {isSubmitting ? (
-                            <ActivityIndicator color={bloomTheme.colors.negativeForeground} />
-                        ) : (
-                            <Text style={[styles.submitButtonText, { color: bloomTheme.colors.negativeForeground }]}>
-                                {t('accountVerification.submit') || 'Submit Request'}
-                            </Text>
-                        )}
-                    </TouchableOpacity>
-                </SettingsListGroup>
-
-                <SettingsListGroup>
-                    <Text style={styles.note} className="text-muted-foreground">
+                    </TextField>
+                </View>
+
+                <Button
+                    variant="primary"
+                    size="large"
+                    fullWidth
+                    className="mt-space-24"
+                    onPress={handleSubmit}
+                    disabled={!canSubmit}
+                    loading={isSubmitting}
+                    accessibilityLabel={t('accountVerification.submit') || 'Submit Request'}
+                >
+                    {t('accountVerification.submit') || 'Submit Request'}
+                </Button>
+
+                <View className="flex-row items-start gap-space-8 mt-space-24">
+                    <Icons.CircleInfo_Stroke2_Corner0_Rounded
+                        size="sm"
+                        style={{ color: bloomTheme.colors.textTertiary }}
+                    />
+                    <Text className="flex-1 font-sans text-caption text-text-tertiary">
                         {t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.'}
                     </Text>
-                </SettingsListGroup>
+                </View>
             </ScrollView>
+
             <Dialog
                 control={successDialog}
                 title={t('accountVerification.successTitle') || 'Request Submitted'}
@@ -169,57 +198,16 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                     },
                 ]}
             />
-        </View>
+        </KeyboardAvoidingView>
     );
 };
 
+// Measured layout only (no color): give the multiline inputs a comfortable
+// minimum height so the floating-label textarea has room. Colors/typography
+// come from the Bloom TextFieldInput chrome + token classes.
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flex: 1,
-        padding: 16,
-    },
-    description: {
-        fontSize: 16,
-        lineHeight: 24,
-        marginBottom: 8,
-    },
-    inputGroup: {
-        marginBottom: 24,
-    },
-    label: {
-        fontSize: 16,
-        fontWeight: '500',
-        marginBottom: 8,
-    },
-    textInput: {
-        borderWidth: 1,
-        borderRadius: 8,
-        padding: 12,
-        fontSize: 16,
-        minHeight: 44,
-    },
-    textArea: {
-        minHeight: 100,
-        paddingTop: 12,
-    },
-    submitButton: {
-        borderRadius: 8,
-        padding: 16,
-        alignItems: 'center',
-        justifyContent: 'center',
-        minHeight: 50,
-    },
-    submitButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    note: {
-        fontSize: 14,
-        lineHeight: 20,
-        fontStyle: 'italic',
+    multiline: {
+        minHeight: 96,
     },
 });