From 9ea87f93e7bd1175705b447f0f6d9b87c4ece967 Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@habitica.com>
Date: Thu, 28 Jul 2022 11:54:47 +0200
Subject: [PATCH] Redeigned insufficient gem screen

---
 .../res/drawable/not_enough_gems_wave.xml     |  10 ++
 .../res/layout/dialog_insufficient_gems.xml   | 114 +++++++++++++-----
 Habitica/res/values/strings.xml               |   2 +
 Habitica/res/values/styles.xml                |   5 +
 .../ui/views/dialogs/HabiticaAlertDialog.kt   |  10 +-
 .../InsufficientGemsDialog.kt                 |  72 +++++------
 6 files changed, 137 insertions(+), 76 deletions(-)
 create mode 100644 Habitica/res/drawable/not_enough_gems_wave.xml

diff --git a/Habitica/res/drawable/not_enough_gems_wave.xml b/Habitica/res/drawable/not_enough_gems_wave.xml
new file mode 100644
index 000000000..37b36c8c1
--- /dev/null
+++ b/Habitica/res/drawable/not_enough_gems_wave.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="342dp"
+    android:height="16dp"
+    android:viewportWidth="342"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M0,15v-3l0.7,-0.34 1.05,-0.49 0.95,-0.43 0.84,-0.36 1.27,-0.54 1.07,-0.44 1.57,-0.63 1.28,-0.5 1.37,-0.51 0.96,-0.35 0.99,-0.35 1.03,-0.36 1.06,-0.36L15.25,6l1.7,-0.54 1.17,-0.36 1.2,-0.35 0.61,-0.18 1.24,-0.35 0.63,-0.17 1.28,-0.34c0.43,-0.11 0.87,-0.22 1.3,-0.33l1.33,-0.32a124.57,124.57 0,0 1,4.81 -1.05l1.42,-0.27C37.64,0.69 43.76,0 50,0c4.42,0 9.12,0.33 14.19,0.89l1.8,0.2 1.84,0.22 0.93,0.12 1.88,0.25 1.92,0.26 1.95,0.27 1.99,0.29 3.05,0.45 5.26,0.8 6.63,1.02 4.63,0.7 3.58,0.53 2.44,0.35 2.49,0.35 2.53,0.35 2.58,0.35 1.31,0.17 2.65,0.34c0.89,0.11 1.79,0.22 2.7,0.33l2.74,0.33 2.09,0.24 2.12,0.23 2.15,0.23 1.09,0.11 2.19,0.22 2.22,0.21 2.25,0.21 2.28,0.2 2.31,0.19c0.39,0.03 0.78,0.06 1.17,0.09l2.36,0.18 2.39,0.17 1.21,0.08 2.44,0.15 2.47,0.14 1.25,0.07 2.52,0.13 2.55,0.12c0.43,0.02 0.86,0.04 1.29,0.05l2.6,0.1 2.63,0.09 1.33,0.04 2.69,0.07c1.8,0.04 3.63,0.07 5.48,0.09l2.03,0.02h7.81c12.46,-0.09 24.81,-0.58 36.7,-1.3l3.39,-0.21 1.68,-0.11 3.35,-0.23 3.32,-0.24 1.65,-0.12 3.27,-0.25 4.04,-0.33 5.57,-0.48 3.13,-0.28 4.62,-0.43 4.52,-0.44 2.96,-0.29 4.35,-0.44 4.24,-0.44 5.46,-0.58 17.28,-1.87 3.29,-0.35 3.13,-0.32 2,-0.2 1.92,-0.19 1.84,-0.17 1.77,-0.16 2.09,-0.17 1.97,-0.14 1.48,-0.09c0.64,-0.04 1.25,-0.07 1.84,-0.1l1.14,-0.04 1.07,-0.03A57.3,57.3 0,0 1,316 2c7.31,0 12.87,1.52 16.94,3.38l0.61,0.29 0.59,0.29c0.19,0.1 0.38,0.2 0.57,0.29l0.54,0.3 0.52,0.3 0.5,0.3 0.71,0.45 0.44,0.3 0.42,0.29 0.4,0.29 0.38,0.28 0.53,0.42 0.33,0.27 0.3,0.26 0.28,0.25 0.26,0.24 0.24,0.23 0.33,0.32 0.37,0.38 0.29,0.32 0.33,0.39 0.11,0.14v3.68L174.15,15H0z"
+      android:fillColor="@color/content_background"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/Habitica/res/layout/dialog_insufficient_gems.xml b/Habitica/res/layout/dialog_insufficient_gems.xml
index 5672879bc..645a01f8d 100644
--- a/Habitica/res/layout/dialog_insufficient_gems.xml
+++ b/Habitica/res/layout/dialog_insufficient_gems.xml
@@ -5,43 +5,99 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical">
-    <ImageView
-        android:id="@+id/imageView"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_margin="12dp"
-        android:scaleType="center" />
-    <TextView
-        android:id="@+id/textView"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:gravity="center_horizontal" />
     <LinearLayout
         android:id="@+id/purchase_wrapper"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@drawable/layout_rounded_bg_brand_700"
-        android:layout_marginTop="@dimen/spacing_medium"
-        android:padding="@dimen/spacing_medium"
-        android:gravity="center">
+        android:background="@color/brand_400"
+        android:gravity="center"
+        android:orientation="vertical">
+        <TextView
+            android:id="@+id/textView"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            style="@style/Title1"
+            android:textColor="@color/white"
+            android:gravity="center_horizontal"
+            android:text="@string/mor_gems_title"
+            android:layout_margin="26dp" />
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="26dp"
+            android:layout_marginBottom="26dp">
         <ImageView
+            android:id="@+id/imageView"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:src="@drawable/gems_4" />
-        <TextView
-            android:id="@+id/purchase_textview"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_weight="1"
-            style="@style/SubHeader1"
-            tools:text="4 Gems"
-            android:gravity="center"/>
-        <Button
-            android:id="@+id/purchase_button"
+        <LinearLayout
             android:layout_width="wrap_content"
-            android:layout_height="30dp"
-            style="@style/HabiticaButton.Purple"
-            android:minWidth="40dp"
-            tools:text="$0.99" />
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:gravity="center"
+            android:layout_marginStart="26dp">
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="4dp"
+                android:gravity="center">
+                <TextView
+                    android:id="@+id/purchase_textview"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    style="@style/SubHeader1"
+                    tools:text="4"
+                    android:textColor="@color/white"
+                    android:layout_marginEnd="4dp"
+                    android:textAllCaps="true"/>
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    style="@style/Subheader2"
+                    android:text="@string/gems"
+                    android:gravity="center"
+                    android:textColor="@color/white"
+                    android:textAllCaps="true"/>
+            </LinearLayout>
+            <FrameLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content">
+            <ProgressBar
+                android:id="@+id/loading_indicator"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:indeterminate="true"
+                android:indeterminateBehavior="cycle"
+                android:indeterminateTint="@color/white"
+                android:layout_gravity="center"/>
+            <Button
+                android:id="@+id/purchase_button"
+                android:layout_width="129dp"
+                android:layout_height="44dp"
+                style="@style/HabiticaButton.White.Small"
+                tools:text="$0.99"
+                android:visibility="invisible"/>
+            </FrameLayout>
+        </LinearLayout>
+        </LinearLayout>
+        <ImageView
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:src="@drawable/not_enough_gems_wave"
+            android:scaleType="centerCrop"
+            android:layout_marginBottom="-1dp"
+            />
     </LinearLayout>
+    <TextView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:textColor="@color/text_ternary"
+        android:lineSpacingExtra="6sp"
+        android:textSize="16sp"
+        android:gravity="center_horizontal"
+        android:text="@string/gems_support"
+        android:layout_marginHorizontal="40dp"
+        android:layout_marginTop="16dp"
+        />
 </LinearLayout>
\ No newline at end of file
diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
index b1abb3e7b..1f5ee2e56 100644
--- a/Habitica/res/values/strings.xml
+++ b/Habitica/res/values/strings.xml
@@ -1234,4 +1234,6 @@
     <string name="unable_to_delete">Unable to delete</string>
     <string name="delete_account_subscription_active">You can\'t delete your account while you have an active subscription. Please cancel the subscription first.</string>
     <string name="go_to_subscription">Go to subscription</string>
+    <string name="mor_gems_title">You’ll need more Gems to buy this!</string>
+    <string name="gems_support">Purchasing Gems supports our small team at Habitica</string>
 </resources>
diff --git a/Habitica/res/values/styles.xml b/Habitica/res/values/styles.xml
index 7996a2753..d0765d772 100644
--- a/Habitica/res/values/styles.xml
+++ b/Habitica/res/values/styles.xml
@@ -723,6 +723,11 @@
         <item name="android:textColor">@color/brand_400</item>
     </style>
 
+    <style name="HabiticaButton.White.Small" parent="HabiticaButton.Small">
+        <item name="android:backgroundTint">@color/white</item>
+        <item name="android:textColor">@color/brand_400</item>
+    </style>
+
     <style name="CurrencyTextView">
         <item name="android:textSize">12sp</item>
         <item name="android:layout_marginLeft">4dp</item>
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/dialogs/HabiticaAlertDialog.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/dialogs/HabiticaAlertDialog.kt
index 78e1b71d7..baadc93b7 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/dialogs/HabiticaAlertDialog.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/dialogs/HabiticaAlertDialog.kt
@@ -19,16 +19,16 @@ import androidx.core.content.ContextCompat
 import androidx.core.view.children
 import androidx.lifecycle.lifecycleScope
 import com.habitrpg.android.habitica.R
-import com.habitrpg.common.habitica.extensions.dpToPx
 import com.habitrpg.android.habitica.extensions.inflate
-import com.habitrpg.common.habitica.extensions.layoutInflater
 import com.habitrpg.android.habitica.ui.activities.BaseActivity
 import com.habitrpg.android.habitica.ui.views.login.LockableScrollView
+import com.habitrpg.common.habitica.extensions.dpToPx
+import com.habitrpg.common.habitica.extensions.layoutInflater
 import com.plattysoft.leonids.ParticleSystem
-import java.lang.ref.WeakReference
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import java.lang.ref.WeakReference
 
 open class HabiticaAlertDialog(context: Context) : AlertDialog(context, R.style.HabiticaAlertDialogTheme) {
 
@@ -40,7 +40,7 @@ open class HabiticaAlertDialog(context: Context) : AlertDialog(context, R.style.
     var isCelebratory: Boolean = false
     private val view: RelativeLayout = LayoutInflater.from(context).inflate(R.layout.dialog_habitica_base, null) as RelativeLayout
     private val dialogWrapper: LinearLayout
-    private val dialogContainer: LinearLayout
+    internal val dialogContainer: LinearLayout
     private var titleTextView: TextView
     private var messageTextView: TextView
     internal var contentView: ViewGroup
@@ -246,7 +246,7 @@ open class HabiticaAlertDialog(context: Context) : AlertDialog(context, R.style.
             params
         } else {
             LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, 48.dpToPx(context))
-        }
+        }   
         buttonView.layoutParams = layoutParams
         buttonView.elevation = 10f
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/insufficientCurrency/InsufficientGemsDialog.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/insufficientCurrency/InsufficientGemsDialog.kt
index 5ecb61bfa..26597f250 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/insufficientCurrency/InsufficientGemsDialog.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/insufficientCurrency/InsufficientGemsDialog.kt
@@ -2,11 +2,11 @@ package com.habitrpg.android.habitica.ui.views.insufficientCurrency
 
 import android.content.Context
 import android.os.Bundle
-import android.view.View
 import android.widget.Button
-import android.widget.LinearLayout
+import android.widget.ProgressBar
 import android.widget.TextView
 import androidx.core.os.bundleOf
+import androidx.core.view.isVisible
 import com.google.firebase.analytics.FirebaseAnalytics
 import com.habitrpg.android.habitica.HabiticaBaseApplication
 import com.habitrpg.android.habitica.R
@@ -28,7 +28,6 @@ import javax.inject.Inject
 
 class InsufficientGemsDialog(context: Context, var gemPrice: Int) : InsufficientCurrencyDialog(context) {
 
-    private var purchaseButton: Button? = null
     @Inject
     lateinit var configManager: AppConfigManager
     @Inject
@@ -40,56 +39,45 @@ class InsufficientGemsDialog(context: Context, var gemPrice: Int) : Insufficient
         return R.layout.dialog_insufficient_gems
     }
 
-    var sku: String? = ""
-
     override fun onCreate(savedInstanceState: Bundle?) {
         HabiticaBaseApplication.userComponent?.inject(this)
         super.onCreate(savedInstanceState)
-        imageView.setImageResource(R.drawable.gems_84)
         textView.setText(R.string.insufficientGems)
+        addButton(R.string.see_other_options, true) { _, _ -> MainNavigationController.navigate(R.id.gemPurchaseActivity, bundleOf(Pair("openSubscription", false))) }
         addCloseButton()
+        contentView.setPadding(0, 0, 0, 0)
+        dialogContainer.setPadding(0, 0, 0, dialogContainer.paddingBottom)
     }
 
-
-
     override fun onAttachedToWindow() {
         super.onAttachedToWindow()
         getActivity()?.let { activity ->
-            if (configManager.insufficientGemPurchase()) {
-                purchaseButton = contentView.findViewById(R.id.purchase_button)
-                purchaseHandler.startListening()
-                sku = if (configManager.insufficientGemPurchaseAdjust()) {
-                    if (gemPrice > 4) {
-                        PurchaseTypes.Purchase21Gems
-                    } else {
-                        PurchaseTypes.Purchase4Gems
-                    }
-                } else {
-                    PurchaseTypes.Purchase4Gems
-                }
-                CoroutineScope(Dispatchers.IO).launch {
-                    val sku = purchaseHandler.getInAppPurchaseSKU(PurchaseTypes.Purchase4Gems)
-                        ?: return@launch
-                    withContext(Dispatchers.Main) {
-                        val purchaseTextView =
-                            contentView.findViewById<TextView>(R.id.purchase_textview)
-                        purchaseTextView.text = sku.title
-                        purchaseButton?.text = sku.price
-
-                        purchaseButton?.setOnClickListener {
-                            FirebaseAnalytics.getInstance(context).logEvent(
-                                "purchased_gems_from_insufficient",
-                                bundleOf(Pair("gemPrice", gemPrice), Pair("sku", ""))
-                            )
-                            purchaseHandler.purchase(activity, sku)
-                        }
-                    }
-                }
-
-                addButton(R.string.see_other_options, false) { _, _ -> MainNavigationController.navigate(R.id.gemPurchaseActivity, bundleOf(Pair("openSubscription", false))) }
+            val purchaseTextView = contentView.findViewById<TextView>(R.id.purchase_textview)
+            val purchaseButton = contentView.findViewById<Button>(R.id.purchase_button)
+            purchaseHandler.startListening()
+            val gemSku = if (gemPrice > 4) {
+                purchaseTextView.text = "21"
+                PurchaseTypes.Purchase21Gems
             } else {
-                contentView.findViewById<LinearLayout>(R.id.purchase_wrapper).visibility = View.GONE
-                addButton(R.string.purchase_gems, false) { _, _ -> MainNavigationController.navigate(R.id.gemPurchaseActivity, bundleOf(Pair("openSubscription", false))) }
+                purchaseTextView.text = "4"
+                PurchaseTypes.Purchase4Gems
+            }
+            CoroutineScope(Dispatchers.IO).launch {
+                val sku = purchaseHandler.getInAppPurchaseSKU(gemSku)
+                    ?: return@launch
+                withContext(Dispatchers.Main) {
+                    purchaseButton?.text = sku.price
+                    contentView.findViewById<ProgressBar>(R.id.loading_indicator).isVisible = false
+                    purchaseButton.isVisible = true
+
+                    purchaseButton?.setOnClickListener {
+                        FirebaseAnalytics.getInstance(context).logEvent(
+                            "purchased_gems_from_insufficient",
+                            bundleOf(Pair("gemPrice", gemPrice), Pair("sku", ""))
+                        )
+                        purchaseHandler.purchase(activity, sku)
+                    }
+                }
             }
         }
     }