Display "POS" label in Most recent orders section (#16006)

Author: samiuelson

RELEASE-NOTES.txt

@@ -6,6 +6,7 @@
 - [internal] Remove oldest (<30) core data models [https://github.com/woocommerce/woocommerce-ios/pull/15987]
 - [*] Jetpack setup: Native experience for the connection step [https://github.com/woocommerce/woocommerce-ios/pull/15983]
 - [*] Payments: Updated the In-Person Payments `Learn More` redirection to display the correct page based on the selected payment provider [https://github.com/woocommerce/woocommerce-ios/pull/15998]
+- [*] Add "POS" label in Most recent orders in My store dashboard [https://github.com/woocommerce/woocommerce-ios/pull/16006]
 
 23.0
 -----

WooCommerce/Classes/ViewRelated/Dashboard/Orders/LastOrderDashboardRow.swift

@@ -1,6 +1,8 @@
 import SwiftUI
 import Yosemite
 import WooFoundation
+import NetworkingCore
+import Experiments
 
 /// Used in Last Order Dashboard card
 ///
@@ -29,13 +31,25 @@ struct LastOrderDashboardRow: View {
                     Spacer()
 
                     VStack(alignment: .trailing, spacing: Layout.spacing) {
-                        Text(viewModel.statusDescription)
-                            .foregroundStyle(.black)
-                            .captionStyle()
-                            .padding(.horizontal, Layout.Status.hPadding)
-                            .padding(.vertical, Layout.Status.vPadding)
-                            .background(viewModel.statusBackgroundColor)
-                            .cornerRadius(Layout.Status.cornerRadius)
+                        HStack(spacing: Layout.badgeSpacing) {
+                            Text(viewModel.statusDescription)
+                                .foregroundStyle(.black)
+                                .footnoteStyle()
+                                .padding(.horizontal, Layout.Status.hPadding)
+                                .padding(.vertical, Layout.Status.vPadding)
+                                .background(viewModel.statusBackgroundColor)
+                                .cornerRadius(Layout.Status.cornerRadius)
+                            if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleOrdersi1),
+                               viewModel.isPOSOrder {
+                                Text(viewModel.salesChannelText)
+                                    .foregroundStyle(Color(uiColor: Layout.salesChannelLabelTextColor))
+                                    .footnoteStyle()
+                                    .padding(.horizontal, Layout.Status.hPadding)
+                                    .padding(.vertical, Layout.Status.vPadding)
+                                    .background(Color(uiColor: Layout.salesChannelLabelBackgroundColor))
+                                    .cornerRadius(Layout.Status.cornerRadius)
+                            }
+                        }
 
                         Text(viewModel.total)
                             .bodyStyle()
@@ -56,11 +70,14 @@ private extension LastOrderDashboardRow {
     enum Layout {
         static let padding: CGFloat = 16
         static let spacing: CGFloat = 8
+        static let badgeSpacing: CGFloat = 6
+        static let salesChannelLabelBackgroundColor = UIColor.withColorStudio(.wooCommercePurple, shade: .shade10)
+        static let salesChannelLabelTextColor = UIColor.withColorStudio(.wooCommercePurple, shade: .shade80)
 
         enum Status {
             static let hPadding: CGFloat = 8
-            static let vPadding: CGFloat = 2
-            static let cornerRadius: CGFloat = 2
+            static let vPadding: CGFloat = 4
+            static let cornerRadius: CGFloat = 4
         }
     }
 }
@@ -69,6 +86,14 @@ struct LastOrderDashboardRowViewModel {
     private let currencyFormatter = CurrencyFormatter(currencySettings: ServiceLocator.currencySettings)
     let order: Order
 
+    var isPOSOrder: Bool {
+        order.salesChannel == .pointOfSale
+    }
+
+    var salesChannelText: String {
+        order.salesChannel?.description ?? ""
+    }
+
     var number: String {
         "#\(order.number)"
     }