From 609a1d0fae439a85733312f52f0c1bd9367e84f9 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Sun, 28 Jan 2024 21:01:22 +0700
Subject: [PATCH 01/10] display require field below show more button

---
 ...oraryForRefactorRequestConfirmationList.js | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index 2aff0444a59e..dc8fd126eb64 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -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;
@@ -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')}
+                />
+            )}
             {!shouldShowAllFields && (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
@@ -794,7 +824,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                             error={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
                         />
                     )}
-                    {shouldShowCategories && (
+                    {!isCategoryRequired && shouldShowCategories && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!isReadOnly}
                             title={iouCategory}
@@ -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)}
@@ -822,7 +851,6 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                             style={[styles.moneyRequestMenuItem]}
                             disabled={didConfirm}
                             interactive={!isReadOnly}
-                            rightLabel={canUseViolations && Boolean(policy.requiresTag) ? translate('common.required') : ''}
                         />
                     )}
                     {shouldShowTax && (

From 2fef2e5f658e5a98c4952944f2ec5b59fcd0b96a Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 31 Jan 2024 14:07:11 +0700
Subject: [PATCH 02/10] refactor render item in confirm list

---
 ...oraryForRefactorRequestConfirmationList.js | 399 +++++++++---------
 1 file changed, 198 insertions(+), 201 deletions(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index dc8fd126eb64..adb866e06cd8 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -617,56 +617,11 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
         );
     }, [isReadOnly, iouType, selectedParticipants.length, confirm, bankAccountRoute, iouCurrencyCode, policyID, splitOrRequestOptions, formError, styles.ph1, styles.mb2, translate]);
 
-    const {image: receiptImage, thumbnail: receiptThumbnail} = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : {};
-    return (
-        <OptionsSelector
-            sections={optionSelectorSections}
-            onSelectRow={userCanModifyParticipants.current ? selectParticipant : navigateToReportOrUserDetail}
-            onAddToSelection={selectParticipant}
-            onConfirmSelection={confirm}
-            selectedOptions={selectedOptions}
-            canSelectMultipleOptions={userCanModifyParticipants.current}
-            disableArrowKeysActions={!userCanModifyParticipants.current}
-            boldStyle
-            showTitleTooltip
-            shouldTextInputAppearBelowOptions
-            shouldShowTextInput={false}
-            shouldUseStyleForChildren={false}
-            optionHoveredStyle={userCanModifyParticipants.current ? styles.hoveredComponentBG : {}}
-            footerContent={!isEditingSplitBill && footerContent}
-            listStyles={listStyles}
-            shouldAllowScrollingChildren
-        >
-            {isDistanceRequest && (
-                <View style={styles.confirmationListMapItem}>
-                    <ConfirmedRoute transaction={transaction} />
-                </View>
-            )}
-            {receiptImage || receiptThumbnail ? (
-                <Image
-                    style={styles.moneyRequestImage}
-                    source={{uri: receiptThumbnail || receiptImage}}
-                    // AuthToken is required when retrieving the image from the server
-                    // but we don't need it to load the blob:// or file:// image when starting a money request / split bill
-                    // So if we have a thumbnail, it means we're retrieving the image from the server
-                    isAuthTokenRequired={!_.isEmpty(receiptThumbnail)}
-                />
-            ) : (
-                // 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.REQUEST && (
-                    <ReceiptEmptyState
-                        onPress={() =>
-                            Navigation.navigate(
-                                ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
-                            )
-                        }
-                    />
-                )
-            )}
-            {shouldShowSmartScanFields && (
+    const classifiedMenuItems = [
+        shouldShowSmartScanFields && {
+            item: (
                 <MenuItemWithTopDescription
+                    key={translate('iou.amount')}
                     shouldShowRightIcon={!isReadOnly && !isDistanceRequest}
                     title={formattedAmount}
                     description={translate('iou.amount')}
@@ -687,27 +642,53 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
                     error={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? translate('common.error.enterAmount') : ''}
                 />
-            )}
-            <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}
-            />
-            {isMerchantRequired && (
+            ),
+            isRelevant: true,
+        },
+        {
+            item: (
+                <MenuItemWithTopDescription
+                    key={translate('common.description')}
+                    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,
+        },
+        isDistanceRequest && {
+            item: (
+                <MenuItemWithTopDescription
+                    key={translate('common.distance')}
+                    shouldShowRightIcon={!isReadOnly && isTypeRequest}
+                    title={iouMerchant}
+                    description={translate('common.distance')}
+                    style={[styles.moneyRequestMenuItem]}
+                    titleStyle={styles.flex1}
+                    onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))}
+                    disabled={didConfirm || !isTypeRequest}
+                    interactive={!isReadOnly}
+                />
+            ),
+            isRelevant: false,
+        },
+        shouldShowMerchant && {
+            item: (
                 <MenuItemWithTopDescription
+                    key={translate('common.merchant')}
                     shouldShowRightIcon={!isReadOnly}
                     title={isMerchantEmpty ? '' : iouMerchant}
                     description={translate('common.merchant')}
@@ -725,9 +706,37 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     brickRoadIndicator={merchantError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
                     error={merchantError ? translate('common.error.fieldRequired') : ''}
                 />
-            )}
-            {isCategoryRequired && (
+            ),
+            isRelevant: isMerchantRequired,
+        },
+        shouldShowDate && {
+            item: (
+                <MenuItemWithTopDescription
+                    key={translate('common.date')}
+                    shouldShowRightIcon={!isReadOnly}
+                    title={iouCreated || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
+                    description={translate('common.date')}
+                    style={[styles.moneyRequestMenuItem]}
+                    titleStyle={styles.flex1}
+                    onPress={() => {
+                        if (isEditingSplitBill) {
+                            Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(reportID, reportActionID, CONST.EDIT_REQUEST_FIELD.DATE));
+                            return;
+                        }
+                        Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));
+                    }}
+                    disabled={didConfirm}
+                    interactive={!isReadOnly}
+                    brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                    error={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
+                />
+            ),
+            isRelevant: false,
+        },
+        shouldShowCategories && {
+            item: (
                 <MenuItemWithTopDescription
+                    key={translate('common.category')}
                     shouldShowRightIcon={!isReadOnly}
                     title={iouCategory}
                     description={translate('common.category')}
@@ -737,11 +746,14 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     titleStyle={styles.flex1}
                     disabled={didConfirm}
                     interactive={!isReadOnly}
-                    rightLabel={translate('common.required')}
                 />
-            )}
-            {isTagRequired && (
+            ),
+            isRelevant: isCategoryRequired,
+        },
+        shouldShowTags && {
+            item: (
                 <MenuItemWithTopDescription
+                    key={translate('common.tag')}
                     shouldShowRightIcon={!isReadOnly}
                     title={PolicyUtils.getCleanedTagName(iouTag)}
                     description={policyTagListName}
@@ -750,9 +762,119 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     style={[styles.moneyRequestMenuItem]}
                     disabled={didConfirm}
                     interactive={!isReadOnly}
-                    rightLabel={translate('common.required')}
                 />
+            ),
+            isRelevant: isTagRequired,
+        },
+        shouldShowTax && {
+            item: (
+                <MenuItemWithTopDescription
+                    key={`${policyTaxRates.name}${taxRateTitle}`}
+                    shouldShowRightIcon={!isReadOnly}
+                    title={taxRateTitle}
+                    description={policyTaxRates.name}
+                    style={[styles.moneyRequestMenuItem]}
+                    titleStyle={styles.flex1}
+                    onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAX_RATE.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))}
+                    disabled={didConfirm}
+                    interactive={!isReadOnly}
+                />
+            ),
+            isRelevant: false,
+        },
+        shouldShowTax && {
+            item: (
+                <MenuItemWithTopDescription
+                    key={`${policyTaxRates.name}${formattedTaxAmount}`}
+                    shouldShowRightIcon={!isReadOnly}
+                    title={formattedTaxAmount}
+                    description={policyTaxRates.name}
+                    style={[styles.moneyRequestMenuItem]}
+                    titleStyle={styles.flex1}
+                    onPress={() => Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAX_AMOUNT.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))}
+                    disabled={didConfirm}
+                    interactive={!isReadOnly}
+                />
+            ),
+            isRelevant: false,
+        },
+        shouldShowBillable && {
+            item: (
+                <View
+                    style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}
+                    key={translate('common.billable')}
+                >
+                    <Text color={!iouIsBillable ? theme.textSupporting : undefined}>{translate('common.billable')}</Text>
+                    <Switch
+                        accessibilityLabel={translate('common.billable')}
+                        isOn={iouIsBillable}
+                        onToggle={onToggleBillable}
+                    />
+                </View>
+            ),
+            isRelevant: false,
+        },
+    ];
+
+    const relevantMenuItems = _.map(
+        _.filter(classifiedMenuItems, (classifiedMenuItem) => !classifiedMenuItem || classifiedMenuItem.isRelevant),
+        (relevantMenuItem) => relevantMenuItem.item,
+    );
+
+    const supplementaryMenuItems = _.map(
+        _.filter(classifiedMenuItems, (classifiedMenuItem) => !classifiedMenuItem || !classifiedMenuItem.isRelevant),
+        (supplementaryMenuItem) => supplementaryMenuItem.item,
+    );
+
+    const {image: receiptImage, thumbnail: receiptThumbnail} = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : {};
+    return (
+        <OptionsSelector
+            sections={optionSelectorSections}
+            onSelectRow={userCanModifyParticipants.current ? selectParticipant : navigateToReportOrUserDetail}
+            onAddToSelection={selectParticipant}
+            onConfirmSelection={confirm}
+            selectedOptions={selectedOptions}
+            canSelectMultipleOptions={userCanModifyParticipants.current}
+            disableArrowKeysActions={!userCanModifyParticipants.current}
+            boldStyle
+            showTitleTooltip
+            shouldTextInputAppearBelowOptions
+            shouldShowTextInput={false}
+            shouldUseStyleForChildren={false}
+            optionHoveredStyle={userCanModifyParticipants.current ? styles.hoveredComponentBG : {}}
+            footerContent={!isEditingSplitBill && footerContent}
+            listStyles={listStyles}
+            shouldAllowScrollingChildren
+        >
+            {isDistanceRequest && (
+                <View style={styles.confirmationListMapItem}>
+                    <ConfirmedRoute transaction={transaction} />
+                </View>
+            )}
+            {receiptImage || receiptThumbnail ? (
+                <Image
+                    style={styles.moneyRequestImage}
+                    source={{uri: receiptThumbnail || receiptImage}}
+                    // AuthToken is required when retrieving the image from the server
+                    // but we don't need it to load the blob:// or file:// image when starting a money request / split bill
+                    // So if we have a thumbnail, it means we're retrieving the image from the server
+                    isAuthTokenRequired={!_.isEmpty(receiptThumbnail)}
+                />
+            ) : (
+                // 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.REQUEST && (
+                    <ReceiptEmptyState
+                        onPress={() =>
+                            Navigation.navigate(
+                                ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
+                            )
+                        }
+                    />
+                )
             )}
+            {_.map(relevantMenuItems, (relevantMenuItem) => relevantMenuItem)}
             {!shouldShowAllFields && (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
@@ -768,132 +890,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
                 </View>
             )}
-            {shouldShowAllFields && (
-                <>
-                    {isDistanceRequest && (
-                        <MenuItemWithTopDescription
-                            shouldShowRightIcon={!isReadOnly && isTypeRequest}
-                            title={iouMerchant}
-                            description={translate('common.distance')}
-                            style={[styles.moneyRequestMenuItem]}
-                            titleStyle={styles.flex1}
-                            onPress={() =>
-                                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))
-                            }
-                            disabled={didConfirm || !isTypeRequest}
-                            interactive={!isReadOnly}
-                        />
-                    )}
-                    {!isMerchantRequired && shouldShowMerchant && (
-                        <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') : ''}
-                        />
-                    )}
-                    {shouldShowDate && (
-                        <MenuItemWithTopDescription
-                            shouldShowRightIcon={!isReadOnly}
-                            title={iouCreated || format(new Date(), CONST.DATE.FNS_FORMAT_STRING)}
-                            description={translate('common.date')}
-                            style={[styles.moneyRequestMenuItem]}
-                            titleStyle={styles.flex1}
-                            onPress={() => {
-                                if (isEditingSplitBill) {
-                                    Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(reportID, reportActionID, CONST.EDIT_REQUEST_FIELD.DATE));
-                                    return;
-                                }
-                                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DATE.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));
-                            }}
-                            disabled={didConfirm}
-                            interactive={!isReadOnly}
-                            brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                            error={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
-                        />
-                    )}
-                    {!isCategoryRequired && shouldShowCategories && (
-                        <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}
-                        />
-                    )}
-                    {!isTagRequired && shouldShowTags && (
-                        <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}
-                        />
-                    )}
-                    {shouldShowTax && (
-                        <MenuItemWithTopDescription
-                            shouldShowRightIcon={!isReadOnly}
-                            title={taxRateTitle}
-                            description={policyTaxRates.name}
-                            style={[styles.moneyRequestMenuItem]}
-                            titleStyle={styles.flex1}
-                            onPress={() =>
-                                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAX_RATE.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))
-                            }
-                            disabled={didConfirm}
-                            interactive={!isReadOnly}
-                        />
-                    )}
-
-                    {shouldShowTax && (
-                        <MenuItemWithTopDescription
-                            shouldShowRightIcon={!isReadOnly}
-                            title={formattedTaxAmount}
-                            description={policyTaxRates.name}
-                            style={[styles.moneyRequestMenuItem]}
-                            titleStyle={styles.flex1}
-                            onPress={() =>
-                                Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_TAX_AMOUNT.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()))
-                            }
-                            disabled={didConfirm}
-                            interactive={!isReadOnly}
-                        />
-                    )}
-                    {shouldShowBillable && (
-                        <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}>
-                            <Text color={!iouIsBillable ? theme.textSupporting : undefined}>{translate('common.billable')}</Text>
-                            <Switch
-                                accessibilityLabel={translate('common.billable')}
-                                isOn={iouIsBillable}
-                                onToggle={onToggleBillable}
-                            />
-                        </View>
-                    )}
-                </>
-            )}
+            {shouldShowAllFields && <>{_.map(supplementaryMenuItems, (supplementaryMenuItem) => supplementaryMenuItem)}</>}
         </OptionsSelector>
     );
 }

From 56522c3b46f66ccdbe4ab05129de64d6cd1c84fa Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 31 Jan 2024 14:12:27 +0700
Subject: [PATCH 03/10] add right label

---
 .../MoneyTemporaryForRefactorRequestConfirmationList.js         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index adb866e06cd8..13001e7f884e 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -746,6 +746,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     titleStyle={styles.flex1}
                     disabled={didConfirm}
                     interactive={!isReadOnly}
+                    rightLabel={isCategoryRequired ? translate('common.required') : ''}
                 />
             ),
             isRelevant: isCategoryRequired,
@@ -762,6 +763,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     style={[styles.moneyRequestMenuItem]}
                     disabled={didConfirm}
                     interactive={!isReadOnly}
+                    rightLabel={isTagRequired ? translate('common.required') : ''}
                 />
             ),
             isRelevant: isTagRequired,

From c231190115f8672b84662ab8413a4af82ccde748 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 1 Feb 2024 17:01:19 +0700
Subject: [PATCH 04/10] optimize logic

---
 .../MoneyTemporaryForRefactorRequestConfirmationList.js       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index 13001e7f884e..ac301e495ba9 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -876,7 +876,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     />
                 )
             )}
-            {_.map(relevantMenuItems, (relevantMenuItem) => relevantMenuItem)}
+            {relevantMenuItems}
             {!shouldShowAllFields && (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
@@ -892,7 +892,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
                 </View>
             )}
-            {shouldShowAllFields && <>{_.map(supplementaryMenuItems, (supplementaryMenuItem) => supplementaryMenuItem)}</>}
+            {shouldShowAllFields && <>{supplementaryMenuItems}</>}
         </OptionsSelector>
     );
 }

From 6a38ccd2b86c1a6b9c1d2627be51ed2de77c06a3 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Fri, 2 Feb 2024 11:43:25 +0700
Subject: [PATCH 05/10] merge main

---
 ...yTemporaryForRefactorRequestConfirmationList.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index ac301e495ba9..b7362aebdf05 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -617,7 +617,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
         );
     }, [isReadOnly, iouType, selectedParticipants.length, confirm, bankAccountRoute, iouCurrencyCode, policyID, splitOrRequestOptions, formError, styles.ph1, styles.mb2, translate]);
 
-    const classifiedMenuItems = [
+    const classifiedFields = [
         shouldShowSmartScanFields && {
             item: (
                 <MenuItemWithTopDescription
@@ -818,13 +818,13 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
         },
     ];
 
-    const relevantMenuItems = _.map(
-        _.filter(classifiedMenuItems, (classifiedMenuItem) => !classifiedMenuItem || classifiedMenuItem.isRelevant),
+    const relevantFields = _.map(
+        _.filter(classifiedFields, (classifiedField) => !classifiedField || classifiedField.isRelevant),
         (relevantMenuItem) => relevantMenuItem.item,
     );
 
-    const supplementaryMenuItems = _.map(
-        _.filter(classifiedMenuItems, (classifiedMenuItem) => !classifiedMenuItem || !classifiedMenuItem.isRelevant),
+    const supplementaryFields = _.map(
+        _.filter(classifiedFields, (classifiedField) => !classifiedField || !classifiedField.isRelevant),
         (supplementaryMenuItem) => supplementaryMenuItem.item,
     );
 
@@ -876,7 +876,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     />
                 )
             )}
-            {relevantMenuItems}
+            {relevantMenuFields}
             {!shouldShowAllFields && (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
@@ -892,7 +892,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
                 </View>
             )}
-            {shouldShowAllFields && <>{supplementaryMenuItems}</>}
+            {shouldShowAllFields && <>{supplementaryFields}</>}
         </OptionsSelector>
     );
 }

From eecaf8402f4be0dcf3c9c2701e37cd2f4d7d64c3 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Fri, 2 Feb 2024 11:48:15 +0700
Subject: [PATCH 06/10] fix lint

---
 .../MoneyTemporaryForRefactorRequestConfirmationList.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index b7362aebdf05..7406ef8f4b07 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -876,7 +876,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     />
                 )
             )}
-            {relevantMenuFields}
+            {relevantFields}
             {!shouldShowAllFields && (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />

From 22a4c3e6e557469678256e6bab9248c16ac6597a Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 5 Feb 2024 19:30:06 +0700
Subject: [PATCH 07/10] rename variable

---
 .../MoneyTemporaryForRefactorRequestConfirmationList.js       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index daaa196f9db4..7f2f313c86ba 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -824,12 +824,12 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
 
     const relevantFields = _.map(
         _.filter(classifiedFields, (classifiedField) => !classifiedField || classifiedField.isRelevant),
-        (relevantMenuItem) => relevantMenuItem.item,
+        (relevantField) => relevantField.item,
     );
 
     const supplementaryFields = _.map(
         _.filter(classifiedFields, (classifiedField) => !classifiedField || !classifiedField.isRelevant),
-        (supplementaryMenuItem) => supplementaryMenuItem.item,
+        (supplementaryField) => supplementaryField.item,
     );
 
     const {image: receiptImage, thumbnail: receiptThumbnail} = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : {};

From 547f59490cb16d766c33caa0a143cdcd7dbbfd65 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 7 Feb 2024 10:44:12 +0700
Subject: [PATCH 08/10] optimize logic

---
 ...oraryForRefactorRequestConfirmationList.js | 59 +++++++++++--------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index 1f568c8114f8..f183e26edad8 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -619,8 +619,9 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
         );
     }, [isReadOnly, iouType, selectedParticipants.length, confirm, bankAccountRoute, iouCurrencyCode, policyID, splitOrRequestOptions, formError, styles.ph1, styles.mb2, translate]);
 
+    // All fields that a request can have
     const classifiedFields = [
-        shouldShowSmartScanFields && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={translate('iou.amount')}
@@ -645,7 +646,8 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     error={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? translate('common.error.enterAmount') : ''}
                 />
             ),
-            isRelevant: true,
+            shouldShow: shouldShowSmartScanFields,
+            isSupplementary: false,
         },
         {
             item: (
@@ -669,9 +671,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     numberOfLinesTitle={2}
                 />
             ),
-            isRelevant: true,
+            shouldShow: true,
+            isSupplementary: false,
         },
-        isDistanceRequest && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={translate('common.distance')}
@@ -685,9 +688,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     interactive={!isReadOnly}
                 />
             ),
-            isRelevant: false,
+            shouldShow: isDistanceRequest,
+            isSupplementary: true,
         },
-        shouldShowMerchant && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={translate('common.merchant')}
@@ -709,9 +713,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     error={merchantError ? translate('common.error.fieldRequired') : ''}
                 />
             ),
-            isRelevant: isMerchantRequired,
+            shouldShow: shouldShowMerchant,
+            isSupplementary: !isMerchantRequired,
         },
-        shouldShowDate && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={translate('common.date')}
@@ -733,9 +738,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     error={shouldDisplayFieldError && TransactionUtils.isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
                 />
             ),
-            isRelevant: false,
+            shouldShow: shouldShowDate,
+            isSupplementary: true,
         },
-        shouldShowCategories && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={translate('common.category')}
@@ -751,9 +757,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     rightLabel={isCategoryRequired ? translate('common.required') : ''}
                 />
             ),
-            isRelevant: isCategoryRequired,
+            shouldShow: shouldShowCategories,
+            isSupplementary: !isCategoryRequired,
         },
-        shouldShowTags && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={translate('common.tag')}
@@ -772,9 +779,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     rightLabel={isTagRequired ? translate('common.required') : ''}
                 />
             ),
-            isRelevant: isTagRequired,
+            shouldShow: shouldShowTags,
+            isSupplementary: !isTagRequired,
         },
-        shouldShowTax && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={`${policyTaxRates.name}${taxRateTitle}`}
@@ -788,9 +796,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     interactive={!isReadOnly}
                 />
             ),
-            isRelevant: false,
+            shouldShow: shouldShowTax,
+            isSupplementary: true,
         },
-        shouldShowTax && {
+        {
             item: (
                 <MenuItemWithTopDescription
                     key={`${policyTaxRates.name}${formattedTaxAmount}`}
@@ -804,9 +813,10 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     interactive={!isReadOnly}
                 />
             ),
-            isRelevant: false,
+            shouldShow: shouldShowTax,
+            isSupplementary: true,
         },
-        shouldShowBillable && {
+        {
             item: (
                 <View
                     style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}
@@ -820,17 +830,18 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     />
                 </View>
             ),
-            isRelevant: false,
+            shouldShow: shouldShowBillable,
+            isSupplementary: true,
         },
     ];
 
-    const relevantFields = _.map(
-        _.filter(classifiedFields, (classifiedField) => !classifiedField || classifiedField.isRelevant),
-        (relevantField) => relevantField.item,
+    const primaryFields = _.map(
+        _.filter(classifiedFields, (classifiedField) => classifiedField.shouldShow && !classifiedField.isSupplementary),
+        (primaryField) => primaryField.item,
     );
 
     const supplementaryFields = _.map(
-        _.filter(classifiedFields, (classifiedField) => !classifiedField || !classifiedField.isRelevant),
+        _.filter(classifiedFields, (classifiedField) => classifiedField.shouldShow && classifiedField.isSupplementary),
         (supplementaryField) => supplementaryField.item,
     );
 
@@ -882,7 +893,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
                     />
                 )
             )}
-            {relevantFields}
+            {primaryFields}
             {!shouldShowAllFields && (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
                     <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />

From 2c077eea96c40cac8155f5d4973bc0cb02114dfd Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Sun, 11 Feb 2024 00:18:22 +0700
Subject: [PATCH 09/10] add comment

---
 .../MoneyTemporaryForRefactorRequestConfirmationList.js        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index 7ca79cfce332..96a36651a556 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -841,6 +841,9 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
         },
     ];
 
+    // 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 primaryFields = _.map(
         _.filter(classifiedFields, (classifiedField) => classifiedField.shouldShow && !classifiedField.isSupplementary),
         (primaryField) => primaryField.item,

From 4ff9196ce4ea7322651acbf73fdeeda65ba5a125 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Sun, 11 Feb 2024 00:25:34 +0700
Subject: [PATCH 10/10] fix lint

---
 .../MoneyTemporaryForRefactorRequestConfirmationList.js         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index 96a36651a556..b15aea059cb4 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -841,7 +841,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
         },
     ];
 
-    // An intermediate structure that helps us classify the fields as "primary" and "supplementary". 
+    // 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 primaryFields = _.map(