Add option for picking up item

Fix error where once the cart loaded, it does not display problematic items in cart

front/src/lib/types.ts

@@ -29,13 +29,14 @@ export type Checkout = {
         email: string;
         phone?: number;
     };
+    message: string;
+    delivery: boolean;
     address: {
         line1: string;
         line2?: string;
         town: string;
         postcode: string;
     };
-    message: string;
 };
 
 export type JSONResponse = {

front/src/pages/Checkout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import { link } from "svelte-spa-router";
     import { ArrowLeft, SealWarning, ArrowRight } from "phosphor-svelte";
+    import L from "leaflet";
 
     import { type CartItem, type Checkout } from '../lib/types';
     import { expandOnTyping } from "../lib/utils";
@@ -11,13 +13,14 @@
             name: "",
             email: "",
         },
+        message: "",
+        delivery: false,
         address: {
             line1: "",
             line2: "",
             town: "",
             postcode: "",
         },
-        message: "",
     }
 
     $: nameValid = CheckoutData.personal.name.length > 1
@@ -27,19 +30,28 @@
 
     let items: [string, CartItem][];
     let totalPrice: number;
+    let unavailableItems = false;
+
     Cart.subscribe(() => {
         items = Cart.getEntries();
         totalPrice = Cart.getTotalPrice();
-    });
+        Cart.getEntries().forEach(([_, item]) => {
-
+            if (!item.data.availability) unavailableItems = true;
-    let unavailableItems = false;
+        });
-    Cart.getEntries().forEach(([_, item]) => {
-        if (!item.data.availability) unavailableItems = true;
     });
 
     function onSubmit() {
         console.log(CheckoutData);
     }
+
+    onMount(() => {
+        const maxZoom = 20;
+        const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
+        const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
+
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map);
+        L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
+    });
 </script>
 
 <a href="/cart" use:link id="cancel-button"><ArrowLeft />&nbsp;Cancel</a>
@@ -116,52 +128,76 @@
             <hr>
             <div class="spacer" />
 
-            <h2>Address</h2>
+            <h2>Delivery or Pick Up</h2>
             <p>Where would you want your food to be delivered?</p>
+
             <div class="spacer half" />
-            <div class="form-element">
+
-                <label class="form-label" for="line1">Address Line 1</label>
+            <ul id="delivery-option">
-                <input
+                <li class:checked={CheckoutData.delivery}>
-                        bind:value={CheckoutData.address.line1}
+                    <button on:click={() => { CheckoutData.delivery = true }} type="button">
-                        type="text"
+                        Deliver
-                        id="line1"
+                    </button>
-                        class="form-input"
+                </li>
-                />
+                <li class:checked={!CheckoutData.delivery}>
-                <span class="form-notice error">Line 1 required</span>
+                    <button on:click={() => { CheckoutData.delivery = false }} type="button">
-            </div>
+                        Pick Up
+                    </button>
+                </li>
+            </ul>
+
             <div class="spacer half" />
-            <div class="form-element">
+
-                <label class="form-label" for="line2">Address Line 2</label>
+            {#if CheckoutData.delivery}
-                <input
+                <div class="form-element">
-                        bind:value={CheckoutData.address.line2}
+                    <label class="form-label" for="line1">Address Line 1</label>
-                        type="text"
+                    <input
-                        id="line2"
+                            bind:value={CheckoutData.address.line1}
-                        class="form-input"
+                            type="text"
-                />
+                            id="line1"
-                <span class="form-notice error"></span>
+                            class="form-input"
-            </div>
+                    />
-            <div class="spacer half" />
+                    <span class="form-notice error">Line 1 required</span>
-            <div class="form-element">
+                </div>
-                <label class="form-label" for="town">Town</label>
+                <div class="spacer half" />
-                <input
+                <div class="form-element">
-                        bind:value={CheckoutData.address.town}
+                    <label class="form-label" for="line2">Address Line 2</label>
-                        type="text"
+                    <input
-                        id="town"
+                            bind:value={CheckoutData.address.line2}
-                        class="form-input"
+                            type="text"
-                />
+                            id="line2"
-                <span class="form-notice error">Town name required</span>
+                            class="form-input"
-            </div>
+                    />
-            <div class="spacer half" />
+                    <span class="form-notice error"></span>
-            <div class="form-element">
+                </div>
-                <label class="form-label" for="postcode">Postcode</label>
+                <div class="spacer half" />
-                <input
+                <div class="form-element">
-                        bind:value={CheckoutData.address.postcode}
+                    <label class="form-label" for="town">Town</label>
-                        type="text"
+                    <input
-                        id="postcode"
+                            bind:value={CheckoutData.address.town}
-                        class="form-input"
+                            type="text"
-                />
+                            id="town"
-                <span class="form-notice error">Postcode required</span>
+                            class="form-input"
-            </div>
+                    />
+                    <span class="form-notice error">Town name required</span>
+                </div>
+                <div class="spacer half" />
+                <div class="form-element">
+                    <label class="form-label" for="postcode">Postcode</label>
+                    <input
+                            bind:value={CheckoutData.address.postcode}
+                            type="text"
+                            id="postcode"
+                            class="form-input"
+                    />
+                    <span class="form-notice error">Postcode required</span>
+                </div>
+            {:else}
+                <p>You'll receive an email and text reminding you of your order, once it's ready to be picked up!</p>
+                <div class="spacer half" />
+            {/if}
+            <!-- As leaflet needs the map element to exist while its loading, we must render it always -->
+            <div id="map" class:show-map={!CheckoutData.delivery}></div>
 
             <div class="spacer" />
             <hr>
@@ -248,28 +284,75 @@
         }
     }
 
-    #checkoutError {
+    #delivery-option {
-        margin-left: auto;
+        padding: 0;
-        margin-right: auto;
 
-        max-width: $sizing-default-width;
+        width: max-content;
-        height: 400px;
 
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
-        justify-content: center;
-        align-items: center;
 
-        > h1 {
+        > li {
-            display: flex;
+            list-style: none;
-            justify-content: center;
-            align-items: center;
 
-            font-size: $font-size-very-fucking-big;
+            border-radius: 0;
-            text-align: center;
+            border: 1px solid rgba($color-dark, 0.1);
+            background-color: $color-light;
+            color: $color-on-light;
+
+            overflow: hidden;
+
+            button {
+                padding: 0 $spacing-large;
+
+                width: 100%;
+                height: 35px;
+
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-end;
+                align-items: center;
+
+                font-size: $font-size-p;
+                text-decoration: none;
+
+                border: 0 solid transparent;
+                background-color: transparent;
+                color: inherit;
+            }
+
+            &.checked {
+                background-color: $color-dark;
+                color: $color-on-dark;
+            }
+
+            &:first-of-type {
+                border-top-left-radius: $border-radius-normal;
+                border-bottom-left-radius: $border-radius-normal;
+            }
+            &:last-of-type {
+                border-top-right-radius: $border-radius-normal;
+                border-bottom-right-radius: $border-radius-normal;
+            }
+            &:hover {
+                background-color: $color-primary;
+                color: $color-on-primary;
+            }
         }
-        > p {
+    }
-            text-align: center;
+
+    #map {
+        width: 100%;
+        max-width: 550px;
+        height: 400px;
+
+        display: none;
+
+        border-radius: $border-radius-normal;
+        box-shadow: 0 1px 0.5px rgba(#000, 0.3);
+
+        &.show-map {
+            display: block;
         }
     }