@medusajs/dashboard 0.0.1

package/src/routes/discounts/discount-edit-details/components/edit-discount-form/edit-discount-details-form.tsx

@@ -0,0 +1,237 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Discount } from "@medusajs/medusa"
+import {
+  Button,
+  CurrencyInput,
+  Input,
+  Select,
+  Text,
+  Textarea,
+} from "@medusajs/ui"
+import { useAdminRegions, useAdminUpdateDiscount } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { Trans, useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { Form } from "../../../../../components/common/form"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { PercentageInput } from "../../../../../components/inputs/percentage-input"
+import {
+  RouteDrawer,
+  useRouteModal,
+} from "../../../../../components/route-modal"
+import { getCurrencySymbol } from "../../../../../lib/currencies"
+import {
+  getDbAmount,
+  getPresentationalAmount,
+} from "../../../../../lib/money-amount-helpers"
+
+type EditDiscountFormProps = {
+  discount: Discount
+}
+
+const EditDiscountSchema = zod.object({
+  code: zod.string().min(1),
+  description: zod.string(),
+  value: zod.number(),
+  regions: zod.array(zod.string()),
+})
+
+export const EditDiscountDetailsForm = ({
+  discount,
+}: EditDiscountFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const { regions } = useAdminRegions()
+
+  const isFixedDiscount = discount.rule.type === "fixed"
+  const isFreeShipping = discount.rule.type === "free_shipping"
+
+  const form = useForm<zod.infer<typeof EditDiscountSchema>>({
+    defaultValues: {
+      code: discount.code,
+      description: discount.rule.description || "",
+      regions: discount.regions.map((r) => r.id),
+      value: isFixedDiscount
+        ? getPresentationalAmount(
+            discount.rule.value,
+            discount.regions[0].currency_code
+          )
+        : discount.rule.value,
+    },
+    resolver: zodResolver(EditDiscountSchema),
+  })
+
+  const { mutateAsync, isLoading } = useAdminUpdateDiscount(discount.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        code: data.code,
+        regions: data.regions,
+        rule: {
+          id: discount.rule.id,
+          description: data.description,
+          value: isFixedDiscount
+            ? getDbAmount(data.value, discount.regions[0].currency_code)
+            : (data.value as number),
+        },
+      },
+      {
+        onSuccess: () => {
+          handleSuccess()
+        },
+      }
+    )
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <form onSubmit={handleSubmit} className="flex h-full flex-col">
+        <RouteDrawer.Body>
+          <div className="flex h-full flex-col gap-y-8">
+            <div className="flex flex-col gap-y-4">
+              <Form.Field
+                control={form.control}
+                name="code"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>{t("fields.code")}</Form.Label>
+                      <Form.Control>
+                        <Input {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+              <Text
+                size="small"
+                leading="compact"
+                className="text-ui-fg-subtle"
+              >
+                <Trans
+                  t={t}
+                  i18nKey="discounts.titleHint"
+                  components={[<br key="break" />]}
+                />
+              </Text>
+            </div>
+
+            <Form.Field
+              control={form.control}
+              name="regions"
+              render={({ field: { onChange, value, ref, ...field } }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("discounts.chooseValidRegions")}</Form.Label>
+                    <Form.Control>
+                      {isFixedDiscount ? (
+                        <Select
+                          value={value[0]}
+                          onValueChange={(v) => onChange([v])}
+                          {...field}
+                        >
+                          <Select.Trigger 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>
+                      ) : (
+                        <Combobox
+                          options={(regions || []).map((r) => ({
+                            label: r.name,
+                            value: r.id,
+                          }))}
+                          value={value}
+                          onChange={onChange}
+                          {...field}
+                        />
+                      )}
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+
+            {!isFreeShipping && (
+              <Form.Field
+                control={form.control}
+                name="value"
+                render={({ field: { onChange, ...field } }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>
+                        {isFixedDiscount
+                          ? t("fields.amount")
+                          : t("fields.percentage")}
+                      </Form.Label>
+                      <Form.Control>
+                        {isFixedDiscount ? (
+                          <CurrencyInput
+                            min={0}
+                            onValueChange={onChange}
+                            code={discount.regions[0].currency_code}
+                            symbol={getCurrencySymbol(
+                              discount.regions[0].currency_code
+                            )}
+                            {...field}
+                          />
+                        ) : (
+                          <PercentageInput
+                            onChange={onChange}
+                            min={0}
+                            max={100}
+                            {...field}
+                          />
+                        )}
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            )}
+
+            <Form.Field
+              control={form.control}
+              name="description"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.description")}</Form.Label>
+                    <Form.Control>
+                      <Textarea {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+          </div>
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button size="small" type="submit" isLoading={isLoading}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </form>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/discounts/discount-edit-details/components/edit-discount-form/index.ts

@@ -0,0 +1 @@
+export * from "./edit-discount-details-form"

package/src/routes/discounts/discount-edit-details/discount-edit-details.tsx

@@ -0,0 +1,29 @@
+import { Heading } from "@medusajs/ui"
+import { useAdminDiscount } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+
+import { RouteDrawer } from "../../../components/route-modal"
+import { EditDiscountDetailsForm } from "./components/edit-discount-form"
+
+export const DiscountEditDetails = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { discount, isLoading, isError, error } = useAdminDiscount(id!)
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("discounts.editDiscountDetails")}</Heading>
+      </RouteDrawer.Header>
+      {!isLoading && discount && (
+        <EditDiscountDetailsForm discount={discount} />
+      )}
+    </RouteDrawer>
+  )
+}

package/src/routes/discounts/discount-edit-details/index.ts

@@ -0,0 +1 @@
+export { DiscountEditDetails as Component } from "./discount-edit-details"

package/src/routes/discounts/discount-list/components/discount-list-table/discount-list-table.tsx

@@ -0,0 +1,145 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import type { Discount } from "@medusajs/medusa"
+import { Button, Container, Heading, usePrompt } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useAdminDeleteDiscount, useAdminDiscounts } from "medusa-react"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, Outlet, useLoaderData } from "react-router-dom"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DataTable } from "../../../../../components/table/data-table"
+import { useDiscountTableFilters } from "../../../../../hooks/table/filters/use-discount-table-filters"
+import { useDiscountTableColumns } from "../../../../../hooks/table/columns/use-discount-table-columns"
+import { useDiscountTableQuery } from "../../../../../hooks/table/query/use-discount-table-query"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { discountsLoader } from "../../loader"
+
+const PAGE_SIZE = 20
+
+export const DiscountListTable = () => {
+  const { t } = useTranslation()
+
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<ReturnType<typeof discountsLoader>>
+  >
+
+  const { searchParams, raw } = useDiscountTableQuery({ pageSize: PAGE_SIZE })
+  const { discounts, count, isLoading, isError, error } = useAdminDiscounts(
+    {
+      ...searchParams,
+    },
+    {
+      initialData,
+      keepPreviousData: true,
+    }
+  )
+
+  const filters = useDiscountTableFilters()
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: (discounts ?? []) as Discount[],
+    columns,
+    count,
+    enablePagination: true,
+    pageSize: PAGE_SIZE,
+    getRowId: (row) => row.id,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("discounts.domain")}</Heading>
+        <Button size="small" variant="secondary" asChild>
+          <Link to="create">{t("actions.create")}</Link>
+        </Button>
+      </div>
+      <DataTable
+        table={table}
+        columns={columns}
+        count={count}
+        pageSize={PAGE_SIZE}
+        filters={filters}
+        search
+        pagination
+        isLoading={isLoading}
+        queryObject={raw}
+        navigateTo={(row) => `${row.original.id}`}
+        orderBy={["code", "created_at", "updated_at"]}
+      />
+      <Outlet />
+    </Container>
+  )
+}
+
+const DiscountActions = ({ discount }: { discount: Discount }) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const { mutateAsync } = useAdminDeleteDiscount(discount.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("discounts.deleteWarning", {
+        code: discount.code,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <PencilSquare />,
+              label: t("actions.edit"),
+              to: `/discounts/${discount.id}/edit`,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: handleDelete,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<Discount>()
+
+const useColumns = () => {
+  const base = useDiscountTableColumns()
+
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <DiscountActions discount={row.original} />
+        },
+      }),
+    ],
+    [base]
+  )
+}

package/src/routes/discounts/discount-list/components/discount-list-table/index.ts

@@ -0,0 +1 @@
+export * from "./discount-list-table.tsx"

package/src/routes/discounts/discount-list/discount-list.tsx

@@ -0,0 +1,20 @@
+// import after from "medusa-admin:widgets/discount/list/after"
+// import before from "medusa-admin:widgets/discount/list/before"
+
+import { DiscountListTable } from "./components/discount-list-table"
+
+export const DiscountsList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      {/* {before.widgets.map((w, i) => (
+        <w.Component key={i} />
+      ))} */}
+
+      <DiscountListTable />
+
+      {/* {after.widgets.map((w, i) => (
+        <w.Component key={i} />
+      ))} */}
+    </div>
+  )
+}

package/src/routes/discounts/discount-list/index.ts

@@ -0,0 +1,2 @@
+export { DiscountsList as Component } from "./discount-list"
+export { discountsLoader } from "./loader"

package/src/routes/discounts/discount-list/loader.ts

@@ -0,0 +1,24 @@
+import { QueryClient } from "@tanstack/react-query"
+
+import { Response } from "@medusajs/medusa-js"
+import { AdminDiscountsListRes } from "@medusajs/medusa"
+import { adminDiscountKeys } from "medusa-react"
+
+import { medusa, queryClient } from "../../../lib/medusa"
+
+const discountsListQuery = () => ({
+  queryKey: adminDiscountKeys.list({ limit: 20, offset: 0 }),
+  queryFn: async () => medusa.admin.discounts.list({ limit: 20, offset: 0 }),
+})
+
+export const discountsLoader = (client: QueryClient) => {
+  return async () => {
+    const query = discountsListQuery()
+
+    return (
+      queryClient.getQueryData<Response<AdminDiscountsListRes>>(
+        query.queryKey
+      ) ?? (await client.fetchQuery(query))
+    )
+  }
+}

package/src/routes/draft-orders/common/edit-address-form/edit-address-form.tsx

@@ -0,0 +1,98 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Country, DraftOrder } from "@medusajs/medusa"
+import { Button } from "@medusajs/ui"
+import { useAdminUpdateDraftOrder } from "medusa-react"
+import { DefaultValues, useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+import { AddressForm } from "../../../../components/forms/address-form"
+import { RouteDrawer, useRouteModal } from "../../../../components/route-modal"
+import { AddressSchema } from "../../../../lib/schemas"
+
+type AddressType = "shipping" | "billing"
+
+type EditDraftOrderAddressFormProps = {
+  draftOrder: DraftOrder
+  countries: Country[]
+  type: AddressType
+}
+
+export const EditDraftOrderAddressForm = ({
+  draftOrder,
+  countries,
+  type,
+}: EditDraftOrderAddressFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof AddressSchema>>({
+    defaultValues: getDefaultValues(draftOrder, type),
+    resolver: zodResolver(AddressSchema),
+  })
+
+  const { mutateAsync, isLoading } = useAdminUpdateDraftOrder(draftOrder.id)
+
+  const handleSumbit = form.handleSubmit(async (values) => {
+    const update = {
+      [type === "shipping" ? "shipping_address" : "billing_address"]: values,
+    }
+
+    mutateAsync(update, {
+      onSuccess: () => {
+        handleSuccess()
+      },
+    })
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <form
+        onSubmit={handleSumbit}
+        className="flex size-full flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="size-full flex-1 overflow-auto">
+          <AddressForm
+            control={form.control}
+            countries={countries}
+            layout="stack"
+          />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button type="submit" isLoading={isLoading} size="small">
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </form>
+    </RouteDrawer.Form>
+  )
+}
+
+const getDefaultValues = (
+  draftOrder: DraftOrder,
+  type: AddressType
+): DefaultValues<z.infer<typeof AddressSchema>> => {
+  const address =
+    type === "shipping"
+      ? draftOrder.cart.shipping_address
+      : draftOrder.cart.billing_address
+
+  return {
+    first_name: address?.first_name ?? "",
+    last_name: address?.last_name ?? "",
+    address_1: address?.address_1 ?? "",
+    address_2: address?.address_2 ?? "",
+    city: address?.city ?? "",
+    postal_code: address?.postal_code ?? "",
+    province: address?.province ?? "",
+    country_code: address?.country_code ?? "",
+    phone: address?.phone ?? "",
+    company: address?.company ?? "",
+  }
+}

package/src/routes/draft-orders/common/edit-address-form/index.ts

@@ -0,0 +1 @@
+export * from "./edit-address-form"

package/src/routes/draft-orders/draft-order-billing-address/draft-order-billing-address.tsx

@@ -0,0 +1,50 @@
+import { Heading } from "@medusajs/ui"
+import { useAdminDraftOrder, useAdminRegion } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/route-modal"
+import { EditDraftOrderAddressForm } from "../common/edit-address-form"
+
+export const DraftOrderBillingAddress = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { draft_order, isLoading, isError, error } = useAdminDraftOrder(id!)
+
+  const regionId = draft_order?.cart?.region_id
+
+  const {
+    region,
+    isLoading: isLoadingRegion,
+    isError: isErrorRegion,
+    error: errorRegion,
+  } = useAdminRegion(regionId!, {
+    enabled: !!regionId,
+  })
+
+  const ready = !isLoading && draft_order && !isLoadingRegion && region
+  const countries = region?.countries || []
+
+  if (isError) {
+    throw error
+  }
+
+  if (isErrorRegion) {
+    throw errorRegion
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("addresses.billingAddress.editHeader")}</Heading>
+      </RouteDrawer.Header>
+      {ready && (
+        <EditDraftOrderAddressForm
+          draftOrder={draft_order}
+          countries={countries}
+          type="billing"
+        />
+      )}
+    </RouteDrawer>
+  )
+}

package/src/routes/draft-orders/draft-order-billing-address/index.ts

@@ -0,0 +1 @@
+export { DraftOrderBillingAddress as Component } from "./draft-order-billing-address"