Improve deleted tax behavior

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -90,6 +90,7 @@ import {
     getTagArrayFromName,
     getTagForDisplay,
     getTaxName,
+    getTaxValue,
     hasMissingSmartscanFields,
     hasMultipleSplitChildren,
     hasReservationList,
@@ -305,7 +306,12 @@ function MoneyRequestView({
             : convertToDisplayString(Math.abs(transactionTaxAmount ?? 0), actualCurrency);
 
     const taxRatesDescription = taxRates?.name;
-    const taxRateTitle = updatedTransaction ? getTaxName(policy, updatedTransaction, isExpenseUnreported) : getTaxName(policy, transaction, isExpenseUnreported);
+
+    const baseTransaction = updatedTransaction ?? transaction;
+    const {taxCode, taxValue} = baseTransaction ?? {};
+
+    const taxRateTitle = taxCode ? getTaxName(policy, baseTransaction, isExpenseUnreported) : '';
+    const hasTaxValueChanged = taxCode ? getTaxValue(policy, baseTransaction, taxCode) !== baseTransaction?.taxValue : false;
 
     const actualTransactionDate = isFromMergeTransaction && updatedTransaction ? getFormattedCreated(updatedTransaction) : transactionDate;
     const fallbackTaxRateTitle = transaction?.taxValue;
@@ -592,7 +598,7 @@ function MoneyRequestView({
     const decodedCategoryName = getDecodedCategoryName(categoryValue);
     const categoryCopyValue = !canEdit ? decodedCategoryName : undefined;
     const cardCopyValue = cardProgramName;
-    const taxRateValue = transaction?.taxName ?? taxRateTitle ?? fallbackTaxRateTitle;
+    const taxRateValue = hasTaxValueChanged ? taxValue : (transaction?.taxName ?? taxRateTitle ?? fallbackTaxRateTitle ?? '');
     const taxRateCopyValue = !canEditTaxFields ? taxRateValue : undefined;
     const taxAmountTitle = formattedTaxAmount ? formattedTaxAmount.toString() : '';
     const taxAmountCopyValue = !canEditTaxFields ? taxAmountTitle : undefined;

src/components/TaxPicker.tsx

@@ -26,7 +26,7 @@ type TaxPickerProps = {
     transactionID?: string;
 
     /** Callback to fire when a tax is pressed */
-    onSubmit: (tax: TaxRatesOption) => void;
+    onSubmit: (tax: TaxRatesOption, shouldClearTax?: boolean) => void;
 
     /** The action to take */
     action?: IOUAction;
@@ -68,6 +68,22 @@ function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, act
 
     const shouldShowTextInput = !isTaxRatesCountBelowThreshold;
 
+    const {taxCode, taxValue} = transaction ?? {};
+    const hasTaxBeenDeleted = !!taxCode && taxValue !== undefined && !taxRates?.taxes?.[taxCode];
+    const hasTaxValueChanged = !!taxCode && taxValue !== undefined && taxRates?.taxes?.[taxCode]?.value !== taxValue;
+
+    const deletedTaxOption = !hasTaxBeenDeleted
+        ? null
+        : {
+              code: undefined,
+              text: taxValue ?? '',
+              keyForList: taxCode ?? '',
+              searchText: taxValue ?? '',
+              tooltipText: taxValue ?? '',
+              isDisabled: true,
+              isSelected: true,
+          };
+
     const selectedOptions = selectedTaxRate
         ? [
               {
@@ -89,11 +105,17 @@ function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, act
     const selectedOptionKey = sections?.at(0)?.data?.find((taxRate) => taxRate.searchText === selectedTaxRate)?.keyForList;
 
     const handleSelectRow = (newSelectedOption: TaxRatesOption) => {
+        if (hasTaxValueChanged) {
+            onSubmit(newSelectedOption, !newSelectedOption.code);
+            return;
+        }
+
         if (selectedOptionKey === newSelectedOption.keyForList) {
             onDismiss();
             return;
         }
-        onSubmit(newSelectedOption);
+
+        onSubmit(newSelectedOption, hasTaxBeenDeleted);
     };
 
     const textInputOptions = {
@@ -103,9 +125,16 @@ function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, act
         headerMessage: getHeaderMessageForNonUserList((sections.at(0)?.data?.length ?? 0) > 0, searchValue),
     };
 
+    const updatedSections = deletedTaxOption
+        ? sections.map((section) => ({
+              ...section,
+              data: [...section.data.map((item) => (item.code === deletedTaxOption.code ? {...item, isSelected: false} : item)), deletedTaxOption],
+          }))
+        : sections;
+
     return (
         <SelectionListWithSections
-            sections={sections}
+            sections={updatedSections}
             shouldShowTextInput={shouldShowTextInput}
             textInputOptions={textInputOptions}
             onSelectRow={handleSelectRow}

src/pages/iou/request/step/IOURequestStepTaxRatePage.tsx

@@ -76,7 +76,28 @@ function IOURequestStepTaxRatePage({
     const currency = getCurrency(currentTransaction);
     const decimals = getCurrencyDecimals(currency);
 
-    const updateTaxRates = (taxes: TaxRatesOption) => {
+    const updateTaxRates = (taxes: TaxRatesOption, shouldClearTax?: boolean) => {
+        const updateTaxRateParams = {
+            transactionID: currentTransaction?.transactionID,
+            transactionThreadReport: report,
+            parentReport,
+            taxCode: '',
+            taxValue: '',
+            taxAmount: 0,
+            policy,
+            policyTagList: policyTags,
+            policyCategories,
+            currentUserAccountIDParam,
+            currentUserEmailParam,
+            isASAPSubmitBetaEnabled,
+            parentReportNextStep,
+        };
+
+        if (shouldClearTax && isEditing) {
+            updateMoneyRequestTaxRate(updateTaxRateParams);
+            navigateBack();
+            return;
+        }
         if (!currentTransaction || !taxes.code || !taxRates) {
             Navigation.goBack();
             return;
@@ -97,21 +118,7 @@ function IOURequestStepTaxRatePage({
 
         if (isEditing) {
             const newTaxCode = taxes.code;
-            updateMoneyRequestTaxRate({
-                transactionID: currentTransaction?.transactionID,
-                transactionThreadReport: report,
-                parentReport,
-                taxCode: newTaxCode,
-                taxValue,
-                taxAmount: convertToBackendAmount(taxAmount ?? 0),
-                policy,
-                policyTagList: policyTags,
-                policyCategories,
-                currentUserAccountIDParam,
-                currentUserEmailParam,
-                isASAPSubmitBetaEnabled,
-                parentReportNextStep,
-            });
+            updateMoneyRequestTaxRate({...updateTaxRateParams, taxCode: newTaxCode, taxValue, taxAmount: convertToBackendAmount(taxAmount ?? 0)});
             navigateBack();
             return;
         }