diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js index 0ddb20437..0dfdd7a3e 100644 --- a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js +++ b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js @@ -8,6 +8,8 @@ import classNames from 'classnames'; import { THEME_LIGHT } from '../../../../../constants'; import bytes from 'bytes'; import { Icon, closeSmall } from '@wordpress/icons'; +import { store as nfdOnboardingStore } from '../../../../store'; +import { useDispatch } from '@wordpress/data'; const ImageUploaderWithText = ( { image, imageSetter } ) => { const inputRef = useRef( null ); @@ -15,11 +17,14 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => { const [ isUploading, setIsUploading ] = useState( false ); const [ onDragActive, setOnDragActive ] = useState( false ); + const { updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore ); + async function updateItem( fileData ) { if ( fileData ) { setIsUploading( true ); const res = await uploadImage( fileData ); if ( ! res?.body ) { + updateSiteGenErrorStatus( true ); return setIsUploading( false ); } const id = res.body?.id; @@ -31,7 +36,6 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => { fileSize: fileData?.size, } ); } - setIsUploading( false ); } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 74f059d87..3a543826d 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -20,7 +20,11 @@ import { initialize as initializeSettings } from '../../../utils/api/settings'; import { init as initializePlugins } from '../../../utils/api/plugins'; import { init as initializeThemes } from '../../../utils/api/themes'; import { trigger as cronTrigger } from '../../../utils/api/cronTrigger'; -import { MAX_RETRIES_SITE_GEN } from '../../../../constants'; +import { + MAX_RETRIES_SITE_GEN, + SKIP_FLOW_ERROR_CODE_DATABASE, + SKIP_FLOW_ERROR_CODE_20, +} from '../../../../constants'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( @@ -41,24 +45,38 @@ const SiteGen = () => { }, [ newfoldBrand ] ); const location = useLocation(); - const { currentData, initialize, pluginInstallHash } = useSelect( - ( select ) => { + const { currentData, initialize, pluginInstallHash, siteGenErrorStatus } = + useSelect( ( select ) => { return { currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), initialize: select( nfdOnboardingStore ).getInitialize(), pluginInstallHash: select( nfdOnboardingStore ).getPluginInstallHash(), + siteGenErrorStatus: + select( nfdOnboardingStore ).getSiteGenErrorStatus(), }; - } - ); + } ); - const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + const { setCurrentOnboardingData, updateSiteGenErrorStatus } = + useDispatch( nfdOnboardingStore ); async function syncStoreToDB() { if ( currentData ) { //Set the Flow Data and sync store and DB - setFlow( currentData ); + const result = await setFlow( currentData ); + if ( result?.error !== null ) { + switch ( result?.error.code ) { + case SKIP_FLOW_ERROR_CODE_DATABASE: + break; + case SKIP_FLOW_ERROR_CODE_20: + break; + default: + currentData.sitegen.siteGenErrorStatus = true; + updateSiteGenErrorStatus( true ); + break; + } + } } } @@ -68,33 +86,35 @@ const SiteGen = () => { skipCache, retryCount = 1 ) { - return new Promise( () => - generateSiteGenMeta( siteInfo, identifier, skipCache ) - .then( ( data ) => { - if ( data.body !== null ) { - currentData.sitegen.siteGenMetaStatus.currentStatus += 1; - if ( - currentData.sitegen.siteGenMetaStatus - .currentStatus === - currentData.sitegen.siteGenMetaStatus.totalCount - ) { - currentData.sitegen.skipCache = false; - } - setCurrentOnboardingData( currentData ); - } else if ( retryCount < MAX_RETRIES_SITE_GEN ) { - performSiteGenMetaGeneration( - siteInfo, - identifier, - skipCache, - retryCount + 1 - ); - } - } ) - .catch( ( err ) => { - /* eslint-disable no-console */ - console.log( err ); - } ) - ); + try { + const data = await generateSiteGenMeta( + siteInfo, + identifier, + skipCache + ); + if ( data.body !== null ) { + currentData.sitegen.siteGenMetaStatus.currentStatus += 1; + if ( + currentData.sitegen.siteGenMetaStatus.currentStatus === + currentData.sitegen.siteGenMetaStatus.totalCount + ) { + currentData.sitegen.skipCache = false; + } + setCurrentOnboardingData( currentData ); + } + } catch ( err ) { + if ( retryCount < MAX_RETRIES_SITE_GEN ) { + performSiteGenMetaGeneration( + siteInfo, + identifier, + skipCache, + retryCount + 1 + ); + } else { + currentData.sitegen.siteGenErrorStatus = true; + updateSiteGenErrorStatus( true ); + } + } } async function generateSiteGenData() { @@ -107,7 +127,6 @@ const SiteGen = () => { ) { return; } - let identifiers = await getSiteGenIdentifiers(); identifiers = identifiers.body; @@ -161,6 +180,13 @@ const SiteGen = () => { handlePreviousStepTracking(); }, [ location.pathname ] ); + useEffect( () => { + if ( ! siteGenErrorStatus ) { + generateSiteGenData(); + syncStoreToDB(); + } + }, [ siteGenErrorStatus ] ); + useEffect( () => { initializeThemes(); initializeSettings(); diff --git a/src/OnboardingSPA/components/SiteGenError/contents.js b/src/OnboardingSPA/components/SiteGenError/contents.js new file mode 100644 index 000000000..4581201b1 --- /dev/null +++ b/src/OnboardingSPA/components/SiteGenError/contents.js @@ -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; diff --git a/src/OnboardingSPA/components/SiteGenError/index.js b/src/OnboardingSPA/components/SiteGenError/index.js new file mode 100644 index 000000000..7202ba969 --- /dev/null +++ b/src/OnboardingSPA/components/SiteGenError/index.js @@ -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 ( + +
+
+ +
+
+

+ { content.heading } +

+
+
+

+ { content.subHeading } +

+

+ { content.message } + + { content.buttonExit } + +

+
+
+ + { isLargeViewport ? ( + + ) : ( + + + + ) } +
+
+ + ); +}; + +export default SiteGenSiteError; diff --git a/src/OnboardingSPA/components/SiteGenError/stylesheet.scss b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss new file mode 100644 index 000000000..7cbb89bd7 --- /dev/null +++ b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss @@ -0,0 +1,141 @@ +.nfd-onboarding-step { + + &--site-gen { + + &__error { + display: flex; + justify-content: center; + + &__container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 544px; + + @media (max-width: #{ ($break-small) }) { + margin: 16px; + margin-bottom: 100px; + } + + @media (min-width: 2600px ) { + width: 1000px; + } + + &__animation { + background-image: var(--sitegen-ai-animation); + background-repeat: no-repeat; + background-size: cover; + width: 250px; + height: 183px; + } + + &__heading { + padding: 0; + width: 100%; + display: flex; + align-items: center; + flex-direction: row; + justify-content: center; + + &__text { + line-height: 1; + font-weight: 500; + color: var(--nfd-onboarding-primary); + font-size: 18px; + } + } + + &__sub-heading { + padding: 24px 24px 10px 24px; + margin-bottom: 50px; + border: solid #e01c1c 1px; + border-radius: 8px; + margin-top: 20px; + + &__text { + margin: 0; + padding: 0; + text-align: left; + color: var(--nfd-onboarding-primary); + font-size: 16px; + font-weight: 600; + } + + &__message { + margin-top: 10px; + padding: 0; + text-align: left; + color: var(--nfd-onboarding-primary); + font-size: 14px; + font-weight: 400; + } + + &__exit { + font-size: 14px; + font-weight: 400; + color: var(--nfd-onboarding-primary); + margin: 0; + padding: 0; + + &:hover { + text-decoration: underline; + color: var(--nfd-onboarding-primary); + } + } + } + + &__buttons { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + + &__skip { + font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem); + font-style: normal; + font-weight: 510; + margin-right: 24px; + color: var(--nfd-onboarding-primary); + + &:hover { + text-decoration: underline; + color: var(--nfd-onboarding-primary); + } + + @media (max-width: #{ ($break-small) }) { + margin-right: 0; + } + } + + &__retry { + height: 50px; + display: flex; + cursor: pointer; + padding: 0 16px; + text-align: center; + border-radius: 8px; + align-items: center; + justify-content: center; + color: var(--nfd-onboarding-secondary); + background-color: var(--nfd-onboarding-primary); + font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem); + } + + @media (max-width: #{ ($break-small) }) { + justify-content: center; + margin-bottom: 50px; + margin-right: 0; + } + } + + } + + &--button { + padding: 0 35px; + } + } + + } +} diff --git a/src/OnboardingSPA/components/StateHandlers/SitegenAi/contents.js b/src/OnboardingSPA/components/StateHandlers/SitegenAi/contents.js new file mode 100644 index 000000000..83795badf --- /dev/null +++ b/src/OnboardingSPA/components/StateHandlers/SitegenAi/contents.js @@ -0,0 +1,34 @@ +import { __, sprintf } from '@wordpress/i18n'; + +const getContents = ( brandName ) => { + return { + loader: { + title: sprintf( + /* translators: %s: Brand */ + __( 'Preparing your %s design studio', 'wp-module-onboarding' ), + brandName + ), + subtitle: __( + 'Hang tight while we show you some of the best WordPress has to offer!', + 'wp-module-onboarding' + ), + }, + errorState: { + title: sprintf( + /* translators: %s: Brand */ + __( 'Preparing your %s design studio', 'wp-module-onboarding' ), + brandName + ), + subtitle: __( + 'Hang tight while we show you some of the best WordPress has to offer!', + 'wp-module-onboarding' + ), + error: __( + 'Uh-oh, something went wrong. Please contact support.', + 'wp-module-onboarding' + ), + }, + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js new file mode 100644 index 000000000..395ad21fd --- /dev/null +++ b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js @@ -0,0 +1,24 @@ +import { Fragment } from '@wordpress/element'; +import SiteGenSiteError from '../../SiteGenError'; +import { useSelect } from '@wordpress/data'; +import { store as nfdOnboardingStore } from '../../../store'; + +const SitegenAiStateHandler = ( { children } ) => { + const { siteGenErrorStatus } = useSelect( ( select ) => { + return { + siteGenErrorStatus: + select( nfdOnboardingStore ).getSiteGenErrorStatus(), + }; + } ); + + const handleRender = () => { + if ( siteGenErrorStatus ) { + return ; + } + + return children; + }; + return { handleRender() }; +}; + +export default SitegenAiStateHandler; diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js index 707a3e1b9..87bb72cad 100644 --- a/src/OnboardingSPA/steps/SiteGen/Building/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js @@ -7,6 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store'; import { HEADER_SITEGEN } from '../../../../constants'; import SiteGenLoader from '../../../components/Loaders/SiteGenLoader'; +import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; const SiteGenBuilding = () => { const { @@ -23,22 +24,24 @@ const SiteGenBuilding = () => { setDrawerActiveView( false ); } ); return ( - -
-
-
-
-
-
+ + +
+
+
+
+
+
+
-
-
- -
- +
+ +
+ + ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js index c186d791f..0e340ee47 100644 --- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js @@ -8,6 +8,7 @@ import { store as nfdOnboardingStore } from '../../../store'; import CommonLayout from '../../../components/Layouts/Common'; import CardWithOptions from '../../../components/CardWithOptions'; import SiteGenLoader from '../../../components/Loaders/SiteGenLoader'; +import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; const SiteGenExperience = () => { const navigate = useNavigate(); @@ -58,17 +59,19 @@ const SiteGenExperience = () => { }; return ( - -
- - -
- + + +
+ + +
+ + ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index ad8aac174..2b2845fc2 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -12,6 +12,7 @@ import HeartAnimation from './heartAnimation'; import RegeneratingSiteCard from './regeneratingCard'; import { getHomepages, regenerateHomepage } from '../../../utils/api/siteGen'; import { getGlobalStyles } from '../../../utils/api/themes'; +import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; // eslint-disable-next-line import/no-extraneous-dependencies import { cloneDeep, isEmpty } from 'lodash'; @@ -30,6 +31,7 @@ const SiteGenPreview = () => { setCurrentOnboardingData, updateInitialize, setHideFooterNav, + updateSiteGenErrorStatus, } = useDispatch( nfdOnboardingStore ); const { currentData, nextStep } = useSelect( ( select ) => { @@ -67,6 +69,7 @@ const SiteGenPreview = () => { if ( response.error ) { setIsPreviewLoading( false ); + updateSiteGenErrorStatus( true ); return; } @@ -203,30 +206,35 @@ const SiteGenPreview = () => { const content = getContents(); return ( - -
-
-

- { content.heading } -

+ + +
+
+

+ { content.heading } +

+
+
+

+ { content.subheading } +

+
-
-

- { content.subheading } -

+
+ { buildPreviews() } + { isRegenerating && ( + + ) }
-
-
- { buildPreviews() } - { isRegenerating && ( - - ) } -
-
- - { content.favouriteNote } -
- +
+ + { content.favouriteNote } +
+ + ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 83a2f043c..658b33850 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -10,6 +10,7 @@ import AIHeading from '../../../components/Heading/AIHeading'; import CommonLayout from '../../../components/Layouts/Common'; import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen'; import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen'; +import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; const SiteGenSiteDetails = () => { const content = getContents(); @@ -63,34 +64,36 @@ const SiteGenSiteDetails = () => { }, [ customerInput ] ); return ( - - -
- - - { isLargeViewport && ( -
- -
- ) } - -
- - + + + +
+ + + { isLargeViewport && ( +
+ +
+ ) } + +
+ + + ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index 61971f4ea..db0365abc 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -11,6 +11,7 @@ import AIHeading from '../../../components/Heading/AIHeading'; import CommonLayout from '../../../components/Layouts/Common'; import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen'; import ImageUploaderWithText from '../../../components/ImageUploader/components/ImageUploaderWithText'; +import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; const SiteGenSiteLogo = () => { const [ siteLogo, setSiteLogo ] = useState(); @@ -81,35 +82,37 @@ const SiteGenSiteLogo = () => { const content = getContents(); return ( - -
- - -
- resetSiteLogo() } - className="nfd-onboarding-step--site-gen__site-logo__container__buttons__skip" - text={ content.buttons.skip } + + +
+ + - { isLargeViewport && ( - + resetSiteLogo() } + className="nfd-onboarding-step--site-gen__site-logo__container__buttons__skip" + text={ content.buttons.skip } /> - ) } + { isLargeViewport && ( + + ) } +
-
- + + ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js index c74b0a5db..3c8633f65 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js @@ -11,6 +11,7 @@ import AIHeading from '../../../components/Heading/AIHeading'; import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen'; import { FacebookConnectButton } from '@newfold-labs/wp-module-facebook'; import { useNavigate } from 'react-router-dom'; +import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; const SiteGenSiteSocialMedia = () => { const isLargeViewport = useViewportMatch( 'small' ); @@ -23,6 +24,7 @@ const SiteGenSiteSocialMedia = () => { setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, + updateSiteGenErrorStatus, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -42,6 +44,10 @@ const SiteGenSiteSocialMedia = () => { setConnected( true ); }; + const handleFailure = () => { + updateSiteGenErrorStatus( true ); + }; + useEffect( () => { if ( interacted && connected ) { navigate( nextStep.path ); @@ -50,41 +56,44 @@ const SiteGenSiteSocialMedia = () => { const content = getContents(); return ( - -
- -
-
- { content.facebookTitle } -

{ content.facebookDesc }

-
-
- setInteracted( true ) } - > - - + + +
+ +
+
+ { content.facebookTitle } +

{ content.facebookDesc }

+
+
+ setInteracted( true ) } + onFailure={ handleFailure } + > + + +
-
-
- - { isLargeViewport && ( - + - ) } + { isLargeViewport && ( + + ) } +
-
- + + ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js index ed9681339..97734f99d 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js @@ -7,6 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store'; import { HEADER_SITEGEN } from '../../../../constants'; import getContents from './contents'; import OrbAnimation from '../../../components/OrbAnimation'; +import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; const SiteGenWelcome = () => { const { @@ -29,31 +30,33 @@ const SiteGenWelcome = () => { const content = getContents(); return ( - -
-
- + + +
+
+ +
+
+
+

+ { content.heading } +

+
+
+

+ { content.subHeading } +

+
+
-
-
-

- { content.heading } -

-
-
-

- { content.subHeading } -

-
- -
- + + ); }; diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index 10bce8d89..9ec8a0c2f 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/src/OnboardingSPA/steps/TheFork/index.js @@ -10,6 +10,7 @@ import { DEFAULT_FLOW } from '../../data/flows/constants'; import HeadingWithSubHeading from '../../components/HeadingWithSubHeading/SiteGen/index'; import StartOptions from '../../components/StartOptions'; import getContents from './contents'; +import SitegenAiStateHandler from '../../components/StateHandlers/SitegenAi'; const TheFork = () => { const { migrationUrl } = useSelect( ( select ) => { @@ -44,30 +45,32 @@ const TheFork = () => { const content = getContents(); return ( - - - -
-
- + - { content.importtext } - - + + +
+
+ + { content.importtext } + + + ); }; diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index 9f34b8dae..283681925 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -319,3 +319,10 @@ export function updateCustomizeSidebarData( customizeSidebarData ) { customizeSidebarData, }; } + +export function updateSiteGenErrorStatus( siteGenErrorStatus ) { + return { + type: 'SET_SITEGEN_AI_ERROR_STATUS', + siteGenErrorStatus, + }; +} diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index e2dccd324..f20e80ae7 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -193,6 +193,17 @@ export function data( state = {}, action ) { }, }, }; + case 'SET_SITEGEN_AI_ERROR_STATUS': + return { + ...state, + flowData: { + ...state.flowData, + sitegen: { + ...state.flowData.sitegen, + siteGenErrorStatus: action.siteGenErrorStatus, + }, + }, + }; } return state; diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 00d3bce0c..586ac9c6d 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -466,3 +466,7 @@ export const getAllHomepages = ( state ) => { export function getCustomizeSidebarData( state ) { return state.runtime.customizeSidebarData; } + +export function getSiteGenErrorStatus( state ) { + return state.data.flowData.sitegen.siteGenErrorStatus; +} diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 8e955d9a4..4b00aa040 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -64,6 +64,7 @@ @import "../components/TextInput/TextAreaSiteGenDetails/stylesheet"; @import "../components/TextInput/TextInputSiteGenDetails/stylesheet"; @import "../components/OrbAnimation/stylesheet"; +@import "../components/SiteGenError/stylesheet"; // CSS for Pages @import "../steps/BasicInfo/stylesheet"; diff --git a/src/OnboardingSPA/utils/api/siteGen.js b/src/OnboardingSPA/utils/api/siteGen.js index 942d603c1..64893f1c0 100644 --- a/src/OnboardingSPA/utils/api/siteGen.js +++ b/src/OnboardingSPA/utils/api/siteGen.js @@ -16,17 +16,17 @@ export async function generateSiteGenMeta( identifier, skipCache = true ) { - return await resolve( - apiFetch( { - url: onboardingRestURL( 'sitegen/generate' ), - method: 'POST', - data: { - site_info: siteInfo, - identifier, - skip_cache: skipCache, - }, - } ).then() - ); + const data = await apiFetch( { + url: onboardingRestURL( 'sitegen/generate' ), + method: 'POST', + data: { + site_info: siteInfo, + identifier, + skip_cache: skipCache, + }, + } ); + + return data; } export async function getHomepages( siteDescription ) { diff --git a/src/constants.js b/src/constants.js index 98d020239..0418b18ae 100644 --- a/src/constants.js +++ b/src/constants.js @@ -111,3 +111,9 @@ export const API_REQUEST = { SET_FLOW: 'SET_FLOW', SET_GLOBAL_STYLES: 'SET_GLOBAL_STYLES', }; + +/** + * ERROR code to skip for flow api + */ +export const SKIP_FLOW_ERROR_CODE_20 = 20; +export const SKIP_FLOW_ERROR_CODE_DATABASE = 'database_update_failed';