Merge pull request #8413 from woocommerce/issue/8344-subtitles

Analytics Hub: Format Ranged Picker dates

Author: Ecarrion

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

@@ -38,7 +38,7 @@ struct AnalyticsTimeRangeCard: View {
                     ServiceLocator.analytics.track(event: .AnalyticsHub.dateRangeOptionSelected(selection.tracksIdentifier))
                 }
                 .sheet(isPresented: $showCustomRangeSelectionView) {
-                    RangedDatePicker(startDate: selectionType.startDate, endDate: selectionType.endDate) { start, end in
+                    RangedDatePicker(startDate: selectionType.startDate, endDate: selectionType.endDate, datesFormatter: DatesFormatter()) { start, end in
                         showTimeRangeSelectionView = false // Dismiss the initial sheet for a smooth transition
                         self.selectionType = .custom(start: start, end: end)
                     }
@@ -115,6 +115,16 @@ struct AnalyticsTimeRangeCard: View {
     }
 }
 
+private extension AnalyticsTimeRangeCard {
+    /// Specific `DatesFormatter` for the `RangedDatePicker` when presented in the analytics hub module.
+    ///
+    struct DatesFormatter: RangedDateTextFormatter {
+        func format(start: Date, end: Date) -> String {
+            AnalyticsHubTimeRange(start: start, end: end).formatToString(simplified: false, timezone: .current, calendar: Locale.current.calendar)
+        }
+    }
+}
+
 // MARK: Constants
 private extension AnalyticsTimeRangeCard {
     enum Layout {

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/RangedDatePicker.swift

@@ -1,6 +1,12 @@
 import Foundation
 import SwiftUI
 
+/// Defines a decoupled way to format selected dates
+///
+protocol RangedDateTextFormatter {
+    func format(start: Date, end: Date) -> String
+}
+
 /// View to select a custom date range.
 /// Consists of two date pickers laid out vertically.
 ///
@@ -20,11 +26,19 @@ struct RangedDatePicker: View {
     ///
     @State private var endDate: Date
 
+    /// Type to format the subtitle range.
+    ///
+    private let datesFormatter: RangedDateTextFormatter
+
     /// Custom `init` to provide intial start and end dates.
     ///
-    init(startDate: Date? = nil, endDate: Date? = nil, datesSelected: ((_ start: Date, _ end: Date) -> Void)? = nil) {
+    init(startDate: Date? = nil,
+         endDate: Date? = nil,
+         datesFormatter: RangedDateTextFormatter,
+         datesSelected: ((_ start: Date, _ end: Date) -> Void)? = nil) {
         self._startDate = State(initialValue: startDate ?? Date())
         self._endDate = State(initialValue: endDate ?? Date())
+        self.datesFormatter = datesFormatter
         self.datesSelected = datesSelected
     }
 
@@ -65,8 +79,7 @@ struct RangedDatePicker: View {
                         Text(Localization.title)
                             .headlineStyle()
 
-                        // TODO: Properly format date ranges outside the view
-                        Text("\(DateFormatter.monthAndDayFormatter.string(from: startDate)) - \(DateFormatter.monthAndDayFormatter.string(from: endDate))")
+                        Text(datesFormatter.format(start: startDate, end: endDate))
                             .captionStyle()
                     }
                 }
@@ -109,7 +122,14 @@ private extension RangedDatePicker {
 // MARK: Previews
 
 struct RangedDatePickerPreview: PreviewProvider {
+
+    private struct PreviewFormatter: RangedDateTextFormatter {
+        func format(start: Date, end: Date) -> String {
+            "\(start.description) - \(end.description)"
+        }
+    }
+
     static var previews: some View {
-        RangedDatePicker()
+        RangedDatePicker(datesFormatter: PreviewFormatter())
     }
 }