Use booking status for badge in header

RafaelKayumov · RafaelKayumov · commit 40a200d114ac · 2025-10-17T14:21:30.000+03:00
diff --git a/WooCommerce/Classes/ViewModels/Booking Details/BookingDetailsViewModel+Status.swift b/WooCommerce/Classes/ViewModels/Booking Details/BookingDetailsViewModel+Status.swift
diff --git a/WooCommerce/Classes/ViewModels/Booking Details/HeaderContent.swift b/WooCommerce/Classes/ViewModels/Booking Details/HeaderContent.swift
@@ -7,7 +7,7 @@ import struct Yosemite.Address
 extension BookingDetailsViewModel {
     final class HeaderContent: ObservableObject {
         @Published private(set) var bookingDate: String = ""
-        @Published private(set) var status: [Status] = []
+        @Published private(set) var status: [String] = []
         @Published private(set) var serviceAndCustomerLine: String = ""
 
         func update(with booking: Booking) {
@@ -17,7 +17,12 @@ extension BookingDetailsViewModel {
                 timeZone: BookingListTab.utcTimeZone
             )
             serviceAndCustomerLine = booking.summaryText
-            status = [.booked, .payAtLocation]
+
+            let bookingStatus = booking.bookingStatus
+            status = [
+                "Booked",
+                booking.bookingStatus.localizedTitle
+            ]
         }
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift b/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/BookingDetailsView.swift
@@ -18,6 +18,12 @@ struct BookingDetailsView: View {
         static let headerBadgesAdditionalTopPadding: CGFloat = 4
         static let sectionFooterTextVerticalPadding: CGFloat = 8
         static let rowTextVerticalPadding: CGFloat = 11
+        static let defaultBadgeColor = Color(
+            uiColor: .init(
+                light: .systemGray6,
+                dark: .systemGray5
+            )
+        )
     }
 
     enum TextFont {
diff --git a/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/HeaderView.swift b/WooCommerce/Classes/ViewRelated/Bookings/Booking Details/HeaderView.swift
@@ -17,12 +17,14 @@ extension BookingDetailsView {
                         .foregroundColor(.secondary)
                 }
                 HStack {
-                    ForEach(content.status, id: \.self) { status in
-                        Text(status.labelText)
+                    ForEach(content.status, id: \.self) { statusString in
+                        Text(statusString)
                             .font(.caption2)
                             .padding(.vertical, 4.5)
                             .padding(.horizontal, 8)
-                            .background(status.labelColor)
+                            .background(
+                                BookingDetailsView.Layout.defaultBadgeColor
+                            )
                             .cornerRadius(4)
                     }
                 }
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
@@ -997,7 +997,6 @@
 		2D05D1A22E82D235004111FD /* HeaderContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D05D1A12E82D233004111FD /* HeaderContent.swift */; };
 		2D05D1A42E82D266004111FD /* AppointmentDetailsContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D05D1A32E82D25F004111FD /* AppointmentDetailsContent.swift */; };
 		2D05D1A52E82D3F6004111FD /* BookingDetailsViewModel+SectionContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D05D1A02E82D1EF004111FD /* BookingDetailsViewModel+SectionContent.swift */; };
-		2D05D1A72E82D49F004111FD /* BookingDetailsViewModel+Status.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D05D1A62E82D49D004111FD /* BookingDetailsViewModel+Status.swift */; };
 		2D05E80F2E86BE50004111FD /* AttendanceContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D05E80E2E86BE4F004111FD /* AttendanceContent.swift */; };
 		2D05E8112E8A9905004111FD /* CustomerContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D05E8102E8A98FE004111FD /* CustomerContent.swift */; };
 		2D05E8132E8AADB9004111FD /* PaymentContent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D05E8122E8AADB2004111FD /* PaymentContent.swift */; };
@@ -3906,7 +3905,6 @@
 		2D05D1A02E82D1EF004111FD /* BookingDetailsViewModel+SectionContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "BookingDetailsViewModel+SectionContent.swift"; sourceTree = "<group>"; };
 		2D05D1A12E82D233004111FD /* HeaderContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HeaderContent.swift; sourceTree = "<group>"; };
 		2D05D1A32E82D25F004111FD /* AppointmentDetailsContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppointmentDetailsContent.swift; sourceTree = "<group>"; };
-		2D05D1A62E82D49D004111FD /* BookingDetailsViewModel+Status.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "BookingDetailsViewModel+Status.swift"; sourceTree = "<group>"; };
 		2D05E80E2E86BE4F004111FD /* AttendanceContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AttendanceContent.swift; sourceTree = "<group>"; };
 		2D05E8102E8A98FE004111FD /* CustomerContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomerContent.swift; sourceTree = "<group>"; };
 		2D05E8122E8AADB2004111FD /* PaymentContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaymentContent.swift; sourceTree = "<group>"; };
@@ -7976,7 +7974,6 @@
 				2D05D1A12E82D233004111FD /* HeaderContent.swift */,
 				2D05D1A32E82D25F004111FD /* AppointmentDetailsContent.swift */,
 				2DAC251F2E82A02C008521AF /* BookingDetailsViewModel.swift */,
-				2D05D1A62E82D49D004111FD /* BookingDetailsViewModel+Status.swift */,
 				2D05D19E2E82D1A3004111FD /* BookingDetailsViewModel+Section.swift */,
 				2D05D1A02E82D1EF004111FD /* BookingDetailsViewModel+SectionContent.swift */,
 				2D05337D2E951A62004111FD /* BookingDetailsViewModel+PriceFormatting.swift */,
@@ -15071,7 +15068,6 @@
 				010F7D8D2E7A8447002B02EA /* ProductImageThumbnail+Extensions.swift in Sources */,
 				26A630FE253F63C300CBC3B1 /* RefundableOrderItem.swift in Sources */,
 				CEE006052077D1280079161F /* SummaryTableViewCell.swift in Sources */,
-				2D05D1A72E82D49F004111FD /* BookingDetailsViewModel+Status.swift in Sources */,
 				DEE215342D1297CD004A11F3 /* UserDefaults+EditStoreList.swift in Sources */,
 				CE63024E2BAC664900E3325C /* EmailView.swift in Sources */,
 				DE4B3B5826A7041800EEF2D8 /* EdgeInsets+Woo.swift in Sources */,

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ import struct Yosemite.Address`
`7`	`7`	`extension BookingDetailsViewModel {`
`8`	`8`	`final class HeaderContent: ObservableObject {`
`9`	`9`	`@Published private(set) var bookingDate: String = ""`
`10`		`- @Published private(set) var status: [Status] = []`
	`10`	`+ @Published private(set) var status: [String] = []`
`11`	`11`	`@Published private(set) var serviceAndCustomerLine: String = ""`
`12`	`12`
`13`	`13`	`func update(with booking: Booking) {`
`@@ -17,7 +17,12 @@ extension BookingDetailsViewModel {`
`17`	`17`	`timeZone: BookingListTab.utcTimeZone`
`18`	`18`	`)`
`19`	`19`	`serviceAndCustomerLine = booking.summaryText`
`20`		`- status = [.booked, .payAtLocation]`
	`20`	`+`
	`21`	`+ let bookingStatus = booking.bookingStatus`
	`22`	`+ status = [`
	`23`	`+ "Booked",`
	`24`	`+ booking.bookingStatus.localizedTitle`
	`25`	`+ ]`
`21`	`26`	`}`
`22`	`27`	`}`
`23`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,12 +17,14 @@ extension BookingDetailsView {`
`17`	`17`	`.foregroundColor(.secondary)`
`18`	`18`	`}`
`19`	`19`	`HStack {`
`20`		`- ForEach(content.status, id: \.self) { status in`
`21`		`- Text(status.labelText)`
	`20`	`+ ForEach(content.status, id: \.self) { statusString in`
	`21`	`+ Text(statusString)`
`22`	`22`	`.font(.caption2)`
`23`	`23`	`.padding(.vertical, 4.5)`
`24`	`24`	`.padding(.horizontal, 8)`
`25`		`- .background(status.labelColor)`
	`25`	`+ .background(`
	`26`	`+ BookingDetailsView.Layout.defaultBadgeColor`
	`27`	`+ )`
`26`	`28`	`.cornerRadius(4)`
`27`	`29`	`}`
`28`	`30`	`}`