@medusajs/draft-order 2.11.0-snapshot-20251016104801 → 2.11.0-snapshot-20251016121452

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 +560 -560
  2. package/.medusa/server/src/admin/index.mjs +560 -560
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -9573,31 +9573,10 @@ const ID = () => {
9573
9573
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9574
9574
  ] });
9575
9575
  };
9576
- const CustomItems = () => {
9577
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9578
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9579
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9580
- ] });
9581
- };
9582
- const CustomItemsForm = () => {
9583
- const form = reactHookForm.useForm({
9584
- resolver: zod.zodResolver(schema$5)
9585
- });
9586
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9587
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9588
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9589
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9590
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9591
- ] }) })
9592
- ] }) });
9593
- };
9594
- const schema$5 = objectType({
9595
- email: stringType().email()
9596
- });
9597
- const Email = () => {
9576
+ const BillingAddress = () => {
9598
9577
  const { id } = reactRouterDom.useParams();
9599
9578
  const { order, isPending, isError, error } = useOrder(id, {
9600
- fields: "+email"
9579
+ fields: "+billing_address"
9601
9580
  });
9602
9581
  if (isError) {
9603
9582
  throw error;
@@ -9605,24 +9584,34 @@ const Email = () => {
9605
9584
  const isReady = !isPending && !!order;
9606
9585
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9607
9586
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9608
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9609
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9587
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
9588
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9610
9589
  ] }),
9611
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9590
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9612
9591
  ] });
9613
9592
  };
9614
- const EmailForm = ({ order }) => {
9593
+ const BillingAddressForm = ({ order }) => {
9594
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9615
9595
  const form = reactHookForm.useForm({
9616
9596
  defaultValues: {
9617
- email: order.email ?? ""
9597
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9598
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9599
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9600
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9601
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9602
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9603
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9604
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9605
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9606
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9618
9607
  },
9619
- resolver: zod.zodResolver(schema$4)
9608
+ resolver: zod.zodResolver(schema$5)
9620
9609
  });
9621
9610
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9622
9611
  const { handleSuccess } = useRouteModal();
9623
9612
  const onSubmit = form.handleSubmit(async (data) => {
9624
9613
  await mutateAsync(
9625
- { email: data.email },
9614
+ { billing_address: data },
9626
9615
  {
9627
9616
  onSuccess: () => {
9628
9617
  handleSuccess();
@@ -9639,18 +9628,132 @@ const EmailForm = ({ order }) => {
9639
9628
  className: "flex flex-1 flex-col overflow-hidden",
9640
9629
  onSubmit,
9641
9630
  children: [
9642
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9643
- Form$2.Field,
9644
- {
9645
- control: form.control,
9646
- name: "email",
9647
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9648
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9649
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9650
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9651
- ] })
9652
- }
9653
- ) }),
9631
+ /* @__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: [
9632
+ /* @__PURE__ */ jsxRuntime.jsx(
9633
+ Form$2.Field,
9634
+ {
9635
+ control: form.control,
9636
+ name: "country_code",
9637
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9638
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
9639
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
9640
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9641
+ ] })
9642
+ }
9643
+ ),
9644
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9645
+ /* @__PURE__ */ jsxRuntime.jsx(
9646
+ Form$2.Field,
9647
+ {
9648
+ control: form.control,
9649
+ name: "first_name",
9650
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9651
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
9652
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9653
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9654
+ ] })
9655
+ }
9656
+ ),
9657
+ /* @__PURE__ */ jsxRuntime.jsx(
9658
+ Form$2.Field,
9659
+ {
9660
+ control: form.control,
9661
+ name: "last_name",
9662
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9663
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
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
+ ] }),
9670
+ /* @__PURE__ */ jsxRuntime.jsx(
9671
+ Form$2.Field,
9672
+ {
9673
+ control: form.control,
9674
+ name: "company",
9675
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9676
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
9677
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9678
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9679
+ ] })
9680
+ }
9681
+ ),
9682
+ /* @__PURE__ */ jsxRuntime.jsx(
9683
+ Form$2.Field,
9684
+ {
9685
+ control: form.control,
9686
+ name: "address_1",
9687
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9688
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
9689
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9690
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9691
+ ] })
9692
+ }
9693
+ ),
9694
+ /* @__PURE__ */ jsxRuntime.jsx(
9695
+ Form$2.Field,
9696
+ {
9697
+ control: form.control,
9698
+ name: "address_2",
9699
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9700
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
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.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9707
+ /* @__PURE__ */ jsxRuntime.jsx(
9708
+ Form$2.Field,
9709
+ {
9710
+ control: form.control,
9711
+ name: "postal_code",
9712
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9713
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
9714
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9715
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9716
+ ] })
9717
+ }
9718
+ ),
9719
+ /* @__PURE__ */ jsxRuntime.jsx(
9720
+ Form$2.Field,
9721
+ {
9722
+ control: form.control,
9723
+ name: "city",
9724
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9725
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
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
+ ] }),
9732
+ /* @__PURE__ */ jsxRuntime.jsx(
9733
+ Form$2.Field,
9734
+ {
9735
+ control: form.control,
9736
+ name: "province",
9737
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9738
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9739
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9740
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9741
+ ] })
9742
+ }
9743
+ ),
9744
+ /* @__PURE__ */ jsxRuntime.jsx(
9745
+ Form$2.Field,
9746
+ {
9747
+ control: form.control,
9748
+ name: "phone",
9749
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9750
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
9751
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9752
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9753
+ ] })
9754
+ }
9755
+ )
9756
+ ] }) }),
9654
9757
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9655
9758
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9656
9759
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
@@ -9659,6 +9762,25 @@ const EmailForm = ({ order }) => {
9659
9762
  }
9660
9763
  ) });
9661
9764
  };
9765
+ const schema$5 = addressSchema;
9766
+ const CustomItems = () => {
9767
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9768
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9769
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9770
+ ] });
9771
+ };
9772
+ const CustomItemsForm = () => {
9773
+ const form = reactHookForm.useForm({
9774
+ resolver: zod.zodResolver(schema$4)
9775
+ });
9776
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9777
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9778
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9779
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9780
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9781
+ ] }) })
9782
+ ] }) });
9783
+ };
9662
9784
  const schema$4 = objectType({
9663
9785
  email: stringType().email()
9664
9786
  });
@@ -10636,356 +10758,6 @@ const customItemSchema = objectType({
10636
10758
  quantity: numberType(),
10637
10759
  unit_price: unionType([numberType(), stringType()])
10638
10760
  });
10639
- const InlineTip = React.forwardRef(
10640
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10641
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10642
- return /* @__PURE__ */ jsxRuntime.jsxs(
10643
- "div",
10644
- {
10645
- ref,
10646
- className: ui.clx(
10647
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10648
- className
10649
- ),
10650
- ...props,
10651
- children: [
10652
- /* @__PURE__ */ jsxRuntime.jsx(
10653
- "div",
10654
- {
10655
- role: "presentation",
10656
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10657
- "bg-ui-tag-orange-icon": variant === "warning"
10658
- })
10659
- }
10660
- ),
10661
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10662
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10663
- labelValue,
10664
- ":"
10665
- ] }),
10666
- " ",
10667
- children
10668
- ] })
10669
- ]
10670
- }
10671
- );
10672
- }
10673
- );
10674
- InlineTip.displayName = "InlineTip";
10675
- const MetadataFieldSchema = objectType({
10676
- key: stringType(),
10677
- disabled: booleanType().optional(),
10678
- value: anyType()
10679
- });
10680
- const MetadataSchema = objectType({
10681
- metadata: arrayType(MetadataFieldSchema)
10682
- });
10683
- const Metadata = () => {
10684
- const { id } = reactRouterDom.useParams();
10685
- const { order, isPending, isError, error } = useOrder(id, {
10686
- fields: "metadata"
10687
- });
10688
- if (isError) {
10689
- throw error;
10690
- }
10691
- const isReady = !isPending && !!order;
10692
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10693
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10694
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10695
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10696
- ] }),
10697
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10698
- ] });
10699
- };
10700
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10701
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10702
- const MetadataForm = ({ orderId, metadata }) => {
10703
- const { handleSuccess } = useRouteModal();
10704
- const hasUneditableRows = getHasUneditableRows(metadata);
10705
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10706
- const form = reactHookForm.useForm({
10707
- defaultValues: {
10708
- metadata: getDefaultValues(metadata)
10709
- },
10710
- resolver: zod.zodResolver(MetadataSchema)
10711
- });
10712
- const handleSubmit = form.handleSubmit(async (data) => {
10713
- const parsedData = parseValues(data);
10714
- await mutateAsync(
10715
- {
10716
- metadata: parsedData
10717
- },
10718
- {
10719
- onSuccess: () => {
10720
- ui.toast.success("Metadata updated");
10721
- handleSuccess();
10722
- },
10723
- onError: (error) => {
10724
- ui.toast.error(error.message);
10725
- }
10726
- }
10727
- );
10728
- });
10729
- const { fields, insert, remove } = reactHookForm.useFieldArray({
10730
- control: form.control,
10731
- name: "metadata"
10732
- });
10733
- function deleteRow(index) {
10734
- remove(index);
10735
- if (fields.length === 1) {
10736
- insert(0, {
10737
- key: "",
10738
- value: "",
10739
- disabled: false
10740
- });
10741
- }
10742
- }
10743
- function insertRow(index, position) {
10744
- insert(index + (position === "above" ? 0 : 1), {
10745
- key: "",
10746
- value: "",
10747
- disabled: false
10748
- });
10749
- }
10750
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10751
- KeyboundForm,
10752
- {
10753
- onSubmit: handleSubmit,
10754
- className: "flex flex-1 flex-col overflow-hidden",
10755
- children: [
10756
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10757
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10758
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10759
- /* @__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" }) }),
10760
- /* @__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" }) })
10761
- ] }),
10762
- fields.map((field, index) => {
10763
- const isDisabled = field.disabled || false;
10764
- let placeholder = "-";
10765
- if (typeof field.value === "object") {
10766
- placeholder = "{ ... }";
10767
- }
10768
- if (Array.isArray(field.value)) {
10769
- placeholder = "[ ... ]";
10770
- }
10771
- return /* @__PURE__ */ jsxRuntime.jsx(
10772
- ConditionalTooltip,
10773
- {
10774
- showTooltip: isDisabled,
10775
- content: "This row is disabled because it contains non-primitive data.",
10776
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
10777
- /* @__PURE__ */ jsxRuntime.jsxs(
10778
- "div",
10779
- {
10780
- className: ui.clx("grid grid-cols-2 divide-x", {
10781
- "overflow-hidden rounded-b-lg": index === fields.length - 1
10782
- }),
10783
- children: [
10784
- /* @__PURE__ */ jsxRuntime.jsx(
10785
- Form$2.Field,
10786
- {
10787
- control: form.control,
10788
- name: `metadata.${index}.key`,
10789
- render: ({ field: field2 }) => {
10790
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10791
- GridInput,
10792
- {
10793
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10794
- ...field2,
10795
- disabled: isDisabled,
10796
- placeholder: "Key"
10797
- }
10798
- ) }) });
10799
- }
10800
- }
10801
- ),
10802
- /* @__PURE__ */ jsxRuntime.jsx(
10803
- Form$2.Field,
10804
- {
10805
- control: form.control,
10806
- name: `metadata.${index}.value`,
10807
- render: ({ field: { value, ...field2 } }) => {
10808
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10809
- GridInput,
10810
- {
10811
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
10812
- ...field2,
10813
- value: isDisabled ? placeholder : value,
10814
- disabled: isDisabled,
10815
- placeholder: "Value"
10816
- }
10817
- ) }) });
10818
- }
10819
- }
10820
- )
10821
- ]
10822
- }
10823
- ),
10824
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
10825
- /* @__PURE__ */ jsxRuntime.jsx(
10826
- ui.DropdownMenu.Trigger,
10827
- {
10828
- className: ui.clx(
10829
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
10830
- {
10831
- hidden: isDisabled
10832
- }
10833
- ),
10834
- disabled: isDisabled,
10835
- asChild: true,
10836
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
10837
- }
10838
- ),
10839
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
10840
- /* @__PURE__ */ jsxRuntime.jsxs(
10841
- ui.DropdownMenu.Item,
10842
- {
10843
- className: "gap-x-2",
10844
- onClick: () => insertRow(index, "above"),
10845
- children: [
10846
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
10847
- "Insert row above"
10848
- ]
10849
- }
10850
- ),
10851
- /* @__PURE__ */ jsxRuntime.jsxs(
10852
- ui.DropdownMenu.Item,
10853
- {
10854
- className: "gap-x-2",
10855
- onClick: () => insertRow(index, "below"),
10856
- children: [
10857
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
10858
- "Insert row below"
10859
- ]
10860
- }
10861
- ),
10862
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
10863
- /* @__PURE__ */ jsxRuntime.jsxs(
10864
- ui.DropdownMenu.Item,
10865
- {
10866
- className: "gap-x-2",
10867
- onClick: () => deleteRow(index),
10868
- children: [
10869
- /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
10870
- "Delete row"
10871
- ]
10872
- }
10873
- )
10874
- ] })
10875
- ] })
10876
- ] })
10877
- },
10878
- field.id
10879
- );
10880
- })
10881
- ] }),
10882
- 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." })
10883
- ] }),
10884
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10885
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10886
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10887
- ] }) })
10888
- ]
10889
- }
10890
- ) });
10891
- };
10892
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
10893
- return /* @__PURE__ */ jsxRuntime.jsx(
10894
- "input",
10895
- {
10896
- ref,
10897
- ...props,
10898
- autoComplete: "off",
10899
- className: ui.clx(
10900
- "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",
10901
- className
10902
- )
10903
- }
10904
- );
10905
- });
10906
- GridInput.displayName = "MetadataForm.GridInput";
10907
- const PlaceholderInner = () => {
10908
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
10909
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
10910
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10911
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
10912
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
10913
- ] }) })
10914
- ] });
10915
- };
10916
- const EDITABLE_TYPES = ["string", "number", "boolean"];
10917
- function getDefaultValues(metadata) {
10918
- if (!metadata || !Object.keys(metadata).length) {
10919
- return [
10920
- {
10921
- key: "",
10922
- value: "",
10923
- disabled: false
10924
- }
10925
- ];
10926
- }
10927
- return Object.entries(metadata).map(([key, value]) => {
10928
- if (!EDITABLE_TYPES.includes(typeof value)) {
10929
- return {
10930
- key,
10931
- value,
10932
- disabled: true
10933
- };
10934
- }
10935
- let stringValue = value;
10936
- if (typeof value !== "string") {
10937
- stringValue = JSON.stringify(value);
10938
- }
10939
- return {
10940
- key,
10941
- value: stringValue,
10942
- original_key: key
10943
- };
10944
- });
10945
- }
10946
- function parseValues(values) {
10947
- const metadata = values.metadata;
10948
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
10949
- if (isEmpty) {
10950
- return null;
10951
- }
10952
- const update = {};
10953
- metadata.forEach((field) => {
10954
- let key = field.key;
10955
- let value = field.value;
10956
- const disabled = field.disabled;
10957
- if (!key || !value) {
10958
- return;
10959
- }
10960
- if (disabled) {
10961
- update[key] = value;
10962
- return;
10963
- }
10964
- key = key.trim();
10965
- value = value.trim();
10966
- if (value === "true") {
10967
- update[key] = true;
10968
- } else if (value === "false") {
10969
- update[key] = false;
10970
- } else {
10971
- const parsedNumber = parseFloat(value);
10972
- if (!isNaN(parsedNumber)) {
10973
- update[key] = parsedNumber;
10974
- } else {
10975
- update[key] = value;
10976
- }
10977
- }
10978
- });
10979
- return update;
10980
- }
10981
- function getHasUneditableRows(metadata) {
10982
- if (!metadata) {
10983
- return false;
10984
- }
10985
- return Object.values(metadata).some(
10986
- (value) => !EDITABLE_TYPES.includes(typeof value)
10987
- );
10988
- }
10989
10761
  const PROMOTION_QUERY_KEY = "promotions";
10990
10762
  const promotionsQueryKeys = {
10991
10763
  list: (query2) => [
@@ -11260,9 +11032,77 @@ function getPromotionIds(items, shippingMethods) {
11260
11032
  }
11261
11033
  }
11262
11034
  }
11263
- }
11264
- return Array.from(promotionIds);
11265
- }
11035
+ }
11036
+ return Array.from(promotionIds);
11037
+ }
11038
+ const Email = () => {
11039
+ const { id } = reactRouterDom.useParams();
11040
+ const { order, isPending, isError, error } = useOrder(id, {
11041
+ fields: "+email"
11042
+ });
11043
+ if (isError) {
11044
+ throw error;
11045
+ }
11046
+ const isReady = !isPending && !!order;
11047
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11048
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11049
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
11050
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
11051
+ ] }),
11052
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
11053
+ ] });
11054
+ };
11055
+ const EmailForm = ({ order }) => {
11056
+ const form = reactHookForm.useForm({
11057
+ defaultValues: {
11058
+ email: order.email ?? ""
11059
+ },
11060
+ resolver: zod.zodResolver(schema$3)
11061
+ });
11062
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11063
+ const { handleSuccess } = useRouteModal();
11064
+ const onSubmit = form.handleSubmit(async (data) => {
11065
+ await mutateAsync(
11066
+ { email: data.email },
11067
+ {
11068
+ onSuccess: () => {
11069
+ handleSuccess();
11070
+ },
11071
+ onError: (error) => {
11072
+ ui.toast.error(error.message);
11073
+ }
11074
+ }
11075
+ );
11076
+ });
11077
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11078
+ KeyboundForm,
11079
+ {
11080
+ className: "flex flex-1 flex-col overflow-hidden",
11081
+ onSubmit,
11082
+ children: [
11083
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
11084
+ Form$2.Field,
11085
+ {
11086
+ control: form.control,
11087
+ name: "email",
11088
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11089
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
11090
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11091
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11092
+ ] })
11093
+ }
11094
+ ) }),
11095
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11096
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11097
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11098
+ ] }) })
11099
+ ]
11100
+ }
11101
+ ) });
11102
+ };
11103
+ const schema$3 = objectType({
11104
+ email: stringType().email()
11105
+ });
11266
11106
  const SalesChannel = () => {
11267
11107
  const { id } = reactRouterDom.useParams();
11268
11108
  const { draft_order, isPending, isError, error } = useDraftOrder(
@@ -11291,7 +11131,7 @@ const SalesChannelForm = ({ order }) => {
11291
11131
  defaultValues: {
11292
11132
  sales_channel_id: order.sales_channel_id || ""
11293
11133
  },
11294
- resolver: zod.zodResolver(schema$3)
11134
+ resolver: zod.zodResolver(schema$2)
11295
11135
  });
11296
11136
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11297
11137
  const { handleSuccess } = useRouteModal();
@@ -11366,7 +11206,7 @@ const SalesChannelField = ({ control, order }) => {
11366
11206
  }
11367
11207
  );
11368
11208
  };
11369
- const schema$3 = objectType({
11209
+ const schema$2 = objectType({
11370
11210
  sales_channel_id: stringType().min(1)
11371
11211
  });
11372
11212
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
@@ -12208,7 +12048,7 @@ const ShippingAddressForm = ({ order }) => {
12208
12048
  postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12209
12049
  phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12210
12050
  },
12211
- resolver: zod.zodResolver(schema$2)
12051
+ resolver: zod.zodResolver(schema$1)
12212
12052
  });
12213
12053
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12214
12054
  const { handleSuccess } = useRouteModal();
@@ -12378,7 +12218,7 @@ const ShippingAddressForm = ({ order }) => {
12378
12218
  }
12379
12219
  ) });
12380
12220
  };
12381
- const schema$2 = addressSchema;
12221
+ const schema$1 = addressSchema;
12382
12222
  const TransferOwnership = () => {
12383
12223
  const { id } = reactRouterDom.useParams();
12384
12224
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12402,7 +12242,7 @@ const TransferOwnershipForm = ({ order }) => {
12402
12242
  defaultValues: {
12403
12243
  customer_id: order.customer_id || ""
12404
12244
  },
12405
- resolver: zod.zodResolver(schema$1)
12245
+ resolver: zod.zodResolver(schema)
12406
12246
  });
12407
12247
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12408
12248
  const { handleSuccess } = useRouteModal();
@@ -12852,13 +12692,57 @@ const Illustration = () => {
12852
12692
  }
12853
12693
  );
12854
12694
  };
12855
- const schema$1 = objectType({
12695
+ const schema = objectType({
12856
12696
  customer_id: stringType().min(1)
12857
12697
  });
12858
- const BillingAddress = () => {
12698
+ const InlineTip = React.forwardRef(
12699
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
12700
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
12701
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12702
+ "div",
12703
+ {
12704
+ ref,
12705
+ className: ui.clx(
12706
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
12707
+ className
12708
+ ),
12709
+ ...props,
12710
+ children: [
12711
+ /* @__PURE__ */ jsxRuntime.jsx(
12712
+ "div",
12713
+ {
12714
+ role: "presentation",
12715
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
12716
+ "bg-ui-tag-orange-icon": variant === "warning"
12717
+ })
12718
+ }
12719
+ ),
12720
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
12721
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
12722
+ labelValue,
12723
+ ":"
12724
+ ] }),
12725
+ " ",
12726
+ children
12727
+ ] })
12728
+ ]
12729
+ }
12730
+ );
12731
+ }
12732
+ );
12733
+ InlineTip.displayName = "InlineTip";
12734
+ const MetadataFieldSchema = objectType({
12735
+ key: stringType(),
12736
+ disabled: booleanType().optional(),
12737
+ value: anyType()
12738
+ });
12739
+ const MetadataSchema = objectType({
12740
+ metadata: arrayType(MetadataFieldSchema)
12741
+ });
12742
+ const Metadata = () => {
12859
12743
  const { id } = reactRouterDom.useParams();
12860
12744
  const { order, isPending, isError, error } = useOrder(id, {
12861
- fields: "+billing_address"
12745
+ fields: "metadata"
12862
12746
  });
12863
12747
  if (isError) {
12864
12748
  throw error;
@@ -12866,36 +12750,33 @@ const BillingAddress = () => {
12866
12750
  const isReady = !isPending && !!order;
12867
12751
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12868
12752
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12869
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
12870
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12753
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
12754
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
12871
12755
  ] }),
12872
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
12756
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
12873
12757
  ] });
12874
12758
  };
12875
- const BillingAddressForm = ({ order }) => {
12876
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12759
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
12760
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
12761
+ const MetadataForm = ({ orderId, metadata }) => {
12762
+ const { handleSuccess } = useRouteModal();
12763
+ const hasUneditableRows = getHasUneditableRows(metadata);
12764
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
12877
12765
  const form = reactHookForm.useForm({
12878
12766
  defaultValues: {
12879
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12880
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12881
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12882
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12883
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12884
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12885
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12886
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12887
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12888
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12767
+ metadata: getDefaultValues(metadata)
12889
12768
  },
12890
- resolver: zod.zodResolver(schema)
12769
+ resolver: zod.zodResolver(MetadataSchema)
12891
12770
  });
12892
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12893
- const { handleSuccess } = useRouteModal();
12894
- const onSubmit = form.handleSubmit(async (data) => {
12771
+ const handleSubmit = form.handleSubmit(async (data) => {
12772
+ const parsedData = parseValues(data);
12895
12773
  await mutateAsync(
12896
- { billing_address: data },
12774
+ {
12775
+ metadata: parsedData
12776
+ },
12897
12777
  {
12898
12778
  onSuccess: () => {
12779
+ ui.toast.success("Metadata updated");
12899
12780
  handleSuccess();
12900
12781
  },
12901
12782
  onError: (error) => {
@@ -12904,147 +12785,266 @@ const BillingAddressForm = ({ order }) => {
12904
12785
  }
12905
12786
  );
12906
12787
  });
12788
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
12789
+ control: form.control,
12790
+ name: "metadata"
12791
+ });
12792
+ function deleteRow(index) {
12793
+ remove(index);
12794
+ if (fields.length === 1) {
12795
+ insert(0, {
12796
+ key: "",
12797
+ value: "",
12798
+ disabled: false
12799
+ });
12800
+ }
12801
+ }
12802
+ function insertRow(index, position) {
12803
+ insert(index + (position === "above" ? 0 : 1), {
12804
+ key: "",
12805
+ value: "",
12806
+ disabled: false
12807
+ });
12808
+ }
12907
12809
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12908
12810
  KeyboundForm,
12909
12811
  {
12812
+ onSubmit: handleSubmit,
12910
12813
  className: "flex flex-1 flex-col overflow-hidden",
12911
- onSubmit,
12912
12814
  children: [
12913
- /* @__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: [
12914
- /* @__PURE__ */ jsxRuntime.jsx(
12915
- Form$2.Field,
12916
- {
12917
- control: form.control,
12918
- name: "country_code",
12919
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12920
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12921
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12922
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12923
- ] })
12924
- }
12925
- ),
12926
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12927
- /* @__PURE__ */ jsxRuntime.jsx(
12928
- Form$2.Field,
12929
- {
12930
- control: form.control,
12931
- name: "first_name",
12932
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12933
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12934
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12935
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12936
- ] })
12937
- }
12938
- ),
12939
- /* @__PURE__ */ jsxRuntime.jsx(
12940
- Form$2.Field,
12941
- {
12942
- control: form.control,
12943
- name: "last_name",
12944
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12945
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
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
- ] }),
12952
- /* @__PURE__ */ jsxRuntime.jsx(
12953
- Form$2.Field,
12954
- {
12955
- control: form.control,
12956
- name: "company",
12957
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12958
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12959
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12960
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12961
- ] })
12962
- }
12963
- ),
12964
- /* @__PURE__ */ jsxRuntime.jsx(
12965
- Form$2.Field,
12966
- {
12967
- control: form.control,
12968
- name: "address_1",
12969
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12970
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12971
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12972
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12973
- ] })
12974
- }
12975
- ),
12976
- /* @__PURE__ */ jsxRuntime.jsx(
12977
- Form$2.Field,
12978
- {
12979
- control: form.control,
12980
- name: "address_2",
12981
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12982
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
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.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12989
- /* @__PURE__ */ jsxRuntime.jsx(
12990
- Form$2.Field,
12991
- {
12992
- control: form.control,
12993
- name: "postal_code",
12994
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12995
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12996
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12997
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12998
- ] })
12815
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
12816
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
12817
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
12818
+ /* @__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" }) }),
12819
+ /* @__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" }) })
12820
+ ] }),
12821
+ fields.map((field, index) => {
12822
+ const isDisabled = field.disabled || false;
12823
+ let placeholder = "-";
12824
+ if (typeof field.value === "object") {
12825
+ placeholder = "{ ... }";
12999
12826
  }
13000
- ),
13001
- /* @__PURE__ */ jsxRuntime.jsx(
13002
- Form$2.Field,
13003
- {
13004
- control: form.control,
13005
- name: "city",
13006
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13007
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13008
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13009
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13010
- ] })
12827
+ if (Array.isArray(field.value)) {
12828
+ placeholder = "[ ... ]";
13011
12829
  }
13012
- )
12830
+ return /* @__PURE__ */ jsxRuntime.jsx(
12831
+ ConditionalTooltip,
12832
+ {
12833
+ showTooltip: isDisabled,
12834
+ content: "This row is disabled because it contains non-primitive data.",
12835
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
12836
+ /* @__PURE__ */ jsxRuntime.jsxs(
12837
+ "div",
12838
+ {
12839
+ className: ui.clx("grid grid-cols-2 divide-x", {
12840
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
12841
+ }),
12842
+ children: [
12843
+ /* @__PURE__ */ jsxRuntime.jsx(
12844
+ Form$2.Field,
12845
+ {
12846
+ control: form.control,
12847
+ name: `metadata.${index}.key`,
12848
+ render: ({ field: field2 }) => {
12849
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12850
+ GridInput,
12851
+ {
12852
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
12853
+ ...field2,
12854
+ disabled: isDisabled,
12855
+ placeholder: "Key"
12856
+ }
12857
+ ) }) });
12858
+ }
12859
+ }
12860
+ ),
12861
+ /* @__PURE__ */ jsxRuntime.jsx(
12862
+ Form$2.Field,
12863
+ {
12864
+ control: form.control,
12865
+ name: `metadata.${index}.value`,
12866
+ render: ({ field: { value, ...field2 } }) => {
12867
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12868
+ GridInput,
12869
+ {
12870
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
12871
+ ...field2,
12872
+ value: isDisabled ? placeholder : value,
12873
+ disabled: isDisabled,
12874
+ placeholder: "Value"
12875
+ }
12876
+ ) }) });
12877
+ }
12878
+ }
12879
+ )
12880
+ ]
12881
+ }
12882
+ ),
12883
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
12884
+ /* @__PURE__ */ jsxRuntime.jsx(
12885
+ ui.DropdownMenu.Trigger,
12886
+ {
12887
+ className: ui.clx(
12888
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
12889
+ {
12890
+ hidden: isDisabled
12891
+ }
12892
+ ),
12893
+ disabled: isDisabled,
12894
+ asChild: true,
12895
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
12896
+ }
12897
+ ),
12898
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
12899
+ /* @__PURE__ */ jsxRuntime.jsxs(
12900
+ ui.DropdownMenu.Item,
12901
+ {
12902
+ className: "gap-x-2",
12903
+ onClick: () => insertRow(index, "above"),
12904
+ children: [
12905
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
12906
+ "Insert row above"
12907
+ ]
12908
+ }
12909
+ ),
12910
+ /* @__PURE__ */ jsxRuntime.jsxs(
12911
+ ui.DropdownMenu.Item,
12912
+ {
12913
+ className: "gap-x-2",
12914
+ onClick: () => insertRow(index, "below"),
12915
+ children: [
12916
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
12917
+ "Insert row below"
12918
+ ]
12919
+ }
12920
+ ),
12921
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
12922
+ /* @__PURE__ */ jsxRuntime.jsxs(
12923
+ ui.DropdownMenu.Item,
12924
+ {
12925
+ className: "gap-x-2",
12926
+ onClick: () => deleteRow(index),
12927
+ children: [
12928
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
12929
+ "Delete row"
12930
+ ]
12931
+ }
12932
+ )
12933
+ ] })
12934
+ ] })
12935
+ ] })
12936
+ },
12937
+ field.id
12938
+ );
12939
+ })
13013
12940
  ] }),
13014
- /* @__PURE__ */ jsxRuntime.jsx(
13015
- Form$2.Field,
13016
- {
13017
- control: form.control,
13018
- name: "province",
13019
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13020
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13021
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13022
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13023
- ] })
13024
- }
13025
- ),
13026
- /* @__PURE__ */ jsxRuntime.jsx(
13027
- Form$2.Field,
13028
- {
13029
- control: form.control,
13030
- name: "phone",
13031
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13032
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13033
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13034
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13035
- ] })
13036
- }
13037
- )
13038
- ] }) }),
13039
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13040
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12941
+ 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." })
12942
+ ] }),
12943
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12944
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
13041
12945
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13042
12946
  ] }) })
13043
12947
  ]
13044
12948
  }
13045
12949
  ) });
13046
12950
  };
13047
- const schema = addressSchema;
12951
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
12952
+ return /* @__PURE__ */ jsxRuntime.jsx(
12953
+ "input",
12954
+ {
12955
+ ref,
12956
+ ...props,
12957
+ autoComplete: "off",
12958
+ className: ui.clx(
12959
+ "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",
12960
+ className
12961
+ )
12962
+ }
12963
+ );
12964
+ });
12965
+ GridInput.displayName = "MetadataForm.GridInput";
12966
+ const PlaceholderInner = () => {
12967
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
12968
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
12969
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12970
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
12971
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
12972
+ ] }) })
12973
+ ] });
12974
+ };
12975
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
12976
+ function getDefaultValues(metadata) {
12977
+ if (!metadata || !Object.keys(metadata).length) {
12978
+ return [
12979
+ {
12980
+ key: "",
12981
+ value: "",
12982
+ disabled: false
12983
+ }
12984
+ ];
12985
+ }
12986
+ return Object.entries(metadata).map(([key, value]) => {
12987
+ if (!EDITABLE_TYPES.includes(typeof value)) {
12988
+ return {
12989
+ key,
12990
+ value,
12991
+ disabled: true
12992
+ };
12993
+ }
12994
+ let stringValue = value;
12995
+ if (typeof value !== "string") {
12996
+ stringValue = JSON.stringify(value);
12997
+ }
12998
+ return {
12999
+ key,
13000
+ value: stringValue,
13001
+ original_key: key
13002
+ };
13003
+ });
13004
+ }
13005
+ function parseValues(values) {
13006
+ const metadata = values.metadata;
13007
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
13008
+ if (isEmpty) {
13009
+ return null;
13010
+ }
13011
+ const update = {};
13012
+ metadata.forEach((field) => {
13013
+ let key = field.key;
13014
+ let value = field.value;
13015
+ const disabled = field.disabled;
13016
+ if (!key || !value) {
13017
+ return;
13018
+ }
13019
+ if (disabled) {
13020
+ update[key] = value;
13021
+ return;
13022
+ }
13023
+ key = key.trim();
13024
+ value = value.trim();
13025
+ if (value === "true") {
13026
+ update[key] = true;
13027
+ } else if (value === "false") {
13028
+ update[key] = false;
13029
+ } else {
13030
+ const parsedNumber = parseFloat(value);
13031
+ if (!isNaN(parsedNumber)) {
13032
+ update[key] = parsedNumber;
13033
+ } else {
13034
+ update[key] = value;
13035
+ }
13036
+ }
13037
+ });
13038
+ return update;
13039
+ }
13040
+ function getHasUneditableRows(metadata) {
13041
+ if (!metadata) {
13042
+ return false;
13043
+ }
13044
+ return Object.values(metadata).some(
13045
+ (value) => !EDITABLE_TYPES.includes(typeof value)
13046
+ );
13047
+ }
13048
13048
  const widgetModule = { widgets: [] };
13049
13049
  const routeModule = {
13050
13050
  routes: [
@@ -13066,25 +13066,25 @@ const routeModule = {
13066
13066
  loader,
13067
13067
  children: [
13068
13068
  {
13069
- Component: CustomItems,
13070
- path: "/draft-orders/:id/custom-items"
13069
+ Component: BillingAddress,
13070
+ path: "/draft-orders/:id/billing-address"
13071
13071
  },
13072
13072
  {
13073
- Component: Email,
13074
- path: "/draft-orders/:id/email"
13073
+ Component: CustomItems,
13074
+ path: "/draft-orders/:id/custom-items"
13075
13075
  },
13076
13076
  {
13077
13077
  Component: Items,
13078
13078
  path: "/draft-orders/:id/items"
13079
13079
  },
13080
- {
13081
- Component: Metadata,
13082
- path: "/draft-orders/:id/metadata"
13083
- },
13084
13080
  {
13085
13081
  Component: Promotions,
13086
13082
  path: "/draft-orders/:id/promotions"
13087
13083
  },
13084
+ {
13085
+ Component: Email,
13086
+ path: "/draft-orders/:id/email"
13087
+ },
13088
13088
  {
13089
13089
  Component: SalesChannel,
13090
13090
  path: "/draft-orders/:id/sales-channel"
@@ -13102,8 +13102,8 @@ const routeModule = {
13102
13102
  path: "/draft-orders/:id/transfer-ownership"
13103
13103
  },
13104
13104
  {
13105
- Component: BillingAddress,
13106
- path: "/draft-orders/:id/billing-address"
13105
+ Component: Metadata,
13106
+ path: "/draft-orders/:id/metadata"
13107
13107
  }
13108
13108
  ]
13109
13109
  }