@medusajs/dashboard 3.0.0-snapshot-20251216145629 → 3.0.0-snapshot-20260102134455

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

@@ -0,0 +1,92 @@
+import { useMemo } from "react"
+import { UseFormReturn, useWatch } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+import { Text } from "@medusajs/ui"
+import { SortableList } from "../../../../../components/common/sortable-list"
+import { CreateProductOptionSchema } from "./schema"
+
+type CreateProductOptionOrganizeProps = {
+  form: UseFormReturn<CreateProductOptionSchema>
+}
+
+type ValueItem = {
+  id: string
+  value: string
+  rank: number
+}
+
+export const CreateProductOptionOrganize = ({
+  form,
+}: CreateProductOptionOrganizeProps) => {
+  const { t } = useTranslation()
+
+  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 (
+    <div className="px-16">
+      <div className="mx-auto flex w-full max-w-[720px] flex-col gap-y-8 ">
+        <div className="border-ui-border-base flex flex-col gap-y-2 rounded-xl border">
+          <div className="border-b-base bg-ui-bg-component border-b p-2">
+            <Text size="small" leading="compact" weight="plus">
+              {t("productOptions.create.tabs.organize")}
+            </Text>
+          </div>
+          <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>
+            )}
+          />{" "}
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { RouteFocusModal } from "../../../components/modals"
+import { CreateProductOptionForm } from "./components/create-product-option-form/create-product-option-form"
+
+export const ProductOptionCreate = () => {
+  return (
+    <RouteFocusModal>
+      <CreateProductOptionForm />
+    </RouteFocusModal>
+  )
+}

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

@@ -0,0 +1,14 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+export const ProductOptionBreadcrumb = (
+  match: UIMatch<HttpTypes.AdminProductOptionResponse>
+) => {
+  const productOption = match.data.product_option
+
+  if (!productOption) {
+    return null
+  }
+
+  return <span>{productOption.title}</span>
+}

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

@@ -0,0 +1 @@
+export * from "./product-option-general-section.tsx"

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

@@ -0,0 +1,84 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Badge, Container, Heading } from "@medusajs/ui"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { useDeleteProductOptionAction } from "../../../common/hooks/use-delete-product-option-action.tsx"
+
+export const ProductOptionGeneralSection = ({
+  productOption,
+}: {
+  productOption: HttpTypes.AdminProductOption
+}) => {
+  const { t } = useTranslation()
+
+  const handleDelete = useDeleteProductOptionAction(productOption)
+
+  const sortedValues = useMemo(() => {
+    if (!productOption.values) {
+      return []
+    }
+
+    return [...productOption.values].sort((a: any, b: any) => {
+      const rankA = a.rank ?? Number.MAX_VALUE
+      const rankB = b.rank ?? Number.MAX_VALUE
+      return rankA - rankB
+    })
+  }, [productOption.values])
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{productOption.title}</Heading>
+        <div className="flex items-center gap-x-2">
+          <Badge
+            size="xsmall"
+            color={productOption.is_exclusive ? "grey" : "blue"}
+          >
+            {t(
+              `general.${productOption.is_exclusive ? "exclusive" : "global"}`
+            )}
+          </Badge>
+          <ActionMenu
+            groups={[
+              {
+                actions: [
+                  {
+                    label: t("actions.edit"),
+                    icon: <PencilSquare />,
+                    to: "edit",
+                  },
+                ],
+              },
+              {
+                actions: [
+                  {
+                    label: t("actions.delete"),
+                    icon: <Trash />,
+                    onClick: handleDelete,
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      </div>
+      <div className="px-6 py-4">
+        <ValuesDisplay values={sortedValues} />
+      </div>
+    </Container>
+  )
+}
+
+const ValuesDisplay = ({ values }: { values: any[] }) => {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {values.map((value) => (
+        <Badge key={value.id} size="xsmall">
+          {value.value}
+        </Badge>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1 @@
+export { ProductOptionProductSection } from "./product-option-product-section"

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

@@ -0,0 +1,82 @@
+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 = {
+  productOptionId: string
+}
+
+const PAGE_SIZE = 10
+
+export const ProductOptionProductSection = ({
+  productOptionId,
+}: ProductOptionProductSectionProps) => {
+  const { t } = useTranslation()
+
+  const { searchParams } = useProductTableQuery({ pageSize: PAGE_SIZE })
+
+  const { products, count, isLoading, isError, error } = useProducts(
+    {
+      limit: PAGE_SIZE,
+      ...searchParams,
+      fields:
+        "id,title,handle,thumbnail,status,*collection,*sales_channels,*product_options,variants.id",
+      option_id: productOptionId,
+    },
+    {
+      placeholderData: keepPreviousData,
+      enabled: !!productOptionId,
+    }
+  )
+
+  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: (
+              <span className="text-ui-fg-subtle">
+                {t("general.noRecordsMessage")}
+              </span>
+            ),
+            description: (
+              <span className="text-ui-fg-muted">
+                {t("productOptions.products.list.noRecords")}
+              </span>
+            ),
+          },
+          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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,18 @@
+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, { fields: "-products" }),
+})
+
+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

@@ -0,0 +1,50 @@
+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!,
+    { fields: "-products" },
+    {
+      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 productOptionId={product_option.id} />
+    </SingleColumnPage>
+  )
+}

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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,77 @@
+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

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