Merge branch 'trunk' into task/15128-resolve-card-present-events-from-pos

# Conflicts:
#	WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift

Author: iamgabrielma

Fakes/Fakes/Networking.generated.swift

@@ -2369,6 +2369,21 @@ extension Networking.StoredProductSettings {
         )
     }
 }
+extension Networking.StoredProductSettings.Setting {
+    /// Returns a "ready to use" type filled with fake values.
+    ///
+    public static func fake() -> Networking.StoredProductSettings.Setting {
+        .init(
+            siteID: .fake(),
+            sort: .fake(),
+            stockStatusFilter: .fake(),
+            productStatusFilter: .fake(),
+            productTypeFilter: .fake(),
+            productCategoryFilter: .fake(),
+            favoriteProduct: .fake()
+        )
+    }
+}
 extension Networking.Subscription {
     /// Returns a "ready to use" type filled with fake values.
     ///

Networking/Networking/Model/Copiable/Models+Copiable.generated.swift

@@ -3502,6 +3502,36 @@ extension Networking.SiteVisitStatsItem {
     }
 }
 
+extension Networking.StoredProductSettings.Setting {
+    public func copy(
+        siteID: CopiableProp<Int64> = .copy,
+        sort: NullableCopiableProp<String> = .copy,
+        stockStatusFilter: NullableCopiableProp<ProductStockStatus> = .copy,
+        productStatusFilter: NullableCopiableProp<ProductStatus> = .copy,
+        productTypeFilter: NullableCopiableProp<ProductType> = .copy,
+        productCategoryFilter: NullableCopiableProp<ProductCategory> = .copy,
+        favoriteProduct: CopiableProp<Bool> = .copy
+    ) -> Networking.StoredProductSettings.Setting {
+        let siteID = siteID ?? self.siteID
+        let sort = sort ?? self.sort
+        let stockStatusFilter = stockStatusFilter ?? self.stockStatusFilter
+        let productStatusFilter = productStatusFilter ?? self.productStatusFilter
+        let productTypeFilter = productTypeFilter ?? self.productTypeFilter
+        let productCategoryFilter = productCategoryFilter ?? self.productCategoryFilter
+        let favoriteProduct = favoriteProduct ?? self.favoriteProduct
+
+        return Networking.StoredProductSettings.Setting(
+            siteID: siteID,
+            sort: sort,
+            stockStatusFilter: stockStatusFilter,
+            productStatusFilter: productStatusFilter,
+            productTypeFilter: productTypeFilter,
+            productCategoryFilter: productCategoryFilter,
+            favoriteProduct: favoriteProduct
+        )
+    }
+}
+
 extension Networking.Subscription {
     public func copy(
         siteID: CopiableProp<Int64> = .copy,

Networking/Networking/Model/Product/StoredProductSettings.swift

@@ -6,7 +6,7 @@ import Codegen
 ///
 public struct StoredProductSettings: Codable, Equatable, GeneratedFakeable {
 
-    public struct Setting: Codable, Equatable {
+    public struct Setting: Codable, Equatable, GeneratedFakeable, GeneratedCopiable {
         public let siteID: Int64
         public let sort: String?
         public let stockStatusFilter: ProductStockStatus?

RELEASE-NOTES.txt

@@ -7,7 +7,10 @@
 - [*] Now "Suggested by AI" label is visible in dark mode in Blaze campaign creation flow. [https://github.com/woocommerce/woocommerce-ios/pull/15088]
 - [*] Improved image loading in Blaze Campaign Creation: displays a redacted and shimmering effects when loading product image and falls back to a placeholder if no image is available. [https://github.com/woocommerce/woocommerce-ios/pull/15098]
 - [*] Product List: Display syncing animation on items with image upload in progress [https://github.com/woocommerce/woocommerce-ios/pull/15052]
+- [*] Background image upload: Fix issue showing uploaded images while saving is in progress [https://github.com/woocommerce/woocommerce-ios/pull/15107]
 - [*] Background image upload: Fix missing error notice in iPhones [https://github.com/woocommerce/woocommerce-ios/pull/15117]
+- [*] Background image upload: Show a notice when the user leaves product details while uploads are pending [https://github.com/woocommerce/woocommerce-ios/pull/15134]
+- [*] Filters applied in product selector no longer affect the main product list screen. [https://github.com/woocommerce/woocommerce-ios/pull/14764]
 
 21.7
 -----

WooCommerce/Classes/POS/Card Present Payments/CardPresentPaymentPreviewService.swift

@@ -5,11 +5,14 @@ import struct Yosemite.Order
 
 #if DEBUG
 
-struct CardPresentPaymentPreviewService: CardPresentPaymentFacade {
+final class CardPresentPaymentPreviewService: CardPresentPaymentFacade {
     let paymentEventPublisher: AnyPublisher<CardPresentPaymentEvent, Never> = Just(.idle).eraseToAnyPublisher()
 
-    let readerConnectionStatusPublisher: AnyPublisher<CardPresentPaymentReaderConnectionStatus, Never> = Just(.disconnected)
-        .eraseToAnyPublisher()
+    @Published var readerConnectionStatus: CardPresentPaymentReaderConnectionStatus = .disconnected
+
+    var readerConnectionStatusPublisher: AnyPublisher<CardPresentPaymentReaderConnectionStatus, Never> {
+        $readerConnectionStatus.eraseToAnyPublisher()
+    }
 
     func connectReader(using connectionMethod: CardReaderConnectionMethod) async throws -> CardPresentPaymentReaderConnectionResult {
         .connected(CardPresentPaymentCardReader(name: "Test reader", batteryLevel: 0.85))

WooCommerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift

@@ -44,19 +44,17 @@ struct CardReaderConnectionStatusView: View {
                     posModel.connectCardReader()
                 } label: {
                     HStack(spacing: Constants.buttonImageAndTextSpacing) {
-                        circleIcon(with: Color(.wooCommerceAmber(.shade60)))
+                        circleIcon(with: Color.posAlert)
                         Text(Localization.readerDisconnected)
                             .foregroundColor(disconnectedFontColor)
                     }
-                    .padding(.horizontal, Constants.overlayInnerHorizontalPadding)
-                    .frame(maxHeight: .infinity)
-                    .overlay {
-                        RoundedRectangle(cornerRadius: Constants.overlayRadius)
-                            .stroke(Constants.overlayColor, lineWidth: Constants.overlayLineWidth)
-                    }
-                    .padding(.horizontal, Constants.overlayOuterHorizontalPadding)
-                    .padding(.vertical, Constants.overlayOuterVerticalPadding)
+                    .padding(.horizontal, Constants.disconnectedBorderAndContentSpacing)
                     .frame(maxHeight: .infinity)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: Constants.disconnectedBorderCornerRadius)
+                            .stroke(disconnectedBorderColor, lineWidth: Constants.disconnectedBorderWidth)
+                    )
+                    .padding(Constants.disconnectedBorderInset)
                 }
             }
         }
@@ -102,23 +100,30 @@ private extension CardReaderConnectionStatusView {
             POSFloatingControlView.secondaryFontColor
         }
     }
+
+    var disconnectedBorderColor: Color {
+        switch backgroundAppearance {
+        case .primary:
+            .posPrimary
+        case .secondary:
+            POSFloatingControlView.secondaryFontColor
+        }
+    }
 }
 
 @available(iOS 17.0, *)
 private extension CardReaderConnectionStatusView {
     enum Constants {
-        static let buttonImageAndTextSpacing: CGFloat = 12
-        static let imageDimension: CGFloat = 12
+        static let buttonImageAndTextSpacing: CGFloat = 16
+        static let imageDimension: CGFloat = 14
         static let progressIndicatorDimension: CGFloat = 10
         static let progressIndicatorLineWidth: CGFloat = 2
         static let font = POSFontStyle.posBodyMediumRegular()
         static let horizontalPadding: CGFloat = 24
-        static let overlayRadius: CGFloat = 4
-        static let overlayLineWidth: CGFloat = 2
-        static let overlayColor: Color = Color.init(uiColor: .wooCommercePurple(.shade60))
-        static let overlayInnerHorizontalPadding: CGFloat =  16 + Self.overlayLineWidth
-        static let overlayOuterHorizontalPadding: CGFloat = 8 + Self.overlayLineWidth
-        static let overlayOuterVerticalPadding: CGFloat = 8 + Self.overlayLineWidth
+        static let disconnectedBorderAndContentSpacing: CGFloat = 16
+        static let disconnectedBorderCornerRadius: CGFloat = POSCornerRadiusStyle.small.value
+        static let disconnectedBorderWidth: CGFloat = 2
+        static let disconnectedBorderInset: CGFloat = 8
     }
 }
 
@@ -171,6 +176,8 @@ private extension CardReaderConnectionStatusView {
     )
     VStack {
         CardReaderConnectionStatusView()
+            .background(Color.posSurfaceContainerLow)
+            .frame(height: 80)
             .environment(posModel)
     }
 }

WooCommerce/Classes/POS/Presentation/Item Selector/GhostItemCardView.swift

@@ -0,0 +1,40 @@
+import SwiftUI
+
+struct GhostItemCardView: View {
+    @ScaledMetric private var scale: CGFloat = 1.0
+
+    private var dimension: CGFloat {
+        min(Constants.productCardSize * scale, Constants.maximumProductCardSize)
+    }
+
+    var body: some View {
+        HStack(spacing: Constants.cardSpacing) {
+            Spacer()
+                .frame(width: dimension, height: dimension)
+            Rectangle()
+                .foregroundColor(.posOnSurfaceVariantLowest)
+                .frame(height: Layout.placeholderHeight * scale)
+                .cornerRadius(Layout.cornerRadius)
+                .padding(.horizontal, Constants.horizontalTextPadding)
+            Spacer()
+                .frame(width: dimension, height: dimension)
+        }
+        .shimmering()
+        .frame(maxWidth: .infinity, idealHeight: dimension)
+        .background(Color.posSurfaceBright)
+        .posItemCardBorderStyles()
+    }
+}
+
+private extension GhostItemCardView {
+    typealias Constants = PointOfSaleItemListCardConstants
+
+    enum Layout {
+        static let placeholderHeight: CGFloat = 36
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
+    }
+}
+
+#Preview {
+    GhostItemCardView()
+}

WooCommerce/Classes/POS/Presentation/ItemListView.swift

@@ -114,7 +114,7 @@ private extension ItemListView {
         .fixedSize(horizontal: false, vertical: true)
         .background(Color.posSurfaceBright)
         .cornerRadius(Constants.bannerCornerRadius)
-        .shadow(color: Color.black.opacity(0.08), radius: 4, y: 2)
+        .posShadow(.medium)
         .accessibilityAddTraits(.isButton)
         .onTapGesture {
             showSimpleProductsModal = true
@@ -126,7 +126,7 @@ private extension ItemListView {
         Text(headerBannerHint + " ") +
         Text(Localization.headerBannerLearnMoreHint)
             .font(POSFontStyle.posBodySmallBold.font())
-            .foregroundColor(Color(.accent))
+            .foregroundColor(Color(.posPrimary))
     }
 
     @ViewBuilder
@@ -173,53 +173,14 @@ private extension ItemListState {
     }
 }
 
-struct GhostItemCardView: View {
-    @ScaledMetric private var scale: CGFloat = 1.0
-
-    var body: some View {
-        HStack(spacing: 0) {
-            Rectangle()
-                .frame(width: Constants.productCardSize * scale, height: Constants.productCardSize * scale)
-            HStack {
-                Rectangle()
-                    .foregroundColor(Constants.textForegroundColor)
-                    .frame(width: Constants.textWidth * 2 * scale, height: Constants.textHeight * scale)
-                    .padding(.horizontal)
-                Spacer()
-                Rectangle()
-                    .foregroundColor(Constants.textForegroundColor)
-                    .frame(width: Constants.textWidth * scale, height: Constants.textHeight * scale)
-                    .padding(.horizontal)
-            }
-            .frame(height: Constants.productCardSize * scale)
-        }
-        .overlay {
-            RoundedRectangle(cornerRadius: Constants.cornerRadius)
-        }
-        .foregroundColor(Constants.cardForegroundColor)
-        .shimmering()
-    }
-}
-
-private extension GhostItemCardView {
-    enum Constants {
-        static let cornerRadius: CGFloat = 8
-        static let cardForegroundColor: Color = Color.gray.opacity(0.5)
-        static let textForegroundColor: Color = Color.gray.opacity(0.8)
-        static let productCardSize: CGFloat = 112
-        static let textWidth: CGFloat = 112
-        static let textHeight: CGFloat = 32
-    }
-}
-
 /// Constants
 ///
 @available(iOS 17.0, *)
 private extension ItemListView {
     enum Constants {
         static let bannerTitleFont: POSFontStyle = .posBodyLargeBold
         static let bannerSubtitleFont: POSFontStyle = .posBodySmallRegular()
-        static let bannerCornerRadius: CGFloat = 8
+        static let bannerCornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
         static let bannerVerticalPadding: CGFloat = 26
         static let bannerTextSpacing: CGFloat = 4
         static let bannerTitleSpacing: CGFloat = 8

WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift

@@ -4,7 +4,6 @@ import SwiftUI
 struct POSFloatingControlView: View {
     @Environment(\.posBackgroundAppearance) var backgroundAppearance
     @Environment(PointOfSaleAggregateModel.self) private var posModel
-    @Environment(\.colorScheme) var colorScheme
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
     @Binding private var showExitPOSModal: Bool
     @Binding private var showSupport: Bool
@@ -71,6 +70,7 @@ struct POSFloatingControlView: View {
         .frame(height: Constants.size)
         .background(Color.clear)
         .animation(.default, value: backgroundAppearance)
+        .posShadow(.large)
     }
 }
 
@@ -81,7 +81,7 @@ private extension POSFloatingControlView {
         case .primary:
             .posSurfaceContainerLow
         case .secondary:
-            colorScheme == .light ? Color(.wooCommercePurple(.shade80)) : Color(.wooCommercePurple(.shade20))
+            .posDisabledContainer
         }
     }
 
@@ -93,15 +93,15 @@ private extension POSFloatingControlView {
 @available(iOS 17.0, *)
 extension POSFloatingControlView {
     static var secondaryFontColor: Color {
-        return .posDarkGray.opacity(0.6)
+        .posOnDisabledContainer
     }
 }
 
 @available(iOS 17.0, *)
 private extension POSFloatingControlView {
     enum Constants {
-        static let size: CGFloat = 56
-        static let cornerRadius: CGFloat = 8
+        static let size: CGFloat = 80
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.medium.value
     }
 
     enum Localization {
@@ -127,17 +127,43 @@ private extension POSFloatingControlView {
 }
 
 #if DEBUG
+
 @available(iOS 17.0, *)
-#Preview {
+#Preview("Reader Disconnected") {
     let posModel = PointOfSaleAggregateModel(
         itemsController: PointOfSalePreviewItemsController(),
         cardPresentPaymentService: CardPresentPaymentPreviewService(),
         orderController: PointOfSalePreviewOrderController(),
         collectOrderPaymentAnalyticsTracker: POSCollectOrderPaymentAnalytics())
+    POSFloatingControlView(showExitPOSModal: .constant(false), showSupport: .constant(false), showDocumentation: .constant(false))
+        .environment(\.posBackgroundAppearance, .primary)
+        .environment(posModel)
+}
 
-    POSFloatingControlView(showExitPOSModal: .constant(false),
-                           showSupport: .constant(false),
-                           showDocumentation: .constant(false))
-    .environment(posModel)
+@available(iOS 17.0, *)
+#Preview("Reader Connected") {
+    let paymentService = CardPresentPaymentPreviewService()
+    let posModel = PointOfSaleAggregateModel(
+        itemsController: PointOfSalePreviewItemsController(),
+        cardPresentPaymentService: CardPresentPaymentPreviewService(),
+        orderController: PointOfSalePreviewOrderController(),
+        collectOrderPaymentAnalyticsTracker: POSCollectOrderPaymentAnalytics())
+    paymentService.readerConnectionStatus = .connected(.init(name: "", batteryLevel: 0.6))
+    return POSFloatingControlView(showExitPOSModal: .constant(false), showSupport: .constant(false), showDocumentation: .constant(false))
+        .environment(\.posBackgroundAppearance, .primary)
+        .environment(posModel)
 }
+
+@available(iOS 17.0, *)
+#Preview("Secondary/disabled Background") {
+    let posModel = PointOfSaleAggregateModel(
+        itemsController: PointOfSalePreviewItemsController(),
+        cardPresentPaymentService: CardPresentPaymentPreviewService(),
+        orderController: PointOfSalePreviewOrderController(),
+        collectOrderPaymentAnalyticsTracker: POSCollectOrderPaymentAnalytics())
+    POSFloatingControlView(showExitPOSModal: .constant(false), showSupport: .constant(false), showDocumentation: .constant(false))
+        .environment(\.posBackgroundAppearance, .secondary)
+        .environment(posModel)
+}
+
 #endif

WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift

@@ -29,7 +29,7 @@ struct POSReceiptEligibilityBanner: View {
 private extension POSReceiptEligibilityBanner {
     enum Constants {
         static let elementSpacing: CGFloat = 8
-        static let cornerRadius: CGFloat = 20
+        static let cornerRadius: CGFloat = POSCornerRadiusStyle.large.value
         static let imagesize: CGFloat = 40
         static let imagePadding: CGFloat = 4
         static let bannerPadding: CGFloat = 16
@@ -42,3 +42,8 @@ private extension POSReceiptEligibilityBanner {
             comment: "Text for the banner requiring specific WooCommerce version.")
     }
 }
+
+#Preview {
+    POSReceiptEligibilityBanner(isVisible: .constant(true))
+        .padding()
+}