From e2babe8053a778b64d51bd3d18866e69fb326a3c Mon Sep 17 00:00:00 2001
From: Kalista Payne <sabrecat@gmail.com>
Date: Mon, 30 Sep 2024 16:45:29 -0500
Subject: [PATCH] feat(subscription): max Gems progress readout

---
 website/client/src/assets/images/confetti.png | Bin 0 -> 3294 bytes
 .../client/src/assets/scss/typography.scss    |  16 +++
 .../src/components/settings/subscription.vue  | 116 ++++++++++++++----
 .../settings/subscriptionOptions.vue          |  33 +++--
 website/common/locales/en/subscriber.json     |   1 +
 5 files changed, 129 insertions(+), 37 deletions(-)
 create mode 100644 website/client/src/assets/images/confetti.png

diff --git a/website/client/src/assets/images/confetti.png b/website/client/src/assets/images/confetti.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2bcbc52e35b00cc3a6732a39a9bbf7356321aa0
GIT binary patch
literal 3294
zcmV<43?cK0P)<h;3K|Lk000e1NJLTq007GX002q|1^@s66&IjR00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH40B0DK~#7F?VVe2
zlgAau&)HA13AI8d!;9U?LkIln;}tO>=>T@pBqYRkOi38aKrTaTH)&}Spp!?NzA=O8
zOlT5h%9N``62M?N7YG-D-N_B{SR~mr!$ZvrQ)ujjSkmt4Sz(AFws0CtmgN1-$jJJZ
z(arxox7|GehMeF%)YUcb(8uLqC|Cp-asnwjFJZV53<Zl3OO6mOD};nKU?^BzV8{)G
zgHQxGCwAMZ1bWG`1}-jL6@h7l5las69ywB>QmIz<#k!%ukxKZ4o2rSFU3p^9;MJkz
zsw?$ti((?U8wiH1;dF+oL6M&beTXU;UGYpC6cP3(djgUme({Oti|T!ihp{YKz`OH^
z2WN>bAi<W3f?`l@jIOOOy4hDL=;leF3Z@B0ELi|&x%^5g4-U$@z9JOKO;A8N;`GT8
znQT}#K=2VlN34j2qG6%fBvl-y2}Ug0K+$C&s(@mL<Pe}WErNTE5lc33VMqw8LB}po
z#Hgf-2#fr4j_vo&JG-~s+q<)<-*3^0#W`@op11exlrAfYF0Y9wkO#zlGs>Wd>0kCz
zh-0&Ev}B7)$nMm4RudE;-rj8$b3fe{n)BJVjIY0FQpeul@d`|d7QSn<GtDy`g#oN^
zboC<zU)wNb4{z^gkF;iXNTjeuR4ow0@rV96W-7cW#Nzz@bTzoBg{$P<lytWPT=9^*
z%r68~vv7XKL(XuX^GtNj<6$ruM!^=P6%oq&9$MG@K=0;?QumAi|INg%C9ZF}vgnQ5
z;<17ki?iosEx)<-d}|xaia5JY`M{mzF`^1&YEyL0Q(-U|n99%J@)M9hX}Oy(Eoi>1
zAJdjbxl03tqRcHyn=gz!t||PO1)&VMiaegX6@Bs1NOaZGR?bj$gD9Cc1vEoubezH&
z%O=iJY`ru}5HYqUeG6Y}<ZI`Xl-NG+T;NvxTkv9`L}@n*#&&ic^JN^!J}IE827`f7
z76uehu>axL!((0VU-)V(k@_I1h6BI&{I9lttl-5GTf1mb$0}fzG-Mjb)+IuO<m|tT
zs0>BVoPWHvfq0(1_|UrcOye#-_-Z@5Y2B8P0sVV%q>f8mA%5@G-krVU=K0gvGN5lb
z&@bv*fFUz;KYgbf1yv>8?&gV%=j@mc^3#ESQHUkluvjm-IFIgx|ITY#K+eA78&F{v
z`=Mb<3{R^)7=}AZ=^vh%6Bs!X*EF)Y(iW(AijorA36=k*bxDh4|EVT%&v#vl&_-2S
z8(sZGTd}X#GGwOz;dNm|3MNy@+k*G8kZ#o^3C{KTUP~vBifTWLv-e~N{}TcW^!ltO
zo)zLCRJ)E>pg?dAAGS$|%dvVR>TIIxD;&bw|4m(Q*7cNm=l)WjNR?J7N>#W7lqpo~
zwxd5ORPCh&ucxzR#U&P9a{*}KcQwFj*;;5tNayI$CeFa5mt3HLK}j->DE=(~`#>b)
z=&}YbJh|dB7$$|v&$jX8isdXC4^ON*V|tkdGKh!+oH-pNMG;OT-zrHI-A+ko_X#`t
z!ea%wY~1eb3=mQ1>eZ`fX5W9modQ`QfNUXz&1p^#f1S2vspe?SN)vZY5)P+@(Mk?p
z7_lCP0>L@j8F0D|k9z`)-Sz$!r|X~}3{!&HDVawo1s(}F{tQPjB*CP<rwSvM{34?e
z1c*U(mobLyk@M8Cv!kaP3}b=_Wp1KzvtSB=Q=JM7Q$tS0!nKbIu&^alrF}Z1h&(v+
zhhp&_30Bx$2Rn#lg_RN=V3-ne>W0PEE*fzD*5eVSq<0V&TphuA_rom;$;+|Bpb!*^
zK36ko=Vf`1=q<<u>N_!X+jD+!*j6dk280nogKZa9OpgQY@{ydRj<qEbB{Rw>G295G
zs-nMHTn7b+^M0s$)G@4^BtTc+%9?hVB<#+EA+)SAuC+w;jy?W*JX`~4Qc4B;o_TiC
zp2zV2kyWv1w~LEBEnM)?D}A|401<H0*60h13;y^V=e=$p2+<OKcG;u~-|6i1DM9l&
zG<gIqDCaMzEn4?$vo$&o$f_HL3b(K)9wC7n(@W`#2$HGGfUZeD?kKu^xh^>B+YT_~
z71<5&5p0}69mOUT4O*^p9lL;G+K^qb5X9*^7UgEEv}G|&E3zsU610)7;u$DHV*dI8
z5J=9u-Ddg8G{Ll-_z5`ghH5z;TaQRXiqjWDh;z{uPj3Q4QDVgM6Pdm9h-bFPWuv7?
zT~mE#bD6<lFc=I5gTY`h7^VUf;2Wkbb3c8v77=R*$R{i-^q=9Ot#=*<J{r@^$S`do
zM89q|;X=_Um9p<Eow+{Kcw<=%21cJ}Y#{}%CBCg2&$<}PVlXgYE&M}V0S&Ts8FzV>
z*@JH|j9`%r5?bpkzkIWtOUxDQcKQ1sd~Lza>&CJe3?uX{d_5>rsU7-|dHp*noY3Ln
z27|$1Fc=I5gTY`h7z_r3!C){L3<iV2Fe#XYl+y(JqhNr5JeCk0cuz8NVaXbEl+%yI
zh-Dg3`C+gLkZM4Qb`(@gq<m;W$ht?h7n*3iy_?e=7-AXron(u=7t77|6vcR|WiHU|
zDyRgG4vSRXr6+F)LqDcURSOcu<I7f0S|@;P;_cn(Nm0^oAvP#bcn!X;yOLwU<n=;I
z@6O{D=t_3*?ex4or`ny}r)x}ammf(9Zs(uvH-(~!)%ynsRFDv>AkWbvsqER&q)2wL
zb(}9r{s}?EX3?yiA8zP!-ud!0vV9?fFnv9|HTFjS%;0F1`hnyC$y75~Ruu_sLU*Fo
z*>^GwQiP)~JYr6l&wzHnbf2)kW&R%=GHwkgB5KBrirGhYdal&xU(XjU62+E8kz!HE
zI9rpA7Z<&f?$SJ`=WRgLht5Mz+i;+FbFT+I_t+rR1_2cQ=kFfOi#{M}t75sk(6VYT
ztXXnvR@AM#Sw*${0ak+$WvucrfI3rXJ@2#44fhL=CJ9!3^>o9SEj}tg+SkFpMMvM#
z)p<4P%nfg^MN2gC1g;2Ef4;c*l^?V+uk77^nuWA+tZUiAHDXC3&h{^YJPXx8o?yA$
zdR7dL7K&!1$G!Hm+ve>(J72<Zod8_#?D@owKL2>mgzg;d_7gzb6;Mic_pN*;ubK_9
zP+Fu)9r&td^|-xokRT!nynHt=#Nzbqwj~X>5eHK|83y{7ygdHvA{FGxvWf5IY|qK)
zn57(KezZ_<cJ=ra;1U#8#y>z7()swB$6Gl~fj~F_xkR_&rsP)6DsAF)tUuk{C{J*X
zz2_q$pF&qC(>R5sJB;N`+@ffBBN3kKU))^RxA^6Z0v1>r<S%{x?2+tPF8E$7k}3dI
zUUcLliE(}Q2FEIQZ5HJ0KjqUyDK(VS)B2+;YufvtTON)suZge&-3=C0L!Lm_OXBR)
zhf5H)q|?UZ;BvbMP*0Ni0%D9kuc3(yjV)R`$YMD^3-4`!9Pzza1P*c#ofjWmI!#Q1
zXBMo!>tH20eu2o89>|?a#@T<iAy0_a*AK>*HEfhp?Er#W??)Y7&anfxx!5|Uktx|m
zdDLM{0)$!QOC~yADQM?7dsVKi%Pp}`DiP#oU*H73=;B*I2mUan$S^zAwV6`I-r#Yz
zhN1?+J*Dvim10;Rc%4Jt8=THAzkR4{i#}Z+rkMWP#!%nW{#u!W9ZFJj<;TIJ+C|gX
zXolQE3S)gsSLIEt<wBu7o1f1+yLUp9_Ko0P4BSg)If=Dzi6ypf(LnU&g|#59O^}em
zsZJqBUwo9^8xcb*F>XE`ldc-hhDGj70^}M!lT$)9vcPS2ynTWL=PP;CdP0i^6W=!S
zWcY!kR6u9JI5sG=64&#pmrUBV;_ox1zNw!0|59N~Ouz$~1oFCq@9g4ug#B(xmDG(@
z!FTqZ2thL07JccdFc>C8x_a-Ts)S31M;9vd1zmvT<Vg)r<J~Tr5z4e2M=yOLytj!H
z6;=Jed?oAc;`4sFi?jPAXLLm1&H|*f=VUD*{5H1cS6Tm%47p`)57${(FeJdoiB5L4
zFeLEmnbGUPoX_6&NeQidcOW6H)=Nv8vo8Gn7t7w0T*VjK6+6SPHUe%r5N&uY?(97k
zV7DT~br(~`FH#=p-BwXbZXe#LXL(sTT@pmMB~&#hRBHIv{;$Qq4?>P8h*ihhif~qk
z15>nhyKqi%bJ|cZ(sBEzI$km42B)XpPJwI$ZEX|{Bq%r5WHbf0L|<peIOw-Ymc-3U
cWJ50bA4BC_2K=I?mH+?%07*qoM6N<$g6knC0{{R3

literal 0
HcmV?d00001

diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss
index 0b495912d7..59b206aafd 100644
--- a/website/client/src/assets/scss/typography.scss
+++ b/website/client/src/assets/scss/typography.scss
@@ -87,6 +87,10 @@ h4 {
   opacity: 0.75;
 }
 
+.bg-gray-100 {
+  background-color: $gray-100 !important;
+}
+
 .bg-gray-300 {
   background-color: $gray-300 !important;
 }
@@ -103,6 +107,18 @@ h4 {
   background-color: $green-10 !important;
 }
 
+.bg-green-100 {
+  background-color: $green-100 !important;
+}
+
+.bg-purple-100 {
+  background-color: $purple-100 !important;
+}
+
+.bg-purple-300 {
+  background-color: $purple-300 !important;
+}
+
 .bg-white {
   background-color: $white !important;
 }
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 5c407aaf6a..685430c6a0 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -37,7 +37,30 @@
         </div>
         <div class="d-flex justify-content-center">
           <div class="d-flex flex-column mr-4">
-            <div class="d-flex mb-3 align-items-center">
+            <div
+              v-if="gemCap > 24"
+              class="w-100 green-gradient mb-3 text-center"
+            >
+              <div class='cap-readout bg-purple-300'>
+                <div
+                  v-once
+                  class="svg-icon svg-gems"
+                  v-html="icons.subscriberGems"
+                ></div>
+                <div class="white label"> {{ $t('gemCap') }}</div>
+                <div class="white readout"> {{ gemCap }} / 50</div>
+                <div class="progress-bar bg-purple-100">
+                  <div
+                    class="progress-fill h-100 bg-green-100"
+                    :style="`width: ${gemCap / 50 * 100}%`"
+                  >
+                  </div>
+                </div>
+                <img src="~@/assets/images/confetti.png">
+              </div>
+              <small class="teal-1">{{ $t('resubscribeToPickUp') }}</small>
+            </div>
+            <div v-else class="d-flex mb-3 align-items-center">
               <div class="sub-benefit bg-gray-600 d-flex mr-4">
                 <div
                   v-once
@@ -221,14 +244,14 @@
           </div>
           <div
             v-else-if="hasCanceledSubscription"
-            class="d-flex flex-column align-items-center mt-4"
+            class="d-flex flex-column align-items-center"
           >
-            <div class="round-container bg-gray-300
+            <div class="round-container bg-gray-100
               d-flex align-items-center justify-content-center"
             >
               <div
                 v-once
-                class="svg-icon svg-close"
+                class="svg svg-icon svg-close color white"
                 v-html="icons.closeIcon"
               ></div>
             </div>
@@ -236,12 +259,12 @@
               {{ $t('subscriptionCanceled') }}
             </h2>
             <div
-              class="w-75 text-center mb-4"
+              class="text-center mb-4"
               v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
             >
             </div>
             <h2>{{ $t('readyToResubscribe') }}</h2>
-            <subscription-options class="w-100 mb-2" />
+            <subscription-options class="w-100 mb-4" :canceled="true"/>
           </div>
           <div
             v-if="hasSubscription"
@@ -415,6 +438,50 @@
     border-radius: 8px;
   }
 
+  .cap-readout {
+    height: 76px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    position: relative;
+
+    img {
+      position: absolute;
+      top: 2px;
+      right: 3px;
+    }
+
+    .label {
+      left: 92px;
+    }
+
+    .progress-bar {
+      position: absolute;
+      top: 42px;
+      left: 92px;
+      width: 330px;
+      height: 12px;
+      border-radius: 99px;
+    }
+
+    .readout {
+      right: 22px;
+    }
+
+    .svg-gems {
+      position: absolute;
+      left: 14px;
+      top: 14px;
+    }
+
+    .white {
+      position: absolute;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 1.2;
+      top: 14px;
+    }
+  }
+
   .disabled {
     opacity: 0.64;
 
@@ -444,6 +511,19 @@
     }
   }
 
+  .green-gradient {
+    background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
+    padding: 2px 2px 0px 2px;
+    border-radius: 8px;
+    height: 108px;
+
+    .teal-1 {
+      position: relative;
+      font-weight: 700;
+      top: 4px;
+    }
+  }
+
   .header-mid {
     width: 347px;
   }
@@ -583,18 +663,8 @@
   }
 
   .svg-close {
-    width: 26px;
-    height: 26px;
-
-    & ::v-deep svg path {
-      stroke: $white;
-      stroke-width: 3;
-    }
-  }
-
-  .svg-credit-card {
-    width: 21.3px;
-    height: 16px;
+    width: 32px;
+    height: 32px;
   }
 
   .svg-food {
@@ -684,7 +754,6 @@ import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
 import calendarIcon from '@/assets/svg/calendar-purple.svg';
 import checkmarkIcon from '@/assets/svg/check.svg';
 import closeIcon from '@/assets/svg/close.svg';
-import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
 import dividerStars from '@/assets/svg/divider-stars.svg';
 import gemIcon from '@/assets/svg/gem.svg';
 import giftBox from '@/assets/svg/gift-purple.svg';
@@ -735,7 +804,6 @@ export default {
         calendarIcon,
         checkmarkIcon,
         closeIcon,
-        creditCardIcon,
         dividerStars,
         gemIcon,
         giftBox,
@@ -846,22 +914,22 @@ export default {
         case this.paymentMethods.AMAZON_PAYMENTS:
           return {
             icon: this.icons.amazonPayLogo,
-            class: 'svg-amazon-pay mt-3',
+            class: 'svg-amazon-pay',
           };
         case this.paymentMethods.APPLE:
           return {
             icon: this.icons.applePayLogo,
-            class: 'svg-apple-pay mt-4',
+            class: 'svg-apple-pay',
           };
         case this.paymentMethods.GOOGLE:
           return {
             icon: this.icons.googlePayLogo,
-            class: 'svg-google-pay mt-4',
+            class: 'svg-google-pay',
           };
         case this.paymentMethods.PAYPAL:
           return {
             icon: this.icons.paypalLogo,
-            class: 'svg-paypal mt-4',
+            class: 'svg-paypal',
           };
         case this.paymentMethods.STRIPE:
           return {
diff --git a/website/client/src/components/settings/subscriptionOptions.vue b/website/client/src/components/settings/subscriptionOptions.vue
index 53ec52ece5..791f9e46d7 100644
--- a/website/client/src/components/settings/subscriptionOptions.vue
+++ b/website/client/src/components/settings/subscriptionOptions.vue
@@ -1,14 +1,18 @@
 <template>
   <div id="subscription-form">
-    <div class="mb-3 w-100 h-100">
+    <div class="w-100 h-100">
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
       <div
         v-for="block in subscriptionBlocksOrdered"
         v-if="block.target !== 'group' && block.canSubscribe === true"
         :key="block.key"
         :value="block.key"
-        class="subscribe-option mb-2 d-flex"
-        :class="{selected: subscription.key === block.key, final: block.months === 12}"
+        class="subscribe-option d-flex"
+        :class="{
+          selected: subscription.key === block.key,
+          'mb-2': block.months !== 12,
+          final: block.months === 12,
+        }"
         @click="updateSubscriptionData(block.key)"
       >
         <div
@@ -129,9 +133,11 @@
         </div>
       </div>
     </div>
-    <div class="mx-4 mb-4 text-center">
+    <div
+      v-if="note"
+      class="mx-4 mb-4 text-center"
+    >
       <small
-        v-if="note"
         v-once
         class="font-italic"
       >
@@ -151,6 +157,7 @@
     <button
       v-else
       class="btn btn-primary w-100"
+      :class="canceled ? 'mt-4' : 'mt-3'"
       @click="$root.$emit('bv::show::modal', 'buy-subscription')"
     > {{ $t('subscribe') }} </button>
     <b-modal
@@ -234,13 +241,9 @@
     line-height: 24px;
   }
 
-  .gradient-banner {
-    padding-left: 100px;
-    padding-right: 100px;
-
-    small {
-      color: $teal-1;
-    }
+  .gradient-banner small {
+    color: $teal-1;
+    width: 61%;
   }
 
   .ribbon {
@@ -266,7 +269,7 @@
   }
 
   .subscribe-option {
-    width: 448px;
+    max-width: 448px;
     height: 120px;
     border-radius: 8px;
     box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
@@ -331,6 +334,10 @@ export default {
       type: String,
       default: '',
     },
+    canceled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index a6ed9a7a22..3e53f42fe7 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -230,6 +230,7 @@
     "subMonths": "Months Subscribed",
     "needToUpdateCard": "Need to update your card?",
     "readyToResubscribe": "Are you ready to resubscribe?",
+    "resubscribeToPickUp": "Resubscribe to pick up where you left off!",
     "cancelYourSubscription": "Need to cancel your subscription?",
     "cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica.",
     "sendAGift": "Send Gift",