diff --git a/packages/admin-next/dashboard/src/routes/products/product-options/components/edit-product-options-form/edit-product-options-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-options/components/edit-product-options-form/edit-product-options-form.tsx
index e918f83718..d71f91b15c 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-options/components/edit-product-options-form/edit-product-options-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-options/components/edit-product-options-form/edit-product-options-form.tsx
@@ -1,15 +1,13 @@
import { zodResolver } from "@hookform/resolvers/zod"
import { Product } from "@medusajs/medusa"
-import { Button, Drawer } from "@medusajs/ui"
+import { Button } from "@medusajs/ui"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import * as zod from "zod"
-import { Form } from "../../../../../components/common/form"
+import { RouteDrawer } from "../../../../../components/route-modal"
type EditProductOptionsFormProps = {
product: Product
- handleSuccess: () => void
- subscribe: (state: boolean) => void
}
const EditProductOptionsSchema = zod.object({})
@@ -22,22 +20,22 @@ export const EditProductOptionsForm = (props: EditProductOptionsFormProps) => {
})
return (
-
+
)
}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-options/product-options.tsx b/packages/admin-next/dashboard/src/routes/products/product-options/product-options.tsx
index 14e3efa70d..60f8469e74 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-options/product-options.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-options/product-options.tsx
@@ -1,39 +1,26 @@
-import { Drawer, Heading } from "@medusajs/ui"
+import { Heading } from "@medusajs/ui"
import { useAdminProduct } from "medusa-react"
import { useTranslation } from "react-i18next"
import { useParams } from "react-router-dom"
-import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { RouteDrawer } from "../../../components/route-modal"
import { EditProductOptionsForm } from "./components/edit-product-options-form"
export const ProductOptions = () => {
const { id } = useParams()
const { t } = useTranslation()
- const [open, onOpenChange, subscribe] = useRouteModalState()
const { product, isLoading, isError, error } = useAdminProduct(id!)
- const handleSuccess = () => {
- onOpenChange(false, true)
- }
-
if (isError) {
throw error
}
return (
-
-
-
- {t("products.editOptions")}
-
- {!isLoading && product && (
-
- )}
-
-
+
+
+ {t("products.editOptions")}
+
+ {!isLoading && product && }
+
)
}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx
index 70a277a67f..4935d217b4 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx
@@ -1,9 +1,17 @@
import { Product, SalesChannel } from "@medusajs/medusa"
-import { Button, Checkbox, FocusModal } from "@medusajs/ui"
+import { Button, Checkbox } from "@medusajs/ui"
import { RowSelectionState, createColumnHelper } from "@tanstack/react-table"
import { useAdminSalesChannels, useAdminUpdateProduct } from "medusa-react"
import { useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import {
+ RouteFocusModal,
+ useRouteModal,
+} from "../../../../../components/route-modal"
import { DataTable } from "../../../../../components/table/data-table"
import { useSalesChannelTableColumns } from "../../../../../hooks/table/columns/use-sales-channel-table-columns"
import { useSalesChannelTableFilters } from "../../../../../hooks/table/filters/use-sales-channel-table-filters"
@@ -12,18 +20,28 @@ import { useDataTable } from "../../../../../hooks/use-data-table"
type EditSalesChannelsFormProps = {
product: Product
- subscribe: (state: boolean) => void
- onSuccessfulSubmit: () => void
}
+const EditSalesChannelsSchema = zod.object({
+ sales_channels: zod.array(zod.string()).optional(),
+})
+
const PAGE_SIZE = 50
export const EditSalesChannelsForm = ({
product,
- subscribe,
- onSuccessfulSubmit,
}: EditSalesChannelsFormProps) => {
const { t } = useTranslation()
+ const { handleSuccess } = useRouteModal()
+
+ const form = useForm
>({
+ defaultValues: {
+ sales_channels: product.sales_channels?.map((sc) => sc.id) ?? [],
+ },
+ resolver: zodResolver(EditSalesChannelsSchema),
+ })
+
+ const { setValue } = form
const initialState =
product.sales_channels?.reduce((acc, curr) => {
@@ -34,13 +52,13 @@ export const EditSalesChannelsForm = ({
const [rowSelection, setRowSelection] =
useState(initialState)
- const isDirty = Object.entries(initialState).some(
- ([key, value]) => value !== rowSelection[key]
- )
-
useEffect(() => {
- subscribe(isDirty)
- }, [isDirty, subscribe])
+ const ids = Object.keys(rowSelection)
+ setValue("sales_channels", ids, {
+ shouldDirty: true,
+ shouldTouch: true,
+ })
+ }, [rowSelection, setValue])
const { searchParams, raw } = useSalesChannelTableQuery({
pageSize: PAGE_SIZE,
@@ -76,12 +94,10 @@ export const EditSalesChannelsForm = ({
product.id
)
- const handleSubmit = async () => {
- const selected = Object.keys(rowSelection).filter((key) => {
- return rowSelection[key]
- })
+ const handleSubmit = form.handleSubmit(async (data) => {
+ const arr = data.sales_channels ?? []
- const sales_channels = selected.map((id) => {
+ const sales_channels = arr.map((id) => {
return {
id,
}
@@ -93,46 +109,48 @@ export const EditSalesChannelsForm = ({
},
{
onSuccess: () => {
- onSuccessfulSubmit()
+ handleSuccess()
},
}
)
- }
+ })
if (isError) {
throw error
}
return (
-
-
-
-
-