Add credit card implementation

Kickstarter-iOS/Info.plist

@@ -55,6 +55,8 @@
 		<array>
 			<dict>
 				<key>KitInfo</key>
+				<dict/>
+				<key>KitName</key>
 				<string>Crashlytics</string>
 			</dict>
 		</array>

Kickstarter-iOS/Views/Controllers/AddNewCardViewController.swift

@@ -5,12 +5,21 @@ import ReactiveSwift
 import Stripe
 import UIKit
 
+internal protocol AddNewCardViewControllerDelegate: class {
+  func presentAddCardSuccessfulBanner(_ message: String)
+}
+
 internal final class AddNewCardViewController: UIViewController, STPPaymentCardTextFieldDelegate {
+  internal weak var delegate: AddNewCardViewControllerDelegate?
 
-  private weak var saveButtonView: LoadingBarButtonItemView!
   @IBOutlet private weak var cardholderNameLabel: UILabel!
   @IBOutlet private weak var cardholderNameTextField: UITextField!
-  @IBOutlet private weak var paymentField: STPPaymentCardTextField!
+  @IBOutlet private weak var paymentTextField: STPPaymentCardTextField!
+
+  private var saveButtonView: LoadingBarButtonItemView!
+  private var messageBannerView: MessageBannerViewController!
+
+  fileprivate let viewModel: AddNewCardViewModelType = AddNewCardViewModel()
 
   internal static func instantiate() -> AddNewCardViewController {
     return Storyboard.Settings.instantiate(AddNewCardViewController.self)
@@ -19,6 +28,20 @@ internal final class AddNewCardViewController: UIViewController, STPPaymentCardT
   override func viewDidLoad() {
     super.viewDidLoad()
 
+    guard let messageViewController = self.children.first as? MessageBannerViewController else {
+      fatalError("Missing message View Controller")
+
+    }
+    self.messageBannerView = messageViewController
+
+    self.cardholderNameTextField.addTarget(self,
+                                           action: #selector(cardholderNameTextFieldReturn),
+                                           for: .editingDidEndOnExit)
+
+    self.cardholderNameTextField.addTarget(self,
+                                           action: #selector(cardholderNameTextFieldChanged(_:)),
+                                           for: [.editingDidEndOnExit, .editingChanged])
+
     let cancelButton = UIBarButtonItem(title: Strings.Cancel(),
                                        style: .plain,
                                        target: self,
@@ -29,10 +52,13 @@ internal final class AddNewCardViewController: UIViewController, STPPaymentCardT
     self.saveButtonView = LoadingBarButtonItemView.instantiate()
     self.saveButtonView.setTitle(title: Strings.Save())
     self.saveButtonView.addTarget(self, action: #selector(saveButtonTapped))
+
     let navigationBarButton = UIBarButtonItem(customView: self.saveButtonView)
     self.navigationItem.setRightBarButton(navigationBarButton, animated: false)
 
-    self.paymentField.delegate = self
+    self.paymentTextField.delegate = self
+
+    self.viewModel.inputs.viewDidLoad()
   }
 
   override func bindStyles() {
@@ -42,29 +68,141 @@ internal final class AddNewCardViewController: UIViewController, STPPaymentCardT
       |> settingsViewControllerStyle
 
     _ = self.cardholderNameLabel
-      |> settingsSectionLabelStyle
+      |> \.textColor .~ .ksr_text_dark_grey_900
+      |> \.font .~ .ksr_body()
       |> \.text %~ { _ in Strings.Cardholder_name() }
 
     _ = self.cardholderNameTextField
       |> formFieldStyle
+      |> \.autocapitalizationType .~ .words
+      |> \.returnKeyType .~ .next
       |> \.textAlignment .~ .right
+      |> \.textColor .~ .ksr_text_dark_grey_500
       |> \.attributedPlaceholder .~ NSAttributedString(
           string: Strings.Name(),
           attributes: [NSAttributedString.Key.foregroundColor: UIColor.ksr_text_dark_grey_400])
 
-    _ = self.paymentField
+    _ = self.paymentTextField
       |> \.borderColor .~ nil
       |> \.font .~ .ksr_body()
       |> \.cursorColor .~ .ksr_green_700
       |> \.textColor .~ .ksr_text_dark_grey_500
       |> \.placeholderColor .~ .ksr_text_dark_grey_400
   }
 
+  override func bindViewModel() {
+    super.bindViewModel()
+
+     self.cardholderNameTextField.rac.becomeFirstResponder =
+      self.viewModel.outputs.cardholderNameBecomeFirstResponder
+
+    self.viewModel.outputs.paymentDetailsBecomeFirstResponder
+      .observeForUI()
+      .observeValues { [weak self] in
+        self?.paymentTextField.becomeFirstResponder()
+    }
+
+    self.viewModel.outputs.saveButtonIsEnabled
+      .observeForUI()
+      .observeValues { [weak self] (isEnabled) in
+        self?.saveButtonView.setIsEnabled(isEnabled: isEnabled)
+    }
+
+    self.viewModel.outputs.setStripePublishableKey
+      .observeForUI()
+      .observeValues {
+        STPPaymentConfiguration.shared().publishableKey = $0
+    }
+
+    self.viewModel.outputs.dismissKeyboard
+      .observeForControllerAction()
+      .observeValues { [weak self] in
+        self?.paymentTextField.resignFirstResponder()
+    }
+
+    self.viewModel.outputs.paymentDetails
+      .observeForUI()
+      .observeValues { [weak self] cardholderName, cardNumber, expMonth, expYear, cvc in
+        self?.stripeToken(cardholderName: cardholderName,
+                         cardNumber: cardNumber,
+                         expirationMonth: expMonth,
+                         expirationYear: expYear,
+                         cvc: cvc)
+    }
+
+    self.viewModel.outputs.activityIndicatorShouldShow
+      .observeForUI()
+      .observeValues { shouldShow in
+        if shouldShow {
+          self.saveButtonView.startAnimating()
+        } else {
+          self.saveButtonView.stopAnimating()
+        }
+    }
+
+    self.viewModel.outputs.addNewCardSuccess
+      .observeForControllerAction()
+      .observeValues { [weak self] message in
+        self?.delegate?.presentAddCardSuccessfulBanner(message)
+        self?.navigationController?.dismiss(animated: true, completion: nil)
+    }
+
+    self.viewModel.outputs.addNewCardFailure
+      .observeForControllerAction()
+      .observeValues { [weak self] errorMessage in
+        self?.messageBannerView.showBanner(with: .error, message: errorMessage)
+    }
+  }
+
   @objc fileprivate func cancelButtonTapped() {
     self.dismiss(animated: true, completion: nil)
   }
 
   @objc fileprivate func saveButtonTapped() {
-    self.dismiss(animated: true, completion: nil)
+    self.viewModel.inputs.saveButtonTapped()
+  }
+
+  @objc func cardholderNameTextFieldChanged(_ textField: UITextField) {
+    self.viewModel.inputs.cardholderNameChanged(textField.text ?? "")
+  }
+
+  @objc func cardholderNameTextFieldReturn(_ textField: UITextField
+    ) {
+    self.viewModel.inputs.cardholderNameTextFieldReturn()
+  }
+
+  func paymentCardTextFieldDidChange(_ textField: STPPaymentCardTextField) {
+
+    guard let cardnumber = textField.cardNumber, let cvc = textField.cvc else {
+      return
+    }
+
+    self.viewModel.inputs.paymentCardChanged(cardNumber: cardnumber,
+                                             expMonth: Int(textField.expirationMonth),
+                                             expYear: Int(textField.expirationYear),
+                                             cvc: cvc)
+
+    self.viewModel.inputs.paymentInfo(valid: textField.isValid)
+  }
+
+  func stripeToken(cardholderName: String,
+                   cardNumber: String,
+                   expirationMonth: Int,
+                   expirationYear: Int,
+                   cvc: String) {
+    let cardParams = STPCardParams()
+    cardParams.name = cardholderName
+    cardParams.number = cardNumber
+    cardParams.expMonth = UInt(expirationMonth)
+    cardParams.expYear = UInt(expirationYear)
+    cardParams.cvc = cvc
+
+    STPAPIClient.shared().createToken(withCard: cardParams) { token, error in
+      if let token = token {
+        self.viewModel.inputs.stripeCreated(token.tokenId, stripeID: token.stripeID)
+      } else {
+        self.viewModel.inputs.stripeError(error)
+      }
+    }
   }
 }

Kickstarter-iOS/Views/Controllers/PaymentMethodsViewController.swift

@@ -11,13 +11,21 @@ internal final class PaymentMethodsViewController: UIViewController {
   @IBOutlet private weak var headerLabel: UILabel!
   @IBOutlet private weak var tableView: UITableView!
 
+  private var messageBannerView: MessageBannerViewController!
+
   public static func instantiate() -> PaymentMethodsViewController {
     return Storyboard.Settings.instantiate(PaymentMethodsViewController.self)
   }
 
   override func viewDidLoad() {
     super.viewDidLoad()
 
+    guard let messageViewController = self.children.first as? MessageBannerViewController else {
+      fatalError("Missing message View Controller")
+
+    }
+    self.messageBannerView = messageViewController
+
     self.tableView.dataSource = self.dataSource
     self.tableView.delegate = self
     self.tableView.register(nib: .CreditCardCell)
@@ -36,6 +44,12 @@ internal final class PaymentMethodsViewController: UIViewController {
     }
   }
 
+  override func viewDidAppear(_ animated: Bool) {
+    super.viewDidAppear(animated)
+
+    self.viewModel.inputs.viewDidAppear()
+  }
+
   override func bindStyles() {
     super.bindStyles()
 
@@ -74,6 +88,12 @@ internal final class PaymentMethodsViewController: UIViewController {
         self?.goToAddCardScreen()
     }
 
+    self.viewModel.outputs.presentBanner
+      .observeForUI()
+      .observeValues { [weak self] message in
+        self?.messageBannerView.showBanner(with: .success, message: message)
+    }
+
     self.viewModel.outputs.tableViewIsEditing
       .observeForUI()
       .observeValues { [weak self] isEditing in
@@ -96,6 +116,7 @@ internal final class PaymentMethodsViewController: UIViewController {
 
   private func goToAddCardScreen() {
     let vc = AddNewCardViewController.instantiate()
+    vc.delegate = self
     let nav = UINavigationController(rootViewController: vc)
     nav.modalPresentationStyle = .formSheet
 
@@ -123,8 +144,13 @@ extension PaymentMethodsViewController: UITableViewDelegate {
 }
 
 extension PaymentMethodsViewController: PaymentMethodsFooterViewDelegate {
-
   internal func paymentMethodsFooterViewDidTapAddNewCardButton(_ footerView: PaymentMethodsFooterView) {
     self.viewModel.inputs.paymentMethodsFooterViewDidTapAddNewCardButton()
   }
 }
+
+extension PaymentMethodsViewController: AddNewCardViewControllerDelegate {
+  internal func presentAddCardSuccessfulBanner(_ message: String) {
+    self.viewModel.inputs.cardAddedSuccessfully(message)
+  }
+}