Merge pull request #39035 from burczu/bugfix/39005-polish-items-for-t…

…ransfer-owner-flow #39005 - Polish items for Transfer owner flow
Expensify · Mar 28, 2024 · c2d803e · c2d803e
2 parents 58abe89 + 370c375
commit c2d803e
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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 (
         <>
-            <Text style={[styles.textHeadline, styles.mt3, styles.mb2]}>{title}</Text>
-            <Text style={styles.flex1}>{text}</Text>
+            <Text style={[styles.textHeadline, styles.mt3, styles.mb2]}>{displayTexts.title}</Text>
+            <Text style={styles.flex1}>{displayTexts.text}</Text>
             <Button
                 success
                 large
                 onPress={confirm}
-                text={buttonText}
+                text={displayTexts.buttonText}
             />
         </>
     );

diff --git 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 (
         <AdminPolicyAccessOrNotFoundWrapper policyID={policyID}>
             <PaidPolicyAccessOrNotFoundWrapper policyID={policyID}>
-                <ScreenWrapper
-                    testID={WorkspaceOwnerChangeWrapperPage.displayName}
-                    onEntryTransitionEnd={() => {
-                        setIsTransitioning(false);
-                    }}
-                >
+                <ScreenWrapper testID={WorkspaceOwnerChangeWrapperPage.displayName}>
                     <HeaderWithBackButton
                         title={translate('workspace.changeOwner.changeOwnerPageTitle')}
                         onBackButtonPress={() => {
@@ -76,9 +66,8 @@ function WorkspaceOwnerChangeWrapperPage({route, policy}: WorkspaceOwnerChangeWr
                         }}
                     />
                     <View style={[styles.containerWithSpaceBetween, styles.ph5, error === CONST.POLICY.OWNERSHIP_ERRORS.NO_BILLING_CARD ? styles.pb0 : styles.pb5]}>
-                        {(policy?.isLoading ?? isTransitioning) && <FullScreenLoadingIndicator />}
+                        {policy?.isLoading && <FullScreenLoadingIndicator />}
                         {!policy?.isLoading &&
-                            !isTransitioning &&
                             (error === CONST.POLICY.OWNERSHIP_ERRORS.NO_BILLING_CARD ? (
                                 <WorkspaceOwnerPaymentCardForm policy={policy} />
                             ) : (

diff --git 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}
                 />
                 <SelectionList
-                    shouldDelayFocus
                     sections={sections}
                     onSelectRow={(option) => {
                         onCurrencyChange?.(option.value);

diff --git 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<keyof typeof CONST.CURRENCY>(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<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM> => {
         const errors = ValidationUtils.getFieldRequiredErrors(formValues, REQUIRED_FIELDS);
 
@@ -113,6 +128,10 @@ function WorkspaceOwnerPaymentCardForm({policy}: WorkspaceOwnerPaymentCardFormPr
         setIsCurrencyModalVisible(false);
     }, []);
 
+    if (!shouldShowPaymentCardForm) {
+        return null;
+    }
+
     return (
         <>
             <Text style={[styles.textHeadline, styles.mt3, styles.mb2]}>{translate('workspace.changeOwner.addPaymentCardTitle')}</Text>