diff --git a/src/components/SubStepForms/ConfirmationStep.tsx b/src/components/SubStepForms/ConfirmationStep.tsx
index 376a31872cff7..5e3dc105de73a 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,71 +48,69 @@ function ConfirmationStep({pageTitle, summaryItems, showOnfidoLinks, onfidoLinks
const styles = useThemeStyles();
const {isOffline} = useNetwork();
- return (
-
- {({safeAreaPaddingBottomStyle}) => (
-
- {pageTitle}
- {summaryItems.map(({description, title, shouldShowRightIcon, onPress}) => (
-
- ))}
+ const {paddingBottom: safeAreaInsetPaddingBottom} = useStyledSafeAreaInsets();
- {showOnfidoLinks && (
-
- {onfidoLinksTitle}
-
- {translate('onfidoStep.facialScan')}
-
- {', '}
-
- {translate('common.privacy')}
-
- {` ${translate('common.and')} `}
-
- {translate('common.termsOfService')}
-
-
- )}
+ return (
+
+ {pageTitle}
+ {summaryItems.map(({description, title, shouldShowRightIcon, onPress}) => (
+
+ ))}
-
- {!!error && error.length > 0 && (
-
- )}
-
-
-
+ {showOnfidoLinks && (
+
+ {onfidoLinksTitle}
+
+ {translate('onfidoStep.facialScan')}
+
+ {', '}
+
+ {translate('common.privacy')}
+
+ {` ${translate('common.and')} `}
+
+ {translate('common.termsOfService')}
+
+
)}
-
+
+
+ {!!error && error.length > 0 && (
+
+ )}
+
+
+
);
}
diff --git a/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx b/src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnersList.tsx
index 3bd23e14dac44..a20a41bb2ffdd 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,41 +65,37 @@ function BeneficialOwnersList({handleConfirmation, ownerKeys, handleOwnerEdit}:
const areThereOwners = owners !== undefined && owners?.length > 0;
return (
-
- {({safeAreaPaddingBottomStyle}) => (
-
- {translate('beneficialOwnerInfoStep.letsDoubleCheck')}
- {translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}
- {areThereOwners && (
-
- {`${translate('beneficialOwnerInfoStep.owners')}:`}
- {owners}
-
- )}
-
- {!!error && error.length > 0 && (
-
- )}
-
-
-
+
+ {translate('beneficialOwnerInfoStep.letsDoubleCheck')}
+ {translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}
+ {areThereOwners && (
+
+ {`${translate('beneficialOwnerInfoStep.owners')}:`}
+ {owners}
+
)}
-
+
+ {!!error && error.length > 0 && (
+
+ )}
+
+
+
);
}
diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/subSteps/Confirmation.tsx
index 67430030a5f8c..b4d5339d3a319 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): FormInputErrors => {
@@ -72,51 +70,42 @@ function Confirmation({onNext}: SubStepProps) {
}, [currency, currencyMappedToCountry]);
return (
-
- {({safeAreaPaddingBottomStyle}) => (
-
+ {translate('countryStep.confirmBusinessBank')}
+
+
+ {`${translate('countryStep.yourBusiness')} ${translate('countryStep.youCanChange')}`}{' '}
+
- {translate('countryStep.confirmBusinessBank')}
-
-
- {`${translate('countryStep.yourBusiness')} ${translate('countryStep.youCanChange')}`}{' '}
-
- {translate('common.settings').toLowerCase()}.
-
-
-
- handleSelectingCountry(value as string)}
- description={translate('common.country')}
- modalHeaderTitle={translate('countryStep.selectCountry')}
- searchInputTitle={translate('countryStep.findCountry')}
- shouldAllowChange={shouldAllowChange}
- value={selectedCountry}
- inputID={COUNTRY}
- />
-
-
- )}
-
+ {translate('common.settings').toLowerCase()}.
+
+
+ setSelectedCountry(value as string)}
+ description={translate('common.country')}
+ modalHeaderTitle={translate('countryStep.selectCountry')}
+ searchInputTitle={translate('countryStep.findCountry')}
+ shouldAllowChange={shouldAllowChange}
+ value={selectedCountry}
+ inputID={COUNTRY}
+ />
+
);
}
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 (
-
- {({safeAreaPaddingBottomStyle}) => (
-
-
-
-
-
- {translate('signerInfoStep.hangTight')}
- {translate('signerInfoStep.weAreWaiting')}
-
-
-
-
-
- )}
-
+
+
+
+
+
+ {translate('signerInfoStep.hangTight')}
+ {translate('signerInfoStep.weAreWaiting')}
+
+
+
+
+
);
}
diff --git a/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/USD/BeneficialOwnerInfo/subSteps/CompanyOwnersListUBO.tsx
index 14df2e21d92f2..8c775053c6354 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,54 +77,50 @@ function CompanyOwnersListUBO({isAnyoneElseUBO, isUserUBO, handleUBOsConfirmatio
});
return (
-
- {({safeAreaPaddingBottomStyle}) => (
-
- {translate('beneficialOwnerInfoStep.letsDoubleCheck')}
- {translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}
-
- {`${translate('beneficialOwnerInfoStep.owners')}:`}
- {isUserUBO && (
-
- )}
- {extraBeneficialOwners}
-
+
+ {translate('beneficialOwnerInfoStep.letsDoubleCheck')}
+ {translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}
+
+ {`${translate('beneficialOwnerInfoStep.owners')}:`}
+ {isUserUBO && (
+
+ )}
+ {extraBeneficialOwners}
+
-
- {!!error && error.length > 0 && (
-
- )}
-
-
- )}
-
+ )}
+
+
+
);
}
diff --git a/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/subSteps/Confirmation.tsx
index a5e28c657f161..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 = [
{
@@ -68,7 +68,6 @@ function Confirmation({onNext, onMove, isEditing}: SubStepProps) {
onfidoLinksTitle={`${translate('personalInfoStep.byAddingThisBankAccount')} `}
isLoading={isLoading}
error={error}
- shouldApplySafeAreaPaddingBottom={false}
/>
);
}