Merge branch 'main' of github.com:kubabutkiewicz/expensify-app into f…

…ix-extra-padding-in-options

android/app/build.gradle

@@ -98,8 +98,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001043400
-        versionName "1.4.34-0"
+        versionCode 1001043500
+        versionName "1.4.35-0"
     }
 
     flavorDimensions "default"

docs/articles/new-expensify/account-settings/Preferences.md

@@ -0,0 +1,21 @@
+---
+title: Preferences
+description: How to manage your Expensify Preferences
+---
+# Overview
+Your Preferences in Expensify allow you to customize how you use New Expensify.
+
+- Set your theme preference
+
+# How to set your theme preference in New Expensify
+
+To set or update your theme preference in New Expensify: 
+1. Go to **Settings > Preferences**
+2. Tap on **Theme**
+3. You can choose between the _Dark_ theme, the _Light_ theme, or _Use Device Settings_
+
+_Use Device Settings_ is the default setting.
+
+Selecting _Use Device Settings_ will use your device's theme settings. For example, if your device is set to adjust the appearance from light to dark during the day, we'll match that.
+
+Your theme preference will sync across all your New Expensify apps (mobile, web, or OSX desktop apps).

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.34</string>
+	<string>1.4.35</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.34.0</string>
+	<string>1.4.35.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.34</string>
+	<string>1.4.35</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.34.0</string>
+	<string>1.4.35.0</string>
 </dict>
 </plist>

ios/NotificationServiceExtension/Info.plist

@@ -11,9 +11,9 @@
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.34</string>
+	<string>1.4.35</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.34.0</string>
+	<string>1.4.35.0</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.34-0",
+  "version": "1.4.35-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/ONYXKEYS.ts

@@ -243,6 +243,9 @@ const ONYXKEYS = {
     // Max width supported for HTML <canvas> element
     MAX_CANVAS_WIDTH: 'maxCanvasWidth',
 
+    // Stores the recently used report fields
+    RECENTLY_USED_REPORT_FIELDS: 'recentlyUsedReportFields',
+
     /** Indicates whether an forced upgrade is required */
     UPDATE_REQUIRED: 'updateRequired',
 
@@ -259,7 +262,6 @@ const ONYXKEYS = {
         POLICY_TAX_RATE: 'policyTaxRates_',
         POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
         POLICY_REPORT_FIELDS: 'policyReportFields_',
-        POLICY_RECENTLY_USED_REPORT_FIELDS: 'policyRecentlyUsedReportFields_',
         WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
         WORKSPACE_INVITE_MESSAGE_DRAFT: 'workspaceInviteMessageDraft_',
         REPORT: 'report_',
@@ -356,8 +358,8 @@ const ONYXKEYS = {
         REPORT_VIRTUAL_CARD_FRAUD_DRAFT: 'reportVirtualCardFraudFormDraft',
         GET_PHYSICAL_CARD_FORM: 'getPhysicalCardForm',
         GET_PHYSICAL_CARD_FORM_DRAFT: 'getPhysicalCardFormDraft',
-        POLICY_REPORT_FIELD_EDIT_FORM: 'policyReportFieldEditForm',
-        POLICY_REPORT_FIELD_EDIT_FORM_DRAFT: 'policyReportFieldEditFormDraft',
+        REPORT_FIELD_EDIT_FORM: 'reportFieldEditForm',
+        REPORT_FIELD_EDIT_FORM_DRAFT: 'reportFieldEditFormDraft',
         REIMBURSEMENT_ACCOUNT_FORM: 'reimbursementAccount',
         REIMBURSEMENT_ACCOUNT_FORM_DRAFT: 'reimbursementAccountDraft',
         PERSONAL_BANK_ACCOUNT: 'personalBankAccountForm',
@@ -445,6 +447,7 @@ type OnyxValues = {
     [ONYXKEYS.MAX_CANVAS_AREA]: number;
     [ONYXKEYS.MAX_CANVAS_HEIGHT]: number;
     [ONYXKEYS.MAX_CANVAS_WIDTH]: number;
+    [ONYXKEYS.RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;
     [ONYXKEYS.UPDATE_REQUIRED]: boolean;
 
     // Collections
@@ -457,7 +460,6 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;
     [ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS]: OnyxTypes.PolicyReportFields;
-    [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;
     [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT]: Record<string, number>;
     [ONYXKEYS.COLLECTION.REPORT]: OnyxTypes.Report;
@@ -542,8 +544,8 @@ type OnyxValues = {
     [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.POLICY_REPORT_FIELD_EDIT_FORM]: OnyxTypes.Form;
-    [ONYXKEYS.FORMS.POLICY_REPORT_FIELD_EDIT_FORM_DRAFT]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.REPORT_FIELD_EDIT_FORM]: OnyxTypes.ReportFieldEditForm;
+    [ONYXKEYS.FORMS.REPORT_FIELD_EDIT_FORM_DRAFT]: OnyxTypes.Form;
     // @ts-expect-error Different values are defined under the same key: ReimbursementAccount and ReimbursementAccountForm
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT]: OnyxTypes.Form;

src/components/AnonymousReportFooter.tsx

@@ -1,27 +1,31 @@
 import React from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
-import type {PersonalDetailsList, Report} from '@src/types/onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Policy, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
 import Text from './Text';
 
-type AnonymousReportFooterProps = {
+type AnonymousReportFooterPropsWithOnyx = {
+    /** The policy which the user has access to and which the report is tied to */
+    policy: OnyxEntry<Policy>;
+};
+
+type AnonymousReportFooterProps = AnonymousReportFooterPropsWithOnyx & {
     /** The report currently being looked at */
     report: OnyxEntry<Report>;
 
     /** Whether the small screen size layout should be used */
     isSmallSizeLayout?: boolean;
-
-    /** Personal details of all the users */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
 };
 
-function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, report}: AnonymousReportFooterProps) {
+function AnonymousReportFooter({isSmallSizeLayout = false, report, policy}: AnonymousReportFooterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -30,9 +34,9 @@ function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, repo
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
                     report={report}
-                    personalDetails={personalDetails}
                     isAnonymous
                     shouldEnableDetailPageNavigation
+                    policy={policy}
                 />
             </View>
             <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(isSmallSizeLayout)}>
@@ -57,4 +61,8 @@ function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, repo
 
 AnonymousReportFooter.displayName = 'AnonymousReportFooter';
 
-export default AnonymousReportFooter;
+export default withOnyx<AnonymousReportFooterProps, AnonymousReportFooterPropsWithOnyx>({
+    policy: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`,
+    },
+})(AnonymousReportFooter);

src/components/AttachmentModal.tsx

@@ -1,5 +1,5 @@
 import Str from 'expensify-common/lib/str';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {memo, useCallback, useEffect, useMemo, useState} from 'react';
 import {Animated, Keyboard, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
@@ -130,6 +130,9 @@ type AttachmentModalProps = AttachmentModalOnyxProps & {
     /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar?: boolean;
 
+    /** Denotes whether it can be an icon (ex: SVG) */
+    maybeIcon?: boolean;
+
     /** Whether it is a receipt attachment or not */
     isReceiptAttachment?: boolean;
 
@@ -154,6 +157,7 @@ function AttachmentModal({
     onCarouselAttachmentChange = () => {},
     isReceiptAttachment = false,
     isWorkspaceAvatar = false,
+    maybeIcon = false,
     transaction,
     parentReport,
     parentReportActions,
@@ -531,6 +535,7 @@ function AttachmentModal({
                                     file={file}
                                     onToggleKeyboard={updateConfirmButtonVisibility}
                                     isWorkspaceAvatar={isWorkspaceAvatar}
+                                    maybeIcon={maybeIcon}
                                     fallbackSource={fallbackSource}
                                     isUsedInAttachmentModal
                                     transactionID={transaction?.transactionID}
@@ -610,6 +615,6 @@ export default withOnyx<AttachmentModalProps, AttachmentModalOnyxProps>({
         key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
         canEvict: false,
     },
-})(AttachmentModal);
+})(memo(AttachmentModal));
 
 export type {Attachment};

src/components/Attachments/AttachmentView/index.js

@@ -48,6 +48,9 @@ const propTypes = {
     /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar: PropTypes.bool,
 
+    /** Denotes whether it is an icon (ex: SVG) */
+    maybeIcon: PropTypes.bool,
+
     /** The id of the transaction related to the attachment */
     // eslint-disable-next-line react/no-unused-prop-types
     transactionID: PropTypes.string,
@@ -60,6 +63,7 @@ const defaultProps = {
     onToggleKeyboard: () => {},
     containerStyles: [],
     isWorkspaceAvatar: false,
+    maybeIcon: false,
     transactionID: '',
 };
 
@@ -80,6 +84,7 @@ function AttachmentView({
     carouselActiveItemIndex,
     isUsedInAttachmentModal,
     isWorkspaceAvatar,
+    maybeIcon,
     fallbackSource,
     transaction,
 }) {
@@ -91,8 +96,9 @@ function AttachmentView({
 
     useNetwork({onReconnect: () => setImageError(false)});
 
-    // Handles case where source is a component (ex: SVG)
-    if (_.isFunction(source)) {
+    // Handles case where source is a component (ex: SVG) or a number
+    // Number may represent a SVG or an image
+    if ((maybeIcon && typeof source === 'number') || _.isFunction(source)) {
         let iconFillColor = '';
         let additionalStyles = [];
         if (isWorkspaceAvatar) {

src/components/AvatarWithDisplayName.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -12,7 +12,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {PersonalDetails, PersonalDetailsList, Policy, Report, ReportActions} from '@src/types/onyx';
+import type {PersonalDetails, Policy, Report, ReportActions} from '@src/types/onyx';
 import DisplayNames from './DisplayNames';
 import MultipleAvatars from './MultipleAvatars';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
@@ -23,6 +23,9 @@ import Text from './Text';
 type AvatarWithDisplayNamePropsWithOnyx = {
     /** All of the actions of the report */
     parentReportActions: OnyxEntry<ReportActions>;
+
+    /** Personal details of all users */
+    personalDetails: OnyxCollection<PersonalDetails>;
 };
 
 type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
@@ -35,9 +38,6 @@ type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
     /** The size of the avatar */
     size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
-    /** Personal details of all the users */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
-
     /** Whether if it's an unauthenticated user */
     isAnonymous?: boolean;
 
@@ -46,13 +46,13 @@ type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
 };
 
 function AvatarWithDisplayName({
-    personalDetails,
     policy,
     report,
     parentReportActions,
     isAnonymous = false,
     size = CONST.AVATAR_SIZE.DEFAULT,
     shouldEnableDetailPageNavigation = false,
+    personalDetails = CONST.EMPTY_OBJECT,
 }: AvatarWithDisplayNameProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -181,4 +181,7 @@ export default withOnyx<AvatarWithDisplayNameProps, AvatarWithDisplayNamePropsWi
         key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
         canEvict: false,
     },
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
 })(AvatarWithDisplayName);

src/components/AvatarWithImagePicker.js

@@ -338,6 +338,7 @@ function AvatarWithImagePicker({
                     source={previewSource}
                     originalFileName={originalFileName}
                     fallbackSource={fallbackIcon}
+                    maybeIcon={isUsingDefaultAvatar}
                 >
                     {({show}) => (
                         <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>

src/components/ButtonWithDropdownMenu.tsx

@@ -32,6 +32,9 @@ type ButtonWithDropdownMenuProps = {
     /** Callback to execute when the main button is pressed */
     onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: string) => void;
 
+    /** Callback to execute when a dropdown option is selected */
+    onOptionSelected?: (option: DropdownOption) => void;
+
     /** Call the onPress function on main button when Enter key is pressed */
     pressOnEnter?: boolean;
 
@@ -72,6 +75,7 @@ function ButtonWithDropdownMenu({
     buttonRef,
     onPress,
     options,
+    onOptionSelected,
 }: ButtonWithDropdownMenuProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -174,6 +178,7 @@ function ButtonWithDropdownMenu({
                     menuItems={options.map((item, index) => ({
                         ...item,
                         onSelected: () => {
+                            onOptionSelected?.(item);
                             setSelectedItemIndex(index);
                         },
                     }))}