@medusajs/draft-order 0.0.1 → 0.0.2

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

@@ -1,465 +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 { 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
-};