Merge branch 'refs/heads/main' into war-in/options-selector-removal

# Conflicts: # src/components/MoneyRequestConfirmationList.tsx
Expensify · danieldoglas · May 15, 2024 · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
commit de9138d691ae654b938482ae7cec0cb8a51d5d75
@@ -4,7 +4,6 @@ import Str from 'expensify-common/lib/str';
 import React, {useCallback, useEffect, useMemo, useReducer, useState} from 'react';
 import type {TextStyle} from 'react-native';
 import {View} from 'react-native';
-import type {TextStyle} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -50,13 +49,12 @@ import FormHelpMessage from './FormHelpMessage';
 import MenuItem from './MenuItem';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import MoneyRequestAmountInput from './MoneyRequestAmountInput';
-import type {MoneyRequestAmountInputProps} from './MoneyRequestAmountInput';
 import PDFThumbnail from './PDFThumbnail';
 import {PressableWithFeedback} from './Pressable';
 import ReceiptEmptyState from './ReceiptEmptyState';
 import ReceiptImage from './ReceiptImage';
 import SelectionList from './SelectionList';
-import type {ListItem, SectionListDataType, SectionWithIndexOffset} from './SelectionList/types';
+import type {SectionListDataType} from './SelectionList/types';
 import UserListItem from './SelectionList/UserListItem';
 import SettlementButton from './SettlementButton';
 import ShowMoreButton from './ShowMoreButton';
@@ -178,12 +176,7 @@ type MoneyRequestConfirmationListProps = MoneyRequestConfirmationListOnyxProps &
     action?: IOUAction;
 };
 
-type IouListItem = {
-    descriptiveText?: string;
-    shouldShowAmountInput?: boolean;
-    amountInputProps?: MoneyRequestAmountInputProps;
-    tabIndex?: number;
-} & ListItem;
+type MoneyRequestConfirmationListItem = Participant | ReportUtils.OptionData;
 
 const getTaxAmount = (transaction: OnyxEntry<OnyxTypes.Transaction>, policy: OnyxEntry<OnyxTypes.Policy>) => {
     const defaultTaxCode = TransactionUtils.getDefaultTaxCode(policy, transaction) ?? '';
@@ -466,7 +459,7 @@ function MoneyRequestConfirmationList({
     const payeePersonalDetails = useMemo(() => payeePersonalDetailsProp ?? currentUserPersonalDetails, [payeePersonalDetailsProp, currentUserPersonalDetails]);
     const shouldShowReadOnlySplits = useMemo(() => isPolicyExpenseChat || isReadOnly || isScanRequest, [isPolicyExpenseChat, isReadOnly, isScanRequest]);
 
-    const splitParticipants: IouListItem[] | undefined = useMemo(() => {
+    const splitParticipants = useMemo(() => {
         if (!isTypeSplit) {
             return [];
         }
@@ -501,16 +494,26 @@ function MoneyRequestConfirmationList({
         return [payeeOption, ...selectedParticipants].map((participantOption: Participant) => ({
             ...participantOption,
             tabIndex: -1,
-            shouldShowAmountInput: true,
-            amountInputProps: {
-                amount: transaction?.splitShares?.[participantOption.accountID ?? 0]?.amount,
-                currency: iouCurrencyCode,
-                prefixCharacter: currencySymbol,
-                containerStyle: [amountWidth],
-                inputStyle: [amountWidth as TextStyle],
-                maxLength: formattedTotalAmount.length,
-                onAmountChange: (value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value)),
-            },
+            isSelected: false,
+            rightElement: (
+                <MoneyRequestAmountInput
+                    amount={transaction?.splitShares?.[participantOption.accountID ?? 0]?.amount}
+                    currency={iouCurrencyCode}
+                    prefixCharacter={currencySymbol}
+                    disableKeyboard={false}
+                    isCurrencyPressable={false}
+                    hideFocusedState={false}
+                    hideCurrencySymbol
+                    formatAmountOnBlur
+                    prefixContainerStyle={[styles.pv0]}
+                    inputStyle={
+                        [styles.optionRowAmountInput, StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(currencySymbol ?? '') + styles.pl1.paddingLeft), amountWidth] as TextStyle[]
+                    }
+                    containerStyle={[styles.textInputContainer]}
+                    onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? 0, Number(value))}
+                    maxLength={formattedTotalAmount.length}
+                />
+            ),
         }));
     }, [
         isTypeSplit,
@@ -540,13 +543,15 @@ function MoneyRequestConfirmationList({
         return Object.keys(transaction.splitShares).some((key) => transaction.splitShares?.[Number(key) ?? -1]?.isModified);
     }, [transaction?.splitShares]);
 
-    const SplitAmountSectionHeader = useCallback(
-        (sectionWithIndex: {section: SectionWithIndexOffset<IouListItem>}) => (
-            <View style={[styles.optionsListSectionHeader, styles.flexRow, styles.justifyContentBetween]}>
-                <Text style={[styles.ph5, styles.textLabelSupporting]}>{sectionWithIndex.section.title}</Text>
+    const getSplitSectionHeader = useCallback(
+        () => (
+            <View style={[styles.mt2, styles.mb1, styles.flexRow, styles.justifyContentBetween]}>
+                <Text style={[styles.ph5, styles.textLabelSupporting]}>{translate('moneyRequestConfirmationList.splitAmounts')}</Text>
                 {!shouldShowReadOnlySplits && isSplitModified && (
                     <PressableWithFeedback
-                        onPress={() => IOU.resetSplitShares(transaction)}
+                        onPress={() => {
+                            IOU.resetSplitShares(transaction);
+                        }}
                         accessibilityLabel={CONST.ROLE.BUTTON}
                         role={CONST.ROLE.BUTTON}
                         shouldUseAutoHitSlop
@@ -562,7 +567,8 @@ function MoneyRequestConfirmationList({
             styles.flexRow,
             styles.justifyContentBetween,
             styles.link,
-            styles.optionsListSectionHeader,
+            styles.mb1,
+            styles.mt2,
             styles.ph5,
             styles.pr5,
             styles.textLabelSupporting,
@@ -571,8 +577,8 @@ function MoneyRequestConfirmationList({
         ],
     );
 
-    const selectionListSections = useMemo(() => {
-        const sections: Array<SectionListDataType<IouListItem>> = [];
+    const sections = useMemo(() => {
+        const options: Array<SectionListDataType<MoneyRequestConfirmationListItem>> = [];
         if (isTypeSplit) {
             options.push(
                 ...[
@@ -582,38 +588,8 @@ function MoneyRequestConfirmationList({
                         shouldShow: true,
                     },
                     {
-                        title: translate('moneyRequestConfirmationList.splitAmounts'),
-                        CustomSectionHeader: SplitAmountSectionHeader,
-                        data:
-                            splitParticipants?.map((participant) => ({
-                                ...participant,
-                                rightElement:
-                                    participant.shouldShowAmountInput && participant.amountInputProps ? (
-                                        <MoneyRequestAmountInput
-                                            amount={participant.amountInputProps.amount}
-                                            currency={participant.amountInputProps.currency}
-                                            prefixCharacter={participant.amountInputProps.prefixCharacter}
-                                            disableKeyboard={false}
-                                            isCurrencyPressable={false}
-                                            hideFocusedState={false}
-                                            hideCurrencySymbol
-                                            formatAmountOnBlur
-                                            prefixContainerStyle={[styles.pv0]}
-                                            containerStyle={[styles.textInputContainer]}
-                                            inputStyle={[
-                                                styles.optionRowAmountInput,
-                                                StyleUtils.getPaddingLeft(
-                                                    StyleUtils.getCharacterPadding(participant.amountInputProps.prefixCharacter ?? '') + styles.pl1.paddingLeft,
-                                                ) as TextStyle,
-                                                participant.amountInputProps.inputStyle,
-                                            ]}
-                                            onAmountChange={participant.amountInputProps.onAmountChange}
-                                            maxLength={participant.amountInputProps.maxLength}
-                                        />
-                                    ) : (
-                                        <Text style={[styles.textLabel]}>{participant.descriptiveText}</Text>
-                                    ),
-                            })) ?? [],
+                        CustomSectionHeader: getSplitSectionHeader,
+                        data: splitParticipants,
                         shouldShow: true,
                     },
                 ],
@@ -631,21 +607,9 @@ function MoneyRequestConfirmationList({
                 shouldShow: true,
             });
         }
-        return sections;
-    }, [
-        selectedParticipants,
-        isTypeSplit,
-        translate,
-        splitParticipants,
-        payeePersonalDetails,
-        StyleUtils,
-        styles.optionRowAmountInput,
-        styles.pl1.paddingLeft,
-        styles.pv0,
-        SplitAmountSectionHeader,
-        styles.textInputContainer,
-        styles.textLabel,
-    ]);
+
+        return options;
+    }, [isTypeSplit, translate, payeePersonalDetails, getSplitSectionHeader, splitParticipants, selectedParticipants]);
 
     useEffect(() => {
         if (!isDistanceRequest || isMovingTransactionFromTrackExpense) {
@@ -704,14 +668,19 @@ function MoneyRequestConfirmationList({
         }
         // Keep 'transaction' out to ensure that we autoselect the option only once
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [policyTagLists, policyTags, canUseViolations]);
+    }, [policyTagLists, policyTags]);
 
     /**
      * Navigate to report details or profile of selected user
      */
-    const navigateToReportOrUserDetail = (option: IouListItem) => {
+    const navigateToReportOrUserDetail = (option: MoneyRequestConfirmationListItem) => {
         const activeRoute = Navigation.getActiveRouteWithoutParams();
 
+        if (option.isSelfDM) {
+            Navigation.navigate(ROUTES.PROFILE.getRoute(currentUserPersonalDetails.accountID, activeRoute));
+            return;
+        }
+
         if (option.accountID) {
             Navigation.navigate(ROUTES.PROFILE.getRoute(option.accountID, activeRoute));
         } else if (option.reportID) {
@@ -1255,79 +1224,14 @@ function MoneyRequestConfirmationList({
     );
 
     return (
-        <SelectionList
-            sections={selectionListSections}
+        <SelectionList<MoneyRequestConfirmationListItem>
+            sections={sections}
             ListItem={UserListItem}
             onSelectRow={navigateToReportOrUserDetail}
-            shouldShowTooltips
-            sectionTitleStyles={styles.sidebarLinkTextBold}
-            showScrollIndicator
+            canSelectMultiple={false}
+            shouldPreventDefaultFocusOnSelectRow
             footerContent={footerContent}
-            rightHandSideComponent={<View />}
-            listFooterContent={
-                <>
-                    {isDistanceRequest && (
-                        <View style={styles.confirmationListMapItem}>
-                            <ConfirmedRoute transaction={transaction ?? ({} as OnyxTypes.Transaction)} />
-                        </View>
-                    )}
-                    {isTypeInvoice && (
-                        <MenuItem
-                            key={translate('workspace.invoices.sendFrom')}
-                            shouldShowRightIcon={!isReadOnly && canUpdateSenderWorkspace}
-                            title={senderWorkspace?.name}
-                            icon={senderWorkspace?.avatarURL ? senderWorkspace?.avatarURL : getDefaultWorkspaceAvatar(senderWorkspace?.name)}
-                            iconType={CONST.ICON_TYPE_WORKSPACE}
-                            description={translate('workspace.common.workspace')}
-                            label={translate('workspace.invoices.sendFrom')}
-                            isLabelHoverable={false}
-                            interactive={!isReadOnly && canUpdateSenderWorkspace}
-                            onPress={() => {
-                                Navigation.navigate(
-                                    ROUTES.MONEY_REQUEST_STEP_SEND_FROM.getRoute(iouType, transaction?.transactionID ?? '', reportID, Navigation.getActiveRouteWithoutParams()),
-                                );
-                            }}
-                            style={styles.moneyRequestMenuItem}
-                            labelStyle={styles.mt2}
-                            titleStyle={styles.flex1}
-                            disabled={didConfirm || !canUpdateSenderWorkspace}
-                        />
-                    )}
-                    {!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}
-                    />
-                </>
-            }
+            listFooterContent={listFooterContent}
         />
     );
 }