Bookings: Split summary text into 2 lines for booking details header (#16324)

Author: itsmeichigo

WooCommerce/Classes/Extensions/Booking+Helpers.swift

@@ -2,14 +2,18 @@ import Foundation
 import struct Yosemite.Booking
 
 extension Booking {
+    var productName: String? {
+        orderInfo?.productInfo?.name
+    }
+
+    var customerName: String {
+        guard let name = orderInfo?.customerInfo?.billingAddress.fullName else {
+            return Localization.guest
+        }
+        return name.isEmpty ? Localization.guest : name
+    }
+
     var summaryText: String {
-        let productName = orderInfo?.productInfo?.name
-        let customerName: String = {
-            guard let name = orderInfo?.customerInfo?.billingAddress.fullName else {
-                return Localization.guest
-            }
-            return name.isEmpty ? Localization.guest : name
-        }()
         return [productName, customerName]
             .compactMap { $0 }
             .joined(separator: "  •  ")

WooCommerce/Classes/ViewModels/Booking Details/HeaderContent.swift

@@ -11,15 +11,17 @@ extension BookingDetailsViewModel {
         @Published private(set) var bookingDate: String = ""
         @Published private(set) var attendanceStatus: BookingAttendanceStatus = .unknown
         @Published private(set) var bookingStatus: BookingStatus = .unknown
-        @Published private(set) var serviceAndCustomerLine: String = ""
+        @Published private(set) var serviceLine: String = ""
+        @Published private(set) var customerLine: String = ""
 
         func update(with booking: Booking) {
             bookingDate = booking.startDate.toString(
                 dateStyle: .short,
                 timeStyle: .short,
                 timeZone: BookingListTab.utcTimeZone
             )
-            serviceAndCustomerLine = booking.summaryText
+            serviceLine = booking.productName ?? ""
+            customerLine = booking.customerName
             attendanceStatus = booking.attendanceStatus
             bookingStatus = booking.bookingStatus
         }

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

@@ -14,8 +14,8 @@ struct BookingDetailsView: View {
     enum Layout {
         static let contentSidePadding: CGFloat = 16
         static let contentVerticalPadding: CGFloat = 16
-        static let headerContentVerticalPadding: CGFloat = 6
-        static let headerBadgesAdditionalTopPadding: CGFloat = 4
+        static let headerContentVerticalPadding: CGFloat = 2
+        static let headerBadgesAdditionalTopPadding: CGFloat = 6
         static let sectionFooterTextVerticalPadding: CGFloat = 8
         static let rowTextVerticalPadding: CGFloat = 11
     }

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

@@ -11,9 +11,14 @@ extension BookingDetailsView {
                         .font(TextFont.bodyMedium)
                         .foregroundColor(.primary)
                 }
-                if !content.serviceAndCustomerLine.isEmpty {
-                    Text(content.serviceAndCustomerLine)
-                        .font(.footnote.weight(.medium))
+                if !content.serviceLine.isEmpty {
+                    Text(content.serviceLine)
+                        .font(.body)
+                        .foregroundColor(.secondary)
+                }
+                if !content.customerLine.isEmpty {
+                    Text(content.customerLine)
+                        .font(.body)
                         .foregroundColor(.secondary)
                 }
                 HStack {

WooCommerce/WooCommerceTests/ViewRelated/Bookings/BookingDetailsViewModelTests.swift

@@ -126,7 +126,7 @@ final class BookingDetailsViewModelTests: XCTestCase {
         XCTAssertFalse(hasCustomerSection)
     }
 
-    func test_header_content_uses_booking_summary_text() {
+    func test_header_content_uses_correct_contents() {
         // Given
         let billingAddress = Address.fake().copy(
             firstName: "Jane",
@@ -159,7 +159,8 @@ final class BookingDetailsViewModelTests: XCTestCase {
             return
         }
 
-        XCTAssertEqual(headerContent.serviceAndCustomerLine, "Massage Therapy  •  Jane Smith")
+        XCTAssertEqual(headerContent.serviceLine, "Massage Therapy")
+        XCTAssertEqual(headerContent.customerLine, "Jane Smith")
     }
 
     func test_customer_content_populated_from_billing_address() {