Adjust how unavailable item banner is displayed

Make item prices more realistic for testing

front/src/components/BasketItem.svelte

@@ -25,13 +25,12 @@
 
 
 <div class="container" >
-    <div class="basket-item" class:basket-item-availability={!item.data.availability}>
+    {#if !item.data.availability}
-        {#if !item.data.availability}
+        <div class="basket-item-notice">
-            <div class="basket-item-notice">
+            <SealWarning weight="fill" />&nbsp;&nbsp;<span>Item is no-longer for sale</span>
-                <SealWarning weight="fill" />&nbsp;&nbsp;<span>Item is no-longer for sale</span>
+        </div>
-            </div>
+    {/if}
-        {/if}
+    <div class="basket-item">
-
         {#if item.data.images && item.data.images[0]}
             <img src="{item.data.images[0]}" alt="Item" class="basket-item-image">
         {:else}
@@ -71,6 +70,10 @@
 <style lang="scss">
     @import "../styles/vars";
 
+    .container {
+        overflow: hidden;
+    }
+
     .basket-item {
         position: relative;
 
@@ -80,19 +83,11 @@
         border-radius: $border-radius-normal;
 
         overflow: hidden;
-
-        &.basket-item-availability {
-            padding-top: 30px;
-        }
     }
     .basket-item-notice {
         width: 100%;
         height: 30px;
 
-        position: absolute;
-        top: 0;
-        left: 0;
-
         display: flex;
         justify-content: center;
         align-items: center;

front/src/lib/test-data.ts

@@ -5,7 +5,7 @@ const TestData: Item[] = [
         uuid: "soap",
         availability: true,
         name: "Bar of Soap",
-        price: 69.99,
+        price: 2.99,
         description: `Example`,
         labels: [Labels.vegan, Labels.spicy],
     },
@@ -13,7 +13,7 @@ const TestData: Item[] = [
         uuid: "sock",
         availability: true,
         name: "Sock",
-        price: 21,
+        price: 1.99,
         description: `Example`,
         labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
     },
@@ -29,7 +29,7 @@ const TestData: Item[] = [
         uuid: "toast",
         availability: true,
         name: "Toast",
-        price: 4382749832743,
+        price: 3.49,
         description: `Example`,
         labels: [Labels.gluten],
     },
@@ -45,7 +45,7 @@ const TestData: Item[] = [
         uuid: "mouldy_bread",
         availability: true,
         name: "half eaten mouldy bread",
-        price: -99,
+        price: 0.39,
         description: `Example`,
         labels: [Labels.nut],
     },
@@ -68,19 +68,20 @@ Contains:
             "/item_images/cupcake.jpg",
         ],
     },
-    // {
+    {
-    //     uuid: "gwagwa",
+        uuid: "gwagwa",
-    //     availability: false,
+        availability: false,
-    //     name: "GwaGwa",
+        name: "GwaGwa",
-    //     price: 69,
+        price: 69,
-    //     labels: [Labels.nut],
+        description: `Example`,
-    //     images: ["/item_images/dab.jpg"],
+        labels: [Labels.nut],
-    // },
+        images: ["/item_images/dab.jpg"],
+    },
     {
         uuid: "hogmelon",
         availability: true,
         name: "Hogermellon",
-        price: 1111,
+        price: 12.99,
         description: `
 This is a sample description.
 
@@ -95,7 +96,7 @@ Contains the following:
         uuid: "bluhog",
         availability: true,
         name: "Blue HOGGGGG",
-        price: 0,
+        price: 13.99,
         description: `
 This is a sample description.
 

front/src/pages/Checkout.svelte

@@ -1,28 +1,15 @@
 <script lang="ts">
     import { link } from "svelte-spa-router";
-    import { ArrowLeft, ArrowRight, Basket, SealWarning } from "phosphor-svelte";
+    import { ArrowLeft, ArrowRight, Basket } from "phosphor-svelte";
 
-    import Cart from "../lib/cart";
     import PaymentForm from "./Checkout/PaymentForm.svelte";
     import LeFinal from "./Checkout/LeFinal.svelte";
 
     export let params: {
         progress?: string;
     };
-
-    let unavailableItems = false;
-    Cart.getEntries().forEach(([_, item]) => {
-        if (!item.data.availability) unavailableItems = true;
-    });
-
 </script>
 
-{#if unavailableItems}
-    <div class="notice error">
-        <SealWarning weight="fill" />&nbsp;&nbsp;<span>Order contains an item that is no-longer available</span>
-    </div>
-{/if}
-
 <div id="checkoutHeader">
     <a href="/cart" use:link id="cancel-button"><ArrowLeft />&nbsp;Cancel</a>
 </div>

front/src/pages/Checkout/LeFinal.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
-    import { type CartItem } from "../../lib/types";
+    import { link } from "svelte-spa-router";
+    import { SealWarning } from "phosphor-svelte";
+
     import Cart from "../../lib/cart";
 
-    let items: [string, CartItem][];
+    let items = Cart.getEntries();
-    let totalPrice: number;
+    let totalPrice = Cart.getTotalPrice();
 
-    Cart.subscribe(() => {
+    let unavailableItems = false;
-        items = Cart.getEntries();
+    Cart.getEntries().forEach(([_, item]) => {
-        totalPrice = Cart.getTotalPrice();
+        if (!item.data.availability) unavailableItems = true;
     });
 </script>
 
 <h1>Checkout > Order</h1>
 <div class="container">
+    {#if unavailableItems}
+        <div class="unavailable-items-banner">
+            <SealWarning weight="fill" />&nbsp;&nbsp;<span>Order contains an item that is no-longer available</span>
+        </div>
+    {/if}
     <div class="section small">
         <div class="table">
             <table>
@@ -30,11 +37,34 @@
 
         <p>Total: ${totalPrice}</p>
     </div>
+    <hr>
+    <div class="section small">
+        <p>To make any changes to your order, <a href="/cart" use:link>please go back to your cart</a>.</p>
+    </div>
 </div>
 
 <style lang="scss">
     @import "../../styles/vars";
 
+    .container {
+        overflow: hidden;
+    }
+
+    .unavailable-items-banner {
+        height: 30px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: $font-size-p;
+
+        background: $color-error;
+        color: $color-on-error;
+
+        box-shadow: 0 1px 0.5px rgba(#000, 0.3);
+    }
+
     .table {
         border-radius: $border-radius-normal;
         border: 1px solid rgba($color-dark, 0.3);