From edaf2125edd8c2e1bc2d7d3ac6df1912cb665c23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Muzyk?= <mimuzyk@gmail.com>
Date: Wed, 12 Mar 2025 12:47:15 +0100
Subject: [PATCH 1/4] feat: Padding in VBA flows

---
 .../SubStepForms/ConfirmationStep.tsx         | 126 +++++++++---------
 .../BeneficialOwnersList.tsx                  |  69 +++++-----
 .../NonUSD/Country/subSteps/Confirmation.tsx  |  89 ++++++-------
 .../NonUSD/SignerInfo/HangTight.tsx           |  59 ++++----
 .../subSteps/CompanyOwnersListUBO.tsx         | 101 +++++++-------
 5 files changed, 211 insertions(+), 233 deletions(-)

diff --git a/src/components/SubStepForms/ConfirmationStep.tsx b/src/components/SubStepForms/ConfirmationStep.tsx
index 376a31872cff7..9b093409bbc18 100644
--- a/src/components/SubStepForms/ConfirmationStep.tsx
+++ b/src/components/SubStepForms/ConfirmationStep.tsx
@@ -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';
@@ -48,74 +48,72 @@ 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>
     );
 }
 
 ConfirmationStep.displayName = 'ConfirmationStep';
 
-export default ConfirmationStep;
+export default ConfirmationStep;
\ No newline at end of file
diff --git a/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx b/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
index 3bd23e14dac44..09909851406f5 100644
--- a/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
@@ -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';
@@ -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);
@@ -64,44 +65,40 @@ 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>
     );
 }
 
 BeneficialOwnersList.displayName = 'BeneficialOwnersList';
 
-export default BeneficialOwnersList;
+export default BeneficialOwnersList;
\ No newline at end of file
diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
index 67430030a5f8c..44184e7554625 100644
--- a/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
@@ -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';
@@ -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> => {
@@ -72,54 +70,45 @@ 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
+                    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>
     );
 }
 
 Confirmation.displayName = 'Confirmation';
 
-export default Confirmation;
+export default Confirmation;
\ No newline at end of file
diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/HangTight.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/HangTight.tsx
index 15fea5e466914..6b41ea0fe366b 100644
--- a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/HangTight.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/HangTight.tsx
@@ -4,15 +4,16 @@ import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
-import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 function HangTight({tempSubmit}: {tempSubmit: () => void}) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {paddingBottom: safeAreaInsetPaddingBottom} = useStyledSafeAreaInsets();
 
     const handleSendReminder = () => {
         // TODO remove that
@@ -20,36 +21,32 @@ function HangTight({tempSubmit}: {tempSubmit: () => void}) {
     };
 
     return (
-        <SafeAreaConsumer>
-            {({safeAreaPaddingBottomStyle}) => (
-                <ScrollView
-                    style={styles.pt0}
-                    contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
-                >
-                    <View style={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                        <View style={styles.mb5}>
-                            <Icon
-                                width={144}
-                                height={132}
-                                src={Illustrations.Pillow}
-                            />
-                        </View>
-                        <Text style={[styles.textHeadlineLineHeightXXL, styles.mh5, styles.mb3, styles.mt5]}>{translate('signerInfoStep.hangTight')}</Text>
-                        <Text style={[styles.mutedTextLabel, styles.mh5]}>{translate('signerInfoStep.weAreWaiting')}</Text>
-                    </View>
-                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
-                        <Button
-                            success
-                            style={[styles.w100]}
-                            onPress={handleSendReminder}
-                            large
-                            icon={Expensicons.Bell}
-                            text={translate('signerInfoStep.sendReminder')}
-                        />
-                    </View>
-                </ScrollView>
-            )}
-        </SafeAreaConsumer>
+        <ScrollView
+            style={styles.pt0}
+            contentContainerStyle={[styles.flexGrow1, {paddingBottom: safeAreaInsetPaddingBottom + styles.pb5.paddingBottom}]}
+        >
+            <View style={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                <View style={styles.mb5}>
+                    <Icon
+                        width={144}
+                        height={132}
+                        src={Illustrations.Pillow}
+                    />
+                </View>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mh5, styles.mb3, styles.mt5]}>{translate('signerInfoStep.hangTight')}</Text>
+                <Text style={[styles.mutedTextLabel, styles.mh5]}>{translate('signerInfoStep.weAreWaiting')}</Text>
+            </View>
+            <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                <Button
+                    success
+                    style={[styles.w100]}
+                    onPress={handleSendReminder}
+                    large
+                    icon={Expensicons.Bell}
+                    text={translate('signerInfoStep.sendReminder')}
+                />
+            </View>
+        </ScrollView>
     );
 }
 
diff --git a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx
index 14df2e21d92f2..569c04a5a82af 100644
--- a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx
+++ b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx
@@ -3,15 +3,15 @@ import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
-import * as Expensicons from '@components/Icon/Expensicons';
+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 * as ErrorUtils from '@libs/ErrorUtils';
+import {getLatestErrorMessage} from '@libs/ErrorUtils';
 import getValuesForBeneficialOwner from '@pages/ReimbursementAccount/USD/utils/getValuesForBeneficialOwner';
 import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues';
 import CONST from '@src/CONST';
@@ -41,13 +41,14 @@ function CompanyOwnersListUBO({isAnyoneElseUBO, isUserUBO, handleUBOsConfirmatio
     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);
 
     const isLoading = reimbursementAccount?.isLoading ?? false;
     const requestorData = getSubStepValues(REQUESTOR_PERSONAL_INFO_KEYS, undefined, reimbursementAccount);
-    const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount);
+    const error = getLatestErrorMessage(reimbursementAccount);
 
     const extraBeneficialOwners =
         isAnyoneElseUBO &&
@@ -61,7 +62,7 @@ function CompanyOwnersListUBO({isAnyoneElseUBO, isUserUBO, handleUBOsConfirmatio
                     title={`${beneficialOwnerData.firstName} ${beneficialOwnerData.lastName}`}
                     description={`${beneficialOwnerData.street}, ${beneficialOwnerData.city}, ${beneficialOwnerData.state} ${beneficialOwnerData.zipCode}`}
                     wrapperStyle={[styles.ph5]}
-                    icon={Expensicons.FallbackAvatar}
+                    icon={FallbackAvatar}
                     iconType={CONST.ICON_TYPE_AVATAR}
                     onPress={() => {
                         handleUBOEdit(ownerKey);
@@ -76,57 +77,53 @@ function CompanyOwnersListUBO({isAnyoneElseUBO, isUserUBO, handleUBOsConfirmatio
         });
 
     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>
-                    <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}
-                                iconType={CONST.ICON_TYPE_AVATAR}
-                                iconWidth={40}
-                                iconHeight={40}
-                                interactive={false}
-                                shouldShowRightIcon={false}
-                                displayInDefaultIconColor
-                            />
-                        )}
-                        {extraBeneficialOwners}
-                    </View>
+        <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>
+            <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={FallbackAvatar}
+                        iconType={CONST.ICON_TYPE_AVATAR}
+                        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
-                        large
-                        isLoading={isLoading}
-                        isDisabled={isOffline}
-                        style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
-                        onPress={handleUBOsConfirmation}
-                        text={translate('common.confirm')}
+            <View style={[styles.ph5, styles.mt5, styles.flexGrow1, styles.justifyContentEnd]}>
+                {!!error && error.length > 0 && (
+                    <DotIndicatorMessage
+                        textStyles={[styles.formError]}
+                        type="error"
+                        messages={{error}}
                     />
-                </ScrollView>
-            )}
-        </SafeAreaConsumer>
+                )}
+                <Button
+                    success
+                    large
+                    isLoading={isLoading}
+                    isDisabled={isOffline}
+                    style={[styles.w100]}
+                    onPress={handleUBOsConfirmation}
+                    text={translate('common.confirm')}
+                />
+            </View>
+        </ScrollView>
     );
 }
 
 CompanyOwnersListUBO.displayName = 'CompanyOwnersListUBO';
 
-export default CompanyOwnersListUBO;
+export default CompanyOwnersListUBO;
\ No newline at end of file

From 2589a3bc500512bc60a931f5aa636a27ab1962c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Muzyk?= <mimuzyk@gmail.com>
Date: Wed, 12 Mar 2025 15:49:04 +0100
Subject: [PATCH 2/4] fix: prettier

---
 src/components/SubStepForms/ConfirmationStep.tsx                | 2 +-
 .../NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx         | 2 +-
 .../NonUSD/Country/subSteps/Confirmation.tsx                    | 2 +-
 .../USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SubStepForms/ConfirmationStep.tsx b/src/components/SubStepForms/ConfirmationStep.tsx
index 9b093409bbc18..5e3dc105de73a 100644
--- a/src/components/SubStepForms/ConfirmationStep.tsx
+++ b/src/components/SubStepForms/ConfirmationStep.tsx
@@ -116,4 +116,4 @@ function ConfirmationStep({pageTitle, summaryItems, showOnfidoLinks, onfidoLinks
 
 ConfirmationStep.displayName = 'ConfirmationStep';
 
-export default ConfirmationStep;
\ No newline at end of file
+export default ConfirmationStep;
diff --git a/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx b/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
index 09909851406f5..a20a41bb2ffdd 100644
--- a/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
@@ -101,4 +101,4 @@ function BeneficialOwnersList({handleConfirmation, ownerKeys, handleOwnerEdit}:
 
 BeneficialOwnersList.displayName = 'BeneficialOwnersList';
 
-export default BeneficialOwnersList;
\ No newline at end of file
+export default BeneficialOwnersList;
diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
index 44184e7554625..b4d5339d3a319 100644
--- a/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
@@ -111,4 +111,4 @@ function Confirmation({onNext}: SubStepProps) {
 
 Confirmation.displayName = 'Confirmation';
 
-export default Confirmation;
\ No newline at end of file
+export default Confirmation;
diff --git a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx
index 569c04a5a82af..8c775053c6354 100644
--- a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx
+++ b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx
@@ -126,4 +126,4 @@ function CompanyOwnersListUBO({isAnyoneElseUBO, isUserUBO, handleUBOsConfirmatio
 
 CompanyOwnersListUBO.displayName = 'CompanyOwnersListUBO';
 
-export default CompanyOwnersListUBO;
\ No newline at end of file
+export default CompanyOwnersListUBO;

From 84088a70faa0b6477333626176e9afb79aeb4538 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Muzyk?= <mimuzyk@gmail.com>
Date: Wed, 12 Mar 2025 15:57:21 +0100
Subject: [PATCH 3/4] fix: requestor step paddings

---
 .../USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx
index a5e28c657f161..3a5c5cb2dd960 100644
--- a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx
@@ -68,7 +68,6 @@ function Confirmation({onNext, onMove, isEditing}: SubStepProps) {
             onfidoLinksTitle={`${translate('personalInfoStep.byAddingThisBankAccount')} `}
             isLoading={isLoading}
             error={error}
-            shouldApplySafeAreaPaddingBottom={false}
         />
     );
 }

From 9b0a59d09a9e8eaf5461e5a182a4ee2aea9ff7d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Muzyk?= <mimuzyk@gmail.com>
Date: Wed, 12 Mar 2025 16:01:01 +0100
Subject: [PATCH 4/4] fix: lint

---
 .../USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx
index 3a5c5cb2dd960..2788a9c93d44c 100644
--- a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx
@@ -3,7 +3,7 @@ import {useOnyx} from 'react-native-onyx';
 import ConfirmationStep from '@components/SubStepForms/ConfirmationStep';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import * as ErrorUtils from '@libs/ErrorUtils';
+import {getLatestErrorMessage} from '@libs/ErrorUtils';
 import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -20,7 +20,7 @@ function Confirmation({onNext, onMove, isEditing}: SubStepProps) {
 
     const isLoading = reimbursementAccount?.isLoading ?? false;
     const values = useMemo(() => getSubStepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
-    const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {});
+    const error = getLatestErrorMessage(reimbursementAccount ?? {});
 
     const summaryItems = [
         {