diff --git a/package-lock.json b/package-lock.json
index a2f6701509..60279ec0e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,15 +68,6 @@
         "@types/mime": "1.3.1"
       }
     },
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "abbrev": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
@@ -2334,9 +2325,9 @@
       "resolved": "https://registry.npmjs.org/browser-pack/-/browser-pack-6.0.2.tgz",
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "requires": {
-        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
+        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -2366,7 +2357,6 @@
       "resolved": "https://registry.npmjs.org/browserify/-/browserify-12.0.2.tgz",
       "integrity": "sha1-V/IeXm4wj/WYfE2v1EhAsrmPehk=",
       "requires": {
-        "JSONStream": "1.3.1",
         "assert": "1.3.0",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -2388,6 +2378,7 @@
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
         "isarray": "0.0.1",
+        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.1.2",
@@ -7398,6 +7389,13 @@
             }
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -7407,13 +7405,6 @@
             "strip-ansi": "3.0.1"
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -10362,10 +10353,10 @@
       "resolved": "https://registry.npmjs.org/insert-module-globals/-/insert-module-globals-7.0.1.tgz",
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "requires": {
-        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
+        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -11358,6 +11349,15 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk="
     },
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -13257,7 +13257,6 @@
       "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-4.1.1.tgz",
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "requires": {
-        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -13265,6 +13264,7 @@
         "detective": "4.5.0",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
+        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.0.6",
         "resolve": "1.4.0",
@@ -17234,6 +17234,22 @@
         }
       }
     },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
+      "requires": {
+        "resolve-from": "2.0.0",
+        "semver": "5.4.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.4.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
+          "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
+        }
+      }
+    },
     "require-again": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/require-again/-/require-again-2.0.0.tgz",
@@ -17273,22 +17289,6 @@
         }
       }
     },
-    "require_optional": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
-      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
-      "requires": {
-        "resolve-from": "2.0.0",
-        "semver": "5.4.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.4.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
-          "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
-        }
-      }
-    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -18655,6 +18655,11 @@
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "string-length": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-0.1.2.tgz",
@@ -18688,11 +18693,6 @@
         "strip-ansi": "3.0.1"
       }
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-    },
     "stringify-object": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-1.0.1.tgz",
diff --git a/website/client/app.vue b/website/client/app.vue
index 5e15471a20..38217429e1 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -90,7 +90,6 @@ export default {
   },
   data () {
     return {
-      isUserLoaded: false,
       selectedItemToBuy: null,
       selectedCardToBuy: null,
 
@@ -101,7 +100,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(['isUserLoggedIn', 'browserTimezoneOffset']),
+    ...mapState(['isUserLoggedIn', 'browserTimezoneOffset', 'isUserLoaded']),
     ...mapState({user: 'user.data'}),
     isStaticPage () {
       return this.$route.meta.requiresLogin === false ? true : false;
@@ -194,7 +193,7 @@ export default {
         this.$store.dispatch('user:fetch'),
         this.$store.dispatch('tasks:fetchUserTasks'),
       ]).then(() => {
-        this.isUserLoaded = true;
+        this.$store.state.isUserLoaded = true;
         Analytics.setUser();
         Analytics.updateUser();
 
diff --git a/website/client/components/appFooter.vue b/website/client/components/appFooter.vue
index c2d894748e..15334be709 100644
--- a/website/client/components/appFooter.vue
+++ b/website/client/components/appFooter.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .row
-  buy-gems-modal
-  modify-inventory
+  buy-gems-modal(v-if="isUserLoaded")
+  modify-inventory(v-if="isUserLoaded")
   footer.container-fluid
     .row
       .col-2
@@ -74,32 +74,32 @@
         .row
           .col-10 {{ $t('donateText3') }}
           .col-2
-            button.btn.btn-donate(@click='donate()')
-              .svg-icon.heart(v-html='icons.heart')
+            button.btn.btn-donate(@click="donate()")
+              .svg-icon.heart(v-html="icons.heart")
               .text {{ $t('companyDonate') }}
     .row
       hr.col-12
     .row
       .col-4
         | © 2017 Habitica. All rights reserved.
-        .debug.float-left(v-if='!IS_PRODUCTION')
-          button.btn.btn-primary(@click='debugMenuShown = !debugMenuShown') Toggle Debug Menu
-          .debug-group(v-if='debugMenuShown')
-            a.btn.btn-default(@click='setHealthLow()') Health = 1
-            a.btn.btn-default(@click='addMissedDay(1)') +1 Missed Day
-            a.btn.btn-default(@click='addMissedDay(2)') +2 Missed Days
-            a.btn.btn-default(@click='addMissedDay(8)') +8 Missed Days
-            a.btn.btn-default(@click='addMissedDay(32)') +32 Missed Days
-            a.btn.btn-default(@click='addTenGems()') +10 Gems
-            a.btn.btn-default(@click='addHourglass()') +1 Mystic Hourglass
-            a.btn.btn-default(@click='addGold()') +500GP
-            a.btn.btn-default(@click='plusTenHealth()') + 10HP
-            a.btn.btn-default(@click='addMana()') +MP
-            a.btn.btn-default(@click='addLevelsAndGold()') +Exp +GP +MP
-            a.btn.btn-default(@click='addOneLevel()') +1 Level
-            a.btn.btn-default(@click='addQuestProgress()' tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
-            a.btn.btn-default(@click='makeAdmin()') Make Admin
-            a.btn.btn-default(@click='openModifyInventoryModal()') Modify Inventory
+        .debug.float-left(v-if="!IS_PRODUCTION && isUserLoaded")
+          button.btn.btn-primary(@click="debugMenuShown = !debugMenuShown") Toggle Debug Menu
+          .debug-group(v-if="debugMenuShown")
+            a.btn.btn-default(@click="setHealthLow()") Health = 1
+            a.btn.btn-default(@click="addMissedDay(1)") +1 Missed Day
+            a.btn.btn-default(@click="addMissedDay(2)") +2 Missed Days
+            a.btn.btn-default(@click="addMissedDay(8)") +8 Missed Days
+            a.btn.btn-default(@click="addMissedDay(32)") +32 Missed Days
+            a.btn.btn-default(@click="addTenGems()") +10 Gems
+            a.btn.btn-default(@click="addHourglass()") +1 Mystic Hourglass
+            a.btn.btn-default(@click="addGold()") +500GP
+            a.btn.btn-default(@click="plusTenHealth()") + 10HP
+            a.btn.btn-default(@click="addMana()") +MP
+            a.btn.btn-default(@click="addLevelsAndGold()") +Exp +GP +MP
+            a.btn.btn-default(@click="addOneLevel()") +1 Level
+            a.btn.btn-default(@click="addQuestProgress()", tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
+            a.btn.btn-default(@click="makeAdmin()") Make Admin
+            a.btn.btn-default(@click="openModifyInventoryModal()") Modify Inventory
       .col-4.text-center
         .logo
       .col-4.text-right
@@ -252,6 +252,7 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    ...mapState(['isUserLoaded']),
   },
   methods: {
     plusTenHealth () {
diff --git a/website/client/components/auth/registerLogin.vue b/website/client/components/auth/registerLogin.vue
index ac3d7ae466..e6dca8efcf 100644
--- a/website/client/components/auth/registerLogin.vue
+++ b/website/client/components/auth/registerLogin.vue
@@ -301,6 +301,7 @@ export default {
       // @TODO do not reload entire page
       // problem is that app.vue created hook should be called again
       // after user is logged in / just signed up
+      // ALSO it's the only way to make sure language data is reloaded and correct for the logged in user
       window.location.href = '/';
     },
     async login () {
@@ -318,6 +319,7 @@ export default {
       // @TODO do not reload entire page
       // problem is that app.vue created hook should be called again
       // after user is logged in / just signed up
+      // ALSO it's the only way to make sure language data is reloaded and correct for the logged in user
       window.location.href = '/';
     },
     async socialAuth (network) {
diff --git a/website/client/components/notifications.vue b/website/client/components/notifications.vue
index 52fbfc4bf1..608aee349b 100644
--- a/website/client/components/notifications.vue
+++ b/website/client/components/notifications.vue
@@ -332,6 +332,9 @@ export default {
       }
     }, 1000),
     scheduleNextCron () {
+      // Reset the yesterDailies array
+      this.yesterDailies = [];
+
       // Open yesterdailies modal the next time cron runs
       const dayStart = this.user.preferences.dayStart;
       let nextCron = moment().hours(dayStart).minutes(0).seconds(0).milliseconds(0);
@@ -391,7 +394,6 @@ export default {
       this.handleUserNotifications(this.user.notifications);
       this.scheduleNextCron();
     },
-
     transferGroupNotification (notification) {
       if (!this.user.groupNotifications) this.user.groupNotifications = [];
       this.user.groupNotifications.push(notification);
diff --git a/website/client/components/payments/amazonModal.vue b/website/client/components/payments/amazonModal.vue
index bba90657ba..d7eea171d4 100644
--- a/website/client/components/payments/amazonModal.vue
+++ b/website/client/components/payments/amazonModal.vue
@@ -45,13 +45,10 @@ export default {
   mounted () {
     window.onAmazonLoginReady = () => {
       window.amazon.Login.setClientId(AMAZON_PAYMENTS.CLIENT_ID);
+      this.OffAmazonPayments = window.OffAmazonPayments;
+      this.isAmazonReady = true;
+      this.showButton();
     };
-
-    this.OffAmazonPayments = window.OffAmazonPayments;
-    this.isAmazonReady = true;
-    this.showButton();
-    // window.onAmazonPaymentsReady = () => {
-    // };
   },
   methods: {
     showButton () {
diff --git a/website/client/components/payments/buyGemsModal.vue b/website/client/components/payments/buyGemsModal.vue
index 686ad201cc..f887915824 100644
--- a/website/client/components/payments/buyGemsModal.vue
+++ b/website/client/components/payments/buyGemsModal.vue
@@ -110,7 +110,7 @@
                   .divider
                   p.benefits(v-markdown='$t("earnGemsMonthly", {cap:25})')
                   .spacer
-                  button.btn.btn-primary(@click='subscriptionPlan = "basic_earned"') {{ subscriptionPlan === "basic_earned" ? $t('select') : $t('selected') }}
+                  button.btn.btn-primary(@click='subscriptionPlan = "basic_earned"') {{ subscriptionPlan === "basic_earned" ? $t('selected') : $t('select') }}
               .card.text-center(:class='{active: subscriptionPlan === "basic_3mo"}')
                 .card-body
                   .subscription-price
@@ -121,7 +121,7 @@
                   .divider
                   p.benefits(v-markdown='$t("earnGemsMonthly", {cap:30})')
                   p.benefits(v-markdown='$t("receiveMysticHourglass")')
-                  button.btn.btn-primary(@click='subscriptionPlan = "basic_3mo"') {{ subscriptionPlan === "basic_3mo" ? $t('select') : $t('selected') }}
+                  button.btn.btn-primary(@click='subscriptionPlan = "basic_3mo"') {{ subscriptionPlan === "basic_3mo" ? $t('selected') : $t('select') }}
               .card.text-center(:class='{active: subscriptionPlan === "basic_6mo"}')
                 .card-body
                   .subscription-price
@@ -132,7 +132,7 @@
                   .divider
                   p.benefits(v-markdown='$t("earnGemsMonthly", {cap:35})')
                   p.benefits(v-markdown='$t("receiveMysticHourglasses", {amount:2})')
-                  button.btn.btn-primary(@click='subscriptionPlan = "basic_6mo"') {{ subscriptionPlan === "basic_6mo" ? $t('select') : $t('selected') }}
+                  button.btn.btn-primary(@click='subscriptionPlan = "basic_6mo"') {{ subscriptionPlan === "basic_6mo" ? $t('selected') : $t('select') }}
               .card.text-center(:class='{active: subscriptionPlan === "basic_12mo"}')
                 .card-body
                   .subscription-price
@@ -143,7 +143,7 @@
                   .divider
                   p.benefits(v-markdown='$t("earnGemsMonthly", {cap:45})')
                   p.benefits(v-markdown='$t("receiveMysticHourglasses", {amount:4})')
-                  button.btn.btn-primary(@click='subscriptionPlan = "basic_12mo"') {{ subscriptionPlan === "basic_12mo" ? $t('select') : $t('selected') }}
+                  button.btn.btn-primary(@click='subscriptionPlan = "basic_12mo"') {{ subscriptionPlan === "basic_12mo" ? $t('selected') : $t('select') }}
             .row.text-center
               h2.mx-auto.text-payment {{ $t('choosePaymentMethod') }}
             .row.text-center
diff --git a/website/client/components/payments/sendGemsModal.vue b/website/client/components/payments/sendGemsModal.vue
index 2914a8f45a..7deff4c720 100644
--- a/website/client/components/payments/sendGemsModal.vue
+++ b/website/client/components/payments/sendGemsModal.vue
@@ -1,9 +1,13 @@
 <template lang="pug">
 b-modal#send-gems(:title="title", :hide-footer="true", size='lg')
-  .modal-body(v-if='userReceivingGems', )
-    .panel.panel-default(:class="gift.type === 'gems' ? 'panel-primary' : 'transparent'", @click='gift.type = "gems"')
-      .panel-heading
-        .pull-right
+  .modal-body(v-if='userReceivingGems')
+    .panel.panel-default(
+      :class="gift.type === 'gems' ? 'panel-primary' : 'transparent'", 
+      @click='gift.type = "gems"'
+    )
+      // @TODO the panel does not exists in Bootstrap 4
+      h3.panel-heading.clearfix
+        .float-right
           span(v-if='gift.gems.fromBalance') {{ $t('sendGiftGemsBalance', {number: userLoggedIn.balance * 4}) }}
           span(v-if='!gift.gems.fromBalance') {{ $t('sendGiftCost', {cost: gift.gems.amount / 4}) }}
         | {{ $t('gemsPopoverTitle') }}
@@ -12,18 +16,21 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg')
           .col-md-6
             .form-group
               input.form-control(type='number', placeholder='Number of Gems',
-                min='0', :max='gift.gems.fromBalance ? userLoggedIn.balance * 4 : 0',
-                v-model='amount')
+                min='0', :max='gift.gems.fromBalance ? userLoggedIn.balance * 4 : 9999',
+                v-model='gift.gems.amount')
           .col-md-6
             .btn-group
-              a.btn.btn-default(:class="{active: gift.gems.fromBalance}", @click="gift.gems.fromBalance = true") {{ $t('sendGiftFromBalance') }}
-              a.btn.btn-default(:class="{active: !gift.gems.fromBalance}", @click="gift.gems.fromBalance = false") {{ $t('sendGiftPurchase') }}
+              button.btn.btn-secondary(:class="{active: gift.gems.fromBalance}", @click="gift.gems.fromBalance = true") {{ $t('sendGiftFromBalance') }}
+              button.btn.btn-secondary(:class="{active: !gift.gems.fromBalance}", @click="gift.gems.fromBalance = false") {{ $t('sendGiftPurchase') }}
         .row
           .col-md-12
-            p.small.muted {{ $t('gemGiftsAreOptional', assistanceEmailObject) }}
+            p.small(v-html="$t('gemGiftsAreOptional', assistanceEmailObject)")
 
-    .panel.panel-default(:class="gift.type=='subscription' ? 'panel-primary' : 'transparent'", @click='gift.type = "subscription"')
-      .panel-heading {{ $t('subscription') }}
+    .panel.panel-default(
+      :class="gift.type=='subscription' ? 'panel-primary' : 'transparent'", 
+      @click='gift.type = "subscription"'
+    )
+      h3.panel-heading {{ $t('subscription') }}
       .panel-body
         .form-group
           .radio(v-for='block in subscriptionBlocks', v-if="block.target !== 'group' && block.canSubscribe === true")
@@ -35,13 +42,37 @@ b-modal#send-gems(:title="title", :hide-footer="true", size='lg')
     //include ../formatting-help
 
   .modal-footer
-    button.btn.btn-primary(v-if='fromBal', ng-click='sendGift(profile._id)') {{ $t("send") }}
-    button.btn.btn-primary(v-if='!fromBal', ng-click='Payments.showStripe({gift:gift, uuid:profile._id})') {{ $t('card') }}
-    button.btn.btn-warning(v-if='!fromBal', ng-click='Payments.payPalPayment({gift: gift, giftedTo: profile._id})') PayPal
-    button.btn.btn-success(v-if='!fromBal', ng-click="Payments.amazonPayments.init({type: 'single', gift: gift, giftedTo: profile._id})") Amazon Payments
+    button.btn.btn-primary(v-if='fromBal', @click='sendGift()') {{ $t("send") }}
+    template(v-else)
+      button.btn.btn-primary(@click='showStripe({gift, uuid: userReceivingGems._id})') {{ $t('card') }}
+      button.btn.btn-warning(@click='openPaypalGift({gift: gift, giftedTo: userReceivingGems._id})') PayPal
+      button.btn.btn-success(@click="amazonPaymentsInit({type: 'single', gift, giftedTo: userReceivingGems._id})") Amazon Payments
     button.btn.btn-default(@click='close()') {{$t('cancel')}}
 </template>
 
+<style lang="scss">
+.panel {
+  margin-bottom: 4px;
+
+  &.transparent {
+    .panel-body {
+      opacity: 0.7;
+    }
+  }
+
+  .panel-heading {
+    margin-top: 8px;
+    margin-bottom: 5px;
+  }
+
+  .panel-body {
+    padding: 8px;
+    border-radius: 2px;
+    border: 1px solid #C3C0C7;
+  }
+}
+</style>
+
 <script>
 import toArray from 'lodash/toArray';
 import omitBy from 'lodash/omitBy';
@@ -49,20 +80,21 @@ import orderBy from 'lodash/orderBy';
 import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
 import planGemLimits from '../../../common/script/libs/planGemLimits';
-import subscriptionBlocksContent from 'common/script/content/subscriptionBlocks';
+import paymentsMixin from 'client/mixins/payments';
+import notificationsMixin from 'client/mixins/notifications';
 
 // @TODO: EMAILS.TECH_ASSISTANCE_EMAIL
-let TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
+const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
 
 export default {
   props: ['userReceivingGems'],
   components: {
     bModal,
   },
+  mixins: [paymentsMixin, notificationsMixin],
   data () {
     return {
       planGemLimits,
-      amount: 0,
       gift: {
         type: 'gems',
         gems: {
@@ -78,9 +110,12 @@ export default {
     };
   },
   computed: {
-    ...mapState({userLoggedIn: 'user.data'}),
+    ...mapState({
+      userLoggedIn: 'user.data',
+      originalSubscriptionBlocks: 'content.subscriptionBlocks',
+    }),
     subscriptionBlocks () {
-      let subscriptionBlocks = toArray(subscriptionBlocksContent);
+      let subscriptionBlocks = toArray(this.originalSubscriptionBlocks);
       subscriptionBlocks = omitBy(subscriptionBlocks, (block) => {
         return block.discount === true;
       });
@@ -97,6 +132,15 @@ export default {
     },
   },
   methods: {
+    // @TODO move to payments mixin or action (problem is that we need notifications)
+    async sendGift () {
+      await this.$store.dispatch('members:transferGems', {
+        message: this.gift.message,
+        toUserId: this.userReceivingGems._id,
+        gemAmount: this.gift.gems.amount,
+      });
+      this.text(this.$t('sentGems'));
+    },
     close () {
       this.$root.$emit('hide::modal', 'send-gems');
     },
diff --git a/website/client/components/settings/api.vue b/website/client/components/settings/api.vue
index 69ff0ff61f..84b17cbf1e 100644
--- a/website/client/components/settings/api.vue
+++ b/website/client/components/settings/api.vue
@@ -70,8 +70,6 @@ import { mapState } from 'client/libs/store';
 import uuid from '../../../common/script/libs/uuid';
 // @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL
 const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
-let AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
-AUTH_SETTINGS = JSON.parse(AUTH_SETTINGS);
 
 export default {
   data () {
@@ -83,9 +81,9 @@ export default {
     };
   },
   computed: {
-    ...mapState({user: 'user.data'}),
+    ...mapState({user: 'user.data', credentials: 'credentials'}),
     apiToken () {
-      return AUTH_SETTINGS.auth.apiToken;
+      return this.credentials.API_TOKEN;
     },
   },
   methods: {
diff --git a/website/client/components/settings/promoCode.vue b/website/client/components/settings/promoCode.vue
index ef6ace1f96..db25538a84 100644
--- a/website/client/components/settings/promoCode.vue
+++ b/website/client/components/settings/promoCode.vue
@@ -35,10 +35,10 @@ export default {
     };
   },
   computed: {
-    ...mapState({user: 'user.data'}),
+    ...mapState({user: 'user.data', credentials: 'credentials'}),
     getCodesUrl () {
       if (!this.user) return '';
-      return `/api/v3/coupons?_id=${this.user._id}&apiToken=${this.user.apiToken}`;
+      return `/api/v3/coupons?_id=${this.user._id}&apiToken=${this.credentials.API_TOKEN}`;
     },
   },
   methods: {
diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
index af4f896a96..1e8db4b84e 100644
--- a/website/client/components/settings/subscription.vue
+++ b/website/client/components/settings/subscription.vue
@@ -152,7 +152,7 @@ export default {
     },
   },
   computed: {
-    ...mapState({user: 'user.data'}),
+    ...mapState({user: 'user.data', credentials: 'credentials'}),
     subscriptionBlocksOrdered () {
       let subscriptions = filter(subscriptionBlocks, (o) => {
         return o.discount !== true;
@@ -273,7 +273,7 @@ export default {
 
       let queryParams = {
         _id: this.user._id,
-        apiToken: this.user.apiToken,
+        apiToken: this.credentials.API_TOKEN,
         noRedirect: true,
       };
 
@@ -290,18 +290,6 @@ export default {
     getCancelSubInfo () {
       return this.$t(`cancelSubInfo${this.user.purchased.plan.paymentMethod}`);
     },
-    payPalPayment (data) {
-      if (!this.checkGemAmount(data)) return;
-
-      let gift = this.encodeGift(data.giftedTo, data.gift);
-      let url = `/paypal/checkout?_id=${this.user._id}&apiToken=${this.user.apiToken}&gift=${gift}`;
-      axios.get(url);
-    },
-    encodeGift (uuid, gift) {
-      gift.uuid = uuid;
-      let encodedString = JSON.stringify(gift);
-      return encodeURIComponent(encodedString);
-    },
   },
 };
 </script>
diff --git a/website/client/mixins/notifications.js b/website/client/mixins/notifications.js
index 49716d6a59..a0f1524477 100644
--- a/website/client/mixins/notifications.js
+++ b/website/client/mixins/notifications.js
@@ -50,8 +50,8 @@ export default {
       let message = `${this.sign(val)} ${this.round(val)}`;
       this.notify(message, 'xp', 'glyphicon glyphicon-star', this.sign(val));
     },
-    error (error, canHide) {
-      this.notify(error, 'danger', 'glyphicon glyphicon-exclamation-sign', canHide);
+    error (error) {
+      this.notify(error, 'error', 'glyphicon glyphicon-exclamation-sign');
     },
     gp (val, bonus) {
       this.notify(`${this.sign(val)} ${this.coins(val - bonus)}`, 'gp', '', this.sign(val));
diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
index b2190ffb85..5ac87a7deb 100644
--- a/website/client/mixins/payments.js
+++ b/website/client/mixins/payments.js
@@ -1,35 +1,43 @@
 import axios from 'axios';
 
-let AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
-let API_TOKEN = '';
-let API_ID = '';
-if (AUTH_SETTINGS) {
-  AUTH_SETTINGS = JSON.parse(AUTH_SETTINGS);
-  API_ID = AUTH_SETTINGS.auth.apiId;
-  API_TOKEN = AUTH_SETTINGS.auth.apiToken;
-}
-
 const STRIPE_PUB_KEY = process.env.STRIPE_PUB_KEY; // eslint-disable-line
 import subscriptionBlocks from '../../common/script/content/subscriptionBlocks';
+import { mapState } from 'client/libs/store';
+import notificationsMixin from 'client/mixins/notifications';
 
 let StripeCheckout = window.StripeCheckout;
 
 export default {
+  mixins: [notificationsMixin],
   computed: {
+    ...mapState(['credentials']),
     paypalCheckoutLink () {
-      return `/paypal/checkout?_id=${API_ID}&apiToken=${API_TOKEN}`;
+      return `/paypal/checkout?_id=${this.credentials.API_ID}&apiToken=${this.credentials.API_TOKEN}`;
     },
     paypalSubscriptionLink () {
-      return `/paypal/subscribe?_id=${API_ID}&apiToken=${API_TOKEN}&sub=${this.subscriptionPlan}`;
+      return `/paypal/subscribe?_id=${this.credentials.API_ID}&apiToken=${this.credentials.API_TOKEN}&sub=${this.subscriptionPlan}`;
     },
     paypalPurchaseLink () {
       if (!this.subscription) return '';
       let couponString = '';
       if (this.subscription.coupon) couponString = `&coupon=${this.subscription.coupon}`;
-      return `/paypal/subscribe?_id=${API_ID}&apiToken=${API_TOKEN}&sub=${this.subscription.key}${couponString}`;
+      return `/paypal/subscribe?_id=${this.credentials.API_ID}&apiToken=${this.credentials.API_TOKEN}&sub=${this.subscription.key}${couponString}`;
     },
   },
   methods: {
+    encodeGift (uuid, gift) {
+      gift.uuid = uuid;
+      let encodedString = JSON.stringify(gift);
+      return encodeURIComponent(encodedString);
+    },
+    openPaypalGift (data) {
+      if (!this.checkGemAmount(data)) return;
+
+      let gift = this.encodeGift(data.giftedTo, data.gift);
+      const url = `/paypal/checkout?_id=${this.credentials.API_ID}&apiToken=${this.credentials.API_TOKEN}&gift=${gift}`;
+
+      window.open(url, '_blank');
+    },
     showStripe (data) {
       if (!this.checkGemAmount(data)) return;
 
@@ -56,7 +64,7 @@ export default {
         description: sub ? this.$t('subscribe') : this.$t('checkout'),
         image: '/apple-touch-icon-144-precomposed.png',
         panelLabel: sub ? this.$t('subscribe') : this.$t('checkout'),
-        token: async (res) => {
+        async token (res) {
           let url = '/stripe/checkout?a=a'; // just so I can concat &x=x below
 
           if (data.groupToCreate) {
@@ -72,6 +80,7 @@ export default {
 
           let response = await axios.post(url, res);
 
+          // @TODO handle with normal notifications?
           let responseStatus = response.status;
           if (responseStatus >= 400) {
             alert(`Error: ${response.message}`);
@@ -82,6 +91,7 @@ export default {
           if (newGroup && newGroup._id) {
             // @TODO: Just append? or $emit?
             this.$router.push(`/group-plans/${newGroup._id}/task-information`);
+            // @TODO action
             this.user.guilds.push(newGroup._id);
             return;
           }
diff --git a/website/client/store/actions/members.js b/website/client/store/actions/members.js
index 68e06a59a8..92db1d839a 100644
--- a/website/client/store/actions/members.js
+++ b/website/client/store/actions/members.js
@@ -55,6 +55,7 @@ export async function transferGems (store, payload) {
     gemAmount: payload.gemAmount,
   };
   let response = await axios.post(url, data);
+  store.state.user.data.balance -= payload.gemAmount / 4;
   return response;
 }
 
diff --git a/website/client/store/index.js b/website/client/store/index.js
index c16bbadefd..ca3c07154e 100644
--- a/website/client/store/index.js
+++ b/website/client/store/index.js
@@ -54,7 +54,12 @@ export default function () {
     state: {
       title: 'Habitica',
       isUserLoggedIn,
+      isUserLoaded: false, // Means the user and the user's tasks are ready
       user: asyncResourceFactory(),
+      credentials: AUTH_SETTINGS ? {
+        API_ID: AUTH_SETTINGS.auth.apiId,
+        API_TOKEN: AUTH_SETTINGS.auth.apiToken,
+      } : {},
       // store the timezone offset in case it's different than the one in
       // user.preferences.timezoneOffset and change it after the user is synced
       // in app.vue