Show sync error below analytics card placeholders

rachelmcr · rachelmcr · commit c2b646e16fe0 · 2022-12-01T15:53:42.000Z
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubView.swift
@@ -41,41 +41,29 @@ struct AnalyticsHubView: View {
                 VStack(spacing: Layout.dividerSpacing) {
                     Divider()
 
-                    if let viewModel = viewModel.revenueCard {
-                        AnalyticsReportCard(viewModel: viewModel)
-                            .padding(.horizontal, insets: safeAreaInsets)
-                            .background(Color(uiColor: .listForeground))
-                    } else {
-                        emptyCard(message: Localization.noRevenue)
-                    }
+                    AnalyticsReportCard(viewModel: viewModel.revenueCard)
+                        .padding(.horizontal, insets: safeAreaInsets)
+                        .background(Color(uiColor: .listForeground))
 
                     Divider()
                 }
 
                 VStack(spacing: Layout.dividerSpacing) {
                     Divider()
 
-                    if let viewModel = viewModel.ordersCard {
-                        AnalyticsReportCard(viewModel: viewModel)
-                            .padding(.horizontal, insets: safeAreaInsets)
-                            .background(Color(uiColor: .listForeground))
-                    } else {
-                        emptyCard(message: Localization.noOrders)
-                    }
+                    AnalyticsReportCard(viewModel: viewModel.ordersCard)
+                        .padding(.horizontal, insets: safeAreaInsets)
+                        .background(Color(uiColor: .listForeground))
 
                     Divider()
                 }
 
                 VStack(spacing: Layout.dividerSpacing) {
                     Divider()
 
-                    if let viewModel = viewModel.productCard {
-                        AnalyticsProductCard(viewModel: viewModel)
-                            .padding(.horizontal, insets: safeAreaInsets)
-                            .background(Color(uiColor: .listForeground))
-                    } else {
-                        emptyCard(message: Localization.noProducts)
-                    }
+                    AnalyticsProductCard(viewModel: viewModel.productCard)
+                        .padding(.horizontal, insets: safeAreaInsets)
+                        .background(Color(uiColor: .listForeground))
 
                     Divider()
                 }
@@ -91,29 +79,13 @@ struct AnalyticsHubView: View {
             await viewModel.updateData()
         }
     }
-
-    @ViewBuilder
-    private func emptyCard(message: String) -> some View {
-        Text(message)
-            .frame(maxWidth: .infinity)
-            .foregroundColor(Color(.text))
-            .subheadlineStyle()
-            .padding()
-            .background(Color(uiColor: .listForeground))
-    }
 }
 
 /// Constants
 ///
 private extension AnalyticsHubView {
     struct Localization {
         static let title = NSLocalizedString("Analytics", comment: "Title for the Analytics Hub screen.")
-        static let noRevenue = NSLocalizedString("Unable to load revenue analytics",
-                                                 comment: "Text displayed when there is an error loading revenue stats data.")
-        static let noOrders = NSLocalizedString("Unable to load order analytics",
-                                                comment: "Text displayed when there is an error loading order stats data.")
-        static let noProducts = NSLocalizedString("Unable to load product analytics",
-                                                  comment: "Text displayed when there is an error loading product stats data.")
     }
 
     struct Layout {
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift
@@ -28,28 +28,19 @@ final class AnalyticsHubViewModel: ObservableObject {
 
     /// Revenue Card ViewModel
     ///
-    /// Setting an `AnalyticsHubViewModel` with `nil` order data displays the revenue card with placeholders.
-    /// Setting the view model to `nil` displays an error message instead of the revenue card.
-    ///
-    @Published var revenueCard: AnalyticsReportCardViewModel? = AnalyticsHubViewModel.revenueCard(currentPeriodStats: nil, previousPeriodStats: nil)
+    @Published var revenueCard = AnalyticsHubViewModel.revenueCard(currentPeriodStats: nil, previousPeriodStats: nil)
 
     /// Orders Card ViewModel
     ///
-    /// Setting an `AnalyticsHubViewModel` with `nil` order data displays the order card with placeholders.
-    /// Setting the view model to `nil` displays an error message instead of the order card.
-    ///
-    @Published var ordersCard: AnalyticsReportCardViewModel? = AnalyticsHubViewModel.ordersCard(currentPeriodStats: nil, previousPeriodStats: nil)
+    @Published var ordersCard = AnalyticsHubViewModel.ordersCard(currentPeriodStats: nil, previousPeriodStats: nil)
 
     /// Time Range ViewModel
     ///
     @Published var timeRangeCard: AnalyticsTimeRangeCardViewModel
 
     /// Products Card ViewModel
     ///
-    /// Setting an `AnalyticsProductCardViewModel` with `nil` order data displays the product card with placeholders.
-    /// Setting the view model to `nil` displays an error message instead of the product card.
-    ///
-    @Published var productCard: AnalyticsProductCardViewModel? = AnalyticsHubViewModel.productCard(currentPeriodStats: nil, previousPeriodStats: nil)
+    @Published var productCard = AnalyticsHubViewModel.productCard(currentPeriodStats: nil, previousPeriodStats: nil)
 
     // MARK: Private data
 
@@ -120,15 +111,14 @@ private extension AnalyticsHubViewModel {
 private extension AnalyticsHubViewModel {
 
     func switchToLoadingState() {
-        self.revenueCard = revenueCard?.redacted
-        self.ordersCard = ordersCard?.redacted
-        self.productCard = productCard?.redacted
+        self.revenueCard = revenueCard.redacted
+        self.ordersCard = ordersCard.redacted
+        self.productCard = productCard.redacted
     }
 
     func switchToErrorState() {
-        self.revenueCard = nil
-        self.ordersCard = nil
-        self.productCard = nil
+        self.currentOrderStats = nil
+        self.previousOrderStats = nil
     }
 
     func bindViewModelsWithData() {
@@ -144,6 +134,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)
 
@@ -159,10 +150,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)
 
@@ -178,17 +172,21 @@ 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)
 
         return AnalyticsProductCardViewModel(itemsSold: itemsSold,
                                              delta: itemsSoldDelta.string,
                                              deltaBackgroundColor: Constants.deltaColor(for: itemsSoldDelta.direction),
-                                             isRedacted: false)
+                                             isRedacted: false,
+                                             showSyncError: showSyncError)
     }
 }
 
@@ -210,12 +208,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.")
         }
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift
@@ -18,6 +18,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) {
 
@@ -41,6 +45,14 @@ struct AnalyticsProductCard: View {
                     .redacted(reason: isRedacted ? .placeholder : [])
                     .shimmering(active: isRedacted)
             }
+
+            if showSyncError {
+                Text(Localization.noProducts)
+                    .foregroundColor(Color(.text))
+                    .subheadlineStyle()
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.top, Layout.columnSpacing)
+            }
         }
         .padding(Layout.cardPadding)
     }
@@ -51,6 +63,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 {
@@ -67,7 +81,16 @@ struct AnalyticsProductCardPreviews: PreviewProvider {
         AnalyticsProductCard(itemsSold: "2,234",
                              delta: "+23%",
                              deltaBackgroundColor: .withColorStudio(.green, shade: .shade50),
-                             isRedacted: false)
+                             isRedacted: false,
+                             showSyncError: false)
+            .previewLayout(.sizeThatFits)
+
+        AnalyticsProductCard(itemsSold: "-",
+                             delta: "0%",
+                             deltaBackgroundColor: .withColorStudio(.gray, shade: .shade0),
+                             isRedacted: false,
+                             showSyncError: true)
             .previewLayout(.sizeThatFits)
+            .previewDisplayName("No data")
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift
@@ -20,6 +20,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 {
@@ -31,7 +35,8 @@ extension AnalyticsProductCardViewModel {
         .init(itemsSold: "1000",
               delta: "+50%",
               deltaBackgroundColor: .lightGray,
-              isRedacted: true)
+              isRedacted: true,
+              showSyncError: false)
     }
 }
 
@@ -43,5 +48,6 @@ extension AnalyticsProductCard {
         self.delta = viewModel.delta
         self.deltaBackgroundColor = viewModel.deltaBackgroundColor
         self.isRedacted = viewModel.isRedacted
+        self.showSyncError = viewModel.showSyncError
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift b/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")
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift b/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
     }
 }
diff --git a/WooCommerce/WooCommerceTests/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModelTests.swift b/WooCommerce/WooCommerceTests/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModelTests.swift

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,10 @@ struct AnalyticsProductCardViewModel {`
`20`	`20`	`/// Indicates if the values should be hidden (for loading state)`
`21`	`21`	`///`
`22`	`22`	`let isRedacted: Bool`
	`23`	`+`
	`24`	`+ /// Indicates if there was an error loading the data for the card`
	`25`	`+ ///`
	`26`	`+ let showSyncError: Bool`
`23`	`27`	`}`
`24`	`28`
`25`	`29`	`extension AnalyticsProductCardViewModel {`
`@@ -31,7 +35,8 @@ extension AnalyticsProductCardViewModel {`
`31`	`35`	`.init(itemsSold: "1000",`
`32`	`36`	`delta: "+50%",`
`33`	`37`	`deltaBackgroundColor: .lightGray,`
`34`		`- isRedacted: true)`
	`38`	`+ isRedacted: true,`
	`39`	`+ showSyncError: false)`
`35`	`40`	`}`
`36`	`41`	`}`
`37`	`42`
`@@ -43,5 +48,6 @@ extension AnalyticsProductCard {`
`43`	`48`	`self.delta = viewModel.delta`
`44`	`49`	`self.deltaBackgroundColor = viewModel.deltaBackgroundColor`
`45`	`50`	`self.isRedacted = viewModel.isRedacted`
	`51`	`+ self.showSyncError = viewModel.showSyncError`
`46`	`52`	`}`
`47`	`53`	`}`