ConnectConsent

The consent screen: who is asking, where the customer returns to, what the client may do and the choices the shop asks for. It always shows, because skipping it would let a crafted link connect a session unnoticed.

import { ConnectConsent } from "@evolve-storefront/feature-mcp-connect/connect-consent";

Preview

With SelectionOpen in Storybook ↗

Usage

A customer with two companies chooses one.

const consent = await connectFlow()?.readConsent(await cookies());
if (!consent) return <ConnectExpired />;

return (
  <ConnectConsent
    consent={consent}
    action={answer}
    permissions={{ shop: t("scope-shop") }}
    selectionLabels={{ businessUnitId: t("business-unit") }}
  />
);

Props

Prop	Type	Description
consent	ConnectConsentDetails	What readConsent from createConnectFlow returned.
action	(formData: FormData) => void | Promise<void>	Receives the form: decision, and each selection under its name.
permissions?	Record<string, ReactNode>	What each scope lets the client do, in the customer's words.
selectionLabels?	Record<string, ReactNode>	The label of each selection, by name.
headingLevel?	HeadingLevel	Document level of the title. Defaults to 1, as the screen is a page.
children?	ReactNode	Compose the pieces (ConnectConsentHeader, ConnectConsentScopes, ConnectConsentSelections, ConnectConsentActions) for a layout of your own, or omit for the standard one. permissions and selectionLabels only feed the standard one.

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to ConnectConsent to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-mcp-connect/connect-consent.

ConnectConsentLayoutThe standard arrangement — what ConnectConsent renders when given no children.

Prop	Type	Description
consent	ConnectConsentDetails
permissions	Record<string, ReactNode>
selectionLabels	Record<string, ReactNode>
headingLevel	HeadingLevel

ConnectConsentActionsAllow and deny.

No props of its own.

ConnectConsentHeaderWho is asking, and where the customer returns to.

Prop	Type	Description
consent	Pick<ConnectConsentDetails, "clientName" | "redirectHost">
headingLevel?	HeadingLevel	Document level of the title. Defaults to 1.

Any other props go to the root element, like on a plain HTML element.

ConnectConsentScopesWhat the client may do, one item per scope.

Prop	Type	Description
scopes	string[]	The scopes the client gets: consent.scopes.
renderItem	ConnectConsentScopeRenderer	Renders each scope. Required — the feature owns no wording for them.

Any other props go to the root element, like on a plain HTML element.

ConnectConsentSelectionOne choice the shop asks for, submitted under the selection's name.

Prop	Type	Description
selection	ConnectSelectionField	One of consent.selections.
label?	ReactNode	What is being chosen, such as "Company to buy for". Defaults to the name.

Any other props go to the root element, like on a plain HTML element.

ConnectConsentSelectionsThe choices the shop asks for.

Prop	Type	Description
selections	ConnectSelectionField[]	The choices the shop asks for: consent.selections.
renderItem	ConnectConsentSelectionRenderer	Renders each selection.

Any other props go to the root element, like on a plain HTML element.