App: [$500] [CRITICAL] Delegated Splits - Allow selecting a payer from the splits page

Implement this section of the Uneven Split Design Doc (the section is copied below if you can’t access the document)

Context

Currently when creating a split, the current user is automatically set as the payer of the split and the person that needs to be paid back by the other participants.

Problem

We currently don’t allow selecting a different payer of the split. There are real world use cases where we’d want to create a split on behalf of someone else. e.g.

You are heavily entrenched in the NewDot ecosystem and would like to utilize split with your social group. However, they are resistant to trying a new app. With Group Chat and delegated splits, you are able to create splits on their behalf. You are able to continue leveraging NewDot, your social circle can enjoy the benefits of NewDot in a hands-off environment, and Expensify reaps the benefits of a highly viral, member-driven strategy for gaining new customers.

Solution

Enhance the split page by allowing the selection of a different payer by creating a payer selector page, which should display all of the splits participants and allow selecting one of them.

Implementation details

1. We’ll begin by adding a MenuItem in the MoneyTemporaryForRefactorRequestConfirmationList that will allow us to navigate to the new page:

<MenuItem
    label={translate('moneyRequestConfirmationList.paidBy')}
    description={personalDetailsOfPayer.login}
    title={personalDetailsOfPayee.displayName}
    icon={personalDetailsOfPayee.icons}
    onPress={() => }}
    shouldShowRightIcon
    titleWithTooltips={payeeTooltipDetails}
/>

Note: in the current code it’s called a payee instead of payer. That’s because the code is meant for all types of IOUs, we can keep it as payee, but in the context of splits the payee is the same as the payer (as they paid for the split bill).

The icon prop passed to the menu item is what allows us to display their avatar, so we should make use of ReportUtils.getIcons to retrieve them for the selected payer accountID by passing their personalDetails to it, which is already available in the confirmation page component.

1. Create a new IOU request step page, called IOURequestStepSplitPayer This will work very similar to how we select a task assignee (we can copy most of the code from that page and adjust it), the navigation to this page will be triggered from the onPress handler in the MenuItem above.

2. The navigation config of this new page should be consistent with other steps like amount, merchant, etc. It should have this route: create/split/confirmation/<transactionID>/<reportActionID>/payer

3. The page will subscribe to the TRANSACTION_DRAFT Onyx key which will allow it to retrieve the split participants which we can then display similar to how we display a report’s participants, except we’ll also allow selecting one user from the list. The selected payer should have a green check mark next to it.

4. Once a user is selected, it will call a new IOU action which will set the payer accountID in the transaction draft and then navigate the user back to the split page:

function setSplitPayer(transactionID: string, payerAccountID: number) {
    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, {splitPayerAccountIDs: [payerAccountID]});
}

Note: we’re planning to support multiple payers in the future. For now the splitPayerAccountIDs should hold a single accountID.

1. Finally, we need to send the array of splitPayerAccoutIDs to the backend here which should be present in the Onyx transaction. Passed to splitBill from here.