[POS Orders] Display POS badge in Order List (#15839)

iamgabrielma · web-flow · commit f65a3952f5da · 2025-07-01T09:05:15.000+07:00
diff --git a/Modules/Sources/Experiments/DefaultFeatureFlagService.swift b/Modules/Sources/Experiments/DefaultFeatureFlagService.swift
@@ -96,7 +96,7 @@ public struct DefaultFeatureFlagService: FeatureFlagService {
         case .pointOfSaleAsATabi2:
             return buildConfig == .localDeveloper || buildConfig == .alpha
         case .pointOfSaleOrdersi1:
-            return buildConfig == .localDeveloper || buildConfig == .alpha
+            return false
         default:
             return true
         }
diff --git a/WooCommerce/Classes/Extensions/UILabel+SalesChannel.swift b/WooCommerce/Classes/Extensions/UILabel+SalesChannel.swift
@@ -0,0 +1,27 @@
+import UIKit
+
+extension UILabel {
+    /// Applies the appropriate style to sales channel label
+    ///
+    func applySalesChannelStyle() {
+        applyFootnoteStyle()
+        applyLayerSettings()
+        backgroundColor = .lightGray
+        textColor = .black
+    }
+
+    /// Setup: Layer
+    ///
+    private func applyLayerSettings() {
+        layer.masksToBounds = true
+        layer.borderWidth = Layout.borderWidth
+        layer.cornerRadius = Layout.cornerRadius
+    }
+}
+
+private extension UILabel {
+    enum Layout {
+        static let borderWidth = CGFloat(0.0)
+        static let cornerRadius = CGFloat(4.0)
+    }
+}
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Cells/OrderListCellViewModel.swift b/WooCommerce/Classes/ViewRelated/Orders/Cells/OrderListCellViewModel.swift
@@ -76,6 +76,13 @@ struct OrderListCellViewModel {
         return order.status.localizedName
     }
 
+    /// Textual representation of the sales channel
+    ///
+    var salesChannel: String {
+        // Temporarily hardcoded. Will be handled on WOOMOB-661
+        return "POS"
+    }
+
     /// The localized unabbreviated total for a given order item, which includes the currency.
     ///
     /// Example: $48,415,504.20
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTableViewCell.swift b/WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTableViewCell.swift
@@ -23,6 +23,10 @@ final class OrderTableViewCell: UITableViewCell & SearchResultCell {
     ///
     @IBOutlet private var paymentStatusLabel: PaddedLabel!
 
+    /// Sales channel
+    ///
+    @IBOutlet private var salesChannelLabel: PaddedLabel!
+
     /// Top-level stack view that contains the stack view of title and payment status labels, and total price label.
     ///
     @IBOutlet weak var contentStackView: UIStackView!
@@ -53,6 +57,14 @@ final class OrderTableViewCell: UITableViewCell & SearchResultCell {
         paymentStatusLabel.applyStyle(for: viewModel.status)
         paymentStatusLabel.text = viewModel.statusString
 
+        if ServiceLocator.featureFlagService.isFeatureFlagEnabled(.pointOfSaleOrdersi1) {
+            salesChannelLabel.isHidden = false
+            salesChannelLabel.applySalesChannelStyle()
+            salesChannelLabel.text = viewModel.salesChannel
+        } else {
+            salesChannelLabel.isHidden = true
+        }
+
         accessoryType = .none
         accessoryView = viewModel.accessoryView
 
@@ -147,5 +159,8 @@ private extension OrderTableViewCell {
         paymentStatusLabel.numberOfLines = 0
 
         dateCreatedLabel.applyCaption1Style()
+
+        salesChannelLabel.applyFootnoteStyle()
+        salesChannelLabel.numberOfLines = 1
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTableViewCell.xib b/WooCommerce/Classes/ViewRelated/Orders/Cells/OrderTableViewCell.xib
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="23727" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22685"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23721"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -17,10 +17,10 @@
                 <autoresizingMask key="autoresizingMask"/>
                 <subviews>
                     <stackView opaque="NO" contentMode="scaleToFill" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="w2s-RF-ahH">
-                        <rect key="frame" x="16" y="20" width="324.5" height="67"/>
+                        <rect key="frame" x="16" y="21" width="324.5" height="65"/>
                         <subviews>
                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="equalSpacing" alignment="top" spacing="6" translatesAutoresizingMaskIntoConstraints="NO" id="wZx-1J-JYV">
-                                <rect key="frame" x="0.0" y="0.0" width="220" height="67"/>
+                                <rect key="frame" x="0.0" y="0.0" width="220" height="65"/>
                                 <subviews>
                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="240" verticalHuggingPriority="260" text="Date Created" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ylK-xx-FWE" userLabel="Date Label">
                                         <rect key="frame" x="0.0" y="0.0" width="75" height="14.5"/>
@@ -29,32 +29,32 @@
                                         <nil key="highlightedColor"/>
                                     </label>
                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="240" verticalHuggingPriority="260" text="#00 First Last" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Nzo-QV-IP1">
-                                        <rect key="frame" x="0.0" y="20.5" width="105" height="20"/>
+                                        <rect key="frame" x="0.0" y="20.5" width="105" height="20.5"/>
                                         <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                         <nil key="textColor"/>
                                         <nil key="highlightedColor"/>
                                     </label>
-                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="0Ps-WY-D2t">
-                                        <rect key="frame" x="0.0" y="46.5" width="220" height="20.5"/>
+                                    <stackView opaque="NO" contentMode="scaleToFill" spacing="6" translatesAutoresizingMaskIntoConstraints="NO" id="OJK-E9-NUS">
+                                        <rect key="frame" x="0.0" y="47" width="211" height="18"/>
                                         <subviews>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="260" verticalHuggingPriority="240" verticalCompressionResistancePriority="749" text="Order Status" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6EE-dX-ERE" customClass="PaddedLabel" customModule="WooCommerce" customModuleProvider="target">
-                                                <rect key="frame" x="0.0" y="0.0" width="97" height="20.5"/>
+                                                <rect key="frame" x="0.0" y="0.0" width="97" height="18"/>
+                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                                <nil key="textColor"/>
+                                                <nil key="highlightedColor"/>
+                                            </label>
+                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="260" verticalHuggingPriority="240" verticalCompressionResistancePriority="749" text="Sales Channel" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="euM-g3-iWq" customClass="PaddedLabel" customModule="WooCommerce" customModuleProvider="target">
+                                                <rect key="frame" x="103" y="0.0" width="108" height="18"/>
                                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                 <nil key="textColor"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                         </subviews>
-                                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-                                        <constraints>
-                                            <constraint firstAttribute="bottom" secondItem="6EE-dX-ERE" secondAttribute="bottom" id="Fge-dY-VaV"/>
-                                            <constraint firstItem="6EE-dX-ERE" firstAttribute="top" secondItem="0Ps-WY-D2t" secondAttribute="top" id="pGC-oV-PJo"/>
-                                            <constraint firstItem="6EE-dX-ERE" firstAttribute="leading" secondItem="0Ps-WY-D2t" secondAttribute="leading" id="vHJ-wa-36Z"/>
-                                        </constraints>
-                                    </view>
+                                    </stackView>
                                 </subviews>
                             </stackView>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="1000" horizontalCompressionResistancePriority="1000" text="$75,894.63" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="9oo-9a-Tey">
-                                <rect key="frame" x="236" y="0.0" width="88.5" height="67"/>
+                                <rect key="frame" x="236" y="0.0" width="88.5" height="65"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>
@@ -73,6 +73,7 @@
                 <outlet property="contentStackView" destination="w2s-RF-ahH" id="ULq-Dn-l9Q"/>
                 <outlet property="dateCreatedLabel" destination="ylK-xx-FWE" id="gKt-XQ-tYq"/>
                 <outlet property="paymentStatusLabel" destination="6EE-dX-ERE" id="9ur-nE-PKb"/>
+                <outlet property="salesChannelLabel" destination="euM-g3-iWq" id="0JY-VF-KoE"/>
                 <outlet property="titleLabel" destination="Nzo-QV-IP1" id="c4l-JL-JKc"/>
                 <outlet property="totalLabel" destination="9oo-9a-Tey" id="OzG-Y4-pOm"/>
             </connections>
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
@@ -1533,6 +1533,7 @@
 		6818E7C12D93C76700677C16 /* PointOfSaleCouponsControllerTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6818E7C02D93C76200677C16 /* PointOfSaleCouponsControllerTests.swift */; };
 		681BB5FC2D676047008AF8BB /* POSSpacing.swift in Sources */ = {isa = PBXBuildFile; fileRef = 681BB5FB2D676043008AF8BB /* POSSpacing.swift */; };
 		681BB5FE2D676061008AF8BB /* POSPadding.swift in Sources */ = {isa = PBXBuildFile; fileRef = 681BB5FD2D676060008AF8BB /* POSPadding.swift */; };
+		682140AF2E125437005E86AB /* UILabel+SalesChannel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 682140AE2E125430005E86AB /* UILabel+SalesChannel.swift */; };
 		682210ED2909666600814E14 /* CustomerSearchUICommandTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 682210EC2909666600814E14 /* CustomerSearchUICommandTests.swift */; };
 		6827140F28A3988300E6E3F6 /* DismissableNoticeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6827140E28A3988300E6E3F6 /* DismissableNoticeView.swift */; };
 		6832C7CA26DA5C4500BA4088 /* LabeledTextViewTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6832C7C926DA5C4500BA4088 /* LabeledTextViewTableViewCell.swift */; };
@@ -4662,6 +4663,7 @@
 		6818E7C02D93C76200677C16 /* PointOfSaleCouponsControllerTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PointOfSaleCouponsControllerTests.swift; sourceTree = "<group>"; };
 		681BB5FB2D676043008AF8BB /* POSSpacing.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSSpacing.swift; sourceTree = "<group>"; };
 		681BB5FD2D676060008AF8BB /* POSPadding.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSPadding.swift; sourceTree = "<group>"; };
+		682140AE2E125430005E86AB /* UILabel+SalesChannel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UILabel+SalesChannel.swift"; sourceTree = "<group>"; };
 		682210EC2909666600814E14 /* CustomerSearchUICommandTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomerSearchUICommandTests.swift; sourceTree = "<group>"; };
 		6827140E28A3988300E6E3F6 /* DismissableNoticeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DismissableNoticeView.swift; sourceTree = "<group>"; };
 		6832C7C926DA5C4500BA4088 /* LabeledTextViewTableViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LabeledTextViewTableViewCell.swift; sourceTree = "<group>"; };
@@ -11922,6 +11924,7 @@
 				459097F723CDE47F00DEA9E0 /* UIAlertController+Helpers.swift */,
 				B5AA7B3E20ED81C2004DA14F /* UserDefaults+Woo.swift */,
 				B59D49CC219B587E006BF0AD /* UILabel+OrderStatus.swift */,
+				682140AE2E125430005E86AB /* UILabel+SalesChannel.swift */,
 				B53B3F38219C817800DF1EB6 /* UIStoryboard+Woo.swift */,
 				B586906521A5F4B1001F1EFC /* UINavigationController+Woo.swift */,
 				D88CA755237CE515005D2F44 /* UITabBar+Appearance.swift */,
@@ -16125,6 +16128,7 @@
 				2004E2CE2C077B0B00D62521 /* CardPresentPaymentCardReader.swift in Sources */,
 				26B233D12A14208800926EAD /* PrivacyBannerPresenter.swift in Sources */,
 				CE55F2D62B23941D005D53D7 /* CollapsibleProductCardPriceSummary.swift in Sources */,
+				682140AF2E125437005E86AB /* UILabel+SalesChannel.swift in Sources */,
 				B59D1EDF219072CC009D1978 /* ProductReviewTableViewCell.swift in Sources */,
 				B958A7C928B3D47B00823EEF /* Route.swift in Sources */,
 				01309A812DC4F45300B77527 /* CardPresentModalCardInserted.swift in Sources */,

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ public struct DefaultFeatureFlagService: FeatureFlagService {`
`96`	`96`	`case .pointOfSaleAsATabi2:`
`97`	`97`	`return buildConfig == .localDeveloper \|\| buildConfig == .alpha`
`98`	`98`	`case .pointOfSaleOrdersi1:`
`99`		`- return buildConfig == .localDeveloper \|\| buildConfig == .alpha`
	`99`	`+ return false`
`100`	`100`	`default:`
`101`	`101`	`return true`
`102`	`102`	`}`