Merge branch 'main' into chore/39121-remove-underscore

.well-known/apple-app-site-association

@@ -52,6 +52,10 @@
                         "/": "/split/*",
                         "comment": "Split Expense"
                     },
+                    {
+                        "/": "/submit/*",
+                        "comment": "Submit Expense"
+                    },
                     {
                         "/": "/request/*",
                         "comment": "Submit Expense"
@@ -76,6 +80,10 @@
                         "/": "/search/*",
                         "comment": "Search"
                     },
+                    {
+                        "/": "/pay/*",
+                        "comment": "Pay someone"
+                    },
                     {
                         "/": "/send/*",
                         "comment": "Pay someone"

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001046319
-        versionName "1.4.63-19"
+        versionCode 1001046321
+        versionName "1.4.63-21"
         // 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"

android/app/src/main/AndroidManifest.xml

@@ -62,6 +62,7 @@
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/bank-account"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/iou"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/request"/>
+                <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/submit"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/enable-payments"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/statements"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/concierge"/>
@@ -70,6 +71,7 @@
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/new"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/search"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/send"/>
+                <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/pay"/>
                 <data android:scheme="https" android:host="new.expensify.com" android:pathPrefix="/money2020"/>
 
                 <!-- Staging URLs -->
@@ -81,6 +83,7 @@
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/bank-account"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/iou"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/request"/>
+                <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/submit"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/enable-payments"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/statements"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/concierge"/>
@@ -89,6 +92,7 @@
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/new"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/search"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/send"/>
+                <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/pay"/>
                 <data android:scheme="https" android:host="staging.new.expensify.com" android:pathPrefix="/money2020"/>
             </intent-filter>
         </activity>

ios/NewExpensify/Info.plist

@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.63.19</string>
+	<string>1.4.63.21</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

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

ios/NotificationServiceExtension/Info.plist

@@ -13,7 +13,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.4.63</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.63.19</string>
+	<string>1.4.63.21</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.63-19",
+  "version": "1.4.63-21",
   "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

@@ -1135,6 +1135,11 @@ const CONST = {
         JPEG: 'image/jpeg',
     },
 
+    IMAGE_OBJECT_POSITION: {
+        TOP: 'top',
+        INITIAL: 'initial',
+    },
+
     FILE_TYPE_REGEX: {
         // Image MimeTypes allowed by iOS photos app.
         IMAGE: /\.(jpg|jpeg|png|webp|gif|tiff|bmp|heic|heif)$/,
@@ -1414,16 +1419,18 @@ const CONST = {
         ACTION: {
             EDIT: 'edit',
             CREATE: 'create',
-            REQUEST: 'request',
+            SUBMIT: 'submit',
             CATEGORIZE: 'categorize',
             SHARE: 'share',
         },
         DEFAULT_AMOUNT: 0,
         TYPE: {
             SEND: 'send',
+            PAY: 'pay',
             SPLIT: 'split',
             REQUEST: 'request',
-            TRACK_EXPENSE: 'track-expense',
+            SUBMIT: 'submit',
+            TRACK: 'track',
         },
         REQUEST_TYPE: {
             DISTANCE: 'distance',
@@ -3380,9 +3387,9 @@ const CONST = {
 
     REFERRAL_PROGRAM: {
         CONTENT_TYPES: {
-            MONEY_REQUEST: 'request',
+            SUBMIT_EXPENSE: 'submitExpense',
             START_CHAT: 'startChat',
-            SEND_MONEY: 'sendMoney',
+            PAY_SOMEONE: 'paySomeone',
             REFER_FRIEND: 'referralFriend',
             SHARE_CODE: 'shareCode',
         },

src/ROUTES.ts

@@ -418,20 +418,20 @@ const ROUTES = {
     },
 
     MONEY_REQUEST_STATE_SELECTOR: {
-        route: 'request/state',
+        route: 'submit/state',
 
         getRoute: (state?: string, backTo?: string, label?: string) =>
-            `${getUrlWithBackToParam(`request/state${state ? `?state=${encodeURIComponent(state)}` : ''}`, backTo)}${
+            `${getUrlWithBackToParam(`submit/state${state ? `?state=${encodeURIComponent(state)}` : ''}`, backTo)}${
                 // the label param can be an empty string so we cannot use a nullish ?? operator
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 label ? `${backTo || state ? '&' : '?'}label=${encodeURIComponent(label)}` : ''
             }` as const,
     },
-    IOU_REQUEST: 'request/new',
-    IOU_SEND: 'send/new',
-    IOU_SEND_ADD_BANK_ACCOUNT: 'send/new/add-bank-account',
-    IOU_SEND_ADD_DEBIT_CARD: 'send/new/add-debit-card',
-    IOU_SEND_ENABLE_PAYMENTS: 'send/new/enable-payments',
+    IOU_REQUEST: 'submit/new',
+    IOU_SEND: 'pay/new',
+    IOU_SEND_ADD_BANK_ACCOUNT: 'pay/new/add-bank-account',
+    IOU_SEND_ADD_DEBIT_CARD: 'pay/new/add-debit-card',
+    IOU_SEND_ENABLE_PAYMENTS: 'pay/new/enable-payments',
 
     NEW_TASK: 'new/task',
     NEW_TASK_ASSIGNEE: 'new/task/assignee',
@@ -690,7 +690,7 @@ const ROUTES = {
         route: 'referral/:contentType',
         getRoute: (contentType: string, backTo?: string) => getUrlWithBackToParam(`referral/${contentType}`, backTo),
     },
-    PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational',
+    PROCESS_MONEY_REQUEST_HOLD: 'hold-expense-educational',
     ONBOARDING_ROOT: 'onboarding',
     ONBOARDING_PERSONAL_DETAILS: 'onboarding/personal-details',
     ONBOARDING_WORK: 'onboarding/work',
@@ -734,6 +734,7 @@ const ROUTES = {
  */
 const HYBRID_APP_ROUTES = {
     MONEY_REQUEST_CREATE: '/request/new/scan',
+    MONEY_REQUEST_SUBMIT_CREATE: '/submit/new/scan',
 } as const;
 
 export {HYBRID_APP_ROUTES, getUrlWithBackToParam};

src/components/AttachmentModal.tsx

@@ -422,7 +422,7 @@ function AttachmentModal({
                     Navigation.navigate(
                         ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
                             CONST.IOU.ACTION.EDIT,
-                            CONST.IOU.TYPE.REQUEST,
+                            CONST.IOU.TYPE.SUBMIT,
                             transaction?.transactionID ?? '',
                             report?.reportID ?? '',
                             Navigation.getActiveRouteWithoutParams(),

src/components/Image/index.tsx

@@ -1,11 +1,40 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import BaseImage from './BaseImage';
-import type {ImageOnyxProps, ImageOwnProps, ImageProps} from './types';
+import type {ImageOnLoadEvent, ImageOnyxProps, ImageOwnProps, ImageProps} from './types';
 
-function Image({source: propsSource, isAuthTokenRequired = false, session, ...forwardedProps}: ImageProps) {
+function Image({source: propsSource, isAuthTokenRequired = false, session, onLoad, objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL, style, ...forwardedProps}: ImageProps) {
+    const [aspectRatio, setAspectRatio] = useState<string | number | null>(null);
+    const isObjectPositionTop = objectPosition === CONST.IMAGE_OBJECT_POSITION.TOP;
+
+    const updateAspectRatio = useCallback(
+        (width: number, height: number) => {
+            if (!isObjectPositionTop) {
+                return;
+            }
+
+            if (width > height) {
+                setAspectRatio(1);
+                return;
+            }
+
+            setAspectRatio(height ? width / height : 'auto');
+        },
+        [isObjectPositionTop],
+    );
+
+    const handleLoad = useCallback(
+        (event: ImageOnLoadEvent) => {
+            const {width, height} = event.nativeEvent;
+
+            onLoad?.(event);
+
+            updateAspectRatio(width, height);
+        },
+        [onLoad, updateAspectRatio],
+    );
     /**
      * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
      * to the source.
@@ -34,6 +63,8 @@ function Image({source: propsSource, isAuthTokenRequired = false, session, ...fo
         <BaseImage
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...forwardedProps}
+            onLoad={handleLoad}
+            style={[style, aspectRatio ? {aspectRatio, height: 'auto'} : {}, isObjectPositionTop && !aspectRatio && {opacity: 0}]}
             source={source}
         />
     );

src/components/Image/types.ts

@@ -1,10 +1,14 @@
 import type {ImageSource} from 'expo-image';
 import type {ImageRequireSource, ImageResizeMode, ImageStyle, ImageURISource, StyleProp} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
 import type {Session} from '@src/types/onyx';
 
 type ExpoImageSource = ImageSource | number | ImageSource[];
 
+type ImageObjectPosition = ValueOf<typeof CONST.IMAGE_OBJECT_POSITION>;
+
 type ImageOnyxProps = {
     /** Session info for the currently logged in user. */
     session: OnyxEntry<Session>;
@@ -23,12 +27,12 @@ type BaseImageProps = {
 
     /** Event for when the image is fully loaded and returns the natural dimensions of the image */
     onLoad?: (event: ImageOnLoadEvent) => void;
-};
 
-type ImageOwnProps = BaseImageProps & {
     /** Styles for the Image */
     style?: StyleProp<ImageStyle>;
+};
 
+type ImageOwnProps = BaseImageProps & {
     /** Should an auth token be included in the image request */
     isAuthTokenRequired?: boolean;
 
@@ -46,8 +50,11 @@ type ImageOwnProps = BaseImageProps & {
 
     /** Progress events while the image is downloading */
     onProgress?: () => void;
+
+    /** The object position of image */
+    objectPosition?: ImageObjectPosition;
 };
 
 type ImageProps = ImageOnyxProps & ImageOwnProps;
 
-export type {BaseImageProps, ImageOwnProps, ImageOnyxProps, ImageProps, ExpoImageSource, ImageOnLoadEvent};
+export type {BaseImageProps, ImageOwnProps, ImageOnyxProps, ImageProps, ExpoImageSource, ImageOnLoadEvent, ImageObjectPosition};

src/components/ImageWithSizeCalculation.tsx

@@ -5,9 +5,11 @@ import {View} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
+import CONST from '@src/CONST';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
 import Image from './Image';
 import RESIZE_MODES from './Image/resizeModes';
+import type {ImageObjectPosition} from './Image/types';
 
 type OnMeasure = (args: {width: number; height: number}) => void;
 
@@ -32,6 +34,9 @@ type ImageWithSizeCalculationProps = {
 
     /** Whether the image requires an authToken */
     isAuthTokenRequired: boolean;
+
+    /** The object position of image */
+    objectPosition?: ImageObjectPosition;
 };
 
 /**
@@ -40,7 +45,7 @@ type ImageWithSizeCalculationProps = {
  * performing some calculation on a network image after fetching dimensions so
  * it can be appropriately resized.
  */
-function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthTokenRequired}: ImageWithSizeCalculationProps) {
+function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthTokenRequired, objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL}: ImageWithSizeCalculationProps) {
     const styles = useThemeStyles();
     const isLoadedRef = useRef<boolean | null>(null);
     const [isImageCached, setIsImageCached] = useState(true);
@@ -101,6 +106,7 @@ function ImageWithSizeCalculation({url, style, onMeasure, onLoadFailure, isAuthT
                 }}
                 onError={onError}
                 onLoad={imageLoadedSuccessfully}
+                objectPosition={objectPosition}
             />
             {isLoading && !isImageCached && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
         </View>