The repo for Purrform's main BigCommerce store.
feat: enhance checkout process with credit system validation and button visibility control
+74
-127
+41
-117
templates/components/cart/totals.html
+41
-117
templates/components/cart/totals.html
···
1
-
2
-
{{#if customer_group_name '===' 'Trade'}}
3
1
<script type="module">
4
-
try {
5
-
const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', {
6
-
method: 'GET',
7
-
headers: {
8
-
'Content-Type': 'application/json',
9
-
}
10
-
});
11
-
12
-
if (response.ok) {
13
-
const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[]
14
-
const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}');
15
-
16
-
if (traderInCreditSystem) {
17
-
// Update the credit balance display
18
-
const creditBalanceElement = document.querySelector('.cart-total-credit-balance .cart-total-value');
19
-
creditBalanceElement.textContent = `£${traderInCreditSystem.current_balance.toFixed(2)}`;
20
-
const creditBalanceContainer = document.querySelector('.cart-total-credit-balance');
21
-
creditBalanceContainer.style.display = 'flex';
22
-
23
-
const cartTotal = Number('{{cart.grand_total.value}}');
24
-
25
-
// Add overdue message if applicable
26
-
const creditErrorMessageEl = document.querySelector('.credit-balance-message');
27
-
if (traderInCreditSystem.has_overdue) {
28
-
creditErrorMessageEl.innerHTML = '<span>You have overdue order(s) unpaid. New orders will not be processed until payment is made. <a href="/account.php?action=order_status">Click here</a> to see the overdue order(s) in your account.</span>';
29
-
creditErrorMessageEl.style.display = 'block';
30
-
} else if (cartTotal > traderInCreditSystem.current_balance) {
31
-
creditErrorMessageEl.textContent = 'Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order.';
32
-
creditErrorMessageEl.style.display = 'block';
33
-
}
2
+
const customerGroupName = '{{customer_group_name}}';
3
+
const tradeCustomerGroupNames = ['Trade', 'New Trader', 'Trader TNC'];
4
+
const isTraderGroup = tradeCustomerGroupNames.includes(customerGroupName);
34
5
35
-
const needToDisableCheckout = traderInCreditSystem.has_overdue || cartTotal > traderInCreditSystem.current_balance;
36
-
const agreeCheckbox = document.querySelector('.validate-cart');
37
-
agreeCheckbox.parentNode.style.display = needToDisableCheckout ? 'none' : 'block';
38
-
39
-
}
40
-
}
41
-
} catch (error) {
42
-
console.error('Error fetching trader data:', error);
43
-
}
44
-
</script>
45
-
{{else if customer_group_name '===' 'New Trader'}}
46
-
<script type="module">
47
-
try {
48
-
const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', {
49
-
method: 'GET',
50
-
headers: {
6
+
if (isTraderGroup) {
7
+
try {
8
+
const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', {
9
+
method: 'GET',
10
+
headers: {
51
11
'Content-Type': 'application/json',
52
-
}
53
-
});
54
-
55
-
if (response.ok) {
56
-
const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[]
57
-
const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}');
58
-
59
-
if (traderInCreditSystem) {
60
-
// Update the credit balance display
61
-
const creditBalanceElement = document.querySelector('.cart-total-credit-balance .cart-total-value');
62
-
creditBalanceElement.textContent = `£${traderInCreditSystem.current_balance.toFixed(2)}`;
63
-
const creditBalanceContainer = document.querySelector('.cart-total-credit-balance');
64
-
creditBalanceContainer.style.display = 'flex';
65
-
66
-
const cartTotal = Number('{{cart.grand_total.value}}');
67
-
68
-
// Add overdue message if applicable
69
-
const creditErrorMessageEl = document.querySelector('.credit-balance-message');
70
-
if (traderInCreditSystem.has_overdue) {
71
-
creditErrorMessageEl.innerHTML = '<span>You have overdue order(s) unpaid. New orders will not be processed until payment is made. <a href="/account.php?action=order_status">Click here</a> to see the overdue order(s) in your account.</span>';
72
-
creditErrorMessageEl.style.display = 'block';
73
-
} else if (cartTotal > traderInCreditSystem.current_balance) {
74
-
creditErrorMessageEl.textContent = 'Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order.';
75
-
creditErrorMessageEl.style.display = 'block';
76
12
}
13
+
});
77
14
78
-
const needToDisableCheckout = traderInCreditSystem.has_overdue || cartTotal > traderInCreditSystem.current_balance;
79
-
const agreeCheckbox = document.querySelector('.validate-cart');
80
-
agreeCheckbox.parentNode.style.display = needToDisableCheckout ? 'none' : 'block';
15
+
if (response.ok) {
16
+
const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[]
17
+
const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}');
81
18
82
-
}
83
-
}
84
-
} catch (error) {
85
-
console.error('Error fetching trader data:', error);
86
-
}
87
-
</script>
88
-
{{else if customer_group_name '===' 'Trade TNC'}}
89
-
<script type="module">
90
-
try {
91
-
const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', {
92
-
method: 'GET',
93
-
headers: {
94
-
'Content-Type': 'application/json',
95
-
}
96
-
});
19
+
if (traderInCreditSystem) {
20
+
// Update the credit balance display
21
+
const creditBalanceElement = document.querySelector('.cart-total-credit-balance .cart-total-value');
22
+
creditBalanceElement.textContent = `£${traderInCreditSystem.current_balance.toFixed(2)}`;
23
+
const creditBalanceContainer = document.querySelector('.cart-total-credit-balance');
24
+
creditBalanceContainer.style.display = 'flex';
97
25
98
-
if (response.ok) {
99
-
const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[]
100
-
const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}');
26
+
const cartTotal = Number('{{cart.grand_total.value}}');
101
27
102
-
if (traderInCreditSystem) {
103
-
// Update the credit balance display
104
-
const creditBalanceElement = document.querySelector('.cart-total-credit-balance .cart-total-value');
105
-
creditBalanceElement.textContent = `£${traderInCreditSystem.current_balance.toFixed(2)}`;
106
-
const creditBalanceContainer = document.querySelector('.cart-total-credit-balance');
107
-
creditBalanceContainer.style.display = 'flex';
28
+
// Add overdue message if applicable
29
+
const creditErrorMessageEl = document.querySelector('.credit-balance-message');
30
+
if (traderInCreditSystem.has_overdue) {
31
+
creditErrorMessageEl.innerHTML = '<span>You have overdue order(s) unpaid. New orders will not be processed until payment is made. <a href="/account.php?action=order_status">Click here</a> to see the overdue order(s) in your account.</span>';
32
+
creditErrorMessageEl.style.display = 'block';
33
+
} else if (cartTotal > traderInCreditSystem.current_balance) {
34
+
creditErrorMessageEl.textContent = 'Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order.';
35
+
creditErrorMessageEl.style.display = 'block';
36
+
}
108
37
109
-
const cartTotal = Number('{{cart.grand_total.value}}');
110
-
111
-
// Add overdue message if applicable
112
-
const creditErrorMessageEl = document.querySelector('.credit-balance-message');
113
-
if (traderInCreditSystem.has_overdue) {
114
-
creditErrorMessageEl.innerHTML = '<span>You have overdue order(s) unpaid. New orders will not be processed until payment is made. <a href="/account.php?action=order_status">Click here</a> to see the overdue order(s) in your account.</span>';
115
-
creditErrorMessageEl.style.display = 'block';
116
-
} else if (cartTotal > traderInCreditSystem.current_balance) {
117
-
creditErrorMessageEl.textContent = 'Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order.';
118
-
creditErrorMessageEl.style.display = 'block';
38
+
const needToDisableCheckout = traderInCreditSystem.has_overdue || cartTotal > traderInCreditSystem.current_balance;
39
+
if (needToDisableCheckout) {
40
+
window.__purrformCheckoutBlocked = true;
41
+
}
42
+
const agreeCheckbox = document.querySelector('.validate-cart');
43
+
agreeCheckbox.parentNode.style.display = needToDisableCheckout ? 'none' : 'block';
44
+
const checkoutButton = document.querySelector('.cart-actions .button--primary');
45
+
if (checkoutButton) {
46
+
checkoutButton.disabled = needToDisableCheckout;
47
+
checkoutButton.style.display = needToDisableCheckout ? 'none' : 'inline-block';
48
+
}
119
49
}
120
-
121
-
const needToDisableCheckout = traderInCreditSystem.has_overdue || cartTotal > traderInCreditSystem.current_balance;
122
-
const agreeCheckbox = document.querySelector('.validate-cart');
123
-
agreeCheckbox.parentNode.style.display = needToDisableCheckout ? 'none' : 'block';
124
-
125
50
}
51
+
} catch (error) {
52
+
console.error('Error fetching trader data:', error);
126
53
}
127
-
} catch (error) {
128
-
console.error('Error fetching trader data:', error);
129
54
}
130
55
</script>
131
-
{{/if}}
132
56
133
57
<div data-cart-totals class="cart-free-delivery" style="border: none;">
134
58
<!-- Hidden for now
+1
templates/pages/cart.html
+1
templates/pages/cart.html
+32
-10
templates/pages/checkout.html
+32
-10
templates/pages/checkout.html
···
90
90
</script>
91
91
92
92
<script>
93
+
window.__purrformCheckoutBlocked = false;
94
+
93
95
// Handles non-cumulative discounts
94
96
const couponsElSelector = 'a.redeemable-label';
95
97
ready(couponsElSelector, (couponsEl) => {
···
1086
1088
const deliveryDetailsSelector =
1087
1089
'fieldset.form-fieldset[data-test="checkout-shipping-comments"]';
1088
1090
ready(deliveryDetailsSelector, (deliveryDetailsElement) => {
1091
+
if (window.__purrformCheckoutBlocked) return;
1089
1092
const existingInstructions =
1090
1093
document.getElementById('instruction-wrap');
1091
1094
if (existingInstructions) {
···
1137
1140
// This handles the payment continue button
1138
1141
const paymentContinueButtonSelector = '#checkout-payment-continue';
1139
1142
ready(paymentContinueButtonSelector, (paymentContinueButton) => {
1143
+
if (window.__purrformCheckoutBlocked) {
1144
+
paymentContinueButton.style.display = 'none';
1145
+
return;
1146
+
}
1140
1147
if (document.getElementById('fakeButton')) {
1141
1148
document.getElementById('fakeButton').remove();
1142
1149
}
···
1287
1294
1288
1295
1289
1296
if (hasOverdue || lowBalance) {
1290
-
// Hide the payment button if there is an overdue order or low balance
1291
-
ready('#fakeButton', (element) => {
1292
-
element.remove()
1293
-
});
1297
+
window.__purrformCheckoutBlocked = true;
1294
1298
1295
-
ready('#proceedButton', (element) => {
1296
-
element.style.display = hasOverdue || lowBalance ? 'none' : 'block';
1297
-
});
1299
+
const creditPaymentButton = document.querySelector('#creditPaymentButton');
1300
+
if (creditPaymentButton) {
1301
+
creditPaymentButton.disabled = true;
1302
+
creditPaymentButton.style.display = 'none';
1303
+
creditPaymentButton.remove();
1304
+
}
1305
+
const fakeButton = document.querySelector('#fakeButton');
1306
+
if (fakeButton) {
1307
+
fakeButton.disabled = true;
1308
+
fakeButton.style.display = 'none';
1309
+
fakeButton.remove();
1310
+
}
1311
+
const proceedButton = document.querySelector('#proceedButton');
1312
+
if (proceedButton) {
1313
+
proceedButton.disabled = true;
1314
+
proceedButton.style.display = 'none';
1315
+
proceedButton.remove();
1316
+
}
1317
+
const checkoutContinueButton = document.querySelector('#checkoutPaymentContinue');
1318
+
if (checkoutContinueButton) {
1319
+
checkoutContinueButton.disabled = true;
1320
+
checkoutContinueButton.style.display = 'none';
1321
+
checkoutContinueButton.remove();
1322
+
}
1298
1323
1299
-
ready('#checkoutPaymentContinue', (element) => {
1300
-
element.style.display = hasOverdue || lowBalance ? 'none' : 'block';
1301
-
});
1302
1324
} else {
1303
1325
// change the fakeButton text to Pay Now
1304
1326
ready('#fakeButton', (element) => {