Skip to content

Bookings: Add search functionality for booking list #16215

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

Jump to bottom
Merged
merged 16 commits into from
Oct 13, 2025
Merged

Bookings: Add search functionality for booking list #16215

merged 16 commits into from
Oct 13, 2025

Conversation

@itsmeichigo
Copy link
Contributor

@itsmeichigo itsmeichigo commented Oct 7, 2025 •
edited
Loading

Closes WOOMOB-1393

Description

This PR adds the search functionality for booking list:

  • Updates the Networking and Yosemite to support searching bookings with keywords.
  • Updates the booking list container to show/hide the search bar upon tapping the search button. The solution is a bit of a workaround so there will be warning in Xcode console - please feel free to suggest a better solution.
  • Creates and send view model for the search results from the list container.
  • Displays search results on the booking list when search query is not empty.

Apologies for the large changes, half of them come from tests.

Testing steps

  • Log in to a CIAB store with existing bookings.
  • Confirm that the booking list still loads data normally by default. Pull to refresh and pagination still works correctly.
  • Tap on the search button, confirm that the search bar is displayed.
  • Enter some text in the search bar, confirm that the search results are displayed.
  • When there are no search results, confirm that the empty state matches the design.
  • Pull to refresh the empty state, confirm that the search request is made with the first page.
  • Enter some keyword matching existing bookings' product names. Confirm that pagination works for the search results.

Testing information

Screenshots

Simulator.Screen.Recording.-.iPhone.17.-.2025-10-09.at.10.11.49.mov
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@itsmeichigo itsmeichigo added this to the 23.5 milestone Oct 7, 2025
@itsmeichigo itsmeichigo added the type: task An internally driven task. label Oct 7, 2025
@dangermattic
Copy link
Collaborator

dangermattic commented Oct 7, 2025 •
edited
Loading

1 Warning
⚠️ This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Oct 7, 2025 •
edited
Loading

App Icon📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

App NameWooCommerce iOS Prototype
Build Numberpr16215-a721ac5
Version23.4
Bundle IDcom.automattic.alpha.woocommerce
Commita721ac5
Installation URL79g4fosils7eo
 Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

Base automatically changed from woomob-1394-booking-list-empty-state-and-error-handling to trunk October 8, 2025 10:30
@itsmeichigo itsmeichigo marked this pull request as ready for review October 8, 2025 11:10
@itsmeichigo itsmeichigo marked this pull request as draft October 8, 2025 16:25
@itsmeichigo
Copy link
Contributor Author

itsmeichigo commented Oct 8, 2025

Converted to draft as the design has changed 🤦

@itsmeichigo itsmeichigo marked this pull request as ready for review October 9, 2025 06:29
RafaelKayumov
RafaelKayumov approved these changes Oct 9, 2025
View reviewed changes
Copy link
Contributor

@RafaelKayumov RafaelKayumov left a comment

Choose a reason for hiding this comment

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

Works as described. Pre approving.

Just some thoughts:
Are we aiming to persist lists state when opening search? Initially I was thinking about just extending the existing lists by adding search capabilities. I.e. entering the search mode would have meant using the same lists but just displaying the search bar and applying the search term.

Another question - is it possible to animate the list as just a "lift up" when search mode is opening? I'm not sure how flexible is the animation there.
Currently the navigation bar turns into the thinner search bar, so the list shifts up a bit. But the animation looks like:

  • Open search: List fade out + Search fade in
  • Close search: List re-appear lower and fade in + move up
AnimationDemo.mov

@itsmeichigo
Copy link
Contributor Author

itsmeichigo commented Oct 13, 2025

Are we aiming to persist lists state when opening search? Initially I was thinking about just extending the existing lists by adding search capabilities. I.e. entering the search mode would have meant using the same lists but just displaying the search bar and applying the search term.

My idea is to keep a separation of concern as the search mode requires only networking data (no storage) while pagination is needed. I started out keeping search state in the booking list but then it ended up with a lot of conditional checks, so I moved the search states to a separate view model for easier maintainance.

Another question - is it possible to animate the list as just a "lift up" when search mode is opening? I'm not sure how flexible is the animation there.

My current solution is a workaround to show/hide the search bar, which comes with a rather abrupt animation. The default behavior with searchable is that the search bar will always be present on the top, but that doesn't match the design.

Since our deadline is tight, how about keeping the current behavior and revisit the UX later when the first iteration is shipped? Also, if you have some suggestion on how we can implemented the desired UX, please also share it and we can implement it later.

@itsmeichigo
Copy link
Contributor Author

itsmeichigo commented Oct 13, 2025 •
edited
Loading

@RafaelKayumov I fixed the animation issue by moving the searchable modifier to the list view. LMK what you think 🙏

Edit: actually the search bar cannot be hidden again after dismissing search. I'm not sure which UX is better.

@RafaelKayumov
Copy link
Contributor

RafaelKayumov commented Oct 13, 2025

@RafaelKayumov I fixed the animation issue by moving the searchable modifier to the list view. LMK what you think 🙏

Edit: actually the search bar cannot be hidden again after dismissing search. I'm not sure which UX is better.

Unfortunately I don't have a solution on top of my mind. I experimented with the if modifier. I was able to hide the search bar after dismissing the search. But the state change was snappy and ugly - first the search bar smoothly went down below the header title and then disappeared without animation.

Let's unroll the f440191 and go as-is for now :(

@itsmeichigo itsmeichigo enabled auto-merge October 13, 2025 14:30
@itsmeichigo itsmeichigo merged commit e769dc5 into trunk Oct 13, 2025
13 checks passed
@itsmeichigo itsmeichigo deleted the woomob-1393-booking-list-search branch October 13, 2025 14:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@RafaelKayumov RafaelKayumov Awaiting requested review from RafaelKayumov

Assignees

No one assigned

Labels

type: task An internally driven task.

Projects

None yet

Milestone

23.5

Development

Successfully merging this pull request may close these issues.

5 participants

@itsmeichigo @dangermattic @wpmobilebot @RafaelKayumov