From 676ff3b926af553078e079af5607b554cc44db52 Mon Sep 17 00:00:00 2001 From: Ben <36240171+benkyd@users.noreply.github.com> Date: Wed, 27 Apr 2022 20:00:06 +0100 Subject: [PATCH] ok epic Former-commit-id: 8d565d0f3bae3df3c66f14186756fc16084004f1 --- client/public/basket/index.html | 1 + client/public/checkout/index.html | 1 + client/public/components/basket-popout.mjs | 48 +---- client/public/components/basket.mjs | 4 +- client/public/components/checkout.mjs | 170 ++++++++++++++---- client/public/components/css/checkout.css | 113 ++++++++++++ .../components/immutable-basket-list.mjs | 116 ++++++++++++ client/public/components/navbar.mjs | 10 +- client/public/featured/index.html | 1 + client/public/index.html | 1 + client/public/product/index.html | 1 + client/public/search/index.html | 1 + 12 files changed, 377 insertions(+), 90 deletions(-) create mode 100644 client/public/components/css/checkout.css create mode 100644 client/public/components/immutable-basket-list.mjs diff --git a/client/public/basket/index.html b/client/public/basket/index.html index 5fe5670..c46bece 100644 --- a/client/public/basket/index.html +++ b/client/public/basket/index.html @@ -20,6 +20,7 @@ + diff --git a/client/public/checkout/index.html b/client/public/checkout/index.html index 911edd1..fa6c7ac 100644 --- a/client/public/checkout/index.html +++ b/client/public/checkout/index.html @@ -19,6 +19,7 @@ + diff --git a/client/public/components/basket-popout.mjs b/client/public/components/basket-popout.mjs index 870140d..bd7fbcf 100644 --- a/client/public/components/basket-popout.mjs +++ b/client/public/components/basket-popout.mjs @@ -180,22 +180,7 @@ class BasketPopout extends Component { {this.state.total} Items
- ${this.state.items - ? Object.keys(this.state.items).map((key) => { - const item = this.state.items[key]; - return /* html */` -
- x${item.quantity} - - -
- `; - }).join('') - : ''} +
Subtotal: £${parseFloat(this.state.subtotal).toFixed(2)} @@ -311,39 +296,12 @@ class BasketPopout extends Component { } .popup-content { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: left; width: 100%; height: 100%; - overflow-y: scroll; - overflow-x: hidden; - justify-content: space-between; } - .popup-content-item { - background-color: #F5F6F6; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - } - - .popup-content-item-quantity { - font-size: 2em; - flex-grow: 1; - } - - .sc-listing { - flex-basis: 100%; - flex-grow: 3; - } - - .popup-content-item-value { - text-align: right; - flex-grow: 1; + .basket-list { + width: 100%; } .popup-footer { diff --git a/client/public/components/basket.mjs b/client/public/components/basket.mjs index 4b6ab29..c093272 100644 --- a/client/public/components/basket.mjs +++ b/client/public/components/basket.mjs @@ -258,7 +258,7 @@ class Basket extends Component { button.addEventListener('click', (event) => { let clickedItem = event.target.parentElement; let listing = clickedItem.querySelector('.basket-item-listing'); - if (!listing) { + while (listing === null) { clickedItem = clickedItem.parentElement; listing = clickedItem.querySelector('.basket-item-listing'); } @@ -330,7 +330,7 @@ class Basket extends Component { input.addEventListener('change', (event) => { let clickedItem = event.target.parentElement; let listing = clickedItem.querySelector('.basket-item-listing'); - if (!listing) { + while (listing === null) { clickedItem = clickedItem.parentElement; listing = clickedItem.querySelector('.basket-item-listing'); } diff --git a/client/public/components/checkout.mjs b/client/public/components/checkout.mjs index 6095c74..24433be 100644 --- a/client/public/components/checkout.mjs +++ b/client/public/components/checkout.mjs @@ -1,5 +1,5 @@ import { GetBasketTotalPrice } from './basket-popout.mjs'; -import { RegisterComponent, Component } from './components.mjs'; +import { RegisterComponent, Component, SideLoad } from './components.mjs'; class Checkout extends Component { static __IDENTIFY() { return 'checkout'; } @@ -17,53 +17,145 @@ class Checkout extends Component { Render() { return { template: /* html */` +
+ Checkout +
-
- Checkout - Total: £{this.state.total} -
-
-
- +
+
+
Shipping Details
+ +
-
- -
-
- -
-
-
-
- - - - +
Payment Details
+
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ +
+ +
+
+
+
Your Order edit basket
+
+ +
Subtotal ${this.state.total}
+
Shipping (UK Only) ${this.state.total}
+
Total ${this.state.total}
+ +
+
`, - style: ` - .checkout { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - } - - - .checkout-form-row-input { - border: 1px solid #79747E; - box-sizing: border-box; - border-radius: 4px; - } - `, + style: SideLoad('/components/css/checkout.css'), }; } - OnRender() { + // card number + let lastCardNumber = ''; + this.root.querySelector('input[name="cc-number"]').addEventListener('keyup', (e) => { + if (e.target.value !== lastCardNumber) { + // remove non-numeric characters + e.target.value = e.target.value.replace(/[^0-9]/g, ''); + // space every 4 digits + e.target.value = e.target.value.replace(/(\d{4})/g, '$1 '); + // not longer than 4 sets of 4 numbers + e.target.value = e.target.value.trim().substring(0, 19); + lastCardNumber = e.target.value; + + // perform validation on card number and determine if valid AND card type + // please not this is NOT a checksum + let cardType = 'unknown'; + this.root.querySelector('input[name="cc-number"]').classList.remove('visa', 'mastercard', 'amex', 'unknown'); + const cardNumber = e.target.value.replace(/\s/g, ''); + if (cardNumber.match(/^4[0-9]{12}(?:[0-9]{3})?$/)) { + cardType = 'visa'; + } else if (cardNumber.match(/^5[1-5][0-9]{14}$/)) { + cardType = 'mastercard'; + } + // update card type + this.root.querySelector('input[name="cc-number"]').classList.add(cardType); + + if (e.target.value.length === 19) { + this.root.querySelector('input[name="postal-code"]').focus(); + } + } + + if (e.keyCode === 13) { + this.root.querySelector('input[name="postal-code"]').focus(); + } + }); + + // postal code + let lastPostalCode = ''; + this.root.querySelector('input[name="postal-code"]').addEventListener('keyup', (e) => { + if (e.target.value !== lastPostalCode) { + // make uppercase + e.target.value = e.target.value.toUpperCase(); + // not longer than 4 sets of 4 numbers + lastPostalCode = e.target.value; + } + + if (e.keyCode === 13) { + this.root.querySelector('input[name="cc-exp"]').focus(); + } + }); + + // expiry date + let lastExpiryDate = ''; + this.root.querySelector('input[name="cc-exp"]').addEventListener('keyup', (e) => { + if (e.target.value !== lastExpiryDate) { + // remove non-numeric characters + e.target.value = e.target.value.replace(/[^0-9]/g, ''); + // space every 2 digits + e.target.value = e.target.value.replace(/(\d{2})/g, '$1 / '); + // not longer than 2 sets of 2 numbers + e.target.value = e.target.value.trim().substring(0, 7); + lastExpiryDate = e.target.value; + + if (e.target.value.length === 7) { + this.root.querySelector('input[name="cc-csc"]').focus(); + } + } + + if (e.keyCode === 13) { + this.root.querySelector('input[name="cc-csc"]').focus(); + } + }); + + // cvv + let lastCvv = ''; + this.root.querySelector('input[name="cc-csc"]').addEventListener('keyup', (e) => { + if (e.target.value !== lastCvv) { + // remove non-numeric characters + e.target.value = e.target.value.replace(/[^0-9]/g, ''); + // not longer than 3 numbers + e.target.value = e.target.value.trim().substring(0, 3); + lastCvv = e.target.value; + } + }); } } diff --git a/client/public/components/css/checkout.css b/client/public/components/css/checkout.css new file mode 100644 index 0000000..db196a7 --- /dev/null +++ b/client/public/components/css/checkout.css @@ -0,0 +1,113 @@ +.checkout-header { + margin-top: 20px; + font-size: 2em; + border-bottom: 1px solid #ccc; +} + +.checkout { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + width: 100%; +} + +.section-title { + font-size: 1.3em; + margin-bottom: 25px; + margin-top: 25px; + border-bottom: 1px solid #ccc; +} + +.checkout-body-left { + display: flex; + flex-direction: column; + flex-basis: 45%; + order: 0; +} + +.checkout-body-right { + display: flex; + flex-direction: column; + flex-basis: 45%; + order: 1; +} + +@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { + .checkout { + flex-direction: column; + } + + .checkout-body-left { + order: 1; + flex-basis: 100%; + } + + .checkout-body-right { + order: 0; + flex-basis: 100%; + } +} + +.checkout-form-row-input, .checkout-form-row-label { + width: 100%; +} + +.checkout-form-row-label { + font-size: 0.9em; + color: #888; + text-transform: uppercase; +} + +.checkout-form-row-input { + margin-bottom: 10px; + height: 3em; + background-color: #F5F6F6; + border: 1px solid #ccc; + border-radius: 0.4em; + transition: all 250ms ease-in-out; +} + +.checkout-form-row-input:focus { + outline: 0; + border: 2px solid transparent; + border-bottom: 2px solid #222; + border-radius: 0; +} + +.checkout-payment-form { + display: flex; + flex-direction: column; + margin-bottom: 20px; +} + +.payment-row { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.visa { + background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260969/ic_card_visa.png) no-repeat; + background-position: 95%; +} + +.mastercard { + background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260969/ic_card_master_card.png) no-repeat; + background-position: 95%; +} + +.form-item { + width: 49%; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.edit-basket { + font-size: 0.7em; + color: #888; + float: right; + text-transform: uppercase; +} + \ No newline at end of file diff --git a/client/public/components/immutable-basket-list.mjs b/client/public/components/immutable-basket-list.mjs new file mode 100644 index 0000000..216e8cb --- /dev/null +++ b/client/public/components/immutable-basket-list.mjs @@ -0,0 +1,116 @@ +import { RegisterComponent, Component } from './components.mjs'; +import { GetBasketTotalPrice } from './basket-popout.mjs'; +import * as LocalStorageListener from '../localstorage-listener.mjs'; + +class ImmutableBasketList extends Component { + static __IDENTIFY() { return 'immutable-basket-list'; } + + constructor() { + super(ImmutableBasketList); + } + + async OnLocalBasketUpdate() { + const basket = localStorage.getItem('basket'); + + if (basket) { + try { + const basketJSON = JSON.parse(basket); + const subtotal = await GetBasketTotalPrice(); + this.setState({ + ...this.getState, + items: basketJSON.items, + total: basketJSON.total, + subtotal, + }); + } catch (e) { + console.log(e); + } + } else { + this.setState({ + ...this.getState, + items: {}, + total: 0, + subtotal: 0, + }); + } + } + + + OnMount() { + LocalStorageListener.ListenOnKey('basket', () => { + this.OnLocalBasketUpdate(Object.bind(this)); + }); + + this.setState({ + ...this.getState, + items: {}, + total: 0, + subtotal: 0, + }, false); + + this.OnLocalBasketUpdate(Object.bind(this)); + } + + Render() { + return { + template: /* html */` +
+ ${this.state.items + ? Object.keys(this.state.items).map((key) => { + const item = this.state.items[key]; + return /* html */` +
+ x${item.quantity} + + +
+ `; + }).join('') + : ''} +
+ `, + style: ` + .popup-content { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: left; + height: ${this.state.w || '100%'}; + height: ${this.state.h || 'auto'}; + overflow-y: scroll; + overflow-x: hidden; + justify-content: space-between; + } + + .popup-content-item { + background-color: #F5F6F6; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + } + + .popup-content-item-quantity { + font-size: 2em; + flex-grow: 1; + } + + .sc-listing { + flex-basis: 100%; + flex-grow: 3; + } + `, + }; + } + + OnRender() { + + } +} + +RegisterComponent(ImmutableBasketList); diff --git a/client/public/components/navbar.mjs b/client/public/components/navbar.mjs index 199a3fb..59cfd1b 100644 --- a/client/public/components/navbar.mjs +++ b/client/public/components/navbar.mjs @@ -6,7 +6,7 @@ import * as StorageListener from '../localstorage-listener.mjs'; // we need to have this remember the state of the logged in user // so that we can display the correct navbar let navbarCallback = null; -export function NotifyNavbar(type, user) { +export function NotifyNavbar(type) { if (navbarCallback && type === 'login') { navbarCallback.OnLogin(); } @@ -98,9 +98,11 @@ class NavBar extends Component { // setup log in button const loginButton = this.root.querySelector('.account-button'); - loginButton.addEventListener('click', () => { - LoginSignup(this); - }); + if (loginButton) { + loginButton.addEventListener('click', () => { + LoginSignup(this); + }); + } } } diff --git a/client/public/featured/index.html b/client/public/featured/index.html index 6bf8fb7..052a891 100644 --- a/client/public/featured/index.html +++ b/client/public/featured/index.html @@ -23,6 +23,7 @@ + diff --git a/client/public/index.html b/client/public/index.html index a45a065..0098619 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -24,6 +24,7 @@ + diff --git a/client/public/product/index.html b/client/public/product/index.html index 27a768f..b986128 100644 --- a/client/public/product/index.html +++ b/client/public/product/index.html @@ -19,6 +19,7 @@ + diff --git a/client/public/search/index.html b/client/public/search/index.html index 36e5cb5..ec55e73 100644 --- a/client/public/search/index.html +++ b/client/public/search/index.html @@ -24,6 +24,7 @@ +