[$250] No option to report physical card damaged or stolen before it's activated

[m-natarajan]

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:
Reproducible in staging?:
Reproducible in production?:
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @twisterdotcom
Slack conversation (hyperlinked to channel name): expensify-bugs

Action Performed:

1. Join a workspace with the Expensify Card enabled
2. Be assigned a physical Expensify Card
3. Wait for it to arrive (but not really)
4. See there is no option to mark as damaged or lost

Expected Result:

See the option to "Report physical card loss/damage" regardless of whether it's arrived or not.
This directs to the url: https://new.expensify.com/settings/wallet/card/${cardID}/report-card-lost-or-damaged

Actual Result:

The option only appears AFTER a card has been activated (unlike oldDot where it exists constantly)

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• 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/~021880049924929110511
• Upwork Job ID: 1880049924929110511
• Last Price Increase: 2025-01-17

Issue Owner

Current Issue Owner: @paultsimura

[melvin-bot]

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

[Shahidullah-Muffakir]

Proposal

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

No option to report physical card damaged or stolen before it's activated

What is the root cause of that problem?

We are only showing that link if card.state === CONST.EXPENSIFY_CARD.STATE.OPEN:

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

Line 255 in 58343c7

if (card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {

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

We can update the condition to still show the Report physical card loss / damage even if the card is in the NOT_ACTIVATED or STATE_DEACTIVATED state.
we can update it as:

Updated code

{physicalCards.map((card) => {
    if (card.state === CONST.EXPENSIFY_CARD.STATE.OPEN) {
        return (
            <>
                <MenuItemWithTopDescription
                    description={translate('cardPage.physicalCardNumber')}
                    title={CardUtils.maskCard(card?.lastFourPAN)}
                    interactive={false}
                    titleStyle={styles.walletCardNumber}
                />
                <MenuItem
                    title={translate('reportCardLostOrDamaged.report')}
                    icon={Expensicons.Flag}
                    shouldShowRightIcon
                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
                />
            </>
        );
    }
    
    if (card.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED || card.state === CONST.EXPENSIFY_CARD.STATE.STATE_DEACTIVATED) {
        return (
            <MenuItem
                title={translate('reportCardLostOrDamaged.report')}
                icon={Expensicons.Flag}
                shouldShowRightIcon
                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
            />
        );
    }

    // Return null if card is in any other state
    return null;
})}

To keep the code DRY, we can use a function to return MenuItem component

**Note**: We need to confirm that do we need to show it for the `STATE_DEACTIVATED`

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

What alternative solutions did you explore? (Optional)

[neonbhai]

Proposal

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

No option to report physical card damaged or stolen before it's activated

What is the root cause of that problem?

We only show the option to report the card if the state of the card is OPEN:

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

Lines 254 to 257 in 58343c7

	{physicalCards.map((card) => {
	if (card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
	return null;
	}

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

We will allow the report option to render for all card states. This follows oldDot behavior where it exists constantly.

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

Lines 266 to 271 in 58343c7

	<MenuItem
	title={translate('reportCardLostOrDamaged.report')}
	icon={Expensicons.Flag}
	shouldShowRightIcon
	onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
	/>

We will use code similar to this:

  {card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN && (
      <MenuItemWithTopDescription
          description={translate('cardPage.physicalCardNumber')}
          title={CardUtils.maskCard(card?.lastFourPAN)}
          interactive={false}
          titleStyle={styles.walletCardNumber}
      />
  )}
  {card.state !== CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED && (
      <MenuItem
          title={translate('reportCardLostOrDamaged.report')}
          icon={Expensicons.Flag}
          shouldShowRightIcon
          onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
      />
  )}

[huult]

Proposal

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

No option to report physical card damaged or stolen before it's activated

What is the root cause of that problem?

We only display the physical card number and the option to report a card as lost or damaged when the card state is OPEN.

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

Line 255 in d4ae0cd

if (card.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {

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

To resolve the issue, the Report physical card loss/damage option needs to be available regardless of the card’s activation state. We’ll update the code logic to check for any physical card state other than STATE_NOT_ISSUED and display the menu option accordingly.

{physicalCards.map((card) => {
    // Check if the card is in a valid state to show the option
    const validStatesForReporting = [
        CONST.EXPENSIFY_CARD.STATE.OPEN,
        CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED,
        CONST.EXPENSIFY_CARD.STATE.DEACTIVATED,
        CONST.EXPENSIFY_CARD.STATE.SUSPENDED,
        CONST.EXPENSIFY_CARD.STATE.CLOSED,
    ];

    if (!validStatesForReporting.includes(card.state)) {
        return null;
    }

    return (
        <>
            <MenuItemWithTopDescription
                description={translate('cardPage.physicalCardNumber')}
                title={CardUtils.maskCard(card?.lastFourPAN)}
                interactive={false}
                titleStyle={styles.walletCardNumber}
            />
            <MenuItem
                title={translate('reportCardLostOrDamaged.report')}
                icon={Expensicons.Flag}
                shouldShowRightIcon
                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED.getRoute(String(card.cardID)))}
            />
        </>
    );
})}

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

Add unit tests to verify the menu rendering for each state.

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.

[melvin-bot]

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

[melvin-bot]

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