Merge pull request google#5592 from google/enhance/5526-twg-setup-pub…

…lication-action-required Enhance/5526 - Implement TwG setup UI for publication action required scenario
techanvil · Jul 21, 2022 · 5169e60 · 5169e60
2 parents 2ef8e23 + b3da04e
commit 5169e60
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/assets/js/modules/thank-with-google/components/setup/SetupMain.test.js b/assets/js/modules/thank-with-google/components/setup/SetupMain.test.js
@@ -144,14 +144,16 @@ describe( 'SetupMain', () => {
 			.dispatch( MODULES_THANK_WITH_GOOGLE )
 			.receiveGetPublications( [ publicationActionRequiredStateC ] );
 
-		const { container } = render( <SetupMain />, {
+		const { container, queryByRole } = render( <SetupMain />, {
 			registry,
 		} );
 
-		// TODO: Update this assertion to match the new UI.
 		expect( container ).toHaveTextContent(
-			'TODO: UI for publication action required - SetupPublicationActionRequired'
+			'Finish the setup to customize and add Thank with Google on your site.'
 		);
+		const button = queryByRole( 'button' );
+		expect( button ).toBeInTheDocument();
+		expect( button ).toHaveTextContent( 'Complete setup' );
 	} );
 
 	it( 'should render the publication pending verification screen if the current publication state is `PENDING_VERIFICATION`', () => {

diff --git a/assets/js/modules/thank-with-google/components/setup/SetupPublicationActionRequired.js b/assets/js/modules/thank-with-google/components/setup/SetupPublicationActionRequired.js
@@ -16,11 +16,36 @@
  * limitations under the License.
  */
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../../../components/Button';
+import { SetupPublicationScreen } from '../common';
+
 export default function SetupPublicationActionRequired() {
 	return (
-		<div>
-			TODO: UI for publication action required -
-			SetupPublicationActionRequired
-		</div>
+		<SetupPublicationScreen
+			title={ __( 'Complete your account setup', 'google-site-kit' ) }
+			description={ __(
+				'Finish the setup to customize and add Thank with Google on your site.',
+				'google-site-kit'
+			) }
+		>
+			<Button
+				href="https://publishercenter.google.com/"
+				target="_blank"
+				aria-label={ __(
+					'Complete your Thank with Google account setup',
+					'google-site-kit'
+				) }
+			>
+				{ __( 'Complete setup', 'google-site-kit' ) }
+			</Button>
+		</SetupPublicationScreen>
 	);
 }