Merge branch 'main' of https://github.com/Expensify/App into nikki-sa…

…ml-newdot-ios

.eslintrc.js

@@ -14,6 +14,11 @@ const restrictedImportPaths = [
         importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight'],
         message: "Please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
     },
+    {
+        name: 'react-native-safe-area-context',
+        importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
+        message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

.github/workflows/platformDeploy.yml

@@ -347,6 +347,9 @@ jobs:
     if: ${{ failure() }}
     needs: [android, desktop, iOS, web]
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Post Slack message on failure
         uses: ./.github/actions/composite/announceFailedWorkflowInSlack
         with:

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040602
-        versionName "1.4.6-2"
+        versionCode 1001040700
+        versionName "1.4.7-0"
     }
 
     flavorDimensions "default"

docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md

@@ -5,7 +5,30 @@ description: Get the most out of your Expensify Card with exclusive perks!
 
 
 # Overview
-The Expensify Card is packed with perks, both native to our Card program and through exclusive discounts with partnering solutions. Below, we’ll cover all of our exclusive offers in more detail and how to claim discounts with our partners.
+The Expensify Card is packed with perks, both native to our Card program and through exclusive discounts with partnering solutions. The Expensify Card’s primary perks include: 
+- Swipe to Win, where every swipe has a chance to win fun personalized gifts for you and your closest friends and family members
+- Unbeatable cash back incentive with each swipe
+Below, we’ll cover all of our exclusive offers in more detail and how to claim discounts with our partners.
+
+# Expensify Card Perks
+
+## Swipe to Win
+Swipe to Win is a new [Expensify Card](https://use.expensify.com/company-credit-card) perk that gives cardholders the chance to send a gift to a friend, family member, or essential worker on the frontlines!
+
+Winners can choose to _Send a Smile_ or _Send a Laugh_. To start, we’re offering one gift per option:
+
+- **Send A Smile:** Champagne by Expensify
+- **Send a Laugh:** Jenga Set
+
+**How to Participate**
+It’s easy! Once you have an Expensify Card, you just need to start using it. With each swipe, you're automatically entered to win and have a 1 in 250 chance of getting a prize!
+
+**How will I know if I’ve won?**
+Winners will be notified immediately via the Expensify app, and receive additional instructions on how to choose and send their desired gift. 
+
+If you don't have Expensify notifications turned on yet, here are some helpful guides:
+- [Apple Notification Preferences](https://support.apple.com/en-us/HT201925)
+- [Android Notification Preferences](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fsupport.google.com%2Fandroid%2Fanswer%2F9079661%3Fhl%3Den)
 
 # Partner Specific Perks
 
@@ -188,4 +211,3 @@ Stripe Atlas helps removes obstacles typically associated with starting a busine
 **Receive $100 off Stripe Atlas and get access to a startup toolkit and special offers on additional Strip Atlas services.**
 
 **How to redeem:** Sign up with your Expensify Card.
-

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.6</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.2</string>
+	<string>1.4.7.0</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.6</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.2</string>
+	<string>1.4.7.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.6-2",
+  "version": "1.4.7-0",
   "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

@@ -497,6 +497,7 @@ const CONST = {
                 MODIFIEDEXPENSE: 'MODIFIEDEXPENSE',
                 MOVED: 'MOVED',
                 REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',
+                REIMBURSEMENTDEQUEUED: 'REIMBURSEMENTDEQUEUED',
                 RENAMED: 'RENAMED',
                 REPORTPREVIEW: 'REPORTPREVIEW',
                 SUBMITTED: 'SUBMITTED',
@@ -1165,6 +1166,9 @@ const CONST = {
             SVG: 'svg',
         },
         RECEIPT_ERROR: 'receiptError',
+        CANCEL_REASON: {
+            PAYMENT_EXPIRED: 'CANCEL_REASON_PAYMENT_EXPIRED',
+        },
     },
 
     GROWL: {

src/components/AvatarWithIndicator.js → src/components/AvatarWithIndicator.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import * as UserUtils from '@libs/UserUtils';
@@ -9,38 +8,33 @@ import * as Expensicons from './Icon/Expensicons';
 import Indicator from './Indicator';
 import Tooltip from './Tooltip';
 
-const propTypes = {
+type AvatarWithIndicatorProps = {
     /** URL for the avatar */
-    source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    source: UserUtils.AvatarSource;
 
     /** To show a tooltip on hover */
-    tooltipText: PropTypes.string,
+    tooltipText?: string;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    fallbackIcon?: UserUtils.AvatarSource;
 
     /** Indicates whether the avatar is loaded or not  */
-    isLoading: PropTypes.bool,
+    isLoading?: boolean;
 };
 
-const defaultProps = {
-    tooltipText: '',
-    fallbackIcon: Expensicons.FallbackAvatar,
-    isLoading: true,
-};
-
-function AvatarWithIndicator(props) {
+function AvatarWithIndicator({source, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
     const styles = useThemeStyles();
+
     return (
-        <Tooltip text={props.tooltipText}>
+        <Tooltip text={tooltipText}>
             <View style={[styles.sidebarAvatar]}>
-                {props.isLoading ? (
+                {isLoading ? (
                     <AvatarSkeleton />
                 ) : (
                     <>
                         <Avatar
-                            source={UserUtils.getSmallSizeAvatar(props.source)}
-                            fallbackIcon={props.fallbackIcon}
+                            source={UserUtils.getSmallSizeAvatar(source)}
+                            fallbackIcon={fallbackIcon}
                         />
                         <Indicator />
                     </>
@@ -50,8 +44,6 @@ function AvatarWithIndicator(props) {
     );
 }
 
-AvatarWithIndicator.defaultProps = defaultProps;
-AvatarWithIndicator.propTypes = propTypes;
 AvatarWithIndicator.displayName = 'AvatarWithIndicator';
 
 export default AvatarWithIndicator;

src/components/CustomStatusBar/index.tsx

@@ -5,6 +5,7 @@ import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
 import CustomStatusBarContext from './CustomStatusBarContext';
+import updateStatusBarAppearance from './updateStatusBarAppearance';
 
 type CustomStatusBarProps = {
     isNested: boolean;
@@ -60,8 +61,7 @@ const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
             statusBarStyle = screenTheme.statusBarStyle;
         }
 
-        StatusBar.setBackgroundColor(currentScreenBackgroundColor, true);
-        StatusBar.setBarStyle(statusBarStyle, true);
+        updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle});
     }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
 
     useEffect(() => {
@@ -75,7 +75,7 @@ const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
             return;
         }
 
-        StatusBar.setBarStyle(theme.statusBarStyle, true);
+        updateStatusBarAppearance({statusBarStyle: theme.statusBarStyle});
     }, [isDisabled, theme.statusBarStyle]);
 
     if (isDisabled) {

src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts

@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    StatusBar.setBackgroundColor('transparent');
+    StatusBar.setTranslucent(true);
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}

src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts

@@ -0,0 +1,10 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (!statusBarStyle) {
+        return;
+    }
+    StatusBar.setBarStyle(statusBarStyle, true);
+}

src/components/CustomStatusBar/updateStatusBarAppearance/index.ts

@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+export default function updateStatusBarAppearance({backgroundColor, statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (backgroundColor) {
+        StatusBar.setBackgroundColor(backgroundColor, true);
+    }
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}

src/components/CustomStatusBar/updateStatusBarAppearance/types.ts

@@ -0,0 +1,8 @@
+import {StatusBarStyle} from '@styles/styles';
+
+type UpdateStatusBarAppearanceProps = {
+    backgroundColor?: string;
+    statusBarStyle?: StatusBarStyle;
+};
+
+export default UpdateStatusBarAppearanceProps;

src/components/GrowlNotification/GrowlNotificationContainer/index.native.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Animated} from 'react-native';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
@@ -11,14 +11,12 @@ const propTypes = {
 
 function GrowlNotificationContainer(props) {
     const styles = useThemeStyles();
+    const insets = useSafeAreaInsets;
+
     return (
-        <SafeAreaInsetsContext.Consumer>
-            {(insets) => (
-                <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
-                    {props.children}
-                </Animated.View>
-            )}
-        </SafeAreaInsetsContext.Consumer>
+        <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
+            {props.children}
+        </Animated.View>
     );
 }
 

src/components/LHNOptionsList/LHNOptionsList.js

@@ -118,7 +118,9 @@ function LHNOptionsList({
             const transactionID = lodashGet(itemParentReportAction, ['originalMessage', 'IOUTransactionID'], '');
             const itemTransaction = transactionID ? transactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] : {};
             const itemComment = draftComments[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] || '';
-            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(ReportUtils.getParticipantsIDs(itemFullReport), personalDetails);
+            const participants = [ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport.ownerAccountID];
+
+            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
 
             return (
                 <OptionRowLHNData

src/components/Modal/BaseModal.tsx

@@ -1,8 +1,8 @@
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import usePrevious from '@hooks/usePrevious';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';

src/components/Modal/types.ts

@@ -12,7 +12,7 @@ type PopoverAnchorPosition = {
 };
 
 type BaseModalProps = WindowDimensionsProps &
-    ModalProps & {
+    Partial<ModalProps> & {
         /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
         fullscreen?: boolean;