@medusajs/dashboard 0.0.1

package/src/routes/draft-orders/draft-order-create/components/create-draft-order-form/create-draft-order-details/create-draft-order-items-details.tsx

@@ -0,0 +1,321 @@
+import { Trash } from "@medusajs/icons"
+import { Button, CurrencyInput, Input, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+import { ActionMenu } from "../../../../../../components/common/action-menu"
+import { ConditionalTooltip } from "../../../../../../components/common/conditional-tooltip"
+import { Form } from "../../../../../../components/common/form"
+import { Thumbnail } from "../../../../../../components/common/thumbnail"
+import { getStylizedAmount } from "../../../../../../lib/money-amount-helpers"
+import { View } from "../constants"
+import { useCreateDraftOrder } from "../hooks"
+
+export const CreateDraftOrderItemsDetails = () => {
+  const { t } = useTranslation()
+
+  const { region, variants, custom, form, onOpenDrawer } = useCreateDraftOrder()
+  const { currency_code, currency } = region || {}
+
+  return (
+    <div className="flex flex-col gap-y-8">
+      <fieldset className="flex flex-col gap-y-4">
+        <Form.Field
+          control={form.control}
+          name="existing_items"
+          render={({ field: { name } }) => {
+            return (
+              <Form.Item className="flex flex-col gap-y-4">
+                <div>
+                  <Form.Label>
+                    {t("draftOrders.create.existingItemsLabel")}
+                  </Form.Label>
+                  <Form.Hint>
+                    {t("draftOrders.create.existingItemsHint")}
+                  </Form.Hint>
+                </div>
+                {variants.items.length > 0 ? (
+                  variants.items.map((item, index) => {
+                    return (
+                      <div
+                        key={item.ei_id}
+                        className="bg-ui-bg-component shadow-elevation-card-rest divide-y rounded-xl"
+                      >
+                        <div className="flex items-center justify-between p-3">
+                          <div className="flex items-center gap-x-2">
+                            <div className="shadow-borders-base size-fit overflow-hidden rounded-[4px]">
+                              <Thumbnail src={item.thumbnail} />
+                            </div>
+                            <div>
+                              <div className="flex items-center gap-x-1">
+                                <Text
+                                  size="small"
+                                  leading="compact"
+                                  weight="plus"
+                                >
+                                  {item.product_title}
+                                </Text>
+                                {item.sku && (
+                                  <Text
+                                    size="small"
+                                    leading="compact"
+                                    className="text-ui-fg-subtle"
+                                  >
+                                    ({item.sku})
+                                  </Text>
+                                )}
+                              </div>
+                              <Text
+                                size="small"
+                                leading="compact"
+                                className="text-ui-fg-subtle"
+                              >
+                                {item.variant_title}
+                              </Text>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-x-3">
+                            <Text
+                              size="small"
+                              leading="compact"
+                              className="text-ui-fg-subtle"
+                            >
+                              {getStylizedAmount(
+                                item.unit_price,
+                                currency_code!
+                              )}
+                            </Text>
+                            <ActionMenu
+                              groups={[
+                                {
+                                  actions: [
+                                    {
+                                      label: t("actions.remove"),
+                                      onClick: () => variants.remove(index),
+                                      icon: <Trash />,
+                                    },
+                                  ],
+                                },
+                              ]}
+                            />
+                          </div>
+                        </div>
+                        <fieldset className="grid grid-cols-1 gap-3 p-3 md:grid-cols-2">
+                          <Form.Field
+                            control={form.control}
+                            name={`${name}.${index}.quantity`}
+                            render={({ field: { onChange, ...field } }) => {
+                              return (
+                                <Form.Item>
+                                  <Form.Label>
+                                    {t("fields.quantity")}
+                                  </Form.Label>
+                                  <Form.Control>
+                                    <Input
+                                      className="!bg-ui-bg-field-component hover:!bg-ui-bg-field-component-hover"
+                                      type="number"
+                                      onChange={(e) =>
+                                        onChange(Number(e.target.value))
+                                      }
+                                      {...field}
+                                    />
+                                  </Form.Control>
+                                </Form.Item>
+                              )
+                            }}
+                          />
+                          <Form.Field
+                            control={form.control}
+                            name={`${name}.${index}.custom_unit_price`}
+                            render={({ field: { onChange, ...field } }) => {
+                              return (
+                                <Form.Item>
+                                  <Form.Label optional>
+                                    {t(
+                                      "draftOrders.create.unitPriceOverrideLabel"
+                                    )}
+                                  </Form.Label>
+                                  <Form.Control>
+                                    <CurrencyInput
+                                      className="!bg-ui-bg-field-component hover:!bg-ui-bg-field-component-hover"
+                                      code={currency_code!}
+                                      symbol={currency?.symbol_native!}
+                                      onValueChange={onChange}
+                                      {...field}
+                                    />
+                                  </Form.Control>
+                                  <Form.ErrorMessage />
+                                </Form.Item>
+                              )
+                            }}
+                          />
+                        </fieldset>
+                      </div>
+                    )
+                  })
+                ) : (
+                  <div className="flex items-center justify-center px-2 py-3">
+                    <Text
+                      size="small"
+                      leading="compact"
+                      className="text-ui-fg-muted"
+                    >
+                      {t("draftOrders.create.noExistingItemsAddedLabel")}
+                    </Text>
+                  </div>
+                )}
+                <div className="flex items-center justify-end">
+                  <ConditionalTooltip
+                    content={t("draftOrders.create.chooseRegionTooltip")}
+                    showTooltip={!region}
+                  >
+                    <Button
+                      disabled={!region}
+                      variant="secondary"
+                      size="small"
+                      type="button"
+                      onClick={() => onOpenDrawer(View.EXISTING_ITEMS)}
+                    >
+                      {t("draftOrders.create.addExistingItemsAction")}
+                    </Button>
+                  </ConditionalTooltip>
+                </div>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+      </fieldset>
+      <div className="md:grid-grid-cols-2 grid grid-cols-1 gap-3 p-3">
+        <Form.Field
+          control={form.control}
+          name="custom_items"
+          render={({ field: { name } }) => {
+            return (
+              <Form.Item className="flex flex-col gap-y-4">
+                <div>
+                  <Form.Label>
+                    {t("draftOrders.create.customItemsLabel")}
+                  </Form.Label>
+                  <Form.Hint>
+                    {t("draftOrders.create.customItemsHint")}
+                  </Form.Hint>
+                </div>
+                {custom.items.length > 0 ? (
+                  custom.items.map((item, index) => {
+                    return (
+                      <div
+                        key={item.ci_id}
+                        className="bg-ui-bg-component shadow-elevation-card-rest divide-y rounded-xl"
+                      >
+                        <div className="flex items-center justify-between p-3">
+                          <div>
+                            <div className="flex items-center gap-x-1">
+                              <Text
+                                size="small"
+                                leading="compact"
+                                weight="plus"
+                              >
+                                {item.title}
+                              </Text>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center">
+                            <ActionMenu
+                              groups={[
+                                {
+                                  actions: [
+                                    {
+                                      label: t("actions.remove"),
+                                      onClick: () => custom.remove(index),
+                                      icon: <Trash />,
+                                    },
+                                  ],
+                                },
+                              ]}
+                            />
+                          </div>
+                        </div>
+                        <fieldset className="grid grid-cols-1 gap-3 p-3 md:grid-cols-2">
+                          <Form.Field
+                            control={form.control}
+                            name={`${name}.${index}.quantity`}
+                            render={({ field }) => {
+                              return (
+                                <Form.Item>
+                                  <Form.Label>
+                                    {t("fields.quantity")}
+                                  </Form.Label>
+                                  <Form.Control>
+                                    <Input
+                                      className="!bg-ui-bg-field-component hover:!bg-ui-bg-field-component-hover"
+                                      type="number"
+                                      {...field}
+                                    />
+                                  </Form.Control>
+                                </Form.Item>
+                              )
+                            }}
+                          />
+                          <Form.Field
+                            control={form.control}
+                            name={`${name}.${index}.unit_price`}
+                            render={({ field: { onChange, ...field } }) => {
+                              return (
+                                <Form.Item>
+                                  <Form.Label>
+                                    {t("fields.unitPrice")}
+                                  </Form.Label>
+                                  <Form.Control>
+                                    <CurrencyInput
+                                      className="!bg-ui-bg-field-component hover:!bg-ui-bg-field-component-hover"
+                                      code={currency_code!}
+                                      symbol={currency?.symbol_native!}
+                                      onValueChange={onChange}
+                                      {...field}
+                                    />
+                                  </Form.Control>
+                                </Form.Item>
+                              )
+                            }}
+                          />
+                        </fieldset>
+                      </div>
+                    )
+                  })
+                ) : (
+                  <div className="flex items-center justify-center px-2 py-3">
+                    <Text
+                      size="small"
+                      leading="compact"
+                      className="text-ui-fg-muted"
+                    >
+                      {t("draftOrders.create.noCustomItemsAddedLabel")}
+                    </Text>
+                  </div>
+                )}
+                <div className="flex items-center justify-end">
+                  <ConditionalTooltip
+                    content={t("draftOrders.create.chooseRegionTooltip")}
+                    showTooltip={!region}
+                  >
+                    <Button
+                      variant="secondary"
+                      size="small"
+                      type="button"
+                      disabled={!region}
+                      onClick={() => onOpenDrawer(View.CUSTOM_ITEMS)}
+                    >
+                      {t("draftOrders.create.addCustomItemAction")}
+                    </Button>
+                  </ConditionalTooltip>
+                </div>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/routes/draft-orders/draft-order-create/components/create-draft-order-form/create-draft-order-details/create-draft-order-region-details.tsx

@@ -0,0 +1,114 @@
+import { Select } from "@medusajs/ui"
+import { useAdminRegions, useMedusa } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { json } from "react-router-dom"
+
+import { useWatch } from "react-hook-form"
+import { Form } from "../../../../../../components/common/form"
+import { useCreateDraftOrder } from "../hooks"
+
+export const CreateDraftOrderRegionDetails = () => {
+  const { t } = useTranslation()
+  const {
+    form,
+    setRegion,
+    variants: { rebase },
+  } = useCreateDraftOrder()
+  const { client } = useMedusa()
+
+  const existingItems = useWatch({
+    control: form.control,
+    name: "existing_items",
+  })
+
+  const { regions, isLoading, isError, error } = useAdminRegions({
+    limit: 1000,
+    fields: "id,name,currency_code",
+  })
+
+  const handleRebaseUnitPrices = async (regionId: string) => {
+    if (!existingItems?.length) {
+      return
+    }
+
+    const { variants } = await client.admin.variants
+      .list({
+        region_id: regionId,
+        id: existingItems.map((i) => i.variant_id),
+      })
+      .catch((_err) => {
+        // Show toast with error message
+        return { variants: [] }
+      })
+
+    rebase(variants)
+  }
+
+  const handleResetShippingDetails = () => {
+    form.resetField("shipping_method")
+    form.resetField("shipping_address")
+    form.resetField("billing_address")
+  }
+
+  const handleRegionChange = (regId: string) => {
+    const region = regions?.find((r) => r.id === regId)
+
+    if (!region) {
+      throw json({ message: "Region not found" }, 400)
+    }
+
+    setRegion(region)
+  }
+
+  const onValueChange = (fn: (...event: any[]) => void) => {
+    return async (id: string) => {
+      fn(id)
+      await handleRebaseUnitPrices(id)
+      handleResetShippingDetails()
+      handleRegionChange(id)
+    }
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <fieldset className="grid grid-cols-2 gap-4">
+      <Form.Field
+        control={form.control}
+        name="region_id"
+        render={({
+          field: { ref, onChange, disabled, ...field },
+          fieldState: { error },
+        }) => {
+          return (
+            <Form.Item>
+              <Form.Label className="!h2-core">{t("fields.region")}</Form.Label>
+              <Form.Hint>{t("draftOrders.create.chooseRegionHint")}</Form.Hint>
+              <Form.Control>
+                <Select
+                  {...field}
+                  onValueChange={onValueChange(onChange)}
+                  disabled={isLoading || disabled}
+                >
+                  <Select.Trigger aria-invalid={!!error} ref={ref}>
+                    <Select.Value />
+                  </Select.Trigger>
+                  <Select.Content>
+                    {regions?.map((r) => (
+                      <Select.Item key={r.id} value={r.id}>
+                        {r.name}
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select>
+              </Form.Control>
+              <Form.ErrorMessage />
+            </Form.Item>
+          )
+        }}
+      />
+    </fieldset>
+  )
+}

package/src/routes/draft-orders/draft-order-create/components/create-draft-order-form/create-draft-order-details/create-draft-order-shipping-method-details.tsx

@@ -0,0 +1,185 @@
+import { useInfiniteQuery } from "@tanstack/react-query"
+import debounce from "lodash/debounce"
+import { useMedusa } from "medusa-react"
+import { useCallback, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import { ShippingOption } from "@medusajs/medusa"
+import { CurrencyInput, Heading, Input } from "@medusajs/ui"
+import { json } from "react-router-dom"
+import { ConditionalTooltip } from "../../../../../../components/common/conditional-tooltip"
+import { Form } from "../../../../../../components/common/form"
+import { Combobox } from "../../../../../../components/inputs/combobox"
+import { getLocaleAmount } from "../../../../../../lib/money-amount-helpers"
+import { useCreateDraftOrder } from "../hooks"
+
+export const CreateDraftOrderShippingMethodDetails = () => {
+  const [query, setQuery] = useState("")
+  const [debouncedQuery, setDebouncedQuery] = useState("")
+
+  const { t } = useTranslation()
+  const { form, region } = useCreateDraftOrder()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedUpdate = useCallback(
+    debounce((query) => setDebouncedQuery(query), 300),
+    []
+  )
+
+  useEffect(() => {
+    debouncedUpdate(query)
+
+    return () => debouncedUpdate.cancel()
+  }, [query, debouncedUpdate])
+
+  const { client } = useMedusa()
+
+  const { data, fetchNextPage, isFetchingNextPage } = useInfiniteQuery(
+    ["shipping_options", region?.id, debouncedQuery],
+    async ({ pageParam = 0 }) => {
+      const res = await client.admin.shippingOptions.list({
+        q: debouncedQuery || undefined,
+        limit: 10,
+        offset: pageParam,
+        is_return: false,
+        region_id: region?.id,
+      })
+      return res
+    },
+    {
+      getNextPageParam: (lastPage) => {
+        const moreCustomersExist =
+          lastPage.count > lastPage.offset + lastPage.limit
+        return moreCustomersExist ? lastPage.offset + lastPage.limit : undefined
+      },
+      enabled: !!region?.id,
+      keepPreviousData: true,
+    }
+  )
+
+  const createLabel = (shippingOption?: ShippingOption) => {
+    if (!shippingOption) {
+      return ""
+    }
+
+    return `${shippingOption.name} - ${getLocaleAmount(
+      shippingOption.amount || 0,
+      region?.currency_code!
+    )}`
+  }
+
+  const options =
+    data?.pages
+      .flatMap((page) => page.shipping_options)
+      .map((so) => ({
+        label: createLabel(so),
+        value: so.id,
+      })) || []
+
+  const handleShippingMethodChange = (optionId: string | undefined) => {
+    if (!optionId) {
+      return
+    }
+
+    const option = data?.pages
+      .flatMap((page) => page.shipping_options)
+      .find((so) => so.id === optionId)
+
+    if (!option) {
+      throw json({ message: "Shipping option not found" }, 400)
+    }
+
+    form.setValue("shipping_method.option_title", option.name, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+    form.setValue("shipping_method.amount", option.amount || 0, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      <Heading level="h2">{t("fields.shipping")}</Heading>
+      <fieldset className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <Form.Field
+          control={form.control}
+          name="shipping_method.option_id"
+          render={({ field: { onChange, disabled, ...field } }) => {
+            return (
+              <ConditionalTooltip
+                showTooltip={!region}
+                content={t("draftOrders.create.chooseRegionTooltip")}
+              >
+                <Form.Item>
+                  <div>
+                    <Form.Label>
+                      {t("draftOrders.create.shippingOptionLabel")}
+                    </Form.Label>
+                    <Form.Hint>
+                      {t("draftOrders.create.shippingOptionHint")}
+                    </Form.Hint>
+                  </div>
+                  <Form.Control>
+                    <Combobox
+                      {...field}
+                      onChange={(val) => {
+                        handleShippingMethodChange(val)
+                        onChange(val)
+                      }}
+                      disabled={!region || disabled}
+                      searchValue={query}
+                      onSearchValueChange={setQuery}
+                      fetchNextPage={fetchNextPage}
+                      isFetchingNextPage={isFetchingNextPage}
+                      options={options}
+                      autoComplete="false"
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              </ConditionalTooltip>
+            )
+          }}
+        />
+        <Form.Field
+          control={form.control}
+          name="shipping_method.custom_amount"
+          render={({ field: { onChange, ...field } }) => {
+            return (
+              <ConditionalTooltip
+                showTooltip={!region}
+                content={t("draftOrders.create.chooseRegionTooltip")}
+              >
+                <Form.Item>
+                  <div>
+                    <Form.Label optional>
+                      {t("draftOrders.create.shippingPriceOverrideLabel")}
+                    </Form.Label>
+                    <Form.Hint>
+                      {t("draftOrders.create.shippingPriceOverrideHint")}
+                    </Form.Hint>
+                  </div>
+                  <Form.Control>
+                    {region ? (
+                      <CurrencyInput
+                        {...field}
+                        onValueChange={onChange}
+                        code={region.currency.code}
+                        symbol={region.currency.symbol_native}
+                      />
+                    ) : (
+                      <Input disabled />
+                    )}
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              </ConditionalTooltip>
+            )
+          }}
+        />
+      </fieldset>
+    </div>
+  )
+}

package/src/routes/draft-orders/draft-order-create/components/create-draft-order-form/create-draft-order-details/index.ts

@@ -0,0 +1 @@
+export * from "./create-draft-order-details"