PM-10051: Add the intro carousel with the first content page (#780)

Author: matt-livefront

BitwardenShared/UI/Auth/AuthCoordinator.swift

@@ -129,6 +129,8 @@ final class AuthCoordinator: NSObject, // swiftlint:disable:this type_body_lengt
             showDuo2FA(authURL: authURL, delegate: context as? DuoAuthenticationFlowDelegate)
         case let .enterpriseSingleSignOn(email):
             showEnterpriseSingleSignOn(email: email)
+        case .introCarousel:
+            showIntroCarousel()
         case .landing:
             showLanding()
         case let .login(username):
@@ -317,6 +319,18 @@ final class AuthCoordinator: NSObject, // swiftlint:disable:this type_body_lengt
         stackNavigator?.present(navigationController)
     }
 
+    /// Shows the intro carousel screen.
+    ///
+    private func showIntroCarousel() {
+        let processor = IntroCarouselProcessor(
+            coordinator: asAnyCoordinator(),
+            state: IntroCarouselState()
+        )
+        let view = IntroCarouselView(store: Store(processor: processor))
+        stackNavigator?.setNavigationBarHidden(true, animated: false)
+        stackNavigator?.replace(view, animated: false)
+    }
+
     /// Shows the landing screen.
     ///
     private func showLanding() {
@@ -329,6 +343,7 @@ final class AuthCoordinator: NSObject, // swiftlint:disable:this type_body_lengt
             )
             let store = Store(processor: processor)
             let view = LandingView(store: store)
+            stackNavigator.setNavigationBarHidden(false, animated: false)
             stackNavigator.replace(view, animated: false)
         }
     }

BitwardenShared/UI/Auth/AuthCoordinatorTests.swift

@@ -119,6 +119,15 @@ class AuthCoordinatorTests: BitwardenTestCase { // swiftlint:disable:this type_b
         XCTAssertTrue(navigationController.viewControllers.first is UIHostingController<SingleSignOnView>)
     }
 
+    /// `navigate(to:)` with `.introCarousel` replaces the navigation stack with the intro carousel.
+    func test_navigate_introCarousel() {
+        subject.navigate(to: .introCarousel)
+
+        XCTAssertTrue(stackNavigator.actions.last?.view is IntroCarouselView)
+        XCTAssertEqual(stackNavigator.actions.last?.type, .replaced)
+        XCTAssertTrue(stackNavigator.isNavigationBarHidden)
+    }
+
     /// `navigate(to:)` with `.landing` pushes the landing view onto the stack navigator.
     func test_navigate_landing() {
         subject.navigate(to: .landing)

BitwardenShared/UI/Auth/AuthRoute.swift

@@ -29,6 +29,9 @@ public enum AuthRoute: Equatable {
     ///
     case enterpriseSingleSignOn(email: String)
 
+    /// A route to the intro carousel.
+    case introCarousel
+
     /// A route to the landing screen.
     case landing
 

BitwardenShared/UI/Auth/IntroCarousel/IntroCarouselAction.swift

@@ -0,0 +1,11 @@
+// MARK: - IntroCarouselAction
+
+/// Actions that can be processed by a `IntroCarouselProcessor`.
+///
+enum IntroCarouselAction: Equatable {
+    /// The create account button was tapped.
+    case createAccount
+
+    /// The log in button was tapped.
+    case logIn
+}

BitwardenShared/UI/Auth/IntroCarousel/IntroCarouselProcessor.swift

@@ -0,0 +1,41 @@
+import Combine
+import SwiftUI
+
+// MARK: - IntroCarouselProcessor
+
+/// The processor used to manage state and handle actions for the intro carousel screen.
+///
+class IntroCarouselProcessor: StateProcessor<IntroCarouselState, IntroCarouselAction, Void> {
+    // MARK: Private Properties
+
+    /// The coordinator that handles navigation.
+    private let coordinator: AnyCoordinator<AuthRoute, AuthEvent>
+
+    // MARK: Initialization
+
+    /// Creates a new `IntroCarouselProcessor`.
+    ///
+    /// - Parameters:
+    ///   - coordinator: The coordinator that handles navigation.
+    ///   - services: The services required by this processor.
+    ///   - state: The initial state of the processor.
+    ///
+    init(
+        coordinator: AnyCoordinator<AuthRoute, AuthEvent>,
+        state: IntroCarouselState
+    ) {
+        self.coordinator = coordinator
+        super.init(state: state)
+    }
+
+    // MARK: Methods
+
+    override func receive(_ action: IntroCarouselAction) {
+        switch action {
+        case .createAccount:
+            coordinator.navigate(to: .createAccount)
+        case .logIn:
+            coordinator.navigate(to: .landing)
+        }
+    }
+}

BitwardenShared/UI/Auth/IntroCarousel/IntroCarouselProcessorTests.swift

@@ -0,0 +1,44 @@
+import XCTest
+
+@testable import BitwardenShared
+
+class IntroCarouselProcessorTests: BitwardenTestCase {
+    // MARK: Properties
+
+    var coordinator: MockCoordinator<AuthRoute, AuthEvent>!
+    var subject: IntroCarouselProcessor!
+
+    // MARK: Setup & Teardown
+
+    override func setUp() {
+        super.setUp()
+
+        coordinator = MockCoordinator()
+
+        subject = IntroCarouselProcessor(
+            coordinator: coordinator.asAnyCoordinator(),
+            state: IntroCarouselState()
+        )
+    }
+
+    override func tearDown() {
+        super.tearDown()
+
+        coordinator = nil
+        subject = nil
+    }
+
+    // MARK: Tests
+
+    /// `receive(_:)` with `.createAccount` navigates to the create account view.
+    func test_receive_createAccount() {
+        subject.receive(.createAccount)
+        XCTAssertEqual(coordinator.routes.last, .createAccount)
+    }
+
+    /// `receive(_:)` with `.logIn` navigates to the landing view.
+    func test_receive_logIn() {
+        subject.receive(.logIn)
+        XCTAssertEqual(coordinator.routes.last, .landing)
+    }
+}

BitwardenShared/UI/Auth/IntroCarousel/IntroCarouselState.swift

@@ -0,0 +1,38 @@
+import SwiftUI
+
+// MARK: - IntroCarouselState
+
+/// An object that defines the current state of a `IntroCarouselView`.
+///
+struct IntroCarouselState: Equatable {
+    // MARK: Types
+
+    /// A model representing the data to display on a single page in the carousel.
+    ///
+    struct CarouselPage: Equatable, Identifiable {
+        // MARK:
+
+        /// A unique identifier of the page.
+        let id: String = UUID().uuidString
+
+        /// An image to display.
+        let image: Image
+
+        /// A message to display on the page.
+        let message: String
+
+        /// A title to display on the page.
+        let title: String
+    }
+
+    // MARK: Properties
+
+    /// The list of scrollable pages displayed in the carousel.
+    let pages: [CarouselPage] = [
+        CarouselPage(
+            image: Asset.Images.partnership.swiftUIImage,
+            message: Localizations.introCarouselPage1Message,
+            title: Localizations.introCarouselPage1Title
+        ),
+    ]
+}

BitwardenShared/UI/Auth/IntroCarousel/IntroCarouselView.swift

@@ -0,0 +1,138 @@
+import SwiftUI
+
+// MARK: - IntroCarouselView
+
+/// A view that allows the user to swipe through the intro carousel and then proceed to creating an
+/// account or logging in.
+///
+struct IntroCarouselView: View {
+    // MARK: Properties
+
+    /// An environment variable for getting the vertical size class of the view.
+    @Environment(\.verticalSizeClass) var verticalSizeClass
+
+    /// The `Store` for this view.
+    @ObservedObject var store: Store<IntroCarouselState, IntroCarouselAction, Void>
+
+    /// The index of the currently visible page in the carousel.
+    @SwiftUI.State private var tabSelection = 0
+
+    // MARK: View
+
+    var body: some View {
+        VStack(spacing: 0) {
+            TabView(selection: $tabSelection.animation()) {
+                ForEachIndexed(store.state.pages) { index, page in
+                    pageView(page)
+                        .tag(index)
+                }
+            }
+            .tabViewStyle(.page(indexDisplayMode: .never))
+
+            HStack(spacing: 8) {
+                ForEachIndexed(store.state.pages) { index, _ in
+                    Image(systemName: "circle.fill")
+                        .resizable()
+                        .frame(width: 8, height: 8)
+                        .foregroundStyle(
+                            tabSelection == index ?
+                                Asset.Colors.textPrimary.swiftUIColor :
+                                Asset.Colors.textPrimary.swiftUIColor.opacity(0.3)
+                        )
+                }
+            }
+            .padding(16)
+
+            VStack(spacing: 12) {
+                Button(Localizations.createAccount) {
+                    store.send(.createAccount)
+                }
+                .buttonStyle(.primary())
+
+                Button(Localizations.logIn) {
+                    store.send(.logIn)
+                }
+                .buttonStyle(.transparent)
+            }
+            .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
+            .padding(.horizontal, 16)
+            .padding(.vertical, 12)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(Asset.Colors.backgroundSecondary.swiftUIColor.ignoresSafeArea())
+        .foregroundStyle(Asset.Colors.textPrimary.swiftUIColor)
+        .multilineTextAlignment(.center)
+    }
+
+    /// A dynamic stack view that lays out content vertically when in a regular vertical size class
+    /// and horizontally for the compact vertical size class.
+    @ViewBuilder
+    private func dynamicStackView(
+        minHeight: CGFloat,
+        @ViewBuilder imageContent: () -> some View,
+        @ViewBuilder textContent: () -> some View
+    ) -> some View {
+        if verticalSizeClass == .regular {
+            VStack(spacing: 80) {
+                imageContent()
+                textContent()
+            }
+            .padding(.vertical, 16)
+            .frame(maxWidth: .infinity, minHeight: minHeight)
+            .scrollView(addVerticalPadding: false)
+        } else {
+            HStack(alignment: .top, spacing: 40) {
+                VStack(spacing: 0) {
+                    Spacer(minLength: 0)
+                    imageContent()
+                        .padding(.leading, 36)
+                        .padding(.vertical, 16)
+                    Spacer(minLength: 0)
+                }
+                .frame(minHeight: minHeight)
+
+                textContent()
+                    .padding(.vertical, 16)
+                    .frame(maxWidth: .infinity, minHeight: minHeight)
+                    .scrollView(addVerticalPadding: false)
+            }
+        }
+    }
+
+    /// A view that displays a carousel page.
+    @ViewBuilder
+    private func pageView(_ page: IntroCarouselState.CarouselPage) -> some View {
+        GeometryReader { reader in
+            dynamicStackView(minHeight: reader.size.height) {
+                page.image
+                    .resizable()
+                    .frame(
+                        width: verticalSizeClass == .regular ? 200 : 132,
+                        height: verticalSizeClass == .regular ? 200 : 132
+                    )
+                    .accessibilityHidden(true)
+            } textContent: {
+                VStack(spacing: 16) {
+                    Text(page.title)
+                        .styleGuide(.title, weight: .bold)
+
+                    Text(page.message)
+                        .styleGuide(.title3)
+                }
+            }
+        }
+    }
+}
+
+// MARK: - Previews
+
+#if DEBUG
+#Preview("Carousel") {
+    IntroCarouselView(store: Store(processor: StateProcessor(state: IntroCarouselState())))
+}
+
+@available(iOS 17, *)
+#Preview("Carousel Landscape", traits: .landscapeRight) {
+    IntroCarouselView(store: Store(processor: StateProcessor(state: IntroCarouselState())))
+}
+#endif

BitwardenShared/UI/Auth/IntroCarousel/IntroCarouselViewTests.swift

@@ -0,0 +1,55 @@
+import SnapshotTesting
+import ViewInspector
+import XCTest
+
+@testable import BitwardenShared
+
+class IntroCarouselViewTests: BitwardenTestCase {
+    // MARK: Properties
+
+    var processor: MockProcessor<IntroCarouselState, IntroCarouselAction, Void>!
+    var subject: IntroCarouselView!
+
+    // MARK: Setup & Teardown
+
+    override func setUp() {
+        super.setUp()
+
+        processor = MockProcessor(state: IntroCarouselState())
+
+        subject = IntroCarouselView(store: Store(processor: processor))
+    }
+
+    override func tearDown() {
+        super.tearDown()
+
+        processor = nil
+        subject = nil
+    }
+
+    // MARK: Tests
+
+    /// Tapping the create account button dispatches the create account action.
+    func test_createAccount_tap() throws {
+        let button = try subject.inspect().find(button: Localizations.createAccount)
+        try button.tap()
+        XCTAssertEqual(processor.dispatchedActions.last, .createAccount)
+    }
+
+    /// Tapping the log in button dispatches the login action.
+    func test_login_tap() throws {
+        let button = try subject.inspect().find(button: Localizations.logIn)
+        try button.tap()
+        XCTAssertEqual(processor.dispatchedActions.last, .logIn)
+    }
+
+    // MARK: Snapshots
+
+    /// The intro carousel renders correctly.
+    func test_snapshot_introCarousel() {
+        assertSnapshots(
+            of: subject.navStackWrapped,
+            as: [.defaultPortrait, .defaultPortraitDark, .defaultPortraitAX5, .defaultLandscape]
+        )
+    }
+}