@medusajs/draft-order 2.10.4-preview-20251005090149 → 2.10.4-preview-20251005120155

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.
@@ -9567,196 +9567,6 @@ const ID = () => {
9567
9567
  /* @__PURE__ */ jsx(Outlet, {})
9568
9568
  ] });
9569
9569
  };
9570
- const BillingAddress = () => {
9571
- const { id } = useParams();
9572
- const { order, isPending, isError, error } = useOrder(id, {
9573
- fields: "+billing_address"
9574
- });
9575
- if (isError) {
9576
- throw error;
9577
- }
9578
- const isReady = !isPending && !!order;
9579
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9580
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9581
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
9582
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9583
- ] }),
9584
- isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
9585
- ] });
9586
- };
9587
- const BillingAddressForm = ({ order }) => {
9588
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9589
- const form = useForm({
9590
- defaultValues: {
9591
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9592
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9593
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9594
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9595
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9596
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9597
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9598
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9599
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9600
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9601
- },
9602
- resolver: zodResolver(schema$5)
9603
- });
9604
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9605
- const { handleSuccess } = useRouteModal();
9606
- const onSubmit = form.handleSubmit(async (data) => {
9607
- await mutateAsync(
9608
- { billing_address: data },
9609
- {
9610
- onSuccess: () => {
9611
- handleSuccess();
9612
- },
9613
- onError: (error) => {
9614
- toast.error(error.message);
9615
- }
9616
- }
9617
- );
9618
- });
9619
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9620
- KeyboundForm,
9621
- {
9622
- className: "flex flex-1 flex-col overflow-hidden",
9623
- onSubmit,
9624
- children: [
9625
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
9626
- /* @__PURE__ */ jsx(
9627
- Form$2.Field,
9628
- {
9629
- control: form.control,
9630
- name: "country_code",
9631
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9632
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
9633
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
9634
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9635
- ] })
9636
- }
9637
- ),
9638
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9639
- /* @__PURE__ */ jsx(
9640
- Form$2.Field,
9641
- {
9642
- control: form.control,
9643
- name: "first_name",
9644
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9645
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
9646
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9647
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9648
- ] })
9649
- }
9650
- ),
9651
- /* @__PURE__ */ jsx(
9652
- Form$2.Field,
9653
- {
9654
- control: form.control,
9655
- name: "last_name",
9656
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9657
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
9658
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9659
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9660
- ] })
9661
- }
9662
- )
9663
- ] }),
9664
- /* @__PURE__ */ jsx(
9665
- Form$2.Field,
9666
- {
9667
- control: form.control,
9668
- name: "company",
9669
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9670
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
9671
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9672
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9673
- ] })
9674
- }
9675
- ),
9676
- /* @__PURE__ */ jsx(
9677
- Form$2.Field,
9678
- {
9679
- control: form.control,
9680
- name: "address_1",
9681
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9682
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
9683
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9684
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9685
- ] })
9686
- }
9687
- ),
9688
- /* @__PURE__ */ jsx(
9689
- Form$2.Field,
9690
- {
9691
- control: form.control,
9692
- name: "address_2",
9693
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9694
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9695
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9696
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9697
- ] })
9698
- }
9699
- ),
9700
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9701
- /* @__PURE__ */ jsx(
9702
- Form$2.Field,
9703
- {
9704
- control: form.control,
9705
- name: "postal_code",
9706
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9707
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
9708
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9709
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9710
- ] })
9711
- }
9712
- ),
9713
- /* @__PURE__ */ jsx(
9714
- Form$2.Field,
9715
- {
9716
- control: form.control,
9717
- name: "city",
9718
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9719
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
9720
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9721
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9722
- ] })
9723
- }
9724
- )
9725
- ] }),
9726
- /* @__PURE__ */ jsx(
9727
- Form$2.Field,
9728
- {
9729
- control: form.control,
9730
- name: "province",
9731
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9732
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9733
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9734
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9735
- ] })
9736
- }
9737
- ),
9738
- /* @__PURE__ */ jsx(
9739
- Form$2.Field,
9740
- {
9741
- control: form.control,
9742
- name: "phone",
9743
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9744
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
9745
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9746
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9747
- ] })
9748
- }
9749
- )
9750
- ] }) }),
9751
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9752
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9753
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9754
- ] }) })
9755
- ]
9756
- }
9757
- ) });
9758
- };
9759
- const schema$5 = addressSchema;
9760
9570
  const CustomItems = () => {
9761
9571
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9762
9572
  /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Custom Items" }) }) }),
@@ -9765,7 +9575,7 @@ const CustomItems = () => {
9765
9575
  };
9766
9576
  const CustomItemsForm = () => {
9767
9577
  const form = useForm({
9768
- resolver: zodResolver(schema$4)
9578
+ resolver: zodResolver(schema$5)
9769
9579
  });
9770
9580
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", children: [
9771
9581
  /* @__PURE__ */ jsx(RouteDrawer.Body, {}),
@@ -9775,7 +9585,7 @@ const CustomItemsForm = () => {
9775
9585
  ] }) })
9776
9586
  ] }) });
9777
9587
  };
9778
- const schema$4 = objectType({
9588
+ const schema$5 = objectType({
9779
9589
  email: stringType().email()
9780
9590
  });
9781
9591
  const Email = () => {
@@ -9800,7 +9610,7 @@ const EmailForm = ({ order }) => {
9800
9610
  defaultValues: {
9801
9611
  email: order.email ?? ""
9802
9612
  },
9803
- resolver: zodResolver(schema$3)
9613
+ resolver: zodResolver(schema$4)
9804
9614
  });
9805
9615
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9806
9616
  const { handleSuccess } = useRouteModal();
@@ -9843,7 +9653,7 @@ const EmailForm = ({ order }) => {
9843
9653
  }
9844
9654
  ) });
9845
9655
  };
9846
- const schema$3 = objectType({
9656
+ const schema$4 = objectType({
9847
9657
  email: stringType().email()
9848
9658
  });
9849
9659
  const NumberInput = forwardRef(
@@ -10820,67 +10630,417 @@ const customItemSchema = objectType({
10820
10630
  quantity: numberType(),
10821
10631
  unit_price: unionType([numberType(), stringType()])
10822
10632
  });
10823
- const PROMOTION_QUERY_KEY = "promotions";
10824
- const promotionsQueryKeys = {
10825
- list: (query2) => [
10826
- PROMOTION_QUERY_KEY,
10827
- query2 ? query2 : void 0
10828
- ],
10829
- detail: (id, query2) => [
10830
- PROMOTION_QUERY_KEY,
10831
- id,
10832
- query2 ? query2 : void 0
10833
- ]
10834
- };
10835
- const usePromotions = (query2, options) => {
10836
- const { data, ...rest } = useQuery({
10837
- queryKey: promotionsQueryKeys.list(query2),
10838
- queryFn: async () => sdk.admin.promotion.list(query2),
10839
- ...options
10840
- });
10841
- return { ...data, ...rest };
10842
- };
10843
- const Promotions = () => {
10844
- const { id } = useParams();
10845
- const {
10846
- order: preview,
10847
- isError: isPreviewError,
10848
- error: previewError
10849
- } = useOrderPreview(id, void 0);
10850
- useInitiateOrderEdit({ preview });
10851
- const { onCancel } = useCancelOrderEdit({ preview });
10852
- if (isPreviewError) {
10853
- throw previewError;
10854
- }
10855
- const isReady = !!preview;
10856
- return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
10857
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
10858
- isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
10859
- ] });
10860
- };
10861
- const PromotionForm = ({ preview }) => {
10862
- const { items, shipping_methods } = preview;
10863
- const [isSubmitting, setIsSubmitting] = useState(false);
10864
- const [comboboxValue, setComboboxValue] = useState("");
10865
- const { handleSuccess } = useRouteModal();
10866
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10867
- const promoIds = getPromotionIds(items, shipping_methods);
10868
- const { promotions, isPending, isError, error } = usePromotions(
10869
- {
10870
- id: promoIds
10871
- },
10872
- {
10873
- enabled: !!promoIds.length
10874
- }
10875
- );
10876
- const comboboxData = useComboboxData({
10877
- queryKey: ["promotions", "combobox", promoIds],
10878
- queryFn: async (params) => {
10879
- return await sdk.admin.promotion.list({
10880
- ...params,
10881
- id: {
10882
- $nin: promoIds
10883
- }
10633
+ const InlineTip = forwardRef(
10634
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
10635
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10636
+ return /* @__PURE__ */ jsxs(
10637
+ "div",
10638
+ {
10639
+ ref,
10640
+ className: clx(
10641
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10642
+ className
10643
+ ),
10644
+ ...props,
10645
+ children: [
10646
+ /* @__PURE__ */ jsx(
10647
+ "div",
10648
+ {
10649
+ role: "presentation",
10650
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10651
+ "bg-ui-tag-orange-icon": variant === "warning"
10652
+ })
10653
+ }
10654
+ ),
10655
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10656
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10657
+ labelValue,
10658
+ ":"
10659
+ ] }),
10660
+ " ",
10661
+ children
10662
+ ] })
10663
+ ]
10664
+ }
10665
+ );
10666
+ }
10667
+ );
10668
+ InlineTip.displayName = "InlineTip";
10669
+ const MetadataFieldSchema = objectType({
10670
+ key: stringType(),
10671
+ disabled: booleanType().optional(),
10672
+ value: anyType()
10673
+ });
10674
+ const MetadataSchema = objectType({
10675
+ metadata: arrayType(MetadataFieldSchema)
10676
+ });
10677
+ const Metadata = () => {
10678
+ const { id } = useParams();
10679
+ const { order, isPending, isError, error } = useOrder(id, {
10680
+ fields: "metadata"
10681
+ });
10682
+ if (isError) {
10683
+ throw error;
10684
+ }
10685
+ const isReady = !isPending && !!order;
10686
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10687
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10688
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10689
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10690
+ ] }),
10691
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10692
+ ] });
10693
+ };
10694
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10695
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10696
+ const MetadataForm = ({ orderId, metadata }) => {
10697
+ const { handleSuccess } = useRouteModal();
10698
+ const hasUneditableRows = getHasUneditableRows(metadata);
10699
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10700
+ const form = useForm({
10701
+ defaultValues: {
10702
+ metadata: getDefaultValues(metadata)
10703
+ },
10704
+ resolver: zodResolver(MetadataSchema)
10705
+ });
10706
+ const handleSubmit = form.handleSubmit(async (data) => {
10707
+ const parsedData = parseValues(data);
10708
+ await mutateAsync(
10709
+ {
10710
+ metadata: parsedData
10711
+ },
10712
+ {
10713
+ onSuccess: () => {
10714
+ toast.success("Metadata updated");
10715
+ handleSuccess();
10716
+ },
10717
+ onError: (error) => {
10718
+ toast.error(error.message);
10719
+ }
10720
+ }
10721
+ );
10722
+ });
10723
+ const { fields, insert, remove } = useFieldArray({
10724
+ control: form.control,
10725
+ name: "metadata"
10726
+ });
10727
+ function deleteRow(index) {
10728
+ remove(index);
10729
+ if (fields.length === 1) {
10730
+ insert(0, {
10731
+ key: "",
10732
+ value: "",
10733
+ disabled: false
10734
+ });
10735
+ }
10736
+ }
10737
+ function insertRow(index, position) {
10738
+ insert(index + (position === "above" ? 0 : 1), {
10739
+ key: "",
10740
+ value: "",
10741
+ disabled: false
10742
+ });
10743
+ }
10744
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10745
+ KeyboundForm,
10746
+ {
10747
+ onSubmit: handleSubmit,
10748
+ className: "flex flex-1 flex-col overflow-hidden",
10749
+ children: [
10750
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10751
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10752
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10753
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
10754
+ /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
10755
+ ] }),
10756
+ fields.map((field, index) => {
10757
+ const isDisabled = field.disabled || false;
10758
+ let placeholder = "-";
10759
+ if (typeof field.value === "object") {
10760
+ placeholder = "{ ... }";
10761
+ }
10762
+ if (Array.isArray(field.value)) {
10763
+ placeholder = "[ ... ]";
10764
+ }
10765
+ return /* @__PURE__ */ jsx(
10766
+ ConditionalTooltip,
10767
+ {
10768
+ showTooltip: isDisabled,
10769
+ content: "This row is disabled because it contains non-primitive data.",
10770
+ children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
10771
+ /* @__PURE__ */ jsxs(
10772
+ "div",
10773
+ {
10774
+ className: clx("grid grid-cols-2 divide-x", {
10775
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
10776
+ }),
10777
+ children: [
10778
+ /* @__PURE__ */ jsx(
10779
+ Form$2.Field,
10780
+ {
10781
+ control: form.control,
10782
+ name: `metadata.${index}.key`,
10783
+ render: ({ field: field2 }) => {
10784
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10785
+ GridInput,
10786
+ {
10787
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
10788
+ ...field2,
10789
+ disabled: isDisabled,
10790
+ placeholder: "Key"
10791
+ }
10792
+ ) }) });
10793
+ }
10794
+ }
10795
+ ),
10796
+ /* @__PURE__ */ jsx(
10797
+ Form$2.Field,
10798
+ {
10799
+ control: form.control,
10800
+ name: `metadata.${index}.value`,
10801
+ render: ({ field: { value, ...field2 } }) => {
10802
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10803
+ GridInput,
10804
+ {
10805
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
10806
+ ...field2,
10807
+ value: isDisabled ? placeholder : value,
10808
+ disabled: isDisabled,
10809
+ placeholder: "Value"
10810
+ }
10811
+ ) }) });
10812
+ }
10813
+ }
10814
+ )
10815
+ ]
10816
+ }
10817
+ ),
10818
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
10819
+ /* @__PURE__ */ jsx(
10820
+ DropdownMenu.Trigger,
10821
+ {
10822
+ className: clx(
10823
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
10824
+ {
10825
+ hidden: isDisabled
10826
+ }
10827
+ ),
10828
+ disabled: isDisabled,
10829
+ asChild: true,
10830
+ children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
10831
+ }
10832
+ ),
10833
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
10834
+ /* @__PURE__ */ jsxs(
10835
+ DropdownMenu.Item,
10836
+ {
10837
+ className: "gap-x-2",
10838
+ onClick: () => insertRow(index, "above"),
10839
+ children: [
10840
+ /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
10841
+ "Insert row above"
10842
+ ]
10843
+ }
10844
+ ),
10845
+ /* @__PURE__ */ jsxs(
10846
+ DropdownMenu.Item,
10847
+ {
10848
+ className: "gap-x-2",
10849
+ onClick: () => insertRow(index, "below"),
10850
+ children: [
10851
+ /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
10852
+ "Insert row below"
10853
+ ]
10854
+ }
10855
+ ),
10856
+ /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
10857
+ /* @__PURE__ */ jsxs(
10858
+ DropdownMenu.Item,
10859
+ {
10860
+ className: "gap-x-2",
10861
+ onClick: () => deleteRow(index),
10862
+ children: [
10863
+ /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
10864
+ "Delete row"
10865
+ ]
10866
+ }
10867
+ )
10868
+ ] })
10869
+ ] })
10870
+ ] })
10871
+ },
10872
+ field.id
10873
+ );
10874
+ })
10875
+ ] }),
10876
+ hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
10877
+ ] }),
10878
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10879
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10880
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10881
+ ] }) })
10882
+ ]
10883
+ }
10884
+ ) });
10885
+ };
10886
+ const GridInput = forwardRef(({ className, ...props }, ref) => {
10887
+ return /* @__PURE__ */ jsx(
10888
+ "input",
10889
+ {
10890
+ ref,
10891
+ ...props,
10892
+ autoComplete: "off",
10893
+ className: clx(
10894
+ "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",
10895
+ className
10896
+ )
10897
+ }
10898
+ );
10899
+ });
10900
+ GridInput.displayName = "MetadataForm.GridInput";
10901
+ const PlaceholderInner = () => {
10902
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
10903
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
10904
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10905
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
10906
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
10907
+ ] }) })
10908
+ ] });
10909
+ };
10910
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
10911
+ function getDefaultValues(metadata) {
10912
+ if (!metadata || !Object.keys(metadata).length) {
10913
+ return [
10914
+ {
10915
+ key: "",
10916
+ value: "",
10917
+ disabled: false
10918
+ }
10919
+ ];
10920
+ }
10921
+ return Object.entries(metadata).map(([key, value]) => {
10922
+ if (!EDITABLE_TYPES.includes(typeof value)) {
10923
+ return {
10924
+ key,
10925
+ value,
10926
+ disabled: true
10927
+ };
10928
+ }
10929
+ let stringValue = value;
10930
+ if (typeof value !== "string") {
10931
+ stringValue = JSON.stringify(value);
10932
+ }
10933
+ return {
10934
+ key,
10935
+ value: stringValue,
10936
+ original_key: key
10937
+ };
10938
+ });
10939
+ }
10940
+ function parseValues(values) {
10941
+ const metadata = values.metadata;
10942
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
10943
+ if (isEmpty) {
10944
+ return null;
10945
+ }
10946
+ const update = {};
10947
+ metadata.forEach((field) => {
10948
+ let key = field.key;
10949
+ let value = field.value;
10950
+ const disabled = field.disabled;
10951
+ if (!key || !value) {
10952
+ return;
10953
+ }
10954
+ if (disabled) {
10955
+ update[key] = value;
10956
+ return;
10957
+ }
10958
+ key = key.trim();
10959
+ value = value.trim();
10960
+ if (value === "true") {
10961
+ update[key] = true;
10962
+ } else if (value === "false") {
10963
+ update[key] = false;
10964
+ } else {
10965
+ const parsedNumber = parseFloat(value);
10966
+ if (!isNaN(parsedNumber)) {
10967
+ update[key] = parsedNumber;
10968
+ } else {
10969
+ update[key] = value;
10970
+ }
10971
+ }
10972
+ });
10973
+ return update;
10974
+ }
10975
+ function getHasUneditableRows(metadata) {
10976
+ if (!metadata) {
10977
+ return false;
10978
+ }
10979
+ return Object.values(metadata).some(
10980
+ (value) => !EDITABLE_TYPES.includes(typeof value)
10981
+ );
10982
+ }
10983
+ const PROMOTION_QUERY_KEY = "promotions";
10984
+ const promotionsQueryKeys = {
10985
+ list: (query2) => [
10986
+ PROMOTION_QUERY_KEY,
10987
+ query2 ? query2 : void 0
10988
+ ],
10989
+ detail: (id, query2) => [
10990
+ PROMOTION_QUERY_KEY,
10991
+ id,
10992
+ query2 ? query2 : void 0
10993
+ ]
10994
+ };
10995
+ const usePromotions = (query2, options) => {
10996
+ const { data, ...rest } = useQuery({
10997
+ queryKey: promotionsQueryKeys.list(query2),
10998
+ queryFn: async () => sdk.admin.promotion.list(query2),
10999
+ ...options
11000
+ });
11001
+ return { ...data, ...rest };
11002
+ };
11003
+ const Promotions = () => {
11004
+ const { id } = useParams();
11005
+ const {
11006
+ order: preview,
11007
+ isError: isPreviewError,
11008
+ error: previewError
11009
+ } = useOrderPreview(id, void 0);
11010
+ useInitiateOrderEdit({ preview });
11011
+ const { onCancel } = useCancelOrderEdit({ preview });
11012
+ if (isPreviewError) {
11013
+ throw previewError;
11014
+ }
11015
+ const isReady = !!preview;
11016
+ return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
11017
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
11018
+ isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
11019
+ ] });
11020
+ };
11021
+ const PromotionForm = ({ preview }) => {
11022
+ const { items, shipping_methods } = preview;
11023
+ const [isSubmitting, setIsSubmitting] = useState(false);
11024
+ const [comboboxValue, setComboboxValue] = useState("");
11025
+ const { handleSuccess } = useRouteModal();
11026
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11027
+ const promoIds = getPromotionIds(items, shipping_methods);
11028
+ const { promotions, isPending, isError, error } = usePromotions(
11029
+ {
11030
+ id: promoIds
11031
+ },
11032
+ {
11033
+ enabled: !!promoIds.length
11034
+ }
11035
+ );
11036
+ const comboboxData = useComboboxData({
11037
+ queryKey: ["promotions", "combobox", promoIds],
11038
+ queryFn: async (params) => {
11039
+ return await sdk.admin.promotion.list({
11040
+ ...params,
11041
+ id: {
11042
+ $nin: promoIds
11043
+ }
10884
11044
  });
10885
11045
  },
10886
11046
  getOptions: (data) => {
@@ -11097,112 +11257,6 @@ function getPromotionIds(items, shippingMethods) {
11097
11257
  }
11098
11258
  return Array.from(promotionIds);
11099
11259
  }
11100
- const SalesChannel = () => {
11101
- const { id } = useParams();
11102
- const { draft_order, isPending, isError, error } = useDraftOrder(
11103
- id,
11104
- {
11105
- fields: "+sales_channel_id"
11106
- },
11107
- {
11108
- enabled: !!id
11109
- }
11110
- );
11111
- if (isError) {
11112
- throw error;
11113
- }
11114
- const ISrEADY = !!draft_order && !isPending;
11115
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11116
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11117
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11118
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11119
- ] }),
11120
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11121
- ] });
11122
- };
11123
- const SalesChannelForm = ({ order }) => {
11124
- const form = useForm({
11125
- defaultValues: {
11126
- sales_channel_id: order.sales_channel_id || ""
11127
- },
11128
- resolver: zodResolver(schema$2)
11129
- });
11130
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11131
- const { handleSuccess } = useRouteModal();
11132
- const onSubmit = form.handleSubmit(async (data) => {
11133
- await mutateAsync(
11134
- {
11135
- sales_channel_id: data.sales_channel_id
11136
- },
11137
- {
11138
- onSuccess: () => {
11139
- toast.success("Sales channel updated");
11140
- handleSuccess();
11141
- },
11142
- onError: (error) => {
11143
- toast.error(error.message);
11144
- }
11145
- }
11146
- );
11147
- });
11148
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11149
- KeyboundForm,
11150
- {
11151
- className: "flex flex-1 flex-col overflow-hidden",
11152
- onSubmit,
11153
- children: [
11154
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11155
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11156
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11157
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11158
- ] }) })
11159
- ]
11160
- }
11161
- ) });
11162
- };
11163
- const SalesChannelField = ({ control, order }) => {
11164
- const salesChannels = useComboboxData({
11165
- queryFn: async (params) => {
11166
- return await sdk.admin.salesChannel.list(params);
11167
- },
11168
- queryKey: ["sales-channels"],
11169
- getOptions: (data) => {
11170
- return data.sales_channels.map((salesChannel) => ({
11171
- label: salesChannel.name,
11172
- value: salesChannel.id
11173
- }));
11174
- },
11175
- defaultValue: order.sales_channel_id || void 0
11176
- });
11177
- return /* @__PURE__ */ jsx(
11178
- Form$2.Field,
11179
- {
11180
- control,
11181
- name: "sales_channel_id",
11182
- render: ({ field }) => {
11183
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11184
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11185
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11186
- Combobox,
11187
- {
11188
- options: salesChannels.options,
11189
- fetchNextPage: salesChannels.fetchNextPage,
11190
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11191
- searchValue: salesChannels.searchValue,
11192
- onSearchValueChange: salesChannels.onSearchValueChange,
11193
- placeholder: "Select sales channel",
11194
- ...field
11195
- }
11196
- ) }),
11197
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11198
- ] });
11199
- }
11200
- }
11201
- );
11202
- };
11203
- const schema$2 = objectType({
11204
- sales_channel_id: stringType().min(1)
11205
- });
11206
11260
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11207
11261
  const Shipping = () => {
11208
11262
  var _a;
@@ -12042,7 +12096,7 @@ const ShippingAddressForm = ({ order }) => {
12042
12096
  postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12043
12097
  phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12044
12098
  },
12045
- resolver: zodResolver(schema$1)
12099
+ resolver: zodResolver(schema$3)
12046
12100
  });
12047
12101
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12048
12102
  const { handleSuccess } = useRouteModal();
@@ -12212,7 +12266,7 @@ const ShippingAddressForm = ({ order }) => {
12212
12266
  }
12213
12267
  ) });
12214
12268
  };
12215
- const schema$1 = addressSchema;
12269
+ const schema$3 = addressSchema;
12216
12270
  const TransferOwnership = () => {
12217
12271
  const { id } = useParams();
12218
12272
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12236,7 +12290,7 @@ const TransferOwnershipForm = ({ order }) => {
12236
12290
  defaultValues: {
12237
12291
  customer_id: order.customer_id || ""
12238
12292
  },
12239
- resolver: zodResolver(schema)
12293
+ resolver: zodResolver(schema$2)
12240
12294
  });
12241
12295
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12242
12296
  const { handleSuccess } = useRouteModal();
@@ -12686,57 +12740,13 @@ const Illustration = () => {
12686
12740
  }
12687
12741
  );
12688
12742
  };
12689
- const schema = objectType({
12743
+ const schema$2 = objectType({
12690
12744
  customer_id: stringType().min(1)
12691
12745
  });
12692
- const InlineTip = forwardRef(
12693
- ({ variant = "tip", label, className, children, ...props }, ref) => {
12694
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
12695
- return /* @__PURE__ */ jsxs(
12696
- "div",
12697
- {
12698
- ref,
12699
- className: clx(
12700
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
12701
- className
12702
- ),
12703
- ...props,
12704
- children: [
12705
- /* @__PURE__ */ jsx(
12706
- "div",
12707
- {
12708
- role: "presentation",
12709
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
12710
- "bg-ui-tag-orange-icon": variant === "warning"
12711
- })
12712
- }
12713
- ),
12714
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
12715
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
12716
- labelValue,
12717
- ":"
12718
- ] }),
12719
- " ",
12720
- children
12721
- ] })
12722
- ]
12723
- }
12724
- );
12725
- }
12726
- );
12727
- InlineTip.displayName = "InlineTip";
12728
- const MetadataFieldSchema = objectType({
12729
- key: stringType(),
12730
- disabled: booleanType().optional(),
12731
- value: anyType()
12732
- });
12733
- const MetadataSchema = objectType({
12734
- metadata: arrayType(MetadataFieldSchema)
12735
- });
12736
- const Metadata = () => {
12746
+ const BillingAddress = () => {
12737
12747
  const { id } = useParams();
12738
12748
  const { order, isPending, isError, error } = useOrder(id, {
12739
- fields: "metadata"
12749
+ fields: "+billing_address"
12740
12750
  });
12741
12751
  if (isError) {
12742
12752
  throw error;
@@ -12744,33 +12754,36 @@ const Metadata = () => {
12744
12754
  const isReady = !isPending && !!order;
12745
12755
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12746
12756
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12747
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
12748
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
12757
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
12758
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12749
12759
  ] }),
12750
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
12760
+ isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
12751
12761
  ] });
12752
12762
  };
12753
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
12754
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
12755
- const MetadataForm = ({ orderId, metadata }) => {
12756
- const { handleSuccess } = useRouteModal();
12757
- const hasUneditableRows = getHasUneditableRows(metadata);
12758
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
12763
+ const BillingAddressForm = ({ order }) => {
12764
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12759
12765
  const form = useForm({
12760
12766
  defaultValues: {
12761
- metadata: getDefaultValues(metadata)
12767
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12768
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12769
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12770
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12771
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12772
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12773
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12774
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12775
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12776
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12762
12777
  },
12763
- resolver: zodResolver(MetadataSchema)
12778
+ resolver: zodResolver(schema$1)
12764
12779
  });
12765
- const handleSubmit = form.handleSubmit(async (data) => {
12766
- const parsedData = parseValues(data);
12780
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12781
+ const { handleSuccess } = useRouteModal();
12782
+ const onSubmit = form.handleSubmit(async (data) => {
12767
12783
  await mutateAsync(
12768
- {
12769
- metadata: parsedData
12770
- },
12784
+ { billing_address: data },
12771
12785
  {
12772
12786
  onSuccess: () => {
12773
- toast.success("Metadata updated");
12774
12787
  handleSuccess();
12775
12788
  },
12776
12789
  onError: (error) => {
@@ -12779,266 +12792,253 @@ const MetadataForm = ({ orderId, metadata }) => {
12779
12792
  }
12780
12793
  );
12781
12794
  });
12782
- const { fields, insert, remove } = useFieldArray({
12783
- control: form.control,
12784
- name: "metadata"
12785
- });
12786
- function deleteRow(index) {
12787
- remove(index);
12788
- if (fields.length === 1) {
12789
- insert(0, {
12790
- key: "",
12791
- value: "",
12792
- disabled: false
12793
- });
12794
- }
12795
- }
12796
- function insertRow(index, position) {
12797
- insert(index + (position === "above" ? 0 : 1), {
12798
- key: "",
12799
- value: "",
12800
- disabled: false
12801
- });
12802
- }
12803
12795
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12804
12796
  KeyboundForm,
12805
12797
  {
12806
- onSubmit: handleSubmit,
12807
12798
  className: "flex flex-1 flex-col overflow-hidden",
12799
+ onSubmit,
12808
12800
  children: [
12809
- /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
12810
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
12811
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
12812
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_KEY_LABEL_ID, children: "Key" }) }),
12813
- /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus text-ui-fg-subtle px-2 py-1.5", children: /* @__PURE__ */ jsx("label", { id: METADATA_VALUE_LABEL_ID, children: "Value" }) })
12814
- ] }),
12815
- fields.map((field, index) => {
12816
- const isDisabled = field.disabled || false;
12817
- let placeholder = "-";
12818
- if (typeof field.value === "object") {
12819
- placeholder = "{ ... }";
12801
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
12802
+ /* @__PURE__ */ jsx(
12803
+ Form$2.Field,
12804
+ {
12805
+ control: form.control,
12806
+ name: "country_code",
12807
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12808
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12809
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12810
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12811
+ ] })
12812
+ }
12813
+ ),
12814
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12815
+ /* @__PURE__ */ jsx(
12816
+ Form$2.Field,
12817
+ {
12818
+ control: form.control,
12819
+ name: "first_name",
12820
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12821
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12822
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12823
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12824
+ ] })
12820
12825
  }
12821
- if (Array.isArray(field.value)) {
12822
- placeholder = "[ ... ]";
12826
+ ),
12827
+ /* @__PURE__ */ jsx(
12828
+ Form$2.Field,
12829
+ {
12830
+ control: form.control,
12831
+ name: "last_name",
12832
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12833
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12834
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12835
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12836
+ ] })
12823
12837
  }
12824
- return /* @__PURE__ */ jsx(
12825
- ConditionalTooltip,
12826
- {
12827
- showTooltip: isDisabled,
12828
- content: "This row is disabled because it contains non-primitive data.",
12829
- children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
12830
- /* @__PURE__ */ jsxs(
12831
- "div",
12832
- {
12833
- className: clx("grid grid-cols-2 divide-x", {
12834
- "overflow-hidden rounded-b-lg": index === fields.length - 1
12835
- }),
12836
- children: [
12837
- /* @__PURE__ */ jsx(
12838
- Form$2.Field,
12839
- {
12840
- control: form.control,
12841
- name: `metadata.${index}.key`,
12842
- render: ({ field: field2 }) => {
12843
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12844
- GridInput,
12845
- {
12846
- "aria-labelledby": METADATA_KEY_LABEL_ID,
12847
- ...field2,
12848
- disabled: isDisabled,
12849
- placeholder: "Key"
12850
- }
12851
- ) }) });
12852
- }
12853
- }
12854
- ),
12855
- /* @__PURE__ */ jsx(
12856
- Form$2.Field,
12857
- {
12858
- control: form.control,
12859
- name: `metadata.${index}.value`,
12860
- render: ({ field: { value, ...field2 } }) => {
12861
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12862
- GridInput,
12863
- {
12864
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
12865
- ...field2,
12866
- value: isDisabled ? placeholder : value,
12867
- disabled: isDisabled,
12868
- placeholder: "Value"
12869
- }
12870
- ) }) });
12871
- }
12872
- }
12873
- )
12874
- ]
12875
- }
12876
- ),
12877
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
12878
- /* @__PURE__ */ jsx(
12879
- DropdownMenu.Trigger,
12880
- {
12881
- className: clx(
12882
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
12883
- {
12884
- hidden: isDisabled
12885
- }
12886
- ),
12887
- disabled: isDisabled,
12888
- asChild: true,
12889
- children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
12890
- }
12891
- ),
12892
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
12893
- /* @__PURE__ */ jsxs(
12894
- DropdownMenu.Item,
12895
- {
12896
- className: "gap-x-2",
12897
- onClick: () => insertRow(index, "above"),
12898
- children: [
12899
- /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
12900
- "Insert row above"
12901
- ]
12902
- }
12903
- ),
12904
- /* @__PURE__ */ jsxs(
12905
- DropdownMenu.Item,
12906
- {
12907
- className: "gap-x-2",
12908
- onClick: () => insertRow(index, "below"),
12909
- children: [
12910
- /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
12911
- "Insert row below"
12912
- ]
12913
- }
12914
- ),
12915
- /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
12916
- /* @__PURE__ */ jsxs(
12917
- DropdownMenu.Item,
12918
- {
12919
- className: "gap-x-2",
12920
- onClick: () => deleteRow(index),
12921
- children: [
12922
- /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
12923
- "Delete row"
12924
- ]
12925
- }
12926
- )
12927
- ] })
12928
- ] })
12929
- ] })
12930
- },
12931
- field.id
12932
- );
12933
- })
12838
+ )
12839
+ ] }),
12840
+ /* @__PURE__ */ jsx(
12841
+ Form$2.Field,
12842
+ {
12843
+ control: form.control,
12844
+ name: "company",
12845
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12846
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12847
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12848
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12849
+ ] })
12850
+ }
12851
+ ),
12852
+ /* @__PURE__ */ jsx(
12853
+ Form$2.Field,
12854
+ {
12855
+ control: form.control,
12856
+ name: "address_1",
12857
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12858
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12859
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12860
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12861
+ ] })
12862
+ }
12863
+ ),
12864
+ /* @__PURE__ */ jsx(
12865
+ Form$2.Field,
12866
+ {
12867
+ control: form.control,
12868
+ name: "address_2",
12869
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12870
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12871
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12872
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12873
+ ] })
12874
+ }
12875
+ ),
12876
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12877
+ /* @__PURE__ */ jsx(
12878
+ Form$2.Field,
12879
+ {
12880
+ control: form.control,
12881
+ name: "postal_code",
12882
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12883
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12884
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12885
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12886
+ ] })
12887
+ }
12888
+ ),
12889
+ /* @__PURE__ */ jsx(
12890
+ Form$2.Field,
12891
+ {
12892
+ control: form.control,
12893
+ name: "city",
12894
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12895
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12896
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12897
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12898
+ ] })
12899
+ }
12900
+ )
12934
12901
  ] }),
12935
- hasUneditableRows && /* @__PURE__ */ jsx(InlineTip, { variant: "warning", label: "Some rows are disabled", children: "This object contains non-primitive metadata, such as arrays or objects, that can't be edited here. To edit the disabled rows, use the API directly." })
12936
- ] }),
12937
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12938
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
12902
+ /* @__PURE__ */ jsx(
12903
+ Form$2.Field,
12904
+ {
12905
+ control: form.control,
12906
+ name: "province",
12907
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12908
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12909
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12910
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12911
+ ] })
12912
+ }
12913
+ ),
12914
+ /* @__PURE__ */ jsx(
12915
+ Form$2.Field,
12916
+ {
12917
+ control: form.control,
12918
+ name: "phone",
12919
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12920
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12921
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12922
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12923
+ ] })
12924
+ }
12925
+ )
12926
+ ] }) }),
12927
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12928
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12939
12929
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12940
12930
  ] }) })
12941
12931
  ]
12942
12932
  }
12943
12933
  ) });
12944
12934
  };
12945
- const GridInput = forwardRef(({ className, ...props }, ref) => {
12946
- return /* @__PURE__ */ jsx(
12947
- "input",
12935
+ const schema$1 = addressSchema;
12936
+ const SalesChannel = () => {
12937
+ const { id } = useParams();
12938
+ const { draft_order, isPending, isError, error } = useDraftOrder(
12939
+ id,
12948
12940
  {
12949
- ref,
12950
- ...props,
12951
- autoComplete: "off",
12952
- className: clx(
12953
- "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",
12954
- className
12955
- )
12941
+ fields: "+sales_channel_id"
12942
+ },
12943
+ {
12944
+ enabled: !!id
12956
12945
  }
12957
12946
  );
12958
- });
12959
- GridInput.displayName = "MetadataForm.GridInput";
12960
- const PlaceholderInner = () => {
12961
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
12962
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
12963
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12964
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
12965
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
12966
- ] }) })
12947
+ if (isError) {
12948
+ throw error;
12949
+ }
12950
+ const ISrEADY = !!draft_order && !isPending;
12951
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12952
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12953
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
12954
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
12955
+ ] }),
12956
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
12967
12957
  ] });
12968
12958
  };
12969
- const EDITABLE_TYPES = ["string", "number", "boolean"];
12970
- function getDefaultValues(metadata) {
12971
- if (!metadata || !Object.keys(metadata).length) {
12972
- return [
12959
+ const SalesChannelForm = ({ order }) => {
12960
+ const form = useForm({
12961
+ defaultValues: {
12962
+ sales_channel_id: order.sales_channel_id || ""
12963
+ },
12964
+ resolver: zodResolver(schema)
12965
+ });
12966
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12967
+ const { handleSuccess } = useRouteModal();
12968
+ const onSubmit = form.handleSubmit(async (data) => {
12969
+ await mutateAsync(
12973
12970
  {
12974
- key: "",
12975
- value: "",
12976
- disabled: false
12971
+ sales_channel_id: data.sales_channel_id
12972
+ },
12973
+ {
12974
+ onSuccess: () => {
12975
+ toast.success("Sales channel updated");
12976
+ handleSuccess();
12977
+ },
12978
+ onError: (error) => {
12979
+ toast.error(error.message);
12980
+ }
12977
12981
  }
12978
- ];
12979
- }
12980
- return Object.entries(metadata).map(([key, value]) => {
12981
- if (!EDITABLE_TYPES.includes(typeof value)) {
12982
- return {
12983
- key,
12984
- value,
12985
- disabled: true
12986
- };
12987
- }
12988
- let stringValue = value;
12989
- if (typeof value !== "string") {
12990
- stringValue = JSON.stringify(value);
12991
- }
12992
- return {
12993
- key,
12994
- value: stringValue,
12995
- original_key: key
12996
- };
12982
+ );
12997
12983
  });
12998
- }
12999
- function parseValues(values) {
13000
- const metadata = values.metadata;
13001
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
13002
- if (isEmpty) {
13003
- return null;
13004
- }
13005
- const update = {};
13006
- metadata.forEach((field) => {
13007
- let key = field.key;
13008
- let value = field.value;
13009
- const disabled = field.disabled;
13010
- if (!key || !value) {
13011
- return;
13012
- }
13013
- if (disabled) {
13014
- update[key] = value;
13015
- return;
12984
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12985
+ KeyboundForm,
12986
+ {
12987
+ className: "flex flex-1 flex-col overflow-hidden",
12988
+ onSubmit,
12989
+ children: [
12990
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
12991
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12992
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12993
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12994
+ ] }) })
12995
+ ]
13016
12996
  }
13017
- key = key.trim();
13018
- value = value.trim();
13019
- if (value === "true") {
13020
- update[key] = true;
13021
- } else if (value === "false") {
13022
- update[key] = false;
13023
- } else {
13024
- const parsedNumber = parseFloat(value);
13025
- if (!isNaN(parsedNumber)) {
13026
- update[key] = parsedNumber;
13027
- } else {
13028
- update[key] = value;
12997
+ ) });
12998
+ };
12999
+ const SalesChannelField = ({ control, order }) => {
13000
+ const salesChannels = useComboboxData({
13001
+ queryFn: async (params) => {
13002
+ return await sdk.admin.salesChannel.list(params);
13003
+ },
13004
+ queryKey: ["sales-channels"],
13005
+ getOptions: (data) => {
13006
+ return data.sales_channels.map((salesChannel) => ({
13007
+ label: salesChannel.name,
13008
+ value: salesChannel.id
13009
+ }));
13010
+ },
13011
+ defaultValue: order.sales_channel_id || void 0
13012
+ });
13013
+ return /* @__PURE__ */ jsx(
13014
+ Form$2.Field,
13015
+ {
13016
+ control,
13017
+ name: "sales_channel_id",
13018
+ render: ({ field }) => {
13019
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13020
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
13021
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
13022
+ Combobox,
13023
+ {
13024
+ options: salesChannels.options,
13025
+ fetchNextPage: salesChannels.fetchNextPage,
13026
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
13027
+ searchValue: salesChannels.searchValue,
13028
+ onSearchValueChange: salesChannels.onSearchValueChange,
13029
+ placeholder: "Select sales channel",
13030
+ ...field
13031
+ }
13032
+ ) }),
13033
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13034
+ ] });
13029
13035
  }
13030
13036
  }
13031
- });
13032
- return update;
13033
- }
13034
- function getHasUneditableRows(metadata) {
13035
- if (!metadata) {
13036
- return false;
13037
- }
13038
- return Object.values(metadata).some(
13039
- (value) => !EDITABLE_TYPES.includes(typeof value)
13040
13037
  );
13041
- }
13038
+ };
13039
+ const schema = objectType({
13040
+ sales_channel_id: stringType().min(1)
13041
+ });
13042
13042
  const widgetModule = { widgets: [] };
13043
13043
  const routeModule = {
13044
13044
  routes: [
@@ -13059,10 +13059,6 @@ const routeModule = {
13059
13059
  handle,
13060
13060
  loader,
13061
13061
  children: [
13062
- {
13063
- Component: BillingAddress,
13064
- path: "/draft-orders/:id/billing-address"
13065
- },
13066
13062
  {
13067
13063
  Component: CustomItems,
13068
13064
  path: "/draft-orders/:id/custom-items"
@@ -13076,12 +13072,12 @@ const routeModule = {
13076
13072
  path: "/draft-orders/:id/items"
13077
13073
  },
13078
13074
  {
13079
- Component: Promotions,
13080
- path: "/draft-orders/:id/promotions"
13075
+ Component: Metadata,
13076
+ path: "/draft-orders/:id/metadata"
13081
13077
  },
13082
13078
  {
13083
- Component: SalesChannel,
13084
- path: "/draft-orders/:id/sales-channel"
13079
+ Component: Promotions,
13080
+ path: "/draft-orders/:id/promotions"
13085
13081
  },
13086
13082
  {
13087
13083
  Component: Shipping,
@@ -13096,8 +13092,12 @@ const routeModule = {
13096
13092
  path: "/draft-orders/:id/transfer-ownership"
13097
13093
  },
13098
13094
  {
13099
- Component: Metadata,
13100
- path: "/draft-orders/:id/metadata"
13095
+ Component: BillingAddress,
13096
+ path: "/draft-orders/:id/billing-address"
13097
+ },
13098
+ {
13099
+ Component: SalesChannel,
13100
+ path: "/draft-orders/:id/sales-channel"
13101
13101
  }
13102
13102
  ]
13103
13103
  }