Restore missing PlusMinus icon and negative amount functionality from PR #56092

[Copilot]

Summary

This PR restores the missing files and functionality from the original PR #56092 "Add PlusMinus icon and allow negative values in MoneyRequestAmountInput" that were not properly included in the main branch. The original PR was merged with commit 146dd00c4de5a8c1247de450903bf1ea0c6708bc but several critical files and changes were missing.

Issues Fixed

The main branch was missing essential components for negative amount functionality in expense requests:

• Missing assets/images/plus-minus.svg icon file
• Missing PlusMinus icon integration in Expensicons
• Missing "flip" translations in all language files
• Missing negative amount props and logic in MoneyRequestAmountInput
• Missing utility functions for negative amount handling
• Missing styling and display components

Changes Made

🎨 Assets & Icons

• Added assets/images/plus-minus.svg - The PlusMinus icon for toggling amount sign
• Updated src/components/Icon/Expensicons.ts - Added PlusMinus import and export

🌍 Internationalization

• Updated 10 language files with "flip" translations:
  • src/languages/en.ts - "Flip"
  • src/languages/de.ts - "Umkehren"
  • src/languages/es.ts - "Cambiar"
  • src/languages/fr.ts - "Inverser"
  • src/languages/it.ts - "Inverti"
  • src/languages/ja.ts - "反転"
  • src/languages/nl.ts - "Omdraaien"
  • src/languages/pl.ts - "Odwróć"
  • src/languages/pt-BR.ts - "Inverter"
  • src/languages/zh-hans.ts - "翻转"

🧩 Core Components

• Updated src/components/MoneyRequestAmountInput.tsx:

  • Added isNegative, toggleNegative, clearNegative, allowFlippingAmount props
  • Added negative amount input handling logic
  • Added backspace handling for negative state clearing
  • Updated dependency arrays for new callback parameters

• Updated src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx:

  • Added Text component import
  • Added isNegative prop support
  • Added negative symbol display logic

• Updated src/components/TextInputWithCurrencySymbol/types.ts:

  • Added isNegative prop type definition

🔧 Utility Functions

• Updated src/libs/ReportUtils.ts:

  • Added shouldEnableNegative() function to determine when negative amounts are allowed
  • Updated getTransactionDetails() with allowNegativeAmount and disableOppositeConversion parameters
  • Added export for shouldEnableNegative

• Updated src/libs/TransactionUtils/index.ts:

  • Updated getAmount() function with allowNegative and disableOppositeConversion parameters
  • Added logic to handle negative amounts in different expense contexts

• Updated src/libs/ModifiedExpenseMessage.ts:

  • Fixed negative amount display condition from oldAmountValue > 0 to oldAmountValue

🎨 Styling

• Updated src/styles/utils/spacing.ts:
  • Added minWidth18 style (72px) for PlusMinus button styling

Functionality Overview

This restoration enables:

• Negative expense amounts for expense reports and group policies (excluding split bills)
• PlusMinus icon for toggling amount sign in supported contexts
• Internationalized "Flip" button text across all supported languages
• Proper negative symbol display before currency symbols
• Correct transaction amount handling with negative value support

Testing

The changes restore core functionality that:

• Allows users to input negative amounts in expense forms when appropriate
• Displays negative amounts correctly with proper symbols
• Handles negative amounts correctly in transaction processing
• Provides proper UI controls for amount sign toggling

Validation

All restored files match their state in the original merge commit 146dd00c4de5a8c1247de450903bf1ea0c6708bc:

• ✅ PlusMinus SVG content verified (648 bytes, exact match)
• ✅ All translation keys properly added
• ✅ Component props and logic restored
• ✅ Utility function signatures and behavior restored
• ✅ Export statements and imports properly added

Impact

The main branch now fully reflects the intent of the original PR #56092, restoring the complete negative value functionality in MoneyRequestAmountInput that was missing from the production codebase.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[melvin-bot]

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!