@seamapi/react 4.3.1 → 4.5.0

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

@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { useState } from 'react'
 
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
@@ -16,6 +17,7 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { Snackbar, type SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
 interface LockDeviceDetailsProps extends NestedSpecificDeviceDetailsProps {
@@ -38,11 +40,25 @@ export function LockDeviceDetails({
   onEditName,
 }: LockDeviceDetailsProps): JSX.Element | null {
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
-  const toggleLock = useToggleLock()
   const { accessCodes } = useAccessCodes({
     device_id: device.device_id,
   })
 
+  const [snackbarVisible, setSnackbarVisible] = useState(false)
+  const [snackbarVariant, setSnackbarVariant] =
+    useState<SnackbarVariant>('success')
+
+  const toggleLock = useToggleLock({
+    onSuccess: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('success')
+    },
+    onError: () => {
+      setSnackbarVisible(true)
+      setSnackbarVariant('error')
+    },
+  })
+
   const lockStatus = device.properties.locked ? t.locked : t.unlocked
   const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
 
@@ -88,87 +104,103 @@ export function LockDeviceDetails({
   ]
 
   return (
-    <div className={classNames('seam-device-details', className)}>
-      <ContentHeader title='Device' onBack={onBack} />
-      <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.device}</span>
-              <EditableDeviceName
-                tagName='h4'
-                value={device.properties.name}
-                className='seam-device-name'
-                onEdit={onEditName}
-              />
-              <div className='seam-properties'>
-                <span className='seam-label'>{t.status}:</span>{' '}
-                <OnlineStatus device={device} />
-                {device.properties.online && (
-                  <>
-                    <span className='seam-label'>{t.power}:</span>{' '}
-                    <BatteryStatusIndicator device={device} />
-                  </>
-                )}
-                <DeviceModel device={device} />
+    <>
+      <Snackbar
+        variant={snackbarVariant}
+        visible={snackbarVisible}
+        onClose={() => {
+          setSnackbarVisible(false)
+        }}
+        message={
+          snackbarVariant === 'success'
+            ? t.successfullyUpdated
+            : t.failedToUpdate
+        }
+        autoDismiss
+      />
+
+      <div className={classNames('seam-device-details', className)}>
+        <ContentHeader title='Device' onBack={onBack} />
+        <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.device}</span>
+                <EditableDeviceName
+                  tagName='h4'
+                  value={device.properties.name}
+                  className='seam-device-name'
+                  onEdit={onEditName}
+                />
+                <div className='seam-properties'>
+                  <span className='seam-label'>{t.status}:</span>{' '}
+                  <OnlineStatus device={device} />
+                  {device.properties.online && (
+                    <>
+                      <span className='seam-label'>{t.power}:</span>{' '}
+                      <BatteryStatusIndicator device={device} />
+                    </>
+                  )}
+                  <DeviceModel device={device} />
+                </div>
               </div>
             </div>
+            <Alerts alerts={alerts} className='seam-alerts-space-top' />
           </div>
-          <Alerts alerts={alerts} className='seam-alerts-space-top' />
-        </div>
-        <div className='seam-box'>
-          <div
-            className='seam-content seam-access-codes'
-            onClick={toggleAccessCodesOpen}
-          >
-            <span className='seam-value'>
-              {accessCodeCount} {t.accessCodes}
-            </span>
-            <ChevronRightIcon />
+          <div className='seam-box'>
+            <div
+              className='seam-content seam-access-codes'
+              onClick={toggleAccessCodesOpen}
+            >
+              <span className='seam-value'>
+                {accessCodeCount} {t.accessCodes}
+              </span>
+              <ChevronRightIcon />
+            </div>
           </div>
-        </div>
 
-        <div className='seam-box'>
-          {device.properties.locked && device.properties.online && (
-            <div className='seam-content seam-lock-status'>
-              <div>
-                <span className='seam-label'>{t.lockStatus}</span>
-                <span className='seam-value'>{lockStatus}</span>
-              </div>
-              <div className='seam-right'>
-                {!disableLockUnlock &&
-                  device.capabilities_supported.includes('lock') && (
-                    <Button
-                      size='small'
-                      onClick={() => {
-                        toggleLock.mutate(device)
-                      }}
-                    >
-                      {toggleLockLabel}
-                    </Button>
-                  )}
+          <div className='seam-box'>
+            {device.properties.locked && device.properties.online && (
+              <div className='seam-content seam-lock-status'>
+                <div>
+                  <span className='seam-label'>{t.lockStatus}</span>
+                  <span className='seam-value'>{lockStatus}</span>
+                </div>
+                <div className='seam-right'>
+                  {!disableLockUnlock &&
+                    device.capabilities_supported.includes('lock') && (
+                      <Button
+                        size='small'
+                        onClick={() => {
+                          toggleLock.mutate(device)
+                        }}
+                      >
+                        {toggleLockLabel}
+                      </Button>
+                    )}
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-          <AccessCodeLength
-            supportedCodeLengths={
-              device.properties?.supported_code_lengths ?? []
+            <AccessCodeLength
+              supportedCodeLengths={
+                device.properties?.supported_code_lengths ?? []
+              }
+            />
+          </div>
+          <DeviceInfo
+            device={device}
+            disableConnectedAccountInformation={
+              disableConnectedAccountInformation
             }
+            disableResourceIds={disableResourceIds}
           />
         </div>
-        <DeviceInfo
-          device={device}
-          disableConnectedAccountInformation={
-            disableConnectedAccountInformation
-          }
-          disableResourceIds={disableResourceIds}
-        />
       </div>
-    </div>
+    </>
   )
 }
 
@@ -208,4 +240,6 @@ const t = {
   lockStatus: 'Lock status',
   status: 'Status',
   power: 'Power',
+  successfullyUpdated: 'Lock status has been successfully updated',
+  failedToUpdate: 'Failed to update lock status',
 }

package/src/lib/seam/locks/use-toggle-lock.ts

@@ -12,8 +12,6 @@ import {
 
 import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
 
-export type UseToggleLockParams = never
-
 export type UseToggleLockData = undefined
 
 export type UseToggleLockMutationVariables = Pick<Device, 'device_id'> & {
@@ -29,7 +27,14 @@ type MutationError =
   | SeamActionAttemptFailedError<ToggleLockActionAttempt>
   | SeamActionAttemptTimeoutError<ToggleLockActionAttempt>
 
-export function useToggleLock(): UseMutationResult<
+interface UseToggleLockParams {
+  onError?: () => void
+  onSuccess?: () => void
+}
+
+export function useToggleLock(
+  params: UseToggleLockParams = {}
+): UseMutationResult<
   UseToggleLockData,
   MutationError,
   UseToggleLockMutationVariables
@@ -92,6 +97,8 @@ export function useToggleLock(): UseMutationResult<
       )
     },
     onError: async (_error, variables) => {
+      params.onError?.()
+
       await queryClient.invalidateQueries({
         queryKey: ['devices', 'list'],
       })
@@ -99,5 +106,8 @@ export function useToggleLock(): UseMutationResult<
         queryKey: ['devices', 'get', { device_id: variables.device_id }],
       })
     },
+    onSuccess() {
+      params.onSuccess?.()
+    },
   })
 }

package/src/lib/ui/Snackbar/Snackbar.tsx

@@ -5,9 +5,9 @@ import { CheckGreenIcon } from 'lib/icons/CheckGreen.js'
 import { CloseWhiteIcon } from 'lib/icons/CloseWhite.js'
 import { ExclamationCircleIcon } from 'lib/icons/ExclamationCircle.js'
 
-type SnackbarVariant = 'success' | 'error'
+export type SnackbarVariant = 'success' | 'error'
 
-interface SnackbarProps {
+export interface SnackbarProps {
   message: string
   variant: SnackbarVariant
   visible: boolean

package/src/lib/ui/thermostat/TemperatureControlGroup.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react'
 
-import { ThermostatCoolLargeIcon } from 'lib/icons/ThermostatCoolLarge.js'
-import { ThermostatHeatLargeIcon } from 'lib/icons/ThermostatHeatLarge.js'
+import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
+import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import {
   getCoolBounds,
   getHeatBounds,
@@ -138,7 +138,7 @@ export function TemperatureControlGroup({
     <div className='seam-temperature-control-group'>
       {showHeat && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatHeatLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
+          <ThermostatHeatIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='heat'
             value={heatValue}
@@ -151,7 +151,7 @@ export function TemperatureControlGroup({
 
       {showCool && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatCoolLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
+          <ThermostatCoolIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='cool'
             value={coolValue}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '4.3.1'
+const seamapiReactVersion = '4.5.0'
 
 export default seamapiReactVersion

package/lib/icons/ThermostatCoolLarge.d.ts

@@ -1,2 +0,0 @@
-import type { SVGProps } from 'react';
-export declare function ThermostatCoolLargeIcon(props: SVGProps<SVGSVGElement>): JSX.Element;

package/lib/icons/ThermostatCoolLarge.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ThermostatCoolLargeIcon(props) {
-    return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '1em', height: '1em', fill: 'none', viewBox: '0 0 24 24', ...props, children: [_jsx("mask", { id: 'thermostat-cool-large_svg__a', width: 24, height: 24, x: 0, y: 0, maskUnits: 'userSpaceOnUse', style: {
-                    maskType: 'alpha',
-                }, children: _jsx("path", { fill: '#D9D9D9', d: 'M0 0h24v24H0z' }) }), _jsx("g", { mask: 'url(#thermostat-cool-large_svg__a)', children: _jsx("path", { fill: '#6B95FF', d: 'M11 22v-4.15l-3.25 3.2-1.4-1.4L11 15v-2H9l-4.65 4.65-1.4-1.4L6.15 13H2v-2h4.15l-3.2-3.25 1.4-1.4L9 11h2V9L6.35 4.35l1.4-1.4L11 6.15V2h2v4.15l3.25-3.2 1.4 1.4L13 9v2h2l4.65-4.65 1.4 1.4-3.2 3.25H22v2h-4.15l3.2 3.25-1.4 1.4L15 13h-2v2l4.65 4.65-1.4 1.4-3.25-3.2V22z' }) })] }));
-}
-//# sourceMappingURL=ThermostatCoolLarge.js.map

package/lib/icons/ThermostatCoolLarge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThermostatCoolLarge.js","sourceRoot":"","sources":["../../src/lib/icons/ThermostatCoolLarge.tsx"],"names":[],"mappings":";AAKA,MAAM,UAAU,uBAAuB,CACrC,KAA8B;IAE9B,OAAO,CACL,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,KACf,KAAK,aAET,eACE,EAAE,EAAC,8BAA8B,EACjC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE;oBACL,QAAQ,EAAE,OAAO;iBAClB,YAED,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,eAAe,GAAG,GACpC,EACP,YAAG,IAAI,EAAC,oCAAoC,YAC1C,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,yQAAyQ,GAC3Q,GACA,IACA,CACP,CAAA;AACH,CAAC"}

package/lib/icons/ThermostatHeatLarge.d.ts

@@ -1,2 +0,0 @@
-import type { SVGProps } from 'react';
-export declare function ThermostatHeatLargeIcon(props: SVGProps<SVGSVGElement>): JSX.Element;

package/lib/icons/ThermostatHeatLarge.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ThermostatHeatLargeIcon(props) {
-    return (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '1em', height: '1em', fill: 'none', viewBox: '0 0 24 24', ...props, children: _jsx("path", { fill: '#FC8E28', d: 'M4 14q0-2.625 1.25-4.675T8 5.875t2.75-2.137L12 3v3.3q0 .925.625 1.463.625.537 1.4.537.425 0 .813-.175t.712-.575L16 7q1.8 1.05 2.9 2.912Q20 11.776 20 14q0 2.2-1.075 4.012a8.1 8.1 0 0 1-2.825 2.863q.425-.6.662-1.312.238-.714.238-1.513a4.8 4.8 0 0 0-.375-1.887 5 5 0 0 0-1.075-1.588L12 11.1l-3.525 3.475a5.1 5.1 0 0 0-1.1 1.6A4.7 4.7 0 0 0 7 18.05q0 .8.237 1.512.238.713.663 1.313a8.1 8.1 0 0 1-2.825-2.863Q4 16.2 4 14m8-.1 2.125 2.075q.425.425.65.95T15 18.05q0 1.225-.875 2.087T12 21t-2.125-.863A2.82 2.82 0 0 1 9 18.05q0-.575.225-1.113.225-.537.65-.962z' }) }));
-}
-//# sourceMappingURL=ThermostatHeatLarge.js.map

package/lib/icons/ThermostatHeatLarge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThermostatHeatLarge.js","sourceRoot":"","sources":["../../src/lib/icons/ThermostatHeatLarge.tsx"],"names":[],"mappings":";AAKA,MAAM,UAAU,uBAAuB,CACrC,KAA8B;IAE9B,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,KACf,KAAK,YAET,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,0iBAA0iB,GAC5iB,GACE,CACP,CAAA;AACH,CAAC"}

package/src/lib/icons/ThermostatCoolLarge.tsx

@@ -1,39 +0,0 @@
-/*
- * 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 ThermostatCoolLargeIcon(
-  props: SVGProps<SVGSVGElement>
-): JSX.Element {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='1em'
-      height='1em'
-      fill='none'
-      viewBox='0 0 24 24'
-      {...props}
-    >
-      <mask
-        id='thermostat-cool-large_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(#thermostat-cool-large_svg__a)'>
-        <path
-          fill='#6B95FF'
-          d='M11 22v-4.15l-3.25 3.2-1.4-1.4L11 15v-2H9l-4.65 4.65-1.4-1.4L6.15 13H2v-2h4.15l-3.2-3.25 1.4-1.4L9 11h2V9L6.35 4.35l1.4-1.4L11 6.15V2h2v4.15l3.25-3.2 1.4 1.4L13 9v2h2l4.65-4.65 1.4 1.4-3.2 3.25H22v2h-4.15l3.2 3.25-1.4 1.4L15 13h-2v2l4.65 4.65-1.4 1.4-3.25-3.2V22z'
-        />
-      </g>
-    </svg>
-  )
-}

package/src/lib/icons/ThermostatHeatLarge.tsx

@@ -1,24 +0,0 @@
-/*
- * 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 ThermostatHeatLargeIcon(
-  props: SVGProps<SVGSVGElement>
-): JSX.Element {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='1em'
-      height='1em'
-      fill='none'
-      viewBox='0 0 24 24'
-      {...props}
-    >
-      <path
-        fill='#FC8E28'
-        d='M4 14q0-2.625 1.25-4.675T8 5.875t2.75-2.137L12 3v3.3q0 .925.625 1.463.625.537 1.4.537.425 0 .813-.175t.712-.575L16 7q1.8 1.05 2.9 2.912Q20 11.776 20 14q0 2.2-1.075 4.012a8.1 8.1 0 0 1-2.825 2.863q.425-.6.662-1.312.238-.714.238-1.513a4.8 4.8 0 0 0-.375-1.887 5 5 0 0 0-1.075-1.588L12 11.1l-3.525 3.475a5.1 5.1 0 0 0-1.1 1.6A4.7 4.7 0 0 0 7 18.05q0 .8.237 1.512.238.713.663 1.313a8.1 8.1 0 0 1-2.825-2.863Q4 16.2 4 14m8-.1 2.125 2.075q.425.425.65.95T15 18.05q0 1.225-.875 2.087T12 21t-2.125-.863A2.82 2.82 0 0 1 9 18.05q0-.575.225-1.113.225-.537.65-.962z'
-      />
-    </svg>
-  )
-}