Merge branch 'Expensify:main' into merge-translation-3

Author: shubham1206agra

src/components/DownloadAppBanner.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import type {LayoutChangeEvent} from 'react-native';
 import useHasLoggedIntoMobileApp from '@hooks/useHasLoggedIntoMobileApp';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -9,7 +10,11 @@ import ROUTES from '@src/ROUTES';
 import Button from './Button';
 import {ExpensifyMobileApp} from './Icon/Illustrations';
 
-function DownloadAppBanner() {
+type DownloadAppBannerProps = {
+    onLayout?: (e: LayoutChangeEvent) => void;
+};
+
+function DownloadAppBanner({onLayout}: DownloadAppBannerProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {hasLoggedIntoMobileApp, isLastMobileAppLoginLoaded} = useHasLoggedIntoMobileApp();
@@ -19,7 +24,10 @@ function DownloadAppBanner() {
     }
 
     return (
-        <View style={[styles.ph2, styles.mb2, styles.stickToBottom]}>
+        <View
+            style={[styles.ph2, styles.mb2, styles.stickToBottom, styles.pt2]}
+            onLayout={onLayout}
+        >
             <BillingBanner
                 icon={ExpensifyMobileApp}
                 title={translate('common.getTheApp')}

src/components/MoneyRequestConfirmationList.tsx

@@ -388,7 +388,7 @@ function MoneyRequestConfirmationList({
     const isMerchantEmpty = useMemo(() => !iouMerchant || isMerchantMissing(transaction), [transaction, iouMerchant]);
     const isMerchantRequired = isPolicyExpenseChat && (!isScanRequest || isEditingSplitBill) && shouldShowMerchant;
 
-    const isCategoryRequired = !!policy?.requiresCategory;
+    const isCategoryRequired = !!policy?.requiresCategory && !isTypeInvoice;
 
     useEffect(() => {
         if (shouldDisplayFieldError && didConfirmSplit) {

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -1,4 +1,4 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import isEmpty from 'lodash/isEmpty';
 import React, {memo, useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
@@ -116,6 +116,7 @@ function MoneyRequestReportTransactionList({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
+    const isFocused = useIsFocused();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -371,7 +372,7 @@ function MoneyRequestReportTransactionList({
                 <Animated.Text
                     style={[styles.textLabelSupporting]}
                     entering={hasComments ? undefined : FadeIn}
-                    exiting={FadeOut}
+                    exiting={isFocused ? FadeOut : undefined}
                 >
                     {hasComments || isLoadingReportActions ? translate('common.comments') : ''}
                 </Animated.Text>

src/libs/ReportUtils.ts

@@ -1849,12 +1849,11 @@ function pushTransactionViolationsOnyxData(
     const hasDependentTags = hasDependentTagsPolicyUtils(optimisticPolicy, policyTagLists);
 
     getAllPolicyReports(policyID).forEach((report) => {
-        if (!report?.reportID) {
+        const isReportAnInvoice = isInvoiceReport(report);
+        if (!report?.reportID || isReportAnInvoice) {
             return;
         }
 
-        const isReportAnInvoice = isInvoiceReport(report);
-
         getReportTransactions(report.reportID).forEach((transaction: Transaction) => {
             const transactionViolations = allTransactionViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`] ?? [];
 

src/libs/actions/IOU.ts

@@ -2379,25 +2379,6 @@ function buildOnyxDataForInvoice(invoiceParams: BuildOnyxDataForInvoiceParams):
         return [optimisticData, successData, failureData];
     }
 
-    const violationsOnyxData = ViolationsUtils.getViolationsOnyxData(
-        transactionParams.transaction,
-        [],
-        policyParams.policy,
-        policyParams.policyTagList ?? {},
-        policyParams.policyCategories ?? {},
-        hasDependentTags(policyParams.policy, policyParams.policyTagList ?? {}),
-        true,
-    );
-
-    if (violationsOnyxData) {
-        optimisticData.push(violationsOnyxData);
-        failureData.push({
-            onyxMethod: Onyx.METHOD.SET,
-            key: `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionParams.transaction.transactionID}`,
-            value: [],
-        });
-    }
-
     return [optimisticData, successData, failureData];
 }
 
@@ -4329,9 +4310,11 @@ function getUpdateMoneyRequestParams(
     }
     const hasModifiedComment = 'comment' in transactionChanges;
 
+    const isInvoice = isInvoiceReportReportUtils(iouReport);
     if (
         policy &&
         isPaidGroupPolicy(policy) &&
+        !isInvoice &&
         updatedTransaction &&
         (hasModifiedTag || hasModifiedCategory || hasModifiedComment || hasModifiedDistanceRate || hasModifiedAmount || hasModifiedCreated)
     ) {
@@ -4343,7 +4326,7 @@ function getUpdateMoneyRequestParams(
             policyTagList ?? {},
             policyCategories ?? {},
             hasDependentTags(policy, policyTagList ?? {}),
-            isInvoiceReportReportUtils(iouReport),
+            isInvoice,
         );
         optimisticData.push(violationsOnyxData);
         failureData.push({

src/pages/TeachersUnite/ImTeacherPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useSession} from '@components/OnyxProvider';
+import {useSession} from '@components/OnyxListItemProvider';
 import {isEmailPublicDomain} from '@libs/LoginUtils';
 import ImTeacherUpdateEmailPage from './ImTeacherUpdateEmailPage';
 import IntroSchoolPrincipalPage from './IntroSchoolPrincipalPage';

src/pages/iou/request/step/IOURequestStepCurrency.tsx

@@ -1,42 +1,33 @@
 import React from 'react';
 import {Keyboard} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
 import CurrencySelectionList from '@components/CurrencySelectionList';
 import type {CurrencyListItem} from '@components/CurrencySelectionList/types';
 import useLocalize from '@hooks/useLocalize';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
+import useOnyx from '@hooks/useOnyx';
+import {isValidCurrencyCode} from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as ReportUtils from '@libs/ReportUtils';
+import {getTransactionDetails} from '@libs/ReportUtils';
 import {appendParam} from '@libs/Url';
-import * as IOU from '@userActions/IOU';
+import {setMoneyRequestCurrency} from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {Transaction} from '@src/types/onyx';
 import StepScreenWrapper from './StepScreenWrapper';
 import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';
 import type {WithFullTransactionOrNotFoundProps} from './withFullTransactionOrNotFound';
 
-type IOURequestStepCurrencyOnyxProps = {
-    /** The draft transaction object being modified in Onyx */
-    draftTransaction: OnyxEntry<Transaction>;
-    /** List of recently used currencies */
-    recentlyUsedCurrencies: OnyxEntry<string[]>;
-};
-
-type IOURequestStepCurrencyProps = IOURequestStepCurrencyOnyxProps & WithFullTransactionOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_CURRENCY>;
+type IOURequestStepCurrencyProps = WithFullTransactionOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_CURRENCY>;
 
 function IOURequestStepCurrency({
     route: {
         params: {backTo, pageIndex, transactionID, action, currency: selectedCurrency = ''},
     },
-    draftTransaction,
-    recentlyUsedCurrencies,
 }: IOURequestStepCurrencyProps) {
     const {translate} = useLocalize();
-    const {currency: originalCurrency = ''} = ReportUtils.getTransactionDetails(draftTransaction) ?? {};
-    const currency = CurrencyUtils.isValidCurrencyCode(selectedCurrency) ? selectedCurrency : originalCurrency;
+    const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {canBeMissing: true});
+    const [recentlyUsedCurrencies] = useOnyx(ONYXKEYS.RECENTLY_USED_CURRENCIES, {canBeMissing: true});
+    const {currency: originalCurrency = ''} = getTransactionDetails(draftTransaction) ?? {};
+    const currency = isValidCurrencyCode(selectedCurrency) ? selectedCurrency : originalCurrency;
 
     const navigateBack = (selectedCurrencyValue = '') => {
         // If the currency selection was done from the confirmation step (eg. + > submit expense > manual > confirm > amount > currency)
@@ -57,7 +48,7 @@ function IOURequestStepCurrency({
     const confirmCurrencySelection = (option: CurrencyListItem) => {
         Keyboard.dismiss();
         if (pageIndex !== CONST.IOU.PAGE_INDEX.CONFIRM) {
-            IOU.setMoneyRequestCurrency(transactionID, option.currencyCode, action === CONST.IOU.ACTION.EDIT);
+            setMoneyRequestCurrency(transactionID, option.currencyCode, action === CONST.IOU.ACTION.EDIT);
         }
 
         Navigation.setNavigationActionToMicrotaskQueue(() => navigateBack(option.currencyCode));
@@ -90,19 +81,7 @@ function IOURequestStepCurrency({
 
 IOURequestStepCurrency.displayName = 'IOURequestStepCurrency';
 
-const IOURequestStepCurrencyWithOnyx = withOnyx<IOURequestStepCurrencyProps, IOURequestStepCurrencyOnyxProps>({
-    draftTransaction: {
-        key: ({route}) => {
-            const transactionID = route?.params?.transactionID ?? -1;
-            return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`;
-        },
-    },
-    recentlyUsedCurrencies: {
-        key: ONYXKEYS.RECENTLY_USED_CURRENCIES,
-    },
-})(IOURequestStepCurrency);
-
 /* eslint-disable rulesdir/no-negated-variables */
-const IOURequestStepCurrencyWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepCurrencyWithOnyx);
+const IOURequestStepCurrencyWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepCurrency);
 
 export default IOURequestStepCurrencyWithFullTransactionOrNotFound;

src/pages/iou/request/step/IOURequestStepScan/index.tsx

@@ -965,8 +965,19 @@ function IOURequestStepScan({
         </>
     );
 
+    const [containerHeight, setContainerHeight] = useState(0);
+    const [desktopUploadViewHeight, setDesktopUploadViewHeight] = useState(0);
+    const [downloadAppBannerHeight, setDownloadAppBannerHeight] = useState(0);
+    /*  We use isMobile() here to explicitly hide DownloadAppBanner component on both mobile web and native apps */
+    const shouldHideDownloadAppBanner = isMobile() || downloadAppBannerHeight + desktopUploadViewHeight + styles.uploadFileView(isSmallScreenWidth).paddingVertical * 2 > containerHeight;
+
     const desktopUploadView = () => (
-        <>
+        <View
+            style={[styles.alignItemsCenter, styles.justifyContentCenter]}
+            onLayout={(e) => {
+                setDesktopUploadViewHeight(e.nativeEvent.layout.height);
+            }}
+        >
             {PDFValidationComponent}
             <ReceiptUpload
                 width={CONST.RECEIPT.ICON_SIZE}
@@ -1005,7 +1016,7 @@ function IOURequestStepScan({
                     />
                 )}
             </AttachmentPicker>
-        </>
+        </View>
     );
 
     return (
@@ -1017,7 +1028,8 @@ function IOURequestStepScan({
         >
             {(isDraggingOverWrapper) => (
                 <View
-                    onLayout={() => {
+                    onLayout={(event) => {
+                        setContainerHeight(event.nativeEvent.layout.height);
                         if (!onLayout) {
                             return;
                         }
@@ -1037,8 +1049,7 @@ function IOURequestStepScan({
                             dropInnerWrapperStyles={styles.receiptDropInnerWrapper(true)}
                         />
                     </DragAndDropConsumer>
-                    {/*  We use isMobile() here to explicitly hide DownloadAppBanner component on both mobile web and native apps */}
-                    {!isMobile() && <DownloadAppBanner />}
+                    {!shouldHideDownloadAppBanner && <DownloadAppBanner onLayout={(e) => setDownloadAppBannerHeight(e.nativeEvent.layout.height)} />}
                     {ErrorModal}
                     {startLocationPermissionFlow && !!receiptFiles.length && (
                         <LocationPermissionModal

src/pages/iou/request/step/IOURequestStepTaxAmountPage.tsx

@@ -56,7 +56,6 @@ function IOURequestStepTaxAmountPage({
     const textInput = useRef<BaseTextInputRef | null>(null);
     const isEditing = action === CONST.IOU.ACTION.EDIT;
     const isEditingSplitBill = isEditing && iouType === CONST.IOU.TYPE.SPLIT;
-
     const focusTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
     const currentTransaction = isEditingSplitBill && !isEmptyObject(splitDraftTransaction) ? splitDraftTransaction : transaction;

src/pages/workspace/perDiem/WorkspacePerDiemDetailsPage.tsx

@@ -1,6 +1,4 @@
 import React, {useState} from 'react';
-import {View} from 'react-native';
-import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -47,8 +45,6 @@ function WorkspacePerDiemDetailsPage({route}: WorkspacePerDiemDetailsPageProps)
     const amountValue = selectedSubRate?.rate ? convertToDisplayStringWithoutCurrency(Number(selectedSubRate.rate)) : undefined;
     const currencyValue = selectedRate?.currency ? `${selectedRate.currency} - ${getCurrencySymbol(selectedRate.currency)}` : undefined;
 
-    const FullPageBlockingView = isEmptyObject(selectedSubRate) ? FullPageOfflineBlockingView : View;
-
     const handleDeletePerDiemRate = () => {
         deleteWorkspacePerDiemRates(policyID, customUnit, [
             {
@@ -69,6 +65,7 @@ function WorkspacePerDiemDetailsPage({route}: WorkspacePerDiemDetailsPageProps)
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.CONTROL]}
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_PER_DIEM_RATES_ENABLED}
+            shouldBeBlocked={isEmptyObject(selectedSubRate)}
         >
             <ScreenWrapper
                 enableEdgeToEdgeBottomSafeAreaPadding
@@ -86,46 +83,41 @@ function WorkspacePerDiemDetailsPage({route}: WorkspacePerDiemDetailsPageProps)
                     cancelText={translate('common.cancel')}
                     danger
                 />
-                <FullPageBlockingView
-                    style={!isEmptyObject(selectedSubRate) ? styles.flexGrow1 : []}
+                <ScrollView
                     addBottomSafeAreaPadding
+                    contentContainerStyle={styles.flexGrow1}
+                    keyboardShouldPersistTaps="always"
                 >
-                    <ScrollView
-                        addBottomSafeAreaPadding
-                        contentContainerStyle={styles.flexGrow1}
-                        keyboardShouldPersistTaps="always"
-                    >
-                        <MenuItemWithTopDescription
-                            title={selectedRate?.name}
-                            description={translate('common.destination')}
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_DESTINATION.getRoute(policyID, rateID, subRateID))}
-                            shouldShowRightIcon
-                        />
-                        <MenuItemWithTopDescription
-                            title={selectedSubRate?.name}
-                            description={translate('common.subrate')}
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_SUBRATE.getRoute(policyID, rateID, subRateID))}
-                            shouldShowRightIcon
-                        />
-                        <MenuItemWithTopDescription
-                            title={amountValue}
-                            description={translate('workspace.perDiem.amount')}
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_AMOUNT.getRoute(policyID, rateID, subRateID))}
-                            shouldShowRightIcon
-                        />
-                        <MenuItemWithTopDescription
-                            title={currencyValue}
-                            description={translate('common.currency')}
-                            onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_CURRENCY.getRoute(policyID, rateID, subRateID))}
-                            shouldShowRightIcon
-                        />
-                        <MenuItem
-                            icon={Expensicons.Trashcan}
-                            title={translate('common.delete')}
-                            onPress={() => setDeletePerDiemConfirmModalVisible(true)}
-                        />
-                    </ScrollView>
-                </FullPageBlockingView>
+                    <MenuItemWithTopDescription
+                        title={selectedRate?.name}
+                        description={translate('common.destination')}
+                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_DESTINATION.getRoute(policyID, rateID, subRateID))}
+                        shouldShowRightIcon
+                    />
+                    <MenuItemWithTopDescription
+                        title={selectedSubRate?.name}
+                        description={translate('common.subrate')}
+                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_SUBRATE.getRoute(policyID, rateID, subRateID))}
+                        shouldShowRightIcon
+                    />
+                    <MenuItemWithTopDescription
+                        title={amountValue}
+                        description={translate('workspace.perDiem.amount')}
+                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_AMOUNT.getRoute(policyID, rateID, subRateID))}
+                        shouldShowRightIcon
+                    />
+                    <MenuItemWithTopDescription
+                        title={currencyValue}
+                        description={translate('common.currency')}
+                        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM_EDIT_CURRENCY.getRoute(policyID, rateID, subRateID))}
+                        shouldShowRightIcon
+                    />
+                    <MenuItem
+                        icon={Expensicons.Trashcan}
+                        title={translate('common.delete')}
+                        onPress={() => setDeletePerDiemConfirmModalVisible(true)}
+                    />
+                </ScrollView>
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );