From 619dc1e6edd3d18d122a3a584633a6ef30a6a500 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sat, 18 May 2024 16:50:17 +0100
Subject: [PATCH] Add custom message box Add headers and descriptions for
 different sections

---
 front/src/lib/types.ts          |  1 +
 front/src/pages/Checkout.svelte | 89 +++++++++++++++++++++++++--------
 2 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/front/src/lib/types.ts b/front/src/lib/types.ts
index 85084f6..b21d496 100644
--- a/front/src/lib/types.ts
+++ b/front/src/lib/types.ts
@@ -35,6 +35,7 @@ export type Checkout = {
         town: string;
         postcode: string;
     };
+    message: string;
 };
 
 export type JSONResponse = {
diff --git a/front/src/pages/Checkout.svelte b/front/src/pages/Checkout.svelte
index 3121827..39d556c 100644
--- a/front/src/pages/Checkout.svelte
+++ b/front/src/pages/Checkout.svelte
@@ -3,6 +3,7 @@
     import { ArrowLeft, SealWarning, ArrowRight } from "phosphor-svelte";
 
     import { type CartItem, type Checkout } from '../lib/types';
+    import { expandOnTyping } from "../lib/utils";
     import Cart from "../lib/cart";
 
     const CheckoutData: Checkout = {
@@ -16,11 +17,13 @@
             town: "",
             postcode: "",
         },
+        message: "",
     }
 
     $: nameValid = CheckoutData.personal.name.length > 1
     $: emailValid = CheckoutData.personal.email.length > 1
     $: phoneValid = isNaN(CheckoutData.personal.phone)
+    $: messageValid = messageValid = CheckoutData.message.length <= 200;
 
     let items: [string, CartItem][];
     let totalPrice: number;
@@ -43,8 +46,11 @@
 <div class="spacer half" />
 <div class="checkout">
     <div id="form-container">
-        <h2>Checkout</h2>
+        <h1>Checkout</h1>
         <form on:submit|preventDefault={onSubmit} id="form">
+            <h2>Contact Information</h2>
+            <p>This is for updates on your order</p>
+            <div class="spacer half" />
             <div class="form-element">
                 <label class="form-label" for="name">Name</label>
                 <input
@@ -85,8 +91,34 @@
             </div>
 
             <div class="spacer" />
+            <hr>
             <div class="spacer" />
 
+            <h2>Special Requests</h2>
+            <p>Have a noisy dog, and don't want us to knock? Let us know here!</p>
+            <div class="spacer half" />
+            <div class="form-element">
+                <label class="form-label" for="message">Message</label>
+                <textarea
+                        bind:value={CheckoutData.message}
+                        use:expandOnTyping
+                        rows="1"
+                        id="message"
+                        name="message"
+                        class="form-input"
+                />
+                <span class="form-notice" class:error={!messageValid}>
+                    ({CheckoutData.message.length}/{200})
+                </span>
+            </div>
+
+            <div class="spacer" />
+            <hr>
+            <div class="spacer" />
+
+            <h2>Address</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>
                 <input
@@ -120,7 +152,6 @@
                 <span class="form-notice error">Town name required</span>
             </div>
             <div class="spacer half" />
-            <div class="spacer half" />
             <div class="form-element">
                 <label class="form-label" for="postcode">Postcode</label>
                 <input
@@ -131,7 +162,13 @@
                 />
                 <span class="form-notice error">Postcode required</span>
             </div>
-            <div class="spacer half" />
+
+            <div class="spacer" />
+            <hr>
+            <div class="spacer" />
+
+            <h2>Payment</h2>
+            <p>Currently, we only do payment in person, as our online payment system isn't setup yet.</p>
         </form>
     </div>
     <div class="spacer" />
@@ -143,30 +180,32 @@
                 </div>
             {/if}
             <div class="header">
-                <h2>Cart Total: ${totalPrice}</h2>
+                <h2>Total: ${totalPrice}</h2>
             </div>
-            <hr>
-            <div class="section">
-                <div class="table">
-                    <table>
-                        <tr><th>Price</th><th>Item Name</th><th>Amount</th></tr>
-                        {#each items as [_, item]}
-                            <tr class:table-row-error={!item.data.availability}>
-                                <td>£{item.data.price * item.amount} (£{item.data.price})</td>
-                                <td>{item.data.name}</td>
-                                <td>{item.amount}</td>
-                            </tr>
-                        {/each}
-                    </table>
-                </div>
+            <div class="table">
+                <table>
+                    <tr><th>Price (each)</th><th>Item Name</th><th>#</th></tr>
+                    {#each items as [_, item]}
+                        <tr class:table-row-error={!item.data.availability}>
+                            <td>£{item.data.price * item.amount} (£{item.data.price})</td>
+                            <td>{item.data.name}</td>
+                            <td>{item.amount}</td>
+                        </tr>
+                    {/each}
+                </table>
             </div>
-            <hr>
             <div class="section">
-                <p>To make any changes to your order, <a href="/cart" use:link>return to the cart</a>.</p>
+                <p>To make any changes, <a href="/cart" use:link>return to the cart</a>.</p>
             </div>
         </div>
         <div class="spacer half" />
-        <button id="checkout-button" form="form">Checkout&nbsp;<ArrowRight /></button>
+        <div class="container">
+            <div class="section">
+                <p>By pressing "Checkout" you agree to our terms of service</p>
+                <div class="spacer half" />
+                <button id="checkout-button" form="form">Checkout&nbsp;<ArrowRight /></button>
+            </div>
+        </div>
     </div>
 </div>
 
@@ -178,6 +217,12 @@
     #line1, #line2 { width: 400px; }
     #town { width: 250px; }
     #postcode { width: 200px; }
+    #message {
+        width: 400px;
+        max-width: calc(100vw - calc(2 * $spacing-normal));
+        resize: none;
+        overflow: hidden;
+    }
 
     #cancel-button {
         padding: 0 $spacing-small;
@@ -269,7 +314,7 @@
     }
 
     .table {
-        border-radius: $border-radius-normal;
+        //border-radius: $border-radius-normal;
         border: 1px solid rgba($color-dark, 0.2);
         background-color: $color-light;