Domains: Adapt domain registrant verification page to be used with DS…

…API reseller domains (#75595)

* Remove lodash dependency

* Update `DomainsLandingHeader` to show different logos depending on the reseller parameter

* Adapt `RegistrantVerificationPage` for DSAPI reseller domains

* Hide "Resend email" button for resellers

* Get Tumblr logo from official page

* Update tumblr reseller keys in `DomainsLandingHeader`

client/landing/domains/header/index.jsx

@@ -7,14 +7,36 @@ import './style.scss';
 
 class DomainsLandingHeader extends Component {
 	static propTypes = {
+		reseller: PropTypes.string,
 		title: PropTypes.string,
 	};
 
+	/**
+	 * Gets the header logo depending on the reseller
+	 *
+	 * If the reseller is undefined, returns the WordPress logo.
+	 */
+	getLogo = () => {
+		const tumblrLogo = (
+			<svg className="header__logo" viewBox="0 0 90.2 159.3" height={ 52 } width={ 52 }>
+				<path d="M63.6,159.3c-24,0-41.8-12.3-41.8-41.8V70.3H0V44.7C24,38.5,34,17.9,35.1,0H60v40.6h29v29.7H60v41.1  c0,12.3,6.2,16.6,16.1,16.6h14.1v31.3H63.6z" />
+			</svg>
+		);
+
+		switch ( this.props.reseller ) {
+			case 'tumblr_live':
+			case 'tumblr_ote':
+				return tumblrLogo;
+			default:
+				return <WordPressLogo className="header__logo" size={ 52 } />;
+		}
+	};
+
 	render() {
 		const { title } = this.props;
 		return (
 			<Card className="header">
-				<WordPressLogo className="header__logo" size={ 52 } />
+				{ this.getLogo() }
 				{ title && <h2 className="header__title">{ title }</h2> }
 			</Card>
 		);

client/landing/domains/index.jsx

@@ -18,8 +18,16 @@ class DomainsLandingPage extends Component {
 	};
 
 	renderRegistrantVerificationContent() {
-		const { domain, email, token } = this.props.query;
-		return <RegistrantVerificationPage domain={ domain } email={ email } token={ token } />;
+		// The reseller parameter is optional and contains the name of the DSAPI reseller that the domain was registered with
+		const { domain, email, reseller, token } = this.props.query;
+		return (
+			<RegistrantVerificationPage
+				domain={ domain }
+				email={ email }
+				reseller={ reseller }
+				token={ token }
+			/>
+		);
 	}
 
 	renderTransferAwayConfirmation() {

client/landing/domains/registrant-verification/index.jsx

@@ -1,5 +1,4 @@
 import { localize } from 'i18n-calypso';
-import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { CALYPSO_CONTACT } from 'calypso/lib/url/support';
@@ -13,6 +12,7 @@ class RegistrantVerificationPage extends Component {
 	static propTypes = {
 		domain: PropTypes.string.isRequired,
 		email: PropTypes.string.isRequired,
+		reseller: PropTypes.string,
 		token: PropTypes.string.isRequired,
 	};
 
@@ -23,7 +23,7 @@ class RegistrantVerificationPage extends Component {
 		wp.req
 			.get( `/domains/${ domain }/verify-email`, { email, token } )
 			.then( ( response ) => {
-				this.setState( this.getVerificationSuccessState( get( response, 'domains', [ domain ] ) ) );
+				this.setState( this.getVerificationSuccessState( response?.domains ?? [ domain ] ) );
 			} )
 			.catch( ( error ) => {
 				this.setErrorState( error );
@@ -43,11 +43,14 @@ class RegistrantVerificationPage extends Component {
 	}
 
 	getVerificationSuccessState = ( domains ) => {
-		const { translate } = this.props;
+		const { reseller, translate } = this.props;
+
+		// DSAPI reseller domains shouldn't use the ?logmein=1 query parameter
+		const logMeInSuffix = reseller ? '' : '?logmein=1';
 
 		const DomainLinks = domains.map( ( domain, index ) => [
 			index > 0 && ', ',
-			<a key={ domain } href={ `https://${ domain }?logmein=1` }>
+			<a key={ domain } href={ `https://${ domain }${ logMeInSuffix }` }>
 				{ domain }
 			</a>,
 		] );
@@ -66,20 +69,36 @@ class RegistrantVerificationPage extends Component {
 			),
 			actionTitle: null,
 			actionCallback: null,
-			footer: translate(
-				'All done. You can close this window now or {{domainsManagementLink}}manage your domains{{/domainsManagementLink}}.',
-				{
-					components: {
-						domainsManagementLink: <a href={ domainManagementRoot() } />,
-					},
-				}
-			),
+			footer: this.getSuccessFooterMessage(),
 			isLoading: false,
 		};
 	};
 
+	getSuccessFooterMessage = () => {
+		const { reseller, translate } = this.props;
+
+		if ( reseller ) {
+			return translate( 'All done. You can close this window now.' );
+		}
+
+		return translate(
+			'All done. You can close this window now or {{domainsManagementLink}}manage your domains{{/domainsManagementLink}}.',
+			{
+				components: {
+					domainsManagementLink: <a href={ domainManagementRoot() } />,
+				},
+			}
+		);
+	};
+
 	getExpiredState = () => {
-		const { translate } = this.props;
+		const { reseller, translate } = this.props;
+
+		if ( reseller ) {
+			return {
+				message: translate( 'This email has expired.' ),
+			};
+		}
 
 		return {
 			message: translate(
@@ -137,14 +156,7 @@ class RegistrantVerificationPage extends Component {
 						},
 					}
 				),
-				footer: translate(
-					'All done. You can close this window now or {{domainsManagementLink}}manage your domains{{/domainsManagementLink}}.',
-					{
-						components: {
-							domainsManagementLink: <a href={ domainManagementRoot() } />,
-						},
-					}
-				),
+				footer: this.getSuccessFooterMessage(),
 			};
 		}
 	};
@@ -158,13 +170,15 @@ class RegistrantVerificationPage extends Component {
 	};
 
 	getDefaultErrorState = () => {
-		const { translate } = this.props;
+		const { reseller, translate } = this.props;
+
+		// DSAPI resellers shouldn't link to the support contact form
 		const defaultErrorFooter = translate(
 			"If you're having trouble verifying your contact information, please {{a}}{{strong}}contact support{{/strong}}{{/a}}.",
 			{
 				components: {
-					a: <a href={ CALYPSO_CONTACT } />,
-					strong: <strong />,
+					a: reseller ? <span /> : <a href={ CALYPSO_CONTACT } />,
+					strong: reseller ? <span /> : <strong />,
 				},
 			}
 		);
@@ -247,11 +261,14 @@ class RegistrantVerificationPage extends Component {
 	};
 
 	render() {
-		const { translate } = this.props;
+		const { reseller, translate } = this.props;
 
 		return (
 			<div className="registrant-verification">
-				<DomainsLandingHeader title={ translate( 'Domain Contact Verification' ) } />
+				<DomainsLandingHeader
+					reseller={ reseller }
+					title={ translate( 'Domain Contact Verification' ) }
+				/>
 				<DomainsLandingContentCard
 					title={ this.state.title }
 					message={ this.state.message }