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

present CTAs as green buttons #8609

Merged
merged 5 commits into from
Apr 26, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
12 changes: 12 additions & 0 deletions assets/images/connect.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 46 additions & 8 deletions src/components/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,28 @@ import Icon from './Icon';
import CONST from '../CONST';
import * as StyleUtils from '../styles/StyleUtils';
import HapticFeedback from '../libs/HapticFeedback';
import * as Expensicons from './Icon/Expensicons';
import colors from '../styles/colors';

const propTypes = {
/** The text for the button label */
text: PropTypes.string,

/** Boolean whether to display the right icon */
shouldShowRightIcon: PropTypes.bool,

/** The icon asset to display to the left of the text */
icon: PropTypes.func,

/** The icon asset to display to the right of the text */
iconRight: PropTypes.func,

/** The fill color to pass into the icon. */
iconFill: PropTypes.string,

/** Any additional styles to pass to the icon container. */
iconStyles: PropTypes.arrayOf(PropTypes.object),

/** Small sized button */
small: PropTypes.bool,

Expand All @@ -27,6 +41,9 @@ const propTypes = {
/** medium sized button */
medium: PropTypes.bool,

/** Extra large sized button */
extraLarge: PropTypes.bool,

/** Indicates whether the button should be disabled and in the loading state */
isLoading: PropTypes.bool,

Expand Down Expand Up @@ -84,12 +101,17 @@ const propTypes = {

const defaultProps = {
text: '',
shouldShowRightIcon: false,
icon: null,
iconRight: Expensicons.ArrowRight,
iconFill: colors.white,
iconStyles: [],
isLoading: false,
isDisabled: false,
small: false,
large: false,
medium: false,
extraLarge: false,
onPress: () => {},
onLongPress: () => {},
onPressIn: () => {},
Expand Down Expand Up @@ -158,6 +180,7 @@ class Button extends Component {
this.props.small && styles.buttonSmallText,
this.props.medium && styles.buttonMediumText,
this.props.large && styles.buttonLargeText,
this.props.extraLarge && styles.buttonExtraLargeText,
this.props.success && styles.buttonSuccessText,
this.props.danger && styles.buttonDangerText,
...this.props.textStyles,
Expand All @@ -169,15 +192,29 @@ class Button extends Component {

if (this.props.icon) {
return (
<View style={[styles.flexRow, styles.alignItemsCenter]}>
<View style={styles.mr1}>
<Icon
src={this.props.icon}
fill={themeColors.heading}
small={this.props.small}
/>
<View style={[styles.justifyContentBetween, styles.flexRow]}>
<View style={[styles.alignItemsCenter, styles.flexRow]}>
<View style={[
styles.mr1,
...this.props.iconStyles,
]}
>
<Icon
src={this.props.icon}
fill={this.props.iconFill}
small={this.props.small}
/>
</View>
{textComponent}
</View>
{textComponent}
{this.props.shouldShowRightIcon && (
<View>
<Icon
src={this.props.iconRight}
fill={this.props.iconFill}
/>
</View>
)}
</View>
);
}
Expand Down Expand Up @@ -216,6 +253,7 @@ class Button extends Component {
this.props.small ? styles.buttonSmall : undefined,
this.props.medium ? styles.buttonMedium : undefined,
this.props.large ? styles.buttonLarge : undefined,
this.props.extraLarge ? styles.buttonExtraLarge : undefined,
this.props.success ? styles.buttonSuccess : undefined,
this.props.danger ? styles.buttonDanger : undefined,
(this.props.isDisabled && this.props.success) ? styles.buttonSuccessDisabled : undefined,
Expand Down
2 changes: 2 additions & 0 deletions src/components/Icon/Expensicons.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ import ActiveRoomAvatar from '../../../assets/images/avatars/room.svg';
import DeletedRoomAvatar from '../../../assets/images/avatars/deleted-room.svg';
import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg';
import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg';
import Connect from '../../../assets/images/connect.svg';

export {
ActiveRoomAvatar,
Expand All @@ -98,6 +99,7 @@ export {
Close,
ClosedSign,
Concierge,
Connect,
CreditCard,
DeletedRoomAvatar,
DownArrow,
Expand Down
11 changes: 8 additions & 3 deletions src/pages/ReimbursementAccount/BankAccountStep.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import * as Illustrations from '../../components/Icon/Illustrations';
import getPlaidDesktopMessage from '../../libs/getPlaidDesktopMessage';
import CONFIG from '../../CONFIG';
import ROUTES from '../../ROUTES';
import Button from '../../components/Button';

const propTypes = {
/** Bank account currently in setup */
Expand Down Expand Up @@ -214,20 +215,24 @@ class BankAccountStep extends React.Component {
</TextLink>
</View>
)}
<MenuItem
<Button
icon={Expensicons.Bank}
title={this.props.translate('bankAccount.connectOnlineWithPlaid')}
text={this.props.translate('bankAccount.connectOnlineWithPlaid')}
onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)}
disabled={this.props.isPlaidDisabled || !this.props.user.validated}
style={[styles.mt5, styles.mh3]}
iconStyles={[styles.mr5]}
shouldShowRightIcon
success
extraLarge
/>
{this.props.isPlaidDisabled && (
<Text style={[styles.formError, styles.mh5]}>
{this.props.translate('bankAccount.error.tooManyAttempts')}
</Text>
)}
<MenuItem
icon={Expensicons.Paycheck}
icon={Expensicons.Connect}
title={this.props.translate('bankAccount.connectManually')}
disabled={!this.props.user.validated}
onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)}
Expand Down
32 changes: 18 additions & 14 deletions src/pages/ReimbursementAccount/ValidationStep.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import * as Expensicons from '../../components/Icon/Expensicons';
import * as Illustrations from '../../components/Icon/Illustrations';
import Section from '../../components/Section';
import CONST from '../../CONST';
import Button from '../../components/Button';
import MenuItem from '../../components/MenuItem';

const propTypes = {
...withLocalizePropTypes,
Expand Down Expand Up @@ -232,25 +234,27 @@ class ValidationStep extends React.Component {
<Section
title={this.props.translate('workspace.bankAccount.letsFinishInChat')}
icon={Illustrations.ConciergeBlue}
menuItems={[
{
title: this.props.translate('validationStep.letsChatCTA'),
icon: Expensicons.ChatBubble,
onPress: Report.navigateToConciergeChat,
shouldShowRightIcon: true,
},
{
title: this.props.translate('workspace.bankAccount.noLetsStartOver'),
icon: Expensicons.RotateLeft,
shouldShowRightIcon: true,
onPress: BankAccounts.requestResetFreePlanBankAccount,
},
]}
>
<Text>
{this.props.translate('validationStep.letsChatText')}
</Text>
</Section>
<Button
text={this.props.translate('validationStep.letsChatCTA')}
onPress={Report.navigateToConciergeChat}
icon={Expensicons.ChatBubble}
style={[styles.mt4, styles.mh3]}
iconStyles={[styles.mr5]}
shouldShowRightIcon
extraLarge
success
/>
<MenuItem
title={this.props.translate('workspace.bankAccount.noLetsStartOver')}
icon={Expensicons.RotateLeft}
onPress={BankAccounts.requestResetFreePlanBankAccount}
shouldShowRightIcon
/>
</View>
)}
</View>
Expand Down
34 changes: 25 additions & 9 deletions src/pages/settings/Payments/PaymentMethodList.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx';
import styles from '../../../styles/styles';
import * as StyleUtils from '../../../styles/StyleUtils';
import MenuItem from '../../../components/MenuItem';
import Button from '../../../components/Button';
import Text from '../../../components/Text';
import compose from '../../../libs/compose';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
Expand All @@ -16,14 +17,12 @@ import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
import * as PaymentUtils from '../../../libs/PaymentUtils';

const MENU_ITEM = 'menuItem';
const BUTTON = 'button';

const propTypes = {
/** What to do when a menu item is pressed */
onPress: PropTypes.func.isRequired,

/** Is the payment options menu open / active? */
isAddPaymentMenuActive: PropTypes.bool,

/** User's paypal.me username if they have one */
payPalMeUsername: PropTypes.string,

Expand Down Expand Up @@ -77,7 +76,6 @@ const defaultProps = {
walletLinkedAccountID: 0,
walletLinkedAccountType: '',
},
isAddPaymentMenuActive: false,
shouldShowAddPaymentMethodButton: true,
filterType: '',
actionPaymentMethodType: '',
Expand Down Expand Up @@ -155,13 +153,16 @@ class PaymentMethodList extends Component {
}

combinedPaymentMethods.push({
type: MENU_ITEM,
title: this.props.translate('paymentMethodList.addPaymentMethod'),
icon: Expensicons.Plus,
type: BUTTON,
text: this.props.translate('paymentMethodList.addPaymentMethod'),
icon: Expensicons.CreditCard,
style: [styles.mh4],
iconStyles: [styles.mr4],
onPress: e => this.props.onPress(e),
isDisabled: this.props.isLoadingPayments,
shouldShowRightIcon: true,
success: true,
key: 'addPaymentMethodButton',
iconFill: this.props.isAddPaymentMenuActive ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
wrapperStyle: this.props.isAddPaymentMenuActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : [],
});

return combinedPaymentMethods;
Expand Down Expand Up @@ -204,6 +205,21 @@ class PaymentMethodList extends Component {
/>
);
}
if (item.type === BUTTON) {
return (
<Button
text={item.text}
icon={item.icon}
onPress={item.onPress}
isDisabled={item.isDisabled}
style={item.style}
iconStyles={item.iconStyles}
success={item.success}
shouldShowRightIcon={item.shouldShowRightIcon}
extraLarge
/>
);
}

return (
<Text
Expand Down
32 changes: 18 additions & 14 deletions src/pages/workspace/WorkspaceBankAccountPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import WorkspaceResetBankAccountModal from './WorkspaceResetBankAccountModal';
import styles from '../../styles/styles';
import CONST from '../../CONST';
import withFullPolicy from './withFullPolicy';
import Button from '../../components/Button';
import MenuItem from '../../components/MenuItem';

const propTypes = {
/** ACH data for the withdrawal account actively being set up */
Expand Down Expand Up @@ -110,25 +112,27 @@ class WorkspaceBankAccountPage extends React.Component {
<Section
title={this.props.translate('workspace.bankAccount.almostDone')}
icon={Illustrations.BankArrowPink}
menuItems={[
{
title: this.props.translate('workspace.bankAccount.continueWithSetup'),
icon: Expensicons.Bank,
onPress: this.navigateToBankAccountRoute,
shouldShowRightIcon: true,
},
{
title: this.props.translate('workspace.bankAccount.startOver'),
icon: Expensicons.RotateLeft,
onPress: BankAccounts.requestResetFreePlanBankAccount,
shouldShowRightIcon: true,
},
]}
>
<Text>
{this.props.translate('workspace.bankAccount.youreAlmostDone')}
</Text>
</Section>
<Button
text={this.props.translate('workspace.bankAccount.continueWithSetup')}
onPress={this.navigateToBankAccountRoute}
icon={Expensicons.Bank}
style={[styles.mh3, styles.mt2]}
iconStyles={[styles.mr5]}
shouldShowRightIcon
extraLarge
success
/>
<MenuItem
title={this.props.translate('workspace.bankAccount.startOver')}
icon={Expensicons.RotateLeft}
onPress={BankAccounts.requestResetFreePlanBankAccount}
shouldShowRightIcon
/>
</ScrollView>
<WorkspaceResetBankAccountModal />
</ScreenWrapper>
Expand Down
20 changes: 11 additions & 9 deletions src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Section from '../../../components/Section';
import Navigation from '../../../libs/Navigation/Navigation';
import ROUTES from '../../../ROUTES';
import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
import Button from '../../../components/Button';

const propTypes = {
/** The policy ID currently being configured */
Expand All @@ -25,19 +26,20 @@ const WorkspaceBillsNoVBAView = props => (
<Section
title={props.translate('workspace.bills.unlockOnlineBillPayment')}
icon={Illustrations.JewelBoxPink}
menuItems={[
{
title: props.translate('workspace.common.bankAccount'),
onPress: () => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID)),
icon: Expensicons.Bank,
shouldShowRightIcon: true,
iconRight: Expensicons.ArrowRight,
},
]}
>
<View style={[styles.mv4]}>
<Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
</View>
<Button
text={props.translate('workspace.common.bankAccount')}
onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID))}
icon={Expensicons.Bank}
style={[styles.mt4]}
iconStyles={[styles.mr5]}
shouldShowRightIcon
extraLarge
success
/>
</Section>
</>
);
Expand Down
Loading