@seamapi/react 4.6.0 → 4.8.0

package/src/lib/ui/thermostat/ClimatePreset.tsx

@@ -0,0 +1,401 @@
+import classNames from 'classnames'
+import {
+  type HTMLAttributes,
+  type Ref,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
+import { Controller, useForm, type UseFormReturn } from 'react-hook-form'
+
+import { getErrorMessage } from 'lib/errors.js'
+import type {
+  FanModeSetting,
+  HvacModeSetting,
+  ThermostatClimatePreset,
+  ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
+import { fahrenheitToCelsius } from 'lib/seam/thermostats/unit-conversion.js'
+import { useCreateThermostatClimatePreset } from 'lib/seam/thermostats/use-create-thermostat-climate-preset.js'
+import { useUpdateThermostatClimatePreset } from 'lib/seam/thermostats/use-update-thermostat-climate-preset.js'
+import { Button } from 'lib/ui/Button.js'
+import { FormField } from 'lib/ui/FormField.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
+import { TextField } from 'lib/ui/TextField/TextField.js'
+import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
+import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
+import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
+
+export type ClimatePresetProps = {
+  preset?: ThermostatClimatePreset
+  onBack: () => void
+  device: ThermostatDevice
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+
+export function ClimatePreset(props: ClimatePresetProps): JSX.Element {
+  const { preset, onBack, device, ...attrs } = props
+
+  return (
+    <div
+      {...attrs}
+      className={classNames('seam-thermostat-climate-preset', attrs.className)}
+    >
+      <ContentHeader
+        title={preset == null ? t.crateNewPreset : preset.display_name}
+        onBack={onBack}
+      />
+      {preset == null ? (
+        <CreateForm device={device} onComplete={onBack} />
+      ) : (
+        <UpdateForm device={device} onComplete={onBack} preset={preset} />
+      )}
+    </div>
+  )
+}
+
+interface PresetFormProps {
+  defaultValues: {
+    key: string
+    name: string
+    hvacMode: HvacModeSetting | undefined
+    heatPoint: number | undefined
+    coolPoint: number | undefined
+    fanMode: FanModeSetting | undefined
+  }
+  onSubmit: (values: PresetFormProps['defaultValues']) => void
+  device: ThermostatDevice
+  loading: boolean
+  instanceRef?: Ref<UseFormReturn<PresetFormProps['defaultValues']> | undefined>
+  withKeyField?: boolean
+}
+
+function PresetForm(props: PresetFormProps): JSX.Element {
+  const {
+    defaultValues,
+    device,
+    instanceRef,
+    loading,
+    onSubmit,
+    withKeyField,
+  } = props
+  const form = useForm({ defaultValues })
+
+  useImperativeHandle(instanceRef, () => form)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    setValue,
+    control,
+  } = form
+
+  const state = watch()
+
+  const onHvacModeChange = (mode: HvacModeSetting): void => {
+    if (mode === 'heat_cool') {
+      setValue('heatPoint', defaultValues.heatPoint)
+      setValue('coolPoint', defaultValues.coolPoint)
+    } else if (mode === 'heat') {
+      setValue('heatPoint', defaultValues.heatPoint)
+      setValue('coolPoint', undefined)
+    } else if (mode === 'cool') {
+      setValue('heatPoint', undefined)
+      setValue('coolPoint', defaultValues.coolPoint)
+    } else {
+      setValue('heatPoint', undefined)
+      setValue('coolPoint', undefined)
+    }
+  }
+
+  const otherClimatePresets = useMemo(() => {
+    if (withKeyField !== true) return []
+
+    return (device.properties.available_climate_presets ?? []).filter(
+      (other) => other.climate_preset_key !== defaultValues.key
+    )
+  }, [defaultValues, device, withKeyField])
+
+  const onValid = useCallback(() => {
+    onSubmit(state)
+  }, [onSubmit, state])
+
+  return (
+    <div className='seam-main'>
+      <form
+        onSubmit={(e) => {
+          void handleSubmit(onValid)(e)
+        }}
+      >
+        {withKeyField === true && (
+          <FormField>
+            <InputLabel>Key</InputLabel>
+            <TextField
+              size='large'
+              clearable
+              hasError={errors.key != null}
+              helperText={errors.key?.message}
+              inputProps={{
+                ...register('key', {
+                  required: 'required',
+                  setValueAs: (value) => value.trim(),
+                  validate(value) {
+                    if (value.includes(' ')) {
+                      return t.keyCannotContainSpaces
+                    }
+
+                    const exists = otherClimatePresets.some(
+                      (other) => other.climate_preset_key === value
+                    )
+
+                    if (exists) {
+                      return t.keyAlreadyExists
+                    }
+
+                    return true
+                  },
+                }),
+              }}
+            />
+          </FormField>
+        )}
+
+        <FormField>
+          <InputLabel>{t.nameField}</InputLabel>
+          <TextField
+            size='large'
+            clearable
+            hasError={errors.name != null}
+            helperText={errors.name?.message}
+            inputProps={register('name', {
+              required: false,
+              setValueAs: (value) => value.trim(),
+            })}
+          />
+        </FormField>
+
+        {state.fanMode != null && (
+          <FormField>
+            <InputLabel>{t.fanModeField}</InputLabel>
+            <Controller
+              control={control}
+              name='fanMode'
+              render={({ field: { onChange, value } }) =>
+                value != null ? (
+                  <FanModeMenu
+                    block
+                    size='large'
+                    mode={value}
+                    onChange={onChange}
+                  />
+                ) : (
+                  <></>
+                )
+              }
+            />
+          </FormField>
+        )}
+
+        {state.hvacMode != null && (
+          <FormField>
+            <InputLabel>{t.hvacModeField}</InputLabel>
+            <Controller
+              control={control}
+              name='hvacMode'
+              render={({ field: { onChange, value } }) =>
+                value == null ? (
+                  <></>
+                ) : (
+                  <ClimateModeMenu
+                    block
+                    size='large'
+                    buttonTextVisible
+                    mode={value}
+                    onChange={(value) => {
+                      onHvacModeChange(value)
+                      onChange(value)
+                    }}
+                  />
+                )
+              }
+            />
+          </FormField>
+        )}
+
+        {state.hvacMode !== 'off' && state.hvacMode != null && (
+          <FormField>
+            <InputLabel>{t.heatCoolField}</InputLabel>
+            <TemperatureControlGroup
+              mode={state.hvacMode}
+              onHeatValueChange={(value) => {
+                setValue('heatPoint', value)
+              }}
+              onCoolValueChange={(value) => {
+                setValue('coolPoint', value)
+              }}
+              heatValue={state.heatPoint ?? 0}
+              coolValue={state.coolPoint ?? 0}
+              minHeat={device.properties.min_heating_cooling_delta_fahrenheit}
+              maxHeat={device.properties.max_heating_set_point_fahrenheit}
+              minCool={device.properties.min_cooling_set_point_fahrenheit}
+              maxCool={device.properties.max_cooling_set_point_fahrenheit}
+              delta={device.properties.min_heating_cooling_delta_fahrenheit}
+            />
+          </FormField>
+        )}
+
+        <div className='seam-climate-preset-buttons'>
+          <Button
+            type='submit'
+            variant='solid'
+            disabled={loading}
+            loading={loading}
+          >
+            {t.save}
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+interface CreateFormProps {
+  device: ThermostatDevice
+  onComplete: () => void
+}
+
+function CreateForm({ device, onComplete }: CreateFormProps): JSX.Element {
+  const { mutate, isError, error, isPending } =
+    useCreateThermostatClimatePreset()
+
+  const errorMessage = getErrorMessage(error)
+
+  const onSubmit = useCallback(
+    (values: PresetFormProps['defaultValues']) => {
+      mutate(
+        {
+          climate_preset_key: values.key,
+          device_id: device.device_id,
+          name: values.name === '' ? undefined : values.name,
+          cooling_set_point_fahrenheit: values.coolPoint,
+          heating_set_point_fahrenheit: values.heatPoint,
+          fan_mode_setting: values.fanMode,
+          cooling_set_point_celsius: fahrenheitToCelsius(values.coolPoint),
+          heating_set_point_celsius: fahrenheitToCelsius(values.heatPoint),
+          hvac_mode_setting: values.hvacMode,
+        },
+        { onSuccess: onComplete }
+      )
+    },
+    [device, mutate, onComplete]
+  )
+
+  return (
+    <>
+      <Snackbar
+        message={errorMessage}
+        variant='error'
+        visible={isError}
+        automaticVisibility
+      />
+
+      <PresetForm
+        defaultValues={{
+          key: '',
+          coolPoint: 60,
+          heatPoint: 80,
+          name: '',
+          hvacMode: 'off',
+          fanMode: 'auto',
+        }}
+        device={device}
+        loading={isPending}
+        onSubmit={onSubmit}
+        withKeyField
+      />
+    </>
+  )
+}
+
+interface UpdateFormProps {
+  device: ThermostatDevice
+  onComplete: () => void
+  preset: ThermostatClimatePreset
+}
+
+function UpdateForm({
+  device,
+  onComplete,
+  preset,
+}: UpdateFormProps): JSX.Element {
+  const { mutate, isError, error, isPending } =
+    useUpdateThermostatClimatePreset()
+
+  const defaultValues = useMemo<PresetFormProps['defaultValues']>(
+    () => ({
+      coolPoint: preset.cooling_set_point_fahrenheit,
+      heatPoint: preset.heating_set_point_fahrenheit,
+      name: preset.display_name,
+      hvacMode: preset.hvac_mode_setting,
+      fanMode: preset.fan_mode_setting,
+      key: preset.climate_preset_key,
+    }),
+    [preset]
+  )
+
+  const onSubmit = useCallback(
+    (values: PresetFormProps['defaultValues']) => {
+      mutate(
+        {
+          climate_preset_key: values.key,
+          device_id: device.device_id,
+          name: values.name === '' ? undefined : values.name,
+          cooling_set_point_fahrenheit: values.coolPoint,
+          heating_set_point_fahrenheit: values.heatPoint,
+          fan_mode_setting: values.fanMode,
+          cooling_set_point_celsius: fahrenheitToCelsius(values.coolPoint),
+          heating_set_point_celsius: fahrenheitToCelsius(values.heatPoint),
+          hvac_mode_setting: values.hvacMode,
+        },
+        { onSuccess: onComplete }
+      )
+    },
+    [device, mutate, onComplete]
+  )
+
+  const errorMessage = getErrorMessage(error)
+
+  return (
+    <>
+      <Snackbar
+        message={errorMessage}
+        variant='error'
+        visible={isError}
+        automaticVisibility
+      />
+
+      <PresetForm
+        defaultValues={defaultValues}
+        device={device}
+        loading={isPending}
+        onSubmit={onSubmit}
+      />
+    </>
+  )
+}
+
+const t = {
+  keyAlreadyExists: 'Climate Preset with this key already exists.',
+  keyCannotContainSpaces: 'Climate Preset key cannot contain spaces.',
+  nameField: 'Display Name (Optional)',
+  fanModeField: 'Fan Mode',
+  hvacModeField: 'HVAC Mode',
+  heatCoolField: 'Heat / Cool',
+  delete: 'Delete',
+  save: 'Save',
+  crateNewPreset: 'Create New Climate Preset',
+  unknownErrorOccured: 'An unknown error occurred.',
+}

package/src/lib/ui/thermostat/ClimatePresets.tsx

@@ -0,0 +1,251 @@
+import classNames from 'classnames'
+import { type HTMLAttributes, type ReactNode, useState } from 'react'
+
+import { getErrorMessage } from 'lib/errors.js'
+import { AddIcon } from 'lib/icons/Add.js'
+import { EditIcon } from 'lib/icons/Edit.js'
+import { FanIcon } from 'lib/icons/Fan.js'
+import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
+import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
+import { TrashIcon } from 'lib/icons/Trash.js'
+import type {
+  ThermostatClimatePreset,
+  ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
+import { getTemperatureUnitSymbol } from 'lib/seam/thermostats/unit-conversion.js'
+import { useDeleteThermostatClimatePreset } from 'lib/seam/thermostats/use-delete-thermostat-climate-preset.js'
+import { Button } from 'lib/ui/Button.js'
+import { IconButton } from 'lib/ui/IconButton.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { Popover } from 'lib/ui/Popover/Popover.js'
+import { PopoverContentPrompt } from 'lib/ui/Popover/PopoverContentPrompt.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
+import { Spinner } from 'lib/ui/Spinner/Spinner.js'
+import { ClimatePreset } from 'lib/ui/thermostat/ClimatePreset.js'
+
+interface ClimatePresetsManagement {
+  device: ThermostatDevice
+  onBack: () => void
+  temperatureUnit: 'fahrenheit' | 'celsius'
+}
+
+const CreateNewPresetSymbol = Symbol('CreateNewPreset')
+
+export function ClimatePresets(props: ClimatePresetsManagement): JSX.Element {
+  const { device, onBack } = props
+
+  const [selectedClimatePreset, setSelectedClimatePreset] = useState<
+    ThermostatClimatePreset | typeof CreateNewPresetSymbol | null
+  >(null)
+
+  const [
+    climatePresetKeySelectedForDeletion,
+    setClimatePresetKeySelectedForDeletion,
+  ] = useState<ThermostatClimatePreset['climate_preset_key'] | null>(null)
+
+  const { mutate, isError, error, isPending } =
+    useDeleteThermostatClimatePreset()
+
+  const errorMessage = getErrorMessage(error)
+
+  if (
+    selectedClimatePreset != null ||
+    selectedClimatePreset === CreateNewPresetSymbol
+  ) {
+    return (
+      <ClimatePreset
+        onBack={() => {
+          setSelectedClimatePreset(null)
+        }}
+        device={device}
+        preset={
+          selectedClimatePreset === CreateNewPresetSymbol
+            ? undefined
+            : selectedClimatePreset
+        }
+      />
+    )
+  }
+
+  return (
+    <>
+      <Snackbar
+        message={errorMessage}
+        variant='error'
+        visible={isError}
+        automaticVisibility
+      />
+
+      <div className='seam-thermostat-climate-presets'>
+        <ContentHeader title={t.title} onBack={onBack} />
+        <div className='seam-thermostat-climate-presets-body'>
+          <Button
+            onClick={() => {
+              setSelectedClimatePreset(CreateNewPresetSymbol)
+            }}
+            className='seam-climate-presets-add-button'
+          >
+            <AddIcon />
+            {t.createNew}
+          </Button>
+
+          <div className='seam-thermostat-climate-presets-cards'>
+            {device.properties.available_climate_presets.map((preset) => (
+              <PresetCard
+                onClickEdit={() => {
+                  setSelectedClimatePreset(preset)
+                }}
+                onClickDelete={() => {
+                  setClimatePresetKeySelectedForDeletion(
+                    preset.climate_preset_key
+                  )
+                  mutate({
+                    climate_preset_key: preset.climate_preset_key,
+                    device_id: device.device_id,
+                  })
+                }}
+                temperatureUnit={props.temperatureUnit}
+                preset={preset}
+                key={preset.climate_preset_key}
+                deletionLoading={
+                  isPending &&
+                  climatePresetKeySelectedForDeletion ===
+                    preset.climate_preset_key
+                }
+                disabled={
+                  isPending &&
+                  climatePresetKeySelectedForDeletion !==
+                    preset.climate_preset_key
+                }
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function PresetCard(
+  props: HTMLAttributes<HTMLDivElement> & {
+    preset: ThermostatClimatePreset
+    temperatureUnit: 'fahrenheit' | 'celsius'
+    onClickEdit: () => void
+    onClickDelete: () => void
+    deletionLoading?: boolean
+    disabled?: boolean
+  }
+): JSX.Element {
+  const {
+    preset,
+    temperatureUnit,
+    onClickEdit,
+    onClickDelete,
+    deletionLoading = false,
+    disabled = false,
+    ...attrs
+  } = props
+
+  const heatPoint =
+    temperatureUnit === 'fahrenheit'
+      ? preset.heating_set_point_fahrenheit
+      : (preset.heating_set_point_celsius ?? undefined)
+
+  const coolPoint =
+    temperatureUnit === 'fahrenheit'
+      ? preset.cooling_set_point_fahrenheit
+      : (preset.cooling_set_point_celsius ?? undefined)
+
+  const unitSymbol = getTemperatureUnitSymbol(temperatureUnit)
+
+  return (
+    <div
+      {...attrs}
+      className={classNames(
+        'seam-thermostat-climate-presets-card',
+        attrs.className
+      )}
+    >
+      <div className='seam-thermostat-climate-presets-card-top'>
+        <div className='seam-thermostat-climate-presets-card-name'>
+          {preset.display_name}
+
+          {preset.name != null && (
+            <div className='seam-thermostat-climate-presets-card-name-key'>
+              {preset.climate_preset_key}
+            </div>
+          )}
+        </div>
+
+        <div className='seam-thermostat-climate-presets-card-buttons'>
+          <IconButton
+            disabled={disabled || deletionLoading || !preset.can_edit}
+            onClick={onClickEdit}
+            title={t.edit}
+          >
+            <EditIcon />
+          </IconButton>
+
+          <Popover
+            content={({ hide }) => (
+              <PopoverContentPrompt
+                onCancel={hide}
+                onConfirm={() => {
+                  onClickDelete()
+                  hide()
+                }}
+              />
+            )}
+          >
+            {({ setRef }) => (
+              <IconButton
+                elRef={setRef}
+                disabled={disabled || !preset.can_delete}
+                title={t.delete}
+              >
+                {deletionLoading ? <Spinner size='small' /> : <TrashIcon />}
+              </IconButton>
+            )}
+          </Popover>
+        </div>
+      </div>
+
+      <div className='seam-thermostat-climate-presets-card-body'>
+        {heatPoint != null && (
+          <Chip
+            icon={<ThermostatHeatIcon />}
+            text={`${heatPoint} ${unitSymbol}`}
+          />
+        )}
+
+        {coolPoint != null && (
+          <Chip
+            icon={<ThermostatCoolIcon />}
+            text={`${coolPoint} ${unitSymbol}`}
+          />
+        )}
+
+        {preset.fan_mode_setting != null && (
+          <Chip icon={<FanIcon />} text={preset.fan_mode_setting} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Chip({ icon, text }: { icon: ReactNode; text: string }): JSX.Element {
+  return (
+    <div className='seam-thermostat-climate-preset-chip'>
+      <span className='seam-thermostat-climate-preset-chip-icon'>{icon}</span>
+      <span className='seam-thermostat-climate-preset-chip-value'>{text}</span>
+    </div>
+  )
+}
+
+const t = {
+  title: 'Climate Presets',
+  createNew: 'Create New',
+  delete: 'Delete',
+  edit: 'Edit',
+  climatePresetNotFound: 'Climate Preset not found.',
+}

package/src/lib/ui/thermostat/FanModeMenu.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { FanIcon } from 'lib/icons/Fan.js'
 import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
@@ -10,13 +12,29 @@ const modes: FanModeSetting[] = ['auto', 'on']
 interface FanModeMenuProps {
   mode: FanModeSetting
   onChange: (mode: FanModeSetting) => void
+  block?: boolean
+  size?: 'regular' | 'large'
 }
 
-export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
+export function FanModeMenu({
+  mode,
+  onChange,
+  block,
+  size = 'regular',
+}: FanModeMenuProps): JSX.Element {
   return (
     <Menu
       renderButton={({ onOpen }) => (
-        <button onClick={onOpen} className='seam-fan-mode-menu-button'>
+        <button
+          onClick={onOpen}
+          className={classNames(
+            'seam-fan-mode-menu-button',
+            `seam-fan-mode-menu-button-size-${size}`,
+            {
+              'seam-fan-mode-menu-button-block-sized': block,
+            }
+          )}
+        >
           <div className='seam-fan-mode-menu-button-block'>
             <FanOutlineIcon />
             <span className='seam-fan-mode-menu-button-text'>