Merge pull request #73 from woocommerce/issue/13-order-notes

Order: Displaying Notes

Author: mindgraffiti

.gitignore

@@ -5,7 +5,7 @@
 ## Build generated
 build/
 DerivedData/
-DerivedSources/
+WooCommerce/DerivedSources/
 
 ## Various settings
 *.pbxuser

Podfile

@@ -1,5 +1,3 @@
-source 'https://github.com/CocoaPods/Specs.git'
-
 inhibit_all_warnings!
 use_frameworks!
 

Podfile.lock

@@ -137,6 +137,6 @@ SPEC CHECKSUMS:
   WordPressUI: f2348649b63b5a9392a72b1d2f46dd1d72e80ad9
   wpxmlrpc: bfc572f62ce7ee897f6f38b098d2ba08732ecef4
 
-PODFILE CHECKSUM: 1b3a8db08db7d0827c6bad2b1ed8dc6ea93041f4
+PODFILE CHECKSUM: b0058ebc467be802babc234b85e02282da5d9d42
 
 COCOAPODS: 1.5.3

WooCommerce/Classes/Extensions/Date+Helpers.swift

@@ -0,0 +1,21 @@
+import Foundation
+
+/// DateFormatter Extensions
+///
+extension DateFormatter {
+
+    /// Default Formatters
+    ///
+    struct Defaults {
+
+        /// Date And Time Formatter
+        ///
+        static let dateTimeFormatter: DateFormatter = {
+            let formatter = DateFormatter()
+            formatter.locale = Locale(identifier: "en_US_POSIX")
+            formatter.timeZone = TimeZone(identifier: "GMT")
+            formatter.dateFormat = "yyyy'-'MM'-'dd'T'HH:mm:ss"
+            return formatter
+        }()
+    }
+}

WooCommerce/Classes/Model/Order.swift

@@ -20,7 +20,7 @@ struct Order: Decodable {
     let items: [OrderItem]
     let currency: String
     let total: String
-    let notes: [OrderNote]?
+    var notes: [OrderNote]?
     let customerID: Int
     let customerNote: String?
     let couponLines: [CouponLine]?
@@ -314,14 +314,33 @@ extension OrderItem : Decodable {
 // MARK: -
 //
 struct OrderNote: Decodable {
-    let date: Date?
-    let contents: String?
-    let visibleToCustomers: Bool?
+    let identifier: Int
+    let dateCreated: String
+    let contents: String
+    let isCustomerNote: Bool
 
-    init(date: Date?, contents: String?, visibleToCustomers: Bool?) {
-        self.date = date
+    init(identifier: Int, dateCreated: String, contents: String, isCustomerNote: Bool) {
+        self.identifier = identifier
+        self.dateCreated = dateCreated
         self.contents = contents
-        self.visibleToCustomers = visibleToCustomers
+        self.isCustomerNote = isCustomerNote
+    }
+
+    enum OrderNoteStructKeys: String, CodingKey {
+        case identifier = "id"
+        case dateCreated = "date_created"
+        case contents = "note"
+        case isCustomerNote = "customer_note"
+    }
+
+    init(from decoder: Decoder) throws {
+        let container = try decoder.container(keyedBy: OrderNoteStructKeys.self)
+        let identifier = try container.decode(Int.self, forKey: .identifier)
+        let dateCreated = try container.decode(String.self, forKey: .dateCreated)
+        let contents = try container.decode(String.self, forKey: .contents)
+        let isCustomerNote = try container.decode(Bool.self, forKey: .isCustomerNote)
+
+        self.init(identifier: identifier, dateCreated: dateCreated, contents: contents, isCustomerNote: isCustomerNote)
     }
 }
 

WooCommerce/Classes/Styles/Style.swift

@@ -18,6 +18,7 @@ protocol Style {
     var buttonPrimaryColor: UIColor { get }
     var buttonPrimaryHighlightedColor: UIColor { get }
     var cellSeparatorColor: UIColor { get }
+    var wooGreyMid: UIColor { get }
 }
 
 // MARK: - WooCommerce's Default Style
@@ -37,6 +38,7 @@ class DefaultStyle: Style {
     let buttonPrimaryColor = UIColor(red: 0x96/255.0, green: 0x58/255.0, blue: 0x8A/255.0, alpha: 0xFF/255.0)
     let buttonPrimaryHighlightedColor = UIColor(red: 0x6E/255.0, green: 0x29/255.0, blue: 0x67/255.0, alpha: 0xFF/255.0)
     let cellSeparatorColor = UIColor.lightGray
+    let wooGreyMid = UIColor(red: 150.0/255.0, green: 150.0/255.0, blue: 150.0/255.0, alpha: 1.0)
 }
 
 
@@ -112,4 +114,8 @@ class StyleManager {
     static var cellSeparatorColor: UIColor {
         return active.cellSeparatorColor
     }
+
+    static var wooGreyMid: UIColor {
+        return active.wooGreyMid
+    }
 }

WooCommerce/Classes/ViewModels/OrderDetailsViewModel.swift

@@ -1,13 +1,16 @@
 import Foundation
 import UIKit
+import Gridicons
 
 class OrderDetailsViewModel {
     private let order: Order
     private let couponLines: [CouponLine]?
+    private let notes: [OrderNote]?
 
     init(order: Order) {
         self.order = order
         self.couponLines = order.couponLines
+        self.notes = order.notes
     }
 
     var summaryTitle: String {
@@ -75,9 +78,7 @@ class OrderDetailsViewModel {
         return Double(order.discountTotal) != 0 ? "−" + order.currencySymbol + order.discountTotal : nil
     }
 
-    var shippingLabel: String {
-        return NSLocalizedString("Shipping", comment: "Shipping label for payment view")
-    }
+    let shippingLabel = NSLocalizedString("Shipping", comment: "Shipping label for payment view")
 
     var shippingValue: String {
         return order.currencySymbol + order.shippingTotal
@@ -91,9 +92,7 @@ class OrderDetailsViewModel {
         return Double(order.totalTax) != 0 ? order.currencySymbol + order.totalTax : nil
     }
 
-    var totalLabel: String {
-        return NSLocalizedString("Total", comment: "Total label for payment view")
-    }
+    let totalLabel = NSLocalizedString("Total", comment: "Total label for payment view")
 
     var totalValue: String {
         return order.currencySymbol + order.total
@@ -103,6 +102,20 @@ class OrderDetailsViewModel {
         return NSLocalizedString("Payment of \(totalValue) received via \(order.paymentMethodTitle)", comment: "Payment of <currency symbol><payment total> received via (payment method title)")
     }
 
+    let addNoteIcon = Gridicon.iconOfType(.addOutline)
+
+    let addNoteText = NSLocalizedString("Add a note", comment: "Button text for adding a new order note")
+
+    var orderNotes: [OrderNoteViewModel] {
+        guard let notes = notes else {
+            return []
+        }
+
+        return notes.map { note in
+            return OrderNoteViewModel(with: note)
+        }
+    }
+
     /// MARK: Private
     ///
     private func summarizeCoupons(from lines: [CouponLine]?) -> String? {

WooCommerce/Classes/ViewModels/OrderNoteViewModel.swift

@@ -0,0 +1,39 @@
+import UIKit
+import Gridicons
+
+class OrderNoteViewModel {
+    let iconImage: UIImage
+    let iconColor: UIColor
+    private let formattedDate: Date?
+    private let jsonDate: String
+    let statusText: String
+    let contents: String
+
+    init(with orderNote: OrderNote) {
+        iconImage = Gridicon.iconOfType(.aside)
+        if orderNote.isCustomerNote {
+            iconColor = StyleManager.statusPrimaryBoldColor
+            statusText = NSLocalizedString("Note to customer", comment: "Labels an order note to let user know it's visible to the customer")
+        } else {
+            iconColor = StyleManager.wooGreyMid
+            statusText = NSLocalizedString("Private note", comment: "Labels an order note to let the user know it's private and not seen by the customer")
+        }
+
+        jsonDate = orderNote.dateCreated
+        let format = DateFormatter.Defaults.dateTimeFormatter
+        formattedDate = format.date(from: orderNote.dateCreated)
+
+        contents = orderNote.contents
+    }
+
+    var dateCreated: String? {
+        let formatter = DateFormatter()
+        formatter.dateStyle = .medium
+        formatter.timeStyle = .short
+
+        if let date = formattedDate {
+            return formatter.string(from: date)
+        }
+        return jsonDate
+    }
+}

WooCommerce/Classes/ViewRelated/Orders/OrderDetails/OrderDetailsViewController.swift

@@ -46,6 +46,14 @@ class OrderDetailsViewController: UIViewController {
         let infoRows: [Row] = billingIsHidden ? [.shippingAddress] : [.shippingAddress, .billingAddress, .billingPhone, .billingEmail]
         let infoSection = Section(title: NSLocalizedString("CUSTOMER INFORMATION", comment: "Customer info section title"), footer: infoFooter, rows: infoRows)
 
+        var noteRows: [Row] = [.addOrderNote]
+        if let notes = order.notes {
+            for _ in notes {
+                noteRows.append(.orderNote)
+            }
+        }
+        let orderNotesSection = Section(title: NSLocalizedString("ORDER NOTES", comment: "Order notes section title"), footer: nil, rows: noteRows)
+
         let paymentSection = Section(title: NSLocalizedString("PAYMENT", comment: "Payment section title"), footer: nil, rows: [.payment])
 
         // FIXME: this is temporary
@@ -54,10 +62,10 @@ class OrderDetailsViewController: UIViewController {
         // but order has customerNote as an optional property right now
         guard let customerNote = order.customerNote,
             !customerNote.isEmpty else {
-            sections = [summarySection, infoSection, paymentSection]
+            sections = [summarySection, infoSection, paymentSection, orderNotesSection]
             return
         }
-        sections = [summarySection, customerNoteSection, infoSection, paymentSection]
+        sections = [summarySection, customerNoteSection, infoSection, paymentSection, orderNotesSection]
     }
 
     func configureNibs() {
@@ -87,7 +95,7 @@ extension OrderDetailsViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let row = sections[indexPath.section].rows[indexPath.row]
         let cell = tableView.dequeueReusableCell(withIdentifier: row.reuseIdentifier, for: indexPath)
-        configure(cell, for: row)
+        configure(cell, for: row, at: indexPath)
         return cell
     }
 
@@ -136,13 +144,17 @@ extension OrderDetailsViewController: UITableViewDataSource {
 extension OrderDetailsViewController: UITableViewDelegate {
     func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
         tableView.deselectRow(at: indexPath, animated: true)
+
+        if sections[indexPath.section].rows[indexPath.row] == .addOrderNote {
+            // TODO: present modal for Add Note screen
+        }
     }
 }
 
 // MARK: - Extension
 //
 extension OrderDetailsViewController {
-    private func configure(_ cell: UITableViewCell, for row: Row) {
+    private func configure(_ cell: UITableViewCell, for row: Row, at indexPath: IndexPath) {
         switch cell {
         case let cell as SummaryTableViewCell:
             cell.configure(with: viewModel)
@@ -158,6 +170,10 @@ extension OrderDetailsViewController {
             configure(cell, for: .billingEmail)
         case let cell as PaymentTableViewCell:
             cell.configure(with: viewModel)
+        case let cell as AddItemTableViewCell:
+            cell.configure(image: viewModel.addNoteIcon, text: viewModel.addNoteText)
+        case let cell as OrderNoteTableViewCell where row == .orderNote:
+            cell.configure(with: viewModel.orderNotes[indexPath.row - 1])
         default:
             fatalError("Unidentified customer info row type")
         }
@@ -282,6 +298,8 @@ private extension OrderDetailsViewController {
         case billingAddress
         case billingPhone
         case billingEmail
+        case addOrderNote
+        case orderNote
         case payment
 
         var reuseIdentifier: String {
@@ -298,6 +316,10 @@ private extension OrderDetailsViewController {
                 return BillingDetailsTableViewCell.reuseIdentifier
             case .billingEmail:
                 return BillingDetailsTableViewCell.reuseIdentifier
+            case .addOrderNote:
+                return AddItemTableViewCell.reuseIdentifier
+            case .orderNote:
+                return OrderNoteTableViewCell.reuseIdentifier
             case .payment:
                 return PaymentTableViewCell.reuseIdentifier
             }

WooCommerce/Classes/ViewRelated/Orders/OrderDetails/OrderNoteTableViewCell.swift

@@ -0,0 +1,66 @@
+import UIKit
+
+class OrderNoteTableViewCell: UITableViewCell {
+
+    @IBOutlet private var iconButton: UIButton! {
+        didSet {
+            iconButton.layer.cornerRadius = iconButton.frame.width / 2
+            iconButton.tintColor = .white
+        }
+    }
+    @IBOutlet private var dateLabel: UILabel! {
+        didSet {
+            dateLabel.applyBodyStyle()
+        }
+    }
+    @IBOutlet private var statusLabel: UILabel! {
+        didSet {
+            statusLabel.applyBodyStyle()
+            statusLabel.textColor = StyleManager.wooGreyMid
+        }
+    }
+    @IBOutlet private var noteLabel: UILabel! {
+        didSet {
+            noteLabel.applyBodyStyle()
+        }
+    }
+
+    static let reuseIdentifier = "OrderNoteTableViewCell"
+
+    var dateCreated: String? {
+        get {
+            return dateLabel.text
+        }
+        set {
+            dateLabel.text = newValue
+        }
+    }
+
+    var statusText: String? {
+        get {
+            return statusLabel.text
+        }
+        set {
+            statusLabel.text = newValue
+        }
+    }
+
+    var contents: String? {
+        get {
+            return noteLabel.text
+        }
+        set {
+            noteLabel.text = newValue
+        }
+    }
+}
+
+extension OrderNoteTableViewCell {
+    func configure(with viewModel: OrderNoteViewModel) {
+        iconButton.setImage(viewModel.iconImage, for: .normal)
+        iconButton.backgroundColor = viewModel.iconColor
+        dateCreated = viewModel.dateCreated
+        statusText = viewModel.statusText
+        contents = viewModel.contents
+    }
+}