@medusajs/draft-order 2.20.0 → 2.20.1

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.
@@ -5979,195 +5979,6 @@ const ID = () => {
5979
5979
  }
5980
5980
  );
5981
5981
  };
5982
- const BillingAddress = () => {
5983
- const { id } = reactRouterDom.useParams();
5984
- const { order, isPending, isError, error } = useOrder(id, {
5985
- fields: "+billing_address"
5986
- });
5987
- if (isError) {
5988
- throw error;
5989
- }
5990
- const isReady = !isPending && !!order;
5991
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
5992
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
5993
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
5994
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
5995
- ] }),
5996
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
5997
- ] });
5998
- };
5999
- const BillingAddressForm = ({ order }) => {
6000
- const form = reactHookForm.useForm({
6001
- defaultValues: {
6002
- first_name: order.billing_address?.first_name ?? "",
6003
- last_name: order.billing_address?.last_name ?? "",
6004
- company: order.billing_address?.company ?? "",
6005
- address_1: order.billing_address?.address_1 ?? "",
6006
- address_2: order.billing_address?.address_2 ?? "",
6007
- city: order.billing_address?.city ?? "",
6008
- province: order.billing_address?.province ?? "",
6009
- country_code: order.billing_address?.country_code ?? "",
6010
- postal_code: order.billing_address?.postal_code ?? "",
6011
- phone: order.billing_address?.phone ?? ""
6012
- },
6013
- resolver: zod$1.zodResolver(schema$5)
6014
- });
6015
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
6016
- const { handleSuccess } = useRouteModal();
6017
- const onSubmit = form.handleSubmit(async (data) => {
6018
- await mutateAsync(
6019
- { billing_address: data },
6020
- {
6021
- onSuccess: () => {
6022
- handleSuccess();
6023
- },
6024
- onError: (error) => {
6025
- ui.toast.error(error.message);
6026
- }
6027
- }
6028
- );
6029
- });
6030
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
6031
- KeyboundForm,
6032
- {
6033
- className: "flex flex-1 flex-col overflow-hidden",
6034
- onSubmit,
6035
- children: [
6036
- /* @__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: [
6037
- /* @__PURE__ */ jsxRuntime.jsx(
6038
- Form$2.Field,
6039
- {
6040
- control: form.control,
6041
- name: "country_code",
6042
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6043
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
6044
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
6045
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6046
- ] })
6047
- }
6048
- ),
6049
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
6050
- /* @__PURE__ */ jsxRuntime.jsx(
6051
- Form$2.Field,
6052
- {
6053
- control: form.control,
6054
- name: "first_name",
6055
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6056
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
6057
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6058
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6059
- ] })
6060
- }
6061
- ),
6062
- /* @__PURE__ */ jsxRuntime.jsx(
6063
- Form$2.Field,
6064
- {
6065
- control: form.control,
6066
- name: "last_name",
6067
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6068
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
6069
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6070
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6071
- ] })
6072
- }
6073
- )
6074
- ] }),
6075
- /* @__PURE__ */ jsxRuntime.jsx(
6076
- Form$2.Field,
6077
- {
6078
- control: form.control,
6079
- name: "company",
6080
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6081
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
6082
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6083
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6084
- ] })
6085
- }
6086
- ),
6087
- /* @__PURE__ */ jsxRuntime.jsx(
6088
- Form$2.Field,
6089
- {
6090
- control: form.control,
6091
- name: "address_1",
6092
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6093
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
6094
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6095
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6096
- ] })
6097
- }
6098
- ),
6099
- /* @__PURE__ */ jsxRuntime.jsx(
6100
- Form$2.Field,
6101
- {
6102
- control: form.control,
6103
- name: "address_2",
6104
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6105
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
6106
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6107
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6108
- ] })
6109
- }
6110
- ),
6111
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
6112
- /* @__PURE__ */ jsxRuntime.jsx(
6113
- Form$2.Field,
6114
- {
6115
- control: form.control,
6116
- name: "postal_code",
6117
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6118
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
6119
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6120
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6121
- ] })
6122
- }
6123
- ),
6124
- /* @__PURE__ */ jsxRuntime.jsx(
6125
- Form$2.Field,
6126
- {
6127
- control: form.control,
6128
- name: "city",
6129
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6130
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
6131
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6132
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6133
- ] })
6134
- }
6135
- )
6136
- ] }),
6137
- /* @__PURE__ */ jsxRuntime.jsx(
6138
- Form$2.Field,
6139
- {
6140
- control: form.control,
6141
- name: "province",
6142
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6143
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
6144
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6145
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6146
- ] })
6147
- }
6148
- ),
6149
- /* @__PURE__ */ jsxRuntime.jsx(
6150
- Form$2.Field,
6151
- {
6152
- control: form.control,
6153
- name: "phone",
6154
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6155
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
6156
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6157
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6158
- ] })
6159
- }
6160
- )
6161
- ] }) }),
6162
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
6163
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
6164
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
6165
- ] }) })
6166
- ]
6167
- }
6168
- ) });
6169
- };
6170
- const schema$5 = addressSchema;
6171
5982
  const CustomItems = () => {
6172
5983
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
6173
5984
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Custom Items" }) }) }),
@@ -6176,7 +5987,7 @@ const CustomItems = () => {
6176
5987
  };
6177
5988
  const CustomItemsForm = () => {
6178
5989
  const form = reactHookForm.useForm({
6179
- resolver: zod$1.zodResolver(schema$4)
5990
+ resolver: zod$1.zodResolver(schema$5)
6180
5991
  });
6181
5992
  return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
6182
5993
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, {}),
@@ -6186,7 +5997,7 @@ const CustomItemsForm = () => {
6186
5997
  ] }) })
6187
5998
  ] }) });
6188
5999
  };
6189
- const schema$4 = zod.z.object({
6000
+ const schema$5 = zod.z.object({
6190
6001
  email: zod.z.string().email()
6191
6002
  });
6192
6003
  const Email = () => {
@@ -6211,7 +6022,7 @@ const EmailForm = ({ order }) => {
6211
6022
  defaultValues: {
6212
6023
  email: order.email ?? ""
6213
6024
  },
6214
- resolver: zod$1.zodResolver(schema$3)
6025
+ resolver: zod$1.zodResolver(schema$4)
6215
6026
  });
6216
6027
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
6217
6028
  const { handleSuccess } = useRouteModal();
@@ -6254,7 +6065,7 @@ const EmailForm = ({ order }) => {
6254
6065
  }
6255
6066
  ) });
6256
6067
  };
6257
- const schema$3 = zod.z.object({
6068
+ const schema$4 = zod.z.object({
6258
6069
  email: zod.z.string().email()
6259
6070
  });
6260
6071
  const NumberInput = React.forwardRef(
@@ -7276,321 +7087,46 @@ const customItemSchema = zod.z.object({
7276
7087
  quantity: zod.z.number(),
7277
7088
  unit_price: zod.z.union([zod.z.number(), zod.z.string()])
7278
7089
  });
7279
- const PROMOTION_QUERY_KEY = "promotions";
7280
- const promotionsQueryKeys = {
7281
- list: (query2) => [
7282
- PROMOTION_QUERY_KEY,
7283
- query2 ? query2 : void 0
7284
- ],
7285
- detail: (id, query2) => [
7286
- PROMOTION_QUERY_KEY,
7287
- id,
7288
- query2 ? query2 : void 0
7289
- ]
7290
- };
7291
- const usePromotions = (query2, options) => {
7292
- const { data, ...rest } = reactQuery.useQuery({
7293
- queryKey: promotionsQueryKeys.list(query2),
7294
- queryFn: async () => sdk.admin.promotion.list(query2),
7295
- ...options
7296
- });
7297
- return { ...data, ...rest };
7298
- };
7299
- const Promotions = () => {
7090
+ const BillingAddress = () => {
7300
7091
  const { id } = reactRouterDom.useParams();
7301
- const {
7302
- order: preview,
7303
- isError: isPreviewError,
7304
- error: previewError
7305
- } = useOrderPreview(id, void 0);
7306
- useInitiateOrderEdit({ preview });
7307
- const { onCancel } = useCancelOrderEdit({ preview });
7308
- if (isPreviewError) {
7309
- throw previewError;
7092
+ const { order, isPending, isError, error } = useOrder(id, {
7093
+ fields: "+billing_address"
7094
+ });
7095
+ if (isError) {
7096
+ throw error;
7310
7097
  }
7311
- const isReady = !!preview;
7312
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
7313
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
7314
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
7098
+ const isReady = !isPending && !!order;
7099
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7100
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
7101
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
7102
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
7103
+ ] }),
7104
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
7315
7105
  ] });
7316
7106
  };
7317
- const PromotionForm = ({ preview }) => {
7318
- const { items, shipping_methods } = preview;
7319
- const [isSubmitting, setIsSubmitting] = React.useState(false);
7320
- const [comboboxValue, setComboboxValue] = React.useState("");
7321
- const { handleSuccess } = useRouteModal();
7322
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
7323
- const promoIds = getPromotionIds(items, shipping_methods);
7324
- const { promotions, isPending, isError, error } = usePromotions(
7325
- {
7326
- id: promoIds
7327
- },
7328
- {
7329
- enabled: !!promoIds.length
7330
- }
7331
- );
7332
- const comboboxData = useComboboxData({
7333
- queryKey: ["promotions", "combobox", promoIds],
7334
- queryFn: async (params) => {
7335
- return await sdk.admin.promotion.list({
7336
- ...params,
7337
- id: {
7338
- $nin: promoIds
7339
- }
7340
- });
7341
- },
7342
- getOptions: (data) => {
7343
- return data.promotions.map((promotion) => ({
7344
- label: promotion.code,
7345
- value: promotion.code
7346
- }));
7347
- }
7348
- });
7349
- const add = async (value) => {
7350
- if (!value) {
7351
- return;
7352
- }
7353
- addPromotions(
7354
- {
7355
- promo_codes: [value]
7356
- },
7357
- {
7358
- onError: (e) => {
7359
- ui.toast.error(e.message);
7360
- comboboxData.onSearchValueChange("");
7361
- setComboboxValue("");
7362
- },
7363
- onSuccess: () => {
7364
- comboboxData.onSearchValueChange("");
7365
- setComboboxValue("");
7366
- }
7367
- }
7368
- );
7369
- };
7370
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
7371
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
7372
- const onSubmit = async () => {
7373
- setIsSubmitting(true);
7374
- let requestSucceeded = false;
7375
- await requestOrderEdit(void 0, {
7376
- onError: (e) => {
7377
- ui.toast.error(e.message);
7378
- },
7379
- onSuccess: () => {
7380
- requestSucceeded = true;
7381
- }
7382
- });
7383
- if (!requestSucceeded) {
7384
- setIsSubmitting(false);
7385
- return;
7386
- }
7387
- await confirmOrderEdit(void 0, {
7388
- onError: (e) => {
7389
- ui.toast.error(e.message);
7390
- },
7391
- onSuccess: () => {
7392
- handleSuccess();
7393
- },
7394
- onSettled: () => {
7395
- setIsSubmitting(false);
7396
- }
7397
- });
7398
- };
7399
- if (isError) {
7400
- throw error;
7401
- }
7402
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
7403
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
7404
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
7405
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
7406
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
7407
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
7408
- ] }),
7409
- /* @__PURE__ */ jsxRuntime.jsx(
7410
- Combobox,
7411
- {
7412
- id: "promotion-combobox",
7413
- "aria-describedby": "promotion-combobox-hint",
7414
- isFetchingNextPage: comboboxData.isFetchingNextPage,
7415
- fetchNextPage: comboboxData.fetchNextPage,
7416
- options: comboboxData.options,
7417
- onSearchValueChange: comboboxData.onSearchValueChange,
7418
- searchValue: comboboxData.searchValue,
7419
- disabled: comboboxData.disabled || isAddingPromotions,
7420
- onChange: add,
7421
- value: comboboxValue
7422
- }
7423
- )
7424
- ] }),
7425
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7426
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions?.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
7427
- PromotionItem,
7428
- {
7429
- promotion,
7430
- orderId: preview.id,
7431
- isLoading: isPending
7432
- },
7433
- promotion.id
7434
- )) })
7435
- ] }) }),
7436
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7437
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7438
- /* @__PURE__ */ jsxRuntime.jsx(
7439
- ui.Button,
7440
- {
7441
- size: "small",
7442
- type: "submit",
7443
- isLoading: isSubmitting || isAddingPromotions,
7444
- children: "Save"
7445
- }
7446
- )
7447
- ] }) })
7448
- ] });
7449
- };
7450
- const PromotionItem = ({
7451
- promotion,
7452
- orderId,
7453
- isLoading
7454
- }) => {
7455
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
7456
- const onRemove = async () => {
7457
- removePromotions(
7458
- {
7459
- promo_codes: [promotion.code]
7460
- },
7461
- {
7462
- onError: (e) => {
7463
- ui.toast.error(e.message);
7464
- }
7465
- }
7466
- );
7467
- };
7468
- const displayValue = getDisplayValue(promotion);
7469
- return /* @__PURE__ */ jsxRuntime.jsxs(
7470
- "div",
7471
- {
7472
- className: ui.clx(
7473
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
7474
- {
7475
- "animate-pulse": isLoading
7476
- }
7477
- ),
7478
- children: [
7479
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7480
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
7481
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
7482
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
7483
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
7484
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
7485
- ] }),
7486
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: promotion.application_method?.allocation })
7487
- ] })
7488
- ] }),
7489
- /* @__PURE__ */ jsxRuntime.jsx(
7490
- ui.IconButton,
7491
- {
7492
- size: "small",
7493
- type: "button",
7494
- variant: "transparent",
7495
- onClick: onRemove,
7496
- isLoading: isPending || isLoading,
7497
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
7498
- }
7499
- )
7500
- ]
7501
- },
7502
- promotion.id
7503
- );
7504
- };
7505
- function getDisplayValue(promotion) {
7506
- const value = promotion.application_method?.value;
7507
- if (!value) {
7508
- return null;
7509
- }
7510
- if (promotion.application_method?.type === "fixed") {
7511
- const currency = promotion.application_method?.currency_code;
7512
- if (!currency) {
7513
- return null;
7514
- }
7515
- return getLocaleAmount(value, currency);
7516
- } else if (promotion.application_method?.type === "percentage") {
7517
- return formatPercentage(value);
7518
- }
7519
- return null;
7520
- }
7521
- const formatter = new Intl.NumberFormat([], {
7522
- style: "percent",
7523
- minimumFractionDigits: 2
7524
- });
7525
- const formatPercentage = (value, isPercentageValue = false) => {
7526
- let val = value || 0;
7527
- if (!isPercentageValue) {
7528
- val = val / 100;
7529
- }
7530
- return formatter.format(val);
7531
- };
7532
- function getPromotionIds(items, shippingMethods) {
7533
- const promotionIds = /* @__PURE__ */ new Set();
7534
- for (const item of items) {
7535
- if (item.adjustments) {
7536
- for (const adjustment of item.adjustments) {
7537
- if (adjustment.promotion_id) {
7538
- promotionIds.add(adjustment.promotion_id);
7539
- }
7540
- }
7541
- }
7542
- }
7543
- for (const shippingMethod of shippingMethods) {
7544
- if (shippingMethod.adjustments) {
7545
- for (const adjustment of shippingMethod.adjustments) {
7546
- if (adjustment.promotion_id) {
7547
- promotionIds.add(adjustment.promotion_id);
7548
- }
7549
- }
7550
- }
7551
- }
7552
- return Array.from(promotionIds);
7553
- }
7554
- const SalesChannel = () => {
7555
- const { id } = reactRouterDom.useParams();
7556
- const { draft_order, isPending, isError, error } = useDraftOrder(
7557
- id,
7558
- {
7559
- fields: "+sales_channel_id"
7560
- },
7561
- {
7562
- enabled: !!id
7563
- }
7564
- );
7565
- if (isError) {
7566
- throw error;
7567
- }
7568
- const ISrEADY = !!draft_order && !isPending;
7569
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7570
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
7571
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
7572
- /* @__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" }) })
7573
- ] }),
7574
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
7575
- ] });
7576
- };
7577
- const SalesChannelForm = ({ order }) => {
7107
+ const BillingAddressForm = ({ order }) => {
7578
7108
  const form = reactHookForm.useForm({
7579
7109
  defaultValues: {
7580
- sales_channel_id: order.sales_channel_id || ""
7110
+ first_name: order.billing_address?.first_name ?? "",
7111
+ last_name: order.billing_address?.last_name ?? "",
7112
+ company: order.billing_address?.company ?? "",
7113
+ address_1: order.billing_address?.address_1 ?? "",
7114
+ address_2: order.billing_address?.address_2 ?? "",
7115
+ city: order.billing_address?.city ?? "",
7116
+ province: order.billing_address?.province ?? "",
7117
+ country_code: order.billing_address?.country_code ?? "",
7118
+ postal_code: order.billing_address?.postal_code ?? "",
7119
+ phone: order.billing_address?.phone ?? ""
7581
7120
  },
7582
- resolver: zod$1.zodResolver(schema$2)
7121
+ resolver: zod$1.zodResolver(schema$3)
7583
7122
  });
7584
7123
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
7585
7124
  const { handleSuccess } = useRouteModal();
7586
7125
  const onSubmit = form.handleSubmit(async (data) => {
7587
7126
  await mutateAsync(
7588
- {
7589
- sales_channel_id: data.sales_channel_id
7590
- },
7127
+ { billing_address: data },
7591
7128
  {
7592
7129
  onSuccess: () => {
7593
- ui.toast.success("Sales channel updated");
7594
7130
  handleSuccess();
7595
7131
  },
7596
7132
  onError: (error) => {
@@ -7605,7 +7141,132 @@ const SalesChannelForm = ({ order }) => {
7605
7141
  className: "flex flex-1 flex-col overflow-hidden",
7606
7142
  onSubmit,
7607
7143
  children: [
7608
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
7144
+ /* @__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: [
7145
+ /* @__PURE__ */ jsxRuntime.jsx(
7146
+ Form$2.Field,
7147
+ {
7148
+ control: form.control,
7149
+ name: "country_code",
7150
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7151
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
7152
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
7153
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7154
+ ] })
7155
+ }
7156
+ ),
7157
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
7158
+ /* @__PURE__ */ jsxRuntime.jsx(
7159
+ Form$2.Field,
7160
+ {
7161
+ control: form.control,
7162
+ name: "first_name",
7163
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7164
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
7165
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7166
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7167
+ ] })
7168
+ }
7169
+ ),
7170
+ /* @__PURE__ */ jsxRuntime.jsx(
7171
+ Form$2.Field,
7172
+ {
7173
+ control: form.control,
7174
+ name: "last_name",
7175
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7176
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
7177
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7178
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7179
+ ] })
7180
+ }
7181
+ )
7182
+ ] }),
7183
+ /* @__PURE__ */ jsxRuntime.jsx(
7184
+ Form$2.Field,
7185
+ {
7186
+ control: form.control,
7187
+ name: "company",
7188
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7189
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
7190
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7191
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7192
+ ] })
7193
+ }
7194
+ ),
7195
+ /* @__PURE__ */ jsxRuntime.jsx(
7196
+ Form$2.Field,
7197
+ {
7198
+ control: form.control,
7199
+ name: "address_1",
7200
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7201
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
7202
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7203
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7204
+ ] })
7205
+ }
7206
+ ),
7207
+ /* @__PURE__ */ jsxRuntime.jsx(
7208
+ Form$2.Field,
7209
+ {
7210
+ control: form.control,
7211
+ name: "address_2",
7212
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7213
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
7214
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7215
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7216
+ ] })
7217
+ }
7218
+ ),
7219
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
7220
+ /* @__PURE__ */ jsxRuntime.jsx(
7221
+ Form$2.Field,
7222
+ {
7223
+ control: form.control,
7224
+ name: "postal_code",
7225
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7226
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
7227
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7228
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7229
+ ] })
7230
+ }
7231
+ ),
7232
+ /* @__PURE__ */ jsxRuntime.jsx(
7233
+ Form$2.Field,
7234
+ {
7235
+ control: form.control,
7236
+ name: "city",
7237
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7238
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
7239
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7240
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7241
+ ] })
7242
+ }
7243
+ )
7244
+ ] }),
7245
+ /* @__PURE__ */ jsxRuntime.jsx(
7246
+ Form$2.Field,
7247
+ {
7248
+ control: form.control,
7249
+ name: "province",
7250
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7251
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
7252
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7253
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7254
+ ] })
7255
+ }
7256
+ ),
7257
+ /* @__PURE__ */ jsxRuntime.jsx(
7258
+ Form$2.Field,
7259
+ {
7260
+ control: form.control,
7261
+ name: "phone",
7262
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7263
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
7264
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7265
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7266
+ ] })
7267
+ }
7268
+ )
7269
+ ] }) }),
7609
7270
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7610
7271
  /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7611
7272
  /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
@@ -7614,49 +7275,7 @@ const SalesChannelForm = ({ order }) => {
7614
7275
  }
7615
7276
  ) });
7616
7277
  };
7617
- const SalesChannelField = ({ control, order }) => {
7618
- const salesChannels = useComboboxData({
7619
- queryFn: async (params) => {
7620
- return await sdk.admin.salesChannel.list(params);
7621
- },
7622
- queryKey: ["sales-channels"],
7623
- getOptions: (data) => {
7624
- return data.sales_channels.map((salesChannel) => ({
7625
- label: salesChannel.name,
7626
- value: salesChannel.id
7627
- }));
7628
- },
7629
- defaultValue: order.sales_channel_id || void 0
7630
- });
7631
- return /* @__PURE__ */ jsxRuntime.jsx(
7632
- Form$2.Field,
7633
- {
7634
- control,
7635
- name: "sales_channel_id",
7636
- render: ({ field }) => {
7637
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7638
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
7639
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
7640
- Combobox,
7641
- {
7642
- options: salesChannels.options,
7643
- fetchNextPage: salesChannels.fetchNextPage,
7644
- isFetchingNextPage: salesChannels.isFetchingNextPage,
7645
- searchValue: salesChannels.searchValue,
7646
- onSearchValueChange: salesChannels.onSearchValueChange,
7647
- placeholder: "Select sales channel",
7648
- ...field
7649
- }
7650
- ) }),
7651
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7652
- ] });
7653
- }
7654
- }
7655
- );
7656
- };
7657
- const schema$2 = zod.z.object({
7658
- sales_channel_id: zod.z.string().min(1)
7659
- });
7278
+ const schema$3 = addressSchema;
7660
7279
  const InlineTip = React.forwardRef(
7661
7280
  ({ variant = "tip", label, className, children, ...props }, ref) => {
7662
7281
  const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
@@ -7912,101 +7531,409 @@ const MetadataForm = ({ orderId, metadata }) => {
7912
7531
  };
7913
7532
  const GridInput = React.forwardRef(({ className, ...props }, ref) => {
7914
7533
  return /* @__PURE__ */ jsxRuntime.jsx(
7915
- "input",
7534
+ "input",
7535
+ {
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
+ )
7543
+ }
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
+ ] });
7555
+ };
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) {
7598
+ return;
7599
+ }
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 SalesChannel = () => {
7630
+ const { id } = reactRouterDom.useParams();
7631
+ const { draft_order, isPending, isError, error } = useDraftOrder(
7632
+ id,
7633
+ {
7634
+ fields: "+sales_channel_id"
7635
+ },
7636
+ {
7637
+ enabled: !!id
7638
+ }
7639
+ );
7640
+ if (isError) {
7641
+ throw error;
7642
+ }
7643
+ const ISrEADY = !!draft_order && !isPending;
7644
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7645
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
7646
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
7647
+ /* @__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" }) })
7648
+ ] }),
7649
+ ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
7650
+ ] });
7651
+ };
7652
+ const SalesChannelForm = ({ order }) => {
7653
+ const form = reactHookForm.useForm({
7654
+ defaultValues: {
7655
+ sales_channel_id: order.sales_channel_id || ""
7656
+ },
7657
+ resolver: zod$1.zodResolver(schema$2)
7658
+ });
7659
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
7660
+ const { handleSuccess } = useRouteModal();
7661
+ const onSubmit = form.handleSubmit(async (data) => {
7662
+ await mutateAsync(
7663
+ {
7664
+ sales_channel_id: data.sales_channel_id
7665
+ },
7666
+ {
7667
+ onSuccess: () => {
7668
+ ui.toast.success("Sales channel updated");
7669
+ handleSuccess();
7670
+ },
7671
+ onError: (error) => {
7672
+ ui.toast.error(error.message);
7673
+ }
7674
+ }
7675
+ );
7676
+ });
7677
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
7678
+ KeyboundForm,
7679
+ {
7680
+ className: "flex flex-1 flex-col overflow-hidden",
7681
+ onSubmit,
7682
+ children: [
7683
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
7684
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7685
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7686
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
7687
+ ] }) })
7688
+ ]
7689
+ }
7690
+ ) });
7691
+ };
7692
+ const SalesChannelField = ({ control, order }) => {
7693
+ const salesChannels = useComboboxData({
7694
+ queryFn: async (params) => {
7695
+ return await sdk.admin.salesChannel.list(params);
7696
+ },
7697
+ queryKey: ["sales-channels"],
7698
+ getOptions: (data) => {
7699
+ return data.sales_channels.map((salesChannel) => ({
7700
+ label: salesChannel.name,
7701
+ value: salesChannel.id
7702
+ }));
7703
+ },
7704
+ defaultValue: order.sales_channel_id || void 0
7705
+ });
7706
+ return /* @__PURE__ */ jsxRuntime.jsx(
7707
+ Form$2.Field,
7916
7708
  {
7917
- ref,
7918
- ...props,
7919
- autoComplete: "off",
7920
- className: ui.clx(
7921
- "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",
7922
- className
7923
- )
7709
+ control,
7710
+ name: "sales_channel_id",
7711
+ render: ({ field }) => {
7712
+ return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7713
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
7714
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
7715
+ Combobox,
7716
+ {
7717
+ options: salesChannels.options,
7718
+ fetchNextPage: salesChannels.fetchNextPage,
7719
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
7720
+ searchValue: salesChannels.searchValue,
7721
+ onSearchValueChange: salesChannels.onSearchValueChange,
7722
+ placeholder: "Select sales channel",
7723
+ ...field
7724
+ }
7725
+ ) }),
7726
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7727
+ ] });
7728
+ }
7924
7729
  }
7925
7730
  );
7731
+ };
7732
+ const schema$2 = zod.z.object({
7733
+ sales_channel_id: zod.z.string().min(1)
7926
7734
  });
7927
- GridInput.displayName = "MetadataForm.GridInput";
7928
- const PlaceholderInner = () => {
7929
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
7930
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
7931
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
7932
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" }),
7933
- /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-7 w-12 rounded-md" })
7934
- ] }) })
7735
+ const ShippingAddress = () => {
7736
+ const { id } = reactRouterDom.useParams();
7737
+ const { order, isPending, isError, error } = useOrder(id, {
7738
+ fields: "+shipping_address"
7739
+ });
7740
+ if (isError) {
7741
+ throw error;
7742
+ }
7743
+ const isReady = !isPending && !!order;
7744
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7745
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
7746
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
7747
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
7748
+ ] }),
7749
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
7935
7750
  ] });
7936
7751
  };
7937
- const EDITABLE_TYPES = ["string", "number", "boolean"];
7938
- function getDefaultValues(metadata) {
7939
- if (!metadata || !Object.keys(metadata).length) {
7940
- return [
7752
+ const ShippingAddressForm = ({ order }) => {
7753
+ const form = reactHookForm.useForm({
7754
+ defaultValues: {
7755
+ first_name: order.shipping_address?.first_name ?? "",
7756
+ last_name: order.shipping_address?.last_name ?? "",
7757
+ company: order.shipping_address?.company ?? "",
7758
+ address_1: order.shipping_address?.address_1 ?? "",
7759
+ address_2: order.shipping_address?.address_2 ?? "",
7760
+ city: order.shipping_address?.city ?? "",
7761
+ province: order.shipping_address?.province ?? "",
7762
+ country_code: order.shipping_address?.country_code ?? "",
7763
+ postal_code: order.shipping_address?.postal_code ?? "",
7764
+ phone: order.shipping_address?.phone ?? ""
7765
+ },
7766
+ resolver: zod$1.zodResolver(schema$1)
7767
+ });
7768
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
7769
+ const { handleSuccess } = useRouteModal();
7770
+ const onSubmit = form.handleSubmit(async (data) => {
7771
+ await mutateAsync(
7941
7772
  {
7942
- key: "",
7943
- value: "",
7944
- disabled: false
7773
+ shipping_address: {
7774
+ first_name: data.first_name,
7775
+ last_name: data.last_name,
7776
+ company: data.company,
7777
+ address_1: data.address_1,
7778
+ address_2: data.address_2,
7779
+ city: data.city,
7780
+ province: data.province,
7781
+ country_code: data.country_code,
7782
+ postal_code: data.postal_code,
7783
+ phone: data.phone
7784
+ }
7785
+ },
7786
+ {
7787
+ onSuccess: () => {
7788
+ handleSuccess();
7789
+ },
7790
+ onError: (error) => {
7791
+ ui.toast.error(error.message);
7792
+ }
7945
7793
  }
7946
- ];
7947
- }
7948
- return Object.entries(metadata).map(([key, value]) => {
7949
- if (!EDITABLE_TYPES.includes(typeof value)) {
7950
- return {
7951
- key,
7952
- value,
7953
- disabled: true
7954
- };
7955
- }
7956
- let stringValue = value;
7957
- if (typeof value !== "string") {
7958
- stringValue = JSON.stringify(value);
7959
- }
7960
- return {
7961
- key,
7962
- value: stringValue,
7963
- original_key: key
7964
- };
7794
+ );
7965
7795
  });
7966
- }
7967
- function parseValues(values) {
7968
- const metadata = values.metadata;
7969
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
7970
- if (isEmpty) {
7971
- return null;
7972
- }
7973
- const update = {};
7974
- metadata.forEach((field) => {
7975
- let key = field.key;
7976
- let value = field.value;
7977
- const disabled = field.disabled;
7978
- if (!key || !value) {
7979
- return;
7980
- }
7981
- if (disabled) {
7982
- update[key] = value;
7983
- return;
7984
- }
7985
- key = key.trim();
7986
- value = value.trim();
7987
- if (value === "true") {
7988
- update[key] = true;
7989
- } else if (value === "false") {
7990
- update[key] = false;
7991
- } else {
7992
- const parsedNumber = parseFloat(value);
7993
- if (!isNaN(parsedNumber)) {
7994
- update[key] = parsedNumber;
7995
- } else {
7996
- update[key] = value;
7997
- }
7796
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
7797
+ KeyboundForm,
7798
+ {
7799
+ className: "flex flex-1 flex-col overflow-hidden",
7800
+ onSubmit,
7801
+ children: [
7802
+ /* @__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: [
7803
+ /* @__PURE__ */ jsxRuntime.jsx(
7804
+ Form$2.Field,
7805
+ {
7806
+ control: form.control,
7807
+ name: "country_code",
7808
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7809
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
7810
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
7811
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7812
+ ] })
7813
+ }
7814
+ ),
7815
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
7816
+ /* @__PURE__ */ jsxRuntime.jsx(
7817
+ Form$2.Field,
7818
+ {
7819
+ control: form.control,
7820
+ name: "first_name",
7821
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7822
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
7823
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7824
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7825
+ ] })
7826
+ }
7827
+ ),
7828
+ /* @__PURE__ */ jsxRuntime.jsx(
7829
+ Form$2.Field,
7830
+ {
7831
+ control: form.control,
7832
+ name: "last_name",
7833
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7834
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
7835
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7836
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7837
+ ] })
7838
+ }
7839
+ )
7840
+ ] }),
7841
+ /* @__PURE__ */ jsxRuntime.jsx(
7842
+ Form$2.Field,
7843
+ {
7844
+ control: form.control,
7845
+ name: "company",
7846
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7847
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
7848
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7849
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7850
+ ] })
7851
+ }
7852
+ ),
7853
+ /* @__PURE__ */ jsxRuntime.jsx(
7854
+ Form$2.Field,
7855
+ {
7856
+ control: form.control,
7857
+ name: "address_1",
7858
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7859
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
7860
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7861
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7862
+ ] })
7863
+ }
7864
+ ),
7865
+ /* @__PURE__ */ jsxRuntime.jsx(
7866
+ Form$2.Field,
7867
+ {
7868
+ control: form.control,
7869
+ name: "address_2",
7870
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7871
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
7872
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7873
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7874
+ ] })
7875
+ }
7876
+ ),
7877
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
7878
+ /* @__PURE__ */ jsxRuntime.jsx(
7879
+ Form$2.Field,
7880
+ {
7881
+ control: form.control,
7882
+ name: "postal_code",
7883
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7884
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
7885
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7886
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7887
+ ] })
7888
+ }
7889
+ ),
7890
+ /* @__PURE__ */ jsxRuntime.jsx(
7891
+ Form$2.Field,
7892
+ {
7893
+ control: form.control,
7894
+ name: "city",
7895
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7896
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
7897
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7898
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7899
+ ] })
7900
+ }
7901
+ )
7902
+ ] }),
7903
+ /* @__PURE__ */ jsxRuntime.jsx(
7904
+ Form$2.Field,
7905
+ {
7906
+ control: form.control,
7907
+ name: "province",
7908
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7909
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
7910
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7911
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7912
+ ] })
7913
+ }
7914
+ ),
7915
+ /* @__PURE__ */ jsxRuntime.jsx(
7916
+ Form$2.Field,
7917
+ {
7918
+ control: form.control,
7919
+ name: "phone",
7920
+ render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
7921
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
7922
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
7923
+ /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
7924
+ ] })
7925
+ }
7926
+ )
7927
+ ] }) }),
7928
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7929
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7930
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
7931
+ ] }) })
7932
+ ]
7998
7933
  }
7999
- });
8000
- return update;
8001
- }
8002
- function getHasUneditableRows(metadata) {
8003
- if (!metadata) {
8004
- return false;
8005
- }
8006
- return Object.values(metadata).some(
8007
- (value) => !EDITABLE_TYPES.includes(typeof value)
8008
- );
8009
- }
7934
+ ) });
7935
+ };
7936
+ const schema$1 = addressSchema;
8010
7937
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
8011
7938
  const Shipping = () => {
8012
7939
  const { id } = reactRouterDom.useParams();
@@ -8801,208 +8728,281 @@ const CustomAmountField = ({
8801
8728
  }
8802
8729
  );
8803
8730
  };
8804
- const ShippingAddress = () => {
8805
- const { id } = reactRouterDom.useParams();
8806
- const { order, isPending, isError, error } = useOrder(id, {
8807
- fields: "+shipping_address"
8731
+ const PROMOTION_QUERY_KEY = "promotions";
8732
+ const promotionsQueryKeys = {
8733
+ list: (query2) => [
8734
+ PROMOTION_QUERY_KEY,
8735
+ query2 ? query2 : void 0
8736
+ ],
8737
+ detail: (id, query2) => [
8738
+ PROMOTION_QUERY_KEY,
8739
+ id,
8740
+ query2 ? query2 : void 0
8741
+ ]
8742
+ };
8743
+ const usePromotions = (query2, options) => {
8744
+ const { data, ...rest } = reactQuery.useQuery({
8745
+ queryKey: promotionsQueryKeys.list(query2),
8746
+ queryFn: async () => sdk.admin.promotion.list(query2),
8747
+ ...options
8808
8748
  });
8809
- if (isError) {
8810
- throw error;
8749
+ return { ...data, ...rest };
8750
+ };
8751
+ const Promotions = () => {
8752
+ const { id } = reactRouterDom.useParams();
8753
+ const {
8754
+ order: preview,
8755
+ isError: isPreviewError,
8756
+ error: previewError
8757
+ } = useOrderPreview(id, void 0);
8758
+ useInitiateOrderEdit({ preview });
8759
+ const { onCancel } = useCancelOrderEdit({ preview });
8760
+ if (isPreviewError) {
8761
+ throw previewError;
8811
8762
  }
8812
- const isReady = !isPending && !!order;
8813
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8814
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8815
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
8816
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
8817
- ] }),
8818
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
8763
+ const isReady = !!preview;
8764
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
8765
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
8766
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
8819
8767
  ] });
8820
8768
  };
8821
- const ShippingAddressForm = ({ order }) => {
8822
- const form = reactHookForm.useForm({
8823
- defaultValues: {
8824
- first_name: order.shipping_address?.first_name ?? "",
8825
- last_name: order.shipping_address?.last_name ?? "",
8826
- company: order.shipping_address?.company ?? "",
8827
- address_1: order.shipping_address?.address_1 ?? "",
8828
- address_2: order.shipping_address?.address_2 ?? "",
8829
- city: order.shipping_address?.city ?? "",
8830
- province: order.shipping_address?.province ?? "",
8831
- country_code: order.shipping_address?.country_code ?? "",
8832
- postal_code: order.shipping_address?.postal_code ?? "",
8833
- phone: order.shipping_address?.phone ?? ""
8769
+ const PromotionForm = ({ preview }) => {
8770
+ const { items, shipping_methods } = preview;
8771
+ const [isSubmitting, setIsSubmitting] = React.useState(false);
8772
+ const [comboboxValue, setComboboxValue] = React.useState("");
8773
+ const { handleSuccess } = useRouteModal();
8774
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
8775
+ const promoIds = getPromotionIds(items, shipping_methods);
8776
+ const { promotions, isPending, isError, error } = usePromotions(
8777
+ {
8778
+ id: promoIds
8834
8779
  },
8835
- resolver: zod$1.zodResolver(schema$1)
8780
+ {
8781
+ enabled: !!promoIds.length
8782
+ }
8783
+ );
8784
+ const comboboxData = useComboboxData({
8785
+ queryKey: ["promotions", "combobox", promoIds],
8786
+ queryFn: async (params) => {
8787
+ return await sdk.admin.promotion.list({
8788
+ ...params,
8789
+ id: {
8790
+ $nin: promoIds
8791
+ }
8792
+ });
8793
+ },
8794
+ getOptions: (data) => {
8795
+ return data.promotions.map((promotion) => ({
8796
+ label: promotion.code,
8797
+ value: promotion.code
8798
+ }));
8799
+ }
8836
8800
  });
8837
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
8838
- const { handleSuccess } = useRouteModal();
8839
- const onSubmit = form.handleSubmit(async (data) => {
8840
- await mutateAsync(
8801
+ const add = async (value) => {
8802
+ if (!value) {
8803
+ return;
8804
+ }
8805
+ addPromotions(
8841
8806
  {
8842
- shipping_address: {
8843
- first_name: data.first_name,
8844
- last_name: data.last_name,
8845
- company: data.company,
8846
- address_1: data.address_1,
8847
- address_2: data.address_2,
8848
- city: data.city,
8849
- province: data.province,
8850
- country_code: data.country_code,
8851
- postal_code: data.postal_code,
8852
- phone: data.phone
8807
+ promo_codes: [value]
8808
+ },
8809
+ {
8810
+ onError: (e) => {
8811
+ ui.toast.error(e.message);
8812
+ comboboxData.onSearchValueChange("");
8813
+ setComboboxValue("");
8814
+ },
8815
+ onSuccess: () => {
8816
+ comboboxData.onSearchValueChange("");
8817
+ setComboboxValue("");
8818
+ }
8819
+ }
8820
+ );
8821
+ };
8822
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
8823
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
8824
+ const onSubmit = async () => {
8825
+ setIsSubmitting(true);
8826
+ let requestSucceeded = false;
8827
+ await requestOrderEdit(void 0, {
8828
+ onError: (e) => {
8829
+ ui.toast.error(e.message);
8830
+ },
8831
+ onSuccess: () => {
8832
+ requestSucceeded = true;
8833
+ }
8834
+ });
8835
+ if (!requestSucceeded) {
8836
+ setIsSubmitting(false);
8837
+ return;
8838
+ }
8839
+ await confirmOrderEdit(void 0, {
8840
+ onError: (e) => {
8841
+ ui.toast.error(e.message);
8842
+ },
8843
+ onSuccess: () => {
8844
+ handleSuccess();
8845
+ },
8846
+ onSettled: () => {
8847
+ setIsSubmitting(false);
8848
+ }
8849
+ });
8850
+ };
8851
+ if (isError) {
8852
+ throw error;
8853
+ }
8854
+ return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
8855
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
8856
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
8857
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
8858
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
8859
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
8860
+ ] }),
8861
+ /* @__PURE__ */ jsxRuntime.jsx(
8862
+ Combobox,
8863
+ {
8864
+ id: "promotion-combobox",
8865
+ "aria-describedby": "promotion-combobox-hint",
8866
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
8867
+ fetchNextPage: comboboxData.fetchNextPage,
8868
+ options: comboboxData.options,
8869
+ onSearchValueChange: comboboxData.onSearchValueChange,
8870
+ searchValue: comboboxData.searchValue,
8871
+ disabled: comboboxData.disabled || isAddingPromotions,
8872
+ onChange: add,
8873
+ value: comboboxValue
8874
+ }
8875
+ )
8876
+ ] }),
8877
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
8878
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions?.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
8879
+ PromotionItem,
8880
+ {
8881
+ promotion,
8882
+ orderId: preview.id,
8883
+ isLoading: isPending
8884
+ },
8885
+ promotion.id
8886
+ )) })
8887
+ ] }) }),
8888
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
8889
+ /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
8890
+ /* @__PURE__ */ jsxRuntime.jsx(
8891
+ ui.Button,
8892
+ {
8893
+ size: "small",
8894
+ type: "submit",
8895
+ isLoading: isSubmitting || isAddingPromotions,
8896
+ children: "Save"
8853
8897
  }
8898
+ )
8899
+ ] }) })
8900
+ ] });
8901
+ };
8902
+ const PromotionItem = ({
8903
+ promotion,
8904
+ orderId,
8905
+ isLoading
8906
+ }) => {
8907
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
8908
+ const onRemove = async () => {
8909
+ removePromotions(
8910
+ {
8911
+ promo_codes: [promotion.code]
8854
8912
  },
8855
8913
  {
8856
- onSuccess: () => {
8857
- handleSuccess();
8858
- },
8859
- onError: (error) => {
8860
- ui.toast.error(error.message);
8914
+ onError: (e) => {
8915
+ ui.toast.error(e.message);
8861
8916
  }
8862
8917
  }
8863
8918
  );
8864
- });
8865
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8866
- KeyboundForm,
8919
+ };
8920
+ const displayValue = getDisplayValue(promotion);
8921
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8922
+ "div",
8867
8923
  {
8868
- className: "flex flex-1 flex-col overflow-hidden",
8869
- onSubmit,
8924
+ className: ui.clx(
8925
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
8926
+ {
8927
+ "animate-pulse": isLoading
8928
+ }
8929
+ ),
8870
8930
  children: [
8871
- /* @__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: [
8872
- /* @__PURE__ */ jsxRuntime.jsx(
8873
- Form$2.Field,
8874
- {
8875
- control: form.control,
8876
- name: "country_code",
8877
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8878
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
8879
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
8880
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8881
- ] })
8882
- }
8883
- ),
8884
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8885
- /* @__PURE__ */ jsxRuntime.jsx(
8886
- Form$2.Field,
8887
- {
8888
- control: form.control,
8889
- name: "first_name",
8890
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8891
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
8892
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8893
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8894
- ] })
8895
- }
8896
- ),
8897
- /* @__PURE__ */ jsxRuntime.jsx(
8898
- Form$2.Field,
8899
- {
8900
- control: form.control,
8901
- name: "last_name",
8902
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8903
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
8904
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8905
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8906
- ] })
8907
- }
8908
- )
8909
- ] }),
8910
- /* @__PURE__ */ jsxRuntime.jsx(
8911
- Form$2.Field,
8912
- {
8913
- control: form.control,
8914
- name: "company",
8915
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8916
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
8917
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8918
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8919
- ] })
8920
- }
8921
- ),
8922
- /* @__PURE__ */ jsxRuntime.jsx(
8923
- Form$2.Field,
8924
- {
8925
- control: form.control,
8926
- name: "address_1",
8927
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8928
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
8929
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8930
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8931
- ] })
8932
- }
8933
- ),
8934
- /* @__PURE__ */ jsxRuntime.jsx(
8935
- Form$2.Field,
8936
- {
8937
- control: form.control,
8938
- name: "address_2",
8939
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8940
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
8941
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8942
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8943
- ] })
8944
- }
8945
- ),
8946
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8947
- /* @__PURE__ */ jsxRuntime.jsx(
8948
- Form$2.Field,
8949
- {
8950
- control: form.control,
8951
- name: "postal_code",
8952
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8953
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
8954
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8955
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8956
- ] })
8957
- }
8958
- ),
8959
- /* @__PURE__ */ jsxRuntime.jsx(
8960
- Form$2.Field,
8961
- {
8962
- control: form.control,
8963
- name: "city",
8964
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8965
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
8966
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8967
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8968
- ] })
8969
- }
8970
- )
8971
- ] }),
8972
- /* @__PURE__ */ jsxRuntime.jsx(
8973
- Form$2.Field,
8974
- {
8975
- control: form.control,
8976
- name: "province",
8977
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8978
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
8979
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8980
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8981
- ] })
8982
- }
8983
- ),
8984
- /* @__PURE__ */ jsxRuntime.jsx(
8985
- Form$2.Field,
8986
- {
8987
- control: form.control,
8988
- name: "phone",
8989
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8990
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
8991
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8992
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8993
- ] })
8994
- }
8995
- )
8996
- ] }) }),
8997
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
8998
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
8999
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9000
- ] }) })
8931
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
8932
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
8933
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
8934
+ displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
8935
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
8936
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
8937
+ ] }),
8938
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: promotion.application_method?.allocation })
8939
+ ] })
8940
+ ] }),
8941
+ /* @__PURE__ */ jsxRuntime.jsx(
8942
+ ui.IconButton,
8943
+ {
8944
+ size: "small",
8945
+ type: "button",
8946
+ variant: "transparent",
8947
+ onClick: onRemove,
8948
+ isLoading: isPending || isLoading,
8949
+ children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
8950
+ }
8951
+ )
9001
8952
  ]
8953
+ },
8954
+ promotion.id
8955
+ );
8956
+ };
8957
+ function getDisplayValue(promotion) {
8958
+ const value = promotion.application_method?.value;
8959
+ if (!value) {
8960
+ return null;
8961
+ }
8962
+ if (promotion.application_method?.type === "fixed") {
8963
+ const currency = promotion.application_method?.currency_code;
8964
+ if (!currency) {
8965
+ return null;
9002
8966
  }
9003
- ) });
8967
+ return getLocaleAmount(value, currency);
8968
+ } else if (promotion.application_method?.type === "percentage") {
8969
+ return formatPercentage(value);
8970
+ }
8971
+ return null;
8972
+ }
8973
+ const formatter = new Intl.NumberFormat([], {
8974
+ style: "percent",
8975
+ minimumFractionDigits: 2
8976
+ });
8977
+ const formatPercentage = (value, isPercentageValue = false) => {
8978
+ let val = value || 0;
8979
+ if (!isPercentageValue) {
8980
+ val = val / 100;
8981
+ }
8982
+ return formatter.format(val);
9004
8983
  };
9005
- const schema$1 = addressSchema;
8984
+ function getPromotionIds(items, shippingMethods) {
8985
+ const promotionIds = /* @__PURE__ */ new Set();
8986
+ for (const item of items) {
8987
+ if (item.adjustments) {
8988
+ for (const adjustment of item.adjustments) {
8989
+ if (adjustment.promotion_id) {
8990
+ promotionIds.add(adjustment.promotion_id);
8991
+ }
8992
+ }
8993
+ }
8994
+ }
8995
+ for (const shippingMethod of shippingMethods) {
8996
+ if (shippingMethod.adjustments) {
8997
+ for (const adjustment of shippingMethod.adjustments) {
8998
+ if (adjustment.promotion_id) {
8999
+ promotionIds.add(adjustment.promotion_id);
9000
+ }
9001
+ }
9002
+ }
9003
+ }
9004
+ return Array.from(promotionIds);
9005
+ }
9006
9006
  const TransferOwnership = () => {
9007
9007
  const { id } = reactRouterDom.useParams();
9008
9008
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -9498,10 +9498,6 @@ const routeModule = {
9498
9498
  handle,
9499
9499
  loader,
9500
9500
  children: [
9501
- {
9502
- Component: BillingAddress,
9503
- path: "/draft-orders/:id/billing-address"
9504
- },
9505
9501
  {
9506
9502
  Component: CustomItems,
9507
9503
  path: "/draft-orders/:id/custom-items"
@@ -9515,24 +9511,28 @@ const routeModule = {
9515
9511
  path: "/draft-orders/:id/items"
9516
9512
  },
9517
9513
  {
9518
- Component: Promotions,
9519
- path: "/draft-orders/:id/promotions"
9514
+ Component: BillingAddress,
9515
+ path: "/draft-orders/:id/billing-address"
9516
+ },
9517
+ {
9518
+ Component: Metadata,
9519
+ path: "/draft-orders/:id/metadata"
9520
9520
  },
9521
9521
  {
9522
9522
  Component: SalesChannel,
9523
9523
  path: "/draft-orders/:id/sales-channel"
9524
9524
  },
9525
9525
  {
9526
- Component: Metadata,
9527
- path: "/draft-orders/:id/metadata"
9526
+ Component: ShippingAddress,
9527
+ path: "/draft-orders/:id/shipping-address"
9528
9528
  },
9529
9529
  {
9530
9530
  Component: Shipping,
9531
9531
  path: "/draft-orders/:id/shipping"
9532
9532
  },
9533
9533
  {
9534
- Component: ShippingAddress,
9535
- path: "/draft-orders/:id/shipping-address"
9534
+ Component: Promotions,
9535
+ path: "/draft-orders/:id/promotions"
9536
9536
  },
9537
9537
  {
9538
9538
  Component: TransferOwnership,