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

feat: update the workspace connected bank account page for clarity and consistency #48443

Merged
merged 5 commits into from
Sep 9, 2024
Merged

feat: update the workspace connected bank account page for clarity and consistency #48443

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36a0df2
feat: update add bank account step page with latest design
BhuvaneshPatil Sep 3, 2024
8a9aa7f
remove not condition
BhuvaneshPatil Sep 3, 2024
ab88090
used different onyx value for bank accounts
BhuvaneshPatil Sep 5, 2024
ea9f88f
Merge branch 'main' of https://github.com/Expensify/App into 47578-up…
BhuvaneshPatil Sep 5, 2024
71fa816
fix the text going out
BhuvaneshPatil Sep 5, 2024
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
1 change: 1 addition & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3500,6 +3500,7 @@ export default {
continueWithSetup: 'Continue with setup',
youreAlmostDone: "You're almost done setting up your bank account, which will let you issue corporate cards, reimburse expenses, collect invoices, and pay bills.",
streamlinePayments: 'Streamline payments',
connectBankAccountNote: "Note: Personal bank accounts can't be used for payments on workspaces.",
oneMoreThing: 'One more thing!',
allSet: "You're all set!",
accountDescriptionNoCards:
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3548,6 +3548,7 @@ export default {
continueWithSetup: 'Continuar con la configuración',
youreAlmostDone: 'Casi has acabado de configurar tu cuenta bancaria, que te permitirá emitir tarjetas corporativas, reembolsar gastos y cobrar pagar facturas.',
streamlinePayments: 'Optimiza pagos',
connectBankAccountNote: 'Nota: No se pueden usar cuentas bancarias personales para realizar pagos en los espacios de trabajo.',
oneMoreThing: '¡Una cosa más!',
allSet: '¡Todo listo!',
accountDescriptionNoCards:
Expand Down
69 changes: 46 additions & 23 deletions src/pages/ReimbursementAccount/BankAccountStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import React from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import Button from '@components/Button';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import LottieAnimations from '@components/LottieAnimations';
import MenuItem from '@components/MenuItem';
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
import ScreenWrapper from '@components/ScreenWrapper';
Expand Down Expand Up @@ -36,6 +35,9 @@ type BankAccountStepOnyxProps = {

/** If the plaid button has been disabled */
isPlaidDisabled: OnyxEntry<boolean>;

/** The details about the Personal bank account we are adding saved in Onyx */
personalBankAccount: OnyxEntry<OnyxTypes.PersonalBankAccount>;
};

type BankAccountStepProps = BankAccountStepOnyxProps & {
Expand Down Expand Up @@ -69,6 +71,7 @@ function BankAccountStep({
reimbursementAccount,
onBackButtonPress,
isPlaidDisabled = false,
personalBankAccount = {},
}: BankAccountStepProps) {
const theme = useTheme();
const styles = useThemeStyles();
Expand Down Expand Up @@ -119,34 +122,50 @@ function BankAccountStep({
/>
<ScrollView style={styles.flex1}>
<Section
icon={Illustrations.MoneyWings}
title={translate('workspace.bankAccount.streamlinePayments')}
illustration={LottieAnimations.FastMoney}
subtitle={translate('bankAccount.toGetStarted')}
subtitleMuted
illustrationBackgroundColor={theme.fallbackIconColor}
isCentralPane
>
<View style={styles.mv3}>
<Text>{translate('bankAccount.toGetStarted')}</Text>
</View>
{!!plaidDesktopMessage && (
<View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
<TextLink onPress={() => Link.openExternalLinkWithToken(bankAccountRoute)}>{translate(plaidDesktopMessage)}</TextLink>
</View>
)}
<Button
icon={Expensicons.Bank}
iconStyles={[styles.customMarginButtonWithMenuItem]}
text={translate('bankAccount.connectOnlineWithPlaid')}
onPress={() => {
if (!!isPlaidDisabled || !user?.validated) {
return;
}
removeExistingBankAccountDetails();
BankAccounts.openPlaidView();
}}
isDisabled={!!isPlaidDisabled || !user?.validated}
style={[styles.mt4]}
shouldShowRightIcon
success
innerStyles={[styles.pr2, styles.pl4, styles.h13]}
/>
{!personalBankAccount.plaidAccountID && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be the other way around? According to #47578 (comment)

I don't think the note needs to be visible if they haven't ever added a personal bank account

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, that makes sense. Will update the PR

<View style={[styles.flexRow, styles.mt4, styles.alignItemsCenter, styles.pb1, styles.pt1]}>
<Icon
src={Expensicons.Lightbulb}
fill={theme.icon}
additionalStyles={styles.mr2}
medium
/>
<Text
style={[styles.textLabelSupportingNormal]}
suppressHighlighting
>
{translate('workspace.bankAccount.connectBankAccountNote')}
</Text>
</View>
)}
<View style={styles.mt3}>
<MenuItem
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, why are we changing this from Button to MenuItem?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and also why wrap it in a view?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. As per design we don't want that button to be highlighted, so to be consistent with other option I have used MenuItem
  2. I have used view as kind of wrapper/container as we have done for other MenuItem and apply margin

icon={Expensicons.Bank}
title={translate('bankAccount.connectOnlineWithPlaid')}
disabled={!!isPlaidDisabled || !user?.validated}
onPress={() => {
if (!!isPlaidDisabled || !user?.validated) {
return;
}
removeExistingBankAccountDetails();
BankAccounts.openPlaidView();
}}
shouldShowRightIcon
wrapperStyle={[styles.cardMenuItem]}
/>
</View>
<View style={styles.mv3}>
<MenuItem
icon={Expensicons.Connect}
Expand Down Expand Up @@ -195,4 +214,8 @@ export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
isPlaidDisabled: {
key: ONYXKEYS.IS_PLAID_DISABLED,
},
// @ts-expect-error: ONYXKEYS.PERSONAL_BANK_ACCOUNT is conflicting with ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM
personalBankAccount: {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
},
})(BankAccountStep);
Loading