@medusajs/draft-order 2.11.1-preview-20251022000338 → 2.11.1-preview-20251022032035

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/.medusa/server/src/admin/index.js +528 -528
  2. package/.medusa/server/src/admin/index.mjs +529 -529
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -9761,10 +9761,54 @@ const BillingAddressForm = ({ order }) => {
9761
9761
  ) });
9762
9762
  };
9763
9763
  const schema$5 = addressSchema;
9764
- const Email = () => {
9764
+ const InlineTip = React.forwardRef(
9765
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
9766
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9767
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9768
+ "div",
9769
+ {
9770
+ ref,
9771
+ className: ui.clx(
9772
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9773
+ className
9774
+ ),
9775
+ ...props,
9776
+ children: [
9777
+ /* @__PURE__ */ jsxRuntime.jsx(
9778
+ "div",
9779
+ {
9780
+ role: "presentation",
9781
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9782
+ "bg-ui-tag-orange-icon": variant === "warning"
9783
+ })
9784
+ }
9785
+ ),
9786
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
9787
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9788
+ labelValue,
9789
+ ":"
9790
+ ] }),
9791
+ " ",
9792
+ children
9793
+ ] })
9794
+ ]
9795
+ }
9796
+ );
9797
+ }
9798
+ );
9799
+ InlineTip.displayName = "InlineTip";
9800
+ const MetadataFieldSchema = objectType({
9801
+ key: stringType(),
9802
+ disabled: booleanType().optional(),
9803
+ value: anyType()
9804
+ });
9805
+ const MetadataSchema = objectType({
9806
+ metadata: arrayType(MetadataFieldSchema)
9807
+ });
9808
+ const Metadata = () => {
9765
9809
  const { id } = reactRouterDom.useParams();
9766
9810
  const { order, isPending, isError, error } = useOrder(id, {
9767
- fields: "+email"
9811
+ fields: "metadata"
9768
9812
  });
9769
9813
  if (isError) {
9770
9814
  throw error;
@@ -9772,26 +9816,33 @@ const Email = () => {
9772
9816
  const isReady = !isPending && !!order;
9773
9817
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9774
9818
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9775
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9776
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9819
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
9820
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9777
9821
  ] }),
9778
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9822
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9779
9823
  ] });
9780
9824
  };
9781
- const EmailForm = ({ order }) => {
9825
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9826
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9827
+ const MetadataForm = ({ orderId, metadata }) => {
9828
+ const { handleSuccess } = useRouteModal();
9829
+ const hasUneditableRows = getHasUneditableRows(metadata);
9830
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
9782
9831
  const form = reactHookForm.useForm({
9783
9832
  defaultValues: {
9784
- email: order.email ?? ""
9833
+ metadata: getDefaultValues(metadata)
9785
9834
  },
9786
- resolver: zod.zodResolver(schema$4)
9835
+ resolver: zod.zodResolver(MetadataSchema)
9787
9836
  });
9788
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9789
- const { handleSuccess } = useRouteModal();
9790
- const onSubmit = form.handleSubmit(async (data) => {
9837
+ const handleSubmit = form.handleSubmit(async (data) => {
9838
+ const parsedData = parseValues(data);
9791
9839
  await mutateAsync(
9792
- { email: data.email },
9840
+ {
9841
+ metadata: parsedData
9842
+ },
9793
9843
  {
9794
9844
  onSuccess: () => {
9845
+ ui.toast.success("Metadata updated");
9795
9846
  handleSuccess();
9796
9847
  },
9797
9848
  onError: (error) => {
@@ -9800,46 +9851,277 @@ const EmailForm = ({ order }) => {
9800
9851
  }
9801
9852
  );
9802
9853
  });
9854
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
9855
+ control: form.control,
9856
+ name: "metadata"
9857
+ });
9858
+ function deleteRow(index) {
9859
+ remove(index);
9860
+ if (fields.length === 1) {
9861
+ insert(0, {
9862
+ key: "",
9863
+ value: "",
9864
+ disabled: false
9865
+ });
9866
+ }
9867
+ }
9868
+ function insertRow(index, position) {
9869
+ insert(index + (position === "above" ? 0 : 1), {
9870
+ key: "",
9871
+ value: "",
9872
+ disabled: false
9873
+ });
9874
+ }
9803
9875
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9804
9876
  KeyboundForm,
9805
9877
  {
9878
+ onSubmit: handleSubmit,
9806
9879
  className: "flex flex-1 flex-col overflow-hidden",
9807
- onSubmit,
9808
9880
  children: [
9809
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9810
- Form$2.Field,
9811
- {
9812
- control: form.control,
9813
- name: "email",
9814
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9815
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9816
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9817
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9818
- ] })
9819
- }
9820
- ) }),
9821
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9822
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9881
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
9882
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
9883
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
9884
+ /* @__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" }) }),
9885
+ /* @__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" }) })
9886
+ ] }),
9887
+ fields.map((field, index) => {
9888
+ const isDisabled = field.disabled || false;
9889
+ let placeholder = "-";
9890
+ if (typeof field.value === "object") {
9891
+ placeholder = "{ ... }";
9892
+ }
9893
+ if (Array.isArray(field.value)) {
9894
+ placeholder = "[ ... ]";
9895
+ }
9896
+ return /* @__PURE__ */ jsxRuntime.jsx(
9897
+ ConditionalTooltip,
9898
+ {
9899
+ showTooltip: isDisabled,
9900
+ content: "This row is disabled because it contains non-primitive data.",
9901
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
9902
+ /* @__PURE__ */ jsxRuntime.jsxs(
9903
+ "div",
9904
+ {
9905
+ className: ui.clx("grid grid-cols-2 divide-x", {
9906
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
9907
+ }),
9908
+ children: [
9909
+ /* @__PURE__ */ jsxRuntime.jsx(
9910
+ Form$2.Field,
9911
+ {
9912
+ control: form.control,
9913
+ name: `metadata.${index}.key`,
9914
+ render: ({ field: field2 }) => {
9915
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
9916
+ GridInput,
9917
+ {
9918
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
9919
+ ...field2,
9920
+ disabled: isDisabled,
9921
+ placeholder: "Key"
9922
+ }
9923
+ ) }) });
9924
+ }
9925
+ }
9926
+ ),
9927
+ /* @__PURE__ */ jsxRuntime.jsx(
9928
+ Form$2.Field,
9929
+ {
9930
+ control: form.control,
9931
+ name: `metadata.${index}.value`,
9932
+ render: ({ field: { value, ...field2 } }) => {
9933
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
9934
+ GridInput,
9935
+ {
9936
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
9937
+ ...field2,
9938
+ value: isDisabled ? placeholder : value,
9939
+ disabled: isDisabled,
9940
+ placeholder: "Value"
9941
+ }
9942
+ ) }) });
9943
+ }
9944
+ }
9945
+ )
9946
+ ]
9947
+ }
9948
+ ),
9949
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
9950
+ /* @__PURE__ */ jsxRuntime.jsx(
9951
+ ui.DropdownMenu.Trigger,
9952
+ {
9953
+ className: ui.clx(
9954
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
9955
+ {
9956
+ hidden: isDisabled
9957
+ }
9958
+ ),
9959
+ disabled: isDisabled,
9960
+ asChild: true,
9961
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
9962
+ }
9963
+ ),
9964
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
9965
+ /* @__PURE__ */ jsxRuntime.jsxs(
9966
+ ui.DropdownMenu.Item,
9967
+ {
9968
+ className: "gap-x-2",
9969
+ onClick: () => insertRow(index, "above"),
9970
+ children: [
9971
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
9972
+ "Insert row above"
9973
+ ]
9974
+ }
9975
+ ),
9976
+ /* @__PURE__ */ jsxRuntime.jsxs(
9977
+ ui.DropdownMenu.Item,
9978
+ {
9979
+ className: "gap-x-2",
9980
+ onClick: () => insertRow(index, "below"),
9981
+ children: [
9982
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
9983
+ "Insert row below"
9984
+ ]
9985
+ }
9986
+ ),
9987
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
9988
+ /* @__PURE__ */ jsxRuntime.jsxs(
9989
+ ui.DropdownMenu.Item,
9990
+ {
9991
+ className: "gap-x-2",
9992
+ onClick: () => deleteRow(index),
9993
+ children: [
9994
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
9995
+ "Delete row"
9996
+ ]
9997
+ }
9998
+ )
9999
+ ] })
10000
+ ] })
10001
+ ] })
10002
+ },
10003
+ field.id
10004
+ );
10005
+ })
10006
+ ] }),
10007
+ hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
10008
+ ] }),
10009
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10010
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
9823
10011
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9824
10012
  ] }) })
9825
10013
  ]
9826
10014
  }
9827
10015
  ) });
9828
10016
  };
9829
- const schema$4 = objectType({
9830
- email: stringType().email()
9831
- });
9832
- const NumberInput = React.forwardRef(
9833
- ({
9834
- value,
9835
- onChange,
9836
- size = "base",
9837
- min = 0,
9838
- max = 100,
9839
- step = 1,
9840
- className,
9841
- disabled,
9842
- ...props
10017
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
10018
+ return /* @__PURE__ */ jsxRuntime.jsx(
10019
+ "input",
10020
+ {
10021
+ ref,
10022
+ ...props,
10023
+ autoComplete: "off",
10024
+ className: ui.clx(
10025
+ "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",
10026
+ className
10027
+ )
10028
+ }
10029
+ );
10030
+ });
10031
+ GridInput.displayName = "MetadataForm.GridInput";
10032
+ const PlaceholderInner = () => {
10033
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
10034
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
10035
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10036
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
10037
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
10038
+ ] }) })
10039
+ ] });
10040
+ };
10041
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
10042
+ function getDefaultValues(metadata) {
10043
+ if (!metadata || !Object.keys(metadata).length) {
10044
+ return [
10045
+ {
10046
+ key: "",
10047
+ value: "",
10048
+ disabled: false
10049
+ }
10050
+ ];
10051
+ }
10052
+ return Object.entries(metadata).map(([key, value]) => {
10053
+ if (!EDITABLE_TYPES.includes(typeof value)) {
10054
+ return {
10055
+ key,
10056
+ value,
10057
+ disabled: true
10058
+ };
10059
+ }
10060
+ let stringValue = value;
10061
+ if (typeof value !== "string") {
10062
+ stringValue = JSON.stringify(value);
10063
+ }
10064
+ return {
10065
+ key,
10066
+ value: stringValue,
10067
+ original_key: key
10068
+ };
10069
+ });
10070
+ }
10071
+ function parseValues(values) {
10072
+ const metadata = values.metadata;
10073
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
10074
+ if (isEmpty) {
10075
+ return null;
10076
+ }
10077
+ const update = {};
10078
+ metadata.forEach((field) => {
10079
+ let key = field.key;
10080
+ let value = field.value;
10081
+ const disabled = field.disabled;
10082
+ if (!key || !value) {
10083
+ return;
10084
+ }
10085
+ if (disabled) {
10086
+ update[key] = value;
10087
+ return;
10088
+ }
10089
+ key = key.trim();
10090
+ value = value.trim();
10091
+ if (value === "true") {
10092
+ update[key] = true;
10093
+ } else if (value === "false") {
10094
+ update[key] = false;
10095
+ } else {
10096
+ const parsedNumber = parseFloat(value);
10097
+ if (!isNaN(parsedNumber)) {
10098
+ update[key] = parsedNumber;
10099
+ } else {
10100
+ update[key] = value;
10101
+ }
10102
+ }
10103
+ });
10104
+ return update;
10105
+ }
10106
+ function getHasUneditableRows(metadata) {
10107
+ if (!metadata) {
10108
+ return false;
10109
+ }
10110
+ return Object.values(metadata).some(
10111
+ (value) => !EDITABLE_TYPES.includes(typeof value)
10112
+ );
10113
+ }
10114
+ const NumberInput = React.forwardRef(
10115
+ ({
10116
+ value,
10117
+ onChange,
10118
+ size = "base",
10119
+ min = 0,
10120
+ max = 100,
10121
+ step = 1,
10122
+ className,
10123
+ disabled,
10124
+ ...props
9843
10125
  }, ref) => {
9844
10126
  const handleChange = (event) => {
9845
10127
  const newValue = event.target.value === "" ? min : Number(event.target.value);
@@ -10676,483 +10958,133 @@ const useColumns = () => {
10676
10958
  header: "Created",
10677
10959
  cell: ({ getValue }) => {
10678
10960
  return /* @__PURE__ */ jsxRuntime.jsx(
10679
- ui.Tooltip,
10680
- {
10681
- content: getFullDate({ date: getValue(), includeTime: true }),
10682
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10683
- }
10684
- );
10685
- },
10686
- enableSorting: true,
10687
- sortAscLabel: "Oldest first",
10688
- sortDescLabel: "Newest first"
10689
- })
10690
- ];
10691
- }, []);
10692
- };
10693
- const CustomItemForm = ({ orderId, currencyCode }) => {
10694
- const { setIsOpen } = useStackedModal();
10695
- const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
10696
- const form = reactHookForm.useForm({
10697
- defaultValues: {
10698
- title: "",
10699
- quantity: 1,
10700
- unit_price: ""
10701
- },
10702
- resolver: zod.zodResolver(customItemSchema)
10703
- });
10704
- const onSubmit = form.handleSubmit(async (data) => {
10705
- await addItems(
10706
- {
10707
- items: [
10708
- {
10709
- title: data.title,
10710
- quantity: data.quantity,
10711
- unit_price: convertNumber(data.unit_price)
10712
- }
10713
- ]
10714
- },
10715
- {
10716
- onSuccess: () => {
10717
- setIsOpen(STACKED_MODAL_ID, false);
10718
- },
10719
- onError: (e) => {
10720
- ui.toast.error(e.message);
10721
- }
10722
- }
10723
- );
10724
- });
10725
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
10726
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
10727
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
10728
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10729
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
10730
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
10731
- ] }),
10732
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10733
- /* @__PURE__ */ jsxRuntime.jsx(
10734
- Form$2.Field,
10735
- {
10736
- control: form.control,
10737
- name: "title",
10738
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10739
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10740
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
10741
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
10742
- ] }),
10743
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10744
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10745
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10746
- ] })
10747
- ] }) })
10748
- }
10749
- ),
10750
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10751
- /* @__PURE__ */ jsxRuntime.jsx(
10752
- Form$2.Field,
10753
- {
10754
- control: form.control,
10755
- name: "unit_price",
10756
- render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10757
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10758
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
10759
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
10760
- ] }),
10761
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10762
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10763
- ui.CurrencyInput,
10764
- {
10765
- symbol: getNativeSymbol(currencyCode),
10766
- code: currencyCode,
10767
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
10768
- ...field
10769
- }
10770
- ) }),
10771
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10772
- ] })
10773
- ] }) })
10774
- }
10775
- ),
10776
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10777
- /* @__PURE__ */ jsxRuntime.jsx(
10778
- Form$2.Field,
10779
- {
10780
- control: form.control,
10781
- name: "quantity",
10782
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10783
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10784
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
10785
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
10786
- ] }),
10787
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
10788
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field, className: "w-full" }) }) }),
10789
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10790
- ] })
10791
- ] }) })
10792
- }
10793
- )
10794
- ] }) }) }),
10795
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10796
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10797
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
10798
- ] }) })
10799
- ] }) }) });
10800
- };
10801
- const customItemSchema = objectType({
10802
- title: stringType().min(1),
10803
- quantity: numberType(),
10804
- unit_price: unionType([numberType(), stringType()])
10805
- });
10806
- const InlineTip = React.forwardRef(
10807
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10808
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10809
- return /* @__PURE__ */ jsxRuntime.jsxs(
10810
- "div",
10811
- {
10812
- ref,
10813
- className: ui.clx(
10814
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10815
- className
10816
- ),
10817
- ...props,
10818
- children: [
10819
- /* @__PURE__ */ jsxRuntime.jsx(
10820
- "div",
10821
- {
10822
- role: "presentation",
10823
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10824
- "bg-ui-tag-orange-icon": variant === "warning"
10825
- })
10826
- }
10827
- ),
10828
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10829
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10830
- labelValue,
10831
- ":"
10832
- ] }),
10833
- " ",
10834
- children
10835
- ] })
10836
- ]
10837
- }
10838
- );
10839
- }
10840
- );
10841
- InlineTip.displayName = "InlineTip";
10842
- const MetadataFieldSchema = objectType({
10843
- key: stringType(),
10844
- disabled: booleanType().optional(),
10845
- value: anyType()
10846
- });
10847
- const MetadataSchema = objectType({
10848
- metadata: arrayType(MetadataFieldSchema)
10849
- });
10850
- const Metadata = () => {
10851
- const { id } = reactRouterDom.useParams();
10852
- const { order, isPending, isError, error } = useOrder(id, {
10853
- fields: "metadata"
10854
- });
10855
- if (isError) {
10856
- throw error;
10857
- }
10858
- const isReady = !isPending && !!order;
10859
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10860
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10861
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10862
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10863
- ] }),
10864
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10865
- ] });
10866
- };
10867
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10868
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10869
- const MetadataForm = ({ orderId, metadata }) => {
10870
- const { handleSuccess } = useRouteModal();
10871
- const hasUneditableRows = getHasUneditableRows(metadata);
10872
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10873
- const form = reactHookForm.useForm({
10874
- defaultValues: {
10875
- metadata: getDefaultValues(metadata)
10876
- },
10877
- resolver: zod.zodResolver(MetadataSchema)
10878
- });
10879
- const handleSubmit = form.handleSubmit(async (data) => {
10880
- const parsedData = parseValues(data);
10881
- await mutateAsync(
10882
- {
10883
- metadata: parsedData
10884
- },
10885
- {
10886
- onSuccess: () => {
10887
- ui.toast.success("Metadata updated");
10888
- handleSuccess();
10889
- },
10890
- onError: (error) => {
10891
- ui.toast.error(error.message);
10892
- }
10893
- }
10894
- );
10895
- });
10896
- const { fields, insert, remove } = reactHookForm.useFieldArray({
10897
- control: form.control,
10898
- name: "metadata"
10899
- });
10900
- function deleteRow(index) {
10901
- remove(index);
10902
- if (fields.length === 1) {
10903
- insert(0, {
10904
- key: "",
10905
- value: "",
10906
- disabled: false
10907
- });
10908
- }
10909
- }
10910
- function insertRow(index, position) {
10911
- insert(index + (position === "above" ? 0 : 1), {
10912
- key: "",
10913
- value: "",
10914
- disabled: false
10915
- });
10916
- }
10917
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10918
- KeyboundForm,
10919
- {
10920
- onSubmit: handleSubmit,
10921
- className: "flex flex-1 flex-col overflow-hidden",
10922
- children: [
10923
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10924
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10925
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10926
- /* @__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" }) }),
10927
- /* @__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" }) })
10928
- ] }),
10929
- fields.map((field, index) => {
10930
- const isDisabled = field.disabled || false;
10931
- let placeholder = "-";
10932
- if (typeof field.value === "object") {
10933
- placeholder = "{ ... }";
10934
- }
10935
- if (Array.isArray(field.value)) {
10936
- placeholder = "[ ... ]";
10937
- }
10938
- return /* @__PURE__ */ jsxRuntime.jsx(
10939
- ConditionalTooltip,
10940
- {
10941
- showTooltip: isDisabled,
10942
- content: "This row is disabled because it contains non-primitive data.",
10943
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
10944
- /* @__PURE__ */ jsxRuntime.jsxs(
10945
- "div",
10946
- {
10947
- className: ui.clx("grid grid-cols-2 divide-x", {
10948
- "overflow-hidden rounded-b-lg": index === fields.length - 1
10949
- }),
10950
- children: [
10951
- /* @__PURE__ */ jsxRuntime.jsx(
10952
- Form$2.Field,
10953
- {
10954
- control: form.control,
10955
- name: `metadata.${index}.key`,
10956
- render: ({ field: field2 }) => {
10957
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10958
- GridInput,
10959
- {
10960
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10961
- ...field2,
10962
- disabled: isDisabled,
10963
- placeholder: "Key"
10964
- }
10965
- ) }) });
10966
- }
10967
- }
10968
- ),
10969
- /* @__PURE__ */ jsxRuntime.jsx(
10970
- Form$2.Field,
10971
- {
10972
- control: form.control,
10973
- name: `metadata.${index}.value`,
10974
- render: ({ field: { value, ...field2 } }) => {
10975
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10976
- GridInput,
10977
- {
10978
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
10979
- ...field2,
10980
- value: isDisabled ? placeholder : value,
10981
- disabled: isDisabled,
10982
- placeholder: "Value"
10983
- }
10984
- ) }) });
10985
- }
10986
- }
10987
- )
10988
- ]
10989
- }
10990
- ),
10991
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
10992
- /* @__PURE__ */ jsxRuntime.jsx(
10993
- ui.DropdownMenu.Trigger,
10994
- {
10995
- className: ui.clx(
10996
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
10997
- {
10998
- hidden: isDisabled
10999
- }
11000
- ),
11001
- disabled: isDisabled,
11002
- asChild: true,
11003
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
11004
- }
11005
- ),
11006
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
11007
- /* @__PURE__ */ jsxRuntime.jsxs(
11008
- ui.DropdownMenu.Item,
11009
- {
11010
- className: "gap-x-2",
11011
- onClick: () => insertRow(index, "above"),
11012
- children: [
11013
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
11014
- "Insert row above"
11015
- ]
11016
- }
11017
- ),
11018
- /* @__PURE__ */ jsxRuntime.jsxs(
11019
- ui.DropdownMenu.Item,
11020
- {
11021
- className: "gap-x-2",
11022
- onClick: () => insertRow(index, "below"),
11023
- children: [
11024
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
11025
- "Insert row below"
11026
- ]
11027
- }
11028
- ),
11029
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
11030
- /* @__PURE__ */ jsxRuntime.jsxs(
11031
- ui.DropdownMenu.Item,
11032
- {
11033
- className: "gap-x-2",
11034
- onClick: () => deleteRow(index),
11035
- children: [
11036
- /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
11037
- "Delete row"
11038
- ]
11039
- }
11040
- )
11041
- ] })
11042
- ] })
11043
- ] })
11044
- },
11045
- field.id
11046
- );
11047
- })
11048
- ] }),
11049
- hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
11050
- ] }),
11051
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11052
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11053
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11054
- ] }) })
11055
- ]
11056
- }
11057
- ) });
11058
- };
11059
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11060
- return /* @__PURE__ */ jsxRuntime.jsx(
11061
- "input",
11062
- {
11063
- ref,
11064
- ...props,
11065
- autoComplete: "off",
11066
- className: ui.clx(
11067
- "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",
11068
- className
11069
- )
11070
- }
11071
- );
11072
- });
11073
- GridInput.displayName = "MetadataForm.GridInput";
11074
- const PlaceholderInner = () => {
11075
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11076
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11077
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11078
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11079
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11080
- ] }) })
11081
- ] });
11082
- };
11083
- const EDITABLE_TYPES = ["string", "number", "boolean"];
11084
- function getDefaultValues(metadata) {
11085
- if (!metadata || !Object.keys(metadata).length) {
11086
- return [
11087
- {
11088
- key: "",
11089
- value: "",
11090
- disabled: false
11091
- }
11092
- ];
11093
- }
11094
- return Object.entries(metadata).map(([key, value]) => {
11095
- if (!EDITABLE_TYPES.includes(typeof value)) {
11096
- return {
11097
- key,
11098
- value,
11099
- disabled: true
11100
- };
11101
- }
11102
- let stringValue = value;
11103
- if (typeof value !== "string") {
11104
- stringValue = JSON.stringify(value);
11105
- }
11106
- return {
11107
- key,
11108
- value: stringValue,
11109
- original_key: key
11110
- };
10961
+ ui.Tooltip,
10962
+ {
10963
+ content: getFullDate({ date: getValue(), includeTime: true }),
10964
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10965
+ }
10966
+ );
10967
+ },
10968
+ enableSorting: true,
10969
+ sortAscLabel: "Oldest first",
10970
+ sortDescLabel: "Newest first"
10971
+ })
10972
+ ];
10973
+ }, []);
10974
+ };
10975
+ const CustomItemForm = ({ orderId, currencyCode }) => {
10976
+ const { setIsOpen } = useStackedModal();
10977
+ const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
10978
+ const form = reactHookForm.useForm({
10979
+ defaultValues: {
10980
+ title: "",
10981
+ quantity: 1,
10982
+ unit_price: ""
10983
+ },
10984
+ resolver: zod.zodResolver(customItemSchema)
11111
10985
  });
11112
- }
11113
- function parseValues(values) {
11114
- const metadata = values.metadata;
11115
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11116
- if (isEmpty) {
11117
- return null;
11118
- }
11119
- const update = {};
11120
- metadata.forEach((field) => {
11121
- let key = field.key;
11122
- let value = field.value;
11123
- const disabled = field.disabled;
11124
- if (!key || !value) {
11125
- return;
11126
- }
11127
- if (disabled) {
11128
- update[key] = value;
11129
- return;
11130
- }
11131
- key = key.trim();
11132
- value = value.trim();
11133
- if (value === "true") {
11134
- update[key] = true;
11135
- } else if (value === "false") {
11136
- update[key] = false;
11137
- } else {
11138
- const parsedNumber = parseFloat(value);
11139
- if (!isNaN(parsedNumber)) {
11140
- update[key] = parsedNumber;
11141
- } else {
11142
- update[key] = value;
10986
+ const onSubmit = form.handleSubmit(async (data) => {
10987
+ await addItems(
10988
+ {
10989
+ items: [
10990
+ {
10991
+ title: data.title,
10992
+ quantity: data.quantity,
10993
+ unit_price: convertNumber(data.unit_price)
10994
+ }
10995
+ ]
10996
+ },
10997
+ {
10998
+ onSuccess: () => {
10999
+ setIsOpen(STACKED_MODAL_ID, false);
11000
+ },
11001
+ onError: (e) => {
11002
+ ui.toast.error(e.message);
11003
+ }
11143
11004
  }
11144
- }
11005
+ );
11145
11006
  });
11146
- return update;
11147
- }
11148
- function getHasUneditableRows(metadata) {
11149
- if (!metadata) {
11150
- return false;
11151
- }
11152
- return Object.values(metadata).some(
11153
- (value) => !EDITABLE_TYPES.includes(typeof value)
11154
- );
11155
- }
11007
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
11008
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
11009
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
11010
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11011
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
11012
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
11013
+ ] }),
11014
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11015
+ /* @__PURE__ */ jsxRuntime.jsx(
11016
+ Form$2.Field,
11017
+ {
11018
+ control: form.control,
11019
+ name: "title",
11020
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11021
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11022
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
11023
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
11024
+ ] }),
11025
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11026
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11027
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11028
+ ] })
11029
+ ] }) })
11030
+ }
11031
+ ),
11032
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11033
+ /* @__PURE__ */ jsxRuntime.jsx(
11034
+ Form$2.Field,
11035
+ {
11036
+ control: form.control,
11037
+ name: "unit_price",
11038
+ render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11039
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11040
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
11041
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
11042
+ ] }),
11043
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11044
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11045
+ ui.CurrencyInput,
11046
+ {
11047
+ symbol: getNativeSymbol(currencyCode),
11048
+ code: currencyCode,
11049
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
11050
+ ...field
11051
+ }
11052
+ ) }),
11053
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11054
+ ] })
11055
+ ] }) })
11056
+ }
11057
+ ),
11058
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11059
+ /* @__PURE__ */ jsxRuntime.jsx(
11060
+ Form$2.Field,
11061
+ {
11062
+ control: form.control,
11063
+ name: "quantity",
11064
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11065
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11066
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
11067
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
11068
+ ] }),
11069
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
11070
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field, className: "w-full" }) }) }),
11071
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11072
+ ] })
11073
+ ] }) })
11074
+ }
11075
+ )
11076
+ ] }) }) }),
11077
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11078
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11079
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
11080
+ ] }) })
11081
+ ] }) }) });
11082
+ };
11083
+ const customItemSchema = objectType({
11084
+ title: stringType().min(1),
11085
+ quantity: numberType(),
11086
+ unit_price: unionType([numberType(), stringType()])
11087
+ });
11156
11088
  const PROMOTION_QUERY_KEY = "promotions";
11157
11089
  const promotionsQueryKeys = {
11158
11090
  list: (query2) => [
@@ -11458,7 +11390,7 @@ const SalesChannelForm = ({ order }) => {
11458
11390
  defaultValues: {
11459
11391
  sales_channel_id: order.sales_channel_id || ""
11460
11392
  },
11461
- resolver: zod.zodResolver(schema$3)
11393
+ resolver: zod.zodResolver(schema$4)
11462
11394
  });
11463
11395
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11464
11396
  const { handleSuccess } = useRouteModal();
@@ -11533,7 +11465,7 @@ const SalesChannelField = ({ control, order }) => {
11533
11465
  }
11534
11466
  );
11535
11467
  };
11536
- const schema$3 = objectType({
11468
+ const schema$4 = objectType({
11537
11469
  sales_channel_id: stringType().min(1)
11538
11470
  });
11539
11471
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
@@ -12375,7 +12307,7 @@ const ShippingAddressForm = ({ order }) => {
12375
12307
  postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12376
12308
  phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12377
12309
  },
12378
- resolver: zod.zodResolver(schema$2)
12310
+ resolver: zod.zodResolver(schema$3)
12379
12311
  });
12380
12312
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12381
12313
  const { handleSuccess } = useRouteModal();
@@ -12545,7 +12477,7 @@ const ShippingAddressForm = ({ order }) => {
12545
12477
  }
12546
12478
  ) });
12547
12479
  };
12548
- const schema$2 = addressSchema;
12480
+ const schema$3 = addressSchema;
12549
12481
  const TransferOwnership = () => {
12550
12482
  const { id } = reactRouterDom.useParams();
12551
12483
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12569,7 +12501,7 @@ const TransferOwnershipForm = ({ order }) => {
12569
12501
  defaultValues: {
12570
12502
  customer_id: order.customer_id || ""
12571
12503
  },
12572
- resolver: zod.zodResolver(schema$1)
12504
+ resolver: zod.zodResolver(schema$2)
12573
12505
  });
12574
12506
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12575
12507
  const { handleSuccess } = useRouteModal();
@@ -13019,7 +12951,7 @@ const Illustration = () => {
13019
12951
  }
13020
12952
  );
13021
12953
  };
13022
- const schema$1 = objectType({
12954
+ const schema$2 = objectType({
13023
12955
  customer_id: stringType().min(1)
13024
12956
  });
13025
12957
  const CustomItems = () => {
@@ -13030,7 +12962,7 @@ const CustomItems = () => {
13030
12962
  };
13031
12963
  const CustomItemsForm = () => {
13032
12964
  const form = reactHookForm.useForm({
13033
- resolver: zod.zodResolver(schema)
12965
+ resolver: zod.zodResolver(schema$1)
13034
12966
  });
13035
12967
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
13036
12968
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
@@ -13040,6 +12972,74 @@ const CustomItemsForm = () => {
13040
12972
  ] }) })
13041
12973
  ] }) });
13042
12974
  };
12975
+ const schema$1 = objectType({
12976
+ email: stringType().email()
12977
+ });
12978
+ const Email = () => {
12979
+ const { id } = reactRouterDom.useParams();
12980
+ const { order, isPending, isError, error } = useOrder(id, {
12981
+ fields: "+email"
12982
+ });
12983
+ if (isError) {
12984
+ throw error;
12985
+ }
12986
+ const isReady = !isPending && !!order;
12987
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12988
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12989
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
12990
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
12991
+ ] }),
12992
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
12993
+ ] });
12994
+ };
12995
+ const EmailForm = ({ order }) => {
12996
+ const form = reactHookForm.useForm({
12997
+ defaultValues: {
12998
+ email: order.email ?? ""
12999
+ },
13000
+ resolver: zod.zodResolver(schema)
13001
+ });
13002
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
13003
+ const { handleSuccess } = useRouteModal();
13004
+ const onSubmit = form.handleSubmit(async (data) => {
13005
+ await mutateAsync(
13006
+ { email: data.email },
13007
+ {
13008
+ onSuccess: () => {
13009
+ handleSuccess();
13010
+ },
13011
+ onError: (error) => {
13012
+ ui.toast.error(error.message);
13013
+ }
13014
+ }
13015
+ );
13016
+ });
13017
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
13018
+ KeyboundForm,
13019
+ {
13020
+ className: "flex flex-1 flex-col overflow-hidden",
13021
+ onSubmit,
13022
+ children: [
13023
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
13024
+ Form$2.Field,
13025
+ {
13026
+ control: form.control,
13027
+ name: "email",
13028
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13029
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
13030
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13031
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13032
+ ] })
13033
+ }
13034
+ ) }),
13035
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13036
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13037
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13038
+ ] }) })
13039
+ ]
13040
+ }
13041
+ ) });
13042
+ };
13043
13043
  const schema = objectType({
13044
13044
  email: stringType().email()
13045
13045
  });
@@ -13068,17 +13068,13 @@ const routeModule = {
13068
13068
  path: "/draft-orders/:id/billing-address"
13069
13069
  },
13070
13070
  {
13071
- Component: Email,
13072
- path: "/draft-orders/:id/email"
13071
+ Component: Metadata,
13072
+ path: "/draft-orders/:id/metadata"
13073
13073
  },
13074
13074
  {
13075
13075
  Component: Items,
13076
13076
  path: "/draft-orders/:id/items"
13077
13077
  },
13078
- {
13079
- Component: Metadata,
13080
- path: "/draft-orders/:id/metadata"
13081
- },
13082
13078
  {
13083
13079
  Component: Promotions,
13084
13080
  path: "/draft-orders/:id/promotions"
@@ -13102,6 +13098,10 @@ const routeModule = {
13102
13098
  {
13103
13099
  Component: CustomItems,
13104
13100
  path: "/draft-orders/:id/custom-items"
13101
+ },
13102
+ {
13103
+ Component: Email,
13104
+ path: "/draft-orders/:id/email"
13105
13105
  }
13106
13106
  ]
13107
13107
  }