Skip to content

feat: Padding in VBA flows #58279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
madmax330 merged 5 commits into from
Mar 17, 2025
Merged

feat: Padding in VBA flows #58279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
edaf212
feat: Padding in VBA flows
MrMuzyk Mar 12, 2025
2589a3b
fix: prettier
MrMuzyk Mar 12, 2025
84088a7
fix: requestor step paddings
MrMuzyk Mar 12, 2025
9b0a59d
fix: lint
MrMuzyk Mar 12, 2025
e8dc1e9
Merge branch 'main' of https://github.com/Expensify/App into feat/580…
MrMuzyk Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 61 additions & 63 deletions src/components/SubStepForms/ConfirmationStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import {View} from 'react-native';
import Button from '@components/Button';
import DotIndicatorMessage from '@components/DotIndicatorMessage';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import SafeAreaConsumer from '@components/SafeAreaConsumer';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -48,71 +48,69 @@ function ConfirmationStep({pageTitle, summaryItems, showOnfidoLinks, onfidoLinks
const styles = useThemeStyles();
const {isOffline} = useNetwork();

return (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<ScrollView
style={styles.pt0}
contentContainerStyle={[styles.flexGrow1, shouldApplySafeAreaPaddingBottom && safeAreaPaddingBottomStyle]}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{pageTitle}</Text>
{summaryItems.map(({description, title, shouldShowRightIcon, onPress}) => (
<MenuItemWithTopDescription
key={`${title}_${description}`}
description={description}
title={title}
shouldShowRightIcon={shouldShowRightIcon}
onPress={onPress}
/>
))}
const {paddingBottom: safeAreaInsetPaddingBottom} = useStyledSafeAreaInsets();

{showOnfidoLinks && (
<Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
{onfidoLinksTitle}
<TextLink
href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
style={[styles.textMicro]}
>
{translate('onfidoStep.facialScan')}
</TextLink>
{', '}
<TextLink
href={CONST.ONFIDO_PRIVACY_POLICY_URL}
style={[styles.textMicro]}
>
{translate('common.privacy')}
</TextLink>
{` ${translate('common.and')} `}
<TextLink
href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
style={[styles.textMicro]}
>
{translate('common.termsOfService')}
</TextLink>
</Text>
)}
return (
<ScrollView
style={styles.flex1}
contentContainerStyle={[styles.flexGrow1, shouldApplySafeAreaPaddingBottom && {paddingBottom: safeAreaInsetPaddingBottom + styles.pb5.paddingBottom}]}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{pageTitle}</Text>
{summaryItems.map(({description, title, shouldShowRightIcon, onPress}) => (
<MenuItemWithTopDescription
key={`${title}_${description}`}
description={description}
title={title}
shouldShowRightIcon={shouldShowRightIcon}
onPress={onPress}
/>
))}

<View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
{!!error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
<Button
isDisabled={isOffline}
success
large
isLoading={isLoading}
style={[styles.w100]}
onPress={onNext}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
{showOnfidoLinks && (
<Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
{onfidoLinksTitle}
<TextLink
href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
style={[styles.textMicro]}
>
{translate('onfidoStep.facialScan')}
</TextLink>
{', '}
<TextLink
href={CONST.ONFIDO_PRIVACY_POLICY_URL}
style={[styles.textMicro]}
>
{translate('common.privacy')}
</TextLink>
{` ${translate('common.and')} `}
<TextLink
href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
style={[styles.textMicro]}
>
{translate('common.termsOfService')}
</TextLink>
</Text>
)}
</SafeAreaConsumer>

<View style={[styles.ph5, styles.mt5, styles.flexGrow1, styles.justifyContentEnd]}>
{!!error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
<Button
isDisabled={isOffline}
success
large
isLoading={isLoading}
style={[styles.w100]}
onPress={onNext}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
);
}

Expand Down
67 changes: 32 additions & 35 deletions src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import Button from '@components/Button';
import DotIndicatorMessage from '@components/DotIndicatorMessage';
import {FallbackAvatar} from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import SafeAreaConsumer from '@components/SafeAreaConsumer';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
import useThemeStyles from '@hooks/useThemeStyles';
import {getLatestErrorMessage} from '@libs/ErrorUtils';
import getValuesForBeneficialOwner from '@pages/ReimbursementAccount/NonUSD/utils/getValuesForBeneficialOwner';
Expand All @@ -31,6 +31,7 @@ function BeneficialOwnersList({handleConfirmation, ownerKeys, handleOwnerEdit}:
const {translate} = useLocalize();
const styles = useThemeStyles();
const {isOffline} = useNetwork();
const {paddingBottom: safeAreaInsetPaddingBottom} = useStyledSafeAreaInsets();

const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
Expand Down Expand Up @@ -64,41 +65,37 @@ function BeneficialOwnersList({handleConfirmation, ownerKeys, handleOwnerEdit}:
const areThereOwners = owners !== undefined && owners?.length > 0;

return (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<ScrollView
style={styles.pt0}
contentContainerStyle={[styles.flexGrow1, styles.ph0, safeAreaPaddingBottomStyle]}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
<Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
{areThereOwners && (
<View>
<Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
{owners}
</View>
)}
<View style={[styles.mtAuto, styles.p5]}>
{!!error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
<Button
success
large
isLoading={reimbursementAccount?.isSavingCorpayOnboardingBeneficialOwnersFields}
isDisabled={isOffline}
style={[styles.w100, styles.mt2]}
onPress={handleConfirmation}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
<ScrollView
style={styles.pt0}
contentContainerStyle={[styles.flexGrow1, {paddingBottom: safeAreaInsetPaddingBottom + styles.pb5.paddingBottom}]}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
<Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
{areThereOwners && (
<View>
<Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
{owners}
</View>
)}
</SafeAreaConsumer>
<View style={[styles.ph5, styles.mt5, styles.flexGrow1, styles.justifyContentEnd]}>
{!!error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
<Button
success
large
isLoading={reimbursementAccount?.isSavingCorpayOnboardingBeneficialOwnersFields}
isDisabled={isOffline}
style={styles.w100}
onPress={handleConfirmation}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
);
}

Expand Down
87 changes: 38 additions & 49 deletions src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import InputWrapper from '@components/Form/InputWrapper';
import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import PushRowWithModal from '@components/PushRowWithModal';
import SafeAreaConsumer from '@components/SafeAreaConsumer';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import useLocalize from '@hooks/useLocalize';
Expand Down Expand Up @@ -49,9 +47,9 @@ function Confirmation({onNext}: SubStepProps) {
Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(policyID));
};

const handleSelectingCountry = (country: string) => {
setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[COUNTRY]: country});
setSelectedCountry(country);
const handleSubmit = () => {
setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[COUNTRY]: selectedCountry});
onNext();
};

const validate = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
Expand All @@ -72,51 +70,42 @@ function Confirmation({onNext}: SubStepProps) {
}, [currency, currencyMappedToCountry]);

return (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<ScrollView
style={styles.pt0}
contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
<FormProvider
formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
submitButtonText={translate('common.confirm')}
validate={validate}
onSubmit={handleSubmit}
style={[styles.flexGrow1]}
submitButtonStyles={[styles.mh5, styles.pb0]}
isSubmitDisabled={disableSubmit}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('countryStep.confirmBusinessBank')}</Text>
<MenuItemWithTopDescription
description={translate('common.currency')}
title={currency}
interactive={false}
/>
<Text style={[styles.ph5, styles.mb3, styles.mutedTextLabel]}>
{`${translate('countryStep.yourBusiness')} ${translate('countryStep.youCanChange')}`}{' '}
<TextLink
Copy link
Member

@parasharrajat parasharrajat Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was rendering issue with this link which caused #67378

style={[styles.label]}
onPress={handleSettingsPress}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('countryStep.confirmBusinessBank')}</Text>
<MenuItemWithTopDescription
description={translate('common.currency')}
title={currency}
interactive={false}
/>
<Text style={[styles.ph5, styles.mb3, styles.mutedTextLabel]}>
{`${translate('countryStep.yourBusiness')} ${translate('countryStep.youCanChange')}`}{' '}
<TextLink
style={[styles.label]}
onPress={handleSettingsPress}
>
{translate('common.settings').toLowerCase()}.
</TextLink>
</Text>
<FormProvider
formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
submitButtonText={translate('common.confirm')}
validate={validate}
onSubmit={onNext}
style={[styles.flexGrow1]}
submitButtonStyles={[styles.mh5, styles.pb0, styles.mbn1]}
isSubmitDisabled={disableSubmit}
>
<InputWrapper
InputComponent={PushRowWithModal}
optionsList={shouldAllowChange ? CONST.ALL_EUROPEAN_COUNTRIES : CONST.ALL_COUNTRIES}
onValueChange={(value) => handleSelectingCountry(value as string)}
description={translate('common.country')}
modalHeaderTitle={translate('countryStep.selectCountry')}
searchInputTitle={translate('countryStep.findCountry')}
shouldAllowChange={shouldAllowChange}
value={selectedCountry}
inputID={COUNTRY}
/>
</FormProvider>
</ScrollView>
)}
</SafeAreaConsumer>
{translate('common.settings').toLowerCase()}.
</TextLink>
</Text>
<InputWrapper
InputComponent={PushRowWithModal}
optionsList={shouldAllowChange ? CONST.ALL_EUROPEAN_COUNTRIES : CONST.ALL_COUNTRIES}
onValueChange={(value) => setSelectedCountry(value as string)}
description={translate('common.country')}
modalHeaderTitle={translate('countryStep.selectCountry')}
searchInputTitle={translate('countryStep.findCountry')}
shouldAllowChange={shouldAllowChange}
value={selectedCountry}
inputID={COUNTRY}
/>
</FormProvider>
);
}

Expand Down
Loading