Skip to content

Commit

Permalink
Allow free users with flag to set dotblog as primary
Browse files Browse the repository at this point in the history
  • Loading branch information
@aneeshd16
aneeshd16 committed Dec 6, 2024
1 parent 9ffb111 commit 14aa343
Show file tree
Hide file tree
Showing 6 changed files with 262 additions and 45 deletions.
107 changes: 75 additions & 32 deletions client/my-sites/domains/domain-management/components/primary-domain-selector/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@ import FormButton from 'calypso/components/forms/form-button';
import FormFieldset from 'calypso/components/forms/form-fieldset';
import FormSelect from 'calypso/components/forms/form-select';
import InlineSupportLink from 'calypso/components/inline-support-link';
import { getTld } from 'calypso/lib/domains';
import { useSelector } from 'calypso/state';
import { NON_PRIMARY_DOMAINS_TO_FREE_USERS } from 'calypso/state/current-user/constants';
import {
CAN_SET_DOTBLOG_AS_PRIMARY,
NON_PRIMARY_DOMAINS_TO_FREE_USERS,
} from 'calypso/state/current-user/constants';
import { currentUserHasFlag } from 'calypso/state/current-user/selectors';
import type { DomainData, SiteDetails } from '@automattic/data-stores';

Expand All @@ -36,6 +40,14 @@ const PrimaryDomainSelector = ( {
currentUserHasFlag( state, NON_PRIMARY_DOMAINS_TO_FREE_USERS )
);

const hasDotBlogDomainAndCanSetDotBlogAsPrimary = useSelector(
( state ) =>
currentUserHasFlag( state, CAN_SET_DOTBLOG_AS_PRIMARY ) &&
domains?.some(
( domain ) => ! domain.wpcom_domain && 'blog'.startsWith( getTld( domain.domain ) )
)
);

useEffect( () => {
if ( domains?.length ) {
const primary = domains.find( ( domain ) => {
Expand All @@ -48,13 +60,22 @@ const PrimaryDomainSelector = ( {
}
}, [ domains ] );

const isOnFreePlan = site?.plan?.is_free ?? false;
const canUserSetPrimaryDomainOnThisSite = ! ( primaryWithPlanOnly && isOnFreePlan );

const canSetSelectedDomainAsPrimary = useSelector(
( state ) =>
selectedDomain &&
( 'blog'.startsWith( getTld( selectedDomain ) )
? canUserSetPrimaryDomainOnThisSite ||
currentUserHasFlag( state, CAN_SET_DOTBLOG_AS_PRIMARY )
: canUserSetPrimaryDomainOnThisSite )
);

if ( ! domains || ! site ) {
return null;
}

const isOnFreePlan = site?.plan?.is_free ?? false;
const canUserSetPrimaryDomainOnThisSite = ! ( primaryWithPlanOnly && isOnFreePlan );

const shouldUpgradeToMakeDomainPrimary = ( domain: DomainData ): boolean => {
return (
! canUserSetPrimaryDomainOnThisSite &&
Expand Down Expand Up @@ -119,7 +140,7 @@ const PrimaryDomainSelector = ( {

let message: Substitution;

if ( ! canUserSetPrimaryDomainOnThisSite ) {
if ( ! canUserSetPrimaryDomainOnThisSite && ! hasDotBlogDomainAndCanSetDotBlogAsPrimary ) {
// The user can't set a primary domain on this site because they need to upgrade their plan
message = translate(
"Your site plan doesn't allow to set a custom domain as a primary site address. {{planUpgradeLink}}Upgrade your plan{{/planUpgradeLink}} and get a free one-year domain registration or transfer with any annual paid plan. {{learnMoreLink}}Learn more{{/learnMoreLink}}.",
Expand Down Expand Up @@ -181,33 +202,55 @@ const PrimaryDomainSelector = ( {
</CardHeading>
<>
<p className="domains-set-primary-address__subtitle">{ message }</p>
{ otherValidPrimaryDomains.length > 0 && canUserSetPrimaryDomainOnThisSite && (
<FormFieldset className="domains-set-primary-address__fieldset">
<FormSelect
className="domains-set-primary-address__select"
disabled={ isSettingPrimaryDomain }
id="primary-domain-selector"
onChange={ onSelectChange }
value={ selectedDomain }
>
<option value="">{ translate( 'Select a domain' ) }</option>
{ otherValidPrimaryDomains.map( ( domain ) => (
<option key={ domain.domain } value={ domain.domain }>
{ domain.domain }
</option>
) ) }
</FormSelect>
<FormButton
className="domains-set-primary-address__submit"
primary
busy={ isSettingPrimaryDomain }
disabled={ isSettingPrimaryDomain || ! selectedDomain }
onClick={ onSubmit }
>
{ translate( 'Set as primary' ) }
</FormButton>
</FormFieldset>
) }
{ otherValidPrimaryDomains.length > 0 &&
( canUserSetPrimaryDomainOnThisSite || hasDotBlogDomainAndCanSetDotBlogAsPrimary ) && (
<>
<FormFieldset className="domains-set-primary-address__fieldset">
<FormSelect
className="domains-set-primary-address__select"
disabled={ isSettingPrimaryDomain }
id="primary-domain-selector"
onChange={ onSelectChange }
value={ selectedDomain }
>
<option value="">{ translate( 'Select a domain' ) }</option>
{ otherValidPrimaryDomains.map( ( domain ) => (
<option key={ domain.domain } value={ domain.domain }>
{ domain.domain }
</option>
) ) }
</FormSelect>
<FormButton
className="domains-set-primary-address__submit"
primary
busy={ isSettingPrimaryDomain }
disabled={
isSettingPrimaryDomain || ! selectedDomain || ! canSetSelectedDomainAsPrimary
}
onClick={ onSubmit }
>
{ translate( 'Set as primary' ) }
</FormButton>
</FormFieldset>
{ selectedDomain && ! canSetSelectedDomainAsPrimary && (
<p className="domains-set-primary-address__error">
{ translate(
"Your site plan doesn't allow to set this custom domain as a primary site address. {{planUpgradeLink}}Upgrade your plan{{/planUpgradeLink}} and get a free one-year domain registration or transfer with any annual paid plan.",
{
components: {
planUpgradeLink: (
<a
href={ '/plans/' + primaryDomain }
onClick={ () => trackUpgradeClick( true ) }
/>
),
},
}
) }
</p>
) }
</>
) }
</>
</Card>
);
Expand Down
6 changes: 6 additions & 0 deletions client/my-sites/domains/domain-management/components/primary-domain-selector/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
margin-bottom: 0;
font-size: 0.875rem;
}
&__error {
color: var(--color-text-subtle);
margin-bottom: 0;
margin-top: 0.875rem;
font-size: 0.875rem;
}
&__fieldset.form-fieldset {
margin-top: 0.875rem;
margin-bottom: 0;
Expand Down
166 changes: 155 additions & 11 deletions client/my-sites/domains/domain-management/components/primary-domain-selector/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import { FEATURE_SET_PRIMARY_CUSTOM_DOMAIN } from '@automattic/calypso-products'
import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { NON_PRIMARY_DOMAINS_TO_FREE_USERS } from 'calypso/state/current-user/constants';
import {
NON_PRIMARY_DOMAINS_TO_FREE_USERS,
CAN_SET_DOTBLOG_AS_PRIMARY,
} from 'calypso/state/current-user/constants';
import PrimaryDomainSelector from '../index';

// Mock dependencies
Expand Down Expand Up @@ -69,23 +72,23 @@ describe( 'PrimaryDomainSelector', () => {
jest.clearAllMocks();
} );

it( 'renders the primary domain message', () => {
test( 'renders the primary domain message', () => {
renderComponent();
expect(
screen.getByText( /The current primary address set for this site is:/i )
).toBeInTheDocument();
expect( screen.getByText( 'primary.com' ) ).toBeInTheDocument();
} );

it( 'renders the domain selector with valid options', () => {
test( 'renders the domain selector with valid options', () => {
renderComponent();
const select = screen.getByRole( 'combobox' );
expect( select ).toBeInTheDocument();
expect( screen.getByText( 'secondary.com' ) ).toBeInTheDocument();
expect( screen.queryByText( 'cannot-be-primary.com' ) ).not.toBeInTheDocument();
} );

it( 'enables the submit button only when a domain is selected', () => {
test( 'enables the submit button only when a domain is selected', () => {
renderComponent();
const submitButton = screen.getByRole( 'button', { name: /set as primary/i } );
expect( submitButton ).toBeDisabled();
Expand All @@ -96,7 +99,7 @@ describe( 'PrimaryDomainSelector', () => {
expect( submitButton ).toBeEnabled();
} );

it( 'calls onSetPrimaryDomain when form is submitted', () => {
test( 'calls onSetPrimaryDomain when form is submitted', () => {
renderComponent();
const select = screen.getByRole( 'combobox' );
const submitButton = screen.getByRole( 'button', { name: /set as primary/i } );
Expand All @@ -111,7 +114,7 @@ describe( 'PrimaryDomainSelector', () => {
);
} );

it( 'shows upgrade message for free plan users', () => {
test( 'shows upgrade message for free plan users', () => {
renderComponent(
{
site: {
Expand All @@ -135,7 +138,7 @@ describe( 'PrimaryDomainSelector', () => {
expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
} );

it( 'shows add domain message when no valid domains are available', () => {
test( 'shows add domain message when no valid domains are available', () => {
renderComponent( {
domains: [
{
Expand All @@ -153,7 +156,7 @@ describe( 'PrimaryDomainSelector', () => {
expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
} );

it( 'tracks upgrade click events', () => {
test( 'tracks upgrade click events', () => {
renderComponent(
{
site: {
Expand All @@ -180,7 +183,7 @@ describe( 'PrimaryDomainSelector', () => {
);
} );

it( 'handles staging domains correctly', () => {
test( 'handles staging domains correctly', () => {
renderComponent( {
domains: [
{
Expand All @@ -207,11 +210,152 @@ describe( 'PrimaryDomainSelector', () => {
],
} );

const options = screen.getAllByRole( 'option' );
const select = screen.getByRole( 'combobox' );

// Should only show staging domain and custom domain, not regular wpcom domain
expect( options ).toHaveLength( 3 ); // Including the "Select a domain" option
expect( select ).toHaveLength( 3 ); // Including the "Select a domain" option
expect( screen.queryByText( 'regular.wordpress.com' ) ).not.toBeInTheDocument();
expect( screen.getByText( 'custom.com' ) ).toBeInTheDocument();
} );

test( 'shows dropdown for free plan users with CAN_SET_DOTBLOG_AS_PRIMARY flag and .blog domain and allows selecting the .blog domain', () => {
renderComponent(
{
site: {
plan: {
is_free: true,
},
},
domains: [
...defaultProps.domains,
{
domain: 'test.blog',
primary_domain: false,
can_set_as_primary: true,
type: 'registered',
},
],
},
{
currentUser: {
flags: [ NON_PRIMARY_DOMAINS_TO_FREE_USERS, CAN_SET_DOTBLOG_AS_PRIMARY ],
},
}
);

const select = screen.getByRole( 'combobox' );

expect( select ).toHaveLength( 3 ); // Including the "Select a domain" option
expect( screen.getByText( 'secondary.com' ) ).toBeInTheDocument();
expect( screen.getByText( 'test.blog' ) ).toBeInTheDocument();
fireEvent.change( select, { target: { value: 'test.blog' } } );
const submitButton = screen.getByRole( 'button', { name: /set as primary/i } );
expect( submitButton ).toBeEnabled();
} );

test( 'shows upgrade message for free plan users with CAN_SET_DOTBLOG_AS_PRIMARY flag and no .blog domain', () => {
renderComponent(
{
site: {
plan: {
is_free: true,
},
},
domains: [
...defaultProps.domains,
{
domain: 'test.notblog',
primary_domain: false,
can_set_as_primary: true,
type: 'registered',
},
],
},
{
currentUser: {
flags: [ NON_PRIMARY_DOMAINS_TO_FREE_USERS, CAN_SET_DOTBLOG_AS_PRIMARY ],
},
}
);

expect(
screen.getByText(
/Your site plan doesn't allow to set a custom domain as a primary site address/i
)
).toBeInTheDocument();
expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
} );

test( 'shows upgrade message for free plan users without CAN_SET_DOTBLOG_AS_PRIMARY flag and .blog domain', () => {
renderComponent(
{
site: {
plan: {
is_free: true,
},
},
domains: [
...defaultProps.domains,
{
domain: 'test.notblog',
primary_domain: false,
can_set_as_primary: true,
type: 'registered',
},
],
},
{
currentUser: {
flags: [ NON_PRIMARY_DOMAINS_TO_FREE_USERS ],
},
}
);

expect(
screen.getByText(
/Your site plan doesn't allow to set a custom domain as a primary site address/i
)
).toBeInTheDocument();
expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
} );

test( 'shows error and disables button for free plan users with CAN_SET_DOTBLOG_AS_PRIMARY flag and having a .blog domain, but a non .blog domain is selected', () => {
renderComponent(
{
site: {
plan: {
is_free: true,
},
},
domains: [
...defaultProps.domains,
{
domain: 'test.blog',
primary_domain: false,
can_set_as_primary: true,
type: 'registered',
},
],
},
{
currentUser: {
flags: [ NON_PRIMARY_DOMAINS_TO_FREE_USERS, CAN_SET_DOTBLOG_AS_PRIMARY ],
},
}
);

const select = screen.getByRole( 'combobox' );

expect( select ).toHaveLength( 3 ); // Including the "Select a domain" option
expect( screen.getByText( 'secondary.com' ) ).toBeInTheDocument();
expect( screen.getByText( 'test.blog' ) ).toBeInTheDocument();
fireEvent.change( select, { target: { value: 'secondary.com' } } );
const submitButton = screen.getByRole( 'button', { name: /set as primary/i } );
expect( submitButton ).toBeDisabled();
expect(
screen.getByText(
/Your site plan doesn't allow to set this custom domain as a primary site address/i
)
).toBeInTheDocument();
} );
} );
Loading

0 comments on commit 14aa343

Please sign in to comment.