feat(deposit): fix android dob input; improve autofill UX

app/components/UI/Ramp/Deposit/Views/BasicInfo/BasicInfo.test.tsx

@@ -99,6 +99,7 @@ describe('BasicInfo Component', () => {
       screen.getByPlaceholderText('XXX-XX-XXXX'),
       '123456789',
     );
+    fireEvent.changeText(screen.getByTestId('ssn-input'), '123456789');
     expect(screen.toJSON()).toMatchSnapshot();
     fireEvent.press(screen.getByRole('button', { name: 'Continue' }));
 

app/components/UI/Ramp/Deposit/Views/BasicInfo/BasicInfo.tsx

@@ -127,13 +127,28 @@ const BasicInfo = (): JSX.Element => {
     }
   }, [navigation, validateFormData, formData, quote, kycUrl]);
 
-  const handleSubmitEditing = useCallback(
+  const focusNextField = useCallback(
     (nextRef: React.RefObject<TextInput>) => () => {
       nextRef.current?.focus();
     },
     [],
   );
 
+  const handleFieldChange = useCallback(
+    (field: keyof BasicInfoFormData, nextAction?: () => void) =>
+      (value: string) => {
+        const currentValue = formData[field];
+        const isAutofill = value.length - currentValue.length > 1;
+
+        handleFormDataChange(field)(value);
+
+        if (isAutofill && nextAction) {
+          nextAction();
+        }
+      },
+    [formData, handleFormDataChange],
+  );
+
   return (
     <ScreenLayout>
       <ScreenLayout.Body>
@@ -152,7 +167,10 @@ const BasicInfo = (): JSX.Element => {
                 label={strings('deposit.basic_info.first_name')}
                 placeholder="John"
                 value={formData.firstName}
-                onChangeText={handleFormDataChange('firstName')}
+                onChangeText={handleFieldChange(
+                  'firstName',
+                  focusNextField(lastNameInputRef),
+                )}
                 error={errors.firstName}
                 returnKeyType="next"
                 testID="first-name-input"
@@ -161,14 +179,17 @@ const BasicInfo = (): JSX.Element => {
                 autoComplete="given-name"
                 textContentType="givenName"
                 autoCapitalize="words"
-                onSubmitEditing={handleSubmitEditing(lastNameInputRef)}
+                onSubmitEditing={focusNextField(lastNameInputRef)}
               />
 
               <DepositTextField
                 label={strings('deposit.basic_info.last_name')}
                 placeholder="Smith"
                 value={formData.lastName}
-                onChangeText={handleFormDataChange('lastName')}
+                onChangeText={handleFieldChange(
+                  'lastName',
+                  focusNextField(phoneInputRef),
+                )}
                 error={errors.lastName}
                 returnKeyType="next"
                 testID="last-name-input"
@@ -177,27 +198,36 @@ const BasicInfo = (): JSX.Element => {
                 autoComplete="family-name"
                 textContentType="familyName"
                 autoCapitalize="words"
-                onSubmitEditing={handleSubmitEditing(phoneInputRef)}
+                onSubmitEditing={focusNextField(phoneInputRef)}
               />
             </View>
 
             <DepositPhoneField
               label={strings('deposit.basic_info.phone_number')}
               value={formData.mobileNumber}
-              onChangeText={handleFormDataChange('mobileNumber')}
+              onChangeText={handleFieldChange(
+                'mobileNumber',
+                focusNextField(dateInputRef),
+              )}
               error={errors.mobileNumber}
               ref={phoneInputRef}
-              onSubmitEditing={handleSubmitEditing(dateInputRef)}
+              onSubmitEditing={focusNextField(dateInputRef)}
             />
 
             <DepositDateField
               label={strings('deposit.basic_info.date_of_birth')}
               value={formData.dob}
-              onChangeText={handleFormDataChange('dob')}
+              onChangeText={handleFieldChange('dob', () => {
+                if (selectedRegion?.isoCode === 'US') {
+                  focusNextField(ssnInputRef)();
+                } else {
+                  Keyboard.dismiss();
+                }
+              })}
               error={errors.dob}
               onSubmitEditing={() => {
                 if (selectedRegion?.isoCode === 'US') {
-                  handleSubmitEditing(ssnInputRef)();
+                  focusNextField(ssnInputRef)();
                 } else {
                   Keyboard.dismiss();
                 }
@@ -212,7 +242,7 @@ const BasicInfo = (): JSX.Element => {
                 label={strings('deposit.basic_info.social_security_number')}
                 placeholder="XXX-XX-XXXX"
                 value={formData.ssn}
-                onChangeText={handleFormDataChange('ssn')}
+                onChangeText={handleFieldChange('ssn')}
                 error={errors.ssn}
                 returnKeyType="done"
                 testID="ssn-input"
@@ -224,7 +254,6 @@ const BasicInfo = (): JSX.Element => {
                 maxLength={11}
                 onSubmitEditing={() => {
                   Keyboard.dismiss();
-                  handleOnPressContinue();
                 }}
               />
             )}

app/components/UI/Ramp/Deposit/Views/BasicInfo/__snapshots__/BasicInfo.test.tsx.snap

@@ -908,6 +908,7 @@ exports[`BasicInfo Component navigates to address page when form is valid and co
                                           }
                                         }
                                         testID="deposit-phone-field-test-id"
+                                        textContentType="telephoneNumber"
                                         value="(234) 567-890"
                                       />
                                     </View>
@@ -2220,6 +2221,7 @@ exports[`BasicInfo Component render matches snapshot 1`] = `
                                           }
                                         }
                                         testID="deposit-phone-field-test-id"
+                                        textContentType="telephoneNumber"
                                         value=""
                                       />
                                     </View>
@@ -3562,6 +3564,7 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is
                                           }
                                         }
                                         testID="deposit-phone-field-test-id"
+                                        textContentType="telephoneNumber"
                                         value=""
                                       />
                                     </View>

app/components/UI/Ramp/Deposit/components/DepositDateField/DepositDateField.tsx

@@ -35,6 +35,15 @@ const formatDateForValue = (date: Date): string => {
 };
 
 const getValidDate = (dateString: string): Date => {
+  const dateRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+  const match = dateString.match(dateRegex);
+
+  if (match) {
+    const [, month, day, year] = match;
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    return isNaN(date.getTime()) ? DEFAULT_DATE : date;
+  }
+
   const date = new Date(dateString);
   return isNaN(date.getTime()) ? DEFAULT_DATE : date;
 };
@@ -97,7 +106,6 @@ const DepositDateField = forwardRef<TextInput, DepositDateFieldProps>(
   ) => {
     const { styles, theme } = useStyles(styleSheet, {});
     const [showDatePicker, setShowDatePicker] = useState(false);
-    // staging state for iOS date selection
     const [pendingDateSelection, setPendingDateSelection] =
       useState<Date | null>(null);
     const fieldRef = useRef<TextInput>(null);
@@ -120,6 +128,7 @@ const DepositDateField = forwardRef<TextInput, DepositDateFieldProps>(
 
     const preventModalDismissal = () => {
       // Prevents touch events from bubbling up to the outer TouchableWithoutFeedback
+      // This is a workaround to prevent the modal from being dismissed when the user taps on the date picker
     };
 
     return (

app/components/UI/Ramp/Deposit/components/DepositPhoneField/DepositPhoneField.tsx

@@ -113,6 +113,7 @@ const DepositPhoneField = forwardRef<TextInput, PhoneFieldProps>(
           strings('deposit.basic_info.enter_phone_number')
         }
         keyboardType="phone-pad"
+        textContentType="telephoneNumber"
         startAccessory={countryPrefixAccessory}
         onSubmitEditing={onSubmitEditing}
         ref={ref}

app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap

@@ -127,6 +127,7 @@ exports[`DepositPhoneField renders correctly after flag button press 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value=""
       />
     </View>
@@ -261,6 +262,7 @@ exports[`DepositPhoneField renders correctly after input change 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value=""
       />
     </View>
@@ -395,6 +397,7 @@ exports[`DepositPhoneField renders correctly with default props 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value=""
       />
     </View>
@@ -529,6 +532,7 @@ exports[`DepositPhoneField renders correctly with different region 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value=""
       />
     </View>
@@ -663,6 +667,7 @@ exports[`DepositPhoneField renders correctly with error message 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value=""
       />
     </View>
@@ -812,6 +817,7 @@ exports[`DepositPhoneField renders correctly with long phone number 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value="155512345678901234"
       />
     </View>
@@ -947,6 +953,7 @@ exports[`DepositPhoneField renders correctly with onSubmitEditing callback 1`] =
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value=""
       />
     </View>
@@ -1081,6 +1088,7 @@ exports[`DepositPhoneField renders correctly with special characters in phone nu
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value="15551234567"
       />
     </View>
@@ -1215,6 +1223,7 @@ exports[`DepositPhoneField renders correctly with unsupported region 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value=""
       />
     </View>
@@ -1349,6 +1358,7 @@ exports[`DepositPhoneField renders correctly with value 1`] = `
           }
         }
         testID="deposit-phone-field-test-id"
+        textContentType="telephoneNumber"
         value="(555) 123-4567"
       />
     </View>