Skip to content

Commit 227ebd3

Browse files
thelullabyythelullabyy
committed
Merge branch 'main' into fix/62235
2 parents 95bfcd5 + 0c28b4e commit 227ebd3

33 files changed

Lines changed: 221 additions & 422 deletions

‎.storybook/webpackMockPaths.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,5 @@ export default {
66
'react-native$': 'react-native-web',
77
'@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
88
'@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
9-
'@libs/TransactionPreviewUtils': path.resolve(__dirname, '../src/libs/__mocks__/TransactionPreviewUtils.ts'),
109
};
1110
/* eslint-enable @typescript-eslint/naming-convention */

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import {CurrentReportIDContextProvider} from './hooks/useCurrentReportID';
4141
import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
4242
import HybridAppHandler from './HybridAppHandler';
4343
import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
44-
import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
44+
import {AttachmentModalContextProvider} from './pages/media/AttachmentModalScreen/AttachmentModalContext';
4545
import type {Route} from './ROUTES';
4646
import './setup/backgroundTask';
4747
import './setup/hybridApp';
@@ -95,7 +95,7 @@ function App({url, hybridAppSettings}: AppProps) {
9595
PopoverContextProvider,
9696
CurrentReportIDContextProvider,
9797
ScrollOffsetContextProvider,
98-
ReportAttachmentsProvider,
98+
AttachmentModalContextProvider,
9999
PickerStateProvider,
100100
EnvironmentProvider,
101101
CustomStatusBarAndBackgroundContextProvider,

‎src/ROUTES.ts‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {IOUAction, IOUType} from './CONST';
55
import type {IOURequestType} from './libs/actions/IOU';
66
import Log from './libs/Log';
77
import type {ReimbursementAccountStepToOpen} from './libs/ReimbursementAccountUtils';
8+
import type {AttachmentModalScreenParams} from './pages/media/AttachmentModalScreen/types';
89
import SCREENS from './SCREENS';
910
import type {Screen} from './SCREENS';
1011
import type {ExitReason} from './types/form/ExitSurveyReasonForm';
@@ -442,28 +443,7 @@ const ROUTES = {
442443
},
443444
ATTACHMENTS: {
444445
route: 'attachment',
445-
getRoute: (
446-
reportID: string | undefined,
447-
attachmentID: string | undefined,
448-
type: ValueOf<typeof CONST.ATTACHMENT_TYPE> | undefined,
449-
url: string,
450-
accountID?: number,
451-
isAuthTokenRequired?: boolean,
452-
fileName?: string,
453-
attachmentLink?: string,
454-
hashKey?: number,
455-
) => {
456-
const typeParam = type ? `&type=${type}` : '';
457-
const reportParam = reportID ? `&reportID=${reportID}` : '';
458-
const accountParam = accountID ? `&accountID=${accountID}` : '';
459-
const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : '';
460-
const fileNameParam = fileName ? `&fileName=${fileName}` : '';
461-
const attachmentLinkParam = attachmentLink ? `&attachmentLink=${attachmentLink}` : '';
462-
const attachmentIDParam = attachmentID ? `&attachmentID=${attachmentID}` : '';
463-
const hashKeyParam = hashKey ? `&hashKey=${hashKey}` : '';
464-
465-
return `attachment?source=${encodeURIComponent(url)}${typeParam}${reportParam}${attachmentIDParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}${hashKeyParam}` as const;
466-
},
446+
getRoute: (params?: AttachmentRouteParams) => getAttachmentModalScreenRoute('attachment', params),
467447
},
468448
REPORT_PARTICIPANTS: {
469449
route: 'r/:reportID/participants',
@@ -483,7 +463,7 @@ const ROUTES = {
483463
},
484464
REPORT_WITH_ID_DETAILS: {
485465
route: 'r/:reportID/details',
486-
getRoute: (reportID: string | undefined, backTo?: string) => {
466+
getRoute: (reportID: string | number | undefined, backTo?: string) => {
487467
if (!reportID) {
488468
Log.warn('Invalid reportID is used to build the REPORT_WITH_ID_DETAILS route');
489469
}
@@ -2633,6 +2613,30 @@ const SHARED_ROUTE_PARAMS: Partial<Record<Screen, string[]>> = {
26332613
export {HYBRID_APP_ROUTES, getUrlWithBackToParam, PUBLIC_SCREENS_ROUTES, SHARED_ROUTE_PARAMS};
26342614
export default ROUTES;
26352615

2616+
type AttachmentsRoute = typeof ROUTES.ATTACHMENTS.route;
2617+
type ReportAddAttachmentRoute = `r/${string}/attachment/add`;
2618+
type AttachmentRoutes = AttachmentsRoute | ReportAddAttachmentRoute;
2619+
type AttachmentRouteParams = AttachmentModalScreenParams;
2620+
2621+
function getAttachmentModalScreenRoute(url: AttachmentRoutes, params?: AttachmentRouteParams) {
2622+
if (!params?.source) {
2623+
return url;
2624+
}
2625+
2626+
const {source, attachmentID, type, reportID, accountID, isAuthTokenRequired, originalFileName, attachmentLink} = params;
2627+
2628+
const sourceParam = `?source=${encodeURIComponent(source as string)}`;
2629+
const attachmentIDParam = attachmentID ? `&attachmentID=${attachmentID}` : '';
2630+
const typeParam = type ? `&type=${type as string}` : '';
2631+
const reportIDParam = reportID ? `&reportID=${reportID}` : '';
2632+
const accountIDParam = accountID ? `&accountID=${accountID}` : '';
2633+
const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : '';
2634+
const fileNameParam = originalFileName ? `&originalFileName=${originalFileName}` : '';
2635+
const attachmentLinkParam = attachmentLink ? `&attachmentLink=${attachmentLink}` : '';
2636+
2637+
return `${url}${sourceParam}${typeParam}${reportIDParam}${attachmentIDParam}${accountIDParam}${authTokenParam}${fileNameParam}${attachmentLinkParam} ` as const;
2638+
}
2639+
26362640
// eslint-disable-next-line @typescript-eslint/no-explicit-any
26372641
type ExtractRouteName<TRoute> = TRoute extends {getRoute: (...args: any[]) => infer TRouteName} ? TRouteName : TRoute;
26382642

‎src/components/Attachments/AttachmentCarousel/CarouselItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
1010
import Text from '@components/Text';
1111
import useLocalize from '@hooks/useLocalize';
1212
import useThemeStyles from '@hooks/useThemeStyles';
13-
import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
13+
import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
1414
import CONST from '@src/CONST';
1515

1616
type CarouselItemProps = {
@@ -33,7 +33,7 @@ type CarouselItemProps = {
3333
function CarouselItem({item, onPress, isFocused, isModalHovered, reportID}: CarouselItemProps) {
3434
const styles = useThemeStyles();
3535
const {translate} = useLocalize();
36-
const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
36+
const {isAttachmentHidden} = useContext(AttachmentModalContext);
3737
const [isHidden, setIsHidden] = useState(() => (item.reportActionID && isAttachmentHidden(item.reportActionID)) ?? item.hasBeenFlagged);
3838

3939
const renderButton = (style: StyleProp<ViewStyle>) => (

‎src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,16 @@ function ImageRenderer({tnode}: ImageRendererProps) {
112112
}
113113

114114
const attachmentLink = tnode.parent?.attributes?.href;
115-
const route = ROUTES.ATTACHMENTS?.getRoute(reportID, attachmentID, type, source, accountID, isAttachmentOrReceipt, fileName, attachmentLink);
115+
const route = ROUTES.ATTACHMENTS?.getRoute({
116+
attachmentID,
117+
reportID,
118+
type,
119+
source,
120+
accountID,
121+
isAuthTokenRequired: isAttachmentOrReceipt,
122+
originalFileName: fileName,
123+
attachmentLink,
124+
});
116125
Navigation.navigate(route);
117126
}}
118127
onLongPress={(event) => {

‎src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
4646
return;
4747
}
4848
const isAuthTokenRequired = !!htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
49-
const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID, attachmentID, type, sourceURL, accountID, isAuthTokenRequired, undefined, undefined, hashKey);
49+
const route = ROUTES.ATTACHMENTS.getRoute({attachmentID, reportID: report?.reportID, type, source: sourceURL, accountID, isAuthTokenRequired, hashKey});
5050
Navigation.navigate(route);
5151
}}
5252
/>

‎src/components/ReportActionItem/MoneyRequestAction.tsx‎

Lines changed: 8 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import {useRoute} from '@react-navigation/native';
22
import lodashIsEmpty from 'lodash/isEmpty';
3-
import React, {useMemo, useState} from 'react';
4-
import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
5-
import {ActivityIndicator, View} from 'react-native';
3+
import React, {useMemo} from 'react';
4+
import type {StyleProp, ViewStyle} from 'react-native';
65
import RenderHTML from '@components/RenderHTML';
76
import useLocalize from '@hooks/useLocalize';
87
import useNetwork from '@hooks/useNetwork';
98
import useOnyx from '@hooks/useOnyx';
109
import useResponsiveLayout from '@hooks/useResponsiveLayout';
1110
import useStyleUtils from '@hooks/useStyleUtils';
12-
import useTheme from '@hooks/useTheme';
1311
import useThemeStyles from '@hooks/useThemeStyles';
1412
import {isIOUReportPendingCurrencyConversion} from '@libs/IOUUtils';
1513
import Navigation from '@libs/Navigation/Navigation';
@@ -26,7 +24,6 @@ import {
2624
import {generateReportID} from '@libs/ReportUtils';
2725
import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
2826
import {contextMenuRef} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
29-
import variables from '@styles/variables';
3027
import CONST from '@src/CONST';
3128
import type {TranslationPaths} from '@src/languages/types';
3229
import ONYXKEYS from '@src/ONYXKEYS';
@@ -89,30 +86,18 @@ function MoneyRequestAction({
8986
const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`, {canEvict: false, canBeMissing: true});
9087
const StyleUtils = useStyleUtils();
9188
const styles = useThemeStyles();
92-
const theme = useTheme();
9389
const {translate} = useLocalize();
9490
const {isOffline} = useNetwork();
9591
const {shouldUseNarrowLayout} = useResponsiveLayout();
9692
const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
9793
const isReviewDuplicateTransactionPage = route.name === SCREENS.TRANSACTION_DUPLICATE.REVIEW;
9894
const isSplitBillAction = isSplitBillActionReportActionsUtils(action);
9995
const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action);
100-
const [previewWidth, setPreviewWidth] = useState(0);
10196
const containerStyles = useMemo(
10297
() => [styles.cursorPointer, isHovered ? styles.reportPreviewBoxHoverBorder : undefined, style],
10398
[isHovered, style, styles.cursorPointer, styles.reportPreviewBoxHoverBorder],
10499
);
105100

106-
const transactionPreviewContainerStyles = useMemo(
107-
() => [
108-
{
109-
width: previewWidth,
110-
maxWidth: previewWidth,
111-
},
112-
styles.borderNone,
113-
],
114-
[previewWidth, styles.borderNone],
115-
);
116101
const reportPreviewStyles = StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, 1, undefined, undefined);
117102

118103
const onMoneyRequestPreviewPressed = () => {
@@ -160,59 +145,29 @@ function MoneyRequestAction({
160145
return <RenderHTML html={`<deleted-action ${CONST.REVERSED_TRANSACTION_ATTRIBUTE}="${isReversedTransaction}">${translate(message)}</deleted-action>`} />;
161146
}
162147

163-
const renderCondition = !(lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction)) && isReviewDuplicateTransactionPage;
164-
const isLayoutWidthInvalid = (layoutWidth: number) => {
165-
return (shouldUseNarrowLayout && layoutWidth > variables.mobileResponsiveWidthBreakpoint) || (!shouldUseNarrowLayout && layoutWidth > variables.sideBarWidth);
166-
};
167-
168-
const singleTransactionPreviewWidth = shouldUseNarrowLayout ? styles.w100.width : reportPreviewStyles.transactionPreviewStyle.width;
169-
const singleTransactionPreviewStyles = [shouldUseNarrowLayout ? {...styles.w100, ...styles.mw100} : reportPreviewStyles.transactionPreviewStyle, styles.mt2];
148+
if (lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction)) {
149+
return null;
150+
}
170151

171-
const TransactionPreviewComponent = (
152+
return (
172153
<TransactionPreview
173154
iouReportID={requestReportID}
174155
chatReportID={chatReportID}
175156
reportID={reportID}
176157
action={action}
177-
transactionPreviewWidth={renderCondition ? previewWidth : singleTransactionPreviewWidth}
158+
transactionPreviewWidth={reportPreviewStyles.transactionPreviewStandaloneStyle.width}
178159
isBillSplit={isSplitBillAction}
179160
isTrackExpense={isTrackExpenseAction}
180161
contextMenuAnchor={contextMenuAnchor}
181162
checkIfContextMenuActive={checkIfContextMenuActive}
182163
shouldShowPendingConversionMessage={shouldShowPendingConversionMessage}
183164
onPreviewPressed={onMoneyRequestPreviewPressed}
184-
containerStyles={renderCondition ? [containerStyles, transactionPreviewContainerStyles] : singleTransactionPreviewStyles}
165+
containerStyles={[reportPreviewStyles.transactionPreviewStandaloneStyle, isReviewDuplicateTransactionPage ? [containerStyles, styles.borderNone] : styles.mt2]}
185166
isHovered={isHovered}
186167
isWhisper={isWhisper}
187168
shouldDisplayContextMenu={shouldDisplayContextMenu}
188169
/>
189170
);
190-
191-
if (!renderCondition) {
192-
return TransactionPreviewComponent;
193-
}
194-
195-
return (
196-
<View
197-
onLayout={(e: LayoutChangeEvent) => {
198-
if (isLayoutWidthInvalid(e.nativeEvent.layout.width)) {
199-
return;
200-
}
201-
setPreviewWidth(e.nativeEvent.layout.width);
202-
}}
203-
>
204-
{!previewWidth ? (
205-
<View style={[{height: CONST.REPORT.TRANSACTION_PREVIEW.DUPLICATE.WIDE_HEIGHT}, styles.justifyContentCenter]}>
206-
<ActivityIndicator
207-
color={theme.spinner}
208-
size={40}
209-
/>
210-
</View>
211-
) : (
212-
TransactionPreviewComponent
213-
)}
214-
</View>
215-
);
216171
}
217172

218173
MoneyRequestAction.displayName = 'MoneyRequestAction';

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -349,11 +349,11 @@ function MoneyRequestReportPreviewContent({
349349
const [optimisticIndex, setOptimisticIndex] = useState<number | undefined>(undefined);
350350
const carouselRef = useRef<FlatList<Transaction> | null>(null);
351351
const visibleItemsOnEndCount = useMemo(() => {
352-
const lastItemWidth = transactions.length > 10 ? footerWidth : reportPreviewStyles.transactionPreviewStyle.width;
352+
const lastItemWidth = transactions.length > 10 ? footerWidth : reportPreviewStyles.transactionPreviewCarouselStyle.width;
353353
const lastItemWithGap = lastItemWidth + styles.gap2.gap;
354-
const itemWithGap = reportPreviewStyles.transactionPreviewStyle.width + styles.gap2.gap;
354+
const itemWithGap = reportPreviewStyles.transactionPreviewCarouselStyle.width + styles.gap2.gap;
355355
return Math.floor((currentWidth - 2 * styles.pl2.paddingLeft - lastItemWithGap) / itemWithGap) + 1;
356-
}, [transactions.length, footerWidth, reportPreviewStyles.transactionPreviewStyle.width, currentWidth, styles.pl2.paddingLeft, styles.gap2.gap]);
356+
}, [transactions.length, footerWidth, reportPreviewStyles.transactionPreviewCarouselStyle.width, styles.gap2.gap, styles.pl2.paddingLeft, currentWidth]);
357357
const viewabilityConfig = useMemo(() => {
358358
return {itemVisiblePercentThreshold: 100};
359359
}, []);
@@ -408,8 +408,8 @@ function MoneyRequestReportPreviewContent({
408408

409409
// The button should expand up to transaction width
410410
const buttonMaxWidth =
411-
!shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.WIDE_WIDTH
412-
? {maxWidth: reportPreviewStyles.transactionPreviewStyle.width}
411+
!shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewCarouselStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.WIDE_WIDTH
412+
? {maxWidth: reportPreviewStyles.transactionPreviewCarouselStyle.width}
413413
: {};
414414

415415
const approvedOrSettledIcon = (iouSettled || isApproved) && (
@@ -727,13 +727,13 @@ function MoneyRequestReportPreviewContent({
727727
<FlatList
728728
snapToAlignment="start"
729729
decelerationRate="fast"
730-
snapToInterval={reportPreviewStyles.transactionPreviewStyle.width + styles.gap2.gap}
730+
snapToInterval={reportPreviewStyles.transactionPreviewCarouselStyle.width + styles.gap2.gap}
731731
horizontal
732732
data={carouselTransactions}
733733
ref={carouselRef}
734734
nestedScrollEnabled
735735
bounces={false}
736-
keyExtractor={(item) => `${item.transactionID}_${reportPreviewStyles.transactionPreviewStyle.width}`}
736+
keyExtractor={(item) => `${item.transactionID}_${reportPreviewStyles.transactionPreviewCarouselStyle.width}`}
737737
contentContainerStyle={[styles.gap2]}
738738
style={reportPreviewStyles.flatListStyle}
739739
showsHorizontalScrollIndicator={false}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ function MoneyRequestReportPreview({
6262
[StyleUtils, currentWidth, currentWrapperWidth, shouldUseNarrowLayout, transactions.length],
6363
);
6464

65-
const shouldShowIOUData = useMemo(() => {
65+
const shouldShowPayerAndReceiver = useMemo(() => {
6666
if (!isIOUReport(iouReport) && action.childType !== CONST.REPORT.TYPE.IOU) {
6767
return false;
6868
}
@@ -93,13 +93,13 @@ function MoneyRequestReportPreview({
9393
isWhisper={isWhisper}
9494
isHovered={isHovered}
9595
iouReportID={iouReportID}
96-
containerStyles={[styles.h100, reportPreviewStyles.transactionPreviewStyle]}
96+
containerStyles={[styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle]}
9797
shouldDisplayContextMenu={shouldDisplayContextMenu}
98-
transactionPreviewWidth={reportPreviewStyles.transactionPreviewStyle.width}
98+
transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
9999
transactionID={item.transactionID}
100100
reportPreviewAction={action}
101101
onPreviewPressed={openReportFromPreview}
102-
shouldShowIOUData={shouldShowIOUData}
102+
shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
103103
/>
104104
);
105105

0 commit comments

Comments
 (0)