@oxyhq/services 5.11.11 → 5.12.0

package/lib/module/ui/screens/AccountSettingsScreen.js

@@ -4,11 +4,14 @@ import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, TextInput, Animated, Platform, Image } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import OxyIcon from '../components/icon/OxyIcon';
+import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { fontFamilies } from '../styles/fonts';
 import { confirmAction } from '../utils/confirmAction';
 import { useAuthStore } from '../stores/authStore';
 import { Header, GroupedSection } from '../components';
+import { useI18n } from '../hooks/useI18n';
+import QRCode from 'react-native-qrcode-svg';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AccountSettingsScreen = ({
   onClose,
@@ -21,12 +24,24 @@ const AccountSettingsScreen = ({
     oxyServices,
     isLoading: authLoading,
     isAuthenticated,
-    showBottomSheet
+    showBottomSheet,
+    activeSessionId
   } = useOxy();
+  const {
+    t
+  } = useI18n();
   const updateUser = useAuthStore(state => state.updateUser);
   const [isLoading, setIsLoading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
 
+  // Two-Factor (TOTP) state
+  const [totpSetupUrl, setTotpSetupUrl] = useState(null);
+  const [totpCode, setTotpCode] = useState('');
+  const [isTotpBusy, setIsTotpBusy] = useState(false);
+  const [showRecoveryModal, setShowRecoveryModal] = useState(false);
+  const [generatedBackupCodes, setGeneratedBackupCodes] = useState(null);
+  const [generatedRecoveryKey, setGeneratedRecoveryKey] = useState(null);
+
   // Animation refs
   const saveButtonScale = useRef(new Animated.Value(1)).current;
 
@@ -182,7 +197,7 @@ const AccountSettingsScreen = ({
         updates.avatar = avatarFileId;
       }
       await updateUser(updates, oxyServices);
-      toast.success('Profile updated successfully');
+      toast.success(t('editProfile.toasts.profileUpdated') || 'Profile updated successfully');
       animateSaveButton(1); // Scale back to normal
 
       if (onClose) {
@@ -191,16 +206,16 @@ const AccountSettingsScreen = ({
         goBack();
       }
     } catch (error) {
-      toast.error(error.message || 'Failed to update profile');
+      toast.error(error.message || t('editProfile.toasts.updateFailed') || 'Failed to update profile');
       animateSaveButton(1); // Scale back to normal on error
     } finally {
       setIsSaving(false);
     }
   };
   const handleAvatarRemove = () => {
-    confirmAction('Remove your profile picture?', () => {
+    confirmAction(t('editProfile.confirms.removeAvatar') || 'Remove your profile picture?', () => {
       setAvatarFileId('');
-      toast.success('Avatar removed');
+      toast.success(t('editProfile.toasts.avatarRemoved') || 'Avatar removed');
     });
   };
   const openAvatarPicker = useCallback(() => {
@@ -212,16 +227,16 @@ const AccountSettingsScreen = ({
         afterSelect: 'back',
         onSelect: file => {
           if (!file.contentType.startsWith('image/')) {
-            toast.error('Please select an image file');
+            toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file');
             return;
           }
           // If already selected, do nothing
           if (file.id === avatarFileId) {
-            toast.info?.('Avatar unchanged');
+            toast.info?.(t('editProfile.toasts.avatarUnchanged') || 'Avatar unchanged');
             return;
           }
           setAvatarFileId(file.id);
-          toast.success('Avatar selected');
+          toast.success(t('editProfile.toasts.avatarSelected') || 'Avatar selected');
           // Auto-save avatar immediately (does not close edit profile screen)
           (async () => {
             try {
@@ -232,10 +247,10 @@ const AccountSettingsScreen = ({
               }, oxyServices);
               // Force refresh current user cache (updateUser already does a fetch with force=true internally)
               // Extra safeguard: ensure avatarFileId reflects saved id (already set) and trigger any dependent UI.
-              toast.success('Avatar updated');
+              toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
             } catch (e) {
               console.error('[AccountSettings] Failed to auto-save avatar', e);
-              toast.error(e.message || 'Failed to update avatar');
+              toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
             } finally {
               setIsSaving(false);
             }
@@ -268,6 +283,11 @@ const AccountSettingsScreen = ({
         // Don't reset the metadata - keep the existing rich metadata
         // The tempLinksWithMetadata should already contain the rich data from the database
         break;
+      case 'twoFactor':
+        // Reset TOTP temp state
+        setTotpSetupUrl(null);
+        setTotpCode('');
+        break;
     }
     setEditingField(type);
   };
@@ -399,6 +419,179 @@ const AccountSettingsScreen = ({
     });
   };
   const renderEditingField = type => {
+    if (type === 'twoFactor') {
+      const enabled = !!user?.privacySettings?.twoFactorEnabled;
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.editingFieldContainer, {
+          backgroundColor: themeStyles.backgroundColor
+        }],
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.editingFieldContent,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.newValueSection,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.editingFieldHeader,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.editingFieldLabel, {
+                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                }],
+                children: "Two\u2011Factor Authentication (TOTP)"
+              })
+            }), !enabled ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.editingFieldDescription,
+                children: "Protect your account with a 6\u2011digit code from an authenticator app. Scan the QR code then enter the code to enable."
+              }), !totpSetupUrl ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+                style: styles.primaryButton,
+                disabled: isTotpBusy,
+                onPress: async () => {
+                  if (!activeSessionId) {
+                    toast.error(t('editProfile.toasts.noActiveSession') || 'No active session');
+                    return;
+                  }
+                  setIsTotpBusy(true);
+                  try {
+                    const {
+                      otpauthUrl
+                    } = await oxyServices.startTotpEnrollment(activeSessionId);
+                    setTotpSetupUrl(otpauthUrl);
+                  } catch (e) {
+                    toast.error(e?.message || t('editProfile.toasts.totpStartFailed') || 'Failed to start TOTP enrollment');
+                  } finally {
+                    setIsTotpBusy(false);
+                  }
+                },
+                children: [/*#__PURE__*/_jsx(Ionicons, {
+                  name: "shield-checkmark",
+                  size: 18,
+                  color: "#fff"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.primaryButtonText,
+                  children: "Generate QR Code"
+                })]
+              }) : /*#__PURE__*/_jsxs(View, {
+                style: {
+                  alignItems: 'center',
+                  gap: 16
+                },
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: {
+                    padding: 16,
+                    backgroundColor: '#fff',
+                    borderRadius: 12
+                  },
+                  children: /*#__PURE__*/_jsx(QRCode, {
+                    value: totpSetupUrl,
+                    size: 180
+                  })
+                }), /*#__PURE__*/_jsxs(View, {
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.editingFieldLabel,
+                    children: "Enter 6\u2011digit code"
+                  }), /*#__PURE__*/_jsx(TextInput, {
+                    style: styles.editingFieldInput,
+                    keyboardType: "number-pad",
+                    placeholder: "123456",
+                    value: totpCode,
+                    onChangeText: setTotpCode,
+                    maxLength: 6
+                  })]
+                }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+                  style: styles.primaryButton,
+                  disabled: isTotpBusy || totpCode.length !== 6,
+                  onPress: async () => {
+                    if (!activeSessionId) {
+                      toast.error(t('editProfile.toasts.noActiveSession') || 'No active session');
+                      return;
+                    }
+                    setIsTotpBusy(true);
+                    try {
+                      const result = await oxyServices.verifyTotpEnrollment(activeSessionId, totpCode);
+                      await updateUser({
+                        privacySettings: {
+                          twoFactorEnabled: true
+                        }
+                      }, oxyServices);
+                      if (result?.backupCodes || result?.recoveryKey) {
+                        setGeneratedBackupCodes(result.backupCodes || null);
+                        setGeneratedRecoveryKey(result.recoveryKey || null);
+                        setShowRecoveryModal(true);
+                      } else {
+                        toast.success(t('editProfile.toasts.twoFactorEnabled') || 'Two‑Factor Authentication enabled');
+                        setEditingField(null);
+                      }
+                    } catch (e) {
+                      toast.error(e?.message || t('editProfile.toasts.invalidCode') || 'Invalid code');
+                    } finally {
+                      setIsTotpBusy(false);
+                    }
+                  },
+                  children: [/*#__PURE__*/_jsx(Ionicons, {
+                    name: "checkmark-circle",
+                    size: 18,
+                    color: "#fff"
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.primaryButtonText,
+                    children: "Verify & Enable"
+                  })]
+                })]
+              })]
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.editingFieldDescription,
+                children: "Two\u2011Factor Authentication is currently enabled. To disable, enter a code from your authenticator app."
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.editingFieldLabel,
+                  children: "Enter 6\u2011digit code"
+                }), /*#__PURE__*/_jsx(TextInput, {
+                  style: styles.editingFieldInput,
+                  keyboardType: "number-pad",
+                  placeholder: "123456",
+                  value: totpCode,
+                  onChangeText: setTotpCode,
+                  maxLength: 6
+                })]
+              }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+                style: [styles.primaryButton, {
+                  backgroundColor: '#d9534f'
+                }],
+                disabled: isTotpBusy || totpCode.length !== 6,
+                onPress: async () => {
+                  if (!activeSessionId) {
+                    toast.error(t('editProfile.toasts.noActiveSession') || 'No active session');
+                    return;
+                  }
+                  setIsTotpBusy(true);
+                  try {
+                    await oxyServices.disableTotp(activeSessionId, totpCode);
+                    await updateUser({
+                      privacySettings: {
+                        twoFactorEnabled: false
+                      }
+                    }, oxyServices);
+                    toast.success(t('editProfile.toasts.twoFactorDisabled') || 'Two‑Factor Authentication disabled');
+                    setEditingField(null);
+                  } catch (e) {
+                    toast.error(e?.message || t('editProfile.toasts.disableFailed') || 'Failed to disable');
+                  } finally {
+                    setIsTotpBusy(false);
+                  }
+                },
+                children: [/*#__PURE__*/_jsx(Ionicons, {
+                  name: "close-circle",
+                  size: 18,
+                  color: "#fff"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.primaryButtonText,
+                  children: "Disable 2FA"
+                })]
+              })]
+            })]
+          })
+        })
+      });
+    }
     if (type === 'displayName') {
       return /*#__PURE__*/_jsx(View, {
         style: [styles.editingFieldContainer, {
@@ -940,11 +1133,11 @@ const AccountSettingsScreen = ({
           style: [styles.editingBottomTitle, {
             color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
           }],
-          children: editingField === 'displayName' ? 'Display Name' : editingField === 'username' ? 'Username' : editingField === 'email' ? 'Email' : editingField === 'bio' ? 'Bio' : editingField === 'location' ? 'Location' : editingField === 'links' ? 'Links' : 'Field'
+          children: editingField === 'displayName' ? t('editProfile.items.displayName.title') || 'Display Name' : editingField === 'username' ? t('editProfile.items.username.title') || 'Username' : editingField === 'email' ? t('editProfile.items.email.title') || 'Email' : editingField === 'bio' ? t('editProfile.items.bio.title') || 'Bio' : editingField === 'location' ? t('editProfile.items.locations.title') || 'Location' : editingField === 'links' ? t('editProfile.items.links.title') || 'Links' : 'Field'
         })]
       })]
     }) : /*#__PURE__*/_jsx(Header, {
-      title: "Edit Profile",
+      title: t('editProfile.title') || 'Edit Profile',
       theme: theme,
       onBack: goBack || onClose,
       rightAction: {
@@ -966,11 +1159,115 @@ const AccountSettingsScreen = ({
       /*#__PURE__*/
       // Show all settings when not editing
       _jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(View, {
+        children: [showRecoveryModal && /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0,0,0,0.6)',
+            zIndex: 50,
+            padding: 16,
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            style: {
+              backgroundColor: '#fff',
+              borderRadius: 16,
+              padding: 20,
+              maxHeight: '80%'
+            },
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: {
+                fontSize: 18,
+                fontWeight: '700',
+                marginBottom: 12
+              },
+              children: "Save These Codes Now"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: {
+                fontSize: 14,
+                color: '#444',
+                marginBottom: 12
+              },
+              children: "Backup codes and your Recovery Key are shown only once. Store them securely (paper or password manager)."
+            }), generatedBackupCodes && generatedBackupCodes.length > 0 && /*#__PURE__*/_jsxs(View, {
+              style: {
+                marginBottom: 12
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: {
+                  fontSize: 16,
+                  fontWeight: '600',
+                  marginBottom: 8
+                },
+                children: "Backup Codes"
+              }), /*#__PURE__*/_jsx(View, {
+                style: {
+                  backgroundColor: '#F8F9FA',
+                  borderRadius: 8,
+                  padding: 12
+                },
+                children: generatedBackupCodes.map((c, idx) => /*#__PURE__*/_jsx(Text, {
+                  style: {
+                    fontFamily: Platform.OS === 'web' ? 'monospace' : 'monospace',
+                    fontSize: 14,
+                    marginBottom: 4
+                  },
+                  children: c
+                }, idx))
+              })]
+            }), generatedRecoveryKey && /*#__PURE__*/_jsxs(View, {
+              style: {
+                marginBottom: 12
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: {
+                  fontSize: 16,
+                  fontWeight: '600',
+                  marginBottom: 8
+                },
+                children: "Recovery Key"
+              }), /*#__PURE__*/_jsx(View, {
+                style: {
+                  backgroundColor: '#F8F9FA',
+                  borderRadius: 8,
+                  padding: 12
+                },
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: {
+                    fontFamily: Platform.OS === 'web' ? 'monospace' : 'monospace',
+                    fontSize: 14
+                  },
+                  children: generatedRecoveryKey
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: [styles.primaryButton, {
+                alignSelf: 'flex-end',
+                marginTop: 8
+              }],
+              onPress: () => {
+                setShowRecoveryModal(false);
+                setEditingField(null);
+                toast.success(t('editProfile.toasts.twoFactorEnabled') || 'Two‑Factor Authentication enabled');
+              },
+              children: [/*#__PURE__*/_jsx(Ionicons, {
+                name: "checkmark",
+                size: 18,
+                color: "#fff"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.primaryButtonText,
+                children: "I saved them"
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
-            children: "Profile Picture"
+            children: t('editProfile.sections.profilePicture') || 'Profile Picture'
           }), /*#__PURE__*/_jsx(GroupedSection, {
             items: [{
               id: 'profile-photo',
@@ -996,28 +1293,28 @@ const AccountSettingsScreen = ({
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
-            children: "Basic Information"
+            children: t('editProfile.sections.basicInfo') || 'Basic Information'
           }), /*#__PURE__*/_jsx(GroupedSection, {
             items: [{
               id: 'display-name',
               icon: 'person',
               iconColor: '#007AFF',
-              title: 'Display Name',
-              subtitle: [displayName, lastName].filter(Boolean).join(' ') || 'Add your display name',
+              title: t('editProfile.items.displayName.title') || 'Display Name',
+              subtitle: [displayName, lastName].filter(Boolean).join(' ') || t('editProfile.items.displayName.add') || 'Add your display name',
               onPress: () => startEditing('displayName', '')
             }, {
               id: 'username',
               icon: 'at',
               iconColor: '#5856D6',
-              title: 'Username',
-              subtitle: username || 'Choose a username',
+              title: t('editProfile.items.username.title') || 'Username',
+              subtitle: username || t('editProfile.items.username.choose') || 'Choose a username',
               onPress: () => startEditing('username', username)
             }, {
               id: 'email',
               icon: 'mail',
               iconColor: '#FF9500',
-              title: 'Email',
-              subtitle: email || 'Add your email address',
+              title: t('editProfile.items.email.title') || 'Email',
+              subtitle: email || t('editProfile.items.email.add') || 'Add your email address',
               onPress: () => startEditing('email', email)
             }],
             theme: theme
@@ -1026,21 +1323,25 @@ const AccountSettingsScreen = ({
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
-            children: "About You"
+            children: t('editProfile.sections.about') || 'About You'
           }), /*#__PURE__*/_jsx(GroupedSection, {
             items: [{
               id: 'bio',
               icon: 'document-text',
               iconColor: '#34C759',
-              title: 'Bio',
-              subtitle: bio || 'Tell people about yourself',
+              title: t('editProfile.items.bio.title') || 'Bio',
+              subtitle: bio || t('editProfile.items.bio.placeholder') || 'Tell people about yourself',
               onPress: () => startEditing('bio', bio)
             }, {
               id: 'locations',
               icon: 'location',
               iconColor: '#FF3B30',
-              title: 'Locations',
-              subtitle: tempLocations.length > 0 ? `${tempLocations.length} location${tempLocations.length !== 1 ? 's' : ''} added` : 'Add your locations',
+              title: t('editProfile.items.locations.title') || 'Locations',
+              subtitle: tempLocations.length > 0 ? tempLocations.length === 1 ? t('editProfile.items.locations.count', {
+                count: tempLocations.length
+              }) || `${tempLocations.length} location added` : t('editProfile.items.locations.count_plural', {
+                count: tempLocations.length
+              }) || `${tempLocations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
               onPress: () => startEditing('location', ''),
               customContentBelow: tempLocations.length > 0 && /*#__PURE__*/_jsxs(View, {
                 style: styles.linksPreviewContainer,
@@ -1072,8 +1373,12 @@ const AccountSettingsScreen = ({
               id: 'links',
               icon: 'link',
               iconColor: '#32D74B',
-              title: 'Links',
-              subtitle: tempLinksWithMetadata.length > 0 ? `${tempLinksWithMetadata.length} link${tempLinksWithMetadata.length !== 1 ? 's' : ''} added` : 'Add your links',
+              title: t('editProfile.items.links.title') || 'Links',
+              subtitle: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata.length === 1 ? t('editProfile.items.links.count', {
+                count: tempLinksWithMetadata.length
+              }) || `${tempLinksWithMetadata.length} link added` : t('editProfile.items.links.count_plural', {
+                count: tempLinksWithMetadata.length
+              }) || `${tempLinksWithMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
               onPress: () => startEditing('links', ''),
               multiRow: true,
               customContentBelow: tempLinksWithMetadata.length > 0 && /*#__PURE__*/_jsxs(View, {
@@ -1108,14 +1413,14 @@ const AccountSettingsScreen = ({
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
-            children: "Quick Actions"
+            children: t('editProfile.sections.quickActions') || 'Quick Actions'
           }), /*#__PURE__*/_jsx(GroupedSection, {
             items: [{
               id: 'preview-profile',
               icon: 'eye',
               iconColor: '#007AFF',
-              title: 'Preview Profile',
-              subtitle: 'See how your profile looks to others',
+              title: t('editProfile.items.previewProfile.title') || 'Preview Profile',
+              subtitle: t('editProfile.items.previewProfile.subtitle') || 'See how your profile looks to others',
               onPress: () => navigate?.('Profile', {
                 userId: user?.id
               })
@@ -1123,16 +1428,32 @@ const AccountSettingsScreen = ({
               id: 'privacy-settings',
               icon: 'shield-checkmark',
               iconColor: '#8E8E93',
-              title: 'Privacy Settings',
-              subtitle: 'Control who can see your profile',
-              onPress: () => toast.info('Privacy settings coming soon!')
+              title: t('editProfile.items.privacySettings.title') || 'Privacy Settings',
+              subtitle: t('editProfile.items.privacySettings.subtitle') || 'Control who can see your profile',
+              onPress: () => toast.info(t('editProfile.items.privacySettings.coming') || 'Privacy settings coming soon!')
             }, {
               id: 'verify-account',
               icon: 'checkmark-circle',
               iconColor: '#30D158',
-              title: 'Verify Account',
-              subtitle: 'Get a verified badge',
-              onPress: () => toast.info('Account verification coming soon!')
+              title: t('editProfile.items.verifyAccount.title') || 'Verify Account',
+              subtitle: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
+              onPress: () => toast.info(t('editProfile.items.verifyAccount.coming') || 'Account verification coming soon!')
+            }],
+            theme: theme
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: t('editProfile.sections.security') || 'Security'
+          }), /*#__PURE__*/_jsx(GroupedSection, {
+            items: [{
+              id: 'two-factor',
+              icon: 'shield-checkmark',
+              iconColor: '#007AFF',
+              title: t('editProfile.items.twoFactor.title') || 'Two‑Factor Authentication',
+              subtitle: user?.privacySettings?.twoFactorEnabled ? t('editProfile.items.twoFactor.enabled') || 'Enabled' : t('editProfile.items.twoFactor.disabled') || 'Disabled (recommended)',
+              onPress: () => startEditing('twoFactor', '')
             }],
             theme: theme
           })]
@@ -1216,6 +1537,26 @@ const styles = StyleSheet.create({
     minHeight: 52,
     fontWeight: '400'
   },
+  editingFieldDescription: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 16
+  },
+  primaryButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    backgroundColor: '#007AFF',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 10
+  },
+  primaryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600'
+  },
   editingFieldTextArea: {
     backgroundColor: '#fff',
     borderWidth: 2,