[VIP-Travel] Workspace address page and section in workspace profile #38381
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| // TODO: Change API endpoint parameters format to make it possible to follow naming-convention | ||
| /* eslint-disable @typescript-eslint/naming-convention */ | ||
| type UpdatePolicyAddressParams = { | ||
| policyID: string; | ||
| 'data[addressStreet]': string; | ||
| 'data[city]': string; | ||
| 'data[country]': string; | ||
| 'data[state]': string; | ||
| 'data[zipCode]': string; | ||
| }; | ||
|
|
||
| export default UpdatePolicyAddressParams; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -54,6 +54,7 @@ import type { | |
| UpdateWorkspaceGeneralSettingsParams, | ||
| UpdateWorkspaceMembersRoleParams, | ||
| } from '@libs/API/parameters'; | ||
| import type UpdatePolicyAddressParams from '@libs/API/parameters/UpdatePolicyAddressParams'; | ||
| import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; | ||
| import DateUtils from '@libs/DateUtils'; | ||
| import * as ErrorUtils from '@libs/ErrorUtils'; | ||
|
|
@@ -94,7 +95,7 @@ import type { | |
| } from '@src/types/onyx'; | ||
| import type {ErrorFields, Errors, OnyxValueWithOfflineFeedback, PendingAction} from '@src/types/onyx/OnyxCommon'; | ||
| import type {OriginalMessageJoinPolicyChangeLog} from '@src/types/onyx/OriginalMessage'; | ||
| import type {Attributes, CompanyAddress, CustomUnit, Rate, Unit} from '@src/types/onyx/Policy'; | ||
| import type {OnyxData} from '@src/types/onyx/Request'; | ||
| import type {EmptyObject} from '@src/types/utils/EmptyObject'; | ||
| import {isEmptyObject} from '@src/types/utils/EmptyObject'; | ||
|
|
@@ -1820,6 +1821,37 @@ function hideWorkspaceAlertMessage(policyID: string) { | |
| Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {alertMessage: ''}); | ||
| } | ||
|
|
||
| function updateAddress(policyID: string, newAddress: CompanyAddress) { | ||
| // TODO: Change API endpoint parameters format to make it possible to follow naming-convention | ||
| const parameters: UpdatePolicyAddressParams = { | ||
| policyID, | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| 'data[addressStreet]': newAddress.addressStreet, | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| 'data[city]': newAddress.city, | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| 'data[country]': newAddress.country, | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| 'data[state]': newAddress.state, | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| 'data[zipCode]': newAddress.zip, | ||
| }; | ||
|
There was a problem hiding this comment. this definitely needs to be discussed, it's weird we're passing it this way There was a problem hiding this comment. 100% agreed. I think this is something what needs backend changes. I tried many different ways to make this API request and this is the only one which works. There was a problem hiding this comment. The thread about changing the endpoint on backend: https://swmansion.slack.com/archives/C05S5EV2JTX/p1713825690019579 |
||
|
|
||
| const optimisticData: OnyxUpdate[] = [ | ||
| { | ||
| onyxMethod: Onyx.METHOD.MERGE, | ||
| key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, | ||
| value: { | ||
| address: newAddress, | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| API.write(WRITE_COMMANDS.UPDATE_POLICY_ADDRESS, parameters, { | ||
| optimisticData, | ||
| }); | ||
| } | ||
|
|
||
| function updateWorkspaceCustomUnitAndRate(policyID: string, currentCustomUnit: CustomUnit, newCustomUnit: NewCustomUnit, lastModified?: string) { | ||
| if (!currentCustomUnit.customUnitID || !newCustomUnit?.customUnitID || !newCustomUnit.rates?.customUnitRateID) { | ||
| return; | ||
|
|
@@ -5033,6 +5065,7 @@ export { | |
| clearCustomUnitErrors, | ||
| hideWorkspaceAlertMessage, | ||
| deleteWorkspace, | ||
| updateAddress, | ||
| updateWorkspaceCustomUnitAndRate, | ||
| updateLastAccessedWorkspace, | ||
| clearDeleteMemberError, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import type {StackScreenProps} from '@react-navigation/stack'; | ||
| import React, {useCallback, useMemo, useState} from 'react'; | ||
| import AddressForm from '@components/AddressForm'; | ||
| import type {FormOnyxValues} from '@components/Form/types'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import Navigation from '@libs/Navigation/Navigation'; | ||
| import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; | ||
| import {updateAddress} from '@userActions/Policy'; | ||
| import type {Country} from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type SCREENS from '@src/SCREENS'; | ||
| import type {CompanyAddress} from '@src/types/onyx/Policy'; | ||
| import type {WithPolicyProps} from './withPolicy'; | ||
| import withPolicy from './withPolicy'; | ||
|
|
||
| type WorkspaceProfileAddressPagePolicyProps = WithPolicyProps; | ||
|
|
||
| type WorkspaceProfileAddressPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.ADDRESS> & WorkspaceProfileAddressPagePolicyProps; | ||
|
|
||
| function WorkspaceProfileAddressPage({policy}: WorkspaceProfileAddressPageProps) { | ||
| const {translate} = useLocalize(); | ||
| const address = useMemo(() => policy?.address, [policy]); | ||
| const [currentCountry, setCurrentCountry] = useState(address?.country); | ||
| const [street1, street2] = (address?.addressStreet ?? '').split('\n'); | ||
| const [state, setState] = useState(address?.state); | ||
| const [city, setCity] = useState(address?.city); | ||
| const [zipcode, setZipcode] = useState(address?.zip); | ||
|
There was a problem hiding this comment. AddressForm is already a FormProvider. Those useState hooks are needed for implementation of |
||
|
|
||
smelaa marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| const updatePolicyAddress = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.HOME_ADDRESS_FORM>) => { | ||
| if (!policy) { | ||
| return; | ||
| } | ||
| updateAddress(policy?.id, { | ||
| addressStreet: `${values.addressLine1?.trim() ?? ''}\n${values.addressLine2?.trim() ?? ''}`, | ||
| city: values.city.trim(), | ||
| state: values.state.trim(), | ||
| zip: values?.zipPostCode?.trim().toUpperCase() ?? '', | ||
| country: values.country, | ||
| }); | ||
| Navigation.goBack(); | ||
| }; | ||
|
|
||
| const handleAddressChange = useCallback((value: unknown, key: unknown) => { | ||
| const countryValue = value as Country | ''; | ||
| const addressKey = key as keyof CompanyAddress; | ||
|
|
||
| if (addressKey !== 'country' && addressKey !== 'state' && addressKey !== 'city' && addressKey !== 'zip') { | ||
| return; | ||
| } | ||
| if (addressKey === 'country') { | ||
| setCurrentCountry(countryValue); | ||
| setState(''); | ||
| setCity(''); | ||
| setZipcode(''); | ||
| return; | ||
| } | ||
| if (addressKey === 'state') { | ||
| setState(countryValue); | ||
| setCity(''); | ||
| setZipcode(''); | ||
| return; | ||
| } | ||
| if (addressKey === 'city') { | ||
| setCity(countryValue); | ||
| setZipcode(''); | ||
| return; | ||
| } | ||
| setZipcode(countryValue); | ||
| }, []); | ||
|
There was a problem hiding this comment. this will get simplified afterwards I guess |
||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| includeSafeAreaPaddingBottom={false} | ||
| testID={WorkspaceProfileAddressPage.displayName} | ||
| > | ||
| <HeaderWithBackButton | ||
| title={translate('common.companyAddress')} | ||
| shouldShowBackButton | ||
| onBackButtonPress={() => Navigation.goBack()} | ||
| /> | ||
| <AddressForm | ||
| formID={ONYXKEYS.FORMS.HOME_ADDRESS_FORM} | ||
| onSubmit={updatePolicyAddress} | ||
| submitButtonText={translate('common.save')} | ||
| city={city} | ||
| country={currentCountry} | ||
| onAddressChanged={handleAddressChange} | ||
| state={state} | ||
| street1={street1} | ||
| street2={street2} | ||
| zip={zipcode} | ||
|
Comment on lines
+98
to
+104
There was a problem hiding this comment. afterwards, you can pass form data as a whole, or include it inside of AddressForm |
||
| /> | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| WorkspaceProfileAddressPage.displayName = 'WorkspaceProfileAddressPage'; | ||
|
|
||
| export default withPolicy(WorkspaceProfileAddressPage); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Has an issue been created for it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cc @danieldoglas
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@deetergp is working on it here: https://github.com/Expensify/Web-Expensify/pull/41840