[Woo POS] Update POS menu item based on the latest design

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -1058,6 +1058,12 @@ extension UIImage {
             .imageFlippedForRightToLeftLayoutDirection()
     }
 
+    /// Play square image
+    ///
+    static var playSquareImage: UIImage {
+        UIImage(systemName: "play.square")!
+    }
+
     /// Plus Icon
     ///
     static var plusImage: UIImage {
@@ -1076,6 +1082,12 @@ extension UIImage {
         return UIImage.gridicon(.plusSmall)
     }
 
+    /// Point of sale image
+    ///
+    static var pointOfSaleImage: UIImage {
+        UIImage(named: "point-of-sale")!
+    }
+
     /// Product description AI announcement image
     ///
     static var productDescriptionAIAnnouncementImage: UIImage {

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenu.swift

@@ -85,7 +85,7 @@ private extension HubMenu {
             // Point of Sale
             if let menu = viewModel.posElement {
                 Section {
-                    menuItemView(menu: menu)
+                    menuItemView(menu: menu, chevron: .enteringMode)
                 }
             }
 
@@ -109,7 +109,7 @@ private extension HubMenu {
     }
 
     @ViewBuilder
-    func menuItemView(menu: HubMenuItem) -> some View {
+    func menuItemView(menu: HubMenuItem, chevron: Row.Chevron = .leading) -> some View {
         Button {
             handleTap(menu: menu)
         } label: {
@@ -118,7 +118,7 @@ private extension HubMenu {
                 iconBadge: menu.iconBadge,
                 description: menu.description,
                 icon: .local(menu.icon),
-                chevron: .leading)
+                chevron: chevron)
             .foregroundColor(Color(menu.iconColor))
         }
         .accessibilityIdentifier(menu.accessibilityIdentifier)
@@ -233,6 +233,7 @@ private extension HubMenu {
             case none
             case down
             case leading
+            case enteringMode
 
             var asset: UIImage {
                 switch self {
@@ -242,6 +243,9 @@ private extension HubMenu {
                     return .chevronDownImage
                 case .leading:
                     return .chevronImage
+                case .enteringMode:
+                    return .playSquareImage
+                        .withTintColor(.secondaryLabel, renderingMode: .alwaysTemplate)
                 }
             }
         }

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift

@@ -422,10 +422,10 @@ extension HubMenuViewModel {
     struct PointOfSaleEntryPoint: HubMenuItem {
         static var id = "pointOfSale"
 
-        let title: String = "Point Of Sale"
-        let description: String = "Point Of Sale entry point"
-        let icon: UIImage = UIImage(systemName: "ladybug.fill")!
-        let iconColor: UIColor = .red
+        let title: String = Localization.pos
+        let description: String = Localization.posDescription
+        let icon: UIImage = .pointOfSaleImage
+        let iconColor: UIColor = .withColorStudio(.green, shade: .shade30)
         let accessibilityIdentifier: String = "menu-pointOfSale"
         let trackingOption: String = "pointOfSale"
         let iconBadge: HubMenuBadgeType? = nil
@@ -484,6 +484,14 @@ extension HubMenuViewModel {
             "My Store",
             comment: "Title of the hub menu view in case there is no title for the store")
 
+        static let pos = NSLocalizedString(
+            "Point of Sale Mode",
+            comment: "Title of the POS menu in the hub menu")
+
+        static let posDescription = NSLocalizedString(
+            "Use the app as a cash register",
+            comment: "Description of the POS menu in the hub menu")
+
         static let woocommerceAdmin = NSLocalizedString(
             "WooCommerce Admin",
             comment: "Title of one of the hub menu options")

WooCommerce/Resources/Images.xcassets/point-of-sale.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images" : [
+    {
+      "filename" : "point-of-sale.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "template"
+  }
+}

WooCommerce/WooCommerceTests/Extensions/IconsTests.swift

@@ -490,6 +490,10 @@ final class IconsTests: XCTestCase {
         XCTAssertNotNil(UIImage.print)
     }
 
+    func test_playSquareImage_is_not_nil() {
+        XCTAssertNotNil(UIImage.playSquareImage)
+    }
+
     func testPlusImageIconIsNotNil() {
         XCTAssertNotNil(UIImage.plusImage)
     }
@@ -502,6 +506,10 @@ final class IconsTests: XCTestCase {
         XCTAssertNotNil(UIImage.plusSmallImage)
     }
 
+    func test_pointOfSaleImage_is_not_nil() {
+        XCTAssertNotNil(UIImage.pointOfSaleImage)
+    }
+
     func test_productDescriptionAIAnnouncementImage_is_not_nil() {
         XCTAssertNotNil(UIImage.productDescriptionAIAnnouncementImage)
     }