Updated ts types, sync w/ backend

src/lib/cartStore.ts

@@ -1,14 +1,15 @@
-import { writable, get, derived } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 import type { Writable, Readable } from 'svelte/store';
+import type ICart from './interfaces/ICart';
 
-export const cart: Writable<any> = writable([]);
+export const cart: Writable<ICart[]> = writable([]);
 export const isOpen: Writable<boolean> = writable(false);
 
 export const count: Readable<number> = derived(cart, ($cart) => $cart.length || 0);
 
 export const subTotal: Readable<number> = derived(cart, ($cart) => {
   let total = 0;
-  $cart.forEach((cartItem) => (total += cartItem.price * cartItem.quantity));
+  $cart.forEach((cartItem: ICart) => (total += cartItem.price * cartItem.quantity));
   return total;
 });
 

src/lib/interfaces/ApiResponse.ts

@@ -1,27 +1,39 @@
 import type { IProduct } from './IProduct';
 import type { IOrder, IOrderSummary } from './IOrder';
+import type ICustomer from './ICustomer';
+import type ICart from './ICart';
 
 export interface IProductResponse {
   success: boolean;
   products: Array<IProduct>;
 }
 
-export interface IOrderResponse {
+export interface IOrderDTO {
   success: boolean;
   order: IOrder;
 }
 
+export interface IOrderCreateDTO {
+  customer: ICustomer;
+  cart: ICart[];
+}
+
 export interface IOrderSummaryResponse {
   success: boolean;
   order: IOrderSummary;
 }
 
-export interface IProductResponse {
+export interface IProductDTO {
   success: boolean;
   product: IProduct;
 }
 
-export interface IProductsResponse {
+export interface IProductsDTO {
   success: boolean;
   products: Array<IProduct>;
 }
+
+export interface ICartDTO {
+  cart: ICart[];
+  success: boolean;
+}

src/lib/interfaces/IOrder.ts

@@ -1,5 +1,6 @@
 // import type IProduct from './IProduct';
 // import type BadgeType from './BadgeType';
+import type ICustomer from './ICustomer';
 
 export interface IStripePayment {
   amount: number;
@@ -26,17 +27,8 @@ export interface IOrder {
   created?: Date;
 }
 
-export interface ICustomer {
-  city: string;
-  customer_no: string;
-  email: string;
-  firstname: string;
-  lastname: string;
-  streetaddress: string;
-  zipcode: number;
-}
-
 export interface ILineItem {
+  sku_id: number;
   image: string;
   name: string;
   price: number;

src/lib/websocketCart.ts

@@ -1,5 +1,6 @@
 import { dev } from '$app/environment';
 import { cart as cartStore } from './cartStore';
+import type { ICartDTO } from './interfaces/ApiResponse';
 
 const WS_HOST = '127.0.0.1';
 const WS_PORT = 30010;

src/routes/checkout/DeliverySection.svelte

@@ -11,11 +11,16 @@
 
 <div class="personalia">
   <Input id="email" bind:value="{email}" label="E-postaddresse" autocomplete="email" />
-  <Input id="firstName" bind:value="{firstName}" label="Fornavn" autocomplete="given-name" />
-  <Input id="lastName" bind:value="{lastName}" label="Etternavn" autocomplete="family-name" />
+  <Input id="first_name" bind:value="{firstName}" label="Fornavn" autocomplete="given-name" />
+  <Input id="last_name" bind:value="{lastName}" label="Etternavn" autocomplete="family-name" />
 
-  <Input id="address" bind:value="{address}" label="Gateadresse" autocomplete="address-line1" />
-  <Input id="zipCode" bind:value="{zipCode}" label="Postnummer" autocomplete="postal-code" />
+  <Input
+    id="street_address"
+    bind:value="{address}"
+    label="Gateadresse"
+    autocomplete="address-line1"
+  />
+  <Input id="zip_code" bind:value="{zipCode}" label="Postnummer" autocomplete="postal-code" />
   <Input id="city" bind:value="{city}" label="By" autocomplete="address-level2" />
 
   <div id="personalia-submit-button">

src/routes/checkout/OrderSection.svelte

@@ -21,23 +21,23 @@
 
   <tbody>
     {#if $cart.length}
-      {#each $cart as order}
+      {#each $cart as cartItem}
         <tr>
           <td>
             <div class="line-order">
-              <a href="/shop/{order.product_no}"><span>{order.name}</span></a>
-              <span class="subtext">Størrelse: {order.size}</span>
+              <a href="/shop/{cartItem.product_no}"><span>{cartItem.name}</span></a>
+              <span class="subtext">Størrelse: {cartItem.size}</span>
             </div>
           </td>
           <td>
             <QuantitySelect
-              bind:value="{order.quantity}"
+              bind:value="{cartItem.quantity}"
               hideButtons="{true}"
-              on:decrement="{() => decrementProductInCart(order.lineitem_id)}"
-              on:increment="{() => incrementProductInCart(order.lineitem_id)}"
+              on:decrement="{() => decrementProductInCart(cartItem.lineitem_id)}"
+              on:increment="{() => incrementProductInCart(cartItem.lineitem_id)}"
             />
           </td>
-          <td>Nok {order.quantity * order.price}</td>
+          <td>Nok {cartItem.quantity * cartItem.price}</td>
         </tr>
       {/each}
     {:else}

src/routes/login/+page.svelte

@@ -6,9 +6,9 @@
   let password: string;
   let displayMessage: string | null;
 
-  function postLogin(event: any) {
+  function postLogin(event: SubmitEvent) {
     displayMessage = null;
-    const formData = new FormData(event.target);
+    const formData = new FormData(event.target as HTMLFormElement);
     const data = {};
     formData.forEach((value, key) => (data[key] = value));
 

src/routes/orders/[id]/CustomerDetails.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ICustomer } from '$lib/interfaces/IOrder';
+  import type ICustomer from '$lib/interfaces/ICustomer';
 
   export let customer: ICustomer;
 
@@ -16,17 +16,17 @@
 
     <li>
       <span class="label">Name</span>
-      <span class="name">{customer.firstname} {customer.lastname}</span>
+      <span class="name">{customer.first_name} {customer.last_name}</span>
     </li>
 
     <li>
       <span class="label">Street address</span>
-      <span>{customer.streetaddress}</span>
+      <span>{customer.street_address}</span>
     </li>
 
     <li>
       <span class="label">Zip & City</span>
-      <span>{zeroPadZip(customer.zipcode)}, {customer.city}</span>
+      <span>{zeroPadZip(customer.zip_code)}, {customer.city}</span>
     </li>
   </ul>
 </section>

src/routes/orders/[id]/OrderSummary.svelte

@@ -13,7 +13,7 @@
 
   <li>
     <span class="label">Customer</span>
-    <span class="name">{order.customer.firstname} {order.customer.lastname}</span>
+    <span class="name">{order.customer.first_name} {order.customer.last_name}</span>
   </li>
 
   <li>

src/routes/receipt/[[id]]/+page.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
   import CircleCheckmark from '$lib/icons/CircleCheckmark.svelte';
 
-  import { mockProducts } from '$lib/utils/mock';
   import type { PageServerData } from './$types';
-  import type { IProduct } from '$lib/interfaces/IProduct';
+  import type { ILineItem, IOrder } from '$lib/interfaces/IOrder';
 
-  function subTotal(products: Array<IProduct>) {
+  function subTotal(lineItems: Array<ILineItem> = []) {
     let total = 0;
-    products.forEach((product) => (total = total + product.price * product.quantity));
+    lineItems.forEach((lineItem) => (total = total + lineItem.price * lineItem.quantity));
     return total;
   }
 
   export let data: PageServerData;
   const id = data.id as string;
   const email = data.email as string;
+  const order = data.order as IOrder;
+
   // export let currentRoute;
   // const id = currentRoute?.namedParams?.id;
   // const email = currentRoute?.queryParams?.email;
-
-  const products = mockProducts(Math.floor(Math.random() * 8) + 1);
 </script>
 
 <section class="order-confirmation">
@@ -31,14 +30,14 @@
       A payment to PLANETPOSEN, AS will appear on your statement with order number:
       <span class="underline">{id}</span>.
     </p>
-    <p>Order receipt has been email to: <span class="underline">{email}</span></p>
+    <p>En ordrebekreftelse er sent til: <span class="underline">{email}</span></p>
   </div>
 
   <div class="order-receipt">
-    {#each products as product}
+    {#each order?.lineItems as lineItem}
       <p>
-        <code>{product.name} x{product.quantity}</code>
-        <code>{product.currency} {product.price * product.quantity}</code>
+        <code>{lineItem.name} x{lineItem.quantity}</code>
+        <code>NOK {lineItem.price * lineItem.quantity}</code>
       </p>
     {/each}
     <p>
@@ -48,7 +47,7 @@
 
     <p>
       <code>Total</code>
-      <code>NOK {subTotal(products)}</code>
+      <code>NOK {subTotal(order?.lineItems)}</code>
     </p>
   </div>
 </section>

src/routes/sitemap.xml/+server.ts

@@ -1,6 +1,4 @@
-import { dev } from '$app/environment';
-import { env } from '$env/dynamic/private';
-import type { IProductResponse } from '$lib/interfaces/ApiResponse';
+import type { IProductsDTO } from '$lib/interfaces/ApiResponse';
 
 const domain = 'planet.schleppe.cloud';
 const pages: Array<ISitemapPage> = [