fix(bank-accounts): show the server's reason for BANK_ACCOUNT_INVALID

__tests__/screens/bank-account-errors.spec.ts

@@ -0,0 +1,46 @@
+import { i18nObject } from "@app/i18n/i18n-util"
+import { loadLocale } from "@app/i18n/i18n-util.sync"
+import { bankAccountErrorMessage } from "@app/screens/settings-screen/bank-accounts/bank-account-errors"
+
+loadLocale("en")
+const LL = i18nObject("en")
+
+describe("bankAccountErrorMessage", () => {
+  it("shows the server's reason for BANK_ACCOUNT_INVALID", () => {
+    // Seen on TEST: the server named the problem ("This account number
+    // cannot be used...") and the app replaced it with the generic line.
+    const message =
+      "This account number cannot be used. Please contact support if it is yours."
+
+    expect(bankAccountErrorMessage(LL, { code: "BANK_ACCOUNT_INVALID", message })).toBe(
+      message,
+    )
+  })
+
+  it("falls back to the generic invalid line when the server sends no message", () => {
+    expect(
+      bankAccountErrorMessage(LL, { code: "BANK_ACCOUNT_INVALID", message: "" }),
+    ).toBe(LL.BankAccountsScreen.errorInvalid())
+  })
+
+  it("keeps our own copy for codes that have it", () => {
+    expect(
+      bankAccountErrorMessage(LL, {
+        code: "BANK_ACCOUNT_DUPLICATE_NUMBER",
+        message: "x",
+      }),
+    ).toBe(LL.BankAccountsScreen.errorDuplicateNumber())
+    expect(bankAccountErrorMessage(LL, { code: "TOO_MANY_REQUEST", message: "x" })).toBe(
+      LL.BankAccountsScreen.errorTooManyRequests(),
+    )
+  })
+
+  it("shows the server message for unknown codes, then the generic fallback", () => {
+    expect(bankAccountErrorMessage(LL, { code: "SOMETHING_NEW", message: "hello" })).toBe(
+      "hello",
+    )
+    expect(bankAccountErrorMessage(LL, undefined)).toBe(
+      LL.BankAccountsScreen.errorGeneric(),
+    )
+  })
+})

__tests__/screens/edit-bank-account.spec.tsx

@@ -31,6 +31,13 @@ import {
 import { i18nObject } from "@app/i18n/i18n-util"
 import { loadLocale } from "@app/i18n/i18n-util.sync"
 
+// The repo-wide mock renders nothing, which hides every field. Render the
+// children in a plain ScrollView so the form is testable.
+jest.mock("react-native-keyboard-aware-scroll-view", () => {
+  const { ScrollView } = jest.requireActual("react-native")
+  return { KeyboardAwareScrollView: ScrollView }
+})
+
 jest.mock("@app/i18n/i18n-react", () => {
   const { i18nObject: i18n } = jest.requireActual("@app/i18n/i18n-util")
   return { useI18nContext: () => ({ LL: i18n("en") }) }
@@ -353,8 +360,10 @@ describe("EditBankAccountScreen — add", () => {
 
   const errorCases: [string, string][] = [
     ["BANK_ACCOUNT_DUPLICATE_NUMBER", en.BankAccountsScreen.errorDuplicateNumber()],
-    ["BANK_ACCOUNT_INVALID", en.BankAccountsScreen.errorInvalid()],
-    ["INVALID_INPUT", en.BankAccountsScreen.errorInvalid()],
+    // The server names the problem; the app shows it as-is.
+    ["BANK_ACCOUNT_INVALID", "server message"],
+    // The server names the problem; the app shows it as-is.
+    ["INVALID_INPUT", "server message"],
     ["TOO_MANY_REQUEST", en.BankAccountsScreen.errorTooManyRequests()],
     ["BANK_ACCOUNT_NOT_FOUND", en.BankAccountsScreen.errorNotFound()],
     // Unknown codes show the server's own message.

app/screens/settings-screen/bank-accounts/bank-account-errors.ts

@@ -20,9 +20,12 @@ export const bankAccountErrorMessage = (
       return LL.BankAccountsScreen.errorNotFound()
     case "BANK_ACCOUNT_DUPLICATE_NUMBER":
       return LL.BankAccountsScreen.errorDuplicateNumber()
+    // The server sends an allowlisted, customer-safe reason ("Bank is not
+    // supported.", "This account number cannot be used..."). Show it; the
+    // generic line only covers an empty message.
     case "BANK_ACCOUNT_INVALID":
     case "INVALID_INPUT":
-      return LL.BankAccountsScreen.errorInvalid()
+      return error?.message || LL.BankAccountsScreen.errorInvalid()
     case "TOO_MANY_REQUEST":
       return LL.BankAccountsScreen.errorTooManyRequests()
     default:

app/screens/settings-screen/bank-accounts/edit-bank-account-screen.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from "react"
-import { Alert, Pressable, ScrollView, Switch, View } from "react-native"
+import { Alert, Pressable, Switch, View } from "react-native"
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"
 import { useApolloClient } from "@apollo/client"
 import { makeStyles, Text, useTheme } from "@rneui/themed"
 import { StackScreenProps } from "@react-navigation/stack"
@@ -209,7 +210,16 @@ export const EditBankAccountScreen: React.FC<Props> = ({ route, navigation }) =>
 
   return (
     <Screen>
-      <ScrollView style={styles.container} keyboardShouldPersistTaps="handled">
+      {/* The account number is the last field; with a plain ScrollView the
+          keyboard covered it and the button. Scroll the focused field clear
+          of the keyboard and leave room under the last row. */}
+      <KeyboardAwareScrollView
+        style={styles.container}
+        contentContainerStyle={styles.content}
+        keyboardShouldPersistTaps="handled"
+        enableOnAndroid
+        extraScrollHeight={80}
+      >
         <Text type="p3" color={colors.grey2} style={styles.subtitle}>
           {isAdd
             ? LL.BankAccountsScreen.addSubtitle()
@@ -302,7 +312,7 @@ export const EditBankAccountScreen: React.FC<Props> = ({ route, navigation }) =>
             />
           </View>
         )}
-      </ScrollView>
+      </KeyboardAwareScrollView>
       <PrimaryBtn
         label={
           isAdd ? LL.BankAccountsScreen.addAccount() : LL.BankAccountsScreen.saveChanges()
@@ -324,6 +334,9 @@ const useStyles = makeStyles(() => ({
     paddingVertical: 10,
     paddingHorizontal: 20,
   },
+  content: {
+    paddingBottom: 32,
+  },
   subtitle: {
     marginBottom: 16,
   },