[$250] Expensify Card - "Add shipping details" button still appears when the card is deactivated

IuliiaHerets commented 4 days ago

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: 9.0.48-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): applausetester+kh081006@applause.expensifail.com Issue reported by: Applause Internal Team

Action Performed:

Precondition:

User has assigned a physical card to self.
Private details have not been added.

Go to staging.new.expensify.com
Go to workspace settings > Expensify Card.
Click on the Expensify Card that is assigned to yourself.
Click Deactivate card.
Deactivate the card.
Go to workspace chat.

Expected Result:

"Add shipping details" button will not appear since the card is deactivated.

Actual Result:

"Add shipping details" button still appears when the card is deactivated.

Workaround:

Unknown

Platforms:

[x] Android: Native
[x] Android: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/e865ffc9-e73e-432f-92d7-8e48f613abbd

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021846577574853745828
Upwork Job ID: 1846577574853745828
Last Price Increase: 2024-10-16

Issue Owner

Current Issue Owner: @hoangzinh

melvin-bot[bot] commented 4 days ago

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

IuliiaHerets commented 4 days ago

We think that this bug might be related to #wave-collect - Release 2

IuliiaHerets commented 4 days ago

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

truph01 commented 4 days ago

Edited by proposal-police: This proposal was edited at 2024-10-16 16:42:03 UTC.

Proposal

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

"Add shipping details" button still appears when the card is deactivated.

What is the root cause of that problem?

We show the "Add shipping card" butotn without checking if the card is deactivated or not:

https://github.com/Expensify/App/blob/e4969b22e7dbb1f6a200cc587ced4ab665415c0e/src/components/ReportActionItem/IssueCardMessage.tsx#L40

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

Should check whether the card is existed/actived or not:


const cardIssuedActionOriginalMessage = ReportActionsUtils.isActionOfType(
    action,
    CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED,
    CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL,
    CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS,
)
    ? ReportActionsUtils.getOriginalMessage(action)
    : undefined;
const cardID = cardIssuedActionOriginalMessage?.cardID ?? -1;
const isPolicyAdmin = PolicyUtils.isPolicyAdmin(PolicyUtils.getPolicy(policyID));
const card = isPolicyAdmin ? cardsList?.[cardID] : cardList[cardID];
const shouldShowAddMissingDetailsButton = !isEmptyObject(card) && action?.actionName === CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS && missingDetails && isAssigneeCurrentUser;



### What alternative solutions did you explore? (Optional)

<!---
ATTN: Contributor+

You are the first line of defense in making sure every proposal has a clear and easily understood problem with a "root cause". Do not approve any proposals that lack a satisfying explanation to the first two prompts. It is CRITICALLY important that we understand the root cause at a minimum even if the solution doesn't directly address it. When we avoid this step we can end up solving the wrong problems entirely or just writing hacks and workarounds.

Instructions for how to review a proposal:

1. Address each contributor proposal one at a time and address each part of the question one at a time e.g. if a solution looks acceptable, but the stated problem is not clear then you should provide feedback and make suggestions to improve each prompt before moving on to the next. Avoid responding to all sections of a proposal at once. Move from one question to the next each time asking the contributor to "Please update your original proposal and tag me again when it's ready for review".

2. Limit excessive conversation and moderate issues to keep them on track. If someone is doing any of the following things please kindly and humbly course-correct them:

- Posting PRs.
- Posting large multi-line diffs (this is basically a PR).
- Skipping any of the required questions.
- Not using the proposal template at all.
- Suggesting that an existing issue is related to the current issue before a problem or root cause has been established.
- Excessively wordy explanations.

3. Choose the first proposal that has a reasonable answer to all the required questions.
-->

zanyrenney commented 3 days ago

Agreed, this button shouldn't be there!

melvin-bot[bot] commented 1 day ago

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

melvin-bot[bot] commented 1 day ago

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

SWS-5007 commented 1 day ago

Hi, Here is my suggestion.

Check card Status: Before rendering the "Add shipping details" button, we should check the status of the card if it is active or deactivated. We can add conditional statement that checks the card's activate status.
Check Backend: We should ensure that Backend properly sends the card's status in the response.

Modify Frontend: In the Frontend, we can update code handling the display of button like below:


// Assuming `card` is the card object and `card.status` indicates if it's active
const shouldShowAddShippingDetailsButton = (card) => {
return card.status === 'active' && !card.hasShippingDetails;
};

if (shouldShowAddShippingDetailsButton(card)) { // Show the button } else { // Hide the button }



4. Update Existing Logic:
Maybe, we can add an additional condition in the existing card rendering functions or React Components.

If we discuss more details about current issue and help me to check your codebase as soon, I can provide with better solution.
Good luck!

melvin-bot[bot] commented 1 day ago

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

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