From 696ada83315629b8b72e1563b210e643a7a15d98 Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Tue, 30 Jan 2024 20:26:39 +0530 Subject: [PATCH 01/14] initial commit --- src/OnboardingSPA/chapters/sitegen.js | 2 + .../steps/SiteGen/SiteError/contents.js | 18 ++++ .../steps/SiteGen/SiteError/index.js | 64 ++++++++++++++ .../steps/SiteGen/SiteError/step.js | 18 ++++ .../steps/SiteGen/SiteError/stylesheet.scss | 83 +++++++++++++++++++ src/OnboardingSPA/styles/app.scss | 1 + 6 files changed, 186 insertions(+) create mode 100644 src/OnboardingSPA/steps/SiteGen/SiteError/contents.js create mode 100644 src/OnboardingSPA/steps/SiteGen/SiteError/index.js create mode 100644 src/OnboardingSPA/steps/SiteGen/SiteError/step.js create mode 100644 src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss diff --git a/src/OnboardingSPA/chapters/sitegen.js b/src/OnboardingSPA/chapters/sitegen.js index faaf53ad6..2ab314b80 100644 --- a/src/OnboardingSPA/chapters/sitegen.js +++ b/src/OnboardingSPA/chapters/sitegen.js @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { stepSiteGenWelcome } from '../steps/SiteGen/Welcome/step'; import { stepSiteGenSiteDetails } from '../steps/SiteGen/SiteDetails/step'; import { stepSiteGenSiteLogo } from '../steps/SiteGen/SiteLogo/step'; +import { stepSiteGenSiteError} from '../steps/SiteGen/SiteError/step'; import { stepSiteGenSocialMedia } from '../steps/SiteGen/SocialMedia/step'; import { stepSiteGenExperience } from '../steps/SiteGen/Experience/step'; import { stepSiteGenBuilding } from '../steps/SiteGen/Building/step'; @@ -14,6 +15,7 @@ const steps = [ stepSiteGenWelcome, stepSiteGenSiteDetails, stepSiteGenSocialMedia, + stepSiteGenSiteError, stepSiteGenSiteLogo, stepSiteGenExperience, stepSiteGenBuilding, diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js b/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js new file mode 100644 index 000000000..d9f1c6f74 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js @@ -0,0 +1,18 @@ +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 exit directly to WordPress', + 'wp-module-onboarding' + ), + buttonText: __( 'Try again', 'wp-module-onboarding' ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/index.js b/src/OnboardingSPA/steps/SiteGen/SiteError/index.js new file mode 100644 index 000000000..d935f8d7e --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/index.js @@ -0,0 +1,64 @@ +import { useViewportMatch } from '@wordpress/compose'; +import { useEffect, useState } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; + +import getContents from './contents'; +import { HEADER_SITEGEN } from '../../../../constants'; +import SkipButton from '../../../components/SkipButton'; +import { store as nfdOnboardingStore } from '../../../store'; +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'; + +const SiteGenSiteError = () => { + const { + setIsHeaderEnabled, + setSidebarActiveView, + setHeaderActiveView, + setDrawerActiveView, + setHideFooterNav, + setIsHeaderNavigationEnabled, + } = useDispatch( nfdOnboardingStore ); + + useEffect( () => { + setHideFooterNav( true ); + setIsHeaderEnabled( true ); + setSidebarActiveView( false ); + setHeaderActiveView( HEADER_SITEGEN ); + setIsHeaderNavigationEnabled( true ); + setDrawerActiveView( false ); + } ); + + const content = getContents(); + return ( + +
+
+
+

+ { content.heading } +

+
+
+

+ { content.subHeading } +

+

+ { content.message } +

+
+ +
+ + ); +}; + +export default SiteGenSiteError; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/step.js b/src/OnboardingSPA/steps/SiteGen/SiteError/step.js new file mode 100644 index 000000000..208e5173c --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/step.js @@ -0,0 +1,18 @@ +import { copy } from '@wordpress/icons'; +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from '../../../data/models/Step'; + +const SiteGenSiteError = lazy( () => import( './index' ) ); + +export const stepSiteGenSiteError = new Step( { + path: '/sitegen/step/site-error', + title: __( 'Page Layouts', 'wp-module-onboarding' ), + Component: SiteGenSiteError, + icon: copy, + sidebars: { + LearnMore: { + SidebarComponents: [], + }, + }, +} ); diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss new file mode 100644 index 000000000..220ba38a0 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss @@ -0,0 +1,83 @@ +.nfd-onboarding-step { + + &--site-gen { + + &__error { + display: flex; + justify-content: center; + + &__container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 500px; + + @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: 510; + margin-left: 15px; + white-space: normal; + letter-spacing: 0.8px; + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem); + } + } + + &__sub-heading { + padding: 0; + width: 100%; + margin: 10px; + margin-bottom: 50px; + + &__text { + margin: 0; + padding: 0; + text-align: left; + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.727rem + 0.5114vw, 2rem); + } + + &__message { + margin: 0; + padding: 0; + text-align: left; + color: var(--nfd-onboarding-primary); + font-size: clamp(0.0625rem, 0.727rem + 0.5114vw, 2rem); + } + } + + } + + &--button { + padding: 0 35px; + } + } + + } +} diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 85b03339a..2947dde16 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -87,6 +87,7 @@ @import "../steps/SiteGen/Building/stylesheet"; @import "../steps/SiteGen/Editor/stylesheet"; @import "../steps/SiteGen/Editor/Header/stylesheet"; +@import "../steps/SiteGen/SiteError/stylesheet"; .nfd-onboarding-container { display: flex; From 8da72082b861eca7fbe47dd7fa129c2fad115a35 Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Wed, 31 Jan 2024 19:19:14 +0530 Subject: [PATCH 02/14] added statehandler --- .../StateHandlers/SitegenAi/contents.js | 34 +++++++++ .../StateHandlers/SitegenAi/index.js | 42 +++++++++++ .../steps/SiteGen/SiteError/contents.js | 4 +- .../steps/SiteGen/SiteError/index.js | 28 ++++++-- .../steps/SiteGen/SiteError/stylesheet.scss | 72 +++++++++++++++---- 5 files changed, 159 insertions(+), 21 deletions(-) create mode 100644 src/OnboardingSPA/components/StateHandlers/SitegenAi/contents.js create mode 100644 src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js 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..2e5d515eb --- /dev/null +++ b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js @@ -0,0 +1,42 @@ +import { useSelect, useDispatch } from '@wordpress/data'; +import { Fragment, useEffect, useState } from '@wordpress/element'; +import { useViewportMatch } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; + +import { StepLoader } from '../../Loaders'; +import { store as nfdOnboardingStore } from '../../../store'; +import { + expedite, + getThemeStatus, + install as installTheme, +} from '../../../utils/api/themes'; +import { + THEME_STATUS_INIT, + THEME_STATUS_INSTALLING, + THEME_STATUS_NOT_ACTIVE, + THEME_STATUS_ACTIVE, + DESIGN_STEPS_THEME, + THEME_STATUS_FAILURE, +} from '../../../../constants'; +import { StepErrorState } from '../../ErrorState'; +import getContents from './contents'; +import ExitToWordPress from '../../ExitToWordPress'; + +const SitegenAiStateHandler = ( { children } ) => { + const [ isError, setisError ] = useState( false ); + + const handleRender = () => { + if ( isError ) { + return ; + } + + return children; + }; + return { handleRender() }; +}; + +export default SitegenAiStateHandler; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js b/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js index d9f1c6f74..28ab542bd 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js @@ -8,10 +8,12 @@ const getContents = () => { '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 exit directly to WordPress', + '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' ), }; }; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/index.js b/src/OnboardingSPA/steps/SiteGen/SiteError/index.js index d935f8d7e..b61c8e0c9 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteError/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/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 { Button } from '@wordpress/components'; const SiteGenSiteError = () => { const { @@ -30,6 +31,7 @@ const SiteGenSiteError = () => { setIsHeaderNavigationEnabled( true ); setDrawerActiveView( false ); } ); + const isLargeViewport = useViewportMatch( 'small' ); const content = getContents(); return ( @@ -47,15 +49,27 @@ const SiteGenSiteError = () => {

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

- +
+ + { isLargeViewport && ( + + ) } +
); diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss index 220ba38a0..421d76d50 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss @@ -11,7 +11,7 @@ flex-direction: column; align-items: center; justify-content: center; - width: 500px; + width: 544px; @media (max-width: #{ ($break-small) }) { margin: 16px; @@ -40,35 +40,81 @@ &__text { line-height: 1; - font-weight: 510; - margin-left: 15px; - white-space: normal; - letter-spacing: 0.8px; + font-weight: 500; color: var(--nfd-onboarding-primary); - font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem); + font-size: 18px; } } &__sub-heading { - padding: 0; - width: 100%; - margin: 10px; + padding: 24px 24px 10px 24px; + // min-height: 115px; 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: clamp(0.875rem, 0.727rem + 0.5114vw, 2rem); + 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; + // line-height: 0.5 !important; + } + + &__exit { + font-size: 14px; + font-weight: 400; + color: var(--nfd-onboarding-primary); margin: 0; - padding: 0; - text-align: left; + 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); - font-size: clamp(0.0625rem, 0.727rem + 0.5114vw, 2rem); + } + + @media (max-width: #{ ($break-small) }) { + margin-right: 0; + } + } + + @media (max-width: #{ ($break-small) }) { + justify-content: center; + margin-bottom: 50px; + margin-right: 0; } } From 40606a3739987e303b8567519d3621aae39ce867 Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Wed, 31 Jan 2024 20:59:38 +0530 Subject: [PATCH 03/14] added error handling for preview step --- .../StateHandlers/SitegenAi/index.js | 4 +- .../steps/SiteGen/Preview/index.js | 50 +++++++++++-------- .../steps/SiteGen/SiteError/index.js | 18 +++---- 3 files changed, 38 insertions(+), 34 deletions(-) diff --git a/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js index 2e5d515eb..3fee1f2c7 100644 --- a/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js +++ b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js @@ -22,8 +22,8 @@ import { StepErrorState } from '../../ErrorState'; import getContents from './contents'; import ExitToWordPress from '../../ExitToWordPress'; -const SitegenAiStateHandler = ( { children } ) => { - const [ isError, setisError ] = useState( false ); +const SitegenAiStateHandler = ( { children, isError = false } ) => { + const handleRender = () => { if ( isError ) { diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index ad8aac174..2f60933ee 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'; @@ -21,6 +22,7 @@ const SiteGenPreview = () => { const [ isRegenerating, setIsRegenerating ] = useState( false ); const [ isPreviewLoading, setIsPreviewLoading ] = useState( false ); const [ globalStyles, setGlobalStyles ] = useState( false ); + const [ isError, setisError ] = useState( false ); const { setIsHeaderEnabled, @@ -67,6 +69,8 @@ const SiteGenPreview = () => { if ( response.error ) { setIsPreviewLoading( false ); + console.log( 'aila' ); + setisError( ! isError ); return; } @@ -203,30 +207,32 @@ 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/SiteError/index.js b/src/OnboardingSPA/steps/SiteGen/SiteError/index.js index b61c8e0c9..9fe98bc65 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteError/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteError/index.js @@ -1,17 +1,13 @@ import { useViewportMatch } from '@wordpress/compose'; -import { useEffect, useState } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; - +import { useEffect } from '@wordpress/element'; +import { useDispatch } from '@wordpress/data'; import getContents from './contents'; -import { HEADER_SITEGEN } from '../../../../constants'; +import { HEADER_SITEGEN, pluginDashboardPage } from '../../../../constants'; import SkipButton from '../../../components/SkipButton'; import { store as nfdOnboardingStore } from '../../../store'; -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 { Button } from '@wordpress/components'; +import OrbAnimation from '../../../components/OrbAnimation'; const SiteGenSiteError = () => { const { @@ -37,7 +33,9 @@ const SiteGenSiteError = () => { return (
-
+
+ +

{ content.heading } @@ -51,7 +49,7 @@ const SiteGenSiteError = () => { { content.message } + href={ pluginDashboardPage }> { content.buttonExit } From ab7fc3edc9286ce3d5da5c9030d122219c4098d7 Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Thu, 1 Feb 2024 20:29:05 +0530 Subject: [PATCH 04/14] updated checks --- src/OnboardingSPA/chapters/sitegen.js | 2 - .../NewfoldInterfaceSkeleton/SiteGen/index.js | 7 +- .../SiteGenError}/contents.js | 0 .../components/SiteGenError/index.js | 149 ++++++++++++++++++ .../SiteGenError}/stylesheet.scss | 16 +- .../StateHandlers/SitegenAi/index.js | 41 ++--- .../steps/SiteGen/Building/index.js | 33 ++-- .../steps/SiteGen/Experience/index.js | 26 +-- .../steps/SiteGen/Preview/index.js | 7 +- .../steps/SiteGen/SiteError/index.js | 76 --------- .../steps/SiteGen/SiteError/step.js | 18 --- src/OnboardingSPA/store/actions.js | 7 + src/OnboardingSPA/store/reducer.js | 11 ++ src/OnboardingSPA/store/selectors.js | 4 + src/OnboardingSPA/styles/app.scss | 2 +- 15 files changed, 240 insertions(+), 159 deletions(-) rename src/OnboardingSPA/{steps/SiteGen/SiteError => components/SiteGenError}/contents.js (100%) create mode 100644 src/OnboardingSPA/components/SiteGenError/index.js rename src/OnboardingSPA/{steps/SiteGen/SiteError => components/SiteGenError}/stylesheet.scss (86%) delete mode 100644 src/OnboardingSPA/steps/SiteGen/SiteError/index.js delete mode 100644 src/OnboardingSPA/steps/SiteGen/SiteError/step.js diff --git a/src/OnboardingSPA/chapters/sitegen.js b/src/OnboardingSPA/chapters/sitegen.js index 2ab314b80..faaf53ad6 100644 --- a/src/OnboardingSPA/chapters/sitegen.js +++ b/src/OnboardingSPA/chapters/sitegen.js @@ -4,7 +4,6 @@ import { __ } from '@wordpress/i18n'; import { stepSiteGenWelcome } from '../steps/SiteGen/Welcome/step'; import { stepSiteGenSiteDetails } from '../steps/SiteGen/SiteDetails/step'; import { stepSiteGenSiteLogo } from '../steps/SiteGen/SiteLogo/step'; -import { stepSiteGenSiteError} from '../steps/SiteGen/SiteError/step'; import { stepSiteGenSocialMedia } from '../steps/SiteGen/SocialMedia/step'; import { stepSiteGenExperience } from '../steps/SiteGen/Experience/step'; import { stepSiteGenBuilding } from '../steps/SiteGen/Building/step'; @@ -15,7 +14,6 @@ const steps = [ stepSiteGenWelcome, stepSiteGenSiteDetails, stepSiteGenSocialMedia, - stepSiteGenSiteError, stepSiteGenSiteLogo, stepSiteGenExperience, stepSiteGenBuilding, diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 8b0b3f8c1..3cddc60ad 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -53,7 +53,7 @@ const SiteGen = () => { } ); - const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + const { setCurrentOnboardingData, updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore ); async function syncStoreToDB() { if ( currentData ) { @@ -69,6 +69,7 @@ const SiteGen = () => { retryCount = 1 ) { return new Promise( () => + generateSiteGenMeta( siteInfo, identifier, skipCache ) .then( ( data ) => { if ( data.body !== null ) { @@ -82,10 +83,14 @@ const SiteGen = () => { retryCount + 1 ); } + if ( retryCount === MAX_RETRIES_SITE_GEN ) { + updateSiteGenErrorStatus( true ); + } } ) .catch( ( err ) => { /* eslint-disable no-console */ console.log( err ); + updateSiteGenErrorStatus( true ); } ) ); } diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/contents.js b/src/OnboardingSPA/components/SiteGenError/contents.js similarity index 100% rename from src/OnboardingSPA/steps/SiteGen/SiteError/contents.js rename to src/OnboardingSPA/components/SiteGenError/contents.js diff --git a/src/OnboardingSPA/components/SiteGenError/index.js b/src/OnboardingSPA/components/SiteGenError/index.js new file mode 100644 index 000000000..e7fb71a76 --- /dev/null +++ b/src/OnboardingSPA/components/SiteGenError/index.js @@ -0,0 +1,149 @@ +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 ); + window.location.reload(); + }; + return ( + +

+
+ +
+
+

+ { content.heading } +

+
+
+

+ { content.subHeading } +

+

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

+
+
+ + { isLargeViewport ? ( + + ) : ( + + + + ) } +
+
+ + ); +}; + +export default SiteGenSiteError; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss similarity index 86% rename from src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss rename to src/OnboardingSPA/components/SiteGenError/stylesheet.scss index 421d76d50..7541edf46 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteError/stylesheet.scss +++ b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss @@ -108,7 +108,21 @@ @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) }) { diff --git a/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js index 3fee1f2c7..6b12ef4d5 100644 --- a/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js +++ b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js @@ -1,37 +1,18 @@ -import { useSelect, useDispatch } from '@wordpress/data'; -import { Fragment, useEffect, useState } from '@wordpress/element'; -import { useViewportMatch } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; - -import { StepLoader } from '../../Loaders'; +import { Fragment } from '@wordpress/element'; +import SiteGenSiteError from '../../SiteGenError'; +import { useSelect } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; -import { - expedite, - getThemeStatus, - install as installTheme, -} from '../../../utils/api/themes'; -import { - THEME_STATUS_INIT, - THEME_STATUS_INSTALLING, - THEME_STATUS_NOT_ACTIVE, - THEME_STATUS_ACTIVE, - DESIGN_STEPS_THEME, - THEME_STATUS_FAILURE, -} from '../../../../constants'; -import { StepErrorState } from '../../ErrorState'; -import getContents from './contents'; -import ExitToWordPress from '../../ExitToWordPress'; -const SitegenAiStateHandler = ( { children, isError = false } ) => { - +const SitegenAiStateHandler = ( { children } ) => { + const { siteGenErrorStatus } = useSelect( ( select ) => { + return { + siteGenErrorStatus: select( nfdOnboardingStore ).getSiteGenErrorStatus(), + }; + } ); const handleRender = () => { - if ( isError ) { - return ; + if ( siteGenErrorStatus ) { + return ; } return children; 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..d96c15d76 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,20 @@ const SiteGenExperience = () => { }; return ( - -
- - -
- + + +
+ + +
+ + + ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 2f60933ee..562c7da77 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -22,7 +22,6 @@ const SiteGenPreview = () => { const [ isRegenerating, setIsRegenerating ] = useState( false ); const [ isPreviewLoading, setIsPreviewLoading ] = useState( false ); const [ globalStyles, setGlobalStyles ] = useState( false ); - const [ isError, setisError ] = useState( false ); const { setIsHeaderEnabled, @@ -32,6 +31,7 @@ const SiteGenPreview = () => { setCurrentOnboardingData, updateInitialize, setHideFooterNav, + updateSiteGenErrorStatus, } = useDispatch( nfdOnboardingStore ); const { currentData, nextStep } = useSelect( ( select ) => { @@ -69,8 +69,7 @@ const SiteGenPreview = () => { if ( response.error ) { setIsPreviewLoading( false ); - console.log( 'aila' ); - setisError( ! isError ); + updateSiteGenErrorStatus( true ); return; } @@ -207,7 +206,7 @@ const SiteGenPreview = () => { const content = getContents(); return ( - +
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/index.js b/src/OnboardingSPA/steps/SiteGen/SiteError/index.js deleted file mode 100644 index 9fe98bc65..000000000 --- a/src/OnboardingSPA/steps/SiteGen/SiteError/index.js +++ /dev/null @@ -1,76 +0,0 @@ -import { useViewportMatch } from '@wordpress/compose'; -import { useEffect } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; -import getContents from './contents'; -import { HEADER_SITEGEN, pluginDashboardPage } from '../../../../constants'; -import SkipButton from '../../../components/SkipButton'; -import { store as nfdOnboardingStore } from '../../../store'; -import CommonLayout from '../../../components/Layouts/Common'; -import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen'; -import OrbAnimation from '../../../components/OrbAnimation'; - -const SiteGenSiteError = () => { - const { - setIsHeaderEnabled, - setSidebarActiveView, - setHeaderActiveView, - setDrawerActiveView, - setHideFooterNav, - setIsHeaderNavigationEnabled, - } = useDispatch( nfdOnboardingStore ); - - useEffect( () => { - setHideFooterNav( true ); - setIsHeaderEnabled( true ); - setSidebarActiveView( false ); - setHeaderActiveView( HEADER_SITEGEN ); - setIsHeaderNavigationEnabled( true ); - setDrawerActiveView( false ); - } ); - const isLargeViewport = useViewportMatch( 'small' ); - - const content = getContents(); - return ( - -
-
- -
-
-

- { content.heading } -

-
-
-

- { content.subHeading } -

-

- { content.message } - - { content.buttonExit } - - -

-
-
- - { isLargeViewport && ( - - ) } -
-
- - ); -}; - -export default SiteGenSiteError; diff --git a/src/OnboardingSPA/steps/SiteGen/SiteError/step.js b/src/OnboardingSPA/steps/SiteGen/SiteError/step.js deleted file mode 100644 index 208e5173c..000000000 --- a/src/OnboardingSPA/steps/SiteGen/SiteError/step.js +++ /dev/null @@ -1,18 +0,0 @@ -import { copy } from '@wordpress/icons'; -import { lazy } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { Step } from '../../../data/models/Step'; - -const SiteGenSiteError = lazy( () => import( './index' ) ); - -export const stepSiteGenSiteError = new Step( { - path: '/sitegen/step/site-error', - title: __( 'Page Layouts', 'wp-module-onboarding' ), - Component: SiteGenSiteError, - icon: copy, - sidebars: { - LearnMore: { - SidebarComponents: [], - }, - }, -} ); 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 b84d13245..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"; @@ -88,7 +89,6 @@ @import "../steps/SiteGen/Building/stylesheet"; @import "../steps/SiteGen/Editor/stylesheet"; @import "../steps/SiteGen/Editor/Header/stylesheet"; -@import "../steps/SiteGen/SiteError/stylesheet"; .nfd-onboarding-container { display: flex; From 89a855ba0149c793ac1eaecd94c387a2247781db Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Thu, 1 Feb 2024 20:37:33 +0530 Subject: [PATCH 05/14] Update stylesheet.scss --- src/OnboardingSPA/components/SiteGenError/stylesheet.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/components/SiteGenError/stylesheet.scss b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss index 7541edf46..623fb2f06 100644 --- a/src/OnboardingSPA/components/SiteGenError/stylesheet.scss +++ b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss @@ -50,7 +50,7 @@ padding: 24px 24px 10px 24px; // min-height: 115px; margin-bottom: 50px; - border: solid #E01C1C 1px; + border: solid #e01c1c 1px; border-radius: 8px; margin-top: 20px; @@ -70,7 +70,7 @@ color: var(--nfd-onboarding-primary); font-size: 14px; font-weight: 400; - // line-height: 0.5 !important; + // line-height: 0.5 !important; } &__exit { @@ -108,7 +108,7 @@ @media (max-width: #{ ($break-small) }) { margin-right: 0; - } + } } &__retry { @@ -131,7 +131,7 @@ margin-right: 0; } } - + } &--button { From ad705a1a42ef087a6bb3558c64317f5effb50570 Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Mon, 5 Feb 2024 17:41:17 +0530 Subject: [PATCH 06/14] Update stylesheet.scss --- src/OnboardingSPA/components/SiteGenError/stylesheet.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/OnboardingSPA/components/SiteGenError/stylesheet.scss b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss index 623fb2f06..4bb6e58c3 100644 --- a/src/OnboardingSPA/components/SiteGenError/stylesheet.scss +++ b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss @@ -70,7 +70,6 @@ color: var(--nfd-onboarding-primary); font-size: 14px; font-weight: 400; - // line-height: 0.5 !important; } &__exit { From 8c409774f73ba20184d4e0c4cbff81370604a93c Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Mon, 5 Feb 2024 19:06:56 +0530 Subject: [PATCH 07/14] reload issue --- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 15 ++++++++++----- .../components/SiteGenError/contents.js | 5 ++++- .../components/SiteGenError/index.js | 15 +++++++++------ 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 3cddc60ad..f1972ddcc 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -21,6 +21,7 @@ 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 SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( @@ -41,7 +42,7 @@ const SiteGen = () => { }, [ newfoldBrand ] ); const location = useLocation(); - const { currentData, initialize, pluginInstallHash } = useSelect( + const { currentData, initialize, pluginInstallHash, siteGenErrorStatus } = useSelect( ( select ) => { return { currentData: @@ -49,11 +50,13 @@ const SiteGen = () => { initialize: select( nfdOnboardingStore ).getInitialize(), pluginInstallHash: select( nfdOnboardingStore ).getPluginInstallHash(), + siteGenErrorStatus: select( nfdOnboardingStore ).getSiteGenErrorStatus(), }; } ); - const { setCurrentOnboardingData, updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore ); + const { setCurrentOnboardingData, updateSiteGenErrorStatus } = + useDispatch( nfdOnboardingStore ); async function syncStoreToDB() { if ( currentData ) { @@ -69,7 +72,6 @@ const SiteGen = () => { retryCount = 1 ) { return new Promise( () => - generateSiteGenMeta( siteInfo, identifier, skipCache ) .then( ( data ) => { if ( data.body !== null ) { @@ -85,6 +87,7 @@ const SiteGen = () => { } if ( retryCount === MAX_RETRIES_SITE_GEN ) { updateSiteGenErrorStatus( true ); + retryCount = 0; } } ) .catch( ( err ) => { @@ -157,7 +160,7 @@ const SiteGen = () => { syncStoreToDB(); generateSiteGenData(); handlePreviousStepTracking(); - }, [ location.pathname ] ); + }, [ location.pathname, siteGenErrorStatus ] ); useEffect( () => { initializeThemes(); @@ -176,7 +179,9 @@ const SiteGen = () => { content={ } sidebar={ } footer={
} - /> + > + + ); }; diff --git a/src/OnboardingSPA/components/SiteGenError/contents.js b/src/OnboardingSPA/components/SiteGenError/contents.js index 28ab542bd..4581201b1 100644 --- a/src/OnboardingSPA/components/SiteGenError/contents.js +++ b/src/OnboardingSPA/components/SiteGenError/contents.js @@ -2,7 +2,10 @@ import { __ } from '@wordpress/i18n'; const getContents = () => { return { - heading: __( 'Sorry, we\'re having trouble communicating with our AI service.', 'wp-module-onboarding' ), + heading: __( + "Sorry, we're having trouble communicating with our AI service.", + 'wp-module-onboarding' + ), subHeading: __( 'Do you keep getting this error?', 'wp-module-onboarding' diff --git a/src/OnboardingSPA/components/SiteGenError/index.js b/src/OnboardingSPA/components/SiteGenError/index.js index e7fb71a76..7202ba969 100644 --- a/src/OnboardingSPA/components/SiteGenError/index.js +++ b/src/OnboardingSPA/components/SiteGenError/index.js @@ -81,9 +81,8 @@ const SiteGenSiteError = () => { } navigate( data.steps[ 1 ].path ); }; - const handleRetry = ( ) => { + const handleRetry = () => { updateSiteGenErrorStatus( false ); - window.location.reload(); }; return ( @@ -104,10 +103,10 @@ const SiteGenSiteError = () => { { content.message } + href={ pluginDashboardPage } + > { content.buttonExit } -

@@ -126,7 +125,9 @@ const SiteGenSiteError = () => { handleRetry(); } } > -

{ content.buttonText }

+

+ { content.buttonText } +

) : ( @@ -136,7 +137,9 @@ const SiteGenSiteError = () => { handleRetry(); } } > -

{ content.buttonText }

+

+ { content.buttonText } +

) } From 8257ba60c1a7d62868fa13bce0a86dd0956b17cd Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Tue, 6 Feb 2024 12:13:07 +0530 Subject: [PATCH 08/14] fixed reload issues --- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 73 ++++++++++--------- src/OnboardingSPA/utils/api/siteGen.js | 22 +++--- 2 files changed, 48 insertions(+), 47 deletions(-) diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index f1972ddcc..36a9d28cf 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -1,4 +1,4 @@ -import { useEffect } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -42,18 +42,18 @@ const SiteGen = () => { }, [ newfoldBrand ] ); const location = useLocation(); - const { currentData, initialize, pluginInstallHash, siteGenErrorStatus } = 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(), + siteGenErrorStatus: + select( nfdOnboardingStore ).getSiteGenErrorStatus(), }; - } - ); + } ); const { setCurrentOnboardingData, updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore ); @@ -71,31 +71,29 @@ const SiteGen = () => { skipCache, retryCount = 1 ) { - return new Promise( () => - generateSiteGenMeta( siteInfo, identifier, skipCache ) - .then( ( data ) => { - if ( data.body !== null ) { - currentData.sitegen.siteGenMetaStatus.currentStatus += 1; - setCurrentOnboardingData( currentData ); - } else if ( retryCount < MAX_RETRIES_SITE_GEN ) { - performSiteGenMetaGeneration( - siteInfo, - identifier, - skipCache, - retryCount + 1 - ); - } - if ( retryCount === MAX_RETRIES_SITE_GEN ) { - updateSiteGenErrorStatus( true ); - retryCount = 0; - } - } ) - .catch( ( err ) => { - /* eslint-disable no-console */ - console.log( err ); - updateSiteGenErrorStatus( true ); - } ) - ); + try { + if ( ! siteGenErrorStatus ) { + const data = await generateSiteGenMeta( + siteInfo, + identifier, + skipCache + ); + if ( data.body !== null ) { + currentData.sitegen.siteGenMetaStatus.currentStatus += 1; + setCurrentOnboardingData( currentData ); + } else if ( retryCount < MAX_RETRIES_SITE_GEN ) { + performSiteGenMetaGeneration( + siteInfo, + identifier, + skipCache, + retryCount + 1 + ); + } + } + } catch ( err ) { + currentData.sitegen.siteGenErrorStatus = true; + updateSiteGenErrorStatus( true ); + } } async function generateSiteGenData() { @@ -108,7 +106,6 @@ const SiteGen = () => { ) { return; } - let identifiers = await getSiteGenIdentifiers(); identifiers = identifiers.body; @@ -160,7 +157,13 @@ const SiteGen = () => { syncStoreToDB(); generateSiteGenData(); handlePreviousStepTracking(); - }, [ location.pathname, siteGenErrorStatus ] ); + }, [ location.pathname ] ); + + useEffect( () => { + if (! siteGenErrorStatus ) { + generateSiteGenData(); + } + }, [ siteGenErrorStatus ] ); useEffect( () => { initializeThemes(); @@ -179,9 +182,7 @@ const SiteGen = () => { content={ } sidebar={ } footer={
} - > - - + > ); }; 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 ) { From 32e08f2ff0fd51eee6fa265de0ca2f1dfc2deefe Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Tue, 6 Feb 2024 12:24:10 +0530 Subject: [PATCH 09/14] Lint issues --- .../components/NewfoldInterfaceSkeleton/SiteGen/index.js | 7 +++---- .../components/StateHandlers/SitegenAi/index.js | 3 ++- src/OnboardingSPA/steps/SiteGen/Experience/index.js | 1 - src/OnboardingSPA/steps/SiteGen/Preview/index.js | 5 ++++- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 36a9d28cf..98cfcd3a4 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -21,7 +21,6 @@ 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 SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( @@ -160,7 +159,7 @@ const SiteGen = () => { }, [ location.pathname ] ); useEffect( () => { - if (! siteGenErrorStatus ) { + if ( ! siteGenErrorStatus ) { generateSiteGenData(); } }, [ siteGenErrorStatus ] ); @@ -182,7 +181,7 @@ const SiteGen = () => { content={ } sidebar={ } footer={
} - > + /> ); }; diff --git a/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js index 6b12ef4d5..395ad21fd 100644 --- a/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js +++ b/src/OnboardingSPA/components/StateHandlers/SitegenAi/index.js @@ -6,7 +6,8 @@ import { store as nfdOnboardingStore } from '../../../store'; const SitegenAiStateHandler = ( { children } ) => { const { siteGenErrorStatus } = useSelect( ( select ) => { return { - siteGenErrorStatus: select( nfdOnboardingStore ).getSiteGenErrorStatus(), + siteGenErrorStatus: + select( nfdOnboardingStore ).getSiteGenErrorStatus(), }; } ); diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js index d96c15d76..0e340ee47 100644 --- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js @@ -72,7 +72,6 @@ const SiteGenExperience = () => {
- ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 562c7da77..2b2845fc2 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -223,7 +223,10 @@ const SiteGenPreview = () => {
{ buildPreviews() } { isRegenerating && ( - + ) }
From cebb23d2727d7af445e81d349fe6341f28a5f857 Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Tue, 6 Feb 2024 13:24:54 +0530 Subject: [PATCH 10/14] Update stylesheet.scss --- src/OnboardingSPA/components/SiteGenError/stylesheet.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/OnboardingSPA/components/SiteGenError/stylesheet.scss b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss index 4bb6e58c3..7cbb89bd7 100644 --- a/src/OnboardingSPA/components/SiteGenError/stylesheet.scss +++ b/src/OnboardingSPA/components/SiteGenError/stylesheet.scss @@ -48,7 +48,6 @@ &__sub-heading { padding: 24px 24px 10px 24px; - // min-height: 115px; margin-bottom: 50px; border: solid #e01c1c 1px; border-radius: 8px; From cf53b51e2ec48a2b651606647ea0d588d0406a64 Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Tue, 6 Feb 2024 14:07:24 +0530 Subject: [PATCH 11/14] updated code for retry --- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 2ac8c9b3e..309e978d8 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -85,17 +85,19 @@ const SiteGen = () => { currentData.sitegen.skipCache = false; } setCurrentOnboardingData( currentData ); - } else if ( retryCount < MAX_RETRIES_SITE_GEN ) { + } + } catch ( err ) { + if ( retryCount < MAX_RETRIES_SITE_GEN ) { performSiteGenMetaGeneration( siteInfo, identifier, skipCache, retryCount + 1 ); + } else { + currentData.sitegen.siteGenErrorStatus = true; + updateSiteGenErrorStatus( true ); } - } catch ( err ) { - currentData.sitegen.siteGenErrorStatus = true; - updateSiteGenErrorStatus( true ); } } From e89a2ca42fd350f266918eaea984928d012b084e Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Wed, 7 Feb 2024 14:21:12 +0530 Subject: [PATCH 12/14] error page for all steps --- .../components/ImageUploaderWithText/index.js | 6 +- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 7 +- .../steps/SiteGen/SiteDetails/index.js | 59 ++++++++------- .../steps/SiteGen/SiteLogo/index.js | 55 +++++++------- .../steps/SiteGen/SocialMedia/index.js | 73 +++++++++++-------- .../steps/SiteGen/Welcome/index.js | 51 +++++++------ src/OnboardingSPA/steps/TheFork/index.js | 49 +++++++------ 7 files changed, 165 insertions(+), 135 deletions(-) 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 309e978d8..48af7251f 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -60,7 +60,11 @@ const SiteGen = () => { 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 ) { + currentData.sitegen.siteGenErrorStatus = true; + updateSiteGenErrorStatus( true ); + } } } @@ -167,6 +171,7 @@ const SiteGen = () => { useEffect( () => { if ( ! siteGenErrorStatus ) { generateSiteGenData(); + syncStoreToDB(); } }, [ siteGenErrorStatus ] ); 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 } + + + ); }; From a15df55b9f4485944113e07d641a20a443b8505f Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Wed, 7 Feb 2024 15:02:57 +0530 Subject: [PATCH 13/14] skip error code for flow api --- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 18 +++++++++++++++--- src/constants.js | 6 ++++++ 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 48af7251f..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( @@ -62,8 +66,16 @@ const SiteGen = () => { //Set the Flow Data and sync store and DB const result = await setFlow( currentData ); if ( result?.error !== null ) { - currentData.sitegen.siteGenErrorStatus = true; - updateSiteGenErrorStatus( true ); + 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; + } } } } diff --git a/src/constants.js b/src/constants.js index 98d020239..cf1a2cd45 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'; From 5c9745ccd534edd71178aa32ae57ca5ce21523cc Mon Sep 17 00:00:00 2001 From: "lokapure.girish" Date: Wed, 7 Feb 2024 15:27:03 +0530 Subject: [PATCH 14/14] Update constants.js --- src/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants.js b/src/constants.js index cf1a2cd45..0418b18ae 100644 --- a/src/constants.js +++ b/src/constants.js @@ -113,7 +113,7 @@ export const API_REQUEST = { }; /** - * ERROR code to skip for flow api + * 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';