Merge pull request #9047 from google/enhancement/8841-settings-screen

Implement settings edit screen

assets/js/modules/reader-revenue-manager/components/common/PublicationOnboardingStateNotice.stories.js

@@ -42,7 +42,6 @@ PendingVerification.args = {
 			.setPublicationOnboardingState( PENDING_VERIFICATION );
 	},
 };
-PendingVerification.scenario = {};
 
 export const ActionRequired = Template.bind( {} );
 ActionRequired.storyName = 'ActionRequired';
@@ -53,7 +52,6 @@ ActionRequired.args = {
 			.setPublicationOnboardingState( ONBOARDING_ACTION_REQUIRED );
 	},
 };
-ActionRequired.scenario = {};
 
 export default {
 	title: 'Modules/ReaderRevenueManager/Common/PublicationOnboardingStateNotice',

assets/js/modules/reader-revenue-manager/components/settings/SettingsEdit.js

@@ -19,19 +19,68 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from 'googlesitekit-components';
+import { useSelect } from 'googlesitekit-data';
+import { CORE_MODULES } from '../../../../googlesitekit/modules/datastore/constants';
+import {
+	MODULES_READER_REVENUE_MANAGER,
+	MODULE_SLUG,
+} from '../../datastore/constants';
+import { PublicationOnboardingStateNotice, PublicationSelect } from '../common';
 
 export default function SettingsEdit() {
+	const isDoingSubmitChanges = useSelect( ( select ) =>
+		select( MODULES_READER_REVENUE_MANAGER ).isDoingSubmitChanges()
+	);
+
+	const hasModuleAccess = useSelect( ( select ) => {
+		const { hasModuleOwnershipOrAccess, getErrorForAction } =
+			select( CORE_MODULES );
+
+		const hasAccess = hasModuleOwnershipOrAccess( MODULE_SLUG );
+
+		if ( hasAccess ) {
+			return true;
+		}
+
+		const checkAccessError = getErrorForAction( 'checkModuleAccess', [
+			MODULE_SLUG,
+		] );
+
+		// Return early if request is not completed yet.
+		if ( undefined === hasAccess && ! checkAccessError ) {
+			return undefined;
+		}
+
+		// Return false if RRM is connected and access is concretely missing.
+		if ( false === hasAccess ) {
+			return false;
+		}
+
+		if ( 'module_not_connected' === checkAccessError?.code ) {
+			return true;
+		}
+
+		return false;
+	} );
+
+	if ( isDoingSubmitChanges || undefined === hasModuleAccess ) {
+		return <ProgressBar />;
+	}
+
 	return (
-		<div className="googlesitekit-setup-module googlesitekit-setup-module--thank-with-google">
-			<h2 className="googlesitekit-heading-3 googlesitekit-setup-module__title">
-				{ __(
-					'Reader Revenue Manager Settings Edit',
-					'google-site-kit'
-				) }
-			</h2>
-
-			{ /* TODO: Add the rest of the settings steps */ }
+		<div className="googlesitekit-setup-module googlesitekit-setup-module--reader-revenue-manager">
+			{ hasModuleAccess && (
+				<Fragment>
+					<PublicationSelect hasModuleAccess={ hasModuleAccess } />
+					<PublicationOnboardingStateNotice />
+				</Fragment>
+			) }
 		</div>
 	);
 }

assets/js/modules/reader-revenue-manager/components/settings/SettingsEdit.stories.js

@@ -19,16 +19,116 @@
 /**
  * Internal dependencies
  */
+import { provideModuleRegistrations } from '../../../../../../tests/js/utils';
+import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
 import SettingsEdit from './SettingsEdit';
+import { publications } from '../../datastore/__fixtures__';
+import {
+	MODULES_READER_REVENUE_MANAGER,
+	MODULE_SLUG,
+} from '../../datastore/constants';
 
 function Template() {
 	return <SettingsEdit />;
 }
 
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
+Default.scenario = {};
+
+export const PublicationSelected = Template.bind( {} );
+PublicationSelected.storyName = 'PublicationSelected';
+PublicationSelected.scenario = {};
+PublicationSelected.args = {
+	setupRegistry: ( registry ) => {
+		const publication = publications[ 0 ];
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			// eslint-disable-next-line sitekit/acronym-case
+			.setPublicationID( publication.publicationId );
+	},
+};
+
+export const PublicationSelectedPendingVerification = Template.bind( {} );
+PublicationSelectedPendingVerification.storyName =
+	'PublicationSelectedWithOnboardingStateNotice';
+PublicationSelectedPendingVerification.scenario = {};
+PublicationSelectedPendingVerification.args = {
+	setupRegistry: ( registry ) => {
+		const publication = publications[ 1 ];
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			// eslint-disable-next-line sitekit/acronym-case
+			.setPublicationID( publication.publicationId );
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			// eslint-disable-next-line sitekit/acronym-case
+			.setPublicationOnboardingState( publication.onboardingState );
+	},
+};
+
+export const PublicationSelectedActionRequired = Template.bind( {} );
+PublicationSelectedActionRequired.storyName =
+	'PublicationSelectedWithOnboardingStateNotice';
+PublicationSelectedActionRequired.scenario = {};
+PublicationSelectedActionRequired.args = {
+	setupRegistry: ( registry ) => {
+		const publication = publications[ 2 ];
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			// eslint-disable-next-line sitekit/acronym-case
+			.setPublicationID( publication.publicationId );
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			// eslint-disable-next-line sitekit/acronym-case
+			.setPublicationOnboardingState( publication.onboardingState );
+	},
+};
 
 export default {
 	title: 'Modules/ReaderRevenueManager/Settings/SettingsEdit',
-	component: SettingsEdit,
+	parameters: {
+		features: [ 'rrmModule' ],
+	},
+	decorators: [
+		( Story, { args } ) => {
+			const setupRegistry = ( registry ) => {
+				const extraData = [
+					{
+						slug: MODULE_SLUG,
+						active: true,
+						connected: true,
+					},
+				];
+
+				provideModuleRegistrations( registry, extraData );
+
+				const settings = {
+					ownerID: 1,
+					// eslint-disable-next-line sitekit/acronym-case
+					publicationID: '',
+					publicationOnboardingState: '',
+					publicationOnboardingStateLastSyncedAtMs: 0,
+				};
+
+				registry
+					.dispatch( MODULES_READER_REVENUE_MANAGER )
+					.receiveGetPublications( publications );
+
+				registry
+					.dispatch( MODULES_READER_REVENUE_MANAGER )
+					.receiveGetSettings( settings );
+
+				if ( args?.setupRegistry ) {
+					args.setupRegistry( registry );
+				}
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
 };

assets/js/modules/reader-revenue-manager/components/settings/SettingsEdit.test.js

@@ -16,15 +16,84 @@
  * limitations under the License.
  */
 
-import { render } from '../../../../../../tests/js/test-utils';
+/**
+ * Internal dependencies
+ */
+import {
+	createTestRegistry,
+	provideModuleRegistrations,
+	provideModules,
+	provideUserInfo,
+	render,
+} from '../../../../../../tests/js/test-utils';
 import SettingsEdit from './SettingsEdit';
+import { publications } from '../../datastore/__fixtures__';
+import {
+	MODULES_READER_REVENUE_MANAGER,
+	MODULE_SLUG,
+} from '../../datastore/constants';
+import { enabledFeatures } from '../../../../features';
 
 describe( 'SettingsEdit', () => {
-	it( 'should render the component', () => {
-		const { getByText } = render( <SettingsEdit /> );
+	let registry;
+
+	beforeEach( () => {
+		enabledFeatures.add( 'rrmModule' );
+		registry = createTestRegistry();
+
+		const extraData = [
+			{
+				slug: MODULE_SLUG,
+				active: true,
+				connected: true,
+			},
+		];
+		provideModules( registry, extraData );
+		provideModuleRegistrations( registry, extraData );
+		provideUserInfo( registry );
+
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			.receiveGetPublications( publications );
+	} );
+
+	it( 'should render the "SettingsEdit" component', async () => {
+		const publication = publications[ 2 ];
+		const {
+			// eslint-disable-next-line sitekit/acronym-case
+			publicationId: publicationID,
+			onboardingState: publicationOnboardingState,
+		} = publication;
+
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			.receiveGetSettings( {
+				publicationID,
+				publicationOnboardingState,
+				publicationOnboardingStateLastSyncedAtMs: 0,
+				ownerID: 1,
+			} );
+
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			// eslint-disable-next-line sitekit/acronym-case
+			.setPublicationID( publication.publicationId );
+
+		const { getByRole, getByText, waitForRegistry } = render(
+			<SettingsEdit />,
+			{
+				registry,
+			}
+		);
+
+		await waitForRegistry();
+
+		// Ensure publication select is rendered.
+		expect( getByRole( 'menu', { hidden: true } ) ).toBeInTheDocument();
 
-		expect(
-			getByText( /Reader Revenue Manager Settings Edit/i )
-		).toBeInTheDocument();
+		// Ensure the publication onboarding state notice is displayed.
+		getByText(
+			'Your publication requires further setup in Reader Revenue Manager'
+		);
 	} );
 } );

assets/js/modules/reader-revenue-manager/components/setup/SetupMain.js

@@ -26,7 +26,7 @@ import { __, _x } from '@wordpress/i18n';
  */
 import { SpinnerButton } from 'googlesitekit-components';
 import ReaderRevenueManagerIcon from '../../../../../svg/graphics/reader-revenue-manager.svg';
-import { PublicationSelect } from '../common';
+import { PublicationSelect, PublicationOnboardingStateNotice } from '../common';
 
 export default function SetupMain() {
 	return (
@@ -42,7 +42,6 @@ export default function SetupMain() {
 					'google-site-kit'
 				) }
 			</h2>
-
 			<div>
 				<p>
 					{ __(
@@ -51,6 +50,7 @@ export default function SetupMain() {
 					) }
 				</p>
 				<PublicationSelect />
+				<PublicationOnboardingStateNotice />
 			</div>
 			<div className="googlesitekit-setup-module__action">
 				<SpinnerButton>

assets/js/modules/reader-revenue-manager/components/setup/SetupMain.test.js

@@ -36,15 +36,14 @@ describe( 'SetupMain', () => {
 	let registry;
 
 	beforeEach( () => {
-		enabledFeatures.add( 'rrmModule' ); // Enable RRM module to get its features.
+		enabledFeatures.add( 'rrmModule' );
 		registry = createTestRegistry();
 
 		const extraData = [
 			{
 				slug: MODULE_SLUG,
 				active: true,
 				connected: true,
-				owner: { ID: 1 },
 			},
 		];
 		provideModules( registry, extraData );
@@ -55,12 +54,17 @@ describe( 'SetupMain', () => {
 		registry
 			.dispatch( MODULES_READER_REVENUE_MANAGER )
 			.receiveGetPublications( publications );
+	} );
+
+	it( 'should render the component', async () => {
 		registry
 			.dispatch( MODULES_READER_REVENUE_MANAGER )
 			.receiveGetSettings( {} );
-	} );
 
-	it( 'should render the component', async () => {
+		registry
+			.dispatch( MODULES_READER_REVENUE_MANAGER )
+			.receiveGetPublications( [] );
+
 		const { getByText, waitForRegistry } = render( <SetupMain />, {
 			registry,
 		} );

assets/js/modules/reader-revenue-manager/datastore/base.js

@@ -28,6 +28,7 @@ export default Modules.createModuleStore( 'reader-revenue-manager', {
 	validateCanSubmitChanges,
 	ownedSettingsSlugs: [ 'publicationID' ],
 	settingSlugs: [
+		'ownerID',
 		'publicationID',
 		'publicationOnboardingState',
 		'publicationOnboardingStateLastSyncedAtMs',

includes/Modules/Reader_Revenue_Manager/Settings.php

@@ -69,6 +69,7 @@ public function get_owned_keys() {
 	 */
 	protected function get_default() {
 		return array(
+			'ownerID'                                  => 0,
 			'publicationID'                            => '',
 			'publicationOnboardingState'               => '',
 			'publicationOnboardingStateLastSyncedAtMs' => 0,

tests/phpunit/integration/Modules/Reader_Revenue_Manager/SettingsTest.php

@@ -59,6 +59,7 @@ public function test_get_default() {
 				'publicationID'                            => '',
 				'publicationOnboardingState'               => '',
 				'publicationOnboardingStateLastSyncedAtMs' => 0,
+				'ownerID'                                  => 0,
 			),
 			get_option( Settings::OPTION )
 		);