[Due for payment 2025-04-14] [$250] iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom #58931

mitarachim · 2025-03-22T02:13:48Z

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.1.17-0
Reproducible in staging?: Yes
Reproducible in production?: Unable to check
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

Rules feature is enabled.

Launch ND or hybrid app.
Go to workspace settings > Rules.
Go to Prohibited expenses.
Go offline.

Expected Result:

Offline indicator will be at the page bottom.

Actual Result:

Offline indicator is below the content.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6778631_1742599253368.ScreenRecording_03-22-2025_07-16-58_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021904049457294436538
Upwork Job ID: 1904049457294436538
Last Price Increase: 2025-03-24
Automatic offers:

linhvovan29546 | Contributor | 106747818

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @stephanieelliott

melvin-bot · 2025-03-22T02:14:01Z

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

melvin-bot · 2025-03-22T02:14:01Z

Triggered auto assignment to @robertjchen (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

melvin-bot · 2025-03-22T02:14:02Z

💬 A slack conversation has been started in #expensify-open-source

github-actions · 2025-03-22T02:14:03Z

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

daledah · 2025-03-22T09:03:14Z

Proposal

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

Offline indicator is below the content.

What is the root cause of that problem?

We don't style RulesProhibitedDefaultPage component correctly

App/src/pages/workspace/rules/RulesProhibitedDefaultPage.tsx

Lines 49 to 121 in 8deddfa

    
           <Text style={[styles.flexRow, styles.alignItemsCenter, styles.mt3, styles.mh5, styles.mb5]}> 
        
               <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.rules.individualExpenseRules.prohibitedDefaultDescription')}</Text> 
        
           </Text> 
        
           <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mt3, styles.mh5, styles.mb5]}> 
        
               <Text>{translate('workspace.rules.individualExpenseRules.adultEntertainment')}</Text> 
        
               <Switch 
        
                   isOn={policy?.prohibitedExpenses?.adultEntertainment ?? false} 
        
                   accessibilityLabel={translate('workspace.rules.individualExpenseRules.adultEntertainment')} 
        
                   onToggle={() => { 
        
                       const prohibitedExpenses: ProhibitedExpenses = { 
        
                           ...policy?.prohibitedExpenses, 
        
                           adultEntertainment: !policy?.prohibitedExpenses?.adultEntertainment, 
        
                       }; 
        
                       setPolicyProhibitedExpenses(policyID, prohibitedExpenses); 
        
                   }} 
        
               /> 
        
           </View> 
        
           <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mt3, styles.mh5, styles.mb5]}> 
        
               <Text>{translate('workspace.rules.individualExpenseRules.alcohol')}</Text> 
        
               <Switch 
        
                   isOn={policy?.prohibitedExpenses?.alcohol ?? false} 
        
                   accessibilityLabel={translate('workspace.rules.individualExpenseRules.alcohol')} 
        
                   onToggle={() => { 
        
                       const prohibitedExpenses: ProhibitedExpenses = { 
        
                           ...policy?.prohibitedExpenses, 
        
                           alcohol: !policy?.prohibitedExpenses?.alcohol, 
        
                       }; 
        
                       setPolicyProhibitedExpenses(policyID, prohibitedExpenses); 
        
                   }} 
        
               /> 
        
           </View> 
        
           <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mt3, styles.mh5, styles.mb5]}> 
        
               <Text>{translate('workspace.rules.individualExpenseRules.gambling')}</Text> 
        
               <Switch 
        
                   isOn={policy?.prohibitedExpenses?.gambling ?? false} 
        
                   accessibilityLabel={translate('workspace.rules.individualExpenseRules.gambling')} 
        
                   onToggle={() => { 
        
                       const prohibitedExpenses: ProhibitedExpenses = { 
        
                           ...policy?.prohibitedExpenses, 
        
                           gambling: !policy?.prohibitedExpenses?.gambling, 
        
                       }; 
        
                       setPolicyProhibitedExpenses(policyID, prohibitedExpenses); 
        
                   }} 
        
               /> 
        
           </View> 
        
           <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mt3, styles.mh5, styles.mb5]}> 
        
               <Text>{translate('workspace.rules.individualExpenseRules.hotelIncidentals')}</Text> 
        
               <Switch 
        
                   isOn={policy?.prohibitedExpenses?.hotelIncidentals ?? false} 
        
                   accessibilityLabel={translate('workspace.rules.individualExpenseRules.hotelIncidentals')} 
        
                   onToggle={() => { 
        
                       const prohibitedExpenses: ProhibitedExpenses = { 
        
                           ...policy?.prohibitedExpenses, 
        
                           hotelIncidentals: !policy?.prohibitedExpenses?.hotelIncidentals, 
        
                       }; 
        
                       setPolicyProhibitedExpenses(policyID, prohibitedExpenses); 
        
                   }} 
        
               /> 
        
           </View> 
        
           <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mt3, styles.mh5, styles.mb5]}> 
        
               <Text>{translate('workspace.rules.individualExpenseRules.tobacco')}</Text> 
        
               <Switch 
        
                   isOn={policy?.prohibitedExpenses?.tobacco ?? false} 
        
                   accessibilityLabel={translate('workspace.rules.individualExpenseRules.tobacco')} 
        
                   onToggle={() => { 
        
                       const prohibitedExpenses: ProhibitedExpenses = { 
        
                           ...policy?.prohibitedExpenses, 
        
                           tobacco: !policy?.prohibitedExpenses?.tobacco, 
        
                       }; 
        
                       setPolicyProhibitedExpenses(policyID, prohibitedExpenses); 
        
                   }} 
        
               /> 
        
           </View>

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

We should wrap this component in a View with style.flex1 like we did

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersInPage.tsx

Line 38 in 8deddfa

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersFromPage.tsx

Line 34 in 8deddfa

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

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

layacat · 2025-03-22T16:23:40Z

Regression from #56550

melvin-bot · 2025-03-24T05:55:42Z

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

melvin-bot · 2025-03-24T05:55:47Z

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

linhvovan29546 · 2025-03-24T13:47:09Z

Proposal

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

iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom

What is the root cause of that problem?

This issue is a regression from #56550. We introduced a new page (Prohibited Expenses) but missed testing it in offline mode.

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

We should replace includeSafeAreaPaddingBottom={false} with enableEdgeToEdgeBottomSafeAreaPadding.

App/src/pages/workspace/rules/RulesProhibitedDefaultPage.tsx

Lines 40 to 41 in f7b5843

    
           <ScreenWrapper 
        
               includeSafeAreaPaddingBottom={false}

            <ScreenWrapper
                enableEdgeToEdgeBottomSafeAreaPadding
                shouldEnableMaxHeight
                testID={RulesProhibitedDefaultPage.displayName}
            >

Then, optionally, we can wrap the content inside a ScrollView and apply addBottomSafeAreaPadding to maintain edge-to-edge behavior:

App/src/pages/workspace/rules/RulesProhibitedDefaultPage.tsx

Line 49 in f7b5843

    
           <Text style={[styles.flexRow, styles.alignItemsCenter, styles.mt3, styles.mh5, styles.mb5]}>

   <ScrollView addBottomSafeAreaPadding>
                <Text style={[styles.flexRow, styles.alignItemsCenter, styles.mt3, styles.mh5, styles.mb5]}>
                    <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.rules.individualExpenseRules.prohibitedDefaultDescription')}</Text>
                </Text>
...Other content
</ScrollView>

Note

The reason I suggest this solution is that we have started implementing edge-to-edge bottom

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

No, UI bug

What alternative solutions did you explore? (Optional)

N/A

stephanieelliott · 2025-03-27T03:04:22Z

Hey @getusha we have a couple proposals here, can you please review?

melvin-bot · 2025-03-31T09:35:26Z

@robertjchen, @stephanieelliott, @getusha Whoops! This issue is 2 days overdue. Let's get this updated quick!

getusha · 2025-03-31T10:58:06Z

Waiting for assignment.

stephanieelliott · 2025-04-01T01:38:27Z

Hey @robertjchen can you check out the proposal here?

robertjchen · 2025-04-01T16:13:47Z

Perfect, thanks for the update! We'll go with @linhvovan29546

melvin-bot · 2025-04-01T16:14:06Z

📣 @linhvovan29546 🎉 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 📖

linhvovan29546 · 2025-04-02T03:27:49Z

The PR is ready for review!
cc @getusha

stephanieelliott · 2025-04-04T05:29:56Z

PR hit staging earlier today

melvin-bot · 2025-04-07T20:40:21Z

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

melvin-bot · 2025-04-07T20:40:26Z

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

fix: the offline indicator is not at the page bottom #59503

If no regressions arise, payment will be issued on 2025-04-14. 🎊

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

@getusha requires payment through NewDot Manual Requests
@linhvovan29546 requires payment automatic offer (Contributor)

melvin-bot · 2025-04-07T20:40:27Z

@getusha @stephanieelliott @getusha 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]

melvin-bot · 2025-04-17T08:22:38Z

@stephanieelliott Whoops! This issue is 2 days overdue. Let's get this updated quick!

stephanieelliott · 2025-04-18T02:10:10Z

Summarizing payment on this issue:

Contributor: @linhvovan29546 $250 via Upwork - PAID!
Contributor+: @getusha $250 via ND - please request! $

Upwork job is here: https://www.upwork.com/jobs/~021904049457294436538

garrettmknight · 2025-05-13T15:53:37Z

$250 approved for @getusha

mitarachim added Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 DeployBlocker Indicates it should block deploying the API DeployBlockerCash This issue or pull request should block deployment labels Mar 22, 2025

melvin-bot bot assigned stephanieelliott Mar 22, 2025

melvin-bot bot assigned robertjchen Mar 22, 2025

github-actions bot added Engineering Hourly KSv2 and removed Daily KSv2 labels Mar 22, 2025

github-actions bot mentioned this issue Mar 22, 2025

Deploy Checklist: New Expensify 2025-03-21 #58928

Closed

65 tasks

robertjchen added External Added to denote the issue can be worked on by a contributor and removed DeployBlockerCash This issue or pull request should block deployment DeployBlocker Indicates it should block deploying the API labels Mar 24, 2025

melvin-bot bot added the Overdue label Mar 24, 2025

melvin-bot bot changed the title ~~iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom~~ [$250] iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom Mar 24, 2025

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 24, 2025

melvin-bot bot assigned getusha Mar 24, 2025

robertjchen added Daily KSv2 and removed Hourly KSv2 labels Mar 24, 2025

melvin-bot bot removed the Overdue label Mar 24, 2025

melvin-bot bot removed the Overdue label Mar 31, 2025

robertjchen assigned linhvovan29546 Apr 1, 2025

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Apr 1, 2025

linhvovan29546 mentioned this issue Apr 2, 2025

fix: the offline indicator is not at the page bottom #59503

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Apr 2, 2025

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Apr 7, 2025

melvin-bot bot changed the title ~~[$250] iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom~~ [Due for payment 2025-04-14] [$250] iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom Apr 7, 2025

melvin-bot bot removed the Reviewing Has a PR in review label Apr 7, 2025

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Apr 14, 2025

stephanieelliott closed this as completed Apr 18, 2025

melvin-bot bot removed the Overdue label Apr 18, 2025

[Due for payment 2025-04-14] [$250] iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom #58931

[Due for payment 2025-04-14] [$250] iOS - Rules - Prohibited expenses - Offline indicator is not at the page bottom #58931

Comments

mitarachim commented Mar 22, 2025 • edited by melvin-bot bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Mar 22, 2025

Uh oh!

melvin-bot bot commented Mar 22, 2025

Uh oh!

melvin-bot bot commented Mar 22, 2025

Uh oh!

github-actions bot commented Mar 22, 2025

Uh oh!

daledah commented Mar 22, 2025

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Uh oh!

layacat commented Mar 22, 2025

Uh oh!

melvin-bot bot commented Mar 24, 2025

Uh oh!

melvin-bot bot commented Mar 24, 2025

Uh oh!

linhvovan29546 commented Mar 24, 2025

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 specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Uh oh!

stephanieelliott commented Mar 27, 2025

Uh oh!

melvin-bot bot commented Mar 31, 2025

Uh oh!

getusha commented Mar 31, 2025

Uh oh!

stephanieelliott commented Apr 1, 2025

Uh oh!

robertjchen commented Apr 1, 2025

Uh oh!

melvin-bot bot commented Apr 1, 2025

Uh oh!

linhvovan29546 commented Apr 2, 2025

Uh oh!

stephanieelliott commented Apr 4, 2025

Uh oh!

melvin-bot bot commented Apr 7, 2025

Uh oh!

melvin-bot bot commented Apr 7, 2025

Uh oh!

melvin-bot bot commented Apr 7, 2025

Uh oh!

melvin-bot bot commented Apr 17, 2025

Uh oh!

stephanieelliott commented Apr 18, 2025

Uh oh!

garrettmknight commented May 13, 2025

Uh oh!

mitarachim commented Mar 22, 2025 •

edited by melvin-bot bot

Loading