Merge pull request #51709 from truph01/fix/50601

fix: Update second Allow location access modal on web
Expensify · Nov 19, 2024 · f8819c5 · f8819c5
2 parents 14ca237 + 5f27060
commit f8819c5
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git a/src/components/LocationPermissionModal/index.android.tsx b/src/components/LocationPermissionModal/index.android.tsx
@@ -50,15 +50,15 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
                 setHasError(true);
                 return;
             } else {
-                onDeny(status);
+                onDeny();
             }
             setShowModal(false);
             setHasError(false);
         });
     });
 
     const skipLocationPermission = () => {
-        onDeny(RESULTS.DENIED);
+        onDeny();
         setShowModal(false);
         setHasError(false);
     };

diff --git a/src/components/LocationPermissionModal/index.tsx b/src/components/LocationPermissionModal/index.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {Linking} from 'react-native';
 import {RESULTS} from 'react-native-permissions';
 import ConfirmModal from '@components/ConfirmModal';
@@ -39,10 +39,10 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
         if (hasError) {
             if (Linking.openSettings) {
                 Linking.openSettings();
+            } else {
+                onDeny?.();
             }
             setShowModal(false);
-            setHasError(false);
-            resetPermissionFlow();
             return;
         }
         cb();
@@ -54,7 +54,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
                 if (status === RESULTS.GRANTED || status === RESULTS.LIMITED) {
                     onGrant();
                 } else {
-                    onDeny(status);
+                    onDeny();
                 }
             })
             .finally(() => {
@@ -64,7 +64,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
     });
 
     const skipLocationPermission = () => {
-        onDeny(RESULTS.DENIED);
+        onDeny();
         setShowModal(false);
         setHasError(false);
     };
@@ -81,15 +81,22 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
         setShowModal(false);
         resetPermissionFlow();
     };
+
+    const locationErrorMessage = useMemo(() => (isWeb ? 'receipt.allowLocationFromSetting' : 'receipt.locationErrorMessage'), [isWeb]);
+
     return (
         <ConfirmModal
+            shouldShowCancelButton={!(isWeb && hasError)}
+            onModalHide={() => {
+                setHasError(false);
+                resetPermissionFlow();
+            }}
             isVisible={showModal}
             onConfirm={grantLocationPermission}
             onCancel={skipLocationPermission}
             onBackdropPress={closeModal}
             confirmText={getConfirmText()}
             cancelText={translate('common.notNow')}
-            prompt={translate(hasError ? 'receipt.locationErrorMessage' : 'receipt.locationAccessMessage')}
             promptStyles={[styles.textLabelSupportingEmptyValue, styles.mb4]}
             title={translate(hasError ? 'receipt.locationErrorTitle' : 'receipt.locationAccessTitle')}
             titleContainerStyles={[styles.mt2, styles.mb0]}
@@ -100,6 +107,7 @@ function LocationPermissionModal({startPermissionFlow, resetPermissionFlow, onDe
             iconHeight={120}
             shouldCenterIcon
             shouldReverseStackedButtons
+            prompt={translate(hasError ? locationErrorMessage : 'receipt.locationAccessMessage')}
         />
     );
 }

diff --git a/src/components/LocationPermissionModal/types.ts b/src/components/LocationPermissionModal/types.ts
@@ -1,11 +1,9 @@
-import type {PermissionStatus} from 'react-native-permissions';
-
 type LocationPermissionModalProps = {
     /** A callback to call when the permission has been granted */
     onGrant: () => void;
 
     /** A callback to call when the permission has been denied */
-    onDeny: (permission: PermissionStatus) => void;
+    onDeny: () => void;
 
     /** Should start the permission flow? */
     startPermissionFlow: boolean;

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -795,6 +795,7 @@ const translations = {
         locationAccessMessage: 'Location access helps us keep your timezone and currency accurate wherever you go.',
         locationErrorTitle: 'Allow location access',
         locationErrorMessage: 'Location access helps us keep your timezone and currency accurate wherever you go.',
+        allowLocationFromSetting: `Location access helps us keep your timezone and currency accurate wherever you go. Please allow location access from your device's permission settings.`,
         dropTitle: 'Let it go',
         dropMessage: 'Drop your file here',
         flash: 'flash',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -789,6 +789,7 @@ const translations = {
         locationAccessMessage: 'El acceso a la ubicación nos ayuda a mantener tu zona horaria y moneda precisas dondequiera que vayas.',
         locationErrorTitle: 'Permitir acceso a la ubicación',
         locationErrorMessage: 'El acceso a la ubicación nos ayuda a mantener tu zona horaria y moneda precisas dondequiera que vayas.',
+        allowLocationFromSetting: `El acceso a la ubicación nos ayuda a mantener tu zona horaria y moneda precisas dondequiera que estés. Por favor, permite el acceso a la ubicación en la configuración de permisos de tu dispositivo.`,
         cameraErrorMessage: 'Se ha producido un error al hacer una foto. Por favor, inténtalo de nuevo.',
         dropTitle: 'Suéltalo',
         dropMessage: 'Suelta tu archivo aquí',