From 4448eb8f166e220f988f9b6364bb37f2bd9889d7 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Mon, 20 May 2024 11:54:56 +0530 Subject: [PATCH 01/10] set default --- src/OnboardingSPA/components/ThemeContextProvider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js index bf563887d..d668b2e93 100644 --- a/src/OnboardingSPA/components/ThemeContextProvider/index.js +++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js @@ -4,7 +4,7 @@ import { THEME_DARK, THEME_LIGHT } from '../../../constants'; const ThemeContext = createContext(); const ThemeProvider = ( { children } ) => { - const [ theme, setTheme ] = useState( 'dark' ); + const [ theme, setTheme ] = useState( THEME_LIGHT ); const toggleTheme = () => { setTheme( ( prevTheme ) => From 2511d4f413a13a1870f8236ba55c90b90e414894 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Mon, 20 May 2024 12:01:36 +0530 Subject: [PATCH 02/10] added useEffect --- .../components/ThemeContextProvider/index.js | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js index d668b2e93..2f78acca0 100644 --- a/src/OnboardingSPA/components/ThemeContextProvider/index.js +++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js @@ -1,10 +1,34 @@ -import { useState, createContext } from '@wordpress/element'; +import { useState, useEffect, createContext } from '@wordpress/element'; import { THEME_DARK, THEME_LIGHT } from '../../../constants'; const ThemeContext = createContext(); +function getPreferredColorScheme() { + if ( + window.matchMedia && + window.matchMedia( '(prefers-color-scheme: dark)' ).matches + ) { + return THEME_DARK; + } + return THEME_LIGHT; +} + const ThemeProvider = ( { children } ) => { - const [ theme, setTheme ] = useState( THEME_LIGHT ); + const [ theme, setTheme ] = useState( getPreferredColorScheme ); + + useEffect( () => { + const mediaQuery = window.matchMedia( '(prefers-color-scheme: dark)' ); + + const handleChange = ( event ) => { + setTheme( event.matches ? THEME_DARK : THEME_LIGHT ); + }; + + mediaQuery.addEventListener( 'change', handleChange ); + + return () => { + mediaQuery.removeEventListener( 'change', handleChange ); + }; + }, [] ); const toggleTheme = () => { setTheme( ( prevTheme ) => From 13326cbd088d3030c138abecbc2ec879e92ef51d Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Mon, 20 May 2024 17:26:14 +0530 Subject: [PATCH 03/10] rename media query --- .../components/ThemeContextProvider/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js index 2f78acca0..1cee5a7db 100644 --- a/src/OnboardingSPA/components/ThemeContextProvider/index.js +++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js @@ -17,16 +17,19 @@ const ThemeProvider = ( { children } ) => { const [ theme, setTheme ] = useState( getPreferredColorScheme ); useEffect( () => { - const mediaQuery = window.matchMedia( '(prefers-color-scheme: dark)' ); + const colorSchemeMediaQuery = window.matchMedia( + '(prefers-color-scheme: dark)' + ); const handleChange = ( event ) => { + console.log( 'Color matches', event ); setTheme( event.matches ? THEME_DARK : THEME_LIGHT ); }; - mediaQuery.addEventListener( 'change', handleChange ); + colorSchemeMediaQuery.addEventListener( 'change', handleChange ); return () => { - mediaQuery.removeEventListener( 'change', handleChange ); + colorSchemeMediaQuery.removeEventListener( 'change', handleChange ); }; }, [] ); From 9871db243b99d9e6e0834701a9099ae0e8a73918 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Mon, 20 May 2024 17:30:29 +0530 Subject: [PATCH 04/10] removed console statement --- src/OnboardingSPA/components/ThemeContextProvider/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js index 1cee5a7db..f03d9eb85 100644 --- a/src/OnboardingSPA/components/ThemeContextProvider/index.js +++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js @@ -22,7 +22,6 @@ const ThemeProvider = ( { children } ) => { ); const handleChange = ( event ) => { - console.log( 'Color matches', event ); setTheme( event.matches ? THEME_DARK : THEME_LIGHT ); }; From 22d47d27f2548adf93c91ac2d46f69adeab3d201 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 22 May 2024 01:03:25 +0530 Subject: [PATCH 05/10] updated tests --- .../wp-module-support/siteGen.cy.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/tests/cypress/integration/wp-module-support/siteGen.cy.js b/tests/cypress/integration/wp-module-support/siteGen.cy.js index 5c2c1a8e5..093dd01fc 100644 --- a/tests/cypress/integration/wp-module-support/siteGen.cy.js +++ b/tests/cypress/integration/wp-module-support/siteGen.cy.js @@ -6,7 +6,7 @@ export const AdminBarCheck = () => { ); }; -export const DarkBGCheck = () => { +/* export const DarkBGCheck = () => { cy.wait( 2000 ); // When the page loads, it should have dark background by default cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' ); @@ -23,6 +23,25 @@ export const LightBGCheck = () => { .click(); cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' ); }; + */ + +export const LightBGCheck = () => { + cy.wait( 2000 ); + // When the page loads, it should have light background by default + cy.get( '.nfd-onboarding-sitegen-light' ).should( 'be.visible' ); +}; + +export const DarkBGCheck = () => { + cy.get( '.nfd-onboarding-toggle__theme__button__light' ) + .should( 'exist' ) + .click(); + cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' ); + // Now changing the background back to light + cy.get( '.nfd-onboarding-toggle__theme__button__dark' ) + .should( 'exist' ) + .click(); + cy.get( '.nfd-onboarding-sitegen-light' ).should( 'be.visible' ); +}; export const ProgressBarCheck = ( WidthPercent ) => { cy.get( '.nfd-onboarding-header__progress-bar' ).should( 'be.visible' ); From 50df3ca7140da6f29910d5db734f3a4f8158214e Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 22 May 2024 11:36:28 +0530 Subject: [PATCH 06/10] updated the tests --- .../wp-module-support/siteGen.cy.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/tests/cypress/integration/wp-module-support/siteGen.cy.js b/tests/cypress/integration/wp-module-support/siteGen.cy.js index 093dd01fc..4312e9fcb 100644 --- a/tests/cypress/integration/wp-module-support/siteGen.cy.js +++ b/tests/cypress/integration/wp-module-support/siteGen.cy.js @@ -6,25 +6,6 @@ export const AdminBarCheck = () => { ); }; -/* export const DarkBGCheck = () => { - cy.wait( 2000 ); - // When the page loads, it should have dark background by default - cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' ); -}; - -export const LightBGCheck = () => { - cy.get( '.nfd-onboarding-toggle__theme__button__dark' ) - .should( 'exist' ) - .click(); - cy.get( '.nfd-onboarding-sitegen-light' ).should( 'be.visible' ); - // Now changing the background back to dark - cy.get( '.nfd-onboarding-toggle__theme__button__light' ) - .should( 'exist' ) - .click(); - cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' ); -}; - */ - export const LightBGCheck = () => { cy.wait( 2000 ); // When the page loads, it should have light background by default From 04ce4b0402ef535a9facc09ab43ba36f5c891ce6 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 22 May 2024 12:42:39 +0530 Subject: [PATCH 07/10] updated cypress text check for test --- .../integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js index e1ca3335d..13783ea60 100644 --- a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js +++ b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js @@ -73,7 +73,7 @@ describe( 'SiteGen Fork Step', function () { cy.get( '.nfd-onboarding-step--site-gen__fork__importsite' ) .scrollIntoView() .should( 'exist' ) - .should( 'contain', 'Already have a WordPress site' ); + .should( 'contain', 'Already have a WordPress site you want to import?' ); } ); it( 'Verify by default import your WP account leads to transfer site link' , () => { From 4169288b821cd871ebf55a1521a7ddce84553223 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 22 May 2024 14:49:01 +0530 Subject: [PATCH 08/10] Revert "Merge branch 'trunk' into PRESS0-1328-default-to-light-mode" This reverts commit 5f152507e3b0f55afc81651209f750d11bacf69f, reversing changes made to 50df3ca7140da6f29910d5db734f3a4f8158214e. --- .../components/ErrorState/Step/SiteGen/index.js | 13 ++----------- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 9 --------- src/OnboardingSPA/store/reducer.js | 15 +-------------- src/OnboardingSPA/store/selectors.js | 2 +- 4 files changed, 4 insertions(+), 35 deletions(-) diff --git a/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js b/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js index ef56822cd..8076c124a 100644 --- a/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js +++ b/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js @@ -1,6 +1,6 @@ // WordPress import { useViewportMatch } from '@wordpress/compose'; -import { useState, useEffect } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button, Fill } from '@wordpress/components'; @@ -27,12 +27,10 @@ import { HEADER_SITEGEN, pluginDashboardPage, } from '../../../../../constants'; -import { setFlow } from '../../../../utils/api/flow'; const SiteGenStepErrorState = () => { const navigate = useNavigate(); const isLargeViewport = useViewportMatch( 'small' ); - const [ disableRetry, setDisableRetry ] = useState( false ); const { setIsHeaderEnabled, @@ -57,10 +55,6 @@ const SiteGenStepErrorState = () => { setIsHeaderNavigationEnabled( true ); setDrawerActiveView( false ); setSidebarActiveView( false ); - setDisableRetry( - currentData.sitegen?.siteGenErrorMeta?.retryCount > - currentData.sitegen?.siteGenErrorMeta?.maxRetryCount - ); }, [] ); const { brandConfig, currentData, currentStep, previousStep, allSteps } = @@ -106,9 +100,8 @@ const SiteGenStepErrorState = () => { navigate( data.steps[ 1 ].path ); }; - const handleRetry = async () => { + const handleRetry = () => { updateSiteGenErrorStatus( false ); - await setFlow( currentData ); }; const handleGoBack = () => { @@ -193,7 +186,6 @@ const SiteGenStepErrorState = () => { onClick={ () => { handleRetry(); } } - disabled={ true === disableRetry } >

{ content.buttonText } @@ -208,7 +200,6 @@ const SiteGenStepErrorState = () => { onClick={ () => { handleRetry(); } } - disabled={ true === disableRetry } >

{ content.buttonText } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 420290866..e1b0f14c6 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -261,15 +261,6 @@ const SiteGen = () => { return; } - // If retries are exhausted don't make requests - if ( - currentData.sitegen?.siteGenErrorMeta?.retryCount >= - currentData.sitegen?.siteGenErrorMeta?.maxRetryCount - ) { - updateSiteGenErrorStatus( true ); - return; - } - setIsGeneratingSiteMeta( true ); if ( ! window.nfdOnboarding?.siteGenTimerInterval ) { diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index 4cc0ddefb..f4c36a80a 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -181,26 +181,13 @@ export function data( state = {}, action ) { }; case 'SET_SITEGEN_AI_ERROR_STATUS': - // Only update if the prev value was false and now there is an error else don't - const shouldUpdateRetryCount = - ! state.flowData.sitegen.siteGenErrorMeta.status && - action.siteGenErrorStatus; return { ...state, flowData: { ...state.flowData, sitegen: { ...state.flowData.sitegen, - siteGenErrorMeta: { - ...state.flowData.sitegen.siteGenErrorMeta, - status: action.siteGenErrorStatus, - retryCount: - shouldUpdateRetryCount === true - ? state.flowData.sitegen.siteGenErrorMeta - .retryCount + 1 - : state.flowData.sitegen.siteGenErrorMeta - .retryCount, - }, + siteGenErrorStatus: action.siteGenErrorStatus, }, }, }; diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index ad8751886..7bc818005 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -451,7 +451,7 @@ export function getCustomizeSidebarData( state ) { } export function getSiteGenErrorStatus( state ) { - return state.data.flowData.sitegen.siteGenErrorMeta.status; + return state.data.flowData.sitegen.siteGenErrorStatus; } export function getInteractionDisabled( state ) { From de8f978af065d0e7920459c24e7ee4dbc833045f Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 22 May 2024 14:49:19 +0530 Subject: [PATCH 09/10] Revert "updated cypress text check for test" This reverts commit 04ce4b0402ef535a9facc09ab43ba36f5c891ce6. --- .../integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js index 13783ea60..e1ca3335d 100644 --- a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js +++ b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/1-fork.cy.js @@ -73,7 +73,7 @@ describe( 'SiteGen Fork Step', function () { cy.get( '.nfd-onboarding-step--site-gen__fork__importsite' ) .scrollIntoView() .should( 'exist' ) - .should( 'contain', 'Already have a WordPress site you want to import?' ); + .should( 'contain', 'Already have a WordPress site' ); } ); it( 'Verify by default import your WP account leads to transfer site link' , () => { From 4c48caf6548f7ed53a376cae0562a04885f0ce87 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Wed, 22 May 2024 18:50:13 +0530 Subject: [PATCH 10/10] Reapply "Merge branch 'trunk' into PRESS0-1328-default-to-light-mode" This reverts commit 4169288b821cd871ebf55a1521a7ddce84553223. --- .../components/ErrorState/Step/SiteGen/index.js | 13 +++++++++++-- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 9 +++++++++ src/OnboardingSPA/store/reducer.js | 15 ++++++++++++++- src/OnboardingSPA/store/selectors.js | 2 +- 4 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js b/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js index 8076c124a..ef56822cd 100644 --- a/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js +++ b/src/OnboardingSPA/components/ErrorState/Step/SiteGen/index.js @@ -1,6 +1,6 @@ // WordPress import { useViewportMatch } from '@wordpress/compose'; -import { useEffect } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button, Fill } from '@wordpress/components'; @@ -27,10 +27,12 @@ import { HEADER_SITEGEN, pluginDashboardPage, } from '../../../../../constants'; +import { setFlow } from '../../../../utils/api/flow'; const SiteGenStepErrorState = () => { const navigate = useNavigate(); const isLargeViewport = useViewportMatch( 'small' ); + const [ disableRetry, setDisableRetry ] = useState( false ); const { setIsHeaderEnabled, @@ -55,6 +57,10 @@ const SiteGenStepErrorState = () => { setIsHeaderNavigationEnabled( true ); setDrawerActiveView( false ); setSidebarActiveView( false ); + setDisableRetry( + currentData.sitegen?.siteGenErrorMeta?.retryCount > + currentData.sitegen?.siteGenErrorMeta?.maxRetryCount + ); }, [] ); const { brandConfig, currentData, currentStep, previousStep, allSteps } = @@ -100,8 +106,9 @@ const SiteGenStepErrorState = () => { navigate( data.steps[ 1 ].path ); }; - const handleRetry = () => { + const handleRetry = async () => { updateSiteGenErrorStatus( false ); + await setFlow( currentData ); }; const handleGoBack = () => { @@ -186,6 +193,7 @@ const SiteGenStepErrorState = () => { onClick={ () => { handleRetry(); } } + disabled={ true === disableRetry } >

{ content.buttonText } @@ -200,6 +208,7 @@ const SiteGenStepErrorState = () => { onClick={ () => { handleRetry(); } } + disabled={ true === disableRetry } >

{ content.buttonText } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index e1b0f14c6..420290866 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -261,6 +261,15 @@ const SiteGen = () => { return; } + // If retries are exhausted don't make requests + if ( + currentData.sitegen?.siteGenErrorMeta?.retryCount >= + currentData.sitegen?.siteGenErrorMeta?.maxRetryCount + ) { + updateSiteGenErrorStatus( true ); + return; + } + setIsGeneratingSiteMeta( true ); if ( ! window.nfdOnboarding?.siteGenTimerInterval ) { diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index f4c36a80a..4cc0ddefb 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -181,13 +181,26 @@ export function data( state = {}, action ) { }; case 'SET_SITEGEN_AI_ERROR_STATUS': + // Only update if the prev value was false and now there is an error else don't + const shouldUpdateRetryCount = + ! state.flowData.sitegen.siteGenErrorMeta.status && + action.siteGenErrorStatus; return { ...state, flowData: { ...state.flowData, sitegen: { ...state.flowData.sitegen, - siteGenErrorStatus: action.siteGenErrorStatus, + siteGenErrorMeta: { + ...state.flowData.sitegen.siteGenErrorMeta, + status: action.siteGenErrorStatus, + retryCount: + shouldUpdateRetryCount === true + ? state.flowData.sitegen.siteGenErrorMeta + .retryCount + 1 + : state.flowData.sitegen.siteGenErrorMeta + .retryCount, + }, }, }, }; diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 7bc818005..ad8751886 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -451,7 +451,7 @@ export function getCustomizeSidebarData( state ) { } export function getSiteGenErrorStatus( state ) { - return state.data.flowData.sitegen.siteGenErrorStatus; + return state.data.flowData.sitegen.siteGenErrorMeta.status; } export function getInteractionDisabled( state ) {