Site Domains: Modernize UI 2/2 - Integrate status and navigation to domain details

RELEASE-NOTES.txt

@@ -6,6 +6,7 @@
 * [**] Re-enable the support for using Security Keys as a second factor during login [#22258]
 * [*] Fix crash in editor that sometimes happens after modifying tags or categories [#22265]
 * [*] Add defensive code to make sure the retain cycles in the editor don't lead to crashes [#22252]
+* [*] [Jetpack-only] Updated Site Domains screen to make domains management more convenient [#22294, #22311]
 
 23.9
 -----

WordPress/Classes/Services/Domains/DomainsService+AllDomains.swift

@@ -1,7 +1,11 @@
 import Foundation
 import WordPressKit
 
-extension DomainsService {
+protocol DomainsServiceAllDomainsFetching {
+    func fetchAllDomains(resolveStatus: Bool, noWPCOM: Bool, completion: @escaping (DomainsServiceRemote.AllDomainsEndpointResult) -> Void)
+}
+
+extension DomainsService: DomainsServiceAllDomainsFetching {
 
     /// Makes a GET request to `/v1.1/all-domains` endpoint and returns a list of domain objects.
     ///

WordPress/Classes/ViewRelated/Domains/View Models/DomainsStateViewModel.swift

@@ -0,0 +1,64 @@
+import Foundation
+
+struct DomainsStateViewModel {
+    let title: String
+    let description: String
+    let button: Button?
+
+    struct Button {
+        let title: String
+        let action: () -> Void
+    }
+}
+
+extension DomainsStateViewModel {
+    static func errorMessageViewModel(from error: Error, action: @escaping () -> Void) -> DomainsStateViewModel {
+        let title: String
+        let description: String
+        let button: DomainsStateViewModel.Button = .init(title: Strings.errorStateButtonTitle) {
+            action()
+        }
+
+        let nsError = error as NSError
+        if nsError.domain == NSURLErrorDomain, nsError.code == NSURLErrorNotConnectedToInternet {
+            title = Strings.offlineEmptyStateTitle
+            description = Strings.offlineEmptyStateDescription
+        } else {
+            title = Strings.errorEmptyStateTitle
+            description = Strings.errorEmptyStateDescription
+        }
+
+        return .init(title: title, description: description, button: button)
+    }
+}
+
+extension DomainsStateViewModel {
+    enum Strings {
+        static let offlineEmptyStateTitle = NSLocalizedString(
+            "domain.management.offline.empty.state.title",
+            value: "No Internet Connection",
+            comment: "The empty state title in All Domains screen when the user is offline"
+        )
+        static let offlineEmptyStateDescription = NSLocalizedString(
+            "domain.management.offline.empty.state.description",
+            value: "Please check your network connection and try again.",
+            comment: "The empty state description in All Domains screen when the user is offline"
+        )
+        static let errorEmptyStateTitle = NSLocalizedString(
+            "domain.management.error.empty.state.title",
+            value: "Something went wrong",
+            comment: "The empty state title in All Domains screen when an error occurs"
+        )
+
+        static let errorEmptyStateDescription = NSLocalizedString(
+            "domain.management.error.empty.state.description",
+            value: "We encountered an error while loading your domains. Please contact support if the issue persists.",
+            comment: "The empty state description in All Domains screen when an error occurs"
+        )
+        static let errorStateButtonTitle = NSLocalizedString(
+            "domain.management.error.state.button.title",
+            value: "Try again",
+            comment: "The empty state button title in All Domains screen when an error occurs"
+        )
+    }
+}

WordPress/Classes/ViewRelated/Domains/View Models/SiteDomainsViewModel.swift

@@ -1,94 +1,119 @@
 import Foundation
+import WordPressKit
 import Combine
 
 final class SiteDomainsViewModel: ObservableObject {
-    struct Section: Identifiable {
-        enum SectionKind {
-            case rows([AllDomainsListCardView.ViewModel])
-            case addDomain
-            case upgradePlan
-        }
-
-        let id = UUID()
-        let title: String?
-        let footer: String?
-        let content: SectionKind
-    }
-
-    private let blogService: BlogService
     private let blog: Blog
+    private let domainsService: DomainsServiceAllDomainsFetching?
 
     @Published
-    private(set) var sections: [Section]
+    private(set) var state: State = .loading
+    private(set) var loadedDomains: [DomainsService.AllDomainsListItem] = []
 
-    init(blog: Blog, blogService: BlogService) {
-        self.sections = Self.buildSections(from: blog)
+    init(blog: Blog, domainsService: DomainsServiceAllDomainsFetching?) {
         self.blog = blog
-        self.blogService = blogService
+        self.domainsService = domainsService
     }
 
     func refresh() {
-        blogService.refreshDomains(for: blog, success: { [weak self] in
-            guard let self else { return }
-            self.sections = Self.buildSections(from: blog)
-        }, failure: nil)
+        domainsService?.fetchAllDomains(resolveStatus: true, noWPCOM: true, completion: { [weak self] result in
+            guard let self else {
+                return
+            }
+            switch result {
+            case .success(let domains):
+                self.loadedDomains = domains
+                let sections = Self.buildSections(from: blog, domains: domains)
+                self.state = .normal(sections)
+            case .failure(let error):
+                self.state = .message(self.errorMessageViewModel(from: error))
+            }
+        })
+    }
+
+    private func errorMessageViewModel(from error: Error) -> DomainsStateViewModel {
+        return DomainsStateViewModel.errorMessageViewModel(from: error) { [weak self] in
+            self?.state = .loading
+            self?.refresh()
+        }
     }
 
     // MARK: - Sections
 
-    private static func buildSections(from blog: Blog) -> [Section] {
-        return Self.buildFreeDomainSections(from: blog) + Self.buildDomainsSections(from: blog)
+    private static func buildSections(from blog: Blog, domains: [DomainsService.AllDomainsListItem]) -> [Section] {
+        return Self.buildFreeDomainSections(from: blog) + Self.buildDomainsSections(from: blog, domains: domains)
     }
 
     private static func buildFreeDomainSections(from blog: Blog) -> [Section] {
         guard let freeDomain = blog.freeDomain else { return [] }
-        return [Section(
-            title: Strings.freeDomainSectionTitle,
-            footer: blog.freeDomainIsPrimary ? Strings.primaryDomainDescription : nil,
-            content: .rows([.init(
-                name: blog.freeSiteAddress,
-                description: nil,
-                status: nil,
-                expiryDate: DomainExpiryDateFormatter.expiryDate(for: freeDomain),
-                isPrimary: freeDomain.isPrimaryDomain
-            )])
-        )]
+        return [
+            Section(
+                title: Strings.freeDomainSectionTitle,
+                footer: blog.freeDomainIsPrimary ? Strings.primaryDomainDescription : nil,
+                content: .rows([.init(
+                    viewModel: .init(
+                        name: blog.freeSiteAddress,
+                        description: nil,
+                        status: nil,
+                        expiryDate: DomainExpiryDateFormatter.expiryDate(for: freeDomain),
+                        isPrimary: freeDomain.isPrimaryDomain
+                    ),
+                    navigation: nil)])
+            )
+        ]
     }
 
-    private static func buildDomainsSections(from blog: Blog) -> [Section] {
+    private static func buildDomainsSections(from blog: Blog, domains: [DomainsService.AllDomainsListItem]) -> [Section] {
         var sections: [Section] = []
 
-        let primaryDomain = blog.domainsList.first(where: { $0.domain.isPrimaryDomain })
-        let otherDomains = blog.domainsList.filter { !$0.domain.isPrimaryDomain }
+        let primaryDomainName = blog.domainsList.first(where: { $0.domain.isPrimaryDomain })?.domain.domainName
+        var primaryDomain: DomainsService.AllDomainsListItem?
+        var otherDomains: [DomainsService.AllDomainsListItem] = []
+
+        for domain in domains {
+            if domain.blogId == blog.dotComID?.intValue {
+                if primaryDomainName == domain.domain {
+                    primaryDomain = domain
+                } else {
+                    otherDomains.append(domain)
+                }
+            }
+        }
 
         if let primaryDomain {
             let section = Section(
-                title: Strings.domainsListSectionTitle,
+                title: String(format: Strings.domainsListSectionTitle, blog.title ?? blog.freeSiteAddress),
                 footer: Strings.primaryDomainDescription,
                 content: .rows([.init(
-                    name: primaryDomain.domain.domainName,
-                    description: nil,
-                    status: nil,
-                    expiryDate: DomainExpiryDateFormatter.expiryDate(for: primaryDomain.domain),
-                    isPrimary: primaryDomain.domain.isPrimaryDomain
+                    viewModel: .init(
+                        name: primaryDomain.domain,
+                        description: nil,
+                        status: primaryDomain.status,
+                        expiryDate: AllDomainsListItemViewModel.expiryDate(from: primaryDomain),
+                        isPrimary: true
+                    ),
+                    navigation: navigation(from: primaryDomain)
                 )])
             )
             sections.append(section)
         }
 
         if otherDomains.count > 0 {
             let domainRows = otherDomains.map {
-                AllDomainsListCardView.ViewModel(
-                    name: $0.domain.domainName,
-                    description: nil,
-                    status: nil,
-                    expiryDate: DomainExpiryDateFormatter.expiryDate(for: $0.domain),
-                    isPrimary: false
+                SiteDomainsViewModel.Section.Row(
+                    viewModel: .init(
+                        name: $0.domain,
+                        description: nil,
+                        status: $0.status,
+                        expiryDate: AllDomainsListItemViewModel.expiryDate(from: $0),
+                        isPrimary: false
+                    ),
+                    navigation: navigation(from: $0)
                 )
             }
 
             let section = Section(
-                title: primaryDomain == nil ? Strings.domainsListSectionTitle : nil,
+                title: primaryDomain == nil ? String(format: Strings.domainsListSectionTitle, blog.title ?? blog.freeSiteAddress) : nil,
                 footer: nil,
                 content: .rows(domainRows)
             )
@@ -104,9 +129,13 @@ final class SiteDomainsViewModel: ObservableObject {
 
         return sections
     }
+
+    private static func navigation(from domain: DomainsService.AllDomainsListItem) -> SiteDomainsViewModel.Section.Row.Navigation {
+        return .init(domain: domain.domain, siteSlug: domain.siteSlug, type: domain.type)
+    }
 }
 
-private extension SiteDomainsViewModel {
+extension SiteDomainsViewModel {
     enum Strings {
         static let freeDomainSectionTitle = NSLocalizedString("site.domains.freeDomainSection.title",
                                                               value: "Your Free WordPress.com domain",
@@ -115,7 +144,54 @@ private extension SiteDomainsViewModel {
                                                                 value: "Your primary site address is what visitors will see in their address bar when visiting your website.",
                                                                 comment: "Footer of the primary site section in the Domains Dashboard.")
         static let domainsListSectionTitle: String = NSLocalizedString("site.domains.domainSection.title",
-                                                                       value: "Your Site Domains",
-                                                                       comment: "Header of the domains list section in the Domains Dashboard.")
+                                                                       value: "Other domains for %1$@",
+                                                                       comment: "Header of the secondary domains list section in the Domains Dashboard. %1$@ is the name of the site.")
+    }
+}
+
+// MARK: - Types
+
+extension SiteDomainsViewModel {
+    enum State {
+        case normal([Section])
+        case loading
+        case message(DomainsStateViewModel)
+    }
+
+    struct Section: Identifiable {
+        enum SectionKind {
+            case rows([Row])
+            case addDomain
+            case upgradePlan
+        }
+
+        struct Row: Identifiable {
+            struct Navigation: Hashable {
+                let domain: String
+                let siteSlug: String
+                let type: DomainType
+                let analyticsSource: String = "site_domains"
+            }
+
+            let id = UUID()
+            let viewModel: AllDomainsListCardView.ViewModel
+            let navigation: Navigation?
+        }
+
+        let id = UUID()
+        let title: String?
+        let footer: String?
+        let content: SectionKind
+    }
+
+    struct MessageStateViewModel {
+        let title: String
+        let description: String
+        let button: Button?
+
+        struct Button {
+            let title: String
+            let action: () -> Void
+        }
     }
 }

WordPress/Classes/ViewRelated/Domains/Views/DomainDetailsWebViewControllerWrapper.swift

@@ -0,0 +1,29 @@
+import SwiftUI
+import UIKit
+import WordPressKit
+
+/// Makes DomainDetailsWebViewController available to SwiftUI
+struct DomainDetailsWebViewControllerWrapper: UIViewControllerRepresentable {
+    private let domain: String
+    private let siteSlug: String
+    private let type: DomainType
+    private let analyticsSource: String?
+
+    init(domain: String, siteSlug: String, type: DomainType, analyticsSource: String? = nil) {
+        self.domain = domain
+        self.siteSlug = siteSlug
+        self.type = type
+        self.analyticsSource = analyticsSource
+    }
+
+    func makeUIViewController(context: Context) -> DomainDetailsWebViewController {
+        DomainDetailsWebViewController(
+            domain: domain,
+            siteSlug: siteSlug,
+            type: type,
+            analyticsSource: analyticsSource
+        )
+    }
+
+    func updateUIViewController(_ uiViewController: DomainDetailsWebViewController, context: Context) { }
+}

WordPress/Classes/ViewRelated/Domains/Views/DomainsStateView.swift

@@ -0,0 +1,31 @@
+import Foundation
+import SwiftUI
+import DesignSystem
+
+struct DomainsStateView: View {
+    private let viewModel: DomainsStateViewModel
+
+    init(viewModel: DomainsStateViewModel) {
+        self.viewModel = viewModel
+    }
+
+    var body: some View {
+        VStack(spacing: Length.Padding.single) {
+            Text(viewModel.title)
+                .font(Font.DS.heading3)
+                .multilineTextAlignment(.center)
+                .foregroundStyle(Color.DS.Foreground.secondary)
+            Text(viewModel.description)
+                .font(Font.DS.Body.medium)
+                .foregroundStyle(Color.DS.Foreground.secondary)
+                .multilineTextAlignment(.center)
+            if let button = viewModel.button {
+                Spacer()
+                    .frame(height: Length.Padding.single)
+                DSButton(title: button.title, style: .init(emphasis: .primary, size: .medium)) {
+                    button.action()
+                }
+            }
+        }
+    }
+}