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

Display require field above show more button #35287

Merged
merged 19 commits into from
Feb 13, 2024
Merged

Display require field above show more button #35287

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
609a1d0
display require field below show more button
dukenv0307 Jan 28, 2024
51147f7
Merge branch 'main' into fix/34751
dukenv0307 Jan 31, 2024
2fef2e5
refactor render item in confirm list
dukenv0307 Jan 31, 2024
56522c3
add right label
dukenv0307 Jan 31, 2024
ed007df
merge main
dukenv0307 Feb 1, 2024
c231190
optimize logic
dukenv0307 Feb 1, 2024
aa48560
Merge branch 'main' into fix/34751
dukenv0307 Feb 2, 2024
6a38ccd
merge main
dukenv0307 Feb 2, 2024
eecaf84
fix lint
dukenv0307 Feb 2, 2024
70117cb
Merge branch 'main' into fix/34751
dukenv0307 Feb 5, 2024
b2a8585
merge main
dukenv0307 Feb 5, 2024
22a4c3e
rename variable
dukenv0307 Feb 5, 2024
51d12a8
Merge branch 'main' into fix/34751
dukenv0307 Feb 7, 2024
547f594
optimize logic
dukenv0307 Feb 7, 2024
c946a6b
merge main
dukenv0307 Feb 10, 2024
2c077ee
add comment
dukenv0307 Feb 10, 2024
4ff9196
fix lint
dukenv0307 Feb 10, 2024
528ac26
merge main
dukenv0307 Feb 13, 2024
74a238b
Merge branch 'main' into fix/34751
dukenv0307 Feb 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
36 changes: 32 additions & 4 deletions src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,9 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
const isMerchantEmpty = !iouMerchant || iouMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
const isMerchantRequired = isPolicyExpenseChat && !isScanRequest && shouldShowMerchant;

const isCategoryRequired = canUseViolations && Boolean(policy.requiresCategory);
const isTagRequired = canUseViolations && Boolean(policy.requiresTag);

useEffect(() => {
if ((!isMerchantRequired && isMerchantEmpty) || !merchantError) {
return;
Expand Down Expand Up @@ -723,6 +726,33 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
error={merchantError ? translate('common.error.fieldRequired') : ''}
/>
)}
{isCategoryRequired && (
<MenuItemWithTopDescription
shouldShowRightIcon={!isReadOnly}
title={iouCategory}
description={translate('common.category')}
numberOfLinesTitle={2}
onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))}
style={[styles.moneyRequestMenuItem]}
titleStyle={styles.flex1}
disabled={didConfirm}
interactive={!isReadOnly}
rightLabel={translate('common.required')}
/>
)}
{isTagRequired && (
<MenuItemWithTopDescription
shouldShowRightIcon={!isReadOnly}
title={PolicyUtils.getCleanedTagName(iouTag)}
description={policyTagListName}
numberOfLinesTitle={2}
onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))}
style={[styles.moneyRequestMenuItem]}
disabled={didConfirm}
interactive={!isReadOnly}
rightLabel={translate('common.required')}
/>
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you refactor this to reduce code duplication?

I'm thinking of something like this:

    const classifiedMenuItems = [
        shouldShowSmartScanFields && {
            item: <MenuItemWithTopDescription
                shouldShowRightIcon={!isReadOnly && !isDistanceRequest}
                title={formattedAmount}
                description={translate('iou.amount')}
                interactive={!isReadOnly}
                onPress={() => {
                    if (isDistanceRequest) {
                        return;
                    }
                    if (isEditingSplitBill) {
                        Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(reportID, reportActionID, CONST.EDIT_REQUEST_FIELD.AMOUNT));
                        return;
                    }
                    Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_AMOUNT.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));
                }}
                style={[styles.moneyRequestMenuItem, styles.mt2]}
                titleStyle={styles.moneyRequestConfirmationAmount}
                disabled={didConfirm}
                brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
                error={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? translate('common.error.enterAmount') : ''}
            />,
            isRelevant: true,
        },
        {
            item: <MenuItemWithTopDescription
                shouldShowRightIcon={!isReadOnly}
                shouldParseTitle
                title={iouComment}
                description={translate('common.description')}
                onPress={() => {
                    if (isEditingSplitBill) {
                        Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(reportID, reportActionID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION));
                        return;
                    }
                    Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));
                }}
                style={[styles.moneyRequestMenuItem]}
                titleStyle={styles.flex1}
                disabled={didConfirm}
                interactive={!isReadOnly}
                numberOfLinesTitle={2}
            />,
            isRelevant: true,
        },
        {
            item: <MenuItemWithTopDescription
                shouldShowRightIcon={!isReadOnly}
                title={isMerchantEmpty ? '' : iouMerchant}
                description={translate('common.merchant')}
                style={[styles.moneyRequestMenuItem]}
                titleStyle={styles.flex1}
                onPress={() => {
                    if (isEditingSplitBill) {
                        Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(reportID, reportActionID, CONST.EDIT_REQUEST_FIELD.MERCHANT));
                        return;
                    }
                    Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_MERCHANT.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));
                }}
                disabled={didConfirm}
                interactive={!isReadOnly}
                brickRoadIndicator={merchantError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
                error={merchantError ? translate('common.error.fieldRequired') : ''}
            />,
            isRelevant: isMerchantRequired,
        },
        // ...
    ];

    const relevantMenuItems = classifiedMenuItems
        .filter((classifiedMenuItem) => classifiedMenuItem.isRelevant)
        .map((classifiedMenuItem) => classifiedMenuItem.item);

    const supplementaryMenuItems = classifiedMenuItems
        .filter((classifiedMenuItem) => !classifiedMenuItem.isRelevant)
        .map((classifiedMenuItem) => classifiedMenuItem.item);

We would show relevantMenuItems above the "Show more" pill and the supplementaryMenuItems below that pill.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's great. Updating now.

{!shouldShowAllFields && (
<View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
<View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
Expand Down Expand Up @@ -794,7 +824,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
error={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
/>
)}
{shouldShowCategories && (
{!isCategoryRequired && shouldShowCategories && (
<MenuItemWithTopDescription
shouldShowRightIcon={!isReadOnly}
title={iouCategory}
Expand All @@ -807,10 +837,9 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
titleStyle={styles.flex1}
disabled={didConfirm}
interactive={!isReadOnly}
rightLabel={canUseViolations && Boolean(policy.requiresCategory) ? translate('common.required') : ''}
/>
)}
{shouldShowTags && (
{!isTagRequired && shouldShowTags && (
<MenuItemWithTopDescription
shouldShowRightIcon={!isReadOnly}
title={PolicyUtils.getCleanedTagName(iouTag)}
Expand All @@ -822,7 +851,6 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
style={[styles.moneyRequestMenuItem]}
disabled={didConfirm}
interactive={!isReadOnly}
rightLabel={canUseViolations && Boolean(policy.requiresTag) ? translate('common.required') : ''}
/>
)}
{shouldShowTax && (
Expand Down
Loading