Registration confirm

app/(app)/(common)/confirm-email.tsx

@@ -0,0 +1,3 @@
+import { ConfirmEmail } from '@baca/screens'
+
+export default ConfirmEmail

src/api/axios/custom-instance.ts

@@ -1,11 +1,10 @@
 // custom-instance.ts
 
 import { ENV, SECOND_IN_MS } from '@baca/constants'
-import { getApiError } from '@baca/utils'
+import { getApiError, showErrorToast } from '@baca/utils'
 import Axios, { AxiosError, AxiosRequestConfig } from 'axios'
 import i18n from 'i18next'
 import qs from 'qs'
-import { notify } from 'react-native-notificated'
 
 import { injectTokenToRequest } from './interceptors'
 
@@ -45,9 +44,7 @@ AXIOS_INSTANCE.interceptors.response.use(
 
     // TODO: we should handle certain error type
     if (errorMessage) {
-      notify('error', {
-        params: { title: 'ERROR', description: i18n.t('errors.something_went_wrong') },
-      })
+      showErrorToast({ title: 'ERROR', description: i18n.t('errors.something_went_wrong') })
       //CONFIG: Add errors in getApiError
       const api_error = getApiError(errorMessage)
 

src/components/AppLoading.tsx

@@ -1,4 +1,4 @@
-import { AbsoluteFullFill, Loader, Center } from '@baca/design-system/components'
+import { Loader, Center } from '@baca/design-system/components'
 import { useBoolean, useCachedResources, useFonts } from '@baca/hooks'
 import { isSignedInAtom } from '@baca/store/auth'
 import * as SplashScreen from 'expo-splash-screen'
@@ -68,14 +68,13 @@ export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <View style={styles.container} onLayout={onLayoutRootView}>
-      {isLoading ? null : children}
       {isLoading || isDelayLoading ? (
-        <AbsoluteFullFill bg="fg.white">
-          <Center flex={1}>
-            <Loader type="bubbles" />
-          </Center>
-        </AbsoluteFullFill>
-      ) : null}
+        <Center bg="bg.primary" flexGrow={1}>
+          <Loader type="bubbles" />
+        </Center>
+      ) : (
+        children
+      )}
     </View>
   )
 }

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

@@ -1,4 +1,5 @@
 import { useColorScheme } from '@baca/contexts'
+import { IconNames } from '@baca/types/icon'
 import { getColorValue } from '@baca/utils'
 import {
   useMemo,
@@ -30,23 +31,24 @@ import {
   theme,
 } from '../../config'
 import { generateStyledComponent } from '../../utils'
-import { Box } from '../Box'
+import { Icon } from '../Icon'
 import { Loader } from '../Loader'
+import { Row } from '../Row'
 import { Text } from '../Text'
 import { useHover } from '../Touchables/useHover'
 import { StyledProps } from '../types'
 
 export type ButtonProps = StyledProps &
   PressableProps & {
-    title?: string
-    variant?: ButtonVariant
-    size?: ButtonSize
-    loading?: boolean
     disabled?: boolean
-    leftIcon?: JSX.Element
-    rightIcon?: JSX.Element
+    leftIconName?: IconNames
     loaderElement?: JSX.Element
+    loading?: boolean
+    rightIconName?: IconNames
+    size?: ButtonSize
     textStyle?: StyleProp<TextStyle>
+    title?: string
+    variant?: ButtonVariant
   }
 
 const styles = StyleSheet.create({
@@ -68,16 +70,16 @@ const RawButton = memo(
   forwardRef<View, ButtonProps>(
     (
       {
-        variant = 'Primary',
-        size = 'md',
-        loading,
+        children,
         disabled,
-        leftIcon,
-        rightIcon,
+        leftIconName,
+        loading,
+        rightIconName,
+        size = 'md',
         style,
-        title,
-        children,
         textStyle,
+        title,
+        variant = 'Primary',
         ...props
       },
       ref
@@ -225,6 +227,15 @@ const RawButton = memo(
         ]
       )
 
+      const getIconColor = useCallback(
+        ({ pressed }: PressableStateCallbackType): ColorNames | undefined => {
+          if (disabled) return disabledStyle.color
+          if (pressed || isHovered) return hoveredStyle.color
+          return defaultStyle.color
+        },
+        [defaultStyle.color, disabled, disabledStyle.color, hoveredStyle.color, isHovered]
+      )
+
       const pressableTextStyleFunction = useCallback(
         ({ pressed }: PressableStateCallbackType) =>
           StyleSheet.flatten([
@@ -236,11 +247,17 @@ const RawButton = memo(
         [hoverColorStyle, defaultColorStyle, disabled, disabledColorStyle, textStyle]
       )
 
+      const iconElement = useCallback(
+        (props: PressableStateCallbackType, iconName?: IconNames) => {
+          return iconName ? (
+            <Icon name={iconName} size={buttonSizeVariant.iconSize} color={getIconColor(props)} />
+          ) : null
+        },
+        [buttonSizeVariant.iconSize, getIconColor]
+      )
+
       const childrenElement = useCallback(
         (props: PressableStateCallbackType) => {
-          if (loading) {
-            return <Loader type="default" size={24} />
-          }
           if (title) {
             return (
               <Text
@@ -253,7 +270,6 @@ const RawButton = memo(
               </Text>
             )
           }
-
           if (typeof children === 'string') {
             return (
               <Text
@@ -266,25 +282,31 @@ const RawButton = memo(
               </Text>
             )
           }
-          return children
+          return <>{children}</>
         },
-        [buttonSizeVariant.textVariant, children, loading, pressableTextStyleFunction, title]
+
+        [buttonSizeVariant.textVariant, children, pressableTextStyleFunction, title]
       )
 
       return (
         <Pressable
           accessibilityRole="button"
+          disabled={disabled || loading}
           role="button"
           style={pressableStyleFunction}
           testID="baseButton"
-          {...{ disabled, ...hoverProps, ref, ...props }}
+          {...{ ...hoverProps, ref, ...props }}
         >
-          {(props: PressableStateCallbackType) => (
-            <>
-              {leftIcon && <Box mr={buttonSizeVariant.iconGap}>{leftIcon}</Box>}
-              {childrenElement(props)}
-              {rightIcon && <Box ml={buttonSizeVariant.iconGap}>{rightIcon}</Box>}
-            </>
+          {loading ? (
+            <Loader type="default" size={24} />
+          ) : (
+            (props: PressableStateCallbackType) => (
+              <Row gap={buttonSizeVariant.iconGap}>
+                {leftIconName && iconElement(props, leftIconName)}
+                {childrenElement(props)}
+                {rightIconName && iconElement(props, leftIconName)}
+              </Row>
+            )
           )}
         </Pressable>
       )

src/design-system/components/Button/__snapshots__/Button.test.tsx.snap

@@ -48,24 +48,38 @@ exports[`Button renders correctly 1`] = `
   }
   testID="baseButton"
 >
-  <Text
-    allowFontScaling={false}
+  <View
+    flexDirection="row"
+    gap={4}
     style={
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Inter_Semibold",
-        "fontSize": 14,
-        "fontStyle": "normal",
-        "fontWeight": "400",
-        "lineHeight": 21,
-        "textAlign": "center",
-        "textTransform": "none",
-      }
+      [
+        {
+          "flexDirection": "row",
+          "gap": 16,
+        },
+        undefined,
+      ]
     }
-    testID="baseText"
-    textAlign="center"
   >
-    Button
-  </Text>
+    <Text
+      allowFontScaling={false}
+      style={
+        {
+          "color": "#FFFFFF",
+          "fontFamily": "Inter_Semibold",
+          "fontSize": 14,
+          "fontStyle": "normal",
+          "fontWeight": "400",
+          "lineHeight": 21,
+          "textAlign": "center",
+          "textTransform": "none",
+        }
+      }
+      testID="baseText"
+      textAlign="center"
+    >
+      Button
+    </Text>
+  </View>
 </View>
 `;

src/design-system/components/types.ts

@@ -17,6 +17,7 @@ type Sizing =
   | 'minHeight'
   | 'maxH'
   | 'maxHeight'
+
 export type SizingValue =
   | keyof typeof _appTheme.size
   | DimensionValue
@@ -49,6 +50,8 @@ export type Spacing =
   | 'pb'
   | 'px'
   | 'py'
+  | 'gap'
+
 export type SpacingProps = {
   [key in Spacing]?: SizingValue
 }

src/design-system/utils/generateStyledSystem.ts

@@ -1,4 +1,4 @@
-import { hex2rgba, getColorValue, removeFalsyProperties } from '@baca/utils'
+import { getColorValue, hex2rgba, removeFalsyProperties } from '@baca/utils'
 import { ImageStyle, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
 
 import { generateSize } from './generateSize'
@@ -55,6 +55,7 @@ const generateSpacingStyle = ({
   pb,
   px,
   py,
+  gap,
 }: SpacingProps): StyleProp<ViewStyle> => {
   const style: StyleProp<ViewStyle> = [
     generateSize(p, 'padding'),
@@ -71,6 +72,7 @@ const generateSpacingStyle = ({
     generateSize(mt, 'marginTop'),
     generateSize(ml, 'marginLeft'),
     generateSize(mr, 'marginRight'),
+    generateSize(gap, 'gap'),
   ]
 
   return style.filter(Boolean)

src/hooks/forms/useSignInForm.ts

@@ -2,8 +2,7 @@ import { useAuthControllerLogin } from '@baca/api/query/auth/auth'
 import { AuthEmailLoginDto } from '@baca/api/types'
 import { setToken } from '@baca/services'
 import { isSignedInAtom } from '@baca/store/auth'
-import { hapticImpact } from '@baca/utils'
-import { handleFormError } from '@baca/utils/handleFormErrors'
+import { handleFormError, hapticImpact } from '@baca/utils'
 import { useSetAtom } from 'jotai'
 import { useForm } from 'react-hook-form'
 

src/hooks/forms/useSignUpForm.ts

@@ -1,10 +1,8 @@
 import { useAuthControllerRegister } from '@baca/api/query/auth/auth'
 import { AuthRegisterLoginDto } from '@baca/api/types'
-import { hapticImpact } from '@baca/utils'
-import { handleFormError } from '@baca/utils/handleFormErrors'
+import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { notify } from 'react-native-notificated'
 
 const defaultValues: AuthRegisterLoginDto = {
   email: '',
@@ -39,12 +37,8 @@ export const useSignUpForm = () => {
       },
       {
         onSuccess: () => {
-          notify('success', {
-            params: {
-              style: { multiline: 100 },
-              title: 'SUCCESS',
-              description: t('toast.success.new_account_created', { userEmail: data.email }),
-            },
+          showSuccessToast({
+            description: t('toast.success.new_account_created', { userEmail: data.email }),
           })
         },
         onError: (e) => {

src/hooks/forms/useUpdateProfileForm.ts

@@ -1,11 +1,9 @@
 import { useAuthControllerUpdate, useAuthControllerMe } from '@baca/api/query/auth/auth'
 import { AuthUpdateDto } from '@baca/api/types'
-import { hapticImpact } from '@baca/utils'
-import { handleFormError } from '@baca/utils/handleFormErrors'
+import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils'
 import { useMemo, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { notify } from 'react-native-notificated'
 
 export const useUpdateProfileForm = () => {
   const { data: userData } = useAuthControllerMe()
@@ -42,13 +40,7 @@ export const useUpdateProfileForm = () => {
       { data },
       {
         onSuccess: () => {
-          notify('success', {
-            params: {
-              style: { multiline: 100 },
-              title: 'SUCCESS',
-              description: t('toast.success.profile_updated'),
-            },
-          })
+          showSuccessToast({ description: t('toast.success.profile_updated') })
         },
         onError: (e) => {
           handleFormError<keyof AuthUpdateDto>(

src/i18n/translations/en.json

@@ -81,6 +81,12 @@
       "new_account_created": "A new account has been created. An email with an activation link was sent to {{userEmail}}.",
       "profile_updated": "Successfully updated your profile data."
     },
+    "title": {
+      "error": "An error occurred",
+      "info": "Additional info",
+      "success": "Success",
+      "warning": "Attention"
+    },
     "warning": {}
   },
   "update": {
@@ -139,6 +145,12 @@
       "4xl": "4xl"
     }
   },
+  "confirm_email_screen": {
+    "go_back_login": "Go back to login screen",
+    "verification_failed": "Ops, we could not verify your e-mail address.",
+    "verification_in_progress": "E-mail verification in progress ...",
+    "verification_succeed": "E-mail address has been confirmed successfully."
+  },
   "details_screen": {
     "awesome": "Awesome 🎉",
     "open_bottom_sheet": "Open BottomSheetModal",