diff --git a/src/libs/WorkspacesSettingsUtils.ts b/src/libs/WorkspacesSettingsUtils.ts
index 00e8a96e56b4..30820fc0c48b 100644
--- a/src/libs/WorkspacesSettingsUtils.ts
+++ b/src/libs/WorkspacesSettingsUtils.ts
@@ -247,7 +247,7 @@ function getOwnershipChecksDisplayText(
title = translate('workspace.changeOwner.ownerOwesAmountTitle');
text = translate('workspace.changeOwner.ownerOwesAmountText', {
email: ownerOwesAmount?.ownerEmail,
- amount: CurrencyUtils.convertAmountToDisplayString(ownerOwesAmount?.amount, ownerOwesAmount?.currency),
+ amount: CurrencyUtils.convertToDisplayString(ownerOwesAmount?.amount, ownerOwesAmount?.currency),
});
buttonText = translate('workspace.changeOwner.ownerOwesAmountButtonText');
break;
diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts
index 9e6a50f3f7d6..f773c28d43f2 100644
--- a/src/libs/actions/Policy.ts
+++ b/src/libs/actions/Policy.ts
@@ -1131,6 +1131,8 @@ function addBillingCardAndRequestPolicyOwnerChange(
value: {
errorFields: null,
isLoading: true,
+ isChangeOwnerSuccessful: false,
+ isChangeOwnerFailed: false,
},
},
];
@@ -1141,6 +1143,8 @@ function addBillingCardAndRequestPolicyOwnerChange(
key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
value: {
isLoading: false,
+ isChangeOwnerSuccessful: true,
+ isChangeOwnerFailed: false,
},
},
];
@@ -1151,6 +1155,8 @@ function addBillingCardAndRequestPolicyOwnerChange(
key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
value: {
isLoading: false,
+ isChangeOwnerSuccessful: false,
+ isChangeOwnerFailed: true,
},
},
];
diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx
index fea6457824da..83bc3a1d1b4d 100644
--- a/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx
+++ b/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';
@@ -33,9 +33,33 @@ type WorkspaceOwnerChangeCheckProps = WorkspaceOwnerChangeCheckOnyxProps & {
function WorkspaceOwnerChangeCheck({personalDetails, policy, accountID, error}: WorkspaceOwnerChangeCheckProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
+ const [displayTexts, setDisplayTexts] = useState({
+ title: '',
+ text: '',
+ buttonText: '',
+ });
const policyID = policy?.id ?? '';
+ const updateDisplayTexts = useCallback(() => {
+ const changeOwnerErrors = Object.keys(policy?.errorFields?.changeOwner ?? {});
+ if (error !== changeOwnerErrors[0]) {
+ return;
+ }
+
+ const texts = WorkspaceSettingsUtils.getOwnershipChecksDisplayText(error, translate, policy, personalDetails?.[accountID]?.login);
+ setDisplayTexts(texts);
+ }, [accountID, error, personalDetails, policy, translate]);
+
+ useEffect(() => {
+ updateDisplayTexts();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ updateDisplayTexts();
+ }, [updateDisplayTexts]);
+
const confirm = useCallback(() => {
if (error === CONST.POLICY.OWNERSHIP_ERRORS.HAS_FAILED_SETTLEMENTS || error === CONST.POLICY.OWNERSHIP_ERRORS.FAILED_TO_CLEAR_BALANCE) {
// cannot transfer ownership if there are failed settlements, or we cannot clear the balance
@@ -47,17 +71,15 @@ function WorkspaceOwnerChangeCheck({personalDetails, policy, accountID, error}:
PolicyActions.requestWorkspaceOwnerChange(policyID);
}, [accountID, error, policyID]);
- const {title, text, buttonText} = WorkspaceSettingsUtils.getOwnershipChecksDisplayText(error, translate, policy, personalDetails?.[accountID]?.login);
-
return (
<>
- {title}
- {text}
+ {displayTexts.title}
+ {displayTexts.text}
>
);
diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx
index d166173a23df..9f9540327c53 100644
--- a/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx
+++ b/src/pages/workspace/members/WorkspaceOwnerChangeWrapperPage.tsx
@@ -1,5 +1,5 @@
import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
import {View} from 'react-native';
import type {ValueOf} from 'type-fest';
import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -25,16 +25,11 @@ type WorkspaceOwnerChangeWrapperPageProps = WithPolicyOnyxProps & StackScreenPro
function WorkspaceOwnerChangeWrapperPage({route, policy}: WorkspaceOwnerChangeWrapperPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
- const [isTransitioning, setIsTransitioning] = useState(false);
const policyID = route.params.policyID;
const accountID = route.params.accountID;
const error = route.params.error;
- useEffect(() => {
- setIsTransitioning(true);
- }, []);
-
useEffect(() => {
if (!policy || policy?.isLoading) {
return;
@@ -62,12 +57,7 @@ function WorkspaceOwnerChangeWrapperPage({route, policy}: WorkspaceOwnerChangeWr
return (
- {
- setIsTransitioning(false);
- }}
- >
+
{
@@ -76,9 +66,8 @@ function WorkspaceOwnerChangeWrapperPage({route, policy}: WorkspaceOwnerChangeWr
}}
/>
- {(policy?.isLoading ?? isTransitioning) && }
+ {policy?.isLoading && }
{!policy?.isLoading &&
- !isTransitioning &&
(error === CONST.POLICY.OWNERSHIP_ERRORS.NO_BILLING_CARD ? (
) : (
diff --git a/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx b/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx
index 8d6eb4b2b943..95ecbf0cbe0e 100644
--- a/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx
+++ b/src/pages/workspace/members/WorkspaceOwnerPaymentCardCurrencyModal.tsx
@@ -35,6 +35,7 @@ function WorkspaceOwnerPaymentCardCurrencyModal({isVisible, currencies, currentC
data: currencies.map((currency) => ({
text: currency,
value: currency,
+ keyForList: currency,
isSelected: currency === currentCurrency,
})),
indexOffset: 0,
@@ -64,7 +65,6 @@ function WorkspaceOwnerPaymentCardCurrencyModal({isVisible, currencies, currentC
onBackButtonPress={onClose}
/>
{
onCurrencyChange?.(option.value);
diff --git a/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx b/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx
index 7044034a5a0d..293a5c2d7c09 100644
--- a/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx
+++ b/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx
@@ -42,12 +42,23 @@ function WorkspaceOwnerPaymentCardForm({policy}: WorkspaceOwnerPaymentCardFormPr
const [isCurrencyModalVisible, setIsCurrencyModalVisible] = useState(false);
const [currency, setCurrency] = useState(CONST.CURRENCY.USD);
+ const [shouldShowPaymentCardForm, setShouldShowPaymentCardForm] = useState(false);
const policyID = policy?.id ?? '';
+ const checkIfCanBeRendered = useCallback(() => {
+ const changeOwnerErrors = Object.keys(policy?.errorFields?.changeOwner ?? {});
+ if (changeOwnerErrors[0] !== CONST.POLICY.OWNERSHIP_ERRORS.NO_BILLING_CARD) {
+ setShouldShowPaymentCardForm(false);
+ }
+
+ setShouldShowPaymentCardForm(true);
+ }, [policy?.errorFields?.changeOwner]);
+
useEffect(
() => {
PaymentMethods.clearDebitCardFormErrorAndSubmit();
+ checkIfCanBeRendered();
return () => {
PaymentMethods.clearDebitCardFormErrorAndSubmit();
@@ -57,6 +68,10 @@ function WorkspaceOwnerPaymentCardForm({policy}: WorkspaceOwnerPaymentCardFormPr
[],
);
+ useEffect(() => {
+ checkIfCanBeRendered();
+ }, [checkIfCanBeRendered]);
+
const validate = (formValues: FormOnyxValues): FormInputErrors => {
const errors = ValidationUtils.getFieldRequiredErrors(formValues, REQUIRED_FIELDS);
@@ -113,6 +128,10 @@ function WorkspaceOwnerPaymentCardForm({policy}: WorkspaceOwnerPaymentCardFormPr
setIsCurrencyModalVisible(false);
}, []);
+ if (!shouldShowPaymentCardForm) {
+ return null;
+ }
+
return (
<>
{translate('workspace.changeOwner.addPaymentCardTitle')}