feat(dashboard): shipping & location (#7151)

packages/admin-next/dashboard/public/locales/en-US/translation.json

@@ -69,7 +69,10 @@
     "remove": "Remove",
     "revoke": "Revoke",
     "cancel": "Cancel",
+    "enable": "Enable",
+    "disable": "Disable",
     "complete": "Complete",
+    "viewDetails": "View details",
     "back": "Back",
     "close": "Close",
     "continue": "Continue",
@@ -154,6 +157,9 @@
       "required": "New owner is required."
     }
   },
+  "sales_channels": {
+    "availableIn": "Available in <0>{{x}}</0> of <1>{{y}}</1> sales channels"
+  },
   "products": {
     "domain": "Products",
     "createProductTitle": "Create Product",
@@ -184,7 +190,6 @@
       "noMediaLabel": "The product has no associated media."
     },
     "discountableHint": "When unchecked discounts will not be applied to this product.",
-    "availableInSalesChannels": "Available in <0>{{x}}</0> of <1>{{y}}</1> sales channels",
     "noSalesChannels": "Not available in any sales channels",
     "variantCount_one": "{{count}} variant",
     "variantCount_other": "{{count}} variants",
@@ -623,15 +628,23 @@
     }
   },
   "shipping": {
-    "title": "Shipping & Delivery",
-    "domain": "Shipping & Delivery",
+    "title": "Location & Shipping",
+    "domain": "Location & Shipping",
     "description": "Choose where you ship and how much you charge for shipping at checkout. Define shipping options specific for your locations.",
+    "createLocation": "Create location",
+    "createLocationDetailsHint": "Specify the details of the location.",
+    "deleteLocation": "Delete location",
     "from": "Shipping from",
     "add": "Add shipping",
     "connectProvider": "Connect provider",
     "addZone": "Add shipping zone",
     "enablePickup": "Enable pickup",
     "enableDelivery": "Enable delivery",
+    "deleteLocation": {
+      "label": "Delete Location",
+      "confirm": "Are you sure you want to delete {{name}} location",
+      "success": "{{name}} location successfully deleted"
+    },
     "noRecords": {
       "action": "Add Location",
       "title": "No inventory locations",
@@ -645,18 +658,25 @@
     },
     "fulfillmentSet": {
       "placeholder": "Not covered by any shipping zones.",
+      "salesChannels": "Connected Sales Channels",
       "delete": "Delete shipping",
+      "disableWarning": "Are you sure that you wnat to disable \"{{name}}\"? This will delete all assocciated service zones and shipping options.",
       "create": {
         "title": "Add service zone for {{fulfillmentSet}}"
       },
+      "toast": {
+        "disable": "\"{{name}}\" disabled"
+      },
       "addZone": "Add service zone",
       "pickup": {
-        "title": "Pickup in",
-        "enable": "Enable pickup"
+        "title": "Pick up",
+        "enable": "Enable pickup",
+        "offers": "Offers pick up in"
       },
       "delivery": {
-        "title": "Shipping to",
-        "enable": "Enable delivery"
+        "title": "Shipping",
+        "enable": "Enable delivery",
+        "offers": "Offers shippping to"
       }
     },
     "serviceZone": {
@@ -666,12 +686,21 @@
         "description": "A service zone is a geographical region that can be shipped to from a specific location. You can later on  add any number of shipping options to this zone. ",
         "zoneName": "Zone name"
       },
+      "edit":{
+        "title": "Edit Service Zone"
+      },
+      "deleteWarning": "Are you sure you want to delete \"{{name}}\". This will also delete all assocciated shipping options.",
+      "toast": {
+        "delete": "Zone \"{{name}}\" deleted successfully."
+      },
       "editPrices": "Edit prices",
       "editOption": "Edit option",
       "optionsLength_one": "shipping option",
       "optionsLength_other": "shipping options",
+      "returnOptionsLength_one": "return option",
+      "returnOptionsLength_other": "return options",
       "shippingOptionsPlaceholder": "Not covered by any shipping options.",
-      "addShippingOptions": "Add shipping options",
+      "addOption": "Add option",
       "shippingOptions": "Shipping options",
       "returnOptions": "Return options",
       "areas": {
@@ -683,7 +712,7 @@
     },
     "shippingOptions": {
       "create": {
-        "title": "Create shipping options for {{zone}}",
+        "title": "Create a shipping option for {{zone}}",
         "subtitle": "General information",
         "description": "To start selling, all you need is a name and a price",
         "details": "Details",
@@ -696,7 +725,26 @@
         "calculated": "Calculated",
         "calculatedDescription": "Shipping option's price is calculated by the fulfillment provider.",
         "profile": "Shipping profile"
+      },
+      "deleteWarning": "Are you sure you want to delete \"{{name}}\"?",
+      "toast": {
+        "delete": "Shipping option \"{{name}}\" deleted successfully."
+      },
+      "inStore": "Store",
+      "edit": {
+        "title": "Edit Shipping Option",
+        "provider": "Fulfillment provider"
+      }
+    },
+    "returnOptions" : {
+      "create": {
+        "title": "Create a return option for {{zone}}"
       }
+    },
+    "salesChannels": {
+      "title": "Connected Sales Channels",
+      "placeholder": "No connected channels yet.",
+      "connectChannels": "Connect Channels"
     }
   },
   "shippingProfile": {
@@ -1195,10 +1243,8 @@
   },
   "locations": {
     "domain": "Locations",
-    "createLocation": "Create location",
     "editLocation": "Edit location",
     "addSalesChannels": "Add sales channels",
-    "detailsHint": "Specify the details of the location.",
     "noLocationsFound": "No locations found",
     "selectLocations": "Select locations that stock the item.",
     "deleteLocationWarning": "You are about to delete the location {{name}}. This action cannot be undone.",
@@ -1388,6 +1434,7 @@
     "scheduled": "Scheduled",
     "expired": "Expired",
     "active": "Active",
+    "enabled": "Enabled",
     "disabled": "Disabled"
   },
   "fields": {

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

@@ -144,11 +144,6 @@ const useCoreRoutes = (): Omit<NavItemProps, "pathname">[] => {
       label: t("pricing.domain"),
       to: "/pricing",
     },
-    {
-      icon: <Envelope />,
-      label: t("shipping.domain"),
-      to: "/shipping",
-    },
   ]
 }
 

packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx

@@ -58,7 +58,8 @@ export const NavItem = ({
           "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:py-1.5",
           {
             "bg-ui-bg-base hover:bg-ui-bg-base-hover shadow-elevation-card-rest":
-              location.pathname.startsWith(to),
+              location.pathname === to ||
+              location.pathname.startsWith(to + "/"), // TODO: utilise `NavLink` and `end` prop instead of this manual check
             "max-md:hidden": items && items.length > 0,
           }
         )}

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

@@ -57,6 +57,10 @@ const useSettingRoutes = (): NavItemProps[] => {
         label: t("shippingProfile.domain"),
         to: "/settings/shipping-profiles",
       },
+      {
+        label: t("shipping.domain"),
+        to: "/settings/shipping",
+      },
     ],
     [t]
   )

packages/admin-next/dashboard/src/hooks/api/fulfillment-providers.tsx

@@ -0,0 +1,24 @@
+import { QueryKey, useQuery, UseQueryOptions } from "@tanstack/react-query"
+import { client } from "../../lib/client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+
+const FULFILLMENT_PROVIDERS_QUERY_KEY = "f_providers" as const
+export const fulfillmentProvidersQueryKeys = queryKeysFactory(
+  FULFILLMENT_PROVIDERS_QUERY_KEY
+)
+
+export const useFulfillmentProviders = (
+  query?: Record<string, any>,
+  options?: Omit<
+    UseQueryOptions<any, Error, any, QueryKey>,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => client.fulfillmentProviders.list(query),
+    queryKey: fulfillmentProvidersQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}

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

@@ -1,14 +1,39 @@
-import { useMutation, UseMutationOptions } from "@tanstack/react-query"
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
 
 import {
   ShippingOptionDeleteRes,
   ShippingOptionRes,
 } from "../../types/api-responses"
-import { CreateShippingOptionReq } from "../../types/api-payloads"
+import {
+  CreateShippingOptionReq,
+  UpdateShippingOptionReq,
+} from "../../types/api-payloads"
 import { stockLocationsQueryKeys } from "./stock-locations"
 import { queryClient } from "../../lib/medusa"
 import { client } from "../../lib/client"
 
+export const useShippingOptions = (
+  query?: Record<string, any>,
+  options?: Omit<
+    UseQueryOptions<any, Error, any, QueryKey>,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => client.shippingOptions.list(query),
+    queryKey: stockLocationsQueryKeys.all,
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
 export const useCreateShippingOptions = (
   options?: UseMutationOptions<
     ShippingOptionRes,
@@ -20,9 +45,28 @@ export const useCreateShippingOptions = (
     mutationFn: (payload) => client.shippingOptions.create(payload),
     onSuccess: (data, variables, context) => {
       queryClient.invalidateQueries({
-        queryKey: stockLocationsQueryKeys.lists(),
+        queryKey: stockLocationsQueryKeys.all,
       })
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
 
+export const useUpdateShippingOptions = (
+  id: string,
+  options?: UseMutationOptions<
+    ShippingOptionRes,
+    Error,
+    UpdateShippingOptionReq
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => client.shippingOptions.update(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: stockLocationsQueryKeys.all,
+      })
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -37,7 +81,7 @@ export const useDeleteShippingOption = (
     mutationFn: () => client.shippingOptions.delete(optionId),
     onSuccess: (data: any, variables: any, context: any) => {
       queryClient.invalidateQueries({
-        queryKey: stockLocationsQueryKeys.lists(),
+        queryKey: stockLocationsQueryKeys.all,
       })
 
       options?.onSuccess?.(data, variables, context)