From 8286a9b772c9b0fd953502cf7a019ba56a9714b1 Mon Sep 17 00:00:00 2001
From: 0xmiroslav <miki.stevanovic.u@gmail.com>
Date: Wed, 10 May 2023 14:49:17 +0200
Subject: [PATCH] show individual split amount on Bill Split IOU Previews

---
 .../MoneyRequestConfirmationList.js           |  4 ++--
 src/components/ReportActionItem/IOUPreview.js | 21 ++++++++++++++-----
 src/languages/en.js                           |  1 +
 src/languages/es.js                           |  1 +
 src/libs/IOUUtils.js                          |  6 +++---
 src/libs/actions/IOU.js                       |  4 ++--
 tests/unit/IOUUtilsTest.js                    | 12 +++++------
 7 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index b122ab19f70e..586d98934291 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -139,7 +139,7 @@ class MoneyRequestConfirmationList extends Component {
      * @returns {Array}
      */
     getParticipantsWithAmount(participants) {
-        const iouAmount = IOUUtils.calculateAmount(participants, this.props.iouAmount);
+        const iouAmount = IOUUtils.calculateAmount(participants.length, this.props.iouAmount);
         return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(participants, CurrencyUtils.convertToDisplayString(iouAmount, this.props.iou.selectedCurrencyCode));
     }
 
@@ -168,7 +168,7 @@ class MoneyRequestConfirmationList extends Component {
             const formattedUnselectedParticipants = this.getParticipantsWithoutAmount(unselectedParticipants);
             const formattedParticipants = _.union(formattedSelectedParticipants, formattedUnselectedParticipants);
 
-            const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants, this.props.iouAmount, true);
+            const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, this.props.iouAmount, true);
             const formattedMyPersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(
                 this.props.currentUserPersonalDetails,
                 CurrencyUtils.convertToDisplayString(myIOUAmount, this.props.iou.selectedCurrencyCode),
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index 202689085d97..407716b93995 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -26,6 +26,7 @@ import {showContextMenuForReport} from '../ShowContextMenuContext';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import Button from '../Button';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
+import * as IOUUtils from '../../libs/IOUUtils';
 
 const propTypes = {
     /** Additional logic for displaying the pay button */
@@ -199,11 +200,21 @@ const IOUPreview = (props) => {
                         </View>
                     </View>
 
-                    {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                        <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
-                    )}
-
-                    <Text>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>
+                    <View style={[styles.flexRow]}>
+                        <View style={[styles.flex1]}>
+                            {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
+                                <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                            )}
+                            <Text>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>
+                        </View>
+                        {props.isBillSplit && !_.isEmpty(participantEmails) && (
+                            <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
+                                {props.translate('iou.amountEach', {
+                                    amount: CurrencyUtils.convertToDisplayString(IOUUtils.calculateAmount(participantEmails.length - 1, requestAmount), requestCurrency),
+                                })}
+                            </Text>
+                        )}
+                    </View>
 
                     {isCurrentUserManager && !props.shouldHidePayButton && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
                         <Button
diff --git a/src/languages/en.js b/src/languages/en.js
index c28c1c104f37..1ee9cd7f0bef 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -322,6 +322,7 @@ export default {
         settlePaypalMe: 'Pay with PayPal.me',
         requestAmount: ({amount}) => `request ${amount}`,
         splitAmount: ({amount}) => `split ${amount}`,
+        amountEach: ({amount}) => `${amount} each`,
         noReimbursableExpenses: 'This report has an invalid amount',
         pendingConversionMessage: "Total will update when you're back online",
         error: {
diff --git a/src/languages/es.js b/src/languages/es.js
index a060fc1684ae..5037e4563864 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -321,6 +321,7 @@ export default {
         settlePaypalMe: 'Pagar con PayPal.me',
         requestAmount: ({amount}) => `solicitar ${amount}`,
         splitAmount: ({amount}) => `dividir ${amount}`,
+        amountEach: ({amount}) => `${amount} cada uno`,
         noReimbursableExpenses: 'El monto de este informe es inválido',
         pendingConversionMessage: 'El total se actualizará cuando estés online',
         error: {
diff --git a/src/libs/IOUUtils.js b/src/libs/IOUUtils.js
index 57ff6af0a0de..f5ebefbad50c 100644
--- a/src/libs/IOUUtils.js
+++ b/src/libs/IOUUtils.js
@@ -4,13 +4,13 @@ import CONST from '../CONST';
 /**
  * Calculates the amount per user given a list of participants
  *
- * @param {Array} participants - List of logins for the participants in the chat. It should not include the current user's login.
+ * @param {Number} numberOfParticipants - Number of participants in the chat. It should not include the current user.
  * @param {Number} total - IOU total amount in the smallest units of the currency
  * @param {Boolean} isDefaultUser - Whether we are calculating the amount for the current user
  * @returns {Number}
  */
-function calculateAmount(participants, total, isDefaultUser = false) {
-    const totalParticipants = participants.length + 1;
+function calculateAmount(numberOfParticipants, total, isDefaultUser = false) {
+    const totalParticipants = numberOfParticipants + 1;
     const amountPerPerson = Math.round(total / totalParticipants);
     let finalAmount = amountPerPerson;
     if (isDefaultUser) {
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 6106b2598500..3240aa4622de 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -384,8 +384,8 @@ function createSplitsAndOnyxData(participants, currentUserLogin, amount, comment
     }
 
     // Loop through participants creating individual chats, iouReports and reportActionIDs as needed
-    const splitAmount = IOUUtils.calculateAmount(participants, amount, false);
-    const splits = [{email: currentUserEmail, amount: IOUUtils.calculateAmount(participants, amount, true)}];
+    const splitAmount = IOUUtils.calculateAmount(participants.length, amount, false);
+    const splits = [{email: currentUserEmail, amount: IOUUtils.calculateAmount(participants.length, amount, true)}];
 
     const hasMultipleParticipants = participants.length > 1;
     _.each(participants, (participant) => {
diff --git a/tests/unit/IOUUtilsTest.js b/tests/unit/IOUUtilsTest.js
index e8164bc0486b..2f6901ca47a2 100644
--- a/tests/unit/IOUUtilsTest.js
+++ b/tests/unit/IOUUtilsTest.js
@@ -137,20 +137,20 @@ describe('IOUUtils', () => {
 
         test('103 JPY split among 3 participants including the default user should be [35, 34, 34]', () => {
             const participants = ['tonystark@expensify.com', 'reedrichards@expensify.com'];
-            expect(IOUUtils.calculateAmount(participants, 103, true)).toBe(35);
-            expect(IOUUtils.calculateAmount(participants, 103)).toBe(34);
+            expect(IOUUtils.calculateAmount(participants.length, 103, true)).toBe(35);
+            expect(IOUUtils.calculateAmount(participants.length, 103)).toBe(34);
         });
 
         test('10 AFN split among 4 participants including the default user should be [1, 3, 3, 3]', () => {
             const participants = ['tonystark@expensify.com', 'reedrichards@expensify.com', 'suestorm@expensify.com'];
-            expect(IOUUtils.calculateAmount(participants, 10, true)).toBe(1);
-            expect(IOUUtils.calculateAmount(participants, 10)).toBe(3);
+            expect(IOUUtils.calculateAmount(participants.length, 10, true)).toBe(1);
+            expect(IOUUtils.calculateAmount(participants.length, 10)).toBe(3);
         });
 
         test('0.02 USD split among 4 participants including the default user should be [-1, 1, 1, 1]', () => {
             const participants = ['tonystark@expensify.com', 'reedrichards@expensify.com', 'suestorm@expensify.com'];
-            expect(IOUUtils.calculateAmount(participants, 2, true)).toBe(-1);
-            expect(IOUUtils.calculateAmount(participants, 2)).toBe(1);
+            expect(IOUUtils.calculateAmount(participants.length, 2, true)).toBe(-1);
+            expect(IOUUtils.calculateAmount(participants.length, 2)).toBe(1);
         });
     });
 });