From 37fd675d4a7db34ee9870109a608b5afe76f042d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Louis=20Pr=C3=A9?= <louis@getseam.com>
Date: Thu, 25 Jul 2024 13:43:26 -0700
Subject: [PATCH] feat: Nest access code edit form in details component

---
 .../AccessCodeDetails.element.ts              |  1 +
 .../AccessCodeDetails/AccessCodeDetails.tsx   | 40 +++++++++++++++++--
 .../AccessCodeTable/AccessCodeTable.tsx       |  3 --
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts b/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts
index b55dd7885..a59bb2cbc 100644
--- a/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts
+++ b/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts
@@ -8,6 +8,7 @@ export const props: ElementProps<AccessCodeDetailsProps> = {
   accessCodeId: 'string',
   onEdit: 'object',
   onDeleteSuccess: 'object',
+  preventDefaultOnEdit: 'boolean',
 }
 
 export { AccessCodeDetails as Component } from './AccessCodeDetails.js'
diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx b/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx
index 3fa542831..e516b1ca9 100644
--- a/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx
+++ b/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx
@@ -1,7 +1,7 @@
 import type { AccessCode } from '@seamapi/types/connect'
 import classNames from 'classnames'
 import { DateTime } from 'luxon'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { CopyIcon } from 'lib/icons/Copy.js'
 import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
@@ -12,6 +12,7 @@ import {
   withRequiredCommonProps,
 } from 'lib/seam/components/common-props.js'
 import { NestedDeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import { NestedEditAccessCodeForm } from 'lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.js'
 import {
   accessCodeErrorFilter,
   accessCodeWarningFilter,
@@ -26,7 +27,8 @@ import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
 export interface AccessCodeDetailsProps extends CommonProps {
   accessCodeId: string
-  onEdit: () => void
+  onEdit?: () => void
+  preventDefaultOnEdit?: boolean
   onDeleteSuccess?: () => void
 }
 
@@ -37,6 +39,7 @@ export function AccessCodeDetails({
   accessCodeId,
   onEdit,
   onDeleteSuccess,
+  preventDefaultOnEdit = false,
   errorFilter = () => true,
   warningFilter = () => true,
   disableCreateAccessCode = false,
@@ -54,6 +57,13 @@ export function AccessCodeDetails({
   const { accessCode } = useAccessCode({ access_code_id: accessCodeId })
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
   const { mutate: deleteCode, isPending: isDeleting } = useDeleteAccessCode()
+  const [editFormOpen, setEditFormOpen] = useState<boolean>(false)
+
+  const handleEdit = useCallback((): void => {
+    onEdit?.()
+    if (preventDefaultOnEdit) return
+    setEditFormOpen(true)
+  }, [onEdit, preventDefaultOnEdit, setEditFormOpen])
 
   if (accessCode == null) {
     return null
@@ -62,6 +72,30 @@ export function AccessCodeDetails({
   const name = accessCode.name ?? t.fallbackName
   const isAccessCodeBeingRemoved = accessCode.status === 'removing'
 
+  if (editFormOpen) {
+    return (
+      <NestedEditAccessCodeForm
+        accessCodeId={accessCode.access_code_id}
+        errorFilter={errorFilter}
+        warningFilter={warningFilter}
+        disableLockUnlock={disableLockUnlock}
+        disableCreateAccessCode={disableCreateAccessCode}
+        disableEditAccessCode={disableEditAccessCode}
+        disableDeleteAccessCode={disableDeleteAccessCode}
+        disableResourceIds={disableResourceIds}
+        disableConnectedAccountInformation={disableConnectedAccountInformation}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
+        onBack={() => {
+          setEditFormOpen(false)
+        }}
+        onSuccess={() => {
+          // TODO setAccessCodeResult('updated')
+        }}
+        className={className}
+      />
+    )
+  }
+
   if (selectedDeviceId != null) {
     return (
       <NestedDeviceDetails
@@ -148,7 +182,7 @@ export function AccessCodeDetails({
           {!disableEditAccessCode && (
             <Button
               size='small'
-              onClick={onEdit}
+              onClick={handleEdit}
               disabled={isAccessCodeBeingRemoved || isDeleting}
             >
               {t.editCode}
diff --git a/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx b/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx
index bf9c93a60..22640c30f 100644
--- a/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx
+++ b/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx
@@ -165,9 +165,6 @@ export function AccessCodeTable({
         />
         <NestedAccessCodeDetails
           accessCodeId={selectedViewAccessCodeId}
-          onEdit={() => {
-            setSelectedEditAccessCodeId(selectedViewAccessCodeId)
-          }}
           onDeleteSuccess={() => {
             handleAccessCodeDeleteSuccess()
           }}