Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Workspace pages that use fetchFreePlanVerifiedBankAccount #12331 #12586

Closed
wants to merge 14 commits into from
Prev Previous commit
Next Next commit
update card
ctkochan22 committed Nov 3, 2022

Verified

This commit was signed with the committer’s verified signature.
ctkochan22 Kosuke Chris Tseng Yoshioka
commit e9ea263c8c033310bb3549eedf822a5cd1b00f6c
75 changes: 51 additions & 24 deletions src/pages/workspace/card/WorkspaceCardPage.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import lodashGet from 'lodash/get';
import {withOnyx} from 'react-native-onyx';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import * as BankAccounts from '../../../libs/actions/BankAccounts';
import BankAccount from '../../../libs/models/BankAccount';
import compose from '../../../libs/compose';
import CONST from '../../../CONST';
import ONYXKEYS from '../../../ONYXKEYS';
import WorkspaceCardNoVBAView from './WorkspaceCardNoVBAView';
import WorkspaceCardVBANoECardView from './WorkspaceCardVBANoECardView';
import WorkspaceCardVBAWithECardView from './WorkspaceCardVBAWithECardView';
import WorkspacePageWithSections from '../WorkspacePageWithSections';
import CONST from '../../../CONST';

const propTypes = {
/** The route object passed to this page from the navigator */
@@ -20,32 +26,53 @@ const propTypes = {
...withLocalizePropTypes,
};

const WorkspaceCardPage = props => (
<WorkspacePageWithSections
shouldUseScrollView
headerText={props.translate('workspace.common.card')}
route={props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
>
{(hasVBA, policyID, isUsingECard) => (
<>
{!hasVBA && (
<WorkspaceCardNoVBAView policyID={policyID} />
)}
const defaultProps = {
reimbursementAccount: {},
};

{hasVBA && !isUsingECard && (
<WorkspaceCardVBANoECardView />
)}
class WorkspaceCardPage extends React.Component {
componentDidMount() {
BankAccounts.openWorkspaceView();
}

render() {
const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
const hasVBBA = achState === BankAccount.STATE.OPEN;
return (
<WorkspacePageWithSections
shouldUseScrollView
headerText={this.props.translate('workspace.common.card')}
route={this.props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
>
{(hasVBA, policyID, isUsingECard) => (
<>
{!hasVBBA && (
<WorkspaceCardNoVBAView policyID={policyID} />
)}

{hasVBBA && !isUsingECard && (
<WorkspaceCardVBANoECardView />
)}

{hasVBA && isUsingECard && (
<WorkspaceCardVBAWithECardView />
{hasVBBA && isUsingECard && (
<WorkspaceCardVBAWithECardView />
)}
</>
)}
</>
)}
</WorkspacePageWithSections>
);
</WorkspacePageWithSections>
);
}
}

WorkspaceCardPage.propTypes = propTypes;
WorkspaceCardPage.displayName = 'WorkspaceCardPage';
WorkspaceCardPage.defaultProps = defaultProps;

export default withLocalize(WorkspaceCardPage);
export default compose(
withOnyx({
reimbursementAccount: {
key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
},
}),
withLocalize,
)(WorkspaceCardPage);