@medusajs/draft-order 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.medusa/server/src/admin/components/common/action-menu.js +77 -0
- package/.medusa/server/src/admin/components/common/conditional-tooltip.js +15 -0
- package/.medusa/server/src/admin/components/common/data-table.js +249 -0
- package/.medusa/server/src/admin/components/common/form.js +151 -0
- package/.medusa/server/src/admin/components/common/inline-tip.js +42 -0
- package/.medusa/server/src/admin/components/common/keybound-form.js +32 -0
- package/.medusa/server/src/admin/components/common/page-skeleton.js +51 -0
- package/.medusa/server/src/admin/components/common/thumbnail.js +15 -0
- package/.medusa/server/src/admin/components/draft-orders/activity-section.js +205 -0
- package/.medusa/server/src/admin/components/draft-orders/customer-section.js +165 -0
- package/.medusa/server/src/admin/components/draft-orders/general-section.js +36 -0
- package/.medusa/server/src/admin/components/draft-orders/json-view-section.js +140 -0
- package/.medusa/server/src/admin/components/draft-orders/metadata-section.js +28 -0
- package/.medusa/server/src/admin/components/draft-orders/shipping-section.js +211 -0
- package/.medusa/server/src/admin/components/draft-orders/summary-section.js +148 -0
- package/.medusa/server/src/admin/components/inputs/combobox.js +311 -0
- package/.medusa/server/src/admin/components/inputs/country-select.js +59 -0
- package/.medusa/server/src/admin/components/inputs/number-input.js +100 -0
- package/.medusa/server/src/admin/components/inputs/switch-block.js +30 -0
- package/.medusa/server/src/admin/components/modals/index.js +19 -0
- package/.medusa/server/src/admin/components/modals/route-drawer/index.js +4 -0
- package/.medusa/server/src/admin/components/modals/route-drawer/route-drawer.js +57 -0
- package/.medusa/server/src/admin/components/modals/route-focus-modal/index.js +4 -0
- package/.medusa/server/src/admin/components/modals/route-focus-modal/route-focus-modal.js +71 -0
- package/.medusa/server/src/admin/components/modals/route-modal-form/index.js +4 -0
- package/.medusa/server/src/admin/components/modals/route-modal-form/route-modal-form.js +60 -0
- package/.medusa/server/src/admin/components/modals/route-modal-provider/index.js +6 -0
- package/.medusa/server/src/admin/components/modals/route-modal-provider/route-modal-context.js +5 -0
- package/.medusa/server/src/admin/components/modals/route-modal-provider/route-provider.js +30 -0
- package/.medusa/server/src/admin/components/modals/route-modal-provider/use-route-modal.js +12 -0
- package/.medusa/server/src/admin/components/modals/stacked-drawer/index.js +5 -0
- package/.medusa/server/src/admin/components/modals/stacked-drawer/stacked-drawer.js +55 -0
- package/.medusa/server/src/admin/components/modals/stacked-focus-modal/index.js +5 -0
- package/.medusa/server/src/admin/components/modals/stacked-focus-modal/stacked-focus-modal.js +63 -0
- package/.medusa/server/src/admin/components/modals/stacked-modal-provider/index.js +6 -0
- package/.medusa/server/src/admin/components/modals/stacked-modal-provider/stacked-modal-context.js +5 -0
- package/.medusa/server/src/admin/components/modals/stacked-modal-provider/stacked-modal-provider.js +47 -0
- package/.medusa/server/src/admin/components/modals/stacked-modal-provider/use-stacked-modal.js +14 -0
- package/.medusa/server/src/admin/components/utilities/generic-forward-ref.js +7 -0
- package/.medusa/server/src/admin/hooks/api/customers.js +53 -0
- package/.medusa/server/src/admin/hooks/api/draft-orders.js +161 -0
- package/.medusa/server/src/admin/hooks/api/orders.js +274 -0
- package/.medusa/server/src/admin/hooks/api/product-variants.js +21 -0
- package/.medusa/server/src/admin/hooks/api/regions.js +35 -0
- package/.medusa/server/src/admin/hooks/api/sales-channels.js +35 -0
- package/.medusa/server/src/admin/hooks/api/shipping-options.js +35 -0
- package/.medusa/server/src/admin/hooks/api/users.js +26 -0
- package/.medusa/server/src/admin/hooks/common/use-combobox-data.js +61 -0
- package/.medusa/server/src/admin/hooks/common/use-data-table-date-filters.js +89 -0
- package/.medusa/server/src/admin/hooks/common/use-debounced-search.js +22 -0
- package/.medusa/server/src/admin/hooks/common/use-query-params.js +14 -0
- package/.medusa/server/src/admin/hooks/order-edits/use-cancel-order-edit.js +25 -0
- package/.medusa/server/src/admin/hooks/order-edits/use-initiate-order-edit.js +39 -0
- package/.medusa/server/src/admin/lib/data/countries.js +1762 -0
- package/.medusa/server/src/admin/lib/data/currencies.js +36 -0
- package/.medusa/server/src/admin/lib/queries/draft-order-details.js +1 -0
- package/.medusa/server/src/admin/lib/queries/sdk.js +10 -0
- package/.medusa/server/src/admin/lib/schemas/address.js +16 -0
- package/.medusa/server/src/admin/lib/utils/address-utils.js +57 -0
- package/.medusa/server/src/admin/lib/utils/date-utils.js +27 -0
- package/.medusa/server/src/admin/lib/utils/order-utils.js +13 -0
- package/.medusa/server/src/admin/routes/draft-orders/@create/page.js +659 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@billing-address/page.js +228 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@custom-items/page.js +38 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@email/page.js +89 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@items/page.js +576 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@metadata/page.js +338 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@promotions/page.js +70 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@sales-channel/page.js +113 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@shipping/page.js +465 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/@shipping-address/page.js +241 -0
- package/.medusa/server/src/admin/routes/draft-orders/_id_/page.js +70 -0
- package/.medusa/server/src/admin/routes/draft-orders/page.js +148 -0
- package/.medusa/server/src/api/admin/draft-orders/[id]/convert/route.js +18 -0
- package/.medusa/server/src/types/http/draft-orders/payloads.js +3 -0
- package/.medusa/server/src/types/http/draft-orders/responses.js +3 -0
- package/.medusa/server/src/types/http/orders/entity.js +3 -0
- package/.medusa/server/src/types/http/orders/requests.js +3 -0
- package/.medusa/server/src/workflows/draft-orders/convert-draft-order-workflow.js +54 -0
- package/.medusa/server/tailwind.config.js +12 -0
- package/README.md +64 -0
- package/package.json +104 -0
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useRef, useImperativeHandle } from "react";
|
|
3
|
+
import { TrianglesMini } from "@medusajs/icons";
|
|
4
|
+
import { clx } from "@medusajs/ui";
|
|
5
|
+
import { countries } from "../../lib/data/countries.js";
|
|
6
|
+
const CountrySelect = forwardRef(
|
|
7
|
+
({ className, disabled, placeholder, value, defaultValue, ...props }, ref) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const innerRef = useRef(null);
|
|
10
|
+
useImperativeHandle(ref, () => innerRef.current);
|
|
11
|
+
const isPlaceholder = ((_a = innerRef.current) == null ? void 0 : _a.value) === "";
|
|
12
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
13
|
+
/* @__PURE__ */ jsx(
|
|
14
|
+
TrianglesMini,
|
|
15
|
+
{
|
|
16
|
+
className: clx(
|
|
17
|
+
"text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
|
|
18
|
+
{
|
|
19
|
+
"text-ui-fg-disabled": disabled
|
|
20
|
+
}
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
),
|
|
24
|
+
/* @__PURE__ */ jsxs(
|
|
25
|
+
"select",
|
|
26
|
+
{
|
|
27
|
+
value: value !== void 0 ? value.toLowerCase() : void 0,
|
|
28
|
+
defaultValue: defaultValue ? defaultValue.toLowerCase() : void 0,
|
|
29
|
+
disabled,
|
|
30
|
+
className: clx(
|
|
31
|
+
"bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
|
|
32
|
+
"placeholder:text-ui-fg-muted text-ui-fg-base",
|
|
33
|
+
"hover:bg-ui-bg-field-hover",
|
|
34
|
+
"focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
|
|
35
|
+
"aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
|
|
36
|
+
"invalid::border-ui-border-error invalid:shadow-borders-error",
|
|
37
|
+
"disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
|
|
38
|
+
{
|
|
39
|
+
"text-ui-fg-muted": isPlaceholder
|
|
40
|
+
},
|
|
41
|
+
className
|
|
42
|
+
),
|
|
43
|
+
...props,
|
|
44
|
+
ref: innerRef,
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ jsx("option", { value: "", disabled: true, className: "text-ui-fg-muted", children: placeholder || "Select country" }),
|
|
47
|
+
countries.map((country) => {
|
|
48
|
+
return /* @__PURE__ */ jsx("option", { value: country.iso_2.toLowerCase(), children: country.display_name }, country.iso_2);
|
|
49
|
+
})
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
] });
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
CountrySelect.displayName = "CountrySelect";
|
|
57
|
+
export {
|
|
58
|
+
CountrySelect
|
|
59
|
+
};
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Minus, Plus } from "@medusajs/icons";
|
|
3
|
+
import { clx } from "@medusajs/ui";
|
|
4
|
+
function NumberInput({
|
|
5
|
+
value,
|
|
6
|
+
onChange,
|
|
7
|
+
min = 0,
|
|
8
|
+
max = 100,
|
|
9
|
+
step = 1,
|
|
10
|
+
className,
|
|
11
|
+
disabled,
|
|
12
|
+
...props
|
|
13
|
+
}) {
|
|
14
|
+
const handleChange = (event) => {
|
|
15
|
+
const newValue = event.target.value === "" ? min : Number(event.target.value);
|
|
16
|
+
if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
|
|
17
|
+
onChange(newValue);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
const handleIncrement = () => {
|
|
21
|
+
const newValue = value + step;
|
|
22
|
+
if (max === void 0 || newValue <= max) {
|
|
23
|
+
onChange(newValue);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
const handleDecrement = () => {
|
|
27
|
+
const newValue = value - step;
|
|
28
|
+
if (min === void 0 || newValue >= min) {
|
|
29
|
+
onChange(newValue);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
return /* @__PURE__ */ jsxs(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
className: clx(
|
|
36
|
+
"inline-flex h-7 rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
|
|
37
|
+
"[&:has(input:focus)]:shadow-borders-interactive-with-active",
|
|
38
|
+
className
|
|
39
|
+
),
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsx(
|
|
42
|
+
"input",
|
|
43
|
+
{
|
|
44
|
+
type: "number",
|
|
45
|
+
value,
|
|
46
|
+
onChange: handleChange,
|
|
47
|
+
min,
|
|
48
|
+
max,
|
|
49
|
+
step,
|
|
50
|
+
className: clx(
|
|
51
|
+
"flex-1 px-2 py-1 bg-transparent txt-compact-small text-ui-fg-base outline-none [appearance:textfield]",
|
|
52
|
+
"[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
|
|
53
|
+
"placeholder:text-ui-fg-muted"
|
|
54
|
+
),
|
|
55
|
+
...props
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ jsxs(
|
|
59
|
+
"button",
|
|
60
|
+
{
|
|
61
|
+
className: clx(
|
|
62
|
+
"size-7 flex items-center justify-center outline-none transition-fg",
|
|
63
|
+
"disabled:cursor-not-allowed disabled:text-ui-fg-muted",
|
|
64
|
+
"focus:bg-ui-bg-field-component-hover",
|
|
65
|
+
"hover:bg-ui-bg-field-component-hover"
|
|
66
|
+
),
|
|
67
|
+
type: "button",
|
|
68
|
+
onClick: handleDecrement,
|
|
69
|
+
disabled: min !== void 0 && value <= min || disabled,
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ jsx(Minus, {}),
|
|
72
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ jsxs(
|
|
77
|
+
"button",
|
|
78
|
+
{
|
|
79
|
+
className: clx(
|
|
80
|
+
"size-7 flex items-center justify-center outline-none transition-fg",
|
|
81
|
+
"disabled:cursor-not-allowed disabled:text-ui-fg-muted",
|
|
82
|
+
"focus:bg-ui-bg-field-hover",
|
|
83
|
+
"hover:bg-ui-bg-field-hover"
|
|
84
|
+
),
|
|
85
|
+
type: "button",
|
|
86
|
+
onClick: handleIncrement,
|
|
87
|
+
disabled: max !== void 0 && value >= max || disabled,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(Plus, {}),
|
|
90
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: `Increase by ${step}` })
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
)
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
export {
|
|
99
|
+
NumberInput
|
|
100
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Switch } from "@medusajs/ui";
|
|
3
|
+
import { Form } from "../common/form.js";
|
|
4
|
+
const SwitchBlock = (props) => {
|
|
5
|
+
return /* @__PURE__ */ jsx(
|
|
6
|
+
Form.Field,
|
|
7
|
+
{
|
|
8
|
+
name: props.name,
|
|
9
|
+
control: props.control,
|
|
10
|
+
render: ({ field: { value, onChange, ...field } }) => /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 bg-ui-bg-component shadow-elevation-card-rest rounded-lg p-3", children: [
|
|
11
|
+
/* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
|
|
12
|
+
Switch,
|
|
13
|
+
{
|
|
14
|
+
size: "small",
|
|
15
|
+
checked: value,
|
|
16
|
+
onCheckedChange: onChange,
|
|
17
|
+
...field
|
|
18
|
+
}
|
|
19
|
+
) }),
|
|
20
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
|
|
21
|
+
/* @__PURE__ */ jsx(Form.Label, { children: props.label }),
|
|
22
|
+
/* @__PURE__ */ jsx(Form.Hint, { children: props.description })
|
|
23
|
+
] })
|
|
24
|
+
] }) })
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
export {
|
|
29
|
+
SwitchBlock
|
|
30
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { RouteDrawer } from "./route-drawer/route-drawer.js";
|
|
2
|
+
import { RouteFocusModal } from "./route-focus-modal/route-focus-modal.js";
|
|
3
|
+
import "react/jsx-runtime";
|
|
4
|
+
import "react";
|
|
5
|
+
import "react-router-dom";
|
|
6
|
+
import "./route-modal-provider/route-modal-context.js";
|
|
7
|
+
import { useRouteModal } from "./route-modal-provider/use-route-modal.js";
|
|
8
|
+
import { StackedDrawer } from "./stacked-drawer/stacked-drawer.js";
|
|
9
|
+
import { StackedFocusModal } from "./stacked-focus-modal/stacked-focus-modal.js";
|
|
10
|
+
import "./stacked-modal-provider/stacked-modal-context.js";
|
|
11
|
+
import { useStackedModal } from "./stacked-modal-provider/use-stacked-modal.js";
|
|
12
|
+
export {
|
|
13
|
+
RouteDrawer,
|
|
14
|
+
RouteFocusModal,
|
|
15
|
+
StackedDrawer,
|
|
16
|
+
StackedFocusModal,
|
|
17
|
+
useRouteModal,
|
|
18
|
+
useStackedModal
|
|
19
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Drawer, clx } from "@medusajs/ui";
|
|
3
|
+
import { useState, useEffect } from "react";
|
|
4
|
+
import { useNavigate } from "react-router-dom";
|
|
5
|
+
import { RouteModalForm } from "../route-modal-form/route-modal-form.js";
|
|
6
|
+
import { RouteModalProvider } from "../route-modal-provider/route-provider.js";
|
|
7
|
+
import { StackedModalProvider } from "../stacked-modal-provider/stacked-modal-provider.js";
|
|
8
|
+
import "../stacked-modal-provider/stacked-modal-context.js";
|
|
9
|
+
const Root = ({ prev = "..", children }) => {
|
|
10
|
+
const navigate = useNavigate();
|
|
11
|
+
const [open, setOpen] = useState(false);
|
|
12
|
+
const [stackedModalOpen, onStackedModalOpen] = useState(false);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
setOpen(true);
|
|
15
|
+
return () => {
|
|
16
|
+
setOpen(false);
|
|
17
|
+
onStackedModalOpen(false);
|
|
18
|
+
};
|
|
19
|
+
}, []);
|
|
20
|
+
const handleOpenChange = (open2) => {
|
|
21
|
+
if (!open2) {
|
|
22
|
+
document.body.style.pointerEvents = "auto";
|
|
23
|
+
navigate(prev, { replace: true });
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
setOpen(open2);
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(RouteModalProvider, { prev, children: /* @__PURE__ */ jsx(StackedModalProvider, { onOpenChange: onStackedModalOpen, children: /* @__PURE__ */ jsx(
|
|
29
|
+
Drawer.Content,
|
|
30
|
+
{
|
|
31
|
+
"aria-describedby": void 0,
|
|
32
|
+
className: clx({
|
|
33
|
+
"!bg-ui-bg-disabled !inset-y-5 !right-5": stackedModalOpen
|
|
34
|
+
}),
|
|
35
|
+
children
|
|
36
|
+
}
|
|
37
|
+
) }) }) });
|
|
38
|
+
};
|
|
39
|
+
const Header = Drawer.Header;
|
|
40
|
+
const Title = Drawer.Title;
|
|
41
|
+
const Description = Drawer.Description;
|
|
42
|
+
const Body = Drawer.Body;
|
|
43
|
+
const Footer = Drawer.Footer;
|
|
44
|
+
const Close = Drawer.Close;
|
|
45
|
+
const Form = RouteModalForm;
|
|
46
|
+
const RouteDrawer = Object.assign(Root, {
|
|
47
|
+
Header,
|
|
48
|
+
Title,
|
|
49
|
+
Body,
|
|
50
|
+
Description,
|
|
51
|
+
Footer,
|
|
52
|
+
Close,
|
|
53
|
+
Form
|
|
54
|
+
});
|
|
55
|
+
export {
|
|
56
|
+
RouteDrawer
|
|
57
|
+
};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FocusModal, clx } from "@medusajs/ui";
|
|
3
|
+
import { useState, useEffect } from "react";
|
|
4
|
+
import { useNavigate } from "react-router-dom";
|
|
5
|
+
import { RouteModalForm } from "../route-modal-form/route-modal-form.js";
|
|
6
|
+
import { RouteModalProvider } from "../route-modal-provider/route-provider.js";
|
|
7
|
+
import { useRouteModal } from "../route-modal-provider/use-route-modal.js";
|
|
8
|
+
import { StackedModalProvider } from "../stacked-modal-provider/stacked-modal-provider.js";
|
|
9
|
+
import "../stacked-modal-provider/stacked-modal-context.js";
|
|
10
|
+
const Root = ({ prev = "..", onClose, children }) => {
|
|
11
|
+
const navigate = useNavigate();
|
|
12
|
+
const [open, setOpen] = useState(false);
|
|
13
|
+
const [stackedModalOpen, onStackedModalOpen] = useState(false);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
setOpen(true);
|
|
16
|
+
return () => {
|
|
17
|
+
setOpen(false);
|
|
18
|
+
onStackedModalOpen(false);
|
|
19
|
+
};
|
|
20
|
+
}, []);
|
|
21
|
+
const handleOpenChange = async (open2) => {
|
|
22
|
+
if (!open2) {
|
|
23
|
+
if (onClose) {
|
|
24
|
+
const ret = await onClose();
|
|
25
|
+
if (!ret) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
document.body.style.pointerEvents = "auto";
|
|
30
|
+
navigate(prev, { replace: true });
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
setOpen(open2);
|
|
34
|
+
};
|
|
35
|
+
return /* @__PURE__ */ jsx(FocusModal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(RouteModalProvider, { prev, children: /* @__PURE__ */ jsx(StackedModalProvider, { onOpenChange: onStackedModalOpen, children: /* @__PURE__ */ jsx(Content, { stackedModalOpen, children }) }) }) });
|
|
36
|
+
};
|
|
37
|
+
const Content = ({ stackedModalOpen, children }) => {
|
|
38
|
+
const { __internal } = useRouteModal();
|
|
39
|
+
const shouldPreventClose = !__internal.closeOnEscape;
|
|
40
|
+
return /* @__PURE__ */ jsx(
|
|
41
|
+
FocusModal.Content,
|
|
42
|
+
{
|
|
43
|
+
onEscapeKeyDown: shouldPreventClose ? (e) => {
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
} : void 0,
|
|
46
|
+
className: clx({
|
|
47
|
+
"!bg-ui-bg-disabled !inset-x-5 !inset-y-3": stackedModalOpen
|
|
48
|
+
}),
|
|
49
|
+
children
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
};
|
|
53
|
+
const Header = FocusModal.Header;
|
|
54
|
+
const Title = FocusModal.Title;
|
|
55
|
+
const Description = FocusModal.Description;
|
|
56
|
+
const Footer = FocusModal.Footer;
|
|
57
|
+
const Body = FocusModal.Body;
|
|
58
|
+
const Close = FocusModal.Close;
|
|
59
|
+
const Form = RouteModalForm;
|
|
60
|
+
const RouteFocusModal = Object.assign(Root, {
|
|
61
|
+
Header,
|
|
62
|
+
Title,
|
|
63
|
+
Body,
|
|
64
|
+
Description,
|
|
65
|
+
Footer,
|
|
66
|
+
Close,
|
|
67
|
+
Form
|
|
68
|
+
});
|
|
69
|
+
export {
|
|
70
|
+
RouteFocusModal
|
|
71
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Prompt } from "@medusajs/ui";
|
|
3
|
+
import { useBlocker } from "react-router-dom";
|
|
4
|
+
import { Form } from "../../common/form.js";
|
|
5
|
+
const RouteModalForm = ({
|
|
6
|
+
form,
|
|
7
|
+
blockSearchParams: blockSearch = false,
|
|
8
|
+
children,
|
|
9
|
+
onClose
|
|
10
|
+
}) => {
|
|
11
|
+
const {
|
|
12
|
+
formState: { isDirty }
|
|
13
|
+
} = form;
|
|
14
|
+
const blocker = useBlocker(({ currentLocation, nextLocation }) => {
|
|
15
|
+
const { isSubmitSuccessful } = nextLocation.state || {};
|
|
16
|
+
if (isSubmitSuccessful) {
|
|
17
|
+
onClose == null ? void 0 : onClose(true);
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
const isPathChanged = currentLocation.pathname !== nextLocation.pathname;
|
|
21
|
+
const isSearchChanged = currentLocation.search !== nextLocation.search;
|
|
22
|
+
if (blockSearch) {
|
|
23
|
+
const ret2 = isDirty && (isPathChanged || isSearchChanged);
|
|
24
|
+
if (!ret2) {
|
|
25
|
+
onClose == null ? void 0 : onClose(isSubmitSuccessful);
|
|
26
|
+
}
|
|
27
|
+
return ret2;
|
|
28
|
+
}
|
|
29
|
+
const ret = isDirty && isPathChanged;
|
|
30
|
+
if (!ret) {
|
|
31
|
+
onClose == null ? void 0 : onClose(isSubmitSuccessful);
|
|
32
|
+
}
|
|
33
|
+
return ret;
|
|
34
|
+
});
|
|
35
|
+
const handleCancel = () => {
|
|
36
|
+
var _a;
|
|
37
|
+
(_a = blocker == null ? void 0 : blocker.reset) == null ? void 0 : _a.call(blocker);
|
|
38
|
+
};
|
|
39
|
+
const handleContinue = () => {
|
|
40
|
+
var _a;
|
|
41
|
+
(_a = blocker == null ? void 0 : blocker.proceed) == null ? void 0 : _a.call(blocker);
|
|
42
|
+
onClose == null ? void 0 : onClose(false);
|
|
43
|
+
};
|
|
44
|
+
return /* @__PURE__ */ jsxs(Form, { ...form, children: [
|
|
45
|
+
children,
|
|
46
|
+
/* @__PURE__ */ jsx(Prompt, { open: blocker.state === "blocked", variant: "confirmation", children: /* @__PURE__ */ jsxs(Prompt.Content, { children: [
|
|
47
|
+
/* @__PURE__ */ jsxs(Prompt.Header, { children: [
|
|
48
|
+
/* @__PURE__ */ jsx(Prompt.Title, { children: "Unsaved Changes" }),
|
|
49
|
+
/* @__PURE__ */ jsx(Prompt.Description, { children: "You have unsaved changes. Are you sure you want to leave?" })
|
|
50
|
+
] }),
|
|
51
|
+
/* @__PURE__ */ jsxs(Prompt.Footer, { children: [
|
|
52
|
+
/* @__PURE__ */ jsx(Prompt.Cancel, { onClick: handleCancel, type: "button", children: "Cancel" }),
|
|
53
|
+
/* @__PURE__ */ jsx(Prompt.Action, { onClick: handleContinue, type: "button", children: "Continue" })
|
|
54
|
+
] })
|
|
55
|
+
] }) })
|
|
56
|
+
] });
|
|
57
|
+
};
|
|
58
|
+
export {
|
|
59
|
+
RouteModalForm
|
|
60
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useCallback, useMemo } from "react";
|
|
3
|
+
import { useNavigate } from "react-router-dom";
|
|
4
|
+
import { RouteModalProviderContext } from "./route-modal-context.js";
|
|
5
|
+
const RouteModalProvider = ({
|
|
6
|
+
prev,
|
|
7
|
+
children
|
|
8
|
+
}) => {
|
|
9
|
+
const navigate = useNavigate();
|
|
10
|
+
const [closeOnEscape, setCloseOnEscape] = useState(true);
|
|
11
|
+
const handleSuccess = useCallback(
|
|
12
|
+
(path) => {
|
|
13
|
+
const to = path || prev;
|
|
14
|
+
navigate(to, { replace: true, state: { isSubmitSuccessful: true } });
|
|
15
|
+
},
|
|
16
|
+
[navigate, prev]
|
|
17
|
+
);
|
|
18
|
+
const value = useMemo(
|
|
19
|
+
() => ({
|
|
20
|
+
handleSuccess,
|
|
21
|
+
setCloseOnEscape,
|
|
22
|
+
__internal: { closeOnEscape }
|
|
23
|
+
}),
|
|
24
|
+
[handleSuccess, setCloseOnEscape, closeOnEscape]
|
|
25
|
+
);
|
|
26
|
+
return /* @__PURE__ */ jsx(RouteModalProviderContext.Provider, { value, children });
|
|
27
|
+
};
|
|
28
|
+
export {
|
|
29
|
+
RouteModalProvider
|
|
30
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useContext } from "react";
|
|
2
|
+
import { RouteModalProviderContext } from "./route-modal-context.js";
|
|
3
|
+
const useRouteModal = () => {
|
|
4
|
+
const context = useContext(RouteModalProviderContext);
|
|
5
|
+
if (!context) {
|
|
6
|
+
throw new Error("useRouteModal must be used within a RouteModalProvider");
|
|
7
|
+
}
|
|
8
|
+
return context;
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
useRouteModal
|
|
12
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Drawer, clx } from "@medusajs/ui";
|
|
3
|
+
import { forwardRef, useEffect } from "react";
|
|
4
|
+
import "../stacked-modal-provider/stacked-modal-context.js";
|
|
5
|
+
import { useStackedModal } from "../stacked-modal-provider/use-stacked-modal.js";
|
|
6
|
+
const Root = ({ id, children }) => {
|
|
7
|
+
const { register, unregister, getIsOpen, setIsOpen } = useStackedModal();
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
register(id);
|
|
10
|
+
return () => unregister(id);
|
|
11
|
+
}, []);
|
|
12
|
+
return /* @__PURE__ */ jsx(Drawer, { open: getIsOpen(id), onOpenChange: (open) => setIsOpen(id, open), children });
|
|
13
|
+
};
|
|
14
|
+
const Close = Drawer.Close;
|
|
15
|
+
Close.displayName = "StackedDrawer.Close";
|
|
16
|
+
const Header = Drawer.Header;
|
|
17
|
+
Header.displayName = "StackedDrawer.Header";
|
|
18
|
+
const Body = Drawer.Body;
|
|
19
|
+
Body.displayName = "StackedDrawer.Body";
|
|
20
|
+
const Trigger = Drawer.Trigger;
|
|
21
|
+
Trigger.displayName = "StackedDrawer.Trigger";
|
|
22
|
+
const Footer = Drawer.Footer;
|
|
23
|
+
Footer.displayName = "StackedDrawer.Footer";
|
|
24
|
+
const Title = Drawer.Title;
|
|
25
|
+
Title.displayName = "StackedDrawer.Title";
|
|
26
|
+
const Description = Drawer.Description;
|
|
27
|
+
Description.displayName = "StackedDrawer.Description";
|
|
28
|
+
const Content = forwardRef(({ className, ...props }, ref) => {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
Drawer.Content,
|
|
31
|
+
{
|
|
32
|
+
ref,
|
|
33
|
+
className: clx(className),
|
|
34
|
+
overlayProps: {
|
|
35
|
+
className: "bg-transparent"
|
|
36
|
+
},
|
|
37
|
+
...props
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
});
|
|
41
|
+
Content.displayName = "StackedDrawer.Content";
|
|
42
|
+
const StackedDrawer = Object.assign(Root, {
|
|
43
|
+
Close,
|
|
44
|
+
Header,
|
|
45
|
+
Body,
|
|
46
|
+
Content,
|
|
47
|
+
Trigger,
|
|
48
|
+
Footer,
|
|
49
|
+
Description,
|
|
50
|
+
Title
|
|
51
|
+
});
|
|
52
|
+
export {
|
|
53
|
+
Root,
|
|
54
|
+
StackedDrawer
|
|
55
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FocusModal, clx } from "@medusajs/ui";
|
|
3
|
+
import { forwardRef, useEffect } from "react";
|
|
4
|
+
import "../stacked-modal-provider/stacked-modal-context.js";
|
|
5
|
+
import { useStackedModal } from "../stacked-modal-provider/use-stacked-modal.js";
|
|
6
|
+
const Root = ({
|
|
7
|
+
id,
|
|
8
|
+
onOpenChangeCallback,
|
|
9
|
+
children
|
|
10
|
+
}) => {
|
|
11
|
+
const { register, unregister, getIsOpen, setIsOpen } = useStackedModal();
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
register(id);
|
|
14
|
+
return () => unregister(id);
|
|
15
|
+
}, []);
|
|
16
|
+
const handleOpenChange = (open) => {
|
|
17
|
+
setIsOpen(id, open);
|
|
18
|
+
onOpenChangeCallback == null ? void 0 : onOpenChangeCallback(open);
|
|
19
|
+
};
|
|
20
|
+
return /* @__PURE__ */ jsx(FocusModal, { open: getIsOpen(id), onOpenChange: handleOpenChange, children });
|
|
21
|
+
};
|
|
22
|
+
const Close = FocusModal.Close;
|
|
23
|
+
Close.displayName = "StackedFocusModal.Close";
|
|
24
|
+
const Header = FocusModal.Header;
|
|
25
|
+
Header.displayName = "StackedFocusModal.Header";
|
|
26
|
+
const Body = FocusModal.Body;
|
|
27
|
+
Body.displayName = "StackedFocusModal.Body";
|
|
28
|
+
const Trigger = FocusModal.Trigger;
|
|
29
|
+
Trigger.displayName = "StackedFocusModal.Trigger";
|
|
30
|
+
const Footer = FocusModal.Footer;
|
|
31
|
+
Footer.displayName = "StackedFocusModal.Footer";
|
|
32
|
+
const Title = FocusModal.Title;
|
|
33
|
+
Title.displayName = "StackedFocusModal.Title";
|
|
34
|
+
const Description = FocusModal.Description;
|
|
35
|
+
Description.displayName = "StackedFocusModal.Description";
|
|
36
|
+
const Content = forwardRef(({ className, ...props }, ref) => {
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
FocusModal.Content,
|
|
39
|
+
{
|
|
40
|
+
ref,
|
|
41
|
+
className: clx("!top-6", className),
|
|
42
|
+
overlayProps: {
|
|
43
|
+
className: "bg-transparent"
|
|
44
|
+
},
|
|
45
|
+
...props
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
});
|
|
49
|
+
Content.displayName = "StackedFocusModal.Content";
|
|
50
|
+
const StackedFocusModal = Object.assign(Root, {
|
|
51
|
+
Close,
|
|
52
|
+
Header,
|
|
53
|
+
Body,
|
|
54
|
+
Content,
|
|
55
|
+
Trigger,
|
|
56
|
+
Footer,
|
|
57
|
+
Description,
|
|
58
|
+
Title
|
|
59
|
+
});
|
|
60
|
+
export {
|
|
61
|
+
Root,
|
|
62
|
+
StackedFocusModal
|
|
63
|
+
};
|
package/.medusa/server/src/admin/components/modals/stacked-modal-provider/stacked-modal-provider.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { StackedModalContext } from "./stacked-modal-context.js";
|
|
4
|
+
const StackedModalProvider = ({
|
|
5
|
+
children,
|
|
6
|
+
onOpenChange
|
|
7
|
+
}) => {
|
|
8
|
+
const [state, setState] = useState({});
|
|
9
|
+
const getIsOpen = (id) => {
|
|
10
|
+
return state[id] || false;
|
|
11
|
+
};
|
|
12
|
+
const setIsOpen = (id, open) => {
|
|
13
|
+
setState((prevState) => ({
|
|
14
|
+
...prevState,
|
|
15
|
+
[id]: open
|
|
16
|
+
}));
|
|
17
|
+
onOpenChange(open);
|
|
18
|
+
};
|
|
19
|
+
const register = (id) => {
|
|
20
|
+
setState((prevState) => ({
|
|
21
|
+
...prevState,
|
|
22
|
+
[id]: false
|
|
23
|
+
}));
|
|
24
|
+
};
|
|
25
|
+
const unregister = (id) => {
|
|
26
|
+
setState((prevState) => {
|
|
27
|
+
const newState = { ...prevState };
|
|
28
|
+
delete newState[id];
|
|
29
|
+
return newState;
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
StackedModalContext.Provider,
|
|
34
|
+
{
|
|
35
|
+
value: {
|
|
36
|
+
getIsOpen,
|
|
37
|
+
setIsOpen,
|
|
38
|
+
register,
|
|
39
|
+
unregister
|
|
40
|
+
},
|
|
41
|
+
children
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
StackedModalProvider
|
|
47
|
+
};
|