@medusajs/draft-order 2.11.0-snapshot-20251017170018 → 2.11.0-snapshot-20251019075109

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 +561 -561
  2. package/.medusa/server/src/admin/index.mjs +562 -562
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -9594,74 +9594,6 @@ const CustomItemsForm = () => {
9594
9594
  const schema$5 = objectType({
9595
9595
  email: stringType().email()
9596
9596
  });
9597
- const Email = () => {
9598
- const { id } = reactRouterDom.useParams();
9599
- const { order, isPending, isError, error } = useOrder(id, {
9600
- fields: "+email"
9601
- });
9602
- if (isError) {
9603
- throw error;
9604
- }
9605
- const isReady = !isPending && !!order;
9606
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9607
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9608
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9609
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9610
- ] }),
9611
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9612
- ] });
9613
- };
9614
- const EmailForm = ({ order }) => {
9615
- const form = reactHookForm.useForm({
9616
- defaultValues: {
9617
- email: order.email ?? ""
9618
- },
9619
- resolver: zod.zodResolver(schema$4)
9620
- });
9621
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9622
- const { handleSuccess } = useRouteModal();
9623
- const onSubmit = form.handleSubmit(async (data) => {
9624
- await mutateAsync(
9625
- { email: data.email },
9626
- {
9627
- onSuccess: () => {
9628
- handleSuccess();
9629
- },
9630
- onError: (error) => {
9631
- ui.toast.error(error.message);
9632
- }
9633
- }
9634
- );
9635
- });
9636
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9637
- KeyboundForm,
9638
- {
9639
- className: "flex flex-1 flex-col overflow-hidden",
9640
- onSubmit,
9641
- children: [
9642
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9643
- Form$2.Field,
9644
- {
9645
- control: form.control,
9646
- name: "email",
9647
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9648
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9649
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9650
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9651
- ] })
9652
- }
9653
- ) }),
9654
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9655
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9656
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9657
- ] }) })
9658
- ]
9659
- }
9660
- ) });
9661
- };
9662
- const schema$4 = objectType({
9663
- email: stringType().email()
9664
- });
9665
9597
  const BillingAddress = () => {
9666
9598
  const { id } = reactRouterDom.useParams();
9667
9599
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9694,7 +9626,7 @@ const BillingAddressForm = ({ order }) => {
9694
9626
  postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9695
9627
  phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9696
9628
  },
9697
- resolver: zod.zodResolver(schema$3)
9629
+ resolver: zod.zodResolver(schema$4)
9698
9630
  });
9699
9631
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9700
9632
  const { handleSuccess } = useRouteModal();
@@ -9851,55 +9783,11 @@ const BillingAddressForm = ({ order }) => {
9851
9783
  }
9852
9784
  ) });
9853
9785
  };
9854
- const schema$3 = addressSchema;
9855
- const InlineTip = React.forwardRef(
9856
- ({ variant = "tip", label, className, children, ...props }, ref) => {
9857
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9858
- return /* @__PURE__ */ jsxRuntime.jsxs(
9859
- "div",
9860
- {
9861
- ref,
9862
- className: ui.clx(
9863
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9864
- className
9865
- ),
9866
- ...props,
9867
- children: [
9868
- /* @__PURE__ */ jsxRuntime.jsx(
9869
- "div",
9870
- {
9871
- role: "presentation",
9872
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9873
- "bg-ui-tag-orange-icon": variant === "warning"
9874
- })
9875
- }
9876
- ),
9877
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
9878
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9879
- labelValue,
9880
- ":"
9881
- ] }),
9882
- " ",
9883
- children
9884
- ] })
9885
- ]
9886
- }
9887
- );
9888
- }
9889
- );
9890
- InlineTip.displayName = "InlineTip";
9891
- const MetadataFieldSchema = objectType({
9892
- key: stringType(),
9893
- disabled: booleanType().optional(),
9894
- value: anyType()
9895
- });
9896
- const MetadataSchema = objectType({
9897
- metadata: arrayType(MetadataFieldSchema)
9898
- });
9899
- const Metadata = () => {
9786
+ const schema$4 = addressSchema;
9787
+ const Email = () => {
9900
9788
  const { id } = reactRouterDom.useParams();
9901
9789
  const { order, isPending, isError, error } = useOrder(id, {
9902
- fields: "metadata"
9790
+ fields: "+email"
9903
9791
  });
9904
9792
  if (isError) {
9905
9793
  throw error;
@@ -9907,33 +9795,26 @@ const Metadata = () => {
9907
9795
  const isReady = !isPending && !!order;
9908
9796
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9909
9797
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9910
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
9911
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9798
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9799
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9912
9800
  ] }),
9913
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9801
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9914
9802
  ] });
9915
9803
  };
9916
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9917
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9918
- const MetadataForm = ({ orderId, metadata }) => {
9919
- const { handleSuccess } = useRouteModal();
9920
- const hasUneditableRows = getHasUneditableRows(metadata);
9921
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
9804
+ const EmailForm = ({ order }) => {
9922
9805
  const form = reactHookForm.useForm({
9923
9806
  defaultValues: {
9924
- metadata: getDefaultValues(metadata)
9807
+ email: order.email ?? ""
9925
9808
  },
9926
- resolver: zod.zodResolver(MetadataSchema)
9809
+ resolver: zod.zodResolver(schema$3)
9927
9810
  });
9928
- const handleSubmit = form.handleSubmit(async (data) => {
9929
- const parsedData = parseValues(data);
9811
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9812
+ const { handleSuccess } = useRouteModal();
9813
+ const onSubmit = form.handleSubmit(async (data) => {
9930
9814
  await mutateAsync(
9931
- {
9932
- metadata: parsedData
9933
- },
9815
+ { email: data.email },
9934
9816
  {
9935
9817
  onSuccess: () => {
9936
- ui.toast.success("Metadata updated");
9937
9818
  handleSuccess();
9938
9819
  },
9939
9820
  onError: (error) => {
@@ -9942,266 +9823,35 @@ const MetadataForm = ({ orderId, metadata }) => {
9942
9823
  }
9943
9824
  );
9944
9825
  });
9945
- const { fields, insert, remove } = reactHookForm.useFieldArray({
9946
- control: form.control,
9947
- name: "metadata"
9948
- });
9949
- function deleteRow(index) {
9950
- remove(index);
9951
- if (fields.length === 1) {
9952
- insert(0, {
9953
- key: "",
9954
- value: "",
9955
- disabled: false
9956
- });
9957
- }
9958
- }
9959
- function insertRow(index, position) {
9960
- insert(index + (position === "above" ? 0 : 1), {
9961
- key: "",
9962
- value: "",
9963
- disabled: false
9964
- });
9965
- }
9966
9826
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9967
9827
  KeyboundForm,
9968
9828
  {
9969
- onSubmit: handleSubmit,
9970
9829
  className: "flex flex-1 flex-col overflow-hidden",
9830
+ onSubmit,
9971
9831
  children: [
9972
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
9973
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
9974
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
9975
- /* @__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" }) }),
9976
- /* @__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" }) })
9977
- ] }),
9978
- fields.map((field, index) => {
9979
- const isDisabled = field.disabled || false;
9980
- let placeholder = "-";
9981
- if (typeof field.value === "object") {
9982
- placeholder = "{ ... }";
9983
- }
9984
- if (Array.isArray(field.value)) {
9985
- placeholder = "[ ... ]";
9986
- }
9987
- return /* @__PURE__ */ jsxRuntime.jsx(
9988
- ConditionalTooltip,
9989
- {
9990
- showTooltip: isDisabled,
9991
- content: "This row is disabled because it contains non-primitive data.",
9992
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
9993
- /* @__PURE__ */ jsxRuntime.jsxs(
9994
- "div",
9995
- {
9996
- className: ui.clx("grid grid-cols-2 divide-x", {
9997
- "overflow-hidden rounded-b-lg": index === fields.length - 1
9998
- }),
9999
- children: [
10000
- /* @__PURE__ */ jsxRuntime.jsx(
10001
- Form$2.Field,
10002
- {
10003
- control: form.control,
10004
- name: `metadata.${index}.key`,
10005
- render: ({ field: field2 }) => {
10006
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10007
- GridInput,
10008
- {
10009
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10010
- ...field2,
10011
- disabled: isDisabled,
10012
- placeholder: "Key"
10013
- }
10014
- ) }) });
10015
- }
10016
- }
10017
- ),
10018
- /* @__PURE__ */ jsxRuntime.jsx(
10019
- Form$2.Field,
10020
- {
10021
- control: form.control,
10022
- name: `metadata.${index}.value`,
10023
- render: ({ field: { value, ...field2 } }) => {
10024
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10025
- GridInput,
10026
- {
10027
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
10028
- ...field2,
10029
- value: isDisabled ? placeholder : value,
10030
- disabled: isDisabled,
10031
- placeholder: "Value"
10032
- }
10033
- ) }) });
10034
- }
10035
- }
10036
- )
10037
- ]
10038
- }
10039
- ),
10040
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
10041
- /* @__PURE__ */ jsxRuntime.jsx(
10042
- ui.DropdownMenu.Trigger,
10043
- {
10044
- className: ui.clx(
10045
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
10046
- {
10047
- hidden: isDisabled
10048
- }
10049
- ),
10050
- disabled: isDisabled,
10051
- asChild: true,
10052
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
10053
- }
10054
- ),
10055
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
10056
- /* @__PURE__ */ jsxRuntime.jsxs(
10057
- ui.DropdownMenu.Item,
10058
- {
10059
- className: "gap-x-2",
10060
- onClick: () => insertRow(index, "above"),
10061
- children: [
10062
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
10063
- "Insert row above"
10064
- ]
10065
- }
10066
- ),
10067
- /* @__PURE__ */ jsxRuntime.jsxs(
10068
- ui.DropdownMenu.Item,
10069
- {
10070
- className: "gap-x-2",
10071
- onClick: () => insertRow(index, "below"),
10072
- children: [
10073
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
10074
- "Insert row below"
10075
- ]
10076
- }
10077
- ),
10078
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
10079
- /* @__PURE__ */ jsxRuntime.jsxs(
10080
- ui.DropdownMenu.Item,
10081
- {
10082
- className: "gap-x-2",
10083
- onClick: () => deleteRow(index),
10084
- children: [
10085
- /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
10086
- "Delete row"
10087
- ]
10088
- }
10089
- )
10090
- ] })
10091
- ] })
10092
- ] })
10093
- },
10094
- field.id
10095
- );
10096
- })
10097
- ] }),
10098
- 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." })
10099
- ] }),
10100
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10101
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
9832
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9833
+ Form$2.Field,
9834
+ {
9835
+ control: form.control,
9836
+ name: "email",
9837
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9838
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9839
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9840
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9841
+ ] })
9842
+ }
9843
+ ) }),
9844
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9845
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10102
9846
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10103
9847
  ] }) })
10104
9848
  ]
10105
9849
  }
10106
9850
  ) });
10107
9851
  };
10108
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
10109
- return /* @__PURE__ */ jsxRuntime.jsx(
10110
- "input",
10111
- {
10112
- ref,
10113
- ...props,
10114
- autoComplete: "off",
10115
- className: ui.clx(
10116
- "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",
10117
- className
10118
- )
10119
- }
10120
- );
9852
+ const schema$3 = objectType({
9853
+ email: stringType().email()
10121
9854
  });
10122
- GridInput.displayName = "MetadataForm.GridInput";
10123
- const PlaceholderInner = () => {
10124
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
10125
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
10126
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10127
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
10128
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
10129
- ] }) })
10130
- ] });
10131
- };
10132
- const EDITABLE_TYPES = ["string", "number", "boolean"];
10133
- function getDefaultValues(metadata) {
10134
- if (!metadata || !Object.keys(metadata).length) {
10135
- return [
10136
- {
10137
- key: "",
10138
- value: "",
10139
- disabled: false
10140
- }
10141
- ];
10142
- }
10143
- return Object.entries(metadata).map(([key, value]) => {
10144
- if (!EDITABLE_TYPES.includes(typeof value)) {
10145
- return {
10146
- key,
10147
- value,
10148
- disabled: true
10149
- };
10150
- }
10151
- let stringValue = value;
10152
- if (typeof value !== "string") {
10153
- stringValue = JSON.stringify(value);
10154
- }
10155
- return {
10156
- key,
10157
- value: stringValue,
10158
- original_key: key
10159
- };
10160
- });
10161
- }
10162
- function parseValues(values) {
10163
- const metadata = values.metadata;
10164
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
10165
- if (isEmpty) {
10166
- return null;
10167
- }
10168
- const update = {};
10169
- metadata.forEach((field) => {
10170
- let key = field.key;
10171
- let value = field.value;
10172
- const disabled = field.disabled;
10173
- if (!key || !value) {
10174
- return;
10175
- }
10176
- if (disabled) {
10177
- update[key] = value;
10178
- return;
10179
- }
10180
- key = key.trim();
10181
- value = value.trim();
10182
- if (value === "true") {
10183
- update[key] = true;
10184
- } else if (value === "false") {
10185
- update[key] = false;
10186
- } else {
10187
- const parsedNumber = parseFloat(value);
10188
- if (!isNaN(parsedNumber)) {
10189
- update[key] = parsedNumber;
10190
- } else {
10191
- update[key] = value;
10192
- }
10193
- }
10194
- });
10195
- return update;
10196
- }
10197
- function getHasUneditableRows(metadata) {
10198
- if (!metadata) {
10199
- return false;
10200
- }
10201
- return Object.values(metadata).some(
10202
- (value) => !EDITABLE_TYPES.includes(typeof value)
10203
- );
10204
- }
10205
9855
  const NumberInput = React.forwardRef(
10206
9856
  ({
10207
9857
  value,
@@ -10997,185 +10647,535 @@ const ExistingItemsForm = ({ orderId, items }) => {
10997
10647
  }
10998
10648
  );
10999
10649
  };
11000
- const columnHelper = ui.createDataTableColumnHelper();
11001
- const useColumns = () => {
11002
- return React.useMemo(() => {
10650
+ const columnHelper = ui.createDataTableColumnHelper();
10651
+ const useColumns = () => {
10652
+ return React.useMemo(() => {
10653
+ return [
10654
+ columnHelper.select(),
10655
+ columnHelper.accessor("product.title", {
10656
+ header: "Product",
10657
+ cell: ({ row }) => {
10658
+ var _a, _b, _c;
10659
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
10660
+ /* @__PURE__ */ jsxRuntime.jsx(
10661
+ Thumbnail,
10662
+ {
10663
+ thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
10664
+ alt: (_b = row.original.product) == null ? void 0 : _b.title
10665
+ }
10666
+ ),
10667
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
10668
+ ] });
10669
+ },
10670
+ enableSorting: true
10671
+ }),
10672
+ columnHelper.accessor("title", {
10673
+ header: "Variant",
10674
+ enableSorting: true
10675
+ }),
10676
+ columnHelper.accessor("sku", {
10677
+ header: "SKU",
10678
+ cell: ({ getValue }) => {
10679
+ return getValue() ?? "-";
10680
+ },
10681
+ enableSorting: true
10682
+ }),
10683
+ columnHelper.accessor("updated_at", {
10684
+ header: "Updated",
10685
+ cell: ({ getValue }) => {
10686
+ return /* @__PURE__ */ jsxRuntime.jsx(
10687
+ ui.Tooltip,
10688
+ {
10689
+ content: getFullDate({ date: getValue(), includeTime: true }),
10690
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10691
+ }
10692
+ );
10693
+ },
10694
+ enableSorting: true,
10695
+ sortAscLabel: "Oldest first",
10696
+ sortDescLabel: "Newest first"
10697
+ }),
10698
+ columnHelper.accessor("created_at", {
10699
+ header: "Created",
10700
+ cell: ({ getValue }) => {
10701
+ return /* @__PURE__ */ jsxRuntime.jsx(
10702
+ ui.Tooltip,
10703
+ {
10704
+ content: getFullDate({ date: getValue(), includeTime: true }),
10705
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10706
+ }
10707
+ );
10708
+ },
10709
+ enableSorting: true,
10710
+ sortAscLabel: "Oldest first",
10711
+ sortDescLabel: "Newest first"
10712
+ })
10713
+ ];
10714
+ }, []);
10715
+ };
10716
+ const CustomItemForm = ({ orderId, currencyCode }) => {
10717
+ const { setIsOpen } = useStackedModal();
10718
+ const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
10719
+ const form = reactHookForm.useForm({
10720
+ defaultValues: {
10721
+ title: "",
10722
+ quantity: 1,
10723
+ unit_price: ""
10724
+ },
10725
+ resolver: zod.zodResolver(customItemSchema)
10726
+ });
10727
+ const onSubmit = form.handleSubmit(async (data) => {
10728
+ await addItems(
10729
+ {
10730
+ items: [
10731
+ {
10732
+ title: data.title,
10733
+ quantity: data.quantity,
10734
+ unit_price: convertNumber(data.unit_price)
10735
+ }
10736
+ ]
10737
+ },
10738
+ {
10739
+ onSuccess: () => {
10740
+ setIsOpen(STACKED_MODAL_ID, false);
10741
+ },
10742
+ onError: (e) => {
10743
+ ui.toast.error(e.message);
10744
+ }
10745
+ }
10746
+ );
10747
+ });
10748
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
10749
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
10750
+ /* @__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: [
10751
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10752
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
10753
+ /* @__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." }) })
10754
+ ] }),
10755
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10756
+ /* @__PURE__ */ jsxRuntime.jsx(
10757
+ Form$2.Field,
10758
+ {
10759
+ control: form.control,
10760
+ name: "title",
10761
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10762
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10763
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
10764
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
10765
+ ] }),
10766
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10767
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10768
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10769
+ ] })
10770
+ ] }) })
10771
+ }
10772
+ ),
10773
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10774
+ /* @__PURE__ */ jsxRuntime.jsx(
10775
+ Form$2.Field,
10776
+ {
10777
+ control: form.control,
10778
+ name: "unit_price",
10779
+ render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10780
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10781
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
10782
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
10783
+ ] }),
10784
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10785
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10786
+ ui.CurrencyInput,
10787
+ {
10788
+ symbol: getNativeSymbol(currencyCode),
10789
+ code: currencyCode,
10790
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
10791
+ ...field
10792
+ }
10793
+ ) }),
10794
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10795
+ ] })
10796
+ ] }) })
10797
+ }
10798
+ ),
10799
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10800
+ /* @__PURE__ */ jsxRuntime.jsx(
10801
+ Form$2.Field,
10802
+ {
10803
+ control: form.control,
10804
+ name: "quantity",
10805
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10806
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10807
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
10808
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
10809
+ ] }),
10810
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
10811
+ /* @__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" }) }) }),
10812
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10813
+ ] })
10814
+ ] }) })
10815
+ }
10816
+ )
10817
+ ] }) }) }),
10818
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10819
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10820
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
10821
+ ] }) })
10822
+ ] }) }) });
10823
+ };
10824
+ const customItemSchema = objectType({
10825
+ title: stringType().min(1),
10826
+ quantity: numberType(),
10827
+ unit_price: unionType([numberType(), stringType()])
10828
+ });
10829
+ const InlineTip = React.forwardRef(
10830
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10831
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10832
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10833
+ "div",
10834
+ {
10835
+ ref,
10836
+ className: ui.clx(
10837
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10838
+ className
10839
+ ),
10840
+ ...props,
10841
+ children: [
10842
+ /* @__PURE__ */ jsxRuntime.jsx(
10843
+ "div",
10844
+ {
10845
+ role: "presentation",
10846
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10847
+ "bg-ui-tag-orange-icon": variant === "warning"
10848
+ })
10849
+ }
10850
+ ),
10851
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
10852
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10853
+ labelValue,
10854
+ ":"
10855
+ ] }),
10856
+ " ",
10857
+ children
10858
+ ] })
10859
+ ]
10860
+ }
10861
+ );
10862
+ }
10863
+ );
10864
+ InlineTip.displayName = "InlineTip";
10865
+ const MetadataFieldSchema = objectType({
10866
+ key: stringType(),
10867
+ disabled: booleanType().optional(),
10868
+ value: anyType()
10869
+ });
10870
+ const MetadataSchema = objectType({
10871
+ metadata: arrayType(MetadataFieldSchema)
10872
+ });
10873
+ const Metadata = () => {
10874
+ const { id } = reactRouterDom.useParams();
10875
+ const { order, isPending, isError, error } = useOrder(id, {
10876
+ fields: "metadata"
10877
+ });
10878
+ if (isError) {
10879
+ throw error;
10880
+ }
10881
+ const isReady = !isPending && !!order;
10882
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10883
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10884
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
10885
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10886
+ ] }),
10887
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10888
+ ] });
10889
+ };
10890
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10891
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10892
+ const MetadataForm = ({ orderId, metadata }) => {
10893
+ const { handleSuccess } = useRouteModal();
10894
+ const hasUneditableRows = getHasUneditableRows(metadata);
10895
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10896
+ const form = reactHookForm.useForm({
10897
+ defaultValues: {
10898
+ metadata: getDefaultValues(metadata)
10899
+ },
10900
+ resolver: zod.zodResolver(MetadataSchema)
10901
+ });
10902
+ const handleSubmit = form.handleSubmit(async (data) => {
10903
+ const parsedData = parseValues(data);
10904
+ await mutateAsync(
10905
+ {
10906
+ metadata: parsedData
10907
+ },
10908
+ {
10909
+ onSuccess: () => {
10910
+ ui.toast.success("Metadata updated");
10911
+ handleSuccess();
10912
+ },
10913
+ onError: (error) => {
10914
+ ui.toast.error(error.message);
10915
+ }
10916
+ }
10917
+ );
10918
+ });
10919
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
10920
+ control: form.control,
10921
+ name: "metadata"
10922
+ });
10923
+ function deleteRow(index) {
10924
+ remove(index);
10925
+ if (fields.length === 1) {
10926
+ insert(0, {
10927
+ key: "",
10928
+ value: "",
10929
+ disabled: false
10930
+ });
10931
+ }
10932
+ }
10933
+ function insertRow(index, position) {
10934
+ insert(index + (position === "above" ? 0 : 1), {
10935
+ key: "",
10936
+ value: "",
10937
+ disabled: false
10938
+ });
10939
+ }
10940
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10941
+ KeyboundForm,
10942
+ {
10943
+ onSubmit: handleSubmit,
10944
+ className: "flex flex-1 flex-col overflow-hidden",
10945
+ children: [
10946
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10947
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10948
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10949
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10950
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10951
+ ] }),
10952
+ fields.map((field, index) => {
10953
+ const isDisabled = field.disabled || false;
10954
+ let placeholder = "-";
10955
+ if (typeof field.value === "object") {
10956
+ placeholder = "{ ... }";
10957
+ }
10958
+ if (Array.isArray(field.value)) {
10959
+ placeholder = "[ ... ]";
10960
+ }
10961
+ return /* @__PURE__ */ jsxRuntime.jsx(
10962
+ ConditionalTooltip,
10963
+ {
10964
+ showTooltip: isDisabled,
10965
+ content: "This row is disabled because it contains non-primitive data.",
10966
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
10967
+ /* @__PURE__ */ jsxRuntime.jsxs(
10968
+ "div",
10969
+ {
10970
+ className: ui.clx("grid grid-cols-2 divide-x", {
10971
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
10972
+ }),
10973
+ children: [
10974
+ /* @__PURE__ */ jsxRuntime.jsx(
10975
+ Form$2.Field,
10976
+ {
10977
+ control: form.control,
10978
+ name: `metadata.${index}.key`,
10979
+ render: ({ field: field2 }) => {
10980
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10981
+ GridInput,
10982
+ {
10983
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
10984
+ ...field2,
10985
+ disabled: isDisabled,
10986
+ placeholder: "Key"
10987
+ }
10988
+ ) }) });
10989
+ }
10990
+ }
10991
+ ),
10992
+ /* @__PURE__ */ jsxRuntime.jsx(
10993
+ Form$2.Field,
10994
+ {
10995
+ control: form.control,
10996
+ name: `metadata.${index}.value`,
10997
+ render: ({ field: { value, ...field2 } }) => {
10998
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10999
+ GridInput,
11000
+ {
11001
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
11002
+ ...field2,
11003
+ value: isDisabled ? placeholder : value,
11004
+ disabled: isDisabled,
11005
+ placeholder: "Value"
11006
+ }
11007
+ ) }) });
11008
+ }
11009
+ }
11010
+ )
11011
+ ]
11012
+ }
11013
+ ),
11014
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
11015
+ /* @__PURE__ */ jsxRuntime.jsx(
11016
+ ui.DropdownMenu.Trigger,
11017
+ {
11018
+ className: ui.clx(
11019
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
11020
+ {
11021
+ hidden: isDisabled
11022
+ }
11023
+ ),
11024
+ disabled: isDisabled,
11025
+ asChild: true,
11026
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
11027
+ }
11028
+ ),
11029
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
11030
+ /* @__PURE__ */ jsxRuntime.jsxs(
11031
+ ui.DropdownMenu.Item,
11032
+ {
11033
+ className: "gap-x-2",
11034
+ onClick: () => insertRow(index, "above"),
11035
+ children: [
11036
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
11037
+ "Insert row above"
11038
+ ]
11039
+ }
11040
+ ),
11041
+ /* @__PURE__ */ jsxRuntime.jsxs(
11042
+ ui.DropdownMenu.Item,
11043
+ {
11044
+ className: "gap-x-2",
11045
+ onClick: () => insertRow(index, "below"),
11046
+ children: [
11047
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
11048
+ "Insert row below"
11049
+ ]
11050
+ }
11051
+ ),
11052
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
11053
+ /* @__PURE__ */ jsxRuntime.jsxs(
11054
+ ui.DropdownMenu.Item,
11055
+ {
11056
+ className: "gap-x-2",
11057
+ onClick: () => deleteRow(index),
11058
+ children: [
11059
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
11060
+ "Delete row"
11061
+ ]
11062
+ }
11063
+ )
11064
+ ] })
11065
+ ] })
11066
+ ] })
11067
+ },
11068
+ field.id
11069
+ );
11070
+ })
11071
+ ] }),
11072
+ hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
11073
+ ] }),
11074
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11075
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11076
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11077
+ ] }) })
11078
+ ]
11079
+ }
11080
+ ) });
11081
+ };
11082
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
11083
+ return /* @__PURE__ */ jsxRuntime.jsx(
11084
+ "input",
11085
+ {
11086
+ ref,
11087
+ ...props,
11088
+ autoComplete: "off",
11089
+ className: ui.clx(
11090
+ "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
11091
+ className
11092
+ )
11093
+ }
11094
+ );
11095
+ });
11096
+ GridInput.displayName = "MetadataForm.GridInput";
11097
+ const PlaceholderInner = () => {
11098
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
11099
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
11100
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11101
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
11102
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
11103
+ ] }) })
11104
+ ] });
11105
+ };
11106
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
11107
+ function getDefaultValues(metadata) {
11108
+ if (!metadata || !Object.keys(metadata).length) {
11003
11109
  return [
11004
- columnHelper.select(),
11005
- columnHelper.accessor("product.title", {
11006
- header: "Product",
11007
- cell: ({ row }) => {
11008
- var _a, _b, _c;
11009
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
11010
- /* @__PURE__ */ jsxRuntime.jsx(
11011
- Thumbnail,
11012
- {
11013
- thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
11014
- alt: (_b = row.original.product) == null ? void 0 : _b.title
11015
- }
11016
- ),
11017
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
11018
- ] });
11019
- },
11020
- enableSorting: true
11021
- }),
11022
- columnHelper.accessor("title", {
11023
- header: "Variant",
11024
- enableSorting: true
11025
- }),
11026
- columnHelper.accessor("sku", {
11027
- header: "SKU",
11028
- cell: ({ getValue }) => {
11029
- return getValue() ?? "-";
11030
- },
11031
- enableSorting: true
11032
- }),
11033
- columnHelper.accessor("updated_at", {
11034
- header: "Updated",
11035
- cell: ({ getValue }) => {
11036
- return /* @__PURE__ */ jsxRuntime.jsx(
11037
- ui.Tooltip,
11038
- {
11039
- content: getFullDate({ date: getValue(), includeTime: true }),
11040
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
11041
- }
11042
- );
11043
- },
11044
- enableSorting: true,
11045
- sortAscLabel: "Oldest first",
11046
- sortDescLabel: "Newest first"
11047
- }),
11048
- columnHelper.accessor("created_at", {
11049
- header: "Created",
11050
- cell: ({ getValue }) => {
11051
- return /* @__PURE__ */ jsxRuntime.jsx(
11052
- ui.Tooltip,
11053
- {
11054
- content: getFullDate({ date: getValue(), includeTime: true }),
11055
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
11056
- }
11057
- );
11058
- },
11059
- enableSorting: true,
11060
- sortAscLabel: "Oldest first",
11061
- sortDescLabel: "Newest first"
11062
- })
11110
+ {
11111
+ key: "",
11112
+ value: "",
11113
+ disabled: false
11114
+ }
11063
11115
  ];
11064
- }, []);
11065
- };
11066
- const CustomItemForm = ({ orderId, currencyCode }) => {
11067
- const { setIsOpen } = useStackedModal();
11068
- const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
11069
- const form = reactHookForm.useForm({
11070
- defaultValues: {
11071
- title: "",
11072
- quantity: 1,
11073
- unit_price: ""
11074
- },
11075
- resolver: zod.zodResolver(customItemSchema)
11116
+ }
11117
+ return Object.entries(metadata).map(([key, value]) => {
11118
+ if (!EDITABLE_TYPES.includes(typeof value)) {
11119
+ return {
11120
+ key,
11121
+ value,
11122
+ disabled: true
11123
+ };
11124
+ }
11125
+ let stringValue = value;
11126
+ if (typeof value !== "string") {
11127
+ stringValue = JSON.stringify(value);
11128
+ }
11129
+ return {
11130
+ key,
11131
+ value: stringValue,
11132
+ original_key: key
11133
+ };
11076
11134
  });
11077
- const onSubmit = form.handleSubmit(async (data) => {
11078
- await addItems(
11079
- {
11080
- items: [
11081
- {
11082
- title: data.title,
11083
- quantity: data.quantity,
11084
- unit_price: convertNumber(data.unit_price)
11085
- }
11086
- ]
11087
- },
11088
- {
11089
- onSuccess: () => {
11090
- setIsOpen(STACKED_MODAL_ID, false);
11091
- },
11092
- onError: (e) => {
11093
- ui.toast.error(e.message);
11094
- }
11135
+ }
11136
+ function parseValues(values) {
11137
+ const metadata = values.metadata;
11138
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
11139
+ if (isEmpty) {
11140
+ return null;
11141
+ }
11142
+ const update = {};
11143
+ metadata.forEach((field) => {
11144
+ let key = field.key;
11145
+ let value = field.value;
11146
+ const disabled = field.disabled;
11147
+ if (!key || !value) {
11148
+ return;
11149
+ }
11150
+ if (disabled) {
11151
+ update[key] = value;
11152
+ return;
11153
+ }
11154
+ key = key.trim();
11155
+ value = value.trim();
11156
+ if (value === "true") {
11157
+ update[key] = true;
11158
+ } else if (value === "false") {
11159
+ update[key] = false;
11160
+ } else {
11161
+ const parsedNumber = parseFloat(value);
11162
+ if (!isNaN(parsedNumber)) {
11163
+ update[key] = parsedNumber;
11164
+ } else {
11165
+ update[key] = value;
11095
11166
  }
11096
- );
11167
+ }
11097
11168
  });
11098
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
11099
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
11100
- /* @__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: [
11101
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11102
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
11103
- /* @__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." }) })
11104
- ] }),
11105
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11106
- /* @__PURE__ */ jsxRuntime.jsx(
11107
- Form$2.Field,
11108
- {
11109
- control: form.control,
11110
- name: "title",
11111
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11112
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11113
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
11114
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
11115
- ] }),
11116
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11117
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11118
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11119
- ] })
11120
- ] }) })
11121
- }
11122
- ),
11123
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11124
- /* @__PURE__ */ jsxRuntime.jsx(
11125
- Form$2.Field,
11126
- {
11127
- control: form.control,
11128
- name: "unit_price",
11129
- render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11130
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11131
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
11132
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
11133
- ] }),
11134
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11135
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11136
- ui.CurrencyInput,
11137
- {
11138
- symbol: getNativeSymbol(currencyCode),
11139
- code: currencyCode,
11140
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
11141
- ...field
11142
- }
11143
- ) }),
11144
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11145
- ] })
11146
- ] }) })
11147
- }
11148
- ),
11149
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11150
- /* @__PURE__ */ jsxRuntime.jsx(
11151
- Form$2.Field,
11152
- {
11153
- control: form.control,
11154
- name: "quantity",
11155
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11156
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11157
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
11158
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
11159
- ] }),
11160
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
11161
- /* @__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" }) }) }),
11162
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11163
- ] })
11164
- ] }) })
11165
- }
11166
- )
11167
- ] }) }) }),
11168
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11169
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11170
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
11171
- ] }) })
11172
- ] }) }) });
11173
- };
11174
- const customItemSchema = objectType({
11175
- title: stringType().min(1),
11176
- quantity: numberType(),
11177
- unit_price: unionType([numberType(), stringType()])
11178
- });
11169
+ return update;
11170
+ }
11171
+ function getHasUneditableRows(metadata) {
11172
+ if (!metadata) {
11173
+ return false;
11174
+ }
11175
+ return Object.values(metadata).some(
11176
+ (value) => !EDITABLE_TYPES.includes(typeof value)
11177
+ );
11178
+ }
11179
11179
  const PROMOTION_QUERY_KEY = "promotions";
11180
11180
  const promotionsQueryKeys = {
11181
11181
  list: (query2) => [
@@ -13069,22 +13069,22 @@ const routeModule = {
13069
13069
  Component: CustomItems,
13070
13070
  path: "/draft-orders/:id/custom-items"
13071
13071
  },
13072
- {
13073
- Component: Email,
13074
- path: "/draft-orders/:id/email"
13075
- },
13076
13072
  {
13077
13073
  Component: BillingAddress,
13078
13074
  path: "/draft-orders/:id/billing-address"
13079
13075
  },
13080
13076
  {
13081
- Component: Metadata,
13082
- path: "/draft-orders/:id/metadata"
13077
+ Component: Email,
13078
+ path: "/draft-orders/:id/email"
13083
13079
  },
13084
13080
  {
13085
13081
  Component: Items,
13086
13082
  path: "/draft-orders/:id/items"
13087
13083
  },
13084
+ {
13085
+ Component: Metadata,
13086
+ path: "/draft-orders/:id/metadata"
13087
+ },
13088
13088
  {
13089
13089
  Component: Promotions,
13090
13090
  path: "/draft-orders/:id/promotions"