@seamapi/react 1.48.0 → 1.49.0

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.48.0",
+  "version": "1.49.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.6.3",
+    "seamapi": "^8.9.0",
     "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.6.0",
+    "@seamapi/fake-seam-connect": "^1.9.0",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",
@@ -159,11 +159,11 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-jsx": "^11.0.0",
     "eslint-config-standard-react": "^13.0.0",
-    "eslint-config-standard-with-typescript": "^37.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.11",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "execa": "^7.1.1",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "execa": "^8.0.1",
     "fast-glob": "^3.2.12",
     "http-proxy-middleware": "^2.0.6",
     "isomorphic-fetch": "^3.0.0",
@@ -182,7 +182,7 @@
     "tsc-alias": "^1.8.5",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "tsx": "^3.12.7",
-    "typescript": "^5.1.0",
+    "typescript": "~5.1.0",
     "vite": "^4.2.1",
     "vite-tsconfig-paths": "^4.0.8",
     "zustand-hoist": "^1.0.0"

package/src/lib/dates.ts

@@ -138,3 +138,20 @@ export const createIsoDate = (date: string, timezone: string): 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',
+  })

package/src/lib/element.tsx

@@ -28,8 +28,10 @@ export type ElementProps<T> = Record<
   'string' | 'number' | 'boolean' | 'array' | 'function' | 'json' | 'object'
 >
 
-type ProviderProps = SeamProviderPropsWithPublishableKey &
-  SeamProviderPropsWithClientSessionToken
+type ProviderProps = Omit<
+  SeamProviderPropsWithPublishableKey & SeamProviderPropsWithClientSessionToken,
+  'children'
+>
 
 const providerProps: ElementProps<ProviderProps> = {
   publishableKey: 'string',
@@ -53,7 +55,7 @@ export const defineCustomElement = ({
       ...providerProps,
     },
   })
-  globalThis?.customElements?.define(name, element)
+  globalThis.customElements?.define(name, element)
 }
 
 function withProvider<P extends JSX.IntrinsicAttributes>(
@@ -82,7 +84,7 @@ function withProvider<P extends JSX.IntrinsicAttributes>(
         disableFontInjection={
           disableFontInjection ?? globalThis.disableSeamFontInjection
         }
-        unminifiyCss={unminifiyCss ?? globalThis?.unminifiySeamCss}
+        unminifiyCss={unminifiyCss ?? globalThis.unminifiySeamCss}
       >
         <Component {...(props as P)} />
       </SeamProvider>

package/src/lib/icons/ArrowRight.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 ArrowRightIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={19}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='arrow-right_svg__a'
+        width={18}
+        height={19}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 .5h18v18H0z' />
+      </mask>
+      <g mask='url(#arrow-right_svg__a)'>
+        <path
+          fill='#B9BEC5'
+          d='m10.5 14-1.05-1.088 2.663-2.662H3v-1.5h9.113L9.45 6.088 10.5 5 15 9.5 10.5 14Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/ChevronWide.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 ChevronWideIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={25}
+      height={24}
+      fill='none'
+      {...props}
+    >
+      <path
+        fill='#D5D8DC'
+        d='m22.123 8-10 10-10-10 1.775-1.775 8.225 8.225 8.225-8.225L22.123 8Z'
+      />
+    </svg>
+  )
+}

package/src/lib/icons/Copy.tsx

@@ -7,30 +7,15 @@ export function CopyIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={18}
+      width={25}
+      height={25}
       fill='none'
       {...props}
     >
-      <mask
-        id='copy_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(#copy_svg__a)'>
-        <path
-          fill='#007AFC'
-          d='M3.75 16.5c-.413 0-.766-.147-1.06-.44A1.446 1.446 0 0 1 2.25 15V4.5h1.5V15H12v1.5H3.75Zm3-3c-.412 0-.766-.147-1.059-.44A1.445 1.445 0 0 1 5.25 12V3c0-.413.147-.766.441-1.06.293-.293.647-.44 1.059-.44h6.75c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06v9c0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44H6.75Zm0-1.5h6.75V3H6.75v9Z'
-        />
-      </g>
+      <path
+        fill='#232B3A'
+        d='M5.84 22.988c-.55 0-1.02-.195-1.412-.587a1.928 1.928 0 0 1-.587-1.413v-14h2v14h11v2h-11Zm4-4c-.55 0-1.02-.195-1.411-.587a1.927 1.927 0 0 1-.588-1.413v-12c0-.55.196-1.02.588-1.413a1.925 1.925 0 0 1 1.412-.587h9c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413v12c0 .55-.196 1.021-.587 1.413a1.928 1.928 0 0 1-1.413.587h-9Zm0-2h9v-12h-9v12Z'
+      />
     </svg>
   )
 }

package/src/lib/icons/TemperatureAdd.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 TemperatureAddIcon(
+  props: SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={18}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='temperature-add_svg__a'
+        width={18}
+        height={18}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#2196F3' d='M0 0h18v18H0z' />
+      </mask>
+      <g mask='url(#temperature-add_svg__a)'>
+        <path
+          fill='#9DA1A9'
+          d='M8.25 14.25v-4.5h-4.5v-1.5h4.5v-4.5h1.5v4.5h4.5v1.5h-4.5v4.5h-1.5Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/TemperatureSubtract.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 TemperatureSubtractIcon(
+  props: SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={18}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='temperature-subtract_svg__a'
+        width={18}
+        height={18}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#2196F3' d='M0 0h18v18H0z' />
+      </mask>
+      <g mask='url(#temperature-subtract_svg__a)'>
+        <path fill='#9DA1A9' d='M3.75 9.75v-1.5h10.5v1.5H3.75Z' />
+      </g>
+    </svg>
+  )
+}

package/src/lib/seam/SeamProvider.tsx

@@ -25,11 +25,10 @@ export interface SeamContext {
   clientSessionToken?: string | undefined
 }
 
-export type SeamProviderProps = PropsWithChildren<
+export type SeamProviderProps =
   | SeamProviderPropsWithClient
   | SeamProviderPropsWithPublishableKey
   | SeamProviderPropsWithClientSessionToken
->
 
 export interface SeamProviderPropsWithClient extends SeamProviderBaseProps {
   client: Seam
@@ -48,7 +47,7 @@ export interface SeamProviderPropsWithClientSessionToken
   clientSessionToken: string
 }
 
-interface SeamProviderBaseProps {
+interface SeamProviderBaseProps extends PropsWithChildren {
   disableCssInjection?: boolean | undefined
   disableFontInjection?: boolean | undefined
   unminifiyCss?: boolean | undefined

package/src/lib/seam/access-codes/use-generate-access-code-code.ts

@@ -0,0 +1,38 @@
+import { useMutation, type UseMutationResult } from '@tanstack/react-query'
+import type {
+  AccessCode,
+  AccessCodeGenerateCodeRequest,
+  AccessCodeGenerateCodeResponse,
+  SeamError,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseGenerateAccessCodeCodeParams = never
+export type UseGenerateAccessCodeCodeData = Pick<
+  AccessCode,
+  'code' | 'device_id'
+>
+export type UseGenerateAccessCodeCodeMutationParams =
+  AccessCodeGenerateCodeRequest
+
+export function useGenerateAccessCodeCode(): UseMutationResult<
+  UseGenerateAccessCodeCodeData,
+  SeamError,
+  UseGenerateAccessCodeCodeMutationParams
+> {
+  const { client } = useSeamClient()
+
+  return useMutation<
+    AccessCodeGenerateCodeResponse['generated_code'],
+    SeamError,
+    AccessCodeGenerateCodeRequest
+  >({
+    mutationFn: async (
+      mutationParams: UseGenerateAccessCodeCodeMutationParams
+    ) => {
+      if (client === null) throw new NullSeamClientError()
+      return await client.accessCodes.generateCode(mutationParams)
+    },
+  })
+}

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

@@ -0,0 +1,101 @@
+import { DateTime } from 'luxon'
+import type { ClimateSettingSchedule } from 'seamapi'
+
+import { formatDateAndTime } from 'lib/dates.js'
+import { ClimateSettingScheduleIcon } from 'lib/icons/ClimateSettingSchedule.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 { ClimateSettingScheduleDeviceBar } from './ClimateSettingScheduleDeviceBar.js'
+
+interface ClimateSettingScheduleCardProps {
+  climateSettingScheduleId: string
+}
+
+export function ClimateSettingScheduleCard({
+  climateSettingScheduleId,
+}: ClimateSettingScheduleCardProps): JSX.Element {
+  return (
+    <div className='seam-climate-setting-schedule-card'>
+      <Content climateSettingScheduleId={climateSettingScheduleId} />
+    </div>
+  )
+}
+
+function Content(props: {
+  climateSettingScheduleId: string
+}): JSX.Element | null {
+  const { climateSettingScheduleId } = props
+
+  const { climateSettingSchedule } = useClimateSettingSchedule(
+    climateSettingScheduleId
+  )
+
+  if (climateSettingSchedule == null) {
+    return null
+  }
+
+  const name = climateSettingSchedule.name ?? t.fallbackName
+
+  return (
+    <div className='seam-climate-setting-schedule-content'>
+      <div className='seam-climate-setting-schedule-summary-container'>
+        <div className='seam-climate-setting-schedule-icon-block'>
+          <ClimateSettingScheduleIcon />
+        </div>
+        <div className='seam-climate-setting-schedule-summary'>
+          <h5 className='seam-climate-setting-schedule-heading'>{name}</h5>
+          <div className='seam-climate-setting-schedule-subheading'>
+            <ClimateSettingStatus climateSetting={climateSettingSchedule} />
+            <DotDivider />
+            <ClimateSettingScheduleTiming
+              climateSettingSchedule={climateSettingSchedule}
+            />
+          </div>
+        </div>
+      </div>
+      <ClimateSettingScheduleDeviceBar
+        deviceId={climateSettingSchedule.device_id}
+      />
+    </div>
+  )
+}
+
+function ClimateSettingScheduleTiming(props: {
+  climateSettingSchedule: ClimateSettingSchedule
+}): JSX.Element | null {
+  const { climateSettingSchedule } = props
+
+  const currentTime = useCurrentTime()
+
+  if (currentTime === null) return null
+
+  const startTime = DateTime.fromISO(climateSettingSchedule.schedule_starts_at)
+  const endTime = DateTime.fromISO(climateSettingSchedule.schedule_ends_at)
+
+  if (currentTime < startTime)
+    return (
+      <span>
+        {t.starts}{' '}
+        {formatDateAndTime(climateSettingSchedule.schedule_starts_at)}
+      </span>
+    )
+
+  if (startTime <= currentTime && currentTime <= endTime)
+    return (
+      <span>
+        {t.ends} {formatDateAndTime(climateSettingSchedule.schedule_starts_at)}
+      </span>
+    )
+
+  return <span>{t.expired}</span>
+}
+
+const t = {
+  starts: 'Starts',
+  ends: 'Ends',
+  expired: 'Expired',
+  fallbackName: 'Climate Setting Schedule',
+}

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,103 @@
+import classNames from 'classnames'
+
+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
+  )
+
+  if (climateSettingSchedule == null) {
+    return null
+  }
+
+  const isManualOverrideAllowed =
+    climateSettingSchedule.manual_override_allowed ?? false
+
+  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}
+        />
+        <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

@@ -0,0 +1,60 @@
+import { isThermostatDevice, type ThermostatDevice } from 'seamapi'
+
+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,
+}: {
+  deviceId: string
+}): JSX.Element | null {
+  const { isLoading, device } = useDevice({
+    device_id: deviceId,
+  })
+
+  if (isLoading) {
+    return null
+  }
+
+  if (device == null) {
+    return null
+  }
+
+  if (!isThermostatDevice(device)) {
+    return null
+  }
+
+  return <Content device={device} />
+}
+
+function Content(props: { device: ThermostatDevice }): JSX.Element {
+  const { device } = props
+
+  return (
+    <div className='seam-climate-setting-schedule-device-bar'>
+      <div className='seam-climate-setting-schedule-device-content'>
+        <div className='seam-device-image'>
+          <DeviceImage device={device} />
+        </div>
+        <div className='seam-climate-setting-schedule-device-details'>
+          <div className='seam-device-name'>{device.properties.name}</div>
+          <div className='seam-device-current-climate-setting'>
+            {t.currentClimate}:
+            <ClimateSettingStatus
+              climateSetting={device.properties.current_climate_setting}
+            />
+          </div>
+        </div>
+      </div>
+      <div className='seam-climate-setting-schedule-device-chevron'>
+        <ChevronWideIcon />
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  currentClimate: 'Current climate',
+}