@medusajs/draft-order 2.11.0-preview-20251020141229 → 2.11.0-preview-20251020150157

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 +1039 -1039
  2. package/.medusa/server/src/admin/index.mjs +1040 -1040
  3. package/package.json +24 -22
package/.medusa/server/src/admin/index.mjs CHANGED
@@ -4,7 +4,7 @@ import { Tooltip, DropdownMenu, clx, IconButton, useDataTable, DataTable as Data
4
4
  import { useQuery, useQueryClient, useMutation, keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
5
5
  import React, { useState, useCallback, useMemo, Fragment, createContext, forwardRef, useId, useContext, useTransition, useRef, useImperativeHandle, useDeferredValue, useEffect, Suspense } from "react";
6
6
  import { useSearchParams, Link, useNavigate, Outlet, useBlocker, useLocation, useParams } from "react-router-dom";
7
- import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, EllipsisVertical, ArrowUpMini, ArrowDownMini, Minus, PencilSquare } from "@medusajs/icons";
7
+ import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, Minus, PencilSquare, EllipsisVertical, ArrowUpMini, ArrowDownMini } from "@medusajs/icons";
8
8
  import Medusa from "@medusajs/js-sdk";
9
9
  import { format, formatDistance, sub, subDays, subMonths } from "date-fns";
10
10
  import { enUS } from "date-fns/locale";
@@ -9565,95 +9565,6 @@ const ID = () => {
9565
9565
  /* @__PURE__ */ jsx(Outlet, {})
9566
9566
  ] });
9567
9567
  };
9568
- const Email = () => {
9569
- const { id } = useParams();
9570
- const { order, isPending, isError, error } = useOrder(id, {
9571
- fields: "+email"
9572
- });
9573
- if (isError) {
9574
- throw error;
9575
- }
9576
- const isReady = !isPending && !!order;
9577
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9578
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9579
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
9580
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9581
- ] }),
9582
- isReady && /* @__PURE__ */ jsx(EmailForm, { order })
9583
- ] });
9584
- };
9585
- const EmailForm = ({ order }) => {
9586
- const form = useForm({
9587
- defaultValues: {
9588
- email: order.email ?? ""
9589
- },
9590
- resolver: zodResolver(schema$5)
9591
- });
9592
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9593
- const { handleSuccess } = useRouteModal();
9594
- const onSubmit = form.handleSubmit(async (data) => {
9595
- await mutateAsync(
9596
- { email: data.email },
9597
- {
9598
- onSuccess: () => {
9599
- handleSuccess();
9600
- },
9601
- onError: (error) => {
9602
- toast.error(error.message);
9603
- }
9604
- }
9605
- );
9606
- });
9607
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9608
- KeyboundForm,
9609
- {
9610
- className: "flex flex-1 flex-col overflow-hidden",
9611
- onSubmit,
9612
- children: [
9613
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
9614
- Form$2.Field,
9615
- {
9616
- control: form.control,
9617
- name: "email",
9618
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9619
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
9620
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9621
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9622
- ] })
9623
- }
9624
- ) }),
9625
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9626
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9627
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9628
- ] }) })
9629
- ]
9630
- }
9631
- ) });
9632
- };
9633
- const schema$5 = objectType({
9634
- email: stringType().email()
9635
- });
9636
- const CustomItems = () => {
9637
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9638
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9639
- /* @__PURE__ */ jsx(CustomItemsForm, {})
9640
- ] });
9641
- };
9642
- const CustomItemsForm = () => {
9643
- const form = useForm({
9644
- resolver: zodResolver(schema$4)
9645
- });
9646
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9647
- /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9648
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9649
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9650
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9651
- ] }) })
9652
- ] }) });
9653
- };
9654
- const schema$4 = objectType({
9655
- email: stringType().email()
9656
- });
9657
9568
  const BillingAddress = () => {
9658
9569
  const { id } = useParams();
9659
9570
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9686,7 +9597,7 @@ const BillingAddressForm = ({ order }) => {
9686
9597
  postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9687
9598
  phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9688
9599
  },
9689
- resolver: zodResolver(schema$3)
9600
+ resolver: zodResolver(schema$5)
9690
9601
  });
9691
9602
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9692
9603
  const { handleSuccess } = useRouteModal();
@@ -9843,55 +9754,32 @@ const BillingAddressForm = ({ order }) => {
9843
9754
  }
9844
9755
  ) });
9845
9756
  };
9846
- const schema$3 = addressSchema;
9847
- const InlineTip = forwardRef(
9848
- ({ variant = "tip", label, className, children, ...props }, ref) => {
9849
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9850
- return /* @__PURE__ */ jsxs(
9851
- "div",
9852
- {
9853
- ref,
9854
- className: clx(
9855
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9856
- className
9857
- ),
9858
- ...props,
9859
- children: [
9860
- /* @__PURE__ */ jsx(
9861
- "div",
9862
- {
9863
- role: "presentation",
9864
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9865
- "bg-ui-tag-orange-icon": variant === "warning"
9866
- })
9867
- }
9868
- ),
9869
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
9870
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9871
- labelValue,
9872
- ":"
9873
- ] }),
9874
- " ",
9875
- children
9876
- ] })
9877
- ]
9878
- }
9879
- );
9880
- }
9881
- );
9882
- InlineTip.displayName = "InlineTip";
9883
- const MetadataFieldSchema = objectType({
9884
- key: stringType(),
9885
- disabled: booleanType().optional(),
9886
- value: anyType()
9887
- });
9888
- const MetadataSchema = objectType({
9889
- metadata: arrayType(MetadataFieldSchema)
9757
+ const schema$5 = addressSchema;
9758
+ const CustomItems = () => {
9759
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9760
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9761
+ /* @__PURE__ */ jsx(CustomItemsForm, {})
9762
+ ] });
9763
+ };
9764
+ const CustomItemsForm = () => {
9765
+ const form = useForm({
9766
+ resolver: zodResolver(schema$4)
9767
+ });
9768
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9769
+ /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9770
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9771
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9772
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9773
+ ] }) })
9774
+ ] }) });
9775
+ };
9776
+ const schema$4 = objectType({
9777
+ email: stringType().email()
9890
9778
  });
9891
- const Metadata = () => {
9779
+ const Email = () => {
9892
9780
  const { id } = useParams();
9893
9781
  const { order, isPending, isError, error } = useOrder(id, {
9894
- fields: "metadata"
9782
+ fields: "+email"
9895
9783
  });
9896
9784
  if (isError) {
9897
9785
  throw error;
@@ -9899,33 +9787,26 @@ const Metadata = () => {
9899
9787
  const isReady = !isPending && !!order;
9900
9788
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9901
9789
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9902
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
9903
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9790
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
9791
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9904
9792
  ] }),
9905
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9793
+ isReady && /* @__PURE__ */ jsx(EmailForm, { order })
9906
9794
  ] });
9907
9795
  };
9908
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9909
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9910
- const MetadataForm = ({ orderId, metadata }) => {
9911
- const { handleSuccess } = useRouteModal();
9912
- const hasUneditableRows = getHasUneditableRows(metadata);
9913
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
9796
+ const EmailForm = ({ order }) => {
9914
9797
  const form = useForm({
9915
9798
  defaultValues: {
9916
- metadata: getDefaultValues(metadata)
9799
+ email: order.email ?? ""
9917
9800
  },
9918
- resolver: zodResolver(MetadataSchema)
9801
+ resolver: zodResolver(schema$3)
9919
9802
  });
9920
- const handleSubmit = form.handleSubmit(async (data) => {
9921
- const parsedData = parseValues(data);
9803
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9804
+ const { handleSuccess } = useRouteModal();
9805
+ const onSubmit = form.handleSubmit(async (data) => {
9922
9806
  await mutateAsync(
9923
- {
9924
- metadata: parsedData
9925
- },
9807
+ { email: data.email },
9926
9808
  {
9927
9809
  onSuccess: () => {
9928
- toast.success("Metadata updated");
9929
9810
  handleSuccess();
9930
9811
  },
9931
9812
  onError: (error) => {
@@ -9934,266 +9815,35 @@ const MetadataForm = ({ orderId, metadata }) => {
9934
9815
  }
9935
9816
  );
9936
9817
  });
9937
- const { fields, insert, remove } = useFieldArray({
9938
- control: form.control,
9939
- name: "metadata"
9940
- });
9941
- function deleteRow(index) {
9942
- remove(index);
9943
- if (fields.length === 1) {
9944
- insert(0, {
9945
- key: "",
9946
- value: "",
9947
- disabled: false
9948
- });
9949
- }
9950
- }
9951
- function insertRow(index, position) {
9952
- insert(index + (position === "above" ? 0 : 1), {
9953
- key: "",
9954
- value: "",
9955
- disabled: false
9956
- });
9957
- }
9958
9818
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9959
9819
  KeyboundForm,
9960
9820
  {
9961
- onSubmit: handleSubmit,
9962
9821
  className: "flex flex-1 flex-col overflow-hidden",
9822
+ onSubmit,
9963
9823
  children: [
9964
- /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
9965
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
9966
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
9967
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
9968
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
9969
- ] }),
9970
- fields.map((field, index) => {
9971
- const isDisabled = field.disabled || false;
9972
- let placeholder = "-";
9973
- if (typeof field.value === "object") {
9974
- placeholder = "{ ... }";
9975
- }
9976
- if (Array.isArray(field.value)) {
9977
- placeholder = "[ ... ]";
9978
- }
9979
- return /* @__PURE__ */ jsx(
9980
- ConditionalTooltip,
9981
- {
9982
- showTooltip: isDisabled,
9983
- content: "This row is disabled because it contains non-primitive data.",
9984
- children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
9985
- /* @__PURE__ */ jsxs(
9986
- "div",
9987
- {
9988
- className: clx("grid grid-cols-2 divide-x", {
9989
- "overflow-hidden rounded-b-lg": index === fields.length - 1
9990
- }),
9991
- children: [
9992
- /* @__PURE__ */ jsx(
9993
- Form$2.Field,
9994
- {
9995
- control: form.control,
9996
- name: `metadata.${index}.key`,
9997
- render: ({ field: field2 }) => {
9998
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
9999
- GridInput,
10000
- {
10001
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10002
- ...field2,
10003
- disabled: isDisabled,
10004
- placeholder: "Key"
10005
- }
10006
- ) }) });
10007
- }
10008
- }
10009
- ),
10010
- /* @__PURE__ */ jsx(
10011
- Form$2.Field,
10012
- {
10013
- control: form.control,
10014
- name: `metadata.${index}.value`,
10015
- render: ({ field: { value, ...field2 } }) => {
10016
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10017
- GridInput,
10018
- {
10019
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
10020
- ...field2,
10021
- value: isDisabled ? placeholder : value,
10022
- disabled: isDisabled,
10023
- placeholder: "Value"
10024
- }
10025
- ) }) });
10026
- }
10027
- }
10028
- )
10029
- ]
10030
- }
10031
- ),
10032
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
10033
- /* @__PURE__ */ jsx(
10034
- DropdownMenu.Trigger,
10035
- {
10036
- className: clx(
10037
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
10038
- {
10039
- hidden: isDisabled
10040
- }
10041
- ),
10042
- disabled: isDisabled,
10043
- asChild: true,
10044
- children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
10045
- }
10046
- ),
10047
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
10048
- /* @__PURE__ */ jsxs(
10049
- DropdownMenu.Item,
10050
- {
10051
- className: "gap-x-2",
10052
- onClick: () => insertRow(index, "above"),
10053
- children: [
10054
- /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
10055
- "Insert row above"
10056
- ]
10057
- }
10058
- ),
10059
- /* @__PURE__ */ jsxs(
10060
- DropdownMenu.Item,
10061
- {
10062
- className: "gap-x-2",
10063
- onClick: () => insertRow(index, "below"),
10064
- children: [
10065
- /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
10066
- "Insert row below"
10067
- ]
10068
- }
10069
- ),
10070
- /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
10071
- /* @__PURE__ */ jsxs(
10072
- DropdownMenu.Item,
10073
- {
10074
- className: "gap-x-2",
10075
- onClick: () => deleteRow(index),
10076
- children: [
10077
- /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
10078
- "Delete row"
10079
- ]
10080
- }
10081
- )
10082
- ] })
10083
- ] })
10084
- ] })
10085
- },
10086
- field.id
10087
- );
10088
- })
10089
- ] }),
10090
- hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
10091
- ] }),
10092
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10093
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
9824
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
9825
+ Form$2.Field,
9826
+ {
9827
+ control: form.control,
9828
+ name: "email",
9829
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9830
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
9831
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9832
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9833
+ ] })
9834
+ }
9835
+ ) }),
9836
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9837
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10094
9838
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10095
9839
  ] }) })
10096
9840
  ]
10097
9841
  }
10098
9842
  ) });
10099
9843
  };
10100
- const GridInput = forwardRef(({ className, ...props }, ref) => {
10101
- return /* @__PURE__ */ jsx(
10102
- "input",
10103
- {
10104
- ref,
10105
- ...props,
10106
- autoComplete: "off",
10107
- className: clx(
10108
- "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
10109
- className
10110
- )
10111
- }
10112
- );
9844
+ const schema$3 = objectType({
9845
+ email: stringType().email()
10113
9846
  });
10114
- GridInput.displayName = "MetadataForm.GridInput";
10115
- const PlaceholderInner = () => {
10116
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
10117
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
10118
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10119
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
10120
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
10121
- ] }) })
10122
- ] });
10123
- };
10124
- const EDITABLE_TYPES = ["string", "number", "boolean"];
10125
- function getDefaultValues(metadata) {
10126
- if (!metadata || !Object.keys(metadata).length) {
10127
- return [
10128
- {
10129
- key: "",
10130
- value: "",
10131
- disabled: false
10132
- }
10133
- ];
10134
- }
10135
- return Object.entries(metadata).map(([key, value]) => {
10136
- if (!EDITABLE_TYPES.includes(typeof value)) {
10137
- return {
10138
- key,
10139
- value,
10140
- disabled: true
10141
- };
10142
- }
10143
- let stringValue = value;
10144
- if (typeof value !== "string") {
10145
- stringValue = JSON.stringify(value);
10146
- }
10147
- return {
10148
- key,
10149
- value: stringValue,
10150
- original_key: key
10151
- };
10152
- });
10153
- }
10154
- function parseValues(values) {
10155
- const metadata = values.metadata;
10156
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
10157
- if (isEmpty) {
10158
- return null;
10159
- }
10160
- const update = {};
10161
- metadata.forEach((field) => {
10162
- let key = field.key;
10163
- let value = field.value;
10164
- const disabled = field.disabled;
10165
- if (!key || !value) {
10166
- return;
10167
- }
10168
- if (disabled) {
10169
- update[key] = value;
10170
- return;
10171
- }
10172
- key = key.trim();
10173
- value = value.trim();
10174
- if (value === "true") {
10175
- update[key] = true;
10176
- } else if (value === "false") {
10177
- update[key] = false;
10178
- } else {
10179
- const parsedNumber = parseFloat(value);
10180
- if (!isNaN(parsedNumber)) {
10181
- update[key] = parsedNumber;
10182
- } else {
10183
- update[key] = value;
10184
- }
10185
- }
10186
- });
10187
- return update;
10188
- }
10189
- function getHasUneditableRows(metadata) {
10190
- if (!metadata) {
10191
- return false;
10192
- }
10193
- return Object.values(metadata).some(
10194
- (value) => !EDITABLE_TYPES.includes(typeof value)
10195
- );
10196
- }
10197
9847
  const NumberInput = forwardRef(
10198
9848
  ({
10199
9849
  value,
@@ -11168,10 +10818,54 @@ const customItemSchema = objectType({
11168
10818
  quantity: numberType(),
11169
10819
  unit_price: unionType([numberType(), stringType()])
11170
10820
  });
11171
- const ShippingAddress = () => {
10821
+ const InlineTip = forwardRef(
10822
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10823
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10824
+ return /* @__PURE__ */ jsxs(
10825
+ "div",
10826
+ {
10827
+ ref,
10828
+ className: clx(
10829
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10830
+ className
10831
+ ),
10832
+ ...props,
10833
+ children: [
10834
+ /* @__PURE__ */ jsx(
10835
+ "div",
10836
+ {
10837
+ role: "presentation",
10838
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10839
+ "bg-ui-tag-orange-icon": variant === "warning"
10840
+ })
10841
+ }
10842
+ ),
10843
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10844
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10845
+ labelValue,
10846
+ ":"
10847
+ ] }),
10848
+ " ",
10849
+ children
10850
+ ] })
10851
+ ]
10852
+ }
10853
+ );
10854
+ }
10855
+ );
10856
+ InlineTip.displayName = "InlineTip";
10857
+ const MetadataFieldSchema = objectType({
10858
+ key: stringType(),
10859
+ disabled: booleanType().optional(),
10860
+ value: anyType()
10861
+ });
10862
+ const MetadataSchema = objectType({
10863
+ metadata: arrayType(MetadataFieldSchema)
10864
+ });
10865
+ const Metadata = () => {
11172
10866
  const { id } = useParams();
11173
10867
  const { order, isPending, isError, error } = useOrder(id, {
11174
- fields: "+shipping_address"
10868
+ fields: "metadata"
11175
10869
  });
11176
10870
  if (isError) {
11177
10871
  throw error;
@@ -11179,49 +10873,33 @@ const ShippingAddress = () => {
11179
10873
  const isReady = !isPending && !!order;
11180
10874
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11181
10875
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11182
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11183
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
10876
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10877
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11184
10878
  ] }),
11185
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
10879
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11186
10880
  ] });
11187
10881
  };
11188
- const ShippingAddressForm = ({ order }) => {
11189
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
10882
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10883
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10884
+ const MetadataForm = ({ orderId, metadata }) => {
10885
+ const { handleSuccess } = useRouteModal();
10886
+ const hasUneditableRows = getHasUneditableRows(metadata);
10887
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11190
10888
  const form = useForm({
11191
10889
  defaultValues: {
11192
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11193
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11194
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11195
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11196
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11197
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11198
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11199
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11200
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11201
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
10890
+ metadata: getDefaultValues(metadata)
11202
10891
  },
11203
- resolver: zodResolver(schema$2)
10892
+ resolver: zodResolver(MetadataSchema)
11204
10893
  });
11205
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11206
- const { handleSuccess } = useRouteModal();
11207
- const onSubmit = form.handleSubmit(async (data) => {
10894
+ const handleSubmit = form.handleSubmit(async (data) => {
10895
+ const parsedData = parseValues(data);
11208
10896
  await mutateAsync(
11209
10897
  {
11210
- shipping_address: {
11211
- first_name: data.first_name,
11212
- last_name: data.last_name,
11213
- company: data.company,
11214
- address_1: data.address_1,
11215
- address_2: data.address_2,
11216
- city: data.city,
11217
- province: data.province,
11218
- country_code: data.country_code,
11219
- postal_code: data.postal_code,
11220
- phone: data.phone
11221
- }
10898
+ metadata: parsedData
11222
10899
  },
11223
10900
  {
11224
10901
  onSuccess: () => {
10902
+ toast.success("Metadata updated");
11225
10903
  handleSuccess();
11226
10904
  },
11227
10905
  onError: (error) => {
@@ -11230,238 +10908,740 @@ const ShippingAddressForm = ({ order }) => {
11230
10908
  }
11231
10909
  );
11232
10910
  });
10911
+ const { fields, insert, remove } = useFieldArray({
10912
+ control: form.control,
10913
+ name: "metadata"
10914
+ });
10915
+ function deleteRow(index) {
10916
+ remove(index);
10917
+ if (fields.length === 1) {
10918
+ insert(0, {
10919
+ key: "",
10920
+ value: "",
10921
+ disabled: false
10922
+ });
10923
+ }
10924
+ }
10925
+ function insertRow(index, position) {
10926
+ insert(index + (position === "above" ? 0 : 1), {
10927
+ key: "",
10928
+ value: "",
10929
+ disabled: false
10930
+ });
10931
+ }
11233
10932
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11234
10933
  KeyboundForm,
11235
10934
  {
10935
+ onSubmit: handleSubmit,
11236
10936
  className: "flex flex-1 flex-col overflow-hidden",
11237
- onSubmit,
11238
10937
  children: [
11239
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
11240
- /* @__PURE__ */ jsx(
11241
- Form$2.Field,
11242
- {
11243
- control: form.control,
11244
- name: "country_code",
11245
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11246
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11247
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11248
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11249
- ] })
11250
- }
11251
- ),
11252
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11253
- /* @__PURE__ */ jsx(
11254
- Form$2.Field,
11255
- {
11256
- control: form.control,
11257
- name: "first_name",
11258
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11259
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11260
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11261
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11262
- ] })
10938
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10939
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10940
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10941
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10942
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10943
+ ] }),
10944
+ fields.map((field, index) => {
10945
+ const isDisabled = field.disabled || false;
10946
+ let placeholder = "-";
10947
+ if (typeof field.value === "object") {
10948
+ placeholder = "{ ... }";
11263
10949
  }
11264
- ),
11265
- /* @__PURE__ */ jsx(
11266
- Form$2.Field,
11267
- {
11268
- control: form.control,
11269
- name: "last_name",
11270
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11271
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11272
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11273
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11274
- ] })
10950
+ if (Array.isArray(field.value)) {
10951
+ placeholder = "[ ... ]";
11275
10952
  }
11276
- )
10953
+ return /* @__PURE__ */ jsx(
10954
+ ConditionalTooltip,
10955
+ {
10956
+ showTooltip: isDisabled,
10957
+ content: "This row is disabled because it contains non-primitive data.",
10958
+ children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
10959
+ /* @__PURE__ */ jsxs(
10960
+ "div",
10961
+ {
10962
+ className: clx("grid grid-cols-2 divide-x", {
10963
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
10964
+ }),
10965
+ children: [
10966
+ /* @__PURE__ */ jsx(
10967
+ Form$2.Field,
10968
+ {
10969
+ control: form.control,
10970
+ name: `metadata.${index}.key`,
10971
+ render: ({ field: field2 }) => {
10972
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10973
+ GridInput,
10974
+ {
10975
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
10976
+ ...field2,
10977
+ disabled: isDisabled,
10978
+ placeholder: "Key"
10979
+ }
10980
+ ) }) });
10981
+ }
10982
+ }
10983
+ ),
10984
+ /* @__PURE__ */ jsx(
10985
+ Form$2.Field,
10986
+ {
10987
+ control: form.control,
10988
+ name: `metadata.${index}.value`,
10989
+ render: ({ field: { value, ...field2 } }) => {
10990
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10991
+ GridInput,
10992
+ {
10993
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
10994
+ ...field2,
10995
+ value: isDisabled ? placeholder : value,
10996
+ disabled: isDisabled,
10997
+ placeholder: "Value"
10998
+ }
10999
+ ) }) });
11000
+ }
11001
+ }
11002
+ )
11003
+ ]
11004
+ }
11005
+ ),
11006
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
11007
+ /* @__PURE__ */ jsx(
11008
+ DropdownMenu.Trigger,
11009
+ {
11010
+ className: clx(
11011
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11012
+ {
11013
+ hidden: isDisabled
11014
+ }
11015
+ ),
11016
+ disabled: isDisabled,
11017
+ asChild: true,
11018
+ children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
11019
+ }
11020
+ ),
11021
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
11022
+ /* @__PURE__ */ jsxs(
11023
+ DropdownMenu.Item,
11024
+ {
11025
+ className: "gap-x-2",
11026
+ onClick: () => insertRow(index, "above"),
11027
+ children: [
11028
+ /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
11029
+ "Insert row above"
11030
+ ]
11031
+ }
11032
+ ),
11033
+ /* @__PURE__ */ jsxs(
11034
+ DropdownMenu.Item,
11035
+ {
11036
+ className: "gap-x-2",
11037
+ onClick: () => insertRow(index, "below"),
11038
+ children: [
11039
+ /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
11040
+ "Insert row below"
11041
+ ]
11042
+ }
11043
+ ),
11044
+ /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
11045
+ /* @__PURE__ */ jsxs(
11046
+ DropdownMenu.Item,
11047
+ {
11048
+ className: "gap-x-2",
11049
+ onClick: () => deleteRow(index),
11050
+ children: [
11051
+ /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
11052
+ "Delete row"
11053
+ ]
11054
+ }
11055
+ )
11056
+ ] })
11057
+ ] })
11058
+ ] })
11059
+ },
11060
+ field.id
11061
+ );
11062
+ })
11277
11063
  ] }),
11278
- /* @__PURE__ */ jsx(
11279
- Form$2.Field,
11280
- {
11281
- control: form.control,
11282
- name: "company",
11283
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11284
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11285
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11286
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11287
- ] })
11288
- }
11289
- ),
11290
- /* @__PURE__ */ jsx(
11291
- Form$2.Field,
11292
- {
11293
- control: form.control,
11294
- name: "address_1",
11295
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11296
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11297
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11298
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11299
- ] })
11300
- }
11301
- ),
11302
- /* @__PURE__ */ jsx(
11303
- Form$2.Field,
11304
- {
11305
- control: form.control,
11306
- name: "address_2",
11307
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11308
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11309
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11310
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11311
- ] })
11312
- }
11313
- ),
11314
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11315
- /* @__PURE__ */ jsx(
11316
- Form$2.Field,
11317
- {
11318
- control: form.control,
11319
- name: "postal_code",
11320
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11321
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11322
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11323
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11324
- ] })
11325
- }
11326
- ),
11327
- /* @__PURE__ */ jsx(
11328
- Form$2.Field,
11329
- {
11330
- control: form.control,
11331
- name: "city",
11332
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11333
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11334
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11335
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11336
- ] })
11337
- }
11338
- )
11339
- ] }),
11340
- /* @__PURE__ */ jsx(
11341
- Form$2.Field,
11342
- {
11343
- control: form.control,
11344
- name: "province",
11345
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11346
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11347
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11348
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11349
- ] })
11350
- }
11351
- ),
11352
- /* @__PURE__ */ jsx(
11353
- Form$2.Field,
11354
- {
11355
- control: form.control,
11356
- name: "phone",
11357
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11358
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11359
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11360
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11361
- ] })
11362
- }
11363
- )
11364
- ] }) }),
11365
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11366
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11064
+ hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
11065
+ ] }),
11066
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11067
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11367
11068
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11368
11069
  ] }) })
11369
11070
  ]
11370
11071
  }
11371
11072
  ) });
11372
11073
  };
11373
- const schema$2 = addressSchema;
11374
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11375
- const Shipping = () => {
11376
- var _a;
11377
- const { id } = useParams();
11378
- const { order, isPending, isError, error } = useOrder(id, {
11379
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11074
+ const GridInput = forwardRef(({ className, ...props }, ref) => {
11075
+ return /* @__PURE__ */ jsx(
11076
+ "input",
11077
+ {
11078
+ ref,
11079
+ ...props,
11080
+ autoComplete: "off",
11081
+ className: clx(
11082
+ "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
11083
+ className
11084
+ )
11085
+ }
11086
+ );
11087
+ });
11088
+ GridInput.displayName = "MetadataForm.GridInput";
11089
+ const PlaceholderInner = () => {
11090
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11091
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11092
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11093
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
11094
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
11095
+ ] }) })
11096
+ ] });
11097
+ };
11098
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11099
+ function getDefaultValues(metadata) {
11100
+ if (!metadata || !Object.keys(metadata).length) {
11101
+ return [
11102
+ {
11103
+ key: "",
11104
+ value: "",
11105
+ disabled: false
11106
+ }
11107
+ ];
11108
+ }
11109
+ return Object.entries(metadata).map(([key, value]) => {
11110
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11111
+ return {
11112
+ key,
11113
+ value,
11114
+ disabled: true
11115
+ };
11116
+ }
11117
+ let stringValue = value;
11118
+ if (typeof value !== "string") {
11119
+ stringValue = JSON.stringify(value);
11120
+ }
11121
+ return {
11122
+ key,
11123
+ value: stringValue,
11124
+ original_key: key
11125
+ };
11126
+ });
11127
+ }
11128
+ function parseValues(values) {
11129
+ const metadata = values.metadata;
11130
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11131
+ if (isEmpty) {
11132
+ return null;
11133
+ }
11134
+ const update = {};
11135
+ metadata.forEach((field) => {
11136
+ let key = field.key;
11137
+ let value = field.value;
11138
+ const disabled = field.disabled;
11139
+ if (!key || !value) {
11140
+ return;
11141
+ }
11142
+ if (disabled) {
11143
+ update[key] = value;
11144
+ return;
11145
+ }
11146
+ key = key.trim();
11147
+ value = value.trim();
11148
+ if (value === "true") {
11149
+ update[key] = true;
11150
+ } else if (value === "false") {
11151
+ update[key] = false;
11152
+ } else {
11153
+ const parsedNumber = parseFloat(value);
11154
+ if (!isNaN(parsedNumber)) {
11155
+ update[key] = parsedNumber;
11156
+ } else {
11157
+ update[key] = value;
11158
+ }
11159
+ }
11160
+ });
11161
+ return update;
11162
+ }
11163
+ function getHasUneditableRows(metadata) {
11164
+ if (!metadata) {
11165
+ return false;
11166
+ }
11167
+ return Object.values(metadata).some(
11168
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11169
+ );
11170
+ }
11171
+ const PROMOTION_QUERY_KEY = "promotions";
11172
+ const promotionsQueryKeys = {
11173
+ list: (query2) => [
11174
+ PROMOTION_QUERY_KEY,
11175
+ query2 ? query2 : void 0
11176
+ ],
11177
+ detail: (id, query2) => [
11178
+ PROMOTION_QUERY_KEY,
11179
+ id,
11180
+ query2 ? query2 : void 0
11181
+ ]
11182
+ };
11183
+ const usePromotions = (query2, options) => {
11184
+ const { data, ...rest } = useQuery({
11185
+ queryKey: promotionsQueryKeys.list(query2),
11186
+ queryFn: async () => sdk.admin.promotion.list(query2),
11187
+ ...options
11380
11188
  });
11189
+ return { ...data, ...rest };
11190
+ };
11191
+ const Promotions = () => {
11192
+ const { id } = useParams();
11381
11193
  const {
11382
11194
  order: preview,
11383
- isPending: isPreviewPending,
11384
11195
  isError: isPreviewError,
11385
11196
  error: previewError
11386
- } = useOrderPreview(id);
11197
+ } = useOrderPreview(id, void 0);
11387
11198
  useInitiateOrderEdit({ preview });
11388
11199
  const { onCancel } = useCancelOrderEdit({ preview });
11389
- if (isError) {
11390
- throw error;
11391
- }
11392
11200
  if (isPreviewError) {
11393
11201
  throw previewError;
11394
11202
  }
11395
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11396
- const isReady = preview && !isPreviewPending && order && !isPending;
11397
- return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11398
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11399
- /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11400
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11401
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11402
- ] }) }) }),
11403
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11404
- ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11405
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11406
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11407
- ] }) });
11203
+ const isReady = !!preview;
11204
+ return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
11205
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
11206
+ isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
11207
+ ] });
11408
11208
  };
11409
- const ShippingForm = ({ preview, order }) => {
11410
- var _a;
11411
- const { setIsOpen } = useStackedModal();
11209
+ const PromotionForm = ({ preview }) => {
11210
+ const { items, shipping_methods } = preview;
11412
11211
  const [isSubmitting, setIsSubmitting] = useState(false);
11413
- const [data, setData] = useState(null);
11414
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11415
- const { shipping_options } = useShippingOptions(
11212
+ const [comboboxValue, setComboboxValue] = useState("");
11213
+ const { handleSuccess } = useRouteModal();
11214
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11215
+ const promoIds = getPromotionIds(items, shipping_methods);
11216
+ const { promotions, isPending, isError, error } = usePromotions(
11416
11217
  {
11417
- id: appliedShippingOptionIds,
11418
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11218
+ id: promoIds
11419
11219
  },
11420
11220
  {
11421
- enabled: appliedShippingOptionIds.length > 0
11221
+ enabled: !!promoIds.length
11422
11222
  }
11423
11223
  );
11424
- const uniqueShippingProfiles = useMemo(() => {
11425
- const profiles = /* @__PURE__ */ new Map();
11426
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11427
- profiles.set(profile.id, profile);
11428
- });
11429
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11430
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11431
- });
11432
- return Array.from(profiles.values());
11433
- }, [order.items, shipping_options]);
11434
- const { handleSuccess } = useRouteModal();
11435
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11436
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11437
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11438
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11439
- const onSubmit = async () => {
11440
- setIsSubmitting(true);
11441
- let requestSucceeded = false;
11442
- await requestOrderEdit(void 0, {
11443
- onError: (e) => {
11444
- toast.error(`Failed to request order edit: ${e.message}`);
11445
- },
11446
- onSuccess: () => {
11447
- requestSucceeded = true;
11448
- }
11449
- });
11450
- if (!requestSucceeded) {
11451
- setIsSubmitting(false);
11452
- return;
11453
- }
11454
- await confirmOrderEdit(void 0, {
11455
- onError: (e) => {
11456
- toast.error(`Failed to confirm order edit: ${e.message}`);
11457
- },
11458
- onSuccess: () => {
11459
- handleSuccess();
11460
- },
11461
- onSettled: () => {
11462
- setIsSubmitting(false);
11463
- }
11464
- });
11224
+ const comboboxData = useComboboxData({
11225
+ queryKey: ["promotions", "combobox", promoIds],
11226
+ queryFn: async (params) => {
11227
+ return await sdk.admin.promotion.list({
11228
+ ...params,
11229
+ id: {
11230
+ $nin: promoIds
11231
+ }
11232
+ });
11233
+ },
11234
+ getOptions: (data) => {
11235
+ return data.promotions.map((promotion) => ({
11236
+ label: promotion.code,
11237
+ value: promotion.code
11238
+ }));
11239
+ }
11240
+ });
11241
+ const add = async (value) => {
11242
+ if (!value) {
11243
+ return;
11244
+ }
11245
+ addPromotions(
11246
+ {
11247
+ promo_codes: [value]
11248
+ },
11249
+ {
11250
+ onError: (e) => {
11251
+ toast.error(e.message);
11252
+ comboboxData.onSearchValueChange("");
11253
+ setComboboxValue("");
11254
+ },
11255
+ onSuccess: () => {
11256
+ comboboxData.onSearchValueChange("");
11257
+ setComboboxValue("");
11258
+ }
11259
+ }
11260
+ );
11261
+ };
11262
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11263
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11264
+ const onSubmit = async () => {
11265
+ setIsSubmitting(true);
11266
+ let requestSucceeded = false;
11267
+ await requestOrderEdit(void 0, {
11268
+ onError: (e) => {
11269
+ toast.error(e.message);
11270
+ },
11271
+ onSuccess: () => {
11272
+ requestSucceeded = true;
11273
+ }
11274
+ });
11275
+ if (!requestSucceeded) {
11276
+ setIsSubmitting(false);
11277
+ return;
11278
+ }
11279
+ await confirmOrderEdit(void 0, {
11280
+ onError: (e) => {
11281
+ toast.error(e.message);
11282
+ },
11283
+ onSuccess: () => {
11284
+ handleSuccess();
11285
+ },
11286
+ onSettled: () => {
11287
+ setIsSubmitting(false);
11288
+ }
11289
+ });
11290
+ };
11291
+ if (isError) {
11292
+ throw error;
11293
+ }
11294
+ return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11295
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
11296
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
11297
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11298
+ /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11299
+ /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11300
+ ] }),
11301
+ /* @__PURE__ */ jsx(
11302
+ Combobox,
11303
+ {
11304
+ id: "promotion-combobox",
11305
+ "aria-describedby": "promotion-combobox-hint",
11306
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
11307
+ fetchNextPage: comboboxData.fetchNextPage,
11308
+ options: comboboxData.options,
11309
+ onSearchValueChange: comboboxData.onSearchValueChange,
11310
+ searchValue: comboboxData.searchValue,
11311
+ disabled: comboboxData.disabled || isAddingPromotions,
11312
+ onChange: add,
11313
+ value: comboboxValue
11314
+ }
11315
+ )
11316
+ ] }),
11317
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11318
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
11319
+ PromotionItem,
11320
+ {
11321
+ promotion,
11322
+ orderId: preview.id,
11323
+ isLoading: isPending
11324
+ },
11325
+ promotion.id
11326
+ )) })
11327
+ ] }) }),
11328
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11329
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11330
+ /* @__PURE__ */ jsx(
11331
+ Button,
11332
+ {
11333
+ size: "small",
11334
+ type: "submit",
11335
+ isLoading: isSubmitting || isAddingPromotions,
11336
+ children: "Save"
11337
+ }
11338
+ )
11339
+ ] }) })
11340
+ ] });
11341
+ };
11342
+ const PromotionItem = ({
11343
+ promotion,
11344
+ orderId,
11345
+ isLoading
11346
+ }) => {
11347
+ var _a;
11348
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11349
+ const onRemove = async () => {
11350
+ removePromotions(
11351
+ {
11352
+ promo_codes: [promotion.code]
11353
+ },
11354
+ {
11355
+ onError: (e) => {
11356
+ toast.error(e.message);
11357
+ }
11358
+ }
11359
+ );
11360
+ };
11361
+ const displayValue = getDisplayValue(promotion);
11362
+ return /* @__PURE__ */ jsxs(
11363
+ "div",
11364
+ {
11365
+ className: clx(
11366
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11367
+ {
11368
+ "animate-pulse": isLoading
11369
+ }
11370
+ ),
11371
+ children: [
11372
+ /* @__PURE__ */ jsxs("div", { children: [
11373
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11374
+ /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11375
+ displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
11376
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
11377
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
11378
+ ] }),
11379
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11380
+ ] })
11381
+ ] }),
11382
+ /* @__PURE__ */ jsx(
11383
+ IconButton,
11384
+ {
11385
+ size: "small",
11386
+ type: "button",
11387
+ variant: "transparent",
11388
+ onClick: onRemove,
11389
+ isLoading: isPending || isLoading,
11390
+ children: /* @__PURE__ */ jsx(XMark, {})
11391
+ }
11392
+ )
11393
+ ]
11394
+ },
11395
+ promotion.id
11396
+ );
11397
+ };
11398
+ function getDisplayValue(promotion) {
11399
+ var _a, _b, _c, _d;
11400
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11401
+ if (!value) {
11402
+ return null;
11403
+ }
11404
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11405
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11406
+ if (!currency) {
11407
+ return null;
11408
+ }
11409
+ return getLocaleAmount(value, currency);
11410
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11411
+ return formatPercentage(value);
11412
+ }
11413
+ return null;
11414
+ }
11415
+ const formatter = new Intl.NumberFormat([], {
11416
+ style: "percent",
11417
+ minimumFractionDigits: 2
11418
+ });
11419
+ const formatPercentage = (value, isPercentageValue = false) => {
11420
+ let val = value || 0;
11421
+ if (!isPercentageValue) {
11422
+ val = val / 100;
11423
+ }
11424
+ return formatter.format(val);
11425
+ };
11426
+ function getPromotionIds(items, shippingMethods) {
11427
+ const promotionIds = /* @__PURE__ */ new Set();
11428
+ for (const item of items) {
11429
+ if (item.adjustments) {
11430
+ for (const adjustment of item.adjustments) {
11431
+ if (adjustment.promotion_id) {
11432
+ promotionIds.add(adjustment.promotion_id);
11433
+ }
11434
+ }
11435
+ }
11436
+ }
11437
+ for (const shippingMethod of shippingMethods) {
11438
+ if (shippingMethod.adjustments) {
11439
+ for (const adjustment of shippingMethod.adjustments) {
11440
+ if (adjustment.promotion_id) {
11441
+ promotionIds.add(adjustment.promotion_id);
11442
+ }
11443
+ }
11444
+ }
11445
+ }
11446
+ return Array.from(promotionIds);
11447
+ }
11448
+ const SalesChannel = () => {
11449
+ const { id } = useParams();
11450
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11451
+ id,
11452
+ {
11453
+ fields: "+sales_channel_id"
11454
+ },
11455
+ {
11456
+ enabled: !!id
11457
+ }
11458
+ );
11459
+ if (isError) {
11460
+ throw error;
11461
+ }
11462
+ const ISrEADY = !!draft_order && !isPending;
11463
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11464
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11465
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11466
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11467
+ ] }),
11468
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11469
+ ] });
11470
+ };
11471
+ const SalesChannelForm = ({ order }) => {
11472
+ const form = useForm({
11473
+ defaultValues: {
11474
+ sales_channel_id: order.sales_channel_id || ""
11475
+ },
11476
+ resolver: zodResolver(schema$2)
11477
+ });
11478
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11479
+ const { handleSuccess } = useRouteModal();
11480
+ const onSubmit = form.handleSubmit(async (data) => {
11481
+ await mutateAsync(
11482
+ {
11483
+ sales_channel_id: data.sales_channel_id
11484
+ },
11485
+ {
11486
+ onSuccess: () => {
11487
+ toast.success("Sales channel updated");
11488
+ handleSuccess();
11489
+ },
11490
+ onError: (error) => {
11491
+ toast.error(error.message);
11492
+ }
11493
+ }
11494
+ );
11495
+ });
11496
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11497
+ KeyboundForm,
11498
+ {
11499
+ className: "flex flex-1 flex-col overflow-hidden",
11500
+ onSubmit,
11501
+ children: [
11502
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11503
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11504
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11505
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11506
+ ] }) })
11507
+ ]
11508
+ }
11509
+ ) });
11510
+ };
11511
+ const SalesChannelField = ({ control, order }) => {
11512
+ const salesChannels = useComboboxData({
11513
+ queryFn: async (params) => {
11514
+ return await sdk.admin.salesChannel.list(params);
11515
+ },
11516
+ queryKey: ["sales-channels"],
11517
+ getOptions: (data) => {
11518
+ return data.sales_channels.map((salesChannel) => ({
11519
+ label: salesChannel.name,
11520
+ value: salesChannel.id
11521
+ }));
11522
+ },
11523
+ defaultValue: order.sales_channel_id || void 0
11524
+ });
11525
+ return /* @__PURE__ */ jsx(
11526
+ Form$2.Field,
11527
+ {
11528
+ control,
11529
+ name: "sales_channel_id",
11530
+ render: ({ field }) => {
11531
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11532
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11533
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11534
+ Combobox,
11535
+ {
11536
+ options: salesChannels.options,
11537
+ fetchNextPage: salesChannels.fetchNextPage,
11538
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11539
+ searchValue: salesChannels.searchValue,
11540
+ onSearchValueChange: salesChannels.onSearchValueChange,
11541
+ placeholder: "Select sales channel",
11542
+ ...field
11543
+ }
11544
+ ) }),
11545
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11546
+ ] });
11547
+ }
11548
+ }
11549
+ );
11550
+ };
11551
+ const schema$2 = objectType({
11552
+ sales_channel_id: stringType().min(1)
11553
+ });
11554
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
11555
+ const Shipping = () => {
11556
+ var _a;
11557
+ const { id } = useParams();
11558
+ const { order, isPending, isError, error } = useOrder(id, {
11559
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11560
+ });
11561
+ const {
11562
+ order: preview,
11563
+ isPending: isPreviewPending,
11564
+ isError: isPreviewError,
11565
+ error: previewError
11566
+ } = useOrderPreview(id);
11567
+ useInitiateOrderEdit({ preview });
11568
+ const { onCancel } = useCancelOrderEdit({ preview });
11569
+ if (isError) {
11570
+ throw error;
11571
+ }
11572
+ if (isPreviewError) {
11573
+ throw previewError;
11574
+ }
11575
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11576
+ const isReady = preview && !isPreviewPending && order && !isPending;
11577
+ return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11578
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11579
+ /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11580
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11581
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11582
+ ] }) }) }),
11583
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11584
+ ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11585
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11586
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11587
+ ] }) });
11588
+ };
11589
+ const ShippingForm = ({ preview, order }) => {
11590
+ var _a;
11591
+ const { setIsOpen } = useStackedModal();
11592
+ const [isSubmitting, setIsSubmitting] = useState(false);
11593
+ const [data, setData] = useState(null);
11594
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11595
+ const { shipping_options } = useShippingOptions(
11596
+ {
11597
+ id: appliedShippingOptionIds,
11598
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11599
+ },
11600
+ {
11601
+ enabled: appliedShippingOptionIds.length > 0
11602
+ }
11603
+ );
11604
+ const uniqueShippingProfiles = useMemo(() => {
11605
+ const profiles = /* @__PURE__ */ new Map();
11606
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
11607
+ profiles.set(profile.id, profile);
11608
+ });
11609
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11610
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
11611
+ });
11612
+ return Array.from(profiles.values());
11613
+ }, [order.items, shipping_options]);
11614
+ const { handleSuccess } = useRouteModal();
11615
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11616
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11617
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11618
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11619
+ const onSubmit = async () => {
11620
+ setIsSubmitting(true);
11621
+ let requestSucceeded = false;
11622
+ await requestOrderEdit(void 0, {
11623
+ onError: (e) => {
11624
+ toast.error(`Failed to request order edit: ${e.message}`);
11625
+ },
11626
+ onSuccess: () => {
11627
+ requestSucceeded = true;
11628
+ }
11629
+ });
11630
+ if (!requestSucceeded) {
11631
+ setIsSubmitting(false);
11632
+ return;
11633
+ }
11634
+ await confirmOrderEdit(void 0, {
11635
+ onError: (e) => {
11636
+ toast.error(`Failed to confirm order edit: ${e.message}`);
11637
+ },
11638
+ onSuccess: () => {
11639
+ handleSuccess();
11640
+ },
11641
+ onSettled: () => {
11642
+ setIsSubmitting(false);
11643
+ }
11644
+ });
11465
11645
  };
11466
11646
  const onKeydown = useCallback(
11467
11647
  (e) => {
@@ -12141,426 +12321,246 @@ const ShippingOptionField = ({
12141
12321
  ...field,
12142
12322
  disabled: !locationId || !shippingProfileId
12143
12323
  }
12144
- ) }) })
12145
- }
12146
- )
12147
- ] }) });
12148
- }
12149
- }
12150
- );
12151
- };
12152
- const CustomAmountField = ({
12153
- control,
12154
- currencyCode
12155
- }) => {
12156
- return /* @__PURE__ */ jsx(
12157
- Form$2.Field,
12158
- {
12159
- control,
12160
- name: "custom_amount",
12161
- render: ({ field: { onChange, ...field } }) => {
12162
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12163
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12164
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12165
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12166
- ] }),
12167
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12168
- CurrencyInput,
12169
- {
12170
- ...field,
12171
- onValueChange: (value) => onChange(value),
12172
- symbol: getNativeSymbol(currencyCode),
12173
- code: currencyCode
12174
- }
12175
- ) })
12176
- ] });
12177
- }
12178
- }
12179
- );
12180
- };
12181
- const SalesChannel = () => {
12182
- const { id } = useParams();
12183
- const { draft_order, isPending, isError, error } = useDraftOrder(
12184
- id,
12185
- {
12186
- fields: "+sales_channel_id"
12187
- },
12188
- {
12189
- enabled: !!id
12190
- }
12191
- );
12192
- if (isError) {
12193
- throw error;
12194
- }
12195
- const ISrEADY = !!draft_order && !isPending;
12196
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12197
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12198
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
12199
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12200
- ] }),
12201
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
12202
- ] });
12203
- };
12204
- const SalesChannelForm = ({ order }) => {
12205
- const form = useForm({
12206
- defaultValues: {
12207
- sales_channel_id: order.sales_channel_id || ""
12208
- },
12209
- resolver: zodResolver(schema$1)
12210
- });
12211
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12212
- const { handleSuccess } = useRouteModal();
12213
- const onSubmit = form.handleSubmit(async (data) => {
12214
- await mutateAsync(
12215
- {
12216
- sales_channel_id: data.sales_channel_id
12217
- },
12218
- {
12219
- onSuccess: () => {
12220
- toast.success("Sales channel updated");
12221
- handleSuccess();
12222
- },
12223
- onError: (error) => {
12224
- toast.error(error.message);
12225
- }
12226
- }
12227
- );
12228
- });
12229
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12230
- KeyboundForm,
12231
- {
12232
- className: "flex flex-1 flex-col overflow-hidden",
12233
- onSubmit,
12234
- children: [
12235
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
12236
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12237
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12238
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12239
- ] }) })
12240
- ]
12241
- }
12242
- ) });
12243
- };
12244
- const SalesChannelField = ({ control, order }) => {
12245
- const salesChannels = useComboboxData({
12246
- queryFn: async (params) => {
12247
- return await sdk.admin.salesChannel.list(params);
12248
- },
12249
- queryKey: ["sales-channels"],
12250
- getOptions: (data) => {
12251
- return data.sales_channels.map((salesChannel) => ({
12252
- label: salesChannel.name,
12253
- value: salesChannel.id
12254
- }));
12255
- },
12256
- defaultValue: order.sales_channel_id || void 0
12257
- });
12324
+ ) }) })
12325
+ }
12326
+ )
12327
+ ] }) });
12328
+ }
12329
+ }
12330
+ );
12331
+ };
12332
+ const CustomAmountField = ({
12333
+ control,
12334
+ currencyCode
12335
+ }) => {
12258
12336
  return /* @__PURE__ */ jsx(
12259
12337
  Form$2.Field,
12260
12338
  {
12261
12339
  control,
12262
- name: "sales_channel_id",
12263
- render: ({ field }) => {
12264
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12265
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
12340
+ name: "custom_amount",
12341
+ render: ({ field: { onChange, ...field } }) => {
12342
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12343
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12344
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12345
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12346
+ ] }),
12266
12347
  /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12267
- Combobox,
12348
+ CurrencyInput,
12268
12349
  {
12269
- options: salesChannels.options,
12270
- fetchNextPage: salesChannels.fetchNextPage,
12271
- isFetchingNextPage: salesChannels.isFetchingNextPage,
12272
- searchValue: salesChannels.searchValue,
12273
- onSearchValueChange: salesChannels.onSearchValueChange,
12274
- placeholder: "Select sales channel",
12275
- ...field
12350
+ ...field,
12351
+ onValueChange: (value) => onChange(value),
12352
+ symbol: getNativeSymbol(currencyCode),
12353
+ code: currencyCode
12276
12354
  }
12277
- ) }),
12278
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12355
+ ) })
12279
12356
  ] });
12280
12357
  }
12281
12358
  }
12282
12359
  );
12283
12360
  };
12284
- const schema$1 = objectType({
12285
- sales_channel_id: stringType().min(1)
12286
- });
12287
- const PROMOTION_QUERY_KEY = "promotions";
12288
- const promotionsQueryKeys = {
12289
- list: (query2) => [
12290
- PROMOTION_QUERY_KEY,
12291
- query2 ? query2 : void 0
12292
- ],
12293
- detail: (id, query2) => [
12294
- PROMOTION_QUERY_KEY,
12295
- id,
12296
- query2 ? query2 : void 0
12297
- ]
12298
- };
12299
- const usePromotions = (query2, options) => {
12300
- const { data, ...rest } = useQuery({
12301
- queryKey: promotionsQueryKeys.list(query2),
12302
- queryFn: async () => sdk.admin.promotion.list(query2),
12303
- ...options
12304
- });
12305
- return { ...data, ...rest };
12306
- };
12307
- const Promotions = () => {
12361
+ const ShippingAddress = () => {
12308
12362
  const { id } = useParams();
12309
- const {
12310
- order: preview,
12311
- isError: isPreviewError,
12312
- error: previewError
12313
- } = useOrderPreview(id, void 0);
12314
- useInitiateOrderEdit({ preview });
12315
- const { onCancel } = useCancelOrderEdit({ preview });
12316
- if (isPreviewError) {
12317
- throw previewError;
12318
- }
12319
- const isReady = !!preview;
12320
- return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
12321
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
12322
- isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
12323
- ] });
12324
- };
12325
- const PromotionForm = ({ preview }) => {
12326
- const { items, shipping_methods } = preview;
12327
- const [isSubmitting, setIsSubmitting] = useState(false);
12328
- const [comboboxValue, setComboboxValue] = useState("");
12329
- const { handleSuccess } = useRouteModal();
12330
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
12331
- const promoIds = getPromotionIds(items, shipping_methods);
12332
- const { promotions, isPending, isError, error } = usePromotions(
12333
- {
12334
- id: promoIds
12335
- },
12336
- {
12337
- enabled: !!promoIds.length
12338
- }
12339
- );
12340
- const comboboxData = useComboboxData({
12341
- queryKey: ["promotions", "combobox", promoIds],
12342
- queryFn: async (params) => {
12343
- return await sdk.admin.promotion.list({
12344
- ...params,
12345
- id: {
12346
- $nin: promoIds
12347
- }
12348
- });
12349
- },
12350
- getOptions: (data) => {
12351
- return data.promotions.map((promotion) => ({
12352
- label: promotion.code,
12353
- value: promotion.code
12354
- }));
12355
- }
12363
+ const { order, isPending, isError, error } = useOrder(id, {
12364
+ fields: "+shipping_address"
12356
12365
  });
12357
- const add = async (value) => {
12358
- if (!value) {
12359
- return;
12360
- }
12361
- addPromotions(
12362
- {
12363
- promo_codes: [value]
12364
- },
12365
- {
12366
- onError: (e) => {
12367
- toast.error(e.message);
12368
- comboboxData.onSearchValueChange("");
12369
- setComboboxValue("");
12370
- },
12371
- onSuccess: () => {
12372
- comboboxData.onSearchValueChange("");
12373
- setComboboxValue("");
12374
- }
12375
- }
12376
- );
12377
- };
12378
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12379
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
12380
- const onSubmit = async () => {
12381
- setIsSubmitting(true);
12382
- let requestSucceeded = false;
12383
- await requestOrderEdit(void 0, {
12384
- onError: (e) => {
12385
- toast.error(e.message);
12386
- },
12387
- onSuccess: () => {
12388
- requestSucceeded = true;
12389
- }
12390
- });
12391
- if (!requestSucceeded) {
12392
- setIsSubmitting(false);
12393
- return;
12394
- }
12395
- await confirmOrderEdit(void 0, {
12396
- onError: (e) => {
12397
- toast.error(e.message);
12398
- },
12399
- onSuccess: () => {
12400
- handleSuccess();
12401
- },
12402
- onSettled: () => {
12403
- setIsSubmitting(false);
12404
- }
12405
- });
12406
- };
12407
12366
  if (isError) {
12408
12367
  throw error;
12409
12368
  }
12410
- return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
12411
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
12412
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
12413
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12414
- /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
12415
- /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
12416
- ] }),
12417
- /* @__PURE__ */ jsx(
12418
- Combobox,
12419
- {
12420
- id: "promotion-combobox",
12421
- "aria-describedby": "promotion-combobox-hint",
12422
- isFetchingNextPage: comboboxData.isFetchingNextPage,
12423
- fetchNextPage: comboboxData.fetchNextPage,
12424
- options: comboboxData.options,
12425
- onSearchValueChange: comboboxData.onSearchValueChange,
12426
- searchValue: comboboxData.searchValue,
12427
- disabled: comboboxData.disabled || isAddingPromotions,
12428
- onChange: add,
12429
- value: comboboxValue
12430
- }
12431
- )
12432
- ] }),
12433
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12434
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
12435
- PromotionItem,
12436
- {
12437
- promotion,
12438
- orderId: preview.id,
12439
- isLoading: isPending
12440
- },
12441
- promotion.id
12442
- )) })
12443
- ] }) }),
12444
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12445
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12446
- /* @__PURE__ */ jsx(
12447
- Button,
12448
- {
12449
- size: "small",
12450
- type: "submit",
12451
- isLoading: isSubmitting || isAddingPromotions,
12452
- children: "Save"
12453
- }
12454
- )
12455
- ] }) })
12369
+ const isReady = !isPending && !!order;
12370
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12371
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12372
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12373
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12374
+ ] }),
12375
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12456
12376
  ] });
12457
12377
  };
12458
- const PromotionItem = ({
12459
- promotion,
12460
- orderId,
12461
- isLoading
12462
- }) => {
12463
- var _a;
12464
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
12465
- const onRemove = async () => {
12466
- removePromotions(
12378
+ const ShippingAddressForm = ({ order }) => {
12379
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12380
+ const form = useForm({
12381
+ defaultValues: {
12382
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12383
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12384
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12385
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12386
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12387
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12388
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12389
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12390
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12391
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12392
+ },
12393
+ resolver: zodResolver(schema$1)
12394
+ });
12395
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12396
+ const { handleSuccess } = useRouteModal();
12397
+ const onSubmit = form.handleSubmit(async (data) => {
12398
+ await mutateAsync(
12467
12399
  {
12468
- promo_codes: [promotion.code]
12400
+ shipping_address: {
12401
+ first_name: data.first_name,
12402
+ last_name: data.last_name,
12403
+ company: data.company,
12404
+ address_1: data.address_1,
12405
+ address_2: data.address_2,
12406
+ city: data.city,
12407
+ province: data.province,
12408
+ country_code: data.country_code,
12409
+ postal_code: data.postal_code,
12410
+ phone: data.phone
12411
+ }
12469
12412
  },
12470
12413
  {
12471
- onError: (e) => {
12472
- toast.error(e.message);
12414
+ onSuccess: () => {
12415
+ handleSuccess();
12416
+ },
12417
+ onError: (error) => {
12418
+ toast.error(error.message);
12473
12419
  }
12474
12420
  }
12475
12421
  );
12476
- };
12477
- const displayValue = getDisplayValue(promotion);
12478
- return /* @__PURE__ */ jsxs(
12479
- "div",
12422
+ });
12423
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12424
+ KeyboundForm,
12480
12425
  {
12481
- className: clx(
12482
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
12483
- {
12484
- "animate-pulse": isLoading
12485
- }
12486
- ),
12426
+ className: "flex flex-1 flex-col overflow-hidden",
12427
+ onSubmit,
12487
12428
  children: [
12488
- /* @__PURE__ */ jsxs("div", { children: [
12489
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
12490
- /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
12491
- displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
12492
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
12493
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
12494
- ] }),
12495
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
12496
- ] })
12497
- ] }),
12498
- /* @__PURE__ */ jsx(
12499
- IconButton,
12500
- {
12501
- size: "small",
12502
- type: "button",
12503
- variant: "transparent",
12504
- onClick: onRemove,
12505
- isLoading: isPending || isLoading,
12506
- children: /* @__PURE__ */ jsx(XMark, {})
12507
- }
12508
- )
12429
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12430
+ /* @__PURE__ */ jsx(
12431
+ Form$2.Field,
12432
+ {
12433
+ control: form.control,
12434
+ name: "country_code",
12435
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12436
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12437
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12438
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12439
+ ] })
12440
+ }
12441
+ ),
12442
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12443
+ /* @__PURE__ */ jsx(
12444
+ Form$2.Field,
12445
+ {
12446
+ control: form.control,
12447
+ name: "first_name",
12448
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12449
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12450
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12451
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12452
+ ] })
12453
+ }
12454
+ ),
12455
+ /* @__PURE__ */ jsx(
12456
+ Form$2.Field,
12457
+ {
12458
+ control: form.control,
12459
+ name: "last_name",
12460
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12461
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12462
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12463
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12464
+ ] })
12465
+ }
12466
+ )
12467
+ ] }),
12468
+ /* @__PURE__ */ jsx(
12469
+ Form$2.Field,
12470
+ {
12471
+ control: form.control,
12472
+ name: "company",
12473
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12474
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12475
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12476
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12477
+ ] })
12478
+ }
12479
+ ),
12480
+ /* @__PURE__ */ jsx(
12481
+ Form$2.Field,
12482
+ {
12483
+ control: form.control,
12484
+ name: "address_1",
12485
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12486
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12487
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12488
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12489
+ ] })
12490
+ }
12491
+ ),
12492
+ /* @__PURE__ */ jsx(
12493
+ Form$2.Field,
12494
+ {
12495
+ control: form.control,
12496
+ name: "address_2",
12497
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12498
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12499
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12500
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12501
+ ] })
12502
+ }
12503
+ ),
12504
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12505
+ /* @__PURE__ */ jsx(
12506
+ Form$2.Field,
12507
+ {
12508
+ control: form.control,
12509
+ name: "postal_code",
12510
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12511
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12512
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12513
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12514
+ ] })
12515
+ }
12516
+ ),
12517
+ /* @__PURE__ */ jsx(
12518
+ Form$2.Field,
12519
+ {
12520
+ control: form.control,
12521
+ name: "city",
12522
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12523
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12524
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12525
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12526
+ ] })
12527
+ }
12528
+ )
12529
+ ] }),
12530
+ /* @__PURE__ */ jsx(
12531
+ Form$2.Field,
12532
+ {
12533
+ control: form.control,
12534
+ name: "province",
12535
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12536
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12537
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12538
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12539
+ ] })
12540
+ }
12541
+ ),
12542
+ /* @__PURE__ */ jsx(
12543
+ Form$2.Field,
12544
+ {
12545
+ control: form.control,
12546
+ name: "phone",
12547
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12548
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12549
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12550
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12551
+ ] })
12552
+ }
12553
+ )
12554
+ ] }) }),
12555
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12556
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12557
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12558
+ ] }) })
12509
12559
  ]
12510
- },
12511
- promotion.id
12512
- );
12513
- };
12514
- function getDisplayValue(promotion) {
12515
- var _a, _b, _c, _d;
12516
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
12517
- if (!value) {
12518
- return null;
12519
- }
12520
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
12521
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
12522
- if (!currency) {
12523
- return null;
12524
12560
  }
12525
- return getLocaleAmount(value, currency);
12526
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
12527
- return formatPercentage(value);
12528
- }
12529
- return null;
12530
- }
12531
- const formatter = new Intl.NumberFormat([], {
12532
- style: "percent",
12533
- minimumFractionDigits: 2
12534
- });
12535
- const formatPercentage = (value, isPercentageValue = false) => {
12536
- let val = value || 0;
12537
- if (!isPercentageValue) {
12538
- val = val / 100;
12539
- }
12540
- return formatter.format(val);
12561
+ ) });
12541
12562
  };
12542
- function getPromotionIds(items, shippingMethods) {
12543
- const promotionIds = /* @__PURE__ */ new Set();
12544
- for (const item of items) {
12545
- if (item.adjustments) {
12546
- for (const adjustment of item.adjustments) {
12547
- if (adjustment.promotion_id) {
12548
- promotionIds.add(adjustment.promotion_id);
12549
- }
12550
- }
12551
- }
12552
- }
12553
- for (const shippingMethod of shippingMethods) {
12554
- if (shippingMethod.adjustments) {
12555
- for (const adjustment of shippingMethod.adjustments) {
12556
- if (adjustment.promotion_id) {
12557
- promotionIds.add(adjustment.promotion_id);
12558
- }
12559
- }
12560
- }
12561
- }
12562
- return Array.from(promotionIds);
12563
- }
12563
+ const schema$1 = addressSchema;
12564
12564
  const TransferOwnership = () => {
12565
12565
  const { id } = useParams();
12566
12566
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -13058,40 +13058,40 @@ const routeModule = {
13058
13058
  loader,
13059
13059
  children: [
13060
13060
  {
13061
- Component: Email,
13062
- path: "/draft-orders/:id/email"
13061
+ Component: BillingAddress,
13062
+ path: "/draft-orders/:id/billing-address"
13063
13063
  },
13064
13064
  {
13065
13065
  Component: CustomItems,
13066
13066
  path: "/draft-orders/:id/custom-items"
13067
13067
  },
13068
13068
  {
13069
- Component: BillingAddress,
13070
- path: "/draft-orders/:id/billing-address"
13071
- },
13072
- {
13073
- Component: Metadata,
13074
- path: "/draft-orders/:id/metadata"
13069
+ Component: Email,
13070
+ path: "/draft-orders/:id/email"
13075
13071
  },
13076
13072
  {
13077
13073
  Component: Items,
13078
13074
  path: "/draft-orders/:id/items"
13079
13075
  },
13080
13076
  {
13081
- Component: ShippingAddress,
13082
- path: "/draft-orders/:id/shipping-address"
13077
+ Component: Metadata,
13078
+ path: "/draft-orders/:id/metadata"
13083
13079
  },
13084
13080
  {
13085
- Component: Shipping,
13086
- path: "/draft-orders/:id/shipping"
13081
+ Component: Promotions,
13082
+ path: "/draft-orders/:id/promotions"
13087
13083
  },
13088
13084
  {
13089
13085
  Component: SalesChannel,
13090
13086
  path: "/draft-orders/:id/sales-channel"
13091
13087
  },
13092
13088
  {
13093
- Component: Promotions,
13094
- path: "/draft-orders/:id/promotions"
13089
+ Component: Shipping,
13090
+ path: "/draft-orders/:id/shipping"
13091
+ },
13092
+ {
13093
+ Component: ShippingAddress,
13094
+ path: "/draft-orders/:id/shipping-address"
13095
13095
  },
13096
13096
  {
13097
13097
  Component: TransferOwnership,