diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx index 7dee9da667..0e61863103 100644 --- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx +++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-form/product-create-form.tsx @@ -1,5 +1,5 @@ import { zodResolver } from "@hookform/resolvers/zod" -import { HttpTypes, SalesChannelDTO } from "@medusajs/types" +import { HttpTypes } from "@medusajs/types" import { Button, ProgressStatus, ProgressTabs, toast } from "@medusajs/ui" import { useEffect, useMemo, useState } from "react" import { useForm, useWatch } from "react-hook-form" @@ -9,7 +9,6 @@ import { useRouteModal, } from "../../../../../components/modals" import { useCreateProduct } from "../../../../../hooks/api/products" -import { useRegions } from "../../../../../hooks/api/regions" import { sdk } from "../../../../../lib/client" import { isFetchError } from "../../../../../lib/is-fetch-error" import { @@ -34,12 +33,18 @@ type TabState = Record const SAVE_DRAFT_BUTTON = "save-draft-button" -let LAST_VISITED_TAB: Tab | null = null - -type ProductCreateFormProps = { defaultChannel?: SalesChannelDTO } +type ProductCreateFormProps = { + defaultChannel?: HttpTypes.AdminSalesChannel + regions: HttpTypes.AdminRegion[] + store: HttpTypes.AdminStore + pricePreferences: HttpTypes.AdminPricePreference[] +} export const ProductCreateForm = ({ defaultChannel, + regions, + store, + pricePreferences, }: ProductCreateFormProps) => { const [tab, setTab] = useState(Tab.DETAILS) const [tabState, setTabState] = useState({ @@ -63,17 +68,19 @@ export const ProductCreateForm = ({ }) const { mutateAsync, isPending } = useCreateProduct() - const { regions } = useRegions({ limit: 9999 }) const regionsCurrencyMap = useMemo(() => { if (!regions?.length) { return {} } - return regions.reduce((acc, reg) => { - acc[reg.id] = reg.currency_code - return acc - }, {} as Record) + return regions.reduce( + (acc, reg) => { + acc[reg.id] = reg.currency_code + return acc + }, + {} as Record + ) }, [regions]) /** @@ -197,8 +204,6 @@ export const ProductCreateForm = ({ } setTabState({ ...currentState }) - - LAST_VISITED_TAB = tab }, [tab]) return ( @@ -284,7 +289,12 @@ export const ProductCreateForm = ({ className="size-full overflow-y-auto" value={Tab.VARIANTS} > - + {showInventoryTab && ( + regions: HttpTypes.AdminRegion[] + store: HttpTypes.AdminStore + pricePreferences: HttpTypes.AdminPricePreference[] } export const ProductCreateVariantsForm = ({ form, + regions, + store, + pricePreferences, }: ProductCreateVariantsFormProps) => { - const { - regions, - isPending: isRegionsPending, - isError: isRegionError, - error: regionError, - } = useRegions({ limit: 9999 }) - - const { - store, - isPending: isStorePending, - isError: isStoreError, - error: storeError, - } = useStore() - - const { - price_preferences, - isPending: isPricePreferencesPending, - isError: isPricePreferencesError, - error: pricePreferencesError, - } = usePricePreferences({}) - const { setCloseOnEscape } = useRouteModal() const currencyCodes = useMemo( @@ -72,7 +54,7 @@ export const ProductCreateVariantsForm = ({ options, currencies: currencyCodes, regions, - pricePreferences: price_preferences, + pricePreferences, }) const variantData = useMemo( @@ -80,30 +62,9 @@ export const ProductCreateVariantsForm = ({ [variants] ) - const isPending = - isRegionsPending || - isStorePending || - isPricePreferencesPending || - !store || - !regions || - !price_preferences - - if (isRegionError) { - throw regionError - } - - if (isStoreError) { - throw storeError - } - - if (isPricePreferencesError) { - throw pricePreferencesError - } - return (
{ - const { store } = useStore({ + const { + store, + isPending: isStorePending, + isError: isStoreError, + error: storeError, + } = useStore({ fields: "default_sales_channel", }) - const { sales_channel, isPending } = useSalesChannel( - store?.default_sales_channel_id, - { - enabled: !!store, - } - ) + const { + sales_channel, + isPending: isSalesChannelPending, + isError: isSalesChannelError, + error: salesChannelError, + } = useSalesChannel(store?.default_sales_channel_id!, { + enabled: !!store?.default_sales_channel_id, + }) - const canDisplayForm = store && !isPending + const { + regions, + isPending: isRegionsPending, + isError: isRegionsError, + error: regionsError, + } = useRegions({ limit: 9999 }) + + const { + price_preferences, + isPending: isPricePreferencesPending, + isError: isPricePreferencesError, + error: pricePreferencesError, + } = usePricePreferences({ + limit: 9999, + }) + + const ready = + !!store && + !isStorePending && + !!regions && + !isRegionsPending && + !!sales_channel && + !isSalesChannelPending && + !!price_preferences && + !isPricePreferencesPending + + if (isStoreError) { + throw storeError + } + + if (isRegionsError) { + throw regionsError + } + + if (isSalesChannelError) { + throw salesChannelError + } + + if (isPricePreferencesError) { + throw pricePreferencesError + } return ( - {canDisplayForm && } + {ready && ( + + )} ) }