@medusajs/dashboard 3.0.0-snapshot-20251106143524 → 3.0.0-snapshot-20251106181920

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"

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

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

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

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

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

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

@@ -0,0 +1,131 @@
+import { Container, createDataTableColumnHelper, toast, usePrompt, } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { DataTable } from "../../../../../components/data-table"
+
+import { keepPreviousData } from "@tanstack/react-query"
+import { useCallback, useMemo } from "react"
+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 { HttpTypes } from "@medusajs/types"
+import { useNavigate } from "react-router-dom"
+import { PencilSquare, Trash } from "@medusajs/icons"
+
+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

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

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

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

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

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

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