From 549d1e2c0e1748b893a676367a9487425b836c9b Mon Sep 17 00:00:00 2001 From: Github Date: Mon, 7 Oct 2024 13:54:07 +0200 Subject: [PATCH 1/4] Fix receipt upload size issue --- src/CONST.ts | 2 ++ src/libs/fileDownload/FileUtils.ts | 2 +- src/pages/iou/request/step/IOURequestStepScan/index.native.tsx | 2 +- src/pages/iou/request/step/IOURequestStepScan/index.tsx | 2 +- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 25ba86ee3e1a..dae05fd24b62 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -206,6 +206,8 @@ const CONST = { API_ATTACHMENT_VALIDATIONS: { // 24 megabytes in bytes, this is limit set on servers, do not update without wider internal discussion MAX_SIZE: 25165824, + // 10 megabytes in bytes, this is limit set on servers for receipt images, do not update without wider internal discussion + RECEIPT_MAX_SIZE: 10485760, // An arbitrary size, but the same minimum as in the PHP layer MIN_SIZE: 240, diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts index 9a54a3d6b14f..f209e46930cb 100644 --- a/src/libs/fileDownload/FileUtils.ts +++ b/src/libs/fileDownload/FileUtils.ts @@ -325,7 +325,7 @@ const getImageDimensionsAfterResize = (file: FileObject) => }); const resizeImageIfNeeded = (file: FileObject) => { - if (!file || !Str.isImage(file.name ?? '') || (file?.size ?? 0) <= CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { + if (!file || !Str.isImage(file.name ?? '') || (file?.size ?? 0) <= CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE) { return Promise.resolve(file); } return getImageDimensionsAfterResize(file).then(({width, height}) => getImageManipulator({fileUri: file.uri ?? '', width, height, fileName: file.name ?? '', type: file.type})); diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index a5b473e6f649..c85ed218cf69 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -184,7 +184,7 @@ function IOURequestStepScan({ return false; } - if (!Str.isImage(file.name ?? '') && (file?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { + if (!Str.isImage(file.name ?? '') && (file?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE) { Alert.alert(translate('attachmentPicker.attachmentTooLarge'), translate('attachmentPicker.sizeExceeded')); return false; } diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 6d9c2fd303c5..f9aecdd73a51 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -211,7 +211,7 @@ function IOURequestStepScan({ return false; } - if (!Str.isImage(file.name ?? '') && (file?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { + if (!Str.isImage(file.name ?? '') && (file?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE) { setUploadReceiptError(true, 'attachmentPicker.attachmentTooLarge', 'attachmentPicker.sizeExceeded'); return false; } From ba54c20f21da3cce004fd49b5e836e83c3077c97 Mon Sep 17 00:00:00 2001 From: Github Date: Mon, 7 Oct 2024 18:38:08 +0200 Subject: [PATCH 2/4] fix eslint check --- .../step/IOURequestStepScan/index.native.tsx | 31 +++++-------------- .../request/step/IOURequestStepScan/index.tsx | 26 +++++----------- .../request/step/IOURequestStepScan/types.ts | 18 ++--------- 3 files changed, 17 insertions(+), 58 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index c85ed218cf69..129521c43d4c 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -3,7 +3,7 @@ import {Str} from 'expensify-common'; import React, {useCallback, useMemo, useRef, useState} from 'react'; import {ActivityIndicator, Alert, AppState, InteractionManager, View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import {RESULTS} from 'react-native-permissions'; import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withDelay, withSequence, withSpring, withTiming} from 'react-native-reanimated'; import type {Camera, PhotoFile, Point} from 'react-native-vision-camera'; @@ -23,6 +23,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; +import usePolicy from '@hooks/usePolicy'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as FileUtils from '@libs/fileDownload/FileUtils'; @@ -43,19 +44,15 @@ import ROUTES from '@src/ROUTES'; import type {Receipt} from '@src/types/onyx/Transaction'; import CameraPermission from './CameraPermission'; import NavigationAwareCamera from './NavigationAwareCamera/Camera'; -import type {IOURequestStepOnyxProps, IOURequestStepScanProps} from './types'; +import type IOURequestStepScanProps from './types'; function IOURequestStepScan({ report, - policy, - user, route: { params: {action, iouType, reportID, transactionID, backTo}, }, transaction, - personalDetails, currentUserPersonalDetails, - skipConfirmation, }: IOURequestStepScanProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -68,6 +65,10 @@ function IOURequestStepScan({ const camera = useRef(null); const [flash, setFlash] = useState(false); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); + const policy = usePolicy(report?.policyID); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`); + const [user] = useOnyx(ONYXKEYS.USER); const [cameraPermissionStatus, setCameraPermissionStatus] = useState(null); const [didCapturePhoto, setDidCapturePhoto] = useState(false); const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); @@ -617,23 +618,7 @@ function IOURequestStepScan({ IOURequestStepScan.displayName = 'IOURequestStepScan'; -const IOURequestStepScanWithOnyx = withOnyx({ - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - skipConfirmation: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`; - }, - }, - user: { - key: ONYXKEYS.USER, - }, -})(IOURequestStepScan); +const IOURequestStepScanWithOnyx = IOURequestStepScan; const IOURequestStepScanWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepScanWithOnyx); // eslint-disable-next-line rulesdir/no-negated-variables diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index f9aecdd73a51..f0ea69d576cc 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -1,7 +1,7 @@ import {Str} from 'expensify-common'; import React, {useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState} from 'react'; import {ActivityIndicator, PanResponder, PixelRatio, View} from 'react-native'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type Webcam from 'react-webcam'; import type {TupleToUnion} from 'type-fest'; import Hand from '@assets/images/hand.svg'; @@ -21,6 +21,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Text from '@components/Text'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; +import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTabNavigatorFocus from '@hooks/useTabNavigatorFocus'; import useTheme from '@hooks/useTheme'; @@ -45,18 +46,15 @@ import ROUTES from '@src/ROUTES'; import type {Receipt} from '@src/types/onyx/Transaction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import NavigationAwareCamera from './NavigationAwareCamera/WebCamera'; -import type {IOURequestStepOnyxProps, IOURequestStepScanProps} from './types'; +import type IOURequestStepScanProps from './types'; function IOURequestStepScan({ report, - policy, route: { params: {action, iouType, reportID, transactionID, backTo}, }, transaction, - personalDetails, currentUserPersonalDetails, - skipConfirmation, }: Omit) { const theme = useTheme(); const styles = useThemeStyles(); @@ -80,6 +78,9 @@ function IOURequestStepScan({ const getScreenshotTimeoutRef = useRef(null); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); + const policy = usePolicy(report?.policyID); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`); const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); const [videoConstraints, setVideoConstraints] = useState(); @@ -742,20 +743,7 @@ function IOURequestStepScan({ IOURequestStepScan.displayName = 'IOURequestStepScan'; -const IOURequestStepScanWithOnyx = withOnyx, Omit>({ - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - skipConfirmation: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`; - }, - }, -})(IOURequestStepScan); +const IOURequestStepScanWithOnyx = IOURequestStepScan; const IOURequestStepScanWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepScanWithOnyx); // eslint-disable-next-line rulesdir/no-negated-variables diff --git a/src/pages/iou/request/step/IOURequestStepScan/types.ts b/src/pages/iou/request/step/IOURequestStepScan/types.ts index 0b130a795073..88cef86dbc43 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/types.ts +++ b/src/pages/iou/request/step/IOURequestStepScan/types.ts @@ -4,24 +4,10 @@ import type {WithWritableReportOrNotFoundProps} from '@pages/iou/request/step/wi import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; -type IOURequestStepOnyxProps = { - user: OnyxEntry; - - /** Personal details of all users */ - personalDetails: OnyxEntry; - - /** The policy which the user has access to and which the report is tied to */ - policy: OnyxEntry; - - /** Whether the confirmation step should be skipped */ - skipConfirmation: OnyxEntry; -}; - -type IOURequestStepScanProps = IOURequestStepOnyxProps & - WithCurrentUserPersonalDetailsProps & +type IOURequestStepScanProps = WithCurrentUserPersonalDetailsProps & WithWritableReportOrNotFoundProps & { /** Holds data related to Money Request view state, rather than the underlying Money Request data. */ transaction: OnyxEntry; }; -export type {IOURequestStepOnyxProps, IOURequestStepScanProps}; +export default IOURequestStepScanProps; From cc493e062d8ed0d2d2c9e648ace98106787ad51d Mon Sep 17 00:00:00 2001 From: Github Date: Tue, 8 Oct 2024 16:58:27 +0200 Subject: [PATCH 3/4] fallback transactionId --- src/pages/iou/request/step/IOURequestStepScan/index.native.tsx | 2 +- src/pages/iou/request/step/IOURequestStepScan/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index 129521c43d4c..8a1a34fa2aed 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -67,7 +67,7 @@ function IOURequestStepScan({ const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); const policy = usePolicy(report?.policyID); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); - const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? -1}`); const [user] = useOnyx(ONYXKEYS.USER); const [cameraPermissionStatus, setCameraPermissionStatus] = useState(null); const [didCapturePhoto, setDidCapturePhoto] = useState(false); diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index f0ea69d576cc..0b90598e9c7f 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -80,7 +80,7 @@ function IOURequestStepScan({ const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); const policy = usePolicy(report?.policyID); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); - const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? -1}`); const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); const [videoConstraints, setVideoConstraints] = useState(); From 5141a8d3013b4fdc5bfb6496ad31afeb7028e19a Mon Sep 17 00:00:00 2001 From: Github Date: Wed, 9 Oct 2024 10:00:15 +0200 Subject: [PATCH 4/4] small fix --- src/CONST.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/CONST.ts b/src/CONST.ts index dae05fd24b62..d9b7f6849fdd 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -206,6 +206,7 @@ const CONST = { API_ATTACHMENT_VALIDATIONS: { // 24 megabytes in bytes, this is limit set on servers, do not update without wider internal discussion MAX_SIZE: 25165824, + // 10 megabytes in bytes, this is limit set on servers for receipt images, do not update without wider internal discussion RECEIPT_MAX_SIZE: 10485760,