fix typings after merge

Author: pasyukevich

src/components/AddressForm.tsx

@@ -44,10 +44,10 @@ type AddressFormProps = {
     zip?: string;
 
     /** Callback which is executed when the user changes address, city or state */
-    onAddressChanged?: (value: unknown, key: string) => void;
+    onAddressChanged?: (value: unknown, key: unknown) => void;
 
     /** Callback which is executed when the user submits his address changes */
-    onSubmit: () => void;
+    onSubmit: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM | typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) => void;
 
     /** Whether or not should the form data should be saved as draft */
     shouldSaveDraft?: boolean;
@@ -56,7 +56,7 @@ type AddressFormProps = {
     submitButtonText?: string;
 
     /** A unique Onyx key identifying the form */
-    formID: typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM;
+    formID: typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM | typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM;
 };
 
 function AddressForm({
@@ -88,7 +88,7 @@ function AddressForm({
      * @returns - An object containing the errors for each inputID
      */
 
-    const validator = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM>): Errors => {
+    const validator = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM | typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>): Errors => {
         const errors: Errors & {
             zipPostCode?: string | string[];
         } = {};
@@ -147,7 +147,7 @@ function AddressForm({
                     InputComponent={AddressSearch}
                     inputID={INPUT_IDS.ADDRESS_LINE_1}
                     label={translate('common.addressLine', {lineNumber: 1})}
-                    onValueChange={(data: unknown, key: string) => {
+                    onValueChange={(data: unknown, key: unknown) => {
                         onAddressChanged(data, key);
                         // This enforces the country selector to use the country from address instead of the country from URL
                         Navigation.setParams({country: undefined});

src/components/Form/types.ts

@@ -16,6 +16,7 @@ import type TextInput from '@components/TextInput';
 import type ValuePicker from '@components/ValuePicker';
 import type {MaybePhraseKey} from '@libs/Localize';
 import type BusinessTypePicker from '@pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker';
+import type {Country} from '@src/CONST';
 import type {OnyxFormKey, OnyxValues} from '@src/ONYXKEYS';
 import type {BaseForm} from '@src/types/form/Form';
 
@@ -42,11 +43,12 @@ type ValidInputs =
     | typeof DatePicker
     | typeof RadioButtons;
 
-type ValueTypeKey = 'string' | 'boolean' | 'date';
+type ValueTypeKey = 'string' | 'boolean' | 'date' | 'country';
 type ValueTypeMap = {
     string: string;
     boolean: boolean;
     date: Date;
+    country: Country | '';
 };
 type FormValue = ValueOf<ValueTypeMap>;
 

src/libs/Navigation/types.ts

@@ -12,6 +12,7 @@ import type {
 } from '@react-navigation/native';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
+import type {Country} from '@src/CONST';
 import type NAVIGATORS from '@src/NAVIGATORS';
 import type {HybridAppRoute, Route as Routes} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -107,7 +108,7 @@ type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: undefined;
     [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: undefined;
     [SCREENS.SETTINGS.PROFILE.ADDRESS]: {
-        country?: string;
+        country?: Country | '';
     };
     [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: {
         backTo?: Routes;

src/pages/settings/Profile/PersonalDetails/AddressPage.tsx

@@ -12,6 +12,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as PersonalDetails from '@userActions/PersonalDetails';
+import type {FormOnyxValues} from '@src/components/Form/types';
+import type {Country} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type {PrivatePersonalDetails} from '@src/types/onyx';
@@ -28,7 +30,7 @@ type AddressPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCRE
  * Submit form to update user's first and last legal name
  * @param values - form input values
  */
-function updateAddress(values: Address) {
+function updateAddress(values: FormOnyxValues<typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) {
     PersonalDetails.updateAddress(
         values.addressLine1?.trim() ?? '',
         values.addressLine2?.trim() ?? '',
@@ -62,29 +64,32 @@ function AddressPage({privatePersonalDetails, route}: AddressPageProps) {
         setZipcode(address.zip);
     }, [address]);
 
-    const handleAddressChange = useCallback((value: string, key: keyof Address) => {
-        if (key !== 'country' && key !== 'state' && key !== 'city' && key !== 'zipPostCode') {
+    const handleAddressChange = useCallback((value: unknown, key: unknown) => {
+        const countryValue = value as Country | '';
+        const addressKey = key as keyof Address;
+
+        if (addressKey !== 'country' && addressKey !== 'state' && addressKey !== 'city' && addressKey !== 'zipPostCode') {
             return;
         }
-        if (key === 'country') {
-            setCurrentCountry(value);
+        if (addressKey === 'country') {
+            setCurrentCountry(countryValue);
             setState('');
             setCity('');
             setZipcode('');
             return;
         }
-        if (key === 'state') {
-            setState(value);
+        if (addressKey === 'state') {
+            setState(countryValue);
             setCity('');
             setZipcode('');
             return;
         }
-        if (key === 'city') {
-            setCity(value);
+        if (addressKey === 'city') {
+            setCity(countryValue);
             setZipcode('');
             return;
         }
-        setZipcode(value);
+        setZipcode(countryValue);
     }, []);
 
     useEffect(() => {

src/types/form/HomeAddressForm.ts

@@ -1,4 +1,5 @@
 import type {ValueOf} from 'type-fest';
+import type {Country} from '@src/CONST';
 import type Form from './Form';
 
 const INPUT_IDS = {
@@ -17,7 +18,7 @@ type HomeAddressForm = Form<
     {
         [INPUT_IDS.ADDRESS_LINE_1]: string;
         [INPUT_IDS.ADDRESS_LINE_2]: string;
-        [INPUT_IDS.COUNTRY]: string;
+        [INPUT_IDS.COUNTRY]: Country | '';
         [INPUT_IDS.STATE]: string;
         [INPUT_IDS.CITY]: string;
         [INPUT_IDS.ZIP_POST_CODE]: string;