@seamapi/react 0.16.1 → 0.17.0

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

@@ -84,11 +84,11 @@ This is not recommended because the client session is now bound to this machine
     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',
+}

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

@@ -0,0 +1,43 @@
+import { useNavigation } from 'lib/NavigationProvider.js'
+import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useFakeDevice } from 'lib/seam/devices/use-device.js'
+import { Button } from 'lib/ui/Button.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
+import { TextButton } from 'lib/ui/TextButton.js'
+
+export default function AccessCodeDevice({ deviceId }: { deviceId: string }) {
+  //  TODO: Replace with `useDevice()` once ready
+  const { isLoading, device } = useFakeDevice({ device_id: deviceId })
+  const { show } = useNavigation()
+
+  // TODO: Do we want to return a skeleton loader here instead?
+  if (isLoading || !device || !isLockDevice(device)) {
+    return null
+  }
+
+  const model = getDeviceModel(device)
+
+  return (
+    <div className='seam-access-code-device'>
+      <div className='seam-device-image'>
+        <DeviceImage device={device} />
+      </div>
+      <div className='seam-body'>
+        <div className='seam-model'>{model}</div>
+        <TextButton
+          onClick={() => {
+            show({ name: 'device_detail', deviceId: device.device_id })
+          }}
+        >
+          {t.deviceDetails}
+        </TextButton>
+      </div>
+      <Button>Unlock</Button>
+    </div>
+  )
+}
+
+const t = {
+  deviceDetails: 'Device details',
+}

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -1,32 +1,28 @@
-import {
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableRow,
-  TableTitle,
-} from 'lib/ui/Table/index.js'
-
-import { useAccessCodes } from 'lib/hooks/use-access-codes.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { useNavigation } from 'lib/NavigationProvider.js'
+import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TableBody } from 'lib/ui/Table/TableBody.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableHeader } from 'lib/ui/Table/TableHeader.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
-export function AccessCodeTable(props: {
-  deviceId: string
-  onClickBack?: () => void
-}): JSX.Element {
+export function AccessCodeTable(props: { deviceId: string }): JSX.Element {
   const { accessCodes } = useAccessCodes({
     device_id: props.deviceId,
   })
-  const { onClickBack } = props
+
+  const { show } = useNavigation()
 
   if (!accessCodes) return <>{null}</>
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader onClickBack={onClickBack} />
+      <ContentHeader />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>
@@ -34,7 +30,15 @@ export function AccessCodeTable(props: {
       </TableHeader>
       <TableBody>
         {accessCodes.map((code) => (
-          <TableRow key={code.access_code_id}>
+          <TableRow
+            key={code.access_code_id}
+            onClick={() => {
+              show({
+                name: 'access_code_detail',
+                accessCodeId: code.access_code_id,
+              })
+            }}
+          >
             <TableCell className='seam-icon-cell'>
               <div>
                 <AccessCodeKeyIcon />

package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx

@@ -1,32 +1,28 @@
 import type { AccessCode } from 'seamapi'
 
-import {
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableRow,
-  TableTitle,
-} from 'lib/ui/Table/index.js'
-
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { TableBody } from 'lib/ui/Table/TableBody.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableHeader } from 'lib/ui/Table/TableHeader.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
 export interface AccessCodeTableContentProps {
   accessCodes: AccessCode[]
-  onClickBack?: () => void
 }
 
 export function AccessCodeTableContent(
   props: AccessCodeTableContentProps
 ): JSX.Element {
-  const { accessCodes, onClickBack } = props
+  const { accessCodes } = props
 
   return (
     <div className='seam-access-code-table'>
-      <ContentHeader onClickBack={onClickBack} />
+      <ContentHeader />
       <TableHeader>
         <TableTitle>
           {t.accessCodes} <Caption>({accessCodes.length})</Caption>

package/src/lib/ui/AccessCodeTable/CodeDetails.tsx

@@ -7,7 +7,7 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
   const { accessCode } = props
 
   return (
-    <div className='seam-access-code-details'>
+    <div className='seam-code-details'>
       Unit 110
       <DotDivider />
       <Duration accessCode={accessCode} />

package/src/lib/ui/Button.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames'
+
+interface ButtonProps {
+  children?: string
+  variant?: 'solid' | 'outline' | 'neutral'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+}
+
+export function Button({
+  variant = 'outline',
+  children,
+  size = 'medium',
+  disabled,
+}: ButtonProps) {
+  return (
+    <button
+      className={classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {
+        'seam-btn-disabled': disabled,
+      })}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
+}