feat(dashboard, js-sdk): shipping option type mngmt dashboard (#13208)

* chore(types, api): support shipping option type api endpoints

* core flows

* api

* typos

* compiler errors

* integration tests

* remove metadata

* changeset

* modify test

* upsert

* change remote query

* minor to patch

* description optional

* chore(dashboard, js-sdk): shipping option type management on admin dashboard

* description optional

* woops my bad

* my bad again

* create and edit

* prettier

* build code from label

* remove metadata route

* remove some translation text that is not used

* remove unsued files

* changeset

* adapt test

* fix test

* suggestion

---------

Co-authored-by: william bouchard <williambouchard@williams-MacBook-Pro.local>

packages/admin/dashboard/src/hooks/api/index.ts

@@ -26,6 +26,7 @@ export * from "./regions"
 export * from "./reservations"
 export * from "./sales-channels"
 export * from "./shipping-options"
+export * from "./shipping-option-types"
 export * from "./shipping-profiles"
 export * from "./stock-locations"
 export * from "./store"

packages/admin/dashboard/src/hooks/api/shipping-option-types.tsx

@@ -0,0 +1,128 @@
+import { FetchError } from "@medusajs/js-sdk"
+import { HttpTypes } from "@medusajs/types"
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+import { queryClient } from "../../lib/query-client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+
+const SHIPPING_OPTION_TYPES_QUERY_KEY = "shipping_option_types" as const
+export const shippingOptionTypesQueryKeys = queryKeysFactory(
+  SHIPPING_OPTION_TYPES_QUERY_KEY
+)
+
+export const useShippingOptionType = (
+  id: string,
+  query?: HttpTypes.SelectParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminShippingOptionTypeResponse,
+      FetchError,
+      HttpTypes.AdminShippingOptionTypeResponse,
+      QueryKey
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.shippingOptionType.retrieve(id, query),
+    queryKey: shippingOptionTypesQueryKeys.detail(id),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useShippingOptionTypes = (
+  query?: HttpTypes.AdminShippingOptionTypeListParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminShippingOptionTypeListResponse,
+      FetchError,
+      HttpTypes.AdminShippingOptionTypeListResponse,
+      QueryKey
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => sdk.admin.shippingOptionType.list(query),
+    queryKey: shippingOptionTypesQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useCreateShippingOptionType = (
+  options?: UseMutationOptions<
+    HttpTypes.AdminShippingOptionTypeResponse,
+    FetchError,
+    HttpTypes.AdminCreateShippingOptionType
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.shippingOptionType.create(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionTypesQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useUpdateShippingOptionType = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminShippingOptionTypeResponse,
+    FetchError,
+    HttpTypes.AdminUpdateShippingOptionType
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => sdk.admin.shippingOptionType.update(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionTypesQueryKeys.detail(id),
+      })
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionTypesQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteShippingOptionType = (
+  id: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminShippingOptionTypeDeleteResponse,
+    FetchError,
+    void
+  >
+) => {
+  return useMutation({
+    mutationFn: () => sdk.admin.shippingOptionType.delete(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionTypesQueryKeys.detail(id),
+      })
+      queryClient.invalidateQueries({
+        queryKey: shippingOptionTypesQueryKeys.lists(),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

packages/admin/dashboard/src/hooks/table/columns/use-shipping-option-type-table-columns.tsx

@@ -0,0 +1,44 @@
+import { HttpTypes } from "@medusajs/types"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import { DateCell } from "../../../components/table/table-cells/common/date-cell"
+import { TextCell } from "../../../components/table/table-cells/common/text-cell"
+
+const columnHelper = createColumnHelper<HttpTypes.AdminShippingOptionType>()
+
+export const useShippingOptionTypeTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("label", {
+        header: () => t("fields.label"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("code", {
+        header: () => t("fields.code"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("description", {
+        header: () => t("fields.description"),
+        cell: ({ getValue }) => <TextCell text={getValue()} />,
+      }),
+      columnHelper.accessor("created_at", {
+        header: () => t("fields.createdAt"),
+
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+      columnHelper.accessor("updated_at", {
+        header: () => t("fields.updatedAt"),
+        cell: ({ getValue }) => {
+          return <DateCell date={getValue()} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

packages/admin/dashboard/src/hooks/table/filters/use-shipping-option-type-table-filters.tsx

@@ -0,0 +1,5 @@
+import { useDateTableFilters } from "./use-date-table-filters"
+
+export const useShippingOptionTypeTableFilters = () => {
+  return useDateTableFilters()
+}

packages/admin/dashboard/src/hooks/table/query/use-shipping-option-type-table-query.tsx

@@ -0,0 +1,32 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../use-query-params"
+
+type UseShippingOptionTypeTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useShippingOptionTypeTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseShippingOptionTypeTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+  const searchParams: HttpTypes.AdminShippingOptionTypeListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}