Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #445 from newfold-labs/siteErrorPage
Site error page
- Loading branch information
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| const getContents = () => { | ||
| return { | ||
| heading: __( | ||
| "Sorry, we're having trouble communicating with our AI service.", | ||
| 'wp-module-onboarding' | ||
| ), | ||
| subHeading: __( | ||
| 'Do you keep getting this error?', | ||
| 'wp-module-onboarding' | ||
| ), | ||
| message: __( | ||
| 'If you continue to get this error, you may either continue creating your site without using our AI assistant, or you can ', | ||
| 'wp-module-onboarding' | ||
| ), | ||
| buttonText: __( 'Try again', 'wp-module-onboarding' ), | ||
| buttonSkip: __( 'Continue without AI', 'wp-module-onboarding' ), | ||
| buttonExit: __( 'exit to WordPress', 'wp-module-onboarding' ), | ||
| }; | ||
| }; | ||
|
|
||
| export default getContents; |
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,152 @@ | ||
| import { useViewportMatch } from '@wordpress/compose'; | ||
| import { useEffect } from '@wordpress/element'; | ||
| import { useSelect, useDispatch } from '@wordpress/data'; | ||
| import getContents from './contents'; | ||
| import { Button, Fill } from '@wordpress/components'; | ||
| import { store as nfdOnboardingStore } from '../../store'; | ||
| import CommonLayout from '../Layouts/Common'; | ||
| import OrbAnimation from '../OrbAnimation'; | ||
| import { SITEGEN_FLOW, DEFAULT_FLOW } from '../../data/flows/constants'; | ||
| import { validateFlow } from '../../data/flows/utils'; | ||
| import { resolveGetDataForFlow } from '../../data/flows'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { | ||
| FOOTER_SITEGEN, | ||
| FOOTER_END, | ||
| HEADER_SITEGEN, | ||
| pluginDashboardPage, | ||
| } from '../../../constants'; | ||
|
|
||
| const SiteGenSiteError = () => { | ||
| const navigate = useNavigate(); | ||
| const { | ||
| setIsHeaderEnabled, | ||
| setSidebarActiveView, | ||
| setHeaderActiveView, | ||
| setDrawerActiveView, | ||
| setHideFooterNav, | ||
| setIsHeaderNavigationEnabled, | ||
| updateAllSteps, | ||
| updateTopSteps, | ||
| updateRoutes, | ||
| updateDesignRoutes, | ||
| updateInitialize, | ||
| setCurrentOnboardingData, | ||
| updateSiteGenErrorStatus, | ||
| } = useDispatch( nfdOnboardingStore ); | ||
|
|
||
| useEffect( () => { | ||
| setHideFooterNav( true ); | ||
| setIsHeaderEnabled( true ); | ||
| setSidebarActiveView( false ); | ||
| setHeaderActiveView( HEADER_SITEGEN ); | ||
| setIsHeaderNavigationEnabled( true ); | ||
| setDrawerActiveView( false ); | ||
| } ); | ||
|
|
||
| const { brandConfig, currentData } = useSelect( ( select ) => { | ||
| return { | ||
| brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), | ||
| currentData: | ||
| select( nfdOnboardingStore ).getCurrentOnboardingData(), | ||
| }; | ||
| } ); | ||
| const isLargeViewport = useViewportMatch( 'small' ); | ||
|
|
||
| const content = getContents(); | ||
| const oldFlow = window.nfdOnboarding?.oldFlow | ||
| ? window.nfdOnboarding.oldFlow | ||
| : DEFAULT_FLOW; | ||
|
|
||
| const switchFlow = ( newFlow ) => { | ||
| if ( ! validateFlow( brandConfig, newFlow ) ) { | ||
| return false; | ||
| } | ||
| const currentFlow = window.nfdOnboarding.currentFlow; | ||
| const getData = resolveGetDataForFlow( newFlow ); | ||
| const data = getData(); | ||
| updateAllSteps( data.steps ); | ||
| updateTopSteps( data?.topSteps ); | ||
| updateRoutes( data.routes ); | ||
| updateDesignRoutes( data?.designRoutes ); | ||
| if ( SITEGEN_FLOW !== currentFlow ) { | ||
| window.nfdOnboarding.oldFlow = currentFlow; | ||
| } | ||
|
|
||
| window.nfdOnboarding.currentFlow = newFlow; | ||
| currentData.activeFlow = newFlow; | ||
| setCurrentOnboardingData( currentData ); | ||
| if ( SITEGEN_FLOW !== newFlow ) { | ||
| updateInitialize( true ); | ||
| } | ||
| navigate( data.steps[ 1 ].path ); | ||
| }; | ||
| const handleRetry = () => { | ||
| updateSiteGenErrorStatus( false ); | ||
| }; | ||
| return ( | ||
| <CommonLayout className="nfd-onboarding-step--site-gen__error"> | ||
| <div className="nfd-onboarding-step--site-gen__error__container"> | ||
| <div className="nfd-onboarding-step--site-gen__error__container__orb"> | ||
| <OrbAnimation height={ `100px` } /> | ||
| </div> | ||
| <div className="nfd-onboarding-step--site-gen__error__container__heading"> | ||
| <p className="nfd-onboarding-step--site-gen__error__container__heading__text"> | ||
| { content.heading } | ||
| </p> | ||
| </div> | ||
| <div className="nfd-onboarding-step--site-gen__error__container__sub-heading"> | ||
| <p className="nfd-onboarding-step--site-gen__error__container__sub-heading__text"> | ||
| { content.subHeading } | ||
| </p> | ||
| <p className="nfd-onboarding-step--site-gen__error__container__sub-heading__message"> | ||
| { content.message } | ||
| <a | ||
| className="nfd-onboarding-step--site-gen__error__container__sub-heading__exit" | ||
| href={ pluginDashboardPage } | ||
| > | ||
| { content.buttonExit } | ||
| </a> | ||
| </p> | ||
| </div> | ||
| <div className="nfd-onboarding-step--site-gen__error__container__buttons"> | ||
| <Button | ||
| className="nfd-onboarding-step--site-gen__error__container__buttons__skip" | ||
| onClick={ () => { | ||
| switchFlow( oldFlow ); | ||
| } } | ||
| > | ||
| { content.buttonSkip } | ||
| </Button> | ||
| { isLargeViewport ? ( | ||
| <Button | ||
| className="nfd-onboarding-step--site-gen__error__container__buttons__retry" | ||
| onClick={ () => { | ||
| handleRetry(); | ||
| } } | ||
| > | ||
| <p className="nfd-onboarding-button--site-gen-next--text"> | ||
| { content.buttonText } | ||
| </p> | ||
| </Button> | ||
| ) : ( | ||
| <Fill name={ `${ FOOTER_SITEGEN }/${ FOOTER_END }` }> | ||
| <Button | ||
| className="nfd-onboarding-step--site-gen__error__container__buttons__retry" | ||
| onClick={ () => { | ||
| handleRetry(); | ||
| } } | ||
| > | ||
| <p className="nfd-onboarding-button--site-gen-next--text"> | ||
| { content.buttonText } | ||
| </p> | ||
| </Button> | ||
| </Fill> | ||
| ) } | ||
| </div> | ||
| </div> | ||
| </CommonLayout> | ||
| ); | ||
| }; | ||
|
|
||
| export default SiteGenSiteError; |
Oops, something went wrong.