rogerioromao.dev / purrform-frontend
The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

37 improve checkout for credit system (#39)

authored by

Rogerio Romao and committed by
GitHub 69258571 42803518

+126 -210
+1 -1
config.json
··· 1 1 { 2 - "name": "valentines promo", 2 + "name": "credit system checkout", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {
+125 -209
templates/pages/checkout.html
··· 1253 1253 }); 1254 1254 </script> 1255 1255 1256 - {{#if customer_group_name '===' 'Trade'}} 1257 1256 <script type="module"> 1258 - let hasOverdue = false; 1259 - let lowBalance = false; 1257 + const customerGroupName = '{{customer_group_name}}'; 1258 + const tradeCustomerGroupNames = ['Trade', 'New Trader', 'Trader TNC']; 1259 + const isTraderGroup = tradeCustomerGroupNames.includes(customerGroupName); 1260 1260 1261 - try { 1262 - const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', { 1263 - method: 'GET', 1264 - headers: { 1265 - 'Content-Type': 'application/json', 1266 - } 1267 - }); 1261 + if (isTraderGroup) { 1262 + let hasOverdue = false; 1263 + let lowBalance = false; 1268 1264 1269 - if (response.ok) { 1270 - const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[] 1271 - const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}'); 1272 - 1273 - if (traderInCreditSystem) { 1274 - // Put the credit balance info before the cart subtotal 1275 - ready('div[data-test="cart-subtotal"]', (element) => { 1276 - element.insertAdjacentHTML( 1277 - 'beforebegin', 1278 - `<div class="creditBalanceInfo"> 1279 - <div>Credit Balance </div> 1280 - <div class="creditBalanceAmount">£${traderInCreditSystem.current_balance.toFixed(2)}</div> 1281 - </div>` 1282 - ); 1283 - }); 1265 + try { 1266 + const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', { 1267 + method: 'GET', 1268 + headers: { 1269 + 'Content-Type': 'application/json', 1270 + } 1271 + }); 1284 1272 1285 - // Add any overdue / low balance message to the cart total section 1286 - ready('div[data-test="cart-total"]', (element) => { 1287 - hasOverdue = traderInCreditSystem.has_overdue; 1273 + if (response.ok) { 1274 + const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[] 1275 + const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}'); 1288 1276 1289 - if (hasOverdue) { 1277 + if (traderInCreditSystem) { 1278 + // Put the credit balance info before the cart subtotal 1279 + ready('div[data-test="cart-subtotal"]', (element) => { 1290 1280 element.insertAdjacentHTML( 1291 - 'beforeend', 1292 - `<div class="credit-balance-message"> 1293 - 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. 1281 + 'beforebegin', 1282 + `<div class="creditBalanceInfo"> 1283 + <div>Credit Balance </div> 1284 + <div class="creditBalanceAmount">£${traderInCreditSystem.current_balance.toFixed(2)}</div> 1294 1285 </div>` 1295 1286 ); 1296 - } else { 1297 - const cartTotalText = document.querySelector( 1298 - 'div[data-test="cart-total"] span[data-test="cart-price-value"]' 1299 - ).textContent; 1300 - const cartTotal = Number(cartTotalText.replace('£', '')); 1301 - lowBalance = cartTotal > traderInCreditSystem.current_balance; 1302 - 1303 - if (lowBalance) { 1304 - element.insertAdjacentHTML( 1305 - 'beforeend', 1306 - `<div class="credit-balance-message"> 1307 - Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order. 1308 - </div>` 1309 - ); 1310 - } 1311 - 1312 - } 1313 - 1314 - }); 1315 - 1316 - 1317 - if (hasOverdue || lowBalance) { 1318 - // Hide the payment button if there is an overdue order or low balance 1319 - ready('#fakeButton', (element) => { 1320 - element.remove() 1321 1287 }); 1322 1288 1323 - ready('#proceedButton', (element) => { 1324 - element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1325 - }); 1289 + // Add any overdue / low balance message to the cart total section 1290 + ready('div[data-test="cart-total"]', (element) => { 1291 + hasOverdue = traderInCreditSystem.has_overdue; 1326 1292 1327 - ready('#checkoutPaymentContinue', (element) => { 1328 - element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1329 - }); 1330 - } 1331 - } 1332 - } 1333 - } catch (error) { 1334 - console.error('Error fetching trader data:', error); 1335 - } 1336 - 1337 - </script> 1338 - {{else if customer_group_name '===' 'New Trader'}} 1339 - <script type="module"> 1340 - let hasOverdue = false; 1341 - let lowBalance = false; 1342 - 1343 - try { 1344 - const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', { 1345 - method: 'GET', 1346 - headers: { 1347 - 'Content-Type': 'application/json', 1348 - } 1349 - }); 1350 - 1351 - if (response.ok) { 1352 - const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[] 1353 - const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}'); 1354 - 1355 - if (traderInCreditSystem) { 1356 - // Put the credit balance info before the cart subtotal 1357 - ready('div[data-test="cart-subtotal"]', (element) => { 1358 - element.insertAdjacentHTML( 1359 - 'beforebegin', 1360 - `<div class="creditBalanceInfo"> 1361 - <div>Credit Balance </div> 1362 - <div class="creditBalanceAmount">£${traderInCreditSystem.current_balance.toFixed(2)}</div> 1363 - </div>` 1364 - ); 1365 - }); 1366 - 1367 - // Add any overdue / low balance message to the cart total section 1368 - ready('div[data-test="cart-total"]', (element) => { 1369 - hasOverdue = traderInCreditSystem.has_overdue; 1370 - 1371 - if (hasOverdue) { 1372 - element.insertAdjacentHTML( 1373 - 'beforeend', 1374 - `<div class="credit-balance-message"> 1375 - 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. 1376 - </div>` 1377 - ); 1378 - } else { 1379 - const cartTotalText = document.querySelector( 1380 - 'div[data-test="cart-total"] span[data-test="cart-price-value"]' 1381 - ).textContent; 1382 - const cartTotal = Number(cartTotalText.replace('£', '')); 1383 - lowBalance = cartTotal > traderInCreditSystem.current_balance; 1384 - 1385 - if (lowBalance) { 1293 + if (hasOverdue) { 1386 1294 element.insertAdjacentHTML( 1387 1295 'beforeend', 1388 1296 `<div class="credit-balance-message"> 1389 - Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order. 1297 + 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. 1390 1298 </div>` 1391 1299 ); 1392 - } 1393 - 1394 - } 1395 - 1396 - }); 1397 - 1300 + } else { 1301 + const cartTotalText = document.querySelector( 1302 + 'div[data-test="cart-total"] span[data-test="cart-price-value"]' 1303 + ).textContent; 1304 + const cartTotal = Number(cartTotalText.replace('£', '')); 1305 + lowBalance = cartTotal > traderInCreditSystem.current_balance; 1398 1306 1399 - if (hasOverdue || lowBalance) { 1400 - // Hide the payment button if there is an overdue order or low balance 1401 - ready('#fakeButton', (element) => { 1402 - element.remove() 1403 - }); 1307 + if (lowBalance) { 1308 + element.insertAdjacentHTML( 1309 + 'beforeend', 1310 + `<div class="credit-balance-message"> 1311 + Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order. 1312 + </div>` 1313 + ); 1314 + } 1404 1315 1405 - ready('#proceedButton', (element) => { 1406 - element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1407 - }); 1316 + } 1408 1317 1409 - ready('#checkoutPaymentContinue', (element) => { 1410 - element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1411 1318 }); 1412 - } 1413 - } 1414 - } 1415 - } catch (error) { 1416 - console.error('Error fetching trader data:', error); 1417 - } 1418 1319 1419 - </script> 1420 - {{else if customer_group_name '===' 'Trade TNC'}} 1421 - <script type="module"> 1422 - let hasOverdue = false; 1423 - let lowBalance = false; 1424 1320 1425 - try { 1426 - const response = await fetch('https://purrform-apps-027e.onrender.com/getCreditSystemTraders', { 1427 - method: 'GET', 1428 - headers: { 1429 - 'Content-Type': 'application/json', 1430 - } 1431 - }); 1321 + if (hasOverdue || lowBalance) { 1322 + // Hide the payment button if there is an overdue order or low balance 1323 + ready('#fakeButton', (element) => { 1324 + element.remove() 1325 + }); 1432 1326 1433 - if (response.ok) { 1434 - const traders = await response.json(); // { bc_customer_email: string, credit_ceiling: number, current_balance: number, has_overdue: boolean, id: number }[] 1435 - const traderInCreditSystem = traders.find(t => t.bc_customer_email === '{{customer.email}}'); 1327 + ready('#proceedButton', (element) => { 1328 + element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1329 + }); 1436 1330 1437 - if (traderInCreditSystem) { 1438 - // Put the credit balance info before the cart subtotal 1439 - ready('div[data-test="cart-subtotal"]', (element) => { 1440 - element.insertAdjacentHTML( 1441 - 'beforebegin', 1442 - `<div class="creditBalanceInfo"> 1443 - <div>Credit Balance </div> 1444 - <div class="creditBalanceAmount">£${traderInCreditSystem.current_balance.toFixed(2)}</div> 1445 - </div>` 1446 - ); 1447 - }); 1331 + ready('#checkoutPaymentContinue', (element) => { 1332 + element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1333 + }); 1334 + } else { 1335 + // change the fakeButton text to Pay Now 1336 + ready('#fakeButton', (element) => { 1337 + element.innerHTML = 'Pay Now'; 1338 + }); 1339 + // add a new button next to the fake button to allow payment on credit 1340 + ready('.checkout-step--payment .checkout-form .form-actions', (element) => { 1341 + const creditPaymentButton = document.createElement('div'); 1342 + creditPaymentButton.innerHTML = 'Pay on Credit'; 1343 + creditPaymentButton.id = 'creditPaymentButton'; 1448 1344 1449 - // Add any overdue / low balance message to the cart total section 1450 - ready('div[data-test="cart-total"]', (element) => { 1451 - hasOverdue = traderInCreditSystem.has_overdue; 1345 + creditPaymentButton.addEventListener('click', function () { 1346 + // 1 - Put the button in loading state and disable the other button 1347 + $('#creditPaymentButton').text('Processing...').attr('disabled', 'true'); 1348 + $('#fakeButton').attr('disabled', 'true'); 1452 1349 1453 - if (hasOverdue) { 1454 - element.insertAdjacentHTML( 1455 - 'beforeend', 1456 - `<div class="credit-balance-message"> 1457 - 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. 1458 - </div>` 1459 - ); 1460 - } else { 1461 - const cartTotalText = document.querySelector( 1462 - 'div[data-test="cart-total"] span[data-test="cart-price-value"]' 1463 - ).textContent; 1464 - const cartTotal = Number(cartTotalText.replace('£', '')); 1465 - lowBalance = cartTotal > traderInCreditSystem.current_balance; 1466 1350 1467 - if (lowBalance) { 1468 - element.insertAdjacentHTML( 1469 - 'beforeend', 1470 - `<div class="credit-balance-message"> 1471 - Your cart total exceeds your credit limit. You can either remove some items or pay the balance to process your order. 1472 - </div>` 1473 - ); 1474 - } 1351 + // get cart_id 1352 + const cartId = '{{cart_id}}'; 1475 1353 1476 - } 1477 1354 1478 - }); 1355 + // 2 - Call the backend to process the credit payment 1356 + fetch(`https://purrform-apps-027e.onrender.com/processCreditPayment?cartId=${cartId}`, { 1357 + method: 'GET', 1358 + headers: { 1359 + 'Content-Type': 'application/json', 1360 + }, 1479 1361 1362 + }).then(response => { 1363 + if (!response.ok) { 1364 + throw new Error('Network response was not ok'); 1365 + } 1366 + // remove both buttons and put a thank you message 1367 + $('#creditPaymentButton').remove(); 1368 + $('#fakeButton').remove(); 1369 + // remove any previous error message 1370 + $('.checkout-step--payment .checkout-form .form-actions .credit-balance-message').remove(); 1371 + const thankYouMessage = '<div class="credit-balance-message" style="background-color: #d4edda; color: #155724;">Your order has been placed successfully using credit payment. You can navigate away from this page. <a href="https://www.purrform.co.uk">Back to homepage.</a></div>'; 1372 + $('.checkout-step--payment .checkout-form .form-actions').append(thankYouMessage); 1373 + }).catch(error => { 1374 + // 3 - Show an error message 1375 + $('.checkout-step--payment .checkout-form .form-actions .credit-balance-message').remove(); 1376 + const errorMessage = '<div class="credit-balance-message" style="background-color: #f8d7da; color: #721c24;">There was an error processing your credit payment. Please try again or use another payment method.</div>'; 1377 + $('.checkout-step--payment .checkout-form .form-actions').append(errorMessage); 1378 + // Re-enable buttons 1379 + $('#creditPaymentButton').text('Pay on Credit').removeAttr('disabled'); 1380 + $('#fakeButton').removeAttr('disabled'); 1381 + }) 1480 1382 1481 - if (hasOverdue || lowBalance) { 1482 - // Hide the payment button if there is an overdue order or low balance 1483 - ready('#fakeButton', (element) => { 1484 - element.remove() 1485 - }); 1383 + }); 1486 1384 1487 - ready('#proceedButton', (element) => { 1488 - element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1489 - }); 1385 + element.appendChild(creditPaymentButton); 1386 + }); 1490 1387 1491 - ready('#checkoutPaymentContinue', (element) => { 1492 - element.style.display = hasOverdue || lowBalance ? 'none' : 'block'; 1493 - }); 1388 + } 1494 1389 } 1495 1390 } 1391 + } catch (error) { 1392 + console.error('Error fetching trader data:', error); 1496 1393 } 1497 - } catch (error) { 1498 - console.error('Error fetching trader data:', error); 1499 1394 } 1500 - 1501 1395 </script> 1502 - {{/if}} 1396 + 1503 1397 1504 1398 <style> 1505 1399 .creditBalanceInfo { ··· 1615 1509 } 1616 1510 1617 1511 #fakeButton, 1512 + #creditPaymentButton, 1618 1513 #proceedButton { 1619 1514 color: white; 1620 1515 border: 1px solid #687d6a; ··· 1635 1530 font-weight: bold; 1636 1531 } 1637 1532 1533 + #creditPaymentButton { 1534 + background-color: transparent; 1535 + color: #687d6a; 1536 + } 1537 + 1538 + #creditPaymentButton:hover { 1539 + background-color: #687d6a; 1540 + color: white; 1541 + } 1542 + 1638 1543 #fakeButton:hover, 1639 1544 #proceedButton:hover { 1640 1545 background-color: transparent; 1641 1546 color: #687d6a; 1547 + } 1548 + 1549 + #fakeButton[disabled], 1550 + #creditPaymentButton[disabled], 1551 + #proceedButton[disabled] { 1552 + background-color: #cccccc !important; 1553 + border-color: #999999 !important; 1554 + color: #666666 !important; 1555 + cursor: not-allowed !important; 1642 1556 } 1643 1557 1644 1558 /* DATE PICKER */ ··· 1804 1718 html .ui-button.ui-state-disabled:active { 1805 1719 text-align: center; 1806 1720 } 1721 + 1722 + 1807 1723 </style> 1808 1724 1809 1725 {{/partial}} {{> layout/empty}}