@nuasite/components 0.11.1 → 0.12.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nuasite/components",
   "description": "Nua Site astro components.",
   "license": "Apache-2.0",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "files": [
     "dist/**",
     "src/**",
@@ -36,6 +36,21 @@
       "types": "./src/image/index.astro",
       "import": "./src/image/index.astro",
       "default": "./src/image/index.astro"
+    },
+    "./ReservationCheckout.astro": {
+      "types": "./src/reservation/checkout/index.astro",
+      "import": "./src/reservation/checkout/index.astro",
+      "default": "./src/reservation/checkout/index.astro"
+    },
+    "./ReservationAvailability.astro": {
+      "types": "./src/reservation/availability/index.astro",
+      "import": "./src/reservation/availability/index.astro",
+      "default": "./src/reservation/availability/index.astro"
+    },
+    "./ReservationStatus.astro": {
+      "types": "./src/reservation/status/index.astro",
+      "import": "./src/reservation/status/index.astro",
+      "default": "./src/reservation/status/index.astro"
     }
   },
   "peerDependencies": {

package/src/index.ts

@@ -2,3 +2,10 @@ export { default as Form } from './form/index.astro'
 export type { FormProps } from './form/types'
 export { default as Image } from './image/index.astro'
 export type { CloudflareImageTransformOptions, ImageProps } from './image/types'
+export { default as ReservationCheckout } from './reservation/checkout/index.astro'
+export type { ReservationCheckoutProps } from './reservation/checkout/types'
+export { default as ReservationAvailability } from './reservation/availability/index.astro'
+export type { ReservationAvailabilityProps } from './reservation/availability/types'
+export { default as ReservationStatus } from './reservation/status/index.astro'
+export type { ReservationStatusProps } from './reservation/status/types'
+export type { ReservationProduct, ReservationTimeSlot, ReservationError } from './reservation/types'

package/src/reservation/availability/index.astro

@@ -0,0 +1,116 @@
+---
+import type { ReservationAvailabilityProps } from './types'
+
+export type Props = ReservationAvailabilityProps
+
+const {
+	reservationId,
+	action = `/_nua/reservation/availability/${reservationId}`,
+	loadingMessage = 'Loading availability...',
+	errorMessage = 'Failed to load availability.',
+	pollInterval,
+} = Astro.props
+
+if (!action && !reservationId) {
+	throw new Error('ReservationAvailability requires either "reservationId" or "action" prop')
+}
+---
+
+<nua-reservation-availability
+	data-action={action}
+	data-loading-message={loadingMessage}
+	data-error-message={errorMessage}
+	data-poll-interval={pollInterval}
+	data-state="loading"
+>
+	<div data-status="loading">
+		<span>{loadingMessage}</span>
+	</div>
+	<div data-status="loaded" class="hidden">
+		<slot />
+	</div>
+	<div data-status="error" class="hidden">
+		<span>{errorMessage}</span>
+	</div>
+</nua-reservation-availability>
+
+<script>
+	import type { ReservationProduct } from '../types'
+
+	class NuaReservationAvailability extends HTMLElement {
+		private products: ReservationProduct[] = []
+		private pollTimer: ReturnType<typeof setInterval> | null = null
+		private fetchController: AbortController | null = null
+
+		connectedCallback() {
+			this.fetchAvailability()
+
+			const pollInterval = this.dataset.pollInterval
+			if (pollInterval) {
+				const ms = parseInt(pollInterval, 10)
+				if (ms > 0) {
+					this.pollTimer = setInterval(() => this.fetchAvailability(), ms)
+				}
+			}
+		}
+
+		disconnectedCallback() {
+			if (this.pollTimer) {
+				clearInterval(this.pollTimer)
+				this.pollTimer = null
+			}
+			this.fetchController?.abort()
+			this.fetchController = null
+		}
+
+		getProducts(): ReservationProduct[] {
+			return this.products
+		}
+
+		async refresh() {
+			await this.fetchAvailability()
+		}
+
+		private showState(state: 'loading' | 'loaded' | 'error') {
+			this.dataset.state = state
+			const loading = this.querySelector('[data-status="loading"]')
+			const loaded = this.querySelector('[data-status="loaded"]')
+			const error = this.querySelector('[data-status="error"]')
+
+			loading?.classList.toggle('hidden', state !== 'loading')
+			loaded?.classList.toggle('hidden', state !== 'loaded')
+			error?.classList.toggle('hidden', state !== 'error')
+		}
+
+		private async fetchAvailability() {
+			this.fetchController?.abort()
+			this.fetchController = new AbortController()
+
+			this.showState('loading')
+			const action = this.dataset.action!
+
+			try {
+				const response = await fetch(action, { signal: this.fetchController.signal })
+
+				if (!response.ok) {
+					this.showState('error')
+					return
+				}
+
+				const data = await response.json()
+				this.products = data.products || []
+
+				this.showState('loaded')
+				this.dispatchEvent(new CustomEvent('availability:loaded', {
+					bubbles: true,
+					detail: { products: this.products },
+				}))
+			} catch (err) {
+				if (err instanceof DOMException && err.name === 'AbortError') return
+				this.showState('error')
+			}
+		}
+	}
+
+	customElements.define('nua-reservation-availability', NuaReservationAvailability)
+</script>

package/src/reservation/availability/types.ts

@@ -0,0 +1,10 @@
+export type ReservationAvailabilityProps =
+	& {
+		loadingMessage?: string
+		errorMessage?: string
+		pollInterval?: number
+	}
+	& (
+		| { reservationId: string; action?: string }
+		| { reservationId?: string; action: string }
+	)

package/src/reservation/checkout/index.astro

@@ -0,0 +1,92 @@
+---
+import type { ReservationCheckoutProps } from './types'
+
+export type Props = ReservationCheckoutProps
+
+const {
+	reservationId,
+	action = `/_nua/reservation/checkout/${reservationId}`,
+	submittingMessage = 'Processing...',
+	errorMessage = 'Something went wrong. Please try again.',
+	unavailableMessage = 'This product is no longer available.',
+} = Astro.props
+
+if (!action && !reservationId) {
+	throw new Error('ReservationCheckout requires either "reservationId" or "action" prop')
+}
+---
+
+<nua-reservation-checkout
+	data-action={action}
+	data-submitting-message={submittingMessage}
+	data-error-message={errorMessage}
+	data-unavailable-message={unavailableMessage}
+>
+	<form method="POST" action={action}>
+		<slot />
+	</form>
+	<div data-status="error" class="hidden">
+		<span>{errorMessage}</span>
+	</div>
+</nua-reservation-checkout>
+
+<script>
+	class NuaReservationCheckout extends HTMLElement {
+		connectedCallback() {
+			const form = this.querySelector('form')
+			if (!form) return
+
+			const submittingMessage = this.dataset.submittingMessage!
+			const unavailableMessage = this.dataset.unavailableMessage!
+
+			form.addEventListener('submit', (e) => {
+				const productId = form.querySelector<HTMLInputElement>('[name="productId"]')
+				if (!productId || !productId.value) {
+					e.preventDefault()
+					this.showError(unavailableMessage)
+					this.dispatchEvent(new CustomEvent('checkout:error', {
+						bubbles: true,
+						detail: { message: unavailableMessage },
+					}))
+					return
+				}
+
+				this.hideError()
+
+				const submitButton = form.querySelector<HTMLButtonElement>('button[type="submit"], button:not([type])')
+				if (submitButton) {
+					submitButton.disabled = true
+					if (submittingMessage) {
+						submitButton.dataset.originalText = submitButton.textContent || ''
+						submitButton.textContent = submittingMessage
+					}
+				}
+			})
+
+			window.addEventListener('pageshow', (e) => {
+				if (!e.persisted) return
+				const submitButton = form.querySelector<HTMLButtonElement>('button[type="submit"], button:not([type])')
+				if (submitButton && submitButton.dataset.originalText) {
+					submitButton.disabled = false
+					submitButton.textContent = submitButton.dataset.originalText
+					delete submitButton.dataset.originalText
+				}
+			})
+		}
+
+		private showError(message: string) {
+			const errorDiv = this.querySelector('[data-status="error"]')
+			if (!errorDiv) return
+			const span = errorDiv.querySelector('span')
+			if (span) span.textContent = message
+			errorDiv.classList.remove('hidden')
+		}
+
+		private hideError() {
+			const errorDiv = this.querySelector('[data-status="error"]')
+			errorDiv?.classList.add('hidden')
+		}
+	}
+
+	customElements.define('nua-reservation-checkout', NuaReservationCheckout)
+</script>

package/src/reservation/checkout/types.ts

@@ -0,0 +1,10 @@
+export type ReservationCheckoutProps =
+	& {
+		submittingMessage?: string
+		errorMessage?: string
+		unavailableMessage?: string
+	}
+	& (
+		| { reservationId: string; action?: string }
+		| { reservationId?: string; action: string }
+	)

package/src/reservation/status/index.astro

@@ -0,0 +1,114 @@
+---
+import type { ReservationStatusProps } from './types'
+
+export type Props = ReservationStatusProps
+
+const {
+	reservationId,
+	action = `/_nua/reservation/status/${reservationId}`,
+	loadingMessage = 'Loading booking details...',
+	errorMessage = 'Failed to load booking details.',
+	missingBookingMessage = 'No booking found.',
+	notFoundMessage = 'Booking not found.',
+} = Astro.props
+
+if (!action && !reservationId) {
+	throw new Error('ReservationStatus requires either "reservationId" or "action" prop')
+}
+---
+
+<nua-reservation-status
+	data-action={action}
+	data-loading-message={loadingMessage}
+	data-error-message={errorMessage}
+	data-missing-session-message={missingBookingMessage}
+	data-not-found-message={notFoundMessage}
+	data-state="loading"
+>
+	<div data-status="loading">
+		<span>{loadingMessage}</span>
+	</div>
+	<div data-status="loaded" class="hidden">
+		<slot />
+	</div>
+	<div data-status="error" class="hidden">
+		<span>{errorMessage}</span>
+	</div>
+</nua-reservation-status>
+
+<script>
+	class NuaReservationStatus extends HTMLElement {
+		private fetchController: AbortController | null = null
+
+		connectedCallback() {
+			this.fetchStatus()
+		}
+
+		disconnectedCallback() {
+			this.fetchController?.abort()
+			this.fetchController = null
+		}
+
+		private showState(state: 'loading' | 'loaded' | 'error', message?: string) {
+			this.dataset.state = state
+			const loading = this.querySelector('[data-status="loading"]')
+			const loaded = this.querySelector('[data-status="loaded"]')
+			const error = this.querySelector('[data-status="error"]')
+
+			loading?.classList.toggle('hidden', state !== 'loading')
+			loaded?.classList.toggle('hidden', state !== 'loaded')
+			error?.classList.toggle('hidden', state !== 'error')
+
+			if (message && state === 'error') {
+				const span = error?.querySelector('span')
+				if (span) span.textContent = message
+			}
+		}
+
+		private async fetchStatus() {
+			this.fetchController?.abort()
+			this.fetchController = new AbortController()
+
+			const action = this.dataset.action!
+			const missingBookingMessage = this.dataset.missingBookingMessage!
+			const notFoundMessage = this.dataset.notFoundMessage!
+			const errorMessage = this.dataset.errorMessage!
+
+			const params = new URLSearchParams(window.location.search)
+			const bookingId = params.get('booking_id')
+
+			if (!bookingId) {
+				this.showState('error', missingBookingMessage)
+				return
+			}
+
+			try {
+				const url = `${action}?booking_id=${encodeURIComponent(bookingId)}`
+				const response = await fetch(url, { signal: this.fetchController.signal })
+
+				if (response.status === 404) {
+					this.showState('error', notFoundMessage)
+					return
+				}
+
+				if (!response.ok) {
+					this.showState('error', errorMessage)
+					return
+				}
+
+				const data = await response.json()
+
+				this.showState('loaded')
+				this.dispatchEvent(new CustomEvent('status:loaded', {
+					bubbles: true,
+					detail: { booking: data.booking || data },
+				}))
+			} catch (err) {
+				if (err instanceof DOMException && err.name === 'AbortError') return
+				this.showState('error', errorMessage)
+			}
+		}
+	}
+
+	customElements.define('nua-reservation-status', NuaReservationStatus)
+</script>

package/src/reservation/status/types.ts

@@ -0,0 +1,11 @@
+export type ReservationStatusProps =
+	& {
+		loadingMessage?: string
+		errorMessage?: string
+		missingBookingMessage?: string
+		notFoundMessage?: string
+	}
+	& (
+		| { reservationId: string; action?: string }
+		| { reservationId?: string; action: string }
+	)

package/src/reservation/types.ts

@@ -0,0 +1,21 @@
+export interface ReservationTimeSlot {
+	id: string
+	startTime: string
+	endTime: string
+	available: boolean
+	remainingCapacity?: number
+}
+
+export interface ReservationProduct {
+	id: string
+	name: string
+	description?: string
+	price: number
+	currency: string
+	timeSlots?: ReservationTimeSlot[]
+}
+
+export interface ReservationError {
+	error: string
+	code?: string
+}