Skip to content

Commit

Permalink
Merge pull request #37871 from bernhardoj/fix/37339-missing-bottom-sp…
Browse files Browse the repository at this point in the history 
…ace-ba-page-ios

Fix bank account confirmation page confirm button is too close to the bottom
  • Loading branch information
@arosiclair
arosiclair authored Mar 11, 2024
2 parents d21bda0 + 18311a4 commit fb6e050
Show file tree
Hide file tree
Showing 4 changed files with 263 additions and 243 deletions.
99 changes: 52 additions & 47 deletions src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
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 useLocalize from '@hooks/useLocalize';
Expand Down Expand Up @@ -48,55 +49,59 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
};

return (
<ScrollView
style={styles.pt0}
contentContainerStyle={styles.flexGrow1}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
<Text style={[styles.mt3, styles.mb3, styles.ph5, styles.textSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
{setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
<View style={[styles.mb5]}>
<MenuItemWithTopDescription
description={translate('bankAccount.routingNumber')}
title={values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]}
shouldShowRightIcon={!bankAccountID}
onPress={handleModifyAccountNumbers}
/>
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<ScrollView
style={styles.pt0}
contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
<Text style={[styles.mt3, styles.mb3, styles.ph5, styles.textSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
{setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
<View style={[styles.mb5]}>
<MenuItemWithTopDescription
description={translate('bankAccount.routingNumber')}
title={values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]}
shouldShowRightIcon={!bankAccountID}
onPress={handleModifyAccountNumbers}
/>

<MenuItemWithTopDescription
description={translate('bankAccount.accountNumber')}
title={values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]}
shouldShowRightIcon={!bankAccountID}
onPress={handleModifyAccountNumbers}
/>
</View>
<MenuItemWithTopDescription
description={translate('bankAccount.accountNumber')}
title={values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]}
shouldShowRightIcon={!bankAccountID}
onPress={handleModifyAccountNumbers}
/>
</View>
)}
{setupType === CONST.BANK_ACCOUNT.SUBSTEP.PLAID && (
<MenuItemWithTopDescription
description={values[BANK_INFO_STEP_KEYS.BANK_NAME]}
title={`${translate('bankAccount.accountEnding')} ${(values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '').slice(-4)}`}
shouldShowRightIcon={!bankAccountID}
onPress={handleModifyAccountNumbers}
/>
)}
<View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
{error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
<Button
isLoading={isLoading}
isDisabled={isLoading || isOffline}
success
style={[styles.w100]}
onPress={onNext}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
)}
{setupType === CONST.BANK_ACCOUNT.SUBSTEP.PLAID && (
<MenuItemWithTopDescription
description={values[BANK_INFO_STEP_KEYS.BANK_NAME]}
title={`${translate('bankAccount.accountEnding')} ${(values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '').slice(-4)}`}
shouldShowRightIcon={!bankAccountID}
onPress={handleModifyAccountNumbers}
/>
)}
<View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
{error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
<Button
isLoading={isLoading}
isDisabled={isLoading || isOffline}
success
style={[styles.w100]}
onPress={onNext}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
</SafeAreaConsumer>
);
}

Expand Down
157 changes: 81 additions & 76 deletions ...count/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
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';
Expand Down Expand Up @@ -39,84 +40,88 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
const error = reimbursementAccount ? ErrorUtils.getLatestErrorMessage(reimbursementAccount) : '';

return (
<ScrollView
style={styles.pt0}
contentContainerStyle={styles.flexGrow1}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.legalName')}
title={`${values.firstName} ${values.lastName}`}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.LEGAL_NAME);
}}
/>
<MenuItemWithTopDescription
description={translate('common.dob')}
title={values.dob}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
}}
/>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.last4SSN')}
title={values.ssnLast4}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.SSN);
}}
/>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.address')}
title={`${values.street}, ${values.city}, ${values.state} ${values.zipCode}`}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.ADDRESS);
}}
/>

<Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
{`${translate('beneficialOwnerInfoStep.byAddingThisBankAccount')} `}
<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]}
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<ScrollView
style={styles.pt0}
contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
>
{translate('common.privacy')}
</TextLink>
{` ${translate('common.and')} `}
<TextLink
href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
style={[styles.textMicro]}
>
{translate('common.termsOfService')}
</TextLink>
</Text>
<View style={[styles.ph5, styles.mtAuto]}>
{error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.legalName')}
title={`${values.firstName} ${values.lastName}`}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.LEGAL_NAME);
}}
/>
<MenuItemWithTopDescription
description={translate('common.dob')}
title={values.dob}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
}}
/>
)}
<Button
isDisabled={isOffline}
success
style={[styles.w100, styles.mt2, styles.pb5]}
onPress={onNext}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.last4SSN')}
title={values.ssnLast4}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.SSN);
}}
/>
<MenuItemWithTopDescription
description={translate('beneficialOwnerInfoStep.address')}
title={`${values.street}, ${values.city}, ${values.state} ${values.zipCode}`}
shouldShowRightIcon
onPress={() => {
onMove(UBO_STEP_INDEXES.ADDRESS);
}}
/>

<Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
{`${translate('beneficialOwnerInfoStep.byAddingThisBankAccount')} `}
<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>
<View style={[styles.ph5, styles.mtAuto]}>
{error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
<Button
isDisabled={isOffline}
success
style={[styles.w100, styles.mt2, styles.pb5]}
onPress={onNext}
text={translate('common.confirm')}
/>
</View>
</ScrollView>
)}
</SafeAreaConsumer>
);
}

Expand Down
87 changes: 46 additions & 41 deletions src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Button from '@components/Button';
import DotIndicatorMessage from '@components/DotIndicatorMessage';
import * as Expensicons 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';
Expand Down Expand Up @@ -103,48 +104,52 @@ function CompanyOwnersListUBO({
});

return (
<ScrollView
style={styles.pt0}
contentContainerStyle={[styles.flexGrow1, styles.ph0]}
>
<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
<Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
<View>
<Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
{isUserUBO && (
<MenuItem
title={`${requestorData.firstName} ${requestorData.lastName}`}
description={`${requestorData.requestorAddressStreet}, ${requestorData.requestorAddressCity}, ${requestorData.requestorAddressState} ${requestorData.requestorAddressZipCode}`}
wrapperStyle={[styles.ph5]}
icon={Expensicons.FallbackAvatar}
iconWidth={40}
iconHeight={40}
interactive={false}
shouldShowRightIcon={false}
displayInDefaultIconColor
<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>
<View>
<Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
{isUserUBO && (
<MenuItem
title={`${requestorData.firstName} ${requestorData.lastName}`}
description={`${requestorData.requestorAddressStreet}, ${requestorData.requestorAddressCity}, ${requestorData.requestorAddressState} ${requestorData.requestorAddressZipCode}`}
wrapperStyle={[styles.ph5]}
icon={Expensicons.FallbackAvatar}
iconWidth={40}
iconHeight={40}
interactive={false}
shouldShowRightIcon={false}
displayInDefaultIconColor
/>
)}
{extraBeneficialOwners}
</View>

<View style={[styles.ph5, styles.mtAuto]}>
{error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
</View>
<Button
success
isLoading={isLoading}
isDisabled={isOffline}
style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
onPress={handleUBOsConfirmation}
text={translate('common.confirm')}
/>
)}
{extraBeneficialOwners}
</View>

<View style={[styles.ph5, styles.mtAuto]}>
{error && error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
</View>
<Button
success
isLoading={isLoading}
isDisabled={isOffline}
style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
onPress={handleUBOsConfirmation}
text={translate('common.confirm')}
/>
</ScrollView>
</ScrollView>
)}
</SafeAreaConsumer>
);
}

Expand Down
Loading

0 comments on commit fb6e050

Please sign in to comment.