[NT-303] Pledge Button #847

ifbarrera · 2019-09-19T22:31:20Z

📲 What

Adds a Pledge button below the list of stored payment methods. This button is initially disabled until the user selects a credit card. Once a card is selected, the button becomes enabled.

🤔 Why

To allow users to pledge, and to simplify the pledging experience.

🛠 How

Some things to keep in mind:

right now the experience is a bit jarring because the credit cards load in dynamically. This will be fixed with a loading state for the stored cards in a subsequent PR.
right now the pledge button is initially disabled until a card is selected. A future PR will address this and automatically select the first card in the list.
right now tapping Select on any of the cards will enable the Pledge button even though the card's selected state doesn't change. This is because toggling the card view's selected state is currently being worked on separately as part of another ticket

👀 See

♿️ Accessibility

Tap targets use minimum of 44x44 pts dimensions
Works with VoiceOver
Supports Dynamic Type

✅ Acceptance criteria

Signed in, with the Native Pledge Screen feature flag turned ON, navigate to any project and select any reward. Scroll down and you should see the Pledge button below the list of stored cards, and it should be disabled. Tap Select on any of the stored cards - the Pledge button should become enabled.

ifbarrera · 2019-09-19T22:35:30Z

Kickstarter-iOS/Views/Controllers/PledgePaymentMethodsViewController.swift


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

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


The real "brains" of the pledge button enabled state is actually the PledgeViewModel. This is because we expect the pledge button's enabled state to be driven by a variety of factors: whether the reward minimum is met, whether a shipping location has been selected, etc. Since the PledgeViewModel is the only source of truth for this information, it needs to be the one to drive the pledge button's enabled state.

ifbarrera · 2019-09-19T22:38:38Z

Library/ViewModels/PledgePaymentMethodsViewModel.swift

@@ -53,6 +62,9 @@ public final class PledgePaymentMethodsViewModel: PledgePaymentMethodsViewModelT
    self.notifyDelegateLoadPaymentMethodsError = storedCardsEvent
      .errors()
      .map { $0.localizedDescription }
+
+    self.notifyDelegateCreditCardSelected = self.creditCardSelectedSignal


Right now this is very simple - has a credit card been selected? An upcoming PR will add the rest of the requirements for the pledge button being enabled: reward minimum is met, shipping rule selected, etc.

justinswart

Cool cool, I think important to just note that there is payment method selection stuff being done in this PR and in #835, so we would want to align on that.

Also, the spacing here seems quite tight?

And a final thought - should this button be in PledgePaymentMethodsViewController or PledgeViewController as its own nested VC? 🤔 😱

justinswart · 2019-09-20T21:39:56Z

Kickstarter-iOS/Views/Cells/PledgeCreditCardView.swift

@@ -3,18 +3,25 @@ import Library
 import Prelude
 import UIKit

+protocol PledgeCreditCardViewDelegate: AnyObject {
+  func pledgeCreditCardViewSelected(


This might overlap with some of the work happening in #835.

justinswart · 2019-09-20T21:40:50Z

Kickstarter-iOS/Views/Cells/PledgeCreditCardView.swift

  private let expirationDateLabel: UILabel = { UILabel(frame: .zero) }()
  private let imageView: UIImageView = { UIImageView(frame: .zero) }()
  private let labelsStackView: UIStackView = { UIStackView(frame: .zero) }()
  private let lastFourLabel: UILabel = { UILabel(frame: .zero) }()
  private let rootStackView: UIStackView = { UIStackView(frame: .zero) }()
  private let selectButton: UIButton = { UIButton(type: .custom) }()
+  private let viewModel: CreditCardCellViewModelType = CreditCardCellViewModel()


I mentioned in #835 that we should probably rename this 😬

Yeah I agree - I really don't think we should have used the same view model as the one in the Settings screen at all though :\

Oh I had no idea it was being used in both places.

Kickstarter-iOS/Views/Controllers/PledgePaymentMethodsViewController.swift

ifbarrera · 2019-09-23T14:35:19Z

Cool cool, I think important to just note that there is payment method selection stuff being done in this PR and in #835, so we would want to align on that.

Also, the spacing here seems quite tight?

And a final thought - should this button be in PledgePaymentMethodsViewController or PledgeViewController as its own nested VC? 🤔 😱

the spacing is consistent with the spacing set on the root stack view. In this context I think it's ok because from the "information architecture" perspective, the "Pledge" button belongs in the same group as the credit cards and the Other payment methods label. Happy to double check with a designer though
I guess it could be it's own nested VC, but since all of the business logic around the pledge button's state is happening in the PledgeViewModel, it didn't seem necessary to create a new VC for such a simple view with no business logic of it's own. In the future if we wanted to reuse the Pledge button I could see a case for extracting it into it's own VC/VM pair, but at this stage it didn't seem necessary. Additionally, the visual positioning of the button needs to be part of the Other payment methods "group", and I felt that the easiest way to accomplish that would be to have them be part of the same root stack view.

…pledge-button

justinswart

nice!

ifbarrera added 4 commits September 19, 2019 14:36

Add Pledge button

24e38bf

Hook up the pledge button with selecting credit card

2b61c20

View model tests

519c140

Formatting

05e1bbf

ifbarrera commented Sep 19, 2019

View reviewed changes

Improved output naming

1961fbb

ifbarrera assigned justinswart Sep 19, 2019

ifbarrera added the needs review label Sep 19, 2019

ifbarrera marked this pull request as ready for review September 19, 2019 22:44

justinswart suggested changes Sep 20, 2019

View reviewed changes

justinswart mentioned this pull request Sep 20, 2019

[ 💳 Native Checkout ] Refresh Card List #835

Merged

5 tasks

ifbarrera added 2 commits September 23, 2019 10:40

Updating button type

36d102d

Merge branch 'master' of https://github.com/kickstarter/ios-oss into …

4fdecfd

…pledge-button

justinswart approved these changes Sep 23, 2019

View reviewed changes

Merge branch 'master' into pledge-button

86db0fd

ifbarrera merged commit 675b868 into master Sep 23, 2019

ifbarrera deleted the pledge-button branch September 23, 2019 17:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NT-303] Pledge Button #847

[NT-303] Pledge Button #847

ifbarrera commented Sep 19, 2019 •

edited by justinswart

Loading

ifbarrera Sep 19, 2019

ifbarrera Sep 19, 2019

justinswart left a comment

justinswart Sep 20, 2019

justinswart Sep 20, 2019

ifbarrera Sep 23, 2019

justinswart Sep 23, 2019

ifbarrera commented Sep 23, 2019

justinswart left a comment

[NT-303] Pledge Button #847

[NT-303] Pledge Button #847

Conversation

ifbarrera commented Sep 19, 2019 • edited by justinswart Loading

📲 What

🤔 Why

🛠 How

👀 See

♿️ Accessibility

✅ Acceptance criteria

ifbarrera Sep 19, 2019

Choose a reason for hiding this comment

ifbarrera Sep 19, 2019

Choose a reason for hiding this comment

justinswart left a comment

Choose a reason for hiding this comment

justinswart Sep 20, 2019

Choose a reason for hiding this comment

justinswart Sep 20, 2019

Choose a reason for hiding this comment

ifbarrera Sep 23, 2019

Choose a reason for hiding this comment

justinswart Sep 23, 2019

Choose a reason for hiding this comment

ifbarrera commented Sep 23, 2019

justinswart left a comment

Choose a reason for hiding this comment

ifbarrera commented Sep 19, 2019 •

edited by justinswart

Loading