[NT-303] Pledge Button

Kickstarter-iOS/Views/Cells/PledgeCreditCardView.swift

@@ -3,18 +3,25 @@ import Library
 import Prelude
 import UIKit
 
+protocol PledgeCreditCardViewDelegate: AnyObject {
+  func pledgeCreditCardViewSelected(
+    _ pledgeCreditCardView: PledgeCreditCardView,
+    paymentSourceId: String
+  )
+}
+
 final class PledgeCreditCardView: UIView {
   // MARK: - Properties
 
-  private let viewModel: CreditCardCellViewModelType = CreditCardCellViewModel()
-
   private let adaptableStackView: UIStackView = { UIStackView(frame: .zero) }()
+  weak var delegate: PledgeCreditCardViewDelegate?
   private let expirationDateLabel: UILabel = { UILabel(frame: .zero) }()
   private let imageView: UIImageView = { UIImageView(frame: .zero) }()
   private let labelsStackView: UIStackView = { UIStackView(frame: .zero) }()
   private let lastFourLabel: UILabel = { UILabel(frame: .zero) }()
   private let rootStackView: UIStackView = { UIStackView(frame: .zero) }()
   private let selectButton: UIButton = { UIButton(type: .custom) }()
+  private let viewModel: CreditCardCellViewModelType = CreditCardCellViewModel()
 
   // MARK: - Lifecycle
 
@@ -46,6 +53,11 @@ final class PledgeCreditCardView: UIView {
     _ = (self.rootStackView, self)
       |> ksr_addSubviewToParent()
       |> ksr_constrainViewToMarginsInParent()
+
+    self.selectButton.addTarget(
+      self, action: #selector(PledgeCreditCardView.selectButtonTapped),
+      for: .touchUpInside
+    )
   }
 
   private func setupConstraints() {
@@ -101,11 +113,25 @@ final class PledgeCreditCardView: UIView {
         _ = self?.imageView
           ?|> \.image .~ image
       }
+
+    self.viewModel.outputs.notifyDelegateOfCardSelected
+      .observeForUI()
+      .observeValues { [weak self] paymentSourceId in
+        guard let self = self else { return }
+
+        self.delegate?.pledgeCreditCardViewSelected(self, paymentSourceId: paymentSourceId)
+      }
   }
 
   func configureWith(value: GraphUserCreditCard.CreditCard) {
     self.viewModel.inputs.configureWith(creditCard: value)
   }
+
+  // MARK: - Accessors
+
+  @objc func selectButtonTapped() {
+    self.viewModel.inputs.selectButtonTapped()
+  }
 }
 
 // MARK: - Styles

Kickstarter-iOS/Views/Controllers/PledgePaymentMethodsViewController.swift

@@ -8,6 +8,10 @@ protocol PledgePaymentMethodsViewControllerDelegate: AnyObject {
   func pledgePaymentMethodsViewControllerDidTapApplePayButton(
     _ viewController: PledgePaymentMethodsViewController
   )
+  func pledgePaymentMethodsViewController(
+    _ viewController: PledgePaymentMethodsViewController,
+    didSelectCreditCard paymentSourceId: String
+  )
 }
 
 final class PledgePaymentMethodsViewController: UIViewController {
@@ -17,6 +21,7 @@ final class PledgePaymentMethodsViewController: UIViewController {
   private lazy var cardsStackView: UIStackView = { UIStackView(frame: .zero) }()
   internal weak var delegate: PledgePaymentMethodsViewControllerDelegate?
   internal weak var messageDisplayingDelegate: PledgeViewControllerMessageDisplaying?
+  private lazy var pledgeButton: UIButton = { UIButton.init(type: .custom) }()
   private lazy var rootStackView: UIStackView = { UIStackView(frame: .zero) }()
   private lazy var scrollView: UIScrollView = { UIScrollView(frame: .zero) }()
   private lazy var scrollViewContainer: UIView = { UIView(frame: .zero) }()
@@ -44,7 +49,10 @@ final class PledgePaymentMethodsViewController: UIViewController {
       |> ksr_addSubviewToParent()
       |> ksr_constrainViewToEdgesInParent()
 
-    _ = ([self.applePayButton, self.spacer, self.titleLabel, self.scrollViewContainer], self.rootStackView)
+    _ = (
+      [self.applePayButton, self.spacer, self.titleLabel, self.scrollViewContainer, self.pledgeButton],
+      self.rootStackView
+    )
       |> ksr_addArrangedSubviewsToStackView()
 
     _ = (self.rootStackView, self.view)
@@ -61,7 +69,8 @@ final class PledgePaymentMethodsViewController: UIViewController {
   private func setupConstraints() {
     NSLayoutConstraint.activate([
       self.cardsStackView.heightAnchor.constraint(equalTo: self.scrollViewContainer.heightAnchor),
-      self.applePayButton.heightAnchor.constraint(greaterThanOrEqualToConstant: Styles.minTouchSize.height)
+      self.applePayButton.heightAnchor.constraint(greaterThanOrEqualToConstant: Styles.minTouchSize.height),
+      self.pledgeButton.heightAnchor.constraint(greaterThanOrEqualToConstant: Styles.minTouchSize.height)
     ])
   }
 
@@ -78,6 +87,10 @@ final class PledgePaymentMethodsViewController: UIViewController {
     _ = self.applePayButton
       |> applePayButtonStyle
 
+    _ = self.pledgeButton
+      |> greenButtonStyle
+      |> UIButton.lens.title(for: .normal) %~ { _ in Strings.Pledge() }
+
     _ = self.scrollView
       |> checkoutBackgroundStyle
 
@@ -115,7 +128,16 @@ final class PledgePaymentMethodsViewController: UIViewController {
         self.delegate?.pledgePaymentMethodsViewControllerDidTapApplePayButton(self)
       }
 
+    self.viewModel.outputs.notifyDelegateCreditCardSelected
+      .observeForUI()
+      .observeValues { [weak self] paymentSourceId in
+        guard let self = self else { return }
+
+        self.delegate?.pledgePaymentMethodsViewController(self, didSelectCreditCard: paymentSourceId)
+      }
+
     self.applePayButton.rac.hidden = self.viewModel.outputs.applePayButtonHidden
+    self.pledgeButton.rac.enabled = self.viewModel.outputs.pledgeButtonEnabled
   }
 
   // MARK: - Configuration
@@ -130,12 +152,16 @@ final class PledgePaymentMethodsViewController: UIViewController {
     self.viewModel.inputs.configureWith(pledgePaymentMethodsValue)
   }
 
-  // MARK: - Actions
+  // MARK: - Accessors
 
   @objc private func applePayButtonTapped() {
     self.viewModel.inputs.applePayButtonTapped()
   }
 
+  func updatePledgeButton(_ enabled: Bool) {
+    self.viewModel.inputs.updatePledgeButtonEnabled(isEnabled: enabled)
+  }
+
   // MARK: - Functions
 
   private func addCardsToStackView(_ cards: [GraphUserCreditCard.CreditCard]) {
@@ -145,6 +171,8 @@ final class PledgePaymentMethodsViewController: UIViewController {
       .map { card -> PledgeCreditCardView in
         let cardView = PledgeCreditCardView(frame: .zero)
         cardView.configureWith(value: card)
+        cardView.delegate = self
+
         return cardView
       }
 
@@ -201,3 +229,9 @@ extension PledgePaymentMethodsViewController: AddNewCardViewControllerDelegate {
     // TODO:
   }
 }
+
+extension PledgePaymentMethodsViewController: PledgeCreditCardViewDelegate {
+  func pledgeCreditCardViewSelected(_: PledgeCreditCardView, paymentSourceId: String) {
+    self.viewModel.creditCardSelected(paymentSourceId: paymentSourceId)
+  }
+}

Kickstarter-iOS/Views/Controllers/PledgeViewController.swift

@@ -219,6 +219,12 @@ final class PledgeViewController: UIViewController, MessageBannerViewControllerP
         self?.viewModel.inputs.userSessionStarted()
       }
 
+    self.viewModel.outputs.updatePledgeButtonEnabled
+      .observeForUI()
+      .observeValues { [weak self] isEnabled in
+        self?.paymentMethodsViewController.updatePledgeButton(isEnabled)
+      }
+
     self.viewModel.outputs.goToApplePayPaymentAuthorization
       .observeForControllerAction()
       .observeValues { [weak self] paymentAuthorizationData in
@@ -384,11 +390,17 @@ extension PledgeViewController: PledgeViewControllerMessageDisplaying {
 
 extension PledgeViewController: PledgePaymentMethodsViewControllerDelegate {
   func pledgePaymentMethodsViewControllerDidTapApplePayButton(
-    _:
-    PledgePaymentMethodsViewController
+    _: PledgePaymentMethodsViewController
   ) {
     self.viewModel.inputs.applePayButtonTapped()
   }
+
+  func pledgePaymentMethodsViewController(
+    _: PledgePaymentMethodsViewController,
+    didSelectCreditCard paymentSourceId: String
+  ) {
+    self.viewModel.inputs.creditCardSelected(with: paymentSourceId)
+  }
 }
 
 // MARK: - Styles

Library/ViewModels/CreditCardCellViewModel.swift

@@ -7,6 +7,7 @@ import UIKit
 public protocol CreditCardCellViewModelInputs {
   /// Call to configure cell with card value.
   func configureWith(creditCard: GraphUserCreditCard.CreditCard)
+  func selectButtonTapped()
 }
 
 public protocol CreditCardCellViewModelOutputs {
@@ -24,6 +25,9 @@ public protocol CreditCardCellViewModelOutputs {
 
   /// Emits the formatted card's expirationdate.
   var expirationDateText: Signal<String, Never> { get }
+
+  /// Emits the paymentSourceId of the current card
+  var notifyDelegateOfCardSelected: Signal<String, Never> { get }
 }
 
 public protocol CreditCardCellViewModelType {
@@ -52,18 +56,29 @@ public final class CreditCardCellViewModel: CreditCardCellViewModelInputs,
 
     self.expirationDateText = self.cardProperty.signal.skipNil()
       .map { Strings.Credit_card_expiration(expiration_date: $0.expirationDate()) }
+
+    self.notifyDelegateOfCardSelected = self.cardProperty.signal
+      .takeWhen(self.selectButtonTappedProperty.signal)
+      .skipNil()
+      .map { $0.id }
   }
 
   fileprivate let cardProperty = MutableProperty<GraphUserCreditCard.CreditCard?>(nil)
   public func configureWith(creditCard: GraphUserCreditCard.CreditCard) {
     self.cardProperty.value = creditCard
   }
 
+  fileprivate let selectButtonTappedProperty = MutableProperty(())
+  public func selectButtonTapped() {
+    self.selectButtonTappedProperty.value = ()
+  }
+
   public let cardImage: Signal<UIImage?, Never>
   public let cardNumberAccessibilityLabel: Signal<String, Never>
   public let cardNumberTextLongStyle: Signal<String, Never>
   public let cardNumberTextShortStyle: Signal<String, Never>
   public let expirationDateText: Signal<String, Never>
+  public let notifyDelegateOfCardSelected: Signal<String, Never>
 
   public var inputs: CreditCardCellViewModelInputs { return self }
   public var outputs: CreditCardCellViewModelOutputs { return self }

Library/ViewModels/CreditCardCellViewModelTests.swift

@@ -8,11 +8,12 @@ import XCTest
 internal final class CreditCardCellViewModelTests: TestCase {
   internal let vm: CreditCardCellViewModelType = CreditCardCellViewModel()
 
-  let cardImage = TestObserver<UIImage?, Never>()
-  let cardNumberAccessibilityLabel = TestObserver<String, Never>()
-  let cardNumberTextLongStyle = TestObserver<String, Never>()
-  let cardNumberTextShortStyle = TestObserver<String, Never>()
-  let expirationDateText = TestObserver<String, Never>()
+  private let cardImage = TestObserver<UIImage?, Never>()
+  private let cardNumberAccessibilityLabel = TestObserver<String, Never>()
+  private let cardNumberTextLongStyle = TestObserver<String, Never>()
+  private let cardNumberTextShortStyle = TestObserver<String, Never>()
+  private let expirationDateText = TestObserver<String, Never>()
+  private let notifyDelegateOfCardSelected = TestObserver<String, Never>()
 
   internal override func setUp() {
     super.setUp()
@@ -22,6 +23,7 @@ internal final class CreditCardCellViewModelTests: TestCase {
     self.vm.outputs.cardNumberTextLongStyle.observe(self.cardNumberTextLongStyle.observer)
     self.vm.outputs.cardNumberTextShortStyle.observe(self.cardNumberTextShortStyle.observer)
     self.vm.outputs.expirationDateText.observe(self.expirationDateText.observer)
+    self.vm.outputs.notifyDelegateOfCardSelected.observe(self.notifyDelegateOfCardSelected.observer)
   }
 
   func testCardInfoForSupportedCards() {
@@ -94,4 +96,17 @@ internal final class CreditCardCellViewModelTests: TestCase {
     self.cardNumberTextShortStyle.assertLastValue("Ending in 1882")
     self.expirationDateText.assertValue("Expires 01/2024")
   }
+
+  func testSelectButtonTapped() {
+    let card = GraphUserCreditCard.amex
+      |> \.id .~ "123"
+
+    self.vm.inputs.configureWith(creditCard: card)
+
+    self.notifyDelegateOfCardSelected.assertDidNotEmitValue()
+
+    self.vm.inputs.selectButtonTapped()
+
+    self.notifyDelegateOfCardSelected.assertValues(["123"])
+  }
 }

Library/ViewModels/PledgePaymentMethodsViewModel.swift

@@ -8,13 +8,17 @@ public typealias PledgePaymentMethodsValue = (user: User, project: Project, appl
 public protocol PledgePaymentMethodsViewModelInputs {
   func applePayButtonTapped()
   func configureWith(_ value: PledgePaymentMethodsValue)
+  func creditCardSelected(paymentSourceId: String)
+  func updatePledgeButtonEnabled(isEnabled: Bool)
   func viewDidLoad()
 }
 
 public protocol PledgePaymentMethodsViewModelOutputs {
-  var notifyDelegateApplePayButtonTapped: Signal<Void, Never> { get }
   var applePayButtonHidden: Signal<Bool, Never> { get }
+  var notifyDelegateApplePayButtonTapped: Signal<Void, Never> { get }
+  var notifyDelegateCreditCardSelected: Signal<String, Never> { get }
   var notifyDelegateLoadPaymentMethodsError: Signal<String, Never> { get }
+  var pledgeButtonEnabled: Signal<Bool, Never> { get }
   var reloadPaymentMethods: Signal<[GraphUserCreditCard.CreditCard], Never> { get }
 }
 
@@ -44,6 +48,11 @@ public final class PledgePaymentMethodsViewModel: PledgePaymentMethodsViewModelT
       .map(showApplePayButton(for:applePayCapable:))
       .negate()
 
+    self.pledgeButtonEnabled = Signal.merge(
+      configureWithValue.mapConst(false),
+      self.pledgeButtonEnabledSignal
+    ).skipRepeats()
+
     self.reloadPaymentMethods = storedCardsEvent
       .values()
       .map { $0.me.storedCards.nodes }
@@ -53,6 +62,9 @@ public final class PledgePaymentMethodsViewModel: PledgePaymentMethodsViewModelT
     self.notifyDelegateLoadPaymentMethodsError = storedCardsEvent
       .errors()
       .map { $0.localizedDescription }
+
+    self.notifyDelegateCreditCardSelected = self.creditCardSelectedSignal
+      .skipRepeats()
   }
 
   private let applePayButtonTappedProperty = MutableProperty(())
@@ -65,6 +77,16 @@ public final class PledgePaymentMethodsViewModel: PledgePaymentMethodsViewModelT
     self.configureWithValueProperty.value = value
   }
 
+  private let (creditCardSelectedSignal, creditCardSelectedObserver) = Signal<String, Never>.pipe()
+  public func creditCardSelected(paymentSourceId: String) {
+    self.creditCardSelectedObserver.send(value: paymentSourceId)
+  }
+
+  private let (pledgeButtonEnabledSignal, pledgeButtonEnabledObserver) = Signal<Bool, Never>.pipe()
+  public func updatePledgeButtonEnabled(isEnabled: Bool) {
+    self.pledgeButtonEnabledObserver.send(value: isEnabled)
+  }
+
   private let viewDidLoadProperty = MutableProperty(())
   public func viewDidLoad() {
     self.viewDidLoadProperty.value = ()
@@ -75,7 +97,9 @@ public final class PledgePaymentMethodsViewModel: PledgePaymentMethodsViewModelT
 
   public let notifyDelegateApplePayButtonTapped: Signal<Void, Never>
   public let applePayButtonHidden: Signal<Bool, Never>
+  public let notifyDelegateCreditCardSelected: Signal<String, Never>
   public let notifyDelegateLoadPaymentMethodsError: Signal<String, Never>
+  public let pledgeButtonEnabled: Signal<Bool, Never>
   public let reloadPaymentMethods: Signal<[GraphUserCreditCard.CreditCard], Never>
 }