[MBL-1500] Update and use banners for ppo (#2094)

* Create view modifier for swiftui testing

* Update messageBanner

* Use message banner in ppo view

* Update pr based on feedback

Kickstarter-iOS/Features/MessageBanner/Views/MessageBannerView.swift

@@ -3,24 +3,48 @@ import SwiftUI
 
 struct MessageBannerView: View {
   @Binding var viewModel: MessageBannerViewViewModel?
+  @SwiftUI.Environment(\.accessibilityVoiceOverEnabled) private var voiceOverEnabled
+
+  private enum Constants {
+    public static let defaultSpacing = Styles.grid(2)
+    public static let verticalPadding = Styles.grid(3)
+    public static let minTextHeight = 40.0
+    public static let dismissTime = 4.0
+    public static let dismissTimeVoiceoverOn = 10.0
+  }
 
   var body: some View {
     if let vm = viewModel {
-      ZStack {
-        RoundedRectangle(cornerRadius: 4)
-          .foregroundColor(vm.bannerBackgroundColor)
-        Label(vm.bannerMessage, image: vm.iconImageName)
+      HStack(alignment: .center, spacing: Constants.defaultSpacing) {
+        if vm.iconImageName.count > 0 {
+          Image(vm.iconImageName, bundle: Bundle.framework)
+        }
+        Text(vm.bannerMessage)
           .font(Font(UIFont.ksr_subhead()))
-          .foregroundColor(vm.messageTextColor)
-          .lineLimit(3)
           .multilineTextAlignment(vm.messageTextAlignment)
-          .padding(EdgeInsets(top: 5, leading: 10, bottom: 5, trailing: 10))
+          .frame(
+            maxWidth: .infinity,
+            minHeight: Constants.minTextHeight,
+            alignment: self.alignmentFromTextAlignment(vm.messageTextAlignment)
+          )
+      }
+      .foregroundColor(vm.messageTextColor)
+      .padding(EdgeInsets(
+        top: Constants.verticalPadding,
+        leading: Constants.defaultSpacing,
+        bottom: Constants.verticalPadding,
+        trailing: Constants.defaultSpacing
+      ))
+      .background {
+        RoundedRectangle(cornerRadius: Styles.cornerRadius)
+          .foregroundColor(vm.bannerBackgroundColor)
       }
       .accessibilityElement()
       .accessibilityLabel(vm.bannerMessageAccessibilityLabel)
-      .padding()
       .onAppear {
-        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
+        let dismissTime =
+          self.voiceOverEnabled ? Constants.dismissTimeVoiceoverOn : Constants.dismissTime
+        DispatchQueue.main.asyncAfter(deadline: .now() + dismissTime) {
           self.viewModel = nil
         }
       }
@@ -29,4 +53,19 @@ struct MessageBannerView: View {
       }
     }
   }
+
+  // MARK: - Helpers
+
+  private func alignmentFromTextAlignment(_ textAligment: TextAlignment) -> Alignment {
+    switch textAligment {
+    case .center: return .center
+    case .leading: return .leading
+    case .trailing: return .trailing
+    }
+  }
+}
+
+#Preview {
+  @State var viewModel: MessageBannerViewViewModel? = MessageBannerViewViewModel((.success, "Short string"))
+  return MessageBannerView(viewModel: $viewModel)
 }

Kickstarter-iOS/Features/MessageBanner/Views/MessageBannerViewTests.swift

@@ -0,0 +1,51 @@
+@testable import Kickstarter_Framework
+import Library
+import SnapshotTesting
+import SwiftUI
+import XCTest
+
+internal final class MessageBannerViewTests: TestCase {
+  func testBannerSuccess() {
+    @State var viewModel: MessageBannerViewViewModel? = MessageBannerViewViewModel((
+      .success,
+      "Everything completed successfully and now's the time to celebrate! Goooooo team!"
+    ))
+    let messageBannerView = MessageBannerView(viewModel: $viewModel)
+      .defaultPortraitFrame()
+
+    assertSnapshot(matching: messageBannerView, as: .image)
+  }
+
+  func testBannerError() {
+    @State var viewModel: MessageBannerViewViewModel? = MessageBannerViewViewModel((
+      .error,
+      "Something went wrong"
+    ))
+    let messageBannerView = MessageBannerView(viewModel: $viewModel)
+      .defaultPortraitFrame()
+
+    assertSnapshot(matching: messageBannerView, as: .image)
+  }
+
+  func testBannerInfo_shortString() {
+    @State var viewModel: MessageBannerViewViewModel? = MessageBannerViewViewModel((
+      .info,
+      "Something happened"
+    ))
+    let messageBannerView = MessageBannerView(viewModel: $viewModel)
+      .defaultPortraitFrame()
+
+    assertSnapshot(matching: messageBannerView, as: .image)
+  }
+
+  func testBannerInfo_longString() {
+    @State var viewModel: MessageBannerViewViewModel? = MessageBannerViewViewModel((
+      .info,
+      "Something unexpected happened but everything is probably fine."
+    ))
+    let messageBannerView = MessageBannerView(viewModel: $viewModel)
+      .defaultPortraitFrame()
+
+    assertSnapshot(matching: messageBannerView, as: .image)
+  }
+}

Kickstarter-iOS/Features/PledgedProjectsOverview/PPOView.swift

@@ -3,11 +3,38 @@ import SwiftUI
 struct PPOView: View {
   weak var tabBarController: RootTabBarViewController?
   @StateObject private var viewModel = PPOViewModel()
+
+  @AccessibilityFocusState private var isBannerFocused: Bool
+
   var body: some View {
-    ScrollView {
-      // Text(self.viewModel.greeting)
-      // TODO: Show empty state view if user is logged in and has no PPO updates.
-      PPOEmptyStateView(tabBarController: self.tabBarController)
+    GeometryReader { reader in
+      ScrollView {
+        Text(self.viewModel.greeting)
+        // TODO: Show empty state view if user is logged in and has no PPO updates.
+        //      PPOEmptyStateView(tabBarController: self.tabBarController)
+
+        // TODO: Remove this button once we're showing cards instead.
+        Button("Show banner") {
+          self.viewModel.shouldSendSampleMessage()
+        }
+      }
+      .frame(maxWidth: .infinity, alignment: .center)
+      .overlay(alignment: .bottom) {
+        MessageBannerView(viewModel: self.$viewModel.bannerViewModel)
+          .frame(
+            minWidth: reader.size.width,
+            idealWidth: reader.size.width,
+            alignment: .bottom
+          )
+          .animation(.easeInOut, value: self.viewModel.bannerViewModel != nil)
+          .accessibilityFocused(self.$isBannerFocused)
+      }
+
+      .onChange(of: self.viewModel.bannerViewModel, perform: { _ in
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+          self.isBannerFocused = self.viewModel.bannerViewModel != nil
+        }
+      })
     }
   }
 }

Kickstarter-iOS/Features/PledgedProjectsOverview/PPOViewModel.swift

@@ -1,6 +1,29 @@
 import Combine
 import Foundation
+import Library
 
 public class PPOViewModel: ObservableObject {
   let greeting = "Hello, PPO"
+
+  @Published public var bannerViewModel: MessageBannerViewViewModel? = nil
+
+  private var cancellables = Set<AnyCancellable>()
+
+  public init() {
+    // TODO: Send actual banner messages in response to card actions instead.
+    self.shouldSendSampleMessageSubject
+      .sink { [weak self] _ in
+//        self?.bannerViewModel = MessageBannerViewViewModel((
+//          .success,
+//          "Survey submitted! Need to change your address? Visit your backing details on our website."
+//        ))
+        self?.bannerViewModel = MessageBannerViewViewModel((.success, "Your payment has been processed."))
+      }
+      .store(in: &self.cancellables)
+  }
+
+  private let shouldSendSampleMessageSubject = PassthroughSubject<(), Never>()
+  public func shouldSendSampleMessage() {
+    self.shouldSendSampleMessageSubject.send(())
+  }
 }

Kickstarter-iOS/TestHelpers/SwiftUI.swift

@@ -0,0 +1,14 @@
+import SwiftUI
+
+struct DefaultPortraitFrame: ViewModifier {
+  func body(content: Content) -> some View {
+    content
+      .frame(width: 320, height: 580)
+  }
+}
+
+extension View {
+  func defaultPortraitFrame() -> some View {
+    modifier(DefaultPortraitFrame())
+  }
+}

Kickstarter.xcodeproj/project.pbxproj

@@ -357,6 +357,8 @@
 		39B5E10E2B86C56600FFB720 /* RefInfo.swift in Sources */ = {isa = PBXBuildFile; fileRef = 39B5E10D2B86C56600FFB720 /* RefInfo.swift */; };
 		39B5E1102B86C56E00FFB720 /* RefInfoTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 39B5E10F2B86C56E00FFB720 /* RefInfoTests.swift */; };
 		39B5E1122B89120F00FFB720 /* CreateAttributionEvent.graphql in Resources */ = {isa = PBXBuildFile; fileRef = 39B5E1112B89120E00FFB720 /* CreateAttributionEvent.graphql */; };
+		39B850762C3EA5630045CBA5 /* SwiftUI.swift in Sources */ = {isa = PBXBuildFile; fileRef = 39B850752C3EA5620045CBA5 /* SwiftUI.swift */; };
+		39B850782C3EA5BB0045CBA5 /* MessageBannerViewTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 39B850772C3EA5BB0045CBA5 /* MessageBannerViewTests.swift */; };
 		39C6169E2BC83DB000732410 /* PostCampaignPledgeRewardsSummaryViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 39C6169D2BC83DB000732410 /* PostCampaignPledgeRewardsSummaryViewModelTests.swift */; };
 		4705D8982742E20900A13BBE /* ProjectHeaderCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4705D8972742E20900A13BBE /* ProjectHeaderCell.swift */; };
 		471235F7274450AC0035527F /* ProjectPamphletMainCell.xib in Resources */ = {isa = PBXBuildFile; fileRef = 471235F6274450AC0035527F /* ProjectPamphletMainCell.xib */; };
@@ -1957,6 +1959,8 @@
 		39B5E10D2B86C56600FFB720 /* RefInfo.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RefInfo.swift; sourceTree = "<group>"; };
 		39B5E10F2B86C56E00FFB720 /* RefInfoTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RefInfoTests.swift; sourceTree = "<group>"; };
 		39B5E1112B89120E00FFB720 /* CreateAttributionEvent.graphql */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = CreateAttributionEvent.graphql; sourceTree = "<group>"; };
+		39B850752C3EA5620045CBA5 /* SwiftUI.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SwiftUI.swift; sourceTree = "<group>"; };
+		39B850772C3EA5BB0045CBA5 /* MessageBannerViewTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MessageBannerViewTests.swift; sourceTree = "<group>"; };
 		39C6169D2BC83DB000732410 /* PostCampaignPledgeRewardsSummaryViewModelTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = PostCampaignPledgeRewardsSummaryViewModelTests.swift; sourceTree = "<group>"; };
 		3D1363951F0191FB00B53420 /* ja */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = ja; path = ja.lproj/Localizable.strings; sourceTree = "<group>"; };
 		4705D8972742E20900A13BBE /* ProjectHeaderCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProjectHeaderCell.swift; sourceTree = "<group>"; };
@@ -5698,6 +5702,7 @@
 			isa = PBXGroup;
 			children = (
 				7061848829BE4C11008F9941 /* MessageBannerView.swift */,
+				39B850772C3EA5BB0045CBA5 /* MessageBannerViewTests.swift */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -6368,6 +6373,7 @@
 				A7ED20211E83237F00BFFA01 /* Combos.swift */,
 				37096C3122BC23AD003D1F40 /* MockAppEnvironment.swift */,
 				37096C2F22BC238C003D1F40 /* MockFeedbackGenerator.swift */,
+				39B850752C3EA5620045CBA5 /* SwiftUI.swift */,
 				3751E42A2335E7CE00047E9A /* TraitCollection.swift */,
 				A7ED20221E83237F00BFFA01 /* TraitController.swift */,
 			);
@@ -8564,6 +8570,7 @@
 				A7ED20441E8323E900BFFA01 /* ResetPasswordViewControllerTests.swift in Sources */,
 				1965437428C811B000457EC6 /* ProjectNotificationsViewControllerTests.swift in Sources */,
 				A7ED20151E83229E00BFFA01 /* DiscoveryFiltersDataSourceTests.swift in Sources */,
+				39B850782C3EA5BB0045CBA5 /* MessageBannerViewTests.swift in Sources */,
 				77A3C53D219CCF1300824FC1 /* SettingsAccountDataSourceTests.swift in Sources */,
 				77E84E0C2166A8C600DA8891 /* MessageBannerViewControllerTests.swift in Sources */,
 				8A64F16624BE6528004917E2 /* RewardAddOnSelectionViewControllerTests.swift in Sources */,
@@ -8621,6 +8628,7 @@
 				8A23EF0822F11470001262E1 /* RewardCardContainerViewTests.swift in Sources */,
 				1965436D28C807FB00457EC6 /* PledgePaymentMethodsViewControllerTests.swift in Sources */,
 				D764377C224174B700DAFC9E /* SharedFunctionsTests.swift in Sources */,
+				39B850762C3EA5630045CBA5 /* SwiftUI.swift in Sources */,
 				A7ED20431E8323E900BFFA01 /* EmptyStatesViewControllerTests.swift in Sources */,
 				70B1889429A521000004E293 /* FacebookResetPasswordViewControllerTests.swift in Sources */,
 				A7ED20421E8323E900BFFA01 /* SortPagerViewControllerTests.swift in Sources */,