@medusajs/dashboard 3.0.0-snapshot-20251114155958 → 3.0.0-snapshot-20251126221441

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

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

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

@@ -1,16 +1,38 @@
-import { PencilSquare } from "@medusajs/icons"
-import { Badge, Container, Heading } from "@medusajs/ui"
+import { PencilSquare, Plus, Trash } from "@medusajs/icons"
+import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
+import { useDeleteProductOption } from "../../../../../hooks/api/products"
 import { HttpTypes } from "@medusajs/types"
 
 const OptionActions = ({
+  product,
   option,
 }: {
+  product: HttpTypes.AdminProduct
   option: HttpTypes.AdminProductOption
 }) => {
   const { t } = useTranslation()
+  const { mutateAsync } = useDeleteProductOption(product.id, option.id)
+  const prompt = usePrompt()
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("products.options.deleteWarning", {
+        title: option.title,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
 
   return (
     <ActionMenu
@@ -19,11 +41,20 @@ const OptionActions = ({
           actions: [
             {
               label: t("actions.edit"),
-              to: `/product-options/${option.id}/edit`,
+              to: `options/${option.id}/edit`,
               icon: <PencilSquare />,
             },
           ],
         },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDelete,
+              icon: <Trash />,
+            },
+          ],
+        },
       ]}
     />
   )
@@ -47,9 +78,9 @@ export const ProductOptionSection = ({
             {
               actions: [
                 {
-                  label: t("actions.manage"),
-                  to: "options/manage",
-                  icon: <PencilSquare />,
+                  label: t("actions.create"),
+                  to: "options/create",
+                  icon: <Plus />,
                 },
               ],
             },
@@ -62,31 +93,18 @@ export const ProductOptionSection = ({
           <SectionRow
             title={option.title}
             key={option.id}
-            value={option.values
-              ?.sort((a, b) => {
-                if (a.rank == null && b.rank == null) {
-                  return 0
-                }
-                if (a.rank == null) {
-                  return 1
-                }
-                if (b.rank == null) {
-                  return -1
-                }
-                return a.rank - b.rank
-              })
-              .map((val) => {
-                return (
-                  <Badge
-                    key={val.value}
-                    size="2xsmall"
-                    className="flex min-w-[20px] items-center justify-center"
-                  >
-                    {val.value}
-                  </Badge>
-                )
-              })}
-            actions={<OptionActions option={option} />}
+            value={option.values?.map((val) => {
+              return (
+                <Badge
+                  key={val.value}
+                  size="2xsmall"
+                  className="flex min-w-[20px] items-center justify-center"
+                >
+                  {val.value}
+                </Badge>
+              )
+            })}
+            actions={<OptionActions product={product} option={option} />}
           />
         )
       })}

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

@@ -0,0 +1,123 @@
+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 { 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 { useUpdateProductOption } from "../../../../../hooks/api/products"
+
+type EditProductOptionFormProps = {
+  option: HttpTypes.AdminProductOption
+}
+
+const CreateProductOptionSchema = z.object({
+  title: z.string().min(1),
+  values: z.array(z.string()).optional(),
+})
+
+export const CreateProductOptionForm = ({
+  option,
+}: EditProductOptionFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof CreateProductOptionSchema>>({
+    defaultValues: {
+      title: option.title,
+      values: option.values.map((v: any) => 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 (
+    <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: { ...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-edit-option/components/edit-product-option-form/index.ts

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

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

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

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

@@ -0,0 +1,32 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { json, useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/modals"
+import { useProduct } from "../../../hooks/api/products"
+import { CreateProductOptionForm } from "./components/edit-product-option-form"
+
+export const ProductEditOption = () => {
+  const { id, option_id } = useParams()
+  const { t } = useTranslation()
+
+  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 (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("products.options.edit.header")}</Heading>
+      </RouteDrawer.Header>
+      {option && <CreateProductOptionForm option={option} />}
+    </RouteDrawer>
+  )
+}

package/dist/chunk-ZHH3W7CN.mjs

@@ -1,171 +0,0 @@
-// src/components/common/sortable-list/sortable-list.tsx
-import {
-  DndContext,
-  DragOverlay,
-  KeyboardSensor,
-  PointerSensor,
-  defaultDropAnimationSideEffects,
-  useSensor,
-  useSensors
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  arrayMove,
-  sortableKeyboardCoordinates,
-  useSortable
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { DotsSix } from "@medusajs/icons";
-import { IconButton, clx } from "@medusajs/ui";
-import {
-  Fragment,
-  createContext,
-  useContext,
-  useMemo,
-  useState
-} from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var List = ({
-  items,
-  onChange,
-  renderItem
-}) => {
-  const [active, setActive] = useState(null);
-  const [activeItem, activeIndex] = useMemo(() => {
-    if (active === null) {
-      return [null, null];
-    }
-    const index = items.findIndex(({ id }) => id === active.id);
-    return [items[index], index];
-  }, [active, items]);
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
-    })
-  );
-  const handleDragStart = ({ active: active2 }) => {
-    setActive(active2);
-  };
-  const handleDragEnd = ({ active: active2, over }) => {
-    if (over && active2.id !== over.id) {
-      const activeIndex2 = items.findIndex(({ id }) => id === active2.id);
-      const overIndex = items.findIndex(({ id }) => id === over.id);
-      onChange(arrayMove(items, activeIndex2, overIndex));
-    }
-    setActive(null);
-  };
-  const handleDragCancel = () => {
-    setActive(null);
-  };
-  return /* @__PURE__ */ jsxs(
-    DndContext,
-    {
-      sensors,
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd,
-      onDragCancel: handleDragCancel,
-      children: [
-        /* @__PURE__ */ jsx(Overlay, { children: activeItem && activeIndex !== null ? renderItem(activeItem, activeIndex) : null }),
-        /* @__PURE__ */ jsx(SortableContext, { items, children: /* @__PURE__ */ jsx(
-          "ul",
-          {
-            role: "application",
-            className: "flex list-inside list-none list-image-none flex-col p-0",
-            children: items.map((item, index) => /* @__PURE__ */ jsx(Fragment, { children: renderItem(item, index) }, item.id))
-          }
-        ) })
-      ]
-    }
-  );
-};
-var dropAnimationConfig = {
-  sideEffects: defaultDropAnimationSideEffects({
-    styles: {
-      active: {
-        opacity: "0.4"
-      }
-    }
-  })
-};
-var Overlay = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    DragOverlay,
-    {
-      className: "shadow-elevation-card-hover overflow-hidden rounded-md [&>li]:border-b-0",
-      dropAnimation: dropAnimationConfig,
-      children
-    }
-  );
-};
-var SortableItemContext = createContext(null);
-var useSortableItemContext = () => {
-  const context = useContext(SortableItemContext);
-  if (!context) {
-    throw new Error(
-      "useSortableItemContext must be used within a SortableItemContext"
-    );
-  }
-  return context;
-};
-var Item = ({
-  id,
-  className,
-  children
-}) => {
-  const {
-    attributes,
-    isDragging,
-    listeners,
-    setNodeRef,
-    setActivatorNodeRef,
-    transform,
-    transition
-  } = useSortable({ id });
-  const context = useMemo(
-    () => ({
-      attributes,
-      listeners,
-      ref: setActivatorNodeRef,
-      isDragging
-    }),
-    [attributes, listeners, setActivatorNodeRef, isDragging]
-  );
-  const style = {
-    opacity: isDragging ? 0.4 : void 0,
-    transform: CSS.Translate.toString(transform),
-    transition
-  };
-  return /* @__PURE__ */ jsx(SortableItemContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: clx("transition-fg flex flex-1 list-none", className),
-      ref: setNodeRef,
-      style,
-      children
-    }
-  ) });
-};
-var DragHandle = () => {
-  const { attributes, listeners, ref } = useSortableItemContext();
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      variant: "transparent",
-      size: "small",
-      ...attributes,
-      ...listeners,
-      ref,
-      className: "cursor-grab touch-none active:cursor-grabbing",
-      children: /* @__PURE__ */ jsx(DotsSix, { className: "text-ui-fg-muted" })
-    }
-  );
-};
-var SortableList = Object.assign(List, {
-  Item,
-  DragHandle
-});
-
-export {
-  SortableList
-};