@medusajs/draft-order 2.11.1-preview-20251024031436 → 2.11.1-preview-20251024090150

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.
@@ -9654,6 +9654,196 @@ const EmailForm = ({ order }) => {
9654
9654
  const schema$4 = objectType({
9655
9655
  email: stringType().email()
9656
9656
  });
9657
+ const BillingAddress = () => {
9658
+ const { id } = useParams();
9659
+ const { order, isPending, isError, error } = useOrder(id, {
9660
+ fields: "+billing_address"
9661
+ });
9662
+ if (isError) {
9663
+ throw error;
9664
+ }
9665
+ const isReady = !isPending && !!order;
9666
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
9667
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
9668
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
9669
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
9670
+ ] }),
9671
+ isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
9672
+ ] });
9673
+ };
9674
+ const BillingAddressForm = ({ order }) => {
9675
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
9676
+ const form = useForm({
9677
+ defaultValues: {
9678
+ first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
9679
+ last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
9680
+ company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
9681
+ address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
9682
+ address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
9683
+ city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
9684
+ province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
9685
+ country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
9686
+ postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
9687
+ phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
9688
+ },
9689
+ resolver: zodResolver(schema$3)
9690
+ });
9691
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
9692
+ const { handleSuccess } = useRouteModal();
9693
+ const onSubmit = form.handleSubmit(async (data) => {
9694
+ await mutateAsync(
9695
+ { billing_address: data },
9696
+ {
9697
+ onSuccess: () => {
9698
+ handleSuccess();
9699
+ },
9700
+ onError: (error) => {
9701
+ toast.error(error.message);
9702
+ }
9703
+ }
9704
+ );
9705
+ });
9706
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
9707
+ KeyboundForm,
9708
+ {
9709
+ className: "flex flex-1 flex-col overflow-hidden",
9710
+ onSubmit,
9711
+ children: [
9712
+ /* @__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: [
9713
+ /* @__PURE__ */ jsx(
9714
+ Form$2.Field,
9715
+ {
9716
+ control: form.control,
9717
+ name: "country_code",
9718
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9719
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
9720
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
9721
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9722
+ ] })
9723
+ }
9724
+ ),
9725
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9726
+ /* @__PURE__ */ jsx(
9727
+ Form$2.Field,
9728
+ {
9729
+ control: form.control,
9730
+ name: "first_name",
9731
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9732
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
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: "last_name",
9743
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9744
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
9745
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9746
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9747
+ ] })
9748
+ }
9749
+ )
9750
+ ] }),
9751
+ /* @__PURE__ */ jsx(
9752
+ Form$2.Field,
9753
+ {
9754
+ control: form.control,
9755
+ name: "company",
9756
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9757
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
9758
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9759
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9760
+ ] })
9761
+ }
9762
+ ),
9763
+ /* @__PURE__ */ jsx(
9764
+ Form$2.Field,
9765
+ {
9766
+ control: form.control,
9767
+ name: "address_1",
9768
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9769
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
9770
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9771
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9772
+ ] })
9773
+ }
9774
+ ),
9775
+ /* @__PURE__ */ jsx(
9776
+ Form$2.Field,
9777
+ {
9778
+ control: form.control,
9779
+ name: "address_2",
9780
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9781
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
9782
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9783
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9784
+ ] })
9785
+ }
9786
+ ),
9787
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
9788
+ /* @__PURE__ */ jsx(
9789
+ Form$2.Field,
9790
+ {
9791
+ control: form.control,
9792
+ name: "postal_code",
9793
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9794
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
9795
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9796
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9797
+ ] })
9798
+ }
9799
+ ),
9800
+ /* @__PURE__ */ jsx(
9801
+ Form$2.Field,
9802
+ {
9803
+ control: form.control,
9804
+ name: "city",
9805
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9806
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
9807
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9808
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9809
+ ] })
9810
+ }
9811
+ )
9812
+ ] }),
9813
+ /* @__PURE__ */ jsx(
9814
+ Form$2.Field,
9815
+ {
9816
+ control: form.control,
9817
+ name: "province",
9818
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9819
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
9820
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9821
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9822
+ ] })
9823
+ }
9824
+ ),
9825
+ /* @__PURE__ */ jsx(
9826
+ Form$2.Field,
9827
+ {
9828
+ control: form.control,
9829
+ name: "phone",
9830
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
9831
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
9832
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
9833
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
9834
+ ] })
9835
+ }
9836
+ )
9837
+ ] }) }),
9838
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
9839
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
9840
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
9841
+ ] }) })
9842
+ ]
9843
+ }
9844
+ ) });
9845
+ };
9846
+ const schema$3 = addressSchema;
9657
9847
  const NumberInput = forwardRef(
9658
9848
  ({
9659
9849
  value,
@@ -10628,942 +10818,283 @@ const customItemSchema = objectType({
10628
10818
  quantity: numberType(),
10629
10819
  unit_price: unionType([numberType(), stringType()])
10630
10820
  });
10631
- const InlineTip = forwardRef(
10632
- ({ variant = "tip", label, className, children, ...props }, ref) => {
10633
- const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
10634
- return /* @__PURE__ */ jsxs(
10635
- "div",
10636
- {
10637
- ref,
10638
- className: clx(
10639
- "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
10640
- className
10641
- ),
10642
- ...props,
10643
- children: [
10644
- /* @__PURE__ */ jsx(
10645
- "div",
10646
- {
10647
- role: "presentation",
10648
- className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
10649
- "bg-ui-tag-orange-icon": variant === "warning"
10650
- })
10651
- }
10652
- ),
10653
- /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
10654
- /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
10655
- labelValue,
10656
- ":"
10657
- ] }),
10658
- " ",
10659
- children
10660
- ] })
10661
- ]
10662
- }
10663
- );
10664
- }
10665
- );
10666
- InlineTip.displayName = "InlineTip";
10667
- const MetadataFieldSchema = objectType({
10668
- key: stringType(),
10669
- disabled: booleanType().optional(),
10670
- value: anyType()
10671
- });
10672
- const MetadataSchema = objectType({
10673
- metadata: arrayType(MetadataFieldSchema)
10674
- });
10675
- const Metadata = () => {
10676
- const { id } = useParams();
10677
- const { order, isPending, isError, error } = useOrder(id, {
10678
- fields: "metadata"
10821
+ const PROMOTION_QUERY_KEY = "promotions";
10822
+ const promotionsQueryKeys = {
10823
+ list: (query2) => [
10824
+ PROMOTION_QUERY_KEY,
10825
+ query2 ? query2 : void 0
10826
+ ],
10827
+ detail: (id, query2) => [
10828
+ PROMOTION_QUERY_KEY,
10829
+ id,
10830
+ query2 ? query2 : void 0
10831
+ ]
10832
+ };
10833
+ const usePromotions = (query2, options) => {
10834
+ const { data, ...rest } = useQuery({
10835
+ queryKey: promotionsQueryKeys.list(query2),
10836
+ queryFn: async () => sdk.admin.promotion.list(query2),
10837
+ ...options
10679
10838
  });
10680
- if (isError) {
10681
- throw error;
10839
+ return { ...data, ...rest };
10840
+ };
10841
+ const Promotions = () => {
10842
+ const { id } = useParams();
10843
+ const {
10844
+ order: preview,
10845
+ isError: isPreviewError,
10846
+ error: previewError
10847
+ } = useOrderPreview(id, void 0);
10848
+ useInitiateOrderEdit({ preview });
10849
+ const { onCancel } = useCancelOrderEdit({ preview });
10850
+ if (isPreviewError) {
10851
+ throw previewError;
10682
10852
  }
10683
- const isReady = !isPending && !!order;
10684
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
10685
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
10686
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
10687
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
10688
- ] }),
10689
- !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
10853
+ const isReady = !!preview;
10854
+ return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
10855
+ /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
10856
+ isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
10690
10857
  ] });
10691
10858
  };
10692
- const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
10693
- const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
10694
- const MetadataForm = ({ orderId, metadata }) => {
10859
+ const PromotionForm = ({ preview }) => {
10860
+ const { items, shipping_methods } = preview;
10861
+ const [isSubmitting, setIsSubmitting] = useState(false);
10862
+ const [comboboxValue, setComboboxValue] = useState("");
10695
10863
  const { handleSuccess } = useRouteModal();
10696
- const hasUneditableRows = getHasUneditableRows(metadata);
10697
- const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
10698
- const form = useForm({
10699
- defaultValues: {
10700
- metadata: getDefaultValues(metadata)
10864
+ const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
10865
+ const promoIds = getPromotionIds(items, shipping_methods);
10866
+ const { promotions, isPending, isError, error } = usePromotions(
10867
+ {
10868
+ id: promoIds
10701
10869
  },
10702
- resolver: zodResolver(MetadataSchema)
10870
+ {
10871
+ enabled: !!promoIds.length
10872
+ }
10873
+ );
10874
+ const comboboxData = useComboboxData({
10875
+ queryKey: ["promotions", "combobox", promoIds],
10876
+ queryFn: async (params) => {
10877
+ return await sdk.admin.promotion.list({
10878
+ ...params,
10879
+ id: {
10880
+ $nin: promoIds
10881
+ }
10882
+ });
10883
+ },
10884
+ getOptions: (data) => {
10885
+ return data.promotions.map((promotion) => ({
10886
+ label: promotion.code,
10887
+ value: promotion.code
10888
+ }));
10889
+ }
10703
10890
  });
10704
- const handleSubmit = form.handleSubmit(async (data) => {
10705
- const parsedData = parseValues(data);
10706
- await mutateAsync(
10891
+ const add = async (value) => {
10892
+ if (!value) {
10893
+ return;
10894
+ }
10895
+ addPromotions(
10707
10896
  {
10708
- metadata: parsedData
10897
+ promo_codes: [value]
10709
10898
  },
10710
10899
  {
10711
- onSuccess: () => {
10712
- toast.success("Metadata updated");
10713
- handleSuccess();
10900
+ onError: (e) => {
10901
+ toast.error(e.message);
10902
+ comboboxData.onSearchValueChange("");
10903
+ setComboboxValue("");
10714
10904
  },
10715
- onError: (error) => {
10716
- toast.error(error.message);
10905
+ onSuccess: () => {
10906
+ comboboxData.onSearchValueChange("");
10907
+ setComboboxValue("");
10717
10908
  }
10718
10909
  }
10719
10910
  );
10720
- });
10721
- const { fields, insert, remove } = useFieldArray({
10722
- control: form.control,
10723
- name: "metadata"
10724
- });
10725
- function deleteRow(index) {
10726
- remove(index);
10727
- if (fields.length === 1) {
10728
- insert(0, {
10729
- key: "",
10730
- value: "",
10731
- disabled: false
10732
- });
10911
+ };
10912
+ const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
10913
+ const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
10914
+ const onSubmit = async () => {
10915
+ setIsSubmitting(true);
10916
+ let requestSucceeded = false;
10917
+ await requestOrderEdit(void 0, {
10918
+ onError: (e) => {
10919
+ toast.error(e.message);
10920
+ },
10921
+ onSuccess: () => {
10922
+ requestSucceeded = true;
10923
+ }
10924
+ });
10925
+ if (!requestSucceeded) {
10926
+ setIsSubmitting(false);
10927
+ return;
10733
10928
  }
10734
- }
10735
- function insertRow(index, position) {
10736
- insert(index + (position === "above" ? 0 : 1), {
10737
- key: "",
10738
- value: "",
10739
- disabled: false
10929
+ await confirmOrderEdit(void 0, {
10930
+ onError: (e) => {
10931
+ toast.error(e.message);
10932
+ },
10933
+ onSuccess: () => {
10934
+ handleSuccess();
10935
+ },
10936
+ onSettled: () => {
10937
+ setIsSubmitting(false);
10938
+ }
10740
10939
  });
10940
+ };
10941
+ if (isError) {
10942
+ throw error;
10741
10943
  }
10742
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
10743
- KeyboundForm,
10944
+ return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
10945
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
10946
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
10947
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
10948
+ /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
10949
+ /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
10950
+ ] }),
10951
+ /* @__PURE__ */ jsx(
10952
+ Combobox,
10953
+ {
10954
+ id: "promotion-combobox",
10955
+ "aria-describedby": "promotion-combobox-hint",
10956
+ isFetchingNextPage: comboboxData.isFetchingNextPage,
10957
+ fetchNextPage: comboboxData.fetchNextPage,
10958
+ options: comboboxData.options,
10959
+ onSearchValueChange: comboboxData.onSearchValueChange,
10960
+ searchValue: comboboxData.searchValue,
10961
+ disabled: comboboxData.disabled || isAddingPromotions,
10962
+ onChange: add,
10963
+ value: comboboxValue
10964
+ }
10965
+ )
10966
+ ] }),
10967
+ /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
10968
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
10969
+ PromotionItem,
10970
+ {
10971
+ promotion,
10972
+ orderId: preview.id,
10973
+ isLoading: isPending
10974
+ },
10975
+ promotion.id
10976
+ )) })
10977
+ ] }) }),
10978
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
10979
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
10980
+ /* @__PURE__ */ jsx(
10981
+ Button,
10982
+ {
10983
+ size: "small",
10984
+ type: "submit",
10985
+ isLoading: isSubmitting || isAddingPromotions,
10986
+ children: "Save"
10987
+ }
10988
+ )
10989
+ ] }) })
10990
+ ] });
10991
+ };
10992
+ const PromotionItem = ({
10993
+ promotion,
10994
+ orderId,
10995
+ isLoading
10996
+ }) => {
10997
+ var _a;
10998
+ const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
10999
+ const onRemove = async () => {
11000
+ removePromotions(
11001
+ {
11002
+ promo_codes: [promotion.code]
11003
+ },
11004
+ {
11005
+ onError: (e) => {
11006
+ toast.error(e.message);
11007
+ }
11008
+ }
11009
+ );
11010
+ };
11011
+ const displayValue = getDisplayValue(promotion);
11012
+ return /* @__PURE__ */ jsxs(
11013
+ "div",
10744
11014
  {
10745
- onSubmit: handleSubmit,
10746
- className: "flex flex-1 flex-col overflow-hidden",
11015
+ className: clx(
11016
+ "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11017
+ {
11018
+ "animate-pulse": isLoading
11019
+ }
11020
+ ),
10747
11021
  children: [
10748
- /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
10749
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
10750
- /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
10751
- /* @__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" }) }),
10752
- /* @__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" }) })
11022
+ /* @__PURE__ */ jsxs("div", { children: [
11023
+ /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11024
+ /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11025
+ displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
11026
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
11027
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
10753
11028
  ] }),
10754
- fields.map((field, index) => {
10755
- const isDisabled = field.disabled || false;
10756
- let placeholder = "-";
10757
- if (typeof field.value === "object") {
10758
- placeholder = "{ ... }";
10759
- }
10760
- if (Array.isArray(field.value)) {
10761
- placeholder = "[ ... ]";
10762
- }
10763
- return /* @__PURE__ */ jsx(
10764
- ConditionalTooltip,
10765
- {
10766
- showTooltip: isDisabled,
10767
- content: "This row is disabled because it contains non-primitive data.",
10768
- children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
10769
- /* @__PURE__ */ jsxs(
10770
- "div",
10771
- {
10772
- className: clx("grid grid-cols-2 divide-x", {
10773
- "overflow-hidden rounded-b-lg": index === fields.length - 1
10774
- }),
10775
- children: [
10776
- /* @__PURE__ */ jsx(
10777
- Form$2.Field,
10778
- {
10779
- control: form.control,
10780
- name: `metadata.${index}.key`,
10781
- render: ({ field: field2 }) => {
10782
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10783
- GridInput,
10784
- {
10785
- "aria-labelledby": METADATA_KEY_LABEL_ID,
10786
- ...field2,
10787
- disabled: isDisabled,
10788
- placeholder: "Key"
10789
- }
10790
- ) }) });
10791
- }
10792
- }
10793
- ),
10794
- /* @__PURE__ */ jsx(
10795
- Form$2.Field,
10796
- {
10797
- control: form.control,
10798
- name: `metadata.${index}.value`,
10799
- render: ({ field: { value, ...field2 } }) => {
10800
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
10801
- GridInput,
10802
- {
10803
- "aria-labelledby": METADATA_VALUE_LABEL_ID,
10804
- ...field2,
10805
- value: isDisabled ? placeholder : value,
10806
- disabled: isDisabled,
10807
- placeholder: "Value"
10808
- }
10809
- ) }) });
10810
- }
10811
- }
10812
- )
10813
- ]
10814
- }
10815
- ),
10816
- /* @__PURE__ */ jsxs(DropdownMenu, { children: [
10817
- /* @__PURE__ */ jsx(
10818
- DropdownMenu.Trigger,
10819
- {
10820
- className: clx(
10821
- "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
10822
- {
10823
- hidden: isDisabled
10824
- }
10825
- ),
10826
- disabled: isDisabled,
10827
- asChild: true,
10828
- children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
10829
- }
10830
- ),
10831
- /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
10832
- /* @__PURE__ */ jsxs(
10833
- DropdownMenu.Item,
10834
- {
10835
- className: "gap-x-2",
10836
- onClick: () => insertRow(index, "above"),
10837
- children: [
10838
- /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
10839
- "Insert row above"
10840
- ]
10841
- }
10842
- ),
10843
- /* @__PURE__ */ jsxs(
10844
- DropdownMenu.Item,
10845
- {
10846
- className: "gap-x-2",
10847
- onClick: () => insertRow(index, "below"),
10848
- children: [
10849
- /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
10850
- "Insert row below"
10851
- ]
10852
- }
10853
- ),
10854
- /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
10855
- /* @__PURE__ */ jsxs(
10856
- DropdownMenu.Item,
10857
- {
10858
- className: "gap-x-2",
10859
- onClick: () => deleteRow(index),
10860
- children: [
10861
- /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
10862
- "Delete row"
10863
- ]
10864
- }
10865
- )
10866
- ] })
10867
- ] })
10868
- ] })
10869
- },
10870
- field.id
10871
- );
10872
- })
10873
- ] }),
10874
- 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." })
10875
- ] }),
10876
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10877
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
10878
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
10879
- ] }) })
10880
- ]
10881
- }
10882
- ) });
10883
- };
10884
- const GridInput = forwardRef(({ className, ...props }, ref) => {
10885
- return /* @__PURE__ */ jsx(
10886
- "input",
10887
- {
10888
- ref,
10889
- ...props,
10890
- autoComplete: "off",
10891
- className: clx(
10892
- "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",
10893
- className
10894
- )
10895
- }
10896
- );
10897
- });
10898
- GridInput.displayName = "MetadataForm.GridInput";
10899
- const PlaceholderInner = () => {
10900
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
10901
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
10902
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
10903
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
10904
- /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
10905
- ] }) })
10906
- ] });
10907
- };
10908
- const EDITABLE_TYPES = ["string", "number", "boolean"];
10909
- function getDefaultValues(metadata) {
10910
- if (!metadata || !Object.keys(metadata).length) {
10911
- return [
10912
- {
10913
- key: "",
10914
- value: "",
10915
- disabled: false
10916
- }
10917
- ];
10918
- }
10919
- return Object.entries(metadata).map(([key, value]) => {
10920
- if (!EDITABLE_TYPES.includes(typeof value)) {
10921
- return {
10922
- key,
10923
- value,
10924
- disabled: true
10925
- };
10926
- }
10927
- let stringValue = value;
10928
- if (typeof value !== "string") {
10929
- stringValue = JSON.stringify(value);
10930
- }
10931
- return {
10932
- key,
10933
- value: stringValue,
10934
- original_key: key
10935
- };
10936
- });
10937
- }
10938
- function parseValues(values) {
10939
- const metadata = values.metadata;
10940
- const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
10941
- if (isEmpty) {
10942
- return null;
10943
- }
10944
- const update = {};
10945
- metadata.forEach((field) => {
10946
- let key = field.key;
10947
- let value = field.value;
10948
- const disabled = field.disabled;
10949
- if (!key || !value) {
10950
- return;
10951
- }
10952
- if (disabled) {
10953
- update[key] = value;
10954
- return;
10955
- }
10956
- key = key.trim();
10957
- value = value.trim();
10958
- if (value === "true") {
10959
- update[key] = true;
10960
- } else if (value === "false") {
10961
- update[key] = false;
10962
- } else {
10963
- const parsedNumber = parseFloat(value);
10964
- if (!isNaN(parsedNumber)) {
10965
- update[key] = parsedNumber;
10966
- } else {
10967
- update[key] = value;
10968
- }
10969
- }
10970
- });
10971
- return update;
10972
- }
10973
- function getHasUneditableRows(metadata) {
10974
- if (!metadata) {
10975
- return false;
10976
- }
10977
- return Object.values(metadata).some(
10978
- (value) => !EDITABLE_TYPES.includes(typeof value)
10979
- );
10980
- }
10981
- const PROMOTION_QUERY_KEY = "promotions";
10982
- const promotionsQueryKeys = {
10983
- list: (query2) => [
10984
- PROMOTION_QUERY_KEY,
10985
- query2 ? query2 : void 0
10986
- ],
10987
- detail: (id, query2) => [
10988
- PROMOTION_QUERY_KEY,
10989
- id,
10990
- query2 ? query2 : void 0
10991
- ]
10992
- };
10993
- const usePromotions = (query2, options) => {
10994
- const { data, ...rest } = useQuery({
10995
- queryKey: promotionsQueryKeys.list(query2),
10996
- queryFn: async () => sdk.admin.promotion.list(query2),
10997
- ...options
10998
- });
10999
- return { ...data, ...rest };
11000
- };
11001
- const Promotions = () => {
11002
- const { id } = useParams();
11003
- const {
11004
- order: preview,
11005
- isError: isPreviewError,
11006
- error: previewError
11007
- } = useOrderPreview(id, void 0);
11008
- useInitiateOrderEdit({ preview });
11009
- const { onCancel } = useCancelOrderEdit({ preview });
11010
- if (isPreviewError) {
11011
- throw previewError;
11012
- }
11013
- const isReady = !!preview;
11014
- return /* @__PURE__ */ jsxs(RouteDrawer, { onClose: onCancel, children: [
11015
- /* @__PURE__ */ jsx(RouteDrawer.Header, { children: /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Promotions" }) }) }),
11016
- isReady && /* @__PURE__ */ jsx(PromotionForm, { preview })
11017
- ] });
11018
- };
11019
- const PromotionForm = ({ preview }) => {
11020
- const { items, shipping_methods } = preview;
11021
- const [isSubmitting, setIsSubmitting] = useState(false);
11022
- const [comboboxValue, setComboboxValue] = useState("");
11023
- const { handleSuccess } = useRouteModal();
11024
- const { mutateAsync: addPromotions, isPending: isAddingPromotions } = useDraftOrderAddPromotions(preview.id);
11025
- const promoIds = getPromotionIds(items, shipping_methods);
11026
- const { promotions, isPending, isError, error } = usePromotions(
11027
- {
11028
- id: promoIds
11029
- },
11030
- {
11031
- enabled: !!promoIds.length
11032
- }
11033
- );
11034
- const comboboxData = useComboboxData({
11035
- queryKey: ["promotions", "combobox", promoIds],
11036
- queryFn: async (params) => {
11037
- return await sdk.admin.promotion.list({
11038
- ...params,
11039
- id: {
11040
- $nin: promoIds
11041
- }
11042
- });
11043
- },
11044
- getOptions: (data) => {
11045
- return data.promotions.map((promotion) => ({
11046
- label: promotion.code,
11047
- value: promotion.code
11048
- }));
11049
- }
11050
- });
11051
- const add = async (value) => {
11052
- if (!value) {
11053
- return;
11054
- }
11055
- addPromotions(
11056
- {
11057
- promo_codes: [value]
11058
- },
11059
- {
11060
- onError: (e) => {
11061
- toast.error(e.message);
11062
- comboboxData.onSearchValueChange("");
11063
- setComboboxValue("");
11064
- },
11065
- onSuccess: () => {
11066
- comboboxData.onSearchValueChange("");
11067
- setComboboxValue("");
11068
- }
11069
- }
11070
- );
11071
- };
11072
- const { mutateAsync: confirmOrderEdit } = useDraftOrderConfirmEdit(preview.id);
11073
- const { mutateAsync: requestOrderEdit } = useOrderEditRequest(preview.id);
11074
- const onSubmit = async () => {
11075
- setIsSubmitting(true);
11076
- let requestSucceeded = false;
11077
- await requestOrderEdit(void 0, {
11078
- onError: (e) => {
11079
- toast.error(e.message);
11080
- },
11081
- onSuccess: () => {
11082
- requestSucceeded = true;
11083
- }
11084
- });
11085
- if (!requestSucceeded) {
11086
- setIsSubmitting(false);
11087
- return;
11088
- }
11089
- await confirmOrderEdit(void 0, {
11090
- onError: (e) => {
11091
- toast.error(e.message);
11092
- },
11093
- onSuccess: () => {
11094
- handleSuccess();
11095
- },
11096
- onSettled: () => {
11097
- setIsSubmitting(false);
11098
- }
11099
- });
11100
- };
11101
- if (isError) {
11102
- throw error;
11103
- }
11104
- return /* @__PURE__ */ jsxs(KeyboundForm, { className: "flex flex-1 flex-col", onSubmit, children: [
11105
- /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
11106
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
11107
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11108
- /* @__PURE__ */ jsx(Label$1, { size: "small", weight: "plus", htmlFor: "promotion-combobox", children: "Apply promotions" }),
11109
- /* @__PURE__ */ jsx(Hint$1, { id: "promotion-combobox-hint", children: "Manage promotions that should be applied to the order." })
11110
- ] }),
11111
- /* @__PURE__ */ jsx(
11112
- Combobox,
11113
- {
11114
- id: "promotion-combobox",
11115
- "aria-describedby": "promotion-combobox-hint",
11116
- isFetchingNextPage: comboboxData.isFetchingNextPage,
11117
- fetchNextPage: comboboxData.fetchNextPage,
11118
- options: comboboxData.options,
11119
- onSearchValueChange: comboboxData.onSearchValueChange,
11120
- searchValue: comboboxData.searchValue,
11121
- disabled: comboboxData.disabled || isAddingPromotions,
11122
- onChange: add,
11123
- value: comboboxValue
11124
- }
11125
- )
11126
- ] }),
11127
- /* @__PURE__ */ jsx(Divider, { variant: "dashed" }),
11128
- /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: promotions == null ? void 0 : promotions.map((promotion) => /* @__PURE__ */ jsx(
11129
- PromotionItem,
11130
- {
11131
- promotion,
11132
- orderId: preview.id,
11133
- isLoading: isPending
11134
- },
11135
- promotion.id
11136
- )) })
11137
- ] }) }),
11138
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11139
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11140
- /* @__PURE__ */ jsx(
11141
- Button,
11142
- {
11143
- size: "small",
11144
- type: "submit",
11145
- isLoading: isSubmitting || isAddingPromotions,
11146
- children: "Save"
11147
- }
11148
- )
11149
- ] }) })
11150
- ] });
11151
- };
11152
- const PromotionItem = ({
11153
- promotion,
11154
- orderId,
11155
- isLoading
11156
- }) => {
11157
- var _a;
11158
- const { mutateAsync: removePromotions, isPending } = useDraftOrderRemovePromotions(orderId);
11159
- const onRemove = async () => {
11160
- removePromotions(
11161
- {
11162
- promo_codes: [promotion.code]
11163
- },
11164
- {
11165
- onError: (e) => {
11166
- toast.error(e.message);
11167
- }
11168
- }
11169
- );
11170
- };
11171
- const displayValue = getDisplayValue(promotion);
11172
- return /* @__PURE__ */ jsxs(
11173
- "div",
11174
- {
11175
- className: clx(
11176
- "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
11177
- {
11178
- "animate-pulse": isLoading
11179
- }
11180
- ),
11181
- children: [
11182
- /* @__PURE__ */ jsxs("div", { children: [
11183
- /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: promotion.code }),
11184
- /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle flex items-center gap-1.5", children: [
11185
- displayValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
11186
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: displayValue }),
11187
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "·" })
11188
- ] }),
11189
- /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11190
- ] })
11191
- ] }),
11192
- /* @__PURE__ */ jsx(
11193
- IconButton,
11194
- {
11195
- size: "small",
11196
- type: "button",
11197
- variant: "transparent",
11198
- onClick: onRemove,
11199
- isLoading: isPending || isLoading,
11200
- children: /* @__PURE__ */ jsx(XMark, {})
11201
- }
11202
- )
11203
- ]
11204
- },
11205
- promotion.id
11206
- );
11207
- };
11208
- function getDisplayValue(promotion) {
11209
- var _a, _b, _c, _d;
11210
- const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11211
- if (!value) {
11212
- return null;
11213
- }
11214
- if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11215
- const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11216
- if (!currency) {
11217
- return null;
11218
- }
11219
- return getLocaleAmount(value, currency);
11220
- } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11221
- return formatPercentage(value);
11222
- }
11223
- return null;
11224
- }
11225
- const formatter = new Intl.NumberFormat([], {
11226
- style: "percent",
11227
- minimumFractionDigits: 2
11228
- });
11229
- const formatPercentage = (value, isPercentageValue = false) => {
11230
- let val = value || 0;
11231
- if (!isPercentageValue) {
11232
- val = val / 100;
11233
- }
11234
- return formatter.format(val);
11235
- };
11236
- function getPromotionIds(items, shippingMethods) {
11237
- const promotionIds = /* @__PURE__ */ new Set();
11238
- for (const item of items) {
11239
- if (item.adjustments) {
11240
- for (const adjustment of item.adjustments) {
11241
- if (adjustment.promotion_id) {
11242
- promotionIds.add(adjustment.promotion_id);
11243
- }
11244
- }
11245
- }
11246
- }
11247
- for (const shippingMethod of shippingMethods) {
11248
- if (shippingMethod.adjustments) {
11249
- for (const adjustment of shippingMethod.adjustments) {
11250
- if (adjustment.promotion_id) {
11251
- promotionIds.add(adjustment.promotion_id);
11252
- }
11253
- }
11254
- }
11255
- }
11256
- return Array.from(promotionIds);
11257
- }
11258
- const SalesChannel = () => {
11259
- const { id } = useParams();
11260
- const { draft_order, isPending, isError, error } = useDraftOrder(
11261
- id,
11262
- {
11263
- fields: "+sales_channel_id"
11264
- },
11265
- {
11266
- enabled: !!id
11267
- }
11268
- );
11269
- if (isError) {
11270
- throw error;
11271
- }
11272
- const ISrEADY = !!draft_order && !isPending;
11273
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11274
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11275
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11276
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11277
- ] }),
11278
- ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11279
- ] });
11280
- };
11281
- const SalesChannelForm = ({ order }) => {
11282
- const form = useForm({
11283
- defaultValues: {
11284
- sales_channel_id: order.sales_channel_id || ""
11285
- },
11286
- resolver: zodResolver(schema$3)
11287
- });
11288
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11289
- const { handleSuccess } = useRouteModal();
11290
- const onSubmit = form.handleSubmit(async (data) => {
11291
- await mutateAsync(
11292
- {
11293
- sales_channel_id: data.sales_channel_id
11294
- },
11295
- {
11296
- onSuccess: () => {
11297
- toast.success("Sales channel updated");
11298
- handleSuccess();
11299
- },
11300
- onError: (error) => {
11301
- toast.error(error.message);
11302
- }
11303
- }
11304
- );
11305
- });
11306
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11307
- KeyboundForm,
11308
- {
11309
- className: "flex flex-1 flex-col overflow-hidden",
11310
- onSubmit,
11311
- children: [
11312
- /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11313
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11314
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11315
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11316
- ] }) })
11317
- ]
11318
- }
11319
- ) });
11320
- };
11321
- const SalesChannelField = ({ control, order }) => {
11322
- const salesChannels = useComboboxData({
11323
- queryFn: async (params) => {
11324
- return await sdk.admin.salesChannel.list(params);
11325
- },
11326
- queryKey: ["sales-channels"],
11327
- getOptions: (data) => {
11328
- return data.sales_channels.map((salesChannel) => ({
11329
- label: salesChannel.name,
11330
- value: salesChannel.id
11331
- }));
11332
- },
11333
- defaultValue: order.sales_channel_id || void 0
11334
- });
11335
- return /* @__PURE__ */ jsx(
11336
- Form$2.Field,
11337
- {
11338
- control,
11339
- name: "sales_channel_id",
11340
- render: ({ field }) => {
11341
- return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11342
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11343
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11344
- Combobox,
11345
- {
11346
- options: salesChannels.options,
11347
- fetchNextPage: salesChannels.fetchNextPage,
11348
- isFetchingNextPage: salesChannels.isFetchingNextPage,
11349
- searchValue: salesChannels.searchValue,
11350
- onSearchValueChange: salesChannels.onSearchValueChange,
11351
- placeholder: "Select sales channel",
11352
- ...field
11353
- }
11354
- ) }),
11355
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11356
- ] });
11357
- }
11358
- }
11359
- );
11360
- };
11361
- const schema$3 = objectType({
11362
- sales_channel_id: stringType().min(1)
11363
- });
11364
- const ShippingAddress = () => {
11365
- const { id } = useParams();
11366
- const { order, isPending, isError, error } = useOrder(id, {
11367
- fields: "+shipping_address"
11368
- });
11369
- if (isError) {
11370
- throw error;
11371
- }
11372
- const isReady = !isPending && !!order;
11373
- return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11374
- /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11375
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
11376
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
11377
- ] }),
11378
- isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
11379
- ] });
11380
- };
11381
- const ShippingAddressForm = ({ order }) => {
11382
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
11383
- const form = useForm({
11384
- defaultValues: {
11385
- first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
11386
- last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
11387
- company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
11388
- address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
11389
- address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
11390
- city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
11391
- province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
11392
- country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
11393
- postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
11394
- phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
11395
- },
11396
- resolver: zodResolver(schema$2)
11397
- });
11398
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11399
- const { handleSuccess } = useRouteModal();
11400
- const onSubmit = form.handleSubmit(async (data) => {
11401
- await mutateAsync(
11402
- {
11403
- shipping_address: {
11404
- first_name: data.first_name,
11405
- last_name: data.last_name,
11406
- company: data.company,
11407
- address_1: data.address_1,
11408
- address_2: data.address_2,
11409
- city: data.city,
11410
- province: data.province,
11411
- country_code: data.country_code,
11412
- postal_code: data.postal_code,
11413
- phone: data.phone
11414
- }
11415
- },
11416
- {
11417
- onSuccess: () => {
11418
- handleSuccess();
11419
- },
11420
- onError: (error) => {
11421
- toast.error(error.message);
11422
- }
11423
- }
11424
- );
11425
- });
11426
- return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11427
- KeyboundForm,
11428
- {
11429
- className: "flex flex-1 flex-col overflow-hidden",
11430
- onSubmit,
11431
- children: [
11432
- /* @__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: [
11433
- /* @__PURE__ */ jsx(
11434
- Form$2.Field,
11435
- {
11436
- control: form.control,
11437
- name: "country_code",
11438
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11439
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
11440
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
11441
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11442
- ] })
11443
- }
11444
- ),
11445
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11446
- /* @__PURE__ */ jsx(
11447
- Form$2.Field,
11448
- {
11449
- control: form.control,
11450
- name: "first_name",
11451
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11452
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
11453
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11454
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11455
- ] })
11456
- }
11457
- ),
11458
- /* @__PURE__ */ jsx(
11459
- Form$2.Field,
11460
- {
11461
- control: form.control,
11462
- name: "last_name",
11463
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11464
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
11465
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11466
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11467
- ] })
11468
- }
11469
- )
11470
- ] }),
11471
- /* @__PURE__ */ jsx(
11472
- Form$2.Field,
11473
- {
11474
- control: form.control,
11475
- name: "company",
11476
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11477
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
11478
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11479
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11480
- ] })
11481
- }
11482
- ),
11483
- /* @__PURE__ */ jsx(
11484
- Form$2.Field,
11485
- {
11486
- control: form.control,
11487
- name: "address_1",
11488
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11489
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
11490
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11491
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11492
- ] })
11493
- }
11494
- ),
11495
- /* @__PURE__ */ jsx(
11496
- Form$2.Field,
11497
- {
11498
- control: form.control,
11499
- name: "address_2",
11500
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11501
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
11502
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11503
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11504
- ] })
11505
- }
11506
- ),
11507
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
11508
- /* @__PURE__ */ jsx(
11509
- Form$2.Field,
11510
- {
11511
- control: form.control,
11512
- name: "postal_code",
11513
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11514
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
11515
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11516
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11517
- ] })
11518
- }
11519
- ),
11520
- /* @__PURE__ */ jsx(
11521
- Form$2.Field,
11522
- {
11523
- control: form.control,
11524
- name: "city",
11525
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11526
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
11527
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11528
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11529
- ] })
11530
- }
11531
- )
11532
- ] }),
11533
- /* @__PURE__ */ jsx(
11534
- Form$2.Field,
11535
- {
11536
- control: form.control,
11537
- name: "province",
11538
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11539
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
11540
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11541
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11542
- ] })
11543
- }
11544
- ),
11545
- /* @__PURE__ */ jsx(
11546
- Form$2.Field,
11547
- {
11548
- control: form.control,
11549
- name: "phone",
11550
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11551
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
11552
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
11553
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
11554
- ] })
11555
- }
11556
- )
11557
- ] }) }),
11558
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11559
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11560
- /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11561
- ] }) })
11029
+ /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "capitalize", children: (_a = promotion.application_method) == null ? void 0 : _a.allocation })
11030
+ ] })
11031
+ ] }),
11032
+ /* @__PURE__ */ jsx(
11033
+ IconButton,
11034
+ {
11035
+ size: "small",
11036
+ type: "button",
11037
+ variant: "transparent",
11038
+ onClick: onRemove,
11039
+ isLoading: isPending || isLoading,
11040
+ children: /* @__PURE__ */ jsx(XMark, {})
11041
+ }
11042
+ )
11562
11043
  ]
11044
+ },
11045
+ promotion.id
11046
+ );
11047
+ };
11048
+ function getDisplayValue(promotion) {
11049
+ var _a, _b, _c, _d;
11050
+ const value = (_a = promotion.application_method) == null ? void 0 : _a.value;
11051
+ if (!value) {
11052
+ return null;
11053
+ }
11054
+ if (((_b = promotion.application_method) == null ? void 0 : _b.type) === "fixed") {
11055
+ const currency = (_c = promotion.application_method) == null ? void 0 : _c.currency_code;
11056
+ if (!currency) {
11057
+ return null;
11563
11058
  }
11564
- ) });
11059
+ return getLocaleAmount(value, currency);
11060
+ } else if (((_d = promotion.application_method) == null ? void 0 : _d.type) === "percentage") {
11061
+ return formatPercentage(value);
11062
+ }
11063
+ return null;
11064
+ }
11065
+ const formatter = new Intl.NumberFormat([], {
11066
+ style: "percent",
11067
+ minimumFractionDigits: 2
11068
+ });
11069
+ const formatPercentage = (value, isPercentageValue = false) => {
11070
+ let val = value || 0;
11071
+ if (!isPercentageValue) {
11072
+ val = val / 100;
11073
+ }
11074
+ return formatter.format(val);
11565
11075
  };
11566
- const schema$2 = addressSchema;
11076
+ function getPromotionIds(items, shippingMethods) {
11077
+ const promotionIds = /* @__PURE__ */ new Set();
11078
+ for (const item of items) {
11079
+ if (item.adjustments) {
11080
+ for (const adjustment of item.adjustments) {
11081
+ if (adjustment.promotion_id) {
11082
+ promotionIds.add(adjustment.promotion_id);
11083
+ }
11084
+ }
11085
+ }
11086
+ }
11087
+ for (const shippingMethod of shippingMethods) {
11088
+ if (shippingMethod.adjustments) {
11089
+ for (const adjustment of shippingMethod.adjustments) {
11090
+ if (adjustment.promotion_id) {
11091
+ promotionIds.add(adjustment.promotion_id);
11092
+ }
11093
+ }
11094
+ }
11095
+ }
11096
+ return Array.from(promotionIds);
11097
+ }
11567
11098
  const STACKED_FOCUS_MODAL_ID = "shipping-form";
11568
11099
  const Shipping = () => {
11569
11100
  var _a;
@@ -12282,95 +11813,404 @@ const ShippingOptionField = ({
12282
11813
  const shippingOptions = useComboboxData({
12283
11814
  queryKey: ["shipping_options", locationId, shippingProfileId],
12284
11815
  queryFn: async (params) => {
12285
- return await sdk.admin.shippingOption.list({
12286
- ...params,
12287
- stock_location_id: locationId,
12288
- shipping_profile_id: shippingProfileId
12289
- });
11816
+ return await sdk.admin.shippingOption.list({
11817
+ ...params,
11818
+ stock_location_id: locationId,
11819
+ shipping_profile_id: shippingProfileId
11820
+ });
11821
+ },
11822
+ getOptions: (data) => {
11823
+ return data.shipping_options.map((option) => {
11824
+ var _a2;
11825
+ if ((_a2 = option.rules) == null ? void 0 : _a2.find(
11826
+ (r) => r.attribute === "is_return" && r.value === "true"
11827
+ )) {
11828
+ return void 0;
11829
+ }
11830
+ return {
11831
+ label: option.name,
11832
+ value: option.id
11833
+ };
11834
+ }).filter(Boolean);
11835
+ },
11836
+ enabled: !!locationId && !!shippingProfileId,
11837
+ defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
11838
+ });
11839
+ const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
11840
+ return /* @__PURE__ */ jsx(
11841
+ Form$2.Field,
11842
+ {
11843
+ control,
11844
+ name: "shipping_option_id",
11845
+ render: ({ field }) => {
11846
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11847
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11848
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
11849
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
11850
+ ] }),
11851
+ /* @__PURE__ */ jsx(
11852
+ ConditionalTooltip,
11853
+ {
11854
+ content: tooltipContent,
11855
+ showTooltip: !locationId || !shippingProfileId,
11856
+ children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11857
+ Combobox,
11858
+ {
11859
+ options: shippingOptions.options,
11860
+ fetchNextPage: shippingOptions.fetchNextPage,
11861
+ isFetchingNextPage: shippingOptions.isFetchingNextPage,
11862
+ searchValue: shippingOptions.searchValue,
11863
+ onSearchValueChange: shippingOptions.onSearchValueChange,
11864
+ placeholder: "Select shipping option",
11865
+ ...field,
11866
+ disabled: !locationId || !shippingProfileId
11867
+ }
11868
+ ) }) })
11869
+ }
11870
+ )
11871
+ ] }) });
11872
+ }
11873
+ }
11874
+ );
11875
+ };
11876
+ const CustomAmountField = ({
11877
+ control,
11878
+ currencyCode
11879
+ }) => {
11880
+ return /* @__PURE__ */ jsx(
11881
+ Form$2.Field,
11882
+ {
11883
+ control,
11884
+ name: "custom_amount",
11885
+ render: ({ field: { onChange, ...field } }) => {
11886
+ return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
11887
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
11888
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
11889
+ /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
11890
+ ] }),
11891
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11892
+ CurrencyInput,
11893
+ {
11894
+ ...field,
11895
+ onValueChange: (value) => onChange(value),
11896
+ symbol: getNativeSymbol(currencyCode),
11897
+ code: currencyCode
11898
+ }
11899
+ ) })
11900
+ ] });
11901
+ }
11902
+ }
11903
+ );
11904
+ };
11905
+ const SalesChannel = () => {
11906
+ const { id } = useParams();
11907
+ const { draft_order, isPending, isError, error } = useDraftOrder(
11908
+ id,
11909
+ {
11910
+ fields: "+sales_channel_id"
11911
+ },
11912
+ {
11913
+ enabled: !!id
11914
+ }
11915
+ );
11916
+ if (isError) {
11917
+ throw error;
11918
+ }
11919
+ const ISrEADY = !!draft_order && !isPending;
11920
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
11921
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
11922
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Sales Channel" }) }),
11923
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Update which sales channel the draft order is associated with" }) })
11924
+ ] }),
11925
+ ISrEADY && /* @__PURE__ */ jsx(SalesChannelForm, { order: draft_order })
11926
+ ] });
11927
+ };
11928
+ const SalesChannelForm = ({ order }) => {
11929
+ const form = useForm({
11930
+ defaultValues: {
11931
+ sales_channel_id: order.sales_channel_id || ""
11932
+ },
11933
+ resolver: zodResolver(schema$2)
11934
+ });
11935
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
11936
+ const { handleSuccess } = useRouteModal();
11937
+ const onSubmit = form.handleSubmit(async (data) => {
11938
+ await mutateAsync(
11939
+ {
11940
+ sales_channel_id: data.sales_channel_id
11941
+ },
11942
+ {
11943
+ onSuccess: () => {
11944
+ toast.success("Sales channel updated");
11945
+ handleSuccess();
11946
+ },
11947
+ onError: (error) => {
11948
+ toast.error(error.message);
11949
+ }
11950
+ }
11951
+ );
11952
+ });
11953
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
11954
+ KeyboundForm,
11955
+ {
11956
+ className: "flex flex-1 flex-col overflow-hidden",
11957
+ onSubmit,
11958
+ children: [
11959
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "flex flex-col gap-y-6 overflow-y-auto", children: /* @__PURE__ */ jsx(SalesChannelField, { control: form.control, order }) }),
11960
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
11961
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
11962
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
11963
+ ] }) })
11964
+ ]
11965
+ }
11966
+ ) });
11967
+ };
11968
+ const SalesChannelField = ({ control, order }) => {
11969
+ const salesChannels = useComboboxData({
11970
+ queryFn: async (params) => {
11971
+ return await sdk.admin.salesChannel.list(params);
12290
11972
  },
11973
+ queryKey: ["sales-channels"],
12291
11974
  getOptions: (data) => {
12292
- return data.shipping_options.map((option) => {
12293
- var _a2;
12294
- if ((_a2 = option.rules) == null ? void 0 : _a2.find(
12295
- (r) => r.attribute === "is_return" && r.value === "true"
12296
- )) {
12297
- return void 0;
12298
- }
12299
- return {
12300
- label: option.name,
12301
- value: option.id
12302
- };
12303
- }).filter(Boolean);
11975
+ return data.sales_channels.map((salesChannel) => ({
11976
+ label: salesChannel.name,
11977
+ value: salesChannel.id
11978
+ }));
12304
11979
  },
12305
- enabled: !!locationId && !!shippingProfileId,
12306
- defaultValue: ((_a = preview.shipping_methods[0]) == null ? void 0 : _a.shipping_option_id) || void 0
11980
+ defaultValue: order.sales_channel_id || void 0
12307
11981
  });
12308
- const tooltipContent = !locationId && !shippingProfileId ? "Choose a location and shipping profile first." : !locationId ? "Choose a location first." : "Choose a shipping profile first.";
12309
11982
  return /* @__PURE__ */ jsx(
12310
11983
  Form$2.Field,
12311
11984
  {
12312
11985
  control,
12313
- name: "shipping_option_id",
11986
+ name: "sales_channel_id",
12314
11987
  render: ({ field }) => {
12315
- return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12316
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12317
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Shipping option" }),
12318
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Choose the shipping option to use." })
12319
- ] }),
12320
- /* @__PURE__ */ jsx(
12321
- ConditionalTooltip,
11988
+ return /* @__PURE__ */ jsxs(Form$2.Item, { children: [
11989
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Sales Channel" }),
11990
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
11991
+ Combobox,
12322
11992
  {
12323
- content: tooltipContent,
12324
- showTooltip: !locationId || !shippingProfileId,
12325
- children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12326
- Combobox,
12327
- {
12328
- options: shippingOptions.options,
12329
- fetchNextPage: shippingOptions.fetchNextPage,
12330
- isFetchingNextPage: shippingOptions.isFetchingNextPage,
12331
- searchValue: shippingOptions.searchValue,
12332
- onSearchValueChange: shippingOptions.onSearchValueChange,
12333
- placeholder: "Select shipping option",
12334
- ...field,
12335
- disabled: !locationId || !shippingProfileId
12336
- }
12337
- ) }) })
11993
+ options: salesChannels.options,
11994
+ fetchNextPage: salesChannels.fetchNextPage,
11995
+ isFetchingNextPage: salesChannels.isFetchingNextPage,
11996
+ searchValue: salesChannels.searchValue,
11997
+ onSearchValueChange: salesChannels.onSearchValueChange,
11998
+ placeholder: "Select sales channel",
11999
+ ...field
12338
12000
  }
12339
- )
12340
- ] }) });
12001
+ ) }),
12002
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12003
+ ] });
12341
12004
  }
12342
12005
  }
12343
12006
  );
12344
12007
  };
12345
- const CustomAmountField = ({
12346
- control,
12347
- currencyCode
12348
- }) => {
12349
- return /* @__PURE__ */ jsx(
12350
- Form$2.Field,
12008
+ const schema$2 = objectType({
12009
+ sales_channel_id: stringType().min(1)
12010
+ });
12011
+ const ShippingAddress = () => {
12012
+ const { id } = useParams();
12013
+ const { order, isPending, isError, error } = useOrder(id, {
12014
+ fields: "+shipping_address"
12015
+ });
12016
+ if (isError) {
12017
+ throw error;
12018
+ }
12019
+ const isReady = !isPending && !!order;
12020
+ return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12021
+ /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12022
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Shipping Address" }) }),
12023
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the shipping address for the draft order" }) })
12024
+ ] }),
12025
+ isReady && /* @__PURE__ */ jsx(ShippingAddressForm, { order })
12026
+ ] });
12027
+ };
12028
+ const ShippingAddressForm = ({ order }) => {
12029
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12030
+ const form = useForm({
12031
+ defaultValues: {
12032
+ first_name: ((_a = order.shipping_address) == null ? void 0 : _a.first_name) ?? "",
12033
+ last_name: ((_b = order.shipping_address) == null ? void 0 : _b.last_name) ?? "",
12034
+ company: ((_c = order.shipping_address) == null ? void 0 : _c.company) ?? "",
12035
+ address_1: ((_d = order.shipping_address) == null ? void 0 : _d.address_1) ?? "",
12036
+ address_2: ((_e = order.shipping_address) == null ? void 0 : _e.address_2) ?? "",
12037
+ city: ((_f = order.shipping_address) == null ? void 0 : _f.city) ?? "",
12038
+ province: ((_g = order.shipping_address) == null ? void 0 : _g.province) ?? "",
12039
+ country_code: ((_h = order.shipping_address) == null ? void 0 : _h.country_code) ?? "",
12040
+ postal_code: ((_i = order.shipping_address) == null ? void 0 : _i.postal_code) ?? "",
12041
+ phone: ((_j = order.shipping_address) == null ? void 0 : _j.phone) ?? ""
12042
+ },
12043
+ resolver: zodResolver(schema$1)
12044
+ });
12045
+ const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12046
+ const { handleSuccess } = useRouteModal();
12047
+ const onSubmit = form.handleSubmit(async (data) => {
12048
+ await mutateAsync(
12049
+ {
12050
+ shipping_address: {
12051
+ first_name: data.first_name,
12052
+ last_name: data.last_name,
12053
+ company: data.company,
12054
+ address_1: data.address_1,
12055
+ address_2: data.address_2,
12056
+ city: data.city,
12057
+ province: data.province,
12058
+ country_code: data.country_code,
12059
+ postal_code: data.postal_code,
12060
+ phone: data.phone
12061
+ }
12062
+ },
12063
+ {
12064
+ onSuccess: () => {
12065
+ handleSuccess();
12066
+ },
12067
+ onError: (error) => {
12068
+ toast.error(error.message);
12069
+ }
12070
+ }
12071
+ );
12072
+ });
12073
+ return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12074
+ KeyboundForm,
12351
12075
  {
12352
- control,
12353
- name: "custom_amount",
12354
- render: ({ field: { onChange, ...field } }) => {
12355
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3", children: [
12356
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
12357
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Custom amount" }),
12358
- /* @__PURE__ */ jsx(Form$2.Hint, { children: "Set a custom amount for the shipping option." })
12076
+ className: "flex flex-1 flex-col overflow-hidden",
12077
+ onSubmit,
12078
+ children: [
12079
+ /* @__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: [
12080
+ /* @__PURE__ */ jsx(
12081
+ Form$2.Field,
12082
+ {
12083
+ control: form.control,
12084
+ name: "country_code",
12085
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12086
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12087
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12088
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12089
+ ] })
12090
+ }
12091
+ ),
12092
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12093
+ /* @__PURE__ */ jsx(
12094
+ Form$2.Field,
12095
+ {
12096
+ control: form.control,
12097
+ name: "first_name",
12098
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12099
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12100
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12101
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12102
+ ] })
12103
+ }
12104
+ ),
12105
+ /* @__PURE__ */ jsx(
12106
+ Form$2.Field,
12107
+ {
12108
+ control: form.control,
12109
+ name: "last_name",
12110
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12111
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12112
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12113
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12114
+ ] })
12115
+ }
12116
+ )
12359
12117
  ] }),
12360
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12361
- CurrencyInput,
12118
+ /* @__PURE__ */ jsx(
12119
+ Form$2.Field,
12120
+ {
12121
+ control: form.control,
12122
+ name: "company",
12123
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12124
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12125
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12126
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12127
+ ] })
12128
+ }
12129
+ ),
12130
+ /* @__PURE__ */ jsx(
12131
+ Form$2.Field,
12132
+ {
12133
+ control: form.control,
12134
+ name: "address_1",
12135
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12136
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12137
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12138
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12139
+ ] })
12140
+ }
12141
+ ),
12142
+ /* @__PURE__ */ jsx(
12143
+ Form$2.Field,
12144
+ {
12145
+ control: form.control,
12146
+ name: "address_2",
12147
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12148
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12149
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12150
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12151
+ ] })
12152
+ }
12153
+ ),
12154
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12155
+ /* @__PURE__ */ jsx(
12156
+ Form$2.Field,
12157
+ {
12158
+ control: form.control,
12159
+ name: "postal_code",
12160
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12161
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12162
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12163
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12164
+ ] })
12165
+ }
12166
+ ),
12167
+ /* @__PURE__ */ jsx(
12168
+ Form$2.Field,
12169
+ {
12170
+ control: form.control,
12171
+ name: "city",
12172
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12173
+ /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
12174
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12175
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12176
+ ] })
12177
+ }
12178
+ )
12179
+ ] }),
12180
+ /* @__PURE__ */ jsx(
12181
+ Form$2.Field,
12182
+ {
12183
+ control: form.control,
12184
+ name: "province",
12185
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12186
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
12187
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12188
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12189
+ ] })
12190
+ }
12191
+ ),
12192
+ /* @__PURE__ */ jsx(
12193
+ Form$2.Field,
12362
12194
  {
12363
- ...field,
12364
- onValueChange: (value) => onChange(value),
12365
- symbol: getNativeSymbol(currencyCode),
12366
- code: currencyCode
12195
+ control: form.control,
12196
+ name: "phone",
12197
+ render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12198
+ /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
12199
+ /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12200
+ /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12201
+ ] })
12367
12202
  }
12368
- ) })
12369
- ] });
12370
- }
12203
+ )
12204
+ ] }) }),
12205
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
12206
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12207
+ /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
12208
+ ] }) })
12209
+ ]
12371
12210
  }
12372
- );
12211
+ ) });
12373
12212
  };
12213
+ const schema$1 = addressSchema;
12374
12214
  const TransferOwnership = () => {
12375
12215
  const { id } = useParams();
12376
12216
  const { draft_order, isPending, isError, error } = useDraftOrder(id, {
@@ -12394,7 +12234,7 @@ const TransferOwnershipForm = ({ order }) => {
12394
12234
  defaultValues: {
12395
12235
  customer_id: order.customer_id || ""
12396
12236
  },
12397
- resolver: zodResolver(schema$1)
12237
+ resolver: zodResolver(schema)
12398
12238
  });
12399
12239
  const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12400
12240
  const { handleSuccess } = useRouteModal();
@@ -12844,13 +12684,57 @@ const Illustration = () => {
12844
12684
  }
12845
12685
  );
12846
12686
  };
12847
- const schema$1 = objectType({
12687
+ const schema = objectType({
12848
12688
  customer_id: stringType().min(1)
12849
12689
  });
12850
- const BillingAddress = () => {
12690
+ const InlineTip = forwardRef(
12691
+ ({ variant = "tip", label, className, children, ...props }, ref) => {
12692
+ const labelValue = label || (variant === "warning" ? "Warning" : "Tip");
12693
+ return /* @__PURE__ */ jsxs(
12694
+ "div",
12695
+ {
12696
+ ref,
12697
+ className: clx(
12698
+ "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
12699
+ className
12700
+ ),
12701
+ ...props,
12702
+ children: [
12703
+ /* @__PURE__ */ jsx(
12704
+ "div",
12705
+ {
12706
+ role: "presentation",
12707
+ className: clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
12708
+ "bg-ui-tag-orange-icon": variant === "warning"
12709
+ })
12710
+ }
12711
+ ),
12712
+ /* @__PURE__ */ jsxs("div", { className: "text-pretty", children: [
12713
+ /* @__PURE__ */ jsxs("strong", { className: "txt-small-plus text-ui-fg-base", children: [
12714
+ labelValue,
12715
+ ":"
12716
+ ] }),
12717
+ " ",
12718
+ children
12719
+ ] })
12720
+ ]
12721
+ }
12722
+ );
12723
+ }
12724
+ );
12725
+ InlineTip.displayName = "InlineTip";
12726
+ const MetadataFieldSchema = objectType({
12727
+ key: stringType(),
12728
+ disabled: booleanType().optional(),
12729
+ value: anyType()
12730
+ });
12731
+ const MetadataSchema = objectType({
12732
+ metadata: arrayType(MetadataFieldSchema)
12733
+ });
12734
+ const Metadata = () => {
12851
12735
  const { id } = useParams();
12852
12736
  const { order, isPending, isError, error } = useOrder(id, {
12853
- fields: "+billing_address"
12737
+ fields: "metadata"
12854
12738
  });
12855
12739
  if (isError) {
12856
12740
  throw error;
@@ -12858,36 +12742,33 @@ const BillingAddress = () => {
12858
12742
  const isReady = !isPending && !!order;
12859
12743
  return /* @__PURE__ */ jsxs(RouteDrawer, { children: [
12860
12744
  /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
12861
- /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Edit Billing Address" }) }),
12862
- /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Edit the billing address for the draft order" }) })
12745
+ /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: "Metadata" }) }),
12746
+ /* @__PURE__ */ jsx(RouteDrawer.Description, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Add metadata to the draft order." }) })
12863
12747
  ] }),
12864
- isReady && /* @__PURE__ */ jsx(BillingAddressForm, { order })
12748
+ !isReady ? /* @__PURE__ */ jsx(PlaceholderInner, {}) : /* @__PURE__ */ jsx(MetadataForm, { orderId: id, metadata: order == null ? void 0 : order.metadata })
12865
12749
  ] });
12866
12750
  };
12867
- const BillingAddressForm = ({ order }) => {
12868
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
12751
+ const METADATA_KEY_LABEL_ID = "metadata-form-key-label";
12752
+ const METADATA_VALUE_LABEL_ID = "metadata-form-value-label";
12753
+ const MetadataForm = ({ orderId, metadata }) => {
12754
+ const { handleSuccess } = useRouteModal();
12755
+ const hasUneditableRows = getHasUneditableRows(metadata);
12756
+ const { mutateAsync, isPending } = useUpdateDraftOrder(orderId);
12869
12757
  const form = useForm({
12870
12758
  defaultValues: {
12871
- first_name: ((_a = order.billing_address) == null ? void 0 : _a.first_name) ?? "",
12872
- last_name: ((_b = order.billing_address) == null ? void 0 : _b.last_name) ?? "",
12873
- company: ((_c = order.billing_address) == null ? void 0 : _c.company) ?? "",
12874
- address_1: ((_d = order.billing_address) == null ? void 0 : _d.address_1) ?? "",
12875
- address_2: ((_e = order.billing_address) == null ? void 0 : _e.address_2) ?? "",
12876
- city: ((_f = order.billing_address) == null ? void 0 : _f.city) ?? "",
12877
- province: ((_g = order.billing_address) == null ? void 0 : _g.province) ?? "",
12878
- country_code: ((_h = order.billing_address) == null ? void 0 : _h.country_code) ?? "",
12879
- postal_code: ((_i = order.billing_address) == null ? void 0 : _i.postal_code) ?? "",
12880
- phone: ((_j = order.billing_address) == null ? void 0 : _j.phone) ?? ""
12759
+ metadata: getDefaultValues(metadata)
12881
12760
  },
12882
- resolver: zodResolver(schema)
12761
+ resolver: zodResolver(MetadataSchema)
12883
12762
  });
12884
- const { mutateAsync, isPending } = useUpdateDraftOrder(order.id);
12885
- const { handleSuccess } = useRouteModal();
12886
- const onSubmit = form.handleSubmit(async (data) => {
12763
+ const handleSubmit = form.handleSubmit(async (data) => {
12764
+ const parsedData = parseValues(data);
12887
12765
  await mutateAsync(
12888
- { billing_address: data },
12766
+ {
12767
+ metadata: parsedData
12768
+ },
12889
12769
  {
12890
12770
  onSuccess: () => {
12771
+ toast.success("Metadata updated");
12891
12772
  handleSuccess();
12892
12773
  },
12893
12774
  onError: (error) => {
@@ -12896,147 +12777,266 @@ const BillingAddressForm = ({ order }) => {
12896
12777
  }
12897
12778
  );
12898
12779
  });
12780
+ const { fields, insert, remove } = useFieldArray({
12781
+ control: form.control,
12782
+ name: "metadata"
12783
+ });
12784
+ function deleteRow(index) {
12785
+ remove(index);
12786
+ if (fields.length === 1) {
12787
+ insert(0, {
12788
+ key: "",
12789
+ value: "",
12790
+ disabled: false
12791
+ });
12792
+ }
12793
+ }
12794
+ function insertRow(index, position) {
12795
+ insert(index + (position === "above" ? 0 : 1), {
12796
+ key: "",
12797
+ value: "",
12798
+ disabled: false
12799
+ });
12800
+ }
12899
12801
  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
12900
12802
  KeyboundForm,
12901
12803
  {
12804
+ onSubmit: handleSubmit,
12902
12805
  className: "flex flex-1 flex-col overflow-hidden",
12903
- onSubmit,
12904
12806
  children: [
12905
- /* @__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: [
12906
- /* @__PURE__ */ jsx(
12907
- Form$2.Field,
12908
- {
12909
- control: form.control,
12910
- name: "country_code",
12911
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12912
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Country" }),
12913
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(CountrySelect, { ...field }) }),
12914
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12915
- ] })
12916
- }
12917
- ),
12918
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12919
- /* @__PURE__ */ jsx(
12920
- Form$2.Field,
12921
- {
12922
- control: form.control,
12923
- name: "first_name",
12924
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12925
- /* @__PURE__ */ jsx(Form$2.Label, { children: "First name" }),
12926
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12927
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12928
- ] })
12929
- }
12930
- ),
12931
- /* @__PURE__ */ jsx(
12932
- Form$2.Field,
12933
- {
12934
- control: form.control,
12935
- name: "last_name",
12936
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12937
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Last name" }),
12938
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12939
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12940
- ] })
12941
- }
12942
- )
12943
- ] }),
12944
- /* @__PURE__ */ jsx(
12945
- Form$2.Field,
12946
- {
12947
- control: form.control,
12948
- name: "company",
12949
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12950
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Company" }),
12951
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12952
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12953
- ] })
12954
- }
12955
- ),
12956
- /* @__PURE__ */ jsx(
12957
- Form$2.Field,
12958
- {
12959
- control: form.control,
12960
- name: "address_1",
12961
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12962
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Address" }),
12963
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12964
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12965
- ] })
12966
- }
12967
- ),
12968
- /* @__PURE__ */ jsx(
12969
- Form$2.Field,
12970
- {
12971
- control: form.control,
12972
- name: "address_2",
12973
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12974
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Apartment, suite, etc." }),
12975
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12976
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12977
- ] })
12978
- }
12979
- ),
12980
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
12981
- /* @__PURE__ */ jsx(
12982
- Form$2.Field,
12983
- {
12984
- control: form.control,
12985
- name: "postal_code",
12986
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12987
- /* @__PURE__ */ jsx(Form$2.Label, { children: "Postal code" }),
12988
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
12989
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
12990
- ] })
12807
+ /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex flex-1 flex-col gap-y-8 overflow-y-auto", children: [
12808
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base shadow-elevation-card-rest grid grid-cols-1 divide-y rounded-lg", children: [
12809
+ /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle grid grid-cols-2 divide-x rounded-t-lg", children: [
12810
+ /* @__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" }) }),
12811
+ /* @__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" }) })
12812
+ ] }),
12813
+ fields.map((field, index) => {
12814
+ const isDisabled = field.disabled || false;
12815
+ let placeholder = "-";
12816
+ if (typeof field.value === "object") {
12817
+ placeholder = "{ ... }";
12991
12818
  }
12992
- ),
12993
- /* @__PURE__ */ jsx(
12994
- Form$2.Field,
12995
- {
12996
- control: form.control,
12997
- name: "city",
12998
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
12999
- /* @__PURE__ */ jsx(Form$2.Label, { children: "City" }),
13000
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13001
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13002
- ] })
12819
+ if (Array.isArray(field.value)) {
12820
+ placeholder = "[ ... ]";
13003
12821
  }
13004
- )
12822
+ return /* @__PURE__ */ jsx(
12823
+ ConditionalTooltip,
12824
+ {
12825
+ showTooltip: isDisabled,
12826
+ content: "This row is disabled because it contains non-primitive data.",
12827
+ children: /* @__PURE__ */ jsxs("div", { className: "group/table relative", children: [
12828
+ /* @__PURE__ */ jsxs(
12829
+ "div",
12830
+ {
12831
+ className: clx("grid grid-cols-2 divide-x", {
12832
+ "overflow-hidden rounded-b-lg": index === fields.length - 1
12833
+ }),
12834
+ children: [
12835
+ /* @__PURE__ */ jsx(
12836
+ Form$2.Field,
12837
+ {
12838
+ control: form.control,
12839
+ name: `metadata.${index}.key`,
12840
+ render: ({ field: field2 }) => {
12841
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12842
+ GridInput,
12843
+ {
12844
+ "aria-labelledby": METADATA_KEY_LABEL_ID,
12845
+ ...field2,
12846
+ disabled: isDisabled,
12847
+ placeholder: "Key"
12848
+ }
12849
+ ) }) });
12850
+ }
12851
+ }
12852
+ ),
12853
+ /* @__PURE__ */ jsx(
12854
+ Form$2.Field,
12855
+ {
12856
+ control: form.control,
12857
+ name: `metadata.${index}.value`,
12858
+ render: ({ field: { value, ...field2 } }) => {
12859
+ return /* @__PURE__ */ jsx(Form$2.Item, { children: /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(
12860
+ GridInput,
12861
+ {
12862
+ "aria-labelledby": METADATA_VALUE_LABEL_ID,
12863
+ ...field2,
12864
+ value: isDisabled ? placeholder : value,
12865
+ disabled: isDisabled,
12866
+ placeholder: "Value"
12867
+ }
12868
+ ) }) });
12869
+ }
12870
+ }
12871
+ )
12872
+ ]
12873
+ }
12874
+ ),
12875
+ /* @__PURE__ */ jsxs(DropdownMenu, { children: [
12876
+ /* @__PURE__ */ jsx(
12877
+ DropdownMenu.Trigger,
12878
+ {
12879
+ className: clx(
12880
+ "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
12881
+ {
12882
+ hidden: isDisabled
12883
+ }
12884
+ ),
12885
+ disabled: isDisabled,
12886
+ asChild: true,
12887
+ children: /* @__PURE__ */ jsx(IconButton, { size: "2xsmall", children: /* @__PURE__ */ jsx(EllipsisVertical, {}) })
12888
+ }
12889
+ ),
12890
+ /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
12891
+ /* @__PURE__ */ jsxs(
12892
+ DropdownMenu.Item,
12893
+ {
12894
+ className: "gap-x-2",
12895
+ onClick: () => insertRow(index, "above"),
12896
+ children: [
12897
+ /* @__PURE__ */ jsx(ArrowUpMini, { className: "text-ui-fg-subtle" }),
12898
+ "Insert row above"
12899
+ ]
12900
+ }
12901
+ ),
12902
+ /* @__PURE__ */ jsxs(
12903
+ DropdownMenu.Item,
12904
+ {
12905
+ className: "gap-x-2",
12906
+ onClick: () => insertRow(index, "below"),
12907
+ children: [
12908
+ /* @__PURE__ */ jsx(ArrowDownMini, { className: "text-ui-fg-subtle" }),
12909
+ "Insert row below"
12910
+ ]
12911
+ }
12912
+ ),
12913
+ /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
12914
+ /* @__PURE__ */ jsxs(
12915
+ DropdownMenu.Item,
12916
+ {
12917
+ className: "gap-x-2",
12918
+ onClick: () => deleteRow(index),
12919
+ children: [
12920
+ /* @__PURE__ */ jsx(Trash, { className: "text-ui-fg-subtle" }),
12921
+ "Delete row"
12922
+ ]
12923
+ }
12924
+ )
12925
+ ] })
12926
+ ] })
12927
+ ] })
12928
+ },
12929
+ field.id
12930
+ );
12931
+ })
13005
12932
  ] }),
13006
- /* @__PURE__ */ jsx(
13007
- Form$2.Field,
13008
- {
13009
- control: form.control,
13010
- name: "province",
13011
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13012
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Province / State" }),
13013
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13014
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13015
- ] })
13016
- }
13017
- ),
13018
- /* @__PURE__ */ jsx(
13019
- Form$2.Field,
13020
- {
13021
- control: form.control,
13022
- name: "phone",
13023
- render: ({ field }) => /* @__PURE__ */ jsxs(Form$2.Item, { children: [
13024
- /* @__PURE__ */ jsx(Form$2.Label, { optional: true, children: "Phone" }),
13025
- /* @__PURE__ */ jsx(Form$2.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
13026
- /* @__PURE__ */ jsx(Form$2.ErrorMessage, {})
13027
- ] })
13028
- }
13029
- )
13030
- ] }) }),
13031
- /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
13032
- /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
12933
+ 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." })
12934
+ ] }),
12935
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12936
+ /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: "Cancel" }) }),
13033
12937
  /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: "Save" })
13034
12938
  ] }) })
13035
12939
  ]
13036
12940
  }
13037
12941
  ) });
13038
12942
  };
13039
- const schema = addressSchema;
12943
+ const GridInput = forwardRef(({ className, ...props }, ref) => {
12944
+ return /* @__PURE__ */ jsx(
12945
+ "input",
12946
+ {
12947
+ ref,
12948
+ ...props,
12949
+ autoComplete: "off",
12950
+ className: clx(
12951
+ "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",
12952
+ className
12953
+ )
12954
+ }
12955
+ );
12956
+ });
12957
+ GridInput.displayName = "MetadataForm.GridInput";
12958
+ const PlaceholderInner = () => {
12959
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
12960
+ /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[148ox] w-full rounded-lg" }) }),
12961
+ /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
12962
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }),
12963
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" })
12964
+ ] }) })
12965
+ ] });
12966
+ };
12967
+ const EDITABLE_TYPES = ["string", "number", "boolean"];
12968
+ function getDefaultValues(metadata) {
12969
+ if (!metadata || !Object.keys(metadata).length) {
12970
+ return [
12971
+ {
12972
+ key: "",
12973
+ value: "",
12974
+ disabled: false
12975
+ }
12976
+ ];
12977
+ }
12978
+ return Object.entries(metadata).map(([key, value]) => {
12979
+ if (!EDITABLE_TYPES.includes(typeof value)) {
12980
+ return {
12981
+ key,
12982
+ value,
12983
+ disabled: true
12984
+ };
12985
+ }
12986
+ let stringValue = value;
12987
+ if (typeof value !== "string") {
12988
+ stringValue = JSON.stringify(value);
12989
+ }
12990
+ return {
12991
+ key,
12992
+ value: stringValue,
12993
+ original_key: key
12994
+ };
12995
+ });
12996
+ }
12997
+ function parseValues(values) {
12998
+ const metadata = values.metadata;
12999
+ const isEmpty = !metadata.length || metadata.length === 1 && !metadata[0].key && !metadata[0].value;
13000
+ if (isEmpty) {
13001
+ return null;
13002
+ }
13003
+ const update = {};
13004
+ metadata.forEach((field) => {
13005
+ let key = field.key;
13006
+ let value = field.value;
13007
+ const disabled = field.disabled;
13008
+ if (!key || !value) {
13009
+ return;
13010
+ }
13011
+ if (disabled) {
13012
+ update[key] = value;
13013
+ return;
13014
+ }
13015
+ key = key.trim();
13016
+ value = value.trim();
13017
+ if (value === "true") {
13018
+ update[key] = true;
13019
+ } else if (value === "false") {
13020
+ update[key] = false;
13021
+ } else {
13022
+ const parsedNumber = parseFloat(value);
13023
+ if (!isNaN(parsedNumber)) {
13024
+ update[key] = parsedNumber;
13025
+ } else {
13026
+ update[key] = value;
13027
+ }
13028
+ }
13029
+ });
13030
+ return update;
13031
+ }
13032
+ function getHasUneditableRows(metadata) {
13033
+ if (!metadata) {
13034
+ return false;
13035
+ }
13036
+ return Object.values(metadata).some(
13037
+ (value) => !EDITABLE_TYPES.includes(typeof value)
13038
+ );
13039
+ }
13040
13040
  const widgetModule = { widgets: [] };
13041
13041
  const routeModule = {
13042
13042
  routes: [
@@ -13066,17 +13066,21 @@ const routeModule = {
13066
13066
  path: "/draft-orders/:id/email"
13067
13067
  },
13068
13068
  {
13069
- Component: Items,
13070
- path: "/draft-orders/:id/items"
13069
+ Component: BillingAddress,
13070
+ path: "/draft-orders/:id/billing-address"
13071
13071
  },
13072
13072
  {
13073
- Component: Metadata,
13074
- path: "/draft-orders/:id/metadata"
13073
+ Component: Items,
13074
+ path: "/draft-orders/:id/items"
13075
13075
  },
13076
13076
  {
13077
13077
  Component: Promotions,
13078
13078
  path: "/draft-orders/:id/promotions"
13079
13079
  },
13080
+ {
13081
+ Component: Shipping,
13082
+ path: "/draft-orders/:id/shipping"
13083
+ },
13080
13084
  {
13081
13085
  Component: SalesChannel,
13082
13086
  path: "/draft-orders/:id/sales-channel"
@@ -13085,17 +13089,13 @@ const routeModule = {
13085
13089
  Component: ShippingAddress,
13086
13090
  path: "/draft-orders/:id/shipping-address"
13087
13091
  },
13088
- {
13089
- Component: Shipping,
13090
- path: "/draft-orders/:id/shipping"
13091
- },
13092
13092
  {
13093
13093
  Component: TransferOwnership,
13094
13094
  path: "/draft-orders/:id/transfer-ownership"
13095
13095
  },
13096
13096
  {
13097
- Component: BillingAddress,
13098
- path: "/draft-orders/:id/billing-address"
13097
+ Component: Metadata,
13098
+ path: "/draft-orders/:id/metadata"
13099
13099
  }
13100
13100
  ]
13101
13101
  }