diff --git a/website/client/app.vue b/website/client/app.vue index 9de0d68c57..9e7bccbb49 100644 --- a/website/client/app.vue +++ b/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(); diff --git a/website/client/components/payments/amazonModal.vue b/website/client/components/payments/amazonModal.vue index 18864345ef..513907788a 100644 --- a/website/client/components/payments/amazonModal.vue +++ b/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)); - window.location.reload(true); + 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; } diff --git a/website/client/components/payments/successModal.vue b/website/client/components/payments/successModal.vue new file mode 100644 index 0000000000..08fda4589b --- /dev/null +++ b/website/client/components/payments/successModal.vue @@ -0,0 +1,86 @@ + + + + + \ No newline at end of file diff --git a/website/client/mixins/payments.js b/website/client/mixins/payments.js index 8689a8f74e..dee1aa4db4 100644 --- a/website/client/mixins/payments.js +++ b/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); diff --git a/website/common/locales/en/npc.json b/website/common/locales/en/npc.json index f9e862ccd3..da725f429f 100644 --- a/website/common/locales/en/npc.json +++ b/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!",