fix(ep-commerce): provide FormProvider from EP Product Provider - #409
fix(ep-commerce): provide FormProvider from EP Product Provider#409mzaintariq wants to merge 1 commit into
Conversation
Match commerce Product Box so location/variant/quantity form state is shared with Add To Cart; without it, EPLocationPicker clicks are no-ops.
There was a problem hiding this comment.
Correct premise — there's no FormProvider anywhere in elastic-path today, so the PDP → ATC wiring really is dead. Keep it.
The reset is the problem (inline). Also worth adding the test now, not as a follow-up: the infra exists in registerEPAddToCartButton.test.tsx, and a child that setValues in a mount effect would catch this.
| const formMethods = useForm(); | ||
| useEffect(() => { | ||
| formMethods.reset(); | ||
| }, [dataProduct?.id, formMethods]); |
There was a problem hiding this comment.
reset() fires on mount, and child effects run before parent effects. EPStockProvider.tsx:232-243 sets SelectedLocationSlug from ?location= with deps [form] (stable ref in RHF 7.46.2), so it runs once — then this wipes it and never re-runs. Deep-linked location is lost and ATC posts with no locationId.
Suggest dropping the effect and mirroring commerce (contexts.tsx:26-32) — fresh form at render, before any child effect:
function ProductFormScope({ children }: { children: React.ReactNode }) {
const methods = useForm();
return <FormProvider {...methods}>{children}</FormProvider>;
}
// <ProductFormScope key={dataProduct?.id}>…</ProductFormScope>| <div className={className} data-ep-product-provider=""> | ||
| {content} | ||
| </div> | ||
| <FormProvider {...formMethods}> |
There was a problem hiding this comment.
"No change for Product Box–based PDPs" isn't established — compositions where form writers straddle this boundary (commerce Product Quantity outside, EP ATC inside) now split across two form contexts. Worth checking the real storefront pages before merge.
What does this MR do?
Mounts a react-hook-form
FormProviderinsideEPProductProvider, matching commerce Product Box’s contract. Without it, descendants that write selection via form context (SelectedLocationSlug, variants, quantity for ATC) silently no-op when the PDP uses EP Product Provider instead of Product Box.Changes
FormProviderfromuseForm()ProductProviderDesign decisions
FormProvider; this closes the gap for compositions that only use EP Product ProviderTesting
Reviewer notes