[HOLD for payment 2024-11-29] [$250] Update second `Allow location access` modal on web

[jamesdeanexpensify]

On web only, for the second Allow location access modal only (the one with the Got it button):

• Fix the bug where you can't submit after clicking Got it (see video below)
• Fix the bug where, after clicking the Got it button, the same button quickly flickers to say Continue (same video below)
• Update the copy on the modal slightly to:

Allow location access
Location access helps us keep your timezone and currency accurate wherever you go. Please allow location access from your device's permission settings.

• Remove the Not now button entirely because it serves no purpose in this case

2024-10-10_09-11-41.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021847227311681373401
• Upwork Job ID: 1847227311681373401
• Last Price Increase: 2024-10-25
• Automatic offers:
• alitoshmatov | Reviewer | 104624114
• truph01 | Contributor | 104624115

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

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

[truph01]

Edited by proposal-police: This proposal was edited at 2024-10-17 18:30:45 UTC.

Proposal

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

• Remove "Allow location access" modal on web

What is the root cause of that problem?

• When pressing on submit button, we check whether we should start a permission flow:
  

  App/src/pages/iou/request/step/IOURequestStepConfirmation.tsx

  Line 592 in 7bec576

  if (shouldStartLocationPermissionFlow) {

if so, the startPermissionFlow is set to true then this useEffect is called:

App/src/components/LocationPermissionModal/index.tsx

Lines 22 to 36 in 4c90d62

	useEffect(() => {
	if (!startPermissionFlow) {
	return;
	}
	getLocationPermission().then((status) => {
	if (status === RESULTS.GRANTED || status === RESULTS.LIMITED) {
	return onGrant();
	}
	setShowModal(true);
	setHasError(status === RESULTS.BLOCKED);
	});
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We only want to run this effect when startPermissionFlow changes
	}, [startPermissionFlow]);

• First, it checks the current permission. If it is RESULTS.GRANTED or RESULTS.LIMITED, it don't show any modal. Otherwise, the modal is shown.

• This modal is to:

pre-prompt the user for their location access instead of using the native prompt from Apple/Google that would penalize you if you asked for location access too many times. This way, we can prompt users with our own modal on mobile to get a response before the native prompt, avoiding any penalties if the answer is "no" but still allowing us to ask as many times as we want.

• When user chooses "Confirm" button, then the native prompt is shown. In this issue, we are going to remove pre-prompt.

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

• As I mentioned above, In this issue, we are going to remove pre-prompt. So the permission flow will be: Checking existing permission > displaying native prompt > sending expense instead of Checking existing permission > display custom pre-prompt > displaying native prompt > sending expense.

• To match the new flow, we can create a new index.website.ts, its logic is the same as index.ts, just need to update the useEffect:

App/src/components/LocationPermissionModal/index.tsx

Lines 22 to 36 in 4c90d62

	useEffect(() => {
	if (!startPermissionFlow) {
	return;
	}
	getLocationPermission().then((status) => {
	if (status === RESULTS.GRANTED || status === RESULTS.LIMITED) {
	return onGrant();
	}
	setShowModal(true);
	setHasError(status === RESULTS.BLOCKED);
	});
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We only want to run this effect when startPermissionFlow changes
	}, [startPermissionFlow]);

useEffect(() => {
    if (!startPermissionFlow) {
        return;
    }

    getLocationPermission().then((status) => {
        if (status === RESULTS.GRANTED || status === RESULTS.LIMITED) {
            return onGrant();
        }
        
        // If the user has previously denied the permission, we still need to show a modal
        // to inform them that they must go to the settings page to enable location permission.
        if (status === RESULTS.BLOCKED) {
            setShowModal(true);
            setHasError(status === RESULTS.BLOCKED);
        } else {
            // If the native permission prompt hasn't been shown before, show it now.
            grantLocationPermission();
        }
    });
    
    // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want this effect to run when startPermissionFlow changes.
}, [startPermissionFlow]);

What alternative solutions did you explore? (Optional)

Solution for new design:

1. Update:

App/src/components/LocationPermissionModal/index.tsx

Line 85 in 4c90d62

<ConfirmModal

        <ConfirmModal
            shouldShowCancelButton={!(isWeb && hasError)}
            onModalHide={() => {
                setHasError(false);
                resetPermissionFlow();
            }}

2. Update:

App/src/components/LocationPermissionModal/index.tsx

Lines 38 to 49 in 4c90d62

	const handledBlockedPermission = (cb: () => void) => () => {
	if (hasError) {
	if (Linking.openSettings) {
	Linking.openSettings();
	}
	setShowModal(false);
	setHasError(false);
	resetPermissionFlow();
	return;
	}
	cb();
	};

    const handledBlockedPermission = (cb: () => void) => () => {
        if (hasError) {
            if (Linking.openSettings) {
                Linking.openSettings();
            } else {
                onDeny?.();
            }
            setShowModal(false);
            return;
        }
        cb();
    };

3. Update the title:

App/src/components/LocationPermissionModal/index.tsx

Line 94 in 4c90d62

title={translate(hasError ? 'receipt.locationErrorTitle' : 'receipt.locationAccessTitle')}

and prompt:

App/src/components/LocationPermissionModal/index.tsx

Line 92 in 4c90d62

prompt={translate(hasError ? 'receipt.locationErrorMessage' : 'receipt.locationAccessMessage')}

to match the new design:

Allow location access
Location access helps us keep your timezone and currency accurate wherever you go. Please allow location access from your device's permission settings.

It is very straightforward:

            prompt={translate(hasError ? (isWeb ? {new_prompt} : 'receipt.locationErrorMessage') : 'receipt.locationAccessMessage')}
            title={translate(hasError ? (isWeb ? {new_title} : 'receipt.locationErrorTitle') : 'receipt.locationAccessTitle')}

[truph01]

@jamesdeanexpensify We don't want to display the pre-prompt but still display the native prompt on web, no?

[jamesdeanexpensify]

Yes, we would still show the native prompt on web. Thanks!

[twilight2294]

Edited by proposal-police: This proposal was edited at 2024-10-15 11:18:52 UTC.

Proposal

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

Remove "Allow location access" modal on web

What is the root cause of that problem?

Feature request

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

New Solution according to expected results:

1. Call skipLocationPermission when we click got it on web:
2. Introduce shouldShowCancelButton prop to ConfirmModal:

And update the locationErrorMessage message to Location access helps us keep your timezone and currency accurate wherever you go. Please allow location access from your device's permission settings., if this doesn't fit screen then minor style changes would also be needed. But

        <ConfirmModal
            onConfirm={(hasError && isWeb) ? skipLocationPermission : grantLocationPermission}
            shouldShowCancelButton={!(hasError && isWeb)}

These changes are enough to match the expected results in this case

[truph01]

@jamesdeanexpensify @Julesssss In my opinion, I don’t think we can fully hide the modal

Previously, when the user clicked the submit button and the native prompt hadn’t been shown yet, we displayed the pre-prompt modal:

If the user chose 'Continue,' but location permission wasn’t granted, the native prompt wouldn’t appear in the future. That's why, the next time, we display a modal to inform them that they need to manually enable location permission:

So, the 2nd modal should not be hidden.

[melvin-bot]

@Julesssss, @Christinadobrzyn Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Christinadobrzyn]

Thanks for the feedback @truph01!

Sorry, just catching up here, can you confirm the difference you are proposing? I think it's that we only show the "Not Now"/"Got it" prompt on the web and not the pre-prompt? Is that right?