forked from Expensify/App
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
eb98559
commit 6b69c5c
Showing
8 changed files
with
186 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useStyleUtils from '@hooks/useStyleUtils'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import * as CurrencyUtils from '@libs/CurrencyUtils'; | ||
| import * as ReportUtils from '@libs/ReportUtils'; | ||
| import variables from '@styles/variables'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type {TransactionCustomUnit} from '@src/types/onyx/Transaction'; | ||
| import EReceiptThumbnail from './EReceiptThumbnail'; | ||
| import Icon from './Icon'; | ||
| import * as Expensicons from './Icon/Expensicons'; | ||
| import Text from './Text'; | ||
|
|
||
| type PerDiemEReceiptProps = { | ||
| /* TransactionID of the transaction this EReceipt corresponds to */ | ||
| transactionID: string; | ||
| }; | ||
|
|
||
| function computeDefaultPerDiemExpenseRates(customUnit: TransactionCustomUnit, currency: string) { | ||
| const subRates = customUnit.subRates ?? []; | ||
| const subRateComments = subRates.map((subRate) => { | ||
| const rate = subRate.rate ?? 0; | ||
| const rateComment = subRate.name ?? ''; | ||
| const quantity = subRate.quantity ?? 0; | ||
| return `${quantity}x ${rateComment} @ ${CurrencyUtils.convertAmountToDisplayString(rate, currency)}`; | ||
| }); | ||
| return subRateComments.join(', '); | ||
| } | ||
|
|
||
| function getPerDiemDestination(merchant: string) { | ||
| const merchantParts = merchant.split(', '); | ||
| if (merchantParts.length < 1) { | ||
| return ''; | ||
| } | ||
| return merchantParts.slice(0, merchantParts.length - 1).join(', '); | ||
| } | ||
|
|
||
| function getPerDiemDates(merchant: string) { | ||
| const merchantParts = merchant.split(', '); | ||
| if (merchantParts.length < 1) { | ||
| return merchantParts.at(0) ?? ''; | ||
| } | ||
| return merchantParts.at(-1); | ||
| } | ||
|
|
||
| function PerDiemEReceipt({transactionID}: PerDiemEReceiptProps) { | ||
| const styles = useThemeStyles(); | ||
| const StyleUtils = useStyleUtils(); | ||
| const {translate} = useLocalize(); | ||
| 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 {amount: transactionAmount, currency: transactionCurrency, merchant: transactionMerchant} = ReportUtils.getTransactionDetails(transaction, CONST.DATE.MONTH_DAY_YEAR_FORMAT) ?? {}; | ||
| const ratesDescription = computeDefaultPerDiemExpenseRates(transaction?.comment?.customUnit ?? {}, transactionCurrency ?? ''); | ||
| const datesDescription = getPerDiemDates(transactionMerchant ?? ''); | ||
| const destination = getPerDiemDestination(transactionMerchant ?? ''); | ||
| const formattedAmount = CurrencyUtils.convertToDisplayStringWithoutCurrency(transactionAmount ?? 0, transactionCurrency); | ||
| const currency = CurrencyUtils.getCurrencySymbol(transactionCurrency ?? ''); | ||
|
|
||
| const secondaryTextColorStyle = secondaryColor ? StyleUtils.getColorStyle(secondaryColor) : undefined; | ||
|
|
||
| return ( | ||
| <View style={[styles.eReceiptContainer, primaryColor ? StyleUtils.getBackgroundColorStyle(primaryColor) : undefined]}> | ||
| <View style={styles.fullScreen}> | ||
| <EReceiptThumbnail | ||
| transactionID={transactionID} | ||
| centerIconV={false} | ||
| /> | ||
| </View> | ||
| <View style={[styles.alignItemsCenter, styles.ph8, styles.pb14, styles.pt8]}> | ||
| <View style={[StyleUtils.getWidthAndHeightStyle(variables.eReceiptIconWidth, variables.eReceiptIconHeight)]} /> | ||
| </View> | ||
| <View style={[styles.flexColumn, styles.justifyContentBetween, styles.alignItemsCenter, styles.ph9, styles.flex1]}> | ||
| <View style={[styles.alignItemsCenter, styles.alignSelfCenter, styles.flexColumn, styles.gap2, styles.mb8]}> | ||
| <View style={[styles.flexRow, styles.justifyContentCenter, StyleUtils.getWidthStyle(variables.eReceiptTextContainerWidth)]}> | ||
| <View style={[styles.flexColumn, styles.pt1]}> | ||
| <Text style={[styles.eReceiptCurrency, secondaryTextColorStyle]}>{currency}</Text> | ||
| </View> | ||
| <Text | ||
| adjustsFontSizeToFit | ||
| style={[styles.eReceiptAmountLarge, secondaryTextColorStyle]} | ||
| > | ||
| {formattedAmount} | ||
| </Text> | ||
| </View> | ||
| <Text style={[styles.eReceiptMerchant, styles.breakWord, styles.textAlignCenter]}>{`${destination} ${translate('common.perDiem').toLowerCase()}`}</Text> | ||
| </View> | ||
| <View style={[styles.alignSelfStretch, styles.flexColumn, styles.mb8, styles.gap4]}> | ||
| <View style={[styles.flexColumn, styles.gap1]}> | ||
| <Text style={[styles.eReceiptWaypointTitle, secondaryTextColorStyle]}>{translate('iou.dates')}</Text> | ||
| <Text style={[styles.eReceiptWaypointAddress]}>{datesDescription}</Text> | ||
| </View> | ||
| <View style={[styles.flexColumn, styles.gap1]}> | ||
| <Text style={[styles.eReceiptWaypointTitle, secondaryTextColorStyle]}>{translate('iou.rates')}</Text> | ||
| <Text style={[styles.eReceiptWaypointAddress]}>{ratesDescription}</Text> | ||
| </View> | ||
| </View> | ||
| <View style={[styles.justifyContentBetween, styles.alignItemsCenter, styles.alignSelfStretch, styles.flexRow, styles.mb8]}> | ||
| <Icon | ||
| width={variables.eReceiptWordmarkWidth} | ||
| height={variables.eReceiptWordmarkHeight} | ||
| fill={secondaryColor} | ||
| src={Expensicons.ExpensifyWordmark} | ||
| /> | ||
| <Text style={styles.eReceiptGuaranteed}>{translate('eReceipt.guaranteed')}</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| PerDiemEReceipt.displayName = 'PerDiemEReceipt'; | ||
|
|
||
| export default PerDiemEReceipt; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters