@seamapi/react 1.61.2 → 1.63.0

package/lib/ui/Snackbar/Snackbar.js

@@ -1,30 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { CheckGreenIcon } from '../../../lib/icons/CheckGreen.js';
 import { CloseWhiteIcon } from '../../../lib/icons/CloseWhite.js';
 import { ExclamationCircleIcon } from '../../../lib/icons/ExclamationCircle.js';
-export function Snackbar({ message, variant, visible, action, autoDismiss = false, dismissAfterMs = 5000, disableCloseButton = false, }) {
-    const [hidden, setHidden] = useState(visible);
+export function Snackbar({ message, variant, visible, action, autoDismiss = false, dismissAfterMs = 5000, disableCloseButton = false, onClose, }) {
     const { label: actionLabel, onClick: handleActionClick } = action ?? {};
-    useEffect(() => {
-        setHidden(!visible);
-    }, [visible]);
     useEffect(() => {
         if (!autoDismiss) {
             return () => { };
         }
         const timeout = globalThis.setTimeout(() => {
-            setHidden(false);
+            onClose();
         }, dismissAfterMs);
         return () => {
             globalThis.clearTimeout(timeout);
         };
-    }, [autoDismiss, dismissAfterMs]);
+    }, [autoDismiss, dismissAfterMs, onClose]);
     return (_jsx("div", { className: 'seam-snackbar-wrap', children: _jsxs("div", { className: classNames('seam-snackbar', {
-                'seam-snackbar-hide': hidden,
+                'seam-snackbar-visible': visible,
             }), children: [_jsx(SnackbarIcon, { variant: variant }), _jsx("div", { className: 'seam-snackbar-message-wrap', children: _jsx("p", { className: 'seam-snackbar-message', children: message }) }), _jsxs("div", { className: 'seam-snackbar-actions-wrap', children: [action != null && (_jsx("button", { className: 'seam-snackbar-action', onClick: handleActionClick, children: _jsx("span", { className: 'seam-snackbar-action-label', children: actionLabel }) })), !disableCloseButton && (_jsx("button", { className: 'seam-snackbar-close-button', onClick: () => {
-                                setHidden(true);
+                                onClose();
                             }, children: _jsx(CloseWhiteIcon, {}) }))] })] }) }));
 }
 function SnackbarIcon(props) {

package/lib/ui/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/lib/ui/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAiBtE,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,WAAW,GAAG,KAAK,EACnB,cAAc,GAAG,IAAI,EACrB,kBAAkB,GAAG,KAAK,GACZ;IACd,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE7C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;SAChB;QAED,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,EAAE;YACzC,SAAS,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC,EAAE,cAAc,CAAC,CAAA;QAElB,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QAClC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAA;IAEjC,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,YACjC,eACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;gBACrC,oBAAoB,EAAE,MAAM;aAC7B,CAAC,aAEF,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,EAClC,cAAK,SAAS,EAAC,4BAA4B,YACzC,YAAG,SAAS,EAAC,uBAAuB,YAAE,OAAO,GAAK,GAC9C,EACN,eAAK,SAAS,EAAC,4BAA4B,aACxC,MAAM,IAAI,IAAI,IAAI,CACjB,iBACE,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,iBAAiB,YAE1B,eAAM,SAAS,EAAC,4BAA4B,YAAE,WAAW,GAAQ,GAC1D,CACV,EACA,CAAC,kBAAkB,IAAI,CACtB,iBACE,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,GAAG,EAAE;gCACZ,SAAS,CAAC,IAAI,CAAC,CAAA;4BACjB,CAAC,YAED,KAAC,cAAc,KAAG,GACX,CACV,IACG,IACF,GACF,CACP,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,KAAmC;IACvD,QAAQ,KAAK,CAAC,OAAO,EAAE;QACrB,KAAK,SAAS;YACZ,OAAO,KAAC,cAAc,KAAG,CAAA;QAC3B,KAAK,OAAO;YACV,OAAO,KAAC,qBAAqB,KAAG,CAAA;KACnC;AACH,CAAC"}
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/lib/ui/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAkBtE,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,WAAW,GAAG,KAAK,EACnB,cAAc,GAAG,IAAI,EACrB,kBAAkB,GAAG,KAAK,EAC1B,OAAO,GACO;IACd,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;SAChB;QAED,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,GAAG,EAAE;YACzC,OAAO,EAAE,CAAA;QACX,CAAC,EAAE,cAAc,CAAC,CAAA;QAElB,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;QAClC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAA;IAE1C,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,YACjC,eACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;gBACrC,uBAAuB,EAAE,OAAO;aACjC,CAAC,aAEF,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,GAAI,EAClC,cAAK,SAAS,EAAC,4BAA4B,YACzC,YAAG,SAAS,EAAC,uBAAuB,YAAE,OAAO,GAAK,GAC9C,EACN,eAAK,SAAS,EAAC,4BAA4B,aACxC,MAAM,IAAI,IAAI,IAAI,CACjB,iBACE,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,iBAAiB,YAE1B,eAAM,SAAS,EAAC,4BAA4B,YAAE,WAAW,GAAQ,GAC1D,CACV,EACA,CAAC,kBAAkB,IAAI,CACtB,iBACE,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,GAAG,EAAE;gCACZ,OAAO,EAAE,CAAA;4BACX,CAAC,YAED,KAAC,cAAc,KAAG,GACX,CACV,IACG,IACF,GACF,CACP,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,KAAmC;IACvD,QAAQ,KAAK,CAAC,OAAO,EAAE;QACrB,KAAK,SAAS;YACZ,OAAO,KAAC,cAAc,KAAG,CAAA;QAC3B,KAAK,OAAO;YACV,OAAO,KAAC,qBAAqB,KAAG,CAAA;KACnC;AACH,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.61.2";
+declare const seamapiReactVersion = "1.63.0";
 export default seamapiReactVersion;

package/lib/version.js

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

package/package.json

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

package/src/lib/element.tsx

@@ -43,6 +43,7 @@ const commonProps: R2wcProps<CommonProps> = {
   disableCreateAccessCode: 'boolean',
   disableEditAccessCode: 'boolean',
   disableDeleteAccessCode: 'boolean',
+  disableResourceIds: 'boolean',
   onBack: 'object',
   className: 'string',
 }

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

@@ -41,6 +41,7 @@ export function AccessCodeDetails({
   disableEditAccessCode = false,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
   onBack,
   className,
 }: AccessCodeDetailsProps): JSX.Element | null {
@@ -64,6 +65,7 @@ export function AccessCodeDetails({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           selectDevice(null)
         }}
@@ -137,19 +139,21 @@ export function AccessCodeDetails({
         </div>
       )}
       <div className='seam-details'>
-        <div className='seam-row'>
-          <div className='seam-heading'>{t.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>
+        {!disableResourceIds && (
+          <div className='seam-row'>
+            <div className='seam-heading'>{t.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>
+        )}
         <div className='seam-row'>
           <div className='seam-heading'>{t.created}:</div>
           <div className='seam-content'>

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

@@ -24,6 +24,7 @@ import { NestedEditAccessCodeForm } from 'lib/seam/components/EditAccessCodeForm
 import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
+import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -85,6 +86,7 @@ export function AccessCodeTable({
   disableEditAccessCode = false,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
 }: AccessCodeTableProps): JSX.Element {
   useComponentTelemetry('AccessCodeTable')
 
@@ -130,6 +132,13 @@ export function AccessCodeTable({
     [setSelectedEditAccessCodeId]
   )
 
+  const [accessCodeResult, setAccessCodeResult] = useState<
+    'created' | 'updated' | null
+  >(null)
+
+  const accessCodeResultMessage =
+    accessCodeResult === 'created' ? t.accesCodeCreated : t.accesCodeUpdated
+
   if (selectedEditAccessCodeId != null) {
     return (
       <NestedEditAccessCodeForm
@@ -138,9 +147,13 @@ export function AccessCodeTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setSelectedEditAccessCodeId(null)
         }}
+        onSuccess={() => {
+          setAccessCodeResult('updated')
+        }}
         className={className}
       />
     )
@@ -148,20 +161,32 @@ export function AccessCodeTable({
 
   if (selectedViewAccessCodeId != null) {
     return (
-      <NestedAccessCodeDetails
-        accessCodeId={selectedViewAccessCodeId}
-        onEdit={() => {
-          setSelectedEditAccessCodeId(selectedViewAccessCodeId)
-        }}
-        disableLockUnlock={disableLockUnlock}
-        disableCreateAccessCode={disableCreateAccessCode}
-        disableEditAccessCode={disableEditAccessCode}
-        disableDeleteAccessCode={disableDeleteAccessCode}
-        onBack={() => {
-          setSelectedViewAccessCodeId(null)
-        }}
-        className={className}
-      />
+      <>
+        <Snackbar
+          variant='success'
+          message={accessCodeResultMessage}
+          visible={accessCodeResult != null}
+          autoDismiss
+          onClose={() => {
+            setAccessCodeResult(null)
+          }}
+        />
+        <NestedAccessCodeDetails
+          accessCodeId={selectedViewAccessCodeId}
+          onEdit={() => {
+            setSelectedEditAccessCodeId(selectedViewAccessCodeId)
+          }}
+          disableLockUnlock={disableLockUnlock}
+          disableCreateAccessCode={disableCreateAccessCode}
+          disableEditAccessCode={disableEditAccessCode}
+          disableDeleteAccessCode={disableDeleteAccessCode}
+          disableResourceIds={disableResourceIds}
+          onBack={() => {
+            setSelectedViewAccessCodeId(null)
+          }}
+          className={className}
+        />
+      </>
     )
   }
 
@@ -173,8 +198,12 @@ export function AccessCodeTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={toggleAddAccessCodeForm}
         className={className}
+        onSuccess={() => {
+          setAccessCodeResult('created')
+        }}
       />
     )
   }
@@ -184,52 +213,63 @@ export function AccessCodeTable({
   }
 
   return (
-    <div className={classNames('seam-table', className)}>
-      <ContentHeader onBack={onBack} />
-      <TableHeader>
-        <div className='seam-left'>
-          {title != null ? (
-            <TableTitle>
-              {heading ?? title ?? t.accessCodes}{' '}
-              <Caption>({filteredAccessCodes.length})</Caption>
-            </TableTitle>
-          ) : (
-            <div className='seam-fragment' />
-          )}
-          {!disableCreateAccessCode && (
-            <IconButton
-              onClick={toggleAddAccessCodeForm}
-              className='seam-add-button'
-            >
-              <AddIcon />
-            </IconButton>
+    <>
+      <Snackbar
+        variant='success'
+        message={accessCodeResultMessage}
+        visible={accessCodeResult != null}
+        autoDismiss
+        onClose={() => {
+          setAccessCodeResult(null)
+        }}
+      />
+      <div className={classNames('seam-table', className)}>
+        <ContentHeader onBack={onBack} />
+        <TableHeader>
+          <div className='seam-left'>
+            {title != null ? (
+              <TableTitle>
+                {heading ?? title ?? t.accessCodes}{' '}
+                <Caption>({filteredAccessCodes.length})</Caption>
+              </TableTitle>
+            ) : (
+              <div className='seam-fragment' />
+            )}
+            {!disableCreateAccessCode && (
+              <IconButton
+                onClick={toggleAddAccessCodeForm}
+                className='seam-add-button'
+              >
+                <AddIcon />
+              </IconButton>
+            )}
+          </div>
+          <div className='seam-table-header-loading-wrap'>
+            <LoadingToast
+              isLoading={isInitialLoading}
+              label={t.loading}
+              top={-20}
+            />
+          </div>
+          {!disableSearch && (
+            <SearchTextField
+              value={searchInputValue}
+              onChange={setSearchInputValue}
+              disabled={(accessCodes?.length ?? 0) === 0}
+            />
           )}
-        </div>
-        <div className='seam-table-header-loading-wrap'>
-          <LoadingToast
-            isLoading={isInitialLoading}
-            label={t.loading}
-            top={-20}
+        </TableHeader>
+        <TableBody>
+          <Content
+            accessCodes={filteredAccessCodes}
+            onAccessCodeClick={handleAccessCodeClick}
+            onAccessCodeEdit={handleAccessCodeEdit}
+            disableEditAccessCode={disableEditAccessCode}
+            disableDeleteAccessCode={disableDeleteAccessCode}
           />
-        </div>
-        {!disableSearch && (
-          <SearchTextField
-            value={searchInputValue}
-            onChange={setSearchInputValue}
-            disabled={(accessCodes?.length ?? 0) === 0}
-          />
-        )}
-      </TableHeader>
-      <TableBody>
-        <Content
-          accessCodes={filteredAccessCodes}
-          onAccessCodeClick={handleAccessCodeClick}
-          onAccessCodeEdit={handleAccessCodeEdit}
-          disableEditAccessCode={disableEditAccessCode}
-          disableDeleteAccessCode={disableDeleteAccessCode}
-        />
-      </TableBody>
-    </div>
+        </TableBody>
+      </div>
+    </>
   )
 }
 
@@ -296,4 +336,6 @@ const t = {
   accessCodes: 'Access Codes',
   noAccessCodesMessage: 'Sorry, no access codes were found',
   loading: 'Loading access codes',
+  accesCodeUpdated: 'Access code updated',
+  accesCodeCreated: 'Access code created',
 }

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

@@ -35,6 +35,7 @@ export function ClimateSettingScheduleDetails({
   className,
   disableCreateAccessCode,
   disableEditAccessCode,
+  disableResourceIds = false,
 }: ClimateSettingScheduleDetailsProps): JSX.Element | null {
   useComponentTelemetry('ClimateSettingScheduleDetails')
 
@@ -59,6 +60,7 @@ export function ClimateSettingScheduleDetails({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           selectDevice(null)
         }}

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

@@ -68,6 +68,7 @@ export function ClimateSettingScheduleTable({
   className,
   disableCreateAccessCode,
   disableEditAccessCode,
+  disableResourceIds = false,
 }: ClimateSettingScheduleTableProps): JSX.Element {
   useComponentTelemetry('ClimateSettingScheduleTable')
 
@@ -118,6 +119,7 @@ export function ClimateSettingScheduleTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setSelectedViewClimateSettingScheduleId(null)
         }}

package/src/lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.element.ts

@@ -5,6 +5,7 @@ export const name = 'seam-create-access-code-form'
 
 export const props: ElementProps<CreateAccessCodeFormProps> = {
   deviceId: 'string',
+  onSuccess: 'object',
 }
 
 export { CreateAccessCodeForm as Component } from './CreateAccessCodeForm.js'

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { SeamError } from 'seamapi'
+import type { AccessCode, SeamError } from 'seamapi'
 
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
@@ -18,6 +18,7 @@ import {
 
 export interface CreateAccessCodeFormProps extends CommonProps {
   deviceId: string
+  onSuccess?: (accessCodeId: string) => void
 }
 
 export const NestedCreateAccessCodeForm =
@@ -27,6 +28,7 @@ export function CreateAccessCodeForm({
   className,
   onBack,
   deviceId,
+  onSuccess,
 }: CreateAccessCodeFormProps): JSX.Element | null {
   useComponentTelemetry('CreateAccessCodeForm')
 
@@ -38,18 +40,30 @@ export function CreateAccessCodeForm({
     return null
   }
 
-  return <Content device={device} className={className} onBack={onBack} />
+  return (
+    <Content
+      device={device}
+      className={className}
+      onBack={onBack}
+      onSuccess={onSuccess}
+    />
+  )
 }
 
 function Content({
   device,
   className,
   onBack,
+  onSuccess,
 }: Omit<CreateAccessCodeFormProps, 'deviceId'> & {
   device: NonNullable<UseDeviceData>
 }): JSX.Element {
   const { submit, isSubmitting, responseErrors } = useSubmitCreateAccessCode({
-    onSuccess: () => {
+    onSuccess: (accessCode: AccessCode) => {
+      if (onSuccess != null) {
+        onSuccess(accessCode.access_code_id)
+      }
+
       if (onBack != null) {
         onBack()
       }
@@ -68,7 +82,9 @@ function Content({
   )
 }
 
-function useSubmitCreateAccessCode(params: { onSuccess: () => void }): {
+function useSubmitCreateAccessCode(params: {
+  onSuccess: (accessCode: AccessCode) => void
+}): {
   submit: (data: AccessCodeFormSubmitData) => void
   isSubmitting: boolean
   responseErrors: ResponseErrors | null

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

@@ -20,6 +20,7 @@ export function DeviceDetails({
   deviceId,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
   onBack,
   className,
 }: DeviceDetailsProps): JSX.Element | null {
@@ -36,6 +37,7 @@ export function DeviceDetails({
   const props = {
     disableLockUnlock,
     disableDeleteAccessCode,
+    disableResourceIds,
     onBack,
     className,
   }

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

@@ -28,6 +28,7 @@ export function LockDeviceDetails(
     disableCreateAccessCode,
     disableEditAccessCode,
     disableDeleteAccessCode,
+    disableResourceIds,
     onBack,
     className,
   } = props
@@ -55,6 +56,7 @@ export function LockDeviceDetails(
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={toggleAccessCodesOpen}
         className={className}
       />

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

@@ -19,17 +19,16 @@ interface ThermostatDeviceDetailsProps extends CommonProps {
   device: ThermostatDevice
 }
 
-export function ThermostatDeviceDetails(
-  props: ThermostatDeviceDetailsProps
-): JSX.Element | null {
-  const {
-    device,
-    onBack,
-    className,
-    disableCreateAccessCode,
-    disableEditAccessCode,
-  } = props
-
+export function ThermostatDeviceDetails({
+  device,
+  onBack,
+  className,
+  disableLockUnlock,
+  disableCreateAccessCode,
+  disableEditAccessCode,
+  disableDeleteAccessCode,
+  disableResourceIds = false,
+}: ThermostatDeviceDetailsProps): JSX.Element | null {
   const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)
 
   const { connectedAccount } = useConnectedAccount(device.connected_account_id)
@@ -42,10 +41,11 @@ export function ThermostatDeviceDetails(
     return (
       <NestedClimateSettingScheduleTable
         deviceId={device.device_id}
-        disableLockUnlock={props.disableLockUnlock}
+        disableLockUnlock={disableLockUnlock}
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
-        disableDeleteAccessCode={props.disableDeleteAccessCode}
+        disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setClimateSettingsOpen(false)
         }}
@@ -142,7 +142,9 @@ export function ThermostatDeviceDetails(
                   device.connected_account_id
                 }
               />
-              <DetailRow label={t.deviceId} sublabel={device.device_id} />
+              {!disableResourceIds && (
+                <DetailRow label={t.deviceId} sublabel={device.device_id} />
+              )}
             </DetailSection>
           </DetailSectionGroup>
         </div>

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

@@ -71,6 +71,7 @@ export function DeviceTable({
   disableCreateAccessCode = false,
   disableEditAccessCode = false,
   disableDeleteAccessCode = false,
+  disableResourceIds = false,
   onBack,
   className,
 }: DeviceTableProps = {}): JSX.Element {
@@ -110,6 +111,7 @@ export function DeviceTable({
         disableCreateAccessCode={disableCreateAccessCode}
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
         onBack={() => {
           setSelectedDeviceId(null)
         }}

package/src/lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.element.ts

@@ -5,6 +5,7 @@ export const name = 'seam-edit-access-code-form'
 
 export const props: ElementProps<EditAccessCodeFormProps> = {
   accessCodeId: 'string',
+  onSuccess: 'object',
 }
 
 export { EditAccessCodeForm as Component } from './EditAccessCodeForm.js'

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

@@ -19,6 +19,7 @@ import {
 
 export interface EditAccessCodeFormProps extends CommonProps {
   accessCodeId: string
+  onSuccess?: (accessCodeId: string) => void
 }
 
 export const NestedEditAccessCodeForm =
@@ -28,6 +29,7 @@ export function EditAccessCodeForm({
   accessCodeId,
   onBack,
   className,
+  onSuccess,
 }: EditAccessCodeFormProps): JSX.Element | null {
   useComponentTelemetry('EditAccessCodeForm')
 
@@ -40,7 +42,12 @@ export function EditAccessCodeForm({
   }
 
   return (
-    <Content accessCode={accessCode} className={className} onBack={onBack} />
+    <Content
+      accessCode={accessCode}
+      className={className}
+      onBack={onBack}
+      onSuccess={onSuccess}
+    />
   )
 }
 
@@ -48,6 +55,7 @@ function Content({
   className,
   onBack,
   accessCode,
+  onSuccess,
 }: Omit<EditAccessCodeFormProps, 'accessCodeId'> & {
   accessCode: NonNullable<UseAccessCodeData>
 }): JSX.Element | null {
@@ -57,7 +65,15 @@ function Content({
 
   const { submit, isSubmitting, responseErrors } = useSubmitEditAccessCode(
     accessCode,
-    onBack
+    () => {
+      if (onSuccess != null) {
+        onSuccess(accessCode.access_code_id)
+      }
+
+      if (onBack != null) {
+        onBack()
+      }
+    }
   )
 
   if (device == null) {

package/src/lib/seam/components/common-props.tsx

@@ -7,6 +7,7 @@ export interface RequiredCommonProps {
   disableCreateAccessCode: boolean | undefined
   disableEditAccessCode: boolean | undefined
   disableLockUnlock: boolean | undefined
+  disableResourceIds: boolean | undefined
 }
 
 export type CommonProps = Partial<RequiredCommonProps>