Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: refactor MoneyRequestConfirmationList #40785

Merged
merged 14 commits into from
May 13, 2024
Merged

feat: refactor MoneyRequestConfirmationList #40785

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0256948
feat: refactor MoneyRequestConfirmationList
MrMuzyk Apr 23, 2024
e69c513
fix: drop scrollview
MrMuzyk Apr 23, 2024
4345af7
fix: linter
MrMuzyk Apr 23, 2024
f7bbf0c
Merge branch 'main' of https://github.com/Expensify/App into feat/ref…
MrMuzyk Apr 30, 2024
67fde05
fix: linter
MrMuzyk Apr 30, 2024
6c65d05
fix: wrap with memo
MrMuzyk Apr 30, 2024
c14f686
Merge branch 'main' of https://github.com/Expensify/App into feat/ref…
MrMuzyk May 6, 2024
68362d5
fix: dep array
MrMuzyk May 6, 2024
4ead3e9
Merge branch 'main' of https://github.com/Expensify/App into feat/ref…
MrMuzyk May 9, 2024
3470b59
Merge branch 'main' of https://github.com/Expensify/App into feat/ref…
MrMuzyk May 9, 2024
8d83b8a
fix: return type
MrMuzyk May 9, 2024
fb0bd33
fix: v1
MrMuzyk May 9, 2024
e2fc5da
Merge branch 'main' of https://github.com/Expensify/App into feat/ref…
MrMuzyk May 10, 2024
57d57a1
Merge branch 'main' of https://github.com/Expensify/App into feat/ref…
MrMuzyk May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 118 additions & 85 deletions src/components/MoneyRequestConfirmationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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>;

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -209,7 +209,6 @@ function MoneyRequestConfirmationList({
receiptPath = '',
iouComment,
receiptFilename = '',
listStyles,
iouCreated,
iouIsBillable = false,
onToggleBillable,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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],
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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)}
/>
Expand All @@ -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}
/>
);
}

Expand Down
Loading
Loading