Skip to content

Conversation

@itsmeichigo
Copy link
Contributor

@itsmeichigo itsmeichigo commented Sep 26, 2025

Closes WOOMOB-1391

Description

This PR adds the basic UI for the booking list including:

  • Navigation bar with search button
  • Header bar with time tab and sort/filter buttons.
  • Booking list with refresh control and pagination.

A few things to be updated later:

  • Product name, customer name, and attendance status: these are to be added to the API later.
  • Booking status badge color: no clear design yet.
  • Selection of items.
  • Empty state and error handling: to be handled in a separate PR.

Known issues from my testing with simulator iOS 26:

  • The screen is built with SwiftUI so the UX is a bit different compared to Orders and Products tab. On these tabs, the navigation bar and the header view are not pulled down; the refresh control is displayed between the header and the list.
  • After refreshing the list, sometimes the navigation bar doesn't snap back.
    I'm keeping the current implementation for now to focus on wrapping the feature first.

Testing steps

  • Log in to a CIAB store with Woo Bookings plugin v2 and existing bookings.
  • Navigate to the Bookings tab and confirm that the UI is correct.
  • Confirm that the booking items displays correct start date and booking status. Please note: the web plugin displays dates in UTC while on the app we're displaying local timezone. I'm keeping this behavior to follow Android's.

Testing information

Tested with simulator iPhone 17 iOS 26.

Screenshots

Light mode Dark mode

  • 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.4 milestone Sep 26, 2025
@itsmeichigo itsmeichigo added the type: task An internally driven task. label Sep 26, 2025
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Sep 26, 2025

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 Numberpr16177-51d05dd
Version23.3
Bundle IDcom.automattic.alpha.woocommerce
Commit51d05dd
Installation URL46153sge7c0j8
Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

@itsmeichigo itsmeichigo marked this pull request as ready for review September 29, 2025 13:35
case cancelled
case pendingConfirmation = "pending-confirmation"
case confirmed
case inCart = "in-cart"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This status seems to not be supported so I'm removing it.

pageNumber: pageNumber,
pageSize: pageSize)
await upsertStoredBookingsInBackground(readOnlyBookings: bookings, siteID: siteID)
let shouldDeleteExistingBookings = pageNumber == Default.firstPageNumber
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is needed to clear obsolete items.

Base automatically changed from woomob-1391-booking-list-with-basic-details to trunk September 30, 2025 02:36
@itsmeichigo itsmeichigo marked this pull request as draft September 30, 2025 08:52
@itsmeichigo
Copy link
Contributor Author

Converted to draft to better support tabs.

@itsmeichigo
Copy link
Contributor Author

The UX of the tabs is weird so I'll hold off updating that. Making this PR ready again.

@itsmeichigo itsmeichigo marked this pull request as ready for review September 30, 2025 09:09
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.

LGTM. Left a non-blocking comment.

}
}
}
.refreshable {
Copy link
Contributor

Choose a reason for hiding this comment

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

Will there be a way to trigger a refresh from an empty state? I emulated an empty list response. Looks like there is no way to trigger the pull-to-refresh when the "No bookings found" is presented.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point! I updated WOOMOB-1394 to add a point about pull-to-refresh.

Comment on lines +168 to +174
func statusBadge(text: String, color: Color) -> some View {
Text(text)
.font(.caption2)
.padding(.horizontal, 8)
.padding(.vertical, 4)
.background(color.clipShape(RoundedRectangle(cornerRadius: 4)))
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm thinking about making this reusable since the details screen has the same header. I'll do that when it's merged.

@itsmeichigo itsmeichigo merged commit 5d91aaf into trunk Oct 1, 2025
15 checks passed
@itsmeichigo itsmeichigo deleted the woomob-1391-booking-list-ui-basic branch October 1, 2025 01:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: task An internally driven task.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants