@medusajs/draft-order 2.10.2-snapshot-20250912102418 → 2.10.2

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.
@@ -10731,74 +10731,6 @@ const customItemSchema = objectType({
10731
10731
  quantity: numberType(),
10732
10732
  unit_price: unionType([numberType(), stringType()])
10733
10733
  });
10734
- const Email = () => {
10735
- const { id } = useParams();
10736
- const { order, isPending, isError, error } = useOrder(id, {
10737
- fields: "+email"
10738
- });
10739
- if (isError) {
10740
- throw error;
10741
- }
10742
- const isReady = !isPending && !!order;
10743
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10744
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10745
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
10746
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
10747
- ] }),
10748
- isReady && /* @__PURE__ */ jsx(EmailForm, { order })
10749
- ] });
10750
- };
10751
- const EmailForm = ({ order }) => {
10752
- const form = useForm({
10753
- defaultValues: {
10754
- email: order.email ?? ""
10755
- },
10756
- resolver: zodResolver(schema$4)
10757
- });
10758
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
10759
- const { handleSuccess } = useRouteModal();
10760
- const onSubmit = form.handleSubmit(async (data) => {
10761
- await mutateAsync(
10762
- { email: data.email },
10763
- {
10764
- onSuccess: () => {
10765
- handleSuccess();
10766
- },
10767
- onError: (error) => {
10768
- toast.error(error.message);
10769
- }
10770
- }
10771
- );
10772
- });
10773
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10774
- KeyboundForm,
10775
- {
10776
- className: "flex flex-1 flex-col overflow-hidden",
10777
- onSubmit,
10778
- children: [
10779
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
10780
- Form$2.Field,
10781
- {
10782
- control: form.control,
10783
- name: "email",
10784
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
10785
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
10786
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
10787
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
10788
- ] })
10789
- }
10790
- ) }),
10791
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10792
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10793
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10794
- ] }) })
10795
- ]
10796
- }
10797
- ) });
10798
- };
10799
- const schema$4 = objectType({
10800
- email: stringType().email()
10801
- });
10802
10734
  const InlineTip = forwardRef(
10803
10735
  ({ variant = "tip", label, className, children, ...props }, ref) => {
10804
10736
  const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
@@ -11149,133 +11081,6 @@ function getHasUneditableRows(metadata) {
11149
11081
  (value) => !EDITABLE_TYPES.includes(typeof value)
11150
11082
  );
11151
11083
  }
11152
- const CustomItems = () => {
11153
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11154
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
11155
- /* @__PURE__ */ jsx(CustomItemsForm, {})
11156
- ] });
11157
- };
11158
- const CustomItemsForm = () => {
11159
- const form = useForm({
11160
- resolver: zodResolver(schema$3)
11161
- });
11162
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
11163
- /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
11164
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11165
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11166
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
11167
- ] }) })
11168
- ] }) });
11169
- };
11170
- const schema$3 = objectType({
11171
- email: stringType().email()
11172
- });
11173
- const SalesChannel = () => {
11174
- const { id } = useParams();
11175
- const { draft_order, isPending, isError, error } = useDraftOrder(
11176
- id,
11177
- {
11178
- fields: "+sales_channel_id"
11179
- },
11180
- {
11181
- enabled: !!id
11182
- }
11183
- );
11184
- if (isError) {
11185
- throw error;
11186
- }
11187
- const ISrEADY = !!draft_order && !isPending;
11188
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11189
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11190
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11191
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11192
- ] }),
11193
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11194
- ] });
11195
- };
11196
- const SalesChannelForm = ({ order }) => {
11197
- const form = useForm({
11198
- defaultValues: {
11199
- sales_channel_id: order.sales_channel_id || ""
11200
- },
11201
- resolver: zodResolver(schema$2)
11202
- });
11203
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11204
- const { handleSuccess } = useRouteModal();
11205
- const onSubmit = form.handleSubmit(async (data) => {
11206
- await mutateAsync(
11207
- {
11208
- sales_channel_id: data.sales_channel_id
11209
- },
11210
- {
11211
- onSuccess: () => {
11212
- toast.success("Sales channel updated");
11213
- handleSuccess();
11214
- },
11215
- onError: (error) => {
11216
- toast.error(error.message);
11217
- }
11218
- }
11219
- );
11220
- });
11221
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11222
- KeyboundForm,
11223
- {
11224
- className: "flex flex-1 flex-col overflow-hidden",
11225
- onSubmit,
11226
- children: [
11227
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11228
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11229
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11230
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11231
- ] }) })
11232
- ]
11233
- }
11234
- ) });
11235
- };
11236
- const SalesChannelField = ({ control, order }) => {
11237
- const salesChannels = useComboboxData({
11238
- queryFn: async (params) => {
11239
- return await sdk.admin.salesChannel.list(params);
11240
- },
11241
- queryKey: ["sales-channels"],
11242
- getOptions: (data) => {
11243
- return data.sales_channels.map((salesChannel) => ({
11244
- label: salesChannel.name,
11245
- value: salesChannel.id
11246
- }));
11247
- },
11248
- defaultValue: order.sales_channel_id || void 0
11249
- });
11250
- return /* @__PURE__ */ jsx(
11251
- Form$2.Field,
11252
- {
11253
- control,
11254
- name: "sales_channel_id",
11255
- render: ({ field }) => {
11256
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11257
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11258
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11259
- Combobox,
11260
- {
11261
- options: salesChannels.options,
11262
- fetchNextPage: salesChannels.fetchNextPage,
11263
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11264
- searchValue: salesChannels.searchValue,
11265
- onSearchValueChange: salesChannels.onSearchValueChange,
11266
- placeholder: "Select sales channel",
11267
- ...field
11268
- }
11269
- ) }),
11270
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11271
- ] });
11272
- }
11273
- }
11274
- );
11275
- };
11276
- const schema$2 = objectType({
11277
- sales_channel_id: stringType().min(1)
11278
- });
11279
11084
  const PROMOTION_QUERY_KEY = "promotions";
11280
11085
  const promotionsQueryKeys = {
11281
11086
  list: (query2) => [
@@ -11553,813 +11358,404 @@ function getPromotionIds(items, shippingMethods) {
11553
11358
  }
11554
11359
  return Array.from(promotionIds);
11555
11360
  }
11556
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
11557
- const Shipping = () => {
11558
- var _a;
11361
+ const Email = () => {
11559
11362
  const { id } = useParams();
11560
11363
  const { order, isPending, isError, error } = useOrder(id, {
11561
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
11364
+ fields: "+email"
11562
11365
  });
11563
- const {
11564
- order: preview,
11565
- isPending: isPreviewPending,
11566
- isError: isPreviewError,
11567
- error: previewError
11568
- } = useOrderPreview(id);
11569
- useInitiateOrderEdit({ preview });
11570
- const { onCancel } = useCancelOrderEdit({ preview });
11571
11366
  if (isError) {
11572
11367
  throw error;
11573
11368
  }
11574
- if (isPreviewError) {
11575
- throw previewError;
11576
- }
11577
- const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
11578
- const isReady = preview && !isPreviewPending && order && !isPending;
11579
- return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
11580
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11581
- /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11582
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11583
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
11584
- ] }) }) }),
11585
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
11586
- ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
11587
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
11588
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
11589
- ] }) });
11369
+ const isReady = !isPending && !!order;
11370
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11371
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11372
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Email" }) }),
11373
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the email for the draft order" }) })
11374
+ ] }),
11375
+ isReady && /* @__PURE__ */ jsx(EmailForm, { order })
11376
+ ] });
11590
11377
  };
11591
- const ShippingForm = ({ preview, order }) => {
11592
- var _a;
11593
- const { setIsOpen } = useStackedModal();
11594
- const [isSubmitting, setIsSubmitting] = useState(false);
11595
- const [data, setData] = useState(null);
11596
- const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
11597
- const { shipping_options } = useShippingOptions(
11598
- {
11599
- id: appliedShippingOptionIds,
11600
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
11378
+ const EmailForm = ({ order }) => {
11379
+ const form = useForm({
11380
+ defaultValues: {
11381
+ email: order.email ?? ""
11601
11382
  },
11602
- {
11603
- enabled: appliedShippingOptionIds.length > 0
11604
- }
11605
- );
11606
- const uniqueShippingProfiles = useMemo(() => {
11607
- const profiles = /* @__PURE__ */ new Map();
11608
- getUniqueShippingProfiles(order.items).forEach((profile) => {
11609
- profiles.set(profile.id, profile);
11610
- });
11611
- shipping_options == null ? void 0 : shipping_options.forEach((option) => {
11612
- profiles.set(option.shipping_profile_id, option.shipping_profile);
11613
- });
11614
- return Array.from(profiles.values());
11615
- }, [order.items, shipping_options]);
11383
+ resolver: zodResolver(schema$4)
11384
+ });
11385
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11616
11386
  const { handleSuccess } = useRouteModal();
11617
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11618
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
11619
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
11620
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
11621
- const onSubmit = async () => {
11622
- setIsSubmitting(true);
11623
- let requestSucceeded = false;
11624
- await requestOrderEdit(void 0, {
11625
- onError: (e) => {
11626
- toast.error(`Failed to request order edit: ${e.message}`);
11627
- },
11628
- onSuccess: () => {
11629
- requestSucceeded = true;
11387
+ const onSubmit = form.handleSubmit(async (data) => {
11388
+ await mutateAsync(
11389
+ { email: data.email },
11390
+ {
11391
+ onSuccess: () => {
11392
+ handleSuccess();
11393
+ },
11394
+ onError: (error) => {
11395
+ toast.error(error.message);
11396
+ }
11630
11397
  }
11631
- });
11632
- if (!requestSucceeded) {
11633
- setIsSubmitting(false);
11634
- return;
11398
+ );
11399
+ });
11400
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11401
+ KeyboundForm,
11402
+ {
11403
+ className: "flex flex-1 flex-col overflow-hidden",
11404
+ onSubmit,
11405
+ children: [
11406
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(
11407
+ Form$2.Field,
11408
+ {
11409
+ control: form.control,
11410
+ name: "email",
11411
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11412
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Email" }),
11413
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11414
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11415
+ ] })
11416
+ }
11417
+ ) }),
11418
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11419
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11420
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11421
+ ] }) })
11422
+ ]
11635
11423
  }
11636
- await confirmOrderEdit(void 0, {
11637
- onError: (e) => {
11638
- toast.error(`Failed to confirm order edit: ${e.message}`);
11639
- },
11640
- onSuccess: () => {
11641
- handleSuccess();
11424
+ ) });
11425
+ };
11426
+ const schema$4 = objectType({
11427
+ email: stringType().email()
11428
+ });
11429
+ const CustomItems = () => {
11430
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11431
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
11432
+ /* @__PURE__ */ jsx(CustomItemsForm, {})
11433
+ ] });
11434
+ };
11435
+ const CustomItemsForm = () => {
11436
+ const form = useForm({
11437
+ resolver: zodResolver(schema$3)
11438
+ });
11439
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
11440
+ /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
11441
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11442
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11443
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", children: "Save" })
11444
+ ] }) })
11445
+ ] }) });
11446
+ };
11447
+ const schema$3 = objectType({
11448
+ email: stringType().email()
11449
+ });
11450
+ const SalesChannel = () => {
11451
+ const { id } = useParams();
11452
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11453
+ id,
11454
+ {
11455
+ fields: "+sales_channel_id"
11456
+ },
11457
+ {
11458
+ enabled: !!id
11459
+ }
11460
+ );
11461
+ if (isError) {
11462
+ throw error;
11463
+ }
11464
+ const ISrEADY = !!draft_order && !isPending;
11465
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11466
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11467
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11468
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11469
+ ] }),
11470
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11471
+ ] });
11472
+ };
11473
+ const SalesChannelForm = ({ order }) => {
11474
+ const form = useForm({
11475
+ defaultValues: {
11476
+ sales_channel_id: order.sales_channel_id || ""
11477
+ },
11478
+ resolver: zodResolver(schema$2)
11479
+ });
11480
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11481
+ const { handleSuccess } = useRouteModal();
11482
+ const onSubmit = form.handleSubmit(async (data) => {
11483
+ await mutateAsync(
11484
+ {
11485
+ sales_channel_id: data.sales_channel_id
11642
11486
  },
11643
- onSettled: () => {
11644
- setIsSubmitting(false);
11645
- }
11646
- });
11647
- };
11648
- const onKeydown = useCallback(
11649
- (e) => {
11650
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
11651
- if (data || isSubmitting) {
11652
- return;
11487
+ {
11488
+ onSuccess: () => {
11489
+ toast.success("Sales channel updated");
11490
+ handleSuccess();
11491
+ },
11492
+ onError: (error) => {
11493
+ toast.error(error.message);
11653
11494
  }
11654
- onSubmit();
11655
11495
  }
11496
+ );
11497
+ });
11498
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11499
+ KeyboundForm,
11500
+ {
11501
+ className: "flex flex-1 flex-col overflow-hidden",
11502
+ onSubmit,
11503
+ children: [
11504
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11505
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11506
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11507
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11508
+ ] }) })
11509
+ ]
11510
+ }
11511
+ ) });
11512
+ };
11513
+ const SalesChannelField = ({ control, order }) => {
11514
+ const salesChannels = useComboboxData({
11515
+ queryFn: async (params) => {
11516
+ return await sdk.admin.salesChannel.list(params);
11656
11517
  },
11657
- [data, isSubmitting, onSubmit]
11518
+ queryKey: ["sales-channels"],
11519
+ getOptions: (data) => {
11520
+ return data.sales_channels.map((salesChannel) => ({
11521
+ label: salesChannel.name,
11522
+ value: salesChannel.id
11523
+ }));
11524
+ },
11525
+ defaultValue: order.sales_channel_id || void 0
11526
+ });
11527
+ return /* @__PURE__ */ jsx(
11528
+ Form$2.Field,
11529
+ {
11530
+ control,
11531
+ name: "sales_channel_id",
11532
+ render: ({ field }) => {
11533
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11534
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11535
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11536
+ Combobox,
11537
+ {
11538
+ options: salesChannels.options,
11539
+ fetchNextPage: salesChannels.fetchNextPage,
11540
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11541
+ searchValue: salesChannels.searchValue,
11542
+ onSearchValueChange: salesChannels.onSearchValueChange,
11543
+ placeholder: "Select sales channel",
11544
+ ...field
11545
+ }
11546
+ ) }),
11547
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11548
+ ] });
11549
+ }
11550
+ }
11658
11551
  );
11659
- useEffect(() => {
11660
- document.addEventListener("keydown", onKeydown);
11661
- return () => {
11662
- document.removeEventListener("keydown", onKeydown);
11663
- };
11664
- }, [onKeydown]);
11665
- return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
11666
- /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
11667
- /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
11668
- /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
11669
- /* @__PURE__ */ jsxs("div", { children: [
11670
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
11671
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
11672
- ] }),
11673
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11674
- /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
11675
- /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
11676
- /* @__PURE__ */ jsx(
11677
- Text,
11678
- {
11679
- size: "xsmall",
11680
- weight: "plus",
11681
- className: "text-ui-fg-muted",
11682
- children: "Shipping profile"
11683
- }
11684
- ),
11685
- /* @__PURE__ */ jsx(
11686
- Text,
11687
- {
11688
- size: "xsmall",
11689
- weight: "plus",
11690
- className: "text-ui-fg-muted",
11691
- children: "Action"
11692
- }
11693
- )
11694
- ] }),
11695
- /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
11696
- var _a2, _b, _c, _d, _e, _f, _g;
11697
- const items = getItemsWithShippingProfile(
11698
- profile.id,
11699
- order.items
11700
- );
11701
- const hasItems = items.length > 0;
11702
- const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
11703
- (option) => option.shipping_profile_id === profile.id
11704
- );
11705
- const shippingMethod = preview.shipping_methods.find(
11706
- (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
11707
- );
11708
- const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
11709
- (action) => action.action === "SHIPPING_ADD"
11710
- );
11711
- return /* @__PURE__ */ jsxs(
11712
- Accordion.Item,
11713
- {
11714
- value: profile.id,
11715
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
11716
- children: [
11717
- /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
11718
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
11719
- /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
11720
- IconButton,
11721
- {
11722
- size: "2xsmall",
11723
- variant: "transparent",
11724
- className: "group/trigger",
11725
- disabled: !hasItems,
11726
- children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
11727
- }
11728
- ) }),
11729
- !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
11730
- /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) }),
11731
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
11732
- /* @__PURE__ */ jsx(
11733
- Text,
11734
- {
11735
- size: "small",
11736
- weight: "plus",
11737
- leading: "compact",
11738
- children: profile.name
11739
- }
11740
- ),
11741
- /* @__PURE__ */ jsxs(
11742
- Text,
11743
- {
11744
- size: "small",
11745
- leading: "compact",
11746
- className: "text-ui-fg-subtle",
11747
- children: [
11748
- items.length,
11749
- " ",
11750
- pluralize(items.length, "items", "item")
11751
- ]
11752
- }
11753
- )
11754
- ] })
11755
- ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
11756
- /* @__PURE__ */ jsx(
11757
- Tooltip,
11758
- {
11759
- content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
11760
- var _a3, _b2, _c2;
11761
- return /* @__PURE__ */ jsx(
11762
- "li",
11763
- {
11764
- children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
11765
- },
11766
- item.id
11767
- );
11768
- }) }),
11769
- children: /* @__PURE__ */ jsxs(
11770
- Badge,
11771
- {
11772
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11773
- size: "xsmall",
11774
- children: [
11775
- /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
11776
- /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
11777
- items.reduce(
11778
- (acc, item) => acc + item.quantity,
11779
- 0
11780
- ),
11781
- "x",
11782
- " ",
11783
- pluralize(items.length, "items", "item")
11784
- ] })
11785
- ]
11786
- }
11787
- )
11788
- }
11789
- ),
11790
- /* @__PURE__ */ jsx(
11791
- Tooltip,
11792
- {
11793
- content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
11794
- children: /* @__PURE__ */ jsxs(
11795
- Badge,
11796
- {
11797
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11798
- size: "xsmall",
11799
- children: [
11800
- /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
11801
- /* @__PURE__ */ jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
11802
- ]
11803
- }
11804
- )
11805
- }
11806
- ),
11807
- /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
11808
- Badge,
11809
- {
11810
- className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
11811
- size: "xsmall",
11812
- children: [
11813
- /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
11814
- /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
11815
- ]
11816
- }
11817
- ) })
11818
- ] })
11819
- ] }),
11820
- shippingOption ? /* @__PURE__ */ jsx(
11821
- ActionMenu,
11822
- {
11823
- groups: [
11824
- {
11825
- actions: [
11826
- hasItems ? {
11827
- label: "Edit shipping option",
11828
- icon: /* @__PURE__ */ jsx(Channels, {}),
11829
- onClick: () => {
11830
- setIsOpen(
11831
- STACKED_FOCUS_MODAL_ID,
11832
- true
11833
- );
11834
- setData({
11835
- shippingProfileId: profile.id,
11836
- shippingOption,
11837
- shippingMethod
11838
- });
11839
- }
11840
- } : void 0,
11841
- {
11842
- label: "Remove shipping option",
11843
- icon: /* @__PURE__ */ jsx(Trash, {}),
11844
- onClick: () => {
11845
- if (shippingMethod) {
11846
- if (addShippingMethodAction) {
11847
- removeActionShippingMethod(
11848
- addShippingMethodAction.id
11849
- );
11850
- } else {
11851
- removeShippingMethod(
11852
- shippingMethod.id
11853
- );
11854
- }
11855
- }
11856
- }
11857
- }
11858
- ].filter(Boolean)
11859
- }
11860
- ]
11861
- }
11862
- ) : /* @__PURE__ */ jsx(
11863
- StackedModalTrigger,
11864
- {
11865
- shippingProfileId: profile.id,
11866
- shippingOption,
11867
- shippingMethod,
11868
- setData,
11869
- children: "Add shipping option"
11870
- }
11871
- )
11872
- ] }),
11873
- /* @__PURE__ */ jsxs(Accordion.Content, { children: [
11874
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11875
- items.map((item, idx) => {
11876
- var _a3, _b2, _c2, _d2, _e2;
11877
- return /* @__PURE__ */ jsxs("div", { children: [
11878
- /* @__PURE__ */ jsxs(
11879
- "div",
11880
- {
11881
- className: "px-3 flex items-center gap-x-3",
11882
- children: [
11883
- /* @__PURE__ */ jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(
11884
- Divider,
11885
- {
11886
- variant: "dashed",
11887
- orientation: "vertical"
11888
- }
11889
- ) }),
11890
- /* @__PURE__ */ jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
11891
- /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
11892
- Text,
11893
- {
11894
- size: "small",
11895
- leading: "compact",
11896
- className: "text-ui-fg-subtle",
11897
- children: [
11898
- item.quantity,
11899
- "x"
11900
- ]
11901
- }
11902
- ) }),
11903
- /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
11904
- /* @__PURE__ */ jsxs("div", { children: [
11905
- /* @__PURE__ */ jsxs(
11906
- Text,
11907
- {
11908
- size: "small",
11909
- leading: "compact",
11910
- weight: "plus",
11911
- children: [
11912
- (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
11913
- " (",
11914
- (_c2 = item.variant) == null ? void 0 : _c2.title,
11915
- ")"
11916
- ]
11917
- }
11918
- ),
11919
- /* @__PURE__ */ jsx(
11920
- Text,
11921
- {
11922
- size: "small",
11923
- leading: "compact",
11924
- className: "text-ui-fg-subtle",
11925
- children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
11926
- }
11927
- )
11928
- ] })
11929
- ] })
11930
- ]
11931
- },
11932
- item.id
11933
- ),
11934
- idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
11935
- ] }, item.id);
11936
- })
11937
- ] })
11938
- ]
11939
- },
11940
- profile.id
11941
- );
11942
- }) })
11943
- ] }) })
11944
- ] }) }),
11945
- /* @__PURE__ */ jsx(
11946
- StackedFocusModal,
11947
- {
11948
- id: STACKED_FOCUS_MODAL_ID,
11949
- onOpenChangeCallback: (open) => {
11950
- if (!open) {
11951
- setData(null);
11952
- }
11953
- return open;
11954
- },
11955
- children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
11956
- }
11957
- )
11552
+ };
11553
+ const schema$2 = objectType({
11554
+ sales_channel_id: stringType().min(1)
11555
+ });
11556
+ const ShippingAddress = () => {
11557
+ const { id } = useParams();
11558
+ const { order, isPending, isError, error } = useOrder(id, {
11559
+ fields: "+shipping_address"
11560
+ });
11561
+ if (isError) {
11562
+ throw error;
11563
+ }
11564
+ const isReady = !isPending && !!order;
11565
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11566
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11567
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11568
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11958
11569
  ] }),
11959
- /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
11960
- /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11961
- /* @__PURE__ */ jsx(
11962
- Button,
11963
- {
11964
- size: "small",
11965
- type: "button",
11966
- isLoading: isSubmitting,
11967
- onClick: onSubmit,
11968
- children: "Save"
11969
- }
11970
- )
11971
- ] }) })
11570
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11972
11571
  ] });
11973
11572
  };
11974
- const StackedModalTrigger = ({
11975
- shippingProfileId,
11976
- shippingOption,
11977
- shippingMethod,
11978
- setData,
11979
- children
11980
- }) => {
11981
- const { setIsOpen, getIsOpen } = useStackedModal();
11982
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
11983
- const onToggle = () => {
11984
- if (isOpen) {
11985
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11986
- setData(null);
11987
- } else {
11988
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
11989
- setData({
11990
- shippingProfileId,
11991
- shippingOption,
11992
- shippingMethod
11993
- });
11994
- }
11995
- };
11996
- return /* @__PURE__ */ jsx(
11997
- Button,
11998
- {
11999
- size: "small",
12000
- variant: "secondary",
12001
- onClick: onToggle,
12002
- className: "text-ui-fg-primary shrink-0",
12003
- children
12004
- }
12005
- );
12006
- };
12007
- const ShippingProfileForm = ({
12008
- data,
12009
- order,
12010
- preview
12011
- }) => {
12012
- var _a, _b, _c, _d, _e, _f;
12013
- const { setIsOpen } = useStackedModal();
11573
+ const ShippingAddressForm = ({ order }) => {
11574
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12014
11575
  const form = useForm({
12015
- resolver: zodResolver(shippingMethodSchema),
12016
11576
  defaultValues: {
12017
- location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12018
- shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12019
- custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12020
- }
11577
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11578
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11579
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11580
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11581
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11582
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11583
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11584
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11585
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11586
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11587
+ },
11588
+ resolver: zodResolver(schema$1)
12021
11589
  });
12022
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12023
- const {
12024
- mutateAsync: updateShippingMethod,
12025
- isPending: isUpdatingShippingMethod
12026
- } = useDraftOrderUpdateShippingMethod(order.id);
12027
- const onSubmit = form.handleSubmit(async (values) => {
12028
- if (isEqual(values, form.formState.defaultValues)) {
12029
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12030
- return;
12031
- }
12032
- if (data.shippingMethod) {
12033
- await updateShippingMethod(
12034
- {
12035
- method_id: data.shippingMethod.id,
12036
- shipping_option_id: values.shipping_option_id,
12037
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12038
- },
12039
- {
12040
- onError: (e) => {
12041
- toast.error(e.message);
12042
- },
12043
- onSuccess: () => {
12044
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12045
- }
12046
- }
12047
- );
12048
- return;
12049
- }
12050
- await addShippingMethod(
11590
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11591
+ const { handleSuccess } = useRouteModal();
11592
+ const onSubmit = form.handleSubmit(async (data) => {
11593
+ await mutateAsync(
12051
11594
  {
12052
- shipping_option_id: values.shipping_option_id,
12053
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
11595
+ shipping_address: {
11596
+ first_name: data.first_name,
11597
+ last_name: data.last_name,
11598
+ company: data.company,
11599
+ address_1: data.address_1,
11600
+ address_2: data.address_2,
11601
+ city: data.city,
11602
+ province: data.province,
11603
+ country_code: data.country_code,
11604
+ postal_code: data.postal_code,
11605
+ phone: data.phone
11606
+ }
12054
11607
  },
12055
11608
  {
12056
- onError: (e) => {
12057
- toast.error(e.message);
12058
- },
12059
11609
  onSuccess: () => {
12060
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
11610
+ handleSuccess();
11611
+ },
11612
+ onError: (error) => {
11613
+ toast.error(error.message);
12061
11614
  }
12062
11615
  }
12063
11616
  );
12064
11617
  });
12065
- return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
11618
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12066
11619
  KeyboundForm,
12067
11620
  {
12068
- className: "flex h-full flex-col overflow-hidden",
11621
+ className: "flex flex-1 flex-col overflow-hidden",
12069
11622
  onSubmit,
12070
11623
  children: [
12071
- /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12072
- /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12073
- /* @__PURE__ */ jsxs("div", { children: [
12074
- /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12075
- /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12076
- ] }),
12077
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11624
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12078
11625
  /* @__PURE__ */ jsx(
12079
- LocationField,
11626
+ Form$2.Field,
12080
11627
  {
12081
11628
  control: form.control,
12082
- setValue: form.setValue
12083
- }
12084
- ),
12085
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12086
- /* @__PURE__ */ jsx(
12087
- ShippingOptionField,
12088
- {
12089
- shippingProfileId: data.shippingProfileId,
12090
- preview,
12091
- control: form.control
11629
+ name: "country_code",
11630
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11631
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11632
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11633
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11634
+ ] })
12092
11635
  }
12093
11636
  ),
12094
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11637
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11638
+ /* @__PURE__ */ jsx(
11639
+ Form$2.Field,
11640
+ {
11641
+ control: form.control,
11642
+ name: "first_name",
11643
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11644
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11645
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11646
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11647
+ ] })
11648
+ }
11649
+ ),
11650
+ /* @__PURE__ */ jsx(
11651
+ Form$2.Field,
11652
+ {
11653
+ control: form.control,
11654
+ name: "last_name",
11655
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11656
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11657
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11658
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11659
+ ] })
11660
+ }
11661
+ )
11662
+ ] }),
12095
11663
  /* @__PURE__ */ jsx(
12096
- CustomAmountField,
11664
+ Form$2.Field,
12097
11665
  {
12098
11666
  control: form.control,
12099
- currencyCode: order.currency_code
11667
+ name: "company",
11668
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11669
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11670
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11671
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11672
+ ] })
12100
11673
  }
12101
11674
  ),
12102
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12103
11675
  /* @__PURE__ */ jsx(
12104
- ItemsPreview,
11676
+ Form$2.Field,
12105
11677
  {
12106
- order,
12107
- shippingProfileId: data.shippingProfileId
11678
+ control: form.control,
11679
+ name: "address_1",
11680
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11681
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11682
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11683
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11684
+ ] })
12108
11685
  }
12109
- )
12110
- ] }) }) }),
12111
- /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12112
- /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
11686
+ ),
12113
11687
  /* @__PURE__ */ jsx(
12114
- Button,
11688
+ Form$2.Field,
12115
11689
  {
12116
- size: "small",
12117
- type: "submit",
12118
- isLoading: isPending || isUpdatingShippingMethod,
12119
- children: data.shippingMethod ? "Update" : "Add"
12120
- }
12121
- )
12122
- ] }) })
12123
- ]
12124
- }
12125
- ) }) });
12126
- };
12127
- const shippingMethodSchema = objectType({
12128
- location_id: stringType(),
12129
- shipping_option_id: stringType(),
12130
- custom_amount: unionType([numberType(), stringType()]).optional()
12131
- });
12132
- const ItemsPreview = ({ order, shippingProfileId }) => {
12133
- const matches = order.items.filter(
12134
- (item) => {
12135
- var _a, _b, _c;
12136
- return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12137
- }
12138
- );
12139
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12140
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12141
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12142
- /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12143
- ] }) }),
12144
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12145
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12146
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12147
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12148
- ] }),
12149
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
12150
- "div",
12151
- {
12152
- className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12153
- children: [
12154
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12155
- /* @__PURE__ */ jsx(
12156
- Thumbnail,
12157
- {
12158
- thumbnail: item.thumbnail,
12159
- alt: item.product_title ?? void 0
12160
- }
12161
- ),
12162
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12163
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12164
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12165
- /* @__PURE__ */ jsxs(
12166
- Text,
12167
- {
12168
- size: "small",
12169
- leading: "compact",
12170
- className: "text-ui-fg-subtle",
12171
- children: [
12172
- "(",
12173
- item.variant_title,
12174
- ")"
12175
- ]
12176
- }
12177
- )
12178
- ] }),
12179
- /* @__PURE__ */ jsx(
12180
- Text,
12181
- {
12182
- size: "small",
12183
- leading: "compact",
12184
- className: "text-ui-fg-subtle",
12185
- children: item.variant_sku
12186
- }
12187
- )
11690
+ control: form.control,
11691
+ name: "address_2",
11692
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11693
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11694
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11695
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12188
11696
  ] })
12189
- ] }),
12190
- /* @__PURE__ */ jsxs(
12191
- Text,
11697
+ }
11698
+ ),
11699
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11700
+ /* @__PURE__ */ jsx(
11701
+ Form$2.Field,
12192
11702
  {
12193
- size: "small",
12194
- leading: "compact",
12195
- className: "text-ui-fg-subtle",
12196
- children: [
12197
- item.quantity,
12198
- "x"
12199
- ]
11703
+ control: form.control,
11704
+ name: "postal_code",
11705
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11706
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11707
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11708
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11709
+ ] })
11710
+ }
11711
+ ),
11712
+ /* @__PURE__ */ jsx(
11713
+ Form$2.Field,
11714
+ {
11715
+ control: form.control,
11716
+ name: "city",
11717
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11718
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11719
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11720
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11721
+ ] })
12200
11722
  }
12201
11723
  )
12202
- ]
12203
- },
12204
- item.id
12205
- )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12206
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12207
- /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12208
- 'No items found for "',
12209
- query,
12210
- '".'
12211
- ] })
12212
- ] }) })
12213
- ] })
12214
- ] });
12215
- };
12216
- const LocationField = ({ control, setValue }) => {
12217
- const locations = useComboboxData({
12218
- queryKey: ["locations"],
12219
- queryFn: async (params) => {
12220
- return await sdk.admin.stockLocation.list(params);
12221
- },
12222
- getOptions: (data) => {
12223
- return data.stock_locations.map((location) => ({
12224
- label: location.name,
12225
- value: location.id
12226
- }));
12227
- }
12228
- });
12229
- return /* @__PURE__ */ jsx(
12230
- Form$2.Field,
12231
- {
12232
- control,
12233
- name: "location_id",
12234
- render: ({ field: { onChange, ...field } }) => {
12235
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12236
- /* @__PURE__ */ jsxs("div", { children: [
12237
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12238
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
12239
11724
  ] }),
12240
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12241
- Combobox,
11725
+ /* @__PURE__ */ jsx(
11726
+ Form$2.Field,
12242
11727
  {
12243
- options: locations.options,
12244
- fetchNextPage: locations.fetchNextPage,
12245
- isFetchingNextPage: locations.isFetchingNextPage,
12246
- searchValue: locations.searchValue,
12247
- onSearchValueChange: locations.onSearchValueChange,
12248
- placeholder: "Select location",
12249
- onChange: (value) => {
12250
- setValue("shipping_option_id", "", {
12251
- shouldDirty: true,
12252
- shouldTouch: true
12253
- });
12254
- onChange(value);
12255
- },
12256
- ...field
12257
- }
12258
- ) })
12259
- ] }) });
12260
- }
12261
- }
12262
- );
12263
- };
12264
- const ShippingOptionField = ({
12265
- shippingProfileId,
12266
- preview,
12267
- control
12268
- }) => {
12269
- var _a;
12270
- const locationId = useWatch({ control, name: "location_id" });
12271
- const shippingOptions = useComboboxData({
12272
- queryKey: ["shipping_options", locationId, shippingProfileId],
12273
- queryFn: async (params) => {
12274
- return await sdk.admin.shippingOption.list({
12275
- ...params,
12276
- stock_location_id: locationId,
12277
- shipping_profile_id: shippingProfileId
12278
- });
12279
- },
12280
- getOptions: (data) => {
12281
- return data.shipping_options.map((option) => {
12282
- var _a2;
12283
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12284
- (r) => r.attribute === "is_return" && r.value === "true"
12285
- )) {
12286
- return void 0;
12287
- }
12288
- return {
12289
- label: option.name,
12290
- value: option.id
12291
- };
12292
- }).filter(Boolean);
12293
- },
12294
- enabled: !!locationId && !!shippingProfileId,
12295
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12296
- });
12297
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12298
- return /* @__PURE__ */ jsx(
12299
- Form$2.Field,
12300
- {
12301
- control,
12302
- name: "shipping_option_id",
12303
- render: ({ field }) => {
12304
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12305
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12306
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12307
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12308
- ] }),
11728
+ control: form.control,
11729
+ name: "province",
11730
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11731
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11732
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11733
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11734
+ ] })
11735
+ }
11736
+ ),
12309
11737
  /* @__PURE__ */ jsx(
12310
- ConditionalTooltip,
11738
+ Form$2.Field,
12311
11739
  {
12312
- content: tooltipContent,
12313
- showTooltip: !locationId || !shippingProfileId,
12314
- children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12315
- Combobox,
12316
- {
12317
- options: shippingOptions.options,
12318
- fetchNextPage: shippingOptions.fetchNextPage,
12319
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12320
- searchValue: shippingOptions.searchValue,
12321
- onSearchValueChange: shippingOptions.onSearchValueChange,
12322
- placeholder: "Select shipping option",
12323
- ...field,
12324
- disabled: !locationId || !shippingProfileId
12325
- }
12326
- ) }) })
11740
+ control: form.control,
11741
+ name: "phone",
11742
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11743
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11744
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11745
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11746
+ ] })
12327
11747
  }
12328
11748
  )
12329
- ] }) });
12330
- }
12331
- }
12332
- );
12333
- };
12334
- const CustomAmountField = ({
12335
- control,
12336
- currencyCode
12337
- }) => {
12338
- return /* @__PURE__ */ jsx(
12339
- Form$2.Field,
12340
- {
12341
- control,
12342
- name: "custom_amount",
12343
- render: ({ field: { onChange, ...field } }) => {
12344
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12345
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12346
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12347
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12348
- ] }),
12349
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12350
- CurrencyInput,
12351
- {
12352
- ...field,
12353
- onValueChange: (value) => onChange(value),
12354
- symbol: getNativeSymbol(currencyCode),
12355
- code: currencyCode
12356
- }
12357
- ) })
12358
- ] });
12359
- }
11749
+ ] }) }),
11750
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11751
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11752
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11753
+ ] }) })
11754
+ ]
12360
11755
  }
12361
- );
11756
+ ) });
12362
11757
  };
11758
+ const schema$1 = addressSchema;
12363
11759
  const TransferOwnership = () => {
12364
11760
  const { id } = useParams();
12365
11761
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12383,7 +11779,7 @@ const TransferOwnershipForm = ({ order }) => {
12383
11779
  defaultValues: {
12384
11780
  customer_id: order.customer_id || ""
12385
11781
  },
12386
- resolver: zodResolver(schema$1)
11782
+ resolver: zodResolver(schema)
12387
11783
  });
12388
11784
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12389
11785
  const { handleSuccess } = useRouteModal();
@@ -12827,218 +12223,822 @@ const Illustration = () => {
12827
12223
  fill: "white",
12828
12224
  transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
12829
12225
  }
12830
- ) })
12831
- ] })
12832
- ]
12226
+ ) })
12227
+ ] })
12228
+ ]
12229
+ }
12230
+ );
12231
+ };
12232
+ const schema = objectType({
12233
+ customer_id: stringType().min(1)
12234
+ });
12235
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
12236
+ const Shipping = () => {
12237
+ var _a;
12238
+ const { id } = useParams();
12239
+ const { order, isPending, isError, error } = useOrder(id, {
12240
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
12241
+ });
12242
+ const {
12243
+ order: preview,
12244
+ isPending: isPreviewPending,
12245
+ isError: isPreviewError,
12246
+ error: previewError
12247
+ } = useOrderPreview(id);
12248
+ useInitiateOrderEdit({ preview });
12249
+ const { onCancel } = useCancelOrderEdit({ preview });
12250
+ if (isError) {
12251
+ throw error;
12252
+ }
12253
+ if (isPreviewError) {
12254
+ throw previewError;
12255
+ }
12256
+ const orderHasItems = (((_a = order == null ? void 0 : order.items) == null ? void 0 : _a.length) || 0) > 0;
12257
+ const isReady = preview && !isPreviewPending && order && !isPending;
12258
+ return /* @__PURE__ */ jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
12259
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
12260
+ /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12261
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12262
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
12263
+ ] }) }) }),
12264
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
12265
+ ] }) : isReady ? /* @__PURE__ */ jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxs("div", { children: [
12266
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
12267
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
12268
+ ] }) });
12269
+ };
12270
+ const ShippingForm = ({ preview, order }) => {
12271
+ var _a;
12272
+ const { setIsOpen } = useStackedModal();
12273
+ const [isSubmitting, setIsSubmitting] = useState(false);
12274
+ const [data, setData] = useState(null);
12275
+ const appliedShippingOptionIds = (_a = preview.shipping_methods) == null ? void 0 : _a.map((method) => method.shipping_option_id).filter(Boolean);
12276
+ const { shipping_options } = useShippingOptions(
12277
+ {
12278
+ id: appliedShippingOptionIds,
12279
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
12280
+ },
12281
+ {
12282
+ enabled: appliedShippingOptionIds.length > 0
12283
+ }
12284
+ );
12285
+ const uniqueShippingProfiles = useMemo(() => {
12286
+ const profiles = /* @__PURE__ */ new Map();
12287
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
12288
+ profiles.set(profile.id, profile);
12289
+ });
12290
+ shipping_options == null ? void 0 : shipping_options.forEach((option) => {
12291
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
12292
+ });
12293
+ return Array.from(profiles.values());
12294
+ }, [order.items, shipping_options]);
12295
+ const { handleSuccess } = useRouteModal();
12296
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
12297
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
12298
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
12299
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
12300
+ const onSubmit = async () => {
12301
+ setIsSubmitting(true);
12302
+ let requestSucceeded = false;
12303
+ await requestOrderEdit(void 0, {
12304
+ onError: (e) => {
12305
+ toast.error(`Failed to request order edit: ${e.message}`);
12306
+ },
12307
+ onSuccess: () => {
12308
+ requestSucceeded = true;
12309
+ }
12310
+ });
12311
+ if (!requestSucceeded) {
12312
+ setIsSubmitting(false);
12313
+ return;
12314
+ }
12315
+ await confirmOrderEdit(void 0, {
12316
+ onError: (e) => {
12317
+ toast.error(`Failed to confirm order edit: ${e.message}`);
12318
+ },
12319
+ onSuccess: () => {
12320
+ handleSuccess();
12321
+ },
12322
+ onSettled: () => {
12323
+ setIsSubmitting(false);
12324
+ }
12325
+ });
12326
+ };
12327
+ const onKeydown = useCallback(
12328
+ (e) => {
12329
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
12330
+ if (data || isSubmitting) {
12331
+ return;
12332
+ }
12333
+ onSubmit();
12334
+ }
12335
+ },
12336
+ [data, isSubmitting, onSubmit]
12337
+ );
12338
+ useEffect(() => {
12339
+ document.addEventListener("keydown", onKeydown);
12340
+ return () => {
12341
+ document.removeEventListener("keydown", onKeydown);
12342
+ };
12343
+ }, [onKeydown]);
12344
+ return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
12345
+ /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
12346
+ /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
12347
+ /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12348
+ /* @__PURE__ */ jsxs("div", { children: [
12349
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12350
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
12351
+ ] }),
12352
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12353
+ /* @__PURE__ */ jsx(Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-xl shadow-elevation-card-rest", children: [
12354
+ /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 flex items-center justify-between", children: [
12355
+ /* @__PURE__ */ jsx(
12356
+ Text,
12357
+ {
12358
+ size: "xsmall",
12359
+ weight: "plus",
12360
+ className: "text-ui-fg-muted",
12361
+ children: "Shipping profile"
12362
+ }
12363
+ ),
12364
+ /* @__PURE__ */ jsx(
12365
+ Text,
12366
+ {
12367
+ size: "xsmall",
12368
+ weight: "plus",
12369
+ className: "text-ui-fg-muted",
12370
+ children: "Action"
12371
+ }
12372
+ )
12373
+ ] }),
12374
+ /* @__PURE__ */ jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
12375
+ var _a2, _b, _c, _d, _e, _f, _g;
12376
+ const items = getItemsWithShippingProfile(
12377
+ profile.id,
12378
+ order.items
12379
+ );
12380
+ const hasItems = items.length > 0;
12381
+ const shippingOption = shipping_options == null ? void 0 : shipping_options.find(
12382
+ (option) => option.shipping_profile_id === profile.id
12383
+ );
12384
+ const shippingMethod = preview.shipping_methods.find(
12385
+ (method) => method.shipping_option_id === (shippingOption == null ? void 0 : shippingOption.id)
12386
+ );
12387
+ const addShippingMethodAction = (_a2 = shippingMethod == null ? void 0 : shippingMethod.actions) == null ? void 0 : _a2.find(
12388
+ (action) => action.action === "SHIPPING_ADD"
12389
+ );
12390
+ return /* @__PURE__ */ jsxs(
12391
+ Accordion.Item,
12392
+ {
12393
+ value: profile.id,
12394
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
12395
+ children: [
12396
+ /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 flex items-center justify-between gap-3", children: [
12397
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 w-full overflow-hidden", children: [
12398
+ /* @__PURE__ */ jsx(Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
12399
+ IconButton,
12400
+ {
12401
+ size: "2xsmall",
12402
+ variant: "transparent",
12403
+ className: "group/trigger",
12404
+ disabled: !hasItems,
12405
+ children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "group-data-[state=open]/trigger:rotate-90 transition-transform" })
12406
+ }
12407
+ ) }),
12408
+ !shippingOption ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12409
+ /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md shadow-borders-base flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ui-bg-component-hover flex items-center justify-center", children: /* @__PURE__ */ jsx(Shopping, { className: "text-ui-fg-subtle" }) }) }),
12410
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
12411
+ /* @__PURE__ */ jsx(
12412
+ Text,
12413
+ {
12414
+ size: "small",
12415
+ weight: "plus",
12416
+ leading: "compact",
12417
+ children: profile.name
12418
+ }
12419
+ ),
12420
+ /* @__PURE__ */ jsxs(
12421
+ Text,
12422
+ {
12423
+ size: "small",
12424
+ leading: "compact",
12425
+ className: "text-ui-fg-subtle",
12426
+ children: [
12427
+ items.length,
12428
+ " ",
12429
+ pluralize(items.length, "items", "item")
12430
+ ]
12431
+ }
12432
+ )
12433
+ ] })
12434
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[5px] max-sm:flex-col max-sm:items-start flex-1 w-full overflow-hidden", children: [
12435
+ /* @__PURE__ */ jsx(
12436
+ Tooltip,
12437
+ {
12438
+ content: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
12439
+ var _a3, _b2, _c2;
12440
+ return /* @__PURE__ */ jsx(
12441
+ "li",
12442
+ {
12443
+ children: `${item.quantity}x ${(_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title} (${(_c2 = item.variant) == null ? void 0 : _c2.title})`
12444
+ },
12445
+ item.id
12446
+ );
12447
+ }) }),
12448
+ children: /* @__PURE__ */ jsxs(
12449
+ Badge,
12450
+ {
12451
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12452
+ size: "xsmall",
12453
+ children: [
12454
+ /* @__PURE__ */ jsx(Shopping, { className: "shrink-0" }),
12455
+ /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
12456
+ items.reduce(
12457
+ (acc, item) => acc + item.quantity,
12458
+ 0
12459
+ ),
12460
+ "x",
12461
+ " ",
12462
+ pluralize(items.length, "items", "item")
12463
+ ] })
12464
+ ]
12465
+ }
12466
+ )
12467
+ }
12468
+ ),
12469
+ /* @__PURE__ */ jsx(
12470
+ Tooltip,
12471
+ {
12472
+ content: (_d = (_c = (_b = shippingOption.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.name,
12473
+ children: /* @__PURE__ */ jsxs(
12474
+ Badge,
12475
+ {
12476
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12477
+ size: "xsmall",
12478
+ children: [
12479
+ /* @__PURE__ */ jsx(Buildings, { className: "shrink-0" }),
12480
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: (_g = (_f = (_e = shippingOption.service_zone) == null ? void 0 : _e.fulfillment_set) == null ? void 0 : _f.location) == null ? void 0 : _g.name })
12481
+ ]
12482
+ }
12483
+ )
12484
+ }
12485
+ ),
12486
+ /* @__PURE__ */ jsx(Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxs(
12487
+ Badge,
12488
+ {
12489
+ className: "flex items-center gap-x-[3px] overflow-hidden cursor-default",
12490
+ size: "xsmall",
12491
+ children: [
12492
+ /* @__PURE__ */ jsx(TruckFast, { className: "shrink-0" }),
12493
+ /* @__PURE__ */ jsx("span", { className: "truncate", children: shippingOption.name })
12494
+ ]
12495
+ }
12496
+ ) })
12497
+ ] })
12498
+ ] }),
12499
+ shippingOption ? /* @__PURE__ */ jsx(
12500
+ ActionMenu,
12501
+ {
12502
+ groups: [
12503
+ {
12504
+ actions: [
12505
+ hasItems ? {
12506
+ label: "Edit shipping option",
12507
+ icon: /* @__PURE__ */ jsx(Channels, {}),
12508
+ onClick: () => {
12509
+ setIsOpen(
12510
+ STACKED_FOCUS_MODAL_ID,
12511
+ true
12512
+ );
12513
+ setData({
12514
+ shippingProfileId: profile.id,
12515
+ shippingOption,
12516
+ shippingMethod
12517
+ });
12518
+ }
12519
+ } : void 0,
12520
+ {
12521
+ label: "Remove shipping option",
12522
+ icon: /* @__PURE__ */ jsx(Trash, {}),
12523
+ onClick: () => {
12524
+ if (shippingMethod) {
12525
+ if (addShippingMethodAction) {
12526
+ removeActionShippingMethod(
12527
+ addShippingMethodAction.id
12528
+ );
12529
+ } else {
12530
+ removeShippingMethod(
12531
+ shippingMethod.id
12532
+ );
12533
+ }
12534
+ }
12535
+ }
12536
+ }
12537
+ ].filter(Boolean)
12538
+ }
12539
+ ]
12540
+ }
12541
+ ) : /* @__PURE__ */ jsx(
12542
+ StackedModalTrigger,
12543
+ {
12544
+ shippingProfileId: profile.id,
12545
+ shippingOption,
12546
+ shippingMethod,
12547
+ setData,
12548
+ children: "Add shipping option"
12549
+ }
12550
+ )
12551
+ ] }),
12552
+ /* @__PURE__ */ jsxs(Accordion.Content, { children: [
12553
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12554
+ items.map((item, idx) => {
12555
+ var _a3, _b2, _c2, _d2, _e2;
12556
+ return /* @__PURE__ */ jsxs("div", { children: [
12557
+ /* @__PURE__ */ jsxs(
12558
+ "div",
12559
+ {
12560
+ className: "px-3 flex items-center gap-x-3",
12561
+ children: [
12562
+ /* @__PURE__ */ jsx("div", { className: "w-5 h-[56px] flex flex-col justify-center items-center", children: /* @__PURE__ */ jsx(
12563
+ Divider,
12564
+ {
12565
+ variant: "dashed",
12566
+ orientation: "vertical"
12567
+ }
12568
+ ) }),
12569
+ /* @__PURE__ */ jsxs("div", { className: "py-2 flex items-center gap-x-3", children: [
12570
+ /* @__PURE__ */ jsx("div", { className: "size-7 flex items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxs(
12571
+ Text,
12572
+ {
12573
+ size: "small",
12574
+ leading: "compact",
12575
+ className: "text-ui-fg-subtle",
12576
+ children: [
12577
+ item.quantity,
12578
+ "x"
12579
+ ]
12580
+ }
12581
+ ) }),
12582
+ /* @__PURE__ */ jsx(Thumbnail, { thumbnail: item.thumbnail }),
12583
+ /* @__PURE__ */ jsxs("div", { children: [
12584
+ /* @__PURE__ */ jsxs(
12585
+ Text,
12586
+ {
12587
+ size: "small",
12588
+ leading: "compact",
12589
+ weight: "plus",
12590
+ children: [
12591
+ (_b2 = (_a3 = item.variant) == null ? void 0 : _a3.product) == null ? void 0 : _b2.title,
12592
+ " (",
12593
+ (_c2 = item.variant) == null ? void 0 : _c2.title,
12594
+ ")"
12595
+ ]
12596
+ }
12597
+ ),
12598
+ /* @__PURE__ */ jsx(
12599
+ Text,
12600
+ {
12601
+ size: "small",
12602
+ leading: "compact",
12603
+ className: "text-ui-fg-subtle",
12604
+ children: (_e2 = (_d2 = item.variant) == null ? void 0 : _d2.options) == null ? void 0 : _e2.map((option) => option.value).join(" · ")
12605
+ }
12606
+ )
12607
+ ] })
12608
+ ] })
12609
+ ]
12610
+ },
12611
+ item.id
12612
+ ),
12613
+ idx !== items.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "dashed" })
12614
+ ] }, item.id);
12615
+ })
12616
+ ] })
12617
+ ]
12618
+ },
12619
+ profile.id
12620
+ );
12621
+ }) })
12622
+ ] }) })
12623
+ ] }) }),
12624
+ /* @__PURE__ */ jsx(
12625
+ StackedFocusModal,
12626
+ {
12627
+ id: STACKED_FOCUS_MODAL_ID,
12628
+ onOpenChangeCallback: (open) => {
12629
+ if (!open) {
12630
+ setData(null);
12631
+ }
12632
+ return open;
12633
+ },
12634
+ children: data && /* @__PURE__ */ jsx(ShippingProfileForm, { data, order, preview })
12635
+ }
12636
+ )
12637
+ ] }),
12638
+ /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12639
+ /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12640
+ /* @__PURE__ */ jsx(
12641
+ Button,
12642
+ {
12643
+ size: "small",
12644
+ type: "button",
12645
+ isLoading: isSubmitting,
12646
+ onClick: onSubmit,
12647
+ children: "Save"
12648
+ }
12649
+ )
12650
+ ] }) })
12651
+ ] });
12652
+ };
12653
+ const StackedModalTrigger = ({
12654
+ shippingProfileId,
12655
+ shippingOption,
12656
+ shippingMethod,
12657
+ setData,
12658
+ children
12659
+ }) => {
12660
+ const { setIsOpen, getIsOpen } = useStackedModal();
12661
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
12662
+ const onToggle = () => {
12663
+ if (isOpen) {
12664
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12665
+ setData(null);
12666
+ } else {
12667
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
12668
+ setData({
12669
+ shippingProfileId,
12670
+ shippingOption,
12671
+ shippingMethod
12672
+ });
12673
+ }
12674
+ };
12675
+ return /* @__PURE__ */ jsx(
12676
+ Button,
12677
+ {
12678
+ size: "small",
12679
+ variant: "secondary",
12680
+ onClick: onToggle,
12681
+ className: "text-ui-fg-primary shrink-0",
12682
+ children
12833
12683
  }
12834
12684
  );
12835
12685
  };
12836
- const schema$1 = objectType({
12837
- customer_id: stringType().min(1)
12838
- });
12839
- const ShippingAddress = () => {
12840
- const { id } = useParams();
12841
- const { order, isPending, isError, error } = useOrder(id, {
12842
- fields: "+shipping_address"
12843
- });
12844
- if (isError) {
12845
- throw error;
12846
- }
12847
- const isReady = !isPending && !!order;
12848
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12849
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12850
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12851
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12852
- ] }),
12853
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12854
- ] });
12855
- };
12856
- const ShippingAddressForm = ({ order }) => {
12857
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12686
+ const ShippingProfileForm = ({
12687
+ data,
12688
+ order,
12689
+ preview
12690
+ }) => {
12691
+ var _a, _b, _c, _d, _e, _f;
12692
+ const { setIsOpen } = useStackedModal();
12858
12693
  const form = useForm({
12694
+ resolver: zodResolver(shippingMethodSchema),
12859
12695
  defaultValues: {
12860
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12861
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12862
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12863
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12864
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12865
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12866
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12867
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12868
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12869
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12870
- },
12871
- resolver: zodResolver(schema)
12696
+ location_id: (_d = (_c = (_b = (_a = data.shippingOption) == null ? void 0 : _a.service_zone) == null ? void 0 : _b.fulfillment_set) == null ? void 0 : _c.location) == null ? void 0 : _d.id,
12697
+ shipping_option_id: (_e = data.shippingOption) == null ? void 0 : _e.id,
12698
+ custom_amount: (_f = data.shippingMethod) == null ? void 0 : _f.amount
12699
+ }
12872
12700
  });
12873
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12874
- const { handleSuccess } = useRouteModal();
12875
- const onSubmit = form.handleSubmit(async (data) => {
12876
- await mutateAsync(
12877
- {
12878
- shipping_address: {
12879
- first_name: data.first_name,
12880
- last_name: data.last_name,
12881
- company: data.company,
12882
- address_1: data.address_1,
12883
- address_2: data.address_2,
12884
- city: data.city,
12885
- province: data.province,
12886
- country_code: data.country_code,
12887
- postal_code: data.postal_code,
12888
- phone: data.phone
12701
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
12702
+ const {
12703
+ mutateAsync: updateShippingMethod,
12704
+ isPending: isUpdatingShippingMethod
12705
+ } = useDraftOrderUpdateShippingMethod(order.id);
12706
+ const onSubmit = form.handleSubmit(async (values) => {
12707
+ if (isEqual(values, form.formState.defaultValues)) {
12708
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12709
+ return;
12710
+ }
12711
+ if (data.shippingMethod) {
12712
+ await updateShippingMethod(
12713
+ {
12714
+ method_id: data.shippingMethod.id,
12715
+ shipping_option_id: values.shipping_option_id,
12716
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12717
+ },
12718
+ {
12719
+ onError: (e) => {
12720
+ toast.error(e.message);
12721
+ },
12722
+ onSuccess: () => {
12723
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12724
+ }
12889
12725
  }
12726
+ );
12727
+ return;
12728
+ }
12729
+ await addShippingMethod(
12730
+ {
12731
+ shipping_option_id: values.shipping_option_id,
12732
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
12890
12733
  },
12891
12734
  {
12892
- onSuccess: () => {
12893
- handleSuccess();
12735
+ onError: (e) => {
12736
+ toast.error(e.message);
12894
12737
  },
12895
- onError: (error) => {
12896
- toast.error(error.message);
12738
+ onSuccess: () => {
12739
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
12897
12740
  }
12898
12741
  }
12899
12742
  );
12900
12743
  });
12901
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12744
+ return /* @__PURE__ */ jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxs(
12902
12745
  KeyboundForm,
12903
12746
  {
12904
- className: "flex flex-1 flex-col overflow-hidden",
12747
+ className: "flex h-full flex-col overflow-hidden",
12905
12748
  onSubmit,
12906
12749
  children: [
12907
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12750
+ /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
12751
+ /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 py-16 px-6", children: [
12752
+ /* @__PURE__ */ jsxs("div", { children: [
12753
+ /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Shipping" }) }),
12754
+ /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Add a shipping method for the selected shipping profile. You can see the items that will be shipped using this method in the preview below." }) })
12755
+ ] }),
12756
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12908
12757
  /* @__PURE__ */ jsx(
12909
- Form$2.Field,
12758
+ LocationField,
12910
12759
  {
12911
12760
  control: form.control,
12912
- name: "country_code",
12913
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12914
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12915
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12916
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12917
- ] })
12761
+ setValue: form.setValue
12918
12762
  }
12919
12763
  ),
12920
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12921
- /* @__PURE__ */ jsx(
12922
- Form$2.Field,
12923
- {
12924
- control: form.control,
12925
- name: "first_name",
12926
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12927
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12928
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12929
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12930
- ] })
12931
- }
12932
- ),
12933
- /* @__PURE__ */ jsx(
12934
- Form$2.Field,
12935
- {
12936
- control: form.control,
12937
- name: "last_name",
12938
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12939
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12940
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12941
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12942
- ] })
12943
- }
12944
- )
12945
- ] }),
12764
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12946
12765
  /* @__PURE__ */ jsx(
12947
- Form$2.Field,
12766
+ ShippingOptionField,
12948
12767
  {
12949
- control: form.control,
12950
- name: "company",
12951
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12952
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12953
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12954
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12955
- ] })
12768
+ shippingProfileId: data.shippingProfileId,
12769
+ preview,
12770
+ control: form.control
12956
12771
  }
12957
12772
  ),
12773
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12958
12774
  /* @__PURE__ */ jsx(
12959
- Form$2.Field,
12775
+ CustomAmountField,
12960
12776
  {
12961
12777
  control: form.control,
12962
- name: "address_1",
12963
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12964
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12965
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12966
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12967
- ] })
12778
+ currencyCode: order.currency_code
12968
12779
  }
12969
12780
  ),
12781
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
12970
12782
  /* @__PURE__ */ jsx(
12971
- Form$2.Field,
12783
+ ItemsPreview,
12972
12784
  {
12973
- control: form.control,
12974
- name: "address_2",
12975
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12976
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12977
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12978
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12785
+ order,
12786
+ shippingProfileId: data.shippingProfileId
12787
+ }
12788
+ )
12789
+ ] }) }) }),
12790
+ /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-x-2", children: [
12791
+ /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12792
+ /* @__PURE__ */ jsx(
12793
+ Button,
12794
+ {
12795
+ size: "small",
12796
+ type: "submit",
12797
+ isLoading: isPending || isUpdatingShippingMethod,
12798
+ children: data.shippingMethod ? "Update" : "Add"
12799
+ }
12800
+ )
12801
+ ] }) })
12802
+ ]
12803
+ }
12804
+ ) }) });
12805
+ };
12806
+ const shippingMethodSchema = objectType({
12807
+ location_id: stringType(),
12808
+ shipping_option_id: stringType(),
12809
+ custom_amount: unionType([numberType(), stringType()]).optional()
12810
+ });
12811
+ const ItemsPreview = ({ order, shippingProfileId }) => {
12812
+ const matches = order.items.filter(
12813
+ (item) => {
12814
+ var _a, _b, _c;
12815
+ return ((_c = (_b = (_a = item.variant) == null ? void 0 : _a.product) == null ? void 0 : _b.shipping_profile) == null ? void 0 : _c.id) === shippingProfileId;
12816
+ }
12817
+ );
12818
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-6", children: [
12819
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12820
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
12821
+ /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
12822
+ ] }) }),
12823
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
12824
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-4 py-2 text-ui-fg-muted", children: [
12825
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Item" }) }),
12826
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Quantity" }) })
12827
+ ] }),
12828
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches == null ? void 0 : matches.map((item) => /* @__PURE__ */ jsxs(
12829
+ "div",
12830
+ {
12831
+ className: "grid grid-cols-2 gap-3 px-4 py-2 bg-ui-bg-base shadow-elevation-card-rest rounded-lg items-center",
12832
+ children: [
12833
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
12834
+ /* @__PURE__ */ jsx(
12835
+ Thumbnail,
12836
+ {
12837
+ thumbnail: item.thumbnail,
12838
+ alt: item.product_title ?? void 0
12839
+ }
12840
+ ),
12841
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12842
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
12843
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
12844
+ /* @__PURE__ */ jsxs(
12845
+ Text,
12846
+ {
12847
+ size: "small",
12848
+ leading: "compact",
12849
+ className: "text-ui-fg-subtle",
12850
+ children: [
12851
+ "(",
12852
+ item.variant_title,
12853
+ ")"
12854
+ ]
12855
+ }
12856
+ )
12857
+ ] }),
12858
+ /* @__PURE__ */ jsx(
12859
+ Text,
12860
+ {
12861
+ size: "small",
12862
+ leading: "compact",
12863
+ className: "text-ui-fg-subtle",
12864
+ children: item.variant_sku
12865
+ }
12866
+ )
12979
12867
  ] })
12980
- }
12981
- ),
12982
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12983
- /* @__PURE__ */ jsx(
12984
- Form$2.Field,
12985
- {
12986
- control: form.control,
12987
- name: "postal_code",
12988
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12989
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12990
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12991
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12992
- ] })
12993
- }
12994
- ),
12995
- /* @__PURE__ */ jsx(
12996
- Form$2.Field,
12868
+ ] }),
12869
+ /* @__PURE__ */ jsxs(
12870
+ Text,
12997
12871
  {
12998
- control: form.control,
12999
- name: "city",
13000
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13001
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
13002
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13003
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13004
- ] })
12872
+ size: "small",
12873
+ leading: "compact",
12874
+ className: "text-ui-fg-subtle",
12875
+ children: [
12876
+ item.quantity,
12877
+ "x"
12878
+ ]
13005
12879
  }
13006
12880
  )
12881
+ ]
12882
+ },
12883
+ item.id
12884
+ )) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-x-3 bg-ui-bg-base rounded-lg p-4 shadow-elevation-card-rest flex-col gap-1", children: [
12885
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
12886
+ /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle", children: [
12887
+ 'No items found for "',
12888
+ query,
12889
+ '".'
12890
+ ] })
12891
+ ] }) })
12892
+ ] })
12893
+ ] });
12894
+ };
12895
+ const LocationField = ({ control, setValue }) => {
12896
+ const locations = useComboboxData({
12897
+ queryKey: ["locations"],
12898
+ queryFn: async (params) => {
12899
+ return await sdk.admin.stockLocation.list(params);
12900
+ },
12901
+ getOptions: (data) => {
12902
+ return data.stock_locations.map((location) => ({
12903
+ label: location.name,
12904
+ value: location.id
12905
+ }));
12906
+ }
12907
+ });
12908
+ return /* @__PURE__ */ jsx(
12909
+ Form$2.Field,
12910
+ {
12911
+ control,
12912
+ name: "location_id",
12913
+ render: ({ field: { onChange, ...field } }) => {
12914
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12915
+ /* @__PURE__ */ jsxs("div", { children: [
12916
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Location" }),
12917
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
13007
12918
  ] }),
13008
- /* @__PURE__ */ jsx(
13009
- Form$2.Field,
12919
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12920
+ Combobox,
13010
12921
  {
13011
- control: form.control,
13012
- name: "province",
13013
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13014
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13015
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13016
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13017
- ] })
12922
+ options: locations.options,
12923
+ fetchNextPage: locations.fetchNextPage,
12924
+ isFetchingNextPage: locations.isFetchingNextPage,
12925
+ searchValue: locations.searchValue,
12926
+ onSearchValueChange: locations.onSearchValueChange,
12927
+ placeholder: "Select location",
12928
+ onChange: (value) => {
12929
+ setValue("shipping_option_id", "", {
12930
+ shouldDirty: true,
12931
+ shouldTouch: true
12932
+ });
12933
+ onChange(value);
12934
+ },
12935
+ ...field
13018
12936
  }
13019
- ),
12937
+ ) })
12938
+ ] }) });
12939
+ }
12940
+ }
12941
+ );
12942
+ };
12943
+ const ShippingOptionField = ({
12944
+ shippingProfileId,
12945
+ preview,
12946
+ control
12947
+ }) => {
12948
+ var _a;
12949
+ const locationId = useWatch({ control, name: "location_id" });
12950
+ const shippingOptions = useComboboxData({
12951
+ queryKey: ["shipping_options", locationId, shippingProfileId],
12952
+ queryFn: async (params) => {
12953
+ return await sdk.admin.shippingOption.list({
12954
+ ...params,
12955
+ stock_location_id: locationId,
12956
+ shipping_profile_id: shippingProfileId
12957
+ });
12958
+ },
12959
+ getOptions: (data) => {
12960
+ return data.shipping_options.map((option) => {
12961
+ var _a2;
12962
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12963
+ (r) => r.attribute === "is_return" && r.value === "true"
12964
+ )) {
12965
+ return void 0;
12966
+ }
12967
+ return {
12968
+ label: option.name,
12969
+ value: option.id
12970
+ };
12971
+ }).filter(Boolean);
12972
+ },
12973
+ enabled: !!locationId && !!shippingProfileId,
12974
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
12975
+ });
12976
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12977
+ return /* @__PURE__ */ jsx(
12978
+ Form$2.Field,
12979
+ {
12980
+ control,
12981
+ name: "shipping_option_id",
12982
+ render: ({ field }) => {
12983
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12984
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12985
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12986
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12987
+ ] }),
13020
12988
  /* @__PURE__ */ jsx(
13021
- Form$2.Field,
12989
+ ConditionalTooltip,
13022
12990
  {
13023
- control: form.control,
13024
- name: "phone",
13025
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13026
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
13027
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13028
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13029
- ] })
12991
+ content: tooltipContent,
12992
+ showTooltip: !locationId || !shippingProfileId,
12993
+ children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12994
+ Combobox,
12995
+ {
12996
+ options: shippingOptions.options,
12997
+ fetchNextPage: shippingOptions.fetchNextPage,
12998
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
12999
+ searchValue: shippingOptions.searchValue,
13000
+ onSearchValueChange: shippingOptions.onSearchValueChange,
13001
+ placeholder: "Select shipping option",
13002
+ ...field,
13003
+ disabled: !locationId || !shippingProfileId
13004
+ }
13005
+ ) }) })
13030
13006
  }
13031
13007
  )
13032
- ] }) }),
13033
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
13034
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
13035
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13036
- ] }) })
13037
- ]
13008
+ ] }) });
13009
+ }
13038
13010
  }
13039
- ) });
13011
+ );
13012
+ };
13013
+ const CustomAmountField = ({
13014
+ control,
13015
+ currencyCode
13016
+ }) => {
13017
+ return /* @__PURE__ */ jsx(
13018
+ Form$2.Field,
13019
+ {
13020
+ control,
13021
+ name: "custom_amount",
13022
+ render: ({ field: { onChange, ...field } }) => {
13023
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
13024
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
13025
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
13026
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
13027
+ ] }),
13028
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
13029
+ CurrencyInput,
13030
+ {
13031
+ ...field,
13032
+ onValueChange: (value) => onChange(value),
13033
+ symbol: getNativeSymbol(currencyCode),
13034
+ code: currencyCode
13035
+ }
13036
+ ) })
13037
+ ] });
13038
+ }
13039
+ }
13040
+ );
13040
13041
  };
13041
- const schema = addressSchema;
13042
13042
  const widgetModule = { widgets: [] };
13043
13043
  const routeModule = {
13044
13044
  routes: [
@@ -13067,14 +13067,18 @@ const routeModule = {
13067
13067
  Component: Items,
13068
13068
  path: "/draft-orders/:id/items"
13069
13069
  },
13070
- {
13071
- Component: Email,
13072
- path: "/draft-orders/:id/email"
13073
- },
13074
13070
  {
13075
13071
  Component: Metadata,
13076
13072
  path: "/draft-orders/:id/metadata"
13077
13073
  },
13074
+ {
13075
+ Component: Promotions,
13076
+ path: "/draft-orders/:id/promotions"
13077
+ },
13078
+ {
13079
+ Component: Email,
13080
+ path: "/draft-orders/:id/email"
13081
+ },
13078
13082
  {
13079
13083
  Component: CustomItems,
13080
13084
  path: "/draft-orders/:id/custom-items"
@@ -13084,20 +13088,16 @@ const routeModule = {
13084
13088
  path: "/draft-orders/:id/sales-channel"
13085
13089
  },
13086
13090
  {
13087
- Component: Promotions,
13088
- path: "/draft-orders/:id/promotions"
13089
- },
13090
- {
13091
- Component: Shipping,
13092
- path: "/draft-orders/:id/shipping"
13091
+ Component: ShippingAddress,
13092
+ path: "/draft-orders/:id/shipping-address"
13093
13093
  },
13094
13094
  {
13095
13095
  Component: TransferOwnership,
13096
13096
  path: "/draft-orders/:id/transfer-ownership"
13097
13097
  },
13098
13098
  {
13099
- Component: ShippingAddress,
13100
- path: "/draft-orders/:id/shipping-address"
13099
+ Component: Shipping,
13100
+ path: "/draft-orders/:id/shipping"
13101
13101
  }
13102
13102
  ]
13103
13103
  }