@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/BookingForm.svelte

@@ -1,278 +0,0 @@
-<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>