From db874477827e95d7b6174d1ea33a39f0d1e28dcb Mon Sep 17 00:00:00 2001 From: NachoSoto Date: Thu, 21 Dec 2023 14:39:07 -0800 Subject: [PATCH] `Paywalls`: add header image to `watchOS` paywalls (#3542) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I demoed the paywall with a header during the Launch Party 🎈 but this wasn't part of the template before. With this change, it becomes an optional element if the paywall has a configured header image: ![Screenshot 2023-12-21 at 11 17 53](https://github.com/RevenueCat/purchases-ios/assets/685609/aa1fdfd3-08f1-43ad-8479-36677d41bfec) --- .../Other platforms/WatchTemplateView.swift | 38 +++++++++++++------ 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/RevenueCatUI/Templates/Other platforms/WatchTemplateView.swift b/RevenueCatUI/Templates/Other platforms/WatchTemplateView.swift index 6ea9d97b5e..c48021a87e 100644 --- a/RevenueCatUI/Templates/Other platforms/WatchTemplateView.swift +++ b/RevenueCatUI/Templates/Other platforms/WatchTemplateView.swift @@ -48,6 +48,13 @@ struct WatchTemplateView: TemplateViewType { var body: some View { ScrollView { VStack(spacing: self.defaultVerticalPaddingLength) { + if let url = self.configuration.headerImageURL { + RemoteImage(url: url, aspectRatio: Self.imageAspectRatio, maxWidth: .infinity) + .clipped() + .roundedCorner(Self.imageRoundedCorner, corners: [.bottomLeft, .bottomRight]) + .padding(.bottom) + } + Group { Text(.init(self.selectedLocalization.title)) .font(self.font(for: .title3)) @@ -57,29 +64,35 @@ struct WatchTemplateView: TemplateViewType { Text(.init(subtitle)) .font(self.font(for: .subheadline)) } - } - if let package = self.configuration.packages.singleIfNotMultiple { - self.offerDetails(package: package, selected: false) - .padding(.top, self.defaultVerticalPaddingLength) - } + if let package = self.configuration.packages.singleIfNotMultiple { + self.offerDetails(package: package, selected: false) + .padding(.top, self.defaultVerticalPaddingLength) + } - self.packages - .padding(.top, self.defaultVerticalPaddingLength) + self.packages + .padding(.top, self.defaultVerticalPaddingLength) - self.button + self.button - FooterView(configuration: self.configuration, - purchaseHandler: self.purchaseHandler) + FooterView(configuration: self.configuration, + purchaseHandler: self.purchaseHandler) + } + .defaultHorizontalPadding() } .foregroundColor(self.configuration.colors.text1Color) .multilineTextAlignment(.center) - .defaultHorizontalPadding() } .animation(Constants.fastAnimation, value: self.selectedPackage) .background { TemplateBackgroundImageView(configuration: self.configuration) } + .edgesIgnoringSafeArea(.horizontal) + .edgesIgnoringSafeArea( + self.configuration.headerImageURL != nil + ? .top + : [] + ) } @ViewBuilder @@ -213,6 +226,9 @@ struct WatchTemplateView: TemplateViewType { return self.selectedPackage.localization } + private static let imageAspectRatio: CGFloat = 1.2 + private static let imageRoundedCorner: CGFloat = 30 + } #if DEBUG