@medusajs/draft-order 2.10.4-preview-20251005090149 → 2.10.4-preview-20251005150154

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