@medusajs/draft-order 2.11.2-preview-20251028060159 → 2.11.2-preview-20251028100508

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.
@@ -9592,6 +9592,74 @@ const CustomItemsForm = () => {
9592
9592
  const schema$5 = objectType({
9593
9593
  email: stringType().email()
9594
9594
  });
9595
+ const Email = () => {
9596
+ const { id } = reactRouterDom.useParams();
9597
+ const { order, isPending, isError, error } = useOrder(id, {
9598
+ fields: "+email"
9599
+ });
9600
+ if (isError) {
9601
+ throw error;
9602
+ }
9603
+ const isReady = !isPending && !!order;
9604
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9605
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9606
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9607
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9608
+ ] }),
9609
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9610
+ ] });
9611
+ };
9612
+ const EmailForm = ({ order }) => {
9613
+ const form = reactHookForm.useForm({
9614
+ defaultValues: {
9615
+ email: order.email ?? ""
9616
+ },
9617
+ resolver: zod.zodResolver(schema$4)
9618
+ });
9619
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9620
+ const { handleSuccess } = useRouteModal();
9621
+ const onSubmit = form.handleSubmit(async (data) => {
9622
+ await mutateAsync(
9623
+ { email: data.email },
9624
+ {
9625
+ onSuccess: () => {
9626
+ handleSuccess();
9627
+ },
9628
+ onError: (error) => {
9629
+ ui.toast.error(error.message);
9630
+ }
9631
+ }
9632
+ );
9633
+ });
9634
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9635
+ KeyboundForm,
9636
+ {
9637
+ className: "flex flex-1 flex-col overflow-hidden",
9638
+ onSubmit,
9639
+ children: [
9640
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9641
+ Form$2.Field,
9642
+ {
9643
+ control: form.control,
9644
+ name: "email",
9645
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9646
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9647
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9648
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9649
+ ] })
9650
+ }
9651
+ ) }),
9652
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9653
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9654
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9655
+ ] }) })
9656
+ ]
9657
+ }
9658
+ ) });
9659
+ };
9660
+ const schema$4 = objectType({
9661
+ email: stringType().email()
9662
+ });
9595
9663
  const NumberInput = React.forwardRef(
9596
9664
  ({
9597
9665
  value,
@@ -10566,54 +10634,10 @@ const customItemSchema = objectType({
10566
10634
  quantity: numberType(),
10567
10635
  unit_price: unionType([numberType(), stringType()])
10568
10636
  });
10569
- const InlineTip = React.forwardRef(
10570
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10571
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10572
- return /* @__PURE__ */ jsxRuntime.jsxs(
10573
- "div",
10574
- {
10575
- ref,
10576
- className: ui.clx(
10577
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10578
- className
10579
- ),
10580
- ...props,
10581
- children: [
10582
- /* @__PURE__ */ jsxRuntime.jsx(
10583
- "div",
10584
- {
10585
- role: "presentation",
10586
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10587
- "bg-ui-tag-orange-icon": variant === "warning"
10588
- })
10589
- }
10590
- ),
10591
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10592
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10593
- labelValue,
10594
- ":"
10595
- ] }),
10596
- " ",
10597
- children
10598
- ] })
10599
- ]
10600
- }
10601
- );
10602
- }
10603
- );
10604
- InlineTip.displayName = "InlineTip";
10605
- const MetadataFieldSchema = objectType({
10606
- key: stringType(),
10607
- disabled: booleanType().optional(),
10608
- value: anyType()
10609
- });
10610
- const MetadataSchema = objectType({
10611
- metadata: arrayType(MetadataFieldSchema)
10612
- });
10613
- const Metadata = () => {
10637
+ const BillingAddress = () => {
10614
10638
  const { id } = reactRouterDom.useParams();
10615
10639
  const { order, isPending, isError, error } = useOrder(id, {
10616
- fields: "metadata"
10640
+ fields: "+billing_address"
10617
10641
  });
10618
10642
  if (isError) {
10619
10643
  throw error;
@@ -10621,33 +10645,36 @@ const Metadata = () => {
10621
10645
  const isReady = !isPending && !!order;
10622
10646
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10623
10647
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10624
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10625
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10648
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
10649
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
10626
10650
  ] }),
10627
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10651
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
10628
10652
  ] });
10629
10653
  };
10630
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10631
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10632
- const MetadataForm = ({ orderId, metadata }) => {
10633
- const { handleSuccess } = useRouteModal();
10634
- const hasUneditableRows = getHasUneditableRows(metadata);
10635
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10654
+ const BillingAddressForm = ({ order }) => {
10655
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
10636
10656
  const form = reactHookForm.useForm({
10637
10657
  defaultValues: {
10638
- metadata: getDefaultValues(metadata)
10658
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
10659
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
10660
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
10661
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
10662
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
10663
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
10664
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
10665
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
10666
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
10667
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
10639
10668
  },
10640
- resolver: zod.zodResolver(MetadataSchema)
10669
+ resolver: zod.zodResolver(schema$3)
10641
10670
  });
10642
- const handleSubmit = form.handleSubmit(async (data) => {
10643
- const parsedData = parseValues(data);
10671
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10672
+ const { handleSuccess } = useRouteModal();
10673
+ const onSubmit = form.handleSubmit(async (data) => {
10644
10674
  await mutateAsync(
10645
- {
10646
- metadata: parsedData
10647
- },
10675
+ { billing_address: data },
10648
10676
  {
10649
10677
  onSuccess: () => {
10650
- ui.toast.success("Metadata updated");
10651
10678
  handleSuccess();
10652
10679
  },
10653
10680
  onError: (error) => {
@@ -10656,80 +10683,311 @@ const MetadataForm = ({ orderId, metadata }) => {
10656
10683
  }
10657
10684
  );
10658
10685
  });
10659
- const { fields, insert, remove } = reactHookForm.useFieldArray({
10660
- control: form.control,
10661
- name: "metadata"
10662
- });
10663
- function deleteRow(index) {
10664
- remove(index);
10665
- if (fields.length === 1) {
10666
- insert(0, {
10667
- key: "",
10668
- value: "",
10669
- disabled: false
10670
- });
10671
- }
10672
- }
10673
- function insertRow(index, position) {
10674
- insert(index + (position === "above" ? 0 : 1), {
10675
- key: "",
10676
- value: "",
10677
- disabled: false
10678
- });
10679
- }
10680
10686
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10681
10687
  KeyboundForm,
10682
10688
  {
10683
- onSubmit: handleSubmit,
10684
10689
  className: "flex flex-1 flex-col overflow-hidden",
10690
+ onSubmit,
10685
10691
  children: [
10686
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10687
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10688
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10689
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10690
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10691
- ] }),
10692
- fields.map((field, index) => {
10693
- const isDisabled = field.disabled || false;
10694
- let placeholder = "-";
10695
- if (typeof field.value === "object") {
10696
- placeholder = "{ ... }";
10692
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
10693
+ /* @__PURE__ */ jsxRuntime.jsx(
10694
+ Form$2.Field,
10695
+ {
10696
+ control: form.control,
10697
+ name: "country_code",
10698
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10699
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
10700
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
10701
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10702
+ ] })
10703
+ }
10704
+ ),
10705
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
10706
+ /* @__PURE__ */ jsxRuntime.jsx(
10707
+ Form$2.Field,
10708
+ {
10709
+ control: form.control,
10710
+ name: "first_name",
10711
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10712
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
10713
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10714
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10715
+ ] })
10697
10716
  }
10698
- if (Array.isArray(field.value)) {
10699
- placeholder = "[ ... ]";
10717
+ ),
10718
+ /* @__PURE__ */ jsxRuntime.jsx(
10719
+ Form$2.Field,
10720
+ {
10721
+ control: form.control,
10722
+ name: "last_name",
10723
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10724
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
10725
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10726
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10727
+ ] })
10700
10728
  }
10701
- return /* @__PURE__ */ jsxRuntime.jsx(
10702
- ConditionalTooltip,
10703
- {
10704
- showTooltip: isDisabled,
10705
- content: "This row is disabled because it contains non-primitive data.",
10706
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
10707
- /* @__PURE__ */ jsxRuntime.jsxs(
10708
- "div",
10709
- {
10710
- className: ui.clx("grid grid-cols-2 divide-x", {
10711
- "overflow-hidden rounded-b-lg": index === fields.length - 1
10712
- }),
10713
- children: [
10714
- /* @__PURE__ */ jsxRuntime.jsx(
10715
- Form$2.Field,
10716
- {
10717
- control: form.control,
10718
- name: `metadata.${index}.key`,
10719
- render: ({ field: field2 }) => {
10720
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10721
- GridInput,
10722
- {
10723
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10724
- ...field2,
10725
- disabled: isDisabled,
10726
- placeholder: "Key"
10727
- }
10728
- ) }) });
10729
- }
10730
- }
10731
- ),
10732
- /* @__PURE__ */ jsxRuntime.jsx(
10729
+ )
10730
+ ] }),
10731
+ /* @__PURE__ */ jsxRuntime.jsx(
10732
+ Form$2.Field,
10733
+ {
10734
+ control: form.control,
10735
+ name: "company",
10736
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10737
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
10738
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10739
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10740
+ ] })
10741
+ }
10742
+ ),
10743
+ /* @__PURE__ */ jsxRuntime.jsx(
10744
+ Form$2.Field,
10745
+ {
10746
+ control: form.control,
10747
+ name: "address_1",
10748
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10749
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
10750
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10751
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10752
+ ] })
10753
+ }
10754
+ ),
10755
+ /* @__PURE__ */ jsxRuntime.jsx(
10756
+ Form$2.Field,
10757
+ {
10758
+ control: form.control,
10759
+ name: "address_2",
10760
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10761
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
10762
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10763
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10764
+ ] })
10765
+ }
10766
+ ),
10767
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
10768
+ /* @__PURE__ */ jsxRuntime.jsx(
10769
+ Form$2.Field,
10770
+ {
10771
+ control: form.control,
10772
+ name: "postal_code",
10773
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10774
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
10775
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10776
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10777
+ ] })
10778
+ }
10779
+ ),
10780
+ /* @__PURE__ */ jsxRuntime.jsx(
10781
+ Form$2.Field,
10782
+ {
10783
+ control: form.control,
10784
+ name: "city",
10785
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10786
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
10787
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10788
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10789
+ ] })
10790
+ }
10791
+ )
10792
+ ] }),
10793
+ /* @__PURE__ */ jsxRuntime.jsx(
10794
+ Form$2.Field,
10795
+ {
10796
+ control: form.control,
10797
+ name: "province",
10798
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10799
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
10800
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10801
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10802
+ ] })
10803
+ }
10804
+ ),
10805
+ /* @__PURE__ */ jsxRuntime.jsx(
10806
+ Form$2.Field,
10807
+ {
10808
+ control: form.control,
10809
+ name: "phone",
10810
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10811
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
10812
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10813
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10814
+ ] })
10815
+ }
10816
+ )
10817
+ ] }) }),
10818
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10819
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10820
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10821
+ ] }) })
10822
+ ]
10823
+ }
10824
+ ) });
10825
+ };
10826
+ const schema$3 = addressSchema;
10827
+ const InlineTip = React.forwardRef(
10828
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10829
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10830
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10831
+ "div",
10832
+ {
10833
+ ref,
10834
+ className: ui.clx(
10835
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10836
+ className
10837
+ ),
10838
+ ...props,
10839
+ children: [
10840
+ /* @__PURE__ */ jsxRuntime.jsx(
10841
+ "div",
10842
+ {
10843
+ role: "presentation",
10844
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10845
+ "bg-ui-tag-orange-icon": variant === "warning"
10846
+ })
10847
+ }
10848
+ ),
10849
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10850
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10851
+ labelValue,
10852
+ ":"
10853
+ ] }),
10854
+ " ",
10855
+ children
10856
+ ] })
10857
+ ]
10858
+ }
10859
+ );
10860
+ }
10861
+ );
10862
+ InlineTip.displayName = "InlineTip";
10863
+ const MetadataFieldSchema = objectType({
10864
+ key: stringType(),
10865
+ disabled: booleanType().optional(),
10866
+ value: anyType()
10867
+ });
10868
+ const MetadataSchema = objectType({
10869
+ metadata: arrayType(MetadataFieldSchema)
10870
+ });
10871
+ const Metadata = () => {
10872
+ const { id } = reactRouterDom.useParams();
10873
+ const { order, isPending, isError, error } = useOrder(id, {
10874
+ fields: "metadata"
10875
+ });
10876
+ if (isError) {
10877
+ throw error;
10878
+ }
10879
+ const isReady = !isPending && !!order;
10880
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10881
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10882
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10883
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10884
+ ] }),
10885
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10886
+ ] });
10887
+ };
10888
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10889
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10890
+ const MetadataForm = ({ orderId, metadata }) => {
10891
+ const { handleSuccess } = useRouteModal();
10892
+ const hasUneditableRows = getHasUneditableRows(metadata);
10893
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10894
+ const form = reactHookForm.useForm({
10895
+ defaultValues: {
10896
+ metadata: getDefaultValues(metadata)
10897
+ },
10898
+ resolver: zod.zodResolver(MetadataSchema)
10899
+ });
10900
+ const handleSubmit = form.handleSubmit(async (data) => {
10901
+ const parsedData = parseValues(data);
10902
+ await mutateAsync(
10903
+ {
10904
+ metadata: parsedData
10905
+ },
10906
+ {
10907
+ onSuccess: () => {
10908
+ ui.toast.success("Metadata updated");
10909
+ handleSuccess();
10910
+ },
10911
+ onError: (error) => {
10912
+ ui.toast.error(error.message);
10913
+ }
10914
+ }
10915
+ );
10916
+ });
10917
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
10918
+ control: form.control,
10919
+ name: "metadata"
10920
+ });
10921
+ function deleteRow(index) {
10922
+ remove(index);
10923
+ if (fields.length === 1) {
10924
+ insert(0, {
10925
+ key: "",
10926
+ value: "",
10927
+ disabled: false
10928
+ });
10929
+ }
10930
+ }
10931
+ function insertRow(index, position) {
10932
+ insert(index + (position === "above" ? 0 : 1), {
10933
+ key: "",
10934
+ value: "",
10935
+ disabled: false
10936
+ });
10937
+ }
10938
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10939
+ KeyboundForm,
10940
+ {
10941
+ onSubmit: handleSubmit,
10942
+ className: "flex flex-1 flex-col overflow-hidden",
10943
+ children: [
10944
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10945
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10946
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10947
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10948
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10949
+ ] }),
10950
+ fields.map((field, index) => {
10951
+ const isDisabled = field.disabled || false;
10952
+ let placeholder = "-";
10953
+ if (typeof field.value === "object") {
10954
+ placeholder = "{ ... }";
10955
+ }
10956
+ if (Array.isArray(field.value)) {
10957
+ placeholder = "[ ... ]";
10958
+ }
10959
+ return /* @__PURE__ */ jsxRuntime.jsx(
10960
+ ConditionalTooltip,
10961
+ {
10962
+ showTooltip: isDisabled,
10963
+ content: "This row is disabled because it contains non-primitive data.",
10964
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
10965
+ /* @__PURE__ */ jsxRuntime.jsxs(
10966
+ "div",
10967
+ {
10968
+ className: ui.clx("grid grid-cols-2 divide-x", {
10969
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
10970
+ }),
10971
+ children: [
10972
+ /* @__PURE__ */ jsxRuntime.jsx(
10973
+ Form$2.Field,
10974
+ {
10975
+ control: form.control,
10976
+ name: `metadata.${index}.key`,
10977
+ render: ({ field: field2 }) => {
10978
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10979
+ GridInput,
10980
+ {
10981
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
10982
+ ...field2,
10983
+ disabled: isDisabled,
10984
+ placeholder: "Key"
10985
+ }
10986
+ ) }) });
10987
+ }
10988
+ }
10989
+ ),
10990
+ /* @__PURE__ */ jsxRuntime.jsx(
10733
10991
  Form$2.Field,
10734
10992
  {
10735
10993
  control: form.control,
@@ -11221,7 +11479,7 @@ const SalesChannelForm = ({ order }) => {
11221
11479
  defaultValues: {
11222
11480
  sales_channel_id: order.sales_channel_id || ""
11223
11481
  },
11224
- resolver: zod.zodResolver(schema$4)
11482
+ resolver: zod.zodResolver(schema$2)
11225
11483
  });
11226
11484
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11227
11485
  const { handleSuccess } = useRouteModal();
@@ -11296,7 +11554,7 @@ const SalesChannelField = ({ control, order }) => {
11296
11554
  }
11297
11555
  );
11298
11556
  };
11299
- const schema$4 = objectType({
11557
+ const schema$2 = objectType({
11300
11558
  sales_channel_id: stringType().min(1)
11301
11559
  });
11302
11560
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
@@ -12138,7 +12396,7 @@ const ShippingAddressForm = ({ order }) => {
12138
12396
  postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12139
12397
  phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12140
12398
  },
12141
- resolver: zod.zodResolver(schema$3)
12399
+ resolver: zod.zodResolver(schema$1)
12142
12400
  });
12143
12401
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12144
12402
  const { handleSuccess } = useRouteModal();
@@ -12308,7 +12566,7 @@ const ShippingAddressForm = ({ order }) => {
12308
12566
  }
12309
12567
  ) });
12310
12568
  };
12311
- const schema$3 = addressSchema;
12569
+ const schema$1 = addressSchema;
12312
12570
  const TransferOwnership = () => {
12313
12571
  const { id } = reactRouterDom.useParams();
12314
12572
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12332,7 +12590,7 @@ const TransferOwnershipForm = ({ order }) => {
12332
12590
  defaultValues: {
12333
12591
  customer_id: order.customer_id || ""
12334
12592
  },
12335
- resolver: zod.zodResolver(schema$2)
12593
+ resolver: zod.zodResolver(schema)
12336
12594
  });
12337
12595
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12338
12596
  const { handleSuccess } = useRouteModal();
@@ -12711,337 +12969,79 @@ const Illustration = () => {
12711
12969
  strokeLinecap: "round",
12712
12970
  strokeLinejoin: "round"
12713
12971
  }
12714
- ) }),
12715
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12716
- "path",
12717
- {
12718
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12719
- stroke: "#A1A1AA",
12720
- strokeWidth: "1.5",
12721
- strokeLinecap: "round",
12722
- strokeLinejoin: "round"
12723
- }
12724
- ) }),
12725
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12726
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12727
- "rect",
12728
- {
12729
- width: "12",
12730
- height: "12",
12731
- fill: "white",
12732
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12733
- }
12734
- ) }),
12735
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12736
- "rect",
12737
- {
12738
- width: "12",
12739
- height: "12",
12740
- fill: "white",
12741
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12742
- }
12743
- ) }),
12744
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12745
- "rect",
12746
- {
12747
- width: "12",
12748
- height: "12",
12749
- fill: "white",
12750
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12751
- }
12752
- ) }),
12753
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12754
- "rect",
12755
- {
12756
- width: "12",
12757
- height: "12",
12758
- fill: "white",
12759
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12760
- }
12761
- ) }),
12762
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12763
- "rect",
12764
- {
12765
- width: "12",
12766
- height: "12",
12767
- fill: "white",
12768
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12769
- }
12770
- ) }),
12771
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12772
- "rect",
12773
- {
12774
- width: "12",
12775
- height: "12",
12776
- fill: "white",
12777
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12778
- }
12779
- ) })
12780
- ] })
12781
- ]
12782
- }
12783
- );
12784
- };
12785
- const schema$2 = objectType({
12786
- customer_id: stringType().min(1)
12787
- });
12788
- const BillingAddress = () => {
12789
- const { id } = reactRouterDom.useParams();
12790
- const { order, isPending, isError, error } = useOrder(id, {
12791
- fields: "+billing_address"
12792
- });
12793
- if (isError) {
12794
- throw error;
12795
- }
12796
- const isReady = !isPending && !!order;
12797
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12798
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12799
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
12800
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12801
- ] }),
12802
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
12803
- ] });
12804
- };
12805
- const BillingAddressForm = ({ order }) => {
12806
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12807
- const form = reactHookForm.useForm({
12808
- defaultValues: {
12809
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12810
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12811
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12812
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12813
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12814
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12815
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12816
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12817
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12818
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12819
- },
12820
- resolver: zod.zodResolver(schema$1)
12821
- });
12822
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12823
- const { handleSuccess } = useRouteModal();
12824
- const onSubmit = form.handleSubmit(async (data) => {
12825
- await mutateAsync(
12826
- { billing_address: data },
12827
- {
12828
- onSuccess: () => {
12829
- handleSuccess();
12830
- },
12831
- onError: (error) => {
12832
- ui.toast.error(error.message);
12833
- }
12834
- }
12835
- );
12836
- });
12837
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12838
- KeyboundForm,
12839
- {
12840
- className: "flex flex-1 flex-col overflow-hidden",
12841
- onSubmit,
12842
- children: [
12843
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12844
- /* @__PURE__ */ jsxRuntime.jsx(
12845
- Form$2.Field,
12972
+ ) }),
12973
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12974
+ "path",
12975
+ {
12976
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12977
+ stroke: "#A1A1AA",
12978
+ strokeWidth: "1.5",
12979
+ strokeLinecap: "round",
12980
+ strokeLinejoin: "round"
12981
+ }
12982
+ ) }),
12983
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12984
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12985
+ "rect",
12846
12986
  {
12847
- control: form.control,
12848
- name: "country_code",
12849
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12850
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12851
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12852
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12853
- ] })
12987
+ width: "12",
12988
+ height: "12",
12989
+ fill: "white",
12990
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12854
12991
  }
12855
- ),
12856
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12857
- /* @__PURE__ */ jsxRuntime.jsx(
12858
- Form$2.Field,
12859
- {
12860
- control: form.control,
12861
- name: "first_name",
12862
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12863
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12864
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12865
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12866
- ] })
12867
- }
12868
- ),
12869
- /* @__PURE__ */ jsxRuntime.jsx(
12870
- Form$2.Field,
12871
- {
12872
- control: form.control,
12873
- name: "last_name",
12874
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12875
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12876
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12877
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12878
- ] })
12879
- }
12880
- )
12881
- ] }),
12882
- /* @__PURE__ */ jsxRuntime.jsx(
12883
- Form$2.Field,
12992
+ ) }),
12993
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12994
+ "rect",
12884
12995
  {
12885
- control: form.control,
12886
- name: "company",
12887
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12888
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12889
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12890
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12891
- ] })
12996
+ width: "12",
12997
+ height: "12",
12998
+ fill: "white",
12999
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12892
13000
  }
12893
- ),
12894
- /* @__PURE__ */ jsxRuntime.jsx(
12895
- Form$2.Field,
13001
+ ) }),
13002
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13003
+ "rect",
12896
13004
  {
12897
- control: form.control,
12898
- name: "address_1",
12899
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12900
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12901
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12902
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12903
- ] })
13005
+ width: "12",
13006
+ height: "12",
13007
+ fill: "white",
13008
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12904
13009
  }
12905
- ),
12906
- /* @__PURE__ */ jsxRuntime.jsx(
12907
- Form$2.Field,
13010
+ ) }),
13011
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13012
+ "rect",
12908
13013
  {
12909
- control: form.control,
12910
- name: "address_2",
12911
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12912
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12913
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12914
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12915
- ] })
13014
+ width: "12",
13015
+ height: "12",
13016
+ fill: "white",
13017
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12916
13018
  }
12917
- ),
12918
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12919
- /* @__PURE__ */ jsxRuntime.jsx(
12920
- Form$2.Field,
12921
- {
12922
- control: form.control,
12923
- name: "postal_code",
12924
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12925
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12926
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12927
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12928
- ] })
12929
- }
12930
- ),
12931
- /* @__PURE__ */ jsxRuntime.jsx(
12932
- Form$2.Field,
12933
- {
12934
- control: form.control,
12935
- name: "city",
12936
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12937
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12938
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12939
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12940
- ] })
12941
- }
12942
- )
12943
- ] }),
12944
- /* @__PURE__ */ jsxRuntime.jsx(
12945
- Form$2.Field,
13019
+ ) }),
13020
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13021
+ "rect",
12946
13022
  {
12947
- control: form.control,
12948
- name: "province",
12949
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12950
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12951
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12952
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12953
- ] })
13023
+ width: "12",
13024
+ height: "12",
13025
+ fill: "white",
13026
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12954
13027
  }
12955
- ),
12956
- /* @__PURE__ */ jsxRuntime.jsx(
12957
- Form$2.Field,
13028
+ ) }),
13029
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13030
+ "rect",
12958
13031
  {
12959
- control: form.control,
12960
- name: "phone",
12961
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12962
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12963
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12964
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12965
- ] })
13032
+ width: "12",
13033
+ height: "12",
13034
+ fill: "white",
13035
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12966
13036
  }
12967
- )
12968
- ] }) }),
12969
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12970
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12971
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12972
- ] }) })
12973
- ]
12974
- }
12975
- ) });
12976
- };
12977
- const schema$1 = addressSchema;
12978
- const Email = () => {
12979
- const { id } = reactRouterDom.useParams();
12980
- const { order, isPending, isError, error } = useOrder(id, {
12981
- fields: "+email"
12982
- });
12983
- if (isError) {
12984
- throw error;
12985
- }
12986
- const isReady = !isPending && !!order;
12987
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12988
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12989
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
12990
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
12991
- ] }),
12992
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
12993
- ] });
12994
- };
12995
- const EmailForm = ({ order }) => {
12996
- const form = reactHookForm.useForm({
12997
- defaultValues: {
12998
- email: order.email ?? ""
12999
- },
13000
- resolver: zod.zodResolver(schema)
13001
- });
13002
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
13003
- const { handleSuccess } = useRouteModal();
13004
- const onSubmit = form.handleSubmit(async (data) => {
13005
- await mutateAsync(
13006
- { email: data.email },
13007
- {
13008
- onSuccess: () => {
13009
- handleSuccess();
13010
- },
13011
- onError: (error) => {
13012
- ui.toast.error(error.message);
13013
- }
13014
- }
13015
- );
13016
- });
13017
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
13018
- KeyboundForm,
13019
- {
13020
- className: "flex flex-1 flex-col overflow-hidden",
13021
- onSubmit,
13022
- children: [
13023
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
13024
- Form$2.Field,
13025
- {
13026
- control: form.control,
13027
- name: "email",
13028
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13029
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
13030
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13031
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13032
- ] })
13033
- }
13034
- ) }),
13035
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13036
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13037
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13038
- ] }) })
13037
+ ) })
13038
+ ] })
13039
13039
  ]
13040
13040
  }
13041
- ) });
13041
+ );
13042
13042
  };
13043
13043
  const schema = objectType({
13044
- email: stringType().email()
13044
+ customer_id: stringType().min(1)
13045
13045
  });
13046
13046
  const widgetModule = { widgets: [] };
13047
13047
  const routeModule = {
@@ -13067,10 +13067,18 @@ const routeModule = {
13067
13067
  Component: CustomItems,
13068
13068
  path: "/draft-orders/:id/custom-items"
13069
13069
  },
13070
+ {
13071
+ Component: Email,
13072
+ path: "/draft-orders/:id/email"
13073
+ },
13070
13074
  {
13071
13075
  Component: Items,
13072
13076
  path: "/draft-orders/:id/items"
13073
13077
  },
13078
+ {
13079
+ Component: BillingAddress,
13080
+ path: "/draft-orders/:id/billing-address"
13081
+ },
13074
13082
  {
13075
13083
  Component: Metadata,
13076
13084
  path: "/draft-orders/:id/metadata"
@@ -13094,14 +13102,6 @@ const routeModule = {
13094
13102
  {
13095
13103
  Component: TransferOwnership,
13096
13104
  path: "/draft-orders/:id/transfer-ownership"
13097
- },
13098
- {
13099
- Component: BillingAddress,
13100
- path: "/draft-orders/:id/billing-address"
13101
- },
13102
- {
13103
- Component: Email,
13104
- path: "/draft-orders/:id/email"
13105
13105
  }
13106
13106
  ]
13107
13107
  }