[$250] Wallet - In offline mode, no full blocking view in country page, country & currency are editable

[IuliiaHerets]

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.80-3
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from TestRail: #52322
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: User Settings

Action Performed:

Bug 1:

1. Go to staging.new.expensify.com
2. Go to Account settings > Wallet.
3. Go offline.
4. Click Add bank account.

Bug 2:

1. Go to staging.new.expensify.com
2. Go to Account settings > Wallet.
3. Click Add bank account.
4. Select a country > Next.
5. Go offline.
6. Click Currency.
7. Select any currency.

Bug 3:

1. Go to staging.new.expensify.com
2. Go to Account settings > Wallet.
3. Click Add bank account.
4. Select a country > Next.
5. Enter info and reach the confirmation page.
6. Go offline.
7. Click Country and Currency field.

Expected Result:

Acording to this doc https://docs.google.com/document/d/1H1hMnTcMrR8MT6BXz3fCE99eVIurgrHDtaxIH5aW8Ug/edit?tab=t.0,

Bug 1:
There will be full page pattern online blocking view.

Bug 2:
Currency field should be disabled because currency should not be editable in offline mode.

Bug 3:
Country and Currency field should be disabled on the confirmation page in offline mode.

Actual Result:

Bug 1:
RHP shows country list instead of full page pattern online blocking view.

Bug 2:
Currency field is not disabled and it loads infinitely when selecting a currency in offline mode.

Bug 3:
Country and Currency field are not disabled on the confirmation page in offline mode.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6704992_1735808877702.20250102_165200.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876246528156104323
• Upwork Job ID: 1876246528156104323
• Last Price Increase: 2025-01-06
• Automatic offers:
• DylanDylann | Reviewer | 105641591
• shubham1206agra | Contributor | 105641593

Issue Owner

Current Issue Owner: @Ollyws

[melvin-bot]

Triggered auto assignment to @sonialiap (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]

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

[melvin-bot]

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

[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.

[Julesssss]

Removed blocker status, as this is a new feature and allowing editing while offline doesn't break functionality. It is just desired that we don't let users do this.

[parasharrajat]

Edited by proposal-police: This proposal was edited at 2025-01-02 10:47:32 UTC.

Proposal

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

• Use FullPageOfflineBlockingView forCountrySelection step.
• Disable the Country and Currency Selector on BankAccountDetails and Confirmation step.

What is the root cause of that problem?

We do not disable the Country and Currency Selector in international bank account flow steps when the user is offline.

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

1. First we will wrap the content of CountrySelection page in FullPageOfflineBlockingView.

   App/src/pages/settings/Wallet/InternationalDepositAccount/substeps/CountrySelection.tsx

   Line 63 in 704279d

   <>

2. Then we disable the CurrencyPicker by creating a new prop called disabled on it and forwarding to the MenuItemWithTopDescription. Then set this prop to isOffline.

App/src/components/CountryPicker/index.tsx

Line 21 in 629220d

function CountryPicker({value, errorText, onInputChange = () => {}}: CountryPickerProps) {

https://github.com/Expensify/App/blob/704279d7b8ee6a07c6149295df9e5f57653dac56/src/pages/settings/Wallet/InternationalDepositAccount/substeps/BankAccountDetails.tsx#L71C22-L71C36

 const {isOffline} = useNetwork();

3. We do the same in Confirmation page via passing the disabled value from summaryitems for country and currency.
   

   App/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx

   Line 58 in 704279d

   const summaryItems = [

const summaryItems = [
        {
            description: translate('common.country'),
            title: formValues.bankCountry,
            shouldShowRightIcon: true,
            onPress: () => {
                onMove(STEP_INDEXES.COUNTRY_SELECTOR);
            },
            disabled: isOffline
        },
        {
            description: translate('common.currency'),
            title: formValues.bankCurrency,
            shouldShowRightIcon: true,
            onPress: () => {
                onMove(STEP_INDEXES.BANK_ACCOUNT_DETAILS);
            },
            disabled: isOffline
        },
    ];

Then passing this prop to MenuItemWithTopDescription in UI.

App/src/pages/settings/Wallet/InternationalDepositAccount/substeps/Confirmation.tsx

Line 148 in 704279d

<MenuItemWithTopDescription

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.

[linhvovan29546]

Proposal

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

Wallet - In offline mode, no full blocking view in country page, country & currency are editable

What is the root cause of that problem?

We did not handling to block user actions when the app is offline.

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

We can use FullPageOfflineBlockingView component to wrap the SubStep

App/src/pages/settings/Wallet/InternationalDepositAccount/InternationalDepositAccountContent.tsx

Lines 125 to 133 in 4a17de2

	<SubStep
	isEditing={isEditing}
	onNext={handleNextScreen}
	onMove={moveTo}
	screenIndex={screenIndex}
	resetScreenIndex={resetScreenIndex}
	formValues={values}
	fieldsMap={fieldsMap}
	/>

We also prevent users from clicking the "Add Bank Account" button in the Wallet page by adding

disabled={network.isOffline}

App/src/pages/settings/Wallet/PaymentMethodList.tsx

Lines 388 to 394 in 4a17de2

	<MenuItem
	onPress={onPressItem}
	title={translate('walletPage.addBankAccount')}
	icon={Expensicons.Plus}
	wrapperStyle={[styles.paymentMethod, listItemStyle]}
	ref={buttonRef}
	/>

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

N/A

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

@Julesssss, @sonialiap Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[MonilBhavsar]

Yes, that sounds correct 👍

[melvin-bot]

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

Offer link
Upwork job

[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 📖

[shubham1206agra]

If you're first accessing the flow offline, I think we want pattern D as we need to call Corpay's API to get the list of applicable fields based on the selected country/currency combo, right @MonilBhavsar @shubham1206agra ?

@joekaufmanexpensify, I can make the change to the PR itself.

[melvin-bot]

@Julesssss, @Ollyws, @sonialiap, @shubham1206agra, @DylanDylann Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Julesssss]

@joekaufmanexpensify, I can make the change to the PR itself.

Is there an existing PR, or would this be a new one?

[shubham1206agra]

Fixed in cef7c93

[DylanDylann]

@shubham1206agra Let's also display no full blocking view on currency page if offline. Currently, if we select another currency offline, the infinity loading will happen

Screen.Recording.2025-01-16.at.14.10.29.mov

[melvin-bot]

@Julesssss @Ollyws @sonialiap @shubham1206agra @DylanDylann 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!

[melvin-bot]

@Julesssss, @Ollyws, @sonialiap, @shubham1206agra, @DylanDylann Eep! 4 days overdue now. Issues have feelings too...

[Julesssss]

Not overdue

[shubham1206agra]

@shubham1206agra Let's also display no full blocking view on currency page if offline. Currently, if we select another currency offline, the infinity loading will happen
Screen.Recording.2025-01-16.at.14.10.29.mov

Done

[melvin-bot]

@Julesssss, @Ollyws, @sonialiap, @shubham1206agra, @DylanDylann Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[Julesssss]

Hey @shubham1206agra, I'm struggling to find the PR here, would you mind sharing it? Thanks

[shubham1206agra]

#54798

[melvin-bot]

@Julesssss, @Ollyws, @sonialiap, @shubham1206agra, @DylanDylann 10 days overdue. I'm getting more depressed than Marvin.

[Julesssss]

#54798

Thanks @shubham1206agra. Please confirm that we should as this issue to the list of fixed issues within that PR.

[melvin-bot]

@Julesssss, @Ollyws, @sonialiap, @shubham1206agra, @DylanDylann 12 days overdue. Walking. Toward. The. Light...

[shubham1206agra]

@sonialiap @Julesssss Please close this issue. No payment required here.

[MonilBhavsar]

Nice, thank you!