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

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

@@ -0,0 +1,284 @@
+import { HttpTypes } from "@medusajs/types"
+import { Button, Hint, Label, 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()),
+  option_values: zod.record(zod.array(zod.string())).optional(),
+})
+
+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 [selectedOptionValues, setSelectedOptionValues] = useState<
+    Record<string, string[]>
+  >(() => {
+    // Initialize with existing product option values
+    const initialValues: Record<string, string[]> = {}
+    product.options?.forEach((opt) => {
+      initialValues[opt.id] = opt.values?.map((v) => v.id) || []
+    })
+    return initialValues
+  })
+
+  const form = useExtendableForm({
+    defaultValues: {
+      option_ids: product.options?.map((opt) => opt.id) || [],
+      option_values: (() => {
+        const initialValues: Record<string, string[]> = {}
+        product.options?.forEach((opt) => {
+          initialValues[opt.id] = opt.values?.map((v) => v.id) || []
+        })
+        return initialValues
+      })(),
+    },
+    schema: ProductOptionsManageSchema,
+    configs: configs,
+    data: product,
+  })
+
+  const { mutateAsync, isPending } = useLinkProductOptions(product.id)
+
+  const handleProductOptionSelect = (optionIds: string[]) => {
+    setSelectedOptionIds(optionIds)
+    form.setValue("option_ids", optionIds)
+
+    // Initialize selected values for new options (select all by default)
+    const newSelectedValues: Record<string, string[]> = {}
+    const selectedProductOptions = product_options.filter((option) =>
+      optionIds.includes(option.id)
+    )
+
+    selectedProductOptions.forEach((option) => {
+      // If option was already selected, keep its current value selection
+      if (selectedOptionValues[option.id]) {
+        newSelectedValues[option.id] = selectedOptionValues[option.id]
+      } else {
+        // New option - select all values by default
+        newSelectedValues[option.id] = option.values?.map((v) => v.id) || []
+      }
+    })
+
+    setSelectedOptionValues(newSelectedValues)
+    form.setValue("option_values", newSelectedValues)
+  }
+
+  const handleValueChange = (optionId: string, valueIds: string[]) => {
+    // Ensure at least one value is selected
+    if (valueIds.length === 0) {
+      return
+    }
+
+    const updatedSelectedValues = {
+      ...selectedOptionValues,
+      [optionId]: valueIds,
+    }
+
+    setSelectedOptionValues(updatedSelectedValues)
+    form.setValue("option_values", updatedSelectedValues)
+  }
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const currentOptionIds = product.options?.map((opt) => opt.id) || []
+    const newOptionIds = data.option_ids
+
+    const optionsToAdd: (string | { id: string; value_ids: string[] })[] = []
+    const optionsToRemove: string[] = []
+
+    // Check for completely removed options
+    for (const currentId of currentOptionIds) {
+      if (!newOptionIds.includes(currentId)) {
+        optionsToRemove.push(currentId)
+      }
+    }
+
+    // Check for new options or options with changed values
+    for (const newId of newOptionIds) {
+      const isNewOption = !currentOptionIds.includes(newId)
+
+      if (isNewOption) {
+        optionsToAdd.push(
+          data.option_values
+            ? {
+                id: newId,
+                value_ids: data.option_values[newId],
+              }
+            : newId
+        )
+      } else {
+        const currentOption = product.options?.find((opt) => opt.id === newId)
+        const currentValueIds =
+          currentOption?.values?.map((v) => v.id).sort() || []
+        const newValueIds = [...(data.option_values?.[newId] || [])].sort()
+
+        const valuesChanged =
+          currentValueIds.length !== newValueIds.length ||
+          currentValueIds.some((id, index) => id !== newValueIds[index])
+
+        if (valuesChanged) {
+          optionsToRemove.push(newId)
+          optionsToAdd.push(
+            data.option_values
+              ? {
+                  id: newId,
+                  value_ids: data.option_values[newId],
+                }
+              : newId
+          )
+        }
+      }
+    }
+
+    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}
+                        displayMode="chips"
+                      />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            {selectedOptionIds.length > 0 && (
+              <div className="flex flex-col gap-y-4">
+                <div className="flex flex-col">
+                  <Label weight="plus">{t("fields.values")}</Label>
+                  <Hint>{t("products.create.variants.selectValuesHint")}</Hint>
+                </div>
+                <div className="flex flex-col gap-y-3">
+                  {product_options
+                    .filter((option) => selectedOptionIds.includes(option.id))
+                    .map((option) => {
+                      const valueOptions =
+                        option.values
+                          ?.sort((a, b) => {
+                            const rankA = a.rank ?? Number.MAX_VALUE
+                            const rankB = b.rank ?? Number.MAX_VALUE
+                            return rankA - rankB
+                          })
+                          .map((v) => ({
+                            value: v.id,
+                            label: v.value,
+                          })) || []
+
+                      return (
+                        <div key={option.id} className="flex flex-col gap-y-2">
+                          <Label size="small" weight="plus">
+                            {option.title}
+                          </Label>
+                          <Combobox
+                            value={selectedOptionValues[option.id] || []}
+                            onChange={(value) =>
+                              handleValueChange(option.id, value as string[])
+                            }
+                            options={valueOptions}
+                            placeholder={t(
+                              "products.fields.options.variantionsPlaceholder"
+                            )}
+                            displayMode="chips"
+                          />
+                        </div>
+                      )
+                    })}
+                </div>
+              </div>
+            )}
+          </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-GAEPSU6J.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-AENRV3N7.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-NFEK63OE.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-VIU3ZICO.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-AENRV3N7.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-NFEK63OE.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
-};