[$250] [Workspace Feeds] After assigning a card, the card does not show in member section

[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: 9.0.24-1 Reproducible in staging?: Y Reproducible in production?: Y 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): applausetester+en@applause.expensifail.com Issue reported by: Applause - Internal Team

Issue found when executing PR https://github.com/Expensify/App/pull/47396

Action Performed:

1. Access staging.new.expensify.com
2. Sign into a valid account
3. Click on Profile > WorkSpace > Invite a member
4. Click on the invited member and click on assign card and complete the flow

Expected Result:

User expects that after the flow is completed, that the card shows up in that member section

Actual Result:

After completing the flow, the card does not show up in member section

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/5d93af64-bac1-406a-ad80-8fbcbc08cb75

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014b6a6971e6ae4d8c
• Upwork Job ID: 1828591152891007380
• Last Price Increase: 2024-08-28
• Automatic offers:
• DylanDylann | Reviewer | 103717038

Issue Owner

Current Issue Owner: @mananjadhav

[melvin-bot[bot]]

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

[daledah]

Proposal

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

• After completing the flow, the card does not show up in member section

What is the root cause of that problem?

• When pressing on the CTA button, we call:

https://github.com/Expensify/App/blob/0c8455280c738a5db596f34409a0a3177e682e7f/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx#L37-L41

• As we can see, we call the API then close the modal right after that, so if the API is still in progress or the API is failed, user doesn't know about that.

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

When the API call begins, we should keep the modal open and show a loading state. If the API call is successful, we can then close the modal. If it fails, we should display an error message above the CTA button:

• When calling API in there and there, add a onyxData:

  const optimisticData: OnyxUpdate[] = [
      {
          key: ONYXKEYS.FORMS.ISSUE_NEW_CARD_FORM, // Can use existed ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD
          onyxMethod: Onyx.METHOD.MERGE,
          value: {
              isLoading: true,
          },
      },
  ];
  
  const successData: OnyxUpdate[] = [
      {
          key: ONYXKEYS.FORMS.ISSUE_NEW_CARD_FORM,
          onyxMethod: Onyx.METHOD.MERGE,
          value: {
              isLoading: false,
          },
      },
  ];
  
  const failureData: OnyxUpdate[] = [
      {
          key: ONYXKEYS.FORMS.ISSUE_NEW_CARD_FORM,
          onyxMethod: Onyx.METHOD.MERGE,
          value: {
              isLoading: false,
              error: 'There is an error',
          },
      },
  ];

• Remove: https://github.com/Expensify/App/blob/0c8455280c738a5db596f34409a0a3177e682e7f/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx#L39-L40

• Create a logic to close modal and display error:

  const [formData] = useOnyx(ONYXKEYS.FORMS.ISSUE_NEW_CARD_FORM);
  const isLoading = formData ? formData.isLoading : false;
  const error = formData ? formData.error : undefined;
  const prevIsLoading = usePrevious(isLoading);
  
  // Close the modal when API is called successfully.
  useEffect(() => {
      if (isLoading === false && prevIsLoading === true && !error) {
          Navigation.goBack();
          Card.clearIssueNewCardFlow();
      }
  }, [isLoading, prevIsLoading, error]);
  
  // Clear the form error when focusing.
  useFocusEffect(
      useCallback(() => {
          Onyx.merge(ONYXKEYS.FORMS.ISSUE_NEW_CARD_FORM, {error: ''});
      }, []),
  );

• Update button component so that it can display the loading and error state: https://github.com/Expensify/App/blob/0c8455280c738a5db596f34409a0a3177e682e7f/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx#L107

  
                  <FormAlertWithSubmitButton
                      buttonText={translate('workspace.card.issueCard')}
                      enabledWhenOffline={false}
                      isAlertVisible={!!error}
                      isLoading={!!isLoading}
                      message={error}
                      onSubmit={submit}
                      enterKeyEventListenerPriority={1}

  What alternative solutions did you explore? (Optional)

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[trjExpensify]

@koko57 @mountiny @DylanDylann @allgandalf is this one known? 🤔

[koko57]

@trjExpensify no it wasn't known before - earlier we navigated back to the Expensify Crad page. Looks like there's some problem with creating the card, bc the card doesn't appear in the section even after some time. @mountiny we should think of the best way to handle errors here and where we want to show the error - in the flow or in the Card Section after the flow is closed

[DylanDylann]

Looks like there's some problem with creating the card, bc the card doesn't appear in the section even after some time

I also see that

[melvin-bot[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

[mountiny]

What I see in the logs for this applause user is that the business is not provisioned. So something must have gone wrong during the setup for them.

@koko57 @DylanDylann are you able to repro this issue?

[mountiny]

https://github.com/user-attachments/assets/0d5333fb-8dca-4152-9b72-9cf9f2757a96

I kinda think we can close this because on latest main we take you to the expensify cards page so this is not really valid. It was failing for the due to wrong setup which is hopefully fixed now

[koko57]

@mountiny actually it shouldn't take to the Expensify Card page - it was changed in https://github.com/Expensify/App/pull/47844 (it fixes https://github.com/Expensify/App/issues/46305) so was this change mistakenly reverted?

[mountiny]

@koko57 I could not find this in the design doc, I will ask in Slack

[mountiny]

https://expensify.slack.com/archives/C036QM0SLJK/p1724848404134659