[$500] [MEDIUM] Bank account - Confirm button is not disabled when offline

[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: 1.4.41-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4312329
Email or phone of affected tester (no customers): applausetester+vd_mweb041324@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Pre-requisite: the user must be logged in and have created a workspace

1. Go to Workspace > Bank account
2. Initiate the add BA flow until you reach the Personal info double check page
3. Disable the internet connection

Expected Result:

The Confirm button should be grayed out and disabled

Actual Result:

Confirm button is not disabled

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0116b0e762d51b88bd
• Upwork Job ID: 1759563597209448448
• Last Price Increase: 2024-02-19

[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 @amyevans (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[mountiny]

@MrMuzyk I believe you can address it in your PR

[Swor71]

Hey I'm Marcin from Callstack - expert contributor group - I'd like to work on this issue

[mountiny]

@Swor71 will address this issue this week

[melvin-bot]

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

[melvin-bot]

Current assignee @akinwale is eligible for the External assigner, not assigning anyone new.

[allgandalf]

Proposal

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

Confirm button is not disabled when offline

What is the root cause of that problem?

We show the button even when user is offline

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

Add a check in the confirm button : !isOffline

[elemanhillary]

Proposal

Please re-state the problem that we are trying to solve in this issue.
Confirm button is not disabled when offline

What is the root cause of that problem?
We show the button even when user is offline

What changes do you think we should make in order to solve the problem?
check network if is offline or not reachable to disable click events on the button

• useNetwork hook could also be made simpler and refactored for network reachability status, here is a simple example
  NB: not including the callback function (can be added too)

import { useState, useEffect } from 'react';
import NetInfo, { NetInfoStateType } from '@react-native-community/netinfo';

interface NetworkManagerState {
  networkType: NetInfoStateType | null;
  isConnected: boolean | null;
  isInternetReachable: boolean | null;
}

const useNetworkManager = (): NetworkManagerState => {
  const [networkState, setNetworkState] = useState<NetworkManagerState>({
    networkType: null,
    isConnected: null,
    isInternetReachable: null,
  });

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setNetworkState({
        networkType: state.type,
        isConnected: state.isConnected,
        isInternetReachable: state.isInternetReachable ?? null,
      });
    });

    return () => {
      unsubscribe();
    };
  }, []);
  return networkState;
};

export default useNetworkManager;

Additional
Adjust button contraints abit as it looked cropped at the bottom

[melvin-bot]

📣 @elemanhillary! 📣
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:

1. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[mountiny]

And engineer is already assigned to this issue

[Swor71]

hey, sorry for a late response to this issue, I had some technical problems with my setup.

fixed this issue along with the same cases for other substep confirmation pages here: #37025