From 493dc431ed1bb5612d9040ba72a24d2b67183c01 Mon Sep 17 00:00:00 2001 From: daledah Date: Sat, 8 Feb 2025 22:08:35 +0700 Subject: [PATCH 1/2] fix: autofill country on address form --- src/libs/PersonalDetailsUtils.ts | 17 +++++++++++++++++ src/pages/AddressPage.tsx | 6 ++++-- .../PersonalDetails/PersonalAddressPage.tsx | 11 +++++++---- 3 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/libs/PersonalDetailsUtils.ts b/src/libs/PersonalDetailsUtils.ts index 304181158f4e..6a4dbcdbb747 100644 --- a/src/libs/PersonalDetailsUtils.ts +++ b/src/libs/PersonalDetailsUtils.ts @@ -47,6 +47,18 @@ Onyx.connect({ }, }); +let defaultCountry = ''; + +Onyx.connect({ + key: ONYXKEYS.COUNTRY, + callback: (value) => { + if (!value) { + return; + } + defaultCountry = value; + }, +}); + const regexMergedAccount = new RegExp(CONST.REGEX.MERGED_ACCOUNT_PREFIX); function getDisplayNameOrDefault(passedPersonalDetails?: Partial | null, defaultValue = '', shouldFallbackToHidden = true, shouldAddCurrentUserPostfix = false): string { @@ -370,6 +382,10 @@ function getUserNameByEmail(email: string, nameToDisplay: 'firstName' | 'display return email; } +function getDefaultCountry() { + return defaultCountry; +} + export { isPersonalDetailsEmpty, getDisplayNameOrDefault, @@ -388,4 +404,5 @@ export { getNewAccountIDsAndLogins, getPersonalDetailsLength, getUserNameByEmail, + getDefaultCountry, }; diff --git a/src/pages/AddressPage.tsx b/src/pages/AddressPage.tsx index a0793a958f49..8e3d0d373dc2 100644 --- a/src/pages/AddressPage.tsx +++ b/src/pages/AddressPage.tsx @@ -25,16 +25,18 @@ type AddressPageProps = { updateAddress: (values: FormOnyxValues) => void; /** Title of address page */ title: string; + + defaultCountry?: Country; } & BackToParams; -function AddressPage({title, address, updateAddress, isLoadingApp = true, backTo}: AddressPageProps) { +function AddressPage({title, address, updateAddress, isLoadingApp = true, backTo, defaultCountry}: AddressPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); // Check if country is valid const {street} = address ?? {}; const [street1, street2] = street ? street.split('\n') : [undefined, undefined]; - const [currentCountry, setCurrentCountry] = useState(address?.country); + const [currentCountry, setCurrentCountry] = useState(address?.country ?? defaultCountry); const [state, setState] = useState(address?.state); const [city, setCity] = useState(address?.city); const [zipcode, setZipcode] = useState(address?.zip); diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx b/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx index 668081242996..7f04e4252fe1 100644 --- a/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx @@ -4,10 +4,11 @@ import {withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +import {getCurrentAddress, getDefaultCountry} from '@libs/PersonalDetailsUtils'; import AddressPage from '@pages/AddressPage'; -import * as PersonalDetails from '@userActions/PersonalDetails'; import type {FormOnyxValues} from '@src/components/Form/types'; +import type {Country} from '@src/CONST'; +import {updateAddress as updateAddressPersonalDetails} from '@src/libs/actions/PersonalDetails'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type {PrivatePersonalDetails} from '@src/types/onyx'; @@ -26,7 +27,7 @@ type PersonalAddressPageProps = PlatformStackScreenProps) { - PersonalDetails.updateAddress( + updateAddressPersonalDetails( values.addressLine1?.trim() ?? '', values.addressLine2?.trim() ?? '', values.city.trim(), @@ -38,10 +39,12 @@ function updateAddress(values: FormOnyxValues PersonalDetailsUtils.getCurrentAddress(privatePersonalDetails), [privatePersonalDetails]); + const address = useMemo(() => getCurrentAddress(privatePersonalDetails), [privatePersonalDetails]); + const defaultCountry = getDefaultCountry(); return ( Date: Sat, 8 Feb 2025 22:20:03 +0700 Subject: [PATCH 2/2] fix: lint --- src/libs/PersonalDetailsUtils.ts | 20 ++++++------- .../PersonalDetails/PersonalAddressPage.tsx | 29 ++++--------------- 2 files changed, 15 insertions(+), 34 deletions(-) diff --git a/src/libs/PersonalDetailsUtils.ts b/src/libs/PersonalDetailsUtils.ts index 6a4dbcdbb747..dc35a2532727 100644 --- a/src/libs/PersonalDetailsUtils.ts +++ b/src/libs/PersonalDetailsUtils.ts @@ -7,9 +7,9 @@ import type {OnyxInputOrEntry, PersonalDetails, PersonalDetailsList, PrivatePers import type {Address} from '@src/types/onyx/PrivatePersonalDetails'; import type {OnyxData} from '@src/types/onyx/Request'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import * as LocalePhoneNumber from './LocalePhoneNumber'; -import * as Localize from './Localize'; -import * as UserUtils from './UserUtils'; +import {formatPhoneNumber} from './LocalePhoneNumber'; +import {translateLocal} from './Localize'; +import {generateAccountID} from './UserUtils'; type FirstAndLastName = { firstName: string; @@ -42,8 +42,8 @@ Onyx.connect({ if (!value) { return; } - hiddenTranslation = Localize.translateLocal('common.hidden'); - youTranslation = Localize.translateLocal('common.you').toLowerCase(); + hiddenTranslation = translateLocal('common.hidden'); + youTranslation = translateLocal('common.you').toLowerCase(); }, }); @@ -130,7 +130,7 @@ function getPersonalDetailsByIDs({ if (shouldChangeUserDisplayName && currentUserAccountID === detail.accountID) { return { ...detail, - displayName: Localize.translateLocal('common.you'), + displayName: translateLocal('common.you'), }; } @@ -155,7 +155,7 @@ function getAccountIDsByLogins(logins: string[]): number[] { const currentDetail = personalDetails.find((detail) => detail?.login === login?.toLowerCase()); if (!currentDetail) { // generate an account ID because in this case the detail is probably new, so we don't have a real accountID yet - foundAccountIDs.push(UserUtils.generateAccountID(login)); + foundAccountIDs.push(generateAccountID(login)); } else { foundAccountIDs.push(Number(currentDetail.accountID)); } @@ -209,7 +209,7 @@ function getPersonalDetailsOnyxDataForOptimisticUsers(newLogins: string[], newAc personalDetailsNew[accountID] = { login, accountID, - displayName: LocalePhoneNumber.formatPhoneNumber(login), + displayName: formatPhoneNumber(login), isOptimisticPersonalDetail: true, }; @@ -306,7 +306,7 @@ function getFormattedAddress(privatePersonalDetails: OnyxEntry | OnyxInputOrEntry): string { // If we have a number like +15857527441@expensify.sms then let's remove @expensify.sms and format it // so that the option looks cleaner in our UI. - const userLogin = LocalePhoneNumber.formatPhoneNumber(login); + const userLogin = formatPhoneNumber(login); if (!passedPersonalDetails) { return userLogin; diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx b/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx index 7f04e4252fe1..cc873235d328 100644 --- a/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/PersonalAddressPage.tsx @@ -1,26 +1,12 @@ import React, {useMemo} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; -import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; -import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {getCurrentAddress, getDefaultCountry} from '@libs/PersonalDetailsUtils'; import AddressPage from '@pages/AddressPage'; import type {FormOnyxValues} from '@src/components/Form/types'; import type {Country} from '@src/CONST'; import {updateAddress as updateAddressPersonalDetails} from '@src/libs/actions/PersonalDetails'; import ONYXKEYS from '@src/ONYXKEYS'; -import type SCREENS from '@src/SCREENS'; -import type {PrivatePersonalDetails} from '@src/types/onyx'; - -type PersonalAddressPageOnyxProps = { - /** User's private personal details */ - privatePersonalDetails: OnyxEntry; - /** Whether app is loading */ - isLoadingApp: OnyxEntry; -}; - -type PersonalAddressPageProps = PlatformStackScreenProps & PersonalAddressPageOnyxProps; /** * Submit form to update user's first and last legal name @@ -37,8 +23,10 @@ function updateAddress(values: FormOnyxValues getCurrentAddress(privatePersonalDetails), [privatePersonalDetails]); const defaultCountry = getDefaultCountry(); @@ -55,11 +43,4 @@ function PersonalAddressPage({privatePersonalDetails, isLoadingApp = true}: Pers PersonalAddressPage.displayName = 'PersonalAddressPage'; -export default withOnyx({ - privatePersonalDetails: { - key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, - }, - isLoadingApp: { - key: ONYXKEYS.IS_LOADING_APP, - }, -})(PersonalAddressPage); +export default PersonalAddressPage;