From ff44ae578fd5f1804d47c5c54b29d8984913eb05 Mon Sep 17 00:00:00 2001
From: Hafiz <hafizbhamidi@gmail.com>
Date: Mon, 4 Sep 2023 15:47:05 -0400
Subject: [PATCH 1/2] Subscription bottom sheet

---
 .../subscription_banner_image_left.xml        | 264 +++++++++++++
 .../subscription_banner_image_right.xml       | 264 +++++++++++++
 .../fragment_bottomsheet_subscription.xml     | 370 ++++++++++++++++++
 Habitica/res/values/strings.xml               |   5 +
 .../SubscriptionBottomSheetFragment.kt        | 237 +++++++++++
 .../habitica/ui/views/shops/PurchaseDialog.kt |  20 +-
 6 files changed, 1153 insertions(+), 7 deletions(-)
 create mode 100644 Habitica/res/drawable/subscription_banner_image_left.xml
 create mode 100644 Habitica/res/drawable/subscription_banner_image_right.xml
 create mode 100644 Habitica/res/layout/fragment_bottomsheet_subscription.xml
 create mode 100644 Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt

diff --git a/Habitica/res/drawable/subscription_banner_image_left.xml b/Habitica/res/drawable/subscription_banner_image_left.xml
new file mode 100644
index 000000000..0261df640
--- /dev/null
+++ b/Habitica/res/drawable/subscription_banner_image_left.xml
@@ -0,0 +1,264 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="81dp"
+    android:height="115dp"
+    android:viewportWidth="81"
+    android:viewportHeight="115">
+  <group>
+    <clip-path
+        android:pathData="M15.56,26.55L44.82,42.11L29.26,71.37L0,55.81L15.56,26.55Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M22.41,48.96m-12.06,-1.7a12.18,12.18 53,1 1,24.13 3.39a12.18,12.18 53,1 1,-24.13 -3.39"
+        android:strokeAlpha="0.900274"
+        android:fillColor="#FFA623"
+        android:fillAlpha="0.900274"/>
+    <path
+        android:pathData="M15.87,53.88C13.19,50.33 13.91,45.2 17.47,42.52C21.02,39.84 26.15,40.56 28.83,44.12"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M28.94,44.03C31.62,47.59 30.9,52.71 27.35,55.39C23.79,58.07 18.67,57.35 15.99,53.8"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M23.82,38.9C18.29,38.13 13.13,42.01 12.35,47.54C11.58,53.07 15.47,58.23 21,59.01C26.53,59.79 31.69,55.9 32.46,50.37C33.24,44.84 29.35,39.68 23.82,38.9V38.9ZM21.28,57C16.85,56.38 13.74,52.25 14.37,47.83C14.99,43.4 19.12,40.29 23.54,40.91C27.96,41.54 31.07,45.66 30.45,50.09C29.83,54.51 25.7,57.62 21.28,57V57Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M23.84,46.08L23.56,48.09L21.54,47.81L21.83,45.8L19.82,45.52L18.97,51.55L20.98,51.83L21.26,49.82L23.27,50.1L22.99,52.11L25,52.4L25.85,46.36L23.84,46.08Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M37.85,0L59.8,11.67L48.13,33.61L26.18,21.94L37.85,0Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M42.98,16.81m-8.87,2.21a9.14,9.14 121,1 1,17.73 -4.42a9.14,9.14 121,1 1,-17.73 4.42"
+        android:strokeAlpha="0.704241"
+        android:fillColor="#FFA623"
+        android:fillAlpha="0.704241"/>
+    <path
+        android:pathData="M39.82,22.08C36.96,20.36 36.02,16.59 37.74,13.73C39.46,10.87 43.23,9.93 46.09,11.65"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M46.15,11.55C49.01,13.27 49.95,17.04 48.23,19.9C46.51,22.76 42.74,23.7 39.88,21.98"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M41.14,9.43C37.08,10.44 34.58,14.59 35.6,18.66C36.61,22.72 40.76,25.22 44.83,24.2C48.89,23.19 51.39,19.04 50.37,14.97C49.36,10.91 45.21,8.41 41.14,9.43V9.43ZM44.46,22.73C41.21,23.54 37.88,21.54 37.07,18.29C36.26,15.04 38.26,11.71 41.51,10.9C44.76,10.09 48.08,12.09 48.9,15.34C49.71,18.59 47.71,21.91 44.46,22.73V22.73Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M43.17,14.41L43.54,15.89L42.06,16.26L41.69,14.78L40.22,15.15L41.32,19.58L42.8,19.21L42.43,17.74L43.91,17.37L44.28,18.85L45.75,18.48L44.65,14.05L43.17,14.41Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M43.24,52.65L81,76.25L57.4,114.01L19.64,90.42L43.24,52.65Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M50.32,83.33m-15.07,-6.4a16.37,16.37 68,1 1,30.14 12.79a16.37,16.37 68,1 1,-30.14 -12.79"
+        android:fillColor="#FFA623"/>
+    <path
+        android:pathData="M40.12,87.45C37.88,81.91 40.6,75.5 46.15,73.26C51.69,71.02 58.1,73.74 60.34,79.29"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M60.52,79.21C62.76,84.76 60.04,91.16 54.49,93.4C48.95,95.64 42.54,92.93 40.3,87.38"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M55.65,70.77C48.74,67.84 40.69,71.1 37.76,78C34.83,84.91 38.08,92.96 44.99,95.89C51.9,98.82 59.95,95.57 62.88,88.66C65.81,81.76 62.56,73.71 55.65,70.77V70.77ZM46.06,93.38C40.53,91.03 37.93,84.59 40.27,79.07C42.62,73.54 49.06,70.94 54.58,73.29C60.11,75.63 62.71,82.07 60.37,87.6C58.02,93.12 51.58,95.73 46.06,93.38V93.38Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M53.17,80.1L52.11,82.61L49.6,81.54L50.66,79.03L48.15,77.97L44.95,85.5L47.46,86.57L48.53,84.06L51.04,85.12L49.98,87.63L52.49,88.7L55.69,81.17L53.17,80.1Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M56.65,43.19L79.99,62.09L61.09,85.43L37.75,66.53L56.65,43.19Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M58.86,64.31m-11.03,0.58a11.04,11.04 132,1 1,22.05 -1.16a11.04,11.04 132,1 1,-22.05 1.16"
+        android:fillColor="#FFA623"/>
+    <path
+        android:pathData="M53.89,69.83C50.9,67.13 50.65,62.44 53.35,59.44C56.05,56.45 60.73,56.2 63.73,58.9"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M63.82,58.8C66.82,61.5 67.06,66.19 64.36,69.18C61.66,72.18 56.98,72.43 53.98,69.73"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M58.37,55.13C53.32,55.39 49.4,59.74 49.67,64.8C49.93,69.85 54.28,73.77 59.34,73.5C64.39,73.24 68.31,68.89 68.04,63.83C67.78,58.78 63.43,54.86 58.37,55.13V55.13ZM59.24,71.66C55.2,71.88 51.72,68.74 51.51,64.7C51.29,60.66 54.43,57.18 58.47,56.96C62.51,56.75 66,59.89 66.21,63.93C66.42,67.97 63.28,71.45 59.24,71.66V71.66Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M59.63,61.51L59.73,63.35L57.89,63.44L57.79,61.61L55.96,61.7L56.24,67.21L58.08,67.12L57.99,65.28L59.82,65.18L59.92,67.02L61.76,66.93L61.47,61.41L59.63,61.51Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <path
+      android:pathData="M61.06,72.45L62.94,83.64L74.21,82.21L74.9,75.82L66.96,69.92L61.06,72.45Z"
+      android:fillColor="#3AC1A7"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M68.24,73.26L69.79,74.41L68.04,75.16L66.29,75.91L66.5,74.01L66.7,72.12L68.24,73.26Z"
+      android:fillColor="#7BE3CF"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M71.33,75.56L72.87,76.7L71.13,77.46L69.38,78.21L69.58,76.31L69.79,74.41L71.33,75.56Z"
+      android:fillColor="#7BE3CF"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M70.92,79.35L69.38,78.21L71.13,77.46L72.87,76.7L72.67,78.6L72.47,80.5L70.92,79.35Z"
+      android:fillColor="#5BD8C0"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M67.84,77.06L66.29,75.91L68.04,75.16L69.79,74.41L69.58,76.31L69.38,78.21L67.84,77.06Z"
+      android:fillColor="#C5F3EA"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M64.75,74.76L63.21,73.62L64.95,72.87L66.7,72.12L66.5,74.01L66.29,75.91L64.75,74.76Z"
+      android:fillColor="#C5F3EA"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M63.21,73.62L64.53,81.51L66.29,75.91L63.21,73.62Z"
+      android:fillColor="#5BD8C0"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M72.47,80.5L64.53,81.5L69.38,78.21L72.47,80.5Z"
+      android:fillColor="#C5F3EA"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M66.29,75.91L64.53,81.5L69.38,78.21L66.29,75.91Z"
+      android:fillColor="#7BE3CF"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M58.92,6.11L65.12,19.64L78.89,13.99L77.63,5.97L65.26,1.09L58.92,6.11Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#56C1BC"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M68.17,4.3L70.74,5.32L68.6,7.02L66.45,8.72L66.02,6L65.59,3.28L68.17,4.3Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#87E3E1"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M73.32,6.33L75.9,7.35L73.75,9.05L71.6,10.75L71.17,8.04L70.75,5.32L73.32,6.33Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#87E3E1"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M74.18,11.77L71.6,10.75L73.75,9.05L75.9,7.35L76.33,10.07L76.76,12.79L74.18,11.77Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#67D6D6"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M69.02,9.74L66.45,8.72L68.6,7.02L70.74,5.32L71.17,8.04L71.6,10.75L69.02,9.74Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#C0FBFA"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M63.87,7.7L61.29,6.68L63.44,4.98L65.59,3.28L66.02,6L66.45,8.72L63.87,7.7Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#C0FBFA"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M61.29,6.68L66.09,17.17L66.45,8.72L61.29,6.68Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#67D6D6"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M76.77,12.79L66.09,17.17L71.61,10.76L76.77,12.79Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#C0FBFA"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M66.45,8.72L66.09,17.17L71.6,10.75L66.45,8.72Z"
+      android:strokeAlpha="0.797294"
+      android:fillColor="#87E3E1"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.797294"/>
+  <path
+      android:pathData="M29.77,35.34L26.82,45.27L43.78,55.18L54.37,38.62L47.14,31.16L29.77,35.34Z"
+      android:fillColor="#2FBC80"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M35.1,36.03L38.91,35.12L37.81,38.83L36.7,42.54L34,39.75L31.3,36.95L35.1,36.03Z"
+      android:fillColor="#5DDEAB"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M42.72,34.2L46.52,33.28L45.42,36.99L44.32,40.7L41.61,37.91L38.91,35.12L42.72,34.2Z"
+      android:fillColor="#5DDEAB"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M48.12,39.79L44.32,40.7L45.42,36.99L46.52,33.28L49.23,36.07L51.93,38.87L48.12,39.79Z"
+      android:fillColor="#37D18F"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M40.51,41.62L36.7,42.54L37.81,38.83L38.91,35.12L41.61,37.91L44.32,40.7L40.51,41.62Z"
+      android:fillColor="#B0F1D7"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M32.9,43.46L29.09,44.38L30.19,40.66L31.3,36.95L34,39.75L36.7,42.54L32.9,43.46Z"
+      android:fillColor="#B0F1D7"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M29.09,44.38L43.15,52.59L36.7,42.54L29.09,44.38Z"
+      android:fillColor="#37D18F"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M51.94,38.87L43.15,52.59L44.33,40.7L51.94,38.87Z"
+      android:fillColor="#B0F1D7"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M36.7,42.54L43.16,52.59L44.32,40.7L36.7,42.54Z"
+      android:fillColor="#5DDEAB"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/Habitica/res/drawable/subscription_banner_image_right.xml b/Habitica/res/drawable/subscription_banner_image_right.xml
new file mode 100644
index 000000000..d13de7c95
--- /dev/null
+++ b/Habitica/res/drawable/subscription_banner_image_right.xml
@@ -0,0 +1,264 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="81dp"
+    android:height="110dp"
+    android:viewportWidth="81"
+    android:viewportHeight="110">
+  <group>
+    <clip-path
+        android:pathData="M66.03,27.85L37.88,42.82L52.85,70.97L81,56.01L66.03,27.85Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M59.44,49.41m11.61,-1.63a11.72,11.72 127,1 0,-23.22 3.26a11.72,11.72 127,1 0,23.22 -3.26"
+        android:strokeAlpha="0.900274"
+        android:fillColor="#FFA623"
+        android:fillAlpha="0.900274"/>
+    <path
+        android:pathData="M65.73,54.15C68.3,50.73 67.61,45.8 64.19,43.22C60.77,40.64 55.84,41.34 53.26,44.76"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M53.15,44.67C50.57,48.09 51.26,53.03 54.69,55.61C58.11,58.18 63.04,57.49 65.62,54.07"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M58.08,39.74C63.4,38.99 68.36,42.73 69.11,48.05C69.86,53.37 66.12,58.34 60.8,59.09C55.48,59.83 50.51,56.09 49.76,50.77C49.02,45.45 52.76,40.49 58.08,39.74V39.74ZM60.53,57.15C64.78,56.55 67.78,52.58 67.18,48.33C66.58,44.07 62.61,41.08 58.35,41.67C54.09,42.27 51.1,46.24 51.7,50.5C52.3,54.76 56.27,57.75 60.53,57.15V57.15Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M58.06,46.65L58.33,48.58L60.27,48.31L60,46.37L61.93,46.1L62.75,51.91L60.81,52.18L60.54,50.24L58.61,50.52L58.88,52.45L56.94,52.72L56.13,46.92L58.06,46.65Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M46.41,0L25.3,11.23L36.53,32.34L57.64,21.12L46.41,0Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M41.48,16.18m8.53,2.13a8.79,8.79 59,1 0,-17.06 -4.25a8.79,8.79 59,1 0,17.06 4.25"
+        android:strokeAlpha="0.704241"
+        android:fillColor="#FFA623"
+        android:fillAlpha="0.704241"/>
+    <path
+        android:pathData="M44.52,21.24C47.27,19.59 48.18,15.96 46.52,13.21C44.87,10.45 41.24,9.55 38.49,11.21"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M38.43,11.12C35.68,12.77 34.78,16.4 36.43,19.15C38.09,21.9 41.71,22.81 44.46,21.15"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M43.25,9.07C47.16,10.04 49.56,14.04 48.59,17.95C47.61,21.86 43.61,24.26 39.7,23.29C35.79,22.31 33.39,18.32 34.37,14.41C35.34,10.5 39.34,8.09 43.25,9.07V9.07ZM40.06,21.87C43.19,22.65 46.38,20.73 47.16,17.6C47.94,14.47 46.02,11.27 42.89,10.49C39.77,9.71 36.57,11.63 35.79,14.76C35.01,17.89 36.93,21.09 40.06,21.87V21.87Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M41.3,13.87L40.94,15.29L42.36,15.65L42.72,14.22L44.14,14.58L43.08,18.84L41.66,18.49L42.01,17.07L40.59,16.71L40.23,18.13L38.81,17.78L39.88,13.51L41.3,13.87Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M36.34,50.5L0,73.2L22.71,109.54L59.04,86.83L36.34,50.5Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M44.02,73.86a15.75,15.75 112,1 1,-29 12.31a15.75,15.75 112,1 1,29 -12.31z"
+        android:fillColor="#FFA623"/>
+    <path
+        android:pathData="M39.33,83.98C41.49,78.65 38.87,72.48 33.54,70.33C28.2,68.17 22.04,70.79 19.88,76.12"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M19.71,76.05C17.55,81.39 20.17,87.55 25.51,89.71C30.84,91.86 37,89.25 39.16,83.91"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M24.39,67.93C31.04,65.11 38.78,68.24 41.6,74.89C44.43,81.53 41.3,89.28 34.65,92.1C28,94.92 20.26,91.79 17.44,85.15C14.62,78.5 17.75,70.76 24.39,67.93V67.93ZM33.62,89.68C38.94,87.43 41.45,81.23 39.19,75.91C36.93,70.6 30.73,68.09 25.42,70.35C20.1,72.61 17.6,78.8 19.85,84.12C22.11,89.44 28.31,91.94 33.62,89.68V89.68Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M26.77,76.91L27.8,79.32L30.22,78.3L29.19,75.88L31.61,74.85L34.69,82.1L32.27,83.13L31.24,80.71L28.83,81.74L29.85,84.16L27.43,85.18L24.36,77.93L26.77,76.91Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M23.43,41.39L0.98,59.57L19.16,82.03L41.62,63.85L23.43,41.39Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M21.31,61.72m10.61,0.56a10.62,10.62 48,1 0,-21.22 -1.11a10.62,10.62 48,1 0,21.22 1.11"
+        android:fillColor="#FFA623"/>
+    <path
+        android:pathData="M26.08,67.02C28.97,64.42 29.2,59.91 26.61,57.03C24.01,54.15 19.5,53.91 16.61,56.51"
+        android:strokeAlpha="0.5"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M16.53,56.41C13.65,59.01 13.41,63.52 16.01,66.4C18.6,69.29 23.11,69.52 26,66.93"
+        android:strokeAlpha="0.25"
+        android:fillColor="#ffffff"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.25"/>
+    <path
+        android:pathData="M21.77,52.88C26.63,53.13 30.4,57.32 30.15,62.18C29.89,67.04 25.71,70.81 20.84,70.56C15.98,70.3 12.21,66.12 12.47,61.25C12.72,56.39 16.91,52.62 21.77,52.88V52.88ZM20.94,68.79C24.83,68.99 28.18,65.98 28.38,62.09C28.58,58.2 25.57,54.85 21.68,54.64C17.79,54.44 14.44,57.46 14.23,61.35C14.03,65.24 17.05,68.59 20.94,68.79V68.79Z"
+        android:strokeAlpha="0.5"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.5"/>
+    <path
+        android:pathData="M20.56,59.02L20.47,60.79L22.24,60.88L22.33,59.11L24.1,59.2L23.82,64.51L22.05,64.42L22.14,62.65L20.38,62.56L20.28,64.32L18.52,64.23L18.79,58.93L20.56,59.02Z"
+        android:strokeAlpha="0.75"
+        android:fillColor="#BF7D1A"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.75"/>
+  </group>
+  <path
+      android:pathData="M19.18,69.54L17.37,80.31L6.53,78.94L5.87,72.79L13.51,67.11L19.18,69.54Z"
+      android:fillColor="#2FBC80"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M12.27,70.33L10.79,71.43L12.47,72.15L14.15,72.88L13.96,71.05L13.76,69.22L12.27,70.33Z"
+      android:fillColor="#5DDEAB"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M9.3,72.54L7.82,73.64L9.5,74.36L11.18,75.09L10.99,73.26L10.79,71.43L9.3,72.54Z"
+      android:fillColor="#5DDEAB"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M9.7,76.19L11.18,75.09L9.5,74.36L7.82,73.64L8.02,75.47L8.21,77.29L9.7,76.19Z"
+      android:fillColor="#37D18F"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M12.67,73.98L14.15,72.88L12.47,72.15L10.79,71.43L10.99,73.26L11.18,75.09L12.67,73.98Z"
+      android:fillColor="#B0F1D7"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M15.64,71.77L17.12,70.67L15.44,69.95L13.76,69.22L13.96,71.05L14.15,72.88L15.64,71.77Z"
+      android:fillColor="#B0F1D7"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M17.12,70.67L15.85,78.26L14.15,72.88L17.12,70.67Z"
+      android:fillColor="#37D18F"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M8.21,77.29L15.85,78.26L11.18,75.09L8.21,77.29Z"
+      android:fillColor="#B0F1D7"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M14.15,72.88L15.85,78.26L11.18,75.09L14.15,72.88Z"
+      android:fillColor="#5DDEAB"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M24.99,4.9L19.02,17.92L5.76,12.47L6.98,4.76L18.88,0.06L24.99,4.9Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#3AC1A7"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M16.09,3.15L13.61,4.13L15.67,5.77L17.74,7.4L18.15,4.79L18.57,2.17L16.09,3.15Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#7BE3CF"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M11.12,5.11L8.64,6.09L10.71,7.73L12.78,9.36L13.19,6.75L13.6,4.13L11.12,5.11Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#7BE3CF"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M10.3,10.34L12.78,9.36L10.71,7.73L8.64,6.09L8.23,8.7L7.82,11.32L10.3,10.34Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#5BD8C0"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M15.26,8.38L17.74,7.4L15.67,5.77L13.6,4.13L13.19,6.75L12.78,9.36L15.26,8.38Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#C5F3EA"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M20.22,6.43L22.7,5.45L20.64,3.81L18.57,2.17L18.15,4.79L17.74,7.4L20.22,6.43Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#C5F3EA"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M22.7,5.45L18.08,15.53L17.74,7.4L22.7,5.45Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#5BD8C0"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M7.81,11.32L18.08,15.53L12.77,9.36L7.81,11.32Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#C5F3EA"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M17.74,7.4L18.08,15.53L12.78,9.36L17.74,7.4Z"
+      android:strokeAlpha="0.8"
+      android:fillColor="#7BE3CF"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.8"/>
+  <path
+      android:pathData="M52.35,36.31L55.19,45.87L38.88,55.4L28.69,39.47L35.64,32.29L52.35,36.31Z"
+      android:fillColor="#56C1BC"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M47.22,36.98L43.56,36.09L44.62,39.67L45.68,43.24L48.29,40.55L50.89,37.86L47.22,36.98Z"
+      android:fillColor="#87E3E1"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M39.9,35.21L36.23,34.33L37.3,37.9L38.36,41.47L40.96,38.78L43.56,36.09L39.9,35.21Z"
+      android:fillColor="#87E3E1"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M34.69,40.59L38.36,41.47L37.3,37.9L36.23,34.33L33.63,37.02L31.03,39.71L34.69,40.59Z"
+      android:fillColor="#67D6D6"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M42.02,42.35L45.68,43.24L44.62,39.67L43.56,36.09L40.96,38.78L38.36,41.47L42.02,42.35Z"
+      android:fillColor="#C0FBFA"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M49.35,44.12L53.01,45L51.95,41.43L50.89,37.86L48.29,40.55L45.68,43.24L49.35,44.12Z"
+      android:fillColor="#C0FBFA"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M53.01,45L39.48,52.91L45.68,43.24L53.01,45Z"
+      android:fillColor="#67D6D6"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M31.02,39.7L39.48,52.91L38.35,41.47L31.02,39.7Z"
+      android:fillColor="#C0FBFA"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M45.68,43.24L39.48,52.91L38.36,41.47L45.68,43.24Z"
+      android:fillColor="#87E3E1"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/Habitica/res/layout/fragment_bottomsheet_subscription.xml b/Habitica/res/layout/fragment_bottomsheet_subscription.xml
new file mode 100644
index 000000000..e0e7dc288
--- /dev/null
+++ b/Habitica/res/layout/fragment_bottomsheet_subscription.xml
@@ -0,0 +1,370 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <androidx.core.widget.NestedScrollView
+        android:id="@+id/scroll_view"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scrollbarSize="3dp"
+        android:scrollbarThumbVertical="@color/scrollbarThumb"
+        android:scrollbars="vertical">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <ImageView
+                android:layout_width="22dp"
+                android:layout_height="3dp"
+                android:layout_gravity="center_horizontal"
+                android:layout_margin="@dimen/spacing_large"
+                android:src="@color/offset_background" />
+
+            <com.google.android.material.card.MaterialCardView
+                android:id="@+id/subscriber_benefit_banner"
+                android:layout_width="match_parent"
+                android:layout_height="73dp"
+                android:layout_marginStart="@dimen/spacing_large"
+                android:layout_marginEnd="@dimen/spacing_large"
+                app:cardBackgroundColor="@color/teal_5"
+                app:cardCornerRadius="24dp"
+                app:strokeWidth="0dp">
+
+                <RelativeLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:clipChildren="true"
+                    android:clipToPadding="true">
+
+                    <ImageView
+                        android:id="@+id/banner_left_image"
+                        android:layout_width="wrap_content"
+                        android:layout_height="match_parent"
+                        android:layout_alignParentStart="true"
+                        android:layout_alignParentTop="true"
+                        android:layout_alignParentBottom="false"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/subscription_banner_image_left" />
+
+                    <ImageView
+                        android:id="@+id/banner_right_image"
+                        android:layout_width="wrap_content"
+                        android:layout_height="match_parent"
+                        android:layout_alignParentTop="true"
+                        android:layout_alignParentEnd="true"
+                        android:scaleType="centerCrop"
+                        android:src="@drawable/subscription_banner_image_right" />
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="match_parent"
+                        android:layout_toStartOf="@id/banner_right_image"
+                        android:layout_toEndOf="@id/banner_left_image"
+                        android:gravity="center"
+                        android:orientation="vertical">
+
+                        <TextView
+                            style="@style/Title1"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:fontFamily="sans-serif-medium"
+                            android:text="@string/buy_gems_with_gold" />
+
+                        <TextView
+                            style="@style/Caption2.Regular"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:fontFamily="sans-serif-medium"
+                            android:text="SUBSCRIBER BENEFIT" />
+
+
+                    </LinearLayout>
+
+
+                </RelativeLayout>
+
+
+            </com.google.android.material.card.MaterialCardView>
+
+
+            <LinearLayout
+                android:layout_marginBottom="100dp"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                android:padding="20dp">
+
+
+                <com.habitrpg.android.habitica.ui.views.DayNightTextView
+                    android:id="@+id/subscribe_benefits"
+                    style="@style/SubHeader1"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:layout_marginTop="8dp"
+                    android:gravity="center"
+                    android:lineSpacingExtra="4dp"
+                    android:text="@string/subscribe_prompt_2"
+                    app:dayTextColor="@color/text_brand"
+                    app:nightTextColor="@color/gray_400" />
+
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:layout_marginTop="20dp"
+                    android:layout_marginBottom="20dp"
+                    android:src="@drawable/separator_fancy" />
+
+
+                <LinearLayout
+                    android:id="@+id/benefit_armoire_wrapper"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="horizontal">
+
+                    <com.habitrpg.common.habitica.views.PixelArtView
+                        android:layout_width="68dp"
+                        android:layout_height="68dp"
+                        android:scaleType="center"
+                        android:src="@drawable/sub_benefits_armoire" />
+
+                    <LinearLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center_vertical"
+                        android:layout_marginStart="12dp"
+                        android:orientation="vertical">
+
+                        <TextView
+                            style="@style/Body1"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitemArmoire"
+                            android:textColor="@color/text_primary" />
+
+                        <TextView
+                            style="@style/Caption2.Regular"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitemArmoire_description_2"
+                            android:textColor="@color/text_primary" />
+                    </LinearLayout>
+                </LinearLayout>
+
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="horizontal">
+
+                    <ImageView
+                        android:layout_width="68dp"
+                        android:layout_height="68dp"
+                        android:scaleType="center"
+                        android:src="@drawable/sub_benefits_hourglasses" />
+
+                    <LinearLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center_vertical"
+                        android:layout_marginStart="12dp"
+                        android:orientation="vertical">
+
+                        <TextView
+                            style="@style/Body1"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitem2"
+                            android:textColor="@color/text_primary" />
+
+                        <TextView
+                            style="@style/Caption2.Regular"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitem2_description_2"
+                            android:textColor="@color/text_primary" />
+                    </LinearLayout>
+                </LinearLayout>
+
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="horizontal">
+
+                    <com.habitrpg.common.habitica.views.PixelArtView
+                        android:id="@+id/sub_benefits_mystery_item_icon"
+                        android:layout_width="68dp"
+                        android:layout_height="68dp"
+                        android:scaleType="center" />
+
+                    <LinearLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center_vertical"
+                        android:layout_marginStart="12dp"
+                        android:orientation="vertical">
+
+                        <TextView
+                            style="@style/Body1"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitem3"
+                            android:textColor="@color/text_primary" />
+
+                        <TextView
+                            android:id="@+id/sub_benefits_mystery_item_text"
+                            style="@style/Caption2.Regular"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitem3_description"
+                            android:textColor="@color/text_primary" />
+                    </LinearLayout>
+                </LinearLayout>
+
+
+                <LinearLayout
+                    android:id="@+id/benefit_faint_wrapper"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="horizontal">
+
+                    <ImageView
+                        android:layout_width="68dp"
+                        android:layout_height="68dp"
+                        android:scaleType="center"
+                        android:src="@drawable/sub_benefits_faint" />
+
+                    <LinearLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center_vertical"
+                        android:layout_marginStart="12dp"
+                        android:orientation="vertical">
+
+                        <TextView
+                            style="@style/Body1"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitemFaint"
+                            android:textColor="@color/text_primary" />
+
+                        <TextView
+                            style="@style/Caption2.Regular"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitemFaint_description"
+                            android:textColor="@color/text_primary" />
+                    </LinearLayout>
+                </LinearLayout>
+
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="horizontal">
+
+                    <ImageView
+                        android:layout_width="68dp"
+                        android:layout_height="68dp"
+                        android:scaleType="center"
+                        android:src="@drawable/sub_benefits_drops" />
+
+                    <LinearLayout
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center_vertical"
+                        android:layout_marginStart="12dp"
+                        android:orientation="vertical">
+
+                        <TextView
+                            style="@style/Body1"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitem5"
+                            android:textColor="@color/text_primary" />
+
+                        <TextView
+                            style="@style/Caption2.Regular"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="@string/subscribe_listitem5_description"
+                            android:textColor="@color/text_primary" />
+                    </LinearLayout>
+                </LinearLayout>
+
+
+                <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center"
+                    android:layout_marginTop="20dp"
+                    android:layout_marginBottom="12dp"
+                    android:src="@drawable/separator_fancy" />
+
+                <ProgressBar
+                    android:id="@+id/loadingIndicator"
+                    style="?android:attr/progressBarStyle"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content" />
+
+                <LinearLayout
+                    android:id="@+id/subscriptionOptions"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical">
+
+                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+                        android:id="@+id/subscription1month"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:gemCapText="@string/subscribe1month_gemcap"
+                        app:recurringText="@string/month" />
+
+                    <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+                        android:id="@+id/subscription12month"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        app:flagText="@string/save_20"
+                        app:gemCapText="@string/subscribe12month_gemcap"
+                        app:hourGlassCount="4"
+                        app:recurringText="@string/twelve_months" />
+
+                    <Button
+                        android:id="@+id/subscribeButton"
+                        style="@style/HabiticaButton.Purple.Small"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="8dp"
+                        android:text="@string/subscribe"
+                        android:textAllCaps="false" />
+                </LinearLayout>
+
+                <TextView
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="@dimen/spacing_large"
+                    android:layout_marginEnd="@dimen/spacing_large"
+                    android:textSize="11sp"
+                    android:gravity="center_horizontal"
+                    android:text="@string/subscribe_title"
+                    android:textColor="@color/text_quad" />
+
+                <Button
+                    android:id="@+id/see_more_options"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:background="@color/transparent"
+                    android:text="@string/see_more_subscription_options"
+                    android:textAllCaps="false"
+                    android:textColor="@color/text_brand_neon" />
+            </LinearLayout>
+
+        </LinearLayout>
+
+    </androidx.core.widget.NestedScrollView>
+
+</com.google.android.material.card.MaterialCardView>
diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
index 5b17f4a0f..1c0400aac 100644
--- a/Habitica/res/values/strings.xml
+++ b/Habitica/res/values/strings.xml
@@ -1432,6 +1432,11 @@
     <string name="quest_mechanics_pausing_description">"If you’re struggling to complete your Dailies, you can pause damage from Settings for a break. This will prevent the Boss from hurting you or others, but also pause your own damage. Other members missed Dailies will still cause damage, so be careful out there! "</string>
     <string name="quest_mechanics_rage_title">Rage meters</string>
     <string name="quest_mechanics_rage_description">Some difficult bosses have an orange Rage meter under their HP. This meter fills up when participants miss Dailies. When it fills completely, the boss will let out a fearsome attack that does extra damage!</string>
+    <string name="buy_gems_with_gold">Buy Gems with Gold</string>
+    <string name="subscribe_prompt_2">Subscribe to buy Gems with Gold and receive these other exclusive benefits!</string>
+    <string name="subscribe_listitemArmoire_description_2">Each time you open the Armoire, you can open again for free!</string>
+    <string name="subscribe_listitem2_description_2">Earn Hourglasses over time to purchase items in the Time Traveler\'s Shop</string>
+    <string name="see_more_subscription_options">See more subscription options</string>
 
     <plurals name="you_x_others">
         <item quantity="zero">You</item>
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
new file mode 100644
index 000000000..bdfd8c55b
--- /dev/null
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
@@ -0,0 +1,237 @@
+package com.habitrpg.android.habitica.ui.fragments.purchases
+
+import android.app.Dialog
+import android.content.Context
+import android.content.DialogInterface
+import android.content.Intent
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.EditText
+import androidx.compose.foundation.layout.padding
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import androidx.core.view.isVisible
+import androidx.fragment.app.Fragment
+import androidx.lifecycle.lifecycleScope
+import com.android.billingclient.api.ProductDetails
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import com.habitrpg.android.habitica.R
+import com.habitrpg.android.habitica.data.InventoryRepository
+import com.habitrpg.android.habitica.data.UserRepository
+import com.habitrpg.android.habitica.databinding.DialogHabiticaAccountBinding
+import com.habitrpg.android.habitica.databinding.FragmentBottomsheetSubscriptionBinding
+import com.habitrpg.android.habitica.databinding.FragmentSubscriptionBinding
+import com.habitrpg.android.habitica.extensions.addCancelButton
+import com.habitrpg.android.habitica.helpers.Analytics
+import com.habitrpg.android.habitica.helpers.AppConfigManager
+import com.habitrpg.android.habitica.helpers.PurchaseHandler
+import com.habitrpg.android.habitica.helpers.PurchaseTypes
+import com.habitrpg.android.habitica.models.user.User
+import com.habitrpg.android.habitica.ui.activities.GiftSubscriptionActivity
+import com.habitrpg.android.habitica.ui.fragments.PromoInfoFragment
+import com.habitrpg.android.habitica.ui.theme.HabiticaTheme
+import com.habitrpg.android.habitica.ui.views.dialogs.HabiticaAlertDialog
+import com.habitrpg.android.habitica.ui.views.promo.BirthdayBanner
+import com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
+import com.habitrpg.common.habitica.extensions.isUsingNightModeResources
+import com.habitrpg.common.habitica.extensions.layoutInflater
+import com.habitrpg.common.habitica.extensions.loadImage
+import com.habitrpg.common.habitica.helpers.ExceptionHandler
+import com.habitrpg.common.habitica.helpers.MainNavigationController
+import com.habitrpg.common.habitica.helpers.launchCatching
+import dagger.hilt.android.AndroidEntryPoint
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import javax.inject.Inject
+
+@AndroidEntryPoint
+class SubscriptionBottomSheetFragment : BottomSheetDialogFragment() {
+
+    private var _binding: FragmentBottomsheetSubscriptionBinding? = null
+    private val binding get() = _binding!!
+
+    @Inject
+    lateinit var userRepository: UserRepository
+
+    @Inject
+    lateinit var appConfigManager: AppConfigManager
+
+    @Inject
+    lateinit var inventoryRepository: InventoryRepository
+
+    @Inject
+    lateinit var purchaseHandler: PurchaseHandler
+
+    private var selectedSubscriptionSku: ProductDetails? = null
+    private var skus: List<ProductDetails> = emptyList()
+
+    private var user: User? = null
+    private var hasLoadedSubscriptionOptions: Boolean = false
+
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+        _binding = FragmentBottomsheetSubscriptionBinding.inflate(layoutInflater)
+        return binding.root
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        binding.subscriptionOptions.visibility = View.GONE
+        binding.seeMoreOptions.setOnClickListener {
+            dismiss()
+            MainNavigationController.navigate(R.id.gemPurchaseActivity)
+
+        }
+        binding.subscribeButton.setOnClickListener { purchaseSubscription() }
+
+        lifecycleScope.launchCatching {
+            userRepository.getUser().collect { user ->
+                user?.let { setUser(it) }
+            }
+        }
+
+        lifecycleScope.launchCatching {
+            inventoryRepository.getLatestMysteryItem().collect {
+                binding.subBenefitsMysteryItemIcon.loadImage(
+                    "shop_set_mystery_${
+                        it.key?.split(
+                            "_"
+                        )?.last()
+                    }"
+                )
+                binding.subBenefitsMysteryItemText.text =
+                    context?.getString(R.string.subscribe_listitem3_description_new, it.text)
+            }
+        }
+
+        binding.benefitArmoireWrapper.isVisible = appConfigManager.enableArmoireSubs()
+        binding.benefitFaintWrapper.isVisible = appConfigManager.enableFaintSubs()
+
+        Analytics.sendNavigationEvent("subscription screen")
+    }
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
+        bottomSheetDialog.setOnShowListener { dialog: DialogInterface ->
+            val notificationDialog = dialog as BottomSheetDialog
+            notificationDialog.behavior.state = BottomSheetBehavior.STATE_EXPANDED
+            notificationDialog.behavior.isDraggable = true
+        }
+        return bottomSheetDialog
+    }
+
+    override fun onResume() {
+        super.onResume()
+        lifecycleScope.launchCatching {
+            purchaseHandler.queryPurchases()
+        }
+        refresh()
+        loadInventory()
+    }
+
+    private fun refresh() {
+        lifecycleScope.launch(ExceptionHandler.coroutine()) {
+            userRepository.retrieveUser(false, true)
+        }
+    }
+
+    private fun loadInventory() {
+        CoroutineScope(Dispatchers.IO).launchCatching {
+            val subscriptions = purchaseHandler.getAllSubscriptionProducts()
+            skus = subscriptions
+            withContext(Dispatchers.Main) {
+                for (sku in subscriptions) {
+                    updateButtonLabel(sku, sku.subscriptionOfferDetails?.firstOrNull()?.pricingPhases?.pricingPhaseList?.firstOrNull()?.formattedPrice ?: "")
+                }
+                subscriptions.minByOrNull { it.subscriptionOfferDetails?.firstOrNull()?.pricingPhases?.pricingPhaseList?.firstOrNull()?.priceAmountMicros ?: 0 }?.let { selectSubscription(it) }
+                hasLoadedSubscriptionOptions = true
+                updateSubscriptionInfo()
+            }
+        }
+    }
+
+    private fun updateButtonLabel(sku: ProductDetails, price: String) {
+        val matchingView = buttonForSku(sku)
+        if (matchingView != null) {
+            matchingView.setPriceText(price)
+            matchingView.sku = sku.productId
+            matchingView.setOnPurchaseClickListener {
+                selectSubscription(sku)
+            }
+        }
+    }
+
+    private fun selectSubscription(sku: ProductDetails) {
+        if (this.selectedSubscriptionSku != null) {
+            val oldButton = buttonForSku(this.selectedSubscriptionSku)
+            oldButton?.setIsSelected(false)
+        }
+        this.selectedSubscriptionSku = sku
+        val subscriptionOptionButton = buttonForSku(this.selectedSubscriptionSku)
+        subscriptionOptionButton?.setIsSelected(true)
+        binding.subscribeButton.isEnabled = true
+    }
+
+    private fun buttonForSku(sku: ProductDetails?): SubscriptionOptionView? {
+        return buttonForSku(sku?.productId)
+    }
+
+    private fun buttonForSku(sku: String?): SubscriptionOptionView? {
+        return when (sku) {
+            PurchaseTypes.Subscription1Month -> binding.subscription1month
+            PurchaseTypes.Subscription12Month -> binding.subscription12month
+            else -> null
+        }
+    }
+
+    private fun purchaseSubscription() {
+        selectedSubscriptionSku?.let { sku ->
+            activity?.let {
+                purchaseHandler.purchase(it, sku)
+                dismiss()
+            }
+        }
+    }
+
+    fun setUser(newUser: User) {
+        user = newUser
+        this.updateSubscriptionInfo()
+        checkIfNeedsCancellation()
+    }
+
+    private fun updateSubscriptionInfo() {
+        if (hasLoadedSubscriptionOptions) {
+            binding.subscriptionOptions.visibility = View.VISIBLE
+            binding.loadingIndicator.visibility = View.GONE
+        }
+        if (user != null) {
+            binding.loadingIndicator.visibility = View.GONE
+        }
+    }
+
+    private fun checkIfNeedsCancellation() {
+        CoroutineScope(Dispatchers.IO).launch(ExceptionHandler.coroutine()) {
+            val newestSubscription = purchaseHandler.checkForSubscription()
+            if (user?.purchased?.plan?.paymentMethod == "Google" &&
+                user?.purchased?.plan?.isActive == true &&
+                user?.purchased?.plan?.dateTerminated == null &&
+                (newestSubscription?.isAutoRenewing != true)
+            ) {
+                lifecycleScope.launch(ExceptionHandler.coroutine()) {
+                    purchaseHandler.cancelSubscription()
+                }
+            }
+        }
+    }
+
+    companion object {
+        const val TAG = "SubscriptionBottomSheet"
+    }
+}
\ No newline at end of file
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialog.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialog.kt
index c158fec83..ecec27ad0 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialog.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/shops/PurchaseDialog.kt
@@ -8,6 +8,7 @@ import android.view.View
 import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.TextView
+import androidx.appcompat.app.AppCompatActivity
 import androidx.core.content.ContextCompat
 import androidx.core.graphics.drawable.toDrawable
 import androidx.core.os.bundleOf
@@ -30,6 +31,8 @@ import com.habitrpg.android.habitica.models.shops.ShopItem
 import com.habitrpg.android.habitica.models.user.OwnedItem
 import com.habitrpg.android.habitica.models.user.User
 import com.habitrpg.android.habitica.ui.activities.ArmoireActivityDirections
+import com.habitrpg.android.habitica.ui.fragments.preferences.HabiticaAccountDialog
+import com.habitrpg.android.habitica.ui.fragments.purchases.SubscriptionBottomSheetFragment
 import com.habitrpg.android.habitica.ui.views.CurrencyView
 import com.habitrpg.android.habitica.ui.views.CurrencyViews
 import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
@@ -60,7 +63,7 @@ class PurchaseDialog(
     private val userRepository: UserRepository,
     private val inventoryRepository: InventoryRepository,
     val item: ShopItem,
-    val parentActivity: Activity? = null
+    val parentActivity: AppCompatActivity? = null
 ) : HabiticaAlertDialog(context) {
 
     private val customHeader: View by lazy {
@@ -355,19 +358,22 @@ class PurchaseDialog(
                 when {
                     "gems" == shopItem.purchaseType -> {
                         if (shopItem.canAfford(user, purchaseQuantity)) {
-                            InsufficientSubscriberGemsDialog(context)
+                            InsufficientSubscriberGemsDialog(context).show()
                         } else {
-                            InsufficientGoldDialog(context)
+                            InsufficientGoldDialog(context).show()
                         }
                     }
-                    "gold" == shopItem.currency -> InsufficientGoldDialog(context)
+                    "gold" == shopItem.currency -> InsufficientGoldDialog(context).show()
                     "gems" == shopItem.currency -> {
                         Analytics.sendEvent("show insufficient gems modal", EventCategory.BEHAVIOUR, HitType.EVENT, mapOf("reason" to "purchase modal", "item" to shopItem.key))
-                        parentActivity?.let { activity -> InsufficientGemsDialog(activity, shopItem.value) }
+                        val subscriptionBottomSheet = SubscriptionBottomSheetFragment()
+                        parentActivity?.let { activity ->
+                            subscriptionBottomSheet.show(activity.supportFragmentManager, SubscriptionBottomSheetFragment.TAG)
+                        }
                     }
-                    "hourglasses" == shopItem.currency -> InsufficientHourglassesDialog(context)
+                    "hourglasses" == shopItem.currency -> InsufficientHourglassesDialog(context).show()
                     else -> null
-                }?.show()
+                }
                 return
             }
         }

From 3cffe385a4875f4a9c278148d57497b770aee8dd Mon Sep 17 00:00:00 2001
From: Hafizzle <hafizbhamidi@gmail.com>
Date: Fri, 8 Sep 2023 11:42:47 -0400
Subject: [PATCH 2/2] color updates

---
 Habitica/res/layout/fragment_bottomsheet_subscription.xml      | 3 +++
 .../ui/fragments/purchases/SubscriptionBottomSheetFragment.kt  | 3 +--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Habitica/res/layout/fragment_bottomsheet_subscription.xml b/Habitica/res/layout/fragment_bottomsheet_subscription.xml
index e0e7dc288..d8c025b31 100644
--- a/Habitica/res/layout/fragment_bottomsheet_subscription.xml
+++ b/Habitica/res/layout/fragment_bottomsheet_subscription.xml
@@ -3,6 +3,7 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
+    app:cardBackgroundColor="@color/window_background"
     android:layout_height="match_parent">
 
     <androidx.core.widget.NestedScrollView
@@ -71,6 +72,7 @@
                         <TextView
                             style="@style/Title1"
                             android:layout_width="wrap_content"
+                            android:textColor="@color/white"
                             android:layout_height="wrap_content"
                             android:fontFamily="sans-serif-medium"
                             android:text="@string/buy_gems_with_gold" />
@@ -80,6 +82,7 @@
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:fontFamily="sans-serif-medium"
+                            android:textColor="@color/white"
                             android:text="SUBSCRIBER BENEFIT" />
 
 
diff --git a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
index bdfd8c55b..1605a699b 100644
--- a/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
+++ b/Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
@@ -110,8 +110,7 @@ class SubscriptionBottomSheetFragment : BottomSheetDialogFragment() {
                     context?.getString(R.string.subscribe_listitem3_description_new, it.text)
             }
         }
-
-        binding.benefitArmoireWrapper.isVisible = appConfigManager.enableArmoireSubs()
+        
         binding.benefitFaintWrapper.isVisible = appConfigManager.enableFaintSubs()
 
         Analytics.sendNavigationEvent("subscription screen")