useGuests

Guests are extra email addresses invited to the booking. The dashboard sets the maximum number of guests per event type; when it is zero, guests are disabled.

import { useGuests } from "@zaptime/core";

const {
  guests, maxGuests, guestsEnabled, canAddGuest,
  addGuest, removeGuest, updateGuest, setMaxGuests,
} = useGuests(calendarId?);

Set max guests

Called during initialization with maxGuests from the remote configuration (null when the feature is off).

setMaxGuests(remote.maxGuests ?? null);

State

guests.value; // string[] of emails, may contain empty strings while typing
maxGuests.value; // number | null
guestsEnabled.value; // maxGuests > 0
canAddGuest.value; // guestsEnabled && guests.length < maxGuests

Mutations

addGuest(); // pushes an empty entry when canAddGuest
addGuest("jane@doe.test");
updateGuest(index, "jane@doe.test");
removeGuest(index);

Submitting

useBookingForm().collectFormValues() already includes non-empty guests under guests. When building the payload yourself:

await book({
  email,
  guests: guests.value.filter((g) => g.trim() !== ""),
});

Example

<div v-if="guestsEnabled">
  <div v-for="(guest, i) in guests" :key="i">
    <input type="email" :value="guest" @input="updateGuest(i, $event.target.value)" />
    <button type="button" @click="removeGuest(i)">×</button>
  </div>
  <button v-if="canAddGuest" type="button" @click="addGuest()">
    {{ config.locale?.confirmationForm?.addGuests }}
  </button>
</div>