Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[NT-262] Remember this card UI #848

Merged
merged 8 commits into from
Sep 24, 2019
Merged

[NT-262] Remember this card UI #848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2ee766a
Add remember this card switch to storyboard
justinswart Sep 20, 2019
ac82294
Add AddNewCardIntent, only show switch from pledge view
justinswart Sep 20, 2019
8779b12
Fix snapshot tests
justinswart Sep 20, 2019
1fe85fb
Formatting
justinswart Sep 20, 2019
fa3a55d
Remove incorrect intent in test
justinswart Sep 23, 2019
3fd0ed0
Merge branch 'master' into remember_this_card_ui
justinswart Sep 23, 2019
ff214a1
Use adaptable stack view
justinswart Sep 23, 2019
16fcd81
Use ToggleViewController, alphabetize
justinswart Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 83 additions & 4 deletions Kickstarter-iOS/Views/Controllers/AddNewCardViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ internal final class AddNewCardViewController: UIViewController,
@IBOutlet private var cardholderNameLabel: UILabel!
@IBOutlet private var cardholderNameTextField: UITextField!
@IBOutlet private var creditCardTextField: STPPaymentCardTextField!
@IBOutlet private var creditCardValidationErrorLabel: UILabel!
@IBOutlet private var creditCardValidationErrorContainer: UIView!
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alphabetize

@IBOutlet private var creditCardValidationErrorLabel: UILabel!
@IBOutlet private var scrollView: UIScrollView!
@IBOutlet private var stackView: UIStackView!
@IBOutlet private var zipcodeView: SettingsFormFieldView!
Expand All @@ -46,6 +46,10 @@ internal final class AddNewCardViewController: UIViewController,
return Storyboard.Settings.instantiate(AddNewCardViewController.self)
}

func configure(with intent: AddNewCardIntent) {
self.viewModel.inputs.configure(with: intent)
}

override func viewDidLoad() {
super.viewDidLoad()

Expand Down Expand Up @@ -91,6 +95,8 @@ internal final class AddNewCardViewController: UIViewController,

self.creditCardTextField.delegate = self

self.configureRememberThisCardToggleViewController()

self.viewModel.inputs.viewDidLoad()
}

Expand Down Expand Up @@ -125,9 +131,6 @@ internal final class AddNewCardViewController: UIViewController,
_ = self.scrollView
|> \.alwaysBounceVertical .~ true

_ = self.stackView
|> \.layoutMargins .~ .init(leftRight: Styles.grid(2))

_ = self.zipcodeView.titleLabel
|> \.text %~ { _ in
localizedPostalCode()
Expand All @@ -136,11 +139,32 @@ internal final class AddNewCardViewController: UIViewController,
_ = self.zipcodeView
|> \.autocapitalizationType .~ .allCharacters
|> \.returnKeyType .~ .done

_ = self.rememberThisCardToggleViewController.titleLabel
|> \.text %~ { _ in Strings.Remember_this_card() }

_ = self.rememberThisCardToggleViewController.toggle
|> \.accessibilityLabel %~ { _ in Strings.Remember_this_card() }

_ = [
self.rememberThisCardToggleViewControllerContainer,
self.rememberThisCardToggleViewController.view
]
.compact()
||> \.backgroundColor .~ UIColor.white
}

override func bindViewModel() {
super.bindViewModel()

self.rememberThisCardToggleViewControllerContainer.rac.hidden =
self.viewModel.outputs.rememberThisCardToggleViewControllerContainerIsHidden

self.viewModel.outputs.rememberThisCardToggleViewControllerIsOn
.observeValues { [weak self] isOn in
self?.rememberThisCardToggleViewController.toggle.isOn = isOn
}

self.creditCardValidationErrorContainer.rac.hidden =
self.viewModel.outputs.creditCardValidationErrorContainerHidden
self.cardholderNameTextField.rac.becomeFirstResponder =
Expand Down Expand Up @@ -239,6 +263,50 @@ internal final class AddNewCardViewController: UIViewController,

// MARK: - Functions

private func configureRememberThisCardToggleViewController() {
self.rememberThisCardToggleViewController.willMove(toParent: self)
self.addChild(self.rememberThisCardToggleViewController)

_ = (self.rememberThisCardToggleViewController.view, self.rememberThisCardToggleViewControllerContainer)
|> ksr_addSubviewToParent()
|> ksr_constrainViewToMarginsInParent()

self.rememberThisCardToggleViewController.didMove(toParent: self)

self.stackView.addArrangedSubview(self.rememberThisCardToggleViewControllerContainer)

let topSeparator = UIView(frame: .zero)
let bottomSeparator = UIView(frame: .zero)

_ = [topSeparator, bottomSeparator]
||> \.translatesAutoresizingMaskIntoConstraints .~ false
||> \.backgroundColor .~ .ksr_grey_400

self.rememberThisCardToggleViewControllerContainer.addSubview(topSeparator)
self.rememberThisCardToggleViewControllerContainer.addSubview(bottomSeparator)

NSLayoutConstraint.activate([
topSeparator.leftAnchor
.constraint(equalTo: self.rememberThisCardToggleViewControllerContainer.leftAnchor),
topSeparator.topAnchor
.constraint(equalTo: self.rememberThisCardToggleViewControllerContainer.topAnchor),
topSeparator.rightAnchor
.constraint(equalTo: self.rememberThisCardToggleViewControllerContainer.rightAnchor),
topSeparator.heightAnchor.constraint(equalToConstant: 0.5),
bottomSeparator.leftAnchor
.constraint(equalTo: self.rememberThisCardToggleViewControllerContainer.leftAnchor),
bottomSeparator.bottomAnchor
.constraint(equalTo: self.rememberThisCardToggleViewControllerContainer.bottomAnchor),
bottomSeparator.rightAnchor
.constraint(equalTo: self.rememberThisCardToggleViewControllerContainer.rightAnchor),
bottomSeparator.heightAnchor.constraint(equalToConstant: 0.5)
])

self.rememberThisCardToggleViewControllerContainer.heightAnchor
.constraint(greaterThanOrEqualToConstant: Styles.minTouchSize.height)
.isActive = true
}

private func createStripeToken(with paymentDetails: PaymentDetails) {
let cardParams = STPCardParams()
cardParams.name = paymentDetails.cardholderName
Expand Down Expand Up @@ -269,6 +337,17 @@ internal final class AddNewCardViewController: UIViewController,
[self.cardholderNameTextField, self.creditCardTextField, self.zipcodeView.textField]
.forEach { $0?.resignFirstResponder() }
}

// MARK: - Subviews

private lazy var rememberThisCardToggleViewControllerContainer: UIView = {
UIView(frame: .zero)
|> \.translatesAutoresizingMaskIntoConstraints .~ false
}()

private lazy var rememberThisCardToggleViewController: ToggleViewController = {
ToggleViewController(nibName: nil, bundle: nil)
}()
}

// MARK: - Zipcode UITextField Delegate
Expand Down
14 changes: 14 additions & 0 deletions Kickstarter-iOS/Views/Controllers/AddNewCardViewControllerTests.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,19 @@ final class AddNewCardViewControllerTests: TestCase {
combos(Language.allLanguages, Device.allCases).forEach { language, device in
withEnvironment(language: language) {
let controller = AddNewCardViewController.instantiate()
controller.configure(with: .settings)
let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)

FBSnapshotVerifyView(parent.view, identifier: "lang_\(language)_device_\(device)")
}
}
}

func testAddNewCard_PledgeViewIntent() {
combos(Language.allLanguages, Device.allCases).forEach { language, device in
withEnvironment(language: language) {
let controller = AddNewCardViewController.instantiate()
controller.configure(with: .pledge)
let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)

FBSnapshotVerifyView(parent.view, identifier: "lang_\(language)_device_\(device)")
Expand All @@ -31,6 +44,7 @@ final class AddNewCardViewControllerTests: TestCase {
combos(locales, Device.allCases).forEach { locale, device in
withEnvironment(locale: locale) {
let controller = AddNewCardViewController.instantiate()
controller.configure(with: .settings)
let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)

FBSnapshotVerifyView(parent.view, identifier: "locale_\(locale)_device_\(device)")
Expand Down
9 changes: 5 additions & 4 deletions Kickstarter-iOS/Views/Controllers/PaymentMethodsViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,10 @@ internal final class PaymentMethodsViewController: UIViewController, MessageBann
self?.tableView.reloadData()
}

self.viewModel.outputs.goToAddCardScreen
self.viewModel.outputs.goToAddCardScreenWithIntent
.observeForUI()
.observeValues { [weak self] in
self?.goToAddCardScreen()
.observeValues { [weak self] intent in
self?.goToAddCardScreen(with: intent)
}

self.viewModel.outputs.errorLoadingPaymentMethods
Expand Down Expand Up @@ -137,8 +137,9 @@ internal final class PaymentMethodsViewController: UIViewController, MessageBann
self.viewModel.inputs.editButtonTapped()
}

private func goToAddCardScreen() {
private func goToAddCardScreen(with intent: AddNewCardIntent) {
let vc = AddNewCardViewController.instantiate()
vc.configure(with: intent)
vc.delegate = self
let nav = UINavigationController(rootViewController: vc)
nav.modalPresentationStyle = .formSheet
Expand Down
3 changes: 2 additions & 1 deletion Kickstarter-iOS/Views/Controllers/PledgePaymentMethodsViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,9 +207,10 @@ final class PledgePaymentMethodsViewController: UIViewController {
}

extension PledgePaymentMethodsViewController: PledgeAddNewCardViewDelegate {
func pledgeAddNewCardViewDidTapAddNewCard(_: PledgeAddNewCardView) {
func pledgeAddNewCardView(_: PledgeAddNewCardView, didTapAddNewCardWith intent: AddNewCardIntent) {
let addNewCardViewController = AddNewCardViewController.instantiate()
|> \.delegate .~ self
addNewCardViewController.configure(with: intent)
let navigationController = UINavigationController.init(rootViewController: addNewCardViewController)
let offset = navigationController.navigationBar.bounds.height

Expand Down
8 changes: 4 additions & 4 deletions Kickstarter-iOS/Views/PledgeAddNewCardView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Prelude
import UIKit

protocol PledgeAddNewCardViewDelegate: AnyObject {
func pledgeAddNewCardViewDidTapAddNewCard(_ view: PledgeAddNewCardView)
func pledgeAddNewCardView(_ view: PledgeAddNewCardView, didTapAddNewCardWith intent: AddNewCardIntent)
}

final class PledgeAddNewCardView: UIView {
Expand Down Expand Up @@ -60,12 +60,12 @@ final class PledgeAddNewCardView: UIView {
override func bindViewModel() {
super.bindViewModel()

self.viewModel.outputs.notifyDelegateAddNewCardTapped
self.viewModel.outputs.notifyDelegateAddNewCardTappedWithIntent
.observeForControllerAction()
.observeValues { [weak self] in
.observeValues { [weak self] intent in
guard let self = self else { return }

self.delegate?.pledgeAddNewCardViewDidTapAddNewCard(self)
self.delegate?.pledgeAddNewCardView(self, didTapAddNewCardWith: intent)
}
}

Expand Down
23 changes: 15 additions & 8 deletions Kickstarter-iOS/Views/Storyboards/Settings.storyboard
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
Expand Down Expand Up @@ -705,11 +705,11 @@
<rect key="frame" x="0.0" y="20" width="375" height="647"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="lnb-P0-tav">
<rect key="frame" x="0.0" y="0.0" width="375" height="230"/>
<rect key="frame" x="0.0" y="0.0" width="375" height="266"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="oRB-S8-IL5">
<rect key="frame" x="0.0" y="0.0" width="375" height="36"/>
<color key="backgroundColor" red="0.96862745100000003" green="0.96862745100000003" blue="0.96470588239999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<color key="backgroundColor" red="0.96862918138504028" green="0.96862143278121948" blue="0.96469765901565552" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<constraints>
<constraint firstAttribute="height" constant="36" id="SgZ-ux-4rM"/>
</constraints>
Expand Down Expand Up @@ -770,7 +770,7 @@
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="gOu-68-PJO" userLabel="Separator">
<rect key="frame" x="12" y="49.5" width="363" height="0.5"/>
<color key="backgroundColor" red="0.86274509799999999" green="0.87058823529999996" blue="0.86666666670000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<color key="backgroundColor" red="0.86667495965957642" green="0.87058132886886597" blue="0.86665928363800049" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<constraints>
<constraint firstAttribute="height" constant="0.5" id="C9K-8j-qEY"/>
</constraints>
Expand Down Expand Up @@ -816,20 +816,27 @@
<constraint firstAttribute="bottom" secondItem="AWc-a8-i6h" secondAttribute="bottom" constant="6" id="Lhr-jD-mGO"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="BBs-iP-fzT">
<rect key="frame" x="0.0" y="230" width="375" height="36"/>
<color key="backgroundColor" red="0.96862918139999998" green="0.96862143280000002" blue="0.96469765900000004" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<constraints>
<constraint firstAttribute="height" constant="36" id="jUY-Gb-szA"/>
</constraints>
</view>
</subviews>
</stackView>
</subviews>
<constraints>
<constraint firstItem="lnb-P0-tav" firstAttribute="top" secondItem="WND-4C-aQn" secondAttribute="top" id="APw-GW-rXx"/>
<constraint firstItem="lnb-P0-tav" firstAttribute="leading" secondItem="WND-4C-aQn" secondAttribute="leading" id="OIK-1Z-bRx"/>
<constraint firstAttribute="trailing" secondItem="lnb-P0-tav" secondAttribute="trailing" id="jDZ-V7-z0T"/>
<constraint firstAttribute="bottom" secondItem="lnb-P0-tav" secondAttribute="bottom" id="y9W-Ob-6iH"/>
<constraint firstItem="lnb-P0-tav" firstAttribute="trailing" secondItem="WND-4C-aQn" secondAttribute="trailing" id="jDZ-V7-z0T"/>
<constraint firstItem="lnb-P0-tav" firstAttribute="bottom" secondItem="WND-4C-aQn" secondAttribute="bottom" id="y9W-Ob-6iH"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" red="0.96862745100000003" green="0.96862745100000003" blue="0.96470588239999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="lnb-P0-tav" firstAttribute="width" secondItem="uO6-wU-ph7" secondAttribute="width" id="8No-JO-8fA"/>
<constraint firstItem="lnb-P0-tav" firstAttribute="width" secondItem="8Z2-wp-VS9" secondAttribute="width" id="9Ae-Vw-JZ1"/>
<constraint firstItem="uO6-wU-ph7" firstAttribute="trailing" secondItem="WND-4C-aQn" secondAttribute="trailing" id="EuV-qO-bni"/>
<constraint firstItem="WND-4C-aQn" firstAttribute="leading" secondItem="uO6-wU-ph7" secondAttribute="leading" id="bKt-mR-G6r"/>
<constraint firstItem="uO6-wU-ph7" firstAttribute="bottom" secondItem="WND-4C-aQn" secondAttribute="bottom" id="s0b-d5-aBB"/>
Expand Down
4 changes: 4 additions & 0 deletions Kickstarter.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,7 @@
80EAEF051D243C4E008C2353 /* Backing.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 80EAEF031D243C4E008C2353 /* Backing.storyboard */; };
80EAEF071D243FC7008C2353 /* BackingViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 80EAEF011D243B69008C2353 /* BackingViewController.swift */; };
8A072D3A230223B200BA1538 /* UIImage+Color.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8A072D39230223B200BA1538 /* UIImage+Color.swift */; };
8A142EBD23354BFD00FB43AB /* AddNewCardIntent.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8A142EBC23354BFD00FB43AB /* AddNewCardIntent.swift */; };
8A23EF0822F11470001262E1 /* RewardCardContainerViewTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8A23EF0722F11470001262E1 /* RewardCardContainerViewTests.swift */; };
8A8099EB22E213F100373E66 /* RewardCardView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8A8099E922E213F100373E66 /* RewardCardView.swift */; };
8A8099EC22E213F100373E66 /* RewardCardContainerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8A8099EA22E213F100373E66 /* RewardCardContainerView.swift */; };
Expand Down Expand Up @@ -1645,6 +1646,7 @@
80EAEF011D243B69008C2353 /* BackingViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BackingViewController.swift; sourceTree = "<group>"; };
80EAEF031D243C4E008C2353 /* Backing.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = Backing.storyboard; sourceTree = "<group>"; };
8A072D39230223B200BA1538 /* UIImage+Color.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImage+Color.swift"; sourceTree = "<group>"; };
8A142EBC23354BFD00FB43AB /* AddNewCardIntent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddNewCardIntent.swift; sourceTree = "<group>"; };
8A23EF0722F11470001262E1 /* RewardCardContainerViewTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RewardCardContainerViewTests.swift; sourceTree = "<group>"; };
8A8099E922E213F100373E66 /* RewardCardView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RewardCardView.swift; sourceTree = "<group>"; };
8A8099EA22E213F100373E66 /* RewardCardContainerView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RewardCardContainerView.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -3199,6 +3201,7 @@
A73378F91D0AE33B00C91445 /* Styles */,
A7ED1F421E831BA200BFFA01 /* TestHelpers */,
A7F4418D1D005A9400FE6FC5 /* ViewModels */,
8A142EBC23354BFD00FB43AB /* AddNewCardIntent.swift */,
);
path = Library;
sourceTree = "<group>";
Expand Down Expand Up @@ -4705,6 +4708,7 @@
598D96C51D42A3E3003F3F66 /* ActivitySampleFollowCellViewModel.swift in Sources */,
598D96BA1D426FD8003F3F66 /* ActivitySampleBackingCellViewModel.swift in Sources */,
59E877381DC9419700BCD1F7 /* Newsletter.swift in Sources */,
8A142EBD23354BFD00FB43AB /* AddNewCardIntent.swift in Sources */,
D6B6F9C020F403F400A295F7 /* UserAttribute.swift in Sources */,
374CB94F22C17D4E00B84219 /* CharacterSet.swift in Sources */,
A755116C1C8642C3005355CF /* UIPress-Extensions.swift in Sources */,
Expand Down
6 changes: 6 additions & 0 deletions Library/AddNewCardIntent.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import Foundation

public enum AddNewCardIntent: Equatable {
case pledge
case settings
}
Loading