[HOLD for payment 2024-12-20] [$250] Expensify Card - Empty card details page can be opened after deactivating card

[vincdargento]

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.71-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• Expensify Card feature is enabled.
• User has assigned themselves a virtual card.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Expensify Card.
3. Click on the virtual card.
4. Click Deactivate card.
5. Deactivate the card.
6. Click browser forward button.

Expected Result:

Not here page should open because the card is deactivated.

Actual Result:

Empty card details page opens. It can be edited, which leads to "Hidden" profile in Expensify Card list.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021865065766629964229
• Upwork Job ID: 1865065766629964229
• Last Price Increase: 2024-12-06

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

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

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-12-04 15:10:12 UTC.

Proposal

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

Expensify Card - Empty card details page can be opened after deactivating card

What is the root cause of that problem?

When card is deactivated card becomes undefined,

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx

Line 53 in 0296f80

const card = cardsList?.[cardID];

And we are not showing not found page when card is undefiend

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

We should pass shouldBeBlocked={!card} to AccessOrNotFoundWrapper, or we can use isEmptyObject(card) optionally

        <AccessOrNotFoundWrapper
            accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
            policyID={policyID}
            featureName={CONST.POLICY.MORE_FEATURES.ARE_EXPENSIFY_CARDS_ENABLED}
            shouldBeBlocked={!card}

And we should close the modal when back button is clicked by passing navigation.dismissModal function to onBackButtonPress prop or fullPageNotFoundViewProps

fullPageNotFoundViewProps={{onBackButtonPress: () => Navigation.dismissModal()}}

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

What alternative solutions did you explore? (Optional)

[github-actions]

expensify/ExpensiFlex Your proposal will be dismissed because you did not follow the proposal template.

[thelullabyy]

Proposal

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

Expensify Card - Empty card details page can be opened after deactivating card

What is the root cause of that problem?

We haven't restricted access to the detail card page if a user tries to view an invalid card

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

In WorkspaceExpensifyCardDetailsPage we need to implement the same logic as we did in WorkspaceCompanyCardDetailsPage

App/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx

Lines 75 to 77 in d839c4d

	if (!card && !isLoadingOnyxValue(allBankCardsMetadata)) {
	return <NotFoundPage />;
	}

    if (!card && !isLoadingOnyxValue(cardsListMetadata)) {
        return <NotFoundPage />;
    }

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

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.

[DylanDylann]

@mountiny This seems like a lack of when implementing this feature. Could I take over this one?

[twilight2294]

Proposal

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

Empty card details page can be opened after deactivating card

What is the root cause of that problem?

There is no blocking screen in Expensify cards page in case the cardID doesn't exist in the list. hence we still see the details page for any cardID eg ABDC, 232, etc. with no actual data present.

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

We would need to make 2 changes here.

1. In WorkspaceExpensifyCardDetailsPage , first we need to introduce a new NotFoundPage page in case the card for that particular cardID is not present and the onyx updates are complete:

    if (!card && !isLoadingOnyxValue(cardsListMetadata)) {
        return <NotFoundPage />;
    }

2. We would also need to update the optimistic data for deactivateCard, this is because when we delete it optimistically, a Not found page would be immediately shown as we set the value to null in the optimistic data:

App/src/libs/actions/Card.ts

Lines 619 to 633 in e25e3fa

	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`,
	value: {
	[cardID]: null,
	},
	},
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.CARD_LIST,
	value: {
	[cardID]: null,
	},
	},

Note that fixing this is necessary else we will see a not found page everytime the user deactives the card before the RHP closes, so we will update optimistic data and introduce success data for deactivateCard:

    const optimisticData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`,
            value: {
                [cardID]: {
                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                },
            },
        },
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.CARD_LIST,
            value: {
                [cardID]: {
                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                },
            },
        },
    ];

    const successData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`,
            value: {
                [cardID]: null,
            },
        },
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.CARD_LIST,
            value: {
                [cardID]: null,
            },
        }
    ]

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

N/A this is a visual bug so no tests required

What alternative solutions did you explore? (Optional)

N/A

[mountiny]

yeah if the cardId is not locally we should show not found page

[twilight2294]

@DylanDylann can you please review my proposal here

[DylanDylann]

@thelullabyy's proposal looks good to me

@twilight2294 I noticed that you mentioned another bug in your proposal: "When deactivating the card, the card is removed before the modal is dismissed. It caused the empty value to be displayed in a moment". But I believe that we shouldn't add pendingAction to the deactivating card action because this action follows Offline Pattern C

@thelullabyy Let's also resolve this additional bug in your PR. One potential approach that we already used widely in our codebase is to deactivate the card after the modal is closed completely by using runAfterInteractions.

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

Current assignee @mountiny is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[twilight2294]

@DylanDylann we follow the pattern i suggested in company cards page when we deactive the card:

App/src/libs/actions/CompanyCards.ts

Lines 250 to 260 in 840c227

	optimisticData: [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
	value: {
	[cardID]: {
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
	},
	},
	},
	{

So i don't understand why cannot we use it in expensify cards page ? Can you please re-review my proposal ?

@mountiny can you also please check, my proposal already works the way company cards page works so i think it is fine to put the optimistic pending action

[DylanDylann]

@twilight2294 I just checked again

• Company Card: Applying offline pattern B
• Expensify Card: Applying offline pattern C

It isn't the same.

[twilight2294]

@DylanDylann , we follow pattern B for updateExpensifyCardLimit, updateExpensifyCardTitle, updateExpensifyCardLimitType:

App/src/libs/actions/Card.ts

Line 417 in e25e3fa

pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,

App/src/libs/actions/Card.ts

Lines 487 to 490 in e25e3fa

	pendingFields: {cardTitle: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
	},
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	isLoading: true,

App/src/libs/actions/Card.ts

Lines 555 to 558 in e25e3fa

	pendingFields: {limitType: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
	},
	pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
	pendingFields: {availableSpend: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},

So i guess for the details page too, pattern B should be followed similar to company cards details page

[mountiny]

@twilight2294 No, the company cards is a simple update in our database hence pattern B but for anything related to Expensify card we also need to communication with thirdparty api and that can fail for unknown reasons hence we only want users to be able to do take these critical actions online

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@alexpensify, @mountiny, @DylanDylann, @thelullabyy Whoops! This issue is 2 days overdue. Let's get this updated quick!

[thelullabyy]

@DylanDylann I created a draft PR, I just need to test and finish all videos before opening to review.

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

• Fix display not here page if card is deactivated #53835

If no regressions arise, payment will be issued on 2024-12-20. 🎊

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

• @DylanDylann requires payment (Needs manual offer from BZ)
• @thelullabyy requires payment (Needs manual offer from BZ)

[melvin-bot]

@DylanDylann @alexpensify @DylanDylann 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]

Payment Summary

Upwork Job

• ROLE: @DylanDylann paid $250 via Upwork
• ROLE: @thelullabyy paid $250 via Upwork

BugZero Checklist (@alexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1865065766629964229/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[alexpensify]

@thelullabyy - I'm having trouble finding you in Upwork. Please apply for the job in Upwork, and I can complete the payment process. Thanks!

[DylanDylann]

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 (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 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: Feature: Create Deactivate card logic #45703 (comment)

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

• [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:

• Expensify Card feature is enabled.
• Users have assigned themselves a virtual card.

Test:

1. Go to workspace settings > Expensify Card.
2. Click on the virtual card.
3. Click Deactivate card.
4. Deactivate the card.
5. Make sure the App navigates to the Company Card Page without displaying not found page
6. Click the browser forward button.
7. Make sure: The not here page opens because the card is deactivated.

Do we agree 👍 or 👎

[thelullabyy]

@thelullabyy - I'm having trouble finding you in Upwork. Please apply for the job in Upwork, and I can complete the payment process. Thanks!

@alexpensify Applied!

[alexpensify]

Thanks, I've sent offers to @thelullabyy and @DylanDylann in Upwork. Please accept and I can complete the payment process.

[DylanDylann]

@alexpensify Accepted, ty!

[alexpensify]

All set and closing, everyone has been paid via Upwork. Since I'm OOO until January 3, I'm going to close and work on the QA step when I'm back online.