|
| 1 | +import { useEventListener } from '@vueuse/core' |
1 | 2 | import { cart, clear as clearCart } from './stores/useCart' |
2 | 3 | import { fillFromGraphqlResponse as updateOrder } from './stores/useOrder' |
3 | 4 | import { runAfterPlaceOrderHandlers, runBeforePaymentMethodHandlers, runBeforePlaceOrderHandlers } from './stores/usePaymentHandlers' |
4 | 5 | import { refresh as refreshUser, token } from './stores/useUser' |
5 | 6 |
|
6 | | -Vue.prototype.scrollToElement = (selector, offset = 0) => { |
7 | | - let el = window.document.querySelector(selector) |
8 | | - if (el) { |
9 | | - window.scrollTo({ |
10 | | - top: el.offsetTop - offset, |
11 | | - behavior: 'smooth', |
12 | | - }) |
13 | | - } |
14 | | -} |
15 | | - |
16 | | -Vue.prototype.getCheckoutStep = (stepName) => { |
17 | | - return config.checkout_steps?.indexOf(stepName) |
18 | | -} |
19 | | - |
20 | | -Vue.prototype.submitPartials = async function (form, sequential = false) { |
21 | | - let promises = [] |
22 | | - for (const element of form.querySelectorAll('[partial-submit]')) { |
23 | | - const partialFn = element?.getAttribute('partial-submit') |
24 | | - if (!partialFn || !element?.__vue__) { |
25 | | - continue |
| 7 | +document.addEventListener('vue:loaded', function (event) { |
| 8 | + const vue = event.detail.vue |
| 9 | + vue.config.globalProperties.scrollToElement = (selector, offset = 0) => { |
| 10 | + let el = window.document.querySelector(selector) |
| 11 | + if (el) { |
| 12 | + window.scrollTo({ |
| 13 | + top: el.offsetTop - offset, |
| 14 | + behavior: 'smooth', |
| 15 | + }) |
26 | 16 | } |
| 17 | + } |
27 | 18 |
|
28 | | - const createdPromise = element.__vue__[partialFn]().then((result) => { |
29 | | - if (result === false) { |
30 | | - throw new Error() |
| 19 | + vue.config.globalProperties.getCheckoutStep = (stepName) => { |
| 20 | + return config.checkout_steps?.indexOf(stepName) |
| 21 | + } |
| 22 | + |
| 23 | + vue.config.globalProperties.submitPartials = async function (form, sequential = false) { |
| 24 | + let promises = [] |
| 25 | + for (const element of form.querySelectorAll('[partial-submit]')) { |
| 26 | + if (!element.__vnode.props.onPartialSubmit) { |
| 27 | + continue |
31 | 28 | } |
32 | | - }) |
33 | 29 |
|
34 | | - if (sequential) { |
35 | | - await createdPromise |
| 30 | + const createdPromise = element.__vnode.props.onPartialSubmit().then((result) => { |
| 31 | + if (result === false) { |
| 32 | + throw new Error() |
| 33 | + } |
| 34 | + }) |
| 35 | + |
| 36 | + if (sequential) { |
| 37 | + await createdPromise |
| 38 | + } |
| 39 | + |
| 40 | + promises.push(createdPromise) |
36 | 41 | } |
37 | 42 |
|
38 | | - promises.push(createdPromise) |
| 43 | + return await Promise.all(promises) |
39 | 44 | } |
40 | 45 |
|
41 | | - return await Promise.all(promises) |
42 | | -} |
43 | | - |
44 | | -Vue.prototype.checkResponseForExpiredCart = async function (variables, response) { |
45 | | - if ( |
46 | | - response?.errors?.some( |
47 | | - (error) => |
48 | | - error.extensions?.category === 'graphql-no-such-entity' && |
49 | | - // Untested, but something like this is maybe a better idea as |
50 | | - // we're using a lot of different mutations in the checkout. |
51 | | - error.path.some((path) => path.toLowerCase().includes('cart')), |
52 | | - ) |
53 | | - ) { |
54 | | - Notify(window.config.translations.errors.cart_expired, 'error') |
55 | | - clearCart() |
56 | | - if (token.value !== undefined) { |
57 | | - // If the cart has expired, check if the session is not expired |
58 | | - refreshUser() |
| 46 | + vue.config.globalProperties.checkResponseForExpiredCart = async function (variables, response) { |
| 47 | + if ( |
| 48 | + response?.errors?.some( |
| 49 | + (error) => |
| 50 | + error.extensions?.category === 'graphql-no-such-entity' && |
| 51 | + // Untested, but something like this is maybe a better idea as |
| 52 | + // we're using a lot of different mutations in the checkout. |
| 53 | + error.path.some((path) => path.toLowerCase().includes('cart')), |
| 54 | + ) |
| 55 | + ) { |
| 56 | + Notify(window.config.translations.errors.cart_expired, 'error') |
| 57 | + clearCart() |
| 58 | + if (token.value !== undefined) { |
| 59 | + // If the cart has expired, check if the session is not expired |
| 60 | + refreshUser() |
| 61 | + } |
| 62 | + |
| 63 | + return true |
59 | 64 | } |
60 | 65 |
|
61 | | - return true |
| 66 | + await vue.config.globalProperties.updateCart(variables, response) |
| 67 | + |
| 68 | + return false |
62 | 69 | } |
63 | 70 |
|
64 | | - await Vue.prototype.updateCart(variables, response) |
| 71 | + vue.config.globalProperties.updateCart = async function (data, response) { |
| 72 | + if (!response?.data) { |
| 73 | + return response?.data |
| 74 | + } |
| 75 | + cart.value = |
| 76 | + Object.values(response.data) |
| 77 | + .map((queryResponse) => (queryResponse && 'cart' in queryResponse ? queryResponse.cart : queryResponse)) |
| 78 | + .findLast((queryResponse) => queryResponse?.is_virtual !== undefined) ?? cart.value |
65 | 79 |
|
66 | | - return false |
67 | | -} |
| 80 | + window.$emit('cart-updated', { |
| 81 | + cart: cart, |
| 82 | + }) |
68 | 83 |
|
69 | | -Vue.prototype.updateCart = async function (data, response) { |
70 | | - if (!response?.data) { |
71 | | - return response?.data |
72 | | - } |
73 | | - cart.value = |
74 | | - Object.values(response.data) |
75 | | - .map((queryResponse) => (queryResponse && 'cart' in queryResponse ? queryResponse.cart : queryResponse)) |
76 | | - .findLast((queryResponse) => queryResponse?.is_virtual !== undefined) ?? cart.value |
77 | | - |
78 | | - document.dispatchEvent( |
79 | | - new CustomEvent('cart-updated', { |
80 | | - detail: { |
81 | | - cart: cart, |
82 | | - }, |
83 | | - }), |
84 | | - ) |
85 | | - |
86 | | - return response.data |
87 | | -} |
88 | | - |
89 | | -Vue.prototype.updateOrder = async function (data, response) { |
90 | | - await updateOrder(data, response) |
91 | | - |
92 | | - return response.data |
93 | | -} |
94 | | - |
95 | | -Vue.prototype.handleBeforePaymentMethodHandlers = runBeforePaymentMethodHandlers |
96 | | -Vue.prototype.handleBeforePlaceOrderHandlers = runBeforePlaceOrderHandlers |
97 | | - |
98 | | -Vue.prototype.handlePlaceOrder = async function (data, response) { |
99 | | - if (!response?.data) { |
100 | | - return response?.data |
| 84 | + return response.data |
101 | 85 | } |
102 | 86 |
|
103 | | - if (!response?.data?.placeOrder?.orderV2 && response?.data?.placeOrder?.errors) { |
104 | | - const message = response.data.placeOrder.errors.find(() => true).message |
105 | | - Notify(message, 'error') |
106 | | - throw new Error(message) |
| 87 | + vue.config.globalProperties.updateOrder = async function (data, response) { |
| 88 | + await updateOrder(data, response) |
| 89 | + |
| 90 | + return response.data |
107 | 91 | } |
108 | 92 |
|
109 | | - await updateOrder(data, response) |
110 | | - await runAfterPlaceOrderHandlers(response, this) |
| 93 | + vue.config.globalProperties.handleBeforePaymentMethodHandlers = runBeforePaymentMethodHandlers |
| 94 | + vue.config.globalProperties.handleBeforePlaceOrderHandlers = runBeforePlaceOrderHandlers |
111 | 95 |
|
112 | | - return response.data |
113 | | -} |
| 96 | + vue.config.globalProperties.handlePlaceOrder = async function (data, response) { |
| 97 | + if (!response?.data) { |
| 98 | + return response?.data |
| 99 | + } |
| 100 | + |
| 101 | + if (!response?.data?.placeOrder?.orderV2 && response?.data?.placeOrder?.errors) { |
| 102 | + const message = response.data.placeOrder.errors.find(() => true).message |
| 103 | + Notify(message, 'error') |
| 104 | + throw new Error(message) |
| 105 | + } |
| 106 | + |
| 107 | + await updateOrder(data, response) |
| 108 | + await runAfterPlaceOrderHandlers(response, this) |
| 109 | + |
| 110 | + return response.data |
| 111 | + } |
| 112 | +}) |
0 commit comments