@medusajs/dashboard 3.0.0-snapshot-20251114155958 → 3.0.0-snapshot-20251126221441

package/src/routes/product-options/product-option-create/components/create-product-option-form/create-product-option-form.tsx

@@ -1,192 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, ProgressStatus, ProgressTabs, toast } from "@medusajs/ui"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-
-import { useState } from "react"
-import {
-  RouteFocusModal,
-  useRouteModal,
-} from "../../../../../components/modals"
-import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import { useCreateProductOption } from "../../../../../hooks/api"
-import { CreateProductOptionDetails } from "./create-product-option-details"
-import { CreateProductOptionOrganize } from "./create-product-option-organize"
-import {
-  CreateProductOptionDetailsSchema,
-  CreateProductOptionSchema,
-} from "./schema"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
-
-enum Tab {
-  DETAILS = "details",
-  ORGANIZE = "organize",
-}
-
-export const CreateProductOptionForm = () => {
-  const { t } = useTranslation()
-  const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
-  const [activeTab, setActiveTab] = useState<Tab>(Tab.DETAILS)
-  const [validDetails, setValidDetails] = useState(false)
-
-  const form = useForm<CreateProductOptionSchema>({
-    defaultValues: {
-      title: "",
-      values: [],
-      value_ranks: {},
-    },
-    resolver: zodResolver(CreateProductOptionSchema),
-  })
-
-  const handleTabChange = (tab: Tab) => {
-    if (tab === Tab.ORGANIZE) {
-      const { title, values } = form.getValues()
-
-      const result = CreateProductOptionDetailsSchema.safeParse({
-        title,
-        values,
-      })
-
-      if (!result.success) {
-        result.error.errors.forEach((error) => {
-          form.setError(
-            error.path.join(".") as keyof CreateProductOptionSchema,
-            {
-              type: "manual",
-              message: error.message,
-            }
-          )
-        })
-
-        return
-      }
-
-      form.clearErrors()
-      setValidDetails(true)
-    }
-
-    setActiveTab(tab)
-  }
-
-  const { mutateAsync, isPending } = useCreateProductOption()
-
-  const handleSubmit = form.handleSubmit((data) => {
-    const { title, values, value_ranks } = data
-
-    mutateAsync(
-      {
-        title,
-        values,
-        ranks: value_ranks,
-      },
-      {
-        onSuccess: ({ product_option }) => {
-          toast.success(
-            t("productOptions.create.successToast", {
-              title: product_option.title,
-            })
-          )
-
-          handleSuccess(`/product-options/${product_option.id}`)
-        },
-        onError: (error) => {
-          toast.error(error.message)
-        },
-      }
-    )
-  })
-
-  const organizeStatus: ProgressStatus =
-    form.getFieldState("value_ranks")?.isDirty || activeTab === Tab.ORGANIZE
-      ? "in-progress"
-      : "not-started"
-
-  const detailsStatus: ProgressStatus = validDetails
-    ? "completed"
-    : "in-progress"
-
-  return (
-    <RouteFocusModal.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex size-full flex-col overflow-hidden"
-      >
-        <ProgressTabs
-          dir={direction}
-          value={activeTab}
-          onValueChange={(tab) => handleTabChange(tab as Tab)}
-          className="flex size-full flex-col"
-        >
-          <RouteFocusModal.Header>
-            <div className="flex w-full items-center justify-between">
-              <div className="-my-2 w-full max-w-[400px] border-l">
-                <ProgressTabs.List className="grid w-full grid-cols-2">
-                  <ProgressTabs.Trigger
-                    value={Tab.DETAILS}
-                    status={detailsStatus}
-                    className="w-full min-w-0 overflow-hidden"
-                  >
-                    <span className="truncate">
-                      {t("productOptions.create.tabs.details")}
-                    </span>
-                  </ProgressTabs.Trigger>
-                  <ProgressTabs.Trigger
-                    value={Tab.ORGANIZE}
-                    status={organizeStatus}
-                    className="w-full min-w-0 overflow-hidden"
-                  >
-                    <span className="truncate">
-                      {t("productOptions.create.tabs.organize")}
-                    </span>
-                  </ProgressTabs.Trigger>
-                </ProgressTabs.List>
-              </div>
-            </div>
-          </RouteFocusModal.Header>
-          <RouteFocusModal.Body className="flex size-full flex-col overflow-auto">
-            <ProgressTabs.Content value={Tab.DETAILS}>
-              <CreateProductOptionDetails form={form} />
-            </ProgressTabs.Content>
-            <ProgressTabs.Content
-              value={Tab.ORGANIZE}
-              className="bg-ui-bg-subtle flex-1"
-            >
-              <CreateProductOptionOrganize form={form} />
-            </ProgressTabs.Content>
-          </RouteFocusModal.Body>
-          <RouteFocusModal.Footer>
-            <div className="flex items-center justify-end gap-x-2">
-              <RouteFocusModal.Close asChild>
-                <Button size="small" variant="secondary">
-                  {t("actions.cancel")}
-                </Button>
-              </RouteFocusModal.Close>
-              {activeTab === Tab.ORGANIZE ? (
-                <Button
-                  key="submit-btn"
-                  size="small"
-                  variant="primary"
-                  type="submit"
-                  isLoading={isPending}
-                >
-                  {t("actions.save")}
-                </Button>
-              ) : (
-                <Button
-                  key="continue-btn"
-                  size="small"
-                  variant="primary"
-                  type="button"
-                  onClick={() => handleTabChange(Tab.ORGANIZE)}
-                >
-                  {t("actions.continue")}
-                </Button>
-              )}
-            </div>
-          </RouteFocusModal.Footer>
-        </ProgressTabs>
-      </KeyboundForm>
-    </RouteFocusModal.Form>
-  )
-}

package/src/routes/product-options/product-option-create/components/create-product-option-form/create-product-option-organize.tsx

@@ -1,77 +0,0 @@
-import { Text } from "@medusajs/ui"
-import { useMemo } from "react"
-import { UseFormReturn, useWatch } from "react-hook-form"
-import { SortableList } from "../../../../../components/common/sortable-list"
-import { CreateProductOptionSchema } from "./schema"
-
-type CreateProductOptionOrganizeProps = {
-  form: UseFormReturn<CreateProductOptionSchema>
-}
-
-type ValueItem = {
-  id: string
-  value: string
-  rank: number
-}
-
-export const CreateProductOptionOrganize = ({
-  form,
-}: CreateProductOptionOrganizeProps) => {
-  const values = useWatch({
-    control: form.control,
-    name: "values",
-  })
-
-  const valueRanks = useWatch({
-    control: form.control,
-    name: "value_ranks",
-  })
-
-  const items = useMemo<ValueItem[]>(() => {
-    if (!values || values.length === 0) {
-      return []
-    }
-
-    return values
-      .map((value, index) => ({
-        id: value,
-        value,
-        rank: valueRanks?.[value] ?? index,
-      }))
-      .sort((a, b) => a.rank - b.rank)
-  }, [values, valueRanks])
-
-  const handleChange = (newItems: ValueItem[]) => {
-    const newRanks: Record<string, number> = {}
-    newItems.forEach((item, index) => {
-      newRanks[item.value] = index
-    })
-
-    form.setValue("value_ranks", newRanks, {
-      shouldDirty: true,
-      shouldTouch: true,
-    })
-  }
-
-  if (!values || values.length === 0) {
-    return null
-  }
-
-  return (
-    <SortableList
-      items={items}
-      onChange={handleChange}
-      renderItem={(item) => (
-        <SortableList.Item
-          id={item.id}
-          className="border-ui-border-base border-b last:border-b-0"
-        >
-          <div className="flex flex-1 items-center gap-x-3 px-4 py-3">
-            <SortableList.DragHandle />
-            <Text size="small">{item.value}</Text>
-          </div>
-        </SortableList.Item>
-      )}
-    />
-  )
-}

package/src/routes/product-options/product-option-create/components/create-product-option-form/index.ts

@@ -1 +0,0 @@
-export { CreateProductOptionForm } from "./create-product-option-form"

package/src/routes/product-options/product-option-create/components/create-product-option-form/schema.ts

@@ -1,15 +0,0 @@
-import { z } from "zod"
-
-export const CreateProductOptionDetailsSchema = z.object({
-  title: z.string().min(1),
-  values: z.array(z.string()).min(1, "At least one value is required"),
-})
-
-export type CreateProductOptionSchema = z.infer<
-  typeof CreateProductOptionSchema
->
-export const CreateProductOptionSchema = z
-  .object({
-    value_ranks: z.record(z.string(), z.number()).optional(),
-  })
-  .merge(CreateProductOptionDetailsSchema)

package/src/routes/product-options/product-option-create/index.ts

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

package/src/routes/product-options/product-option-create/product-option-create.tsx

@@ -1,10 +0,0 @@
-import { RouteFocusModal } from "../../../components/modals"
-import { CreateProductOptionForm } from "./components/create-product-option-form/create-product-option-form"
-
-export const ProductOptionCreate = () => {
-  return (
-    <RouteFocusModal>
-      <CreateProductOptionForm />
-    </RouteFocusModal>
-  )
-}

package/src/routes/product-options/product-option-detail/breadcrumb.tsx

@@ -1,14 +0,0 @@
-import { HttpTypes } from "@medusajs/types"
-import { UIMatch } from "react-router-dom"
-
-export const ProductOptionBreadcrumb = (
-  match: UIMatch<HttpTypes.AdminProductOptionResponse>
-) => {
-  const productOption = match.data.product_option
-
-  if (!productOption) {
-    return null
-  }
-
-  return <span>{productOption.title}</span>
-}

package/src/routes/product-options/product-option-detail/components/product-option-general-section/index.ts

@@ -1 +0,0 @@
-export * from "./product-option-general-section.tsx"

package/src/routes/product-options/product-option-detail/components/product-option-general-section/product-option-general-section.tsx

@@ -1,81 +0,0 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
-import { HttpTypes } from "@medusajs/types"
-import { Badge, Container, Heading } from "@medusajs/ui"
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { ActionMenu } from "../../../../../components/common/action-menu"
-import { useDeleteProductOptionAction } from "../../../common/hooks/use-delete-product-option-action.tsx"
-
-export const ProductOptionGeneralSection = ({
-  productOption,
-}: {
-  productOption: HttpTypes.AdminProductOption
-}) => {
-  const { t } = useTranslation()
-
-  const handleDelete = useDeleteProductOptionAction(productOption)
-
-  const sortedValues = useMemo(() => {
-    if (!productOption.values) {
-      return []
-    }
-
-    return [...productOption.values].sort((a: any, b: any) => {
-      const rankA = a.rank ?? Number.MAX_VALUE
-      const rankB = b.rank ?? Number.MAX_VALUE
-      return rankA - rankB
-    })
-  }, [productOption.values])
-
-  return (
-    <Container className="divide-y p-0">
-      <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{productOption.title}</Heading>
-        <div className="flex items-center gap-x-2">
-          <Badge size="xsmall" color="blue">
-            {t(
-              `general.${productOption.is_exclusive ? "exclusive" : "global"}`
-            )}
-          </Badge>
-          <ActionMenu
-            groups={[
-              {
-                actions: [
-                  {
-                    label: t("actions.edit"),
-                    icon: <PencilSquare />,
-                    to: "edit",
-                  },
-                ],
-              },
-              {
-                actions: [
-                  {
-                    label: t("actions.delete"),
-                    icon: <Trash />,
-                    onClick: handleDelete,
-                  },
-                ],
-              },
-            ]}
-          />
-        </div>
-      </div>
-      <div className="px-6 py-4">
-        <ValuesDisplay values={sortedValues} />
-      </div>
-    </Container>
-  )
-}
-
-const ValuesDisplay = ({ values }: { values: any[] }) => {
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      {values.map((value) => (
-        <Badge key={value.id} size="xsmall">
-          {value.value}
-        </Badge>
-      ))}
-    </div>
-  )
-}

package/src/routes/product-options/product-option-detail/components/product-option-product-section/index.ts

@@ -1 +0,0 @@
-export { ProductOptionProductSection } from "./product-option-product-section"

package/src/routes/product-options/product-option-detail/components/product-option-product-section/product-option-product-section.tsx

@@ -1,74 +0,0 @@
-import { HttpTypes } from "@medusajs/types"
-import { Container } from "@medusajs/ui"
-import { keepPreviousData } from "@tanstack/react-query"
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { DataTable } from "../../../../../components/data-table"
-import { useProducts } from "../../../../../hooks/api"
-import { useProductTableColumns } from "../../../../../hooks/table/columns"
-import { useProductTableQuery } from "../../../../../hooks/table/query"
-
-type ProductOptionProductSectionProps = {
-  productOption: HttpTypes.AdminProductOption
-}
-
-const PAGE_SIZE = 10
-
-export const ProductOptionProductSection = ({
-  productOption,
-}: ProductOptionProductSectionProps) => {
-  const { t } = useTranslation()
-
-  const { searchParams } = useProductTableQuery({ pageSize: PAGE_SIZE })
-
-  const productIds = productOption.products?.map((p: any) => p.id) || []
-
-  const { products, count, isLoading, isError, error } = useProducts(
-    {
-      limit: PAGE_SIZE,
-      ...searchParams,
-      id: productIds.length > 0 ? productIds : undefined,
-    },
-    {
-      placeholderData: keepPreviousData,
-      enabled: productIds.length > 0,
-    }
-  )
-
-  const columns = useColumns()
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <Container className="divide-y p-0">
-      <DataTable
-        data={products}
-        columns={columns}
-        rowCount={count}
-        pageSize={PAGE_SIZE}
-        getRowId={(row) => row.id}
-        heading={t("products.domain")}
-        emptyState={{
-          empty: {
-            heading: t("general.noRecordsMessage"),
-          },
-          filtered: {
-            heading: t("general.noRecordsMessage"),
-            description: t("general.noRecordsMessageFiltered"),
-          },
-        }}
-        isLoading={isLoading}
-        enableSearch={true}
-        rowHref={(row) => `/products/${row.id}`}
-      />
-    </Container>
-  )
-}
-
-const useColumns = () => {
-  const columns = useProductTableColumns()
-
-  return useMemo(() => [...columns], [columns])
-}

package/src/routes/product-options/product-option-detail/index.ts

@@ -1,3 +0,0 @@
-export { ProductOptionBreadcrumb as Breadcrumb } from "./breadcrumb"
-export { ProductOptionDetail as Component } from "./product-option-detail"
-export { productOptionLoader as loader } from "./loader"

package/src/routes/product-options/product-option-detail/loader.ts

@@ -1,17 +0,0 @@
-import { LoaderFunctionArgs } from "react-router-dom"
-
-import { sdk } from "../../../lib/client"
-import { queryClient } from "../../../lib/query-client"
-import { productOptionsQueryKeys } from "../../../hooks/api/product-options.tsx"
-
-const productOptionDetailQuery = (id: string) => ({
-  queryKey: productOptionsQueryKeys.detail(id),
-  queryFn: async () => sdk.admin.productOption.retrieve(id),
-})
-
-export const productOptionLoader = async ({ params }: LoaderFunctionArgs) => {
-  const id = params.id
-  const query = productOptionDetailQuery(id!)
-
-  return queryClient.ensureQueryData(query)
-}

package/src/routes/product-options/product-option-detail/product-option-detail.tsx

@@ -1,50 +0,0 @@
-import { useLoaderData, useParams } from "react-router-dom"
-
-import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { SingleColumnPage } from "../../../components/layout/pages"
-import { useExtension } from "../../../providers/extension-provider"
-import { useProductOption } from "../../../hooks/api"
-import { productOptionLoader } from "./loader.ts"
-import { ProductOptionGeneralSection } from "./components/product-option-general-section"
-import { ProductOptionProductSection } from "./components/product-option-product-section"
-
-export const ProductOptionDetail = () => {
-  const { id } = useParams()
-
-  const initialData = useLoaderData() as Awaited<
-    ReturnType<typeof productOptionLoader>
-  >
-
-  const { getWidgets } = useExtension()
-
-  const { product_option, isLoading, isError, error } = useProductOption(
-    id!,
-    undefined,
-    {
-      initialData,
-    }
-  )
-
-  if (isLoading || !product_option) {
-    return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />
-  }
-
-  if (isError) {
-    throw error
-  }
-
-  return (
-    <SingleColumnPage
-      widgets={{
-        after: getWidgets("product_option.details.after"),
-        before: getWidgets("product_option.details.before"),
-      }}
-      showJSON
-      showMetadata
-      data={product_option}
-    >
-      <ProductOptionGeneralSection productOption={product_option} />
-      <ProductOptionProductSection productOption={product_option} />
-    </SingleColumnPage>
-  )
-}

package/src/routes/product-options/product-option-edit/components/edit-product-option-form/edit-product-option-details.tsx

@@ -1,94 +0,0 @@
-import { Input } from "@medusajs/ui"
-import { useEffect } from "react"
-import { UseFormReturn, useWatch } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-
-import { Form } from "../../../../../components/common/form"
-import { ChipInput } from "../../../../../components/inputs/chip-input"
-import { EditProductOptionSchema } from "./schema"
-
-type EditProductOptionDetailsProps = {
-  form: UseFormReturn<EditProductOptionSchema>
-}
-
-export const EditProductOptionDetails = ({
-  form,
-}: EditProductOptionDetailsProps) => {
-  const { t } = useTranslation()
-
-  const values = useWatch({
-    control: form.control,
-    name: "values",
-  })
-
-  const valueRanks = useWatch({
-    control: form.control,
-    name: "value_ranks",
-  })
-
-  useEffect(() => {
-    if (!values || !valueRanks) {
-      return
-    }
-
-    const validValueSet = new Set(values)
-    const currentRanks = { ...valueRanks }
-    let hasStaleEntries = false
-
-    Object.keys(currentRanks).forEach((key) => {
-      if (!validValueSet.has(key)) {
-        delete currentRanks[key]
-        hasStaleEntries = true
-      }
-    })
-
-    if (hasStaleEntries) {
-      form.setValue("value_ranks", currentRanks, {
-        shouldDirty: true,
-        shouldTouch: true,
-      })
-    }
-  }, [values, valueRanks, form])
-
-  return (
-    <div className="flex flex-col gap-y-4">
-      <Form.Field
-        control={form.control}
-        name="title"
-        render={({ field }) => {
-          return (
-            <Form.Item>
-              <Form.Label>{t("productOptions.fields.title.label")}</Form.Label>
-              <Form.Control>
-                <Input
-                  autoComplete="off"
-                  {...field}
-                  placeholder={t("productOptions.fields.title.placeholder")}
-                />
-              </Form.Control>
-              <Form.ErrorMessage />
-            </Form.Item>
-          )
-        }}
-      />
-      <Form.Field
-        control={form.control}
-        name="values"
-        render={({ field }) => {
-          return (
-            <Form.Item>
-              <Form.Label>{t("productOptions.fields.values.label")}</Form.Label>
-              <Form.Control>
-                <ChipInput
-                  {...field}
-                  placeholder={t("productOptions.fields.values.placeholder")}
-                />
-              </Form.Control>
-              <Form.ErrorMessage />
-            </Form.Item>
-          )
-        }}
-      />
-    </div>
-  )
-}