Merge pull request #2298 from woocommerce/issue/2279-order-details-rearrange-headers

Order Details → Rearrange Header Elements

Author: shiki

WooCommerce/Classes/Extensions/Date+Woo.swift

@@ -106,6 +106,12 @@ extension Date {
 
         return selfYear == otherYear
     }
+
+    /// Returns `true` if `self` is in the same day as `other`.
+    ///
+    func isSameDay(as other: Date, using calendar: Calendar = .current) -> Bool {
+        calendar.isDate(self, inSameDayAs: other)
+    }
 }
 
 

WooCommerce/Classes/Extensions/DateFormatter+Helpers.swift

@@ -138,4 +138,12 @@ extension DateFormatter {
         formatter.setLocalizedDateFormatFromTemplate("yyyy")
         return formatter
     }()
+
+    /// Localized date formatter that generates the time only. Example, “11:23 AM”.
+    ///
+    static let timeFormatter: DateFormatter = {
+        let formatter = DateFormatter()
+        formatter.setLocalizedDateFormatFromTemplate("hh:mm a")
+        return formatter
+    }()
 }

WooCommerce/Classes/ViewModels/Order Details/OrderDetailsDataSource.swift

@@ -33,21 +33,6 @@ final class OrderDetailsDataSource: NSObject {
     ///
     var trackingIsReachable: Bool = false
 
-    /// For example, #560 Pamela Nguyen
-    ///
-    var summaryTitle: String? {
-        if let billingAddress = order.billingAddress {
-            return "#\(order.number) \(billingAddress.firstName) \(billingAddress.lastName)"
-        }
-        return "#\(order.number)"
-    }
-
-    /// For example, Oct 1, 2019 at 2:31 PM
-    ///
-    private var summaryDateCreated: String {
-        return order.dateModified.relativelyFormattedUpdateString
-    }
-
     /// Closure to be executed when the cell was tapped.
     ///
     var onCellAction: ((CellActionType, IndexPath?) -> Void)?
@@ -506,18 +491,16 @@ private extension OrderDetailsDataSource {
     }
 
     private func configureSummary(cell: SummaryTableViewCell) {
-        cell.title = summaryTitle
-        cell.dateCreated = summaryDateCreated
+        let cellViewModel = SummaryTableViewCellViewModel(
+            order: order,
+            status: lookUpOrderStatus(for: order)
+        )
+
+        cell.configure(cellViewModel)
+
         cell.onEditTouchUp = { [weak self] in
             self?.onCellAction?(.summary, nil)
         }
-
-
-        let status = lookUpOrderStatus(for: order)?.status ?? OrderStatusEnum(rawValue: order.statusKey)
-        let statusName = lookUpOrderStatus(for: order)?.name ?? order.statusKey
-        let presentation = SummaryTableViewCellPresentation(status: status, statusName: statusName)
-
-        cell.display(presentation: presentation)
     }
 }
 

WooCommerce/Classes/ViewModels/Order Details/OrderDetailsViewModel.swift

@@ -32,10 +32,6 @@ final class OrderDetailsViewModel {
         return formatter.string(from: order.dateCreated)
     }
 
-    var summaryTitle: String? {
-        return dataSource.summaryTitle
-    }
-
     let productLeftTitle = NSLocalizedString("PRODUCT", comment: "Product section title")
 
     let productRightTitle = NSLocalizedString("QTY", comment: "Quantity abbreviation for section title")

WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTableViewCell.swift

@@ -39,7 +39,7 @@ final class OrderTableViewCell: UITableViewCell & SearchResultCell {
     /// Renders the specified Order ViewModel
     ///
     func configureCell(viewModel: OrderDetailsViewModel, orderStatus: OrderStatus?) {
-        titleLabel.text = viewModel.summaryTitle
+        titleLabel.text = title(for: viewModel.order)
         totalLabel.text = viewModel.totalFriendlyString
         dateCreatedLabel.text = viewModel.formattedDateCreated
 
@@ -95,7 +95,6 @@ final class OrderTableViewCell: UITableViewCell & SearchResultCell {
 // MARK: - Private
 //
 private extension OrderTableViewCell {
-
     /// Preserves the current Payment BG Color
     ///
     func preserveLabelColors(action: () -> Void) {
@@ -108,6 +107,22 @@ private extension OrderTableViewCell {
         paymentStatusLabel.layer.borderColor = borderColor
     }
 
+    /// For example, #560 Pamela Nguyen
+    ///
+    func title(for order: Order) -> String {
+        if let billingAddress = order.billingAddress {
+            return Localization.title(orderNumber: order.number,
+                                      firstName: billingAddress.firstName,
+                                      lastName: billingAddress.lastName)
+        }
+
+        return Localization.title(orderNumber: order.number)
+    }
+}
+
+// MARK: - Setup
+
+private extension OrderTableViewCell {
     func configureBackground() {
         backgroundColor = .listForeground
         selectedBackgroundView = UIView()
@@ -126,3 +141,25 @@ private extension OrderTableViewCell {
         dateCreatedLabel.applyCaption1Style()
     }
 }
+
+// MARK: - Constants
+
+private extension OrderTableViewCell {
+    enum Localization {
+        static func title(orderNumber: String, firstName: String, lastName: String) -> String {
+            let format = NSLocalizedString("#%1$@ %2$@ %3$@", comment: "In Order List,"
+                + " the pattern to show the order number and the full name. For example, “#123 John Doe”."
+                + " The %1$@ is the order number. The %2$@ is the first name. The %3$@ is the last name.")
+
+            return String.localizedStringWithFormat(format, orderNumber, firstName, lastName)
+        }
+
+        static func title(orderNumber: String) -> String {
+            let format = NSLocalizedString("#%@", comment: "In Order List,"
+                + " the pattern to show the order number. For example, “#123456”."
+                + " The %@ placeholder is the order number.")
+
+            return String.localizedStringWithFormat(format, orderNumber)
+        }
+    }
+}

WooCommerce/Classes/ViewRelated/Orders/Order Details/Order Summary Section/SummaryTableViewCell.swift

@@ -2,11 +2,67 @@ import UIKit
 import Yosemite
 import Gridicons
 
-struct SummaryTableViewCellPresentation {
-    let status: OrderStatusEnum
-    let statusName: String
-}
+/// The ViewModel for `SummaryTableViewCell`.
+///
+/// TODO This and that cell class should be renamed to be less ambiguous.
+///
+struct SummaryTableViewCellViewModel {
+    fileprivate struct OrderStatusPresentation {
+        let style: OrderStatusEnum
+        let title: String
+    }
+
+    private let billingAddress: Address?
+    private let dateCreated: Date
+    private let orderNumber: String
+
+    fileprivate let presentation: OrderStatusPresentation
+
+    private let calendar: Calendar
+
+    init(order: Order,
+         status: OrderStatus?,
+         calendar: Calendar = .current) {
+
+        billingAddress = order.billingAddress
+        dateCreated = order.dateCreated
+        orderNumber = order.number
+
+        presentation = OrderStatusPresentation(
+            style: status?.status ?? OrderStatusEnum(rawValue: order.statusKey),
+            title: status?.name ?? order.statusKey
+        )
 
+        self.calendar = calendar
+    }
+
+    /// The full name from the billing address
+    ///
+    var billedPersonName: String {
+        if let billingAddress = billingAddress {
+            return Localization.billedPerson(firstName: billingAddress.firstName,
+                                             lastName: billingAddress.lastName)
+        } else {
+            return ""
+        }
+    }
+
+    /// The date and the order number concatenated together. Example, “Jan 22, 2018 • #1587”.
+    ///
+    /// If the date is today, the time will be returned instead.
+    ///
+    var subtitle: String {
+        let formatter: DateFormatter = {
+            if dateCreated.isSameDay(as: Date(), using: calendar) {
+                return DateFormatter.timeFormatter
+            } else {
+                return DateFormatter.mediumLengthLocalizedDateFormatter
+            }
+        }()
+
+        return "\(formatter.string(from: dateCreated)) • #\(orderNumber)"
+    }
+}
 
 // MARK: - SummaryTableViewCell
 //
@@ -16,9 +72,9 @@ final class SummaryTableViewCell: UITableViewCell {
     ///
     @IBOutlet private weak var titleLabel: UILabel!
 
-    /// Label: Creation / Update Date
+    /// Shows the dateCreated and order number.
     ///
-    @IBOutlet private weak var createdLabel: UILabel!
+    @IBOutlet private weak var subtitleLabel: UILabel!
 
     /// Label: Payment Status
     ///
@@ -28,37 +84,22 @@ final class SummaryTableViewCell: UITableViewCell {
     ///
     @IBOutlet private var updateStatusButton: UIButton!
 
-    /// Title
-    ///
-    var title: String? {
-        get {
-            return titleLabel.text
-        }
-        set {
-            titleLabel.text = newValue
-        }
-    }
-
-    /// Date
-    ///
-    var dateCreated: String? {
-        get {
-            return createdLabel.text
-        }
-        set {
-            createdLabel.text = newValue
-        }
-    }
-
     /// Closure to be executed whenever the edit button is tapped.
     ///
     var onEditTouchUp: (() -> Void)?
 
+    func configure(_ viewModel: SummaryTableViewCellViewModel) {
+        titleLabel.text = viewModel.billedPersonName
+        subtitleLabel.text = viewModel.subtitle
+
+        display(presentation: viewModel.presentation)
+    }
+
     /// Displays the specified OrderStatus, and applies the right Label Style
     ///
-    func display(presentation: SummaryTableViewCellPresentation) {
-        paymentStatusLabel.applyStyle(for: presentation.status)
-        paymentStatusLabel.text = presentation.statusName
+    private func display(presentation: SummaryTableViewCellViewModel.OrderStatusPresentation) {
+        paymentStatusLabel.applyStyle(for: presentation.style)
+        paymentStatusLabel.text = presentation.title
     }
 
     // MARK: - Overridden Methods
@@ -115,8 +156,8 @@ private extension SummaryTableViewCell {
     func configureLabels() {
         titleLabel.applyHeadlineStyle()
         titleLabel.accessibilityIdentifier = "summary-table-view-cell-title-label"
-        createdLabel.applyFootnoteStyle()
-        createdLabel.accessibilityIdentifier = "summary-table-view-cell-created-label"
+        subtitleLabel.applyFootnoteStyle()
+        subtitleLabel.accessibilityIdentifier = "summary-table-view-cell-created-label"
         paymentStatusLabel.applyPaddedLabelDefaultStyles()
         paymentStatusLabel.accessibilityIdentifier = "summary-table-view-cell-payment-status-label"
     }
@@ -147,22 +188,16 @@ private extension SummaryTableViewCell {
     }
 }
 
+/// MARK: - Localization
 
-/// MARK: - Testability
-extension SummaryTableViewCell {
-    func getTitle() -> UILabel {
-        return titleLabel
-    }
-
-    func getCreatedLabel() -> UILabel {
-        return createdLabel
-    }
+private extension SummaryTableViewCellViewModel {
+    enum Localization {
+        static func billedPerson(firstName: String, lastName: String) -> String {
+            let format = NSLocalizedString("%1$@ %2$@", comment: "In Order Details,"
+                + " the pattern to show the billed person's full name. For example, “John Doe”."
+                + " The %1$@ is the first name. The %2$@ is the last name.")
 
-    func getStatusLabel() -> UILabel {
-        return paymentStatusLabel
-    }
-
-    func getEditButton() -> UIButton {
-        return updateStatusButton
+            return String.localizedStringWithFormat(format, firstName, lastName)
+        }
     }
 }