@medusajs/dashboard 0.0.1

package/src/v2-routes/promotions/promotion-edit-details/components/edit-promotion-form/edit-promotion-details-form.tsx

@@ -0,0 +1,310 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { PromotionDTO } from "@medusajs/types"
+import {
+  Button,
+  clx,
+  CurrencyInput,
+  Input,
+  RadioGroup,
+  Text,
+} from "@medusajs/ui"
+import { useForm, useWatch } from "react-hook-form"
+import { Trans, useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { Form } from "../../../../../components/common/form"
+import { PercentageInput } from "../../../../../components/inputs/percentage-input"
+import {
+    RouteDrawer,
+    useRouteModal,
+} from "../../../../../components/route-modal"
+import { useUpdatePromotion } from "../../../../../hooks/api/promotions"
+import { getCurrencySymbol } from "../../../../../lib/currencies"
+
+type EditPromotionFormProps = {
+  promotion: PromotionDTO
+}
+
+const EditPromotionSchema = zod.object({
+  is_automatic: zod.string().toLowerCase(),
+  code: zod.string().min(1),
+  value_type: zod.enum(["fixed", "percentage"]),
+  value: zod.string(),
+  allocation: zod.enum(["each", "across"]),
+})
+
+export const EditPromotionDetailsForm = ({
+  promotion,
+}: EditPromotionFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<zod.infer<typeof EditPromotionSchema>>({
+    defaultValues: {
+      is_automatic: promotion.is_automatic!.toString(),
+      code: promotion.code,
+      value: promotion.application_method!.value?.toString(),
+      allocation: promotion.application_method!.allocation,
+      value_type: promotion.application_method!.type,
+    },
+    resolver: zodResolver(EditPromotionSchema),
+  })
+
+  const watchValueType = useWatch({
+    control: form.control,
+    name: "value_type",
+  })
+
+  const isFixedValueType = watchValueType === "fixed"
+
+  const { mutateAsync, isPending } = useUpdatePromotion(promotion.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        is_automatic: data.is_automatic === "true",
+        code: data.code,
+        application_method: {
+          value: data.value,
+          type: data.value_type as any,
+          allocation: data.allocation as any,
+        },
+      },
+      {
+        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">
+            <Form.Field
+              control={form.control}
+              name="is_automatic"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>Method</Form.Label>
+                    <Form.Control>
+                      <RadioGroup
+                        className="flex-col gap-y-3"
+                        {...field}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <RadioGroup.ChoiceBox
+                          className={clx("basis-1/2", {
+                            "border-2 border-ui-border-interactive":
+                              "false" === field.value,
+                          })}
+                          value={"false"}
+                          label={t("promotions.form.method.code.title")}
+                          description={t(
+                            "promotions.form.method.code.description"
+                          )}
+                        />
+                        <RadioGroup.ChoiceBox
+                          className={clx("basis-1/2", {
+                            "border-2 border-ui-border-interactive":
+                              "true" === field.value,
+                          })}
+                          value={"true"}
+                          label={t("promotions.form.method.automatic.title")}
+                          description={t(
+                            "promotions.form.method.automatic.description"
+                          )}
+                        />
+                      </RadioGroup>
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+
+            <div className="flex flex-col gap-y-4">
+              <Form.Field
+                control={form.control}
+                name="code"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>{t("promotions.form.code.title")}</Form.Label>
+
+                      <Form.Control>
+                        <Input {...field} />
+                      </Form.Control>
+                    </Form.Item>
+                  )
+                }}
+              />
+
+              <Text
+                size="small"
+                leading="compact"
+                className="text-ui-fg-subtle"
+              >
+                <Trans
+                  t={t}
+                  i18nKey="promotions.form.code.description"
+                  components={[<br key="break" />]}
+                />
+              </Text>
+            </div>
+
+            <Form.Field
+              control={form.control}
+              name="value_type"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("promotions.fields.value_type")}</Form.Label>
+                    <Form.Control>
+                      <RadioGroup
+                        className="flex-col gap-y-3"
+                        {...field}
+                        onValueChange={field.onChange}
+                      >
+                        <RadioGroup.ChoiceBox
+                          className={clx("basis-1/2", {
+                            "border-2 border-ui-border-interactive":
+                              "fixed" === field.value,
+                          })}
+                          value={"fixed"}
+                          label={t("promotions.form.value_type.fixed.title")}
+                          description={t(
+                            "promotions.form.value_type.fixed.description"
+                          )}
+                        />
+
+                        <RadioGroup.ChoiceBox
+                          className={clx("basis-1/2", {
+                            "border-2 border-ui-border-interactive":
+                              "percentage" === field.value,
+                          })}
+                          value={"percentage"}
+                          label={t(
+                            "promotions.form.value_type.percentage.title"
+                          )}
+                          description={t(
+                            "promotions.form.value_type.percentage.description"
+                          )}
+                        />
+                      </RadioGroup>
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+
+            <Form.Field
+              control={form.control}
+              name="value"
+              render={({ field: { onChange, ...field } }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>
+                      {isFixedValueType
+                        ? t("fields.amount")
+                        : t("fields.percentage")}
+                    </Form.Label>
+                    <Form.Control>
+                      {isFixedValueType ? (
+                        <CurrencyInput
+                          min={0}
+                          onValueChange={onChange}
+                          code={"USD"}
+                          symbol={getCurrencySymbol("USD")}
+                          {...field}
+                          value={Number(field.value)}
+                        />
+                      ) : (
+                        <PercentageInput
+                          key="amount"
+                          min={0}
+                          max={100}
+                          {...field}
+                          value={field.value || ""}
+                          onChange={(e) => {
+                            onChange(
+                              e.target.value === "" ? null : e.target.value
+                            )
+                          }}
+                        />
+                      )}
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+
+            <Form.Field
+              control={form.control}
+              name="allocation"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("promotions.fields.allocation")}</Form.Label>
+                    <Form.Control>
+                      <RadioGroup
+                        className="flex-col gap-y-3"
+                        {...field}
+                        onValueChange={field.onChange}
+                      >
+                        <RadioGroup.ChoiceBox
+                          className={clx("basis-1/2", {
+                            "border-2 border-ui-border-interactive":
+                              "each" === field.value,
+                          })}
+                          value={"each"}
+                          label={t("promotions.form.allocation.each.title")}
+                          description={t(
+                            "promotions.form.allocation.each.description"
+                          )}
+                        />
+
+                        <RadioGroup.ChoiceBox
+                          className={clx("basis-1/2", {
+                            "border-2 border-ui-border-interactive":
+                              "across" === field.value,
+                          })}
+                          value={"across"}
+                          label={t("promotions.form.allocation.across.title")}
+                          description={t(
+                            "promotions.form.allocation.across.description"
+                          )}
+                        />
+                      </RadioGroup>
+                    </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={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </form>
+    </RouteDrawer.Form>
+  )
+}

package/src/v2-routes/promotions/promotion-edit-details/components/edit-promotion-form/index.ts

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

package/src/v2-routes/promotions/promotion-edit-details/index.ts

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

package/src/v2-routes/promotions/promotion-edit-details/promotion-edit-details.tsx

@@ -0,0 +1,30 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+
+import { RouteDrawer } from "../../../components/route-modal"
+import { usePromotion } from "../../../hooks/api/promotions"
+import { EditPromotionDetailsForm } from "./components/edit-promotion-form"
+
+export const PromotionEditDetails = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { promotion, isLoading, isError, error } = usePromotion(id!)
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("promotions.edit.title")}</Heading>
+      </RouteDrawer.Header>
+
+      {!isLoading && promotion && (
+        <EditPromotionDetailsForm promotion={promotion} />
+      )}
+    </RouteDrawer>
+  )
+}

package/src/v2-routes/promotions/promotion-list/components/promotion-list-table/index.ts

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

package/src/v2-routes/promotions/promotion-list/components/promotion-list-table/promotion-list-table.tsx

@@ -0,0 +1,155 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { PromotionDTO } from "@medusajs/types"
+import { Button, Container, Heading, usePrompt } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, Outlet, useLoaderData, useNavigate } from "react-router-dom"
+
+import { keepPreviousData } from "@tanstack/react-query"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DataTable } from "../../../../../components/table/data-table"
+import {
+  useDeletePromotion,
+  usePromotions,
+} from "../../../../../hooks/api/promotions"
+import { usePromotionTableColumns } from "../../../../../hooks/table/columns-v2/use-promotion-table-columns"
+import { usePromotionTableFilters } from "../../../../../hooks/table/filters-v2/use-promotion-table-filters"
+import { usePromotionTableQuery } from "../../../../../hooks/table/query-v2/use-promotion-table-query"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { promotionsLoader } from "../../loader"
+
+const PAGE_SIZE = 20
+
+export const PromotionListTable = () => {
+  const { t } = useTranslation()
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<ReturnType<typeof promotionsLoader>>
+  >
+
+  const { searchParams, raw } = usePromotionTableQuery({ pageSize: PAGE_SIZE })
+  const { promotions, count, isLoading, isError, error } = usePromotions(
+    { ...searchParams },
+    {
+      initialData,
+      placeholderData: keepPreviousData,
+    }
+  )
+
+  const filters = usePromotionTableFilters()
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: (promotions ?? []) as PromotionDTO[],
+    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("promotions.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={["created_at", "updated_at"]}
+      />
+      <Outlet />
+    </Container>
+  )
+}
+
+const PromotionActions = ({ promotion }: { promotion: PromotionDTO }) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+  const { mutateAsync } = useDeletePromotion(promotion.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("promotions.deleteWarning", { code: promotion.code! }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+      verificationInstruction: t("general.typeToConfirm"),
+      verificationText: promotion.code,
+    })
+
+    if (!res) {
+      return
+    }
+
+    try {
+      await mutateAsync(undefined, {
+        onSuccess: () => {
+          navigate("/promotions", { replace: true })
+        },
+      })
+    } catch {
+      throw new Error(
+        `Promotion with code ${promotion.code} could not be deleted`
+      )
+    }
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <PencilSquare />,
+              label: t("actions.edit"),
+              to: `/promotions/${promotion.id}/edit`,
+            },
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: handleDelete,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<PromotionDTO>()
+
+const useColumns = () => {
+  const base = usePromotionTableColumns()
+
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <PromotionActions promotion={row.original} />
+        },
+      }),
+    ],
+    [base]
+  )
+}

package/src/v2-routes/promotions/promotion-list/index.ts

@@ -0,0 +1,2 @@
+export { promotionsLoader } from "./loader"
+export { PromotionsList as Component } from "./promotions-list.tsx"

package/src/v2-routes/promotions/promotion-list/loader.ts

@@ -0,0 +1,34 @@
+import {
+  AdminGetPromotionsParams,
+  AdminPromotionsListRes,
+} from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { QueryClient } from "@tanstack/react-query"
+import { promotionsQueryKeys } from "../../../hooks/api/promotions"
+import { medusa, queryClient } from "../../../lib/medusa"
+
+const params = {
+  limit: 20,
+  offset: 0,
+}
+
+const promotionsListQuery = () => ({
+  queryKey: promotionsQueryKeys.list(params),
+  queryFn: async () =>
+    medusa.admin.custom.get<AdminGetPromotionsParams, AdminPromotionsListRes>(
+      "/promotions",
+      params
+    ),
+})
+
+export const promotionsLoader = (client: QueryClient) => {
+  return async () => {
+    const query = promotionsListQuery()
+
+    return (
+      queryClient.getQueryData<Response<AdminPromotionsListRes>>(
+        query.queryKey
+      ) ?? (await client.fetchQuery(query))
+    )
+  }
+}

package/src/v2-routes/promotions/promotion-list/promotions-list.tsx

@@ -0,0 +1,9 @@
+import { PromotionListTable } from "./components/promotion-list-table"
+
+export const PromotionsList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <PromotionListTable />
+    </div>
+  )
+}

package/src/v2-routes/regions/common/constants.ts

@@ -0,0 +1,4 @@
+export enum ShippingOptionPriceType {
+  FLAT_RATE = "flat_rate",
+  CALCULATED = "calculated",
+}

package/src/v2-routes/regions/common/hooks/use-countries.tsx

@@ -0,0 +1,67 @@
+import { json } from "react-router-dom"
+import { RegionCountryDTO } from "@medusajs/types"
+
+const acceptedOrderKeys = ["name", "code"]
+
+/**
+ * Since countries cannot be retrieved from the API, we need to create a hook
+ * that can be used to filter and sort the static list of countries.
+ */
+export const useCountries = ({
+  countries,
+  q,
+  order = "name",
+  limit,
+  offset = 0,
+}: {
+  countries: RegionCountryDTO[]
+  limit: number
+  offset?: number
+  order?: string
+  q?: string
+}) => {
+  const data = countries.slice(offset, offset + limit)
+
+  if (order) {
+    const direction = order.startsWith("-") ? -1 : 1
+    const key = order.replace("-", "")
+
+    if (!acceptedOrderKeys.includes(key)) {
+      console.log("The key ${key} is not a valid order key")
+      throw json(`The key ${key} is not a valid order key`, 500)
+    }
+
+    const sortKey: keyof RegionCountryDTO = key === "code" ? "iso_2" : "name"
+
+    data.sort((a, b) => {
+      if (a[sortKey] === null && b[sortKey] === null) {
+        return 0
+      }
+      if (a[sortKey] === null) {
+        return direction
+      }
+      if (b[sortKey] === null) {
+        return -direction
+      }
+      return a[sortKey]! > b[sortKey]! ? direction : -direction
+    })
+  }
+
+  if (q) {
+    const query = q.toLowerCase()
+    const results = countries.filter(
+      (c) =>
+        c.name.toLowerCase().includes(query) ||
+        c.iso_2.toLowerCase().includes(query)
+    )
+    return {
+      countries: results,
+      count: results.length,
+    }
+  }
+
+  return {
+    countries: data,
+    count: countries.length,
+  }
+}

package/src/v2-routes/regions/common/hooks/use-country-table-columns.tsx

@@ -0,0 +1,25 @@
+import { RegionCountryDTO } from "@medusajs/types"
+
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+const columnHelper = createColumnHelper<RegionCountryDTO>()
+
+export const useCountryTableColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("display_name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.accessor("iso_2", {
+        header: t("fields.code"),
+        cell: ({ getValue }) => <span className="uppercase">{getValue()}</span>,
+      }),
+    ],
+    [t]
+  )
+}

package/src/v2-routes/regions/common/hooks/use-country-table-query.tsx

@@ -0,0 +1,25 @@
+import { useQueryParams } from "../../../../hooks/use-query-params"
+
+export const useCountryTableQuery = ({
+  pageSize,
+  prefix,
+}: {
+  pageSize: number
+  prefix?: string
+}) => {
+  const raw = useQueryParams(["order", "q", "offset"], prefix)
+
+  const { offset, order, q } = raw
+
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? parseInt(offset, 10) : 0,
+    order,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw,
+  }
+}