From e3e4e482cc587b12e3e04d3663061760eea1019c Mon Sep 17 00:00:00 2001 From: Fluffy Date: Fri, 17 May 2024 14:09:13 +0100 Subject: [PATCH] Finalise Checkout page design Make CheckoutProgress type, hopefully to use with the checkout API thang fix banner loading stuff --- .../src/components/AnnouncementBanner.svelte | 18 +- front/src/lib/test-api.ts | 8 +- front/src/lib/test-data.ts | 24 +- front/src/lib/types.ts | 14 + front/src/pages/Checkout.svelte | 368 +++++++++++++----- front/src/pages/Checkout/LeFinal.svelte | 104 ----- front/src/pages/Checkout/PaymentForm.svelte | 66 ---- front/src/routes.js | 4 +- 8 files changed, 316 insertions(+), 290 deletions(-) delete mode 100644 front/src/pages/Checkout/LeFinal.svelte delete mode 100644 front/src/pages/Checkout/PaymentForm.svelte diff --git a/front/src/components/AnnouncementBanner.svelte b/front/src/components/AnnouncementBanner.svelte index f1ca0dd..7afb817 100644 --- a/front/src/components/AnnouncementBanner.svelte +++ b/front/src/components/AnnouncementBanner.svelte @@ -27,8 +27,13 @@ border-radius: $border-radius-large; - background: linear-gradient(to right, $color-background 8%, rgba($color-dark, 0.3) 38%, $color-background 54%); - background-size: 1000px 100%; + background: linear-gradient( + to right, + rgba($color-dark, 0) 8%, + rgba($color-dark, 0.3) 38%, + rgba($color-dark, 0) 54% + ) no-repeat; + background-size: 1500px 100%; animation: loading 1s infinite linear; overflow: hidden; @@ -43,7 +48,10 @@ left: $padding; border-radius: calc($border-radius-large - $padding); - background-color: rgba($color-background, 0.9); + background-color: darken($color-background, 10%); + background-image: url("/assets/Noise.png"); + + opacity: 0.9; } } @@ -57,10 +65,10 @@ @keyframes loading{ 0%{ - background-position: -500px 0 + background-position: -750px 0 } 100%{ - background-position: 500px 0 + background-position: 750px 0 } } \ No newline at end of file diff --git a/front/src/lib/test-api.ts b/front/src/lib/test-api.ts index 6e59fba..f2682f7 100644 --- a/front/src/lib/test-api.ts +++ b/front/src/lib/test-api.ts @@ -12,7 +12,7 @@ export async function getAnnouncements(): Promise<{ image: string }> { cache["announcement_banner"] = { image: "/banner_images/BannerExampleImage.jpg", }; - await fakeDelay(200); + await fakeDelay(2000); } return cache["announcement_banner"]; } @@ -20,7 +20,7 @@ export async function getAnnouncements(): Promise<{ image: string }> { export async function getPopularToday(): Promise { if (cache["popular_today"] === undefined) { cache["popular_today"] = TestData; - await fakeDelay(200); + await fakeDelay(2000); } return cache["popular_today"]; } @@ -58,7 +58,7 @@ export async function getItemsByUUID(items: string[]): Promise { if (data.length === 0) throw new Error("Resource could not be found"); - await fakeDelay(200); + await fakeDelay(2000); return data; } @@ -74,7 +74,7 @@ export async function postContactEmail( reason: string, message: string ): Promise { - await fakeDelay(200); + await fakeDelay(2000); if (!name) throw new Error("Name missing"); if (!email) throw new Error("Email missing"); diff --git a/front/src/lib/test-data.ts b/front/src/lib/test-data.ts index a52780a..79a1f85 100644 --- a/front/src/lib/test-data.ts +++ b/front/src/lib/test-data.ts @@ -19,7 +19,7 @@ const TestData: Item[] = [ }, { uuid: "brick", - availability: true, + availability: false, name: "Brick", price: 0, description: `Example`, @@ -44,14 +44,14 @@ const TestData: Item[] = [ { uuid: "mouldy_bread", availability: true, - name: "half eaten mouldy bread", + name: "Singular slice of bread", price: 0.39, description: `Example`, labels: [Labels.nut], }, { uuid: "cup_cake_leg", - availability: false, + availability: true, name: "Eated Cupcake", price: 1.69, description: ` @@ -68,15 +68,15 @@ Contains: "/item_images/cupcake.jpg", ], }, - { - uuid: "gwagwa", - availability: false, - name: "GwaGwa", - price: 69, - description: `Example`, - labels: [Labels.nut], - images: ["/item_images/dab.jpg"], - }, + // { + // uuid: "gwagwa", + // availability: false, + // name: "GwaGwa", + // price: 69, + // description: `Example`, + // labels: [Labels.nut], + // images: ["/item_images/dab.jpg"], + // }, { uuid: "hogmelon", availability: true, diff --git a/front/src/lib/types.ts b/front/src/lib/types.ts index f089c8b..e79d2d9 100644 --- a/front/src/lib/types.ts +++ b/front/src/lib/types.ts @@ -23,6 +23,20 @@ export type CartItem = { export type CartRecord = Record; +export type Checkout = { + personal: { + name: string; + email: string; + phone?: number; + }; + address: { + line1: string; + line2?: string; + town: string; + postcode: string; + } +}; + export type JSONResponse = { data?: { item: Item[]; // Todo Make this not just item type diff --git a/front/src/pages/Checkout.svelte b/front/src/pages/Checkout.svelte index 639465a..05e8608 100644 --- a/front/src/pages/Checkout.svelte +++ b/front/src/pages/Checkout.svelte @@ -1,72 +1,179 @@ - + Cancel +
+
+
+

Checkout

+
+
+ + + + {#if !nameValid}Enter a name{/if} + +
+
+
+ + + + {#if !emailValid}Email not valid{/if} + +
+
+
+ + + + {#if !phoneValid}Phone Number not valid{/if} + +
-{#if params.progress === "1"} - -
-
- Order  +
+
+ +
+ + + Line 1 required +
+
+
+ + + +
+
+
+ + + Town name required +
+
+
+
+ + + Postcode required +
+
+
-{:else if params.progress === "2"} - -
-  Payment - Confirm Purchase  +
+
+
+ {#if unavailableItems} +
+   Order contains unavailable items +
+ {/if} +
+

Cart Total: ${totalPrice}

+
+
+
+
+ + + {#each items as [_, item]} + + + + + + {/each} +
PriceItem NameAmount
£{item.data.price * item.amount} (£{item.data.price}){item.data.name}{item.amount}
+
+
+
+
+

To make any changes to your order, return to the cart.

+
+
+
+
-{:else} -
-

Something went wrong! 

-

Return to checkout.

-
-{/if} +
\ No newline at end of file + + .checkout { + display: flex; + flex-direction: row; + justify-content: normal; + align-items: flex-start; + } + + .container { + overflow: hidden; + } + + #form-container { + width: 100%; + position: relative; + } + + #cart { + min-width: calc(400px - $spacing-normal); + width: 100%; + max-width: calc(400px - $spacing-normal); + + position: sticky; + top: calc($sizing-navigation-height + $spacing-normal); + } + + @media only screen and (max-width: 900px) { + .checkout { + flex-direction: column; + } + + #cart { + max-width: unset; + position: unset; + } + } + diff --git a/front/src/pages/Checkout/LeFinal.svelte b/front/src/pages/Checkout/LeFinal.svelte deleted file mode 100644 index cc667a7..0000000 --- a/front/src/pages/Checkout/LeFinal.svelte +++ /dev/null @@ -1,104 +0,0 @@ - - -

Checkout > Order

-
- {#if unavailableItems} -
-   Order contains an item that is no-longer available -
- {/if} -
-
- - - {#each items as [_, item]} - - - - - - {/each} -
Price (each)Item NameAmount
£{item.data.price * item.amount} (£{item.data.price}){item.data.name}{item.amount}
-
-
- -

Total: ${totalPrice}

-
-
-
-

To make any changes to your order, please go back to your cart.

-
-
- - \ No newline at end of file diff --git a/front/src/pages/Checkout/PaymentForm.svelte b/front/src/pages/Checkout/PaymentForm.svelte deleted file mode 100644 index 72c84b3..0000000 --- a/front/src/pages/Checkout/PaymentForm.svelte +++ /dev/null @@ -1,66 +0,0 @@ - - -

Checkout > Payment

-
-
- - - - {#if !nameValid} - Enter a name - {/if} - -
- -
- -
- - - - {#if !emailValid} - Email not valid - {/if} - -
- -
- -

 GwaGwa

- - - \ No newline at end of file diff --git a/front/src/routes.js b/front/src/routes.js index 571ce94..e07a4e5 100644 --- a/front/src/routes.js +++ b/front/src/routes.js @@ -40,11 +40,11 @@ const routes = { conditions: [], userData: { showNavBar: true, fullWidth: false }, }), - "/cart/checkout/:progress?": wrap({ + "/cart/checkout": wrap({ asyncComponent: () => import("./pages/Checkout.svelte"), loadingComponent: PageLoading, conditions: [], - userData: { showNavBar: true, fullWidth: false }, + userData: { showNavBar: true, fullWidth: true }, }), "/booking": wrap({ asyncComponent: () => import("./pages/Booking.svelte"),