[HOLD for payment 2024-06-13] More feature Popup - Text under "not so fast" quickly disappears & slightly shrinks popup

[izarutskaya]

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: v1.4.78-2
Reproducible in staging?: Y
Reproducible in production?: N
Found when executing PR : #42662
Email or phone of affected tester (no customers): applausetester+emilio@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Access new.staging.expensify.com
2. Sign into a valid account
3. Open any workspace with an existing accounting integration - say, Xero or QBO..
4. Click on More Features.
5. Go to Organize section and try clicking on any of the switches.
6. Verify that you see a modal with the following content & click on "Cancel" (Observe the popup dimension size)

Expected Result:

User expects the popup to simply disappear instanly

Actual Result:

The popup ever so slightly resizes (The text under "not so fast" simply disappears). before the popup goes away. Making it to where it slightly changes size before going away.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6497028_1717133451594.Text_under_not_so_fast_disappears.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[melvin-bot]

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

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

[izarutskaya]

@CortneyOfstad 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.

[izarutskaya]

We think this issue might be related to the #collect project.

[izarutskaya]

Production

PROD.mp4

[MariaHCD]

Looks like this can be a followup from #42662

cc: @lakchote @mananjadhav

I don't think this should block the deploy

[MariaHCD]

@mananjadhav would you be able to handle this improvement?

[mananjadhav]

@MariaHCD Yes I can handle this as a follow up. Quick question though (may be even for @lakchote). I am using the same modal for Organize and Integrate section.

I had intentionally put this behavior because when I set the state to false for the modal, it doesn't immediately close the popup. If had the content organize description in if block and integrate description as false, then while closing the organize modal it would show up the integrate description momentarily. One solution I have is separate modals for both the sections. Are we okay with that?

[ShridharGoel]

Proposal

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

More feature Popup - Text under "not so fast" quickly disappears & slightly shrinks popup

What is the root cause of that problem?

The existing system updates the prompt when itemType changes:

const getConnectionWarningPrompt = useCallback(() => {
        switch (connectionWarningModalState.itemType) {
            case 'organize':
                return translate('workspace.moreFeatures.connectionsWarningModal.featureEnabledText');
            case 'integrate':
                return translate('workspace.moreFeatures.connectionsWarningModal.disconnectText');
            default:
                return undefined;
        }
    }, [connectionWarningModalState.itemType, translate]);

We have this logic in onCancel which updates the itemType:

setConnectionWarningModalState({
    isOpen: false,
    itemType: 'organize',
})

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

Add a new state:

    const [existingPrompt, setExistingPrompt] = useState(undefined);

Use this in prompt:

prompt={existingPrompt}

Add this useEffect:

useEffect(() => {
        switch (connectionWarningModalState.itemType) {
            case 'organize':
                setExistingPrompt(translate('workspace.moreFeatures.connectionsWarningModal.featureEnabledText'));
            case 'integrate':
                setExistingPrompt(translate('workspace.moreFeatures.connectionsWarningModal.disconnectText'));
        }
    }, [connectionWarningModalState.itemType, translate]);

[ShridharGoel]

@mananjadhav @lakchote Any chances to make this external?

[MariaHCD]

One solution I have is separate modals for both the sections. Are we okay with that?

@mananjadhav If separate modals is the only way to implement this improvement, I think it should be fine. cc: @lakchote for thoughts too.

[MariaHCD]

@ShridharGoel Thanks for the proposal but I think we'll likely keep this assigned to @mananjadhav since it is followup polish from #42662

[mananjadhav]

@ShridharGoel Thanks for the proposal but I think we'll likely keep this assigned to @mananjadhav since it is followup polish from #42662

Yes. This need not be external.

One solution I have is separate modals for both the sections. Are we okay with that?

@mananjadhav If separate modals is the only way to implement this improvement, I think it should be fine. cc: @lakchote for thoughts too.

I wouldn't say the only way. We would anyway need to add some or the other state variable to track it, then why not just keep the modals separate, instead of complicating it with multiple state or side effect checks.

[MariaHCD]

Keeping it simple sounds good to me 👍🏼

[lakchote]

I do agree with both of you @MariaHCD @mananjadhav , let's not complicate it and bloat code with different states/checks. I'm in favor of the separate modals 👍

[mananjadhav]

I added a PR but i have some power issues. I’ll finish the checklist as soon as I have it back.

[mananjadhav]

@MariaHCD, @lakchote is OOO, could you take a look at this PR?

[MariaHCD]

Yes, can do 👀

[MariaHCD]

Merged the PR: #42919

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

• [Wave Collect] [Xero] Remove text jitter for More Features modal #42919

If no regressions arise, payment will be issued on 2024-06-13. 🎊

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

• @mananjadhav requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav] The PR that introduced the bug has been identified. Link to the PR:
• [@mananjadhav] 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:
• [@mananjadhav] A discussion in #expensify-bugs 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:
• [@mananjadhav] Determine if we should create a regression test for this bug.
• [@mananjadhav] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@CortneyOfstad] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[CortneyOfstad]

@mananjadhav when you have a chance can you complete the checklist above so there is no delay in issuing payment? Thanks!

[mananjadhav]

@CortneyOfstad There won't be any payout for this issue. This was more of a follow up from #42662 which was worked by me only.

No further action needed here. Just need to wait for the regression period and close it out.

[CortneyOfstad]

Sounds good @mananjadhav! Thanks!