From 9a0b516712cb0ef094bb7738c453bdf2bce2b939 Mon Sep 17 00:00:00 2001 From: Ben <36240171+benkyd@users.noreply.github.com> Date: Wed, 27 Apr 2022 23:58:49 +0100 Subject: [PATCH] discount dosen't get fucked anymmore Former-commit-id: 176d2681fab12d0c7f6a835923ad6230be7648b2 --- client/public/basket.mjs | 25 +++++- client/public/components/checkout.mjs | 104 ++++++++++++++++++---- client/public/components/css/checkout.css | 6 ++ 3 files changed, 117 insertions(+), 18 deletions(-) diff --git a/client/public/basket.mjs b/client/public/basket.mjs index fe80d8f..e02f6de 100644 --- a/client/public/basket.mjs +++ b/client/public/basket.mjs @@ -83,7 +83,7 @@ export function GetBasketTotal() { return basket.total; } -export async function GetBasketTotalPrice(discount = 0, type = '£', entity_type = undefined) { +export async function GetBasketTotalPrice(discount = 0, type = '£', entity = undefined) { if (localStorage.getItem('basket') === null || !localStorage.getItem('basket')) { return 0; } @@ -101,9 +101,28 @@ export async function GetBasketTotalPrice(discount = 0, type = '£', entity_type if (res.error) { return 0; } + + if (discount !== 0) { + return res.data.subtotal - GetAbsoluteBasketDiscount(discount, type, entity); + } return res.data.subtotal; } -export async function GetAbsoluteBasketDiscount(discount = 0, type = '£', entity_type = undefined) { - +export function GetAbsoluteBasketDiscount(discount = 0, type = '£', entity = undefined) { + if (localStorage.getItem('basket') === null || !localStorage.getItem('basket')) { + return; + } + const basket = JSON.parse(localStorage.getItem('basket')); + + let discountAccumulator = 0; + + for (const [key, product] of Object.entries(basket.items)) { + if (product.type === entity) { + if (type === '£') { + discountAccumulator += product.quantity * discount; + } + } + } + + return discountAccumulator; } diff --git a/client/public/components/checkout.mjs b/client/public/components/checkout.mjs index bf4b107..0c1ed68 100644 --- a/client/public/components/checkout.mjs +++ b/client/public/components/checkout.mjs @@ -17,6 +17,7 @@ class Checkout extends Component { } Render() { + console.log(this.state); return { template: /* html */`
@@ -26,17 +27,23 @@ class Checkout extends Component {
Shipping Details
- - - - +
+ + + + + + + + +
- + - +
@@ -44,22 +51,22 @@ class Checkout extends Component {
- - + + - - + +
- - + + - - + +
@@ -104,6 +111,33 @@ class Checkout extends Component { } OnRender() { + // make sure to save the rest for re-rendering + this.root.querySelector('input[name="name"]').addEventListener('keyup', (e) => { + this.setState({ + ...this.getState, + name: e.target.value, + }, false); + }); + this.root.querySelector('input[name="email"]').addEventListener('keyup', (e) => { + this.setState({ + ...this.getState, + email: e.target.value, + }, false); + }); + this.root.querySelector('input[name="address"]').addEventListener('keyup', (e) => { + this.setState({ + ...this.getState, + address: e.target.value, + }, false); + }); + this.root.querySelector('input[name="postcode"]').addEventListener('keyup', (e) => { + this.setState({ + ...this.getState, + post: e.target.value, + }, false); + }); + + // card number let lastCardNumber = ''; this.root.querySelector('input[name="cc-number"]').addEventListener('keyup', (e) => { @@ -129,6 +163,11 @@ class Checkout extends Component { // update card type this.root.querySelector('input[name="cc-number"]').classList.add(cardType); + this.setState({ + ...this.getState, + ccno: e.target.value, + }, false); + if (e.target.value.length === 19) { this.root.querySelector('input[name="postal-code"]').focus(); } @@ -147,6 +186,11 @@ class Checkout extends Component { e.target.value = e.target.value.toUpperCase(); // not longer than 4 sets of 4 numbers lastPostalCode = e.target.value; + + this.setState({ + ...this.getState, + ppost: e.target.value, + }, false); } if (e.keyCode === 13) { @@ -166,6 +210,11 @@ class Checkout extends Component { e.target.value = e.target.value.trim().substring(0, 7); lastExpiryDate = e.target.value; + this.setState({ + ...this.getState, + exp: e.target.value, + }, false); + if (e.target.value.length === 7) { this.root.querySelector('input[name="cc-csc"]').focus(); } @@ -185,9 +234,21 @@ class Checkout extends Component { // not longer than 3 numbers e.target.value = e.target.value.trim().substring(0, 3); lastCvv = e.target.value; + + this.setState({ + ...this.getState, + cvv: e.target.value, + }, false); } }); + if (this.state.codeApplied) { + this.root.querySelector('.offer-text').value = this.state.codeApplied; + this.root.querySelector('.offer-text').disabled = true; + this.root.querySelector('.offer-button').innerText = 'Applied'; + this.root.querySelector('.offer-button').disabled = true; + } + // discount code this.root.querySelector('.offer-button').addEventListener('click', async () => { // get discount code @@ -232,13 +293,26 @@ class Checkout extends Component { return; } + const absoluteDiscount = Basket.GetAbsoluteBasketDiscount(offer.discount, offer.type, offer.entity_type); + + if (absoluteDiscount === 0) { + // show error + offerTextBox.classList.add('error'); + setTimeout(() => { + offerTextBox.classList.remove('error'); + }, 1000); + return; + } + offerTextBox.classList.add('code-applied'); offerTextBox.disabled = true; this.setState({ + ...this.getState, subtotal: parseFloat(await Basket.GetBasketTotalPrice()).toFixed(2), total: parseFloat(await Basket.GetBasketTotalPrice(offer.discount, offer.type, offer.entity_type)).toFixed(2), - discount: await Basket.GetAbsoluteBasketDiscount(offer.discount, offer.type, offer.entity_type), + discount: absoluteDiscount, + codeApplied: offerText, }); }); } diff --git a/client/public/components/css/checkout.css b/client/public/components/css/checkout.css index e803b4f..28d6efc 100644 --- a/client/public/components/css/checkout.css +++ b/client/public/components/css/checkout.css @@ -51,6 +51,12 @@ } } +.delivery-row { + display: flex; + flex-direction: row; + justify-content: space-between; +} + .checkout-form-row-input, .checkout-form-row-label { width: 100%; }