-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Jetpack: Handle disconnected site case (#47121)
* Create Jetpack disconnected interstitial page * Create Jetpack disconnected switch component * Create new Upsell component status * Add an optional secondary button to Upsell * Include Jetpack Scan status in the check * Add Jetpack Disconnected gray SVG * Rename the switch component * Use Jetpack Support URL * Configure CTAs links * Abstract Disconnected components in their own files * Support disconnected state in Scan controller * Add `type=down` query parameter
- Loading branch information
Showing
16 changed files
with
347 additions
and
9 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions
76
client/components/jetpack/is-jetpack-disconnected-switch/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { ReactElement, useCallback } from 'react'; | ||
import { useSelector } from 'react-redux'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import QueryJetpackScan from 'calypso/components/data/query-jetpack-scan'; | ||
import QueryRewindState from 'calypso/components/data/query-rewind-state'; | ||
import RenderSwitch from 'calypso/components/jetpack/render-switch'; | ||
import getSelectedSiteId from 'calypso/state/ui/selectors/get-selected-site-id'; | ||
import getRewindState from 'calypso/state/selectors/get-rewind-state'; | ||
import getSiteScanState from 'calypso/state/selectors/get-site-scan-state'; | ||
|
||
const stateImpliesJetpackIsDisconnected = ( productState?: { | ||
state?: string; | ||
reason?: string; | ||
} ) => { | ||
if ( ! productState ) { | ||
return undefined; | ||
} | ||
|
||
return productState.state === 'unavailable' && productState.reason === 'unknown'; | ||
}; | ||
|
||
const isInitialized = ( productState: { state?: string } | null ) => | ||
productState && productState.state !== 'uninitialized'; | ||
|
||
const IsJetpackDisconnectedSwitch: React.FC< Props > = ( { | ||
loadingComponent, | ||
trueComponent, | ||
falseComponent, | ||
} ) => { | ||
const siteId = useSelector( getSelectedSiteId ); | ||
const rewindState = useSelector( ( state ) => getRewindState( state, siteId ) ); | ||
const scanState = useSelector( ( state ) => getSiteScanState( state, siteId ) ); | ||
|
||
const isJetpackDisconnected = useCallback( | ||
() => [ rewindState, scanState ].some( stateImpliesJetpackIsDisconnected ), | ||
[ rewindState, scanState ] | ||
); | ||
|
||
const isLoading = useCallback( () => { | ||
if ( isJetpackDisconnected() ) { | ||
return false; | ||
} | ||
|
||
return [ rewindState, scanState ].some( ( state ) => ! isInitialized( state ) ); | ||
}, [ isJetpackDisconnected, rewindState, scanState ] ); | ||
|
||
return ( | ||
<RenderSwitch | ||
loadingCondition={ isLoading } | ||
renderCondition={ isJetpackDisconnected } | ||
queryComponent={ | ||
<> | ||
<QueryRewindState siteId={ siteId } /> | ||
<QueryJetpackScan siteId={ siteId } /> | ||
</> | ||
} | ||
loadingComponent={ loadingComponent } | ||
trueComponent={ trueComponent } | ||
falseComponent={ falseComponent } | ||
/> | ||
); | ||
}; | ||
|
||
type Props = { | ||
loadingComponent?: ReactElement; | ||
trueComponent?: ReactElement; | ||
falseComponent?: ReactElement; | ||
}; | ||
|
||
export default IsJetpackDisconnectedSwitch; |
77 changes: 77 additions & 0 deletions
77
client/components/jetpack/jetpack-disconnected-wpcom/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { FunctionComponent } from 'react'; | ||
import { useTranslate } from 'i18n-calypso'; | ||
import { useSelector } from 'react-redux'; | ||
import { Button } from '@automattic/components'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { getSelectedSite } from 'calypso/state/ui/selectors'; | ||
import { preventWidows } from 'calypso/lib/formatting'; | ||
import { JETPACK_SUPPORT } from 'calypso/lib/url/support'; | ||
import ExternalLink from 'calypso/components/external-link'; | ||
import PromoCard from 'calypso/components/promo-section/promo-card'; | ||
import useTrackCallback from 'calypso/lib/jetpack/use-track-callback'; | ||
|
||
/** | ||
* Asset dependencies | ||
*/ | ||
import JetpackDisconnected from 'calypso/assets/images/jetpack/disconnected.svg'; | ||
import './style.scss'; | ||
|
||
const JetpackDisconnectedWPCOM: FunctionComponent = () => { | ||
const translate = useTranslate(); | ||
const { name: siteName, slug: siteSlug, URL: siteUrl } = useSelector( getSelectedSite ); | ||
const reconnectUrl = `/settings/disconnect-site/${ siteSlug }?type=down`; | ||
const onReconnectClick = useTrackCallback( undefined, 'calypso_jetpack_backup_reconnect_click' ); | ||
const onSupportClick = useTrackCallback( undefined, 'calypso_jetpack_backup_support_click' ); | ||
return ( | ||
<PromoCard | ||
title={ preventWidows( translate( 'Jetpack connection has failed' ) ) } | ||
image={ { path: JetpackDisconnected } } | ||
isPrimary | ||
> | ||
<p> | ||
{ preventWidows( | ||
translate( 'Jetpack is unable to reach your site {{siteName/}} at this moment.', { | ||
components: { siteName: <strong>{ siteName }</strong> }, | ||
} ) | ||
) } | ||
</p> | ||
<p> | ||
{ preventWidows( | ||
translate( | ||
'Please visit {{siteUrl/}} to ensure your site loading correctly and reconnect Jetpack if necessary.', | ||
{ | ||
components: { | ||
siteUrl: <ExternalLink href={ siteUrl }>{ siteUrl }</ExternalLink>, | ||
}, | ||
} | ||
) | ||
) } | ||
</p> | ||
<div className="jetpack-disconnected-wpcom__ctas"> | ||
<Button | ||
className="jetpack-disconnected-wpcom__cta" | ||
href={ reconnectUrl } | ||
onClick={ onReconnectClick } | ||
primary | ||
> | ||
{ translate( 'Reconnect Jetpack' ) } | ||
</Button> | ||
<Button | ||
className="jetpack-disconnected-wpcom__cta" | ||
href={ JETPACK_SUPPORT } | ||
onClick={ onSupportClick } | ||
> | ||
{ translate( 'I need help' ) } | ||
</Button> | ||
</div> | ||
</PromoCard> | ||
); | ||
}; | ||
|
||
export default JetpackDisconnectedWPCOM; |
8 changes: 8 additions & 0 deletions
8
client/components/jetpack/jetpack-disconnected-wpcom/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
.jetpack-disconnected-wpcom__ctas { | ||
margin: 16px 0; | ||
} | ||
|
||
.jetpack-disconnected-wpcom__cta { | ||
margin-top: 8px; | ||
margin-right: 16px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { FunctionComponent } from 'react'; | ||
import { useTranslate } from 'i18n-calypso'; | ||
import { useSelector, useDispatch } from 'react-redux'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { getSelectedSite } from 'calypso/state/ui/selectors'; | ||
import ExternalLink from 'calypso/components/external-link'; | ||
import Upsell from 'calypso/components/jetpack/upsell'; | ||
import { preventWidows } from 'calypso/lib/formatting'; | ||
import { JETPACK_SUPPORT } from 'calypso/lib/url/support'; | ||
import { recordTracksEvent } from 'calypso/state/analytics/actions'; | ||
|
||
/** | ||
* Style dependencies | ||
*/ | ||
import JetpackDisconnectedSVG from 'calypso/assets/images/jetpack/disconnected-gray.svg'; | ||
import './style.scss'; | ||
|
||
const JetpackDisconnectedIcon = () => ( | ||
<div className="jetpack-disconnected__icon-header"> | ||
<img src={ JetpackDisconnectedSVG } alt="Jetpack disconnected status" /> | ||
</div> | ||
); | ||
|
||
const JetpackDisconnected: FunctionComponent = () => { | ||
const translate = useTranslate(); | ||
const dispatch = useDispatch(); | ||
const { name: siteName, slug: siteSlug, URL: siteUrl } = useSelector( getSelectedSite ); | ||
const reconnectUrl = `https://wordpress.com/settings/disconnect-site/${ siteSlug }?type=down`; | ||
const body = [ | ||
<span className="jetpack-disconnected__paragraph" key="paragraph-1"> | ||
{ preventWidows( | ||
translate( 'Jetpack is unable to reach your site {{siteName/}} at this moment.', { | ||
components: { siteName: <strong>{ siteName }</strong> }, | ||
} ) | ||
) } | ||
</span>, | ||
<span className="jetpack-disconnected__paragraph" key="paragraph-2"> | ||
{ preventWidows( | ||
translate( | ||
'Please visit {{siteUrl/}} to ensure your site loading correctly and reconnect Jetpack if necessary.', | ||
{ | ||
components: { | ||
siteUrl: <ExternalLink href={ siteUrl }>{ siteUrl }</ExternalLink>, | ||
}, | ||
} | ||
) | ||
) } | ||
</span>, | ||
]; | ||
return ( | ||
<Upsell | ||
headerText={ translate( 'Jetpack connection has failed' ) } | ||
bodyText={ body } | ||
buttonLink={ reconnectUrl } | ||
buttonText={ translate( 'Reconnect Jetpack' ) } | ||
onClick={ () => dispatch( recordTracksEvent( 'calypso_jetpack_backup_reconnect_click' ) ) } | ||
iconComponent={ <JetpackDisconnectedIcon /> } | ||
secondaryButtonLink={ JETPACK_SUPPORT } | ||
secondaryButtonText={ translate( 'I need help' ) } | ||
secondaryOnClick={ () => | ||
dispatch( recordTracksEvent( 'calypso_jetpack_backup_support_click' ) ) | ||
} | ||
/> | ||
); | ||
}; | ||
|
||
export default JetpackDisconnected; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
.jetpack-disconnected__icon-header { | ||
text-align: center; | ||
|
||
img { | ||
height: 72px; | ||
width: auto; | ||
} | ||
|
||
@include breakpoint-deprecated( '>660px' ) { | ||
text-align: start; | ||
} | ||
} | ||
|
||
.jetpack-disconnected__paragraph { | ||
display: block; | ||
|
||
margin-bottom: 1.5rem; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.