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 <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 <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;