[Paywalls V2] Implements color aliases for backgrounds

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/LoadedPaywallComponents.kt

@@ -45,7 +45,7 @@ import com.revenuecat.purchases.paywalls.components.properties.SizeConstraint.Fi
 import com.revenuecat.purchases.paywalls.components.properties.TwoDimensionalAlignment
 import com.revenuecat.purchases.paywalls.components.properties.TwoDimensionalAlignment.BOTTOM
 import com.revenuecat.purchases.ui.revenuecatui.components.modifier.background
-import com.revenuecat.purchases.ui.revenuecatui.components.properties.toBackgroundStyle
+import com.revenuecat.purchases.ui.revenuecatui.components.properties.rememberBackgroundStyle
 import com.revenuecat.purchases.ui.revenuecatui.data.PaywallState
 import com.revenuecat.purchases.ui.revenuecatui.helpers.getOrThrow
 import com.revenuecat.purchases.ui.revenuecatui.helpers.toComponentsPaywallState
@@ -63,7 +63,7 @@ internal fun LoadedPaywallComponents(
 
     val style = state.stack
     val footerComponentStyle = state.stickyFooter
-    val background = state.background.toBackgroundStyle()
+    val background = rememberBackgroundStyle(state.background)
 
     Column(modifier = modifier.background(background)) {
         ComponentView(

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/properties/BackgroundStyle.kt

@@ -3,20 +3,30 @@ package com.revenuecat.purchases.ui.revenuecatui.components.properties
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImagePainter
 import coil.compose.rememberAsyncImagePainter
+import com.revenuecat.purchases.ColorAlias
 import com.revenuecat.purchases.paywalls.components.common.Background
 import com.revenuecat.purchases.paywalls.components.properties.ColorInfo
 import com.revenuecat.purchases.paywalls.components.properties.ColorScheme
+import com.revenuecat.purchases.paywalls.components.properties.ImageUrls
+import com.revenuecat.purchases.paywalls.components.properties.ThemeImageUrls
 import com.revenuecat.purchases.ui.revenuecatui.components.ktx.toContentScale
 import com.revenuecat.purchases.ui.revenuecatui.components.ktx.urlsForCurrentTheme
 import com.revenuecat.purchases.ui.revenuecatui.components.modifier.background
+import com.revenuecat.purchases.ui.revenuecatui.errors.PaywallValidationError
+import com.revenuecat.purchases.ui.revenuecatui.helpers.NonEmptyList
+import com.revenuecat.purchases.ui.revenuecatui.helpers.Result
+import com.revenuecat.purchases.ui.revenuecatui.helpers.map
+import com.revenuecat.purchases.ui.revenuecatui.helpers.orSuccessfullyNull
 
 /**
  * Ready to use background properties for the current theme.
@@ -32,6 +42,67 @@ internal sealed interface BackgroundStyle {
     ) : BackgroundStyle
 }
 
+/**
+ * Background properties with resolved colors.
+ */
+internal sealed interface BackgroundStyles {
+    @JvmInline
+    value class Color(@get:JvmSynthetic val color: ColorStyles) : BackgroundStyles
+
+    data class Image(
+        @get:JvmSynthetic val sources: ThemeImageUrls,
+        @get:JvmSynthetic val contentScale: ContentScale,
+        @get:JvmSynthetic val colorOverlay: ColorStyles?,
+    ) : BackgroundStyles
+}
+
+@JvmSynthetic
+internal fun Background.toBackgroundStyles(
+    aliases: Map<ColorAlias, ColorScheme>,
+): Result<BackgroundStyles, NonEmptyList<PaywallValidationError>> =
+    when (this) {
+        is Background.Color ->
+            value
+                .toColorStyles(aliases = aliases)
+                .map { color -> BackgroundStyles.Color(color) }
+
+        is Background.Image ->
+            colorOverlay
+                ?.toColorStyles(aliases = aliases)
+                .orSuccessfullyNull()
+                .map { colorOverlay ->
+                    BackgroundStyles.Image(
+                        sources = value,
+                        contentScale = fitMode.toContentScale(),
+                        colorOverlay = colorOverlay,
+                    )
+                }
+    }
+
+@Composable
+@JvmSynthetic
+internal fun rememberBackgroundStyle(background: BackgroundStyles): BackgroundStyle =
+    when (background) {
+        is BackgroundStyles.Color -> {
+            val color = background.color.forCurrentTheme
+            remember(background, color) {
+                BackgroundStyle.Color(color = color)
+            }
+        }
+        is BackgroundStyles.Image -> {
+            val colorOverlay = background.colorOverlay?.forCurrentTheme
+            val source = background.sources.urlsForCurrentTheme
+            val painter = rememberAsyncImagePainter(source, background.contentScale)
+            remember(colorOverlay, source, painter) {
+                BackgroundStyle.Image(
+                    painter = painter,
+                    contentScale = background.contentScale,
+                    colorOverlay = colorOverlay,
+                )
+            }
+        }
+    }
+
 @JvmSynthetic
 @Composable
 internal fun Background.toBackgroundStyle(): BackgroundStyle =
@@ -59,6 +130,21 @@ internal fun Background.toBackgroundStyle(): BackgroundStyle =
         }
     }
 
+@Composable
+private fun rememberAsyncImagePainter(imageUrls: ImageUrls, contentScale: ContentScale): AsyncImagePainter =
+    rememberAsyncImagePainter(
+        model = imageUrls.webp.toString(),
+        placeholder = rememberAsyncImagePainter(
+            model = imageUrls.webpLowRes.toString(),
+            error = null,
+            fallback = null,
+            contentScale = contentScale,
+        ),
+        error = null,
+        fallback = null,
+        contentScale = contentScale,
+    )
+
 @Preview
 @Composable
 private fun Background_Preview_ColorHex() {

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/data/PaywallState.kt

@@ -11,10 +11,10 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.text.intl.LocaleList
 import com.revenuecat.purchases.Offering
 import com.revenuecat.purchases.Package
-import com.revenuecat.purchases.paywalls.components.common.Background
 import com.revenuecat.purchases.paywalls.components.common.LocaleId
 import com.revenuecat.purchases.ui.revenuecatui.components.ktx.toComposeLocale
 import com.revenuecat.purchases.ui.revenuecatui.components.ktx.toLocaleId
+import com.revenuecat.purchases.ui.revenuecatui.components.properties.BackgroundStyles
 import com.revenuecat.purchases.ui.revenuecatui.components.style.ComponentStyle
 import com.revenuecat.purchases.ui.revenuecatui.data.processed.ProcessedLocalizedConfiguration
 import com.revenuecat.purchases.ui.revenuecatui.data.processed.TemplateConfiguration
@@ -66,7 +66,7 @@ internal sealed interface PaywallState {
         class Components(
             val stack: ComponentStyle,
             val stickyFooter: ComponentStyle?,
-            val background: Background,
+            val background: BackgroundStyles,
             /**
              * Some currencies do not commonly use decimals when displaying prices. Set this to false to accommodate
              * for that.

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/OfferingToStateMapper.kt

@@ -9,6 +9,7 @@ import com.revenuecat.purchases.paywalls.components.common.LocalizationData
 import com.revenuecat.purchases.paywalls.components.common.LocalizationKey
 import com.revenuecat.purchases.paywalls.components.common.PaywallComponentsData
 import com.revenuecat.purchases.ui.revenuecatui.PaywallMode
+import com.revenuecat.purchases.ui.revenuecatui.components.properties.toBackgroundStyles
 import com.revenuecat.purchases.ui.revenuecatui.components.style.StyleFactory
 import com.revenuecat.purchases.ui.revenuecatui.composables.PaywallIconName
 import com.revenuecat.purchases.ui.revenuecatui.data.PaywallState
@@ -116,15 +117,16 @@ internal fun Offering.validatePaywallComponentsDataOrNull(): RcResult<PaywallVal
     )
     val config = paywallComponents.data.componentsConfig.base
 
-    // Combine the main stack with the stickyFooter, or accumulate the encountered errors.
+    // Combine the main stack with the stickyFooter and the background, or accumulate the encountered errors.
     return zipOrAccumulate(
-        styleFactory.create(config.stack),
-        config.stickyFooter?.let { styleFactory.create(it) }.orSuccessfullyNull(),
-    ) { stack, stickyFooter ->
+        first = styleFactory.create(config.stack),
+        second = config.stickyFooter?.let { styleFactory.create(it) }.orSuccessfullyNull(),
+        third = config.background.toBackgroundStyles(aliases = paywallComponents.uiConfig.app.colors),
+    ) { stack, stickyFooter, background ->
         PaywallValidationResult.Components(
             stack = stack,
             stickyFooter = stickyFooter,
-            background = config.background,
+            background = background,
             locales = localizations.keys,
             zeroDecimalPlaceCountries = paywallComponents.data.zeroDecimalPlaceCountries.toSet(),
         )

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/PaywallValidationResult.kt

@@ -1,8 +1,8 @@
 package com.revenuecat.purchases.ui.revenuecatui.helpers
 
 import com.revenuecat.purchases.paywalls.PaywallData
-import com.revenuecat.purchases.paywalls.components.common.Background
 import com.revenuecat.purchases.paywalls.components.common.LocaleId
+import com.revenuecat.purchases.ui.revenuecatui.components.properties.BackgroundStyles
 import com.revenuecat.purchases.ui.revenuecatui.components.style.ComponentStyle
 import com.revenuecat.purchases.ui.revenuecatui.data.processed.PaywallTemplate
 import com.revenuecat.purchases.ui.revenuecatui.errors.PaywallValidationError
@@ -29,7 +29,7 @@ internal sealed interface PaywallValidationResult {
     data class Components(
         val stack: ComponentStyle,
         val stickyFooter: ComponentStyle?,
-        val background: Background,
+        val background: BackgroundStyles,
         /**
          * All locales that this paywall supports, with `locales.head` being the default one.
          */