@medusajs/draft-order 0.0.1

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

@@ -0,0 +1,465 @@
+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 { toast, Heading, Text, Divider, Input, Button, Select, Label, Hint } from "@medusajs/ui";
+import { matchSorter } from "match-sorter";
+import { useState, useEffect, useMemo } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+import { z } from "/Users/oliverjuhl/Desktop/medusa/draft-order-plugin/node_modules/zod/lib/index.mjs";
+import { ConditionalTooltip } from "../../../../components/common/conditional-tooltip.js";
+import { Form } from "../../../../components/common/form.js";
+import { KeyboundForm } from "../../../../components/common/keybound-form.js";
+import { Thumbnail } from "../../../../components/common/thumbnail.js";
+import { Combobox } from "../../../../components/inputs/combobox.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 "../../../../components/modals/stacked-focus-modal/stacked-focus-modal.js";
+import "../../../../components/modals/stacked-modal-provider/stacked-modal-context.js";
+import { useOrder, useOrderPreview, useOrderEditConfirm, useOrderEditRequest, useOrderEditAddShippingMethod } from "../../../../hooks/api/orders.js";
+import { useComboboxData } from "../../../../hooks/common/use-combobox-data.js";
+import { useDebouncedSearch } from "../../../../hooks/common/use-debounced-search.js";
+import { useCancelOrderEdit } from "../../../../hooks/order-edits/use-cancel-order-edit.js";
+import { useInitiateOrderEdit } from "../../../../hooks/order-edits/use-initiate-order-edit.js";
+import { sdk } from "../../../../lib/queries/sdk.js";
+import { getUniqueShippingProfiles } from "../../../../lib/utils/order-utils.js";
+const Shipping = () => {
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const shippingProfileId = searchParams.get("shipping_profile_id");
+  const { order, isPending, isError, error } = useOrder(id, {
+    fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+items.variant.options.*,+currency_code"
+  });
+  const {
+    order: preview,
+    isPending: isPreviewPending,
+    isError: isPreviewError,
+    error: previewError
+  } = useOrderPreview(id);
+  useInitiateOrderEdit({ preview });
+  const { onCancel } = useCancelOrderEdit({ preview });
+  const onClose = async () => {
+    const res = await onCancel();
+    if (res) {
+      clearLocalStorageShippingInformation();
+    }
+    return res;
+  };
+  if (isError) {
+    throw error;
+  }
+  if (isPreviewError) {
+    throw previewError;
+  }
+  const ready = order && !isPending && preview && !isPreviewPending;
+  return /* @__PURE__ */ jsx(RouteFocusModal, { onClose, children: ready && /* @__PURE__ */ jsx(
+    ShippingForm,
+    {
+      order,
+      preview,
+      selectedShippingProfileId: shippingProfileId
+    }
+  ) });
+};
+const ShippingForm = ({
+  order,
+  preview,
+  selectedShippingProfileId
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { searchValue, onSearchValueChange, query } = useDebouncedSearch();
+  const uniqueShippingProfiles = getUniqueShippingProfiles(order.items);
+  const navigate = useNavigate();
+  const { handleSuccess } = useRouteModal();
+  const { mutateAsync: confirmOrderEdit } = useOrderEditConfirm(preview.id);
+  const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
+  const shippingInformation = getLocalStorageShippingInformation();
+  const form = useForm({
+    defaultValues: {
+      shipping_profile_id: selectedShippingProfileId ? selectedShippingProfileId : uniqueShippingProfiles.length <= 1 ? uniqueShippingProfiles[0].id : (shippingInformation == null ? void 0 : shippingInformation.shipping_profile_id) || "",
+      location_id: (shippingInformation == null ? void 0 : shippingInformation.location_id) || ""
+    },
+    resolver: zodResolver(schema)
+  });
+  const shippingProfileId = useWatch({
+    control: form.control,
+    name: "shipping_profile_id"
+  });
+  const locationId = useWatch({
+    control: form.control,
+    name: "location_id"
+  });
+  useEffect(() => {
+    updateLocalStorageShippingInformation({
+      shipping_profile_id: shippingProfileId,
+      location_id: locationId
+    });
+  }, [shippingProfileId, locationId]);
+  const items = useMemo(() => {
+    var _a;
+    return (_a = order.items) == null ? void 0 : _a.filter(
+      (item) => {
+        var _a2, _b, _c;
+        return ((_c = (_b = (_a2 = item.variant) == null ? void 0 : _a2.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
+      }
+    );
+  }, [order.items, shippingProfileId]);
+  const itemCount = (items == null ? void 0 : items.reduce((acc, item) => acc + item.quantity, 0)) || 0;
+  const matches = useMemo(() => {
+    return matchSorter(items, query, {
+      keys: ["product_title", "variant_title", "variant_sku"]
+    });
+  }, [items, query]);
+  if (selectedShippingProfileId && !uniqueShippingProfiles.find(
+    (profile) => profile.id === selectedShippingProfileId
+  )) {
+    toast.error(
+      `Unable to find a shipping profile with the provided ID: ${selectedShippingProfileId}`
+    );
+    navigate("..");
+  }
+  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__ */ 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 py-16 px-6", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
+            /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for this order." }) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsx(
+            ShippingProfileField,
+            {
+              control: form.control,
+              shippingProfiles: uniqueShippingProfiles
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsx(LocationField, { control: form.control }),
+          /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
+          /* @__PURE__ */ jsx(
+            ShippingOptionField,
+            {
+              control: form.control,
+              orderId: preview.id,
+              preview
+            }
+          ),
+          /* @__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 to ship" }),
+                /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
+              ] }),
+              /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 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: "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: "Choose a shipping profile" }),
+                /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile will be shown here." })
+              ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "grid grid-cols-2 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__ */ jsxs(
+                      Text,
+                      {
+                        size: "small",
+                        leading: "compact",
+                        className: "text-ui-fg-subtle",
+                        children: [
+                          item.quantity,
+                          "x"
+                        ]
+                      }
+                    )
+                  ]
+                },
+                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(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", 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 ShippingProfileField = ({
+  control,
+  shippingProfiles
+}) => {
+  const shippingProfileOptions = shippingProfiles.map((profile) => ({
+    label: profile.name,
+    value: profile.id
+  }));
+  return /* @__PURE__ */ jsx(
+    Form.Field,
+    {
+      control,
+      name: "shipping_profile_id",
+      render: ({ field: { onChange, ref, ...field } }) => {
+        return /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Form.Label, { children: "Shipping Profile" }),
+            /* @__PURE__ */ jsx(Form.Hint, { children: "Choose the shipping profile to add shipping for." })
+          ] }),
+          /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              ...field,
+              onValueChange: onChange,
+              disabled: shippingProfileOptions.length <= 1,
+              children: [
+                /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a shipping profile" }) }),
+                /* @__PURE__ */ jsx(Select.Content, { children: shippingProfileOptions.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          ) })
+        ] }) });
+      }
+    }
+  );
+};
+const LocationField = ({ control }) => {
+  const locations = useComboboxData({
+    queryKey: ["locations"],
+    queryFn: async (params) => {
+      return await sdk.admin.stockLocation.list(params);
+    },
+    getOptions: (data) => {
+      return data.stock_locations.map((location) => ({
+        label: location.name,
+        value: location.id
+      }));
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Form.Field,
+    {
+      control,
+      name: "location_id",
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Form.Label, { children: "Location" }),
+            /* @__PURE__ */ jsx(Form.Hint, { children: "Choose where you want to ship the items from." })
+          ] }),
+          /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+            Combobox,
+            {
+              options: locations.options,
+              fetchNextPage: locations.fetchNextPage,
+              isFetchingNextPage: locations.isFetchingNextPage,
+              searchValue: locations.searchValue,
+              onSearchValueChange: locations.onSearchValueChange,
+              placeholder: "Select location",
+              ...field
+            }
+          ) })
+        ] }) });
+      }
+    }
+  );
+};
+const ShippingOptionField = ({
+  orderId,
+  preview,
+  control
+}) => {
+  var _a, _b;
+  const locationId = useWatch({ control, name: "location_id" });
+  const shippingProfileId = useWatch({ control, name: "shipping_profile_id" });
+  const shippingOptions = useComboboxData({
+    queryKey: ["shipping_options"],
+    queryFn: async (params) => {
+      return await sdk.admin.shippingOption.list({
+        ...params,
+        stock_location_id: locationId,
+        shipping_profile_id: shippingProfileId
+      });
+    },
+    getOptions: (data) => {
+      return data.shipping_options.map((option) => ({
+        label: option.name,
+        value: option.id
+      }));
+    },
+    enabled: !!locationId && !!shippingProfileId,
+    defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
+  });
+  const { mutateAsync: addShippingMethod, isPending } = useOrderEditAddShippingMethod(orderId);
+  const onShippingOptionChange = async (value) => {
+    if (!value) {
+      return;
+    }
+    await addShippingMethod(
+      {
+        shipping_option_id: value
+      },
+      {
+        onError: (e) => {
+          toast.error(e.message);
+        }
+      }
+    );
+  };
+  const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Shipping option" }),
+      /* @__PURE__ */ jsx(Hint, { children: "Choose the shipping option to use." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConditionalTooltip,
+      {
+        content: tooltipContent,
+        showTooltip: !locationId || !shippingProfileId,
+        children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            options: shippingOptions.options,
+            fetchNextPage: shippingOptions.fetchNextPage,
+            isFetchingNextPage: shippingOptions.isFetchingNextPage,
+            searchValue: shippingOptions.searchValue,
+            onSearchValueChange: shippingOptions.onSearchValueChange,
+            placeholder: "Select shipping option",
+            onChange: onShippingOptionChange,
+            value: ((_b = preview.shipping_methods[0]) == null ? void 0 : _b.shipping_option_id) || void 0,
+            disabled: !locationId || !shippingProfileId || isPending
+          }
+        ) })
+      }
+    )
+  ] });
+};
+const LOCAL_STORAGE_KEY = "draft_order_shipping";
+const getLocalStorageShippingInformation = () => {
+  const shippingInformation = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return shippingInformation ? JSON.parse(shippingInformation) : null;
+};
+const updateLocalStorageShippingInformation = (shipping) => {
+  const shippingInformation = getLocalStorageShippingInformation();
+  if (!shippingInformation) {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(shipping));
+    return;
+  }
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY,
+    JSON.stringify({
+      ...shippingInformation,
+      ...shipping
+    })
+  );
+};
+function clearLocalStorageShippingInformation() {
+  localStorage.removeItem(LOCAL_STORAGE_KEY);
+}
+const schema = z.object({
+  shipping_profile_id: z.string(),
+  location_id: z.string()
+});
+export {
+  Shipping as default
+};