Merge pull request #8342 from woocommerce/issue/8200-present-UI

Analytics Hub: Integrate Custom Range Selector UI

Author: Ecarrion

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

@@ -208,18 +208,7 @@ private extension AnalyticsHubViewModel {
             .removeDuplicates()
             .sink { [weak self] newSelectionType in
                 guard let self else { return }
-
-                // Temporary while the Custom Range Selection integration
-                let curatedSelection: AnalyticsHubTimeRangeSelection.SelectionType = {
-                    switch newSelectionType {
-                    case .custom(start: nil, end: nil):
-                        return .custom(start: Date().startOfWeek(timezone: .current), end: Date().endOfDay(timezone: .current))
-                    default:
-                        return newSelectionType
-                    }
-                }()
-
-                self.timeRangeSelection = AnalyticsHubTimeRangeSelection(selectionType: curatedSelection)
+                self.timeRangeSelection = AnalyticsHubTimeRangeSelection(selectionType: newSelectionType)
                 self.timeRangeCard = AnalyticsHubViewModel.timeRangeCard(timeRangeSelection: self.timeRangeSelection,
                                                                          usageTracksEventEmitter: self.usageTracksEventEmitter)
                 Task.init {

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

@@ -9,8 +9,14 @@ struct AnalyticsTimeRangeCard: View {
     let previousRangeDescription: String
     @Binding var selectionType: AnalyticsHubTimeRangeSelection.SelectionType
 
+    /// Determines if the time range selection should be shown.
+    ///
     @State private var showTimeRangeSelectionView: Bool = false
 
+    /// Determines if the custom range selection should be shown.
+    ///
+    @State private var showCustomRangeSelectionView: Bool = false
+
     private let usageTracksEventEmitter: StoreStatsUsageTracksEventEmitter
 
     init(viewModel: AnalyticsTimeRangeCardViewModel, selectionType: Binding<AnalyticsHubTimeRangeSelection.SelectionType>) {
@@ -27,10 +33,16 @@ struct AnalyticsTimeRangeCard: View {
                 SelectionList(title: Localization.timeRangeSelectionTitle,
                               items: AnalyticsHubTimeRangeSelection.SelectionType.allCases,
                               contentKeyPath: \.description,
-                              selected: $selectionType) { selection in
+                              selected: internalSelectionBinding()) { selection in
                     usageTracksEventEmitter.interacted()
                     ServiceLocator.analytics.track(event: .AnalyticsHub.dateRangeOptionSelected(selection.tracksIdentifier))
                 }
+                .sheet(isPresented: $showCustomRangeSelectionView) {
+                    RangedDatePicker() { start, end in
+                        showTimeRangeSelectionView = false // Dismiss the initial sheet for a smooth transition
+                        self.selectionType = .custom(start: start, end: end)
+                    }
+                }
             }
     }
 
@@ -80,6 +92,34 @@ struct AnalyticsTimeRangeCard: View {
         .padding([.top, .bottom])
         .frame(maxWidth: .infinity)
     }
+
+    /// Tracks the range selection internally to determine if the custom range selection should be presented or not.
+    /// If custom range selection is not needed, the internal selection is forwarded to `selectionType`.
+    ///
+    private func internalSelectionBinding() -> Binding<AnalyticsHubTimeRangeSelection.SelectionType> {
+        .init(
+            get: {
+                // Temporary
+                switch selectionType {
+                    // If a `custom` case is set return one with nil values so the Custom row is selected
+                case .custom:
+                    return .custom(start: nil, end: nil)
+                default:
+                    return selectionType
+                }
+            },
+            set: { newValue in
+                switch newValue {
+                    // If we get a `custom` case with nil dates it is because we need to present the custom range selection
+                case .custom(start: nil, end: nil):
+                    showCustomRangeSelectionView = true
+                default:
+                    // Any other selection should be forwarded to our parent binding.
+                    selectionType = newValue
+                }
+            }
+        )
+    }
 }
 
 // MARK: Constants