Merge pull request #9079 from google/enhancement/8846-rrm-setup-cta-w…

…idget Add Setup CTA Banner for RRM
google · Aug 7, 2024 · e572e59 · e572e59
2 parents 9f655fb + 8c9c74d
commit e572e59
Show file tree

Hide file tree

Showing 21 changed files with 741 additions and 23 deletions.
diff --git a/assets/js/components/DashboardMainApp.js b/assets/js/components/DashboardMainApp.js
@@ -46,6 +46,7 @@ import {
 	AudienceSegmentationSetupCTAWidget,
 	AudienceSelectionPanel,
 } from '../modules/analytics-4/components/audience-segmentation/dashboard';
+import ReaderRevenueManagerSetupCTABanner from '../modules/reader-revenue-manager/components/ReaderRevenueManagerSetupCTABanner';
 import EntitySearchInput from './EntitySearchInput';
 import DateRangeSelector from './DateRangeSelector';
 import HelpMenu from './help/HelpMenu';
@@ -80,6 +81,7 @@ import { getContextScrollTop } from '../util/scroll';
 
 export default function DashboardMainApp() {
 	const audienceSegmentationEnabled = useFeature( 'audienceSegmentation' );
+	const readerRevenueManagerEnabled = useFeature( 'rrmModule' );
 
 	const [ showSurveyPortal, setShowSurveyPortal ] = useState( false );
 
@@ -230,6 +232,14 @@ export default function DashboardMainApp() {
 				</Fragment>
 			) }
 
+			{ ! viewOnlyDashboard && (
+				<Fragment>
+					{ readerRevenueManagerEnabled && (
+						<ReaderRevenueManagerSetupCTABanner />
+					) }
+				</Fragment>
+			) }
+
 			<OverlayNotificationsRenderer />
 
 			{ isKeyMetricsWidgetHidden !== true && (

diff --git a/assets/js/modules/reader-revenue-manager/components/ReaderRevenueManagerSetupCTABanner.js b/assets/js/modules/reader-revenue-manager/components/ReaderRevenueManagerSetupCTABanner.js
@@ -0,0 +1,198 @@
+/**
+ * Reader Revenue Manager Setup CTA Banner component.
+ *
+ * Site Kit by Google, Copyright 2024 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 PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { createInterpolateElement, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useDispatch, useSelect } from 'googlesitekit-data';
+import { Button } from 'googlesitekit-components';
+import {
+	BREAKPOINT_SMALL,
+	BREAKPOINT_TABLET,
+	useBreakpoint,
+} from '../../../hooks/useBreakpoint';
+import useActivateModuleCallback from '../../../hooks/useActivateModuleCallback';
+import whenInactive from '../../../util/when-inactive';
+import { withWidgetComponentProps } from '../../../googlesitekit/widgets/util';
+import { CORE_USER } from '../../../googlesitekit/datastore/user/constants';
+import {
+	READER_REVENUE_MANAGER_MODULE_SLUG,
+	READER_REVENUE_MANAGER_SETUP_BANNER_DISMISSED_KEY,
+} from '../datastore/constants';
+import { Cell, Grid, Row } from '../../../material-components';
+import SetupSVG from '../../../../svg/graphics/reader-revenue-manager-setup.svg';
+import SetupTabletSVG from '../../../../svg/graphics/reader-revenue-manager-setup-tablet.svg';
+import SetupMobileSVG from '../../../../svg/graphics/reader-revenue-manager-setup-mobile.svg';
+import Link from '../../../components/Link';
+
+function ReaderRevenueManagerSetupCTABanner( { Widget, WidgetNull } ) {
+	const breakpoint = useBreakpoint();
+	const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
+	const isTabletBreakpoint = breakpoint === BREAKPOINT_TABLET;
+
+	const onSetupCallback = useActivateModuleCallback(
+		READER_REVENUE_MANAGER_MODULE_SLUG
+	);
+
+	const isDismissed = useSelect( ( select ) =>
+		select( CORE_USER ).isItemDismissed(
+			READER_REVENUE_MANAGER_SETUP_BANNER_DISMISSED_KEY
+		)
+	);
+
+	const { dismissItem } = useDispatch( CORE_USER );
+
+	const onDismiss = useCallback( async () => {
+		await dismissItem( READER_REVENUE_MANAGER_SETUP_BANNER_DISMISSED_KEY );
+	}, [ dismissItem ] );
+
+	const readerRevenueManagerDocumentationURL =
+		'https://readerrevenue.withgoogle.com';
+
+	if ( isDismissed || isDismissed === undefined ) {
+		return <WidgetNull />;
+	}
+
+	return (
+		<div className="googlesitekit-widget-context">
+			<Grid className="googlesitekit-widget-area">
+				<Row>
+					<Cell size={ 12 }>
+						<Widget
+							noPadding
+							className="googlesitekit-setup-cta-banner googlesitekit-reader-revenue-manager-setup-cta-widget"
+						>
+							<Grid collapsed>
+								<Row>
+									<Cell
+										smSize={ 12 }
+										mdSize={ 8 }
+										lgSize={ 6 }
+										className="googlesitekit-setup-cta-banner__primary-cell"
+									>
+										<h4 className="googlesitekit-setup-cta-banner__title">
+											{ __(
+												'Grow your revenue and deepen reader engagement',
+												'google-site-kit'
+											) }
+										</h4>
+										<p className="googlesitekit-setup-cta-banner__description">
+											{ createInterpolateElement(
+												__(
+													'Turn casual visitors into loyal readers and earn more from your content with subscriptions, contributions, ad optimization and reader insight tools. <a>Learn more</a>',
+													'google-site-kit'
+												),
+												{
+													a: (
+														<Link
+															href={
+																readerRevenueManagerDocumentationURL
+															}
+															external
+															aria-label={ __(
+																'Learn more about reader revenue manager',
+																'google-site-kit'
+															) }
+														/>
+													),
+												}
+											) }
+										</p>
+
+										<div className="googlesitekit-setup-cta-banner__actions-wrapper">
+											<Button
+												className="googlesitekit-key-metrics-cta-button"
+												onClick={ onSetupCallback }
+											>
+												{ __(
+													'Set up Reader Revenue Manager',
+													'google-site-kit'
+												) }
+											</Button>
+											<Button
+												tertiary
+												onClick={ onDismiss }
+											>
+												{ __(
+													'Maybe later',
+													'google-site-kit'
+												) }
+											</Button>
+										</div>
+									</Cell>
+									{ ! isMobileBreakpoint &&
+										! isTabletBreakpoint && (
+											<Cell
+												alignBottom
+												className="googlesitekit-setup-cta-banner__svg-wrapper"
+												mdSize={ 8 }
+												lgSize={ 6 }
+											>
+												<SetupSVG />
+											</Cell>
+										) }
+									{ isTabletBreakpoint && (
+										<Cell
+											className="googlesitekit-setup-cta-banner__svg-wrapper"
+											mdSize={ 8 }
+										>
+											<SetupTabletSVG />
+										</Cell>
+									) }
+									{ isMobileBreakpoint && (
+										<Cell
+											alignBottom
+											className="googlesitekit-setup-cta-banner__svg-wrapper"
+											smSize={ 12 }
+										>
+											<SetupMobileSVG />
+										</Cell>
+									) }
+								</Row>
+							</Grid>
+						</Widget>
+					</Cell>
+				</Row>
+			</Grid>
+		</div>
+	);
+}
+
+ReaderRevenueManagerSetupCTABanner.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+	WidgetNull: PropTypes.elementType.isRequired,
+};
+
+export default compose(
+	whenInactive( {
+		moduleName: READER_REVENUE_MANAGER_MODULE_SLUG,
+	} ),
+	withWidgetComponentProps( 'readerRevenueManagerSetupCTABanner' )
+)( ReaderRevenueManagerSetupCTABanner );
diff --git a/...s/modules/reader-revenue-manager/components/ReaderRevenueManagerSetupCTABanner.stories.js b/...s/modules/reader-revenue-manager/components/ReaderRevenueManagerSetupCTABanner.stories.js
@@ -0,0 +1,63 @@
+/**
+ * Reader Revenue Manager Setup CTA Banner Component Stories.
+ *
+ * Site Kit by Google, Copyright 2024 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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { provideModules } from '../../../../../tests/js/utils';
+import { withWidgetComponentProps } from '../../../googlesitekit/widgets/util';
+import WithRegistrySetup from '../../../../../tests/js/WithRegistrySetup';
+import ReaderRevenueManagerSetupCTABanner from './ReaderRevenueManagerSetupCTABanner';
+import { READER_REVENUE_MANAGER_MODULE_SLUG } from '../datastore/constants';
+import { CORE_USER } from '../../../googlesitekit/datastore/user/constants';
+
+const WidgetWithComponentProps = withWidgetComponentProps(
+	'readerRevenueManagerSetupCTABanner'
+)( ReaderRevenueManagerSetupCTABanner );
+
+function Template() {
+	return <WidgetWithComponentProps />;
+}
+
+export const Default = Template.bind( {} );
+Default.storyName = 'Default';
+Default.scenario = {};
+
+export default {
+	title: 'Modules/ReaderRevenueManager/Components/Dashboard/ReaderRevenueManagerSetupCTABanner',
+	decorators: [
+		( Story ) => {
+			const setupRegistry = ( registry ) => {
+				provideModules( registry, [
+					{
+						slug: READER_REVENUE_MANAGER_MODULE_SLUG,
+						active: false,
+					},
+				] );
+
+				registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};