Skip to content

Commit c1d3a83

Browse files
kaushiktdkaushiktd
committed
Changes Done
1 parent 0c1ec7a commit c1d3a83

File tree

3 files changed

+82
-58
lines changed

3 files changed

+82
-58
lines changed

‎src/components/ReportActionItem/ReportActionItemImage.js

+75-26
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
1-
import React from 'react';
21
import PropTypes from 'prop-types';
3-
import styles from '../../styles/styles';
4-
import Image from '../Image';
5-
import ThumbnailImage from '../ThumbnailImage';
6-
import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
7-
import ROUTES from '../../ROUTES';
8-
import CONST from '../../CONST';
9-
import {ShowContextMenuContext} from '../ShowContextMenuContext';
10-
import Navigation from '../../libs/Navigation/Navigation';
11-
import PressableWithoutFocus from '../Pressable/PressableWithoutFocus';
12-
import useLocalize from '../../hooks/useLocalize';
2+
import React from 'react';
3+
import {View} from 'react-native';
4+
import _ from 'underscore';
5+
import EReceiptThumbnail from '@components/EReceiptThumbnail';
6+
import Image from '@components/Image';
7+
import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
8+
import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
9+
import ThumbnailImage from '@components/ThumbnailImage';
10+
import transactionPropTypes from '@components/transactionPropTypes';
11+
import useLocalize from '@hooks/useLocalize';
12+
import Navigation from '@libs/Navigation/Navigation';
13+
import * as TransactionUtils from '@libs/TransactionUtils';
14+
import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
15+
import styles from '@styles/styles';
16+
import CONST from '@src/CONST';
17+
import ROUTES from '@src/ROUTES';
18+
import Icon from '../../components/Icon';
19+
import * as StyleUtils from '@styles/StyleUtils';
20+
import variables from '@styles/variables';
21+
import * as Expensicons from '../../components/Icon/Expensicons';
22+
import colors from '../../styles/colors';
23+
import useNetwork from '@hooks/useNetwork';
1324

1425
const propTypes = {
1526
/** thumbnail URI for the image */
@@ -20,11 +31,23 @@ const propTypes = {
2031

2132
/** whether or not to enable the image preview modal */
2233
enablePreviewModal: PropTypes.bool,
34+
35+
/* The transaction associated with this image, if any. Passed for handling eReceipts. */
36+
transaction: transactionPropTypes,
37+
38+
/** Icon to use as a fallback when offline */
39+
fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
40+
41+
/** The fill color to pass into the icon. */
42+
iconFill: PropTypes.string,
2343
};
2444

2545
const defaultProps = {
2646
thumbnail: null,
47+
transaction: {},
2748
enablePreviewModal: false,
49+
iconFill: colors.green700,
50+
fallbackIcon: Expensicons.ReceiptPlaceholderImage, // Default fallback icon
2851
};
2952

3053
/**
@@ -33,24 +56,50 @@ const defaultProps = {
3356
* and optional preview modal as well.
3457
*/
3558

36-
function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
59+
function ReportActionItemImage({thumbnail, image, enablePreviewModal, transaction}) {
3760
const {translate} = useLocalize();
3861
const imageSource = tryResolveUrlFromApiRoot(image || '');
3962
const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail || '');
63+
const isEReceipt = !_.isEmpty(transaction) && TransactionUtils.hasEReceipt(transaction);
64+
const {isOffline} = useNetwork();
65+
let heightStyle = StyleUtils.getHeight(variables.iconImageHeight);
4066

41-
const receiptImageComponent = thumbnail ? (
42-
<ThumbnailImage
43-
previewSourceURL={thumbnailSource}
44-
style={[styles.w100, styles.h100]}
45-
isAuthTokenRequired
46-
shouldDynamicallyResize={false}
47-
/>
48-
) : (
49-
<Image
50-
source={{uri: image}}
51-
style={[styles.w100, styles.h100]}
52-
/>
53-
);
67+
let receiptImageComponent;
68+
69+
if (isEReceipt) {
70+
if (isOffline) {
71+
receiptImageComponent = (
72+
<Icon
73+
src={props.fallbackIcon}
74+
fill={props.iconFill}
75+
height={heightStyle.height}
76+
width={heightStyle.height}
77+
/>
78+
);
79+
} else {
80+
receiptImageComponent = (
81+
<View style={[styles.w100, styles.h100]}>
82+
<EReceiptThumbnail transactionID={transaction.transactionID} />
83+
</View>
84+
);
85+
}
86+
} else if (thumbnail) {
87+
receiptImageComponent = (
88+
<ThumbnailImage
89+
previewSourceURL={thumbnailSource}
90+
style={[styles.w100, styles.h100]}
91+
isAuthTokenRequired
92+
shouldDynamicallyResize={false}
93+
/>
94+
);
95+
} else {
96+
receiptImageComponent = (
97+
<Image
98+
source={{uri: image}}
99+
style={[styles.w100, styles.h100]}
100+
/>
101+
);
102+
}
54103

55104
if (enablePreviewModal) {
56105
return (
@@ -79,4 +128,4 @@ ReportActionItemImage.propTypes = propTypes;
79128
ReportActionItemImage.defaultProps = defaultProps;
80129
ReportActionItemImage.displayName = 'ReportActionItemImage';
81130

82-
export default ReportActionItemImage;
131+
export default ReportActionItemImage;

‎src/components/ThumbnailImage.js

+6-32
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ import styles from '../styles/styles';
77
import * as StyleUtils from '../styles/StyleUtils';
88
import * as DeviceCapabilities from '../libs/DeviceCapabilities';
99
import useWindowDimensions from '../hooks/useWindowDimensions';
10-
import useNetwork from '../hooks/useNetwork';
11-
import Icon from '../../src/components/Icon';
12-
import * as Expensicons from '../../src/components/Icon/Expensicons';
13-
import colors from '../styles/colors';
1410

1511
const propTypes = {
1612
/** Source URL for the preview image */
@@ -31,25 +27,13 @@ const propTypes = {
3127

3228
/** Should the image be resized on load or just fit container */
3329
shouldDynamicallyResize: PropTypes.bool,
34-
35-
/** Icon to use as a fallback when offline */
36-
fallbackIcon: PropTypes.string,
37-
38-
/** The fill color to pass into the icon. */
39-
iconFill: PropTypes.string,
4030
};
4131

42-
const screenDimensions = Dimensions.get('window');
43-
const iconSize = Math.min(screenDimensions.width, screenDimensions.height) * 0.12; // Adjust the factor (0.2) as needed
44-
4532
const defaultProps = {
46-
iconFill: colors.green700,
4733
style: {},
4834
imageWidth: 200,
4935
imageHeight: 200,
5036
shouldDynamicallyResize: true,
51-
fallbackIcon: Expensicons.ReceiptPlaceholderImage, // Default fallback icon
52-
iconSize, // Default icon size
5337
};
5438

5539
/**
@@ -107,25 +91,15 @@ function ThumbnailImage(props) {
10791
);
10892

10993
const sizeStyles = props.shouldDynamicallyResize ? [StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight)] : [styles.w100, styles.h100];
110-
const {isOffline} = useNetwork();
111-
94+
11295
return (
11396
<View style={[props.style, styles.overflowHidden,styles.thumbnailBgColor]}>
11497
<View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
115-
{isOffline ? (
116-
<Icon
117-
src={props.fallbackIcon}
118-
width={props.iconSize}
119-
height={props.iconSize}
120-
fill={props.iconFill}
121-
/>
122-
) : (
123-
<ImageWithSizeCalculation
124-
url={props.previewSourceURL}
125-
onMeasure={updateImageSize}
126-
isAuthTokenRequired={props.isAuthTokenRequired}
127-
/>
128-
)}
98+
<ImageWithSizeCalculation
99+
url={props.previewSourceURL}
100+
onMeasure={updateImageSize}
101+
isAuthTokenRequired={props.isAuthTokenRequired}
102+
/>
129103
</View>
130104
</View>
131105
);

‎src/styles/variables.ts

+1
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,5 @@ export default {
186186
cardPreviewHeight: 148,
187187
cardPreviewWidth: 235,
188188
cardNameWidth: 156,
189+
iconImageHeight:112,
189190
} as const;

0 commit comments

Comments
 (0)