diff --git a/assets/images/eReceiptBGs/eReceiptBG_blue.png b/assets/images/eReceiptBGs/eReceiptBG_blue.png
deleted file mode 100644
index 602efe533162..000000000000
Binary files a/assets/images/eReceiptBGs/eReceiptBG_blue.png and /dev/null differ
diff --git a/assets/images/eReceiptBGs/eReceiptBG_blue.svg b/assets/images/eReceiptBGs/eReceiptBG_blue.svg
new file mode 100644
index 000000000000..47b6cc8385d0
--- /dev/null
+++ b/assets/images/eReceiptBGs/eReceiptBG_blue.svg
@@ -0,0 +1,435 @@
+
+
+
diff --git a/assets/images/eReceiptBGs/eReceiptBG_green.png b/assets/images/eReceiptBGs/eReceiptBG_green.png
deleted file mode 100644
index cf7ae9c58d87..000000000000
Binary files a/assets/images/eReceiptBGs/eReceiptBG_green.png and /dev/null differ
diff --git a/assets/images/eReceiptBGs/eReceiptBG_green.svg b/assets/images/eReceiptBGs/eReceiptBG_green.svg
new file mode 100644
index 000000000000..2a01acdb9277
--- /dev/null
+++ b/assets/images/eReceiptBGs/eReceiptBG_green.svg
@@ -0,0 +1,482 @@
+
+
+
diff --git a/assets/images/eReceiptBGs/eReceiptBG_ice.svg b/assets/images/eReceiptBGs/eReceiptBG_ice.svg
new file mode 100644
index 000000000000..ee72e9d7b41f
--- /dev/null
+++ b/assets/images/eReceiptBGs/eReceiptBG_ice.svg
@@ -0,0 +1,546 @@
+
+
+
diff --git a/assets/images/eReceiptBGs/eReceiptBG_navy.png b/assets/images/eReceiptBGs/eReceiptBG_navy.png
deleted file mode 100644
index 0f9449bb26a0..000000000000
Binary files a/assets/images/eReceiptBGs/eReceiptBG_navy.png and /dev/null differ
diff --git a/assets/images/eReceiptBGs/eReceiptBG_pink.png b/assets/images/eReceiptBGs/eReceiptBG_pink.png
deleted file mode 100644
index 0fd2ebdd5c6e..000000000000
Binary files a/assets/images/eReceiptBGs/eReceiptBG_pink.png and /dev/null differ
diff --git a/assets/images/eReceiptBGs/eReceiptBG_pink.svg b/assets/images/eReceiptBGs/eReceiptBG_pink.svg
new file mode 100644
index 000000000000..afe37fde7d21
--- /dev/null
+++ b/assets/images/eReceiptBGs/eReceiptBG_pink.svg
@@ -0,0 +1,620 @@
+
+
+
diff --git a/assets/images/eReceiptBGs/eReceiptBG_tangerine.png b/assets/images/eReceiptBGs/eReceiptBG_tangerine.png
deleted file mode 100644
index 3f7e61b04969..000000000000
Binary files a/assets/images/eReceiptBGs/eReceiptBG_tangerine.png and /dev/null differ
diff --git a/assets/images/eReceiptBGs/eReceiptBG_tangerine.svg b/assets/images/eReceiptBGs/eReceiptBG_tangerine.svg
new file mode 100644
index 000000000000..6a789e27b1ce
--- /dev/null
+++ b/assets/images/eReceiptBGs/eReceiptBG_tangerine.svg
@@ -0,0 +1,631 @@
+
+
+
diff --git a/assets/images/eReceiptBGs/eReceiptBG_yellow.png b/assets/images/eReceiptBGs/eReceiptBG_yellow.png
deleted file mode 100644
index c0c6df3d5748..000000000000
Binary files a/assets/images/eReceiptBGs/eReceiptBG_yellow.png and /dev/null differ
diff --git a/assets/images/eReceiptBGs/eReceiptBG_yellow.svg b/assets/images/eReceiptBGs/eReceiptBG_yellow.svg
new file mode 100644
index 000000000000..ae33bf8a71f0
--- /dev/null
+++ b/assets/images/eReceiptBGs/eReceiptBG_yellow.svg
@@ -0,0 +1,584 @@
+
+
+
diff --git a/assets/images/receipt-body.svg b/assets/images/receipt-body.svg
new file mode 100644
index 000000000000..f86326aef0c1
--- /dev/null
+++ b/assets/images/receipt-body.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index e722caeed905..c20402b6762f 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -1772,8 +1772,15 @@ const ROUTES = {
TRANSACTION_RECEIPT: {
route: 'r/:reportID/transaction/:transactionID/receipt',
- getRoute: (reportID: string, transactionID: string, readonly = false, isFromReviewDuplicates = false) =>
- `r/${reportID}/transaction/${transactionID}/receipt?readonly=${readonly}${isFromReviewDuplicates ? '&isFromReviewDuplicates=true' : ''}` as const,
+ getRoute: (reportID: string | undefined, transactionID: string | undefined, readonly = false, isFromReviewDuplicates = false) => {
+ if (!reportID) {
+ Log.warn('Invalid reportID is used to build the TRANSACTION_RECEIPT route');
+ }
+ if (!transactionID) {
+ Log.warn('Invalid transactionID is used to build the TRANSACTION_RECEIPT route');
+ }
+ return `r/${reportID}/transaction/${transactionID}/receipt?readonly=${readonly}${isFromReviewDuplicates ? '&isFromReviewDuplicates=true' : ''}` as const;
+ },
},
TRANSACTION_DUPLICATE_REVIEW_PAGE: {
diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx
index 026713027f96..9b7671f95428 100644
--- a/src/components/EReceipt.tsx
+++ b/src/components/EReceipt.tsx
@@ -1,39 +1,46 @@
import React from 'react';
import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
+import useEReceipt from '@hooks/useEReceipt';
import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
-import * as CardUtils from '@libs/CardUtils';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as TransactionUtils from '@libs/TransactionUtils';
+import {getCardDescription} from '@libs/CardUtils';
+import {convertToDisplayString, getCurrencySymbol} from '@libs/CurrencyUtils';
+import {getTransactionDetails} from '@libs/ReportUtils';
+import {getCardName} from '@libs/TransactionUtils';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
-import type {Transaction} from '@src/types/onyx';
-import EReceiptThumbnail from './EReceiptThumbnail';
import Icon from './Icon';
import * as Expensicons from './Icon/Expensicons';
+import ImageSVG from './ImageSVG';
+import type {TransactionListItemType} from './SelectionList/types';
import Text from './Text';
-type EReceiptOnyxProps = {
- transaction: OnyxEntry;
-};
-
-type EReceiptProps = EReceiptOnyxProps & {
+type EReceiptProps = {
/* TransactionID of the transaction this EReceipt corresponds to */
- transactionID: string;
+ transactionID: string | undefined;
+
+ /** The transaction data in search */
+ transactionItem?: TransactionListItemType;
+
+ /** Where it is the preview */
+ isThumbnail?: boolean;
};
-function EReceipt({transaction, transactionID}: EReceiptProps) {
+const receiptMCCSize: number = variables.eReceiptMCCHeightWidthMedium;
+const backgroundImageMinWidth: number = variables.eReceiptBackgroundImageMinWidth;
+function EReceipt({transactionID, transactionItem, isThumbnail = false}: EReceiptProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
+ const theme = useTheme();
+
+ const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
- // Get receipt colorway, or default to Yellow.
- const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)) ?? {};
+ const {primaryColor, secondaryColor, titleColor, MCCIcon, tripIcon, backgroundImage} = useEReceipt(transactionItem ?? transaction);
const {
amount: transactionAmount,
@@ -41,59 +48,110 @@ function EReceipt({transaction, transactionID}: EReceiptProps) {
merchant: transactionMerchant,
created: transactionDate,
cardID: transactionCardID,
- } = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT) ?? {};
- const formattedAmount = CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency);
- const currency = CurrencyUtils.getCurrencySymbol(transactionCurrency ?? '');
+ } = getTransactionDetails(transactionItem ?? transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT) ?? {};
+ const formattedAmount = convertToDisplayString(transactionAmount, transactionCurrency);
+ const currency = getCurrencySymbol(transactionCurrency ?? '');
const amount = currency ? formattedAmount.replace(currency, '') : formattedAmount;
- const cardDescription = TransactionUtils.getCardName(transaction) ?? (transactionCardID ? CardUtils.getCardDescription(transactionCardID) : '');
+ const cardDescription = getCardName(transaction) ?? (transactionCardID ? getCardDescription(transactionCardID) : '');
- const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor) : undefined;
+ const secondaryBgcolorStyle = secondaryColor ? StyleUtils.getBackgroundColorStyle(secondaryColor) : undefined;
+ const primaryTextColorStyle = primaryColor ? StyleUtils.getColorStyle(primaryColor) : undefined;
+ const titleTextColorStyle = titleColor ? StyleUtils.getColorStyle(titleColor) : undefined;
return (
-
-
-
-
-
-
-
-
-
-
-
- {currency}
-
-
- {amount}
-
-
- {transactionMerchant}
+
+
+
+
-
-
- {translate('eReceipt.transactionDate')}
- {transactionDate}
-
-
- {translate('common.card')}
- {cardDescription}
+
+
+
+
+
+
+
+ {MCCIcon ? (
+
+ ) : null}
+ {!MCCIcon && tripIcon ? (
+
+ ) : null}
+
+
+ {translate('eReceipt.guaranteed')}
+
+
+
+
+
+
+
+ {currency}
+
+
+ {amount}
+
+
+ {transactionMerchant}
+
+
+
+ {translate('eReceipt.transactionDate')}
+ {transactionDate}
+
+
+ {translate('common.card')}
+ {cardDescription}
+
+
+
+
+
+
+
+
+
+
-
-
- {translate('eReceipt.guaranteed')}
-
);
@@ -101,9 +159,5 @@ function EReceipt({transaction, transactionID}: EReceiptProps) {
EReceipt.displayName = 'EReceipt';
-export default withOnyx({
- transaction: {
- key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
- },
-})(EReceipt);
-export type {EReceiptProps, EReceiptOnyxProps};
+export default EReceipt;
+export type {EReceiptProps};
diff --git a/src/components/EReceiptThumbnail.tsx b/src/components/EReceiptThumbnail.tsx
index 4b0c0caa1035..2e5e44073220 100644
--- a/src/components/EReceiptThumbnail.tsx
+++ b/src/components/EReceiptThumbnail.tsx
@@ -1,27 +1,23 @@
-import React, {useMemo} from 'react';
+import React from 'react';
import {View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
+import useEReceipt from '@hooks/useEReceipt';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
-import {getTransactionDetails} from '@libs/ReportUtils';
import {isPerDiemRequest as isPerDiemRequestTransactionUtils} from '@libs/TransactionUtils';
-import {getTripEReceiptIcon} from '@libs/TripReservationUtils';
import colors from '@styles/theme/colors';
import variables from '@styles/variables';
-import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import Icon from './Icon';
-import * as eReceiptBGs from './Icon/EReceiptBGs';
import * as Expensicons from './Icon/Expensicons';
-import * as MCCIcons from './Icon/MCCIcons';
-import Image from './Image';
+import ImageSVG from './ImageSVG';
import Text from './Text';
type IconSize = 'x-small' | 'small' | 'medium' | 'large';
type EReceiptThumbnailProps = {
/** TransactionID of the transaction this EReceipt corresponds to. */
- transactionID: string;
+ transactionID: string | undefined;
/** Border radius to be applied on the parent view. */
borderRadius?: number;
@@ -39,30 +35,12 @@ type EReceiptThumbnailProps = {
iconSize?: IconSize;
};
-const backgroundImages = {
- [CONST.ERECEIPT_COLORS.YELLOW]: eReceiptBGs.EReceiptBG_Yellow,
- [CONST.ERECEIPT_COLORS.ICE]: eReceiptBGs.EReceiptBG_Ice,
- [CONST.ERECEIPT_COLORS.BLUE]: eReceiptBGs.EReceiptBG_Blue,
- [CONST.ERECEIPT_COLORS.GREEN]: eReceiptBGs.EReceiptBG_Green,
- [CONST.ERECEIPT_COLORS.TANGERINE]: eReceiptBGs.EReceiptBG_Tangerine,
- [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink,
-};
-
function EReceiptThumbnail({transactionID, borderRadius, fileExtension, isReceiptThumbnail = false, centerIconV = true, iconSize = 'large'}: EReceiptThumbnailProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
- const colorCode = isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transaction);
- const backgroundImage = useMemo(() => backgroundImages[colorCode], [colorCode]);
-
- const colorStyles = StyleUtils.getEReceiptColorStyles(colorCode);
- const primaryColor = colorStyles?.backgroundColor;
- const secondaryColor = colorStyles?.color;
- const transactionDetails = getTransactionDetails(transaction);
- const transactionMCCGroup = transactionDetails?.mccGroup;
- const MCCIcon = transactionMCCGroup ? MCCIcons[`${transactionMCCGroup}`] : undefined;
- const tripIcon = getTripEReceiptIcon(transaction);
+ const {primaryColor, secondaryColor, MCCIcon, tripIcon, backgroundImage} = useEReceipt(transaction, fileExtension, isReceiptThumbnail);
const isPerDiemRequest = isPerDiemRequestTransactionUtils(transaction);
let receiptIconWidth: number = variables.eReceiptIconWidth;
@@ -104,11 +82,9 @@ function EReceiptThumbnail({transactionID, borderRadius, fileExtension, isReceip
borderRadius ? {borderRadius} : {},
]}
>
-
+
+
+
{
+ const {width} = e.nativeEvent.layout;
+ setScaleFactor(width / variables.eReceiptBGHWidth);
+ };
+
+ return scaleFactor ? (
+
+
+
+
+
+ ) : (
+
+ );
+}
+
+EReceiptWithSizeCalculation.displayName = 'EReceiptWithSizeCalculation';
+
+export default EReceiptWithSizeCalculation;
diff --git a/src/components/Icon/EReceiptBGs.ts b/src/components/Icon/EReceiptBGs.ts
index 16c23f4a99d4..37be0bf8d653 100644
--- a/src/components/Icon/EReceiptBGs.ts
+++ b/src/components/Icon/EReceiptBGs.ts
@@ -1,8 +1,8 @@
-import EReceiptBG_Blue from '@assets/images/eReceiptBGs/eReceiptBG_blue.png';
-import EReceiptBG_Green from '@assets/images/eReceiptBGs/eReceiptBG_green.png';
-import EReceiptBG_Ice from '@assets/images/eReceiptBGs/eReceiptBG_navy.png';
-import EReceiptBG_Pink from '@assets/images/eReceiptBGs/eReceiptBG_pink.png';
-import EReceiptBG_Tangerine from '@assets/images/eReceiptBGs/eReceiptBG_tangerine.png';
-import EReceiptBG_Yellow from '@assets/images/eReceiptBGs/eReceiptBG_yellow.png';
+import EReceiptBG_Blue from '@assets/images/eReceiptBGs/eReceiptBG_blue.svg';
+import EReceiptBG_Green from '@assets/images/eReceiptBGs/eReceiptBG_green.svg';
+import EReceiptBG_Ice from '@assets/images/eReceiptBGs/eReceiptBG_ice.svg';
+import EReceiptBG_Pink from '@assets/images/eReceiptBGs/eReceiptBG_pink.svg';
+import EReceiptBG_Tangerine from '@assets/images/eReceiptBGs/eReceiptBG_tangerine.svg';
+import EReceiptBG_Yellow from '@assets/images/eReceiptBGs/eReceiptBG_yellow.svg';
export {EReceiptBG_Yellow, EReceiptBG_Ice, EReceiptBG_Blue, EReceiptBG_Green, EReceiptBG_Tangerine, EReceiptBG_Pink};
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index db5c81a0cfc3..146a58f5940f 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -162,6 +162,7 @@ import Printer from '@assets/images/printer.svg';
import Profile from '@assets/images/profile.svg';
import QrCode from '@assets/images/qrcode.svg';
import QuestionMark from '@assets/images/question-mark-circle.svg';
+import ReceiptBody from '@assets/images/receipt-body.svg';
import ReceiptPlaceholderPlus from '@assets/images/receipt-placeholder-plus.svg';
import ReceiptPlus from '@assets/images/receipt-plus.svg';
import ReceiptScan from '@assets/images/receipt-scan.svg';
@@ -216,6 +217,7 @@ import Clear from '@assets/images/x-circle.svg';
import Zoom from '@assets/images/zoom.svg';
export {
+ ReceiptBody,
ActiveRoomAvatar,
AddReaction,
AdminRoomAvatar,
diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx
index bca1ef8b74e6..443bc949ecc7 100644
--- a/src/components/ReceiptImage.tsx
+++ b/src/components/ReceiptImage.tsx
@@ -5,9 +5,11 @@ import CONST from '@src/CONST';
import type IconAsset from '@src/types/utils/IconAsset';
import EReceiptThumbnail from './EReceiptThumbnail';
import type {IconSize} from './EReceiptThumbnail';
+import EReceiptWithSizeCalculation from './EReceiptWithSizeCalculation';
import Image from './Image';
import PDFThumbnail from './PDFThumbnail';
import ReceiptEmptyState from './ReceiptEmptyState';
+import type {TransactionListItemType} from './SelectionList/types';
import ThumbnailImage from './ThumbnailImage';
type Style = {height: number; borderRadius: number; margin: number};
@@ -85,6 +87,12 @@ type ReceiptImageProps = (
/** Callback to be called on pressing the image */
onPress?: () => void;
+
+ /** Whether the receipt is a per diem request */
+ isPerDiemRequest?: boolean;
+
+ /** The transaction data in search */
+ transactionItem?: TransactionListItemType;
};
function ReceiptImage({
@@ -105,6 +113,8 @@ function ReceiptImage({
fallbackIconBackground,
isEmptyReceipt = false,
onPress,
+ transactionItem,
+ isPerDiemRequest,
}: ReceiptImageProps) {
const styles = useThemeStyles();
@@ -127,12 +137,21 @@ function ReceiptImage({
);
}
- if (isEReceipt || isThumbnail) {
+ if (isEReceipt && !isPerDiemRequest) {
+ return (
+
+ );
+ }
+
+ if (isThumbnail || (isEReceipt && isPerDiemRequest)) {
const props = isThumbnail && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true};
return (
@@ -148,12 +150,7 @@ function ReportActionItemImage({
style={[styles.w100, styles.h100, styles.noOutline as ViewStyle]}
onPress={() =>
Navigation.navigate(
- ROUTES.TRANSACTION_RECEIPT.getRoute(
- transactionThreadReport?.reportID ?? report?.reportID ?? '-1',
- transaction?.transactionID ?? '-1',
- readonly,
- isFromReviewDuplicates,
- ),
+ ROUTES.TRANSACTION_RECEIPT.getRoute(transactionThreadReport?.reportID ?? report?.reportID, transaction?.transactionID, readonly, isFromReviewDuplicates),
)
}
accessibilityLabel={translate('accessibilityHints.viewAttachment')}
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 48f8f4b2780f..1525628e9216 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -122,6 +122,7 @@ function ReceiptCell({transactionItem}: TransactionCellProps) {
fallbackIconColor={theme.icon}
fallbackIconBackground={transactionItem.isSelected ? theme.buttonHoveredBG : undefined}
iconSize="x-small"
+ transactionItem={transactionItem}
/>
);
diff --git a/src/hooks/useEReceipt.tsx b/src/hooks/useEReceipt.tsx
new file mode 100644
index 000000000000..874cea5cdfd6
--- /dev/null
+++ b/src/hooks/useEReceipt.tsx
@@ -0,0 +1,43 @@
+import {useMemo} from 'react';
+import * as eReceiptBGs from '@components/Icon/EReceiptBGs';
+import * as MCCIcons from '@components/Icon/MCCIcons';
+import type {TransactionListItemType} from '@components/SelectionList/types';
+import {getTransactionDetails} from '@libs/ReportUtils';
+import {getTripEReceiptIcon} from '@libs/TripReservationUtils';
+import CONST from '@src/CONST';
+import type {Transaction} from '@src/types/onyx';
+import useStyleUtils from './useStyleUtils';
+
+const backgroundImages = {
+ [CONST.ERECEIPT_COLORS.YELLOW]: eReceiptBGs.EReceiptBG_Yellow,
+ [CONST.ERECEIPT_COLORS.ICE]: eReceiptBGs.EReceiptBG_Ice,
+ [CONST.ERECEIPT_COLORS.BLUE]: eReceiptBGs.EReceiptBG_Blue,
+ [CONST.ERECEIPT_COLORS.GREEN]: eReceiptBGs.EReceiptBG_Green,
+ [CONST.ERECEIPT_COLORS.TANGERINE]: eReceiptBGs.EReceiptBG_Tangerine,
+ [CONST.ERECEIPT_COLORS.PINK]: eReceiptBGs.EReceiptBG_Pink,
+};
+
+export default function useEReceipt(transactionData: Transaction | TransactionListItemType | undefined, fileExtension?: string, isReceiptThumbnail?: boolean) {
+ const StyleUtils = useStyleUtils();
+
+ const colorCode = isReceiptThumbnail ? StyleUtils.getFileExtensionColorCode(fileExtension) : StyleUtils.getEReceiptColorCode(transactionData);
+ const colorStyles = StyleUtils.getEReceiptColorStyles(colorCode);
+ const primaryColor = colorStyles?.backgroundColor;
+ const secondaryColor = colorStyles?.color;
+ const titleColor = colorStyles?.titleColor;
+ const transactionDetails = getTransactionDetails(transactionData);
+ const transactionMCCGroup = transactionDetails?.mccGroup;
+ const MCCIcon = transactionMCCGroup ? MCCIcons[`${transactionMCCGroup}`] : undefined;
+ const tripIcon = getTripEReceiptIcon(transactionData);
+
+ const backgroundImage = useMemo(() => backgroundImages[colorCode], [colorCode]);
+
+ return {
+ primaryColor,
+ secondaryColor,
+ titleColor,
+ MCCIcon,
+ tripIcon,
+ backgroundImage,
+ };
+}
diff --git a/src/stories/EReceipt.stories.tsx b/src/stories/EReceipt.stories.tsx
index 1138d8e45778..1bbd39e1fda8 100644
--- a/src/stories/EReceipt.stories.tsx
+++ b/src/stories/EReceipt.stories.tsx
@@ -2,7 +2,7 @@
import type {Meta, StoryFn} from '@storybook/react';
import React from 'react';
import Onyx from 'react-native-onyx';
-import type {EReceiptOnyxProps, EReceiptProps} from '@components/EReceipt';
+import type {EReceiptProps} from '@components/EReceipt';
import EReceipt from '@components/EReceipt';
import ONYXKEYS from '@src/ONYXKEYS';
import type CollectionDataSet from '@src/types/utils/CollectionDataSet';
@@ -169,7 +169,7 @@ const story: Meta = {
component: EReceipt,
};
-function Template(props: Omit) {
+function Template(props: EReceiptProps) {
// eslint-disable-next-line react/jsx-props-no-spreading
return ;
}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7e351983fe46..74bb6ee6877a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -581,6 +581,10 @@ const styles = (theme: ThemeColors) =>
borderRadius: variables.componentBorderRadiusLarge,
},
+ borderRadiusComponentNormal: {
+ borderRadius: variables.componentBorderRadiusNormal,
+ },
+
topLevelBottomTabBar: (shouldDisplayTopLevelBottomTabBar: boolean, shouldUseNarrowLayout: boolean, bottomSafeAreaOffset: number) => ({
// We have to use position fixed to make sure web on safari displays the bottom tab bar correctly.
// On natives we can use absolute positioning.
@@ -4195,8 +4199,8 @@ const styles = (theme: ThemeColors) =>
eReceiptWaypointAddress: {
...FontUtils.fontFamily.platform.MONOSPACE,
- fontSize: variables.fontSizeNormal,
- lineHeight: variables.lineHeightNormal,
+ fontSize: variables.fontSizeSmall,
+ lineHeight: variables.lineHeightSmall,
color: theme.textColorfulBackground,
},
@@ -4234,12 +4238,28 @@ const styles = (theme: ThemeColors) =>
},
eReceiptContainer: {
- width: 335,
- minHeight: 540,
- borderRadius: 20,
+ width: variables.eReceiptBGHWidth,
+ minHeight: variables.eReceiptBGHeight,
overflow: 'hidden',
},
+ eReceiptContentContainer: {
+ ...sizing.w100,
+ ...spacing.p5,
+ minWidth: variables.eReceiptBodyWidth,
+ minHeight: variables.eReceiptBodyHeight,
+ },
+
+ eReceiptContentWrapper: {
+ ...sizing.w100,
+ ...spacing.ph5,
+ ...spacing.pt10,
+ ...spacing.pb4,
+ ...sizing.h100,
+ position: 'absolute',
+ left: 0,
+ },
+
loginHeroBody: {
...FontUtils.fontFamily.platform.EXP_NEUE,
fontSize: variables.fontSizeSignInHeroBody,
@@ -4710,8 +4730,8 @@ const styles = (theme: ThemeColors) =>
borderWidth: 2,
borderColor: theme.cardBG,
borderRadius: variables.componentBorderRadiusLarge,
- height: 200,
- maxWidth: 400,
+ height: 180,
+ maxWidth: 360,
},
pdfErrorPlaceholder: {
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index b6ee3085d981..c407ee6b8b82 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -69,12 +69,12 @@ const workspaceColorOptions: SVGAvatarColorStyle[] = [
];
const eReceiptColorStyles: Partial> = {
- [CONST.ERECEIPT_COLORS.YELLOW]: {backgroundColor: colors.yellow600, color: colors.yellow100},
- [CONST.ERECEIPT_COLORS.ICE]: {backgroundColor: colors.blue800, color: colors.ice400},
- [CONST.ERECEIPT_COLORS.BLUE]: {backgroundColor: colors.blue400, color: colors.blue100},
- [CONST.ERECEIPT_COLORS.GREEN]: {backgroundColor: colors.green800, color: colors.green400},
- [CONST.ERECEIPT_COLORS.TANGERINE]: {backgroundColor: colors.tangerine800, color: colors.tangerine400},
- [CONST.ERECEIPT_COLORS.PINK]: {backgroundColor: colors.pink800, color: colors.pink400},
+ [CONST.ERECEIPT_COLORS.YELLOW]: {backgroundColor: colors.yellow800, color: colors.yellow400, titleColor: colors.yellow500},
+ [CONST.ERECEIPT_COLORS.ICE]: {backgroundColor: colors.ice800, color: colors.ice400, titleColor: colors.ice500},
+ [CONST.ERECEIPT_COLORS.BLUE]: {backgroundColor: colors.blue800, color: colors.blue400, titleColor: colors.blue500},
+ [CONST.ERECEIPT_COLORS.GREEN]: {backgroundColor: colors.green800, color: colors.green400, titleColor: colors.green500},
+ [CONST.ERECEIPT_COLORS.TANGERINE]: {backgroundColor: colors.tangerine800, color: colors.tangerine400, titleColor: colors.tangerine500},
+ [CONST.ERECEIPT_COLORS.PINK]: {backgroundColor: colors.pink800, color: colors.pink400, titleColor: colors.pink500},
};
const eReceiptColors: EReceiptColorName[] = [
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index 526ae3a9b18d..e710676eaa9c 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -355,6 +355,10 @@ export default {
marginBottom: 40,
},
+ mb11: {
+ marginBottom: 44,
+ },
+
mb12: {
marginBottom: 48,
},
diff --git a/src/styles/utils/types.ts b/src/styles/utils/types.ts
index 7dc70dc2e64e..aa65542f5365 100644
--- a/src/styles/utils/types.ts
+++ b/src/styles/utils/types.ts
@@ -41,7 +41,7 @@ type ButtonStateName = ValueOf;
type AvatarSize = {width: number};
type SVGAvatarColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
-type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
+type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue; titleColor: ColorValue};
type TextColorStyle = {color: string};
export type {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 2b39f2320b91..8ed5db32afd2 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -190,15 +190,17 @@ export default {
eReceiptIconHeightMedium: 82,
eReceiptIconWidthMedium: 59,
eReceiptMCCHeightWidthMedium: 32,
- eReceiptWordmarkHeight: 19.25,
+ eReceiptWordmarkHeight: 20,
eReceiptWordmarkWidth: 86,
eReceiptBGHeight: 540,
eReceiptBGHWidth: 335,
+ eReceiptBodyHeight: 500,
+ eReceiptBodyWidth: 295,
eReceiptTextContainerWidth: 263,
receiptPlaceholderIconWidth: 80,
receiptPlaceholderIconHeight: 80,
reportPreviewMaxWidth: 335,
- reportActionImagesSingleImageHeight: 147,
+ reportActionImagesSingleImageHeight: 160,
reportActionImagesDoubleImageHeight: 138,
reportActionImagesMultipleImageHeight: 110,
reportActionItemImagesMoreCornerTriangleWidth: 40,