diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte index 34e6bcf..5baf82c 100644 --- a/src/lib/components/Badge.svelte +++ b/src/lib/components/Badge.svelte @@ -11,8 +11,12 @@ export let title = 'Info'; export let type: BadgeType = BadgeType.INFO; - export let icon: string = badgeIcons[type]; + if (title === 'CONFIRMED') { + type = BadgeType.SUCCESS; + } + + $: icon = badgeIcons[type]; $: badgeClass = `badge ${type}`; diff --git a/src/lib/components/Cart.svelte b/src/lib/components/Cart.svelte index d0079ef..2f3b033 100644 --- a/src/lib/components/Cart.svelte +++ b/src/lib/components/Cart.svelte @@ -1,9 +1,11 @@ -
+
{#if $count > 0} {$count} {/if} diff --git a/src/lib/utils/mock.ts b/src/lib/utils/mock.ts deleted file mode 100644 index 76adac2..0000000 --- a/src/lib/utils/mock.ts +++ /dev/null @@ -1,87 +0,0 @@ -import generateUUID from './uuid'; -import type IProduct from '../interfaces/IProduct'; -import type { IOrder, ICustomer } from '../interfaces/IOrders'; -import BadgeType from '../interfaces/BadgeType'; - -const productNames = ["Who's Who", 'Lullaby', 'The Buried Life', 'The Illegitimate']; - -const images = [ - 'https://cdn-fsly.yottaa.net/551561a7312e580499000a44/www.joann.com/v~4b.100/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dw4a83425c/images/hi-res/18/18163006.jpg?sw=556&sh=680&sm=fit&yocs=7x_7C_7D_', - 'https://cdn-fsly.yottaa.net/55d09df20b53443653002f02/www.joann.com/v~4b.ed/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dwc10a651e/images/hi-res/alt/17767534Alt1.jpg?sw=350&sh=350&sm=fit&yocs=f_', - 'https://cdn-fsly.yottaa.net/55d09df20b53443653002f02/www.joann.com/v~4b.ed/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dw3f43e4d8/images/hi-res/alt/18995779ALT1.jpg?sw=350&sh=350&sm=fit&yocs=f_', - 'https://cdn-fsly.yottaa.net/551561a7312e580499000a44/www.joann.com/v~4b.100/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dw029904bd/images/hi-res/alt/18162834alt1.jpg?sw=350&sh=350&sm=fit&yocs=7x_7C_7D_', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-103.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=018ae410aa6b64e6c9c5ca6bb18a1137', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-166.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=50a1f0fb259452fb84453ee4216dd4f1', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-108.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=b4a75bdea66974a4f766ded52bfe9ba0', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-32.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=9199c53ea58a923373f7bcce1145193e' -]; - -const statusText = { - [BadgeType.INFO]: 'Pending', - [BadgeType.SUCCESS]: 'Succeeded', - [BadgeType.WARNING]: 'Warning', - [BadgeType.PENDING]: 'In transit', - [BadgeType.ERROR]: 'Error' -}; - -const statusTypes = [ - BadgeType.INFO, - BadgeType.SUCCESS, - BadgeType.WARNING, - BadgeType.PENDING, - BadgeType.ERROR -]; - -function mockCustomer(): ICustomer { - const customer: ICustomer = { - email: 'kevin.midboe@gmail.com', - firstName: 'kevin', - lastName: 'midbøe', - streetAddress: 'Schleppegrells gate 18', - zipCode: '0556', - city: 'Oslo' - }; - - customer.fullName = `${customer.firstName} ${customer.lastName}`; - return customer; -} - -export function mockOrder(id: string | null = null): IOrder { - const products = mockProducts(4); - const status = statusTypes[Math.floor(Math.random() * statusTypes.length)]; - - return { - uuid: id || generateUUID(), - products, - customer: mockCustomer(), - payment: { - amount: Math.round(Math.random() * 800), - currency: 'NOK' - }, - createdDate: new Date(), - updatedDate: new Date(), - status: { - type: status, - text: statusText[status] - } - }; -} - -export function mockOrders(count: number): Array { - return Array.from(Array(count)).map(() => mockOrder()); -} - -export function mockProduct(): IProduct { - return { - uuid: generateUUID(), - name: productNames[Math.floor(Math.random() * productNames.length)], - price: Math.floor(Math.random() * 999), - quantity: Math.floor(Math.random() * 4) + 1, - currency: 'NOK', - image: images[Math.floor(Math.random() * images.length)] - }; -} - -export function mockProducts(count: number): Array { - return Array.from(Array(count)).map(() => mockProduct()); -} diff --git a/src/lib/websocketCart.ts b/src/lib/websocketCart.ts index bede984..1440e3b 100644 --- a/src/lib/websocketCart.ts +++ b/src/lib/websocketCart.ts @@ -47,6 +47,19 @@ function sendPayload(payload: object) { ws.send(JSON.stringify(payload)); } +// websocket.onmessage +function receivePayload(event: MessageEvent) { + try { + const json = JSON.parse(event?.data || {}); + const { success, cart } = json as ICartDTO; + if (success && cart) cartStore.set(cart); + } catch { + console.debug('Non parsable message from server: ', event?.data); + } +} + +// Called by routes/+layout.svelte on every navigation, +// if ws is closed we try reconnect export function reconnectIfCartWSClosed() { const closed = ws?.readyState === 3; if (!closed) return; @@ -88,15 +101,7 @@ export function connectToCart(attempts = 0, maxAttempts = 6) { heartbeat(); }; - ws.onmessage = (event: MessageEvent) => { - try { - const json = JSON.parse(event?.data || {}); - const { success, cart } = json; - if (success && cart) cartStore.set(cart); - } catch { - console.debug('Non parsable message from server: ', event?.data); - } - }; + ws.onmessage = (event) => receivePayload(event); ws.onclose = () => { const seconds = attempts ** 2; diff --git a/src/routes/checkout/OrderSection.svelte b/src/routes/checkout/OrderSection.svelte index 2ef2e13..33744ab 100644 --- a/src/routes/checkout/OrderSection.svelte +++ b/src/routes/checkout/OrderSection.svelte @@ -68,7 +68,7 @@ - +