Deselect attendees when splitting bill

src/components/IOUConfirmationList.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {ScrollView, TextInput} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
+import _ from 'underscore';
 import styles from '../styles/styles';
 import Text from './Text';
 import themeColors from '../styles/themes/default';
@@ -101,41 +102,97 @@ const defaultProps = {
 const MINIMUM_BOTTOM_OFFSET = 240;
 
 class IOUConfirmationList extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggleOption = this.toggleOption.bind(this);
+
+        const formattedParticipants = _.map(this.getParticipantsWithAmount(this.props.participants), participant => ({
+            ...participant, selected: true,
+        }));
+
+        this.state = {
+            participants: formattedParticipants,
+        };
+    }
+
+    /**
+     * Get selected participants
+     * @returns {Array}
+     */
+    getSelectedParticipants() {
+        return _.filter(this.state.participants, participant => participant.selected);
+    }
+
+    /**
+     * Get unselected participants
+     * @returns {Array}
+     */
+    getUnselectedParticipants() {
+        return _.filter(this.state.participants, participant => !participant.selected);
+    }
+
+    /**
+     * Returns the participants with amount
+     * @param {Array} participants
+     * @returns {Array}
+     */
+    getParticipantsWithAmount(participants) {
+        return getIOUConfirmationOptionsFromParticipants(
+            participants,
+            this.props.numberFormat(this.calculateAmount(participants) / 100, {
+                style: 'currency',
+                currency: this.props.selectedCurrency.currencyCode,
+            }),
+        );
+    }
+
+    /**
+     * Returns the participants without amount
+     * @param {Array} participants
+     * @returns {Array}
+     */
+    getParticipantsWithoutAmount(participants) {
+        return _.map(participants, option => _.omit(option, 'descriptiveText'));
+    }
+
     /**
      * Returns the sections needed for the OptionsSelector
-     *
      * @param {Boolean} maxParticipantsReached
      * @returns {Array}
      */
     getSections() {
         const sections = [];
-
         if (this.props.hasMultipleParticipants) {
+            const selectedParticipants = this.getSelectedParticipants();
+            const unselectedParticipants = this.getUnselectedParticipants();
+
+            const formattedSelectedParticipants = this.getParticipantsWithAmount(selectedParticipants);
+            const formattedUnselectedParticipants = this.getParticipantsWithoutAmount(unselectedParticipants);
+
             const formattedMyPersonalDetails = getIOUConfirmationOptionsFromMyPersonalDetail(
                 this.props.myPersonalDetails,
-                this.props.numberFormat(this.calculateAmount() / 100, {
+                this.props.numberFormat(this.calculateAmount(selectedParticipants, true) / 100, {
                     style: 'currency',
                     currency: this.props.selectedCurrency.currencyCode,
                 }),
             );
 
-            const formattedParticipants = getIOUConfirmationOptionsFromParticipants(this.props.participants,
-                this.props.numberFormat(this.calculateAmount() / 100, {
-                    style: 'currency',
-                    currency: this.props.selectedCurrency.currencyCode,
-                }));
-
             sections.push({
                 title: this.props.translate('iOUConfirmationList.whoPaid'),
                 data: [formattedMyPersonalDetails],
                 shouldShow: true,
                 indexOffset: 0,
-            });
-            sections.push({
+            }, {
                 title: this.props.translate('iOUConfirmationList.whoWasThere'),
-                data: formattedParticipants,
+                data: formattedSelectedParticipants,
                 shouldShow: true,
                 indexOffset: 0,
+            }, {
+                title: undefined,
+                data: formattedUnselectedParticipants,
+                shouldShow: !_.isEmpty(formattedUnselectedParticipants),
+                indexOffset: 0,
             });
         } else {
             const formattedParticipants = getIOUConfirmationOptionsFromParticipants(this.props.participants,
@@ -156,7 +213,6 @@ class IOUConfirmationList extends Component {
 
     /**
      * Gets splits for the transaction
-     *
      * @returns {Array|null}
      */
     getSplits() {
@@ -165,63 +221,54 @@ class IOUConfirmationList extends Component {
         if (!this.props.hasMultipleParticipants) {
             return null;
         }
-
-        const splits = this.props.participants.map(participant => ({
+        const selectedParticipants = this.getSelectedParticipants();
+        const splits = _.map(selectedParticipants, participant => ({
             email: participant.login,
 
             // We should send in cents to API
             // Cents is temporary and there must be support for other currencies in the future
-            amount: this.calculateAmount(),
+            amount: this.calculateAmount(selectedParticipants),
         }));
 
         splits.push({
             email: this.props.myPersonalDetails.login,
 
             // The user is default and we should send in cents to API
             // USD is temporary and there must be support for other currencies in the future
-            amount: this.calculateAmount(true),
+            amount: this.calculateAmount(selectedParticipants, true),
         });
         return splits;
     }
 
     /**
-     * Gets participants list for a report
-     *
+     * Returns selected options -- there is checkmark for every row in List for split flow
      * @returns {Array}
      */
-    getParticipants() {
-        const participants = this.props.participants.map(participant => participant.login);
-        participants.push(this.props.myPersonalDetails.login);
-        return participants;
-    }
-
-    /**
-     * Returns selected options with all participant logins -- there is checkmark for every row in List for split flow
-     * @returns {Array}
-     */
-    getAllOptionsAsSelected() {
+    getSelectedOptions() {
         if (!this.props.hasMultipleParticipants) {
             return [];
         }
+        const selectedParticipants = this.getSelectedParticipants();
         return [
-            ...this.props.participants,
+            ...selectedParticipants,
             getIOUConfirmationOptionsFromMyPersonalDetail(this.props.myPersonalDetails),
         ];
     }
 
     /**
-     * Calculates the amount per user
+     * Calculates the amount per user given a list of participants
+     * @param {Array} participants
      * @param {Boolean} isDefaultUser
      * @returns {Number}
      */
-    calculateAmount(isDefaultUser = false) {
+    calculateAmount(participants, isDefaultUser = false) {
         // Convert to cents before working with iouAmount to avoid
         // javascript subtraction with decimal problem -- when dealing with decimals,
         // because they are encoded as IEEE 754 floating point numbers, some of the decimal
         // numbers cannot be represented with perfect accuracy.
         // Cents is temporary and there must be support for other currencies in the future
         const iouAmount = Math.round(parseFloat(this.props.iouAmount * 100));
-        const totalParticipants = this.props.participants.length + 1;
+        const totalParticipants = participants.length + 1;
         const amountPerPerson = Math.round(iouAmount / totalParticipants);
 
         if (!isDefaultUser) { return amountPerPerson; }
@@ -232,6 +279,32 @@ class IOUConfirmationList extends Component {
         return iouAmount !== sumAmount ? (amountPerPerson + difference) : amountPerPerson;
     }
 
+    /**
+    * Toggle selected option's selected prop.
+    * @param {Object} option
+    */
+    toggleOption(option) {
+        const isSelf = _.every(this.state.participants, selectedOption => (
+            selectedOption.login !== option.login
+        ));
+
+        if (isSelf) {
+            return;
+        }
+
+        this.setState((prevState) => {
+            const newParticipants = _.reject(prevState.participants, participant => (
+                participant.login === option.login
+            ));
+
+            newParticipants.push({
+                ...option,
+                selected: !option.selected,
+            });
+            return {participants: newParticipants};
+        });
+    }
+
     render() {
         const buttonText = this.props.translate(
             this.props.hasMultipleParticipants ? 'iou.split' : 'iou.request', {
@@ -241,6 +314,9 @@ class IOUConfirmationList extends Component {
                 ),
             },
         );
+        const hoverStyle = this.props.hasMultipleParticipants ? styles.hoveredComponentBG : {};
+        const toggleOption = this.props.hasMultipleParticipants ? this.toggleOption : undefined;
+        const selectedParticipants = this.getSelectedParticipants();
         return (
             <>
                 <ScrollView style={[styles.flex1, styles.w100]}>
@@ -253,12 +329,14 @@ class IOUConfirmationList extends Component {
                         }]}
                         sections={this.getSections()}
                         disableArrowKeysActions
-                        disableRowInteractivity
+                        disableFocusOptions
                         hideAdditionalOptionStates
                         forceTextUnreadStyle
                         canSelectMultipleOptions={this.props.hasMultipleParticipants}
-                        disableFocusOptions
-                        selectedOptions={this.getAllOptionsAsSelected()}
+                        selectedOptions={this.getSelectedOptions()}
+                        onSelectRow={toggleOption}
+                        disableRowInteractivity={!this.props.hasMultipleParticipants}
+                        optionHoveredStyle={hoverStyle}
                     />
                     <Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
                         {this.props.translate('iOUConfirmationList.whatsItFor')}
@@ -278,6 +356,7 @@ class IOUConfirmationList extends Component {
                         success
                         style={[styles.w100]}
                         isLoading={this.props.iou.loading}
+                        isDisabled={selectedParticipants.length === 0}
                         text={buttonText}
                         onPress={() => this.props.onConfirm(this.getSplits())}
                     />

src/libs/OptionsListUtils.js

@@ -555,6 +555,7 @@ function getNewGroupOptions(
 
 /**
  * Build the options for the Sidebar a.k.a. LHN
+ *
  * @param {Object} reports
  * @param {Object} personalDetails
  * @param {Object} draftComments

src/libs/actions/IOU.js

@@ -113,6 +113,26 @@ function createIOUSplit(params) {
         });
 }
 
+/**
+ * Creates IOUSplit Transaction for Group DM
+ * @param {Object} params
+ * @param {Array} params.splits
+ * @param {String} params.comment
+ * @param {Number} params.amount
+ * @param {String} params.currency
+ * @param {String} params.reportID
+ */
+function createIOUSplitGroup(params) {
+    Onyx.merge(ONYXKEYS.IOU, {loading: true, creatingIOUTransaction: true, error: false});
+
+    API.CreateIOUSplit({
+        ...params,
+        splits: JSON.stringify(params.splits),
+    })
+        .then(() => Onyx.merge(ONYXKEYS.IOU, {loading: false, creatingIOUTransaction: false}))
+        .catch(() => Onyx.merge(ONYXKEYS.IOU, {error: true}));
+}
+
 /**
  * Reject an iouReport transaction. Declining and cancelling transactions are done via the same Auth command.
  *
@@ -244,6 +264,7 @@ function payIOUReport({
 export {
     createIOUTransaction,
     createIOUSplit,
+    createIOUSplitGroup,
     rejectTransaction,
     payIOUReport,
 };

src/pages/iou/IOUModal.js

@@ -10,7 +10,7 @@ import Header from '../../components/Header';
 import styles from '../../styles/styles';
 import Icon from '../../components/Icon';
 import * as PersonalDetails from '../../libs/actions/PersonalDetails';
-import {createIOUSplit, createIOUTransaction} from '../../libs/actions/IOU';
+import {createIOUSplit, createIOUTransaction, createIOUSplitGroup} from '../../libs/actions/IOU';
 import {Close, BackArrow} from '../../components/Icon/Expensicons';
 import Navigation from '../../libs/Navigation/Navigation';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -254,6 +254,22 @@ class IOUModal extends Component {
      * @param {Array} [splits]
      */
     createTransaction(splits) {
+        const reportID = this.props.route.params.reportID;
+
+        // Only splits from a group DM has a reportID
+        // Check if reportID is a number
+        if (splits && CONST.REGEX.NUMBER.test(reportID)) {
+            createIOUSplitGroup({
+                comment: this.state.comment,
+
+                // should send in cents to API
+                amount: Math.round(this.state.amount * 100),
+                currency: this.state.selectedCurrency.currencyCode,
+                splits,
+                reportID,
+            });
+            return;
+        }
         if (splits) {
             createIOUSplit({
                 comment: this.state.comment,