From fd919afe17d625a41c3dc3239333a2567a536e26 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 17 Mar 2024 14:52:12 +0100 Subject: [PATCH 01/28] Fix: There's a lot of extra space above the report actions --- .../ReportActionItem/MoneyReportView.tsx | 205 +++++++++--------- .../ReportActionItem/MoneyRequestView.tsx | 5 +- src/pages/home/report/ReportActionItem.tsx | 39 ++-- .../home/report/ReportActionItemCreated.tsx | 49 ++--- .../report/ReportActionItemParentAction.tsx | 4 +- src/pages/home/report/ReportActionsList.tsx | 6 +- src/styles/utils/index.ts | 46 +--- 7 files changed, 152 insertions(+), 202 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 60dbfc07966a..277695fc4949 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -65,115 +65,112 @@ function MoneyReportView({report, policy, policyReportFields, shouldShowHorizont }, [policyReportFields, report]); return ( - - - - {!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ( - <> - {ReportUtils.reportFieldsEnabled(report) && - sortedPolicyReportFields.map((reportField) => { - const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField); - const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue; - const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy); + + {!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ( + <> + {ReportUtils.reportFieldsEnabled(report) && + sortedPolicyReportFields.map((reportField) => { + const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField); + const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue; + const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy); - return ( - - Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))} - shouldShowRightIcon - disabled={isFieldDisabled} - wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} - shouldGreyOutWhenDisabled={false} - numberOfLinesTitle={0} - interactive - shouldStackHorizontally={false} - onSecondaryInteraction={() => {}} - hoverAndPressStyle={false} - titleWithTooltips={[]} - /> - - ); - })} - - - - {translate('common.total')} - - - - {isSettled && ( - - - - )} - - {formattedTotalAmount} - - + Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))} + shouldShowRightIcon + disabled={isFieldDisabled} + wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} + shouldGreyOutWhenDisabled={false} + numberOfLinesTitle={0} + interactive + shouldStackHorizontally={false} + onSecondaryInteraction={() => {}} + hoverAndPressStyle={false} + titleWithTooltips={[]} + /> + + ); + })} + + + + {translate('common.total')} + - {Boolean(shouldShowBreakdown) && ( - <> - - - - {translate('cardTransactions.outOfPocket')} - - - - - {formattedOutOfPocketAmount} - - + + {isSettled && ( + + + + )} + + {formattedTotalAmount} + + + + {Boolean(shouldShowBreakdown) && ( + <> + + + + {translate('cardTransactions.outOfPocket')} + - - - - {translate('cardTransactions.companySpend')} - - - - - {formattedCompanySpendAmount} - - + + + {formattedOutOfPocketAmount} + + + + + + + {translate('cardTransactions.companySpend')} + - - )} - - - )} - + + + {formattedCompanySpendAmount} + + + + + )} + + + )} ); } diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 70c65d1d66ce..a3da164aeabf 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -237,9 +237,8 @@ function MoneyRequestView({ ); return ( - - - + + {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} {(showMapAsImage || hasReceipt) && ( - - - - - ${translate(isReversedTransaction ? 'parentReportAction.reversedTransaction' : 'parentReportAction.deletedRequest')}`} - /> - - - - + + + + ${translate(isReversedTransaction ? 'parentReportAction.reversedTransaction' : 'parentReportAction.deletedRequest')}`} + /> + + + ); } @@ -699,9 +696,8 @@ function ReportActionItem({ if (ReportUtils.isTaskReport(report)) { if (ReportUtils.isCanceledTaskReport(report, parentReportAction)) { return ( - - - + + - - + + navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID)} needsOffscreenAlphaCompositing > - - - + ReportUtils.navigateToDetailsPage(props.report)} + style={[styles.mh5, styles.mb3, styles.alignSelfStart]} + accessibilityLabel={translate('common.details')} + role={CONST.ROLE.BUTTON} + disabled={shouldDisableDetailPage} > - ReportUtils.navigateToDetailsPage(props.report)} - style={[styles.mh5, styles.mb3, styles.alignSelfStart]} - accessibilityLabel={translate('common.details')} - role={CONST.ROLE.BUTTON} - disabled={shouldDisableDetailPage} - > - - - - - + + + + diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 7185ab728ccd..256ae307af73 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -70,9 +70,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh }, []); return ( - - - + {allAncestors.map((ancestor) => ( - + + Date: Sun, 17 Mar 2024 15:04:15 +0100 Subject: [PATCH 02/28] Fix: There's a lot of extra space above the report actions --- src/CONST.ts | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index c3e61c0c75d8..2d79d0bf2a66 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -158,27 +158,12 @@ const CONST = { // Sizes needed for report empty state background image handling EMPTY_STATE_BACKGROUND: { ASPECT_RATIO: 3.72, + OVERLAP: 60, SMALL_SCREEN: { IMAGE_HEIGHT: 300, - CONTAINER_MINHEIGHT: 200, - VIEW_HEIGHT: 240, }, WIDE_SCREEN: { IMAGE_HEIGHT: 450, - CONTAINER_MINHEIGHT: 500, - VIEW_HEIGHT: 390, - }, - MONEY_OR_TASK_REPORT: { - SMALL_SCREEN: { - IMAGE_HEIGHT: 300, - CONTAINER_MINHEIGHT: 280, - VIEW_HEIGHT: 240, - }, - WIDE_SCREEN: { - IMAGE_HEIGHT: 450, - CONTAINER_MINHEIGHT: 280, - VIEW_HEIGHT: 390, - }, }, }, From 008e9939d03b5e42715f9bdd1079e34224398df2 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:11:55 +0100 Subject: [PATCH 03/28] Fix lint errors --- src/components/ReportActionItem/MoneyReportView.tsx | 3 --- src/components/ReportActionItem/MoneyRequestView.tsx | 5 ----- src/pages/home/report/ReportActionItem.tsx | 1 - src/pages/home/report/ReportActionItemCreated.tsx | 3 --- src/pages/home/report/ReportActionItemParentAction.tsx | 5 ----- src/styles/utils/index.ts | 2 +- 6 files changed, 1 insertion(+), 18 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 277695fc4949..c237cd5bcbb4 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -13,11 +13,9 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; -import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; import variables from '@styles/variables'; import ROUTES from '@src/ROUTES'; import type {Policy, PolicyReportField, Report} from '@src/types/onyx'; @@ -41,7 +39,6 @@ function MoneyReportView({report, policy, policyReportFields, shouldShowHorizont const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); const isSettled = ReportUtils.isSettled(report.reportID); const isTotalUpdated = ReportUtils.hasUpdatedTotal(report); diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index a3da164aeabf..aacbae54cc03 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -13,12 +13,10 @@ import Text from '@components/Text'; import ViolationMessages from '@components/ViolationMessages'; import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; -import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useViolations from '@hooks/useViolations'; import type {ViolationField} from '@hooks/useViolations'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as OptionsListUtils from '@libs/OptionsListUtils'; @@ -28,7 +26,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import ViolationsUtils from '@libs/Violations/ViolationsUtils'; import Navigation from '@navigation/Navigation'; -import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; import * as IOU from '@userActions/IOU'; import * as Transaction from '@userActions/Transaction'; import CONST from '@src/CONST'; @@ -87,8 +84,6 @@ function MoneyRequestView({ }: MoneyRequestViewProps) { const theme = useTheme(); const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); - const {isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); const {canUseViolations} = usePermissions(); const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null; diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index a9ac131b9771..c6b7e667cd00 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -63,7 +63,6 @@ import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {OriginalMessageActionableMentionWhisper, OriginalMessageJoinPolicyChangeLog} from '@src/types/onyx/OriginalMessage'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu'; import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'; import {hideContextMenu} from './ContextMenu/ReportActionContextMenu'; diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 71c975e50652..93c73c64f74c 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -7,7 +7,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ReportWelcomeText from '@components/ReportWelcomeText'; import useLocalize from '@hooks/useLocalize'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector'; @@ -16,7 +15,6 @@ import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; -import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; type ReportActionItemCreatedOnyxProps = { /** The report currently being looked at */ @@ -39,7 +37,6 @@ type ReportActionItemCreatedProps = ReportActionItemCreatedOnyxProps & { }; function ReportActionItemCreated(props: ReportActionItemCreatedProps) { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const {isSmallScreenWidth, isLargeScreenWidth} = useWindowDimensions(); diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 256ae307af73..3568bcd511ea 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -2,9 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import onyxSubscribe from '@libs/onyxSubscribe'; import * as ReportUtils from '@libs/ReportUtils'; @@ -12,7 +10,6 @@ import * as Report from '@userActions/Report'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; -import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; import ReportActionItem from './ReportActionItem'; type ReportActionItemParentActionProps = { @@ -35,8 +32,6 @@ type ReportActionItemParentActionProps = { function ReportActionItemParentAction({report, parentReportAction, index = 0, shouldHideThreadDividerLine = false}: ReportActionItemParentActionProps) { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); - const {isSmallScreenWidth} = useWindowDimensions(); const ancestorIDs = useRef(ReportUtils.getAllAncestorReportActionIDs(report)); const [allAncestors, setAllAncestors] = useState([]); diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 33eed1f28120..7368ab7c731d 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -749,7 +749,7 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv /** * Gets the correct size for the empty state background image based on screen dimensions */ -function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMoneyOrTaskReport = false): ImageStyle { +function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): ImageStyle { if (isSmallScreenWidth) { return { height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT, From 7be7a4649673805197675d6c477efeef85670085 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:45:31 +0100 Subject: [PATCH 04/28] Fix failing test --- tests/perf-test/ReportScreen.perf-test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/perf-test/ReportScreen.perf-test.js b/tests/perf-test/ReportScreen.perf-test.js index bc127ff8a1f1..4fcaec042ddc 100644 --- a/tests/perf-test/ReportScreen.perf-test.js +++ b/tests/perf-test/ReportScreen.perf-test.js @@ -29,6 +29,7 @@ jest.mock('react-native-reanimated', () => ({ useSharedValue: jest.fn, useAnimatedStyle: jest.fn, useAnimatedRef: jest.fn, + useReducedMotion: jest.fn, })); jest.mock('../../src/components/ConfirmedRoute.tsx'); From 9484d6d3da34cdd446a444ff90f505bfc94f50c3 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 17 Mar 2024 16:18:31 +0100 Subject: [PATCH 05/28] fix: list not scrollable --- src/pages/home/report/ReportActionsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 658d31f437b2..edf35e5ae714 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -539,7 +539,7 @@ function ReportActionsList({ isActive={isFloatingMessageCounterVisible && !!currentUnreadMarker} onClick={scrollToBottomAndMarkReportAsRead} /> - + Date: Wed, 20 Mar 2024 00:20:16 +0100 Subject: [PATCH 06/28] remove unnecessary View --- src/pages/home/report/ReportActionItem.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index c6b7e667cd00..225c9637d326 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -696,18 +696,16 @@ function ReportActionItem({ if (ReportUtils.isCanceledTaskReport(report, parentReportAction)) { return ( - - - - ${translate('parentReportAction.deletedTask')}`} /> - - - - + + + ${translate('parentReportAction.deletedTask')}`} /> + + + ); } From e247fb133eb1bba0560a0a7cb1438b203f0ba186 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 22:34:13 +0100 Subject: [PATCH 07/28] Display the pointer cursor when hovering over any part of the message --- src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index b0c88d151484..b45f4851bdce 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1894,7 +1894,6 @@ const styles = (theme: ThemeColors) => fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, lineHeight: variables.lineHeightXLarge, maxWidth: '100%', - ...cursor.cursorAuto, ...whiteSpace.preWrap, ...wordBreak.breakWord, }, From f7f3a9039e1e99b4dd0300c02d3e1125ad5a60c7 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 23:24:21 +0100 Subject: [PATCH 08/28] fix lint errors --- .../ReportActionItem/MoneyReportView.tsx | 210 +++++++++--------- 1 file changed, 103 insertions(+), 107 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 1f61fc73e595..a2628c242177 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -13,7 +13,6 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; @@ -37,7 +36,6 @@ function MoneyReportView({report, policy, shouldShowHorizontalRule}: MoneyReport const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); const isSettled = ReportUtils.isSettled(report.reportID); const isTotalUpdated = ReportUtils.hasUpdatedTotal(report); @@ -60,116 +58,114 @@ function MoneyReportView({report, policy, shouldShowHorizontalRule}: MoneyReport return fields.sort(({orderWeight: firstOrderWeight}, {orderWeight: secondOrderWeight}) => firstOrderWeight - secondOrderWeight); }, [policy, report]); - return ( - <> - {!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ( - <> - {ReportUtils.reportFieldsEnabled(report) && - sortedPolicyReportFields.map((reportField) => { - const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField); - const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue; - const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy); - const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID); + if (!ReportUtils.isClosedExpenseReportWithNoExpenses(report)) { + return ( + <> + {ReportUtils.reportFieldsEnabled(report) && + sortedPolicyReportFields.map((reportField) => { + const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField); + const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue; + const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy); + const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID); - return ( - - Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))} - shouldShowRightIcon - disabled={isFieldDisabled} - wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} - shouldGreyOutWhenDisabled={false} - numberOfLinesTitle={0} - interactive - shouldStackHorizontally={false} - onSecondaryInteraction={() => {}} - hoverAndPressStyle={false} - titleWithTooltips={[]} - /> - - ); - })} - - - - {translate('common.total')} - - - - {isSettled && ( - - - - )} - - {formattedTotalAmount} - - + Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))} + shouldShowRightIcon + disabled={isFieldDisabled} + wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} + shouldGreyOutWhenDisabled={false} + numberOfLinesTitle={0} + interactive + shouldStackHorizontally={false} + onSecondaryInteraction={() => {}} + hoverAndPressStyle={false} + titleWithTooltips={[]} + /> + + ); + })} + + + + {translate('common.total')} + - {Boolean(shouldShowBreakdown) && ( - <> - - - - {translate('cardTransactions.outOfPocket')} - - - - - {formattedOutOfPocketAmount} - - + + {isSettled && ( + + + + )} + + {formattedTotalAmount} + + + + {Boolean(shouldShowBreakdown) && ( + <> + + + + {translate('cardTransactions.outOfPocket')} + - - - - {translate('cardTransactions.companySpend')} - - - - - {formattedCompanySpendAmount} - - + + + {formattedOutOfPocketAmount} + + + + + + + {translate('cardTransactions.companySpend')} + - - )} - - - )} - - ); + + + {formattedCompanySpendAmount} + + + + + )} + + + ); + } } MoneyReportView.displayName = 'MoneyReportView'; From 6a0fc4c33d0abc2dca6c23254ca635b9c5883588 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 23:32:42 +0100 Subject: [PATCH 09/28] address review comments --- .../ReportActionItem/MoneyRequestView.tsx | 326 +++++++++--------- .../report/ReportActionItemParentAction.tsx | 4 +- 2 files changed, 161 insertions(+), 169 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index aacbae54cc03..402a8d64c230 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -232,205 +232,197 @@ function MoneyRequestView({ ); return ( - - - {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} - {(showMapAsImage || hasReceipt) && ( - { - if (!transaction?.transactionID) { - return; - } - Transaction.clearError(transaction.transactionID); - }} - > - - {showMapAsImage ? ( - - ) : ( - - )} - - - )} - {!hasReceipt && canEditReceipt && ( - - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute( - CONST.IOU.ACTION.EDIT, - CONST.IOU.TYPE.REQUEST, - transaction?.transactionID ?? '', - report.reportID, - Navigation.getActiveRouteWithoutParams(), - ), - ) + <> + {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} + {(showMapAsImage || hasReceipt) && ( + { + if (!transaction?.transactionID) { + return; } - /> - )} - {canUseViolations && } - + Transaction.clearError(transaction.transactionID); + }} + > + + {showMapAsImage ? ( + + ) : ( + + )} + + + )} + {!hasReceipt && canEditReceipt && ( + + Navigation.navigate( + ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute( + CONST.IOU.ACTION.EDIT, + CONST.IOU.TYPE.REQUEST, + transaction?.transactionID ?? '', + report.reportID, + Navigation.getActiveRouteWithoutParams(), + ), + ) + } + /> + )} + {canUseViolations && } + + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} + brickRoadIndicator={getErrorForField('amount') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('amount')} + /> + + + + Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) + } + wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} + brickRoadIndicator={getErrorForField('comment') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('comment')} + numberOfLinesTitle={0} + /> + + {isDistanceRequest ? ( + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} - brickRoadIndicator={getErrorForField('amount') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('amount')} + description={translate('common.distance')} + title={transactionMerchant} + interactive={canEditDistance} + shouldShowRightIcon={canEditDistance} + titleStyle={styles.flex1} + onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))} /> - + ) : ( + - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID), - ) + Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) } - wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} - brickRoadIndicator={getErrorForField('comment') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('comment')} - numberOfLinesTitle={0} + brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('merchant')} /> - {isDistanceRequest ? ( - - Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))} - /> - - ) : ( - - - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID), - ) - } - brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('merchant')} - /> - - )} - + )} + + + Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) + } + brickRoadIndicator={getErrorForField('date') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('date')} + /> + + {shouldShowCategory && ( + - Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) + Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) } - brickRoadIndicator={getErrorForField('date') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('date')} + brickRoadIndicator={getErrorForField('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('category')} /> - {shouldShowCategory && ( - + )} + {shouldShowTag && + policyTagLists.map(({name}, index) => ( + Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID), + ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, index, transaction?.transactionID ?? '', report.reportID), ) } - brickRoadIndicator={getErrorForField('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('category')} + brickRoadIndicator={getErrorForField('tag', {tagListIndex: index, tagListName: name}) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('tag', {tagListIndex: index, tagListName: name})} /> - )} - {shouldShowTag && - policyTagLists.map(({name}, index) => ( - - - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, index, transaction?.transactionID ?? '', report.reportID), - ) - } - brickRoadIndicator={getErrorForField('tag', {tagListIndex: index, tagListName: name}) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('tag', {tagListIndex: index, tagListName: name})} + ))} + {isCardTransaction && ( + + + + )} + {shouldShowBillable && ( + + + {translate('common.billable')} + {!!getErrorForField('billable') && ( + - - ))} - {isCardTransaction && ( - - - - )} - {shouldShowBillable && ( - - - {translate('common.billable')} - {!!getErrorForField('billable') && ( - - )} - - + )} - )} - + + + )} - + ); } diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 3568bcd511ea..1a2b53645fb3 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -65,7 +65,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh }, []); return ( - + <> {allAncestors.map((ancestor) => ( } ))} - + ); } From 17065b5882905c5557039357205fa4126e326a3e Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 23:44:04 +0100 Subject: [PATCH 10/28] Fix MoneyRequestView layout --- .../ReportActionItem/MoneyRequestView.tsx | 322 +++++++++--------- 1 file changed, 165 insertions(+), 157 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 402a8d64c230..bff895e1c928 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -233,191 +233,199 @@ function MoneyRequestView({ return ( <> - {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} - {(showMapAsImage || hasReceipt) && ( - { - if (!transaction?.transactionID) { - return; + + {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} + {(showMapAsImage || hasReceipt) && ( + { + if (!transaction?.transactionID) { + return; + } + Transaction.clearError(transaction.transactionID); + }} + > + + {showMapAsImage ? ( + + ) : ( + + )} + + + )} + {!hasReceipt && canEditReceipt && ( + + Navigation.navigate( + ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute( + CONST.IOU.ACTION.EDIT, + CONST.IOU.TYPE.REQUEST, + transaction?.transactionID ?? '', + report.reportID, + Navigation.getActiveRouteWithoutParams(), + ), + ) } - Transaction.clearError(transaction.transactionID); - }} - > - - {showMapAsImage ? ( - - ) : ( - - )} - - - )} - {!hasReceipt && canEditReceipt && ( - - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute( - CONST.IOU.ACTION.EDIT, - CONST.IOU.TYPE.REQUEST, - transaction?.transactionID ?? '', - report.reportID, - Navigation.getActiveRouteWithoutParams(), - ), - ) - } - /> - )} - {canUseViolations && } - - Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} - brickRoadIndicator={getErrorForField('amount') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('amount')} - /> - - - - Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) - } - wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} - brickRoadIndicator={getErrorForField('comment') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('comment')} - numberOfLinesTitle={0} - /> - - {isDistanceRequest ? ( - + /> + )} + {canUseViolations && } + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))} + title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''} + shouldShowTitleIcon={isSettled} + titleIcon={Expensicons.Checkmark} + description={amountDescription} + titleStyle={styles.textHeadlineH2} + interactive={canEditAmount} + shouldShowRightIcon={canEditAmount} + onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))} + brickRoadIndicator={getErrorForField('amount') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('amount')} /> - ) : ( - + - Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) + Navigation.navigate( + ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID), + ) } - brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('merchant')} + wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} + brickRoadIndicator={getErrorForField('comment') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('comment')} + numberOfLinesTitle={0} /> - )} - - - Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) - } - brickRoadIndicator={getErrorForField('date') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('date')} - /> - - {shouldShowCategory && ( - + {isDistanceRequest ? ( + + Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))} + /> + + ) : ( + + + Navigation.navigate( + ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID), + ) + } + brickRoadIndicator={getErrorForField('merchant') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('merchant')} + /> + + )} + - Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) + Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID)) } - brickRoadIndicator={getErrorForField('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('category')} + brickRoadIndicator={getErrorForField('date') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('date')} /> - )} - {shouldShowTag && - policyTagLists.map(({name}, index) => ( - + {shouldShowCategory && ( + Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, index, transaction?.transactionID ?? '', report.reportID), + ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, transaction?.transactionID ?? '', report.reportID), ) } - brickRoadIndicator={getErrorForField('tag', {tagListIndex: index, tagListName: name}) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} - error={getErrorForField('tag', {tagListIndex: index, tagListName: name})} + brickRoadIndicator={getErrorForField('category') ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('category')} /> - ))} - {isCardTransaction && ( - - - - )} - {shouldShowBillable && ( - - - {translate('common.billable')} - {!!getErrorForField('billable') && ( - ( + + + Navigation.navigate( + ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.EDIT, CONST.IOU.TYPE.REQUEST, index, transaction?.transactionID ?? '', report.reportID), + ) + } + brickRoadIndicator={getErrorForField('tag', {tagListIndex: index, tagListName: name}) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} + error={getErrorForField('tag', {tagListIndex: index, tagListName: name})} /> - )} + + ))} + {isCardTransaction && ( + + + + )} + {shouldShowBillable && ( + + + {translate('common.billable')} + {!!getErrorForField('billable') && ( + + )} + + - - - )} + )} + Date: Tue, 26 Mar 2024 21:15:23 +0100 Subject: [PATCH 11/28] make the background image overlap scroll with the content, so that at some point the background image just scrolls off the view entirely. --- .../ReportActionItem/MoneyReportView.tsx | 210 +++++++++--------- .../ReportActionItem/MoneyRequestView.tsx | 10 +- .../report/AnimatedEmptyStateBackground.tsx | 21 +- src/pages/home/report/ReportActionItem.tsx | 40 ++-- .../home/report/ReportActionItemCreated.tsx | 50 +++-- .../report/ReportActionItemParentAction.tsx | 6 +- src/styles/utils/index.ts | 29 ++- 7 files changed, 209 insertions(+), 157 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index a2628c242177..d0d4e8b5f988 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -16,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; +import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; import variables from '@styles/variables'; import ROUTES from '@src/ROUTES'; import type {Policy, PolicyReportField, Report} from '@src/types/onyx'; @@ -58,114 +59,117 @@ function MoneyReportView({report, policy, shouldShowHorizontalRule}: MoneyReport return fields.sort(({orderWeight: firstOrderWeight}, {orderWeight: secondOrderWeight}) => firstOrderWeight - secondOrderWeight); }, [policy, report]); - if (!ReportUtils.isClosedExpenseReportWithNoExpenses(report)) { - return ( - <> - {ReportUtils.reportFieldsEnabled(report) && - sortedPolicyReportFields.map((reportField) => { - const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField); - const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue; - const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy); - const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID); + return ( + + + {!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ( + <> + {ReportUtils.reportFieldsEnabled(report) && + sortedPolicyReportFields.map((reportField) => { + const isTitleField = ReportUtils.isReportFieldOfTypeTitle(reportField); + const fieldValue = isTitleField ? report.reportName : reportField.value ?? reportField.defaultValue; + const isFieldDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy); + const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID); - return ( - - Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))} - shouldShowRightIcon - disabled={isFieldDisabled} - wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} - shouldGreyOutWhenDisabled={false} - numberOfLinesTitle={0} - interactive - shouldStackHorizontally={false} - onSecondaryInteraction={() => {}} - hoverAndPressStyle={false} - titleWithTooltips={[]} - /> - - ); - })} - - - - {translate('common.total')} - - - - {isSettled && ( - - - - )} - - {formattedTotalAmount} - - - - {Boolean(shouldShowBreakdown) && ( - <> - - - - {translate('cardTransactions.outOfPocket')} - - - - - {formattedOutOfPocketAmount} - - + Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))} + shouldShowRightIcon + disabled={isFieldDisabled} + wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} + shouldGreyOutWhenDisabled={false} + numberOfLinesTitle={0} + interactive + shouldStackHorizontally={false} + onSecondaryInteraction={() => {}} + hoverAndPressStyle={false} + titleWithTooltips={[]} + /> + + ); + })} + + + + {translate('common.total')} + - - - - {translate('cardTransactions.companySpend')} - + + {isSettled && ( + + + + )} + + {formattedTotalAmount} + + + + {Boolean(shouldShowBreakdown) && ( + <> + + + + {translate('cardTransactions.outOfPocket')} + + + + + {formattedOutOfPocketAmount} + + - - - {formattedCompanySpendAmount} - + + + + {translate('cardTransactions.companySpend')} + + + + + {formattedCompanySpendAmount} + + - - - )} - - - ); - } + + )} + + + )} + + ); } MoneyReportView.displayName = 'MoneyReportView'; diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index a3b434878def..ff7090dfb39c 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -26,6 +26,7 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import ViolationsUtils from '@libs/Violations/ViolationsUtils'; import Navigation from '@navigation/Navigation'; +import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; import * as IOU from '@userActions/IOU'; import * as Transaction from '@userActions/Transaction'; import CONST from '@src/CONST'; @@ -232,8 +233,9 @@ function MoneyRequestView({ ); return ( - <> - + + + <> {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} {(showMapAsImage || hasReceipt) && ( )} - + - + ); } diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index 4199ebe5937f..ddeefbb77879 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -1,7 +1,9 @@ import React from 'react'; +import {View} from 'react-native'; import Animated, {clamp, SensorType, useAnimatedSensor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring} from 'react-native-reanimated'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeIllustrations from '@hooks/useThemeIllustrations'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -10,8 +12,13 @@ import CONST from '@src/CONST'; const IMAGE_OFFSET_X = 30; const IMAGE_OFFSET_Y = 20; -function AnimatedEmptyStateBackground() { +type AnimatedEmptyStateBackgroundProps = { + /** Whether we should display the image as the overlap of report action */ + isOverlapBackgroundImage?: boolean; +}; +function AnimatedEmptyStateBackground({isOverlapBackgroundImage = false}: AnimatedEmptyStateBackgroundProps) { const StyleUtils = useStyleUtils(); + const styles = useThemeStyles(); const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); const illustrations = useThemeIllustrations(); @@ -45,11 +52,13 @@ function AnimatedEmptyStateBackground() { }, [isReducedMotionEnabled]); return ( - maxBackgroundWidth ? 'repeat' : 'cover'} - /> + + maxBackgroundWidth ? 'repeat' : 'cover'} + /> + ); } diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index a0dc02ccdacd..da2e4887ddc7 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -64,6 +64,7 @@ import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import type {OriginalMessageActionableMentionWhisper, OriginalMessageJoinPolicyChangeLog} from '@src/types/onyx/OriginalMessage'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu'; import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'; import {hideContextMenu} from './ContextMenu/ReportActionContextMenu'; @@ -677,16 +678,19 @@ function ReportActionItem({ message = 'parentReportAction.deletedRequest'; } return ( - - - ${translate(message)}`} /> - - - + + + + + ${translate(message)}`} /> + + + + ); } return ( @@ -701,7 +705,8 @@ function ReportActionItem({ if (ReportUtils.isTaskReport(report)) { if (ReportUtils.isCanceledTaskReport(report, parentReportAction)) { return ( - <> + + - + ); } return ( - + + + + ); } if (ReportUtils.isExpenseReport(report) || ReportUtils.isIOUReport(report)) { diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 93c73c64f74c..7e77738aa875 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -15,6 +15,7 @@ import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; +import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; type ReportActionItemCreatedOnyxProps = { /** The report currently being looked at */ @@ -56,30 +57,33 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { onClose={() => navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID)} needsOffscreenAlphaCompositing > - - ReportUtils.navigateToDetailsPage(props.report)} - style={[styles.mh5, styles.mb3, styles.alignSelfStart]} - accessibilityLabel={translate('common.details')} - role={CONST.ROLE.BUTTON} - disabled={shouldDisableDetailPage} + + + - - - - + ReportUtils.navigateToDetailsPage(props.report)} + style={[styles.mh5, styles.mb3, styles.alignSelfStart]} + accessibilityLabel={translate('common.details')} + role={CONST.ROLE.BUTTON} + disabled={shouldDisableDetailPage} + > + + + + + diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 1a2b53645fb3..d53a80414454 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -10,6 +10,7 @@ import * as Report from '@userActions/Report'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; +import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; import ReportActionItem from './ReportActionItem'; type ReportActionItemParentActionProps = { @@ -65,7 +66,8 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh }, []); return ( - <> + + {allAncestors.map((ancestor) => ( } ))} - + ); } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 6b4d51a85fff..2b9fe7285da9 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -749,13 +749,13 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv /** * Gets the correct size for the empty state background image based on screen dimensions */ -function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): ImageStyle { +function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isOverlapBackgroundImage = false): ImageStyle { if (isSmallScreenWidth) { return { height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT, width: '100%', position: 'absolute', - top: CONST.EMPTY_STATE_BACKGROUND.OVERLAP - CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT, + ...(isOverlapBackgroundImage ? {bottom: 0} : {top: 0}), }; } @@ -763,7 +763,29 @@ function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): Imag height: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT, width: '100%', position: 'absolute', - top: CONST.EMPTY_STATE_BACKGROUND.OVERLAP - CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT, + ...(isOverlapBackgroundImage ? {bottom: 0} : {top: 0}), + }; +} +/** + * Gets the style for the container of the empty state background image that overlap the created report action + */ +function getReportWelcomeBackgroundContainerStyle(styles: ThemeStyles, isSmallScreenWidth: boolean, isOverlapBackgroundImage = false): ViewStyle { + if (isSmallScreenWidth) { + return { + height: isOverlapBackgroundImage ? CONST.EMPTY_STATE_BACKGROUND.OVERLAP : CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP, + overflow: 'hidden', + width: '100%', + position: 'absolute', + top: isOverlapBackgroundImage ? - styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), + }; + } + + return { + height: isOverlapBackgroundImage ? CONST.EMPTY_STATE_BACKGROUND.OVERLAP : CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP, + overflow: 'hidden', + width: '100%', + position: 'absolute', + top: isOverlapBackgroundImage ? - styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), }; } @@ -1068,6 +1090,7 @@ const staticStyleUtils = { getHorizontalStackedAvatarStyle, getHorizontalStackedOverlayAvatarStyle, getReportWelcomeBackgroundImageStyle, + getReportWelcomeBackgroundContainerStyle, getBaseAutoCompleteSuggestionContainerStyle, getBorderColorStyle, getCheckboxPressableStyle, From 376c7b2084787263f3ab703f64267b1d1ac7c529 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 26 Mar 2024 21:25:56 +0100 Subject: [PATCH 12/28] add missing isOverlapBackgroundImage and fix lint errors --- src/components/ReportActionItem/MoneyReportView.tsx | 2 +- src/components/ReportActionItem/MoneyRequestView.tsx | 2 +- src/pages/home/report/ReportActionItem.tsx | 6 +++--- src/pages/home/report/ReportActionItemCreated.tsx | 2 +- src/pages/home/report/ReportActionItemParentAction.tsx | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index d0d4e8b5f988..d5342af1250a 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -61,7 +61,7 @@ function MoneyReportView({report, policy, shouldShowHorizontalRule}: MoneyReport return ( - + {!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ( <> {ReportUtils.reportFieldsEnabled(report) && diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index ff7090dfb39c..a42f05d79914 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -234,7 +234,7 @@ function MoneyRequestView({ return ( - + <> {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} {(showMapAsImage || hasReceipt) && ( diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index f28ee996fb19..acf0d97f23c1 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -679,7 +679,7 @@ function ReportActionItem({ } return ( - + - + - + - + - + {allAncestors.map((ancestor) => ( Date: Tue, 26 Mar 2024 21:33:14 +0100 Subject: [PATCH 13/28] prettier --- src/styles/utils/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 2b9fe7285da9..bc9364afb888 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -776,7 +776,7 @@ function getReportWelcomeBackgroundContainerStyle(styles: ThemeStyles, isSmallSc overflow: 'hidden', width: '100%', position: 'absolute', - top: isOverlapBackgroundImage ? - styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), + top: isOverlapBackgroundImage ? -styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), }; } @@ -785,7 +785,7 @@ function getReportWelcomeBackgroundContainerStyle(styles: ThemeStyles, isSmallSc overflow: 'hidden', width: '100%', position: 'absolute', - top: isOverlapBackgroundImage ? - styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), + top: isOverlapBackgroundImage ? -styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), }; } From a71aecd8faf0525118ac5afefe70dc685a0d63a3 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 26 Mar 2024 23:21:55 +0100 Subject: [PATCH 14/28] fix native and mweb style --- src/pages/home/report/AnimatedEmptyStateBackground.tsx | 2 +- src/styles/utils/index.ts | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index ddeefbb77879..4579e75eb3b1 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -52,7 +52,7 @@ function AnimatedEmptyStateBackground({isOverlapBackgroundImage = false}: Animat }, [isReducedMotionEnabled]); return ( - + Date: Tue, 26 Mar 2024 23:28:29 +0100 Subject: [PATCH 15/28] fix lint error --- src/pages/home/report/AnimatedEmptyStateBackground.tsx | 2 +- src/styles/utils/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index 4579e75eb3b1..1939f5c39b1b 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -55,7 +55,7 @@ function AnimatedEmptyStateBackground({isOverlapBackgroundImage = false}: Animat maxBackgroundWidth ? 'repeat' : 'cover'} /> diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 76e9b29c0fee..fc65881c033f 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -749,7 +749,7 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv /** * Gets the correct size for the empty state background image based on screen dimensions */ -function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isOverlapBackgroundImage = false): ImageStyle { +function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): ImageStyle { if (isSmallScreenWidth) { return { height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT, From 177fde9d82170df665cbaa78c35fab4e2f9168c8 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 26 Mar 2024 23:35:45 +0100 Subject: [PATCH 16/28] prettier --- src/pages/home/report/AnimatedEmptyStateBackground.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index 1939f5c39b1b..9000a1862af0 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -52,7 +52,12 @@ function AnimatedEmptyStateBackground({isOverlapBackgroundImage = false}: Animat }, [isReducedMotionEnabled]); return ( - + Date: Thu, 28 Mar 2024 01:58:48 +0100 Subject: [PATCH 17/28] revert a change mad by error --- src/styles/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/index.ts b/src/styles/index.ts index d31beed7a9c4..bb772fff7534 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1898,6 +1898,7 @@ const styles = (theme: ThemeColors) => fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, lineHeight: variables.lineHeightXLarge, maxWidth: '100%', + ...cursor.cursorAuto, ...whiteSpace.preWrap, ...wordBreak.breakWord, }, From 58ff868aa78f5e09f360516b884262071405688e Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 7 Apr 2024 16:54:50 +0100 Subject: [PATCH 18/28] correct the empty state image logic --- .../ReportActionItem/MoneyReportView.tsx | 4 ++-- .../ReportActionItem/MoneyRequestView.tsx | 2 +- .../report/AnimatedEmptyStateBackground.tsx | 17 +++-------------- src/pages/home/report/ReportActionItem.tsx | 12 ++++++------ .../home/report/ReportActionItemCreated.tsx | 4 ++-- .../report/ReportActionItemParentAction.tsx | 4 ++-- src/pages/home/report/ReportActionsList.tsx | 6 ++---- src/styles/index.ts | 4 +++- src/styles/utils/index.ts | 19 ++++++++++--------- tests/perf-test/ReportScreen.perf-test.tsx | 1 - 10 files changed, 31 insertions(+), 42 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index db8fd5a429af..add31407560d 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -61,8 +61,8 @@ function MoneyReportView({report, policy, shouldShowHorizontalRule}: MoneyReport }, [policy, report]); return ( - - + + {!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ( <> {ReportUtils.reportFieldsEnabled(report) && diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 36291e8faabf..c76d8d5a8eb4 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -252,7 +252,7 @@ function MoneyRequestView({ ); return ( - + {shouldShowAnimatedBackground && } <> {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */} diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index 9000a1862af0..9855d4525b05 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -3,7 +3,6 @@ import {View} from 'react-native'; import Animated, {clamp, SensorType, useAnimatedSensor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring} from 'react-native-reanimated'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeIllustrations from '@hooks/useThemeIllustrations'; -import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -12,13 +11,8 @@ import CONST from '@src/CONST'; const IMAGE_OFFSET_X = 30; const IMAGE_OFFSET_Y = 20; -type AnimatedEmptyStateBackgroundProps = { - /** Whether we should display the image as the overlap of report action */ - isOverlapBackgroundImage?: boolean; -}; -function AnimatedEmptyStateBackground({isOverlapBackgroundImage = false}: AnimatedEmptyStateBackgroundProps) { +function AnimatedEmptyStateBackground() { const StyleUtils = useStyleUtils(); - const styles = useThemeStyles(); const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); const illustrations = useThemeIllustrations(); @@ -52,15 +46,10 @@ function AnimatedEmptyStateBackground({isOverlapBackgroundImage = false}: Animat }, [isReducedMotionEnabled]); return ( - + maxBackgroundWidth ? 'repeat' : 'cover'} /> diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 69dab9f2ff76..0827609c5ca1 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -691,8 +691,8 @@ function ReportActionItem({ message = 'parentReportAction.deletedRequest'; } return ( - - + + - + + - + + navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID)} needsOffscreenAlphaCompositing > - - + + - + + {allAncestors.map((ancestor) => ( - - + }, chatContentScrollView: { - justifyContent: 'flex-end', + flexGrow: 1, + justifyContent: 'flex-start', paddingBottom: 16, + overflow: 'hidden', }, // Chat Item diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index a6c4685a50f4..5f4335fd994a 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -766,36 +766,37 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): ImageStyle { if (isSmallScreenWidth) { return { + position: 'absolute', + bottom: 0, height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT, width: '100%', }; } return { + position: 'absolute', + bottom: 0, height: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT, width: '100%', }; } + /** * Gets the style for the container of the empty state background image that overlap the created report action */ -function getReportWelcomeBackgroundContainerStyle(styles: ThemeStyles, isSmallScreenWidth: boolean, isOverlapBackgroundImage = false): ViewStyle { +function getReportWelcomeBackgroundContainerStyle(isSmallScreenWidth: boolean): ViewStyle { if (isSmallScreenWidth) { return { - height: isOverlapBackgroundImage ? CONST.EMPTY_STATE_BACKGROUND.OVERLAP : CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP, - overflow: 'hidden', - width: '100%', position: 'absolute', - top: isOverlapBackgroundImage ? -styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), + top: CONST.EMPTY_STATE_BACKGROUND.OVERLAP, + width: '100%', }; } return { - height: isOverlapBackgroundImage ? CONST.EMPTY_STATE_BACKGROUND.OVERLAP : CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP, - overflow: 'hidden', - width: '100%', position: 'absolute', - top: isOverlapBackgroundImage ? -styles.chatContentScrollView.paddingBottom : -(CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT - CONST.EMPTY_STATE_BACKGROUND.OVERLAP), + top: CONST.EMPTY_STATE_BACKGROUND.OVERLAP, + width: '100%', }; } diff --git a/tests/perf-test/ReportScreen.perf-test.tsx b/tests/perf-test/ReportScreen.perf-test.tsx index a310042a9658..ff3d1473c662 100644 --- a/tests/perf-test/ReportScreen.perf-test.tsx +++ b/tests/perf-test/ReportScreen.perf-test.tsx @@ -43,7 +43,6 @@ jest.mock('react-native-reanimated', () => { useSharedValue: jest.fn, useAnimatedStyle: jest.fn, useAnimatedRef: jest.fn, - useReducedMotion: jest.fn, } as typeof Animated; }); From e9c59a5a72d2c1d417d3a8e86dc1983c1fc77053 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 7 Apr 2024 17:56:58 +0100 Subject: [PATCH 19/28] Fix lint errors --- src/components/ReportActionItem/MoneyReportView.tsx | 1 - src/pages/home/report/AnimatedEmptyStateBackground.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 6fb4cc2732b4..aa10b8cdf5a1 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -39,7 +39,6 @@ function MoneyReportView({report, policy, shouldShowHorizontalRule}: MoneyReport const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); const isSettled = ReportUtils.isSettled(report.reportID); const isTotalUpdated = ReportUtils.hasUpdatedTotal(report); diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index 9855d4525b05..eca0c92bd32f 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -49,7 +49,7 @@ function AnimatedEmptyStateBackground() { maxBackgroundWidth ? 'repeat' : 'cover'} /> From 2c1b5eb86b8a10628beca7757645d30bd5b1a122 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sun, 7 Apr 2024 18:06:59 +0100 Subject: [PATCH 20/28] Fix lint error --- src/components/ReportActionItem/MoneyReportView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index aa10b8cdf5a1..faf07a1d8300 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -13,7 +13,6 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; From b229760c1b5175fb54e9e91d693498525e12d22b Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 15 Apr 2024 01:49:17 +0100 Subject: [PATCH 21/28] fix lint --- src/pages/home/report/ReportActionItemParentAction.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index f265e1d71d7f..d824e90dcad8 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -3,7 +3,6 @@ import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import useNetwork from '@hooks/useNetwork'; -import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import onyxSubscribe from '@libs/onyxSubscribe'; From 82a20a3d80c3972fda764a502cc273dd0e8f2681 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 26 Apr 2024 01:17:48 +0100 Subject: [PATCH 22/28] use overflow hidden for the empty state image only on web and desktop --- src/pages/home/report/ReportActionsList.tsx | 9 +++++++-- src/styles/index.ts | 1 - 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 6f59c1b162c9..58fdc1296d65 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -18,6 +18,7 @@ import useReportScrollManager from '@hooks/useReportScrollManager'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import DateUtils from '@libs/DateUtils'; +import getPlatform from '@libs/getPlatform'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -583,8 +584,12 @@ function ReportActionsList({ const canShowHeader = !isOffline && !hasHeaderRendered.current && scrollingVerticalOffset.current > VERTICAL_OFFSET_THRESHOLD; const contentContainerStyle: StyleProp = useMemo( - () => [styles.chatContentScrollView, isLoadingNewerReportActions && canShowHeader ? styles.chatContentScrollViewWithHeaderLoader : {}], - [isLoadingNewerReportActions, styles.chatContentScrollView, styles.chatContentScrollViewWithHeaderLoader, canShowHeader], + () => [ + getPlatform() === CONST.PLATFORM.WEB || getPlatform() === CONST.PLATFORM.DESKTOP ? styles.overflowHidden : {}, + styles.chatContentScrollView, + isLoadingNewerReportActions && canShowHeader ? styles.chatContentScrollViewWithHeaderLoader : {}, + ], + [isLoadingNewerReportActions, styles.overflowHidden, styles.chatContentScrollView, styles.chatContentScrollViewWithHeaderLoader, canShowHeader], ); const lastReportAction: OnyxTypes.ReportAction | EmptyObject = useMemo(() => sortedReportActions.at(-1) ?? {}, [sortedReportActions]); diff --git a/src/styles/index.ts b/src/styles/index.ts index a47b79965fff..7d448881e3d4 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1925,7 +1925,6 @@ const styles = (theme: ThemeColors) => flexGrow: 1, justifyContent: 'flex-start', paddingBottom: 16, - overflow: 'hidden', }, // Chat Item From a7caa108cd341b6a75c56dbb978c0fe964bd8397 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:32:55 +0100 Subject: [PATCH 23/28] Fix lint --- src/components/ReportActionItem/MoneyRequestView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index d7257e8be3ae..1ac9b8dd3914 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -100,7 +100,6 @@ function MoneyRequestView({ const theme = useTheme(); const styles = useThemeStyles(); const session = useSession(); - const StyleUtils = useStyleUtils(); const {isOffline} = useNetwork(); const {translate, toLocaleDigit} = useLocalize(); const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null; From bd8c8022212e3d122c3eeb31f44bf853a166c4ab Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 8 May 2024 11:52:26 +0100 Subject: [PATCH 24/28] fix lint errors --- src/components/ReportActionItem/MoneyReportView.tsx | 1 - src/components/ReportActionItem/MoneyRequestView.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 496a757a9f5f..7b977b70ddee 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -35,7 +35,6 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); const isSettled = ReportUtils.isSettled(report.reportID); const isTotalUpdated = ReportUtils.hasUpdatedTotal(report, policy); diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 5ad5caebde65..435a12e0ce2a 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -97,9 +97,7 @@ function MoneyRequestView({ const theme = useTheme(); const styles = useThemeStyles(); const session = useSession(); - const StyleUtils = useStyleUtils(); const {isOffline} = useNetwork(); - const {isSmallScreenWidth} = useWindowDimensions(); const {translate, toLocaleDigit} = useLocalize(); const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null; const isTrackExpense = ReportUtils.isTrackExpenseReport(report); From c501c5a3618fd6be34609ebe268a271c57b3d54c Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 8 May 2024 19:56:05 +0100 Subject: [PATCH 25/28] fix lint error --- src/components/ReportActionItem/MoneyReportView.tsx | 1 - src/components/ReportActionItem/MoneyRequestView.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 7b977b70ddee..c0edf105aef6 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -12,7 +12,6 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx index 435a12e0ce2a..74dd81c977bd 100644 --- a/src/components/ReportActionItem/MoneyRequestView.tsx +++ b/src/components/ReportActionItem/MoneyRequestView.tsx @@ -15,12 +15,10 @@ import ViolationMessages from '@components/ViolationMessages'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; -import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useViolations from '@hooks/useViolations'; import type {ViolationField} from '@hooks/useViolations'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import type {MileageRate} from '@libs/DistanceRequestUtils'; From ee89aa13d1117f3cc6f52f43eff65c9c3bb6a816 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 13 May 2024 20:42:33 +0100 Subject: [PATCH 26/28] chore: Remove unnecessary positioning code --- src/pages/home/report/AnimatedEmptyStateBackground.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index d18907d6a494..efd8b4e3d304 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -38,8 +38,6 @@ function AnimatedEmptyStateBackground() { xOffset.value = clamp(xOffset.value + y * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_X, IMAGE_OFFSET_X); yOffset.value = clamp(yOffset.value - x * CONST.ANIMATION_GYROSCOPE_VALUE, -IMAGE_OFFSET_Y, IMAGE_OFFSET_Y); return { - // On Android, scroll view sub views gets clipped beyond container bounds. Set the top position so that image wouldn't get clipped - top: IMAGE_OFFSET_Y, transform: [{translateX: withSpring(xOffset.value)}, {translateY: withSpring(yOffset.value, {overshootClamping: true})}, {scale: 1.15}], }; }, [isReducedMotionEnabled]); From f6b4e71cc09ac218124ed88682f819e10bc34dd8 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 17 May 2024 21:25:45 +0100 Subject: [PATCH 27/28] Remove unnecessary style property --- src/components/ReportActionItem/MoneyReportView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index c0edf105aef6..81d59d750284 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -58,7 +58,7 @@ function MoneyReportView({report, policy}: MoneyReportViewProps) { }, [policy, report]); return ( - + {!ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ( <> From dbcb4422888c67e9b239978ce1eb40f24fdf344c Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 17 May 2024 22:15:03 +0100 Subject: [PATCH 28/28] add chatContentScrollViewPlatformStyles --- src/pages/home/report/ReportActionsList.tsx | 9 ++------- src/styles/index.ts | 2 ++ .../chatContentScrollViewPlatformStyles/index.native.ts | 5 +++++ .../utils/chatContentScrollViewPlatformStyles/index.ts | 7 +++++++ .../utils/chatContentScrollViewPlatformStyles/types.ts | 5 +++++ 5 files changed, 21 insertions(+), 7 deletions(-) create mode 100644 src/styles/utils/chatContentScrollViewPlatformStyles/index.native.ts create mode 100644 src/styles/utils/chatContentScrollViewPlatformStyles/index.ts create mode 100644 src/styles/utils/chatContentScrollViewPlatformStyles/types.ts diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 70a35c12ba2f..d8aed24e3b13 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -18,7 +18,6 @@ import useReportScrollManager from '@hooks/useReportScrollManager'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import DateUtils from '@libs/DateUtils'; -import getPlatform from '@libs/getPlatform'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -600,12 +599,8 @@ function ReportActionsList({ const canShowHeader = !isOffline && !hasHeaderRendered.current && scrollingVerticalOffset.current > VERTICAL_OFFSET_THRESHOLD; const contentContainerStyle: StyleProp = useMemo( - () => [ - getPlatform() === CONST.PLATFORM.WEB || getPlatform() === CONST.PLATFORM.DESKTOP ? styles.overflowHidden : {}, - styles.chatContentScrollView, - isLoadingNewerReportActions && canShowHeader ? styles.chatContentScrollViewWithHeaderLoader : {}, - ], - [isLoadingNewerReportActions, styles.overflowHidden, styles.chatContentScrollView, styles.chatContentScrollViewWithHeaderLoader, canShowHeader], + () => [styles.chatContentScrollView, isLoadingNewerReportActions && canShowHeader ? styles.chatContentScrollViewWithHeaderLoader : {}], + [isLoadingNewerReportActions, styles.chatContentScrollView, styles.chatContentScrollViewWithHeaderLoader, canShowHeader], ); const lastReportAction: OnyxTypes.ReportAction | EmptyObject = useMemo(() => sortedReportActions.at(-1) ?? {}, [sortedReportActions]); diff --git a/src/styles/index.ts b/src/styles/index.ts index 7f64b59090f5..7947f03fece5 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -15,6 +15,7 @@ import colors from './theme/colors'; import type {ThemeColors} from './theme/types'; import addOutlineWidth from './utils/addOutlineWidth'; import borders from './utils/borders'; +import chatContentScrollViewPlatformStyles from './utils/chatContentScrollViewPlatformStyles'; import codeStyles from './utils/codeStyles'; import cursor from './utils/cursor'; import display from './utils/display'; @@ -1944,6 +1945,7 @@ const styles = (theme: ThemeColors) => flexGrow: 1, justifyContent: 'flex-start', paddingBottom: 16, + ...chatContentScrollViewPlatformStyles, }, // Chat Item diff --git a/src/styles/utils/chatContentScrollViewPlatformStyles/index.native.ts b/src/styles/utils/chatContentScrollViewPlatformStyles/index.native.ts new file mode 100644 index 000000000000..ee3f566ddc27 --- /dev/null +++ b/src/styles/utils/chatContentScrollViewPlatformStyles/index.native.ts @@ -0,0 +1,5 @@ +import type ChatContentScrollViewPlatformStyles from './types'; + +const chatContentScrollViewPlatformStyles: ChatContentScrollViewPlatformStyles = {}; + +export default chatContentScrollViewPlatformStyles; diff --git a/src/styles/utils/chatContentScrollViewPlatformStyles/index.ts b/src/styles/utils/chatContentScrollViewPlatformStyles/index.ts new file mode 100644 index 000000000000..cef1d5e70e6e --- /dev/null +++ b/src/styles/utils/chatContentScrollViewPlatformStyles/index.ts @@ -0,0 +1,7 @@ +import type ChatContentScrollViewPlatformStyles from './types'; + +const chatContentScrollViewPlatformStyles: ChatContentScrollViewPlatformStyles = { + overflow: 'hidden', +}; + +export default chatContentScrollViewPlatformStyles; diff --git a/src/styles/utils/chatContentScrollViewPlatformStyles/types.ts b/src/styles/utils/chatContentScrollViewPlatformStyles/types.ts new file mode 100644 index 000000000000..3fff2ba6a14d --- /dev/null +++ b/src/styles/utils/chatContentScrollViewPlatformStyles/types.ts @@ -0,0 +1,5 @@ +import type {ViewStyle} from 'react-native'; + +type ChatContentScrollViewPlatformStyles = ViewStyle; + +export default ChatContentScrollViewPlatformStyles;