wickes-css2 2.103.0-lg-788-no-extra-req-empty-cart.1 → 2.103.0-rg-1802-gift-card-error-codes.2
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/Readme.md +1 -2
- package/build/css/category-main.css +1 -1
- package/build/css/components/checkout-payment-details-v2.css +1 -1
- package/build/css/homepage-main.css +1 -1
- package/build/css/kitchen-plp-main.css +1 -1
- package/build/css/main.css +1 -1
- package/build/css/my-account-main-v2.css +1 -1
- package/build/css/my-account-main.css +1 -1
- package/build/css/pages/page_checkout_delivery-new.css +1 -1
- package/build/css/pages/page_product-details-v2.css +1 -1
- package/build/css/pdp-main-before-combine.css +1 -1
- package/build/css/pdp-main-non-critical.css +1 -1
- package/build/css/pdp-main.css +1 -1
- package/build/css/plp-main.css +1 -1
- package/build/css/store-locator-main.css +1 -1
- package/build/img/giftcard.svg +28 -0
- package/build/img/klarna.svg +10 -0
- package/build/img/payment/checkout/klarna.svg +10 -0
- package/build/img/payment/footer/klarna.svg +10 -0
- package/build/js/account-members.min.js +1 -1
- package/build/js/add-project-list-id.min.js +1 -1
- package/build/js/address-book.min.js +1 -1
- package/build/js/basket.min.js +2 -2
- package/build/js/bundle.min.js +1 -1
- package/build/js/change-password.min.js +1 -1
- package/build/js/checkout.min.js +2 -2
- package/build/js/emulation.min.js +282 -970
- package/build/js/general.bundle.min.js +1 -1
- package/build/js/gift-cards.min.js +1 -0
- package/build/js/merged-checkout.min.js +2 -2
- package/build/js/page/basket-v2.js +244 -138
- package/build/js/page/components/discounts.js +6 -6
- package/build/js/page/components/gift-cards.js +895 -0
- package/build/js/page/components/order-summary.js +42 -25
- package/build/js/page/components/toggle-password-visibility.js +22 -0
- package/build/js/page/utils/gift-cards-utils.js +183 -0
- package/build/js/page/utils/input-handling.js +92 -0
- package/build/js/page/utils/show-hide-input.js +28 -0
- package/build/js/page/utils/validation.js +46 -1
- package/build/js/pdp.bundle.min.js +1 -1
- package/build/js/personal-details.min.js +1 -1
- package/build/js/plp.bundle.min.js +1 -1
- package/build/js/project-list.min.js +44 -1
- package/build/js/quiz.min.js +1 -1
- package/build/js/toggle-password-visibility.min.js +1 -0
- package/build/js/track-my-order.min.js +1 -1
- package/package.json +2 -2
- package/src/components/checkout-payment-details-v2.hbs +10 -11
- package/src/components/checkout_payment-new.hbs +1 -4
- package/src/components/checkout_payment-other-methods.hbs +1 -4
- package/src/components/gift-cards-hint.hbs +9 -0
- package/src/components/gift-cards.hbs +90 -0
- package/src/components/giftcard-chip.hbs +23 -0
- package/src/components/giftcard-summary.hbs +6 -0
- package/src/components/mini-basket/mini-basket-empty.hbs +13 -3
- package/src/components/mini-basket/mini-basket.hbs +13 -32
- package/src/components/mini-basket/product-item.hbs +16 -37
- package/src/components/payments-checkout-v2.hbs +2 -7
- package/src/components/payments-checkout.hbs +1 -6
- package/src/components/payments.hbs +1 -5
- package/src/components/table_order-details-klarna.hbs +1 -1
- package/src/components/table_payment.hbs +1 -4
- package/src/data/data_confirmation-summary.json +2 -4
- package/src/data/data_mini-basket.json +80 -4
- package/src/data/data_wismo.json +1 -1
- package/src/elements/form-row.hbs +1 -1
- package/src/elements/input.hbs +31 -2
- package/src/img/giftcard.svg +28 -0
- package/src/img/klarna.svg +10 -0
- package/src/img/payment/checkout/klarna.svg +10 -0
- package/src/img/payment/footer/klarna.svg +10 -0
- package/src/js/components/general/cart-slider.js +0 -4
- package/src/js/components/general/create-popup-slider.js +2 -5
- package/src/js/components/general/mini-basket-slider.js +8 -0
- package/src/js/components/general/notification.js +2 -1
- package/src/js/emulation/checkout-data.js +35 -0
- package/src/js/emulation/checkout-payment-details.js +23 -14
- package/src/js/emulation/custom-slider-emulation.js +10 -4
- package/src/js/emulation/forms.js +7 -2
- package/src/js/emulation/gift-cards.js +205 -0
- package/src/js/page/basket-v2.js +244 -138
- package/src/js/page/components/discounts.js +6 -6
- package/src/js/page/components/gift-cards.js +895 -0
- package/src/js/page/components/order-summary.js +42 -25
- package/src/js/page/components/toggle-password-visibility.js +22 -0
- package/src/js/page/utils/gift-cards-utils.js +183 -0
- package/src/js/page/utils/input-handling.js +92 -0
- package/src/js/page/utils/show-hide-input.js +28 -0
- package/src/js/page/utils/validation.js +46 -1
- package/src/layouts/base.hbs +6 -0
- package/src/layouts/checkout.hbs +1 -5
- package/src/page_checkout_payment-details_guest-with-checkout-journey.html +1 -1
- package/src/page_my-account_change-password.html +1 -0
- package/src/page_my-order.html +1 -1
- package/src/page_payment-details-with-clearpay.html +2 -2
- package/src/page_payment-details-with-gift-card.html +8 -5
- package/src/page_shopping-cart-v2.html +2 -2
- package/src/partials/scripts.hbs +0 -1
- package/src/scss/components/_custom-slider.scss +3 -131
- package/src/scss/components/_gift-cards.scss +360 -0
- package/src/scss/components/_popover-mini-basket.scss +4 -0
- package/src/scss/components/checkout-payment-details-v2.scss +2 -0
- package/src/scss/pages/page_checkout_delivery-new.scss +26 -0
- package/src/scss/pages/page_product-details-v2.scss +4 -0
- package/src/sitemap.html +0 -6
- package/build/js/mini-basket-slider.min.js +0 -1
- package/build/js/page/basket/basket-update-cart-action.js +0 -59
- package/build/js/page/basket/basket-update-cart.js +0 -29
- package/build/js/page/basket/basket-utils.js +0 -50
- package/build/js/page/basket/mini-basket-total.js +0 -97
- package/build/js/page/basket/quantity-change-handler.js +0 -64
- package/build/js/page/basket/update-quantity-operation.js +0 -37
- package/build/js/page/basket/update-quantity.js +0 -65
- package/build/js/page/components/mini-basket-slider.js +0 -569
- package/src/components/mini-basket/mini-basket-order-item.hbs +0 -73
- package/src/js/components/toggle-password-visibility.js +0 -58
- package/src/js/emulation/mini-basket-data.js +0 -949
- package/src/js/page/basket/basket-update-cart-action.js +0 -59
- package/src/js/page/basket/basket-update-cart.js +0 -29
- package/src/js/page/basket/basket-utils.js +0 -50
- package/src/js/page/basket/mini-basket-total.js +0 -97
- package/src/js/page/basket/quantity-change-handler.js +0 -64
- package/src/js/page/basket/update-quantity-operation.js +0 -37
- package/src/js/page/basket/update-quantity.js +0 -65
- package/src/js/page/components/mini-basket-slider.js +0 -569
- package/src/page_split-orders-klarna.html +0 -106
|
@@ -13,31 +13,46 @@ const osEl = {
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export function updateOrderSummary(data, equalMap, isVoucher) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
$(obj.item).show();
|
|
19
|
-
} else {
|
|
20
|
-
if ($(osEl.checkoutWidgetDetailsDiscount).length) {
|
|
21
|
-
$(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj))
|
|
22
|
-
} else {
|
|
23
|
-
$(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj))
|
|
24
|
-
}
|
|
25
|
-
}
|
|
16
|
+
equalMap.forEach((obj) => {
|
|
17
|
+
if (typeof obj.dataValue === 'undefined') return;
|
|
26
18
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
19
|
+
if ($(obj.item).length) {
|
|
20
|
+
$(obj.item).show();
|
|
21
|
+
} else {
|
|
22
|
+
if ($(osEl.checkoutWidgetDetailsDiscount).length) {
|
|
23
|
+
$(osEl.checkoutWidgetDetailsDiscount).before(createCheckoutWidgetItem(obj));
|
|
24
|
+
} else {
|
|
25
|
+
$(osEl.checkoutWidgetDetails).append(createCheckoutWidgetItem(obj));
|
|
26
|
+
}
|
|
27
|
+
}
|
|
34
28
|
|
|
35
|
-
|
|
29
|
+
$(obj.item).find(obj.itemValue).text(obj.dataValue);
|
|
30
|
+
if (isVoucher ? obj.dataValue : obj.value && obj.dataValue) {
|
|
31
|
+
$(obj.item).find(obj.itemValue).show();
|
|
32
|
+
} else {
|
|
33
|
+
$(obj.item).hide();
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
36
|
|
|
37
|
+
const keys = new Set(Object.keys(data || {}));
|
|
38
|
+
const hasAny = (...arr) => arr.some(k => keys.has(k));
|
|
39
|
+
|
|
40
|
+
const value = data.totalPrice?.formattedValue || data.total;
|
|
41
|
+
if (typeof value !== 'undefined' && hasAny('total', 'totalPrice')) {
|
|
42
|
+
updateSummaryMobileBarTotal(value);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (hasAny('promotionsInfo')) {
|
|
37
46
|
updateDiscount(data, isVoucher);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (hasAny('deliveryOrder', 'clickAndCollectOrder', 'clickAndCollectOnly', 'deliveryItemsQuantity', 'pickupItemsQuantity')) {
|
|
38
50
|
hideUnusedDeliveryTypeCost(data, isVoucher);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (hasAny('freeDelivery', 'messageForFreeDelivery', 'clickAndCollectOnly')) {
|
|
39
54
|
calculateFreeDelivery(data);
|
|
40
|
-
|
|
55
|
+
}
|
|
41
56
|
}
|
|
42
57
|
|
|
43
58
|
function createCheckoutWidgetItem(obj) {
|
|
@@ -53,12 +68,14 @@ function hideUnusedDeliveryTypeCost(data, isVoucher) {
|
|
|
53
68
|
$(osEl.delivery).show()
|
|
54
69
|
$(osEl.cc).show()
|
|
55
70
|
if (isVoucher) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
71
|
+
if ('deliveryOrder' in data && data.deliveryOrder === false) {
|
|
72
|
+
$(osEl.delivery).hide();
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if ('clickAndCollectOrder' in data && data.clickAndCollectOrder === false) {
|
|
76
|
+
$(osEl.cc).hide();
|
|
77
|
+
}
|
|
78
|
+
} else {
|
|
62
79
|
if (data.clickAndCollectOnly) {
|
|
63
80
|
$(osEl.delivery).hide()
|
|
64
81
|
} else if (data.deliveryItemsQuantity > 0 && data.pickupItemsQuantity === 0) {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { initializeInputToggle } from "../utils/show-hide-input";
|
|
2
|
+
|
|
3
|
+
var Wick = window.Wick || {};
|
|
4
|
+
|
|
5
|
+
Wick.TogglePasswordVisibility = {
|
|
6
|
+
el: {
|
|
7
|
+
$containers: $('.form-row[data-show-content] .input-wrap'),
|
|
8
|
+
},
|
|
9
|
+
|
|
10
|
+
init() {
|
|
11
|
+
if (!this.el.$containers.length) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
this.el.$containers.each(function () {
|
|
15
|
+
initializeInputToggle($(this));
|
|
16
|
+
});
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
$(document).ready(function () {
|
|
21
|
+
Wick.TogglePasswordVisibility.init();
|
|
22
|
+
});
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { showLoader, hideLoader } from "./loader";
|
|
2
|
+
|
|
3
|
+
const SUMMARY_SELECTORS = {
|
|
4
|
+
subTotal: { item: '.checkout-widget__item-bold', value: '.checkout-widget__item-value', title: 'Items subtotal:' },
|
|
5
|
+
vat: { item: '.checkout-widget__item-vat', value: '.checkout-widget__item-value', title: 'VAT:' },
|
|
6
|
+
clickAndCollectCost: { item: '.checkout-widget__item-cc', value: '.checkout-widget__item-value', title: 'Click & Collect:' },
|
|
7
|
+
deliveryCost: { item: '.checkout-widget__item-delivery', value: '.checkout-widget__item-value', title: 'Delivery:' },
|
|
8
|
+
charityPrice: { item: '.checkout-widget__item-charity', value: '.checkout-widget__item-value', title: 'Charity donation:' },
|
|
9
|
+
discountTotal: { item: '.checkout-widget__details-discount', value: '.checkout-widget__detail-value' },
|
|
10
|
+
giftCardApplied: { item: '.checkout-widget__gift-card', value: '.checkout-widget__item-value', title: 'Gift Card:' },
|
|
11
|
+
total: { item: '.checkout-widget__total', value: '.checkout-widget__total-value' },
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const CURRENCY_KEYS = new Set([
|
|
15
|
+
'subTotal','vat','clickAndCollectCost','deliveryCost',
|
|
16
|
+
'charityPrice','discountTotal','total','giftCardApplied'
|
|
17
|
+
]);
|
|
18
|
+
|
|
19
|
+
const GIFT_CARD_ALREADY_ADDED = 'GIFT_CARD_ALREADY_ADDED';
|
|
20
|
+
const PIS_REQUEST_TIMEOUT = 'PIS-REQUEST-TIMEOUT';
|
|
21
|
+
const PIS_INTEGRATION_ERROR = 'PIS-INTEGRATION-ERROR';
|
|
22
|
+
const PIS_INSUFFICIENT_AMOUNT = 'PIS-INSUFFICIENT-AMOUNT';
|
|
23
|
+
const PIS_PROCESSING_ERROR = 'PIS_PROCESSING_ERROR';
|
|
24
|
+
const HYBRIS_REQUEST_TIMEOUT = 'HYBRIS-REQUEST-TIMEOUT';
|
|
25
|
+
const HYBRIS_PIS_INTEGRATION_ERROR = 'HYBRIS-PIS-INTEGRATION-ERROR';
|
|
26
|
+
const HYBRIS_PIS_CONNECTION_ERROR = 'HYBRIS-PIS_CONNECTION-ERROR';
|
|
27
|
+
const ZERO_BALANCE = 'ZERO_BALANCE'
|
|
28
|
+
|
|
29
|
+
export const DEFAULT_ERROR_MESSAGE =
|
|
30
|
+
'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.';
|
|
31
|
+
|
|
32
|
+
export const OK_CODE = 0;
|
|
33
|
+
|
|
34
|
+
export const MESSAGE_BY_CODE = {
|
|
35
|
+
10: 'Gift Card number and / or PIN not recognised. A Gift Card will be locked following three unsuccessful PIN attempts.',
|
|
36
|
+
16: 'Card locked due to three unsuccessful PIN entries. For support click here.',
|
|
37
|
+
20: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
38
|
+
21: 'Gift Card number not recognised.',
|
|
39
|
+
40: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
40
|
+
60: 'The entered Gift Card has expired. For support click here.',
|
|
41
|
+
75: 'The entered Gift Card is invalid. For support click here.',
|
|
42
|
+
[GIFT_CARD_ALREADY_ADDED]: 'Gift Card already added, please use a different card.',
|
|
43
|
+
[PIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
44
|
+
[PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
45
|
+
[PIS_INSUFFICIENT_AMOUNT]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
|
|
46
|
+
[PIS_PROCESSING_ERROR]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
|
|
47
|
+
[HYBRIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
48
|
+
[HYBRIS_PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
49
|
+
[HYBRIS_PIS_CONNECTION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
50
|
+
[ZERO_BALANCE]: 'Insufficient funds available, please try another Gift Card or alternate payment method.',
|
|
51
|
+
99: 'The entered Gift Card is invalid. For support click here.',
|
|
52
|
+
[-1]: 'Gift Card is unavailable at this time, please try later. For support click here.',
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export const PAY_MESSAGE_BY_CODE = {
|
|
56
|
+
101: 'Unable to use Gift Cards at this time, please try later or click here for support.',
|
|
57
|
+
102: 'Unfortunately there was a problem with requesting your card details from the payment provider. Available funds on your Gift Card are unchanged.',
|
|
58
|
+
103: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
|
|
59
|
+
104: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
|
|
60
|
+
[PIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
61
|
+
[PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
62
|
+
[PIS_INSUFFICIENT_AMOUNT]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
|
|
63
|
+
[PIS_PROCESSING_ERROR]: 'Unfortunately there was a problem placing your order with Gift Card(s). Please click here for support.',
|
|
64
|
+
[HYBRIS_REQUEST_TIMEOUT]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
65
|
+
[HYBRIS_PIS_INTEGRATION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
66
|
+
[HYBRIS_PIS_CONNECTION_ERROR]: 'Unable to use Gift Card at this time, please try later or click here for support.',
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export const ADD_GIFT_CARD = 'addGiftCard';
|
|
70
|
+
export const REMOVE_GIFT_CARD = 'removeGiftCard';
|
|
71
|
+
export const PAY_WITH_GIFT_CARD = 'payWithGiftCard';
|
|
72
|
+
|
|
73
|
+
export const FAQ_URL = 'https://www.wickes.co.uk/gifts';
|
|
74
|
+
|
|
75
|
+
export const escapeHtml = (s) => $('<div>').text(String(s || '')).html();
|
|
76
|
+
|
|
77
|
+
export const linkifyClickHere = (msg) =>
|
|
78
|
+
escapeHtml(msg).replace(
|
|
79
|
+
/\bclick here\b/gi,
|
|
80
|
+
`<a href="${FAQ_URL}" target="_blank" rel="noopener" class="notification_link">click here</a>`
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
export function formatGc16(raw) {
|
|
84
|
+
const digits = String(raw || '').replace(/\D/g, '').slice(0, 16);
|
|
85
|
+
return digits.replace(/(\d{4})(?=\d)/g, '$1-');
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
function formatGBP(value) {
|
|
89
|
+
if (value === null || typeof value === 'undefined' || String(value).trim() === '') {
|
|
90
|
+
return value;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const cleanedValue = String(value).replace(/[^\d.-]/g, '');
|
|
94
|
+
const numberValue = Number(cleanedValue);
|
|
95
|
+
|
|
96
|
+
if (Number.isFinite(numberValue)) {
|
|
97
|
+
return `£${numberValue.toFixed(2)}`;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return value;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export function buildHintContext(count, limit) {
|
|
104
|
+
const max = count >= limit;
|
|
105
|
+
|
|
106
|
+
return {
|
|
107
|
+
canAdd: !max,
|
|
108
|
+
max,
|
|
109
|
+
hintClass: `giftcard-summary__hint${max ? ' giftcard-summary__hint--max' : ''}`,
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export function buildSummaryEqualMap(data) {
|
|
114
|
+
return Object.entries(SUMMARY_SELECTORS).map(([key, d]) => {
|
|
115
|
+
const raw = data[key];
|
|
116
|
+
let dataValue = raw;
|
|
117
|
+
|
|
118
|
+
if (key === 'giftCardApplied') {
|
|
119
|
+
if (isZeroAmount(raw)) {
|
|
120
|
+
dataValue = '';
|
|
121
|
+
} else if (raw != null && raw !== '') {
|
|
122
|
+
dataValue = formatGBP(raw);
|
|
123
|
+
if (typeof dataValue === 'string' && dataValue.startsWith('£')) {
|
|
124
|
+
dataValue = `-${dataValue}`;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
} else {
|
|
128
|
+
if (CURRENCY_KEYS.has(key) && raw != null && raw !== '') {
|
|
129
|
+
dataValue = formatGBP(raw);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
return {
|
|
134
|
+
item: d.item,
|
|
135
|
+
itemValue: d.value,
|
|
136
|
+
dataValue,
|
|
137
|
+
...(d.title ? { title: d.title } : {}),
|
|
138
|
+
};
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export function isZeroAmount(val) {
|
|
143
|
+
const cleaned = String(val ?? '').replace(/[^\d.]/g, '');
|
|
144
|
+
if (!cleaned) {
|
|
145
|
+
return false;
|
|
146
|
+
}
|
|
147
|
+
const num = Number(cleaned);
|
|
148
|
+
return Number.isFinite(num) && num === 0;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// --- API/Event-Dispatching Functions ---
|
|
152
|
+
|
|
153
|
+
export function verifyGiftCard($loader, giftCardNumber, pin) {
|
|
154
|
+
showLoader($loader);
|
|
155
|
+
return new Promise((resolve, reject) => {
|
|
156
|
+
const payload = { giftCardNumber, pin };
|
|
157
|
+
const detail = { resolve, reject, payload };
|
|
158
|
+
const evt = createEvent(ADD_GIFT_CARD, payload, detail);
|
|
159
|
+
window.dispatchEvent(evt);
|
|
160
|
+
}).finally(() => {
|
|
161
|
+
hideLoader($loader);
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
export function removeGiftCard($loader, index) {
|
|
166
|
+
showLoader($loader);
|
|
167
|
+
return new Promise((resolve, reject) => {
|
|
168
|
+
const payload = { index };
|
|
169
|
+
const detail = { resolve, reject, payload };
|
|
170
|
+
const evt = createEvent(REMOVE_GIFT_CARD, payload, detail);
|
|
171
|
+
window.dispatchEvent(evt);
|
|
172
|
+
}).finally(() => {
|
|
173
|
+
hideLoader($loader);
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
export function payWithGiftCard() {
|
|
178
|
+
return new Promise((resolve, reject) => {
|
|
179
|
+
const detail = { resolve, reject };
|
|
180
|
+
const evt = createEvent(PAY_WITH_GIFT_CARD, undefined, detail);
|
|
181
|
+
window.dispatchEvent(evt);
|
|
182
|
+
});
|
|
183
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import {formatGc16} from './gift-cards-utils';
|
|
2
|
+
import {clearErrorText, showErrorText} from './validation';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export function createGcNumberInputHandler({
|
|
6
|
+
fieldSelector,
|
|
7
|
+
fieldErrorClass,
|
|
8
|
+
errorTextSelector,
|
|
9
|
+
ariaInvalidAttr
|
|
10
|
+
}) {
|
|
11
|
+
return function handleGcNumberInput(e) {
|
|
12
|
+
const input = e.currentTarget;
|
|
13
|
+
const $input = $(input);
|
|
14
|
+
|
|
15
|
+
const canTrack = typeof input.selectionStart === 'number';
|
|
16
|
+
const atEnd = canTrack && input.selectionStart === input.value.length;
|
|
17
|
+
|
|
18
|
+
const hadErr = $input.closest(fieldSelector).hasClass(fieldErrorClass);
|
|
19
|
+
|
|
20
|
+
input.value = formatGc16(input.value);
|
|
21
|
+
|
|
22
|
+
if (hadErr) {
|
|
23
|
+
clearErrorText($input, fieldSelector, errorTextSelector, fieldErrorClass, ariaInvalidAttr);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
if (atEnd && typeof input.setSelectionRange === 'function') {
|
|
27
|
+
input.setSelectionRange(input.value.length, input.value.length);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export function digitsOnlyKeypress(e) {
|
|
33
|
+
if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) {
|
|
34
|
+
e.preventDefault();
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export function handleGcNumberBlur(e, {
|
|
39
|
+
fieldSelector,
|
|
40
|
+
errorTextSelector,
|
|
41
|
+
errorClass,
|
|
42
|
+
ariaInvalidAttr,
|
|
43
|
+
numberMessage,
|
|
44
|
+
}) {
|
|
45
|
+
const $input = $(e.currentTarget);
|
|
46
|
+
const len = String($input.val() || '').replace(/\D/g, '').length;
|
|
47
|
+
|
|
48
|
+
clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
|
|
49
|
+
|
|
50
|
+
if (len < 16) {
|
|
51
|
+
showErrorText($input, numberMessage, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export function handleGcPinInput(e, {
|
|
56
|
+
fieldSelector,
|
|
57
|
+
errorTextSelector,
|
|
58
|
+
errorClass,
|
|
59
|
+
ariaInvalidAttr,
|
|
60
|
+
}) {
|
|
61
|
+
const input = e.currentTarget;
|
|
62
|
+
const $input = $(input);
|
|
63
|
+
|
|
64
|
+
const hadErr = $input.closest(fieldSelector).hasClass(errorClass);
|
|
65
|
+
input.value = String(input.value || '').replace(/\D/g, '').slice(0, 8);
|
|
66
|
+
|
|
67
|
+
if (hadErr) {
|
|
68
|
+
clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
export function handleGcPinKeypress(e) {
|
|
74
|
+
if (!/\d/.test(String.fromCharCode(e.which || e.keyCode))) e.preventDefault();
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export function handleGcPinBlur(e, {
|
|
78
|
+
fieldSelector,
|
|
79
|
+
errorTextSelector,
|
|
80
|
+
errorClass,
|
|
81
|
+
ariaInvalidAttr,
|
|
82
|
+
pinMessage,
|
|
83
|
+
}) {
|
|
84
|
+
const $input = $(e.currentTarget);
|
|
85
|
+
const length = String($input.val() || '').replace(/\D/g, '').length;
|
|
86
|
+
|
|
87
|
+
clearErrorText($input, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
|
|
88
|
+
|
|
89
|
+
if (length < 8) {
|
|
90
|
+
showErrorText($input, pinMessage, fieldSelector, errorTextSelector, errorClass, ariaInvalidAttr);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export function initializeInputToggle($container) {
|
|
2
|
+
const $input = $container.find('input');
|
|
3
|
+
const $toggle = $container.find('.toggle-show');
|
|
4
|
+
|
|
5
|
+
if (!$input.length || !$toggle.length) return;
|
|
6
|
+
|
|
7
|
+
const handleToggleClick = (e) => {
|
|
8
|
+
e.preventDefault();
|
|
9
|
+
|
|
10
|
+
const isPassword = String($input.attr('type')) === 'password';
|
|
11
|
+
$input.attr('type', isPassword ? 'text' : 'password');
|
|
12
|
+
const $icon = $toggle.find('svg, i').first();
|
|
13
|
+
|
|
14
|
+
if ($icon.length) {
|
|
15
|
+
$icon.removeClass('fa-eye fa-eye-slash').addClass(isPassword ? 'fa-eye' : 'fa-eye-slash');
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const updateToggleVisibility = () => {
|
|
20
|
+
$toggle.toggle(($input.val() || '').length > 0);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
$toggle.off('click.passwordToggle mousedown.passwordToggle')
|
|
24
|
+
.on('mousedown.passwordToggle', handleToggleClick);
|
|
25
|
+
|
|
26
|
+
$input.off('input.passwordToggle').on('input.passwordToggle', updateToggleVisibility);
|
|
27
|
+
updateToggleVisibility();
|
|
28
|
+
}
|
|
@@ -257,7 +257,6 @@ export function wrapWithError(element) {
|
|
|
257
257
|
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
-
|
|
261
260
|
export function addErrorMessage(element, errorMessage) {
|
|
262
261
|
if (errorMessage) {
|
|
263
262
|
$(element).append('<div class="form-row__error">' + errorMessage + '</div>');
|
|
@@ -316,3 +315,49 @@ export function validateGuidPattern (value) {
|
|
|
316
315
|
export function validateUserFriendlyIdPattern (value) {
|
|
317
316
|
return patterns.userFriendlyIdPattern.test(value);
|
|
318
317
|
}
|
|
318
|
+
|
|
319
|
+
export function showErrorText($input, message, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr) {
|
|
320
|
+
const $field = $input.closest(fieldSelector);
|
|
321
|
+
$field.addClass(errorClass);
|
|
322
|
+
$input.attr(ariaInvalidAttr, 'true');
|
|
323
|
+
|
|
324
|
+
let $err = $field.find(errorTextClass);
|
|
325
|
+
if (!$err.length) {
|
|
326
|
+
$err = $(`<div class="${errorTextClass.slice(1)}" />`).appendTo($field);
|
|
327
|
+
}
|
|
328
|
+
$err.text(message);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
export function clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr) {
|
|
332
|
+
const $field = $input.closest(fieldSelector);
|
|
333
|
+
$field.removeClass(errorClass);
|
|
334
|
+
$input.removeAttr(ariaInvalidAttr);
|
|
335
|
+
$field.find(errorTextClass).remove();
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
function digitsOnly(value) {
|
|
339
|
+
return String(value || '').replace(/\D/g, '');
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
function hasExactDigits(value, n) {
|
|
343
|
+
return digitsOnly(value).length === Number(n);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
function validateByPredicate($input, predicate, message, {
|
|
347
|
+
fieldSelector,
|
|
348
|
+
errorText: errorTextClass,
|
|
349
|
+
fieldError: errorClass,
|
|
350
|
+
ariaInvalidAttr,
|
|
351
|
+
}) {
|
|
352
|
+
const ok = !!predicate(String($input.val() || ''));
|
|
353
|
+
if (!ok) {
|
|
354
|
+
showErrorText($input, message, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
|
|
355
|
+
} else {
|
|
356
|
+
clearErrorText($input, fieldSelector, errorTextClass, errorClass, ariaInvalidAttr);
|
|
357
|
+
}
|
|
358
|
+
return ok;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
export function validateExactDigits($input, n, message, cfg) {
|
|
362
|
+
return validateByPredicate($input, (v) => hasExactDigits(v, n), message, cfg);
|
|
363
|
+
}
|
package/src/layouts/base.hbs
CHANGED
package/src/layouts/checkout.hbs
CHANGED
|
@@ -22,14 +22,10 @@
|
|
|
22
22
|
{{/block}}
|
|
23
23
|
<a id="skip-to-content"></a>
|
|
24
24
|
<main {{#if fullWidth}}class="full-width-content"{{/if}}>
|
|
25
|
-
<div class="globalMessages">
|
|
26
|
-
<div class="container">
|
|
27
|
-
{{#block "notification"}}{{/block}}
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
25
|
<div class="container">
|
|
31
26
|
<div class="row">
|
|
32
27
|
{{#block "steps"}}{{/block}}
|
|
28
|
+
{{#block "notification"}}{{/block}}
|
|
33
29
|
<div class="content">
|
|
34
30
|
{{#block "main"}}{{/block}}
|
|
35
31
|
</div>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{/content}}
|
|
10
10
|
|
|
11
11
|
{{#content "aside"}}
|
|
12
|
-
{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
|
|
12
|
+
{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true paymentsCheckoutV2=true}}
|
|
13
13
|
{{/content}}
|
|
14
14
|
|
|
15
15
|
{{#content "main"}}
|
package/src/page_my-order.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true}}
|
|
1
|
+
{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true checkout=true}}
|
|
2
2
|
|
|
3
3
|
{{#content "head" mode="append"}}
|
|
4
4
|
<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
{{/content}}
|
|
17
17
|
|
|
18
18
|
{{#content "aside"}}
|
|
19
|
-
{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon}}
|
|
19
|
+
{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon paymentsCheckoutV2=true checkout=true}}
|
|
20
20
|
{{/content}}
|
|
21
21
|
|
|
22
22
|
|
|
@@ -8,13 +8,15 @@
|
|
|
8
8
|
|
|
9
9
|
<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
|
|
10
10
|
{{/content}}
|
|
11
|
-
{{#content "notification"}}
|
|
12
|
-
{{> notifications notification-page.error text="Sorry, there are errors on this page. Please review the information you've entered and update sections marked in red."}}
|
|
13
|
-
{{/content}}
|
|
14
11
|
{{#content "steps"}}
|
|
15
12
|
{{> steps-three-steps active-step-index="2"}}
|
|
16
13
|
{{/content}}
|
|
17
14
|
|
|
15
|
+
{{#content "notification"}}
|
|
16
|
+
<div class="globalMessages container">
|
|
17
|
+
</div>
|
|
18
|
+
{{/content}}
|
|
19
|
+
|
|
18
20
|
{{#content "aside"}}
|
|
19
21
|
{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true clearPayIcon=clearPayIcon billieIcon=true paymentsCheckoutV2=true checkout=true}}
|
|
20
22
|
{{/content}}
|
|
@@ -46,7 +48,7 @@
|
|
|
46
48
|
<div class="billing-payment-block">
|
|
47
49
|
<h3 class="billing-payment-block__heading">Billing & Payment</h3>
|
|
48
50
|
<div class="billing-payment-block__wrapper">
|
|
49
|
-
{{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true
|
|
51
|
+
{{> checkout-payment-details-v2 apple-pay=true google-pay=true clear-pay=true klarna-method=true}}
|
|
50
52
|
</div>
|
|
51
53
|
</div>
|
|
52
54
|
|
|
@@ -61,7 +63,8 @@
|
|
|
61
63
|
<script defer src="./js/page/checkout-payment-details.js"></script>
|
|
62
64
|
<script defer src="./js/page/klarna-modal-scroll-disable.js"></script>
|
|
63
65
|
<script defer src="./js/page/billie-business-type.js"></script>
|
|
66
|
+
<script defer src="./js/gift-cards.min.js"></script>
|
|
64
67
|
{{> checkout-terms-and-conditions-modal }}
|
|
65
|
-
{{>
|
|
68
|
+
{{> loader hidden=true modifier="page-loader"}}
|
|
66
69
|
{{/content}}
|
|
67
70
|
{{/extend}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket" billieIcon=
|
|
1
|
+
{{#extend "basket-new" page_shopping-cart pageClass="page_basket basket" title="Basket" billieIcon=false}}
|
|
2
2
|
{{#content "head" mode="append"}}
|
|
3
3
|
<link type="text/css" rel="stylesheet" href="./css/pages/page_shopping-cart-v2.css">
|
|
4
4
|
<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
}}
|
|
28
28
|
{{> checkout-action mod="mounted"}}
|
|
29
29
|
{{> checkout-action mod="mounted" view="mobile"}}
|
|
30
|
-
{{> summary-payment paymentsCheckoutV2=true billieIcon=
|
|
30
|
+
{{> summary-payment paymentsCheckoutV2=true billieIcon=false}}
|
|
31
31
|
{{/content}}
|
|
32
32
|
{{#content "main"}}
|
|
33
33
|
<input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
|
package/src/partials/scripts.hbs
CHANGED
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
<script src="./js/basket.min.js"></script>
|
|
15
15
|
{{/ifCond}}
|
|
16
16
|
{{!-- BUNDLES END --}}
|
|
17
|
-
<script src="./js/mini-basket-slider.min.js"></script>
|
|
18
17
|
<script src="./js/emulation.min.js"></script>
|
|
19
18
|
<script defer src="https://kit.fontawesome.com/b73abc6840.js" crossorigin="anonymous"></script>
|
|
20
19
|
{{#if pagePdp}}
|