aboutsummaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2021-07-27 15:52:03 +0200
committerMateja <mail@matejamaric.com>2021-07-27 15:52:03 +0200
commit021638d3c21f42b0f315333f64c3c2ca8966e2cc (patch)
tree3aefc1de13bd83375db8ef53e181245aff7f7939 /client
parentea671474106d6416fb4d90da05c34d916b6ca5a2 (diff)
downloadmevn-ecommerce-021638d3c21f42b0f315333f64c3c2ca8966e2cc.tar.gz
mevn-ecommerce-021638d3c21f42b0f315333f64c3c2ca8966e2cc.zip
Show modal and clear cart on successfully purchase.
Also show modal on failures...
Diffstat (limited to 'client')
-rw-r--r--client/src/store/index.js3
-rw-r--r--client/src/views/Checkout.vue35
2 files changed, 34 insertions, 4 deletions
diff --git a/client/src/store/index.js b/client/src/store/index.js
index a2d3f9f..7c3d396 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -65,6 +65,9 @@ export default createStore({
if (foundProduct.quantity == 0)
state.cart = state.cart.filter(x => x.id != foundProduct.id);
}
+ },
+ clearCart(state) {
+ state.cart.length = 0;
}
},
actions: {
diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index a009b94..fc8bdd0 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -20,17 +20,32 @@
</div>
</div>
</div>
+ <Modal :title="modalTitle" v-if="showModal" @close="showModal = false">
+ <p v-text="modalText"></p>
+ </Modal>
</template>
<script>
+import Modal from '@/components/Modal.vue';
+
export default {
name: 'Checkout',
+ components: {
+ Modal
+ },
mounted() {
const script = document.createElement("script");
script.src = `https://www.paypal.com/sdk/js?client-id=${process.env.VUE_APP_PAYPAL_CLIENT_ID}&disable-funding=credit`;
script.addEventListener("load", this.paypalLoaded);
document.body.appendChild(script);
},
+ data() {
+ return {
+ showModal: false,
+ modalTitle: '',
+ modalText: ''
+ };
+ },
computed: {
cart() {
return this.$store.getters.getCart;
@@ -48,6 +63,8 @@ export default {
},
paypalLoaded() {
const dispatch = this.$store.dispatch;
+ const commit = this.$store.commit;
+ const thisVue = this;
window.paypal.Buttons({
async createOrder() {
@@ -55,12 +72,22 @@ export default {
},
async onApprove(data) {
const success = await dispatch('captureOrder', data.orderID);
- if (success === true)
- console.log('Successfully paid!');
- else
- console.log('Capturing order failed!');
+ if (success === true) {
+ thisVue.modalTitle = 'Success!';
+ thisVue.modalText = 'Your purchase should arrive within 7 days!';
+ thisVue.showModal = true;
+ commit('clearCart');
+ }
+ else {
+ thisVue.modalTitle = 'Failure!';
+ thisVue.modalText = 'Your order was not successfully paid! Check your funds or try again later.';
+ thisVue.showModal = true;
+ }
},
onError(err) {
+ thisVue.modalTitle = 'Error!';
+ thisVue.modalText = 'Error occurred! Please try again later.';
+ thisVue.showModal = true;
console.error(err);
}
}).render(this.$refs.paypal);