Skip to content

Eligibility warnings: show only the blocking notice when a transfer is in progress #113952

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

Open
bcotrim wants to merge 4 commits into
base: trunk
Choose a base branch
from
+178 −146
Open

Eligibility warnings: show only the blocking notice when a transfer is in progress #113952

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c2fec1c
Eligibility warnings: show only the blocking notice when a transfer i…
bcotrim Aug 31, 2026
bab4d1f
Merge branch 'trunk' into dotdev-444-second-plugin-during-atomic-tran…
bcotrim Aug 31, 2026
f70db61
Eligibility warnings: resolve the blocking hold once and pass it down
bcotrim Sep 1, 2026
a7b74d1
Improved hold types, clarified conditional rendering
fredrikekelund Sep 2, 2026
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
104 changes: 42 additions & 62 deletions client/blocks/eligibility-warnings/hold-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { isEnabled } from '@automattic/calypso-config';
import { PLAN_BUSINESS, PLAN_PERSONAL, getPlan } from '@automattic/calypso-products';
import { Button, Gridicon } from '@automattic/components';
import { localizeUrl, useHasEnTranslation } from '@automattic/i18n-utils';
import clsx from 'clsx';
import { localize, LocalizeProps } from 'i18n-calypso';
import ExcessiveDiskSpace from 'calypso/blocks/eligibility-warnings/excessive-disk-space';
import CardHeading from 'calypso/components/card-heading';
Expand Down Expand Up @@ -267,72 +266,53 @@ export const HoldList = ( { context, holds, isMarketplace, isPlaceholder, transl
isMarketplace,
hasEnTranslation,
} );
const blockingMessages = getBlockingMessages( translate );

const blockingHold = holds.find( ( h ) => isHardBlockingHoldType( h, blockingMessages ) );
const hasValidBlockingHold = blockingHold && ! isAtomicSiteWithoutBusinessPlan( holds );

return (
<>
{ ! isPlaceholder && context !== 'plugin-details' && (
<HardBlockingNotice
holds={ holds }
translate={ translate }
blockingMessages={ blockingMessages }
/>
) }
<div
className={ clsx( 'eligibility-warnings__hold-list', {
'eligibility-warnings__hold-list-dim': hasValidBlockingHold,
} ) }
data-testid="HoldList-Card"
>
<CardHeading>
<span className="eligibility-warnings__hold-heading">
{ getCardHeading( context, translate ) }
</span>
</CardHeading>
{ isPlaceholder && (
<div>
<div className="eligibility-warnings__hold">
<Gridicon icon="notice-outline" size={ 24 } />
<div className="eligibility-warnings__message" />
</div>
<div className="eligibility-warnings__hold">
<Gridicon icon="notice-outline" size={ 24 } />
<div className="eligibility-warnings__message" />
</div>
<div className="eligibility-warnings__hold-list" data-testid="HoldList-Card">
<CardHeading>
<span className="eligibility-warnings__hold-heading">
{ getCardHeading( context, translate ) }
</span>
</CardHeading>
{ isPlaceholder && (
<div>
<div className="eligibility-warnings__hold">
<Gridicon icon="notice-outline" size={ 24 } />
<div className="eligibility-warnings__message" />
</div>
) }
{ ! isPlaceholder &&
holds.map( ( hold ) =>
! isKnownHoldType( hold, holdMessages ) ? null : (
<div className="eligibility-warnings__hold" key={ hold }>
<div className="eligibility-warnings__message">
<div className="eligibility-warnings__message-title">
{ holdMessages[ hold ].title }
</div>
<p className="eligibility-warnings__message-description">
{ holdMessages[ hold ].description }
</p>
<div className="eligibility-warnings__hold">
<Gridicon icon="notice-outline" size={ 24 } />
<div className="eligibility-warnings__message" />
</div>
</div>
) }
{ ! isPlaceholder &&
holds.map( ( hold ) =>
! isKnownHoldType( hold, holdMessages ) ? null : (
<div className="eligibility-warnings__hold" key={ hold }>
<div className="eligibility-warnings__message">
<div className="eligibility-warnings__message-title">
{ holdMessages[ hold ].title }
</div>
{ holdMessages[ hold ].supportUrl && (
<div className="eligibility-warnings__hold-action">
<Button
compact
disabled={ !! hasValidBlockingHold }
href={ holdMessages[ hold ].supportUrl ?? '' }
rel="noopener noreferrer"
>
{ translate( 'Help' ) }
</Button>
</div>
) }
<p className="eligibility-warnings__message-description">
{ holdMessages[ hold ].description }
</p>
</div>
)
) }
</div>
</>
{ holdMessages[ hold ].supportUrl && (
<div className="eligibility-warnings__hold-action">
<Button
compact
href={ holdMessages[ hold ].supportUrl ?? '' }
rel="noopener noreferrer"
>
{ translate( 'Help' ) }
</Button>
</div>
) }
</div>
)
) }
</div>
);
};

Expand Down
70 changes: 38 additions & 32 deletions client/blocks/eligibility-warnings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ export const EligibilityWarnings = ( {
}: Props ) => {
const warnings = eligibilityData.eligibilityWarnings || [];
const listHolds = eligibilityData.eligibilityHolds || [];
const hasValidBlockingHold =
hasBlockingHold( listHolds ) && ! isAtomicSiteWithoutBusinessPlan( listHolds );

const [ selectedGeoAffinity, setSelectedGeoAffinity ] = useState( '' );

Expand All @@ -102,7 +104,7 @@ export const EligibilityWarnings = ( {
{
'eligibility-warnings__placeholder': isPlaceholder,
'eligibility-warnings--with-indent': showWarnings,
'eligibility-warnings--blocking-hold': hasBlockingHold( listHolds ),
'eligibility-warnings--blocking-hold': hasValidBlockingHold,
'eligibility-warnings--without-title':
context !== 'plugin-details' && context !== 'hosting-features',
},
Expand Down Expand Up @@ -174,7 +176,7 @@ export const EligibilityWarnings = ( {
eventProperties={ { context, path } }
/>

{ ! isPlaceholder && context === 'plugin-details' && hasBlockingHold( listHolds ) && (
{ ! isPlaceholder && hasValidBlockingHold && (
<CompactCard>
<HardBlockingNotice

@fredrikekelund fredrikekelund Sep 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are HardBlockingNotice and HoldList supposed to ever render side by side?

@bcotrim bcotrim Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, mutually exclusive as of this PR: the cards require hasValidBlockingHold and ! hasValidBlockingHold respectively, so at most one renders (skeleton counts as the hold list while loading). Rendering both was the bug.

holds={ listHolds }
Expand All @@ -184,16 +186,18 @@ export const EligibilityWarnings = ( {
</CompactCard>
) }

{ ( isPlaceholder || filteredHolds.length > 0 ) && ! showFreeTrial && (
<CompactCard>
<HoldList
context={ context }
holds={ filteredHolds }
isPlaceholder={ isPlaceholder }
isMarketplace={ isMarketplace }
/>
</CompactCard>
) }
{ ( isPlaceholder || filteredHolds.length > 0 ) &&
! showFreeTrial &&
! hasValidBlockingHold && (
<CompactCard>
<HoldList
context={ context }
holds={ filteredHolds }
isPlaceholder={ isPlaceholder }
isMarketplace={ isMarketplace }
/>
</CompactCard>
) }

{ showThisSiteIsEligibleMessage && (
<CompactCard>
Expand Down Expand Up @@ -233,26 +237,28 @@ export const EligibilityWarnings = ( {
<CompactCard>
<div className="eligibility-warnings__confirm-buttons">
<SupportLink onShowHelpAssistant={ onDismiss } />
<Button
variant="primary"
__next40pxDefaultSize
disabled={
isProceedButtonDisabled( isEligible, listHolds ) ||
siteIsSavingSettings ||
siteIsLaunching ||
disableContinueButton
}
isBusy={ siteIsLaunching || siteIsSavingSettings || disableContinueButton }
onClick={ logEventAndProceed }
>
{ getProceedButtonText(
listHolds,
translate,
context,
showFreeTrial,
atomicTransferAction
) }
</Button>
{ ! hasValidBlockingHold && (
<Button
variant="primary"
__next40pxDefaultSize
disabled={
isProceedButtonDisabled( isEligible, listHolds ) ||
siteIsSavingSettings ||
siteIsLaunching ||
disableContinueButton
}
isBusy={ siteIsLaunching || siteIsSavingSettings || disableContinueButton }
onClick={ logEventAndProceed }
>
{ getProceedButtonText(
listHolds,
translate,
context,
showFreeTrial,
atomicTransferAction
) }
</Button>
) }
</div>
</CompactCard>
</div>
Expand Down
6 changes: 4 additions & 2 deletions client/blocks/eligibility-warnings/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,12 +235,14 @@
}
}

.eligibility-warnings__hold-list-dim .eligibility-warnings__hold-heading,
.eligibility-warnings__hold-list-dim .eligibility-warnings__hold,
.eligibility-warnings--blocking-hold .eligibility-warnings__header {
opacity: 0.2;
}

.eligibility-warnings--blocking-hold .eligibility-warnings__confirm-buttons {
margin-block-start: 16px;
}

.eligibility-warnings__plan-storage-wrapper {
margin-top: 20px;
margin-bottom: 20px;
Expand Down
26 changes: 21 additions & 5 deletions client/blocks/eligibility-warnings/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,19 +100,35 @@ describe( '<EligibilityWarnings>', () => {
expect( container.querySelectorAll( '.calypso-notice' ) ).toHaveLength( 1 );
} );

it( 'dimly renders the hold card when AT has been blocked by a sticker', () => {
it( 'hides the hold list and Continue button when AT has been blocked by a sticker', () => {
const state = createState( {
holds: [ 'BLOCKED_ATOMIC_TRANSFER', 'SITE_PRIVATE' ],
} );

const { getByTestId, getByText } = renderWithStore(
const { queryByTestId, queryByText } = renderWithStore(
<EligibilityWarnings backUrl="" onProceed={ noop } />,
state
);

expect( getByTestId( 'HoldList-Card' ) ).toHaveClass( 'eligibility-warnings__hold-list-dim' );
expect( getByText( 'Help' ) ).toHaveAttribute( 'disabled' );
expect( getByText( 'Continue' ) ).toBeDisabled();
expect( queryByTestId( 'HoldList-Card' ) ).not.toBeInTheDocument();
expect( queryByText( 'Continue' ) ).not.toBeInTheDocument();
} );

it( 'renders only the in-progress notice when a transfer already exists', () => {
const state = createState( {
holds: [ 'TRANSFER_ALREADY_EXISTS' ],
} );

const { container, queryByTestId, queryByText } = renderWithStore(
<EligibilityWarnings backUrl="" onProceed={ noop } />,
state
);

const notice = container.querySelector( '.calypso-notice' );
expect( notice ).toBeVisible();
expect( notice ).toHaveTextContent( /Installation in progress/ );
expect( queryByTestId( 'HoldList-Card' ) ).not.toBeInTheDocument();
expect( queryByText( 'Continue' ) ).not.toBeInTheDocument();
} );

it( 'renders warning notices when the API returns warnings', () => {
Expand Down
Loading