Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Domains: Adapt domain registrant verification page to be used with DSAPI reseller domains #75595

Merged
merged 6 commits into from
Apr 17, 2023
Merged

Domains: Adapt domain registrant verification page to be used with DSAPI reseller domains #75595

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7baff96
Remove lodash dependency
leonardost Apr 11, 2023
cd1dfc5
Update `DomainsLandingHeader` to show different logos depending on th…
leonardost Apr 11, 2023
6d8fd4d
Adapt `RegistrantVerificationPage` for DSAPI reseller domains
leonardost Apr 11, 2023
7ab72b1
Hide "Resend email" button for resellers
leonardost Apr 14, 2023
165f882
Get Tumblr logo from official page
leonardost Apr 14, 2023
ff15e3e
Update tumblr reseller keys in `DomainsLandingHeader`
leonardost Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion client/landing/domains/header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
// TODO: This is a placehodler, get the official Tumblr logo from somewhere
const tumblrLogo = (
<svg className="header__logo" viewBox="0 0 260 260" height={ 50 } width={ 50 }>
<path d="M210.857,197.545c-1.616-0.872-3.584-0.787-5.119,0.223c-11.62,7.638-23.4,11.511-35.016,11.511 c-6.242,0-11.605-1.394-16.416-4.275c-3.27-1.936-6.308-5.321-7.397-8.263c-1.057-2.797-1.045-10.327-1.029-20.748l0.005-63.543 h52.795c2.762,0,5-2.239,5-5V62.802c0-2.761-2.238-5-5-5h-52.795V5c0-2.761-2.238-5-5-5h-35.566c-2.528,0-4.658,1.887-4.964,4.397 c-1.486,12.229-4.258,22.383-8.247,30.196c-3.89,7.7-9.153,14.401-15.651,19.925c-5.206,4.44-14.118,8.736-26.49,12.769 c-2.058,0.671-3.45,2.589-3.45,4.754v35.41c0,2.761,2.238,5,5,5h28.953v82.666c0,12.181,1.292,21.347,3.952,28.026 c2.71,6.785,7.521,13.174,14.303,18.993c6.671,5.716,14.79,10.187,24.158,13.298c9.082,2.962,16.315,4.567,28.511,4.567 c10.31,0,20.137-1.069,29.213-3.179c8.921-2.082,19.017-5.761,30.008-10.934c1.753-0.825,2.871-2.587,2.871-4.524v-39.417 C213.484,200.108,212.476,198.418,210.857,197.545z" />
</svg>
);

switch ( this.props.reseller ) {
case 'tumblr':
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>
);
Expand Down
12 changes: 10 additions & 2 deletions client/landing/domains/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
61 changes: 36 additions & 25 deletions client/landing/domains/registrant-verification/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
};

Expand All @@ -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 );
Expand All @@ -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>,
] );
Expand All @@ -66,18 +69,28 @@ 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;

Expand Down Expand Up @@ -137,14 +150,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(),
};
}
};
Expand All @@ -158,13 +164,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 />,
},
}
);
Expand Down Expand Up @@ -247,11 +255,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 }
Expand Down