[TS migration] Migrate 'IOUEditRequestReceipt' page to TypeScript

src/libs/Navigation/types.ts

@@ -429,6 +429,14 @@ type MoneyRequestNavigatorParamList = {
         iouType: string;
         reportID: string;
     };
+    [SCREENS.MONEY_REQUEST.STEP_SCAN]: {
+        action: ValueOf<typeof CONST.IOU.ACTION>;
+        iouType: ValueOf<typeof CONST.IOU.TYPE>;
+        transactionID: string;
+        reportID: string;
+        pageIndex: number;
+        backTo: Routes;
+    };
 };
 
 type NewTaskNavigatorParamList = {

src/libs/actions/IOU.ts

@@ -5236,9 +5236,9 @@ function replaceReceipt(transactionID: string, file: File, source: string) {
  * @param transactionID of the transaction to set the participants of
  * @param report attached to the transaction
  */
-function setMoneyRequestParticipantsFromReport(transactionID: string, report: OnyxTypes.Report) {
+function setMoneyRequestParticipantsFromReport(transactionID: string, report: OnyxEntry<OnyxTypes.Report>) {
     // If the report is iou or expense report, we should get the chat report to set participant for request money
-    const chatReport = ReportUtils.isMoneyRequestReport(report) ? ReportUtils.getReport(report.chatReportID) : report;
+    const chatReport = ReportUtils.isMoneyRequestReport(report) ? ReportUtils.getReport(report?.chatReportID) : report;
     const currentUserAccountID = currentUserPersonalDetails.accountID;
     const shouldAddAsReport = !isEmptyObject(chatReport) && ReportUtils.isSelfDM(chatReport);
     const participants: Participant[] =

src/libs/fileDownload/types.ts

@@ -8,7 +8,7 @@ type GetImageResolution = (url: File | Asset) => Promise<ImageResolution>;
 type ExtensionAndFileName = {fileName: string; fileExtension: string};
 type SplitExtensionFromFileName = (fileName: string) => ExtensionAndFileName;
 
-type ReadFileAsync = (path: string, fileName: string, onSuccess: (file: File) => void, onFailure: (error?: unknown) => void, fileType?: string) => Promise<File | void>;
+type ReadFileAsync = (path: string, fileName: string, onSuccess: (file: File) => void, onFailure?: (error?: unknown) => void, fileType?: string) => Promise<File | void>;
 
 type AttachmentDetails = {
     previewSourceURL: null | string;

src/pages/iou/ReceiptDropUI.js → src/pages/iou/ReceiptDropUI.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
@@ -9,25 +8,20 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
-const propTypes = {
-    /** Callback to execute when a file is dropped. */
-    onDrop: PropTypes.func.isRequired,
+type ReceiptDropUIProps = {
+    /** Function to execute when an item is dropped in the drop zone. */
+    onDrop: (event: DragEvent) => void;
 
-    /** Pixels the receipt image should be shifted down to match the non-drag view UI */
-    receiptImageTopPosition: PropTypes.number,
+    receiptImageTopPosition?: number;
 };
 
-const defaultProps = {
-    receiptImageTopPosition: 0,
-};
-
-function ReceiptDropUI({onDrop, receiptImageTopPosition}) {
+function ReceiptDropUI({onDrop, receiptImageTopPosition}: ReceiptDropUIProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     return (
         <DragAndDropConsumer onDrop={onDrop}>
             <View style={[styles.receiptDropOverlay, styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <View style={styles.receiptImageWrapper(receiptImageTopPosition)}>
+                <View style={styles.receiptImageWrapper(receiptImageTopPosition ?? 0)}>
                     <ImageSVG
                         src={ReceiptUpload}
                         contentFit="contain"
@@ -43,7 +37,5 @@ function ReceiptDropUI({onDrop, receiptImageTopPosition}) {
 }
 
 ReceiptDropUI.displayName = 'ReceiptDropUI';
-ReceiptDropUI.propTypes = propTypes;
-ReceiptDropUI.defaultProps = defaultProps;
 
 export default ReceiptDropUI;

src/pages/iou/request/step/IOURequestStepScan/CameraPermission/index.android.js → src/pages/iou/request/step/IOURequestStepScan/CameraPermission/index.android.tsx

@@ -1,4 +1,5 @@
 import {check, PERMISSIONS, request} from 'react-native-permissions';
+import type CameraPermissionModule from './types';
 
 function requestCameraPermission() {
     return request(PERMISSIONS.ANDROID.CAMERA);
@@ -9,4 +10,9 @@ function getCameraPermissionStatus() {
     return check(PERMISSIONS.ANDROID.CAMERA);
 }
 
-export {requestCameraPermission, getCameraPermissionStatus};
+const CameraPermission: CameraPermissionModule = {
+    requestCameraPermission,
+    getCameraPermissionStatus,
+};
+
+export default CameraPermission;

src/pages/iou/request/step/IOURequestStepScan/CameraPermission/index.ios.js → src/pages/iou/request/step/IOURequestStepScan/CameraPermission/index.ios.tsx

@@ -1,4 +1,5 @@
 import {check, PERMISSIONS, request} from 'react-native-permissions';
+import type CameraPermissionModule from './types';
 
 function requestCameraPermission() {
     return request(PERMISSIONS.IOS.CAMERA);
@@ -8,4 +9,9 @@ function getCameraPermissionStatus() {
     return check(PERMISSIONS.IOS.CAMERA);
 }
 
-export {requestCameraPermission, getCameraPermissionStatus};
+const CameraPermission: CameraPermissionModule = {
+    requestCameraPermission,
+    getCameraPermissionStatus,
+};
+
+export default CameraPermission;

src/pages/iou/request/step/IOURequestStepScan/CameraPermission/index.tsx

@@ -0,0 +1,8 @@
+import type CameraPermissionModule from './types';
+
+const CameraPermission: CameraPermissionModule = {
+    requestCameraPermission: undefined,
+    getCameraPermissionStatus: undefined,
+};
+
+export default CameraPermission;

src/pages/iou/request/step/IOURequestStepScan/CameraPermission/types.ts

@@ -0,0 +1,6 @@
+type CameraPermissionModule = {
+    requestCameraPermission: (() => Promise<string>) | undefined;
+    getCameraPermissionStatus: (() => Promise<string>) | undefined;
+};
+
+export default CameraPermissionModule;

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.native.js → src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.native.tsx

@@ -1,15 +1,11 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {ForwardedRef} from 'react';
 import {Camera} from 'react-native-vision-camera';
 import useTabNavigatorFocus from '@hooks/useTabNavigatorFocus';
-
-const propTypes = {
-    /* The index of the tab that contains this camera */
-    cameraTabIndex: PropTypes.number.isRequired,
-};
+import type {NavigationAwareCameraNativeProps} from './types';
 
 // Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
-const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}, ref) => {
+function NavigationAwareCamera({cameraTabIndex, ...props}: NavigationAwareCameraNativeProps, ref: ForwardedRef<Camera>) {
     const isCameraActive = useTabNavigatorFocus({tabIndex: cameraTabIndex});
 
     return (
@@ -21,9 +17,8 @@ const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}, ref)
             isActive={isCameraActive}
         />
     );
-});
+}
 
-NavigationAwareCamera.propTypes = propTypes;
 NavigationAwareCamera.displayName = 'NavigationAwareCamera';
 
-export default NavigationAwareCamera;
+export default React.forwardRef(NavigationAwareCamera);

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.js → src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.tsx

@@ -1,16 +1,13 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
+import type {Camera} from 'react-native-vision-camera';
 import Webcam from 'react-webcam';
 import useTabNavigatorFocus from '@hooks/useTabNavigatorFocus';
-
-const propTypes = {
-    /** The index of the tab that contains this camera */
-    cameraTabIndex: PropTypes.number.isRequired,
-};
+import type {NavigationAwareCameraProps} from './types';
 
 // Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
-const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}, ref) => {
+function NavigationAwareCamera({torchOn, onTorchAvailability, cameraTabIndex, ...props}: NavigationAwareCameraProps, ref: ForwardedRef<Webcam | Camera>) {
     const shouldShowCamera = useTabNavigatorFocus({
         tabIndex: cameraTabIndex,
     });
@@ -21,17 +18,14 @@ const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}, ref)
     return (
         <View>
             <Webcam
-                audio={false}
-                screenshotFormat="image/png"
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
-                ref={ref}
+                ref={ref as unknown as ForwardedRef<Webcam>}
             />
         </View>
     );
-});
+}
 
-NavigationAwareCamera.propTypes = propTypes;
 NavigationAwareCamera.displayName = 'NavigationAwareCamera';
 
-export default NavigationAwareCamera;
+export default React.forwardRef(NavigationAwareCamera);

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/types.ts

@@ -0,0 +1,19 @@
+import type {CameraProps} from 'react-native-vision-camera';
+import type {WebcamProps} from 'react-webcam';
+
+type NavigationAwareCameraProps = WebcamProps & {
+    /** Flag to turn on/off the torch/flashlight - if available */
+    torchOn?: boolean;
+
+    /** The index of the tab that contains this camera */
+    onTorchAvailability?: (torchAvailable: boolean) => void;
+
+    /** Callback function when media stream becomes available - user granted camera permissions and camera starts to work */
+    cameraTabIndex: number;
+};
+
+type NavigationAwareCameraNativeProps = CameraProps & {
+    cameraTabIndex: number;
+};
+
+export type {NavigationAwareCameraProps, NavigationAwareCameraNativeProps};