[Due for payment 2025-09-17] Missing visual divider between preset date filters and radio-based date options

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.0-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @JmillsExpensify
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to "Reports"
2. Tap on the Advanced filter
3. Scroll down and tap on the "Paid" section
4. Observe the date filter options:
   This month
   Last month
   On, After, Before

Expected Result:

There should be a clear visual divider between:
Preset options (This month, Last month)
Custom date options (On, After, Before)

Actual Result:

All options appear as a single group with no visual distinction.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[M00rish]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Missing visual divider between preset date filters and radio-based date options

What is the root cause of that problem?

the horizontal rule is not passed as prop :

App/src/components/Search/SearchDatePresetFilterBasePage.tsx

Lines 113 to 119 in d4645bf

	<SearchDatePresetFilterBase
	ref={searchDatePresetFilterBaseRef}
	defaultDateValues={defaultDateValues}
	selectedDateModifier={selectedDateModifier}
	onSelectDateModifier={setSelectedDateModifier}
	presets={presets}
	/>

What changes do you think we should make in order to solve the problem?

add if presets exist:

            <ScrollView contentContainerStyle={[styles.flexGrow1]}>
                <SearchDatePresetFilterBase
                    ref={searchDatePresetFilterBaseRef}
                    defaultDateValues={defaultDateValues}
                    selectedDateModifier={selectedDateModifier}
                    onSelectDateModifier={setSelectedDateModifier}
                    presets={presets}
                    shouldShowHorizontalRule={presets.length>0}
                />
            </ScrollView>

Or use Loadash Empty function
or just pass as true since getDatePresets returns some by default

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

[lorretheboy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Missing visual divider between preset date filters and radio-based date options

What is the root cause of that problem?

We don't enable shouldShowHorizontalRule for SearchDatePresetFilterBase if presets length is >= 1

App/src/components/Search/SearchDatePresetFilterBasePage.tsx

Line 113 in f95c3af

<SearchDatePresetFilterBase

What changes do you think we should make in order to solve the problem?

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add shouldShowHorizontalRule true when presets exist >= 1 (Should not use !!presets because it is still return true when presets is empty [])

                    shouldShowHorizontalRule={!!presets?.length}

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[lorretheboy]

Note for C+: The first proposal has updated their proposal to correct their solution without post a notification for others. The original solution was not correct.

The updated version is after my proposal

[Eskalifer1]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Missing visual divider between preset date filters and radio-based date options

What is the root cause of that problem?

Currently, this component displays Divider only when we pass this value as props, and by default it is not displayed:

App/src/components/Search/SearchDatePresetFilterBase.tsx

Lines 163 to 168 in 8dbf5be

	{shouldShowHorizontalRule && (
	<SpacerView
	shouldShow
	style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
	/>
	)}

But the problem is that this component is currently used in two places, and in both cases the same value (presets.length) is used, which we can get inside this component. Here are examples:

1. In this case, it is used as a pop-up on the search page:
   

   App/src/components/Search/FilterDropdowns/DateSelectPopup.tsx

   Line 40 in 8dbf5be

   const shouldShowHorizontalRule = !!presets?.length;

   
   

   App/src/components/Search/FilterDropdowns/DateSelectPopup.tsx

   Lines 90 to 97 in 8dbf5be

   	<SearchDatePresetFilterBase
   	ref={searchDatePresetFilterBaseRef}
   	defaultDateValues={value}
   	selectedDateModifier={selectedDateModifier}
   	onSelectDateModifier={setSelectedDateModifier}
   	presets={presets}
   	shouldShowHorizontalRule={shouldShowHorizontalRule}
   	/>

2. In this case, it is used as a page component that is used on many pages in Advanced Search:
   

   App/src/components/Search/SearchDatePresetFilterBasePage.tsx

   Lines 113 to 119 in 8dbf5be

   	<SearchDatePresetFilterBase
   	ref={searchDatePresetFilterBaseRef}
   	defaultDateValues={defaultDateValues}
   	selectedDateModifier={selectedDateModifier}
   	onSelectDateModifier={setSelectedDateModifier}
   	presets={presets}
   	/>

Later, this component is used on the Approved, Paid, Exported, and other pages.

And here we run into a problem: if we add this parameter again:

      shouldShowHorizontalRule={!!presets?.length}

This results in code duplication, even though it is only in two places. However, in the future, we may want to use this component elsewhere, and then we will have to pass the same props with the same values for the third time, so we.

Even if we don't take into account that this component may be used elsewhere in the future (and this should always be taken into account), we are still violating the DRY principle, since we are duplicating the same code in two places, which could be moved inside the component so that it is not duplicated.

What changes do you think we should make in order to solve the problem?

I suggest making changes to the component itself so that it displays this Divider when we pass a value to shouldShowHorizontalRule (let's remove the default value of false), and if this parameter is not present, then we check if !!presets.length exists:
Let's remove = false from the props:

App/src/components/Search/SearchDatePresetFilterBase.tsx

Line 62 in 8dbf5be

function SearchDatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelectDateModifier, presets, shouldShowHorizontalRule = false, ref}: SearchDatePresetFilterBaseProps) {

Change the condition:

            {(shouldShowHorizontalRule ?? !!presets?.length) && (
                <SpacerView
                    shouldShow
                    style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
                />
            )}

With this approach, it will work automatically and we don't need to add any additional props to display the Divider, which may help avoid similar bugs in the future, as it will work automatically. However, if we suddenly need a specific condition to display this Divider, we can use the props shouldShowHorizontalRule

And then we can remove this prop in PopUp, which I gave as an example in RCA in the first point

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ikevin127 (External)