Merge branch 'Expensify:main' into Migrate-ConfirmedRoute.js-componen…

…t-to-TypeScript
Expensify · Jan 7, 2024 · ae35725 · ae35725
2 parents 4d49c65 + d067f4b
commit ae35725
Show file tree

Hide file tree

Showing 45 changed files with 623 additions and 609 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -96,8 +96,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001042200
-        versionName "1.4.22-0"
+        versionCode 1001042202
+        versionName "1.4.22-2"
     }
 
     flavorDimensions "default"

diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.22.0</string>
+	<string>1.4.22.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.22.0</string>
+	<string>1.4.22.2</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.22-0",
+  "version": "1.4.22-2",
   "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.",

diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
@@ -32,7 +32,7 @@ const propTypes = {
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     /** Style for the container */
-    containerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+    touchableInputWrapperStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     /** Function to call to handle key presses in the text input */
     onKeyPress: PropTypes.func,
@@ -44,7 +44,7 @@ const defaultProps = {
     onSelectionChange: () => {},
     onKeyPress: () => {},
     style: {},
-    containerStyles: {},
+    touchableInputWrapperStyle: {},
 };
 
 function AmountTextInput(props) {
@@ -67,7 +67,7 @@ function AmountTextInput(props) {
             onSelectionChange={props.onSelectionChange}
             role={CONST.ROLE.PRESENTATION}
             onKeyPress={props.onKeyPress}
-            containerStyles={[...StyleUtils.parseStyleAsArray(props.containerStyles)]}
+            touchableInputWrapperStyle={props.touchableInputWrapperStyle}
         />
     );
 }

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -19,7 +19,6 @@ import fileDownload from '@libs/fileDownload';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -95,6 +94,9 @@ const propTypes = {
 
     /** Whether it is a receipt attachment or not */
     isReceiptAttachment: PropTypes.bool,
+
+    /** Whether the receipt can be replaced */
+    canEditReceipt: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -113,6 +115,7 @@ const defaultProps = {
     onCarouselAttachmentChange: () => {},
     isWorkspaceAvatar: false,
     isReceiptAttachment: false,
+    canEditReceipt: false,
 };
 
 function AttachmentModal(props) {
@@ -372,13 +375,9 @@ function AttachmentModal(props) {
         if (!props.isReceiptAttachment || !props.parentReport || !props.parentReportActions) {
             return [];
         }
-        const menuItems = [];
-        const parentReportAction = props.parentReportActions[props.report.parentReportActionID];
 
-        const canEdit =
-            ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, props.parentReport.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT, props.transaction) &&
-            !TransactionUtils.isDistanceRequest(props.transaction);
-        if (canEdit) {
+        const menuItems = [];
+        if (props.canEditReceipt) {
             menuItems.push({
                 icon: Expensicons.Camera,
                 text: props.translate('common.replace'),
@@ -393,7 +392,7 @@ function AttachmentModal(props) {
             text: props.translate('common.download'),
             onSelected: () => downloadAttachment(source),
         });
-        if (TransactionUtils.hasReceipt(props.transaction) && !TransactionUtils.isReceiptBeingScanned(props.transaction) && canEdit) {
+        if (TransactionUtils.hasReceipt(props.transaction) && !TransactionUtils.isReceiptBeingScanned(props.transaction) && props.canEditReceipt) {
             menuItems.push({
                 icon: Expensicons.Trashcan,
                 text: props.translate('receipt.deleteReceipt'),

diff --git a/src/components/HeaderPageLayout.js → src/components/HeaderPageLayout.tsx b/src/components/HeaderPageLayout.js → src/components/HeaderPageLayout.tsx
@@ -1,64 +1,62 @@
-import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
+import type {ReactNode} from 'react';
 import {ScrollView, View} from 'react-native';
-import _ from 'underscore';
+import type {StyleProp, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
-import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
+import type HeaderWithBackButtonProps from './HeaderWithBackButton/types';
 import ScreenWrapper from './ScreenWrapper';
 
-const propTypes = {
-    ...headerWithBackButtonPropTypes,
+type HeaderPageLayoutProps = ChildrenProps &
+    HeaderWithBackButtonProps & {
+        /** The background color to apply in the upper half of the screen. */
+        backgroundColor?: string;
 
-    /** Children to display in the lower half of the page (below the header section w/ an animation) */
-    children: PropTypes.node.isRequired,
+        /** A fixed footer to display at the bottom of the page. */
+        footer?: ReactNode;
 
-    /** The background color to apply in the upper half of the screen. */
-    backgroundColor: PropTypes.string,
+        /** The image to display in the upper half of the screen. */
+        headerContent?: ReactNode;
 
-    /** A fixed footer to display at the bottom of the page. */
-    footer: PropTypes.node,
+        /** Style to apply to the header image container */
+        headerContainerStyles?: StyleProp<ViewStyle>;
 
-    /** The image to display in the upper half of the screen. */
-    header: PropTypes.node,
+        /** Style to apply to the ScrollView container */
+        scrollViewContainerStyles?: StyleProp<ViewStyle>;
 
-    /** Style to apply to the header image container */
-    // eslint-disable-next-line react/forbid-prop-types
-    headerContainerStyles: PropTypes.arrayOf(PropTypes.object),
+        /** Style to apply to the children container */
+        childrenContainerStyles?: StyleProp<ViewStyle>;
 
-    /** Style to apply to the ScrollView container */
-    // eslint-disable-next-line react/forbid-prop-types
-    scrollViewContainerStyles: PropTypes.arrayOf(PropTypes.object),
+        /** Style to apply to the whole section container */
+        style?: StyleProp<ViewStyle>;
+    };
 
-    /** Style to apply to the children container */
-    // eslint-disable-next-line react/forbid-prop-types
-    childrenContainerStyles: PropTypes.arrayOf(PropTypes.object),
-};
-
-const defaultProps = {
-    backgroundColor: undefined,
-    header: null,
-    headerContainerStyles: [],
-    scrollViewContainerStyles: [],
-    childrenContainerStyles: [],
-    footer: null,
-};
-
-function HeaderPageLayout({backgroundColor, children, footer, headerContainerStyles, scrollViewContainerStyles, childrenContainerStyles, style, headerContent, ...propsToPassToHeader}) {
+function HeaderPageLayout({
+    backgroundColor,
+    children,
+    footer,
+    headerContainerStyles,
+    scrollViewContainerStyles,
+    childrenContainerStyles,
+    style,
+    headerContent,
+    ...rest
+}: HeaderPageLayoutProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
     const {isOffline} = useNetwork();
     const appBGColor = StyleUtils.getBackgroundColorStyle(theme.appBG);
     const {titleColor, iconFill} = useMemo(() => {
-        const isColorfulBackground = (backgroundColor || theme.appBG) !== theme.appBG && (backgroundColor || theme.highlightBG) !== theme.highlightBG;
+        const isColorfulBackground = (backgroundColor ?? theme.appBG) !== theme.appBG && (backgroundColor ?? theme.highlightBG) !== theme.highlightBG;
         return {
             titleColor: isColorfulBackground ? theme.textColorfulBackground : undefined,
             iconFill: isColorfulBackground ? theme.iconColorfulBackground : undefined,
@@ -67,7 +65,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
 
     return (
         <ScreenWrapper
-            style={[StyleUtils.getBackgroundColorStyle(backgroundColor || theme.appBG)]}
+            style={[StyleUtils.getBackgroundColorStyle(backgroundColor ?? theme.appBG)]}
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
@@ -77,38 +75,34 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
                 <>
                     <HeaderWithBackButton
                         // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...propsToPassToHeader}
+                        {...rest}
                         titleColor={titleColor}
                         iconFill={iconFill}
                     />
-                    <View style={[styles.flex1, appBGColor, !isOffline && !_.isNull(footer) ? safeAreaPaddingBottomStyle : {}]}>
+                    <View style={[styles.flex1, appBGColor, !isOffline && footer ? safeAreaPaddingBottomStyle : {}]}>
                         {/** Safari on ios/mac has a bug where overscrolling the page scrollview shows green background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
                         {Browser.isSafari() && (
                             <View style={styles.dualColorOverscrollSpacer}>
-                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor || theme.appBG)]} />
+                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor ?? theme.appBG)]} />
                                 <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
                             </View>
                         )}
-                        <ScrollView
-                            contentContainerStyle={[safeAreaPaddingBottomStyle, style, scrollViewContainerStyles]}
-                            offlineIndicatorStyle={[appBGColor]}
-                        >
-                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor || theme.appBG, windowHeight)} />}
-                            <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor || theme.appBG), ...headerContainerStyles]}>
+                        <ScrollView contentContainerStyle={[safeAreaPaddingBottomStyle, style, scrollViewContainerStyles]}>
+                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor ?? theme.appBG, windowHeight)} />}
+                            <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor ?? theme.appBG), headerContainerStyles]}>
                                 {headerContent}
                             </View>
                             <View style={[styles.pt5, appBGColor, childrenContainerStyles]}>{children}</View>
                         </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
+                        {!!footer && <FixedFooter>{footer}</FixedFooter>}
                     </View>
                 </>
             )}
         </ScreenWrapper>
     );
 }
 
-HeaderPageLayout.propTypes = propTypes;
-HeaderPageLayout.defaultProps = defaultProps;
 HeaderPageLayout.displayName = 'HeaderPageLayout';
 
+export type {HeaderPageLayoutProps};
 export default HeaderPageLayout;
diff --git a/src/components/HoldMenuSectionList.tsx b/src/components/HoldMenuSectionList.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import {ImageSourcePropType, View} from 'react-native';
-import {SvgProps} from 'react-native-svg';
+import {View} from 'react-native';
+import type {ImageSourcePropType} from 'react-native';
+import type {SvgProps} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
-import {TranslationPaths} from '@src/languages/types';
+import type {TranslationPaths} from '@src/languages/types';
 import Icon from './Icon';
 import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js