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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/.medusa/server/src/admin/index.js +1573 -1573
  2. package/.medusa/server/src/admin/index.mjs +1573 -1573
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -9560,10 +9560,75 @@ const ID = () => {
9560
9560
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9561
9561
  ] });
9562
9562
  };
9563
- const BillingAddress = () => {
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 = () => {
9564
9629
  const { id } = reactRouterDom.useParams();
9565
9630
  const { order, isPending, isError, error } = useOrder(id, {
9566
- fields: "+billing_address"
9631
+ fields: "metadata"
9567
9632
  });
9568
9633
  if (isError) {
9569
9634
  throw error;
@@ -9571,36 +9636,33 @@ const BillingAddress = () => {
9571
9636
  const isReady = !isPending && !!order;
9572
9637
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9573
9638
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
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" }) })
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." }) })
9576
9641
  ] }),
9577
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9642
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9578
9643
  ] });
9579
9644
  };
9580
- const BillingAddressForm = ({ order }) => {
9581
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
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);
9582
9651
  const form = reactHookForm.useForm({
9583
9652
  defaultValues: {
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) ?? ""
9653
+ metadata: getDefaultValues(metadata)
9594
9654
  },
9595
- resolver: zod.zodResolver(schema$5)
9655
+ resolver: zod.zodResolver(MetadataSchema)
9596
9656
  });
9597
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9598
- const { handleSuccess } = useRouteModal();
9599
- const onSubmit = form.handleSubmit(async (data) => {
9657
+ const handleSubmit = form.handleSubmit(async (data) => {
9658
+ const parsedData = parseValues(data);
9600
9659
  await mutateAsync(
9601
- { billing_address: data },
9660
+ {
9661
+ metadata: parsedData
9662
+ },
9602
9663
  {
9603
9664
  onSuccess: () => {
9665
+ ui.toast.success("Metadata updated");
9604
9666
  handleSuccess();
9605
9667
  },
9606
9668
  onError: (error) => {
@@ -9609,346 +9671,47 @@ const BillingAddressForm = ({ order }) => {
9609
9671
  }
9610
9672
  );
9611
9673
  });
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
+ }
9612
9695
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9613
9696
  KeyboundForm,
9614
9697
  {
9698
+ onSubmit: handleSubmit,
9615
9699
  className: "flex flex-1 flex-col overflow-hidden",
9616
- onSubmit,
9617
9700
  children: [
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
- ] })
9642
- }
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
- ] })
9654
- }
9655
- )
9656
- ] }),
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
- ] })
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 = "{ ... }";
9704
9712
  }
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" }) }),
9746
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9747
- ] }) })
9748
- ]
9749
- }
9750
- ) });
9751
- };
9752
- const schema$5 = addressSchema;
9753
- const Email = () => {
9754
- const { id } = reactRouterDom.useParams();
9755
- const { order, isPending, isError, error } = useOrder(id, {
9756
- fields: "+email"
9757
- });
9758
- if (isError) {
9759
- throw error;
9760
- }
9761
- const isReady = !isPending && !!order;
9762
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9763
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9764
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9765
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9766
- ] }),
9767
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9768
- ] });
9769
- };
9770
- const EmailForm = ({ order }) => {
9771
- const form = reactHookForm.useForm({
9772
- defaultValues: {
9773
- email: order.email ?? ""
9774
- },
9775
- resolver: zod.zodResolver(schema$4)
9776
- });
9777
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9778
- const { handleSuccess } = useRouteModal();
9779
- const onSubmit = form.handleSubmit(async (data) => {
9780
- await mutateAsync(
9781
- { email: data.email },
9782
- {
9783
- onSuccess: () => {
9784
- handleSuccess();
9785
- },
9786
- onError: (error) => {
9787
- ui.toast.error(error.message);
9788
- }
9789
- }
9790
- );
9791
- });
9792
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9793
- KeyboundForm,
9794
- {
9795
- className: "flex flex-1 flex-col overflow-hidden",
9796
- onSubmit,
9797
- children: [
9798
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9799
- Form$2.Field,
9800
- {
9801
- control: form.control,
9802
- name: "email",
9803
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9804
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9805
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9806
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9807
- ] })
9808
- }
9809
- ) }),
9810
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9811
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9812
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9813
- ] }) })
9814
- ]
9815
- }
9816
- ) });
9817
- };
9818
- const schema$4 = objectType({
9819
- email: stringType().email()
9820
- });
9821
- const InlineTip = React.forwardRef(
9822
- ({ variant = "tip", label, className, children, ...props }, ref) => {
9823
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9824
- return /* @__PURE__ */ jsxRuntime.jsxs(
9825
- "div",
9826
- {
9827
- ref,
9828
- className: ui.clx(
9829
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9830
- className
9831
- ),
9832
- ...props,
9833
- children: [
9834
- /* @__PURE__ */ jsxRuntime.jsx(
9835
- "div",
9836
- {
9837
- role: "presentation",
9838
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9839
- "bg-ui-tag-orange-icon": variant === "warning"
9840
- })
9841
- }
9842
- ),
9843
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
9844
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9845
- labelValue,
9846
- ":"
9847
- ] }),
9848
- " ",
9849
- children
9850
- ] })
9851
- ]
9852
- }
9853
- );
9854
- }
9855
- );
9856
- InlineTip.displayName = "InlineTip";
9857
- const MetadataFieldSchema = objectType({
9858
- key: stringType(),
9859
- disabled: booleanType().optional(),
9860
- value: anyType()
9861
- });
9862
- const MetadataSchema = objectType({
9863
- metadata: arrayType(MetadataFieldSchema)
9864
- });
9865
- const Metadata = () => {
9866
- const { id } = reactRouterDom.useParams();
9867
- const { order, isPending, isError, error } = useOrder(id, {
9868
- fields: "metadata"
9869
- });
9870
- if (isError) {
9871
- throw error;
9872
- }
9873
- const isReady = !isPending && !!order;
9874
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9875
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9876
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
9877
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9878
- ] }),
9879
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9880
- ] });
9881
- };
9882
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9883
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9884
- const MetadataForm = ({ orderId, metadata }) => {
9885
- const { handleSuccess } = useRouteModal();
9886
- const hasUneditableRows = getHasUneditableRows(metadata);
9887
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
9888
- const form = reactHookForm.useForm({
9889
- defaultValues: {
9890
- metadata: getDefaultValues(metadata)
9891
- },
9892
- resolver: zod.zodResolver(MetadataSchema)
9893
- });
9894
- const handleSubmit = form.handleSubmit(async (data) => {
9895
- const parsedData = parseValues(data);
9896
- await mutateAsync(
9897
- {
9898
- metadata: parsedData
9899
- },
9900
- {
9901
- onSuccess: () => {
9902
- ui.toast.success("Metadata updated");
9903
- handleSuccess();
9904
- },
9905
- onError: (error) => {
9906
- ui.toast.error(error.message);
9907
- }
9908
- }
9909
- );
9910
- });
9911
- const { fields, insert, remove } = reactHookForm.useFieldArray({
9912
- control: form.control,
9913
- name: "metadata"
9914
- });
9915
- function deleteRow(index) {
9916
- remove(index);
9917
- if (fields.length === 1) {
9918
- insert(0, {
9919
- key: "",
9920
- value: "",
9921
- disabled: false
9922
- });
9923
- }
9924
- }
9925
- function insertRow(index, position) {
9926
- insert(index + (position === "above" ? 0 : 1), {
9927
- key: "",
9928
- value: "",
9929
- disabled: false
9930
- });
9931
- }
9932
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9933
- KeyboundForm,
9934
- {
9935
- onSubmit: handleSubmit,
9936
- className: "flex flex-1 flex-col overflow-hidden",
9937
- children: [
9938
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
9939
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
9940
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
9941
- /* @__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" }) }),
9942
- /* @__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" }) })
9943
- ] }),
9944
- fields.map((field, index) => {
9945
- const isDisabled = field.disabled || false;
9946
- let placeholder = "-";
9947
- if (typeof field.value === "object") {
9948
- placeholder = "{ ... }";
9949
- }
9950
- if (Array.isArray(field.value)) {
9951
- placeholder = "[ ... ]";
9713
+ if (Array.isArray(field.value)) {
9714
+ placeholder = "[ ... ]";
9952
9715
  }
9953
9716
  return /* @__PURE__ */ jsxRuntime.jsx(
9954
9717
  ConditionalTooltip,
@@ -11142,32 +10905,269 @@ const customItemSchema = objectType({
11142
10905
  quantity: numberType(),
11143
10906
  unit_price: unionType([numberType(), stringType()])
11144
10907
  });
11145
- const CustomItems = () => {
10908
+ const Email = () => {
10909
+ const { id } = reactRouterDom.useParams();
10910
+ const { order, isPending, isError, error } = useOrder(id, {
10911
+ fields: "+email"
10912
+ });
10913
+ if (isError) {
10914
+ throw error;
10915
+ }
10916
+ const isReady = !isPending && !!order;
11146
10917
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11147
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
11148
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
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 })
11149
10923
  ] });
11150
10924
  };
11151
- const CustomItemsForm = () => {
10925
+ const EmailForm = ({ order }) => {
11152
10926
  const form = reactHookForm.useForm({
11153
- resolver: zod.zodResolver(schema$3)
10927
+ defaultValues: {
10928
+ email: order.email ?? ""
10929
+ },
10930
+ resolver: zod.zodResolver(schema$4)
11154
10931
  });
11155
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
11156
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
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", children: "Save" })
11160
- ] }) })
11161
- ] }) });
11162
- };
11163
- const schema$3 = objectType({
11164
- email: stringType().email()
11165
- });
11166
- const PROMOTION_QUERY_KEY = "promotions";
11167
- const promotionsQueryKeys = {
11168
- list: (query2) => [
11169
- PROMOTION_QUERY_KEY,
11170
- query2 ? query2 : void 0
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 },
10937
+ {
10938
+ onSuccess: () => {
10939
+ handleSuccess();
10940
+ },
10941
+ onError: (error) => {
10942
+ ui.toast.error(error.message);
10943
+ }
10944
+ }
10945
+ );
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
+ ]
10970
+ }
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
11171
  ],
11172
11172
  detail: (id, query2) => [
11173
11173
  PROMOTION_QUERY_KEY,
@@ -11546,842 +11546,163 @@ const SalesChannelField = ({ control, order }) => {
11546
11546
  const schema$2 = objectType({
11547
11547
  sales_channel_id: stringType().min(1)
11548
11548
  });
11549
- const ShippingAddress = () => {
11549
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11550
+ const Shipping = () => {
11551
+ var _a;
11550
11552
  const { id } = reactRouterDom.useParams();
11551
11553
  const { order, isPending, isError, error } = useOrder(id, {
11552
- fields: "+shipping_address"
11554
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11553
11555
  });
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 });
11554
11564
  if (isError) {
11555
11565
  throw error;
11556
11566
  }
11557
- const isReady = !isPending && !!order;
11558
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11559
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11560
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11561
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11562
- ] }),
11563
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11564
- ] });
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
+ ] }) });
11565
11583
  };
11566
- const ShippingAddressForm = ({ order }) => {
11567
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11568
- const form = reactHookForm.useForm({
11569
- defaultValues: {
11570
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11571
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11572
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11573
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11574
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11575
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11576
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11577
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11578
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11579
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
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.*"
11580
11594
  },
11581
- resolver: zod.zodResolver(schema$1)
11582
- });
11583
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
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]);
11584
11609
  const { handleSuccess } = useRouteModal();
11585
- const onSubmit = form.handleSubmit(async (data) => {
11586
- await mutateAsync(
11587
- {
11588
- shipping_address: {
11589
- first_name: data.first_name,
11590
- last_name: data.last_name,
11591
- company: data.company,
11592
- address_1: data.address_1,
11593
- address_2: data.address_2,
11594
- city: data.city,
11595
- province: data.province,
11596
- country_code: data.country_code,
11597
- postal_code: data.postal_code,
11598
- phone: data.phone
11599
- }
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}`);
11600
11620
  },
11601
- {
11602
- onSuccess: () => {
11603
- handleSuccess();
11604
- },
11605
- onError: (error) => {
11606
- ui.toast.error(error.message);
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();
11635
+ },
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;
11607
11646
  }
11647
+ onSubmit();
11608
11648
  }
11609
- );
11610
- });
11611
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11612
- KeyboundForm,
11613
- {
11614
- className: "flex flex-1 flex-col overflow-hidden",
11615
- onSubmit,
11616
- children: [
11617
- /* @__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: [
11618
- /* @__PURE__ */ jsxRuntime.jsx(
11619
- Form$2.Field,
11620
- {
11621
- control: form.control,
11622
- name: "country_code",
11623
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11624
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11625
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11626
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11627
- ] })
11628
- }
11629
- ),
11630
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
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: [
11631
11669
  /* @__PURE__ */ jsxRuntime.jsx(
11632
- Form$2.Field,
11670
+ ui.Text,
11633
11671
  {
11634
- control: form.control,
11635
- name: "first_name",
11636
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11637
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11638
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11639
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11640
- ] })
11672
+ size: "xsmall",
11673
+ weight: "plus",
11674
+ className: "text-ui-fg-muted",
11675
+ children: "Shipping profile"
11641
11676
  }
11642
11677
  ),
11643
11678
  /* @__PURE__ */ jsxRuntime.jsx(
11644
- Form$2.Field,
11679
+ ui.Text,
11645
11680
  {
11646
- control: form.control,
11647
- name: "last_name",
11648
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11649
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11650
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11651
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11652
- ] })
11681
+ size: "xsmall",
11682
+ weight: "plus",
11683
+ className: "text-ui-fg-muted",
11684
+ children: "Action"
11653
11685
  }
11654
11686
  )
11655
11687
  ] }),
11656
- /* @__PURE__ */ jsxRuntime.jsx(
11657
- Form$2.Field,
11658
- {
11659
- control: form.control,
11660
- name: "company",
11661
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11662
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11663
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11664
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11665
- ] })
11666
- }
11667
- ),
11668
- /* @__PURE__ */ jsxRuntime.jsx(
11669
- Form$2.Field,
11670
- {
11671
- control: form.control,
11672
- name: "address_1",
11673
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11674
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11675
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11676
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11677
- ] })
11678
- }
11679
- ),
11680
- /* @__PURE__ */ jsxRuntime.jsx(
11681
- Form$2.Field,
11682
- {
11683
- control: form.control,
11684
- name: "address_2",
11685
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11686
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11687
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11688
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11689
- ] })
11690
- }
11691
- ),
11692
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11693
- /* @__PURE__ */ jsxRuntime.jsx(
11694
- Form$2.Field,
11695
- {
11696
- control: form.control,
11697
- name: "postal_code",
11698
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11699
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11700
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11701
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11702
- ] })
11703
- }
11704
- ),
11705
- /* @__PURE__ */ jsxRuntime.jsx(
11706
- Form$2.Field,
11707
- {
11708
- control: form.control,
11709
- name: "city",
11710
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11711
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11712
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11713
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11714
- ] })
11715
- }
11716
- )
11717
- ] }),
11718
- /* @__PURE__ */ jsxRuntime.jsx(
11719
- Form$2.Field,
11720
- {
11721
- control: form.control,
11722
- name: "province",
11723
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11724
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11725
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11726
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11727
- ] })
11728
- }
11729
- ),
11730
- /* @__PURE__ */ jsxRuntime.jsx(
11731
- Form$2.Field,
11732
- {
11733
- control: form.control,
11734
- name: "phone",
11735
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11736
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11737
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11738
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11739
- ] })
11740
- }
11741
- )
11742
- ] }) }),
11743
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11744
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11745
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11746
- ] }) })
11747
- ]
11748
- }
11749
- ) });
11750
- };
11751
- const schema$1 = addressSchema;
11752
- const TransferOwnership = () => {
11753
- const { id } = reactRouterDom.useParams();
11754
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
11755
- fields: "id,customer_id,customer.*"
11756
- });
11757
- if (isError) {
11758
- throw error;
11759
- }
11760
- const isReady = !isPending && !!draft_order;
11761
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11762
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11763
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
11764
- /* @__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" }) })
11765
- ] }),
11766
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
11767
- ] });
11768
- };
11769
- const TransferOwnershipForm = ({ order }) => {
11770
- var _a, _b;
11771
- const form = reactHookForm.useForm({
11772
- defaultValues: {
11773
- customer_id: order.customer_id || ""
11774
- },
11775
- resolver: zod.zodResolver(schema)
11776
- });
11777
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11778
- const { handleSuccess } = useRouteModal();
11779
- const name = [(_a = order.customer) == null ? void 0 : _a.first_name, (_b = order.customer) == null ? void 0 : _b.last_name].filter(Boolean).join(" ");
11780
- const currentCustomer = order.customer ? {
11781
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
11782
- value: order.customer.id
11783
- } : null;
11784
- const onSubmit = form.handleSubmit(async (data) => {
11785
- await mutateAsync(
11786
- { customer_id: data.customer_id },
11787
- {
11788
- onSuccess: () => {
11789
- ui.toast.success("Customer updated");
11790
- handleSuccess();
11791
- },
11792
- onError: (error) => {
11793
- ui.toast.error(error.message);
11794
- }
11795
- }
11796
- );
11797
- });
11798
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11799
- KeyboundForm,
11800
- {
11801
- className: "flex flex-1 flex-col overflow-hidden",
11802
- onSubmit,
11803
- children: [
11804
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
11805
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
11806
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
11807
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11808
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
11809
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
11810
- ] }),
11811
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
11812
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
11813
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
11814
- ] })
11815
- ] }),
11816
- /* @__PURE__ */ jsxRuntime.jsx(
11817
- CustomerField,
11818
- {
11819
- control: form.control,
11820
- currentCustomerId: order.customer_id
11821
- }
11822
- )
11823
- ] }),
11824
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11825
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
11826
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11827
- ] }) })
11828
- ]
11829
- }
11830
- ) });
11831
- };
11832
- const CustomerField = ({ control, currentCustomerId }) => {
11833
- const customers = useComboboxData({
11834
- queryFn: async (params) => {
11835
- return await sdk.admin.customer.list({
11836
- ...params,
11837
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
11838
- });
11839
- },
11840
- queryKey: ["customers"],
11841
- getOptions: (data) => {
11842
- return data.customers.map((customer) => {
11843
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
11844
- return {
11845
- label: name ? `${name} (${customer.email})` : customer.email,
11846
- value: customer.id
11847
- };
11848
- });
11849
- }
11850
- });
11851
- return /* @__PURE__ */ jsxRuntime.jsx(
11852
- Form$2.Field,
11853
- {
11854
- name: "customer_id",
11855
- control,
11856
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
11857
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11858
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
11859
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
11860
- ] }),
11861
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11862
- Combobox,
11863
- {
11864
- options: customers.options,
11865
- fetchNextPage: customers.fetchNextPage,
11866
- isFetchingNextPage: customers.isFetchingNextPage,
11867
- searchValue: customers.searchValue,
11868
- onSearchValueChange: customers.onSearchValueChange,
11869
- placeholder: "Select customer",
11870
- ...field
11871
- }
11872
- ) }),
11873
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11874
- ] })
11875
- }
11876
- );
11877
- };
11878
- const Illustration = () => {
11879
- return /* @__PURE__ */ jsxRuntime.jsxs(
11880
- "svg",
11881
- {
11882
- width: "280",
11883
- height: "180",
11884
- viewBox: "0 0 280 180",
11885
- fill: "none",
11886
- xmlns: "http://www.w3.org/2000/svg",
11887
- children: [
11888
- /* @__PURE__ */ jsxRuntime.jsx(
11889
- "rect",
11890
- {
11891
- x: "0.00428286",
11892
- y: "-0.742904",
11893
- width: "33.5",
11894
- height: "65.5",
11895
- rx: "6.75",
11896
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
11897
- fill: "#D4D4D8",
11898
- stroke: "#52525B",
11899
- strokeWidth: "1.5"
11900
- }
11901
- ),
11902
- /* @__PURE__ */ jsxRuntime.jsx(
11903
- "rect",
11904
- {
11905
- x: "0.00428286",
11906
- y: "-0.742904",
11907
- width: "33.5",
11908
- height: "65.5",
11909
- rx: "6.75",
11910
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
11911
- fill: "white",
11912
- stroke: "#52525B",
11913
- strokeWidth: "1.5"
11914
- }
11915
- ),
11916
- /* @__PURE__ */ jsxRuntime.jsx(
11917
- "path",
11918
- {
11919
- d: "M180.579 107.142L179.126 107.959",
11920
- stroke: "#52525B",
11921
- strokeWidth: "1.5",
11922
- strokeLinecap: "round",
11923
- strokeLinejoin: "round"
11924
- }
11925
- ),
11926
- /* @__PURE__ */ jsxRuntime.jsx(
11927
- "path",
11928
- {
11929
- opacity: "0.88",
11930
- d: "M182.305 109.546L180.257 109.534",
11931
- stroke: "#52525B",
11932
- strokeWidth: "1.5",
11933
- strokeLinecap: "round",
11934
- strokeLinejoin: "round"
11935
- }
11936
- ),
11937
- /* @__PURE__ */ jsxRuntime.jsx(
11938
- "path",
11939
- {
11940
- opacity: "0.75",
11941
- d: "M180.551 111.93L179.108 111.096",
11942
- stroke: "#52525B",
11943
- strokeWidth: "1.5",
11944
- strokeLinecap: "round",
11945
- strokeLinejoin: "round"
11946
- }
11947
- ),
11948
- /* @__PURE__ */ jsxRuntime.jsx(
11949
- "path",
11950
- {
11951
- opacity: "0.63",
11952
- d: "M176.347 112.897L176.354 111.73",
11953
- stroke: "#52525B",
11954
- strokeWidth: "1.5",
11955
- strokeLinecap: "round",
11956
- strokeLinejoin: "round"
11957
- }
11958
- ),
11959
- /* @__PURE__ */ jsxRuntime.jsx(
11960
- "path",
11961
- {
11962
- opacity: "0.5",
11963
- d: "M172.153 111.881L173.606 111.064",
11964
- stroke: "#52525B",
11965
- strokeWidth: "1.5",
11966
- strokeLinecap: "round",
11967
- strokeLinejoin: "round"
11968
- }
11969
- ),
11970
- /* @__PURE__ */ jsxRuntime.jsx(
11971
- "path",
11972
- {
11973
- opacity: "0.38",
11974
- d: "M170.428 109.478L172.476 109.489",
11975
- stroke: "#52525B",
11976
- strokeWidth: "1.5",
11977
- strokeLinecap: "round",
11978
- strokeLinejoin: "round"
11979
- }
11980
- ),
11981
- /* @__PURE__ */ jsxRuntime.jsx(
11982
- "path",
11983
- {
11984
- opacity: "0.25",
11985
- d: "M172.181 107.094L173.624 107.928",
11986
- stroke: "#52525B",
11987
- strokeWidth: "1.5",
11988
- strokeLinecap: "round",
11989
- strokeLinejoin: "round"
11990
- }
11991
- ),
11992
- /* @__PURE__ */ jsxRuntime.jsx(
11993
- "path",
11994
- {
11995
- opacity: "0.13",
11996
- d: "M176.386 106.126L176.379 107.294",
11997
- stroke: "#52525B",
11998
- strokeWidth: "1.5",
11999
- strokeLinecap: "round",
12000
- strokeLinejoin: "round"
12001
- }
12002
- ),
12003
- /* @__PURE__ */ jsxRuntime.jsx(
12004
- "rect",
12005
- {
12006
- width: "12",
12007
- height: "3",
12008
- rx: "1.5",
12009
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12010
- fill: "#D4D4D8"
12011
- }
12012
- ),
12013
- /* @__PURE__ */ jsxRuntime.jsx(
12014
- "rect",
12015
- {
12016
- x: "0.00428286",
12017
- y: "-0.742904",
12018
- width: "33.5",
12019
- height: "65.5",
12020
- rx: "6.75",
12021
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12022
- fill: "#D4D4D8",
12023
- stroke: "#52525B",
12024
- strokeWidth: "1.5"
12025
- }
12026
- ),
12027
- /* @__PURE__ */ jsxRuntime.jsx(
12028
- "rect",
12029
- {
12030
- x: "0.00428286",
12031
- y: "-0.742904",
12032
- width: "33.5",
12033
- height: "65.5",
12034
- rx: "6.75",
12035
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12036
- fill: "white",
12037
- stroke: "#52525B",
12038
- strokeWidth: "1.5"
12039
- }
12040
- ),
12041
- /* @__PURE__ */ jsxRuntime.jsx(
12042
- "rect",
12043
- {
12044
- width: "12",
12045
- height: "3",
12046
- rx: "1.5",
12047
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12048
- fill: "#D4D4D8"
12049
- }
12050
- ),
12051
- /* @__PURE__ */ jsxRuntime.jsx(
12052
- "rect",
12053
- {
12054
- width: "17",
12055
- height: "3",
12056
- rx: "1.5",
12057
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12058
- fill: "#D4D4D8"
12059
- }
12060
- ),
12061
- /* @__PURE__ */ jsxRuntime.jsx(
12062
- "rect",
12063
- {
12064
- width: "12",
12065
- height: "3",
12066
- rx: "1.5",
12067
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12068
- fill: "#D4D4D8"
12069
- }
12070
- ),
12071
- /* @__PURE__ */ jsxRuntime.jsx(
12072
- "path",
12073
- {
12074
- d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12075
- fill: "#A1A1AA"
12076
- }
12077
- ),
12078
- /* @__PURE__ */ jsxRuntime.jsx(
12079
- "rect",
12080
- {
12081
- width: "17",
12082
- height: "3",
12083
- rx: "1.5",
12084
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12085
- fill: "#A1A1AA"
12086
- }
12087
- ),
12088
- /* @__PURE__ */ jsxRuntime.jsx(
12089
- "rect",
12090
- {
12091
- width: "12",
12092
- height: "3",
12093
- rx: "1.5",
12094
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12095
- fill: "#A1A1AA"
12096
- }
12097
- ),
12098
- /* @__PURE__ */ jsxRuntime.jsx(
12099
- "path",
12100
- {
12101
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12102
- fill: "#52525B"
12103
- }
12104
- ),
12105
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12106
- "path",
12107
- {
12108
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12109
- stroke: "#A1A1AA",
12110
- strokeWidth: "1.5",
12111
- strokeLinecap: "round",
12112
- strokeLinejoin: "round"
12113
- }
12114
- ) }),
12115
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12116
- "path",
12117
- {
12118
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12119
- stroke: "#A1A1AA",
12120
- strokeWidth: "1.5",
12121
- strokeLinecap: "round",
12122
- strokeLinejoin: "round"
12123
- }
12124
- ) }),
12125
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12126
- "path",
12127
- {
12128
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12129
- stroke: "#A1A1AA",
12130
- strokeWidth: "1.5",
12131
- strokeLinecap: "round",
12132
- strokeLinejoin: "round"
12133
- }
12134
- ) }),
12135
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12136
- "path",
12137
- {
12138
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12139
- stroke: "#A1A1AA",
12140
- strokeWidth: "1.5",
12141
- strokeLinecap: "round",
12142
- strokeLinejoin: "round"
12143
- }
12144
- ) }),
12145
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12146
- "path",
12147
- {
12148
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12149
- stroke: "#A1A1AA",
12150
- strokeWidth: "1.5",
12151
- strokeLinecap: "round",
12152
- strokeLinejoin: "round"
12153
- }
12154
- ) }),
12155
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12156
- "path",
12157
- {
12158
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12159
- stroke: "#A1A1AA",
12160
- strokeWidth: "1.5",
12161
- strokeLinecap: "round",
12162
- strokeLinejoin: "round"
12163
- }
12164
- ) }),
12165
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12166
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12167
- "rect",
12168
- {
12169
- width: "12",
12170
- height: "12",
12171
- fill: "white",
12172
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12173
- }
12174
- ) }),
12175
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12176
- "rect",
12177
- {
12178
- width: "12",
12179
- height: "12",
12180
- fill: "white",
12181
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12182
- }
12183
- ) }),
12184
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12185
- "rect",
12186
- {
12187
- width: "12",
12188
- height: "12",
12189
- fill: "white",
12190
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12191
- }
12192
- ) }),
12193
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12194
- "rect",
12195
- {
12196
- width: "12",
12197
- height: "12",
12198
- fill: "white",
12199
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12200
- }
12201
- ) }),
12202
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12203
- "rect",
12204
- {
12205
- width: "12",
12206
- height: "12",
12207
- fill: "white",
12208
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12209
- }
12210
- ) }),
12211
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12212
- "rect",
12213
- {
12214
- width: "12",
12215
- height: "12",
12216
- fill: "white",
12217
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12218
- }
12219
- ) })
12220
- ] })
12221
- ]
12222
- }
12223
- );
12224
- };
12225
- const schema = objectType({
12226
- customer_id: stringType().min(1)
12227
- });
12228
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
12229
- const Shipping = () => {
12230
- var _a;
12231
- const { id } = reactRouterDom.useParams();
12232
- const { order, isPending, isError, error } = useOrder(id, {
12233
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12234
- });
12235
- const {
12236
- order: preview,
12237
- isPending: isPreviewPending,
12238
- isError: isPreviewError,
12239
- error: previewError
12240
- } = useOrderPreview(id);
12241
- useInitiateOrderEdit({ preview });
12242
- const { onCancel } = useCancelOrderEdit({ preview });
12243
- if (isError) {
12244
- throw error;
12245
- }
12246
- if (isPreviewError) {
12247
- throw previewError;
12248
- }
12249
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12250
- const isReady = preview && !isPreviewPending && order && !isPending;
12251
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12252
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12253
- /* @__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: [
12254
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12255
- /* @__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." }) })
12256
- ] }) }) }),
12257
- /* @__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" }) }) })
12258
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12259
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12260
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12261
- ] }) });
12262
- };
12263
- const ShippingForm = ({ preview, order }) => {
12264
- var _a;
12265
- const { setIsOpen } = useStackedModal();
12266
- const [isSubmitting, setIsSubmitting] = React.useState(false);
12267
- const [data, setData] = React.useState(null);
12268
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12269
- const { shipping_options } = useShippingOptions(
12270
- {
12271
- id: appliedShippingOptionIds,
12272
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12273
- },
12274
- {
12275
- enabled: appliedShippingOptionIds.length > 0
12276
- }
12277
- );
12278
- const uniqueShippingProfiles = React.useMemo(() => {
12279
- const profiles = /* @__PURE__ */ new Map();
12280
- getUniqueShippingProfiles(order.items).forEach((profile) => {
12281
- profiles.set(profile.id, profile);
12282
- });
12283
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12284
- profiles.set(option.shipping_profile_id, option.shipping_profile);
12285
- });
12286
- return Array.from(profiles.values());
12287
- }, [order.items, shipping_options]);
12288
- const { handleSuccess } = useRouteModal();
12289
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12290
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12291
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12292
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12293
- const onSubmit = async () => {
12294
- setIsSubmitting(true);
12295
- let requestSucceeded = false;
12296
- await requestOrderEdit(void 0, {
12297
- onError: (e) => {
12298
- ui.toast.error(`Failed to request order edit: ${e.message}`);
12299
- },
12300
- onSuccess: () => {
12301
- requestSucceeded = true;
12302
- }
12303
- });
12304
- if (!requestSucceeded) {
12305
- setIsSubmitting(false);
12306
- return;
12307
- }
12308
- await confirmOrderEdit(void 0, {
12309
- onError: (e) => {
12310
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12311
- },
12312
- onSuccess: () => {
12313
- handleSuccess();
12314
- },
12315
- onSettled: () => {
12316
- setIsSubmitting(false);
12317
- }
12318
- });
12319
- };
12320
- const onKeydown = React.useCallback(
12321
- (e) => {
12322
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12323
- if (data || isSubmitting) {
12324
- return;
12325
- }
12326
- onSubmit();
12327
- }
12328
- },
12329
- [data, isSubmitting, onSubmit]
12330
- );
12331
- React.useEffect(() => {
12332
- document.addEventListener("keydown", onKeydown);
12333
- return () => {
12334
- document.removeEventListener("keydown", onKeydown);
12335
- };
12336
- }, [onKeydown]);
12337
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12338
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12339
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12340
- /* @__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: [
12341
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12342
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12343
- /* @__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." }) })
12344
- ] }),
12345
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12346
- /* @__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: [
12347
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
12348
- /* @__PURE__ */ jsxRuntime.jsx(
12349
- ui.Text,
12350
- {
12351
- size: "xsmall",
12352
- weight: "plus",
12353
- className: "text-ui-fg-muted",
12354
- children: "Shipping profile"
12355
- }
12356
- ),
12357
- /* @__PURE__ */ jsxRuntime.jsx(
12358
- ui.Text,
12359
- {
12360
- size: "xsmall",
12361
- weight: "plus",
12362
- className: "text-ui-fg-muted",
12363
- children: "Action"
12364
- }
12365
- )
12366
- ] }),
12367
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12368
- var _a2, _b, _c, _d, _e, _f, _g;
12369
- const items = getItemsWithShippingProfile(
12370
- profile.id,
12371
- order.items
12372
- );
12373
- const hasItems = items.length > 0;
12374
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12375
- (option) => option.shipping_profile_id === profile.id
12376
- );
12377
- const shippingMethod = preview.shipping_methods.find(
12378
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12379
- );
12380
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
12381
- (action) => action.action === "SHIPPING_ADD"
12382
- );
12383
- return /* @__PURE__ */ jsxRuntime.jsxs(
12384
- radixUi.Accordion.Item,
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,
12385
11706
  {
12386
11707
  value: profile.id,
12387
11708
  className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
@@ -12613,425 +11934,1104 @@ const ShippingForm = ({ preview, order }) => {
12613
11934
  );
12614
11935
  }) })
12615
11936
  ] }) })
12616
- ] }) }),
12617
- /* @__PURE__ */ jsxRuntime.jsx(
12618
- StackedFocusModal,
11937
+ ] }) }),
11938
+ /* @__PURE__ */ jsxRuntime.jsx(
11939
+ StackedFocusModal,
11940
+ {
11941
+ id: STACKED_FOCUS_MODAL_ID,
11942
+ onOpenChangeCallback: (open) => {
11943
+ if (!open) {
11944
+ setData(null);
11945
+ }
11946
+ return open;
11947
+ },
11948
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
11949
+ }
11950
+ )
11951
+ ] }),
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
+ ] }) })
11965
+ ] });
11966
+ };
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();
12007
+ const form = reactHookForm.useForm({
12008
+ resolver: zod.zodResolver(shippingMethodSchema),
12009
+ 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
+ }
12014
+ });
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
+ },
12048
+ {
12049
+ onError: (e) => {
12050
+ ui.toast.error(e.message);
12051
+ },
12052
+ onSuccess: () => {
12053
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12054
+ }
12055
+ }
12056
+ );
12057
+ });
12058
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12059
+ KeyboundForm,
12060
+ {
12061
+ className: "flex h-full flex-col overflow-hidden",
12062
+ onSubmit,
12063
+ 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." }) })
12069
+ ] }),
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
+ /* @__PURE__ */ jsxRuntime.jsx(
12089
+ CustomAmountField,
12090
+ {
12091
+ 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"
12113
+ }
12114
+ )
12115
+ ] }) })
12116
+ ]
12117
+ }
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",
12619
12144
  {
12620
- id: STACKED_FOCUS_MODAL_ID,
12621
- onOpenChangeCallback: (open) => {
12622
- if (!open) {
12623
- setData(null);
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
+ ] });
12208
+ };
12209
+ const LocationField = ({ control, setValue }) => {
12210
+ const locations = useComboboxData({
12211
+ queryKey: ["locations"],
12212
+ queryFn: async (params) => {
12213
+ return await sdk.admin.stockLocation.list(params);
12214
+ },
12215
+ getOptions: (data) => {
12216
+ return data.stock_locations.map((location) => ({
12217
+ label: location.name,
12218
+ value: location.id
12219
+ }));
12220
+ }
12221
+ });
12222
+ return /* @__PURE__ */ jsxRuntime.jsx(
12223
+ Form$2.Field,
12224
+ {
12225
+ 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
12624
12349
  }
12625
- return open;
12626
- },
12627
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
12628
- }
12629
- )
12350
+ ) })
12351
+ ] });
12352
+ }
12353
+ }
12354
+ );
12355
+ };
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" }) })
12630
12369
  ] }),
12631
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12632
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12633
- /* @__PURE__ */ jsxRuntime.jsx(
12634
- ui.Button,
12635
- {
12636
- size: "small",
12637
- type: "button",
12638
- isLoading: isSubmitting,
12639
- onClick: onSubmit,
12640
- children: "Save"
12641
- }
12642
- )
12643
- ] }) })
12370
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12644
12371
  ] });
12645
12372
  };
12646
- const StackedModalTrigger = ({
12647
- shippingProfileId,
12648
- shippingOption,
12649
- shippingMethod,
12650
- setData,
12651
- children
12652
- }) => {
12653
- const { setIsOpen, getIsOpen } = useStackedModal();
12654
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12655
- const onToggle = () => {
12656
- if (isOpen) {
12657
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12658
- setData(null);
12659
- } else {
12660
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12661
- setData({
12662
- shippingProfileId,
12663
- shippingOption,
12664
- shippingMethod
12665
- });
12666
- }
12667
- };
12668
- return /* @__PURE__ */ jsxRuntime.jsx(
12669
- ui.Button,
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,
12670
12420
  {
12671
- size: "small",
12672
- variant: "secondary",
12673
- onClick: onToggle,
12674
- className: "text-ui-fg-primary shrink-0",
12675
- children
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
+ ]
12676
12555
  }
12677
- );
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
+ ] });
12678
12575
  };
12679
- const ShippingProfileForm = ({
12680
- data,
12681
- order,
12682
- preview
12683
- }) => {
12684
- var _a, _b, _c, _d, _e, _f;
12685
- const { setIsOpen } = useStackedModal();
12576
+ const TransferOwnershipForm = ({ order }) => {
12577
+ var _a, _b;
12686
12578
  const form = reactHookForm.useForm({
12687
- resolver: zod.zodResolver(shippingMethodSchema),
12688
12579
  defaultValues: {
12689
- 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,
12690
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12691
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12692
- }
12580
+ customer_id: order.customer_id || ""
12581
+ },
12582
+ resolver: zod.zodResolver(schema)
12693
12583
  });
12694
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12695
- const {
12696
- mutateAsync: updateShippingMethod,
12697
- isPending: isUpdatingShippingMethod
12698
- } = useDraftOrderUpdateShippingMethod(order.id);
12699
- const onSubmit = form.handleSubmit(async (values) => {
12700
- if (lodash.isEqual(values, form.formState.defaultValues)) {
12701
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12702
- return;
12703
- }
12704
- if (data.shippingMethod) {
12705
- await updateShippingMethod(
12706
- {
12707
- method_id: data.shippingMethod.id,
12708
- shipping_option_id: values.shipping_option_id,
12709
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12710
- },
12711
- {
12712
- onError: (e) => {
12713
- ui.toast.error(e.message);
12714
- },
12715
- onSuccess: () => {
12716
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12717
- }
12718
- }
12719
- );
12720
- return;
12721
- }
12722
- await addShippingMethod(
12723
- {
12724
- shipping_option_id: values.shipping_option_id,
12725
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12726
- },
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 },
12727
12594
  {
12728
- onError: (e) => {
12729
- ui.toast.error(e.message);
12730
- },
12731
12595
  onSuccess: () => {
12732
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12596
+ ui.toast.success("Customer updated");
12597
+ handleSuccess();
12598
+ },
12599
+ onError: (error) => {
12600
+ ui.toast.error(error.message);
12733
12601
  }
12734
12602
  }
12735
12603
  );
12736
12604
  });
12737
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12605
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12738
12606
  KeyboundForm,
12739
12607
  {
12740
- className: "flex h-full flex-col overflow-hidden",
12608
+ className: "flex flex-1 flex-col overflow-hidden",
12741
12609
  onSubmit,
12742
12610
  children: [
12743
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12744
- /* @__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: [
12745
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12746
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
12747
- /* @__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." }) })
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
+ ] })
12748
12622
  ] }),
12749
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12750
- /* @__PURE__ */ jsxRuntime.jsx(
12751
- LocationField,
12752
- {
12753
- control: form.control,
12754
- setValue: form.setValue
12755
- }
12756
- ),
12757
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12758
- /* @__PURE__ */ jsxRuntime.jsx(
12759
- ShippingOptionField,
12760
- {
12761
- shippingProfileId: data.shippingProfileId,
12762
- preview,
12763
- control: form.control
12764
- }
12765
- ),
12766
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12767
12623
  /* @__PURE__ */ jsxRuntime.jsx(
12768
- CustomAmountField,
12624
+ CustomerField,
12769
12625
  {
12770
12626
  control: form.control,
12771
- currencyCode: order.currency_code
12772
- }
12773
- ),
12774
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12775
- /* @__PURE__ */ jsxRuntime.jsx(
12776
- ItemsPreview,
12777
- {
12778
- order,
12779
- shippingProfileId: data.shippingProfileId
12780
- }
12781
- )
12782
- ] }) }) }),
12783
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
12784
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12785
- /* @__PURE__ */ jsxRuntime.jsx(
12786
- ui.Button,
12787
- {
12788
- size: "small",
12789
- type: "submit",
12790
- isLoading: isPending || isUpdatingShippingMethod,
12791
- children: data.shippingMethod ? "Update" : "Add"
12627
+ currentCustomerId: order.customer_id
12792
12628
  }
12793
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" })
12794
12634
  ] }) })
12795
12635
  ]
12796
12636
  }
12797
- ) }) });
12798
- };
12799
- const shippingMethodSchema = objectType({
12800
- location_id: stringType(),
12801
- shipping_option_id: stringType(),
12802
- custom_amount: unionType([numberType(), stringType()]).optional()
12803
- });
12804
- const ItemsPreview = ({ order, shippingProfileId }) => {
12805
- const matches = order.items.filter(
12806
- (item) => {
12807
- var _a, _b, _c;
12808
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12809
- }
12810
- );
12811
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12812
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12813
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12814
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12815
- ] }) }),
12816
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12817
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12818
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12819
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
12820
- ] }),
12821
- /* @__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(
12822
- "div",
12823
- {
12824
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12825
- children: [
12826
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12827
- /* @__PURE__ */ jsxRuntime.jsx(
12828
- Thumbnail,
12829
- {
12830
- thumbnail: item.thumbnail,
12831
- alt: item.product_title ?? void 0
12832
- }
12833
- ),
12834
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12835
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12836
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12837
- /* @__PURE__ */ jsxRuntime.jsxs(
12838
- ui.Text,
12839
- {
12840
- size: "small",
12841
- leading: "compact",
12842
- className: "text-ui-fg-subtle",
12843
- children: [
12844
- "(",
12845
- item.variant_title,
12846
- ")"
12847
- ]
12848
- }
12849
- )
12850
- ] }),
12851
- /* @__PURE__ */ jsxRuntime.jsx(
12852
- ui.Text,
12853
- {
12854
- size: "small",
12855
- leading: "compact",
12856
- className: "text-ui-fg-subtle",
12857
- children: item.variant_sku
12858
- }
12859
- )
12860
- ] })
12861
- ] }),
12862
- /* @__PURE__ */ jsxRuntime.jsxs(
12863
- ui.Text,
12864
- {
12865
- size: "small",
12866
- leading: "compact",
12867
- className: "text-ui-fg-subtle",
12868
- children: [
12869
- item.quantity,
12870
- "x"
12871
- ]
12872
- }
12873
- )
12874
- ]
12875
- },
12876
- item.id
12877
- )) : /* @__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: [
12878
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12879
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12880
- 'No items found for "',
12881
- query,
12882
- '".'
12883
- ] })
12884
- ] }) })
12885
- ] })
12886
- ] });
12637
+ ) });
12887
12638
  };
12888
- const LocationField = ({ control, setValue }) => {
12889
- const locations = useComboboxData({
12890
- queryKey: ["locations"],
12639
+ const CustomerField = ({ control, currentCustomerId }) => {
12640
+ const customers = useComboboxData({
12891
12641
  queryFn: async (params) => {
12892
- return await sdk.admin.stockLocation.list(params);
12642
+ return await sdk.admin.customer.list({
12643
+ ...params,
12644
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
12645
+ });
12893
12646
  },
12647
+ queryKey: ["customers"],
12894
12648
  getOptions: (data) => {
12895
- return data.stock_locations.map((location) => ({
12896
- label: location.name,
12897
- value: location.id
12898
- }));
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
+ });
12899
12656
  }
12900
12657
  });
12901
12658
  return /* @__PURE__ */ jsxRuntime.jsx(
12902
12659
  Form$2.Field,
12903
12660
  {
12661
+ name: "customer_id",
12904
12662
  control,
12905
- name: "location_id",
12906
- render: ({ field: { onChange, ...field } }) => {
12907
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12908
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12909
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
12910
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12911
- ] }),
12912
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12913
- Combobox,
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",
12694
+ children: [
12695
+ /* @__PURE__ */ jsxRuntime.jsx(
12696
+ "rect",
12697
+ {
12698
+ x: "0.00428286",
12699
+ y: "-0.742904",
12700
+ width: "33.5",
12701
+ height: "65.5",
12702
+ rx: "6.75",
12703
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
12704
+ fill: "#D4D4D8",
12705
+ stroke: "#52525B",
12706
+ strokeWidth: "1.5"
12707
+ }
12708
+ ),
12709
+ /* @__PURE__ */ jsxRuntime.jsx(
12710
+ "rect",
12711
+ {
12712
+ x: "0.00428286",
12713
+ y: "-0.742904",
12714
+ width: "33.5",
12715
+ height: "65.5",
12716
+ rx: "6.75",
12717
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
12718
+ fill: "white",
12719
+ stroke: "#52525B",
12720
+ strokeWidth: "1.5"
12721
+ }
12722
+ ),
12723
+ /* @__PURE__ */ jsxRuntime.jsx(
12724
+ "path",
12725
+ {
12726
+ d: "M180.579 107.142L179.126 107.959",
12727
+ stroke: "#52525B",
12728
+ strokeWidth: "1.5",
12729
+ strokeLinecap: "round",
12730
+ strokeLinejoin: "round"
12731
+ }
12732
+ ),
12733
+ /* @__PURE__ */ jsxRuntime.jsx(
12734
+ "path",
12735
+ {
12736
+ opacity: "0.88",
12737
+ d: "M182.305 109.546L180.257 109.534",
12738
+ stroke: "#52525B",
12739
+ strokeWidth: "1.5",
12740
+ strokeLinecap: "round",
12741
+ strokeLinejoin: "round"
12742
+ }
12743
+ ),
12744
+ /* @__PURE__ */ jsxRuntime.jsx(
12745
+ "path",
12746
+ {
12747
+ opacity: "0.75",
12748
+ d: "M180.551 111.93L179.108 111.096",
12749
+ stroke: "#52525B",
12750
+ strokeWidth: "1.5",
12751
+ strokeLinecap: "round",
12752
+ strokeLinejoin: "round"
12753
+ }
12754
+ ),
12755
+ /* @__PURE__ */ jsxRuntime.jsx(
12756
+ "path",
12757
+ {
12758
+ opacity: "0.63",
12759
+ d: "M176.347 112.897L176.354 111.73",
12760
+ stroke: "#52525B",
12761
+ strokeWidth: "1.5",
12762
+ strokeLinecap: "round",
12763
+ strokeLinejoin: "round"
12764
+ }
12765
+ ),
12766
+ /* @__PURE__ */ jsxRuntime.jsx(
12767
+ "path",
12768
+ {
12769
+ opacity: "0.5",
12770
+ d: "M172.153 111.881L173.606 111.064",
12771
+ stroke: "#52525B",
12772
+ strokeWidth: "1.5",
12773
+ strokeLinecap: "round",
12774
+ strokeLinejoin: "round"
12775
+ }
12776
+ ),
12777
+ /* @__PURE__ */ jsxRuntime.jsx(
12778
+ "path",
12779
+ {
12780
+ opacity: "0.38",
12781
+ d: "M170.428 109.478L172.476 109.489",
12782
+ stroke: "#52525B",
12783
+ strokeWidth: "1.5",
12784
+ strokeLinecap: "round",
12785
+ strokeLinejoin: "round"
12786
+ }
12787
+ ),
12788
+ /* @__PURE__ */ jsxRuntime.jsx(
12789
+ "path",
12790
+ {
12791
+ opacity: "0.25",
12792
+ d: "M172.181 107.094L173.624 107.928",
12793
+ stroke: "#52525B",
12794
+ strokeWidth: "1.5",
12795
+ strokeLinecap: "round",
12796
+ strokeLinejoin: "round"
12797
+ }
12798
+ ),
12799
+ /* @__PURE__ */ jsxRuntime.jsx(
12800
+ "path",
12801
+ {
12802
+ opacity: "0.13",
12803
+ d: "M176.386 106.126L176.379 107.294",
12804
+ stroke: "#52525B",
12805
+ strokeWidth: "1.5",
12806
+ strokeLinecap: "round",
12807
+ strokeLinejoin: "round"
12808
+ }
12809
+ ),
12810
+ /* @__PURE__ */ jsxRuntime.jsx(
12811
+ "rect",
12812
+ {
12813
+ width: "12",
12814
+ height: "3",
12815
+ rx: "1.5",
12816
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
12817
+ fill: "#D4D4D8"
12818
+ }
12819
+ ),
12820
+ /* @__PURE__ */ jsxRuntime.jsx(
12821
+ "rect",
12822
+ {
12823
+ x: "0.00428286",
12824
+ y: "-0.742904",
12825
+ width: "33.5",
12826
+ height: "65.5",
12827
+ rx: "6.75",
12828
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
12829
+ fill: "#D4D4D8",
12830
+ stroke: "#52525B",
12831
+ strokeWidth: "1.5"
12832
+ }
12833
+ ),
12834
+ /* @__PURE__ */ jsxRuntime.jsx(
12835
+ "rect",
12836
+ {
12837
+ x: "0.00428286",
12838
+ y: "-0.742904",
12839
+ width: "33.5",
12840
+ height: "65.5",
12841
+ rx: "6.75",
12842
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
12843
+ fill: "white",
12844
+ stroke: "#52525B",
12845
+ strokeWidth: "1.5"
12846
+ }
12847
+ ),
12848
+ /* @__PURE__ */ jsxRuntime.jsx(
12849
+ "rect",
12850
+ {
12851
+ width: "12",
12852
+ height: "3",
12853
+ rx: "1.5",
12854
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
12855
+ fill: "#D4D4D8"
12856
+ }
12857
+ ),
12858
+ /* @__PURE__ */ jsxRuntime.jsx(
12859
+ "rect",
12860
+ {
12861
+ width: "17",
12862
+ height: "3",
12863
+ rx: "1.5",
12864
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
12865
+ fill: "#D4D4D8"
12866
+ }
12867
+ ),
12868
+ /* @__PURE__ */ jsxRuntime.jsx(
12869
+ "rect",
12870
+ {
12871
+ width: "12",
12872
+ height: "3",
12873
+ rx: "1.5",
12874
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
12875
+ fill: "#D4D4D8"
12876
+ }
12877
+ ),
12878
+ /* @__PURE__ */ jsxRuntime.jsx(
12879
+ "path",
12880
+ {
12881
+ d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
12882
+ fill: "#A1A1AA"
12883
+ }
12884
+ ),
12885
+ /* @__PURE__ */ jsxRuntime.jsx(
12886
+ "rect",
12887
+ {
12888
+ width: "17",
12889
+ height: "3",
12890
+ rx: "1.5",
12891
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
12892
+ fill: "#A1A1AA"
12893
+ }
12894
+ ),
12895
+ /* @__PURE__ */ jsxRuntime.jsx(
12896
+ "rect",
12897
+ {
12898
+ width: "12",
12899
+ height: "3",
12900
+ rx: "1.5",
12901
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12902
+ fill: "#A1A1AA"
12903
+ }
12904
+ ),
12905
+ /* @__PURE__ */ jsxRuntime.jsx(
12906
+ "path",
12907
+ {
12908
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12909
+ fill: "#52525B"
12910
+ }
12911
+ ),
12912
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12913
+ "path",
12914
+ {
12915
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12916
+ stroke: "#A1A1AA",
12917
+ strokeWidth: "1.5",
12918
+ strokeLinecap: "round",
12919
+ strokeLinejoin: "round"
12920
+ }
12921
+ ) }),
12922
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12923
+ "path",
12924
+ {
12925
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12926
+ stroke: "#A1A1AA",
12927
+ strokeWidth: "1.5",
12928
+ strokeLinecap: "round",
12929
+ strokeLinejoin: "round"
12930
+ }
12931
+ ) }),
12932
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12933
+ "path",
12934
+ {
12935
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12936
+ stroke: "#A1A1AA",
12937
+ strokeWidth: "1.5",
12938
+ strokeLinecap: "round",
12939
+ strokeLinejoin: "round"
12940
+ }
12941
+ ) }),
12942
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12943
+ "path",
12944
+ {
12945
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12946
+ stroke: "#A1A1AA",
12947
+ strokeWidth: "1.5",
12948
+ strokeLinecap: "round",
12949
+ strokeLinejoin: "round"
12950
+ }
12951
+ ) }),
12952
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12953
+ "path",
12954
+ {
12955
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12956
+ stroke: "#A1A1AA",
12957
+ strokeWidth: "1.5",
12958
+ strokeLinecap: "round",
12959
+ strokeLinejoin: "round"
12960
+ }
12961
+ ) }),
12962
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12963
+ "path",
12964
+ {
12965
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12966
+ stroke: "#A1A1AA",
12967
+ strokeWidth: "1.5",
12968
+ strokeLinecap: "round",
12969
+ strokeLinejoin: "round"
12970
+ }
12971
+ ) }),
12972
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12973
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12974
+ "rect",
12914
12975
  {
12915
- options: locations.options,
12916
- fetchNextPage: locations.fetchNextPage,
12917
- isFetchingNextPage: locations.isFetchingNextPage,
12918
- searchValue: locations.searchValue,
12919
- onSearchValueChange: locations.onSearchValueChange,
12920
- placeholder: "Select location",
12921
- onChange: (value) => {
12922
- setValue("shipping_option_id", "", {
12923
- shouldDirty: true,
12924
- shouldTouch: true
12925
- });
12926
- onChange(value);
12927
- },
12928
- ...field
12976
+ width: "12",
12977
+ height: "12",
12978
+ fill: "white",
12979
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12929
12980
  }
12930
- ) })
12931
- ] }) });
12932
- }
12933
- }
12934
- );
12935
- };
12936
- const ShippingOptionField = ({
12937
- shippingProfileId,
12938
- preview,
12939
- control
12940
- }) => {
12941
- var _a;
12942
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
12943
- const shippingOptions = useComboboxData({
12944
- queryKey: ["shipping_options", locationId, shippingProfileId],
12945
- queryFn: async (params) => {
12946
- return await sdk.admin.shippingOption.list({
12947
- ...params,
12948
- stock_location_id: locationId,
12949
- shipping_profile_id: shippingProfileId
12950
- });
12951
- },
12952
- getOptions: (data) => {
12953
- return data.shipping_options.map((option) => {
12954
- var _a2;
12955
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12956
- (r) => r.attribute === "is_return" && r.value === "true"
12957
- )) {
12958
- return void 0;
12959
- }
12960
- return {
12961
- label: option.name,
12962
- value: option.id
12963
- };
12964
- }).filter(Boolean);
12965
- },
12966
- enabled: !!locationId && !!shippingProfileId,
12967
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12968
- });
12969
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12970
- return /* @__PURE__ */ jsxRuntime.jsx(
12971
- Form$2.Field,
12972
- {
12973
- control,
12974
- name: "shipping_option_id",
12975
- render: ({ field }) => {
12976
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12977
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12978
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12979
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12980
- ] }),
12981
- /* @__PURE__ */ jsxRuntime.jsx(
12982
- ConditionalTooltip,
12981
+ ) }),
12982
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12983
+ "rect",
12983
12984
  {
12984
- content: tooltipContent,
12985
- showTooltip: !locationId || !shippingProfileId,
12986
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12987
- Combobox,
12988
- {
12989
- options: shippingOptions.options,
12990
- fetchNextPage: shippingOptions.fetchNextPage,
12991
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12992
- searchValue: shippingOptions.searchValue,
12993
- onSearchValueChange: shippingOptions.onSearchValueChange,
12994
- placeholder: "Select shipping option",
12995
- ...field,
12996
- disabled: !locationId || !shippingProfileId
12997
- }
12998
- ) }) })
12985
+ width: "12",
12986
+ height: "12",
12987
+ fill: "white",
12988
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12999
12989
  }
13000
- )
13001
- ] }) });
13002
- }
13003
- }
13004
- );
13005
- };
13006
- const CustomAmountField = ({
13007
- control,
13008
- currencyCode
13009
- }) => {
13010
- return /* @__PURE__ */ jsxRuntime.jsx(
13011
- Form$2.Field,
13012
- {
13013
- control,
13014
- name: "custom_amount",
13015
- render: ({ field: { onChange, ...field } }) => {
13016
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13017
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
13018
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
13019
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
13020
- ] }),
13021
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
13022
- ui.CurrencyInput,
12990
+ ) }),
12991
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12992
+ "rect",
13023
12993
  {
13024
- ...field,
13025
- onValueChange: (value) => onChange(value),
13026
- symbol: getNativeSymbol(currencyCode),
13027
- code: currencyCode
12994
+ width: "12",
12995
+ height: "12",
12996
+ fill: "white",
12997
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12998
+ }
12999
+ ) }),
13000
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13001
+ "rect",
13002
+ {
13003
+ width: "12",
13004
+ height: "12",
13005
+ fill: "white",
13006
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
13007
+ }
13008
+ ) }),
13009
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13010
+ "rect",
13011
+ {
13012
+ width: "12",
13013
+ height: "12",
13014
+ fill: "white",
13015
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
13016
+ }
13017
+ ) }),
13018
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13019
+ "rect",
13020
+ {
13021
+ width: "12",
13022
+ height: "12",
13023
+ fill: "white",
13024
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13028
13025
  }
13029
13026
  ) })
13030
- ] });
13031
- }
13027
+ ] })
13028
+ ]
13032
13029
  }
13033
13030
  );
13034
13031
  };
13032
+ const schema = objectType({
13033
+ customer_id: stringType().min(1)
13034
+ });
13035
13035
  const widgetModule = { widgets: [] };
13036
13036
  const routeModule = {
13037
13037
  routes: [
@@ -13053,12 +13053,8 @@ const routeModule = {
13053
13053
  loader,
13054
13054
  children: [
13055
13055
  {
13056
- Component: BillingAddress,
13057
- path: "/draft-orders/:id/billing-address"
13058
- },
13059
- {
13060
- Component: Email,
13061
- path: "/draft-orders/:id/email"
13056
+ Component: CustomItems,
13057
+ path: "/draft-orders/:id/custom-items"
13062
13058
  },
13063
13059
  {
13064
13060
  Component: Metadata,
@@ -13069,8 +13065,12 @@ const routeModule = {
13069
13065
  path: "/draft-orders/:id/items"
13070
13066
  },
13071
13067
  {
13072
- Component: CustomItems,
13073
- path: "/draft-orders/:id/custom-items"
13068
+ Component: Email,
13069
+ path: "/draft-orders/:id/email"
13070
+ },
13071
+ {
13072
+ Component: BillingAddress,
13073
+ path: "/draft-orders/:id/billing-address"
13074
13074
  },
13075
13075
  {
13076
13076
  Component: Promotions,
@@ -13080,6 +13080,10 @@ const routeModule = {
13080
13080
  Component: SalesChannel,
13081
13081
  path: "/draft-orders/:id/sales-channel"
13082
13082
  },
13083
+ {
13084
+ Component: Shipping,
13085
+ path: "/draft-orders/:id/shipping"
13086
+ },
13083
13087
  {
13084
13088
  Component: ShippingAddress,
13085
13089
  path: "/draft-orders/:id/shipping-address"
@@ -13087,10 +13091,6 @@ const routeModule = {
13087
13091
  {
13088
13092
  Component: TransferOwnership,
13089
13093
  path: "/draft-orders/:id/transfer-ownership"
13090
- },
13091
- {
13092
- Component: Shipping,
13093
- path: "/draft-orders/:id/shipping"
13094
13094
  }
13095
13095
  ]
13096
13096
  }