https://www.youresocrafty.com/1737027101/c/js/gift-card-form/giftCardForm.vue.js

1'use strict';
2
3Vue.component('gift-card-form', {
4    template: '#giftCardFormTemplate',
5    components: {
6        VueRecaptcha: window.VueRecaptcha
7    },
8    data: function() {
9        return {
10            cardNumber: null,
11            errorMsg: null,
12            response: {
13                balance: null,
14                expire: null
15            }
16        };
17    },
18    props: {
19        currencySymbol: {type: String, required: true},
20        token: {type: String, required: true},
21        siteKey: {type: String, required: true},
22        isV3CaptchaEnabled: {type: Boolean, required: true},
23    },
24    computed: {
25        isBalance: function() {
26            return this.response.balance !== null;
27        },
28        isExpire: function() {
29            return this.response.expire !== null;
30        },
31        isError: function() {
32            return this.errorMsg !== null;
33        },
34        isBalanceNumber: function () {
35            return isNaN(this.response.balance) === false;
36        },
37        axiosInstance: function () {
38            return axios.create({
39                headers: {
40                    'Authorization': 'Bearer ' + this.token
41                }
42            });
43        },
44    },
45    methods: {
46        checkBalance: function(recaptchaToken = null) {
47            this.resetResponseData();
48            if (this.cardNumber === '' || this.cardNumber === null) {
49                if (!this.isV3CaptchaEnabled) {
50                    this.$refs.recaptcha.reset();
51                }
52                
53                return;
54            }
55
56            let that = this;
57
58            var url = this.isV3CaptchaEnabled
59                ? '/api/gc/info/' + this.cardNumber
60                : '/api/gc/info/' + this.cardNumber + '/' + recaptchaToken;
61            
62            this.axiosInstance.get(url)
63                .then(function (response) {
64                    if (!response.data) {
65                        return Promise.reject(new Error('Empty response!'));
66                    }
67
68                    if (Object.keys(response.data).length === 0) {
69                        that.response.balance = 'No matching gift card found';
70                        that.response.expire = '';
71                    } else {
72                        that.response.balance = parseFloat(response.data.balance).toFixed(2);
73                        if (response.data.expire === null) {
74                            that.response.expire = '';
75                        } else {
76                            that.response.expire = response.data.expire;
77                        }
78                    }
79                }.bind(this))
80                .catch(function (error) {
81                    if (error.response) {
82                        if (error.response.data && error.response.data.error) {
83                            that.errorMsg = error.response.data.error;
84                        } else {
85                            that.errorMsg = error.response.statusText;
86                        }
87                    } else {
88                        that.errorMsg = 'Something wrong!';
89                    }
90                })
91                .finally(function () {
92                    if (!that.isV3CaptchaEnabled) {
93                        that.$refs.recaptcha.reset();
94                    }
95                });
96        },
97        resetResponseData: function () {
98            this.errorMsg = null;
99            this.response.balance = null;
100            this.response.expire = null;
101        },
102        onCaptchaExpired () {
103            this.$refs.recaptcha.reset()
104        },
105        validate () {
106            this.$refs.recaptcha.execute();
107        },
108        validateV3 () {
109            var that = this;
110
111            grecaptcha.ready(function() {
112                grecaptcha.execute(window.recaptchaSiteKey, {action: 'check_gift_card_balance'})
113                    .then(function(token) {
114                        that.axiosInstance.post('/api/store/captcha/validate', {token: token})
115                            .then(function () {
116                                that.checkBalance();
117                            })
118                            .catch(function (error) {
119                                if (error.response && error.response.data) {
120                                    that.errorMsg = error.response.data.error;
121                                } else {
122                                    that.errorMsg = 'An unknown error occurred. Please try again.';
123                                }
124                            });
125                    });
126            });
127        },
128    }
129});