@seamapi/react 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",
@@ -44,7 +44,7 @@
     "!src/stories"
   ],
   "scripts": {
-    "start": "concurrently --raw --kill-others npm:examples npm:storybook",
+    "start": "concurrently --raw --kill-others npm:examples:storybook npm:storybook",
     "dev": "npm run start",
     "build": "npm run build:js",
     "prebuild": "del 'index.*' lib",
@@ -54,7 +54,7 @@
     "postbuild:js": "tsc-alias --project tsconfig.build.json",
     "build:css": "sass --load-path=node_modules src/index.scss:index.css",
     "postbuild:css": "sass --style=compressed --load-path=node_modules src/index.scss:index.min.css",
-    "docs:start": "concurrently --raw --kill-others npm:examples npm:storybook:docs",
+    "docs:start": "concurrently --raw --kill-others npm:examples:storybook npm:storybook:docs",
     "docs:build": "storybook build --docs --output-dir docs",
     "predocs:build": "npm run examples:build",
     "typecheck": "tsc",
@@ -71,9 +71,10 @@
     "storybook:docs": "storybook dev --docs --port 6007",
     "storybook:build": "storybook build",
     "prestorybook:build": "vite build examples",
-    "examples": "vite examples --host --clearScreen false",
+    "examples": "vite examples",
     "examples:build": "vite build examples",
     "examples:preview": "vite preview examples",
+    "examples:storybook": "vite examples --host --clearScreen false --mode storybook",
     "preexamples:preview": "npm run examples:build",
     "generate": "svgr --out-dir src/lib/icons -- src/icons",
     "pregenerate": "del src/lib/icons",
@@ -94,7 +95,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^5.19.0-alpha.3",
+    "seamapi": "^5.21.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -148,12 +149,12 @@
     "storybook-addon-designs": "^7.0.0-beta.2",
     "stylelint": "^15.6.0",
     "stylelint-config-standard-scss": "^9.0.0",
-    "the-new-css-reset": "^1.8.4",
     "ts-jest": "^29.1.0",
     "tsc-alias": "^1.8.5",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^5.0.2",
     "vite": "^4.2.1",
-    "vite-tsconfig-paths": "^4.0.8"
+    "vite-tsconfig-paths": "^4.0.8",
+    "zustand-hoist": "^1.0.0"
   }
 }

package/src/icons/lock-locked.svg

@@ -0,0 +1,8 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_221_23114" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
+<rect x="0.460693" y="0.838623" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_221_23114)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.924 3.89346C3.45898 3.89346 1.46069 5.89176 1.46069 8.35678V11.702C1.46069 12.2543 1.90841 12.702 2.46069 12.702C3.01298 12.702 3.46069 12.2543 3.46069 11.702V8.35678C3.46069 6.99633 4.56356 5.89346 5.924 5.89346C7.28445 5.89346 8.38731 6.99633 8.38731 8.35677V12.8385H7.72008C7.02454 12.8385 6.46069 13.4024 6.46069 14.0979V19.5791C6.46069 20.2747 7.02454 20.8385 7.72008 20.8385H17.2013C17.8968 20.8385 18.4607 20.2747 18.4607 19.5791V14.0979C18.4607 13.4024 17.8968 12.8385 17.2013 12.8385H10.3873V8.35677C10.3873 5.89176 8.38902 3.89346 5.924 3.89346Z" fill="#232B3A"/>
+</g>
+</svg>

package/src/icons/lock-unlocked.svg

@@ -0,0 +1,9 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_221_23076" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
+<rect x="0.460693" y="0.838623" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_221_23076)">
+<rect x="6.46069" y="12.8386" width="12" height="8.15217" rx="1.25939" fill="#232B3A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.94067 10.3586C7.94067 7.8623 9.96435 5.83862 12.4607 5.83862C14.957 5.83862 16.9807 7.86229 16.9807 10.3586V16.0506C16.9807 16.6029 16.533 17.0506 15.9807 17.0506C15.4284 17.0506 14.9807 16.6029 14.9807 16.0506V10.3586C14.9807 8.96686 13.8524 7.83862 12.4607 7.83862C11.0689 7.83862 9.94067 8.96687 9.94067 10.3586V13.8902C9.94067 14.4425 9.49296 14.8902 8.94067 14.8902C8.38839 14.8902 7.94067 14.4425 7.94067 13.8902V10.3586Z" fill="#232B3A"/>
+</g>
+</svg>

package/src/lib/NavigationProvider.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+
+interface DeviceTableView {
+  name: 'device_table'
+}
+
+interface DeviceDetailView {
+  name: 'device_detail'
+  deviceId: string
+}
+
+interface AccessCodeTableView {
+  name: 'access_code_table'
+  deviceId: string
+}
+
+interface AccessCodeDetailView {
+  name: 'access_code_detail'
+  accessCodeId: string
+}
+
+export type View =
+  | DeviceTableView
+  | DeviceDetailView
+  | AccessCodeTableView
+  | AccessCodeDetailView
+
+export interface NavigationStackProps {
+  children: JSX.Element
+}
+
+interface NavigationContextProps {
+  views: View[]
+  show: (view: View) => void
+  goBack?: () => void
+}
+
+const NavigationContext = React.createContext<
+  NavigationContextProps | undefined
+>(undefined)
+
+export default function NavigationProvider({ children }: NavigationStackProps) {
+  const [views, setViews] = useState<View[]>([])
+
+  const pushView = (view: View) => {
+    setViews((current) => [view, ...current])
+  }
+
+  const popView = () => {
+    setViews((current) => {
+      if (current.length === 0) {
+        return current
+      }
+
+      const [_showing, ...others] = current
+      return others
+    })
+  }
+
+  const hasViews = views.length > 0
+
+  return (
+    <NavigationContext.Provider
+      value={{
+        views,
+        show: pushView,
+        goBack: hasViews ? popView : undefined,
+      }}
+    >
+      {children}
+    </NavigationContext.Provider>
+  )
+}
+
+export function useNavigation(): NavigationContextProps {
+  const context = React.useContext(NavigationContext)
+  if (context === undefined) {
+    return {
+      show: () => {},
+      goBack: undefined,
+      views: [],
+    }
+  }
+
+  return context
+}

package/src/lib/NavigationView.tsx

@@ -0,0 +1,32 @@
+import { AccessCodeTable, DeviceDetails, DeviceTable } from 'lib/index.js'
+
+import { useNavigation, type View } from 'lib/NavigationProvider.js'
+import AccessCodeDetails from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
+
+interface NavigationViewProps {
+  children: JSX.Element
+}
+
+export function NavigationView({ children: rootView }: NavigationViewProps) {
+  const { views } = useNavigation()
+
+  const firstView = views[0]
+  if (firstView != null) {
+    return <Subview view={firstView} />
+  }
+
+  return rootView
+}
+
+function Subview({ view }: { view: View }) {
+  switch (view.name) {
+    case 'device_detail':
+      return <DeviceDetails deviceId={view.deviceId} />
+    case 'access_code_detail':
+      return <AccessCodeDetails accessCodeId={view.accessCodeId} />
+    case 'device_table':
+      return <DeviceTable />
+    case 'access_code_table':
+      return <AccessCodeTable deviceId={view.deviceId} />
+  }
+}

package/src/lib/icons/LockLocked.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const LockLockedIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={25}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='lock-locked_svg__a'
+      width={25}
+      height={25}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M.461.839h24v24h-24z' />
+    </mask>
+    <g mask='url(#lock-locked_svg__a)'>
+      <path
+        fill='#232B3A'
+        fillRule='evenodd'
+        d='M5.924 3.893a4.463 4.463 0 0 0-4.463 4.464v3.345a1 1 0 1 0 2 0V8.357a2.463 2.463 0 0 1 4.926 0v4.482H7.72a1.26 1.26 0 0 0-1.26 1.259v5.481c0 .696.565 1.26 1.26 1.26h9.481a1.26 1.26 0 0 0 1.26-1.26v-5.481a1.26 1.26 0 0 0-1.26-1.26h-6.814V8.357a4.463 4.463 0 0 0-4.463-4.464Z'
+        clipRule='evenodd'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/LockUnlocked.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react'
+export const LockUnlockedIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={25}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='lock-unlocked_svg__a'
+      width={25}
+      height={25}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M.461.839h24v24h-24z' />
+    </mask>
+    <g fill='#232B3A' mask='url(#lock-unlocked_svg__a)'>
+      <rect width={12} height={8.152} x={6.461} y={12.839} rx={1.259} />
+      <path
+        fillRule='evenodd'
+        d='M7.94 10.359a4.52 4.52 0 0 1 9.04 0v5.692a1 1 0 1 1-2 0v-5.692a2.52 2.52 0 0 0-5.04 0v3.531a1 1 0 1 1-2 0V10.36Z'
+        clipRule='evenodd'
+      />
+    </g>
+  </svg>
+)

package/src/lib/seam/access-codes/use-access-code.ts

@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query'
+import { DateTime } from 'luxon'
+import type { AccessCode, AccessCodeGetRequest } from 'seamapi'
+import { v4 as uuid } from 'uuid'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseAccessCodeParams = AccessCodeGetRequest | string
+export type UseAccessCodeData = AccessCode
+
+export function useAccessCode(params: UseAccessCodeParams) {
+  const { client } = useSeamClient()
+
+  const normalizedParams =
+    typeof params === 'string' ? { access_code_id: params } : params
+
+  return useQuery({
+    enabled: client != null,
+    queryKey: ['access_code', 'get', normalizedParams],
+    queryFn: async () => {
+      if (client == null) return null
+
+      return await client?.accessCodes.get(normalizedParams)
+    },
+  })
+}
+
+export function useFakeAccessCode(_params: UseAccessCodeParams): {
+  isLoading: boolean
+  data: AccessCode
+} {
+  const accessCode: AccessCode = {
+    access_code_id: uuid(),
+    type: 'time_bound',
+    starts_at: DateTime.now().minus({ days: 2 }).toISO() ?? '',
+    ends_at: DateTime.now().plus({ days: 1 }).toISO() ?? '',
+    code: '1234',
+    created_at: DateTime.now().toISO() ?? '',
+    device_id: 'some_device_id',
+    status: 'set',
+    name: 'Guest - Kranz',
+  }
+
+  return { isLoading: false, data: accessCode }
+}

package/src/lib/seam/access-codes/use-access-codes.ts

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+import type { AccessCode, AccessCodesListResponse, SeamError } from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseAccessCodesParams = AccessCodesListRequest | string
+export type UseAccessCodesData = AccessCode[]
+
+export function useAccessCodes(
+  params: UseAccessCodesParams
+): UseSeamQueryResult<'accessCodes', UseAccessCodesData> {
+  const normalizedParams =
+    typeof params === 'string' ? { device_id: params } : params
+
+  const { client } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    AccessCodesListResponse['access_codes'],
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['access_codes', 'list', normalizedParams],
+    queryFn: async () => {
+      if (client == null) return []
+      const accessCodes = await client?.accessCodes.list(normalizedParams)
+      return accessCodes.sort(
+        (a, b) =>
+          new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+      )
+    },
+  })
+
+  return { ...rest, accessCodes: data }
+}
+
+// UPSTREAM: https://github.com/seamapi/javascript/pull/200
+interface AccessCodesListRequest {
+  device_id: string
+}

package/src/lib/seam/devices/types.ts

@@ -0,0 +1,5 @@
+import type { CommonDeviceProperties, Device, LockDevice } from 'seamapi'
+
+export const isLockDevice = (
+  device: Device<CommonDeviceProperties, string> | LockDevice
+): device is LockDevice => 'locked' in device.properties

package/src/lib/seam/devices/use-device.ts

@@ -0,0 +1,79 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  CommonDeviceProperties,
+  Device,
+  DeviceGetRequest,
+  DeviceGetResponse,
+  LockDevice,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseDeviceParams = DeviceGetRequest | string
+export type UseDeviceData = Device<CommonDeviceProperties> | null
+
+export function useDevice(
+  params: DeviceGetRequest
+): UseSeamQueryResult<'device', UseDeviceData> {
+  const normalizedParams =
+    typeof params === 'string' ? { device_id: params } : params
+
+  const { client } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    DeviceGetResponse['device'] | null,
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['devices', 'get', normalizedParams],
+    queryFn: async () => {
+      if (client == null) return null
+      return await client?.devices.get(normalizedParams)
+    },
+  })
+
+  return { ...rest, device: data }
+}
+
+export function useFakeDevice(_params: DeviceGetRequest) {
+  const device: LockDevice = {
+    device_id: 'f9a9ab36-9e14-4390-a88c-b4c78304c6aa',
+    device_type: 'august_lock',
+    capabilities_supported: ['access_code', 'lock'],
+    properties: {
+      locked: true,
+      online: true,
+      door_open: false,
+      manufacturer: 'august',
+      battery_level: 0.9999532347993827,
+      serial_number: '00000004-992d-45a0-bea1-9128fdcd8d12',
+      august_metadata: {
+        lock_id: 'lock-1',
+        house_id: 'house-1',
+        lock_name: 'FRONT DOOR',
+        has_keypad: true,
+        house_name: 'My House',
+      },
+      supported_code_lengths: [6],
+      name: 'FRONT DOOR',
+      battery: {
+        level: 0.9999532347993827,
+        status: 'full',
+      },
+      image_url:
+        'https://connect.getseam.com/assets/images/devices/august_wifi-smart-lock-3rd-gen_silver_front.png',
+    },
+    location: {
+      timezone: 'America/Los_Angeles',
+      location_name: 'My House',
+    },
+    connected_account_id: '6fc0f854-cb5a-461a-af93-e543ce1f730f',
+    workspace_id: 'a9598de8-e627-4d01-b119-61ab7b9e07bd',
+    created_at: '2023-05-08T22:37:24.206Z',
+    errors: [],
+    warnings: [],
+  }
+
+  return { isLoading: false, device }
+}

package/src/lib/seam/devices/use-devices.ts

@@ -1,20 +1,21 @@
-import { useQuery, type UseQueryResult } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import type {
+  CommonDeviceProperties,
+  Device,
   DevicesListRequest,
   DevicesListResponse,
   SeamError,
 } from 'seamapi'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDevicesParams = DevicesListRequest
-export type UseDevicesData = DevicesListResponse['devices']
+export type UseDevicesData = Array<Device<CommonDeviceProperties>>
 
-type Result = UseQueryResult<UseDevicesData, SeamError>
-
-type UseDevicesResult = Omit<Result, 'data'> & { devices: Result['data'] }
-
-export function useDevices(params: DevicesListRequest): UseDevicesResult {
+export function useDevices(
+  params?: UseDevicesParams
+): UseSeamQueryResult<'devices', UseDevicesData> {
   const { client } = useSeamClient()
   const { data, ...rest } = useQuery<DevicesListResponse['devices'], SeamError>(
     {
@@ -22,7 +23,11 @@ export function useDevices(params: DevicesListRequest): UseDevicesResult {
       queryKey: ['devices', 'list', params],
       queryFn: async () => {
         if (client == null) return []
-        return await client?.devices.list(params)
+        const devices = await client?.devices.list(params)
+        return devices.sort(
+          (a, b) =>
+            new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+        )
       },
     }
   )

package/src/lib/seam/index.ts

@@ -1,2 +1,5 @@
-export * from './devices/index.js'
+export * from './access-codes/use-access-code.js'
+export * from './access-codes/use-access-codes.js'
+export * from './devices/use-device.js'
+export * from './devices/use-devices.js'
 export * from './use-seam-client.js'

package/src/lib/seam/use-seam-client.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
 import { Seam } from 'seamapi'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -68,24 +69,26 @@ export function useSeamClient(): {
   return { client: data ?? null, isLoading, isError, error }
 }
 
-/**
- * You'll almost always want to supply a user identifier key, but if you don't
- * we'll automatically pick a fingerprint for this user. The user interface
- * will show warnings when you use a fingerprint because this client session
- * is bound to this machine, and is effectively ephemeral.
- */
 function useUserIdentifierKeyOrFingerprint(
   userIdentifierKey: string | undefined
 ): string {
+  useEffect(() => {
+    if (userIdentifierKey != null) return
+    // eslint-disable-next-line no-console
+    console.warn(`Using an automatically generated fingerprint for the SeamProvider userIdentifierKey!
+The user interface will show warnings when using a fingerprint.
+This is not recommended because the client session is now bound to this machine and is effectively ephemeral.`)
+  }, [userIdentifierKey])
+
   if (userIdentifierKey != null) {
     return userIdentifierKey
   }
 
-  const fingerprintValue =
+  const fingerprint =
     globalThis?.localStorage?.getItem('seam_user_fingerprint') ??
     `fingerprint_${uuidv4()}`
 
-  globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprintValue)
+  globalThis?.localStorage?.setItem('seam_user_fingerprint', fingerprint)
 
-  return fingerprintValue
+  return fingerprint
 }

package/src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx

@@ -0,0 +1,144 @@
+import { DateTime } from 'luxon'
+import type { AccessCode } from 'seamapi'
+
+import { useFakeAccessCode } from 'lib/index.js'
+
+import AccessCodeDevice from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+
+export interface AccessCodeDetailsProps {
+  accessCodeId: string
+}
+
+export default function AccessCodeDetails({
+  accessCodeId,
+}: AccessCodeDetailsProps) {
+  const { isLoading, data: accessCode } = useFakeAccessCode({
+    access_code_id: accessCodeId,
+  })
+
+  if (isLoading || !accessCode) {
+    return null
+  }
+
+  const name = accessCode.name ?? t.fallbackName
+
+  return (
+    <div className='seam-access-code-details'>
+      <ContentHeader title='Access code' />
+      <div className='seam-summary'>
+        <div className='seam-top'>
+          <span className='seam-label'>{t.accessCode}</span>
+          <h5 className='seam-access-code-name'>{name}</h5>
+          <div className='seam-code'>{accessCode.code}</div>
+          <div className='seam-duration'>
+            <Duration accessCode={accessCode} />
+          </div>
+        </div>
+        <AccessCodeDevice deviceId={accessCode.device_id} />
+      </div>
+      <div className='seam-details'>
+        <div className='seam-row'>
+          <div className='seam-heading'>{t.id}:</div>
+          <div className='seam-content'>{accessCode.access_code_id}</div>
+        </div>
+        <div className='seam-row'>
+          <div className='seam-heading'>{t.created}:</div>
+          <div className='seam-content'>
+            {formatDate(accessCode.created_at)}
+          </div>
+        </div>
+
+        <div className='seam-row seam-schedule'>
+          <div className='seam-heading'>{t.timing}:</div>
+          <div className='seam-content'>
+            <ScheduleInfo accessCode={accessCode} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ScheduleInfo({ accessCode }: { accessCode: AccessCode }) {
+  if (accessCode.type === 'ongoing') {
+    return <span>{t.ongoing}</span>
+  }
+  return (
+    <div className='seam-times'>
+      <div>
+        <div className='seam-label'>{t.start}</div>
+        <div className='seam-date'>{formatDate(accessCode.starts_at)}</div>
+        <div className='seam-time'>{formatTime(accessCode.starts_at)}</div>
+      </div>
+      <div>
+        <div className='seam-label'>{t.end}</div>
+        <div className='seam-date'>{formatDate(accessCode.ends_at)}</div>
+        <div className='seam-time'>{formatTime(accessCode.ends_at)}</div>
+      </div>
+    </div>
+  )
+}
+
+function Duration(props: { accessCode: AccessCode }): JSX.Element {
+  const { accessCode } = props
+  if (accessCode.type === 'ongoing') {
+    return (
+      <span>
+        <span className='seam-label'>Active</span> (ongoing)
+      </span>
+    )
+  }
+
+  const hasStarted = new Date(accessCode.starts_at).valueOf() < Date.now()
+  if (hasStarted) {
+    return (
+      <span>
+        <span className='seam-label'>Active</span> until{' '}
+        {formatDurationDate(accessCode.ends_at)} at{' '}
+        {formatTime(accessCode.ends_at)}
+      </span>
+    )
+  }
+
+  return (
+    <span>
+      Starts {formatDurationDate(accessCode.starts_at)} as{' '}
+      {formatTime(accessCode.starts_at)}
+    </span>
+  )
+}
+
+function formatDurationDate(date: string): string {
+  return DateTime.fromISO(date).toLocaleString({
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+function formatTime(date: string): string {
+  return DateTime.fromISO(date).toLocaleString({
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function formatDate(date: string): string {
+  return DateTime.fromISO(date).toLocaleString({
+    weekday: 'short',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+const t = {
+  accessCode: 'Access code',
+  fallbackName: 'Code',
+  id: 'ID',
+  created: 'Created',
+  timing: 'Timing',
+  ongoing: 'Ongoing',
+  start: 'Start',
+  end: 'End',
+}