From 11502ee2b51a6d2e8e556fb0bdb6816ea879ee18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Tue, 25 Jun 2024 08:48:52 +0200
Subject: [PATCH] fix(dashboard): create reservation prefill (#7820)

**What**
- when creating reservation from inventory details page, preselect that inventory item

FIXES CORE-2387
---
 .../components/inventory-item-reservations.tsx        |  4 +++-
 .../create-reservation-form.tsx                       | 11 ++++++++---
 .../create-reservation/create-reservation-modal.tsx   |  7 ++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx
index 3c00d93aee..242d8950a5 100644
--- a/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx
+++ b/packages/admin-next/dashboard/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx
@@ -18,7 +18,9 @@ export const InventoryItemReservationsSection = ({
       <div className="flex items-center justify-between px-6 py-4">
         <Heading>{t("reservations.domain")}</Heading>
         <Button size="small" variant="secondary" asChild>
-          <Link to="/reservations/create">{t("actions.create")}</Link>
+          <Link to={`/reservations/create?item_id=${inventoryItem.id}`}>
+            {t("actions.create")}
+          </Link>
         </Button>
       </div>
       <ReservationItemTable inventoryItem={inventoryItem} />
diff --git a/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/components/create-reservation-form/create-reservation-form.tsx b/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/components/create-reservation-form/create-reservation-form.tsx
index 5ae336e0a9..b749d46256 100644
--- a/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/components/create-reservation-form/create-reservation-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/components/create-reservation-form/create-reservation-form.tsx
@@ -44,7 +44,7 @@ const AttributeGridRow = ({
   )
 }
 
-export const CreateReservationForm = () => {
+export const CreateReservationForm = (props: { inventoryItemId?: string }) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
   const [inventorySearch, setInventorySearch] = React.useState<string | null>(
@@ -53,7 +53,7 @@ export const CreateReservationForm = () => {
 
   const form = useForm<zod.infer<typeof CreateReservationSchema>>({
     defaultValues: {
-      inventory_item_id: "",
+      inventory_item_id: props.inventoryItemId || "",
       location_id: "",
       quantity: 0,
       description: "",
@@ -98,7 +98,11 @@ export const CreateReservationForm = () => {
           dismissLabel: t("actions.close"),
           description: t("inventory.reservation.successToast"),
         })
-        handleSuccess(`/reservations/${reservation.id}`)
+        handleSuccess(
+          props.inventoryItemId
+            ? `/inventory/${props.inventoryItemId}`
+            : `/reservations/${reservation.id}`
+        )
       },
     })
   })
@@ -147,6 +151,7 @@ export const CreateReservationForm = () => {
                             onChange(v)
                           }}
                           {...field}
+                          disabled={!!props.inventoryItemId}
                           options={(inventory_items ?? []).map(
                             (inventoryItem) => ({
                               label: inventoryItem.title ?? inventoryItem.sku!,
diff --git a/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/create-reservation-modal.tsx b/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/create-reservation-modal.tsx
index 0c0733b8b0..e6fd6850c1 100644
--- a/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/create-reservation-modal.tsx
+++ b/packages/admin-next/dashboard/src/routes/reservations/reservation-list/create-reservation/create-reservation-modal.tsx
@@ -1,10 +1,15 @@
 import { CreateReservationForm } from "./components/create-reservation-form"
 import { RouteFocusModal } from "../../../../components/route-modal"
+import { useSearchParams } from "react-router-dom"
 
 export const CreateReservationModal = () => {
+  const [params] = useSearchParams()
+
+  const inventoryItemId = params.get("item_id")
+
   return (
     <RouteFocusModal>
-      <CreateReservationForm />
+      <CreateReservationForm inventoryItemId={inventoryItemId} />
     </RouteFocusModal>
   )
 }