@seamapi/react 1.49.0 → 1.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.49.0",
+  "version": "1.51.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.9.0",
+    "seamapi": "^8.9.2",
     "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.3.0",
-    "@seamapi/fake-seam-connect": "^1.9.0",
+    "@seamapi/fake-seam-connect": "^1.9.1",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",

package/src/lib/icons/Bee.tsx

@@ -0,0 +1,21 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function BeeIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={33}
+      height={33}
+      fill='none'
+      {...props}
+    >
+      <path
+        fill='#5DBE77'
+        d='M23.902 25.469c-.18.263-3.2-.2-4.15-5.212-.95-5.01 1.214-5.411 1.214-5.411s2.745-.79 4.086 4.938c1.225 5.21-1.15 5.685-1.15 5.685Zm-8.437-6.917h-.01c-1.468-.98-1.996-1.853-1.996-1.853 1.257-.18 2.724-.958 2.724-.958l.813.568v.01l.834.548s-.18 1.643.106 2.874c0 0-1.014-.168-2.46-1.168m-9.63-5.327s-.422-2.4 4.931-3.18c5.881-.852 6.156 2 6.156 2s.412 2.18-4.646 3.138c-5.068.958-6.62-1.695-6.44-1.958Zm14.149-6.117c.612.421.77 1.242.348 1.853a1.33 1.33 0 0 1-1.858.347 1.322 1.322 0 0 1-.348-1.852 1.33 1.33 0 0 1 1.858-.348Zm4.445 3.022c.612.41.77 1.242.36 1.853-.413.61-1.247.758-1.86.347a1.322 1.322 0 0 1-.348-1.853 1.33 1.33 0 0 1 1.859-.347m2.523 10.58c-.37-3.053-2.006-5.496-2.64-6.19 0 0-.063-.021-.01-.148.053-.126.158-.495.158-.495s0-.042.074-.063c.074-.02.834-.179 1.426-1.042.59-.863.971-2.653-1.046-4.022 0 0-.01 0-.031-.094-.01-.085-.338-1.548-1.225-2.159-.887-.6-2.376-.368-2.46-.347-.085.021-.095 0-.095 0-2.017-1.369-3.548-.358-4.14.505-.59.864-.453 1.632-.453 1.706 0 .074-.032.084-.032.084l-.401.327c-.095.084-.138.042-.138.042-.886-.337-3.769-.969-6.747-.19-2.977.78-4.16 1.874-4.814 2.832-.655.958-1.024 2.874 1.024 4.264 2.048 1.39 4.952 1.263 4.952 1.263.084 0 .095.063.095.063.707 2.506 3.051 3.97 3.21 4.075.158.116 2.386 1.747 4.973 1.484 0 0 .063-.01.095.074 0 0 .95 2.737 2.988 4.127 2.048 1.39 3.696.347 4.35-.61.655-.959 1.246-2.454.887-5.496m-9.914 3.074s-1.964.084-4.213-1.443c-2.25-1.526-2.893-3.38-2.893-3.38-.053-.146-.106-.052-.106-.052-.602.885-.781 1.39-.443 2.8.327 1.359 1.974 2.517 2.09 2.601.116.074 1.795 1.18 3.189.99 1.436-.2 1.848-.558 2.45-1.443 0 0 .063-.084-.085-.073m-4.424 2.39s-.95 0-1.943-.664l-.507.737.507-.747c-.992-.674-1.34-1.558-1.34-1.558-.16-.243-.201 0-.201 0-.55 2.116.39 3.032.475 3.105.095.042 1.298.58 3.072-.705 0 0 .211-.126-.074-.179'
+      />
+    </svg>
+  )
+}

package/src/lib/icons/Fan.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function FanIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={18}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='fan_svg__a'
+        width={18}
+        height={18}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h18v18H0z' />
+      </mask>
+      <g mask='url(#fan_svg__a)'>
+        <path
+          fill='#9DA1A9'
+          d='M9.921 16.456c-.61.164-1.124.106-1.539-.175a1.916 1.916 0 0 1-.81-1.12 2.188 2.188 0 0 1-.037-.963c.059-.33.207-.63.443-.899.218-.238.373-.51.464-.818.091-.306.127-.618.106-.933l-.244-.05a1.154 1.154 0 0 1-.231-.073l-1.495 1.036c-.184.126-.365.24-.544.338-.18.1-.37.177-.574.231-.755.202-1.51.052-2.268-.451-.757-.503-1.306-1.39-1.646-2.66-.164-.61-.106-1.123.174-1.539.28-.415.648-.684 1.104-.806.311-.083.635-.096.971-.038.337.057.64.204.908.44.238.219.51.373.817.465.307.09.619.126.934.106l.05-.245c.017-.081.041-.158.073-.231L5.54 6.577a6.808 6.808 0 0 1-.339-.545 2.446 2.446 0 0 1-.225-.556c-.206-.766-.057-1.528.446-2.286.503-.757 1.39-1.306 2.66-1.646.61-.164 1.123-.105 1.539.175.415.28.683.648.805 1.103.084.311.097.635.04.972a1.818 1.818 0 0 1-.441.907c-.219.238-.374.511-.465.818a2.655 2.655 0 0 0-.106.933l.245.05c.081.017.158.041.231.073l1.49-1.054c.184-.126.363-.235.538-.327.174-.091.363-.165.566-.22.97-.26 1.803-.052 2.497.622s1.173 1.502 1.436 2.485c.164.61.096 1.126-.202 1.546a2.021 2.021 0 0 1-2.075.845 1.865 1.865 0 0 1-.88-.448 2.064 2.064 0 0 0-.818-.464 2.655 2.655 0 0 0-.933-.106l-.05.244a1.154 1.154 0 0 1-.073.231l1.036 1.494c.123.173.232.34.326.5.095.161.167.337.219.529.22.775.082 1.55-.417 2.326-.498.775-1.388 1.335-2.67 1.678Zm-.63-6.378c.3-.08.526-.253.679-.519.153-.266.19-.548.11-.848-.08-.3-.253-.526-.52-.68a1.076 1.076 0 0 0-.847-.109c-.3.08-.526.253-.68.52-.153.265-.19.547-.11.847.081.3.254.526.52.68.266.153.548.19.848.11Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/Off.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function OffIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={16}
+      height={16}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='off_svg__a'
+        width={16}
+        height={16}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M.421.5h15v15h-15z' />
+      </mask>
+      <g mask='url(#off_svg__a)'>
+        <path
+          fill='#9DA1A9'
+          d='M12.78 14.64 11.36 13.22a6.404 6.404 0 0 1-1.633.765 6.127 6.127 0 0 1-1.805.266 6.086 6.086 0 0 1-2.437-.492 6.311 6.311 0 0 1-1.985-1.336 6.312 6.312 0 0 1-1.336-1.985A6.086 6.086 0 0 1 1.671 8c0-.625.089-1.227.266-1.805a6.4 6.4 0 0 1 .766-1.633L1.28 3.141l.89-.891 11.5 11.5-.89.89ZM7.922 13a4.955 4.955 0 0 0 2.532-.688L3.609 5.47A4.956 4.956 0 0 0 2.92 8c0 1.385.487 2.565 1.461 3.54.974.973 2.154 1.46 3.54 1.46Zm5.219-1.563-.906-.906A4.955 4.955 0 0 0 12.922 8c0-1.385-.488-2.565-1.462-3.54C10.486 3.488 9.307 3 7.921 3a4.955 4.955 0 0 0-2.531.688l-.906-.907a6.4 6.4 0 0 1 1.633-.765A6.127 6.127 0 0 1 7.92 1.75c.865 0 1.677.164 2.438.492.76.328 1.422.774 1.984 1.336a6.311 6.311 0 0 1 1.336 1.985c.328.76.492 1.572.492 2.437 0 .625-.088 1.227-.265 1.805a6.399 6.399 0 0 1-.766 1.633Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleCard.tsx

@@ -12,22 +12,28 @@ import { ClimateSettingScheduleDeviceBar } from './ClimateSettingScheduleDeviceB
 
 interface ClimateSettingScheduleCardProps {
   climateSettingScheduleId: string
+  onSelectDevice: (deviceId: string) => void
 }
 
 export function ClimateSettingScheduleCard({
   climateSettingScheduleId,
+  onSelectDevice,
 }: ClimateSettingScheduleCardProps): JSX.Element {
   return (
     <div className='seam-climate-setting-schedule-card'>
-      <Content climateSettingScheduleId={climateSettingScheduleId} />
+      <Content
+        climateSettingScheduleId={climateSettingScheduleId}
+        onSelectDevice={onSelectDevice}
+      />
     </div>
   )
 }
 
 function Content(props: {
   climateSettingScheduleId: string
+  onSelectDevice: (deviceId: string) => void
 }): JSX.Element | null {
-  const { climateSettingScheduleId } = props
+  const { climateSettingScheduleId, onSelectDevice } = props
 
   const { climateSettingSchedule } = useClimateSettingSchedule(
     climateSettingScheduleId
@@ -57,6 +63,7 @@ function Content(props: {
         </div>
       </div>
       <ClimateSettingScheduleDeviceBar
+        onSelectDevice={onSelectDevice}
         deviceId={climateSettingSchedule.device_id}
       />
     </div>

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

@@ -1,4 +1,7 @@
 import classNames from 'classnames'
+import { useState } from 'react'
+
+import { DeviceDetails } from '../index.js'
 
 import { formatDateAndTime } from 'lib/dates.js'
 import { ArrowRightIcon } from 'lib/icons/ArrowRight.js'
@@ -26,6 +29,8 @@ export function ClimateSettingScheduleDetails({
     climateSettingScheduleId
   )
 
+  const [selectedDeviceId, selectDevice] = useState<string | null>(null)
+
   if (climateSettingSchedule == null) {
     return null
   }
@@ -33,6 +38,18 @@ export function ClimateSettingScheduleDetails({
   const isManualOverrideAllowed =
     climateSettingSchedule.manual_override_allowed ?? false
 
+  if (selectedDeviceId != null) {
+    return (
+      <DeviceDetails
+        className={className}
+        deviceId={selectedDeviceId}
+        onBack={() => {
+          selectDevice(null)
+        }}
+      />
+    )
+  }
+
   return (
     <div
       className={classNames('seam-climate-setting-schedule-details', className)}
@@ -41,6 +58,7 @@ export function ClimateSettingScheduleDetails({
       <div className='seam-climate-setting-schedule-details-content'>
         <ClimateSettingScheduleCard
           climateSettingScheduleId={climateSettingScheduleId}
+          onSelectDevice={selectDevice}
         />
         <div className='seam-default-setting-message-container'>
           <span className='seam-default-setting-message'>

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.tsx

@@ -7,8 +7,10 @@ import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 
 export function ClimateSettingScheduleDeviceBar({
   deviceId,
+  onSelectDevice,
 }: {
   deviceId: string
+  onSelectDevice: (deviceId: string) => void
 }): JSX.Element | null {
   const { isLoading, device } = useDevice({
     device_id: deviceId,
@@ -26,14 +28,22 @@ export function ClimateSettingScheduleDeviceBar({
     return null
   }
 
-  return <Content device={device} />
+  return <Content device={device} onSelectDevice={onSelectDevice} />
 }
 
-function Content(props: { device: ThermostatDevice }): JSX.Element {
-  const { device } = props
+function Content(props: {
+  device: ThermostatDevice
+  onSelectDevice: (deviceId: string) => void
+}): JSX.Element {
+  const { device, onSelectDevice } = props
 
   return (
-    <div className='seam-climate-setting-schedule-device-bar'>
+    <div
+      className='seam-climate-setting-schedule-device-bar'
+      onClick={() => {
+        onSelectDevice(device.device_id)
+      }}
+    >
       <div className='seam-climate-setting-schedule-device-content'>
         <div className='seam-device-image'>
           <DeviceImage device={device} />

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

@@ -1,6 +1,7 @@
-import { isLockDevice } from 'seamapi'
+import { isLockDevice, isThermostatDevice } from 'seamapi'
 
 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'
 
 export interface DeviceDetailsProps {
@@ -35,5 +36,9 @@ export function DeviceDetails({
     )
   }
 
+  if (isThermostatDevice(device)) {
+    return <ThermostatDeviceDetails device={device} />
+  }
+
   return null
 }

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

@@ -0,0 +1,175 @@
+import classNames from 'classnames'
+import { useState } from 'react'
+import type { ThermostatDevice } from 'seamapi'
+
+import { BeeIcon } from 'lib/icons/Bee.js'
+import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
+import { ClimateSettingScheduleTable } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js'
+import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
+import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { DetailRow } from 'lib/ui/layout/DetailRow.js'
+import { DetailSection } from 'lib/ui/layout/DetailSection.js'
+import { DetailSectionGroup } from 'lib/ui/layout/DetailSectionGroup.js'
+import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
+import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
+
+export function ThermostatDeviceDetails(props: {
+  device: ThermostatDevice
+  onBack?: () => void
+  className?: string
+}): JSX.Element | null {
+  const { device, onBack, className } = props
+
+  const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)
+
+  const { connectedAccount } = useConnectedAccount(device.connected_account_id)
+
+  const {
+    climateSettingSchedules,
+    isLoading: isLoadingClimateSchedules,
+    isError: isErrorClimateSchedules,
+  } = useClimateSettingSchedules({
+    device_id: device.device_id,
+  })
+
+  const isClimateSchedulesPlural = climateSettingSchedules?.length !== 1
+
+  if (climateSettingsOpen) {
+    return (
+      <ClimateSettingScheduleTable
+        deviceId={device.device_id}
+        onBack={() => {
+          setClimateSettingsOpen(false)
+        }}
+      />
+    )
+  }
+
+  if (device == null) {
+    return null
+  }
+
+  return (
+    <div className={classNames('seam-device-details', className)}>
+      <ContentHeader title={t.thermostat} onBack={onBack} />
+
+      <div className='seam-body'>
+        <ThermostatCard device={device} />
+
+        <div className='seam-thermostat-device-details'>
+          <DetailSectionGroup>
+            <DetailSection
+              label={t.scheduledClimates}
+              tooltipContent={t.scheduledClimatesTooltip}
+            >
+              <DetailRow
+                label={
+                  isLoadingClimateSchedules || isErrorClimateSchedules
+                    ? t.viewingClimateSchedules
+                    : `${climateSettingSchedules?.length} ${
+                        isClimateSchedulesPlural
+                          ? t.climateSchedules
+                          : t.climateSchedule
+                      }`
+                }
+                onClick={() => {
+                  setClimateSettingsOpen(true)
+                }}
+              >
+                <div className='seam-detail-row-rotated-icon'>
+                  <ChevronWideIcon />
+                </div>
+              </DetailRow>
+            </DetailSection>
+
+            <DetailSection
+              label={t.currentSettings}
+              tooltipContent={t.currentSettingsTooltip}
+            >
+              <DetailRow label={t.climate}>
+                <ClimateSettingStatus
+                  climateSetting={device.properties.current_climate_setting}
+                  temperatureUnit='fahrenheit'
+                />
+              </DetailRow>
+            </DetailSection>
+
+            <DetailSection
+              label={t.defaultSettings}
+              tooltipContent={t.defaultSettingsTooltip}
+            >
+              <DetailRow label={t.defaultClimate}>
+                {/* @ts-expect-error not currently included in sdk */}
+                {device.properties.default_climate_setting != null ? (
+                  <ClimateSettingStatus
+                    climateSetting={device.properties.current_climate_setting}
+                    temperatureUnit='fahrenheit'
+                  />
+                ) : (
+                  <p>{t.none}</p>
+                )}
+              </DetailRow>
+              <DetailRow label={t.allowManualOverride}>
+                <p>
+                  {device.properties.current_climate_setting
+                    .manual_override_allowed
+                    ? t.yes
+                    : t.no}
+                </p>
+              </DetailRow>
+            </DetailSection>
+
+            <DetailSection
+              label={t.deviceDetails}
+              tooltipContent={t.deviceDetailsTooltip}
+            >
+              <DetailRow label={t.brand}>
+                <div className='seam-detail-row-hstack'>
+                  {device.properties.model.manufacturer_display_name}
+                  {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
+                </div>
+              </DetailRow>
+              <DetailRow
+                label={t.linkedAccount}
+                sublabel={
+                  connectedAccount?.user_identifier?.email ??
+                  device.connected_account_id
+                }
+              />
+              <DetailRow label={t.deviceId} sublabel={device.device_id} />
+            </DetailSection>
+          </DetailSectionGroup>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  thermostat: 'Thermostat',
+  climateSchedule: 'scheduled climate',
+  climateSchedules: 'scheduled climates',
+  viewingClimateSchedules: 'View scheduled climates',
+  scheduledClimates: 'Scheduled climates',
+  scheduledClimatesTooltip:
+    "Scheduled climates let you automatically change the thermostat's climate at a set time.",
+  currentSettings: 'Current settings',
+  currentSettingsTooltip:
+    'These are the settings currently on the device. If you change them here, they change on the device.',
+  climate: 'Climate',
+  defaultSettings: 'Default settings',
+  defaultSettingsTooltip:
+    'When a scheduled climate reaches its end time, the default settings will kick in.',
+  defaultClimate: 'Default climate',
+  allowManualOverride: 'Allow manual override',
+  deviceDetails: 'Device details',
+  deviceDetailsTooltip:
+    'When a scheduled climate reaches its end time, the default settings will kick in.',
+  brand: 'Brand',
+  linkedAccount: 'Linked account',
+  deviceId: 'Device ID',
+  none: 'None',
+  yes: 'Yes',
+  no: 'No',
+}

package/src/lib/seam/connected-accounts/use-connected-account.ts

@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query'
+import type {
+  ConnectedAccount,
+  ConnectedAccountsGetRequest,
+  ConnectedAccountsGetResponse,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseConnectedAccountParams = ConnectedAccountsGetRequest | string
+export type UseConnectedAccountData = ConnectedAccount | null
+
+export function useConnectedAccount(
+  params: UseConnectedAccountParams
+): UseSeamQueryResult<'connectedAccount', UseConnectedAccountData> {
+  const normalizedParams =
+    typeof params === 'string' ? { connected_account_id: params } : params
+
+  const { client } = useSeamClient()
+  const { data, ...rest } = useQuery<
+    ConnectedAccountsGetResponse['connected_account'] | null,
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['connected_accounts', 'get', normalizedParams],
+    queryFn: async () => {
+      if (client == null) return null
+      return await client.connectedAccounts.get(normalizedParams)
+    },
+  })
+
+  return { ...rest, connectedAccount: data }
+}

package/src/lib/seam/index.ts

@@ -1,7 +1,9 @@
 export * from './access-codes/use-access-code.js'
 export * from './access-codes/use-access-codes.js'
 export * from './access-codes/use-create-access-code.js'
+export * from './access-codes/use-generate-access-code-code.js'
 export * from './connect-webviews/use-create-connect-webview.js'
+export * from './connected-accounts/use-connected-account.js'
 export * from './devices/use-device.js'
 export * from './devices/use-device-providers.js'
 export * from './devices/use-devices.js'

package/src/lib/ui/layout/DetailRow.tsx

@@ -1,16 +1,29 @@
+import classNames from 'classnames'
 import type { PropsWithChildren } from 'react'
 
 interface DetailRowProps {
   label: string
+  sublabel?: string
+  onClick?: () => void
 }
 
 export function DetailRow({
   label,
+  sublabel,
+  onClick,
   children,
 }: PropsWithChildren<DetailRowProps>): JSX.Element {
   return (
-    <div className='seam-detail-row'>
-      <p className='seam-row-label'>{label}</p>
+    <div
+      className={classNames('seam-detail-row', {
+        'seam-detail-row-clickable': onClick != null,
+      })}
+      onClick={onClick}
+    >
+      <div className='seam-detail-row-label-wrap'>
+        <p className='seam-row-label'>{label}</p>
+        {sublabel != null && <p className='seam-row-sublabel'>{sublabel}</p>}
+      </div>
       <div className='seam-detail-row-right-area-content'>{children}</div>
     </div>
   )

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

@@ -4,9 +4,10 @@ import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { ThermostatOffIcon } from 'lib/icons/ThermostatOff.js'
+import { Temperature } from 'lib/ui/thermostat/Temperature.js'
 
 interface ClimateSettingStatusProps {
-  climateSetting: Partial<ClimateSetting>
+  climateSetting: ClimateSetting
   temperatureUnit?: 'fahrenheit' | 'celsius'
   iconPlacement?: 'left' | 'right'
 }
@@ -23,16 +24,14 @@ export function ClimateSettingStatus({
       )}
       <Content
         mode={climateSetting.hvac_mode_setting}
-        coolingSetPoint={formatTemperatureValue(
-          temperatureUnit === 'fahrenheit'
-            ? climateSetting.cooling_set_point_fahrenheit
-            : climateSetting.cooling_set_point_celsius
-        )}
-        heatingSetPoint={formatTemperatureValue(
-          temperatureUnit === 'fahrenheit'
-            ? climateSetting.heating_set_point_fahrenheit
-            : climateSetting.heating_set_point_celsius
-        )}
+        coolingSetPoint={{
+          fahrenheit: climateSetting.cooling_set_point_fahrenheit,
+          celsius: climateSetting.cooling_set_point_celsius,
+        }}
+        heatingSetPoint={{
+          fahrenheit: climateSetting.heating_set_point_fahrenheit,
+          celsius: climateSetting.heating_set_point_celsius,
+        }}
         temperatureUnit={temperatureUnit}
       />
       {iconPlacement === 'right' && (
@@ -51,33 +50,42 @@ function ClimateSettingIcon(props: {
     <div className='seam-climate-setting-status-icon'>
       {mode === 'cool' && <ThermostatCoolIcon />}
       {mode === 'heat' && <ThermostatHeatIcon />}
-      {mode === 'heatcool' && <ThermostatHeatCoolIcon />}
+      {mode === 'heat_cool' && <ThermostatHeatCoolIcon />}
       {mode === 'off' && <ThermostatOffIcon />}
     </div>
   )
 }
 
+interface SetPoint {
+  fahrenheit: number
+  celsius: number
+}
+
 function Content(props: {
   mode: ClimateSetting['hvac_mode_setting']
-  coolingSetPoint: string
-  heatingSetPoint: string
+  coolingSetPoint: Partial<SetPoint>
+  heatingSetPoint: Partial<SetPoint>
   temperatureUnit: 'fahrenheit' | 'celsius'
 }): JSX.Element | null {
   const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
-  const hasCoolingSetPoint = coolingSetPoint !== undefined
-  const hasHeatingSetPoint = heatingSetPoint !== undefined
-  const unit =
-    temperatureUnit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius
 
-  if (mode === 'cool' && hasCoolingSetPoint)
-    return <span>{`${coolingSetPoint}${unit}`}</span>
+  if (mode === 'cool' && isSetPoint(coolingSetPoint))
+    return <Temperature {...coolingSetPoint} unit={temperatureUnit} />
 
-  if (mode === 'heat' && hasHeatingSetPoint)
-    return <span>{`${heatingSetPoint}${unit}`}</span>
+  if (mode === 'heat' && isSetPoint(heatingSetPoint))
+    return <Temperature {...heatingSetPoint} unit={temperatureUnit} />
 
-  if (mode === 'heatcool' && hasHeatingSetPoint && hasCoolingSetPoint)
+  if (
+    mode === 'heat_cool' &&
+    isSetPoint(heatingSetPoint) &&
+    isSetPoint(coolingSetPoint)
+  )
     return (
-      <span>{`${heatingSetPoint}${unit} - ${coolingSetPoint}${unit}`}</span>
+      <span>
+        <Temperature {...heatingSetPoint} unit={temperatureUnit} />
+        {' - '}
+        <Temperature {...coolingSetPoint} unit={temperatureUnit} />
+      </span>
     )
 
   if (mode === 'off') return <span>{t.off}</span>
@@ -85,14 +93,10 @@ function Content(props: {
   return null
 }
 
-const formatTemperatureValue = (value: number | undefined): string => {
-  if (value == null) return '0'
-  if (Number.isInteger(value)) return value.toFixed()
-  return value.toFixed(1)
+function isSetPoint(setPoint: Partial<SetPoint>): setPoint is SetPoint {
+  return setPoint.fahrenheit != null && setPoint.celsius != null
 }
 
 const t = {
-  degreeFahrenheit: '°F',
-  degreeCelsius: '°C',
   off: 'Off',
 }

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

@@ -0,0 +1,26 @@
+interface TemperatureProps {
+  fahrenheit: number
+  celsius: number
+  unit?: 'fahrenheit' | 'celsius'
+}
+
+export function Temperature({
+  fahrenheit,
+  celsius,
+  unit = 'fahrenheit',
+}: TemperatureProps): JSX.Element {
+  const temperature = unit === 'fahrenheit' ? fahrenheit : celsius
+  const degree = unit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius
+
+  return (
+    <span>
+      {Math.trunc(temperature)}
+      {degree}
+    </span>
+  )
+}
+
+const t = {
+  degreeFahrenheit: '°F',
+  degreeCelsius: '°C',
+}