FEAT: Profile screen

app.json

@@ -6,9 +6,7 @@
       "softwareKeyboardLayoutMode": "pan",
       "googleServicesFile": "./google-services.json"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "buildNumber": "20",
       "config": {
@@ -55,4 +53,4 @@
       "bundler": "metro"
     }
   }
-}
+}

package.json

@@ -121,6 +121,7 @@
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.5",
     "expo-haptics": "~13.0.1",
+    "expo-image-picker": "~15.0.5",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-local-authentication": "~14.0.1",

src/components/FeaturedIcon.tsx

@@ -1,5 +1,5 @@
 import { Box, Icon } from '@baca/design-system'
-import { IconNames } from '@baca/types/icon'
+import { IconNames } from '@baca/types'
 
 type FeatureIconSize = 'sm' | 'md' | 'lg' | 'xl'
 

src/components/index.ts

@@ -12,3 +12,10 @@ export * from './LanguagePicker'
 export * from './Modal'
 export * from './StatusBar'
 export * from './Version'
+
+export * from './screens/profile/ProfileControlledInput'
+export * from './screens/profile/ProfileDeleteAccountButton'
+export * from './screens/profile/ProfileDetailsForm'
+export * from './screens/profile/ProfileEditImage'
+export * from './screens/profile/ProfileHeader'
+export * from './screens/profile/ProfilePasswordForm'

src/components/screens/profile/ProfileControlledInput.tsx

@@ -0,0 +1,37 @@
+import { ControlledField } from '@baca/components/organisms/ControlledField'
+import { isWeb } from '@baca/constants'
+import { Box, Text } from '@baca/design-system'
+import { useWeb } from '@baca/hooks'
+import { ProfileControlledInputProps } from '@baca/types'
+
+export const ProfileControlledInput = ({
+  label,
+  name,
+  isDisabled = false,
+  ...rest
+}: ProfileControlledInputProps) => {
+  const { shouldApplyMobileStyles } = useWeb()
+
+  return (
+    <Box
+      justifyContent="space-between"
+      flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
+      mb={isWeb ? 10 : 0}
+      maxW={800}
+    >
+      <Text.SmBold flex={1} color="text.primary" mb={2.5}>
+        {label}
+      </Text.SmBold>
+      <Box flex={isWeb ? 2 : 0}>
+        <ControlledField.Input
+          autoCapitalize="none"
+          inputMode={name === 'email' ? 'email' : 'text'}
+          name={name}
+          testID={`${name}Input`}
+          isDisabled={isDisabled}
+          {...rest}
+        />
+      </Box>
+    </Box>
+  )
+}

src/components/screens/profile/ProfileDeleteAccountButton.tsx

@@ -0,0 +1,72 @@
+import { useAuthControllerDelete } from '@baca/api/query/auth/auth'
+import { Button, Text, Spacer, Row, Box, useBottomSheet } from '@baca/design-system'
+import { useCallback, useTranslation } from '@baca/hooks'
+import { signOut } from '@baca/store/auth'
+import { showErrorToast } from '@baca/utils'
+
+export const ProfileDeleteAccountButton = () => {
+  const { t } = useTranslation()
+  const { mutateAsync: removeUserAccount, isLoading } = useAuthControllerDelete()
+
+  const { bottomSheetComponentRenderFunction, closeBottomSheet, presentBottomSheet } =
+    useBottomSheet({
+      title: '',
+      isDivider: false,
+    })
+
+  const handleRemoveUserAccount = useCallback(async () => {
+    try {
+      await removeUserAccount()
+      signOut()
+    } catch {
+      showErrorToast({
+        description: t('errors.something_went_wrong'),
+      })
+    }
+  }, [removeUserAccount, t])
+
+  const bottomSheet = bottomSheetComponentRenderFunction(
+    <Box px={4} pb={10}>
+      <Text.LgSemibold color="text.primary" pt={4} pb={2}>
+        {t('profile_screen.are_you_sure')}
+      </Text.LgSemibold>
+      <Text.SmRegular color="text.secondary" lineHeight="md">
+        {t('profile_screen.remove_account_desc')}
+      </Text.SmRegular>
+      <Row w="full" justifyContent="space-between" pt={8}>
+        <Button variant="SecondaryGray" flex={1} borderRadius={8} onPress={closeBottomSheet}>
+          {t('common.cancel')}
+        </Button>
+        <Spacer x={3} />
+        <Button
+          onPress={handleRemoveUserAccount}
+          variant="PrimaryDestructive"
+          flex={1}
+          borderRadius={8}
+          loading={isLoading}
+        >
+          {t('profile_screen.remove_account')}
+        </Button>
+      </Row>
+    </Box>,
+    {
+      name: 'delete-bin-line',
+      color: 'featured.icon.light.fg.error',
+      bgColor: 'bg.error.secondary',
+    }
+  )
+
+  return (
+    <Box borderColor="border.secondary" borderTopWidth={1} py={6} alignItems="flex-start">
+      <Button
+        leftIconName="delete-bin-line"
+        variant="SecondaryDestructive"
+        borderRadius={8}
+        onPress={presentBottomSheet}
+      >
+        {t('profile_screen.remove_account')}
+      </Button>
+      {bottomSheet}
+    </Box>
+  )
+}

src/components/screens/profile/ProfileDetailsForm.tsx

@@ -0,0 +1,62 @@
+import { Box, Button, Spacer, Row } from '@baca/design-system'
+import { useUpdateProfileForm } from '@baca/hooks'
+import { useRouter } from 'expo-router'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ProfileControlledInput } from './ProfileControlledInput'
+
+export const ProfileDetailsForm = () => {
+  const { t } = useTranslation()
+  const { control, errors, setFocus, submit, isSubmitting } = useUpdateProfileForm()
+  const { back } = useRouter()
+
+  const focusLastNameInput = useCallback(() => setFocus('lastName'), [setFocus])
+
+  return (
+    <Box>
+      <Box borderColor="border.secondary" borderTopWidth={1} py={6}>
+        <ProfileControlledInput
+          label={t('form.labels.first_name')}
+          name="firstName"
+          placeholder={t('form.placeholders.first_name')}
+          {...{ control, errors }}
+          onFocus={focusLastNameInput}
+        />
+        <ProfileControlledInput
+          label={t('form.labels.last_name')}
+          name="lastName"
+          placeholder={t('form.placeholders.last_name')}
+          {...{ control, errors }}
+        />
+        <ProfileControlledInput
+          label={t('form.labels.email')}
+          name="email"
+          placeholder={t('form.placeholders.email')}
+          {...{ control, errors }}
+          isDisabled
+          onSubmitEditing={submit}
+        />
+        <Row maxW={800} justifyContent="flex-end">
+          <Button.SecondaryColor
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            onPress={back}
+            testID="backProfileButton"
+          >
+            {t('common.cancel')}
+          </Button.SecondaryColor>
+          <Spacer x="4" />
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            onPress={submit}
+            testID="saveProfileUpdateButton"
+          >
+            {t('common.save')}
+          </Button>
+        </Row>
+      </Box>
+    </Box>
+  )
+}

src/components/screens/profile/ProfileEditImage.tsx

@@ -0,0 +1,79 @@
+import { Box, Text, Button, Row, themeColors } from '@baca/design-system'
+import * as ImagePicker from 'expo-image-picker'
+import { t } from 'i18next'
+import { useState, useCallback } from 'react'
+import { Image, StyleSheet } from 'react-native'
+
+export const ProfileEditImage: React.FC = () => {
+  const [image, setImage] = useState<string | null>(null)
+
+  const pickImage = useCallback(async () => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    })
+
+    if (!result.canceled && result.assets && result.assets.length > 0) {
+      setImage(result.assets[0].uri)
+    }
+  }, [])
+
+  return (
+    <Row style={styles.container}>
+      <Box style={styles.textContainer}>
+        <Text.SmBold color="text.primary">{t('profile_screen.your_photo')}</Text.SmBold>
+        <Text.SmRegular color="text.secondary">
+          {t('profile_screen.your_photo_description')}
+        </Text.SmRegular>
+      </Box>
+      <Box style={styles.imageContainer}>
+        {image ? (
+          <Image source={{ uri: image }} style={styles.image} />
+        ) : (
+          <Box style={styles.placeholder}>
+            <Text fontSize={11} color="Gray modern.600">
+              {t('profile_screen.photo_innerText')}
+            </Text>
+          </Box>
+        )}
+      </Box>
+      <Button onPress={pickImage}>{t('common.upload')}</Button>
+    </Row>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    maxWidth: 800,
+  },
+  image: {
+    height: '100%',
+    width: '100%',
+  },
+  imageContainer: {
+    borderRadius: 32,
+    height: 64,
+    marginBottom: 10,
+    marginRight: 82,
+    overflow: 'hidden',
+    width: 64,
+  },
+  placeholder: {
+    alignItems: 'center',
+    backgroundColor: themeColors.primitives['Gray neutral']['50'],
+    height: '100%',
+    justifyContent: 'center',
+  },
+  textContainer: {
+    flex: 1,
+    marginBottom: 30,
+    maxWidth: 260,
+    minWidth: 260,
+  },
+})

src/components/screens/profile/ProfileHeader.tsx

@@ -0,0 +1,14 @@
+import { Box, Text } from '@baca/design-system'
+import { useTranslation } from '@baca/hooks'
+
+export const ProfileHeader = () => {
+  const { t } = useTranslation()
+  return (
+    <Box>
+      <Text.LgBold color="text.primary">{t('profile_screen.profile')}</Text.LgBold>
+      <Text.MdRegular color="text.secondary">
+        {t('profile_screen.update_your_details')}
+      </Text.MdRegular>
+    </Box>
+  )
+}

src/components/screens/profile/ProfilePasswordForm.tsx

@@ -0,0 +1,54 @@
+import { Box, Button, Row } from '@baca/design-system'
+import { useCallback } from '@baca/hooks'
+import { useUpdatePasswordForm } from '@baca/hooks/forms'
+import { usePasswordValidation } from '@baca/hooks/usePasswordValidation'
+import { useTranslation } from 'react-i18next'
+import { Keyboard } from 'react-native'
+
+import { ProfileControlledInput } from './ProfileControlledInput'
+
+export const ProfilePasswordForm = () => {
+  const { t } = useTranslation()
+  const { control, errors, submit, isSubmitting, setFocus } = useUpdatePasswordForm()
+
+  const { isPasswordError, passwordSuggestions, validationFn } = usePasswordValidation()
+
+  const focusNewPasswordInput = useCallback(() => setFocus('password'), [setFocus])
+
+  return (
+    <Box borderColor="border.secondary" borderTopWidth={1} py={6}>
+      <ProfileControlledInput
+        control={control}
+        errors={errors}
+        label={t('form.labels.old_password')}
+        name="oldPassword"
+        onSubmitEditing={focusNewPasswordInput}
+        placeholder={t('form.placeholders.old_password')}
+        type="password"
+      />
+      <ProfileControlledInput
+        control={control}
+        errors={{}}
+        isInvalid={isPasswordError}
+        isRequired
+        label={t('form.labels.new_password')}
+        name="password"
+        onSubmitEditing={Keyboard.dismiss}
+        placeholder={t('form.placeholders.new_password')}
+        rules={{ validate: { validationFn } }}
+        type="password"
+      />
+      {passwordSuggestions}
+      <Row maxW={800} justifyContent="flex-end">
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          onPress={submit}
+          testID="changePasswordButton"
+        >
+          {t('common.change')}
+        </Button>
+      </Row>
+    </Box>
+  )
+}

src/design-system/bottomSheets/types.ts

@@ -1,4 +1,4 @@
-import { IconNames } from '@baca/types/icon'
+import { IconNames } from '@baca/types'
 import { BottomSheetModal } from '@gorhom/bottom-sheet'
 import { RefObject } from 'react'
 

src/design-system/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@baca/hooks'
-import { IconNames } from '@baca/types/icon'
+import { IconNames } from '@baca/types'
 import { getColorValue } from '@baca/utils'
 import {
   useMemo,

src/design-system/components/Icon.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@baca/hooks'
-import { IconNames } from '@baca/types/icon'
+import { IconNames } from '@baca/types'
 import { getColorValue } from '@baca/utils'
 import { createIconSetFromIcoMoon } from '@expo/vector-icons'
 import iconJson from 'assets/icomoon/selection.json'

src/design-system/components/types.ts

@@ -1,5 +1,5 @@
 import { FontWeight, TextFontSize, _appTheme } from '@baca/design-system'
-import { IconNames } from '@baca/types/icon'
+import { IconNames } from '@baca/types'
 import { DimensionValue, TextStyle, ViewProps, ViewStyle, TextInputProps } from 'react-native'
 
 import { BoxProps } from './Box'

src/hooks/forms/index.ts

@@ -4,3 +4,4 @@ export * from './useSignInForm'
 export * from './useSignUpForm'
 export * from './useTestForm'
 export * from './useUpdateProfileForm'
+export * from './useUpdatePasswordForm'