[Bookings][Part 5] Booking details split view navigation (#16202)

Author: RafaelKayumov

WooCommerce/Classes/Bookings/BookingList/BookingListContainerView.swift

@@ -3,38 +3,37 @@ import struct Yosemite.Booking
 
 struct BookingListContainerView: View {
     @ObservedObject private var viewModel: BookingListContainerViewModel
+    @Binding var selectedBooking: Booking?
 
-    init(viewModel: BookingListContainerViewModel) {
+    init(viewModel: BookingListContainerViewModel, selectedBooking: Binding<Booking?>) {
         self.viewModel = viewModel
+        self._selectedBooking = selectedBooking
     }
 
     var body: some View {
-        NavigationStack {
-            VStack(spacing: 0) {
-                headerView
-                TabView(selection: $viewModel.selectedTab) {
-                    ForEach(BookingListTab.allCases, id: \.rawValue) { tab in
-                        BookingListView(viewModel: viewModel.listViewModel(for: tab))
-                            .tag(tab)
-                    }
+        VStack(spacing: 0) {
+            headerView
+            TabView(selection: $viewModel.selectedTab) {
+                ForEach(BookingListTab.allCases, id: \.rawValue) { tab in
+                    BookingListView(
+                        viewModel: viewModel.listViewModel(for: tab),
+                        selectedBooking: $selectedBooking
+                    )
+                    .tag(tab)
                 }
-                .tabViewStyle(.page(indexDisplayMode: .never))
             }
-            .navigationTitle(Localization.viewTitle)
-            .toolbar {
-                ToolbarItem(placement: .confirmationAction) {
-                    Button {
-                        // TODO
-                    } label: {
-                        Image(systemName: "magnifyingglass")
-                    }
+            .tabViewStyle(.page(indexDisplayMode: .never))
+        }
+        .navigationTitle(Localization.viewTitle)
+        .toolbar {
+            ToolbarItem(placement: .confirmationAction) {
+                Button {
+                    // TODO
+                } label: {
+                    Image(systemName: "magnifyingglass")
                 }
             }
         }
-        .navigationDestination(for: Booking.self) { booking in
-            let viewModel = BookingDetailsViewModel(booking: booking)
-            BookingDetailsView(viewModel)
-        }
     }
 }
 

WooCommerce/Classes/Bookings/BookingList/BookingListView.swift

@@ -3,9 +3,11 @@ import struct Yosemite.Booking
 
 struct BookingListView: View {
     @ObservedObject private var viewModel: BookingListViewModel
+    @Binding var selectedBooking: Booking?
 
-    init(viewModel: BookingListViewModel) {
+    init(viewModel: BookingListViewModel, selectedBooking: Binding<Booking?>) {
         self.viewModel = viewModel
+        self._selectedBooking = selectedBooking
     }
 
     var body: some View {
@@ -31,22 +33,20 @@ struct BookingListView: View {
 
 private extension BookingListView {
     var bookingList: some View {
-        ScrollView {
-            LazyVStack(spacing: 0) {
-                ForEach(viewModel.bookings) { item in
-                    NavigationLink(value: item) {
-                        bookingItem(item)
-                    }
-                    .buttonStyle(.plain)
-                }
-
-                InfiniteScrollIndicator(showContent: viewModel.shouldShowBottomActivityIndicator)
-                    .padding(.top, Layout.viewPadding)
-                    .onAppear {
-                        viewModel.onLoadNextPageAction()
-                    }
+        List(selection: $selectedBooking) {
+            ForEach(viewModel.bookings) { item in
+                bookingItem(item)
+                    .tag(item)
             }
+
+            InfiniteScrollIndicator(showContent: viewModel.shouldShowBottomActivityIndicator)
+                .padding(.top, Layout.viewPadding)
+                .onAppear {
+                    viewModel.onLoadNextPageAction()
+                }
         }
+        .listStyle(.plain)
+        .accentColor(Color(.listSelectedBackground))
         .refreshable {
             await viewModel.onRefreshAction()
         }
@@ -61,6 +61,7 @@ private extension BookingListView {
                     .font(.body)
                     .fontWeight(.medium)
                     .frame(maxWidth: .infinity, alignment: .leading)
+                    .foregroundStyle(Color.primary)
 
                 // TODO: fetch bookable products & customer to get names or wait for API update
                 Text(String(format: "%@  •  %@", "Women's Hair cut", "Marianne"))
@@ -76,17 +77,13 @@ private extension BookingListView {
                     Spacer()
                 }
             }
-            .padding(Layout.viewPadding)
-
-            Divider()
-                .padding(.leading, Layout.viewPadding)
         }
-        .background(Color(.listForeground(modal: false))) // TODO: update selected background color as part of selection handling
     }
 
     func statusBadge(text: String, color: Color) -> some View {
         Text(text)
             .font(.caption2)
+            .foregroundStyle(Color.primary)
             .padding(.horizontal, 8)
             .padding(.vertical, 4)
             .background(color.clipShape(RoundedRectangle(cornerRadius: 4)))

WooCommerce/Classes/Bookings/BookingsTabView.swift

@@ -1,4 +1,5 @@
 import SwiftUI
+import struct Yosemite.Booking
 
 /// Hosting view for `BookingsTabView`
 ///
@@ -37,19 +38,24 @@ private extension BookingsTabViewHostingController {
 /// Main content of the Bookings tab
 ///
 struct BookingsTabView: View {
-    @State private var visibility: NavigationSplitViewVisibility = .all
-
-    private let siteID: Int64
+    @State private var selectedBooking: Booking?
+    @State private var visibility: NavigationSplitViewVisibility = .automatic
+    @StateObject private var bookingListContainerViewModel: BookingListContainerViewModel
 
     init(siteID: Int64) {
-        self.siteID = siteID
+        _bookingListContainerViewModel = StateObject(wrappedValue: BookingListContainerViewModel(siteID: siteID))
     }
 
     var body: some View {
         NavigationSplitView(columnVisibility: $visibility) {
-            BookingListContainerView(viewModel: BookingListContainerViewModel(siteID: siteID))
+            BookingListContainerView(viewModel: bookingListContainerViewModel, selectedBooking: $selectedBooking)
         } detail: {
-            Text("Booking Detail Screen")
+            if let selectedBooking {
+                let viewModel = BookingDetailsViewModel(booking: selectedBooking)
+                BookingDetailsView(viewModel)
+            } else {
+                Text("Select a booking to see details.")
+            }
         }
         .navigationSplitViewStyle(.balanced)
     }

WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift

@@ -3,7 +3,7 @@ import Networking
 
 struct BookingDetailsView: View {
     @Environment(\.safeAreaInsets) var safeAreaInsets: EdgeInsets
-    @Environment(\.dismiss) private var dismiss
+
     @State private var showingOptions = false
     @State private var showingStatusSheet = false
     @State private var showingCancelAlert = false
@@ -43,15 +43,7 @@ struct BookingDetailsView: View {
         .navigationBarTitleDisplayMode(.inline)
         .navigationTitle(viewModel.navigationTitle)
         .background(Color(uiColor: .systemGroupedBackground))
-        .navigationBarBackButtonHidden(true)
         .toolbar {
-            ToolbarItem(placement: .navigationBarLeading) {
-                Button {
-                    dismiss()
-                } label: {
-                    Image(systemName: "chevron.backward")
-                }
-            }
             ToolbarItem(placement: .navigationBarTrailing) {
                 Button {
                     showingOptions = true
@@ -71,6 +63,11 @@ struct BookingDetailsView: View {
                 }
             }
         }
+        .if(UIDevice.current.userInterfaceIdiom == .phone) {
+            /// Removes back button title for iPhone layout
+            /// Applied only for phones because it affects navigation title positioning on tablets
+            $0.toolbarRole(.editor)
+        }
         .sheet(isPresented: $showingStatusSheet) {
             UpdateAttendanceStatusView { selectedStatus in
                 print("Selected status: \(selectedStatus)")