-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
Changes from 12 commits
3a5e5bd
fffa982
f933d99
97f4cd8
02f290e
02bebe8
82b6642
a4b8ffd
e70e2e6
5cbf40b
afa9c9a
e2b3afd
1d69e99
c189ebe
5a03263
3a6ae51
4c49d3a
0ed69e0
b46ce84
e1d63dc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 { | ||
// 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() | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Isn't this happening through our swizzle thingys? 🤔 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we also need to set font? 🤔 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|> \.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 |
---|---|---|
|
@@ -12,10 +12,6 @@ protocol PledgePaymentMethodsViewControllerDelegate: AnyObject { | |
_ viewController: PledgePaymentMethodsViewController, | ||
didSelectCreditCard paymentSourceId: String | ||
) | ||
|
||
func pledgePaymentMethodsViewControllerDidTapPledgeButton( | ||
_ viewController: PledgePaymentMethodsViewController | ||
) | ||
} | ||
|
||
final class PledgePaymentMethodsViewController: UIViewController { | ||
|
@@ -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() | ||
|
@@ -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) | ||
|
@@ -68,19 +59,12 @@ final class PledgePaymentMethodsViewController: UIViewController { | |
action: #selector(PledgePaymentMethodsViewController.applePayButtonTapped), | ||
for: .touchUpInside | ||
) | ||
|
||
self.pledgeButton.addTarget( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is replaced by |
||
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) | ||
]) | ||
} | ||
|
||
|
@@ -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 | ||
|
||
|
@@ -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 | ||
|
@@ -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 | ||
|
@@ -182,20 +153,12 @@ final class PledgePaymentMethodsViewController: UIViewController { | |
self.viewModel.inputs.configureWith(pledgePaymentMethodsValue) | ||
} | ||
|
||
// MARK: - Accessors | ||
// MARK: - Actions | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
@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) { | ||
|
There was a problem hiding this comment.
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
.There was a problem hiding this comment.
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.