Split AnalyticsProductCardViewModel into 2 viewmodels

Author: ealeksandrov

WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubView.swift

@@ -93,7 +93,7 @@ struct AnalyticsHubView: View {
                 VStack(spacing: Layout.dividerSpacing) {
                     Divider()
 
-                    AnalyticsProductCard(viewModel: viewModel.productCard)
+                    AnalyticsProductCard(statsViewModel: viewModel.productsStatsCard, itemsViewModel: viewModel.itemsSoldCard)
                         .padding(.horizontal, insets: safeAreaInsets)
                         .background(Color(uiColor: .listForeground))
 

WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift

@@ -35,9 +35,13 @@ final class AnalyticsHubViewModel: ObservableObject {
     ///
     @Published var ordersCard = AnalyticsHubViewModel.ordersCard(currentPeriodStats: nil, previousPeriodStats: nil)
 
-    /// Products Card ViewModel
+    /// Products Stats Card ViewModel
     ///
-    @Published var productCard = AnalyticsHubViewModel.productCard(currentPeriodStats: nil, previousPeriodStats: nil, itemsSoldStats: nil)
+    @Published var productsStatsCard = AnalyticsHubViewModel.productsStatsCard(currentPeriodStats: nil, previousPeriodStats: nil)
+
+    /// Items Sold Card ViewModel
+    ///
+    @Published var itemsSoldCard = AnalyticsHubViewModel.productsItemsSoldCard(itemsSoldStats: nil)
 
     /// Time Range Selection Type
     ///
@@ -178,7 +182,8 @@ private extension AnalyticsHubViewModel {
     func switchToLoadingState() {
         self.revenueCard = revenueCard.redacted
         self.ordersCard = ordersCard.redacted
-        self.productCard = productCard.redacted
+        self.productsStatsCard = productsStatsCard.redacted
+        self.itemsSoldCard = itemsSoldCard.redacted
     }
 
     @MainActor
@@ -189,16 +194,21 @@ private extension AnalyticsHubViewModel {
     }
 
     func bindViewModelsWithData() {
-        Publishers.CombineLatest3($currentOrderStats, $previousOrderStats, $itemsSoldStats)
-            .sink { [weak self] currentOrderStats, previousOrderStats, itemsSoldStats in
+        Publishers.CombineLatest($currentOrderStats, $previousOrderStats)
+            .sink { [weak self] currentOrderStats, previousOrderStats in
                 guard let self else { return }
 
                 self.revenueCard = AnalyticsHubViewModel.revenueCard(currentPeriodStats: currentOrderStats, previousPeriodStats: previousOrderStats)
                 self.ordersCard = AnalyticsHubViewModel.ordersCard(currentPeriodStats: currentOrderStats, previousPeriodStats: previousOrderStats)
-                self.productCard = AnalyticsHubViewModel.productCard(currentPeriodStats: currentOrderStats,
-                                                                     previousPeriodStats: previousOrderStats,
-                                                                     itemsSoldStats: itemsSoldStats)
+                self.productsStatsCard = AnalyticsHubViewModel.productsStatsCard(currentPeriodStats: currentOrderStats, previousPeriodStats: previousOrderStats)
+
+            }.store(in: &subscriptions)
+
+        $itemsSoldStats
+            .sink { [weak self] itemsSoldStats in
+                guard let self else { return }
 
+                self.itemsSoldCard = AnalyticsHubViewModel.productsItemsSoldCard(itemsSoldStats: itemsSoldStats)
             }.store(in: &subscriptions)
 
         $timeRangeSelectionType
@@ -253,22 +263,26 @@ private extension AnalyticsHubViewModel {
                                             syncErrorMessage: Localization.OrderCard.noOrders)
     }
 
-    /// Helper function to create a `AnalyticsProductCardViewModel` from the fetched stats.
+    /// Helper function to create a `AnalyticsProductsStatsCardViewModel` from the fetched stats.
     ///
-    static func productCard(currentPeriodStats: OrderStatsV4?,
-                            previousPeriodStats: OrderStatsV4?,
-                            itemsSoldStats: TopEarnerStats?) -> AnalyticsProductCardViewModel {
+    static func productsStatsCard(currentPeriodStats: OrderStatsV4?,
+                                  previousPeriodStats: OrderStatsV4?) -> AnalyticsProductsStatsCardViewModel {
         let showStatsError = currentPeriodStats == nil || previousPeriodStats == nil
-        let showItemsSoldError = itemsSoldStats == nil
         let itemsSold = StatsDataTextFormatter.createItemsSoldText(orderStats: currentPeriodStats)
         let itemsSoldDelta = StatsDataTextFormatter.createOrderItemsSoldDelta(from: previousPeriodStats, to: currentPeriodStats)
 
-        return AnalyticsProductCardViewModel(itemsSold: itemsSold,
-                                             delta: itemsSoldDelta,
-                                             itemsSoldData: itemSoldRows(from: itemsSoldStats),
-                                             isRedacted: false,
-                                             showStatsError: showStatsError,
-                                             showItemsSoldError: showItemsSoldError)
+        return AnalyticsProductsStatsCardViewModel(itemsSold: itemsSold,
+                                                   delta: itemsSoldDelta,
+                                                   isRedacted: false,
+                                                   showStatsError: showStatsError)
+    }
+
+    /// Helper function to create a `AnalyticsItemsSoldViewModel` from the fetched stats.
+    ///
+    static func productsItemsSoldCard(itemsSoldStats: TopEarnerStats?) -> AnalyticsItemsSoldViewModel {
+        let showItemsSoldError = itemsSoldStats == nil
+
+        return AnalyticsItemsSoldViewModel(itemsSoldData: itemSoldRows(from: itemsSoldStats), isRedacted: false, showItemsSoldError: showItemsSoldError)
     }
 
     /// Helper functions to create `TopPerformersRow.Data` items rom the provided `TopEarnerStats`.

WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift

@@ -17,18 +17,22 @@ struct AnalyticsProductCard: View {
     /// Delta Tag text color.
     let deltaTextColor: UIColor
 
-    /// Items Solds data to render.
-    ///
-    let itemsSoldData: [TopPerformersRow.Data]
-
     /// Indicates if the values should be hidden (for loading state)
     ///
-    let isRedacted: Bool
+    let isStatsRedacted: Bool
 
     /// Indicates if there was an error loading stats part of the card.
     ///
     let showStatsError: Bool
 
+    /// Items Solds data to render.
+    ///
+    let itemsSoldData: [TopPerformersRow.Data]
+
+    /// Indicates if the values should be hidden (for loading state)
+    ///
+    let isItemsSoldRedacted: Bool
+
     /// Indicates if there was an error loading items sold part of the card.
     ///
     let showItemsSoldError: Bool
@@ -49,12 +53,12 @@ struct AnalyticsProductCard: View {
                 Text(itemsSold)
                     .titleStyle()
                     .frame(maxWidth: .infinity, alignment: .leading)
-                    .redacted(reason: isRedacted ? .placeholder : [])
-                    .shimmering(active: isRedacted)
+                    .redacted(reason: isStatsRedacted ? .placeholder : [])
+                    .shimmering(active: isStatsRedacted)
 
                 DeltaTag(value: delta, backgroundColor: deltaBackgroundColor, textColor: deltaTextColor)
-                    .redacted(reason: isRedacted ? .placeholder : [])
-                    .shimmering(active: isRedacted)
+                    .redacted(reason: isStatsRedacted ? .placeholder : [])
+                    .shimmering(active: isStatsRedacted)
             }
 
             if showStatsError {
@@ -68,7 +72,7 @@ struct AnalyticsProductCard: View {
             TopPerformersView(itemTitle: Localization.title.localizedCapitalized,
                               valueTitle: Localization.itemsSold,
                               rows: itemsSoldData,
-                              isRedacted: isRedacted)
+                              isRedacted: isItemsSoldRedacted)
                 .padding(.top, Layout.columnSpacing)
 
             if showItemsSoldError {
@@ -110,24 +114,26 @@ struct AnalyticsProductCardPreviews: PreviewProvider {
                              delta: "+23%",
                              deltaBackgroundColor: .withColorStudio(.green, shade: .shade50),
                              deltaTextColor: .textInverted,
+                             isStatsRedacted: false,
+                             showStatsError: false,
                              itemsSoldData: [
                                 .init(imageURL: imageURL, name: "Tabletop Photos", details: "Net Sales: $1,232", value: "32"),
                                 .init(imageURL: imageURL, name: "Kentya Palm", details: "Net Sales: $800", value: "10"),
                                 .init(imageURL: imageURL, name: "Love Ficus", details: "Net Sales: $599", value: "5"),
                                 .init(imageURL: imageURL, name: "Bird Of Paradise", details: "Net Sales: $23.50", value: "2"),
                              ],
-                             isRedacted: false,
-                             showStatsError: false,
+                             isItemsSoldRedacted: false,
                              showItemsSoldError: false)
             .previewLayout(.sizeThatFits)
 
         AnalyticsProductCard(itemsSold: "-",
                              delta: "0%",
                              deltaBackgroundColor: .withColorStudio(.gray, shade: .shade0),
                              deltaTextColor: .text,
-                             itemsSoldData: [],
-                             isRedacted: false,
+                             isStatsRedacted: false,
                              showStatsError: true,
+                             itemsSoldData: [],
+                             isItemsSoldRedacted: false,
                              showItemsSoldError: true)
             .previewLayout(.sizeThatFits)
             .previewDisplayName("No data")

WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift

@@ -1,10 +1,10 @@
 import Foundation
 import class UIKit.UIColor
 
-/// Analytics Hub Product Card ViewModel.
+/// Analytics Hub Products Stats Card ViewModel.
 /// Used to transmit analytics products data.
 ///
-struct AnalyticsProductCardViewModel {
+struct AnalyticsProductsStatsCardViewModel {
     /// Items Sold Value
     ///
     let itemsSold: String
@@ -13,51 +13,73 @@ struct AnalyticsProductCardViewModel {
     ///
     let delta: DeltaPercentage
 
-    /// Items Solds data to render.
-    ///
-    let itemsSoldData: [TopPerformersRow.Data]
-
     /// Indicates if the values should be hidden (for loading state)
     ///
     let isRedacted: Bool
 
     /// Indicates if there was an error loading stats part of the card.
     ///
     let showStatsError: Bool
+}
+
+/// Analytics Hub Items Sold ViewModel.
+/// Used to store top performing products data.
+///
+struct AnalyticsItemsSoldViewModel {
+
+    /// Items Solds data to render.
+    ///
+    let itemsSoldData: [TopPerformersRow.Data]
+
+    /// Indicates if the values should be hidden (for loading state)
+    ///
+    let isRedacted: Bool
 
     /// Indicates if there was an error loading items sold part of the card.
     ///
     let showItemsSoldError: Bool
 }
 
-extension AnalyticsProductCardViewModel {
+extension AnalyticsProductsStatsCardViewModel {
 
     /// Make redacted state of the card, replacing values with hardcoded placeholders
     ///
     var redacted: Self {
         // Values here are placeholders and will be redacted in the UI
         .init(itemsSold: "1000",
               delta: DeltaPercentage(string: "0%", direction: .zero),
-              itemsSoldData: [.init(imageURL: nil, name: "Product Name", details: "Net Sales", value: "$5678")],
               isRedacted: true,
-              showStatsError: false,
-              showItemsSoldError: false)
+              showStatsError: false)
     }
+}
+
+extension AnalyticsItemsSoldViewModel {
 
+    /// Make redacted state of the card, replacing values with hardcoded placeholders
+    ///
+    var redacted: Self {
+        // Values here are placeholders and will be redacted in the UI
+        .init(itemsSoldData: [.init(imageURL: nil, name: "Product Name", details: "Net Sales", value: "$5678")],
+              isRedacted: true,
+              showItemsSoldError: false)
+    }
 }
 
-/// Convenience extension to create an `AnalyticsReportCard` from a view model.
+/// Convenience extension to create an `AnalyticsProductCard` from a view model.
 ///
 extension AnalyticsProductCard {
-    init(viewModel: AnalyticsProductCardViewModel) {
-        self.itemsSold = viewModel.itemsSold
-        self.delta = viewModel.delta.string
-        self.deltaBackgroundColor = viewModel.delta.direction.deltaBackgroundColor
-        self.deltaTextColor = viewModel.delta.direction.deltaTextColor
-        self.itemsSoldData = viewModel.itemsSoldData
-        self.isRedacted = viewModel.isRedacted
-        self.showStatsError = viewModel.showStatsError
-        self.showItemsSoldError = viewModel.showItemsSoldError
+    init(statsViewModel: AnalyticsProductsStatsCardViewModel, itemsViewModel: AnalyticsItemsSoldViewModel) {
+        // Header with stats
+        self.itemsSold = statsViewModel.itemsSold
+        self.delta = statsViewModel.delta.string
+        self.deltaBackgroundColor = statsViewModel.delta.direction.deltaBackgroundColor
+        self.deltaTextColor = statsViewModel.delta.direction.deltaTextColor
+        self.isStatsRedacted = statsViewModel.isRedacted
+        self.showStatsError = statsViewModel.showStatsError
 
+        // Top performers list
+        self.itemsSoldData = itemsViewModel.itemsSoldData
+        self.isItemsSoldRedacted = itemsViewModel.isRedacted
+        self.showItemsSoldError = itemsViewModel.showItemsSoldError
     }
 }

WooCommerce/WooCommerceTests/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModelTests.swift

@@ -70,7 +70,7 @@ final class AnalyticsHubViewModelTests: XCTestCase {
         let vm = AnalyticsHubViewModel(siteID: 123, statsTimeRange: .thisMonth, stores: stores)
         var loadingRevenueCard: AnalyticsReportCardViewModel?
         var loadingOrdersCard: AnalyticsReportCardViewModel?
-        var loadingProductsCard: AnalyticsProductCardViewModel?
+        var loadingProductsCard: AnalyticsProductsStatsCardViewModel?
         stores.whenReceivingAction(ofType: StatsActionV4.self) { action in
             switch action {
             case let .retrieveCustomStats(_, _, _, _, _, _, completion):