Merge pull request Expensify#76098 from TaduJR/revert-feat-CFI-Add-group-by-report-layout-feature

revert: feat: [CFI] Add group-by report layout feature

Author: Beamanator

src/CONST/index.ts

@@ -1132,7 +1132,6 @@ const CONST = {
             EXPORT: 'export',
             PAY: 'pay',
             MERGE: 'merge',
-            REPORT_LAYOUT: 'reportLayout',
         },
         PRIMARY_ACTIONS: {
             SUBMIT: 'submit',
@@ -1682,12 +1681,6 @@ const CONST = {
         GSD: 'gsd',
         DEFAULT: 'default',
     },
-    REPORT_LAYOUT: {
-        GROUP_BY: {
-            CATEGORY: 'mcc',
-            TAG: 'tag',
-        },
-    },
     THEME: {
         DEFAULT: 'system',
         FALLBACK: 'dark',

src/ONYXKEYS.ts

@@ -149,9 +149,6 @@ const ONYXKEYS = {
     /** Contains the user preference for the LHN priority mode */
     NVP_PRIORITY_MODE: 'nvp_priorityMode',
 
-    /** Contains the user preference for report layout group-by option */
-    NVP_REPORT_LAYOUT_GROUP_BY: 'nvp_expensify_groupByOption',
-
     /** Contains the users's block expiration (if they have one) */
     NVP_BLOCKED_FROM_CONCIERGE: 'nvp_private_blockedFromConcierge',
 
@@ -1147,7 +1144,6 @@ type OnyxValuesMapping = {
     [ONYXKEYS.BETA_CONFIGURATION]: OnyxTypes.BetaConfiguration;
     [ONYXKEYS.NVP_MUTED_PLATFORMS]: Partial<Record<Platform, true>>;
     [ONYXKEYS.NVP_PRIORITY_MODE]: ValueOf<typeof CONST.PRIORITY_MODE>;
-    [ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY]: string;
     [ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE]: OnyxTypes.BlockedFromConcierge;
     [ONYXKEYS.QUEUE_FLUSHED_DATA]: OnyxUpdate[];
 

src/ROUTES.ts

@@ -616,10 +616,6 @@ const ROUTES = {
         // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
         getRoute: (reportID: string, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/settings/visibility` as const, backTo),
     },
-    REPORT_SETTINGS_REPORT_LAYOUT: {
-        route: 'r/:reportID/settings/report-layout',
-        getRoute: (reportID: string) => `r/${reportID}/settings/report-layout` as const,
-    },
     REPORT_CHANGE_APPROVER: {
         route: 'r/:reportID/change-approver',
 

src/SCREENS.ts

@@ -386,7 +386,6 @@ const SCREENS = {
         NOTIFICATION_PREFERENCES: 'Report_Settings_Notification_Preferences',
         WRITE_CAPABILITY: 'Report_Settings_Write_Capability',
         VISIBILITY: 'Report_Settings_Visibility',
-        REPORT_LAYOUT: 'Report_Settings_Report_Layout',
     },
 
     NEW_TASK: {

src/components/MoneyReportHeader.tsx

@@ -226,7 +226,6 @@ function MoneyReportHeader({
         'Info',
         'Export',
         'Document',
-        'Feed',
     ] as const);
     const [lastDistanceExpenseType] = useOnyx(ONYXKEYS.NVP_LAST_DISTANCE_EXPENSE_TYPE, {canBeMissing: true});
     const {translate} = useLocalize();
@@ -1144,17 +1143,6 @@ function MoneyReportHeader({
                 Navigation.navigate(ROUTES.REPORT_CHANGE_APPROVER.getRoute(moneyRequestReport.reportID, Navigation.getActiveRoute()));
             },
         },
-        [CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT]: {
-            text: translate('reportLayout.reportLayout'),
-            icon: expensifyIcons.Feed,
-            value: CONST.REPORT.SECONDARY_ACTIONS.REPORT_LAYOUT,
-            onSelected: () => {
-                if (!moneyRequestReport) {
-                    return;
-                }
-                Navigation.navigate(ROUTES.REPORT_SETTINGS_REPORT_LAYOUT.getRoute(moneyRequestReport.reportID));
-            },
-        },
         [CONST.REPORT.SECONDARY_ACTIONS.DELETE]: {
             text: translate('common.delete'),
             icon: expensifyIcons.Trashcan,

src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx

@@ -26,14 +26,12 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import {setOptimisticTransactionThread} from '@libs/actions/Report';
-import {getReportLayoutGroupBy} from '@libs/actions/ReportLayout';
 import {setActiveTransactionIDs} from '@libs/actions/TransactionThreadNavigation';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import FS from '@libs/Fullstory';
 import {navigationRef} from '@libs/Navigation/Navigation';
 import Parser from '@libs/Parser';
 import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils';
-import {groupTransactionsByCategory, groupTransactionsByTag} from '@libs/ReportLayoutUtils';
 import {
     canAddTransaction,
     getAddExpenseDropdownOptions,
@@ -66,7 +64,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
-import MoneyRequestReportGroupHeader from './MoneyRequestReportGroupHeader';
 import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader';
 import MoneyRequestReportTotalSpend from './MoneyRequestReportTotalSpend';
 import MoneyRequestReportTransactionItem from './MoneyRequestReportTransactionItem';
@@ -169,7 +166,6 @@ function MoneyRequestReportTransactionList({
     const {markReportIDAsExpense} = useContext(WideRHPContext);
     const [isModalVisible, setIsModalVisible] = useState(false);
     const [selectedTransactionID, setSelectedTransactionID] = useState<string>('');
-    const [reportLayoutGroupBy] = useOnyx(ONYXKEYS.NVP_REPORT_LAYOUT_GROUP_BY, {canBeMissing: true});
     const {reportPendingAction} = getReportOfflinePendingActionAndErrors(report);
 
     const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(report);
@@ -234,51 +230,6 @@ function MoneyRequestReportTransactionList({
 
     const isTransactionSelected = useCallback((transactionID: string) => selectedTransactionIDs.includes(transactionID), [selectedTransactionIDs]);
 
-    // Toggle all transactions in a group
-    const toggleGroupSelection = useCallback(
-        (groupTransactions: OnyxTypes.Transaction[]) => {
-            const groupTransactionIDs = groupTransactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID);
-            const allSelected = groupTransactionIDs.every((id) => selectedTransactionIDs.includes(id));
-
-            let newSelectedTransactionIDs = selectedTransactionIDs;
-            if (allSelected) {
-                // Deselect all transactions in the group
-                newSelectedTransactionIDs = selectedTransactionIDs.filter((id) => !groupTransactionIDs.includes(id));
-            } else {
-                // Select all transactions in the group
-                const idsToAdd = groupTransactionIDs.filter((id) => !selectedTransactionIDs.includes(id));
-                newSelectedTransactionIDs = [...selectedTransactionIDs, ...idsToAdd];
-            }
-            setSelectedTransactions(newSelectedTransactionIDs);
-        },
-        [selectedTransactionIDs, setSelectedTransactions],
-    );
-
-    // Check if all transactions in a group are selected
-    const isGroupSelected = useCallback(
-        (groupTransactions: OnyxTypes.Transaction[]) => {
-            const groupTransactionIDs = groupTransactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID);
-            if (groupTransactionIDs.length === 0) {
-                return false;
-            }
-            return groupTransactionIDs.every((id) => selectedTransactionIDs.includes(id));
-        },
-        [selectedTransactionIDs],
-    );
-
-    // Check if some (but not all) transactions in a group are selected
-    const isGroupIndeterminate = useCallback(
-        (groupTransactions: OnyxTypes.Transaction[]) => {
-            const groupTransactionIDs = groupTransactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID);
-            if (groupTransactionIDs.length === 0) {
-                return false;
-            }
-            const selectedCount = groupTransactionIDs.filter((id) => selectedTransactionIDs.includes(id)).length;
-            return selectedCount > 0 && selectedCount < groupTransactionIDs.length;
-        },
-        [selectedTransactionIDs],
-    );
-
     useFocusEffect(
         useCallback(() => {
             return () => {
@@ -306,18 +257,6 @@ function MoneyRequestReportTransactionList({
             }));
     }, [newTransactions, sortBy, sortOrder, transactions, localeCompare, report]);
 
-    // Get the current group-by preference
-    const currentGroupBy = getReportLayoutGroupBy(reportLayoutGroupBy);
-
-    // Group transactions based on user preference
-    const groupedTransactions = useMemo(() => {
-        if (currentGroupBy === CONST.REPORT_LAYOUT.GROUP_BY.TAG) {
-            return groupTransactionsByTag(sortedTransactions, report, localeCompare);
-        }
-        // Default to grouping by category
-        return groupTransactionsByCategory(sortedTransactions, report, localeCompare);
-    }, [sortedTransactions, currentGroupBy, report, localeCompare]);
-
     const columnsToShow = useMemo(() => {
         const columns = getColumnsToShow(currentUserDetails?.accountID, transactions, true);
         return (Object.keys(columns) as SearchColumnType[]).filter((column) => columns[column]);
@@ -469,50 +408,28 @@ function MoneyRequestReportTransactionList({
                     )}
                 </View>
             )}
-            <View style={[listHorizontalPadding, styles.pb4]}>
-                {groupedTransactions.map((group) => {
-                    const groupTransactionsWithHighlight = group.transactions.map((transaction) => {
-                        const originalTransaction = sortedTransactions.find((t) => t.transactionID === transaction.transactionID);
-                        return originalTransaction ?? transaction;
-                    });
-
+            <View style={[listHorizontalPadding, styles.gap2, styles.pb4]}>
+                {sortedTransactions.map((transaction) => {
                     return (
-                        <View key={group.groupKey}>
-                            <MoneyRequestReportGroupHeader
-                                group={group}
-                                currency={report?.currency ?? ''}
-                                isGroupedByTag={currentGroupBy === CONST.REPORT_LAYOUT.GROUP_BY.TAG}
-                                isSelectionModeEnabled={isMobileSelectionModeEnabled}
-                                isSelected={isGroupSelected(group.transactions)}
-                                isIndeterminate={isGroupIndeterminate(group.transactions)}
-                                onToggleSelection={() => toggleGroupSelection(group.transactions)}
-                            />
-                            <View style={styles.gap2}>
-                                {groupTransactionsWithHighlight.map((transaction) => {
-                                    return (
-                                        <MoneyRequestReportTransactionItem
-                                            key={transaction.transactionID}
-                                            transaction={transaction}
-                                            violations={filteredViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`]}
-                                            columns={columnsToShow}
-                                            report={report}
-                                            isSelectionModeEnabled={isMobileSelectionModeEnabled}
-                                            toggleTransaction={toggleTransaction}
-                                            isSelected={isTransactionSelected(transaction.transactionID)}
-                                            handleOnPress={handleOnPress}
-                                            handleLongPress={handleLongPress}
-                                            dateColumnSize={dateColumnSize}
-                                            amountColumnSize={amountColumnSize}
-                                            taxAmountColumnSize={taxAmountColumnSize}
-                                            // if we add few new transactions, then we need to scroll to the first one
-                                            scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
-                                            forwardedFSClass={transactionItemFSClass}
-                                            onArrowRightPress={handleArrowRightPress}
-                                        />
-                                    );
-                                })}
-                            </View>
-                        </View>
+                        <MoneyRequestReportTransactionItem
+                            key={transaction.transactionID}
+                            transaction={transaction}
+                            violations={filteredViolations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`]}
+                            columns={columnsToShow}
+                            report={report}
+                            isSelectionModeEnabled={isMobileSelectionModeEnabled}
+                            toggleTransaction={toggleTransaction}
+                            isSelected={isTransactionSelected(transaction.transactionID)}
+                            handleOnPress={handleOnPress}
+                            handleLongPress={handleLongPress}
+                            dateColumnSize={dateColumnSize}
+                            amountColumnSize={amountColumnSize}
+                            taxAmountColumnSize={taxAmountColumnSize}
+                            // if we add few new transactions, then we need to scroll to the first one
+                            scrollToNewTransaction={transaction.transactionID === newTransactions?.at(0)?.transactionID ? scrollToNewTransaction : undefined}
+                            forwardedFSClass={transactionItemFSClass}
+                            onArrowRightPress={handleArrowRightPress}
+                        />
                     );
                 })}
             </View>

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -7528,18 +7528,6 @@ ${
         employeeInviteMessage: ({name}: EmployeeInviteMessageParams) =>
             `# ${name} hat dich eingeladen, Expensify auszuprobieren\nHey! Ich habe uns gerade *3 Monate kostenlos* gesichert, um Expensify auszuprobieren, den schnellsten Weg, um Ausgaben zu verwalten.\n\nHier ist ein *Testbeleg*, um dir zu zeigen, wie es funktioniert:`,
     },
-    reportLayout: {
-        reportLayout: 'Berichtslayout',
-        groupByLabel: 'Gruppieren nach:',
-        selectGroupByOption: 'Wählen Sie aus, wie Berichtsausgaben gruppiert werden sollen',
-        groupHeader: ({groupName}: {groupName: string}) => `${groupName}`,
-        groupHeaderHint: ({action}: {action: string}) => `${action} diese Gruppe`,
-        selectGroup: ({groupName}: {groupName: string}) => `Alle Ausgaben in ${groupName} auswählen`,
-        groupBy: {
-            category: 'Kategorie',
-            tag: 'Schlagwort',
-        },
-    },
     export: {
         basicExport: 'Basis Export',
         reportLevelExport: 'Alle Daten - Berichtsebene',

src/languages/de.ts

@@ -6555,18 +6555,6 @@ const translations = {
             allMatchingItemsSelected: 'All matching items selected',
         },
     },
-    reportLayout: {
-        reportLayout: 'Report layout',
-        groupByLabel: 'Group by:',
-        selectGroupByOption: 'Select how to group report expenses',
-        groupHeader: ({groupName}: {groupName: string}) => `${groupName}`,
-        groupHeaderHint: ({action}: {action: string}) => `${action} this group`,
-        selectGroup: ({groupName}: {groupName: string}) => `Select all expenses in ${groupName}`,
-        groupBy: {
-            category: 'Category',
-            tag: 'Tag',
-        },
-    },
     genericErrorPage: {
         title: 'Uh-oh, something went wrong!',
         body: {