@medusajs/draft-order 2.20.0-snapshot-20260901131559 → 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.
@@ -6000,195 +6000,6 @@ const CustomItemsForm = () => {
6000
6000
  const schema$5 = zod.z.object({
6001
6001
  email: zod.z.string().email()
6002
6002
  });
6003
- const BillingAddress = () => {
6004
- const { id } = reactRouterDom.useParams();
6005
- const { order, isPending, isError, error } = useOrder(id, {
6006
- fields: "+billing_address"
6007
- });
6008
- if (isError) {
6009
- throw error;
6010
- }
6011
- const isReady = !isPending && !!order;
6012
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
6013
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
6014
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Billing Address" }) }),
6015
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
6016
- ] }),
6017
- isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
6018
- ] });
6019
- };
6020
- const BillingAddressForm = ({ order }) => {
6021
- const form = reactHookForm.useForm({
6022
- defaultValues: {
6023
- first_name: order.billing_address?.first_name ?? "",
6024
- last_name: order.billing_address?.last_name ?? "",
6025
- company: order.billing_address?.company ?? "",
6026
- address_1: order.billing_address?.address_1 ?? "",
6027
- address_2: order.billing_address?.address_2 ?? "",
6028
- city: order.billing_address?.city ?? "",
6029
- province: order.billing_address?.province ?? "",
6030
- country_code: order.billing_address?.country_code ?? "",
6031
- postal_code: order.billing_address?.postal_code ?? "",
6032
- phone: order.billing_address?.phone ?? ""
6033
- },
6034
- resolver: zod$1.zodResolver(schema$4)
6035
- });
6036
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
6037
- const { handleSuccess } = useRouteModal();
6038
- const onSubmit = form.handleSubmit(async (data) => {
6039
- await mutateAsync(
6040
- { billing_address: data },
6041
- {
6042
- onSuccess: () => {
6043
- handleSuccess();
6044
- },
6045
- onError: (error) => {
6046
- ui.toast.error(error.message);
6047
- }
6048
- }
6049
- );
6050
- });
6051
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
6052
- KeyboundForm,
6053
- {
6054
- className: "flex flex-1 flex-col overflow-hidden",
6055
- onSubmit,
6056
- children: [
6057
- /* @__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: [
6058
- /* @__PURE__ */ jsxRuntime.jsx(
6059
- Form$2.Field,
6060
- {
6061
- control: form.control,
6062
- name: "country_code",
6063
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6064
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
6065
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
6066
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6067
- ] })
6068
- }
6069
- ),
6070
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
6071
- /* @__PURE__ */ jsxRuntime.jsx(
6072
- Form$2.Field,
6073
- {
6074
- control: form.control,
6075
- name: "first_name",
6076
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6077
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
6078
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6079
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6080
- ] })
6081
- }
6082
- ),
6083
- /* @__PURE__ */ jsxRuntime.jsx(
6084
- Form$2.Field,
6085
- {
6086
- control: form.control,
6087
- name: "last_name",
6088
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6089
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
6090
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6091
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6092
- ] })
6093
- }
6094
- )
6095
- ] }),
6096
- /* @__PURE__ */ jsxRuntime.jsx(
6097
- Form$2.Field,
6098
- {
6099
- control: form.control,
6100
- name: "company",
6101
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6102
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
6103
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6104
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6105
- ] })
6106
- }
6107
- ),
6108
- /* @__PURE__ */ jsxRuntime.jsx(
6109
- Form$2.Field,
6110
- {
6111
- control: form.control,
6112
- name: "address_1",
6113
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6114
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
6115
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6116
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6117
- ] })
6118
- }
6119
- ),
6120
- /* @__PURE__ */ jsxRuntime.jsx(
6121
- Form$2.Field,
6122
- {
6123
- control: form.control,
6124
- name: "address_2",
6125
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6126
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
6127
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6128
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6129
- ] })
6130
- }
6131
- ),
6132
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
6133
- /* @__PURE__ */ jsxRuntime.jsx(
6134
- Form$2.Field,
6135
- {
6136
- control: form.control,
6137
- name: "postal_code",
6138
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6139
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
6140
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6141
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6142
- ] })
6143
- }
6144
- ),
6145
- /* @__PURE__ */ jsxRuntime.jsx(
6146
- Form$2.Field,
6147
- {
6148
- control: form.control,
6149
- name: "city",
6150
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6151
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
6152
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6153
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6154
- ] })
6155
- }
6156
- )
6157
- ] }),
6158
- /* @__PURE__ */ jsxRuntime.jsx(
6159
- Form$2.Field,
6160
- {
6161
- control: form.control,
6162
- name: "province",
6163
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6164
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
6165
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6166
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6167
- ] })
6168
- }
6169
- ),
6170
- /* @__PURE__ */ jsxRuntime.jsx(
6171
- Form$2.Field,
6172
- {
6173
- control: form.control,
6174
- name: "phone",
6175
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
6176
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
6177
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
6178
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
6179
- ] })
6180
- }
6181
- )
6182
- ] }) }),
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", isLoading: isPending, children: "Save" })
6186
- ] }) })
6187
- ]
6188
- }
6189
- ) });
6190
- };
6191
- const schema$4 = addressSchema;
6192
6003
  const Email = () => {
6193
6004
  const { id } = reactRouterDom.useParams();
6194
6005
  const { order, isPending, isError, error } = useOrder(id, {
@@ -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(
@@ -6983,7 +6794,8 @@ const ExistingItemsForm = ({ orderId, items }) => {
6983
6794
  q,
6984
6795
  order,
6985
6796
  offset: offset ? parseInt(offset) : void 0,
6986
- limit: LIMIT
6797
+ limit: LIMIT,
6798
+ fields: "*inventory_items.inventory.location_levels,+inventory_quantity,+manage_inventory"
6987
6799
  },
6988
6800
  {
6989
6801
  placeholderData: reactQuery.keepPreviousData
@@ -7062,6 +6874,23 @@ const ExistingItemsForm = ({ orderId, items }) => {
7062
6874
  );
7063
6875
  };
7064
6876
  const columnHelper = ui.createDataTableColumnHelper();
6877
+ const getVariantInventory = (variant) => {
6878
+ if (!variant.manage_inventory) {
6879
+ return { text: "Not managed", hasInventoryKit: false, notManaged: true };
6880
+ }
6881
+ const quantity = variant.inventory_quantity;
6882
+ const inventoryItems = variant.inventory_items?.map((i) => i.inventory).filter(Boolean) ?? [];
6883
+ const hasInventoryKit = inventoryItems.length > 1;
6884
+ const locations = {};
6885
+ inventoryItems.forEach((i) => {
6886
+ i.location_levels?.forEach((l) => {
6887
+ locations[l.id] = true;
6888
+ });
6889
+ });
6890
+ const locationCount = Object.keys(locations).length;
6891
+ const text = hasInventoryKit ? `${quantity} available` : `${quantity} available at ${locationCount} location${locationCount === 1 ? "" : "s"}`;
6892
+ return { text, hasInventoryKit, quantity, notManaged: false };
6893
+ };
7065
6894
  const useColumns = () => {
7066
6895
  return React.useMemo(() => {
7067
6896
  return [
@@ -7122,6 +6951,25 @@ const useColumns = () => {
7122
6951
  enableSorting: true,
7123
6952
  sortAscLabel: "Oldest first",
7124
6953
  sortDescLabel: "Newest first"
6954
+ }),
6955
+ columnHelper.display({
6956
+ id: "inventory",
6957
+ header: "Stock",
6958
+ cell: ({ row }) => {
6959
+ const { text, hasInventoryKit, quantity, notManaged } = getVariantInventory(row.original);
6960
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: text, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full items-center gap-2 overflow-hidden", children: [
6961
+ hasInventoryKit && /* @__PURE__ */ jsxRuntime.jsx(icons.Component, {}),
6962
+ /* @__PURE__ */ jsxRuntime.jsx(
6963
+ "span",
6964
+ {
6965
+ className: ui.clx("truncate", {
6966
+ "text-ui-fg-error": !quantity && !notManaged
6967
+ }),
6968
+ children: text
6969
+ }
6970
+ )
6971
+ ] }) });
6972
+ }
7125
6973
  })
7126
6974
  ];
7127
6975
  }, []);
@@ -7239,54 +7087,10 @@ const customItemSchema = zod.z.object({
7239
7087
  quantity: zod.z.number(),
7240
7088
  unit_price: zod.z.union([zod.z.number(), zod.z.string()])
7241
7089
  });
7242
- const InlineTip = React.forwardRef(
7243
- ({ variant = "tip", label, className, children, ...props }, ref) => {
7244
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
7245
- return /* @__PURE__ */ jsxRuntime.jsxs(
7246
- "div",
7247
- {
7248
- ref,
7249
- className: ui.clx(
7250
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
7251
- className
7252
- ),
7253
- ...props,
7254
- children: [
7255
- /* @__PURE__ */ jsxRuntime.jsx(
7256
- "div",
7257
- {
7258
- role: "presentation",
7259
- className: ui.clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
7260
- "bg-ui-tag-orange-icon": variant === "warning"
7261
- })
7262
- }
7263
- ),
7264
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-pretty", children: [
7265
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
7266
- labelValue,
7267
- ":"
7268
- ] }),
7269
- " ",
7270
- children
7271
- ] })
7272
- ]
7273
- }
7274
- );
7275
- }
7276
- );
7277
- InlineTip.displayName = "InlineTip";
7278
- const MetadataFieldSchema = zod.z.object({
7279
- key: zod.z.string(),
7280
- disabled: zod.z.boolean().optional(),
7281
- value: zod.z.any()
7282
- });
7283
- const MetadataSchema = zod.z.object({
7284
- metadata: zod.z.array(MetadataFieldSchema)
7285
- });
7286
- const Metadata = () => {
7090
+ const BillingAddress = () => {
7287
7091
  const { id } = reactRouterDom.useParams();
7288
7092
  const { order, isPending, isError, error } = useOrder(id, {
7289
- fields: "metadata"
7093
+ fields: "+billing_address"
7290
7094
  });
7291
7095
  if (isError) {
7292
7096
  throw error;
@@ -7294,13 +7098,246 @@ const Metadata = () => {
7294
7098
  const isReady = !isPending && !!order;
7295
7099
  return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7296
7100
  /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
7297
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Metadata" }) }),
7298
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
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" }) })
7299
7103
  ] }),
7300
- !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order?.metadata })
7104
+ isReady && /* @__PURE__ */ jsxRuntime.jsx(BillingAddressForm, { order })
7301
7105
  ] });
7302
7106
  };
7303
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
7107
+ const BillingAddressForm = ({ order }) => {
7108
+ const form = reactHookForm.useForm({
7109
+ defaultValues: {
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 ?? ""
7120
+ },
7121
+ resolver: zod$1.zodResolver(schema$3)
7122
+ });
7123
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
7124
+ const { handleSuccess } = useRouteModal();
7125
+ const onSubmit = form.handleSubmit(async (data) => {
7126
+ await mutateAsync(
7127
+ { billing_address: data },
7128
+ {
7129
+ onSuccess: () => {
7130
+ handleSuccess();
7131
+ },
7132
+ onError: (error) => {
7133
+ ui.toast.error(error.message);
7134
+ }
7135
+ }
7136
+ );
7137
+ });
7138
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
7139
+ KeyboundForm,
7140
+ {
7141
+ className: "flex flex-1 flex-col overflow-hidden",
7142
+ onSubmit,
7143
+ children: [
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
+ ] }) }),
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", isLoading: isPending, children: "Save" })
7273
+ ] }) })
7274
+ ]
7275
+ }
7276
+ ) });
7277
+ };
7278
+ const schema$3 = addressSchema;
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()
7319
+ });
7320
+ const MetadataSchema = zod.z.object({
7321
+ metadata: zod.z.array(MetadataFieldSchema)
7322
+ });
7323
+ const Metadata = () => {
7324
+ const { id } = reactRouterDom.useParams();
7325
+ const { order, isPending, isError, error } = useOrder(id, {
7326
+ fields: "metadata"
7327
+ });
7328
+ if (isError) {
7329
+ throw error;
7330
+ }
7331
+ const isReady = !isPending && !!order;
7332
+ return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
7333
+ /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
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." }) })
7336
+ ] }),
7337
+ !isReady ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsxRuntime.jsx(MetadataForm, { orderId: id, metadata: order?.metadata })
7338
+ ] });
7339
+ };
7340
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
7304
7341
  const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
7305
7342
  const MetadataForm = ({ orderId, metadata }) => {
7306
7343
  const { handleSuccess } = useRouteModal();
@@ -7589,281 +7626,314 @@ function getHasUneditableRows(metadata) {
7589
7626
  (value) => !EDITABLE_TYPES.includes(typeof value)
7590
7627
  );
7591
7628
  }
7592
- const PROMOTION_QUERY_KEY = "promotions";
7593
- const promotionsQueryKeys = {
7594
- list: (query2) => [
7595
- PROMOTION_QUERY_KEY,
7596
- query2 ? query2 : void 0
7597
- ],
7598
- detail: (id, query2) => [
7599
- PROMOTION_QUERY_KEY,
7600
- id,
7601
- query2 ? query2 : void 0
7602
- ]
7603
- };
7604
- const usePromotions = (query2, options) => {
7605
- const { data, ...rest } = reactQuery.useQuery({
7606
- queryKey: promotionsQueryKeys.list(query2),
7607
- queryFn: async () => sdk.admin.promotion.list(query2),
7608
- ...options
7609
- });
7610
- return { ...data, ...rest };
7611
- };
7612
- const Promotions = () => {
7629
+ const SalesChannel = () => {
7613
7630
  const { id } = reactRouterDom.useParams();
7614
- const {
7615
- order: preview,
7616
- isError: isPreviewError,
7617
- error: previewError
7618
- } = useOrderPreview(id, void 0);
7619
- useInitiateOrderEdit({ preview });
7620
- const { onCancel } = useCancelOrderEdit({ preview });
7621
- if (isPreviewError) {
7622
- throw previewError;
7623
- }
7624
- const isReady = !!preview;
7625
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { onClose: onCancel, children: [
7626
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Promotions" }) }) }),
7627
- isReady && /* @__PURE__ */ jsxRuntime.jsx(PromotionForm, { preview })
7628
- ] });
7629
- };
7630
- const PromotionForm = ({ preview }) => {
7631
- const { items, shipping_methods } = preview;
7632
- const [isSubmitting, setIsSubmitting] = React.useState(false);
7633
- const [comboboxValue, setComboboxValue] = React.useState("");
7634
- const { handleSuccess } = useRouteModal();
7635
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
7636
- const promoIds = getPromotionIds(items, shipping_methods);
7637
- const { promotions, isPending, isError, error } = usePromotions(
7631
+ const { draft_order, isPending, isError, error } = useDraftOrder(
7632
+ id,
7638
7633
  {
7639
- id: promoIds
7634
+ fields: "+sales_channel_id"
7640
7635
  },
7641
7636
  {
7642
- enabled: !!promoIds.length
7637
+ enabled: !!id
7643
7638
  }
7644
7639
  );
7645
- const comboboxData = useComboboxData({
7646
- queryKey: ["promotions", "combobox", promoIds],
7647
- queryFn: async (params) => {
7648
- return await sdk.admin.promotion.list({
7649
- ...params,
7650
- id: {
7651
- $nin: promoIds
7652
- }
7653
- });
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 || ""
7654
7656
  },
7655
- getOptions: (data) => {
7656
- return data.promotions.map((promotion) => ({
7657
- label: promotion.code,
7658
- value: promotion.code
7659
- }));
7660
- }
7657
+ resolver: zod$1.zodResolver(schema$2)
7661
7658
  });
7662
- const add = async (value) => {
7663
- if (!value) {
7664
- return;
7665
- }
7666
- addPromotions(
7659
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
7660
+ const { handleSuccess } = useRouteModal();
7661
+ const onSubmit = form.handleSubmit(async (data) => {
7662
+ await mutateAsync(
7667
7663
  {
7668
- promo_codes: [value]
7664
+ sales_channel_id: data.sales_channel_id
7669
7665
  },
7670
7666
  {
7671
- onError: (e) => {
7672
- ui.toast.error(e.message);
7673
- comboboxData.onSearchValueChange("");
7674
- setComboboxValue("");
7675
- },
7676
7667
  onSuccess: () => {
7677
- comboboxData.onSearchValueChange("");
7678
- setComboboxValue("");
7668
+ ui.toast.success("Sales channel updated");
7669
+ handleSuccess();
7670
+ },
7671
+ onError: (error) => {
7672
+ ui.toast.error(error.message);
7679
7673
  }
7680
7674
  }
7681
7675
  );
7682
- };
7683
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
7684
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
7685
- const onSubmit = async () => {
7686
- setIsSubmitting(true);
7687
- let requestSucceeded = false;
7688
- await requestOrderEdit(void 0, {
7689
- onError: (e) => {
7690
- ui.toast.error(e.message);
7691
- },
7692
- onSuccess: () => {
7693
- requestSucceeded = true;
7694
- }
7695
- });
7696
- if (!requestSucceeded) {
7697
- setIsSubmitting(false);
7698
- return;
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
+ ]
7699
7689
  }
7700
- await confirmOrderEdit(void 0, {
7701
- onError: (e) => {
7702
- ui.toast.error(e.message);
7703
- },
7704
- onSuccess: () => {
7705
- handleSuccess();
7706
- },
7707
- onSettled: () => {
7708
- setIsSubmitting(false);
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,
7708
+ {
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
+ ] });
7709
7728
  }
7710
- });
7711
- };
7729
+ }
7730
+ );
7731
+ };
7732
+ const schema$2 = zod.z.object({
7733
+ sales_channel_id: zod.z.string().min(1)
7734
+ });
7735
+ const ShippingAddress = () => {
7736
+ const { id } = reactRouterDom.useParams();
7737
+ const { order, isPending, isError, error } = useOrder(id, {
7738
+ fields: "+shipping_address"
7739
+ });
7712
7740
  if (isError) {
7713
7741
  throw error;
7714
7742
  }
7715
- return /* @__PURE__ */ jsxRuntime.jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
7716
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
7717
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
7718
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
7719
- /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
7720
- /* @__PURE__ */ jsxRuntime.jsx(ui.Hint, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
7721
- ] }),
7722
- /* @__PURE__ */ jsxRuntime.jsx(
7723
- Combobox,
7724
- {
7725
- id: "promotion-combobox",
7726
- "aria-describedby": "promotion-combobox-hint",
7727
- isFetchingNextPage: comboboxData.isFetchingNextPage,
7728
- fetchNextPage: comboboxData.fetchNextPage,
7729
- options: comboboxData.options,
7730
- onSearchValueChange: comboboxData.onSearchValueChange,
7731
- searchValue: comboboxData.searchValue,
7732
- disabled: comboboxData.disabled || isAddingPromotions,
7733
- onChange: add,
7734
- value: comboboxValue
7735
- }
7736
- )
7737
- ] }),
7738
- /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { variant: "dashed" }),
7739
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: promotions?.map((promotion) => /* @__PURE__ */ jsxRuntime.jsx(
7740
- PromotionItem,
7741
- {
7742
- promotion,
7743
- orderId: preview.id,
7744
- isLoading: isPending
7745
- },
7746
- promotion.id
7747
- )) })
7748
- ] }) }),
7749
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
7750
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
7751
- /* @__PURE__ */ jsxRuntime.jsx(
7752
- ui.Button,
7753
- {
7754
- size: "small",
7755
- type: "submit",
7756
- isLoading: isSubmitting || isAddingPromotions,
7757
- children: "Save"
7758
- }
7759
- )
7760
- ] }) })
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 })
7761
7750
  ] });
7762
7751
  };
7763
- const PromotionItem = ({
7764
- promotion,
7765
- orderId,
7766
- isLoading
7767
- }) => {
7768
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
7769
- const onRemove = async () => {
7770
- removePromotions(
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(
7771
7772
  {
7772
- promo_codes: [promotion.code]
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
+ }
7773
7785
  },
7774
7786
  {
7775
- onError: (e) => {
7776
- ui.toast.error(e.message);
7787
+ onSuccess: () => {
7788
+ handleSuccess();
7789
+ },
7790
+ onError: (error) => {
7791
+ ui.toast.error(error.message);
7777
7792
  }
7778
7793
  }
7779
7794
  );
7780
- };
7781
- const displayValue = getDisplayValue(promotion);
7782
- return /* @__PURE__ */ jsxRuntime.jsxs(
7783
- "div",
7795
+ });
7796
+ return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
7797
+ KeyboundForm,
7784
7798
  {
7785
- className: ui.clx(
7786
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
7787
- {
7788
- "animate-pulse": isLoading
7789
- }
7790
- ),
7799
+ className: "flex flex-1 flex-col overflow-hidden",
7800
+ onSubmit,
7791
7801
  children: [
7792
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7793
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
7794
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
7795
- displayValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
7796
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: displayValue }),
7797
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", children: "·" })
7798
- ] }),
7799
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", leading: "compact", className: "capitalize", children: promotion.application_method?.allocation })
7800
- ] })
7801
- ] }),
7802
- /* @__PURE__ */ jsxRuntime.jsx(
7803
- ui.IconButton,
7804
- {
7805
- size: "small",
7806
- type: "button",
7807
- variant: "transparent",
7808
- onClick: onRemove,
7809
- isLoading: isPending || isLoading,
7810
- children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMark, {})
7811
- }
7812
- )
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
+ ] }) })
7813
7932
  ]
7814
- },
7815
- promotion.id
7816
- );
7817
- };
7818
- function getDisplayValue(promotion) {
7819
- const value = promotion.application_method?.value;
7820
- if (!value) {
7821
- return null;
7822
- }
7823
- if (promotion.application_method?.type === "fixed") {
7824
- const currency = promotion.application_method?.currency_code;
7825
- if (!currency) {
7826
- return null;
7827
7933
  }
7828
- return getLocaleAmount(value, currency);
7829
- } else if (promotion.application_method?.type === "percentage") {
7830
- return formatPercentage(value);
7831
- }
7832
- return null;
7833
- }
7834
- const formatter = new Intl.NumberFormat([], {
7835
- style: "percent",
7836
- minimumFractionDigits: 2
7837
- });
7838
- const formatPercentage = (value, isPercentageValue = false) => {
7839
- let val = value || 0;
7840
- if (!isPercentageValue) {
7841
- val = val / 100;
7842
- }
7843
- return formatter.format(val);
7934
+ ) });
7844
7935
  };
7845
- function getPromotionIds(items, shippingMethods) {
7846
- const promotionIds = /* @__PURE__ */ new Set();
7847
- for (const item of items) {
7848
- if (item.adjustments) {
7849
- for (const adjustment of item.adjustments) {
7850
- if (adjustment.promotion_id) {
7851
- promotionIds.add(adjustment.promotion_id);
7852
- }
7853
- }
7854
- }
7855
- }
7856
- for (const shippingMethod of shippingMethods) {
7857
- if (shippingMethod.adjustments) {
7858
- for (const adjustment of shippingMethod.adjustments) {
7859
- if (adjustment.promotion_id) {
7860
- promotionIds.add(adjustment.promotion_id);
7861
- }
7862
- }
7863
- }
7864
- }
7865
- return Array.from(promotionIds);
7866
- }
7936
+ const schema$1 = addressSchema;
7867
7937
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
7868
7938
  const Shipping = () => {
7869
7939
  const { id } = reactRouterDom.useParams();
@@ -8658,314 +8728,281 @@ const CustomAmountField = ({
8658
8728
  }
8659
8729
  );
8660
8730
  };
8661
- const SalesChannel = () => {
8662
- const { id } = reactRouterDom.useParams();
8663
- const { draft_order, isPending, isError, error } = useDraftOrder(
8664
- id,
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
8748
+ });
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;
8762
+ }
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 })
8767
+ ] });
8768
+ };
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(
8665
8777
  {
8666
- fields: "+sales_channel_id"
8778
+ id: promoIds
8667
8779
  },
8668
8780
  {
8669
- enabled: !!id
8781
+ enabled: !!promoIds.length
8670
8782
  }
8671
8783
  );
8672
- if (isError) {
8673
- throw error;
8674
- }
8675
- const ISrEADY = !!draft_order && !isPending;
8676
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8677
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8678
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Sales Channel" }) }),
8679
- /* @__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" }) })
8680
- ] }),
8681
- ISrEADY && /* @__PURE__ */ jsxRuntime.jsx(SalesChannelForm, { order: draft_order })
8682
- ] });
8683
- };
8684
- const SalesChannelForm = ({ order }) => {
8685
- const form = reactHookForm.useForm({
8686
- defaultValues: {
8687
- sales_channel_id: order.sales_channel_id || ""
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
+ });
8688
8793
  },
8689
- resolver: zod$1.zodResolver(schema$2)
8794
+ getOptions: (data) => {
8795
+ return data.promotions.map((promotion) => ({
8796
+ label: promotion.code,
8797
+ value: promotion.code
8798
+ }));
8799
+ }
8690
8800
  });
8691
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
8692
- const { handleSuccess } = useRouteModal();
8693
- const onSubmit = form.handleSubmit(async (data) => {
8694
- await mutateAsync(
8801
+ const add = async (value) => {
8802
+ if (!value) {
8803
+ return;
8804
+ }
8805
+ addPromotions(
8695
8806
  {
8696
- sales_channel_id: data.sales_channel_id
8807
+ promo_codes: [value]
8697
8808
  },
8698
8809
  {
8699
- onSuccess: () => {
8700
- ui.toast.success("Sales channel updated");
8701
- handleSuccess();
8810
+ onError: (e) => {
8811
+ ui.toast.error(e.message);
8812
+ comboboxData.onSearchValueChange("");
8813
+ setComboboxValue("");
8702
8814
  },
8703
- onError: (error) => {
8704
- ui.toast.error(error.message);
8815
+ onSuccess: () => {
8816
+ comboboxData.onSearchValueChange("");
8817
+ setComboboxValue("");
8705
8818
  }
8706
8819
  }
8707
8820
  );
8708
- });
8709
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8710
- KeyboundForm,
8711
- {
8712
- className: "flex flex-1 flex-col overflow-hidden",
8713
- onSubmit,
8714
- children: [
8715
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(SalesChannelField, { control: form.control, order }) }),
8716
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
8717
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
8718
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
8719
- ] }) })
8720
- ]
8721
- }
8722
- ) });
8723
- };
8724
- const SalesChannelField = ({ control, order }) => {
8725
- const salesChannels = useComboboxData({
8726
- queryFn: async (params) => {
8727
- return await sdk.admin.salesChannel.list(params);
8728
- },
8729
- queryKey: ["sales-channels"],
8730
- getOptions: (data) => {
8731
- return data.sales_channels.map((salesChannel) => ({
8732
- label: salesChannel.name,
8733
- value: salesChannel.id
8734
- }));
8735
- },
8736
- defaultValue: order.sales_channel_id || void 0
8737
- });
8738
- return /* @__PURE__ */ jsxRuntime.jsx(
8739
- Form$2.Field,
8740
- {
8741
- control,
8742
- name: "sales_channel_id",
8743
- render: ({ field }) => {
8744
- return /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8745
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Sales Channel" }),
8746
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(
8747
- Combobox,
8748
- {
8749
- options: salesChannels.options,
8750
- fetchNextPage: salesChannels.fetchNextPage,
8751
- isFetchingNextPage: salesChannels.isFetchingNextPage,
8752
- searchValue: salesChannels.searchValue,
8753
- onSearchValueChange: salesChannels.onSearchValueChange,
8754
- placeholder: "Select sales channel",
8755
- ...field
8756
- }
8757
- ) }),
8758
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8759
- ] });
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;
8760
8833
  }
8834
+ });
8835
+ if (!requestSucceeded) {
8836
+ setIsSubmitting(false);
8837
+ return;
8761
8838
  }
8762
- );
8763
- };
8764
- const schema$2 = zod.z.object({
8765
- sales_channel_id: zod.z.string().min(1)
8766
- });
8767
- const ShippingAddress = () => {
8768
- const { id } = reactRouterDom.useParams();
8769
- const { order, isPending, isError, error } = useOrder(id, {
8770
- fields: "+shipping_address"
8771
- });
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
+ };
8772
8851
  if (isError) {
8773
8852
  throw error;
8774
8853
  }
8775
- const isReady = !isPending && !!order;
8776
- return /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer, { children: [
8777
- /* @__PURE__ */ jsxRuntime.jsxs(RouteDrawer.Header, { children: [
8778
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Shipping Address" }) }),
8779
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
8780
- ] }),
8781
- isReady && /* @__PURE__ */ jsxRuntime.jsx(ShippingAddressForm, { order })
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"
8897
+ }
8898
+ )
8899
+ ] }) })
8782
8900
  ] });
8783
8901
  };
8784
- const ShippingAddressForm = ({ order }) => {
8785
- const form = reactHookForm.useForm({
8786
- defaultValues: {
8787
- first_name: order.shipping_address?.first_name ?? "",
8788
- last_name: order.shipping_address?.last_name ?? "",
8789
- company: order.shipping_address?.company ?? "",
8790
- address_1: order.shipping_address?.address_1 ?? "",
8791
- address_2: order.shipping_address?.address_2 ?? "",
8792
- city: order.shipping_address?.city ?? "",
8793
- province: order.shipping_address?.province ?? "",
8794
- country_code: order.shipping_address?.country_code ?? "",
8795
- postal_code: order.shipping_address?.postal_code ?? "",
8796
- phone: order.shipping_address?.phone ?? ""
8797
- },
8798
- resolver: zod$1.zodResolver(schema$1)
8799
- });
8800
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
8801
- const { handleSuccess } = useRouteModal();
8802
- const onSubmit = form.handleSubmit(async (data) => {
8803
- await mutateAsync(
8804
- {
8805
- shipping_address: {
8806
- first_name: data.first_name,
8807
- last_name: data.last_name,
8808
- company: data.company,
8809
- address_1: data.address_1,
8810
- address_2: data.address_2,
8811
- city: data.city,
8812
- province: data.province,
8813
- country_code: data.country_code,
8814
- postal_code: data.postal_code,
8815
- phone: data.phone
8816
- }
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]
8817
8912
  },
8818
8913
  {
8819
- onSuccess: () => {
8820
- handleSuccess();
8821
- },
8822
- onError: (error) => {
8823
- ui.toast.error(error.message);
8914
+ onError: (e) => {
8915
+ ui.toast.error(e.message);
8824
8916
  }
8825
8917
  }
8826
8918
  );
8827
- });
8828
- return /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(
8829
- KeyboundForm,
8919
+ };
8920
+ const displayValue = getDisplayValue(promotion);
8921
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8922
+ "div",
8830
8923
  {
8831
- className: "flex flex-1 flex-col overflow-hidden",
8832
- 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
+ ),
8833
8930
  children: [
8834
- /* @__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: [
8835
- /* @__PURE__ */ jsxRuntime.jsx(
8836
- Form$2.Field,
8837
- {
8838
- control: form.control,
8839
- name: "country_code",
8840
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8841
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Country" }),
8842
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, { ...field }) }),
8843
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8844
- ] })
8845
- }
8846
- ),
8847
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8848
- /* @__PURE__ */ jsxRuntime.jsx(
8849
- Form$2.Field,
8850
- {
8851
- control: form.control,
8852
- name: "first_name",
8853
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8854
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "First name" }),
8855
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8856
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8857
- ] })
8858
- }
8859
- ),
8860
- /* @__PURE__ */ jsxRuntime.jsx(
8861
- Form$2.Field,
8862
- {
8863
- control: form.control,
8864
- name: "last_name",
8865
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8866
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Last name" }),
8867
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8868
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8869
- ] })
8870
- }
8871
- )
8872
- ] }),
8873
- /* @__PURE__ */ jsxRuntime.jsx(
8874
- Form$2.Field,
8875
- {
8876
- control: form.control,
8877
- name: "company",
8878
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8879
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Company" }),
8880
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8881
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8882
- ] })
8883
- }
8884
- ),
8885
- /* @__PURE__ */ jsxRuntime.jsx(
8886
- Form$2.Field,
8887
- {
8888
- control: form.control,
8889
- name: "address_1",
8890
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8891
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Address" }),
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: "address_2",
8902
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8903
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
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
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
8910
- /* @__PURE__ */ jsxRuntime.jsx(
8911
- Form$2.Field,
8912
- {
8913
- control: form.control,
8914
- name: "postal_code",
8915
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8916
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "Postal code" }),
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: "city",
8927
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8928
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { children: "City" }),
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
- ] }),
8935
- /* @__PURE__ */ jsxRuntime.jsx(
8936
- Form$2.Field,
8937
- {
8938
- control: form.control,
8939
- name: "province",
8940
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8941
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Province / State" }),
8942
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { ...field }) }),
8943
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.ErrorMessage, {})
8944
- ] })
8945
- }
8946
- ),
8947
- /* @__PURE__ */ jsxRuntime.jsx(
8948
- Form$2.Field,
8949
- {
8950
- control: form.control,
8951
- name: "phone",
8952
- render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(Form$2.Item, { children: [
8953
- /* @__PURE__ */ jsxRuntime.jsx(Form$2.Label, { optional: true, children: "Phone" }),
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
- ] }) }),
8960
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
8961
- /* @__PURE__ */ jsxRuntime.jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
8962
- /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
8963
- ] }) })
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
+ )
8964
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;
8965
8966
  }
8966
- ) });
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);
8967
8983
  };
8968
- 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
+ }
8969
9006
  const TransferOwnership = () => {
8970
9007
  const { id } = reactRouterDom.useParams();
8971
9008
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -9465,10 +9502,6 @@ const routeModule = {
9465
9502
  Component: CustomItems,
9466
9503
  path: "/draft-orders/:id/custom-items"
9467
9504
  },
9468
- {
9469
- Component: BillingAddress,
9470
- path: "/draft-orders/:id/billing-address"
9471
- },
9472
9505
  {
9473
9506
  Component: Email,
9474
9507
  path: "/draft-orders/:id/email"
@@ -9478,16 +9511,12 @@ const routeModule = {
9478
9511
  path: "/draft-orders/:id/items"
9479
9512
  },
9480
9513
  {
9481
- Component: Metadata,
9482
- path: "/draft-orders/:id/metadata"
9483
- },
9484
- {
9485
- Component: Promotions,
9486
- path: "/draft-orders/:id/promotions"
9514
+ Component: BillingAddress,
9515
+ path: "/draft-orders/:id/billing-address"
9487
9516
  },
9488
9517
  {
9489
- Component: Shipping,
9490
- path: "/draft-orders/:id/shipping"
9518
+ Component: Metadata,
9519
+ path: "/draft-orders/:id/metadata"
9491
9520
  },
9492
9521
  {
9493
9522
  Component: SalesChannel,
@@ -9497,6 +9526,14 @@ const routeModule = {
9497
9526
  Component: ShippingAddress,
9498
9527
  path: "/draft-orders/:id/shipping-address"
9499
9528
  },
9529
+ {
9530
+ Component: Shipping,
9531
+ path: "/draft-orders/:id/shipping"
9532
+ },
9533
+ {
9534
+ Component: Promotions,
9535
+ path: "/draft-orders/:id/promotions"
9536
+ },
9500
9537
  {
9501
9538
  Component: TransferOwnership,
9502
9539
  path: "/draft-orders/:id/transfer-ownership"