[TS migration] Migrate IOURequestStepTaxRatePage and IOURequestStepTaxAmountPage to TypeScript #39059
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
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 | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -1,90 +1,73 @@ | ||||||||
| import {useFocusEffect} from '@react-navigation/native'; | ||||||||
| import React, {useCallback, useEffect, useRef} from 'react'; | ||||||||
| import {View} from 'react-native'; | ||||||||
| import type {OnyxEntry} from 'react-native-onyx'; | ||||||||
| import {withOnyx} from 'react-native-onyx'; | ||||||||
| import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; | ||||||||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||||||||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||||||||
| import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; | ||||||||
| import useLocalize from '@hooks/useLocalize'; | ||||||||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||||||||
| import * as CurrencyUtils from '@libs/CurrencyUtils'; | ||||||||
| import * as IOUUtils from '@libs/IOUUtils'; | ||||||||
| import Navigation from '@libs/Navigation/Navigation'; | ||||||||
| import * as TransactionUtils from '@libs/TransactionUtils'; | ||||||||
| import MoneyRequestAmountForm from '@pages/iou/steps/MoneyRequestAmountForm'; | ||||||||
| import * as IOU from '@userActions/IOU'; | ||||||||
| import CONST from '@src/CONST'; | ||||||||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||||||||
| import ROUTES from '@src/ROUTES'; | ||||||||
| import type {Policy, Transaction} from '@src/types/onyx'; | ||||||||
| import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; | ||||||||
| import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound'; | ||||||||
| import withWritableReportOrNotFound from './withWritableReportOrNotFound'; | ||||||||
|
|
||||||||
| type IOURequestStepTaxAmountPageOnyxProps = { | ||||||||
| policy: OnyxEntry<Policy>; | ||||||||
| }; | ||||||||
|
|
||||||||
| type IOURequestStepTaxAmountPageProps = { | ||||||||
| transaction: OnyxEntry<Transaction>; | ||||||||
| } & IOURequestStepTaxAmountPageOnyxProps & | ||||||||
| WithWritableReportOrNotFoundProps; | ||||||||
|
|
||||||||
| const getTaxAmount = (transaction: OnyxEntry<Transaction>, defaultTaxValue: string | undefined) => { | ||||||||
|
There was a problem hiding this comment. Nit: transform to named function There was a problem hiding this comment. Also add a return type here |
||||||||
| if (!transaction?.amount) { | ||||||||
| return; | ||||||||
| } | ||||||||
|
Comment on lines
+33
to
+35
There was a problem hiding this comment. This incomplete condition lead to this bug here #41434 |
||||||||
| const percentage = (transaction?.taxRate ? transaction?.taxRate?.data?.value : defaultTaxValue) ?? ''; | ||||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||||
| return CurrencyUtils.convertToBackendAmount(TransactionUtils.calculateTaxAmount(percentage, transaction?.amount)); | ||||||||
| }; | ||||||||
|
|
||||||||
| function IOURequestStepTaxAmountPage({ | ||||||||
| route: { | ||||||||
| params: {iouType, reportID, transactionID, backTo}, | ||||||||
| }, | ||||||||
| transaction, | ||||||||
| report, | ||||||||
| policy, | ||||||||
| }: IOURequestStepTaxAmountPageProps) { | ||||||||
| const {translate} = useLocalize(); | ||||||||
| const styles = useThemeStyles(); | ||||||||
| const textInput = useRef<BaseTextInputRef | null>(); | ||||||||
| const isEditing = Navigation.getActiveRoute().includes('taxAmount'); | ||||||||
|
|
||||||||
| const focusTimeoutRef = useRef<NodeJS.Timeout>(); | ||||||||
|
|
||||||||
| const isSaveButtonPressed = useRef(false); | ||||||||
| const originalCurrency = useRef<string>(); | ||||||||
| const taxRates = policy?.taxRates; | ||||||||
|
|
||||||||
| useEffect(() => { | ||||||||
| if (transaction?.originalCurrency) { | ||||||||
| originalCurrency.current = transaction.originalCurrency; | ||||||||
| } else if (transaction?.currency) { | ||||||||
|
There was a problem hiding this comment. make sure this change won't create regressions |
||||||||
| originalCurrency.current = transaction.currency; | ||||||||
| IOU.setMoneyRequestOriginalCurrency_temporaryForRefactor(transactionID, transaction?.currency); | ||||||||
| } | ||||||||
| return () => { | ||||||||
| if (isSaveButtonPressed.current || !originalCurrency.current) { | ||||||||
|
|
||||||||
| return; | ||||||||
| } | ||||||||
| IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, originalCurrency.current, true); | ||||||||
|
|
@@ -94,7 +77,7 @@ function IOURequestStepTaxAmountPage({ | |||||||
|
|
||||||||
| useFocusEffect( | ||||||||
| useCallback(() => { | ||||||||
| focusTimeoutRef.current = setTimeout(() => textInput.current?.focus(), CONST.ANIMATED_TRANSITION); | ||||||||
| return () => { | ||||||||
| if (!focusTimeoutRef.current) { | ||||||||
| return; | ||||||||
|
|
@@ -115,12 +98,13 @@ function IOURequestStepTaxAmountPage({ | |||||||
| Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CURRENCY.getRoute(iouType, transactionID, reportID, backTo ? 'confirm' : '', Navigation.getActiveRouteWithoutParams())); | ||||||||
| }; | ||||||||
|
|
||||||||
| const updateTaxAmount = (currentAmount: {amount: string}) => { | ||||||||
|
There was a problem hiding this comment. Extract this inline type to a separate line |
||||||||
| isSaveButtonPressed.current = true; | ||||||||
| const amountInSmallestCurrencyUnits = CurrencyUtils.convertToBackendAmount(Number.parseFloat(currentAmount.amount)); | ||||||||
| IOU.setMoneyRequestTaxAmount(transactionID, amountInSmallestCurrencyUnits); | ||||||||
|
|
||||||||
| // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing | ||||||||
| IOU.setMoneyRequestCurrency_temporaryForRefactor(transactionID, transaction?.currency || CONST.CURRENCY.USD, true); | ||||||||
|
|
||||||||
| if (backTo) { | ||||||||
| Navigation.goBack(backTo); | ||||||||
|
|
@@ -130,7 +114,7 @@ function IOURequestStepTaxAmountPage({ | |||||||
| // If a reportID exists in the report object, it's because the user started this flow from using the + button in the composer | ||||||||
| // inside a report. In this case, the participants can be automatically assigned from the report and the user can skip the participants step and go straight | ||||||||
| // to the confirm step. | ||||||||
| if (report?.reportID) { | ||||||||
| // TODO: Is this really needed at all? | ||||||||
| IOU.setMoneyRequestParticipantsFromReport(transactionID, report); | ||||||||
| Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(iouType, transactionID, reportID)); | ||||||||
|
|
@@ -145,10 +129,9 @@ function IOURequestStepTaxAmountPage({ | |||||||
| const content = ( | ||||||||
| <MoneyRequestAmountForm | ||||||||
| isEditing={isEditing} | ||||||||
| currency={transaction?.currency} | ||||||||
| amount={transaction?.taxAmount} | ||||||||
| taxAmount={getTaxAmount(transaction, taxRates?.defaultValue)} | ||||||||
| ref={(e) => (textInput.current = e)} | ||||||||
| onCurrencyButtonPress={navigateToCurrencySelectionPage} | ||||||||
| onSubmitButtonPress={updateTaxAmount} | ||||||||
|
|
@@ -176,16 +159,17 @@ function IOURequestStepTaxAmountPage({ | |||||||
| ); | ||||||||
| } | ||||||||
|
|
||||||||
| IOURequestStepTaxAmountPage.displayName = 'IOURequestStepTaxAmountPage'; | ||||||||
|
|
||||||||
| const IOURequestStepTaxAmountPageWithOnyx = withOnyx<IOURequestStepTaxAmountPageProps, IOURequestStepTaxAmountPageOnyxProps>({ | ||||||||
| policy: { | ||||||||
| key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`, | ||||||||
| }, | ||||||||
| })(IOURequestStepTaxAmountPage); | ||||||||
|
|
||||||||
| // eslint-disable-next-line rulesdir/no-negated-variables | ||||||||
| const IOURequestStepTaxAmountPageWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepTaxAmountPageWithOnyx); | ||||||||
| // eslint-disable-next-line rulesdir/no-negated-variables | ||||||||
| const IOURequestStepTaxAmountPageWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepTaxAmountPageWithWritableReportOrNotFound); | ||||||||
|
|
||||||||
| export default IOURequestStepTaxAmountPageWithFullTransactionOrNotFound; | ||||||||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: