[HOLD for payment 2024-12-05] [$250] First QAB missing tooltip for new user

[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: 9.0.57-0
Reproducible in staging?: y
Reproducible in production?: y
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: @ishpaul777
Slack conversation (hyperlinked to channel name): Expensify-bugs

Action Performed:

Sign up with new account
Open FAB, complete scan receipt flow
Open FAB again

Expected Result:

you see a QAB with tooltip

Actual Result:

you see a QAB without tooltip

Workaround:

unknown

this is the tooltip that should be visible ^

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

Recording.729.mp4

Expected tooltip:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021853953365086766977
• Upwork Job ID: 1853953365086766977
• Last Price Increase: 2024-11-06
• Automatic offers:
• rayane-djouah | Reviewer | 104869466

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[Nodebrute]

Proposal

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

First QAB missing tooltip for new user

What is the root cause of that problem?

This issue began after the changes in this PR. In this PR, we updated EducationalTooltip by adding a new variable, shouldShow, which included two additional checks: !modal?.willAlertModalBecomeVisible && !modal?.isVisible.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in a84cb31

const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

The problem arises because when we open the FAB, willAlertModalBecomeVisible is set to true, which causes shouldShow to be evaluated as false, preventing the tooltip from displaying.

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

We can change the condition so when isPopover is true we ignore these !modal?.willAlertModalBecomeVisible && !modal?.isVisible

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in a84cb31

const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

we can do something like this

const shouldShow = shouldRender && (modal?.isPopover || (!modal?.willAlertModalBecomeVisible && !modal?.isVisible));

Note: This is just pseudo code. We can achieve the same results by passing props

What alternative solutions did you explore? (Optional)

We can remove !modal?.willAlertModalBecomeVisible from here

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in a84cb31

const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

[bernhardoj]

Proposal

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

The QAB toolltip doesn't show for new user.

What is the root cause of that problem?

This happens after #49682 where we prevent the tooltip to show in a modal. The issue that they are trying to solve is that the tooltip doesn't hide when we open a modal (or RHP).

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in 10454f0

const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

But using that condition means that the tooltip isn't allowed to show in a modal.

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

Because we want to close the tooltip when a modal will show, we need to change the logic a bit. What we should do instead is, if a modal is previously not shown, but now is visible, then close the tooltip. We can do that inside this onyx subscription.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 32 to 41 in 10454f0

	const unsubscribeOnyxModal = onyxSubscribe({
	key: ONYXKEYS.MODAL,
	callback: (modalArg) => {
	if (modalArg === undefined) {
	return;
	}
	setModal(modalArg);
	},
	});
	return () => {

let prevModal: Modal;
const unsubscribeOnyxModal = onyxSubscribe({
    key: ONYXKEYS.MODAL,
    callback: (modal) => {
        if (modal === undefined) {
            return;
        }
        if (!prevModal) {
            prevModal = modal;
        } else if ((!prevModal.willAlertModalBecomeVisible && modal.willAlertModalBecomeVisible) || (!prevModal.isVisible && modal.isVisible)) {
            clearTimeout(showTimer.current);
            clearTimeout(autoCloseTimer.current);
            closeTooltip();
        }
    },
});

// If we want to replace above with useOnxy hooks (we use the above logic so it will re-render based on modal only when visible)
// const [modal] = useOnyx(ONYXKEYS.MODAL);
// const prevModal = usePrevious(modal)
// useEffect(() => {
//     if ((!prevModal?.willAlertModalBecomeVisible && modal?.willAlertModalBecomeVisible) || (!prevModal?.isVisible && modal?.isVisible)) {
//         clearTimeout(showTimer.current);
//         clearTimeout(autoCloseTimer.current);
//         closeTooltip();
//     }
// }, [modal, prevModal, closeTooltip]);

And when we close the tooltip, we need to make sure we cancel both the timeout of show and auto close/dismiss.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 79 to 85 in 10454f0

	// Automatically hide tooltip after 5 seconds if shouldAutoDismiss is true
	const timerID = setTimeout(() => {
	closeTooltip();
	}, 5000);
	return () => {
	clearTimeout(timerID);
	};

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 93 to 99 in 10454f0

	const timerID = setTimeout(() => {
	show.current?.();
	didShow.current = true;
	}, 500);
	return () => {
	clearTimeout(timerID);
	};

That's why we need to store it on a ref so we can use it later. Then, we can remove this shouldShow and this logic.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 26 in 10454f0

const shouldShow = !modal?.willAlertModalBecomeVisible && !modal?.isVisible && shouldRender;

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 73 to 77 in 10454f0

	// If the modal is open, hide the tooltip immediately and clear the timeout
	if (!shouldShow) {
	closeTooltip();
	return;
	}

Also, replaces all shouldShow with shouldRender back.

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

@ishpaul777 can you provide more details plz?

Sign up with new account

Which do you select here?

Open FAB, complete scan receipt flow

Track expense or Submit expense?

Thx

[ishpaul777]

Track expense or Submit expense?

Submit expense, not only scan receipt but the any of the submit flow will work