fix(dashboard): display location details address (#7491)

**What**
- display the address of the location on the details page
- use address formatting utils
- fix caching keys for shipping options

---

CLOSES CORE-2127

packages/admin-next/dashboard/src/hooks/api/shipping-options.ts

@@ -17,6 +17,12 @@ import {
   ShippingOptionRes,
 } from "../../types/api-responses"
 import { stockLocationsQueryKeys } from "./stock-locations"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+
+const SHIPPING_OPTIONS_QUERY_KEY = "shipping_options" as const
+export const shippingOptionsQueryKeys = queryKeysFactory(
+  SHIPPING_OPTIONS_QUERY_KEY
+)
 
 export const useShippingOptions = (
   query?: Record<string, any>,
@@ -27,7 +33,7 @@ export const useShippingOptions = (
 ) => {
   const { data, ...rest } = useQuery({
     queryFn: () => client.shippingOptions.list(query),
-    queryKey: stockLocationsQueryKeys.all,
+    queryKey: shippingOptionsQueryKeys.list(query),
     ...options,
   })
 
@@ -47,6 +53,9 @@ export const useCreateShippingOptions = (
       queryClient.invalidateQueries({
         queryKey: stockLocationsQueryKeys.all,
       })
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionsQueryKeys.all,
+      })
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -67,6 +76,9 @@ export const useUpdateShippingOptions = (
       queryClient.invalidateQueries({
         queryKey: stockLocationsQueryKeys.all,
       })
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionsQueryKeys.all,
+      })
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -83,6 +95,9 @@ export const useDeleteShippingOption = (
       queryClient.invalidateQueries({
         queryKey: stockLocationsQueryKeys.all,
       })
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionsQueryKeys.all,
+      })
 
       options?.onSuccess?.(data, variables, context)
     },

packages/admin-next/dashboard/src/hooks/api/stock-locations.tsx

@@ -40,7 +40,7 @@ export const useStockLocation = (
 ) => {
   const { data, ...rest } = useQuery({
     queryFn: () => client.stockLocations.retrieve(id, query),
-    queryKey: stockLocationsQueryKeys.details(),
+    queryKey: stockLocationsQueryKeys.detail(id, query),
     ...options,
   })
 

packages/admin-next/dashboard/src/lib/addresses.ts

@@ -1,7 +1,8 @@
-import { Address } from "@medusajs/medusa"
+import { AddressDTO } from "@medusajs/types"
+
 import { countries } from "./countries"
 
-export const isSameAddress = (a: Address | null, b: Address | null) => {
+export const isSameAddress = (a: AddressDTO | null, b: AddressDTO | null) => {
   if (!a || !b) {
     return false
   }
@@ -21,7 +22,7 @@ export const isSameAddress = (a: Address | null, b: Address | null) => {
 export const getFormattedAddress = ({
   address,
 }: {
-  address?: Partial<Address> | null
+  address?: Partial<AddressDTO> | null
 }) => {
   if (!address) {
     return []

packages/admin-next/dashboard/src/routes/locations/location-details/components/location-general-section/location-general-section.tsx

@@ -42,6 +42,7 @@ import {
   isOptionEnabledInStore,
   isReturnOption,
 } from "../../../../../lib/shipping-options"
+import { getFormattedAddress } from "../../../../../lib/addresses"
 
 type LocationGeneralSectionProps = {
   location: StockLocationDTO
@@ -54,7 +55,12 @@ export const LocationGeneralSection = ({
     <>
       <Container className="p-0">
         <div className="flex items-center justify-between px-6 py-4">
-          <Heading>{location.name}</Heading>
+          <div>
+            <Heading>{location.name}</Heading>
+            <Text className="text-ui-fg-subtle txt-small">
+              {getFormattedAddress({ address: location.address }).join(", ")}
+            </Text>
+          </div>
           <Actions location={location} />
         </div>
       </Container>

packages/admin-next/dashboard/src/routes/locations/location-details/const.ts

@@ -0,0 +1,2 @@
+export const detailsFields =
+  "name,*sales_channels,*address,fulfillment_sets.type,fulfillment_sets.name,*fulfillment_sets.service_zones.geo_zones,*fulfillment_sets.service_zones,*fulfillment_sets.service_zones.shipping_options,*fulfillment_sets.service_zones.shipping_options.rules,*fulfillment_sets.service_zones.shipping_options.shipping_profile"

packages/admin-next/dashboard/src/routes/locations/location-details/loader.ts

@@ -4,13 +4,13 @@ import { LoaderFunctionArgs } from "react-router-dom"
 import { stockLocationsQueryKeys } from "../../../hooks/api/stock-locations"
 import { client } from "../../../lib/client"
 import { queryClient } from "../../../lib/query-client"
+import { detailsFields } from "./const"
 
 const locationQuery = (id: string) => ({
   queryKey: stockLocationsQueryKeys.detail(id),
   queryFn: async () =>
     client.stockLocations.retrieve(id, {
-      fields:
-        "name,*sales_channels,address.city,address.country_code,fulfillment_sets.type,fulfillment_sets.name,*fulfillment_sets.service_zones.geo_zones,*fulfillment_sets.service_zones,*fulfillment_sets.service_zones.shipping_options,*fulfillment_sets.service_zones.shipping_options.rules,*fulfillment_sets.service_zones.shipping_options.shipping_profile",
+      fields: detailsFields,
     }),
 })
 

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

@@ -10,6 +10,7 @@ import after from "virtual:medusa/widgets/location/details/after"
 import before from "virtual:medusa/widgets/location/details/before"
 import sideAfter from "virtual:medusa/widgets/location/details/side/after"
 import sideBefore from "virtual:medusa/widgets/location/details/side/before"
+import { detailsFields } from "./const"
 
 export const LocationDetails = () => {
   const initialData = useLoaderData() as Awaited<
@@ -25,8 +26,7 @@ export const LocationDetails = () => {
   } = useStockLocation(
     location_id!,
     {
-      fields:
-        "name,*sales_channels,address.city,address.country_code,fulfillment_sets.type,fulfillment_sets.name,*fulfillment_sets.service_zones.geo_zones,*fulfillment_sets.service_zones,*fulfillment_sets.service_zones.shipping_options,*fulfillment_sets.service_zones.shipping_options.rules,*fulfillment_sets.service_zones.shipping_options.shipping_profile",
+      fields: detailsFields,
     },
     {
       initialData,

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

@@ -18,7 +18,7 @@ import { useNavigate } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { BadgeListSummary } from "../../../../../components/common/badge-list-summary"
 import { useDeleteStockLocation } from "../../../../../hooks/api/stock-locations"
-import { countries } from "../../../../../lib/countries"
+import { getFormattedAddress } from "../../../../../lib/addresses"
 
 type SalesChannelsProps = {
   salesChannels?: SalesChannelDTO[]
@@ -150,13 +150,7 @@ function Location(props: LocationProps) {
           <div className="grow-1 flex flex-1 flex-col">
             <Text weight="plus">{location.name}</Text>
             <Text className="text-ui-fg-subtle txt-small">
-              {location.address?.city},{" "}
-              {
-                countries.find(
-                  (c) =>
-                    location.address?.country_code.toLowerCase() === c.iso_2
-                )?.display_name
-              }
+              {getFormattedAddress({ address: location.address }).join(", ")}
             </Text>
           </div>
 

packages/admin-next/dashboard/src/routes/locations/shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx

@@ -70,7 +70,7 @@ export const EditShippingOptionForm = ({
 
     const storeRule = rules.find((r) => r.attribute === "enabled_in_store")
     if (!storeRule) {
-      // NOTE: should always exist sice we always create this rule when we create a shipping option
+      // NOTE: should always exist since we always create this rule when we create a shipping option
       rules.push({
         value: values.enabled_in_store ? "true" : "false",
         attribute: "enabled_in_store",
@@ -248,7 +248,7 @@ export const EditShippingOptionForm = ({
                         </div>
                         <Form.Hint className="!mt-1">
                           {t(
-                            "shipping.shippingOptions.create.enableDescription"
+                            "location.shippingOptions.create.enableDescription"
                           )}
                         </Form.Hint>
                         <Form.ErrorMessage />

packages/admin-next/dashboard/src/routes/locations/shipping-options-edit-pricing/components/create-shipping-options-form/edit-shipping-options-pricing-form.tsx

@@ -204,7 +204,7 @@ export function EditShippingOptionsPricingForm({
       await mutateAsync({
         prices: [...currencyPrices, ...regionPrices],
       })
-      toast.error(t("general.success"), {
+      toast.success(t("general.success"), {
         dismissLabel: t("general.close"),
       })
       handleSuccess()