@seamapi/react 1.48.1 → 1.50.0

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/AccessCodeDetails/AccessCodeDetails.tsx

@@ -8,12 +8,15 @@ import type {
   DeviceError,
 } from 'seamapi'
 
+import { CopyIcon } from 'lib/icons/Copy.js'
 import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
 import { useDeleteAccessCode } from 'lib/seam/access-codes/use-delete-access-code.js'
 import { AccessCodeDevice } from 'lib/seam/components/AccessCodeDetails/AccessCodeDevice.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { Button } from 'lib/ui/Button.js'
+import { copyToClipboard } from 'lib/ui/clipboard.js'
+import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
@@ -82,7 +85,16 @@ export function AccessCodeDetails({
         >
           <span className='seam-label'>{t.accessCode}</span>
           <h5 className='seam-access-code-name'>{name}</h5>
-          <div className='seam-code'>{accessCode.code}</div>
+          <div className='seam-code'>
+            <span>{accessCode.code}</span>
+            <IconButton
+              onClick={() => {
+                void copyToClipboard(accessCode.code ?? '')
+              }}
+            >
+              <CopyIcon />
+            </IconButton>
+          </div>
           <div className='seam-duration'>
             <Duration accessCode={accessCode} />
           </div>
@@ -117,7 +129,16 @@ export function AccessCodeDetails({
       <div className='seam-details'>
         <div className='seam-row'>
           <div className='seam-heading'>{t.id}:</div>
-          <div className='seam-content'>{accessCode.access_code_id}</div>
+          <div className='seam-content seam-code-id'>
+            <span>{accessCode.access_code_id}</span>
+            <IconButton
+              onClick={() => {
+                void copyToClipboard(accessCode.access_code_id)
+              }}
+            >
+              <CopyIcon />
+            </IconButton>
+          </div>
         </div>
         <div className='seam-row'>
           <div className='seam-heading'>{t.created}:</div>

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.element.ts

@@ -0,0 +1,13 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { ClimateSettingScheduleDetailsProps } from './ClimateSettingScheduleDetails.js'
+
+export const name = 'seam-climate-setting-schedule-details'
+
+export const props: ElementProps<ClimateSettingScheduleDetailsProps> = {
+  climateSettingScheduleId: 'string',
+  onBack: 'object',
+  className: 'string',
+}
+
+export { ClimateSettingScheduleDetails as Component } from './ClimateSettingScheduleDetails.js'

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

@@ -0,0 +1,121 @@
+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'
+import { useClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedule.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 { ClimateSettingScheduleCard } from './ClimateSettingScheduleCard.js'
+
+export interface ClimateSettingScheduleDetailsProps {
+  climateSettingScheduleId: string
+  onBack?: () => void
+  className?: string
+}
+
+export function ClimateSettingScheduleDetails({
+  climateSettingScheduleId,
+  onBack,
+  className,
+}: ClimateSettingScheduleDetailsProps): JSX.Element | null {
+  const { climateSettingSchedule } = useClimateSettingSchedule(
+    climateSettingScheduleId
+  )
+
+  const [selectedDeviceId, selectDevice] = useState<string | null>(null)
+
+  if (climateSettingSchedule == null) {
+    return null
+  }
+
+  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)}
+    >
+      <ContentHeader title={t.climateSettingSchedule} onBack={onBack} />
+      <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'>
+            {t.defaultSettingMessagePart1}{' '}
+            <span className='seam-default-setting-text'>
+              {t.defaultSetting}
+            </span>{' '}
+            {t.defaultSettingMessagePart2}
+          </span>
+        </div>
+        <DetailSectionGroup>
+          <DetailSection>
+            <DetailRow label={t.startEndTime}>
+              <span className='seam-climate-setting-details-value seam-climate-setting-details-schedule-range'>
+                {`${formatDateAndTime(
+                  climateSettingSchedule.schedule_starts_at
+                )}`}
+                <ArrowRightIcon />
+                {`${formatDateAndTime(
+                  climateSettingSchedule.schedule_ends_at
+                )}`}
+              </span>
+            </DetailRow>
+            <DetailRow label={t.climateSetting}>
+              <ClimateSettingStatus
+                climateSetting={climateSettingSchedule}
+                iconPlacement='right'
+              />
+            </DetailRow>
+            <DetailRow label={t.allowManualOverride}>
+              <span className='seam-climate-setting-details-value'>
+                {isManualOverrideAllowed ? t.on : t.off}
+              </span>
+            </DetailRow>
+          </DetailSection>
+          <DetailSection>
+            <DetailRow label={t.creationDate}>
+              <div className='seam-creation-date'>
+                {formatDateAndTime(climateSettingSchedule.created_at)}
+              </div>
+            </DetailRow>
+          </DetailSection>
+        </DetailSectionGroup>
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  climateSettingSchedule: 'Climate setting schedule',
+  startEndTime: 'Start/End Time',
+  climateSetting: 'Climate setting',
+  allowManualOverride: 'Allow manual override',
+  creationDate: 'Creation date',
+  defaultSettingMessagePart1: 'Thermostat will return to its',
+  defaultSetting: 'default setting',
+  defaultSettingMessagePart2: 'at end time.',
+  on: 'On',
+  off: 'Off',
+}

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

@@ -1,14 +1,16 @@
 import { isThermostatDevice, type ThermostatDevice } from 'seamapi'
 
-import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 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} />
@@ -48,7 +58,9 @@ function Content(props: { device: ThermostatDevice }): JSX.Element {
           </div>
         </div>
       </div>
-      <ChevronRightIcon />
+      <div className='seam-climate-setting-schedule-device-chevron'>
+        <ChevronWideIcon />
+      </div>
     </div>
   )
 }

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.element.ts

@@ -7,6 +7,8 @@ export const name = 'seam-climate-setting-schedule-table'
 export const props: ElementProps<ClimateSettingScheduleTableProps> = {
   deviceId: 'string',
   disableSearch: 'boolean',
+  onClimateSettingScheduleClick: 'object',
+  preventDefaultOnClimateSettingScheduleClick: 'boolean',
   climateSettingScheduleFilter: 'object',
   climateSettingScheduleComparator: 'object',
   onBack: 'object',

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

@@ -1,8 +1,9 @@
 import classNames from 'classnames'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import type { ClimateSettingSchedule } from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
+import { ClimateSettingScheduleDetails } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.js'
 import {
   useClimateSettingSchedules,
   type UseClimateSettingSchedulesData,
@@ -20,6 +21,8 @@ import { ClimateSettingScheduleRow } from './ClimateSettingScheduleRow.js'
 export interface ClimateSettingScheduleTableProps {
   deviceId: string
   disableSearch?: boolean
+  onClimateSettingScheduleClick?: (climateSettingScheduleId: string) => void
+  preventDefaultOnClimateSettingScheduleClick?: boolean
   climateSettingScheduleFilter?: (
     climateSettingSchedule: ClimateSettingSchedule,
     searchInputValue: string
@@ -46,8 +49,11 @@ const defaultClimateSettingScheduleFilter = (
 export function ClimateSettingScheduleTable({
   deviceId,
   disableSearch = false,
+  onClimateSettingScheduleClick = () => {},
+  preventDefaultOnClimateSettingScheduleClick = false,
   climateSettingScheduleFilter = defaultClimateSettingScheduleFilter,
   climateSettingScheduleComparator = compareByCreatedAtDesc,
+
   onBack,
   heading = t.climateSettingSchedules,
   className,
@@ -58,6 +64,10 @@ export function ClimateSettingScheduleTable({
     })
 
   const [searchInputValue, setSearchInputValue] = useState('')
+  const [
+    selectedViewClimateSettingScheduleId,
+    setSelectedViewClimateSettingScheduleId,
+  ] = useState<string | null>(null)
 
   const filteredClimateSettingSchedules = useMemo(
     () =>
@@ -74,6 +84,31 @@ export function ClimateSettingScheduleTable({
     ]
   )
 
+  const handleClimateSettingScheduleClick = useCallback(
+    (climateSettingScheduleId: string): void => {
+      onClimateSettingScheduleClick(climateSettingScheduleId)
+      if (preventDefaultOnClimateSettingScheduleClick) return
+      setSelectedViewClimateSettingScheduleId(climateSettingScheduleId)
+    },
+    [
+      onClimateSettingScheduleClick,
+      preventDefaultOnClimateSettingScheduleClick,
+      setSelectedViewClimateSettingScheduleId,
+    ]
+  )
+
+  if (selectedViewClimateSettingScheduleId != null) {
+    return (
+      <ClimateSettingScheduleDetails
+        className={className}
+        climateSettingScheduleId={selectedViewClimateSettingScheduleId}
+        onBack={() => {
+          setSelectedViewClimateSettingScheduleId(null)
+        }}
+      />
+    )
+  }
+
   if (isLoading) {
     return <p className={className}>...</p>
   }
@@ -105,7 +140,7 @@ export function ClimateSettingScheduleTable({
       <TableBody>
         <Content
           climateSettingSchedules={filteredClimateSettingSchedules}
-          onClimateSettingScheduleClick={() => {}}
+          onClimateSettingScheduleClick={handleClimateSettingScheduleClick}
         />
       </TableBody>
     </div>

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

@@ -0,0 +1,34 @@
+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 UseConnectedAccountData = ConnectedAccount | null
+
+export function useConnectedAccount(
+  params: ConnectedAccountsGetRequest
+): 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/AccordionRow.tsx

@@ -0,0 +1,36 @@
+import type { PropsWithChildren } from 'react'
+
+import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
+
+interface AccordionRowProps extends PropsWithChildren {
+  label: string
+  rightCollapsedContent?: JSX.Element
+}
+
+export function AccordionRow({
+  label,
+  rightCollapsedContent,
+  children,
+}: AccordionRowProps): JSX.Element {
+  const [isExpanded, toggle] = useToggle()
+
+  return (
+    <div className='seam-accordion-row' aria-expanded={isExpanded}>
+      <button className='seam-accordion-row-trigger' onClick={toggle}>
+        <p className='seam-row-label'>{label}</p>
+        <div className='seam-row-inner-wrap'>
+          <div className='seam-row-trigger-right-content'>
+            {rightCollapsedContent}
+          </div>
+          <div className='seam-accordion-icon-wrap'>
+            <ChevronWideIcon />
+          </div>
+        </div>
+      </button>
+      <div className='seam-accordion-row-content'>
+        <div className='seam-accordion-row-inner-content'>{children}</div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react'
+
+interface DetailRowProps {
+  label: string
+  sublabel?: string
+}
+
+export function DetailRow({
+  label,
+  sublabel,
+  children,
+}: PropsWithChildren<DetailRowProps>): JSX.Element {
+  return (
+    <div className='seam-detail-row'>
+      <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/layout/DetailSection.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react'
+
+import { Tooltip } from 'lib/ui/Tooltip/Tooltip.js'
+
+interface DetailSectionProps {
+  label?: string
+  tooltipContent?: string
+}
+
+export function DetailSection({
+  label,
+  tooltipContent,
+  children,
+}: PropsWithChildren<DetailSectionProps>): JSX.Element {
+  return (
+    <div className='seam-detail-section'>
+      <div className='seam-detail-label-wrap'>
+        {label != null && <p className='seam-detail-label'>{label}</p>}
+        {tooltipContent != null && <Tooltip>{tooltipContent}</Tooltip>}
+      </div>
+
+      <div className='seam-detail-group'>{children}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react'
+
+export function DetailSectionGroup({
+  children,
+}: PropsWithChildren): JSX.Element {
+  return <div className='seam-detail-sections'>{children}</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',
 }