fixup! Fix RampBankFormScene UI & UX

Pass countryCode through workflow params instead of hardcoding 'US'.
Apply US-specific bank validation only for US customers.
TODO: Extend validation for other countries when internationalized.

Author: Jon-edge

src/components/scenes/RampBankFormScene.tsx

@@ -25,6 +25,8 @@ export interface BankFormData {
 }
 
 export interface RampBankFormParams {
+  /** ISO country code for region-specific validation */
+  countryCode: string
   onSubmit: (formData: BankFormData) => Promise<void>
   /**
    * Callback invoked when the user navigates away from the scene.
@@ -42,7 +44,7 @@ interface ValidationResult {
 
 export const RampBankFormScene: React.FC<Props> = props => {
   const { navigation, route } = props
-  const { onSubmit, onCancel } = route.params
+  const { countryCode, onSubmit, onCancel } = route.params
 
   const theme = useTheme()
   const styles = getStyles(theme)
@@ -71,12 +73,12 @@ export const RampBankFormScene: React.FC<Props> = props => {
   const routingNumberRef = React.useRef<TextInput>(null)
 
   const handleAccountNumberBlur = useHandler(() => {
-    const result = validateAccountNumber(accountNumber)
+    const result = validateAccountNumber(accountNumber, countryCode)
     setFieldErrors(prev => ({ ...prev, accountNumber: result.errorMessage }))
   })
 
   const handleRoutingNumberBlur = useHandler(() => {
-    const result = validateRoutingNumber(routingNumber)
+    const result = validateRoutingNumber(routingNumber, countryCode)
     setFieldErrors(prev => ({ ...prev, routingNumber: result.errorMessage }))
   })
 
@@ -100,8 +102,14 @@ export const RampBankFormScene: React.FC<Props> = props => {
       ownerLastName.trim() !== ''
 
     // Use the same validation functions for form validity
-    const accountValid = validateAccountNumber(accountNumber).isValid
-    const routingValid = validateRoutingNumber(routingNumber).isValid
+    const accountValid = validateAccountNumber(
+      accountNumber,
+      countryCode
+    ).isValid
+    const routingValid = validateRoutingNumber(
+      routingNumber,
+      countryCode
+    ).isValid
 
     const hasNoFieldErrors =
       fieldErrors.accountNumber === '' && fieldErrors.routingNumber === ''
@@ -110,6 +118,7 @@ export const RampBankFormScene: React.FC<Props> = props => {
   }, [
     bankName,
     accountNumber,
+    countryCode,
     routingNumber,
     accountName,
     ownerFirstName,
@@ -190,14 +199,15 @@ export const RampBankFormScene: React.FC<Props> = props => {
           onSubmitEditing={() => accountNumberRef.current?.focus()}
         />
 
+        {/* TODO: Adjust maxLength for other countries when internationalized */}
         <FilledTextInput
           ref={accountNumberRef}
           value={accountNumber}
           onChangeText={handleAccountNumberChange}
           placeholder={lstrings.ramp_account_number_placeholder}
           keyboardType="number-pad"
           returnKeyType="next"
-          maxLength={17}
+          maxLength={countryCode === 'US' ? 17 : undefined}
           error={fieldErrors.accountNumber}
           aroundRem={0.5}
           onBlur={handleAccountNumberBlur}
@@ -211,7 +221,7 @@ export const RampBankFormScene: React.FC<Props> = props => {
           placeholder={lstrings.ramp_routing_number_placeholder}
           keyboardType="number-pad"
           returnKeyType="done"
-          maxLength={9}
+          maxLength={countryCode === 'US' ? 9 : undefined}
           error={fieldErrors.routingNumber}
           aroundRem={0.5}
           onBlur={handleRoutingNumberBlur}
@@ -240,33 +250,50 @@ const getStyles = cacheStyles((theme: Theme) => ({
 }))
 
 // Single source of truth for field validation
-const validateAccountNumber = (value: string): ValidationResult => {
+// TODO: Extend validation for other countries when the form is internationalized
+const validateAccountNumber = (
+  value: string,
+  countryCode: string
+): ValidationResult => {
   const trimmed = value.trim()
   if (trimmed === '') {
     return { isValid: false, errorMessage: '' }
   }
-  if (trimmed.length < 8) {
-    return {
-      isValid: false,
-      errorMessage: sprintf(
-        lstrings.ramp_account_number_error_min_length_1s,
-        '8'
-      )
+
+  // US bank account numbers typically range from 4-17 digits
+  if (countryCode === 'US') {
+    if (trimmed.length < 4) {
+      return {
+        isValid: false,
+        errorMessage: sprintf(
+          lstrings.ramp_account_number_error_min_length_1s,
+          '4'
+        )
+      }
     }
   }
+
   return { isValid: true, errorMessage: '' }
 }
 
-const validateRoutingNumber = (value: string): ValidationResult => {
+const validateRoutingNumber = (
+  value: string,
+  countryCode: string
+): ValidationResult => {
   const trimmed = value.trim()
   if (trimmed === '') {
     return { isValid: false, errorMessage: '' }
   }
-  if (trimmed.length !== 9) {
-    return {
-      isValid: false,
-      errorMessage: sprintf(lstrings.ramp_routing_number_error_length_1s, '9')
+
+  // US ABA routing numbers are exactly 9 digits
+  if (countryCode === 'US') {
+    if (trimmed.length !== 9) {
+      return {
+        isValid: false,
+        errorMessage: sprintf(lstrings.ramp_routing_number_error_length_1s, '9')
+      }
     }
   }
+
   return { isValid: true, errorMessage: '' }
 }

src/plugins/ramps/infinite/infiniteRampPlugin.ts

@@ -660,6 +660,7 @@ export const infiniteRampPlugin: RampPluginFactory = (
 
             // User needs to complete KYC
             await kycWorkflow({
+              countryCode: request.regionCode.countryCode,
               infiniteApi,
               navigationFlow,
               pluginId,
@@ -668,6 +669,7 @@ export const infiniteRampPlugin: RampPluginFactory = (
 
             // Ensure we have a bank account
             const bankAccountResult = await bankAccountWorkflow({
+              countryCode: request.regionCode.countryCode,
               infiniteApi,
               navigationFlow,
               vault

src/plugins/ramps/infinite/workflows/bankAccountWorkflow.ts

@@ -5,6 +5,7 @@ import type { InfiniteApi } from '../infiniteApiTypes'
 import type { NavigationFlow } from '../utils/navigationFlow'
 
 interface Params {
+  countryCode: string
   infiniteApi: InfiniteApi
   navigationFlow: NavigationFlow
   vault: EdgeVault
@@ -15,7 +16,7 @@ interface Result {
 }
 
 export const bankAccountWorkflow = async (params: Params): Promise<Result> => {
-  const { infiniteApi, navigationFlow, vault } = params
+  const { countryCode, infiniteApi, navigationFlow, vault } = params
 
   const authState = infiniteApi.getAuthState()
 
@@ -37,6 +38,7 @@ export const bankAccountWorkflow = async (params: Params): Promise<Result> => {
 
   const bankAccountId = await new Promise<string>((resolve, reject) => {
     navigationFlow.navigate('rampBankForm', {
+      countryCode,
       onSubmit: async (formData: BankFormData) => {
         const bankAccount = await infiniteApi.addBankAccount({
           type: 'bank_account',

src/plugins/ramps/infinite/workflows/kycWorkflow.ts

@@ -14,6 +14,7 @@ import {
 import type { NavigationFlow } from '../utils/navigationFlow'
 
 interface Params {
+  countryCode: string
   infiniteApi: InfiniteApi
   navigationFlow: NavigationFlow
   pluginId: string
@@ -22,7 +23,7 @@ interface Params {
 
 // Exports
 export const kycWorkflow = async (params: Params): Promise<void> => {
-  const { infiniteApi, navigationFlow, pluginId, vault } = params
+  const { countryCode, infiniteApi, navigationFlow, pluginId, vault } = params
 
   let customerId = infiniteApi.getAuthState().customerId
 
@@ -70,7 +71,7 @@ export const kycWorkflow = async (params: Params): Promise<void> => {
         const customerResponse = await infiniteApi
           .createCustomer({
             type: 'individual',
-            countryCode: 'US',
+            countryCode,
             contactInformation: {
               email: contactInfo.email
             },
@@ -84,7 +85,7 @@ export const kycWorkflow = async (params: Params): Promise<void> => {
               city: contactInfo.city,
               state: contactInfo.state,
               postalCode: contactInfo.postalCode,
-              country: 'US'
+              country: countryCode
             },
             companyInformation: undefined
           })
@@ -150,7 +151,7 @@ export const kycWorkflow = async (params: Params): Promise<void> => {
           city: contactInfo.city,
           state: contactInfo.state,
           postalCode: contactInfo.postalCode,
-          countryCode: 'US'
+          countryCode
         }
         if (addressInfoUuid != null) {
           await vault.updateAddressInfo(addressInfoUuid, addressInfo)