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

package/src/routes/products/product-options-manage/components/product-options-manage-form/product-options-manage-form.tsx

@@ -0,0 +1,147 @@
+import { HttpTypes } from "@medusajs/types"
+import { Button, toast } from "@medusajs/ui"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { Form } from "../../../../../components/common/form"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useExtendableForm } from "../../../../../dashboard-app"
+import {
+  useLinkProductOptions,
+  useProductOptions,
+} from "../../../../../hooks/api"
+import { useExtension } from "../../../../../providers/extension-provider"
+
+type ProductOptionsManageFormProps = {
+  product: HttpTypes.AdminProduct
+}
+
+const ProductOptionsManageSchema = zod.object({
+  option_ids: zod.array(zod.string()),
+})
+
+export const ProductOptionsManageForm = ({
+  product,
+}: ProductOptionsManageFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+  const { getFormConfigs } = useExtension()
+  const configs = getFormConfigs("product", "edit")
+
+  const { product_options = [], isLoading } = useProductOptions({
+    is_exclusive: false,
+  })
+
+  const productOptionChoices = useMemo(() => {
+    return product_options.map((option) => ({
+      value: option.id,
+      label: option.title,
+    }))
+  }, [product_options])
+
+  const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>(
+    product.options?.map((opt) => opt.id) || []
+  )
+
+  const form = useExtendableForm({
+    defaultValues: {
+      option_ids: product.options?.map((opt) => opt.id) || [],
+    },
+    schema: ProductOptionsManageSchema,
+    configs: configs,
+    data: product,
+  })
+
+  const { mutateAsync, isPending } = useLinkProductOptions(product.id)
+
+  const handleProductOptionSelect = (optionIds: string[]) => {
+    setSelectedOptionIds(optionIds)
+    form.setValue("option_ids", optionIds)
+  }
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const currentOptionIds = product.options?.map((opt) => opt.id) || []
+    const newOptionIds = data.option_ids
+
+    // Determine which options to add and remove
+    const optionsToAdd = newOptionIds.filter(
+      (id) => !currentOptionIds.includes(id)
+    )
+    const optionsToRemove = currentOptionIds.filter(
+      (id) => !newOptionIds.includes(id)
+    )
+
+    await mutateAsync(
+      {
+        add: optionsToAdd,
+        remove: optionsToRemove,
+      },
+      {
+        onSuccess: ({ product }) => {
+          toast.success(
+            t("products.organization.edit.toasts.success", {
+              title: product.title,
+            })
+          )
+          handleSuccess()
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm onSubmit={handleSubmit} className="flex h-full flex-col">
+        <RouteDrawer.Body>
+          <div className="flex h-full flex-col gap-y-4">
+            <Form.Field
+              control={form.control}
+              name="option_ids"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>
+                      {t("products.options.manage.label")}
+                    </Form.Label>
+                    <Form.Hint>{t("products.options.manage.hint")}</Form.Hint>
+                    <Form.Control>
+                      <Combobox
+                        {...field}
+                        value={selectedOptionIds}
+                        onChange={(value) =>
+                          handleProductOptionSelect(value as string[])
+                        }
+                        options={productOptionChoices}
+                        placeholder={t("products.options.manage.placeholder")}
+                        disabled={isLoading}
+                      />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+          </div>
+        </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" type="submit" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/products/product-options-manage/index.ts

@@ -0,0 +1 @@
+export { ProductOptionsManage as Component } from "./product-options-manage"

package/src/routes/products/product-options-manage/product-options-manage.tsx

@@ -0,0 +1,35 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+
+import { RouteDrawer } from "../../../components/modals"
+import { useProduct } from "../../../hooks/api"
+import { PRODUCT_DETAIL_FIELDS } from "../product-detail/constants"
+import { ProductOptionsManageForm } from "./components/product-options-manage-form"
+
+export const ProductOptionsManage = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    fields: PRODUCT_DETAIL_FIELDS,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("products.options.manage.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description className="sr-only">
+          {t("products.options.manage.description")}
+        </RouteDrawer.Description>
+      </RouteDrawer.Header>
+      {!isLoading && product && <ProductOptionsManageForm product={product} />}
+    </RouteDrawer>
+  )
+}

package/dist/product-create-option-D2636LJL.mjs

@@ -1,145 +0,0 @@
-import {
-  ChipInput
-} from "./chunk-XDJ7OMBR.mjs";
-import "./chunk-IUCDCPJU.mjs";
-import {
-  KeyboundForm
-} from "./chunk-6HTZNHPT.mjs";
-import {
-  RouteDrawer,
-  useRouteModal
-} from "./chunk-AERWK3TJ.mjs";
-import {
-  Form
-} from "./chunk-OBQI23QM.mjs";
-import {
-  useCreateProductOption,
-  useProduct
-} from "./chunk-4BGVSXZZ.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-DEQUVHHE.mjs";
-import "./chunk-QZ7TP4HQ.mjs";
-
-// src/routes/products/product-create-option/product-create-option.tsx
-import { Heading } from "@medusajs/ui";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { useParams } from "react-router-dom";
-
-// src/routes/products/product-create-option/components/create-product-option-form/create-product-option-form.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input, toast } from "@medusajs/ui";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { z } from "zod";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CreateProductOptionSchema = z.object({
-  title: z.string().min(1),
-  values: z.array(z.string()).optional()
-});
-var CreateProductOptionForm = ({
-  product
-}) => {
-  const { t } = useTranslation();
-  const { handleSuccess } = useRouteModal();
-  const form = useForm({
-    defaultValues: {
-      title: "",
-      values: []
-    },
-    resolver: zodResolver(CreateProductOptionSchema)
-  });
-  const { mutateAsync, isPending } = useCreateProductOption(product.id);
-  const handleSubmit = form.handleSubmit(async (values) => {
-    mutateAsync(values, {
-      onSuccess: () => {
-        toast.success(
-          t("products.options.create.successToast", {
-            title: values.title
-          })
-        );
-        handleSuccess();
-      },
-      onError: async (err) => {
-        toast.error(err.message);
-      }
-    });
-  });
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
-    KeyboundForm,
-    {
-      onSubmit: handleSubmit,
-      className: "flex flex-1 flex-col overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: [
-          /* @__PURE__ */ jsx(
-            Form.Field,
-            {
-              control: form.control,
-              name: "title",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                  /* @__PURE__ */ jsx(Form.Label, { children: t("products.fields.options.optionTitle") }),
-                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      ...field,
-                      placeholder: t(
-                        "products.fields.options.optionTitlePlaceholder"
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Form.Field,
-            {
-              control: form.control,
-              name: "values",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                  /* @__PURE__ */ jsx(Form.Label, { children: t("products.fields.options.variations") }),
-                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                    ChipInput,
-                    {
-                      ...field,
-                      placeholder: t(
-                        "products.fields.options.variantionsPlaceholder"
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-                ] });
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
-          /* @__PURE__ */ jsx(Button, { type: "submit", size: "small", isLoading: isPending, children: t("actions.save") })
-        ] }) })
-      ]
-    }
-  ) });
-};
-
-// src/routes/products/product-create-option/product-create-option.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ProductCreateOption = () => {
-  const { id } = useParams();
-  const { t } = useTranslation2();
-  const { product, isLoading, isError, error } = useProduct(id);
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
-    /* @__PURE__ */ jsx2(RouteDrawer.Header, { children: /* @__PURE__ */ jsx2(Heading, { children: t("products.options.create.header") }) }),
-    !isLoading && product && /* @__PURE__ */ jsx2(CreateProductOptionForm, { product })
-  ] });
-};
-export {
-  ProductCreateOption as Component
-};

package/dist/product-edit-option-DYAFZIT2.mjs

@@ -1,150 +0,0 @@
-import {
-  ChipInput
-} from "./chunk-XDJ7OMBR.mjs";
-import "./chunk-IUCDCPJU.mjs";
-import {
-  KeyboundForm
-} from "./chunk-6HTZNHPT.mjs";
-import {
-  RouteDrawer,
-  useRouteModal
-} from "./chunk-AERWK3TJ.mjs";
-import {
-  Form
-} from "./chunk-OBQI23QM.mjs";
-import {
-  useProduct,
-  useUpdateProductOption
-} from "./chunk-4BGVSXZZ.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-DEQUVHHE.mjs";
-import "./chunk-QZ7TP4HQ.mjs";
-
-// src/routes/products/product-edit-option/product-edit-option.tsx
-import { Heading } from "@medusajs/ui";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { json, useParams } from "react-router-dom";
-
-// src/routes/products/product-edit-option/components/edit-product-option-form/edit-product-option-form.tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Input } from "@medusajs/ui";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { z } from "zod";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CreateProductOptionSchema = z.object({
-  title: z.string().min(1),
-  values: z.array(z.string()).optional()
-});
-var CreateProductOptionForm = ({
-  option
-}) => {
-  const { t } = useTranslation();
-  const { handleSuccess } = useRouteModal();
-  const form = useForm({
-    defaultValues: {
-      title: option.title,
-      values: option.values.map((v) => v.value)
-    },
-    resolver: zodResolver(CreateProductOptionSchema)
-  });
-  const { mutateAsync, isPending } = useUpdateProductOption(
-    option.product_id,
-    option.id
-  );
-  const handleSubmit = form.handleSubmit(async (values) => {
-    mutateAsync(
-      {
-        id: option.id,
-        ...values
-      },
-      {
-        onSuccess: () => {
-          handleSuccess();
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
-    KeyboundForm,
-    {
-      onSubmit: handleSubmit,
-      className: "flex flex-1 flex-col overflow-hidden",
-      children: [
-        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-4 overflow-auto", children: [
-          /* @__PURE__ */ jsx(
-            Form.Field,
-            {
-              control: form.control,
-              name: "title",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                  /* @__PURE__ */ jsx(Form.Label, { children: t("products.fields.options.optionTitle") }),
-                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      ...field,
-                      placeholder: t(
-                        "products.fields.options.optionTitlePlaceholder"
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Form.Field,
-            {
-              control: form.control,
-              name: "values",
-              render: ({ field: { ...field } }) => {
-                return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                  /* @__PURE__ */ jsx(Form.Label, { children: t("products.fields.options.variations") }),
-                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                    ChipInput,
-                    {
-                      ...field,
-                      placeholder: t(
-                        "products.fields.options.variantionsPlaceholder"
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-                ] });
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
-          /* @__PURE__ */ jsx(Button, { type: "submit", size: "small", isLoading: isPending, children: t("actions.save") })
-        ] }) })
-      ]
-    }
-  ) });
-};
-
-// src/routes/products/product-edit-option/product-edit-option.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ProductEditOption = () => {
-  const { id, option_id } = useParams();
-  const { t } = useTranslation2();
-  const { product, isPending, isFetching, isError, error } = useProduct(id);
-  const option = product?.options.find((o) => o.id === option_id);
-  if (!isPending && !isFetching && !option) {
-    throw json({ message: `An option with ID ${option_id} was not found` }, 404);
-  }
-  if (isError) {
-    throw error;
-  }
-  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
-    /* @__PURE__ */ jsx2(RouteDrawer.Header, { children: /* @__PURE__ */ jsx2(Heading, { children: t("products.options.edit.header") }) }),
-    option && /* @__PURE__ */ jsx2(CreateProductOptionForm, { option })
-  ] });
-};
-export {
-  ProductEditOption as Component
-};

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

@@ -1,122 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, Input, toast } from "@medusajs/ui"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-import { z } from "zod"
-
-import { HttpTypes } from "@medusajs/types"
-import { Form } from "../../../../../components/common/form"
-import { ChipInput } from "../../../../../components/inputs/chip-input"
-import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
-import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import { useCreateProductOption } from "../../../../../hooks/api/products"
-
-type EditProductOptionsFormProps = {
-  product: HttpTypes.AdminProduct
-}
-
-const CreateProductOptionSchema = z.object({
-  title: z.string().min(1),
-  values: z.array(z.string()).optional(),
-})
-
-export const CreateProductOptionForm = ({
-  product,
-}: EditProductOptionsFormProps) => {
-  const { t } = useTranslation()
-  const { handleSuccess } = useRouteModal()
-
-  const form = useForm<z.infer<typeof CreateProductOptionSchema>>({
-    defaultValues: {
-      title: "",
-      values: [],
-    },
-    resolver: zodResolver(CreateProductOptionSchema),
-  })
-
-  const { mutateAsync, isPending } = useCreateProductOption(product.id)
-
-  const handleSubmit = form.handleSubmit(async (values) => {
-    mutateAsync(values, {
-      onSuccess: () => {
-        toast.success(
-          t("products.options.create.successToast", {
-            title: values.title,
-          })
-        )
-        handleSuccess()
-      },
-      onError: async (err) => {
-        toast.error(err.message)
-      },
-    })
-  })
-
-  return (
-    <RouteDrawer.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex flex-1 flex-col overflow-hidden"
-      >
-        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
-          <Form.Field
-            control={form.control}
-            name="title"
-            render={({ field }) => {
-              return (
-                <Form.Item>
-                  <Form.Label>
-                    {t("products.fields.options.optionTitle")}
-                  </Form.Label>
-                  <Form.Control>
-                    <Input
-                      {...field}
-                      placeholder={t(
-                        "products.fields.options.optionTitlePlaceholder"
-                      )}
-                    />
-                  </Form.Control>
-                  <Form.ErrorMessage />
-                </Form.Item>
-              )
-            }}
-          />
-          <Form.Field
-            control={form.control}
-            name="values"
-            render={({ field }) => {
-              return (
-                <Form.Item>
-                  <Form.Label>
-                    {t("products.fields.options.variations")}
-                  </Form.Label>
-                  <Form.Control>
-                    <ChipInput
-                      {...field}
-                      placeholder={t(
-                        "products.fields.options.variantionsPlaceholder"
-                      )}
-                    />
-                  </Form.Control>
-                  <Form.ErrorMessage />
-                </Form.Item>
-              )
-            }}
-          />
-        </RouteDrawer.Body>
-        <RouteDrawer.Footer>
-          <div className="flex items-center justify-end gap-x-2">
-            <RouteDrawer.Close asChild>
-              <Button variant="secondary" size="small">
-                {t("actions.cancel")}
-              </Button>
-            </RouteDrawer.Close>
-            <Button type="submit" size="small" isLoading={isPending}>
-              {t("actions.save")}
-            </Button>
-          </div>
-        </RouteDrawer.Footer>
-      </KeyboundForm>
-    </RouteDrawer.Form>
-  )
-}

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

@@ -1 +0,0 @@
-export * from "./create-product-option-form"

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

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

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

@@ -1,26 +0,0 @@
-import { Heading } from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
-import { useParams } from "react-router-dom"
-import { RouteDrawer } from "../../../components/modals"
-import { useProduct } from "../../../hooks/api/products"
-import { CreateProductOptionForm } from "./components/create-product-option-form"
-
-export const ProductCreateOption = () => {
-  const { id } = useParams()
-  const { t } = useTranslation()
-
-  const { product, isLoading, isError, error } = useProduct(id!)
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <RouteDrawer>
-      <RouteDrawer.Header>
-        <Heading>{t("products.options.create.header")}</Heading>
-      </RouteDrawer.Header>
-      {!isLoading && product && <CreateProductOptionForm product={product} />}
-    </RouteDrawer>
-  )
-}