@medusajs/draft-order 0.0.1

package/.medusa/server/src/admin/routes/draft-orders/_id_/@items/page.js

@@ -0,0 +1,576 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { zodResolver } from "/Users/oliverjuhl/Desktop/medusa/draft-order-plugin/node_modules/@hookform/resolvers/zod/dist/zod.mjs";
+import { useForm } from "react-hook-form";
+import { z } from "/Users/oliverjuhl/Desktop/medusa/draft-order-plugin/node_modules/zod/lib/index.mjs";
+import { Check, PencilSquare } from "@medusajs/icons";
+import { createDataTableColumnHelper, toast, Heading, Text, Divider, Input, Button, IconButton, Tooltip } from "@medusajs/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { matchSorter } from "match-sorter";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { DataTable } from "../../../../components/common/data-table.js";
+import { KeyboundForm } from "../../../../components/common/keybound-form.js";
+import { Thumbnail } from "../../../../components/common/thumbnail.js";
+import { NumberInput } from "../../../../components/inputs/number-input.js";
+import { SwitchBlock } from "../../../../components/inputs/switch-block.js";
+import "../../../../components/modals/route-drawer/route-drawer.js";
+import { RouteFocusModal } from "../../../../components/modals/route-focus-modal/route-focus-modal.js";
+import "../../../../components/modals/route-modal-provider/route-modal-context.js";
+import { useRouteModal } from "../../../../components/modals/route-modal-provider/use-route-modal.js";
+import "../../../../components/modals/stacked-drawer/stacked-drawer.js";
+import { StackedFocusModal } from "../../../../components/modals/stacked-focus-modal/stacked-focus-modal.js";
+import "../../../../components/modals/stacked-modal-provider/stacked-modal-context.js";
+import { useStackedModal } from "../../../../components/modals/stacked-modal-provider/use-stacked-modal.js";
+import { useDraftOrder } from "../../../../hooks/api/draft-orders.js";
+import { useOrderPreview, useOrderEditConfirm, useOrderEditRequest, useOrderEditUpdateActionItem, useOrderEditUpdateOriginalItem, useOrderEditRemoveActionItem, useOrderEditAddItems } from "../../../../hooks/api/orders.js";
+import { useProductVariants } from "../../../../hooks/api/product-variants.js";
+import { useDebouncedSearch } from "../../../../hooks/common/use-debounced-search.js";
+import { useQueryParams } from "../../../../hooks/common/use-query-params.js";
+import { useCancelOrderEdit } from "../../../../hooks/order-edits/use-cancel-order-edit.js";
+import { useInitiateOrderEdit } from "../../../../hooks/order-edits/use-initiate-order-edit.js";
+import { getStylizedAmount, getLocaleAmount } from "../../../../lib/data/currencies.js";
+import { getFullDate } from "../../../../lib/utils/date-utils.js";
+const STACKED_MODAL_ID = "items_stacked_modal";
+const Items = () => {
+  const { id } = useParams();
+  const {
+    order: preview,
+    isPending: isPreviewPending,
+    isError: isPreviewError,
+    error: previewError
+  } = useOrderPreview(id);
+  useInitiateOrderEdit({ preview });
+  const { draft_order, isPending, isError, error } = useDraftOrder(
+    id,
+    {
+      fields: "currency_code"
+    },
+    {
+      enabled: !!id
+    }
+  );
+  const { onCancel } = useCancelOrderEdit({ preview });
+  if (isError) {
+    throw error;
+  }
+  if (isPreviewError) {
+    throw previewError;
+  }
+  const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
+  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: ready && /* @__PURE__ */ jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) });
+};
+const ItemsForm = ({ preview, currencyCode }) => {
+  var _a;
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { handleSuccess } = useRouteModal();
+  const { searchValue, onSearchValueChange, query } = useDebouncedSearch();
+  const form = useForm({
+    defaultValues: {
+      notify: false
+    },
+    resolver: zodResolver(schema)
+  });
+  const { mutateAsync: confirmOrderEdit } = useOrderEditConfirm(preview.id);
+  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
+  const matches = useMemo(() => {
+    return matchSorter(preview.items, query, {
+      keys: ["product_title", "variant_title", "variant_sku"]
+    });
+  }, [preview.items, query]);
+  const onSubmit = form.handleSubmit(async (_data) => {
+    setIsSubmitting(true);
+    let requestSucceeded = false;
+    await requestOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(`Failed to request order edit: ${e.message}`);
+      },
+      onSuccess: () => {
+        requestSucceeded = true;
+      }
+    });
+    if (!requestSucceeded) {
+      setIsSubmitting(false);
+      return;
+    }
+    await confirmOrderEdit(void 0, {
+      onError: (e) => {
+        toast.error(`Failed to confirm order edit: ${e.message}`);
+      },
+      onSuccess: () => {
+        handleSuccess();
+      },
+      onSettled: () => {
+        setIsSubmitting(false);
+      }
+    });
+  });
+  return /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex h-full flex-col overflow-hidden",
+      onSubmit,
+      children: [
+        /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxs(StackedFocusModal, { id: STACKED_MODAL_ID, children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Items" }) }),
+              /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order." }) })
+            ] }),
+            /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "search",
+                      placeholder: "Search items",
+                      value: searchValue,
+                      onChange: (e) => onSearchValueChange(e.target.value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", children: "Add items" }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3 px-4 py-2 text-ui-fg-muted", children: [
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Price" }) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add items to the order to get started." })
+                ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+                        /* @__PURE__ */ jsx(
+                          Thumbnail,
+                          {
+                            thumbnail: item.thumbnail,
+                            alt: item.product_title ?? void 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                size: "small",
+                                weight: "plus",
+                                leading: "compact",
+                                children: item.product_title
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Text,
+                              {
+                                size: "small",
+                                leading: "compact",
+                                className: "text-ui-fg-subtle",
+                                children: [
+                                  "(",
+                                  item.variant_title,
+                                  ")"
+                                ]
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            Text,
+                            {
+                              size: "small",
+                              leading: "compact",
+                              className: "text-ui-fg-subtle",
+                              children: item.variant_sku
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx(QuantityInput, { orderId: preview.id, item }),
+                      /* @__PURE__ */ jsx(
+                        UnitPriceInput,
+                        {
+                          orderId: preview.id,
+                          item,
+                          currencyCode
+                        }
+                      )
+                    ]
+                  },
+                  item.id
+                )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
+                  /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
+                    'No items found for "',
+                    query,
+                    '".'
+                  ] })
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  size: "small",
+                  leading: "compact",
+                  className: "text-ui-fg-subtle",
+                  children: [
+                    itemCount,
+                    " ",
+                    itemCount === 1 ? "item" : "items"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
+            ] }),
+            /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+            /* @__PURE__ */ jsx(
+              SwitchBlock,
+              {
+                label: "Send notification",
+                description: "Notify the customer that the items have been updated.",
+                control: form.control,
+                name: "notify"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items })
+        ] }) }),
+        /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 justify-end", children: [
+          /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isSubmitting, children: "Save" })
+        ] }) })
+      ]
+    }
+  ) });
+};
+const UnitPriceInput = ({
+  orderId,
+  item,
+  currencyCode
+}) => {
+  const [unitPrice, setUnitPrice] = useState(item.unit_price);
+  const [isEditing, setIsEditing] = useState(false);
+  const actionId = useMemo(() => {
+    var _a, _b;
+    return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
+  }, [item]);
+  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useOrderEditUpdateActionItem(orderId);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useOrderEditUpdateOriginalItem(orderId);
+  const onSubmit = useCallback(async () => {
+    if (unitPrice === item.unit_price) {
+      setIsEditing(false);
+      return;
+    }
+    if (!actionId) {
+      await updateOriginalItem(
+        {
+          item_id: item.id,
+          quantity: item.quantity,
+          unit_price: unitPrice
+        },
+        {
+          onSuccess: () => {
+            setIsEditing(false);
+          },
+          onError: (e) => {
+            toast.error(e.message);
+          }
+        }
+      );
+      return;
+    }
+    await updateActionItem(
+      {
+        action_id: actionId,
+        unit_price: unitPrice
+      },
+      {
+        onSuccess: () => {
+          setIsEditing(false);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  }, [item, actionId, updateActionItem, updateOriginalItem, unitPrice]);
+  const onChange = useCallback((e) => {
+    const value = e.target.value;
+    if (value === "") {
+      setUnitPrice(null);
+    }
+    const unitPrice2 = parseFloat(value);
+    if (isNaN(unitPrice2)) {
+      return;
+    }
+    setUnitPrice(unitPrice2);
+  }, []);
+  const isLoading = isUpdatingActionItem || isUpdatingOriginalItem;
+  return isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-3", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "small",
+        type: "number",
+        value: unitPrice || "",
+        onChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "shrink-0",
+        type: "button",
+        size: "small",
+        onClick: onSubmit,
+        isLoading,
+        children: /* @__PURE__ */ jsx(Check, {})
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-3", children: [
+    /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }),
+    /* @__PURE__ */ jsx(IconButton, { type: "button", size: "small", onClick: () => setIsEditing(true), children: /* @__PURE__ */ jsx(PencilSquare, {}) })
+  ] });
+};
+const QuantityInput = ({ orderId, item }) => {
+  const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useOrderEditUpdateActionItem(orderId);
+  const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useOrderEditUpdateOriginalItem(orderId);
+  const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useOrderEditRemoveActionItem(orderId);
+  const onChange = useCallback(
+    async (quantity) => {
+      var _a, _b;
+      if (quantity === item.quantity) {
+        return;
+      }
+      const actionId = (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
+      if (actionId) {
+        if (quantity === 0) {
+          await removeActionItem(actionId, {
+            onError: (e) => {
+              toast.error(e.message);
+            }
+          });
+          return;
+        }
+        await updateActionItem(
+          {
+            action_id: actionId,
+            quantity
+          },
+          {
+            onError: (e) => {
+              toast.error(e.message);
+            }
+          }
+        );
+        return;
+      }
+      await updateOriginalItem(
+        {
+          item_id: item.id,
+          quantity
+        },
+        {
+          onError: (e) => {
+            toast.error(e.message);
+          }
+        }
+      );
+    },
+    [item, updateActionItem, updateOriginalItem, removeActionItem]
+  );
+  return /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      value: item.quantity,
+      onChange,
+      disabled: isUpdatingActionItem || isUpdatingOriginalItem || isRemovingActionItem
+    }
+  );
+};
+const VARIANT_PREFIX = "items";
+const LIMIT = 50;
+const ExistingItemsForm = ({ orderId, items }) => {
+  const { setIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = useState(
+    items.reduce((acc, item) => {
+      acc[item.variant_id] = true;
+      return acc;
+    }, {})
+  );
+  useEffect(() => {
+    setRowSelection(
+      items.reduce((acc, item) => {
+        acc[item.variant_id] = true;
+        return acc;
+      }, {})
+    );
+  }, [items]);
+  const queryParams = useQueryParams(["q", "order"], VARIANT_PREFIX);
+  const { variants, count, isPending, isError, error } = useProductVariants(
+    {
+      ...queryParams,
+      limit: LIMIT
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useColumns();
+  const { mutateAsync } = useOrderEditAddItems(orderId);
+  const onSubmit = async () => {
+    const ids = Object.keys(rowSelection).filter(
+      (id) => !items.find((i) => i.variant_id === id)
+    );
+    await mutateAsync(
+      {
+        items: ids.map((id) => ({
+          variant_id: id,
+          quantity: 1
+        }))
+      },
+      {
+        onSuccess: () => {
+          setRowSelection({});
+          setIsOpen(STACKED_MODAL_ID, false);
+        },
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  };
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs(
+    StackedFocusModal.Content,
+    {
+      onOpenAutoFocus: (e) => {
+        e.preventDefault();
+        const searchInput = document.querySelector(
+          "[data-modal-id='modal-search-input']"
+        );
+        if (searchInput) {
+          searchInput.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
+          /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Product Variants" }) }),
+          /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Choose which product variants to add to the order." }) })
+        ] }),
+        /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            data: variants,
+            columns,
+            isLoading: isPending,
+            getRowId: (row) => row.id,
+            rowCount: count,
+            prefix: VARIANT_PREFIX,
+            layout: "fill",
+            rowSelection: {
+              state: rowSelection,
+              onRowSelectionChange: setRowSelection,
+              enableRowSelection: (row) => {
+                return !items.find((i) => i.variant_id === row.original.id);
+              }
+            },
+            autoFocusSearch: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 justify-end", children: [
+          /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
+        ] }) })
+      ]
+    }
+  );
+};
+const columnHelper = createDataTableColumnHelper();
+const useColumns = () => {
+  return useMemo(() => {
+    return [
+      columnHelper.select(),
+      columnHelper.accessor("product.title", {
+        header: "Product",
+        cell: ({ row }) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Thumbnail,
+              {
+                thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
+                alt: (_b = row.original.product) == null ? void 0 : _b.title
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
+          ] });
+        },
+        enableSorting: true
+      }),
+      columnHelper.accessor("title", {
+        header: "Variant",
+        enableSorting: true
+      }),
+      columnHelper.accessor("sku", {
+        header: "SKU",
+        cell: ({ getValue }) => {
+          return getValue() ?? "-";
+        },
+        enableSorting: true
+      }),
+      columnHelper.accessor("updated_at", {
+        header: "Updated",
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: getFullDate({ date: getValue(), includeTime: true }),
+              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
+            }
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Oldest first",
+        sortDescLabel: "Newest first"
+      }),
+      columnHelper.accessor("created_at", {
+        header: "Created",
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: getFullDate({ date: getValue(), includeTime: true }),
+              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
+            }
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Oldest first",
+        sortDescLabel: "Newest first"
+      })
+    ];
+  }, []);
+};
+const schema = z.object({
+  notify: z.boolean()
+});
+export {
+  Items as default
+};