paypal: restore url after purchase

HabitRPG · Nov 10, 2018 · ad1b54c · ad1b54c
1 parent 79daaca
commit ad1b54c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/website/client/app.vue b/website/client/app.vue
@@ -190,6 +190,8 @@ import spellsMixin from 'client/mixins/spells';
 import svgClose from 'assets/svg/close.svg';
 import bannedAccountModal from 'client/components/bannedAccountModal';
 
+import { CONSTANTS, getLocalSetting, removeLocalSetting } from 'client/libs/userlocalManager';
+
 const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS.COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
@@ -607,8 +609,19 @@ export default {
       this.$root.$emit('bv::hide::modal', 'select-member-modal');
     },
     hideLoadingScreen () {
+      this.restoreAppState();
       this.loading = false;
     },
+    // When the app state was saved, for example when redirected back from a payment provider
+    // restore it
+    restoreAppState () {
+      let previousAppState = getLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+      if (!previousAppState) return;
+      previousAppState = JSON.parse(previousAppState);
+      removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+
+      this.$router.replace(previousAppState.path);
+    },
     hideBanner () {
       this.bannerHidden = true;
       this.setBannerOffset();

diff --git a/website/client/components/payments/buyGemsModal.vue b/website/client/components/payments/buyGemsModal.vue
@@ -75,7 +75,7 @@
               .card-body
                 .mx-auto(v-html='icons.creditCard', style='"height: 56px; width: 159px; margin-top: 1em;"')
             .card.text-center.payment-method
-              a.card-body.paypal(:href='paypalCheckoutLink')
+              a.card-body.paypal(@click="openPaypal(paypalCheckoutLink)")
                 img(src='~assets/images/paypal.png')
             .card.text-center.payment-method(@click="amazonPaymentsInit({type: 'single'})")
               .card-body.amazon
@@ -158,7 +158,7 @@
                 .card-body(@click='showStripe({subscription: subscriptionPlan})')
                   .mx-auto(v-html='icons.creditCard', style='"height: 56px; width: 159px; margin-top: 1em;"')
               .card.text-center.payment-method
-                a.card-body.paypal(:href='paypalSubscriptionLink')
+                a.card-body.paypal(@click="openPaypal(paypalSubscriptionLink)")
                   img(src='~assets/images/paypal.png')
               .card.text-center.payment-method
                 .card-body.amazon(@click="amazonPaymentsInit({type: 'subscription', subscription: subscriptionPlan})")

diff --git a/website/client/components/settings/subscription.vue b/website/client/components/settings/subscription.vue
@@ -77,7 +77,7 @@
             .col-md-4
               button.purchase.btn.btn-primary(@click='showStripe({subscription:subscription.key, coupon:subscription.coupon})', :disabled='!subscription.key') {{ $t('card') }}
             .col-md-4
-              a.purchase(:href='paypalPurchaseLink', :disabled='!subscription.key')
+              a.purchase(@click="openPaypal(paypalPurchaseLink)", :disabled='!subscription.key')
                 img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png', :alt="$t('paypal')")
             .col-md-4
               a.btn.btn-secondary.purchase(@click="payWithAmazon()")

diff --git a/website/client/libs/userlocalManager.js b/website/client/libs/userlocalManager.js
@@ -14,6 +14,9 @@ const CONSTANTS = {
     COSTUME_TAB: 'costume-tab',
     EQUIPMENT_TAB: 'equipment-tab',
   },
+  savedAppStateValues: {
+    SAVED_APP_STATE: 'saved-app-state',
+  },
 };
 
 function setLocalSetting (key, value) {
@@ -24,8 +27,14 @@ function getLocalSetting (key) {
   return localStorage.getItem(key);
 }
 
+function removeLocalSetting (key) {
+  return localStorage.removeItem(key);
+}
+
+
 export {
   CONSTANTS,
   getLocalSetting,
   setLocalSetting,
+  removeLocalSetting,
 };
diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js
@@ -6,12 +6,12 @@ import { mapState } from 'client/libs/store';
 import encodeParams from 'client/libs/encodeParams';
 import notificationsMixin from 'client/mixins/notifications';
 import * as Analytics from 'client/libs/analytics';
+import { CONSTANTS, setLocalSetting } from 'client/libs/userlocalManager';
 
 export default {
   mixins: [notificationsMixin],
   computed: {
     ...mapState(['credentials']),
-    // @TODO refactor into one single computed property
     paypalCheckoutLink () {
       return '/paypal/checkout';
     },
@@ -41,7 +41,15 @@ export default {
       let gift = this.encodeGift(data.giftedTo, data.gift);
       const url = `/paypal/checkout?gift=${gift}`;
 
-      window.open(url);
+      this.openPaypal(url);
+    },
+    openPaypal (url) {
+      const appState = {
+        path: this.$route.fullPath,
+        paymentMethod: 'paypal',
+      };
+      setLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE, JSON.stringify(appState));
+      location.href = url;
     },
     showStripe (data) {
       if (!this.checkGemAmount(data)) return;