@seamapi/react 1.61.0 → 1.61.2

package/src/lib/dates.ts

@@ -1,4 +1,4 @@
-import { DateTime, IANAZone } from 'luxon'
+import { DateTime } from 'luxon'
 
 export const compareByCreatedAtDesc = (
   a: { created_at: string },
@@ -10,148 +10,32 @@ export const compareByCreatedAtDesc = (
   return t1.toMillis() - t2.toMillis()
 }
 
-/**
- * Get the timezone strings supported by the user's browser.
- *
- * @returns string[]
- */
-export function getTimezones(): string[] {
-  return Intl.supportedValuesOf('timeZone')
+export const getSupportedTimeZones = (): string[] => {
+  const timeZones = new Set(Intl.supportedValuesOf('timeZone'))
+  timeZones.add('UTC')
+  return Array.from(timeZones).sort()
 }
 
-/**
- * Get the default browser timezone.
- *
- * @returns string
- */
-export function getBrowserTimezone(): string {
-  return Intl.DateTimeFormat().resolvedOptions().timeZone
-}
-
-/**
- * Takes an IANA timezone, like America/Los_Angeles, into a more readable
- * string: Los Angeles (America).
- * @param timezone
- * @returns string
- */
-export function getTimezoneLabel(timezone: string): string {
-  const [region = '', city = ''] = timezone.replace(/_/g, ' ').split('/')
-  return `${city} (${region})`
-}
-
-/**
- * Get a timezones offset from UTC in minutes.
- *
- * @param timezone
- * @returns minutes
- */
-function getTimezoneOffsetMinutes(timezone: string): number {
-  return DateTime.local().setZone(timezone).offset
-}
-
-/**
- * Compares 2 timezones (America/Los_angeles) by their offset
- * minutes in ascending order.
- *
- * @param timezoneA
- * @param timezonB
- * @returns number
- */
-export const compareByTimezoneOffsetAsc = (
-  timezoneA: string,
-  timezonB: string
-): number =>
-  getTimezoneOffsetMinutes(timezoneA) - getTimezoneOffsetMinutes(timezonB)
-
-/**
- * Get the timezone offset
- * America/Los_angeles -> -07:00
- *
- * eg. America/Los_Angeles -> UTC-07:00
- *
- * @param timezone
- * @returns offset
- */
-export function getTimezoneOffset(timezone: string): string {
-  return IANAZone.create(timezone).formatOffset(Date.now(), 'short')
-}
-
-const formatDateReadable = (
-  date: string,
-  options: {
-    showWeekday?: boolean
-  } = {}
-): string => {
-  const { showWeekday = true } = options
+export const getSystemTimeZone = (): string => DateTime.now().zoneName ?? 'UTC'
 
-  // '2023-04-17' to 'Mon Apr 17, 2023' / 'Apr 17, 2023'
-  const format = showWeekday ? 'EEE MMM d, yyyy' : 'MMM d, yyyy'
-
-  return DateTime.fromFormat(date, 'yyyy-MM-dd').toFormat(format)
+export const formatTimeZone = (timeZone: string): string => {
+  const offset = DateTime.now().setZone(timeZone).toFormat("'UTC'Z")
+  return `${timeZone.replaceAll('_', ' ')} (${offset})`
 }
 
-const formatTimeReadable = (time: string): string | null => {
-  const dateTime = DateTime.fromFormat(time, 'HH:mm:ss')
+export const serializeDateTimePickerValue = (
+  dateTime: DateTime,
+  timeZone: string
+): string | null => {
   if (!dateTime.isValid) {
     return null
   }
 
-  return dateTime.toFormat('h:mm a')
-}
-
-export const formatDateTimeReadable = (dateTime: string): string => {
-  const [date = '', time = ''] = dateTime.split('T')
-  return `${formatDateReadable(date, { showWeekday: false })} at ${
-    formatTimeReadable(time) ?? ''
-  }`
+  return dateTime.setZone(timeZone).toFormat("yyyy-MM-dd'T'HH:mm:ss")
 }
 
-export const getNow = (): string => getDateTimeOnly(DateTime.now())
-export const get24HoursLater = (): string =>
-  getDateTimeOnly(DateTime.now().plus({ days: 1 }))
-
-function getDateTimeOnly(dateTime: DateTime): string {
-  const date = dateTime.toFormat('yyyy-MM-dd')
-  const time = dateTime.toFormat('HH:mm:ss')
-  return `${date}T${time}`
-}
-
-/**
- * Takes a date (2023-07-20T00:00:00), and a timezone (America/Los_angeles), and
- * returns an ISO8601 Date (2023-07-20T00:00:00.000-07:00).
- *
- * @param date
- * @param timezone
- * @returns ISOdate
- */
-export const createIsoDate = (date: string, timezone: string): string => {
-  const offset = getTimezoneOffset(timezone)
-  return `${date}.000${offset}`
-}
-
-/**
- * Takes a ISO datetime string (2023-07-20T00:00:00.000-07:00) and returns
- * the IANA timezone (America/Los_angeles).
- *
- * @param date
- * @returns string
- */
-export const getTimezoneFromIsoDate = (date: string): string | null =>
-  DateTime.fromISO(date).zoneName
-
-/**
- * Takes an ISO datetime string (2023-07-20T00:00:00.000-07:00) and returns a string like
- * (Jul 20, 12:00 AM PDT).
- *
- * @param date
- * @returns string
- *
- */
-export const formatDateAndTime = (date: string): string =>
-  DateTime.fromISO(date).toLocaleString({
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    timeZoneName: 'short',
-  })
+export const parseDateTimePickerValue = (
+  value: string,
+  timeZone: string
+): DateTime =>
+  DateTime.fromISO(value).setZone(timeZone, { keepLocalTime: true })

package/src/lib/icons/CheckGreen.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automatically 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 CheckGreenIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='check-green_svg__a'
+        width={24}
+        height={24}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+      </mask>
+      <g mask='url(#check-green_svg__a)'>
+        <path
+          fill='#27AE60'
+          d='m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4 4.25 4.25ZM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2c1.383 0 2.683.262 3.9.787a10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/CloseWhite.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automatically 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 CloseWhiteIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={24}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='close-white_svg__a'
+        width={24}
+        height={24}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+      </mask>
+      <g mask='url(#close-white_svg__a)'>
+        <path
+          fill='#fff'
+          d='M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'
+        />
+      </g>
+    </svg>
+  )
+}

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

@@ -221,28 +221,25 @@ function Duration(props: { accessCode: AccessCode }): JSX.Element {
   )
 }
 
-function formatDurationDate(date: string): string {
-  return DateTime.fromISO(date).toLocaleString({
+const formatDurationDate = (date: string): string =>
+  DateTime.fromISO(date).toLocaleString({
     month: 'short',
     day: 'numeric',
   })
-}
 
-function formatTime(date: string): string {
-  return DateTime.fromISO(date).toLocaleString({
+const formatTime = (date: string): string =>
+  DateTime.fromISO(date).toLocaleString({
     hour: 'numeric',
     minute: '2-digit',
   })
-}
 
-function formatDate(date: string): string {
-  return DateTime.fromISO(date).toLocaleString({
+const formatDate = (date: string): string =>
+  DateTime.fromISO(date).toLocaleString({
     weekday: 'short',
     month: 'long',
     day: 'numeric',
     year: 'numeric',
   })
-}
 
 const errorFilter = (
   error: AccessCodeError | DeviceError | ConnectedAccountError

package/src/lib/seam/components/AccessCodeTable/CodeDetails.tsx

@@ -52,12 +52,11 @@ function Duration(props: { accessCode: AccessCode }): JSX.Element {
   )
 }
 
-function formatDate(date: string): string {
-  return DateTime.fromISO(date).toLocaleString({
+const formatDate = (date: string): string =>
+  DateTime.fromISO(date).toLocaleString({
     month: 'long',
     day: 'numeric',
   })
-}
 
 const t = {
   code: 'Code',

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

@@ -1,13 +1,14 @@
 import { DateTime } from 'luxon'
 import type { ClimateSettingSchedule } from 'seamapi'
 
-import { formatDateAndTime } from 'lib/dates.js'
 import { ClimateSettingScheduleIcon } from 'lib/icons/ClimateSettingSchedule.js'
 import { ClimateSettingScheduleDeviceBar } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.js'
 import { useClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedule.js'
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
-import { useCurrentTime } from 'lib/ui/use-current-time.js'
+import { useNow } from 'lib/ui/use-now.js'
+
+import { formatDateTime } from './dates.js'
 
 interface ClimateSettingScheduleCardProps {
   climateSettingScheduleId: string
@@ -74,25 +75,24 @@ function ClimateSettingScheduleTiming(props: {
 }): JSX.Element | null {
   const { climateSettingSchedule } = props
 
-  const currentTime = useCurrentTime()
+  const now = useNow()
 
-  if (currentTime === null) return null
+  if (now === null) return null
 
   const startTime = DateTime.fromISO(climateSettingSchedule.schedule_starts_at)
   const endTime = DateTime.fromISO(climateSettingSchedule.schedule_ends_at)
 
-  if (currentTime < startTime)
+  if (now < startTime)
     return (
       <span>
-        {t.starts}{' '}
-        {formatDateAndTime(climateSettingSchedule.schedule_starts_at)}
+        {t.starts} {formatDateTime(climateSettingSchedule.schedule_starts_at)}
       </span>
     )
 
-  if (startTime <= currentTime && currentTime <= endTime)
+  if (startTime <= now && now <= endTime)
     return (
       <span>
-        {t.ends} {formatDateAndTime(climateSettingSchedule.schedule_starts_at)}
+        {t.ends} {formatDateTime(climateSettingSchedule.schedule_starts_at)}
       </span>
     )
 

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

@@ -3,7 +3,6 @@ import { useState } from 'react'
 
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
-import { formatDateAndTime } from 'lib/dates.js'
 import { ArrowRightIcon } from 'lib/icons/ArrowRight.js'
 import { ClimateSettingScheduleCard } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleCard.js'
 import {
@@ -18,6 +17,8 @@ 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 { formatDateTime } from './dates.js'
+
 export interface ClimateSettingScheduleDetailsProps extends CommonProps {
   climateSettingScheduleId: string
 }
@@ -89,13 +90,9 @@ export function ClimateSettingScheduleDetails({
           <DetailSection>
             <DetailRow label={t.startEndTime}>
               <span className='seam-climate-setting-details-value seam-climate-setting-details-schedule-range'>
-                {`${formatDateAndTime(
-                  climateSettingSchedule.schedule_starts_at
-                )}`}
+                {formatDateTime(climateSettingSchedule.schedule_starts_at)}
                 <ArrowRightIcon />
-                {`${formatDateAndTime(
-                  climateSettingSchedule.schedule_ends_at
-                )}`}
+                {formatDateTime(climateSettingSchedule.schedule_ends_at)}
               </span>
             </DetailRow>
             <DetailRow label={t.climateSetting}>
@@ -113,7 +110,7 @@ export function ClimateSettingScheduleDetails({
           <DetailSection>
             <DetailRow label={t.creationDate}>
               <div className='seam-creation-date'>
-                {formatDateAndTime(climateSettingSchedule.created_at)}
+                {formatDateTime(climateSettingSchedule.created_at)}
               </div>
             </DetailRow>
           </DetailSection>

package/src/lib/seam/components/ClimateSettingScheduleDetails/dates.ts

@@ -0,0 +1,10 @@
+import { DateTime } from 'luxon'
+
+export const formatDateTime = (date: string): string =>
+  DateTime.fromISO(date).toLocaleString({
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  })

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

@@ -48,12 +48,11 @@ function Duration(props: {
   )
 }
 
-function formatDate(date: string): string {
-  return DateTime.fromISO(date).toLocaleString({
+const formatDate = (date: string): string =>
+  DateTime.fromISO(date).toLocaleString({
     month: 'long',
     day: 'numeric',
   })
-}
 
 const t = {
   starts: 'Starts',

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

@@ -3,7 +3,6 @@ import type { SeamError } from 'seamapi'
 
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
-import { createIsoDate } from 'lib/dates.js'
 import { useCreateAccessCode } from 'lib/seam/access-codes/use-create-access-code.js'
 import {
   type CommonProps,
@@ -82,7 +81,7 @@ function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
   const submit = (data: AccessCodeFormSubmitData): void => {
     resetResponseErrors()
 
-    const { name, code, type, device, startDate, endDate, timezone } = data
+    const { name, code, type, device, startDate, endDate } = data
     if (name === '') {
       return
     }
@@ -97,8 +96,8 @@ function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
           name,
           code,
           device_id: device.device_id,
-          starts_at: createIsoDate(startDate, timezone),
-          ends_at: createIsoDate(endDate, timezone),
+          starts_at: startDate,
+          ends_at: endDate,
         },
         {
           onSuccess,

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

@@ -1,6 +1,5 @@
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
-import { createIsoDate } from 'lib/dates.js'
 import type { CommonProps } from 'lib/seam/components/common-props.js'
 import { useCreateClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-create-climate-setting-schedule.js'
 import {
@@ -34,8 +33,7 @@ function useSubmitCreateClimateSettingSchedule(onSuccess?: () => void): {
 } {
   const { mutate, isLoading: isSubmitting } = useCreateClimateSettingSchedule()
   const submit = (data: ClimateSettingScheduleFormSubmitData): void => {
-    const { name, deviceId, startDate, endDate, timezone, climateSetting } =
-      data
+    const { name, deviceId, startDate, endDate, climateSetting } = data
 
     if (isSubmitting) {
       return
@@ -45,8 +43,8 @@ function useSubmitCreateClimateSettingSchedule(onSuccess?: () => void): {
       {
         name,
         device_id: deviceId,
-        schedule_starts_at: createIsoDate(startDate, timezone),
-        schedule_ends_at: createIsoDate(endDate, timezone),
+        schedule_starts_at: startDate,
+        schedule_ends_at: endDate,
         ...climateSetting,
       },
       {

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

@@ -128,10 +128,7 @@ export function ThermostatDeviceDetails(
               </DetailRow>
             </DetailSection>
 
-            <DetailSection
-              label={t.deviceDetails}
-              tooltipContent={t.deviceDetailsTooltip}
-            >
+            <DetailSection label={t.deviceDetails}>
               <DetailRow label={t.brand}>
                 <div className='seam-detail-row-hstack'>
                   {device.properties.model.manufacturer_display_name}
@@ -172,8 +169,6 @@ const t = {
   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',

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

@@ -1,6 +1,5 @@
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
-import { createIsoDate } from 'lib/dates.js'
 import {
   useAccessCode,
   type UseAccessCodeData,
@@ -93,7 +92,7 @@ function useSubmitEditAccessCode(
   const submit = (data: AccessCodeFormSubmitData): void => {
     resetResponseErrors()
 
-    const { name, code, type, device, startDate, endDate, timezone } = data
+    const { name, code, type, device, startDate, endDate } = data
     if (name === '') {
       return
     }
@@ -110,8 +109,8 @@ function useSubmitEditAccessCode(
           code,
           device_id: device.device_id,
           type: 'time_bound',
-          starts_at: createIsoDate(startDate, timezone),
-          ends_at: createIsoDate(endDate, timezone),
+          starts_at: startDate,
+          ends_at: endDate,
         },
         {
           onSuccess,

package/src/lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -36,7 +36,10 @@ export function FilterCategoryMenu({
   onAllOptionSelect,
   buttonLabel,
 }: FilterCategoryMenuProps): JSX.Element {
-  const usableOptions = hideAllOption ? options : [allLabel, ...options]
+  const sortedOptions = [...options].sort((a, b) => a.localeCompare(b))
+  const usableOptions = hideAllOption
+    ? sortedOptions
+    : [allLabel, ...sortedOptions]
 
   return (
     <div className='seam-supported-device-table-filter-menu-wrap'>
@@ -49,20 +52,22 @@ export function FilterCategoryMenu({
           </button>
         )}
       >
-        {usableOptions.map((option, index) => (
-          <MenuItem
-            key={`${index}:${option}`}
-            onClick={() => {
-              if (option === allLabel) {
-                onAllOptionSelect?.()
-              } else {
-                onSelect(option)
-              }
-            }}
-          >
-            <span>{option}</span>
-          </MenuItem>
-        ))}
+        <div className='seam-supported-device-table-filter-menu-content'>
+          {usableOptions.map((option, index) => (
+            <MenuItem
+              key={`${index}:${option}`}
+              onClick={() => {
+                if (option === allLabel) {
+                  onAllOptionSelect?.()
+                } else {
+                  onSelect(option)
+                }
+              }}
+            >
+              <span>{option}</span>
+            </MenuItem>
+          ))}
+        </div>
       </Menu>
     </div>
   )

package/src/lib/telemetry/client.ts

@@ -246,6 +246,7 @@ interface CommonSpec {
 interface Context {
   traits?: Traits
   locale?: string
+  // According to the Common Spec this is timezone and not timeZone.
   timezone?: string
   userAgent?: string
   userAgentData?: string