@nuxt-customer-portal/planning 0.4.0

package/app/components/PlanningTimezoneReadOnlyHover.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+const props = defineProps<{
+  readonly: boolean
+  editable?: boolean
+  userTimezone: string
+  timezone?: string
+  title?: string
+  icon?: string
+  allDay?: boolean
+  customerName?: string
+  email?: string
+  country?: string
+  customerTimezone?: string
+  start?: string
+  end?: string
+}>()
+const emit = defineEmits<{ switchTimezone: []; edit: [] }>()
+const { t, locale } = useI18n()
+const { appointmentRange } = usePlanningTimeDisplay()
+const popupId = useId()
+const activePopup = useState<string | null>('planning.activeTimezoneHover', () => null)
+const isOpen = computed({
+  get: () => activePopup.value === popupId,
+  set: (open: boolean) => {
+    if (open) {
+      activePopup.value = popupId
+    } else if (activePopup.value === popupId) {
+      activePopup.value = null
+    }
+  }
+})
+watch(
+  () => props.readonly,
+  (readonly) => {
+    if (!readonly) {
+      isOpen.value = false
+    }
+  }
+)
+onBeforeUnmount(() => {
+  isOpen.value = false
+})
+const ownTimezoneRange = computed(() =>
+  props.start && props.end ? appointmentRange(props.start, props.end, props.userTimezone) : ''
+)
+const viewedTimezoneRange = computed(() =>
+  props.allDay
+    ? t('planning.allDay')
+    : props.start && props.end && props.timezone
+      ? appointmentRange(props.start, props.end, props.timezone)
+      : ''
+)
+const customerTimezoneRange = computed(() =>
+  props.start && props.end && props.customerTimezone && props.customerTimezone !== props.timezone
+    ? appointmentRange(props.start, props.end, props.customerTimezone)
+    : ''
+)
+const hasPopover = computed(() => props.readonly || Boolean(props.title))
+const timezoneName = (timezone: string) => timezone.replaceAll('_', ' ')
+const countryName = computed(() => {
+  if (!props.country) {
+    return ''
+  }
+  try {
+    return new Intl.DisplayNames([locale.value], { type: 'region' }).of(props.country.toUpperCase()) || props.country
+  } catch {
+    return props.country
+  }
+})
+function edit() {
+  isOpen.value = false
+  emit('edit')
+}
+</script>
+
+<template>
+  <span class="block">
+    <UPopover
+      v-if="hasPopover"
+      v-model:open="isOpen"
+      mode="hover"
+      :open-delay="300"
+      :close-delay="500"
+      :content="{ side: 'top', sideOffset: 14, collisionPadding: 16 }"
+      :ui="{
+        content:
+          'planning-calendar-tooltip w-72 space-y-3 rounded-md border border-accented bg-default p-4 text-default shadow-xl ring-0'
+      }"
+    >
+      <span class="block h-full w-full" tabindex="0"><slot /></span>
+      <template #content>
+        <div class="space-y-3">
+          <div v-if="title || viewedTimezoneRange" class="space-y-2 border-b border-accented pb-3">
+            <p v-if="title" class="flex items-center gap-2 text-sm font-semibold">
+              <UIcon :name="icon || 'i-lucide-calendar-check-2'" class="size-4 shrink-0 text-info" />
+              {{ title }}
+            </p>
+            <div v-if="viewedTimezoneRange">
+              <p class="text-xs text-muted">{{ timezoneName(timezone || userTimezone) }}</p>
+              <p class="text-sm font-semibold">{{ viewedTimezoneRange }}</p>
+            </div>
+          </div>
+          <div
+            v-if="customerName || email || countryName || customerTimezoneRange"
+            class="space-y-2 border-b border-accented pb-3 text-sm"
+          >
+            <p v-if="customerName" class="flex items-center gap-2">
+              <UIcon name="i-lucide-user" class="size-4 shrink-0 text-muted" />
+              <span>{{ customerName }}</span>
+            </p>
+            <p v-if="email" class="flex items-center gap-2">
+              <UIcon name="i-lucide-mail" class="size-4 shrink-0 text-muted" />
+              <span class="break-all">{{ email }}</span>
+            </p>
+            <p v-if="countryName" class="flex items-center gap-2">
+              <UIcon name="i-lucide-map-pin" class="size-4 shrink-0 text-muted" />
+              <span>{{ countryName }}</span>
+            </p>
+            <div v-if="customerTimezoneRange" class="flex items-start gap-2">
+              <UIcon name="i-lucide-clock-3" class="mt-0.5 size-4 shrink-0 text-muted" />
+              <div>
+                <p class="text-xs text-muted">{{ timezoneName(customerTimezone || '') }}</p>
+                <p class="font-medium">{{ customerTimezoneRange }}</p>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="readonly && ownTimezoneRange && userTimezone !== timezone"
+            class="space-y-1 border-b border-accented pb-3"
+          >
+            <p class="text-xs text-muted">{{ timezoneName(userTimezone) }}</p>
+            <p class="text-sm font-semibold">{{ ownTimezoneRange }}</p>
+          </div>
+          <template v-if="readonly">
+            <p class="text-sm">{{ t('planning.timezoneReadOnly', { timezone: timezoneName(userTimezone) }) }}</p>
+            <UButton size="sm" variant="soft" @click="emit('switchTimezone')">{{
+              t('planning.switchToUserTimezone')
+            }}</UButton>
+          </template>
+          <UButton v-else-if="editable" icon="i-lucide-pencil" size="sm" variant="soft" @click="edit">
+            {{ t('planning.editAvailability') }}
+          </UButton>
+        </div>
+      </template>
+    </UPopover>
+    <slot v-else />
+  </span>
+</template>
+
+<style>
+.planning-calendar-tooltip::after {
+  position: absolute;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  content: '';
+  background: var(--ui-bg);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.planning-calendar-tooltip[data-side='top']::after {
+  bottom: -7px;
+  border-right: 1px solid var(--ui-border-accented);
+  border-bottom: 1px solid var(--ui-border-accented);
+}
+
+.planning-calendar-tooltip[data-side='bottom']::after {
+  top: -7px;
+  border-top: 1px solid var(--ui-border-accented);
+  border-left: 1px solid var(--ui-border-accented);
+}
+</style>

package/app/components/PlanningTimezoneSelect.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+const props = defineProps<{ userTimezone: string; disabled?: boolean }>()
+const model = defineModel<string>({ required: true })
+const { t } = useI18n()
+const timezoneIds = Intl.supportedValuesOf('timeZone')
+const recentTimezones = useState<string[]>('planning.recentTimezones', () => [])
+const timezoneStorageKey = 'planning.recentTimezones'
+type TimezoneMenuItem = {
+  type?: 'label' | 'separator'
+  label?: string
+  value?: string
+  favorite?: boolean
+}
+function normalizeTimezones(values: unknown): string[] {
+  return Array.isArray(values)
+    ? [
+        ...new Set(
+          values.filter(
+            (value): value is string =>
+              typeof value === 'string' && timezoneIds.includes(value) && value !== props.userTimezone
+          )
+        )
+      ]
+    : []
+}
+function removeRecentTimezone(timezone: string) {
+  if (timezone === model.value || timezone === props.userTimezone) {
+    return
+  }
+  recentTimezones.value = recentTimezones.value.filter((value) => value !== timezone)
+  persistRecentTimezones()
+}
+function persistRecentTimezones() {
+  try {
+    localStorage.setItem(timezoneStorageKey, JSON.stringify(recentTimezones.value))
+  } catch {
+    /* Preferences remain available when storage is blocked. */
+  }
+}
+function rememberTimezone(timezone: string) {
+  recentTimezones.value = normalizeTimezones(
+    timezone === props.userTimezone ? recentTimezones.value : [timezone, ...recentTimezones.value]
+  )
+  persistRecentTimezones()
+}
+const timezoneOptions = computed<TimezoneMenuItem[]>(() => {
+  const favorites = [props.userTimezone, ...normalizeTimezones(recentTimezones.value).slice(0, 5)]
+  const item = (value: string, favorite = false) => ({ favorite, value, label: value.replaceAll('_', ' ') })
+  return [
+    { type: 'label' as const, label: t('planning.timezoneFavorites') },
+    ...favorites.map((value) => item(value, true)),
+    { type: 'separator' as const },
+    { type: 'label' as const, label: t('planning.allTimezones') },
+    ...timezoneIds.filter((value) => !favorites.includes(value)).map((value) => item(value))
+  ]
+})
+onMounted(() => {
+  try {
+    recentTimezones.value = normalizeTimezones(JSON.parse(localStorage.getItem(timezoneStorageKey) || '[]'))
+  } catch {
+    recentTimezones.value = []
+  }
+})
+watch(
+  () => props.userTimezone,
+  () => rememberTimezone(props.userTimezone)
+)
+const selectedTimezone = computed({
+  get: () => model.value,
+  set: (timezone: string) => {
+    rememberTimezone(timezone)
+    model.value = timezone
+  }
+})
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selectedTimezone"
+    :items="timezoneOptions"
+    value-key="value"
+    :aria-label="t('planning.calendarTimezone')"
+    class="w-56"
+    :disabled="disabled"
+    :ui="{ item: 'group' }"
+  >
+    <template #item-trailing="{ item }"
+      ><UButton
+        v-if="item.value && item.favorite && item.value !== userTimezone && item.value !== model"
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        class="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100"
+        :aria-label="t('planning.removeTimezoneFavorite', { timezone: item.label })"
+        @pointerdown.stop.prevent
+        @click.stop.prevent="removeRecentTimezone(item.value)"
+        @keydown.stop
+    /></template>
+  </USelectMenu>
+</template>

package/app/composables/usePlanning.ts

@@ -0,0 +1,180 @@
+import type { Slot, AvailabilityWindow, PlanningPolicy, ProviderSettings } from '../../shared/types'
+
+export interface HoldResult {
+  holdToken: string
+  expiresAt: string
+  start: string
+  end: string
+  providerName: string
+  amount: number
+  currency: string
+}
+export interface AppointmentDetails {
+  id: string
+  productId: string
+  productSlug: string
+  title: string
+  providerName: string
+  start: string
+  end: string
+  status: 'confirmed' | 'cancelled'
+  customerTimezone: string
+  currency: string
+  meetingProvider: 'none' | 'zoom'
+  meetingUrl: string | null
+  changes: number
+  freeChanges: number
+  changeFee: number | null
+  pendingChangeExpiresAt: string | null
+  staff: boolean
+  canManage: boolean
+  revision: number
+  canReschedule: boolean
+  canCancel: boolean
+  refundAmount: number
+  conflict: boolean
+}
+export interface ProviderConfiguration {
+  enabled: boolean
+  timezone: string
+  graceMinutes: number
+  availabilityCalendarTitle: string
+  busyCalendarIds: string[]
+  writeCalendarId: string | null
+  connections: Array<{
+    provider: string
+    healthy: boolean
+    error: string | null
+    externalUserLabel: string | null
+  }>
+  products: Array<{ id: string; title: string; thumbnailImageId: string | null }>
+}
+export interface AppointmentListItem {
+  id: string
+  title: string
+  start: string
+  end: string
+  status: string
+  meetingProvider?: 'none' | 'zoom'
+  meetingUrl?: string | null
+  providerUserId?: string
+  providerName?: string
+  providerEmail?: string
+  providerTimezone?: string
+  customerTimezone?: string
+  conflict?: boolean
+  effectsError?: string
+  email?: string
+  customerName?: string
+  country?: string
+}
+export interface CalendarBusyPeriod {
+  start: string
+  end: string
+  title?: string
+  allDay?: boolean
+  startDate?: string
+  endDate?: string
+}
+export interface AppointmentFile {
+  id: string
+  name: string
+  content_type: string
+  size: number
+}
+export interface PlanningJobListItem {
+  id: string
+  kind: string
+  attempts: number
+  error: string | null
+  subject: string | null
+  availableAt: string
+  lastEventAt: string
+  completedAt: string | null
+  trigger: string | null
+  entity?:
+    | {
+        type: 'availability'
+        id: string
+        providerName: string
+        providerEmail: string
+        calendarId: string | null
+        date: string
+        endDate: string | null
+        startTime: string
+        endTime: string
+        timezone: string
+        recurring: boolean
+        allProducts: boolean
+        productTitles: readonly string[]
+      }
+    | {
+        type: 'appointment'
+        id: string
+        status: string
+        title: string
+        startAt: string
+        endAt: string
+        timezone: string
+        hostName: string
+        hostEmail: string
+        customerName: string
+        customerEmail: string
+        bookingReference: string
+        meetingId: string | null
+        meetingUrl: string | null
+      }
+}
+export const usePlanning = () => ({
+  available: (id: string, query: Record<string, unknown>, replacesId?: string) =>
+    $fetch<Slot[]>(
+      replacesId ? `/api/planning/appointments/${replacesId}/availability` : `/api/store/planning/${id}/availability`,
+      { query }
+    ),
+  reserve: (body: Record<string, unknown>) => $fetch<HoldResult>('/api/store/planning/holds', { method: 'POST', body }),
+  bookableProducts: () => $fetch<Array<{ slug: string; title: string }>>('/api/planning/products'),
+  provider: () => $fetch<ProviderConfiguration>('/api/planning/provider'),
+  saveProvider: (body: Record<string, unknown>) =>
+    $fetch<ProviderConfiguration>('/api/planning/provider', { method: 'PUT', body }),
+  calendars: () => $fetch<Array<{ id: string; summary: string; accessRole: string }>>('/api/planning/calendars'),
+  calendarBusy: (query: { from: string; to: string }) =>
+    $fetch<CalendarBusyPeriod[]>('/api/planning/calendar-busy', { query }),
+  connect: (provider: string) => $fetch<{ url: string }>(`/api/planning/oauth/${provider}/start`, { method: 'POST' }),
+  disconnect: (provider: string) => $fetch(`/api/planning/oauth/${provider}`, { method: 'DELETE' }),
+  windows: () => $fetch<AvailabilityWindow[]>('/api/planning/availability'),
+  saveWindow: (body: Record<string, unknown>, id?: string) =>
+    $fetch<AvailabilityWindow>(id ? `/api/planning/availability/${id}` : '/api/planning/availability', {
+      method: id ? 'PUT' : 'POST',
+      body
+    }),
+  deleteWindow: (id: string, occurrence?: string) =>
+    $fetch(`/api/planning/availability/${id}`, { method: 'DELETE', query: { occurrence } }),
+  providerAppointments: () => $fetch<AppointmentListItem[]>('/api/planning/provider-appointments'),
+  providers: () => $fetch<ProviderSettings[]>('/api/planning/admin/providers'),
+  setEnabled: (id: string, enabled: boolean) =>
+    $fetch(`/api/planning/admin/providers/${id}`, { method: 'PATCH', body: { enabled } }),
+  policy: () => $fetch<PlanningPolicy>('/api/planning/admin/policy'),
+  savePolicy: (body: PlanningPolicy) => $fetch<PlanningPolicy>('/api/planning/admin/policy', { method: 'PUT', body }),
+  appointments: (query: Record<string, unknown> = {}, signal?: AbortSignal) =>
+    $fetch<{
+      items: AppointmentListItem[]
+      pagination: { total: number; page: number; pageSize: number; pageCount: number }
+      access: { staff: boolean; canManage: boolean }
+      hosts: Array<{ id: string; name: string }>
+    }>('/api/planning/appointments', { query, signal }),
+  staffReschedule: (id: string, body: Record<string, unknown>) =>
+    $fetch(`/api/planning/appointments/${id}/reschedule`, { method: 'PUT', body }),
+  appointment: (id: string) => $fetch<AppointmentDetails>(`/api/planning/appointments/${id}`),
+  appointmentFiles: (id: string) => $fetch<AppointmentFile[]>(`/api/planning/appointments/${id}/files`),
+  abandonChange: (id: string) => $fetch(`/api/planning/appointments/${id}/pending`, { method: 'DELETE' }),
+  cancel: (id: string) => $fetch(`/api/planning/appointments/${id}/cancel`, { method: 'POST' }),
+  adminAppointments: () => $fetch<AppointmentListItem[]>('/api/planning/admin/appointments'),
+  jobs: (query: Record<string, unknown> = {}, signal?: AbortSignal) =>
+    $fetch<{
+      items: PlanningJobListItem[]
+      kinds: string[]
+      pagination: { total: number; page: number; pageSize: number; pageCount: number }
+    }>('/api/planning/admin/jobs', { query, signal }),
+  retry: () => $fetch('/api/planning/admin/retry', { method: 'POST' }),
+  retryJob: (id: string) => $fetch(`/api/planning/admin/jobs/${encodeURIComponent(id)}/retry`, { method: 'POST' })
+})

package/app/composables/usePlanningDashboard.ts

@@ -0,0 +1,4 @@
+import type { PlanningDashboardDto } from '../../shared/types'
+
+export const usePlanningDashboard = () =>
+  useAsyncData('planning-dashboard', () => $fetch<PlanningDashboardDto>('/api/planning/dashboard'))

package/app/composables/usePlanningTimeDisplay.ts

@@ -0,0 +1,15 @@
+import { formatAppointmentRange, formatAppointmentTime } from '@nuxt-customer-portal/core/shared/appointment-time'
+
+export function usePlanningTimeDisplay() {
+  const { t } = useI18n()
+  const browserLocale = ref<string[]>()
+  onMounted(() => {
+    browserLocale.value = [...navigator.languages]
+  })
+  const options = (timeZone: string) => ({ locale: browserLocale.value, timeZone, midnight: t('planning.midnight') })
+  return {
+    appointmentTime: (value: string | Date, timeZone: string) => formatAppointmentTime(value, options(timeZone)),
+    appointmentRange: (start: string | Date, end: string | Date, timeZone: string) =>
+      formatAppointmentRange(start, end, options(timeZone))
+  }
+}

package/app/pages/admin/planning.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const { t } = useI18n(),
+  route = useRoute()
+const items = computed(() => [
+  { label: t('planning.providers'), value: 'members', slot: 'members' },
+  { label: t('planning.bookingPolicyTab'), value: 'policy', slot: 'policy' },
+  { label: t('planning.synchronizationTab'), value: 'synchronization', slot: 'synchronization' }
+])
+const tab = computed({
+  get: () =>
+    ['members', 'policy', 'synchronization'].includes(String(route.query.tab)) ? String(route.query.tab) : 'members',
+  set: (value: string) => {
+    void navigateTo({ query: { ...route.query, tab: value === 'members' ? undefined : value } }, { replace: true })
+  }
+})
+</script>
+
+<template>
+  <div class="h-full min-h-0 overflow-y-auto">
+    <UContainer class="space-y-6 py-8"
+      ><div class="flex flex-wrap items-center justify-between gap-3">
+        <h1 class="text-2xl font-bold">{{ t('planning.settings') }}</h1>
+      </div>
+      <UTabs
+        v-model="tab"
+        :items="items"
+        variant="link"
+        :unmount-on-hide="true"
+        :ui="{ list: 'justify-start', trigger: 'grow-0' }"
+        class="w-full"
+        ><template #members><PlanningSettingsMembers class="pt-4" /></template
+        ><template #policy><PlanningSettingsPolicy class="pt-4" /></template
+        ><template #synchronization><PlanningSettingsSynchronization class="pt-4" /></template></UTabs
+    ></UContainer>
+  </div>
+</template>

package/app/pages/appointments/[id].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute(),
+  { t } = useI18n()
+</script>
+
+<template>
+  <div class="h-full min-h-0 overflow-y-auto">
+    <UContainer class="max-w-3xl space-y-5 py-8"
+      ><UButton to="/appointments" variant="link">{{ t('planning.back') }}</UButton
+      ><PlanningAppointmentDetails :id="String(route.params.id)" :key="String(route.params.id)"
+    /></UContainer>
+  </div>
+</template>