@medusajs/dashboard 3.0.0-snapshot-20251208164410 → 3.0.0-snapshot-20251211180009

package/src/routes/product-options/product-option-detail/components/product-option-product-section/product-option-product-section.tsx

@@ -1,74 +0,0 @@
-import { HttpTypes } from "@medusajs/types"
-import { Container } from "@medusajs/ui"
-import { keepPreviousData } from "@tanstack/react-query"
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { DataTable } from "../../../../../components/data-table"
-import { useProducts } from "../../../../../hooks/api"
-import { useProductTableColumns } from "../../../../../hooks/table/columns"
-import { useProductTableQuery } from "../../../../../hooks/table/query"
-
-type ProductOptionProductSectionProps = {
-  productOption: HttpTypes.AdminProductOption
-}
-
-const PAGE_SIZE = 10
-
-export const ProductOptionProductSection = ({
-  productOption,
-}: ProductOptionProductSectionProps) => {
-  const { t } = useTranslation()
-
-  const { searchParams } = useProductTableQuery({ pageSize: PAGE_SIZE })
-
-  const productIds = productOption.products?.map((p: any) => p.id) || []
-
-  const { products, count, isLoading, isError, error } = useProducts(
-    {
-      limit: PAGE_SIZE,
-      ...searchParams,
-      id: productIds.length > 0 ? productIds : undefined,
-    },
-    {
-      placeholderData: keepPreviousData,
-      enabled: productIds.length > 0,
-    }
-  )
-
-  const columns = useColumns()
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <Container className="divide-y p-0">
-      <DataTable
-        data={products}
-        columns={columns}
-        rowCount={count}
-        pageSize={PAGE_SIZE}
-        getRowId={(row) => row.id}
-        heading={t("products.domain")}
-        emptyState={{
-          empty: {
-            heading: t("general.noRecordsMessage"),
-          },
-          filtered: {
-            heading: t("general.noRecordsMessage"),
-            description: t("general.noRecordsMessageFiltered"),
-          },
-        }}
-        isLoading={isLoading}
-        enableSearch={true}
-        rowHref={(row) => `/products/${row.id}`}
-      />
-    </Container>
-  )
-}
-
-const useColumns = () => {
-  const columns = useProductTableColumns()
-
-  return useMemo(() => [...columns], [columns])
-}

package/src/routes/product-options/product-option-detail/index.ts

@@ -1,3 +0,0 @@
-export { ProductOptionBreadcrumb as Breadcrumb } from "./breadcrumb"
-export { ProductOptionDetail as Component } from "./product-option-detail"
-export { productOptionLoader as loader } from "./loader"

package/src/routes/product-options/product-option-detail/loader.ts

@@ -1,17 +0,0 @@
-import { LoaderFunctionArgs } from "react-router-dom"
-
-import { sdk } from "../../../lib/client"
-import { queryClient } from "../../../lib/query-client"
-import { productOptionsQueryKeys } from "../../../hooks/api/product-options.tsx"
-
-const productOptionDetailQuery = (id: string) => ({
-  queryKey: productOptionsQueryKeys.detail(id),
-  queryFn: async () => sdk.admin.productOption.retrieve(id),
-})
-
-export const productOptionLoader = async ({ params }: LoaderFunctionArgs) => {
-  const id = params.id
-  const query = productOptionDetailQuery(id!)
-
-  return queryClient.ensureQueryData(query)
-}

package/src/routes/product-options/product-option-detail/product-option-detail.tsx

@@ -1,50 +0,0 @@
-import { useLoaderData, useParams } from "react-router-dom"
-
-import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { SingleColumnPage } from "../../../components/layout/pages"
-import { useExtension } from "../../../providers/extension-provider"
-import { useProductOption } from "../../../hooks/api"
-import { productOptionLoader } from "./loader.ts"
-import { ProductOptionGeneralSection } from "./components/product-option-general-section"
-import { ProductOptionProductSection } from "./components/product-option-product-section"
-
-export const ProductOptionDetail = () => {
-  const { id } = useParams()
-
-  const initialData = useLoaderData() as Awaited<
-    ReturnType<typeof productOptionLoader>
-  >
-
-  const { getWidgets } = useExtension()
-
-  const { product_option, isLoading, isError, error } = useProductOption(
-    id!,
-    undefined,
-    {
-      initialData,
-    }
-  )
-
-  if (isLoading || !product_option) {
-    return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />
-  }
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <SingleColumnPage
-      widgets={{
-        after: getWidgets("product_option.details.after"),
-        before: getWidgets("product_option.details.before"),
-      }}
-      showJSON
-      showMetadata
-      data={product_option}
-    >
-      <ProductOptionGeneralSection productOption={product_option} />
-      <ProductOptionProductSection productOption={product_option} />
-    </SingleColumnPage>
-  )
-}

package/src/routes/product-options/product-option-edit/components/edit-product-option-form/edit-product-option-details.tsx

@@ -1,94 +0,0 @@
-import { Input } from "@medusajs/ui"
-import { useEffect } from "react"
-import { UseFormReturn, useWatch } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-
-import { Form } from "../../../../../components/common/form"
-import { ChipInput } from "../../../../../components/inputs/chip-input"
-import { EditProductOptionSchema } from "./schema"
-
-type EditProductOptionDetailsProps = {
-  form: UseFormReturn<EditProductOptionSchema>
-}
-
-export const EditProductOptionDetails = ({
-  form,
-}: EditProductOptionDetailsProps) => {
-  const { t } = useTranslation()
-
-  const values = useWatch({
-    control: form.control,
-    name: "values",
-  })
-
-  const valueRanks = useWatch({
-    control: form.control,
-    name: "value_ranks",
-  })
-
-  useEffect(() => {
-    if (!values || !valueRanks) {
-      return
-    }
-
-    const validValueSet = new Set(values)
-    const currentRanks = { ...valueRanks }
-    let hasStaleEntries = false
-
-    Object.keys(currentRanks).forEach((key) => {
-      if (!validValueSet.has(key)) {
-        delete currentRanks[key]
-        hasStaleEntries = true
-      }
-    })
-
-    if (hasStaleEntries) {
-      form.setValue("value_ranks", currentRanks, {
-        shouldDirty: true,
-        shouldTouch: true,
-      })
-    }
-  }, [values, valueRanks, form])
-
-  return (
-    <div className="flex flex-col gap-y-4">
-      <Form.Field
-        control={form.control}
-        name="title"
-        render={({ field }) => {
-          return (
-            <Form.Item>
-              <Form.Label>{t("productOptions.fields.title.label")}</Form.Label>
-              <Form.Control>
-                <Input
-                  autoComplete="off"
-                  {...field}
-                  placeholder={t("productOptions.fields.title.placeholder")}
-                />
-              </Form.Control>
-              <Form.ErrorMessage />
-            </Form.Item>
-          )
-        }}
-      />
-      <Form.Field
-        control={form.control}
-        name="values"
-        render={({ field }) => {
-          return (
-            <Form.Item>
-              <Form.Label>{t("productOptions.fields.values.label")}</Form.Label>
-              <Form.Control>
-                <ChipInput
-                  {...field}
-                  placeholder={t("productOptions.fields.values.placeholder")}
-                />
-              </Form.Control>
-              <Form.ErrorMessage />
-            </Form.Item>
-          )
-        }}
-      />
-    </div>
-  )
-}

package/src/routes/product-options/product-option-edit/components/edit-product-option-form/edit-product-option-form.tsx

@@ -1,116 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { HttpTypes } from "@medusajs/types"
-import { Button, toast } from "@medusajs/ui"
-import { useMemo } from "react"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-
-import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import { useUpdateProductOption } from "../../../../../hooks/api"
-import { EditProductOptionDetails } from "./edit-product-option-details"
-import { EditProductOptionOrganize } from "./edit-product-option-organize"
-import { EditProductOptionSchema } from "./schema"
-
-type EditProductOptionFormProps = {
-  productOption: HttpTypes.AdminProductOption
-}
-
-export const EditProductOptionForm = ({
-  productOption,
-}: EditProductOptionFormProps) => {
-  const { t } = useTranslation()
-  const { handleSuccess } = useRouteModal()
-
-  const { sortedValues, existingRanks } = useMemo(() => {
-    if (!productOption.values) {
-      return { sortedValues: [], existingRanks: {} }
-    }
-
-    const ranks: Record<string, number> = {}
-    productOption.values.forEach((v: any) => {
-      if (v.rank !== undefined && v.rank !== null) {
-        ranks[v.value] = v.rank
-      }
-    })
-
-    const sorted = [...productOption.values].sort((a: any, b: any) => {
-      const rankA = a.rank ?? Number.MAX_VALUE
-      const rankB = b.rank ?? Number.MAX_VALUE
-      return rankA - rankB
-    })
-
-    return {
-      sortedValues: sorted.map((v: any) => v.value),
-      existingRanks: ranks,
-    }
-  }, [productOption.values])
-
-  const form = useForm<EditProductOptionSchema>({
-    defaultValues: {
-      title: productOption.title,
-      values: sortedValues,
-      value_ranks: existingRanks,
-    },
-    resolver: zodResolver(EditProductOptionSchema),
-  })
-
-  const { mutateAsync, isPending } = useUpdateProductOption(productOption.id)
-
-  const handleSubmit = form.handleSubmit((data) => {
-    const { title, values, value_ranks } = data
-
-    mutateAsync(
-      {
-        title,
-        values,
-        ranks: value_ranks,
-      },
-      {
-        onSuccess: ({ product_option }) => {
-          toast.success(
-            t("productOptions.edit.successToast", {
-              title: product_option.title,
-            })
-          )
-
-          handleSuccess()
-        },
-        onError: (error) => {
-          toast.error(error.message)
-        },
-      }
-    )
-  })
-
-  return (
-    <RouteDrawer.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex size-full flex-col overflow-hidden"
-      >
-        <RouteDrawer.Body className="flex flex-col gap-y-4 overflow-auto p-4">
-          <EditProductOptionDetails form={form} />
-          <EditProductOptionOrganize form={form} />
-        </RouteDrawer.Body>
-        <RouteDrawer.Footer>
-          <div className="flex items-center justify-end gap-x-2">
-            <RouteDrawer.Close asChild>
-              <Button size="small" variant="secondary">
-                {t("actions.cancel")}
-              </Button>
-            </RouteDrawer.Close>
-            <Button
-              size="small"
-              variant="primary"
-              type="submit"
-              isLoading={isPending}
-            >
-              {t("actions.save")}
-            </Button>
-          </div>
-        </RouteDrawer.Footer>
-      </KeyboundForm>
-    </RouteDrawer.Form>
-  )
-}

package/src/routes/product-options/product-option-edit/components/edit-product-option-form/edit-product-option-organize.tsx

@@ -1,77 +0,0 @@
-import { Text } from "@medusajs/ui"
-import { useMemo } from "react"
-import { UseFormReturn, useWatch } from "react-hook-form"
-import { SortableList } from "../../../../../components/common/sortable-list"
-import { EditProductOptionSchema } from "./schema"
-
-type EditProductOptionOrganizeProps = {
-  form: UseFormReturn<EditProductOptionSchema>
-}
-
-type ValueItem = {
-  id: string
-  value: string
-  rank: number
-}
-
-export const EditProductOptionOrganize = ({
-  form,
-}: EditProductOptionOrganizeProps) => {
-  const values = useWatch({
-    control: form.control,
-    name: "values",
-  })
-
-  const valueRanks = useWatch({
-    control: form.control,
-    name: "value_ranks",
-  })
-
-  const items = useMemo<ValueItem[]>(() => {
-    if (!values || values.length === 0) {
-      return []
-    }
-
-    return values
-      .map((value, index) => ({
-        id: value,
-        value,
-        rank: valueRanks?.[value] ?? index,
-      }))
-      .sort((a, b) => a.rank - b.rank)
-  }, [values, valueRanks])
-
-  const handleChange = (newItems: ValueItem[]) => {
-    const newRanks: Record<string, number> = {}
-    newItems.forEach((item, index) => {
-      newRanks[item.value] = index
-    })
-
-    form.setValue("value_ranks", newRanks, {
-      shouldDirty: true,
-      shouldTouch: true,
-    })
-  }
-
-  if (!values || values.length === 0) {
-    return null
-  }
-
-  return (
-    <SortableList
-      items={items}
-      onChange={handleChange}
-      renderItem={(item) => (
-        <SortableList.Item
-          id={item.id}
-          className="border-ui-border-base border-b last:border-b-0"
-        >
-          <div className="flex flex-1 items-center gap-x-3 px-4 py-3">
-            <SortableList.DragHandle />
-            <Text size="small">{item.value}</Text>
-          </div>
-        </SortableList.Item>
-      )}
-    />
-  )
-}

package/src/routes/product-options/product-option-edit/components/edit-product-option-form/index.ts

@@ -1 +0,0 @@
-export { EditProductOptionForm } from "./edit-product-option-form"

package/src/routes/product-options/product-option-edit/components/edit-product-option-form/schema.ts

@@ -1,13 +0,0 @@
-import { z } from "zod"
-
-export const EditProductOptionDetailsSchema = z.object({
-  title: z.string().min(1),
-  values: z.array(z.string()).min(1, "At least one value is required"),
-})
-
-export type EditProductOptionSchema = z.infer<typeof EditProductOptionSchema>
-export const EditProductOptionSchema = z
-  .object({
-    value_ranks: z.record(z.string(), z.number()).optional(),
-  })
-  .merge(EditProductOptionDetailsSchema)

package/src/routes/product-options/product-option-edit/index.ts

@@ -1 +0,0 @@
-export { ProductOptionEdit as Component } from "./product-option-edit"

package/src/routes/product-options/product-option-edit/product-option-edit.tsx

@@ -1,34 +0,0 @@
-import { Heading } from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
-import { useParams } from "react-router-dom"
-
-import { RouteDrawer } from "../../../components/modals"
-import { useProductOption } from "../../../hooks/api"
-import { EditProductOptionForm } from "./components/edit-product-option-form"
-
-export const ProductOptionEdit = () => {
-  const { id } = useParams()
-  const { t } = useTranslation()
-
-  const { product_option, isPending, isError, error } = useProductOption(id!)
-
-  const ready = !isPending && !!product_option
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <RouteDrawer>
-      <RouteDrawer.Header>
-        <RouteDrawer.Title asChild>
-          <Heading>{t("productOptions.edit.header")}</Heading>
-        </RouteDrawer.Title>
-        <RouteDrawer.Description className="sr-only">
-          {t("productOptions.edit.description")}
-        </RouteDrawer.Description>
-      </RouteDrawer.Header>
-      {ready && <EditProductOptionForm productOption={product_option} />}
-    </RouteDrawer>
-  )
-}

package/src/routes/product-options/product-option-list/components/product-option-list-table/index.ts

@@ -1 +0,0 @@
-export { ProductOptionListTable } from "./product-option-list-table"

package/src/routes/product-options/product-option-list/components/product-option-list-table/product-option-list-table.tsx

@@ -1,140 +0,0 @@
-import {
-  Container,
-  createDataTableColumnHelper,
-  toast,
-  usePrompt,
-} from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
-import { keepPreviousData } from "@tanstack/react-query"
-import { useCallback, useMemo } from "react"
-import { HttpTypes } from "@medusajs/types"
-import { useNavigate } from "react-router-dom"
-import { PencilSquare, Trash } from "@medusajs/icons"
-
-import {
-  useDeleteProductOptionLazy,
-  useProductOptions,
-} from "../../../../../hooks/api/product-options"
-import { useProductOptionTableColumns } from "../../../../../hooks/table/columns/use-product-option-table-columns"
-import { useProductOptionTableFilters } from "../../../../../hooks/table/filters"
-import { useProductOptionTableQuery } from "../../../../../hooks/table/query/use-product-option-table-query"
-import { DataTable } from "../../../../../components/data-table"
-
-const PAGE_SIZE = 20
-
-export const ProductOptionListTable = () => {
-  const { t } = useTranslation()
-
-  const { searchParams } = useProductOptionTableQuery({
-    pageSize: PAGE_SIZE,
-  })
-
-  const { product_options, count, isError, error, isLoading } =
-    useProductOptions(searchParams, {
-      placeholderData: keepPreviousData,
-    })
-
-  const filters = useProductOptionTableFilters()
-  const columns = useColumns()
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <Container className="divide-y p-0">
-      <DataTable
-        data={product_options}
-        columns={columns}
-        filters={filters}
-        rowCount={count}
-        pageSize={PAGE_SIZE}
-        getRowId={(row) => row.id}
-        heading={t("productOptions.domain")}
-        subHeading={t("productOptions.subtitle")}
-        emptyState={{
-          empty: {
-            heading: t("general.noRecordsMessage"),
-          },
-          filtered: {
-            heading: t("general.noRecordsMessage"),
-            description: t("general.noRecordsMessageFiltered"),
-          },
-        }}
-        actions={[
-          {
-            label: t("actions.create"),
-            to: "create",
-          },
-        ]}
-        isLoading={isLoading}
-        enableSearch={true}
-        rowHref={(row) => `/product-options/${row.id}`}
-      />
-    </Container>
-  )
-}
-
-const columnHelper = createDataTableColumnHelper<HttpTypes.AdminProductOption>()
-
-const useColumns = () => {
-  const { t } = useTranslation()
-  const prompt = usePrompt()
-  const navigate = useNavigate()
-  const base = useProductOptionTableColumns()
-
-  const { mutateAsync } = useDeleteProductOptionLazy()
-
-  const handleDelete = useCallback(
-    async (productOption: HttpTypes.AdminProductOption) => {
-      const confirm = await prompt({
-        title: t("general.areYouSure"),
-        description: t("productOptions.delete.confirmation", {
-          title: productOption.title,
-        }),
-        confirmText: t("actions.delete"),
-        cancelText: t("actions.cancel"),
-      })
-
-      if (!confirm) {
-        return
-      }
-
-      await mutateAsync(productOption.id, {
-        onSuccess: () => {
-          toast.success(t("productOptions.delete.successToast"))
-        },
-        onError: (e) => {
-          toast.error(e.message)
-        },
-      })
-    },
-    [t, prompt, mutateAsync]
-  )
-
-  return useMemo(
-    () => [
-      ...base,
-      columnHelper.action({
-        actions: (ctx) => [
-          [
-            {
-              icon: <PencilSquare />,
-              label: t("actions.edit"),
-              onClick: () =>
-                navigate(`/product-options/${ctx.row.original.id}/edit`),
-            },
-          ],
-          [
-            {
-              icon: <Trash />,
-              label: t("actions.delete"),
-              onClick: () => handleDelete(ctx.row.original),
-            },
-          ],
-        ],
-      }),
-    ],
-    [base, handleDelete, navigate, t]
-  )
-}

package/src/routes/product-options/product-option-list/index.ts

@@ -1 +0,0 @@
-export { ProductOptionList as Component } from "./product-option-list"

package/src/routes/product-options/product-option-list/product-option-list.tsx

@@ -1,19 +0,0 @@
-import { SingleColumnPage } from "../../../components/layout/pages"
-import { useExtension } from "../../../providers/extension-provider"
-import { ProductOptionListTable } from "./components/product-option-list-table"
-
-export const ProductOptionList = () => {
-  const { getWidgets } = useExtension()
-
-  return (
-    <SingleColumnPage
-      widgets={{
-        after: getWidgets("product_option.list.after"),
-        before: getWidgets("product_option.list.before"),
-      }}
-      hasOutlet
-    >
-      <ProductOptionListTable />
-    </SingleColumnPage>
-  )
-}

package/src/routes/product-options/product-option-metadata/index.ts

@@ -1 +0,0 @@
-export { ProductOptionMetadata as Component } from "./product-option-metadata.tsx"

package/src/routes/product-options/product-option-metadata/product-option-metadata.tsx

@@ -1,27 +0,0 @@
-import { useParams } from "react-router-dom"
-
-import { useProductOption, useUpdateProductOption } from "../../../hooks/api"
-import { MetadataForm } from "../../../components/forms/metadata-form"
-import { RouteDrawer } from "../../../components/modals"
-
-export const ProductOptionMetadata = () => {
-  const { id } = useParams()
-
-  const { product_option, isPending, isError, error } = useProductOption(id!)
-  const { mutateAsync, isPending: isMutating } = useUpdateProductOption(id!)
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <RouteDrawer>
-      <MetadataForm
-        isPending={isPending}
-        isMutating={isMutating}
-        hook={mutateAsync}
-        metadata={product_option?.metadata}
-      />
-    </RouteDrawer>
-  )
-}