Merge pull request #53 from binarapps/fix/remove-account-button-and-alert

Fix/remove account button and alert

Author: MateuszRostkowski

src/contexts/ColorSchemeContext.ts

@@ -7,6 +7,7 @@ export type ColorSchemeName = Exclude<SettingColorSchemeName, 'system'>
 export type ColorSchemeContextType = {
   colorSchemeSetting: SettingColorSchemeName
   colorScheme: ColorSchemeName
+  isDarkTheme: boolean
   setColorSchemeSetting: (newColorScheme: SettingColorSchemeName) => void
 }
 

src/design-system/bottomSheets/BottomSheet.tsx

@@ -1,36 +1,32 @@
 import { Box } from '@baca/design-system/components/Box'
-import { useSafeAreaInsets } from '@baca/hooks'
+import { useSafeAreaInsets, useTheme } from '@baca/hooks'
 import {
   BottomSheetModal,
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetView,
 } from '@gorhom/bottom-sheet'
-import { RefObject, useCallback } from 'react'
+import { useCallback } from 'react'
 import { Dimensions } from 'react-native'
 
 import { BottomSheetScrollView } from './BootomSheetScrollables'
 import { BottomSheetHeader } from './BottomSheetHeader'
+import { BottomSheetProps } from './types'
 
 const screenHeight = Dimensions.get('screen').height
 
-type Props = {
-  bottomSheetRef: RefObject<BottomSheetModal>
-  children: JSX.Element | JSX.Element[]
-  title?: string
-  showCloseButton?: boolean
-  numberOfTitleLines?: number
-}
-
 export { BottomSheetScrollView }
 export const BottomSheet = ({
   children,
   title,
+  iconConfig,
+  isDivider = true,
   showCloseButton = true,
   numberOfTitleLines,
   bottomSheetRef,
-}: Props) => {
+}: BottomSheetProps) => {
   const { top } = useSafeAreaInsets()
+  const { colors } = useTheme()
 
   const handleClose = useCallback(() => {
     bottomSheetRef?.current?.snapToPosition(-1)
@@ -49,16 +45,24 @@ export const BottomSheet = ({
       snapPoints={[screenHeight - top - 24]}
       backdropComponent={renderBackdrop}
       enableDynamicSizing
+      backgroundStyle={{
+        // eslint-disable-next-line react-native/no-inline-styles
+        backgroundColor: colors.bg.primary,
+      }}
+      handleIndicatorStyle={{
+        // eslint-disable-next-line react-native/no-inline-styles
+        backgroundColor: colors.alpha.black[100],
+      }}
     >
       <BottomSheetView>
         <BottomSheetHeader
+          iconConfig={iconConfig}
           title={title}
           numberOfLines={numberOfTitleLines}
           showCloseButton={showCloseButton}
           onClose={handleClose}
         />
-        <Box pb="1px" bg="bg.brand.primary" />
-
+        {isDivider && <Box pb="1px" bg="bg.brand.primary" />}
         {children}
       </BottomSheetView>
     </BottomSheetModal>

src/design-system/bottomSheets/BottomSheet.web.tsx

@@ -1,28 +1,22 @@
 import { Modal } from '@baca/components/Modal'
 import { useBoolean, useWeb } from '@baca/hooks'
-import { BottomSheetModal } from '@gorhom/bottom-sheet'
-import { RefObject, useCallback, useImperativeHandle } from 'react'
+import { useCallback, useImperativeHandle } from 'react'
 import { ScrollView } from 'react-native'
 
 import { BottomSheetHeader } from './BottomSheetHeader'
+import { BottomSheetProps } from './types'
 import { Box } from '../components/Box'
 
-type Props = {
-  bottomSheetRef: RefObject<BottomSheetModal>
-  children: JSX.Element | JSX.Element[]
-  title?: string
-  showCloseButton?: boolean
-  numberOfTitleLines?: number
-}
-
 export const BottomSheetScrollView = ScrollView
 export const BottomSheet = ({
   children,
+  iconConfig,
+  isDivider = true,
   title,
   showCloseButton = true,
   numberOfTitleLines,
   bottomSheetRef,
-}: Props) => {
+}: BottomSheetProps) => {
   const [isOpen, setIsOpen] = useBoolean(false)
   const { webContentWidth } = useWeb()
 
@@ -63,8 +57,9 @@ export const BottomSheet = ({
           numberOfLines={numberOfTitleLines}
           showCloseButton={showCloseButton}
           onClose={setIsOpen.off}
+          iconConfig={iconConfig}
         />
-        <Box pb="1px" bg="bg.brand.primary" />
+        {isDivider && <Box pb="1px" bg="bg.brand.primary" />}
         {children}
       </Box>
     </Modal>

src/design-system/bottomSheets/BottomSheetHeader.tsx

@@ -1,3 +1,4 @@
+import { BottomSheetHeaderProps } from './types'
 import { Box } from '../components/Box'
 import { Icon } from '../components/Icon'
 import { Row } from '../components/Row'
@@ -9,22 +10,25 @@ export const BottomSheetHeader = ({
   numberOfLines = undefined,
   showCloseButton,
   onClose,
-}: {
-  title?: string
-  numberOfLines?: number
-  showCloseButton?: boolean
-  onClose?: () => void
-}) => {
+  iconConfig,
+}: BottomSheetHeaderProps) => {
   if (!showCloseButton && !title) {
     return null
   }
 
   return (
     <Row alignItems="center">
+      {iconConfig && (
+        <Box backgroundColor={iconConfig.bgColor} p={3} borderRadius={100} ml={4} mt={4}>
+          <Icon name={iconConfig.name} size={24} color={iconConfig.color} />
+        </Box>
+      )}
       <Box flex={1} px={4}>
-        <Text.MdBold numberOfLines={numberOfLines} allowFontScaling={false}>
-          {title}
-        </Text.MdBold>
+        {title && (
+          <Text.MdBold numberOfLines={numberOfLines} allowFontScaling={false}>
+            {title}
+          </Text.MdBold>
+        )}
       </Box>
       {showCloseButton && (
         <Touchable onPress={onClose} hitSlop={10} p={4} pl={8}>

src/design-system/bottomSheets/types.ts

@@ -0,0 +1,27 @@
+import { IconNames } from '@baca/types/icon'
+import { BottomSheetModal } from '@gorhom/bottom-sheet'
+import { RefObject } from 'react'
+
+export type BottomSheetIconConfigProps = {
+  name: IconNames
+  color: ColorNames
+  bgColor: ColorNames
+}
+
+export type BottomSheetProps = {
+  bottomSheetRef: RefObject<BottomSheetModal>
+  children: JSX.Element | JSX.Element[]
+  isDivider?: boolean
+  title?: string
+  showCloseButton?: boolean
+  numberOfTitleLines?: number
+  iconConfig?: BottomSheetIconConfigProps
+}
+
+export type BottomSheetHeaderProps = {
+  title?: string
+  numberOfLines?: number
+  showCloseButton?: boolean
+  onClose?: () => void
+  iconConfig?: BottomSheetIconConfigProps
+}

src/design-system/bottomSheets/useBottomSheets.tsx

@@ -2,13 +2,22 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet'
 import { useCallback, useRef } from 'react'
 
 import { BottomSheet } from './BottomSheet'
+import { BottomSheetIconConfigProps } from './types'
 
-export const useBottomSheet = ({ title = '' }) => {
+export const useBottomSheet = ({ title = '', isDivider = true }) => {
   const bottomSheetRef = useRef<BottomSheetModal>(null)
 
-  const bottomSheetComponentRenderFunction = (children: JSX.Element | JSX.Element[]) => {
+  const bottomSheetComponentRenderFunction = (
+    children: JSX.Element | JSX.Element[],
+    iconConfig?: BottomSheetIconConfigProps
+  ) => {
     return (
-      <BottomSheet title={title} bottomSheetRef={bottomSheetRef}>
+      <BottomSheet
+        title={title}
+        isDivider={isDivider}
+        bottomSheetRef={bottomSheetRef}
+        iconConfig={iconConfig}
+      >
         {children}
       </BottomSheet>
     )
@@ -18,8 +27,13 @@ export const useBottomSheet = ({ title = '' }) => {
     bottomSheetRef.current?.present?.()
   }, [])
 
+  const closeBottomSheet = useCallback(() => {
+    bottomSheetRef.current?.close?.()
+  }, [])
+
   return {
     bottomSheetComponentRenderFunction,
+    closeBottomSheet,
     presentBottomSheet,
   }
 }

src/i18n/translations/en.json

@@ -9,11 +9,6 @@
     "session_expired": {
       "description": "Try to log in again",
       "title": "Your current session expired"
-    },
-    "remove_account": {
-      "description": "Are you sure you want to delete your account?",
-      "title": "Attention!",
-      "confirm": "Yes, delete"
     }
   },
   "bottom_tabs": {
@@ -34,8 +29,7 @@
     "save": "Save",
     "search": "Search",
     "try_again_later": "Please try again later",
-    "try_again": "Try again",
-    "remove_account": "Remove account"
+    "try_again": "Try again"
   },
   "errors": {
     "invalid_email": "Niepoprawny adres e-mail",
@@ -234,8 +228,14 @@
     "copy_push_token": "Copy push token",
     "current_theme": "Current theme: {{theme}}",
     "sign_out": "Sign out!",
-    "selected": " - selected",
-    "remove_account": "Remove account"
+    "selected": " - selected"
+  },
+  "profile_screen": {
+    "profile": "Profile",
+    "update_your_details": "Update your personal details here.",
+    "remove_account": "Remove account",
+    "are_you_sure": "Are you sure?",
+    "remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action."
   },
   "sign_in_screen": {
     "do_not_have_an_account": "Don't have an account?",

src/i18n/translations/pl.json

@@ -9,11 +9,6 @@
     "session_expired": {
       "description": "Spróbuj zalogować się ponownie",
       "title": "Twoja sesja wygasła"
-    },
-    "remove_account": {
-      "description": "Czy na pewno chcesz usunąć swoje konto?",
-      "title": "Uwaga!",
-      "confirm": "Tak, usuń"
     }
   },
   "bottom_tabs": {
@@ -34,8 +29,7 @@
     "save": "Zapisz",
     "search": "Szukaj",
     "try_again_later": "Proszę spróbuj ponownie później",
-    "try_again": "Spróbuj ponownie",
-    "remove_account": "Usuń konto"
+    "try_again": "Spróbuj ponownie"
   },
   "errors": {
     "invalid_email": "Niepoprawny adres e-mail",
@@ -232,8 +226,14 @@
   "settings_screen": {
     "current_theme": "Current theme: {{theme}}",
     "selected": " - wybrano",
-    "sign_out": "Wyloguj!",
-    "remove_account": "Usuń konto"
+    "sign_out": "Wyloguj!"
+  },
+  "profile_screen": {
+    "profile": "Profil",
+    "update_your_details": "Zaktualizuj swoje dane osobowe tutaj.",
+    "remove_account": "Usuń konto",
+    "are_you_sure": "Jesteś pewny/a?",
+    "remove_account_desc": "Tej akcji nie można cofnąć.\n\nUtracisz dostęp do swojego konta. Jeśli masz aktywną subskrypcję, utracisz do niej dostęp.\n\nUpewnij się, że jesteś pewien tej akcji"
   },
   "sign_in_screen": {
     "do_not_have_an_account": "Nie masz konta?",

src/providers/ColorSchemeProvider.tsx

@@ -54,13 +54,16 @@ export const ColorSchemeProvider: FC<PropsWithChildren> = ({ children }) => {
     [colorSchemeSetting, setItem]
   )
 
+  const isDarkTheme = useMemo(() => colorScheme === 'dark', [colorScheme])
+
   const value: ColorSchemeContextType = useMemo(
     () => ({
       colorScheme,
       colorSchemeSetting,
+      isDarkTheme,
       setColorSchemeSetting: setNewColorSchemeSetting,
     }),
-    [colorScheme, colorSchemeSetting, setNewColorSchemeSetting]
+    [colorScheme, colorSchemeSetting, isDarkTheme, setNewColorSchemeSetting]
   )
 
   return <ColorSchemeContextProvider value={value}>{children}</ColorSchemeContextProvider>