@medusajs/draft-order 2.10.2-preview-20250909081836 → 2.10.2-preview-20250909150158

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 +1611 -1611
  2. package/.medusa/server/src/admin/index.mjs +1611 -1611
  3. package/package.json +38 -23
package/.medusa/server/src/admin/index.js CHANGED
@@ -9573,196 +9573,6 @@ const ID = () => {
9573
9573
  /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
9574
9574
  ] });
9575
9575
  };
9576
- const BillingAddress = () => {
9577
- const { id } = reactRouterDom.useParams();
9578
- const { order, isPending, isError, error } = useOrder(id, {
9579
- fields: "+billing_address"
9580
- });
9581
- if (isError) {
9582
- throw error;
9583
- }
9584
- const isReady = !isPending && !!order;
9585
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9586
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9587
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
9588
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9589
- ] }),
9590
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
9591
- ] });
9592
- };
9593
- const BillingAddressForm = ({ order }) => {
9594
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9595
- const form = reactHookForm.useForm({
9596
- defaultValues: {
9597
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9598
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9599
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9600
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9601
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9602
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9603
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9604
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9605
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9606
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9607
- },
9608
- resolver: zod.zodResolver(schema$5)
9609
- });
9610
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9611
- const { handleSuccess } = useRouteModal();
9612
- const onSubmit = form.handleSubmit(async (data) => {
9613
- await mutateAsync(
9614
- { billing_address: data },
9615
- {
9616
- onSuccess: () => {
9617
- handleSuccess();
9618
- },
9619
- onError: (error) => {
9620
- ui.toast.error(error.message);
9621
- }
9622
- }
9623
- );
9624
- });
9625
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9626
- KeyboundForm,
9627
- {
9628
- className: "flex flex-1 flex-col overflow-hidden",
9629
- onSubmit,
9630
- children: [
9631
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
9632
- /* @__PURE__ */ jsxRuntime.jsx(
9633
- Form$2.Field,
9634
- {
9635
- control: form.control,
9636
- name: "country_code",
9637
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9638
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
9639
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
9640
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9641
- ] })
9642
- }
9643
- ),
9644
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9645
- /* @__PURE__ */ jsxRuntime.jsx(
9646
- Form$2.Field,
9647
- {
9648
- control: form.control,
9649
- name: "first_name",
9650
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9651
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
9652
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9653
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9654
- ] })
9655
- }
9656
- ),
9657
- /* @__PURE__ */ jsxRuntime.jsx(
9658
- Form$2.Field,
9659
- {
9660
- control: form.control,
9661
- name: "last_name",
9662
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9663
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
9664
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9665
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9666
- ] })
9667
- }
9668
- )
9669
- ] }),
9670
- /* @__PURE__ */ jsxRuntime.jsx(
9671
- Form$2.Field,
9672
- {
9673
- control: form.control,
9674
- name: "company",
9675
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9676
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
9677
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9678
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9679
- ] })
9680
- }
9681
- ),
9682
- /* @__PURE__ */ jsxRuntime.jsx(
9683
- Form$2.Field,
9684
- {
9685
- control: form.control,
9686
- name: "address_1",
9687
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9688
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
9689
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9690
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9691
- ] })
9692
- }
9693
- ),
9694
- /* @__PURE__ */ jsxRuntime.jsx(
9695
- Form$2.Field,
9696
- {
9697
- control: form.control,
9698
- name: "address_2",
9699
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9700
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9701
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9702
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9703
- ] })
9704
- }
9705
- ),
9706
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9707
- /* @__PURE__ */ jsxRuntime.jsx(
9708
- Form$2.Field,
9709
- {
9710
- control: form.control,
9711
- name: "postal_code",
9712
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9713
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
9714
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9715
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9716
- ] })
9717
- }
9718
- ),
9719
- /* @__PURE__ */ jsxRuntime.jsx(
9720
- Form$2.Field,
9721
- {
9722
- control: form.control,
9723
- name: "city",
9724
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9725
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
9726
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9727
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9728
- ] })
9729
- }
9730
- )
9731
- ] }),
9732
- /* @__PURE__ */ jsxRuntime.jsx(
9733
- Form$2.Field,
9734
- {
9735
- control: form.control,
9736
- name: "province",
9737
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9738
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9739
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9740
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9741
- ] })
9742
- }
9743
- ),
9744
- /* @__PURE__ */ jsxRuntime.jsx(
9745
- Form$2.Field,
9746
- {
9747
- control: form.control,
9748
- name: "phone",
9749
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9750
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
9751
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9752
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9753
- ] })
9754
- }
9755
- )
9756
- ] }) }),
9757
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9758
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9759
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9760
- ] }) })
9761
- ]
9762
- }
9763
- ) });
9764
- };
9765
- const schema$5 = addressSchema;
9766
9576
  const CustomItems = () => {
9767
9577
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9768
9578
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
@@ -9771,7 +9581,7 @@ const CustomItems = () => {
9771
9581
  };
9772
9582
  const CustomItemsForm = () => {
9773
9583
  const form = reactHookForm.useForm({
9774
- resolver: zod.zodResolver(schema$4)
9584
+ resolver: zod.zodResolver(schema$5)
9775
9585
  });
9776
9586
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9777
9587
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
@@ -9781,7 +9591,7 @@ const CustomItemsForm = () => {
9781
9591
  ] }) })
9782
9592
  ] }) });
9783
9593
  };
9784
- const schema$4 = objectType({
9594
+ const schema$5 = objectType({
9785
9595
  email: stringType().email()
9786
9596
  });
9787
9597
  const Email = () => {
@@ -9806,7 +9616,7 @@ const EmailForm = ({ order }) => {
9806
9616
  defaultValues: {
9807
9617
  email: order.email ?? ""
9808
9618
  },
9809
- resolver: zod.zodResolver(schema$3)
9619
+ resolver: zod.zodResolver(schema$4)
9810
9620
  });
9811
9621
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9812
9622
  const { handleSuccess } = useRouteModal();
@@ -9849,7 +9659,7 @@ const EmailForm = ({ order }) => {
9849
9659
  }
9850
9660
  ) });
9851
9661
  };
9852
- const schema$3 = objectType({
9662
+ const schema$4 = objectType({
9853
9663
  email: stringType().email()
9854
9664
  });
9855
9665
  const InlineTip = React.forwardRef(
@@ -10553,7 +10363,7 @@ const SalesChannelForm = ({ order }) => {
10553
10363
  defaultValues: {
10554
10364
  sales_channel_id: order.sales_channel_id || ""
10555
10365
  },
10556
- resolver: zod.zodResolver(schema$2)
10366
+ resolver: zod.zodResolver(schema$3)
10557
10367
  });
10558
10368
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10559
10369
  const { handleSuccess } = useRouteModal();
@@ -10628,158 +10438,26 @@ const SalesChannelField = ({ control, order }) => {
10628
10438
  }
10629
10439
  );
10630
10440
  };
10631
- const schema$2 = objectType({
10441
+ const schema$3 = objectType({
10632
10442
  sales_channel_id: stringType().min(1)
10633
10443
  });
10634
- const NumberInput = React.forwardRef(
10635
- ({
10636
- value,
10637
- onChange,
10638
- size = "base",
10639
- min = 0,
10640
- max = 100,
10641
- step = 1,
10642
- className,
10643
- disabled,
10644
- ...props
10645
- }, ref) => {
10646
- const handleChange = (event) => {
10647
- const newValue = event.target.value === "" ? min : Number(event.target.value);
10648
- if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
10649
- onChange(newValue);
10650
- }
10651
- };
10652
- const handleIncrement = () => {
10653
- const newValue = value + step;
10654
- if (max === void 0 || newValue <= max) {
10655
- onChange(newValue);
10656
- }
10657
- };
10658
- const handleDecrement = () => {
10659
- const newValue = value - step;
10660
- if (min === void 0 || newValue >= min) {
10661
- onChange(newValue);
10662
- }
10663
- };
10664
- return /* @__PURE__ */ jsxRuntime.jsxs(
10665
- "div",
10666
- {
10667
- className: ui.clx(
10668
- "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
10669
- "[&:has(input:focus)]:shadow-borders-interactive-with-active",
10670
- {
10671
- "h-7": size === "small",
10672
- "h-8": size === "base"
10673
- },
10674
- className
10675
- ),
10676
- children: [
10677
- /* @__PURE__ */ jsxRuntime.jsx(
10678
- "input",
10679
- {
10680
- ref,
10681
- type: "number",
10682
- value,
10683
- onChange: handleChange,
10684
- min,
10685
- max,
10686
- step,
10687
- className: ui.clx(
10688
- "flex-1 px-2 py-1 bg-transparent txt-compact-small text-ui-fg-base outline-none [appearance:textfield]",
10689
- "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
10690
- "placeholder:text-ui-fg-muted"
10691
- ),
10692
- ...props
10693
- }
10694
- ),
10695
- /* @__PURE__ */ jsxRuntime.jsxs(
10696
- "button",
10697
- {
10698
- className: ui.clx(
10699
- "flex items-center justify-center outline-none transition-fg",
10700
- "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
10701
- "focus:bg-ui-bg-field-component-hover",
10702
- "hover:bg-ui-bg-field-component-hover",
10703
- {
10704
- "size-7": size === "small",
10705
- "size-8": size === "base"
10706
- }
10707
- ),
10708
- type: "button",
10709
- onClick: handleDecrement,
10710
- disabled: min !== void 0 && value <= min || disabled,
10711
- children: [
10712
- /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, {}),
10713
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
10714
- ]
10715
- }
10716
- ),
10717
- /* @__PURE__ */ jsxRuntime.jsxs(
10718
- "button",
10719
- {
10720
- className: ui.clx(
10721
- "flex items-center justify-center outline-none transition-fg",
10722
- "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
10723
- "focus:bg-ui-bg-field-hover",
10724
- "hover:bg-ui-bg-field-hover",
10725
- {
10726
- "size-7": size === "small",
10727
- "size-8": size === "base"
10728
- }
10729
- ),
10730
- type: "button",
10731
- onClick: handleIncrement,
10732
- disabled: max !== void 0 && value >= max || disabled,
10733
- children: [
10734
- /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
10735
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Increase by ${step}` })
10736
- ]
10737
- }
10738
- )
10739
- ]
10740
- }
10741
- );
10742
- }
10743
- );
10744
- const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
10745
- const productVariantsQueryKeys = {
10746
- list: (query2) => [
10747
- PRODUCT_VARIANTS_QUERY_KEY,
10748
- query2 ? query2 : void 0
10749
- ]
10750
- };
10751
- const useProductVariants = (query2, options) => {
10752
- const { data, ...rest } = reactQuery.useQuery({
10753
- queryKey: productVariantsQueryKeys.list(query2),
10754
- queryFn: async () => await sdk.admin.productVariant.list(query2),
10755
- ...options
10756
- });
10757
- return { ...data, ...rest };
10758
- };
10759
10444
  function convertNumber(value) {
10760
10445
  return typeof value === "string" ? Number(value.replace(",", ".")) : value;
10761
10446
  }
10762
- const STACKED_MODAL_ID = "items_stacked_modal";
10763
- const Items = () => {
10447
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
10448
+ const Shipping = () => {
10449
+ var _a;
10764
10450
  const { id } = reactRouterDom.useParams();
10451
+ const { order, isPending, isError, error } = useOrder(id, {
10452
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
10453
+ });
10765
10454
  const {
10766
10455
  order: preview,
10767
10456
  isPending: isPreviewPending,
10768
10457
  isError: isPreviewError,
10769
10458
  error: previewError
10770
- } = useOrderPreview(id, void 0, {
10771
- placeholderData: reactQuery.keepPreviousData
10772
- });
10459
+ } = useOrderPreview(id);
10773
10460
  useInitiateOrderEdit({ preview });
10774
- const { draft_order, isPending, isError, error } = useDraftOrder(
10775
- id,
10776
- {
10777
- fields: "currency_code"
10778
- },
10779
- {
10780
- enabled: !!id
10781
- }
10782
- );
10783
10461
  const { onCancel } = useCancelOrderEdit({ preview });
10784
10462
  if (isError) {
10785
10463
  throw error;
@@ -10787,28 +10465,50 @@ const Items = () => {
10787
10465
  if (isPreviewError) {
10788
10466
  throw previewError;
10789
10467
  }
10790
- const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
10791
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: ready ? /* @__PURE__ */ jsxRuntime.jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10792
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Items" }) }),
10468
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
10469
+ const isReady = preview && !isPreviewPending && order && !isPending;
10470
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
10471
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
10472
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
10473
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
10474
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
10475
+ ] }) }) }),
10476
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
10477
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10478
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
10793
10479
  /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
10794
10480
  ] }) });
10795
10481
  };
10796
- const ItemsForm = ({ preview, currencyCode }) => {
10482
+ const ShippingForm = ({ preview, order }) => {
10797
10483
  var _a;
10484
+ const { setIsOpen } = useStackedModal();
10798
10485
  const [isSubmitting, setIsSubmitting] = React.useState(false);
10799
- const [modalContent, setModalContent] = React.useState(
10800
- null
10486
+ const [data, setData] = React.useState(null);
10487
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
10488
+ const { shipping_options } = useShippingOptions(
10489
+ {
10490
+ id: appliedShippingOptionIds,
10491
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
10492
+ },
10493
+ {
10494
+ enabled: appliedShippingOptionIds.length > 0
10495
+ }
10801
10496
  );
10497
+ const uniqueShippingProfiles = React.useMemo(() => {
10498
+ const profiles = /* @__PURE__ */ new Map();
10499
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
10500
+ profiles.set(profile.id, profile);
10501
+ });
10502
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
10503
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
10504
+ });
10505
+ return Array.from(profiles.values());
10506
+ }, [order.items, shipping_options]);
10802
10507
  const { handleSuccess } = useRouteModal();
10803
- const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
10804
10508
  const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10805
10509
  const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
10806
- const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
10807
- const matches = React.useMemo(() => {
10808
- return matchSorter.matchSorter(preview.items, query2, {
10809
- keys: ["product_title", "variant_title", "variant_sku", "title"]
10810
- });
10811
- }, [preview.items, query2]);
10510
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
10511
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
10812
10512
  const onSubmit = async () => {
10813
10513
  setIsSubmitting(true);
10814
10514
  let requestSucceeded = false;
@@ -10836,1103 +10536,85 @@ const ItemsForm = ({ preview, currencyCode }) => {
10836
10536
  }
10837
10537
  });
10838
10538
  };
10839
- const onKeyDown = React.useCallback(
10539
+ const onKeydown = React.useCallback(
10840
10540
  (e) => {
10841
10541
  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
10842
- if (modalContent || isSubmitting) {
10542
+ if (data || isSubmitting) {
10843
10543
  return;
10844
10544
  }
10845
10545
  onSubmit();
10846
10546
  }
10847
10547
  },
10848
- [modalContent, isSubmitting, onSubmit]
10548
+ [data, isSubmitting, onSubmit]
10849
10549
  );
10850
10550
  React.useEffect(() => {
10851
- document.addEventListener("keydown", onKeyDown);
10551
+ document.addEventListener("keydown", onKeydown);
10852
10552
  return () => {
10853
- document.removeEventListener("keydown", onKeyDown);
10553
+ document.removeEventListener("keydown", onKeydown);
10854
10554
  };
10855
- }, [onKeyDown]);
10555
+ }, [onKeydown]);
10856
10556
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
10857
10557
  /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
10858
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
10859
- StackedFocusModal,
10860
- {
10861
- id: STACKED_MODAL_ID,
10862
- onOpenChangeCallback: (open) => {
10863
- if (!open) {
10864
- setModalContent(null);
10865
- }
10866
- },
10867
- children: [
10868
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
10869
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10870
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Items" }) }),
10871
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order" }) })
10872
- ] }),
10873
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10874
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
10875
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
10876
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
10877
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
10878
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
10879
- ] }),
10880
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
10881
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
10882
- ui.Input,
10883
- {
10884
- type: "search",
10885
- placeholder: "Search items",
10886
- value: searchValue,
10887
- onChange: (e) => onSearchValueChange(e.target.value)
10888
- }
10889
- ) }),
10890
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
10891
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}) }) }),
10892
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
10893
- /* @__PURE__ */ jsxRuntime.jsx(
10894
- StackedModalTrigger$1,
10895
- {
10896
- type: "add-items",
10897
- setModalContent
10898
- }
10899
- ),
10900
- /* @__PURE__ */ jsxRuntime.jsx(
10901
- StackedModalTrigger$1,
10558
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
10559
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
10560
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10561
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
10562
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
10563
+ ] }),
10564
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10565
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
10566
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
10567
+ /* @__PURE__ */ jsxRuntime.jsx(
10568
+ ui.Text,
10569
+ {
10570
+ size: "xsmall",
10571
+ weight: "plus",
10572
+ className: "text-ui-fg-muted",
10573
+ children: "Shipping profile"
10574
+ }
10575
+ ),
10576
+ /* @__PURE__ */ jsxRuntime.jsx(
10577
+ ui.Text,
10578
+ {
10579
+ size: "xsmall",
10580
+ weight: "plus",
10581
+ className: "text-ui-fg-muted",
10582
+ children: "Action"
10583
+ }
10584
+ )
10585
+ ] }),
10586
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
10587
+ var _a2, _b, _c, _d, _e, _f, _g;
10588
+ const items = getItemsWithShippingProfile(
10589
+ profile.id,
10590
+ order.items
10591
+ );
10592
+ const hasItems = items.length > 0;
10593
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
10594
+ (option) => option.shipping_profile_id === profile.id
10595
+ );
10596
+ const shippingMethod = preview.shipping_methods.find(
10597
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
10598
+ );
10599
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
10600
+ (action) => action.action === "SHIPPING_ADD"
10601
+ );
10602
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10603
+ radixUi.Accordion.Item,
10604
+ {
10605
+ value: profile.id,
10606
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
10607
+ children: [
10608
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
10609
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
10610
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
10611
+ ui.IconButton,
10902
10612
  {
10903
- type: "add-custom-item",
10904
- setModalContent
10905
- }
10906
- )
10907
- ] })
10908
- ] })
10909
- ] })
10910
- ] }),
10911
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
10912
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-[2fr_1fr_2fr_28px] gap-3 px-4 py-2", children: [
10913
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
10914
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) }),
10915
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Price" }) }),
10916
- /* @__PURE__ */ jsxRuntime.jsx("div", {})
10917
- ] }) }),
10918
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxRuntime.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: [
10919
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
10920
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add items to the order to get started." })
10921
- ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
10922
- Item,
10923
- {
10924
- item,
10925
- preview,
10926
- currencyCode
10927
- },
10928
- item.id
10929
- )) : /* @__PURE__ */ jsxRuntime.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: [
10930
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
10931
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
10932
- 'No items found for "',
10933
- query2,
10934
- '".'
10935
- ] })
10936
- ] }) })
10937
- ] })
10938
- ] }),
10939
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10940
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
10941
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
10942
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
10943
- ui.Text,
10944
- {
10945
- size: "small",
10946
- leading: "compact",
10947
- className: "text-ui-fg-subtle",
10948
- children: [
10949
- itemCount,
10950
- " ",
10951
- itemCount === 1 ? "item" : "items"
10952
- ]
10953
- }
10954
- ) }),
10955
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
10956
- ] })
10957
- ] }) }),
10958
- modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsxRuntime.jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsxRuntime.jsx(
10959
- CustomItemForm,
10960
- {
10961
- orderId: preview.id,
10962
- currencyCode
10963
- }
10964
- ) : null)
10965
- ]
10966
- }
10967
- ) }),
10968
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10969
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10970
- /* @__PURE__ */ jsxRuntime.jsx(
10971
- ui.Button,
10972
- {
10973
- size: "small",
10974
- type: "button",
10975
- onClick: onSubmit,
10976
- isLoading: isSubmitting,
10977
- children: "Save"
10978
- }
10979
- )
10980
- ] }) })
10981
- ] });
10982
- };
10983
- const Item = ({ item, preview, currencyCode }) => {
10984
- if (item.variant_id) {
10985
- return /* @__PURE__ */ jsxRuntime.jsx(VariantItem, { item, preview, currencyCode });
10986
- }
10987
- return /* @__PURE__ */ jsxRuntime.jsx(CustomItem, { item, preview, currencyCode });
10988
- };
10989
- const VariantItem = ({ item, preview, currencyCode }) => {
10990
- const [editing, setEditing] = React.useState(false);
10991
- const form = reactHookForm.useForm({
10992
- defaultValues: {
10993
- quantity: item.quantity,
10994
- unit_price: item.unit_price
10995
- },
10996
- resolver: zod.zodResolver(variantItemSchema)
10997
- });
10998
- const actionId = React.useMemo(() => {
10999
- var _a, _b;
11000
- return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
11001
- }, [item]);
11002
- const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
11003
- const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
11004
- const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
11005
- const onSubmit = form.handleSubmit(async (data) => {
11006
- if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
11007
- setEditing(false);
11008
- return;
11009
- }
11010
- if (!actionId) {
11011
- await updateOriginalItem(
11012
- {
11013
- item_id: item.id,
11014
- quantity: data.quantity,
11015
- unit_price: convertNumber(data.unit_price)
11016
- },
11017
- {
11018
- onSuccess: () => {
11019
- setEditing(false);
11020
- },
11021
- onError: (e) => {
11022
- ui.toast.error(e.message);
11023
- }
11024
- }
11025
- );
11026
- return;
11027
- }
11028
- await updateActionItem(
11029
- {
11030
- action_id: actionId,
11031
- quantity: data.quantity,
11032
- unit_price: convertNumber(data.unit_price)
11033
- },
11034
- {
11035
- onSuccess: () => {
11036
- setEditing(false);
11037
- },
11038
- onError: (e) => {
11039
- ui.toast.error(e.message);
11040
- }
11041
- }
11042
- );
11043
- });
11044
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.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: [
11045
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3", children: [
11046
- /* @__PURE__ */ jsxRuntime.jsx(
11047
- Thumbnail,
11048
- {
11049
- thumbnail: item.thumbnail,
11050
- alt: item.product_title ?? void 0
11051
- }
11052
- ),
11053
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11054
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
11055
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
11056
- /* @__PURE__ */ jsxRuntime.jsxs(
11057
- ui.Text,
11058
- {
11059
- size: "small",
11060
- leading: "compact",
11061
- className: "text-ui-fg-subtle",
11062
- children: [
11063
- "(",
11064
- item.variant_title,
11065
- ")"
11066
- ]
11067
- }
11068
- )
11069
- ] }),
11070
- /* @__PURE__ */ jsxRuntime.jsx(
11071
- ui.Text,
11072
- {
11073
- size: "small",
11074
- leading: "compact",
11075
- className: "text-ui-fg-subtle",
11076
- children: item.variant_sku
11077
- }
11078
- )
11079
- ] })
11080
- ] }),
11081
- editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
11082
- Form$2.Field,
11083
- {
11084
- control: form.control,
11085
- name: "quantity",
11086
- render: ({ field }) => {
11087
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
11088
- }
11089
- }
11090
- ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }) }),
11091
- editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
11092
- Form$2.Field,
11093
- {
11094
- control: form.control,
11095
- name: "unit_price",
11096
- render: ({ field: { onChange, ...field } }) => {
11097
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11098
- ui.CurrencyInput,
11099
- {
11100
- ...field,
11101
- symbol: getNativeSymbol(currencyCode),
11102
- code: currencyCode,
11103
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
11104
- }
11105
- ) }) });
11106
- }
11107
- }
11108
- ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-1 items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
11109
- /* @__PURE__ */ jsxRuntime.jsx(
11110
- ui.IconButton,
11111
- {
11112
- type: "button",
11113
- size: "small",
11114
- onClick: editing ? onSubmit : () => {
11115
- setEditing(true);
11116
- },
11117
- disabled: isPending,
11118
- children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
11119
- }
11120
- )
11121
- ] }) }) });
11122
- };
11123
- const variantItemSchema = objectType({
11124
- quantity: numberType(),
11125
- unit_price: unionType([numberType(), stringType()])
11126
- });
11127
- const CustomItem = ({ item, preview, currencyCode }) => {
11128
- const [editing, setEditing] = React.useState(false);
11129
- const { quantity, unit_price, title } = item;
11130
- const form = reactHookForm.useForm({
11131
- defaultValues: {
11132
- title,
11133
- quantity,
11134
- unit_price
11135
- },
11136
- resolver: zod.zodResolver(customItemSchema)
11137
- });
11138
- React.useEffect(() => {
11139
- form.reset({
11140
- title,
11141
- quantity,
11142
- unit_price
11143
- });
11144
- }, [form, title, quantity, unit_price]);
11145
- const actionId = React.useMemo(() => {
11146
- var _a, _b;
11147
- return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
11148
- }, [item]);
11149
- const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
11150
- const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
11151
- const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
11152
- const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
11153
- const onSubmit = form.handleSubmit(async (data) => {
11154
- if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
11155
- setEditing(false);
11156
- return;
11157
- }
11158
- if (!actionId) {
11159
- await updateOriginalItem(
11160
- {
11161
- item_id: item.id,
11162
- quantity: data.quantity,
11163
- unit_price: convertNumber(data.unit_price)
11164
- },
11165
- {
11166
- onSuccess: () => {
11167
- setEditing(false);
11168
- },
11169
- onError: (e) => {
11170
- ui.toast.error(e.message);
11171
- }
11172
- }
11173
- );
11174
- return;
11175
- }
11176
- if (data.quantity === 0) {
11177
- await removeActionItem(actionId, {
11178
- onSuccess: () => {
11179
- setEditing(false);
11180
- },
11181
- onError: (e) => {
11182
- ui.toast.error(e.message);
11183
- }
11184
- });
11185
- return;
11186
- }
11187
- await updateActionItem(
11188
- {
11189
- action_id: actionId,
11190
- quantity: data.quantity,
11191
- unit_price: convertNumber(data.unit_price)
11192
- },
11193
- {
11194
- onSuccess: () => {
11195
- setEditing(false);
11196
- },
11197
- onError: (e) => {
11198
- ui.toast.error(e.message);
11199
- }
11200
- }
11201
- );
11202
- });
11203
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.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: [
11204
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
11205
- /* @__PURE__ */ jsxRuntime.jsx(
11206
- Thumbnail,
11207
- {
11208
- thumbnail: item.thumbnail,
11209
- alt: item.title ?? void 0
11210
- }
11211
- ),
11212
- editing ? /* @__PURE__ */ jsxRuntime.jsx(
11213
- Form$2.Field,
11214
- {
11215
- control: form.control,
11216
- name: "title",
11217
- render: ({ field }) => {
11218
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }) });
11219
- }
11220
- }
11221
- ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.title })
11222
- ] }),
11223
- editing ? /* @__PURE__ */ jsxRuntime.jsx(
11224
- Form$2.Field,
11225
- {
11226
- control: form.control,
11227
- name: "quantity",
11228
- render: ({ field }) => {
11229
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
11230
- }
11231
- }
11232
- ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }),
11233
- editing ? /* @__PURE__ */ jsxRuntime.jsx(
11234
- Form$2.Field,
11235
- {
11236
- control: form.control,
11237
- name: "unit_price",
11238
- render: ({ field: { onChange, ...field } }) => {
11239
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11240
- ui.CurrencyInput,
11241
- {
11242
- ...field,
11243
- symbol: getNativeSymbol(currencyCode),
11244
- code: currencyCode,
11245
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
11246
- }
11247
- ) }) });
11248
- }
11249
- }
11250
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
11251
- /* @__PURE__ */ jsxRuntime.jsx(
11252
- ui.IconButton,
11253
- {
11254
- type: "button",
11255
- size: "small",
11256
- onClick: editing ? onSubmit : () => {
11257
- setEditing(true);
11258
- },
11259
- disabled: isPending,
11260
- children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
11261
- }
11262
- )
11263
- ] }) }) });
11264
- };
11265
- const StackedModalTrigger$1 = ({
11266
- type,
11267
- setModalContent
11268
- }) => {
11269
- const { setIsOpen } = useStackedModal();
11270
- const onClick = React.useCallback(() => {
11271
- setModalContent(type);
11272
- setIsOpen(STACKED_MODAL_ID, true);
11273
- }, [setModalContent, setIsOpen, type]);
11274
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
11275
- };
11276
- const VARIANT_PREFIX = "items";
11277
- const LIMIT = 50;
11278
- const ExistingItemsForm = ({ orderId, items }) => {
11279
- const { setIsOpen } = useStackedModal();
11280
- const [rowSelection, setRowSelection] = React.useState(
11281
- items.reduce((acc, item) => {
11282
- acc[item.variant_id] = true;
11283
- return acc;
11284
- }, {})
11285
- );
11286
- React.useEffect(() => {
11287
- setRowSelection(
11288
- items.reduce((acc, item) => {
11289
- if (item.variant_id) {
11290
- acc[item.variant_id] = true;
11291
- }
11292
- return acc;
11293
- }, {})
11294
- );
11295
- }, [items]);
11296
- const { q, order, offset } = useQueryParams(
11297
- ["q", "order", "offset"],
11298
- VARIANT_PREFIX
11299
- );
11300
- const { variants, count, isPending, isError, error } = useProductVariants(
11301
- {
11302
- q,
11303
- order,
11304
- offset: offset ? parseInt(offset) : void 0,
11305
- limit: LIMIT
11306
- },
11307
- {
11308
- placeholderData: reactQuery.keepPreviousData
11309
- }
11310
- );
11311
- const columns = useColumns();
11312
- const { mutateAsync } = useDraftOrderAddItems(orderId);
11313
- const onSubmit = async () => {
11314
- const ids = Object.keys(rowSelection).filter(
11315
- (id) => !items.find((i) => i.variant_id === id)
11316
- );
11317
- await mutateAsync(
11318
- {
11319
- items: ids.map((id) => ({
11320
- variant_id: id,
11321
- quantity: 1
11322
- }))
11323
- },
11324
- {
11325
- onSuccess: () => {
11326
- setRowSelection({});
11327
- setIsOpen(STACKED_MODAL_ID, false);
11328
- },
11329
- onError: (e) => {
11330
- ui.toast.error(e.message);
11331
- }
11332
- }
11333
- );
11334
- };
11335
- if (isError) {
11336
- throw error;
11337
- }
11338
- return /* @__PURE__ */ jsxRuntime.jsxs(
11339
- StackedFocusModal.Content,
11340
- {
11341
- onOpenAutoFocus: (e) => {
11342
- e.preventDefault();
11343
- const searchInput = document.querySelector(
11344
- "[data-modal-id='modal-search-input']"
11345
- );
11346
- if (searchInput) {
11347
- searchInput.focus();
11348
- }
11349
- },
11350
- children: [
11351
- /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Header, { children: [
11352
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Product Variants" }) }),
11353
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
11354
- ] }),
11355
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
11356
- DataTable,
11357
- {
11358
- data: variants,
11359
- columns,
11360
- isLoading: isPending,
11361
- getRowId: (row) => row.id,
11362
- rowCount: count,
11363
- prefix: VARIANT_PREFIX,
11364
- layout: "fill",
11365
- rowSelection: {
11366
- state: rowSelection,
11367
- onRowSelectionChange: setRowSelection,
11368
- enableRowSelection: (row) => {
11369
- return !items.find((i) => i.variant_id === row.original.id);
11370
- }
11371
- },
11372
- autoFocusSearch: true
11373
- }
11374
- ) }),
11375
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11376
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11377
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
11378
- ] }) })
11379
- ]
11380
- }
11381
- );
11382
- };
11383
- const columnHelper = ui.createDataTableColumnHelper();
11384
- const useColumns = () => {
11385
- return React.useMemo(() => {
11386
- return [
11387
- columnHelper.select(),
11388
- columnHelper.accessor("product.title", {
11389
- header: "Product",
11390
- cell: ({ row }) => {
11391
- var _a, _b, _c;
11392
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
11393
- /* @__PURE__ */ jsxRuntime.jsx(
11394
- Thumbnail,
11395
- {
11396
- thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
11397
- alt: (_b = row.original.product) == null ? void 0 : _b.title
11398
- }
11399
- ),
11400
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
11401
- ] });
11402
- },
11403
- enableSorting: true
11404
- }),
11405
- columnHelper.accessor("title", {
11406
- header: "Variant",
11407
- enableSorting: true
11408
- }),
11409
- columnHelper.accessor("sku", {
11410
- header: "SKU",
11411
- cell: ({ getValue }) => {
11412
- return getValue() ?? "-";
11413
- },
11414
- enableSorting: true
11415
- }),
11416
- columnHelper.accessor("updated_at", {
11417
- header: "Updated",
11418
- cell: ({ getValue }) => {
11419
- return /* @__PURE__ */ jsxRuntime.jsx(
11420
- ui.Tooltip,
11421
- {
11422
- content: getFullDate({ date: getValue(), includeTime: true }),
11423
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
11424
- }
11425
- );
11426
- },
11427
- enableSorting: true,
11428
- sortAscLabel: "Oldest first",
11429
- sortDescLabel: "Newest first"
11430
- }),
11431
- columnHelper.accessor("created_at", {
11432
- header: "Created",
11433
- cell: ({ getValue }) => {
11434
- return /* @__PURE__ */ jsxRuntime.jsx(
11435
- ui.Tooltip,
11436
- {
11437
- content: getFullDate({ date: getValue(), includeTime: true }),
11438
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
11439
- }
11440
- );
11441
- },
11442
- enableSorting: true,
11443
- sortAscLabel: "Oldest first",
11444
- sortDescLabel: "Newest first"
11445
- })
11446
- ];
11447
- }, []);
11448
- };
11449
- const CustomItemForm = ({ orderId, currencyCode }) => {
11450
- const { setIsOpen } = useStackedModal();
11451
- const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
11452
- const form = reactHookForm.useForm({
11453
- defaultValues: {
11454
- title: "",
11455
- quantity: 1,
11456
- unit_price: ""
11457
- },
11458
- resolver: zod.zodResolver(customItemSchema)
11459
- });
11460
- const onSubmit = form.handleSubmit(async (data) => {
11461
- await addItems(
11462
- {
11463
- items: [
11464
- {
11465
- title: data.title,
11466
- quantity: data.quantity,
11467
- unit_price: convertNumber(data.unit_price)
11468
- }
11469
- ]
11470
- },
11471
- {
11472
- onSuccess: () => {
11473
- setIsOpen(STACKED_MODAL_ID, false);
11474
- },
11475
- onError: (e) => {
11476
- ui.toast.error(e.message);
11477
- }
11478
- }
11479
- );
11480
- });
11481
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
11482
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
11483
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
11484
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11485
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
11486
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
11487
- ] }),
11488
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11489
- /* @__PURE__ */ jsxRuntime.jsx(
11490
- Form$2.Field,
11491
- {
11492
- control: form.control,
11493
- name: "title",
11494
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11495
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11496
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
11497
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
11498
- ] }),
11499
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11500
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11501
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11502
- ] })
11503
- ] }) })
11504
- }
11505
- ),
11506
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11507
- /* @__PURE__ */ jsxRuntime.jsx(
11508
- Form$2.Field,
11509
- {
11510
- control: form.control,
11511
- name: "unit_price",
11512
- render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11513
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11514
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
11515
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
11516
- ] }),
11517
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11518
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11519
- ui.CurrencyInput,
11520
- {
11521
- symbol: getNativeSymbol(currencyCode),
11522
- code: currencyCode,
11523
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
11524
- ...field
11525
- }
11526
- ) }),
11527
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11528
- ] })
11529
- ] }) })
11530
- }
11531
- ),
11532
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11533
- /* @__PURE__ */ jsxRuntime.jsx(
11534
- Form$2.Field,
11535
- {
11536
- control: form.control,
11537
- name: "quantity",
11538
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11539
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11540
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
11541
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
11542
- ] }),
11543
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
11544
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field, className: "w-full" }) }) }),
11545
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11546
- ] })
11547
- ] }) })
11548
- }
11549
- )
11550
- ] }) }) }),
11551
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
11552
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11553
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
11554
- ] }) })
11555
- ] }) }) });
11556
- };
11557
- const customItemSchema = objectType({
11558
- title: stringType().min(1),
11559
- quantity: numberType(),
11560
- unit_price: unionType([numberType(), stringType()])
11561
- });
11562
- const ShippingAddress = () => {
11563
- const { id } = reactRouterDom.useParams();
11564
- const { order, isPending, isError, error } = useOrder(id, {
11565
- fields: "+shipping_address"
11566
- });
11567
- if (isError) {
11568
- throw error;
11569
- }
11570
- const isReady = !isPending && !!order;
11571
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11572
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11573
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11574
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11575
- ] }),
11576
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11577
- ] });
11578
- };
11579
- const ShippingAddressForm = ({ order }) => {
11580
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11581
- const form = reactHookForm.useForm({
11582
- defaultValues: {
11583
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11584
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11585
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11586
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11587
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11588
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11589
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11590
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11591
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11592
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11593
- },
11594
- resolver: zod.zodResolver(schema$1)
11595
- });
11596
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11597
- const { handleSuccess } = useRouteModal();
11598
- const onSubmit = form.handleSubmit(async (data) => {
11599
- await mutateAsync(
11600
- {
11601
- shipping_address: {
11602
- first_name: data.first_name,
11603
- last_name: data.last_name,
11604
- company: data.company,
11605
- address_1: data.address_1,
11606
- address_2: data.address_2,
11607
- city: data.city,
11608
- province: data.province,
11609
- country_code: data.country_code,
11610
- postal_code: data.postal_code,
11611
- phone: data.phone
11612
- }
11613
- },
11614
- {
11615
- onSuccess: () => {
11616
- handleSuccess();
11617
- },
11618
- onError: (error) => {
11619
- ui.toast.error(error.message);
11620
- }
11621
- }
11622
- );
11623
- });
11624
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11625
- KeyboundForm,
11626
- {
11627
- className: "flex flex-1 flex-col overflow-hidden",
11628
- onSubmit,
11629
- children: [
11630
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
11631
- /* @__PURE__ */ jsxRuntime.jsx(
11632
- Form$2.Field,
11633
- {
11634
- control: form.control,
11635
- name: "country_code",
11636
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11637
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11638
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11639
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11640
- ] })
11641
- }
11642
- ),
11643
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11644
- /* @__PURE__ */ jsxRuntime.jsx(
11645
- Form$2.Field,
11646
- {
11647
- control: form.control,
11648
- name: "first_name",
11649
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11650
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11651
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11652
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11653
- ] })
11654
- }
11655
- ),
11656
- /* @__PURE__ */ jsxRuntime.jsx(
11657
- Form$2.Field,
11658
- {
11659
- control: form.control,
11660
- name: "last_name",
11661
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11662
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11663
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11664
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11665
- ] })
11666
- }
11667
- )
11668
- ] }),
11669
- /* @__PURE__ */ jsxRuntime.jsx(
11670
- Form$2.Field,
11671
- {
11672
- control: form.control,
11673
- name: "company",
11674
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11675
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11676
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11677
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11678
- ] })
11679
- }
11680
- ),
11681
- /* @__PURE__ */ jsxRuntime.jsx(
11682
- Form$2.Field,
11683
- {
11684
- control: form.control,
11685
- name: "address_1",
11686
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11687
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11688
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11689
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11690
- ] })
11691
- }
11692
- ),
11693
- /* @__PURE__ */ jsxRuntime.jsx(
11694
- Form$2.Field,
11695
- {
11696
- control: form.control,
11697
- name: "address_2",
11698
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11699
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11700
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11701
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11702
- ] })
11703
- }
11704
- ),
11705
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11706
- /* @__PURE__ */ jsxRuntime.jsx(
11707
- Form$2.Field,
11708
- {
11709
- control: form.control,
11710
- name: "postal_code",
11711
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11712
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11713
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11714
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11715
- ] })
11716
- }
11717
- ),
11718
- /* @__PURE__ */ jsxRuntime.jsx(
11719
- Form$2.Field,
11720
- {
11721
- control: form.control,
11722
- name: "city",
11723
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11724
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11725
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11726
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11727
- ] })
11728
- }
11729
- )
11730
- ] }),
11731
- /* @__PURE__ */ jsxRuntime.jsx(
11732
- Form$2.Field,
11733
- {
11734
- control: form.control,
11735
- name: "province",
11736
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11737
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11738
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11739
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11740
- ] })
11741
- }
11742
- ),
11743
- /* @__PURE__ */ jsxRuntime.jsx(
11744
- Form$2.Field,
11745
- {
11746
- control: form.control,
11747
- name: "phone",
11748
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11749
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11750
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11751
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11752
- ] })
11753
- }
11754
- )
11755
- ] }) }),
11756
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11757
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11758
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11759
- ] }) })
11760
- ]
11761
- }
11762
- ) });
11763
- };
11764
- const schema$1 = addressSchema;
11765
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11766
- const Shipping = () => {
11767
- var _a;
11768
- const { id } = reactRouterDom.useParams();
11769
- const { order, isPending, isError, error } = useOrder(id, {
11770
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11771
- });
11772
- const {
11773
- order: preview,
11774
- isPending: isPreviewPending,
11775
- isError: isPreviewError,
11776
- error: previewError
11777
- } = useOrderPreview(id);
11778
- useInitiateOrderEdit({ preview });
11779
- const { onCancel } = useCancelOrderEdit({ preview });
11780
- if (isError) {
11781
- throw error;
11782
- }
11783
- if (isPreviewError) {
11784
- throw previewError;
11785
- }
11786
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11787
- const isReady = preview && !isPreviewPending && order && !isPending;
11788
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11789
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11790
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11791
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11792
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11793
- ] }) }) }),
11794
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11795
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11796
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11797
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11798
- ] }) });
11799
- };
11800
- const ShippingForm = ({ preview, order }) => {
11801
- var _a;
11802
- const { setIsOpen } = useStackedModal();
11803
- const [isSubmitting, setIsSubmitting] = React.useState(false);
11804
- const [data, setData] = React.useState(null);
11805
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11806
- const { shipping_options } = useShippingOptions(
11807
- {
11808
- id: appliedShippingOptionIds,
11809
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11810
- },
11811
- {
11812
- enabled: appliedShippingOptionIds.length > 0
11813
- }
11814
- );
11815
- const uniqueShippingProfiles = React.useMemo(() => {
11816
- const profiles = /* @__PURE__ */ new Map();
11817
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11818
- profiles.set(profile.id, profile);
11819
- });
11820
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11821
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11822
- });
11823
- return Array.from(profiles.values());
11824
- }, [order.items, shipping_options]);
11825
- const { handleSuccess } = useRouteModal();
11826
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11827
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11828
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11829
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11830
- const onSubmit = async () => {
11831
- setIsSubmitting(true);
11832
- let requestSucceeded = false;
11833
- await requestOrderEdit(void 0, {
11834
- onError: (e) => {
11835
- ui.toast.error(`Failed to request order edit: ${e.message}`);
11836
- },
11837
- onSuccess: () => {
11838
- requestSucceeded = true;
11839
- }
11840
- });
11841
- if (!requestSucceeded) {
11842
- setIsSubmitting(false);
11843
- return;
11844
- }
11845
- await confirmOrderEdit(void 0, {
11846
- onError: (e) => {
11847
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
11848
- },
11849
- onSuccess: () => {
11850
- handleSuccess();
11851
- },
11852
- onSettled: () => {
11853
- setIsSubmitting(false);
11854
- }
11855
- });
11856
- };
11857
- const onKeydown = React.useCallback(
11858
- (e) => {
11859
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11860
- if (data || isSubmitting) {
11861
- return;
11862
- }
11863
- onSubmit();
11864
- }
11865
- },
11866
- [data, isSubmitting, onSubmit]
11867
- );
11868
- React.useEffect(() => {
11869
- document.addEventListener("keydown", onKeydown);
11870
- return () => {
11871
- document.removeEventListener("keydown", onKeydown);
11872
- };
11873
- }, [onKeydown]);
11874
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11875
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
11876
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11877
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11878
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11879
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
11880
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11881
- ] }),
11882
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
11883
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11884
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11885
- /* @__PURE__ */ jsxRuntime.jsx(
11886
- ui.Text,
11887
- {
11888
- size: "xsmall",
11889
- weight: "plus",
11890
- className: "text-ui-fg-muted",
11891
- children: "Shipping profile"
11892
- }
11893
- ),
11894
- /* @__PURE__ */ jsxRuntime.jsx(
11895
- ui.Text,
11896
- {
11897
- size: "xsmall",
11898
- weight: "plus",
11899
- className: "text-ui-fg-muted",
11900
- children: "Action"
11901
- }
11902
- )
11903
- ] }),
11904
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11905
- var _a2, _b, _c, _d, _e, _f, _g;
11906
- const items = getItemsWithShippingProfile(
11907
- profile.id,
11908
- order.items
11909
- );
11910
- const hasItems = items.length > 0;
11911
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11912
- (option) => option.shipping_profile_id === profile.id
11913
- );
11914
- const shippingMethod = preview.shipping_methods.find(
11915
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11916
- );
11917
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11918
- (action) => action.action === "SHIPPING_ADD"
11919
- );
11920
- return /* @__PURE__ */ jsxRuntime.jsxs(
11921
- radixUi.Accordion.Item,
11922
- {
11923
- value: profile.id,
11924
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11925
- children: [
11926
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11927
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11928
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
11929
- ui.IconButton,
11930
- {
11931
- size: "2xsmall",
11932
- variant: "transparent",
11933
- className: "group/trigger",
11934
- disabled: !hasItems,
11935
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
10613
+ size: "2xsmall",
10614
+ variant: "transparent",
10615
+ className: "group/trigger",
10616
+ disabled: !hasItems,
10617
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11936
10618
  }
11937
10619
  ) }),
11938
10620
  !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
@@ -12069,7 +10751,7 @@ const ShippingForm = ({ preview, order }) => {
12069
10751
  ]
12070
10752
  }
12071
10753
  ) : /* @__PURE__ */ jsxRuntime.jsx(
12072
- StackedModalTrigger,
10754
+ StackedModalTrigger$1,
12073
10755
  {
12074
10756
  shippingProfileId: profile.id,
12075
10757
  shippingOption,
@@ -12180,7 +10862,7 @@ const ShippingForm = ({ preview, order }) => {
12180
10862
  ] }) })
12181
10863
  ] });
12182
10864
  };
12183
- const StackedModalTrigger = ({
10865
+ const StackedModalTrigger$1 = ({
12184
10866
  shippingProfileId,
12185
10867
  shippingOption,
12186
10868
  shippingMethod,
@@ -12494,81 +11176,284 @@ const ShippingOptionField = ({
12494
11176
  )) {
12495
11177
  return void 0;
12496
11178
  }
12497
- return {
12498
- label: option.name,
12499
- value: option.id
12500
- };
12501
- }).filter(Boolean);
12502
- },
12503
- enabled: !!locationId && !!shippingProfileId,
12504
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
11179
+ return {
11180
+ label: option.name,
11181
+ value: option.id
11182
+ };
11183
+ }).filter(Boolean);
11184
+ },
11185
+ enabled: !!locationId && !!shippingProfileId,
11186
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
11187
+ });
11188
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
11189
+ return /* @__PURE__ */ jsxRuntime.jsx(
11190
+ Form$2.Field,
11191
+ {
11192
+ control,
11193
+ name: "shipping_option_id",
11194
+ render: ({ field }) => {
11195
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11196
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11197
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
11198
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
11199
+ ] }),
11200
+ /* @__PURE__ */ jsxRuntime.jsx(
11201
+ ConditionalTooltip,
11202
+ {
11203
+ content: tooltipContent,
11204
+ showTooltip: !locationId || !shippingProfileId,
11205
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11206
+ Combobox,
11207
+ {
11208
+ options: shippingOptions.options,
11209
+ fetchNextPage: shippingOptions.fetchNextPage,
11210
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
11211
+ searchValue: shippingOptions.searchValue,
11212
+ onSearchValueChange: shippingOptions.onSearchValueChange,
11213
+ placeholder: "Select shipping option",
11214
+ ...field,
11215
+ disabled: !locationId || !shippingProfileId
11216
+ }
11217
+ ) }) })
11218
+ }
11219
+ )
11220
+ ] }) });
11221
+ }
11222
+ }
11223
+ );
11224
+ };
11225
+ const CustomAmountField = ({
11226
+ control,
11227
+ currencyCode
11228
+ }) => {
11229
+ return /* @__PURE__ */ jsxRuntime.jsx(
11230
+ Form$2.Field,
11231
+ {
11232
+ control,
11233
+ name: "custom_amount",
11234
+ render: ({ field: { onChange, ...field } }) => {
11235
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11236
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
11237
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
11238
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
11239
+ ] }),
11240
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11241
+ ui.CurrencyInput,
11242
+ {
11243
+ ...field,
11244
+ onValueChange: (value) => onChange(value),
11245
+ symbol: getNativeSymbol(currencyCode),
11246
+ code: currencyCode
11247
+ }
11248
+ ) })
11249
+ ] });
11250
+ }
11251
+ }
11252
+ );
11253
+ };
11254
+ const ShippingAddress = () => {
11255
+ const { id } = reactRouterDom.useParams();
11256
+ const { order, isPending, isError, error } = useOrder(id, {
11257
+ fields: "+shipping_address"
11258
+ });
11259
+ if (isError) {
11260
+ throw error;
11261
+ }
11262
+ const isReady = !isPending && !!order;
11263
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
11264
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
11265
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
11266
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11267
+ ] }),
11268
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
11269
+ ] });
11270
+ };
11271
+ const ShippingAddressForm = ({ order }) => {
11272
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11273
+ const form = reactHookForm.useForm({
11274
+ defaultValues: {
11275
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11276
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11277
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11278
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11279
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11280
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11281
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11282
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11283
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11284
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11285
+ },
11286
+ resolver: zod.zodResolver(schema$2)
11287
+ });
11288
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11289
+ const { handleSuccess } = useRouteModal();
11290
+ const onSubmit = form.handleSubmit(async (data) => {
11291
+ await mutateAsync(
11292
+ {
11293
+ shipping_address: {
11294
+ first_name: data.first_name,
11295
+ last_name: data.last_name,
11296
+ company: data.company,
11297
+ address_1: data.address_1,
11298
+ address_2: data.address_2,
11299
+ city: data.city,
11300
+ province: data.province,
11301
+ country_code: data.country_code,
11302
+ postal_code: data.postal_code,
11303
+ phone: data.phone
11304
+ }
11305
+ },
11306
+ {
11307
+ onSuccess: () => {
11308
+ handleSuccess();
11309
+ },
11310
+ onError: (error) => {
11311
+ ui.toast.error(error.message);
11312
+ }
11313
+ }
11314
+ );
12505
11315
  });
12506
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12507
- return /* @__PURE__ */ jsxRuntime.jsx(
12508
- Form$2.Field,
11316
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
11317
+ KeyboundForm,
12509
11318
  {
12510
- control,
12511
- name: "shipping_option_id",
12512
- render: ({ field }) => {
12513
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12514
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12515
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
12516
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
11319
+ className: "flex flex-1 flex-col overflow-hidden",
11320
+ onSubmit,
11321
+ children: [
11322
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
11323
+ /* @__PURE__ */ jsxRuntime.jsx(
11324
+ Form$2.Field,
11325
+ {
11326
+ control: form.control,
11327
+ name: "country_code",
11328
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11329
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
11330
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
11331
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11332
+ ] })
11333
+ }
11334
+ ),
11335
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11336
+ /* @__PURE__ */ jsxRuntime.jsx(
11337
+ Form$2.Field,
11338
+ {
11339
+ control: form.control,
11340
+ name: "first_name",
11341
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11342
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
11343
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11344
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11345
+ ] })
11346
+ }
11347
+ ),
11348
+ /* @__PURE__ */ jsxRuntime.jsx(
11349
+ Form$2.Field,
11350
+ {
11351
+ control: form.control,
11352
+ name: "last_name",
11353
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11354
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
11355
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11356
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11357
+ ] })
11358
+ }
11359
+ )
12517
11360
  ] }),
12518
11361
  /* @__PURE__ */ jsxRuntime.jsx(
12519
- ConditionalTooltip,
11362
+ Form$2.Field,
12520
11363
  {
12521
- content: tooltipContent,
12522
- showTooltip: !locationId || !shippingProfileId,
12523
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12524
- Combobox,
12525
- {
12526
- options: shippingOptions.options,
12527
- fetchNextPage: shippingOptions.fetchNextPage,
12528
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12529
- searchValue: shippingOptions.searchValue,
12530
- onSearchValueChange: shippingOptions.onSearchValueChange,
12531
- placeholder: "Select shipping option",
12532
- ...field,
12533
- disabled: !locationId || !shippingProfileId
12534
- }
12535
- ) }) })
11364
+ control: form.control,
11365
+ name: "company",
11366
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11367
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
11368
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11369
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11370
+ ] })
12536
11371
  }
12537
- )
12538
- ] }) });
12539
- }
12540
- }
12541
- );
12542
- };
12543
- const CustomAmountField = ({
12544
- control,
12545
- currencyCode
12546
- }) => {
12547
- return /* @__PURE__ */ jsxRuntime.jsx(
12548
- Form$2.Field,
12549
- {
12550
- control,
12551
- name: "custom_amount",
12552
- render: ({ field: { onChange, ...field } }) => {
12553
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12554
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12555
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12556
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
11372
+ ),
11373
+ /* @__PURE__ */ jsxRuntime.jsx(
11374
+ Form$2.Field,
11375
+ {
11376
+ control: form.control,
11377
+ name: "address_1",
11378
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11379
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
11380
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11381
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11382
+ ] })
11383
+ }
11384
+ ),
11385
+ /* @__PURE__ */ jsxRuntime.jsx(
11386
+ Form$2.Field,
11387
+ {
11388
+ control: form.control,
11389
+ name: "address_2",
11390
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11391
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11392
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11393
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11394
+ ] })
11395
+ }
11396
+ ),
11397
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11398
+ /* @__PURE__ */ jsxRuntime.jsx(
11399
+ Form$2.Field,
11400
+ {
11401
+ control: form.control,
11402
+ name: "postal_code",
11403
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11404
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
11405
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11406
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11407
+ ] })
11408
+ }
11409
+ ),
11410
+ /* @__PURE__ */ jsxRuntime.jsx(
11411
+ Form$2.Field,
11412
+ {
11413
+ control: form.control,
11414
+ name: "city",
11415
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11416
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
11417
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11418
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11419
+ ] })
11420
+ }
11421
+ )
12557
11422
  ] }),
12558
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12559
- ui.CurrencyInput,
11423
+ /* @__PURE__ */ jsxRuntime.jsx(
11424
+ Form$2.Field,
12560
11425
  {
12561
- ...field,
12562
- onValueChange: (value) => onChange(value),
12563
- symbol: getNativeSymbol(currencyCode),
12564
- code: currencyCode
11426
+ control: form.control,
11427
+ name: "province",
11428
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11429
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11430
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11431
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11432
+ ] })
12565
11433
  }
12566
- ) })
12567
- ] });
12568
- }
11434
+ ),
11435
+ /* @__PURE__ */ jsxRuntime.jsx(
11436
+ Form$2.Field,
11437
+ {
11438
+ control: form.control,
11439
+ name: "phone",
11440
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11441
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
11442
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
11443
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11444
+ ] })
11445
+ }
11446
+ )
11447
+ ] }) }),
11448
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
11449
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11450
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11451
+ ] }) })
11452
+ ]
12569
11453
  }
12570
- );
11454
+ ) });
12571
11455
  };
11456
+ const schema$2 = addressSchema;
12572
11457
  const TransferOwnership = () => {
12573
11458
  const { id } = reactRouterDom.useParams();
12574
11459
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12592,7 +11477,7 @@ const TransferOwnershipForm = ({ order }) => {
12592
11477
  defaultValues: {
12593
11478
  customer_id: order.customer_id || ""
12594
11479
  },
12595
- resolver: zod.zodResolver(schema)
11480
+ resolver: zod.zodResolver(schema$1)
12596
11481
  });
12597
11482
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12598
11483
  const { handleSuccess } = useRouteModal();
@@ -12914,137 +11799,1252 @@ const Illustration = () => {
12914
11799
  transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
12915
11800
  fill: "#A1A1AA"
12916
11801
  }
12917
- ),
12918
- /* @__PURE__ */ jsxRuntime.jsx(
11802
+ ),
11803
+ /* @__PURE__ */ jsxRuntime.jsx(
11804
+ "path",
11805
+ {
11806
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
11807
+ fill: "#52525B"
11808
+ }
11809
+ ),
11810
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
11811
+ "path",
11812
+ {
11813
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
11814
+ stroke: "#A1A1AA",
11815
+ strokeWidth: "1.5",
11816
+ strokeLinecap: "round",
11817
+ strokeLinejoin: "round"
11818
+ }
11819
+ ) }),
11820
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
11821
+ "path",
11822
+ {
11823
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
11824
+ stroke: "#A1A1AA",
11825
+ strokeWidth: "1.5",
11826
+ strokeLinecap: "round",
11827
+ strokeLinejoin: "round"
11828
+ }
11829
+ ) }),
11830
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
11831
+ "path",
11832
+ {
11833
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
11834
+ stroke: "#A1A1AA",
11835
+ strokeWidth: "1.5",
11836
+ strokeLinecap: "round",
11837
+ strokeLinejoin: "round"
11838
+ }
11839
+ ) }),
11840
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
11841
+ "path",
11842
+ {
11843
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
11844
+ stroke: "#A1A1AA",
11845
+ strokeWidth: "1.5",
11846
+ strokeLinecap: "round",
11847
+ strokeLinejoin: "round"
11848
+ }
11849
+ ) }),
11850
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
11851
+ "path",
11852
+ {
11853
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
11854
+ stroke: "#A1A1AA",
11855
+ strokeWidth: "1.5",
11856
+ strokeLinecap: "round",
11857
+ strokeLinejoin: "round"
11858
+ }
11859
+ ) }),
11860
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12919
11861
  "path",
12920
11862
  {
12921
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
12922
- fill: "#52525B"
11863
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
11864
+ stroke: "#A1A1AA",
11865
+ strokeWidth: "1.5",
11866
+ strokeLinecap: "round",
11867
+ strokeLinejoin: "round"
11868
+ }
11869
+ ) }),
11870
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
11871
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
11872
+ "rect",
11873
+ {
11874
+ width: "12",
11875
+ height: "12",
11876
+ fill: "white",
11877
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
11878
+ }
11879
+ ) }),
11880
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
11881
+ "rect",
11882
+ {
11883
+ width: "12",
11884
+ height: "12",
11885
+ fill: "white",
11886
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
11887
+ }
11888
+ ) }),
11889
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
11890
+ "rect",
11891
+ {
11892
+ width: "12",
11893
+ height: "12",
11894
+ fill: "white",
11895
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
11896
+ }
11897
+ ) }),
11898
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
11899
+ "rect",
11900
+ {
11901
+ width: "12",
11902
+ height: "12",
11903
+ fill: "white",
11904
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
11905
+ }
11906
+ ) }),
11907
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
11908
+ "rect",
11909
+ {
11910
+ width: "12",
11911
+ height: "12",
11912
+ fill: "white",
11913
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
11914
+ }
11915
+ ) }),
11916
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
11917
+ "rect",
11918
+ {
11919
+ width: "12",
11920
+ height: "12",
11921
+ fill: "white",
11922
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
11923
+ }
11924
+ ) })
11925
+ ] })
11926
+ ]
11927
+ }
11928
+ );
11929
+ };
11930
+ const schema$1 = objectType({
11931
+ customer_id: stringType().min(1)
11932
+ });
11933
+ const NumberInput = React.forwardRef(
11934
+ ({
11935
+ value,
11936
+ onChange,
11937
+ size = "base",
11938
+ min = 0,
11939
+ max = 100,
11940
+ step = 1,
11941
+ className,
11942
+ disabled,
11943
+ ...props
11944
+ }, ref) => {
11945
+ const handleChange = (event) => {
11946
+ const newValue = event.target.value === "" ? min : Number(event.target.value);
11947
+ if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
11948
+ onChange(newValue);
11949
+ }
11950
+ };
11951
+ const handleIncrement = () => {
11952
+ const newValue = value + step;
11953
+ if (max === void 0 || newValue <= max) {
11954
+ onChange(newValue);
11955
+ }
11956
+ };
11957
+ const handleDecrement = () => {
11958
+ const newValue = value - step;
11959
+ if (min === void 0 || newValue >= min) {
11960
+ onChange(newValue);
11961
+ }
11962
+ };
11963
+ return /* @__PURE__ */ jsxRuntime.jsxs(
11964
+ "div",
11965
+ {
11966
+ className: ui.clx(
11967
+ "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
11968
+ "[&:has(input:focus)]:shadow-borders-interactive-with-active",
11969
+ {
11970
+ "h-7": size === "small",
11971
+ "h-8": size === "base"
11972
+ },
11973
+ className
11974
+ ),
11975
+ children: [
11976
+ /* @__PURE__ */ jsxRuntime.jsx(
11977
+ "input",
11978
+ {
11979
+ ref,
11980
+ type: "number",
11981
+ value,
11982
+ onChange: handleChange,
11983
+ min,
11984
+ max,
11985
+ step,
11986
+ className: ui.clx(
11987
+ "flex-1 px-2 py-1 bg-transparent txt-compact-small text-ui-fg-base outline-none [appearance:textfield]",
11988
+ "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
11989
+ "placeholder:text-ui-fg-muted"
11990
+ ),
11991
+ ...props
11992
+ }
11993
+ ),
11994
+ /* @__PURE__ */ jsxRuntime.jsxs(
11995
+ "button",
11996
+ {
11997
+ className: ui.clx(
11998
+ "flex items-center justify-center outline-none transition-fg",
11999
+ "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
12000
+ "focus:bg-ui-bg-field-component-hover",
12001
+ "hover:bg-ui-bg-field-component-hover",
12002
+ {
12003
+ "size-7": size === "small",
12004
+ "size-8": size === "base"
12005
+ }
12006
+ ),
12007
+ type: "button",
12008
+ onClick: handleDecrement,
12009
+ disabled: min !== void 0 && value <= min || disabled,
12010
+ children: [
12011
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, {}),
12012
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Decrease by ${step}` })
12013
+ ]
12014
+ }
12015
+ ),
12016
+ /* @__PURE__ */ jsxRuntime.jsxs(
12017
+ "button",
12018
+ {
12019
+ className: ui.clx(
12020
+ "flex items-center justify-center outline-none transition-fg",
12021
+ "disabled:cursor-not-allowed disabled:text-ui-fg-muted",
12022
+ "focus:bg-ui-bg-field-hover",
12023
+ "hover:bg-ui-bg-field-hover",
12024
+ {
12025
+ "size-7": size === "small",
12026
+ "size-8": size === "base"
12027
+ }
12028
+ ),
12029
+ type: "button",
12030
+ onClick: handleIncrement,
12031
+ disabled: max !== void 0 && value >= max || disabled,
12032
+ children: [
12033
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
12034
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: `Increase by ${step}` })
12035
+ ]
12036
+ }
12037
+ )
12038
+ ]
12039
+ }
12040
+ );
12041
+ }
12042
+ );
12043
+ const PRODUCT_VARIANTS_QUERY_KEY = "product-variants";
12044
+ const productVariantsQueryKeys = {
12045
+ list: (query2) => [
12046
+ PRODUCT_VARIANTS_QUERY_KEY,
12047
+ query2 ? query2 : void 0
12048
+ ]
12049
+ };
12050
+ const useProductVariants = (query2, options) => {
12051
+ const { data, ...rest } = reactQuery.useQuery({
12052
+ queryKey: productVariantsQueryKeys.list(query2),
12053
+ queryFn: async () => await sdk.admin.productVariant.list(query2),
12054
+ ...options
12055
+ });
12056
+ return { ...data, ...rest };
12057
+ };
12058
+ const STACKED_MODAL_ID = "items_stacked_modal";
12059
+ const Items = () => {
12060
+ const { id } = reactRouterDom.useParams();
12061
+ const {
12062
+ order: preview,
12063
+ isPending: isPreviewPending,
12064
+ isError: isPreviewError,
12065
+ error: previewError
12066
+ } = useOrderPreview(id, void 0, {
12067
+ placeholderData: reactQuery.keepPreviousData
12068
+ });
12069
+ useInitiateOrderEdit({ preview });
12070
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12071
+ id,
12072
+ {
12073
+ fields: "currency_code"
12074
+ },
12075
+ {
12076
+ enabled: !!id
12077
+ }
12078
+ );
12079
+ const { onCancel } = useCancelOrderEdit({ preview });
12080
+ if (isError) {
12081
+ throw error;
12082
+ }
12083
+ if (isPreviewError) {
12084
+ throw previewError;
12085
+ }
12086
+ const ready = !!preview && !isPreviewPending && !!draft_order && !isPending;
12087
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: ready ? /* @__PURE__ */ jsxRuntime.jsx(ItemsForm, { preview, currencyCode: draft_order.currency_code }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12088
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Items" }) }),
12089
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12090
+ ] }) });
12091
+ };
12092
+ const ItemsForm = ({ preview, currencyCode }) => {
12093
+ var _a;
12094
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
12095
+ const [modalContent, setModalContent] = React.useState(
12096
+ null
12097
+ );
12098
+ const { handleSuccess } = useRouteModal();
12099
+ const { searchValue, onSearchValueChange, query: query2 } = useDebouncedSearch();
12100
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12101
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12102
+ const itemCount = ((_a = preview.items) == null ? void 0 : _a.reduce((acc, item) => acc + item.quantity, 0)) || 0;
12103
+ const matches = React.useMemo(() => {
12104
+ return matchSorter.matchSorter(preview.items, query2, {
12105
+ keys: ["product_title", "variant_title", "variant_sku", "title"]
12106
+ });
12107
+ }, [preview.items, query2]);
12108
+ const onSubmit = async () => {
12109
+ setIsSubmitting(true);
12110
+ let requestSucceeded = false;
12111
+ await requestOrderEdit(void 0, {
12112
+ onError: (e) => {
12113
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
12114
+ },
12115
+ onSuccess: () => {
12116
+ requestSucceeded = true;
12117
+ }
12118
+ });
12119
+ if (!requestSucceeded) {
12120
+ setIsSubmitting(false);
12121
+ return;
12122
+ }
12123
+ await confirmOrderEdit(void 0, {
12124
+ onError: (e) => {
12125
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
12126
+ },
12127
+ onSuccess: () => {
12128
+ handleSuccess();
12129
+ },
12130
+ onSettled: () => {
12131
+ setIsSubmitting(false);
12132
+ }
12133
+ });
12134
+ };
12135
+ const onKeyDown = React.useCallback(
12136
+ (e) => {
12137
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12138
+ if (modalContent || isSubmitting) {
12139
+ return;
12140
+ }
12141
+ onSubmit();
12142
+ }
12143
+ },
12144
+ [modalContent, isSubmitting, onSubmit]
12145
+ );
12146
+ React.useEffect(() => {
12147
+ document.addEventListener("keydown", onKeyDown);
12148
+ return () => {
12149
+ document.removeEventListener("keydown", onKeyDown);
12150
+ };
12151
+ }, [onKeyDown]);
12152
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12153
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
12154
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
12155
+ StackedFocusModal,
12156
+ {
12157
+ id: STACKED_MODAL_ID,
12158
+ onOpenChangeCallback: (open) => {
12159
+ if (!open) {
12160
+ setModalContent(null);
12923
12161
  }
12924
- ),
12925
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12926
- "path",
12927
- {
12928
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
12929
- stroke: "#A1A1AA",
12930
- strokeWidth: "1.5",
12931
- strokeLinecap: "round",
12932
- strokeLinejoin: "round"
12162
+ },
12163
+ children: [
12164
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
12165
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12166
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Items" }) }),
12167
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Edit the items in the draft order" }) })
12168
+ ] }),
12169
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12170
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
12171
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3", children: [
12172
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12173
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items" }),
12174
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose items from the product catalog." })
12175
+ ] }),
12176
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
12177
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
12178
+ ui.Input,
12179
+ {
12180
+ type: "search",
12181
+ placeholder: "Search items",
12182
+ value: searchValue,
12183
+ onChange: (e) => onSearchValueChange(e.target.value)
12184
+ }
12185
+ ) }),
12186
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
12187
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}) }) }),
12188
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
12189
+ /* @__PURE__ */ jsxRuntime.jsx(
12190
+ StackedModalTrigger,
12191
+ {
12192
+ type: "add-items",
12193
+ setModalContent
12194
+ }
12195
+ ),
12196
+ /* @__PURE__ */ jsxRuntime.jsx(
12197
+ StackedModalTrigger,
12198
+ {
12199
+ type: "add-custom-item",
12200
+ setModalContent
12201
+ }
12202
+ )
12203
+ ] })
12204
+ ] })
12205
+ ] })
12206
+ ] }),
12207
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12208
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-[2fr_1fr_2fr_28px] gap-3 px-4 py-2", children: [
12209
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
12210
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) }),
12211
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Price" }) }),
12212
+ /* @__PURE__ */ jsxRuntime.jsx("div", {})
12213
+ ] }) }),
12214
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: itemCount <= 0 ? /* @__PURE__ */ jsxRuntime.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: [
12215
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "There are no items in this order" }),
12216
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add items to the order to get started." })
12217
+ ] }) : matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
12218
+ Item,
12219
+ {
12220
+ item,
12221
+ preview,
12222
+ currencyCode
12223
+ },
12224
+ item.id
12225
+ )) : /* @__PURE__ */ jsxRuntime.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: [
12226
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12227
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
12228
+ 'No items found for "',
12229
+ query2,
12230
+ '".'
12231
+ ] })
12232
+ ] }) })
12233
+ ] })
12234
+ ] }),
12235
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12236
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_0.5fr_0.5fr] gap-3", children: [
12237
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Subtotal" }) }),
12238
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
12239
+ ui.Text,
12240
+ {
12241
+ size: "small",
12242
+ leading: "compact",
12243
+ className: "text-ui-fg-subtle",
12244
+ children: [
12245
+ itemCount,
12246
+ " ",
12247
+ itemCount === 1 ? "item" : "items"
12248
+ ]
12249
+ }
12250
+ ) }),
12251
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: getStylizedAmount(preview.item_subtotal, currencyCode) }) })
12252
+ ] })
12253
+ ] }) }),
12254
+ modalContent && (modalContent === "add-items" ? /* @__PURE__ */ jsxRuntime.jsx(ExistingItemsForm, { orderId: preview.id, items: preview.items }) : modalContent === "add-custom-item" ? /* @__PURE__ */ jsxRuntime.jsx(
12255
+ CustomItemForm,
12256
+ {
12257
+ orderId: preview.id,
12258
+ currencyCode
12259
+ }
12260
+ ) : null)
12261
+ ]
12262
+ }
12263
+ ) }),
12264
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12265
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12266
+ /* @__PURE__ */ jsxRuntime.jsx(
12267
+ ui.Button,
12268
+ {
12269
+ size: "small",
12270
+ type: "button",
12271
+ onClick: onSubmit,
12272
+ isLoading: isSubmitting,
12273
+ children: "Save"
12274
+ }
12275
+ )
12276
+ ] }) })
12277
+ ] });
12278
+ };
12279
+ const Item = ({ item, preview, currencyCode }) => {
12280
+ if (item.variant_id) {
12281
+ return /* @__PURE__ */ jsxRuntime.jsx(VariantItem, { item, preview, currencyCode });
12282
+ }
12283
+ return /* @__PURE__ */ jsxRuntime.jsx(CustomItem, { item, preview, currencyCode });
12284
+ };
12285
+ const VariantItem = ({ item, preview, currencyCode }) => {
12286
+ const [editing, setEditing] = React.useState(false);
12287
+ const form = reactHookForm.useForm({
12288
+ defaultValues: {
12289
+ quantity: item.quantity,
12290
+ unit_price: item.unit_price
12291
+ },
12292
+ resolver: zod.zodResolver(variantItemSchema)
12293
+ });
12294
+ const actionId = React.useMemo(() => {
12295
+ var _a, _b;
12296
+ return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
12297
+ }, [item]);
12298
+ const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
12299
+ const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
12300
+ const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
12301
+ const onSubmit = form.handleSubmit(async (data) => {
12302
+ if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity) {
12303
+ setEditing(false);
12304
+ return;
12305
+ }
12306
+ if (!actionId) {
12307
+ await updateOriginalItem(
12308
+ {
12309
+ item_id: item.id,
12310
+ quantity: data.quantity,
12311
+ unit_price: convertNumber(data.unit_price)
12312
+ },
12313
+ {
12314
+ onSuccess: () => {
12315
+ setEditing(false);
12316
+ },
12317
+ onError: (e) => {
12318
+ ui.toast.error(e.message);
12933
12319
  }
12934
- ) }),
12935
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12936
- "path",
12320
+ }
12321
+ );
12322
+ return;
12323
+ }
12324
+ await updateActionItem(
12325
+ {
12326
+ action_id: actionId,
12327
+ quantity: data.quantity,
12328
+ unit_price: convertNumber(data.unit_price)
12329
+ },
12330
+ {
12331
+ onSuccess: () => {
12332
+ setEditing(false);
12333
+ },
12334
+ onError: (e) => {
12335
+ ui.toast.error(e.message);
12336
+ }
12337
+ }
12338
+ );
12339
+ });
12340
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.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: [
12341
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3", children: [
12342
+ /* @__PURE__ */ jsxRuntime.jsx(
12343
+ Thumbnail,
12344
+ {
12345
+ thumbnail: item.thumbnail,
12346
+ alt: item.product_title ?? void 0
12347
+ }
12348
+ ),
12349
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
12350
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
12351
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12352
+ /* @__PURE__ */ jsxRuntime.jsxs(
12353
+ ui.Text,
12354
+ {
12355
+ size: "small",
12356
+ leading: "compact",
12357
+ className: "text-ui-fg-subtle",
12358
+ children: [
12359
+ "(",
12360
+ item.variant_title,
12361
+ ")"
12362
+ ]
12363
+ }
12364
+ )
12365
+ ] }),
12366
+ /* @__PURE__ */ jsxRuntime.jsx(
12367
+ ui.Text,
12937
12368
  {
12938
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
12939
- stroke: "#A1A1AA",
12940
- strokeWidth: "1.5",
12941
- strokeLinecap: "round",
12942
- strokeLinejoin: "round"
12369
+ size: "small",
12370
+ leading: "compact",
12371
+ className: "text-ui-fg-subtle",
12372
+ children: item.variant_sku
12943
12373
  }
12944
- ) }),
12945
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12946
- "path",
12947
- {
12948
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
12949
- stroke: "#A1A1AA",
12950
- strokeWidth: "1.5",
12951
- strokeLinecap: "round",
12952
- strokeLinejoin: "round"
12374
+ )
12375
+ ] })
12376
+ ] }),
12377
+ editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
12378
+ Form$2.Field,
12379
+ {
12380
+ control: form.control,
12381
+ name: "quantity",
12382
+ render: ({ field }) => {
12383
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
12384
+ }
12385
+ }
12386
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }) }),
12387
+ editing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
12388
+ Form$2.Field,
12389
+ {
12390
+ control: form.control,
12391
+ name: "unit_price",
12392
+ render: ({ field: { onChange, ...field } }) => {
12393
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12394
+ ui.CurrencyInput,
12395
+ {
12396
+ ...field,
12397
+ symbol: getNativeSymbol(currencyCode),
12398
+ code: currencyCode,
12399
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
12400
+ }
12401
+ ) }) });
12402
+ }
12403
+ }
12404
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-1 items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
12405
+ /* @__PURE__ */ jsxRuntime.jsx(
12406
+ ui.IconButton,
12407
+ {
12408
+ type: "button",
12409
+ size: "small",
12410
+ onClick: editing ? onSubmit : () => {
12411
+ setEditing(true);
12412
+ },
12413
+ disabled: isPending,
12414
+ children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
12415
+ }
12416
+ )
12417
+ ] }) }) });
12418
+ };
12419
+ const variantItemSchema = objectType({
12420
+ quantity: numberType(),
12421
+ unit_price: unionType([numberType(), stringType()])
12422
+ });
12423
+ const CustomItem = ({ item, preview, currencyCode }) => {
12424
+ const [editing, setEditing] = React.useState(false);
12425
+ const { quantity, unit_price, title } = item;
12426
+ const form = reactHookForm.useForm({
12427
+ defaultValues: {
12428
+ title,
12429
+ quantity,
12430
+ unit_price
12431
+ },
12432
+ resolver: zod.zodResolver(customItemSchema)
12433
+ });
12434
+ React.useEffect(() => {
12435
+ form.reset({
12436
+ title,
12437
+ quantity,
12438
+ unit_price
12439
+ });
12440
+ }, [form, title, quantity, unit_price]);
12441
+ const actionId = React.useMemo(() => {
12442
+ var _a, _b;
12443
+ return (_b = (_a = item.actions) == null ? void 0 : _a.find((a) => a.action === "ITEM_ADD")) == null ? void 0 : _b.id;
12444
+ }, [item]);
12445
+ const { mutateAsync: updateActionItem, isPending: isUpdatingActionItem } = useDraftOrderUpdateActionItem(preview.id);
12446
+ const { mutateAsync: removeActionItem, isPending: isRemovingActionItem } = useDraftOrderRemoveActionItem(preview.id);
12447
+ const { mutateAsync: updateOriginalItem, isPending: isUpdatingOriginalItem } = useDraftOrderUpdateItem(preview.id);
12448
+ const isPending = isUpdatingActionItem || isUpdatingOriginalItem;
12449
+ const onSubmit = form.handleSubmit(async (data) => {
12450
+ if (convertNumber(data.unit_price) === item.unit_price && data.quantity === item.quantity && data.title === item.title) {
12451
+ setEditing(false);
12452
+ return;
12453
+ }
12454
+ if (!actionId) {
12455
+ await updateOriginalItem(
12456
+ {
12457
+ item_id: item.id,
12458
+ quantity: data.quantity,
12459
+ unit_price: convertNumber(data.unit_price)
12460
+ },
12461
+ {
12462
+ onSuccess: () => {
12463
+ setEditing(false);
12464
+ },
12465
+ onError: (e) => {
12466
+ ui.toast.error(e.message);
12953
12467
  }
12954
- ) }),
12955
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12956
- "path",
12957
- {
12958
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
12959
- stroke: "#A1A1AA",
12960
- strokeWidth: "1.5",
12961
- strokeLinecap: "round",
12962
- strokeLinejoin: "round"
12468
+ }
12469
+ );
12470
+ return;
12471
+ }
12472
+ if (data.quantity === 0) {
12473
+ await removeActionItem(actionId, {
12474
+ onSuccess: () => {
12475
+ setEditing(false);
12476
+ },
12477
+ onError: (e) => {
12478
+ ui.toast.error(e.message);
12479
+ }
12480
+ });
12481
+ return;
12482
+ }
12483
+ await updateActionItem(
12484
+ {
12485
+ action_id: actionId,
12486
+ quantity: data.quantity,
12487
+ unit_price: convertNumber(data.unit_price)
12488
+ },
12489
+ {
12490
+ onSuccess: () => {
12491
+ setEditing(false);
12492
+ },
12493
+ onError: (e) => {
12494
+ ui.toast.error(e.message);
12495
+ }
12496
+ }
12497
+ );
12498
+ });
12499
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit, children: /* @__PURE__ */ jsxRuntime.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: [
12500
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
12501
+ /* @__PURE__ */ jsxRuntime.jsx(
12502
+ Thumbnail,
12503
+ {
12504
+ thumbnail: item.thumbnail,
12505
+ alt: item.title ?? void 0
12506
+ }
12507
+ ),
12508
+ editing ? /* @__PURE__ */ jsxRuntime.jsx(
12509
+ Form$2.Field,
12510
+ {
12511
+ control: form.control,
12512
+ name: "title",
12513
+ render: ({ field }) => {
12514
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }) });
12963
12515
  }
12964
- ) }),
12965
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12966
- "path",
12516
+ }
12517
+ ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.title })
12518
+ ] }),
12519
+ editing ? /* @__PURE__ */ jsxRuntime.jsx(
12520
+ Form$2.Field,
12521
+ {
12522
+ control: form.control,
12523
+ name: "quantity",
12524
+ render: ({ field }) => {
12525
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field }) }) });
12526
+ }
12527
+ }
12528
+ ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: item.quantity }),
12529
+ editing ? /* @__PURE__ */ jsxRuntime.jsx(
12530
+ Form$2.Field,
12531
+ {
12532
+ control: form.control,
12533
+ name: "unit_price",
12534
+ render: ({ field: { onChange, ...field } }) => {
12535
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12536
+ ui.CurrencyInput,
12537
+ {
12538
+ ...field,
12539
+ symbol: getNativeSymbol(currencyCode),
12540
+ code: currencyCode,
12541
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value)
12542
+ }
12543
+ ) }) });
12544
+ }
12545
+ }
12546
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: getLocaleAmount(item.unit_price, currencyCode) }) }),
12547
+ /* @__PURE__ */ jsxRuntime.jsx(
12548
+ ui.IconButton,
12549
+ {
12550
+ type: "button",
12551
+ size: "small",
12552
+ onClick: editing ? onSubmit : () => {
12553
+ setEditing(true);
12554
+ },
12555
+ disabled: isPending,
12556
+ children: editing ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.PencilSquare, {})
12557
+ }
12558
+ )
12559
+ ] }) }) });
12560
+ };
12561
+ const StackedModalTrigger = ({
12562
+ type,
12563
+ setModalContent
12564
+ }) => {
12565
+ const { setIsOpen } = useStackedModal();
12566
+ const onClick = React.useCallback(() => {
12567
+ setModalContent(type);
12568
+ setIsOpen(STACKED_MODAL_ID, true);
12569
+ }, [setModalContent, setIsOpen, type]);
12570
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Item, { onClick, children: type === "add-items" ? "Add items" : "Add custom item" }) });
12571
+ };
12572
+ const VARIANT_PREFIX = "items";
12573
+ const LIMIT = 50;
12574
+ const ExistingItemsForm = ({ orderId, items }) => {
12575
+ const { setIsOpen } = useStackedModal();
12576
+ const [rowSelection, setRowSelection] = React.useState(
12577
+ items.reduce((acc, item) => {
12578
+ acc[item.variant_id] = true;
12579
+ return acc;
12580
+ }, {})
12581
+ );
12582
+ React.useEffect(() => {
12583
+ setRowSelection(
12584
+ items.reduce((acc, item) => {
12585
+ if (item.variant_id) {
12586
+ acc[item.variant_id] = true;
12587
+ }
12588
+ return acc;
12589
+ }, {})
12590
+ );
12591
+ }, [items]);
12592
+ const { q, order, offset } = useQueryParams(
12593
+ ["q", "order", "offset"],
12594
+ VARIANT_PREFIX
12595
+ );
12596
+ const { variants, count, isPending, isError, error } = useProductVariants(
12597
+ {
12598
+ q,
12599
+ order,
12600
+ offset: offset ? parseInt(offset) : void 0,
12601
+ limit: LIMIT
12602
+ },
12603
+ {
12604
+ placeholderData: reactQuery.keepPreviousData
12605
+ }
12606
+ );
12607
+ const columns = useColumns();
12608
+ const { mutateAsync } = useDraftOrderAddItems(orderId);
12609
+ const onSubmit = async () => {
12610
+ const ids = Object.keys(rowSelection).filter(
12611
+ (id) => !items.find((i) => i.variant_id === id)
12612
+ );
12613
+ await mutateAsync(
12614
+ {
12615
+ items: ids.map((id) => ({
12616
+ variant_id: id,
12617
+ quantity: 1
12618
+ }))
12619
+ },
12620
+ {
12621
+ onSuccess: () => {
12622
+ setRowSelection({});
12623
+ setIsOpen(STACKED_MODAL_ID, false);
12624
+ },
12625
+ onError: (e) => {
12626
+ ui.toast.error(e.message);
12627
+ }
12628
+ }
12629
+ );
12630
+ };
12631
+ if (isError) {
12632
+ throw error;
12633
+ }
12634
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12635
+ StackedFocusModal.Content,
12636
+ {
12637
+ onOpenAutoFocus: (e) => {
12638
+ e.preventDefault();
12639
+ const searchInput = document.querySelector(
12640
+ "[data-modal-id='modal-search-input']"
12641
+ );
12642
+ if (searchInput) {
12643
+ searchInput.focus();
12644
+ }
12645
+ },
12646
+ children: [
12647
+ /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Header, { children: [
12648
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Product Variants" }) }),
12649
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
12650
+ ] }),
12651
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
12652
+ DataTable,
12967
12653
  {
12968
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
12969
- stroke: "#A1A1AA",
12970
- strokeWidth: "1.5",
12971
- strokeLinecap: "round",
12972
- strokeLinejoin: "round"
12654
+ data: variants,
12655
+ columns,
12656
+ isLoading: isPending,
12657
+ getRowId: (row) => row.id,
12658
+ rowCount: count,
12659
+ prefix: VARIANT_PREFIX,
12660
+ layout: "fill",
12661
+ rowSelection: {
12662
+ state: rowSelection,
12663
+ onRowSelectionChange: setRowSelection,
12664
+ enableRowSelection: (row) => {
12665
+ return !items.find((i) => i.variant_id === row.original.id);
12666
+ }
12667
+ },
12668
+ autoFocusSearch: true
12973
12669
  }
12974
12670
  ) }),
12975
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
12976
- "path",
12671
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12672
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12673
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
12674
+ ] }) })
12675
+ ]
12676
+ }
12677
+ );
12678
+ };
12679
+ const columnHelper = ui.createDataTableColumnHelper();
12680
+ const useColumns = () => {
12681
+ return React.useMemo(() => {
12682
+ return [
12683
+ columnHelper.select(),
12684
+ columnHelper.accessor("product.title", {
12685
+ header: "Product",
12686
+ cell: ({ row }) => {
12687
+ var _a, _b, _c;
12688
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
12689
+ /* @__PURE__ */ jsxRuntime.jsx(
12690
+ Thumbnail,
12691
+ {
12692
+ thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
12693
+ alt: (_b = row.original.product) == null ? void 0 : _b.title
12694
+ }
12695
+ ),
12696
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
12697
+ ] });
12698
+ },
12699
+ enableSorting: true
12700
+ }),
12701
+ columnHelper.accessor("title", {
12702
+ header: "Variant",
12703
+ enableSorting: true
12704
+ }),
12705
+ columnHelper.accessor("sku", {
12706
+ header: "SKU",
12707
+ cell: ({ getValue }) => {
12708
+ return getValue() ?? "-";
12709
+ },
12710
+ enableSorting: true
12711
+ }),
12712
+ columnHelper.accessor("updated_at", {
12713
+ header: "Updated",
12714
+ cell: ({ getValue }) => {
12715
+ return /* @__PURE__ */ jsxRuntime.jsx(
12716
+ ui.Tooltip,
12717
+ {
12718
+ content: getFullDate({ date: getValue(), includeTime: true }),
12719
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
12720
+ }
12721
+ );
12722
+ },
12723
+ enableSorting: true,
12724
+ sortAscLabel: "Oldest first",
12725
+ sortDescLabel: "Newest first"
12726
+ }),
12727
+ columnHelper.accessor("created_at", {
12728
+ header: "Created",
12729
+ cell: ({ getValue }) => {
12730
+ return /* @__PURE__ */ jsxRuntime.jsx(
12731
+ ui.Tooltip,
12732
+ {
12733
+ content: getFullDate({ date: getValue(), includeTime: true }),
12734
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
12735
+ }
12736
+ );
12737
+ },
12738
+ enableSorting: true,
12739
+ sortAscLabel: "Oldest first",
12740
+ sortDescLabel: "Newest first"
12741
+ })
12742
+ ];
12743
+ }, []);
12744
+ };
12745
+ const CustomItemForm = ({ orderId, currencyCode }) => {
12746
+ const { setIsOpen } = useStackedModal();
12747
+ const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
12748
+ const form = reactHookForm.useForm({
12749
+ defaultValues: {
12750
+ title: "",
12751
+ quantity: 1,
12752
+ unit_price: ""
12753
+ },
12754
+ resolver: zod.zodResolver(customItemSchema)
12755
+ });
12756
+ const onSubmit = form.handleSubmit(async (data) => {
12757
+ await addItems(
12758
+ {
12759
+ items: [
12977
12760
  {
12978
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
12979
- stroke: "#A1A1AA",
12980
- strokeWidth: "1.5",
12981
- strokeLinecap: "round",
12982
- strokeLinejoin: "round"
12761
+ title: data.title,
12762
+ quantity: data.quantity,
12763
+ unit_price: convertNumber(data.unit_price)
12983
12764
  }
12984
- ) }),
12985
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
12986
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12987
- "rect",
12765
+ ]
12766
+ },
12767
+ {
12768
+ onSuccess: () => {
12769
+ setIsOpen(STACKED_MODAL_ID, false);
12770
+ },
12771
+ onError: (e) => {
12772
+ ui.toast.error(e.message);
12773
+ }
12774
+ }
12775
+ );
12776
+ });
12777
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
12778
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
12779
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
12780
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12781
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
12782
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
12783
+ ] }),
12784
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12785
+ /* @__PURE__ */ jsxRuntime.jsx(
12786
+ Form$2.Field,
12787
+ {
12788
+ control: form.control,
12789
+ name: "title",
12790
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12791
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12792
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
12793
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
12794
+ ] }),
12795
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12796
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12797
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12798
+ ] })
12799
+ ] }) })
12800
+ }
12801
+ ),
12802
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12803
+ /* @__PURE__ */ jsxRuntime.jsx(
12804
+ Form$2.Field,
12805
+ {
12806
+ control: form.control,
12807
+ name: "unit_price",
12808
+ render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12809
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12810
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
12811
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
12812
+ ] }),
12813
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12814
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
12815
+ ui.CurrencyInput,
12816
+ {
12817
+ symbol: getNativeSymbol(currencyCode),
12818
+ code: currencyCode,
12819
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
12820
+ ...field
12821
+ }
12822
+ ) }),
12823
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12824
+ ] })
12825
+ ] }) })
12826
+ }
12827
+ ),
12828
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
12829
+ /* @__PURE__ */ jsxRuntime.jsx(
12830
+ Form$2.Field,
12831
+ {
12832
+ control: form.control,
12833
+ name: "quantity",
12834
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12835
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
12836
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
12837
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
12838
+ ] }),
12839
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
12840
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field, className: "w-full" }) }) }),
12841
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12842
+ ] })
12843
+ ] }) })
12844
+ }
12845
+ )
12846
+ ] }) }) }),
12847
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12848
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12849
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
12850
+ ] }) })
12851
+ ] }) }) });
12852
+ };
12853
+ const customItemSchema = objectType({
12854
+ title: stringType().min(1),
12855
+ quantity: numberType(),
12856
+ unit_price: unionType([numberType(), stringType()])
12857
+ });
12858
+ const BillingAddress = () => {
12859
+ const { id } = reactRouterDom.useParams();
12860
+ const { order, isPending, isError, error } = useOrder(id, {
12861
+ fields: "+billing_address"
12862
+ });
12863
+ if (isError) {
12864
+ throw error;
12865
+ }
12866
+ const isReady = !isPending && !!order;
12867
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12868
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12869
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
12870
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12871
+ ] }),
12872
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
12873
+ ] });
12874
+ };
12875
+ const BillingAddressForm = ({ order }) => {
12876
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12877
+ const form = reactHookForm.useForm({
12878
+ defaultValues: {
12879
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12880
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12881
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12882
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12883
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12884
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12885
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12886
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12887
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12888
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12889
+ },
12890
+ resolver: zod.zodResolver(schema)
12891
+ });
12892
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12893
+ const { handleSuccess } = useRouteModal();
12894
+ const onSubmit = form.handleSubmit(async (data) => {
12895
+ await mutateAsync(
12896
+ { billing_address: data },
12897
+ {
12898
+ onSuccess: () => {
12899
+ handleSuccess();
12900
+ },
12901
+ onError: (error) => {
12902
+ ui.toast.error(error.message);
12903
+ }
12904
+ }
12905
+ );
12906
+ });
12907
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12908
+ KeyboundForm,
12909
+ {
12910
+ className: "flex flex-1 flex-col overflow-hidden",
12911
+ onSubmit,
12912
+ children: [
12913
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
12914
+ /* @__PURE__ */ jsxRuntime.jsx(
12915
+ Form$2.Field,
12988
12916
  {
12989
- width: "12",
12990
- height: "12",
12991
- fill: "white",
12992
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
12917
+ control: form.control,
12918
+ name: "country_code",
12919
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12920
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12921
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12922
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12923
+ ] })
12993
12924
  }
12994
- ) }),
12995
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
12996
- "rect",
12925
+ ),
12926
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12927
+ /* @__PURE__ */ jsxRuntime.jsx(
12928
+ Form$2.Field,
12929
+ {
12930
+ control: form.control,
12931
+ name: "first_name",
12932
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12933
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12934
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12935
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12936
+ ] })
12937
+ }
12938
+ ),
12939
+ /* @__PURE__ */ jsxRuntime.jsx(
12940
+ Form$2.Field,
12941
+ {
12942
+ control: form.control,
12943
+ name: "last_name",
12944
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12945
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12946
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12947
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12948
+ ] })
12949
+ }
12950
+ )
12951
+ ] }),
12952
+ /* @__PURE__ */ jsxRuntime.jsx(
12953
+ Form$2.Field,
12997
12954
  {
12998
- width: "12",
12999
- height: "12",
13000
- fill: "white",
13001
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
12955
+ control: form.control,
12956
+ name: "company",
12957
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12958
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12959
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12960
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12961
+ ] })
13002
12962
  }
13003
- ) }),
13004
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13005
- "rect",
12963
+ ),
12964
+ /* @__PURE__ */ jsxRuntime.jsx(
12965
+ Form$2.Field,
13006
12966
  {
13007
- width: "12",
13008
- height: "12",
13009
- fill: "white",
13010
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
12967
+ control: form.control,
12968
+ name: "address_1",
12969
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12970
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12971
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12972
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12973
+ ] })
13011
12974
  }
13012
- ) }),
13013
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13014
- "rect",
12975
+ ),
12976
+ /* @__PURE__ */ jsxRuntime.jsx(
12977
+ Form$2.Field,
13015
12978
  {
13016
- width: "12",
13017
- height: "12",
13018
- fill: "white",
13019
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
12979
+ control: form.control,
12980
+ name: "address_2",
12981
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12982
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12983
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12984
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12985
+ ] })
13020
12986
  }
13021
- ) }),
13022
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13023
- "rect",
12987
+ ),
12988
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12989
+ /* @__PURE__ */ jsxRuntime.jsx(
12990
+ Form$2.Field,
12991
+ {
12992
+ control: form.control,
12993
+ name: "postal_code",
12994
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12995
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12996
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12997
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12998
+ ] })
12999
+ }
13000
+ ),
13001
+ /* @__PURE__ */ jsxRuntime.jsx(
13002
+ Form$2.Field,
13003
+ {
13004
+ control: form.control,
13005
+ name: "city",
13006
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13007
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
13008
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13009
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13010
+ ] })
13011
+ }
13012
+ )
13013
+ ] }),
13014
+ /* @__PURE__ */ jsxRuntime.jsx(
13015
+ Form$2.Field,
13024
13016
  {
13025
- width: "12",
13026
- height: "12",
13027
- fill: "white",
13028
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
13017
+ control: form.control,
13018
+ name: "province",
13019
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13020
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13021
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13022
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13023
+ ] })
13029
13024
  }
13030
- ) }),
13031
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
13032
- "rect",
13025
+ ),
13026
+ /* @__PURE__ */ jsxRuntime.jsx(
13027
+ Form$2.Field,
13033
13028
  {
13034
- width: "12",
13035
- height: "12",
13036
- fill: "white",
13037
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
13029
+ control: form.control,
13030
+ name: "phone",
13031
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
13032
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
13033
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
13034
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
13035
+ ] })
13038
13036
  }
13039
- ) })
13040
- ] })
13037
+ )
13038
+ ] }) }),
13039
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
13040
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13041
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13042
+ ] }) })
13041
13043
  ]
13042
13044
  }
13043
- );
13045
+ ) });
13044
13046
  };
13045
- const schema = objectType({
13046
- customer_id: stringType().min(1)
13047
- });
13047
+ const schema = addressSchema;
13048
13048
  const widgetModule = { widgets: [] };
13049
13049
  const routeModule = {
13050
13050
  routes: [
@@ -13065,10 +13065,6 @@ const routeModule = {
13065
13065
  handle,
13066
13066
  loader,
13067
13067
  children: [
13068
- {
13069
- Component: BillingAddress,
13070
- path: "/draft-orders/:id/billing-address"
13071
- },
13072
13068
  {
13073
13069
  Component: CustomItems,
13074
13070
  path: "/draft-orders/:id/custom-items"
@@ -13090,20 +13086,24 @@ const routeModule = {
13090
13086
  path: "/draft-orders/:id/sales-channel"
13091
13087
  },
13092
13088
  {
13093
- Component: Items,
13094
- path: "/draft-orders/:id/items"
13089
+ Component: Shipping,
13090
+ path: "/draft-orders/:id/shipping"
13095
13091
  },
13096
13092
  {
13097
13093
  Component: ShippingAddress,
13098
13094
  path: "/draft-orders/:id/shipping-address"
13099
13095
  },
13100
- {
13101
- Component: Shipping,
13102
- path: "/draft-orders/:id/shipping"
13103
- },
13104
13096
  {
13105
13097
  Component: TransferOwnership,
13106
13098
  path: "/draft-orders/:id/transfer-ownership"
13099
+ },
13100
+ {
13101
+ Component: Items,
13102
+ path: "/draft-orders/:id/items"
13103
+ },
13104
+ {
13105
+ Component: BillingAddress,
13106
+ path: "/draft-orders/:id/billing-address"
13107
13107
  }
13108
13108
  ]
13109
13109
  }