Skip to content

Commit

Permalink
Merge pull request Expensify#26346 from huzaifa-99/24642-fix-back-but…
Browse files Browse the repository at this point in the history 
…ton-on-profile-pages-offline-mode

Show header in profile pages when personal details are loading
  • Loading branch information
@aldo-expensify
aldo-expensify authored Sep 11, 2023
2 parents b9dc6aa + 62010fc commit 544661b
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 166 deletions.
161 changes: 81 additions & 80 deletions src/pages/settings/Profile/PersonalDetails/AddressPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ function AddressPage({privatePersonalDetails}) {
const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});

const address = lodashGet(privatePersonalDetails, 'address') || {};
const isLoadingPersonalDetails = lodashGet(privatePersonalDetails, 'isLoading', true);
const [street1, street2] = (address.street || '').split('\n');
const [state, setState] = useState(address.state);
/**
Expand Down Expand Up @@ -127,103 +128,103 @@ function AddressPage({privatePersonalDetails}) {
setState(value);
};

if (lodashGet(privatePersonalDetails, 'isLoading', true)) {
return <FullscreenLoadingIndicator />;
}

return (
<ScreenWrapper includeSafeAreaPaddingBottom={false}>
<HeaderWithBackButton
title={translate('privatePersonalDetails.homeAddress')}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
/>
<Form
style={[styles.flexGrow1, styles.mh5]}
formID={ONYXKEYS.FORMS.HOME_ADDRESS_FORM}
validate={validate}
onSubmit={updateAddress}
submitButtonText={translate('common.save')}
enabledWhenOffline
>
<View>
<AddressSearch
inputID="addressLine1"
label={translate('common.addressLine', {lineNumber: 1})}
defaultValue={street1 || ''}
onValueChange={handleAddressChange}
renamedInputKeys={{
street: 'addressLine1',
street2: 'addressLine2',
city: 'city',
state: 'state',
zipCode: 'zipPostCode',
country: 'country',
}}
maxInputLength={CONST.FORM_CHARACTER_LIMIT}
/>
</View>
<View style={styles.formSpaceVertical} />
<TextInput
inputID="addressLine2"
label={translate('common.addressLine', {lineNumber: 2})}
accessibilityLabel={translate('common.addressLine')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
defaultValue={street2 || ''}
maxLength={CONST.FORM_CHARACTER_LIMIT}
spellCheck={false}
/>
<View style={styles.formSpaceVertical} />
<View style={styles.mhn5}>
<CountryPicker
inputID="country"
defaultValue={currentCountry}
onValueChange={handleAddressChange}
{isLoadingPersonalDetails ? (
<FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
) : (
<Form
style={[styles.flexGrow1, styles.mh5]}
formID={ONYXKEYS.FORMS.HOME_ADDRESS_FORM}
validate={validate}
onSubmit={updateAddress}
submitButtonText={translate('common.save')}
enabledWhenOffline
>
<View>
<AddressSearch
inputID="addressLine1"
label={translate('common.addressLine', {lineNumber: 1})}
defaultValue={street1 || ''}
onValueChange={handleAddressChange}
renamedInputKeys={{
street: 'addressLine1',
street2: 'addressLine2',
city: 'city',
state: 'state',
zipCode: 'zipPostCode',
country: 'country',
}}
maxInputLength={CONST.FORM_CHARACTER_LIMIT}
/>
</View>
<View style={styles.formSpaceVertical} />
<TextInput
inputID="addressLine2"
label={translate('common.addressLine', {lineNumber: 2})}
accessibilityLabel={translate('common.addressLine')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
defaultValue={street2 || ''}
maxLength={CONST.FORM_CHARACTER_LIMIT}
spellCheck={false}
/>
</View>
<View style={styles.formSpaceVertical} />
{isUSAForm ? (
<View style={styles.formSpaceVertical} />
<View style={styles.mhn5}>
<StatePicker
inputID="state"
defaultValue={state}
<CountryPicker
inputID="country"
defaultValue={currentCountry}
onValueChange={handleAddressChange}
/>
</View>
) : (
<View style={styles.formSpaceVertical} />
{isUSAForm ? (
<View style={styles.mhn5}>
<StatePicker
inputID="state"
defaultValue={state}
onValueChange={handleAddressChange}
/>
</View>
) : (
<TextInput
inputID="state"
label={translate('common.stateOrProvince')}
accessibilityLabel={translate('common.stateOrProvince')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
value={state || ''}
maxLength={CONST.FORM_CHARACTER_LIMIT}
spellCheck={false}
onValueChange={handleAddressChange}
/>
)}
<View style={styles.formSpaceVertical} />
<TextInput
inputID="state"
label={translate('common.stateOrProvince')}
accessibilityLabel={translate('common.stateOrProvince')}
inputID="city"
label={translate('common.city')}
accessibilityLabel={translate('common.city')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
value={state || ''}
defaultValue={address.city || ''}
maxLength={CONST.FORM_CHARACTER_LIMIT}
spellCheck={false}
onValueChange={handleAddressChange}
/>
)}
<View style={styles.formSpaceVertical} />
<TextInput
inputID="city"
label={translate('common.city')}
accessibilityLabel={translate('common.city')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
defaultValue={address.city || ''}
maxLength={CONST.FORM_CHARACTER_LIMIT}
spellCheck={false}
/>
<View style={styles.formSpaceVertical} />
<TextInput
inputID="zipPostCode"
label={translate('common.zipPostCode')}
accessibilityLabel={translate('common.zipPostCode')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
autoCapitalize="characters"
defaultValue={address.zip || ''}
maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
hint={zipFormat}
/>
</Form>
<View style={styles.formSpaceVertical} />
<TextInput
inputID="zipPostCode"
label={translate('common.zipPostCode')}
accessibilityLabel={translate('common.zipPostCode')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
autoCapitalize="characters"
defaultValue={address.zip || ''}
maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
hint={zipFormat}
/>
</Form>
)}
</ScreenWrapper>
);
}
Expand Down
41 changes: 21 additions & 20 deletions src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const defaultProps = {

function DateOfBirthPage({translate, privatePersonalDetails}) {
usePrivatePersonalDetails();
const isLoadingPersonalDetails = lodashGet(privatePersonalDetails, 'isLoading', true);

/**
* @param {Object} values
Expand All @@ -59,32 +60,32 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
return errors;
}, []);

if (lodashGet(privatePersonalDetails, 'isLoading', true)) {
return <FullscreenLoadingIndicator />;
}

return (
<ScreenWrapper includeSafeAreaPaddingBottom={false}>
<HeaderWithBackButton
title={translate('common.dob')}
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
/>
<Form
style={[styles.flexGrow1, styles.ph5]}
formID={ONYXKEYS.FORMS.DATE_OF_BIRTH_FORM}
validate={validate}
onSubmit={PersonalDetails.updateDateOfBirth}
submitButtonText={translate('common.save')}
enabledWhenOffline
>
<NewDatePicker
inputID="dob"
label={translate('common.date')}
defaultValue={privatePersonalDetails.dob || ''}
minDate={moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'years').toDate()}
maxDate={moment().subtract(CONST.DATE_BIRTH.MIN_AGE, 'years').toDate()}
/>
</Form>
{isLoadingPersonalDetails ? (
<FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
) : (
<Form
style={[styles.flexGrow1, styles.ph5]}
formID={ONYXKEYS.FORMS.DATE_OF_BIRTH_FORM}
validate={validate}
onSubmit={PersonalDetails.updateDateOfBirth}
submitButtonText={translate('common.save')}
enabledWhenOffline
>
<NewDatePicker
inputID="dob"
label={translate('common.date')}
defaultValue={privatePersonalDetails.dob || ''}
minDate={moment().subtract(CONST.DATE_BIRTH.MAX_AGE, 'years').toDate()}
maxDate={moment().subtract(CONST.DATE_BIRTH.MIN_AGE, 'years').toDate()}
/>
</Form>
)}
</ScreenWrapper>
);
}
Expand Down
75 changes: 38 additions & 37 deletions src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function LegalNamePage(props) {
usePrivatePersonalDetails();
const legalFirstName = lodashGet(props.privatePersonalDetails, 'legalFirstName', '');
const legalLastName = lodashGet(props.privatePersonalDetails, 'legalLastName', '');
const isLoadingPersonalDetails = lodashGet(props.privatePersonalDetails, 'isLoading', true);

const validate = useCallback((values) => {
const errors = {};
Expand All @@ -66,10 +67,6 @@ function LegalNamePage(props) {
return errors;
}, []);

if (lodashGet(props.privatePersonalDetails, 'isLoading', true)) {
return <FullscreenLoadingIndicator />;
}

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
Expand All @@ -79,39 +76,43 @@ function LegalNamePage(props) {
title={props.translate('privatePersonalDetails.legalName')}
onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
/>
<Form
style={[styles.flexGrow1, styles.ph5]}
formID={ONYXKEYS.FORMS.LEGAL_NAME_FORM}
validate={validate}
onSubmit={updateLegalName}
submitButtonText={props.translate('common.save')}
enabledWhenOffline
>
<View style={[styles.mb4]}>
<TextInput
inputID="legalFirstName"
name="lfname"
label={props.translate('privatePersonalDetails.legalFirstName')}
accessibilityLabel={props.translate('privatePersonalDetails.legalFirstName')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
defaultValue={legalFirstName}
maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
spellCheck={false}
/>
</View>
<View>
<TextInput
inputID="legalLastName"
name="llname"
label={props.translate('privatePersonalDetails.legalLastName')}
accessibilityLabel={props.translate('privatePersonalDetails.legalLastName')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
defaultValue={legalLastName}
maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
spellCheck={false}
/>
</View>
</Form>
{isLoadingPersonalDetails ? (
<FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
) : (
<Form
style={[styles.flexGrow1, styles.ph5]}
formID={ONYXKEYS.FORMS.LEGAL_NAME_FORM}
validate={validate}
onSubmit={updateLegalName}
submitButtonText={props.translate('common.save')}
enabledWhenOffline
>
<View style={[styles.mb4]}>
<TextInput
inputID="legalFirstName"
name="lfname"
label={props.translate('privatePersonalDetails.legalFirstName')}
accessibilityLabel={props.translate('privatePersonalDetails.legalFirstName')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
defaultValue={legalFirstName}
maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
spellCheck={false}
/>
</View>
<View>
<TextInput
inputID="legalLastName"
name="llname"
label={props.translate('privatePersonalDetails.legalLastName')}
accessibilityLabel={props.translate('privatePersonalDetails.legalLastName')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
defaultValue={legalLastName}
maxLength={CONST.DISPLAY_NAME.MAX_LENGTH}
spellCheck={false}
/>
</View>
</Form>
)}
</ScreenWrapper>
);
}
Expand Down
Loading

0 comments on commit 544661b

Please sign in to comment.