From 574aa7525a311f51c06695e9c14dcecba12e9869 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 14 Sep 2021 17:02:19 -0600 Subject: [PATCH 1/8] update finish setup button logic --- src/pages/workspace/WorkspaceCardPage.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/pages/workspace/WorkspaceCardPage.js b/src/pages/workspace/WorkspaceCardPage.js index 5f3511cb63bc..76ecbeac0072 100644 --- a/src/pages/workspace/WorkspaceCardPage.js +++ b/src/pages/workspace/WorkspaceCardPage.js @@ -5,6 +5,7 @@ import { import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; +import _ from 'underscore'; import styles from '../../styles/styles'; import ONYXKEYS from '../../ONYXKEYS'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; @@ -62,6 +63,10 @@ const propTypes = { loading: PropTypes.bool, }), + /** Draft of bank account currently in setup */ + // eslint-disable-next-line react/forbid-prop-types + reimbursementAccountDraft: PropTypes.object, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, }; @@ -74,6 +79,7 @@ const defaultProps = { reimbursementAccount: { loading: false, }, + reimbursementAccountDraft: {}, }; const WorkspaceCardPage = ({ @@ -84,11 +90,14 @@ const WorkspaceCardPage = ({ isSmallScreenWidth, isMediumScreenWidth, reimbursementAccount, + reimbursementAccountDraft, }) => { - const isVerifying = lodashGet(reimbursementAccount, 'achData.state', '') === BankAccount.STATE.VERIFYING; - const isPending = lodashGet(reimbursementAccount, 'achData.state', '') === BankAccount.STATE.PENDING; - const isNotAutoProvisioned = !user.isUsingExpensifyCard - && lodashGet(reimbursementAccount, 'achData.state', '') === BankAccount.STATE.OPEN; + const achState = lodashGet(reimbursementAccount, 'achData.state', ''); + const shouldFinishSetup = !_.isEmpty(reimbursementAccountDraft) + || achState === BankAccount.STATE.SETUP + || achState === BankAccount.STATE.VERIFYING + || achState === BankAccount.STATE.PENDING + || achState === BankAccount.STATE.OPEN; let buttonText; const openBankSetupModal = () => { @@ -100,7 +109,7 @@ const WorkspaceCardPage = ({ buttonText = translate('workspace.card.addEmail'); } else if (user.isUsingExpensifyCard) { buttonText = translate('workspace.card.manageCards'); - } else if (isVerifying || isPending || isNotAutoProvisioned) { + } else if (shouldFinishSetup) { buttonText = translate('workspace.card.finishSetup'); openBankSetupModal(); } else { @@ -231,6 +240,9 @@ export default compose( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + reimbursementAccountDraft: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, + }, betas: { key: ONYXKEYS.BETAS, }, From 8910b7491b9b5043b41dc81f76dc0b9d49862e83 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 22 Sep 2021 13:41:59 -0600 Subject: [PATCH 2/8] convert WorkspaceCardPage to class component --- src/pages/workspace/WorkspaceCardPage.js | 267 +++++++++++++---------- 1 file changed, 147 insertions(+), 120 deletions(-) diff --git a/src/pages/workspace/WorkspaceCardPage.js b/src/pages/workspace/WorkspaceCardPage.js index d9340c8decc7..30d079b5c71e 100644 --- a/src/pages/workspace/WorkspaceCardPage.js +++ b/src/pages/workspace/WorkspaceCardPage.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; import _ from 'underscore'; +import {withNavigationFocus} from '@react-navigation/compat'; import styles from '../../styles/styles'; import ONYXKEYS from '../../ONYXKEYS'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; @@ -59,6 +60,9 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types reimbursementAccountDraft: PropTypes.object, + /** Is WorkspaceCard screen focused */ + isFocused: PropTypes.bool.isRequired, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, }; @@ -74,148 +78,170 @@ const defaultProps = { reimbursementAccountDraft: {}, }; -const WorkspaceCardPage = ({ - betas, - user, - translate, - route, - isSmallScreenWidth, - isMediumScreenWidth, - reimbursementAccount, - reimbursementAccountDraft, -}) => { - const achState = lodashGet(reimbursementAccount, 'achData.state', ''); - const shouldFinishSetup = !_.isEmpty(reimbursementAccountDraft) - || achState === BankAccount.STATE.SETUP - || achState === BankAccount.STATE.VERIFYING - || achState === BankAccount.STATE.PENDING - || achState === BankAccount.STATE.OPEN; - let buttonText; - - const openBankSetupModal = () => { - setWorkspaceIDForReimbursementAccount(route.params.policyID); - Navigation.navigate(ROUTES.getBankAccountRoute()); +class WorkspaceCardPage extends React.Component { + constructor(props) { + super(props); + + this.onPress = this.onPress.bind(this); + this.state = { + buttonText: this.props.translate('workspace.card.getStarted'), + } + } + + componentDidMount() { + if (!Permissions.canUseFreePlan(this.props.betas)) { + console.debug('Not showing workspace card page because user is not on free plan beta'); + return Navigation.dismissModal(); + } + const buttonText = this.getButtonText(); + this.setState({buttonText}); + if (buttonText === this.props.translate('workspace.card.finishSetup')) { + this.openBankSetupModal(); + } }; - if (user.isFromPublicDomain) { - buttonText = translate('workspace.card.addEmail'); - } else if (user.isUsingExpensifyCard) { - buttonText = translate('workspace.card.manageCards'); - } else if (shouldFinishSetup) { - buttonText = translate('workspace.card.finishSetup'); - openBankSetupModal(); - } else { - buttonText = translate('workspace.card.getStarted'); + componentDidUpdate() { + const buttonText = this.getButtonText(); + if (this.state.buttonText !== buttonText) { + this.setState({buttonText}); + } + } + + shouldComponentUpdate(nextProps) { + if (this.props.isFocused || nextProps.isFocused) { + return true; + } + return false; } - const onPress = () => { - if (user.isFromPublicDomain) { + openBankSetupModal() { + setWorkspaceIDForReimbursementAccount(this.props.route.params.policyID); + Navigation.navigate(ROUTES.getBankAccountRoute()); + }; + + onPress() { + if (this.props.user.isFromPublicDomain) { openSignedInLink(CONST.ADD_SECONDARY_LOGIN_URL); - } else if (user.isUsingExpensifyCard) { + } else if (this.props.user.isUsingExpensifyCard) { openSignedInLink(CONST.MANAGE_CARDS_URL); } else { - openBankSetupModal(); + this.openBankSetupModal(); } }; - if (!Permissions.canUseFreePlan(betas)) { - console.debug('Not showing workspace card page because user is not on free plan beta'); - return ; - } + getButtonText() { + const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', ''); + const shouldFinishSetup = !_.isEmpty(this.props.reimbursementAccountDraft) + || achState === BankAccount.STATE.SETUP + || achState === BankAccount.STATE.VERIFYING + || achState === BankAccount.STATE.PENDING + || achState === BankAccount.STATE.OPEN; - return ( - - Navigation.dismissModal()} - onBackButtonPress={() => Navigation.goBack()} - shouldShowBackButton={isSmallScreenWidth} - shouldShowInboxCallButton - inboxCallTaskID="WorkspaceCompanyCards" - /> - - - - {isSmallScreenWidth || isMediumScreenWidth - ? ( - - ) - : ( - - )} + if (this.props.user.isFromPublicDomain) { + return this.props.translate('workspace.card.addEmail'); + } else if (this.props.user.isUsingExpensifyCard) { + return this.props.translate('workspace.card.manageCards'); + } else if (shouldFinishSetup) { + return this.props.translate('workspace.card.finishSetup'); + } + return this.props.translate('workspace.card.getStarted'); + } + render() { + return ( + + Navigation.dismissModal()} + onBackButtonPress={() => Navigation.goBack()} + shouldShowBackButton={this.props.isSmallScreenWidth} + shouldShowInboxCallButton + inboxCallTaskID="WorkspaceCompanyCards" + /> + + - + ) + : ( + + )} + + - - {user.isUsingExpensifyCard - ? translate('workspace.card.cardReadyTagline') - : translate('workspace.card.tagline')} - - - {user.isFromPublicDomain - ? translate('workspace.card.publicCopy') - : translate('workspace.card.privateCopy')} - -