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

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 all commits
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
2 changes: 2 additions & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3564,6 +3564,8 @@ 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!",
accountDescriptionWithCards: 'This bank account will be used to issue corporate cards, reimburse expenses, collect invoices, and pay bills.',
letsFinishInChat: "Let's finish in chat!",
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3612,6 +3612,8 @@ 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!',
accountDescriptionWithCards: 'Esta cuenta bancaria se utilizará para emitir tarjetas corporativas, reembolsar gastos y cobrar y pagar facturas.',
letsFinishInChat: '¡Continuemos en el chat!',
Expand Down
71 changes: 47 additions & 24 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>;

/** List of bank accounts */
bankAccountList: OnyxEntry<OnyxTypes.BankAccountList>;
};

type BankAccountStepProps = BankAccountStepOnyxProps & {
Expand Down Expand Up @@ -69,6 +71,7 @@ function BankAccountStep({
reimbursementAccount,
onBackButtonPress,
isPlaidDisabled = false,
bankAccountList = {},
}: BankAccountStepProps) {
const theme = useTheme();
const styles = useThemeStyles();
Expand All @@ -80,6 +83,7 @@ function BankAccountStep({
}
const plaidDesktopMessage = getPlaidDesktopMessage();
const bankAccountRoute = `${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}`;
const personalBankAccounts = Object.keys(bankAccountList).filter((key) => bankAccountList[key].accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);

const removeExistingBankAccountDetails = () => {
const bankAccountData: Partial<ReimbursementAccountForm> = {
Expand Down Expand Up @@ -119,34 +123,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]}>
<View style={[styles.mt3, 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]}
/>
{!!personalBankAccounts.length && (
<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, styles.flex1]}
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 +215,7 @@ export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
isPlaidDisabled: {
key: ONYXKEYS.IS_PLAID_DISABLED,
},
bankAccountList: {
key: ONYXKEYS.BANK_ACCOUNT_LIST,
},
})(BankAccountStep);
Loading