feat: refactor MoneyRequestConfirmationList

src/components/MoneyRequestConfirmationList.tsx

@@ -3,7 +3,6 @@ import {format} from 'date-fns';
 import Str from 'expensify-common/lib/str';
 import React, {useCallback, useEffect, useMemo, useReducer, useState} from 'react';
 import {View} from 'react-native';
-import type {StyleProp, ViewStyle} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -43,10 +42,12 @@ import ConfirmedRoute from './ConfirmedRoute';
 import ConfirmModal from './ConfirmModal';
 import FormHelpMessage from './FormHelpMessage';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import OptionsSelector from './OptionsSelector';
 import PDFThumbnail from './PDFThumbnail';
 import ReceiptEmptyState from './ReceiptEmptyState';
 import ReceiptImage from './ReceiptImage';
+import SelectionList from './SelectionList';
+import InviteMemberListItem from './SelectionList/InviteMemberListItem';
+import type {SectionListDataType} from './SelectionList/types';
 import SettlementButton from './SettlementButton';
 import ShowMoreButton from './ShowMoreButton';
 import Switch from './Switch';
@@ -142,9 +143,6 @@ type MoneyRequestConfirmationListProps = MoneyRequestConfirmationListOnyxProps &
  /** File name of the receipt */
  receiptFilename?: string;
 
- /** List styles for OptionsSelector */
- listStyles?: StyleProp<ViewStyle>;
-
  /** Transaction that represents the expense */
  transaction?: OnyxEntry<OnyxTypes.Transaction>;
 
@@ -173,6 +171,8 @@ type MoneyRequestConfirmationListProps = MoneyRequestConfirmationListOnyxProps &
  action?: IOUAction;
 };
 
+type MoneyRequestConfirmationListItem = (Participant | ReportUtils.OptionData) & {descriptiveText?: string};
+
 const getTaxAmount = (transaction: OnyxEntry<OnyxTypes.Transaction>, defaultTaxValue: string) => {
  const percentage = (transaction?.taxRate ? transaction?.taxRate?.data?.value : defaultTaxValue) ?? '';
  return TransactionUtils.calculateTaxAmount(percentage, transaction?.amount ?? 0);
@@ -209,7 +209,6 @@ function MoneyRequestConfirmationList({
  receiptPath = '',
  iouComment,
  receiptFilename = '',
- listStyles,
  iouCreated,
  iouIsBillable = false,
  onToggleBillable,
@@ -307,9 +306,10 @@ function MoneyRequestConfirmationList({
 
  const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
 
- const navigateBack = () => {
- Navigation.goBack(ROUTES.MONEY_REQUEST_CREATE_TAB_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID));
- };
+ const navigateBack = useCallback(
+ () => Navigation.goBack(ROUTES.MONEY_REQUEST_CREATE_TAB_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID)),
+ [iouType, reportID, transactionID],
+ );
 
  const shouldDisplayFieldError: boolean = useMemo(() => {
  if (!isEditingSplitBill) {
@@ -414,30 +414,49 @@ function MoneyRequestConfirmationList({
  }, [isTypeTrackExpense, isTypeSplit, iouAmount, receiptPath, isTypeRequest, isDistanceRequestWithPendingRoute, iouType, translate, formattedAmount]);
 
  const selectedParticipants = useMemo(() => selectedParticipantsProp.filter((participant) => participant.selected), [selectedParticipantsProp]);
- const payeePersonalDetails = useMemo(() => payeePersonalDetailsProp ?? currentUserPersonalDetails, [payeePersonalDetailsProp, currentUserPersonalDetails]);
+ const payeePersonalDetails = payeePersonalDetailsProp ?? currentUserPersonalDetails;
  const canModifyParticipants = !isReadOnly && canModifyParticipantsProp && hasMultipleParticipants;
  const shouldDisablePaidBySection = canModifyParticipants;
- const optionSelectorSections = useMemo(() => {
- const sections = [];
+
+ const sections = useMemo(() => {
+ const options: Array<SectionListDataType<MoneyRequestConfirmationListItem>> = [];
  const unselectedParticipants = selectedParticipantsProp.filter((participant) => !participant.selected);
  if (hasMultipleParticipants) {
  const formattedSelectedParticipants = getParticipantsWithAmount(selectedParticipants);
- let formattedParticipantsList = [...new Set([...formattedSelectedParticipants, ...unselectedParticipants])];
+ const getRightElement = (text: string) => (
+ <View style={[styles.flexWrap, styles.pl2]}>
+ <Text style={[styles.textLabel]}>{text}</Text>
+ </View>
+ );
+
+ let formattedParticipantsList: MoneyRequestConfirmationListItem[] = [...new Set([...formattedSelectedParticipants, ...unselectedParticipants])];
 
  if (!canModifyParticipants) {
  formattedParticipantsList = formattedParticipantsList.map((participant) => ({
  ...participant,
+ isSelected: false,
  isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID ?? -1),
+ rightElement: getRightElement(participant?.descriptiveText ?? ''),
+ }));
+ } else {
+ formattedParticipantsList = formattedParticipantsList.map((participant) => ({
+ ...participant,
+ rightElement: getRightElement(participant?.descriptiveText ?? ''),
  }));
  }
 
  const myIOUAmount = IOUUtils.calculateAmount(selectedParticipants.length, iouAmount, iouCurrencyCode ?? '', true);
- const formattedPayeeOption = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(
+ const iouPayeeDetails = OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(
  payeePersonalDetails,
  iouAmount > 0 ? CurrencyUtils.convertToDisplayString(myIOUAmount, iouCurrencyCode) : '',
  );
+ const formattedPayeeOption = {
+ ...iouPayeeDetails,
+ isSelected: !!canModifyParticipants,
+ rightElement: getRightElement(iouPayeeDetails.descriptiveText),
+ };
 
- sections.push(
+ options.push(
  {
  title: translate('moneyRequestConfirmationList.paidBy'),
  data: [formattedPayeeOption],
@@ -453,35 +472,33 @@ function MoneyRequestConfirmationList({
  } else {
  const formattedSelectedParticipants = selectedParticipants.map((participant) => ({
  ...participant,
+ isSelected: false,
  isDisabled: !participant.isPolicyExpenseChat && !participant.isSelfDM && ReportUtils.isOptimisticPersonalDetail(participant.accountID ?? -1),
  }));
- sections.push({
+
+ options.push({
  title: translate('common.to'),
  data: formattedSelectedParticipants,
  shouldShow: true,
  });
  }
- return sections;
+ return options;
  }, [
- selectedParticipants,
  selectedParticipantsProp,
  hasMultipleParticipants,
+ getParticipantsWithAmount,
+ selectedParticipants,
+ canModifyParticipants,
  iouAmount,
  iouCurrencyCode,
- getParticipantsWithAmount,
  payeePersonalDetails,
  translate,
  shouldDisablePaidBySection,
- canModifyParticipants,
+ styles.flexWrap,
+ styles.pl2,
+ styles.textLabel,
  ]);
 
- const selectedOptions = useMemo(() => {
- if (!hasMultipleParticipants) {
- return [];
- }
- return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromPayeePersonalDetail(payeePersonalDetails)];
- }, [selectedParticipants, hasMultipleParticipants, payeePersonalDetails]);
-
  useEffect(() => {
  if (!isDistanceRequest || isMovingTransactionFromTrackExpense) {
  return;
@@ -554,7 +571,7 @@ function MoneyRequestConfirmationList({
  /**
  * Navigate to report details or profile of selected user
  */
- const navigateToReportOrUserDetail = (option: ReportUtils.OptionData) => {
+ const navigateToReportOrUserDetail = (option: MoneyRequestConfirmationListItem) => {
  const activeRoute = Navigation.getActiveRouteWithoutParams();
 
  if (option.isSelfDM) {
@@ -958,7 +975,7 @@ function MoneyRequestConfirmationList({
  // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
  previewSourceURL={resolvedReceiptImage as string}
  style={styles.moneyRequestImage}
- // We don't support scaning password protected PDF receipt
+ // We don't support scanning password protected PDF receipt
  enabled={!isAttachmentInvalid}
  onPassword={() => setIsAttachmentInvalid(true)}
  />
@@ -978,65 +995,81 @@ function MoneyRequestConfirmationList({
  [isLocalFile, receiptFilename, resolvedThumbnail, styles.moneyRequestImage, isAttachmentInvalid, isThumbnail, resolvedReceiptImage, receiptThumbnail, fileExtension],
  );
 
+ const listFooterContent = useMemo(
+ () => (
+ <>
+ {isDistanceRequest && (
+ <View style={styles.confirmationListMapItem}>
+ <ConfirmedRoute transaction={transaction ?? ({} as OnyxTypes.Transaction)} />
+ </View>
+ )}
+ {!isDistanceRequest &&
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+ (receiptImage || receiptThumbnail
+ ? receiptThumbnailContent
+ : // The empty receipt component should only show for IOU Requests of a paid policy ("Team" or "Corporate")
+ PolicyUtils.isPaidGroupPolicy(policy) &&
+ !isDistanceRequest &&
+ iouType === CONST.IOU.TYPE.SUBMIT && (
+ <ReceiptEmptyState
+ onPress={() =>
+ Navigation.navigate(
+ ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
+ )
+ }
+ />
+ ))}
+ {primaryFields}
+ {!shouldShowAllFields && (
+ <ShowMoreButton
+ containerStyle={[styles.mt1, styles.mb2]}
+ onPress={toggleShouldExpandFields}
+ />
+ )}
+ <View style={[styles.mb5]}>{shouldShowAllFields && supplementaryFields}</View>
+ <ConfirmModal
+ title={translate('attachmentPicker.wrongFileType')}
+ onConfirm={navigateBack}
+ onCancel={navigateBack}
+ isVisible={isAttachmentInvalid}
+ prompt={translate('attachmentPicker.protectedPDFNotSupported')}
+ confirmText={translate('common.close')}
+ shouldShowCancelButton={false}
+ />
+ </>
+ ),
+ [
+ iouType,
+ isAttachmentInvalid,
+ isDistanceRequest,
+ navigateBack,
+ policy,
+ primaryFields,
+ receiptImage,
+ receiptThumbnail,
+ receiptThumbnailContent,
+ reportID,
+ shouldShowAllFields,
+ styles.confirmationListMapItem,
+ styles.mb2,
+ styles.mb5,
+ styles.mt1,
+ supplementaryFields,
+ transaction,
+ transactionID,
+ translate,
+ ],
+ );
+
  return (
- // @ts-expect-error This component is deprecated and will not be migrated to TypeScript (context: https://expensify.slack.com/archives/C01GTK53T8Q/p1709232289899589?thread_ts=1709156803.359359&cid=C01GTK53T8Q)
- <OptionsSelector
- sections={optionSelectorSections}
+ <SelectionList<MoneyRequestConfirmationListItem>
+  sections={sections}
+ ListItem={InviteMemberListItem}
  onSelectRow={canModifyParticipants ? selectParticipant : navigateToReportOrUserDetail}
- onAddToSelection={selectParticipant}
- onConfirmSelection={confirm}
- selectedOptions={selectedOptions}
- canSelectMultipleOptions={canModifyParticipants}
- disableArrowKeysActions={!canModifyParticipants}
- boldStyle
- showTitleTooltip
- shouldTextInputAppearBelowOptions
- shouldShowTextInput={false}
- shouldUseStyleForChildren={false}
- optionHoveredStyle={canModifyParticipants ? styles.hoveredComponentBG : {}}
+ canSelectMultiple={canModifyParticipants}
  footerContent={footerContent}
- listStyles={listStyles}
- shouldAllowScrollingChildren
- >
- {isDistanceRequest && (
- <View style={styles.confirmationListMapItem}>
- <ConfirmedRoute transaction={transaction ?? ({} as OnyxTypes.Transaction)} />
- </View>
- )}
- {!isDistanceRequest &&
- // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
- (receiptImage || receiptThumbnail
- ? receiptThumbnailContent
- : // The empty receipt component should only show for IOU Requests of a paid policy ("Team" or "Corporate")
- PolicyUtils.isPaidGroupPolicy(policy) &&
- !isDistanceRequest &&
- iouType === CONST.IOU.TYPE.SUBMIT && (
- <ReceiptEmptyState
- onPress={() =>
- Navigation.navigate(
- ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
- )
- }
- />
- ))}
- {primaryFields}
- {!shouldShowAllFields && (
- <ShowMoreButton
- containerStyle={[styles.mt1, styles.mb2]}
- onPress={toggleShouldExpandFields}
- />
- )}
- {shouldShowAllFields && supplementaryFields}
- <ConfirmModal
- title={translate('attachmentPicker.wrongFileType')}
- onConfirm={navigateBack}
- onCancel={navigateBack}
- isVisible={isAttachmentInvalid}
- prompt={translate('attachmentPicker.protectedPDFNotSupported')}
- confirmText={translate('common.close')}
- shouldShowCancelButton={false}
- />
- </OptionsSelector>
+ listFooterContent={listFooterContent}
+ />
  );
 }