@medusajs/draft-order 2.11.4-preview-20251114150139 → 2.11.4-preview-20251114210130

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.
@@ -9572,95 +9572,6 @@ const ID = () => {
9572
9572
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9573
9573
  ] });
9574
9574
  };
9575
- const CustomItems = () => {
9576
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9577
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9578
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9579
- ] });
9580
- };
9581
- const CustomItemsForm = () => {
9582
- const form = reactHookForm.useForm({
9583
- resolver: zod.zodResolver(schema$5)
9584
- });
9585
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9586
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9587
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9588
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9589
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9590
- ] }) })
9591
- ] }) });
9592
- };
9593
- const schema$5 = objectType({
9594
- email: stringType().email()
9595
- });
9596
- const Email = () => {
9597
- const { id } = reactRouterDom.useParams();
9598
- const { order, isPending, isError, error } = useOrder(id, {
9599
- fields: "+email"
9600
- });
9601
- if (isError) {
9602
- throw error;
9603
- }
9604
- const isReady = !isPending && !!order;
9605
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9606
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9607
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9608
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9609
- ] }),
9610
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9611
- ] });
9612
- };
9613
- const EmailForm = ({ order }) => {
9614
- const form = reactHookForm.useForm({
9615
- defaultValues: {
9616
- email: order.email ?? ""
9617
- },
9618
- resolver: zod.zodResolver(schema$4)
9619
- });
9620
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9621
- const { handleSuccess } = useRouteModal();
9622
- const onSubmit = form.handleSubmit(async (data) => {
9623
- await mutateAsync(
9624
- { email: data.email },
9625
- {
9626
- onSuccess: () => {
9627
- handleSuccess();
9628
- },
9629
- onError: (error) => {
9630
- ui.toast.error(error.message);
9631
- }
9632
- }
9633
- );
9634
- });
9635
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9636
- KeyboundForm,
9637
- {
9638
- className: "flex flex-1 flex-col overflow-hidden",
9639
- onSubmit,
9640
- children: [
9641
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9642
- Form$2.Field,
9643
- {
9644
- control: form.control,
9645
- name: "email",
9646
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9647
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9648
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9649
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9650
- ] })
9651
- }
9652
- ) }),
9653
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9654
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9655
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9656
- ] }) })
9657
- ]
9658
- }
9659
- ) });
9660
- };
9661
- const schema$4 = objectType({
9662
- email: stringType().email()
9663
- });
9664
9575
  const BillingAddress = () => {
9665
9576
  const { id } = reactRouterDom.useParams();
9666
9577
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9693,7 +9604,7 @@ const BillingAddressForm = ({ order }) => {
9693
9604
  postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9694
9605
  phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9695
9606
  },
9696
- resolver: zod.zodResolver(schema$3)
9607
+ resolver: zod.zodResolver(schema$5)
9697
9608
  });
9698
9609
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9699
9610
  const { handleSuccess } = useRouteModal();
@@ -9850,7 +9761,96 @@ const BillingAddressForm = ({ order }) => {
9850
9761
  }
9851
9762
  ) });
9852
9763
  };
9853
- const schema$3 = addressSchema;
9764
+ const schema$5 = addressSchema;
9765
+ const CustomItems = () => {
9766
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9767
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
9768
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
9769
+ ] });
9770
+ };
9771
+ const CustomItemsForm = () => {
9772
+ const form = reactHookForm.useForm({
9773
+ resolver: zod.zodResolver(schema$4)
9774
+ });
9775
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9776
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
9777
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9778
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9779
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
9780
+ ] }) })
9781
+ ] }) });
9782
+ };
9783
+ const schema$4 = objectType({
9784
+ email: stringType().email()
9785
+ });
9786
+ const Email = () => {
9787
+ const { id } = reactRouterDom.useParams();
9788
+ const { order, isPending, isError, error } = useOrder(id, {
9789
+ fields: "+email"
9790
+ });
9791
+ if (isError) {
9792
+ throw error;
9793
+ }
9794
+ const isReady = !isPending && !!order;
9795
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9796
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9797
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9798
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9799
+ ] }),
9800
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9801
+ ] });
9802
+ };
9803
+ const EmailForm = ({ order }) => {
9804
+ const form = reactHookForm.useForm({
9805
+ defaultValues: {
9806
+ email: order.email ?? ""
9807
+ },
9808
+ resolver: zod.zodResolver(schema$3)
9809
+ });
9810
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9811
+ const { handleSuccess } = useRouteModal();
9812
+ const onSubmit = form.handleSubmit(async (data) => {
9813
+ await mutateAsync(
9814
+ { email: data.email },
9815
+ {
9816
+ onSuccess: () => {
9817
+ handleSuccess();
9818
+ },
9819
+ onError: (error) => {
9820
+ ui.toast.error(error.message);
9821
+ }
9822
+ }
9823
+ );
9824
+ });
9825
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9826
+ KeyboundForm,
9827
+ {
9828
+ className: "flex flex-1 flex-col overflow-hidden",
9829
+ onSubmit,
9830
+ children: [
9831
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9832
+ Form$2.Field,
9833
+ {
9834
+ control: form.control,
9835
+ name: "email",
9836
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9837
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9838
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9839
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9840
+ ] })
9841
+ }
9842
+ ) }),
9843
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9844
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9845
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9846
+ ] }) })
9847
+ ]
9848
+ }
9849
+ ) });
9850
+ };
9851
+ const schema$3 = objectType({
9852
+ email: stringType().email()
9853
+ });
9854
9854
  const NumberInput = React.forwardRef(
9855
9855
  ({
9856
9856
  value,
@@ -10825,511 +10825,128 @@ const customItemSchema = objectType({
10825
10825
  quantity: numberType(),
10826
10826
  unit_price: unionType([numberType(), stringType()])
10827
10827
  });
10828
- const PROMOTION_QUERY_KEY = "promotions";
10829
- const promotionsQueryKeys = {
10830
- list: (query2) => [
10831
- PROMOTION_QUERY_KEY,
10832
- query2 ? query2 : void 0
10833
- ],
10834
- detail: (id, query2) => [
10835
- PROMOTION_QUERY_KEY,
10836
- id,
10837
- query2 ? query2 : void 0
10838
- ]
10839
- };
10840
- const usePromotions = (query2, options) => {
10841
- const { data, ...rest } = reactQuery.useQuery({
10842
- queryKey: promotionsQueryKeys.list(query2),
10843
- queryFn: async () => sdk.admin.promotion.list(query2),
10844
- ...options
10828
+ const InlineTip = React.forwardRef(
10829
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10830
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10831
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10832
+ "div",
10833
+ {
10834
+ ref,
10835
+ className: ui.clx(
10836
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10837
+ className
10838
+ ),
10839
+ ...props,
10840
+ children: [
10841
+ /* @__PURE__ */ jsxRuntime.jsx(
10842
+ "div",
10843
+ {
10844
+ role: "presentation",
10845
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10846
+ "bg-ui-tag-orange-icon": variant === "warning"
10847
+ })
10848
+ }
10849
+ ),
10850
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10851
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10852
+ labelValue,
10853
+ ":"
10854
+ ] }),
10855
+ " ",
10856
+ children
10857
+ ] })
10858
+ ]
10859
+ }
10860
+ );
10861
+ }
10862
+ );
10863
+ InlineTip.displayName = "InlineTip";
10864
+ const MetadataFieldSchema = objectType({
10865
+ key: stringType(),
10866
+ disabled: booleanType().optional(),
10867
+ value: anyType()
10868
+ });
10869
+ const MetadataSchema = objectType({
10870
+ metadata: arrayType(MetadataFieldSchema)
10871
+ });
10872
+ const Metadata = () => {
10873
+ const { id } = reactRouterDom.useParams();
10874
+ const { order, isPending, isError, error } = useOrder(id, {
10875
+ fields: "metadata"
10845
10876
  });
10846
- return { ...data, ...rest };
10877
+ if (isError) {
10878
+ throw error;
10879
+ }
10880
+ const isReady = !isPending && !!order;
10881
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10882
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10883
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10884
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10885
+ ] }),
10886
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10887
+ ] });
10847
10888
  };
10848
- const Promotions = () => {
10849
- const { id } = reactRouterDom.useParams();
10850
- const {
10851
- order: preview,
10852
- isError: isPreviewError,
10853
- error: previewError
10854
- } = useOrderPreview(id, void 0);
10855
- useInitiateOrderEdit({ preview });
10856
- const { onCancel } = useCancelOrderEdit({ preview });
10857
- if (isPreviewError) {
10858
- throw previewError;
10859
- }
10860
- const isReady = !!preview;
10861
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
10862
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
10863
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
10864
- ] });
10865
- };
10866
- const PromotionForm = ({ preview }) => {
10867
- const { items, shipping_methods } = preview;
10868
- const [isSubmitting, setIsSubmitting] = React.useState(false);
10869
- const [comboboxValue, setComboboxValue] = React.useState("");
10889
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10890
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10891
+ const MetadataForm = ({ orderId, metadata }) => {
10870
10892
  const { handleSuccess } = useRouteModal();
10871
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10872
- const promoIds = getPromotionIds(items, shipping_methods);
10873
- const { promotions, isPending, isError, error } = usePromotions(
10874
- {
10875
- id: promoIds
10876
- },
10877
- {
10878
- enabled: !!promoIds.length
10879
- }
10880
- );
10881
- const comboboxData = useComboboxData({
10882
- queryKey: ["promotions", "combobox", promoIds],
10883
- queryFn: async (params) => {
10884
- return await sdk.admin.promotion.list({
10885
- ...params,
10886
- id: {
10887
- $nin: promoIds
10888
- }
10889
- });
10893
+ const hasUneditableRows = getHasUneditableRows(metadata);
10894
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10895
+ const form = reactHookForm.useForm({
10896
+ defaultValues: {
10897
+ metadata: getDefaultValues(metadata)
10890
10898
  },
10891
- getOptions: (data) => {
10892
- return data.promotions.map((promotion) => ({
10893
- label: promotion.code,
10894
- value: promotion.code
10895
- }));
10896
- }
10899
+ resolver: zod.zodResolver(MetadataSchema)
10897
10900
  });
10898
- const add = async (value) => {
10899
- if (!value) {
10900
- return;
10901
- }
10902
- addPromotions(
10901
+ const handleSubmit = form.handleSubmit(async (data) => {
10902
+ const parsedData = parseValues(data);
10903
+ await mutateAsync(
10903
10904
  {
10904
- promo_codes: [value]
10905
+ metadata: parsedData
10905
10906
  },
10906
10907
  {
10907
- onError: (e) => {
10908
- ui.toast.error(e.message);
10909
- comboboxData.onSearchValueChange("");
10910
- setComboboxValue("");
10911
- },
10912
10908
  onSuccess: () => {
10913
- comboboxData.onSearchValueChange("");
10914
- setComboboxValue("");
10909
+ ui.toast.success("Metadata updated");
10910
+ handleSuccess();
10911
+ },
10912
+ onError: (error) => {
10913
+ ui.toast.error(error.message);
10915
10914
  }
10916
10915
  }
10917
10916
  );
10918
- };
10919
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10920
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10921
- const onSubmit = async () => {
10922
- setIsSubmitting(true);
10923
- let requestSucceeded = false;
10924
- await requestOrderEdit(void 0, {
10925
- onError: (e) => {
10926
- ui.toast.error(e.message);
10927
- },
10928
- onSuccess: () => {
10929
- requestSucceeded = true;
10930
- }
10931
- });
10932
- if (!requestSucceeded) {
10933
- setIsSubmitting(false);
10934
- return;
10917
+ });
10918
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
10919
+ control: form.control,
10920
+ name: "metadata"
10921
+ });
10922
+ function deleteRow(index) {
10923
+ remove(index);
10924
+ if (fields.length === 1) {
10925
+ insert(0, {
10926
+ key: "",
10927
+ value: "",
10928
+ disabled: false
10929
+ });
10935
10930
  }
10936
- await confirmOrderEdit(void 0, {
10937
- onError: (e) => {
10938
- ui.toast.error(e.message);
10939
- },
10940
- onSuccess: () => {
10941
- handleSuccess();
10942
- },
10943
- onSettled: () => {
10944
- setIsSubmitting(false);
10945
- }
10931
+ }
10932
+ function insertRow(index, position) {
10933
+ insert(index + (position === "above" ? 0 : 1), {
10934
+ key: "",
10935
+ value: "",
10936
+ disabled: false
10946
10937
  });
10947
- };
10948
- if (isError) {
10949
- throw error;
10950
10938
  }
10951
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
10952
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
10953
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
10954
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
10955
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
10956
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
10957
- ] }),
10958
- /* @__PURE__ */ jsxRuntime.jsx(
10959
- Combobox,
10960
- {
10961
- id: "promotion-combobox",
10962
- "aria-describedby": "promotion-combobox-hint",
10963
- isFetchingNextPage: comboboxData.isFetchingNextPage,
10964
- fetchNextPage: comboboxData.fetchNextPage,
10965
- options: comboboxData.options,
10966
- onSearchValueChange: comboboxData.onSearchValueChange,
10967
- searchValue: comboboxData.searchValue,
10968
- disabled: comboboxData.disabled || isAddingPromotions,
10969
- onChange: add,
10970
- value: comboboxValue
10971
- }
10972
- )
10973
- ] }),
10974
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10975
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
10976
- PromotionItem,
10977
- {
10978
- promotion,
10979
- orderId: preview.id,
10980
- isLoading: isPending
10981
- },
10982
- promotion.id
10983
- )) })
10984
- ] }) }),
10985
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10986
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10987
- /* @__PURE__ */ jsxRuntime.jsx(
10988
- ui.Button,
10989
- {
10990
- size: "small",
10991
- type: "submit",
10992
- isLoading: isSubmitting || isAddingPromotions,
10993
- children: "Save"
10994
- }
10995
- )
10996
- ] }) })
10997
- ] });
10998
- };
10999
- const PromotionItem = ({
11000
- promotion,
11001
- orderId,
11002
- isLoading
11003
- }) => {
11004
- var _a;
11005
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11006
- const onRemove = async () => {
11007
- removePromotions(
11008
- {
11009
- promo_codes: [promotion.code]
11010
- },
11011
- {
11012
- onError: (e) => {
11013
- ui.toast.error(e.message);
11014
- }
11015
- }
11016
- );
11017
- };
11018
- const displayValue = getDisplayValue(promotion);
11019
- return /* @__PURE__ */ jsxRuntime.jsxs(
11020
- "div",
10939
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10940
+ KeyboundForm,
11021
10941
  {
11022
- className: ui.clx(
11023
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11024
- {
11025
- "animate-pulse": isLoading
11026
- }
11027
- ),
10942
+ onSubmit: handleSubmit,
10943
+ className: "flex flex-1 flex-col overflow-hidden",
11028
10944
  children: [
11029
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11030
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11031
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11032
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11033
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11034
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11035
- ] }),
11036
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11037
- ] })
11038
- ] }),
11039
- /* @__PURE__ */ jsxRuntime.jsx(
11040
- ui.IconButton,
11041
- {
11042
- size: "small",
11043
- type: "button",
11044
- variant: "transparent",
11045
- onClick: onRemove,
11046
- isLoading: isPending || isLoading,
11047
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
11048
- }
11049
- )
11050
- ]
11051
- },
11052
- promotion.id
11053
- );
11054
- };
11055
- function getDisplayValue(promotion) {
11056
- var _a, _b, _c, _d;
11057
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11058
- if (!value) {
11059
- return null;
11060
- }
11061
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11062
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11063
- if (!currency) {
11064
- return null;
11065
- }
11066
- return getLocaleAmount(value, currency);
11067
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11068
- return formatPercentage(value);
11069
- }
11070
- return null;
11071
- }
11072
- const formatter = new Intl.NumberFormat([], {
11073
- style: "percent",
11074
- minimumFractionDigits: 2
11075
- });
11076
- const formatPercentage = (value, isPercentageValue = false) => {
11077
- let val = value || 0;
11078
- if (!isPercentageValue) {
11079
- val = val / 100;
11080
- }
11081
- return formatter.format(val);
11082
- };
11083
- function getPromotionIds(items, shippingMethods) {
11084
- const promotionIds = /* @__PURE__ */ new Set();
11085
- for (const item of items) {
11086
- if (item.adjustments) {
11087
- for (const adjustment of item.adjustments) {
11088
- if (adjustment.promotion_id) {
11089
- promotionIds.add(adjustment.promotion_id);
11090
- }
11091
- }
11092
- }
11093
- }
11094
- for (const shippingMethod of shippingMethods) {
11095
- if (shippingMethod.adjustments) {
11096
- for (const adjustment of shippingMethod.adjustments) {
11097
- if (adjustment.promotion_id) {
11098
- promotionIds.add(adjustment.promotion_id);
11099
- }
11100
- }
11101
- }
11102
- }
11103
- return Array.from(promotionIds);
11104
- }
11105
- const SalesChannel = () => {
11106
- const { id } = reactRouterDom.useParams();
11107
- const { draft_order, isPending, isError, error } = useDraftOrder(
11108
- id,
11109
- {
11110
- fields: "+sales_channel_id"
11111
- },
11112
- {
11113
- enabled: !!id
11114
- }
11115
- );
11116
- if (isError) {
11117
- throw error;
11118
- }
11119
- const ISrEADY = !!draft_order && !isPending;
11120
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11121
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11122
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11123
- /* @__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" }) })
11124
- ] }),
11125
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11126
- ] });
11127
- };
11128
- const SalesChannelForm = ({ order }) => {
11129
- const form = reactHookForm.useForm({
11130
- defaultValues: {
11131
- sales_channel_id: order.sales_channel_id || ""
11132
- },
11133
- resolver: zod.zodResolver(schema$2)
11134
- });
11135
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11136
- const { handleSuccess } = useRouteModal();
11137
- const onSubmit = form.handleSubmit(async (data) => {
11138
- await mutateAsync(
11139
- {
11140
- sales_channel_id: data.sales_channel_id
11141
- },
11142
- {
11143
- onSuccess: () => {
11144
- ui.toast.success("Sales channel updated");
11145
- handleSuccess();
11146
- },
11147
- onError: (error) => {
11148
- ui.toast.error(error.message);
11149
- }
11150
- }
11151
- );
11152
- });
11153
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11154
- KeyboundForm,
11155
- {
11156
- className: "flex flex-1 flex-col overflow-hidden",
11157
- onSubmit,
11158
- children: [
11159
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11160
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11161
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11162
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11163
- ] }) })
11164
- ]
11165
- }
11166
- ) });
11167
- };
11168
- const SalesChannelField = ({ control, order }) => {
11169
- const salesChannels = useComboboxData({
11170
- queryFn: async (params) => {
11171
- return await sdk.admin.salesChannel.list(params);
11172
- },
11173
- queryKey: ["sales-channels"],
11174
- getOptions: (data) => {
11175
- return data.sales_channels.map((salesChannel) => ({
11176
- label: salesChannel.name,
11177
- value: salesChannel.id
11178
- }));
11179
- },
11180
- defaultValue: order.sales_channel_id || void 0
11181
- });
11182
- return /* @__PURE__ */ jsxRuntime.jsx(
11183
- Form$2.Field,
11184
- {
11185
- control,
11186
- name: "sales_channel_id",
11187
- render: ({ field }) => {
11188
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11189
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11190
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11191
- Combobox,
11192
- {
11193
- options: salesChannels.options,
11194
- fetchNextPage: salesChannels.fetchNextPage,
11195
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11196
- searchValue: salesChannels.searchValue,
11197
- onSearchValueChange: salesChannels.onSearchValueChange,
11198
- placeholder: "Select sales channel",
11199
- ...field
11200
- }
11201
- ) }),
11202
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11203
- ] });
11204
- }
11205
- }
11206
- );
11207
- };
11208
- const schema$2 = objectType({
11209
- sales_channel_id: stringType().min(1)
11210
- });
11211
- const InlineTip = React.forwardRef(
11212
- ({ variant = "tip", label, className, children, ...props }, ref) => {
11213
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
11214
- return /* @__PURE__ */ jsxRuntime.jsxs(
11215
- "div",
11216
- {
11217
- ref,
11218
- className: ui.clx(
11219
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
11220
- className
11221
- ),
11222
- ...props,
11223
- children: [
11224
- /* @__PURE__ */ jsxRuntime.jsx(
11225
- "div",
11226
- {
11227
- role: "presentation",
11228
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
11229
- "bg-ui-tag-orange-icon": variant === "warning"
11230
- })
11231
- }
11232
- ),
11233
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
11234
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
11235
- labelValue,
11236
- ":"
11237
- ] }),
11238
- " ",
11239
- children
11240
- ] })
11241
- ]
11242
- }
11243
- );
11244
- }
11245
- );
11246
- InlineTip.displayName = "InlineTip";
11247
- const MetadataFieldSchema = objectType({
11248
- key: stringType(),
11249
- disabled: booleanType().optional(),
11250
- value: anyType()
11251
- });
11252
- const MetadataSchema = objectType({
11253
- metadata: arrayType(MetadataFieldSchema)
11254
- });
11255
- const Metadata = () => {
11256
- const { id } = reactRouterDom.useParams();
11257
- const { order, isPending, isError, error } = useOrder(id, {
11258
- fields: "metadata"
11259
- });
11260
- if (isError) {
11261
- throw error;
11262
- }
11263
- const isReady = !isPending && !!order;
11264
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11265
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11266
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
11267
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
11268
- ] }),
11269
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
11270
- ] });
11271
- };
11272
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
11273
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
11274
- const MetadataForm = ({ orderId, metadata }) => {
11275
- const { handleSuccess } = useRouteModal();
11276
- const hasUneditableRows = getHasUneditableRows(metadata);
11277
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
11278
- const form = reactHookForm.useForm({
11279
- defaultValues: {
11280
- metadata: getDefaultValues(metadata)
11281
- },
11282
- resolver: zod.zodResolver(MetadataSchema)
11283
- });
11284
- const handleSubmit = form.handleSubmit(async (data) => {
11285
- const parsedData = parseValues(data);
11286
- await mutateAsync(
11287
- {
11288
- metadata: parsedData
11289
- },
11290
- {
11291
- onSuccess: () => {
11292
- ui.toast.success("Metadata updated");
11293
- handleSuccess();
11294
- },
11295
- onError: (error) => {
11296
- ui.toast.error(error.message);
11297
- }
11298
- }
11299
- );
11300
- });
11301
- const { fields, insert, remove } = reactHookForm.useFieldArray({
11302
- control: form.control,
11303
- name: "metadata"
11304
- });
11305
- function deleteRow(index) {
11306
- remove(index);
11307
- if (fields.length === 1) {
11308
- insert(0, {
11309
- key: "",
11310
- value: "",
11311
- disabled: false
11312
- });
11313
- }
11314
- }
11315
- function insertRow(index, position) {
11316
- insert(index + (position === "above" ? 0 : 1), {
11317
- key: "",
11318
- value: "",
11319
- disabled: false
11320
- });
11321
- }
11322
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11323
- KeyboundForm,
11324
- {
11325
- onSubmit: handleSubmit,
11326
- className: "flex flex-1 flex-col overflow-hidden",
11327
- children: [
11328
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
11329
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
11330
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
11331
- /* @__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" }) }),
11332
- /* @__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" }) })
10945
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10946
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10947
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10948
+ /* @__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" }) }),
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_VALUE_LABEL_ID, children: "Value" }) })
11333
10950
  ] }),
11334
10951
  fields.map((field, index) => {
11335
10952
  const isDisabled = field.disabled || false;
@@ -11472,92 +11089,475 @@ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11472
11089
  "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",
11473
11090
  className
11474
11091
  )
11475
- }
11476
- );
11477
- });
11478
- GridInput.displayName = "MetadataForm.GridInput";
11479
- const PlaceholderInner = () => {
11480
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11481
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11482
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11483
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11484
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11092
+ }
11093
+ );
11094
+ });
11095
+ GridInput.displayName = "MetadataForm.GridInput";
11096
+ const PlaceholderInner = () => {
11097
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11098
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11099
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11100
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11101
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11102
+ ] }) })
11103
+ ] });
11104
+ };
11105
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11106
+ function getDefaultValues(metadata) {
11107
+ if (!metadata || !Object.keys(metadata).length) {
11108
+ return [
11109
+ {
11110
+ key: "",
11111
+ value: "",
11112
+ disabled: false
11113
+ }
11114
+ ];
11115
+ }
11116
+ return Object.entries(metadata).map(([key, value]) => {
11117
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11118
+ return {
11119
+ key,
11120
+ value,
11121
+ disabled: true
11122
+ };
11123
+ }
11124
+ let stringValue = value;
11125
+ if (typeof value !== "string") {
11126
+ stringValue = JSON.stringify(value);
11127
+ }
11128
+ return {
11129
+ key,
11130
+ value: stringValue,
11131
+ original_key: key
11132
+ };
11133
+ });
11134
+ }
11135
+ function parseValues(values) {
11136
+ const metadata = values.metadata;
11137
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11138
+ if (isEmpty) {
11139
+ return null;
11140
+ }
11141
+ const update = {};
11142
+ metadata.forEach((field) => {
11143
+ let key = field.key;
11144
+ let value = field.value;
11145
+ const disabled = field.disabled;
11146
+ if (!key || !value) {
11147
+ return;
11148
+ }
11149
+ if (disabled) {
11150
+ update[key] = value;
11151
+ return;
11152
+ }
11153
+ key = key.trim();
11154
+ value = value.trim();
11155
+ if (value === "true") {
11156
+ update[key] = true;
11157
+ } else if (value === "false") {
11158
+ update[key] = false;
11159
+ } else {
11160
+ const parsedNumber = parseFloat(value);
11161
+ if (!isNaN(parsedNumber)) {
11162
+ update[key] = parsedNumber;
11163
+ } else {
11164
+ update[key] = value;
11165
+ }
11166
+ }
11167
+ });
11168
+ return update;
11169
+ }
11170
+ function getHasUneditableRows(metadata) {
11171
+ if (!metadata) {
11172
+ return false;
11173
+ }
11174
+ return Object.values(metadata).some(
11175
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11176
+ );
11177
+ }
11178
+ const PROMOTION_QUERY_KEY = "promotions";
11179
+ const promotionsQueryKeys = {
11180
+ list: (query2) => [
11181
+ PROMOTION_QUERY_KEY,
11182
+ query2 ? query2 : void 0
11183
+ ],
11184
+ detail: (id, query2) => [
11185
+ PROMOTION_QUERY_KEY,
11186
+ id,
11187
+ query2 ? query2 : void 0
11188
+ ]
11189
+ };
11190
+ const usePromotions = (query2, options) => {
11191
+ const { data, ...rest } = reactQuery.useQuery({
11192
+ queryKey: promotionsQueryKeys.list(query2),
11193
+ queryFn: async () => sdk.admin.promotion.list(query2),
11194
+ ...options
11195
+ });
11196
+ return { ...data, ...rest };
11197
+ };
11198
+ const Promotions = () => {
11199
+ const { id } = reactRouterDom.useParams();
11200
+ const {
11201
+ order: preview,
11202
+ isError: isPreviewError,
11203
+ error: previewError
11204
+ } = useOrderPreview(id, void 0);
11205
+ useInitiateOrderEdit({ preview });
11206
+ const { onCancel } = useCancelOrderEdit({ preview });
11207
+ if (isPreviewError) {
11208
+ throw previewError;
11209
+ }
11210
+ const isReady = !!preview;
11211
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
11212
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
11213
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
11214
+ ] });
11215
+ };
11216
+ const PromotionForm = ({ preview }) => {
11217
+ const { items, shipping_methods } = preview;
11218
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
11219
+ const [comboboxValue, setComboboxValue] = React.useState("");
11220
+ const { handleSuccess } = useRouteModal();
11221
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11222
+ const promoIds = getPromotionIds(items, shipping_methods);
11223
+ const { promotions, isPending, isError, error } = usePromotions(
11224
+ {
11225
+ id: promoIds
11226
+ },
11227
+ {
11228
+ enabled: !!promoIds.length
11229
+ }
11230
+ );
11231
+ const comboboxData = useComboboxData({
11232
+ queryKey: ["promotions", "combobox", promoIds],
11233
+ queryFn: async (params) => {
11234
+ return await sdk.admin.promotion.list({
11235
+ ...params,
11236
+ id: {
11237
+ $nin: promoIds
11238
+ }
11239
+ });
11240
+ },
11241
+ getOptions: (data) => {
11242
+ return data.promotions.map((promotion) => ({
11243
+ label: promotion.code,
11244
+ value: promotion.code
11245
+ }));
11246
+ }
11247
+ });
11248
+ const add = async (value) => {
11249
+ if (!value) {
11250
+ return;
11251
+ }
11252
+ addPromotions(
11253
+ {
11254
+ promo_codes: [value]
11255
+ },
11256
+ {
11257
+ onError: (e) => {
11258
+ ui.toast.error(e.message);
11259
+ comboboxData.onSearchValueChange("");
11260
+ setComboboxValue("");
11261
+ },
11262
+ onSuccess: () => {
11263
+ comboboxData.onSearchValueChange("");
11264
+ setComboboxValue("");
11265
+ }
11266
+ }
11267
+ );
11268
+ };
11269
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11270
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11271
+ const onSubmit = async () => {
11272
+ setIsSubmitting(true);
11273
+ let requestSucceeded = false;
11274
+ await requestOrderEdit(void 0, {
11275
+ onError: (e) => {
11276
+ ui.toast.error(e.message);
11277
+ },
11278
+ onSuccess: () => {
11279
+ requestSucceeded = true;
11280
+ }
11281
+ });
11282
+ if (!requestSucceeded) {
11283
+ setIsSubmitting(false);
11284
+ return;
11285
+ }
11286
+ await confirmOrderEdit(void 0, {
11287
+ onError: (e) => {
11288
+ ui.toast.error(e.message);
11289
+ },
11290
+ onSuccess: () => {
11291
+ handleSuccess();
11292
+ },
11293
+ onSettled: () => {
11294
+ setIsSubmitting(false);
11295
+ }
11296
+ });
11297
+ };
11298
+ if (isError) {
11299
+ throw error;
11300
+ }
11301
+ return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11302
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
11303
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
11304
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11305
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11306
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11307
+ ] }),
11308
+ /* @__PURE__ */ jsxRuntime.jsx(
11309
+ Combobox,
11310
+ {
11311
+ id: "promotion-combobox",
11312
+ "aria-describedby": "promotion-combobox-hint",
11313
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
11314
+ fetchNextPage: comboboxData.fetchNextPage,
11315
+ options: comboboxData.options,
11316
+ onSearchValueChange: comboboxData.onSearchValueChange,
11317
+ searchValue: comboboxData.searchValue,
11318
+ disabled: comboboxData.disabled || isAddingPromotions,
11319
+ onChange: add,
11320
+ value: comboboxValue
11321
+ }
11322
+ )
11323
+ ] }),
11324
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11325
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
11326
+ PromotionItem,
11327
+ {
11328
+ promotion,
11329
+ orderId: preview.id,
11330
+ isLoading: isPending
11331
+ },
11332
+ promotion.id
11333
+ )) })
11334
+ ] }) }),
11335
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11336
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11337
+ /* @__PURE__ */ jsxRuntime.jsx(
11338
+ ui.Button,
11339
+ {
11340
+ size: "small",
11341
+ type: "submit",
11342
+ isLoading: isSubmitting || isAddingPromotions,
11343
+ children: "Save"
11344
+ }
11345
+ )
11485
11346
  ] }) })
11486
11347
  ] });
11487
11348
  };
11488
- const EDITABLE_TYPES = ["string", "number", "boolean"];
11489
- function getDefaultValues(metadata) {
11490
- if (!metadata || !Object.keys(metadata).length) {
11491
- return [
11349
+ const PromotionItem = ({
11350
+ promotion,
11351
+ orderId,
11352
+ isLoading
11353
+ }) => {
11354
+ var _a;
11355
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11356
+ const onRemove = async () => {
11357
+ removePromotions(
11492
11358
  {
11493
- key: "",
11494
- value: "",
11495
- disabled: false
11359
+ promo_codes: [promotion.code]
11360
+ },
11361
+ {
11362
+ onError: (e) => {
11363
+ ui.toast.error(e.message);
11364
+ }
11496
11365
  }
11497
- ];
11366
+ );
11367
+ };
11368
+ const displayValue = getDisplayValue(promotion);
11369
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11370
+ "div",
11371
+ {
11372
+ className: ui.clx(
11373
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11374
+ {
11375
+ "animate-pulse": isLoading
11376
+ }
11377
+ ),
11378
+ children: [
11379
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11380
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11381
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11382
+ displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
11383
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
11384
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
11385
+ ] }),
11386
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11387
+ ] })
11388
+ ] }),
11389
+ /* @__PURE__ */ jsxRuntime.jsx(
11390
+ ui.IconButton,
11391
+ {
11392
+ size: "small",
11393
+ type: "button",
11394
+ variant: "transparent",
11395
+ onClick: onRemove,
11396
+ isLoading: isPending || isLoading,
11397
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
11398
+ }
11399
+ )
11400
+ ]
11401
+ },
11402
+ promotion.id
11403
+ );
11404
+ };
11405
+ function getDisplayValue(promotion) {
11406
+ var _a, _b, _c, _d;
11407
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11408
+ if (!value) {
11409
+ return null;
11498
11410
  }
11499
- return Object.entries(metadata).map(([key, value]) => {
11500
- if (!EDITABLE_TYPES.includes(typeof value)) {
11501
- return {
11502
- key,
11503
- value,
11504
- disabled: true
11505
- };
11506
- }
11507
- let stringValue = value;
11508
- if (typeof value !== "string") {
11509
- stringValue = JSON.stringify(value);
11411
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11412
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11413
+ if (!currency) {
11414
+ return null;
11510
11415
  }
11511
- return {
11512
- key,
11513
- value: stringValue,
11514
- original_key: key
11515
- };
11516
- });
11416
+ return getLocaleAmount(value, currency);
11417
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11418
+ return formatPercentage(value);
11419
+ }
11420
+ return null;
11517
11421
  }
11518
- function parseValues(values) {
11519
- const metadata = values.metadata;
11520
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11521
- if (isEmpty) {
11522
- return null;
11422
+ const formatter = new Intl.NumberFormat([], {
11423
+ style: "percent",
11424
+ minimumFractionDigits: 2
11425
+ });
11426
+ const formatPercentage = (value, isPercentageValue = false) => {
11427
+ let val = value || 0;
11428
+ if (!isPercentageValue) {
11429
+ val = val / 100;
11523
11430
  }
11524
- const update = {};
11525
- metadata.forEach((field) => {
11526
- let key = field.key;
11527
- let value = field.value;
11528
- const disabled = field.disabled;
11529
- if (!key || !value) {
11530
- return;
11431
+ return formatter.format(val);
11432
+ };
11433
+ function getPromotionIds(items, shippingMethods) {
11434
+ const promotionIds = /* @__PURE__ */ new Set();
11435
+ for (const item of items) {
11436
+ if (item.adjustments) {
11437
+ for (const adjustment of item.adjustments) {
11438
+ if (adjustment.promotion_id) {
11439
+ promotionIds.add(adjustment.promotion_id);
11440
+ }
11441
+ }
11531
11442
  }
11532
- if (disabled) {
11533
- update[key] = value;
11534
- return;
11443
+ }
11444
+ for (const shippingMethod of shippingMethods) {
11445
+ if (shippingMethod.adjustments) {
11446
+ for (const adjustment of shippingMethod.adjustments) {
11447
+ if (adjustment.promotion_id) {
11448
+ promotionIds.add(adjustment.promotion_id);
11449
+ }
11450
+ }
11535
11451
  }
11536
- key = key.trim();
11537
- value = value.trim();
11538
- if (value === "true") {
11539
- update[key] = true;
11540
- } else if (value === "false") {
11541
- update[key] = false;
11542
- } else {
11543
- const parsedNumber = parseFloat(value);
11544
- if (!isNaN(parsedNumber)) {
11545
- update[key] = parsedNumber;
11546
- } else {
11547
- update[key] = value;
11452
+ }
11453
+ return Array.from(promotionIds);
11454
+ }
11455
+ const SalesChannel = () => {
11456
+ const { id } = reactRouterDom.useParams();
11457
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11458
+ id,
11459
+ {
11460
+ fields: "+sales_channel_id"
11461
+ },
11462
+ {
11463
+ enabled: !!id
11464
+ }
11465
+ );
11466
+ if (isError) {
11467
+ throw error;
11468
+ }
11469
+ const ISrEADY = !!draft_order && !isPending;
11470
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11471
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11472
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
11473
+ /* @__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" }) })
11474
+ ] }),
11475
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
11476
+ ] });
11477
+ };
11478
+ const SalesChannelForm = ({ order }) => {
11479
+ const form = reactHookForm.useForm({
11480
+ defaultValues: {
11481
+ sales_channel_id: order.sales_channel_id || ""
11482
+ },
11483
+ resolver: zod.zodResolver(schema$2)
11484
+ });
11485
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11486
+ const { handleSuccess } = useRouteModal();
11487
+ const onSubmit = form.handleSubmit(async (data) => {
11488
+ await mutateAsync(
11489
+ {
11490
+ sales_channel_id: data.sales_channel_id
11491
+ },
11492
+ {
11493
+ onSuccess: () => {
11494
+ ui.toast.success("Sales channel updated");
11495
+ handleSuccess();
11496
+ },
11497
+ onError: (error) => {
11498
+ ui.toast.error(error.message);
11499
+ }
11548
11500
  }
11501
+ );
11502
+ });
11503
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11504
+ KeyboundForm,
11505
+ {
11506
+ className: "flex flex-1 flex-col overflow-hidden",
11507
+ onSubmit,
11508
+ children: [
11509
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
11510
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11511
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11512
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11513
+ ] }) })
11514
+ ]
11549
11515
  }
11516
+ ) });
11517
+ };
11518
+ const SalesChannelField = ({ control, order }) => {
11519
+ const salesChannels = useComboboxData({
11520
+ queryFn: async (params) => {
11521
+ return await sdk.admin.salesChannel.list(params);
11522
+ },
11523
+ queryKey: ["sales-channels"],
11524
+ getOptions: (data) => {
11525
+ return data.sales_channels.map((salesChannel) => ({
11526
+ label: salesChannel.name,
11527
+ value: salesChannel.id
11528
+ }));
11529
+ },
11530
+ defaultValue: order.sales_channel_id || void 0
11550
11531
  });
11551
- return update;
11552
- }
11553
- function getHasUneditableRows(metadata) {
11554
- if (!metadata) {
11555
- return false;
11556
- }
11557
- return Object.values(metadata).some(
11558
- (value) => !EDITABLE_TYPES.includes(typeof value)
11532
+ return /* @__PURE__ */ jsxRuntime.jsx(
11533
+ Form$2.Field,
11534
+ {
11535
+ control,
11536
+ name: "sales_channel_id",
11537
+ render: ({ field }) => {
11538
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11539
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11540
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11541
+ Combobox,
11542
+ {
11543
+ options: salesChannels.options,
11544
+ fetchNextPage: salesChannels.fetchNextPage,
11545
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11546
+ searchValue: salesChannels.searchValue,
11547
+ onSearchValueChange: salesChannels.onSearchValueChange,
11548
+ placeholder: "Select sales channel",
11549
+ ...field
11550
+ }
11551
+ ) }),
11552
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11553
+ ] });
11554
+ }
11555
+ }
11559
11556
  );
11560
- }
11557
+ };
11558
+ const schema$2 = objectType({
11559
+ sales_channel_id: stringType().min(1)
11560
+ });
11561
11561
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11562
11562
  const Shipping = () => {
11563
11563
  var _a;
@@ -12354,17 +12354,220 @@ const CustomAmountField = ({
12354
12354
  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12355
12355
  ui.CurrencyInput,
12356
12356
  {
12357
- ...field,
12358
- onValueChange: (value) => onChange(value),
12359
- symbol: getNativeSymbol(currencyCode),
12360
- code: currencyCode
12357
+ ...field,
12358
+ onValueChange: (value) => onChange(value),
12359
+ symbol: getNativeSymbol(currencyCode),
12360
+ code: currencyCode
12361
+ }
12362
+ ) })
12363
+ ] });
12364
+ }
12365
+ }
12366
+ );
12367
+ };
12368
+ const ShippingAddress = () => {
12369
+ const { id } = reactRouterDom.useParams();
12370
+ const { order, isPending, isError, error } = useOrder(id, {
12371
+ fields: "+shipping_address"
12372
+ });
12373
+ if (isError) {
12374
+ throw error;
12375
+ }
12376
+ const isReady = !isPending && !!order;
12377
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12378
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12379
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12380
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12381
+ ] }),
12382
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12383
+ ] });
12384
+ };
12385
+ const ShippingAddressForm = ({ order }) => {
12386
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12387
+ const form = reactHookForm.useForm({
12388
+ defaultValues: {
12389
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12390
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12391
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12392
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12393
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12394
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12395
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12396
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12397
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12398
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12399
+ },
12400
+ resolver: zod.zodResolver(schema$1)
12401
+ });
12402
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12403
+ const { handleSuccess } = useRouteModal();
12404
+ const onSubmit = form.handleSubmit(async (data) => {
12405
+ await mutateAsync(
12406
+ {
12407
+ shipping_address: {
12408
+ first_name: data.first_name,
12409
+ last_name: data.last_name,
12410
+ company: data.company,
12411
+ address_1: data.address_1,
12412
+ address_2: data.address_2,
12413
+ city: data.city,
12414
+ province: data.province,
12415
+ country_code: data.country_code,
12416
+ postal_code: data.postal_code,
12417
+ phone: data.phone
12418
+ }
12419
+ },
12420
+ {
12421
+ onSuccess: () => {
12422
+ handleSuccess();
12423
+ },
12424
+ onError: (error) => {
12425
+ ui.toast.error(error.message);
12426
+ }
12427
+ }
12428
+ );
12429
+ });
12430
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12431
+ KeyboundForm,
12432
+ {
12433
+ className: "flex flex-1 flex-col overflow-hidden",
12434
+ onSubmit,
12435
+ children: [
12436
+ /* @__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: [
12437
+ /* @__PURE__ */ jsxRuntime.jsx(
12438
+ Form$2.Field,
12439
+ {
12440
+ control: form.control,
12441
+ name: "country_code",
12442
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12443
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12444
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12445
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12446
+ ] })
12447
+ }
12448
+ ),
12449
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12450
+ /* @__PURE__ */ jsxRuntime.jsx(
12451
+ Form$2.Field,
12452
+ {
12453
+ control: form.control,
12454
+ name: "first_name",
12455
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12456
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12457
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12458
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12459
+ ] })
12460
+ }
12461
+ ),
12462
+ /* @__PURE__ */ jsxRuntime.jsx(
12463
+ Form$2.Field,
12464
+ {
12465
+ control: form.control,
12466
+ name: "last_name",
12467
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12468
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12469
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12470
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12471
+ ] })
12472
+ }
12473
+ )
12474
+ ] }),
12475
+ /* @__PURE__ */ jsxRuntime.jsx(
12476
+ Form$2.Field,
12477
+ {
12478
+ control: form.control,
12479
+ name: "company",
12480
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12481
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12482
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12483
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12484
+ ] })
12485
+ }
12486
+ ),
12487
+ /* @__PURE__ */ jsxRuntime.jsx(
12488
+ Form$2.Field,
12489
+ {
12490
+ control: form.control,
12491
+ name: "address_1",
12492
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12493
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12494
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12495
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12496
+ ] })
12497
+ }
12498
+ ),
12499
+ /* @__PURE__ */ jsxRuntime.jsx(
12500
+ Form$2.Field,
12501
+ {
12502
+ control: form.control,
12503
+ name: "address_2",
12504
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12505
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12506
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12507
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12508
+ ] })
12509
+ }
12510
+ ),
12511
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12512
+ /* @__PURE__ */ jsxRuntime.jsx(
12513
+ Form$2.Field,
12514
+ {
12515
+ control: form.control,
12516
+ name: "postal_code",
12517
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12518
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12519
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12520
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12521
+ ] })
12522
+ }
12523
+ ),
12524
+ /* @__PURE__ */ jsxRuntime.jsx(
12525
+ Form$2.Field,
12526
+ {
12527
+ control: form.control,
12528
+ name: "city",
12529
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12530
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12531
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12532
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12533
+ ] })
12534
+ }
12535
+ )
12536
+ ] }),
12537
+ /* @__PURE__ */ jsxRuntime.jsx(
12538
+ Form$2.Field,
12539
+ {
12540
+ control: form.control,
12541
+ name: "province",
12542
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12543
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12544
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12545
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12546
+ ] })
12547
+ }
12548
+ ),
12549
+ /* @__PURE__ */ jsxRuntime.jsx(
12550
+ Form$2.Field,
12551
+ {
12552
+ control: form.control,
12553
+ name: "phone",
12554
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12555
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12556
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12557
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12558
+ ] })
12361
12559
  }
12362
- ) })
12363
- ] });
12364
- }
12560
+ )
12561
+ ] }) }),
12562
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12563
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12564
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12565
+ ] }) })
12566
+ ]
12365
12567
  }
12366
- );
12568
+ ) });
12367
12569
  };
12570
+ const schema$1 = addressSchema;
12368
12571
  const TransferOwnership = () => {
12369
12572
  const { id } = reactRouterDom.useParams();
12370
12573
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12388,7 +12591,7 @@ const TransferOwnershipForm = ({ order }) => {
12388
12591
  defaultValues: {
12389
12592
  customer_id: order.customer_id || ""
12390
12593
  },
12391
- resolver: zod.zodResolver(schema$1)
12594
+ resolver: zod.zodResolver(schema)
12392
12595
  });
12393
12596
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12394
12597
  const { handleSuccess } = useRouteModal();
@@ -12838,212 +13041,9 @@ const Illustration = () => {
12838
13041
  }
12839
13042
  );
12840
13043
  };
12841
- const schema$1 = objectType({
13044
+ const schema = objectType({
12842
13045
  customer_id: stringType().min(1)
12843
13046
  });
12844
- const ShippingAddress = () => {
12845
- const { id } = reactRouterDom.useParams();
12846
- const { order, isPending, isError, error } = useOrder(id, {
12847
- fields: "+shipping_address"
12848
- });
12849
- if (isError) {
12850
- throw error;
12851
- }
12852
- const isReady = !isPending && !!order;
12853
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12854
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12855
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12856
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12857
- ] }),
12858
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12859
- ] });
12860
- };
12861
- const ShippingAddressForm = ({ order }) => {
12862
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12863
- const form = reactHookForm.useForm({
12864
- defaultValues: {
12865
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12866
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12867
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12868
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12869
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12870
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12871
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12872
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12873
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12874
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12875
- },
12876
- resolver: zod.zodResolver(schema)
12877
- });
12878
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12879
- const { handleSuccess } = useRouteModal();
12880
- const onSubmit = form.handleSubmit(async (data) => {
12881
- await mutateAsync(
12882
- {
12883
- shipping_address: {
12884
- first_name: data.first_name,
12885
- last_name: data.last_name,
12886
- company: data.company,
12887
- address_1: data.address_1,
12888
- address_2: data.address_2,
12889
- city: data.city,
12890
- province: data.province,
12891
- country_code: data.country_code,
12892
- postal_code: data.postal_code,
12893
- phone: data.phone
12894
- }
12895
- },
12896
- {
12897
- onSuccess: () => {
12898
- handleSuccess();
12899
- },
12900
- onError: (error) => {
12901
- ui.toast.error(error.message);
12902
- }
12903
- }
12904
- );
12905
- });
12906
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12907
- KeyboundForm,
12908
- {
12909
- className: "flex flex-1 flex-col overflow-hidden",
12910
- onSubmit,
12911
- children: [
12912
- /* @__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: [
12913
- /* @__PURE__ */ jsxRuntime.jsx(
12914
- Form$2.Field,
12915
- {
12916
- control: form.control,
12917
- name: "country_code",
12918
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12919
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12920
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12921
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12922
- ] })
12923
- }
12924
- ),
12925
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12926
- /* @__PURE__ */ jsxRuntime.jsx(
12927
- Form$2.Field,
12928
- {
12929
- control: form.control,
12930
- name: "first_name",
12931
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12932
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12933
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12934
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12935
- ] })
12936
- }
12937
- ),
12938
- /* @__PURE__ */ jsxRuntime.jsx(
12939
- Form$2.Field,
12940
- {
12941
- control: form.control,
12942
- name: "last_name",
12943
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12944
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12945
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12946
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12947
- ] })
12948
- }
12949
- )
12950
- ] }),
12951
- /* @__PURE__ */ jsxRuntime.jsx(
12952
- Form$2.Field,
12953
- {
12954
- control: form.control,
12955
- name: "company",
12956
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12957
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12958
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12959
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12960
- ] })
12961
- }
12962
- ),
12963
- /* @__PURE__ */ jsxRuntime.jsx(
12964
- Form$2.Field,
12965
- {
12966
- control: form.control,
12967
- name: "address_1",
12968
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12969
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12970
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12971
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12972
- ] })
12973
- }
12974
- ),
12975
- /* @__PURE__ */ jsxRuntime.jsx(
12976
- Form$2.Field,
12977
- {
12978
- control: form.control,
12979
- name: "address_2",
12980
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12981
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12982
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12983
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12984
- ] })
12985
- }
12986
- ),
12987
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12988
- /* @__PURE__ */ jsxRuntime.jsx(
12989
- Form$2.Field,
12990
- {
12991
- control: form.control,
12992
- name: "postal_code",
12993
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12994
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12995
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12996
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12997
- ] })
12998
- }
12999
- ),
13000
- /* @__PURE__ */ jsxRuntime.jsx(
13001
- Form$2.Field,
13002
- {
13003
- control: form.control,
13004
- name: "city",
13005
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13006
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13007
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13008
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13009
- ] })
13010
- }
13011
- )
13012
- ] }),
13013
- /* @__PURE__ */ jsxRuntime.jsx(
13014
- Form$2.Field,
13015
- {
13016
- control: form.control,
13017
- name: "province",
13018
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13019
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13020
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13021
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13022
- ] })
13023
- }
13024
- ),
13025
- /* @__PURE__ */ jsxRuntime.jsx(
13026
- Form$2.Field,
13027
- {
13028
- control: form.control,
13029
- name: "phone",
13030
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13031
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13032
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13033
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13034
- ] })
13035
- }
13036
- )
13037
- ] }) }),
13038
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13039
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13040
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13041
- ] }) })
13042
- ]
13043
- }
13044
- ) });
13045
- };
13046
- const schema = addressSchema;
13047
13047
  const widgetModule = { widgets: [] };
13048
13048
  const routeModule = {
13049
13049
  routes: [
@@ -13064,6 +13064,10 @@ const routeModule = {
13064
13064
  handle,
13065
13065
  loader,
13066
13066
  children: [
13067
+ {
13068
+ Component: BillingAddress,
13069
+ path: "/draft-orders/:id/billing-address"
13070
+ },
13067
13071
  {
13068
13072
  Component: CustomItems,
13069
13073
  path: "/draft-orders/:id/custom-items"
@@ -13072,14 +13076,14 @@ const routeModule = {
13072
13076
  Component: Email,
13073
13077
  path: "/draft-orders/:id/email"
13074
13078
  },
13075
- {
13076
- Component: BillingAddress,
13077
- path: "/draft-orders/:id/billing-address"
13078
- },
13079
13079
  {
13080
13080
  Component: Items,
13081
13081
  path: "/draft-orders/:id/items"
13082
13082
  },
13083
+ {
13084
+ Component: Metadata,
13085
+ path: "/draft-orders/:id/metadata"
13086
+ },
13083
13087
  {
13084
13088
  Component: Promotions,
13085
13089
  path: "/draft-orders/:id/promotions"
@@ -13088,21 +13092,17 @@ const routeModule = {
13088
13092
  Component: SalesChannel,
13089
13093
  path: "/draft-orders/:id/sales-channel"
13090
13094
  },
13091
- {
13092
- Component: Metadata,
13093
- path: "/draft-orders/:id/metadata"
13094
- },
13095
13095
  {
13096
13096
  Component: Shipping,
13097
13097
  path: "/draft-orders/:id/shipping"
13098
13098
  },
13099
- {
13100
- Component: TransferOwnership,
13101
- path: "/draft-orders/:id/transfer-ownership"
13102
- },
13103
13099
  {
13104
13100
  Component: ShippingAddress,
13105
13101
  path: "/draft-orders/:id/shipping-address"
13102
+ },
13103
+ {
13104
+ Component: TransferOwnership,
13105
+ path: "/draft-orders/:id/transfer-ownership"
13106
13106
  }
13107
13107
  ]
13108
13108
  }