@seamapi/react 2.10.2 → 2.12.0

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

@@ -1,8 +1,6 @@
 import { useState } from 'react'
 import type { AccessCode, SeamError } from 'seamapi'
 
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
 import { useCreateAccessCode } from 'lib/seam/access-codes/use-create-access-code.js'
 import {
   type CommonProps,
@@ -10,6 +8,7 @@ import {
 } from 'lib/seam/components/common-props.js'
 import { useDevice, type UseDeviceData } from 'lib/seam/devices/use-device.js'
 import { getValidationError } from 'lib/seam/error-handlers.js'
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
 import {
   AccessCodeForm,
   type AccessCodeFormSubmitData,

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

@@ -1,7 +1,6 @@
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
 import type { CommonProps } from 'lib/seam/components/common-props.js'
 import { useCreateClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-create-climate-setting-schedule.js'
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
 import {
   ClimateSettingScheduleForm,
   type ClimateSettingScheduleFormSubmitData,

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

@@ -1,7 +1,5 @@
 import { isLockDevice, isThermostatDevice } from 'seamapi'
 
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
 import {
   type CommonProps,
   withRequiredCommonProps,
@@ -9,6 +7,7 @@ import {
 import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceDetails.js'
 import { ThermostatDeviceDetails } from 'lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
 export interface DeviceDetailsProps extends CommonProps {
   deviceId: string

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

@@ -2,8 +2,6 @@ import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 import { type CommonDevice, isLockDevice, isThermostatDevice } from 'seamapi'
 
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import {
   type CommonProps,
@@ -20,6 +18,7 @@ import {
   useDevices,
   type UseDevicesData,
 } from 'lib/seam/devices/use-devices.js'
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
 import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'

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

@@ -1,5 +1,3 @@
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
 import {
   useAccessCode,
   type UseAccessCodeData,
@@ -11,6 +9,7 @@ import {
 } from 'lib/seam/components/common-props.js'
 import { useResponseErrors } from 'lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
 import {
   AccessCodeForm,
   type AccessCodeFormSubmitData,

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

@@ -1,8 +1,6 @@
 import classNames from 'classnames'
 import { useState } from 'react'
 
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
 import {
   type CommonProps,
   withRequiredCommonProps,
@@ -10,6 +8,7 @@ import {
 import { SupportedDeviceContent } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.js'
 import { SupportedDeviceFilterArea } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.js'
 import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
 export interface SupportedDeviceTableProps extends CommonProps {
   disableFilter?: boolean

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

@@ -1,13 +1,12 @@
 import type { Manufacturer } from '@seamapi/types/devicedb'
 import classNames from 'classnames'
 
-import { useComponentTelemetry } from 'lib/telemetry/index.js'
-
 import { CopyIcon } from 'lib/icons/Copy.js'
 import {
   type CommonProps,
   withRequiredCommonProps,
 } from 'lib/seam/components/common-props.js'
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
 import { copyToClipboard } from 'lib/ui/clipboard.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 

package/src/lib/seam/thermostats/climate-setting-schedules/use-update-climate-setting-schedule.ts

@@ -0,0 +1,92 @@
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+import type {
+  ClimateSettingSchedule,
+  ClimateSettingSchedulesListResponse,
+  ClimateSettingScheduleUpdateRequest,
+  ClimateSettingScheduleUpdateResponse,
+  SeamError,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/index.js'
+
+type UseUpdateClimateSettingScheduleData =
+  ClimateSettingScheduleUpdateResponse['climate_setting_schedule']
+type UseUpdateClimateSettingScheduleMutationParams =
+  ClimateSettingScheduleUpdateRequest
+
+export function useUpdateClimateSettingSchedule(): UseMutationResult<
+  UseUpdateClimateSettingScheduleData,
+  SeamError,
+  UseUpdateClimateSettingScheduleMutationParams
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseUpdateClimateSettingScheduleData,
+    SeamError,
+    UseUpdateClimateSettingScheduleMutationParams
+  >({
+    mutationFn: async (
+      mutationPararms: UseUpdateClimateSettingScheduleMutationParams
+    ) => {
+      if (client === null) throw new NullSeamClientError()
+      return await client.thermostats.climateSettingSchedules.update(
+        mutationPararms
+      )
+    },
+    onSuccess: (updated) => {
+      queryClient.setQueryData<ClimateSettingSchedule>(
+        [
+          'thermostats',
+          'climate_setting_schedules',
+          'get',
+          {
+            climate_setting_schedule_id: updated.climate_setting_schedule_id,
+          },
+        ],
+        (climateSettingSchedule) => {
+          if (climateSettingSchedule == null) {
+            return
+          }
+
+          return {
+            ...climateSettingSchedule,
+            ...updated,
+          }
+        }
+      )
+
+      queryClient.setQueryData<
+        ClimateSettingSchedulesListResponse['climate_setting_schedules']
+      >(
+        [
+          'thermostats',
+          'climate_setting_schedules',
+          'list',
+          { device_id: updated.device_id },
+        ],
+        (climateSettingSchedules): ClimateSettingSchedule[] => {
+          if (climateSettingSchedules == null) {
+            return []
+          }
+
+          return climateSettingSchedules.map((climateSettingSchedule) => {
+            if (climateSettingSchedule.device_id === updated.device_id) {
+              return {
+                ...climateSettingSchedule,
+                ...updated,
+              }
+            }
+
+            return climateSettingSchedule
+          })
+        }
+      )
+    },
+  })
+}

package/src/lib/ui/AccessCodeForm/AccessCodeForm.tsx

@@ -176,6 +176,9 @@ function Content({
       ? t.codeLengthRequirement(codeLengthRequirement)
       : null
 
+  const hasCodeInputs =
+    accessCode?.type !== 'time_bound' || accessCode.is_offline_access_code
+
   return (
     <>
       <ContentHeader
@@ -207,77 +210,81 @@ function Content({
               }}
             />
           </FormField>
-          <FormField className='seam-code-field'>
-            <InputLabel>{t.codeInputLabel}</InputLabel>
-            <TextField
-              size='large'
-              clearable
-              hasError={hasCodeError}
-              helperText={responseErrors?.code ?? errors.code?.message}
-              inputProps={{
-                ...register('code', {
-                  required: t.codeRequiredError,
-                  validate: (value: string) =>
-                    validateCodeLength(device, value),
-                }),
-              }}
-            />
-            <div
-              className={classNames('seam-bottom', {
-                'has-hints': codeLengthRequirementMessage != null,
-              })}
-            >
-              {codeLengthRequirementMessage != null && (
-                <ul
-                  className={classNames('seam-requirements', {
-                    'seam-error': hasCodeError,
-                  })}
-                >
-                  <li>{codeLengthRequirementMessage}</li>
-                  <li>{t.codeNumbersOnlyRequirement}</li>
-                </ul>
-              )}
-              <Button
-                size='small'
-                onMouseDown={(e) => {
-                  e.preventDefault() // Disable stealing input focus
-                  handleGenerateCode()
-                }}
-                disabled={isGeneratingCode}
-              >
-                {t.codeGenerateButton}
-              </Button>
-            </div>
-          </FormField>
-          <FormField>
-            <InputLabel>{t.timingInputLabel}</InputLabel>
-            <RadioField
-              value={type}
-              onChange={setType}
-              name='type'
-              options={[
-                {
-                  label: t.typeOngoingLabel,
-                  value: 'ongoing',
-                },
-                {
-                  label: t.typeTimeBoundLabel,
-                  value: 'time_bound',
-                },
-              ]}
-            />
+          {hasCodeInputs && (
             <>
-              {type === 'time_bound' && (
-                <AccessCodeFormTimes
-                  startDate={startDate}
-                  endDate={endDate}
-                  onEdit={() => {
-                    setDatePickerVisible(true)
+              <FormField className='seam-code-field'>
+                <InputLabel>{t.codeInputLabel}</InputLabel>
+                <TextField
+                  size='large'
+                  clearable
+                  hasError={hasCodeError}
+                  helperText={responseErrors?.code ?? errors.code?.message}
+                  inputProps={{
+                    ...register('code', {
+                      required: t.codeRequiredError,
+                      validate: (value: string) =>
+                        validateCodeLength(device, value),
+                    }),
                   }}
                 />
-              )}
+                <div
+                  className={classNames('seam-bottom', {
+                    'has-hints': codeLengthRequirementMessage != null,
+                  })}
+                >
+                  {codeLengthRequirementMessage != null && (
+                    <ul
+                      className={classNames('seam-requirements', {
+                        'seam-error': hasCodeError,
+                      })}
+                    >
+                      <li>{codeLengthRequirementMessage}</li>
+                      <li>{t.codeNumbersOnlyRequirement}</li>
+                    </ul>
+                  )}
+                  <Button
+                    size='small'
+                    onMouseDown={(e) => {
+                      e.preventDefault() // Disable stealing input focus
+                      handleGenerateCode()
+                    }}
+                    disabled={isGeneratingCode}
+                  >
+                    {t.codeGenerateButton}
+                  </Button>
+                </div>
+              </FormField>
+              <FormField>
+                <InputLabel>{t.timingInputLabel}</InputLabel>
+                <RadioField
+                  value={type}
+                  onChange={setType}
+                  name='type'
+                  options={[
+                    {
+                      label: t.typeOngoingLabel,
+                      value: 'ongoing',
+                    },
+                    {
+                      label: t.typeTimeBoundLabel,
+                      value: 'time_bound',
+                    },
+                  ]}
+                />
+                <>
+                  {type === 'time_bound' && (
+                    <AccessCodeFormTimes
+                      startDate={startDate}
+                      endDate={endDate}
+                      onEdit={() => {
+                        setDatePickerVisible(true)
+                      }}
+                    />
+                  )}
+                </>
+              </FormField>
             </>
-          </FormField>
+          )}
           {responseErrors?.unknown != null && (
             <div className='seam-unknown-error'>{responseErrors?.unknown}</div>
           )}

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx

@@ -7,9 +7,8 @@ import {
   isThermostatDevice,
 } from 'seamapi'
 
-import { useDevice } from 'lib/index.js'
-
 import { getSystemTimeZone } from 'lib/dates.js'
+import { useDevice } from 'lib/index.js'
 import { ClimateSettingScheduleFormClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js'
 import { ClimateSettingScheduleFormDefaultClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDefaultClimateSetting.js'
 import { ClimateSettingScheduleFormDeviceSelect } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js'

package/src/lib/ui/FormField.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { cloneElement, useRef } from 'react'
+import { type Attributes, cloneElement, useRef } from 'react'
 
 import { DateTimePicker } from 'lib/ui/DateTimePicker/DateTimePicker.js'
 import { InputLabel } from 'lib/ui/InputLabel.js'
@@ -27,7 +27,7 @@ export function FormField({
   // Map children to automatically focus on input when clicking
   // on an InputLabel.
   const clonedChildren = components.map((component, index) => {
-    const baseProps = {
+    const baseProps: Attributes = {
       ...component.props,
       key: index,
     }

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.10.2'
+const seamapiReactVersion = '2.12.0'
 
 export default seamapiReactVersion

package/src/styles/_supported-device-table.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use './colors';
 
 $row-height: 64px;
@@ -175,7 +176,11 @@ $see-all-button-height: 30px;
         0 1px 1px 0 rgb(16 27 37 / 10%),
         0 1px 8px 0 rgb(46 69 82 / 12%);
       position: absolute;
-      bottom: -($row-height - $see-all-button-height - $row-padding) / 2;
+      bottom: math.div(
+          -($row-height - $see-all-button-height - $row-padding),
+          2
+        )
+        or calc(-1 * ($row-height - $see-all-button-height - $row-padding) / 2);
       left: 50%;
       transform: translate(-50%, -47px);
       z-index: 3;