@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/BookingForm.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+	/**
+	 * BookingForm — Guest information form for booking a meeting.
+	 *
+	 * Collects name, email, optional phone, optional notes, and optional attendees.
+	 * Configurable via props: required fields, accent color, terms URL, submit label.
+	 */
+
+	export interface BookingFormData {
+		guest_name: string;
+		guest_email: string;
+		guest_phone?: string;
+		guest_notes?: string;
+		timezone: string;
+		start_time: string;
+		attendees?: { name: string; email: string }[];
+	}
+
+	let {
+		onSubmit,
+		submitting = false,
+		initialName = '',
+		initialEmail = '',
+		requirePhone = false,
+		showAttendeeOption = true,
+		showNotes = true,
+		showTerms = true,
+		termsUrl = '/terms',
+		privacyUrl = '/privacy',
+		submitLabel = 'Confirm and Schedule',
+		submittingLabel = 'Scheduling...',
+		locationHint = '',
+		accentColor = 'primary',
+	}: {
+		onSubmit: (data: BookingFormData) => void;
+		submitting?: boolean;
+		initialName?: string;
+		initialEmail?: string;
+		requirePhone?: boolean;
+		showAttendeeOption?: boolean;
+		showNotes?: boolean;
+		showTerms?: boolean;
+		termsUrl?: string;
+		privacyUrl?: string;
+		submitLabel?: string;
+		submittingLabel?: string;
+		locationHint?: string;
+		accentColor?: string;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	let guestName = $state(initialName);
+	// svelte-ignore state_referenced_locally
+	let guestEmail = $state(initialEmail);
+	let guestPhone = $state('');
+	let guestNotes = $state('');
+
+	let attendees = $state<{ name: string; email: string }[]>([]);
+	let showAttendees = $state(false);
+
+	const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+	const isValid = $derived(
+		guestName.trim().length >= 2 &&
+		isValidEmail(guestEmail) &&
+		(!requirePhone || guestPhone.trim().length >= 7) &&
+		attendees.every((a) => a.name.trim().length >= 2 && isValidEmail(a.email))
+	);
+
+	function addAttendee() {
+		attendees = [...attendees, { name: '', email: '' }];
+	}
+
+	function removeAttendee(index: number) {
+		attendees = attendees.filter((_, i) => i !== index);
+	}
+
+	function updateAttendee(index: number, field: 'name' | 'email', value: string) {
+		attendees = attendees.map((a, i) => (i === index ? { ...a, [field]: value } : a));
+	}
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (!isValid || submitting) return;
+
+		const data: BookingFormData = {
+			guest_name: guestName.trim(),
+			guest_email: guestEmail.trim().toLowerCase(),
+			guest_phone: guestPhone.trim() || undefined,
+			guest_notes: guestNotes.trim() || undefined,
+			timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			start_time: '', // Set by parent
+			attendees: attendees.length > 0 ? attendees.map((a) => ({
+				name: a.name.trim(),
+				email: a.email.trim().toLowerCase()
+			})) : undefined
+		};
+
+		onSubmit(data);
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="space-y-6">
+	<!-- Name -->
+	<div>
+		<label for="booking-name" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
+			Your Name <span class="text-error">*</span>
+		</label>
+		<input
+			id="booking-name"
+			type="text"
+			bind:value={guestName}
+			placeholder="John Smith"
+			required
+			disabled={submitting}
+			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+		/>
+	</div>
+
+	<!-- Email -->
+	<div>
+		<label for="booking-email" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
+			Email Address <span class="text-error">*</span>
+		</label>
+		<input
+			id="booking-email"
+			type="email"
+			bind:value={guestEmail}
+			placeholder="john@example.com"
+			required
+			disabled={submitting}
+			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+		/>
+		<p class="text-[0.75rem] text-base-content/45 mt-1">
+			Confirmation and meeting details will be sent here
+		</p>
+	</div>
+
+	<!-- Phone -->
+	<div>
+		<label for="booking-phone" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
+			Phone Number {#if requirePhone}<span class="text-error">*</span>{:else}<span class="text-base-content/50">(optional)</span>{/if}
+		</label>
+		<input
+			id="booking-phone"
+			type="tel"
+			bind:value={guestPhone}
+			placeholder="+1 (555) 123-4567"
+			required={requirePhone}
+			disabled={submitting}
+			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+		/>
+		{#if locationHint}
+			<p class="text-[0.75rem] text-base-content/45 mt-1">{locationHint}</p>
+		{/if}
+	</div>
+
+	<!-- Additional Attendees -->
+	{#if showAttendeeOption}
+		<div class="border-t border-base-300 pt-6">
+			<div class="flex items-center justify-between mb-4">
+				<div>
+					<h3 class="text-[0.9375rem] font-medium">Additional Attendees</h3>
+					<p class="text-[0.75rem] text-base-content/45">Invite team members to join the meeting</p>
+				</div>
+				{#if !showAttendees}
+					<button
+						type="button"
+						onclick={() => { showAttendees = true; addAttendee(); }}
+						disabled={submitting}
+						class="btn btn-sm btn-ghost text-{accentColor}"
+					>
+						<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+						</svg>
+						Add Attendee
+					</button>
+				{/if}
+			</div>
+
+			{#if showAttendees && attendees.length > 0}
+				<div class="space-y-4">
+					{#each attendees as attendee, index}
+						<div class="flex gap-3 items-start">
+							<div class="flex-1 grid sm:grid-cols-2 gap-3">
+								<input
+									type="text"
+									value={attendee.name}
+									oninput={(e) => updateAttendee(index, 'name', (e.target as HTMLInputElement).value)}
+									placeholder="Name"
+									disabled={submitting}
+									class="input input-bordered input-sm bg-base-200/50 focus:border-{accentColor}"
+								/>
+								<input
+									type="email"
+									value={attendee.email}
+									oninput={(e) => updateAttendee(index, 'email', (e.target as HTMLInputElement).value)}
+									placeholder="Email"
+									disabled={submitting}
+									class="input input-bordered input-sm bg-base-200/50 focus:border-{accentColor}"
+								/>
+							</div>
+							<button
+								type="button"
+								onclick={() => removeAttendee(index)}
+								disabled={submitting}
+								class="btn btn-sm btn-ghost btn-circle text-error"
+								aria-label="Remove attendee"
+							>
+								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+								</svg>
+							</button>
+						</div>
+					{/each}
+
+					<button
+						type="button"
+						onclick={addAttendee}
+						disabled={submitting}
+						class="btn btn-sm btn-ghost text-{accentColor}"
+					>
+						<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+						</svg>
+						Add Another
+					</button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Notes -->
+	{#if showNotes}
+		<div>
+			<label for="booking-notes" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
+				Additional Notes <span class="text-base-content/50">(optional)</span>
+			</label>
+			<textarea
+				id="booking-notes"
+				bind:value={guestNotes}
+				placeholder="Anything you'd like us to know before the meeting..."
+				rows={3}
+				disabled={submitting}
+				class="textarea textarea-bordered w-full bg-base-200/50 focus:border-{accentColor}"
+			></textarea>
+		</div>
+	{/if}
+
+	<!-- Terms Notice -->
+	{#if showTerms}
+		<div class="bg-base-200/30 rounded-lg p-4 text-[0.8125rem] text-base-content/45">
+			<p>
+				By scheduling this meeting, you agree to our
+				<a href={termsUrl} class="text-{accentColor} hover:underline">Terms of Service</a>
+				and
+				<a href={privacyUrl} class="text-{accentColor} hover:underline">Privacy Policy</a>.
+			</p>
+		</div>
+	{/if}
+
+	<!-- Submit Button -->
+	<button
+		type="submit"
+		disabled={!isValid || submitting}
+		class="btn btn-{accentColor} btn-lg w-full disabled:opacity-50 disabled:cursor-not-allowed"
+	>
+		{#if submitting}
+			<span class="loading loading-spinner loading-sm"></span>
+			{submittingLabel}
+		{:else}
+			{submitLabel}
+			<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+			</svg>
+		{/if}
+	</button>
+</form>

package/dist/components/BookingForm.svelte.d.ts

@@ -0,0 +1,37 @@
+/**
+ * BookingForm — Guest information form for booking a meeting.
+ *
+ * Collects name, email, optional phone, optional notes, and optional attendees.
+ * Configurable via props: required fields, accent color, terms URL, submit label.
+ */
+export interface BookingFormData {
+    guest_name: string;
+    guest_email: string;
+    guest_phone?: string;
+    guest_notes?: string;
+    timezone: string;
+    start_time: string;
+    attendees?: {
+        name: string;
+        email: string;
+    }[];
+}
+type $$ComponentProps = {
+    onSubmit: (data: BookingFormData) => void;
+    submitting?: boolean;
+    initialName?: string;
+    initialEmail?: string;
+    requirePhone?: boolean;
+    showAttendeeOption?: boolean;
+    showNotes?: boolean;
+    showTerms?: boolean;
+    termsUrl?: string;
+    privacyUrl?: string;
+    submitLabel?: string;
+    submittingLabel?: string;
+    locationHint?: string;
+    accentColor?: string;
+};
+declare const BookingForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type BookingForm = ReturnType<typeof BookingForm>;
+export default BookingForm;