@lancom/shared 0.0.317 → 0.0.318
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/js/utils/address.js +20 -0
- package/components/checkout/order/order-billing-information/order-billing-information.vue +1 -21
- package/components/checkout/order/order-payment-information/order-payment-information.vue +91 -89
- package/components/checkout/order/order-review/order-review.vue +1 -5
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export function isSameAddresses(address, billingAddress) {
|
|
2
|
+
if (!billingAddress) {
|
|
3
|
+
return true;
|
|
4
|
+
}
|
|
5
|
+
const fields = [
|
|
6
|
+
'fullName',
|
|
7
|
+
'additionalInfo',
|
|
8
|
+
'addressLine1',
|
|
9
|
+
'addressLine2',
|
|
10
|
+
'city',
|
|
11
|
+
'company',
|
|
12
|
+
'country',
|
|
13
|
+
'email',
|
|
14
|
+
'phone',
|
|
15
|
+
'postcode',
|
|
16
|
+
'state'
|
|
17
|
+
];
|
|
18
|
+
const getKey = model => fields.reduce((v, field) => `${v}-${model[field] || ''}`, '');
|
|
19
|
+
return address && getKey(address) === getKey(billingAddress);
|
|
20
|
+
}
|
|
@@ -48,27 +48,7 @@ import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_qua
|
|
|
48
48
|
import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
|
|
49
49
|
import AddressForm from '@/components/checkout/order/address-form/address-form';
|
|
50
50
|
import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
|
|
51
|
-
|
|
52
|
-
function isSameAddresses(address, billingAddress) {
|
|
53
|
-
if (!billingAddress) {
|
|
54
|
-
return true;
|
|
55
|
-
}
|
|
56
|
-
const fields = [
|
|
57
|
-
'fullName',
|
|
58
|
-
'additionalInfo',
|
|
59
|
-
'addressLine1',
|
|
60
|
-
'addressLine2',
|
|
61
|
-
'city',
|
|
62
|
-
'company',
|
|
63
|
-
'country',
|
|
64
|
-
'email',
|
|
65
|
-
'phone',
|
|
66
|
-
'postcode',
|
|
67
|
-
'state'
|
|
68
|
-
];
|
|
69
|
-
const getKey = model => fields.reduce((v, field) => `${v}-${model[field] || ''}`, '');
|
|
70
|
-
return address && getKey(address) === getKey(billingAddress);
|
|
71
|
-
}
|
|
51
|
+
import { isSameAddresses } from '@lancom/shared/assets/js/utils/address';
|
|
72
52
|
|
|
73
53
|
export default {
|
|
74
54
|
name: 'OrderBillingInformation',
|
|
@@ -4,74 +4,74 @@
|
|
|
4
4
|
Payment info
|
|
5
5
|
</div>
|
|
6
6
|
<div>
|
|
7
|
-
<div v-if="creating">
|
|
7
|
+
<div v-if="creating || initing">
|
|
8
8
|
<spinner />
|
|
9
9
|
</div>
|
|
10
|
-
<div
|
|
11
|
-
v-else
|
|
12
|
-
class="form-row OrderPaymentInformation__form">
|
|
13
|
-
<label
|
|
14
|
-
class="form-label OrderPaymentInformation__checkbox"
|
|
15
|
-
@click="updatePaymentType(false)">
|
|
16
|
-
<checked-icon :checked="!isDepositPayment" />
|
|
17
|
-
<span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
|
|
18
|
-
Credit Card
|
|
19
|
-
</span>
|
|
20
|
-
</label>
|
|
21
|
-
<label
|
|
22
|
-
class="form-label OrderPaymentInformation__checkbox"
|
|
23
|
-
@click="updatePaymentType(true)">
|
|
24
|
-
<checked-icon :checked="isDepositPayment" />
|
|
25
|
-
<span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
|
|
26
|
-
Bank Transfer
|
|
27
|
-
</span>
|
|
28
|
-
</label>
|
|
29
|
-
</div>
|
|
30
|
-
<div
|
|
31
|
-
v-if="isDepositPayment"
|
|
32
|
-
class="OrderPaymentInformation__direct-deposit">
|
|
33
|
-
<div
|
|
34
|
-
class="OrderPaymentInformation__direct-deposit-info"
|
|
35
|
-
v-html="depositInfo(orderSettings.depositInfo)">
|
|
36
|
-
</div>
|
|
37
|
-
<div
|
|
38
|
-
v-if="isFailedOrderCharge"
|
|
39
|
-
class="OrderPaymentInformation__error">
|
|
40
|
-
{{ errorMessage }}
|
|
41
|
-
</div>
|
|
42
|
-
<progress-steps-controls
|
|
43
|
-
class="OrderPaymentInformation__controls"
|
|
44
|
-
:disabled-next="creating"
|
|
45
|
-
:disabled-prev="creating"
|
|
46
|
-
label-next="CREATE ORDER"
|
|
47
|
-
@prev="$emit('prev')"
|
|
48
|
-
@next="submit" />
|
|
49
|
-
</div>
|
|
50
10
|
<div v-else>
|
|
51
|
-
<div
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
11
|
+
<div class="form-row OrderPaymentInformation__form">
|
|
12
|
+
<label
|
|
13
|
+
class="form-label OrderPaymentInformation__checkbox"
|
|
14
|
+
@click="updatePaymentType(false)">
|
|
15
|
+
<checked-icon :checked="!isDepositPayment" />
|
|
16
|
+
<span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
|
|
17
|
+
Credit Card
|
|
18
|
+
</span>
|
|
19
|
+
</label>
|
|
20
|
+
<label
|
|
21
|
+
class="form-label OrderPaymentInformation__checkbox"
|
|
22
|
+
@click="updatePaymentType(true)">
|
|
23
|
+
<checked-icon :checked="isDepositPayment" />
|
|
24
|
+
<span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
|
|
25
|
+
Bank Transfer
|
|
26
|
+
</span>
|
|
27
|
+
</label>
|
|
55
28
|
</div>
|
|
56
29
|
<div
|
|
57
|
-
v-if="
|
|
58
|
-
class="
|
|
59
|
-
<
|
|
30
|
+
v-if="isDepositPayment"
|
|
31
|
+
class="OrderPaymentInformation__direct-deposit">
|
|
32
|
+
<div
|
|
33
|
+
class="OrderPaymentInformation__direct-deposit-info"
|
|
34
|
+
v-html="depositInfo(orderSettings.depositInfo)">
|
|
35
|
+
</div>
|
|
36
|
+
<div
|
|
37
|
+
v-if="isFailedOrderCharge"
|
|
38
|
+
class="OrderPaymentInformation__error">
|
|
39
|
+
{{ errorMessage }}
|
|
40
|
+
</div>
|
|
41
|
+
<progress-steps-controls
|
|
42
|
+
class="OrderPaymentInformation__controls"
|
|
43
|
+
:disabled-next="creating"
|
|
44
|
+
:disabled-prev="creating"
|
|
45
|
+
label-next="CREATE ORDER"
|
|
46
|
+
@prev="$emit('prev')"
|
|
47
|
+
@next="submit" />
|
|
48
|
+
</div>
|
|
49
|
+
<div v-else>
|
|
50
|
+
<div
|
|
51
|
+
v-if="isFailedOrderCharge"
|
|
52
|
+
class="OrderPaymentInformation__error mb-8">
|
|
53
|
+
{{ errorMessage }}
|
|
54
|
+
</div>
|
|
55
|
+
<div
|
|
56
|
+
v-if="loadingCard || !orderData"
|
|
57
|
+
class="lc_modal__spinner">
|
|
58
|
+
<spinner />
|
|
59
|
+
</div>
|
|
60
|
+
<payment-card
|
|
61
|
+
v-if="orderData"
|
|
62
|
+
ref="paymentCart"
|
|
63
|
+
:amount="cartPricing.totalPrice"
|
|
64
|
+
:order="orderData"
|
|
65
|
+
@inited="initedCard">
|
|
66
|
+
</payment-card>
|
|
67
|
+
<progress-steps-controls
|
|
68
|
+
class="OrderPaymentInformation__controls"
|
|
69
|
+
:disabled-prev="creating"
|
|
70
|
+
:disabled-next="creating"
|
|
71
|
+
label-next="MAKE PAYMENT"
|
|
72
|
+
@prev="$emit('prev')"
|
|
73
|
+
@next="submit" />
|
|
60
74
|
</div>
|
|
61
|
-
<payment-card
|
|
62
|
-
v-if="orderData"
|
|
63
|
-
ref="paymentCart"
|
|
64
|
-
:amount="cartPricing.totalPrice"
|
|
65
|
-
:order="orderData"
|
|
66
|
-
@inited="initedCard">
|
|
67
|
-
</payment-card>
|
|
68
|
-
<progress-steps-controls
|
|
69
|
-
class="OrderPaymentInformation__controls"
|
|
70
|
-
:disabled-prev="creating"
|
|
71
|
-
:disabled-next="creating"
|
|
72
|
-
label-next="MAKE PAYMENT"
|
|
73
|
-
@prev="$emit('prev')"
|
|
74
|
-
@next="submit" />
|
|
75
75
|
</div>
|
|
76
76
|
</div>
|
|
77
77
|
</div>
|
|
@@ -104,6 +104,7 @@ export default {
|
|
|
104
104
|
},
|
|
105
105
|
data() {
|
|
106
106
|
return {
|
|
107
|
+
initing: false,
|
|
107
108
|
creating: false,
|
|
108
109
|
loadingCard: true,
|
|
109
110
|
isDepositPayment: this.order.paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT
|
|
@@ -132,17 +133,23 @@ export default {
|
|
|
132
133
|
},
|
|
133
134
|
async initOrderData(paymentStatus) {
|
|
134
135
|
if (!this.orderData) {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
136
|
+
try {
|
|
137
|
+
this.initing = true;
|
|
138
|
+
const recaptchaToken = await this.getRecaptcha('create_order');
|
|
139
|
+
await this.createOrder({
|
|
140
|
+
...this.order,
|
|
141
|
+
paymentStatus: paymentStatus || 'abandoned',
|
|
142
|
+
recaptchaToken,
|
|
143
|
+
products: this.entities,
|
|
144
|
+
pricing: this.cartPricing,
|
|
145
|
+
shop: this.shop._id,
|
|
146
|
+
currency: this.currency?._id,
|
|
147
|
+
country: this.country?._id
|
|
148
|
+
});
|
|
149
|
+
} catch (e) {
|
|
150
|
+
} finally {
|
|
151
|
+
this.initing = false;
|
|
152
|
+
}
|
|
146
153
|
}
|
|
147
154
|
},
|
|
148
155
|
updatePaymentType(isDeposit) {
|
|
@@ -195,23 +202,18 @@ export default {
|
|
|
195
202
|
};
|
|
196
203
|
await this.saveOrder(data);
|
|
197
204
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
if (!this.isFailedOrderCharge) {
|
|
201
|
-
this.$emit('next');
|
|
202
|
-
} else {
|
|
203
|
-
this.$nextTick(async () => {
|
|
204
|
-
const message = `Unfortunately our payment gateway has reported the following error: '${this.errorMessage}'. Please check your card number and try again. Alternatively you can proceed with a 'pay later' order and receive an email confirmation now and pay via credit card or bank transfer`;
|
|
205
|
-
const options = { submitLabel: 'PAY LATER', cancelLabel: 'TRY AGAIN', warning: true };
|
|
206
|
-
const isSwitchToDeposit = await this.showConfirmationModal(message, options);
|
|
207
|
-
if (isSwitchToDeposit) {
|
|
208
|
-
this.updatePaymentType(true);
|
|
209
|
-
}
|
|
210
|
-
});
|
|
211
|
-
}
|
|
212
|
-
} else {
|
|
213
|
-
this.onOrderSucces();
|
|
205
|
+
await this.proceedPayment(this.card);
|
|
206
|
+
if (!this.isFailedOrderCharge) {
|
|
214
207
|
this.$emit('next');
|
|
208
|
+
} else {
|
|
209
|
+
this.$nextTick(async () => {
|
|
210
|
+
const message = `Unfortunately our payment gateway has reported the following error: '${this.errorMessage}'. Please check your card number and try again. Alternatively you can proceed with a 'pay later' order and receive an email confirmation now and pay via credit card or bank transfer`;
|
|
211
|
+
const options = { submitLabel: 'PAY LATER', cancelLabel: 'TRY AGAIN', warning: true };
|
|
212
|
+
const isSwitchToDeposit = await this.showConfirmationModal(message, options);
|
|
213
|
+
if (isSwitchToDeposit) {
|
|
214
|
+
this.updatePaymentType(true);
|
|
215
|
+
}
|
|
216
|
+
});
|
|
215
217
|
}
|
|
216
218
|
} catch (e) {
|
|
217
219
|
const { message } = (e.response && e.response.data) || e;
|
|
@@ -110,11 +110,7 @@ export default {
|
|
|
110
110
|
};
|
|
111
111
|
await this.saveOrder(data);
|
|
112
112
|
}
|
|
113
|
-
|
|
114
|
-
await this.proceedPayment(this.card);
|
|
115
|
-
} else {
|
|
116
|
-
this.onOrderSucces();
|
|
117
|
-
}
|
|
113
|
+
await this.proceedPayment(this.card);
|
|
118
114
|
} finally {
|
|
119
115
|
this.processing = false;
|
|
120
116
|
}
|