@ossy/booking 1.13.1 → 1.13.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/booking",
   "description": "Booking feature package — services, availability, and appointment management for Ossy consultants",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -13,6 +13,13 @@
   "ossy": {
     "src": "./src"
   },
+  "dependencies": {
+    "@ossy/email": "^1.3.2",
+    "@ossy/event-store": "^1.5.2",
+    "@ossy/observability": "^1.5.2",
+    "@ossy/platform": "^1.36.2",
+    "@ossy/resources": "^1.9.2"
+  },
   "peerDependencies": {
     "@ossy/design-system": ">=1.0.0",
     "@ossy/router-react": ">=1.0.0",
@@ -27,5 +34,5 @@
     "/src",
     "README.md"
   ],
-  "gitHead": "d5b71d16ec56c819401c7a74f95d12b2347ca3c4"
+  "gitHead": "723d9d35aba3cd43700ecd6e72a7e7de96acff65"
 }

package/src/availability-engine.js

@@ -0,0 +1,118 @@
+/**
+ * Returns the local date string "YYYY-MM-DD" for a UTC date in the given timezone.
+ */
+function toLocalDateString(utcDate, timezone) {
+  return new Intl.DateTimeFormat('sv-SE', {
+    timeZone: timezone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(utcDate)
+}
+
+/**
+ * Returns the day of week (0=Sun…6=Sat) for a UTC date in the given timezone.
+ */
+function getLocalDayOfWeek(utcDate, timezone) {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: timezone,
+    weekday: 'short',
+  }).formatToParts(utcDate)
+  const weekday = parts.find(p => p.type === 'weekday')?.value
+  return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].indexOf(weekday)
+}
+
+/**
+ * Converts a local date string ("YYYY-MM-DD") and time string ("HH:MM")
+ * to a UTC Date, respecting the given timezone.
+ */
+function localToUTC(dateStr, timeStr, timezone) {
+  const naive = new Date(`${dateStr}T${timeStr}:00Z`)
+  const utcDate = new Date(naive.toLocaleString('en-US', { timeZone: 'UTC' }))
+  const tzDate = new Date(naive.toLocaleString('en-US', { timeZone: timezone }))
+  const offsetMs = utcDate - tzDate
+  return new Date(naive.getTime() + offsetMs)
+}
+
+/**
+ * Returns a new Date advanced by `days` calendar days (in UTC).
+ */
+function addDays(date, days) {
+  return new Date(date.getTime() + days * 24 * 60 * 60 * 1000)
+}
+
+/**
+ * Computes available booking slots for a consultant.
+ *
+ * @param {object} params
+ * @param {object} params.availability
+ *   - weeklyWindows:    Array of { dayOfWeek, startTime, endTime }
+ *   - sessionDurations: Array of durations in minutes (first one used as default)
+ *   - bufferMinutes:    Buffer added after each confirmed booking (default 0)
+ *   - blackoutDates:    Array of "YYYY-MM-DD" strings to exclude
+ *   - timezone:         IANA timezone string (e.g. "Europe/Stockholm")
+ * @param {Array} params.bookings   Existing bookings [{ startAt, endAt, status }]
+ * @param {Date|string} params.fromDate  Start of range (inclusive)
+ * @param {Date|string} params.toDate    End of range (inclusive)
+ * @param {number} params.duration       Slot duration in minutes
+ * @returns {Array<{ startAt: string, endAt: string, duration: number }>}
+ */
+export function getAvailableSlots({ availability, bookings = [], fromDate, toDate, duration }) {
+  const {
+    weeklyWindows = [],
+    bufferMinutes = 0,
+    blackoutDates = [],
+    timezone = 'UTC',
+  } = availability
+
+  const now = new Date()
+  const from = new Date(fromDate)
+  const to = new Date(toDate)
+
+  // Snap "from" to start of that UTC day so we don't miss the first day's slots
+  const rangeStart = new Date(Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), from.getUTCDate()))
+  const rangeEnd = new Date(Date.UTC(to.getUTCFullYear(), to.getUTCMonth(), to.getUTCDate(), 23, 59, 59))
+
+  const slots = []
+
+  for (let d = new Date(rangeStart); d <= rangeEnd; d = addDays(d, 1)) {
+    const localDateStr = toLocalDateString(d, timezone)
+
+    if (blackoutDates.includes(localDateStr)) continue
+
+    const dayOfWeek = getLocalDayOfWeek(d, timezone)
+    const window = weeklyWindows.find(w => w.dayOfWeek === dayOfWeek)
+    if (!window) continue
+
+    const windowStart = localToUTC(localDateStr, window.startTime, timezone)
+    const windowEnd = localToUTC(localDateStr, window.endTime, timezone)
+    const slotMs = duration * 60 * 1000
+
+    let slotStart = new Date(windowStart)
+
+    while (slotStart.getTime() + slotMs <= windowEnd.getTime()) {
+      const slotEnd = new Date(slotStart.getTime() + slotMs)
+
+      if (slotEnd > now) {
+        const hasOverlap = bookings.some(booking => {
+          if (booking.status === 'cancelled') return false
+          const bStart = new Date(booking.startAt)
+          const bEnd = new Date(new Date(booking.endAt).getTime() + bufferMinutes * 60 * 1000)
+          return slotStart < bEnd && slotEnd > bStart
+        })
+
+        if (!hasOverlap) {
+          slots.push({
+            startAt: slotStart.toISOString(),
+            endAt: slotEnd.toISOString(),
+            duration,
+          })
+        }
+      }
+
+      slotStart = new Date(slotStart.getTime() + slotMs)
+    }
+  }
+
+  return slots.sort((a, b) => (a.startAt > b.startAt ? 1 : -1))
+}

package/src/availability-engine.spec.js

@@ -0,0 +1,291 @@
+import { getAvailableSlots } from './availability-engine.js'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Build a UTC ISO string for a given date at HH:MM in Europe/Stockholm. */
+function sthlm(dateStr, timeStr) {
+  // Use the same localToUTC logic duplicated here to keep tests self-contained
+  const naive = new Date(`${dateStr}T${timeStr}:00Z`)
+  const utcDate = new Date(naive.toLocaleString('en-US', { timeZone: 'UTC' }))
+  const tzDate = new Date(naive.toLocaleString('en-US', { timeZone: 'Europe/Stockholm' }))
+  const offsetMs = utcDate - tzDate
+  return new Date(naive.getTime() + offsetMs).toISOString()
+}
+
+const TZ = 'Europe/Stockholm'
+
+// A Monday in winter time (UTC+1) — 2025-01-13
+const MON = '2025-01-13'
+// dayOfWeek for Monday = 1
+
+const BASE_AVAILABILITY = {
+  weeklyWindows: [
+    { dayOfWeek: 1, startTime: '09:00', endTime: '12:00' }, // Mon 09-12
+  ],
+  bufferMinutes: 0,
+  blackoutDates: [],
+  timezone: TZ,
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('getAvailableSlots', () => {
+
+  describe('basic slot generation', () => {
+    it('returns slots at correct interval within the window', () => {
+      const from = new Date(`${MON}T00:00:00Z`)
+      const to = new Date(`${MON}T23:59:59Z`)
+
+      const slots = getAvailableSlots({
+        availability: BASE_AVAILABILITY,
+        bookings: [],
+        fromDate: from,
+        toDate: to,
+        duration: 60,
+      })
+
+      expect(slots).toHaveLength(3) // 09-10, 10-11, 11-12
+      expect(slots[0].startAt).toBe(sthlm(MON, '09:00'))
+      expect(slots[0].endAt).toBe(sthlm(MON, '10:00'))
+      expect(slots[0].duration).toBe(60)
+      expect(slots[1].startAt).toBe(sthlm(MON, '10:00'))
+      expect(slots[2].startAt).toBe(sthlm(MON, '11:00'))
+    })
+
+    it('respects a 30-minute session duration', () => {
+      const from = new Date(`${MON}T00:00:00Z`)
+      const to = new Date(`${MON}T23:59:59Z`)
+
+      const slots = getAvailableSlots({
+        availability: BASE_AVAILABILITY,
+        bookings: [],
+        fromDate: from,
+        toDate: to,
+        duration: 30,
+      })
+
+      expect(slots).toHaveLength(6) // 09:00, 09:30, 10:00, 10:30, 11:00, 11:30
+    })
+
+    it('returns no slots for days not in weeklyWindows', () => {
+      const TUE = '2025-01-14'
+      const slots = getAvailableSlots({
+        availability: BASE_AVAILABILITY,
+        bookings: [],
+        fromDate: new Date(`${TUE}T00:00:00Z`),
+        toDate: new Date(`${TUE}T23:59:59Z`),
+        duration: 60,
+      })
+      expect(slots).toHaveLength(0)
+    })
+
+    it('returns slots sorted ascending', () => {
+      const MON2 = '2025-01-20'
+      const availability = {
+        weeklyWindows: [
+          { dayOfWeek: 1, startTime: '09:00', endTime: '12:00' }, // Mon
+          { dayOfWeek: 1, startTime: '09:00', endTime: '12:00' }, // same day (dupe window, ok)
+        ],
+        bufferMinutes: 0,
+        blackoutDates: [],
+        timezone: TZ,
+      }
+      const slots = getAvailableSlots({
+        availability: { ...BASE_AVAILABILITY, weeklyWindows: availability.weeklyWindows },
+        bookings: [],
+        fromDate: new Date(`${MON}T00:00:00Z`),
+        toDate: new Date(`${MON2}T23:59:59Z`),
+        duration: 60,
+      })
+      for (let i = 1; i < slots.length; i++) {
+        expect(slots[i].startAt >= slots[i - 1].startAt).toBe(true)
+      }
+    })
+  })
+
+  describe('blackout dates', () => {
+    it('excludes the blackout date', () => {
+      const availability = { ...BASE_AVAILABILITY, blackoutDates: [MON] }
+      const slots = getAvailableSlots({
+        availability,
+        bookings: [],
+        fromDate: new Date(`${MON}T00:00:00Z`),
+        toDate: new Date(`${MON}T23:59:59Z`),
+        duration: 60,
+      })
+      expect(slots).toHaveLength(0)
+    })
+
+    it('still returns slots for non-blackout days in the range', () => {
+      const MON2 = '2025-01-20'
+      const availability = { ...BASE_AVAILABILITY, blackoutDates: [MON] }
+      const slots = getAvailableSlots({
+        availability,
+        bookings: [],
+        fromDate: new Date(`${MON}T00:00:00Z`),
+        toDate: new Date(`${MON2}T23:59:59Z`),
+        duration: 60,
+      })
+      expect(slots.every(s => !s.startAt.startsWith(MON))).toBe(true)
+      expect(slots.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('booking overlap removal', () => {
+    it('removes a slot that is fully occupied by a confirmed booking', () => {
+      const from = new Date(`${MON}T00:00:00Z`)
+      const to = new Date(`${MON}T23:59:59Z`)
+
+      const bookings = [
+        {
+          startAt: sthlm(MON, '09:00'),
+          endAt: sthlm(MON, '10:00'),
+          status: 'confirmed',
+        },
+      ]
+
+      const slots = getAvailableSlots({
+        availability: BASE_AVAILABILITY,
+        bookings,
+        fromDate: from,
+        toDate: to,
+        duration: 60,
+      })
+
+      expect(slots).toHaveLength(2) // 10-11, 11-12 remain
+      expect(slots[0].startAt).toBe(sthlm(MON, '10:00'))
+    })
+
+    it('does NOT remove a slot blocked by a cancelled booking', () => {
+      const from = new Date(`${MON}T00:00:00Z`)
+      const to = new Date(`${MON}T23:59:59Z`)
+
+      const bookings = [
+        {
+          startAt: sthlm(MON, '09:00'),
+          endAt: sthlm(MON, '10:00'),
+          status: 'cancelled',
+        },
+      ]
+
+      const slots = getAvailableSlots({
+        availability: BASE_AVAILABILITY,
+        bookings,
+        fromDate: from,
+        toDate: to,
+        duration: 60,
+      })
+
+      expect(slots).toHaveLength(3)
+    })
+
+    it('removes slot that partially overlaps a confirmed booking', () => {
+      const from = new Date(`${MON}T00:00:00Z`)
+      const to = new Date(`${MON}T23:59:59Z`)
+
+      // Booking starts at 09:30, so the 09:00-10:00 slot overlaps it
+      const bookings = [
+        {
+          startAt: sthlm(MON, '09:30'),
+          endAt: sthlm(MON, '10:30'),
+          status: 'confirmed',
+        },
+      ]
+
+      const slots = getAvailableSlots({
+        availability: BASE_AVAILABILITY,
+        bookings,
+        fromDate: from,
+        toDate: to,
+        duration: 60,
+      })
+
+      // 09:00-10:00 overlaps booking 09:30-10:30
+      // 10:00-11:00 overlaps booking 09:30-10:30
+      // 11:00-12:00 is free
+      expect(slots).toHaveLength(1)
+      expect(slots[0].startAt).toBe(sthlm(MON, '11:00'))
+    })
+  })
+
+  describe('buffer minutes', () => {
+    it('blocks slots within the buffer period after a booking', () => {
+      const from = new Date(`${MON}T00:00:00Z`)
+      const to = new Date(`${MON}T23:59:59Z`)
+
+      const bookings = [
+        {
+          startAt: sthlm(MON, '09:00'),
+          endAt: sthlm(MON, '10:00'),
+          status: 'confirmed',
+        },
+      ]
+
+      // 30-minute buffer means 10:00-10:30 is blocked, so 10:00-11:00 slot is taken
+      const slots = getAvailableSlots({
+        availability: { ...BASE_AVAILABILITY, bufferMinutes: 30 },
+        bookings,
+        fromDate: from,
+        toDate: to,
+        duration: 60,
+      })
+
+      expect(slots).toHaveLength(1)
+      expect(slots[0].startAt).toBe(sthlm(MON, '11:00'))
+    })
+  })
+
+  describe('past slot removal', () => {
+    it('does not return slots that have already ended', () => {
+      // Use a date far in the past
+      const PAST = '2020-01-06' // a Monday
+      const availability = {
+        ...BASE_AVAILABILITY,
+        weeklyWindows: [{ dayOfWeek: 1, startTime: '09:00', endTime: '17:00' }],
+      }
+
+      const slots = getAvailableSlots({
+        availability,
+        bookings: [],
+        fromDate: new Date(`${PAST}T00:00:00Z`),
+        toDate: new Date(`${PAST}T23:59:59Z`),
+        duration: 60,
+      })
+
+      expect(slots).toHaveLength(0)
+    })
+  })
+
+  describe('empty availability', () => {
+    it('returns empty array when no weekly windows defined', () => {
+      const slots = getAvailableSlots({
+        availability: { weeklyWindows: [], bufferMinutes: 0, blackoutDates: [], timezone: TZ },
+        bookings: [],
+        fromDate: new Date(`${MON}T00:00:00Z`),
+        toDate: new Date(`${MON}T23:59:59Z`),
+        duration: 60,
+      })
+      expect(slots).toHaveLength(0)
+    })
+  })
+
+  describe('multi-day range', () => {
+    it('returns slots across multiple matching days', () => {
+      const MON2 = '2025-01-20'
+      const slots = getAvailableSlots({
+        availability: BASE_AVAILABILITY,
+        bookings: [],
+        fromDate: new Date(`${MON}T00:00:00Z`),
+        toDate: new Date(`${MON2}T23:59:59Z`),
+        duration: 60,
+      })
+      // Two Mondays × 3 slots each = 6
+      expect(slots).toHaveLength(6)
+    })
+  })
+
+})

package/src/availability.resource.js

@@ -23,5 +23,11 @@ export default {
       name: 'bufferMinutes',
       type: 'number',
     },
+    {
+      // IANA timezone name, e.g. 'Europe/Stockholm'. Default applied at runtime.
+      name: 'timezone',
+      type: 'text',
+      default: 'Europe/Stockholm',
+    },
   ],
 }

package/src/booking-cancellation.email.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { EmailLayout, EmailText } from '@ossy/email'
+
+export const id = 'booking/cancellation'
+export const subject = 'Din bokning har avbokats'
+
+const SWEDISH_MONTHS = [
+  'januari', 'februari', 'mars', 'april', 'maj', 'juni',
+  'juli', 'augusti', 'september', 'oktober', 'november', 'december',
+]
+
+const SWEDISH_WEEKDAYS = [
+  'söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag',
+]
+
+function formatSwedishDateTime(isoString) {
+  const d = new Date(isoString)
+  const weekday = SWEDISH_WEEKDAYS[d.getDay()]
+  const day = d.getDate()
+  const month = SWEDISH_MONTHS[d.getMonth()]
+  const year = d.getFullYear()
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  return `${weekday} ${day} ${month} ${year} kl. ${hours}:${minutes}`
+}
+
+export default function BookingCancellationEmail({ clientName, startAt, duration }) {
+  const formattedDate = formatSwedishDateTime(startAt)
+
+  return (
+    <EmailLayout>
+      <h1 style={{ color: '#111111', fontSize: 24, fontWeight: 700, margin: '0 0 24px' }}>
+        Din bokning har avbokats
+      </h1>
+
+      <EmailText>Hej {clientName},</EmailText>
+
+      <EmailText>
+        Din bokning den <strong>{formattedDate}</strong> ({duration} minuter) har avbokats.
+      </EmailText>
+
+      <EmailText>
+        Kontakta oss om du vill boka en ny tid.
+      </EmailText>
+    </EmailLayout>
+  )
+}

package/src/booking-confirmation.email.jsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import { EmailLayout, EmailText, EmailButton } from '@ossy/email'
+
+export const id = 'booking/confirmation'
+export const subject = 'Bokningsbekräftelse'
+
+const SWEDISH_MONTHS = [
+  'januari', 'februari', 'mars', 'april', 'maj', 'juni',
+  'juli', 'augusti', 'september', 'oktober', 'november', 'december',
+]
+
+const SWEDISH_WEEKDAYS = [
+  'söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag',
+]
+
+function formatSwedishDateTime(isoString) {
+  const d = new Date(isoString)
+  const weekday = SWEDISH_WEEKDAYS[d.getDay()]
+  const day = d.getDate()
+  const month = SWEDISH_MONTHS[d.getMonth()]
+  const year = d.getFullYear()
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  return `${weekday} ${day} ${month} ${year} kl. ${hours}:${minutes}`
+}
+
+function buildIcsUrl(startAt, duration, title, baseUrl) {
+  const start = new Date(startAt)
+  const end = new Date(start.getTime() + duration * 60 * 1000)
+
+  const fmt = (d) =>
+    d.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '')
+
+  const ics = [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'BEGIN:VEVENT',
+    `DTSTART:${fmt(start)}`,
+    `DTEND:${fmt(end)}`,
+    `SUMMARY:${title}`,
+    'END:VEVENT',
+    'END:VCALENDAR',
+  ].join('\n')
+
+  return `data:text/calendar;charset=utf-8,${encodeURIComponent(ics)}`
+}
+
+export default function BookingConfirmationEmail({
+  clientName,
+  consultantName,
+  startAt,
+  duration,
+  baseUrl = '',
+}) {
+  const formattedDate = formatSwedishDateTime(startAt)
+  const icsUrl = buildIcsUrl(startAt, duration, `Möte med ${consultantName}`, baseUrl)
+
+  return (
+    <EmailLayout>
+      <h1 style={{ color: '#111111', fontSize: 24, fontWeight: 700, margin: '0 0 24px' }}>
+        Din bokning är bekräftad
+      </h1>
+
+      <EmailText>
+        Hej {clientName},
+      </EmailText>
+
+      <EmailText>
+        Din bokning hos <strong>{consultantName}</strong> är nu bekräftad.
+      </EmailText>
+
+      <table cellPadding={0} cellSpacing={0} style={{ marginBottom: 32, width: '100%' }}>
+        <tbody>
+          <tr>
+            <td style={{ paddingBottom: 12 }}>
+              <strong style={{ color: '#111111', fontSize: 14 }}>Datum &amp; tid</strong>
+            </td>
+            <td style={{ paddingBottom: 12, color: '#444444', fontSize: 14 }}>
+              {formattedDate}
+            </td>
+          </tr>
+          <tr>
+            <td style={{ paddingBottom: 12 }}>
+              <strong style={{ color: '#111111', fontSize: 14 }}>Längd</strong>
+            </td>
+            <td style={{ paddingBottom: 12, color: '#444444', fontSize: 14 }}>
+              {duration} minuter
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <EmailText>
+        <a
+          href={icsUrl}
+          style={{ color: '#111111', textDecoration: 'underline', fontSize: 14 }}
+        >
+          Lägg till i kalender (.ics)
+        </a>
+      </EmailText>
+
+      <EmailText style={{ color: '#888888', fontSize: 13 }}>
+        Om du behöver ändra eller avboka din tid, kontakta oss i god tid.
+      </EmailText>
+    </EmailLayout>
+  )
+}

package/src/booking-reminder.email.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { EmailLayout, EmailText } from '@ossy/email'
+
+export const id = 'booking/reminder'
+export const subject = 'Påminnelse: din bokning imorgon'
+
+const SWEDISH_MONTHS = [
+  'januari', 'februari', 'mars', 'april', 'maj', 'juni',
+  'juli', 'augusti', 'september', 'oktober', 'november', 'december',
+]
+
+const SWEDISH_WEEKDAYS = [
+  'söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag',
+]
+
+function formatSwedishDateTime(isoString) {
+  const d = new Date(isoString)
+  const weekday = SWEDISH_WEEKDAYS[d.getDay()]
+  const day = d.getDate()
+  const month = SWEDISH_MONTHS[d.getMonth()]
+  const year = d.getFullYear()
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  return `${weekday} ${day} ${month} ${year} kl. ${hours}:${minutes}`
+}
+
+export default function BookingReminderEmail({ clientName, consultantName, startAt, duration }) {
+  const formattedDate = formatSwedishDateTime(startAt)
+
+  return (
+    <EmailLayout>
+      <h1 style={{ color: '#111111', fontSize: 24, fontWeight: 700, margin: '0 0 24px' }}>
+        Påminnelse om din bokning
+      </h1>
+
+      <EmailText>Hej {clientName},</EmailText>
+
+      <EmailText>
+        Det här är en påminnelse om att du har en bokning hos{' '}
+        <strong>{consultantName ?? 'din konsult'}</strong> imorgon.
+      </EmailText>
+
+      <table cellPadding={0} cellSpacing={0} style={{ marginBottom: 32 }}>
+        <tbody>
+          <tr>
+            <td style={{ paddingRight: 24, paddingBottom: 12 }}>
+              <strong style={{ color: '#111111', fontSize: 14 }}>Datum &amp; tid</strong>
+            </td>
+            <td style={{ paddingBottom: 12, color: '#444444', fontSize: 14 }}>
+              {formattedDate}
+            </td>
+          </tr>
+          <tr>
+            <td style={{ paddingRight: 24 }}>
+              <strong style={{ color: '#111111', fontSize: 14 }}>Längd</strong>
+            </td>
+            <td style={{ color: '#444444', fontSize: 14 }}>
+              {duration} minuter
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <EmailText style={{ color: '#888888', fontSize: 13 }}>
+        Om du behöver avboka, kontakta oss så snart som möjligt.
+      </EmailText>
+    </EmailLayout>
+  )
+}