Paywalls : new PaywallIcon

RevenueCat · Sep 20, 2023 · 6b521bd · 6b521bd
1 parent a794347
commit 6b521bd
Show file tree

Hide file tree

Showing 49 changed files with 625 additions and 0 deletions.
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -113,6 +113,7 @@ compose-window-size = { module = "androidx.compose.material3:material3-window-si
 compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
 
 coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
+coil-svg = { module = "io.coil-kt:coil-svg", version.ref = "coil" }
 
 navigation-compose = "androidx.navigation:navigation-compose:2.5.3"
 

diff --git a/ui/revenuecatui/build.gradle b/ui/revenuecatui/build.gradle
@@ -48,6 +48,7 @@ dependencies {
     implementation libs.androidx.lifecycle.viewmodel
     implementation libs.androidx.lifecycle.viewmodel.compose
     implementation libs.coil.compose
+    implementation libs.coil.svg
     debugImplementation libs.compose.ui.tooling
     debugImplementation libs.androidx.test.compose.manifest
 

diff --git a/...catui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/PaywallIcon.kt b/...catui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/PaywallIcon.kt
@@ -0,0 +1,168 @@
+package com.revenuecat.purchases.ui.revenuecatui.composables
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.revenuecat.purchases.ui.revenuecatui.R
+import kotlin.random.Random
+
+@Composable
+internal fun PaywallIcon(
+    icon: PaywallIconName,
+    modifier: Modifier = Modifier,
+    tintColor: Color
+) {
+    Icon(
+        modifier = Modifier
+            .aspectRatio(1.0f)
+            .fillMaxSize()
+            .then(modifier),
+        painter = painterResource(id = icon.drawable()),
+        contentDescription = null,
+        tint = tintColor,
+    )
+}
+
+/**
+ * An icon that can be displayed inside a RevenueCat paywall.
+ */
+enum class PaywallIconName(val value: String) {
+    ADD("add"),
+    ANDROID("android"),
+    APPLE("apple"),
+    ATTACH_MONEY("attach_money"),
+    ATTACHMENT("attachment"),
+    BAR_CHART("bar_chart"),
+    BOOKMARK("bookmark"),
+    BOOKMARK_NO_FILL("bookmark_no_fill"),
+    CALENDAR_TODAY("calendar_today"),
+    CHAT_BUBBLE("chat_bubble"),
+    CHECK_CIRCLE("check_circle"),
+    CLOSE("close"),
+    COLLAPSE("collapse"),
+    COMPARE("compare"),
+    DOWNLOAD("download"),
+    EDIT("edit"),
+    EMAIL("email"),
+    ERROR("error"),
+    EXPERIMENTS("experiments"),
+    EXTENSION("extension"),
+    FILE_COPY("file_copy"),
+    FILTER_LIST("filter_list"),
+    FOLDER("folder"),
+    GLOBE("globe"),
+    HELP("help"),
+    INSERT_DRIVE_FILE("insert_drive_file"),
+    LAUNCH("launch"),
+    LAYERS("layers"),
+    LINE_CHART("line_chart"),
+    LOCK("lock"),
+    NOTIFICATION("notification"),
+    PERSON("person"),
+    PHONE("phone"),
+    PLAY_CIRCLE("play_circle"),
+    REMOVE_RED_EYE("remove_red_eye"),
+    SEARCH("search"),
+    SHARE("share"),
+    SMARTPHONE("smartphone"),
+    STACKED_BAR("stacked_bar"),
+    STARS("stars"),
+    SUBTRACT("subtract"),
+    TICK("tick"),
+    TRANSFER("transfer"),
+    TWO_WAY_ARROWS("two_way_arrows"),
+    KEY("key"),
+    WARNING("warning");
+
+    companion object {
+        private val valueMap = values().associateBy { it.value }
+
+        fun fromValue(value: String): PaywallIconName? {
+            return valueMap[value]
+        }
+    }
+
+    internal fun drawable(): Int {
+        return when (this) {
+            WARNING -> R.drawable.warning
+            ADD -> R.drawable.add
+            ANDROID -> R.drawable.android
+            APPLE -> R.drawable.apple
+            ATTACH_MONEY -> R.drawable.attach_money
+            ATTACHMENT -> R.drawable.attachment
+            BAR_CHART -> R.drawable.bar_chart
+            BOOKMARK -> R.drawable.bookmark
+            BOOKMARK_NO_FILL -> R.drawable.bookmark_no_fill
+            CALENDAR_TODAY -> R.drawable.calendar_today
+            CHAT_BUBBLE -> R.drawable.chat_bubble
+            CHECK_CIRCLE -> R.drawable.check_circle
+            CLOSE -> R.drawable.close
+            COLLAPSE -> R.drawable.collapse
+            COMPARE -> R.drawable.compare
+            DOWNLOAD -> R.drawable.download
+            EDIT -> R.drawable.edit
+            EMAIL -> R.drawable.email
+            ERROR -> R.drawable.error
+            EXPERIMENTS -> R.drawable.experiments
+            EXTENSION -> R.drawable.extension
+            FILE_COPY -> R.drawable.file_copy
+            FILTER_LIST -> R.drawable.filter_list
+            FOLDER -> R.drawable.folder
+            GLOBE -> R.drawable.globe
+            HELP -> R.drawable.help
+            INSERT_DRIVE_FILE -> R.drawable.insert_drive_file
+            LAUNCH -> R.drawable.launch
+            LAYERS -> R.drawable.layers
+            LINE_CHART -> R.drawable.line_chart
+            LOCK -> R.drawable.lock
+            NOTIFICATION -> R.drawable.notifications
+            PERSON -> R.drawable.person
+            PHONE -> R.drawable.phone
+            PLAY_CIRCLE -> R.drawable.play_circle
+            REMOVE_RED_EYE -> R.drawable.remove_red_eye
+            SEARCH -> R.drawable.search
+            SHARE -> R.drawable.share
+            SMARTPHONE -> R.drawable.smartphone
+            STACKED_BAR -> R.drawable.stacked_bar
+            STARS -> R.drawable.stars
+            SUBTRACT -> R.drawable.subtract
+            TICK -> R.drawable.tick
+            TRANSFER -> R.drawable.transfer
+            TWO_WAY_ARROWS -> R.drawable.two_way_arrows
+            KEY -> R.drawable.vpn_key
+        }
+    }
+}
+
+@Preview(showBackground = true, widthDp = 300)
+@Composable
+internal fun PaywallIconPreview() {
+    val icons = PaywallIconName.values()
+
+    @Suppress("MagicNumber")
+    fun randomColor(): Color {
+        return Color(
+            red = Random.nextInt(0, 256),
+            green = Random.nextInt(0, 256),
+            blue = Random.nextInt(0, 256)
+        )
+    }
+
+    LazyVerticalGrid(columns = GridCells.Adaptive(40.dp)) {
+        items(icons.size) {
+            Box(modifier = Modifier.background(randomColor())) {
+                PaywallIcon(icon = icons[it], tintColor = Color.Black)
+            }
+        }
+    }
+}
diff --git a/ui/revenuecatui/src/main/res/drawable/add.xml b/ui/revenuecatui/src/main/res/drawable/add.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/android.xml b/ui/revenuecatui/src/main/res/drawable/android.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M0,0h24v24h-24z"/>
+    <path
+        android:pathData="M6,18C6,18.55 6.45,19 7,19H8V22.5C8,23.33 8.67,24 9.5,24C10.33,24 11,23.33 11,22.5V19H13V22.5C13,23.33 13.67,24 14.5,24C15.33,24 16,23.33 16,22.5V19H17C17.55,19 18,18.55 18,18V8H6V18ZM3.5,8C2.67,8 2,8.67 2,9.5V16.5C2,17.33 2.67,18 3.5,18C4.33,18 5,17.33 5,16.5V9.5C5,8.67 4.33,8 3.5,8ZM20.5,8C19.67,8 19,8.67 19,9.5V16.5C19,17.33 19.67,18 20.5,18C21.33,18 22,17.33 22,16.5V9.5C22,8.67 21.33,8 20.5,8ZM15.53,2.16L16.83,0.86C17.03,0.66 17.03,0.35 16.83,0.15C16.63,-0.05 16.32,-0.05 16.12,0.15L14.64,1.63C13.85,1.23 12.95,1 12,1C11.04,1 10.14,1.23 9.34,1.63L7.85,0.15C7.65,-0.05 7.34,-0.05 7.14,0.15C6.94,0.35 6.94,0.66 7.14,0.86L8.45,2.17C6.97,3.26 6,5.01 6,7H18C18,5.01 17.03,3.25 15.53,2.16V2.16ZM10,5H9V4H10V5ZM15,5H14V4H15V5Z"
+        android:fillColor="#000000"/>
+  </group>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/apple.xml b/ui/revenuecatui/src/main/res/drawable/apple.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17.359,12.626C17.337,10.097 19.389,8.882 19.482,8.823C18.327,7.104 16.53,6.869 15.889,6.841C14.36,6.683 12.904,7.756 12.129,7.756C11.355,7.756 10.156,6.864 8.889,6.889C7.22,6.914 5.684,7.875 4.825,9.394C3.093,12.45 4.383,16.981 6.069,19.462C6.895,20.675 7.878,22.041 9.17,21.991C10.415,21.941 10.885,21.172 12.388,21.172C13.891,21.172 14.314,21.991 15.63,21.967C16.968,21.941 17.817,20.728 18.636,19.511C19.582,18.103 19.973,16.74 19.996,16.669C19.966,16.656 17.386,15.65 17.359,12.626"
+      android:fillColor="#000000"/>
+  <path
+      android:pathData="M14.887,5.199C15.573,4.354 16.036,3.179 15.908,2.007C14.92,2.048 13.725,2.678 13.016,3.523C12.381,4.27 11.824,5.466 11.974,6.613C13.076,6.7 14.201,6.043 14.887,5.199"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/attach_money.xml b/ui/revenuecatui/src/main/res/drawable/attach_money.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12.58,10.9C10.31,10.31 9.58,9.7 9.58,8.75C9.58,7.66 10.59,6.9 12.28,6.9C14.06,6.9 14.72,7.75 14.78,9H16.99C16.92,7.28 15.87,5.7 13.78,5.19V3H10.78V5.16C8.84,5.58 7.28,6.84 7.28,8.77C7.28,11.08 9.19,12.23 11.98,12.9C14.48,13.5 14.98,14.38 14.98,15.31C14.98,16 14.49,17.1 12.28,17.1C10.22,17.1 9.41,16.18 9.3,15H7.1C7.22,17.19 8.86,18.42 10.78,18.83V21H13.78V18.85C15.73,18.48 17.28,17.35 17.28,15.3C17.28,12.46 14.85,11.49 12.58,10.9Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/attachment.xml b/ui/revenuecatui/src/main/res/drawable/attachment.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M2,12.5C2,9.46 4.46,7 7.5,7H18C20.21,7 22,8.79 22,11C22,13.21 20.21,15 18,15H9.5C8.12,15 7,13.88 7,12.5C7,11.12 8.12,10 9.5,10H17V12H9.41C8.86,12 8.86,13 9.41,13H18C19.1,13 20,12.1 20,11C20,9.9 19.1,9 18,9H7.5C5.57,9 4,10.57 4,12.5C4,14.43 5.57,16 7.5,16H17V18H7.5C4.46,18 2,15.54 2,12.5Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/bar_chart.xml b/ui/revenuecatui/src/main/res/drawable/bar_chart.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M5,9.2H8V19H5V9.2ZM10.6,5H13.4V19H10.6V5ZM16.2,13H19V19H16.2V13Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/bookmark.xml b/ui/revenuecatui/src/main/res/drawable/bookmark.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17,3H7C5.9,3 5.01,3.9 5.01,5L5,21L12,18L19,21V5C19,3.9 18.1,3 17,3Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/bookmark_no_fill.xml b/ui/revenuecatui/src/main/res/drawable/bookmark_no_fill.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17,3H7C5.9,3 5.01,3.9 5.01,5L5,21L12,18L19,21V5C19,3.9 18.1,3 17,3ZM17,18L12,15.82L7,18V5H17V18Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/calendar_today.xml b/ui/revenuecatui/src/main/res/drawable/calendar_today.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M20,3H19V1H17V3H7V1H5V3H4C2.9,3 2,3.9 2,5V21C2,22.1 2.9,23 4,23H20C21.1,23 22,22.1 22,21V5C22,3.9 21.1,3 20,3ZM20,21H4V8H20V21Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/chat_bubble.xml b/ui/revenuecatui/src/main/res/drawable/chat_bubble.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M20,2H4C2.9,2 2,2.9 2,4V22L6,18H20C21.1,18 22,17.1 22,16V4C22,2.9 21.1,2 20,2Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/check_circle.xml b/ui/revenuecatui/src/main/res/drawable/check_circle.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM10,17L5,12L6.41,10.59L10,14.17L17.59,6.58L19,8L10,17Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/close.xml b/ui/revenuecatui/src/main/res/drawable/close.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/collapse.xml b/ui/revenuecatui/src/main/res/drawable/collapse.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M5.227,17.587L10.471,12.376L5.227,7.165L6.841,5.564L13.712,12.376L6.841,19.188L5.227,17.587Z"
+      android:fillColor="#000000"/>
+  <path
+      android:pathData="M12.098,17.587L17.342,12.376L12.098,7.165L13.712,5.564L20.583,12.376L13.712,19.188L12.098,17.587Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/compare.xml b/ui/revenuecatui/src/main/res/drawable/compare.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M10,3H5C3.9,3 3,3.9 3,5V19C3,20.1 3.9,21 5,21H10V23H12V1H10V3ZM10,18H5L10,12V18ZM19,3H14V5H19V18L14,12V21H19C20.1,21 21,20.1 21,19V5C21,3.9 20.1,3 19,3Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/download.xml b/ui/revenuecatui/src/main/res/drawable/download.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M0,0h24v24h-24z"/>
+    <path
+        android:pathData="M6,20C5.45,20 4.979,19.804 4.588,19.413C4.196,19.021 4,18.55 4,18V15H6V18H18V15H20V18C20,18.55 19.804,19.021 19.413,19.413C19.021,19.804 18.55,20 18,20H6ZM12,16L7,11L8.4,9.55L11,12.15V4H13V12.15L15.6,9.55L17,11L12,16Z"
+        android:fillColor="#1C1B1F"/>
+  </group>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/edit.xml b/ui/revenuecatui/src/main/res/drawable/edit.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M3,17.25V21H6.75L17.81,9.94L14.06,6.19L3,17.25ZM20.71,7.04C21.1,6.65 21.1,6.02 20.71,5.63L18.37,3.29C17.98,2.9 17.35,2.9 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04V7.04Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/email.xml b/ui/revenuecatui/src/main/res/drawable/email.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M20,4H4C2.9,4 2.01,4.9 2.01,6L2,18C2,19.1 2.9,20 4,20H20C21.1,20 22,19.1 22,18V6C22,4.9 21.1,4 20,4ZM20,8L12,13L4,8V6L12,11L20,6V8Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/ui/revenuecatui/src/main/res/drawable/error.xml b/ui/revenuecatui/src/main/res/drawable/error.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM13,17H11V15H13V17ZM13,13H11V7H13V13Z"
+      android:fillColor="#000000"/>
+</vector>