@ossy/booking 1.15.7 → 1.16.0

package/src/public-booking.page.jsx

@@ -1,22 +1,22 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useRouter } from '@ossy/router-react'
-import { View, Title, Text, Button, Input, Textarea, Alert } from '@ossy/design-system'
+import { View, Title, Text, Button, Input, Textarea, Alert, useLocale } from '@ossy/design-system'
 
-const SV_MONTHS = [
-  'Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
-  'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December',
+const MONTH_KEYS = [
+  'publicBooking.month.january', 'publicBooking.month.february', 'publicBooking.month.march',
+  'publicBooking.month.april', 'publicBooking.month.may', 'publicBooking.month.june',
+  'publicBooking.month.july', 'publicBooking.month.august', 'publicBooking.month.september',
+  'publicBooking.month.october', 'publicBooking.month.november', 'publicBooking.month.december',
+]
+const WEEKDAY_SHORT_KEYS = [
+  'publicBooking.weekday.sun', 'publicBooking.weekday.mon', 'publicBooking.weekday.tue',
+  'publicBooking.weekday.wed', 'publicBooking.weekday.thu', 'publicBooking.weekday.fri', 'publicBooking.weekday.sat',
 ]
-const SV_WEEKDAYS_SHORT = ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör']
-const SV_WEEKDAYS_LONG = ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag']
 
-function formatDate (isoString) {
+function formatDate (isoString, t, language) {
   const d = new Date(isoString)
-  const weekday = SV_WEEKDAYS_LONG[d.getDay()]
-  const day = d.getDate()
-  const month = SV_MONTHS[d.getMonth()]
-  const hours = String(d.getHours()).padStart(2, '0')
-  const minutes = String(d.getMinutes()).padStart(2, '0')
-  return `${weekday} ${day} ${month} kl. ${hours}:${minutes}`
+  const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+  return new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' }).format(d)
 }
 
 function formatTime (isoString) {
@@ -24,20 +24,10 @@ function formatTime (isoString) {
   return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
 }
 
-function getTimezoneLabel (isoString) {
-  try {
-    return new Intl.DateTimeFormat('sv-SE', { timeZoneName: 'short', hour: 'numeric' })
-      .formatToParts(new Date(isoString))
-      .find(p => p.type === 'timeZoneName')?.value ?? ''
-  } catch {
-    return ''
-  }
-}
-
-function formatSlotRange (startIso, durationMinutes) {
+function formatSlotRange (startIso, durationMinutes, language) {
   const start = new Date(startIso)
   const end = new Date(start.getTime() + durationMinutes * 60 * 1000)
-  const tz = getTimezoneLabel(startIso)
+  const tz = new Intl.DateTimeFormat(language === 'sv' ? 'sv-SE' : 'en-GB', { timeZoneName: 'short', hour: 'numeric' }).formatToParts(start).find(p => p.type === 'timeZoneName')?.value ?? ''
   const range = `${formatTime(startIso)}–${formatTime(end.toISOString())}`
   return tz ? `${range} (${tz})` : range
 }
@@ -53,21 +43,14 @@ function groupSlotsByDate (slots) {
   return groups
 }
 
-function getDaysInMonth (year, month) {
-  return new Date(year, month + 1, 0).getDate()
-}
+function getDaysInMonth (year, month) { return new Date(year, month + 1, 0).getDate() }
+function getFirstDayOfMonth (year, month) { return (new Date(year, month, 1).getDay() + 6) % 7 }
 
-function getFirstDayOfMonth (year, month) {
-  const raw = new Date(year, month, 1).getDay()
-  return (raw + 6) % 7
-}
-
-function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate, onPrevMonth, onNextMonth }) {
+function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate, onPrevMonth, onNextMonth, t }) {
   const daysInMonth = getDaysInMonth(year, month)
   const firstDayOffset = getFirstDayOfMonth(year, month)
   const today = new Date()
   const todayKey = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
-
   const cells = []
   for (let i = 0; i < firstDayOffset; i++) cells.push(null)
   for (let d = 1; d <= daysInMonth; d++) cells.push(d)
@@ -76,38 +59,25 @@ function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate,
     <View gap="m">
       <View layout="row" justifyContent="space-between" alignItems="center">
         <Button variant="neutral" onClick={onPrevMonth}>‹</Button>
-        <Text weight="medium">{SV_MONTHS[month]} {year}</Text>
+        <Text weight="medium">{t(MONTH_KEYS[month])} {year}</Text>
         <Button variant="neutral" onClick={onNextMonth}>›</Button>
       </View>
-
       <View layout="row" gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
-        {SV_WEEKDAYS_SHORT.map((_, i) => (
-          <Text key={i} variant="small" style={{ textAlign: 'center', opacity: 0.6 }}>
-            {SV_WEEKDAYS_SHORT[(i + 1) % 7]}
-          </Text>
+        {WEEKDAY_SHORT_KEYS.map((key, i) => (
+          <Text key={key} variant="small" style={{ textAlign: 'center', opacity: 0.6 }}>{t(key)}</Text>
         ))}
       </View>
-
       <View gap="xs" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
         {cells.map((day, idx) => {
           if (!day) return <View key={`empty-${idx}`} />
-
           const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
           const hasSlots = !!slotsGrouped[dateKey]
           const isSelected = selectedDate === dateKey
           const isPast = dateKey < todayKey
           const disabled = !hasSlots || isPast
-
           return (
-            <Button
-              key={dateKey}
-              variant={isSelected ? 'tab-active' : hasSlots && !isPast ? 'tab' : 'neutral'}
-              disabled={disabled}
-              onClick={() => !disabled && onSelectDate(dateKey)}
-              style={{ padding: '8px 4px', minWidth: 0 }}
-            >
-              {day}
-            </Button>
+            <Button key={dateKey} variant={isSelected ? 'tab-active' : hasSlots && !isPast ? 'tab' : 'neutral'} disabled={disabled}
+              onClick={() => !disabled && onSelectDate(dateKey)} style={{ padding: '8px 4px', minWidth: 0 }}>{day}</Button>
           )
         })}
       </View>
@@ -115,30 +85,20 @@ function MonthCalendar ({ year, month, slotsGrouped, selectedDate, onSelectDate,
   )
 }
 
-function SlotPicker ({ slots, selectedSlot, onSelectSlot }) {
-  if (!slots?.length) {
-    return <Text color="secondary">Inga tillgängliga tider för valt datum.</Text>
-  }
-
+function SlotPicker ({ slots, selectedSlot, onSelectSlot, t, language }) {
+  if (!slots?.length) return <Text color="secondary">{t('publicBooking.noSlots')}</Text>
   return (
     <View layout="row" gap="s" style={{ flexWrap: 'wrap' }}>
-      {slots.map(slot => {
-        const isSelected = selectedSlot?.startAt === slot.startAt
-        return (
-          <Button
-            key={slot.startAt}
-            variant={isSelected ? 'tab-active' : 'tab'}
-            onClick={() => onSelectSlot(slot)}
-          >
-            {formatSlotRange(slot.startAt, slot.duration)}
-          </Button>
-        )
-      })}
+      {slots.map(slot => (
+        <Button key={slot.startAt} variant={selectedSlot?.startAt === slot.startAt ? 'tab-active' : 'tab'} onClick={() => onSelectSlot(slot)}>
+          {formatSlotRange(slot.startAt, slot.duration, language)}
+        </Button>
+      ))}
     </View>
   )
 }
 
-function BookingForm ({ slot, consultantSlug, onSuccess }) {
+function BookingForm ({ slot, consultantSlug, onSuccess, t }) {
   const [clientName, setClientName] = useState('')
   const [clientEmail, setClientEmail] = useState('')
   const [clientMessage, setClientMessage] = useState('')
@@ -148,93 +108,47 @@ function BookingForm ({ slot, consultantSlug, onSuccess }) {
   const handleSubmit = async (e) => {
     e.preventDefault()
     if (!clientName.trim() || !clientEmail.trim()) return
-
-    setSubmitting(true)
-    setError(null)
-
+    setSubmitting(true); setError(null)
     try {
       const res = await fetch('/actions/booking/create', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          consultantId: consultantSlug,
-          startAt: slot.startAt,
-          duration: slot.duration,
-          clientName: clientName.trim(),
-          clientEmail: clientEmail.trim(),
-          clientMessage: clientMessage.trim(),
-        }),
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ consultantId: consultantSlug, startAt: slot.startAt, duration: slot.duration, clientName: clientName.trim(), clientEmail: clientEmail.trim(), clientMessage: clientMessage.trim() }),
       })
-
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data?.message ?? `Bokning misslyckades (${res.status})`)
-      }
-
-      const booking = await res.json()
-      onSuccess(booking)
-    } catch (err) {
-      setError(err.message)
-    } finally {
-      setSubmitting(false)
-    }
+      if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data?.message ?? t('publicBooking.form.error', { status: res.status })) }
+      await res.json(); onSuccess()
+    } catch (err) { setError(err.message) } finally { setSubmitting(false) }
   }
 
   return (
     <form onSubmit={handleSubmit}>
       <View gap="m">
-      <View gap="xs">
-        <Text weight="medium">Ditt namn</Text>
-        <Input
-          type="text"
-          required
-          value={clientName}
-          onChange={e => setClientName(e.target.value)}
-          placeholder="Anna Svensson"
-        />
-      </View>
-
-      <View gap="xs">
-        <Text weight="medium">E-postadress</Text>
-        <Input
-          type="email"
-          required
-          value={clientEmail}
-          onChange={e => setClientEmail(e.target.value)}
-          placeholder="anna@exempel.se"
-        />
-      </View>
-
-      <View gap="xs">
-        <Text weight="medium">Meddelande (valfritt)</Text>
-        <Textarea
-          value={clientMessage}
-          onChange={e => setClientMessage(e.target.value)}
-          placeholder="Berätta gärna vad du vill prata om..."
-          rows={3}
-        />
-      </View>
-
-      {error && <Alert variant="danger">{error}</Alert>}
-
-      <Button type="submit" variant="primary" disabled={submitting}>
-        {submitting ? 'Skickar…' : 'Skicka förfrågan'}
-      </Button>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.name')}</Text>
+          <Input type="text" required value={clientName} onChange={e => setClientName(e.target.value)} placeholder={t('publicBooking.form.namePlaceholder')} />
+        </View>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.email')}</Text>
+          <Input type="email" required value={clientEmail} onChange={e => setClientEmail(e.target.value)} placeholder={t('publicBooking.form.emailPlaceholder')} />
+        </View>
+        <View gap="xs">
+          <Text weight="medium">{t('publicBooking.form.message')}</Text>
+          <Textarea value={clientMessage} onChange={e => setClientMessage(e.target.value)} placeholder={t('publicBooking.form.messagePlaceholder')} rows={3} />
+        </View>
+        {error && <Alert variant="danger">{error}</Alert>}
+        <Button type="submit" variant="primary" disabled={submitting}>{submitting ? t('publicBooking.form.submitting') : t('publicBooking.form.submit')}</Button>
       </View>
     </form>
   )
 }
 
-function PendingScreen ({ slot }) {
+function PendingScreen ({ slot, t, language }) {
   return (
     <View gap="m" alignItems="center" style={{ textAlign: 'center' }}>
-      <Title variant="secondary">Din förfrågan är skickad!</Title>
-      <Text color="secondary">
-        Konsulten bekräftar inom kort. Du får ett mejl med kalenderinbjudan när bokningen är bekräftad.
-      </Text>
-      <Alert variant="warning" title="Önskad tid">
-        <Text>{formatDate(slot.startAt)}</Text>
-        <Text color="secondary">{slot.duration} minuter</Text>
+      <Title variant="secondary">{t('publicBooking.pending.title')}</Title>
+      <Text color="secondary">{t('publicBooking.pending.body')}</Text>
+      <Alert variant="warning" title={t('publicBooking.pending.requestedTime')}>
+        <Text>{formatDate(slot.startAt, t, language)}</Text>
+        <Text color="secondary">{t('publicBooking.pending.duration', { minutes: slot.duration })}</Text>
       </Alert>
     </View>
   )
@@ -245,134 +159,79 @@ export const metadata = {
   path: { sv: '/boka/:consultantSlug', en: '/book/:consultantSlug' },
 }
 
-export default function PublicBookingPage ({ consultantSlug, ...props }) {
+export default function PublicBookingPage ({ consultantSlug }) {
+  const { t, language } = useLocale()
   const router = useRouter()
   const slug = consultantSlug ?? router?.params?.consultantSlug
-
   const today = new Date()
   const [calYear, setCalYear] = useState(today.getFullYear())
   const [calMonth, setCalMonth] = useState(today.getMonth())
-
   const [slots, setSlots] = useState([])
   const [loadingSlots, setLoadingSlots] = useState(true)
   const [slotsError, setSlotsError] = useState(null)
-
   const [selectedDate, setSelectedDate] = useState(null)
   const [selectedSlot, setSelectedSlot] = useState(null)
   const [step, setStep] = useState('pick-slot')
 
   useEffect(() => {
     if (!slug) return
-
-    setLoadingSlots(true)
-    setSlotsError(null)
-
+    setLoadingSlots(true); setSlotsError(null)
     const from = new Date().toISOString()
     const to = new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString()
-
     fetch(`/actions/booking/get-available-slots?consultantId=${encodeURIComponent(slug)}&from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`)
       .then(r => r.ok ? r.json() : Promise.reject(r))
       .then(data => { setSlots(data); setLoadingSlots(false) })
-      .catch(() => { setSlotsError('Kunde inte ladda tillgängliga tider.'); setLoadingSlots(false) })
-  }, [slug])
+      .catch(() => { setSlotsError(t('publicBooking.slotsError')); setLoadingSlots(false) })
+  }, [slug, t])
 
   const slotsGrouped = groupSlotsByDate(slots)
   const selectedDateSlots = selectedDate ? (slotsGrouped[selectedDate] ?? []) : []
 
-  const handlePrevMonth = () => {
-    if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) }
-    else setCalMonth(m => m - 1)
-  }
-
-  const handleNextMonth = () => {
-    if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) }
-    else setCalMonth(m => m + 1)
-  }
-
   return (
-    <View
-      surface="base"
-      layout="off-center-s"
-      inset="s"
-      style={{ minHeight: '100dvh' }}
-    >
+    <View surface="base" layout="off-center-s" inset="s" style={{ minHeight: '100dvh' }}>
       <View inset="m" roundness="l" surface="primary" slot="content" gap="l" style={{ maxWidth: 720, width: '100%' }}>
         <View gap="xs" style={{ borderBottom: '1px solid var(--separator)', paddingBottom: 'var(--space-m)' }}>
-          <Title variant="secondary">Boka en tid</Title>
-          <Text color="secondary">Välj ett datum och en tid som passar dig.</Text>
+          <Title variant="secondary">{t('publicBooking.title')}</Title>
+          <Text color="secondary">{t('publicBooking.description')}</Text>
         </View>
-
         {step === 'confirmed' && selectedSlot ? (
-          <PendingScreen slot={selectedSlot} />
+          <PendingScreen slot={selectedSlot} t={t} language={language} />
         ) : step === 'fill-form' && selectedSlot ? (
           <View gap="m">
-            <Button variant="link" onClick={() => setStep('pick-slot')}>
-              ← Tillbaka
-            </Button>
-
+            <Button variant="link" onClick={() => setStep('pick-slot')}>{t('publicBooking.back')}</Button>
             <View surface="secondary" roundness="m" inset="s">
-              <Text weight="medium">Vald tid: {formatDate(selectedSlot.startAt)}</Text>
-              <Text color="secondary">({selectedSlot.duration} min)</Text>
+              <Text weight="medium">{t('publicBooking.selectedTime', { datetime: formatDate(selectedSlot.startAt, t, language) })}</Text>
+              <Text color="secondary">{t('publicBooking.durationMin', { minutes: selectedSlot.duration })}</Text>
             </View>
-
-            <BookingForm
-              slot={selectedSlot}
-              consultantSlug={slug}
-              onSuccess={() => setStep('confirmed')}
-            />
+            <BookingForm slot={selectedSlot} consultantSlug={slug} onSuccess={() => setStep('confirmed')} t={t} />
           </View>
         ) : (
           <View gap="l" layout="row" style={{ flexWrap: 'wrap' }}>
             <View style={{ flex: 1, minWidth: 260 }}>
               {loadingSlots ? (
-                <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>
-                  Laddar tider…
-                </Text>
+                <Text color="secondary" style={{ textAlign: 'center', padding: 'var(--space-l)' }}>{t('publicBooking.loadingSlots')}</Text>
               ) : slotsError ? (
                 <Alert variant="danger">{slotsError}</Alert>
               ) : (
-                <MonthCalendar
-                  year={calYear}
-                  month={calMonth}
-                  slotsGrouped={slotsGrouped}
-                  selectedDate={selectedDate}
-                  onSelectDate={(dateKey) => {
-                    setSelectedDate(dateKey)
-                    setSelectedSlot(null)
-                  }}
-                  onPrevMonth={handlePrevMonth}
-                  onNextMonth={handleNextMonth}
-                />
+                <MonthCalendar year={calYear} month={calMonth} slotsGrouped={slotsGrouped} selectedDate={selectedDate}
+                  onSelectDate={(dateKey) => { setSelectedDate(dateKey); setSelectedSlot(null) }}
+                  onPrevMonth={() => { if (calMonth === 0) { setCalMonth(11); setCalYear(y => y - 1) } else setCalMonth(m => m - 1) }}
+                  onNextMonth={() => { if (calMonth === 11) { setCalMonth(0); setCalYear(y => y + 1) } else setCalMonth(m => m + 1) }}
+                  t={t} />
               )}
             </View>
-
             <View gap="m" style={{ flex: 1, minWidth: 260 }}>
               {selectedDate ? (
                 <>
                   <Title variant="tertiary">
-                    {(() => {
-                      const [y, m, d] = selectedDate.split('-').map(Number)
-                      return `${d} ${SV_MONTHS[m - 1]} ${y}`
-                    })()}
+                    {(() => { const [y, m, d] = selectedDate.split('-').map(Number); return `${d} ${t(MONTH_KEYS[m - 1])} ${y}` })()}
                   </Title>
-
-                  <SlotPicker
-                    slots={selectedDateSlots}
-                    selectedSlot={selectedSlot}
-                    onSelectSlot={setSelectedSlot}
-                  />
-
-                  {selectedSlot && (
-                    <Button variant="primary" onClick={() => setStep('fill-form')}>
-                      Fortsätt →
-                    </Button>
-                  )}
+                  <SlotPicker slots={selectedDateSlots} selectedSlot={selectedSlot} onSelectSlot={setSelectedSlot} t={t} language={language} />
+                  {selectedSlot && <Button variant="primary" onClick={() => setStep('fill-form')}>{t('publicBooking.continue')}</Button>}
                 </>
               ) : (
                 <View gap="s" alignItems="center" justifyContent="center" inset="l" style={{ minHeight: 180 }}>
-                  <Text color="secondary" style={{ textAlign: 'center' }}>
-                    Välj ett markerat datum i kalendern
-                  </Text>
+                  <Text color="secondary" style={{ textAlign: 'center' }}>{t('publicBooking.pickDate')}</Text>
                 </View>
               )}
             </View>

package/src/services.page.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Title, Text, Button, Tags } from '@ossy/design-system'
+import { View, Title, Text, Button, Tags, useLocale } from '@ossy/design-system'
 import { Definition } from './Definition.js'
 import { moduleStatusTags } from './moduleStatus.js'
 import { ServiceCard } from './ServiceCard.jsx'
@@ -12,53 +12,54 @@ export const metadata = {
   },
 }
 
-const ServicesPage = () => (
-  <View
-    gap="m"
-    surface="primary"
-    style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
-  >
-    <View inset="s" gap="s">
-      <View layout="row" justifyContent="space-between" alignItems="center" style={{ flexShrink: 0 }}>
-        <View layout="row" gap="s" alignItems="center">
-          <Title>{Definition.title} — Services</Title>
-          {moduleStatusTags(Definition).length > 0 && (
-            <Tags tags={moduleStatusTags(Definition)} size="s" />
-          )}
+const ServicesPage = () => {
+  const { t } = useLocale()
+  return (
+    <View
+      gap="m"
+      surface="primary"
+      style={{ padding: 'var(--space-m) var(--space-l)', height: '100%', overflowY: 'auto' }}
+    >
+      <View inset="s" gap="s">
+        <View layout="row" justifyContent="space-between" alignItems="center" style={{ flexShrink: 0 }}>
+          <View layout="row" gap="s" alignItems="center">
+            <Title>{Definition.title} — {t('booking.services.titleSuffix')}</Title>
+            {moduleStatusTags(Definition).length > 0 && (
+              <Tags tags={moduleStatusTags(Definition)} size="s" />
+            )}
+          </View>
+          <Button variant="primary" size="s">{t('booking.services.addService')}</Button>
         </View>
-        {/* TODO: wire to booking.create-service action */}
-        <Button variant="primary" size="s">Add service</Button>
-      </View>
 
-      <Text style={{ maxWidth: '400px' }}>
-        Define what you offer — name, duration, and price. Clients will see these when booking.
-      </Text>
-    </View>
+        <Text style={{ maxWidth: '400px' }}>
+          {t('booking.services.description')}
+        </Text>
+      </View>
 
-    <View gap="s" inset="s">
-      <Title variant="secondary">Your services</Title>
+      <View gap="s" inset="s">
+        <Title variant="secondary">{t('booking.services.yourServices')}</Title>
 
-      {/* TODO: load services via booking.get-services view */}
-      <View gap="s">
-        <ServiceCard
-          name="Intro call"
-          duration={30}
-          price={0}
-          currency="SEK"
-          description="A free 30-minute intro to see if we're a good fit."
-          active
-        />
-        <ServiceCard
-          name="Strategy session"
-          duration={60}
-          price={150000}
-          currency="SEK"
-          description="Deep-dive strategy session."
-          active
-        />
+        <View gap="s">
+          <ServiceCard
+            name={t('booking.services.example.introCall.name')}
+            duration={30}
+            price={0}
+            currency="SEK"
+            description={t('booking.services.example.introCall.description')}
+            active
+          />
+          <ServiceCard
+            name={t('booking.services.example.strategy.name')}
+            duration={60}
+            price={150000}
+            currency="SEK"
+            description={t('booking.services.example.strategy.description')}
+            active
+          />
+        </View>
       </View>
     </View>
-  </View>
-)
+  )
+}
 
 export default ServicesPage