[Due for payment 2025-02-18] [$125] Android - Company Cards-The Save button does not have the right alignment at the page bottom

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.91-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5525834
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to the Expensify app
2. Login with the user [email protected]
3. Tap on Settings
   4.Tap on Workspaces
4. Go to "Company Cards tests - DO NOT DELETE!" workspace settings
5. Tap on Company cards
6. Tap on Assign card
7. Select the user you're logged in as
8. Pick any card
9. Tap on Custom start date

Expected Result:

The Save button is displayed close to the navigation bar on the standard date picker page

Actual Result:

The Save button is displayed far from the navigation bar, with an empty space between it and the bar

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6727902_1738183423829.Save_button.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021885371484718550104
• Upwork Job ID: 1885371484718550104
• Last Price Increase: 2025-01-31
• Automatic offers:
• shubham1206agra | Contributor | 105941089

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

Triggered auto assignment to @OfstadC (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.

[shubham1206agra]

We can fix this via #52621. Since this modal will no longer be needed.

cc @dannymcclain

[OfstadC]

Thanks @shubham1206agra - Should we close this issue out then?

[dannymcclain]

We can fix this via #52621. Since this modal will no longer be needed.

I think we would still use the push-to-page pattern for the Date field in this case. cc @Expensify/design for the gut check but I think even with the date picker improvements this flow would stay as is.

[shawnborton]

Yup, makes sense to me. So yeah, we should probably fix this :)

[dubielzyk-expensify]

Yeah, definitely wanna keep the consistency of animation across the app for these things.

[joekaufmanexpensify]

Noting that I added a test commercial feed to @shubham1206agra's workspace to assist with testing the fix for this issue. I added the same feed we used for other C+/callstack card testing here. cc @mountiny

[shubham1206agra]

Proposal

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

Android - Company Cards-The Save button does not have the right alignment at the page bottom

What is the root cause of that problem?

In

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 30 in ad3bddd

function TransactionStartDateSelectorModal({isVisible, date, handleSelectDate, onClose}: TransactionStartDateSelectorModalProps) {

We are using modal component to render the date form. The catch here is we make includeSafeAreaPaddingBottom={false}

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 54 in ad3bddd

includeSafeAreaPaddingBottom={false}

which makes safeAreaInsetPaddingBottom inside FormWrapper to be non-zero, which adds the extra bottom padding incorrectly.

App/src/components/Form/FormWrapper.tsx

Line 111 in ad3bddd

style={[style, {paddingBottom: safeAreaInsetPaddingBottom + styles.pb5.paddingBottom}]}

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

Remove

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 54 in ad3bddd

includeSafeAreaPaddingBottom={false}

This will be okay in this case since we have overridden the bottom padding to be zero here

App/src/pages/workspace/companyCards/assignCard/TransactionStartDateSelectorModal.tsx

Line 52 in ad3bddd

style={styles.pb0}

Result

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA since this is an UI change

What alternative solutions did you explore? (Optional)

[shubham1206agra]

@OfstadC Can you mark this issue as external so we can assign a C+ here?

[melvin-bot]

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

[melvin-bot]

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

[mountiny]

Gonna make this half the price as its just a padding issue on one page

[melvin-bot]

📣 @shubham1206agra 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Upwork job price has been updated to $125

[mountiny]

@shubham1206agra please raise a PR when you get a moment! thanks!

[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.95-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fixed save button layout in Company card transaction start date page #56226

If no regressions arise, payment will be issued on 2025-02-18. 🎊

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

• @Ollyws requires payment through NewDot Manual Requests
• @shubham1206agra requires payment automatic offer (Contributor)

[melvin-bot]

@Ollyws / @shubham1206agra @OfstadC @Ollyws / @shubham1206agra The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[OfstadC]

Please complete BZ Checklist prior to payment date! Thank you! 😃

[melvin-bot]

@Ollyws @OfstadC @mountiny @shubham1206agra this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[shubham1206agra]

@Ollyws Bump here

[shubham1206agra]

@Ollyws Bump here

[Ollyws]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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/48278/files#r1959452148

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

Test:

1. Open App
2. Tap on Settings > Workspaces
3. Go to the workspace where company card setup is present
4. Tap on Company cards
5. Tap on Assign card
6. Select the user you're logged in as
7. Pick any card
8. Tap on Custom start date.
9. Verify the save button position on the page.

Do we agree 👍 or 👎

[OfstadC]

Payment Summary

• @Ollyws due $125 via manual NewDot request
• @shubham1206agra paid $125 via Upwork

[Ollyws]

Requested on ND.

[garrettmknight]

$125 approved for @Ollyws