diff --git a/common/locales/en/subscriber.json b/common/locales/en/subscriber.json
index dcaf660735..6ac584486a 100644
--- a/common/locales/en/subscriber.json
+++ b/common/locales/en/subscriber.json
@@ -65,6 +65,7 @@
"buyGemsAllow2": "more Gems this month",
"purchaseGemsSeparately": "Purchase Additional Gems",
"subFreeGemsHow": "Habitica players can earn Gems for free by winning challenges that award Gems as a prize, or as a contributor reward by helping the development of Habitica.",
+ "seeSubscriptionDetails": "Go to Settings > Subscription to see your subscription details!",
"timeTravelers": "Time Travelers",
"timeTravelersTitleNoSub": "<%= linkStartTyler %>Tyler<%= linkEnd %> and <%= linkStartVicky %>Vicky<%= linkEnd %>",
"timeTravelersTitle": "Mysterious Time Travelers",
diff --git a/website/public/css/shared.styl b/website/public/css/shared.styl
index b14355f9c3..fbea14566c 100644
--- a/website/public/css/shared.styl
+++ b/website/public/css/shared.styl
@@ -110,3 +110,6 @@ li.spaced
.text-right
text-align: right
+
+.reduce-top-margin
+ margin-top: -10px
diff --git a/website/views/options/settings.jade b/website/views/options/settings.jade
index 13458c0a68..aad9b8b476 100644
--- a/website/views/options/settings.jade
+++ b/website/views/options/settings.jade
@@ -328,9 +328,9 @@ script(id='partials/options.settings.notifications.html', type="text/ng-template
script(id='partials/options.settings.subscription.html',type='text/ng-template')
//-h2=env.t('individualSub')
.container-fluid(ng-init='_subscription={key:"basic_earned"}')
+ h3= env.t('benefits')
.row
.col-md-6
- h3= env.t('benefits')
+subPerks()
.col-md-6
@@ -354,7 +354,7 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template')
li #{env.t('mysticHourglasses')} {{user.purchased.plan.consecutive.trinkets}}
div(ng-if='!user.purchased.plan.customerId || (user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')
h4(ng-if='(user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')= env.t("resubscribe")
- .form-group
+ .form-group.reduce-top-margin
.radio(ng-repeat='block in Content.subscriptionBlocks | toArray | omit: "discount==true" | orderBy:"months"')
label
input(type="radio", name="subRadio", ng-value="block.key", ng-model='_subscription.key')
@@ -370,19 +370,20 @@ script(id='partials/options.settings.subscription.html',type='text/ng-template')
input.form-control(type='text', ng-model='_subscription.coupon', placeholder= env.t('couponPlaceholder'))
.form-group
button.pull-right.btn.btn-small(type='button',ng-click='applyCoupon(_subscription.coupon)')= env.t("apply")
-
- p.resubscribe
- small.muted=env.t('subscribeUsing')
- a.purchase.btn.btn-primary(ng-click='Payments.showStripe({subscription:_subscription.key, coupon:_subscription.coupon})', ng-disabled='!_subscription.key')= env.t('card')
- .container-fluid.slight-vertical-padding
- .row.text-center
- .col-xs-6
- a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{user.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}', ng-disabled='!_subscription.key')
- img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal'))
- .col-xs-6
- a.purchase(ng-click="Payments.amazonPayments.init({type: 'subscription', subscription:_subscription.key, coupon:_subscription.coupon})")
- img(src='https://payments.amazon.com/gp/cba/button',alt=env.t('amazonPayments'))
div(ng-if='user.purchased.plan.customerId')
.btn.btn-primary(ng-if='!user.purchased.plan.dateTerminated && user.purchased.plan.paymentMethod=="Stripe"', ng-click='Payments.showStripeEdit()')=env.t('subUpdateCard')
.btn.btn-sm.btn-danger(ng-if='!user.purchased.plan.dateTerminated', ng-click='Payments.cancelSubscription()')=env.t('cancelSub')
+
+ .container-fluid.slight-vertical-padding(ng-if='!user.purchased.plan.customerId || (user.purchased.plan.customerId && user.purchased.plan.dateTerminated)')
+ small.muted=env.t('subscribeUsing')
+ .row.text-center
+ .col-xs-4
+ a.purchase.btn.btn-primary(ng-click='Payments.showStripe({subscription:_subscription.key, coupon:_subscription.coupon})', ng-disabled='!_subscription.key')= env.t('card')
+ .col-xs-4
+ a.purchase(href='/paypal/subscribe?_id={{user._id}}&apiToken={{user.apiToken}}&sub={{_subscription.key}}{{_subscription.coupon ? "&coupon="+_subscription.coupon : ""}}', ng-disabled='!_subscription.key')
+ img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png',alt=env.t('paypal'))
+ .col-xs-4
+ a.purchase(ng-click="Payments.amazonPayments.init({type: 'subscription', subscription:_subscription.key, coupon:_subscription.coupon})")
+ img(src='https://payments.amazon.com/gp/cba/button',alt=env.t('amazonPayments'))
+
diff --git a/website/views/shared/modals/buy-gems.jade b/website/views/shared/modals/buy-gems.jade
index ae39d52467..6655da5c53 100644
--- a/website/views/shared/modals/buy-gems.jade
+++ b/website/views/shared/modals/buy-gems.jade
@@ -47,6 +47,7 @@ script(id='modals/buyGems.html', type='text/ng-template')
p=env.t('buyGemsAllow1')
| {{Shared.planGemLimits.convCap + User.user.purchased.plan.consecutive.gemCapExtra - User.user.purchased.plan.gemsBought}}
=env.t('buyGemsAllow2')
+ p!=env.t('seeSubscriptionDetails')
div(ng-if='user.purchased.plan.customerId')
.well
h3=env.t('purchaseGemsSeparately')
@@ -70,5 +71,7 @@ script(id='modals/buyGems.html', type='text/ng-template')
h3=env.t('becomeSubscriber')
div(ng-include="'partials/options.settings.subscription.html'")
+ div(ng-if='user.purchased.plan.customerId').pull-left
+ p!=env.t('seeSubscriptionDetails')
.text-right
button.btn.btn-default(ng-click='$close()')=env.t('close')