[Brand Updates] Update empty state for some Dashboard cards (#14798)

woocommerce · Jan 7, 2025 · 585e75c · 585e75c
2 parents 404827c + 07882e3
commit 585e75c
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 65 deletions.
diff --git a/WooCommerce/Classes/Extensions/UIImage+Woo.swift b/WooCommerce/Classes/Extensions/UIImage+Woo.swift
@@ -1351,6 +1351,10 @@ extension UIImage {
         UIImage(imageLiteralResourceName: "magnifying-glass-not-found")
     }
 
+    static var magnifyingGlassNotFoundGrey: UIImage {
+        UIImage(imageLiteralResourceName: "magnifying-glass-not-found-grey")
+    }
+
     static var groupedProductsImage: UIImage {
         UIImage(named: "grouped-products")!
 	}

diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/ProductStock/ProductStockDashboardCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/ProductStock/ProductStockDashboardCard.swift
@@ -171,7 +171,7 @@ private extension ProductStockDashboardCard {
 
     var emptyView: some View {
         VStack(alignment: .center, spacing: Layout.padding) {
-            Image(uiImage: .noStoreImage)
+            Image(uiImage: .productBlouseImage)
             Text(String(format: Localization.emptyStateTitle,
                         viewModel.selectedStockType.displayedName))
                 .subheadlineStyle()

diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StorePerformanceView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StorePerformanceView.swift
@@ -160,50 +160,58 @@ private extension StorePerformanceView {
         }
     }
 
+    @ViewBuilder
     var statsView: some View {
-        VStack(spacing: Layout.padding) {
-            VStack(spacing: Layout.contentVerticalSpacing) {
-                if let selectedDateText = viewModel.selectedDateText {
-                    Text(selectedDateText)
-                        .font(Font(StyleManager.statsTitleFont))
-                }
+        if viewModel.hasRevenue {
+            VStack(spacing: Layout.padding) {
+                VStack(spacing: Layout.contentVerticalSpacing) {
+                    if let selectedDateText = viewModel.selectedDateText {
+                        Text(selectedDateText)
+                            .font(Font(StyleManager.statsTitleFont))
+                    }
 
-                Text(viewModel.revenueStatsText)
-                    .fontWeight(.semibold)
-                    .foregroundStyle(statsValueColor)
-                    .largeTitleStyle()
-                    .accessibilityIdentifier("revenue-value")
+                    Text(viewModel.revenueStatsText)
+                        .fontWeight(.semibold)
+                        .foregroundStyle(statsValueColor)
+                        .largeTitleStyle()
+                        .accessibilityIdentifier("revenue-value")
 
-                Text(Localization.revenue)
-                    .if(!viewModel.hasRevenue) { $0.foregroundStyle(Color(.textSubtle)) }
-                    .font(Font(StyleManager.statsTitleFont))
-            }
+                    Text(Localization.revenue)
+                        .if(!viewModel.hasRevenue) { $0.foregroundStyle(Color(.textSubtle)) }
+                        .font(Font(StyleManager.statsTitleFont))
+                }
 
-            HStack(alignment: .bottom) {
-                Group {
-                    statsItemView(title: Localization.orders,
-                                  value: viewModel.orderStatsText,
-                                  redactMode: .none)
+                HStack(alignment: .bottom) {
+                    Group {
+                        statsItemView(title: Localization.orders,
+                                      value: viewModel.orderStatsText,
+                                      redactMode: .none)
                         .frame(maxWidth: .infinity)
 
-                    statsItemView(title: Localization.visitors,
-                                  value: viewModel.visitorStatsText,
-                                  redactMode: .withIcon)
+                        statsItemView(title: Localization.visitors,
+                                      value: viewModel.visitorStatsText,
+                                      redactMode: .withIcon)
                         .frame(maxWidth: .infinity)
 
-                    statsItemView(title: Localization.conversion,
-                                  value: viewModel.conversionStatsText,
-                                  redactMode: .withoutIcon)
+                        statsItemView(title: Localization.conversion,
+                                      value: viewModel.conversionStatsText,
+                                      redactMode: .withoutIcon)
                         .frame(maxWidth: .infinity)
-
+                    }
                 }
-                .renderedIf(viewModel.hasRevenue)
-
-                Text(Localization.noRevenueText)
-                    .subheadlineStyle()
-                    .frame(maxWidth: .infinity)
-                    .renderedIf(!viewModel.hasRevenue)
             }
+        } else {
+            emptyStatsView
+        }
+    }
+
+    var emptyStatsView: some View {
+        VStack(spacing: Layout.emptyViewSpacing) {
+            Image(.magnifyingGlassNotFoundGrey)
+
+            Text(Localization.noRevenueText)
+                .subheadlineStyle()
+                .frame(maxWidth: .infinity)
         }
     }
 
@@ -262,7 +270,8 @@ private extension StorePerformanceView {
 
     @ViewBuilder
     var chartView: some View {
-        if let chartViewModel = viewModel.chartViewModel {
+        if let chartViewModel = viewModel.chartViewModel,
+           chartViewModel.hasRevenue {
             VStack {
                 StoreStatsChart(viewModel: chartViewModel) { selectedIndex in
                     viewModel.trackInteraction()
@@ -325,6 +334,7 @@ private extension StorePerformanceView {
         static let redactedViewIconSize: CGFloat = 14
         static let redactedViewIconOffset = CGSize(width: 16, height: 0)
         static let hideIconVerticalPadding: CGFloat = 8
+        static let emptyViewSpacing: CGFloat = 24
     }
 
     enum Localization {

diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StoreStatsChart.swift b/WooCommerce/Classes/ViewRelated/Dashboard/StoreStats/StoreStatsChart.swift
@@ -93,7 +93,6 @@ struct StoreStatsChart: View {
             }
         }
         .padding(Constants.chartPadding)
-        .if(!viewModel.hasRevenue) { $0.overlay { emptyChartOverlay } }
     }
 
     private func updateSelectedDate(at location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) {
@@ -128,26 +127,6 @@ struct StoreStatsChart: View {
     }
 }
 
-private extension StoreStatsChart {
-    var emptyChartOverlay: some View {
-        // Simulate an empty chart
-        VStack {
-            Divider()
-            Spacer()
-            Divider()
-            Spacer()
-            Divider()
-            Spacer()
-        }
-        .overlay {
-            Image(.magnifyingGlassNotFound)
-                .opacity(Constants.EmptyChartOverlay.opacity)
-                .padding(.bottom, Constants.EmptyChartOverlay.bottomPadding)
-        }
-        .renderedIf(!viewModel.hasRevenue)
-    }
-}
-
 private extension StoreStatsChart {
     enum Localization {
         static let xValue = NSLocalizedString(
@@ -190,11 +169,6 @@ private extension StoreStatsChart {
         )
         static let chartGradientBottomColor = Color.clear
         static let chartPadding: CGFloat = 8
-
-        enum EmptyChartOverlay {
-            static let opacity: CGFloat = 0.5
-            static let bottomPadding: CGFloat = 32
-        }
     }
 }
 

diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/TopPerformers/TopPerformersEmptyView.swift b/WooCommerce/Classes/ViewRelated/Dashboard/TopPerformers/TopPerformersEmptyView.swift
@@ -4,8 +4,8 @@ import SwiftUI
 /// Contains a placeholder image and text.
 struct TopPerformersEmptyView: View {
     var body: some View {
-        VStack(alignment: .center, spacing: Layout.defaultSpacing) {
-            Image(uiImage: .noStoreImage)
+        VStack(alignment: .center, spacing: Layout.spacing) {
+            Image(uiImage: .magnifyingGlassNotFoundGrey)
             Text(Localization.text)
                 .subheadlineStyle()
         }
@@ -22,8 +22,8 @@ private extension TopPerformersEmptyView {
     }
 
     enum Layout {
-        static let defaultSpacing: CGFloat = 10
-        static let padding: EdgeInsets = .init(top: 0, leading: defaultSpacing, bottom: defaultSpacing, trailing: defaultSpacing)
+        static let spacing: CGFloat = 24
+        static let padding: EdgeInsets = .init(top: 0, leading: 10, bottom: 10, trailing: 10)
     }
 }
 

diff --git a/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/Contents.json b/WooCommerce/Resources/Images.xcassets/magnifying-glass-not-found-grey.imageset/Contents.json
@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "magnifying-glass-not-found-light.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "magnifying-glass-not-found-dark.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...ges.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-dark.pdf b/...ges.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-dark.pdf
diff --git a/...es.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-light.pdf b/...es.xcassets/magnifying-glass-not-found-grey.imageset/magnifying-glass-not-found-light.pdf