Merge pull request #5415 from woocommerce/issue/5289-icons

Add icons to rows on the Card Reader settings screen

Author: ctarda

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -408,6 +408,30 @@ extension UIImage {
         return UIImage(named: "card-reader-low-battery")!
     }
 
+    /// Shopping cart
+    ///
+    static var shoppingCartIcon: UIImage {
+        return UIImage(named: "icon-shopping-cart")!
+            .withRenderingMode(.alwaysTemplate)
+            .imageFlippedForRightToLeftLayoutDirection()
+    }
+
+    /// Credit card
+    ///
+    static var creditCardIcon: UIImage {
+        return UIImage(named: "icon-card")!
+            .withRenderingMode(.alwaysTemplate)
+            .imageFlippedForRightToLeftLayoutDirection()
+    }
+
+    /// Card Reader Manual
+    ///
+    static var cardReaderManualIcon: UIImage {
+        return UIImage(named: "icon-card-reader-manual")!
+            .withRenderingMode(.alwaysTemplate)
+            .imageFlippedForRightToLeftLayoutDirection()
+    }
+
     /// Files Download Icon
     ///
     static var cloudImage: UIImage {

WooCommerce/Classes/ViewRelated/Dashboard/Settings/In-Person Payments/InPersonPaymentsMenuViewController.swift

@@ -50,33 +50,36 @@ private extension InPersonPaymentsMenuViewController {
     ///
     func configure(_ cell: UITableViewCell, for row: Row, at indexPath: IndexPath) {
         switch cell {
-        case let cell as BasicTableViewCell where row == .orderCardReader:
+        case let cell as LeftImageTableViewCell where row == .orderCardReader:
             configureOrderCardReader(cell: cell)
-        case let cell as BasicTableViewCell where row == .manageCardReader:
+        case let cell as LeftImageTableViewCell where row == .manageCardReader:
             configureManageCardReader(cell: cell)
-        case let cell as BasicTableViewCell where row == .bbposChipper2XBTManual:
+        case let cell as LeftImageTableViewCell where row == .bbposChipper2XBTManual:
             configureBBPOSChipper2XBTManual(cell: cell)
         default:
             fatalError()
         }
     }
 
-    func configureOrderCardReader(cell: UITableViewCell) {
+    func configureOrderCardReader(cell: LeftImageTableViewCell) {
+        cell.imageView?.tintColor = .text
         cell.accessoryType = .disclosureIndicator
         cell.selectionStyle = .default
-        cell.textLabel?.text = NSLocalizedString("Order card reader", comment: "Navigates to Card Reader ordering screen")
+        cell.configure(image: .shoppingCartIcon, text: Localization.orderCardReader)
     }
 
-    func configureManageCardReader(cell: UITableViewCell) {
+    func configureManageCardReader(cell: LeftImageTableViewCell) {
+        cell.imageView?.tintColor = .text
         cell.accessoryType = .disclosureIndicator
         cell.selectionStyle = .default
-        cell.textLabel?.text = NSLocalizedString("Manage card reader", comment: "Navigates to Card Reader management screen")
+        cell.configure(image: .creditCardIcon, text: Localization.manageCardReader)
     }
 
-    func configureBBPOSChipper2XBTManual(cell: UITableViewCell) {
+    func configureBBPOSChipper2XBTManual(cell: LeftImageTableViewCell) {
+        cell.imageView?.tintColor = .text
         cell.accessoryType = .disclosureIndicator
         cell.selectionStyle = .default
-        cell.textLabel?.text = NSLocalizedString("Card reader manual", comment: "Navigates to Card Reader manual")
+        cell.configure(image: .cardReaderManualIcon, text: Localization.cardReaderManual)
     }
 }
 
@@ -148,6 +151,27 @@ extension InPersonPaymentsMenuViewController {
     }
 }
 
+// MARK: - Localizations
+//
+private extension InPersonPaymentsMenuViewController {
+    enum Localization {
+        static let orderCardReader = NSLocalizedString(
+            "Order card reader",
+            comment: "Navigates to Card Reader ordering screen"
+        )
+
+        static let manageCardReader = NSLocalizedString(
+            "Manage card reader",
+            comment: "Navigates to Card Reader management screen"
+        )
+
+        static let cardReaderManual = NSLocalizedString(
+            "Card reader manual",
+            comment: "Navigates to Card Reader manual"
+        )
+    }
+}
+
 private enum Row: CaseIterable {
     case orderCardReader
     case manageCardReader
@@ -156,11 +180,11 @@ private enum Row: CaseIterable {
     var type: UITableViewCell.Type {
         switch self {
         case .orderCardReader:
-            return BasicTableViewCell.self
+            return LeftImageTableViewCell.self
         case .manageCardReader:
-            return BasicTableViewCell.self
+            return LeftImageTableViewCell.self
         case .bbposChipper2XBTManual:
-            return BasicTableViewCell.self
+            return LeftImageTableViewCell.self
         }
     }
 

WooCommerce/Resources/Images.xcassets/icon-card-reader-manual.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "icon-card-reader-manual.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

WooCommerce/Resources/Images.xcassets/icon-card-reader-manual.imageset/icon-card-reader-manual.pdf

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "icon-card.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

WooCommerce/Resources/Images.xcassets/icon-card.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "icon-shopping-cart.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

WooCommerce/Resources/Images.xcassets/icon-card.imageset/icon-card.pdf

@@ -528,4 +528,16 @@ final class IconsTests: XCTestCase {
     func test_lightningImage_is_not_nil() {
         XCTAssertNotNil(UIImage.lightningImage)
     }
+
+    func test_shoppingCartIcon_is_not_nil() {
+        XCTAssertNotNil(UIImage.shoppingCartIcon)
+    }
+
+    func test_creditCardIcon_is_not_nil() {
+        XCTAssertNotNil(UIImage.creditCardIcon)
+    }
+
+    func test_cardReaderManualIcon_is_not_nil() {
+        XCTAssertNotNil(UIImage.cardReaderManualIcon)
+    }
 }