success modal and fix redirects

website/client/app.vue

@@ -11,6 +11,7 @@ div
   #app(:class='{"casting-spell": castingSpell}')
     banned-account-modal
     amazon-payments-modal(v-if='!isStaticPage')
+    payments-success-modal
     snackbars
     router-view(v-if="!isUserLoggedIn || isStaticPage")
     template(v-else)
@@ -185,6 +186,8 @@ import SelectMembersModal from 'client/components/selectMembersModal.vue';
 import notifications from 'client/mixins/notifications';
 import { setup as setupPayments } from 'client/libs/payments';
 import amazonPaymentsModal from 'client/components/payments/amazonModal';
+import paymentsSuccessModal from 'client/components/payments/successModal';
+
 import spellsMixin from 'client/mixins/spells';
 import { CONSTANTS, getLocalSetting, removeLocalSetting } from 'client/libs/userlocalManager';
 
@@ -206,6 +209,7 @@ export default {
     SelectMembersModal,
     amazonPaymentsModal,
     bannedAccountModal,
+    paymentsSuccessModal,
   },
   data () {
     return {
@@ -438,11 +442,10 @@ export default {
         if (appState) {
           appState = JSON.parse(appState);
           if (appState.paymentCompleted) {
-            alert(`payment completed with ${appState.paymentMethod}`);
             removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
+            this.$root.$emit('bv::show::modal', 'payments-success-modal');
           }
         }
-
         this.$nextTick(() => {
           // Load external scripts after the app has been rendered
           setupPayments();

website/client/components/payments/amazonModal.vue

@@ -36,6 +36,7 @@ import { mapState } from 'client/libs/store';
 import { CONSTANTS, setLocalSetting } from 'client/libs/userlocalManager';
 
 const AMAZON_PAYMENTS = process.env.AMAZON_PAYMENTS; // eslint-disable-line
+const habiticaUrl = `${location.protocol}//${location.host}`;
 
 export default {
   data () {
@@ -187,13 +188,17 @@ export default {
 
       new this.OffAmazonPayments.Widgets.Wallet(walletParams).bind('AmazonPayWallet');
     },
-    storePaymentStatusAndReload () {
+    storePaymentStatusAndReload (url) {
       const appState = {
         paymentMethod: 'amazon',
         paymentCompleted: true,
       };
       setLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE, JSON.stringify(appState));
+      if (url) {
+        window.location.assign(url);
+      } else {
         window.location.reload(true);
+      }
     },
     async amazonCheckOut () {
       this.amazonButtonEnabled = false;
@@ -239,8 +244,6 @@ export default {
           if (newGroup && newGroup._id) {
             // Handle new user signup
             if (!this.$store.state.isUserLoggedIn) {
-              const habiticaUrl = `${location.protocol}//${location.host}`;
-
               Analytics.track({
                 hitType: 'event',
                 eventCategory: 'group-plans-static',
@@ -248,21 +251,17 @@ export default {
                 eventLabel: 'paid-with-amazon',
               });
 
-              location.href = `${habiticaUrl}/group-plans/${newGroup._id}/task-information?showGroupOverview=true`;
-              this.storePaymentStatusAndReload();
+              this.storePaymentStatusAndReload(`${habiticaUrl}/group-plans/${newGroup._id}/task-information?showGroupOverview=true`);
               return;
             }
 
-            // @TODO: Just append? or $emit?
-            this.$router.push(`/group-plans/${newGroup._id}/task-information`);
             this.user.guilds.push(newGroup._id);
-            this.storePaymentStatusAndReload();
+            this.storePaymentStatusAndReload(`${habiticaUrl}/group-plans/${newGroup._id}/task-information`);
             return;
           }
 
           if (this.amazonPayments.groupId) {
-            this.$router.push(`/group-plans/${this.amazonPayments.groupId}/task-information`);
-            this.storePaymentStatusAndReload();
+            this.storePaymentStatusAndReload(`${habiticaUrl}/group-plans/${this.amazonPayments.groupId}/task-information`);
             return;
           }
 

website/client/components/payments/successModal.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+  b-modal#payments-success-modal(
+    :title="$t('accountSuspendedTitle')", 
+    size='sm', 
+  )
+    div(slot="modal-header") 
+      .check-container.d-flex.align-items-center.justify-content-center
+        .svg-icon.check(v-html="icons.check")
+      h2(v-ocne) {{ $t('paymentSuccessful') }}
+    div(slot="modal-footer")
+      .small-text(v-once) {{ $t('giftSubscriptionText4') }}
+    .row
+      .col-12.text-center
+        button.btn.btn-primary(@click='close()') {{$t('onwards')}}
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+#payments-success-modal .modal-content {
+  background: transparent;
+}
+
+#payments-success-modal .modal-header {
+  justify-content: center;
+  padding-top: 24px;
+  padding-bottom: 0px;
+  background: $green-10;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  h2 { 
+    color: white; 
+  }
+
+  .check-container {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: #1CA372;
+    margin: 0 auto;
+    margin-bottom: 16px;
+  }
+
+  .check {
+    width: 35.1px;
+    height: 28px;
+    color: white;
+  }
+}
+
+#payments-success-modal .modal-body {
+  padding-top: 16px;
+  padding-bottom: 24px;
+  background: white;
+}
+
+#payments-success-modal .modal-footer {
+  background: $gray-700;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  justify-content: center;
+
+  .small-text {
+    font-style: normal;
+  }
+}
+</style>
+
+<script>
+import checkIcon from 'assets/svg/check.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        check: checkIcon,
+      }),
+    };
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'payments-success-modal');
+    },
+  },
+};
+</script>

website/client/mixins/payments.js

@@ -8,6 +8,8 @@ import notificationsMixin from 'client/mixins/notifications';
 import * as Analytics from 'client/libs/analytics';
 import { CONSTANTS, setLocalSetting } from 'client/libs/userlocalManager';
 
+const habiticaUrl = `${location.protocol}//${location.host}`;
+
 export default {
   mixins: [notificationsMixin],
   computed: {
@@ -124,8 +126,6 @@ export default {
 
             // Handle new user signup
             if (!this.$store.state.isUserLoggedIn) {
-              const habiticaUrl = `${location.protocol}//${location.host}`;
-
               Analytics.track({
                 hitType: 'event',
                 eventCategory: 'group-plans-static',
@@ -133,18 +133,18 @@ export default {
                 eventLabel: 'paid-with-stripe',
               });
 
-              location.href = `${habiticaUrl}/group-plans/${newGroup._id}/task-information?showGroupOverview=true`;
-              window.location.reload(true);
+              window.location.assign(`${habiticaUrl}/group-plans/${newGroup._id}/task-information?showGroupOverview=true`);
+              return;
             }
 
-            this.$router.push(`/group-plans/${newGroup._id}/task-information`);
             this.user.guilds.push(newGroup._id);
-            window.location.reload(true);
+            window.location.assign(`${habiticaUrl}/group-plans/${newGroup._id}/task-information`);
+            return;
           }
 
           if (data.groupId) {
-            this.$router.push(`/group-plans/${data.groupId}/task-information`);
-            window.location.reload(true);
+            window.location.assign(`${habiticaUrl}/group-plans/${data.groupId}/task-information`);
+            return;
           }
 
           window.location.reload(true);

website/common/locales/en/npc.json

@@ -115,6 +115,7 @@
   "card": "Credit Card (using Stripe)",
   "amazonInstructions": "Click the button to pay using Amazon Payments",
   "paymentMethods": "Purchase using",
+  "paymentSuccessful": "Your payment was successful!",
 
   "classGear": "Class Gear",
   "classGearText": "Congratulations on choosing a class! I've added your new basic weapon to your inventory. Take a look below to equip it!",