Skip to content

Remove 'Show More' section when creating expense #62543

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

Merged
JS00001 merged 8 commits into from
Jun 12, 2025
+22 −67
Merged

Remove 'Show More' section when creating expense #62543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
85d1333
Remove 'Show More' when creating expense
nyomanjyotisa May 22, 2025
ddeb49a
Remove 'Show More' when creating expense
nyomanjyotisa May 22, 2025
c9b9d68
TypeScript fix
nyomanjyotisa May 22, 2025
ecc6a49
fix: field order
nyomanjyotisa May 27, 2025
2b60549
Merge branch 'main' into issue-62220
nyomanjyotisa May 30, 2025
ae71c34
minor fix
nyomanjyotisa Jun 2, 2025
5a39680
Merge branch 'main' into issue-62220
nyomanjyotisa Jun 5, 2025
2d8e867
minor fix
nyomanjyotisa Jun 9, 2025
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
1 change: 0 additions & 1 deletion src/components/MoneyRequestConfirmationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1057,7 +1057,6 @@ function MoneyRequestConfirmationList({
isCategoryRequired={isCategoryRequired}
isDistanceRequest={isDistanceRequest}
isPerDiemRequest={isPerDiemRequest}
isEditingSplitBill={isEditingSplitBill}
isMerchantEmpty={isMerchantEmpty}
isMerchantRequired={isMerchantRequired}
isPolicyExpenseChat={isPolicyExpenseChat}
Expand Down
88 changes: 22 additions & 66 deletions src/components/MoneyRequestConfirmationListFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {format} from 'date-fns';
import {Str} from 'expensify-common';
import lodashIsEqual from 'lodash/isEqual';
import React, {memo, useMemo, useReducer} from 'react';
import React, {memo, useMemo} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
Expand Down Expand Up @@ -49,7 +49,6 @@ import PressableWithoutFocus from './Pressable/PressableWithoutFocus';
import ReceiptEmptyState from './ReceiptEmptyState';
import ReceiptImage from './ReceiptImage';
import {ShowContextMenuContext} from './ShowContextMenuContext';
import ShowMoreButton from './ShowMoreButton';

type MoneyRequestConfirmationListFooterProps = {
/** The action to perform */
Expand Down Expand Up @@ -109,9 +108,6 @@ type MoneyRequestConfirmationListFooterProps = {
/** Flag indicating if it is a per diem request */
isPerDiemRequest: boolean;

/** Flag indicating if it is editing a split bill */
isEditingSplitBill: boolean | undefined;

/** Flag indicating if the merchant is empty */
isMerchantEmpty: boolean;

Expand Down Expand Up @@ -217,7 +213,6 @@ function MoneyRequestConfirmationListFooter({
isCategoryRequired,
isDistanceRequest,
isPerDiemRequest,
isEditingSplitBill,
isMerchantEmpty,
isMerchantRequired,
isPolicyExpenseChat,
Expand Down Expand Up @@ -255,9 +250,6 @@ function MoneyRequestConfirmationListFooter({

const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email, canBeMissing: true});

// A flag and a toggler for showing the rest of the form fields
const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false);

const shouldShowTags = useMemo(() => isPolicyExpenseChat && hasEnabledTags(policyTagLists), [isPolicyExpenseChat, policyTagLists]);
const isMultilevelTags = useMemo(() => isMultiLevelTagsPolicyUtils(policyTags), [policyTags]);
const shouldShowAttendees = useMemo(() => shouldShowAttendeesTransactionUtils(iouType, policy), [iouType, policy]);
Expand Down Expand Up @@ -310,8 +302,6 @@ function MoneyRequestConfirmationListFooter({
const canModifyTaxFields = !isReadOnly && !isDistanceRequest && !isPerDiemRequest;
// A flag for showing the billable field
const shouldShowBillable = policy?.disabledFields?.defaultBillable === false;
// Do not hide fields in case of paying someone
const shouldShowAllFields = !!isPerDiemRequest || !!isDistanceRequest || shouldExpandFields || !shouldShowSmartScanFields || isTypeSend || !!isEditingSplitBill;
// Calculate the formatted tax amount based on the transaction's tax amount and the IOU currency code
const taxAmount = getTaxAmount(transaction, false);
const formattedTaxAmount = convertToDisplayString(taxAmount, iouCurrencyCode);
Expand Down Expand Up @@ -350,9 +340,7 @@ function MoneyRequestConfirmationListFooter({

const mentionReportContextValue = useMemo(() => ({currentReportID: reportID, exactlyMatch: true}), [reportID]);

// An intermediate structure that helps us classify the fields as "primary" and "supplementary".
// The primary fields are always shown to the user, while an extra action is needed to reveal the supplementary ones.
const classifiedFields = [
const fields = [
{
item: (
<MenuItemWithTopDescription
Expand All @@ -376,7 +364,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: shouldShowSmartScanFields && shouldShowAmountField,
isSupplementary: false,
},
{
item: (
Expand Down Expand Up @@ -409,7 +396,6 @@ function MoneyRequestConfirmationListFooter({
</View>
),
shouldShow: true,
isSupplementary: false,
},
{
item: (
Expand All @@ -432,7 +418,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: isDistanceRequest,
isSupplementary: false,
},
{
item: (
Expand All @@ -456,7 +441,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: isDistanceRequest,
isSupplementary: false,
},
{
item: (
Expand All @@ -483,58 +467,55 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: shouldShowMerchant,
isSupplementary: !isMerchantRequired,
},
{
item: (
<MenuItemWithTopDescription
key={translate('common.date')}
key={translate('common.category')}
shouldShowRightIcon={!isReadOnly}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
title={iouCreated || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
description={translate('common.date')}
style={[styles.moneyRequestMenuItem]}
titleStyle={styles.flex1}
title={iouCategory}
description={translate('common.category')}
numberOfLinesTitle={2}
onPress={() => {
if (!transactionID) {
return;
}

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRoute(), reportActionID));
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRoute(), reportActionID));
}}
style={[styles.moneyRequestMenuItem]}
titleStyle={styles.flex1}
disabled={didConfirm}
interactive={!isReadOnly}
brickRoadIndicator={shouldDisplayFieldError && isCreatedMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
errorText={shouldDisplayFieldError && isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
rightLabel={isCategoryRequired ? translate('common.required') : ''}
/>
),
shouldShow: shouldShowDate,
isSupplementary: true,
shouldShow: shouldShowCategories,
},
{
item: (
<MenuItemWithTopDescription
key={translate('common.category')}
key={translate('common.date')}
shouldShowRightIcon={!isReadOnly}
title={iouCategory}
description={translate('common.category')}
numberOfLinesTitle={2}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
title={iouCreated || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
description={translate('common.date')}
style={[styles.moneyRequestMenuItem]}
titleStyle={styles.flex1}
onPress={() => {
if (!transactionID) {
return;
}

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRoute(), reportActionID));
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRoute(), reportActionID));
}}
style={[styles.moneyRequestMenuItem]}
titleStyle={styles.flex1}
disabled={didConfirm}
interactive={!isReadOnly}
rightLabel={isCategoryRequired ? translate('common.required') : ''}
brickRoadIndicator={shouldDisplayFieldError && isCreatedMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
errorText={shouldDisplayFieldError && isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
/>
),
shouldShow: shouldShowCategories,
isSupplementary: action === CONST.IOU.ACTION.CATEGORIZE ? false : !isCategoryRequired,
shouldShow: shouldShowDate,
},
...policyTagLists.map(({name, required, tags}, index) => {
const isTagRequired = required ?? false;
Expand All @@ -561,7 +542,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow,
isSupplementary: !isTagRequired,
};
}),
{
Expand All @@ -585,7 +565,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: shouldShowTax,
isSupplementary: true,
},
{
item: (
Expand All @@ -608,7 +587,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: shouldShowTax,
isSupplementary: true,
},
{
item: (
Expand All @@ -633,7 +611,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: shouldShowAttendees,
isSupplementary: true,
},
{
item: (
Expand All @@ -652,7 +629,6 @@ function MoneyRequestConfirmationListFooter({
</View>
),
shouldShow: shouldShowBillable,
isSupplementary: true,
},
{
item: (
Expand All @@ -674,7 +650,6 @@ function MoneyRequestConfirmationListFooter({
/>
),
shouldShow: isPolicyExpenseChat,
isSupplementary: true,
},
];

Expand Down Expand Up @@ -737,17 +712,6 @@ function MoneyRequestConfirmationListFooter({
return badges;
}, [firstDay, lastDay, translate, tripDays]);

const primaryFields: React.JSX.Element[] = [];
const supplementaryFields: React.JSX.Element[] = [];

classifiedFields.forEach((field) => {
if (field.shouldShow && !field.isSupplementary) {
primaryFields.push(field.item);
} else if (field.shouldShow && field.isSupplementary) {
supplementaryFields.push(field.item);
}
});

const receiptThumbnailContent = useMemo(
() => (
<View style={[styles.moneyRequestImage, styles.expenseViewImageSmall]}>
Expand Down Expand Up @@ -931,14 +895,7 @@ function MoneyRequestConfirmationListFooter({
}
</View>
)}
{primaryFields}
{!shouldShowAllFields && (
<ShowMoreButton
containerStyle={[styles.mt1, styles.mb2]}
onPress={toggleShouldExpandFields}
/>
)}
<View style={[styles.mb5]}>{shouldShowAllFields && supplementaryFields}</View>
<View style={[styles.mb5]}>{fields.filter((field) => field.shouldShow).map((field) => field.item)}</View>
</>
);
}
Expand All @@ -964,7 +921,6 @@ export default memo(
prevProps.iouType === nextProps.iouType &&
prevProps.isCategoryRequired === nextProps.isCategoryRequired &&
prevProps.isDistanceRequest === nextProps.isDistanceRequest &&
prevProps.isEditingSplitBill === nextProps.isEditingSplitBill &&
prevProps.isMerchantEmpty === nextProps.isMerchantEmpty &&
prevProps.isMerchantRequired === nextProps.isMerchantRequired &&
prevProps.isPolicyExpenseChat === nextProps.isPolicyExpenseChat &&
Expand Down
Loading