@seamapi/react 3.0.2 → 3.1.1

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

@@ -11,54 +11,75 @@ import { useToggle } from 'lib/ui/use-toggle.js'
 export interface AccessCodeMenuProps {
   accessCode: AccessCode
   onEdit: () => void
+  onDeleteSuccess: () => void
   onViewDetails: () => void
   disableEditAccessCode: boolean
   disableDeleteAccessCode: boolean
 }
 
 export function AccessCodeMenu(props: AccessCodeMenuProps): JSX.Element {
+  const [deleteConfirmationVisible, toggleDeleteConfirmation] = useToggle()
+
   return (
     <MoreActionsMenu
       menuProps={{
         backgroundProps: {
           className: 'seam-table-action-menu',
         },
+        onClose: () => {
+          if (deleteConfirmationVisible) {
+            toggleDeleteConfirmation()
+          }
+        },
       }}
     >
-      <Content {...props} />
+      <Content
+        {...props}
+        deleteConfirmationVisible={deleteConfirmationVisible}
+        toggleDeleteConfirmation={toggleDeleteConfirmation}
+      />
     </MoreActionsMenu>
   )
 }
 
+interface ContentProps extends AccessCodeMenuProps {
+  deleteConfirmationVisible: boolean
+  toggleDeleteConfirmation: () => void
+}
+
 function Content({
   accessCode,
   onViewDetails,
   disableEditAccessCode,
   disableDeleteAccessCode,
   onEdit,
-}: AccessCodeMenuProps): JSX.Element {
-  const [deleteConfirmationVisible, toggleDeleteConfirmation] = useToggle()
-
+  onDeleteSuccess,
+  deleteConfirmationVisible,
+  toggleDeleteConfirmation,
+}: ContentProps): JSX.Element {
   const deleteAccessCode = useDeleteAccessCode()
+  const isAccessCodeBeingRemoved = accessCode.status === 'removing'
 
   if (deleteConfirmationVisible) {
     return (
       <div className='seam-delete-confirmation'>
         <span>{t.deleteCodeConfirmation}</span>
         <div className='seam-actions'>
-          <Button
-            onClick={toggleDeleteConfirmation}
-            disabled={deleteAccessCode.isPending}
-          >
+          <Button disabled={deleteAccessCode.isPending}>
             {t.cancelDelete}
           </Button>
           <Button
             variant='solid'
             disabled={deleteAccessCode.isPending}
             onClick={() => {
-              deleteAccessCode.mutate({
-                access_code_id: accessCode.access_code_id,
-              })
+              deleteAccessCode.mutate(
+                {
+                  access_code_id: accessCode.access_code_id,
+                },
+                {
+                  onSuccess: onDeleteSuccess,
+                }
+              )
             }}
           >
             {t.confirmDelete}
@@ -84,10 +105,10 @@ function Content({
       </MenuItem>
       <div className='seam-divider' />
       <MenuItem onClick={onViewDetails}>{t.viewCodeDetails}</MenuItem>
-      {!disableEditAccessCode && (
+      {!disableEditAccessCode && !isAccessCodeBeingRemoved && (
         <MenuItem onClick={onEdit}>{t.editCode}</MenuItem>
       )}
-      {!disableDeleteAccessCode && (
+      {!disableDeleteAccessCode && !isAccessCodeBeingRemoved && (
         <>
           <div className='seam-divider' />
           <MenuItem

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

@@ -1,4 +1,5 @@
 import type { AccessCode } from '@seamapi/types/connect'
+import classNames from 'classnames'
 
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
@@ -13,6 +14,7 @@ export interface AccessCodeRowProps {
   accessCode: AccessCode
   onClick: () => void
   onEdit: () => void
+  onDeleteSuccess: () => void
   disableEditAccessCode: boolean
   disableDeleteAccessCode: boolean
 }
@@ -21,25 +23,37 @@ export function AccessCodeRow({
   onClick,
   accessCode,
   onEdit,
+  onDeleteSuccess,
   disableEditAccessCode,
   disableDeleteAccessCode,
 }: AccessCodeRowProps): JSX.Element {
+  const isAccessCodeBeingRemoved = accessCode.status === 'removing'
+
   const errorCount = accessCode.errors.length
   const warningCount = accessCode.warnings.length
-  const isPlural = errorCount === 0 || errorCount > 1
-  const errorIconTitle = isPlural
-    ? `${errorCount} ${t.codeIssues}`
-    : `${errorCount} ${t.codeIssue}`
-  const warningIconTitle = isPlural
-    ? `${warningCount} ${t.codeIssues}`
-    : `${warningCount} ${t.codeIssue}`
+  const errorIconTitle =
+    errorCount === 0 || errorCount > 1
+      ? `${errorCount} ${t.codeIssues}`
+      : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle =
+    warningCount === 0 || warningCount > 1
+      ? `${warningCount} ${t.codeIssues}`
+      : `${warningCount} ${t.codeIssue}`
 
   return (
     <TableRow onClick={onClick}>
-      <TableCell className='seam-icon-cell'>
+      <TableCell
+        className={classNames('seam-icon-cell', {
+          'seam-grayed-out': isAccessCodeBeingRemoved,
+        })}
+      >
         <AccessCodeMainIcon accessCode={accessCode} />
       </TableCell>
-      <TableCell className='seam-name-cell'>
+      <TableCell
+        className={classNames('seam-name-cell', {
+          'seam-grayed-out': isAccessCodeBeingRemoved,
+        })}
+      >
         <Title className='seam-truncated-text'>{accessCode.name}</Title>
         <CodeDetails accessCode={accessCode} />
       </TableCell>
@@ -63,6 +77,7 @@ export function AccessCodeRow({
         <AccessCodeMenu
           accessCode={accessCode}
           onEdit={onEdit}
+          onDeleteSuccess={onDeleteSuccess}
           onViewDetails={onClick}
           disableDeleteAccessCode={disableDeleteAccessCode}
           disableEditAccessCode={disableEditAccessCode}

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

@@ -1,6 +1,6 @@
 import type { AccessCode } from '@seamapi/types/connect'
 import classNames from 'classnames'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AddIcon } from 'lib/icons/Add.js'
@@ -48,20 +48,6 @@ export interface AccessCodeTableProps extends CommonProps {
   heading?: string | null
 }
 
-const defaultAccessCodeFilter = (
-  accessCode: AccessCode,
-  searchInputValue: string
-): boolean => {
-  const value = searchInputValue.trim().toLowerCase()
-  if (value === '') return true
-  const name = accessCode.name ?? ''
-  const code = accessCode.code ?? ''
-  return (
-    name.trim().toLowerCase().includes(value) ||
-    code.trim().toLowerCase().includes(value)
-  )
-}
-
 export function AccessCodeTable({
   deviceId,
   disableSearch = false,
@@ -127,11 +113,21 @@ export function AccessCodeTable({
   )
 
   const [accessCodeResult, setAccessCodeResult] = useState<
-    'created' | 'updated' | null
+    'created' | 'updated' | 'deleted' | null
   >(null)
+  const [snackbarMessage, setSnackbarMessage] = useState<string>('')
 
-  const accessCodeResultMessage =
-    accessCodeResult === 'created' ? t.accesCodeCreated : t.accesCodeUpdated
+  const handleAccessCodeDeleteSuccess = useCallback((): void => {
+    setAccessCodeResult('deleted')
+  }, [setAccessCodeResult])
+
+  // Circumvent Snackbar bug that causes it to switch to default message
+  // while the dismiss animation is playing
+  useEffect(() => {
+    if (accessCodeResult !== null) {
+      setSnackbarMessage(accessCodeResultToMessage(accessCodeResult))
+    }
+  }, [accessCodeResult])
 
   if (selectedEditAccessCodeId != null) {
     return (
@@ -159,38 +155,22 @@ export function AccessCodeTable({
 
   if (selectedViewAccessCodeId != null) {
     return (
-      <>
-        <Snackbar
-          variant='success'
-          message={accessCodeResultMessage}
-          visible={accessCodeResult != null}
-          autoDismiss
-          onClose={() => {
-            setAccessCodeResult(null)
-          }}
-        />
-        <NestedAccessCodeDetails
-          accessCodeId={selectedViewAccessCodeId}
-          onEdit={() => {
-            setSelectedEditAccessCodeId(selectedViewAccessCodeId)
-          }}
-          errorFilter={errorFilter}
-          warningFilter={warningFilter}
-          disableLockUnlock={disableLockUnlock}
-          disableCreateAccessCode={disableCreateAccessCode}
-          disableEditAccessCode={disableEditAccessCode}
-          disableDeleteAccessCode={disableDeleteAccessCode}
-          disableResourceIds={disableResourceIds}
-          disableConnectedAccountInformation={
-            disableConnectedAccountInformation
-          }
-          disableClimateSettingSchedules={disableClimateSettingSchedules}
-          onBack={() => {
-            setSelectedViewAccessCodeId(null)
-          }}
-          className={className}
-        />
-      </>
+      <NestedAccessCodeDetails
+        accessCodeId={selectedViewAccessCodeId}
+        errorFilter={errorFilter}
+        warningFilter={warningFilter}
+        disableLockUnlock={disableLockUnlock}
+        disableCreateAccessCode={disableCreateAccessCode}
+        disableEditAccessCode={disableEditAccessCode}
+        disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
+        onBack={() => {
+          setSelectedViewAccessCodeId(null)
+        }}
+        className={className}
+      />
     )
   }
 
@@ -220,7 +200,7 @@ export function AccessCodeTable({
     <>
       <Snackbar
         variant='success'
-        message={accessCodeResultMessage}
+        message={snackbarMessage}
         visible={accessCodeResult != null}
         autoDismiss
         onClose={() => {
@@ -267,6 +247,7 @@ export function AccessCodeTable({
             accessCodes={filteredAccessCodes}
             onAccessCodeClick={handleAccessCodeClick}
             onAccessCodeEdit={handleAccessCodeEdit}
+            onAccessCodeDeleteSuccess={handleAccessCodeDeleteSuccess}
             errorFilter={errorFilter}
             warningFilter={warningFilter}
             disableEditAccessCode={disableEditAccessCode}
@@ -295,6 +276,7 @@ function Content(props: {
   accessCodes: AccessCode[]
   onAccessCodeClick: (accessCodeId: string) => void
   onAccessCodeEdit: (accessCodeId: string) => void
+  onAccessCodeDeleteSuccess: (accessCodeId: string) => void
   errorFilter: (error: AccessCode['errors'][number]) => boolean
   warningFilter: (warning: AccessCode['warnings'][number]) => boolean
   disableEditAccessCode: boolean
@@ -304,6 +286,7 @@ function Content(props: {
     accessCodes,
     onAccessCodeClick,
     onAccessCodeEdit,
+    onAccessCodeDeleteSuccess,
     errorFilter,
     warningFilter,
     disableEditAccessCode,
@@ -350,18 +333,44 @@ function Content(props: {
           onEdit={() => {
             onAccessCodeEdit(accessCode.access_code_id)
           }}
+          onDeleteSuccess={() => {
+            onAccessCodeDeleteSuccess(accessCode.access_code_id)
+          }}
         />
       ))}
     </>
   )
 }
 
+const defaultAccessCodeFilter = (
+  accessCode: AccessCode,
+  searchInputValue: string
+): boolean => {
+  const value = searchInputValue.trim().toLowerCase()
+  if (value === '') return true
+  const name = accessCode.name ?? ''
+  const code = accessCode.code ?? ''
+  return (
+    name.trim().toLowerCase().includes(value) ||
+    code.trim().toLowerCase().includes(value)
+  )
+}
+
+const accessCodeResultToMessage = (
+  result: 'created' | 'updated' | 'deleted'
+): string => {
+  if (result === 'created') return t.accessCodeCreated
+  if (result === 'deleted') return t.accessCodeDeleted
+  return t.accessCodeUpdated
+}
+
 const t = {
   accessCodes: 'Access Codes',
   noAccessCodesMessage: 'Sorry, no access codes were found',
   loading: 'Loading access codes',
-  accesCodeUpdated: 'Access code updated',
-  accesCodeCreated: 'Access code created',
+  accessCodeUpdated: 'Access code updated',
+  accessCodeCreated: 'Access code created',
+  accessCodeDeleted: 'Access code is being removed',
   tryAgain: 'Try again',
   fallbackErrorMessage: 'Access codes could not be loaded',
 }

package/src/lib/seam/components/DeviceDetails/ThermostatDeviceDetails.tsx

@@ -8,7 +8,6 @@ import { NestedClimateSettingScheduleTable } from 'lib/seam/components/ClimateSe
 import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
-import { getSupportedThermostatModes } from 'lib/seam/thermostats/temperature-bounds.js'
 import type {
   HvacModeSetting,
   ThermostatDevice,
@@ -252,12 +251,13 @@ function ClimateSettingRow({
   const deviceCoolValue =
     device.properties.current_climate_setting.cooling_set_point_fahrenheit
 
-  const supportedModes = getSupportedThermostatModes(device)
+  const availableHvacModes = device.properties.available_hvac_mode_settings
 
   const [showSuccess, setShowSuccess] = useState(false)
   const [mode, setMode] = useState<HvacModeSetting>(
-    (supportedModes.includes('heat_cool') ? 'heat_cool' : supportedModes[0]) ??
-      'off'
+    (availableHvacModes.includes('heat_cool')
+      ? 'heat_cool'
+      : availableHvacModes[0]) ?? 'off'
   )
 
   const [heatValue, setHeatValue] = useState(
@@ -413,7 +413,7 @@ function ClimateSettingRow({
           <ClimateModeMenu
             mode={mode}
             onChange={setMode}
-            supportedModes={supportedModes}
+            supportedModes={availableHvacModes}
           />
         </div>
       </AccordionRow>

package/src/lib/seam/thermostats/temperature-bounds.ts

@@ -1,7 +1,4 @@
-import type {
-  HvacModeSetting,
-  ThermostatDevice,
-} from 'lib/seam/thermostats/thermostat-device.js'
+import type { HvacModeSetting } from 'lib/seam/thermostats/thermostat-device.js'
 
 export interface ControlBounds {
   mode: Exclude<HvacModeSetting, 'off'>
@@ -54,25 +51,3 @@ export const getTemperatureBounds = (
   heat: getHeatBounds(controlBounds),
   cool: getCoolBounds(controlBounds),
 })
-
-export const getSupportedThermostatModes = (
-  device: ThermostatDevice
-): HvacModeSetting[] => {
-  const allModes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
-
-  return allModes.filter((mode) => {
-    switch (mode) {
-      case 'cool':
-        return device.properties.is_cooling_available ?? false
-      case 'heat':
-        return device.properties.is_heating_available ?? false
-      case 'heat_cool':
-        return (
-          (device.properties.is_heating_available ?? false) &&
-          (device.properties.is_cooling_available ?? false)
-        )
-      default:
-        return true
-    }
-  })
-}

package/src/lib/seam/thermostats/thermostat-device.ts

@@ -10,8 +10,6 @@ export type ThermostatDevice = Omit<Device, 'properties'> & {
         | 'is_heating'
         | 'is_cooling'
         | 'is_fan_running'
-        | 'is_cooling_available'
-        | 'is_heating_available'
         | 'available_hvac_mode_settings'
         | 'fan_mode_setting'
         | 'current_climate_setting'
@@ -28,8 +26,6 @@ export type HvacModeSetting =
 
 // UPSTREAM: ClimateSetting missing in @seamapi/types.
 export interface ClimateSetting {
-  automatic_heating_enabled?: boolean
-  automatic_cooling_enabled?: boolean
   hvac_mode_setting?: HvacModeSetting
   cooling_set_point_celsius?: number
   heating_set_point_celsius?: number

package/src/lib/seam/thermostats/use-cool-thermostat.ts

@@ -100,8 +100,6 @@ const getUpdatedDevice = (
         current_climate_setting: {
           ...properties.current_climate_setting,
           hvac_mode_setting: 'cool',
-          automatic_heating_enabled: false,
-          automatic_cooling_enabled: true,
           heating_set_point_celsius: undefined,
           heating_set_point_fahrenheit: undefined,
           cooling_set_point_celsius: getCoolingSetPointCelsius(

package/src/lib/seam/thermostats/use-heat-cool-thermostat.ts

@@ -106,8 +106,6 @@ const getUpdatedDevice = (
         current_climate_setting: {
           ...properties.current_climate_setting,
           hvac_mode_setting: 'heat_cool',
-          automatic_heating_enabled: true,
-          automatic_cooling_enabled: true,
           heating_set_point_celsius: getHeatingSetPointCelsius(
             variables,
             device

package/src/lib/seam/thermostats/use-heat-thermostat.ts

@@ -100,8 +100,6 @@ const getUpdatedDevice = (
         current_climate_setting: {
           ...properties.current_climate_setting,
           hvac_mode_setting: 'heat',
-          automatic_heating_enabled: true,
-          automatic_cooling_enabled: false,
           cooling_set_point_celsius: undefined,
           cooling_set_point_fahrenheit: undefined,
           heating_set_point_celsius: getHeatingSetPointCelsius(

package/src/lib/seam/thermostats/use-set-thermostat-off.ts

@@ -92,8 +92,6 @@ const getUpdatedDevice = (device: Device): Device => {
         is_heating: false,
         current_climate_setting: {
           ...properties.current_climate_setting,
-          automatic_cooling_enabled: false,
-          automatic_heating_enabled: false,
           hvac_mode_setting: 'off',
           heating_set_point_celsius: undefined,
           heating_set_point_fahrenheit: undefined,

package/src/lib/ui/ClimateSettingForm/set-point-bounds.ts

@@ -13,17 +13,17 @@ export const getSetPointBounds = (device: ThermostatDevice): SetPointBounds => {
 
   const setPointBounds: SetPointBounds = {}
 
-  if (properties.is_cooling_available) {
+  if (properties.available_hvac_mode_settings.includes('cool')) {
     setPointBounds.minCool = properties.min_cooling_set_point_fahrenheit
     setPointBounds.maxCool = properties.max_cooling_set_point_fahrenheit
   }
 
-  if (properties.is_heating_available) {
+  if (properties.available_hvac_mode_settings.includes('heat')) {
     setPointBounds.minHeat = properties.min_heating_set_point_fahrenheit
     setPointBounds.maxHeat = properties.max_heating_set_point_fahrenheit
   }
 
-  if (properties.is_cooling_available && properties.is_heating_available) {
+  if (properties.available_hvac_mode_settings.includes('heat_cool')) {
     setPointBounds.delta = properties.min_heating_cooling_delta_fahrenheit
   }
 

package/src/lib/ui/Menu/Menu.tsx

@@ -23,6 +23,7 @@ export interface MenuProps extends PropsWithChildren {
   backgroundProps?: Partial<{
     className?: string
   }>
+  onClose?: () => void
 }
 
 interface MenuContext {
@@ -40,6 +41,7 @@ export function Menu({
   children,
   renderButton,
   backgroundProps,
+  onClose,
 }: MenuProps): JSX.Element | null {
   const { Provider } = menuContext
   const [documentEl, setDocumentEl] = useState<null | HTMLElement>(null)
@@ -59,6 +61,7 @@ export function Menu({
   }, [setDocumentEl])
 
   const handleClose = (): void => {
+    onClose?.()
     setAnchorEl(null)
   }
 

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '3.0.2'
+const seamapiReactVersion = '3.1.1'
 
 export default seamapiReactVersion

package/src/styles/_seam-table.scss

@@ -94,6 +94,10 @@
         margin-right: 8px;
       }
     }
+
+    .seam-grayed-out {
+      opacity: 0.4;
+    }
   }
 
   .seam-table-action-menu {