@seamapi/react 1.50.0 → 1.51.0

package/lib/ui/layout/DetailRow.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function DetailRow({ label, sublabel, children, }) {
-    return (_jsxs("div", { className: 'seam-detail-row', children: [_jsxs("div", { className: 'seam-detail-row-label-wrap', children: [_jsx("p", { className: 'seam-row-label', children: label }), sublabel != null && _jsx("p", { className: 'seam-row-sublabel', children: sublabel })] }), _jsx("div", { className: 'seam-detail-row-right-area-content', children: children })] }));
+import classNames from 'classnames';
+export function DetailRow({ label, sublabel, onClick, children, }) {
+    return (_jsxs("div", { className: classNames('seam-detail-row', {
+            'seam-detail-row-clickable': onClick != null,
+        }), onClick: onClick, children: [_jsxs("div", { className: 'seam-detail-row-label-wrap', children: [_jsx("p", { className: 'seam-row-label', children: label }), sublabel != null && _jsx("p", { className: 'seam-row-sublabel', children: sublabel })] }), _jsx("div", { className: 'seam-detail-row-right-area-content', children: children })] }));
 }
 //# sourceMappingURL=DetailRow.js.map

package/lib/ui/layout/DetailRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailRow.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/DetailRow.tsx"],"names":[],"mappings":";AAOA,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,GAC0B;IAClC,OAAO,CACL,eAAK,SAAS,EAAC,iBAAiB,aAC9B,eAAK,SAAS,EAAC,4BAA4B,aACzC,YAAG,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAK,EACxC,QAAQ,IAAI,IAAI,IAAI,YAAG,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAK,IAChE,EACN,cAAK,SAAS,EAAC,oCAAoC,YAAE,QAAQ,GAAO,IAChE,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"DetailRow.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/DetailRow.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AASnC,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,GAC0B;IAClC,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;YACvC,2BAA2B,EAAE,OAAO,IAAI,IAAI;SAC7C,CAAC,EACF,OAAO,EAAE,OAAO,aAEhB,eAAK,SAAS,EAAC,4BAA4B,aACzC,YAAG,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAK,EACxC,QAAQ,IAAI,IAAI,IAAI,YAAG,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAK,IAChE,EACN,cAAK,SAAS,EAAC,oCAAoC,YAAE,QAAQ,GAAO,IAChE,CACP,CAAA;AACH,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.50.0";
+declare const seamapiReactVersion = "1.51.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.50.0';
+const seamapiReactVersion = '1.51.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.50.0",
+  "version": "1.51.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",

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/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

@@ -9,10 +9,11 @@ import type {
 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: ConnectedAccountsGetRequest
+  params: UseConnectedAccountParams
 ): UseSeamQueryResult<'connectedAccount', UseConnectedAccountData> {
   const normalizedParams =
     typeof params === 'string' ? { connected_account_id: params } : params

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

@@ -1,17 +1,25 @@
+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'>
+    <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>}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.50.0'
+const seamapiReactVersion = '1.51.0'
 
 export default seamapiReactVersion

package/src/styles/_device-details.scss

@@ -151,5 +151,9 @@
         justify-content: center;
       }
     }
+
+    .seam-thermostat-device-details {
+      margin-top: 8px;
+    }
   }
 }

package/src/styles/_layout.scss

@@ -76,6 +76,15 @@
     &:not(:last-of-type) {
       border-bottom: 1px solid colors.$divider-stroke-light;
     }
+
+    &.seam-detail-row-clickable {
+      cursor: pointer;
+      transition: 0.2s ease;
+
+      &:hover {
+        background-color: colors.$bg-a;
+      }
+    }
   }
 
   .seam-detail-row,
@@ -108,6 +117,18 @@
     font-weight: 400;
     line-height: 118%;
   }
+
+  .seam-detail-row-hstack {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .seam-detail-row-rotated-icon {
+    transform: rotate(-90deg);
+  }
 }
 
 @mixin detail-row {