@medusajs/draft-order 2.21.2-snapshot-20260925150426 → 2.21.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.
Files changed (3) hide show
  1. package/.medusa/server/src/admin/index.js +2058 -2058
  2. package/.medusa/server/src/admin/index.mjs +2058 -2058
  3. package/package.json +18 -18
package/.medusa/server/src/admin/index.js CHANGED
@@ -6168,6 +6168,27 @@ const BillingAddressForm = ({ order }) => {
6168
6168
  ) });
6169
6169
  };
6170
6170
  const schema$5 = addressSchema;
6171
+ const CustomItems = () => {
6172
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
6173
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
6174
+ /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
6175
+ ] });
6176
+ };
6177
+ const CustomItemsForm = () => {
6178
+ const form = reactHookForm.useForm({
6179
+ resolver: zod$1.zodResolver(schema$4)
6180
+ });
6181
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
6182
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
6183
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
6184
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
6185
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
6186
+ ] }) })
6187
+ ] }) });
6188
+ };
6189
+ const schema$4 = zod.z.object({
6190
+ email: zod.z.string().email()
6191
+ });
6171
6192
  const Email = () => {
6172
6193
  const { id } = reactRouterDom.useParams();
6173
6194
  const { order, isPending, isError, error } = useOrder(id, {
@@ -6190,7 +6211,7 @@ const EmailForm = ({ order }) => {
6190
6211
  defaultValues: {
6191
6212
  email: order.email ?? ""
6192
6213
  },
6193
- resolver: zod$1.zodResolver(schema$4)
6214
+ resolver: zod$1.zodResolver(schema$3)
6194
6215
  });
6195
6216
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
6196
6217
  const { handleSuccess } = useRouteModal();
@@ -6233,7 +6254,7 @@ const EmailForm = ({ order }) => {
6233
6254
  }
6234
6255
  ) });
6235
6256
  };
6236
- const schema$4 = zod.z.object({
6257
+ const schema$3 = zod.z.object({
6237
6258
  email: zod.z.string().email()
6238
6259
  });
6239
6260
  const NumberInput = React.forwardRef(
@@ -7255,67 +7276,88 @@ const customItemSchema = zod.z.object({
7255
7276
  quantity: zod.z.number(),
7256
7277
  unit_price: zod.z.union([zod.z.number(), zod.z.string()])
7257
7278
  });
7258
- const CustomItems = () => {
7259
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7260
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
7261
- /* @__PURE__ */ jsxRuntime.jsx(CustomItemsForm, {})
7262
- ] });
7263
- };
7264
- const CustomItemsForm = () => {
7265
- const form = reactHookForm.useForm({
7266
- resolver: zod$1.zodResolver(schema$3)
7267
- });
7268
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
7269
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
7270
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7271
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7272
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", children: "Save" })
7273
- ] }) })
7274
- ] }) });
7275
- };
7276
- const schema$3 = zod.z.object({
7277
- email: zod.z.string().email()
7279
+ const InlineTip = React.forwardRef(
7280
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
7281
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
7282
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7283
+ "div",
7284
+ {
7285
+ ref,
7286
+ className: ui.clx(
7287
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
7288
+ className
7289
+ ),
7290
+ ...props,
7291
+ children: [
7292
+ /* @__PURE__ */ jsxRuntime.jsx(
7293
+ "div",
7294
+ {
7295
+ role: "presentation",
7296
+ className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
7297
+ "bg-ui-tag-orange-icon": variant === "warning"
7298
+ })
7299
+ }
7300
+ ),
7301
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
7302
+ /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
7303
+ labelValue,
7304
+ ":"
7305
+ ] }),
7306
+ " ",
7307
+ children
7308
+ ] })
7309
+ ]
7310
+ }
7311
+ );
7312
+ }
7313
+ );
7314
+ InlineTip.displayName = "InlineTip";
7315
+ const MetadataFieldSchema = zod.z.object({
7316
+ key: zod.z.string(),
7317
+ disabled: zod.z.boolean().optional(),
7318
+ value: zod.z.any()
7278
7319
  });
7279
- const SalesChannel = () => {
7320
+ const MetadataSchema = zod.z.object({
7321
+ metadata: zod.z.array(MetadataFieldSchema)
7322
+ });
7323
+ const Metadata = () => {
7280
7324
  const { id } = reactRouterDom.useParams();
7281
- const { draft_order, isPending, isError, error } = useDraftOrder(
7282
- id,
7283
- {
7284
- fields: "+sales_channel_id"
7285
- },
7286
- {
7287
- enabled: !!id
7288
- }
7289
- );
7325
+ const { order, isPending, isError, error } = useOrder(id, {
7326
+ fields: "metadata"
7327
+ });
7290
7328
  if (isError) {
7291
7329
  throw error;
7292
7330
  }
7293
- const ISrEADY = !!draft_order && !isPending;
7331
+ const isReady = !isPending && !!order;
7294
7332
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7295
7333
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
7296
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
7297
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
7334
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
7335
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
7298
7336
  ] }),
7299
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
7337
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order?.metadata })
7300
7338
  ] });
7301
7339
  };
7302
- const SalesChannelForm = ({ order }) => {
7340
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
7341
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
7342
+ const MetadataForm = ({ orderId, metadata }) => {
7343
+ const { handleSuccess } = useRouteModal();
7344
+ const hasUneditableRows = getHasUneditableRows(metadata);
7345
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
7303
7346
  const form = reactHookForm.useForm({
7304
7347
  defaultValues: {
7305
- sales_channel_id: order.sales_channel_id || ""
7348
+ metadata: getDefaultValues(metadata)
7306
7349
  },
7307
- resolver: zod$1.zodResolver(schema$2)
7350
+ resolver: zod$1.zodResolver(MetadataSchema)
7308
7351
  });
7309
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
7310
- const { handleSuccess } = useRouteModal();
7311
- const onSubmit = form.handleSubmit(async (data) => {
7352
+ const handleSubmit = form.handleSubmit(async (data) => {
7353
+ const parsedData = parseValues(data);
7312
7354
  await mutateAsync(
7313
7355
  {
7314
- sales_channel_id: data.sales_channel_id
7356
+ metadata: parsedData
7315
7357
  },
7316
7358
  {
7317
7359
  onSuccess: () => {
7318
- ui.toast.success("Sales channel updated");
7360
+ ui.toast.success("Metadata updated");
7319
7361
  handleSuccess();
7320
7362
  },
7321
7363
  onError: (error) => {
@@ -7324,2160 +7366,2118 @@ const SalesChannelForm = ({ order }) => {
7324
7366
  }
7325
7367
  );
7326
7368
  });
7327
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
7328
- KeyboundForm,
7329
- {
7330
- className: "flex flex-1 flex-col overflow-hidden",
7331
- onSubmit,
7332
- children: [
7333
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
7334
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7335
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7336
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
7337
- ] }) })
7338
- ]
7339
- }
7340
- ) });
7341
- };
7342
- const SalesChannelField = ({ control, order }) => {
7343
- const salesChannels = useComboboxData({
7344
- queryFn: async (params) => {
7345
- return await sdk.admin.salesChannel.list(params);
7346
- },
7347
- queryKey: ["sales-channels"],
7348
- getOptions: (data) => {
7349
- return data.sales_channels.map((salesChannel) => ({
7350
- label: salesChannel.name,
7351
- value: salesChannel.id
7352
- }));
7353
- },
7354
- defaultValue: order.sales_channel_id || void 0
7369
+ const { fields, insert, remove } = reactHookForm.useFieldArray({
7370
+ control: form.control,
7371
+ name: "metadata"
7355
7372
  });
7356
- return /* @__PURE__ */ jsxRuntime.jsx(
7357
- Form$2.Field,
7358
- {
7359
- control,
7360
- name: "sales_channel_id",
7361
- render: ({ field }) => {
7362
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7363
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
7364
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
7365
- Combobox,
7366
- {
7367
- options: salesChannels.options,
7368
- fetchNextPage: salesChannels.fetchNextPage,
7369
- isFetchingNextPage: salesChannels.isFetchingNextPage,
7370
- searchValue: salesChannels.searchValue,
7371
- onSearchValueChange: salesChannels.onSearchValueChange,
7372
- placeholder: "Select sales channel",
7373
- ...field
7374
- }
7375
- ) }),
7376
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7377
- ] });
7378
- }
7373
+ function deleteRow(index) {
7374
+ remove(index);
7375
+ if (fields.length === 1) {
7376
+ insert(0, {
7377
+ key: "",
7378
+ value: "",
7379
+ disabled: false
7380
+ });
7379
7381
  }
7380
- );
7381
- };
7382
- const schema$2 = zod.z.object({
7383
- sales_channel_id: zod.z.string().min(1)
7384
- });
7385
- const STACKED_FOCUS_MODAL_ID = "shipping-form";
7386
- const Shipping = () => {
7387
- const { id } = reactRouterDom.useParams();
7388
- const { order, isPending, isError, error } = useOrder(id, {
7389
- fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
7390
- });
7391
- const {
7392
- order: preview,
7393
- isPending: isPreviewPending,
7394
- isError: isPreviewError,
7395
- error: previewError
7396
- } = useOrderPreview(id);
7397
- useInitiateOrderEdit({ preview });
7398
- const { onCancel } = useCancelOrderEdit({ preview });
7399
- if (isError) {
7400
- throw error;
7401
7382
  }
7402
- if (isPreviewError) {
7403
- throw previewError;
7383
+ function insertRow(index, position) {
7384
+ insert(index + (position === "above" ? 0 : 1), {
7385
+ key: "",
7386
+ value: "",
7387
+ disabled: false
7388
+ });
7404
7389
  }
7405
- const orderHasItems = (order?.items?.length || 0) > 0;
7406
- const isReady = preview && !isPreviewPending && order && !isPending;
7407
- return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
7408
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
7409
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
7410
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
7411
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
7412
- ] }) }) }),
7413
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
7414
- ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7415
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
7416
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
7417
- ] }) });
7418
- };
7419
- const ShippingForm = ({ preview, order }) => {
7420
- const { setIsOpen } = useStackedModal();
7421
- const [isSubmitting, setIsSubmitting] = React.useState(false);
7422
- const [data, setData] = React.useState(null);
7423
- const appliedShippingOptionIds = preview.shipping_methods?.map((method) => method.shipping_option_id).filter(Boolean);
7424
- const { shipping_options } = useShippingOptions(
7425
- {
7426
- id: appliedShippingOptionIds,
7427
- fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
7428
- },
7390
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
7391
+ KeyboundForm,
7429
7392
  {
7430
- enabled: appliedShippingOptionIds.length > 0
7431
- }
7432
- );
7433
- const uniqueShippingProfiles = React.useMemo(() => {
7434
- const profiles = /* @__PURE__ */ new Map();
7435
- getUniqueShippingProfiles(order.items).forEach((profile) => {
7436
- profiles.set(profile.id, profile);
7437
- });
7438
- shipping_options?.forEach((option) => {
7439
- profiles.set(option.shipping_profile_id, option.shipping_profile);
7440
- });
7441
- return Array.from(profiles.values());
7442
- }, [order.items, shipping_options]);
7443
- const { handleSuccess } = useRouteModal();
7444
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
7445
- const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
7446
- const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
7447
- const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
7448
- const onSubmit = async () => {
7449
- setIsSubmitting(true);
7450
- let requestSucceeded = false;
7451
- await requestOrderEdit(void 0, {
7452
- onError: (e) => {
7453
- ui.toast.error(`Failed to request order edit: ${e.message}`);
7454
- },
7455
- onSuccess: () => {
7456
- requestSucceeded = true;
7457
- }
7458
- });
7459
- if (!requestSucceeded) {
7460
- setIsSubmitting(false);
7461
- return;
7462
- }
7463
- await confirmOrderEdit(void 0, {
7464
- onError: (e) => {
7465
- ui.toast.error(`Failed to confirm order edit: ${e.message}`);
7466
- },
7467
- onSuccess: () => {
7468
- handleSuccess();
7469
- },
7470
- onSettled: () => {
7471
- setIsSubmitting(false);
7472
- }
7473
- });
7474
- };
7475
- const onKeydown = React.useCallback(
7476
- (e) => {
7477
- if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
7478
- if (data || isSubmitting) {
7479
- return;
7480
- }
7481
- onSubmit();
7482
- }
7483
- },
7484
- [data, isSubmitting, onSubmit]
7485
- );
7486
- React.useEffect(() => {
7487
- document.addEventListener("keydown", onKeydown);
7488
- return () => {
7489
- document.removeEventListener("keydown", onKeydown);
7490
- };
7491
- }, [onKeydown]);
7492
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
7493
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
7494
- /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
7495
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
7496
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7497
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
7498
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
7499
- ] }),
7500
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7501
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
7502
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
7503
- /* @__PURE__ */ jsxRuntime.jsx(
7504
- ui.Text,
7505
- {
7506
- size: "xsmall",
7507
- weight: "plus",
7508
- className: "text-ui-fg-muted",
7509
- children: "Shipping profile"
7393
+ onSubmit: handleSubmit,
7394
+ className: "flex flex-1 flex-col overflow-hidden",
7395
+ children: [
7396
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
7397
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
7398
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
7399
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
7400
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
7401
+ ] }),
7402
+ fields.map((field, index) => {
7403
+ const isDisabled = field.disabled || false;
7404
+ let placeholder = "-";
7405
+ if (typeof field.value === "object") {
7406
+ placeholder = "{ ... }";
7510
7407
  }
7511
- ),
7512
- /* @__PURE__ */ jsxRuntime.jsx(
7513
- ui.Text,
7514
- {
7515
- size: "xsmall",
7516
- weight: "plus",
7517
- className: "text-ui-fg-muted",
7518
- children: "Action"
7408
+ if (Array.isArray(field.value)) {
7409
+ placeholder = "[ ... ]";
7519
7410
  }
7520
- )
7521
- ] }),
7522
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
7523
- const items = getItemsWithShippingProfile(
7524
- profile.id,
7525
- order.items
7526
- );
7527
- const hasItems = items.length > 0;
7528
- const shippingOption = shipping_options?.find(
7529
- (option) => option.shipping_profile_id === profile.id
7530
- );
7531
- const shippingMethod = preview.shipping_methods.find(
7532
- (method) => method.shipping_option_id === shippingOption?.id
7533
- );
7534
- const addShippingMethodAction = shippingMethod?.actions?.find(
7535
- (action) => action.action === "SHIPPING_ADD"
7536
- );
7537
- return /* @__PURE__ */ jsxRuntime.jsxs(
7538
- radixUi.Accordion.Item,
7539
- {
7540
- value: profile.id,
7541
- className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
7542
- children: [
7543
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
7544
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
7545
- /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
7546
- ui.IconButton,
7547
- {
7548
- size: "2xsmall",
7549
- variant: "transparent",
7550
- className: "group/trigger",
7551
- disabled: !hasItems,
7552
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
7553
- }
7554
- ) }),
7555
- !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
7556
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
7557
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
7411
+ return /* @__PURE__ */ jsxRuntime.jsx(
7412
+ ConditionalTooltip,
7413
+ {
7414
+ showTooltip: isDisabled,
7415
+ content: "This row is disabled because it contains non-primitive data.",
7416
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
7417
+ /* @__PURE__ */ jsxRuntime.jsxs(
7418
+ "div",
7419
+ {
7420
+ className: ui.clx("grid grid-cols-2 divide-x", {
7421
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
7422
+ }),
7423
+ children: [
7558
7424
  /* @__PURE__ */ jsxRuntime.jsx(
7559
- ui.Text,
7425
+ Form$2.Field,
7560
7426
  {
7561
- size: "small",
7562
- weight: "plus",
7563
- leading: "compact",
7564
- children: profile.name
7427
+ control: form.control,
7428
+ name: `metadata.${index}.key`,
7429
+ render: ({ field: field2 }) => {
7430
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
7431
+ GridInput,
7432
+ {
7433
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
7434
+ ...field2,
7435
+ disabled: isDisabled,
7436
+ placeholder: "Key"
7437
+ }
7438
+ ) }) });
7439
+ }
7565
7440
  }
7566
7441
  ),
7567
- /* @__PURE__ */ jsxRuntime.jsxs(
7568
- ui.Text,
7442
+ /* @__PURE__ */ jsxRuntime.jsx(
7443
+ Form$2.Field,
7569
7444
  {
7570
- size: "small",
7571
- leading: "compact",
7572
- className: "text-ui-fg-subtle",
7573
- children: [
7574
- items.length,
7575
- " ",
7576
- pluralize(items.length, "items", "item")
7577
- ]
7445
+ control: form.control,
7446
+ name: `metadata.${index}.value`,
7447
+ render: ({ field: { value, ...field2 } }) => {
7448
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
7449
+ GridInput,
7450
+ {
7451
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
7452
+ ...field2,
7453
+ value: isDisabled ? placeholder : value,
7454
+ disabled: isDisabled,
7455
+ placeholder: "Value"
7456
+ }
7457
+ ) }) });
7458
+ }
7578
7459
  }
7579
7460
  )
7580
- ] })
7581
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
7582
- /* @__PURE__ */ jsxRuntime.jsx(
7583
- ui.Tooltip,
7461
+ ]
7462
+ }
7463
+ ),
7464
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
7465
+ /* @__PURE__ */ jsxRuntime.jsx(
7466
+ ui.DropdownMenu.Trigger,
7467
+ {
7468
+ className: ui.clx(
7469
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
7470
+ {
7471
+ hidden: isDisabled
7472
+ }
7473
+ ),
7474
+ disabled: isDisabled,
7475
+ asChild: true,
7476
+ children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
7477
+ }
7478
+ ),
7479
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
7480
+ /* @__PURE__ */ jsxRuntime.jsxs(
7481
+ ui.DropdownMenu.Item,
7584
7482
  {
7585
- content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
7586
- "li",
7587
- {
7588
- children: `${item.quantity}x ${item.variant?.product?.title} (${item.variant?.title})`
7589
- },
7590
- item.id
7591
- )) }),
7592
- children: /* @__PURE__ */ jsxRuntime.jsxs(
7593
- ui.Badge,
7594
- {
7595
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
7596
- size: "xsmall",
7597
- children: [
7598
- /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
7599
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
7600
- items.reduce(
7601
- (acc, item) => acc + item.quantity,
7602
- 0
7603
- ),
7604
- "x",
7605
- " ",
7606
- pluralize(items.length, "items", "item")
7607
- ] })
7608
- ]
7609
- }
7610
- )
7483
+ className: "gap-x-2",
7484
+ onClick: () => insertRow(index, "above"),
7485
+ children: [
7486
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
7487
+ "Insert row above"
7488
+ ]
7611
7489
  }
7612
7490
  ),
7613
- /* @__PURE__ */ jsxRuntime.jsx(
7614
- ui.Tooltip,
7491
+ /* @__PURE__ */ jsxRuntime.jsxs(
7492
+ ui.DropdownMenu.Item,
7615
7493
  {
7616
- content: shippingOption.service_zone?.fulfillment_set?.location?.name,
7617
- children: /* @__PURE__ */ jsxRuntime.jsxs(
7618
- ui.Badge,
7619
- {
7620
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
7621
- size: "xsmall",
7622
- children: [
7623
- /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
7624
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.service_zone?.fulfillment_set?.location?.name })
7625
- ]
7626
- }
7627
- )
7628
- }
7629
- ),
7630
- /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
7631
- ui.Badge,
7632
- {
7633
- className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
7634
- size: "xsmall",
7494
+ className: "gap-x-2",
7495
+ onClick: () => insertRow(index, "below"),
7635
7496
  children: [
7636
- /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
7637
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
7497
+ /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
7498
+ "Insert row below"
7638
7499
  ]
7639
7500
  }
7640
- ) })
7641
- ] })
7642
- ] }),
7643
- shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
7644
- ActionMenu,
7645
- {
7646
- groups: [
7647
- {
7648
- actions: [
7649
- hasItems ? {
7650
- label: "Edit shipping option",
7651
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
7652
- onClick: () => {
7653
- setIsOpen(
7654
- STACKED_FOCUS_MODAL_ID,
7655
- true
7656
- );
7657
- setData({
7658
- shippingProfileId: profile.id,
7659
- shippingOption,
7660
- shippingMethod
7661
- });
7662
- }
7663
- } : void 0,
7664
- {
7665
- label: "Remove shipping option",
7666
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
7667
- onClick: () => {
7668
- if (shippingMethod) {
7669
- if (addShippingMethodAction) {
7670
- removeActionShippingMethod(
7671
- addShippingMethodAction.id
7672
- );
7673
- } else {
7674
- removeShippingMethod(
7675
- shippingMethod.id
7676
- );
7677
- }
7678
- }
7679
- }
7680
- }
7681
- ].filter(Boolean)
7682
- }
7683
- ]
7684
- }
7685
- ) : /* @__PURE__ */ jsxRuntime.jsx(
7686
- StackedModalTrigger,
7687
- {
7688
- shippingProfileId: profile.id,
7689
- shippingOption,
7690
- shippingMethod,
7691
- setData,
7692
- children: "Add shipping option"
7693
- }
7694
- )
7695
- ] }),
7696
- /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
7697
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7698
- items.map((item, idx) => {
7699
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7501
+ ),
7502
+ /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
7700
7503
  /* @__PURE__ */ jsxRuntime.jsxs(
7701
- "div",
7504
+ ui.DropdownMenu.Item,
7702
7505
  {
7703
- className: "flex items-center gap-x-3 px-3",
7506
+ className: "gap-x-2",
7507
+ onClick: () => deleteRow(index),
7704
7508
  children: [
7705
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
7706
- ui.Divider,
7707
- {
7708
- variant: "dashed",
7709
- orientation: "vertical"
7710
- }
7711
- ) }),
7712
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
7713
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
7714
- ui.Text,
7715
- {
7716
- size: "small",
7717
- leading: "compact",
7718
- className: "text-ui-fg-subtle",
7719
- children: [
7720
- item.quantity,
7721
- "x"
7722
- ]
7723
- }
7724
- ) }),
7725
- /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
7726
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7727
- /* @__PURE__ */ jsxRuntime.jsxs(
7728
- ui.Text,
7729
- {
7730
- size: "small",
7731
- leading: "compact",
7732
- weight: "plus",
7733
- children: [
7734
- item.variant?.product?.title,
7735
- " (",
7736
- item.variant?.title,
7737
- ")"
7738
- ]
7739
- }
7740
- ),
7741
- /* @__PURE__ */ jsxRuntime.jsx(
7742
- ui.Text,
7743
- {
7744
- size: "small",
7745
- leading: "compact",
7746
- className: "text-ui-fg-subtle",
7747
- children: item.variant?.options?.map((option) => option.value).join(" · ")
7748
- }
7749
- )
7750
- ] })
7751
- ] })
7509
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
7510
+ "Delete row"
7752
7511
  ]
7753
- },
7754
- item.id
7755
- ),
7756
- idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
7757
- ] }, item.id);
7758
- })
7512
+ }
7513
+ )
7514
+ ] })
7515
+ ] })
7759
7516
  ] })
7760
- ]
7761
- },
7762
- profile.id
7763
- );
7764
- }) })
7517
+ },
7518
+ field.id
7519
+ );
7520
+ })
7521
+ ] }),
7522
+ hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
7523
+ ] }),
7524
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
7525
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
7526
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
7765
7527
  ] }) })
7766
- ] }) }),
7767
- /* @__PURE__ */ jsxRuntime.jsx(
7768
- StackedFocusModal,
7769
- {
7770
- id: STACKED_FOCUS_MODAL_ID,
7771
- onOpenChangeCallback: (open) => {
7772
- if (!open) {
7773
- setData(null);
7774
- }
7775
- return open;
7776
- },
7777
- children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
7778
- }
7779
- )
7780
- ] }),
7781
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
7782
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
7783
- /* @__PURE__ */ jsxRuntime.jsx(
7784
- ui.Button,
7785
- {
7786
- size: "small",
7787
- type: "button",
7788
- isLoading: isSubmitting,
7789
- onClick: onSubmit,
7790
- children: "Save"
7791
- }
7792
- )
7793
- ] }) })
7794
- ] });
7795
- };
7796
- const StackedModalTrigger = ({
7797
- shippingProfileId,
7798
- shippingOption,
7799
- shippingMethod,
7800
- setData,
7801
- children
7802
- }) => {
7803
- const { setIsOpen, getIsOpen } = useStackedModal();
7804
- const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
7805
- const onToggle = () => {
7806
- if (isOpen) {
7807
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
7808
- setData(null);
7809
- } else {
7810
- setIsOpen(STACKED_FOCUS_MODAL_ID, true);
7811
- setData({
7812
- shippingProfileId,
7813
- shippingOption,
7814
- shippingMethod
7815
- });
7528
+ ]
7816
7529
  }
7817
- };
7530
+ ) });
7531
+ };
7532
+ const GridInput = React.forwardRef(({ className, ...props }, ref) => {
7818
7533
  return /* @__PURE__ */ jsxRuntime.jsx(
7819
- ui.Button,
7534
+ "input",
7820
7535
  {
7821
- size: "small",
7822
- variant: "secondary",
7823
- onClick: onToggle,
7824
- className: "text-ui-fg-primary shrink-0",
7825
- children
7536
+ ref,
7537
+ ...props,
7538
+ autoComplete: "off",
7539
+ className: ui.clx(
7540
+ "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
7541
+ className
7542
+ )
7826
7543
  }
7827
7544
  );
7545
+ });
7546
+ GridInput.displayName = "MetadataForm.GridInput";
7547
+ const PlaceholderInner = () => {
7548
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
7549
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
7550
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
7551
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
7552
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
7553
+ ] }) })
7554
+ ] });
7828
7555
  };
7829
- const ShippingProfileForm = ({
7830
- data,
7831
- order,
7832
- preview
7833
- }) => {
7834
- const { setIsOpen } = useStackedModal();
7835
- const form = reactHookForm.useForm({
7836
- resolver: zod$1.zodResolver(shippingMethodSchema),
7837
- defaultValues: {
7838
- location_id: data.shippingOption?.service_zone?.fulfillment_set?.location?.id,
7839
- shipping_option_id: data.shippingOption?.id,
7840
- custom_amount: data.shippingMethod?.amount
7841
- }
7842
- });
7843
- const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
7844
- const {
7845
- mutateAsync: updateShippingMethod,
7846
- isPending: isUpdatingShippingMethod
7847
- } = useDraftOrderUpdateShippingMethod(order.id);
7848
- const onSubmit = form.handleSubmit(async (values) => {
7849
- if (isEqual__default.default(values, form.formState.defaultValues)) {
7850
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
7556
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
7557
+ function getDefaultValues(metadata) {
7558
+ if (!metadata || !Object.keys(metadata).length) {
7559
+ return [
7560
+ {
7561
+ key: "",
7562
+ value: "",
7563
+ disabled: false
7564
+ }
7565
+ ];
7566
+ }
7567
+ return Object.entries(metadata).map(([key, value]) => {
7568
+ if (!EDITABLE_TYPES.includes(typeof value)) {
7569
+ return {
7570
+ key,
7571
+ value,
7572
+ disabled: true
7573
+ };
7574
+ }
7575
+ let stringValue = value;
7576
+ if (typeof value !== "string") {
7577
+ stringValue = JSON.stringify(value);
7578
+ }
7579
+ return {
7580
+ key,
7581
+ value: stringValue,
7582
+ original_key: key
7583
+ };
7584
+ });
7585
+ }
7586
+ function parseValues(values) {
7587
+ const metadata = values.metadata;
7588
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
7589
+ if (isEmpty) {
7590
+ return null;
7591
+ }
7592
+ const update = {};
7593
+ metadata.forEach((field) => {
7594
+ let key = field.key;
7595
+ let value = field.value;
7596
+ const disabled = field.disabled;
7597
+ if (!key || !value) {
7851
7598
  return;
7852
7599
  }
7853
- if (data.shippingMethod) {
7854
- await updateShippingMethod(
7855
- {
7856
- method_id: data.shippingMethod.id,
7857
- shipping_option_id: values.shipping_option_id,
7858
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
7859
- },
7860
- {
7861
- onError: (e) => {
7862
- ui.toast.error(e.message);
7863
- },
7864
- onSuccess: () => {
7865
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
7866
- }
7600
+ if (disabled) {
7601
+ update[key] = value;
7602
+ return;
7603
+ }
7604
+ key = key.trim();
7605
+ value = value.trim();
7606
+ if (value === "true") {
7607
+ update[key] = true;
7608
+ } else if (value === "false") {
7609
+ update[key] = false;
7610
+ } else {
7611
+ const parsedNumber = parseFloat(value);
7612
+ if (!isNaN(parsedNumber)) {
7613
+ update[key] = parsedNumber;
7614
+ } else {
7615
+ update[key] = value;
7616
+ }
7617
+ }
7618
+ });
7619
+ return update;
7620
+ }
7621
+ function getHasUneditableRows(metadata) {
7622
+ if (!metadata) {
7623
+ return false;
7624
+ }
7625
+ return Object.values(metadata).some(
7626
+ (value) => !EDITABLE_TYPES.includes(typeof value)
7627
+ );
7628
+ }
7629
+ const PROMOTION_QUERY_KEY = "promotions";
7630
+ const promotionsQueryKeys = {
7631
+ list: (query2) => [
7632
+ PROMOTION_QUERY_KEY,
7633
+ query2 ? query2 : void 0
7634
+ ],
7635
+ detail: (id, query2) => [
7636
+ PROMOTION_QUERY_KEY,
7637
+ id,
7638
+ query2 ? query2 : void 0
7639
+ ]
7640
+ };
7641
+ const usePromotions = (query2, options) => {
7642
+ const { data, ...rest } = reactQuery.useQuery({
7643
+ queryKey: promotionsQueryKeys.list(query2),
7644
+ queryFn: async () => sdk.admin.promotion.list(query2),
7645
+ ...options
7646
+ });
7647
+ return { ...data, ...rest };
7648
+ };
7649
+ const Promotions = () => {
7650
+ const { id } = reactRouterDom.useParams();
7651
+ const {
7652
+ order: preview,
7653
+ isError: isPreviewError,
7654
+ error: previewError
7655
+ } = useOrderPreview(id, void 0);
7656
+ useInitiateOrderEdit({ preview });
7657
+ const { onCancel } = useCancelOrderEdit({ preview });
7658
+ if (isPreviewError) {
7659
+ throw previewError;
7660
+ }
7661
+ const isReady = !!preview;
7662
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
7663
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
7664
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
7665
+ ] });
7666
+ };
7667
+ const PromotionForm = ({ preview }) => {
7668
+ const { items, shipping_methods } = preview;
7669
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
7670
+ const [comboboxValue, setComboboxValue] = React.useState("");
7671
+ const { handleSuccess } = useRouteModal();
7672
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
7673
+ const promoIds = getPromotionIds(items, shipping_methods);
7674
+ const { promotions, isPending, isError, error } = usePromotions(
7675
+ {
7676
+ id: promoIds
7677
+ },
7678
+ {
7679
+ enabled: !!promoIds.length
7680
+ }
7681
+ );
7682
+ const comboboxData = useComboboxData({
7683
+ queryKey: ["promotions", "combobox", promoIds],
7684
+ queryFn: async (params) => {
7685
+ return await sdk.admin.promotion.list({
7686
+ ...params,
7687
+ id: {
7688
+ $nin: promoIds
7867
7689
  }
7868
- );
7690
+ });
7691
+ },
7692
+ getOptions: (data) => {
7693
+ return data.promotions.map((promotion) => ({
7694
+ label: promotion.code,
7695
+ value: promotion.code
7696
+ }));
7697
+ }
7698
+ });
7699
+ const add = async (value) => {
7700
+ if (!value) {
7869
7701
  return;
7870
7702
  }
7871
- await addShippingMethod(
7703
+ addPromotions(
7872
7704
  {
7873
- shipping_option_id: values.shipping_option_id,
7874
- custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
7705
+ promo_codes: [value]
7875
7706
  },
7876
7707
  {
7877
7708
  onError: (e) => {
7878
7709
  ui.toast.error(e.message);
7710
+ comboboxData.onSearchValueChange("");
7711
+ setComboboxValue("");
7879
7712
  },
7880
7713
  onSuccess: () => {
7881
- setIsOpen(STACKED_FOCUS_MODAL_ID, false);
7714
+ comboboxData.onSearchValueChange("");
7715
+ setComboboxValue("");
7882
7716
  }
7883
7717
  }
7884
7718
  );
7885
- });
7886
- return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
7887
- KeyboundForm,
7888
- {
7889
- className: "flex h-full flex-col overflow-hidden",
7890
- onSubmit,
7891
- children: [
7892
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
7893
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
7894
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7895
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
7896
- /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.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." }) })
7897
- ] }),
7898
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7899
- /* @__PURE__ */ jsxRuntime.jsx(
7900
- LocationField,
7901
- {
7902
- control: form.control,
7903
- setValue: form.setValue
7904
- }
7905
- ),
7906
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7907
- /* @__PURE__ */ jsxRuntime.jsx(
7908
- ShippingOptionField,
7909
- {
7910
- shippingProfileId: data.shippingProfileId,
7911
- preview,
7912
- control: form.control
7913
- }
7914
- ),
7915
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7916
- /* @__PURE__ */ jsxRuntime.jsx(
7917
- CustomAmountField,
7918
- {
7919
- control: form.control,
7920
- currencyCode: order.currency_code
7921
- }
7922
- ),
7923
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7924
- /* @__PURE__ */ jsxRuntime.jsx(
7925
- ItemsPreview,
7926
- {
7927
- order,
7928
- shippingProfileId: data.shippingProfileId
7929
- }
7930
- )
7931
- ] }) }) }),
7932
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
7933
- /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
7934
- /* @__PURE__ */ jsxRuntime.jsx(
7935
- ui.Button,
7936
- {
7937
- size: "small",
7938
- type: "submit",
7939
- isLoading: isPending || isUpdatingShippingMethod,
7940
- children: data.shippingMethod ? "Update" : "Add"
7941
- }
7942
- )
7943
- ] }) })
7944
- ]
7719
+ };
7720
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
7721
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
7722
+ const onSubmit = async () => {
7723
+ setIsSubmitting(true);
7724
+ let requestSucceeded = false;
7725
+ await requestOrderEdit(void 0, {
7726
+ onError: (e) => {
7727
+ ui.toast.error(e.message);
7728
+ },
7729
+ onSuccess: () => {
7730
+ requestSucceeded = true;
7731
+ }
7732
+ });
7733
+ if (!requestSucceeded) {
7734
+ setIsSubmitting(false);
7735
+ return;
7945
7736
  }
7946
- ) }) });
7947
- };
7948
- const shippingMethodSchema = zod.z.object({
7949
- location_id: zod.z.string(),
7950
- shipping_option_id: zod.z.string(),
7951
- custom_amount: zod.z.union([zod.z.number(), zod.z.string()]).optional()
7952
- });
7953
- const ItemsPreview = ({ order, shippingProfileId }) => {
7954
- const matches = order.items.filter(
7955
- (item) => item.variant?.product?.shipping_profile?.id === shippingProfileId
7956
- );
7957
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
7958
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
7959
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
7960
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
7961
- ] }) }),
7962
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
7963
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
7964
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
7965
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
7737
+ await confirmOrderEdit(void 0, {
7738
+ onError: (e) => {
7739
+ ui.toast.error(e.message);
7740
+ },
7741
+ onSuccess: () => {
7742
+ handleSuccess();
7743
+ },
7744
+ onSettled: () => {
7745
+ setIsSubmitting(false);
7746
+ }
7747
+ });
7748
+ };
7749
+ if (isError) {
7750
+ throw error;
7751
+ }
7752
+ return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
7753
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
7754
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
7755
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
7756
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
7757
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
7758
+ ] }),
7759
+ /* @__PURE__ */ jsxRuntime.jsx(
7760
+ Combobox,
7761
+ {
7762
+ id: "promotion-combobox",
7763
+ "aria-describedby": "promotion-combobox-hint",
7764
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
7765
+ fetchNextPage: comboboxData.fetchNextPage,
7766
+ options: comboboxData.options,
7767
+ onSearchValueChange: comboboxData.onSearchValueChange,
7768
+ searchValue: comboboxData.searchValue,
7769
+ disabled: comboboxData.disabled || isAddingPromotions,
7770
+ onChange: add,
7771
+ value: comboboxValue
7772
+ }
7773
+ )
7966
7774
  ] }),
7967
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches?.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
7968
- "div",
7775
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7776
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions?.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
7777
+ PromotionItem,
7969
7778
  {
7970
- className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
7971
- children: [
7972
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
7973
- /* @__PURE__ */ jsxRuntime.jsx(
7974
- Thumbnail,
7975
- {
7976
- thumbnail: item.thumbnail,
7977
- alt: item.product_title ?? void 0
7978
- }
7979
- ),
7980
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
7981
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
7982
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
7983
- /* @__PURE__ */ jsxRuntime.jsxs(
7984
- ui.Text,
7985
- {
7986
- size: "small",
7987
- leading: "compact",
7988
- className: "text-ui-fg-subtle",
7989
- children: [
7990
- "(",
7991
- item.variant_title,
7992
- ")"
7993
- ]
7994
- }
7995
- )
7996
- ] }),
7997
- /* @__PURE__ */ jsxRuntime.jsx(
7998
- ui.Text,
7999
- {
8000
- size: "small",
8001
- leading: "compact",
8002
- className: "text-ui-fg-subtle",
8003
- children: item.variant_sku
8004
- }
8005
- )
8006
- ] })
8007
- ] }),
8008
- /* @__PURE__ */ jsxRuntime.jsxs(
8009
- ui.Text,
8010
- {
8011
- size: "small",
8012
- leading: "compact",
8013
- className: "text-ui-fg-subtle",
8014
- children: [
8015
- item.quantity,
8016
- "x"
8017
- ]
8018
- }
8019
- )
8020
- ]
7779
+ promotion,
7780
+ orderId: preview.id,
7781
+ isLoading: isPending
8021
7782
  },
8022
- item.id
8023
- )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
8024
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
8025
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
8026
- 'No items found for "',
8027
- query,
8028
- '".'
8029
- ] })
8030
- ] }) })
8031
- ] })
7783
+ promotion.id
7784
+ )) })
7785
+ ] }) }),
7786
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7787
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7788
+ /* @__PURE__ */ jsxRuntime.jsx(
7789
+ ui.Button,
7790
+ {
7791
+ size: "small",
7792
+ type: "submit",
7793
+ isLoading: isSubmitting || isAddingPromotions,
7794
+ children: "Save"
7795
+ }
7796
+ )
7797
+ ] }) })
8032
7798
  ] });
8033
7799
  };
8034
- const LocationField = ({ control, setValue }) => {
8035
- const locations = useComboboxData({
8036
- queryKey: ["locations"],
8037
- queryFn: async (params) => {
8038
- return await sdk.admin.stockLocation.list(params);
8039
- },
8040
- getOptions: (data) => {
8041
- return data.stock_locations.map((location) => ({
8042
- label: location.name,
8043
- value: location.id
8044
- }));
8045
- }
8046
- });
8047
- return /* @__PURE__ */ jsxRuntime.jsx(
8048
- Form$2.Field,
8049
- {
8050
- control,
8051
- name: "location_id",
8052
- render: ({ field: { onChange, ...field } }) => {
8053
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
8054
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8055
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
8056
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
8057
- ] }),
8058
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8059
- Combobox,
8060
- {
8061
- options: locations.options,
8062
- fetchNextPage: locations.fetchNextPage,
8063
- isFetchingNextPage: locations.isFetchingNextPage,
8064
- searchValue: locations.searchValue,
8065
- onSearchValueChange: locations.onSearchValueChange,
8066
- placeholder: "Select location",
8067
- onChange: (value) => {
8068
- setValue("shipping_option_id", "", {
8069
- shouldDirty: true,
8070
- shouldTouch: true
8071
- });
8072
- onChange(value);
8073
- },
8074
- ...field
8075
- }
8076
- ) })
8077
- ] }) });
8078
- }
8079
- }
8080
- );
8081
- };
8082
- const ShippingOptionField = ({
8083
- shippingProfileId,
8084
- preview,
8085
- control
7800
+ const PromotionItem = ({
7801
+ promotion,
7802
+ orderId,
7803
+ isLoading
8086
7804
  }) => {
8087
- const locationId = reactHookForm.useWatch({ control, name: "location_id" });
8088
- const shippingOptions = useComboboxData({
8089
- queryKey: ["shipping_options", locationId, shippingProfileId],
8090
- queryFn: async (params) => {
8091
- return await sdk.admin.shippingOption.list({
8092
- ...params,
8093
- stock_location_id: locationId,
8094
- shipping_profile_id: shippingProfileId
8095
- });
8096
- },
8097
- getOptions: (data) => {
8098
- return data.shipping_options.map((option) => {
8099
- if (option.rules?.find(
8100
- (r) => r.attribute === "is_return" && r.value === "true"
8101
- )) {
8102
- return void 0;
7805
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
7806
+ const onRemove = async () => {
7807
+ removePromotions(
7808
+ {
7809
+ promo_codes: [promotion.code]
7810
+ },
7811
+ {
7812
+ onError: (e) => {
7813
+ ui.toast.error(e.message);
8103
7814
  }
8104
- return {
8105
- label: option.name,
8106
- value: option.id
8107
- };
8108
- }).filter(Boolean);
8109
- },
8110
- enabled: !!locationId && !!shippingProfileId,
8111
- defaultValue: preview.shipping_methods[0]?.shipping_option_id || void 0
8112
- });
8113
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
8114
- return /* @__PURE__ */ jsxRuntime.jsx(
8115
- Form$2.Field,
7815
+ }
7816
+ );
7817
+ };
7818
+ const displayValue = getDisplayValue(promotion);
7819
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7820
+ "div",
8116
7821
  {
8117
- control,
8118
- name: "shipping_option_id",
8119
- render: ({ field }) => {
8120
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
8121
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8122
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
8123
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
8124
- ] }),
8125
- /* @__PURE__ */ jsxRuntime.jsx(
8126
- ConditionalTooltip,
8127
- {
8128
- content: tooltipContent,
8129
- showTooltip: !locationId || !shippingProfileId,
8130
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8131
- Combobox,
8132
- {
8133
- options: shippingOptions.options,
8134
- fetchNextPage: shippingOptions.fetchNextPage,
8135
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
8136
- searchValue: shippingOptions.searchValue,
8137
- onSearchValueChange: shippingOptions.onSearchValueChange,
8138
- placeholder: "Select shipping option",
8139
- ...field,
8140
- disabled: !locationId || !shippingProfileId
8141
- }
8142
- ) }) })
8143
- }
8144
- )
8145
- ] }) });
8146
- }
8147
- }
7822
+ className: ui.clx(
7823
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
7824
+ {
7825
+ "animate-pulse": isLoading
7826
+ }
7827
+ ),
7828
+ children: [
7829
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7830
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
7831
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
7832
+ displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
7833
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
7834
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
7835
+ ] }),
7836
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: promotion.application_method?.allocation })
7837
+ ] })
7838
+ ] }),
7839
+ /* @__PURE__ */ jsxRuntime.jsx(
7840
+ ui.IconButton,
7841
+ {
7842
+ size: "small",
7843
+ type: "button",
7844
+ variant: "transparent",
7845
+ onClick: onRemove,
7846
+ isLoading: isPending || isLoading,
7847
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
7848
+ }
7849
+ )
7850
+ ]
7851
+ },
7852
+ promotion.id
8148
7853
  );
8149
7854
  };
8150
- const CustomAmountField = ({
8151
- control,
8152
- currencyCode
8153
- }) => {
8154
- return /* @__PURE__ */ jsxRuntime.jsx(
8155
- Form$2.Field,
8156
- {
8157
- control,
8158
- name: "custom_amount",
8159
- render: ({ field: { onChange, ...field } }) => {
8160
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
8161
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8162
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
8163
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
8164
- ] }),
8165
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8166
- ui.CurrencyInput,
8167
- {
8168
- ...field,
8169
- onValueChange: (value) => onChange(value),
8170
- symbol: getNativeSymbol(currencyCode),
8171
- code: currencyCode
8172
- }
8173
- ) })
8174
- ] });
8175
- }
7855
+ function getDisplayValue(promotion) {
7856
+ const value = promotion.application_method?.value;
7857
+ if (!value) {
7858
+ return null;
7859
+ }
7860
+ if (promotion.application_method?.type === "fixed") {
7861
+ const currency = promotion.application_method?.currency_code;
7862
+ if (!currency) {
7863
+ return null;
8176
7864
  }
8177
- );
7865
+ return getLocaleAmount(value, currency);
7866
+ } else if (promotion.application_method?.type === "percentage") {
7867
+ return formatPercentage(value);
7868
+ }
7869
+ return null;
7870
+ }
7871
+ const formatter = new Intl.NumberFormat([], {
7872
+ style: "percent",
7873
+ minimumFractionDigits: 2
7874
+ });
7875
+ const formatPercentage = (value, isPercentageValue = false) => {
7876
+ let val = value || 0;
7877
+ if (!isPercentageValue) {
7878
+ val = val / 100;
7879
+ }
7880
+ return formatter.format(val);
8178
7881
  };
8179
- const ShippingAddress = () => {
7882
+ function getPromotionIds(items, shippingMethods) {
7883
+ const promotionIds = /* @__PURE__ */ new Set();
7884
+ for (const item of items) {
7885
+ if (item.adjustments) {
7886
+ for (const adjustment of item.adjustments) {
7887
+ if (adjustment.promotion_id) {
7888
+ promotionIds.add(adjustment.promotion_id);
7889
+ }
7890
+ }
7891
+ }
7892
+ }
7893
+ for (const shippingMethod of shippingMethods) {
7894
+ if (shippingMethod.adjustments) {
7895
+ for (const adjustment of shippingMethod.adjustments) {
7896
+ if (adjustment.promotion_id) {
7897
+ promotionIds.add(adjustment.promotion_id);
7898
+ }
7899
+ }
7900
+ }
7901
+ }
7902
+ return Array.from(promotionIds);
7903
+ }
7904
+ const STACKED_FOCUS_MODAL_ID = "shipping-form";
7905
+ const Shipping = () => {
8180
7906
  const { id } = reactRouterDom.useParams();
8181
7907
  const { order, isPending, isError, error } = useOrder(id, {
8182
- fields: "+shipping_address"
7908
+ fields: "+items.*,+items.variant.*,+items.variant.product.*,+items.variant.product.shipping_profile.*,+currency_code"
8183
7909
  });
7910
+ const {
7911
+ order: preview,
7912
+ isPending: isPreviewPending,
7913
+ isError: isPreviewError,
7914
+ error: previewError
7915
+ } = useOrderPreview(id);
7916
+ useInitiateOrderEdit({ preview });
7917
+ const { onCancel } = useCancelOrderEdit({ preview });
8184
7918
  if (isError) {
8185
7919
  throw error;
8186
7920
  }
8187
- const isReady = !isPending && !!order;
8188
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8189
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8190
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
8191
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
8192
- ] }),
8193
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
8194
- ] });
7921
+ if (isPreviewError) {
7922
+ throw previewError;
7923
+ }
7924
+ const orderHasItems = (order?.items?.length || 0) > 0;
7925
+ const isReady = preview && !isPreviewPending && order && !isPending;
7926
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal, { onClose: onCancel, children: !orderHasItems ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden ", children: [
7927
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
7928
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
7929
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
7930
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "This draft order currently has no items. Add items to the order before adding shipping." }) })
7931
+ ] }) }) }),
7932
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }) })
7933
+ ] }) : isReady ? /* @__PURE__ */ jsxRuntime.jsx(ShippingForm, { preview, order }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7934
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit Shipping" }) }),
7935
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading data for the draft order, please wait..." }) })
7936
+ ] }) });
8195
7937
  };
8196
- const ShippingAddressForm = ({ order }) => {
8197
- const form = reactHookForm.useForm({
8198
- defaultValues: {
8199
- first_name: order.shipping_address?.first_name ?? "",
8200
- last_name: order.shipping_address?.last_name ?? "",
8201
- company: order.shipping_address?.company ?? "",
8202
- address_1: order.shipping_address?.address_1 ?? "",
8203
- address_2: order.shipping_address?.address_2 ?? "",
8204
- city: order.shipping_address?.city ?? "",
8205
- province: order.shipping_address?.province ?? "",
8206
- country_code: order.shipping_address?.country_code ?? "",
8207
- postal_code: order.shipping_address?.postal_code ?? "",
8208
- phone: order.shipping_address?.phone ?? ""
7938
+ const ShippingForm = ({ preview, order }) => {
7939
+ const { setIsOpen } = useStackedModal();
7940
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
7941
+ const [data, setData] = React.useState(null);
7942
+ const appliedShippingOptionIds = preview.shipping_methods?.map((method) => method.shipping_option_id).filter(Boolean);
7943
+ const { shipping_options } = useShippingOptions(
7944
+ {
7945
+ id: appliedShippingOptionIds,
7946
+ fields: "+service_zone.*,+service_zone.fulfillment_set.*,+service_zone.fulfillment_set.location.*"
8209
7947
  },
8210
- resolver: zod$1.zodResolver(schema$1)
8211
- });
8212
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
7948
+ {
7949
+ enabled: appliedShippingOptionIds.length > 0
7950
+ }
7951
+ );
7952
+ const uniqueShippingProfiles = React.useMemo(() => {
7953
+ const profiles = /* @__PURE__ */ new Map();
7954
+ getUniqueShippingProfiles(order.items).forEach((profile) => {
7955
+ profiles.set(profile.id, profile);
7956
+ });
7957
+ shipping_options?.forEach((option) => {
7958
+ profiles.set(option.shipping_profile_id, option.shipping_profile);
7959
+ });
7960
+ return Array.from(profiles.values());
7961
+ }, [order.items, shipping_options]);
8213
7962
  const { handleSuccess } = useRouteModal();
8214
- const onSubmit = form.handleSubmit(async (data) => {
8215
- await mutateAsync(
8216
- {
8217
- shipping_address: {
8218
- first_name: data.first_name,
8219
- last_name: data.last_name,
8220
- company: data.company,
8221
- address_1: data.address_1,
8222
- address_2: data.address_2,
8223
- city: data.city,
8224
- province: data.province,
8225
- country_code: data.country_code,
8226
- postal_code: data.postal_code,
8227
- phone: data.phone
8228
- }
7963
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
7964
+ const { mutateAsync: requestOrderEdit } = useDraftOrderRequestEdit(preview.id);
7965
+ const { mutateAsync: removeShippingMethod } = useDraftOrderRemoveShippingMethod(preview.id);
7966
+ const { mutateAsync: removeActionShippingMethod } = useDraftOrderRemoveActionShippingMethod(preview.id);
7967
+ const onSubmit = async () => {
7968
+ setIsSubmitting(true);
7969
+ let requestSucceeded = false;
7970
+ await requestOrderEdit(void 0, {
7971
+ onError: (e) => {
7972
+ ui.toast.error(`Failed to request order edit: ${e.message}`);
8229
7973
  },
8230
- {
8231
- onSuccess: () => {
8232
- handleSuccess();
8233
- },
8234
- onError: (error) => {
8235
- ui.toast.error(error.message);
7974
+ onSuccess: () => {
7975
+ requestSucceeded = true;
7976
+ }
7977
+ });
7978
+ if (!requestSucceeded) {
7979
+ setIsSubmitting(false);
7980
+ return;
7981
+ }
7982
+ await confirmOrderEdit(void 0, {
7983
+ onError: (e) => {
7984
+ ui.toast.error(`Failed to confirm order edit: ${e.message}`);
7985
+ },
7986
+ onSuccess: () => {
7987
+ handleSuccess();
7988
+ },
7989
+ onSettled: () => {
7990
+ setIsSubmitting(false);
7991
+ }
7992
+ });
7993
+ };
7994
+ const onKeydown = React.useCallback(
7995
+ (e) => {
7996
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
7997
+ if (data || isSubmitting) {
7998
+ return;
8236
7999
  }
8000
+ onSubmit();
8237
8001
  }
8238
- );
8239
- });
8240
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8241
- KeyboundForm,
8242
- {
8243
- className: "flex flex-1 flex-col overflow-hidden",
8244
- onSubmit,
8245
- children: [
8246
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
8247
- /* @__PURE__ */ jsxRuntime.jsx(
8248
- Form$2.Field,
8249
- {
8250
- control: form.control,
8251
- name: "country_code",
8252
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8253
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
8254
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
8255
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8256
- ] })
8257
- }
8258
- ),
8259
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8002
+ },
8003
+ [data, isSubmitting, onSubmit]
8004
+ );
8005
+ React.useEffect(() => {
8006
+ document.addEventListener("keydown", onKeydown);
8007
+ return () => {
8008
+ document.removeEventListener("keydown", onKeydown);
8009
+ };
8010
+ }, [onKeydown]);
8011
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
8012
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, {}),
8013
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: [
8014
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
8015
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8016
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
8017
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Choose which shipping method(s) to use for the items in the order." }) })
8018
+ ] }),
8019
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
8020
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { type: "multiple", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
8021
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2", children: [
8260
8022
  /* @__PURE__ */ jsxRuntime.jsx(
8261
- Form$2.Field,
8023
+ ui.Text,
8262
8024
  {
8263
- control: form.control,
8264
- name: "first_name",
8265
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8266
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
8267
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8268
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8269
- ] })
8025
+ size: "xsmall",
8026
+ weight: "plus",
8027
+ className: "text-ui-fg-muted",
8028
+ children: "Shipping profile"
8270
8029
  }
8271
8030
  ),
8272
8031
  /* @__PURE__ */ jsxRuntime.jsx(
8273
- Form$2.Field,
8032
+ ui.Text,
8274
8033
  {
8275
- control: form.control,
8276
- name: "last_name",
8277
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8278
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
8279
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8280
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8281
- ] })
8034
+ size: "xsmall",
8035
+ weight: "plus",
8036
+ className: "text-ui-fg-muted",
8037
+ children: "Action"
8282
8038
  }
8283
8039
  )
8284
8040
  ] }),
8285
- /* @__PURE__ */ jsxRuntime.jsx(
8286
- Form$2.Field,
8287
- {
8288
- control: form.control,
8289
- name: "company",
8290
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8291
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
8292
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8293
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8294
- ] })
8295
- }
8296
- ),
8297
- /* @__PURE__ */ jsxRuntime.jsx(
8298
- Form$2.Field,
8299
- {
8300
- control: form.control,
8301
- name: "address_1",
8302
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8303
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
8304
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8305
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8306
- ] })
8307
- }
8308
- ),
8309
- /* @__PURE__ */ jsxRuntime.jsx(
8310
- Form$2.Field,
8311
- {
8312
- control: form.control,
8313
- name: "address_2",
8314
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8315
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
8316
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8317
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8318
- ] })
8319
- }
8320
- ),
8321
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8322
- /* @__PURE__ */ jsxRuntime.jsx(
8323
- Form$2.Field,
8324
- {
8325
- control: form.control,
8326
- name: "postal_code",
8327
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8328
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
8329
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8330
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8331
- ] })
8332
- }
8333
- ),
8334
- /* @__PURE__ */ jsxRuntime.jsx(
8335
- Form$2.Field,
8041
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[5px] pb-[5px]", children: uniqueShippingProfiles.map((profile) => {
8042
+ const items = getItemsWithShippingProfile(
8043
+ profile.id,
8044
+ order.items
8045
+ );
8046
+ const hasItems = items.length > 0;
8047
+ const shippingOption = shipping_options?.find(
8048
+ (option) => option.shipping_profile_id === profile.id
8049
+ );
8050
+ const shippingMethod = preview.shipping_methods.find(
8051
+ (method) => method.shipping_option_id === shippingOption?.id
8052
+ );
8053
+ const addShippingMethodAction = shippingMethod?.actions?.find(
8054
+ (action) => action.action === "SHIPPING_ADD"
8055
+ );
8056
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8057
+ radixUi.Accordion.Item,
8336
8058
  {
8337
- control: form.control,
8338
- name: "city",
8339
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8340
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
8341
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8342
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8343
- ] })
8344
- }
8345
- )
8346
- ] }),
8347
- /* @__PURE__ */ jsxRuntime.jsx(
8348
- Form$2.Field,
8349
- {
8350
- control: form.control,
8351
- name: "province",
8352
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8353
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
8354
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8355
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8356
- ] })
8357
- }
8358
- ),
8359
- /* @__PURE__ */ jsxRuntime.jsx(
8360
- Form$2.Field,
8361
- {
8362
- control: form.control,
8363
- name: "phone",
8364
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8365
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
8366
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8367
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8368
- ] })
8369
- }
8370
- )
8371
- ] }) }),
8372
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
8373
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
8374
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
8375
- ] }) })
8376
- ]
8377
- }
8378
- ) });
8379
- };
8380
- const schema$1 = addressSchema;
8381
- const TransferOwnership = () => {
8382
- const { id } = reactRouterDom.useParams();
8383
- const { draft_order, isPending, isError, error } = useDraftOrder(id, {
8384
- fields: "id,customer_id,customer.*"
8385
- });
8386
- if (isError) {
8387
- throw error;
8388
- }
8389
- const isReady = !isPending && !!draft_order;
8390
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8391
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8392
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
8393
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
8394
- ] }),
8395
- isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
8396
- ] });
8397
- };
8398
- const TransferOwnershipForm = ({ order }) => {
8399
- const form = reactHookForm.useForm({
8400
- defaultValues: {
8401
- customer_id: order.customer_id || ""
8402
- },
8403
- resolver: zod$1.zodResolver(schema)
8404
- });
8405
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
8406
- const { handleSuccess } = useRouteModal();
8407
- const name = [order.customer?.first_name, order.customer?.last_name].filter(Boolean).join(" ");
8408
- const currentCustomer = order.customer ? {
8409
- label: name ? `${name} (${order.customer.email})` : order.customer.email,
8410
- value: order.customer.id
8411
- } : null;
8412
- const onSubmit = form.handleSubmit(async (data) => {
8413
- await mutateAsync(
8414
- { customer_id: data.customer_id },
8415
- {
8416
- onSuccess: () => {
8417
- ui.toast.success("Customer updated");
8418
- handleSuccess();
8419
- },
8420
- onError: (error) => {
8421
- ui.toast.error(error.message);
8422
- }
8423
- }
8424
- );
8425
- });
8426
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8427
- KeyboundForm,
8428
- {
8429
- className: "flex flex-1 flex-col overflow-hidden",
8430
- onSubmit,
8431
- children: [
8432
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
8433
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
8434
- currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
8435
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8436
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
8437
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
8438
- ] }),
8439
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
8440
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
8441
- /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
8442
- ] })
8443
- ] }),
8444
- /* @__PURE__ */ jsxRuntime.jsx(
8445
- CustomerField,
8446
- {
8447
- control: form.control,
8448
- currentCustomerId: order.customer_id
8449
- }
8450
- )
8451
- ] }),
8452
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
8453
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
8454
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
8455
- ] }) })
8456
- ]
8457
- }
8458
- ) });
8459
- };
8460
- const CustomerField = ({ control, currentCustomerId }) => {
8461
- const customers = useComboboxData({
8462
- queryFn: async (params) => {
8463
- return await sdk.admin.customer.list({
8464
- ...params,
8465
- id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
8466
- });
8467
- },
8468
- queryKey: ["customers"],
8469
- getOptions: (data) => {
8470
- return data.customers.map((customer) => {
8471
- const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
8472
- return {
8473
- label: name ? `${name} (${customer.email})` : customer.email,
8474
- value: customer.id
8475
- };
8476
- });
8477
- }
8478
- });
8479
- return /* @__PURE__ */ jsxRuntime.jsx(
8480
- Form$2.Field,
8481
- {
8482
- name: "customer_id",
8483
- control,
8484
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
8485
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8486
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
8487
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
8488
- ] }),
8489
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8490
- Combobox,
8491
- {
8492
- options: customers.options,
8493
- fetchNextPage: customers.fetchNextPage,
8494
- isFetchingNextPage: customers.isFetchingNextPage,
8495
- searchValue: customers.searchValue,
8496
- onSearchValueChange: customers.onSearchValueChange,
8497
- placeholder: "Select customer",
8498
- ...field
8499
- }
8500
- ) }),
8501
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8502
- ] })
8503
- }
8504
- );
8505
- };
8506
- const Illustration = () => {
8507
- return /* @__PURE__ */ jsxRuntime.jsxs(
8508
- "svg",
8509
- {
8510
- width: "280",
8511
- height: "180",
8512
- viewBox: "0 0 280 180",
8513
- fill: "none",
8514
- xmlns: "http://www.w3.org/2000/svg",
8515
- children: [
8516
- /* @__PURE__ */ jsxRuntime.jsx(
8517
- "rect",
8518
- {
8519
- x: "0.00428286",
8520
- y: "-0.742904",
8521
- width: "33.5",
8522
- height: "65.5",
8523
- rx: "6.75",
8524
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
8525
- fill: "#D4D4D8",
8526
- stroke: "#52525B",
8527
- strokeWidth: "1.5"
8528
- }
8529
- ),
8530
- /* @__PURE__ */ jsxRuntime.jsx(
8531
- "rect",
8532
- {
8533
- x: "0.00428286",
8534
- y: "-0.742904",
8535
- width: "33.5",
8536
- height: "65.5",
8537
- rx: "6.75",
8538
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
8539
- fill: "white",
8540
- stroke: "#52525B",
8541
- strokeWidth: "1.5"
8542
- }
8543
- ),
8544
- /* @__PURE__ */ jsxRuntime.jsx(
8545
- "path",
8546
- {
8547
- d: "M180.579 107.142L179.126 107.959",
8548
- stroke: "#52525B",
8549
- strokeWidth: "1.5",
8550
- strokeLinecap: "round",
8551
- strokeLinejoin: "round"
8552
- }
8553
- ),
8554
- /* @__PURE__ */ jsxRuntime.jsx(
8555
- "path",
8556
- {
8557
- opacity: "0.88",
8558
- d: "M182.305 109.546L180.257 109.534",
8559
- stroke: "#52525B",
8560
- strokeWidth: "1.5",
8561
- strokeLinecap: "round",
8562
- strokeLinejoin: "round"
8563
- }
8564
- ),
8565
- /* @__PURE__ */ jsxRuntime.jsx(
8566
- "path",
8567
- {
8568
- opacity: "0.75",
8569
- d: "M180.551 111.93L179.108 111.096",
8570
- stroke: "#52525B",
8571
- strokeWidth: "1.5",
8572
- strokeLinecap: "round",
8573
- strokeLinejoin: "round"
8574
- }
8575
- ),
8576
- /* @__PURE__ */ jsxRuntime.jsx(
8577
- "path",
8578
- {
8579
- opacity: "0.63",
8580
- d: "M176.347 112.897L176.354 111.73",
8581
- stroke: "#52525B",
8582
- strokeWidth: "1.5",
8583
- strokeLinecap: "round",
8584
- strokeLinejoin: "round"
8585
- }
8586
- ),
8587
- /* @__PURE__ */ jsxRuntime.jsx(
8588
- "path",
8589
- {
8590
- opacity: "0.5",
8591
- d: "M172.153 111.881L173.606 111.064",
8592
- stroke: "#52525B",
8593
- strokeWidth: "1.5",
8594
- strokeLinecap: "round",
8595
- strokeLinejoin: "round"
8596
- }
8597
- ),
8598
- /* @__PURE__ */ jsxRuntime.jsx(
8599
- "path",
8600
- {
8601
- opacity: "0.38",
8602
- d: "M170.428 109.478L172.476 109.489",
8603
- stroke: "#52525B",
8604
- strokeWidth: "1.5",
8605
- strokeLinecap: "round",
8606
- strokeLinejoin: "round"
8607
- }
8608
- ),
8609
- /* @__PURE__ */ jsxRuntime.jsx(
8610
- "path",
8611
- {
8612
- opacity: "0.25",
8613
- d: "M172.181 107.094L173.624 107.928",
8614
- stroke: "#52525B",
8615
- strokeWidth: "1.5",
8616
- strokeLinecap: "round",
8617
- strokeLinejoin: "round"
8618
- }
8619
- ),
8620
- /* @__PURE__ */ jsxRuntime.jsx(
8621
- "path",
8622
- {
8623
- opacity: "0.13",
8624
- d: "M176.386 106.126L176.379 107.294",
8625
- stroke: "#52525B",
8626
- strokeWidth: "1.5",
8627
- strokeLinecap: "round",
8628
- strokeLinejoin: "round"
8629
- }
8630
- ),
8631
- /* @__PURE__ */ jsxRuntime.jsx(
8632
- "rect",
8633
- {
8634
- width: "12",
8635
- height: "3",
8636
- rx: "1.5",
8637
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
8638
- fill: "#D4D4D8"
8639
- }
8640
- ),
8641
- /* @__PURE__ */ jsxRuntime.jsx(
8642
- "rect",
8643
- {
8644
- x: "0.00428286",
8645
- y: "-0.742904",
8646
- width: "33.5",
8647
- height: "65.5",
8648
- rx: "6.75",
8649
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
8650
- fill: "#D4D4D8",
8651
- stroke: "#52525B",
8652
- strokeWidth: "1.5"
8653
- }
8654
- ),
8655
- /* @__PURE__ */ jsxRuntime.jsx(
8656
- "rect",
8657
- {
8658
- x: "0.00428286",
8659
- y: "-0.742904",
8660
- width: "33.5",
8661
- height: "65.5",
8662
- rx: "6.75",
8663
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
8664
- fill: "white",
8665
- stroke: "#52525B",
8666
- strokeWidth: "1.5"
8667
- }
8668
- ),
8669
- /* @__PURE__ */ jsxRuntime.jsx(
8670
- "rect",
8671
- {
8672
- width: "12",
8673
- height: "3",
8674
- rx: "1.5",
8675
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
8676
- fill: "#D4D4D8"
8677
- }
8678
- ),
8679
- /* @__PURE__ */ jsxRuntime.jsx(
8680
- "rect",
8681
- {
8682
- width: "17",
8683
- height: "3",
8684
- rx: "1.5",
8685
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
8686
- fill: "#D4D4D8"
8687
- }
8688
- ),
8689
- /* @__PURE__ */ jsxRuntime.jsx(
8690
- "rect",
8691
- {
8692
- width: "12",
8693
- height: "3",
8694
- rx: "1.5",
8695
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
8696
- fill: "#D4D4D8"
8697
- }
8698
- ),
8699
- /* @__PURE__ */ jsxRuntime.jsx(
8700
- "path",
8701
- {
8702
- d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
8703
- fill: "#A1A1AA"
8704
- }
8705
- ),
8706
- /* @__PURE__ */ jsxRuntime.jsx(
8707
- "rect",
8708
- {
8709
- width: "17",
8710
- height: "3",
8711
- rx: "1.5",
8712
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
8713
- fill: "#A1A1AA"
8714
- }
8715
- ),
8716
- /* @__PURE__ */ jsxRuntime.jsx(
8717
- "rect",
8718
- {
8719
- width: "12",
8720
- height: "3",
8721
- rx: "1.5",
8722
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
8723
- fill: "#A1A1AA"
8724
- }
8725
- ),
8726
- /* @__PURE__ */ jsxRuntime.jsx(
8727
- "path",
8728
- {
8729
- d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
8730
- fill: "#52525B"
8731
- }
8732
- ),
8733
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
8734
- "path",
8735
- {
8736
- d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
8737
- stroke: "#A1A1AA",
8738
- strokeWidth: "1.5",
8739
- strokeLinecap: "round",
8740
- strokeLinejoin: "round"
8741
- }
8742
- ) }),
8743
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
8744
- "path",
8745
- {
8746
- d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
8747
- stroke: "#A1A1AA",
8748
- strokeWidth: "1.5",
8749
- strokeLinecap: "round",
8750
- strokeLinejoin: "round"
8751
- }
8752
- ) }),
8753
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
8754
- "path",
8755
- {
8756
- d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
8757
- stroke: "#A1A1AA",
8758
- strokeWidth: "1.5",
8759
- strokeLinecap: "round",
8760
- strokeLinejoin: "round"
8761
- }
8762
- ) }),
8763
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
8764
- "path",
8765
- {
8766
- d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
8767
- stroke: "#A1A1AA",
8768
- strokeWidth: "1.5",
8769
- strokeLinecap: "round",
8770
- strokeLinejoin: "round"
8771
- }
8772
- ) }),
8773
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
8774
- "path",
8775
- {
8776
- d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
8777
- stroke: "#A1A1AA",
8778
- strokeWidth: "1.5",
8779
- strokeLinecap: "round",
8780
- strokeLinejoin: "round"
8781
- }
8782
- ) }),
8783
- /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
8784
- "path",
8785
- {
8786
- d: "M146.894 101.198L139.51 101.155L139.486 105.365",
8787
- stroke: "#A1A1AA",
8788
- strokeWidth: "1.5",
8789
- strokeLinecap: "round",
8790
- strokeLinejoin: "round"
8791
- }
8792
- ) }),
8793
- /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
8794
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
8795
- "rect",
8796
- {
8797
- width: "12",
8798
- height: "12",
8799
- fill: "white",
8800
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
8801
- }
8802
- ) }),
8803
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
8804
- "rect",
8805
- {
8806
- width: "12",
8807
- height: "12",
8808
- fill: "white",
8809
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
8810
- }
8811
- ) }),
8812
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
8813
- "rect",
8814
- {
8815
- width: "12",
8816
- height: "12",
8817
- fill: "white",
8818
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
8819
- }
8820
- ) }),
8821
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
8822
- "rect",
8823
- {
8824
- width: "12",
8825
- height: "12",
8826
- fill: "white",
8827
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
8828
- }
8829
- ) }),
8830
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
8831
- "rect",
8832
- {
8833
- width: "12",
8834
- height: "12",
8835
- fill: "white",
8836
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
8837
- }
8838
- ) }),
8839
- /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
8840
- "rect",
8841
- {
8842
- width: "12",
8843
- height: "12",
8844
- fill: "white",
8845
- transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
8846
- }
8847
- ) })
8848
- ] })
8849
- ]
8850
- }
8851
- );
8852
- };
8853
- const schema = zod.z.object({
8854
- customer_id: zod.z.string().min(1)
8855
- });
8856
- const InlineTip = React.forwardRef(
8857
- ({ variant = "tip", label, className, children, ...props }, ref) => {
8858
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
8859
- return /* @__PURE__ */ jsxRuntime.jsxs(
8860
- "div",
8861
- {
8862
- ref,
8863
- className: ui.clx(
8864
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
8865
- className
8866
- ),
8867
- ...props,
8868
- children: [
8869
- /* @__PURE__ */ jsxRuntime.jsx(
8870
- "div",
8871
- {
8872
- role: "presentation",
8873
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
8874
- "bg-ui-tag-orange-icon": variant === "warning"
8875
- })
8059
+ value: profile.id,
8060
+ className: "bg-ui-bg-base shadow-elevation-card-rest rounded-lg",
8061
+ children: [
8062
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
8063
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 overflow-hidden", children: [
8064
+ /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
8065
+ ui.IconButton,
8066
+ {
8067
+ size: "2xsmall",
8068
+ variant: "transparent",
8069
+ className: "group/trigger",
8070
+ disabled: !hasItems,
8071
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleRightMini, { className: "transition-transform group-data-[state=open]/trigger:rotate-90" })
8072
+ }
8073
+ ) }),
8074
+ !shippingOption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
8075
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-component-hover flex size-6 items-center justify-center rounded", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "text-ui-fg-subtle" }) }) }),
8076
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [
8077
+ /* @__PURE__ */ jsxRuntime.jsx(
8078
+ ui.Text,
8079
+ {
8080
+ size: "small",
8081
+ weight: "plus",
8082
+ leading: "compact",
8083
+ children: profile.name
8084
+ }
8085
+ ),
8086
+ /* @__PURE__ */ jsxRuntime.jsxs(
8087
+ ui.Text,
8088
+ {
8089
+ size: "small",
8090
+ leading: "compact",
8091
+ className: "text-ui-fg-subtle",
8092
+ children: [
8093
+ items.length,
8094
+ " ",
8095
+ pluralize(items.length, "items", "item")
8096
+ ]
8097
+ }
8098
+ )
8099
+ ] })
8100
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-1 items-center gap-[5px] overflow-hidden max-sm:flex-col max-sm:items-start", children: [
8101
+ /* @__PURE__ */ jsxRuntime.jsx(
8102
+ ui.Tooltip,
8103
+ {
8104
+ content: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
8105
+ "li",
8106
+ {
8107
+ children: `${item.quantity}x ${item.variant?.product?.title} (${item.variant?.title})`
8108
+ },
8109
+ item.id
8110
+ )) }),
8111
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
8112
+ ui.Badge,
8113
+ {
8114
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
8115
+ size: "xsmall",
8116
+ children: [
8117
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Shopping, { className: "shrink-0" }),
8118
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
8119
+ items.reduce(
8120
+ (acc, item) => acc + item.quantity,
8121
+ 0
8122
+ ),
8123
+ "x",
8124
+ " ",
8125
+ pluralize(items.length, "items", "item")
8126
+ ] })
8127
+ ]
8128
+ }
8129
+ )
8130
+ }
8131
+ ),
8132
+ /* @__PURE__ */ jsxRuntime.jsx(
8133
+ ui.Tooltip,
8134
+ {
8135
+ content: shippingOption.service_zone?.fulfillment_set?.location?.name,
8136
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
8137
+ ui.Badge,
8138
+ {
8139
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
8140
+ size: "xsmall",
8141
+ children: [
8142
+ /* @__PURE__ */ jsxRuntime.jsx(icons.Buildings, { className: "shrink-0" }),
8143
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.service_zone?.fulfillment_set?.location?.name })
8144
+ ]
8145
+ }
8146
+ )
8147
+ }
8148
+ ),
8149
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: shippingOption.name, children: /* @__PURE__ */ jsxRuntime.jsxs(
8150
+ ui.Badge,
8151
+ {
8152
+ className: "flex cursor-default items-center gap-x-[3px] overflow-hidden",
8153
+ size: "xsmall",
8154
+ children: [
8155
+ /* @__PURE__ */ jsxRuntime.jsx(icons.TruckFast, { className: "shrink-0" }),
8156
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: shippingOption.name })
8157
+ ]
8158
+ }
8159
+ ) })
8160
+ ] })
8161
+ ] }),
8162
+ shippingOption ? /* @__PURE__ */ jsxRuntime.jsx(
8163
+ ActionMenu,
8164
+ {
8165
+ groups: [
8166
+ {
8167
+ actions: [
8168
+ hasItems ? {
8169
+ label: "Edit shipping option",
8170
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Channels, {}),
8171
+ onClick: () => {
8172
+ setIsOpen(
8173
+ STACKED_FOCUS_MODAL_ID,
8174
+ true
8175
+ );
8176
+ setData({
8177
+ shippingProfileId: profile.id,
8178
+ shippingOption,
8179
+ shippingMethod
8180
+ });
8181
+ }
8182
+ } : void 0,
8183
+ {
8184
+ label: "Remove shipping option",
8185
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
8186
+ onClick: () => {
8187
+ if (shippingMethod) {
8188
+ if (addShippingMethodAction) {
8189
+ removeActionShippingMethod(
8190
+ addShippingMethodAction.id
8191
+ );
8192
+ } else {
8193
+ removeShippingMethod(
8194
+ shippingMethod.id
8195
+ );
8196
+ }
8197
+ }
8198
+ }
8199
+ }
8200
+ ].filter(Boolean)
8201
+ }
8202
+ ]
8203
+ }
8204
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
8205
+ StackedModalTrigger,
8206
+ {
8207
+ shippingProfileId: profile.id,
8208
+ shippingOption,
8209
+ shippingMethod,
8210
+ setData,
8211
+ children: "Add shipping option"
8212
+ }
8213
+ )
8214
+ ] }),
8215
+ /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Accordion.Content, { children: [
8216
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
8217
+ items.map((item, idx) => {
8218
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8219
+ /* @__PURE__ */ jsxRuntime.jsxs(
8220
+ "div",
8221
+ {
8222
+ className: "flex items-center gap-x-3 px-3",
8223
+ children: [
8224
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[56px] w-5 flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
8225
+ ui.Divider,
8226
+ {
8227
+ variant: "dashed",
8228
+ orientation: "vertical"
8229
+ }
8230
+ ) }),
8231
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 py-2", children: [
8232
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 items-center justify-center tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsxs(
8233
+ ui.Text,
8234
+ {
8235
+ size: "small",
8236
+ leading: "compact",
8237
+ className: "text-ui-fg-subtle",
8238
+ children: [
8239
+ item.quantity,
8240
+ "x"
8241
+ ]
8242
+ }
8243
+ ) }),
8244
+ /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { thumbnail: item.thumbnail }),
8245
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8246
+ /* @__PURE__ */ jsxRuntime.jsxs(
8247
+ ui.Text,
8248
+ {
8249
+ size: "small",
8250
+ leading: "compact",
8251
+ weight: "plus",
8252
+ children: [
8253
+ item.variant?.product?.title,
8254
+ " (",
8255
+ item.variant?.title,
8256
+ ")"
8257
+ ]
8258
+ }
8259
+ ),
8260
+ /* @__PURE__ */ jsxRuntime.jsx(
8261
+ ui.Text,
8262
+ {
8263
+ size: "small",
8264
+ leading: "compact",
8265
+ className: "text-ui-fg-subtle",
8266
+ children: item.variant?.options?.map((option) => option.value).join(" · ")
8267
+ }
8268
+ )
8269
+ ] })
8270
+ ] })
8271
+ ]
8272
+ },
8273
+ item.id
8274
+ ),
8275
+ idx !== items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" })
8276
+ ] }, item.id);
8277
+ })
8278
+ ] })
8279
+ ]
8280
+ },
8281
+ profile.id
8282
+ );
8283
+ }) })
8284
+ ] }) })
8285
+ ] }) }),
8286
+ /* @__PURE__ */ jsxRuntime.jsx(
8287
+ StackedFocusModal,
8288
+ {
8289
+ id: STACKED_FOCUS_MODAL_ID,
8290
+ onOpenChangeCallback: (open) => {
8291
+ if (!open) {
8292
+ setData(null);
8876
8293
  }
8877
- ),
8878
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
8879
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
8880
- labelValue,
8881
- ":"
8882
- ] }),
8883
- " ",
8884
- children
8885
- ] })
8886
- ]
8887
- }
8888
- );
8889
- }
8890
- );
8891
- InlineTip.displayName = "InlineTip";
8892
- const MetadataFieldSchema = zod.z.object({
8893
- key: zod.z.string(),
8894
- disabled: zod.z.boolean().optional(),
8895
- value: zod.z.any()
8896
- });
8897
- const MetadataSchema = zod.z.object({
8898
- metadata: zod.z.array(MetadataFieldSchema)
8899
- });
8900
- const Metadata = () => {
8901
- const { id } = reactRouterDom.useParams();
8902
- const { order, isPending, isError, error } = useOrder(id, {
8903
- fields: "metadata"
8904
- });
8905
- if (isError) {
8906
- throw error;
8907
- }
8908
- const isReady = !isPending && !!order;
8909
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8910
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8911
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
8912
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
8294
+ return open;
8295
+ },
8296
+ children: data && /* @__PURE__ */ jsxRuntime.jsx(ShippingProfileForm, { data, order, preview })
8297
+ }
8298
+ )
8913
8299
  ] }),
8914
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order?.metadata })
8300
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
8301
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
8302
+ /* @__PURE__ */ jsxRuntime.jsx(
8303
+ ui.Button,
8304
+ {
8305
+ size: "small",
8306
+ type: "button",
8307
+ isLoading: isSubmitting,
8308
+ onClick: onSubmit,
8309
+ children: "Save"
8310
+ }
8311
+ )
8312
+ ] }) })
8915
8313
  ] });
8916
8314
  };
8917
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
8918
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
8919
- const MetadataForm = ({ orderId, metadata }) => {
8920
- const { handleSuccess } = useRouteModal();
8921
- const hasUneditableRows = getHasUneditableRows(metadata);
8922
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
8315
+ const StackedModalTrigger = ({
8316
+ shippingProfileId,
8317
+ shippingOption,
8318
+ shippingMethod,
8319
+ setData,
8320
+ children
8321
+ }) => {
8322
+ const { setIsOpen, getIsOpen } = useStackedModal();
8323
+ const isOpen = getIsOpen(STACKED_FOCUS_MODAL_ID);
8324
+ const onToggle = () => {
8325
+ if (isOpen) {
8326
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
8327
+ setData(null);
8328
+ } else {
8329
+ setIsOpen(STACKED_FOCUS_MODAL_ID, true);
8330
+ setData({
8331
+ shippingProfileId,
8332
+ shippingOption,
8333
+ shippingMethod
8334
+ });
8335
+ }
8336
+ };
8337
+ return /* @__PURE__ */ jsxRuntime.jsx(
8338
+ ui.Button,
8339
+ {
8340
+ size: "small",
8341
+ variant: "secondary",
8342
+ onClick: onToggle,
8343
+ className: "text-ui-fg-primary shrink-0",
8344
+ children
8345
+ }
8346
+ );
8347
+ };
8348
+ const ShippingProfileForm = ({
8349
+ data,
8350
+ order,
8351
+ preview
8352
+ }) => {
8353
+ const { setIsOpen } = useStackedModal();
8923
8354
  const form = reactHookForm.useForm({
8355
+ resolver: zod$1.zodResolver(shippingMethodSchema),
8924
8356
  defaultValues: {
8925
- metadata: getDefaultValues(metadata)
8926
- },
8927
- resolver: zod$1.zodResolver(MetadataSchema)
8357
+ location_id: data.shippingOption?.service_zone?.fulfillment_set?.location?.id,
8358
+ shipping_option_id: data.shippingOption?.id,
8359
+ custom_amount: data.shippingMethod?.amount
8360
+ }
8928
8361
  });
8929
- const handleSubmit = form.handleSubmit(async (data) => {
8930
- const parsedData = parseValues(data);
8931
- await mutateAsync(
8362
+ const { mutateAsync: addShippingMethod, isPending } = useDraftOrderAddShippingMethod(order.id);
8363
+ const {
8364
+ mutateAsync: updateShippingMethod,
8365
+ isPending: isUpdatingShippingMethod
8366
+ } = useDraftOrderUpdateShippingMethod(order.id);
8367
+ const onSubmit = form.handleSubmit(async (values) => {
8368
+ if (isEqual__default.default(values, form.formState.defaultValues)) {
8369
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
8370
+ return;
8371
+ }
8372
+ if (data.shippingMethod) {
8373
+ await updateShippingMethod(
8374
+ {
8375
+ method_id: data.shippingMethod.id,
8376
+ shipping_option_id: values.shipping_option_id,
8377
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
8378
+ },
8379
+ {
8380
+ onError: (e) => {
8381
+ ui.toast.error(e.message);
8382
+ },
8383
+ onSuccess: () => {
8384
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
8385
+ }
8386
+ }
8387
+ );
8388
+ return;
8389
+ }
8390
+ await addShippingMethod(
8932
8391
  {
8933
- metadata: parsedData
8392
+ shipping_option_id: values.shipping_option_id,
8393
+ custom_amount: values.custom_amount ? convertNumber(values.custom_amount) : void 0
8934
8394
  },
8935
8395
  {
8936
- onSuccess: () => {
8937
- ui.toast.success("Metadata updated");
8938
- handleSuccess();
8396
+ onError: (e) => {
8397
+ ui.toast.error(e.message);
8939
8398
  },
8940
- onError: (error) => {
8941
- ui.toast.error(error.message);
8399
+ onSuccess: () => {
8400
+ setIsOpen(STACKED_FOCUS_MODAL_ID, false);
8942
8401
  }
8943
8402
  }
8944
8403
  );
8945
8404
  });
8946
- const { fields, insert, remove } = reactHookForm.useFieldArray({
8947
- control: form.control,
8948
- name: "metadata"
8949
- });
8950
- function deleteRow(index) {
8951
- remove(index);
8952
- if (fields.length === 1) {
8953
- insert(0, {
8954
- key: "",
8955
- value: "",
8956
- disabled: false
8957
- });
8958
- }
8959
- }
8960
- function insertRow(index, position) {
8961
- insert(index + (position === "above" ? 0 : 1), {
8962
- key: "",
8963
- value: "",
8964
- disabled: false
8965
- });
8966
- }
8967
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8405
+ return /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8968
8406
  KeyboundForm,
8969
8407
  {
8970
- onSubmit: handleSubmit,
8971
- className: "flex flex-1 flex-col overflow-hidden",
8408
+ className: "flex h-full flex-col overflow-hidden",
8409
+ onSubmit,
8972
8410
  children: [
8973
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
8974
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
8975
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
8976
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
8977
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
8978
- ] }),
8979
- fields.map((field, index) => {
8980
- const isDisabled = field.disabled || false;
8981
- let placeholder = "-";
8982
- if (typeof field.value === "object") {
8983
- placeholder = "{ ... }";
8984
- }
8985
- if (Array.isArray(field.value)) {
8986
- placeholder = "[ ... ]";
8987
- }
8988
- return /* @__PURE__ */ jsxRuntime.jsx(
8989
- ConditionalTooltip,
8990
- {
8991
- showTooltip: isDisabled,
8992
- content: "This row is disabled because it contains non-primitive data.",
8993
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/table relative", children: [
8994
- /* @__PURE__ */ jsxRuntime.jsxs(
8995
- "div",
8996
- {
8997
- className: ui.clx("grid grid-cols-2 divide-x", {
8998
- "overflow-hidden rounded-b-lg": index === fields.length - 1
8999
- }),
9000
- children: [
9001
- /* @__PURE__ */ jsxRuntime.jsx(
9002
- Form$2.Field,
9003
- {
9004
- control: form.control,
9005
- name: `metadata.${index}.key`,
9006
- render: ({ field: field2 }) => {
9007
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
9008
- GridInput,
9009
- {
9010
- "aria-labelledby": METADATA_KEY_LABEL_ID,
9011
- ...field2,
9012
- disabled: isDisabled,
9013
- placeholder: "Key"
9014
- }
9015
- ) }) });
9016
- }
9017
- }
9018
- ),
9019
- /* @__PURE__ */ jsxRuntime.jsx(
9020
- Form$2.Field,
9021
- {
9022
- control: form.control,
9023
- name: `metadata.${index}.value`,
9024
- render: ({ field: { value, ...field2 } }) => {
9025
- return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
9026
- GridInput,
9027
- {
9028
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
9029
- ...field2,
9030
- value: isDisabled ? placeholder : value,
9031
- disabled: isDisabled,
9032
- placeholder: "Value"
9033
- }
9034
- ) }) });
9035
- }
9036
- }
9037
- )
9038
- ]
9039
- }
9040
- ),
9041
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu, { children: [
9042
- /* @__PURE__ */ jsxRuntime.jsx(
9043
- ui.DropdownMenu.Trigger,
9044
- {
9045
- className: ui.clx(
9046
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
9047
- {
9048
- hidden: isDisabled
9049
- }
9050
- ),
9051
- disabled: isDisabled,
9052
- asChild: true,
9053
- children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisVertical, {}) })
9054
- }
9055
- ),
9056
- /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenu.Content, { children: [
9057
- /* @__PURE__ */ jsxRuntime.jsxs(
9058
- ui.DropdownMenu.Item,
9059
- {
9060
- className: "gap-x-2",
9061
- onClick: () => insertRow(index, "above"),
9062
- children: [
9063
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpMini, { className: "text-ui-fg-subtle" }),
9064
- "Insert row above"
9065
- ]
9066
- }
9067
- ),
9068
- /* @__PURE__ */ jsxRuntime.jsxs(
9069
- ui.DropdownMenu.Item,
9070
- {
9071
- className: "gap-x-2",
9072
- onClick: () => insertRow(index, "below"),
9073
- children: [
9074
- /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownMini, { className: "text-ui-fg-subtle" }),
9075
- "Insert row below"
9076
- ]
9077
- }
9078
- ),
9079
- /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenu.Separator, {}),
9080
- /* @__PURE__ */ jsxRuntime.jsxs(
9081
- ui.DropdownMenu.Item,
9082
- {
9083
- className: "gap-x-2",
9084
- onClick: () => deleteRow(index),
9085
- children: [
9086
- /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "text-ui-fg-subtle" }),
9087
- "Delete row"
9088
- ]
9089
- }
9090
- )
9091
- ] })
9092
- ] })
9093
- ] })
9094
- },
9095
- field.id
9096
- );
9097
- })
8411
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Header, {}),
8412
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-6 px-6 py-16", children: [
8413
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8414
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Shipping" }) }),
8415
+ /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.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." }) })
9098
8416
  ] }),
9099
- hasUneditableRows && /* @__PURE__ */ jsxRuntime.jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
9100
- ] }),
9101
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9102
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
9103
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
8417
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
8418
+ /* @__PURE__ */ jsxRuntime.jsx(
8419
+ LocationField,
8420
+ {
8421
+ control: form.control,
8422
+ setValue: form.setValue
8423
+ }
8424
+ ),
8425
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
8426
+ /* @__PURE__ */ jsxRuntime.jsx(
8427
+ ShippingOptionField,
8428
+ {
8429
+ shippingProfileId: data.shippingProfileId,
8430
+ preview,
8431
+ control: form.control
8432
+ }
8433
+ ),
8434
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
8435
+ /* @__PURE__ */ jsxRuntime.jsx(
8436
+ CustomAmountField,
8437
+ {
8438
+ control: form.control,
8439
+ currencyCode: order.currency_code
8440
+ }
8441
+ ),
8442
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
8443
+ /* @__PURE__ */ jsxRuntime.jsx(
8444
+ ItemsPreview,
8445
+ {
8446
+ order,
8447
+ shippingProfileId: data.shippingProfileId
8448
+ }
8449
+ )
8450
+ ] }) }) }),
8451
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-x-2", children: [
8452
+ /* @__PURE__ */ jsxRuntime.jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
8453
+ /* @__PURE__ */ jsxRuntime.jsx(
8454
+ ui.Button,
8455
+ {
8456
+ size: "small",
8457
+ type: "submit",
8458
+ isLoading: isPending || isUpdatingShippingMethod,
8459
+ children: data.shippingMethod ? "Update" : "Add"
8460
+ }
8461
+ )
9104
8462
  ] }) })
9105
8463
  ]
9106
8464
  }
9107
- ) });
8465
+ ) }) });
8466
+ };
8467
+ const shippingMethodSchema = zod.z.object({
8468
+ location_id: zod.z.string(),
8469
+ shipping_option_id: zod.z.string(),
8470
+ custom_amount: zod.z.union([zod.z.number(), zod.z.string()]).optional()
8471
+ });
8472
+ const ItemsPreview = ({ order, shippingProfileId }) => {
8473
+ const matches = order.items.filter(
8474
+ (item) => item.variant?.product?.shipping_profile?.id === shippingProfileId
8475
+ );
8476
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-6", children: [
8477
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8478
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "Items to ship" }),
8479
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: "Items with the selected shipping profile." })
8480
+ ] }) }),
8481
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-subtle shadow-elevation-card-rest rounded-xl", children: [
8482
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-muted grid grid-cols-2 gap-3 px-4 py-2", children: [
8483
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Item" }) }),
8484
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", children: "Quantity" }) })
8485
+ ] }),
8486
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1.5 px-[5px] pb-[5px]", children: matches.length > 0 ? matches?.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
8487
+ "div",
8488
+ {
8489
+ className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-2 items-center gap-3 rounded-lg px-4 py-2",
8490
+ children: [
8491
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
8492
+ /* @__PURE__ */ jsxRuntime.jsx(
8493
+ Thumbnail,
8494
+ {
8495
+ thumbnail: item.thumbnail,
8496
+ alt: item.product_title ?? void 0
8497
+ }
8498
+ ),
8499
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8500
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
8501
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: item.product_title }),
8502
+ /* @__PURE__ */ jsxRuntime.jsxs(
8503
+ ui.Text,
8504
+ {
8505
+ size: "small",
8506
+ leading: "compact",
8507
+ className: "text-ui-fg-subtle",
8508
+ children: [
8509
+ "(",
8510
+ item.variant_title,
8511
+ ")"
8512
+ ]
8513
+ }
8514
+ )
8515
+ ] }),
8516
+ /* @__PURE__ */ jsxRuntime.jsx(
8517
+ ui.Text,
8518
+ {
8519
+ size: "small",
8520
+ leading: "compact",
8521
+ className: "text-ui-fg-subtle",
8522
+ children: item.variant_sku
8523
+ }
8524
+ )
8525
+ ] })
8526
+ ] }),
8527
+ /* @__PURE__ */ jsxRuntime.jsxs(
8528
+ ui.Text,
8529
+ {
8530
+ size: "small",
8531
+ leading: "compact",
8532
+ className: "text-ui-fg-subtle",
8533
+ children: [
8534
+ item.quantity,
8535
+ "x"
8536
+ ]
8537
+ }
8538
+ )
8539
+ ]
8540
+ },
8541
+ item.id
8542
+ )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest flex flex-col items-center justify-center gap-1 gap-x-3 rounded-lg p-4", children: [
8543
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: "No items found" }),
8544
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
8545
+ 'No items found for "',
8546
+ query,
8547
+ '".'
8548
+ ] })
8549
+ ] }) })
8550
+ ] })
8551
+ ] });
9108
8552
  };
9109
- const GridInput = React.forwardRef(({ className, ...props }, ref) => {
8553
+ const LocationField = ({ control, setValue }) => {
8554
+ const locations = useComboboxData({
8555
+ queryKey: ["locations"],
8556
+ queryFn: async (params) => {
8557
+ return await sdk.admin.stockLocation.list(params);
8558
+ },
8559
+ getOptions: (data) => {
8560
+ return data.stock_locations.map((location) => ({
8561
+ label: location.name,
8562
+ value: location.id
8563
+ }));
8564
+ }
8565
+ });
9110
8566
  return /* @__PURE__ */ jsxRuntime.jsx(
9111
- "input",
8567
+ Form$2.Field,
9112
8568
  {
9113
- ref,
9114
- ...props,
9115
- autoComplete: "off",
9116
- className: ui.clx(
9117
- "txt-compact-small text-ui-fg-base placeholder:text-ui-fg-muted disabled:text-ui-fg-disabled disabled:bg-ui-bg-base bg-transparent px-2 py-1.5 outline-none",
9118
- className
9119
- )
8569
+ control,
8570
+ name: "location_id",
8571
+ render: ({ field: { onChange, ...field } }) => {
8572
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
8573
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8574
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Location" }),
8575
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose where you want to ship the items from." })
8576
+ ] }),
8577
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8578
+ Combobox,
8579
+ {
8580
+ options: locations.options,
8581
+ fetchNextPage: locations.fetchNextPage,
8582
+ isFetchingNextPage: locations.isFetchingNextPage,
8583
+ searchValue: locations.searchValue,
8584
+ onSearchValueChange: locations.onSearchValueChange,
8585
+ placeholder: "Select location",
8586
+ onChange: (value) => {
8587
+ setValue("shipping_option_id", "", {
8588
+ shouldDirty: true,
8589
+ shouldTouch: true
8590
+ });
8591
+ onChange(value);
8592
+ },
8593
+ ...field
8594
+ }
8595
+ ) })
8596
+ ] }) });
8597
+ }
9120
8598
  }
9121
8599
  );
9122
- });
9123
- GridInput.displayName = "MetadataForm.GridInput";
9124
- const PlaceholderInner = () => {
9125
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
9126
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
9127
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9128
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
9129
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
9130
- ] }) })
9131
- ] });
9132
8600
  };
9133
- const EDITABLE_TYPES = ["string", "number", "boolean"];
9134
- function getDefaultValues(metadata) {
9135
- if (!metadata || !Object.keys(metadata).length) {
9136
- return [
9137
- {
9138
- key: "",
9139
- value: "",
9140
- disabled: false
9141
- }
9142
- ];
9143
- }
9144
- return Object.entries(metadata).map(([key, value]) => {
9145
- if (!EDITABLE_TYPES.includes(typeof value)) {
9146
- return {
9147
- key,
9148
- value,
9149
- disabled: true
9150
- };
9151
- }
9152
- let stringValue = value;
9153
- if (typeof value !== "string") {
9154
- stringValue = JSON.stringify(value);
9155
- }
9156
- return {
9157
- key,
9158
- value: stringValue,
9159
- original_key: key
9160
- };
8601
+ const ShippingOptionField = ({
8602
+ shippingProfileId,
8603
+ preview,
8604
+ control
8605
+ }) => {
8606
+ const locationId = reactHookForm.useWatch({ control, name: "location_id" });
8607
+ const shippingOptions = useComboboxData({
8608
+ queryKey: ["shipping_options", locationId, shippingProfileId],
8609
+ queryFn: async (params) => {
8610
+ return await sdk.admin.shippingOption.list({
8611
+ ...params,
8612
+ stock_location_id: locationId,
8613
+ shipping_profile_id: shippingProfileId
8614
+ });
8615
+ },
8616
+ getOptions: (data) => {
8617
+ return data.shipping_options.map((option) => {
8618
+ if (option.rules?.find(
8619
+ (r) => r.attribute === "is_return" && r.value === "true"
8620
+ )) {
8621
+ return void 0;
8622
+ }
8623
+ return {
8624
+ label: option.name,
8625
+ value: option.id
8626
+ };
8627
+ }).filter(Boolean);
8628
+ },
8629
+ enabled: !!locationId && !!shippingProfileId,
8630
+ defaultValue: preview.shipping_methods[0]?.shipping_option_id || void 0
9161
8631
  });
9162
- }
9163
- function parseValues(values) {
9164
- const metadata = values.metadata;
9165
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
9166
- if (isEmpty) {
9167
- return null;
9168
- }
9169
- const update = {};
9170
- metadata.forEach((field) => {
9171
- let key = field.key;
9172
- let value = field.value;
9173
- const disabled = field.disabled;
9174
- if (!key || !value) {
9175
- return;
9176
- }
9177
- if (disabled) {
9178
- update[key] = value;
9179
- return;
8632
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
8633
+ return /* @__PURE__ */ jsxRuntime.jsx(
8634
+ Form$2.Field,
8635
+ {
8636
+ control,
8637
+ name: "shipping_option_id",
8638
+ render: ({ field }) => {
8639
+ return /* @__PURE__ */ jsxRuntime.jsx(Form$2.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
8640
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8641
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Shipping option" }),
8642
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
8643
+ ] }),
8644
+ /* @__PURE__ */ jsxRuntime.jsx(
8645
+ ConditionalTooltip,
8646
+ {
8647
+ content: tooltipContent,
8648
+ showTooltip: !locationId || !shippingProfileId,
8649
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8650
+ Combobox,
8651
+ {
8652
+ options: shippingOptions.options,
8653
+ fetchNextPage: shippingOptions.fetchNextPage,
8654
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
8655
+ searchValue: shippingOptions.searchValue,
8656
+ onSearchValueChange: shippingOptions.onSearchValueChange,
8657
+ placeholder: "Select shipping option",
8658
+ ...field,
8659
+ disabled: !locationId || !shippingProfileId
8660
+ }
8661
+ ) }) })
8662
+ }
8663
+ )
8664
+ ] }) });
8665
+ }
9180
8666
  }
9181
- key = key.trim();
9182
- value = value.trim();
9183
- if (value === "true") {
9184
- update[key] = true;
9185
- } else if (value === "false") {
9186
- update[key] = false;
9187
- } else {
9188
- const parsedNumber = parseFloat(value);
9189
- if (!isNaN(parsedNumber)) {
9190
- update[key] = parsedNumber;
9191
- } else {
9192
- update[key] = value;
8667
+ );
8668
+ };
8669
+ const CustomAmountField = ({
8670
+ control,
8671
+ currencyCode
8672
+ }) => {
8673
+ return /* @__PURE__ */ jsxRuntime.jsx(
8674
+ Form$2.Field,
8675
+ {
8676
+ control,
8677
+ name: "custom_amount",
8678
+ render: ({ field: { onChange, ...field } }) => {
8679
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
8680
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8681
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
8682
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
8683
+ ] }),
8684
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8685
+ ui.CurrencyInput,
8686
+ {
8687
+ ...field,
8688
+ onValueChange: (value) => onChange(value),
8689
+ symbol: getNativeSymbol(currencyCode),
8690
+ code: currencyCode
8691
+ }
8692
+ ) })
8693
+ ] });
9193
8694
  }
9194
8695
  }
9195
- });
9196
- return update;
9197
- }
9198
- function getHasUneditableRows(metadata) {
9199
- if (!metadata) {
9200
- return false;
9201
- }
9202
- return Object.values(metadata).some(
9203
- (value) => !EDITABLE_TYPES.includes(typeof value)
9204
8696
  );
9205
- }
9206
- const PROMOTION_QUERY_KEY = "promotions";
9207
- const promotionsQueryKeys = {
9208
- list: (query2) => [
9209
- PROMOTION_QUERY_KEY,
9210
- query2 ? query2 : void 0
9211
- ],
9212
- detail: (id, query2) => [
9213
- PROMOTION_QUERY_KEY,
9214
- id,
9215
- query2 ? query2 : void 0
9216
- ]
9217
- };
9218
- const usePromotions = (query2, options) => {
9219
- const { data, ...rest } = reactQuery.useQuery({
9220
- queryKey: promotionsQueryKeys.list(query2),
9221
- queryFn: async () => sdk.admin.promotion.list(query2),
9222
- ...options
9223
- });
9224
- return { ...data, ...rest };
9225
8697
  };
9226
- const Promotions = () => {
8698
+ const ShippingAddress = () => {
9227
8699
  const { id } = reactRouterDom.useParams();
9228
- const {
9229
- order: preview,
9230
- isError: isPreviewError,
9231
- error: previewError
9232
- } = useOrderPreview(id, void 0);
9233
- useInitiateOrderEdit({ preview });
9234
- const { onCancel } = useCancelOrderEdit({ preview });
9235
- if (isPreviewError) {
9236
- throw previewError;
8700
+ const { order, isPending, isError, error } = useOrder(id, {
8701
+ fields: "+shipping_address"
8702
+ });
8703
+ if (isError) {
8704
+ throw error;
9237
8705
  }
9238
- const isReady = !!preview;
9239
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
9240
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
9241
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
8706
+ const isReady = !isPending && !!order;
8707
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8708
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8709
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
8710
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
8711
+ ] }),
8712
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
9242
8713
  ] });
9243
8714
  };
9244
- const PromotionForm = ({ preview }) => {
9245
- const { items, shipping_methods } = preview;
9246
- const [isSubmitting, setIsSubmitting] = React.useState(false);
9247
- const [comboboxValue, setComboboxValue] = React.useState("");
8715
+ const ShippingAddressForm = ({ order }) => {
8716
+ const form = reactHookForm.useForm({
8717
+ defaultValues: {
8718
+ first_name: order.shipping_address?.first_name ?? "",
8719
+ last_name: order.shipping_address?.last_name ?? "",
8720
+ company: order.shipping_address?.company ?? "",
8721
+ address_1: order.shipping_address?.address_1 ?? "",
8722
+ address_2: order.shipping_address?.address_2 ?? "",
8723
+ city: order.shipping_address?.city ?? "",
8724
+ province: order.shipping_address?.province ?? "",
8725
+ country_code: order.shipping_address?.country_code ?? "",
8726
+ postal_code: order.shipping_address?.postal_code ?? "",
8727
+ phone: order.shipping_address?.phone ?? ""
8728
+ },
8729
+ resolver: zod$1.zodResolver(schema$2)
8730
+ });
8731
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9248
8732
  const { handleSuccess } = useRouteModal();
9249
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
9250
- const promoIds = getPromotionIds(items, shipping_methods);
9251
- const { promotions, isPending, isError, error } = usePromotions(
8733
+ const onSubmit = form.handleSubmit(async (data) => {
8734
+ await mutateAsync(
8735
+ {
8736
+ shipping_address: {
8737
+ first_name: data.first_name,
8738
+ last_name: data.last_name,
8739
+ company: data.company,
8740
+ address_1: data.address_1,
8741
+ address_2: data.address_2,
8742
+ city: data.city,
8743
+ province: data.province,
8744
+ country_code: data.country_code,
8745
+ postal_code: data.postal_code,
8746
+ phone: data.phone
8747
+ }
8748
+ },
8749
+ {
8750
+ onSuccess: () => {
8751
+ handleSuccess();
8752
+ },
8753
+ onError: (error) => {
8754
+ ui.toast.error(error.message);
8755
+ }
8756
+ }
8757
+ );
8758
+ });
8759
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8760
+ KeyboundForm,
9252
8761
  {
9253
- id: promoIds
8762
+ className: "flex flex-1 flex-col overflow-hidden",
8763
+ onSubmit,
8764
+ children: [
8765
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-4", children: [
8766
+ /* @__PURE__ */ jsxRuntime.jsx(
8767
+ Form$2.Field,
8768
+ {
8769
+ control: form.control,
8770
+ name: "country_code",
8771
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8772
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
8773
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
8774
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8775
+ ] })
8776
+ }
8777
+ ),
8778
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8779
+ /* @__PURE__ */ jsxRuntime.jsx(
8780
+ Form$2.Field,
8781
+ {
8782
+ control: form.control,
8783
+ name: "first_name",
8784
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8785
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
8786
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8787
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8788
+ ] })
8789
+ }
8790
+ ),
8791
+ /* @__PURE__ */ jsxRuntime.jsx(
8792
+ Form$2.Field,
8793
+ {
8794
+ control: form.control,
8795
+ name: "last_name",
8796
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8797
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
8798
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8799
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8800
+ ] })
8801
+ }
8802
+ )
8803
+ ] }),
8804
+ /* @__PURE__ */ jsxRuntime.jsx(
8805
+ Form$2.Field,
8806
+ {
8807
+ control: form.control,
8808
+ name: "company",
8809
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8810
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
8811
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8812
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8813
+ ] })
8814
+ }
8815
+ ),
8816
+ /* @__PURE__ */ jsxRuntime.jsx(
8817
+ Form$2.Field,
8818
+ {
8819
+ control: form.control,
8820
+ name: "address_1",
8821
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8822
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
8823
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8824
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8825
+ ] })
8826
+ }
8827
+ ),
8828
+ /* @__PURE__ */ jsxRuntime.jsx(
8829
+ Form$2.Field,
8830
+ {
8831
+ control: form.control,
8832
+ name: "address_2",
8833
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8834
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
8835
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8836
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8837
+ ] })
8838
+ }
8839
+ ),
8840
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8841
+ /* @__PURE__ */ jsxRuntime.jsx(
8842
+ Form$2.Field,
8843
+ {
8844
+ control: form.control,
8845
+ name: "postal_code",
8846
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8847
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
8848
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8849
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8850
+ ] })
8851
+ }
8852
+ ),
8853
+ /* @__PURE__ */ jsxRuntime.jsx(
8854
+ Form$2.Field,
8855
+ {
8856
+ control: form.control,
8857
+ name: "city",
8858
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8859
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
8860
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8861
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8862
+ ] })
8863
+ }
8864
+ )
8865
+ ] }),
8866
+ /* @__PURE__ */ jsxRuntime.jsx(
8867
+ Form$2.Field,
8868
+ {
8869
+ control: form.control,
8870
+ name: "province",
8871
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8872
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
8873
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8874
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8875
+ ] })
8876
+ }
8877
+ ),
8878
+ /* @__PURE__ */ jsxRuntime.jsx(
8879
+ Form$2.Field,
8880
+ {
8881
+ control: form.control,
8882
+ name: "phone",
8883
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8884
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
8885
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8886
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8887
+ ] })
8888
+ }
8889
+ )
8890
+ ] }) }),
8891
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
8892
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
8893
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
8894
+ ] }) })
8895
+ ]
8896
+ }
8897
+ ) });
8898
+ };
8899
+ const schema$2 = addressSchema;
8900
+ const SalesChannel = () => {
8901
+ const { id } = reactRouterDom.useParams();
8902
+ const { draft_order, isPending, isError, error } = useDraftOrder(
8903
+ id,
8904
+ {
8905
+ fields: "+sales_channel_id"
9254
8906
  },
9255
8907
  {
9256
- enabled: !!promoIds.length
8908
+ enabled: !!id
9257
8909
  }
9258
8910
  );
9259
- const comboboxData = useComboboxData({
9260
- queryKey: ["promotions", "combobox", promoIds],
9261
- queryFn: async (params) => {
9262
- return await sdk.admin.promotion.list({
9263
- ...params,
9264
- id: {
9265
- $nin: promoIds
9266
- }
9267
- });
8911
+ if (isError) {
8912
+ throw error;
8913
+ }
8914
+ const ISrEADY = !!draft_order && !isPending;
8915
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8916
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8917
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
8918
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
8919
+ ] }),
8920
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
8921
+ ] });
8922
+ };
8923
+ const SalesChannelForm = ({ order }) => {
8924
+ const form = reactHookForm.useForm({
8925
+ defaultValues: {
8926
+ sales_channel_id: order.sales_channel_id || ""
9268
8927
  },
9269
- getOptions: (data) => {
9270
- return data.promotions.map((promotion) => ({
9271
- label: promotion.code,
9272
- value: promotion.code
9273
- }));
9274
- }
8928
+ resolver: zod$1.zodResolver(schema$1)
9275
8929
  });
9276
- const add = async (value) => {
9277
- if (!value) {
9278
- return;
9279
- }
9280
- addPromotions(
8930
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
8931
+ const { handleSuccess } = useRouteModal();
8932
+ const onSubmit = form.handleSubmit(async (data) => {
8933
+ await mutateAsync(
9281
8934
  {
9282
- promo_codes: [value]
8935
+ sales_channel_id: data.sales_channel_id
9283
8936
  },
9284
8937
  {
9285
- onError: (e) => {
9286
- ui.toast.error(e.message);
9287
- comboboxData.onSearchValueChange("");
9288
- setComboboxValue("");
9289
- },
9290
8938
  onSuccess: () => {
9291
- comboboxData.onSearchValueChange("");
9292
- setComboboxValue("");
8939
+ ui.toast.success("Sales channel updated");
8940
+ handleSuccess();
8941
+ },
8942
+ onError: (error) => {
8943
+ ui.toast.error(error.message);
9293
8944
  }
9294
8945
  }
9295
8946
  );
9296
- };
9297
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
9298
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
9299
- const onSubmit = async () => {
9300
- setIsSubmitting(true);
9301
- let requestSucceeded = false;
9302
- await requestOrderEdit(void 0, {
9303
- onError: (e) => {
9304
- ui.toast.error(e.message);
9305
- },
9306
- onSuccess: () => {
9307
- requestSucceeded = true;
9308
- }
9309
- });
9310
- if (!requestSucceeded) {
9311
- setIsSubmitting(false);
9312
- return;
8947
+ });
8948
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8949
+ KeyboundForm,
8950
+ {
8951
+ className: "flex flex-1 flex-col overflow-hidden",
8952
+ onSubmit,
8953
+ children: [
8954
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
8955
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
8956
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
8957
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
8958
+ ] }) })
8959
+ ]
9313
8960
  }
9314
- await confirmOrderEdit(void 0, {
9315
- onError: (e) => {
9316
- ui.toast.error(e.message);
9317
- },
9318
- onSuccess: () => {
9319
- handleSuccess();
9320
- },
9321
- onSettled: () => {
9322
- setIsSubmitting(false);
8961
+ ) });
8962
+ };
8963
+ const SalesChannelField = ({ control, order }) => {
8964
+ const salesChannels = useComboboxData({
8965
+ queryFn: async (params) => {
8966
+ return await sdk.admin.salesChannel.list(params);
8967
+ },
8968
+ queryKey: ["sales-channels"],
8969
+ getOptions: (data) => {
8970
+ return data.sales_channels.map((salesChannel) => ({
8971
+ label: salesChannel.name,
8972
+ value: salesChannel.id
8973
+ }));
8974
+ },
8975
+ defaultValue: order.sales_channel_id || void 0
8976
+ });
8977
+ return /* @__PURE__ */ jsxRuntime.jsx(
8978
+ Form$2.Field,
8979
+ {
8980
+ control,
8981
+ name: "sales_channel_id",
8982
+ render: ({ field }) => {
8983
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8984
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
8985
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8986
+ Combobox,
8987
+ {
8988
+ options: salesChannels.options,
8989
+ fetchNextPage: salesChannels.fetchNextPage,
8990
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
8991
+ searchValue: salesChannels.searchValue,
8992
+ onSearchValueChange: salesChannels.onSearchValueChange,
8993
+ placeholder: "Select sales channel",
8994
+ ...field
8995
+ }
8996
+ ) }),
8997
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8998
+ ] });
9323
8999
  }
9324
- });
9325
- };
9000
+ }
9001
+ );
9002
+ };
9003
+ const schema$1 = zod.z.object({
9004
+ sales_channel_id: zod.z.string().min(1)
9005
+ });
9006
+ const TransferOwnership = () => {
9007
+ const { id } = reactRouterDom.useParams();
9008
+ const { draft_order, isPending, isError, error } = useDraftOrder(id, {
9009
+ fields: "id,customer_id,customer.*"
9010
+ });
9326
9011
  if (isError) {
9327
9012
  throw error;
9328
9013
  }
9329
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
9330
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
9331
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
9014
+ const isReady = !isPending && !!draft_order;
9015
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
9016
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
9017
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Transfer Ownership" }) }),
9018
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Transfer the ownership of this draft order to a new customer" }) })
9019
+ ] }),
9020
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(TransferOwnershipForm, { order: draft_order })
9021
+ ] });
9022
+ };
9023
+ const TransferOwnershipForm = ({ order }) => {
9024
+ const form = reactHookForm.useForm({
9025
+ defaultValues: {
9026
+ customer_id: order.customer_id || ""
9027
+ },
9028
+ resolver: zod$1.zodResolver(schema)
9029
+ });
9030
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9031
+ const { handleSuccess } = useRouteModal();
9032
+ const name = [order.customer?.first_name, order.customer?.last_name].filter(Boolean).join(" ");
9033
+ const currentCustomer = order.customer ? {
9034
+ label: name ? `${name} (${order.customer.email})` : order.customer.email,
9035
+ value: order.customer.id
9036
+ } : null;
9037
+ const onSubmit = form.handleSubmit(async (data) => {
9038
+ await mutateAsync(
9039
+ { customer_id: data.customer_id },
9040
+ {
9041
+ onSuccess: () => {
9042
+ ui.toast.success("Customer updated");
9043
+ handleSuccess();
9044
+ },
9045
+ onError: (error) => {
9046
+ ui.toast.error(error.message);
9047
+ }
9048
+ }
9049
+ );
9050
+ });
9051
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
9052
+ KeyboundForm,
9053
+ {
9054
+ className: "flex flex-1 flex-col overflow-hidden",
9055
+ onSubmit,
9056
+ children: [
9057
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: [
9058
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center bg-ui-bg-component rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(Illustration, {}) }),
9059
+ currentCustomer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-3", children: [
9060
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
9061
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "current-customer", children: "Current owner" }),
9062
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { children: "The customer that is currently associated with this draft order." })
9063
+ ] }),
9064
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { disabled: true, value: currentCustomer.value, children: [
9065
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { id: "current-customer", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
9066
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: currentCustomer.value, children: currentCustomer.label }) })
9067
+ ] })
9068
+ ] }),
9069
+ /* @__PURE__ */ jsxRuntime.jsx(
9070
+ CustomerField,
9071
+ {
9072
+ control: form.control,
9073
+ currentCustomerId: order.customer_id
9074
+ }
9075
+ )
9076
+ ] }),
9077
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
9078
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", children: "Cancel" }) }),
9079
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9080
+ ] }) })
9081
+ ]
9082
+ }
9083
+ ) });
9084
+ };
9085
+ const CustomerField = ({ control, currentCustomerId }) => {
9086
+ const customers = useComboboxData({
9087
+ queryFn: async (params) => {
9088
+ return await sdk.admin.customer.list({
9089
+ ...params,
9090
+ id: currentCustomerId ? { $nin: [currentCustomerId] } : void 0
9091
+ });
9092
+ },
9093
+ queryKey: ["customers"],
9094
+ getOptions: (data) => {
9095
+ return data.customers.map((customer) => {
9096
+ const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ");
9097
+ return {
9098
+ label: name ? `${name} (${customer.email})` : customer.email,
9099
+ value: customer.id
9100
+ };
9101
+ });
9102
+ }
9103
+ });
9104
+ return /* @__PURE__ */ jsxRuntime.jsx(
9105
+ Form$2.Field,
9106
+ {
9107
+ name: "customer_id",
9108
+ control,
9109
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { className: "space-y-3", children: [
9332
9110
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
9333
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
9334
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
9111
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "New customer" }),
9112
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Hint, { children: "The customer to transfer this draft order to." })
9335
9113
  ] }),
9114
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
9115
+ Combobox,
9116
+ {
9117
+ options: customers.options,
9118
+ fetchNextPage: customers.fetchNextPage,
9119
+ isFetchingNextPage: customers.isFetchingNextPage,
9120
+ searchValue: customers.searchValue,
9121
+ onSearchValueChange: customers.onSearchValueChange,
9122
+ placeholder: "Select customer",
9123
+ ...field
9124
+ }
9125
+ ) }),
9126
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
9127
+ ] })
9128
+ }
9129
+ );
9130
+ };
9131
+ const Illustration = () => {
9132
+ return /* @__PURE__ */ jsxRuntime.jsxs(
9133
+ "svg",
9134
+ {
9135
+ width: "280",
9136
+ height: "180",
9137
+ viewBox: "0 0 280 180",
9138
+ fill: "none",
9139
+ xmlns: "http://www.w3.org/2000/svg",
9140
+ children: [
9336
9141
  /* @__PURE__ */ jsxRuntime.jsx(
9337
- Combobox,
9142
+ "rect",
9143
+ {
9144
+ x: "0.00428286",
9145
+ y: "-0.742904",
9146
+ width: "33.5",
9147
+ height: "65.5",
9148
+ rx: "6.75",
9149
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.438)",
9150
+ fill: "#D4D4D8",
9151
+ stroke: "#52525B",
9152
+ strokeWidth: "1.5"
9153
+ }
9154
+ ),
9155
+ /* @__PURE__ */ jsxRuntime.jsx(
9156
+ "rect",
9157
+ {
9158
+ x: "0.00428286",
9159
+ y: "-0.742904",
9160
+ width: "33.5",
9161
+ height: "65.5",
9162
+ rx: "6.75",
9163
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.4381)",
9164
+ fill: "white",
9165
+ stroke: "#52525B",
9166
+ strokeWidth: "1.5"
9167
+ }
9168
+ ),
9169
+ /* @__PURE__ */ jsxRuntime.jsx(
9170
+ "path",
9171
+ {
9172
+ d: "M180.579 107.142L179.126 107.959",
9173
+ stroke: "#52525B",
9174
+ strokeWidth: "1.5",
9175
+ strokeLinecap: "round",
9176
+ strokeLinejoin: "round"
9177
+ }
9178
+ ),
9179
+ /* @__PURE__ */ jsxRuntime.jsx(
9180
+ "path",
9181
+ {
9182
+ opacity: "0.88",
9183
+ d: "M182.305 109.546L180.257 109.534",
9184
+ stroke: "#52525B",
9185
+ strokeWidth: "1.5",
9186
+ strokeLinecap: "round",
9187
+ strokeLinejoin: "round"
9188
+ }
9189
+ ),
9190
+ /* @__PURE__ */ jsxRuntime.jsx(
9191
+ "path",
9192
+ {
9193
+ opacity: "0.75",
9194
+ d: "M180.551 111.93L179.108 111.096",
9195
+ stroke: "#52525B",
9196
+ strokeWidth: "1.5",
9197
+ strokeLinecap: "round",
9198
+ strokeLinejoin: "round"
9199
+ }
9200
+ ),
9201
+ /* @__PURE__ */ jsxRuntime.jsx(
9202
+ "path",
9203
+ {
9204
+ opacity: "0.63",
9205
+ d: "M176.347 112.897L176.354 111.73",
9206
+ stroke: "#52525B",
9207
+ strokeWidth: "1.5",
9208
+ strokeLinecap: "round",
9209
+ strokeLinejoin: "round"
9210
+ }
9211
+ ),
9212
+ /* @__PURE__ */ jsxRuntime.jsx(
9213
+ "path",
9214
+ {
9215
+ opacity: "0.5",
9216
+ d: "M172.153 111.881L173.606 111.064",
9217
+ stroke: "#52525B",
9218
+ strokeWidth: "1.5",
9219
+ strokeLinecap: "round",
9220
+ strokeLinejoin: "round"
9221
+ }
9222
+ ),
9223
+ /* @__PURE__ */ jsxRuntime.jsx(
9224
+ "path",
9225
+ {
9226
+ opacity: "0.38",
9227
+ d: "M170.428 109.478L172.476 109.489",
9228
+ stroke: "#52525B",
9229
+ strokeWidth: "1.5",
9230
+ strokeLinecap: "round",
9231
+ strokeLinejoin: "round"
9232
+ }
9233
+ ),
9234
+ /* @__PURE__ */ jsxRuntime.jsx(
9235
+ "path",
9236
+ {
9237
+ opacity: "0.25",
9238
+ d: "M172.181 107.094L173.624 107.928",
9239
+ stroke: "#52525B",
9240
+ strokeWidth: "1.5",
9241
+ strokeLinecap: "round",
9242
+ strokeLinejoin: "round"
9243
+ }
9244
+ ),
9245
+ /* @__PURE__ */ jsxRuntime.jsx(
9246
+ "path",
9247
+ {
9248
+ opacity: "0.13",
9249
+ d: "M176.386 106.126L176.379 107.294",
9250
+ stroke: "#52525B",
9251
+ strokeWidth: "1.5",
9252
+ strokeLinecap: "round",
9253
+ strokeLinejoin: "round"
9254
+ }
9255
+ ),
9256
+ /* @__PURE__ */ jsxRuntime.jsx(
9257
+ "rect",
9258
+ {
9259
+ width: "12",
9260
+ height: "3",
9261
+ rx: "1.5",
9262
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.2925)",
9263
+ fill: "#D4D4D8"
9264
+ }
9265
+ ),
9266
+ /* @__PURE__ */ jsxRuntime.jsx(
9267
+ "rect",
9268
+ {
9269
+ x: "0.00428286",
9270
+ y: "-0.742904",
9271
+ width: "33.5",
9272
+ height: "65.5",
9273
+ rx: "6.75",
9274
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.4147)",
9275
+ fill: "#D4D4D8",
9276
+ stroke: "#52525B",
9277
+ strokeWidth: "1.5"
9278
+ }
9279
+ ),
9280
+ /* @__PURE__ */ jsxRuntime.jsx(
9281
+ "rect",
9282
+ {
9283
+ x: "0.00428286",
9284
+ y: "-0.742904",
9285
+ width: "33.5",
9286
+ height: "65.5",
9287
+ rx: "6.75",
9288
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.4147)",
9289
+ fill: "white",
9290
+ stroke: "#52525B",
9291
+ strokeWidth: "1.5"
9292
+ }
9293
+ ),
9294
+ /* @__PURE__ */ jsxRuntime.jsx(
9295
+ "rect",
9296
+ {
9297
+ width: "12",
9298
+ height: "3",
9299
+ rx: "1.5",
9300
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.2691)",
9301
+ fill: "#D4D4D8"
9302
+ }
9303
+ ),
9304
+ /* @__PURE__ */ jsxRuntime.jsx(
9305
+ "rect",
9306
+ {
9307
+ width: "17",
9308
+ height: "3",
9309
+ rx: "1.5",
9310
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 97.5557 66.958)",
9311
+ fill: "#D4D4D8"
9312
+ }
9313
+ ),
9314
+ /* @__PURE__ */ jsxRuntime.jsx(
9315
+ "rect",
9316
+ {
9317
+ width: "12",
9318
+ height: "3",
9319
+ rx: "1.5",
9320
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 93.1978 69.4093)",
9321
+ fill: "#D4D4D8"
9322
+ }
9323
+ ),
9324
+ /* @__PURE__ */ jsxRuntime.jsx(
9325
+ "path",
9326
+ {
9327
+ d: "M92.3603 63.9563C90.9277 63.1286 88.59 63.1152 87.148 63.9263C85.7059 64.7374 85.6983 66.0702 87.1308 66.8979C88.5634 67.7256 90.9011 67.7391 92.3432 66.928C93.7852 66.1168 93.7929 64.784 92.3603 63.9563ZM88.4382 66.1625C87.7221 65.7488 87.726 65.0822 88.4468 64.6767C89.1676 64.2713 90.3369 64.278 91.0529 64.6917C91.769 65.1055 91.7652 65.7721 91.0444 66.1775C90.3236 66.583 89.1543 66.5762 88.4382 66.1625Z",
9328
+ fill: "#A1A1AA"
9329
+ }
9330
+ ),
9331
+ /* @__PURE__ */ jsxRuntime.jsx(
9332
+ "rect",
9333
+ {
9334
+ width: "17",
9335
+ height: "3",
9336
+ rx: "1.5",
9337
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.0944)",
9338
+ fill: "#A1A1AA"
9339
+ }
9340
+ ),
9341
+ /* @__PURE__ */ jsxRuntime.jsx(
9342
+ "rect",
9343
+ {
9344
+ width: "12",
9345
+ height: "3",
9346
+ rx: "1.5",
9347
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 105.4 62.5457)",
9348
+ fill: "#A1A1AA"
9349
+ }
9350
+ ),
9351
+ /* @__PURE__ */ jsxRuntime.jsx(
9352
+ "path",
9353
+ {
9354
+ d: "M104.562 57.0927C103.13 56.265 100.792 56.2515 99.3501 57.0626C97.9081 57.8738 97.9004 59.2065 99.333 60.0343C100.766 60.862 103.103 60.8754 104.545 60.0643C105.987 59.2532 105.995 57.9204 104.562 57.0927ZM103.858 58.8972L100.815 59.1265C100.683 59.1367 100.55 59.1134 100.449 59.063C100.44 59.0585 100.432 59.0545 100.425 59.05C100.339 59.0005 100.29 58.9336 100.291 58.8637L100.294 58.1201C100.294 57.9752 100.501 57.8585 100.756 57.86C101.01 57.8615 101.217 57.98 101.216 58.1256L101.214 58.5669L103.732 58.3769C103.984 58.3578 104.217 58.4584 104.251 58.603C104.286 58.7468 104.11 58.8788 103.858 58.8977L103.858 58.8972Z",
9355
+ fill: "#52525B"
9356
+ }
9357
+ ),
9358
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
9359
+ "path",
9360
+ {
9361
+ d: "M133.106 81.8022L140.49 81.8447L140.515 77.6349",
9362
+ stroke: "#A1A1AA",
9363
+ strokeWidth: "1.5",
9364
+ strokeLinecap: "round",
9365
+ strokeLinejoin: "round"
9366
+ }
9367
+ ) }),
9368
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip1_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
9369
+ "path",
9370
+ {
9371
+ d: "M143.496 87.8055L150.881 87.8481L150.905 83.6383",
9372
+ stroke: "#A1A1AA",
9373
+ strokeWidth: "1.5",
9374
+ strokeLinecap: "round",
9375
+ strokeLinejoin: "round"
9376
+ }
9377
+ ) }),
9378
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip2_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
9379
+ "path",
9338
9380
  {
9339
- id: "promotion-combobox",
9340
- "aria-describedby": "promotion-combobox-hint",
9341
- isFetchingNextPage: comboboxData.isFetchingNextPage,
9342
- fetchNextPage: comboboxData.fetchNextPage,
9343
- options: comboboxData.options,
9344
- onSearchValueChange: comboboxData.onSearchValueChange,
9345
- searchValue: comboboxData.searchValue,
9346
- disabled: comboboxData.disabled || isAddingPromotions,
9347
- onChange: add,
9348
- value: comboboxValue
9381
+ d: "M153.887 93.8088L161.271 93.8514L161.295 89.6416",
9382
+ stroke: "#A1A1AA",
9383
+ strokeWidth: "1.5",
9384
+ strokeLinecap: "round",
9385
+ strokeLinejoin: "round"
9349
9386
  }
9350
- )
9351
- ] }),
9352
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
9353
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions?.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
9354
- PromotionItem,
9355
- {
9356
- promotion,
9357
- orderId: preview.id,
9358
- isLoading: isPending
9359
- },
9360
- promotion.id
9361
- )) })
9362
- ] }) }),
9363
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
9364
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9365
- /* @__PURE__ */ jsxRuntime.jsx(
9366
- ui.Button,
9367
- {
9368
- size: "small",
9369
- type: "submit",
9370
- isLoading: isSubmitting || isAddingPromotions,
9371
- children: "Save"
9372
- }
9373
- )
9374
- ] }) })
9375
- ] });
9376
- };
9377
- const PromotionItem = ({
9378
- promotion,
9379
- orderId,
9380
- isLoading
9381
- }) => {
9382
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
9383
- const onRemove = async () => {
9384
- removePromotions(
9385
- {
9386
- promo_codes: [promotion.code]
9387
- },
9388
- {
9389
- onError: (e) => {
9390
- ui.toast.error(e.message);
9391
- }
9392
- }
9393
- );
9394
- };
9395
- const displayValue = getDisplayValue(promotion);
9396
- return /* @__PURE__ */ jsxRuntime.jsxs(
9397
- "div",
9398
- {
9399
- className: ui.clx(
9400
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
9401
- {
9402
- "animate-pulse": isLoading
9403
- }
9404
- ),
9405
- children: [
9406
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
9407
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
9408
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
9409
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
9410
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
9411
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
9412
- ] }),
9413
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: promotion.application_method?.allocation })
9414
- ] })
9415
- ] }),
9416
- /* @__PURE__ */ jsxRuntime.jsx(
9417
- ui.IconButton,
9387
+ ) }),
9388
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip3_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
9389
+ "path",
9418
9390
  {
9419
- size: "small",
9420
- type: "button",
9421
- variant: "transparent",
9422
- onClick: onRemove,
9423
- isLoading: isPending || isLoading,
9424
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
9391
+ d: "M126.114 89.1912L118.729 89.1486L118.705 93.3584",
9392
+ stroke: "#A1A1AA",
9393
+ strokeWidth: "1.5",
9394
+ strokeLinecap: "round",
9395
+ strokeLinejoin: "round"
9425
9396
  }
9426
- )
9397
+ ) }),
9398
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip4_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
9399
+ "path",
9400
+ {
9401
+ d: "M136.504 95.1945L129.12 95.1519L129.095 99.3617",
9402
+ stroke: "#A1A1AA",
9403
+ strokeWidth: "1.5",
9404
+ strokeLinecap: "round",
9405
+ strokeLinejoin: "round"
9406
+ }
9407
+ ) }),
9408
+ /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip5_20915_38670)", children: /* @__PURE__ */ jsxRuntime.jsx(
9409
+ "path",
9410
+ {
9411
+ d: "M146.894 101.198L139.51 101.155L139.486 105.365",
9412
+ stroke: "#A1A1AA",
9413
+ strokeWidth: "1.5",
9414
+ strokeLinecap: "round",
9415
+ strokeLinejoin: "round"
9416
+ }
9417
+ ) }),
9418
+ /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
9419
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
9420
+ "rect",
9421
+ {
9422
+ width: "12",
9423
+ height: "12",
9424
+ fill: "white",
9425
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 138.36 74.6508)"
9426
+ }
9427
+ ) }),
9428
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip1_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
9429
+ "rect",
9430
+ {
9431
+ width: "12",
9432
+ height: "12",
9433
+ fill: "white",
9434
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 148.75 80.6541)"
9435
+ }
9436
+ ) }),
9437
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip2_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
9438
+ "rect",
9439
+ {
9440
+ width: "12",
9441
+ height: "12",
9442
+ fill: "white",
9443
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 159.141 86.6575)"
9444
+ }
9445
+ ) }),
9446
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip3_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
9447
+ "rect",
9448
+ {
9449
+ width: "12",
9450
+ height: "12",
9451
+ fill: "white",
9452
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.4561)"
9453
+ }
9454
+ ) }),
9455
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip4_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
9456
+ "rect",
9457
+ {
9458
+ width: "12",
9459
+ height: "12",
9460
+ fill: "white",
9461
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.4594)"
9462
+ }
9463
+ ) }),
9464
+ /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip5_20915_38670", children: /* @__PURE__ */ jsxRuntime.jsx(
9465
+ "rect",
9466
+ {
9467
+ width: "12",
9468
+ height: "12",
9469
+ fill: "white",
9470
+ transform: "matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.4627)"
9471
+ }
9472
+ ) })
9473
+ ] })
9427
9474
  ]
9428
- },
9429
- promotion.id
9475
+ }
9430
9476
  );
9431
9477
  };
9432
- function getDisplayValue(promotion) {
9433
- const value = promotion.application_method?.value;
9434
- if (!value) {
9435
- return null;
9436
- }
9437
- if (promotion.application_method?.type === "fixed") {
9438
- const currency = promotion.application_method?.currency_code;
9439
- if (!currency) {
9440
- return null;
9441
- }
9442
- return getLocaleAmount(value, currency);
9443
- } else if (promotion.application_method?.type === "percentage") {
9444
- return formatPercentage(value);
9445
- }
9446
- return null;
9447
- }
9448
- const formatter = new Intl.NumberFormat([], {
9449
- style: "percent",
9450
- minimumFractionDigits: 2
9478
+ const schema = zod.z.object({
9479
+ customer_id: zod.z.string().min(1)
9451
9480
  });
9452
- const formatPercentage = (value, isPercentageValue = false) => {
9453
- let val = value || 0;
9454
- if (!isPercentageValue) {
9455
- val = val / 100;
9456
- }
9457
- return formatter.format(val);
9458
- };
9459
- function getPromotionIds(items, shippingMethods) {
9460
- const promotionIds = /* @__PURE__ */ new Set();
9461
- for (const item of items) {
9462
- if (item.adjustments) {
9463
- for (const adjustment of item.adjustments) {
9464
- if (adjustment.promotion_id) {
9465
- promotionIds.add(adjustment.promotion_id);
9466
- }
9467
- }
9468
- }
9469
- }
9470
- for (const shippingMethod of shippingMethods) {
9471
- if (shippingMethod.adjustments) {
9472
- for (const adjustment of shippingMethod.adjustments) {
9473
- if (adjustment.promotion_id) {
9474
- promotionIds.add(adjustment.promotion_id);
9475
- }
9476
- }
9477
- }
9478
- }
9479
- return Array.from(promotionIds);
9480
- }
9481
9481
  const widgetModule = { widgets: [] };
9482
9482
  const routeModule = {
9483
9483
  routes: [
@@ -9502,6 +9502,10 @@ const routeModule = {
9502
9502
  Component: BillingAddress,
9503
9503
  path: "/draft-orders/:id/billing-address"
9504
9504
  },
9505
+ {
9506
+ Component: CustomItems,
9507
+ path: "/draft-orders/:id/custom-items"
9508
+ },
9505
9509
  {
9506
9510
  Component: Email,
9507
9511
  path: "/draft-orders/:id/email"
@@ -9511,12 +9515,12 @@ const routeModule = {
9511
9515
  path: "/draft-orders/:id/items"
9512
9516
  },
9513
9517
  {
9514
- Component: CustomItems,
9515
- path: "/draft-orders/:id/custom-items"
9518
+ Component: Metadata,
9519
+ path: "/draft-orders/:id/metadata"
9516
9520
  },
9517
9521
  {
9518
- Component: SalesChannel,
9519
- path: "/draft-orders/:id/sales-channel"
9522
+ Component: Promotions,
9523
+ path: "/draft-orders/:id/promotions"
9520
9524
  },
9521
9525
  {
9522
9526
  Component: Shipping,
@@ -9527,16 +9531,12 @@ const routeModule = {
9527
9531
  path: "/draft-orders/:id/shipping-address"
9528
9532
  },
9529
9533
  {
9530
- Component: TransferOwnership,
9531
- path: "/draft-orders/:id/transfer-ownership"
9532
- },
9533
- {
9534
- Component: Metadata,
9535
- path: "/draft-orders/:id/metadata"
9534
+ Component: SalesChannel,
9535
+ path: "/draft-orders/:id/sales-channel"
9536
9536
  },
9537
9537
  {
9538
- Component: Promotions,
9539
- path: "/draft-orders/:id/promotions"
9538
+ Component: TransferOwnership,
9539
+ path: "/draft-orders/:id/transfer-ownership"
9540
9540
  }
9541
9541
  ]
9542
9542
  }