@acmekit/dashboard 2.13.1

package/src/routes/tax-regions/common/components/tax-region-card/tax-region-card.tsx

@@ -0,0 +1,218 @@
+import { HttpTypes } from "@acmekit/types"
+import { Heading, Text, Tooltip, clx } from "@acmekit/ui"
+import ReactCountryFlag from "react-country-flag"
+
+import {
+  ExclamationCircle,
+  MapPin,
+  Plus,
+  Trash,
+  PencilSquare,
+} from "@acmekit/icons"
+import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import {
+  Action,
+  ActionMenu,
+} from "../../../../../components/common/action-menu"
+import { IconAvatar } from "../../../../../components/common/icon-avatar"
+import { getCountryByIso2 } from "../../../../../lib/data/countries"
+import {
+  getProvinceByIso2,
+  isProvinceInCountry,
+} from "../../../../../lib/data/country-states"
+import { useDeleteTaxRegionAction } from "../../hooks"
+
+interface TaxRegionCardProps extends ComponentPropsWithoutRef<"div"> {
+  taxRegion: HttpTypes.AdminTaxRegion
+  type?: "header" | "list"
+  variant?: "country" | "province"
+  asLink?: boolean
+  badge?: ReactNode
+}
+
+export const TaxRegionCard = ({
+  taxRegion,
+  type = "list",
+  variant = "country",
+  asLink = true,
+  badge,
+}: TaxRegionCardProps) => {
+  const { t } = useTranslation()
+  const { id, country_code, province_code } = taxRegion
+
+  const country = getCountryByIso2(country_code)
+  const province = getProvinceByIso2(province_code)
+
+  let name = "N/A"
+  let misconfiguredSublevelTooltip: string | null = null
+
+  if (province || province_code) {
+    name = province ? province : province_code!.toUpperCase()
+  } else if (country || country_code) {
+    name = country ? country.display_name : country_code!.toUpperCase()
+  }
+
+  if (
+    country_code &&
+    province_code &&
+    !isProvinceInCountry(country_code, province_code)
+  ) {
+    name = province_code.toUpperCase()
+    misconfiguredSublevelTooltip = t(
+      "taxRegions.fields.sublevels.tooltips.notPartOfCountry",
+      {
+        country: country?.display_name,
+        province: province_code.toUpperCase(),
+      }
+    )
+  }
+
+  const showCreateDefaultTaxRate =
+    !taxRegion.tax_rates.filter((tr) => tr.is_default).length &&
+    type === "header"
+
+  const Component = (
+    <div
+      className={clx(
+        "group-data-[link=true]:hover:bg-ui-bg-base-hover transition-fg flex flex-col justify-between gap-y-4 px-6 md:flex-row md:items-center md:gap-y-0",
+        {
+          "py-4": type === "header",
+          "py-3": type === "list",
+        }
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-x-4">
+          <IconAvatar size={type === "list" ? "small" : "large"}>
+            {country_code && !province_code ? (
+              <div
+                className={clx(
+                  "flex size-fit items-center justify-center overflow-hidden rounded-[1px]",
+                  {
+                    "rounded-sm": type === "header",
+                  }
+                )}
+              >
+                <ReactCountryFlag
+                  countryCode={country_code}
+                  svg
+                  style={
+                    type === "list"
+                      ? { width: "12px", height: "9px" }
+                      : { width: "16px", height: "12px" }
+                  }
+                  aria-label={country?.display_name}
+                />
+              </div>
+            ) : (
+              <MapPin className="text-ui-fg-subtle" />
+            )}
+          </IconAvatar>
+          <div>
+            {type === "list" ? (
+              <Text size="small" weight="plus" leading="compact">
+                {name}
+              </Text>
+            ) : (
+              <div className="flex items-center gap-x-2">
+                <Heading>{name}</Heading>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex size-fit items-center gap-x-2 md:hidden">
+          {misconfiguredSublevelTooltip && (
+            <Tooltip content={misconfiguredSublevelTooltip}>
+              <ExclamationCircle className="text-ui-tag-orange-icon" />
+            </Tooltip>
+          )}
+          {badge}
+          <TaxRegionCardActions
+            taxRegion={taxRegion}
+            showCreateDefaultTaxRate={showCreateDefaultTaxRate}
+          />
+        </div>
+      </div>
+
+      <div className="hidden size-fit items-center gap-x-2 md:flex">
+        {misconfiguredSublevelTooltip && (
+          <Tooltip content={misconfiguredSublevelTooltip}>
+            <ExclamationCircle className="text-ui-tag-orange-icon" />
+          </Tooltip>
+        )}
+        {badge}
+        <TaxRegionCardActions
+          taxRegion={taxRegion}
+          showCreateDefaultTaxRate={showCreateDefaultTaxRate}
+        />
+      </div>
+    </div>
+  )
+
+  if (asLink) {
+    return (
+      <Link
+        to={variant === "country" ? `${id}` : `provinces/${id}`}
+        data-link="true"
+        className="group block"
+      >
+        {Component}
+      </Link>
+    )
+  }
+
+  return Component
+}
+
+const TaxRegionCardActions = ({
+  taxRegion,
+  showCreateDefaultTaxRate,
+}: {
+  taxRegion: HttpTypes.AdminTaxRegion
+  showCreateDefaultTaxRate?: boolean
+}) => {
+  const { t } = useTranslation()
+
+  const hasParent = !!taxRegion.parent_id
+
+  const to = hasParent
+    ? `/settings/tax-regions/${taxRegion.parent_id}`
+    : undefined
+  const handleDelete = useDeleteTaxRegionAction({ taxRegion, to })
+
+  return (
+    <ActionMenu
+      groups={[
+        ...(showCreateDefaultTaxRate
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <Plus />,
+                    label: t("taxRegions.fields.defaultTaxRate.action"),
+                    to: `tax-rates/create`,
+                  },
+                ],
+              },
+            ]
+          : []),
+        {
+          actions: [
+            !hasParent && {
+              icon: <PencilSquare />,
+              label: t("actions.edit"),
+              to: `/settings/tax-regions/${taxRegion.id}/edit`,
+            },
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: handleDelete,
+            },
+          ].filter(Boolean) as unknown as Action[],
+        },
+      ]}
+    />
+  )
+}

package/src/routes/tax-regions/common/components/tax-region-table/index.ts

@@ -0,0 +1 @@
+export * from "./tax-region-table"

package/src/routes/tax-regions/common/components/tax-region-table/tax-region-table.tsx

@@ -0,0 +1,122 @@
+import { HttpTypes } from "@acmekit/types"
+import { Button } from "@acmekit/ui"
+import { Table } from "@tanstack/react-table"
+import { ReactNode } from "react"
+import { Link } from "react-router-dom"
+import {
+  NoRecords,
+  NoResults,
+} from "../../../../../components/common/empty-table-content"
+import { TableFooterSkeleton } from "../../../../../components/common/skeleton"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { DataTableOrderBy } from "../../../../../components/table/data-table/data-table-order-by"
+import { TaxRegionCard } from "../tax-region-card"
+
+type TaxRegionTableProps = {
+  variant?: "country" | "province"
+  isPending: boolean
+  queryObject: Record<string, any>
+  count?: number
+  table: Table<HttpTypes.AdminTaxRegion>
+  action: { label: string; to: string }
+  prefix?: string
+  children?: ReactNode
+}
+
+export const TaxRegionTable = ({
+  variant = "country",
+  isPending,
+  action,
+  count = 0,
+  table,
+  queryObject,
+  prefix,
+  children,
+}: TaxRegionTableProps) => {
+  if (isPending) {
+    return (
+      <div className="flex flex-col divide-y">
+        {Array.from({ length: 3 }).map((_, index) => {
+          return (
+            <div
+              key={index}
+              className="bg-ui-bg-field-component h-[52px] w-full animate-pulse"
+            />
+          )
+        })}
+        <TableFooterSkeleton layout="fit" />
+      </div>
+    )
+  }
+
+  const noQuery =
+    Object.values(queryObject).filter((v) => Boolean(v)).length === 0
+  const noResults = !isPending && count === 0 && !noQuery
+  const noRecords = !isPending && count === 0 && noQuery
+
+  const { pageIndex, pageSize } = table.getState().pagination
+
+  return (
+    <div className="flex flex-col divide-y">
+      <div className="flex flex-col justify-between gap-x-4 gap-y-3 px-6 py-4 md:flex-row md:items-center">
+        <div>{children}</div>
+        <div className="flex items-center gap-x-2">
+          {!noRecords && (
+            <div className="flex w-full items-center gap-x-2 md:w-fit">
+              {/* Re-enable when we allow searching tax regions by country name rather than country_code */}
+              {/* <div className="w-full md:w-fit">
+                <DataTableSearch prefix={prefix} />
+              </div> */}
+              <DataTableOrderBy
+                keys={["updated_at", "created_at"]}
+                prefix={prefix}
+              />
+            </div>
+          )}
+          <Link to={action.to}>
+            <Button size="small" variant="secondary">
+              {action.label}
+            </Button>
+          </Link>
+        </div>
+      </div>
+      {noResults && <NoResults />}
+      {noRecords && <NoRecords />}
+      {!noRecords && !noResults
+        ? !isPending
+          ? table.getRowModel().rows.map((row) => {
+              return (
+                <TaxRegionCard
+                  variant={variant}
+                  key={row.id}
+                  taxRegion={row.original}
+                  role="row"
+                  aria-rowindex={row.index}
+                />
+              )
+            })
+          : Array.from({ length: 3 }).map((_, index) => {
+              return (
+                <div
+                  key={index}
+                  className="bg-ui-bg-field-component h-[60px] w-full animate-pulse"
+                />
+              )
+            })
+        : null}
+      {!noRecords && (
+        <LocalizedTablePagination
+          prefix={prefix}
+          canNextPage={table.getCanNextPage()}
+          canPreviousPage={table.getCanPreviousPage()}
+          count={count}
+          nextPage={table.nextPage}
+          previousPage={table.previousPage}
+          pageCount={table.getPageCount()}
+          pageIndex={pageIndex}
+          pageSize={pageSize}
+        />
+      )}
+    </div>
+  )
+}

package/src/routes/tax-regions/common/constants.ts

@@ -0,0 +1,8 @@
+export enum TaxRateRuleReferenceType {
+  PRODUCT = "product",
+  PRODUCT_TYPE = "product_type",
+  SHIPPING_OPTION = "shipping_option",
+  // PRODUCT_COLLECTION = "product_collection",
+  // PRODUCT_TAG = "product_tag",
+  // CUSTOMER_GROUP = "customer_group",
+}

package/src/routes/tax-regions/common/hooks/use-tax-override-table.tsx

@@ -0,0 +1,92 @@
+import { HttpTypes } from "@acmekit/types"
+import {
+  OnChangeFn,
+  PaginationState,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "react-router-dom"
+
+type UseTaxRegionTableProps = {
+  data?: HttpTypes.AdminTaxRate[]
+  count?: number
+  pageSize?: number
+  prefix?: string
+}
+
+export const useTaxOverrideTable = ({
+  data = [],
+  count = 0,
+  pageSize: _pageSize = 10,
+  prefix,
+}: UseTaxRegionTableProps) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const offsetKey = `${prefix ? `${prefix}_` : ""}offset`
+  const offset = searchParams.get(offsetKey)
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: offset ? Math.ceil(Number(offset) / _pageSize) : 0,
+    pageSize: _pageSize,
+  })
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  useEffect(() => {
+    const index = offset ? Math.ceil(Number(offset) / _pageSize) : 0
+
+    if (index === pageIndex) {
+      return
+    }
+
+    setPagination((prev) => ({
+      ...prev,
+      pageIndex: index,
+    }))
+  }, [offset, _pageSize, pageIndex])
+
+  const onPaginationChange = (
+    updater: (old: PaginationState) => PaginationState
+  ) => {
+    const state = updater(pagination)
+    const { pageIndex, pageSize } = state
+
+    setSearchParams((prev) => {
+      if (!pageIndex) {
+        prev.delete(offsetKey)
+        return prev
+      }
+
+      const newSearch = new URLSearchParams(prev)
+      newSearch.set(offsetKey, String(pageIndex * pageSize))
+
+      return newSearch
+    })
+
+    setPagination(state)
+    return state
+  }
+
+  const table = useReactTable({
+    data,
+    columns: [], // We don't actually want to render any columns
+    pageCount: Math.ceil(count / pageSize),
+    state: {
+      pagination,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: onPaginationChange as OnChangeFn<PaginationState>,
+    getPaginationRowModel: getPaginationRowModel(),
+    manualPagination: true,
+  })
+
+  return {
+    table,
+  }
+}

package/src/routes/tax-regions/common/hooks/use-tax-region-table.tsx

@@ -0,0 +1,92 @@
+import { HttpTypes } from "@acmekit/types"
+import {
+  OnChangeFn,
+  PaginationState,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "react-router-dom"
+
+type UseTaxRegionTableProps = {
+  data?: HttpTypes.AdminTaxRegion[]
+  count?: number
+  pageSize?: number
+  prefix?: string
+}
+
+export const useTaxRegionTable = ({
+  data = [],
+  count = 0,
+  pageSize: _pageSize = 10,
+  prefix,
+}: UseTaxRegionTableProps) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const offsetKey = `${prefix ? `${prefix}_` : ""}offset`
+  const offset = searchParams.get(offsetKey)
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: offset ? Math.ceil(Number(offset) / _pageSize) : 0,
+    pageSize: _pageSize,
+  })
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  useEffect(() => {
+    const index = offset ? Math.ceil(Number(offset) / _pageSize) : 0
+
+    if (index === pageIndex) {
+      return
+    }
+
+    setPagination((prev) => ({
+      ...prev,
+      pageIndex: index,
+    }))
+  }, [offset, _pageSize, pageIndex])
+
+  const onPaginationChange = (
+    updater: (old: PaginationState) => PaginationState
+  ) => {
+    const state = updater(pagination)
+    const { pageIndex, pageSize } = state
+
+    setSearchParams((prev) => {
+      if (!pageIndex) {
+        prev.delete(offsetKey)
+        return prev
+      }
+
+      const newSearch = new URLSearchParams(prev)
+      newSearch.set(offsetKey, String(pageIndex * pageSize))
+
+      return newSearch
+    })
+
+    setPagination(state)
+    return state
+  }
+
+  const table = useReactTable({
+    data,
+    columns: [], // We don't actually want to render any columns
+    pageCount: Math.ceil(count / pageSize),
+    state: {
+      pagination,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: onPaginationChange as OnChangeFn<PaginationState>,
+    getPaginationRowModel: getPaginationRowModel(),
+    manualPagination: true,
+  })
+
+  return {
+    table,
+  }
+}

package/src/routes/tax-regions/common/hooks.ts

@@ -0,0 +1,79 @@
+import { HttpTypes } from "@acmekit/types"
+import { toast, usePrompt } from "@acmekit/ui"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { useDeleteTaxRate } from "../../../hooks/api/tax-rates"
+import { useDeleteTaxRegion } from "../../../hooks/api/tax-regions"
+
+export const useDeleteTaxRegionAction = ({
+  taxRegion,
+  to = "/settings/tax-regions",
+}: {
+  taxRegion: HttpTypes.AdminTaxRegion
+  to?: string
+}) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useDeleteTaxRegion(taxRegion.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("taxRegions.delete.confirmation"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        toast.success(t("taxRegions.delete.successToast"))
+
+        navigate(to, { replace: true })
+      },
+      onError: (e) => {
+        toast.error(e.message)
+      },
+    })
+  }
+
+  return handleDelete
+}
+
+export const useDeleteTaxRateAction = (taxRate: HttpTypes.AdminTaxRate) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useDeleteTaxRate(taxRate.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("taxRegions.taxRates.delete.confirmation", {
+        name: taxRate.name,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        toast.success(t("taxRegions.taxRates.delete.successToast"))
+      },
+      onError: (e) => {
+        toast.error(e.message)
+      },
+    })
+  }
+
+  return handleDelete
+}

package/src/routes/tax-regions/common/schemas.ts

@@ -0,0 +1,16 @@
+import { z } from "zod"
+import { TaxRateRuleReferenceType } from "./constants"
+
+export const TaxRateRuleReferenceSchema = z.object({
+  value: z.string(),
+  label: z.string(),
+})
+
+export type TaxRateRuleReference = z.infer<typeof TaxRateRuleReferenceSchema>
+
+export const TaxRateRuleTargetSchema = z.object({
+  reference_type: z.nativeEnum(TaxRateRuleReferenceType),
+  references: z.array(TaxRateRuleReferenceSchema),
+})
+
+export type TaxRateRuleTarget = z.infer<typeof TaxRateRuleTargetSchema>

package/src/routes/tax-regions/common/utils.ts

@@ -0,0 +1,12 @@
+import { HttpTypes } from "@acmekit/types"
+
+import { TaxRateRuleTarget } from "./schemas"
+
+export const createTaxRulePayload = (
+  target: TaxRateRuleTarget
+): HttpTypes.AdminCreateTaxRate["rules"] => {
+  return target.references.map((reference) => ({
+    reference: target.reference_type,
+    reference_id: reference.value,
+  }))
+}

package/src/routes/tax-regions/tax-region-create/components/tax-region-create-form/index.ts

@@ -0,0 +1 @@
+export * from "./tax-region-create-form"