From 5f0b357d883a936c1bc7456041de3f5a9ff2457d Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Mon, 5 Dec 2022 18:22:08 +0100 Subject: [PATCH 01/33] Updated ts types, sync w/ backend --- src/lib/cartStore.ts | 7 ++++--- src/lib/interfaces/ApiResponse.ts | 18 +++++++++++++--- src/lib/interfaces/IOrder.ts | 12 ++--------- src/lib/websocketCart.ts | 1 + src/routes/checkout/DeliverySection.svelte | 13 ++++++++---- src/routes/checkout/OrderSection.svelte | 14 ++++++------- src/routes/login/+page.svelte | 4 ++-- src/routes/orders/[id]/CustomerDetails.svelte | 8 +++---- src/routes/orders/[id]/OrderSummary.svelte | 2 +- src/routes/receipt/[[id]]/+page.svelte | 21 +++++++++---------- src/routes/sitemap.xml/+server.ts | 4 +--- 11 files changed, 56 insertions(+), 48 deletions(-) diff --git a/src/lib/cartStore.ts b/src/lib/cartStore.ts index 000037c..ef93556 100644 --- a/src/lib/cartStore.ts +++ b/src/lib/cartStore.ts @@ -1,14 +1,15 @@ -import { writable, get, derived } from 'svelte/store'; +import { writable, derived } from 'svelte/store'; import type { Writable, Readable } from 'svelte/store'; +import type ICart from './interfaces/ICart'; -export const cart: Writable = writable([]); +export const cart: Writable = writable([]); export const isOpen: Writable = writable(false); export const count: Readable = derived(cart, ($cart) => $cart.length || 0); export const subTotal: Readable = derived(cart, ($cart) => { let total = 0; - $cart.forEach((cartItem) => (total += cartItem.price * cartItem.quantity)); + $cart.forEach((cartItem: ICart) => (total += cartItem.price * cartItem.quantity)); return total; }); diff --git a/src/lib/interfaces/ApiResponse.ts b/src/lib/interfaces/ApiResponse.ts index e32e071..4dc221b 100644 --- a/src/lib/interfaces/ApiResponse.ts +++ b/src/lib/interfaces/ApiResponse.ts @@ -1,27 +1,39 @@ import type { IProduct } from './IProduct'; import type { IOrder, IOrderSummary } from './IOrder'; +import type ICustomer from './ICustomer'; +import type ICart from './ICart'; export interface IProductResponse { success: boolean; products: Array; } -export interface IOrderResponse { +export interface IOrderDTO { success: boolean; order: IOrder; } +export interface IOrderCreateDTO { + customer: ICustomer; + cart: ICart[]; +} + export interface IOrderSummaryResponse { success: boolean; order: IOrderSummary; } -export interface IProductResponse { +export interface IProductDTO { success: boolean; product: IProduct; } -export interface IProductsResponse { +export interface IProductsDTO { success: boolean; products: Array; } + +export interface ICartDTO { + cart: ICart[]; + success: boolean; +} diff --git a/src/lib/interfaces/IOrder.ts b/src/lib/interfaces/IOrder.ts index 60383cb..f30afb3 100644 --- a/src/lib/interfaces/IOrder.ts +++ b/src/lib/interfaces/IOrder.ts @@ -1,5 +1,6 @@ // import type IProduct from './IProduct'; // import type BadgeType from './BadgeType'; +import type ICustomer from './ICustomer'; export interface IStripePayment { amount: number; @@ -26,17 +27,8 @@ export interface IOrder { created?: Date; } -export interface ICustomer { - city: string; - customer_no: string; - email: string; - firstname: string; - lastname: string; - streetaddress: string; - zipcode: number; -} - export interface ILineItem { + sku_id: number; image: string; name: string; price: number; diff --git a/src/lib/websocketCart.ts b/src/lib/websocketCart.ts index b4b49ff..bede984 100644 --- a/src/lib/websocketCart.ts +++ b/src/lib/websocketCart.ts @@ -1,5 +1,6 @@ import { dev } from '$app/environment'; import { cart as cartStore } from './cartStore'; +import type { ICartDTO } from './interfaces/ApiResponse'; const WS_HOST = '127.0.0.1'; const WS_PORT = 30010; diff --git a/src/routes/checkout/DeliverySection.svelte b/src/routes/checkout/DeliverySection.svelte index 73ffcef..73822eb 100644 --- a/src/routes/checkout/DeliverySection.svelte +++ b/src/routes/checkout/DeliverySection.svelte @@ -11,11 +11,16 @@
- - + + - - + +
diff --git a/src/routes/checkout/OrderSection.svelte b/src/routes/checkout/OrderSection.svelte index 7ddff40..2ef2e13 100644 --- a/src/routes/checkout/OrderSection.svelte +++ b/src/routes/checkout/OrderSection.svelte @@ -21,23 +21,23 @@ {#if $cart.length} - {#each $cart as order} + {#each $cart as cartItem}
- {order.name} - Størrelse: {order.size} + {cartItem.name} + Størrelse: {cartItem.size}
- Nok {order.quantity * order.price} + Nok {cartItem.quantity * cartItem.price} {/each} {:else} diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 8e96e53..2012ebb 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -6,9 +6,9 @@ let password: string; let displayMessage: string | null; - function postLogin(event: any) { + function postLogin(event: SubmitEvent) { displayMessage = null; - const formData = new FormData(event.target); + const formData = new FormData(event.target as HTMLFormElement); const data = {}; formData.forEach((value, key) => (data[key] = value)); diff --git a/src/routes/orders/[id]/CustomerDetails.svelte b/src/routes/orders/[id]/CustomerDetails.svelte index f265a27..c07cdb7 100644 --- a/src/routes/orders/[id]/CustomerDetails.svelte +++ b/src/routes/orders/[id]/CustomerDetails.svelte @@ -1,5 +1,5 @@
@@ -31,14 +30,14 @@ A payment to PLANETPOSEN, AS will appear on your statement with order number: {id}.

-

Order receipt has been email to: {email}

+

En ordrebekreftelse er sent til: {email}

- {#each products as product} + {#each order?.lineItems as lineItem}

- {product.name} x{product.quantity} - {product.currency} {product.price * product.quantity} + {lineItem.name} x{lineItem.quantity} + NOK {lineItem.price * lineItem.quantity}

{/each}

@@ -48,7 +47,7 @@

Total - NOK {subTotal(products)} + NOK {subTotal(order?.lineItems)}

diff --git a/src/routes/sitemap.xml/+server.ts b/src/routes/sitemap.xml/+server.ts index 4ad1381..71957d1 100644 --- a/src/routes/sitemap.xml/+server.ts +++ b/src/routes/sitemap.xml/+server.ts @@ -1,6 +1,4 @@ -import { dev } from '$app/environment'; -import { env } from '$env/dynamic/private'; -import type { IProductResponse } from '$lib/interfaces/ApiResponse'; +import type { IProductsDTO } from '$lib/interfaces/ApiResponse'; const domain = 'planet.schleppe.cloud'; const pages: Array = [ From 86920d254fc6bd38a1b860aab9a0a7e563c15930 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Mon, 5 Dec 2022 18:25:37 +0100 Subject: [PATCH 02/33] Use hooks to check env and rewrite API call url if localhost --- src/hooks.server.ts | 12 ++++++++++++ src/routes/orders/+page.server.ts | 10 +--------- src/routes/orders/[id]/+page.server.ts | 13 +++---------- src/routes/shop/+page.server.ts | 13 +++---------- src/routes/shop/[id]/+page.server.ts | 13 +++---------- src/routes/sitemap.xml/+server.ts | 11 +++-------- src/routes/warehouse/+page.server.ts | 9 +-------- 7 files changed, 26 insertions(+), 55 deletions(-) create mode 100644 src/hooks.server.ts diff --git a/src/hooks.server.ts b/src/hooks.server.ts new file mode 100644 index 0000000..366931d --- /dev/null +++ b/src/hooks.server.ts @@ -0,0 +1,12 @@ +import type { HandleFetch } from '@sveltejs/kit'; + +export const handleFetch: HandleFetch = async ({ request, fetch }) => { + const { origin } = new URL(request.url); + + if (request.url.startsWith(`${origin}/api`)) { + // clone the original request, but change the URL + request = new Request(request.url.replace(origin, 'http://localhost:30010'), request); + } + + return fetch(request); +}; diff --git a/src/routes/orders/+page.server.ts b/src/routes/orders/+page.server.ts index 33f3b62..7ba128c 100644 --- a/src/routes/orders/+page.server.ts +++ b/src/routes/orders/+page.server.ts @@ -1,16 +1,8 @@ -import { dev } from '$app/environment'; -import { env } from '$env/dynamic/private'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch }) => { - let url = '/api/orders'; - if (dev || env.API_HOST) { - url = (env.API_HOST || 'http://localhost:30010').concat(url); - } - - const res = await fetch(url); + const res = await fetch('/api/orders'); const response = await res.json(); - console.log('orders length:', response?.orders); return { orders: response?.orders || [] diff --git a/src/routes/orders/[id]/+page.server.ts b/src/routes/orders/[id]/+page.server.ts index ba13079..e96d356 100644 --- a/src/routes/orders/[id]/+page.server.ts +++ b/src/routes/orders/[id]/+page.server.ts @@ -1,18 +1,11 @@ -import { dev } from '$app/environment'; -import { env } from '$env/dynamic/private'; -import type { IOrderResponse } from '$lib/interfaces/ApiResponse'; +import type { IOrderDTO } from '$lib/interfaces/ApiResponse'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch, params }) => { const { id } = params; - let url = `/api/order/${id}`; - if (dev || env.API_HOST) { - url = (env.API_HOST || 'http://localhost:30010').concat(url); - } - - const res = await fetch(url); - const orderResponse: IOrderResponse = await res.json(); + const res = await fetch(`/api/order/${id}`); + const orderResponse: IOrderDTO = await res.json(); if (orderResponse?.success == false || orderResponse?.order === undefined) { throw Error(':('); diff --git a/src/routes/shop/+page.server.ts b/src/routes/shop/+page.server.ts index e2602c7..8b06193 100644 --- a/src/routes/shop/+page.server.ts +++ b/src/routes/shop/+page.server.ts @@ -1,16 +1,9 @@ -import { dev } from '$app/environment'; -import { env } from '$env/dynamic/private'; -import type { IProductsResponse } from '$lib/interfaces/ApiResponse'; +import type { IProductsDTO } from '$lib/interfaces/ApiResponse'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch }) => { - let url = '/api/products'; - if (dev || env.API_HOST) { - url = (env.API_HOST || 'http://localhost:30010').concat(url); - } - - const res = await fetch(url); - const products: IProductsResponse = await res.json(); + const res = await fetch('/api/products'); + const products: IProductsDTO = await res.json(); return products; }; diff --git a/src/routes/shop/[id]/+page.server.ts b/src/routes/shop/[id]/+page.server.ts index faf78f6..cd56bdd 100644 --- a/src/routes/shop/[id]/+page.server.ts +++ b/src/routes/shop/[id]/+page.server.ts @@ -1,19 +1,12 @@ -import { dev } from '$app/environment'; -import { env } from '$env/dynamic/private'; import generateProductJsonLd from '$lib/jsonld/product'; -import type { IProductResponse } from '$lib/interfaces/ApiResponse'; +import type { IProductDTO } from '$lib/interfaces/ApiResponse'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch, params }) => { const { id } = params; - let url = `/api/product/${id}`; - if (dev || env.API_HOST) { - url = (env.API_HOST || 'http://localhost:30010').concat(url); - } - - const res = await fetch(url); - const productResponse: IProductResponse = await res.json(); + const res = await fetch(`/api/product/${id}`); + const productResponse: IProductDTO = await res.json(); const jsonld = generateProductJsonLd(productResponse?.product); return { diff --git a/src/routes/sitemap.xml/+server.ts b/src/routes/sitemap.xml/+server.ts index 71957d1..83ab058 100644 --- a/src/routes/sitemap.xml/+server.ts +++ b/src/routes/sitemap.xml/+server.ts @@ -52,15 +52,10 @@ function sitemapPages(): string { } async function sitemapShopPages(): Promise { - let url = `/api/products`; - if (dev || env.API_HOST) { - url = (env.API_HOST || 'http://localhost:30010').concat(url); - } + const res = await fetch('/api/products'); + const productResponse: IProductsDTO = await res.json(); - const res = await fetch(url); - const products: IProductResponse = await res.json(); - - return products?.products + return productResponse?.products ?.map((product) => buildSitemapUrl(`/shop/${product.product_no}`, String(product.updated), 'daily') ) diff --git a/src/routes/warehouse/+page.server.ts b/src/routes/warehouse/+page.server.ts index e548827..212859f 100644 --- a/src/routes/warehouse/+page.server.ts +++ b/src/routes/warehouse/+page.server.ts @@ -1,14 +1,7 @@ -import { dev } from '$app/environment'; -import { env } from '$env/dynamic/private'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch }) => { - let url = '/api/warehouse'; - if (dev || env.API_HOST) { - url = (env.API_HOST || 'http://localhost:30010').concat(url); - } - - const res = await fetch(url); + const res = await fetch('/api/warehouse'); const warehouse = await res.json(); return { From 416303b6013e22c08366c2bc44ed9208fa896ff6 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Mon, 5 Dec 2022 18:27:24 +0100 Subject: [PATCH 03/33] Refactored shared css & removed unused styles --- .../components/ProductVariationSelect.svelte | 5 --- src/lib/icons/CircleCheckmark.svelte | 6 ++-- src/lib/icons/CircleError.svelte | 6 ++-- src/lib/icons/CircleWarning.svelte | 6 ++-- src/lib/icons/circle-feedback.scss | 36 ++++++++----------- src/routes/Header.svelte | 10 +++--- src/routes/orders/OrdersTable.svelte | 13 +++++++ src/routes/orders/[id]/OrderProducts.svelte | 12 +++---- src/routes/orders/[id]/OrderSummary.svelte | 13 ++++++- src/routes/privacy-policy/+page.svelte | 4 +++ src/styles/generic-article.scss | 4 --- 11 files changed, 64 insertions(+), 51 deletions(-) diff --git a/src/lib/components/ProductVariationSelect.svelte b/src/lib/components/ProductVariationSelect.svelte index 3338840..ea1297f 100644 --- a/src/lib/components/ProductVariationSelect.svelte +++ b/src/lib/components/ProductVariationSelect.svelte @@ -59,11 +59,6 @@ &.selected { border-color: black; } - - p { - padding: 0; - margin: 0; - } } } diff --git a/src/lib/icons/CircleCheckmark.svelte b/src/lib/icons/CircleCheckmark.svelte index 46e6614..25a47d1 100644 --- a/src/lib/icons/CircleCheckmark.svelte +++ b/src/lib/icons/CircleCheckmark.svelte @@ -1,8 +1,8 @@ - + - + - + @import '../../styles/media-queries.scss'; + h2 { + // text-decoration: underline; + font-size: 1.2rem; + + .section-count { + background-color: rgba(0,0,0,0.15); + padding: 0.3rem 0.4rem; + margin-left: 0.5rem; + border-radius: 0.5rem; + font-size: 1rem; + } + } + table { width: 100%; border-collapse: collapse; diff --git a/src/routes/orders/[id]/OrderProducts.svelte b/src/routes/orders/[id]/OrderProducts.svelte index 68a4c57..dc24521 100644 --- a/src/routes/orders/[id]/OrderProducts.svelte +++ b/src/routes/orders/[id]/OrderProducts.svelte @@ -39,9 +39,13 @@
Date: Mon, 5 Dec 2022 18:39:32 +0100 Subject: [PATCH 06/33] Remvoed & simplified or refactored general functionality --- src/lib/components/Badge.svelte | 6 +- src/lib/components/Cart.svelte | 4 +- src/lib/utils/mock.ts | 87 ------------------------- src/lib/websocketCart.ts | 23 ++++--- src/routes/checkout/OrderSection.svelte | 2 +- 5 files changed, 23 insertions(+), 99 deletions(-) delete mode 100644 src/lib/utils/mock.ts diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte index 34e6bcf..5baf82c 100644 --- a/src/lib/components/Badge.svelte +++ b/src/lib/components/Badge.svelte @@ -11,8 +11,12 @@ export let title = 'Info'; export let type: BadgeType = BadgeType.INFO; - export let icon: string = badgeIcons[type]; + if (title === 'CONFIRMED') { + type = BadgeType.SUCCESS; + } + + $: icon = badgeIcons[type]; $: badgeClass = `badge ${type}`; diff --git a/src/lib/components/Cart.svelte b/src/lib/components/Cart.svelte index d0079ef..2f3b033 100644 --- a/src/lib/components/Cart.svelte +++ b/src/lib/components/Cart.svelte @@ -1,9 +1,11 @@ -
+
{#if $count > 0} {$count} {/if} diff --git a/src/lib/utils/mock.ts b/src/lib/utils/mock.ts deleted file mode 100644 index 76adac2..0000000 --- a/src/lib/utils/mock.ts +++ /dev/null @@ -1,87 +0,0 @@ -import generateUUID from './uuid'; -import type IProduct from '../interfaces/IProduct'; -import type { IOrder, ICustomer } from '../interfaces/IOrders'; -import BadgeType from '../interfaces/BadgeType'; - -const productNames = ["Who's Who", 'Lullaby', 'The Buried Life', 'The Illegitimate']; - -const images = [ - 'https://cdn-fsly.yottaa.net/551561a7312e580499000a44/www.joann.com/v~4b.100/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dw4a83425c/images/hi-res/18/18163006.jpg?sw=556&sh=680&sm=fit&yocs=7x_7C_7D_', - 'https://cdn-fsly.yottaa.net/55d09df20b53443653002f02/www.joann.com/v~4b.ed/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dwc10a651e/images/hi-res/alt/17767534Alt1.jpg?sw=350&sh=350&sm=fit&yocs=f_', - 'https://cdn-fsly.yottaa.net/55d09df20b53443653002f02/www.joann.com/v~4b.ed/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dw3f43e4d8/images/hi-res/alt/18995779ALT1.jpg?sw=350&sh=350&sm=fit&yocs=f_', - 'https://cdn-fsly.yottaa.net/551561a7312e580499000a44/www.joann.com/v~4b.100/dw/image/v2/AAMM_PRD/on/demandware.static/-/Sites-joann-product-catalog/default/dw029904bd/images/hi-res/alt/18162834alt1.jpg?sw=350&sh=350&sm=fit&yocs=7x_7C_7D_', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-103.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=018ae410aa6b64e6c9c5ca6bb18a1137', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-166.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=50a1f0fb259452fb84453ee4216dd4f1', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-108.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=b4a75bdea66974a4f766ded52bfe9ba0', - 'https://adrianbrinkerhoff.imgix.net/AdrianBrinkerhoff-MatthewThompson-32.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=431&q=90&w=310&s=9199c53ea58a923373f7bcce1145193e' -]; - -const statusText = { - [BadgeType.INFO]: 'Pending', - [BadgeType.SUCCESS]: 'Succeeded', - [BadgeType.WARNING]: 'Warning', - [BadgeType.PENDING]: 'In transit', - [BadgeType.ERROR]: 'Error' -}; - -const statusTypes = [ - BadgeType.INFO, - BadgeType.SUCCESS, - BadgeType.WARNING, - BadgeType.PENDING, - BadgeType.ERROR -]; - -function mockCustomer(): ICustomer { - const customer: ICustomer = { - email: 'kevin.midboe@gmail.com', - firstName: 'kevin', - lastName: 'midbøe', - streetAddress: 'Schleppegrells gate 18', - zipCode: '0556', - city: 'Oslo' - }; - - customer.fullName = `${customer.firstName} ${customer.lastName}`; - return customer; -} - -export function mockOrder(id: string | null = null): IOrder { - const products = mockProducts(4); - const status = statusTypes[Math.floor(Math.random() * statusTypes.length)]; - - return { - uuid: id || generateUUID(), - products, - customer: mockCustomer(), - payment: { - amount: Math.round(Math.random() * 800), - currency: 'NOK' - }, - createdDate: new Date(), - updatedDate: new Date(), - status: { - type: status, - text: statusText[status] - } - }; -} - -export function mockOrders(count: number): Array { - return Array.from(Array(count)).map(() => mockOrder()); -} - -export function mockProduct(): IProduct { - return { - uuid: generateUUID(), - name: productNames[Math.floor(Math.random() * productNames.length)], - price: Math.floor(Math.random() * 999), - quantity: Math.floor(Math.random() * 4) + 1, - currency: 'NOK', - image: images[Math.floor(Math.random() * images.length)] - }; -} - -export function mockProducts(count: number): Array { - return Array.from(Array(count)).map(() => mockProduct()); -} diff --git a/src/lib/websocketCart.ts b/src/lib/websocketCart.ts index bede984..1440e3b 100644 --- a/src/lib/websocketCart.ts +++ b/src/lib/websocketCart.ts @@ -47,6 +47,19 @@ function sendPayload(payload: object) { ws.send(JSON.stringify(payload)); } +// websocket.onmessage +function receivePayload(event: MessageEvent) { + try { + const json = JSON.parse(event?.data || {}); + const { success, cart } = json as ICartDTO; + if (success && cart) cartStore.set(cart); + } catch { + console.debug('Non parsable message from server: ', event?.data); + } +} + +// Called by routes/+layout.svelte on every navigation, +// if ws is closed we try reconnect export function reconnectIfCartWSClosed() { const closed = ws?.readyState === 3; if (!closed) return; @@ -88,15 +101,7 @@ export function connectToCart(attempts = 0, maxAttempts = 6) { heartbeat(); }; - ws.onmessage = (event: MessageEvent) => { - try { - const json = JSON.parse(event?.data || {}); - const { success, cart } = json; - if (success && cart) cartStore.set(cart); - } catch { - console.debug('Non parsable message from server: ', event?.data); - } - }; + ws.onmessage = (event) => receivePayload(event); ws.onclose = () => { const seconds = attempts ** 2; diff --git a/src/routes/checkout/OrderSection.svelte b/src/routes/checkout/OrderSection.svelte index 2ef2e13..33744ab 100644 --- a/src/routes/checkout/OrderSection.svelte +++ b/src/routes/checkout/OrderSection.svelte @@ -68,7 +68,7 @@ - + diff --git a/src/lib/icons/CircleWarning.svelte b/src/lib/components/loading/CircleWarning.svelte similarity index 76% rename from src/lib/icons/CircleWarning.svelte rename to src/lib/components/loading/CircleWarning.svelte index 80a0d05..6f94b6d 100644 --- a/src/lib/icons/CircleWarning.svelte +++ b/src/lib/components/loading/CircleWarning.svelte @@ -1,6 +1,6 @@ - + + stroke-dashoffset="28"> + transform="translate(24,24) rotate(-35)"> diff --git a/src/lib/components/StripeCard.svelte b/src/lib/components/StripeCard.svelte index 5290be3..5edf616 100644 --- a/src/lib/components/StripeCard.svelte +++ b/src/lib/components/StripeCard.svelte @@ -1,11 +1,15 @@ @@ -96,7 +48,6 @@ .card { // padding: 1rem; - margin: 0 0.5rem; border: 2px solid black; @include desktop { diff --git a/src/lib/interfaces/IOrderValidationError.ts b/src/lib/interfaces/IOrderValidationError.ts new file mode 100644 index 0000000..9cd620e --- /dev/null +++ b/src/lib/interfaces/IOrderValidationError.ts @@ -0,0 +1,5 @@ +export default interface IOrderValidationError { + type: string; + field: number | string; + message: string; +} diff --git a/src/lib/stripe/index.ts b/src/lib/stripe/index.ts new file mode 100644 index 0000000..77d4942 --- /dev/null +++ b/src/lib/stripe/index.ts @@ -0,0 +1,100 @@ +import { buildApiUrl } from '$lib/utils/apiUrl'; +import { loadStripe } from '@stripe/stripe-js/pure'; +import type { + ConfirmCardPaymentData, + PaymentIntentResult, + Stripe, + StripeError +} from '@stripe/stripe-js'; + +let stripeInstance: Stripe; + +class StripeUnableToAccepPaymentsError extends Error { + constructor() { + const message = 'Card failed to load or never got a client secret. Unable to accept payments'; + super(message); + } +} + +// class StripePaymentError extends Error { +// code: string | undefined +// type: string + +// constructor(error: StripeError) { +// const message = error.message || 'Unexptected error from stripe'; +// super(message); + +// console.log('stripe error:', error); +// this.code = error.code; +// this.type = error.type; +// } +// } + +class StripeMissingPaymentIntent extends Error { + constructor() { + const message = 'Stripe responded without payment intent'; + super(message); + } +} + +// Calls backend for a client secret. order_id & customer_no +// is sent to attach to stripe payment intent +function clientSecret(order_id: string, customer_no: string): Promise { + const url = buildApiUrl('/api/v1/payment/stripe'); + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ order_id, customer_no }) + }; + + return fetch(url, options) + .then((resp) => resp.json()) + .then((data) => data?.clientSecret); +} + +// Creates stripe instance from package: @stripe/stripe-js +async function load(apiKey: string): Promise { + if (stripeInstance) return stripeInstance; + + loadStripe.setLoadParameters({ advancedFraudSignals: false }); + const stripe: Stripe | null = await loadStripe(apiKey); + if (!stripe) { + console.error('Unable to load stripe payment'); + return; + } + + stripeInstance = stripe; + return stripe; +} + +// Uses @stripe/stripe-js to make payment request from +// stripe Elements directly to Stripe. Server receives +// async webhook updates from Stripe. +function pay(secret: string, data: ConfirmCardPaymentData) { + if (!clientSecret || !stripeInstance) { + throw new StripeUnableToAccepPaymentsError(); + } + + return stripeInstance + .confirmCardPayment(secret, data) + .then((stripePaymentResponse: PaymentIntentResult) => { + const { error, paymentIntent } = stripePaymentResponse; + + if (error) { + throw error; + } else if (paymentIntent) { + console.log('payment intent from stripe:', paymentIntent); + return paymentIntent.status === 'succeeded'; + } + + throw new StripeMissingPaymentIntent(); + }); +} + +export default { + clientSecret, + load, + pay +}; diff --git a/src/lib/utils/apiUrl.ts b/src/lib/utils/apiUrl.ts new file mode 100644 index 0000000..6783bfd --- /dev/null +++ b/src/lib/utils/apiUrl.ts @@ -0,0 +1,14 @@ +import { dev, browser } from '$app/environment'; + +const LOCALHOST_API = 'http://localhost:30010'; + +export function buildApiUrl(path: string) { + let localhostApi = false; + + if (dev) localhostApi = true; + if (browser && window?.location?.href.includes('localhost')) { + localhostApi = true; + } + + return localhostApi ? LOCALHOST_API.concat(path) : path; +} diff --git a/src/routes/checkout/+page.server.ts b/src/routes/checkout/+page.server.ts new file mode 100644 index 0000000..0fee320 --- /dev/null +++ b/src/routes/checkout/+page.server.ts @@ -0,0 +1,8 @@ +import { env } from '$env/dynamic/private'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = () => { + return { + stripeApiKey: env.STRIPE_API_KEY || '' + }; +}; diff --git a/src/routes/checkout/+page.svelte b/src/routes/checkout/+page.svelte index afdc8dd..918d689 100644 --- a/src/routes/checkout/+page.svelte +++ b/src/routes/checkout/+page.svelte @@ -1,36 +1,140 @@ @@ -39,8 +143,8 @@ description="Kasse for bestilling og betaling av produkter i handlekurven" /> -

Checkout

-
+

Kassen

+

Leveringsaddresse

@@ -48,31 +152,30 @@

Din ordre

- -
- - -
- +

Betalingsinformasjon

- +
+
+ {#if paymentPromise} + + {/if} +
+ + diff --git a/src/routes/checkout/OrderSection.svelte b/src/routes/checkout/OrderSection.svelte index 33744ab..e61d68c 100644 --- a/src/routes/checkout/OrderSection.svelte +++ b/src/routes/checkout/OrderSection.svelte @@ -4,76 +4,78 @@ import { cart, subTotal } from '$lib/cartStore'; import { decrementProductInCart, incrementProductInCart } from '$lib/websocketCart'; - // $: totalPrice = $cart - // .map((order: IOrderLineItem) => order?.price * order.quantity) - // .reduce((a, b) => a + b); const shippingPrice = 75; + $: totalPrice = $subTotal + shippingPrice; + + function lineItemClass(id: number) { + return `lineitem-${id}`; + } - - - - - - - - - - - {#if $cart.length} - {#each $cart as cartItem} - - - - - - {/each} - {:else} - - - - +
+
VarenavnAntallPris
-
- {cartItem.name} - Størrelse: {cartItem.size} -
- 		- - Nok {cartItem.quantity * cartItem.price}
(ingen produkter)0Nok 0
+ + + + + - {/if} + - - - - - + + {#if $cart.length} + {#each $cart as cartItem} + + + + + + {/each} + {:else} + + + + + + {/if} - - - - - + + + + + - - - - - - -
VarenavnAntallPris
Totalpris:Nok {$subTotal}
+
+ {cartItem.name} + Størrelse: {cartItem.size} +
+ 		+ + Nok {cartItem.quantity * cartItem.price}
(ingen produkter)0Nok 0
Frakt:Nok {shippingPrice}
Totalsum:Nok {$subTotal}
Totalsum:Nok {$subTotal}
+ + Frakt: + + Nok {shippingPrice} + + + + Pris: + + Nok {totalPrice} + + + +
- diff --git a/src/routes/receipt/[[id]]/ReceiptNotFound.svelte b/src/routes/receipt/[[id]]/ReceiptNotFound.svelte index 050e761..299e5cc 100644 --- a/src/routes/receipt/[[id]]/ReceiptNotFound.svelte +++ b/src/routes/receipt/[[id]]/ReceiptNotFound.svelte @@ -1,33 +1,16 @@
- +

Fant ikke din bestilling!

@@ -40,7 +23,8 @@
Du kan forsøke søke opp din ordre her: - + +
@@ -62,6 +46,10 @@ } } + .underline { + text-decoration: underline; + } + :global(.order-search button) { margin-top: 1rem; } diff --git a/src/routes/receipt/[[id]]/styles-receipt-page.scss b/src/routes/receipt/[[id]]/styles-receipt-page.scss index 1ae2a6a..ed3a7eb 100644 --- a/src/routes/receipt/[[id]]/styles-receipt-page.scss +++ b/src/routes/receipt/[[id]]/styles-receipt-page.scss @@ -1,7 +1,7 @@ @import '../../../styles/media-queries.scss'; .order-confirmation { - margin: 6rem auto 0; + margin: 10rem auto 0; display: grid; place-items: center; padding: 0 0.5rem; @@ -10,8 +10,6 @@ margin-top: 3rem; } - // @include pageMargin; - @include tablet { padding: 0 1rem; } @@ -31,8 +29,4 @@ padding: 1rem; margin: 1rem 0; text-align: center; - - .underline { - text-decoration: underline; - } } From dc7663edceb20a0b1bebc03df4acadfbdb335dc5 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:16:02 +0100 Subject: [PATCH 11/33] Shop gets fancy image carousel & navigate back arrow --- src/lib/components/ImageCarousel.svelte | 215 ++++++++++++++++++ .../components}/ProductTile.svelte | 31 +-- src/lib/icons/IconArrow.svelte | 43 ++++ src/routes/shop/+page.server.ts | 2 +- src/routes/shop/+page.svelte | 2 +- src/routes/shop/[id]/+page.server.ts | 2 +- src/routes/shop/[id]/+page.svelte | 16 +- 7 files changed, 278 insertions(+), 33 deletions(-) create mode 100644 src/lib/components/ImageCarousel.svelte rename src/{routes/shop => lib/components}/ProductTile.svelte (75%) create mode 100644 src/lib/icons/IconArrow.svelte diff --git a/src/lib/components/ImageCarousel.svelte b/src/lib/components/ImageCarousel.svelte new file mode 100644 index 0000000..6795b4c --- /dev/null +++ b/src/lib/components/ImageCarousel.svelte @@ -0,0 +1,215 @@ + + +{#if images?.length > 0} +
+
+ {#each images as { image_id, url }, index (image_id)} +
+ +
+ {/each} +
+ + {#if images?.length > 1} +
+ {#each images as image, index} + + {`Clickable product image thumbnail number ${index + 1}`} + {/each} +
+ {/if} +
+{/if} + + diff --git a/src/routes/shop/ProductTile.svelte b/src/lib/components/ProductTile.svelte similarity index 75% rename from src/routes/shop/ProductTile.svelte rename to src/lib/components/ProductTile.svelte index b6b0dc5..00fc8cb 100644 --- a/src/routes/shop/ProductTile.svelte +++ b/src/lib/components/ProductTile.svelte @@ -2,7 +2,6 @@ import type { IProduct } from '$lib/interfaces/IProduct'; export let product: IProduct; - export let large = false; @@ -12,15 +11,13 @@ product?.primary_color === '#231B1D' ? '#f3efeb' : '#37301e' }`}" > - {#if !large} -

{product?.name}

- {/if} +

{product?.name}

-
+
{product?.name}
- {#if !large} + {#if product?.subtext?.length > 3}

{product?.subtext}

{/if}
@@ -73,34 +70,16 @@ display: grid; place-items: center; - &.large img { - width: 90%; - } - img { margin: 3rem 0; width: 66%; transition: all 0.6s ease; @include mobile { - width: 75%; + margin: 2rem 0; + width: 90%; } } } - - // TODO grid view on mobile - // @include mobile { - // margin: 0.5rem; - // padding: 0.5rem; - - // h3 { - // margin: 0; - // } - - // .image-frame img { - // width: 82%; - // margin: 1rem 0; - // } - // } } diff --git a/src/lib/icons/IconArrow.svelte b/src/lib/icons/IconArrow.svelte new file mode 100644 index 0000000..16122c1 --- /dev/null +++ b/src/lib/icons/IconArrow.svelte @@ -0,0 +1,43 @@ + + + + + + + diff --git a/src/routes/shop/+page.server.ts b/src/routes/shop/+page.server.ts index 8b06193..b9f1e18 100644 --- a/src/routes/shop/+page.server.ts +++ b/src/routes/shop/+page.server.ts @@ -2,7 +2,7 @@ import type { IProductsDTO } from '$lib/interfaces/ApiResponse'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch }) => { - const res = await fetch('/api/products'); + const res = await fetch('/api/v1/products'); const products: IProductsDTO = await res.json(); return products; diff --git a/src/routes/shop/+page.svelte b/src/routes/shop/+page.svelte index f4088c0..21f295a 100644 --- a/src/routes/shop/+page.svelte +++ b/src/routes/shop/+page.svelte @@ -1,6 +1,6 @@ + +
- +

{product.name}

-

{product.subtext}

-

{product.description}

+

{product.subtext}

+

{product.description}

NOK {selectedVariation?.price} (Ink. Moms)

Date: Thu, 29 Dec 2022 23:33:52 +0100 Subject: [PATCH 12/33] Displays payment, shipping, errors page & edit and add shipment --- src/lib/components/ShipmentProgress.svelte | 202 ++++++++++++++++++ src/lib/components/Time.svelte | 25 +++ src/lib/interfaces/IShipping.ts | 42 ++++ src/routes/orders/+page.server.ts | 2 +- src/routes/orders/+page.svelte | 39 ++-- src/routes/orders/OrdersTable.svelte | 28 +-- src/routes/orders/[id]/+error.svelte | 41 ++++ src/routes/orders/[id]/+page.server.ts | 14 +- src/routes/orders/[id]/+page.svelte | 13 +- src/routes/orders/[id]/OrderProducts.svelte | 13 +- src/routes/orders/[id]/OrderSummary.svelte | 19 +- src/routes/orders/[id]/PaymentDetails.svelte | 76 ++++++- src/routes/orders/[id]/TrackingDetails.svelte | 136 ++++++++++-- src/routes/orders/[id]/styles-order-page.scss | 4 +- 14 files changed, 564 insertions(+), 90 deletions(-) create mode 100644 src/lib/components/ShipmentProgress.svelte create mode 100644 src/lib/components/Time.svelte create mode 100644 src/lib/interfaces/IShipping.ts create mode 100644 src/routes/orders/[id]/+error.svelte diff --git a/src/lib/components/ShipmentProgress.svelte b/src/lib/components/ShipmentProgress.svelte new file mode 100644 index 0000000..31116ad --- /dev/null +++ b/src/lib/components/ShipmentProgress.svelte @@ -0,0 +1,202 @@ + + +
+

Shipment history

+ + {#if trackedShipment === null} +
+ +
+ {:else if trackedShipment?.length > 0} +
    + {#each trackedShipment as event} +
  • + +
    + {event.description} + + {#if event?.status} +
    + {event.status} - + +
    + {/if} + +
    + {#if event.city.length > 0} + {event?.city?.toLowerCase()} + {/if} + + {#if event.countryCode.length > 0} + {event.city.length > 0 ? event?.countryCode : event?.country} + {/if} +
    +
    +
    • + {/each} +
+ {:else} + + {/if} +
+ + diff --git a/src/lib/components/Time.svelte b/src/lib/components/Time.svelte new file mode 100644 index 0000000..acbd664 --- /dev/null +++ b/src/lib/components/Time.svelte @@ -0,0 +1,25 @@ + + +{#if dateLocaleString} + {dateLocaleString} +{:else} + (no date found) +{/if} diff --git a/src/lib/interfaces/IShipping.ts b/src/lib/interfaces/IShipping.ts new file mode 100644 index 0000000..e391ed5 --- /dev/null +++ b/src/lib/interfaces/IShipping.ts @@ -0,0 +1,42 @@ +export interface IShippingCourier { + id: string; + name: string; + website: string; + has_api: boolean; +} + +export interface IShipment { + id: string; + courier_id: string; + tracking_code: string; + tracking_link: string; +} + +export interface IShipmentEvent { + event_id: string; + shipment_id: string; + description: string; + status: string; + location: string; + event_time: Date; + updated: Date; + created: Date; +} + +export interface IShipmentResponse { + shipment_id: string + order_id: string + courier: string + has_api: boolean + courier_id: number + tracking_code: string + tracking_link: string + user_notified: boolean +} + +export interface ICourier { + courier_id: number + name: string + website: string + has_api: boolean +} \ No newline at end of file diff --git a/src/routes/orders/+page.server.ts b/src/routes/orders/+page.server.ts index 7ba128c..6bbbce0 100644 --- a/src/routes/orders/+page.server.ts +++ b/src/routes/orders/+page.server.ts @@ -1,7 +1,7 @@ import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch }) => { - const res = await fetch('/api/orders'); + const res = await fetch('/api/v1/orders'); const response = await res.json(); return { diff --git a/src/routes/orders/+page.svelte b/src/routes/orders/+page.svelte index 01cccb7..38a73ab 100644 --- a/src/routes/orders/+page.svelte +++ b/src/routes/orders/+page.svelte @@ -1,13 +1,15 @@ +

Orders

{#if attentionOrders?.length} -

⚠️ orders needing attention

- - + {/if} -

📬 pending orders

- - -

📦 in transit

- - -

🙅‍♀️ cancelled/returns

- - -

🏠🎁 delivered orders

- + + + + +
- - diff --git a/src/routes/orders/OrdersTable.svelte b/src/routes/orders/OrdersTable.svelte index b0c8415..a29f8c7 100644 --- a/src/routes/orders/OrdersTable.svelte +++ b/src/routes/orders/OrdersTable.svelte @@ -1,8 +1,10 @@ +

{title} {orders?.length || 0}

{#if orders?.length} - + @@ -29,18 +32,12 @@ - - + + @@ -56,11 +53,10 @@ @import '../../styles/media-queries.scss'; h2 { - // text-decoration: underline; font-size: 1.2rem; .section-count { - background-color: rgba(0,0,0,0.15); + background-color: rgba(0, 0, 0, 0.15); padding: 0.3rem 0.4rem; margin-left: 0.5rem; border-radius: 0.5rem; @@ -105,8 +101,14 @@ } } + th:last-of-type, + td:last-of-type { + text-align: center; + } + @include mobile { - tr > *:first-child { + tr > *:nth-child(4), + tr > *:nth-child(5) { display: none; } } diff --git a/src/routes/orders/[id]/+error.svelte b/src/routes/orders/[id]/+error.svelte new file mode 100644 index 0000000..f011c24 --- /dev/null +++ b/src/routes/orders/[id]/+error.svelte @@ -0,0 +1,41 @@ + + +

Oisann! Klarte ikke hente order

+ +

+ Det du søkte etter fantes ikke her. Om du tror dette er en feil, ta kontakt support@planetposen.no for spørsmål. +

+
+ Internal error message: + 
+    {parsedApiResponse}
+
+
+ + diff --git a/src/routes/orders/[id]/+page.server.ts b/src/routes/orders/[id]/+page.server.ts index e96d356..9e5bc41 100644 --- a/src/routes/orders/[id]/+page.server.ts +++ b/src/routes/orders/[id]/+page.server.ts @@ -1,15 +1,21 @@ +import { error } from '@sveltejs/kit'; import type { IOrderDTO } from '$lib/interfaces/ApiResponse'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ fetch, params }) => { const { id } = params; - const res = await fetch(`/api/order/${id}`); - const orderResponse: IOrderDTO = await res.json(); + const res = await fetch(`/api/v1/order/${id}`); + const orderResponse = await res.json(); if (orderResponse?.success == false || orderResponse?.order === undefined) { - throw Error(':('); + console.log('throwing error', orderResponse); + + throw error(404, { + apiResponse: orderResponse, + message: 'Something went wrong! Unable to get order' + }); } - return { order: orderResponse.order }; + return { order: orderResponse?.order }; }; diff --git a/src/routes/orders/[id]/+page.svelte b/src/routes/orders/[id]/+page.svelte index 1f9c32a..71f0f25 100644 --- a/src/routes/orders/[id]/+page.svelte +++ b/src/routes/orders/[id]/+page.svelte @@ -4,15 +4,15 @@ import PaymentDetails from './PaymentDetails.svelte'; import CustomerDetails from './CustomerDetails.svelte'; import TrackingDetails from './TrackingDetails.svelte'; + import ShipmentProgress from '$lib/components/ShipmentProgress.svelte'; import type { IOrder } from '$lib/interfaces/IOrder'; import type { PageServerData } from './$types'; export let data: PageServerData; let order = data.order as IOrder; - console.log('order:', order); function orderSubTotal() { - if (!order || order.lineItems?.length === 0) return; + if (!order || order?.lineItems?.length === 0) return; let sum = 0; order.lineItems.forEach((lineItem) => (sum = sum + lineItem.quantity * lineItem.price)); @@ -21,20 +21,21 @@ } -

Order: {order.orderid}

+

Order id: {order?.orderid}

-

{orderSubTotal()}.00 Nok

- + - +
diff --git a/src/routes/orders/[id]/OrderSummary.svelte b/src/routes/orders/[id]/OrderSummary.svelte index 6fae840..7ff0217 100644 --- a/src/routes/orders/[id]/OrderSummary.svelte +++ b/src/routes/orders/[id]/OrderSummary.svelte @@ -1,14 +1,25 @@
    +
  • + Status + +
    • +
  • Last update - {order.updated} +
    • + +
  • + Created +
  • @@ -18,12 +29,12 @@
  • Receipt - {order.orderid} + {order.orderid}
  • Payment method - {paymentMethod} + {order?.payment?.type}
diff --git a/src/routes/orders/[id]/PaymentDetails.svelte b/src/routes/orders/[id]/PaymentDetails.svelte index 30ee6a1..1d75127 100644 --- a/src/routes/orders/[id]/PaymentDetails.svelte +++ b/src/routes/orders/[id]/PaymentDetails.svelte @@ -1,36 +1,94 @@

Payment details

  • - Amount - {order?.payment?.amount}.10 kr + Stripe link + {#if payment?.stripe_transaction_id} + + {payment?.stripe_transaction_id} + + {:else} + (No payment found) + {/if}
  • - Fee - 2.25 kr + Amount requested + {initiatedAmount}.00 kr +
    • + +
  • + Amount charged + {capturedAmount}.00 kr +
    • + + {#if payment?.amount_refunded > 0} +
  • + Refunded + {payment?.amount_refunded / 100}.00 kr +
    • + {/if} + +
  • + Fee (approx) + {fee === null ? '-' : round(fee) + ' kr'}
  • Net - 7.85 kr + {net === null ? '-' : round(net) + ' kr'}
  • Status - + +
    • + +
  • + Created +
    • + +
  • + Updated +
diff --git a/src/routes/orders/[id]/TrackingDetails.svelte b/src/routes/orders/[id]/TrackingDetails.svelte index bcf3014..3288f42 100644 --- a/src/routes/orders/[id]/TrackingDetails.svelte +++ b/src/routes/orders/[id]/TrackingDetails.svelte @@ -1,35 +1,139 @@ -{#if shipping} -
-

Tracking

+
+

Tracking

+ + {#if shipping}
  • - Tracking code - {shipping.tracking_code} + Tracking company + {#if !edit} + {shipping.courier} + {:else if couriers?.length > 0} + + {/if}
  • - Tracking company - {shipping.company} + Tracking code + {#if !edit} + {shipping.tracking_code} + {:else} + + {/if}
  • Link - {shipping.tracking_link} + {#if !edit} + + {shipping.tracking_link} + + {:else} + + {/if}
-
-{/if} + +
+
+ + {#if shipping?.tracking_code && shipping?.has_api} + {#key shipping.tracking_code} + + {/key} + {/if} + {/if} + + {#if !shipping} +
+
+ {/if} +
diff --git a/src/routes/orders/[id]/styles-order-page.scss b/src/routes/orders/[id]/styles-order-page.scss index f450210..a3e62a4 100644 --- a/src/routes/orders/[id]/styles-order-page.scss +++ b/src/routes/orders/[id]/styles-order-page.scss @@ -16,8 +16,7 @@ section { } } -.label, -.empty { +.label { color: grey; } @@ -51,7 +50,6 @@ ul.property-list { li span:last-of-type { @include mobile { - min-width: 60%; white-space: normal; overflow-wrap: break-word; } From ae1def38a3564c656b6949263281a3a2146ab09a Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:36:00 +0100 Subject: [PATCH 13/33] Updated interfaces --- src/lib/interfaces/ApiResponse.ts | 13 +++++++++++++ src/lib/interfaces/BadgeType.ts | 13 ++++++++----- src/lib/interfaces/ICart.ts | 2 +- src/lib/interfaces/IOrder.ts | 19 ++++++++++++++----- src/lib/interfaces/IProduct.ts | 8 +++++++- 5 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/lib/interfaces/ApiResponse.ts b/src/lib/interfaces/ApiResponse.ts index 4dc221b..7a20a00 100644 --- a/src/lib/interfaces/ApiResponse.ts +++ b/src/lib/interfaces/ApiResponse.ts @@ -2,6 +2,7 @@ import type { IProduct } from './IProduct'; import type { IOrder, IOrderSummary } from './IOrder'; import type ICustomer from './ICustomer'; import type ICart from './ICart'; +import type IOrderValidationError from './IOrderValidationError'; export interface IProductResponse { success: boolean; @@ -37,3 +38,15 @@ export interface ICartDTO { cart: ICart[]; success: boolean; } + +export interface IOrderCreateUnsuccessfullResponse { + success: boolean; + validationErrors: IOrderValidationError[]; +} + +export interface IOrderCreateResponse { + success: boolean; + customer_no: string; + order_id: string; + validationErrors?: IOrderValidationError[]; +} diff --git a/src/lib/interfaces/BadgeType.ts b/src/lib/interfaces/BadgeType.ts index 906baba..4445462 100644 --- a/src/lib/interfaces/BadgeType.ts +++ b/src/lib/interfaces/BadgeType.ts @@ -1,9 +1,12 @@ enum BadgeType { - SUCCESS = 'success', - WARNING = 'warning', - ERROR = 'error', - PENDING = 'pending', - INFO = 'info' + SUCCESS = 'SUCCESS', + WARNING = 'WARNING', + REFUNDED = 'REFUNDED', + ERROR = 'ERROR', + PENDING = 'PENDING', + INFO = 'INFO', + INITIATED = 'INITIATED', + NOT_FOUND = 'NOT_FOUND' } export default BadgeType; diff --git a/src/lib/interfaces/ICart.ts b/src/lib/interfaces/ICart.ts index fa9ac43..9c08263 100644 --- a/src/lib/interfaces/ICart.ts +++ b/src/lib/interfaces/ICart.ts @@ -1,5 +1,5 @@ export default interface ICart { - client_id: string; + planet_id: string; cart_id: number; lineitem_id: number; quantity: number; diff --git a/src/lib/interfaces/IOrder.ts b/src/lib/interfaces/IOrder.ts index f30afb3..27a01ce 100644 --- a/src/lib/interfaces/IOrder.ts +++ b/src/lib/interfaces/IOrder.ts @@ -2,11 +2,6 @@ // import type BadgeType from './BadgeType'; import type ICustomer from './ICustomer'; -export interface IStripePayment { - amount: number; - currency: string; -} - export interface IOrderSummary { created: Date; email: string; @@ -22,6 +17,7 @@ export interface IOrder { lineItems: ILineItem[]; orderid: string; shipping: IShipping; + payment: IStripePayment; status: string; updated?: Date; created?: Date; @@ -41,6 +37,7 @@ export interface IShipping { tracking_code: string; tracking_link: string; user_notified: null; + has_api: boolean; } export interface IOrdersLineitem { @@ -59,3 +56,15 @@ export interface ITracking { trackingCompany: string; trackingLink: string; } + +export interface IStripePayment { + amount: number; + amount_captured: number; + amount_received: number; + amount_refunded: number; + created: Date; + stripe_transaction_id: string; + stripe_status: string; + type: string; + updated: Date; +} diff --git a/src/lib/interfaces/IProduct.ts b/src/lib/interfaces/IProduct.ts index d209ec6..2b91703 100644 --- a/src/lib/interfaces/IProduct.ts +++ b/src/lib/interfaces/IProduct.ts @@ -3,7 +3,7 @@ export interface IProduct { name: string; subtext?: string; description?: string; - image: string; + images?: IImage[]; primary_color?: string; variation_count?: string; @@ -23,3 +23,9 @@ export interface IVariation { updated?: Date; created?: Date; } + +export interface IImage { + image_id: number; + url: string; + default_image: boolean; +} From a936283be1ba9446381db3cac0956c01d6f61212 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:36:55 +0100 Subject: [PATCH 14/33] Error stack component displays errors as card stack with animation --- src/lib/components/ErrorStack.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/ErrorStack.svelte b/src/lib/components/ErrorStack.svelte index adb9b5b..89f65fc 100644 --- a/src/lib/components/ErrorStack.svelte +++ b/src/lib/components/ErrorStack.svelte @@ -28,7 +28,8 @@ class="error-card" data-status="{index === currentCard ? 'current' : 'waiting'}" style="{offsetTop(index)}" - in:slide out:fly="{{ y: 100, duration: flyoutDuration }}" + in:slide + out:fly="{{ y: 100, duration: flyoutDuration }}" >
Amount StatusOrder ID Customer DateOrder ID Receipt
NOK {order.order_sum} - + {order.order_id} {order.first_name} {order.last_name}{order?.created - ? new Intl.DateTimeFormat('nb-NO', { dateStyle: 'short', timeStyle: 'short' }).format( - new Date(order.created) - ) - : ''}{order.order_id} 🧾
diff --git a/src/routes/styles.css b/src/routes/styles.css index ab2be52..4e7aa1c 100644 --- a/src/routes/styles.css +++ b/src/routes/styles.css @@ -47,6 +47,8 @@ a:hover { a.link { border-bottom: 2px solid var(--color-text) !important; + text-decoration: none; + display: inline-block; } h1 { From 6de05e91aa1495b2528b6d1b945f4f654e2c4e90 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:55:11 +0100 Subject: [PATCH 19/33] Update badge titles, and status --- src/lib/components/Badge.svelte | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte index 5baf82c..b175a2c 100644 --- a/src/lib/components/Badge.svelte +++ b/src/lib/components/Badge.svelte @@ -5,6 +5,7 @@ [BadgeType.INFO]: '⏳', [BadgeType.PENDING]: '📦', [BadgeType.WARNING]: '⚠️', + [BadgeType.REFUNDED]: '🪷', [BadgeType.SUCCESS]: '✓', [BadgeType.ERROR]: 'X' }; @@ -12,8 +13,12 @@ export let title = 'Info'; export let type: BadgeType = BadgeType.INFO; - if (title === 'CONFIRMED') { + if (title === 'CONFIRMED' || title === 'succeeded') { type = BadgeType.SUCCESS; + } else if (title === 'CANCELLED') { + type = BadgeType.ERROR; + } else if (title === 'REFUNDED') { + type = BadgeType.REFUNDED; } $: icon = badgeIcons[type]; @@ -21,7 +26,7 @@
- {title} + {title?.toLowerCase()} {icon}
@@ -36,27 +41,32 @@ color: rgb(84, 89, 105); margin: 0.2rem; + > span { + text-transform: capitalize; + } + .icon { margin-left: 0.3rem; font-size: 0.8rem; } - &.success { + &.SUCCESS { background-color: rgb(215, 247, 194); color: rgb(0, 105, 8); } - &.error { + &.ERROR { background-color: rgb(255, 231, 242); color: rgb(179, 9, 60); } - &.warning { + &.WARNING, + &.REFUNDED { background-color: rgb(252, 237, 185); color: rgb(168, 44, 0); } - &.pending { + &.PENDING { background-color: lightblue; color: darkslateblue; } From 2ce3529db5b61924aeb91689fff825304b4f431c Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:55:36 +0100 Subject: [PATCH 20/33] Cart listens to enter key press along with click --- src/lib/components/Cart.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Cart.svelte b/src/lib/components/Cart.svelte index 2f3b033..60118ef 100644 --- a/src/lib/components/Cart.svelte +++ b/src/lib/components/Cart.svelte @@ -5,7 +5,13 @@ $: openClass = $isOpen ? 'open' : ''; -
+
{#if $count > 0} {$count} {/if} From 68153c13dca845422750b30edcb75ed67fe688e7 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:56:08 +0100 Subject: [PATCH 21/33] Cookies page includes link to all references to planet_id on github --- src/routes/cookies/+page.svelte | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/routes/cookies/+page.svelte b/src/routes/cookies/+page.svelte index c8ff106..0752232 100644 --- a/src/routes/cookies/+page.svelte +++ b/src/routes/cookies/+page.svelte @@ -26,6 +26,18 @@ er nødvendige for at nettstedet vårt skal fungere normalt.

+

+ Hvordan bruker vi informasjonskaplser? + Denne nettbutikken er open-source så all kode du intragerer med kan søkes igjennom på github.com. + Om du lurer på hvordan vi bruker informasjonskapsler kan du ta en titt på koden her: + https://github.com/search?q=planet_id+user%3Akevinmidboe&type=Code +

+

Tredjepart informasjonskapsler Planetposen.no lagrer ingen informasjonskapsler tilknyttet noen tredjepart. From a352926831c453b871b0bedccc99b537a465efb2 Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:57:10 +0100 Subject: [PATCH 22/33] Updated all references to image in product --- src/lib/jsonld/product.ts | 2 +- src/routes/+page.svelte | 17 ++++++++--------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/lib/jsonld/product.ts b/src/lib/jsonld/product.ts index 627766e..10783a0 100644 --- a/src/lib/jsonld/product.ts +++ b/src/lib/jsonld/product.ts @@ -6,7 +6,7 @@ function structureProduct(product: IProduct) { '@context': 'https://schema.org/', '@type': 'Product', name: `${product.name} - ${variation.size}`, - image: [product.image], + image: product.images?.map((image) => image.url), description: product.description, sku: `${product.product_no}-${variation.sku_id}`, productID: product.product_no, diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e8cd296..ebf4353 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,40 +3,39 @@ import FrontText from '$lib/components/FrontText.svelte'; import FrontTextImage from '$lib/components/FrontTextImage.svelte'; import FrontTextImageBubble from '$lib/components/FrontTextImageBubble.svelte'; + import FrontProductGallery from '$lib/components/FrontProductGallery.svelte'; import type IFrontTextImage from '$lib/interfaces/IFrontTextImage'; + import type { IProduct } from '$lib/interfaces/IProduct'; import type IFrontText from '$lib/interfaces/IFrontText'; const textImages: Array = [ { - title: 'Our story', + title: 'Vårt oppdrag', text: 'The new fabulous museum at Kistefos, designed by world renowned architect Bjarke Ingels Group, BIG, opened Wednesday September 18th, 2019. The building has been named the top architectural museum project in the world to open in 2019, by both the Daily Telegraph and Bloomberg.', - image: - 'https://kistefos.imgix.net/copyright_laurianghinitoiu_kistefosmuseum-4-of-17-7898.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fm=jpg&fp-x=0.5&fp-y=0.5&h=894&q=90&w=1300&s=6d142e2c43fff947bb5335cd53a566d6' + image: 'https://storage.googleapis.com/planetposen-images/front-kf-1.jpg' }, { title: 'Paper waste and the planet', text: "As the 50th artwork to be included in the park, a site-specific new commission by French artist Pierre Huyghe (b. 1962, Paris) was opened on the 12th of June. The vast permanent work will be the artist's largest site-specific work to date and the most ambitious to ever be conceived for Kistefos.", imageRight: true, - image: - 'https://kistefos.imgix.net/Pierre-kistefos-5_0717.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fm=jpg&fp-x=0.5&fp-y=0.5&h=894&q=90&w=1300&s=dc5feb98f29a39ea145a739397c42b29' + image: 'https://storage.googleapis.com/planetposen-images/front-kf-2.jpg' }, { title: 'Our goal', text: 'The scenic sculpture park has an impressive collection of works by internationally renowned contemporary artists including Anish Kapoor, Jeppe Hein, Tony Cragg, Olafur Eliasson, Fernando Bottero and Elmgreen & Dragset. The sculpture park focus is sight specific and international contemporary works of art and is available all year.', - image: - 'https://kistefos.imgix.net/Kistefos-EA-Marc-Quinn-All-of-Nature-Flows-Through-Us-0003.jpg?auto=compress%2Cformat&bg=%23FFFFFF&crop=focalpoint&fit=crop&fm=jpg&fp-x=0.5&fp-y=0.5&h=1333&q=90&w=1000&s=c65dada7d2f21cca29f3c758ddf5f81d' + image: 'https://storage.googleapis.com/planetposen-images/front-kf-3.jpg' }, { title: 'About us', text: 'The scenic sculpture park has an impressive collection of works by internationally renowned contemporary artists including Anish Kapoor, Jeppe Hein, Tony Cragg, Olafur Eliasson, Fernando Bottero and Elmgreen & Dragset. The sculpture park focus is sight specific and international contemporary works of art and is available all year.', imageRight: true, - image: 'https://i.imgur.com/WWbfhiZ.jpg' + image: 'https://storage.googleapis.com/planetposen-images/front-bee-1.jpg' }, { title: 'Sculpture park of international standing', text: 'The scenic sculpture park has an impressive collection of works by internationally renowned contemporary artists including Anish Kapoor, Jeppe Hein, Tony Cragg, Olafur Eliasson, Fernando Bottero and Elmgreen & Dragset. The sculpture park focus is sight specific and international contemporary works of art and is available all year.', imageRight: false, - image: 'https://i.imgur.com/ISCKKAq.jpg' + image: 'https://storage.googleapis.com/planetposen-images/front-bee-2.jpg' } ]; From e6083077ac660ea32f14fb709ddcbef9b63a177a Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:57:40 +0100 Subject: [PATCH 23/33] css effects for tracking pulse component --- src/styles/effects.scss | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/styles/effects.scss diff --git a/src/styles/effects.scss b/src/styles/effects.scss new file mode 100644 index 0000000..ed4fb57 --- /dev/null +++ b/src/styles/effects.scss @@ -0,0 +1,31 @@ +@keyframes pulse-live { + 0% { + box-shadow: 0 0 0 0 rgba(214, 0, 0, 0.7); + box-shadow: 0 0 0 0 rgba(227, 45, 34, 0.7); + } + 70% { + box-shadow: 0 0 0 12px rgba(214, 0, 0, 0); + box-shadow: 0 0 0 12px rgba(227, 45, 34, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(214, 0, 0, 0); + box-shadow: 0 0 0 0 rgba(227, 45, 34, 0); + } +} + +@mixin pulse-dot { + &::after { + content: ''; + top: 50%; + position: absolute; + display: block; + border-radius: 50%; + background-color: #d60000; + background-color: rgb(227, 45, 34); + border-radius: 50%; + transform: translate(-50%, -50%); + animation: pulse-live 2s infinite; + height: 16px; + width: 16px; + } +} From 694c3efbc3769a28577f6302a6f37c6cb237ff7b Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Thu, 29 Dec 2022 23:58:39 +0100 Subject: [PATCH 24/33] Specific style reference to parent element by class --- src/lib/components/ProductVariationSelect.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/ProductVariationSelect.svelte b/src/lib/components/ProductVariationSelect.svelte index ea1297f..cfa625f 100644 --- a/src/lib/components/ProductVariationSelect.svelte +++ b/src/lib/components/ProductVariationSelect.svelte @@ -24,7 +24,7 @@ }); -

    +
      {#each variations as variation}
    • diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ebf4353..f6233b4 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,7 +3,7 @@ import FrontText from '$lib/components/FrontText.svelte'; import FrontTextImage from '$lib/components/FrontTextImage.svelte'; import FrontTextImageBubble from '$lib/components/FrontTextImageBubble.svelte'; - import FrontProductGallery from '$lib/components/FrontProductGallery.svelte'; + // import FrontProductGallery from '$lib/components/FrontProductGallery.svelte'; import type IFrontTextImage from '$lib/interfaces/IFrontTextImage'; import type { IProduct } from '$lib/interfaces/IProduct'; import type IFrontText from '$lib/interfaces/IFrontText'; @@ -51,15 +51,53 @@ color: 'orange' } ]; + + // const galleryProducts: IProduct[] = [ + // { + // description: + // " - 44'' Fabric by the Yard\n - 100% Cottton\n - Fabric Care: Machine Wash Normal, No Bleach, Tumble Dry Low\n - Printed in the USA from Imported Material.", + // image: + // 'https://storage.googleapis.com/planetposen-images/2c47ed96b5e061d85f688849b998aa5e76c55c2a.jpg', + // name: 'Oversized Blue And Yellow Swirls', + // primary_color: '#E6E0DC', + // product_no: 11, + // subtext: '' + // }, + // { + // description: + // "The power of cotton is an almighty force for kids attire. Our cotton spandex interlock is a thicker fabric that's durable and naturally comfortable. Plus with breathability and slight stretch, children's tops and dresses are free-moving during play time. Choose from various designs like this dinosaur patch pattern, and you have a loving sewing project for awesome practicality and personality.\n\n - Width: 57 Inches\n - Content: 98% Cotton 2% Spandex\n - Care: Machine wash gentle cold, nonchlorine bleach, line dry, cool iron.\n - Imported", + // image: + // 'https://storage.googleapis.com/planetposen-images/838074447f08f03c4b75ac2030dcd01201c0656c.jpg', + // name: 'White Dinosaur Patches', + // primary_color: '#B1E0DC', + // product_no: 10, + // subtext: '' + // }, + // { + // description: + // ' - Width: 43 inches\n - Content: 100% Cotton\n - Care: Machine wash normal cold, no bleach, tumble dry, do not iron\n - Imported', + // image: + // 'https://storage.googleapis.com/planetposen-images/aef3eb500a6b12b896b7c567b85eded6301d5c4a.jpg', + // name: 'Dino Camping', + // primary_color: '#EBB4BB', + // product_no: 9, + // subtext: 'Snuggle Flannel Fabric' + // } + // ]; - +
      + @@ -73,9 +111,6 @@