Merge pull request #8304 from woocommerce/issue/8199-empty-state

Author: Ecarrion

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

@@ -234,7 +234,8 @@ private extension AnalyticsHubViewModel {
     static func productCard(currentPeriodStats: OrderStatsV4?,
                             previousPeriodStats: OrderStatsV4?,
                             itemsSoldStats: TopEarnerStats?) -> AnalyticsProductCardViewModel {
-        let showSyncError = currentPeriodStats == nil || previousPeriodStats == nil
+        let showStatsError = currentPeriodStats == nil || previousPeriodStats == nil
+        let showItemsSoldError = itemsSoldStats == nil
         let itemsSold = StatsDataTextFormatter.createItemsSoldText(orderStats: currentPeriodStats)
         let itemsSoldDelta = StatsDataTextFormatter.createOrderItemsSoldDelta(from: previousPeriodStats, to: currentPeriodStats)
 
@@ -243,7 +244,8 @@ private extension AnalyticsHubViewModel {
                                              deltaBackgroundColor: Constants.deltaColor(for: itemsSoldDelta.direction),
                                              itemsSoldData: itemSoldRows(from: itemsSoldStats),
                                              isRedacted: false,
-                                             showSyncError: showSyncError)
+                                             showStatsError: showStatsError,
+                                             showItemsSoldError: showItemsSoldError)
     }
 
     /// Helper functions to create `TopPerformersRow.Data` items rom the provided `TopEarnerStats`.

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

@@ -22,9 +22,13 @@ struct AnalyticsProductCard: View {
     ///
     let isRedacted: Bool
 
-    /// Indicates if there was an error loading the data for the card
+    /// Indicates if there was an error loading stats part of the card.
     ///
-    let showSyncError: Bool
+    let showStatsError: Bool
+
+    /// Indicates if there was an error loading items sold part of the card.
+    ///
+    let showItemsSoldError: Bool
 
     var body: some View {
         VStack(alignment: .leading) {
@@ -50,7 +54,7 @@ struct AnalyticsProductCard: View {
                     .shimmering(active: isRedacted)
             }
 
-            if showSyncError {
+            if showStatsError {
                 Text(Localization.noProducts)
                     .foregroundColor(Color(.text))
                     .subheadlineStyle()
@@ -62,6 +66,14 @@ struct AnalyticsProductCard: View {
                 .padding(.top, Layout.columnSpacing)
                 .redacted(reason: isRedacted ? .placeholder : [])
                 .shimmering(active: isRedacted)
+
+            if showItemsSoldError {
+                Text(Localization.noItemsSold)
+                    .foregroundColor(Color(.text))
+                    .subheadlineStyle()
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.top, Layout.columnSpacing)
+            }
         }
         .padding(Layout.cardPadding)
     }
@@ -74,6 +86,8 @@ private extension AnalyticsProductCard {
         static let itemsSold = NSLocalizedString("Items Sold", comment: "Title for the items sold column on the products card on the analytics hub screen.")
         static let noProducts = NSLocalizedString("Unable to load product analytics",
                                                   comment: "Text displayed when there is an error loading product stats data.")
+        static let noItemsSold = NSLocalizedString("Unable to load product items sold analytics",
+                                                   comment: "Text displayed when there is an error loading items sold stats data.")
     }
 
     enum Layout {
@@ -98,15 +112,17 @@ struct AnalyticsProductCardPreviews: PreviewProvider {
                                 .init(imageURL: imageURL, name: "Bird Of Paradise", details: "Net Sales: $23.50", value: "2"),
                              ],
                              isRedacted: false,
-                             showSyncError: false)
+                             showStatsError: false,
+                             showItemsSoldError: false)
             .previewLayout(.sizeThatFits)
 
         AnalyticsProductCard(itemsSold: "-",
                              delta: "0%",
                              deltaBackgroundColor: .withColorStudio(.gray, shade: .shade0),
                              itemsSoldData: [],
                              isRedacted: false,
-                             showSyncError: true)
+                             showStatsError: true,
+                             showItemsSoldError: true)
             .previewLayout(.sizeThatFits)
             .previewDisplayName("No data")
     }

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

@@ -25,9 +25,13 @@ struct AnalyticsProductCardViewModel {
     ///
     let isRedacted: Bool
 
-    /// Indicates if there was an error loading the data for the card
+    /// Indicates if there was an error loading stats part of the card.
     ///
-    let showSyncError: Bool
+    let showStatsError: Bool
+
+    /// Indicates if there was an error loading items sold part of the card.
+    ///
+    let showItemsSoldError: Bool
 }
 
 extension AnalyticsProductCardViewModel {
@@ -41,7 +45,8 @@ extension AnalyticsProductCardViewModel {
               deltaBackgroundColor: .lightGray,
               itemsSoldData: [.init(imageURL: nil, name: "Product Name", details: "Net Sales", value: "$5678")],
               isRedacted: true,
-              showSyncError: false)
+              showStatsError: false,
+              showItemsSoldError: false)
     }
 
 }
@@ -55,6 +60,8 @@ extension AnalyticsProductCard {
         self.deltaBackgroundColor = viewModel.deltaBackgroundColor
         self.itemsSoldData = viewModel.itemsSoldData
         self.isRedacted = viewModel.isRedacted
-        self.showSyncError = viewModel.showSyncError
+        self.showStatsError = viewModel.showStatsError
+        self.showItemsSoldError = viewModel.showItemsSoldError
+
     }
 }

WooCommerce/Classes/ViewRelated/Dashboard/MyStore/TopPerformersView.swift

@@ -32,8 +32,8 @@ struct TopPerformersView: View {
                 Spacer()
                 Text(valueTitle)
             }
+            .font(.subheadline.bold())
             .foregroundColor(Color(.text))
-            .subheadlineStyle()
             .padding(.bottom, Layout.tableSpacing)
 
             // Rows

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

@@ -61,7 +61,8 @@ final class AnalyticsHubViewModelTests: XCTestCase {
         // Then
         XCTAssertTrue(vm.revenueCard.showSyncError)
         XCTAssertTrue(vm.ordersCard.showSyncError)
-        XCTAssertTrue(vm.productCard.showSyncError)
+        XCTAssertTrue(vm.productCard.showStatsError)
+        XCTAssertTrue(vm.productCard.showItemsSoldError)
     }
 
     func test_cards_viewmodels_redacted_while_updating_from_network() async {