From 7d6a87241d8650ef3f9ee3880dfbbe3e1d4bb835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Wed, 29 May 2024 08:49:30 +0200 Subject: [PATCH] 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 --- .../dashboard/src/hooks/api/shipping-options.ts | 17 ++++++++++++++++- .../dashboard/src/hooks/api/stock-locations.tsx | 2 +- .../admin-next/dashboard/src/lib/addresses.ts | 7 ++++--- .../location-general-section.tsx | 8 +++++++- .../routes/locations/location-details/const.ts | 2 ++ .../routes/locations/location-details/loader.ts | 4 ++-- .../location-details/location-details.tsx | 4 ++-- .../components/location/location.tsx | 10 ++-------- .../edit-shipping-option-form.tsx | 4 ++-- .../edit-shipping-options-pricing-form.tsx | 2 +- 10 files changed, 39 insertions(+), 21 deletions(-) create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-details/const.ts diff --git a/packages/admin-next/dashboard/src/hooks/api/shipping-options.ts b/packages/admin-next/dashboard/src/hooks/api/shipping-options.ts index 99c1706ed2..538fa3b04e 100644 --- a/packages/admin-next/dashboard/src/hooks/api/shipping-options.ts +++ b/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, @@ -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) }, diff --git a/packages/admin-next/dashboard/src/hooks/api/stock-locations.tsx b/packages/admin-next/dashboard/src/hooks/api/stock-locations.tsx index 612fde52e9..828457ea5a 100644 --- a/packages/admin-next/dashboard/src/hooks/api/stock-locations.tsx +++ b/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, }) diff --git a/packages/admin-next/dashboard/src/lib/addresses.ts b/packages/admin-next/dashboard/src/lib/addresses.ts index 3933524f9d..7008c2c480 100644 --- a/packages/admin-next/dashboard/src/lib/addresses.ts +++ b/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
| null + address?: Partial | null }) => { if (!address) { return [] diff --git a/packages/admin-next/dashboard/src/routes/locations/location-details/components/location-general-section/location-general-section.tsx b/packages/admin-next/dashboard/src/routes/locations/location-details/components/location-general-section/location-general-section.tsx index 8913b3c755..59dc7eb360 100644 --- a/packages/admin-next/dashboard/src/routes/locations/location-details/components/location-general-section/location-general-section.tsx +++ b/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 = ({ <>
- {location.name} +
+ {location.name} + + {getFormattedAddress({ address: location.address }).join(", ")} + +
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-details/const.ts b/packages/admin-next/dashboard/src/routes/locations/location-details/const.ts new file mode 100644 index 0000000000..4a22fff87d --- /dev/null +++ b/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" diff --git a/packages/admin-next/dashboard/src/routes/locations/location-details/loader.ts b/packages/admin-next/dashboard/src/routes/locations/location-details/loader.ts index 9ad7de41f3..42be40ff8d 100644 --- a/packages/admin-next/dashboard/src/routes/locations/location-details/loader.ts +++ b/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, }), }) diff --git a/packages/admin-next/dashboard/src/routes/locations/location-details/location-details.tsx b/packages/admin-next/dashboard/src/routes/locations/location-details/location-details.tsx index 3106ae0b73..97bcf0207b 100644 --- a/packages/admin-next/dashboard/src/routes/locations/location-details/location-details.tsx +++ b/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, diff --git a/packages/admin-next/dashboard/src/routes/locations/location-list/components/location/location.tsx b/packages/admin-next/dashboard/src/routes/locations/location-list/components/location/location.tsx index 30e9987d35..676da44a53 100644 --- a/packages/admin-next/dashboard/src/routes/locations/location-list/components/location/location.tsx +++ b/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) {
{location.name} - {location.address?.city},{" "} - { - countries.find( - (c) => - location.address?.country_code.toLowerCase() === c.iso_2 - )?.display_name - } + {getFormattedAddress({ address: location.address }).join(", ")}
diff --git a/packages/admin-next/dashboard/src/routes/locations/shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx b/packages/admin-next/dashboard/src/routes/locations/shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx index 5d8c3f60ce..10f086eca2 100644 --- a/packages/admin-next/dashboard/src/routes/locations/shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx +++ b/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 = ({ {t( - "shipping.shippingOptions.create.enableDescription" + "location.shippingOptions.create.enableDescription" )} diff --git a/packages/admin-next/dashboard/src/routes/locations/shipping-options-edit-pricing/components/create-shipping-options-form/edit-shipping-options-pricing-form.tsx b/packages/admin-next/dashboard/src/routes/locations/shipping-options-edit-pricing/components/create-shipping-options-form/edit-shipping-options-pricing-form.tsx index d640564b51..e19a600df1 100644 --- a/packages/admin-next/dashboard/src/routes/locations/shipping-options-edit-pricing/components/create-shipping-options-form/edit-shipping-options-pricing-form.tsx +++ b/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()