Merge pull request #23979 from koko57/refactor/23149-money-request-page

Refactor/23149 money request page

src/libs/MoneyRequestUtils.js

@@ -0,0 +1,85 @@
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import CONST from '../CONST';
+
+/**
+ * Strip comma from the amount
+ *
+ * @param {String} amount
+ * @returns {String}
+ */
+function stripCommaFromAmount(amount) {
+    return amount.replace(/,/g, '');
+}
+
+/**
+ * Strip spaces from the amount
+ *
+ * @param {String} amount
+ * @returns {String}
+ */
+function stripSpacesFromAmount(amount) {
+    return amount.replace(/\s+/g, '');
+}
+
+/**
+ * Adds a leading zero to the amount if user entered just the decimal separator
+ *
+ * @param {String} amount - Changed amount from user input
+ * @returns {String}
+ */
+function addLeadingZero(amount) {
+    return amount === '.' ? '0.' : amount;
+}
+
+/**
+ * Calculate the length of the amount with leading zeroes
+ *
+ * @param {String} amount
+ * @returns {Number}
+ */
+function calculateAmountLength(amount) {
+    const leadingZeroes = amount.match(/^0+/);
+    const leadingZeroesLength = lodashGet(leadingZeroes, '[0].length', 0);
+    const absAmount = parseFloat((stripCommaFromAmount(amount) * 100).toFixed(2)).toString();
+
+    if (/\D/.test(absAmount)) {
+        return CONST.IOU.AMOUNT_MAX_LENGTH + 1;
+    }
+
+    return leadingZeroesLength + (absAmount === '0' ? 2 : absAmount.length);
+}
+
+/**
+ * Check if amount is a decimal up to 3 digits
+ *
+ * @param {String} amount
+ * @returns {Boolean}
+ */
+function validateAmount(amount) {
+    const decimalNumberRegex = new RegExp(/^\d+(,\d+)*(\.\d{0,2})?$/, 'i');
+    return amount === '' || (decimalNumberRegex.test(amount) && calculateAmountLength(amount) <= CONST.IOU.AMOUNT_MAX_LENGTH);
+}
+
+/**
+ * Replaces each character by calling `convertFn`. If `convertFn` throws an error, then
+ * the original character will be preserved.
+ *
+ * @param {String} text
+ * @param {Function} convertFn - `fromLocaleDigit` or `toLocaleDigit`
+ * @returns {String}
+ */
+function replaceAllDigits(text, convertFn) {
+    return _.chain([...text])
+        .map((char) => {
+            try {
+                return convertFn(char);
+            } catch {
+                return char;
+            }
+        })
+        .join('')
+        .value();
+}
+
+export {stripCommaFromAmount, stripSpacesFromAmount, addLeadingZero, validateAmount, replaceAllDigits};

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -43,7 +43,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const MoneyRequestEditAmountPage = require('../../../pages/iou/steps/MoneyRequestAmount').default;
+            const MoneyRequestEditAmountPage = require('../../../pages/iou/steps/NewRequestAmountPage').default;
             return MoneyRequestEditAmountPage;
         },
         name: 'Money_Request_Amount',

src/pages/iou/MoneyRequestSelectorPage.js

@@ -13,13 +13,13 @@ import useLocalize from '../../hooks/useLocalize';
 import * as IOUUtils from '../../libs/IOUUtils';
 import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
-import MoneyRequestAmount from './steps/MoneyRequestAmount';
 import ReceiptSelector from './ReceiptSelector';
 import * as IOU from '../../libs/actions/IOU';
 import DragAndDropProvider from '../../components/DragAndDrop/Provider';
 import usePermissions from '../../hooks/usePermissions';
 import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
 import participantPropTypes from '../../components/participantPropTypes';
+import NewRequestAmountPage from './steps/NewRequestAmountPage';
 
 const propTypes = {
     /** React Navigation route */
@@ -98,7 +98,7 @@ function MoneyRequestSelectorPage(props) {
                                 >
                                     <TopTab.Screen
                                         name={CONST.TAB.MANUAL}
-                                        component={MoneyRequestAmount}
+                                        component={NewRequestAmountPage}
                                         initialParams={{reportID, iouType}}
                                     />
                                     <TopTab.Screen
@@ -108,7 +108,7 @@ function MoneyRequestSelectorPage(props) {
                                     />
                                 </OnyxTabNavigator>
                             ) : (
-                                <MoneyRequestAmount route={props.route} />
+                                <NewRequestAmountPage route={props.route} />
                             )}
                         </View>
                     </DragAndDropProvider>