Skip to content

Commit

Permalink
Merge pull request #19184 from Pujan92/fix/17869
Browse files Browse the repository at this point in the history 
Fix: Web - Transfer Balance page - $NaN instead of amount for policy
  • Loading branch information
@neil-marcellini
neil-marcellini authored May 23, 2023
2 parents 48fbd85 + 089c1f5 commit 1aa30d1
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 69 deletions.
14 changes: 9 additions & 5 deletions src/components/BlockingViews/BlockingView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,26 @@ const propTypes = {
/** Link message below the subtitle */
link: PropTypes.string,

/** Whether we should show a go back home link */
shouldShowBackHomeLink: PropTypes.bool,
/** Whether we should show a link to navigate elsewhere */
shouldShowLink: PropTypes.bool,

/** The custom icon width */
iconWidth: PropTypes.number,

/** The custom icon height */
iconHeight: PropTypes.number,

/** Function to call when pressing the navigation link */
onLinkPress: PropTypes.func,
};

const defaultProps = {
iconColor: themeColors.offline,
shouldShowBackHomeLink: false,
shouldShowLink: false,
link: 'notFound.goBackHome',
iconWidth: variables.iconSizeSuperLarge,
iconHeight: variables.iconSizeSuperLarge,
onLinkPress: () => Navigation.dismissModal(true),
};

const BlockingView = (props) => (
Expand All @@ -53,9 +57,9 @@ const BlockingView = (props) => (
/>
<Text style={[styles.notFoundTextHeader]}>{props.title}</Text>
<Text style={[styles.textAlignCenter]}>{props.subtitle}</Text>
{props.shouldShowBackHomeLink ? (
{props.shouldShowLink ? (
<TextLink
onPress={() => Navigation.dismissModal(true)}
onPress={props.onLinkPress}
style={[styles.link, styles.mt2]}
>
{props.link}
Expand Down
13 changes: 9 additions & 4 deletions src/components/BlockingViews/FullPageNotFoundView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,17 @@ const propTypes = {
/** Whether we should show a close button */
shouldShowCloseButton: PropTypes.bool,

/** Whether we should show a go back home link */
shouldShowBackHomeLink: PropTypes.bool,
/** Whether we should show a link to navigate elsewhere */
shouldShowLink: PropTypes.bool,

/** The key in the translations file to use for the go back link */
linkKey: PropTypes.string,

/** Method to trigger when pressing the back button of the header */
onBackButtonPress: PropTypes.func,

/** Function to call when pressing the navigation link */
onLinkPress: PropTypes.func,
};

const defaultProps = {
Expand All @@ -48,9 +51,10 @@ const defaultProps = {
subtitleKey: 'notFound.pageNotFound',
linkKey: 'notFound.goBackHome',
shouldShowBackButton: true,
shouldShowBackHomeLink: false,
shouldShowLink: false,
shouldShowCloseButton: true,
onBackButtonPress: () => Navigation.dismissModal(),
onLinkPress: () => Navigation.dismissModal(true),
};

// eslint-disable-next-line rulesdir/no-negated-variables
Expand All @@ -72,7 +76,8 @@ const FullPageNotFoundView = (props) => {
title={props.translate(props.titleKey)}
subtitle={props.translate(props.subtitleKey)}
link={props.translate(props.linkKey)}
shouldShowBackHomeLink={props.shouldShowBackHomeLink}
shouldShowLink={props.shouldShowLink}
onLinkPress={props.onLinkPress}
/>
</View>
</>
Expand Down
4 changes: 3 additions & 1 deletion src/languages/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,8 @@ export default {
transferDetailBankAccount: 'Your money should arrive in the next 1-3 business days.',
transferDetailDebitCard: 'Your money should arrive immediately.',
failedTransfer: 'Your balance isn’t fully settled. Please transfer to a bank account.',
notHereSubTitle: 'Please transfer your balance from the payments page',
goToPayment: 'Go to Payments',
},
chooseTransferAccountPage: {
chooseAccount: 'Choose account',
Expand Down Expand Up @@ -749,7 +751,7 @@ export default {
getMeOutOfHere: 'Get me out of here',
iouReportNotFound: 'The payment details you are looking for cannot be found.',
notHere: "Hmm... it's not here",
pageNotFound: 'That page is nowhere to be found.',
pageNotFound: 'Oops, this page cannot be found',
noAccess: "You don't have access to this chat",
goBackHome: 'Go back to Home page',
},
Expand Down
4 changes: 3 additions & 1 deletion src/languages/es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,8 @@ export default {
transferDetailBankAccount: 'Tu dinero debería llegar en 1-3 días laborables.',
transferDetailDebitCard: 'Tu dinero debería llegar de inmediato.',
failedTransfer: 'Tu saldo no se ha acreditado completamente. Por favor, transfiere los fondos a una cuenta bancaria.',
notHereSubTitle: 'Por favor, transfiere el saldo desde la página de pagos',
goToPayment: 'Ir a pagos',
},
chooseTransferAccountPage: {
chooseAccount: 'Elegir cuenta',
Expand Down Expand Up @@ -750,7 +752,7 @@ export default {
getMeOutOfHere: 'Sácame de aquí',
iouReportNotFound: 'Los detalles del pago que estás buscando no se pudieron encontrar.',
notHere: 'Hmm… no está aquí',
pageNotFound: 'La página que buscas no existe.',
pageNotFound: 'Ups, no deberías estar aquí',
noAccess: 'No tienes acceso a este chat',
goBackHome: 'Volver a la página principal',
},
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ErrorPage/NotFoundPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const NotFoundPage = () => (
<ScreenWrapper>
<FullPageNotFoundView
shouldShow
shouldShowBackHomeLink
shouldShowLink
/>
</ScreenWrapper>
);
Expand Down
127 changes: 70 additions & 57 deletions src/pages/settings/Payments/TransferBalancePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import FormAlertWithSubmitButton from '../../../components/FormAlertWithSubmitBu
import {withNetwork} from '../../../components/OnyxProvider';
import ConfirmationPage from '../../../components/ConfirmationPage';
import * as CurrencyUtils from '../../../libs/CurrencyUtils';
import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';

const propTypes = {
/** User's wallet information */
Expand Down Expand Up @@ -166,70 +167,82 @@ class TransferBalancePage extends React.Component {
const isButtonDisabled = !isTransferable || !selectedAccount;
const errorMessage = !_.isEmpty(this.props.walletTransfer.errors) ? _.chain(this.props.walletTransfer.errors).values().first().value() : '';

const shouldShowTransferView =
PaymentUtils.hasExpensifyPaymentMethod(this.props.cardList, this.props.bankAccountList) && this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;

return (
<ScreenWrapper>
<HeaderWithCloseButton
title={this.props.translate('common.transferBalance')}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto, styles.justifyContentCenter]}>
<CurrentWalletBalance balanceStyles={[styles.transferBalanceBalance]} />
</View>
<ScrollView
style={styles.flexGrow0}
contentContainerStyle={styles.pv5}
<FullPageNotFoundView
shouldShow={!shouldShowTransferView}
titleKey="notFound.pageNotFound"
subtitleKey="transferAmountPage.notHereSubTitle"
shouldShowLink
linkKey="transferAmountPage.goToPayment"
onLinkPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
>
<View style={styles.ph5}>
{_.map(this.paymentTypes, (paymentType) => (
<HeaderWithCloseButton
title={this.props.translate('common.transferBalance')}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto, styles.justifyContentCenter]}>
<CurrentWalletBalance balanceStyles={[styles.transferBalanceBalance]} />
</View>
<ScrollView
style={styles.flexGrow0}
contentContainerStyle={styles.pv5}
>
<View style={styles.ph5}>
{_.map(this.paymentTypes, (paymentType) => (
<MenuItem
key={paymentType.key}
title={paymentType.title}
description={paymentType.description}
iconWidth={variables.iconSizeXLarge}
iconHeight={variables.iconSizeXLarge}
icon={paymentType.icon}
success={selectedPaymentType === paymentType.key}
wrapperStyle={{
...styles.mt3,
...styles.pv4,
...styles.transferBalancePayment,
...(selectedPaymentType === paymentType.key && styles.transferBalanceSelectedPayment),
}}
onPress={() => this.navigateToChooseTransferAccount(paymentType.type)}
/>
))}
</View>
<Text style={[styles.p5, styles.textLabelSupporting, styles.justifyContentStart]}>{this.props.translate('transferAmountPage.whichAccount')}</Text>
{Boolean(selectedAccount) && (
<MenuItem
key={paymentType.key}
title={paymentType.title}
description={paymentType.description}
iconWidth={variables.iconSizeXLarge}
iconHeight={variables.iconSizeXLarge}
icon={paymentType.icon}
success={selectedPaymentType === paymentType.key}
wrapperStyle={{
...styles.mt3,
...styles.pv4,
...styles.transferBalancePayment,
...(selectedPaymentType === paymentType.key && styles.transferBalanceSelectedPayment),
}}
onPress={() => this.navigateToChooseTransferAccount(paymentType.type)}
title={selectedAccount.title}
description={selectedAccount.description}
shouldShowRightIcon
iconWidth={selectedAccount.iconSize}
iconHeight={selectedAccount.iconSize}
icon={selectedAccount.icon}
onPress={() => this.navigateToChooseTransferAccount(selectedAccount.accountType)}
/>
))}
</View>
<Text style={[styles.p5, styles.textLabelSupporting, styles.justifyContentStart]}>{this.props.translate('transferAmountPage.whichAccount')}</Text>
{Boolean(selectedAccount) && (
<MenuItem
title={selectedAccount.title}
description={selectedAccount.description}
shouldShowRightIcon
iconWidth={selectedAccount.iconSize}
iconHeight={selectedAccount.iconSize}
icon={selectedAccount.icon}
onPress={() => this.navigateToChooseTransferAccount(selectedAccount.accountType)}
)}
<View style={styles.ph5}>
<Text style={[styles.mt5, styles.mb3, styles.textLabelSupporting, styles.justifyContentStart]}>{this.props.translate('transferAmountPage.fee')}</Text>
<Text style={[styles.justifyContentStart]}>{CurrencyUtils.convertToDisplayString(calculatedFee)}</Text>
</View>
</ScrollView>
<View>
<FormAlertWithSubmitButton
buttonText={this.props.translate('transferAmountPage.transfer', {
amount: isTransferable ? CurrencyUtils.convertToDisplayString(transferAmount) : '',
})}
isLoading={this.props.walletTransfer.loading}
onSubmit={() => PaymentMethods.transferWalletBalance(selectedAccount)}
isDisabled={isButtonDisabled || this.props.network.isOffline}
message={errorMessage}
isAlertVisible={!_.isEmpty(errorMessage)}
/>
)}
<View style={styles.ph5}>
<Text style={[styles.mt5, styles.mb3, styles.textLabelSupporting, styles.justifyContentStart]}>{this.props.translate('transferAmountPage.fee')}</Text>
<Text style={[styles.justifyContentStart]}>{CurrencyUtils.convertToDisplayString(calculatedFee)}</Text>
</View>
</ScrollView>
<View>
<FormAlertWithSubmitButton
buttonText={this.props.translate('transferAmountPage.transfer', {
amount: isTransferable ? CurrencyUtils.convertToDisplayString(transferAmount) : '',
})}
isLoading={this.props.walletTransfer.loading}
onSubmit={() => PaymentMethods.transferWalletBalance(selectedAccount)}
isDisabled={isButtonDisabled || this.props.network.isOffline}
message={errorMessage}
isAlertVisible={!_.isEmpty(errorMessage)}
/>
</View>
</FullPageNotFoundView>
</ScreenWrapper>
);
}
Expand Down

0 comments on commit 1aa30d1

Please sign in to comment.