fix: streamline client onboarding wizard

This commit is contained in:
2026-06-26 13:04:46 +01:00
parent 1dcbe2e3fe
commit b2cf967b78
3 changed files with 41 additions and 60 deletions
+1 -4
View File
@@ -14,11 +14,8 @@ export const clientEditSchema = clientCreateSchema.extend(idSchema.shape);
export const clientOnboardingCreateSchema = clientCreateSchema.extend({ export const clientOnboardingCreateSchema = clientCreateSchema.extend({
primaryContactName: requiredText('Primary contact name'), primaryContactName: requiredText('Primary contact name'),
primaryContactRole: optionalText(120), primaryContactRole: optionalText(120),
primaryContactEmail: optionalEmail, primaryContactEmail: z.string().trim().email('Enter a valid primary contact email address.'),
primaryContactPhone: optionalText(80), primaryContactPhone: optionalText(80),
primaryContactReceivesInvoices: z.enum(['true', 'false']).default('false'),
primaryContactReceivesContracts: z.enum(['true', 'false']).default('false'),
primaryAddressType: z.enum(['primary', 'invoicing', 'contract']).default('primary'),
primaryAddressLine1: requiredText('Address line 1'), primaryAddressLine1: requiredText('Address line 1'),
primaryAddressLine2: optionalText(160), primaryAddressLine2: optionalText(160),
primaryAddressLine3: optionalText(160), primaryAddressLine3: optionalText(160),
+13 -12
View File
@@ -75,11 +75,11 @@ export const actions: Actions = {
if (!form.valid) return message(form, 'Check the highlighted fields.', { status: 400 }); if (!form.valid) return message(form, 'Check the highlighted fields.', { status: 400 });
try { try {
await db.transaction(async (tx) => {
const clientId = crypto.randomUUID(); const clientId = crypto.randomUUID();
const now = new Date(); const now = new Date();
await tx.insert(clients).values({ await db.batch([
db.insert(clients).values({
id: clientId, id: clientId,
organizationId: activeOrganizationId, organizationId: activeOrganizationId,
name: form.data.name, name: form.data.name,
@@ -88,9 +88,9 @@ export const actions: Actions = {
notes: form.data.notes || null, notes: form.data.notes || null,
updatedAt: now, updatedAt: now,
createdAt: now createdAt: now
}); }),
await tx.insert(contacts).values({ db.insert(contacts).values({
id: crypto.randomUUID(), id: crypto.randomUUID(),
organizationId: activeOrganizationId, organizationId: activeOrganizationId,
clientId, clientId,
@@ -99,17 +99,17 @@ export const actions: Actions = {
email: form.data.primaryContactEmail || null, email: form.data.primaryContactEmail || null,
phone: form.data.primaryContactPhone || null, phone: form.data.primaryContactPhone || null,
isPrimary: true, isPrimary: true,
receivesInvoices: form.data.primaryContactReceivesInvoices === 'true', receivesInvoices: true,
receivesContracts: form.data.primaryContactReceivesContracts === 'true', receivesContracts: true,
createdAt: now, createdAt: now,
updatedAt: now updatedAt: now
}); }),
await tx.insert(addresses).values({ db.insert(addresses).values({
id: crypto.randomUUID(), id: crypto.randomUUID(),
organizationId: activeOrganizationId, organizationId: activeOrganizationId,
clientId, clientId,
type: form.data.primaryAddressType, type: 'primary',
line1: form.data.primaryAddressLine1, line1: form.data.primaryAddressLine1,
line2: form.data.primaryAddressLine2 || null, line2: form.data.primaryAddressLine2 || null,
line3: form.data.primaryAddressLine3 || null, line3: form.data.primaryAddressLine3 || null,
@@ -119,9 +119,10 @@ export const actions: Actions = {
country: form.data.primaryAddressCountry, country: form.data.primaryAddressCountry,
createdAt: now, createdAt: now,
updatedAt: now updatedAt: now
}); })
}); ]);
} catch { } catch (cause) {
console.error('Unable to create client', cause);
return message(form, 'Unable to create client.', { status: 400 }); return message(form, 'Unable to create client.', { status: 400 });
} }
@@ -3,7 +3,6 @@
import PlusIcon from '@lucide/svelte/icons/plus'; import PlusIcon from '@lucide/svelte/icons/plus';
import { Field as FormField, Control, FieldErrors } from 'formsnap'; import { Field as FormField, Control, FieldErrors } from 'formsnap';
import FormSelect from '$lib/components/form-select.svelte'; import FormSelect from '$lib/components/form-select.svelte';
import FormCheckbox from '$lib/components/form-checkbox.svelte';
import { industryOptions } from '$lib/constants/industries'; import { industryOptions } from '$lib/constants/industries';
import * as Field from '$lib/components/ui/field/index.js'; import * as Field from '$lib/components/ui/field/index.js';
import { Button } from '$lib/components/ui/button/index.js'; import { Button } from '$lib/components/ui/button/index.js';
@@ -66,7 +65,7 @@
<Control id="create-name"> <Control id="create-name">
{#snippet children({ props })} {#snippet children({ props })}
<Field.Label>Name</Field.Label> <Field.Label>Name</Field.Label>
<Input {...props} type="text" bind:value={$createData.name} /> <Input {...props} type="text" required bind:value={$createData.name} />
{/snippet} {/snippet}
</Control> </Control>
<Field.Error><FieldErrors /></Field.Error> <Field.Error><FieldErrors /></Field.Error>
@@ -144,7 +143,12 @@
<Control id="create-primary-contact-email"> <Control id="create-primary-contact-email">
{#snippet children({ props })} {#snippet children({ props })}
<Field.Label>Email</Field.Label> <Field.Label>Email</Field.Label>
<Input {...props} type="email" bind:value={$createData.primaryContactEmail} /> <Input
{...props}
type="email"
required
bind:value={$createData.primaryContactEmail}
/>
{/snippet} {/snippet}
</Control> </Control>
<Field.Error><FieldErrors /></Field.Error> <Field.Error><FieldErrors /></Field.Error>
@@ -161,50 +165,19 @@
<Field.Error><FieldErrors /></Field.Error> <Field.Error><FieldErrors /></Field.Error>
</Field.Field> </Field.Field>
</FormField> </FormField>
<div class="grid gap-3 py-1">
<FormCheckbox
id="create-primary-contact-receives-invoices"
name="primaryContactReceivesInvoices"
label="Receives invoices"
description="Send invoices raised for this client to this contact."
bind:value={$createData.primaryContactReceivesInvoices}
/>
<FormCheckbox
id="create-primary-contact-receives-contracts"
name="primaryContactReceivesContracts"
label="Receives contracts"
description="Send contract documents for this client to this contact."
bind:value={$createData.primaryContactReceivesContracts}
/>
</div>
</div> </div>
<div class={['grid gap-2', createStep !== 1 && 'hidden']}> <div class={['grid gap-2', createStep !== 1 && 'hidden']}>
<FormField form={createForm} name="primaryAddressType">
<Field.Field>
<Control id="create-primary-address-type">
{#snippet children({ props })}
<Field.Label>Type</Field.Label>
<FormSelect
name="primaryAddressType"
bind:value={$createData.primaryAddressType}
options={[
{ value: 'primary', label: 'Primary' },
{ value: 'invoicing', label: 'Invoicing' },
{ value: 'contract', label: 'Contract' }
]}
triggerProps={props}
/>
{/snippet}
</Control>
<Field.Error><FieldErrors /></Field.Error>
</Field.Field>
</FormField>
<FormField form={createForm} name="primaryAddressLine1"> <FormField form={createForm} name="primaryAddressLine1">
<Field.Field> <Field.Field>
<Control id="create-primary-address-line-1"> <Control id="create-primary-address-line-1">
{#snippet children({ props })} {#snippet children({ props })}
<Field.Label>Address line 1</Field.Label> <Field.Label>Address line 1</Field.Label>
<Input {...props} type="text" bind:value={$createData.primaryAddressLine1} /> <Input
{...props}
type="text"
required
bind:value={$createData.primaryAddressLine1}
/>
{/snippet} {/snippet}
</Control> </Control>
<Field.Error><FieldErrors /></Field.Error> <Field.Error><FieldErrors /></Field.Error>
@@ -238,7 +211,12 @@
<Control id="create-primary-address-city"> <Control id="create-primary-address-city">
{#snippet children({ props })} {#snippet children({ props })}
<Field.Label>City</Field.Label> <Field.Label>City</Field.Label>
<Input {...props} type="text" bind:value={$createData.primaryAddressCity} /> <Input
{...props}
type="text"
required
bind:value={$createData.primaryAddressCity}
/>
{/snippet} {/snippet}
</Control> </Control>
<Field.Error><FieldErrors /></Field.Error> <Field.Error><FieldErrors /></Field.Error>
@@ -262,7 +240,12 @@
<Control id="create-primary-address-postcode"> <Control id="create-primary-address-postcode">
{#snippet children({ props })} {#snippet children({ props })}
<Field.Label>Postcode</Field.Label> <Field.Label>Postcode</Field.Label>
<Input {...props} type="text" bind:value={$createData.primaryAddressPostcode} /> <Input
{...props}
type="text"
required
bind:value={$createData.primaryAddressPostcode}
/>
{/snippet} {/snippet}
</Control> </Control>
<Field.Error><FieldErrors /></Field.Error> <Field.Error><FieldErrors /></Field.Error>