-
Notifications
You must be signed in to change notification settings - Fork 315
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
Paywalls
: loading indicator for in-progress purchases
#3217
Changes from all commits
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 |
---|---|---|
|
@@ -59,39 +59,29 @@ struct PurchaseButton: View { | |
self.purchaseHandler = purchaseHandler | ||
} | ||
|
||
@Environment(\.userInterfaceIdiom) | ||
var userInterfaceIdiom | ||
|
||
var body: some View { | ||
self.button | ||
} | ||
|
||
private var button: some View { | ||
AsyncButton { | ||
guard !self.purchaseHandler.actionInProgress else { return } | ||
guard !self.package.currentlySubscribed else { return } | ||
|
||
_ = try await self.purchaseHandler.purchase(package: self.package.content) | ||
} label: { | ||
IntroEligibilityStateView( | ||
textWithNoIntroOffer: self.package.localization.callToAction, | ||
textWithIntroOffer: self.package.localization.callToActionWithIntroOffer, | ||
PurchaseButtonLabel( | ||
package: self.package, | ||
colors: self.colors, | ||
introEligibility: self.introEligibility, | ||
foregroundColor: self.colors.callToActionForegroundColor | ||
mode: self.mode | ||
) | ||
.frame( | ||
maxWidth: self.mode.fullWidthButton | ||
? .infinity | ||
: nil | ||
) | ||
.padding() | ||
.padding(.vertical, self.userInterfaceIdiom == .pad ? 10 : 0) | ||
} | ||
.font(self.fonts.font(for: self.mode.buttonFont).weight(.semibold)) | ||
.background(self.backgroundView) | ||
.tint(.clear) | ||
.frame(maxWidth: .infinity) | ||
.dynamicTypeSize(...Constants.maximumDynamicTypeSize) | ||
.disabled(self.package.currentlySubscribed) | ||
} | ||
|
||
@ViewBuilder | ||
|
@@ -116,6 +106,46 @@ struct PurchaseButton: View { | |
|
||
} | ||
|
||
@available(iOS 15.0, macOS 12.0, tvOS 15.0, *) | ||
private struct PurchaseButtonLabel: View { | ||
|
||
let package: TemplateViewConfiguration.Package | ||
let colors: PaywallData.Configuration.Colors | ||
let introEligibility: IntroEligibilityStatus? | ||
let mode: PaywallViewMode | ||
|
||
@Environment(\.userInterfaceIdiom) | ||
private var userInterfaceIdiom | ||
|
||
@Environment(\.isEnabled) | ||
private var isEnabled | ||
|
||
var body: some View { | ||
IntroEligibilityStateView( | ||
textWithNoIntroOffer: self.package.localization.callToAction, | ||
textWithIntroOffer: self.package.localization.callToActionWithIntroOffer, | ||
introEligibility: self.introEligibility, | ||
foregroundColor: self.colors.callToActionForegroundColor | ||
) | ||
.frame( | ||
maxWidth: self.mode.fullWidthButton | ||
? .infinity | ||
: nil | ||
) | ||
.padding() | ||
.padding(.vertical, self.userInterfaceIdiom == .pad ? 10 : 0) | ||
.hidden(if: !self.isEnabled) | ||
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. Always displaying this to keep layout consistent, but hiding it when the button is disabled. |
||
.overlay { | ||
if !self.isEnabled { | ||
ProgressView() | ||
Comment on lines
+139
to
+140
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. Super minor, FFTI: but given that it goes into a loading state when it's not enabled, maybe the flag should be something like 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. But it's coming from the |
||
.progressViewStyle(.circular) | ||
.tint(self.colors.callToActionForegroundColor) | ||
} | ||
} | ||
} | ||
|
||
} | ||
|
||
@available(iOS 15.0, macOS 12.0, tvOS 15.0, *) | ||
private extension PaywallViewMode { | ||
|
||
|
@@ -149,15 +179,20 @@ struct PurchaseButton_Previews: PreviewProvider { | |
@State | ||
private var eligibility: IntroEligibilityStatus? | ||
|
||
@StateObject | ||
private var purchaseHandler = PreviewHelpers.purchaseHandler | ||
|
||
var body: some View { | ||
PurchaseButton( | ||
package: Self.package, | ||
colors: TestData.colors, | ||
fonts: DefaultPaywallFontProvider(), | ||
introEligibility: self.eligibility, | ||
mode: self.mode, | ||
purchaseHandler: PreviewHelpers.purchaseHandler | ||
purchaseHandler: self.purchaseHandler | ||
) | ||
// This is done by PaywallView | ||
.disabled(self.purchaseHandler.actionInProgress) | ||
.task { | ||
self.eligibility = await PreviewHelpers.introEligibilityChecker.eligibility(for: Self.package.content) | ||
} | ||
|
@@ -170,7 +205,7 @@ struct PurchaseButton_Previews: PreviewProvider { | |
context: .init(discountRelativeToMostExpensivePerMonth: nil), | ||
locale: .current | ||
), | ||
currentlySubscribed: Bool.random(), | ||
currentlySubscribed: false, | ||
discountRelativeToMostExpensivePerMonth: nil | ||
) | ||
} | ||
|
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.
Doing this instead of marking the button as
disabled
, which would display a spinner now.