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

[MBL-1328] Pledge Button Active/Inactive States #2019

Merged
merged 5 commits into from Apr 3, 2024

Conversation

scottkicks
Copy link
Contributor

@scottkicks scottkicks commented Apr 3, 2024

πŸ“² What

Sets the "Pledge" Button's enabled based on whether a payment method is currently selected and valid

πŸ€” Why

If no payment method has been added or selected, users shouldn't be able to pledge.

πŸ›  How

Following our existing flow, use the project, reward, selected payment source, and pledge context to validate the newly selected payment method

πŸ‘€ See

Trello, screenshots, external resources?

| Before πŸ› | After πŸ¦‹ |
| No Saved Cards | Saved Cards |
| Simulator Screen Recording - iPhone 15 Pro Max - 2024-04-03 at 09 22 34 | Simulator Screen Recording - iPhone 15 Pro Max - 2024-04-03 at 09 23 24 |

βœ… Acceptance criteria

  • Pledge button disabled while payment methods are loading (view did load)
  • Pledge button disabled if no card is selected
  • Pledge button disabled if payment sheet is dismissed without successfully adding a card
  • Pledge button disabled if stripe fails to create a card
  • Pledge button active when a card is selected or added
  • Pledge button completes pledge flow as normal when active
  • Apple Pay unaffected

@scottkicks scottkicks self-assigned this Apr 3, 2024
@scottkicks scottkicks marked this pull request as ready for review April 3, 2024 14:47
@scottkicks
Copy link
Contributor Author

I'm not sure this solves the "double tap" issue that @amy-at-kickstarter found during QA. I couldn't reproduce that before or after this update.

@scottkicks scottkicks requested review from a team, ifosli and amy-at-kickstarter and removed request for a team April 3, 2024 14:47
@kickstarter kickstarter deleted a comment from nativeksr Apr 3, 2024
Copy link
Contributor

@amy-at-kickstarter amy-at-kickstarter left a comment

Choose a reason for hiding this comment

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

I may not be understanding something about the flow here, with regards to editing existing backing - before I approve, can you clarify?

let checkoutId = initialData.map(\.checkoutId)
let baseReward = initialData.map(\.rewards).map(\.first)
let baseReward = initialData.map(\.rewards).map(\.first).skipNil()
Copy link
Contributor

Choose a reason for hiding this comment

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

What is the case where the first reward is nil? I thought we always had at least one reward (i.e. the no-reward award.)

@@ -109,14 +110,40 @@ public class PostCampaignCheckoutViewModel: PostCampaignCheckoutViewModelType,
.map { _ in AppEnvironment.current.currentUser }
.map(isNotNil)

let notChangingPaymentMethod = context.map { context in
context.isUpdating && context != .changePaymentMethod
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you change the payment method on a post-campaign pledge? I thought they were immutable.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ah yes thank you!

.map(paymentMethodValid)
)

let isEnabled = Signal.merge(
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: This could have a more descriptive name like pledgeButtonEnabled.

context: PledgeViewContext
) -> Bool {
guard
let backedPaymentSourceId = project.personalization.backing?.paymentSource?.id,
Copy link
Contributor

Choose a reason for hiding this comment

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

Same question here, I thought these were immutable?

PledgeViewCTAContainerViewData(
isLoggedIn: isLoggedIn,
isEnabled: true, // Pledge button never needs to be disabled on checkout page.
Copy link
Contributor

Choose a reason for hiding this comment

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

Well that's a convenient comment πŸ˜†

context.isUpdating,
userIsBacking(reward: reward, inProject: project)
else {
return true
Copy link
Contributor

Choose a reason for hiding this comment

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

Won't this always return true if you haven't backed this project already?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

oh. yeah I guess that it true. I keep forgetting we won't be updating late pledges

}
.filter(isTrue)

let paymentMethodSelected = self.creditCardSelectedProperty.signal.skipNil()
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: Since this gets passed into the CTA to indicate whether or not it is enabled, does the CTA disable ApplePay as well? Technically we could still run an ApplePay transaction before the payment method is selected (since in that case, you select a card via the ApplePay dialog), but I also don't think that's a big deal.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I set this up so that it doesn't impact apple pay for this reason. Which, is what we want here.

@kickstarter kickstarter deleted a comment from nativeksr Apr 3, 2024
@@ -110,40 +110,23 @@ public class PostCampaignCheckoutViewModel: PostCampaignCheckoutViewModelType,
.map { _ in AppEnvironment.current.currentUser }
.map(isNotNil)

let notChangingPaymentMethod = context.map { context in
Copy link
Contributor

Choose a reason for hiding this comment

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

One thing you could potentially do is throw in an assert like assert(!context.isUpdating) to document that it's unexpected behavior (for now).

Copy link
Contributor

@amy-at-kickstarter amy-at-kickstarter left a comment

Choose a reason for hiding this comment

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

LGTM! Two small nits/suggestions.

paymentMethodChangedAndValid
let pledgeButtonEnabled = Signal.merge(
self.viewDidLoadProperty.signal.mapConst(false),
shouldEnablePledgeButton
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: Is it possible for the credit card information to load before viewDidLoad? Or is the credit card server request itself triggered by viewDidLoad?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes its tied to viewDidLoad so it's not possible πŸ‘

@scottkicks scottkicks merged commit 783902d into main Apr 3, 2024
5 checks passed
@scottkicks scottkicks deleted the feat/scott/late-pledge-cta-fix branch April 3, 2024 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants