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.

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

[NT-357][NT-358] Change Payment Method UI #887

Merged
merged 20 commits into from
Oct 16, 2019
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -192,8 +192,8 @@ final class ManagePledgeViewController: UIViewController, MessageBannerViewContr

self.viewModel.outputs.goToChangePaymentMethod
.observeForControllerAction()
.observeValues { [weak self] in
self?.goToChangePaymentMethod()
.observeValues { [weak self] project, reward in
self?.goToChangePaymentMethod(project: project, reward: reward)
}

self.viewModel.outputs.goToContactCreator
Expand Down Expand Up @@ -334,8 +334,12 @@ final class ManagePledgeViewController: UIViewController, MessageBannerViewContr
self.navigationController?.pushViewController(cancelPledgeViewController, animated: true)
}

private func goToChangePaymentMethod() {
// TODO:
private func goToChangePaymentMethod(project: Project, reward: Reward) {
let vc = PledgeViewController.instantiate()
vc.configureWith(project: project, reward: reward, refTag: nil, context: .changePaymentMethod)
vc.delegate = self

self.show(vc, sender: nil)
}

private func goToContactCreator() {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import KsApi
import Library
import Prelude
import Prelude_UIKit
import UIKit

final class PledgeAmountSummaryViewController: UIViewController {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is just copy-pasting the required views from ManagePledgeSummaryView.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As discussed on Zoom, I'll create a follow-up PR to incorporate this as as subview of ManagePledgeSummaryViewController to promote reuse.

// MARK: Properties

private lazy var pledgeAmountLabel: UILabel = { UILabel(frame: .zero) }()
private lazy var pledgeAmountStackView: UIStackView = { UIStackView(frame: .zero) }()
private lazy var pledgeLabel: UILabel = { UILabel(frame: .zero) }()
private lazy var rootStackView: UIStackView = { UIStackView(frame: .zero) }()
private lazy var shippingAmountLabel: UILabel = { UILabel(frame: .zero) }()
private lazy var shippingLocationLabel: UILabel = { UILabel(frame: .zero) }()
private lazy var shippingLocationStackView: UIStackView = { UIStackView(frame: .zero) }()

private let viewModel: PledgeAmountSummaryViewModelType = PledgeAmountSummaryViewModel()

// MARK: Life cycle

public func configureWith(_ project: Project) {
self.viewModel.inputs.configureWith(project)
}

override func viewDidLoad() {
super.viewDidLoad()

self.configureSubviews()
self.bindViewModel()
Copy link
Contributor

Choose a reason for hiding this comment

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

Isn't this happening through our swizzle thingys? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Indeed, thanks.


self.viewModel.inputs.viewDidLoad()
}

// MARK: Styles

override func bindStyles() {
super.bindStyles()

_ = self.pledgeAmountStackView
|> checkoutAdaptableStackViewStyle(
self.traitCollection.preferredContentSizeCategory.isAccessibilityCategory
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we declare local variable and reuse it (since we're using it twice here)?

let isAccessibilityCategory = self.traitCollection.preferredContentSizeCategory.isAccessibilityCategory
...
checkoutAdaptableStackViewStyle(isAccessibilityCategory)

)

_ = self.rootStackView
|> rootStackViewStyle

_ = self.shippingLocationStackView
|> checkoutAdaptableStackViewStyle(
self.traitCollection.preferredContentSizeCategory.isAccessibilityCategory
)

_ = self.pledgeLabel
|> pledgeLabelStyle

_ = self.pledgeAmountLabel
|> amountLabelStyle

_ = self.shippingLocationLabel
|> shippingLocationLabelStyle

_ = self.shippingAmountLabel
|> amountLabelStyle
}

// MARK: View model

override func bindViewModel() {
super.bindViewModel()

self.pledgeAmountLabel.rac.attributedText = self.viewModel.outputs.pledgeAmountText
self.shippingAmountLabel.rac.attributedText = self.viewModel.outputs.shippingAmountText
self.shippingLocationLabel.rac.text = self.viewModel.outputs.shippingLocationText
self.shippingLocationStackView.rac.hidden = self.viewModel.outputs.shippingLocationStackViewIsHidden
}

// MARK: Functions

private func configureSubviews() {
_ = (self.rootStackView, self.view)
|> ksr_addSubviewToParent()
|> ksr_constrainViewToEdgesInParent()

_ = ([self.pledgeLabel, self.pledgeAmountLabel], self.pledgeAmountStackView)
|> ksr_addArrangedSubviewsToStackView()

_ = ([self.shippingLocationLabel, self.shippingAmountLabel], self.shippingLocationStackView)
|> ksr_addArrangedSubviewsToStackView()

_ = ([
self.pledgeAmountStackView,
self.shippingLocationStackView
], self.rootStackView)
|> ksr_addArrangedSubviewsToStackView()
}
}

// MARK: Styles

private let amountLabelStyle: LabelStyle = { label in
label
|> \.adjustsFontForContentSizeCategory .~ true
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we also need to set font? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

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

pledgeAmountLabel uses an attributed string so the font setting isn't necessary here.

|> \.textAlignment .~ NSTextAlignment.right
|> \.isAccessibilityElement .~ true
|> \.minimumScaleFactor .~ 0.75
}

private let pledgeLabelStyle: LabelStyle = { label in
label
|> \.textColor .~ UIColor.ksr_dark_grey_500
|> \.font .~ UIFont.ksr_subhead().bolded
|> \.adjustsFontForContentSizeCategory .~ true
|> \.text %~ { _ in Strings.Pledge() }
}

private let rootStackViewStyle: StackViewStyle = { stackView in
stackView
|> checkoutStackViewStyle
|> \.spacing .~ Styles.grid(3)
}

private let shippingLocationLabelStyle: LabelStyle = { label in
label
|> \.textColor .~ UIColor.ksr_dark_grey_500
|> \.font .~ UIFont.ksr_subhead().bolded
|> \.adjustsFontForContentSizeCategory .~ true
|> \.numberOfLines .~ 0
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ protocol PledgePaymentMethodsViewControllerDelegate: AnyObject {
_ viewController: PledgePaymentMethodsViewController,
didSelectCreditCard paymentSourceId: String
)

func pledgePaymentMethodsViewControllerDidTapPledgeButton(
_ viewController: PledgePaymentMethodsViewController
)
}

final class PledgePaymentMethodsViewController: UIViewController {
Expand All @@ -25,10 +21,8 @@ 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) }()
private lazy var spacer: UIView = { UIView(frame: .zero) }()
private lazy var titleLabel: UILabel = { UILabel(frame: .zero) }()
private let viewModel = PledgePaymentMethodsViewModel()
Expand All @@ -45,18 +39,15 @@ final class PledgePaymentMethodsViewController: UIViewController {
}

private func configureSubviews() {
_ = (self.scrollView, self.scrollViewContainer)
_ = (self.scrollView, self.view)
|> ksr_addSubviewToParent()
|> ksr_constrainViewToEdgesInParent()

_ = (self.cardsStackView, self.scrollView)
|> ksr_addSubviewToParent()
|> ksr_constrainViewToEdgesInParent()

_ = (
[self.applePayButton, self.spacer, self.titleLabel, self.scrollViewContainer, self.pledgeButton],
self.rootStackView
)
_ = ([self.applePayButton, self.spacer, self.titleLabel, self.scrollView], self.rootStackView)
|> ksr_addArrangedSubviewsToStackView()

_ = (self.rootStackView, self.view)
Expand All @@ -68,19 +59,12 @@ final class PledgePaymentMethodsViewController: UIViewController {
action: #selector(PledgePaymentMethodsViewController.applePayButtonTapped),
for: .touchUpInside
)

self.pledgeButton.addTarget(
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is replaced by submitButton in PledgeViewController.

self,
action: #selector(PledgePaymentMethodsViewController.pledgeButtonTapped),
for: .touchUpInside
)
}

private func setupConstraints() {
NSLayoutConstraint.activate([
self.cardsStackView.heightAnchor.constraint(equalTo: self.scrollViewContainer.heightAnchor),
self.applePayButton.heightAnchor.constraint(greaterThanOrEqualToConstant: Styles.minTouchSize.height),
self.pledgeButton.heightAnchor.constraint(greaterThanOrEqualToConstant: Styles.minTouchSize.height)
self.scrollView.heightAnchor.constraint(equalTo: self.cardsStackView.heightAnchor),
self.applePayButton.heightAnchor.constraint(greaterThanOrEqualToConstant: Styles.minTouchSize.height)
])
}

Expand All @@ -97,10 +81,6 @@ final class PledgePaymentMethodsViewController: UIViewController {
_ = self.applePayButton
|> applePayButtonStyle

_ = self.pledgeButton
|> greenButtonStyle
|> UIButton.lens.title(for: .normal) %~ { _ in Strings.Pledge() }

_ = self.scrollView
|> checkoutBackgroundStyle

Expand Down Expand Up @@ -146,14 +126,6 @@ final class PledgePaymentMethodsViewController: UIViewController {
self.delegate?.pledgePaymentMethodsViewController(self, didSelectCreditCard: paymentSourceId)
}

self.viewModel.outputs.notifyDelegatePledgeButtonTapped
.observeForUI()
.observeValues { [weak self] in
guard let self = self else { return }

self.delegate?.pledgePaymentMethodsViewControllerDidTapPledgeButton(self)
}

self.viewModel.outputs.updateSelectedCreditCard
.observeForUI()
.observeValues { [weak self] card in
Expand All @@ -167,7 +139,6 @@ final class PledgePaymentMethodsViewController: UIViewController {
}

self.applePayButton.rac.hidden = self.viewModel.outputs.applePayButtonHidden
self.pledgeButton.rac.enabled = self.viewModel.outputs.pledgeButtonEnabled
}

// MARK: - Configuration
Expand All @@ -182,20 +153,12 @@ final class PledgePaymentMethodsViewController: UIViewController {
self.viewModel.inputs.configureWith(pledgePaymentMethodsValue)
}

// MARK: - Accessors
// MARK: - Actions
Copy link
Contributor

Choose a reason for hiding this comment

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

nice


@objc private func applePayButtonTapped() {
self.viewModel.inputs.applePayButtonTapped()
}

@objc private func pledgeButtonTapped() {
self.viewModel.inputs.pledgeButtonTapped()
}

func updatePledgeButton(_ enabled: Bool) {
self.viewModel.inputs.updatePledgeButtonEnabled(isEnabled: enabled)
}

// MARK: - Functions

private func goToAddNewCard(intent: AddNewCardIntent, project: Project) {
Expand Down
Loading