Skip to content

Commit

Permalink
Paywalls: more polish from design feedback (#2932)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NachoSoto
NachoSoto committed Sep 6, 2023
1 parent 43608b6 commit cf5a677
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 56 deletions.
65 changes: 37 additions & 28 deletions RevenueCatUI/Templates/MultiPackageBoldTemplate.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@ struct MultiPackageBoldTemplate: TemplateViewType {
@ViewBuilder
var content: some View {
VStack(spacing: 10) {
self.iconImage

self.scrollableContent
.scrollableIfNecessary()

Expand All @@ -64,6 +62,10 @@ struct MultiPackageBoldTemplate: TemplateViewType {
VStack {
Spacer()

self.iconImage

Spacer()

Text(self.selectedLocalization.title)
.foregroundColor(self.configuration.colors.text1Color)
.font(.largeTitle.bold())
Expand Down Expand Up @@ -98,29 +100,12 @@ struct MultiPackageBoldTemplate: TemplateViewType {
.buttonStyle(PackageButtonStyle(isSelected: isSelected))
}
}
.padding(.bottom)
}

@ViewBuilder
private func packageButton(_ package: TemplateViewConfiguration.Package, selected: Bool) -> some View {
let alignment: Alignment = .leading

VStack(alignment: alignment.horizontal, spacing: 5) {
HStack {
Image(systemName: "checkmark.circle.fill")
.hidden(if: !selected)
.overlay {
if selected {
EmptyView()
} else {
Circle()
.foregroundColor(self.selectedBackgroundColor.opacity(0.5))
}
}

Text(self.localization(for: package.content).offerName ?? package.content.productName)
}
.foregroundColor(self.configuration.colors.accent1Color)
VStack(alignment: Self.packageButtonAlignment.horizontal, spacing: 5) {
self.packageButtonTitle(package, selected: selected)

IntroEligibilityStateView(
textWithNoIntroOffer: package.localization.offerDetails,
Expand All @@ -129,15 +114,15 @@ struct MultiPackageBoldTemplate: TemplateViewType {
foregroundColor: selected
? self.configuration.colors.backgroundColor
: self.configuration.colors.text1Color,
alignment: alignment
alignment: Self.packageButtonAlignment
)
.fixedSize(horizontal: false, vertical: true)
.font(.body)
}
.font(.body.weight(.medium))
.padding()
.multilineTextAlignment(.leading)
.frame(maxWidth: .infinity, alignment: alignment)
.frame(maxWidth: .infinity, alignment: Self.packageButtonAlignment)
.overlay {
if selected {
EmptyView()
Expand All @@ -156,6 +141,31 @@ struct MultiPackageBoldTemplate: TemplateViewType {
}
}

private func packageButtonTitle(
_ package: TemplateViewConfiguration.Package,
selected: Bool
) -> some View {
HStack {
Image(systemName: "checkmark.circle.fill")
.hidden(if: !selected)
.overlay {
if selected {
EmptyView()
} else {
Circle()
.foregroundColor(self.selectedBackgroundColor.opacity(0.5))
}
}

Text(self.localization(for: package.content).offerName ?? package.content.productName)
}
.foregroundColor(
selected
? self.configuration.colors.accent1Color
: self.configuration.colors.text1Color
)
}

private var subscribeButton: some View {
PurchaseButton(
package: self.selectedPackage,
Expand All @@ -177,17 +187,14 @@ struct MultiPackageBoldTemplate: TemplateViewType {
} else {
RemoteImage(url: url)
}
} else {
DebugErrorView("Template configuration is missing background URL",
releaseBehavior: .emptyView)
}
}

@ViewBuilder
private var iconImage: some View {
Group {
if let url = self.configuration.iconImageURL {
RemoteImage(url: url, aspectRatio: 1, maxWidth: Self.iconSize)
RemoteImage(url: url, aspectRatio: 1, maxWidth: self.iconSize)
.clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
} else {
// Placeholder to be able to add a consistent padding
Expand All @@ -206,8 +213,10 @@ struct MultiPackageBoldTemplate: TemplateViewType {

private var selectedBackgroundColor: Color { self.configuration.colors.accent2Color }

private static let iconSize: CGFloat = 100
@ScaledMetric(relativeTo: .largeTitle)
private var iconSize: CGFloat = 140
private static let cornerRadius: CGFloat = 15
private static let packageButtonAlignment: Alignment = .leading

}

Expand Down
66 changes: 38 additions & 28 deletions RevenueCatUI/Templates/OnePackageStandardTemplate.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,33 +19,11 @@ struct OnePackageStandardTemplate: TemplateViewType {

var body: some View {
VStack(spacing: self.configuration.mode.verticalSpacing) {
VStack(spacing: self.configuration.mode.verticalSpacing) {
self.headerImage

Group {
Text(verbatim: self.localization.title)
.font(self.configuration.mode.titleFont)
.fontWeight(.heavy)
.padding(
self.configuration.mode.displaySubtitle
? .bottom
: []
)

if self.configuration.mode.displaySubtitle, let subtitle = self.localization.subtitle {
Text(verbatim: subtitle)
.font(self.configuration.mode.subtitleFont)
}
}
.padding(.horizontal)
}
.foregroundColor(self.configuration.colors.text1Color)
.multilineTextAlignment(.center)
.scrollable(if: self.configuration.mode.isFullScreen)
.scrollContentBackground(.hidden)
.scrollBounceBehaviorBasedOnSize()
.scrollIndicators(.automatic)
.edgesIgnoringSafeArea(self.configuration.mode.isFullScreen ? .top : [])
self.scrollableContent
.scrollableIfNecessary()
.scrollContentBackground(.hidden)
.scrollBounceBehaviorBasedOnSize()
.scrollIndicators(.automatic)

if case .fullScreen = self.configuration.mode {
Spacer()
Expand All @@ -58,6 +36,7 @@ struct OnePackageStandardTemplate: TemplateViewType {
foregroundColor: self.configuration.colors.text1Color
)
.font(self.configuration.mode.offerDetailsFont)
.multilineTextAlignment(.center)

self.button
.padding(.horizontal)
Expand All @@ -70,6 +49,37 @@ struct OnePackageStandardTemplate: TemplateViewType {
}
}

@ViewBuilder
private var scrollableContent: some View {
VStack(spacing: self.configuration.mode.verticalSpacing) {
self.headerImage

Spacer()

Group {
Text(verbatim: self.localization.title)
.font(self.configuration.mode.titleFont)
.fontWeight(.heavy)
.padding(
self.configuration.mode.displaySubtitle
? .bottom
: []
)

if self.configuration.mode.displaySubtitle, let subtitle = self.localization.subtitle {
Text(verbatim: subtitle)
.font(self.configuration.mode.subtitleFont)
}
}
.padding(.horizontal, 20)

Spacer()
}
.foregroundColor(self.configuration.colors.text1Color)
.multilineTextAlignment(.center)
.edgesIgnoringSafeArea(self.configuration.mode.isFullScreen ? .top : [])
}

@ViewBuilder
private var asyncImage: some View {
if let headerImage = self.configuration.headerImageURL {
Expand All @@ -86,7 +96,7 @@ struct OnePackageStandardTemplate: TemplateViewType {
self.asyncImage
.clipShape(
Circle()
.offset(y: -140)
.offset(y: -120)
.scale(3.0)
)
.padding(.bottom)
Expand Down
3 changes: 3 additions & 0 deletions RevenueCatUI/Views/PurchaseButton.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,11 @@ struct PurchaseButton: View {
.controlSize(self.mode.buttonSize)
.buttonStyle(.borderedProminent)
.frame(maxWidth: .infinity)
.dynamicTypeSize(...Self.maximumDynamicTypeSize)
}

private static let maximumDynamicTypeSize: DynamicTypeSize = .accessibility3

}

@available(iOS 16.0, macOS 13.0, tvOS 16.0, *)
Expand Down

0 comments on commit cf5a677

Please sign in to comment.