@medusajs/draft-order 2.10.2-snapshot-20250901132949 → 2.10.2-snapshot-20250901165744

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.
@@ -4,7 +4,7 @@ import { Tooltip, DropdownMenu, clx, IconButton, useDataTable, DataTable as Data
4
4
  import { useQuery, useQueryClient, useMutation, keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
5
5
  import React, { useState, useCallback, useMemo, Fragment, createContext, forwardRef, useId, useContext, useTransition, useRef, useImperativeHandle, useDeferredValue, useEffect, Suspense } from "react";
6
6
  import { useSearchParams, Link, useNavigate, Outlet, useBlocker, useLocation, useParams } from "react-router-dom";
7
- import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, Minus, PencilSquare, EllipsisVertical, ArrowUpMini, ArrowDownMini } from "@medusajs/icons";
7
+ import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, EllipsisVertical, ArrowUpMini, ArrowDownMini, Minus, PencilSquare } from "@medusajs/icons";
8
8
  import Medusa from "@medusajs/js-sdk";
9
9
  import { format, formatDistance, sub, subDays, subMonths } from "date-fns";
10
10
  import { enUS } from "date-fns/locale";
@@ -9554,10 +9554,75 @@ const ID = () => {
9554
9554
  /* @__PURE__ */ jsx(Outlet, {})
9555
9555
  ] });
9556
9556
  };
9557
- const BillingAddress = () => {
9557
+ const CustomItems = () => {
9558
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9559
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9560
+ /* @__PURE__ */ jsx(CustomItemsForm, {})
9561
+ ] });
9562
+ };
9563
+ const CustomItemsForm = () => {
9564
+ const form = useForm({
9565
+ resolver: zodResolver(schema$5)
9566
+ });
9567
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9568
+ /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9569
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9570
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9571
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9572
+ ] }) })
9573
+ ] }) });
9574
+ };
9575
+ const schema$5 = objectType({
9576
+ email: stringType().email()
9577
+ });
9578
+ const InlineTip = forwardRef(
9579
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
9580
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9581
+ return /* @__PURE__ */ jsxs(
9582
+ "div",
9583
+ {
9584
+ ref,
9585
+ className: clx(
9586
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9587
+ className
9588
+ ),
9589
+ ...props,
9590
+ children: [
9591
+ /* @__PURE__ */ jsx(
9592
+ "div",
9593
+ {
9594
+ role: "presentation",
9595
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9596
+ "bg-ui-tag-orange-icon": variant === "warning"
9597
+ })
9598
+ }
9599
+ ),
9600
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
9601
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9602
+ labelValue,
9603
+ ":"
9604
+ ] }),
9605
+ " ",
9606
+ children
9607
+ ] })
9608
+ ]
9609
+ }
9610
+ );
9611
+ }
9612
+ );
9613
+ InlineTip.displayName = "InlineTip";
9614
+ const MetadataFieldSchema = objectType({
9615
+ key: stringType(),
9616
+ disabled: booleanType().optional(),
9617
+ value: anyType()
9618
+ });
9619
+ const MetadataSchema = objectType({
9620
+ metadata: arrayType(MetadataFieldSchema)
9621
+ });
9622
+ const Metadata = () => {
9558
9623
  const { id } = useParams();
9559
9624
  const { order, isPending, isError, error } = useOrder(id, {
9560
- fields: "+billing_address"
9625
+ fields: "metadata"
9561
9626
  });
9562
9627
  if (isError) {
9563
9628
  throw error;
@@ -9565,36 +9630,33 @@ const BillingAddress = () => {
9565
9630
  const isReady = !isPending && !!order;
9566
9631
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9567
9632
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9568
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
9569
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9633
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
9634
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9570
9635
  ] }),
9571
- isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
9636
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9572
9637
  ] });
9573
9638
  };
9574
- const BillingAddressForm = ({ order }) => {
9575
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9639
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9640
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9641
+ const MetadataForm = ({ orderId, metadata }) => {
9642
+ const { handleSuccess } = useRouteModal();
9643
+ const hasUneditableRows = getHasUneditableRows(metadata);
9644
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
9576
9645
  const form = useForm({
9577
9646
  defaultValues: {
9578
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9579
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9580
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9581
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9582
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9583
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9584
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9585
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9586
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9587
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9647
+ metadata: getDefaultValues(metadata)
9588
9648
  },
9589
- resolver: zodResolver(schema$5)
9649
+ resolver: zodResolver(MetadataSchema)
9590
9650
  });
9591
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9592
- const { handleSuccess } = useRouteModal();
9593
- const onSubmit = form.handleSubmit(async (data) => {
9651
+ const handleSubmit = form.handleSubmit(async (data) => {
9652
+ const parsedData = parseValues(data);
9594
9653
  await mutateAsync(
9595
- { billing_address: data },
9654
+ {
9655
+ metadata: parsedData
9656
+ },
9596
9657
  {
9597
9658
  onSuccess: () => {
9659
+ toast.success("Metadata updated");
9598
9660
  handleSuccess();
9599
9661
  },
9600
9662
  onError: (error) => {
@@ -9603,236 +9665,266 @@ const BillingAddressForm = ({ order }) => {
9603
9665
  }
9604
9666
  );
9605
9667
  });
9668
+ const { fields, insert, remove } = useFieldArray({
9669
+ control: form.control,
9670
+ name: "metadata"
9671
+ });
9672
+ function deleteRow(index) {
9673
+ remove(index);
9674
+ if (fields.length === 1) {
9675
+ insert(0, {
9676
+ key: "",
9677
+ value: "",
9678
+ disabled: false
9679
+ });
9680
+ }
9681
+ }
9682
+ function insertRow(index, position) {
9683
+ insert(index + (position === "above" ? 0 : 1), {
9684
+ key: "",
9685
+ value: "",
9686
+ disabled: false
9687
+ });
9688
+ }
9606
9689
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9607
9690
  KeyboundForm,
9608
9691
  {
9692
+ onSubmit: handleSubmit,
9609
9693
  className: "flex flex-1 flex-col overflow-hidden",
9610
- onSubmit,
9611
9694
  children: [
9612
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
9613
- /* @__PURE__ */ jsx(
9614
- Form$2.Field,
9615
- {
9616
- control: form.control,
9617
- name: "country_code",
9618
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9619
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
9620
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
9621
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9622
- ] })
9623
- }
9624
- ),
9625
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9626
- /* @__PURE__ */ jsx(
9627
- Form$2.Field,
9628
- {
9629
- control: form.control,
9630
- name: "first_name",
9631
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9632
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
9633
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9634
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9635
- ] })
9636
- }
9637
- ),
9638
- /* @__PURE__ */ jsx(
9639
- Form$2.Field,
9640
- {
9641
- control: form.control,
9642
- name: "last_name",
9643
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9644
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
9645
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9646
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9647
- ] })
9648
- }
9649
- )
9650
- ] }),
9651
- /* @__PURE__ */ jsx(
9652
- Form$2.Field,
9653
- {
9654
- control: form.control,
9655
- name: "company",
9656
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9657
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
9658
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9659
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9660
- ] })
9661
- }
9662
- ),
9663
- /* @__PURE__ */ jsx(
9664
- Form$2.Field,
9665
- {
9666
- control: form.control,
9667
- name: "address_1",
9668
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9669
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
9670
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9671
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9672
- ] })
9673
- }
9674
- ),
9675
- /* @__PURE__ */ jsx(
9676
- Form$2.Field,
9677
- {
9678
- control: form.control,
9679
- name: "address_2",
9680
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9681
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9682
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9683
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9684
- ] })
9685
- }
9686
- ),
9687
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9688
- /* @__PURE__ */ jsx(
9689
- Form$2.Field,
9690
- {
9691
- control: form.control,
9692
- name: "postal_code",
9693
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9694
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
9695
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9696
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9697
- ] })
9695
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
9696
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
9697
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
9698
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
9699
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
9700
+ ] }),
9701
+ fields.map((field, index) => {
9702
+ const isDisabled = field.disabled || false;
9703
+ let placeholder = "-";
9704
+ if (typeof field.value === "object") {
9705
+ placeholder = "{ ... }";
9698
9706
  }
9699
- ),
9700
- /* @__PURE__ */ jsx(
9701
- Form$2.Field,
9702
- {
9703
- control: form.control,
9704
- name: "city",
9705
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9706
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
9707
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9708
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9709
- ] })
9707
+ if (Array.isArray(field.value)) {
9708
+ placeholder = "[ ... ]";
9710
9709
  }
9711
- )
9712
- ] }),
9713
- /* @__PURE__ */ jsx(
9714
- Form$2.Field,
9715
- {
9716
- control: form.control,
9717
- name: "province",
9718
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9719
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9720
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9721
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9722
- ] })
9723
- }
9724
- ),
9725
- /* @__PURE__ */ jsx(
9726
- Form$2.Field,
9727
- {
9728
- control: form.control,
9729
- name: "phone",
9730
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9731
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
9732
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9733
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9734
- ] })
9735
- }
9736
- )
9737
- ] }) }),
9738
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9739
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9710
+ return /* @__PURE__ */ jsx(
9711
+ ConditionalTooltip,
9712
+ {
9713
+ showTooltip: isDisabled,
9714
+ content: "This row is disabled because it contains non-primitive data.",
9715
+ children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
9716
+ /* @__PURE__ */ jsxs(
9717
+ "div",
9718
+ {
9719
+ className: clx("grid grid-cols-2 divide-x", {
9720
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
9721
+ }),
9722
+ children: [
9723
+ /* @__PURE__ */ jsx(
9724
+ Form$2.Field,
9725
+ {
9726
+ control: form.control,
9727
+ name: `metadata.${index}.key`,
9728
+ render: ({ field: field2 }) => {
9729
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
9730
+ GridInput,
9731
+ {
9732
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
9733
+ ...field2,
9734
+ disabled: isDisabled,
9735
+ placeholder: "Key"
9736
+ }
9737
+ ) }) });
9738
+ }
9739
+ }
9740
+ ),
9741
+ /* @__PURE__ */ jsx(
9742
+ Form$2.Field,
9743
+ {
9744
+ control: form.control,
9745
+ name: `metadata.${index}.value`,
9746
+ render: ({ field: { value, ...field2 } }) => {
9747
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
9748
+ GridInput,
9749
+ {
9750
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
9751
+ ...field2,
9752
+ value: isDisabled ? placeholder : value,
9753
+ disabled: isDisabled,
9754
+ placeholder: "Value"
9755
+ }
9756
+ ) }) });
9757
+ }
9758
+ }
9759
+ )
9760
+ ]
9761
+ }
9762
+ ),
9763
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
9764
+ /* @__PURE__ */ jsx(
9765
+ DropdownMenu.Trigger,
9766
+ {
9767
+ className: clx(
9768
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
9769
+ {
9770
+ hidden: isDisabled
9771
+ }
9772
+ ),
9773
+ disabled: isDisabled,
9774
+ asChild: true,
9775
+ children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
9776
+ }
9777
+ ),
9778
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
9779
+ /* @__PURE__ */ jsxs(
9780
+ DropdownMenu.Item,
9781
+ {
9782
+ className: "gap-x-2",
9783
+ onClick: () => insertRow(index, "above"),
9784
+ children: [
9785
+ /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
9786
+ "Insert row above"
9787
+ ]
9788
+ }
9789
+ ),
9790
+ /* @__PURE__ */ jsxs(
9791
+ DropdownMenu.Item,
9792
+ {
9793
+ className: "gap-x-2",
9794
+ onClick: () => insertRow(index, "below"),
9795
+ children: [
9796
+ /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
9797
+ "Insert row below"
9798
+ ]
9799
+ }
9800
+ ),
9801
+ /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
9802
+ /* @__PURE__ */ jsxs(
9803
+ DropdownMenu.Item,
9804
+ {
9805
+ className: "gap-x-2",
9806
+ onClick: () => deleteRow(index),
9807
+ children: [
9808
+ /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
9809
+ "Delete row"
9810
+ ]
9811
+ }
9812
+ )
9813
+ ] })
9814
+ ] })
9815
+ ] })
9816
+ },
9817
+ field.id
9818
+ );
9819
+ })
9820
+ ] }),
9821
+ hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
9822
+ ] }),
9823
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9824
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
9740
9825
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9741
9826
  ] }) })
9742
9827
  ]
9743
9828
  }
9744
9829
  ) });
9745
9830
  };
9746
- const schema$5 = addressSchema;
9747
- const Email = () => {
9748
- const { id } = useParams();
9749
- const { order, isPending, isError, error } = useOrder(id, {
9750
- fields: "+email"
9751
- });
9752
- if (isError) {
9753
- throw error;
9754
- }
9755
- const isReady = !isPending && !!order;
9756
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9757
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9758
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
9759
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9760
- ] }),
9761
- isReady && /* @__PURE__ */ jsx(EmailForm, { order })
9762
- ] });
9763
- };
9764
- const EmailForm = ({ order }) => {
9765
- const form = useForm({
9766
- defaultValues: {
9767
- email: order.email ?? ""
9768
- },
9769
- resolver: zodResolver(schema$4)
9770
- });
9771
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9772
- const { handleSuccess } = useRouteModal();
9773
- const onSubmit = form.handleSubmit(async (data) => {
9774
- await mutateAsync(
9775
- { email: data.email },
9776
- {
9777
- onSuccess: () => {
9778
- handleSuccess();
9779
- },
9780
- onError: (error) => {
9781
- toast.error(error.message);
9782
- }
9783
- }
9784
- );
9785
- });
9786
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9787
- KeyboundForm,
9831
+ const GridInput = forwardRef(({ className, ...props }, ref) => {
9832
+ return /* @__PURE__ */ jsx(
9833
+ "input",
9788
9834
  {
9789
- className: "flex flex-1 flex-col overflow-hidden",
9790
- onSubmit,
9791
- children: [
9792
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
9793
- Form$2.Field,
9794
- {
9795
- control: form.control,
9796
- name: "email",
9797
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9798
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
9799
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9800
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9801
- ] })
9802
- }
9803
- ) }),
9804
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9805
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9806
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9807
- ] }) })
9808
- ]
9835
+ ref,
9836
+ ...props,
9837
+ autoComplete: "off",
9838
+ className: clx(
9839
+ "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",
9840
+ className
9841
+ )
9809
9842
  }
9810
- ) });
9811
- };
9812
- const schema$4 = objectType({
9813
- email: stringType().email()
9843
+ );
9814
9844
  });
9815
- const CustomItems = () => {
9816
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9817
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9818
- /* @__PURE__ */ jsx(CustomItemsForm, {})
9845
+ GridInput.displayName = "MetadataForm.GridInput";
9846
+ const PlaceholderInner = () => {
9847
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
9848
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
9849
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9850
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
9851
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
9852
+ ] }) })
9819
9853
  ] });
9820
9854
  };
9821
- const CustomItemsForm = () => {
9822
- const form = useForm({
9823
- resolver: zodResolver(schema$3)
9855
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
9856
+ function getDefaultValues(metadata) {
9857
+ if (!metadata || !Object.keys(metadata).length) {
9858
+ return [
9859
+ {
9860
+ key: "",
9861
+ value: "",
9862
+ disabled: false
9863
+ }
9864
+ ];
9865
+ }
9866
+ return Object.entries(metadata).map(([key, value]) => {
9867
+ if (!EDITABLE_TYPES.includes(typeof value)) {
9868
+ return {
9869
+ key,
9870
+ value,
9871
+ disabled: true
9872
+ };
9873
+ }
9874
+ let stringValue = value;
9875
+ if (typeof value !== "string") {
9876
+ stringValue = JSON.stringify(value);
9877
+ }
9878
+ return {
9879
+ key,
9880
+ value: stringValue,
9881
+ original_key: key
9882
+ };
9824
9883
  });
9825
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9826
- /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9827
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9828
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9829
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9830
- ] }) })
9831
- ] }) });
9832
- };
9833
- const schema$3 = objectType({
9834
- email: stringType().email()
9835
- });
9884
+ }
9885
+ function parseValues(values) {
9886
+ const metadata = values.metadata;
9887
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
9888
+ if (isEmpty) {
9889
+ return null;
9890
+ }
9891
+ const update = {};
9892
+ metadata.forEach((field) => {
9893
+ let key = field.key;
9894
+ let value = field.value;
9895
+ const disabled = field.disabled;
9896
+ if (!key || !value) {
9897
+ return;
9898
+ }
9899
+ if (disabled) {
9900
+ update[key] = value;
9901
+ return;
9902
+ }
9903
+ key = key.trim();
9904
+ value = value.trim();
9905
+ if (value === "true") {
9906
+ update[key] = true;
9907
+ } else if (value === "false") {
9908
+ update[key] = false;
9909
+ } else {
9910
+ const parsedNumber = parseFloat(value);
9911
+ if (!isNaN(parsedNumber)) {
9912
+ update[key] = parsedNumber;
9913
+ } else {
9914
+ update[key] = value;
9915
+ }
9916
+ }
9917
+ });
9918
+ return update;
9919
+ }
9920
+ function getHasUneditableRows(metadata) {
9921
+ if (!metadata) {
9922
+ return false;
9923
+ }
9924
+ return Object.values(metadata).some(
9925
+ (value) => !EDITABLE_TYPES.includes(typeof value)
9926
+ );
9927
+ }
9836
9928
  const NumberInput = forwardRef(
9837
9929
  ({
9838
9930
  value,
@@ -10807,54 +10899,10 @@ const customItemSchema = objectType({
10807
10899
  quantity: numberType(),
10808
10900
  unit_price: unionType([numberType(), stringType()])
10809
10901
  });
10810
- const InlineTip = forwardRef(
10811
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10812
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10813
- return /* @__PURE__ */ jsxs(
10814
- "div",
10815
- {
10816
- ref,
10817
- className: clx(
10818
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10819
- className
10820
- ),
10821
- ...props,
10822
- children: [
10823
- /* @__PURE__ */ jsx(
10824
- "div",
10825
- {
10826
- role: "presentation",
10827
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10828
- "bg-ui-tag-orange-icon": variant === "warning"
10829
- })
10830
- }
10831
- ),
10832
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10833
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10834
- labelValue,
10835
- ":"
10836
- ] }),
10837
- " ",
10838
- children
10839
- ] })
10840
- ]
10841
- }
10842
- );
10843
- }
10844
- );
10845
- InlineTip.displayName = "InlineTip";
10846
- const MetadataFieldSchema = objectType({
10847
- key: stringType(),
10848
- disabled: booleanType().optional(),
10849
- value: anyType()
10850
- });
10851
- const MetadataSchema = objectType({
10852
- metadata: arrayType(MetadataFieldSchema)
10853
- });
10854
- const Metadata = () => {
10902
+ const Email = () => {
10855
10903
  const { id } = useParams();
10856
10904
  const { order, isPending, isError, error } = useOrder(id, {
10857
- fields: "metadata"
10905
+ fields: "+email"
10858
10906
  });
10859
10907
  if (isError) {
10860
10908
  throw error;
@@ -10862,301 +10910,253 @@ const Metadata = () => {
10862
10910
  const isReady = !isPending && !!order;
10863
10911
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10864
10912
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10865
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10866
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10913
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
10914
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10867
10915
  ] }),
10868
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10916
+ isReady && /* @__PURE__ */ jsx(EmailForm, { order })
10869
10917
  ] });
10870
- };
10871
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10872
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10873
- const MetadataForm = ({ orderId, metadata }) => {
10874
- const { handleSuccess } = useRouteModal();
10875
- const hasUneditableRows = getHasUneditableRows(metadata);
10876
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10877
- const form = useForm({
10878
- defaultValues: {
10879
- metadata: getDefaultValues(metadata)
10880
- },
10881
- resolver: zodResolver(MetadataSchema)
10882
- });
10883
- const handleSubmit = form.handleSubmit(async (data) => {
10884
- const parsedData = parseValues(data);
10885
- await mutateAsync(
10886
- {
10887
- metadata: parsedData
10888
- },
10889
- {
10890
- onSuccess: () => {
10891
- toast.success("Metadata updated");
10892
- handleSuccess();
10893
- },
10894
- onError: (error) => {
10895
- toast.error(error.message);
10896
- }
10897
- }
10898
- );
10899
- });
10900
- const { fields, insert, remove } = useFieldArray({
10901
- control: form.control,
10902
- name: "metadata"
10903
- });
10904
- function deleteRow(index) {
10905
- remove(index);
10906
- if (fields.length === 1) {
10907
- insert(0, {
10908
- key: "",
10909
- value: "",
10910
- disabled: false
10911
- });
10912
- }
10913
- }
10914
- function insertRow(index, position) {
10915
- insert(index + (position === "above" ? 0 : 1), {
10916
- key: "",
10917
- value: "",
10918
- disabled: false
10919
- });
10920
- }
10921
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10922
- KeyboundForm,
10923
- {
10924
- onSubmit: handleSubmit,
10925
- className: "flex flex-1 flex-col overflow-hidden",
10926
- children: [
10927
- /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10928
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10929
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10930
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10931
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10932
- ] }),
10933
- fields.map((field, index) => {
10934
- const isDisabled = field.disabled || false;
10935
- let placeholder = "-";
10936
- if (typeof field.value === "object") {
10937
- placeholder = "{ ... }";
10938
- }
10939
- if (Array.isArray(field.value)) {
10940
- placeholder = "[ ... ]";
10941
- }
10942
- return /* @__PURE__ */ jsx(
10943
- ConditionalTooltip,
10944
- {
10945
- showTooltip: isDisabled,
10946
- content: "This row is disabled because it contains non-primitive data.",
10947
- children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
10948
- /* @__PURE__ */ jsxs(
10949
- "div",
10950
- {
10951
- className: clx("grid grid-cols-2 divide-x", {
10952
- "overflow-hidden rounded-b-lg": index === fields.length - 1
10953
- }),
10954
- children: [
10955
- /* @__PURE__ */ jsx(
10956
- Form$2.Field,
10957
- {
10958
- control: form.control,
10959
- name: `metadata.${index}.key`,
10960
- render: ({ field: field2 }) => {
10961
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10962
- GridInput,
10963
- {
10964
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10965
- ...field2,
10966
- disabled: isDisabled,
10967
- placeholder: "Key"
10968
- }
10969
- ) }) });
10970
- }
10971
- }
10972
- ),
10973
- /* @__PURE__ */ jsx(
10974
- Form$2.Field,
10975
- {
10976
- control: form.control,
10977
- name: `metadata.${index}.value`,
10978
- render: ({ field: { value, ...field2 } }) => {
10979
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10980
- GridInput,
10981
- {
10982
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
10983
- ...field2,
10984
- value: isDisabled ? placeholder : value,
10985
- disabled: isDisabled,
10986
- placeholder: "Value"
10987
- }
10988
- ) }) });
10989
- }
10990
- }
10991
- )
10992
- ]
10993
- }
10994
- ),
10995
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
10996
- /* @__PURE__ */ jsx(
10997
- DropdownMenu.Trigger,
10998
- {
10999
- className: clx(
11000
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11001
- {
11002
- hidden: isDisabled
11003
- }
11004
- ),
11005
- disabled: isDisabled,
11006
- asChild: true,
11007
- children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
11008
- }
11009
- ),
11010
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
11011
- /* @__PURE__ */ jsxs(
11012
- DropdownMenu.Item,
11013
- {
11014
- className: "gap-x-2",
11015
- onClick: () => insertRow(index, "above"),
11016
- children: [
11017
- /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
11018
- "Insert row above"
11019
- ]
11020
- }
11021
- ),
11022
- /* @__PURE__ */ jsxs(
11023
- DropdownMenu.Item,
11024
- {
11025
- className: "gap-x-2",
11026
- onClick: () => insertRow(index, "below"),
11027
- children: [
11028
- /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
11029
- "Insert row below"
11030
- ]
11031
- }
11032
- ),
11033
- /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
11034
- /* @__PURE__ */ jsxs(
11035
- DropdownMenu.Item,
11036
- {
11037
- className: "gap-x-2",
11038
- onClick: () => deleteRow(index),
11039
- children: [
11040
- /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
11041
- "Delete row"
11042
- ]
11043
- }
11044
- )
11045
- ] })
11046
- ] })
11047
- ] })
11048
- },
11049
- field.id
11050
- );
11051
- })
11052
- ] }),
11053
- hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
11054
- ] }),
11055
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11056
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10918
+ };
10919
+ const EmailForm = ({ order }) => {
10920
+ const form = useForm({
10921
+ defaultValues: {
10922
+ email: order.email ?? ""
10923
+ },
10924
+ resolver: zodResolver(schema$4)
10925
+ });
10926
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10927
+ const { handleSuccess } = useRouteModal();
10928
+ const onSubmit = form.handleSubmit(async (data) => {
10929
+ await mutateAsync(
10930
+ { email: data.email },
10931
+ {
10932
+ onSuccess: () => {
10933
+ handleSuccess();
10934
+ },
10935
+ onError: (error) => {
10936
+ toast.error(error.message);
10937
+ }
10938
+ }
10939
+ );
10940
+ });
10941
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10942
+ KeyboundForm,
10943
+ {
10944
+ className: "flex flex-1 flex-col overflow-hidden",
10945
+ onSubmit,
10946
+ children: [
10947
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
10948
+ Form$2.Field,
10949
+ {
10950
+ control: form.control,
10951
+ name: "email",
10952
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
10953
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
10954
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
10955
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10956
+ ] })
10957
+ }
10958
+ ) }),
10959
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10960
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11057
10961
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11058
10962
  ] }) })
11059
10963
  ]
11060
10964
  }
11061
10965
  ) });
11062
10966
  };
11063
- const GridInput = forwardRef(({ className, ...props }, ref) => {
11064
- return /* @__PURE__ */ jsx(
11065
- "input",
11066
- {
11067
- ref,
11068
- ...props,
11069
- autoComplete: "off",
11070
- className: clx(
11071
- "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",
11072
- className
11073
- )
11074
- }
11075
- );
10967
+ const schema$4 = objectType({
10968
+ email: stringType().email()
11076
10969
  });
11077
- GridInput.displayName = "MetadataForm.GridInput";
11078
- const PlaceholderInner = () => {
11079
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11080
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11081
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11082
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
11083
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
11084
- ] }) })
10970
+ const BillingAddress = () => {
10971
+ const { id } = useParams();
10972
+ const { order, isPending, isError, error } = useOrder(id, {
10973
+ fields: "+billing_address"
10974
+ });
10975
+ if (isError) {
10976
+ throw error;
10977
+ }
10978
+ const isReady = !isPending && !!order;
10979
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10980
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10981
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
10982
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
10983
+ ] }),
10984
+ isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
11085
10985
  ] });
11086
10986
  };
11087
- const EDITABLE_TYPES = ["string", "number", "boolean"];
11088
- function getDefaultValues(metadata) {
11089
- if (!metadata || !Object.keys(metadata).length) {
11090
- return [
10987
+ const BillingAddressForm = ({ order }) => {
10988
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
10989
+ const form = useForm({
10990
+ defaultValues: {
10991
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
10992
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
10993
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
10994
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
10995
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
10996
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
10997
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
10998
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
10999
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
11000
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
11001
+ },
11002
+ resolver: zodResolver(schema$3)
11003
+ });
11004
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11005
+ const { handleSuccess } = useRouteModal();
11006
+ const onSubmit = form.handleSubmit(async (data) => {
11007
+ await mutateAsync(
11008
+ { billing_address: data },
11091
11009
  {
11092
- key: "",
11093
- value: "",
11094
- disabled: false
11010
+ onSuccess: () => {
11011
+ handleSuccess();
11012
+ },
11013
+ onError: (error) => {
11014
+ toast.error(error.message);
11015
+ }
11095
11016
  }
11096
- ];
11097
- }
11098
- return Object.entries(metadata).map(([key, value]) => {
11099
- if (!EDITABLE_TYPES.includes(typeof value)) {
11100
- return {
11101
- key,
11102
- value,
11103
- disabled: true
11104
- };
11105
- }
11106
- let stringValue = value;
11107
- if (typeof value !== "string") {
11108
- stringValue = JSON.stringify(value);
11109
- }
11110
- return {
11111
- key,
11112
- value: stringValue,
11113
- original_key: key
11114
- };
11017
+ );
11115
11018
  });
11116
- }
11117
- function parseValues(values) {
11118
- const metadata = values.metadata;
11119
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11120
- if (isEmpty) {
11121
- return null;
11122
- }
11123
- const update = {};
11124
- metadata.forEach((field) => {
11125
- let key = field.key;
11126
- let value = field.value;
11127
- const disabled = field.disabled;
11128
- if (!key || !value) {
11129
- return;
11130
- }
11131
- if (disabled) {
11132
- update[key] = value;
11133
- return;
11134
- }
11135
- key = key.trim();
11136
- value = value.trim();
11137
- if (value === "true") {
11138
- update[key] = true;
11139
- } else if (value === "false") {
11140
- update[key] = false;
11141
- } else {
11142
- const parsedNumber = parseFloat(value);
11143
- if (!isNaN(parsedNumber)) {
11144
- update[key] = parsedNumber;
11145
- } else {
11146
- update[key] = value;
11147
- }
11019
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11020
+ KeyboundForm,
11021
+ {
11022
+ className: "flex flex-1 flex-col overflow-hidden",
11023
+ onSubmit,
11024
+ children: [
11025
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
11026
+ /* @__PURE__ */ jsx(
11027
+ Form$2.Field,
11028
+ {
11029
+ control: form.control,
11030
+ name: "country_code",
11031
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11032
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11033
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11034
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11035
+ ] })
11036
+ }
11037
+ ),
11038
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11039
+ /* @__PURE__ */ jsx(
11040
+ Form$2.Field,
11041
+ {
11042
+ control: form.control,
11043
+ name: "first_name",
11044
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11045
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11046
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11047
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11048
+ ] })
11049
+ }
11050
+ ),
11051
+ /* @__PURE__ */ jsx(
11052
+ Form$2.Field,
11053
+ {
11054
+ control: form.control,
11055
+ name: "last_name",
11056
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11057
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11058
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11059
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11060
+ ] })
11061
+ }
11062
+ )
11063
+ ] }),
11064
+ /* @__PURE__ */ jsx(
11065
+ Form$2.Field,
11066
+ {
11067
+ control: form.control,
11068
+ name: "company",
11069
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11070
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11071
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11072
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11073
+ ] })
11074
+ }
11075
+ ),
11076
+ /* @__PURE__ */ jsx(
11077
+ Form$2.Field,
11078
+ {
11079
+ control: form.control,
11080
+ name: "address_1",
11081
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11082
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11083
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11084
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11085
+ ] })
11086
+ }
11087
+ ),
11088
+ /* @__PURE__ */ jsx(
11089
+ Form$2.Field,
11090
+ {
11091
+ control: form.control,
11092
+ name: "address_2",
11093
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11094
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11095
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11096
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11097
+ ] })
11098
+ }
11099
+ ),
11100
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11101
+ /* @__PURE__ */ jsx(
11102
+ Form$2.Field,
11103
+ {
11104
+ control: form.control,
11105
+ name: "postal_code",
11106
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11107
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11108
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11109
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11110
+ ] })
11111
+ }
11112
+ ),
11113
+ /* @__PURE__ */ jsx(
11114
+ Form$2.Field,
11115
+ {
11116
+ control: form.control,
11117
+ name: "city",
11118
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11119
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11120
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11121
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11122
+ ] })
11123
+ }
11124
+ )
11125
+ ] }),
11126
+ /* @__PURE__ */ jsx(
11127
+ Form$2.Field,
11128
+ {
11129
+ control: form.control,
11130
+ name: "province",
11131
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11132
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11133
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11134
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11135
+ ] })
11136
+ }
11137
+ ),
11138
+ /* @__PURE__ */ jsx(
11139
+ Form$2.Field,
11140
+ {
11141
+ control: form.control,
11142
+ name: "phone",
11143
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11144
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11145
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11146
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11147
+ ] })
11148
+ }
11149
+ )
11150
+ ] }) }),
11151
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11152
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11153
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11154
+ ] }) })
11155
+ ]
11148
11156
  }
11149
- });
11150
- return update;
11151
- }
11152
- function getHasUneditableRows(metadata) {
11153
- if (!metadata) {
11154
- return false;
11155
- }
11156
- return Object.values(metadata).some(
11157
- (value) => !EDITABLE_TYPES.includes(typeof value)
11158
- );
11159
- }
11157
+ ) });
11158
+ };
11159
+ const schema$3 = addressSchema;
11160
11160
  const PROMOTION_QUERY_KEY = "promotions";
11161
11161
  const promotionsQueryKeys = {
11162
11162
  list: (query2) => [
@@ -12336,17 +12336,220 @@ const CustomAmountField = ({
12336
12336
  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12337
12337
  CurrencyInput,
12338
12338
  {
12339
- ...field,
12340
- onValueChange: (value) => onChange(value),
12341
- symbol: getNativeSymbol(currencyCode),
12342
- code: currencyCode
12339
+ ...field,
12340
+ onValueChange: (value) => onChange(value),
12341
+ symbol: getNativeSymbol(currencyCode),
12342
+ code: currencyCode
12343
+ }
12344
+ ) })
12345
+ ] });
12346
+ }
12347
+ }
12348
+ );
12349
+ };
12350
+ const ShippingAddress = () => {
12351
+ const { id } = useParams();
12352
+ const { order, isPending, isError, error } = useOrder(id, {
12353
+ fields: "+shipping_address"
12354
+ });
12355
+ if (isError) {
12356
+ throw error;
12357
+ }
12358
+ const isReady = !isPending && !!order;
12359
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12360
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12361
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12362
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12363
+ ] }),
12364
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12365
+ ] });
12366
+ };
12367
+ const ShippingAddressForm = ({ order }) => {
12368
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12369
+ const form = useForm({
12370
+ defaultValues: {
12371
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12372
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12373
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12374
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12375
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12376
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12377
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12378
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12379
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12380
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12381
+ },
12382
+ resolver: zodResolver(schema$1)
12383
+ });
12384
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12385
+ const { handleSuccess } = useRouteModal();
12386
+ const onSubmit = form.handleSubmit(async (data) => {
12387
+ await mutateAsync(
12388
+ {
12389
+ shipping_address: {
12390
+ first_name: data.first_name,
12391
+ last_name: data.last_name,
12392
+ company: data.company,
12393
+ address_1: data.address_1,
12394
+ address_2: data.address_2,
12395
+ city: data.city,
12396
+ province: data.province,
12397
+ country_code: data.country_code,
12398
+ postal_code: data.postal_code,
12399
+ phone: data.phone
12400
+ }
12401
+ },
12402
+ {
12403
+ onSuccess: () => {
12404
+ handleSuccess();
12405
+ },
12406
+ onError: (error) => {
12407
+ toast.error(error.message);
12408
+ }
12409
+ }
12410
+ );
12411
+ });
12412
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12413
+ KeyboundForm,
12414
+ {
12415
+ className: "flex flex-1 flex-col overflow-hidden",
12416
+ onSubmit,
12417
+ children: [
12418
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12419
+ /* @__PURE__ */ jsx(
12420
+ Form$2.Field,
12421
+ {
12422
+ control: form.control,
12423
+ name: "country_code",
12424
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12425
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12426
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12427
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12428
+ ] })
12429
+ }
12430
+ ),
12431
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12432
+ /* @__PURE__ */ jsx(
12433
+ Form$2.Field,
12434
+ {
12435
+ control: form.control,
12436
+ name: "first_name",
12437
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12438
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12439
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12440
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12441
+ ] })
12442
+ }
12443
+ ),
12444
+ /* @__PURE__ */ jsx(
12445
+ Form$2.Field,
12446
+ {
12447
+ control: form.control,
12448
+ name: "last_name",
12449
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12450
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12451
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12452
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12453
+ ] })
12454
+ }
12455
+ )
12456
+ ] }),
12457
+ /* @__PURE__ */ jsx(
12458
+ Form$2.Field,
12459
+ {
12460
+ control: form.control,
12461
+ name: "company",
12462
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12463
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12464
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12465
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12466
+ ] })
12467
+ }
12468
+ ),
12469
+ /* @__PURE__ */ jsx(
12470
+ Form$2.Field,
12471
+ {
12472
+ control: form.control,
12473
+ name: "address_1",
12474
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12475
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12476
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12477
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12478
+ ] })
12479
+ }
12480
+ ),
12481
+ /* @__PURE__ */ jsx(
12482
+ Form$2.Field,
12483
+ {
12484
+ control: form.control,
12485
+ name: "address_2",
12486
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12487
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12488
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12489
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12490
+ ] })
12491
+ }
12492
+ ),
12493
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12494
+ /* @__PURE__ */ jsx(
12495
+ Form$2.Field,
12496
+ {
12497
+ control: form.control,
12498
+ name: "postal_code",
12499
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12500
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12501
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12502
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12503
+ ] })
12504
+ }
12505
+ ),
12506
+ /* @__PURE__ */ jsx(
12507
+ Form$2.Field,
12508
+ {
12509
+ control: form.control,
12510
+ name: "city",
12511
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12512
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12513
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12514
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12515
+ ] })
12516
+ }
12517
+ )
12518
+ ] }),
12519
+ /* @__PURE__ */ jsx(
12520
+ Form$2.Field,
12521
+ {
12522
+ control: form.control,
12523
+ name: "province",
12524
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12525
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12526
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12527
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12528
+ ] })
12529
+ }
12530
+ ),
12531
+ /* @__PURE__ */ jsx(
12532
+ Form$2.Field,
12533
+ {
12534
+ control: form.control,
12535
+ name: "phone",
12536
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12537
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12538
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12539
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12540
+ ] })
12343
12541
  }
12344
- ) })
12345
- ] });
12346
- }
12542
+ )
12543
+ ] }) }),
12544
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12545
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12546
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12547
+ ] }) })
12548
+ ]
12347
12549
  }
12348
- );
12550
+ ) });
12349
12551
  };
12552
+ const schema$1 = addressSchema;
12350
12553
  const TransferOwnership = () => {
12351
12554
  const { id } = useParams();
12352
12555
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12370,7 +12573,7 @@ const TransferOwnershipForm = ({ order }) => {
12370
12573
  defaultValues: {
12371
12574
  customer_id: order.customer_id || ""
12372
12575
  },
12373
- resolver: zodResolver(schema$1)
12576
+ resolver: zodResolver(schema)
12374
12577
  });
12375
12578
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12376
12579
  const { handleSuccess } = useRouteModal();
@@ -12820,212 +13023,9 @@ const Illustration = () => {
12820
13023
  }
12821
13024
  );
12822
13025
  };
12823
- const schema$1 = objectType({
13026
+ const schema = objectType({
12824
13027
  customer_id: stringType().min(1)
12825
13028
  });
12826
- const ShippingAddress = () => {
12827
- const { id } = useParams();
12828
- const { order, isPending, isError, error } = useOrder(id, {
12829
- fields: "+shipping_address"
12830
- });
12831
- if (isError) {
12832
- throw error;
12833
- }
12834
- const isReady = !isPending && !!order;
12835
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12836
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12837
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12838
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12839
- ] }),
12840
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12841
- ] });
12842
- };
12843
- const ShippingAddressForm = ({ order }) => {
12844
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12845
- const form = useForm({
12846
- defaultValues: {
12847
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12848
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12849
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12850
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12851
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12852
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12853
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12854
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12855
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12856
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12857
- },
12858
- resolver: zodResolver(schema)
12859
- });
12860
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12861
- const { handleSuccess } = useRouteModal();
12862
- const onSubmit = form.handleSubmit(async (data) => {
12863
- await mutateAsync(
12864
- {
12865
- shipping_address: {
12866
- first_name: data.first_name,
12867
- last_name: data.last_name,
12868
- company: data.company,
12869
- address_1: data.address_1,
12870
- address_2: data.address_2,
12871
- city: data.city,
12872
- province: data.province,
12873
- country_code: data.country_code,
12874
- postal_code: data.postal_code,
12875
- phone: data.phone
12876
- }
12877
- },
12878
- {
12879
- onSuccess: () => {
12880
- handleSuccess();
12881
- },
12882
- onError: (error) => {
12883
- toast.error(error.message);
12884
- }
12885
- }
12886
- );
12887
- });
12888
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12889
- KeyboundForm,
12890
- {
12891
- className: "flex flex-1 flex-col overflow-hidden",
12892
- onSubmit,
12893
- children: [
12894
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12895
- /* @__PURE__ */ jsx(
12896
- Form$2.Field,
12897
- {
12898
- control: form.control,
12899
- name: "country_code",
12900
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12901
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12902
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12903
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12904
- ] })
12905
- }
12906
- ),
12907
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12908
- /* @__PURE__ */ jsx(
12909
- Form$2.Field,
12910
- {
12911
- control: form.control,
12912
- name: "first_name",
12913
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12914
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12915
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12916
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12917
- ] })
12918
- }
12919
- ),
12920
- /* @__PURE__ */ jsx(
12921
- Form$2.Field,
12922
- {
12923
- control: form.control,
12924
- name: "last_name",
12925
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12926
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12927
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12928
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12929
- ] })
12930
- }
12931
- )
12932
- ] }),
12933
- /* @__PURE__ */ jsx(
12934
- Form$2.Field,
12935
- {
12936
- control: form.control,
12937
- name: "company",
12938
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12939
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12940
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12941
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12942
- ] })
12943
- }
12944
- ),
12945
- /* @__PURE__ */ jsx(
12946
- Form$2.Field,
12947
- {
12948
- control: form.control,
12949
- name: "address_1",
12950
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12951
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12952
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12953
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12954
- ] })
12955
- }
12956
- ),
12957
- /* @__PURE__ */ jsx(
12958
- Form$2.Field,
12959
- {
12960
- control: form.control,
12961
- name: "address_2",
12962
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12963
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12964
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12965
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12966
- ] })
12967
- }
12968
- ),
12969
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12970
- /* @__PURE__ */ jsx(
12971
- Form$2.Field,
12972
- {
12973
- control: form.control,
12974
- name: "postal_code",
12975
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12976
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12977
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12978
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12979
- ] })
12980
- }
12981
- ),
12982
- /* @__PURE__ */ jsx(
12983
- Form$2.Field,
12984
- {
12985
- control: form.control,
12986
- name: "city",
12987
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12988
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12989
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12990
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12991
- ] })
12992
- }
12993
- )
12994
- ] }),
12995
- /* @__PURE__ */ jsx(
12996
- Form$2.Field,
12997
- {
12998
- control: form.control,
12999
- name: "province",
13000
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13001
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13002
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13003
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13004
- ] })
13005
- }
13006
- ),
13007
- /* @__PURE__ */ jsx(
13008
- Form$2.Field,
13009
- {
13010
- control: form.control,
13011
- name: "phone",
13012
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13013
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
13014
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13015
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13016
- ] })
13017
- }
13018
- )
13019
- ] }) }),
13020
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
13021
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13022
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13023
- ] }) })
13024
- ]
13025
- }
13026
- ) });
13027
- };
13028
- const schema = addressSchema;
13029
13029
  const widgetModule = { widgets: [] };
13030
13030
  const routeModule = {
13031
13031
  routes: [
@@ -13046,25 +13046,25 @@ const routeModule = {
13046
13046
  handle,
13047
13047
  loader,
13048
13048
  children: [
13049
- {
13050
- Component: BillingAddress,
13051
- path: "/draft-orders/:id/billing-address"
13052
- },
13053
- {
13054
- Component: Email,
13055
- path: "/draft-orders/:id/email"
13056
- },
13057
13049
  {
13058
13050
  Component: CustomItems,
13059
13051
  path: "/draft-orders/:id/custom-items"
13060
13052
  },
13053
+ {
13054
+ Component: Metadata,
13055
+ path: "/draft-orders/:id/metadata"
13056
+ },
13061
13057
  {
13062
13058
  Component: Items,
13063
13059
  path: "/draft-orders/:id/items"
13064
13060
  },
13065
13061
  {
13066
- Component: Metadata,
13067
- path: "/draft-orders/:id/metadata"
13062
+ Component: Email,
13063
+ path: "/draft-orders/:id/email"
13064
+ },
13065
+ {
13066
+ Component: BillingAddress,
13067
+ path: "/draft-orders/:id/billing-address"
13068
13068
  },
13069
13069
  {
13070
13070
  Component: Promotions,
@@ -13078,13 +13078,13 @@ const routeModule = {
13078
13078
  Component: Shipping,
13079
13079
  path: "/draft-orders/:id/shipping"
13080
13080
  },
13081
- {
13082
- Component: TransferOwnership,
13083
- path: "/draft-orders/:id/transfer-ownership"
13084
- },
13085
13081
  {
13086
13082
  Component: ShippingAddress,
13087
13083
  path: "/draft-orders/:id/shipping-address"
13084
+ },
13085
+ {
13086
+ Component: TransferOwnership,
13087
+ path: "/draft-orders/:id/transfer-ownership"
13088
13088
  }
13089
13089
  ]
13090
13090
  }