@nuxt-customer-portal/planning 0.4.0

package/app/components/PlanningPersonalCalendarSettings.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { providerSettingsSchema } from '../../shared/validation'
+
+const api = usePlanning(),
+  { t } = useI18n()
+const calendars = ref<Array<{ id: string; summary: string; accessRole: string }>>([]),
+  error = ref(''),
+  busy = ref(false),
+  ready = ref(false),
+  googleConnected = ref(false)
+const providerState = reactive({
+  timezone: 'Europe/Amsterdam',
+  graceMinutes: 0,
+  availabilityCalendarTitle: 'Portal availability',
+  busyCalendarIds: [] as string[],
+  writeCalendarId: ''
+})
+const mainCalendar = computed(() => calendars.value.find((calendar) => calendar.id === providerState.writeCalendarId))
+const mainConfigured = computed(() => googleConnected.value && !!providerState.writeCalendarId)
+const writableCalendars = computed(() =>
+  calendars.value.filter((calendar) => ['owner', 'writer'].includes(calendar.accessRole))
+)
+const additionalCalendars = computed(() =>
+  calendars.value.filter((calendar) => calendar.id !== providerState.writeCalendarId)
+)
+const additionalCalendarIds = computed({
+  get: () => providerState.busyCalendarIds.filter((id) => id !== providerState.writeCalendarId),
+  set: (ids: string[]) => {
+    providerState.busyCalendarIds = providerState.writeCalendarId
+      ? [...new Set([providerState.writeCalendarId, ...ids])]
+      : ids
+  }
+})
+
+async function load() {
+  error.value = ''
+  try {
+    const settings = await api.provider()
+    googleConnected.value = settings.connections.some(
+      (connection) => connection.provider === 'google' && connection.healthy
+    )
+    Object.assign(providerState, {
+      timezone: settings.timezone,
+      graceMinutes: settings.graceMinutes,
+      availabilityCalendarTitle: settings.availabilityCalendarTitle,
+      busyCalendarIds: settings.busyCalendarIds,
+      writeCalendarId: settings.writeCalendarId || ''
+    })
+    calendars.value = googleConnected.value ? await api.calendars() : []
+    ready.value = true
+  } catch {
+    error.value = t('planning.loadError')
+  }
+}
+await load()
+
+async function connectMainCalendar() {
+  busy.value = true
+  error.value = ''
+  try {
+    await navigateTo((await api.connect('google')).url, { external: true })
+  } catch {
+    error.value = t('planning.googleConnectionError')
+  } finally {
+    busy.value = false
+  }
+}
+
+async function saveSettings() {
+  busy.value = true
+  error.value = ''
+  try {
+    providerState.busyCalendarIds = [...new Set([providerState.writeCalendarId, ...additionalCalendarIds.value])]
+    await api.saveProvider(providerState)
+    await load()
+  } catch {
+    error.value = t('planning.actionError')
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UAlert v-if="error" :title="error" color="error" variant="outline" />
+
+    <UCard v-if="ready && !googleConnected">
+      <template #header>
+        <div class="flex items-center gap-3">
+          <span class="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <UIcon name="i-lucide-calendar-plus" class="size-5" />
+          </span>
+          <div>
+            <h2 class="font-semibold">{{ t('planning.connectMainCalendar') }}</h2>
+            <p class="text-sm text-muted">{{ t('planning.connectMainCalendarDescription') }}</p>
+          </div>
+        </div>
+      </template>
+      <div class="space-y-4">
+        <UAlert :title="t('planning.mainCalendarPermissions')" icon="i-lucide-shield-check" variant="subtle" />
+        <UButton icon="i-simple-icons-google" :loading="busy" @click="connectMainCalendar">
+          {{ t('planning.connectGoogleCalendar') }}
+        </UButton>
+      </div>
+    </UCard>
+
+    <UForm
+      v-else-if="ready"
+      :state="providerState"
+      :schema="providerSettingsSchema"
+      novalidate
+      class="space-y-6"
+      @submit="saveSettings"
+    >
+      <UCard>
+        <template #header>
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <div class="flex items-center gap-2">
+                <h2 class="font-semibold">{{ t('planning.mainCalendar') }}</h2>
+                <UBadge v-if="mainConfigured" color="success" variant="subtle">{{ t('planning.connected') }}</UBadge>
+              </div>
+              <p class="mt-1 text-sm text-muted">
+                {{
+                  mainConfigured
+                    ? t('planning.mainCalendarFixedDescription')
+                    : t('planning.chooseMainCalendarDescription')
+                }}
+              </p>
+            </div>
+            <UBadge color="primary" variant="outline">{{ t('planning.readWrite') }}</UBadge>
+          </div>
+        </template>
+        <div v-if="mainConfigured" class="flex items-center gap-3 rounded-lg border border-default bg-elevated/40 p-4">
+          <span class="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <UIcon name="i-lucide-calendar-check" class="size-5" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <p class="truncate font-medium">{{ mainCalendar?.summary || providerState.writeCalendarId }}</p>
+            <p class="text-sm text-muted">{{ t('planning.portalCalendarDestination') }}</p>
+          </div>
+          <UIcon name="i-lucide-lock" class="size-4 text-muted" />
+        </div>
+        <UFormField v-else name="writeCalendarId" :label="t('planning.chooseMainCalendar')">
+          <USelectMenu
+            v-model="providerState.writeCalendarId"
+            :items="writableCalendars.map((calendar) => ({ value: calendar.id, label: calendar.summary }))"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+      </UCard>
+
+      <UCard>
+        <template #header>
+          <div class="flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <h2 class="font-semibold">{{ t('planning.additionalCalendars') }}</h2>
+              <p class="mt-1 text-sm text-muted">{{ t('planning.additionalCalendarsDescription') }}</p>
+            </div>
+            <UBadge color="neutral" variant="outline">{{ t('planning.readOnly') }}</UBadge>
+          </div>
+        </template>
+        <UFormField name="busyCalendarIds">
+          <USelectMenu
+            v-model="additionalCalendarIds"
+            :items="additionalCalendars.map((calendar) => ({ value: calendar.id, label: calendar.summary }))"
+            value-key="value"
+            multiple
+            :placeholder="t('planning.addConflictCalendars')"
+            class="w-full"
+          />
+        </UFormField>
+        <p v-if="!additionalCalendars.length" class="mt-3 text-sm text-muted">
+          {{ t('planning.noAdditionalCalendars') }}
+        </p>
+      </UCard>
+
+      <UCard>
+        <template #header
+          ><h2 class="font-semibold">{{ t('planning.schedulingPreferences') }}</h2></template
+        >
+        <div class="grid gap-4 sm:grid-cols-2">
+          <UFormField
+            name="availabilityCalendarTitle"
+            :label="t('planning.availabilityCalendarTitle')"
+            :description="t('planning.availabilityCalendarTitleDescription')"
+            class="sm:col-span-2"
+          >
+            <UInput v-model="providerState.availabilityCalendarTitle" class="w-full" />
+          </UFormField>
+          <UFormField name="timezone" :label="t('planning.timezone')">
+            <USelectMenu
+              v-model="providerState.timezone"
+              :items="Intl.supportedValuesOf('timeZone').map((value) => ({ value, label: value.replaceAll('_', ' ') }))"
+              value-key="value"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField name="graceMinutes" :label="t('planning.graceMinutes')">
+            <UInputNumber v-model="providerState.graceMinutes" :min="0" class="w-full" />
+          </UFormField>
+        </div>
+      </UCard>
+
+      <div class="flex justify-end">
+        <UButton
+          type="submit"
+          :icon="mainConfigured ? 'i-lucide-save' : 'i-lucide-calendar-check'"
+          class="ml-auto flex min-w-28 justify-center"
+          :loading="busy"
+          >{{ mainConfigured ? t('planning.save') : t('planning.setMainCalendar') }}</UButton
+        >
+      </div>
+    </UForm>
+  </div>
+</template>

package/app/components/PlanningPersonalConnection.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { ProviderConfiguration } from '../composables/usePlanning'
+
+const { provider } = defineProps<{ provider: 'google' | 'zoom' }>()
+const emit = defineEmits<{ changed: [] }>()
+const api = usePlanning(),
+  { t } = useI18n(),
+  route = useRoute()
+const settings = ref<ProviderConfiguration>(),
+  busy = ref(false),
+  error = ref(route.query.connection === 'error' ? t('planning.connectionError') : '')
+const connection = computed(() => settings.value?.connections.find((item) => item.provider === provider))
+async function load() {
+  settings.value = await api.provider()
+}
+try {
+  await load()
+} catch {
+  error.value = t('planning.loadError')
+}
+async function connect(provider: string) {
+  busy.value = true
+  try {
+    window.location.assign((await api.connect(provider)).url)
+  } catch {
+    error.value = t('planning.connectionError')
+    busy.value = false
+  }
+}
+async function disconnect(provider: string) {
+  busy.value = true
+  try {
+    await api.disconnect(provider)
+    await load()
+    emit('changed')
+  } catch {
+    error.value = t('planning.actionError')
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UAlert v-if="error" :title="error" color="error" variant="outline" />
+    <UCard
+      ><template #header
+        ><h2 class="font-semibold">{{ provider === 'google' ? 'Google' : 'Zoom' }}</h2></template
+      >
+      <div class="space-y-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="font-semibold capitalize">{{ provider }}</span
+          ><UBadge variant="subtle" :color="connection?.healthy ? 'success' : 'warning'">{{
+            t(connection?.healthy ? 'planning.connected' : 'planning.notConnected')
+          }}</UBadge
+          ><span v-if="connection?.healthy && connection.externalUserLabel" class="text-sm text-muted">{{
+            connection.externalUserLabel
+          }}</span
+          ><UButton :loading="busy" variant="outline" @click="connect(provider)">{{ t('planning.connect') }}</UButton
+          ><UButton v-if="connection" color="neutral" variant="ghost" :disabled="busy" @click="disconnect(provider)">{{
+            t('planning.disconnect')
+          }}</UButton>
+        </div>
+      </div></UCard
+    >
+  </div>
+</template>

package/app/components/PlanningPersonalMeetingSettings.vue

@@ -0,0 +1 @@
+<template><PlanningPersonalConnection provider="zoom" /></template>

package/app/components/PlanningPolicyFields.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { currencyScale } from '@nuxt-customer-portal/products/shared/money'
+import type { PlanningPolicy } from '../../shared/types'
+
+const state = defineModel<PlanningPolicy>({ required: true })
+const overrides = defineModel<Partial<PlanningPolicy>>('overrides')
+const props = withDefaults(defineProps<{ prefix?: string; currencies?: string[]; compact?: boolean }>(), {
+  prefix: '',
+  currencies: () => ['EUR'],
+  compact: false
+})
+const { t } = useI18n()
+const numeric = [
+  'reservationMinutes',
+  'slotIntervalMinutes',
+  'displayIntervalMinutes',
+  'bookingHorizonDays',
+  'minimumNoticeMinutes',
+  'freeChanges',
+  'rescheduleCutoffMinutes',
+  'cancellationCutoffMinutes',
+  'refundPercentage'
+] as const
+const groups = [
+  {
+    key: 'schedule',
+    icon: 'i-lucide-clock-3',
+    fields: ['reservationMinutes', 'slotIntervalMinutes', 'displayIntervalMinutes']
+  },
+  {
+    key: 'bookingWindow',
+    icon: 'i-lucide-calendar-range',
+    fields: ['bookingHorizonDays', 'minimumNoticeMinutes']
+  },
+  {
+    key: 'changes',
+    icon: 'i-lucide-calendar-sync',
+    fields: ['freeChanges', 'rescheduleCutoffMinutes']
+  }
+] as const
+const cancellationFields = ['cancellationEnabled', 'cancellationCutoffMinutes', 'refundPercentage'] as const
+function overrideFields(group: (typeof groups)[number]) {
+  return group.key === 'changes' ? ([...group.fields, 'changeFees'] as const) : group.fields
+}
+function sectionEnabled(fields: readonly (keyof PlanningPolicy)[]) {
+  return overrides.value === undefined || fields.some((key) => Object.hasOwn(overrides.value!, key))
+}
+function toggleSection(fields: readonly (keyof PlanningPolicy)[], enabled: boolean) {
+  if (overrides.value === undefined) {
+    return
+  }
+  const next = { ...overrides.value }
+  for (const key of fields) {
+    if (enabled) {
+      Object.assign(next, { [key]: structuredClone(toRaw(state.value[key])) })
+    } else {
+      Reflect.deleteProperty(next, key)
+    }
+  }
+  overrides.value = next
+}
+if (overrides.value !== undefined) {
+  const next = { ...overrides.value }
+  for (const fields of [...groups.map(overrideFields), cancellationFields]) {
+    if (fields.some((key) => Object.hasOwn(next, key))) {
+      for (const key of fields) {
+        Object.assign(next, { [key]: structuredClone(toRaw(state.value[key])) })
+      }
+    }
+  }
+  overrides.value = next
+}
+function setNumber(key: (typeof numeric)[number], value: number | null | undefined) {
+  state.value = { ...state.value, [key]: value ?? 0 }
+}
+function setFee(currency: string, value: number | null | undefined) {
+  const changeFees = { ...state.value.changeFees }
+  if (value && value > 0) {
+    changeFees[currency] = Math.round(value * currencyScale(currency))
+  } else {
+    Reflect.deleteProperty(changeFees, currency)
+  }
+  state.value = { ...state.value, changeFees }
+}
+</script>
+
+<template>
+  <div class="grid gap-4" :class="{ 'lg:grid-cols-2': !compact }">
+    <section
+      v-for="group in groups"
+      :key="group.key"
+      class="rounded-lg border border-default bg-muted/20"
+      :class="compact ? 'p-3' : 'p-4'"
+    >
+      <div class="flex items-start gap-3" :class="compact ? 'mb-3' : 'mb-4'">
+        <span
+          class="flex shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"
+          :class="compact ? 'size-8' : 'size-9'"
+        >
+          <UIcon :name="group.icon" :class="compact ? 'size-4' : 'size-5'" />
+        </span>
+        <div class="min-w-0 flex-1">
+          <h3 class="font-semibold text-highlighted">{{ t(`planning.policyGroup.${group.key}.title`) }}</h3>
+          <p v-if="!compact" class="mt-0.5 text-sm text-muted">
+            {{ t(`planning.policyGroup.${group.key}.description`) }}
+          </p>
+        </div>
+        <USwitch
+          v-if="overrides !== undefined"
+          :model-value="sectionEnabled(overrideFields(group))"
+          :aria-label="t('planning.overridePolicySection')"
+          @update:model-value="toggleSection(overrideFields(group), $event)"
+        />
+      </div>
+      <div v-if="sectionEnabled(overrideFields(group))" class="grid gap-4" :class="{ 'sm:grid-cols-2': !compact }">
+        <UFormField v-for="key in group.fields" :key="key" :name="prefix + key" :label="t(`planning.${key}`)">
+          <UInputNumber
+            :model-value="state[key]"
+            :class="compact ? 'w-full' : 'w-36 max-w-full'"
+            @update:model-value="setNumber(key, $event)"
+          />
+        </UFormField>
+      </div>
+      <div
+        v-if="sectionEnabled(overrideFields(group)) && group.key === 'changes' && props.currencies.length"
+        class="mt-4 border-t border-default pt-4"
+      >
+        <p class="mb-3 text-sm font-medium text-highlighted">{{ t('planning.changeFees') }}</p>
+        <div class="grid gap-4" :class="{ 'sm:grid-cols-2': !compact }">
+          <UFormField
+            v-for="currency in props.currencies"
+            :key="currency"
+            :name="prefix + 'changeFees.' + currency"
+            :label="t('planning.changeFeeCurrency', { currency })"
+          >
+            <UInputNumber
+              :model-value="(state.changeFees[currency] || 0) / currencyScale(currency)"
+              :min="0"
+              :class="compact ? 'w-full' : 'w-36 max-w-full'"
+              @update:model-value="setFee(currency, $event)"
+            />
+          </UFormField>
+        </div>
+      </div>
+    </section>
+
+    <section class="rounded-lg border border-default bg-muted/20" :class="compact ? 'p-3' : 'p-4'">
+      <div class="flex items-start gap-3" :class="compact ? 'mb-3' : 'mb-4'">
+        <span
+          class="flex shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"
+          :class="compact ? 'size-8' : 'size-9'"
+        >
+          <UIcon name="i-lucide-calendar-x-2" :class="compact ? 'size-4' : 'size-5'" />
+        </span>
+        <div class="min-w-0 flex-1">
+          <h3 class="font-semibold text-highlighted">{{ t('planning.policyGroup.cancellations.title') }}</h3>
+          <p v-if="!compact" class="mt-0.5 text-sm text-muted">
+            {{ t('planning.policyGroup.cancellations.description') }}
+          </p>
+        </div>
+        <USwitch
+          v-if="overrides !== undefined"
+          :model-value="sectionEnabled(cancellationFields)"
+          :aria-label="t('planning.overridePolicySection')"
+          @update:model-value="toggleSection(cancellationFields, $event)"
+        />
+      </div>
+      <UFormField v-if="sectionEnabled(cancellationFields)" :name="prefix + 'cancellationEnabled'" class="mb-4">
+        <div class="flex max-w-md items-center justify-between gap-4 rounded-md border border-default bg-default p-3">
+          <span class="text-sm font-medium">{{ t('planning.cancellationEnabled') }}</span>
+          <USwitch
+            :model-value="state.cancellationEnabled"
+            :aria-label="t('planning.cancellationEnabled')"
+            @update:model-value="state = { ...state, cancellationEnabled: $event }"
+          />
+        </div>
+      </UFormField>
+      <div v-if="sectionEnabled(cancellationFields)" class="grid gap-4" :class="{ 'sm:grid-cols-2': !compact }">
+        <UFormField :name="prefix + 'cancellationCutoffMinutes'" :label="t('planning.cancellationCutoffMinutes')">
+          <UInputNumber
+            :model-value="state.cancellationCutoffMinutes"
+            :class="compact ? 'w-full' : 'w-36 max-w-full'"
+            @update:model-value="setNumber('cancellationCutoffMinutes', $event)"
+          />
+        </UFormField>
+        <UFormField :name="prefix + 'refundPercentage'" :label="t('planning.refundPercentage')">
+          <UInputNumber
+            :model-value="state.refundPercentage"
+            :class="compact ? 'w-full' : 'w-36 max-w-full'"
+            @update:model-value="setNumber('refundPercentage', $event)"
+          />
+        </UFormField>
+      </div>
+    </section>
+  </div>
+</template>

package/app/components/PlanningSettingsMembers.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { ProviderSettings } from '../../shared/types'
+
+const api = usePlanning(),
+  { t } = useI18n(),
+  members = ref<ProviderSettings[]>([]),
+  error = ref(''),
+  busy = ref(false)
+async function load() {
+  try {
+    members.value = await api.providers()
+  } catch {
+    error.value = t('planning.loadError')
+  }
+}
+await load()
+async function toggle(id: string, enabled: boolean) {
+  busy.value = true
+  try {
+    await api.setEnabled(id, enabled)
+    await load()
+  } catch {
+    error.value = t('planning.actionError')
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UAlert v-if="error" variant="outline" color="error" :title="error" /><UCard
+      ><template #header
+        ><h2 class="font-semibold">{{ t('planning.providers') }}</h2></template
+      >
+      <div class="space-y-4">
+        <div v-for="member in members" :key="member.userId" class="flex flex-wrap items-center gap-3">
+          <span class="grow">{{ member.name }}</span
+          ><UBadge :color="member.googleConnected ? 'success' : 'warning'" variant="subtle">Google</UBadge
+          ><UBadge :color="member.zoomConnected ? 'success' : 'warning'" variant="subtle">Zoom</UBadge
+          ><USwitch
+            :model-value="member.enabled"
+            :disabled="busy"
+            :aria-label="t('planning.planning') + ' ' + member.name"
+            @update:model-value="toggle(member.userId, $event)"
+          />
+        </div></div
+    ></UCard>
+  </div>
+</template>

package/app/components/PlanningSettingsPolicy.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { defaultPlanningPolicy, planningPolicySchema } from '@nuxt-customer-portal/products/shared/planning'
+
+const api = usePlanning(),
+  { t } = useI18n(),
+  state = ref(defaultPlanningPolicy()),
+  currencies = ref(['EUR']),
+  error = ref(''),
+  busy = ref(false),
+  ready = ref(false)
+try {
+  const [policy, settings] = await Promise.all([api.policy(), useProducts().settings()])
+  state.value = policy
+  currencies.value = settings.currencies
+  ready.value = true
+} catch {
+  error.value = t('planning.loadError')
+}
+async function save() {
+  busy.value = true
+  try {
+    state.value = await api.savePolicy(state.value)
+  } catch {
+    error.value = t('planning.actionError')
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UAlert v-if="error" variant="outline" color="error" :title="error" /><UCard v-if="ready"
+      ><template #header
+        ><h2 class="font-semibold">{{ t('planning.organizationPolicy') }}</h2></template
+      ><UForm :state="state" :schema="planningPolicySchema" novalidate class="space-y-4" @submit="save"
+        ><PlanningPolicyFields v-model="state" :currencies="currencies" />
+        <div class="flex justify-end">
+          <UButton type="submit" icon="i-lucide-save" class="ml-auto flex min-w-28 justify-center" :loading="busy">{{
+            t('planning.save')
+          }}</UButton>
+        </div></UForm
+      ></UCard
+    >
+  </div>
+</template>