@seamapi/react 1.41.1 → 1.42.0

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 → ui}/AccessCodeForm/AccessCodeForm.tsx

@@ -3,16 +3,16 @@ import { useState } from 'react'
 import type { AccessCode } from 'seamapi'
 
 import {
-  createIsoDate,
   get24HoursLater,
   getBrowserTimezone,
   getNow,
+  getTimezoneFromIsoDate,
 } from 'lib/dates.js'
-import { useCreateAccessCode } from 'lib/seam/access-codes/use-create-access-code.js'
-import { AccessCodeFormDatePicker } from 'lib/seam/components/AccessCodeForm/AccessCodeFormDatePicker.js'
-import { AccessCodeFormTimes } from 'lib/seam/components/AccessCodeForm/AccessCodeFormTimes.js'
-import { AccessCodeFormTimezonePicker } from 'lib/seam/components/AccessCodeForm/AccessCodeFormTimezonePicker.js'
-import { useDevice, type UseDeviceData } from 'lib/seam/devices/use-device.js'
+import type { UseAccessCodeData } from 'lib/seam/access-codes/use-access-code.js'
+import type { UseDeviceData } from 'lib/seam/devices/use-device.js'
+import { AccessCodeFormDatePicker } from 'lib/ui/AccessCodeForm/AccessCodeFormDatePicker.js'
+import { AccessCodeFormTimes } from 'lib/ui/AccessCodeForm/AccessCodeFormTimes.js'
+import { AccessCodeFormTimezonePicker } from 'lib/ui/AccessCodeForm/AccessCodeFormTimezonePicker.js'
 import { Button } from 'lib/ui/Button.js'
 import { FormField } from 'lib/ui/FormField.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
@@ -21,55 +21,72 @@ import { RadioField } from 'lib/ui/RadioField/RadioField.js'
 import { TextField } from 'lib/ui/TextField/TextField.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
+export interface AccessCodeFormSubmitData {
+  name: string
+  type: AccessCode['type']
+  device: NonNullable<UseDeviceData>
+  startDate: string
+  endDate: string
+  timezone: string
+}
+
 export interface AccessCodeFormProps {
-  deviceId: string
-  onBack?: () => void
   className?: string
+  onBack?: () => void
+  accessCode?: NonNullable<UseAccessCodeData>
+  device: NonNullable<UseDeviceData>
+  isSubmitting: boolean
+  onSubmit: (data: AccessCodeFormSubmitData) => void
 }
 
 export function AccessCodeForm({
-  deviceId,
-  onBack,
   className,
+  ...props
 }: AccessCodeFormProps): JSX.Element | null {
-  const { device } = useDevice({
-    device_id: deviceId,
-  })
-
-  if (device == null) {
-    return null
-  }
-
   return (
     <div className={classNames('seam-access-code-form', className)}>
-      <Content className={className} onBack={onBack} device={device} />
+      <Content {...props} />
     </div>
   )
 }
 
 function Content({
   onBack,
+  accessCode,
   device,
-}: Omit<AccessCodeFormProps, 'deviceId'> & {
-  device: NonNullable<UseDeviceData>
-}): JSX.Element {
-  const [name, setName] = useState('')
-  const [type, setType] = useState<AccessCode['type']>('ongoing')
+  onSubmit,
+  isSubmitting,
+}: Omit<AccessCodeFormProps, 'className'>): JSX.Element {
+  const [name, setName] = useState(accessCode?.name ?? '')
+  const [type, setType] = useState<AccessCode['type']>(
+    accessCode?.type ?? 'ongoing'
+  )
   const [datePickerVisible, setDatePickerVisible] = useState(false)
-  const [timezone, setTimezone] = useState<string>(getBrowserTimezone())
-  const [startDate, setStartDate] = useState<string>(getNow())
-  const [endDate, setEndDate] = useState<string>(get24HoursLater())
+  const [timezone, setTimezone] = useState<string>(
+    getAccessCodeTimezone(accessCode) ?? getBrowserTimezone()
+  )
+  const [startDate, setStartDate] = useState<string>(
+    getAccessCodeDate('starts_at', accessCode) ?? getNow()
+  )
+  const [endDate, setEndDate] = useState<string>(
+    getAccessCodeDate('ends_at', accessCode) ?? get24HoursLater()
+  )
   const [timezonePickerVisible, toggleTimezonePicker] = useToggle()
 
-  const { submit, isLoading } = useSubmit({
-    name,
-    type,
-    device,
-    startDate,
-    endDate,
-    timezone,
-    onSuccess: onBack,
-  })
+  const submit = (): void => {
+    if (isSubmitting) {
+      return
+    }
+
+    onSubmit({
+      name,
+      type,
+      device,
+      startDate,
+      endDate,
+      timezone,
+    })
+  }
 
   if (timezonePickerVisible) {
     return (
@@ -100,12 +117,14 @@ function Content({
   const nameError = name.length > 60 ? t.overCharacterLimitError : undefined
 
   const isFormValid =
-    name.trim().length > 0 && nameError === undefined && !isLoading
+    name.trim().length > 0 && nameError === undefined && !isSubmitting
+
+  const title = accessCode == null ? t.addNewAccessCode : t.editAccessCode
 
   return (
     <>
       <ContentHeader
-        title={t.addNewAccessCode}
+        title={title}
         subheading={device.properties.name}
         onBack={onBack}
       />
@@ -161,62 +180,45 @@ function Content({
   )
 }
 
-function useSubmit(params: {
-  name: string
-  type: AccessCode['type']
-  device: NonNullable<UseDeviceData>
-  startDate: string
-  endDate: string
-  timezone: string
-  onSuccess?: () => void
-}): {
-  submit: () => void
-  isLoading: boolean
-} {
-  const { name, type, device, startDate, endDate, timezone, onSuccess } = params
-
-  const { mutate, isLoading } = useCreateAccessCode()
-  const submit = (): void => {
-    if (name === '') {
-      return
-    }
+function getAccessCodeTimezone(
+  accessCode?: NonNullable<UseAccessCodeData>
+): undefined | string {
+  if (accessCode == null) {
+    return undefined
+  }
 
-    if (isLoading) {
-      return
-    }
+  if (accessCode.type === 'ongoing') {
+    return undefined
+  }
 
-    if (type === 'time_bound') {
-      mutate(
-        {
-          name,
-          device_id: device.device_id,
-          starts_at: createIsoDate(startDate, timezone),
-          ends_at: createIsoDate(endDate, timezone),
-        },
-        {
-          onSuccess,
-        }
-      )
+  const date = accessCode.starts_at
 
-      return
-    }
+  const timezone = getTimezoneFromIsoDate(date)
+  if (timezone == null) {
+    return undefined
+  }
 
-    mutate(
-      {
-        name,
-        device_id: device.device_id,
-      },
-      {
-        onSuccess,
-      }
-    )
+  return timezone
+}
+
+function getAccessCodeDate(
+  date: 'starts_at' | 'ends_at',
+  accessCode?: NonNullable<UseAccessCodeData>
+): string | undefined {
+  if (accessCode == null) {
+    return undefined
+  }
+
+  if (accessCode.type !== 'time_bound') {
+    return undefined
   }
 
-  return { submit, isLoading }
+  return accessCode[date]
 }
 
 const t = {
   addNewAccessCode: 'Add new access code',
+  editAccessCode: 'Edit access code',
   overCharacterLimitError: '60 characters max',
   nameInputLabel: 'Name the new code',
   cancel: 'Cancel',

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.41.1'
+const seamapiReactVersion = '1.42.0'
 
 export default seamapiReactVersion

package/src/styles/_access-code-details.scss

@@ -79,6 +79,11 @@
       }
     }
 
+    .seam-actions {
+      margin-bottom: 16px;
+      padding: 0 24px;
+    }
+
     .seam-details {
       font-size: 16px;
       line-height: 134%;

package/src/styles/_access-code-table.scss

@@ -82,7 +82,7 @@
   }
 
   .seam-access-code-table-action-menu {
-    .menu-item-copy {
+    .seam-menu-item-copy {
       display: flex;
       align-items: center;
       justify-content: space-between;

package/src/styles/_menus.scss

@@ -43,6 +43,12 @@
         background: colors.$item-hover-bg;
       }
     }
+
+    .seam-divider {
+      height: 1px;
+      background: colors.$divider-stroke-light;
+      margin: 8px 0;
+    }
   }
 
   .seam-menu-shadow {