Paywalls: add header image to watchOS paywalls (#3542)

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)

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