[WAITING ON CHECKLIST] Update the workspace connected bank account page for clarity and consistency

@shawnborton

Users are confused when they go to add a bank account to their workspace and cannot select their linked personal bank accounts. So let's add some explainer text that educates them on the need for a Business Bank Account. While we're at it, let's also update the page to our newest pattern for consistency.

Today

Update to

Final copy for the note:

Note: Personal bank accounts can't be used for payments on workspaces.

cc @shawnborton @maddylewis @jamesdeanexpensify

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01a8923a1af5c75af2
Upwork Job ID: 1824502151817768637
Last Price Increase: 2024-08-23
Automatic offers:

BhuvaneshPatil | Contributor | 103689249

Job added to Upwork: https://www.upwork.com/jobs/~01a8923a1af5c75af2

@Ollyws

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Ollyws (External)

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update the workspace connected bank account page for clarity and consistency (New design)

What is the root cause of that problem?

New design

What changes do you think we should make in order to solve the problem?

We need to update this Section Component

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Line 128 in 279f561

<Section

to

<Section
       title={translate('workspace.bankAccount.streamlinePayments')}
       subtitle={translate('bankAccount.toGetStarted')}
       subtitleMuted
       illustration={LottieAnimations.Safe}.  // Need to use the new design 
       titleStyles={styles.titleStyle}  // Need to define
       childrenStyles={styles.childrenStyles}  // Need to define
>

Also need to add new note (detai in the PR)

What alternative solutions did you explore? (Optional)

Edited by proposal-police: This proposal was edited at 2024-08-17T14:15:00Z.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add a note

What is the root cause of that problem?

Feature request

What changes do you think we should make in order to solve the problem?

We can add following styles here. We should conditionally render these styles and display this note only when the user has added a personal bank account. We can use this key to check if plaidAccountID is stored in Onyx.

 key: ONYXKEYS.PERSONAL_BANK_ACCOUNT

     <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.pb1, styles.pt1]}>
                        <Icon
                            src={Expensicons.Lightbulb}
                            fill={theme.icon}
                            additionalStyles={styles.mr2}
                            small
                        />
                        <Text
                            style={[styles.textLabelSupportingNormal]}
                            suppressHighlighting
                        >
                            {translate('note')} // we can add note here
                        </Text>
                    </View>

We should also add the note in en.ts and es.ts file

Further styles can be modified according to the design in the PR.

We can update this section here. Additionally, I think we should add the illustrationBackgroundColor to align with the design.

 <Section
                        illustration={LottieAnimations.FastMoney} //Animation of our choice
                        title={translate('workspace.bankAccount.streamlinePayments')}
                        subtitle={translate('bankAccount.toGetStarted')}
                        subtitleMuted
                    >

Note

As noted by a fellow contributor regarding the use of isCentralPane, I believe we should avoid using it. This prop is specifically for when the section is located in the central pane of the layout.

The main issue here is that we’re only checking isCentralPane, but we should also be checking for illustration. We need to update the check to (isCentralPane || !!illustration).

App/src/components/Section/index.tsx

Line 173 in 7615898

    
           <View style={[styles.w100, isCentralPane && (shouldUseNarrowLayout ? styles.p5 : contentPaddingOnLargeScreens ?? styles.p8)]}>

Additionally, I noticed that the design uses the same styles for 'Connect Manually' and 'Connect with Plaid'. Therefore, we should also update the styles for 'Connect with Plaid' to match.

All the font sizes and other styles can be further adjusted in the pull request.

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update the workspace connected bank account page for clarity and consistency [Design Update]

What is the root cause of that problem?

New Feature

What changes do you think we should make in order to solve the problem?

We should use Section component's prop to apply new design.

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Lines 128 to 131 in c7d4c5f

    
           <Section 
        
               icon={Illustrations.MoneyWings} 
        
               title={translate('workspace.bankAccount.streamlinePayments')} 
        
           >

<Section
  title={translate("workspace.bankAccount.streamlinePayments")}
  illustration={LottieAnimations.Coin}
  isCentralPane
  subtitle={translate("bankAccount.toGetStarted")}
  subtitleMuted
></Section>;

By passing illustration instead of icon, we can achieve given design. With this prop, we need to add extra prop isCentralPane (which is missing in both proposals), and if it's passed the content doesn't have padding. With these props we need to pass subtitle prop as well, with subtitleMuted.
For showing new content (one with Bulb icon in design), we will need to add following view - Inside
component (styles can be modified according to design)

<View
  style={[
    styles.flexRow,
    styles.mv3,
    styles.alignItemsStart,
    styles.gap2,
    styles.mln1,
  ]}
>
  <Icon
    src={Expensicons.Lightbulb}
    height={variables.iconSizeLarge}
    width={variables.iconSizeLarge}
    fill={theme.icon}
    additionalStyles={styles.p1}
  />
  <Text style={[styles.textLabelSupporting, styles.textAlignLeft]}>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi fugiat
    facilis nisi alias
  </Text>
</View>;

Result -

Without isCentralPane

What alternative solutions did you explore? (Optional)

Just adding a note that we do have an existing lottie animation to use in the top green area of the card, so it will match other places in our app (like in Settings) where the header area is animated.

@BhuvaneshPatil

Looking at the timestamps of the proposal edits it seems that @BhuvaneshPatil had the first fully fleshed-out proposal so lets go with them.
🎀👀🎀 C+ reviewed

@Bhuvanesh-Fictiv

📣 @Bhuvanesh-Fictiv! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

@francoisl

@francoisl contributor will be eligible for payment here, right?

@Ollyws

just to check here? We are including the second payment for @Ollyws in this issue? If so, I can amend the summary to $500?

Yes, that sounds right to me.

@francoisl contributor will be eligible for payment here, right?

Yes

@francoisl

Thanks @francoisl for confirming!

@Ollyws - I've amended the original Summary for you.

@BhuvaneshPatil - I need to create a new Upworks job for the new $250 amount.

@Ollyws

@Ollyws - also, does a checklist need to be completed?

@BhuvaneshPatil

@BhuvaneshPatil - invited you here

Accepted offer

Requested in ND.

@Ollyws

Paid and job closed.

@Ollyws still waiting on checklist.

BugZero Checklist:

The PR that introduced the bug has been identified. Link to the PR:

This was a design improvement so no PR is responsible.

The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

N/A

A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

N/A

Determine if we should create a regression test for this bug.

As it's just a design improvement I don't think a regression test is necessary.

Great, thanks!

ND Request failed, so submitted again.

@Ollyws

$500 approved for @Ollyws

Navigation Menu

Repository navigation

[WAITING ON CHECKLIST] Update the workspace connected bank account page for clarity and consistency #47578

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

71 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<Section
	icon={Illustrations.MoneyWings}
	title={translate('workspace.bankAccount.streamlinePayments')}
	>

[WAITING ON CHECKLIST] Update the workspace connected bank account page for clarity and consistency #47578

Description

Activity

melvin-bot commented on Aug 16, 2024

melvin-bot commented on Aug 16, 2024

cretadn22 commented on Aug 16, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Nodebrute commented on Aug 16, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

BhuvaneshPatil commented on Aug 16, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

shawnborton commented on Aug 19, 2024

Ollyws commented on Aug 19, 2024

71 remaining items

melvin-bot commented on Nov 6, 2024

BhuvaneshPatil commented on Nov 6, 2024

francoisl commented on Nov 6, 2024

jliexpensify commented on Nov 6, 2024

jliexpensify commented on Nov 6, 2024

jliexpensify commented on Nov 6, 2024

BhuvaneshPatil commented on Nov 6, 2024

Ollyws commented on Nov 6, 2024

jliexpensify commented on Nov 7, 2024

Ollyws commented on Nov 7, 2024

jliexpensify commented on Nov 7, 2024

Ollyws commented on Nov 13, 2024

garrettmknight commented on Nov 13, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions