From c908a544aa47802ac38e23eb6fa6ab9644efed7c Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Thu, 16 May 2024 13:32:11 +0100
Subject: [PATCH] Increase hit target for dropdown Add CartRecord type Remove
 OOP style Promises from Contact Add contact reason dropdown The usual SCSS
 changes and adjustments

---
 front/src/components/DropDown.svelte | 35 +++++++----
 front/src/lib/cart.ts                | 41 ++++++-------
 front/src/lib/test-api.ts            |  2 +
 front/src/lib/types.ts               |  2 +
 front/src/pages/Contact.svelte       | 86 +++++++++++++++++++++++-----
 front/src/pages/Menu.svelte          |  8 +++
 front/src/styles/_form_element.scss  |  2 +-
 7 files changed, 125 insertions(+), 51 deletions(-)

diff --git a/front/src/components/DropDown.svelte b/front/src/components/DropDown.svelte
index 2ad8b56..811697f 100644
--- a/front/src/components/DropDown.svelte
+++ b/front/src/components/DropDown.svelte
@@ -6,12 +6,10 @@
 </script>
 
 <div class="dropdown" class:open={open}>
-    <div class="dropdown-header">
-        <p>{name}</p>
-        <button on:click={() => { open = !open }}>
-            <CaretDown />
-        </button>
-    </div>
+    <button class="dropdown-header" on:click={() => { open = !open }}>
+        <span class="dropdown-text">{name}</span>
+        <span class="dropdown-button"><CaretDown /></span>
+    </button>
     <div class="dropdown-content">
         <slot></slot>
     </div>
@@ -28,6 +26,8 @@
         .dropdown-header {
             padding: $spacing-normal;
 
+            width: 100%;
+
             position: relative;
 
             display: flex;
@@ -35,12 +35,15 @@
             justify-content: space-between;
             align-items: center;
 
-            p {
+            border: 0 solid transparent;
+            background-color: transparent;
+
+            .dropdown-text {
                 font-size: $font-size-h6;
                 font-weight: $font-weight-bold;
             }
 
-            button {
+            .dropdown-button {
                 padding: 0;
 
                 height: 100%;
@@ -62,9 +65,13 @@
                 color: $color-on-light;
 
                 transition: transform 0.1s ease-in-out;
+            }
 
-                &:hover {
+            &:hover, &:focus-visible {
+                .dropdown-button {
                     color: $color-primary;
+                    outline: 0 solid transparent;
+                    transform: rotate(-15deg);
                 }
             }
         }
@@ -76,11 +83,15 @@
 
         &.open {
             .dropdown-header {
-                //padding: $spacing-normal $spacing-normal $spacing-small;
-
-                button {
+                .dropdown-button {
                     transform: rotate(-180deg);
                 }
+
+                &:hover, &:focus-visible {
+                    .dropdown-button {
+                        transform: rotate(calc(-180deg + 15deg));
+                    }
+                }
             }
             .dropdown-content {
                 display: block;
diff --git a/front/src/lib/cart.ts b/front/src/lib/cart.ts
index 761f872..8b04d05 100644
--- a/front/src/lib/cart.ts
+++ b/front/src/lib/cart.ts
@@ -1,24 +1,23 @@
 import { type Writable, get, writable } from "svelte/store";
 
-import { type CartItem, type Item } from "./types";
+import { type CartRecord, type CartItem, type Item } from "./types";
 import { getItemByUUID, postVerifyCart } from "./test-api";
 
 function createCartStore() {
     let loaded = false;
 
-    const cart: Writable<Record<string, CartItem>> = writable({});
+    const cart: Writable<CartRecord> = writable({});
 
-    async function init() {
-        let localData: Record<string, CartItem> = {};
+    async function init(): Promise<void> {
+        let localData: CartRecord = {};
         try {
             localData = JSON.parse(localStorage.getItem("basket")) || {};
         } catch {
-            console.error("Local Cart data fucked");
+            console.error("Local Cart data could not be parsed");
         }
 
         try {
-            const newData: Record<string, CartItem> =
-                await postVerifyCart(localData);
+            const newData: CartRecord = await postVerifyCart(localData);
             cart.set(newData);
         } catch (error) {
             console.error("Could not load basket:", error);
@@ -28,18 +27,16 @@ function createCartStore() {
     }
 
     async function addToCart(uuid: string, amount: number) {
-        if (!loaded) {
-            return;
-        }
+        if (!loaded) return;
 
         if (get(cart)[uuid] !== undefined) {
-            cart.update((cart: Record<string, CartItem>) => {
+            cart.update((cart: CartRecord) => {
                 cart[uuid].amount += amount;
                 return cart;
             });
         } else {
             await getItemByUUID(uuid).then((data: Item) => {
-                cart.update((cart: Record<string, CartItem>) =>
+                cart.update((cart: CartRecord) =>
                     Object.assign({}, cart, {
                         [uuid]: { uuid, amount, data },
                     })
@@ -47,13 +44,9 @@ function createCartStore() {
             });
         }
 
-        cart.update((cart: Record<string, CartItem>) => {
-            if (cart[uuid].amount <= 0) {
-                delete cart[uuid]; // skipcq: JS-0320
-            } else if (cart[uuid].amount > 99) {
-                cart[uuid].amount = 99; // skipcq: JS-0320
-            }
-
+        cart.update((cart: CartRecord) => {
+            if (cart.uuid.amount <= 0) delete cart.uuid;
+            if (cart.uuid.amount > 99) cart.uuid.amount = 99;
             return cart;
         });
     }
@@ -82,12 +75,10 @@ function createCartStore() {
         return totalCartPrice;
     }
 
-    function removeByUUID(uuid: string) {
-        if (!loaded) {
-            return;
-        }
+    function removeByUUID(uuid: string): void {
+        if (!loaded) return;
 
-        cart.update((cart) => {
+        cart.update((cart: CartRecord) => {
             delete cart[uuid]; // skipcq: JS-0320
             return cart;
         });
@@ -110,7 +101,7 @@ const Cart = createCartStore();
 export const cartLoaded = Cart.init();
 
 // Make sure to update localstorage on any changes
-Cart.subscribe((value) => {
+Cart.subscribe((value: CartRecord) => {
     localStorage.setItem("basket", JSON.stringify(value));
 });
 
diff --git a/front/src/lib/test-api.ts b/front/src/lib/test-api.ts
index 391b87a..6e59fba 100644
--- a/front/src/lib/test-api.ts
+++ b/front/src/lib/test-api.ts
@@ -71,12 +71,14 @@ export async function getItemByUUID(uuid: string): Promise<Item> {
 export async function postContactEmail(
     name: string,
     email: string,
+    reason: string,
     message: string
 ): Promise<string> {
     await fakeDelay(200);
 
     if (!name) throw new Error("Name missing");
     if (!email) throw new Error("Email missing");
+    if (!reason) throw new Error("Reason missing");
     if (!message) throw new Error("Message missing");
     if (message.length < 150) throw new Error("Message FUCKED");
 
diff --git a/front/src/lib/types.ts b/front/src/lib/types.ts
index 2af39c7..0e48926 100644
--- a/front/src/lib/types.ts
+++ b/front/src/lib/types.ts
@@ -21,6 +21,8 @@ export type CartItem = {
     data: Item;
 };
 
+export type CartRecord = Record<string, CartItem>
+
 export type JSONResponse = {
     data?: {
         item: Item[]; // Todo Make this not just item type
diff --git a/front/src/pages/Contact.svelte b/front/src/pages/Contact.svelte
index 224a8d9..796fc4d 100644
--- a/front/src/pages/Contact.svelte
+++ b/front/src/pages/Contact.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { PaperPlaneRight, SealWarning, SealCheck } from "phosphor-svelte";
+    import { PaperPlaneRight, SealWarning, SealCheck, CaretDown } from "phosphor-svelte";
 
     import { postContactEmail } from "../lib/test-api";
     import { expandOnTyping } from "../lib/utils";
@@ -11,27 +11,28 @@
 
     let name = "";
     let email = "";
+    let reason = "";
     let message = "";
 
     let nameValid = true;
     let emailValid = true;
+    let reasonValid = true;
     let messageValid = false;
 
     function validateName() { nameValid = name.length > 1 }
     function validateEmail() { emailValid = email.length > 1 }
+    function validateReason() { reasonValid = reason != "" }
     function validateMessage() { messageValid = message.length > minMessageLength }
 
     function onSubmit() {
-        nameValid = true;
-        emailValid = true;
-
-        formMessage = postContactEmail(name, email, message)
-            .catch((error) => {
-                validateName();
-                validateEmail();
-                validateMessage();
-                throw error;
-            });
+        try {
+            formMessage = postContactEmail(name, email, reason, message)
+        } catch (error) {
+            validateName();
+            validateEmail();
+            validateReason();
+            validateMessage();
+        }
     }
 </script>
 
@@ -96,13 +97,41 @@
     </div>
 
     <div class="spacer half" />
-    <!-- ToDo: Add dropdown for issue type, such as Technical, Order, Account, or other -->
+
+    <div class="form-element">
+        <label class="form-label" for="reason">Contact Reason</label>
+        <div class="select-container">
+            <select
+                    bind:value={reason}
+                    on:blur={validateReason}
+                    on:input={validateReason}
+                    class="form-input"
+                    id="reason"
+                    name="reason"
+            >
+                <option value="general">General Enquiry</option>
+                <option value="technical">Technical/Website</option>
+                <option value="order">Order</option>
+                <option value="booking">Booking</option>
+            </select>
+            <div class="select-arrow">
+                <CaretDown />
+            </div>
+        </div>
+        <span class="form-notice error">
+            {#if !reasonValid}
+                You must provide a reason for contact
+            {/if}
+        </span>
+    </div>
+
+    <div class="spacer half" />
 
     <div class="form-element">
         <label class="form-label" for="message">Message</label>
         <textarea
                 bind:value={message}
-                on:input={validateMessage}
+                on:blur={validateMessage}
                 use:expandOnTyping
                 rows="1"
                 cols="50"
@@ -146,6 +175,37 @@
         overflow: hidden;
     }
 
+    .select-container{
+        width: max-content;
+        position: relative;
+
+        > select {
+            width: 200px;
+            appearance: none;
+        }
+
+        > .select-arrow {
+            height: 100%;
+
+            position: absolute;
+            top: 0;
+            right: $spacing-small;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            transition: transform 0.1s ease-in-out;
+            pointer-events: none;
+        }
+
+        &:hover {
+            > .select-arrow {
+                transform: translateY(2px);
+            }
+        }
+    }
+
     button {
         padding: 0 $spacing-normal;
 
diff --git a/front/src/pages/Menu.svelte b/front/src/pages/Menu.svelte
index bac7ca2..cb7eee6 100644
--- a/front/src/pages/Menu.svelte
+++ b/front/src/pages/Menu.svelte
@@ -170,6 +170,10 @@
         margin-left: $spacing-normal;
         width: 100%;
         position: relative;
+
+        > h2, p {
+            text-align: right;
+        }
     }
 
     #filter {
@@ -222,6 +226,10 @@
         #menu-list {
             margin-left: 0;
             margin-top: $spacing-normal;
+
+            > h2, p {
+                text-align: left;
+            }
         }
     }
 </style>
diff --git a/front/src/styles/_form_element.scss b/front/src/styles/_form_element.scss
index 8d008bd..080b0e7 100644
--- a/front/src/styles/_form_element.scss
+++ b/front/src/styles/_form_element.scss
@@ -21,7 +21,7 @@
     font-family: $font-family;
     font-size: $font-size-p;
 
-    border: 1px solid rgba($color-dark, 0.2);
+    border: 1px solid $color-light;
     border-radius: $border-radius-normal;
     background-color: $color-light;
     color: $color-on-light;