@medusajs/draft-order 2.10.0-snapshot-20250828074017 → 2.10.0-snapshot-20250828112236

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