Implement the RRM express setup dashboard entry point.

assets/js/components/Banner/CTAButton.js → assets/js/components/Banner/CTAButton.tsx

@@ -17,24 +17,40 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import { MouseEvent } from 'react';
 
 /**
  * Internal dependencies
  */
 import { SpinnerButton } from 'googlesitekit-components';
 import ExternalIcon from '@/svg/icons/external.svg';
 
-export default function CTAButton( {
-	label,
-	ariaLabel,
-	disabled,
-	inProgress,
-	onClick,
-	href,
-	external = false,
-	hideExternalIndicator = false,
-} ) {
+// eslint-disable-next-line sitekit/acronym-case
+export interface CTAButtonProps {
+	ariaLabel?: string;
+	disabled?: boolean;
+	external?: boolean;
+	hideExternalIndicator?: boolean;
+	href?: string;
+	inProgress?: boolean;
+	label?: string;
+	onClick?: (
+		event: MouseEvent< HTMLAnchorElement | HTMLButtonElement >
+	) => void;
+}
+
+export default function CTAButton(
+	{
+		ariaLabel,
+		disabled = false,
+		external = false,
+		hideExternalIndicator = false,
+		href,
+		inProgress = false,
+		label,
+		onClick = () => {},
+	}: CTAButtonProps /* eslint-disable-line sitekit/acronym-case */
+) {
 	if ( ! label || ( ! onClick && ! href ) ) {
 		return null;
 	}
@@ -45,6 +61,7 @@ export default function CTAButton( {
 	}
 
 	return (
+		// @ts-expect-error `SpinnerButton` component is not yet typed.
 		<SpinnerButton
 			className="googlesitekit-banner__cta"
 			aria-label={ ariaLabel }
@@ -59,17 +76,3 @@ export default function CTAButton( {
 		</SpinnerButton>
 	);
 }
-
-CTAButton.propTypes = {
-	label: PropTypes.string,
-	ariaLabel: PropTypes.string,
-	disabled: PropTypes.bool,
-	inProgress: PropTypes.bool,
-	onClick: PropTypes.func,
-	href: PropTypes.string,
-	dismissOnClick: PropTypes.bool,
-	dismissOptions: PropTypes.shape( {
-		expiresInSeconds: PropTypes.number,
-		skipHidingFromQueue: PropTypes.bool,
-	} ),
-};

assets/js/components/Banner/DismissButton.js → assets/js/components/Banner/DismissButton.tsx

@@ -17,7 +17,7 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import { MouseEvent, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
@@ -29,18 +29,29 @@ import { __ } from '@wordpress/i18n';
  */
 import { Button } from 'googlesitekit-components';
 
+export interface DismissButtonProps {
+	className?: string;
+	disabled?: boolean;
+	label?: ReactNode;
+	onClick?: (
+		event: MouseEvent< HTMLAnchorElement | HTMLButtonElement >
+	) => void;
+	tertiary?: boolean;
+}
+
 export default function DismissButton( {
 	className,
 	label = __( 'Maybe later', 'google-site-kit' ),
 	onClick,
 	disabled,
 	tertiary = true,
-} ) {
+}: DismissButtonProps ) {
 	if ( ! onClick ) {
 		return null;
 	}
 
 	return (
+		// @ts-expect-error `Button` component is not yet typed.
 		<Button
 			className={ className }
 			onClick={ onClick }
@@ -51,15 +62,3 @@ export default function DismissButton( {
 		</Button>
 	);
 }
-
-DismissButton.propTypes = {
-	className: PropTypes.string,
-	label: PropTypes.string,
-	onClick: PropTypes.func,
-	disabled: PropTypes.bool,
-	tertiary: PropTypes.bool,
-	dismissOptions: PropTypes.shape( {
-		expiresInSeconds: PropTypes.number,
-		skipHidingFromQueue: PropTypes.bool,
-	} ),
-};

assets/js/components/Banner/index.js → assets/js/components/Banner/index.tsx

@@ -18,7 +18,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
+import { FC, ReactChild } from 'react';
 
 /**
  * WordPress dependencies
@@ -29,21 +29,41 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import Notice from '@/js/components/Notice';
+import { NOTICE_TYPES } from '@/js/components/Notice/constants';
 import {
 	BREAKPOINT_SMALL,
 	BREAKPOINT_TABLET,
 	useBreakpoint,
 } from '@/js/hooks/useBreakpoint';
-import CTAButton from './CTAButton';
+import CTAButton, { CTAButtonProps } from './CTAButton';
 import Description from './Description';
-import DismissButton from './DismissButton';
+import DismissButton, { DismissButtonProps } from './DismissButton';
 import Footer from './Footer';
 import HelpText from './HelpText';
-import LearnMoreLink from './LearnMoreLink';
+import { LearnMoreLinkProps } from './LearnMoreLink';
 import Title from './Title';
 import TitleIcon from './TitleIcon';
 
-const Banner = forwardRef(
+export interface BannerProps {
+	className?: string;
+	titleIcon?: ReactChild;
+	title?: string;
+	description?: ReactChild;
+	additionalDescription?: ReactChild;
+	errorText?: string;
+	helpText?: string;
+	learnMoreLink?: LearnMoreLinkProps;
+	dismissButton?: DismissButtonProps;
+	ctaButton?: CTAButtonProps;
+	svg?: {
+		desktop?: string;
+		mobile?: string;
+		verticalPosition?: 'top' | 'center' | 'bottom';
+	};
+	footer?: ReactChild;
+}
+
+const Banner: FC< BannerProps > = forwardRef< HTMLDivElement, BannerProps >(
 	(
 		{
 			className,
@@ -65,7 +85,7 @@ const Banner = forwardRef(
 		const isMobileOrTablet =
 			breakpoint === BREAKPOINT_SMALL || breakpoint === BREAKPOINT_TABLET;
 
-		let SVGData = null;
+		let SVGData: string | null = null;
 		if ( isMobileOrTablet && svg?.mobile ) {
 			SVGData = svg.mobile;
 		} else if ( ! isMobileOrTablet && svg?.desktop ) {
@@ -93,7 +113,10 @@ const Banner = forwardRef(
 					{ helpText && <HelpText>{ helpText }</HelpText> }
 
 					{ errorText && (
-						<Notice type="error" description={ errorText } />
+						<Notice
+							type={ NOTICE_TYPES.ERROR }
+							description={ errorText }
+						/>
 					) }
 
 					<div className="googlesitekit-notice__action">
@@ -123,25 +146,4 @@ const Banner = forwardRef(
 	}
 );
 
-Banner.propTypes = {
-	titleIcon: PropTypes.node,
-	title: PropTypes.string,
-	description: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ),
-	additionalDescription: PropTypes.oneOfType( [
-		PropTypes.string,
-		PropTypes.node,
-	] ),
-	errorText: PropTypes.string,
-	helpText: PropTypes.string,
-	learnMoreLink: PropTypes.shape( LearnMoreLink.propTypes ),
-	dismissButton: PropTypes.shape( DismissButton.propTypes ),
-	ctaButton: PropTypes.shape( CTAButton.propTypes ),
-	svg: PropTypes.shape( {
-		desktop: PropTypes.elementType,
-		mobile: PropTypes.elementType,
-		verticalPosition: PropTypes.oneOf( [ 'top', 'center', 'bottom' ] ),
-	} ),
-	footer: PropTypes.node,
-};
-
 export default Banner;

assets/js/components/PoweredByModule/index.stories.tsx

@@ -0,0 +1,69 @@
+/**
+ * "Powered By Module" Component Stories.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { ReactElement } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { WPDataRegistry } from '@wordpress/data/build-types/registry';
+
+/**
+ * Internal dependencies
+ */
+import PoweredByModule, {
+	PoweredByModuleProps,
+} from '@/js/components/PoweredByModule';
+import { MODULE_SLUG_READER_REVENUE_MANAGER } from '@/js/modules/reader-revenue-manager/constants';
+import { Story } from '@/js/types/Story';
+import { provideModuleRegistrations, provideModules } from '@tests/js/utils';
+import WithRegistrySetup from '@tests/js/WithRegistrySetup';
+
+function Template( args: PoweredByModuleProps ) {
+	return <PoweredByModule { ...args } />;
+}
+
+export const ReaderRevenueManager = Template.bind(
+	{}
+) as Story< PoweredByModuleProps >;
+ReaderRevenueManager.storyName = 'Reader Revenue Manager';
+ReaderRevenueManager.args = {
+	slug: MODULE_SLUG_READER_REVENUE_MANAGER,
+};
+
+export default {
+	title: 'Components/PoweredByModule',
+	component: PoweredByModule,
+	decorators: [
+		( StoryComponent: () => ReactElement ) => {
+			function setupRegistry( registry: WPDataRegistry ) {
+				provideModules( registry );
+				provideModuleRegistrations( registry );
+			}
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<StoryComponent />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

assets/js/components/PoweredByModule/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * PoweredByModule component.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Select, useSelect } from 'googlesitekit-data';
+import Typography from '@/js/components/Typography';
+import { SIZE_SMALL, TYPE_BODY } from '@/js/components/Typography/constants';
+import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
+
+export interface PoweredByModuleProps {
+	slug: string;
+}
+
+export default function PoweredByModule( { slug }: PoweredByModuleProps ) {
+	const { Icon, name } = useSelect(
+		( select: Select ) => select( CORE_MODULES ).getModule( slug ),
+		[ slug ]
+	);
+
+	const text = sprintf(
+		// translators: %s: Module name.
+		__( 'Powered by %s', 'google-site-kit' ),
+		name
+	);
+
+	const className = classnames(
+		'googlesitekit-powered-by-module',
+		`googlesitekit-powered-by-module--${ slug }`
+	);
+
+	return (
+		<div className={ className }>
+			<Icon
+				aria-hidden="true"
+				className="googlesitekit-powered-by-module__icon"
+			/>
+			<Typography
+				as="div"
+				className="googlesitekit-powered-by-module__text"
+				size={ SIZE_SMALL }
+				type={ TYPE_BODY }
+			>
+				{ text }
+			</Typography>
+		</div>
+	);
+}

assets/js/googlesitekit-modules-reader-revenue-manager.ts

@@ -22,12 +22,15 @@
 import Data from 'googlesitekit-data';
 import Modules from 'googlesitekit-modules';
 import Notifications from 'googlesitekit-notifications';
+import Widgets from 'googlesitekit-widgets';
 import {
 	registerModule,
 	registerNotifications,
 	registerStore,
+	registerWidgets,
 } from './modules/reader-revenue-manager';
 
 registerStore( Data );
 registerModule( Modules );
+registerWidgets( Widgets );
 registerNotifications( Notifications );