Partner Portal: Add final ToS gate content

Automattic · Apr 9, 2021 · 96c32cf · 96c32cf
1 parent d33a54e
commit 96c32cf
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 7 deletions.
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,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { ReactElement, useCallback } from 'react';
+import React, { ReactElement, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Card } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
@@ -23,6 +23,14 @@ import Spinner from 'calypso/components/spinner';
 import { useReturnUrl } from 'calypso/jetpack-cloud/sections/partner-portal/hooks';
 import useTOSConsentMutation from 'calypso/state/partner-portal/licenses/hooks/use-tos-consent-mutation';
 import { ToSConsent } from 'calypso/state/partner-portal/types';
+import FormInputCheckbox from 'calypso/components/forms/form-checkbox';
+import FormLabel from 'calypso/components/forms/form-label';
+import Gridicon from 'calypso/components/gridicon';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
 
 export default function TermsOfServiceConsent(): ReactElement | null {
 	const translate = useTranslate();
@@ -40,8 +48,16 @@ export default function TermsOfServiceConsent(): ReactElement | null {
 	const partner = useSelector( getCurrentPartner );
 	const hasConsented = ( partner?.tos || ToSConsent.NotConsented ) !== ToSConsent.NotConsented;
 	const fetchedPartner = useSelector( hasFetchedPartner );
+	const [ checkedTOS, setCheckedTOS ] = useState( false );
 
-	const acceptTOS = useCallback( () => {
+	const checkTOS = useCallback(
+		( event ) => {
+			setCheckedTOS( event.target.checked );
+		},
+		[ setCheckedTOS ]
+	);
+
+	const agreeToTOS = useCallback( () => {
 		consent.mutate();
 	}, [] );
 
@@ -58,14 +74,40 @@ export default function TermsOfServiceConsent(): ReactElement | null {
 			{ ! hasConsented && (
 				<Card>
 					<CardHeading>{ translate( 'Terms of Service' ) }</CardHeading>
+
 					<div className="terms-of-service-consent__content">
-						{ /*TODO add ToS*/ }
-						<p>Terms of service go here.</p>
+						<FormLabel>
+							<FormInputCheckbox checked={ checkedTOS } onChange={ checkTOS } />
+							<span>
+								{ translate(
+									'I understand and acknowledge that by checking this box, I have read and agree to the terms of the {{link}}%(link_text)s{{icon}}{{/icon}}{{/link}}.',
+									{
+										components: {
+											link: (
+												<a
+													href="https://jetpack.com/platform-agreement/"
+													target="_blank"
+													rel="noopener noreferrer"
+												></a>
+											),
+											icon: <Gridicon icon="external" size={ 18 } />,
+										},
+										args: { link_text: 'Jetpack Agency Platform Beta Agreement' },
+									}
+								) }
+							</span>
+						</FormLabel>
 					</div>
 
-					<div style={ { textAlign: 'right' } }>
-						<Button onClick={ acceptTOS } busy={ consent.isLoading } primary>
-							{ translate( 'Accept' ) }
+					<div className="terms-of-service-consent__actions">
+						<Button
+							className="terms-of-service-consent__proceed"
+							onClick={ agreeToTOS }
+							disabled={ ! checkedTOS }
+							busy={ consent.isLoading }
+							primary
+						>
+							{ translate( 'Proceed' ) }
 						</Button>
 					</div>
 				</Card>

diff --git a/client/jetpack-cloud/sections/partner-portal/primary/terms-of-service-consent/style.scss b/client/jetpack-cloud/sections/partner-portal/primary/terms-of-service-consent/style.scss
@@ -0,0 +1,5 @@
+.terms-of-service-consent {
+	&__actions {
+		text-align: right;
+	}
+}