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.

Sign up for GitHub

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

Jump to bottom

Connect bank account button with offline message #22403

Merged
merged 2 commits into from
Jul 14, 2023
Merged

Connect bank account button with offline message #22403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
763371a
Extracted connect bank account into seperate component, and added off…
alitoshmatov Jul 7, 2023
c24da6a
Used ternary operator, and updated component display name
alitoshmatov Jul 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions src/components/ConnectBankAccountButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import * as ReimbursementAccount from '../libs/actions/ReimbursementAccount';
import * as Expensicons from './Icon/Expensicons';
import styles from '../styles/styles';
import Button from './Button';
import {withNetwork} from './OnyxProvider';
import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import networkPropTypes from './networkPropTypes';
import Text from './Text';

const propTypes = {
...withLocalizePropTypes,

/** Information about the network */
network: networkPropTypes.isRequired,

/** PolicyID for navigating to bank account route of that policy */
policyID: PropTypes.string.isRequired,

/** Button styles, also applied for offline message wrapper */
style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
};

const defaultProps = {
style: [],
};

function ConnectBankAccountButton(props) {
return props.network.isOffline ? (
<View style={props.style}>
<Text>{`${props.translate('common.youAppearToBeOffline')} ${props.translate('common.thisFeatureRequiresInternet')}`}</Text>
</View>
) : (
<Button
text={props.translate('workspace.common.connectBankAccount')}
onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
icon={Expensicons.Bank}
style={props.style}
iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
/>
);
}

ConnectBankAccountButton.propTypes = propTypes;
ConnectBankAccountButton.defaultProps = defaultProps;
ConnectBankAccountButton.displayName = 'ConnectBankAccountButton';

export default compose(withNetwork(), withLocalize)(ConnectBankAccountButton);
14 changes: 3 additions & 11 deletions src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ import PropTypes from 'prop-types';
import Text from '../../../components/Text';
import styles from '../../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import * as Expensicons from '../../../components/Icon/Expensicons';
import * as Illustrations from '../../../components/Icon/Illustrations';
import Section from '../../../components/Section';
import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
import Button from '../../../components/Button';
import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';

const propTypes = {
/** The policy ID currently being configured */
Expand All @@ -31,15 +29,9 @@ function WorkspaceBillsNoVBAView(props) {
<View style={[styles.mv3]}>
<Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
</View>
<Button
text={props.translate('workspace.common.connectBankAccount')}
onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
icon={Expensicons.Bank}
<ConnectBankAccountButton
policyID={props.policyID}
style={[styles.mt4]}
iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
/>
</Section>
</>
Expand Down
14 changes: 3 additions & 11 deletions src/pages/workspace/card/WorkspaceCardNoVBAView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ import {View} from 'react-native';
import Text from '../../../components/Text';
import styles from '../../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import * as Expensicons from '../../../components/Icon/Expensicons';
import * as Illustrations from '../../../components/Icon/Illustrations';
import UnorderedList from '../../../components/UnorderedList';
import Section from '../../../components/Section';
import Button from '../../../components/Button';
import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';

const propTypes = {
/** The policy ID currently being configured */
Expand All @@ -36,15 +34,9 @@ function WorkspaceCardNoVBAView(props) {
props.translate('workspace.card.benefit4'),
]}
/>
<Button
text={props.translate('workspace.common.connectBankAccount')}
onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
icon={Expensicons.Bank}
<ConnectBankAccountButton
policyID={props.policyID}
style={[styles.mt6]}
iconStyles={[styles.mr5]}
shouldShowRightIcon
large
success
/>
</Section>
);
Expand Down
14 changes: 3 additions & 11 deletions src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ import PropTypes from 'prop-types';
import Text from '../../../components/Text';
import styles from '../../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import * as Expensicons from '../../../components/Icon/Expensicons';
import * as Illustrations from '../../../components/Icon/Illustrations';
import Section from '../../../components/Section';
import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
import Button from '../../../components/Button';
import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';

const propTypes = {
/** The policy ID currently being configured */
Expand All @@ -31,15 +29,9 @@ function WorkspaceInvoicesNoVBAView(props) {
<View style={[styles.mv3]}>
<Text>{props.translate('workspace.invoices.unlockNoVBACopy')}</Text>
</View>
<Button
text={props.translate('workspace.common.connectBankAccount')}
onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
icon={Expensicons.Bank}
<ConnectBankAccountButton
policyID={props.policyID}
style={[styles.mt4]}
iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
/>
</Section>
</>
Expand Down
13 changes: 3 additions & 10 deletions src/pages/workspace/reimburse/WorkspaceReimburseSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
import * as Illustrations from '../../../components/Icon/Illustrations';
import Section from '../../../components/Section';
import * as Link from '../../../libs/actions/Link';
import Button from '../../../components/Button';
import BankAccount from '../../../libs/models/BankAccount';
import * as ReimbursementAccountProps from '../../ReimbursementAccount/reimbursementAccountPropTypes';
import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
import networkPropTypes from '../../../components/networkPropTypes';
import CONST from '../../../CONST';
import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';

const propTypes = {
/** Policy values needed in the component */
Expand Down Expand Up @@ -118,15 +117,9 @@ class WorkspaceReimburseSection extends React.Component {
<View style={[styles.mv3]}>
<Text>{this.props.translate('workspace.reimburse.unlockNoVBACopy')}</Text>
</View>
<Button
text={this.props.translate('workspace.common.connectBankAccount')}
onPress={() => ReimbursementAccount.navigateToBankAccountRoute(this.props.policy.id)}
icon={Expensicons.Bank}
<ConnectBankAccountButton
policyID={this.props.policy.id}
style={[styles.mt4]}
iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
/>
</Section>
)}
Expand Down
14 changes: 3 additions & 11 deletions src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ import PropTypes from 'prop-types';
import Text from '../../../components/Text';
import styles from '../../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import * as Expensicons from '../../../components/Icon/Expensicons';
import * as Illustrations from '../../../components/Icon/Illustrations';
import Section from '../../../components/Section';
import Button from '../../../components/Button';
import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
import ConnectBankAccountButton from '../../../components/ConnectBankAccountButton';

const propTypes = {
/** The policy ID currently being configured */
Expand All @@ -27,15 +25,9 @@ function WorkspaceTravelNoVBAView(props) {
<View style={[styles.mv3]}>
<Text>{props.translate('workspace.travel.noVBACopy')}</Text>
</View>
<Button
text={props.translate('workspace.common.connectBankAccount')}
onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
icon={Expensicons.Bank}
<ConnectBankAccountButton
policyID={props.policyID}
style={[styles.mt4]}
iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
/>
</Section>
</>
Expand Down
Loading