Partner Portal: Simplify access gates redirection logic

Automattic · Mar 23, 2021 · 7a87322 · 7a87322
1 parent 83b4602
commit 7a87322
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 42 deletions.
diff --git a/client/jetpack-cloud/sections/partner-portal/hooks.ts b/client/jetpack-cloud/sections/partner-portal/hooks.ts
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useEffect } from 'react';
+import page from 'page';
+import { getQueryArg } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { ensurePartnerPortalReturnUrl } from 'calypso/jetpack-cloud/sections/partner-portal/utils';
+
+/**
+ * Redirect to the partner portal or a present "return" GET parameter given a certain condition.
+ *
+ * @param {boolean} redirect Whether to execute the redirect.
+ * @returns {void}
+ */
+export function useReturnUrl( redirect: boolean ): void {
+	useEffect( () => {
+		if ( redirect ) {
+			const returnQuery = getQueryArg( window.location.href, 'return' ) as string;
+			const returnUrl = ensurePartnerPortalReturnUrl( returnQuery );
+
+			page.redirect( returnUrl );
+		}
+	}, [ redirect ] );
+}
diff --git a/client/jetpack-cloud/sections/partner-portal/index.ts b/client/jetpack-cloud/sections/partner-portal/index.ts
@@ -15,8 +15,10 @@ import * as controller from './controller';
 import './style.scss';
 
 export default function () {
+	// Load the partner for the current user.
 	page( `/partner-portal/partner`, controller.partnerContext, makeLayout, clientRender );
 
+	// Display the ToS, if necessary.
 	page(
 		`/partner-portal/terms-of-service`,
 		controller.requireAccessContext,
@@ -25,6 +27,7 @@ export default function () {
 		clientRender
 	);
 
+	// Display the list of partner keys for the user to select from.
 	page(
 		`/partner-portal/partner-key`,
 		controller.requireAccessContext,
@@ -34,6 +37,7 @@ export default function () {
 		clientRender
 	);
 
+	// List licenses.
 	page(
 		`/partner-portal/:filter(unassigned|assigned|revoked)?`,
 		controller.requireAccessContext,
@@ -44,6 +48,7 @@ export default function () {
 		clientRender
 	);
 
+	// Issue a license.
 	page(
 		`/partner-portal/issue-license`,
 		controller.requireAccessContext,
@@ -54,5 +59,6 @@ export default function () {
 		clientRender
 	);
 
+	// Redirect invalid URLs back to the main portal page.
 	page( `/partner-portal/*`, '/partner-portal' );
 }
diff --git a/client/jetpack-cloud/sections/partner-portal/primary/partner-access/index.tsx b/client/jetpack-cloud/sections/partner-portal/primary/partner-access/index.tsx
@@ -1,12 +1,10 @@
 /**
  * External dependencies
  */
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
 import { useSelector } from 'react-redux';
 import { Button } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
-import { getQueryArg } from '@wordpress/url';
-import page from 'page';
 
 /**
  * Internal dependencies
@@ -17,11 +15,11 @@ import {
 	getCurrentPartner,
 	hasFetchedPartner,
 } from 'calypso/state/partner-portal/partner/selectors';
-import { ensurePartnerPortalReturnUrl } from 'calypso/jetpack-cloud/sections/partner-portal/utils';
 import QueryJetpackPartnerPortalPartner from 'calypso/components/data/query-jetpack-partner-portal-partner';
 import Main from 'calypso/components/main';
 import CardHeading from 'calypso/components/card-heading';
 import Spinner from 'calypso/components/spinner';
+import { useReturnUrl } from 'calypso/jetpack-cloud/sections/partner-portal/hooks';
 
 export default function PartnerAccess(): ReactElement | null {
 	const translate = useTranslate();
@@ -32,14 +30,7 @@ export default function PartnerAccess(): ReactElement | null {
 	const hasPartner = hasFetched && ! isFetching && keys.length > 0;
 	const showError = hasFetched && ! isFetching && keys.length === 0;
 
-	useEffect( () => {
-		if ( hasPartner ) {
-			const returnQuery = getQueryArg( window.location.href, 'return' ) as string;
-			const returnUrl = ensurePartnerPortalReturnUrl( returnQuery );
-
-			page.redirect( returnUrl );
-		}
-	}, [ hasPartner ] );
+	useReturnUrl( hasPartner );
 
 	return (
 		<Main className="partner-access">

diff --git a/client/jetpack-cloud/sections/partner-portal/primary/select-partner-key/index.tsx b/client/jetpack-cloud/sections/partner-portal/primary/select-partner-key/index.tsx
@@ -1,12 +1,10 @@
 /**
  * External dependencies
  */
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Card } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
-import { getQueryArg } from '@wordpress/url';
-import page from 'page';
 
 /**
  * Internal dependencies
@@ -19,7 +17,6 @@ import {
 	hasActivePartnerKey,
 	hasFetchedPartner,
 } from 'calypso/state/partner-portal/partner/selectors';
-import { ensurePartnerPortalReturnUrl } from 'calypso/jetpack-cloud/sections/partner-portal/utils';
 import QueryJetpackPartnerPortalPartner from 'calypso/components/data/query-jetpack-partner-portal-partner';
 import Main from 'calypso/components/main';
 import CardHeading from 'calypso/components/card-heading';
@@ -29,6 +26,7 @@ import Spinner from 'calypso/components/spinner';
  * Style dependencies
  */
 import './style.scss';
+import { useReturnUrl } from 'calypso/jetpack-cloud/sections/partner-portal/hooks';
 
 export default function SelectPartnerKey(): ReactElement | null {
 	const translate = useTranslate();
@@ -40,14 +38,7 @@ export default function SelectPartnerKey(): ReactElement | null {
 	const keys = ( partner?.keys || [] ) as PartnerKey[];
 	const showKeys = hasFetched && ! isFetching && keys.length > 0;
 
-	useEffect( () => {
-		if ( hasKey ) {
-			const returnQuery = getQueryArg( window.location.href, 'return' ) as string;
-			const returnUrl = ensurePartnerPortalReturnUrl( returnQuery );
-
-			page.redirect( returnUrl );
-		}
-	}, [ hasKey ] );
+	useReturnUrl( hasKey );
 
 	return (
 		<Main className="select-partner-key">

diff --git a/client/jetpack-cloud/sections/partner-portal/primary/terms-of-service-consent/index.tsx b/client/jetpack-cloud/sections/partner-portal/primary/terms-of-service-consent/index.tsx
@@ -1,13 +1,11 @@
 /**
  * External dependencies
  */
-import React, { ReactElement, useCallback, useEffect } from 'react';
+import React, { ReactElement, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useMutation } from 'react-query';
 import { Button, Card } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
-import { getQueryArg } from '@wordpress/url';
-import page from 'page';
 
 /**
  * Internal dependencies
@@ -17,18 +15,15 @@ import wpcom from 'calypso/lib/wp';
 import {
 	getCurrentPartner,
 	hasFetchedPartner,
-	isFetchingPartner,
 } from 'calypso/state/partner-portal/partner/selectors';
 import { receivePartner } from 'calypso/state/partner-portal/partner/actions';
 import { errorNotice } from 'calypso/state/notices/actions';
-import {
-	ensurePartnerPortalReturnUrl,
-	formatApiPartner,
-} from 'calypso/jetpack-cloud/sections/partner-portal/utils';
+import { formatApiPartner } from 'calypso/jetpack-cloud/sections/partner-portal/utils';
 import QueryJetpackPartnerPortalPartner from 'calypso/components/data/query-jetpack-partner-portal-partner';
 import Main from 'calypso/components/main';
 import CardHeading from 'calypso/components/card-heading';
 import Spinner from 'calypso/components/spinner';
+import { useReturnUrl } from 'calypso/jetpack-cloud/sections/partner-portal/hooks';
 
 function mutationConsent( consent: boolean ): Promise< APIPartner > {
 	return wpcom.req.post( {
@@ -55,20 +50,12 @@ export default function TermsOfServiceConsent(): ReactElement | null {
 	const partner = useSelector( getCurrentPartner );
 	const hasConsented = partner?.tos || false;
 	const fetchedPartner = useSelector( hasFetchedPartner );
-	const fetchingPartner = useSelector( isFetchingPartner );
 
 	const acceptTOS = useCallback( () => {
 		consent.mutate( true );
 	}, [] );
 
-	useEffect( () => {
-		if ( hasConsented ) {
-			const returnQuery = getQueryArg( window.location.href, 'return' ) as string;
-			const returnUrl = ensurePartnerPortalReturnUrl( returnQuery );
-
-			page.redirect( returnUrl );
-		}
-	}, [ hasConsented ] );
+	useReturnUrl( hasConsented );
 
 	return (
 		<Main className="terms-of-service-consent">
@@ -87,7 +74,7 @@ export default function TermsOfServiceConsent(): ReactElement | null {
 					</div>
 
 					<div style={ { textAlign: 'right' } }>
-						<Button onClick={ acceptTOS } busy={ consent.isLoading || fetchingPartner } primary>
+						<Button onClick={ acceptTOS } busy={ consent.isLoading } primary>
 							{ translate( 'Accept' ) }
 						</Button>
 					</div>