@medusajs/draft-order 0.0.1 → 0.0.3

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

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