chore(medusa,admin-ui): Add reservations FF (#4184)

* chore(medusa,admin-ui): Add reservations FF

* Create five-ways-care.md

* Tweak description

.changeset/five-ways-care.md

@@ -0,0 +1,7 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/admin": patch
+"@medusajs/medusa": patch
+---
+
+chore(medusa,admin-ui): Add reservations FF

packages/admin-ui/ui/src/domain/inventory/header.tsx

@@ -1,5 +1,9 @@
 import TableViewHeader from "../../components/organisms/custom-table-header"
 import { useNavigate } from "react-router-dom"
+import {
+  FeatureFlag,
+  useFeatureFlag,
+} from "../../providers/feature-flag-provider"
 
 type P = {
   activeView: "inventory" | "locations" | "reservations"
@@ -11,6 +15,17 @@ type P = {
 
 function InventoryPageTableHeader(props: P) {
   const navigate = useNavigate()
+  const { isFeatureEnabled } = useFeatureFlag()
+  const isReservationsEnabled =
+    isFeatureEnabled(FeatureFlag.RESERVATIONS) &&
+    isFeatureEnabled(FeatureFlag.INVENTORY)
+
+  const views = ["inventory", "locations"]
+
+  if (isReservationsEnabled) {
+    views.push("reservations")
+  }
+
   return (
     <TableViewHeader
       setActiveView={(v) => {
@@ -20,7 +35,7 @@ function InventoryPageTableHeader(props: P) {
           navigate(`/a/inventory/${v}`)
         }
       }}
-      views={["inventory", "locations", "reservations"]}
+      views={views}
       activeView={props.activeView}
     />
   )

packages/admin-ui/ui/src/domain/inventory/index.tsx

@@ -2,13 +2,24 @@ import { Route, Routes } from "react-router-dom"
 import InventoryView from "./inventory"
 import Locations from "./locations"
 import Reservations from "./reservations"
+import {
+  FeatureFlag,
+  useFeatureFlag,
+} from "../../providers/feature-flag-provider"
 
 const Inventory = () => {
+  const { isFeatureEnabled } = useFeatureFlag()
+  const isReservationsEnabled =
+    isFeatureEnabled(FeatureFlag.RESERVATIONS) &&
+    isFeatureEnabled(FeatureFlag.INVENTORY)
+
   return (
     <Routes>
       <Route index element={<InventoryView />} />
       <Route path="/locations/*" element={<Locations />} />
-      <Route path="/reservations/*" element={<Reservations />} />
+      {isReservationsEnabled && (
+        <Route path="/reservations/*" element={<Reservations />} />
+      )}
     </Routes>
   )
 }

packages/admin-ui/ui/src/providers/feature-flag-provider.tsx

@@ -8,6 +8,8 @@ import { useAdminGetSession, useAdminStore } from "medusa-react"
 
 export enum FeatureFlag {
   PRODUCT_CATEGORIES = "product_categories",
+  RESERVATIONS = "reservations",
+  INVENTORY = "inventoryService",
 }
 
 const defaultFeatureFlagContext: {

packages/medusa/src/loaders/feature-flags/reservations.ts

@@ -0,0 +1,10 @@
+import { FlagSettings } from "../../types/feature-flags"
+
+const ReservationsFeatureFlag: FlagSettings = {
+  key: "reservations",
+  default_val: false,
+  env_key: "MEDUSA_FF_RESERVATIONS",
+  description: "[WIP] Enable the reservations feature from the Inventory Module",
+}
+
+export default ReservationsFeatureFlag