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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/.medusa/server/src/admin/index.js +1897 -1897
  2. package/.medusa/server/src/admin/index.mjs +1898 -1898
  3. package/package.json +23 -24
package/.medusa/server/src/admin/index.js CHANGED
@@ -9560,75 +9560,10 @@ const ID = () => {
9560
9560
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9561
9561
  ] });
9562
9562
  };
9563
- const CustomItems = () => {
9564
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9565
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9566
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9567
- ] });
9568
- };
9569
- const CustomItemsForm = () => {
9570
- const form = reactHookForm.useForm({
9571
- resolver: zod.zodResolver(schema$5)
9572
- });
9573
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9574
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9575
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9576
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9577
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9578
- ] }) })
9579
- ] }) });
9580
- };
9581
- const schema$5 = objectType({
9582
- email: stringType().email()
9583
- });
9584
- const InlineTip = React.forwardRef(
9585
- ({ variant = "tip", label, className, children, ...props }, ref) => {
9586
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9587
- return /* @__PURE__ */ jsxRuntime.jsxs(
9588
- "div",
9589
- {
9590
- ref,
9591
- className: ui.clx(
9592
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9593
- className
9594
- ),
9595
- ...props,
9596
- children: [
9597
- /* @__PURE__ */ jsxRuntime.jsx(
9598
- "div",
9599
- {
9600
- role: "presentation",
9601
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9602
- "bg-ui-tag-orange-icon": variant === "warning"
9603
- })
9604
- }
9605
- ),
9606
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
9607
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9608
- labelValue,
9609
- ":"
9610
- ] }),
9611
- " ",
9612
- children
9613
- ] })
9614
- ]
9615
- }
9616
- );
9617
- }
9618
- );
9619
- InlineTip.displayName = "InlineTip";
9620
- const MetadataFieldSchema = objectType({
9621
- key: stringType(),
9622
- disabled: booleanType().optional(),
9623
- value: anyType()
9624
- });
9625
- const MetadataSchema = objectType({
9626
- metadata: arrayType(MetadataFieldSchema)
9627
- });
9628
- const Metadata = () => {
9563
+ const BillingAddress = () => {
9629
9564
  const { id } = reactRouterDom.useParams();
9630
9565
  const { order, isPending, isError, error } = useOrder(id, {
9631
- fields: "metadata"
9566
+ fields: "+billing_address"
9632
9567
  });
9633
9568
  if (isError) {
9634
9569
  throw error;
@@ -9636,33 +9571,36 @@ const Metadata = () => {
9636
9571
  const isReady = !isPending && !!order;
9637
9572
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9638
9573
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9639
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
9640
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9574
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
9575
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9641
9576
  ] }),
9642
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9577
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9643
9578
  ] });
9644
9579
  };
9645
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9646
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9647
- const MetadataForm = ({ orderId, metadata }) => {
9648
- const { handleSuccess } = useRouteModal();
9649
- const hasUneditableRows = getHasUneditableRows(metadata);
9650
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
9580
+ const BillingAddressForm = ({ order }) => {
9581
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9651
9582
  const form = reactHookForm.useForm({
9652
9583
  defaultValues: {
9653
- metadata: getDefaultValues(metadata)
9584
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9585
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9586
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9587
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9588
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9589
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9590
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9591
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9592
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9593
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9654
9594
  },
9655
- resolver: zod.zodResolver(MetadataSchema)
9595
+ resolver: zod.zodResolver(schema$5)
9656
9596
  });
9657
- const handleSubmit = form.handleSubmit(async (data) => {
9658
- const parsedData = parseValues(data);
9597
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9598
+ const { handleSuccess } = useRouteModal();
9599
+ const onSubmit = form.handleSubmit(async (data) => {
9659
9600
  await mutateAsync(
9660
- {
9661
- metadata: parsedData
9662
- },
9601
+ { billing_address: data },
9663
9602
  {
9664
9603
  onSuccess: () => {
9665
- ui.toast.success("Metadata updated");
9666
9604
  handleSuccess();
9667
9605
  },
9668
9606
  onError: (error) => {
@@ -9671,266 +9609,236 @@ const MetadataForm = ({ orderId, metadata }) => {
9671
9609
  }
9672
9610
  );
9673
9611
  });
9674
- const { fields, insert, remove } = reactHookForm.useFieldArray({
9675
- control: form.control,
9676
- name: "metadata"
9677
- });
9678
- function deleteRow(index) {
9679
- remove(index);
9680
- if (fields.length === 1) {
9681
- insert(0, {
9682
- key: "",
9683
- value: "",
9684
- disabled: false
9685
- });
9686
- }
9687
- }
9688
- function insertRow(index, position) {
9689
- insert(index + (position === "above" ? 0 : 1), {
9690
- key: "",
9691
- value: "",
9692
- disabled: false
9693
- });
9694
- }
9695
9612
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9696
9613
  KeyboundForm,
9697
9614
  {
9698
- onSubmit: handleSubmit,
9699
9615
  className: "flex flex-1 flex-col overflow-hidden",
9616
+ onSubmit,
9700
9617
  children: [
9701
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
9702
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
9703
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
9704
- /* @__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" }) }),
9705
- /* @__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" }) })
9706
- ] }),
9707
- fields.map((field, index) => {
9708
- const isDisabled = field.disabled || false;
9709
- let placeholder = "-";
9710
- if (typeof field.value === "object") {
9711
- placeholder = "{ ... }";
9618
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
9619
+ /* @__PURE__ */ jsxRuntime.jsx(
9620
+ Form$2.Field,
9621
+ {
9622
+ control: form.control,
9623
+ name: "country_code",
9624
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9625
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
9626
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
9627
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9628
+ ] })
9629
+ }
9630
+ ),
9631
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9632
+ /* @__PURE__ */ jsxRuntime.jsx(
9633
+ Form$2.Field,
9634
+ {
9635
+ control: form.control,
9636
+ name: "first_name",
9637
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9638
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
9639
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9640
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9641
+ ] })
9712
9642
  }
9713
- if (Array.isArray(field.value)) {
9714
- placeholder = "[ ... ]";
9643
+ ),
9644
+ /* @__PURE__ */ jsxRuntime.jsx(
9645
+ Form$2.Field,
9646
+ {
9647
+ control: form.control,
9648
+ name: "last_name",
9649
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9650
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
9651
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9652
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9653
+ ] })
9715
9654
  }
9716
- return /* @__PURE__ */ jsxRuntime.jsx(
9717
- ConditionalTooltip,
9718
- {
9719
- showTooltip: isDisabled,
9720
- content: "This row is disabled because it contains non-primitive data.",
9721
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
9722
- /* @__PURE__ */ jsxRuntime.jsxs(
9723
- "div",
9724
- {
9725
- className: ui.clx("grid grid-cols-2 divide-x", {
9726
- "overflow-hidden rounded-b-lg": index === fields.length - 1
9727
- }),
9728
- children: [
9729
- /* @__PURE__ */ jsxRuntime.jsx(
9730
- Form$2.Field,
9731
- {
9732
- control: form.control,
9733
- name: `metadata.${index}.key`,
9734
- render: ({ field: field2 }) => {
9735
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
9736
- GridInput,
9737
- {
9738
- "aria-labelledby": METADATA_KEY_LABEL_ID,
9739
- ...field2,
9740
- disabled: isDisabled,
9741
- placeholder: "Key"
9742
- }
9743
- ) }) });
9744
- }
9745
- }
9746
- ),
9747
- /* @__PURE__ */ jsxRuntime.jsx(
9748
- Form$2.Field,
9749
- {
9750
- control: form.control,
9751
- name: `metadata.${index}.value`,
9752
- render: ({ field: { value, ...field2 } }) => {
9753
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
9754
- GridInput,
9755
- {
9756
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
9757
- ...field2,
9758
- value: isDisabled ? placeholder : value,
9759
- disabled: isDisabled,
9760
- placeholder: "Value"
9761
- }
9762
- ) }) });
9763
- }
9764
- }
9765
- )
9766
- ]
9767
- }
9768
- ),
9769
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
9770
- /* @__PURE__ */ jsxRuntime.jsx(
9771
- ui.DropdownMenu.Trigger,
9772
- {
9773
- className: ui.clx(
9774
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
9775
- {
9776
- hidden: isDisabled
9777
- }
9778
- ),
9779
- disabled: isDisabled,
9780
- asChild: true,
9781
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
9782
- }
9783
- ),
9784
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
9785
- /* @__PURE__ */ jsxRuntime.jsxs(
9786
- ui.DropdownMenu.Item,
9787
- {
9788
- className: "gap-x-2",
9789
- onClick: () => insertRow(index, "above"),
9790
- children: [
9791
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
9792
- "Insert row above"
9793
- ]
9794
- }
9795
- ),
9796
- /* @__PURE__ */ jsxRuntime.jsxs(
9797
- ui.DropdownMenu.Item,
9798
- {
9799
- className: "gap-x-2",
9800
- onClick: () => insertRow(index, "below"),
9801
- children: [
9802
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
9803
- "Insert row below"
9804
- ]
9805
- }
9806
- ),
9807
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
9808
- /* @__PURE__ */ jsxRuntime.jsxs(
9809
- ui.DropdownMenu.Item,
9810
- {
9811
- className: "gap-x-2",
9812
- onClick: () => deleteRow(index),
9813
- children: [
9814
- /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
9815
- "Delete row"
9816
- ]
9817
- }
9818
- )
9819
- ] })
9820
- ] })
9821
- ] })
9822
- },
9823
- field.id
9824
- );
9825
- })
9655
+ )
9826
9656
  ] }),
9827
- hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
9828
- ] }),
9829
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9830
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
9657
+ /* @__PURE__ */ jsxRuntime.jsx(
9658
+ Form$2.Field,
9659
+ {
9660
+ control: form.control,
9661
+ name: "company",
9662
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9663
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
9664
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9665
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9666
+ ] })
9667
+ }
9668
+ ),
9669
+ /* @__PURE__ */ jsxRuntime.jsx(
9670
+ Form$2.Field,
9671
+ {
9672
+ control: form.control,
9673
+ name: "address_1",
9674
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9675
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
9676
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9677
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9678
+ ] })
9679
+ }
9680
+ ),
9681
+ /* @__PURE__ */ jsxRuntime.jsx(
9682
+ Form$2.Field,
9683
+ {
9684
+ control: form.control,
9685
+ name: "address_2",
9686
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9687
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9688
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9689
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9690
+ ] })
9691
+ }
9692
+ ),
9693
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9694
+ /* @__PURE__ */ jsxRuntime.jsx(
9695
+ Form$2.Field,
9696
+ {
9697
+ control: form.control,
9698
+ name: "postal_code",
9699
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9700
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
9701
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9702
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9703
+ ] })
9704
+ }
9705
+ ),
9706
+ /* @__PURE__ */ jsxRuntime.jsx(
9707
+ Form$2.Field,
9708
+ {
9709
+ control: form.control,
9710
+ name: "city",
9711
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9712
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
9713
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9714
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9715
+ ] })
9716
+ }
9717
+ )
9718
+ ] }),
9719
+ /* @__PURE__ */ jsxRuntime.jsx(
9720
+ Form$2.Field,
9721
+ {
9722
+ control: form.control,
9723
+ name: "province",
9724
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9725
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9726
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9727
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9728
+ ] })
9729
+ }
9730
+ ),
9731
+ /* @__PURE__ */ jsxRuntime.jsx(
9732
+ Form$2.Field,
9733
+ {
9734
+ control: form.control,
9735
+ name: "phone",
9736
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9737
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
9738
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9739
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9740
+ ] })
9741
+ }
9742
+ )
9743
+ ] }) }),
9744
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9745
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9831
9746
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9832
9747
  ] }) })
9833
9748
  ]
9834
9749
  }
9835
9750
  ) });
9836
9751
  };
9837
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
9838
- return /* @__PURE__ */ jsxRuntime.jsx(
9839
- "input",
9840
- {
9841
- ref,
9842
- ...props,
9843
- autoComplete: "off",
9844
- className: ui.clx(
9845
- "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",
9846
- className
9847
- )
9848
- }
9849
- );
9850
- });
9851
- GridInput.displayName = "MetadataForm.GridInput";
9852
- const PlaceholderInner = () => {
9853
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
9854
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
9855
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9856
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
9857
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
9752
+ const schema$5 = addressSchema;
9753
+ const CustomItems = () => {
9754
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9755
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9756
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9757
+ ] });
9758
+ };
9759
+ const CustomItemsForm = () => {
9760
+ const form = reactHookForm.useForm({
9761
+ resolver: zod.zodResolver(schema$4)
9762
+ });
9763
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9764
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9765
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9766
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9767
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9858
9768
  ] }) })
9769
+ ] }) });
9770
+ };
9771
+ const schema$4 = objectType({
9772
+ email: stringType().email()
9773
+ });
9774
+ const Email = () => {
9775
+ const { id } = reactRouterDom.useParams();
9776
+ const { order, isPending, isError, error } = useOrder(id, {
9777
+ fields: "+email"
9778
+ });
9779
+ if (isError) {
9780
+ throw error;
9781
+ }
9782
+ const isReady = !isPending && !!order;
9783
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9784
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9785
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9786
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9787
+ ] }),
9788
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9859
9789
  ] });
9860
9790
  };
9861
- const EDITABLE_TYPES = ["string", "number", "boolean"];
9862
- function getDefaultValues(metadata) {
9863
- if (!metadata || !Object.keys(metadata).length) {
9864
- return [
9791
+ const EmailForm = ({ order }) => {
9792
+ const form = reactHookForm.useForm({
9793
+ defaultValues: {
9794
+ email: order.email ?? ""
9795
+ },
9796
+ resolver: zod.zodResolver(schema$3)
9797
+ });
9798
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9799
+ const { handleSuccess } = useRouteModal();
9800
+ const onSubmit = form.handleSubmit(async (data) => {
9801
+ await mutateAsync(
9802
+ { email: data.email },
9865
9803
  {
9866
- key: "",
9867
- value: "",
9868
- disabled: false
9804
+ onSuccess: () => {
9805
+ handleSuccess();
9806
+ },
9807
+ onError: (error) => {
9808
+ ui.toast.error(error.message);
9809
+ }
9869
9810
  }
9870
- ];
9871
- }
9872
- return Object.entries(metadata).map(([key, value]) => {
9873
- if (!EDITABLE_TYPES.includes(typeof value)) {
9874
- return {
9875
- key,
9876
- value,
9877
- disabled: true
9878
- };
9879
- }
9880
- let stringValue = value;
9881
- if (typeof value !== "string") {
9882
- stringValue = JSON.stringify(value);
9883
- }
9884
- return {
9885
- key,
9886
- value: stringValue,
9887
- original_key: key
9888
- };
9811
+ );
9889
9812
  });
9890
- }
9891
- function parseValues(values) {
9892
- const metadata = values.metadata;
9893
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
9894
- if (isEmpty) {
9895
- return null;
9896
- }
9897
- const update = {};
9898
- metadata.forEach((field) => {
9899
- let key = field.key;
9900
- let value = field.value;
9901
- const disabled = field.disabled;
9902
- if (!key || !value) {
9903
- return;
9904
- }
9905
- if (disabled) {
9906
- update[key] = value;
9907
- return;
9908
- }
9909
- key = key.trim();
9910
- value = value.trim();
9911
- if (value === "true") {
9912
- update[key] = true;
9913
- } else if (value === "false") {
9914
- update[key] = false;
9915
- } else {
9916
- const parsedNumber = parseFloat(value);
9917
- if (!isNaN(parsedNumber)) {
9918
- update[key] = parsedNumber;
9919
- } else {
9920
- update[key] = value;
9921
- }
9813
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9814
+ KeyboundForm,
9815
+ {
9816
+ className: "flex flex-1 flex-col overflow-hidden",
9817
+ onSubmit,
9818
+ children: [
9819
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9820
+ Form$2.Field,
9821
+ {
9822
+ control: form.control,
9823
+ name: "email",
9824
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9825
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9826
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9827
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9828
+ ] })
9829
+ }
9830
+ ) }),
9831
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9832
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9833
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9834
+ ] }) })
9835
+ ]
9922
9836
  }
9923
- });
9924
- return update;
9925
- }
9926
- function getHasUneditableRows(metadata) {
9927
- if (!metadata) {
9928
- return false;
9929
- }
9930
- return Object.values(metadata).some(
9931
- (value) => !EDITABLE_TYPES.includes(typeof value)
9932
- );
9933
- }
9837
+ ) });
9838
+ };
9839
+ const schema$3 = objectType({
9840
+ email: stringType().email()
9841
+ });
9934
9842
  const NumberInput = React.forwardRef(
9935
9843
  ({
9936
9844
  value,
@@ -10905,384 +10813,126 @@ const customItemSchema = objectType({
10905
10813
  quantity: numberType(),
10906
10814
  unit_price: unionType([numberType(), stringType()])
10907
10815
  });
10908
- const Email = () => {
10909
- const { id } = reactRouterDom.useParams();
10910
- const { order, isPending, isError, error } = useOrder(id, {
10911
- fields: "+email"
10816
+ const PROMOTION_QUERY_KEY = "promotions";
10817
+ const promotionsQueryKeys = {
10818
+ list: (query2) => [
10819
+ PROMOTION_QUERY_KEY,
10820
+ query2 ? query2 : void 0
10821
+ ],
10822
+ detail: (id, query2) => [
10823
+ PROMOTION_QUERY_KEY,
10824
+ id,
10825
+ query2 ? query2 : void 0
10826
+ ]
10827
+ };
10828
+ const usePromotions = (query2, options) => {
10829
+ const { data, ...rest } = reactQuery.useQuery({
10830
+ queryKey: promotionsQueryKeys.list(query2),
10831
+ queryFn: async () => sdk.admin.promotion.list(query2),
10832
+ ...options
10912
10833
  });
10913
- if (isError) {
10914
- throw error;
10834
+ return { ...data, ...rest };
10835
+ };
10836
+ const Promotions = () => {
10837
+ const { id } = reactRouterDom.useParams();
10838
+ const {
10839
+ order: preview,
10840
+ isError: isPreviewError,
10841
+ error: previewError
10842
+ } = useOrderPreview(id, void 0);
10843
+ useInitiateOrderEdit({ preview });
10844
+ const { onCancel } = useCancelOrderEdit({ preview });
10845
+ if (isPreviewError) {
10846
+ throw previewError;
10915
10847
  }
10916
- const isReady = !isPending && !!order;
10917
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10918
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10919
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
10920
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10921
- ] }),
10922
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
10848
+ const isReady = !!preview;
10849
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
10850
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
10851
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
10923
10852
  ] });
10924
10853
  };
10925
- const EmailForm = ({ order }) => {
10926
- const form = reactHookForm.useForm({
10927
- defaultValues: {
10928
- email: order.email ?? ""
10854
+ const PromotionForm = ({ preview }) => {
10855
+ const { items, shipping_methods } = preview;
10856
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
10857
+ const [comboboxValue, setComboboxValue] = React.useState("");
10858
+ const { handleSuccess } = useRouteModal();
10859
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10860
+ const promoCodes = getPromotionCodes(items, shipping_methods);
10861
+ const { promotions, isPending, isError, error } = usePromotions(
10862
+ {
10863
+ code: promoCodes
10929
10864
  },
10930
- resolver: zod.zodResolver(schema$4)
10865
+ {
10866
+ enabled: !!promoCodes.length
10867
+ }
10868
+ );
10869
+ const comboboxData = useComboboxData({
10870
+ queryKey: ["promotions", "combobox", promoCodes],
10871
+ queryFn: async (params) => {
10872
+ return await sdk.admin.promotion.list({
10873
+ ...params,
10874
+ code: {
10875
+ $nin: promoCodes
10876
+ }
10877
+ });
10878
+ },
10879
+ getOptions: (data) => {
10880
+ return data.promotions.map((promotion) => ({
10881
+ label: promotion.code,
10882
+ value: promotion.code
10883
+ }));
10884
+ }
10931
10885
  });
10932
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10933
- const { handleSuccess } = useRouteModal();
10934
- const onSubmit = form.handleSubmit(async (data) => {
10935
- await mutateAsync(
10936
- { email: data.email },
10886
+ const add = async (value) => {
10887
+ if (!value) {
10888
+ return;
10889
+ }
10890
+ addPromotions(
10937
10891
  {
10938
- onSuccess: () => {
10939
- handleSuccess();
10892
+ promo_codes: [value]
10893
+ },
10894
+ {
10895
+ onError: (e) => {
10896
+ ui.toast.error(e.message);
10897
+ comboboxData.onSearchValueChange("");
10898
+ setComboboxValue("");
10940
10899
  },
10941
- onError: (error) => {
10942
- ui.toast.error(error.message);
10900
+ onSuccess: () => {
10901
+ comboboxData.onSearchValueChange("");
10902
+ setComboboxValue("");
10943
10903
  }
10944
10904
  }
10945
10905
  );
10946
- });
10947
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10948
- KeyboundForm,
10949
- {
10950
- className: "flex flex-1 flex-col overflow-hidden",
10951
- onSubmit,
10952
- children: [
10953
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
10954
- Form$2.Field,
10955
- {
10956
- control: form.control,
10957
- name: "email",
10958
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10959
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
10960
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10961
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10962
- ] })
10963
- }
10964
- ) }),
10965
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10966
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10967
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10968
- ] }) })
10969
- ]
10906
+ };
10907
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10908
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10909
+ const onSubmit = async () => {
10910
+ setIsSubmitting(true);
10911
+ let requestSucceeded = false;
10912
+ await requestOrderEdit(void 0, {
10913
+ onError: (e) => {
10914
+ ui.toast.error(e.message);
10915
+ },
10916
+ onSuccess: () => {
10917
+ requestSucceeded = true;
10918
+ }
10919
+ });
10920
+ if (!requestSucceeded) {
10921
+ setIsSubmitting(false);
10922
+ return;
10970
10923
  }
10971
- ) });
10972
- };
10973
- const schema$4 = objectType({
10974
- email: stringType().email()
10975
- });
10976
- const BillingAddress = () => {
10977
- const { id } = reactRouterDom.useParams();
10978
- const { order, isPending, isError, error } = useOrder(id, {
10979
- fields: "+billing_address"
10980
- });
10981
- if (isError) {
10982
- throw error;
10983
- }
10984
- const isReady = !isPending && !!order;
10985
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10986
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10987
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
10988
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
10989
- ] }),
10990
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
10991
- ] });
10992
- };
10993
- const BillingAddressForm = ({ order }) => {
10994
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
10995
- const form = reactHookForm.useForm({
10996
- defaultValues: {
10997
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
10998
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
10999
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
11000
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
11001
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
11002
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
11003
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
11004
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
11005
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
11006
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
11007
- },
11008
- resolver: zod.zodResolver(schema$3)
11009
- });
11010
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11011
- const { handleSuccess } = useRouteModal();
11012
- const onSubmit = form.handleSubmit(async (data) => {
11013
- await mutateAsync(
11014
- { billing_address: data },
11015
- {
11016
- onSuccess: () => {
11017
- handleSuccess();
11018
- },
11019
- onError: (error) => {
11020
- ui.toast.error(error.message);
11021
- }
11022
- }
11023
- );
11024
- });
11025
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11026
- KeyboundForm,
11027
- {
11028
- className: "flex flex-1 flex-col overflow-hidden",
11029
- onSubmit,
11030
- children: [
11031
- /* @__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: [
11032
- /* @__PURE__ */ jsxRuntime.jsx(
11033
- Form$2.Field,
11034
- {
11035
- control: form.control,
11036
- name: "country_code",
11037
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11038
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11039
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11040
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11041
- ] })
11042
- }
11043
- ),
11044
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11045
- /* @__PURE__ */ jsxRuntime.jsx(
11046
- Form$2.Field,
11047
- {
11048
- control: form.control,
11049
- name: "first_name",
11050
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11051
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11052
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11053
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11054
- ] })
11055
- }
11056
- ),
11057
- /* @__PURE__ */ jsxRuntime.jsx(
11058
- Form$2.Field,
11059
- {
11060
- control: form.control,
11061
- name: "last_name",
11062
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11063
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11064
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11065
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11066
- ] })
11067
- }
11068
- )
11069
- ] }),
11070
- /* @__PURE__ */ jsxRuntime.jsx(
11071
- Form$2.Field,
11072
- {
11073
- control: form.control,
11074
- name: "company",
11075
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11076
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11077
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11078
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11079
- ] })
11080
- }
11081
- ),
11082
- /* @__PURE__ */ jsxRuntime.jsx(
11083
- Form$2.Field,
11084
- {
11085
- control: form.control,
11086
- name: "address_1",
11087
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11088
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11089
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11090
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11091
- ] })
11092
- }
11093
- ),
11094
- /* @__PURE__ */ jsxRuntime.jsx(
11095
- Form$2.Field,
11096
- {
11097
- control: form.control,
11098
- name: "address_2",
11099
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11100
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11101
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11102
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11103
- ] })
11104
- }
11105
- ),
11106
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11107
- /* @__PURE__ */ jsxRuntime.jsx(
11108
- Form$2.Field,
11109
- {
11110
- control: form.control,
11111
- name: "postal_code",
11112
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11113
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11114
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11115
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11116
- ] })
11117
- }
11118
- ),
11119
- /* @__PURE__ */ jsxRuntime.jsx(
11120
- Form$2.Field,
11121
- {
11122
- control: form.control,
11123
- name: "city",
11124
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11125
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11126
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11127
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11128
- ] })
11129
- }
11130
- )
11131
- ] }),
11132
- /* @__PURE__ */ jsxRuntime.jsx(
11133
- Form$2.Field,
11134
- {
11135
- control: form.control,
11136
- name: "province",
11137
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11138
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11139
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11140
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11141
- ] })
11142
- }
11143
- ),
11144
- /* @__PURE__ */ jsxRuntime.jsx(
11145
- Form$2.Field,
11146
- {
11147
- control: form.control,
11148
- name: "phone",
11149
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11150
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11151
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11152
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11153
- ] })
11154
- }
11155
- )
11156
- ] }) }),
11157
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11158
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11159
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11160
- ] }) })
11161
- ]
11162
- }
11163
- ) });
11164
- };
11165
- const schema$3 = addressSchema;
11166
- const PROMOTION_QUERY_KEY = "promotions";
11167
- const promotionsQueryKeys = {
11168
- list: (query2) => [
11169
- PROMOTION_QUERY_KEY,
11170
- query2 ? query2 : void 0
11171
- ],
11172
- detail: (id, query2) => [
11173
- PROMOTION_QUERY_KEY,
11174
- id,
11175
- query2 ? query2 : void 0
11176
- ]
11177
- };
11178
- const usePromotions = (query2, options) => {
11179
- const { data, ...rest } = reactQuery.useQuery({
11180
- queryKey: promotionsQueryKeys.list(query2),
11181
- queryFn: async () => sdk.admin.promotion.list(query2),
11182
- ...options
11183
- });
11184
- return { ...data, ...rest };
11185
- };
11186
- const Promotions = () => {
11187
- const { id } = reactRouterDom.useParams();
11188
- const {
11189
- order: preview,
11190
- isError: isPreviewError,
11191
- error: previewError
11192
- } = useOrderPreview(id, void 0);
11193
- useInitiateOrderEdit({ preview });
11194
- const { onCancel } = useCancelOrderEdit({ preview });
11195
- if (isPreviewError) {
11196
- throw previewError;
11197
- }
11198
- const isReady = !!preview;
11199
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
11200
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
11201
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
11202
- ] });
11203
- };
11204
- const PromotionForm = ({ preview }) => {
11205
- const { items, shipping_methods } = preview;
11206
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11207
- const [comboboxValue, setComboboxValue] = React.useState("");
11208
- const { handleSuccess } = useRouteModal();
11209
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11210
- const promoCodes = getPromotionCodes(items, shipping_methods);
11211
- const { promotions, isPending, isError, error } = usePromotions(
11212
- {
11213
- code: promoCodes
11214
- },
11215
- {
11216
- enabled: !!promoCodes.length
11217
- }
11218
- );
11219
- const comboboxData = useComboboxData({
11220
- queryKey: ["promotions", "combobox", promoCodes],
11221
- queryFn: async (params) => {
11222
- return await sdk.admin.promotion.list({
11223
- ...params,
11224
- code: {
11225
- $nin: promoCodes
11226
- }
11227
- });
11228
- },
11229
- getOptions: (data) => {
11230
- return data.promotions.map((promotion) => ({
11231
- label: promotion.code,
11232
- value: promotion.code
11233
- }));
11234
- }
11235
- });
11236
- const add = async (value) => {
11237
- if (!value) {
11238
- return;
11239
- }
11240
- addPromotions(
11241
- {
11242
- promo_codes: [value]
11243
- },
11244
- {
11245
- onError: (e) => {
11246
- ui.toast.error(e.message);
11247
- comboboxData.onSearchValueChange("");
11248
- setComboboxValue("");
11249
- },
11250
- onSuccess: () => {
11251
- comboboxData.onSearchValueChange("");
11252
- setComboboxValue("");
11253
- }
11254
- }
11255
- );
11256
- };
11257
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11258
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11259
- const onSubmit = async () => {
11260
- setIsSubmitting(true);
11261
- let requestSucceeded = false;
11262
- await requestOrderEdit(void 0, {
11263
- onError: (e) => {
11264
- ui.toast.error(e.message);
11265
- },
11266
- onSuccess: () => {
11267
- requestSucceeded = true;
11268
- }
11269
- });
11270
- if (!requestSucceeded) {
11271
- setIsSubmitting(false);
11272
- return;
11273
- }
11274
- await confirmOrderEdit(void 0, {
11275
- onError: (e) => {
11276
- ui.toast.error(e.message);
11277
- },
11278
- onSuccess: () => {
11279
- handleSuccess();
11280
- },
11281
- onSettled: () => {
11282
- setIsSubmitting(false);
11283
- }
11284
- });
11285
- };
10924
+ await confirmOrderEdit(void 0, {
10925
+ onError: (e) => {
10926
+ ui.toast.error(e.message);
10927
+ },
10928
+ onSuccess: () => {
10929
+ handleSuccess();
10930
+ },
10931
+ onSettled: () => {
10932
+ setIsSubmitting(false);
10933
+ }
10934
+ });
10935
+ };
11286
10936
  if (isError) {
11287
10937
  throw error;
11288
10938
  }
@@ -11440,46 +11090,88 @@ function getPromotionCodes(items, shippingMethods) {
11440
11090
  }
11441
11091
  return Array.from(codes);
11442
11092
  }
11443
- const SalesChannel = () => {
11093
+ const InlineTip = React.forwardRef(
11094
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
11095
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11096
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11097
+ "div",
11098
+ {
11099
+ ref,
11100
+ className: ui.clx(
11101
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11102
+ className
11103
+ ),
11104
+ ...props,
11105
+ children: [
11106
+ /* @__PURE__ */ jsxRuntime.jsx(
11107
+ "div",
11108
+ {
11109
+ role: "presentation",
11110
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11111
+ "bg-ui-tag-orange-icon": variant === "warning"
11112
+ })
11113
+ }
11114
+ ),
11115
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
11116
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11117
+ labelValue,
11118
+ ":"
11119
+ ] }),
11120
+ " ",
11121
+ children
11122
+ ] })
11123
+ ]
11124
+ }
11125
+ );
11126
+ }
11127
+ );
11128
+ InlineTip.displayName = "InlineTip";
11129
+ const MetadataFieldSchema = objectType({
11130
+ key: stringType(),
11131
+ disabled: booleanType().optional(),
11132
+ value: anyType()
11133
+ });
11134
+ const MetadataSchema = objectType({
11135
+ metadata: arrayType(MetadataFieldSchema)
11136
+ });
11137
+ const Metadata = () => {
11444
11138
  const { id } = reactRouterDom.useParams();
11445
- const { draft_order, isPending, isError, error } = useDraftOrder(
11446
- id,
11447
- {
11448
- fields: "+sales_channel_id"
11449
- },
11450
- {
11451
- enabled: !!id
11452
- }
11453
- );
11139
+ const { order, isPending, isError, error } = useOrder(id, {
11140
+ fields: "metadata"
11141
+ });
11454
11142
  if (isError) {
11455
11143
  throw error;
11456
11144
  }
11457
- const ISrEADY = !!draft_order && !isPending;
11145
+ const isReady = !isPending && !!order;
11458
11146
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11459
11147
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11460
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11461
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11148
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
11149
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11462
11150
  ] }),
11463
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11151
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11464
11152
  ] });
11465
11153
  };
11466
- const SalesChannelForm = ({ order }) => {
11154
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11155
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11156
+ const MetadataForm = ({ orderId, metadata }) => {
11157
+ const { handleSuccess } = useRouteModal();
11158
+ const hasUneditableRows = getHasUneditableRows(metadata);
11159
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11467
11160
  const form = reactHookForm.useForm({
11468
11161
  defaultValues: {
11469
- sales_channel_id: order.sales_channel_id || ""
11162
+ metadata: getDefaultValues(metadata)
11470
11163
  },
11471
- resolver: zod.zodResolver(schema$2)
11164
+ resolver: zod.zodResolver(MetadataSchema)
11472
11165
  });
11473
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11474
- const { handleSuccess } = useRouteModal();
11475
- const onSubmit = form.handleSubmit(async (data) => {
11166
+ const handleSubmit = form.handleSubmit(async (data) => {
11167
+ const parsedData = parseValues(data);
11476
11168
  await mutateAsync(
11477
11169
  {
11478
- sales_channel_id: data.sales_channel_id
11170
+ metadata: parsedData
11479
11171
  },
11480
11172
  {
11481
11173
  onSuccess: () => {
11482
- ui.toast.success("Sales channel updated");
11174
+ ui.toast.success("Metadata updated");
11483
11175
  handleSuccess();
11484
11176
  },
11485
11177
  onError: (error) => {
@@ -11488,1209 +11180,604 @@ const SalesChannelForm = ({ order }) => {
11488
11180
  }
11489
11181
  );
11490
11182
  });
11183
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
11184
+ control: form.control,
11185
+ name: "metadata"
11186
+ });
11187
+ function deleteRow(index) {
11188
+ remove(index);
11189
+ if (fields.length === 1) {
11190
+ insert(0, {
11191
+ key: "",
11192
+ value: "",
11193
+ disabled: false
11194
+ });
11195
+ }
11196
+ }
11197
+ function insertRow(index, position) {
11198
+ insert(index + (position === "above" ? 0 : 1), {
11199
+ key: "",
11200
+ value: "",
11201
+ disabled: false
11202
+ });
11203
+ }
11491
11204
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11492
11205
  KeyboundForm,
11493
11206
  {
11207
+ onSubmit: handleSubmit,
11494
11208
  className: "flex flex-1 flex-col overflow-hidden",
11495
- onSubmit,
11496
11209
  children: [
11497
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11498
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11499
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11210
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
11211
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
11212
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
11213
+ /* @__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" }) }),
11214
+ /* @__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" }) })
11215
+ ] }),
11216
+ fields.map((field, index) => {
11217
+ const isDisabled = field.disabled || false;
11218
+ let placeholder = "-";
11219
+ if (typeof field.value === "object") {
11220
+ placeholder = "{ ... }";
11221
+ }
11222
+ if (Array.isArray(field.value)) {
11223
+ placeholder = "[ ... ]";
11224
+ }
11225
+ return /* @__PURE__ */ jsxRuntime.jsx(
11226
+ ConditionalTooltip,
11227
+ {
11228
+ showTooltip: isDisabled,
11229
+ content: "This row is disabled because it contains non-primitive data.",
11230
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
11231
+ /* @__PURE__ */ jsxRuntime.jsxs(
11232
+ "div",
11233
+ {
11234
+ className: ui.clx("grid grid-cols-2 divide-x", {
11235
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
11236
+ }),
11237
+ children: [
11238
+ /* @__PURE__ */ jsxRuntime.jsx(
11239
+ Form$2.Field,
11240
+ {
11241
+ control: form.control,
11242
+ name: `metadata.${index}.key`,
11243
+ render: ({ field: field2 }) => {
11244
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11245
+ GridInput,
11246
+ {
11247
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
11248
+ ...field2,
11249
+ disabled: isDisabled,
11250
+ placeholder: "Key"
11251
+ }
11252
+ ) }) });
11253
+ }
11254
+ }
11255
+ ),
11256
+ /* @__PURE__ */ jsxRuntime.jsx(
11257
+ Form$2.Field,
11258
+ {
11259
+ control: form.control,
11260
+ name: `metadata.${index}.value`,
11261
+ render: ({ field: { value, ...field2 } }) => {
11262
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11263
+ GridInput,
11264
+ {
11265
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
11266
+ ...field2,
11267
+ value: isDisabled ? placeholder : value,
11268
+ disabled: isDisabled,
11269
+ placeholder: "Value"
11270
+ }
11271
+ ) }) });
11272
+ }
11273
+ }
11274
+ )
11275
+ ]
11276
+ }
11277
+ ),
11278
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
11279
+ /* @__PURE__ */ jsxRuntime.jsx(
11280
+ ui.DropdownMenu.Trigger,
11281
+ {
11282
+ className: ui.clx(
11283
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11284
+ {
11285
+ hidden: isDisabled
11286
+ }
11287
+ ),
11288
+ disabled: isDisabled,
11289
+ asChild: true,
11290
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
11291
+ }
11292
+ ),
11293
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
11294
+ /* @__PURE__ */ jsxRuntime.jsxs(
11295
+ ui.DropdownMenu.Item,
11296
+ {
11297
+ className: "gap-x-2",
11298
+ onClick: () => insertRow(index, "above"),
11299
+ children: [
11300
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
11301
+ "Insert row above"
11302
+ ]
11303
+ }
11304
+ ),
11305
+ /* @__PURE__ */ jsxRuntime.jsxs(
11306
+ ui.DropdownMenu.Item,
11307
+ {
11308
+ className: "gap-x-2",
11309
+ onClick: () => insertRow(index, "below"),
11310
+ children: [
11311
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
11312
+ "Insert row below"
11313
+ ]
11314
+ }
11315
+ ),
11316
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
11317
+ /* @__PURE__ */ jsxRuntime.jsxs(
11318
+ ui.DropdownMenu.Item,
11319
+ {
11320
+ className: "gap-x-2",
11321
+ onClick: () => deleteRow(index),
11322
+ children: [
11323
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
11324
+ "Delete row"
11325
+ ]
11326
+ }
11327
+ )
11328
+ ] })
11329
+ ] })
11330
+ ] })
11331
+ },
11332
+ field.id
11333
+ );
11334
+ })
11335
+ ] }),
11336
+ hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
11337
+ ] }),
11338
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11339
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11500
11340
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11501
11341
  ] }) })
11502
11342
  ]
11503
11343
  }
11504
11344
  ) });
11505
11345
  };
11506
- const SalesChannelField = ({ control, order }) => {
11507
- const salesChannels = useComboboxData({
11508
- queryFn: async (params) => {
11509
- return await sdk.admin.salesChannel.list(params);
11510
- },
11511
- queryKey: ["sales-channels"],
11512
- getOptions: (data) => {
11513
- return data.sales_channels.map((salesChannel) => ({
11514
- label: salesChannel.name,
11515
- value: salesChannel.id
11516
- }));
11517
- },
11518
- defaultValue: order.sales_channel_id || void 0
11519
- });
11346
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11520
11347
  return /* @__PURE__ */ jsxRuntime.jsx(
11521
- Form$2.Field,
11348
+ "input",
11522
11349
  {
11523
- control,
11524
- name: "sales_channel_id",
11525
- render: ({ field }) => {
11526
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11527
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11528
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11529
- Combobox,
11530
- {
11531
- options: salesChannels.options,
11532
- fetchNextPage: salesChannels.fetchNextPage,
11533
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11534
- searchValue: salesChannels.searchValue,
11535
- onSearchValueChange: salesChannels.onSearchValueChange,
11536
- placeholder: "Select sales channel",
11537
- ...field
11538
- }
11539
- ) }),
11540
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11541
- ] });
11542
- }
11350
+ ref,
11351
+ ...props,
11352
+ autoComplete: "off",
11353
+ className: ui.clx(
11354
+ "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",
11355
+ className
11356
+ )
11543
11357
  }
11544
11358
  );
11545
- };
11546
- const schema$2 = objectType({
11547
- sales_channel_id: stringType().min(1)
11548
11359
  });
11549
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11550
- const Shipping = () => {
11551
- var _a;
11360
+ GridInput.displayName = "MetadataForm.GridInput";
11361
+ const PlaceholderInner = () => {
11362
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11363
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11364
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11365
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11366
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11367
+ ] }) })
11368
+ ] });
11369
+ };
11370
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11371
+ function getDefaultValues(metadata) {
11372
+ if (!metadata || !Object.keys(metadata).length) {
11373
+ return [
11374
+ {
11375
+ key: "",
11376
+ value: "",
11377
+ disabled: false
11378
+ }
11379
+ ];
11380
+ }
11381
+ return Object.entries(metadata).map(([key, value]) => {
11382
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11383
+ return {
11384
+ key,
11385
+ value,
11386
+ disabled: true
11387
+ };
11388
+ }
11389
+ let stringValue = value;
11390
+ if (typeof value !== "string") {
11391
+ stringValue = JSON.stringify(value);
11392
+ }
11393
+ return {
11394
+ key,
11395
+ value: stringValue,
11396
+ original_key: key
11397
+ };
11398
+ });
11399
+ }
11400
+ function parseValues(values) {
11401
+ const metadata = values.metadata;
11402
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11403
+ if (isEmpty) {
11404
+ return null;
11405
+ }
11406
+ const update = {};
11407
+ metadata.forEach((field) => {
11408
+ let key = field.key;
11409
+ let value = field.value;
11410
+ const disabled = field.disabled;
11411
+ if (!key || !value) {
11412
+ return;
11413
+ }
11414
+ if (disabled) {
11415
+ update[key] = value;
11416
+ return;
11417
+ }
11418
+ key = key.trim();
11419
+ value = value.trim();
11420
+ if (value === "true") {
11421
+ update[key] = true;
11422
+ } else if (value === "false") {
11423
+ update[key] = false;
11424
+ } else {
11425
+ const parsedNumber = parseFloat(value);
11426
+ if (!isNaN(parsedNumber)) {
11427
+ update[key] = parsedNumber;
11428
+ } else {
11429
+ update[key] = value;
11430
+ }
11431
+ }
11432
+ });
11433
+ return update;
11434
+ }
11435
+ function getHasUneditableRows(metadata) {
11436
+ if (!metadata) {
11437
+ return false;
11438
+ }
11439
+ return Object.values(metadata).some(
11440
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11441
+ );
11442
+ }
11443
+ const ShippingAddress = () => {
11552
11444
  const { id } = reactRouterDom.useParams();
11553
11445
  const { order, isPending, isError, error } = useOrder(id, {
11554
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11446
+ fields: "+shipping_address"
11555
11447
  });
11556
- const {
11557
- order: preview,
11558
- isPending: isPreviewPending,
11559
- isError: isPreviewError,
11560
- error: previewError
11561
- } = useOrderPreview(id);
11562
- useInitiateOrderEdit({ preview });
11563
- const { onCancel } = useCancelOrderEdit({ preview });
11564
11448
  if (isError) {
11565
11449
  throw error;
11566
11450
  }
11567
- if (isPreviewError) {
11568
- throw previewError;
11569
- }
11570
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11571
- const isReady = preview && !isPreviewPending && order && !isPending;
11572
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11573
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11574
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11575
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11576
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11577
- ] }) }) }),
11578
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11579
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11580
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11581
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11582
- ] }) });
11451
+ const isReady = !isPending && !!order;
11452
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11453
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11454
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11455
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11456
+ ] }),
11457
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11458
+ ] });
11583
11459
  };
11584
- const ShippingForm = ({ preview, order }) => {
11585
- var _a;
11586
- const { setIsOpen } = useStackedModal();
11587
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11588
- const [data, setData] = React.useState(null);
11589
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11590
- const { shipping_options } = useShippingOptions(
11591
- {
11592
- id: appliedShippingOptionIds,
11593
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11460
+ const ShippingAddressForm = ({ order }) => {
11461
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11462
+ const form = reactHookForm.useForm({
11463
+ defaultValues: {
11464
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11465
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11466
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11467
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11468
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11469
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11470
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11471
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11472
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11473
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11594
11474
  },
11595
- {
11596
- enabled: appliedShippingOptionIds.length > 0
11597
- }
11598
- );
11599
- const uniqueShippingProfiles = React.useMemo(() => {
11600
- const profiles = /* @__PURE__ */ new Map();
11601
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11602
- profiles.set(profile.id, profile);
11603
- });
11604
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11605
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11606
- });
11607
- return Array.from(profiles.values());
11608
- }, [order.items, shipping_options]);
11475
+ resolver: zod.zodResolver(schema$2)
11476
+ });
11477
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11609
11478
  const { handleSuccess } = useRouteModal();
11610
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11611
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11612
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11613
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11614
- const onSubmit = async () => {
11615
- setIsSubmitting(true);
11616
- let requestSucceeded = false;
11617
- await requestOrderEdit(void 0, {
11618
- onError: (e) => {
11619
- ui.toast.error(`Failed to request order edit: ${e.message}`);
11620
- },
11621
- onSuccess: () => {
11622
- requestSucceeded = true;
11623
- }
11624
- });
11625
- if (!requestSucceeded) {
11626
- setIsSubmitting(false);
11627
- return;
11628
- }
11629
- await confirmOrderEdit(void 0, {
11630
- onError: (e) => {
11631
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11632
- },
11633
- onSuccess: () => {
11634
- handleSuccess();
11479
+ const onSubmit = form.handleSubmit(async (data) => {
11480
+ await mutateAsync(
11481
+ {
11482
+ shipping_address: {
11483
+ first_name: data.first_name,
11484
+ last_name: data.last_name,
11485
+ company: data.company,
11486
+ address_1: data.address_1,
11487
+ address_2: data.address_2,
11488
+ city: data.city,
11489
+ province: data.province,
11490
+ country_code: data.country_code,
11491
+ postal_code: data.postal_code,
11492
+ phone: data.phone
11493
+ }
11635
11494
  },
11636
- onSettled: () => {
11637
- setIsSubmitting(false);
11638
- }
11639
- });
11640
- };
11641
- const onKeydown = React.useCallback(
11642
- (e) => {
11643
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11644
- if (data || isSubmitting) {
11645
- return;
11495
+ {
11496
+ onSuccess: () => {
11497
+ handleSuccess();
11498
+ },
11499
+ onError: (error) => {
11500
+ ui.toast.error(error.message);
11646
11501
  }
11647
- onSubmit();
11648
11502
  }
11649
- },
11650
- [data, isSubmitting, onSubmit]
11651
- );
11652
- React.useEffect(() => {
11653
- document.addEventListener("keydown", onKeydown);
11654
- return () => {
11655
- document.removeEventListener("keydown", onKeydown);
11656
- };
11657
- }, [onKeydown]);
11658
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11659
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11660
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11661
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11662
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11663
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11664
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11665
- ] }),
11666
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11667
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11668
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11503
+ );
11504
+ });
11505
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11506
+ KeyboundForm,
11507
+ {
11508
+ className: "flex flex-1 flex-col overflow-hidden",
11509
+ onSubmit,
11510
+ children: [
11511
+ /* @__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: [
11512
+ /* @__PURE__ */ jsxRuntime.jsx(
11513
+ Form$2.Field,
11514
+ {
11515
+ control: form.control,
11516
+ name: "country_code",
11517
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11518
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11519
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11520
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11521
+ ] })
11522
+ }
11523
+ ),
11524
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11669
11525
  /* @__PURE__ */ jsxRuntime.jsx(
11670
- ui.Text,
11526
+ Form$2.Field,
11671
11527
  {
11672
- size: "xsmall",
11673
- weight: "plus",
11674
- className: "text-ui-fg-muted",
11675
- children: "Shipping profile"
11528
+ control: form.control,
11529
+ name: "first_name",
11530
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11531
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11532
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11533
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11534
+ ] })
11676
11535
  }
11677
11536
  ),
11678
11537
  /* @__PURE__ */ jsxRuntime.jsx(
11679
- ui.Text,
11538
+ Form$2.Field,
11680
11539
  {
11681
- size: "xsmall",
11682
- weight: "plus",
11683
- className: "text-ui-fg-muted",
11684
- children: "Action"
11540
+ control: form.control,
11541
+ name: "last_name",
11542
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11543
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11544
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11545
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11546
+ ] })
11685
11547
  }
11686
11548
  )
11687
11549
  ] }),
11688
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11689
- var _a2, _b, _c, _d, _e, _f, _g;
11690
- const items = getItemsWithShippingProfile(
11691
- profile.id,
11692
- order.items
11693
- );
11694
- const hasItems = items.length > 0;
11695
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11696
- (option) => option.shipping_profile_id === profile.id
11697
- );
11698
- const shippingMethod = preview.shipping_methods.find(
11699
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11700
- );
11701
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11702
- (action) => action.action === "SHIPPING_ADD"
11703
- );
11704
- return /* @__PURE__ */ jsxRuntime.jsxs(
11705
- radixUi.Accordion.Item,
11550
+ /* @__PURE__ */ jsxRuntime.jsx(
11551
+ Form$2.Field,
11552
+ {
11553
+ control: form.control,
11554
+ name: "company",
11555
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11556
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11557
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11558
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11559
+ ] })
11560
+ }
11561
+ ),
11562
+ /* @__PURE__ */ jsxRuntime.jsx(
11563
+ Form$2.Field,
11564
+ {
11565
+ control: form.control,
11566
+ name: "address_1",
11567
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11568
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11569
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11570
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11571
+ ] })
11572
+ }
11573
+ ),
11574
+ /* @__PURE__ */ jsxRuntime.jsx(
11575
+ Form$2.Field,
11576
+ {
11577
+ control: form.control,
11578
+ name: "address_2",
11579
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11580
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11581
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11582
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11583
+ ] })
11584
+ }
11585
+ ),
11586
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11587
+ /* @__PURE__ */ jsxRuntime.jsx(
11588
+ Form$2.Field,
11706
11589
  {
11707
- value: profile.id,
11708
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11709
- children: [
11710
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11711
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11712
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11713
- ui.IconButton,
11714
- {
11715
- size: "2xsmall",
11716
- variant: "transparent",
11717
- className: "group/trigger",
11718
- disabled: !hasItems,
11719
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11720
- }
11721
- ) }),
11722
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11723
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
11724
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
11725
- /* @__PURE__ */ jsxRuntime.jsx(
11726
- ui.Text,
11727
- {
11728
- size: "small",
11729
- weight: "plus",
11730
- leading: "compact",
11731
- children: profile.name
11732
- }
11733
- ),
11734
- /* @__PURE__ */ jsxRuntime.jsxs(
11735
- ui.Text,
11736
- {
11737
- size: "small",
11738
- leading: "compact",
11739
- className: "text-ui-fg-subtle",
11740
- children: [
11741
- items.length,
11742
- " ",
11743
- pluralize(items.length, "items", "item")
11744
- ]
11745
- }
11746
- )
11747
- ] })
11748
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11749
- /* @__PURE__ */ jsxRuntime.jsx(
11750
- ui.Tooltip,
11751
- {
11752
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
11753
- var _a3, _b2, _c2;
11754
- return /* @__PURE__ */ jsxRuntime.jsx(
11755
- "li",
11756
- {
11757
- children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11758
- },
11759
- item.id
11760
- );
11761
- }) }),
11762
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11763
- ui.Badge,
11764
- {
11765
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11766
- size: "xsmall",
11767
- children: [
11768
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
11769
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
11770
- items.reduce(
11771
- (acc, item) => acc + item.quantity,
11772
- 0
11773
- ),
11774
- "x",
11775
- " ",
11776
- pluralize(items.length, "items", "item")
11777
- ] })
11778
- ]
11779
- }
11780
- )
11781
- }
11782
- ),
11783
- /* @__PURE__ */ jsxRuntime.jsx(
11784
- ui.Tooltip,
11785
- {
11786
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11787
- children: /* @__PURE__ */ jsxRuntime.jsxs(
11788
- ui.Badge,
11789
- {
11790
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11791
- size: "xsmall",
11792
- children: [
11793
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
11794
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11795
- ]
11796
- }
11797
- )
11798
- }
11799
- ),
11800
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
11801
- ui.Badge,
11802
- {
11803
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11804
- size: "xsmall",
11805
- children: [
11806
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
11807
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
11808
- ]
11809
- }
11810
- ) })
11811
- ] })
11812
- ] }),
11813
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
11814
- ActionMenu,
11815
- {
11816
- groups: [
11817
- {
11818
- actions: [
11819
- hasItems ? {
11820
- label: "Edit shipping option",
11821
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
11822
- onClick: () => {
11823
- setIsOpen(
11824
- STACKED_FOCUS_MODAL_ID,
11825
- true
11826
- );
11827
- setData({
11828
- shippingProfileId: profile.id,
11829
- shippingOption,
11830
- shippingMethod
11831
- });
11832
- }
11833
- } : void 0,
11834
- {
11835
- label: "Remove shipping option",
11836
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
11837
- onClick: () => {
11838
- if (shippingMethod) {
11839
- if (addShippingMethodAction) {
11840
- removeActionShippingMethod(
11841
- addShippingMethodAction.id
11842
- );
11843
- } else {
11844
- removeShippingMethod(
11845
- shippingMethod.id
11846
- );
11847
- }
11848
- }
11849
- }
11850
- }
11851
- ].filter(Boolean)
11852
- }
11853
- ]
11854
- }
11855
- ) : /* @__PURE__ */ jsxRuntime.jsx(
11856
- StackedModalTrigger,
11857
- {
11858
- shippingProfileId: profile.id,
11859
- shippingOption,
11860
- shippingMethod,
11861
- setData,
11862
- children: "Add shipping option"
11863
- }
11864
- )
11865
- ] }),
11866
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
11867
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11868
- items.map((item, idx) => {
11869
- var _a3, _b2, _c2, _d2, _e2;
11870
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11871
- /* @__PURE__ */ jsxRuntime.jsxs(
11872
- "div",
11873
- {
11874
- className: "px-3 flex items-center gap-x-3",
11875
- children: [
11876
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
11877
- ui.Divider,
11878
- {
11879
- variant: "dashed",
11880
- orientation: "vertical"
11881
- }
11882
- ) }),
11883
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11884
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
11885
- ui.Text,
11886
- {
11887
- size: "small",
11888
- leading: "compact",
11889
- className: "text-ui-fg-subtle",
11890
- children: [
11891
- item.quantity,
11892
- "x"
11893
- ]
11894
- }
11895
- ) }),
11896
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
11897
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11898
- /* @__PURE__ */ jsxRuntime.jsxs(
11899
- ui.Text,
11900
- {
11901
- size: "small",
11902
- leading: "compact",
11903
- weight: "plus",
11904
- children: [
11905
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11906
- " (",
11907
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11908
- ")"
11909
- ]
11910
- }
11911
- ),
11912
- /* @__PURE__ */ jsxRuntime.jsx(
11913
- ui.Text,
11914
- {
11915
- size: "small",
11916
- leading: "compact",
11917
- className: "text-ui-fg-subtle",
11918
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11919
- }
11920
- )
11921
- ] })
11922
- ] })
11923
- ]
11924
- },
11925
- item.id
11926
- ),
11927
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
11928
- ] }, item.id);
11929
- })
11930
- ] })
11931
- ]
11932
- },
11933
- profile.id
11934
- );
11935
- }) })
11936
- ] }) })
11937
- ] }) }),
11938
- /* @__PURE__ */ jsxRuntime.jsx(
11939
- StackedFocusModal,
11940
- {
11941
- id: STACKED_FOCUS_MODAL_ID,
11942
- onOpenChangeCallback: (open) => {
11943
- if (!open) {
11944
- setData(null);
11590
+ control: form.control,
11591
+ name: "postal_code",
11592
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11593
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11594
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11595
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11596
+ ] })
11597
+ }
11598
+ ),
11599
+ /* @__PURE__ */ jsxRuntime.jsx(
11600
+ Form$2.Field,
11601
+ {
11602
+ control: form.control,
11603
+ name: "city",
11604
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11605
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11606
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11607
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11608
+ ] })
11609
+ }
11610
+ )
11611
+ ] }),
11612
+ /* @__PURE__ */ jsxRuntime.jsx(
11613
+ Form$2.Field,
11614
+ {
11615
+ control: form.control,
11616
+ name: "province",
11617
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11618
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11619
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11620
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11621
+ ] })
11945
11622
  }
11946
- return open;
11947
- },
11948
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11949
- }
11950
- )
11623
+ ),
11624
+ /* @__PURE__ */ jsxRuntime.jsx(
11625
+ Form$2.Field,
11626
+ {
11627
+ control: form.control,
11628
+ name: "phone",
11629
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11630
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11631
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11632
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11633
+ ] })
11634
+ }
11635
+ )
11636
+ ] }) }),
11637
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11638
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11639
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11640
+ ] }) })
11641
+ ]
11642
+ }
11643
+ ) });
11644
+ };
11645
+ const schema$2 = addressSchema;
11646
+ const TransferOwnership = () => {
11647
+ const { id } = reactRouterDom.useParams();
11648
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11649
+ fields: "id,customer_id,customer.*"
11650
+ });
11651
+ if (isError) {
11652
+ throw error;
11653
+ }
11654
+ const isReady = !isPending && !!draft_order;
11655
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11656
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11657
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11658
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
11951
11659
  ] }),
11952
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
11953
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11954
- /* @__PURE__ */ jsxRuntime.jsx(
11955
- ui.Button,
11956
- {
11957
- size: "small",
11958
- type: "button",
11959
- isLoading: isSubmitting,
11960
- onClick: onSubmit,
11961
- children: "Save"
11962
- }
11963
- )
11964
- ] }) })
11660
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
11965
11661
  ] });
11966
11662
  };
11967
- const StackedModalTrigger = ({
11968
- shippingProfileId,
11969
- shippingOption,
11970
- shippingMethod,
11971
- setData,
11972
- children
11973
- }) => {
11974
- const { setIsOpen, getIsOpen } = useStackedModal();
11975
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11976
- const onToggle = () => {
11977
- if (isOpen) {
11978
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11979
- setData(null);
11980
- } else {
11981
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11982
- setData({
11983
- shippingProfileId,
11984
- shippingOption,
11985
- shippingMethod
11986
- });
11987
- }
11988
- };
11989
- return /* @__PURE__ */ jsxRuntime.jsx(
11990
- ui.Button,
11991
- {
11992
- size: "small",
11993
- variant: "secondary",
11994
- onClick: onToggle,
11995
- className: "text-ui-fg-primary shrink-0",
11996
- children
11997
- }
11998
- );
11999
- };
12000
- const ShippingProfileForm = ({
12001
- data,
12002
- order,
12003
- preview
12004
- }) => {
12005
- var _a, _b, _c, _d, _e, _f;
12006
- const { setIsOpen } = useStackedModal();
11663
+ const TransferOwnershipForm = ({ order }) => {
11664
+ var _a, _b;
12007
11665
  const form = reactHookForm.useForm({
12008
- resolver: zod.zodResolver(shippingMethodSchema),
12009
11666
  defaultValues: {
12010
- location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12011
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12012
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12013
- }
11667
+ customer_id: order.customer_id || ""
11668
+ },
11669
+ resolver: zod.zodResolver(schema$1)
12014
11670
  });
12015
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12016
- const {
12017
- mutateAsync: updateShippingMethod,
12018
- isPending: isUpdatingShippingMethod
12019
- } = useDraftOrderUpdateShippingMethod(order.id);
12020
- const onSubmit = form.handleSubmit(async (values) => {
12021
- if (lodash.isEqual(values, form.formState.defaultValues)) {
12022
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12023
- return;
12024
- }
12025
- if (data.shippingMethod) {
12026
- await updateShippingMethod(
12027
- {
12028
- method_id: data.shippingMethod.id,
12029
- shipping_option_id: values.shipping_option_id,
12030
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12031
- },
12032
- {
12033
- onError: (e) => {
12034
- ui.toast.error(e.message);
12035
- },
12036
- onSuccess: () => {
12037
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12038
- }
12039
- }
12040
- );
12041
- return;
12042
- }
12043
- await addShippingMethod(
12044
- {
12045
- shipping_option_id: values.shipping_option_id,
12046
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12047
- },
11671
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11672
+ const { handleSuccess } = useRouteModal();
11673
+ const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
11674
+ const currentCustomer = order.customer ? {
11675
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
11676
+ value: order.customer.id
11677
+ } : null;
11678
+ const onSubmit = form.handleSubmit(async (data) => {
11679
+ await mutateAsync(
11680
+ { customer_id: data.customer_id },
12048
11681
  {
12049
- onError: (e) => {
12050
- ui.toast.error(e.message);
12051
- },
12052
11682
  onSuccess: () => {
12053
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11683
+ ui.toast.success("Customer updated");
11684
+ handleSuccess();
11685
+ },
11686
+ onError: (error) => {
11687
+ ui.toast.error(error.message);
12054
11688
  }
12055
11689
  }
12056
11690
  );
12057
11691
  });
12058
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11692
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12059
11693
  KeyboundForm,
12060
11694
  {
12061
- className: "flex h-full flex-col overflow-hidden",
11695
+ className: "flex flex-1 flex-col overflow-hidden",
12062
11696
  onSubmit,
12063
11697
  children: [
12064
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12065
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12066
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12067
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12068
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
11698
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
11699
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
11700
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
11701
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11702
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
11703
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
11704
+ ] }),
11705
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
11706
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
11707
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
11708
+ ] })
12069
11709
  ] }),
12070
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12071
- /* @__PURE__ */ jsxRuntime.jsx(
12072
- LocationField,
12073
- {
12074
- control: form.control,
12075
- setValue: form.setValue
12076
- }
12077
- ),
12078
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12079
- /* @__PURE__ */ jsxRuntime.jsx(
12080
- ShippingOptionField,
12081
- {
12082
- shippingProfileId: data.shippingProfileId,
12083
- preview,
12084
- control: form.control
12085
- }
12086
- ),
12087
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12088
11710
  /* @__PURE__ */ jsxRuntime.jsx(
12089
- CustomAmountField,
11711
+ CustomerField,
12090
11712
  {
12091
11713
  control: form.control,
12092
- currencyCode: order.currency_code
12093
- }
12094
- ),
12095
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12096
- /* @__PURE__ */ jsxRuntime.jsx(
12097
- ItemsPreview,
12098
- {
12099
- order,
12100
- shippingProfileId: data.shippingProfileId
12101
- }
12102
- )
12103
- ] }) }) }),
12104
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12105
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12106
- /* @__PURE__ */ jsxRuntime.jsx(
12107
- ui.Button,
12108
- {
12109
- size: "small",
12110
- type: "submit",
12111
- isLoading: isPending || isUpdatingShippingMethod,
12112
- children: data.shippingMethod ? "Update" : "Add"
11714
+ currentCustomerId: order.customer_id
12113
11715
  }
12114
11716
  )
11717
+ ] }),
11718
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11719
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
11720
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12115
11721
  ] }) })
12116
11722
  ]
12117
11723
  }
12118
- ) }) });
12119
- };
12120
- const shippingMethodSchema = objectType({
12121
- location_id: stringType(),
12122
- shipping_option_id: stringType(),
12123
- custom_amount: unionType([numberType(), stringType()]).optional()
12124
- });
12125
- const ItemsPreview = ({ order, shippingProfileId }) => {
12126
- const matches = order.items.filter(
12127
- (item) => {
12128
- var _a, _b, _c;
12129
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12130
- }
12131
- );
12132
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12133
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12134
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12135
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12136
- ] }) }),
12137
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12138
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12139
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12140
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12141
- ] }),
12142
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12143
- "div",
12144
- {
12145
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12146
- children: [
12147
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12148
- /* @__PURE__ */ jsxRuntime.jsx(
12149
- Thumbnail,
12150
- {
12151
- thumbnail: item.thumbnail,
12152
- alt: item.product_title ?? void 0
12153
- }
12154
- ),
12155
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12156
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12157
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12158
- /* @__PURE__ */ jsxRuntime.jsxs(
12159
- ui.Text,
12160
- {
12161
- size: "small",
12162
- leading: "compact",
12163
- className: "text-ui-fg-subtle",
12164
- children: [
12165
- "(",
12166
- item.variant_title,
12167
- ")"
12168
- ]
12169
- }
12170
- )
12171
- ] }),
12172
- /* @__PURE__ */ jsxRuntime.jsx(
12173
- ui.Text,
12174
- {
12175
- size: "small",
12176
- leading: "compact",
12177
- className: "text-ui-fg-subtle",
12178
- children: item.variant_sku
12179
- }
12180
- )
12181
- ] })
12182
- ] }),
12183
- /* @__PURE__ */ jsxRuntime.jsxs(
12184
- ui.Text,
12185
- {
12186
- size: "small",
12187
- leading: "compact",
12188
- className: "text-ui-fg-subtle",
12189
- children: [
12190
- item.quantity,
12191
- "x"
12192
- ]
12193
- }
12194
- )
12195
- ]
12196
- },
12197
- item.id
12198
- )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12199
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12200
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12201
- 'No items found for "',
12202
- query,
12203
- '".'
12204
- ] })
12205
- ] }) })
12206
- ] })
12207
- ] });
11724
+ ) });
12208
11725
  };
12209
- const LocationField = ({ control, setValue }) => {
12210
- const locations = useComboboxData({
12211
- queryKey: ["locations"],
11726
+ const CustomerField = ({ control, currentCustomerId }) => {
11727
+ const customers = useComboboxData({
12212
11728
  queryFn: async (params) => {
12213
- return await sdk.admin.stockLocation.list(params);
11729
+ return await sdk.admin.customer.list({
11730
+ ...params,
11731
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
11732
+ });
12214
11733
  },
11734
+ queryKey: ["customers"],
12215
11735
  getOptions: (data) => {
12216
- return data.stock_locations.map((location) => ({
12217
- label: location.name,
12218
- value: location.id
12219
- }));
11736
+ return data.customers.map((customer) => {
11737
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
11738
+ return {
11739
+ label: name ? `${name} (${customer.email})` : customer.email,
11740
+ value: customer.id
11741
+ };
11742
+ });
12220
11743
  }
12221
11744
  });
12222
11745
  return /* @__PURE__ */ jsxRuntime.jsx(
12223
11746
  Form$2.Field,
12224
11747
  {
11748
+ name: "customer_id",
12225
11749
  control,
12226
- name: "location_id",
12227
- render: ({ field: { onChange, ...field } }) => {
12228
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12229
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12230
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12231
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12232
- ] }),
12233
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12234
- Combobox,
12235
- {
12236
- options: locations.options,
12237
- fetchNextPage: locations.fetchNextPage,
12238
- isFetchingNextPage: locations.isFetchingNextPage,
12239
- searchValue: locations.searchValue,
12240
- onSearchValueChange: locations.onSearchValueChange,
12241
- placeholder: "Select location",
12242
- onChange: (value) => {
12243
- setValue("shipping_option_id", "", {
12244
- shouldDirty: true,
12245
- shouldTouch: true
12246
- });
12247
- onChange(value);
12248
- },
12249
- ...field
12250
- }
12251
- ) })
12252
- ] }) });
12253
- }
12254
- }
12255
- );
12256
- };
12257
- const ShippingOptionField = ({
12258
- shippingProfileId,
12259
- preview,
12260
- control
12261
- }) => {
12262
- var _a;
12263
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12264
- const shippingOptions = useComboboxData({
12265
- queryKey: ["shipping_options", locationId, shippingProfileId],
12266
- queryFn: async (params) => {
12267
- return await sdk.admin.shippingOption.list({
12268
- ...params,
12269
- stock_location_id: locationId,
12270
- shipping_profile_id: shippingProfileId
12271
- });
12272
- },
12273
- getOptions: (data) => {
12274
- return data.shipping_options.map((option) => {
12275
- var _a2;
12276
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12277
- (r) => r.attribute === "is_return" && r.value === "true"
12278
- )) {
12279
- return void 0;
12280
- }
12281
- return {
12282
- label: option.name,
12283
- value: option.id
12284
- };
12285
- }).filter(Boolean);
12286
- },
12287
- enabled: !!locationId && !!shippingProfileId,
12288
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12289
- });
12290
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12291
- return /* @__PURE__ */ jsxRuntime.jsx(
12292
- Form$2.Field,
12293
- {
12294
- control,
12295
- name: "shipping_option_id",
12296
- render: ({ field }) => {
12297
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12298
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12299
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12300
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12301
- ] }),
12302
- /* @__PURE__ */ jsxRuntime.jsx(
12303
- ConditionalTooltip,
12304
- {
12305
- content: tooltipContent,
12306
- showTooltip: !locationId || !shippingProfileId,
12307
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12308
- Combobox,
12309
- {
12310
- options: shippingOptions.options,
12311
- fetchNextPage: shippingOptions.fetchNextPage,
12312
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12313
- searchValue: shippingOptions.searchValue,
12314
- onSearchValueChange: shippingOptions.onSearchValueChange,
12315
- placeholder: "Select shipping option",
12316
- ...field,
12317
- disabled: !locationId || !shippingProfileId
12318
- }
12319
- ) }) })
12320
- }
12321
- )
12322
- ] }) });
12323
- }
12324
- }
12325
- );
12326
- };
12327
- const CustomAmountField = ({
12328
- control,
12329
- currencyCode
12330
- }) => {
12331
- return /* @__PURE__ */ jsxRuntime.jsx(
12332
- Form$2.Field,
12333
- {
12334
- control,
12335
- name: "custom_amount",
12336
- render: ({ field: { onChange, ...field } }) => {
12337
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12338
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12339
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12340
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12341
- ] }),
12342
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12343
- ui.CurrencyInput,
12344
- {
12345
- ...field,
12346
- onValueChange: (value) => onChange(value),
12347
- symbol: getNativeSymbol(currencyCode),
12348
- code: currencyCode
12349
- }
12350
- ) })
12351
- ] });
12352
- }
11750
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
11751
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11752
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
11753
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
11754
+ ] }),
11755
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11756
+ Combobox,
11757
+ {
11758
+ options: customers.options,
11759
+ fetchNextPage: customers.fetchNextPage,
11760
+ isFetchingNextPage: customers.isFetchingNextPage,
11761
+ searchValue: customers.searchValue,
11762
+ onSearchValueChange: customers.onSearchValueChange,
11763
+ placeholder: "Select customer",
11764
+ ...field
11765
+ }
11766
+ ) }),
11767
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11768
+ ] })
12353
11769
  }
12354
11770
  );
12355
11771
  };
12356
- const ShippingAddress = () => {
12357
- const { id } = reactRouterDom.useParams();
12358
- const { order, isPending, isError, error } = useOrder(id, {
12359
- fields: "+shipping_address"
12360
- });
12361
- if (isError) {
12362
- throw error;
12363
- }
12364
- const isReady = !isPending && !!order;
12365
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12366
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12367
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12368
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12369
- ] }),
12370
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12371
- ] });
12372
- };
12373
- const ShippingAddressForm = ({ order }) => {
12374
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12375
- const form = reactHookForm.useForm({
12376
- defaultValues: {
12377
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12378
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12379
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12380
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12381
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12382
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12383
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12384
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12385
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12386
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12387
- },
12388
- resolver: zod.zodResolver(schema$1)
12389
- });
12390
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12391
- const { handleSuccess } = useRouteModal();
12392
- const onSubmit = form.handleSubmit(async (data) => {
12393
- await mutateAsync(
12394
- {
12395
- shipping_address: {
12396
- first_name: data.first_name,
12397
- last_name: data.last_name,
12398
- company: data.company,
12399
- address_1: data.address_1,
12400
- address_2: data.address_2,
12401
- city: data.city,
12402
- province: data.province,
12403
- country_code: data.country_code,
12404
- postal_code: data.postal_code,
12405
- phone: data.phone
12406
- }
12407
- },
12408
- {
12409
- onSuccess: () => {
12410
- handleSuccess();
12411
- },
12412
- onError: (error) => {
12413
- ui.toast.error(error.message);
12414
- }
12415
- }
12416
- );
12417
- });
12418
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12419
- KeyboundForm,
11772
+ const Illustration = () => {
11773
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11774
+ "svg",
12420
11775
  {
12421
- className: "flex flex-1 flex-col overflow-hidden",
12422
- onSubmit,
12423
- children: [
12424
- /* @__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: [
12425
- /* @__PURE__ */ jsxRuntime.jsx(
12426
- Form$2.Field,
12427
- {
12428
- control: form.control,
12429
- name: "country_code",
12430
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12431
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12432
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12433
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12434
- ] })
12435
- }
12436
- ),
12437
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12438
- /* @__PURE__ */ jsxRuntime.jsx(
12439
- Form$2.Field,
12440
- {
12441
- control: form.control,
12442
- name: "first_name",
12443
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12444
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12445
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12446
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12447
- ] })
12448
- }
12449
- ),
12450
- /* @__PURE__ */ jsxRuntime.jsx(
12451
- Form$2.Field,
12452
- {
12453
- control: form.control,
12454
- name: "last_name",
12455
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12456
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12457
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12458
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12459
- ] })
12460
- }
12461
- )
12462
- ] }),
12463
- /* @__PURE__ */ jsxRuntime.jsx(
12464
- Form$2.Field,
12465
- {
12466
- control: form.control,
12467
- name: "company",
12468
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12469
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12470
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12471
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12472
- ] })
12473
- }
12474
- ),
12475
- /* @__PURE__ */ jsxRuntime.jsx(
12476
- Form$2.Field,
12477
- {
12478
- control: form.control,
12479
- name: "address_1",
12480
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12481
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12482
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12483
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12484
- ] })
12485
- }
12486
- ),
12487
- /* @__PURE__ */ jsxRuntime.jsx(
12488
- Form$2.Field,
12489
- {
12490
- control: form.control,
12491
- name: "address_2",
12492
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12493
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12494
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12495
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12496
- ] })
12497
- }
12498
- ),
12499
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12500
- /* @__PURE__ */ jsxRuntime.jsx(
12501
- Form$2.Field,
12502
- {
12503
- control: form.control,
12504
- name: "postal_code",
12505
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12506
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12507
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12508
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12509
- ] })
12510
- }
12511
- ),
12512
- /* @__PURE__ */ jsxRuntime.jsx(
12513
- Form$2.Field,
12514
- {
12515
- control: form.control,
12516
- name: "city",
12517
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12518
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12519
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12520
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12521
- ] })
12522
- }
12523
- )
12524
- ] }),
12525
- /* @__PURE__ */ jsxRuntime.jsx(
12526
- Form$2.Field,
12527
- {
12528
- control: form.control,
12529
- name: "province",
12530
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12531
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12532
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12533
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12534
- ] })
12535
- }
12536
- ),
12537
- /* @__PURE__ */ jsxRuntime.jsx(
12538
- Form$2.Field,
12539
- {
12540
- control: form.control,
12541
- name: "phone",
12542
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12543
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12544
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12545
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12546
- ] })
12547
- }
12548
- )
12549
- ] }) }),
12550
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12551
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12552
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12553
- ] }) })
12554
- ]
12555
- }
12556
- ) });
12557
- };
12558
- const schema$1 = addressSchema;
12559
- const TransferOwnership = () => {
12560
- const { id } = reactRouterDom.useParams();
12561
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
12562
- fields: "id,customer_id,customer.*"
12563
- });
12564
- if (isError) {
12565
- throw error;
12566
- }
12567
- const isReady = !isPending && !!draft_order;
12568
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12569
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12570
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
12571
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
12572
- ] }),
12573
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
12574
- ] });
12575
- };
12576
- const TransferOwnershipForm = ({ order }) => {
12577
- var _a, _b;
12578
- const form = reactHookForm.useForm({
12579
- defaultValues: {
12580
- customer_id: order.customer_id || ""
12581
- },
12582
- resolver: zod.zodResolver(schema)
12583
- });
12584
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12585
- const { handleSuccess } = useRouteModal();
12586
- const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
12587
- const currentCustomer = order.customer ? {
12588
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
12589
- value: order.customer.id
12590
- } : null;
12591
- const onSubmit = form.handleSubmit(async (data) => {
12592
- await mutateAsync(
12593
- { customer_id: data.customer_id },
12594
- {
12595
- onSuccess: () => {
12596
- ui.toast.success("Customer updated");
12597
- handleSuccess();
12598
- },
12599
- onError: (error) => {
12600
- ui.toast.error(error.message);
12601
- }
12602
- }
12603
- );
12604
- });
12605
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12606
- KeyboundForm,
12607
- {
12608
- className: "flex flex-1 flex-col overflow-hidden",
12609
- onSubmit,
12610
- children: [
12611
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
12612
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
12613
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
12614
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12615
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
12616
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
12617
- ] }),
12618
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
12619
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
12620
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
12621
- ] })
12622
- ] }),
12623
- /* @__PURE__ */ jsxRuntime.jsx(
12624
- CustomerField,
12625
- {
12626
- control: form.control,
12627
- currentCustomerId: order.customer_id
12628
- }
12629
- )
12630
- ] }),
12631
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12632
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
12633
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12634
- ] }) })
12635
- ]
12636
- }
12637
- ) });
12638
- };
12639
- const CustomerField = ({ control, currentCustomerId }) => {
12640
- const customers = useComboboxData({
12641
- queryFn: async (params) => {
12642
- return await sdk.admin.customer.list({
12643
- ...params,
12644
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12645
- });
12646
- },
12647
- queryKey: ["customers"],
12648
- getOptions: (data) => {
12649
- return data.customers.map((customer) => {
12650
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
12651
- return {
12652
- label: name ? `${name} (${customer.email})` : customer.email,
12653
- value: customer.id
12654
- };
12655
- });
12656
- }
12657
- });
12658
- return /* @__PURE__ */ jsxRuntime.jsx(
12659
- Form$2.Field,
12660
- {
12661
- name: "customer_id",
12662
- control,
12663
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
12664
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12665
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
12666
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
12667
- ] }),
12668
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12669
- Combobox,
12670
- {
12671
- options: customers.options,
12672
- fetchNextPage: customers.fetchNextPage,
12673
- isFetchingNextPage: customers.isFetchingNextPage,
12674
- searchValue: customers.searchValue,
12675
- onSearchValueChange: customers.onSearchValueChange,
12676
- placeholder: "Select customer",
12677
- ...field
12678
- }
12679
- ) }),
12680
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12681
- ] })
12682
- }
12683
- );
12684
- };
12685
- const Illustration = () => {
12686
- return /* @__PURE__ */ jsxRuntime.jsxs(
12687
- "svg",
12688
- {
12689
- width: "280",
12690
- height: "180",
12691
- viewBox: "0 0 280 180",
12692
- fill: "none",
12693
- xmlns: "http://www.w3.org/2000/svg",
11776
+ width: "280",
11777
+ height: "180",
11778
+ viewBox: "0 0 280 180",
11779
+ fill: "none",
11780
+ xmlns: "http://www.w3.org/2000/svg",
12694
11781
  children: [
12695
11782
  /* @__PURE__ */ jsxRuntime.jsx(
12696
11783
  "rect",
@@ -12968,69 +12055,982 @@ const Illustration = () => {
12968
12055
  strokeLinecap: "round",
12969
12056
  strokeLinejoin: "round"
12970
12057
  }
12971
- ) }),
12972
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12973
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12974
- "rect",
12058
+ ) }),
12059
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12060
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12061
+ "rect",
12062
+ {
12063
+ width: "12",
12064
+ height: "12",
12065
+ fill: "white",
12066
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12067
+ }
12068
+ ) }),
12069
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12070
+ "rect",
12071
+ {
12072
+ width: "12",
12073
+ height: "12",
12074
+ fill: "white",
12075
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12076
+ }
12077
+ ) }),
12078
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12079
+ "rect",
12080
+ {
12081
+ width: "12",
12082
+ height: "12",
12083
+ fill: "white",
12084
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12085
+ }
12086
+ ) }),
12087
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12088
+ "rect",
12089
+ {
12090
+ width: "12",
12091
+ height: "12",
12092
+ fill: "white",
12093
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12094
+ }
12095
+ ) }),
12096
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12097
+ "rect",
12098
+ {
12099
+ width: "12",
12100
+ height: "12",
12101
+ fill: "white",
12102
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12103
+ }
12104
+ ) }),
12105
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12106
+ "rect",
12107
+ {
12108
+ width: "12",
12109
+ height: "12",
12110
+ fill: "white",
12111
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12112
+ }
12113
+ ) })
12114
+ ] })
12115
+ ]
12116
+ }
12117
+ );
12118
+ };
12119
+ const schema$1 = objectType({
12120
+ customer_id: stringType().min(1)
12121
+ });
12122
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
12123
+ const Shipping = () => {
12124
+ var _a;
12125
+ const { id } = reactRouterDom.useParams();
12126
+ const { order, isPending, isError, error } = useOrder(id, {
12127
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12128
+ });
12129
+ const {
12130
+ order: preview,
12131
+ isPending: isPreviewPending,
12132
+ isError: isPreviewError,
12133
+ error: previewError
12134
+ } = useOrderPreview(id);
12135
+ useInitiateOrderEdit({ preview });
12136
+ const { onCancel } = useCancelOrderEdit({ preview });
12137
+ if (isError) {
12138
+ throw error;
12139
+ }
12140
+ if (isPreviewError) {
12141
+ throw previewError;
12142
+ }
12143
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12144
+ const isReady = preview && !isPreviewPending && order && !isPending;
12145
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12146
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12147
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12148
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12149
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
12150
+ ] }) }) }),
12151
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
12152
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12153
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12154
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12155
+ ] }) });
12156
+ };
12157
+ const ShippingForm = ({ preview, order }) => {
12158
+ var _a;
12159
+ const { setIsOpen } = useStackedModal();
12160
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
12161
+ const [data, setData] = React.useState(null);
12162
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12163
+ const { shipping_options } = useShippingOptions(
12164
+ {
12165
+ id: appliedShippingOptionIds,
12166
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12167
+ },
12168
+ {
12169
+ enabled: appliedShippingOptionIds.length > 0
12170
+ }
12171
+ );
12172
+ const uniqueShippingProfiles = React.useMemo(() => {
12173
+ const profiles = /* @__PURE__ */ new Map();
12174
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
12175
+ profiles.set(profile.id, profile);
12176
+ });
12177
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12178
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
12179
+ });
12180
+ return Array.from(profiles.values());
12181
+ }, [order.items, shipping_options]);
12182
+ const { handleSuccess } = useRouteModal();
12183
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12184
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12185
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12186
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12187
+ const onSubmit = async () => {
12188
+ setIsSubmitting(true);
12189
+ let requestSucceeded = false;
12190
+ await requestOrderEdit(void 0, {
12191
+ onError: (e) => {
12192
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
12193
+ },
12194
+ onSuccess: () => {
12195
+ requestSucceeded = true;
12196
+ }
12197
+ });
12198
+ if (!requestSucceeded) {
12199
+ setIsSubmitting(false);
12200
+ return;
12201
+ }
12202
+ await confirmOrderEdit(void 0, {
12203
+ onError: (e) => {
12204
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12205
+ },
12206
+ onSuccess: () => {
12207
+ handleSuccess();
12208
+ },
12209
+ onSettled: () => {
12210
+ setIsSubmitting(false);
12211
+ }
12212
+ });
12213
+ };
12214
+ const onKeydown = React.useCallback(
12215
+ (e) => {
12216
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12217
+ if (data || isSubmitting) {
12218
+ return;
12219
+ }
12220
+ onSubmit();
12221
+ }
12222
+ },
12223
+ [data, isSubmitting, onSubmit]
12224
+ );
12225
+ React.useEffect(() => {
12226
+ document.addEventListener("keydown", onKeydown);
12227
+ return () => {
12228
+ document.removeEventListener("keydown", onKeydown);
12229
+ };
12230
+ }, [onKeydown]);
12231
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12232
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12233
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12234
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12235
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12236
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12237
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
12238
+ ] }),
12239
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12240
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
12241
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
12242
+ /* @__PURE__ */ jsxRuntime.jsx(
12243
+ ui.Text,
12244
+ {
12245
+ size: "xsmall",
12246
+ weight: "plus",
12247
+ className: "text-ui-fg-muted",
12248
+ children: "Shipping profile"
12249
+ }
12250
+ ),
12251
+ /* @__PURE__ */ jsxRuntime.jsx(
12252
+ ui.Text,
12253
+ {
12254
+ size: "xsmall",
12255
+ weight: "plus",
12256
+ className: "text-ui-fg-muted",
12257
+ children: "Action"
12258
+ }
12259
+ )
12260
+ ] }),
12261
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12262
+ var _a2, _b, _c, _d, _e, _f, _g;
12263
+ const items = getItemsWithShippingProfile(
12264
+ profile.id,
12265
+ order.items
12266
+ );
12267
+ const hasItems = items.length > 0;
12268
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12269
+ (option) => option.shipping_profile_id === profile.id
12270
+ );
12271
+ const shippingMethod = preview.shipping_methods.find(
12272
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12273
+ );
12274
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
12275
+ (action) => action.action === "SHIPPING_ADD"
12276
+ );
12277
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12278
+ radixUi.Accordion.Item,
12279
+ {
12280
+ value: profile.id,
12281
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12282
+ children: [
12283
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
12284
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
12285
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
12286
+ ui.IconButton,
12287
+ {
12288
+ size: "2xsmall",
12289
+ variant: "transparent",
12290
+ className: "group/trigger",
12291
+ disabled: !hasItems,
12292
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
12293
+ }
12294
+ ) }),
12295
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12296
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
12297
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1", children: [
12298
+ /* @__PURE__ */ jsxRuntime.jsx(
12299
+ ui.Text,
12300
+ {
12301
+ size: "small",
12302
+ weight: "plus",
12303
+ leading: "compact",
12304
+ children: profile.name
12305
+ }
12306
+ ),
12307
+ /* @__PURE__ */ jsxRuntime.jsxs(
12308
+ ui.Text,
12309
+ {
12310
+ size: "small",
12311
+ leading: "compact",
12312
+ className: "text-ui-fg-subtle",
12313
+ children: [
12314
+ items.length,
12315
+ " ",
12316
+ pluralize(items.length, "items", "item")
12317
+ ]
12318
+ }
12319
+ )
12320
+ ] })
12321
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
12322
+ /* @__PURE__ */ jsxRuntime.jsx(
12323
+ ui.Tooltip,
12324
+ {
12325
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => {
12326
+ var _a3, _b2, _c2;
12327
+ return /* @__PURE__ */ jsxRuntime.jsx(
12328
+ "li",
12329
+ {
12330
+ children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
12331
+ },
12332
+ item.id
12333
+ );
12334
+ }) }),
12335
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12336
+ ui.Badge,
12337
+ {
12338
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12339
+ size: "xsmall",
12340
+ children: [
12341
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
12342
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
12343
+ items.reduce(
12344
+ (acc, item) => acc + item.quantity,
12345
+ 0
12346
+ ),
12347
+ "x",
12348
+ " ",
12349
+ pluralize(items.length, "items", "item")
12350
+ ] })
12351
+ ]
12352
+ }
12353
+ )
12354
+ }
12355
+ ),
12356
+ /* @__PURE__ */ jsxRuntime.jsx(
12357
+ ui.Tooltip,
12358
+ {
12359
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12360
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
12361
+ ui.Badge,
12362
+ {
12363
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12364
+ size: "xsmall",
12365
+ children: [
12366
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
12367
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
12368
+ ]
12369
+ }
12370
+ )
12371
+ }
12372
+ ),
12373
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
12374
+ ui.Badge,
12375
+ {
12376
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12377
+ size: "xsmall",
12378
+ children: [
12379
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
12380
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
12381
+ ]
12382
+ }
12383
+ ) })
12384
+ ] })
12385
+ ] }),
12386
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
12387
+ ActionMenu,
12388
+ {
12389
+ groups: [
12390
+ {
12391
+ actions: [
12392
+ hasItems ? {
12393
+ label: "Edit shipping option",
12394
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
12395
+ onClick: () => {
12396
+ setIsOpen(
12397
+ STACKED_FOCUS_MODAL_ID,
12398
+ true
12399
+ );
12400
+ setData({
12401
+ shippingProfileId: profile.id,
12402
+ shippingOption,
12403
+ shippingMethod
12404
+ });
12405
+ }
12406
+ } : void 0,
12407
+ {
12408
+ label: "Remove shipping option",
12409
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
12410
+ onClick: () => {
12411
+ if (shippingMethod) {
12412
+ if (addShippingMethodAction) {
12413
+ removeActionShippingMethod(
12414
+ addShippingMethodAction.id
12415
+ );
12416
+ } else {
12417
+ removeShippingMethod(
12418
+ shippingMethod.id
12419
+ );
12420
+ }
12421
+ }
12422
+ }
12423
+ }
12424
+ ].filter(Boolean)
12425
+ }
12426
+ ]
12427
+ }
12428
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
12429
+ StackedModalTrigger,
12430
+ {
12431
+ shippingProfileId: profile.id,
12432
+ shippingOption,
12433
+ shippingMethod,
12434
+ setData,
12435
+ children: "Add shipping option"
12436
+ }
12437
+ )
12438
+ ] }),
12439
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
12440
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12441
+ items.map((item, idx) => {
12442
+ var _a3, _b2, _c2, _d2, _e2;
12443
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12444
+ /* @__PURE__ */ jsxRuntime.jsxs(
12445
+ "div",
12446
+ {
12447
+ className: "px-3 flex items-center gap-x-3",
12448
+ children: [
12449
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
12450
+ ui.Divider,
12451
+ {
12452
+ variant: "dashed",
12453
+ orientation: "vertical"
12454
+ }
12455
+ ) }),
12456
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
12457
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
12458
+ ui.Text,
12459
+ {
12460
+ size: "small",
12461
+ leading: "compact",
12462
+ className: "text-ui-fg-subtle",
12463
+ children: [
12464
+ item.quantity,
12465
+ "x"
12466
+ ]
12467
+ }
12468
+ ) }),
12469
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
12470
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12471
+ /* @__PURE__ */ jsxRuntime.jsxs(
12472
+ ui.Text,
12473
+ {
12474
+ size: "small",
12475
+ leading: "compact",
12476
+ weight: "plus",
12477
+ children: [
12478
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12479
+ " (",
12480
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12481
+ ")"
12482
+ ]
12483
+ }
12484
+ ),
12485
+ /* @__PURE__ */ jsxRuntime.jsx(
12486
+ ui.Text,
12487
+ {
12488
+ size: "small",
12489
+ leading: "compact",
12490
+ className: "text-ui-fg-subtle",
12491
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12492
+ }
12493
+ )
12494
+ ] })
12495
+ ] })
12496
+ ]
12497
+ },
12498
+ item.id
12499
+ ),
12500
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
12501
+ ] }, item.id);
12502
+ })
12503
+ ] })
12504
+ ]
12505
+ },
12506
+ profile.id
12507
+ );
12508
+ }) })
12509
+ ] }) })
12510
+ ] }) }),
12511
+ /* @__PURE__ */ jsxRuntime.jsx(
12512
+ StackedFocusModal,
12513
+ {
12514
+ id: STACKED_FOCUS_MODAL_ID,
12515
+ onOpenChangeCallback: (open) => {
12516
+ if (!open) {
12517
+ setData(null);
12518
+ }
12519
+ return open;
12520
+ },
12521
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12522
+ }
12523
+ )
12524
+ ] }),
12525
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12526
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12527
+ /* @__PURE__ */ jsxRuntime.jsx(
12528
+ ui.Button,
12529
+ {
12530
+ size: "small",
12531
+ type: "button",
12532
+ isLoading: isSubmitting,
12533
+ onClick: onSubmit,
12534
+ children: "Save"
12535
+ }
12536
+ )
12537
+ ] }) })
12538
+ ] });
12539
+ };
12540
+ const StackedModalTrigger = ({
12541
+ shippingProfileId,
12542
+ shippingOption,
12543
+ shippingMethod,
12544
+ setData,
12545
+ children
12546
+ }) => {
12547
+ const { setIsOpen, getIsOpen } = useStackedModal();
12548
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12549
+ const onToggle = () => {
12550
+ if (isOpen) {
12551
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12552
+ setData(null);
12553
+ } else {
12554
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12555
+ setData({
12556
+ shippingProfileId,
12557
+ shippingOption,
12558
+ shippingMethod
12559
+ });
12560
+ }
12561
+ };
12562
+ return /* @__PURE__ */ jsxRuntime.jsx(
12563
+ ui.Button,
12564
+ {
12565
+ size: "small",
12566
+ variant: "secondary",
12567
+ onClick: onToggle,
12568
+ className: "text-ui-fg-primary shrink-0",
12569
+ children
12570
+ }
12571
+ );
12572
+ };
12573
+ const ShippingProfileForm = ({
12574
+ data,
12575
+ order,
12576
+ preview
12577
+ }) => {
12578
+ var _a, _b, _c, _d, _e, _f;
12579
+ const { setIsOpen } = useStackedModal();
12580
+ const form = reactHookForm.useForm({
12581
+ resolver: zod.zodResolver(shippingMethodSchema),
12582
+ defaultValues: {
12583
+ location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12584
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12585
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12586
+ }
12587
+ });
12588
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12589
+ const {
12590
+ mutateAsync: updateShippingMethod,
12591
+ isPending: isUpdatingShippingMethod
12592
+ } = useDraftOrderUpdateShippingMethod(order.id);
12593
+ const onSubmit = form.handleSubmit(async (values) => {
12594
+ if (lodash.isEqual(values, form.formState.defaultValues)) {
12595
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12596
+ return;
12597
+ }
12598
+ if (data.shippingMethod) {
12599
+ await updateShippingMethod(
12600
+ {
12601
+ method_id: data.shippingMethod.id,
12602
+ shipping_option_id: values.shipping_option_id,
12603
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12604
+ },
12605
+ {
12606
+ onError: (e) => {
12607
+ ui.toast.error(e.message);
12608
+ },
12609
+ onSuccess: () => {
12610
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12611
+ }
12612
+ }
12613
+ );
12614
+ return;
12615
+ }
12616
+ await addShippingMethod(
12617
+ {
12618
+ shipping_option_id: values.shipping_option_id,
12619
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12620
+ },
12621
+ {
12622
+ onError: (e) => {
12623
+ ui.toast.error(e.message);
12624
+ },
12625
+ onSuccess: () => {
12626
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12627
+ }
12628
+ }
12629
+ );
12630
+ });
12631
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12632
+ KeyboundForm,
12633
+ {
12634
+ className: "flex h-full flex-col overflow-hidden",
12635
+ onSubmit,
12636
+ children: [
12637
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12638
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12639
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12640
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12641
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12642
+ ] }),
12643
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12644
+ /* @__PURE__ */ jsxRuntime.jsx(
12645
+ LocationField,
12975
12646
  {
12976
- width: "12",
12977
- height: "12",
12978
- fill: "white",
12979
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12647
+ control: form.control,
12648
+ setValue: form.setValue
12980
12649
  }
12981
- ) }),
12982
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12983
- "rect",
12650
+ ),
12651
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12652
+ /* @__PURE__ */ jsxRuntime.jsx(
12653
+ ShippingOptionField,
12984
12654
  {
12985
- width: "12",
12986
- height: "12",
12987
- fill: "white",
12988
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12655
+ shippingProfileId: data.shippingProfileId,
12656
+ preview,
12657
+ control: form.control
12989
12658
  }
12990
- ) }),
12991
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12992
- "rect",
12659
+ ),
12660
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12661
+ /* @__PURE__ */ jsxRuntime.jsx(
12662
+ CustomAmountField,
12993
12663
  {
12994
- width: "12",
12995
- height: "12",
12996
- fill: "white",
12997
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12664
+ control: form.control,
12665
+ currencyCode: order.currency_code
12998
12666
  }
12999
- ) }),
13000
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13001
- "rect",
12667
+ ),
12668
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12669
+ /* @__PURE__ */ jsxRuntime.jsx(
12670
+ ItemsPreview,
13002
12671
  {
13003
- width: "12",
13004
- height: "12",
13005
- fill: "white",
13006
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12672
+ order,
12673
+ shippingProfileId: data.shippingProfileId
12674
+ }
12675
+ )
12676
+ ] }) }) }),
12677
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12678
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12679
+ /* @__PURE__ */ jsxRuntime.jsx(
12680
+ ui.Button,
12681
+ {
12682
+ size: "small",
12683
+ type: "submit",
12684
+ isLoading: isPending || isUpdatingShippingMethod,
12685
+ children: data.shippingMethod ? "Update" : "Add"
12686
+ }
12687
+ )
12688
+ ] }) })
12689
+ ]
12690
+ }
12691
+ ) }) });
12692
+ };
12693
+ const shippingMethodSchema = objectType({
12694
+ location_id: stringType(),
12695
+ shipping_option_id: stringType(),
12696
+ custom_amount: unionType([numberType(), stringType()]).optional()
12697
+ });
12698
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12699
+ const matches = order.items.filter(
12700
+ (item) => {
12701
+ var _a, _b, _c;
12702
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12703
+ }
12704
+ );
12705
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12706
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12707
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12708
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12709
+ ] }) }),
12710
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12711
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12712
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12713
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12714
+ ] }),
12715
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
12716
+ "div",
12717
+ {
12718
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12719
+ children: [
12720
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12721
+ /* @__PURE__ */ jsxRuntime.jsx(
12722
+ Thumbnail,
12723
+ {
12724
+ thumbnail: item.thumbnail,
12725
+ alt: item.product_title ?? void 0
12726
+ }
12727
+ ),
12728
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12729
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12730
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12731
+ /* @__PURE__ */ jsxRuntime.jsxs(
12732
+ ui.Text,
12733
+ {
12734
+ size: "small",
12735
+ leading: "compact",
12736
+ className: "text-ui-fg-subtle",
12737
+ children: [
12738
+ "(",
12739
+ item.variant_title,
12740
+ ")"
12741
+ ]
12742
+ }
12743
+ )
12744
+ ] }),
12745
+ /* @__PURE__ */ jsxRuntime.jsx(
12746
+ ui.Text,
12747
+ {
12748
+ size: "small",
12749
+ leading: "compact",
12750
+ className: "text-ui-fg-subtle",
12751
+ children: item.variant_sku
12752
+ }
12753
+ )
12754
+ ] })
12755
+ ] }),
12756
+ /* @__PURE__ */ jsxRuntime.jsxs(
12757
+ ui.Text,
12758
+ {
12759
+ size: "small",
12760
+ leading: "compact",
12761
+ className: "text-ui-fg-subtle",
12762
+ children: [
12763
+ item.quantity,
12764
+ "x"
12765
+ ]
12766
+ }
12767
+ )
12768
+ ]
12769
+ },
12770
+ item.id
12771
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12772
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12773
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12774
+ 'No items found for "',
12775
+ query,
12776
+ '".'
12777
+ ] })
12778
+ ] }) })
12779
+ ] })
12780
+ ] });
12781
+ };
12782
+ const LocationField = ({ control, setValue }) => {
12783
+ const locations = useComboboxData({
12784
+ queryKey: ["locations"],
12785
+ queryFn: async (params) => {
12786
+ return await sdk.admin.stockLocation.list(params);
12787
+ },
12788
+ getOptions: (data) => {
12789
+ return data.stock_locations.map((location) => ({
12790
+ label: location.name,
12791
+ value: location.id
12792
+ }));
12793
+ }
12794
+ });
12795
+ return /* @__PURE__ */ jsxRuntime.jsx(
12796
+ Form$2.Field,
12797
+ {
12798
+ control,
12799
+ name: "location_id",
12800
+ render: ({ field: { onChange, ...field } }) => {
12801
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12802
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12803
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12804
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12805
+ ] }),
12806
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12807
+ Combobox,
12808
+ {
12809
+ options: locations.options,
12810
+ fetchNextPage: locations.fetchNextPage,
12811
+ isFetchingNextPage: locations.isFetchingNextPage,
12812
+ searchValue: locations.searchValue,
12813
+ onSearchValueChange: locations.onSearchValueChange,
12814
+ placeholder: "Select location",
12815
+ onChange: (value) => {
12816
+ setValue("shipping_option_id", "", {
12817
+ shouldDirty: true,
12818
+ shouldTouch: true
12819
+ });
12820
+ onChange(value);
12821
+ },
12822
+ ...field
13007
12823
  }
13008
- ) }),
13009
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13010
- "rect",
12824
+ ) })
12825
+ ] }) });
12826
+ }
12827
+ }
12828
+ );
12829
+ };
12830
+ const ShippingOptionField = ({
12831
+ shippingProfileId,
12832
+ preview,
12833
+ control
12834
+ }) => {
12835
+ var _a;
12836
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12837
+ const shippingOptions = useComboboxData({
12838
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12839
+ queryFn: async (params) => {
12840
+ return await sdk.admin.shippingOption.list({
12841
+ ...params,
12842
+ stock_location_id: locationId,
12843
+ shipping_profile_id: shippingProfileId
12844
+ });
12845
+ },
12846
+ getOptions: (data) => {
12847
+ return data.shipping_options.map((option) => {
12848
+ var _a2;
12849
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12850
+ (r) => r.attribute === "is_return" && r.value === "true"
12851
+ )) {
12852
+ return void 0;
12853
+ }
12854
+ return {
12855
+ label: option.name,
12856
+ value: option.id
12857
+ };
12858
+ }).filter(Boolean);
12859
+ },
12860
+ enabled: !!locationId && !!shippingProfileId,
12861
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12862
+ });
12863
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12864
+ return /* @__PURE__ */ jsxRuntime.jsx(
12865
+ Form$2.Field,
12866
+ {
12867
+ control,
12868
+ name: "shipping_option_id",
12869
+ render: ({ field }) => {
12870
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12871
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12872
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12873
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12874
+ ] }),
12875
+ /* @__PURE__ */ jsxRuntime.jsx(
12876
+ ConditionalTooltip,
13011
12877
  {
13012
- width: "12",
13013
- height: "12",
13014
- fill: "white",
13015
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12878
+ content: tooltipContent,
12879
+ showTooltip: !locationId || !shippingProfileId,
12880
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12881
+ Combobox,
12882
+ {
12883
+ options: shippingOptions.options,
12884
+ fetchNextPage: shippingOptions.fetchNextPage,
12885
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12886
+ searchValue: shippingOptions.searchValue,
12887
+ onSearchValueChange: shippingOptions.onSearchValueChange,
12888
+ placeholder: "Select shipping option",
12889
+ ...field,
12890
+ disabled: !locationId || !shippingProfileId
12891
+ }
12892
+ ) }) })
13016
12893
  }
13017
- ) }),
13018
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13019
- "rect",
12894
+ )
12895
+ ] }) });
12896
+ }
12897
+ }
12898
+ );
12899
+ };
12900
+ const CustomAmountField = ({
12901
+ control,
12902
+ currencyCode
12903
+ }) => {
12904
+ return /* @__PURE__ */ jsxRuntime.jsx(
12905
+ Form$2.Field,
12906
+ {
12907
+ control,
12908
+ name: "custom_amount",
12909
+ render: ({ field: { onChange, ...field } }) => {
12910
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12911
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12912
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12913
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12914
+ ] }),
12915
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12916
+ ui.CurrencyInput,
13020
12917
  {
13021
- width: "12",
13022
- height: "12",
13023
- fill: "white",
13024
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12918
+ ...field,
12919
+ onValueChange: (value) => onChange(value),
12920
+ symbol: getNativeSymbol(currencyCode),
12921
+ code: currencyCode
13025
12922
  }
13026
12923
  ) })
13027
- ] })
12924
+ ] });
12925
+ }
12926
+ }
12927
+ );
12928
+ };
12929
+ const SalesChannel = () => {
12930
+ const { id } = reactRouterDom.useParams();
12931
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12932
+ id,
12933
+ {
12934
+ fields: "+sales_channel_id"
12935
+ },
12936
+ {
12937
+ enabled: !!id
12938
+ }
12939
+ );
12940
+ if (isError) {
12941
+ throw error;
12942
+ }
12943
+ const ISrEADY = !!draft_order && !isPending;
12944
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12945
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12946
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
12947
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12948
+ ] }),
12949
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
12950
+ ] });
12951
+ };
12952
+ const SalesChannelForm = ({ order }) => {
12953
+ const form = reactHookForm.useForm({
12954
+ defaultValues: {
12955
+ sales_channel_id: order.sales_channel_id || ""
12956
+ },
12957
+ resolver: zod.zodResolver(schema)
12958
+ });
12959
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12960
+ const { handleSuccess } = useRouteModal();
12961
+ const onSubmit = form.handleSubmit(async (data) => {
12962
+ await mutateAsync(
12963
+ {
12964
+ sales_channel_id: data.sales_channel_id
12965
+ },
12966
+ {
12967
+ onSuccess: () => {
12968
+ ui.toast.success("Sales channel updated");
12969
+ handleSuccess();
12970
+ },
12971
+ onError: (error) => {
12972
+ ui.toast.error(error.message);
12973
+ }
12974
+ }
12975
+ );
12976
+ });
12977
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12978
+ KeyboundForm,
12979
+ {
12980
+ className: "flex flex-1 flex-col overflow-hidden",
12981
+ onSubmit,
12982
+ children: [
12983
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
12984
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12985
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12986
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12987
+ ] }) })
13028
12988
  ]
13029
12989
  }
12990
+ ) });
12991
+ };
12992
+ const SalesChannelField = ({ control, order }) => {
12993
+ const salesChannels = useComboboxData({
12994
+ queryFn: async (params) => {
12995
+ return await sdk.admin.salesChannel.list(params);
12996
+ },
12997
+ queryKey: ["sales-channels"],
12998
+ getOptions: (data) => {
12999
+ return data.sales_channels.map((salesChannel) => ({
13000
+ label: salesChannel.name,
13001
+ value: salesChannel.id
13002
+ }));
13003
+ },
13004
+ defaultValue: order.sales_channel_id || void 0
13005
+ });
13006
+ return /* @__PURE__ */ jsxRuntime.jsx(
13007
+ Form$2.Field,
13008
+ {
13009
+ control,
13010
+ name: "sales_channel_id",
13011
+ render: ({ field }) => {
13012
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13013
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
13014
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13015
+ Combobox,
13016
+ {
13017
+ options: salesChannels.options,
13018
+ fetchNextPage: salesChannels.fetchNextPage,
13019
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
13020
+ searchValue: salesChannels.searchValue,
13021
+ onSearchValueChange: salesChannels.onSearchValueChange,
13022
+ placeholder: "Select sales channel",
13023
+ ...field
13024
+ }
13025
+ ) }),
13026
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13027
+ ] });
13028
+ }
13029
+ }
13030
13030
  );
13031
13031
  };
13032
13032
  const schema = objectType({
13033
- customer_id: stringType().min(1)
13033
+ sales_channel_id: stringType().min(1)
13034
13034
  });
13035
13035
  const widgetModule = { widgets: [] };
13036
13036
  const routeModule = {
@@ -13053,36 +13053,28 @@ const routeModule = {
13053
13053
  loader,
13054
13054
  children: [
13055
13055
  {
13056
- Component: CustomItems,
13057
- path: "/draft-orders/:id/custom-items"
13058
- },
13059
- {
13060
- Component: Metadata,
13061
- path: "/draft-orders/:id/metadata"
13056
+ Component: BillingAddress,
13057
+ path: "/draft-orders/:id/billing-address"
13062
13058
  },
13063
13059
  {
13064
- Component: Items,
13065
- path: "/draft-orders/:id/items"
13060
+ Component: CustomItems,
13061
+ path: "/draft-orders/:id/custom-items"
13066
13062
  },
13067
13063
  {
13068
13064
  Component: Email,
13069
13065
  path: "/draft-orders/:id/email"
13070
13066
  },
13071
13067
  {
13072
- Component: BillingAddress,
13073
- path: "/draft-orders/:id/billing-address"
13068
+ Component: Items,
13069
+ path: "/draft-orders/:id/items"
13074
13070
  },
13075
13071
  {
13076
13072
  Component: Promotions,
13077
13073
  path: "/draft-orders/:id/promotions"
13078
13074
  },
13079
13075
  {
13080
- Component: SalesChannel,
13081
- path: "/draft-orders/:id/sales-channel"
13082
- },
13083
- {
13084
- Component: Shipping,
13085
- path: "/draft-orders/:id/shipping"
13076
+ Component: Metadata,
13077
+ path: "/draft-orders/:id/metadata"
13086
13078
  },
13087
13079
  {
13088
13080
  Component: ShippingAddress,
@@ -13091,6 +13083,14 @@ const routeModule = {
13091
13083
  {
13092
13084
  Component: TransferOwnership,
13093
13085
  path: "/draft-orders/:id/transfer-ownership"
13086
+ },
13087
+ {
13088
+ Component: Shipping,
13089
+ path: "/draft-orders/:id/shipping"
13090
+ },
13091
+ {
13092
+ Component: SalesChannel,
13093
+ path: "/draft-orders/:id/sales-channel"
13094
13094
  }
13095
13095
  ]
13096
13096
  }