@medusajs/dashboard 0.0.1

package/src/v2-routes/products/product-create/components/product-create-details-form/components/product-create-sales-channel-drawer/product-create-sales-channel-drawer.tsx

@@ -0,0 +1,198 @@
+import { AdminSalesChannelResponse } from "@medusajs/types"
+import { Button, Checkbox } from "@medusajs/ui"
+import {
+  OnChangeFn,
+  RowSelectionState,
+  createColumnHelper,
+} from "@tanstack/react-table"
+import { useEffect, useMemo, useState } from "react"
+import { UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+import { SplitView } from "../../../../../../../components/layout/split-view"
+import { DataTable } from "../../../../../../../components/table/data-table"
+import { useSalesChannels } from "../../../../../../../hooks/api/sales-channels"
+import { useSalesChannelTableColumns } from "../../../../../../../hooks/table/columns/use-sales-channel-table-columns"
+import { useSalesChannelTableFilters } from "../../../../../../../hooks/table/filters/use-sales-channel-table-filters"
+import { useSalesChannelTableQuery } from "../../../../../../../hooks/table/query/use-sales-channel-table-query"
+import { useDataTable } from "../../../../../../../hooks/use-data-table"
+import { ProductCreateSchemaType } from "../../../../types"
+import { useProductCreateDetailsContext } from "../product-create-details-context"
+
+type ProductCreateSalesChannelDrawerProps = {
+  form: UseFormReturn<ProductCreateSchemaType>
+}
+
+const PAGE_SIZE = 50
+const PREFIX = "sc"
+
+export const ProductCreateSalesChannelDrawer = ({
+  form,
+}: ProductCreateSalesChannelDrawerProps) => {
+  const { t } = useTranslation()
+  const { open, onOpenChange } = useProductCreateDetailsContext()
+  const { getValues, setValue } = form
+
+  const [selection, setSelection] = useState<RowSelectionState>({})
+  const [state, setState] = useState<{ id: string; name: string }[]>([])
+
+  const { searchParams, raw } = useSalesChannelTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+  })
+  const { sales_channels, count, isLoading, isError, error } = useSalesChannels(
+    {
+      ...searchParams,
+    }
+  )
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    const salesChannels = getValues("sales_channels")
+
+    if (salesChannels) {
+      setState(
+        salesChannels.map((channel) => ({
+          id: channel.id,
+          name: channel.name,
+        }))
+      )
+
+      setSelection(
+        salesChannels.reduce(
+          (acc, channel) => ({
+            ...acc,
+            [channel.id]: true,
+          }),
+          {}
+        )
+      )
+    }
+  }, [open, getValues])
+
+  const updater: OnChangeFn<RowSelectionState> = (fn) => {
+    const value = typeof fn === "function" ? fn(selection) : fn
+    const ids = Object.keys(value)
+
+    const addedIdsSet = new Set(ids.filter((id) => value[id] && !selection[id]))
+
+    let addedSalesChannels: { id: string; name: string }[] = []
+
+    if (addedIdsSet.size > 0) {
+      addedSalesChannels =
+        sales_channels?.filter((channel) => addedIdsSet.has(channel.id)) ?? []
+    }
+
+    setState((prev) => {
+      const filteredPrev = prev.filter((channel) => value[channel.id])
+      return Array.from(new Set([...filteredPrev, ...addedSalesChannels]))
+    })
+    setSelection(value)
+  }
+
+  const handleAdd = () => {
+    setValue("sales_channels", state, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+    onOpenChange(false)
+  }
+
+  const filters = useSalesChannelTableFilters()
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: sales_channels ?? [],
+    columns,
+    count: sales_channels?.length ?? 0,
+    enablePagination: true,
+    enableRowSelection: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+    rowSelection: {
+      state: selection,
+      updater,
+    },
+    prefix: PREFIX,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <div className="flex h-full flex-1 flex-col overflow-hidden">
+      <div className="flex-1">
+        <DataTable
+          table={table}
+          columns={columns}
+          pageSize={PAGE_SIZE}
+          filters={filters}
+          isLoading={isLoading}
+          layout="fill"
+          orderBy={["name", "created_at", "updated_at"]}
+          queryObject={raw}
+          search
+          pagination
+          count={count}
+          prefix={PREFIX}
+        />
+      </div>
+      <div className="flex items-center justify-end gap-x-2 border-t px-6 py-4">
+        <SplitView.Close asChild>
+          <Button size="small" variant="secondary" type="button">
+            {t("actions.cancel")}
+          </Button>
+        </SplitView.Close>
+        <Button size="small" onClick={handleAdd} type="button">
+          {t("actions.add")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const columnHelper =
+  createColumnHelper<AdminSalesChannelResponse["sales_channel"]>()
+
+const useColumns = () => {
+  const base = useSalesChannelTableColumns()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      ...base,
+    ],
+    [base]
+  )
+}

package/src/v2-routes/products/product-create/components/product-create-details-form/index.ts

@@ -0,0 +1 @@
+export * from "./product-create-details-form"

package/src/v2-routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx

@@ -0,0 +1,61 @@
+import { Heading, Text } from "@medusajs/ui"
+import { useState } from "react"
+import { UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+import { Divider } from "../../../../../components/common/divider"
+import { SplitView } from "../../../../../components/layout/split-view"
+import { ProductCreateSchemaType } from "../../types"
+import { ProductCreateAttributeSection } from "./components/product-create-details-attribute-section"
+import { ProductCreateDetailsContext } from "./components/product-create-details-context"
+import { ProductCreateGeneralSection } from "./components/product-create-details-general-section"
+import { ProductCreateOrganizationSection } from "./components/product-create-details-organize-section"
+import { ProductCreateVariantsSection } from "./components/product-create-details-variant-section"
+import { ProductCreateSalesChannelDrawer } from "./components/product-create-sales-channel-drawer"
+
+type ProductAttributesProps = {
+  form: UseFormReturn<ProductCreateSchemaType>
+}
+
+export const ProductCreateDetailsForm = ({ form }: ProductAttributesProps) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <ProductCreateDetailsContext.Provider
+      value={{ open, onOpenChange: setOpen }}
+    >
+      <SplitView open={open} onOpenChange={setOpen}>
+        <SplitView.Content>
+          <div className="flex flex-col items-center p-16">
+            <div className="flex w-full max-w-[720px] flex-col gap-y-8">
+              <Header />
+              <ProductCreateGeneralSection form={form} />
+              <Divider />
+              <ProductCreateVariantsSection form={form} />
+              <Divider />
+              <ProductCreateOrganizationSection form={form} />
+              <Divider />
+              <ProductCreateAttributeSection form={form} />
+            </div>
+          </div>
+        </SplitView.Content>
+        <SplitView.Drawer>
+          <ProductCreateSalesChannelDrawer form={form} />
+        </SplitView.Drawer>
+      </SplitView>
+    </ProductCreateDetailsContext.Provider>
+  )
+}
+
+const Header = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex flex-col">
+      <Heading>{t("products.create.header")}</Heading>
+      <Text size="small" className="text-ui-fg-subtle">
+        {t("products.create.hint")}
+      </Text>
+    </div>
+  )
+}

package/src/v2-routes/products/product-create/components/product-create-form/index.ts

@@ -0,0 +1 @@
+export * from "./product-create-form"

package/src/v2-routes/products/product-create/components/product-create-form/product-create-form.tsx

@@ -0,0 +1,189 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, ProgressStatus, ProgressTabs, toast } from "@medusajs/ui"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/route-modal"
+import { useCreateProduct } from "../../../../../hooks/api/products"
+import { VariantPricingForm } from "../../../common/variant-pricing-form"
+import {
+  PRODUCT_CREATE_FORM_DEFAULTS,
+  ProductCreateSchema,
+} from "../../constants"
+import { ProductCreateSchemaType } from "../../types"
+import { normalizeProductFormValues } from "../../utils"
+import { ProductCreateDetailsForm } from "../product-create-details-form"
+
+enum Tab {
+  PRODUCT = "product",
+  PRICE = "price",
+}
+
+type TabState = Record<Tab, ProgressStatus>
+
+const SAVE_DRAFT_BUTTON = "save-draft-button"
+
+export const ProductCreateForm = () => {
+  const [tab, setTab] = useState<Tab>(Tab.PRODUCT)
+
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<ProductCreateSchemaType>({
+    defaultValues: PRODUCT_CREATE_FORM_DEFAULTS,
+    resolver: zodResolver(ProductCreateSchema),
+  })
+
+  const { mutateAsync, isPending } = useCreateProduct()
+
+  const handleSubmit = form.handleSubmit(
+    async (values, e) => {
+      if (!(e?.nativeEvent instanceof SubmitEvent)) {
+        return
+      }
+      const submitter = e?.nativeEvent?.submitter as HTMLButtonElement
+
+      if (!(submitter instanceof HTMLButtonElement)) {
+        return
+      }
+
+      const isDraftSubmission = submitter.dataset.name === SAVE_DRAFT_BUTTON
+
+      await mutateAsync(
+        normalizeProductFormValues({
+          ...values,
+          status: (isDraftSubmission ? "draft" : "published") as any,
+        }),
+        {
+          onSuccess: ({ product }) => {
+            toast.success(t("general.success"), {
+              dismissLabel: t("actions.close"),
+              description: t("products.create.successToast", {
+                title: product.title,
+              }),
+            })
+
+            handleSuccess(`../${product.id}`)
+          },
+        }
+      )
+    },
+    (err) => {
+      console.log(err)
+    }
+  )
+  const tabState: TabState = {
+    [Tab.PRODUCT]: tab === Tab.PRODUCT ? "in-progress" : "completed",
+    [Tab.PRICE]: tab === Tab.PRICE ? "in-progress" : "not-started",
+  }
+
+  return (
+    <RouteFocusModal>
+      <RouteFocusModal.Form form={form}>
+        <form onSubmit={handleSubmit} className="flex h-full flex-col">
+          <ProgressTabs
+            value={tab}
+            onValueChange={(tab) => setTab(tab as Tab)}
+            className="flex h-full flex-col overflow-hidden"
+          >
+            <RouteFocusModal.Header>
+              <div className="flex w-full items-center justify-between gap-x-4">
+                <div className="-my-2 w-full max-w-[400px] border-l">
+                  <ProgressTabs.List className="grid w-full grid-cols-3">
+                    <ProgressTabs.Trigger
+                      status={tabState.product}
+                      value={Tab.PRODUCT}
+                    >
+                      {t("products.create.tabs.details")}
+                    </ProgressTabs.Trigger>
+                    <ProgressTabs.Trigger
+                      status={tabState.price}
+                      value={Tab.PRICE}
+                    >
+                      {t("products.create.tabs.variants")}
+                    </ProgressTabs.Trigger>
+                  </ProgressTabs.List>
+                </div>
+                <div className="flex items-center justify-end gap-x-2">
+                  <RouteFocusModal.Close asChild>
+                    <Button variant="secondary" size="small">
+                      {t("actions.cancel")}
+                    </Button>
+                  </RouteFocusModal.Close>
+                  <Button
+                    data-name={SAVE_DRAFT_BUTTON}
+                    size="small"
+                    type="submit"
+                    isLoading={isPending}
+                    className="whitespace-nowrap"
+                  >
+                    {t("actions.saveAsDraft")}
+                  </Button>
+                  <PrimaryButton
+                    tab={tab}
+                    next={() => setTab(Tab.PRICE)}
+                    isLoading={isPending}
+                  />
+                </div>
+              </div>
+            </RouteFocusModal.Header>
+            <RouteFocusModal.Body className="size-full overflow-hidden">
+              <ProgressTabs.Content
+                className="size-full overflow-hidden"
+                value={Tab.PRODUCT}
+              >
+                <ProductCreateDetailsForm form={form} />
+              </ProgressTabs.Content>
+              <ProgressTabs.Content
+                className="size-full overflow-y-auto"
+                value={Tab.PRICE}
+              >
+                <VariantPricingForm form={form} />
+              </ProgressTabs.Content>
+            </RouteFocusModal.Body>
+          </ProgressTabs>
+        </form>
+      </RouteFocusModal.Form>
+    </RouteFocusModal>
+  )
+}
+
+type PrimaryButtonProps = {
+  tab: Tab
+  next: (tab: Tab) => void
+  isLoading?: boolean
+}
+
+const PrimaryButton = ({ tab, next, isLoading }: PrimaryButtonProps) => {
+  const { t } = useTranslation()
+
+  if (tab === Tab.PRICE) {
+    return (
+      <Button
+        data-name="publish-button"
+        key="submit-button"
+        type="submit"
+        variant="primary"
+        size="small"
+        isLoading={isLoading}
+      >
+        {t("actions.publish")}
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      key="next-button"
+      type="button"
+      variant="primary"
+      size="small"
+      onClick={() => next(tab)}
+    >
+      {t("actions.continue")}
+    </Button>
+  )
+}

package/src/v2-routes/products/product-create/constants.ts

@@ -0,0 +1,78 @@
+import { z } from "zod"
+
+export const ProductCreateSchema = z.object({
+  title: z.string(),
+  subtitle: z.string().optional(),
+  handle: z.string().optional(),
+  description: z.string().optional(),
+  discountable: z.boolean(),
+  type_id: z.string().optional(),
+  collection_id: z.string().optional(),
+  categories: z.array(z.string()),
+  tags: z.array(z.string()).optional(),
+  sales_channels: z
+    .array(
+      z.object({
+        id: z.string(),
+        name: z.string(),
+      })
+    )
+    .optional(),
+  origin_country: z.string().optional(),
+  material: z.string().optional(),
+  width: z.string().optional(),
+  length: z.string().optional(),
+  height: z.string().optional(),
+  weight: z.string().optional(),
+  mid_code: z.string().optional(),
+  hs_code: z.string().optional(),
+  options: z.array(
+    z.object({
+      title: z.string(),
+      values: z.array(z.string()),
+    })
+  ),
+  variants: z.array(
+    z.object({
+      should_create: z.boolean(),
+      title: z.string(),
+      options: z.record(z.string(), z.string()),
+      variant_rank: z.number(),
+      prices: z.record(z.string(), z.string()).optional(),
+    })
+  ),
+  images: z.array(z.string()).optional(),
+  thumbnail: z.string().optional(),
+})
+
+export const PRODUCT_CREATE_FORM_DEFAULTS: Partial<
+  z.infer<typeof ProductCreateSchema>
+> = {
+  discountable: true,
+  tags: [],
+  sales_channels: [],
+  options: [
+    {
+      title: "",
+      values: [],
+    },
+  ],
+  variants: [],
+  images: [],
+  thumbnail: "",
+  categories: [],
+  collection_id: "",
+  description: "",
+  handle: "",
+  height: "",
+  hs_code: "",
+  length: "",
+  material: "",
+  mid_code: "",
+  origin_country: "",
+  subtitle: "",
+  title: "",
+  type_id: "",
+  weight: "",
+  width: "",
+}

package/src/v2-routes/products/product-create/index.ts

@@ -0,0 +1 @@
+export { ProductCreate as Component } from "./product-create"

package/src/v2-routes/products/product-create/product-create.tsx

@@ -0,0 +1,10 @@
+import { RouteFocusModal } from "../../../components/route-modal"
+import { ProductCreateForm } from "./components/product-create-form/product-create-form"
+
+export const ProductCreate = () => {
+  return (
+    <RouteFocusModal>
+      <ProductCreateForm />
+    </RouteFocusModal>
+  )
+}

package/src/v2-routes/products/product-create/types.ts

@@ -0,0 +1,4 @@
+import { z } from "zod"
+import { ProductCreateSchema } from "./constants"
+
+export type ProductCreateSchemaType = z.infer<typeof ProductCreateSchema>

package/src/v2-routes/products/product-create/utils.ts

@@ -0,0 +1,51 @@
+import { CreateProductDTO } from "@medusajs/types"
+import { ProductCreateSchemaType } from "./types"
+
+export const normalizeProductFormValues = (
+  values: ProductCreateSchemaType & { status: CreateProductDTO["status"] }
+) => {
+  const reqData = {
+    ...values,
+    is_giftcard: false,
+    tags: values?.tags?.length
+      ? values.tags?.map((tag) => ({ value: tag }))
+      : undefined,
+    sales_channels: values?.sales_channels?.length
+      ? values.sales_channels?.map((sc) => ({ id: sc.id }))
+      : undefined,
+    images: values.images?.length ? values.images : undefined,
+    collection_id: values.collection_id || undefined,
+    categories: values.categories.map((id) => ({ id })),
+    type_id: values.type_id || undefined,
+    handle: values.handle || undefined,
+    origin_country: values.origin_country || undefined,
+    material: values.material || undefined,
+    mid_code: values.mid_code || undefined,
+    hs_code: values.hs_code || undefined,
+    thumbnail: values.thumbnail || undefined,
+    subtitle: values.subtitle || undefined,
+    description: values.description || undefined,
+    width: values.width ? parseFloat(values.width) : undefined,
+    length: values.length ? parseFloat(values.length) : undefined,
+    height: values.height ? parseFloat(values.height) : undefined,
+    weight: values.weight ? parseFloat(values.weight) : undefined,
+    variants: normalizeVariants(values.variants),
+  }
+
+  return reqData
+}
+
+export const normalizeVariants = (
+  variants: ProductCreateSchemaType["variants"]
+) => {
+  return variants
+    .filter((variant) => variant.should_create)
+    .map((variant) => ({
+      title: Object.values(variant.options || {}).join(" / "),
+      options: variant.options,
+      prices: Object.entries(variant.prices || {}).map(([key, value]: any) => ({
+        currency_code: key,
+        amount: value ? parseFloat(value) : 0,
+      })),
+    }))
+}