@seamapi/react 1.41.0 → 1.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -122,7 +122,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^8.1.0",
+    "seamapi": "^8.2.4",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -133,7 +133,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.2",
     "@rxfork/r2wc-react-to-web-component": "^2.2.3",
-    "@seamapi/fake-seam-connect": "^1.0.0",
+    "@seamapi/fake-seam-connect": "^1.3.1",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",

package/src/lib/dates.ts

@@ -128,3 +128,13 @@ export const createIsoDate = (date: string, timezone: string): string => {
   const offset = getTimezoneOffset(timezone)
   return `${date}.000${offset}`
 }
+
+/**
+ * Takes a ISO datetime string (2023-07-20T00:00:00.000-07:00) and returns
+ * the IANA timezone (America/Los_angeles).
+ *
+ * @param date
+ * @returns string
+ */
+export const getTimezoneFromIsoDate = (date: string): string | null =>
+  DateTime.fromISO(date).zoneName

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

@@ -0,0 +1,46 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  AccessCodeUpdateRequest,
+  AccessCodeUpdateResponse,
+  ActionAttempt,
+  SeamError,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseUpdateAccessCodeParams = never
+export type UseUpdateAccessCodeData = ActionAttempt<'UPDATE_ACCESS_CODE'>
+export type UseUpdateAccessCodeMutationParams = AccessCodeUpdateRequest
+
+export function useUpdateAccessCode(): UseMutationResult<
+  UseUpdateAccessCodeData,
+  SeamError,
+  UseUpdateAccessCodeMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    AccessCodeUpdateResponse['action_attempt'],
+    SeamError,
+    AccessCodeUpdateRequest
+  >({
+    mutationFn: async (mutationParams: UseUpdateAccessCodeMutationParams) => {
+      if (client === null) throw new NullSeamClientError()
+
+      return await client.accessCodes.update(mutationParams)
+    },
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries([
+        'access_codes',
+        'get',
+        { access_code_id: variables.access_code_id },
+      ])
+      void queryClient.invalidateQueries(['access_codes', 'list'])
+    },
+  })
+}

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts

@@ -8,6 +8,7 @@ export const props: ElementProps<AccessCodeDetailsProps> = {
   accessCodeId: 'string',
   disableLockUnlock: 'boolean',
   onBack: 'object',
+  onEdit: 'object',
   className: 'string',
 }
 

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx

@@ -12,20 +12,25 @@ import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
 import { AccessCodeDevice } from 'lib/seam/components/AccessCodeDetails/AccessCodeDevice.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
+import { Button } from 'lib/ui/Button.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
+const disableEditAccessCode = false
+
 export interface AccessCodeDetailsProps {
   accessCodeId: string
   disableLockUnlock?: boolean
   onBack?: () => void
+  onEdit: () => void
   className?: string
 }
 
 export function AccessCodeDetails({
   accessCodeId,
-  onBack,
   disableLockUnlock = false,
+  onBack,
+  onEdit,
   className,
 }: AccessCodeDetailsProps): JSX.Element | null {
   const { accessCode } = useAccessCode(accessCodeId)
@@ -87,6 +92,13 @@ export function AccessCodeDetails({
           onSelectDevice={selectDevice}
         />
       </div>
+      {!disableEditAccessCode && (
+        <div className='seam-actions'>
+          <Button size='small' onClick={onEdit}>
+            {t.editCode}
+          </Button>
+        </div>
+      )}
       <div className='seam-details'>
         <div className='seam-row'>
           <div className='seam-heading'>{t.id}:</div>
@@ -211,4 +223,5 @@ const t = {
   ongoing: 'Ongoing',
   start: 'Start',
   end: 'End',
+  editCode: 'Edit code',
 }

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -12,12 +12,13 @@ import {
   type UseAccessCodesData,
 } from 'lib/seam/access-codes/use-access-codes.js'
 import { AccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
-import { AccessCodeForm } from 'lib/seam/components/AccessCodeForm/AccessCodeForm.js'
 import {
   type AccessCodeFilter,
   AccessCodeHealthBar,
 } from 'lib/seam/components/AccessCodeTable/AccessCodeHealthBar.js'
 import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
+import { CreateAccessCodeForm } from 'lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.js'
+import { EditAccessCodeForm } from 'lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.js'
 import { copyToClipboard } from 'lib/ui/clipboard.js'
 import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
@@ -35,6 +36,7 @@ import { Title } from 'lib/ui/typography/Title.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
 const disableCreateAccessCode = true
+const disableEditAccessCode = false
 
 export interface AccessCodeTableProps {
   deviceId: string
@@ -91,12 +93,15 @@ export function AccessCodeTable({
     device_id: deviceId,
   })
 
-  const [selectedAccessCodeId, setSelectedAccessCodeId] = useState<
+  const [selectedViewAccessCodeId, setSelectedViewAccessCodeId] = useState<
     string | null
   >(null)
 
   const [searchInputValue, setSearchInputValue] = useState('')
-  const [accessCodeFormVisible, toggleAddAccessCodeForm] = useToggle()
+  const [addAccessCodeFormVisible, toggleAddAccessCodeForm] = useToggle()
+  const [selectedEditAccessCodeId, setSelectedEditAccessCodeId] = useState<
+    string | null
+  >(null)
 
   const filteredAccessCodes = useMemo(
     () =>
@@ -110,31 +115,53 @@ export function AccessCodeTable({
     (accessCodeId: string): void => {
       onAccessCodeClick(accessCodeId)
       if (preventDefaultOnAccessCodeClick) return
-      setSelectedAccessCodeId(accessCodeId)
+      setSelectedViewAccessCodeId(accessCodeId)
     },
     [
       onAccessCodeClick,
       preventDefaultOnAccessCodeClick,
-      setSelectedAccessCodeId,
+      setSelectedViewAccessCodeId,
     ]
   )
 
-  if (selectedAccessCodeId != null) {
+  const handleAccessCodeEdit = useCallback(
+    (accessCodeId: string): void => {
+      setSelectedEditAccessCodeId(accessCodeId)
+    },
+    [setSelectedEditAccessCodeId]
+  )
+
+  if (selectedEditAccessCodeId != null) {
+    return (
+      <EditAccessCodeForm
+        accessCodeId={selectedEditAccessCodeId}
+        className={className}
+        onBack={() => {
+          setSelectedEditAccessCodeId(null)
+        }}
+      />
+    )
+  }
+
+  if (selectedViewAccessCodeId != null) {
     return (
       <AccessCodeDetails
         className={className}
-        accessCodeId={selectedAccessCodeId}
+        accessCodeId={selectedViewAccessCodeId}
         onBack={() => {
-          setSelectedAccessCodeId(null)
+          setSelectedViewAccessCodeId(null)
         }}
         disableLockUnlock={disableLockUnlock}
+        onEdit={() => {
+          setSelectedEditAccessCodeId(selectedViewAccessCodeId)
+        }}
       />
     )
   }
 
-  if (accessCodeFormVisible) {
+  if (addAccessCodeFormVisible) {
     return (
-      <AccessCodeForm
+      <CreateAccessCodeForm
         className={className}
         onBack={toggleAddAccessCodeForm}
         deviceId={deviceId}
@@ -176,6 +203,8 @@ export function AccessCodeTable({
         <Content
           accessCodes={filteredAccessCodes}
           onAccessCodeClick={handleAccessCodeClick}
+          onAccessCodeEdit={handleAccessCodeEdit}
+          disableEditAccessCode={disableEditAccessCode}
         />
       </TableBody>
     </div>
@@ -185,8 +214,15 @@ export function AccessCodeTable({
 function Content(props: {
   accessCodes: Array<UseAccessCodesData[number]>
   onAccessCodeClick: (accessCodeId: string) => void
+  onAccessCodeEdit: (accessCodeId: string) => void
+  disableEditAccessCode: boolean
 }): JSX.Element {
-  const { accessCodes, onAccessCodeClick } = props
+  const {
+    accessCodes,
+    onAccessCodeClick,
+    onAccessCodeEdit,
+    disableEditAccessCode,
+  } = props
   const [filter, setFilter] = useState<AccessCodeFilter | null>(null)
 
   const filteredAccessCodes = useMemo(() => {
@@ -221,6 +257,10 @@ function Content(props: {
           onClick={() => {
             onAccessCodeClick(accessCode.access_code_id)
           }}
+          disableEditAccessCode={disableEditAccessCode}
+          onEdit={() => {
+            onAccessCodeEdit(accessCode.access_code_id)
+          }}
         />
       ))}
     </>
@@ -230,8 +270,10 @@ function Content(props: {
 function AccessCodeRow(props: {
   accessCode: UseAccessCodesData[number]
   onClick: () => void
+  onEdit: () => void
+  disableEditAccessCode: boolean
 }): JSX.Element {
-  const { onClick, accessCode } = props
+  const { onClick, accessCode, onEdit, disableEditAccessCode } = props
 
   const errorCount = accessCode.errors.length
   const warningCount = accessCode.warnings.length
@@ -277,13 +319,19 @@ function AccessCodeRow(props: {
               void copyToClipboard(accessCode.code ?? '')
             }}
           >
-            <div className='menu-item-copy'>
+            <div className='seam-menu-item-copy'>
               <span>
                 {t.copyCode} - {accessCode.code}
               </span>
               <CopyIcon />
             </div>
           </MenuItem>
+          {!disableEditAccessCode && (
+            <>
+              <div className='seam-divider' />
+              <MenuItem onClick={onEdit}>{t.editCode}</MenuItem>
+            </>
+          )}
         </MoreActionsMenu>
       </TableCell>
     </TableRow>
@@ -296,4 +344,5 @@ const t = {
   noAccessCodesMessage: 'Sorry, no access codes were found',
   codeIssue: 'code issue',
   codeIssues: 'code issues',
+  editCode: 'Edit code',
 }

package/src/lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.element.ts

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+import type { CreateAccessCodeFormProps } from 'lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.js'
+
+export const name = 'seam-create-access-code-form'
+
+export const props: ElementProps<CreateAccessCodeFormProps> = {
+  className: 'string',
+  onBack: 'object',
+  deviceId: 'string',
+}
+
+export { CreateAccessCodeForm as Component } from './CreateAccessCodeForm.js'

package/src/lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.tsx

@@ -0,0 +1,94 @@
+import { createIsoDate } from 'lib/dates.js'
+import { useCreateAccessCode } from 'lib/seam/access-codes/use-create-access-code.js'
+import { useDevice, type UseDeviceData } from 'lib/seam/devices/use-device.js'
+import {
+  AccessCodeForm,
+  type AccessCodeFormSubmitData,
+} from 'lib/ui/AccessCodeForm/AccessCodeForm.js'
+
+export interface CreateAccessCodeFormProps {
+  className?: string
+  onBack?: () => void
+  deviceId: string
+}
+
+export function CreateAccessCodeForm({
+  className,
+  onBack,
+  deviceId,
+}: CreateAccessCodeFormProps): JSX.Element | null {
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
+  if (device == null) {
+    return null
+  }
+
+  return <Content device={device} className={className} onBack={onBack} />
+}
+
+function Content({
+  device,
+  className,
+  onBack,
+}: Omit<CreateAccessCodeFormProps, 'deviceId'> & {
+  device: NonNullable<UseDeviceData>
+}): JSX.Element {
+  const { submit, isSubmitting } = useSubmitCreateAccessCode(onBack)
+
+  return (
+    <AccessCodeForm
+      device={device}
+      className={className}
+      onBack={onBack}
+      onSubmit={submit}
+      isSubmitting={isSubmitting}
+    />
+  )
+}
+
+function useSubmitCreateAccessCode(onSuccess?: () => void): {
+  submit: (data: AccessCodeFormSubmitData) => void
+  isSubmitting: boolean
+} {
+  const { mutate, isLoading: isSubmitting } = useCreateAccessCode()
+  const submit = (data: AccessCodeFormSubmitData): void => {
+    const { name, type, device, startDate, endDate, timezone } = data
+    if (name === '') {
+      return
+    }
+
+    if (isSubmitting) {
+      return
+    }
+
+    if (type === 'time_bound') {
+      mutate(
+        {
+          name,
+          device_id: device.device_id,
+          starts_at: createIsoDate(startDate, timezone),
+          ends_at: createIsoDate(endDate, timezone),
+        },
+        {
+          onSuccess,
+        }
+      )
+
+      return
+    }
+
+    mutate(
+      {
+        name,
+        device_id: device.device_id,
+      },
+      {
+        onSuccess,
+      }
+    )
+  }
+
+  return { submit, isSubmitting }
+}

package/src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.element.ts

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+import type { EditAccessCodeFormProps } from 'lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.js'
+
+export const name = 'seam-create-access-code-form'
+
+export const props: ElementProps<EditAccessCodeFormProps> = {
+  className: 'string',
+  onBack: 'object',
+  accessCodeId: 'string',
+}
+
+export { EditAccessCodeForm as Component } from './EditAccessCodeForm.js'

package/src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.tsx

@@ -0,0 +1,117 @@
+import { createIsoDate } from 'lib/dates.js'
+import {
+  useAccessCode,
+  type UseAccessCodeData,
+} from 'lib/seam/access-codes/use-access-code.js'
+import { useUpdateAccessCode } from 'lib/seam/access-codes/use-update-access-code.js'
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import {
+  AccessCodeForm,
+  type AccessCodeFormSubmitData,
+} from 'lib/ui/AccessCodeForm/AccessCodeForm.js'
+
+export interface EditAccessCodeFormProps {
+  className?: string
+  onBack?: () => void
+  accessCodeId: string
+}
+
+export function EditAccessCodeForm({
+  accessCodeId,
+  onBack,
+  className,
+}: EditAccessCodeFormProps): JSX.Element | null {
+  const { accessCode } = useAccessCode({
+    access_code_id: accessCodeId,
+  })
+
+  if (accessCode == null) {
+    return null
+  }
+
+  return (
+    <Content accessCode={accessCode} className={className} onBack={onBack} />
+  )
+}
+
+function Content({
+  className,
+  onBack,
+  accessCode,
+}: Omit<EditAccessCodeFormProps, 'accessCodeId'> & {
+  accessCode: NonNullable<UseAccessCodeData>
+}): JSX.Element | null {
+  const { device } = useDevice({
+    device_id: accessCode.device_id,
+  })
+
+  const { submit, isSubmitting } = useSubmitEditAccessCode(accessCode, onBack)
+
+  if (device == null) {
+    return null
+  }
+
+  return (
+    <AccessCodeForm
+      onBack={onBack}
+      className={className}
+      accessCode={accessCode}
+      device={device}
+      onSubmit={submit}
+      isSubmitting={isSubmitting}
+    />
+  )
+}
+
+function useSubmitEditAccessCode(
+  accessCode: NonNullable<UseAccessCodeData>,
+  onSuccess?: () => void
+): {
+  submit: (data: AccessCodeFormSubmitData) => void
+  isSubmitting: boolean
+} {
+  const { mutate, isLoading: isSubmitting } = useUpdateAccessCode()
+
+  const submit = (data: AccessCodeFormSubmitData): void => {
+    const { name, type, device, startDate, endDate, timezone } = data
+    if (name === '') {
+      return
+    }
+
+    if (isSubmitting) {
+      return
+    }
+
+    if (type === 'time_bound') {
+      mutate(
+        {
+          access_code_id: accessCode.access_code_id,
+          name,
+          device_id: device.device_id,
+          type: 'time_bound',
+          starts_at: createIsoDate(startDate, timezone),
+          ends_at: createIsoDate(endDate, timezone),
+        },
+        {
+          onSuccess,
+        }
+      )
+
+      return
+    }
+
+    mutate(
+      {
+        access_code_id: accessCode.access_code_id,
+        name,
+        type: 'ongoing',
+        device_id: device.device_id,
+      },
+      {
+        onSuccess,
+      }
+    )
+  }
+
+  return { submit, isSubmitting }
+}

package/src/lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -36,7 +36,7 @@ export function FilterCategoryMenu({
   onAllOptionSelect,
   buttonLabel,
 }: FilterCategoryMenuProps): JSX.Element {
-  const usableOptions = hideAllOption ? options : ['All', ...options]
+  const usableOptions = hideAllOption ? options : [allLabel, ...options]
 
   return (
     <div className='seam-supported-device-table-filter-menu-wrap'>

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -13,7 +13,7 @@ interface SupportedDeviceContentProps {
   filterValue: string
   resetFilterValue: () => void
   filters: DeviceModelFilters
-  brands: string[]
+  brands: string[] | null
 }
 
 export function SupportedDeviceContent({
@@ -71,12 +71,8 @@ export function SupportedDeviceContent({
     )
   }
 
-  // If there are no active filters or search, show all the rows without any brand sections.
-  const hasFilters =
-    filterValue.trim() !== '' ||
-    filters.supportedOnly ||
-    filters.category !== null ||
-    filters.brand !== null
+  const hasFilters = filterValue.trim() !== '' || filters.brand !== null
+
   if (hasFilters) {
     return (
       <div className='seam-supported-device-table-content'>