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

package/src/hooks/table/columns/use-product-option-table-columns.tsx

@@ -1,44 +0,0 @@
-import { createColumnHelper } from "@tanstack/react-table"
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { TextCell } from "../../../components/table/table-cells/common/text-cell"
-import { HttpTypes } from "@medusajs/types"
-import { Badge } from "@medusajs/ui"
-
-const columnHelper = createColumnHelper<HttpTypes.AdminProductOption>()
-
-export const useProductOptionTableColumns = () => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      columnHelper.accessor("title", {
-        header: t("fields.title"),
-        cell: ({ getValue }) => <TextCell text={getValue()} />,
-      }),
-      columnHelper.accessor("values", {
-        header: t("fields.values"),
-        cell: ({ getValue }) => {
-          const values = getValue()
-          const count = values?.length || 0
-          const displayText =
-            count > 0 ? `${count} ${count === 1 ? "value" : "values"}` : "-"
-
-          return <TextCell text={displayText} />
-        },
-      }),
-      columnHelper.accessor("is_exclusive", {
-        header: t("fields.status"),
-        cell: ({ getValue }) => {
-          const isExclusive = getValue()
-          return (
-            <Badge size="xsmall" color={isExclusive ? "grey" : "blue"}>
-              {t(`general.${isExclusive ? "exclusive" : "global"}`)}
-            </Badge>
-          )
-        },
-      }),
-    ],
-    [t]
-  )
-}

package/src/hooks/table/filters/use-product-option-table-filters.tsx

@@ -1,33 +0,0 @@
-import { useTranslation } from "react-i18next"
-import { createDataTableFilterHelper } from "@medusajs/ui"
-import { HttpTypes } from "@medusajs/types"
-import { useDataTableDateFilters } from "../../../components/data-table/helpers/general/use-data-table-date-filters.tsx"
-import { useMemo } from "react"
-
-const filterHelper = createDataTableFilterHelper<HttpTypes.AdminProductOption>()
-
-export const useProductOptionTableFilters = () => {
-  const { t } = useTranslation()
-  const dateFilters = useDataTableDateFilters()
-
-  return useMemo(
-    () => [
-      filterHelper.accessor("is_exclusive", {
-        label: t("fields.type"),
-        type: "radio",
-        options: [
-          {
-            label: t("general.exclusive"),
-            value: "true",
-          },
-          {
-            label: t("general.global"),
-            value: "false",
-          },
-        ],
-      }),
-      ...dateFilters,
-    ],
-    [dateFilters, t]
-  )
-}

package/src/hooks/table/query/use-product-option-table-query.tsx

@@ -1,34 +0,0 @@
-import { HttpTypes } from "@medusajs/types"
-import { useQueryParams } from "../../use-query-params"
-
-type UseProductOptionTableQueryProps = {
-  prefix?: string
-  pageSize?: number
-}
-
-export const useProductOptionTableQuery = ({
-  prefix,
-  pageSize = 20,
-}: UseProductOptionTableQueryProps) => {
-  const queryObject = useQueryParams(
-    ["offset", "q", "order", "created_at", "updated_at", "is_exclusive"],
-    prefix
-  )
-
-  const { offset, created_at, updated_at, q, order, is_exclusive } = queryObject
-
-  const searchParams: HttpTypes.AdminProductOptionListParams = {
-    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,
-    is_exclusive: is_exclusive ? JSON.parse(is_exclusive) : undefined,
-    q,
-  }
-
-  return {
-    searchParams,
-    raw: queryObject,
-  }
-}

package/src/routes/product-options/common/hooks/use-delete-product-option-action.tsx

@@ -1,41 +0,0 @@
-import { useNavigate } from "react-router-dom"
-import { toast, usePrompt } from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
-import { useDeleteProductOption } from "../../../../hooks/api"
-import { HttpTypes } from "@medusajs/types"
-
-export const useDeleteProductOptionAction = ({
-  id,
-  title,
-}: HttpTypes.AdminProductOption) => {
-  const { t } = useTranslation()
-  const prompt = usePrompt()
-  const navigate = useNavigate()
-
-  const { mutateAsync } = useDeleteProductOption(id)
-
-  return async () => {
-    const result = await prompt({
-      title: t("general.areYouSure"),
-      description: t("productOptions.delete.confirmation", { title }),
-      confirmText: t("actions.delete"),
-      cancelText: t("actions.cancel"),
-    })
-
-    if (!result) {
-      return
-    }
-
-    await mutateAsync(undefined, {
-      onSuccess: () => {
-        navigate("/product-options", {
-          replace: true,
-        })
-        toast.success(t("productOptions.delete.successToast", { title }))
-      },
-      onError: (e) => {
-        toast.error(e.message)
-      },
-    })
-  }
-}

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

@@ -1,71 +0,0 @@
-import { Heading, Input, Text } from "@medusajs/ui"
-import { UseFormReturn } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-
-import { Form } from "../../../../../components/common/form"
-import { ChipInput } from "../../../../../components/inputs/chip-input"
-import { CreateProductOptionSchema } from "./schema"
-
-type CreateProductOptionDetailsProps = {
-  form: UseFormReturn<CreateProductOptionSchema>
-}
-
-export const CreateProductOptionDetails = ({
-  form,
-}: CreateProductOptionDetailsProps) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className="flex flex-col items-center p-16">
-      <div className="flex w-full max-w-[720px] flex-col gap-y-8">
-        <div>
-          <Heading>{t("productOptions.create.header")}</Heading>
-          <Text size="small" className="text-ui-fg-subtle">
-            {t("productOptions.create.hint")}
-          </Text>
-        </div>
-        <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>
-    </div>
-  )
-}

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

@@ -1,192 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, ProgressStatus, ProgressTabs, toast } from "@medusajs/ui"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-
-import { useState } from "react"
-import {
-  RouteFocusModal,
-  useRouteModal,
-} from "../../../../../components/modals"
-import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import { useCreateProductOption } from "../../../../../hooks/api"
-import { CreateProductOptionDetails } from "./create-product-option-details"
-import { CreateProductOptionOrganize } from "./create-product-option-organize"
-import {
-  CreateProductOptionDetailsSchema,
-  CreateProductOptionSchema,
-} from "./schema"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
-
-enum Tab {
-  DETAILS = "details",
-  ORGANIZE = "organize",
-}
-
-export const CreateProductOptionForm = () => {
-  const { t } = useTranslation()
-  const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
-  const [activeTab, setActiveTab] = useState<Tab>(Tab.DETAILS)
-  const [validDetails, setValidDetails] = useState(false)
-
-  const form = useForm<CreateProductOptionSchema>({
-    defaultValues: {
-      title: "",
-      values: [],
-      value_ranks: {},
-    },
-    resolver: zodResolver(CreateProductOptionSchema),
-  })
-
-  const handleTabChange = (tab: Tab) => {
-    if (tab === Tab.ORGANIZE) {
-      const { title, values } = form.getValues()
-
-      const result = CreateProductOptionDetailsSchema.safeParse({
-        title,
-        values,
-      })
-
-      if (!result.success) {
-        result.error.errors.forEach((error) => {
-          form.setError(
-            error.path.join(".") as keyof CreateProductOptionSchema,
-            {
-              type: "manual",
-              message: error.message,
-            }
-          )
-        })
-
-        return
-      }
-
-      form.clearErrors()
-      setValidDetails(true)
-    }
-
-    setActiveTab(tab)
-  }
-
-  const { mutateAsync, isPending } = useCreateProductOption()
-
-  const handleSubmit = form.handleSubmit((data) => {
-    const { title, values, value_ranks } = data
-
-    mutateAsync(
-      {
-        title,
-        values,
-        ranks: value_ranks,
-      },
-      {
-        onSuccess: ({ product_option }) => {
-          toast.success(
-            t("productOptions.create.successToast", {
-              title: product_option.title,
-            })
-          )
-
-          handleSuccess(`/product-options/${product_option.id}`)
-        },
-        onError: (error) => {
-          toast.error(error.message)
-        },
-      }
-    )
-  })
-
-  const organizeStatus: ProgressStatus =
-    form.getFieldState("value_ranks")?.isDirty || activeTab === Tab.ORGANIZE
-      ? "in-progress"
-      : "not-started"
-
-  const detailsStatus: ProgressStatus = validDetails
-    ? "completed"
-    : "in-progress"
-
-  return (
-    <RouteFocusModal.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex size-full flex-col overflow-hidden"
-      >
-        <ProgressTabs
-          dir={direction}
-          value={activeTab}
-          onValueChange={(tab) => handleTabChange(tab as Tab)}
-          className="flex size-full flex-col"
-        >
-          <RouteFocusModal.Header>
-            <div className="flex w-full items-center justify-between">
-              <div className="-my-2 w-full max-w-[400px] border-l">
-                <ProgressTabs.List className="grid w-full grid-cols-2">
-                  <ProgressTabs.Trigger
-                    value={Tab.DETAILS}
-                    status={detailsStatus}
-                    className="w-full min-w-0 overflow-hidden"
-                  >
-                    <span className="truncate">
-                      {t("productOptions.create.tabs.details")}
-                    </span>
-                  </ProgressTabs.Trigger>
-                  <ProgressTabs.Trigger
-                    value={Tab.ORGANIZE}
-                    status={organizeStatus}
-                    className="w-full min-w-0 overflow-hidden"
-                  >
-                    <span className="truncate">
-                      {t("productOptions.create.tabs.organize")}
-                    </span>
-                  </ProgressTabs.Trigger>
-                </ProgressTabs.List>
-              </div>
-            </div>
-          </RouteFocusModal.Header>
-          <RouteFocusModal.Body className="flex size-full flex-col overflow-auto">
-            <ProgressTabs.Content value={Tab.DETAILS}>
-              <CreateProductOptionDetails form={form} />
-            </ProgressTabs.Content>
-            <ProgressTabs.Content
-              value={Tab.ORGANIZE}
-              className="bg-ui-bg-subtle flex-1"
-            >
-              <CreateProductOptionOrganize form={form} />
-            </ProgressTabs.Content>
-          </RouteFocusModal.Body>
-          <RouteFocusModal.Footer>
-            <div className="flex items-center justify-end gap-x-2">
-              <RouteFocusModal.Close asChild>
-                <Button size="small" variant="secondary">
-                  {t("actions.cancel")}
-                </Button>
-              </RouteFocusModal.Close>
-              {activeTab === Tab.ORGANIZE ? (
-                <Button
-                  key="submit-btn"
-                  size="small"
-                  variant="primary"
-                  type="submit"
-                  isLoading={isPending}
-                >
-                  {t("actions.save")}
-                </Button>
-              ) : (
-                <Button
-                  key="continue-btn"
-                  size="small"
-                  variant="primary"
-                  type="button"
-                  onClick={() => handleTabChange(Tab.ORGANIZE)}
-                >
-                  {t("actions.continue")}
-                </Button>
-              )}
-            </div>
-          </RouteFocusModal.Footer>
-        </ProgressTabs>
-      </KeyboundForm>
-    </RouteFocusModal.Form>
-  )
-}

package/src/routes/product-options/product-option-create/components/create-product-option-form/create-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 { CreateProductOptionSchema } from "./schema"
-
-type CreateProductOptionOrganizeProps = {
-  form: UseFormReturn<CreateProductOptionSchema>
-}
-
-type ValueItem = {
-  id: string
-  value: string
-  rank: number
-}
-
-export const CreateProductOptionOrganize = ({
-  form,
-}: CreateProductOptionOrganizeProps) => {
-  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-create/components/create-product-option-form/index.ts

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

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

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

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

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

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

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

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

@@ -1,81 +0,0 @@
-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="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

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