@medusajs/draft-order 2.11.0 → 2.11.1-snapshot-20251021083840

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.
@@ -9565,27 +9565,6 @@ const ID = () => {
9565
9565
  /* @__PURE__ */ jsx(Outlet, {})
9566
9566
  ] });
9567
9567
  };
9568
- const CustomItems = () => {
9569
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9570
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9571
- /* @__PURE__ */ jsx(CustomItemsForm, {})
9572
- ] });
9573
- };
9574
- const CustomItemsForm = () => {
9575
- const form = useForm({
9576
- resolver: zodResolver(schema$5)
9577
- });
9578
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9579
- /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9580
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9581
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9582
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9583
- ] }) })
9584
- ] }) });
9585
- };
9586
- const schema$5 = objectType({
9587
- email: stringType().email()
9588
- });
9589
9568
  const BillingAddress = () => {
9590
9569
  const { id } = useParams();
9591
9570
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9618,7 +9597,7 @@ const BillingAddressForm = ({ order }) => {
9618
9597
  postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9619
9598
  phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9620
9599
  },
9621
- resolver: zodResolver(schema$4)
9600
+ resolver: zodResolver(schema$5)
9622
9601
  });
9623
9602
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9624
9603
  const { handleSuccess } = useRouteModal();
@@ -9775,7 +9754,96 @@ const BillingAddressForm = ({ order }) => {
9775
9754
  }
9776
9755
  ) });
9777
9756
  };
9778
- const schema$4 = addressSchema;
9757
+ const schema$5 = addressSchema;
9758
+ const CustomItems = () => {
9759
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9760
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9761
+ /* @__PURE__ */ jsx(CustomItemsForm, {})
9762
+ ] });
9763
+ };
9764
+ const CustomItemsForm = () => {
9765
+ const form = useForm({
9766
+ resolver: zodResolver(schema$4)
9767
+ });
9768
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9769
+ /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9770
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9771
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9772
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9773
+ ] }) })
9774
+ ] }) });
9775
+ };
9776
+ const schema$4 = objectType({
9777
+ email: stringType().email()
9778
+ });
9779
+ const Email = () => {
9780
+ const { id } = useParams();
9781
+ const { order, isPending, isError, error } = useOrder(id, {
9782
+ fields: "+email"
9783
+ });
9784
+ if (isError) {
9785
+ throw error;
9786
+ }
9787
+ const isReady = !isPending && !!order;
9788
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9789
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9790
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
9791
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9792
+ ] }),
9793
+ isReady && /* @__PURE__ */ jsx(EmailForm, { order })
9794
+ ] });
9795
+ };
9796
+ const EmailForm = ({ order }) => {
9797
+ const form = useForm({
9798
+ defaultValues: {
9799
+ email: order.email ?? ""
9800
+ },
9801
+ resolver: zodResolver(schema$3)
9802
+ });
9803
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9804
+ const { handleSuccess } = useRouteModal();
9805
+ const onSubmit = form.handleSubmit(async (data) => {
9806
+ await mutateAsync(
9807
+ { email: data.email },
9808
+ {
9809
+ onSuccess: () => {
9810
+ handleSuccess();
9811
+ },
9812
+ onError: (error) => {
9813
+ toast.error(error.message);
9814
+ }
9815
+ }
9816
+ );
9817
+ });
9818
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9819
+ KeyboundForm,
9820
+ {
9821
+ className: "flex flex-1 flex-col overflow-hidden",
9822
+ onSubmit,
9823
+ children: [
9824
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
9825
+ Form$2.Field,
9826
+ {
9827
+ control: form.control,
9828
+ name: "email",
9829
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9830
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
9831
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9832
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9833
+ ] })
9834
+ }
9835
+ ) }),
9836
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9837
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9838
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9839
+ ] }) })
9840
+ ]
9841
+ }
9842
+ ) });
9843
+ };
9844
+ const schema$3 = objectType({
9845
+ email: stringType().email()
9846
+ });
9779
9847
  const NumberInput = forwardRef(
9780
9848
  ({
9781
9849
  value,
@@ -10750,10 +10818,54 @@ const customItemSchema = objectType({
10750
10818
  quantity: numberType(),
10751
10819
  unit_price: unionType([numberType(), stringType()])
10752
10820
  });
10753
- const Email = () => {
10821
+ const InlineTip = forwardRef(
10822
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10823
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10824
+ return /* @__PURE__ */ jsxs(
10825
+ "div",
10826
+ {
10827
+ ref,
10828
+ className: clx(
10829
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10830
+ className
10831
+ ),
10832
+ ...props,
10833
+ children: [
10834
+ /* @__PURE__ */ jsx(
10835
+ "div",
10836
+ {
10837
+ role: "presentation",
10838
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10839
+ "bg-ui-tag-orange-icon": variant === "warning"
10840
+ })
10841
+ }
10842
+ ),
10843
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10844
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10845
+ labelValue,
10846
+ ":"
10847
+ ] }),
10848
+ " ",
10849
+ children
10850
+ ] })
10851
+ ]
10852
+ }
10853
+ );
10854
+ }
10855
+ );
10856
+ InlineTip.displayName = "InlineTip";
10857
+ const MetadataFieldSchema = objectType({
10858
+ key: stringType(),
10859
+ disabled: booleanType().optional(),
10860
+ value: anyType()
10861
+ });
10862
+ const MetadataSchema = objectType({
10863
+ metadata: arrayType(MetadataFieldSchema)
10864
+ });
10865
+ const Metadata = () => {
10754
10866
  const { id } = useParams();
10755
10867
  const { order, isPending, isError, error } = useOrder(id, {
10756
- fields: "+email"
10868
+ fields: "metadata"
10757
10869
  });
10758
10870
  if (isError) {
10759
10871
  throw error;
@@ -10761,26 +10873,33 @@ const Email = () => {
10761
10873
  const isReady = !isPending && !!order;
10762
10874
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10763
10875
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10764
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
10765
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10876
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10877
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10766
10878
  ] }),
10767
- isReady && /* @__PURE__ */ jsx(EmailForm, { order })
10879
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10768
10880
  ] });
10769
10881
  };
10770
- const EmailForm = ({ order }) => {
10882
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10883
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10884
+ const MetadataForm = ({ orderId, metadata }) => {
10885
+ const { handleSuccess } = useRouteModal();
10886
+ const hasUneditableRows = getHasUneditableRows(metadata);
10887
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10771
10888
  const form = useForm({
10772
10889
  defaultValues: {
10773
- email: order.email ?? ""
10890
+ metadata: getDefaultValues(metadata)
10774
10891
  },
10775
- resolver: zodResolver(schema$3)
10892
+ resolver: zodResolver(MetadataSchema)
10776
10893
  });
10777
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10778
- const { handleSuccess } = useRouteModal();
10779
- const onSubmit = form.handleSubmit(async (data) => {
10894
+ const handleSubmit = form.handleSubmit(async (data) => {
10895
+ const parsedData = parseValues(data);
10780
10896
  await mutateAsync(
10781
- { email: data.email },
10897
+ {
10898
+ metadata: parsedData
10899
+ },
10782
10900
  {
10783
10901
  onSuccess: () => {
10902
+ toast.success("Metadata updated");
10784
10903
  handleSuccess();
10785
10904
  },
10786
10905
  onError: (error) => {
@@ -10789,182 +10908,307 @@ const EmailForm = ({ order }) => {
10789
10908
  }
10790
10909
  );
10791
10910
  });
10911
+ const { fields, insert, remove } = useFieldArray({
10912
+ control: form.control,
10913
+ name: "metadata"
10914
+ });
10915
+ function deleteRow(index) {
10916
+ remove(index);
10917
+ if (fields.length === 1) {
10918
+ insert(0, {
10919
+ key: "",
10920
+ value: "",
10921
+ disabled: false
10922
+ });
10923
+ }
10924
+ }
10925
+ function insertRow(index, position) {
10926
+ insert(index + (position === "above" ? 0 : 1), {
10927
+ key: "",
10928
+ value: "",
10929
+ disabled: false
10930
+ });
10931
+ }
10792
10932
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10793
10933
  KeyboundForm,
10794
10934
  {
10935
+ onSubmit: handleSubmit,
10795
10936
  className: "flex flex-1 flex-col overflow-hidden",
10796
- onSubmit,
10797
10937
  children: [
10798
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
10799
- Form$2.Field,
10800
- {
10801
- control: form.control,
10802
- name: "email",
10803
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
10804
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
10805
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
10806
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10807
- ] })
10808
- }
10809
- ) }),
10810
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10811
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10812
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10813
- ] }) })
10814
- ]
10815
- }
10816
- ) });
10817
- };
10818
- const schema$3 = objectType({
10819
- email: stringType().email()
10820
- });
10821
- const SalesChannel = () => {
10822
- const { id } = useParams();
10823
- const { draft_order, isPending, isError, error } = useDraftOrder(
10824
- id,
10825
- {
10826
- fields: "+sales_channel_id"
10827
- },
10828
- {
10829
- enabled: !!id
10830
- }
10831
- );
10832
- if (isError) {
10833
- throw error;
10834
- }
10835
- const ISrEADY = !!draft_order && !isPending;
10836
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10837
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10838
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
10839
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
10840
- ] }),
10841
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
10842
- ] });
10843
- };
10844
- const SalesChannelForm = ({ order }) => {
10845
- const form = useForm({
10846
- defaultValues: {
10847
- sales_channel_id: order.sales_channel_id || ""
10848
- },
10849
- resolver: zodResolver(schema$2)
10850
- });
10851
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10852
- const { handleSuccess } = useRouteModal();
10853
- const onSubmit = form.handleSubmit(async (data) => {
10854
- await mutateAsync(
10855
- {
10856
- sales_channel_id: data.sales_channel_id
10857
- },
10858
- {
10859
- onSuccess: () => {
10860
- toast.success("Sales channel updated");
10861
- handleSuccess();
10862
- },
10863
- onError: (error) => {
10864
- toast.error(error.message);
10865
- }
10866
- }
10867
- );
10868
- });
10869
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10870
- KeyboundForm,
10871
- {
10872
- className: "flex flex-1 flex-col overflow-hidden",
10873
- onSubmit,
10874
- children: [
10875
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
10876
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10877
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10938
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10939
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10940
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10941
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10942
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10943
+ ] }),
10944
+ fields.map((field, index) => {
10945
+ const isDisabled = field.disabled || false;
10946
+ let placeholder = "-";
10947
+ if (typeof field.value === "object") {
10948
+ placeholder = "{ ... }";
10949
+ }
10950
+ if (Array.isArray(field.value)) {
10951
+ placeholder = "[ ... ]";
10952
+ }
10953
+ return /* @__PURE__ */ jsx(
10954
+ ConditionalTooltip,
10955
+ {
10956
+ showTooltip: isDisabled,
10957
+ content: "This row is disabled because it contains non-primitive data.",
10958
+ children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
10959
+ /* @__PURE__ */ jsxs(
10960
+ "div",
10961
+ {
10962
+ className: clx("grid grid-cols-2 divide-x", {
10963
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
10964
+ }),
10965
+ children: [
10966
+ /* @__PURE__ */ jsx(
10967
+ Form$2.Field,
10968
+ {
10969
+ control: form.control,
10970
+ name: `metadata.${index}.key`,
10971
+ render: ({ field: field2 }) => {
10972
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10973
+ GridInput,
10974
+ {
10975
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
10976
+ ...field2,
10977
+ disabled: isDisabled,
10978
+ placeholder: "Key"
10979
+ }
10980
+ ) }) });
10981
+ }
10982
+ }
10983
+ ),
10984
+ /* @__PURE__ */ jsx(
10985
+ Form$2.Field,
10986
+ {
10987
+ control: form.control,
10988
+ name: `metadata.${index}.value`,
10989
+ render: ({ field: { value, ...field2 } }) => {
10990
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10991
+ GridInput,
10992
+ {
10993
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
10994
+ ...field2,
10995
+ value: isDisabled ? placeholder : value,
10996
+ disabled: isDisabled,
10997
+ placeholder: "Value"
10998
+ }
10999
+ ) }) });
11000
+ }
11001
+ }
11002
+ )
11003
+ ]
11004
+ }
11005
+ ),
11006
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
11007
+ /* @__PURE__ */ jsx(
11008
+ DropdownMenu.Trigger,
11009
+ {
11010
+ className: clx(
11011
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11012
+ {
11013
+ hidden: isDisabled
11014
+ }
11015
+ ),
11016
+ disabled: isDisabled,
11017
+ asChild: true,
11018
+ children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
11019
+ }
11020
+ ),
11021
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
11022
+ /* @__PURE__ */ jsxs(
11023
+ DropdownMenu.Item,
11024
+ {
11025
+ className: "gap-x-2",
11026
+ onClick: () => insertRow(index, "above"),
11027
+ children: [
11028
+ /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
11029
+ "Insert row above"
11030
+ ]
11031
+ }
11032
+ ),
11033
+ /* @__PURE__ */ jsxs(
11034
+ DropdownMenu.Item,
11035
+ {
11036
+ className: "gap-x-2",
11037
+ onClick: () => insertRow(index, "below"),
11038
+ children: [
11039
+ /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
11040
+ "Insert row below"
11041
+ ]
11042
+ }
11043
+ ),
11044
+ /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
11045
+ /* @__PURE__ */ jsxs(
11046
+ DropdownMenu.Item,
11047
+ {
11048
+ className: "gap-x-2",
11049
+ onClick: () => deleteRow(index),
11050
+ children: [
11051
+ /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
11052
+ "Delete row"
11053
+ ]
11054
+ }
11055
+ )
11056
+ ] })
11057
+ ] })
11058
+ ] })
11059
+ },
11060
+ field.id
11061
+ );
11062
+ })
11063
+ ] }),
11064
+ hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
11065
+ ] }),
11066
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11067
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10878
11068
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10879
11069
  ] }) })
10880
11070
  ]
10881
11071
  }
10882
11072
  ) });
10883
11073
  };
10884
- const SalesChannelField = ({ control, order }) => {
10885
- const salesChannels = useComboboxData({
10886
- queryFn: async (params) => {
10887
- return await sdk.admin.salesChannel.list(params);
10888
- },
10889
- queryKey: ["sales-channels"],
10890
- getOptions: (data) => {
10891
- return data.sales_channels.map((salesChannel) => ({
10892
- label: salesChannel.name,
10893
- value: salesChannel.id
10894
- }));
10895
- },
10896
- defaultValue: order.sales_channel_id || void 0
10897
- });
11074
+ const GridInput = forwardRef(({ className, ...props }, ref) => {
10898
11075
  return /* @__PURE__ */ jsx(
10899
- Form$2.Field,
11076
+ "input",
10900
11077
  {
10901
- control,
10902
- name: "sales_channel_id",
10903
- render: ({ field }) => {
10904
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
10905
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
10906
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10907
- Combobox,
10908
- {
10909
- options: salesChannels.options,
10910
- fetchNextPage: salesChannels.fetchNextPage,
10911
- isFetchingNextPage: salesChannels.isFetchingNextPage,
10912
- searchValue: salesChannels.searchValue,
10913
- onSearchValueChange: salesChannels.onSearchValueChange,
10914
- placeholder: "Select sales channel",
10915
- ...field
10916
- }
10917
- ) }),
10918
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10919
- ] });
10920
- }
11078
+ ref,
11079
+ ...props,
11080
+ autoComplete: "off",
11081
+ className: clx(
11082
+ "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
11083
+ className
11084
+ )
10921
11085
  }
10922
11086
  );
10923
- };
10924
- const schema$2 = objectType({
10925
- sales_channel_id: stringType().min(1)
10926
11087
  });
10927
- const PROMOTION_QUERY_KEY = "promotions";
10928
- const promotionsQueryKeys = {
10929
- list: (query2) => [
10930
- PROMOTION_QUERY_KEY,
10931
- query2 ? query2 : void 0
10932
- ],
10933
- detail: (id, query2) => [
10934
- PROMOTION_QUERY_KEY,
10935
- id,
10936
- query2 ? query2 : void 0
10937
- ]
10938
- };
10939
- const usePromotions = (query2, options) => {
10940
- const { data, ...rest } = useQuery({
10941
- queryKey: promotionsQueryKeys.list(query2),
10942
- queryFn: async () => sdk.admin.promotion.list(query2),
10943
- ...options
10944
- });
10945
- return { ...data, ...rest };
10946
- };
10947
- const Promotions = () => {
10948
- const { id } = useParams();
10949
- const {
10950
- order: preview,
10951
- isError: isPreviewError,
10952
- error: previewError
10953
- } = useOrderPreview(id, void 0);
10954
- useInitiateOrderEdit({ preview });
10955
- const { onCancel } = useCancelOrderEdit({ preview });
10956
- if (isPreviewError) {
10957
- throw previewError;
10958
- }
10959
- const isReady = !!preview;
10960
- return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
10961
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
10962
- isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
11088
+ GridInput.displayName = "MetadataForm.GridInput";
11089
+ const PlaceholderInner = () => {
11090
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11091
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11092
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11093
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
11094
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
11095
+ ] }) })
10963
11096
  ] });
10964
11097
  };
10965
- const PromotionForm = ({ preview }) => {
10966
- const { items, shipping_methods } = preview;
10967
- const [isSubmitting, setIsSubmitting] = useState(false);
11098
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11099
+ function getDefaultValues(metadata) {
11100
+ if (!metadata || !Object.keys(metadata).length) {
11101
+ return [
11102
+ {
11103
+ key: "",
11104
+ value: "",
11105
+ disabled: false
11106
+ }
11107
+ ];
11108
+ }
11109
+ return Object.entries(metadata).map(([key, value]) => {
11110
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11111
+ return {
11112
+ key,
11113
+ value,
11114
+ disabled: true
11115
+ };
11116
+ }
11117
+ let stringValue = value;
11118
+ if (typeof value !== "string") {
11119
+ stringValue = JSON.stringify(value);
11120
+ }
11121
+ return {
11122
+ key,
11123
+ value: stringValue,
11124
+ original_key: key
11125
+ };
11126
+ });
11127
+ }
11128
+ function parseValues(values) {
11129
+ const metadata = values.metadata;
11130
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11131
+ if (isEmpty) {
11132
+ return null;
11133
+ }
11134
+ const update = {};
11135
+ metadata.forEach((field) => {
11136
+ let key = field.key;
11137
+ let value = field.value;
11138
+ const disabled = field.disabled;
11139
+ if (!key || !value) {
11140
+ return;
11141
+ }
11142
+ if (disabled) {
11143
+ update[key] = value;
11144
+ return;
11145
+ }
11146
+ key = key.trim();
11147
+ value = value.trim();
11148
+ if (value === "true") {
11149
+ update[key] = true;
11150
+ } else if (value === "false") {
11151
+ update[key] = false;
11152
+ } else {
11153
+ const parsedNumber = parseFloat(value);
11154
+ if (!isNaN(parsedNumber)) {
11155
+ update[key] = parsedNumber;
11156
+ } else {
11157
+ update[key] = value;
11158
+ }
11159
+ }
11160
+ });
11161
+ return update;
11162
+ }
11163
+ function getHasUneditableRows(metadata) {
11164
+ if (!metadata) {
11165
+ return false;
11166
+ }
11167
+ return Object.values(metadata).some(
11168
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11169
+ );
11170
+ }
11171
+ const PROMOTION_QUERY_KEY = "promotions";
11172
+ const promotionsQueryKeys = {
11173
+ list: (query2) => [
11174
+ PROMOTION_QUERY_KEY,
11175
+ query2 ? query2 : void 0
11176
+ ],
11177
+ detail: (id, query2) => [
11178
+ PROMOTION_QUERY_KEY,
11179
+ id,
11180
+ query2 ? query2 : void 0
11181
+ ]
11182
+ };
11183
+ const usePromotions = (query2, options) => {
11184
+ const { data, ...rest } = useQuery({
11185
+ queryKey: promotionsQueryKeys.list(query2),
11186
+ queryFn: async () => sdk.admin.promotion.list(query2),
11187
+ ...options
11188
+ });
11189
+ return { ...data, ...rest };
11190
+ };
11191
+ const Promotions = () => {
11192
+ const { id } = useParams();
11193
+ const {
11194
+ order: preview,
11195
+ isError: isPreviewError,
11196
+ error: previewError
11197
+ } = useOrderPreview(id, void 0);
11198
+ useInitiateOrderEdit({ preview });
11199
+ const { onCancel } = useCancelOrderEdit({ preview });
11200
+ if (isPreviewError) {
11201
+ throw previewError;
11202
+ }
11203
+ const isReady = !!preview;
11204
+ return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
11205
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
11206
+ isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
11207
+ ] });
11208
+ };
11209
+ const PromotionForm = ({ preview }) => {
11210
+ const { items, shipping_methods } = preview;
11211
+ const [isSubmitting, setIsSubmitting] = useState(false);
10968
11212
  const [comboboxValue, setComboboxValue] = useState("");
10969
11213
  const { handleSuccess } = useRouteModal();
10970
11214
  const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
@@ -11201,6 +11445,112 @@ function getPromotionIds(items, shippingMethods) {
11201
11445
  }
11202
11446
  return Array.from(promotionIds);
11203
11447
  }
11448
+ const SalesChannel = () => {
11449
+ const { id } = useParams();
11450
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11451
+ id,
11452
+ {
11453
+ fields: "+sales_channel_id"
11454
+ },
11455
+ {
11456
+ enabled: !!id
11457
+ }
11458
+ );
11459
+ if (isError) {
11460
+ throw error;
11461
+ }
11462
+ const ISrEADY = !!draft_order && !isPending;
11463
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11464
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11465
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11466
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11467
+ ] }),
11468
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11469
+ ] });
11470
+ };
11471
+ const SalesChannelForm = ({ order }) => {
11472
+ const form = useForm({
11473
+ defaultValues: {
11474
+ sales_channel_id: order.sales_channel_id || ""
11475
+ },
11476
+ resolver: zodResolver(schema$2)
11477
+ });
11478
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11479
+ const { handleSuccess } = useRouteModal();
11480
+ const onSubmit = form.handleSubmit(async (data) => {
11481
+ await mutateAsync(
11482
+ {
11483
+ sales_channel_id: data.sales_channel_id
11484
+ },
11485
+ {
11486
+ onSuccess: () => {
11487
+ toast.success("Sales channel updated");
11488
+ handleSuccess();
11489
+ },
11490
+ onError: (error) => {
11491
+ toast.error(error.message);
11492
+ }
11493
+ }
11494
+ );
11495
+ });
11496
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11497
+ KeyboundForm,
11498
+ {
11499
+ className: "flex flex-1 flex-col overflow-hidden",
11500
+ onSubmit,
11501
+ children: [
11502
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11503
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11504
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11505
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11506
+ ] }) })
11507
+ ]
11508
+ }
11509
+ ) });
11510
+ };
11511
+ const SalesChannelField = ({ control, order }) => {
11512
+ const salesChannels = useComboboxData({
11513
+ queryFn: async (params) => {
11514
+ return await sdk.admin.salesChannel.list(params);
11515
+ },
11516
+ queryKey: ["sales-channels"],
11517
+ getOptions: (data) => {
11518
+ return data.sales_channels.map((salesChannel) => ({
11519
+ label: salesChannel.name,
11520
+ value: salesChannel.id
11521
+ }));
11522
+ },
11523
+ defaultValue: order.sales_channel_id || void 0
11524
+ });
11525
+ return /* @__PURE__ */ jsx(
11526
+ Form$2.Field,
11527
+ {
11528
+ control,
11529
+ name: "sales_channel_id",
11530
+ render: ({ field }) => {
11531
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11532
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11533
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11534
+ Combobox,
11535
+ {
11536
+ options: salesChannels.options,
11537
+ fetchNextPage: salesChannels.fetchNextPage,
11538
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11539
+ searchValue: salesChannels.searchValue,
11540
+ onSearchValueChange: salesChannels.onSearchValueChange,
11541
+ placeholder: "Select sales channel",
11542
+ ...field
11543
+ }
11544
+ ) }),
11545
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11546
+ ] });
11547
+ }
11548
+ }
11549
+ );
11550
+ };
11551
+ const schema$2 = objectType({
11552
+ sales_channel_id: stringType().min(1)
11553
+ });
11204
11554
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11205
11555
  const Shipping = () => {
11206
11556
  var _a;
@@ -12548,495 +12898,145 @@ const Illustration = () => {
12548
12898
  }
12549
12899
  ),
12550
12900
  /* @__PURE__ */ jsx(
12551
- "rect",
12552
- {
12553
- width: "12",
12554
- height: "3",
12555
- rx: "1.5",
12556
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12557
- fill: "#A1A1AA"
12558
- }
12559
- ),
12560
- /* @__PURE__ */ jsx(
12561
- "path",
12562
- {
12563
- 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",
12564
- fill: "#52525B"
12565
- }
12566
- ),
12567
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
12568
- "path",
12569
- {
12570
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12571
- stroke: "#A1A1AA",
12572
- strokeWidth: "1.5",
12573
- strokeLinecap: "round",
12574
- strokeLinejoin: "round"
12575
- }
12576
- ) }),
12577
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
12578
- "path",
12579
- {
12580
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12581
- stroke: "#A1A1AA",
12582
- strokeWidth: "1.5",
12583
- strokeLinecap: "round",
12584
- strokeLinejoin: "round"
12585
- }
12586
- ) }),
12587
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
12588
- "path",
12589
- {
12590
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12591
- stroke: "#A1A1AA",
12592
- strokeWidth: "1.5",
12593
- strokeLinecap: "round",
12594
- strokeLinejoin: "round"
12595
- }
12596
- ) }),
12597
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
12598
- "path",
12599
- {
12600
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12601
- stroke: "#A1A1AA",
12602
- strokeWidth: "1.5",
12603
- strokeLinecap: "round",
12604
- strokeLinejoin: "round"
12605
- }
12606
- ) }),
12607
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
12608
- "path",
12609
- {
12610
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12611
- stroke: "#A1A1AA",
12612
- strokeWidth: "1.5",
12613
- strokeLinecap: "round",
12614
- strokeLinejoin: "round"
12615
- }
12616
- ) }),
12617
- /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
12618
- "path",
12619
- {
12620
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12621
- stroke: "#A1A1AA",
12622
- strokeWidth: "1.5",
12623
- strokeLinecap: "round",
12624
- strokeLinejoin: "round"
12625
- }
12626
- ) }),
12627
- /* @__PURE__ */ jsxs("defs", { children: [
12628
- /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
12629
- "rect",
12630
- {
12631
- width: "12",
12632
- height: "12",
12633
- fill: "white",
12634
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12635
- }
12636
- ) }),
12637
- /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
12638
- "rect",
12639
- {
12640
- width: "12",
12641
- height: "12",
12642
- fill: "white",
12643
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12644
- }
12645
- ) }),
12646
- /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
12647
- "rect",
12648
- {
12649
- width: "12",
12650
- height: "12",
12651
- fill: "white",
12652
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12653
- }
12654
- ) }),
12655
- /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
12656
- "rect",
12657
- {
12658
- width: "12",
12659
- height: "12",
12660
- fill: "white",
12661
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12662
- }
12663
- ) }),
12664
- /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
12665
- "rect",
12666
- {
12667
- width: "12",
12668
- height: "12",
12669
- fill: "white",
12670
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12671
- }
12672
- ) }),
12673
- /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
12674
- "rect",
12675
- {
12676
- width: "12",
12677
- height: "12",
12678
- fill: "white",
12679
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12680
- }
12681
- ) })
12682
- ] })
12683
- ]
12684
- }
12685
- );
12686
- };
12687
- const schema = objectType({
12688
- customer_id: stringType().min(1)
12689
- });
12690
- const InlineTip = forwardRef(
12691
- ({ variant = "tip", label, className, children, ...props }, ref) => {
12692
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
12693
- return /* @__PURE__ */ jsxs(
12694
- "div",
12695
- {
12696
- ref,
12697
- className: clx(
12698
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
12699
- className
12700
- ),
12701
- ...props,
12702
- children: [
12703
- /* @__PURE__ */ jsx(
12704
- "div",
12705
- {
12706
- role: "presentation",
12707
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
12708
- "bg-ui-tag-orange-icon": variant === "warning"
12709
- })
12710
- }
12711
- ),
12712
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
12713
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
12714
- labelValue,
12715
- ":"
12716
- ] }),
12717
- " ",
12718
- children
12719
- ] })
12720
- ]
12721
- }
12722
- );
12723
- }
12724
- );
12725
- InlineTip.displayName = "InlineTip";
12726
- const MetadataFieldSchema = objectType({
12727
- key: stringType(),
12728
- disabled: booleanType().optional(),
12729
- value: anyType()
12730
- });
12731
- const MetadataSchema = objectType({
12732
- metadata: arrayType(MetadataFieldSchema)
12733
- });
12734
- const Metadata = () => {
12735
- const { id } = useParams();
12736
- const { order, isPending, isError, error } = useOrder(id, {
12737
- fields: "metadata"
12738
- });
12739
- if (isError) {
12740
- throw error;
12741
- }
12742
- const isReady = !isPending && !!order;
12743
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12744
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12745
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
12746
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
12747
- ] }),
12748
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
12749
- ] });
12750
- };
12751
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
12752
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
12753
- const MetadataForm = ({ orderId, metadata }) => {
12754
- const { handleSuccess } = useRouteModal();
12755
- const hasUneditableRows = getHasUneditableRows(metadata);
12756
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
12757
- const form = useForm({
12758
- defaultValues: {
12759
- metadata: getDefaultValues(metadata)
12760
- },
12761
- resolver: zodResolver(MetadataSchema)
12762
- });
12763
- const handleSubmit = form.handleSubmit(async (data) => {
12764
- const parsedData = parseValues(data);
12765
- await mutateAsync(
12766
- {
12767
- metadata: parsedData
12768
- },
12769
- {
12770
- onSuccess: () => {
12771
- toast.success("Metadata updated");
12772
- handleSuccess();
12773
- },
12774
- onError: (error) => {
12775
- toast.error(error.message);
12776
- }
12777
- }
12778
- );
12779
- });
12780
- const { fields, insert, remove } = useFieldArray({
12781
- control: form.control,
12782
- name: "metadata"
12783
- });
12784
- function deleteRow(index) {
12785
- remove(index);
12786
- if (fields.length === 1) {
12787
- insert(0, {
12788
- key: "",
12789
- value: "",
12790
- disabled: false
12791
- });
12792
- }
12793
- }
12794
- function insertRow(index, position) {
12795
- insert(index + (position === "above" ? 0 : 1), {
12796
- key: "",
12797
- value: "",
12798
- disabled: false
12799
- });
12800
- }
12801
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12802
- KeyboundForm,
12803
- {
12804
- onSubmit: handleSubmit,
12805
- className: "flex flex-1 flex-col overflow-hidden",
12806
- children: [
12807
- /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
12808
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
12809
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
12810
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
12811
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
12812
- ] }),
12813
- fields.map((field, index) => {
12814
- const isDisabled = field.disabled || false;
12815
- let placeholder = "-";
12816
- if (typeof field.value === "object") {
12817
- placeholder = "{ ... }";
12818
- }
12819
- if (Array.isArray(field.value)) {
12820
- placeholder = "[ ... ]";
12821
- }
12822
- return /* @__PURE__ */ jsx(
12823
- ConditionalTooltip,
12824
- {
12825
- showTooltip: isDisabled,
12826
- content: "This row is disabled because it contains non-primitive data.",
12827
- children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
12828
- /* @__PURE__ */ jsxs(
12829
- "div",
12830
- {
12831
- className: clx("grid grid-cols-2 divide-x", {
12832
- "overflow-hidden rounded-b-lg": index === fields.length - 1
12833
- }),
12834
- children: [
12835
- /* @__PURE__ */ jsx(
12836
- Form$2.Field,
12837
- {
12838
- control: form.control,
12839
- name: `metadata.${index}.key`,
12840
- render: ({ field: field2 }) => {
12841
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12842
- GridInput,
12843
- {
12844
- "aria-labelledby": METADATA_KEY_LABEL_ID,
12845
- ...field2,
12846
- disabled: isDisabled,
12847
- placeholder: "Key"
12848
- }
12849
- ) }) });
12850
- }
12851
- }
12852
- ),
12853
- /* @__PURE__ */ jsx(
12854
- Form$2.Field,
12855
- {
12856
- control: form.control,
12857
- name: `metadata.${index}.value`,
12858
- render: ({ field: { value, ...field2 } }) => {
12859
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12860
- GridInput,
12861
- {
12862
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
12863
- ...field2,
12864
- value: isDisabled ? placeholder : value,
12865
- disabled: isDisabled,
12866
- placeholder: "Value"
12867
- }
12868
- ) }) });
12869
- }
12870
- }
12871
- )
12872
- ]
12873
- }
12874
- ),
12875
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
12876
- /* @__PURE__ */ jsx(
12877
- DropdownMenu.Trigger,
12878
- {
12879
- className: clx(
12880
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
12881
- {
12882
- hidden: isDisabled
12883
- }
12884
- ),
12885
- disabled: isDisabled,
12886
- asChild: true,
12887
- children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
12888
- }
12889
- ),
12890
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
12891
- /* @__PURE__ */ jsxs(
12892
- DropdownMenu.Item,
12893
- {
12894
- className: "gap-x-2",
12895
- onClick: () => insertRow(index, "above"),
12896
- children: [
12897
- /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
12898
- "Insert row above"
12899
- ]
12900
- }
12901
- ),
12902
- /* @__PURE__ */ jsxs(
12903
- DropdownMenu.Item,
12904
- {
12905
- className: "gap-x-2",
12906
- onClick: () => insertRow(index, "below"),
12907
- children: [
12908
- /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
12909
- "Insert row below"
12910
- ]
12911
- }
12912
- ),
12913
- /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
12914
- /* @__PURE__ */ jsxs(
12915
- DropdownMenu.Item,
12916
- {
12917
- className: "gap-x-2",
12918
- onClick: () => deleteRow(index),
12919
- children: [
12920
- /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
12921
- "Delete row"
12922
- ]
12923
- }
12924
- )
12925
- ] })
12926
- ] })
12927
- ] })
12928
- },
12929
- field.id
12930
- );
12931
- })
12932
- ] }),
12933
- hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
12934
- ] }),
12935
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12936
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12937
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12938
- ] }) })
12901
+ "rect",
12902
+ {
12903
+ width: "12",
12904
+ height: "3",
12905
+ rx: "1.5",
12906
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12907
+ fill: "#A1A1AA"
12908
+ }
12909
+ ),
12910
+ /* @__PURE__ */ jsx(
12911
+ "path",
12912
+ {
12913
+ 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",
12914
+ fill: "#52525B"
12915
+ }
12916
+ ),
12917
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsx(
12918
+ "path",
12919
+ {
12920
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12921
+ stroke: "#A1A1AA",
12922
+ strokeWidth: "1.5",
12923
+ strokeLinecap: "round",
12924
+ strokeLinejoin: "round"
12925
+ }
12926
+ ) }),
12927
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsx(
12928
+ "path",
12929
+ {
12930
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12931
+ stroke: "#A1A1AA",
12932
+ strokeWidth: "1.5",
12933
+ strokeLinecap: "round",
12934
+ strokeLinejoin: "round"
12935
+ }
12936
+ ) }),
12937
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsx(
12938
+ "path",
12939
+ {
12940
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12941
+ stroke: "#A1A1AA",
12942
+ strokeWidth: "1.5",
12943
+ strokeLinecap: "round",
12944
+ strokeLinejoin: "round"
12945
+ }
12946
+ ) }),
12947
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsx(
12948
+ "path",
12949
+ {
12950
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12951
+ stroke: "#A1A1AA",
12952
+ strokeWidth: "1.5",
12953
+ strokeLinecap: "round",
12954
+ strokeLinejoin: "round"
12955
+ }
12956
+ ) }),
12957
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsx(
12958
+ "path",
12959
+ {
12960
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12961
+ stroke: "#A1A1AA",
12962
+ strokeWidth: "1.5",
12963
+ strokeLinecap: "round",
12964
+ strokeLinejoin: "round"
12965
+ }
12966
+ ) }),
12967
+ /* @__PURE__ */ jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsx(
12968
+ "path",
12969
+ {
12970
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12971
+ stroke: "#A1A1AA",
12972
+ strokeWidth: "1.5",
12973
+ strokeLinecap: "round",
12974
+ strokeLinejoin: "round"
12975
+ }
12976
+ ) }),
12977
+ /* @__PURE__ */ jsxs("defs", { children: [
12978
+ /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
12979
+ "rect",
12980
+ {
12981
+ width: "12",
12982
+ height: "12",
12983
+ fill: "white",
12984
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12985
+ }
12986
+ ) }),
12987
+ /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
12988
+ "rect",
12989
+ {
12990
+ width: "12",
12991
+ height: "12",
12992
+ fill: "white",
12993
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12994
+ }
12995
+ ) }),
12996
+ /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
12997
+ "rect",
12998
+ {
12999
+ width: "12",
13000
+ height: "12",
13001
+ fill: "white",
13002
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
13003
+ }
13004
+ ) }),
13005
+ /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
13006
+ "rect",
13007
+ {
13008
+ width: "12",
13009
+ height: "12",
13010
+ fill: "white",
13011
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
13012
+ }
13013
+ ) }),
13014
+ /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
13015
+ "rect",
13016
+ {
13017
+ width: "12",
13018
+ height: "12",
13019
+ fill: "white",
13020
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
13021
+ }
13022
+ ) }),
13023
+ /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
13024
+ "rect",
13025
+ {
13026
+ width: "12",
13027
+ height: "12",
13028
+ fill: "white",
13029
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13030
+ }
13031
+ ) })
13032
+ ] })
12939
13033
  ]
12940
13034
  }
12941
- ) });
12942
- };
12943
- const GridInput = forwardRef(({ className, ...props }, ref) => {
12944
- return /* @__PURE__ */ jsx(
12945
- "input",
12946
- {
12947
- ref,
12948
- ...props,
12949
- autoComplete: "off",
12950
- className: clx(
12951
- "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",
12952
- className
12953
- )
12954
- }
12955
13035
  );
12956
- });
12957
- GridInput.displayName = "MetadataForm.GridInput";
12958
- const PlaceholderInner = () => {
12959
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
12960
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
12961
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12962
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
12963
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
12964
- ] }) })
12965
- ] });
12966
13036
  };
12967
- const EDITABLE_TYPES = ["string", "number", "boolean"];
12968
- function getDefaultValues(metadata) {
12969
- if (!metadata || !Object.keys(metadata).length) {
12970
- return [
12971
- {
12972
- key: "",
12973
- value: "",
12974
- disabled: false
12975
- }
12976
- ];
12977
- }
12978
- return Object.entries(metadata).map(([key, value]) => {
12979
- if (!EDITABLE_TYPES.includes(typeof value)) {
12980
- return {
12981
- key,
12982
- value,
12983
- disabled: true
12984
- };
12985
- }
12986
- let stringValue = value;
12987
- if (typeof value !== "string") {
12988
- stringValue = JSON.stringify(value);
12989
- }
12990
- return {
12991
- key,
12992
- value: stringValue,
12993
- original_key: key
12994
- };
12995
- });
12996
- }
12997
- function parseValues(values) {
12998
- const metadata = values.metadata;
12999
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
13000
- if (isEmpty) {
13001
- return null;
13002
- }
13003
- const update = {};
13004
- metadata.forEach((field) => {
13005
- let key = field.key;
13006
- let value = field.value;
13007
- const disabled = field.disabled;
13008
- if (!key || !value) {
13009
- return;
13010
- }
13011
- if (disabled) {
13012
- update[key] = value;
13013
- return;
13014
- }
13015
- key = key.trim();
13016
- value = value.trim();
13017
- if (value === "true") {
13018
- update[key] = true;
13019
- } else if (value === "false") {
13020
- update[key] = false;
13021
- } else {
13022
- const parsedNumber = parseFloat(value);
13023
- if (!isNaN(parsedNumber)) {
13024
- update[key] = parsedNumber;
13025
- } else {
13026
- update[key] = value;
13027
- }
13028
- }
13029
- });
13030
- return update;
13031
- }
13032
- function getHasUneditableRows(metadata) {
13033
- if (!metadata) {
13034
- return false;
13035
- }
13036
- return Object.values(metadata).some(
13037
- (value) => !EDITABLE_TYPES.includes(typeof value)
13038
- );
13039
- }
13037
+ const schema = objectType({
13038
+ customer_id: stringType().min(1)
13039
+ });
13040
13040
  const widgetModule = { widgets: [] };
13041
13041
  const routeModule = {
13042
13042
  routes: [
@@ -13057,30 +13057,34 @@ const routeModule = {
13057
13057
  handle,
13058
13058
  loader,
13059
13059
  children: [
13060
- {
13061
- Component: CustomItems,
13062
- path: "/draft-orders/:id/custom-items"
13063
- },
13064
13060
  {
13065
13061
  Component: BillingAddress,
13066
13062
  path: "/draft-orders/:id/billing-address"
13067
13063
  },
13068
13064
  {
13069
- Component: Items,
13070
- path: "/draft-orders/:id/items"
13065
+ Component: CustomItems,
13066
+ path: "/draft-orders/:id/custom-items"
13071
13067
  },
13072
13068
  {
13073
13069
  Component: Email,
13074
13070
  path: "/draft-orders/:id/email"
13075
13071
  },
13076
13072
  {
13077
- Component: SalesChannel,
13078
- path: "/draft-orders/:id/sales-channel"
13073
+ Component: Items,
13074
+ path: "/draft-orders/:id/items"
13075
+ },
13076
+ {
13077
+ Component: Metadata,
13078
+ path: "/draft-orders/:id/metadata"
13079
13079
  },
13080
13080
  {
13081
13081
  Component: Promotions,
13082
13082
  path: "/draft-orders/:id/promotions"
13083
13083
  },
13084
+ {
13085
+ Component: SalesChannel,
13086
+ path: "/draft-orders/:id/sales-channel"
13087
+ },
13084
13088
  {
13085
13089
  Component: Shipping,
13086
13090
  path: "/draft-orders/:id/shipping"
@@ -13092,10 +13096,6 @@ const routeModule = {
13092
13096
  {
13093
13097
  Component: TransferOwnership,
13094
13098
  path: "/draft-orders/:id/transfer-ownership"
13095
- },
13096
- {
13097
- Component: Metadata,
13098
- path: "/draft-orders/:id/metadata"
13099
13099
  }
13100
13100
  ]
13101
13101
  }