diff --git a/includes/Services/PluginService.php b/includes/Services/PluginService.php index a49a4f82b..34549cdaf 100644 --- a/includes/Services/PluginService.php +++ b/includes/Services/PluginService.php @@ -164,7 +164,7 @@ public static function configure_activation_transient() { 'option_active_plugins', function ( $plugins ) { if ( '1' === get_transient( Options::get_option_name( 'filter_active_plugins' ) ) ) { - return array( container()->plugin()->basename ); + return Plugins::get_active_plugins_list(); } return $plugins; } diff --git a/includes/WP_Admin.php b/includes/WP_Admin.php index 8cb78077f..d702af322 100644 --- a/includes/WP_Admin.php +++ b/includes/WP_Admin.php @@ -6,6 +6,7 @@ use NewfoldLabs\WP\Module\Onboarding\Services\PluginService; use NewfoldLabs\WP\Module\Onboarding\Services\ThemeService; use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService; +use NewfoldLabs\WP\Module\Onboarding\Data\Services\SiteGenService; use NewfoldLabs\WP\Module\Onboarding\Data\Themes; use NewfoldLabs\WP\Module\Onboarding\Services\I18nService; @@ -32,6 +33,7 @@ public function __construct() { \add_action( 'load-dashboard_page_' . self::$slug, array( __CLASS__, 'initialize' ) ); if ( 'sitegen' === Data::current_flow() ) { \add_action( 'load-themes.php', array( __CLASS__, 'mark_sitegen_generated_themes' ) ); + SiteGenService::pre_set_filter_wonder_blocks_transients(); } } diff --git a/src/OnboardingSPA/components/AdminBar/stylesheet.scss b/src/OnboardingSPA/components/AdminBar/stylesheet.scss index 4768b72e5..09101c279 100644 --- a/src/OnboardingSPA/components/AdminBar/stylesheet.scss +++ b/src/OnboardingSPA/components/AdminBar/stylesheet.scss @@ -16,8 +16,9 @@ $light-grey : #a0a5aa; &__wplogo { color: var(--nfd-onboarding-white); - font-size: 16px; display: flex; + font-size: 16px; + font-weight: 510; align-items: center; svg { @@ -35,8 +36,9 @@ $light-grey : #a0a5aa; align-items: center; &__greeting { - color: $light-grey; + color: var(--nfd-onboarding-white); font-size: 16px; + font-weight: 510; margin-right: 5px; } diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js index 1bfbe9627..da30df9cb 100644 --- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js +++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js @@ -10,6 +10,7 @@ const NextButtonSiteGen = ( { className, callback = null, disabled = false, + showChevronRight = true, } ) => { const navigate = useNavigate(); const { nextStep } = useSelect( ( select ) => { @@ -37,10 +38,12 @@ const NextButtonSiteGen = ( { } } > { text } - + { showChevronRight && ( + + ) } ); }; diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss index 41463214d..b4d93c286 100644 --- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss @@ -5,6 +5,7 @@ display: flex; cursor: pointer; padding: 0 16px; + padding-left: 22px; text-align: center; border-radius: 8px; align-items: center; diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss index cee7bd97f..65eeab356 100644 --- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss @@ -34,7 +34,7 @@ $background-color: var(--nfd-onboarding-card-background); margin: 16px 4px; align-items: center; border-radius: 4px 4px 0 0; - padding: 16px 12px 20px 12px; + padding: 16px 12px 16px 12px; justify-content: space-between; transition: background-color 400ms ease-in-out; diff --git a/src/OnboardingSPA/components/Footer/stylesheet.scss b/src/OnboardingSPA/components/Footer/stylesheet.scss index 3a6c4dad3..ececa03a0 100644 --- a/src/OnboardingSPA/components/Footer/stylesheet.scss +++ b/src/OnboardingSPA/components/Footer/stylesheet.scss @@ -8,7 +8,7 @@ flex-direction: row; height: auto; - width: 100%; + width: 20%; border: none; &__end { @@ -30,6 +30,7 @@ } @media (max-width: #{ ($break-small) }) { + width: 100%; backdrop-filter: blur(2px); background: rgba(var(--nfd-onboarding-secondary-rgb), 0.5); border-top: 1px solid rgba(var(--nfd-onboarding-primary-rgb), 0.25); diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index f75b24f4a..91c1b9bcb 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -36,7 +36,9 @@ const SiteGenHeader = () => { const currentStepIndex = findIndex( allSteps, { path: currentStep?.path, } ); - const progress = ( currentStepIndex / allSteps.length ) * 100; + const progress = Math.abs( + ( ( currentStepIndex - 1 ) / ( allSteps.length - 1 ) ) * 100 + ); return ( <> diff --git a/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss b/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss index 5efc1b434..e503ad829 100644 --- a/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss +++ b/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss @@ -2,12 +2,12 @@ width: 100%; display: flex; - margin-bottom: 20px; + margin: 16px; align-items: center; &--icon { width: 50px; - margin: 4px; + margin-right: 4px; height: 50px; background-size: 200%; background-position: center; diff --git a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss index 1782a6ac9..3d39b7e1f 100644 --- a/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss +++ b/src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss @@ -1,7 +1,7 @@ .nfd-onboarding-image-uploader { &--with-text { - width: 40vw; + width: 36vw; margin: 16px; border: 1.25px dashed var(--nfd-onboarding-site-logo-border); @@ -15,7 +15,7 @@ align-items: stretch; } border-radius: 8px; - padding: 24px; + padding: 30px; display: flex; flex-direction: column; justify-content: center; @@ -123,17 +123,19 @@ &__reset { width: 100%; display: flex; - flex-direction: row; - justify-content: flex-end; + flex-direction: column; + justify-content: center; &__button { - font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem); - font-style: normal; + padding: 0; + width: 40px; + height: 40px; + border: none; font-weight: 510; + font-style: normal; + background-color: #ff0e9099; color: var(--nfd-onboarding-primary); - background-color: transparent; - border: none; - padding: 0; + font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem); &:hover { cursor: pointer; @@ -141,7 +143,7 @@ } &__icon { - fill: var(--nfd-onboarding-primary); + fill: rgb(255, 14, 144); } } } diff --git a/src/OnboardingSPA/components/ProgressBar/stylesheet.scss b/src/OnboardingSPA/components/ProgressBar/stylesheet.scss index bb8490289..5365e4189 100644 --- a/src/OnboardingSPA/components/ProgressBar/stylesheet.scss +++ b/src/OnboardingSPA/components/ProgressBar/stylesheet.scss @@ -6,8 +6,9 @@ height: 16px; &__progress { - background-color: var(--nfd-onboarding-progress-bar-fill); height: 16px; + transition: width 2s ease-in-out; + background-color: var(--nfd-onboarding-progress-bar-fill); } } } diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss index 2e10027f6..9dc5ff0a5 100644 --- a/src/OnboardingSPA/components/StartOptions/stylesheet.scss +++ b/src/OnboardingSPA/components/StartOptions/stylesheet.scss @@ -65,17 +65,14 @@ } &__heading { - color: var(--nfd-onboarding-primary); - width: 96%; - margin: 50px 0 50px; - line-height: 1; &__title { - font-weight: 500; - text-align: center; - color: var(--nfd-onboarding-primary); + font-weight: 600; font-size: 20px; line-height: 20px; + text-align: center; + margin-bottom: 10px; + color: var(--nfd-onboarding-primary); @media (max-width: #{ ($break-large) }) { margin: 8px; diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js index 8055dba22..59756e436 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js @@ -5,10 +5,12 @@ import { useRef, useEffect, useState, memo } from '@wordpress/element'; const TextInputSiteGen = ( { hint, height, + children, placeholder, customerInput, setIsValidInput, setCustomerInput, + customChildren = false, } ) => { const textareaRef = useRef( null ); const [ analysisScore, setAnalysisScore ] = useState( 0 ); @@ -85,16 +87,19 @@ const TextInputSiteGen = ( { onChange={ ( e ) => onTextChange( e ) } /> - { customerInput ? ( -
-
- { __( 'Detail', 'wp-module-onboarding' ) } +
+ { customerInput ? ( +
+
+ { __( 'Detail', 'wp-module-onboarding' ) } +
+ { renderDetails() }
- { renderDetails() } -
- ) : ( -

{ hint }

- ) } + ) : ( +

{ hint }

+ ) } + { customChildren && children } +
); diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss index c13ecdb00..230a568db 100644 --- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss +++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss @@ -33,7 +33,6 @@ $selected-detail: #1de082; } &__hint { - margin-top: 30px; font-weight: 300; font-size: 0.87rem; padding: 0 1.5px; @@ -44,7 +43,6 @@ $selected-detail: #1de082; &__info { display: flex; - margin-top: 30px; align-items: center; &-text { @@ -56,8 +54,8 @@ $selected-detail: #1de082; } &-icon { - width: 10px; - height: 6px; + width: 12px; + height: 6.5px; margin: 3px; border-radius: 6px; animation: fadeIn 100ms ease-in; @@ -69,6 +67,14 @@ $selected-detail: #1de082; } } } + + &_bottom { + display: flex; + margin-top: 30px; + flex-direction: row; + align-items: center; + justify-content: space-between; + } } } diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js index 5fecea1b9..eea7362b0 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js @@ -101,9 +101,9 @@ const SiteGenSiteDetails = () => { customerInput={ customerInput } setIsValidInput={ setIsValidInput } setCustomerInput={ setCustomerInput } - /> - { isLargeViewport && ( - <> + customChildren={ true } + > + { isLargeViewport && (
{ disabled={ ! isValidInput } />
- - ) } + ) } +
{ content.walkThroughText } import( './index' ) ); export const stepSiteGenSiteLogo = new Step( { - path: '/sitgen/step/site-logo', + path: '/sitegen/step/site-logo', title: __( 'Page Layouts', 'wp-module-onboarding' ), Component: SiteGenSiteLogo, icon: copy, diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss index 9cbc2c08d..47ec0a713 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss @@ -16,7 +16,7 @@ } &__buttons { - width: 108%; + width: 99%; display: flex; padding: 16px; flex-direction: row; diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js index 0db9b1e39..e92e99019 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js @@ -11,7 +11,7 @@ const getContents = () => { 'wp-module-onboarding' ), facebookDesc: __( - 'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your Al generated site.', + 'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your AI generated site.', 'wp-module-onboarding' ), facebookButton: __( 'Connect Facebook', 'wp-module-onboarding' ), diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss index 43901277e..915ab88cd 100644 --- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss @@ -7,7 +7,7 @@ &__container { display: flex; - align-items: center; + width: 40vw; flex-direction: column; justify-content: center; diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js b/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js index acdfa6fa1..a8f2cdcb8 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js @@ -4,7 +4,7 @@ const getContents = () => { return { heading: __( 'Website Creator for WordPress', 'wp-module-onboarding' ), subHeading: __( - 'Tell our AI engine what kind of site you want to make and let it handle the content and design for you.', + 'Tell our AI engine what kind of site you want to make and let it handle the content and design for you', 'wp-module-onboarding' ), buttonText: __( 'Get Started', 'wp-module-onboarding' ), diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js index ec3ff5b54..fd27e5533 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js @@ -40,7 +40,13 @@ const SiteGenWelcome = () => { { content.subHeading }

- + ); diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss index 3c8a39c87..11b3a18d6 100644 --- a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss @@ -31,12 +31,12 @@ } &__heading { + padding: 0; + width: 100%; display: flex; + align-items: center; flex-direction: row; - width: 100%; - padding: 0; justify-content: center; - align-items: center; &__image { height: 36px; @@ -60,29 +60,35 @@ } &__text { - color: var(--nfd-onboarding-primary); - font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem); + line-height: 1; + font-weight: 510; margin-left: 15px; white-space: normal; - line-height: 1; + 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; - padding: 0; - margin-bottom: 40px; + margin-bottom: 50px; &__text { - text-align: center; - color: var(--nfd-onboarding-primary); - font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem); margin: 0; padding: 0; + text-align: center; + color: var(--nfd-onboarding-primary); + font-size: clamp(0.875rem, 0.727rem + 0.5114vw, 2rem); } } } + + &--button { + padding: 0 35px; + } } } diff --git a/src/OnboardingSPA/steps/TheFork/contents.js b/src/OnboardingSPA/steps/TheFork/contents.js index e4a75f776..b4fee1673 100644 --- a/src/OnboardingSPA/steps/TheFork/contents.js +++ b/src/OnboardingSPA/steps/TheFork/contents.js @@ -20,7 +20,7 @@ const getContents = () => { { title: __( ' Website Creator', 'wp-module-onboarding' ), subtitle: __( - 'Custom Al generated content & design.', + 'Custom AI generated content & design.', 'wp-module-onboarding' ), span: __( 'AI', 'wp-module-onboarding' ), diff --git a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js index eb669a901..1b151b9a2 100644 --- a/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js +++ b/tests/cypress/integration/5-AI-SiteGen-onboarding-flow/site-logo.cy.js @@ -1,70 +1,69 @@ // -import { AdminBarCheck, BackButtonCheck, DarkBGCheck, DisabledNextButton, LightBGChcek, ProgressBarCheck, SkipButtonCheck } from "../wp-module-support/siteGen.cy"; +import { AdminBarCheck, BackButtonCheck, DarkBGCheck, DisabledNextButton, LightBGChcek, ProgressBarCheck, SkipButtonCheck } from '../wp-module-support/siteGen.cy'; -describe( 'SiteGen Site Logo Step', function () { +describe( 'SiteGen Site Logo Step', function() { before( () => { cy.visit( - 'wp-admin/?page=nfd-onboarding#/sitgen/step/site-logo' + 'wp-admin/?page=nfd-onboarding#/sitegen/step/site-logo' ); } ); - it( 'Check for the header admin bar', () => { - AdminBarCheck(); - } ); + it( 'Check for the header admin bar', () => { + AdminBarCheck(); + } ); - it( 'Check for the existing dark background', () => { + it( 'Check for the existing dark background', () => { DarkBGCheck(); } ); - it( 'Check for the light background', () => { - LightBGChcek(); - } ); - - it( 'Check the Progress Bar Value', () => { - ProgressBarCheck('33.3333%'); - }); + it( 'Check for the light background', () => { + LightBGChcek(); + } ); - it( 'Check for back button and go back', () => { - BackButtonCheck('sitgen/step/site-logo'); - } ); + it( 'Check the Progress Bar Value', () => { + ProgressBarCheck( '33.3333%' ); + } ); - it( 'Check if the heading is visible', () => { - cy.get('.ai-heading').should('be.visible'); - } ); + it( 'Check for back button and go back', () => { + BackButtonCheck( 'sitegen/step/site-logo' ); + } ); - it( 'Check for the skip button and click', () => { - SkipButtonCheck('sitgen/step/site-logo'); - } ); + it( 'Check if the heading is visible', () => { + cy.get( '.ai-heading' ).should( 'be.visible' ); + } ); - it( 'Check if the Next Button is disabled when there is no logo', () => { - DisabledNextButton(); - } ); + it( 'Check for the skip button and click', () => { + SkipButtonCheck( 'sitegen/step/site-logo' ); + } ); - it( 'Check if Image gets uploaded and Next button is enabled', () => { - const sampleLogoPath = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`; - const LogoPreviewClass = '.nfd-onboarding-image-uploader--with-text__site_logo__preview'; - if( - cy.get('.nfd-onboarding-button--site-gen-next--disabled') - .should('be.visible') - ){ - cy.get(LogoPreviewClass) - .should('not.exist'); - }; - cy.get('input[type=file]', { timeout: 10000 }) - .should('exist') - .selectFile( sampleLogoPath , {force: true} ) - .then( () => { - cy.wait( 1000 ); - cy.get(LogoPreviewClass, { timeout: 10000 } ).should( 'be.visible' ); - cy.get( '.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button' ) - .scrollIntoView() - .should( 'be.visible' ); - } ); - cy.get('.nfd-onboarding-button--site-gen-next') - .should('not.be.disabled') - .click(); - cy.url().should('not.contain', 'sitgen/step/site-logo'); - }); + it( 'Check if the Next Button is disabled when there is no logo', () => { + DisabledNextButton(); + } ); -}); + it( 'Check if Image gets uploaded and Next button is enabled', () => { + const sampleLogoPath = `vendor/newfold-labs/wp-module-onboarding/tests/cypress/fixtures/image.png`; + const LogoPreviewClass = '.nfd-onboarding-image-uploader--with-text__site_logo__preview'; + if ( + cy.get( '.nfd-onboarding-button--site-gen-next--disabled' ) + .should( 'be.visible' ) + ) { + cy.get( LogoPreviewClass ) + .should( 'not.exist' ); + } + cy.get( 'input[type=file]', { timeout: 10000 } ) + .should( 'exist' ) + .selectFile( sampleLogoPath, { force: true } ) + .then( () => { + cy.wait( 1000 ); + cy.get( LogoPreviewClass, { timeout: 10000 } ).should( 'be.visible' ); + cy.get( '.nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button' ) + .scrollIntoView() + .should( 'be.visible' ); + } ); + cy.get( '.nfd-onboarding-button--site-gen-next' ) + .should( 'not.be.disabled' ) + .click(); + cy.url().should( 'not.contain', 'sitegen/step/site-logo' ); + } ); +} );