From ee67c38a368f7ed74765ef591cde9d58950b75c5 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 1 Aug 2024 11:30:24 +0700 Subject: [PATCH 1/4] fix: State is not auto filled after selecting the address --- .../Wallet/Card/GetPhysicalCardAddress.tsx | 55 +++++++++++++++++-- 1 file changed, 51 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx index 5f3dbb3fa6c3..4bb75f600931 100644 --- a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx +++ b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx @@ -1,15 +1,17 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useEffect} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import AddressForm from '@components/AddressForm'; import useLocalize from '@hooks/useLocalize'; import * as FormActions from '@libs/actions/FormActions'; import type {SettingsNavigatorParamList} from '@navigation/types'; +import type {Country} from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {GetPhysicalCardForm} from '@src/types/form'; +import type {Address} from '@src/types/onyx/PrivatePersonalDetails'; import BaseGetPhysicalCard from './BaseGetPhysicalCard'; import type {RenderContentProps} from './BaseGetPhysicalCard'; @@ -28,7 +30,23 @@ function GetPhysicalCardAddress({ }: GetPhysicalCardAddressProps) { const {translate} = useLocalize(); - const {addressLine1 = '', addressLine2 = '', city = '', state = '', zipPostCode = '', country = ''} = draftValues ?? {}; + // Check if country is valid + const {addressLine1, addressLine2} = draftValues ?? {}; + const [currentCountry, setCurrentCountry] = useState(draftValues?.country); + const [state, setState] = useState(draftValues?.state); + const [city, setCity] = useState(draftValues?.city); + const [zipPostCode, setZipPostCode] = useState(draftValues?.zipPostCode); + + useEffect(() => { + if (!draftValues) { + return; + } + setState(draftValues.state); + setCurrentCountry(draftValues.country); + setCity(draftValues.city); + setZipPostCode(draftValues.zipPostCode); + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, [draftValues?.state, draftValues?.country, draftValues?.city, draftValues?.zipPostCode]); useEffect(() => { if (!countryFromUrl) { @@ -37,14 +55,43 @@ function GetPhysicalCardAddress({ FormActions.setDraftValues(ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM, {country: countryFromUrl}); }, [countryFromUrl]); + const handleAddressChange = useCallback((value: unknown, key: unknown) => { + const addressPart = value as string; + const addressPartKey = key as keyof Address; + + if (addressPartKey !== 'country' && addressPartKey !== 'state' && addressPartKey !== 'city' && addressPartKey !== 'zipPostCode') { + return; + } + if (addressPartKey === 'country') { + setCurrentCountry(addressPart as Country | ''); + setState(''); + setCity(''); + setZipPostCode(''); + return; + } + if (addressPartKey === 'state') { + setState(addressPart); + setCity(''); + setZipPostCode(''); + return; + } + if (addressPartKey === 'city') { + setCity(addressPart); + setZipPostCode(''); + return; + } + setZipPostCode(addressPart); + }, []); + const renderContent = useCallback( ({onSubmit, submitButtonText}: RenderContentProps) => ( ), - [addressLine1, addressLine2, city, country, state, zipPostCode], + [addressLine1, addressLine2, city, currentCountry, handleAddressChange, state, zipPostCode], ); return ( From d1f66f321e112c49ea36f643b2930995e018f27b Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 1 Aug 2024 16:12:24 +0700 Subject: [PATCH 2/4] fix lint --- .../settings/Wallet/Card/GetPhysicalCardAddress.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx index 4bb75f600931..8f658084a19c 100644 --- a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx +++ b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx @@ -30,9 +30,8 @@ function GetPhysicalCardAddress({ }: GetPhysicalCardAddressProps) { const {translate} = useLocalize(); - // Check if country is valid const {addressLine1, addressLine2} = draftValues ?? {}; - const [currentCountry, setCurrentCountry] = useState(draftValues?.country); + const [country, setCountry] = useState(draftValues?.country); const [state, setState] = useState(draftValues?.state); const [city, setCity] = useState(draftValues?.city); const [zipPostCode, setZipPostCode] = useState(draftValues?.zipPostCode); @@ -42,7 +41,7 @@ function GetPhysicalCardAddress({ return; } setState(draftValues.state); - setCurrentCountry(draftValues.country); + setCountry(draftValues.country); setCity(draftValues.city); setZipPostCode(draftValues.zipPostCode); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps @@ -63,7 +62,7 @@ function GetPhysicalCardAddress({ return; } if (addressPartKey === 'country') { - setCurrentCountry(addressPart as Country | ''); + setCountry(addressPart as Country | ''); setState(''); setCity(''); setZipPostCode(''); @@ -91,7 +90,7 @@ function GetPhysicalCardAddress({ onAddressChanged={handleAddressChange} submitButtonText={submitButtonText} city={city} - country={currentCountry} + country={country} shouldSaveDraft state={state} street1={addressLine1} @@ -99,7 +98,7 @@ function GetPhysicalCardAddress({ zip={zipPostCode} /> ), - [addressLine1, addressLine2, city, currentCountry, handleAddressChange, state, zipPostCode], + [addressLine1, addressLine2, city, country, handleAddressChange, state, zipPostCode], ); return ( From 98f27cdcda6667db2a2169d6d3eaa056e62d5d1e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 5 Aug 2024 11:02:20 +0700 Subject: [PATCH 3/4] fix: using const --- .../settings/Wallet/Card/GetPhysicalCardAddress.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx index 8f658084a19c..69ba24585e2e 100644 --- a/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx +++ b/src/pages/settings/Wallet/Card/GetPhysicalCardAddress.tsx @@ -11,6 +11,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {GetPhysicalCardForm} from '@src/types/form'; +import INPUT_IDS from '@src/types/form/GetPhysicalCardForm'; import type {Address} from '@src/types/onyx/PrivatePersonalDetails'; import BaseGetPhysicalCard from './BaseGetPhysicalCard'; import type {RenderContentProps} from './BaseGetPhysicalCard'; @@ -58,23 +59,23 @@ function GetPhysicalCardAddress({ const addressPart = value as string; const addressPartKey = key as keyof Address; - if (addressPartKey !== 'country' && addressPartKey !== 'state' && addressPartKey !== 'city' && addressPartKey !== 'zipPostCode') { + if (addressPartKey !== INPUT_IDS.COUNTRY && addressPartKey !== INPUT_IDS.STATE && addressPartKey !== INPUT_IDS.CITY && addressPartKey !== INPUT_IDS.ZIP_POST_CODE) { return; } - if (addressPartKey === 'country') { + if (addressPartKey === INPUT_IDS.COUNTRY) { setCountry(addressPart as Country | ''); setState(''); setCity(''); setZipPostCode(''); return; } - if (addressPartKey === 'state') { + if (addressPartKey === INPUT_IDS.STATE) { setState(addressPart); setCity(''); setZipPostCode(''); return; } - if (addressPartKey === 'city') { + if (addressPartKey === INPUT_IDS.CITY) { setCity(addressPart); setZipPostCode(''); return; From 3aae881b14f24e578ea7191ba3e63faafc318fda Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 5 Aug 2024 15:33:27 +0700 Subject: [PATCH 4/4] use the constants --- src/pages/AddressPage.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/AddressPage.tsx b/src/pages/AddressPage.tsx index a1daa938af4c..54fb9d053df2 100644 --- a/src/pages/AddressPage.tsx +++ b/src/pages/AddressPage.tsx @@ -10,6 +10,7 @@ import Navigation from '@libs/Navigation/Navigation'; import type {FormOnyxValues} from '@src/components/Form/types'; import type {Country} from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import INPUT_IDS from '@src/types/form/HomeAddressForm'; import type {Address} from '@src/types/onyx/PrivatePersonalDetails'; type AddressPageProps = { @@ -49,23 +50,23 @@ function AddressPage({title, address, updateAddress, isLoadingApp = true}: Addre const addressPart = value as string; const addressPartKey = key as keyof Address; - if (addressPartKey !== 'country' && addressPartKey !== 'state' && addressPartKey !== 'city' && addressPartKey !== 'zipPostCode') { + if (addressPartKey !== INPUT_IDS.COUNTRY && addressPartKey !== INPUT_IDS.STATE && addressPartKey !== INPUT_IDS.CITY && addressPartKey !== INPUT_IDS.ZIP_POST_CODE) { return; } - if (addressPartKey === 'country') { + if (addressPartKey === INPUT_IDS.COUNTRY) { setCurrentCountry(addressPart as Country | ''); setState(''); setCity(''); setZipcode(''); return; } - if (addressPartKey === 'state') { + if (addressPartKey === INPUT_IDS.STATE) { setState(addressPart); setCity(''); setZipcode(''); return; } - if (addressPartKey === 'city') { + if (addressPartKey === INPUT_IDS.CITY) { setCity(addressPart); setZipcode(''); return;