Merge pull request #39875 from allroundexperts/fix-37736

Improve location permission handling
Expensify · Jul 11, 2024 · 74d16f0 · 74d16f0
2 parents 30462bc + e251d1e
commit 74d16f0
Show file tree

Hide file tree

Showing 17 changed files with 476 additions and 19 deletions.
diff --git a/...ts/images/simple-illustrations/simple-illustration__receipt-location-marker.svg b/...ts/images/simple-illustrations/simple-illustration__receipt-location-marker.svg
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1935,7 +1935,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - Turf
     - Yoga
-  - RNPermissions (3.9.3):
+  - RNPermissions (3.10.1):
     - glog
     - hermes-engine
     - RCT-Folly (= 2022.05.16.00)
@@ -2617,7 +2617,7 @@ SPEC CHECKSUMS:
   RNLiveMarkdown: f12157fc91b72e19705c9cc8c98034c4c1669d5a
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
   rnmapbox-maps: df8fe93dbd251f25022f4023d31bc04160d4d65c
-  RNPermissions: 0b61d30d21acbeafe25baaa47d9bae40a0c65216
+  RNPermissions: d2392b754e67bc14491f5b12588bef2864e783f3
   RNReactNativeHapticFeedback: 616c35bdec7d20d4c524a7949ca9829c09e35f37
   RNReanimated: 323436b1a5364dca3b5f8b1a13458455e0de9efe
   RNScreens: abd354e98519ed267600b7ee64fdcb8e060b1218

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -161,7 +161,7 @@
     "react-native-pager-view": "6.2.3",
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",
-    "react-native-permissions": "^3.9.3",
+    "react-native-permissions": "^3.10.0",
     "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#da50d2c5c54e268499047f9cc98b8df4196c1ddf",
     "react-native-plaid-link-sdk": "11.5.0",
     "react-native-qrcode-svg": "^6.2.0",

diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
@@ -14,8 +14,11 @@ import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
 import Header from './Header';
 import Icon from './Icon';
+import {Close} from './Icon/Expensicons';
 import ImageSVG from './ImageSVG';
+import {PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
+import Tooltip from './Tooltip';
 
 type ConfirmContentProps = {
     /** Title of the modal */
@@ -51,15 +54,36 @@ type ConfirmContentProps = {
     /** Icon to display above the title */
     iconSource?: IconAsset;
 
+    /** Fill color for the Icon */
+    iconFill?: string | false;
+
+    /** Icon width */
+    iconWidth?: number;
+
+    /** Icon height */
+    iconHeight?: number;
+
+    /** Should the icon be centered? */
+    shouldCenterIcon?: boolean;
+
     /** Whether to center the icon / text content */
     shouldCenterContent?: boolean;
 
+    /** Whether to show the dismiss icon */
+    shouldShowDismissIcon?: boolean;
+
     /** Whether to stack the buttons */
     shouldStackButtons?: boolean;
 
+    /** Whether to reverse the order of the stacked buttons */
+    shouldReverseStackedButtons?: boolean;
+
     /** Styles for title */
     titleStyles?: StyleProp<TextStyle>;
 
+    /** Styles for title container */
+    titleContainerStyles?: StyleProp<ViewStyle>;
+
     /** Styles for prompt */
     promptStyles?: StyleProp<TextStyle>;
 
@@ -85,13 +109,20 @@ function ConfirmContent({
     shouldDisableConfirmButtonWhenOffline = false,
     shouldShowCancelButton = false,
     iconSource,
+    iconFill,
     shouldCenterContent = false,
     shouldStackButtons = true,
     titleStyles,
     promptStyles,
     contentStyles,
     iconAdditionalStyles,
+    iconWidth = variables.appModalAppIconSize,
+    iconHeight = variables.appModalAppIconSize,
+    shouldCenterIcon = false,
+    shouldShowDismissIcon = false,
     image,
+    titleContainerStyles,
+    shouldReverseStackedButtons = false,
 }: ConfirmContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -116,19 +147,35 @@ function ConfirmContent({
             )}
 
             <View style={[styles.m5, contentStyles]}>
+                {shouldShowDismissIcon && (
+                    <View style={styles.alignItemsEnd}>
+                        <Tooltip text={translate('common.close')}>
+                            <PressableWithoutFeedback
+                                onPress={onCancel}
+                                role={CONST.ROLE.BUTTON}
+                                accessibilityLabel={translate('common.close')}
+                            >
+                                <Icon
+                                    fill={theme.icon}
+                                    src={Close}
+                                />
+                            </PressableWithoutFeedback>
+                        </Tooltip>
+                    </View>
+                )}
                 <View style={isCentered ? [styles.alignItemsCenter, styles.mb6] : []}>
-                    {typeof iconSource === 'function' && (
-                        <View style={[styles.flexRow, styles.mb3]}>
+                    {iconSource && (
+                        <View style={[shouldCenterIcon ? styles.justifyContentCenter : null, styles.flexRow, styles.mb3]}>
                             <Icon
                                 src={iconSource}
-                                fill={theme.icon}
-                                width={variables.appModalAppIconSize}
-                                height={variables.appModalAppIconSize}
+                                fill={iconFill === false ? undefined : iconFill ?? theme.icon}
+                                width={iconWidth}
+                                height={iconHeight}
                                 additionalStyles={iconAdditionalStyles}
                             />
                         </View>
                     )}
-                    <View style={[styles.flexRow, isCentered ? {} : styles.mb4]}>
+                    <View style={[styles.flexRow, isCentered ? {} : styles.mb4, titleContainerStyles]}>
                         <Header
                             title={title}
                             textStyles={titleStyles}
@@ -139,17 +186,25 @@ function ConfirmContent({
 
                 {shouldStackButtons ? (
                     <>
+                        {shouldShowCancelButton && shouldReverseStackedButtons && (
+                            <Button
+                                style={[styles.mt4, styles.noSelect]}
+                                onPress={onCancel}
+                                large
+                                text={cancelText || translate('common.no')}
+                            />
+                        )}
                         <Button
                             success={success}
                             danger={danger}
-                            style={[styles.mt4]}
+                            style={shouldReverseStackedButtons ? styles.mt3 : styles.mt4}
                             onPress={onConfirm}
                             pressOnEnter
                             large
                             text={confirmText || translate('common.yes')}
                             isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
                         />
-                        {shouldShowCancelButton && (
+                        {shouldShowCancelButton && !shouldReverseStackedButtons && (
                             <Button
                                 style={[styles.mt3, styles.noSelect]}
                                 onPress={onCancel}