@medusajs/draft-order 2.10.4-snapshot-20250927182917 → 2.10.4-snapshot-20250928135304

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 +739 -739
  2. package/.medusa/server/src/admin/index.mjs +739 -739
  3. package/package.json +16 -16
package/.medusa/server/src/admin/index.js CHANGED
@@ -9573,6 +9573,196 @@ 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;
9576
9766
  const CustomItems = () => {
9577
9767
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9578
9768
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
@@ -9581,7 +9771,7 @@ const CustomItems = () => {
9581
9771
  };
9582
9772
  const CustomItemsForm = () => {
9583
9773
  const form = reactHookForm.useForm({
9584
- resolver: zod.zodResolver(schema$5)
9774
+ resolver: zod.zodResolver(schema$4)
9585
9775
  });
9586
9776
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9587
9777
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
@@ -9591,46 +9781,114 @@ const CustomItemsForm = () => {
9591
9781
  ] }) })
9592
9782
  ] }) });
9593
9783
  };
9594
- const schema$5 = objectType({
9784
+ const schema$4 = objectType({
9595
9785
  email: stringType().email()
9596
9786
  });
9597
- const NumberInput = React.forwardRef(
9598
- ({
9599
- value,
9600
- onChange,
9601
- size = "base",
9602
- min = 0,
9603
- max = 100,
9604
- step = 1,
9605
- className,
9606
- disabled,
9607
- ...props
9608
- }, ref) => {
9609
- const handleChange = (event) => {
9610
- const newValue = event.target.value === "" ? min : Number(event.target.value);
9611
- if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
9612
- onChange(newValue);
9613
- }
9614
- };
9615
- const handleIncrement = () => {
9616
- const newValue = value + step;
9617
- if (max === void 0 || newValue <= max) {
9618
- onChange(newValue);
9619
- }
9620
- };
9621
- const handleDecrement = () => {
9622
- const newValue = value - step;
9623
- if (min === void 0 || newValue >= min) {
9624
- onChange(newValue);
9625
- }
9626
- };
9627
- return /* @__PURE__ */ jsxRuntime.jsxs(
9628
- "div",
9787
+ const Email = () => {
9788
+ const { id } = reactRouterDom.useParams();
9789
+ const { order, isPending, isError, error } = useOrder(id, {
9790
+ fields: "+email"
9791
+ });
9792
+ if (isError) {
9793
+ throw error;
9794
+ }
9795
+ const isReady = !isPending && !!order;
9796
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9797
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9798
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
9799
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
9800
+ ] }),
9801
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
9802
+ ] });
9803
+ };
9804
+ const EmailForm = ({ order }) => {
9805
+ const form = reactHookForm.useForm({
9806
+ defaultValues: {
9807
+ email: order.email ?? ""
9808
+ },
9809
+ resolver: zod.zodResolver(schema$3)
9810
+ });
9811
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9812
+ const { handleSuccess } = useRouteModal();
9813
+ const onSubmit = form.handleSubmit(async (data) => {
9814
+ await mutateAsync(
9815
+ { email: data.email },
9629
9816
  {
9630
- className: ui.clx(
9631
- "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
9632
- "[&:has(input:focus)]:shadow-borders-interactive-with-active",
9633
- {
9817
+ onSuccess: () => {
9818
+ handleSuccess();
9819
+ },
9820
+ onError: (error) => {
9821
+ ui.toast.error(error.message);
9822
+ }
9823
+ }
9824
+ );
9825
+ });
9826
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9827
+ KeyboundForm,
9828
+ {
9829
+ className: "flex flex-1 flex-col overflow-hidden",
9830
+ onSubmit,
9831
+ children: [
9832
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
9833
+ Form$2.Field,
9834
+ {
9835
+ control: form.control,
9836
+ name: "email",
9837
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
9838
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
9839
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
9840
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9841
+ ] })
9842
+ }
9843
+ ) }),
9844
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9845
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9846
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9847
+ ] }) })
9848
+ ]
9849
+ }
9850
+ ) });
9851
+ };
9852
+ const schema$3 = objectType({
9853
+ email: stringType().email()
9854
+ });
9855
+ const NumberInput = React.forwardRef(
9856
+ ({
9857
+ value,
9858
+ onChange,
9859
+ size = "base",
9860
+ min = 0,
9861
+ max = 100,
9862
+ step = 1,
9863
+ className,
9864
+ disabled,
9865
+ ...props
9866
+ }, ref) => {
9867
+ const handleChange = (event) => {
9868
+ const newValue = event.target.value === "" ? min : Number(event.target.value);
9869
+ if (!isNaN(newValue) && (max === void 0 || newValue <= max) && (min === void 0 || newValue >= min)) {
9870
+ onChange(newValue);
9871
+ }
9872
+ };
9873
+ const handleIncrement = () => {
9874
+ const newValue = value + step;
9875
+ if (max === void 0 || newValue <= max) {
9876
+ onChange(newValue);
9877
+ }
9878
+ };
9879
+ const handleDecrement = () => {
9880
+ const newValue = value - step;
9881
+ if (min === void 0 || newValue >= min) {
9882
+ onChange(newValue);
9883
+ }
9884
+ };
9885
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9886
+ "div",
9887
+ {
9888
+ className: ui.clx(
9889
+ "inline-flex rounded-md bg-ui-bg-field shadow-borders-base overflow-hidden divide-x transition-fg",
9890
+ "[&:has(input:focus)]:shadow-borders-interactive-with-active",
9891
+ {
9634
9892
  "h-7": size === "small",
9635
9893
  "h-8": size === "base"
9636
9894
  },
@@ -10334,497 +10592,239 @@ const ExistingItemsForm = ({ orderId, items }) => {
10334
10592
  onSuccess: () => {
10335
10593
  setRowSelection({});
10336
10594
  setIsOpen(STACKED_MODAL_ID, false);
10337
- },
10338
- onError: (e) => {
10339
- ui.toast.error(e.message);
10340
- }
10341
- }
10342
- );
10343
- };
10344
- if (isError) {
10345
- throw error;
10346
- }
10347
- return /* @__PURE__ */ jsxRuntime.jsxs(
10348
- StackedFocusModal.Content,
10349
- {
10350
- onOpenAutoFocus: (e) => {
10351
- e.preventDefault();
10352
- const searchInput = document.querySelector(
10353
- "[data-modal-id='modal-search-input']"
10354
- );
10355
- if (searchInput) {
10356
- searchInput.focus();
10357
- }
10358
- },
10359
- children: [
10360
- /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Header, { children: [
10361
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Product Variants" }) }),
10362
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
10363
- ] }),
10364
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
10365
- DataTable,
10366
- {
10367
- data: variants,
10368
- columns,
10369
- isLoading: isPending,
10370
- getRowId: (row) => row.id,
10371
- rowCount: count,
10372
- prefix: VARIANT_PREFIX,
10373
- layout: "fill",
10374
- rowSelection: {
10375
- state: rowSelection,
10376
- onRowSelectionChange: setRowSelection,
10377
- enableRowSelection: (row) => {
10378
- return !items.find((i) => i.variant_id === row.original.id);
10379
- }
10380
- },
10381
- autoFocusSearch: true
10382
- }
10383
- ) }),
10384
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10385
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10386
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
10387
- ] }) })
10388
- ]
10389
- }
10390
- );
10391
- };
10392
- const columnHelper = ui.createDataTableColumnHelper();
10393
- const useColumns = () => {
10394
- return React.useMemo(() => {
10395
- return [
10396
- columnHelper.select(),
10397
- columnHelper.accessor("product.title", {
10398
- header: "Product",
10399
- cell: ({ row }) => {
10400
- var _a, _b, _c;
10401
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
10402
- /* @__PURE__ */ jsxRuntime.jsx(
10403
- Thumbnail,
10404
- {
10405
- thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
10406
- alt: (_b = row.original.product) == null ? void 0 : _b.title
10407
- }
10408
- ),
10409
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
10410
- ] });
10411
- },
10412
- enableSorting: true
10413
- }),
10414
- columnHelper.accessor("title", {
10415
- header: "Variant",
10416
- enableSorting: true
10417
- }),
10418
- columnHelper.accessor("sku", {
10419
- header: "SKU",
10420
- cell: ({ getValue }) => {
10421
- return getValue() ?? "-";
10422
- },
10423
- enableSorting: true
10424
- }),
10425
- columnHelper.accessor("updated_at", {
10426
- header: "Updated",
10427
- cell: ({ getValue }) => {
10428
- return /* @__PURE__ */ jsxRuntime.jsx(
10429
- ui.Tooltip,
10430
- {
10431
- content: getFullDate({ date: getValue(), includeTime: true }),
10432
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10433
- }
10434
- );
10435
- },
10436
- enableSorting: true,
10437
- sortAscLabel: "Oldest first",
10438
- sortDescLabel: "Newest first"
10439
- }),
10440
- columnHelper.accessor("created_at", {
10441
- header: "Created",
10442
- cell: ({ getValue }) => {
10443
- return /* @__PURE__ */ jsxRuntime.jsx(
10444
- ui.Tooltip,
10445
- {
10446
- content: getFullDate({ date: getValue(), includeTime: true }),
10447
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10448
- }
10449
- );
10450
- },
10451
- enableSorting: true,
10452
- sortAscLabel: "Oldest first",
10453
- sortDescLabel: "Newest first"
10454
- })
10455
- ];
10456
- }, []);
10457
- };
10458
- const CustomItemForm = ({ orderId, currencyCode }) => {
10459
- const { setIsOpen } = useStackedModal();
10460
- const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
10461
- const form = reactHookForm.useForm({
10462
- defaultValues: {
10463
- title: "",
10464
- quantity: 1,
10465
- unit_price: ""
10466
- },
10467
- resolver: zod.zodResolver(customItemSchema)
10468
- });
10469
- const onSubmit = form.handleSubmit(async (data) => {
10470
- await addItems(
10471
- {
10472
- items: [
10473
- {
10474
- title: data.title,
10475
- quantity: data.quantity,
10476
- unit_price: convertNumber(data.unit_price)
10477
- }
10478
- ]
10479
- },
10480
- {
10481
- onSuccess: () => {
10482
- setIsOpen(STACKED_MODAL_ID, false);
10483
- },
10484
- onError: (e) => {
10485
- ui.toast.error(e.message);
10486
- }
10487
- }
10488
- );
10489
- });
10490
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
10491
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
10492
- /* @__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: [
10493
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10494
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
10495
- /* @__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." }) })
10496
- ] }),
10497
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10498
- /* @__PURE__ */ jsxRuntime.jsx(
10499
- Form$2.Field,
10500
- {
10501
- control: form.control,
10502
- name: "title",
10503
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10504
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10505
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
10506
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
10507
- ] }),
10508
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10509
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10510
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10511
- ] })
10512
- ] }) })
10513
- }
10514
- ),
10515
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10516
- /* @__PURE__ */ jsxRuntime.jsx(
10517
- Form$2.Field,
10518
- {
10519
- control: form.control,
10520
- name: "unit_price",
10521
- render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10522
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10523
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
10524
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
10525
- ] }),
10526
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10527
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10528
- ui.CurrencyInput,
10529
- {
10530
- symbol: getNativeSymbol(currencyCode),
10531
- code: currencyCode,
10532
- onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
10533
- ...field
10534
- }
10535
- ) }),
10536
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10537
- ] })
10538
- ] }) })
10539
- }
10540
- ),
10541
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10542
- /* @__PURE__ */ jsxRuntime.jsx(
10543
- Form$2.Field,
10544
- {
10545
- control: form.control,
10546
- name: "quantity",
10547
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10548
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10549
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
10550
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
10551
- ] }),
10552
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
10553
- /* @__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" }) }) }),
10554
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10555
- ] })
10556
- ] }) })
10557
- }
10558
- )
10559
- ] }) }) }),
10560
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10561
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10562
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
10563
- ] }) })
10564
- ] }) }) });
10565
- };
10566
- const customItemSchema = objectType({
10567
- title: stringType().min(1),
10568
- quantity: numberType(),
10569
- unit_price: unionType([numberType(), stringType()])
10570
- });
10571
- const BillingAddress = () => {
10572
- const { id } = reactRouterDom.useParams();
10573
- const { order, isPending, isError, error } = useOrder(id, {
10574
- fields: "+billing_address"
10575
- });
10576
- if (isError) {
10577
- throw error;
10578
- }
10579
- const isReady = !isPending && !!order;
10580
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10581
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10582
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
10583
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
10584
- ] }),
10585
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
10586
- ] });
10587
- };
10588
- const BillingAddressForm = ({ order }) => {
10589
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
10590
- const form = reactHookForm.useForm({
10591
- defaultValues: {
10592
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
10593
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
10594
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
10595
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
10596
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
10597
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
10598
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
10599
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
10600
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
10601
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
10602
- },
10603
- resolver: zod.zodResolver(schema$4)
10604
- });
10605
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10606
- const { handleSuccess } = useRouteModal();
10607
- const onSubmit = form.handleSubmit(async (data) => {
10608
- await mutateAsync(
10609
- { billing_address: data },
10610
- {
10611
- onSuccess: () => {
10612
- handleSuccess();
10613
- },
10614
- onError: (error) => {
10615
- ui.toast.error(error.message);
10616
- }
10617
- }
10618
- );
10619
- });
10620
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10621
- KeyboundForm,
10622
- {
10623
- className: "flex flex-1 flex-col overflow-hidden",
10624
- onSubmit,
10625
- children: [
10626
- /* @__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: [
10627
- /* @__PURE__ */ jsxRuntime.jsx(
10628
- Form$2.Field,
10629
- {
10630
- control: form.control,
10631
- name: "country_code",
10632
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10633
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
10634
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
10635
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10636
- ] })
10637
- }
10638
- ),
10639
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
10640
- /* @__PURE__ */ jsxRuntime.jsx(
10641
- Form$2.Field,
10642
- {
10643
- control: form.control,
10644
- name: "first_name",
10645
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10646
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
10647
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10648
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10649
- ] })
10650
- }
10651
- ),
10652
- /* @__PURE__ */ jsxRuntime.jsx(
10653
- Form$2.Field,
10654
- {
10655
- control: form.control,
10656
- name: "last_name",
10657
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10658
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
10659
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10660
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10661
- ] })
10662
- }
10663
- )
10664
- ] }),
10665
- /* @__PURE__ */ jsxRuntime.jsx(
10666
- Form$2.Field,
10667
- {
10668
- control: form.control,
10669
- name: "company",
10670
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10671
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
10672
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10673
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10674
- ] })
10675
- }
10676
- ),
10677
- /* @__PURE__ */ jsxRuntime.jsx(
10678
- Form$2.Field,
10679
- {
10680
- control: form.control,
10681
- name: "address_1",
10682
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10683
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
10684
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10685
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10686
- ] })
10687
- }
10688
- ),
10689
- /* @__PURE__ */ jsxRuntime.jsx(
10690
- Form$2.Field,
10691
- {
10692
- control: form.control,
10693
- name: "address_2",
10694
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10695
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
10696
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10697
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10698
- ] })
10699
- }
10700
- ),
10701
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
10702
- /* @__PURE__ */ jsxRuntime.jsx(
10703
- Form$2.Field,
10704
- {
10705
- control: form.control,
10706
- name: "postal_code",
10707
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10708
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
10709
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10710
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10711
- ] })
10595
+ },
10596
+ onError: (e) => {
10597
+ ui.toast.error(e.message);
10598
+ }
10599
+ }
10600
+ );
10601
+ };
10602
+ if (isError) {
10603
+ throw error;
10604
+ }
10605
+ return /* @__PURE__ */ jsxRuntime.jsxs(
10606
+ StackedFocusModal.Content,
10607
+ {
10608
+ onOpenAutoFocus: (e) => {
10609
+ e.preventDefault();
10610
+ const searchInput = document.querySelector(
10611
+ "[data-modal-id='modal-search-input']"
10612
+ );
10613
+ if (searchInput) {
10614
+ searchInput.focus();
10615
+ }
10616
+ },
10617
+ children: [
10618
+ /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Header, { children: [
10619
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Product Variants" }) }),
10620
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Choose product variants to add to the order." }) })
10621
+ ] }),
10622
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
10623
+ DataTable,
10624
+ {
10625
+ data: variants,
10626
+ columns,
10627
+ isLoading: isPending,
10628
+ getRowId: (row) => row.id,
10629
+ rowCount: count,
10630
+ prefix: VARIANT_PREFIX,
10631
+ layout: "fill",
10632
+ rowSelection: {
10633
+ state: rowSelection,
10634
+ onRowSelectionChange: setRowSelection,
10635
+ enableRowSelection: (row) => {
10636
+ return !items.find((i) => i.variant_id === row.original.id);
10712
10637
  }
10713
- ),
10638
+ },
10639
+ autoFocusSearch: true
10640
+ }
10641
+ ) }),
10642
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10643
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10644
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Update items" })
10645
+ ] }) })
10646
+ ]
10647
+ }
10648
+ );
10649
+ };
10650
+ const columnHelper = ui.createDataTableColumnHelper();
10651
+ const useColumns = () => {
10652
+ return React.useMemo(() => {
10653
+ return [
10654
+ columnHelper.select(),
10655
+ columnHelper.accessor("product.title", {
10656
+ header: "Product",
10657
+ cell: ({ row }) => {
10658
+ var _a, _b, _c;
10659
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
10714
10660
  /* @__PURE__ */ jsxRuntime.jsx(
10715
- Form$2.Field,
10661
+ Thumbnail,
10716
10662
  {
10717
- control: form.control,
10718
- name: "city",
10719
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10720
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
10721
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10722
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10723
- ] })
10663
+ thumbnail: (_a = row.original.product) == null ? void 0 : _a.thumbnail,
10664
+ alt: (_b = row.original.product) == null ? void 0 : _b.title
10724
10665
  }
10725
- )
10726
- ] }),
10727
- /* @__PURE__ */ jsxRuntime.jsx(
10728
- Form$2.Field,
10666
+ ),
10667
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: (_c = row.original.product) == null ? void 0 : _c.title })
10668
+ ] });
10669
+ },
10670
+ enableSorting: true
10671
+ }),
10672
+ columnHelper.accessor("title", {
10673
+ header: "Variant",
10674
+ enableSorting: true
10675
+ }),
10676
+ columnHelper.accessor("sku", {
10677
+ header: "SKU",
10678
+ cell: ({ getValue }) => {
10679
+ return getValue() ?? "-";
10680
+ },
10681
+ enableSorting: true
10682
+ }),
10683
+ columnHelper.accessor("updated_at", {
10684
+ header: "Updated",
10685
+ cell: ({ getValue }) => {
10686
+ return /* @__PURE__ */ jsxRuntime.jsx(
10687
+ ui.Tooltip,
10729
10688
  {
10730
- control: form.control,
10731
- name: "province",
10732
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10733
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
10734
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10735
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10736
- ] })
10689
+ content: getFullDate({ date: getValue(), includeTime: true }),
10690
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10737
10691
  }
10738
- ),
10739
- /* @__PURE__ */ jsxRuntime.jsx(
10740
- Form$2.Field,
10692
+ );
10693
+ },
10694
+ enableSorting: true,
10695
+ sortAscLabel: "Oldest first",
10696
+ sortDescLabel: "Newest first"
10697
+ }),
10698
+ columnHelper.accessor("created_at", {
10699
+ header: "Created",
10700
+ cell: ({ getValue }) => {
10701
+ return /* @__PURE__ */ jsxRuntime.jsx(
10702
+ ui.Tooltip,
10741
10703
  {
10742
- control: form.control,
10743
- name: "phone",
10744
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10745
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
10746
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10747
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10748
- ] })
10704
+ content: getFullDate({ date: getValue(), includeTime: true }),
10705
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: getFullDate({ date: getValue() }) })
10749
10706
  }
10750
- )
10751
- ] }) }),
10752
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10753
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10754
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10755
- ] }) })
10756
- ]
10757
- }
10758
- ) });
10759
- };
10760
- const schema$4 = addressSchema;
10761
- const Email = () => {
10762
- const { id } = reactRouterDom.useParams();
10763
- const { order, isPending, isError, error } = useOrder(id, {
10764
- fields: "+email"
10765
- });
10766
- if (isError) {
10767
- throw error;
10768
- }
10769
- const isReady = !isPending && !!order;
10770
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
10771
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
10772
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Email" }) }),
10773
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10774
- ] }),
10775
- isReady && /* @__PURE__ */ jsxRuntime.jsx(EmailForm, { order })
10776
- ] });
10707
+ );
10708
+ },
10709
+ enableSorting: true,
10710
+ sortAscLabel: "Oldest first",
10711
+ sortDescLabel: "Newest first"
10712
+ })
10713
+ ];
10714
+ }, []);
10777
10715
  };
10778
- const EmailForm = ({ order }) => {
10716
+ const CustomItemForm = ({ orderId, currencyCode }) => {
10717
+ const { setIsOpen } = useStackedModal();
10718
+ const { mutateAsync: addItems } = useDraftOrderAddItems(orderId);
10779
10719
  const form = reactHookForm.useForm({
10780
10720
  defaultValues: {
10781
- email: order.email ?? ""
10721
+ title: "",
10722
+ quantity: 1,
10723
+ unit_price: ""
10782
10724
  },
10783
- resolver: zod.zodResolver(schema$3)
10725
+ resolver: zod.zodResolver(customItemSchema)
10784
10726
  });
10785
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10786
- const { handleSuccess } = useRouteModal();
10787
10727
  const onSubmit = form.handleSubmit(async (data) => {
10788
- await mutateAsync(
10789
- { email: data.email },
10728
+ await addItems(
10729
+ {
10730
+ items: [
10731
+ {
10732
+ title: data.title,
10733
+ quantity: data.quantity,
10734
+ unit_price: convertNumber(data.unit_price)
10735
+ }
10736
+ ]
10737
+ },
10790
10738
  {
10791
10739
  onSuccess: () => {
10792
- handleSuccess();
10740
+ setIsOpen(STACKED_MODAL_ID, false);
10793
10741
  },
10794
- onError: (error) => {
10795
- ui.toast.error(error.message);
10742
+ onError: (e) => {
10743
+ ui.toast.error(e.message);
10796
10744
  }
10797
10745
  }
10798
10746
  );
10799
10747
  });
10800
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
10801
- KeyboundForm,
10802
- {
10803
- className: "flex flex-1 flex-col overflow-hidden",
10804
- onSubmit,
10805
- children: [
10806
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
10807
- Form$2.Field,
10808
- {
10809
- control: form.control,
10810
- name: "email",
10811
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
10812
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Email" }),
10748
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboundForm, { onSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(StackedFocusModal.Content, { children: [
10749
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
10750
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-2 py-16", children: [
10751
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10752
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Add custom item" }) }),
10753
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a custom item to the order. This will add a new line item that is not associated with an existing product." }) })
10754
+ ] }),
10755
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10756
+ /* @__PURE__ */ jsxRuntime.jsx(
10757
+ Form$2.Field,
10758
+ {
10759
+ control: form.control,
10760
+ name: "title",
10761
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10762
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10763
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Title" }),
10764
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the title of the item" })
10765
+ ] }),
10766
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10813
10767
  /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
10814
10768
  /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10815
10769
  ] })
10816
- }
10817
- ) }),
10818
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
10819
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10820
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10821
- ] }) })
10822
- ]
10823
- }
10824
- ) });
10770
+ ] }) })
10771
+ }
10772
+ ),
10773
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10774
+ /* @__PURE__ */ jsxRuntime.jsx(
10775
+ Form$2.Field,
10776
+ {
10777
+ control: form.control,
10778
+ name: "unit_price",
10779
+ render: ({ field: { onChange, ...field } }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10780
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10781
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Unit price" }),
10782
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the unit price of the item" })
10783
+ ] }),
10784
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10785
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
10786
+ ui.CurrencyInput,
10787
+ {
10788
+ symbol: getNativeSymbol(currencyCode),
10789
+ code: currencyCode,
10790
+ onValueChange: (_value, _name, values) => onChange(values == null ? void 0 : values.value),
10791
+ ...field
10792
+ }
10793
+ ) }),
10794
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10795
+ ] })
10796
+ ] }) })
10797
+ }
10798
+ ),
10799
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
10800
+ /* @__PURE__ */ jsxRuntime.jsx(
10801
+ Form$2.Field,
10802
+ {
10803
+ control: form.control,
10804
+ name: "quantity",
10805
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
10806
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10807
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Quantity" }),
10808
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Enter the quantity of the item" })
10809
+ ] }),
10810
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex-1", children: [
10811
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...field, className: "w-full" }) }) }),
10812
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
10813
+ ] })
10814
+ ] }) })
10815
+ }
10816
+ )
10817
+ ] }) }) }),
10818
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10819
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10820
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "button", onClick: onSubmit, children: "Add item" })
10821
+ ] }) })
10822
+ ] }) }) });
10825
10823
  };
10826
- const schema$3 = objectType({
10827
- email: stringType().email()
10824
+ const customItemSchema = objectType({
10825
+ title: stringType().min(1),
10826
+ quantity: numberType(),
10827
+ unit_price: unionType([numberType(), stringType()])
10828
10828
  });
10829
10829
  const InlineTip = React.forwardRef(
10830
10830
  ({ variant = "tip", label, className, children, ...props }, ref) => {
@@ -11536,232 +11536,29 @@ const SalesChannelField = ({ control, order }) => {
11536
11536
  control,
11537
11537
  name: "sales_channel_id",
11538
11538
  render: ({ field }) => {
11539
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11540
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11541
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11542
- Combobox,
11543
- {
11544
- options: salesChannels.options,
11545
- fetchNextPage: salesChannels.fetchNextPage,
11546
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11547
- searchValue: salesChannels.searchValue,
11548
- onSearchValueChange: salesChannels.onSearchValueChange,
11549
- placeholder: "Select sales channel",
11550
- ...field
11551
- }
11552
- ) }),
11553
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11554
- ] });
11555
- }
11556
- }
11557
- );
11558
- };
11559
- const schema$2 = objectType({
11560
- sales_channel_id: stringType().min(1)
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
- ] })
11539
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
11540
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
11541
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
11542
+ Combobox,
11543
+ {
11544
+ options: salesChannels.options,
11545
+ fetchNextPage: salesChannels.fetchNextPage,
11546
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11547
+ searchValue: salesChannels.searchValue,
11548
+ onSearchValueChange: salesChannels.onSearchValueChange,
11549
+ placeholder: "Select sales channel",
11550
+ ...field
11753
11551
  }
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
- ]
11552
+ ) }),
11553
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
11554
+ ] });
11555
+ }
11761
11556
  }
11762
- ) });
11557
+ );
11763
11558
  };
11764
- const schema$1 = addressSchema;
11559
+ const schema$2 = objectType({
11560
+ sales_channel_id: stringType().min(1)
11561
+ });
11765
11562
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11766
11563
  const Shipping = () => {
11767
11564
  var _a;
@@ -12569,6 +12366,209 @@ const CustomAmountField = ({
12569
12366
  }
12570
12367
  );
12571
12368
  };
12369
+ const ShippingAddress = () => {
12370
+ const { id } = reactRouterDom.useParams();
12371
+ const { order, isPending, isError, error } = useOrder(id, {
12372
+ fields: "+shipping_address"
12373
+ });
12374
+ if (isError) {
12375
+ throw error;
12376
+ }
12377
+ const isReady = !isPending && !!order;
12378
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
12379
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
12380
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
12381
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12382
+ ] }),
12383
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
12384
+ ] });
12385
+ };
12386
+ const ShippingAddressForm = ({ order }) => {
12387
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12388
+ const form = reactHookForm.useForm({
12389
+ defaultValues: {
12390
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12391
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12392
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12393
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12394
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12395
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12396
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12397
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12398
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12399
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12400
+ },
12401
+ resolver: zod.zodResolver(schema$1)
12402
+ });
12403
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12404
+ const { handleSuccess } = useRouteModal();
12405
+ const onSubmit = form.handleSubmit(async (data) => {
12406
+ await mutateAsync(
12407
+ {
12408
+ shipping_address: {
12409
+ first_name: data.first_name,
12410
+ last_name: data.last_name,
12411
+ company: data.company,
12412
+ address_1: data.address_1,
12413
+ address_2: data.address_2,
12414
+ city: data.city,
12415
+ province: data.province,
12416
+ country_code: data.country_code,
12417
+ postal_code: data.postal_code,
12418
+ phone: data.phone
12419
+ }
12420
+ },
12421
+ {
12422
+ onSuccess: () => {
12423
+ handleSuccess();
12424
+ },
12425
+ onError: (error) => {
12426
+ ui.toast.error(error.message);
12427
+ }
12428
+ }
12429
+ );
12430
+ });
12431
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
12432
+ KeyboundForm,
12433
+ {
12434
+ className: "flex flex-1 flex-col overflow-hidden",
12435
+ onSubmit,
12436
+ children: [
12437
+ /* @__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: [
12438
+ /* @__PURE__ */ jsxRuntime.jsx(
12439
+ Form$2.Field,
12440
+ {
12441
+ control: form.control,
12442
+ name: "country_code",
12443
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12444
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
12445
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
12446
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12447
+ ] })
12448
+ }
12449
+ ),
12450
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12451
+ /* @__PURE__ */ jsxRuntime.jsx(
12452
+ Form$2.Field,
12453
+ {
12454
+ control: form.control,
12455
+ name: "first_name",
12456
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12457
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
12458
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12459
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12460
+ ] })
12461
+ }
12462
+ ),
12463
+ /* @__PURE__ */ jsxRuntime.jsx(
12464
+ Form$2.Field,
12465
+ {
12466
+ control: form.control,
12467
+ name: "last_name",
12468
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12469
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
12470
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12471
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12472
+ ] })
12473
+ }
12474
+ )
12475
+ ] }),
12476
+ /* @__PURE__ */ jsxRuntime.jsx(
12477
+ Form$2.Field,
12478
+ {
12479
+ control: form.control,
12480
+ name: "company",
12481
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12482
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
12483
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12484
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12485
+ ] })
12486
+ }
12487
+ ),
12488
+ /* @__PURE__ */ jsxRuntime.jsx(
12489
+ Form$2.Field,
12490
+ {
12491
+ control: form.control,
12492
+ name: "address_1",
12493
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12494
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
12495
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12496
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12497
+ ] })
12498
+ }
12499
+ ),
12500
+ /* @__PURE__ */ jsxRuntime.jsx(
12501
+ Form$2.Field,
12502
+ {
12503
+ control: form.control,
12504
+ name: "address_2",
12505
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12506
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12507
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12508
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12509
+ ] })
12510
+ }
12511
+ ),
12512
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12513
+ /* @__PURE__ */ jsxRuntime.jsx(
12514
+ Form$2.Field,
12515
+ {
12516
+ control: form.control,
12517
+ name: "postal_code",
12518
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12519
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
12520
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12521
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12522
+ ] })
12523
+ }
12524
+ ),
12525
+ /* @__PURE__ */ jsxRuntime.jsx(
12526
+ Form$2.Field,
12527
+ {
12528
+ control: form.control,
12529
+ name: "city",
12530
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12531
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
12532
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12533
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12534
+ ] })
12535
+ }
12536
+ )
12537
+ ] }),
12538
+ /* @__PURE__ */ jsxRuntime.jsx(
12539
+ Form$2.Field,
12540
+ {
12541
+ control: form.control,
12542
+ name: "province",
12543
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12544
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12545
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12546
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12547
+ ] })
12548
+ }
12549
+ ),
12550
+ /* @__PURE__ */ jsxRuntime.jsx(
12551
+ Form$2.Field,
12552
+ {
12553
+ control: form.control,
12554
+ name: "phone",
12555
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
12556
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
12557
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
12558
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
12559
+ ] })
12560
+ }
12561
+ )
12562
+ ] }) }),
12563
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
12564
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12565
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12566
+ ] }) })
12567
+ ]
12568
+ }
12569
+ ) });
12570
+ };
12571
+ const schema$1 = addressSchema;
12572
12572
  const TransferOwnership = () => {
12573
12573
  const { id } = reactRouterDom.useParams();
12574
12574
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -13065,22 +13065,22 @@ const routeModule = {
13065
13065
  handle,
13066
13066
  loader,
13067
13067
  children: [
13068
- {
13069
- Component: CustomItems,
13070
- path: "/draft-orders/:id/custom-items"
13071
- },
13072
- {
13073
- Component: Items,
13074
- path: "/draft-orders/:id/items"
13075
- },
13076
13068
  {
13077
13069
  Component: BillingAddress,
13078
13070
  path: "/draft-orders/:id/billing-address"
13079
13071
  },
13072
+ {
13073
+ Component: CustomItems,
13074
+ path: "/draft-orders/:id/custom-items"
13075
+ },
13080
13076
  {
13081
13077
  Component: Email,
13082
13078
  path: "/draft-orders/:id/email"
13083
13079
  },
13080
+ {
13081
+ Component: Items,
13082
+ path: "/draft-orders/:id/items"
13083
+ },
13084
13084
  {
13085
13085
  Component: Metadata,
13086
13086
  path: "/draft-orders/:id/metadata"
@@ -13093,14 +13093,14 @@ const routeModule = {
13093
13093
  Component: SalesChannel,
13094
13094
  path: "/draft-orders/:id/sales-channel"
13095
13095
  },
13096
- {
13097
- Component: ShippingAddress,
13098
- path: "/draft-orders/:id/shipping-address"
13099
- },
13100
13096
  {
13101
13097
  Component: Shipping,
13102
13098
  path: "/draft-orders/:id/shipping"
13103
13099
  },
13100
+ {
13101
+ Component: ShippingAddress,
13102
+ path: "/draft-orders/:id/shipping-address"
13103
+ },
13104
13104
  {
13105
13105
  Component: TransferOwnership,
13106
13106
  path: "/draft-orders/:id/transfer-ownership"