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