@seamapi/react 2.13.0 → 2.15.0

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

@@ -0,0 +1,58 @@
+import type { NoiseSensorDevice } from 'seamapi'
+
+import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
+import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
+
+interface NoiseSensorDeviceDetailsProps
+  extends NestedSpecificDeviceDetailsProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseSensorDeviceDetails({
+  device,
+  disableConnectedAccountInformation,
+  disableResourceIds,
+}: NoiseSensorDeviceDetailsProps): JSX.Element | null {
+  return (
+    <div className='seam-device-details'>
+      <div className='seam-body'>
+        <div className='seam-summary'>
+          <div className='seam-content'>
+            <div className='seam-image'>
+              <DeviceImage device={device} />
+            </div>
+            <div className='seam-info'>
+              <span className='seam-label'>{t.noiseSensor}</span>
+              <h4 className='seam-device-name'>{device.properties.name}</h4>
+              <div className='seam-properties'>
+                <span className='seam-label'>{t.status}:</span>{' '}
+                <OnlineStatus device={device} />
+                <DeviceModel device={device} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <NoiseThresholdsList device={device} />
+
+        <DeviceInfo
+          device={device}
+          disableConnectedAccountInformation={
+            disableConnectedAccountInformation
+          }
+          disableResourceIds={disableResourceIds}
+        />
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  noiseSensor: 'Noise Sensor',
+  status: 'Status',
+  noiseLevel: 'Noise level',
+}

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

@@ -3,12 +3,11 @@ import { useEffect, useState } from 'react'
 import type { HvacModeSetting, ThermostatDevice } from 'seamapi'
 
 import { debounce } from 'lib/debounce.js'
-import { BeeIcon } from 'lib/icons/Bee.js'
 import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { NestedClimateSettingScheduleTable } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js'
-import type { CommonProps } from 'lib/seam/components/common-props.js'
-import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
+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 { useCoolThermostat } from 'lib/seam/thermostats/use-cool-thermostat.js'
 import { useHeatCoolThermostat } from 'lib/seam/thermostats/use-heat-cool-thermostat.js'
@@ -30,27 +29,27 @@ import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
 import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
 import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
 
-interface ThermostatDeviceDetailsProps extends CommonProps {
+interface ThermostatDeviceDetailsProps
+  extends NestedSpecificDeviceDetailsProps {
   device: ThermostatDevice
 }
 
 export function ThermostatDeviceDetails({
   device,
-  onBack,
-  className,
-  errorFilter = () => true,
-  warningFilter = () => true,
+  errorFilter,
+  warningFilter,
   disableLockUnlock,
   disableCreateAccessCode,
   disableEditAccessCode,
   disableDeleteAccessCode,
-  disableResourceIds = false,
-  disableClimateSettingSchedules = false,
+  disableResourceIds,
+  disableConnectedAccountInformation,
+  disableClimateSettingSchedules,
+  onBack,
+  className,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
   const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)
 
-  const { connectedAccount } = useConnectedAccount(device.connected_account_id)
-
   const { climateSettingSchedules } = useClimateSettingSchedules({
     device_id: device.device_id,
   })
@@ -66,6 +65,7 @@ export function ThermostatDeviceDetails({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setClimateSettingsOpen(false)
@@ -143,25 +143,13 @@ export function ThermostatDeviceDetails({
                 <ManualOverrideRow device={device} />
               </DetailSection>
             )}
-
-            <DetailSection label={t.deviceDetails}>
-              <DetailRow label={t.manufacturer}>
-                <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
-                }
-              />
-              {!disableResourceIds && (
-                <DetailRow label={t.deviceId} sublabel={device.device_id} />
-              )}
-            </DetailSection>
+            <DeviceInfo
+              device={device}
+              disableConnectedAccountInformation={
+                disableConnectedAccountInformation
+              }
+              disableResourceIds={disableResourceIds}
+            />
           </DetailSectionGroup>
         </div>
       </div>
@@ -455,10 +443,6 @@ const t = {
     'When a scheduled climate reaches its end time, the default settings will kick in.',
   defaultClimate: 'Default climate',
   allowManualOverride: 'Allow manual override',
-  deviceDetails: 'Device details',
-  manufacturer: 'Manufacturer',
-  linkedAccount: 'Linked account',
-  deviceId: 'Device ID',
   none: 'None',
   fanModeSuccess: 'Successfully updated fan mode!',
   fanModeError: 'Error updating fan mode. Please try again.',

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

@@ -69,6 +69,7 @@ export function DeviceTable({
   disableEditAccessCode = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableConnectedAccountInformation = false,
   disableClimateSettingSchedules = false,
   onBack,
   className,
@@ -112,6 +113,7 @@ export function DeviceTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
         disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setSelectedDeviceId(null)

package/src/lib/seam/components/common-props.tsx

@@ -18,6 +18,7 @@ export interface RequiredCommonProps {
   disableEditAccessCode: boolean | undefined
   disableLockUnlock: boolean | undefined
   disableResourceIds: boolean | undefined
+  disableConnectedAccountInformation: boolean | undefined
   disableClimateSettingSchedules: boolean | undefined
 }
 

package/src/lib/seam/noise-sensors/use-noise-thresholds.ts

@@ -0,0 +1,46 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  NoiseThresholds,
+  NoiseThresholdsListRequest,
+  NoiseThresholdsListResponse,
+  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 UseNoiseThresholdsParams = NoiseThresholdsListRequest
+export type UseNoiseThresholdsData = NoiseThresholds[]
+
+export function useNoiseThresholds(
+  params: UseNoiseThresholdsParams
+): UseSeamQueryResult<'noiseThresholds', UseNoiseThresholdsData> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  const { data, ...rest } = useQuery<
+    NoiseThresholdsListResponse['noise_thresholds'],
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['noise_thresholds', 'list', params],
+    queryFn: async () => {
+      if (client == null) return []
+      return await client.noiseThresholds.list(params)
+    },
+    onSuccess: (noiseThresholds) => {
+      for (const noiseThreshold of noiseThresholds) {
+        queryClient.setQueryData(
+          [
+            'noise_thresholds',
+            'get',
+            { noise_threshold_id: noiseThreshold.noise_threshold_id },
+          ],
+          noiseThreshold
+        )
+      }
+    },
+  })
+
+  return { ...rest, noiseThresholds: data }
+}

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

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import type { PropsWithChildren } from 'react'
 
 interface DetailRowProps {
-  label: string
+  label: JSX.Element | string
   sublabel?: string
   onClick?: () => void
 }

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

@@ -4,7 +4,7 @@ import { Tooltip } from 'lib/ui/Tooltip/Tooltip.js'
 
 interface DetailSectionProps {
   label?: string
-  tooltipContent?: string
+  tooltipContent?: JSX.Element | string
 }
 
 export function DetailSection({

package/src/lib/ui/noise-sensor/NoiseThresholdsList.tsx

@@ -0,0 +1,141 @@
+import type { NoiseSensorDevice, NoiseThresholds } from 'seamapi'
+import { ZonedTime } from 'zoned-time'
+
+import { formatTime, formatTimeZone } from 'lib/dates.js'
+import { ArrowRightIcon } from 'lib/icons/ArrowRight.js'
+import { useNoiseThresholds } from 'lib/seam/noise-sensors/use-noise-thresholds.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'
+
+interface NoiseThresholdsListProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseThresholdsList({
+  device,
+}: NoiseThresholdsListProps): JSX.Element {
+  const { noiseThresholds, isInitialLoading } = useNoiseThresholds({
+    device_id: device.device_id,
+  })
+
+  return (
+    <DetailSectionGroup>
+      <div className='seam-detail-section-wrap'>
+        <DetailSection
+          label={t.noiseThresholds}
+          tooltipContent={
+            device.device_type === 'minut_sensor' ? (
+              <div className='seam-detail-section-tooltip-inner-content'>
+                <span className='seam-tooltip-content'>
+                  {t.minutTooltipFirst}
+                </span>
+                <span className='seam-tooltip-content'>
+                  {t.minutTooltipSecond}
+                </span>
+              </div>
+            ) : (
+              t.tooltip
+            )
+          }
+        >
+          <Content
+            isInitialLoading={isInitialLoading}
+            noiseThresholds={noiseThresholds}
+          />
+        </DetailSection>
+
+        <div className='seam-detail-section-footer'>
+          <div className='seam-empty-div' />
+          <div className='seam-detail-section-footer-content'>
+            <div className='seam-detail-section-footer-content-text'>
+              <p>{getTimeZoneCaption(device, noiseThresholds)}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DetailSectionGroup>
+  )
+}
+
+function Content({
+  isInitialLoading,
+  noiseThresholds,
+}: {
+  isInitialLoading: boolean
+  noiseThresholds: NoiseThresholds[] | undefined
+}): JSX.Element | JSX.Element[] {
+  if (isInitialLoading) {
+    return (
+      <DetailRow
+        label={<span className='seam-detail-row-empty-label'>{t.loading}</span>}
+      />
+    )
+  }
+
+  if (noiseThresholds == null || noiseThresholds.length === 0) {
+    return (
+      <DetailRow
+        label={<span className='seam-detail-row-empty-label'>{t.none}</span>}
+      />
+    )
+  }
+
+  return noiseThresholds?.map((noiseThreshold) => (
+    <DetailRow
+      key={noiseThreshold.noise_threshold_id}
+      label={
+        <div className='seam-detail-row-label-column'>
+          {noiseThreshold.name !== '' && (
+            <span className='seam-detail-row-label'>{noiseThreshold.name}</span>
+          )}
+          <div className='seam-detail-row-label-block'>
+            <span className='seam-row-sublabel seam-row-sublabel-text-default'>
+              {formatTime(noiseThreshold.starts_daily_at)}
+            </span>
+            <ArrowRightIcon />
+            <span className='seam-row-sublabel seam-row-sublabel-text-default'>
+              {formatTime(noiseThreshold.ends_daily_at)}
+            </span>
+          </div>
+        </div>
+      }
+    >
+      <p>
+        {noiseThreshold.noise_threshold_decibels} {t.decibel}
+      </p>
+    </DetailRow>
+  ))
+}
+
+const getTimeZoneCaption = (
+  device: NoiseSensorDevice,
+  thresholds: NoiseThresholds[] | undefined
+): string | null => {
+  if (device.location?.timezone != null) {
+    return `${t.allTimesIn} ${formatTimeZone(device.location.timezone)}`
+  }
+
+  const firstThreshold = thresholds?.[0]
+
+  if (firstThreshold != null) {
+    const zonedTime = ZonedTime.from(firstThreshold.starts_daily_at)
+    return `${t.allTimesIn} ${formatTimeZone(zonedTime.timeZone)}`
+  }
+
+  return null
+}
+
+const t = {
+  noiseThresholds: 'Noise thresholds',
+  tooltip:
+    'A noise threshold is the highest noise level (in dB) you want to allow for a given time range in the day.',
+  minutTooltipFirst:
+    'A noise threshold is the highest noise level (in dB) you want to allow.',
+  minutTooltipSecond:
+    'Quiet hours is a separate threshold that takes effect only for a specified time range.',
+  none: 'None',
+  loading: 'Loading...',
+  decibel: 'dB',
+  allTimesIn: 'All times in',
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.13.0'
+const seamapiReactVersion = '2.15.0'
 
 export default seamapiReactVersion

package/src/styles/_device-details.scss

@@ -103,6 +103,7 @@
 
               .seam-label {
                 color: colors.$text-gray-2;
+                white-space: nowrap;
               }
 
               .seam-status-text {

package/src/styles/_layout.scss

@@ -40,6 +40,12 @@
     gap: 32px;
   }
 
+  .seam-detail-section-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
   .seam-detail-section {
     width: 100%;
   }
@@ -66,6 +72,27 @@
     border: 1px solid colors.$text-gray-3;
     overflow: hidden;
   }
+
+  .seam-detail-section-footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .seam-detail-section-footer-content-text {
+    font-size: 12px;
+    color: colors.$text-gray-2-5;
+  }
+
+  .seam-detail-section-tooltip-inner-content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
 }
 
 @mixin detail-row-common {
@@ -105,17 +132,45 @@
     gap: 4px;
   }
 
+  .seam-detail-row-label-column {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .seam-detail-row-label-block {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: 4px;
+  }
+
   .seam-row-label {
     font-size: 16px;
     font-weight: 600;
     line-height: 118%;
   }
 
+  .seam-detail-row-empty-label {
+    font-size: 16px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 118%;
+    color: colors.$text-gray-2;
+  }
+
   .seam-row-sublabel {
     color: colors.$text-gray-1;
     font-size: 14px;
     font-weight: 400;
     line-height: 118%;
+
+    &.seam-row-sublabel-text-default {
+      color: colors.$text-default;
+    }
   }
 
   .seam-detail-row-hstack {

package/src/styles/_thermostat.scss

@@ -146,7 +146,7 @@
       height: var(--track-height);
       border-radius: 0.5em 0 0 0.5em;
       margin: 0;
-      border: none;
+      border-style: none;
       border-right-width: 0;
     }