From 1fd97819a91aa81af6aa7489e23e7967f6e797d9 Mon Sep 17 00:00:00 2001 From: Prakhar Agarwal Date: Fri, 14 Jun 2024 23:03:35 +0530 Subject: [PATCH] feat: add profile item Signed-off-by: Prakhar Agarwal --- app/i18n/en/index.ts | 6 +- app/i18n/i18n-types.ts | 24 ++++- app/i18n/raw-i18n/source/en.json | 6 +- .../settings-screen/account/banner.tsx | 4 - .../settings-screen/account/profile.tsx | 102 +++++++++++++++++- 5 files changed, 129 insertions(+), 13 deletions(-) diff --git a/app/i18n/en/index.ts b/app/i18n/en/index.ts index 11342f5afb..bc2f1fcec7 100644 --- a/app/i18n/en/index.ts +++ b/app/i18n/en/index.ts @@ -2424,6 +2424,10 @@ const en: BaseTranslation = { accountId: "Account ID", copy: "Copy" }, + ProfileScreen: { + addNew : "Add new", + logout: "Logout", + }, TotpRegistrationInitiateScreen: { title: "Two-factor authentication", content: @@ -2682,7 +2686,7 @@ const en: BaseTranslation = { phone: "Phone", phoneNumber: "Phone Number", preimageProofOfPayment: "Preimage / Proof of Payment", - profile: "Profile", + profile: "Profiles", rate: "Rate", reauth: "Your session has expired. Please log in again.", restart: "Restart", diff --git a/app/i18n/i18n-types.ts b/app/i18n/i18n-types.ts index 1dbddf0176..e50e55a8c1 100644 --- a/app/i18n/i18n-types.ts +++ b/app/i18n/i18n-types.ts @@ -7581,6 +7581,16 @@ type RootTranslation = { */ copy: string } + ProfileScreen: { + /** + * A​d​d​ ​n​e​w + */ + addNew: string + /** + * L​o​g​o​u​t + */ + logout: string + } TotpRegistrationInitiateScreen: { /** * T​w​o​-​f​a​c​t​o​r​ ​a​u​t​h​e​n​t​i​c​a​t​i​o​n @@ -8400,7 +8410,7 @@ type RootTranslation = { */ preimageProofOfPayment: string /** - * P​r​o​f​i​l​e + * P​r​o​f​i​l​e​s */ profile: string /** @@ -16594,6 +16604,16 @@ export type TranslationFunctions = { */ copy: () => LocalizedString } + ProfileScreen: { + /** + * Add new + */ + addNew: () => LocalizedString + /** + * Logout + */ + logout: () => LocalizedString + } TotpRegistrationInitiateScreen: { /** * Two-factor authentication @@ -17398,7 +17418,7 @@ export type TranslationFunctions = { */ preimageProofOfPayment: () => LocalizedString /** - * Profile + * Profiles */ profile: () => LocalizedString /** diff --git a/app/i18n/raw-i18n/source/en.json b/app/i18n/raw-i18n/source/en.json index 25c88500a3..5eb591c153 100644 --- a/app/i18n/raw-i18n/source/en.json +++ b/app/i18n/raw-i18n/source/en.json @@ -2343,6 +2343,10 @@ "accountId": "Account ID", "copy": "Copy" }, + "ProfileScreen": { + "addNew": "Add new", + "logout": "Logout" + }, "TotpRegistrationInitiateScreen": { "title": "Two-factor authentication", "content": "Scan this QR code with your authenticator app. Alternatively, you can manually copy/paste the secret into your authenticator app." @@ -2579,7 +2583,7 @@ "phone": "Phone", "phoneNumber": "Phone Number", "preimageProofOfPayment": "Preimage / Proof of Payment", - "profile": "Profile", + "profile": "Profiles", "rate": "Rate", "reauth": "Your session has expired. Please log in again.", "restart": "Restart", diff --git a/app/screens/settings-screen/account/banner.tsx b/app/screens/settings-screen/account/banner.tsx index 57adb5e696..138dd28ed4 100644 --- a/app/screens/settings-screen/account/banner.tsx +++ b/app/screens/settings-screen/account/banner.tsx @@ -15,10 +15,6 @@ import { RootStackParamList } from "@app/navigation/stack-param-lists" import { useNavigation } from "@react-navigation/native" import { StackNavigationProp } from "@react-navigation/stack" import { Text, makeStyles, useTheme, Skeleton } from "@rneui/themed" -import { - GaloyIconButton, - GaloyIconButtonProps, -} from "@app/components/atomic/galoy-icon-button" export const AccountBanner = () => { const styles = useStyles() diff --git a/app/screens/settings-screen/account/profile.tsx b/app/screens/settings-screen/account/profile.tsx index b0d751023b..8e1d2d05d0 100644 --- a/app/screens/settings-screen/account/profile.tsx +++ b/app/screens/settings-screen/account/profile.tsx @@ -1,25 +1,117 @@ import { ScrollView } from "react-native-gesture-handler" - import { Screen } from "@app/components/screen" -import { makeStyles } from "@rneui/themed" +import { GaloyPrimaryButton } from "@app/components/atomic/galoy-primary-button" +import { useI18nContext } from "@app/i18n/i18n-react" +import { TouchableOpacity, View } from "react-native" +import { GaloyIcon } from "@app/components/atomic/galoy-icon" +import { makeStyles, Text } from "@rneui/themed" export const ProfileScreen: React.FC = () => { const styles = useStyles() + const { LL } = useI18nContext() + + const data = [ + { + username: "User 1", + selected: true, + }, + { + username: "User 2", + selected: false, + }, + { + username: "User 3", + selected: false, + }, + ] return ( - + + {data.map((profile, index) => { + return + })} + {}} containerStyle={styles.addNewButton}> + + {LL.ProfileScreen.addNew()} + + ) } -const useStyles = makeStyles(() => ({ +const Profile: React.FC<{ username: string; selected?: boolean }> = ({ + username, + selected, +}) => { + const styles = useStyles() + const { LL } = useI18nContext() + + return ( + + + + {selected && ( + + )} + + {username} + {!selected && ( + {}}> + {LL.ProfileScreen.logout()} + + )} + + + + ) +} + +const useStyles = makeStyles(({ colors }) => ({ outer: { marginTop: 4, - paddingHorizontal: 12, paddingBottom: 20, display: "flex", flexDirection: "column", rowGap: 12, }, + iconContainer: { + height: 30, + width: 30, + marginRight: 10, + justifyContent: "center", + alignItems: "center", + }, + icon: { + marginRight: 10, + }, + addNewButton: { + marginVertical: 20, + marginHorizontal: "auto", + width: 150, + }, + divider: { + borderWidth: 1, + borderColor: colors.grey4, + }, + profile: { + display: "flex", + flexDirection: "row", + alignItems: "center", + marginBottom: 10, + marginHorizontal: 10, + }, + checkIcon: { + color: colors._green, + margin: 10, + }, + logoutButton: { + marginLeft: "auto", + marginRight: 10, + }, + logoutButtonText: { + color: colors.primary, + fontSize: 20, + fontWeight: "bold", + }, }))