Merge branch 'main' into dependabot/npm_and_yarn/store2-2.14.4

seamapi · Feb 5, 2025 · 756ad50 · 756ad50
2 parents 30b2727 + 3256772
commit 756ad50
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -87,7 +87,7 @@ export function App() {
   <seam-device-table publishable-key="your_publishable_key"></seam-device-table>
   <script
     type="module"
-    src="https://react.seam.co/v/4.3.1/dist/elements.js"
+    src="https://react.seam.co/v/4.5.0/dist/elements.js"
   ></script>
 </body>
 ```
@@ -215,7 +215,7 @@ or place the following in the `<head>` tag:
 ```html
 <link
   rel="stylesheet"
-  href="https://react.seam.co/v/4.3.1/dist/index.min.css"
+  href="https://react.seam.co/v/4.5.0/dist/index.min.css"
 />
 ```
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "4.3.1",
+  "version": "4.5.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -109,7 +109,7 @@
     "npm": ">= 9.0.0"
   },
   "peerDependencies": {
-    "@seamapi/types": "^1.26.2",
+    "@seamapi/types": "^1.344.3",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",
@@ -127,7 +127,7 @@
     }
   },
   "dependencies": {
-    "@seamapi/http": "^1.14.0",
+    "@seamapi/http": "^1.20.0",
     "@tanstack/react-query": "^5.27.5",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
@@ -144,7 +144,7 @@
     "@rxfork/r2wc-react-to-web-component": "^2.4.0",
     "@seamapi/fake-devicedb": "^1.6.1",
     "@seamapi/fake-seam-connect": "^1.69.1",
-    "@seamapi/types": "^1.292.2",
+    "@seamapi/types": "^1.344.3",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",

diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx
@@ -1,8 +1,11 @@
+import { useState } from 'react'
+
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { isLockDevice, type LockDevice } from 'lib/seam/locks/lock-device.js'
 import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
 import { Button } from 'lib/ui/Button.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { Snackbar, type SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js'
 import { TextButton } from 'lib/ui/TextButton.js'
 
 export function AccessCodeDevice({
@@ -49,40 +52,71 @@ function Content(props: {
   onSelectDevice: (deviceId: string) => void
 }): JSX.Element {
   const { device, disableLockUnlock, onSelectDevice } = props
-  const toggleLock = useToggleLock()
+  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 toggleLockLabel = device.properties.locked ? t.unlock : t.lock
 
   return (
-    <div className='seam-access-code-device'>
-      <div className='seam-device-image'>
-        <DeviceImage device={device} />
-      </div>
-      <div className='seam-body'>
-        <div>{device.properties.name}</div>
-        <TextButton
-          onClick={() => {
-            onSelectDevice(device.device_id)
-          }}
-        >
-          {t.deviceDetails}
-        </TextButton>
+    <>
+      <Snackbar
+        variant={snackbarVariant}
+        visible={snackbarVisible}
+        onClose={() => {
+          setSnackbarVisible(false)
+        }}
+        message={
+          snackbarVariant === 'success'
+            ? t.successfullyUpdated
+            : t.failedToUpdate
+        }
+        autoDismiss
+      />
+
+      <div className='seam-access-code-device'>
+        <div className='seam-device-image'>
+          <DeviceImage device={device} />
+        </div>
+        <div className='seam-body'>
+          <div>{device.properties.name}</div>
+          <TextButton
+            onClick={() => {
+              onSelectDevice(device.device_id)
+            }}
+          >
+            {t.deviceDetails}
+          </TextButton>
+        </div>
+        {!disableLockUnlock && device.properties.online && (
+          <Button
+            onClick={() => {
+              toggleLock.mutate(device)
+            }}
+          >
+            {toggleLockLabel}
+          </Button>
+        )}
       </div>
-      {!disableLockUnlock && device.properties.online && (
-        <Button
-          onClick={() => {
-            toggleLock.mutate(device)
-          }}
-        >
-          {toggleLockLabel}
-        </Button>
-      )}
-    </div>
+    </>
   )
 }
 
 const t = {
   deviceDetails: 'Device details',
   unlock: 'Unlock',
   lock: 'Lock',
+  successfullyUpdated: 'Lock status has been successfully updated',
+  failedToUpdate: 'Failed to update lock status',
 }