@nuxt-customer-portal/clients 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @nuxt-customer-portal/clients
 
+## 0.4.0
+
+### Minor Changes
+
+- 59c8921: Support organization and personal clients with optional verified self-registration, single-person access safeguards, and shared provider, client, and user timezone preferences. Preserve existing B2B defaults, module references, invoice history, and Timesheets timezone behavior.
+
+  Collect and store first and last names during signup and personal onboarding. Route ordinary personal registration and verified users without memberships or pending invitations through onboarding.
+
+  Allow users to edit first name, last name, and an independent display name in profile settings.
+
+  Synchronize display-name edits with the linked private client name and current billing name in the same transaction, preserving organizations and historical invoices.
+
+  Let private clients edit their own billing address in profile settings, independently of the active organization, with server-side ownership checks.
+
+  Private clients use their own invoice email without contact persons; hide contact management and reject private-client contact creation or selection server-side.
+
+  Add a B2C-only Invite private client action to the Users page, supporting new and existing private clients with atomic record creation, request retry protection, and pending invitation recovery when email delivery fails.
+
+- 59c8921: Add the Products store module and product invoice integration: translated digital products and services, secret catalog API keys, Stripe one-time checkout, guest invitations, purchaser-only delivery, exact multi-currency invoices, and refund credit notes. Add narrowly scoped external authentication routes, API documentation contracts, and configurable module activation. Existing stores remain closed until explicitly configured and enabled.
+
+### Patch Changes
+
+- 59c8921: Allow SaaS administrators to configure allowed client types and personal self-registration in Portal Settings. Apply saved preferences to server authorization, onboarding, client forms and navigation, preserving configuration defaults for existing portals. Prevent disabling client types that still have records, including during concurrent creation.
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+  - @nuxt-customer-portal/core@0.4.0
+  - @nuxt-customer-portal/ui@0.4.0
+
 ## 0.3.3
 
 ### Patch Changes

package/README.md

@@ -1,3 +1,7 @@
 # Clients layer
 
 Owns CLIENT organizations, business profiles, memberships, invitations, archival, and generic feature-module activations. Feature layers depend on its public server contracts instead of implementing their own client directories.
+
+## Business and personal clients
+
+The default configuration remains B2B-only. Enable `clients.allowedTypes: ['organization', 'person']` and optionally `clients.personalSelfRegistration: true` for mixed portals. See [configuration, access, timezone contracts, and migration guidance](../../docs/guides/business-and-personal-clients.md).

package/app/components/ClientsClientDetail.vue

@@ -2,14 +2,14 @@
 import { z } from 'zod'
 import type { GenericClientDto } from '@nuxt-customer-portal/clients/shared/types/client'
 
-const props = defineProps<{ client: GenericClientDto; refresh: () => Promise<unknown> }>()
+const props = defineProps<{ client: GenericClientDto; refresh: () => Promise<unknown>; startEditing?: boolean }>()
 const emit = defineEmits<{ deleted: [] }>()
 const { t } = useI18n()
 const toast = useToast()
 const api = useClients()
 const { clientIntegrations } = usePortalFeatures()
 const busy = ref(false)
-const editing = ref(false)
+const editing = ref(props.startEditing ?? false)
 const deleting = ref(false)
 const deleteName = ref('')
 const deletion = ref<{ canDelete: boolean; memberCount: number; moduleCount: number; clientName: string } | null>(null)
@@ -146,7 +146,7 @@ const toggleEditing = () => {
               {{ t(client.archivedAt ? 'features.clients.archived' : 'features.clients.active') }}
             </UBadge>
           </div>
-          <p class="text-sm text-muted">{{ client.officialName }}</p>
+          <p v-if="client.officialName !== client.name" class="text-sm text-muted">{{ client.officialName }}</p>
         </div>
       </div>
       <UButton size="sm" variant="outline" icon="i-lucide-pencil" @click="toggleEditing">
@@ -168,23 +168,31 @@ const toggleEditing = () => {
         <h2 class="font-semibold">{{ t('features.clients.profile') }}</h2>
       </template>
       <dl class="grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.clientType') }}</dt>
+          <dd>{{ t(`features.clients.types.${client.clientType}`) }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('timezones.label') }}</dt>
+          <dd>{{ client.timezone || t('timezones.inherit', { timezone: client.schedulingTimezone }) }}</dd>
+        </div>
         <div>
           <dt class="text-sm text-muted">{{ t('features.clients.name') }}</dt>
           <dd class="font-medium">{{ client.name }}</dd>
         </div>
-        <div>
+        <div v-if="client.clientType === 'organization'">
           <dt class="text-sm text-muted">{{ t('features.clients.officialName') }}</dt>
           <dd>{{ client.officialName }}</dd>
         </div>
-        <div>
+        <div v-if="client.clientType === 'organization'">
           <dt class="text-sm text-muted">{{ t('features.clients.slug') }}</dt>
           <dd class="font-mono text-sm">{{ client.slug }}</dd>
         </div>
-        <div>
+        <div v-if="client.clientType === 'organization'">
           <dt class="text-sm text-muted">{{ t('features.clients.registrationNumber') }}</dt>
           <dd>{{ client.registrationNumber || '—' }}</dd>
         </div>
-        <div>
+        <div v-if="client.clientType === 'organization'">
           <dt class="text-sm text-muted">{{ t('features.clients.vatNumber') }}</dt>
           <dd>{{ client.vatNumber || '—' }}</dd>
         </div>
@@ -203,16 +211,24 @@ const toggleEditing = () => {
       </dl>
     </UCard>
 
-    <UCard>
+    <UCard v-if="client.clientType !== 'person' || !client.members.length">
       <template #header>
-        <h2 class="font-semibold">{{ t('features.clients.members') }}</h2>
+        <h2 class="font-semibold">
+          {{ t(client.clientType === 'person' ? 'features.clients.invitePrivateClient' : 'features.clients.members') }}
+        </h2>
       </template>
       <div class="grid gap-4">
         <UForm
+          v-if="client.clientType !== 'person' || !client.invitations.length"
           :state="invitationForm"
           :schema="invitationSchema"
           novalidate
-          class="grid items-start gap-2 sm:grid-cols-[minmax(0,1fr)_150px_auto]"
+          :class="[
+            'grid items-start gap-2',
+            client.clientType === 'person'
+              ? 'sm:grid-cols-[minmax(0,1fr)_auto]'
+              : 'sm:grid-cols-[minmax(0,1fr)_150px_auto]'
+          ]"
           @submit="inviteMember"
         >
           <UFormField name="email">
@@ -223,7 +239,7 @@ const toggleEditing = () => {
               class="w-full"
             />
           </UFormField>
-          <UFormField name="role">
+          <UFormField v-if="client.clientType !== 'person'" name="role">
             <USelect v-model="invitationForm.role" :items="['member', 'admin', 'owner']" class="w-full" />
           </UFormField>
           <UButton type="submit" :disabled="!invitationForm.email.trim()" :loading="busy">
@@ -247,6 +263,7 @@ const toggleEditing = () => {
             </div>
             <div class="flex items-center gap-2">
               <USelect
+                v-if="client.clientType !== 'person'"
                 :model-value="item.role"
                 :items="['member', 'admin', 'owner']"
                 size="xs"
@@ -265,9 +282,11 @@ const toggleEditing = () => {
             </div>
           </div>
         </div>
-        <p v-else class="text-sm text-muted">{{ t('features.clients.noMembers') }}</p>
+        <p v-else-if="client.clientType !== 'person'" class="text-sm text-muted">
+          {{ t('features.clients.noMembers') }}
+        </p>
 
-        <div class="border-t border-default pt-4">
+        <div v-if="client.clientType !== 'person' || client.invitations.length">
           <h3 class="mb-3 text-sm font-semibold">
             {{ t('features.clients.pendingInvitations') }} ({{ client.invitations.length }})
           </h3>
@@ -289,12 +308,15 @@ const toggleEditing = () => {
               </div>
               <div class="flex items-center gap-2">
                 <UBadge color="warning" variant="soft">{{ t('features.clients.invitationPending') }}</UBadge
-                ><UBadge color="neutral" variant="soft">{{ invitation.role }}</UBadge>
+                ><UBadge v-if="client.clientType !== 'person'" color="neutral" variant="soft">{{
+                  invitation.role
+                }}</UBadge>
                 <InvitationActions
                   :endpoint="`/api/clients/${client.id}/invitations/${invitation.id}`"
                   :email="invitation.email"
                   :role="invitation.role"
-                  can-edit
+                  :can-edit="client.clientType !== 'person'"
+                  can-resend
                   can-revoke
                   @refresh="refresh()"
                 />
@@ -394,6 +416,7 @@ const toggleEditing = () => {
       </div>
     </UCard>
     <ConfirmationModal
+      v-if="showRemoveMemberConfirmation"
       v-model:open="showRemoveMemberConfirmation"
       title="features.clients.removeMember"
       message="features.clients.confirmRemoveMember"
@@ -401,7 +424,6 @@ const toggleEditing = () => {
       confirm-text="features.clients.removeMember"
       confirm-color="error"
       @confirm="removeMember"
-      @cancel="memberToRemove = null"
     />
   </div>
 </template>

package/app/components/ClientsClientForm.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import { z } from 'zod'
+import { isValidTimezone } from '@nuxt-customer-portal/core/shared/timezone'
 import type { GenericClientDto } from '@nuxt-customer-portal/clients/shared/types/client'
 
 const props = defineProps<{ client?: GenericClientDto | null; busy?: boolean; editing?: boolean }>()
 const emit = defineEmits<{ submit: [value: Record<string, unknown>]; cancel: [] }>()
 const { t } = useI18n()
+const configuration = useClientConfiguration()
+const allowedTypes = computed(() => configuration.value.allowedTypes ?? ['organization'])
+const { data: timezones } = await useFetch<{ providerTimezone: string }>('/api/timezones')
 const form = reactive({
+  clientType: (allowedTypes.value[0] ?? 'organization') as 'organization' | 'person',
+  timezone: null as string | null,
   name: '',
+  firstName: '',
+  lastName: '',
   slug: '',
   officialName: '',
   address: '',
@@ -15,17 +23,35 @@ const form = reactive({
   invoiceEmail: '',
   preferredLocale: 'nl' as 'nl' | 'en'
 })
+const displayNameCustomized = ref(false)
 const schema = computed(() =>
   z.object({
+    clientType: z.enum(['organization', 'person']),
+    timezone: z
+      .string()
+      .nullable()
+      .refine((value) => value === null || isValidTimezone(value), t('timezones.invalid')),
     name: z.string().trim().min(2, t('features.clients.validation.name')).max(160),
-    slug: props.editing
-      ? z.string()
-      : z
-          .string()
-          .trim()
-          .min(1, t('features.clients.validation.slug'))
-          .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, t('features.clients.validation.slug')),
-    officialName: z.string().trim().min(2, t('features.clients.validation.officialName')).max(200),
+    firstName:
+      form.clientType === 'person'
+        ? z.string().trim().min(1, t('features.clients.validation.firstName')).max(80)
+        : z.string(),
+    lastName:
+      form.clientType === 'person'
+        ? z.string().trim().min(1, t('features.clients.validation.lastName')).max(80)
+        : z.string(),
+    slug:
+      props.editing || form.clientType === 'person'
+        ? z.string()
+        : z
+            .string()
+            .trim()
+            .min(1, t('features.clients.validation.slug'))
+            .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, t('features.clients.validation.slug')),
+    officialName:
+      form.clientType === 'person'
+        ? z.string()
+        : z.string().trim().min(2, t('features.clients.validation.officialName')).max(200),
     address: z.string().trim().max(1000),
     registrationNumber: z.string().trim().max(200),
     vatNumber: z.string().trim().max(100),
@@ -38,7 +64,11 @@ const reset = () =>
     form,
     props.client
       ? {
+          clientType: props.client.clientType,
+          timezone: props.client.timezone,
           name: props.client.name,
+          firstName: props.client.firstName ?? '',
+          lastName: props.client.lastName ?? '',
           slug: props.client.slug,
           officialName: props.client.officialName,
           address: props.client.address,
@@ -48,7 +78,11 @@ const reset = () =>
           preferredLocale: props.client.preferredLocale
         }
       : {
+          clientType: allowedTypes.value[0] ?? 'organization',
+          timezone: null,
           name: '',
+          firstName: '',
+          lastName: '',
           slug: '',
           officialName: '',
           address: '',
@@ -58,15 +92,43 @@ const reset = () =>
           preferredLocale: 'nl'
         }
   )
-watch(() => props.client, reset, { immediate: true })
+watch(
+  () => props.client,
+  () => {
+    reset()
+    displayNameCustomized.value = Boolean(props.client)
+  },
+  { immediate: true }
+)
+watch(
+  () => [form.firstName, form.lastName],
+  () => {
+    if (form.clientType === 'person' && !displayNameCustomized.value) {
+      form.name = [form.firstName.trim(), form.lastName.trim()].filter(Boolean).join(' ')
+    }
+  }
+)
+watch(
+  () => form.clientType,
+  (type) => {
+    if (!props.editing && type === 'person') {
+      displayNameCustomized.value = false
+      form.name = [form.firstName.trim(), form.lastName.trim()].filter(Boolean).join(' ')
+    }
+  }
+)
 const submit = () =>
   emit('submit', {
     name: form.name.trim(),
-    ...(props.editing ? {} : { slug: form.slug.trim() }),
-    officialName: form.officialName.trim(),
+    ...(form.clientType === 'person' ? { firstName: form.firstName.trim(), lastName: form.lastName.trim() } : {}),
+    ...(props.editing
+      ? {}
+      : { clientType: form.clientType, ...(form.clientType === 'organization' ? { slug: form.slug.trim() } : {}) }),
+    timezone: form.timezone,
+    officialName: form.clientType === 'person' ? form.name.trim() : form.officialName.trim(),
     address: form.address.trim(),
-    registrationNumber: form.registrationNumber.trim() || null,
-    vatNumber: form.vatNumber.trim() || null,
+    registrationNumber: form.clientType === 'person' ? null : form.registrationNumber.trim() || null,
+    vatNumber: form.clientType === 'person' ? null : form.vatNumber.trim() || null,
     invoiceEmail: form.invoiceEmail.trim().toLowerCase() || null,
     preferredLocale: form.preferredLocale
   })
@@ -76,7 +138,17 @@ const submit = () =>
   <UCard class="scroll-mt-24">
     <template #header>
       <div class="flex items-center justify-between gap-3">
-        <h2 class="font-semibold">{{ t(editing ? 'features.clients.editTitle' : 'features.clients.createTitle') }}</h2>
+        <h2 class="font-semibold">
+          {{
+            t(
+              editing
+                ? form.clientType === 'person'
+                  ? 'features.clients.editPersonalProfile'
+                  : 'features.clients.editTitle'
+                : 'features.clients.createTitle'
+            )
+          }}
+        </h2>
         <UButton
           type="button"
           color="neutral"
@@ -87,24 +159,57 @@ const submit = () =>
         />
       </div>
     </template>
-    <UForm :state="form" :schema="schema" class="space-y-4" @submit="submit">
+    <UForm novalidate :state="form" :schema="schema" class="space-y-4" @submit="submit">
+      <UFormField
+        v-if="!editing && allowedTypes.length > 1"
+        name="clientType"
+        :label="t('features.clients.clientType')"
+      >
+        <USelect
+          v-model="form.clientType"
+          :items="allowedTypes.map((value) => ({ value, label: t(`features.clients.types.${value}`) }))"
+          value-key="value"
+        />
+      </UFormField>
       <div class="grid gap-4 md:grid-cols-2">
+        <template v-if="form.clientType === 'person'">
+          <UFormField name="firstName" :label="t('features.clients.firstName')" required>
+            <UInput v-model="form.firstName" autocomplete="given-name" class="w-full" />
+          </UFormField>
+          <UFormField name="lastName" :label="t('features.clients.lastName')" required>
+            <UInput v-model="form.lastName" autocomplete="family-name" class="w-full" />
+          </UFormField>
+        </template>
         <UFormField name="name" :label="t('features.clients.name')" required>
-          <UInput v-model="form.name" class="w-full" />
+          <UInput v-model="form.name" class="w-full" @update:model-value="displayNameCustomized = true" />
         </UFormField>
-        <UFormField name="slug" :label="t('features.clients.slug')" :required="!editing">
+        <UFormField
+          v-if="form.clientType === 'organization'"
+          name="slug"
+          :label="t('features.clients.slug')"
+          :required="!editing"
+        >
           <UInput v-model="form.slug" :disabled="editing" class="w-full" />
         </UFormField>
-        <UFormField name="officialName" :label="t('features.clients.officialName')" required>
+        <UFormField
+          v-if="form.clientType === 'organization'"
+          name="officialName"
+          :label="t('features.clients.officialName')"
+          required
+        >
           <UInput v-model="form.officialName" class="w-full" />
         </UFormField>
         <UFormField name="invoiceEmail" :label="t('features.clients.invoiceEmail')">
           <UInput v-model="form.invoiceEmail" type="email" class="w-full" />
         </UFormField>
-        <UFormField name="registrationNumber" :label="t('features.clients.registrationNumber')">
+        <UFormField
+          v-if="form.clientType === 'organization'"
+          name="registrationNumber"
+          :label="t('features.clients.registrationNumber')"
+        >
           <UInput v-model="form.registrationNumber" class="w-full" />
         </UFormField>
-        <UFormField name="vatNumber" :label="t('features.clients.vatNumber')">
+        <UFormField v-if="form.clientType === 'organization'" name="vatNumber" :label="t('features.clients.vatNumber')">
           <UInput v-model="form.vatNumber" class="w-full" />
         </UFormField>
         <UFormField name="preferredLocale" :label="t('features.clients.locale')">
@@ -118,6 +223,9 @@ const submit = () =>
             class="w-full"
           />
         </UFormField>
+        <UFormField name="timezone" :label="t('timezones.label')">
+          <PortalTimezoneSelect v-model="form.timezone" :inherited-timezone="timezones?.providerTimezone" />
+        </UFormField>
       </div>
       <UFormField name="address" :label="t('features.clients.address')">
         <UTextarea v-model="form.address" class="w-full" />
@@ -126,7 +234,12 @@ const submit = () =>
         <UButton type="button" color="neutral" variant="outline" @click="emit('cancel')">
           {{ t('features.clients.cancel') }}
         </UButton>
-        <UButton type="submit" :loading="busy" icon="i-lucide-save">
+        <UButton
+          type="submit"
+          :icon="editing ? 'i-lucide-save' : 'i-lucide-plus'"
+          class="ml-auto flex min-w-28 justify-center"
+          :loading="busy"
+        >
           {{ t(editing ? 'features.clients.save' : 'features.clients.create') }}
         </UButton>
       </div>

package/app/components/ClientsClientPicker.vue

@@ -6,7 +6,13 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
 const { data: clients, status } = await useFetch<GenericClientDto[]>('/api/clients/selectable', {
   query: computed(() => ({ moduleId: props.moduleId }))
 })
-const items = computed(() => (clients.value ?? []).map((client) => ({ label: client.name, value: client.id })))
+const { t } = useI18n()
+const items = computed(() =>
+  (clients.value ?? []).map((client) => ({
+    label: `${client.name} · ${t(`features.clients.types.${client.clientType}`)}`,
+    value: client.id
+  }))
+)
 </script>
 
 <template>

package/app/components/ClientsPersonalAddress.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { z } from 'zod'
+
+const { t } = useI18n()
+const api = useClients()
+const { data: client, error: loadError } = await useAsyncData('own-personal-address', () => api.personalAddress())
+const state = reactive({ address: client.value?.address ?? '' })
+const schema = computed(() => z.object({ address: z.string().trim().max(1000, t('features.clients.addressTooLong')) }))
+const busy = ref(false)
+const error = ref(false)
+const toast = useToast()
+watch(client, (value) => {
+  state.address = value?.address ?? ''
+})
+async function save() {
+  busy.value = true
+  error.value = false
+  try {
+    client.value = await api.updatePersonalAddress(state.address)
+    toast.add({ title: t('features.clients.addressSaved'), color: 'success' })
+  } catch {
+    error.value = true
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UAlert v-if="loadError" class="mb-8" color="error" :title="t('features.clients.addressLoadFailed')" />
+  <AppCard v-else-if="client" class="mb-8" :title="t('features.clients.personalAddress')">
+    <UForm :schema="schema" :state="state" novalidate class="space-y-4" @submit="save">
+      <UFormField
+        name="address"
+        :label="t('features.clients.address')"
+        :description="t('features.clients.personalAddressDescription')"
+      >
+        <UTextarea
+          v-model="state.address"
+          autocomplete="street-address"
+          class="w-full"
+          :rows="3"
+          :disabled="client.archived"
+        />
+      </UFormField>
+      <UAlert v-if="client.archived" color="warning" :title="t('features.clients.archived')" />
+      <UAlert v-if="error" color="error" :title="t('features.clients.saveFailed')" />
+      <UButton
+        type="submit"
+        icon="i-lucide-save"
+        class="ml-auto flex min-w-28 justify-center"
+        :loading="busy"
+        :disabled="client.archived || state.address === client.address"
+        >{{ t('features.clients.save') }}</UButton
+      >
+    </UForm>
+  </AppCard>
+</template>

package/app/components/ClientsPersonalProfile.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const props = defineProps<{ clientId: string }>()
+const api = useClients()
+const { t } = useI18n()
+const { data: client, refresh } = await useAsyncData(
+  () => `personal-profile-${props.clientId}`,
+  () => api.get(props.clientId),
+  { watch: [() => props.clientId] }
+)
+const busy = ref(false)
+const error = ref('')
+const editing = ref(false)
+const save = async (input: Record<string, unknown>) => {
+  busy.value = true
+  error.value = ''
+  try {
+    await api.update(props.clientId, input)
+    await refresh()
+    editing.value = false
+  } catch {
+    error.value = t('features.clients.saveFailed')
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UAlert v-if="error" color="error" :title="error" />
+    <ClientsClientForm
+      v-if="client && editing"
+      :client="client"
+      editing
+      :busy="busy"
+      @submit="save"
+      @cancel="editing = false"
+    />
+    <UCard v-else-if="client"
+      ><h2 class="font-semibold">{{ t('features.clients.personalAccount') }} · {{ client.name }}</h2>
+      <p>{{ client.invoiceEmail }}</p>
+      <p>{{ client.schedulingTimezone }}</p>
+      <UButton class="mt-4" @click="editing = true">{{ t('features.clients.editPersonalProfile') }}</UButton></UCard
+    >
+  </div>
+</template>