@medusajs/draft-order 2.10.0-snapshot-20250827190245 → 2.10.0-snapshot-20250828074017
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/index.js +516 -516
- package/.medusa/server/src/admin/index.mjs +516 -516
- package/package.json +16 -16
|
@@ -9554,6 +9554,196 @@ const ID = () => {
|
|
|
9554
9554
|
/* @__PURE__ */ jsx(Outlet, {})
|
|
9555
9555
|
] });
|
|
9556
9556
|
};
|
|
9557
|
+
const BillingAddress = () => {
|
|
9558
|
+
const { id } = useParams();
|
|
9559
|
+
const { order, isPending, isError, error } = useOrder(id, {
|
|
9560
|
+
fields: "+billing_address"
|
|
9561
|
+
});
|
|
9562
|
+
if (isError) {
|
|
9563
|
+
throw error;
|
|
9564
|
+
}
|
|
9565
|
+
const isReady = !isPending && !!order;
|
|
9566
|
+
return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
|
|
9567
|
+
/* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
|
|
9568
|
+
/* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
|
|
9569
|
+
/* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
|
|
9570
|
+
] }),
|
|
9571
|
+
isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
|
|
9572
|
+
] });
|
|
9573
|
+
};
|
|
9574
|
+
const BillingAddressForm = ({ order }) => {
|
|
9575
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
9576
|
+
const form = useForm({
|
|
9577
|
+
defaultValues: {
|
|
9578
|
+
first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
|
|
9579
|
+
last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
|
|
9580
|
+
company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
|
|
9581
|
+
address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
|
|
9582
|
+
address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
|
|
9583
|
+
city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
|
|
9584
|
+
province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
|
|
9585
|
+
country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
|
|
9586
|
+
postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
|
|
9587
|
+
phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
|
|
9588
|
+
},
|
|
9589
|
+
resolver: zodResolver(schema$5)
|
|
9590
|
+
});
|
|
9591
|
+
const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
|
|
9592
|
+
const { handleSuccess } = useRouteModal();
|
|
9593
|
+
const onSubmit = form.handleSubmit(async (data) => {
|
|
9594
|
+
await mutateAsync(
|
|
9595
|
+
{ billing_address: data },
|
|
9596
|
+
{
|
|
9597
|
+
onSuccess: () => {
|
|
9598
|
+
handleSuccess();
|
|
9599
|
+
},
|
|
9600
|
+
onError: (error) => {
|
|
9601
|
+
toast.error(error.message);
|
|
9602
|
+
}
|
|
9603
|
+
}
|
|
9604
|
+
);
|
|
9605
|
+
});
|
|
9606
|
+
return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
|
|
9607
|
+
KeyboundForm,
|
|
9608
|
+
{
|
|
9609
|
+
className: "flex flex-1 flex-col overflow-hidden",
|
|
9610
|
+
onSubmit,
|
|
9611
|
+
children: [
|
|
9612
|
+
/* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
|
|
9613
|
+
/* @__PURE__ */ jsx(
|
|
9614
|
+
Form$2.Field,
|
|
9615
|
+
{
|
|
9616
|
+
control: form.control,
|
|
9617
|
+
name: "country_code",
|
|
9618
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9619
|
+
/* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
|
|
9620
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
|
|
9621
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9622
|
+
] })
|
|
9623
|
+
}
|
|
9624
|
+
),
|
|
9625
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
9626
|
+
/* @__PURE__ */ jsx(
|
|
9627
|
+
Form$2.Field,
|
|
9628
|
+
{
|
|
9629
|
+
control: form.control,
|
|
9630
|
+
name: "first_name",
|
|
9631
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9632
|
+
/* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
|
|
9633
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9634
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9635
|
+
] })
|
|
9636
|
+
}
|
|
9637
|
+
),
|
|
9638
|
+
/* @__PURE__ */ jsx(
|
|
9639
|
+
Form$2.Field,
|
|
9640
|
+
{
|
|
9641
|
+
control: form.control,
|
|
9642
|
+
name: "last_name",
|
|
9643
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9644
|
+
/* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
|
|
9645
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9646
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9647
|
+
] })
|
|
9648
|
+
}
|
|
9649
|
+
)
|
|
9650
|
+
] }),
|
|
9651
|
+
/* @__PURE__ */ jsx(
|
|
9652
|
+
Form$2.Field,
|
|
9653
|
+
{
|
|
9654
|
+
control: form.control,
|
|
9655
|
+
name: "company",
|
|
9656
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9657
|
+
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
|
|
9658
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9659
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9660
|
+
] })
|
|
9661
|
+
}
|
|
9662
|
+
),
|
|
9663
|
+
/* @__PURE__ */ jsx(
|
|
9664
|
+
Form$2.Field,
|
|
9665
|
+
{
|
|
9666
|
+
control: form.control,
|
|
9667
|
+
name: "address_1",
|
|
9668
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9669
|
+
/* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
|
|
9670
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9671
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9672
|
+
] })
|
|
9673
|
+
}
|
|
9674
|
+
),
|
|
9675
|
+
/* @__PURE__ */ jsx(
|
|
9676
|
+
Form$2.Field,
|
|
9677
|
+
{
|
|
9678
|
+
control: form.control,
|
|
9679
|
+
name: "address_2",
|
|
9680
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9681
|
+
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
|
|
9682
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9683
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9684
|
+
] })
|
|
9685
|
+
}
|
|
9686
|
+
),
|
|
9687
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
9688
|
+
/* @__PURE__ */ jsx(
|
|
9689
|
+
Form$2.Field,
|
|
9690
|
+
{
|
|
9691
|
+
control: form.control,
|
|
9692
|
+
name: "postal_code",
|
|
9693
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9694
|
+
/* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
|
|
9695
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9696
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9697
|
+
] })
|
|
9698
|
+
}
|
|
9699
|
+
),
|
|
9700
|
+
/* @__PURE__ */ jsx(
|
|
9701
|
+
Form$2.Field,
|
|
9702
|
+
{
|
|
9703
|
+
control: form.control,
|
|
9704
|
+
name: "city",
|
|
9705
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9706
|
+
/* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
|
|
9707
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9708
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9709
|
+
] })
|
|
9710
|
+
}
|
|
9711
|
+
)
|
|
9712
|
+
] }),
|
|
9713
|
+
/* @__PURE__ */ jsx(
|
|
9714
|
+
Form$2.Field,
|
|
9715
|
+
{
|
|
9716
|
+
control: form.control,
|
|
9717
|
+
name: "province",
|
|
9718
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9719
|
+
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
|
|
9720
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9721
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9722
|
+
] })
|
|
9723
|
+
}
|
|
9724
|
+
),
|
|
9725
|
+
/* @__PURE__ */ jsx(
|
|
9726
|
+
Form$2.Field,
|
|
9727
|
+
{
|
|
9728
|
+
control: form.control,
|
|
9729
|
+
name: "phone",
|
|
9730
|
+
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
9731
|
+
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
|
|
9732
|
+
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
9733
|
+
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
9734
|
+
] })
|
|
9735
|
+
}
|
|
9736
|
+
)
|
|
9737
|
+
] }) }),
|
|
9738
|
+
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
|
|
9739
|
+
/* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
|
|
9740
|
+
/* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
|
|
9741
|
+
] }) })
|
|
9742
|
+
]
|
|
9743
|
+
}
|
|
9744
|
+
) });
|
|
9745
|
+
};
|
|
9746
|
+
const schema$5 = addressSchema;
|
|
9557
9747
|
const CustomItems = () => {
|
|
9558
9748
|
return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
|
|
9559
9749
|
/* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
|
|
@@ -9562,7 +9752,7 @@ const CustomItems = () => {
|
|
|
9562
9752
|
};
|
|
9563
9753
|
const CustomItemsForm = () => {
|
|
9564
9754
|
const form = useForm({
|
|
9565
|
-
resolver: zodResolver(schema$
|
|
9755
|
+
resolver: zodResolver(schema$4)
|
|
9566
9756
|
});
|
|
9567
9757
|
return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
|
|
9568
9758
|
/* @__PURE__ */ jsx(RouteDrawer.Body, {}),
|
|
@@ -9572,7 +9762,7 @@ const CustomItemsForm = () => {
|
|
|
9572
9762
|
] }) })
|
|
9573
9763
|
] }) });
|
|
9574
9764
|
};
|
|
9575
|
-
const schema$
|
|
9765
|
+
const schema$4 = objectType({
|
|
9576
9766
|
email: stringType().email()
|
|
9577
9767
|
});
|
|
9578
9768
|
const Email = () => {
|
|
@@ -9597,7 +9787,7 @@ const EmailForm = ({ order }) => {
|
|
|
9597
9787
|
defaultValues: {
|
|
9598
9788
|
email: order.email ?? ""
|
|
9599
9789
|
},
|
|
9600
|
-
resolver: zodResolver(schema$
|
|
9790
|
+
resolver: zodResolver(schema$3)
|
|
9601
9791
|
});
|
|
9602
9792
|
const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
|
|
9603
9793
|
const { handleSuccess } = useRouteModal();
|
|
@@ -9640,7 +9830,7 @@ const EmailForm = ({ order }) => {
|
|
|
9640
9830
|
}
|
|
9641
9831
|
) });
|
|
9642
9832
|
};
|
|
9643
|
-
const schema$
|
|
9833
|
+
const schema$3 = objectType({
|
|
9644
9834
|
email: stringType().email()
|
|
9645
9835
|
});
|
|
9646
9836
|
const NumberInput = forwardRef(
|
|
@@ -10617,356 +10807,6 @@ const customItemSchema = objectType({
|
|
|
10617
10807
|
quantity: numberType(),
|
|
10618
10808
|
unit_price: unionType([numberType(), stringType()])
|
|
10619
10809
|
});
|
|
10620
|
-
const InlineTip = forwardRef(
|
|
10621
|
-
({ variant = "tip", label, className, children, ...props }, ref) => {
|
|
10622
|
-
const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
|
|
10623
|
-
return /* @__PURE__ */ jsxs(
|
|
10624
|
-
"div",
|
|
10625
|
-
{
|
|
10626
|
-
ref,
|
|
10627
|
-
className: clx(
|
|
10628
|
-
"bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
|
|
10629
|
-
className
|
|
10630
|
-
),
|
|
10631
|
-
...props,
|
|
10632
|
-
children: [
|
|
10633
|
-
/* @__PURE__ */ jsx(
|
|
10634
|
-
"div",
|
|
10635
|
-
{
|
|
10636
|
-
role: "presentation",
|
|
10637
|
-
className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
|
|
10638
|
-
"bg-ui-tag-orange-icon": variant === "warning"
|
|
10639
|
-
})
|
|
10640
|
-
}
|
|
10641
|
-
),
|
|
10642
|
-
/* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
|
|
10643
|
-
/* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
|
|
10644
|
-
labelValue,
|
|
10645
|
-
":"
|
|
10646
|
-
] }),
|
|
10647
|
-
" ",
|
|
10648
|
-
children
|
|
10649
|
-
] })
|
|
10650
|
-
]
|
|
10651
|
-
}
|
|
10652
|
-
);
|
|
10653
|
-
}
|
|
10654
|
-
);
|
|
10655
|
-
InlineTip.displayName = "InlineTip";
|
|
10656
|
-
const MetadataFieldSchema = objectType({
|
|
10657
|
-
key: stringType(),
|
|
10658
|
-
disabled: booleanType().optional(),
|
|
10659
|
-
value: anyType()
|
|
10660
|
-
});
|
|
10661
|
-
const MetadataSchema = objectType({
|
|
10662
|
-
metadata: arrayType(MetadataFieldSchema)
|
|
10663
|
-
});
|
|
10664
|
-
const Metadata = () => {
|
|
10665
|
-
const { id } = useParams();
|
|
10666
|
-
const { order, isPending, isError, error } = useOrder(id, {
|
|
10667
|
-
fields: "metadata"
|
|
10668
|
-
});
|
|
10669
|
-
if (isError) {
|
|
10670
|
-
throw error;
|
|
10671
|
-
}
|
|
10672
|
-
const isReady = !isPending && !!order;
|
|
10673
|
-
return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
|
|
10674
|
-
/* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
|
|
10675
|
-
/* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
|
|
10676
|
-
/* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
|
|
10677
|
-
] }),
|
|
10678
|
-
!isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
|
|
10679
|
-
] });
|
|
10680
|
-
};
|
|
10681
|
-
const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
|
|
10682
|
-
const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
|
|
10683
|
-
const MetadataForm = ({ orderId, metadata }) => {
|
|
10684
|
-
const { handleSuccess } = useRouteModal();
|
|
10685
|
-
const hasUneditableRows = getHasUneditableRows(metadata);
|
|
10686
|
-
const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
|
|
10687
|
-
const form = useForm({
|
|
10688
|
-
defaultValues: {
|
|
10689
|
-
metadata: getDefaultValues(metadata)
|
|
10690
|
-
},
|
|
10691
|
-
resolver: zodResolver(MetadataSchema)
|
|
10692
|
-
});
|
|
10693
|
-
const handleSubmit = form.handleSubmit(async (data) => {
|
|
10694
|
-
const parsedData = parseValues(data);
|
|
10695
|
-
await mutateAsync(
|
|
10696
|
-
{
|
|
10697
|
-
metadata: parsedData
|
|
10698
|
-
},
|
|
10699
|
-
{
|
|
10700
|
-
onSuccess: () => {
|
|
10701
|
-
toast.success("Metadata updated");
|
|
10702
|
-
handleSuccess();
|
|
10703
|
-
},
|
|
10704
|
-
onError: (error) => {
|
|
10705
|
-
toast.error(error.message);
|
|
10706
|
-
}
|
|
10707
|
-
}
|
|
10708
|
-
);
|
|
10709
|
-
});
|
|
10710
|
-
const { fields, insert, remove } = useFieldArray({
|
|
10711
|
-
control: form.control,
|
|
10712
|
-
name: "metadata"
|
|
10713
|
-
});
|
|
10714
|
-
function deleteRow(index) {
|
|
10715
|
-
remove(index);
|
|
10716
|
-
if (fields.length === 1) {
|
|
10717
|
-
insert(0, {
|
|
10718
|
-
key: "",
|
|
10719
|
-
value: "",
|
|
10720
|
-
disabled: false
|
|
10721
|
-
});
|
|
10722
|
-
}
|
|
10723
|
-
}
|
|
10724
|
-
function insertRow(index, position) {
|
|
10725
|
-
insert(index + (position === "above" ? 0 : 1), {
|
|
10726
|
-
key: "",
|
|
10727
|
-
value: "",
|
|
10728
|
-
disabled: false
|
|
10729
|
-
});
|
|
10730
|
-
}
|
|
10731
|
-
return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
|
|
10732
|
-
KeyboundForm,
|
|
10733
|
-
{
|
|
10734
|
-
onSubmit: handleSubmit,
|
|
10735
|
-
className: "flex flex-1 flex-col overflow-hidden",
|
|
10736
|
-
children: [
|
|
10737
|
-
/* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
|
|
10738
|
-
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
|
|
10739
|
-
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
|
|
10740
|
-
/* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
|
|
10741
|
-
/* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
|
|
10742
|
-
] }),
|
|
10743
|
-
fields.map((field, index) => {
|
|
10744
|
-
const isDisabled = field.disabled || false;
|
|
10745
|
-
let placeholder = "-";
|
|
10746
|
-
if (typeof field.value === "object") {
|
|
10747
|
-
placeholder = "{ ... }";
|
|
10748
|
-
}
|
|
10749
|
-
if (Array.isArray(field.value)) {
|
|
10750
|
-
placeholder = "[ ... ]";
|
|
10751
|
-
}
|
|
10752
|
-
return /* @__PURE__ */ jsx(
|
|
10753
|
-
ConditionalTooltip,
|
|
10754
|
-
{
|
|
10755
|
-
showTooltip: isDisabled,
|
|
10756
|
-
content: "This row is disabled because it contains non-primitive data.",
|
|
10757
|
-
children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
|
|
10758
|
-
/* @__PURE__ */ jsxs(
|
|
10759
|
-
"div",
|
|
10760
|
-
{
|
|
10761
|
-
className: clx("grid grid-cols-2 divide-x", {
|
|
10762
|
-
"overflow-hidden rounded-b-lg": index === fields.length - 1
|
|
10763
|
-
}),
|
|
10764
|
-
children: [
|
|
10765
|
-
/* @__PURE__ */ jsx(
|
|
10766
|
-
Form$2.Field,
|
|
10767
|
-
{
|
|
10768
|
-
control: form.control,
|
|
10769
|
-
name: `metadata.${index}.key`,
|
|
10770
|
-
render: ({ field: field2 }) => {
|
|
10771
|
-
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
10772
|
-
GridInput,
|
|
10773
|
-
{
|
|
10774
|
-
"aria-labelledby": METADATA_KEY_LABEL_ID,
|
|
10775
|
-
...field2,
|
|
10776
|
-
disabled: isDisabled,
|
|
10777
|
-
placeholder: "Key"
|
|
10778
|
-
}
|
|
10779
|
-
) }) });
|
|
10780
|
-
}
|
|
10781
|
-
}
|
|
10782
|
-
),
|
|
10783
|
-
/* @__PURE__ */ jsx(
|
|
10784
|
-
Form$2.Field,
|
|
10785
|
-
{
|
|
10786
|
-
control: form.control,
|
|
10787
|
-
name: `metadata.${index}.value`,
|
|
10788
|
-
render: ({ field: { value, ...field2 } }) => {
|
|
10789
|
-
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
10790
|
-
GridInput,
|
|
10791
|
-
{
|
|
10792
|
-
"aria-labelledby": METADATA_VALUE_LABEL_ID,
|
|
10793
|
-
...field2,
|
|
10794
|
-
value: isDisabled ? placeholder : value,
|
|
10795
|
-
disabled: isDisabled,
|
|
10796
|
-
placeholder: "Value"
|
|
10797
|
-
}
|
|
10798
|
-
) }) });
|
|
10799
|
-
}
|
|
10800
|
-
}
|
|
10801
|
-
)
|
|
10802
|
-
]
|
|
10803
|
-
}
|
|
10804
|
-
),
|
|
10805
|
-
/* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
10806
|
-
/* @__PURE__ */ jsx(
|
|
10807
|
-
DropdownMenu.Trigger,
|
|
10808
|
-
{
|
|
10809
|
-
className: clx(
|
|
10810
|
-
"invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
|
|
10811
|
-
{
|
|
10812
|
-
hidden: isDisabled
|
|
10813
|
-
}
|
|
10814
|
-
),
|
|
10815
|
-
disabled: isDisabled,
|
|
10816
|
-
asChild: true,
|
|
10817
|
-
children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
|
|
10818
|
-
}
|
|
10819
|
-
),
|
|
10820
|
-
/* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
|
|
10821
|
-
/* @__PURE__ */ jsxs(
|
|
10822
|
-
DropdownMenu.Item,
|
|
10823
|
-
{
|
|
10824
|
-
className: "gap-x-2",
|
|
10825
|
-
onClick: () => insertRow(index, "above"),
|
|
10826
|
-
children: [
|
|
10827
|
-
/* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
|
|
10828
|
-
"Insert row above"
|
|
10829
|
-
]
|
|
10830
|
-
}
|
|
10831
|
-
),
|
|
10832
|
-
/* @__PURE__ */ jsxs(
|
|
10833
|
-
DropdownMenu.Item,
|
|
10834
|
-
{
|
|
10835
|
-
className: "gap-x-2",
|
|
10836
|
-
onClick: () => insertRow(index, "below"),
|
|
10837
|
-
children: [
|
|
10838
|
-
/* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
|
|
10839
|
-
"Insert row below"
|
|
10840
|
-
]
|
|
10841
|
-
}
|
|
10842
|
-
),
|
|
10843
|
-
/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
|
|
10844
|
-
/* @__PURE__ */ jsxs(
|
|
10845
|
-
DropdownMenu.Item,
|
|
10846
|
-
{
|
|
10847
|
-
className: "gap-x-2",
|
|
10848
|
-
onClick: () => deleteRow(index),
|
|
10849
|
-
children: [
|
|
10850
|
-
/* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
|
|
10851
|
-
"Delete row"
|
|
10852
|
-
]
|
|
10853
|
-
}
|
|
10854
|
-
)
|
|
10855
|
-
] })
|
|
10856
|
-
] })
|
|
10857
|
-
] })
|
|
10858
|
-
},
|
|
10859
|
-
field.id
|
|
10860
|
-
);
|
|
10861
|
-
})
|
|
10862
|
-
] }),
|
|
10863
|
-
hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
|
|
10864
|
-
] }),
|
|
10865
|
-
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
10866
|
-
/* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
|
|
10867
|
-
/* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
|
|
10868
|
-
] }) })
|
|
10869
|
-
]
|
|
10870
|
-
}
|
|
10871
|
-
) });
|
|
10872
|
-
};
|
|
10873
|
-
const GridInput = forwardRef(({ className, ...props }, ref) => {
|
|
10874
|
-
return /* @__PURE__ */ jsx(
|
|
10875
|
-
"input",
|
|
10876
|
-
{
|
|
10877
|
-
ref,
|
|
10878
|
-
...props,
|
|
10879
|
-
autoComplete: "off",
|
|
10880
|
-
className: clx(
|
|
10881
|
-
"txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
|
|
10882
|
-
className
|
|
10883
|
-
)
|
|
10884
|
-
}
|
|
10885
|
-
);
|
|
10886
|
-
});
|
|
10887
|
-
GridInput.displayName = "MetadataForm.GridInput";
|
|
10888
|
-
const PlaceholderInner = () => {
|
|
10889
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
|
|
10890
|
-
/* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
|
|
10891
|
-
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
10892
|
-
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
|
|
10893
|
-
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
|
|
10894
|
-
] }) })
|
|
10895
|
-
] });
|
|
10896
|
-
};
|
|
10897
|
-
const EDITABLE_TYPES = ["string", "number", "boolean"];
|
|
10898
|
-
function getDefaultValues(metadata) {
|
|
10899
|
-
if (!metadata || !Object.keys(metadata).length) {
|
|
10900
|
-
return [
|
|
10901
|
-
{
|
|
10902
|
-
key: "",
|
|
10903
|
-
value: "",
|
|
10904
|
-
disabled: false
|
|
10905
|
-
}
|
|
10906
|
-
];
|
|
10907
|
-
}
|
|
10908
|
-
return Object.entries(metadata).map(([key, value]) => {
|
|
10909
|
-
if (!EDITABLE_TYPES.includes(typeof value)) {
|
|
10910
|
-
return {
|
|
10911
|
-
key,
|
|
10912
|
-
value,
|
|
10913
|
-
disabled: true
|
|
10914
|
-
};
|
|
10915
|
-
}
|
|
10916
|
-
let stringValue = value;
|
|
10917
|
-
if (typeof value !== "string") {
|
|
10918
|
-
stringValue = JSON.stringify(value);
|
|
10919
|
-
}
|
|
10920
|
-
return {
|
|
10921
|
-
key,
|
|
10922
|
-
value: stringValue,
|
|
10923
|
-
original_key: key
|
|
10924
|
-
};
|
|
10925
|
-
});
|
|
10926
|
-
}
|
|
10927
|
-
function parseValues(values) {
|
|
10928
|
-
const metadata = values.metadata;
|
|
10929
|
-
const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
|
|
10930
|
-
if (isEmpty) {
|
|
10931
|
-
return null;
|
|
10932
|
-
}
|
|
10933
|
-
const update = {};
|
|
10934
|
-
metadata.forEach((field) => {
|
|
10935
|
-
let key = field.key;
|
|
10936
|
-
let value = field.value;
|
|
10937
|
-
const disabled = field.disabled;
|
|
10938
|
-
if (!key || !value) {
|
|
10939
|
-
return;
|
|
10940
|
-
}
|
|
10941
|
-
if (disabled) {
|
|
10942
|
-
update[key] = value;
|
|
10943
|
-
return;
|
|
10944
|
-
}
|
|
10945
|
-
key = key.trim();
|
|
10946
|
-
value = value.trim();
|
|
10947
|
-
if (value === "true") {
|
|
10948
|
-
update[key] = true;
|
|
10949
|
-
} else if (value === "false") {
|
|
10950
|
-
update[key] = false;
|
|
10951
|
-
} else {
|
|
10952
|
-
const parsedNumber = parseFloat(value);
|
|
10953
|
-
if (!isNaN(parsedNumber)) {
|
|
10954
|
-
update[key] = parsedNumber;
|
|
10955
|
-
} else {
|
|
10956
|
-
update[key] = value;
|
|
10957
|
-
}
|
|
10958
|
-
}
|
|
10959
|
-
});
|
|
10960
|
-
return update;
|
|
10961
|
-
}
|
|
10962
|
-
function getHasUneditableRows(metadata) {
|
|
10963
|
-
if (!metadata) {
|
|
10964
|
-
return false;
|
|
10965
|
-
}
|
|
10966
|
-
return Object.values(metadata).some(
|
|
10967
|
-
(value) => !EDITABLE_TYPES.includes(typeof value)
|
|
10968
|
-
);
|
|
10969
|
-
}
|
|
10970
10810
|
const PROMOTION_QUERY_KEY = "promotions";
|
|
10971
10811
|
const promotionsQueryKeys = {
|
|
10972
10812
|
list: (query2) => [
|
|
@@ -11272,7 +11112,7 @@ const SalesChannelForm = ({ order }) => {
|
|
|
11272
11112
|
defaultValues: {
|
|
11273
11113
|
sales_channel_id: order.sales_channel_id || ""
|
|
11274
11114
|
},
|
|
11275
|
-
resolver: zodResolver(schema$
|
|
11115
|
+
resolver: zodResolver(schema$2)
|
|
11276
11116
|
});
|
|
11277
11117
|
const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
|
|
11278
11118
|
const { handleSuccess } = useRouteModal();
|
|
@@ -11347,7 +11187,7 @@ const SalesChannelField = ({ control, order }) => {
|
|
|
11347
11187
|
}
|
|
11348
11188
|
);
|
|
11349
11189
|
};
|
|
11350
|
-
const schema$
|
|
11190
|
+
const schema$2 = objectType({
|
|
11351
11191
|
sales_channel_id: stringType().min(1)
|
|
11352
11192
|
});
|
|
11353
11193
|
const STACKED_FOCUS_MODAL_ID = "shipping-form";
|
|
@@ -12189,7 +12029,7 @@ const ShippingAddressForm = ({ order }) => {
|
|
|
12189
12029
|
postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
|
|
12190
12030
|
phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
|
|
12191
12031
|
},
|
|
12192
|
-
resolver: zodResolver(schema$
|
|
12032
|
+
resolver: zodResolver(schema$1)
|
|
12193
12033
|
});
|
|
12194
12034
|
const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
|
|
12195
12035
|
const { handleSuccess } = useRouteModal();
|
|
@@ -12359,7 +12199,7 @@ const ShippingAddressForm = ({ order }) => {
|
|
|
12359
12199
|
}
|
|
12360
12200
|
) });
|
|
12361
12201
|
};
|
|
12362
|
-
const schema$
|
|
12202
|
+
const schema$1 = addressSchema;
|
|
12363
12203
|
const TransferOwnership = () => {
|
|
12364
12204
|
const { id } = useParams();
|
|
12365
12205
|
const { draft_order, isPending, isError, error } = useDraftOrder(id, {
|
|
@@ -12383,7 +12223,7 @@ const TransferOwnershipForm = ({ order }) => {
|
|
|
12383
12223
|
defaultValues: {
|
|
12384
12224
|
customer_id: order.customer_id || ""
|
|
12385
12225
|
},
|
|
12386
|
-
resolver: zodResolver(schema
|
|
12226
|
+
resolver: zodResolver(schema)
|
|
12387
12227
|
});
|
|
12388
12228
|
const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
|
|
12389
12229
|
const { handleSuccess } = useRouteModal();
|
|
@@ -12833,13 +12673,57 @@ const Illustration = () => {
|
|
|
12833
12673
|
}
|
|
12834
12674
|
);
|
|
12835
12675
|
};
|
|
12836
|
-
const schema
|
|
12676
|
+
const schema = objectType({
|
|
12837
12677
|
customer_id: stringType().min(1)
|
|
12838
12678
|
});
|
|
12839
|
-
const
|
|
12679
|
+
const InlineTip = forwardRef(
|
|
12680
|
+
({ variant = "tip", label, className, children, ...props }, ref) => {
|
|
12681
|
+
const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
|
|
12682
|
+
return /* @__PURE__ */ jsxs(
|
|
12683
|
+
"div",
|
|
12684
|
+
{
|
|
12685
|
+
ref,
|
|
12686
|
+
className: clx(
|
|
12687
|
+
"bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
|
|
12688
|
+
className
|
|
12689
|
+
),
|
|
12690
|
+
...props,
|
|
12691
|
+
children: [
|
|
12692
|
+
/* @__PURE__ */ jsx(
|
|
12693
|
+
"div",
|
|
12694
|
+
{
|
|
12695
|
+
role: "presentation",
|
|
12696
|
+
className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
|
|
12697
|
+
"bg-ui-tag-orange-icon": variant === "warning"
|
|
12698
|
+
})
|
|
12699
|
+
}
|
|
12700
|
+
),
|
|
12701
|
+
/* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
|
|
12702
|
+
/* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
|
|
12703
|
+
labelValue,
|
|
12704
|
+
":"
|
|
12705
|
+
] }),
|
|
12706
|
+
" ",
|
|
12707
|
+
children
|
|
12708
|
+
] })
|
|
12709
|
+
]
|
|
12710
|
+
}
|
|
12711
|
+
);
|
|
12712
|
+
}
|
|
12713
|
+
);
|
|
12714
|
+
InlineTip.displayName = "InlineTip";
|
|
12715
|
+
const MetadataFieldSchema = objectType({
|
|
12716
|
+
key: stringType(),
|
|
12717
|
+
disabled: booleanType().optional(),
|
|
12718
|
+
value: anyType()
|
|
12719
|
+
});
|
|
12720
|
+
const MetadataSchema = objectType({
|
|
12721
|
+
metadata: arrayType(MetadataFieldSchema)
|
|
12722
|
+
});
|
|
12723
|
+
const Metadata = () => {
|
|
12840
12724
|
const { id } = useParams();
|
|
12841
12725
|
const { order, isPending, isError, error } = useOrder(id, {
|
|
12842
|
-
fields: "
|
|
12726
|
+
fields: "metadata"
|
|
12843
12727
|
});
|
|
12844
12728
|
if (isError) {
|
|
12845
12729
|
throw error;
|
|
@@ -12847,36 +12731,33 @@ const BillingAddress = () => {
|
|
|
12847
12731
|
const isReady = !isPending && !!order;
|
|
12848
12732
|
return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
|
|
12849
12733
|
/* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
|
|
12850
|
-
/* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "
|
|
12851
|
-
/* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "
|
|
12734
|
+
/* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
|
|
12735
|
+
/* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
|
|
12852
12736
|
] }),
|
|
12853
|
-
isReady
|
|
12737
|
+
!isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
|
|
12854
12738
|
] });
|
|
12855
12739
|
};
|
|
12856
|
-
const
|
|
12857
|
-
|
|
12740
|
+
const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
|
|
12741
|
+
const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
|
|
12742
|
+
const MetadataForm = ({ orderId, metadata }) => {
|
|
12743
|
+
const { handleSuccess } = useRouteModal();
|
|
12744
|
+
const hasUneditableRows = getHasUneditableRows(metadata);
|
|
12745
|
+
const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
|
|
12858
12746
|
const form = useForm({
|
|
12859
12747
|
defaultValues: {
|
|
12860
|
-
|
|
12861
|
-
last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
|
|
12862
|
-
company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
|
|
12863
|
-
address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
|
|
12864
|
-
address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
|
|
12865
|
-
city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
|
|
12866
|
-
province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
|
|
12867
|
-
country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
|
|
12868
|
-
postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
|
|
12869
|
-
phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
|
|
12748
|
+
metadata: getDefaultValues(metadata)
|
|
12870
12749
|
},
|
|
12871
|
-
resolver: zodResolver(
|
|
12750
|
+
resolver: zodResolver(MetadataSchema)
|
|
12872
12751
|
});
|
|
12873
|
-
const
|
|
12874
|
-
|
|
12875
|
-
const onSubmit = form.handleSubmit(async (data) => {
|
|
12752
|
+
const handleSubmit = form.handleSubmit(async (data) => {
|
|
12753
|
+
const parsedData = parseValues(data);
|
|
12876
12754
|
await mutateAsync(
|
|
12877
|
-
{
|
|
12755
|
+
{
|
|
12756
|
+
metadata: parsedData
|
|
12757
|
+
},
|
|
12878
12758
|
{
|
|
12879
12759
|
onSuccess: () => {
|
|
12760
|
+
toast.success("Metadata updated");
|
|
12880
12761
|
handleSuccess();
|
|
12881
12762
|
},
|
|
12882
12763
|
onError: (error) => {
|
|
@@ -12885,147 +12766,266 @@ const BillingAddressForm = ({ order }) => {
|
|
|
12885
12766
|
}
|
|
12886
12767
|
);
|
|
12887
12768
|
});
|
|
12769
|
+
const { fields, insert, remove } = useFieldArray({
|
|
12770
|
+
control: form.control,
|
|
12771
|
+
name: "metadata"
|
|
12772
|
+
});
|
|
12773
|
+
function deleteRow(index) {
|
|
12774
|
+
remove(index);
|
|
12775
|
+
if (fields.length === 1) {
|
|
12776
|
+
insert(0, {
|
|
12777
|
+
key: "",
|
|
12778
|
+
value: "",
|
|
12779
|
+
disabled: false
|
|
12780
|
+
});
|
|
12781
|
+
}
|
|
12782
|
+
}
|
|
12783
|
+
function insertRow(index, position) {
|
|
12784
|
+
insert(index + (position === "above" ? 0 : 1), {
|
|
12785
|
+
key: "",
|
|
12786
|
+
value: "",
|
|
12787
|
+
disabled: false
|
|
12788
|
+
});
|
|
12789
|
+
}
|
|
12888
12790
|
return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
|
|
12889
12791
|
KeyboundForm,
|
|
12890
12792
|
{
|
|
12793
|
+
onSubmit: handleSubmit,
|
|
12891
12794
|
className: "flex flex-1 flex-col overflow-hidden",
|
|
12892
|
-
onSubmit,
|
|
12893
12795
|
children: [
|
|
12894
|
-
/* @__PURE__ */
|
|
12895
|
-
/* @__PURE__ */
|
|
12896
|
-
|
|
12897
|
-
|
|
12898
|
-
|
|
12899
|
-
|
|
12900
|
-
|
|
12901
|
-
|
|
12902
|
-
|
|
12903
|
-
|
|
12904
|
-
|
|
12905
|
-
}
|
|
12906
|
-
),
|
|
12907
|
-
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
12908
|
-
/* @__PURE__ */ jsx(
|
|
12909
|
-
Form$2.Field,
|
|
12910
|
-
{
|
|
12911
|
-
control: form.control,
|
|
12912
|
-
name: "first_name",
|
|
12913
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
12914
|
-
/* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
|
|
12915
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
12916
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
12917
|
-
] })
|
|
12918
|
-
}
|
|
12919
|
-
),
|
|
12920
|
-
/* @__PURE__ */ jsx(
|
|
12921
|
-
Form$2.Field,
|
|
12922
|
-
{
|
|
12923
|
-
control: form.control,
|
|
12924
|
-
name: "last_name",
|
|
12925
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
12926
|
-
/* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
|
|
12927
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
12928
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
12929
|
-
] })
|
|
12930
|
-
}
|
|
12931
|
-
)
|
|
12932
|
-
] }),
|
|
12933
|
-
/* @__PURE__ */ jsx(
|
|
12934
|
-
Form$2.Field,
|
|
12935
|
-
{
|
|
12936
|
-
control: form.control,
|
|
12937
|
-
name: "company",
|
|
12938
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
12939
|
-
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
|
|
12940
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
12941
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
12942
|
-
] })
|
|
12943
|
-
}
|
|
12944
|
-
),
|
|
12945
|
-
/* @__PURE__ */ jsx(
|
|
12946
|
-
Form$2.Field,
|
|
12947
|
-
{
|
|
12948
|
-
control: form.control,
|
|
12949
|
-
name: "address_1",
|
|
12950
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
12951
|
-
/* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
|
|
12952
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
12953
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
12954
|
-
] })
|
|
12955
|
-
}
|
|
12956
|
-
),
|
|
12957
|
-
/* @__PURE__ */ jsx(
|
|
12958
|
-
Form$2.Field,
|
|
12959
|
-
{
|
|
12960
|
-
control: form.control,
|
|
12961
|
-
name: "address_2",
|
|
12962
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
12963
|
-
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
|
|
12964
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
12965
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
12966
|
-
] })
|
|
12967
|
-
}
|
|
12968
|
-
),
|
|
12969
|
-
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
12970
|
-
/* @__PURE__ */ jsx(
|
|
12971
|
-
Form$2.Field,
|
|
12972
|
-
{
|
|
12973
|
-
control: form.control,
|
|
12974
|
-
name: "postal_code",
|
|
12975
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
12976
|
-
/* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
|
|
12977
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
12978
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
12979
|
-
] })
|
|
12980
|
-
}
|
|
12981
|
-
),
|
|
12982
|
-
/* @__PURE__ */ jsx(
|
|
12983
|
-
Form$2.Field,
|
|
12984
|
-
{
|
|
12985
|
-
control: form.control,
|
|
12986
|
-
name: "city",
|
|
12987
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
12988
|
-
/* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
|
|
12989
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
12990
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
12991
|
-
] })
|
|
12796
|
+
/* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
|
|
12797
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
|
|
12798
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
|
|
12799
|
+
/* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
|
|
12800
|
+
/* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
|
|
12801
|
+
] }),
|
|
12802
|
+
fields.map((field, index) => {
|
|
12803
|
+
const isDisabled = field.disabled || false;
|
|
12804
|
+
let placeholder = "-";
|
|
12805
|
+
if (typeof field.value === "object") {
|
|
12806
|
+
placeholder = "{ ... }";
|
|
12992
12807
|
}
|
|
12993
|
-
|
|
12808
|
+
if (Array.isArray(field.value)) {
|
|
12809
|
+
placeholder = "[ ... ]";
|
|
12810
|
+
}
|
|
12811
|
+
return /* @__PURE__ */ jsx(
|
|
12812
|
+
ConditionalTooltip,
|
|
12813
|
+
{
|
|
12814
|
+
showTooltip: isDisabled,
|
|
12815
|
+
content: "This row is disabled because it contains non-primitive data.",
|
|
12816
|
+
children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
|
|
12817
|
+
/* @__PURE__ */ jsxs(
|
|
12818
|
+
"div",
|
|
12819
|
+
{
|
|
12820
|
+
className: clx("grid grid-cols-2 divide-x", {
|
|
12821
|
+
"overflow-hidden rounded-b-lg": index === fields.length - 1
|
|
12822
|
+
}),
|
|
12823
|
+
children: [
|
|
12824
|
+
/* @__PURE__ */ jsx(
|
|
12825
|
+
Form$2.Field,
|
|
12826
|
+
{
|
|
12827
|
+
control: form.control,
|
|
12828
|
+
name: `metadata.${index}.key`,
|
|
12829
|
+
render: ({ field: field2 }) => {
|
|
12830
|
+
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
12831
|
+
GridInput,
|
|
12832
|
+
{
|
|
12833
|
+
"aria-labelledby": METADATA_KEY_LABEL_ID,
|
|
12834
|
+
...field2,
|
|
12835
|
+
disabled: isDisabled,
|
|
12836
|
+
placeholder: "Key"
|
|
12837
|
+
}
|
|
12838
|
+
) }) });
|
|
12839
|
+
}
|
|
12840
|
+
}
|
|
12841
|
+
),
|
|
12842
|
+
/* @__PURE__ */ jsx(
|
|
12843
|
+
Form$2.Field,
|
|
12844
|
+
{
|
|
12845
|
+
control: form.control,
|
|
12846
|
+
name: `metadata.${index}.value`,
|
|
12847
|
+
render: ({ field: { value, ...field2 } }) => {
|
|
12848
|
+
return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
|
|
12849
|
+
GridInput,
|
|
12850
|
+
{
|
|
12851
|
+
"aria-labelledby": METADATA_VALUE_LABEL_ID,
|
|
12852
|
+
...field2,
|
|
12853
|
+
value: isDisabled ? placeholder : value,
|
|
12854
|
+
disabled: isDisabled,
|
|
12855
|
+
placeholder: "Value"
|
|
12856
|
+
}
|
|
12857
|
+
) }) });
|
|
12858
|
+
}
|
|
12859
|
+
}
|
|
12860
|
+
)
|
|
12861
|
+
]
|
|
12862
|
+
}
|
|
12863
|
+
),
|
|
12864
|
+
/* @__PURE__ */ jsxs(DropdownMenu, { children: [
|
|
12865
|
+
/* @__PURE__ */ jsx(
|
|
12866
|
+
DropdownMenu.Trigger,
|
|
12867
|
+
{
|
|
12868
|
+
className: clx(
|
|
12869
|
+
"invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
|
|
12870
|
+
{
|
|
12871
|
+
hidden: isDisabled
|
|
12872
|
+
}
|
|
12873
|
+
),
|
|
12874
|
+
disabled: isDisabled,
|
|
12875
|
+
asChild: true,
|
|
12876
|
+
children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
|
|
12877
|
+
}
|
|
12878
|
+
),
|
|
12879
|
+
/* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
|
|
12880
|
+
/* @__PURE__ */ jsxs(
|
|
12881
|
+
DropdownMenu.Item,
|
|
12882
|
+
{
|
|
12883
|
+
className: "gap-x-2",
|
|
12884
|
+
onClick: () => insertRow(index, "above"),
|
|
12885
|
+
children: [
|
|
12886
|
+
/* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
|
|
12887
|
+
"Insert row above"
|
|
12888
|
+
]
|
|
12889
|
+
}
|
|
12890
|
+
),
|
|
12891
|
+
/* @__PURE__ */ jsxs(
|
|
12892
|
+
DropdownMenu.Item,
|
|
12893
|
+
{
|
|
12894
|
+
className: "gap-x-2",
|
|
12895
|
+
onClick: () => insertRow(index, "below"),
|
|
12896
|
+
children: [
|
|
12897
|
+
/* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
|
|
12898
|
+
"Insert row below"
|
|
12899
|
+
]
|
|
12900
|
+
}
|
|
12901
|
+
),
|
|
12902
|
+
/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
|
|
12903
|
+
/* @__PURE__ */ jsxs(
|
|
12904
|
+
DropdownMenu.Item,
|
|
12905
|
+
{
|
|
12906
|
+
className: "gap-x-2",
|
|
12907
|
+
onClick: () => deleteRow(index),
|
|
12908
|
+
children: [
|
|
12909
|
+
/* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
|
|
12910
|
+
"Delete row"
|
|
12911
|
+
]
|
|
12912
|
+
}
|
|
12913
|
+
)
|
|
12914
|
+
] })
|
|
12915
|
+
] })
|
|
12916
|
+
] })
|
|
12917
|
+
},
|
|
12918
|
+
field.id
|
|
12919
|
+
);
|
|
12920
|
+
})
|
|
12994
12921
|
] }),
|
|
12995
|
-
/* @__PURE__ */ jsx(
|
|
12996
|
-
|
|
12997
|
-
|
|
12998
|
-
|
|
12999
|
-
name: "province",
|
|
13000
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
13001
|
-
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
|
|
13002
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
13003
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
13004
|
-
] })
|
|
13005
|
-
}
|
|
13006
|
-
),
|
|
13007
|
-
/* @__PURE__ */ jsx(
|
|
13008
|
-
Form$2.Field,
|
|
13009
|
-
{
|
|
13010
|
-
control: form.control,
|
|
13011
|
-
name: "phone",
|
|
13012
|
-
render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
|
|
13013
|
-
/* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
|
|
13014
|
-
/* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
|
|
13015
|
-
/* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
|
|
13016
|
-
] })
|
|
13017
|
-
}
|
|
13018
|
-
)
|
|
13019
|
-
] }) }),
|
|
13020
|
-
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
|
|
13021
|
-
/* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
|
|
12922
|
+
hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
|
|
12923
|
+
] }),
|
|
12924
|
+
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
12925
|
+
/* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
|
|
13022
12926
|
/* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
|
|
13023
12927
|
] }) })
|
|
13024
12928
|
]
|
|
13025
12929
|
}
|
|
13026
12930
|
) });
|
|
13027
12931
|
};
|
|
13028
|
-
const
|
|
12932
|
+
const GridInput = forwardRef(({ className, ...props }, ref) => {
|
|
12933
|
+
return /* @__PURE__ */ jsx(
|
|
12934
|
+
"input",
|
|
12935
|
+
{
|
|
12936
|
+
ref,
|
|
12937
|
+
...props,
|
|
12938
|
+
autoComplete: "off",
|
|
12939
|
+
className: clx(
|
|
12940
|
+
"txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
|
|
12941
|
+
className
|
|
12942
|
+
)
|
|
12943
|
+
}
|
|
12944
|
+
);
|
|
12945
|
+
});
|
|
12946
|
+
GridInput.displayName = "MetadataForm.GridInput";
|
|
12947
|
+
const PlaceholderInner = () => {
|
|
12948
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
|
|
12949
|
+
/* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
|
|
12950
|
+
/* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
|
|
12951
|
+
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
|
|
12952
|
+
/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
|
|
12953
|
+
] }) })
|
|
12954
|
+
] });
|
|
12955
|
+
};
|
|
12956
|
+
const EDITABLE_TYPES = ["string", "number", "boolean"];
|
|
12957
|
+
function getDefaultValues(metadata) {
|
|
12958
|
+
if (!metadata || !Object.keys(metadata).length) {
|
|
12959
|
+
return [
|
|
12960
|
+
{
|
|
12961
|
+
key: "",
|
|
12962
|
+
value: "",
|
|
12963
|
+
disabled: false
|
|
12964
|
+
}
|
|
12965
|
+
];
|
|
12966
|
+
}
|
|
12967
|
+
return Object.entries(metadata).map(([key, value]) => {
|
|
12968
|
+
if (!EDITABLE_TYPES.includes(typeof value)) {
|
|
12969
|
+
return {
|
|
12970
|
+
key,
|
|
12971
|
+
value,
|
|
12972
|
+
disabled: true
|
|
12973
|
+
};
|
|
12974
|
+
}
|
|
12975
|
+
let stringValue = value;
|
|
12976
|
+
if (typeof value !== "string") {
|
|
12977
|
+
stringValue = JSON.stringify(value);
|
|
12978
|
+
}
|
|
12979
|
+
return {
|
|
12980
|
+
key,
|
|
12981
|
+
value: stringValue,
|
|
12982
|
+
original_key: key
|
|
12983
|
+
};
|
|
12984
|
+
});
|
|
12985
|
+
}
|
|
12986
|
+
function parseValues(values) {
|
|
12987
|
+
const metadata = values.metadata;
|
|
12988
|
+
const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
|
|
12989
|
+
if (isEmpty) {
|
|
12990
|
+
return null;
|
|
12991
|
+
}
|
|
12992
|
+
const update = {};
|
|
12993
|
+
metadata.forEach((field) => {
|
|
12994
|
+
let key = field.key;
|
|
12995
|
+
let value = field.value;
|
|
12996
|
+
const disabled = field.disabled;
|
|
12997
|
+
if (!key || !value) {
|
|
12998
|
+
return;
|
|
12999
|
+
}
|
|
13000
|
+
if (disabled) {
|
|
13001
|
+
update[key] = value;
|
|
13002
|
+
return;
|
|
13003
|
+
}
|
|
13004
|
+
key = key.trim();
|
|
13005
|
+
value = value.trim();
|
|
13006
|
+
if (value === "true") {
|
|
13007
|
+
update[key] = true;
|
|
13008
|
+
} else if (value === "false") {
|
|
13009
|
+
update[key] = false;
|
|
13010
|
+
} else {
|
|
13011
|
+
const parsedNumber = parseFloat(value);
|
|
13012
|
+
if (!isNaN(parsedNumber)) {
|
|
13013
|
+
update[key] = parsedNumber;
|
|
13014
|
+
} else {
|
|
13015
|
+
update[key] = value;
|
|
13016
|
+
}
|
|
13017
|
+
}
|
|
13018
|
+
});
|
|
13019
|
+
return update;
|
|
13020
|
+
}
|
|
13021
|
+
function getHasUneditableRows(metadata) {
|
|
13022
|
+
if (!metadata) {
|
|
13023
|
+
return false;
|
|
13024
|
+
}
|
|
13025
|
+
return Object.values(metadata).some(
|
|
13026
|
+
(value) => !EDITABLE_TYPES.includes(typeof value)
|
|
13027
|
+
);
|
|
13028
|
+
}
|
|
13029
13029
|
const widgetModule = { widgets: [] };
|
|
13030
13030
|
const routeModule = {
|
|
13031
13031
|
routes: [
|
|
@@ -13046,6 +13046,10 @@ const routeModule = {
|
|
|
13046
13046
|
handle,
|
|
13047
13047
|
loader,
|
|
13048
13048
|
children: [
|
|
13049
|
+
{
|
|
13050
|
+
Component: BillingAddress,
|
|
13051
|
+
path: "/draft-orders/:id/billing-address"
|
|
13052
|
+
},
|
|
13049
13053
|
{
|
|
13050
13054
|
Component: CustomItems,
|
|
13051
13055
|
path: "/draft-orders/:id/custom-items"
|
|
@@ -13058,10 +13062,6 @@ const routeModule = {
|
|
|
13058
13062
|
Component: Items,
|
|
13059
13063
|
path: "/draft-orders/:id/items"
|
|
13060
13064
|
},
|
|
13061
|
-
{
|
|
13062
|
-
Component: Metadata,
|
|
13063
|
-
path: "/draft-orders/:id/metadata"
|
|
13064
|
-
},
|
|
13065
13065
|
{
|
|
13066
13066
|
Component: Promotions,
|
|
13067
13067
|
path: "/draft-orders/:id/promotions"
|
|
@@ -13083,8 +13083,8 @@ const routeModule = {
|
|
|
13083
13083
|
path: "/draft-orders/:id/transfer-ownership"
|
|
13084
13084
|
},
|
|
13085
13085
|
{
|
|
13086
|
-
Component:
|
|
13087
|
-
path: "/draft-orders/:id/
|
|
13086
|
+
Component: Metadata,
|
|
13087
|
+
path: "/draft-orders/:id/metadata"
|
|
13088
13088
|
}
|
|
13089
13089
|
]
|
|
13090
13090
|
}
|