Skip to content

Commit 99a6374

Browse files
trjExpensifytrjExpensify
authored
Merge pull request #59804 from software-mansion-labs/feature/kuba-nowakowski/empty_report_chat_view
Empty report chat view
2 parents 819bf62 + 3e290b5 commit 99a6374

File tree

20 files changed

+678
-333
lines changed

20 files changed

+678
-333
lines changed

‎src/components/AttachmentModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ function AttachmentModal({
211211
const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
212212
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
213213
const transactionID = (isMoneyRequestAction(parentReportAction) && getOriginalMessage(parentReportAction)?.IOUTransactionID) || CONST.DEFAULT_NUMBER_ID;
214-
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: false});
214+
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: true});
215215
const [currentAttachmentLink, setCurrentAttachmentLink] = useState(attachmentLink);
216216

217217
const [file, setFile] = useState<FileObject | undefined>(

‎src/components/AvatarWithDisplayName.tsx

Lines changed: 108 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {useCallback, useEffect, useRef} from 'react';
22
import {View} from 'react-native';
3+
import type {TextStyle} from 'react-native';
34
import type {OnyxEntry} from 'react-native-onyx';
45
import type {ValueOf} from 'type-fest';
56
import useOnyx from '@hooks/useOnyx';
@@ -8,6 +9,7 @@ import useTheme from '@hooks/useTheme';
89
import useThemeStyles from '@hooks/useThemeStyles';
910
import Navigation from '@libs/Navigation/Navigation';
1011
import {getPersonalDetailsForAccountIDs} from '@libs/OptionsListUtils';
12+
import type {DisplayNameWithTooltips} from '@libs/ReportUtils';
1113
import {
1214
getChatRoomSubtitle,
1315
getDisplayNamesWithTooltips,
@@ -31,10 +33,12 @@ import type {Policy, Report} from '@src/types/onyx';
3133
import type {Icon} from '@src/types/onyx/OnyxCommon';
3234
import {getButtonRole} from './Button/utils';
3335
import DisplayNames from './DisplayNames';
36+
import type DisplayNamesProps from './DisplayNames/types';
3437
import {FallbackAvatar} from './Icon/Expensicons';
3538
import MultipleAvatars from './MultipleAvatars';
3639
import ParentNavigationSubtitle from './ParentNavigationSubtitle';
3740
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
41+
import type {TransactionListItemType} from './SelectionList/types';
3842
import SubscriptAvatar from './SubscriptAvatar';
3943
import Text from './Text';
4044

@@ -53,6 +57,12 @@ type AvatarWithDisplayNameProps = {
5357

5458
/** Whether we should enable detail page navigation */
5559
shouldEnableDetailPageNavigation?: boolean;
60+
61+
/** Whether we should enable custom title logic designed for search lis */
62+
shouldUseCustomSearchTitleName?: boolean;
63+
64+
/** Transactions inside report */
65+
transactions?: TransactionListItemType[];
5666
};
5767

5868
const fallbackIcon: Icon = {
@@ -62,10 +72,93 @@ const fallbackIcon: Icon = {
6272
id: -1,
6373
};
6474

65-
function AvatarWithDisplayName({policy, report, isAnonymous = false, size = CONST.AVATAR_SIZE.DEFAULT, shouldEnableDetailPageNavigation = false}: AvatarWithDisplayNameProps) {
75+
function getCustomDisplayName(
76+
shouldUseCustomSearchTitleName: boolean,
77+
report: OnyxEntry<Report>,
78+
title: string,
79+
displayNamesWithTooltips: DisplayNameWithTooltips,
80+
transactions: TransactionListItemType[],
81+
shouldUseFullTitle: boolean,
82+
customSearchDisplayStyle: TextStyle[],
83+
regularStyle: TextStyle[],
84+
isAnonymous: boolean,
85+
isMoneyRequestOrReport: boolean,
86+
): React.ReactNode {
87+
const reportName = report?.reportName ?? CONST.REPORT.DEFAULT_REPORT_NAME;
88+
const isIOUOrInvoice = report?.type === CONST.REPORT.TYPE.IOU || report?.type === CONST.REPORT.TYPE.INVOICE;
89+
const hasTransactions = transactions.length > 0;
90+
91+
function getDisplayProps(): DisplayNamesProps {
92+
const baseProps = {
93+
displayNamesWithTooltips,
94+
tooltipEnabled: true,
95+
numberOfLines: 1,
96+
};
97+
98+
if (shouldUseCustomSearchTitleName) {
99+
const styleProps = {
100+
textStyles: customSearchDisplayStyle,
101+
};
102+
103+
if (!hasTransactions) {
104+
return {
105+
fullTitle: reportName,
106+
shouldUseFullTitle,
107+
...baseProps,
108+
...styleProps,
109+
};
110+
}
111+
112+
if (isIOUOrInvoice) {
113+
return {
114+
fullTitle: title,
115+
shouldUseFullTitle: true,
116+
...baseProps,
117+
...styleProps,
118+
};
119+
}
120+
121+
return {
122+
fullTitle: reportName,
123+
shouldUseFullTitle,
124+
...baseProps,
125+
...styleProps,
126+
};
127+
}
128+
129+
return {
130+
fullTitle: title,
131+
textStyles: regularStyle,
132+
shouldUseFullTitle: isMoneyRequestOrReport || isAnonymous,
133+
...baseProps,
134+
};
135+
}
136+
137+
const {fullTitle, textStyles, displayNamesWithTooltips: displayNamesWithTooltipsProp, tooltipEnabled, numberOfLines, shouldUseFullTitle: shouldUseFullTitleProp} = getDisplayProps();
138+
139+
return (
140+
<DisplayNames
141+
fullTitle={fullTitle}
142+
displayNamesWithTooltips={displayNamesWithTooltipsProp}
143+
tooltipEnabled={tooltipEnabled}
144+
numberOfLines={numberOfLines}
145+
textStyles={textStyles}
146+
shouldUseFullTitle={shouldUseFullTitleProp}
147+
/>
148+
);
149+
}
150+
151+
function AvatarWithDisplayName({
152+
policy,
153+
report,
154+
isAnonymous = false,
155+
size = CONST.AVATAR_SIZE.DEFAULT,
156+
shouldEnableDetailPageNavigation = false,
157+
shouldUseCustomSearchTitleName = false,
158+
transactions = [],
159+
}: AvatarWithDisplayNameProps) {
66160
const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`, {canEvict: false, canBeMissing: false});
67161
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}) ?? CONST.EMPTY_OBJECT;
68-
69162
const theme = useTheme();
70163
const styles = useThemeStyles();
71164
const StyleUtils = useStyleUtils();
@@ -128,7 +221,7 @@ function AvatarWithDisplayName({policy, report, isAnonymous = false, size = CONS
128221
Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
129222
}
130223
}, [report, shouldEnableDetailPageNavigation, goToDetailsPage]);
131-
224+
const shouldUseFullTitle = isMoneyRequestOrReport || isAnonymous;
132225
const headerView = (
133226
<View style={[styles.appContentHeaderTitle, styles.flex1]}>
134227
{!!report && !!title && (
@@ -156,14 +249,18 @@ function AvatarWithDisplayName({policy, report, isAnonymous = false, size = CONS
156249
</View>
157250
</PressableWithoutFeedback>
158251
<View style={[styles.flex1, styles.flexColumn]}>
159-
<DisplayNames
160-
fullTitle={title}
161-
displayNamesWithTooltips={displayNamesWithTooltips}
162-
tooltipEnabled
163-
numberOfLines={1}
164-
textStyles={[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
165-
shouldUseFullTitle={isMoneyRequestOrReport || isAnonymous}
166-
/>
252+
{getCustomDisplayName(
253+
shouldUseCustomSearchTitleName,
254+
report,
255+
title,
256+
displayNamesWithTooltips,
257+
transactions,
258+
shouldUseFullTitle,
259+
[styles.headerText, styles.pre],
260+
[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre],
261+
isAnonymous,
262+
isMoneyRequestOrReport,
263+
)}
167264
{Object.keys(parentNavigationSubtitleData).length > 0 && (
168265
<ParentNavigationSubtitle
169266
parentNavigationSubtitleData={parentNavigationSubtitleData}

‎src/components/EReceipt.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function EReceipt({transactionID, transactionItem, isThumbnail = false}: EReceip
3838
const {translate} = useLocalize();
3939
const theme = useTheme();
4040
const [cardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
41-
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: false});
41+
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: true});
4242

4343
const {primaryColor, secondaryColor, titleColor, MCCIcon, tripIcon, backgroundImage} = useEReceipt(transactionItem ?? transaction);
4444

‎src/components/HeaderWithBackButton/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ function HeaderWithBackButton({
9595
</>
9696
);
9797
}
98-
9998
if (shouldShowReportAvatarWithDisplay) {
10099
return (
101100
<AvatarWithDisplayName

‎src/components/ReportActionItem/MoneyRequestReportPreview/EmptyMoneyRequestReportPreview.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import type {ReactNode} from 'react';
3+
import {View} from 'react-native';
4+
import * as Expensicons from '@components/Icon/Expensicons';
5+
import ImageSVG from '@components/ImageSVG';
6+
import Text from '@components/Text';
7+
import useLocalize from '@hooks/useLocalize';
8+
import useResponsiveLayout from '@hooks/useResponsiveLayout';
9+
import useTheme from '@hooks/useTheme';
10+
import useThemeStyles from '@hooks/useThemeStyles';
11+
12+
function EmptyMoneyRequestReportPreview({emptyReportPreviewAction}: {emptyReportPreviewAction: ReactNode | undefined}) {
13+
const styles = useThemeStyles();
14+
const theme = useTheme();
15+
const {translate} = useLocalize();
16+
const {shouldUseNarrowLayout} = useResponsiveLayout();
17+
18+
return (
19+
<View style={[styles.alignItemsCenter, styles.highlightBG, styles.ml0, styles.mr0, styles.gap4, styles.reportContainerBorderRadius]}>
20+
<View style={[styles.emptyStateMoneyRequestPreviewReport, styles.justifyContentCenter, styles.alignItemsCenter]}>
21+
<View style={[styles.m1, styles.justifyContentCenter, styles.alignItemsCenter, styles.gap4]}>
22+
<ImageSVG
23+
fill={theme.border}
24+
height={64}
25+
width={64}
26+
src={Expensicons.Folder}
27+
/>
28+
<Text style={[styles.textAlignCenter, styles.textSupporting, styles.fontSizeLabel]}>{translate('search.moneyRequestReport.emptyStateTitle')}</Text>
29+
</View>
30+
</View>
31+
<View style={[{width: shouldUseNarrowLayout ? '100%' : 303, height: 40}]}>{!!emptyReportPreviewAction && emptyReportPreviewAction}</View>
32+
</View>
33+
);
34+
}
35+
36+
EmptyMoneyRequestReportPreview.displayName = 'EmptyRequestReport';
37+
38+
export default EmptyMoneyRequestReportPreview;

0 commit comments

Comments
 (0)