[HOLD for payment 2024-08-14] [$250] iOS - Expensify Card - Content on Expensify Card intro screen is truncated

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.10-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Device font size is increased

1. Launch New Expensify app
2. Go to workspace settings
3. Go to Expensify Card (enable on More features if not yet)

Expected Result:

The content will be displayed in two lines if it does not fit the screen (similar behavior with options on onboarding screen)

Actual Result:

"Up to 2% cash back on every US purchase" and "Spend controls and custom limits" are truncated

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6549113_1721634244605.ScreenRecording_07-22-2024_15-36-33_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0126b472d9d6b81559
• Upwork Job ID: 1815823007102686005
• Last Price Increase: 2024-07-23

Issue Owner

Current Issue Owner: @slafortune

[melvin-bot]

Triggered auto assignment to @slafortune (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@slafortune FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 2

[etCoderDysto]

Proposal

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

Expensify Card - Content on Expensify Card intro screen is truncated

What is the root cause of that problem?

We are not passing any value to numberOfLinesTitle prop of MenuItem. And MenuItem will use the default numberOfLinesTitle = 1 and truncates the contents.

App/src/components/FeatureList.tsx

Lines 101 to 108 in e3ebeff

	<MenuItem
	title={translate(translationKey)}
	icon={icon}
	iconWidth={variables.menuIconSize}
	iconHeight={variables.menuIconSize}
	interactive={false}
	displayInDefaultIconColor
	wrapperStyle={[styles.p0, styles.cursorAuto]}

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

We should pass numberOfLinesTitle={0} to the MenuItem to override the default value. No truncation will be applied on the content when the value is 0.

What alternative solutions did you explore? (Optional)

We can set 'numberOfLinesTitle' to 2 of we don't want the number of lines not to exceed above 2 lines

Result:

[melvin-bot]

Triggered auto assignment to @dubielzyk-expensify (Design), see these Stack Overflow questions for more details.

[slafortune]

@dubielzyk-expensify With the font size increased, do we still expect to see full information or is truncated lines the expected outcome?

[dubielzyk-expensify]

I don't think we should truncate the text given users should still be able to read it. So I expect two lines of text in this instance.

cc @Expensify/design for extra thoughts.

[shawnborton]

Yup, I agree that the text shouldn't be truncated.

[dannymcclain]

Definitely agree.

[etCoderDysto]

Proposal updated

• I have added screenshot of the result

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0126b472d9d6b81559

[melvin-bot]

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

[Pujan92]

@etCoderDysto's proposal looks good where they suggested setting numberOfLinesTitle to 0 which allows to render the full content.

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@slafortune, @Pujan92, @MonilBhavsar, @dubielzyk-expensify Huh... This is 4 days overdue. Who can take care of this?

[Pujan92]

Bump @MonilBhavsar for the review of #45901 (comment)

[koko57]

@etCoderDysto yes you're right - before selecting the bank account the features list is displayed, after the bank account is chosen we should display the Skeletons and Empty State Modal

1. When user navigates to Expensify card they will see the features list with illustration
2. When they select a bank account they will see empty states modal

[joekaufmanexpensify]

Hmm let's see what @joekaufmanexpensify says. But I think what you are showing is correct?

Is what you're trying to confirm whether it is correct that after clicking Issue card and selecting a bank account, that the empty state for the card feed changes, or that you immediately begin the flow to issue a card, or both?

[etCoderDysto]

Is what you're trying to confirm whether it is correct that after clicking Issue card and selecting a bank account, that the empty state for the card feed changes, or that you immediately begin the flow to issue a card, or both?

I wanted to confirm both. Issue new card with Get Expensify card illustration -> Add Bank -> Empty state card feed. Think this the correct flow. You can watch video of the flow here

[joekaufmanexpensify]

Got it. It is definitely correct that the empty state changes after selecting a bank account as shown in your video. However, it's not clear to me based on the (internal) design doc whether we're supposed to go directly into issuing a card after selecting a bank account, or land back on the empty state, and click the Issue card button in the top right.

The design doc is clear that if you're adding a VBA from scratch, you land back on Company cards and then need to click Issue card in the top right to issue a card. But I don't see that it covers whether we jump right into issuing a card if you're just selecting an existing bank account from the list.

@kevinksullivan mind weighing in on the intention for this case when you wrote the doc?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.17-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Don't truncate copy on Expensify Card #46707

If no regressions arise, payment will be issued on 2024-08-14. 🎊

For reference, here are some details about the assignees on this issue:

• @Pujan92 requires payment through NewDot Manual Requests
• @etCoderDysto requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@Pujan92] The PR that introduced the bug has been identified. Link to the PR:
• [@Pujan92] 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:
• [@Pujan92] 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:
• [@Pujan92] Determine if we should create a regression test for this bug.
• [@Pujan92] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@slafortune] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[slafortune]

@Pujan92 can you please complete the check list?

[slafortune]

@etCoderDysto can you please share your Upworks profile - I'm having a hard time finding you.

[etCoderDysto]

@etCoderDysto can you please share your Upworks profile - I'm having a hard time finding you.

Sorry! Here is a link to my profile: https://www.upwork.com/freelancers/~01ea78e0164390eb79

[slafortune]

Offer sent - https://www.upwork.com/nx/wm/offer/103525438

[etCoderDysto]

I have accepted the offer. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @Pujan92 owed $250 via NewDot
• ROLE: @etCoderDysto paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@slafortune)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1815823007102686005/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[slafortune]

bump @Pujan92, can you please complete the check list?

[Pujan92]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@Pujan92] The PR that introduced the bug has been identified. Link to the PR: [No QA]: Workspace Feed - Initial card page #44770
• [@Pujan92] 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: https://github.com/Expensify/App/pull/44770/files#r1720206013
• [@Pujan92] 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: NA
• [@Pujan92] Determine if we should create a regression test for this bug. Yes
• [@Pujan92] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Steps

1. Goto workspace settings page
2. Enable Expensify Card from More features if it is not enabled yet
3. Goto the Expensify Card item
4. Verify the features text points aren't truncated

[melvin-bot]

@slafortune, @Pujan92, @MonilBhavsar, @dubielzyk-expensify, @etCoderDysto Whoops! This issue is 2 days overdue. Let's get this updated quick!

[slafortune]

@Pujan92 - role C+ owed $250 via NewDot

[JmillsExpensify]

$250 approved for @Pujan92