@medusajs/draft-order 2.10.1-snapshot-20250828200637 → 2.10.1-snapshot-20250828204656

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 +605 -605
  2. package/.medusa/server/src/admin/index.mjs +605 -605
  3. package/package.json +23 -24
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) => [
@@ -11276,20 +11116,168 @@ const SalesChannel = () => {
11276
11116
  const SalesChannelForm = ({ order }) => {
11277
11117
  const form = reactHookForm.useForm({
11278
11118
  defaultValues: {
11279
- sales_channel_id: order.sales_channel_id || ""
11119
+ sales_channel_id: order.sales_channel_id || ""
11120
+ },
11121
+ resolver: zod.zodResolver(schema$2)
11122
+ });
11123
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11124
+ const { handleSuccess } = useRouteModal();
11125
+ const onSubmit = form.handleSubmit(async (data) => {
11126
+ await mutateAsync(
11127
+ {
11128
+ sales_channel_id: data.sales_channel_id
11129
+ },
11130
+ {
11131
+ onSuccess: () => {
11132
+ ui.toast.success("Sales channel updated");
11133
+ handleSuccess();
11134
+ },
11135
+ onError: (error) => {
11136
+ ui.toast.error(error.message);
11137
+ }
11138
+ }
11139
+ );
11140
+ });
11141
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11142
+ KeyboundForm,
11143
+ {
11144
+ className: "flex flex-1 flex-col overflow-hidden",
11145
+ onSubmit,
11146
+ children: [
11147
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11148
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11149
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11150
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11151
+ ] }) })
11152
+ ]
11153
+ }
11154
+ ) });
11155
+ };
11156
+ const SalesChannelField = ({ control, order }) => {
11157
+ const salesChannels = useComboboxData({
11158
+ queryFn: async (params) => {
11159
+ return await sdk.admin.salesChannel.list(params);
11160
+ },
11161
+ queryKey: ["sales-channels"],
11162
+ getOptions: (data) => {
11163
+ return data.sales_channels.map((salesChannel) => ({
11164
+ label: salesChannel.name,
11165
+ value: salesChannel.id
11166
+ }));
11167
+ },
11168
+ defaultValue: order.sales_channel_id || void 0
11169
+ });
11170
+ return /* @__PURE__ */ jsxRuntime.jsx(
11171
+ Form$2.Field,
11172
+ {
11173
+ control,
11174
+ name: "sales_channel_id",
11175
+ render: ({ field }) => {
11176
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11177
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11178
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11179
+ Combobox,
11180
+ {
11181
+ options: salesChannels.options,
11182
+ fetchNextPage: salesChannels.fetchNextPage,
11183
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11184
+ searchValue: salesChannels.searchValue,
11185
+ onSearchValueChange: salesChannels.onSearchValueChange,
11186
+ placeholder: "Select sales channel",
11187
+ ...field
11188
+ }
11189
+ ) }),
11190
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11191
+ ] });
11192
+ }
11193
+ }
11194
+ );
11195
+ };
11196
+ const schema$2 = objectType({
11197
+ sales_channel_id: stringType().min(1)
11198
+ });
11199
+ const InlineTip = React.forwardRef(
11200
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
11201
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11202
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11203
+ "div",
11204
+ {
11205
+ ref,
11206
+ className: ui.clx(
11207
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11208
+ className
11209
+ ),
11210
+ ...props,
11211
+ children: [
11212
+ /* @__PURE__ */ jsxRuntime.jsx(
11213
+ "div",
11214
+ {
11215
+ role: "presentation",
11216
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11217
+ "bg-ui-tag-orange-icon": variant === "warning"
11218
+ })
11219
+ }
11220
+ ),
11221
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
11222
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11223
+ labelValue,
11224
+ ":"
11225
+ ] }),
11226
+ " ",
11227
+ children
11228
+ ] })
11229
+ ]
11230
+ }
11231
+ );
11232
+ }
11233
+ );
11234
+ InlineTip.displayName = "InlineTip";
11235
+ const MetadataFieldSchema = objectType({
11236
+ key: stringType(),
11237
+ disabled: booleanType().optional(),
11238
+ value: anyType()
11239
+ });
11240
+ const MetadataSchema = objectType({
11241
+ metadata: arrayType(MetadataFieldSchema)
11242
+ });
11243
+ const Metadata = () => {
11244
+ const { id } = reactRouterDom.useParams();
11245
+ const { order, isPending, isError, error } = useOrder(id, {
11246
+ fields: "metadata"
11247
+ });
11248
+ if (isError) {
11249
+ throw error;
11250
+ }
11251
+ const isReady = !isPending && !!order;
11252
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11253
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11254
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
11255
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11256
+ ] }),
11257
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11258
+ ] });
11259
+ };
11260
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11261
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11262
+ const MetadataForm = ({ orderId, metadata }) => {
11263
+ const { handleSuccess } = useRouteModal();
11264
+ const hasUneditableRows = getHasUneditableRows(metadata);
11265
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11266
+ const form = reactHookForm.useForm({
11267
+ defaultValues: {
11268
+ metadata: getDefaultValues(metadata)
11280
11269
  },
11281
- resolver: zod.zodResolver(schema$3)
11270
+ resolver: zod.zodResolver(MetadataSchema)
11282
11271
  });
11283
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11284
- const { handleSuccess } = useRouteModal();
11285
- const onSubmit = form.handleSubmit(async (data) => {
11272
+ const handleSubmit = form.handleSubmit(async (data) => {
11273
+ const parsedData = parseValues(data);
11286
11274
  await mutateAsync(
11287
11275
  {
11288
- sales_channel_id: data.sales_channel_id
11276
+ metadata: parsedData
11289
11277
  },
11290
11278
  {
11291
11279
  onSuccess: () => {
11292
- ui.toast.success("Sales channel updated");
11280
+ ui.toast.success("Metadata updated");
11293
11281
  handleSuccess();
11294
11282
  },
11295
11283
  onError: (error) => {
@@ -11298,64 +11286,266 @@ const SalesChannelForm = ({ order }) => {
11298
11286
  }
11299
11287
  );
11300
11288
  });
11289
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
11290
+ control: form.control,
11291
+ name: "metadata"
11292
+ });
11293
+ function deleteRow(index) {
11294
+ remove(index);
11295
+ if (fields.length === 1) {
11296
+ insert(0, {
11297
+ key: "",
11298
+ value: "",
11299
+ disabled: false
11300
+ });
11301
+ }
11302
+ }
11303
+ function insertRow(index, position) {
11304
+ insert(index + (position === "above" ? 0 : 1), {
11305
+ key: "",
11306
+ value: "",
11307
+ disabled: false
11308
+ });
11309
+ }
11301
11310
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11302
11311
  KeyboundForm,
11303
11312
  {
11313
+ onSubmit: handleSubmit,
11304
11314
  className: "flex flex-1 flex-col overflow-hidden",
11305
- onSubmit,
11306
11315
  children: [
11307
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11308
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11309
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11316
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
11317
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
11318
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
11319
+ /* @__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" }) }),
11320
+ /* @__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" }) })
11321
+ ] }),
11322
+ fields.map((field, index) => {
11323
+ const isDisabled = field.disabled || false;
11324
+ let placeholder = "-";
11325
+ if (typeof field.value === "object") {
11326
+ placeholder = "{ ... }";
11327
+ }
11328
+ if (Array.isArray(field.value)) {
11329
+ placeholder = "[ ... ]";
11330
+ }
11331
+ return /* @__PURE__ */ jsxRuntime.jsx(
11332
+ ConditionalTooltip,
11333
+ {
11334
+ showTooltip: isDisabled,
11335
+ content: "This row is disabled because it contains non-primitive data.",
11336
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
11337
+ /* @__PURE__ */ jsxRuntime.jsxs(
11338
+ "div",
11339
+ {
11340
+ className: ui.clx("grid grid-cols-2 divide-x", {
11341
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
11342
+ }),
11343
+ children: [
11344
+ /* @__PURE__ */ jsxRuntime.jsx(
11345
+ Form$2.Field,
11346
+ {
11347
+ control: form.control,
11348
+ name: `metadata.${index}.key`,
11349
+ render: ({ field: field2 }) => {
11350
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11351
+ GridInput,
11352
+ {
11353
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
11354
+ ...field2,
11355
+ disabled: isDisabled,
11356
+ placeholder: "Key"
11357
+ }
11358
+ ) }) });
11359
+ }
11360
+ }
11361
+ ),
11362
+ /* @__PURE__ */ jsxRuntime.jsx(
11363
+ Form$2.Field,
11364
+ {
11365
+ control: form.control,
11366
+ name: `metadata.${index}.value`,
11367
+ render: ({ field: { value, ...field2 } }) => {
11368
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11369
+ GridInput,
11370
+ {
11371
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
11372
+ ...field2,
11373
+ value: isDisabled ? placeholder : value,
11374
+ disabled: isDisabled,
11375
+ placeholder: "Value"
11376
+ }
11377
+ ) }) });
11378
+ }
11379
+ }
11380
+ )
11381
+ ]
11382
+ }
11383
+ ),
11384
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
11385
+ /* @__PURE__ */ jsxRuntime.jsx(
11386
+ ui.DropdownMenu.Trigger,
11387
+ {
11388
+ className: ui.clx(
11389
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11390
+ {
11391
+ hidden: isDisabled
11392
+ }
11393
+ ),
11394
+ disabled: isDisabled,
11395
+ asChild: true,
11396
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
11397
+ }
11398
+ ),
11399
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
11400
+ /* @__PURE__ */ jsxRuntime.jsxs(
11401
+ ui.DropdownMenu.Item,
11402
+ {
11403
+ className: "gap-x-2",
11404
+ onClick: () => insertRow(index, "above"),
11405
+ children: [
11406
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
11407
+ "Insert row above"
11408
+ ]
11409
+ }
11410
+ ),
11411
+ /* @__PURE__ */ jsxRuntime.jsxs(
11412
+ ui.DropdownMenu.Item,
11413
+ {
11414
+ className: "gap-x-2",
11415
+ onClick: () => insertRow(index, "below"),
11416
+ children: [
11417
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
11418
+ "Insert row below"
11419
+ ]
11420
+ }
11421
+ ),
11422
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
11423
+ /* @__PURE__ */ jsxRuntime.jsxs(
11424
+ ui.DropdownMenu.Item,
11425
+ {
11426
+ className: "gap-x-2",
11427
+ onClick: () => deleteRow(index),
11428
+ children: [
11429
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
11430
+ "Delete row"
11431
+ ]
11432
+ }
11433
+ )
11434
+ ] })
11435
+ ] })
11436
+ ] })
11437
+ },
11438
+ field.id
11439
+ );
11440
+ })
11441
+ ] }),
11442
+ 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." })
11443
+ ] }),
11444
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11445
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11310
11446
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11311
11447
  ] }) })
11312
11448
  ]
11313
11449
  }
11314
11450
  ) });
11315
11451
  };
11316
- const SalesChannelField = ({ control, order }) => {
11317
- const salesChannels = useComboboxData({
11318
- queryFn: async (params) => {
11319
- return await sdk.admin.salesChannel.list(params);
11320
- },
11321
- queryKey: ["sales-channels"],
11322
- getOptions: (data) => {
11323
- return data.sales_channels.map((salesChannel) => ({
11324
- label: salesChannel.name,
11325
- value: salesChannel.id
11326
- }));
11327
- },
11328
- defaultValue: order.sales_channel_id || void 0
11329
- });
11452
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11330
11453
  return /* @__PURE__ */ jsxRuntime.jsx(
11331
- Form$2.Field,
11454
+ "input",
11332
11455
  {
11333
- control,
11334
- name: "sales_channel_id",
11335
- render: ({ field }) => {
11336
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11337
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11338
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11339
- Combobox,
11340
- {
11341
- options: salesChannels.options,
11342
- fetchNextPage: salesChannels.fetchNextPage,
11343
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11344
- searchValue: salesChannels.searchValue,
11345
- onSearchValueChange: salesChannels.onSearchValueChange,
11346
- placeholder: "Select sales channel",
11347
- ...field
11348
- }
11349
- ) }),
11350
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11351
- ] });
11456
+ ref,
11457
+ ...props,
11458
+ autoComplete: "off",
11459
+ className: ui.clx(
11460
+ "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",
11461
+ className
11462
+ )
11463
+ }
11464
+ );
11465
+ });
11466
+ GridInput.displayName = "MetadataForm.GridInput";
11467
+ const PlaceholderInner = () => {
11468
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11469
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11470
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11471
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11472
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11473
+ ] }) })
11474
+ ] });
11475
+ };
11476
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11477
+ function getDefaultValues(metadata) {
11478
+ if (!metadata || !Object.keys(metadata).length) {
11479
+ return [
11480
+ {
11481
+ key: "",
11482
+ value: "",
11483
+ disabled: false
11484
+ }
11485
+ ];
11486
+ }
11487
+ return Object.entries(metadata).map(([key, value]) => {
11488
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11489
+ return {
11490
+ key,
11491
+ value,
11492
+ disabled: true
11493
+ };
11494
+ }
11495
+ let stringValue = value;
11496
+ if (typeof value !== "string") {
11497
+ stringValue = JSON.stringify(value);
11498
+ }
11499
+ return {
11500
+ key,
11501
+ value: stringValue,
11502
+ original_key: key
11503
+ };
11504
+ });
11505
+ }
11506
+ function parseValues(values) {
11507
+ const metadata = values.metadata;
11508
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11509
+ if (isEmpty) {
11510
+ return null;
11511
+ }
11512
+ const update = {};
11513
+ metadata.forEach((field) => {
11514
+ let key = field.key;
11515
+ let value = field.value;
11516
+ const disabled = field.disabled;
11517
+ if (!key || !value) {
11518
+ return;
11519
+ }
11520
+ if (disabled) {
11521
+ update[key] = value;
11522
+ return;
11523
+ }
11524
+ key = key.trim();
11525
+ value = value.trim();
11526
+ if (value === "true") {
11527
+ update[key] = true;
11528
+ } else if (value === "false") {
11529
+ update[key] = false;
11530
+ } else {
11531
+ const parsedNumber = parseFloat(value);
11532
+ if (!isNaN(parsedNumber)) {
11533
+ update[key] = parsedNumber;
11534
+ } else {
11535
+ update[key] = value;
11352
11536
  }
11353
11537
  }
11538
+ });
11539
+ return update;
11540
+ }
11541
+ function getHasUneditableRows(metadata) {
11542
+ if (!metadata) {
11543
+ return false;
11544
+ }
11545
+ return Object.values(metadata).some(
11546
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11354
11547
  );
11355
- };
11356
- const schema$3 = objectType({
11357
- sales_channel_id: stringType().min(1)
11358
- });
11548
+ }
11359
11549
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11360
11550
  const Shipping = () => {
11361
11551
  var _a;
@@ -12195,7 +12385,7 @@ const ShippingAddressForm = ({ order }) => {
12195
12385
  postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12196
12386
  phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12197
12387
  },
12198
- resolver: zod.zodResolver(schema$2)
12388
+ resolver: zod.zodResolver(schema$1)
12199
12389
  });
12200
12390
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12201
12391
  const { handleSuccess } = useRouteModal();
@@ -12365,7 +12555,7 @@ const ShippingAddressForm = ({ order }) => {
12365
12555
  }
12366
12556
  ) });
12367
12557
  };
12368
- const schema$2 = addressSchema;
12558
+ const schema$1 = addressSchema;
12369
12559
  const TransferOwnership = () => {
12370
12560
  const { id } = reactRouterDom.useParams();
12371
12561
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12389,7 +12579,7 @@ const TransferOwnershipForm = ({ order }) => {
12389
12579
  defaultValues: {
12390
12580
  customer_id: order.customer_id || ""
12391
12581
  },
12392
- resolver: zod.zodResolver(schema$1)
12582
+ resolver: zod.zodResolver(schema)
12393
12583
  });
12394
12584
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12395
12585
  const { handleSuccess } = useRouteModal();
@@ -12839,199 +13029,9 @@ const Illustration = () => {
12839
13029
  }
12840
13030
  );
12841
13031
  };
12842
- const schema$1 = objectType({
13032
+ const schema = objectType({
12843
13033
  customer_id: stringType().min(1)
12844
13034
  });
12845
- const BillingAddress = () => {
12846
- const { id } = reactRouterDom.useParams();
12847
- const { order, isPending, isError, error } = useOrder(id, {
12848
- fields: "+billing_address"
12849
- });
12850
- if (isError) {
12851
- throw error;
12852
- }
12853
- const isReady = !isPending && !!order;
12854
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12855
- /* @__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" }) })
12858
- ] }),
12859
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
12860
- ] });
12861
- };
12862
- const BillingAddressForm = ({ order }) => {
12863
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12864
- const form = reactHookForm.useForm({
12865
- 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) ?? ""
12876
- },
12877
- resolver: zod.zodResolver(schema)
12878
- });
12879
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12880
- const { handleSuccess } = useRouteModal();
12881
- const onSubmit = form.handleSubmit(async (data) => {
12882
- await mutateAsync(
12883
- { billing_address: data },
12884
- {
12885
- onSuccess: () => {
12886
- handleSuccess();
12887
- },
12888
- onError: (error) => {
12889
- ui.toast.error(error.message);
12890
- }
12891
- }
12892
- );
12893
- });
12894
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12895
- KeyboundForm,
12896
- {
12897
- className: "flex flex-1 flex-col overflow-hidden",
12898
- onSubmit,
12899
- 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
- ] })
12998
- }
12999
- )
13000
- ] }),
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" }) }),
13028
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13029
- ] }) })
13030
- ]
13031
- }
13032
- ) });
13033
- };
13034
- const schema = addressSchema;
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"
@@ -13076,6 +13076,10 @@ const routeModule = {
13076
13076
  Component: SalesChannel,
13077
13077
  path: "/draft-orders/:id/sales-channel"
13078
13078
  },
13079
+ {
13080
+ Component: Metadata,
13081
+ path: "/draft-orders/:id/metadata"
13082
+ },
13079
13083
  {
13080
13084
  Component: Shipping,
13081
13085
  path: "/draft-orders/:id/shipping"
@@ -13087,10 +13091,6 @@ const routeModule = {
13087
13091
  {
13088
13092
  Component: TransferOwnership,
13089
13093
  path: "/draft-orders/:id/transfer-ownership"
13090
- },
13091
- {
13092
- Component: BillingAddress,
13093
- path: "/draft-orders/:id/billing-address"
13094
13094
  }
13095
13095
  ]
13096
13096
  }