feat(medusa,dashboard,tax): added tax rates and regions UI (#7026)

whats missing: - make rules required for overrides - conditions for other rules - populating condition reference ids with labels on update Co-authored-by: Adrien de Peretti <25098370+adrien2p@users.noreply.github.com>
2024-04-16 08:26:12 +00:00
parent 92b633d1cb
commit 00e6b21bb5
77 changed files with 3654 additions and 104 deletions
@@ -0,0 +1,119 @@
+import {
+  AdminPostTaxRatesReq,
+  AdminPostTaxRatesTaxRateReq,
+} from "@medusajs/medusa"
+import { AdminTaxRateListResponse, AdminTaxRateResponse } from "@medusajs/types"
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
+import { client } from "../../lib/client"
+import { queryClient } from "../../lib/medusa"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { TaxRateDeleteRes } from "../../types/api-responses"
+
+const TAX_RATES_QUERY_KEY = "tax_rates" as const
+export const taxRatesQueryKeys = queryKeysFactory(TAX_RATES_QUERY_KEY)
+
+export const useTaxRate = (
+  id: string,
+  query?: Record<string, any>,
+  options?: Omit<
+    UseQueryOptions<
+      AdminTaxRateResponse,
+      Error,
+      AdminTaxRateResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: taxRatesQueryKeys.detail(id),
+    queryFn: async () => client.taxes.retrieveTaxRate(id, query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useTaxRates = (
+  query?: Record<string, any>,
+  options?: Omit<
+    UseQueryOptions<
+      AdminTaxRateListResponse,
+      Error,
+      AdminTaxRateListResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => client.taxes.listTaxRates(query),
+    queryKey: taxRatesQueryKeys.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useUpdateTaxRate = (
+  id: string,
+  options?: UseMutationOptions<
+    AdminTaxRateResponse,
+    Error,
+    AdminPostTaxRatesTaxRateReq
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => client.taxes.updateTaxRate(id, payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: taxRatesQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: taxRatesQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useCreateTaxRate = (
+  options?: UseMutationOptions<
+    AdminTaxRateResponse,
+    Error,
+    AdminPostTaxRatesReq
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => client.taxes.createTaxRate(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: taxRatesQueryKeys.lists() })
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteTaxRate = (
+  id: string,
+  options?: UseMutationOptions<TaxRateDeleteRes, Error, void>
+) => {
+  return useMutation({
+    mutationFn: () => client.taxes.deleteTaxRate(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: taxRatesQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: taxRatesQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
@@ -1,13 +1,22 @@
-import { QueryKey, UseQueryOptions, useQuery } from "@tanstack/react-query"
-import { client } from "../../lib/client"
-import { queryKeysFactory } from "../../lib/query-key-factory"
+import { AdminCreateTaxRegion } from "@medusajs/medusa"
 import {
-  AdminTaxRegionResponse,
  AdminTaxRegionListResponse,
+  AdminTaxRegionResponse,
 } from "@medusajs/types"
+import {
+  QueryKey,
+  UseMutationOptions,
+  UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query"
+import { client } from "../../lib/client"
+import { queryClient } from "../../lib/medusa"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { TaxRegionDeleteRes } from "../../types/api-responses"

 const TAX_REGIONS_QUERY_KEY = "tax_regions" as const
-const taxRegionsQueryKeys = queryKeysFactory(TAX_REGIONS_QUERY_KEY)
+export const taxRegionsQueryKeys = queryKeysFactory(TAX_REGIONS_QUERY_KEY)

 export const useTaxRegion = (
  id: string,
@@ -51,3 +60,38 @@ export const useTaxRegions = (

  return { ...data, ...rest }
 }
+
+export const useCreateTaxRegion = (
+  options?: UseMutationOptions<
+    AdminTaxRegionResponse,
+    Error,
+    AdminCreateTaxRegion
+  >
+) => {
+  return useMutation({
+    mutationFn: (payload) => client.taxes.createTaxRegion(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: taxRegionsQueryKeys.all })
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useDeleteTaxRegion = (
+  id: string,
+  options?: UseMutationOptions<TaxRegionDeleteRes, Error, void>
+) => {
+  return useMutation({
+    mutationFn: () => client.taxes.deleteTaxRegion(id),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: taxRegionsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: taxRegionsQueryKeys.detail(id),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
@@ -0,0 +1,55 @@
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+import { TaxRateResponse } from "@medusajs/types"
+import {
+  TextCell,
+  TextHeader,
+} from "../../../components/table/table-cells/common/text-cell"
+
+import {
+  TypeCell,
+  TypeHeader,
+} from "../../../components/table/table-cells/taxes/type-cell"
+
+const columnHelper = createColumnHelper<TaxRateResponse>()
+
+export const useTaxRateTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "name",
+        header: () => <TextHeader text={t("fields.name")} />,
+        cell: ({ row }) => <TextCell text={row.original.name} />,
+      }),
+      columnHelper.display({
+        id: "province",
+        header: () => <TextHeader text={t("fields.province")} />,
+        cell: ({ row }) => (
+          <TextCell text={row.original.tax_region.province_code} />
+        ),
+      }),
+      columnHelper.display({
+        id: "rate",
+        header: () => <TextHeader text={t("fields.rate")} />,
+        cell: ({ row }) => <TextCell text={`${row.original.rate} %`} />,
+      }),
+      columnHelper.display({
+        id: "is_combinable",
+        header: () => <TypeHeader text={t("fields.type")} />,
+        cell: ({ row }) => (
+          <TypeCell is_combinable={row.original.is_combinable} />
+        ),
+      }),
+      columnHelper.display({
+        id: "code",
+        header: () => <TextHeader text={t("fields.code")} />,
+        cell: ({ row }) => <TextCell text={row.original.code || "-"} />,
+      }),
+    ],
+    []
+  )
+}
@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useTaxRateTableFilters = () => {
+  const { t } = useTranslation()
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  const filters = [...dateFilters]
+
+  return filters
+}
@@ -0,0 +1,33 @@
+import { AdminGetTaxRatesParams } from "@medusajs/medusa"
+import { useQueryParams } from "../../use-query-params"
+
+type UseTaxRateTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useTaxRateTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseTaxRateTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+
+  const searchParams: AdminGetTaxRatesParams = {
+    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,
+  }
+}