Merge branch 'main' into @chrispader/use-platform-stack-navigation-in…

…-app

android/app/build.gradle

@@ -110,8 +110,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009006707
-        versionName "9.0.67-7"
+        versionCode 1009006708
+        versionName "9.0.67-8"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

docs/articles/new-expensify/expenses-&-payments/Create-an-expense.md

@@ -168,6 +168,24 @@ Yes, you can edit an expense until it is paid. When an expense is submitted, the
 In Expensify, expense reports group expenses in a batch to be paid or reconciled. When a draft report is open, all new expenses are added to it. 
 
 Once a report is submitted, you can track the status from the **Search** section. Click the **View** button for a specific expense or expense report. The status is displayed at the top of the expense or report.
+
+**How can I enable camera permission for a website on mobile browsers?**
+
+**Google Chrome:**
+1. Open Chrome.
+2. To the right of the address bar, tap More icon > **Settings**.
+3. Tap **Site settings** > **Camera**.
+4. Tap to turn the microphone or camera on or off.
+    - If you find the site you want to use under **Blocked**, tap the site > **Allow**.
+5. Refresh the site.
+
+**Safari:**
+1. Open Safari.
+2. To the left of the address bar, tap More icon > **Site settings** > **Camera**.
+3. Tap **Allow** to grant permission.
+4. Tap **Done**.
+5. Refresh the site.
+
 {% include faq-end.md %}
 
 </div>

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.0.67.7</string>
+	<string>9.0.67.8</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.67.7</string>
+	<string>9.0.67.8</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>9.0.67</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.67.7</string>
+	<string>9.0.67.8</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "9.0.67-7",
+  "version": "9.0.67-8",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/CONST.ts

@@ -911,6 +911,8 @@ const CONST = {
     NEWHELP_URL: 'https://help.expensify.com',
     INTERNAL_DEV_EXPENSIFY_URL: 'https://www.expensify.com.dev',
     STAGING_EXPENSIFY_URL: 'https://staging.expensify.com',
+    DENIED_CAMERA_ACCESS_INSTRUCTIONS_URL:
+        'https://help.expensify.com/articles/new-expensify/expenses-&-payments/Create-an-expense#:~:text=How%20can%20I%20enable%20camera%20permission%20on%20mobile%20browser%3F',
     BANK_ACCOUNT_PERSONAL_DOCUMENTATION_INFO_URL:
         'https://community.expensify.com/discussion/6983/faq-why-do-i-need-to-provide-personal-documentation-when-setting-up-updating-my-bank-account',
     PERSONAL_DATA_PROTECTION_INFO_URL: 'https://community.expensify.com/discussion/5677/deep-dive-security-how-expensify-protects-your-information',

src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx

@@ -21,7 +21,7 @@ function AttachmentViewVideo({source, isHovered = false, shouldUseSharedVideoEle
             shouldUseSharedVideoElement={shouldUseSharedVideoElement && !shouldUseNarrowLayout}
             isVideoHovered={isHovered}
             videoDuration={duration}
-            style={[styles.w100, styles.h100]}
+            style={[styles.w100, styles.h100, styles.pb5]}
         />
     );
 }

src/components/SafeAreaConsumer/index.tsx

@@ -13,12 +13,14 @@ function SafeAreaConsumer({children}: SafeAreaConsumerProps) {
 
     return (
         <SafeAreaInsetsContext.Consumer>
-            {(insets) => {
-                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+            {(safeAreaInsets) => {
+                const insets = StyleUtils.getSafeAreaInsets(safeAreaInsets);
+                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+
                 return children({
                     paddingTop,
                     paddingBottom,
-                    insets: insets ?? undefined,
+                    insets,
                     safeAreaPaddingBottomStyle: {paddingBottom},
                 });
             }}

src/components/SelectionList/BaseSelectionList.tsx

@@ -88,6 +88,7 @@ function BaseSelectionList<TItem extends ListItem>(
         alternateTextNumberOfLines = 2,
         textInputRef,
         headerMessageStyle,
+        confirmButtonStyles,
         shouldHideListOnInitialRender = true,
         textInputIconLeft,
         sectionTitleStyles,
@@ -835,7 +836,7 @@ function BaseSelectionList<TItem extends ListItem>(
                             <Button
                                 success={!shouldUseDefaultTheme}
                                 large
-                                style={[styles.w100]}
+                                style={[styles.w100, confirmButtonStyles]}
                                 text={confirmButtonText || translate('common.confirm')}
                                 onPress={onConfirm}
                                 pressOnEnter

src/components/SelectionList/types.ts

@@ -464,6 +464,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Styles to apply to the header message */
     headerMessageStyle?: StyleProp<ViewStyle>;
 
+    /** Styles to apply to submit button */
+    confirmButtonStyles?: StyleProp<ViewStyle>;
+
     /** Text to display on the confirm button */
     confirmButtonText?: string;
 

src/hooks/useSafeAreaInsets/index.android.ts → src/hooks/useSafeAreaInsets.ts

@@ -1,15 +1,14 @@
 import type {EdgeInsets} from 'react-native-safe-area-context';
 // eslint-disable-next-line no-restricted-imports
 import {useSafeAreaInsets as useSafeAreaInsetsInternal} from 'react-native-safe-area-context';
-import StatusBar from '@libs/StatusBar';
+import useStyleUtils from './useStyleUtils';
 
 function useSafeAreaInsets(): EdgeInsets {
+    const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsetsInternal();
+    const adjustedInsets = StyleUtils.getSafeAreaInsets(insets);
 
-    return {
-        ...insets,
-        top: StatusBar.currentHeight ?? insets.top,
-    };
+    return adjustedInsets;
 }
 
 export default useSafeAreaInsets;

src/hooks/useStyledSafeAreaInsets.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useSafeAreaInsets from './useSafeAreaInsets';
 import useStyleUtils from './useStyleUtils';
 
 /**
@@ -21,15 +20,15 @@ import useStyleUtils from './useStyleUtils';
  *     // Use these values to style your component accordingly
  * }
  */
-function useStyledSafeAreaInsets() {
+function useStyledSafeAreaInsets(safeAreaInsetsPercentage?: number) {
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
 
-    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets, safeAreaInsetsPercentage);
     return {
         paddingTop,
         paddingBottom,
-        insets: insets ?? undefined,
+        insets,
         safeAreaPaddingBottomStyle: {paddingBottom},
     };
 }

src/languages/en.ts

@@ -793,6 +793,8 @@ const translations = {
         chooseReceipt: 'Choose a receipt to upload or forward a receipt to ',
         takePhoto: 'Take a photo',
         cameraAccess: 'Camera access is required to take pictures of receipts.',
+        deniedCameraAccess: "Camera access still hasn't been granted, please follow ",
+        deniedCameraAccessInstructions: 'these instructions',
         cameraErrorTitle: 'Camera error',
         cameraErrorMessage: 'An error occurred while taking a photo. Please try again.',
         locationAccessTitle: 'Allow location access',

src/languages/es.ts

@@ -788,6 +788,8 @@ const translations = {
         chooseReceipt: 'Elige un recibo para subir o reenvía un recibo a ',
         takePhoto: 'Haz una foto',
         cameraAccess: 'Se requiere acceso a la cámara para hacer fotos de los recibos.',
+        deniedCameraAccess: 'No se ha concedido el acceso a la cámara, siga ',
+        deniedCameraAccessInstructions: 'estas instrucciones',
         cameraErrorTitle: 'Error en la cámara',
         locationAccessTitle: 'Permitir acceso a la ubicación',
         locationAccessMessage: 'El acceso a la ubicación nos ayuda a mantener tu zona horaria y moneda precisas dondequiera que vayas.',

src/pages/NewChatConfirmPage.tsx

@@ -132,7 +132,10 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
     }, []);
 
     return (
-        <ScreenWrapper testID={NewChatConfirmPage.displayName}>
+        <ScreenWrapper
+            testID={NewChatConfirmPage.displayName}
+            includeSafeAreaPaddingBottom={false}
+        >
             <HeaderWithBackButton
                 title={translate('common.group')}
                 onBackButtonPress={navigateBack}

src/pages/NewChatPage.tsx

@@ -131,7 +131,7 @@ function NewChatPage() {
     const {isSmallScreenWidth} = useResponsiveLayout();
     const styles = useThemeStyles();
     const personalData = useCurrentUserPersonalDetails();
-    const {insets} = useStyledSafeAreaInsets();
+    const {insets, safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
     const selectionListRef = useRef<SelectionListHandle>(null);
 
@@ -252,14 +252,27 @@ function NewChatPage() {
             return (
                 <Button
                     onPress={() => toggleOption(item)}
-                    style={[styles.pl2]}
+                    style={[styles.pl2, insets.bottom ? styles.mb5 : undefined]}
                     text={translate('newChatPage.addToGroup')}
                     innerStyles={buttonInnerStyles}
                     small
                 />
             );
         },
-        [selectedOptions, setSelectedOptions, styles, translate],
+        [
+            insets.bottom,
+            selectedOptions,
+            setSelectedOptions,
+            styles.alignItemsCenter,
+            styles.buttonDefaultHovered,
+            styles.flexRow,
+            styles.mb5,
+            styles.ml0,
+            styles.ml5,
+            styles.optionSelectCircle,
+            styles.pl2,
+            translate,
+        ],
     );
 
     const createGroup = useCallback(() => {
@@ -297,7 +310,7 @@ function NewChatPage() {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            includeSafeAreaPaddingBottom={isOffline}
+            includeSafeAreaPaddingBottom={false}
             shouldShowOfflineIndicator={false}
             includePaddingTop={false}
             shouldEnablePickerAvoiding={false}
@@ -331,6 +344,7 @@ function NewChatPage() {
                     isLoadingNewOptions={!!isSearchingForReports}
                     initiallyFocusedOptionKey={firstKeyForList}
                     shouldTextInputInterceptSwipe
+                    confirmButtonStyles={insets.bottom ? [safeAreaPaddingBottomStyle, styles.mb5] : undefined}
                 />
                 {isSmallScreenWidth && (
                     <>

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -13,7 +13,6 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -41,7 +40,6 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
     const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {inputCallbackRef} = useAutoFocusInput();
     const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false);
-    const {isOffline} = useNetwork();
     const {canUseDefaultRooms} = usePermissions();
     const {activeWorkspaceID} = useActiveWorkspace();
 
@@ -114,7 +112,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
         <ScreenWrapper
             shouldEnableMaxHeight
             shouldShowOfflineIndicator={false}
-            includeSafeAreaPaddingBottom={isOffline}
+            includeSafeAreaPaddingBottom={false}
             testID="BaseOnboardingPersonalDetails"
             style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
         >

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

@@ -606,7 +606,7 @@ function IOURequestStepConfirmation({
             shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={IOURequestStepConfirmation.displayName}
         >
-            <View style={[styles.flex1, styles.mb6]}>
+            <View style={styles.flex1}>
                 <HeaderWithBackButton
                     title={headerTitle}
                     onBackButtonPress={navigateBack}

src/pages/iou/request/step/IOURequestStepDescription.tsx

@@ -140,6 +140,7 @@ function IOURequestStepDescription({
             shouldShowWrapper
             testID={IOURequestStepDescription.displayName}
             shouldShowNotFoundPage={shouldShowNotFoundPage}
+            includeSafeAreaPaddingBottom={false}
         >
             <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}

src/pages/iou/request/step/IOURequestStepDistance.tsx

@@ -543,7 +543,7 @@ function IOURequestStepDistance({
                         allowBubble
                         pressOnEnter
                         large
-                        style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
+                        style={[styles.w100, styles.mb5, styles.ph4, styles.flexShrink0]}
                         onPress={submitWaypoints}
                         text={buttonText}
                         isLoading={!isOffline && (isLoadingRoute || shouldFetchRoute || isLoading)}

src/pages/iou/request/step/IOURequestStepMerchant.tsx

@@ -113,7 +113,7 @@ function IOURequestStepMerchant({
             onBackButtonPress={navigateBack}
             shouldShowWrapper
             testID={IOURequestStepMerchant.displayName}
-            includeSafeAreaPaddingBottom
+            includeSafeAreaPaddingBottom={false}
         >
             <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}