@medusajs/draft-order 2.10.2-preview-20250903000308 → 2.10.2-preview-20250903060148

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