From 3b6949de721d483dc86c31c84a68e47c0fdf98c3 Mon Sep 17 00:00:00 2001 From: SP Singh <19812199+spcheema@users.noreply.github.com> Date: Sat, 13 Jan 2024 09:10:43 +1100 Subject: [PATCH 1/7] Migrate EReceipt component to TS --- src/components/{EReceipt.js => EReceipt.tsx} | 64 +++++++++++--------- 1 file changed, 36 insertions(+), 28 deletions(-) rename src/components/{EReceipt.js => EReceipt.tsx} (70%) diff --git a/src/components/EReceipt.js b/src/components/EReceipt.tsx similarity index 70% rename from src/components/EReceipt.js rename to src/components/EReceipt.tsx index 12cea0df04a..9b16a3686ae 100644 --- a/src/components/EReceipt.js +++ b/src/components/EReceipt.tsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -15,44 +15,52 @@ import EReceiptThumbnail from './EReceiptThumbnail'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Text from './Text'; -import transactionPropTypes from './transactionPropTypes'; +import type {Transaction} from "@src/types/onyx"; -const propTypes = { - /* TransactionID of the transaction this EReceipt corresponds to */ - transactionID: PropTypes.string.isRequired, - - /* Onyx Props */ - transaction: transactionPropTypes, -}; +type EReceiptOnyxProps = { + transaction: OnyxEntry; +} -const defaultProps = { - transaction: {}, -}; +type EReceiptProps = EReceiptOnyxProps & { + /* TransactionID of the transaction this EReceipt corresponds to */ + transactionID: string; +} -function EReceipt({transaction, transactionID}) { +function EReceipt({transaction, transactionID}: EReceiptProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); // Get receipt colorway, or default to Yellow. - const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + const primaryColor = colorStyles?.backgroundColor; + const secondaryColor = colorStyles?.color; + + // const { + // amount: transactionAmount, + // currency: transactionCurrency, + // merchant: transactionMerchant, + // created: transactionDate, + // cardID: transactionCardID, + // } = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT); + + const transactionDetails = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT); + + const transactionAmount = transactionDetails?.amount + const transactionCurrency = transactionDetails?.currency || '' + const transactionMerchant = transactionDetails?.merchant + const transactionDate = transactionDetails?.created + const transactionCardID = transactionDetails?.cardID - const { - amount: transactionAmount, - currency: transactionCurrency, - 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); - const amount = formattedAmount.replace(currency, ''); - const cardDescription = CardUtils.getCardDescription(transactionCardID); + const amount = currency ? formattedAmount.replace(currency, ''): ''; + const cardDescription = transactionCardID ? CardUtils.getCardDescription(transactionCardID) : ''; - const secondaryTextColorStyle = StyleUtils.getColorStyle(secondaryColor); + const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor): {}; return ( - + @@ -99,11 +107,11 @@ function EReceipt({transaction, transactionID}) { } EReceipt.displayName = 'EReceipt'; -EReceipt.propTypes = propTypes; -EReceipt.defaultProps = defaultProps; -export default withOnyx({ +export default withOnyx({ transaction: { key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, }, })(EReceipt); + +export type {EReceiptProps, EReceiptOnyxProps}; \ No newline at end of file From 07ff3e031889c5468cca88da037055edf708b8ff Mon Sep 17 00:00:00 2001 From: SP Singh <19812199+spcheema@users.noreply.github.com> Date: Wed, 17 Jan 2024 09:16:29 +1100 Subject: [PATCH 2/7] Clean up unused code --- src/components/EReceipt.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx index 9b16a3686ae..c49e64c11ab 100644 --- a/src/components/EReceipt.tsx +++ b/src/components/EReceipt.tsx @@ -1,4 +1,3 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; @@ -36,16 +35,7 @@ function EReceipt({transaction, transactionID}: EReceiptProps) { const primaryColor = colorStyles?.backgroundColor; const secondaryColor = colorStyles?.color; - // const { - // amount: transactionAmount, - // currency: transactionCurrency, - // merchant: transactionMerchant, - // created: transactionDate, - // cardID: transactionCardID, - // } = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT); - const transactionDetails = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT); - const transactionAmount = transactionDetails?.amount const transactionCurrency = transactionDetails?.currency || '' const transactionMerchant = transactionDetails?.merchant @@ -113,5 +103,3 @@ export default withOnyx({ key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, }, })(EReceipt); - -export type {EReceiptProps, EReceiptOnyxProps}; \ No newline at end of file From 765001a04cddabcb2e8a84678d33b5c7dd53d8eb Mon Sep 17 00:00:00 2001 From: SP Singh <19812199+spcheema@users.noreply.github.com> Date: Wed, 17 Jan 2024 09:33:07 +1100 Subject: [PATCH 3/7] Reformat code --- src/components/EReceipt.tsx | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx index c49e64c11ab..b60b3be2ce9 100644 --- a/src/components/EReceipt.tsx +++ b/src/components/EReceipt.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {View} from 'react-native'; -import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -10,20 +11,20 @@ import * as ReportUtils from '@libs/ReportUtils'; 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 Text from './Text'; -import type {Transaction} from "@src/types/onyx"; type EReceiptOnyxProps = { transaction: OnyxEntry; -} +}; type EReceiptProps = EReceiptOnyxProps & { /* TransactionID of the transaction this EReceipt corresponds to */ transactionID: string; -} +}; function EReceipt({transaction, transactionID}: EReceiptProps) { const styles = useThemeStyles(); @@ -31,26 +32,26 @@ function EReceipt({transaction, transactionID}: EReceiptProps) { const {translate} = useLocalize(); // Get receipt colorway, or default to Yellow. - const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); + const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); const primaryColor = colorStyles?.backgroundColor; const secondaryColor = colorStyles?.color; const transactionDetails = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT); - const transactionAmount = transactionDetails?.amount - const transactionCurrency = transactionDetails?.currency || '' - const transactionMerchant = transactionDetails?.merchant - const transactionDate = transactionDetails?.created - const transactionCardID = transactionDetails?.cardID + const transactionAmount = transactionDetails?.amount; + const transactionCurrency = transactionDetails?.currency ?? ''; + const transactionMerchant = transactionDetails?.merchant; + const transactionDate = transactionDetails?.created; + const transactionCardID = transactionDetails?.cardID; const formattedAmount = CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); const currency = CurrencyUtils.getCurrencySymbol(transactionCurrency); - const amount = currency ? formattedAmount.replace(currency, ''): ''; + const amount = currency ? formattedAmount.replace(currency, '') : ''; const cardDescription = transactionCardID ? CardUtils.getCardDescription(transactionCardID) : ''; - const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor): {}; + const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor) : {}; return ( - + From 25ba539db343c321dc6f5df1821072809e003c72 Mon Sep 17 00:00:00 2001 From: SP Singh <19812199+spcheema@users.noreply.github.com> Date: Wed, 17 Jan 2024 12:55:13 +1100 Subject: [PATCH 4/7] Fix empty amount issue --- src/components/EReceipt.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx index b60b3be2ce9..5a8ad8fac95 100644 --- a/src/components/EReceipt.tsx +++ b/src/components/EReceipt.tsx @@ -45,7 +45,7 @@ function EReceipt({transaction, transactionID}: EReceiptProps) { const formattedAmount = CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency); const currency = CurrencyUtils.getCurrencySymbol(transactionCurrency); - const amount = currency ? formattedAmount.replace(currency, '') : ''; + const amount = currency ? formattedAmount.replace(currency, '') : formattedAmount; const cardDescription = transactionCardID ? CardUtils.getCardDescription(transactionCardID) : ''; const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor) : {}; From e0ea549481b444855b5af15c4e3cd41df8c471a5 Mon Sep 17 00:00:00 2001 From: SP Singh <19812199+spcheema@users.noreply.github.com> Date: Wed, 17 Jan 2024 21:23:42 +1100 Subject: [PATCH 5/7] Update src/components/EReceipt.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- src/components/EReceipt.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx index 5a8ad8fac95..77ee9bbbcaa 100644 --- a/src/components/EReceipt.tsx +++ b/src/components/EReceipt.tsx @@ -51,7 +51,7 @@ function EReceipt({transaction, transactionID}: EReceiptProps) { const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor) : {}; return ( - + From cc413810491ad654bf2ac30dda2102cb12a70478 Mon Sep 17 00:00:00 2001 From: SP Singh <19812199+spcheema@users.noreply.github.com> Date: Wed, 17 Jan 2024 21:23:49 +1100 Subject: [PATCH 6/7] Update src/components/EReceipt.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- src/components/EReceipt.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx index 77ee9bbbcaa..ebde8479b07 100644 --- a/src/components/EReceipt.tsx +++ b/src/components/EReceipt.tsx @@ -48,7 +48,7 @@ function EReceipt({transaction, transactionID}: EReceiptProps) { const amount = currency ? formattedAmount.replace(currency, '') : formattedAmount; const cardDescription = transactionCardID ? CardUtils.getCardDescription(transactionCardID) : ''; - const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor) : {}; + const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor) : undefined; return ( From b62f7ca48a76635d963236a5586f333396c7fcba Mon Sep 17 00:00:00 2001 From: SP Singh <19812199+spcheema@users.noreply.github.com> Date: Mon, 22 Jan 2024 10:46:19 +1100 Subject: [PATCH 7/7] Update src/components/EReceipt.tsx Co-authored-by: Aimane Chnaif <96077027+aimane-chnaif@users.noreply.github.com> --- src/components/EReceipt.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/EReceipt.tsx b/src/components/EReceipt.tsx index ebde8479b07..f0a7ac1aec9 100644 --- a/src/components/EReceipt.tsx +++ b/src/components/EReceipt.tsx @@ -32,17 +32,15 @@ function EReceipt({transaction, transactionID}: EReceiptProps) { const {translate} = useLocalize(); // Get receipt colorway, or default to Yellow. - const colorStyles = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)); - const primaryColor = colorStyles?.backgroundColor; - const secondaryColor = colorStyles?.color; - - const transactionDetails = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT); - const transactionAmount = transactionDetails?.amount; - const transactionCurrency = transactionDetails?.currency ?? ''; - const transactionMerchant = transactionDetails?.merchant; - const transactionDate = transactionDetails?.created; - const transactionCardID = transactionDetails?.cardID; + const {backgroundColor: primaryColor, color: secondaryColor} = StyleUtils.getEReceiptColorStyles(StyleUtils.getEReceiptColorCode(transaction)) ?? {}; + const { + amount: transactionAmount, + currency: transactionCurrency = '', + 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); const amount = currency ? formattedAmount.replace(currency, '') : formattedAmount;