portal/src/routes/(protected)/(user)/account/+page.svelte

<script lang="ts">
	import { clientFormatPhoneNumber } from '$lib/utils';
	import type { PageProps } from './$types';

	let { data, form }: PageProps = $props();

	let initialPhone = $derived(clientFormatPhoneNumber(data.user.profile?.phoneNumber ?? ''));
	let phoneNumber = $state('');
	let phoneInitialized = $state(false);

	$effect(() => {
		if (!phoneInitialized) {
			phoneNumber = initialPhone;
			phoneInitialized = true;
		}
	});

	let showAddressForm = $state(false);

	function handlePhoneInput(event: Event) {
		const input = event.target as HTMLInputElement;
		phoneNumber = clientFormatPhoneNumber(input.value);
	}
</script>

<div class="mx-auto w-full max-w-3xl">
	<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Account</h1>
	<p class="mt-1 text-sm text-slate-500 sm:text-base">Manage your profile and addresses.</p>

	<!-- Email (read-only) -->
	<div class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
		<p class="text-xs tracking-wide text-slate-500 uppercase">Email</p>
		<p class="mt-1 text-base break-words text-slate-900">{data.user.email}</p>
	</div>

	<!-- Profile Form -->
	<section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
		<h2 class="text-lg font-semibold text-slate-900">Profile</h2>

		{#if form?.action === 'updateProfile' && form?.success}
			<div class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
				Profile updated successfully.
			</div>
		{/if}
		{#if form?.action === 'updateProfile' && form?.error}
			<div class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
				{form.error}
			</div>
		{/if}

		<form method="POST" action="?/updateProfile" class="mt-5 flex flex-col gap-4">
			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
				<div class="flex flex-col gap-1.5">
					<label for="firstName" class="text-sm font-medium text-slate-700"> First Name </label>
					<input
						type="text"
						id="firstName"
						name="firstName"
						value={data.user.profile?.firstName ?? ''}
						required
						class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
					/>
				</div>
				<div class="flex flex-col gap-1.5">
					<label for="lastName" class="text-sm font-medium text-slate-700"> Last Name </label>
					<input
						type="text"
						id="lastName"
						name="lastName"
						value={data.user.profile?.lastName ?? ''}
						required
						class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
					/>
				</div>
			</div>
			<div class="flex flex-col gap-1.5">
				<label for="phoneNumber" class="text-sm font-medium text-slate-700"> Phone Number </label>
				<input
					type="tel"
					id="phoneNumber"
					name="phoneNumber"
					bind:value={phoneNumber}
					oninput={handlePhoneInput}
					required
					class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
				/>
			</div>
			<div>
				<button
					type="submit"
					class="flex h-11 w-full items-center justify-center rounded-lg bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 sm:w-auto sm:px-8"
				>
					Save Profile
				</button>
			</div>
		</form>
	</section>

	<!-- Addresses -->
	<section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
		<div class="flex items-center justify-between gap-4">
			<h2 class="text-lg font-semibold text-slate-900">Addresses</h2>
			<button
				type="button"
				onclick={() => (showAddressForm = !showAddressForm)}
				class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
			>
				{showAddressForm ? 'Cancel' : 'Add Address'}
			</button>
		</div>

		{#if form?.action === 'addAddress' && form?.success}
			<div class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
				Address added successfully.
			</div>
		{/if}
		{#if form?.action === 'addAddress' && form?.error}
			<div class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
				{form.error}
			</div>
		{/if}

		{#if showAddressForm}
			<form method="POST" action="?/addAddress" class="mt-5 flex flex-col gap-4">
				<div class="flex flex-col gap-1.5">
					<label for="street" class="text-sm font-medium text-slate-700">Street</label>
					<input
						type="text"
						id="street"
						name="street"
						required
						class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
					/>
				</div>
				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
					<div class="flex flex-col gap-1.5">
						<label for="city" class="text-sm font-medium text-slate-700">City</label>
						<input
							type="text"
							id="city"
							name="city"
							required
							class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
						/>
					</div>
					<div class="flex flex-col gap-1.5">
						<label for="state" class="text-sm font-medium text-slate-700">State</label>
						<input
							type="text"
							id="state"
							name="state"
							required
							class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
						/>
					</div>
				</div>
				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
					<div class="flex flex-col gap-1.5">
						<label for="postalCode" class="text-sm font-medium text-slate-700"> Postal Code </label>
						<input
							type="text"
							id="postalCode"
							name="postalCode"
							required
							class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
						/>
					</div>
					<div class="flex flex-col gap-1.5">
						<label for="country" class="text-sm font-medium text-slate-700">Country</label>
						<input
							type="text"
							id="country"
							name="country"
							required
							value="US"
							class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
						/>
					</div>
				</div>
				<div>
					<button
						type="submit"
						class="flex h-11 w-full items-center justify-center rounded-lg bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 sm:w-auto sm:px-8"
					>
						Save Address
					</button>
				</div>
			</form>
		{/if}

		{#if data.user.profile?.addresses && data.user.profile.addresses.length > 0}
			<div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
				{#each data.user.profile.addresses as address (address.id)}
					<div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
						<p class="text-sm font-medium text-slate-900">{address.street}</p>
						<p class="mt-1 text-sm text-slate-600">
							{address.city}, {address.state}
							{address.postalCode}
						</p>
						<p class="text-sm text-slate-600">{address.country}</p>
					</div>
				{/each}
			</div>
		{:else if !showAddressForm}
			<p class="mt-5 text-sm text-slate-500">No addresses on file.</p>
		{/if}
	</section>
</div>