chore: restructuring data around settings screen (#3159)

* chore: restructuring data around settings screen

* fix: e2e test

.github/workflows/e2e.yml

@@ -103,6 +103,7 @@ jobs:
             content-type: video/mp4
           destination: galoy-mobile-recordings/android-recordings/${{ github.run_id }}
       - name: Append Direct Links to GitHub Actions Summary
+        if: always()
         run: |
           # Define the base URL for the uploaded files in the GCS bucket
           BASE_URL="https://storage.googleapis.com/galoy-mobile-recordings/android-recordings/${{ github.run_id }}/android-recordings"
@@ -225,6 +226,7 @@ jobs:
             content-type: video/mp4
           destination: galoy-mobile-recordings/ios-recordings/${{ github.run_id }}
       - name: Append Direct Links to GitHub Actions Summary
+        if: always()
         run: |
           # Define the base URL for the uploaded files in the GCS bucket
           BASE_URL="https://storage.googleapis.com/galoy-mobile-recordings/ios-recordings/${{ github.run_id }}/ios-recordings"

app/screens/email-registration-screen/email-registration-validate.tsx

@@ -67,7 +67,7 @@ export const EmailRegistrationValidateScreen: React.FC<Props> = ({ route }) => {
               {
                 text: LL.common.ok(),
                 onPress: () => {
-                  navigation.navigate("accountScreen")
+                  navigation.navigate("settings")
                 },
               },
             ],

app/screens/settings-screen/account/account-screen.tsx

@@ -1,8 +1,6 @@
 import { ScrollView } from "react-native-gesture-handler"
 
 import { Screen } from "@app/components/screen"
-import { useLevel } from "@app/graphql/level-context"
-import { useI18nContext } from "@app/i18n/i18n-react"
 import { testProps } from "@app/utils/testProps"
 import { makeStyles } from "@rneui/themed"
 
@@ -12,16 +10,11 @@ import { AccountDeleteContextProvider } from "./account-delete-context"
 import { AccountBanner } from "./banner"
 import { AccountId } from "./id"
 import { DangerZoneSettings } from "./settings/danger-zone"
-import { EmailSetting } from "./settings/email"
-import { PhoneSetting } from "./settings/phone"
 import { UpgradeAccountLevelOne } from "./settings/upgrade"
 import { UpgradeTrialAccount } from "./settings/upgrade-trial-account"
 
 export const AccountScreen: React.FC = () => {
   const styles = useStyles()
-  const { LL } = useI18nContext()
-
-  const { isAtLeastLevelOne } = useLevel()
 
   return (
     <AccountDeleteContextProvider>
@@ -33,12 +26,6 @@ export const AccountScreen: React.FC = () => {
           <AccountBanner />
           <AccountId />
           <UpgradeTrialAccount />
-          {isAtLeastLevelOne && (
-            <SettingsGroup
-              name={LL.AccountScreen.loginMethods()}
-              items={[EmailSetting, PhoneSetting]}
-            />
-          )}
           <SettingsGroup items={[TotpSetting, UpgradeAccountLevelOne]} />
           <DangerZoneSettings />
         </ScrollView>

app/screens/settings-screen/settings-screen.tsx

@@ -8,6 +8,8 @@ import { useI18nContext } from "@app/i18n/i18n-react"
 import { makeStyles } from "@rneui/themed"
 
 import { AccountBanner } from "./account/banner"
+import { EmailSetting } from "./account/settings/email"
+import { PhoneSetting } from "./account/settings/phone"
 import { SettingsGroup } from "./group"
 import { DefaultWallet } from "./settings/account-default-wallet"
 import { AccountLevelSetting } from "./settings/account-level"
@@ -58,10 +60,11 @@ export const SettingsScreen: React.FC = () => {
   const styles = useStyles()
   const { LL } = useI18nContext()
 
-  const { currentLevel } = useLevel()
+  const { currentLevel, isAtLeastLevelOne } = useLevel()
 
   const items = {
     account: [AccountLevelSetting, TxLimits],
+    loginMethods: [EmailSetting, PhoneSetting],
     waysToGetPaid: [AccountLNAddress, AccountPOS, AccountStaticQR],
     preferences: [
       NotificationSetting,
@@ -80,6 +83,12 @@ export const SettingsScreen: React.FC = () => {
       <ScrollView contentContainerStyle={styles.outer}>
         {currentLevel === AccountLevel.NonAuth && <AccountBanner />}
         <SettingsGroup name={LL.common.account()} items={items.account} />
+        {isAtLeastLevelOne && (
+          <SettingsGroup
+            name={LL.AccountScreen.loginMethods()}
+            items={items.loginMethods}
+          />
+        )}
         <SettingsGroup
           name={LL.SettingsScreen.addressScreen()}
           items={items.waysToGetPaid}

app/screens/settings-screen/settings/account-pos.tsx

@@ -4,8 +4,6 @@ import { GaloyIcon } from "@app/components/atomic/galoy-icon"
 import { useSettingsScreenQuery } from "@app/graphql/generated"
 import { useAppConfig } from "@app/hooks"
 import { useI18nContext } from "@app/i18n/i18n-react"
-import { toastShow } from "@app/utils/toast"
-import Clipboard from "@react-native-clipboard/clipboard"
 
 import { SettingsRow } from "../row"
 
@@ -24,19 +22,10 @@ export const AccountPOS: React.FC = () => {
     <SettingsRow
       loading={loading}
       title={LL.SettingsScreen.pos()}
-      extraComponentBesideTitle={<GaloyIcon name="link" size={20} />}
       subtitle={pos}
       subtitleShorter={data.me.username.length > 22}
       leftIcon="calculator"
-      rightIcon="copy-outline"
-      rightIconAction={() => {
-        Clipboard.setString(pos)
-        toastShow({
-          type: "success",
-          message: (translations) => translations.SettingsScreen.posCopied(),
-          LL,
-        })
-      }}
+      rightIcon={<GaloyIcon name="link" size={24} />}
       action={() => {
         Linking.openURL(pos)
       }}

app/screens/settings-screen/settings/account-static-qr.tsx

@@ -4,8 +4,6 @@ import { GaloyIcon } from "@app/components/atomic/galoy-icon"
 import { useSettingsScreenQuery } from "@app/graphql/generated"
 import { useAppConfig } from "@app/hooks"
 import { useI18nContext } from "@app/i18n/i18n-react"
-import { toastShow } from "@app/utils/toast"
-import Clipboard from "@react-native-clipboard/clipboard"
 
 import { SettingsRow } from "../row"
 
@@ -24,19 +22,10 @@ export const AccountStaticQR: React.FC = () => {
     <SettingsRow
       loading={loading}
       title={LL.SettingsScreen.staticQr()}
-      extraComponentBesideTitle={<GaloyIcon name="link" size={20} />}
       subtitle={qrUrl}
       subtitleShorter={true}
       leftIcon="qr-code-outline"
-      rightIcon="copy-outline"
-      rightIconAction={() => {
-        Clipboard.setString(qrUrl)
-        toastShow({
-          type: "success",
-          message: (translations) => translations.SettingsScreen.staticQrCopied(),
-          LL,
-        })
-      }}
+      rightIcon={<GaloyIcon name="link" size={24} />}
       action={() => {
         Linking.openURL(qrUrl)
       }}

e2e/detox/01-auth.test.ts

@@ -4,7 +4,7 @@ import { TranslationFunctions } from "../../app/i18n/i18n-types"
 import { i18nObject } from "../../app/i18n/i18n-util"
 import { loadLocale } from "../../app/i18n/i18n-util.sync"
 import { getKratosCode } from "./utils/commandline"
-import { waitForAccountScreen } from "./utils/common-flows"
+import { waitForAccountScreen, waitForSettingsScreen } from "./utils/common-flows"
 import { timeout, ALICE_PHONE, ALICE_EMAIL, otp } from "./utils/config"
 import { tap } from "./utils/controls"
 
@@ -74,7 +74,6 @@ describe("Login/Register Flow", () => {
 
   it("add an email", async () => {
     await tap(by.id("menu"))
-    await tap(by.id(LL.common.account()))
     await tap(by.id(LL.AccountScreen.tapToAddEmail()))
 
     const emailInput = element(by.id(LL.EmailRegistrationInitiateScreen.placeholder()))
@@ -94,6 +93,8 @@ describe("Login/Register Flow", () => {
   })
 
   it("logout", async () => {
+    await waitForSettingsScreen(LL)
+    await tap(by.id(LL.common.account()))
     await waitForAccountScreen(LL)
 
     const logoutBtn = element(by.id(LL.AccountScreen.logOutAndDeleteLocalData()))
@@ -130,7 +131,6 @@ describe("Login/Register Flow", () => {
 
   it("verify we are in the same account as we started with", async () => {
     await tap(by.id("menu"))
-    await tap(by.id(LL.common.account()))
 
     const phoneNumber = element(by.text(ALICE_PHONE))
     await waitFor(phoneNumber).toBeVisible().withTimeout(timeout)

e2e/detox/utils/common-flows.ts

@@ -2,6 +2,13 @@ import { TranslationFunctions } from "../../../app/i18n/i18n-types"
 import { timeout } from "./config"
 import { tap } from "./controls"
 
+export const waitForSettingsScreen = async (LL: TranslationFunctions) => {
+  const el = element(by.text(LL.SettingsScreen.addressScreen()))
+  await waitFor(el)
+    .toBeVisible()
+    .withTimeout(timeout * 3)
+}
+
 export const waitForAccountScreen = async (LL: TranslationFunctions) => {
   const el = element(by.text(LL.AccountScreen.accountId()))
   await waitFor(el)