From e29d1e0082ab1ba619e29ceed87e9d05ec02f36d Mon Sep 17 00:00:00 2001
From: Maarten <maarten@suiteseven.nl>
Date: Tue, 13 Aug 2024 10:11:56 +0200
Subject: [PATCH] Allow changing language on onboarding

---
 app/(onboarding)/start.tsx | 156 +++++++++++++++++++++++++++----------
 app/index.tsx              |   2 +-
 2 files changed, 115 insertions(+), 43 deletions(-)

diff --git a/app/(onboarding)/start.tsx b/app/(onboarding)/start.tsx
index 104416d..1efd1c3 100644
--- a/app/(onboarding)/start.tsx
+++ b/app/(onboarding)/start.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { Stack } from 'expo-router';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { router } from 'expo-router';
@@ -16,15 +16,21 @@ import { Request } from '@/src/services/request';
 import { store } from '@/src/store/store';
 import { setSession } from '@/src/store/dataStore';
 import ThemedInput from '@/src/components/themed/ThemedInput';
+import { ThemedIcon } from '@/src/components/themed/ThemedIcon';
+import List from '@/src/components/List';
+import { BottomSheet, BottomSheetRefType } from 'react-native-select-bottom-list';
 
 export default function OnboardStartScreen() {
     const colorScheme = useColorScheme() ?? 'light';
     const { setToken } = useToken();
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const [ name, setName ] = React.useState( '' );
     const [ zipcode, setZipcode ] = React.useState( '' );
     const [ houseNumber, setHouseNumber ] = React.useState( '' );
 
+    const [ language, setLanguage ] = useState( 'nl' );
+    const sheetRef = useRef<BottomSheetRefType>( null );
+
     const start = () => {
         if (name === '' || zipcode === '' || houseNumber === '') {
             Message.error( t( "onboarding.missing-info" ) );
@@ -41,6 +47,7 @@ export default function OnboardStartScreen() {
                 zipcode: zipcode,
                 houseNumber: houseNumber,
                 device: deviceName,
+                language: language,
             } )
             .then( (response) => {
                 if (!response.success) {
@@ -58,48 +65,90 @@ export default function OnboardStartScreen() {
             } );
     }
 
+    const openLanguageSelect = () => {
+        sheetRef.current?.open();
+    }
+
+    const changeLanguage = (lang: string) => {
+        sheetRef.current?.close();
+
+        i18n.changeLanguage( lang ).then( () => {
+            setLanguage( lang );
+        } );
+    }
+
     return (
-        <>
-            <Stack.Screen options={{ title: 'Welkom' }}/>
-            <ThemedView style={styles.container}>
-                <ThemedView style={styles.heading}>
-                    <ThemedText type="title">{t( "onboarding.welcome" )} </ThemedText>
-                    <ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>Kliko</ThemedText>
-                </ThemedView>
-
-                <ThemedView style={styles.inputContainer}>
-                    <ThemedInput
-                        label={t( "onboarding.your-name" )}
-                        placeholder={t( "onboarding.name" )}
-                        onChangeText={setName}
-                        value={name}
-                        style={{paddingTop: 20}}
-                    />
-
-                    <ThemedInput
-                        label={t( "onboarding.your-address" )}
-                        placeholder={t( "onboarding.zipcode" )}
-                        onChangeText={setZipcode}
-                        value={zipcode}
-                        style={{paddingTop: 20}}
-                    />
-
-                    <ThemedInput
-                        placeholder={t( "onboarding.house-number" )}
-                        onChangeText={setHouseNumber}
-                        value={houseNumber}
-                        keyboardType="numeric"
-                    />
-                </ThemedView>
-
-                <TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
-                    <ThemedText style={{ color: Colors.white }}>
-                        {t( "onboarding.start" )}
-                    </ThemedText>
-                    <Ionicons name={"arrow-forward"} size={18} style={styles.buttonIcon}/>
-                </TouchableOpacity>
+        <ThemedView style={styles.container}>
+            <ThemedView style={styles.heading}>
+                <ThemedText type="title">{t( "onboarding.welcome" )} </ThemedText>
+                <ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>Kliko</ThemedText>
             </ThemedView>
-        </>
+
+            <ThemedView style={styles.inputContainer}>
+                <ThemedInput
+                    label={t( "onboarding.your-name" )}
+                    placeholder={t( "onboarding.name" )}
+                    onChangeText={setName}
+                    value={name}
+                    style={{ paddingTop: 20 }}
+                />
+
+                <ThemedInput
+                    label={t( "onboarding.your-address" )}
+                    placeholder={t( "onboarding.zipcode" )}
+                    onChangeText={setZipcode}
+                    value={zipcode}
+                    style={{ paddingTop: 20 }}
+                />
+
+                <ThemedInput
+                    placeholder={t( "onboarding.house-number" )}
+                    onChangeText={setHouseNumber}
+                    value={houseNumber}
+                    keyboardType="numeric"
+                />
+            </ThemedView>
+
+            <TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
+                <ThemedText style={{ color: Colors.white }}>
+                    {t( "onboarding.start" )}
+                </ThemedText>
+                <Ionicons name={"arrow-forward"} size={18} style={styles.buttonIcon}/>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.languageSelect} onPress={openLanguageSelect}>
+                <ThemedText type="default">{t( "languages." + language )}</ThemedText>
+                <ThemedIcon name="chevron-down" size={18}/>
+            </TouchableOpacity>
+
+            <BottomSheet ref={sheetRef} presentationStyle={'overFullScreen'}>
+                <ThemedView>
+                    <List
+                        data={[
+                            {
+                                name: t( "languages.nl" ),
+                                key: "nl",
+                            },
+                            {
+                                name: t( "languages.en" ),
+                                key: "en",
+                            }
+                        ]}
+                        viewStyle={styles.languagesList}
+                        renderItem={(item: any, index: any) => (
+
+                            <TouchableOpacity style={styles.languagesListItem} key={index} onPress={() => changeLanguage( item.key )}>
+                                <ThemedText type={item.key === language ? 'defaultSemiBold' : 'default'}>{item.name}</ThemedText>
+
+                                {item.key === language &&
+                                    <ThemedIcon name="checkmark" size={18}/>
+                                }
+                            </TouchableOpacity>
+                        )}
+                    />
+                </ThemedView>
+            </BottomSheet>
+        </ThemedView>
     );
 }
 
@@ -133,5 +182,28 @@ const styles = StyleSheet.create( {
         marginLeft: 15,
         paddingTop: 2,
         color: Colors.white
+    },
+    languageSelect: {
+        marginTop: 100,
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 10,
+        alignItems: 'center',
+    },
+    languagesList: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 25,
+    },
+    languagesListItem: {
+        display: 'flex',
+        gap: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingBottom: 15,
+        marginBottom: 15,
+        borderBottomWidth: 1,
+        borderBottomColor: '#f2f2f2',
     }
 } );
diff --git a/app/index.tsx b/app/index.tsx
index 891ffe5..14a064f 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -33,7 +33,7 @@ export default function OnboardStartScreen() {
                 i18n.changeLanguage(response.session.language);
 
                 // @ts-ignore
-                router.replace( '/(tabs)' );
+                router.replace( '/(onboarding)/start' );
             } else {
                 router.replace( '/(onboarding)/start' );
             }