Feat(dashboard): admin locations v2 (#6868)

* initial create

* add list for stock locations

* add changeset

* redo changes for stock locatino module'

* add changeset

* naming

* prep for pr

* move integration tests

* fix pr feedback

* add changeset

* update changeset

* init

* undo versioning updates

* rm whitespace

* move common files to modules

* Update packages/admin-next/dashboard/src/v2-routes/locations/location-edit/location-edit.tsx

Co-authored-by: Adrien de Peretti <adrien.deperetti@gmail.com>

* rm logs

* fields instead of expands

---------

Co-authored-by: Riqwan Thamir <rmthamir@gmail.com>
Co-authored-by: Adrien de Peretti <adrien.deperetti@gmail.com>

packages/admin-next/dashboard/src/components/layout/shell/shell.tsx

@@ -1,3 +1,5 @@
+import * as Dialog from "@radix-ui/react-dialog"
+
 import {
   ArrowRightOnRectangle,
   BellAlert,
@@ -10,9 +12,6 @@ import {
   User as UserIcon,
 } from "@medusajs/icons"
 import { Avatar, DropdownMenu, IconButton, Kbd, Text, clx } from "@medusajs/ui"
-import * as Dialog from "@radix-ui/react-dialog"
-import { useAdminDeleteSession, useAdminGetSession } from "medusa-react"
-import { PropsWithChildren } from "react"
 import {
   Link,
   Outlet,
@@ -21,9 +20,10 @@ import {
   useMatches,
   useNavigate,
 } from "react-router-dom"
+import { useAdminDeleteSession, useAdminGetSession } from "medusa-react"
 
+import { PropsWithChildren } from "react"
 import { Skeleton } from "../../common/skeleton"
-
 import { queryClient } from "../../../lib/medusa"
 import { useSearch } from "../../../providers/search-provider"
 import { useSidebar } from "../../../providers/sidebar-provider"
@@ -121,6 +121,7 @@ const Breadcrumbs = () => {
 const UserBadge = () => {
   const isV2Enabled = V2_ENABLED === "true"
 
+  console.warn(isV2Enabled)
   // Medusa V2 disabled
   const v1 = useAdminGetSession({
     enabled: !isV2Enabled,

packages/admin-next/dashboard/src/modules/locations/location-list/components/locations-list-table/locations-list-table.tsx

@@ -1,6 +1,9 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
-import { StockLocationExpandedDTO } from "@medusajs/types"
 import { Button, Container, Heading, Table, clx, usePrompt } from "@medusajs/ui"
+import { Link, useNavigate, useSearchParams } from "react-router-dom"
+import {
+  NoRecords,
+  NoResults,
+} from "../../../../../components/common/empty-table-content/empty-table-content"
 import {
   PaginationState,
   RowSelectionState,
@@ -9,20 +12,17 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table"
+import { PencilSquare, Trash } from "@medusajs/icons"
 import {
   useAdminDeleteStockLocation,
   useAdminStockLocations,
 } from "medusa-react"
 import { useMemo, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { Link, useNavigate, useSearchParams } from "react-router-dom"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
-import {
-  NoRecords,
-  NoResults,
-} from "../../../../../components/common/empty-table-content/empty-table-content"
 import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { StockLocationExpandedDTO } from "@medusajs/types"
+import { useTranslation } from "react-i18next"
 
 const PAGE_SIZE = 50
 
@@ -49,7 +49,7 @@ export const LocationsListTable = () => {
     useAdminStockLocations({
       limit: PAGE_SIZE,
       offset: pageIndex * PAGE_SIZE,
-      expand: "address",
+      fields: "*address",
     })
 
   const columns = useColumns()

packages/admin-next/dashboard/src/providers/router-provider/v2.tsx

@@ -1,16 +1,15 @@
 import { Navigate, RouteObject, useLocation } from "react-router-dom"
-import { MainLayout } from "../../components/layout-v2/main-layout"
-import { SettingsLayout } from "../../components/layout/settings-layout"
-
-import { Outlet } from "react-router-dom"
-
-import { Spinner } from "@medusajs/icons"
-import { AdminCollectionsRes } from "@medusajs/medusa"
 import { SalesChannelDTO, UserDTO } from "@medusajs/types"
+
+import { AdminCollectionsRes } from "@medusajs/medusa"
 import { ErrorBoundary } from "../../components/error/error-boundary"
-import { useV2Session } from "../../lib/api-v2"
+import { MainLayout } from "../../components/layout-v2/main-layout"
+import { Outlet } from "react-router-dom"
 import { SearchProvider } from "../search-provider"
+import { SettingsLayout } from "../../components/layout/settings-layout"
 import { SidebarProvider } from "../sidebar-provider"
+import { Spinner } from "@medusajs/icons"
+import { useV2Session } from "../../lib/api-v2"
 
 export const ProtectedRoute = () => {
   const { user, isLoading } = useV2Session()
@@ -215,6 +214,44 @@ export const v2Routes: RouteObject[] = [
               },
             ],
           },
+          {
+            path: "locations",
+            element: <Outlet />,
+            handle: {
+              crumb: () => "Locations",
+            },
+            children: [
+              {
+                path: "",
+                lazy: () => import("../../v2-routes/locations/location-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import("../../v2-routes/locations/location-create"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../v2-routes/locations/location-detail"),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import("../../v2-routes/locations/location-edit"),
+                  },
+                  {
+                    path: "add-sales-channels",
+                    lazy: () =>
+                      import(
+                        "../../v2-routes/locations/location-add-sales-channels"
+                      ),
+                  },
+                ],
+              },
+            ],
+          },
           {
             path: "sales-channels",
             element: <Outlet />,

packages/admin-next/dashboard/src/routes/locations/location-create/location-create.tsx

@@ -1,5 +1,5 @@
+import { CreateLocationForm } from "../../../modules/locations/location-create/components/create-location-form"
 import { RouteFocusModal } from "../../../components/route-modal"
-import { CreateLocationForm } from "./components/create-location-form"
 
 export const LocationCreate = () => {
   return (

packages/admin-next/dashboard/src/routes/locations/location-detail/location-detail.tsx

@@ -1,8 +1,9 @@
-import { useAdminStockLocations } from "medusa-react"
 import { Outlet, json, useParams } from "react-router-dom"
+
 import { JsonViewSection } from "../../../components/common/json-view-section"
-import { LocationGeneralSection } from "./components/location-general-section"
-import { LocationSalesChannelSection } from "./components/location-sales-channel-section"
+import { LocationGeneralSection } from "../../../modules/locations/location-detail/components/location-general-section"
+import { LocationSalesChannelSection } from "../../../modules/locations/location-detail/components/location-sales-channel-section"
+import { useAdminStockLocations } from "medusa-react"
 
 export const LocationDetail = () => {
   const { id } = useParams()

packages/admin-next/dashboard/src/routes/locations/location-edit/location-edit.tsx

@@ -1,9 +1,9 @@
+import { EditLocationForm } from "../../../modules/locations/location-edit/components/edit-location-form/edit-location-form"
 import { Heading } from "@medusajs/ui"
-import { useAdminStockLocations } from "medusa-react"
-import { useTranslation } from "react-i18next"
-import { useParams } from "react-router-dom"
 import { RouteDrawer } from "../../../components/route-modal"
-import { EditLocationForm } from "./components/edit-location-form/edit-location-form"
+import { useAdminStockLocations } from "medusa-react"
+import { useParams } from "react-router-dom"
+import { useTranslation } from "react-i18next"
 
 export const LocationEdit = () => {
   const { id } = useParams()

packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx

@@ -1,5 +1,5 @@
+import { LocationsListTable } from "../../../modules/locations/location-list/components/locations-list-table"
 import { Outlet } from "react-router-dom"
-import { LocationsListTable } from "./components/locations-list-table"
 
 export const LocationList = () => {
   return (

packages/admin-next/dashboard/src/v2-routes/locations/location-add-sales-channels/index.ts

@@ -0,0 +1 @@
+export { LocationAddSalesChannels as Component } from "./location-add-sales-channels"

packages/admin-next/dashboard/src/v2-routes/locations/location-add-sales-channels/location-add-sales-channels.tsx

@@ -0,0 +1,8 @@
+import { useAdminAddLocationToSalesChannel } from "medusa-react"
+import { RouteFocusModal } from "../../../components/route-modal"
+
+export const LocationAddSalesChannels = () => {
+  const { mutateAsync } = useAdminAddLocationToSalesChannel() // TODO: We need a batch mutation instead of this to avoid multiple requests
+
+  return <RouteFocusModal></RouteFocusModal>
+}

packages/admin-next/dashboard/src/v2-routes/locations/location-create/index.ts

@@ -0,0 +1 @@
+export { LocationCreate as Component } from "./location-create"

packages/admin-next/dashboard/src/v2-routes/locations/location-create/location-create.tsx

@@ -0,0 +1,10 @@
+import { CreateLocationForm } from "../../../modules/locations/location-create/components/create-location-form"
+import { RouteFocusModal } from "../../../components/route-modal"
+
+export const LocationCreate = () => {
+  return (
+    <RouteFocusModal>
+      <CreateLocationForm />
+    </RouteFocusModal>
+  )
+}

packages/admin-next/dashboard/src/v2-routes/locations/location-detail/index.ts

@@ -0,0 +1 @@
+export { LocationDetail as Component } from "./location-detail"

packages/admin-next/dashboard/src/v2-routes/locations/location-detail/location-detail.tsx

@@ -0,0 +1,39 @@
+import { Outlet, json, useParams } from "react-router-dom"
+
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { LocationGeneralSection } from "../../../modules/locations/location-detail/components/location-general-section"
+import { LocationSalesChannelSection } from "../../../modules/locations/location-detail/components/location-sales-channel-section"
+import { useAdminStockLocations } from "medusa-react"
+
+export const LocationDetail = () => {
+  const { id } = useParams()
+  const { stock_locations, isLoading, isError, error } = useAdminStockLocations(
+    {
+      id,
+      fields: "*address,*sales_channels",
+    }
+  )
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  const stock_location = stock_locations?.[0]
+
+  if (!stock_location) {
+    throw json({ message: "Not found" }, 404)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <LocationGeneralSection location={stock_location} />
+      <LocationSalesChannelSection location={stock_location} />
+      <JsonViewSection data={stock_location} />
+      <Outlet />
+    </div>
+  )
+}

packages/admin-next/dashboard/src/v2-routes/locations/location-edit/index.ts

@@ -0,0 +1 @@
+export { LocationEdit as Component } from "./location-edit"

packages/admin-next/dashboard/src/v2-routes/locations/location-edit/location-edit.tsx

@@ -0,0 +1,36 @@
+import { EditLocationForm } from "../../../modules/locations/location-edit/components/edit-location-form/edit-location-form"
+import { Heading } from "@medusajs/ui"
+import { RouteDrawer } from "../../../components/route-modal"
+import { useAdminStockLocations } from "medusa-react"
+import { useParams } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+
+export const LocationEdit = () => {
+  const { id } = useParams()
+
+  const { stock_locations, isLoading, isError, error } = useAdminStockLocations(
+    {
+      id,
+      expand: "address",
+    }
+  )
+
+  const { t } = useTranslation()
+
+  if (isError) {
+    throw error
+  }
+
+  const stock_location = stock_locations?.[0]
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading className="capitalize">{t("locations.editLocation")}</Heading>
+      </RouteDrawer.Header>
+      {!isLoading && !!stock_location && (
+        <EditLocationForm location={stock_location} />
+      )}
+    </RouteDrawer>
+  )
+}

packages/admin-next/dashboard/src/v2-routes/locations/location-list/index.ts

@@ -0,0 +1 @@
+export { LocationList as Component } from "./location-list"

packages/admin-next/dashboard/src/v2-routes/locations/location-list/location-list.tsx

@@ -0,0 +1,11 @@
+import { LocationsListTable } from "../../../modules/locations/location-list/components/locations-list-table"
+import { Outlet } from "react-router-dom"
+
+export const LocationList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <LocationsListTable />
+      <Outlet />
+    </div>
+  )
+}