Remvoed & simplified or refactored general functionality

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}`;
 </script>
 

src/lib/components/Cart.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import { count, toggleCart, isOpen } from '../cartStore';
   import IconCart from '../icons/IconCart.svelte';
+
+  $: openClass = $isOpen ? 'open' : '';
 </script>
 
-<div id="cart" class="{$isOpen && 'open'}" on:click="{() => toggleCart()}">
+<div id="cart" class="{openClass}" on:click="{() => toggleCart()}">
   {#if $count > 0}
     <span>{$count}</span>
   {/if}

src/lib/utils/mock.ts

@@ -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<IOrder> {
-  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<IProduct> {
-  return Array.from(Array(count)).map(() => mockProduct());
-}

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;

src/routes/checkout/OrderSection.svelte

@@ -68,7 +68,7 @@
   </tbody>
 </table>
 
-<slot name="button" />
+<!-- <slot name="express-checkout-buttons" /> -->
 
 <style lang="scss" module="scoped">
   table.checkout {