Merge pull request #8270 from woocommerce/issue/8213-analytics-empty-state

[Analytics Hub] Display error messages after an error retrieving order stats

Author: rachelmcr

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

@@ -154,6 +154,7 @@ private extension AnalyticsHubViewModel {
     }
 
     static func revenueCard(currentPeriodStats: OrderStatsV4?, previousPeriodStats: OrderStatsV4?) -> AnalyticsReportCardViewModel {
+        let showSyncError = currentPeriodStats == nil || previousPeriodStats == nil
         let totalDelta = StatsDataTextFormatter.createTotalRevenueDelta(from: previousPeriodStats, to: currentPeriodStats)
         let netDelta = StatsDataTextFormatter.createNetRevenueDelta(from: previousPeriodStats, to: currentPeriodStats)
 
@@ -169,10 +170,13 @@ private extension AnalyticsHubViewModel {
                                             trailingDelta: netDelta.string,
                                             trailingDeltaColor: Constants.deltaColor(for: netDelta.direction),
                                             trailingChartData: StatsIntervalDataParser.getChartData(for: .netRevenue, from: currentPeriodStats),
-                                            isRedacted: false)
+                                            isRedacted: false,
+                                            showSyncError: showSyncError,
+                                            syncErrorMessage: Localization.RevenueCard.noRevenue)
     }
 
     static func ordersCard(currentPeriodStats: OrderStatsV4?, previousPeriodStats: OrderStatsV4?) -> AnalyticsReportCardViewModel {
+        let showSyncError = currentPeriodStats == nil || previousPeriodStats == nil
         let ordersCountDelta = StatsDataTextFormatter.createOrderCountDelta(from: previousPeriodStats, to: currentPeriodStats)
         let orderValueDelta = StatsDataTextFormatter.createAverageOrderValueDelta(from: previousPeriodStats, to: currentPeriodStats)
 
@@ -188,10 +192,13 @@ private extension AnalyticsHubViewModel {
                                             trailingDelta: orderValueDelta.string,
                                             trailingDeltaColor: Constants.deltaColor(for: orderValueDelta.direction),
                                             trailingChartData: StatsIntervalDataParser.getChartData(for: .averageOrderValue, from: currentPeriodStats),
-                                            isRedacted: false)
+                                            isRedacted: false,
+                                            showSyncError: showSyncError,
+                                            syncErrorMessage: Localization.OrderCard.noOrders)
     }
 
     static func productCard(currentPeriodStats: OrderStatsV4?, previousPeriodStats: OrderStatsV4?) -> AnalyticsProductCardViewModel {
+        let showSyncError = currentPeriodStats == nil || previousPeriodStats == nil
         let itemsSold = StatsDataTextFormatter.createItemsSoldText(orderStats: currentPeriodStats)
         let itemsSoldDelta = StatsDataTextFormatter.createOrderItemsSoldDelta(from: previousPeriodStats, to: currentPeriodStats)
 
@@ -205,7 +212,8 @@ private extension AnalyticsHubViewModel {
                                                 .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)
+                                             isRedacted: false,
+                                             showSyncError: showSyncError)
     }
 
     static func timeRangeCard(timeRangeSelection: AnalyticsHubTimeRangeSelection) -> AnalyticsTimeRangeCardViewModel {
@@ -233,12 +241,16 @@ private extension AnalyticsHubViewModel {
             static let title = NSLocalizedString("REVENUE", comment: "Title for revenue analytics section in the Analytics Hub")
             static let leadingTitle = NSLocalizedString("Total Sales", comment: "Label for total sales (gross revenue) in the Analytics Hub")
             static let trailingTitle = NSLocalizedString("Net Sales", comment: "Label for net sales (net revenue) in the Analytics Hub")
+            static let noRevenue = NSLocalizedString("Unable to load revenue analytics",
+                                                     comment: "Text displayed when there is an error loading revenue stats data.")
         }
 
         enum OrderCard {
             static let title = NSLocalizedString("ORDERS", comment: "Title for order analytics section in the Analytics Hub")
             static let leadingTitle = NSLocalizedString("Total Orders", comment: "Label for total number of orders in the Analytics Hub")
             static let trailingTitle = NSLocalizedString("Average Order Value", comment: "Label for average value of orders in the Analytics Hub")
+            static let noOrders = NSLocalizedString("Unable to load order analytics",
+                                                    comment: "Text displayed when there is an error loading order stats data.")
         }
     }
 }

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

@@ -22,6 +22,10 @@ struct AnalyticsProductCard: View {
     ///
     let isRedacted: Bool
 
+    /// Indicates if there was an error loading the data for the card
+    ///
+    let showSyncError: Bool
+
     var body: some View {
         VStack(alignment: .leading) {
 
@@ -46,8 +50,17 @@ struct AnalyticsProductCard: View {
                     .shimmering(active: isRedacted)
             }
 
+            if showSyncError {
+                Text(Localization.noProducts)
+                    .foregroundColor(Color(.text))
+                    .subheadlineStyle()
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.top, Layout.columnSpacing)
+            }
+
             TopPerformersView(itemTitle: Localization.title.localizedCapitalized, valueTitle: Localization.itemsSold, rows: itemsSoldData)
                 .padding(.top, Layout.columnSpacing)
+
         }
         .padding(Layout.cardPadding)
     }
@@ -58,6 +71,8 @@ private extension AnalyticsProductCard {
     enum Localization {
         static let title = NSLocalizedString("Products", comment: "Title for the products card on the analytics hub screen.").localizedUppercase
         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.")
     }
 
     enum Layout {
@@ -81,7 +96,17 @@ struct AnalyticsProductCardPreviews: PreviewProvider {
                                 .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)
+                             isRedacted: false,
+                             showSyncError: false)
+            .previewLayout(.sizeThatFits)
+
+        AnalyticsProductCard(itemsSold: "-",
+                             delta: "0%",
+                             deltaBackgroundColor: .withColorStudio(.gray, shade: .shade0),
+                             itemsSoldData: [],
+                             isRedacted: false,
+                             showSyncError: true)
             .previewLayout(.sizeThatFits)
+            .previewDisplayName("No data")
     }
 }

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

@@ -24,6 +24,10 @@ struct AnalyticsProductCardViewModel {
     /// Indicates if the values should be hidden (for loading state)
     ///
     let isRedacted: Bool
+
+    /// Indicates if there was an error loading the data for the card
+    ///
+    let showSyncError: Bool
 }
 
 extension AnalyticsProductCardViewModel {
@@ -36,7 +40,8 @@ extension AnalyticsProductCardViewModel {
               delta: "+50%",
               deltaBackgroundColor: .lightGray,
               itemsSoldData: [.init(imageURL: nil, name: "Product Name", details: "Net Sales", value: "$5678")],
-              isRedacted: true)
+              isRedacted: true,
+              showSyncError: false)
     }
 
 }
@@ -50,5 +55,6 @@ extension AnalyticsProductCard {
         self.deltaBackgroundColor = viewModel.deltaBackgroundColor
         self.itemsSoldData = viewModel.itemsSoldData
         self.isRedacted = viewModel.isRedacted
+        self.showSyncError = viewModel.showSyncError
     }
 }

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

@@ -18,6 +18,9 @@ struct AnalyticsReportCard: View {
 
     let isRedacted: Bool
 
+    let showSyncError: Bool
+    let syncErrorMessage: String
+
     // Layout metrics that scale based on accessibility changes
     @ScaledMetric private var scaledChartWidth: CGFloat = Layout.chartWidth
     @ScaledMetric private var scaledChartHeight: CGFloat = Layout.chartHeight
@@ -79,6 +82,13 @@ struct AnalyticsReportCard: View {
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
             }
+
+            if showSyncError {
+               Text(syncErrorMessage)
+                   .foregroundColor(Color(.text))
+                   .subheadlineStyle()
+                   .frame(maxWidth: .infinity, alignment: .leading)
+           }
         }
         .padding(Layout.cardPadding)
     }
@@ -110,7 +120,26 @@ struct Previews: PreviewProvider {
                             trailingDelta: "-3%",
                             trailingDeltaColor: .withColorStudio(.red, shade: .shade40),
                             trailingChartData: [50.0, 15.0, 20.0, 2.0, 10.0, 0.0, 40.0, 15.0, 20.0, 2.0, 10.0, 0.0],
-                            isRedacted: false)
+                            isRedacted: false,
+                            showSyncError: false,
+                            syncErrorMessage: "")
+            .previewLayout(.sizeThatFits)
+
+        AnalyticsReportCard(title: "REVENUE",
+                            leadingTitle: "Total Sales",
+                            leadingValue: "-",
+                            leadingDelta: "0%",
+                            leadingDeltaColor: .withColorStudio(.gray, shade: .shade0),
+                            leadingChartData: [],
+                            trailingTitle: "Net Sales",
+                            trailingValue: "-",
+                            trailingDelta: "0%",
+                            trailingDeltaColor: .withColorStudio(.gray, shade: .shade0),
+                            trailingChartData: [],
+                            isRedacted: false,
+                            showSyncError: true,
+                            syncErrorMessage: "Error loading revenue analytics")
             .previewLayout(.sizeThatFits)
+            .previewDisplayName("No data")
     }
 }

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

@@ -52,6 +52,14 @@ struct AnalyticsReportCardViewModel {
     /// Indicates if the values should be hidden (for loading state)
     ///
     let isRedacted: Bool
+
+    /// Indicates if there was an error loading the data for the card
+    ///
+    let showSyncError: Bool
+
+    /// Message to display if there was an error loading the data for the card
+    ///
+    let syncErrorMessage: String
 }
 
 extension AnalyticsReportCardViewModel {
@@ -71,7 +79,9 @@ extension AnalyticsReportCardViewModel {
               trailingDelta: "+50%",
               trailingDeltaColor: .lightGray,
               trailingChartData: [],
-              isRedacted: true)
+              isRedacted: true,
+              showSyncError: false,
+              syncErrorMessage: "")
     }
 }
 
@@ -91,5 +101,7 @@ extension AnalyticsReportCard {
         self.trailingDeltaColor = viewModel.trailingDeltaColor
         self.trailingChartData = viewModel.trailingChartData
         self.isRedacted = viewModel.isRedacted
+        self.showSyncError = viewModel.showSyncError
+        self.syncErrorMessage = viewModel.syncErrorMessage
     }
 }

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

@@ -33,7 +33,7 @@ final class AnalyticsHubViewModelTests: XCTestCase {
         XCTAssertEqual(vm.productCard.itemsSold, "5")
     }
 
-    func test_cards_viewmodels_show_empty_data_after_getting_error_from_network() async {
+    func test_cards_viewmodels_show_sync_error_after_getting_error_from_network() async {
         // Given
         let vm = AnalyticsHubViewModel(siteID: 123, statsTimeRange: .thisMonth, stores: stores)
         stores.whenReceivingAction(ofType: StatsActionV4.self) { action in
@@ -46,12 +46,33 @@ final class AnalyticsHubViewModelTests: XCTestCase {
         await vm.updateData()
 
         // Then
-        XCTAssertFalse(vm.revenueCard.isRedacted)
-        XCTAssertFalse(vm.ordersCard.isRedacted)
-        XCTAssertFalse(vm.productCard.isRedacted)
+        XCTAssertTrue(vm.revenueCard.showSyncError)
+        XCTAssertTrue(vm.ordersCard.showSyncError)
+        XCTAssertTrue(vm.productCard.showSyncError)
+    }
 
-        XCTAssertEqual(vm.revenueCard.leadingValue, "-")
-        XCTAssertEqual(vm.ordersCard.leadingValue, "-")
-        XCTAssertEqual(vm.productCard.itemsSold, "-")
+    func test_cards_viewmodels_redacted_while_updating_from_network() async {
+        // Given
+        let vm = AnalyticsHubViewModel(siteID: 123, statsTimeRange: .thisMonth, stores: stores)
+        let stats = OrderStatsV4.fake().copy(totals: .fake().copy(totalOrders: 15, totalItemsSold: 5, grossRevenue: 62))
+        var loadingRevenueCard: AnalyticsReportCardViewModel?
+        var loadingOrdersCard: AnalyticsReportCardViewModel?
+        var loadingProductsCard: AnalyticsProductCardViewModel?
+        stores.whenReceivingAction(ofType: StatsActionV4.self) { action in
+            if case let .retrieveCustomStats(_, _, _, _, _, _, completion) = action {
+                loadingRevenueCard = vm.revenueCard
+                loadingOrdersCard = vm.ordersCard
+                loadingProductsCard = vm.productCard
+                completion(.success(stats))
+            }
+        }
+
+        // When
+        await vm.updateData()
+
+        // Then
+        XCTAssertEqual(loadingRevenueCard?.isRedacted, true)
+        XCTAssertEqual(loadingOrdersCard?.isRedacted, true)
+        XCTAssertEqual(loadingProductsCard?.isRedacted, true)
     }
 }