Merge pull request #17718 from Expensify/Rory-OptimisticTransactions

Optimistically generate transactions in existing IOU flows

Author: luacmartins

jest/setup.js

@@ -9,9 +9,10 @@ reanimatedJestUtils.setUpTests();
 // https://reactnavigation.org/docs/testing/#mocking-native-modules
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 
-// We have to mock the SQLiteStorage provider because it uses the native module SQLiteStorage, which is not available in jest.
-// Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project
-jest.mock('react-native-onyx/lib/storage/providers/SQLiteStorage', () => require('react-native-onyx/lib/storage/__mocks__'));
+// Mock react-native-onyx storage layer because the SQLite storage layer doesn't work in jest.
+// Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project,
+// and we only want to mock the storage layer, not the whole Onyx module.
+jest.mock('react-native-onyx/lib/storage', () => require('react-native-onyx/lib/storage/__mocks__'));
 
 // Turn off the console logs for timing events. They are not relevant for unit tests and create a lot of noise
 jest.spyOn(console, 'debug').mockImplementation((...params) => {

package-lock.json

@@ -44,10 +44,11 @@
   },
   "dependencies": {
     "@expensify/react-native-web": "0.18.15",
-    "@formatjs/intl-getcanonicallocales": "^1.5.8",
-    "@formatjs/intl-locale": "^2.4.21",
-    "@formatjs/intl-numberformat": "^6.2.5",
-    "@formatjs/intl-pluralrules": "^4.0.13",
+    "@formatjs/intl-getcanonicallocales": "^2.2.0",
+    "@formatjs/intl-listformat": "^7.2.2",
+    "@formatjs/intl-locale": "^3.3.0",
+    "@formatjs/intl-numberformat": "^8.5.0",
+    "@formatjs/intl-pluralrules": "^5.2.2",
     "@gorhom/portal": "^1.0.14",
     "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#c5f654fc9d0ad7cc5b89d50b34ecf8b0e3f4d050",
     "@onfido/react-native-sdk": "7.4.0",
@@ -109,7 +110,7 @@
     "react-native-key-command": "^1.0.0",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "^1.0.41",
+    "react-native-onyx": "1.0.41",
     "react-native-pdf": "^6.6.2",
     "react-native-performance": "^4.0.0",
     "react-native-permissions": "^3.0.1",

package.json

@@ -391,6 +391,7 @@ const CONST = {
         DROP_NATIVE_ID: 'report-dropzone',
         ACTIVE_DROP_NATIVE_ID: 'report-dropzone',
         MAXIMUM_PARTICIPANTS: 8,
+        SPLIT_REPORTID: '-2',
         ACTIONS: {
             LIMIT: 50,
             TYPE: {

src/CONST.js

@@ -6,6 +6,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
 import Text from './Text';
+import * as CurrencyUtils from '../libs/CurrencyUtils';
 
 const propTypes = {
     /** The user's wallet account */
@@ -31,10 +32,7 @@ const defaultProps = {
 };
 
 const CurrentWalletBalance = (props) => {
-    const formattedBalance = props.numberFormat(
-        props.userWallet.currentBalance / 100, // Divide by 100 because balance is in cents
-        {style: 'currency', currency: 'USD'},
-    );
+    const formattedBalance = CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance);
     return (
         <Text
             style={[styles.pv5, styles.alignSelfCenter, styles.textHeadline, styles.textXXXLarge, ...props.balanceStyles]}

src/components/CurrentWalletBalance.js

@@ -19,6 +19,7 @@ import * as IOUUtils from '../libs/IOUUtils';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import Navigation from '../libs/Navigation/Navigation';
 import optionPropTypes from './optionPropTypes';
+import * as CurrencyUtils from '../libs/CurrencyUtils';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -31,7 +32,7 @@ const propTypes = {
     hasMultipleParticipants: PropTypes.bool.isRequired,
 
     /** IOU amount */
-    iouAmount: PropTypes.string.isRequired,
+    iouAmount: PropTypes.number.isRequired,
 
     /** IOU type */
     iouType: PropTypes.string,
@@ -104,12 +105,10 @@ class MoneyRequestConfirmationList extends Component {
      */
     getSplitOrRequestOptions() {
         return [{
-            text: this.props.translate(this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', {
-                amount: this.props.numberFormat(
-                    this.props.iouAmount,
-                    {style: 'currency', currency: this.props.iou.selectedCurrencyCode},
-                ),
-            }),
+            text: this.props.translate(
+                this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request',
+                {amount: CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode)},
+            ),
             value: this.props.hasMultipleParticipants ? CONST.IOU.MONEY_REQUEST_TYPE.SPLIT : CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
         }];
     }
@@ -136,14 +135,10 @@ class MoneyRequestConfirmationList extends Component {
      * @returns {Array}
      */
     getParticipantsWithAmount(participants) {
-        const iouAmount = IOUUtils.calculateAmount(participants, this.props.iouAmount, this.props.iou.selectedCurrencyCode);
-
+        const iouAmount = IOUUtils.calculateAmount(participants, this.props.iouAmount);
         return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(
             participants,
-            this.props.numberFormat(iouAmount / 100, {
-                style: 'currency',
-                currency: this.props.iou.selectedCurrencyCode,
-            }),
+            CurrencyUtils.convertToDisplayString(iouAmount, this.props.iou.selectedCurrencyCode),
         );
     }
 
@@ -172,13 +167,10 @@ class MoneyRequestConfirmationList extends Component {
             const formattedUnselectedParticipants = this.getParticipantsWithoutAmount(unselectedParticipants);
             const formattedParticipants = _.union(formattedSelectedParticipants, formattedUnselectedParticipants);
 
-            const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants, this.props.iouAmount, this.props.iou.selectedCurrencyCode, true);
+            const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants, this.props.iouAmount, true);
             const formattedMyPersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(
                 this.props.currentUserPersonalDetails,
-                this.props.numberFormat(myIOUAmount / 100, {
-                    style: 'currency',
-                    currency: this.props.iou.selectedCurrencyCode,
-                }),
+                CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode),
             );
 
             sections.push({
@@ -270,18 +262,14 @@ class MoneyRequestConfirmationList extends Component {
         const shouldDisableButton = selectedParticipants.length === 0;
         const recipient = this.state.participants[0];
         const canModifyParticipants = this.props.canModifyParticipants && this.props.hasMultipleParticipants;
-        const formattedAmount = this.props.numberFormat(this.props.iouAmount, {
-            style: 'currency',
-            currency: this.props.iou.selectedCurrencyCode,
-        });
+        const formattedAmount = CurrencyUtils.convertToDisplayString(this.props.iouAmount, this.props.iou.selectedCurrencyCode);
 
         return (
             <OptionsSelector
                 sections={this.getSections()}
                 value=""
                 onSelectRow={canModifyParticipants ? this.toggleOption : undefined}
                 onConfirmSelection={this.confirm}
-                onChangeText={this.props.onUpdateComment}
                 selectedOptions={this.getSelectedOptions()}
                 canSelectMultipleOptions={canModifyParticipants}
                 disableArrowKeysActions={!canModifyParticipants}