Stripe element add new card (#473)

* New card screen ui (#471)

* add card view controller

* transition to add new card and uibarbuttons

* settings style applied to add new card screen

* changed keyboard style for textfields

* view controller tests

* placeholder for cardholder name textfield

* Record new screenshots

* new strings, added strings as place holder and text label

* pr feedback - inferring type for cancel button tintcolor

* pr feedback - keypath, no more lenses

* swiftlint fix

* new snapshots

* new stppaymentcardtextfield showing

* wip - placeholder colors

* snapshot tests

* Email undeliverable/unverified (#478)

* Adding emailIsVerified

* Renaming GraphUserEmail

* ViewModel tests

* ChangeEmailViewController tests

* Strings, swiftlint

* Strings & new screenshots

* Cleanup

* PR comments

* PR updates

* Test naming

* pr feedback

* new snapshots

* new placeholder colors

* new snapshots

Kickstarter-iOS/Locales/Base.lproj/Localizable.strings

@@ -29,6 +29,7 @@
 "Any_payment_methods_you_saved_to_Kickstarter" = "Any payment methods you've saved to Kickstarter are listed here (securely) for your convenience.";
 "App_version" = "App version";
 "Are_you_sure" = "Are you sure?";
+"Are_you_sure_you_wish_to_remove_this_card" = "Are you sure you wish to remove this card from your payment method options?";
 "Ask_me_anything" = "Ask me anything";
 "Available_to_watch_for_time_more_units" = "Available to watch for %{time} more %{units}";
 "Back" = "Back";
@@ -249,6 +250,7 @@
 "Messages" = "Messages";
 "Name" = "Name";
 "Never" = "Never";
+"New_email" = "New email";
 "New_password" = "New password";
 "New_pledge_activity" = "New pledge activity";
 "New_work_and_big_ideas_from_established_and" = "New work and big ideas from established and emerging artists.";
@@ -257,6 +259,7 @@
 "No_Results" = "No Results";
 "No_comments_yet" = "No comments yet.";
 "No_messages" = "No messages";
+"No_nevermind" = "No, nevermind";
 "No_one_has_posted_an_update_yet" = "No one has posted an update yet.";
 "No_pledges_from_friends_yet" = "No pledges\nfrom friends yet.";
 "No_replay_is_available_for_this_live_stream" = "No replay is available for this live stream.";
@@ -335,6 +338,7 @@
 "Recommended_For_You" = "Recommended For You";
 "Recorded_Live" = "Recorded Live";
 "Recorded_live_with_creator_name" = "Recorded live with <b>%{creator_name}</b>";
+"Remove_this_card" = "Remove this card";
 "Replay" = "Replay";
 "Replay_available_for_time_more_units" = "Replay available for %{time} more %{units}";
 "Replay_live_stream_with_creator_name" = "Replay live stream with<br><b>%{creator_name}</b>";
@@ -460,6 +464,7 @@
 "When_you_save_a_project_we_ll_send_you_a_reminder" = "When you save a project we’ll send you a reminder 48 hours before it ends";
 "Write_a_bio" = "Write a short bio. Just a sentence or two is great.";
 "Yes_change_currency" = "Yes, Change currency";
+"Yes_remove" = "Yes, remove";
 "Yes_turn_off" = "Yes, turn off";
 "You_Launched" = "You Launched!";
 "You_backed_this_project" = "You backed this project.";

Kickstarter-iOS/Locales/de.lproj/Localizable.strings

@@ -29,6 +29,7 @@
 "Any_payment_methods_you_saved_to_Kickstarter" = "Sämtliche auf Kickstarter gespeicherten Zahlungsmethoden sind hier (sicher) hinterlegt.";
 "App_version" = "App-Version";
 "Are_you_sure" = "Bist du sicher?";
+"Are_you_sure_you_wish_to_remove_this_card" = "Are you sure you wish to remove this card from your payment method options?";
 "Ask_me_anything" = "Frage stellen";
 "Available_to_watch_for_time_more_units" = "Kann noch %{time} %{units} angesehen werden";
 "Back" = "Zurück";
@@ -249,6 +250,7 @@
 "Messages" = "Nachrichten";
 "Name" = "Name";
 "Never" = "Niemals";
+"New_email" = "New email";
 "New_password" = "Neues Passwort";
 "New_pledge_activity" = "Neue Finanzierungsbeiträge";
 "New_work_and_big_ideas_from_established_and" = "Neue Arbeiten und großartige Ideen von etablierten und neuen Künstlern.";
@@ -257,6 +259,7 @@
 "No_Results" = "Keine Ergebnisse";
 "No_comments_yet" = "Bisher noch keine Kommentare.";
 "No_messages" = "Keine Nachrichten";
+"No_nevermind" = "No, nevermind";
 "No_one_has_posted_an_update_yet" = "Es wurden noch keine Updates gepostet.";
 "No_pledges_from_friends_yet" = "Es gibt noch keine Beiträge von Freunden.";
 "No_replay_is_available_for_this_live_stream" = "Keine Wiedergabe verügbar für diesen Live-Stream.";
@@ -335,6 +338,7 @@
 "Recommended_For_You" = "Empfehlungen für dich";
 "Recorded_Live" = "Live aufgenommen";
 "Recorded_live_with_creator_name" = "Live aufgenommen von <b>%{creator_name}</b>";
+"Remove_this_card" = "Remove this card";
 "Replay" = "Wiedergabe";
 "Replay_available_for_time_more_units" = "Wiedergabe verfügbar für weitere %{time} %{units}";
 "Replay_live_stream_with_creator_name" = "Wiedergabe des Live-Streams von<br><b>%{creator_name}</b>";
@@ -460,6 +464,7 @@
 "When_you_save_a_project_we_ll_send_you_a_reminder" = "Wenn du ein Projekt speicherst, senden wir dir 48 Stunden vor Ablauf eine Erinnerungs-E-Mail";
 "Write_a_bio" = "Schreibe eine kurze Biografie, ein oder zwei Sätze genügen.";
 "Yes_change_currency" = "Ja, Währung ändern";
+"Yes_remove" = "Yes, remove";
 "Yes_turn_off" = "Ja, deaktivieren";
 "You_Launched" = "Dein Projekt ist live!";
 "You_backed_this_project" = "Du hast dieses Projekt unterstützt.";

Kickstarter-iOS/Locales/es.lproj/Localizable.strings

@@ -29,6 +29,7 @@
 "Any_payment_methods_you_saved_to_Kickstarter" = "Para tu comodidad, aquí se enumeran (de manera absolutamente segura) los métodos de pago que guardaste en Kickstarter.";
 "App_version" = "Versión de la aplicación";
 "Are_you_sure" = "¿Estás seguro?";
+"Are_you_sure_you_wish_to_remove_this_card" = "Are you sure you wish to remove this card from your payment method options?";
 "Ask_me_anything" = "¡Pregúntame!";
 "Available_to_watch_for_time_more_units" = "Disponible para reproducción %{time} %{units} más";
 "Back" = "Atrás";
@@ -249,6 +250,7 @@
 "Messages" = "Mensajes";
 "Name" = "Nombre";
 "Never" = "Nunca";
+"New_email" = "New email";
 "New_password" = "Contraseña nueva";
 "New_pledge_activity" = "Nueva actividad de contribución";
 "New_work_and_big_ideas_from_established_and" = "Nuevos trabajos y grandes ideas de artistas establecidos y emergentes.";
@@ -257,6 +259,7 @@
 "No_Results" = "Sin resultados";
 "No_comments_yet" = "No hay comentarios todavia.";
 "No_messages" = "No hay mensajes";
+"No_nevermind" = "No, nevermind";
 "No_one_has_posted_an_update_yet" = "Todavía no se han publicado actualizaciones.";
 "No_pledges_from_friends_yet" = "Todavía no hay contribuciones de amigos.";
 "No_replay_is_available_for_this_live_stream" = "Este Live Stream no cuenta con repetición.";
@@ -335,6 +338,7 @@
 "Recommended_For_You" = "Recomendaciones para ti";
 "Recorded_Live" = "Grabado en vivo";
 "Recorded_live_with_creator_name" = "Grabado en vivo por <b>%{creator_name}</b>";
+"Remove_this_card" = "Remove this card";
 "Replay" = "Repetición";
 "Replay_available_for_time_more_units" = "Repetición disponible por %{time} %{units} más";
 "Replay_live_stream_with_creator_name" = "Repetir live stream de<br><b>%{creator_name}</b>";
@@ -460,6 +464,7 @@
 "When_you_save_a_project_we_ll_send_you_a_reminder" = "Cuando guardes un proyecto, te enviaremos un recordatorio por correo electrónico 48 horas antes de que finalice";
 "Write_a_bio" = "Escribe una biografía breve mediante una oración o dos.";
 "Yes_change_currency" = "Sí, cambiar la moneda";
+"Yes_remove" = "Yes, remove";
 "Yes_turn_off" = "Sí, desactivar";
 "You_Launched" = "¡Tu proyecto fue publicado!";
 "You_backed_this_project" = "Patrocinaste este proyecto.";

Kickstarter-iOS/Locales/fr.lproj/Localizable.strings

@@ -29,6 +29,7 @@
 "Any_payment_methods_you_saved_to_Kickstarter" = "Voici une liste (sécurisée) de tous les moyens de paiement que vous avez ajoutés à votre compte Kickstarter.";
 "App_version" = "Version de l'application";
 "Are_you_sure" = "Êtes-vous certain ?";
+"Are_you_sure_you_wish_to_remove_this_card" = "Are you sure you wish to remove this card from your payment method options?";
 "Ask_me_anything" = "Posez-moi une question !";
 "Available_to_watch_for_time_more_units" = "Plus que %{time}%{units} pour regarder cette diffusion";
 "Back" = "Retour";
@@ -249,6 +250,7 @@
 "Messages" = "Messages";
 "Name" = "Nom";
 "Never" = "Jamais";
+"New_email" = "New email";
 "New_password" = "Nouveau mot de passe";
 "New_pledge_activity" = "Nouveaux engagements";
 "New_work_and_big_ideas_from_established_and" = "Grandes idées et nouveaux travaux signés par des artistes établis et émergents.";
@@ -257,6 +259,7 @@
 "No_Results" = "Pas de résultats";
 "No_comments_yet" = "Pas de commentaires.";
 "No_messages" = "Pas de messages";
+"No_nevermind" = "No, nevermind";
 "No_one_has_posted_an_update_yet" = "Pas d'actus publiées pour le moment.";
 "No_pledges_from_friends_yet" = "Mes amis \nn'ont rien soutenu.";
 "No_replay_is_available_for_this_live_stream" = "Pas de rediffusion possible pour cette diffusion en direct.";
@@ -335,6 +338,7 @@
 "Recommended_For_You" = "Rien que pour vous";
 "Recorded_Live" = "Enregistré en direct";
 "Recorded_live_with_creator_name" = "Enregistré en direct avec <b>%{creator_name}</b>";
+"Remove_this_card" = "Remove this card";
 "Replay" = "Rediffuser";
 "Replay_available_for_time_more_units" = "Rediffusion encore disponible pendant %{time} %{units}";
 "Replay_live_stream_with_creator_name" = "Revoir la diffusion en direct de <br><b>%{creator_name}</b>";
@@ -460,6 +464,7 @@
 "When_you_save_a_project_we_ll_send_you_a_reminder" = "Pour chaque projet que vous enregistrez, nous vous enverrons un rappel 48 heures avant la fin de sa campagne.";
 "Write_a_bio" = "Une petite biographie d'une phrase ou deux.";
 "Yes_change_currency" = "Oui, changer de devise";
+"Yes_remove" = "Yes, remove";
 "Yes_turn_off" = "Oui, désactiver";
 "You_Launched" = "Projet lancé !";
 "You_backed_this_project" = "Vous avez soutenu ce projet.";

Kickstarter-iOS/Locales/ja.lproj/Localizable.strings

@@ -29,6 +29,7 @@
 "Any_payment_methods_you_saved_to_Kickstarter" = "Kickstarter に保存されたお支払い方法は、こちらに (安全に) リストアップされます。";
 "App_version" = "アプリ版";
 "Are_you_sure" = "オフにしてもよろしいですか？";
+"Are_you_sure_you_wish_to_remove_this_card" = "Are you sure you wish to remove this card from your payment method options?";
 "Ask_me_anything" = "お問い合わせ";
 "Available_to_watch_for_time_more_units" = "さらに%{time} の%{units} を見ることができます";
 "Back" = "バック";
@@ -249,6 +250,7 @@
 "Messages" = "メッセージ";
 "Name" = "名前";
 "Never" = "通知を受けない";
+"New_email" = "New email";
 "New_password" = "新しいパスワード";
 "New_pledge_activity" = "新しいプレッジ";
 "New_work_and_big_ideas_from_established_and" = "新進アーティストや著名アーティストの最新プロジェクトやアイデアをご紹介。";
@@ -257,6 +259,7 @@
 "No_Results" = "該当結果なし";
 "No_comments_yet" = "まだコメントはありません。";
 "No_messages" = "メッセージがありません。";
+"No_nevermind" = "No, nevermind";
 "No_one_has_posted_an_update_yet" = "まだアップデートの投稿はありません。";
 "No_pledges_from_friends_yet" = "友達からのプレッジはありません。";
 "No_replay_is_available_for_this_live_stream" = "このライブ配信を再生することはできません";
@@ -335,6 +338,7 @@
 "Recommended_For_You" = "あなたへのおすすめ";
 "Recorded_Live" = "配信済ライブ";
 "Recorded_live_with_creator_name" = "配信された<b>%{creator_name}</b>のライブ";
+"Remove_this_card" = "Remove this card";
 "Replay" = "リプレイ";
 "Replay_available_for_time_more_units" = "あと%{time}%{units} リプレイ可能";
 "Replay_live_stream_with_creator_name" = "<b>%{creator_name}</b>のライブ配信を再生";
@@ -460,6 +464,7 @@
 "When_you_save_a_project_we_ll_send_you_a_reminder" = "プロジェクトを保存し、終了の48時間前にリマインドする。";
 "Write_a_bio" = "簡単な自己紹介を書いてください。ほんの１～２文で構いません。";
 "Yes_change_currency" = "はい、通貨を変更します";
+"Yes_remove" = "Yes, remove";
 "Yes_turn_off" = "はい、オフにします";
 "You_Launched" = "発表されました！";
 "You_backed_this_project" = "バック済";

Kickstarter-iOS/Views/Controllers/AddNewCardViewController.swift

@@ -2,21 +2,15 @@ import KsApi
 import Library
 import Prelude
 import ReactiveSwift
+import Stripe
 import UIKit
 
-internal final class AddNewCardViewController: UIViewController {
-  @IBOutlet fileprivate weak var cardNumberLabel: UILabel!
-  @IBOutlet fileprivate weak var cardNumberTextField: UITextField!
-  @IBOutlet fileprivate weak var cardholderNameLabel: UILabel!
-  @IBOutlet fileprivate weak var cardholderNameTextField: UITextField!
-  @IBOutlet fileprivate weak var expirationLabel: UILabel!
-  @IBOutlet fileprivate weak var expirationTextField: UITextField!
-  @IBOutlet fileprivate weak var securityCodeLabel: UILabel!
-  @IBOutlet fileprivate weak var securityCodeTextField: UITextField!
-  @IBOutlet fileprivate weak var zipCodeLabel: UILabel!
-  @IBOutlet fileprivate weak var zipCodeTextField: UITextField!
+internal final class AddNewCardViewController: UIViewController, STPPaymentCardTextFieldDelegate {
 
   private weak var saveButtonView: LoadingBarButtonItemView!
+  @IBOutlet private weak var cardholderNameLabel: UILabel!
+  @IBOutlet private weak var cardholderNameTextField: UITextField!
+  @IBOutlet private weak var paymentField: STPPaymentCardTextField!
 
   internal static func instantiate() -> AddNewCardViewController {
     return Storyboard.Settings.instantiate(AddNewCardViewController.self)
@@ -37,6 +31,8 @@ internal final class AddNewCardViewController: UIViewController {
     self.saveButtonView.addTarget(self, action: #selector(saveButtonTapped))
     let navigationBarButton = UIBarButtonItem(customView: self.saveButtonView)
     self.navigationItem.setRightBarButton(navigationBarButton, animated: false)
+
+    self.paymentField.delegate = self
   }
 
   override func bindStyles() {
@@ -45,42 +41,23 @@ internal final class AddNewCardViewController: UIViewController {
     _ = self
       |> settingsViewControllerStyle
 
-    _ = [self.cardNumberTextField, self.cardholderNameTextField, self.expirationTextField,
-         self.securityCodeTextField, self.zipCodeTextField]
-      ||> formFieldStyle
-      ||> \.textAlignment .~ .right
-
-    _ = [self.cardNumberLabel, self.cardholderNameLabel, self.expirationLabel,
-         self.securityCodeLabel, self.zipCodeLabel]
-      ||> settingsTitleLabelStyle
-
-    _ = [self.cardNumberTextField, self.expirationTextField, self.securityCodeTextField,
-         self.zipCodeTextField]
-      ||> \.keyboardType .~ .numberPad
-
-    _ = self.cardNumberLabel
-      |> \.text %~ { _ in Strings.Card_number() }
-
     _ = self.cardholderNameLabel
+      |> settingsSectionLabelStyle
       |> \.text %~ { _ in Strings.Cardholder_name() }
 
-    _ = self.expirationLabel
-      |> \.text %~ { _ in Strings.Expiration() }
-
-    _ = self.securityCodeLabel
-      |> \.text %~ { _ in Strings.Security_code() }
-
-    _ = self.zipCodeLabel
-      |> \.text %~ { _ in Strings.Zip_code() }
-
     _ = self.cardholderNameTextField
-      |> \.placeholder %~ { _ in Strings.Name() }
-
-    _ = self.expirationTextField
-      |> \.placeholder %~ { _ in Strings.MMYY() }
-
-    _ = self.securityCodeTextField
-      |> \.placeholder %~ { _ in Strings.CVC() }
+      |> formFieldStyle
+      |> \.textAlignment .~ .right
+      |> \.attributedPlaceholder .~ NSAttributedString(
+          string: Strings.Name(),
+          attributes: [NSAttributedString.Key.foregroundColor: UIColor.ksr_text_dark_grey_400])
+
+    _ = self.paymentField
+      |> \.borderColor .~ nil
+      |> \.font .~ .ksr_body()
+      |> \.cursorColor .~ .ksr_green_700
+      |> \.textColor .~ .ksr_text_dark_grey_500
+      |> \.placeholderColor .~ .ksr_text_dark_grey_400
   }
 
   @objc fileprivate func cancelButtonTapped() {