Merge branch 'main' into georgia-reportPreviewStyling2

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001044408
-        versionName "1.4.44-8"
+        versionCode 1001044501
+        versionName "1.4.45-1"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.44</string>
+	<string>1.4.45</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.44.8</string>
+	<string>1.4.45.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.44</string>
+	<string>1.4.45</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.44.8</string>
+	<string>1.4.45.1</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -11,9 +11,9 @@
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.44</string>
+	<string>1.4.45</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.44.8</string>
+	<string>1.4.45.1</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

ios/Podfile.lock

@@ -1432,7 +1432,7 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (2.2.0):
     - React-Core
-  - RNReanimated (3.6.1):
+  - RNReanimated (3.7.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1986,7 +1986,7 @@ SPEC CHECKSUMS:
   rnmapbox-maps: fcf7f1cbdc8bd7569c267d07284e8a5c7bee06ed
   RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa
   RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
-  RNReanimated: 57f436e7aa3d277fbfed05e003230b43428157c0
+  RNReanimated: beb07f7f900543928467da8107c175d1e57a1049
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
   RNSound: 6c156f925295bdc83e8e422e7d8b38d33bc71852
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.44-8",
+  "version": "1.4.45-1",
   "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.",
@@ -154,7 +154,7 @@
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
-    "react-native-reanimated": "^3.6.1",
+    "react-native-reanimated": "^3.7.1",
     "react-native-render-html": "6.3.1",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "3.29.0",

src/CONST.ts

@@ -178,6 +178,7 @@ const CONST = {
     DATE: {
         SQL_DATE_TIME: 'YYYY-MM-DD HH:mm:ss',
         FNS_FORMAT_STRING: 'yyyy-MM-dd',
+        FNS_DATE_TIME_FORMAT_STRING: 'yyyy-MM-dd HH:mm:ss',
         LOCAL_TIME_FORMAT: 'h:mm a',
         YEAR_MONTH_FORMAT: 'yyyyMM',
         MONTH_FORMAT: 'MMMM',
@@ -3319,6 +3320,10 @@ const CONST = {
             PREFER_CLASSIC: 'preferClassic',
         },
     },
+
+    SESSION_STORAGE_KEYS: {
+        INITIAL_URL: 'INITIAL_URL',
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/ONYXKEYS.ts

@@ -272,6 +272,9 @@ const ONYXKEYS = {
     /** Indicates whether we should store logs or not */
     SHOULD_STORE_LOGS: 'shouldStoreLogs',
 
+    // Paths of PDF file that has been cached during one session
+    CACHED_PDF_PATHS: 'cachedPDFPaths',
+
     /** Collection Keys */
     COLLECTION: {
         DOWNLOAD: 'download_',
@@ -564,6 +567,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.PLAID_CURRENT_EVENT]: string;
     [ONYXKEYS.LOGS]: Record<number, OnyxTypes.Log>;
     [ONYXKEYS.SHOULD_STORE_LOGS]: boolean;
+    [ONYXKEYS.CACHED_PDF_PATHS]: Record<string, string>;
 };
 
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;

src/components/AttachmentModal.tsx

@@ -89,7 +89,7 @@ type AttachmentModalProps = AttachmentModalOnyxProps & {
     source?: AvatarSource;
 
     /** Optional callback to fire when we want to preview an image and approve it for use. */
-    onConfirm?: ((file: Partial<FileObject>) => void) | null;
+    onConfirm?: ((file: FileObject) => void) | null;
 
     /** Whether the modal should be open by default */
     defaultOpen?: boolean;
@@ -264,7 +264,7 @@ function AttachmentModal({
         }
 
         if (onConfirm) {
-            onConfirm(Object.assign(file ?? {}, {source: sourceState}));
+            onConfirm(Object.assign(file ?? {}, {source: sourceState} as FileObject));
         }
 
         setIsModalOpen(false);
@@ -318,7 +318,7 @@ function AttachmentModal({
 
     const validateAndDisplayFileToUpload = useCallback(
         (data: FileObject) => {
-            if (!isDirectoryCheck(data)) {
+            if (!data || !isDirectoryCheck(data)) {
                 return;
             }
             let fileObject = data;
@@ -617,4 +617,4 @@ export default withOnyx<AttachmentModalProps, AttachmentModalOnyxProps>({
     },
 })(memo(AttachmentModal));
 
-export type {Attachment};
+export type {Attachment, FileObject};

src/components/Attachments/AttachmentCarousel/CarouselItem.js

@@ -105,6 +105,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) {
                     isAuthTokenRequired={item.isAuthTokenRequired}
                     onPress={onPress}
                     transactionID={item.transactionID}
+                    reportActionID={item.reportActionID}
                     isHovered={isModalHovered}
                     isFocused={isFocused}
                     optionalVideoDuration={item.duration}

src/components/Attachments/AttachmentView/index.js

@@ -17,6 +17,7 @@ import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as CachedPDFPaths from '@libs/actions/CachedPDFPaths';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
@@ -57,6 +58,9 @@ const propTypes = {
     // eslint-disable-next-line react/no-unused-prop-types
     transactionID: PropTypes.string,
 
+    /** The id of the report action related to the attachment */
+    reportActionID: PropTypes.string,
+
     isHovered: PropTypes.bool,
 
     optionalVideoDuration: PropTypes.number,
@@ -71,6 +75,7 @@ const defaultProps = {
     isWorkspaceAvatar: false,
     maybeIcon: false,
     transactionID: '',
+    reportActionID: '',
     isHovered: false,
     optionalVideoDuration: 0,
 };
@@ -92,6 +97,7 @@ function AttachmentView({
     maybeIcon,
     fallbackSource,
     transaction,
+    reportActionID,
     isHovered,
     optionalVideoDuration,
 }) {
@@ -153,6 +159,15 @@ function AttachmentView({
     if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) {
         const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source;
 
+        const onPDFLoadComplete = (path) => {
+            if (path && (transaction.transactionID || reportActionID)) {
+                CachedPDFPaths.add(transaction.transactionID || reportActionID, path);
+            }
+            if (!loadComplete) {
+                setLoadComplete(true);
+            }
+        };
+
         // We need the following View component on android native
         // So that the event will propagate properly and
         // the Password protected preview will be shown for pdf attachement we are about to send.
@@ -166,7 +181,7 @@ function AttachmentView({
                     encryptedSourceUrl={encryptedSourceUrl}
                     onPress={onPress}
                     onToggleKeyboard={onToggleKeyboard}
-                    onLoadComplete={() => !loadComplete && setLoadComplete(true)}
+                    onLoadComplete={onPDFLoadComplete}
                     errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]}
                     style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1}
                     isUsedInCarousel={isUsedInCarousel}

src/components/AvatarWithImagePicker.tsx

@@ -220,7 +220,7 @@ function AvatarWithImagePicker({
             setError(null, {});
             setIsMenuVisible(false);
             setImageData({
-                uri: image.uri,
+                uri: image.uri ?? '',
                 name: image.name,
                 type: image.type,
             });

src/components/ButtonWithDropdownMenu.tsx

@@ -10,33 +10,30 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {AnchorPosition} from '@styles/index';
 import CONST from '@src/CONST';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Button from './Button';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PopoverMenu from './PopoverMenu';
 
-type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE>;
-
-type DropdownOption = {
-    value: PaymentType;
+type DropdownOption<T> = {
+    value: T;
     text: string;
-    icon: IconAsset;
+    icon?: IconAsset;
     iconWidth?: number;
     iconHeight?: number;
     iconDescription?: string;
 };
 
-type ButtonWithDropdownMenuProps = {
+type ButtonWithDropdownMenuProps<T> = {
     /** Text to display for the menu header */
     menuHeaderText?: string;
 
     /** Callback to execute when the main button is pressed */
-    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: PaymentType) => void;
+    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: T) => void;
 
     /** Callback to execute when a dropdown option is selected */
-    onOptionSelected?: (option: DropdownOption) => void;
+    onOptionSelected?: (option: DropdownOption<T>) => void;
 
     /** Call the onPress function on main button when Enter key is pressed */
     pressOnEnter?: boolean;
@@ -55,19 +52,19 @@ type ButtonWithDropdownMenuProps = {
 
     /** Menu options to display */
     /** e.g. [{text: 'Pay with Expensify', icon: Wallet}] */
-    options: DropdownOption[];
+    options: Array<DropdownOption<T>>;
 
     /** The anchor alignment of the popover menu */
     anchorAlignment?: AnchorAlignment;
 
     /* ref for the button */
-    buttonRef: RefObject<View>;
+    buttonRef?: RefObject<View>;
 
     /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
     enterKeyEventListenerPriority?: number;
 };
 
-function ButtonWithDropdownMenu({
+function ButtonWithDropdownMenu<T>({
     isLoading = false,
     isDisabled = false,
     pressOnEnter = false,
@@ -83,7 +80,7 @@ function ButtonWithDropdownMenu({
     options,
     onOptionSelected,
     enterKeyEventListenerPriority = 0,
-}: ButtonWithDropdownMenuProps) {
+}: ButtonWithDropdownMenuProps<T>) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();

src/components/CategoryPicker/index.js

@@ -70,6 +70,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             onSelectRow={onSubmit}
             ListItem={RadioListItem}
             initiallyFocusedOptionKey={selectedOptionKey}
+            isRowMultilineSupported
         />
     );
 }

src/components/Composer/index.tsx

@@ -75,7 +75,7 @@ function Composer(
         shouldContainScroll = false,
         ...props
     }: ComposerProps,
-    ref: ForwardedRef<TextInput>,
+    ref: ForwardedRef<TextInput | HTMLInputElement>,
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -278,6 +278,7 @@ function Composer(
             if (!onKeyPress || isEnterWhileComposition(e as unknown as KeyboardEvent)) {
                 return;
             }
+
             onKeyPress(e);
         },
         [onKeyPress],