Subscription size - Offline indicator show ups on RHP on web layout

[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: 1.4.84-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #43328

Action Performed:

1. Go to staging.new.expensify.com/settings/subscription/subscription-size
2. Go offline

Expected Result:

Offline indicator will not show up on RHP on web layout

Actual Result:

Offline indicator shows up on RHP on web layout

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

Bug6514086_1718444044907.bandicam_2024-06-15_17-32-50-686.mp4

View all open jobs on GitHub

[github-actions]

👋 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:

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

[melvin-bot]

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

[lanitochka17]

@arosiclair 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

[neonbhai]

Proposal

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

Subscription size - Offline indicator show ups on RHP on web layout

What is the root cause of that problem?

We have not disabled the offine indicator in wide screens for the ScreenWrapper here:

App/src/pages/settings/Subscription/SubscriptionSize/index.tsx

Line 46 in 75c104b

<ScreenWrapper

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

We should pass the prop shouldShowOfflineIndicatorInWideScreen as false here

<ScreenWrapper
    ...
    shouldShowOfflineIndicatorInWideScreen={false}
>

Now, on wide screens subscrioption settings page is visible in , but it doesn't show the offline indicator yet:

Image

To fix this, we will add shouldShowOfflineIndicatorInWideScreen here:

App/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

Line 37 in 75c104b

<ScreenWrapper testID={SubscriptionSettingsPage.displayName}>

<ScreenWrapper 
    testID={SubscriptionSettingsPage.displayName} 
    shouldShowOfflineIndicatorInWideScreen
>

Result

Image

[cretadn22]

Proposal

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

What is the root cause of that problem?

In the SubscriptionSettingsPage, we do not include the shouldShowOfflineIndicatorInWideScreen parameter, the offline indicator will not be shown on this page (which is the background page)

App/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

Line 37 in 75c104b

<ScreenWrapper testID={SubscriptionSettingsPage.displayName}>

In SubscriptionSize, we pass shouldShowOfflineIndicatorInWideScreen parameter

App/src/pages/settings/Subscription/SubscriptionSize/index.tsx

Line 51 in 75c104b

shouldShowOfflineIndicatorInWideScreen

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

It's necessary to include shouldShowOfflineIndicatorInWideScreen parameter in SubscriptionSettingsPage

App/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

Line 37 in 75c104b

<ScreenWrapper testID={SubscriptionSettingsPage.displayName}>

Pseudo Code:

<ScreenWrapper
       includeSafeAreaPaddingBottom={false}
       shouldShowOfflineIndicatorInWideScreen
       testID={PreferencesPage.displayName}
       offlineIndicatorStyle={styles.mtAuto} // Need to add this param to ensure that the offline indicator always display at the bottom when the content is short
>

When we show the offline status indicator on this page, we should also include includeSafeAreaPaddingBottom={false} to improve the user experience as we did in other pages like PreferencesPage, ProfilePage,...

App/src/components/ScreenWrapper.tsx

Lines 239 to 240 in 75c104b

	// We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
	if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) {

Also consider to add shouldEnablePickerAvoiding={false}

App/src/components/ScreenWrapper.tsx

Lines 70 to 72 in 75c104b

	/** Whether picker modal avoiding should be enabled. Should be enabled when there's a picker at the bottom of a
	* scrollable form, gives a subtly better UX if disabled on non-scrollable screens with a submit button */
	shouldEnablePickerAvoiding?: boolean;

And also need to remove shouldShowOfflineIndicatorInWideScreen parameter in SubscriptionSize

App/src/pages/settings/Subscription/SubscriptionSize/index.tsx

Line 51 in 75c104b

shouldShowOfflineIndicatorInWideScreen

We need to apply the same adjustment to the other sub-pages as well.

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.

[neonbhai]

@cretadn22 proposal was updated before your comment 😄

Timestamp 1

y>

Timestamp 2

Please submit complete proposals! you have missed the first field. You may also leave out the reminders at the end of the proposal template, that's just for you to remember.

[mountiny]

@bernhardoj @tylerkaraszewski @thesahindia this is coming from #43328

demoting as this feature is not available to normal users yet

[mountiny]

cc @MitchExpensify @fabioh8010

[bernhardoj]

@mountiny #43328 doesn't cause this issue.

[arosiclair]

I think this should be fixed by this PR?

[mountiny]

Thanks for noting! I assumed from the issue description that it was that pr

@bernhardoj can you confirm if your pr that Andrew linked resolves this issue?

[bernhardoj]

Yes, it does resolve the issue because shouldShowOfflineIndicatorInWideScreen now won't have an effect in RHP, but I think we can still accept the proposal here to remove the shouldShowOfflineIndicatorInWideScreen from the subscription size RHP page (because it's not needed there) and to shows the offline indicator that is missing for the subscription settings central pane screen (SubscriptionSettingsPage.tsx).

[tylerkaraszewski]

I think we can close this if a different PR has fixed it.