@medusajs/draft-order 2.11.1-preview-20251025120209 → 2.11.1-preview-20251025150201

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 +1312 -1312
  2. package/.medusa/server/src/admin/index.mjs +1313 -1313
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.mjs CHANGED
@@ -4,7 +4,7 @@ import { Tooltip, DropdownMenu, clx, IconButton, useDataTable, DataTable as Data
4
4
  import { useQuery, useQueryClient, useMutation, keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
5
5
  import React, { useState, useCallback, useMemo, Fragment, createContext, forwardRef, useId, useContext, useTransition, useRef, useImperativeHandle, useDeferredValue, useEffect, Suspense } from "react";
6
6
  import { useSearchParams, Link, useNavigate, Outlet, useBlocker, useLocation, useParams } from "react-router-dom";
7
- import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, Minus, PencilSquare, EllipsisVertical, ArrowUpMini, ArrowDownMini } from "@medusajs/icons";
7
+ import { EllipsisHorizontal, XMark, InformationCircleSolid, XMarkMini, TrianglesMini, CheckMini, EllipseMiniSolid, PlusMini, ExclamationCircleSolid, ArrowPath, FlyingBox, CurrencyDollar, Envelope, Channels, Trash, ArrowUpRightOnBox, TriangleDownMini, Check, SquareTwoStack, Photo, TriangleRightMini, Shopping, Buildings, TruckFast, Plus, ReceiptPercent, EllipsisVertical, ArrowUpMini, ArrowDownMini, Minus, PencilSquare } from "@medusajs/icons";
8
8
  import Medusa from "@medusajs/js-sdk";
9
9
  import { format, formatDistance, sub, subDays, subMonths } from "date-fns";
10
10
  import { enUS } from "date-fns/locale";
@@ -9565,27 +9565,6 @@ const ID = () => {
9565
9565
  /* @__PURE__ */ jsx(Outlet, {})
9566
9566
  ] });
9567
9567
  };
9568
- const CustomItems = () => {
9569
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9570
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
9571
- /* @__PURE__ */ jsx(CustomItemsForm, {})
9572
- ] });
9573
- };
9574
- const CustomItemsForm = () => {
9575
- const form = useForm({
9576
- resolver: zodResolver(schema$5)
9577
- });
9578
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9579
- /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
9580
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9581
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9582
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
9583
- ] }) })
9584
- ] }) });
9585
- };
9586
- const schema$5 = objectType({
9587
- email: stringType().email()
9588
- });
9589
9568
  const BillingAddress = () => {
9590
9569
  const { id } = useParams();
9591
9570
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9618,7 +9597,7 @@ const BillingAddressForm = ({ order }) => {
9618
9597
  postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9619
9598
  phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9620
9599
  },
9621
- resolver: zodResolver(schema$4)
9600
+ resolver: zodResolver(schema$5)
9622
9601
  });
9623
9602
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9624
9603
  const { handleSuccess } = useRouteModal();
@@ -9775,7 +9754,7 @@ const BillingAddressForm = ({ order }) => {
9775
9754
  }
9776
9755
  ) });
9777
9756
  };
9778
- const schema$4 = addressSchema;
9757
+ const schema$5 = addressSchema;
9779
9758
  const Email = () => {
9780
9759
  const { id } = useParams();
9781
9760
  const { order, isPending, isError, error } = useOrder(id, {
@@ -9798,7 +9777,7 @@ const EmailForm = ({ order }) => {
9798
9777
  defaultValues: {
9799
9778
  email: order.email ?? ""
9800
9779
  },
9801
- resolver: zodResolver(schema$3)
9780
+ resolver: zodResolver(schema$4)
9802
9781
  });
9803
9782
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9804
9783
  const { handleSuccess } = useRouteModal();
@@ -9841,1069 +9820,95 @@ const EmailForm = ({ order }) => {
9841
9820
  }
9842
9821
  ) });
9843
9822
  };
9844
- const schema$3 = objectType({
9823
+ const schema$4 = objectType({
9845
9824
  email: stringType().email()
9846
9825
  });
9847
- const NumberInput = forwardRef(
9848
- ({
9849
- value,
9850
- onChange,
9851
- size = "base",
9852
- min = 0,
9853
- max = 100,
9854
- step = 1,
9855
- className,
9856
- disabled,
9857
- ...props
9858
- }, ref) => {
9859
- const handleChange = (event) => {
9860
- const newValue = event.target.value === "" ? min : Number(event.target.value);
9861
- if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
9862
- onChange(newValue);
9863
- }
9864
- };
9865
- const handleIncrement = () => {
9866
- const newValue = value + step;
9867
- if (max === void 0 || newValue <= max) {
9868
- onChange(newValue);
9869
- }
9870
- };
9871
- const handleDecrement = () => {
9872
- const newValue = value - step;
9873
- if (min === void 0 || newValue >= min) {
9874
- onChange(newValue);
9875
- }
9876
- };
9826
+ const InlineTip = forwardRef(
9827
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
9828
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
9877
9829
  return /* @__PURE__ */ jsxs(
9878
9830
  "div",
9879
9831
  {
9832
+ ref,
9880
9833
  className: clx(
9881
- "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
9882
- "[&:has(input:focus)]:shadow-borders-interactive-with-active",
9883
- {
9884
- "h-7": size === "small",
9885
- "h-8": size === "base"
9886
- },
9834
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
9887
9835
  className
9888
9836
  ),
9837
+ ...props,
9889
9838
  children: [
9890
9839
  /* @__PURE__ */ jsx(
9891
- "input",
9892
- {
9893
- ref,
9894
- type: "number",
9895
- value,
9896
- onChange: handleChange,
9897
- min,
9898
- max,
9899
- step,
9900
- className: clx(
9901
- "flex-1 px-2 py-1 bg-transparent txt-compact-small text-ui-fg-base outline-none [appearance:textfield]",
9902
- "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
9903
- "placeholder:text-ui-fg-muted"
9904
- ),
9905
- ...props
9906
- }
9907
- ),
9908
- /* @__PURE__ */ jsxs(
9909
- "button",
9840
+ "div",
9910
9841
  {
9911
- className: clx(
9912
- "flex items-center justify-center outline-none transition-fg",
9913
- "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
9914
- "focus:bg-ui-bg-field-component-hover",
9915
- "hover:bg-ui-bg-field-component-hover",
9916
- {
9917
- "size-7": size === "small",
9918
- "size-8": size === "base"
9919
- }
9920
- ),
9921
- type: "button",
9922
- onClick: handleDecrement,
9923
- disabled: min !== void 0 && value <= min || disabled,
9924
- children: [
9925
- /* @__PURE__ */ jsx(Minus, {}),
9926
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
9927
- ]
9842
+ role: "presentation",
9843
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
9844
+ "bg-ui-tag-orange-icon": variant === "warning"
9845
+ })
9928
9846
  }
9929
9847
  ),
9930
- /* @__PURE__ */ jsxs(
9931
- "button",
9932
- {
9933
- className: clx(
9934
- "flex items-center justify-center outline-none transition-fg",
9935
- "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
9936
- "focus:bg-ui-bg-field-hover",
9937
- "hover:bg-ui-bg-field-hover",
9938
- {
9939
- "size-7": size === "small",
9940
- "size-8": size === "base"
9941
- }
9942
- ),
9943
- type: "button",
9944
- onClick: handleIncrement,
9945
- disabled: max !== void 0 && value >= max || disabled,
9946
- children: [
9947
- /* @__PURE__ */ jsx(Plus, {}),
9948
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Increase by ${step}` })
9949
- ]
9950
- }
9951
- )
9848
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
9849
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
9850
+ labelValue,
9851
+ ":"
9852
+ ] }),
9853
+ " ",
9854
+ children
9855
+ ] })
9952
9856
  ]
9953
9857
  }
9954
9858
  );
9955
9859
  }
9956
9860
  );
9957
- const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
9958
- const productVariantsQueryKeys = {
9959
- list: (query2) => [
9960
- PRODUCT_VARIANTS_QUERY_KEY,
9961
- query2 ? query2 : void 0
9962
- ]
9963
- };
9964
- const useProductVariants = (query2, options) => {
9965
- const { data, ...rest } = useQuery({
9966
- queryKey: productVariantsQueryKeys.list(query2),
9967
- queryFn: async () => await sdk.admin.productVariant.list(query2),
9968
- ...options
9969
- });
9970
- return { ...data, ...rest };
9971
- };
9972
- const useCancelOrderEdit = ({ preview }) => {
9973
- const { mutateAsync: cancelOrderEdit } = useDraftOrderCancelEdit(preview == null ? void 0 : preview.id);
9974
- const onCancel = useCallback(async () => {
9975
- if (!preview) {
9976
- return true;
9977
- }
9978
- let res = false;
9979
- await cancelOrderEdit(void 0, {
9980
- onError: (e) => {
9981
- toast.error(e.message);
9982
- },
9983
- onSuccess: () => {
9984
- res = true;
9985
- }
9986
- });
9987
- return res;
9988
- }, [preview, cancelOrderEdit]);
9989
- return { onCancel };
9990
- };
9991
- let IS_REQUEST_RUNNING = false;
9992
- const useInitiateOrderEdit = ({
9993
- preview
9994
- }) => {
9995
- const navigate = useNavigate();
9996
- const { mutateAsync } = useDraftOrderBeginEdit(preview == null ? void 0 : preview.id);
9997
- useEffect(() => {
9998
- async function run() {
9999
- if (IS_REQUEST_RUNNING || !preview) {
10000
- return;
10001
- }
10002
- if (preview.order_change) {
10003
- return;
10004
- }
10005
- IS_REQUEST_RUNNING = true;
10006
- await mutateAsync(void 0, {
10007
- onError: (e) => {
10008
- toast.error(e.message);
10009
- navigate(`/draft-orders/${preview.id}`, { replace: true });
10010
- return;
10011
- }
10012
- });
10013
- IS_REQUEST_RUNNING = false;
10014
- }
10015
- run();
10016
- }, [preview, navigate, mutateAsync]);
10017
- };
10018
- function convertNumber(value) {
10019
- return typeof value === "string" ? Number(value.replace(",", ".")) : value;
10020
- }
10021
- const STACKED_MODAL_ID = "items_stacked_modal";
10022
- const Items = () => {
9861
+ InlineTip.displayName = "InlineTip";
9862
+ const MetadataFieldSchema = objectType({
9863
+ key: stringType(),
9864
+ disabled: booleanType().optional(),
9865
+ value: anyType()
9866
+ });
9867
+ const MetadataSchema = objectType({
9868
+ metadata: arrayType(MetadataFieldSchema)
9869
+ });
9870
+ const Metadata = () => {
10023
9871
  const { id } = useParams();
10024
- const {
10025
- order: preview,
10026
- isPending: isPreviewPending,
10027
- isError: isPreviewError,
10028
- error: previewError
10029
- } = useOrderPreview(id, void 0, {
10030
- placeholderData: keepPreviousData
9872
+ const { order, isPending, isError, error } = useOrder(id, {
9873
+ fields: "metadata"
10031
9874
  });
10032
- useInitiateOrderEdit({ preview });
10033
- const { draft_order, isPending, isError, error } = useDraftOrder(
10034
- id,
10035
- {
10036
- fields: "currency_code"
10037
- },
10038
- {
10039
- enabled: !!id
10040
- }
10041
- );
10042
- const { onCancel } = useCancelOrderEdit({ preview });
10043
9875
  if (isError) {
10044
9876
  throw error;
10045
9877
  }
10046
- if (isPreviewError) {
10047
- throw previewError;
10048
- }
10049
- const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
10050
- return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: ready ? /* @__PURE__ */ jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) : /* @__PURE__ */ jsxs("div", { children: [
10051
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Items" }) }),
10052
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
10053
- ] }) });
9878
+ const isReady = !isPending && !!order;
9879
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9880
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9881
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
9882
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
9883
+ ] }),
9884
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
9885
+ ] });
10054
9886
  };
10055
- const ItemsForm = ({ preview, currencyCode }) => {
10056
- var _a;
10057
- const [isSubmitting, setIsSubmitting] = useState(false);
10058
- const [modalContent, setModalContent] = useState(
10059
- null
10060
- );
9887
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
9888
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
9889
+ const MetadataForm = ({ orderId, metadata }) => {
10061
9890
  const { handleSuccess } = useRouteModal();
10062
- const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
10063
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10064
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
10065
- const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
10066
- const matches = useMemo(() => {
10067
- return matchSorter(preview.items, query2, {
10068
- keys: ["product_title", "variant_title", "variant_sku", "title"]
10069
- });
10070
- }, [preview.items, query2]);
10071
- const onSubmit = async () => {
10072
- setIsSubmitting(true);
10073
- let requestSucceeded = false;
10074
- await requestOrderEdit(void 0, {
10075
- onError: (e) => {
10076
- toast.error(`Failed to request order edit: ${e.message}`);
10077
- },
10078
- onSuccess: () => {
10079
- requestSucceeded = true;
10080
- }
10081
- });
10082
- if (!requestSucceeded) {
10083
- setIsSubmitting(false);
10084
- return;
10085
- }
10086
- await confirmOrderEdit(void 0, {
10087
- onError: (e) => {
10088
- toast.error(`Failed to confirm order edit: ${e.message}`);
10089
- },
10090
- onSuccess: () => {
10091
- handleSuccess();
10092
- },
10093
- onSettled: () => {
10094
- setIsSubmitting(false);
10095
- }
10096
- });
10097
- };
10098
- const onKeyDown = useCallback(
10099
- (e) => {
10100
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
10101
- if (modalContent || isSubmitting) {
10102
- return;
10103
- }
10104
- onSubmit();
10105
- }
10106
- },
10107
- [modalContent, isSubmitting, onSubmit]
10108
- );
10109
- useEffect(() => {
10110
- document.addEventListener("keydown", onKeyDown);
10111
- return () => {
10112
- document.removeEventListener("keydown", onKeyDown);
10113
- };
10114
- }, [onKeyDown]);
10115
- return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
10116
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
10117
- /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxs(
10118
- StackedFocusModal,
10119
- {
10120
- id: STACKED_MODAL_ID,
10121
- onOpenChangeCallback: (open) => {
10122
- if (!open) {
10123
- setModalContent(null);
10124
- }
10125
- },
10126
- children: [
10127
- /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
10128
- /* @__PURE__ */ jsxs("div", { children: [
10129
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Items" }) }),
10130
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order" }) })
10131
- ] }),
10132
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10133
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
10134
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
10135
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
10136
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
10137
- /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
10138
- ] }),
10139
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
10140
- /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
10141
- Input,
10142
- {
10143
- type: "search",
10144
- placeholder: "Search items",
10145
- value: searchValue,
10146
- onChange: (e) => onSearchValueChange(e.target.value)
10147
- }
10148
- ) }),
10149
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
10150
- /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", children: /* @__PURE__ */ jsx(Plus, {}) }) }),
10151
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
10152
- /* @__PURE__ */ jsx(
10153
- StackedModalTrigger$1,
10154
- {
10155
- type: "add-items",
10156
- setModalContent
10157
- }
10158
- ),
10159
- /* @__PURE__ */ jsx(
10160
- StackedModalTrigger$1,
10161
- {
10162
- type: "add-custom-item",
10163
- setModalContent
10164
- }
10165
- )
10166
- ] })
10167
- ] })
10168
- ] })
10169
- ] }),
10170
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
10171
- /* @__PURE__ */ jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-muted grid grid-cols-[2fr_1fr_2fr_28px] gap-3 px-4 py-2", children: [
10172
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
10173
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) }),
10174
- /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Price" }) }),
10175
- /* @__PURE__ */ jsx("div", {})
10176
- ] }) }),
10177
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
10178
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
10179
- /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add items to the order to get started." })
10180
- ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsx(
10181
- Item,
10182
- {
10183
- item,
10184
- preview,
10185
- currencyCode
10186
- },
10187
- item.id
10188
- )) : /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
10189
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
10190
- /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
10191
- 'No items found for "',
10192
- query2,
10193
- '".'
10194
- ] })
10195
- ] }) })
10196
- ] })
10197
- ] }),
10198
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10199
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
10200
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
10201
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
10202
- Text,
10203
- {
10204
- size: "small",
10205
- leading: "compact",
10206
- className: "text-ui-fg-subtle",
10207
- children: [
10208
- itemCount,
10209
- " ",
10210
- itemCount === 1 ? "item" : "items"
10211
- ]
10212
- }
10213
- ) }),
10214
- /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
10215
- ] })
10216
- ] }) }),
10217
- modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsx(
10218
- CustomItemForm,
10219
- {
10220
- orderId: preview.id,
10221
- currencyCode
10222
- }
10223
- ) : null)
10224
- ]
10225
- }
10226
- ) }),
10227
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10228
- /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10229
- /* @__PURE__ */ jsx(
10230
- Button,
10231
- {
10232
- size: "small",
10233
- type: "button",
10234
- onClick: onSubmit,
10235
- isLoading: isSubmitting,
10236
- children: "Save"
10237
- }
10238
- )
10239
- ] }) })
10240
- ] });
10241
- };
10242
- const Item = ({ item, preview, currencyCode }) => {
10243
- if (item.variant_id) {
10244
- return /* @__PURE__ */ jsx(VariantItem, { item, preview, currencyCode });
10245
- }
10246
- return /* @__PURE__ */ jsx(CustomItem, { item, preview, currencyCode });
10247
- };
10248
- const VariantItem = ({ item, preview, currencyCode }) => {
10249
- const [editing, setEditing] = useState(false);
9891
+ const hasUneditableRows = getHasUneditableRows(metadata);
9892
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10250
9893
  const form = useForm({
10251
9894
  defaultValues: {
10252
- quantity: item.quantity,
10253
- unit_price: item.unit_price
9895
+ metadata: getDefaultValues(metadata)
10254
9896
  },
10255
- resolver: zodResolver(variantItemSchema)
9897
+ resolver: zodResolver(MetadataSchema)
10256
9898
  });
10257
- const actionId = useMemo(() => {
10258
- var _a, _b;
10259
- return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
10260
- }, [item]);
10261
- const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
10262
- const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
10263
- const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
10264
- const onSubmit = form.handleSubmit(async (data) => {
10265
- if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
10266
- setEditing(false);
10267
- return;
10268
- }
10269
- if (!actionId) {
10270
- await updateOriginalItem(
10271
- {
10272
- item_id: item.id,
10273
- quantity: data.quantity,
10274
- unit_price: convertNumber(data.unit_price)
10275
- },
10276
- {
10277
- onSuccess: () => {
10278
- setEditing(false);
10279
- },
10280
- onError: (e) => {
10281
- toast.error(e.message);
10282
- }
10283
- }
10284
- );
10285
- return;
10286
- }
10287
- await updateActionItem(
9899
+ const handleSubmit = form.handleSubmit(async (data) => {
9900
+ const parsedData = parseValues(data);
9901
+ await mutateAsync(
10288
9902
  {
10289
- action_id: actionId,
10290
- quantity: data.quantity,
10291
- unit_price: convertNumber(data.unit_price)
9903
+ metadata: parsedData
10292
9904
  },
10293
9905
  {
10294
9906
  onSuccess: () => {
10295
- setEditing(false);
9907
+ toast.success("Metadata updated");
9908
+ handleSuccess();
10296
9909
  },
10297
- onError: (e) => {
10298
- toast.error(e.message);
10299
- }
10300
- }
10301
- );
10302
- });
10303
- return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
10304
- /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3", children: [
10305
- /* @__PURE__ */ jsx(
10306
- Thumbnail,
10307
- {
10308
- thumbnail: item.thumbnail,
10309
- alt: item.product_title ?? void 0
10310
- }
10311
- ),
10312
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
10313
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
10314
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
10315
- /* @__PURE__ */ jsxs(
10316
- Text,
10317
- {
10318
- size: "small",
10319
- leading: "compact",
10320
- className: "text-ui-fg-subtle",
10321
- children: [
10322
- "(",
10323
- item.variant_title,
10324
- ")"
10325
- ]
10326
- }
10327
- )
10328
- ] }),
10329
- /* @__PURE__ */ jsx(
10330
- Text,
10331
- {
10332
- size: "small",
10333
- leading: "compact",
10334
- className: "text-ui-fg-subtle",
10335
- children: item.variant_sku
10336
- }
10337
- )
10338
- ] })
10339
- ] }),
10340
- editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
10341
- Form$2.Field,
10342
- {
10343
- control: form.control,
10344
- name: "quantity",
10345
- render: ({ field }) => {
10346
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
10347
- }
10348
- }
10349
- ) }) : /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }) }),
10350
- editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
10351
- Form$2.Field,
10352
- {
10353
- control: form.control,
10354
- name: "unit_price",
10355
- render: ({ field: { onChange, ...field } }) => {
10356
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10357
- CurrencyInput,
10358
- {
10359
- ...field,
10360
- symbol: getNativeSymbol(currencyCode),
10361
- code: currencyCode,
10362
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
10363
- }
10364
- ) }) });
10365
- }
10366
- }
10367
- ) }) : /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
10368
- /* @__PURE__ */ jsx(
10369
- IconButton,
10370
- {
10371
- type: "button",
10372
- size: "small",
10373
- onClick: editing ? onSubmit : () => {
10374
- setEditing(true);
10375
- },
10376
- disabled: isPending,
10377
- children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
10378
- }
10379
- )
10380
- ] }) }) });
10381
- };
10382
- const variantItemSchema = objectType({
10383
- quantity: numberType(),
10384
- unit_price: unionType([numberType(), stringType()])
10385
- });
10386
- const CustomItem = ({ item, preview, currencyCode }) => {
10387
- const [editing, setEditing] = useState(false);
10388
- const { quantity, unit_price, title } = item;
10389
- const form = useForm({
10390
- defaultValues: {
10391
- title,
10392
- quantity,
10393
- unit_price
10394
- },
10395
- resolver: zodResolver(customItemSchema)
10396
- });
10397
- useEffect(() => {
10398
- form.reset({
10399
- title,
10400
- quantity,
10401
- unit_price
10402
- });
10403
- }, [form, title, quantity, unit_price]);
10404
- const actionId = useMemo(() => {
10405
- var _a, _b;
10406
- return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
10407
- }, [item]);
10408
- const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
10409
- const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
10410
- const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
10411
- const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
10412
- const onSubmit = form.handleSubmit(async (data) => {
10413
- if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
10414
- setEditing(false);
10415
- return;
10416
- }
10417
- if (!actionId) {
10418
- await updateOriginalItem(
10419
- {
10420
- item_id: item.id,
10421
- quantity: data.quantity,
10422
- unit_price: convertNumber(data.unit_price)
10423
- },
10424
- {
10425
- onSuccess: () => {
10426
- setEditing(false);
10427
- },
10428
- onError: (e) => {
10429
- toast.error(e.message);
10430
- }
10431
- }
10432
- );
10433
- return;
10434
- }
10435
- if (data.quantity === 0) {
10436
- await removeActionItem(actionId, {
10437
- onSuccess: () => {
10438
- setEditing(false);
10439
- },
10440
- onError: (e) => {
10441
- toast.error(e.message);
10442
- }
10443
- });
10444
- return;
10445
- }
10446
- await updateActionItem(
10447
- {
10448
- action_id: actionId,
10449
- quantity: data.quantity,
10450
- unit_price: convertNumber(data.unit_price)
10451
- },
10452
- {
10453
- onSuccess: () => {
10454
- setEditing(false);
10455
- },
10456
- onError: (e) => {
10457
- toast.error(e.message);
10458
- }
10459
- }
10460
- );
10461
- });
10462
- return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
10463
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
10464
- /* @__PURE__ */ jsx(
10465
- Thumbnail,
10466
- {
10467
- thumbnail: item.thumbnail,
10468
- alt: item.title ?? void 0
10469
- }
10470
- ),
10471
- editing ? /* @__PURE__ */ jsx(
10472
- Form$2.Field,
10473
- {
10474
- control: form.control,
10475
- name: "title",
10476
- render: ({ field }) => {
10477
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }) });
10478
- }
10479
- }
10480
- ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.title })
10481
- ] }),
10482
- editing ? /* @__PURE__ */ jsx(
10483
- Form$2.Field,
10484
- {
10485
- control: form.control,
10486
- name: "quantity",
10487
- render: ({ field }) => {
10488
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
10489
- }
10490
- }
10491
- ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }),
10492
- editing ? /* @__PURE__ */ jsx(
10493
- Form$2.Field,
10494
- {
10495
- control: form.control,
10496
- name: "unit_price",
10497
- render: ({ field: { onChange, ...field } }) => {
10498
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10499
- CurrencyInput,
10500
- {
10501
- ...field,
10502
- symbol: getNativeSymbol(currencyCode),
10503
- code: currencyCode,
10504
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
10505
- }
10506
- ) }) });
10507
- }
10508
- }
10509
- ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
10510
- /* @__PURE__ */ jsx(
10511
- IconButton,
10512
- {
10513
- type: "button",
10514
- size: "small",
10515
- onClick: editing ? onSubmit : () => {
10516
- setEditing(true);
10517
- },
10518
- disabled: isPending,
10519
- children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
10520
- }
10521
- )
10522
- ] }) }) });
10523
- };
10524
- const StackedModalTrigger$1 = ({
10525
- type,
10526
- setModalContent
10527
- }) => {
10528
- const { setIsOpen } = useStackedModal();
10529
- const onClick = useCallback(() => {
10530
- setModalContent(type);
10531
- setIsOpen(STACKED_MODAL_ID, true);
10532
- }, [setModalContent, setIsOpen, type]);
10533
- return /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
10534
- };
10535
- const VARIANT_PREFIX = "items";
10536
- const LIMIT = 50;
10537
- const ExistingItemsForm = ({ orderId, items }) => {
10538
- const { setIsOpen } = useStackedModal();
10539
- const [rowSelection, setRowSelection] = useState(
10540
- items.reduce((acc, item) => {
10541
- acc[item.variant_id] = true;
10542
- return acc;
10543
- }, {})
10544
- );
10545
- useEffect(() => {
10546
- setRowSelection(
10547
- items.reduce((acc, item) => {
10548
- if (item.variant_id) {
10549
- acc[item.variant_id] = true;
10550
- }
10551
- return acc;
10552
- }, {})
10553
- );
10554
- }, [items]);
10555
- const { q, order, offset } = useQueryParams(
10556
- ["q", "order", "offset"],
10557
- VARIANT_PREFIX
10558
- );
10559
- const { variants, count, isPending, isError, error } = useProductVariants(
10560
- {
10561
- q,
10562
- order,
10563
- offset: offset ? parseInt(offset) : void 0,
10564
- limit: LIMIT
10565
- },
10566
- {
10567
- placeholderData: keepPreviousData
10568
- }
10569
- );
10570
- const columns = useColumns();
10571
- const { mutateAsync } = useDraftOrderAddItems(orderId);
10572
- const onSubmit = async () => {
10573
- const ids = Object.keys(rowSelection).filter(
10574
- (id) => !items.find((i) => i.variant_id === id)
10575
- );
10576
- await mutateAsync(
10577
- {
10578
- items: ids.map((id) => ({
10579
- variant_id: id,
10580
- quantity: 1
10581
- }))
10582
- },
10583
- {
10584
- onSuccess: () => {
10585
- setRowSelection({});
10586
- setIsOpen(STACKED_MODAL_ID, false);
10587
- },
10588
- onError: (e) => {
10589
- toast.error(e.message);
10590
- }
10591
- }
10592
- );
10593
- };
10594
- if (isError) {
10595
- throw error;
10596
- }
10597
- return /* @__PURE__ */ jsxs(
10598
- StackedFocusModal.Content,
10599
- {
10600
- onOpenAutoFocus: (e) => {
10601
- e.preventDefault();
10602
- const searchInput = document.querySelector(
10603
- "[data-modal-id='modal-search-input']"
10604
- );
10605
- if (searchInput) {
10606
- searchInput.focus();
10607
- }
10608
- },
10609
- children: [
10610
- /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
10611
- /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Product Variants" }) }),
10612
- /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
10613
- ] }),
10614
- /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
10615
- DataTable,
10616
- {
10617
- data: variants,
10618
- columns,
10619
- isLoading: isPending,
10620
- getRowId: (row) => row.id,
10621
- rowCount: count,
10622
- prefix: VARIANT_PREFIX,
10623
- layout: "fill",
10624
- rowSelection: {
10625
- state: rowSelection,
10626
- onRowSelectionChange: setRowSelection,
10627
- enableRowSelection: (row) => {
10628
- return !items.find((i) => i.variant_id === row.original.id);
10629
- }
10630
- },
10631
- autoFocusSearch: true
10632
- }
10633
- ) }),
10634
- /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10635
- /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10636
- /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
10637
- ] }) })
10638
- ]
10639
- }
10640
- );
10641
- };
10642
- const columnHelper = createDataTableColumnHelper();
10643
- const useColumns = () => {
10644
- return useMemo(() => {
10645
- return [
10646
- columnHelper.select(),
10647
- columnHelper.accessor("product.title", {
10648
- header: "Product",
10649
- cell: ({ row }) => {
10650
- var _a, _b, _c;
10651
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
10652
- /* @__PURE__ */ jsx(
10653
- Thumbnail,
10654
- {
10655
- thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
10656
- alt: (_b = row.original.product) == null ? void 0 : _b.title
10657
- }
10658
- ),
10659
- /* @__PURE__ */ jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
10660
- ] });
10661
- },
10662
- enableSorting: true
10663
- }),
10664
- columnHelper.accessor("title", {
10665
- header: "Variant",
10666
- enableSorting: true
10667
- }),
10668
- columnHelper.accessor("sku", {
10669
- header: "SKU",
10670
- cell: ({ getValue }) => {
10671
- return getValue() ?? "-";
10672
- },
10673
- enableSorting: true
10674
- }),
10675
- columnHelper.accessor("updated_at", {
10676
- header: "Updated",
10677
- cell: ({ getValue }) => {
10678
- return /* @__PURE__ */ jsx(
10679
- Tooltip,
10680
- {
10681
- content: getFullDate({ date: getValue(), includeTime: true }),
10682
- children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
10683
- }
10684
- );
10685
- },
10686
- enableSorting: true,
10687
- sortAscLabel: "Oldest first",
10688
- sortDescLabel: "Newest first"
10689
- }),
10690
- columnHelper.accessor("created_at", {
10691
- header: "Created",
10692
- cell: ({ getValue }) => {
10693
- return /* @__PURE__ */ jsx(
10694
- Tooltip,
10695
- {
10696
- content: getFullDate({ date: getValue(), includeTime: true }),
10697
- children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
10698
- }
10699
- );
10700
- },
10701
- enableSorting: true,
10702
- sortAscLabel: "Oldest first",
10703
- sortDescLabel: "Newest first"
10704
- })
10705
- ];
10706
- }, []);
10707
- };
10708
- const CustomItemForm = ({ orderId, currencyCode }) => {
10709
- const { setIsOpen } = useStackedModal();
10710
- const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
10711
- const form = useForm({
10712
- defaultValues: {
10713
- title: "",
10714
- quantity: 1,
10715
- unit_price: ""
10716
- },
10717
- resolver: zodResolver(customItemSchema)
10718
- });
10719
- const onSubmit = form.handleSubmit(async (data) => {
10720
- await addItems(
10721
- {
10722
- items: [
10723
- {
10724
- title: data.title,
10725
- quantity: data.quantity,
10726
- unit_price: convertNumber(data.unit_price)
10727
- }
10728
- ]
10729
- },
10730
- {
10731
- onSuccess: () => {
10732
- setIsOpen(STACKED_MODAL_ID, false);
10733
- },
10734
- onError: (e) => {
10735
- toast.error(e.message);
10736
- }
10737
- }
10738
- );
10739
- });
10740
- return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxs(StackedFocusModal.Content, { children: [
10741
- /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
10742
- /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
10743
- /* @__PURE__ */ jsxs("div", { children: [
10744
- /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Add custom item" }) }),
10745
- /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(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." }) })
10746
- ] }),
10747
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10748
- /* @__PURE__ */ jsx(
10749
- Form$2.Field,
10750
- {
10751
- control: form.control,
10752
- name: "title",
10753
- render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10754
- /* @__PURE__ */ jsxs("div", { children: [
10755
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Title" }),
10756
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the title of the item" })
10757
- ] }),
10758
- /* @__PURE__ */ jsxs("div", { children: [
10759
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
10760
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10761
- ] })
10762
- ] }) })
10763
- }
10764
- ),
10765
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10766
- /* @__PURE__ */ jsx(
10767
- Form$2.Field,
10768
- {
10769
- control: form.control,
10770
- name: "unit_price",
10771
- render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10772
- /* @__PURE__ */ jsxs("div", { children: [
10773
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Unit price" }),
10774
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
10775
- ] }),
10776
- /* @__PURE__ */ jsxs("div", { children: [
10777
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10778
- CurrencyInput,
10779
- {
10780
- symbol: getNativeSymbol(currencyCode),
10781
- code: currencyCode,
10782
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
10783
- ...field
10784
- }
10785
- ) }),
10786
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10787
- ] })
10788
- ] }) })
10789
- }
10790
- ),
10791
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10792
- /* @__PURE__ */ jsx(
10793
- Form$2.Field,
10794
- {
10795
- control: form.control,
10796
- name: "quantity",
10797
- render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10798
- /* @__PURE__ */ jsxs("div", { children: [
10799
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Quantity" }),
10800
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
10801
- ] }),
10802
- /* @__PURE__ */ jsxs("div", { className: "w-full flex-1", children: [
10803
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(NumberInput, { ...field, className: "w-full" }) }) }),
10804
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10805
- ] })
10806
- ] }) })
10807
- }
10808
- )
10809
- ] }) }) }),
10810
- /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10811
- /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10812
- /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
10813
- ] }) })
10814
- ] }) }) });
10815
- };
10816
- const customItemSchema = objectType({
10817
- title: stringType().min(1),
10818
- quantity: numberType(),
10819
- unit_price: unionType([numberType(), stringType()])
10820
- });
10821
- const InlineTip = forwardRef(
10822
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10823
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10824
- return /* @__PURE__ */ jsxs(
10825
- "div",
10826
- {
10827
- ref,
10828
- className: clx(
10829
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10830
- className
10831
- ),
10832
- ...props,
10833
- children: [
10834
- /* @__PURE__ */ jsx(
10835
- "div",
10836
- {
10837
- role: "presentation",
10838
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10839
- "bg-ui-tag-orange-icon": variant === "warning"
10840
- })
10841
- }
10842
- ),
10843
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10844
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10845
- labelValue,
10846
- ":"
10847
- ] }),
10848
- " ",
10849
- children
10850
- ] })
10851
- ]
10852
- }
10853
- );
10854
- }
10855
- );
10856
- InlineTip.displayName = "InlineTip";
10857
- const MetadataFieldSchema = objectType({
10858
- key: stringType(),
10859
- disabled: booleanType().optional(),
10860
- value: anyType()
10861
- });
10862
- const MetadataSchema = objectType({
10863
- metadata: arrayType(MetadataFieldSchema)
10864
- });
10865
- const Metadata = () => {
10866
- const { id } = useParams();
10867
- const { order, isPending, isError, error } = useOrder(id, {
10868
- fields: "metadata"
10869
- });
10870
- if (isError) {
10871
- throw error;
10872
- }
10873
- const isReady = !isPending && !!order;
10874
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10875
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10876
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10877
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10878
- ] }),
10879
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10880
- ] });
10881
- };
10882
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10883
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10884
- const MetadataForm = ({ orderId, metadata }) => {
10885
- const { handleSuccess } = useRouteModal();
10886
- const hasUneditableRows = getHasUneditableRows(metadata);
10887
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10888
- const form = useForm({
10889
- defaultValues: {
10890
- metadata: getDefaultValues(metadata)
10891
- },
10892
- resolver: zodResolver(MetadataSchema)
10893
- });
10894
- const handleSubmit = form.handleSubmit(async (data) => {
10895
- const parsedData = parseValues(data);
10896
- await mutateAsync(
10897
- {
10898
- metadata: parsedData
10899
- },
10900
- {
10901
- onSuccess: () => {
10902
- toast.success("Metadata updated");
10903
- handleSuccess();
10904
- },
10905
- onError: (error) => {
10906
- toast.error(error.message);
9910
+ onError: (error) => {
9911
+ toast.error(error.message);
10907
9912
  }
10908
9913
  }
10909
9914
  );
@@ -11188,6 +10193,52 @@ const usePromotions = (query2, options) => {
11188
10193
  });
11189
10194
  return { ...data, ...rest };
11190
10195
  };
10196
+ const useCancelOrderEdit = ({ preview }) => {
10197
+ const { mutateAsync: cancelOrderEdit } = useDraftOrderCancelEdit(preview == null ? void 0 : preview.id);
10198
+ const onCancel = useCallback(async () => {
10199
+ if (!preview) {
10200
+ return true;
10201
+ }
10202
+ let res = false;
10203
+ await cancelOrderEdit(void 0, {
10204
+ onError: (e) => {
10205
+ toast.error(e.message);
10206
+ },
10207
+ onSuccess: () => {
10208
+ res = true;
10209
+ }
10210
+ });
10211
+ return res;
10212
+ }, [preview, cancelOrderEdit]);
10213
+ return { onCancel };
10214
+ };
10215
+ let IS_REQUEST_RUNNING = false;
10216
+ const useInitiateOrderEdit = ({
10217
+ preview
10218
+ }) => {
10219
+ const navigate = useNavigate();
10220
+ const { mutateAsync } = useDraftOrderBeginEdit(preview == null ? void 0 : preview.id);
10221
+ useEffect(() => {
10222
+ async function run() {
10223
+ if (IS_REQUEST_RUNNING || !preview) {
10224
+ return;
10225
+ }
10226
+ if (preview.order_change) {
10227
+ return;
10228
+ }
10229
+ IS_REQUEST_RUNNING = true;
10230
+ await mutateAsync(void 0, {
10231
+ onError: (e) => {
10232
+ toast.error(e.message);
10233
+ navigate(`/draft-orders/${preview.id}`, { replace: true });
10234
+ return;
10235
+ }
10236
+ });
10237
+ IS_REQUEST_RUNNING = false;
10238
+ }
10239
+ run();
10240
+ }, [preview, navigate, mutateAsync]);
10241
+ };
11191
10242
  const Promotions = () => {
11192
10243
  const { id } = useParams();
11193
10244
  const {
@@ -11473,7 +10524,7 @@ const SalesChannelForm = ({ order }) => {
11473
10524
  defaultValues: {
11474
10525
  sales_channel_id: order.sales_channel_id || ""
11475
10526
  },
11476
- resolver: zodResolver(schema$2)
10527
+ resolver: zodResolver(schema$3)
11477
10528
  });
11478
10529
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11479
10530
  const { handleSuccess } = useRouteModal();
@@ -11548,9 +10599,12 @@ const SalesChannelField = ({ control, order }) => {
11548
10599
  }
11549
10600
  );
11550
10601
  };
11551
- const schema$2 = objectType({
10602
+ const schema$3 = objectType({
11552
10603
  sales_channel_id: stringType().min(1)
11553
10604
  });
10605
+ function convertNumber(value) {
10606
+ return typeof value === "string" ? Number(value.replace(",", ".")) : value;
10607
+ }
11554
10608
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11555
10609
  const Shipping = () => {
11556
10610
  var _a;
@@ -11858,7 +10912,7 @@ const ShippingForm = ({ preview, order }) => {
11858
10912
  ]
11859
10913
  }
11860
10914
  ) : /* @__PURE__ */ jsx(
11861
- StackedModalTrigger,
10915
+ StackedModalTrigger$1,
11862
10916
  {
11863
10917
  shippingProfileId: profile.id,
11864
10918
  shippingOption,
@@ -11969,7 +11023,7 @@ const ShippingForm = ({ preview, order }) => {
11969
11023
  ] }) })
11970
11024
  ] });
11971
11025
  };
11972
- const StackedModalTrigger = ({
11026
+ const StackedModalTrigger$1 = ({
11973
11027
  shippingProfileId,
11974
11028
  shippingOption,
11975
11029
  shippingMethod,
@@ -12344,20 +11398,223 @@ const CustomAmountField = ({
12344
11398
  /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12345
11399
  /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12346
11400
  ] }),
12347
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12348
- CurrencyInput,
11401
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11402
+ CurrencyInput,
11403
+ {
11404
+ ...field,
11405
+ onValueChange: (value) => onChange(value),
11406
+ symbol: getNativeSymbol(currencyCode),
11407
+ code: currencyCode
11408
+ }
11409
+ ) })
11410
+ ] });
11411
+ }
11412
+ }
11413
+ );
11414
+ };
11415
+ const ShippingAddress = () => {
11416
+ const { id } = useParams();
11417
+ const { order, isPending, isError, error } = useOrder(id, {
11418
+ fields: "+shipping_address"
11419
+ });
11420
+ if (isError) {
11421
+ throw error;
11422
+ }
11423
+ const isReady = !isPending && !!order;
11424
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11425
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11426
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11427
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11428
+ ] }),
11429
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11430
+ ] });
11431
+ };
11432
+ const ShippingAddressForm = ({ order }) => {
11433
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11434
+ const form = useForm({
11435
+ defaultValues: {
11436
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11437
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11438
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11439
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11440
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11441
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11442
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11443
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11444
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11445
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11446
+ },
11447
+ resolver: zodResolver(schema$2)
11448
+ });
11449
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11450
+ const { handleSuccess } = useRouteModal();
11451
+ const onSubmit = form.handleSubmit(async (data) => {
11452
+ await mutateAsync(
11453
+ {
11454
+ shipping_address: {
11455
+ first_name: data.first_name,
11456
+ last_name: data.last_name,
11457
+ company: data.company,
11458
+ address_1: data.address_1,
11459
+ address_2: data.address_2,
11460
+ city: data.city,
11461
+ province: data.province,
11462
+ country_code: data.country_code,
11463
+ postal_code: data.postal_code,
11464
+ phone: data.phone
11465
+ }
11466
+ },
11467
+ {
11468
+ onSuccess: () => {
11469
+ handleSuccess();
11470
+ },
11471
+ onError: (error) => {
11472
+ toast.error(error.message);
11473
+ }
11474
+ }
11475
+ );
11476
+ });
11477
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11478
+ KeyboundForm,
11479
+ {
11480
+ className: "flex flex-1 flex-col overflow-hidden",
11481
+ onSubmit,
11482
+ children: [
11483
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
11484
+ /* @__PURE__ */ jsx(
11485
+ Form$2.Field,
11486
+ {
11487
+ control: form.control,
11488
+ name: "country_code",
11489
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11490
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11491
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11492
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11493
+ ] })
11494
+ }
11495
+ ),
11496
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11497
+ /* @__PURE__ */ jsx(
11498
+ Form$2.Field,
11499
+ {
11500
+ control: form.control,
11501
+ name: "first_name",
11502
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11503
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11504
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11505
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11506
+ ] })
11507
+ }
11508
+ ),
11509
+ /* @__PURE__ */ jsx(
11510
+ Form$2.Field,
11511
+ {
11512
+ control: form.control,
11513
+ name: "last_name",
11514
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11515
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11516
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11517
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11518
+ ] })
11519
+ }
11520
+ )
11521
+ ] }),
11522
+ /* @__PURE__ */ jsx(
11523
+ Form$2.Field,
11524
+ {
11525
+ control: form.control,
11526
+ name: "company",
11527
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11528
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11529
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11530
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11531
+ ] })
11532
+ }
11533
+ ),
11534
+ /* @__PURE__ */ jsx(
11535
+ Form$2.Field,
11536
+ {
11537
+ control: form.control,
11538
+ name: "address_1",
11539
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11540
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11541
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11542
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11543
+ ] })
11544
+ }
11545
+ ),
11546
+ /* @__PURE__ */ jsx(
11547
+ Form$2.Field,
11548
+ {
11549
+ control: form.control,
11550
+ name: "address_2",
11551
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11552
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11553
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11554
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11555
+ ] })
11556
+ }
11557
+ ),
11558
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11559
+ /* @__PURE__ */ jsx(
11560
+ Form$2.Field,
11561
+ {
11562
+ control: form.control,
11563
+ name: "postal_code",
11564
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11565
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11566
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11567
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11568
+ ] })
11569
+ }
11570
+ ),
11571
+ /* @__PURE__ */ jsx(
11572
+ Form$2.Field,
11573
+ {
11574
+ control: form.control,
11575
+ name: "city",
11576
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11577
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11578
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11579
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11580
+ ] })
11581
+ }
11582
+ )
11583
+ ] }),
11584
+ /* @__PURE__ */ jsx(
11585
+ Form$2.Field,
12349
11586
  {
12350
- ...field,
12351
- onValueChange: (value) => onChange(value),
12352
- symbol: getNativeSymbol(currencyCode),
12353
- code: currencyCode
11587
+ control: form.control,
11588
+ name: "province",
11589
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11590
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11591
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11592
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11593
+ ] })
12354
11594
  }
12355
- ) })
12356
- ] });
12357
- }
11595
+ ),
11596
+ /* @__PURE__ */ jsx(
11597
+ Form$2.Field,
11598
+ {
11599
+ control: form.control,
11600
+ name: "phone",
11601
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11602
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11603
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11604
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11605
+ ] })
11606
+ }
11607
+ )
11608
+ ] }) }),
11609
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11610
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11611
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11612
+ ] }) })
11613
+ ]
12358
11614
  }
12359
- );
11615
+ ) });
12360
11616
  };
11617
+ const schema$2 = addressSchema;
12361
11618
  const TransferOwnership = () => {
12362
11619
  const { id } = useParams();
12363
11620
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12770,273 +12027,1016 @@ const Illustration = () => {
12770
12027
  strokeLinecap: "round",
12771
12028
  strokeLinejoin: "round"
12772
12029
  }
12773
- ) }),
12774
- /* @__PURE__ */ jsxs("defs", { children: [
12775
- /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
12776
- "rect",
12777
- {
12778
- width: "12",
12779
- height: "12",
12780
- fill: "white",
12781
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12782
- }
12783
- ) }),
12784
- /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
12785
- "rect",
12786
- {
12787
- width: "12",
12788
- height: "12",
12789
- fill: "white",
12790
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12791
- }
12792
- ) }),
12793
- /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
12794
- "rect",
12030
+ ) }),
12031
+ /* @__PURE__ */ jsxs("defs", { children: [
12032
+ /* @__PURE__ */ jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsx(
12033
+ "rect",
12034
+ {
12035
+ width: "12",
12036
+ height: "12",
12037
+ fill: "white",
12038
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12039
+ }
12040
+ ) }),
12041
+ /* @__PURE__ */ jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsx(
12042
+ "rect",
12043
+ {
12044
+ width: "12",
12045
+ height: "12",
12046
+ fill: "white",
12047
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12048
+ }
12049
+ ) }),
12050
+ /* @__PURE__ */ jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsx(
12051
+ "rect",
12052
+ {
12053
+ width: "12",
12054
+ height: "12",
12055
+ fill: "white",
12056
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12057
+ }
12058
+ ) }),
12059
+ /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
12060
+ "rect",
12061
+ {
12062
+ width: "12",
12063
+ height: "12",
12064
+ fill: "white",
12065
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12066
+ }
12067
+ ) }),
12068
+ /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
12069
+ "rect",
12070
+ {
12071
+ width: "12",
12072
+ height: "12",
12073
+ fill: "white",
12074
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12075
+ }
12076
+ ) }),
12077
+ /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
12078
+ "rect",
12079
+ {
12080
+ width: "12",
12081
+ height: "12",
12082
+ fill: "white",
12083
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12084
+ }
12085
+ ) })
12086
+ ] })
12087
+ ]
12088
+ }
12089
+ );
12090
+ };
12091
+ const schema$1 = objectType({
12092
+ customer_id: stringType().min(1)
12093
+ });
12094
+ const NumberInput = forwardRef(
12095
+ ({
12096
+ value,
12097
+ onChange,
12098
+ size = "base",
12099
+ min = 0,
12100
+ max = 100,
12101
+ step = 1,
12102
+ className,
12103
+ disabled,
12104
+ ...props
12105
+ }, ref) => {
12106
+ const handleChange = (event) => {
12107
+ const newValue = event.target.value === "" ? min : Number(event.target.value);
12108
+ if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
12109
+ onChange(newValue);
12110
+ }
12111
+ };
12112
+ const handleIncrement = () => {
12113
+ const newValue = value + step;
12114
+ if (max === void 0 || newValue <= max) {
12115
+ onChange(newValue);
12116
+ }
12117
+ };
12118
+ const handleDecrement = () => {
12119
+ const newValue = value - step;
12120
+ if (min === void 0 || newValue >= min) {
12121
+ onChange(newValue);
12122
+ }
12123
+ };
12124
+ return /* @__PURE__ */ jsxs(
12125
+ "div",
12126
+ {
12127
+ className: clx(
12128
+ "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
12129
+ "[&:has(input:focus)]:shadow-borders-interactive-with-active",
12130
+ {
12131
+ "h-7": size === "small",
12132
+ "h-8": size === "base"
12133
+ },
12134
+ className
12135
+ ),
12136
+ children: [
12137
+ /* @__PURE__ */ jsx(
12138
+ "input",
12139
+ {
12140
+ ref,
12141
+ type: "number",
12142
+ value,
12143
+ onChange: handleChange,
12144
+ min,
12145
+ max,
12146
+ step,
12147
+ className: clx(
12148
+ "flex-1 px-2 py-1 bg-transparent txt-compact-small text-ui-fg-base outline-none [appearance:textfield]",
12149
+ "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
12150
+ "placeholder:text-ui-fg-muted"
12151
+ ),
12152
+ ...props
12153
+ }
12154
+ ),
12155
+ /* @__PURE__ */ jsxs(
12156
+ "button",
12157
+ {
12158
+ className: clx(
12159
+ "flex items-center justify-center outline-none transition-fg",
12160
+ "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
12161
+ "focus:bg-ui-bg-field-component-hover",
12162
+ "hover:bg-ui-bg-field-component-hover",
12163
+ {
12164
+ "size-7": size === "small",
12165
+ "size-8": size === "base"
12166
+ }
12167
+ ),
12168
+ type: "button",
12169
+ onClick: handleDecrement,
12170
+ disabled: min !== void 0 && value <= min || disabled,
12171
+ children: [
12172
+ /* @__PURE__ */ jsx(Minus, {}),
12173
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
12174
+ ]
12175
+ }
12176
+ ),
12177
+ /* @__PURE__ */ jsxs(
12178
+ "button",
12179
+ {
12180
+ className: clx(
12181
+ "flex items-center justify-center outline-none transition-fg",
12182
+ "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
12183
+ "focus:bg-ui-bg-field-hover",
12184
+ "hover:bg-ui-bg-field-hover",
12185
+ {
12186
+ "size-7": size === "small",
12187
+ "size-8": size === "base"
12188
+ }
12189
+ ),
12190
+ type: "button",
12191
+ onClick: handleIncrement,
12192
+ disabled: max !== void 0 && value >= max || disabled,
12193
+ children: [
12194
+ /* @__PURE__ */ jsx(Plus, {}),
12195
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Increase by ${step}` })
12196
+ ]
12197
+ }
12198
+ )
12199
+ ]
12200
+ }
12201
+ );
12202
+ }
12203
+ );
12204
+ const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
12205
+ const productVariantsQueryKeys = {
12206
+ list: (query2) => [
12207
+ PRODUCT_VARIANTS_QUERY_KEY,
12208
+ query2 ? query2 : void 0
12209
+ ]
12210
+ };
12211
+ const useProductVariants = (query2, options) => {
12212
+ const { data, ...rest } = useQuery({
12213
+ queryKey: productVariantsQueryKeys.list(query2),
12214
+ queryFn: async () => await sdk.admin.productVariant.list(query2),
12215
+ ...options
12216
+ });
12217
+ return { ...data, ...rest };
12218
+ };
12219
+ const STACKED_MODAL_ID = "items_stacked_modal";
12220
+ const Items = () => {
12221
+ const { id } = useParams();
12222
+ const {
12223
+ order: preview,
12224
+ isPending: isPreviewPending,
12225
+ isError: isPreviewError,
12226
+ error: previewError
12227
+ } = useOrderPreview(id, void 0, {
12228
+ placeholderData: keepPreviousData
12229
+ });
12230
+ useInitiateOrderEdit({ preview });
12231
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12232
+ id,
12233
+ {
12234
+ fields: "currency_code"
12235
+ },
12236
+ {
12237
+ enabled: !!id
12238
+ }
12239
+ );
12240
+ const { onCancel } = useCancelOrderEdit({ preview });
12241
+ if (isError) {
12242
+ throw error;
12243
+ }
12244
+ if (isPreviewError) {
12245
+ throw previewError;
12246
+ }
12247
+ const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
12248
+ return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: ready ? /* @__PURE__ */ jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) : /* @__PURE__ */ jsxs("div", { children: [
12249
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Items" }) }),
12250
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12251
+ ] }) });
12252
+ };
12253
+ const ItemsForm = ({ preview, currencyCode }) => {
12254
+ var _a;
12255
+ const [isSubmitting, setIsSubmitting] = useState(false);
12256
+ const [modalContent, setModalContent] = useState(
12257
+ null
12258
+ );
12259
+ const { handleSuccess } = useRouteModal();
12260
+ const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
12261
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12262
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12263
+ const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
12264
+ const matches = useMemo(() => {
12265
+ return matchSorter(preview.items, query2, {
12266
+ keys: ["product_title", "variant_title", "variant_sku", "title"]
12267
+ });
12268
+ }, [preview.items, query2]);
12269
+ const onSubmit = async () => {
12270
+ setIsSubmitting(true);
12271
+ let requestSucceeded = false;
12272
+ await requestOrderEdit(void 0, {
12273
+ onError: (e) => {
12274
+ toast.error(`Failed to request order edit: ${e.message}`);
12275
+ },
12276
+ onSuccess: () => {
12277
+ requestSucceeded = true;
12278
+ }
12279
+ });
12280
+ if (!requestSucceeded) {
12281
+ setIsSubmitting(false);
12282
+ return;
12283
+ }
12284
+ await confirmOrderEdit(void 0, {
12285
+ onError: (e) => {
12286
+ toast.error(`Failed to confirm order edit: ${e.message}`);
12287
+ },
12288
+ onSuccess: () => {
12289
+ handleSuccess();
12290
+ },
12291
+ onSettled: () => {
12292
+ setIsSubmitting(false);
12293
+ }
12294
+ });
12295
+ };
12296
+ const onKeyDown = useCallback(
12297
+ (e) => {
12298
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12299
+ if (modalContent || isSubmitting) {
12300
+ return;
12301
+ }
12302
+ onSubmit();
12303
+ }
12304
+ },
12305
+ [modalContent, isSubmitting, onSubmit]
12306
+ );
12307
+ useEffect(() => {
12308
+ document.addEventListener("keydown", onKeyDown);
12309
+ return () => {
12310
+ document.removeEventListener("keydown", onKeyDown);
12311
+ };
12312
+ }, [onKeyDown]);
12313
+ return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12314
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
12315
+ /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxs(
12316
+ StackedFocusModal,
12317
+ {
12318
+ id: STACKED_MODAL_ID,
12319
+ onOpenChangeCallback: (open) => {
12320
+ if (!open) {
12321
+ setModalContent(null);
12322
+ }
12323
+ },
12324
+ children: [
12325
+ /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12326
+ /* @__PURE__ */ jsxs("div", { children: [
12327
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Items" }) }),
12328
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order" }) })
12329
+ ] }),
12330
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12331
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12332
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
12333
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12334
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
12335
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
12336
+ ] }),
12337
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
12338
+ /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
12339
+ Input,
12340
+ {
12341
+ type: "search",
12342
+ placeholder: "Search items",
12343
+ value: searchValue,
12344
+ onChange: (e) => onSearchValueChange(e.target.value)
12345
+ }
12346
+ ) }),
12347
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
12348
+ /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", children: /* @__PURE__ */ jsx(Plus, {}) }) }),
12349
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
12350
+ /* @__PURE__ */ jsx(
12351
+ StackedModalTrigger,
12352
+ {
12353
+ type: "add-items",
12354
+ setModalContent
12355
+ }
12356
+ ),
12357
+ /* @__PURE__ */ jsx(
12358
+ StackedModalTrigger,
12359
+ {
12360
+ type: "add-custom-item",
12361
+ setModalContent
12362
+ }
12363
+ )
12364
+ ] })
12365
+ ] })
12366
+ ] })
12367
+ ] }),
12368
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12369
+ /* @__PURE__ */ jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-muted grid grid-cols-[2fr_1fr_2fr_28px] gap-3 px-4 py-2", children: [
12370
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12371
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) }),
12372
+ /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Price" }) }),
12373
+ /* @__PURE__ */ jsx("div", {})
12374
+ ] }) }),
12375
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12376
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
12377
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add items to the order to get started." })
12378
+ ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsx(
12379
+ Item,
12380
+ {
12381
+ item,
12382
+ preview,
12383
+ currencyCode
12384
+ },
12385
+ item.id
12386
+ )) : /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
12387
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12388
+ /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12389
+ 'No items found for "',
12390
+ query2,
12391
+ '".'
12392
+ ] })
12393
+ ] }) })
12394
+ ] })
12395
+ ] }),
12396
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12397
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
12398
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
12399
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
12400
+ Text,
12401
+ {
12402
+ size: "small",
12403
+ leading: "compact",
12404
+ className: "text-ui-fg-subtle",
12405
+ children: [
12406
+ itemCount,
12407
+ " ",
12408
+ itemCount === 1 ? "item" : "items"
12409
+ ]
12410
+ }
12411
+ ) }),
12412
+ /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
12413
+ ] })
12414
+ ] }) }),
12415
+ modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsx(
12416
+ CustomItemForm,
12795
12417
  {
12796
- width: "12",
12797
- height: "12",
12798
- fill: "white",
12799
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12418
+ orderId: preview.id,
12419
+ currencyCode
12800
12420
  }
12801
- ) }),
12802
- /* @__PURE__ */ jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsx(
12803
- "rect",
12421
+ ) : null)
12422
+ ]
12423
+ }
12424
+ ) }),
12425
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12426
+ /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12427
+ /* @__PURE__ */ jsx(
12428
+ Button,
12429
+ {
12430
+ size: "small",
12431
+ type: "button",
12432
+ onClick: onSubmit,
12433
+ isLoading: isSubmitting,
12434
+ children: "Save"
12435
+ }
12436
+ )
12437
+ ] }) })
12438
+ ] });
12439
+ };
12440
+ const Item = ({ item, preview, currencyCode }) => {
12441
+ if (item.variant_id) {
12442
+ return /* @__PURE__ */ jsx(VariantItem, { item, preview, currencyCode });
12443
+ }
12444
+ return /* @__PURE__ */ jsx(CustomItem, { item, preview, currencyCode });
12445
+ };
12446
+ const VariantItem = ({ item, preview, currencyCode }) => {
12447
+ const [editing, setEditing] = useState(false);
12448
+ const form = useForm({
12449
+ defaultValues: {
12450
+ quantity: item.quantity,
12451
+ unit_price: item.unit_price
12452
+ },
12453
+ resolver: zodResolver(variantItemSchema)
12454
+ });
12455
+ const actionId = useMemo(() => {
12456
+ var _a, _b;
12457
+ return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
12458
+ }, [item]);
12459
+ const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
12460
+ const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
12461
+ const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
12462
+ const onSubmit = form.handleSubmit(async (data) => {
12463
+ if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
12464
+ setEditing(false);
12465
+ return;
12466
+ }
12467
+ if (!actionId) {
12468
+ await updateOriginalItem(
12469
+ {
12470
+ item_id: item.id,
12471
+ quantity: data.quantity,
12472
+ unit_price: convertNumber(data.unit_price)
12473
+ },
12474
+ {
12475
+ onSuccess: () => {
12476
+ setEditing(false);
12477
+ },
12478
+ onError: (e) => {
12479
+ toast.error(e.message);
12480
+ }
12481
+ }
12482
+ );
12483
+ return;
12484
+ }
12485
+ await updateActionItem(
12486
+ {
12487
+ action_id: actionId,
12488
+ quantity: data.quantity,
12489
+ unit_price: convertNumber(data.unit_price)
12490
+ },
12491
+ {
12492
+ onSuccess: () => {
12493
+ setEditing(false);
12494
+ },
12495
+ onError: (e) => {
12496
+ toast.error(e.message);
12497
+ }
12498
+ }
12499
+ );
12500
+ });
12501
+ return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
12502
+ /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3", children: [
12503
+ /* @__PURE__ */ jsx(
12504
+ Thumbnail,
12505
+ {
12506
+ thumbnail: item.thumbnail,
12507
+ alt: item.product_title ?? void 0
12508
+ }
12509
+ ),
12510
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12511
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12512
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12513
+ /* @__PURE__ */ jsxs(
12514
+ Text,
12804
12515
  {
12805
- width: "12",
12806
- height: "12",
12807
- fill: "white",
12808
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12516
+ size: "small",
12517
+ leading: "compact",
12518
+ className: "text-ui-fg-subtle",
12519
+ children: [
12520
+ "(",
12521
+ item.variant_title,
12522
+ ")"
12523
+ ]
12809
12524
  }
12810
- ) }),
12811
- /* @__PURE__ */ jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsx(
12812
- "rect",
12525
+ )
12526
+ ] }),
12527
+ /* @__PURE__ */ jsx(
12528
+ Text,
12529
+ {
12530
+ size: "small",
12531
+ leading: "compact",
12532
+ className: "text-ui-fg-subtle",
12533
+ children: item.variant_sku
12534
+ }
12535
+ )
12536
+ ] })
12537
+ ] }),
12538
+ editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
12539
+ Form$2.Field,
12540
+ {
12541
+ control: form.control,
12542
+ name: "quantity",
12543
+ render: ({ field }) => {
12544
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
12545
+ }
12546
+ }
12547
+ ) }) : /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }) }),
12548
+ editing ? /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(
12549
+ Form$2.Field,
12550
+ {
12551
+ control: form.control,
12552
+ name: "unit_price",
12553
+ render: ({ field: { onChange, ...field } }) => {
12554
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12555
+ CurrencyInput,
12813
12556
  {
12814
- width: "12",
12815
- height: "12",
12816
- fill: "white",
12817
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
12557
+ ...field,
12558
+ symbol: getNativeSymbol(currencyCode),
12559
+ code: currencyCode,
12560
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
12818
12561
  }
12819
- ) }),
12820
- /* @__PURE__ */ jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsx(
12821
- "rect",
12562
+ ) }) });
12563
+ }
12564
+ }
12565
+ ) }) : /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
12566
+ /* @__PURE__ */ jsx(
12567
+ IconButton,
12568
+ {
12569
+ type: "button",
12570
+ size: "small",
12571
+ onClick: editing ? onSubmit : () => {
12572
+ setEditing(true);
12573
+ },
12574
+ disabled: isPending,
12575
+ children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
12576
+ }
12577
+ )
12578
+ ] }) }) });
12579
+ };
12580
+ const variantItemSchema = objectType({
12581
+ quantity: numberType(),
12582
+ unit_price: unionType([numberType(), stringType()])
12583
+ });
12584
+ const CustomItem = ({ item, preview, currencyCode }) => {
12585
+ const [editing, setEditing] = useState(false);
12586
+ const { quantity, unit_price, title } = item;
12587
+ const form = useForm({
12588
+ defaultValues: {
12589
+ title,
12590
+ quantity,
12591
+ unit_price
12592
+ },
12593
+ resolver: zodResolver(customItemSchema)
12594
+ });
12595
+ useEffect(() => {
12596
+ form.reset({
12597
+ title,
12598
+ quantity,
12599
+ unit_price
12600
+ });
12601
+ }, [form, title, quantity, unit_price]);
12602
+ const actionId = useMemo(() => {
12603
+ var _a, _b;
12604
+ return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
12605
+ }, [item]);
12606
+ const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
12607
+ const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
12608
+ const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
12609
+ const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
12610
+ const onSubmit = form.handleSubmit(async (data) => {
12611
+ if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
12612
+ setEditing(false);
12613
+ return;
12614
+ }
12615
+ if (!actionId) {
12616
+ await updateOriginalItem(
12617
+ {
12618
+ item_id: item.id,
12619
+ quantity: data.quantity,
12620
+ unit_price: convertNumber(data.unit_price)
12621
+ },
12622
+ {
12623
+ onSuccess: () => {
12624
+ setEditing(false);
12625
+ },
12626
+ onError: (e) => {
12627
+ toast.error(e.message);
12628
+ }
12629
+ }
12630
+ );
12631
+ return;
12632
+ }
12633
+ if (data.quantity === 0) {
12634
+ await removeActionItem(actionId, {
12635
+ onSuccess: () => {
12636
+ setEditing(false);
12637
+ },
12638
+ onError: (e) => {
12639
+ toast.error(e.message);
12640
+ }
12641
+ });
12642
+ return;
12643
+ }
12644
+ await updateActionItem(
12645
+ {
12646
+ action_id: actionId,
12647
+ quantity: data.quantity,
12648
+ unit_price: convertNumber(data.unit_price)
12649
+ },
12650
+ {
12651
+ onSuccess: () => {
12652
+ setEditing(false);
12653
+ },
12654
+ onError: (e) => {
12655
+ toast.error(e.message);
12656
+ }
12657
+ }
12658
+ );
12659
+ });
12660
+ return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx("form", { onSubmit, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,2fr)_28px] items-center gap-3 rounded-lg px-4 py-2", children: [
12661
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12662
+ /* @__PURE__ */ jsx(
12663
+ Thumbnail,
12664
+ {
12665
+ thumbnail: item.thumbnail,
12666
+ alt: item.title ?? void 0
12667
+ }
12668
+ ),
12669
+ editing ? /* @__PURE__ */ jsx(
12670
+ Form$2.Field,
12671
+ {
12672
+ control: form.control,
12673
+ name: "title",
12674
+ render: ({ field }) => {
12675
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }) });
12676
+ }
12677
+ }
12678
+ ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.title })
12679
+ ] }),
12680
+ editing ? /* @__PURE__ */ jsx(
12681
+ Form$2.Field,
12682
+ {
12683
+ control: form.control,
12684
+ name: "quantity",
12685
+ render: ({ field }) => {
12686
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(NumberInput, { ...field }) }) });
12687
+ }
12688
+ }
12689
+ ) : /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: item.quantity }),
12690
+ editing ? /* @__PURE__ */ jsx(
12691
+ Form$2.Field,
12692
+ {
12693
+ control: form.control,
12694
+ name: "unit_price",
12695
+ render: ({ field: { onChange, ...field } }) => {
12696
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12697
+ CurrencyInput,
12822
12698
  {
12823
- width: "12",
12824
- height: "12",
12825
- fill: "white",
12826
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12699
+ ...field,
12700
+ symbol: getNativeSymbol(currencyCode),
12701
+ code: currencyCode,
12702
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
12827
12703
  }
12828
- ) })
12829
- ] })
12830
- ]
12831
- }
12832
- );
12704
+ ) }) });
12705
+ }
12706
+ }
12707
+ ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-end", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
12708
+ /* @__PURE__ */ jsx(
12709
+ IconButton,
12710
+ {
12711
+ type: "button",
12712
+ size: "small",
12713
+ onClick: editing ? onSubmit : () => {
12714
+ setEditing(true);
12715
+ },
12716
+ disabled: isPending,
12717
+ children: editing ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(PencilSquare, {})
12718
+ }
12719
+ )
12720
+ ] }) }) });
12833
12721
  };
12834
- const schema$1 = objectType({
12835
- customer_id: stringType().min(1)
12836
- });
12837
- const ShippingAddress = () => {
12838
- const { id } = useParams();
12839
- const { order, isPending, isError, error } = useOrder(id, {
12840
- fields: "+shipping_address"
12841
- });
12842
- if (isError) {
12843
- throw error;
12844
- }
12845
- const isReady = !isPending && !!order;
12846
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12847
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12848
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12849
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12850
- ] }),
12851
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12852
- ] });
12722
+ const StackedModalTrigger = ({
12723
+ type,
12724
+ setModalContent
12725
+ }) => {
12726
+ const { setIsOpen } = useStackedModal();
12727
+ const onClick = useCallback(() => {
12728
+ setModalContent(type);
12729
+ setIsOpen(STACKED_MODAL_ID, true);
12730
+ }, [setModalContent, setIsOpen, type]);
12731
+ return /* @__PURE__ */ jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
12853
12732
  };
12854
- const ShippingAddressForm = ({ order }) => {
12855
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12856
- const form = useForm({
12857
- defaultValues: {
12858
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12859
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12860
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12861
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12862
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12863
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12864
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12865
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12866
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12867
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12733
+ const VARIANT_PREFIX = "items";
12734
+ const LIMIT = 50;
12735
+ const ExistingItemsForm = ({ orderId, items }) => {
12736
+ const { setIsOpen } = useStackedModal();
12737
+ const [rowSelection, setRowSelection] = useState(
12738
+ items.reduce((acc, item) => {
12739
+ acc[item.variant_id] = true;
12740
+ return acc;
12741
+ }, {})
12742
+ );
12743
+ useEffect(() => {
12744
+ setRowSelection(
12745
+ items.reduce((acc, item) => {
12746
+ if (item.variant_id) {
12747
+ acc[item.variant_id] = true;
12748
+ }
12749
+ return acc;
12750
+ }, {})
12751
+ );
12752
+ }, [items]);
12753
+ const { q, order, offset } = useQueryParams(
12754
+ ["q", "order", "offset"],
12755
+ VARIANT_PREFIX
12756
+ );
12757
+ const { variants, count, isPending, isError, error } = useProductVariants(
12758
+ {
12759
+ q,
12760
+ order,
12761
+ offset: offset ? parseInt(offset) : void 0,
12762
+ limit: LIMIT
12868
12763
  },
12869
- resolver: zodResolver(schema)
12870
- });
12871
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12872
- const { handleSuccess } = useRouteModal();
12873
- const onSubmit = form.handleSubmit(async (data) => {
12764
+ {
12765
+ placeholderData: keepPreviousData
12766
+ }
12767
+ );
12768
+ const columns = useColumns();
12769
+ const { mutateAsync } = useDraftOrderAddItems(orderId);
12770
+ const onSubmit = async () => {
12771
+ const ids = Object.keys(rowSelection).filter(
12772
+ (id) => !items.find((i) => i.variant_id === id)
12773
+ );
12874
12774
  await mutateAsync(
12875
12775
  {
12876
- shipping_address: {
12877
- first_name: data.first_name,
12878
- last_name: data.last_name,
12879
- company: data.company,
12880
- address_1: data.address_1,
12881
- address_2: data.address_2,
12882
- city: data.city,
12883
- province: data.province,
12884
- country_code: data.country_code,
12885
- postal_code: data.postal_code,
12886
- phone: data.phone
12887
- }
12776
+ items: ids.map((id) => ({
12777
+ variant_id: id,
12778
+ quantity: 1
12779
+ }))
12888
12780
  },
12889
12781
  {
12890
12782
  onSuccess: () => {
12891
- handleSuccess();
12783
+ setRowSelection({});
12784
+ setIsOpen(STACKED_MODAL_ID, false);
12892
12785
  },
12893
- onError: (error) => {
12894
- toast.error(error.message);
12786
+ onError: (e) => {
12787
+ toast.error(e.message);
12895
12788
  }
12896
12789
  }
12897
12790
  );
12898
- });
12899
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12900
- KeyboundForm,
12791
+ };
12792
+ if (isError) {
12793
+ throw error;
12794
+ }
12795
+ return /* @__PURE__ */ jsxs(
12796
+ StackedFocusModal.Content,
12901
12797
  {
12902
- className: "flex flex-1 flex-col overflow-hidden",
12903
- onSubmit,
12798
+ onOpenAutoFocus: (e) => {
12799
+ e.preventDefault();
12800
+ const searchInput = document.querySelector(
12801
+ "[data-modal-id='modal-search-input']"
12802
+ );
12803
+ if (searchInput) {
12804
+ searchInput.focus();
12805
+ }
12806
+ },
12904
12807
  children: [
12905
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12906
- /* @__PURE__ */ jsx(
12907
- Form$2.Field,
12908
- {
12909
- control: form.control,
12910
- name: "country_code",
12911
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12912
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12913
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12914
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12915
- ] })
12916
- }
12917
- ),
12918
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12919
- /* @__PURE__ */ jsx(
12920
- Form$2.Field,
12921
- {
12922
- control: form.control,
12923
- name: "first_name",
12924
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12925
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12926
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12927
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12928
- ] })
12929
- }
12930
- ),
12931
- /* @__PURE__ */ jsx(
12932
- Form$2.Field,
12933
- {
12934
- control: form.control,
12935
- name: "last_name",
12936
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12937
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12938
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12939
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12940
- ] })
12808
+ /* @__PURE__ */ jsxs(StackedFocusModal.Header, { children: [
12809
+ /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Product Variants" }) }),
12810
+ /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
12811
+ ] }),
12812
+ /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
12813
+ DataTable,
12814
+ {
12815
+ data: variants,
12816
+ columns,
12817
+ isLoading: isPending,
12818
+ getRowId: (row) => row.id,
12819
+ rowCount: count,
12820
+ prefix: VARIANT_PREFIX,
12821
+ layout: "fill",
12822
+ rowSelection: {
12823
+ state: rowSelection,
12824
+ onRowSelectionChange: setRowSelection,
12825
+ enableRowSelection: (row) => {
12826
+ return !items.find((i) => i.variant_id === row.original.id);
12941
12827
  }
12942
- )
12943
- ] }),
12944
- /* @__PURE__ */ jsx(
12945
- Form$2.Field,
12946
- {
12947
- control: form.control,
12948
- name: "company",
12949
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12950
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12951
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12952
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12953
- ] })
12954
- }
12955
- ),
12956
- /* @__PURE__ */ jsx(
12957
- Form$2.Field,
12958
- {
12959
- control: form.control,
12960
- name: "address_1",
12961
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12962
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12963
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12964
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12965
- ] })
12966
- }
12967
- ),
12968
- /* @__PURE__ */ jsx(
12969
- Form$2.Field,
12970
- {
12971
- control: form.control,
12972
- name: "address_2",
12973
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12974
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12975
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12976
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12977
- ] })
12978
- }
12979
- ),
12980
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12828
+ },
12829
+ autoFocusSearch: true
12830
+ }
12831
+ ) }),
12832
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12833
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12834
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
12835
+ ] }) })
12836
+ ]
12837
+ }
12838
+ );
12839
+ };
12840
+ const columnHelper = createDataTableColumnHelper();
12841
+ const useColumns = () => {
12842
+ return useMemo(() => {
12843
+ return [
12844
+ columnHelper.select(),
12845
+ columnHelper.accessor("product.title", {
12846
+ header: "Product",
12847
+ cell: ({ row }) => {
12848
+ var _a, _b, _c;
12849
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
12981
12850
  /* @__PURE__ */ jsx(
12982
- Form$2.Field,
12851
+ Thumbnail,
12983
12852
  {
12984
- control: form.control,
12985
- name: "postal_code",
12986
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12987
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12988
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12989
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12990
- ] })
12853
+ thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
12854
+ alt: (_b = row.original.product) == null ? void 0 : _b.title
12991
12855
  }
12992
12856
  ),
12993
- /* @__PURE__ */ jsx(
12994
- Form$2.Field,
12995
- {
12996
- control: form.control,
12997
- name: "city",
12998
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12999
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
13000
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13001
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13002
- ] })
13003
- }
13004
- )
13005
- ] }),
13006
- /* @__PURE__ */ jsx(
13007
- Form$2.Field,
12857
+ /* @__PURE__ */ jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
12858
+ ] });
12859
+ },
12860
+ enableSorting: true
12861
+ }),
12862
+ columnHelper.accessor("title", {
12863
+ header: "Variant",
12864
+ enableSorting: true
12865
+ }),
12866
+ columnHelper.accessor("sku", {
12867
+ header: "SKU",
12868
+ cell: ({ getValue }) => {
12869
+ return getValue() ?? "-";
12870
+ },
12871
+ enableSorting: true
12872
+ }),
12873
+ columnHelper.accessor("updated_at", {
12874
+ header: "Updated",
12875
+ cell: ({ getValue }) => {
12876
+ return /* @__PURE__ */ jsx(
12877
+ Tooltip,
13008
12878
  {
13009
- control: form.control,
13010
- name: "province",
13011
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13012
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13013
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13014
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13015
- ] })
12879
+ content: getFullDate({ date: getValue(), includeTime: true }),
12880
+ children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
13016
12881
  }
13017
- ),
13018
- /* @__PURE__ */ jsx(
13019
- Form$2.Field,
12882
+ );
12883
+ },
12884
+ enableSorting: true,
12885
+ sortAscLabel: "Oldest first",
12886
+ sortDescLabel: "Newest first"
12887
+ }),
12888
+ columnHelper.accessor("created_at", {
12889
+ header: "Created",
12890
+ cell: ({ getValue }) => {
12891
+ return /* @__PURE__ */ jsx(
12892
+ Tooltip,
13020
12893
  {
13021
- control: form.control,
13022
- name: "phone",
13023
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13024
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
13025
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13026
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13027
- ] })
12894
+ content: getFullDate({ date: getValue(), includeTime: true }),
12895
+ children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: getValue() }) })
13028
12896
  }
13029
- )
13030
- ] }) }),
13031
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
13032
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13033
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13034
- ] }) })
13035
- ]
13036
- }
13037
- ) });
12897
+ );
12898
+ },
12899
+ enableSorting: true,
12900
+ sortAscLabel: "Oldest first",
12901
+ sortDescLabel: "Newest first"
12902
+ })
12903
+ ];
12904
+ }, []);
12905
+ };
12906
+ const CustomItemForm = ({ orderId, currencyCode }) => {
12907
+ const { setIsOpen } = useStackedModal();
12908
+ const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
12909
+ const form = useForm({
12910
+ defaultValues: {
12911
+ title: "",
12912
+ quantity: 1,
12913
+ unit_price: ""
12914
+ },
12915
+ resolver: zodResolver(customItemSchema)
12916
+ });
12917
+ const onSubmit = form.handleSubmit(async (data) => {
12918
+ await addItems(
12919
+ {
12920
+ items: [
12921
+ {
12922
+ title: data.title,
12923
+ quantity: data.quantity,
12924
+ unit_price: convertNumber(data.unit_price)
12925
+ }
12926
+ ]
12927
+ },
12928
+ {
12929
+ onSuccess: () => {
12930
+ setIsOpen(STACKED_MODAL_ID, false);
12931
+ },
12932
+ onError: (e) => {
12933
+ toast.error(e.message);
12934
+ }
12935
+ }
12936
+ );
12937
+ });
12938
+ return /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxs(StackedFocusModal.Content, { children: [
12939
+ /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12940
+ /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
12941
+ /* @__PURE__ */ jsxs("div", { children: [
12942
+ /* @__PURE__ */ jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Add custom item" }) }),
12943
+ /* @__PURE__ */ jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(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." }) })
12944
+ ] }),
12945
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12946
+ /* @__PURE__ */ jsx(
12947
+ Form$2.Field,
12948
+ {
12949
+ control: form.control,
12950
+ name: "title",
12951
+ render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12952
+ /* @__PURE__ */ jsxs("div", { children: [
12953
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Title" }),
12954
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the title of the item" })
12955
+ ] }),
12956
+ /* @__PURE__ */ jsxs("div", { children: [
12957
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12958
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12959
+ ] })
12960
+ ] }) })
12961
+ }
12962
+ ),
12963
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12964
+ /* @__PURE__ */ jsx(
12965
+ Form$2.Field,
12966
+ {
12967
+ control: form.control,
12968
+ name: "unit_price",
12969
+ render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12970
+ /* @__PURE__ */ jsxs("div", { children: [
12971
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Unit price" }),
12972
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
12973
+ ] }),
12974
+ /* @__PURE__ */ jsxs("div", { children: [
12975
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12976
+ CurrencyInput,
12977
+ {
12978
+ symbol: getNativeSymbol(currencyCode),
12979
+ code: currencyCode,
12980
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
12981
+ ...field
12982
+ }
12983
+ ) }),
12984
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12985
+ ] })
12986
+ ] }) })
12987
+ }
12988
+ ),
12989
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12990
+ /* @__PURE__ */ jsx(
12991
+ Form$2.Field,
12992
+ {
12993
+ control: form.control,
12994
+ name: "quantity",
12995
+ render: ({ field }) => /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12996
+ /* @__PURE__ */ jsxs("div", { children: [
12997
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Quantity" }),
12998
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
12999
+ ] }),
13000
+ /* @__PURE__ */ jsxs("div", { className: "w-full flex-1", children: [
13001
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx(NumberInput, { ...field, className: "w-full" }) }) }),
13002
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13003
+ ] })
13004
+ ] }) })
13005
+ }
13006
+ )
13007
+ ] }) }) }),
13008
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
13009
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
13010
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
13011
+ ] }) })
13012
+ ] }) }) });
13013
+ };
13014
+ const customItemSchema = objectType({
13015
+ title: stringType().min(1),
13016
+ quantity: numberType(),
13017
+ unit_price: unionType([numberType(), stringType()])
13018
+ });
13019
+ const CustomItems = () => {
13020
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
13021
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
13022
+ /* @__PURE__ */ jsx(CustomItemsForm, {})
13023
+ ] });
13024
+ };
13025
+ const CustomItemsForm = () => {
13026
+ const form = useForm({
13027
+ resolver: zodResolver(schema)
13028
+ });
13029
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
13030
+ /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
13031
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
13032
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13033
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
13034
+ ] }) })
13035
+ ] }) });
13038
13036
  };
13039
- const schema = addressSchema;
13037
+ const schema = objectType({
13038
+ email: stringType().email()
13039
+ });
13040
13040
  const widgetModule = { widgets: [] };
13041
13041
  const routeModule = {
13042
13042
  routes: [
@@ -13057,10 +13057,6 @@ const routeModule = {
13057
13057
  handle,
13058
13058
  loader,
13059
13059
  children: [
13060
- {
13061
- Component: CustomItems,
13062
- path: "/draft-orders/:id/custom-items"
13063
- },
13064
13060
  {
13065
13061
  Component: BillingAddress,
13066
13062
  path: "/draft-orders/:id/billing-address"
@@ -13069,10 +13065,6 @@ const routeModule = {
13069
13065
  Component: Email,
13070
13066
  path: "/draft-orders/:id/email"
13071
13067
  },
13072
- {
13073
- Component: Items,
13074
- path: "/draft-orders/:id/items"
13075
- },
13076
13068
  {
13077
13069
  Component: Metadata,
13078
13070
  path: "/draft-orders/:id/metadata"
@@ -13089,13 +13081,21 @@ const routeModule = {
13089
13081
  Component: Shipping,
13090
13082
  path: "/draft-orders/:id/shipping"
13091
13083
  },
13084
+ {
13085
+ Component: ShippingAddress,
13086
+ path: "/draft-orders/:id/shipping-address"
13087
+ },
13092
13088
  {
13093
13089
  Component: TransferOwnership,
13094
13090
  path: "/draft-orders/:id/transfer-ownership"
13095
13091
  },
13096
13092
  {
13097
- Component: ShippingAddress,
13098
- path: "/draft-orders/:id/shipping-address"
13093
+ Component: Items,
13094
+ path: "/draft-orders/:id/items"
13095
+ },
13096
+ {
13097
+ Component: CustomItems,
13098
+ path: "/draft-orders/:id/custom-items"
13099
13099
  }
13100
13100
  ]
13101
13101
  }