From fca25d5e2fb4c283800d4e7b62799828f2032160 Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 7 Sep 2023 07:08:48 +0530 Subject: [PATCH 01/18] Add check for block_patterns before using concatenation --- includes/Data/Patterns.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 849a02d0f..79015a227 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -392,7 +392,11 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false ); continue; } - $block_patterns .= self::cleanup_wp_grammar( $pattern['content'] ); + if (isset($block_patterns)) { + $block_patterns .= self::cleanup_wp_grammar( $pattern['content'] ); + } else { + $block_patterns = self::cleanup_wp_grammar( $pattern['content'] ); + } } if ( isset( self::get_theme_step_filters()[ $active_theme ][ $step ] ) ) { From e335c874ee24e923d730d4041e8b159e5764e294 Mon Sep 17 00:00:00 2001 From: mr-vara Date: Thu, 7 Sep 2023 07:30:46 +0530 Subject: [PATCH 02/18] Fix lint issues --- includes/Data/Patterns.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 79015a227..8a587788b 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -392,7 +392,7 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false ); continue; } - if (isset($block_patterns)) { + if ( isset( $block_patterns ) ) { $block_patterns .= self::cleanup_wp_grammar( $pattern['content'] ); } else { $block_patterns = self::cleanup_wp_grammar( $pattern['content'] ); From d547b3b22361fc56215c9bcf2c6b7eab0844f4c2 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Sep 2023 14:56:20 +0530 Subject: [PATCH 03/18] Add Chapter Prioritization --- composer.json | 4 +- includes/Data/Brands.php | 306 ----------- includes/Data/Config.php | 25 - includes/Data/Data.php | 144 ----- includes/Data/Events.php | 64 --- includes/Data/Flows/Flows.php | 282 ---------- includes/Data/Flows/Upgrades/1.0.0.php | 19 - includes/Data/Options.php | 172 ------ includes/Data/Patterns.php | 491 ----------------- includes/Data/Plugins.php | 236 -------- includes/Data/Preview.php | 73 --- includes/Data/SiteFeatures.php | 332 ----------- includes/Data/Themes.php | 107 ---- includes/Data/Themes/Colors.php | 175 ------ includes/Data/Themes/Fonts.php | 223 -------- includes/RestApi/FlowController.php | 2 +- includes/RestApi/SitePagesController.php | 2 +- includes/Services/FlowService.php | 394 ------------- includes/Services/WonderBlocksService.php | 143 ----- includes/WP_Admin.php | 2 +- src/Brands/bluehost/step-intersitial.svg | 11 + src/OnboardingSPA/chapters/commerce.js | 30 + src/OnboardingSPA/chapters/demographic.js | 38 ++ src/OnboardingSPA/chapters/design.js | 51 ++ src/OnboardingSPA/chapters/features.js | 17 + src/OnboardingSPA/chapters/layoutContent.js | 32 ++ src/OnboardingSPA/chapters/utils.js | 90 +++ src/OnboardingSPA/components/App/index.js | 48 +- .../components/Button/ButtonBlue/index.js | 9 +- .../components/Button/ButtonWhite/index.js | 12 +- .../components/Button/NavCardButton/index.js | 3 +- .../Drawer/DrawerPanel/DesignColors.js | 2 +- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 5 +- .../DrawerPanel/DesignThemeStylesPreview.js | 5 +- .../DrawerPanel/Ecommerce/NavStoreInfo.js | 13 +- .../Drawer/DrawerPanel/NavDesign.js | 10 +- .../Drawer/DrawerPanel/NavGetStarted.js | 17 +- .../Drawer/DrawerPanel/NavPrimary.js | 20 +- .../components/ExitToWordPress/index.js | 8 +- .../components/Header/step-navigation.js | 3 +- .../Loaders/Chapter/Interstitial/contents.js | 35 ++ .../Loaders/Chapter/Interstitial/index.js | 98 ++++ .../Chapter/Interstitial/stylesheet.scss | 83 +++ .../components/SkipButton/index.js | 3 +- .../components/StateHandlers/Flow/index.js | 167 ++++-- src/OnboardingSPA/data/flows/constants.js | 2 + src/OnboardingSPA/data/flows/default.js | 122 +++++ src/OnboardingSPA/data/flows/ecommerce.js | 91 +++ src/OnboardingSPA/data/flows/index.js | 67 +++ src/OnboardingSPA/data/flows/utils.js | 44 ++ src/OnboardingSPA/data/models/Chapter.js | 14 + src/OnboardingSPA/data/models/Flow.js | 8 + src/OnboardingSPA/data/models/Page.js | 8 + src/OnboardingSPA/data/models/PseudoStep.js | 7 + src/OnboardingSPA/data/models/Step.js | 11 + .../data/routes/allStepsHandler.js | 26 - src/OnboardingSPA/data/routes/default-flow.js | 516 ------------------ .../data/routes/ecommerce-flow.js | 144 ----- src/OnboardingSPA/data/routes/index.js | 65 --- src/OnboardingSPA/data/translations/index.js | 37 +- src/OnboardingSPA/pages/ErrorPage/page.js | 13 + .../pages/{ => IndexPage}/index.js | 6 +- src/OnboardingSPA/pages/IndexPage/page.js | 11 + src/OnboardingSPA/pages/Resources/index.js | 21 - .../Menu/Sidebar/LearnMore/index.js | 94 ---- .../SecondarySite/Sidebar/LearnMore/index.js | 89 --- src/OnboardingSPA/pages/WhatToExpect/index.js | 20 - .../BasicInfo/Sidebar/LearnMore/contents.js | 2 +- .../BasicInfo}/Sidebar/LearnMore/index.js | 22 +- .../BasicInfo/basicInfoForm.js | 16 +- .../Steps => steps}/BasicInfo/contents.js | 2 +- .../{pages/Steps => steps}/BasicInfo/index.js | 8 +- src/OnboardingSPA/steps/BasicInfo/step.js | 31 ++ .../Steps => steps}/BasicInfo/stylesheet.scss | 0 .../Steps => steps}/Complete/contents.js | 2 +- .../{pages/Steps => steps}/Complete/index.js | 12 +- src/OnboardingSPA/steps/Complete/step.js | 12 + .../Sidebar/LearnMore/contents.js | 2 +- .../DesignColors/Sidebar/LearnMore/index.js | 14 +- .../Steps => steps}/DesignColors/index.js | 20 +- src/OnboardingSPA/steps/DesignColors/step.js | 27 + .../DesignColors/stylesheet.scss | 0 .../Steps => steps}/DesignColors/utils.js | 0 .../Sidebar/LearnMore/contents.js | 2 +- .../Sidebar/LearnMore/index.js | 14 +- .../Steps => steps}/DesignHeaderMenu/index.js | 10 +- .../steps/DesignHeaderMenu/step.js | 30 + .../DesignHeaderMenu/stylesheet.scss | 0 .../Sidebar/LearnMore/contents.js | 2 +- .../Sidebar/LearnMore/index.js | 85 +++ .../DesignHomepageMenu/contents.js | 0 .../DesignHomepageMenu/index.js | 25 +- .../steps/DesignHomepageMenu/step.js | 30 + .../DesignHomepageMenu/stylesheet.scss | 0 .../Menu/Sidebar/LearnMore/contents.js | 2 +- .../Menu}/Sidebar/LearnMore/index.js | 18 +- .../DesignThemeStyles/Menu/index.js | 37 +- .../steps/DesignThemeStyles/Menu/step.js | 29 + .../DesignThemeStyles/Menu/stylesheet.scss | 0 .../Preview/Sidebar/LearnMore/contents.js | 2 +- .../Preview/Sidebar/LearnMore/index.js | 14 +- .../DesignThemeStyles/Preview/index.js | 30 +- .../steps/DesignThemeStyles/Preview/step.js | 29 + .../DesignThemeStyles/Preview/stylesheet.scss | 0 .../DesignThemeStyles/contents.js | 0 .../DesignThemeStyles/stylesheet.scss | 0 .../Sidebar/LearnMore/contents.js | 2 +- .../Sidebar/LearnMore/index.js | 14 +- .../Steps => steps}/DesignTypography/index.js | 20 +- .../steps/DesignTypography/step.js | 27 + .../DesignTypography/stylesheet.scss | 0 .../StepAddress/Sidebar/LearnMore/contents.js | 2 +- .../StepAddress}/Sidebar/LearnMore/index.js | 12 +- .../Ecommerce/StepAddress/contents.js | 0 .../Ecommerce/StepAddress/index.js | 16 +- .../steps/Ecommerce/StepAddress/step.js | 26 + .../Sidebar/LearnMore/contents.js | 2 +- .../StepProducts}/Sidebar/LearnMore/index.js | 12 +- .../Ecommerce/StepProducts/contents.js | 0 .../Ecommerce/StepProducts/index.js | 14 +- .../steps/Ecommerce/StepProducts/step.js | 26 + .../StepTax/Sidebar/LearnMore/contents.js | 0 .../StepTax/Sidebar/LearnMore/index.js | 0 .../Ecommerce/StepTax/contents.js | 0 .../Ecommerce/StepTax/index.js | 0 .../steps/Ecommerce/StepTax/step.js | 26 + .../Steps => steps}/Ecommerce/countries.json | 0 .../Steps => steps}/Ecommerce/currencies.json | 0 .../Steps => steps}/Ecommerce/stylesheet.scss | 0 .../Ecommerce/useWPSettings.js | 2 +- .../Sidebar/LearnMore/contents.js | 2 +- .../Sidebar/LearnMore/index.js | 10 +- .../GetStartedExperience/contents.js | 2 +- .../GetStarted/GetStartedExperience/index.js | 20 +- .../GetStarted/GetStartedExperience/step.js | 23 + .../GetStartedExperience/stylesheet.scss | 0 .../PrimarySite/Sidebar/LearnMore/contents.js | 2 +- .../PrimarySite/Sidebar/LearnMore/index.js | 14 +- .../SiteTypeSetup/PrimarySite/index.js | 22 +- .../SiteTypeSetup/PrimarySite/step.js | 28 + .../SiteTypeSetup/PrimarySite/stylesheet.scss | 0 .../Sidebar/LearnMore/contents.js | 2 +- .../SecondarySite}/Sidebar/LearnMore/index.js | 2 +- .../SiteTypeSetup/SecondarySite/index.js | 26 +- .../SiteTypeSetup/SecondarySite/step.js | 28 + .../SecondarySite/stylesheet.scss | 0 .../GetStarted/SiteTypeSetup/contents.js | 2 +- .../Welcome/Sidebar/LearnMore/contents.js | 2 +- .../Welcome/Sidebar/LearnMore/index.js | 16 +- .../GetStarted/Welcome/contents.js | 2 +- .../GetStarted/Welcome/index.js | 16 +- .../steps/GetStarted/Welcome/step.js | 26 + .../GetStarted/Welcome/stylesheet.scss | 0 .../Steps => steps}/GetStarted/index.js | 0 .../Sidebar/LearnMore/contents.js | 2 +- .../SiteFeatures}/Sidebar/LearnMore/index.js | 22 +- .../Steps => steps}/SiteFeatures/contents.js | 0 .../Steps => steps}/SiteFeatures/index.js | 23 +- src/OnboardingSPA/steps/SiteFeatures/step.js | 28 + .../SitePages/Sidebar/LearnMore/contents.js | 2 +- .../SitePages/Sidebar/LearnMore/index.js | 14 +- .../Steps => steps}/SitePages/contents.js | 0 .../{pages/Steps => steps}/SitePages/index.js | 25 +- src/OnboardingSPA/steps/SitePages/step.js | 28 + .../Steps => steps}/SitePages/stylesheet.scss | 0 .../Steps => steps}/TopPriority/contents.js | 0 .../Steps => steps}/TopPriority/index.js | 23 +- src/OnboardingSPA/steps/TopPriority/step.js | 16 + .../TopPriority/stylesheet.scss | 0 .../WhatNext/Sidebar/LearnMore/contents.js | 2 +- .../steps/WhatNext/Sidebar/LearnMore/index.js | 96 ++++ .../Sidebar/LearnMore/stylesheet.scss | 0 .../Steps => steps}/WhatNext/contents.js | 2 +- .../{pages/Steps => steps}/WhatNext/index.js | 16 +- src/OnboardingSPA/steps/WhatNext/step.js | 24 + .../Steps => steps}/WhatNext/stylesheet.scss | 0 .../{pages/Steps => steps}/index.js | 2 +- src/OnboardingSPA/store/actions.js | 17 +- src/OnboardingSPA/store/index.js | 5 +- src/OnboardingSPA/store/reducer.js | 33 +- src/OnboardingSPA/store/selectors.js | 35 +- src/OnboardingSPA/styles/_branding.scss | 1 + src/OnboardingSPA/styles/app.scss | 29 +- .../utils/locales/translations.js | 30 +- 184 files changed, 2172 insertions(+), 4700 deletions(-) delete mode 100644 includes/Data/Brands.php delete mode 100644 includes/Data/Config.php delete mode 100644 includes/Data/Data.php delete mode 100644 includes/Data/Events.php delete mode 100644 includes/Data/Flows/Flows.php delete mode 100644 includes/Data/Flows/Upgrades/1.0.0.php delete mode 100644 includes/Data/Options.php delete mode 100644 includes/Data/Patterns.php delete mode 100644 includes/Data/Plugins.php delete mode 100644 includes/Data/Preview.php delete mode 100644 includes/Data/SiteFeatures.php delete mode 100644 includes/Data/Themes.php delete mode 100644 includes/Data/Themes/Colors.php delete mode 100644 includes/Data/Themes/Fonts.php delete mode 100644 includes/Services/FlowService.php delete mode 100644 includes/Services/WonderBlocksService.php create mode 100644 src/Brands/bluehost/step-intersitial.svg create mode 100644 src/OnboardingSPA/chapters/commerce.js create mode 100644 src/OnboardingSPA/chapters/demographic.js create mode 100644 src/OnboardingSPA/chapters/design.js create mode 100644 src/OnboardingSPA/chapters/features.js create mode 100644 src/OnboardingSPA/chapters/layoutContent.js create mode 100644 src/OnboardingSPA/chapters/utils.js create mode 100644 src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js create mode 100644 src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js create mode 100644 src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss create mode 100644 src/OnboardingSPA/data/flows/constants.js create mode 100644 src/OnboardingSPA/data/flows/default.js create mode 100644 src/OnboardingSPA/data/flows/ecommerce.js create mode 100644 src/OnboardingSPA/data/flows/index.js create mode 100644 src/OnboardingSPA/data/flows/utils.js create mode 100644 src/OnboardingSPA/data/models/Chapter.js create mode 100644 src/OnboardingSPA/data/models/Flow.js create mode 100644 src/OnboardingSPA/data/models/Page.js create mode 100644 src/OnboardingSPA/data/models/PseudoStep.js create mode 100644 src/OnboardingSPA/data/models/Step.js delete mode 100644 src/OnboardingSPA/data/routes/allStepsHandler.js delete mode 100644 src/OnboardingSPA/data/routes/default-flow.js delete mode 100644 src/OnboardingSPA/data/routes/ecommerce-flow.js delete mode 100644 src/OnboardingSPA/data/routes/index.js create mode 100644 src/OnboardingSPA/pages/ErrorPage/page.js rename src/OnboardingSPA/pages/{ => IndexPage}/index.js (80%) create mode 100644 src/OnboardingSPA/pages/IndexPage/page.js delete mode 100644 src/OnboardingSPA/pages/Resources/index.js delete mode 100644 src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js delete mode 100644 src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index.js delete mode 100644 src/OnboardingSPA/pages/WhatToExpect/index.js rename src/OnboardingSPA/{pages/Steps => steps}/BasicInfo/Sidebar/LearnMore/contents.js (95%) rename src/OnboardingSPA/{pages/Steps/Ecommerce/StepAddress => steps/BasicInfo}/Sidebar/LearnMore/index.js (74%) rename src/OnboardingSPA/{pages/Steps => steps}/BasicInfo/basicInfoForm.js (91%) rename src/OnboardingSPA/{pages/Steps => steps}/BasicInfo/contents.js (95%) rename src/OnboardingSPA/{pages/Steps => steps}/BasicInfo/index.js (78%) create mode 100644 src/OnboardingSPA/steps/BasicInfo/step.js rename src/OnboardingSPA/{pages/Steps => steps}/BasicInfo/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Complete/contents.js (93%) rename src/OnboardingSPA/{pages/Steps => steps}/Complete/index.js (84%) create mode 100644 src/OnboardingSPA/steps/Complete/step.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignColors/Sidebar/LearnMore/contents.js (94%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignColors/Sidebar/LearnMore/index.js (77%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignColors/index.js (79%) create mode 100644 src/OnboardingSPA/steps/DesignColors/step.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignColors/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignColors/utils.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignHeaderMenu/Sidebar/LearnMore/contents.js (96%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignHeaderMenu/Sidebar/LearnMore/index.js (77%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignHeaderMenu/index.js (85%) create mode 100644 src/OnboardingSPA/steps/DesignHeaderMenu/step.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignHeaderMenu/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignHomepageMenu/Sidebar/LearnMore/contents.js (95%) create mode 100644 src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignHomepageMenu/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignHomepageMenu/index.js (86%) create mode 100644 src/OnboardingSPA/steps/DesignHomepageMenu/step.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignHomepageMenu/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/Menu/Sidebar/LearnMore/contents.js (95%) rename src/OnboardingSPA/{pages/Steps/WhatNext => steps/DesignThemeStyles/Menu}/Sidebar/LearnMore/index.js (83%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/Menu/index.js (80%) create mode 100644 src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/Menu/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/Preview/Sidebar/LearnMore/contents.js (95%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js (78%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/Preview/index.js (83%) create mode 100644 src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/Preview/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignThemeStyles/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignTypography/Sidebar/LearnMore/contents.js (94%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignTypography/Sidebar/LearnMore/index.js (77%) rename src/OnboardingSPA/{pages/Steps => steps}/DesignTypography/index.js (79%) create mode 100644 src/OnboardingSPA/steps/DesignTypography/step.js rename src/OnboardingSPA/{pages/Steps => steps}/DesignTypography/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js (94%) rename src/OnboardingSPA/{pages/Steps/SiteFeatures => steps/Ecommerce/StepAddress}/Sidebar/LearnMore/index.js (90%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepAddress/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepAddress/index.js (95%) create mode 100644 src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js (94%) rename src/OnboardingSPA/{pages/Steps/BasicInfo => steps/Ecommerce/StepProducts}/Sidebar/LearnMore/index.js (90%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepProducts/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepProducts/index.js (86%) create mode 100644 src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepTax/Sidebar/LearnMore/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepTax/Sidebar/LearnMore/index.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepTax/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/StepTax/index.js (100%) create mode 100644 src/OnboardingSPA/steps/Ecommerce/StepTax/step.js rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/countries.json (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/currencies.json (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/Ecommerce/useWPSettings.js (66%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js (94%) rename src/OnboardingSPA/{pages/Steps/DesignHomepageMenu => steps/GetStarted/GetStartedExperience}/Sidebar/LearnMore/index.js (89%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/GetStartedExperience/contents.js (92%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/GetStartedExperience/index.js (80%) create mode 100644 src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/GetStartedExperience/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/contents.js (95%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js (77%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/PrimarySite/index.js (88%) create mode 100644 src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/contents.js (95%) rename src/OnboardingSPA/{pages/Steps/GetStarted/GetStartedExperience => steps/GetStarted/SiteTypeSetup/SecondarySite}/Sidebar/LearnMore/index.js (99%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/SecondarySite/index.js (92%) create mode 100644 src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/SiteTypeSetup/contents.js (92%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/Welcome/Sidebar/LearnMore/contents.js (96%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/Welcome/Sidebar/LearnMore/index.js (79%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/Welcome/contents.js (96%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/Welcome/index.js (78%) create mode 100644 src/OnboardingSPA/steps/GetStarted/Welcome/step.js rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/Welcome/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/GetStarted/index.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/SiteFeatures/Sidebar/LearnMore/contents.js (95%) rename src/OnboardingSPA/{pages/Steps/Ecommerce/StepProducts => steps/SiteFeatures}/Sidebar/LearnMore/index.js (74%) rename src/OnboardingSPA/{pages/Steps => steps}/SiteFeatures/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/SiteFeatures/index.js (81%) create mode 100644 src/OnboardingSPA/steps/SiteFeatures/step.js rename src/OnboardingSPA/{pages/Steps => steps}/SitePages/Sidebar/LearnMore/contents.js (95%) rename src/OnboardingSPA/{pages/Steps => steps}/SitePages/Sidebar/LearnMore/index.js (77%) rename src/OnboardingSPA/{pages/Steps => steps}/SitePages/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/SitePages/index.js (87%) create mode 100644 src/OnboardingSPA/steps/SitePages/step.js rename src/OnboardingSPA/{pages/Steps => steps}/SitePages/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/TopPriority/contents.js (100%) rename src/OnboardingSPA/{pages/Steps => steps}/TopPriority/index.js (82%) create mode 100644 src/OnboardingSPA/steps/TopPriority/step.js rename src/OnboardingSPA/{pages/Steps => steps}/TopPriority/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/WhatNext/Sidebar/LearnMore/contents.js (96%) create mode 100644 src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js rename src/OnboardingSPA/{pages/Steps => steps}/WhatNext/Sidebar/LearnMore/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/WhatNext/contents.js (96%) rename src/OnboardingSPA/{pages/Steps => steps}/WhatNext/index.js (75%) create mode 100644 src/OnboardingSPA/steps/WhatNext/step.js rename src/OnboardingSPA/{pages/Steps => steps}/WhatNext/stylesheet.scss (100%) rename src/OnboardingSPA/{pages/Steps => steps}/index.js (65%) diff --git a/composer.json b/composer.json index d53eb141b..60ad5472a 100644 --- a/composer.json +++ b/composer.json @@ -34,9 +34,7 @@ "require": { "mustache/mustache": "^2.14", "wp-cli/wp-config-transformer": "^1.3", - "wp-forge/wp-upgrade-handler": "^1.0", - "newfold-labs/wp-module-installer": "^1.1", - "newfold-labs/wp-module-patterns": "^0.1.2" + "newfold-labs/wp-module-onboarding-data": "^1.0.0" }, "require-dev": { "wp-phpunit/wp-phpunit": "^6.2", diff --git a/includes/Data/Brands.php b/includes/Data/Brands.php deleted file mode 100644 index 3afce1c51..000000000 --- a/includes/Data/Brands.php +++ /dev/null @@ -1,306 +0,0 @@ - 'wordpress', - 'name' => __( 'your web host', 'wp-module-onboarding' ), - 'pluginDashboardPage' => \admin_url(), - 'hireExpertsInfo' => array( - 'defaultLink' => 'https://www.bluehost.com/wp-live', - 'queryParameters' => array( - 'page' => 'bluehost', - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - 'utm_campaign' => 'wp-setup', - ), - ), - ); - - return array_replace( self::get_brands()['bluehost'], $default_brand_data ); - } - - /** - * Brand specific data - Bluehost, Bluehost India, Webcom - * - * @return array - */ - public static function get_brands() { - - return array( - 'bluehost' => array( - 'brand' => 'bluehost', - 'name' => 'Bluehost', - 'url' => 'https://bluehost.com', - 'knowledgeBaseUrl' => 'https://www.bluehost.com/help/results/wordpress', - 'helpUrl' => 'https://www.bluehost.com/help', - 'blogUrl' => 'https://www.bluehost.com/blog/', - 'facebookUrl' => 'https://www.facebook.com/bluehost', - 'twitterName' => '@bluehost', - 'twitterUrl' => 'https://twitter.com/bluehost', - 'youtubeUrl' => 'https://www.youtube.com/user/bluehost', - 'linkedinUrl' => 'https://www.linkedin.com/company/bluehost-com', - 'accountUrl' => 'https://my.bluehost.com', - 'domainsUrl' => 'https://my.bluehost.com/hosting/app?lil=1#/domains', - 'emailUrl' => 'https://my.bluehost.com/hosting/app?lil=1#/email-office', - 'pluginDashboardPage' => \admin_url( 'admin.php?page=bluehost' ), - 'dashboardRedirectParams' => array( - 'referrer' => 'nfd-onboarding', - ), - 'phoneNumbers' => array( - 'sales' => '844-303-1730', - 'support' => '888-401-4678', - 'intl' => '+1-801-765-9400', - ), - 'hireExpertsInfo' => array( - 'defaultLink' => 'admin.php?', - 'fragment' => '#/marketplace/services/blue-sky', - 'queryParameters' => array( - 'page' => 'bluehost', - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - 'utm_campaign' => 'wp-setup', - ), - ), - 'expertsInfo' => array( - 'defaultLink' => 'https://my.bluehost.com/cgi/app/#/marketplace/product/i/bluesky', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'fullServiceCreativeTeamInfo' => array( - 'defaultLink' => 'https://www.bluehost.com/solutions/full-service', - 'fragment' => '#full-service', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'techSupportInfo' => array( - 'defaultLink' => 'https://helpchat.bluehost.com/', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'config' => array( - 'enabled_flows' => array( - 'ecommerce' => true, - 'wp-setup' => true, - ), - 'wonder_blocks' => true, - ), - ), - 'bluehost-india' => array( - 'brand' => 'bluehost-india', - 'name' => 'Bluehost', - 'url' => 'https://bluehost.in', - 'knowledgeBaseUrl' => 'https://www.bluehost.in/hosting/help/results/wordpress', - 'helpUrl' => 'https://www.bluehost.in/hosting/help', - 'blogUrl' => 'https://www.bluehost.in/tutorials', - 'facebookUrl' => 'https://www.facebook.com/BlueHostIndia', - 'twitterName' => '@BluehostIndia', - 'twitterUrl' => 'https://twitter.com/bluehostindia', - 'youtubeUrl' => 'https://www.youtube.com/c/BluehostIndia1', - 'linkedinUrl' => null, - 'accountUrl' => 'https://my.bluehost.in', - 'domainsUrl' => 'https://my.bluehost.in/hosting/app?lil=1#/domains', - 'emailUrl' => 'https://my.bluehost.in/hosting/app?lil=1#/email-office', - 'pluginDashboardPage' => \admin_url( 'admin.php?page=bluehost' ), - 'dashboardRedirectParams' => array( - 'referrer' => 'nfd-onboarding', - ), - 'phoneNumbers' => array( - 'support' => '1800-419-4426', - ), - 'hireExpertsInfo' => array( - 'defaultLink' => 'https://www.bluehost.in/bluesky', - 'utmParameters' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - 'utm_campaign' => 'wp-setup', - ), - ), - 'expertsInfo' => array( - 'defaultLink' => 'https://my.bluehost.in/cgi/app/#/marketplace/product/i/bluesky', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'fullServiceCreativeTeamInfo' => array( - 'defaultLink' => 'https://www.bluehost.in/solutions/full-service', - 'fragment' => '#full-service', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'techSupportInfo' => array( - 'defaultLink' => 'https://helpchat.bluehost.in/', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'config' => array( - 'enabled_flows' => array( - 'ecommerce' => true, - 'wp-setup' => false, - ), - 'wonder_blocks' => true, - ), - ), - 'webcom' => array( - 'brand' => 'webcom', - 'name' => 'Web.com', - 'url' => 'https://web.com', - 'knowledgeBaseUrl' => 'https://www.web.com/knowledge', - 'helpUrl' => 'https://www.web.com/knowledge', - 'blogUrl' => 'https://www.web.com/blog', - 'facebookUrl' => 'https://www.facebook.com/Web.com/', - 'twitterName' => '@webdotcom', - 'twitterUrl' => 'http://twitter.com/webdotcom', - 'youtubeUrl' => 'https://www.youtube.com/c/webdotcom', - 'linkedinUrl' => 'https://www.linkedin.com/company/website-pros/', - 'accountUrl' => 'https://www.web.com/my-account', - 'domainsUrl' => 'https://www.web.com/domains', - 'emailUrl' => 'https://www.web.com/email-service', - 'phoneNumbers' => array( - 'sales' => '866-923-8821', - 'support' => '866-923-8821', - 'intl' => '+1-904-680-6617', - ), - 'hireExpertsInfo' => array( - 'defaultLink' => 'https://www.web.com/websites/pro-website-services', - 'utmParameters' => array( - 'utm_source' => '', - 'utm_medium' => '', - 'utm_campaign' => '', - ), - ), - 'expertsInfo' => array( - 'defaultLink' => 'https://www.web.com/websites/pro-website-services', - 'queryParams' => array( - 'utm_source' => '', - 'utm_medium' => '', - ), - ), - 'fullServiceCreativeTeamInfo' => array( - 'defaultLink' => 'https://www.web.com/websites/pro-website-services', - 'fragment' => '', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'techSupportInfo' => array( - 'defaultLink' => '', - 'queryParams' => array( - 'utm_source' => '', - 'utm_medium' => '', - ), - ), - 'config' => array( - 'enabled_flows' => array( - 'ecommerce' => false, - 'wp-setup' => false, - ), - 'wonder_blocks' => true, - ), - ), - 'crazy-domains' => array( - 'brand' => 'crazy-domains', - 'name' => 'Crazy Domains', - 'url' => 'https://www.crazydomains.com', - 'knowledgeBaseUrl' => 'https://www.crazydomains.com/learn/online-academy/', - 'helpUrl' => 'https://www.crazydomains.com/help', - 'blogUrl' => 'https://www.crazydomains.com/learn/', - 'facebookUrl' => 'https://www.facebook.com/crazydomains/', - 'twitterName' => '@crazydomains', - 'twitterUrl' => 'https://twitter.com/crazydomains', - 'youtubeUrl' => 'https://www.youtube.com/user/CrazyDomains', - 'linkedinUrl' => '', - 'accountUrl' => 'https://www.crazydomains.com/my-account/home/', - 'domainsUrl' => '', - 'emailUrl' => 'https://www.crazydomains.com/contact/', - 'pluginDashboardPage' => \admin_url( 'admin.php?page=crazy-domains' ), - 'phoneNumbers' => array( - 'support' => '2135592459', - ), - 'hireExpertsInfo' => array( - 'defaultLink' => 'https://www.crazydomains.com/help/', - 'fragment' => '', - 'queryParameters' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - 'utm_campaign' => 'wp-setup', - ), - ), - 'expertsInfo' => array( - 'defaultLink' => 'https://www.crazydomains.com/help/', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'fullServiceCreativeTeamInfo' => array( - 'defaultLink' => 'https://www.crazydomains.com/help/', - 'fragment' => '', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'techSupportInfo' => array( - 'defaultLink' => 'https://www.crazydomains.com/contact/', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'config' => array( - 'enabled_flows' => array( - 'ecommerce' => true, - 'wp-setup' => true, - ), - 'wonder_blocks' => true, - 'views' => array( - 'sidebar' => array( - 'illustration' => array( - 'shown' => false, - ), - ), - ), - ), - ), - ); - } - - /** - * Sets the hosting brand for which Onboarding is active. - * - * @param object $container The brand plugin container. - * @return void - */ - public static function set_current_brand( $container ) { - if ( ! defined( 'NFD_ONBOARDING_PLUGIN_BRAND' ) ) { - $brand = $container->plugin()->brand; - if ( empty( $brand ) ) { - $brand = 'wordpress'; - } - define( 'NFD_ONBOARDING_PLUGIN_BRAND', sanitize_title_with_dashes( str_replace( '_', '-', $brand ) ) ); - } - } -} diff --git a/includes/Data/Config.php b/includes/Data/Config.php deleted file mode 100644 index 840613be7..000000000 --- a/includes/Data/Config.php +++ /dev/null @@ -1,25 +0,0 @@ - '300', - 'WP_POST_REVISIONS' => '20', - 'EMPTY_TRASH_DAYS' => '7', - 'WP_AUTO_UPDATE_CORE' => 'true', - 'WP_CRON_LOCK_TIMEOUT' => '120', - ); - - /** - * Get the initial values for wp-config constants. - * - * @return array - */ - public static function get_wp_config_initialization_constants() { - return self::$wp_config_initialization_constants; - } -} diff --git a/includes/Data/Data.php b/includes/Data/Data.php deleted file mode 100644 index 6d2c8fc9a..000000000 --- a/includes/Data/Data.php +++ /dev/null @@ -1,144 +0,0 @@ - \NFD_ONBOARDING_BUILD_URL, - 'siteUrl' => \get_site_url(), - 'restUrl' => \get_home_url() . '/index.php?rest_route=', - 'adminUrl' => \admin_url(), - 'currentBrand' => self::current_brand(), - 'currentPlan' => self::current_plan(), - 'currentFlow' => self::current_flow(), - 'pluginInstallHash' => PluginInstaller::rest_get_plugin_install_hash(), - 'previewSettings' => array( - 'settings' => Preview::get_settings(), - 'stepPreviewData' => Themes::step_preview_data(), - ), - ); - } - - /** - * Establish brand to apply to Onboarding experience. - * - * @return array - */ - public static function current_brand() { - $brands = Brands::get_brands(); - - return array_key_exists( NFD_ONBOARDING_PLUGIN_BRAND, $brands ) ? - $brands[ NFD_ONBOARDING_PLUGIN_BRAND ] : - Brands::get_default_brand(); - } - - - /** - * Get the current hosting plan information. - * - * @return array - */ - public static function current_plan() { - $customer_data = self::customer_data(); - - $current_flow = Flows::get_flow_from_customer_data( $customer_data ); - if ( false !== $current_flow ) { - return array( - 'flow' => $current_flow, - 'subtype' => $customer_data['plan_subtype'], - 'type' => $customer_data['plan_type'], - ); - } - - $current_flow = Flows::get_flow_from_params(); - if ( false !== $current_flow ) { - return array( - 'flow' => $current_flow, - 'subtype' => Flows::is_commerce_priority() ? 'wc_priority' : null, - 'type' => null, - ); - } - - $current_flow = Flows::get_flow_from_plugins(); - if ( false !== $current_flow ) { - switch ( $current_flow ) { - case 'ecommerce': - return array( - 'flow' => 'ecommerce', - 'subtype' => 'wc_priority', - 'type' => null, - ); - } - } - - $current_flow = Flows::get_flow_from_top_priority(); - if ( false !== $current_flow ) { - return array( - 'flow' => 'ecommerce', - 'subtype' => 'wc_priority', - 'type' => null, - ); - } - - return array( - 'flow' => Flows::get_default_flow(), - 'subtype' => null, - 'type' => null, - ); - } - - /** - * Get the current onboarding flow. - * - * @return string - */ - public static function current_flow() { - $current_plan = self::current_plan(); - return $current_plan['flow']; - } - - /** - * Get the current customer data using the Bluehost customer data module. - * - * @return array - */ - public static function customer_data() { - if ( class_exists( 'NewfoldLabs\WP\Module\CustomerBluehost\CustomerBluehost' ) ) { - return CustomerBluehost::collect(); - } - return array(); - } - - /** - * Determine whether the site is in coming soon mode. - * - * @return boolean - */ - public static function coming_soon() { - // Check if nfd_coming_soon is set to true. - $coming_soon = \get_option( Options::get_option_name( 'new_coming_soon', false ), null ); - if ( null !== $coming_soon ) { - return 'true' === $coming_soon; - } - - // Check if legacy mm_coming_soon is set to true. - $coming_soon = \get_option( Options::get_option_name( 'old_coming_soon', false ), null ); - if ( null !== $coming_soon ) { - return 'true' === $coming_soon; - } - - // Assume site has been launched if both options do not exist. - return false; - } - -} diff --git a/includes/Data/Events.php b/includes/Data/Events.php deleted file mode 100644 index da3469ef0..000000000 --- a/includes/Data/Events.php +++ /dev/null @@ -1,64 +0,0 @@ - true, - 'onboarding_started' => true, - 'onboarding_chapter_started' => true, - 'onboarding_chapter_complete' => true, - 'onboarding_complete' => true, - 'experience_level_set' => true, - 'primary_type_set' => true, - 'secondary_type_set' => true, - 'theme_style_selected' => true, - 'typography_selected' => true, - 'header_selected' => true, - 'homepage_layout_selected' => true, - 'onboarding_top_priority_set' => true, - 'onboarding_step_skipped' => true, - 'onboarding_exited' => true, - 'starter_pages_selected' => true, - 'feature_added' => true, - 'colors_selected' => true, - 'logo_added' => true, - 'tagline_set' => true, - 'site_title_set' => true, - 'social_added' => true, - ); - - /** - * Returns the list of valid actions that an event can perform - * - * @return array - */ - public static function get_valid_actions() { - return self::$valid_actions; - } - - /** - * Valid category of on event. - * - * @return string - */ - public static function get_category() { - return self::$category; - } -} diff --git a/includes/Data/Flows/Flows.php b/includes/Data/Flows/Flows.php deleted file mode 100644 index 97a3c66f4..000000000 --- a/includes/Data/Flows/Flows.php +++ /dev/null @@ -1,282 +0,0 @@ - '1.0.0', - - // Each time step is viewed, insert GMT timestamp to array. - 'isViewed' => array(), - - // The first time required criteria met (if any), mark GMT timestamp. - 'isComplete' => 0, - - 'hasExited' => 0, - - // If user navigates to another step, mark GMT timestamp. - 'isSkipped' => array(), - - // path identifier for the current step within a flow - 'currentStep' => '/step/wp-setup/get-started', - - 'createdAt' => 0, - - 'updatedAt' => 0, - - // to populate the step fields if a user is resuming a flow. - 'data' => array( - // Any manual fixes or modification made to siteType shall also be made in FlowService::update_default_data_for_ecommerce() - 'siteType' => array( - 'referTo' => 'site', - 'primary' => array( - 'refers' => '', - 'value' => '', - ), - 'secondary' => array( - 'refers' => '', - 'value' => '', - ), - ), - - 'wpComfortLevel' => '0', - - // Any manual fixes or modification made to topPriority shall also be made in FlowServices::update_default_data_for_ecommerce() - // Enums: `publishing`, `designing`, `selling`, 'migrating', 'regenerate' and 'skip' - 'topPriority' => array( - 'priority1' => 'publishing', - ), - - // This data will map to WordPress default 'blogname' - 'blogName' => '', - - // This data will map to WordPress default 'blogdescription' - 'blogDescription' => '', - - // This integer will map to the attachment ID for an uploaded image to the WordPress media library - 'siteLogo' => array( - 'id' => 0, - 'url' => '', - ), - - // key-value store for social media accounts - 'accounts' => array(), - - 'theme' => array( - // This is the WordPress parent theme slug - 'template' => '', - - // This is the parent theme or child theme slug if present - 'stylesheet' => '', - - // This is the key for the theme.json variation file - 'variation' => '', - ), - - 'customDesign' => false, - - 'colorStyle' => '', - - 'fontStyle' => '', - - // This string will identify the Header Pattern - 'partHeader' => '', - - // for eg. Home, About, Contact, Blog|News, Resume, Portfolio, Staff and Link in Bio - 'sitePages' => array( - 'homepage' => '', - 'other' => array(), - ), - - // will include plugin installs, module activation/deactivation and perhaps API calls to the hosting platform for Newfold-specific services - 'siteFeatures' => array(), - ), - - // we will store active flows (abandoned wp-setup, abandoned wp-commerce) with their identifier and use as a reference to access currentStep and data - 'currentFlows' => array(), - - 'isFirstNFDOnboarding' => true, - - // This is the common label like 'personal blog', 'restaurant', 'dentist' - 'siteType' => 'blog', - - // 'personal', 'professional', 'business', 'ecommerce', 'nonprofit', 'team/community', 'web-pro-agency', 'other' - 'ownerType' => 'personal', - - // Set by Hosting Platform as a FOS-purchased ecommerce plan - 'isEcommercePlan' => false, - - 'doesCommerce' => false, - - 'storeDetails' => array( - 'productInfo' => array( - 'product_count' => '', - 'product_types' => array(), - ), - ), - ); - - /** - * Array with Key Names as Key, and array to specify Key from Exception Key Array to remove/add as Value - * - * This shall be used temporarily as the respective keys having varied patterns of values cannot be handled by the scope of current functionality - * - * @var array - */ - protected static $exception_list = array( - 'other' => true, - ); - - /** - * Update Exception Key(s). - * - * @return array - */ - public static function get_exception_list() { - return self::$exception_list; - } - - /** - * Get Onboarding Flow information. - * - * @return array - */ - public static function get_data() { - return self::$data; - } - - /** - * Get the default onboarding flow. - * - * @return string - */ - public static function get_default_flow() { - return 'wp-setup'; - } - - /** - * Retrieve all the known onboarding flows. - * - * @return array A value of true for each key indicates that the flow has been approved - * and a value of null indicates the flow has not been approved (or) has been temporarily disabled. - */ - public static function get_flows() { - $current_brand = Data::current_brand(); - return isset( $current_brand['config']['enabled_flows'] ) - ? $current_brand['config']['enabled_flows'] : array( - 'wp-setup' => false, - 'ecommerce' => false, - ); - } - - /** - * Check if a plan is of flow type ecommerce. - * - * @param string $plan The hosting plan. - * @return boolean - */ - public static function is_ecommerce_plan( $plan ) { - if ( preg_match( '/^(wc_standard|wc_premium)$/i', $plan ) ) { - return true; - } - return false; - } - - /** - * Checks if an install is of type commerce priority. - * - * @return boolean - */ - public static function is_commerce_priority() { - if ( self::get_flow_from_plugins() === 'ecommerce' ) { - return true; - } - return false; - } - - /** - * Get the type of flow from the flow query param or the flow preset option. - * - * @return string|boolean - */ - public static function get_flow_from_params() { - $flows = self::get_flows(); - - if ( isset( $_GET['flow'] ) ) { - $current_flow_type = \sanitize_text_field( $_GET['flow'] ); - } - - if ( ! empty( $current_flow_type ) && true === $flows[ $current_flow_type ] ) { - return $current_flow_type; - } - - $current_flow_type = \get_option( Options::get_option_name( 'flow_preset' ), false ); - if ( $current_flow_type && true === $flows[ $current_flow_type ] ) { - return $current_flow_type; - } - - return false; - } - - /** - * Gets the flow based on the plugins installed/activated. - * - * @return string|boolean - */ - public static function get_flow_from_plugins() { - if ( PluginInstaller::exists( 'woocommerce', false ) ) { - return true === self::get_flows()['ecommerce'] ? 'ecommerce' : false; - } - return false; - } - - /** - * Get the flow type given customer data in a particular shape. - * - * @param array $customer_data The customer data to parse. - * @return string|boolean - */ - public static function get_flow_from_customer_data( $customer_data = array() ) { - if ( isset( $customer_data['plan_type'] ) && isset( $customer_data['plan_subtype'] ) ) { - return self::get_flow_from_plan_subtype( $customer_data['plan_subtype'] ); - } - return false; - } - - /** - * Get the corresponding flow type given a hosting plan_subtype. - * - * @param string $plan_subtype The hosting plan_subtype. - * @return string|boolean - */ - public static function get_flow_from_plan_subtype( $plan_subtype ) { - if ( self::is_ecommerce_plan( $plan_subtype ) ) { - return true === self::get_flows()['ecommerce'] ? 'ecommerce' : false; - } - return false; - } - /** - * Get the corresponding flow from the top priority in flow data. - * - * @return string|boolean - */ - public static function get_flow_from_top_priority() { - $flow_data = FlowService::read_data_from_wp_option(); - if ( $flow_data && isset( $flow_data['data']['topPriority']['priority1'] ) && 'selling' === $flow_data['data']['topPriority']['priority1'] ) { - return true === self::get_flows()['ecommerce'] ? 'ecommerce' : false; - } - return false; - } -} diff --git a/includes/Data/Flows/Upgrades/1.0.0.php b/includes/Data/Flows/Upgrades/1.0.0.php deleted file mode 100644 index e26efa1bd..000000000 --- a/includes/Data/Flows/Upgrades/1.0.0.php +++ /dev/null @@ -1,19 +0,0 @@ - 'redirect', - 'redirect_param' => 'redirect_param', - 'activate' => 'activate', - 'activate_param' => 'activate_param', - 'new_coming_soon' => 'nfd_coming_soon', - 'old_coming_soon' => 'mm_coming_soon', - 'brand' => 'mm_brand', - 'close_comments_for_old_posts' => 'close_comments_for_old_posts', - 'close_comments_days_old' => 'close_comments_days_old', - 'comments_per_page' => 'comments_per_page', - 'start_date' => 'start_date', - 'allow_major_auto_core_updates' => 'allow_major_auto_core_updates', - 'allow_minor_auto_core_updates' => 'allow_minor_auto_core_updates', - 'auto_update_plugin' => 'auto_update_plugin', - 'auto_update_theme' => 'auto_update_theme', - 'permalink_structure' => 'permalink_structure', - 'settings_initialized' => 'settings_initialized', - 'flow' => 'flow', - 'blog_name' => 'blogname', - 'blog_description' => 'blogdescription', - 'site_icon' => 'site_icon', - 'site_logo' => 'site_logo', - 'show_on_front' => 'show_on_front', - 'page_on_front' => 'page_on_front', - 'theme_settings' => 'theme_settings', - 'flow_preset' => 'flow_preset', - 'wpseo_social' => 'wpseo_social', - 'compatibility_results' => 'compatibility_results', - 'core_update_referrer' => 'core_update_referrer', - 'wc_currency' => 'woocommerce_currency', - 'wc_default_country' => 'woocommerce_default_country', - 'wc_email' => 'woocommerce_email_from_address', - 'wc_address_primary' => 'woocommerce_store_address', - 'wc_address_secondary' => 'woocommerce_store_address_2', - 'wc_city' => 'woocommerce_store_city', - 'wc_postcode' => 'woocommerce_store_postcode', - 'wc_taxes_enabled' => 'wc_connect_taxes_enabled', - 'wc_calc_taxes' => 'woocommerce_calc_taxes', - 'wc_no_sales_tax' => 'woocommerce_no_sales_tax', - ); - - /** - * Contains all the options and their values to be initialized by onboarding. - * - * @var array - */ - protected static $initialization_options = array( - 'close_comments_for_old_posts' => 1, - 'close_comments_days_old' => 28, - 'comments_per_page' => 20, - 'new_coming_soon' => 'true', - 'allow_major_auto_core_updates' => 'true', - 'allow_minor_auto_core_updates' => 'true', - 'auto_update_plugin' => 'true', - 'auto_update_theme' => 'true', - 'permalink_structure' => '/%postname%/', - ); - - /** - * Get option name for a given key. - * - * @param string $option_key The key for the Options::$options array. - * @param boolean $attach_prefix Attach the module prefix. - * @return string|boolean - */ - public static function get_option_name( $option_key, $attach_prefix = true ) { - return isset( self::$options[ $option_key ] ) - ? ( $attach_prefix - ? self::$prefix . self::$options[ $option_key ] - : self::$options[ $option_key ] - ) - : false; - } - - /** - * Get the list of all options. - * - * @return array - */ - public static function get_all_options() { - return self::$options; - } - - /** - * Get the list of all initialization options with their values. - * - * @return array - */ - public static function get_initialization_options() { - return self::$initialization_options; - } - - /** - * Get all the WooCommerce Settings Options. - * - * @return array - */ - public static function get_wc_settings_options() { - return array( - 'wc_currency' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_default_country' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_email' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_address_primary' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_address_secondary' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_city' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_postcode' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_taxes_enabled' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_calc_taxes' => array( - 'show_in_rest' => true, - 'type' => 'string', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - 'wc_no_sales_tax' => array( - 'show_in_rest' => true, - 'type' => 'boolean', - 'description' => __( 'Woocommerce Settings', 'wp-module-onboarding' ), - ), - ); - } -} diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php deleted file mode 100644 index 9920b807b..000000000 --- a/includes/Data/Patterns.php +++ /dev/null @@ -1,491 +0,0 @@ - array( - 'theme-styles' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active' => true, - 'replace' => true, - ), - 'homepage-1' => array( - 'active' => true, - 'shown' => true, - 'combine' => true, - 'wonder_blocks' => 'home-1', - ), - 'site-footer' => array( - 'active' => true, - ), - ), - 'homepage-styles' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active' => true, - 'replace' => true, - ), - 'homepage-1' => array( - 'active' => true, - 'shown' => true, - 'wonder_blocks' => 'home-1', - ), - 'homepage-2' => array( - 'active' => true, - 'shown' => true, - 'wonder_blocks' => 'home-2', - ), - 'homepage-3' => array( - 'active' => true, - 'shown' => true, - 'wonder_blocks' => 'home-3', - ), - 'site-footer' => array( - 'active' => true, - ), - ), - 'site-pages' => array( - 'company-page' => array( - 'active' => true, - 'title' => 'About', - 'selected' => true, - 'shown' => true, - 'description' => __( 'Explain your company values or the history behind your brand.', 'wp-module-onboarding' ), - ), - 'contact-us' => array( - 'active' => true, - 'selected' => true, - 'title' => 'Contact', - 'shown' => true, - 'description' => __( 'Offer visitors a single page with a contact form, your street address and social media.', 'wp-module-onboarding' ), - ), - 'testimonials-page' => array( - 'active' => true, - 'title' => 'Testimonials', - 'selected' => false, - 'shown' => true, - 'description' => __( 'Highlight your success with testimonials from your fans.', 'wp-module-onboarding' ), - ), - 'blog-page' => array( - 'active' => true, - 'selected' => true, - 'title' => 'Blog', - 'shown' => true, - 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), - ), - ), - 'header-menu' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active' => true, - 'shown' => true, - ), - 'homepage-1' => array( - 'active' => true, - 'wonder_blocks' => 'home-1', - ), - 'site-footer' => array( - 'active' => true, - ), - 'site-header-left-logo-navigation-below' => array( - 'active' => true, - 'shown' => true, - ), - 'site-header-centered' => array( - 'active' => true, - 'shown' => true, - ), - 'site-header-splitted-menu' => array( - 'active' => true, - 'shown' => true, - ), - ), - ), - ); - } - - /** - * Define fallback patterns incase the primary ones cannot be found. - * - * @return array - */ - public static function get_fallbacks() { - return array( - 'wonder-blocks' => array( - 'home-1' => 'yith-wonder/homepage-1', - 'home-2' => 'yith-wonder/homepage-2', - 'home-3' => 'yith-wonder/homepage-3', - ), - ); - } - - /** - * Callback Functions for Theme Step. - * - * @return array - */ - protected static function get_theme_step_filters() { - return array( - 'yith-wonder' => array( - 'homepage-styles' => array( __CLASS__, 'filter_yith_wonder_homepage_patterns' ), - 'header-menu' => array( __CLASS__, 'filter_yith_wonder_headermenu_patterns' ), - ), - ); - } - - /** - * Get post metadata for a pattern. Ref: SitePagesController.php - * - * @return array - */ - public static function get_theme_patterns_meta() { - return array( - 'yith-wonder' => array( - 'company-page' => array( - 'nf_dc_page' => 'about', - ), - 'contact-us' => array( - 'nf_dc_page' => 'contact', - ), - 'homepage-1' => array( - 'nf_dc_page' => 'home', - ), - 'homepage-2' => array( - 'nf_dc_page' => 'home', - ), - 'homepage-3' => array( - 'nf_dc_page' => 'home', - ), - ), - 'wonder-blocks' => array( - 'home-1' => array( - 'nf_dc_page' => 'home', - ), - 'home-2' => array( - 'nf_dc_page' => 'home', - ), - 'home-3' => array( - 'nf_dc_page' => 'home', - ), - ), - ); - } - - /** - * Sanitize the content by cleaning wp_grammar. - * - * @param string $content Data to clean - * - * @return string - */ - private static function cleanup_wp_grammar( $content ) { - - // Remove template-part if that exists - $content = preg_replace( '/^$/m', '', $content ); - - // Create an array with the values you want to replace - $searches = array( "\n", "\t" ); - - // Replace the line breaks and tabs with a empty string - $content = str_replace( $searches, '', $content ); - - return $content; - } - - /** - * Get the post meta for a given slug. - * - * @param string $slug The slug (theme/kebab-cased-name). - * @return array|boolean - */ - public static function get_meta_from_slug( $slug ) { - $theme_pattern = explode( '/', $slug ); - if ( ! isset( $theme_pattern[0] ) || ! isset( $theme_pattern[1] ) ) { - return false; - } - $theme_patterns_meta = self::get_theme_patterns_meta(); - return isset( $theme_patterns_meta[ $theme_pattern [0] ][ $theme_pattern [1] ] ) - ? $theme_patterns_meta[ $theme_pattern [0] ][ $theme_pattern [1] ] - : false; - } - - /** - * Get the fallback slug for a given slug. - * - * @param string $pattern_slug The given slug. - * @return string|false - */ - public static function get_fallback_from_slug( $pattern_slug ) { - $theme_pattern = explode( '/', $pattern_slug ); - if ( ! isset( $theme_pattern[0] ) || ! isset( $theme_pattern[1] ) ) { - return false; - } - $fallbacks = self::get_fallbacks(); - return isset( $fallbacks[ $theme_pattern [0] ][ $theme_pattern [1] ] ) - ? $fallbacks[ $theme_pattern [0] ][ $theme_pattern [1] ] - : false; - } - - /** - * Fetches a pattern from the WP_Block_Patterns_Registry. - * - * @param string $pattern_slug The full slug of the pattern. - * @return array - */ - public static function get_pattern_from_block_patterns_registry( $pattern_slug ) { - $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); - if ( $block_patterns_registry->is_registered( $pattern_slug ) ) { - $pattern = $block_patterns_registry->get_registered( $pattern_slug ); - return array( - 'slug' => $pattern_slug, - 'title' => $pattern['title'], - 'content' => self::cleanup_wp_grammar( $pattern['content'] ), - 'name' => $pattern['name'], - 'meta' => self::get_meta_from_slug( $pattern_slug ), - 'categories' => $pattern['categories'], - ); - } - return false; - } - - /** - * Retrieve pattern from slug. - * - * @param string $pattern_slug Pattern Slug Data - * - * @return array|boolean - */ - public static function get_pattern_from_slug( $pattern_slug ) { - if ( WonderBlocksService::is_valid_slug( $pattern_slug ) ) { - $pattern = WonderBlocksService::get_template_from_slug( $pattern_slug ); - if ( ! $pattern ) { - $fallback_pattern_slug = self::get_fallback_from_slug( $pattern_slug ); - if ( ! $fallback_pattern_slug ) { - return false; - } - - return self::get_pattern_from_block_patterns_registry( $fallback_pattern_slug ); - } - - return $pattern; - } - - return self::get_pattern_from_block_patterns_registry( $pattern_slug ); - } - - /** - * Retrieve the header menu slug from flow data. - * - * @return string|boolean - */ - private static function get_selected_header_from_flow_data() { - // fetch the selected header menu slug from DB - $flow_data = \get_option( Options::get_option_name( 'flow' ), false ); - if ( ! $flow_data ) { - return false; - } - - if ( ! empty( $flow_data['data']['partHeader'] ) ) { - return explode( '/', $flow_data['data']['partHeader'] )[1]; - } - - return false; - - } - - /** - * Replace the header menu slug in the patterns array - * - * @param array $pattern_content pattern grammar that is to be modified - * - * @return array - */ - private static function replace_split_menu_items( $pattern_content ) { - $dummy_menu_grammar = ''; - $menu_navigation_grammar = ''; - - foreach ( self::get_dummy_menu_items() as $item ) { - $dummy_menu_grammar = ''; - $pattern_content = preg_replace( $menu_navigation_grammar, $dummy_menu_grammar, $pattern_content, 1 ); - } - return $pattern_content; - } - - /** - * Retrieve Theme Step Patterns from chosen Theme in Previous Step - * - * @param string $step Step from which Theme Step Pattern is required - * @param boolean $squash Flag set to retrieve the block pattern - * - * @return array|string - */ - public static function get_theme_step_patterns_from_step( $step, $squash = false ) { - $active_theme = Themes::get_active_theme(); - - if ( ! isset( self::get_theme_step_patterns()[ $active_theme ][ $step ] ) ) { - return false; - } - - $pattern_slugs = self::get_theme_step_patterns()[ $active_theme ][ $step ]; - - foreach ( array_keys( $pattern_slugs ) as $pattern_slug ) { - if ( true !== $pattern_slugs[ $pattern_slug ]['active'] ) { - continue; - } - if ( isset( $pattern_slugs[ $pattern_slug ]['replace'] ) && true === $pattern_slugs[ $pattern_slug ]['replace'] ) { - $pattern_slug_data = $pattern_slugs[ $pattern_slug ]; - $header_menu_slug = self::get_selected_header_from_flow_data(); - $pattern_slug = ( ! empty( $header_menu_slug ) ) ? $header_menu_slug : $pattern_slug; - $pattern_slugs[ $pattern_slug ] = $pattern_slug_data; - } - - if ( isset( $pattern_slugs[ $pattern_slug ]['wonder_blocks'] ) && WonderBlocksService::is_enabled() ) { - $pattern_full_slug = WonderBlocksService::add_prefix_to_name( $pattern_slugs[ $pattern_slug ]['wonder_blocks'] ); - } else { - $pattern_full_slug = $active_theme . '/' . $pattern_slug; - } - - $pattern = self::get_pattern_from_slug( $pattern_full_slug ); - if ( ! $pattern ) { - continue; - } - - if ( false !== stripos( $pattern_slug, 'split' ) ) { - $pattern['content'] = self::replace_split_menu_items( $pattern['content'] ); - } - - if ( ! $squash ) { - $block_patterns[] = array_merge( - $pattern, - $pattern_slugs[ $pattern_slug ] - ); - continue; - } - $block_patterns .= self::cleanup_wp_grammar( $pattern['content'] ); - } - - if ( isset( self::get_theme_step_filters()[ $active_theme ][ $step ] ) ) { - $step_filter = self::get_theme_step_filters()[ $active_theme ][ $step ]; - $theme_step_callback = isset( $step_filter ) ? $step_filter : false; - if ( is_callable( $theme_step_callback ) ) { - return $theme_step_callback( $block_patterns ); - } - } - - return $block_patterns; - } - - /** - * Retrieve Homepage Menu Step Patterns - * - * @param array $patterns Step Patterns Data - * @return array - */ - private static function filter_yith_wonder_homepage_patterns( $patterns ) { - $header_content = ''; - $homepage_style_slugs = array(); - $footer_content = ''; - - foreach ( $patterns as $index_key => $slug ) { - if ( in_array( 'yith-wonder-site-header', $slug['categories'], true ) ) { - $header_content = $slug['content']; - continue; - } - if ( in_array( 'yith-wonder-pages', $slug['categories'], true ) ) { - array_push( $homepage_style_slugs, $slug ); - } - if ( in_array( 'yith-wonder-site-footer', $slug['categories'], true ) ) { - $footer_content = $slug['content']; - continue; - } - } - - foreach ( $homepage_style_slugs as $key => $homepage_style ) { - $homepage_style_slugs[ $key ]['content'] = $header_content . $homepage_style['content'] . $footer_content; - } - - return $homepage_style_slugs; - } - - /** - * Retrieve Header Menu Step Patterns - * - * @param array $patterns Step Patterns Data - * @return array - */ - private static function filter_yith_wonder_headermenu_patterns( $patterns ) { - $body_content = ''; - $header_menu_slugs = array(); - foreach ( $patterns as $pattern_details ) { - if ( in_array( 'yith-wonder-site-header', $pattern_details['categories'], true ) ) { - $header_menu_slugs['pageHeaders'][] = $pattern_details; - } else { - $body_content .= $pattern_details['content']; - $header_menu_slugs['pageBody'] = $body_content; - } - } - return $header_menu_slugs; - } - - /** - * Retrieve Pattern Count. - * - * @return array - */ - public static function get_count_of_patterns() { - $active_theme = Themes::get_active_theme(); - $theme_step_patterns = self::get_theme_step_patterns(); - $active_theme_patterns = isset( $theme_step_patterns[ $active_theme ] ) ? $theme_step_patterns[ $active_theme ] : array(); - - $theme_pattern_count = array(); - foreach ( $active_theme_patterns as $theme_step => $patterns ) { - $theme_step_count = 0; - $combine_styles = 1; - foreach ( $patterns as $pattern => $pattern_data ) { - if ( isset( $pattern_data['shown'] ) && true === $pattern_data['shown'] ) { - ++$theme_step_count; - } - if ( isset( $pattern_data['combine'] ) && true === $pattern_data['combine'] ) { - $combine_styles = count( \WP_Theme_JSON_Resolver::get_style_variations() ) + 1; - } - } - - $theme_pattern_count[ $theme_step ] = array( - 'previewCount' => $combine_styles * $theme_step_count, - ); - } - return $theme_pattern_count; - } - -} diff --git a/includes/Data/Plugins.php b/includes/Data/Plugins.php deleted file mode 100644 index 62b3bca47..000000000 --- a/includes/Data/Plugins.php +++ /dev/null @@ -1,236 +0,0 @@ - contains a Key 'default' and a list of Key 's. - * Key => 'default' contains a list of default plugin installs for . - * Key => contains a list of plugins to be installed for a particular . - * - * The final queue of Plugins to be installed makes use of a max heap and hence the greater the number the earlier - * a Plugin will be placed for install in the queue. This will also allow us to - * prevent entering negative numbers when queueing a plugin for earlier installs. - * - * @var array - */ - protected static $init_list = array( - 'default' => array( - array( - 'slug' => 'nfd_slug_endurance_page_cache', - 'activate' => false, - 'priority' => 240, - ), - array( - 'slug' => 'jetpack', - 'activate' => false, - 'priority' => 220, - ), - array( - 'slug' => 'wordpress-seo', - 'activate' => false, - 'priority' => 200, - ), - array( - 'slug' => 'wpforms-lite', - 'activate' => false, - 'priority' => 180, - ), - array( - 'slug' => 'google-analytics-for-wordpress', - 'activate' => false, - 'priority' => 160, - ), - array( - 'slug' => 'optinmonster', - 'activate' => false, - 'priority' => 140, - ), - ), - 'ecommerce' => array( - 'default' => array( - array( - 'slug' => 'woocommerce', - 'activate' => false, - 'priority' => 260, - ), - ), - 'bluehost' => array( - 'wc_standard' => array( - array( - 'slug' => 'nfd_slug_yith_woocommerce_customize_myaccount_page', - 'activate' => false, - 'priority' => 257, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_gift_cards', - 'activate' => false, - 'priority' => 100, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_wishlist', - 'activate' => false, - 'priority' => 80, - ), - array( - 'slug' => 'nfd_slug_yith_shippo_shippings_for_woocommerce', - 'activate' => false, - 'priority' => 259, - ), - array( - 'slug' => 'nfd_slug_yith_paypal_payments_for_woocommerce', - 'activate' => false, - 'priority' => 258, - ), - ), - 'wc_premium' => array( - array( - 'slug' => 'nfd_slug_yith_woocommerce_customize_myaccount_page', - 'activate' => false, - 'priority' => 257, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_gift_cards', - 'activate' => false, - 'priority' => 100, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_wishlist', - 'activate' => false, - 'priority' => 80, - ), - array( - 'slug' => 'nfd_slug_yith_shippo_shippings_for_woocommerce', - 'activate' => false, - 'priority' => 259, - ), - array( - 'slug' => 'nfd_slug_yith_paypal_payments_for_woocommerce', - 'activate' => false, - 'priority' => 258, - ), - array( - 'slug' => 'nfd_slug_ecomdash_wordpress_plugin', - 'activate' => false, - 'priority' => 20, - ), - ), - 'wc_priority' => array( - array( - 'slug' => 'nfd_slug_yith_shippo_shippings_for_woocommerce', - 'activate' => false, - 'priority' => 259, - ), - array( - 'slug' => 'nfd_slug_yith_paypal_payments_for_woocommerce', - 'activate' => false, - 'priority' => 258, - ), - ), - ), - 'bluehost-india' => array( - 'wc_standard' => array( - array( - 'slug' => 'nfd_slug_yith_woocommerce_customize_myaccount_page', - 'activate' => false, - 'priority' => 257, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_gift_cards', - 'activate' => false, - 'priority' => 100, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_wishlist', - 'activate' => false, - 'priority' => 80, - ), - array( - 'slug' => 'nfd_slug_woo_razorpay', - 'activate' => false, - 'priority' => 258, - ), - ), - 'wc_premium' => array( - array( - 'slug' => 'nfd_slug_yith_woocommerce_customize_myaccount_page', - 'activate' => false, - 'priority' => 257, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_gift_cards', - 'activate' => false, - 'priority' => 100, - ), - array( - 'slug' => 'nfd_slug_yith_woocommerce_wishlist', - 'activate' => false, - 'priority' => 80, - ), - array( - 'slug' => 'nfd_slug_woo_razorpay', - 'activate' => false, - 'priority' => 258, - ), - array( - 'slug' => 'nfd_slug_ecomdash_wordpress_plugin', - 'activate' => false, - 'priority' => 20, - ), - ), - 'wc_priority' => array(), - ), - 'crazy-domains' => array( - 'wc_priority' => array( - array( - 'slug' => 'nfd_slug_yith_shippo_shippings_for_woocommerce', - 'activate' => false, - 'priority' => 259, - ), - array( - 'slug' => 'nfd_slug_yith_paypal_payments_for_woocommerce', - 'activate' => false, - 'priority' => 258, - ), - ), - ), - ), - ); - - /** - * Get the list of initial plugins to be installed for a particular hosting plan. - * - * @return array - */ - public static function get_init() { - $plan_data = Data::current_plan(); - $plan_flow = $plan_data['flow']; - $plan_subtype = $plan_data['subtype']; - $init_list = self::$init_list['default']; - if ( $plan_flow && isset( self::$init_list[ $plan_flow ] ) ) { - if ( isset( self::$init_list[ $plan_flow ]['default'] ) ) { - $init_list = array_merge( $init_list, self::$init_list[ $plan_flow ]['default'] ); - } - $current_brand = Data::current_brand()['brand']; - if ( 'default' !== $plan_subtype && isset( self::$init_list[ $plan_flow ][ $current_brand ][ $plan_subtype ] ) ) { - $init_list = array_merge( $init_list, self::$init_list[ $plan_flow ][ $current_brand ][ $plan_subtype ] ); - } - } - - return $init_list; - } - - /** - * Prevent redirect to woo wizard after activation of woocommerce. - * - * @return void - */ - public static function wc_prevent_redirect_on_activation() { - \delete_transient( '_wc_activation_redirect' ); - } - -} diff --git a/includes/Data/Preview.php b/includes/Data/Preview.php deleted file mode 100644 index 91c03f36b..000000000 --- a/includes/Data/Preview.php +++ /dev/null @@ -1,73 +0,0 @@ - array( - 'themes' => array( - 'nfd_slug_yith_wonder' => self::boolean_to_status( ThemeInstaller::is_theme_active( $theme_map['nfd_slugs']['nfd_slug_yith_wonder']['stylesheet'] ) ), - ), - ), - 'ecommerce' => array( - 'themes' => array( - 'nfd_slug_yith_wonder' => self::boolean_to_status( ThemeInstaller::is_theme_active( $theme_map['nfd_slugs']['nfd_slug_yith_wonder']['stylesheet'] ) ), - ), - ), - ); - } - - /** - * Get the pre requisites for a given flow. - * - * @param string $flow A valid Onboarding flow. - * @return array - */ - public static function get_pre_requisites( $flow = null ) { - $pre_requisites = self::pre_requisites(); - if ( ! isset( $flow ) ) { - $flow = Data::current_flow(); - } - return isset( $pre_requisites[ $flow ] ) ? $pre_requisites[ $flow ] : array(); - } - - /** - * Get all the settings necessary to load the live preview - * - * @return array - */ - public static function get_settings() { - $block_editor_context = new \WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) ); - $custom_settings = array( - 'siteUrl' => \site_url(), - ); - - return array( - 'settings' => \get_block_editor_settings( $custom_settings, $block_editor_context ), - 'globalStyles' => \wp_get_global_styles(), - 'preRequisites' => self::get_pre_requisites(), - ); - } -} diff --git a/includes/Data/SiteFeatures.php b/includes/Data/SiteFeatures.php deleted file mode 100644 index 6cb14cf94..000000000 --- a/includes/Data/SiteFeatures.php +++ /dev/null @@ -1,332 +0,0 @@ - array( - 'default' => array( - 'jetpack' => array( - 'slug' => 'jetpack', - 'icon' => '--site-features-security', - 'title' => __( 'Security, Speed & Growth', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Jetpack', 'wp-module-onboarding' ), - 'desc' => __( 'Jetpack includes dozens of powerful, unique capabilities for your WordPress sites from Automattic.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'wpforms-lite' => array( - 'slug' => 'wpforms-lite', - 'icon' => '--site-features-form', - 'title' => __( 'Forms', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by WP Forms', 'wp-module-onboarding' ), - 'desc' => __( 'Five million people build smarter forms and surveys with WPForms from Awesome Motive.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'google-analytics-for-wordpress' => array( - 'slug' => 'google-analytics-for-wordpress', - 'icon' => '--site-features-analytics', - 'title' => __( 'Site Traffic', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by MonsterInsights', 'wp-module-onboarding' ), - 'desc' => __( 'See the opportunities in your website analytics traffic data using MonsterInsights from Awesome Motive.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'wordpress-seo' => array( - 'slug' => 'wordpress-seo', - 'icon' => '--site-features-share', - 'title' => __( 'Search Engine Optimization', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Yoast', 'wp-module-onboarding' ), - 'desc' => __( 'Get more traffic to your WordPress site with powerful analysis and tools from our colleagues at Yoast.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'creative-mail-by-constant-contact' => array( - 'slug' => 'creative-mail-by-constant-contact', - 'icon' => '--site-features-email', - 'title' => __( 'Email Newsletters', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Creative Email', 'wp-module-onboarding' ), - 'desc' => __( 'A professional logo builder, marketing automations with WooCommerce and social management -- CreativeMail is a whole lot more than mail from Constant Contact.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'optinmonster' => array( - 'slug' => 'optinmonster', - 'icon' => '--site-features-lead', - 'title' => __( 'Lead Generation', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Optin Monster', 'wp-module-onboarding' ), - 'desc' => __( 'Connect with website visitors using a proven kit of tools for growth using this offering from Awesome Motive.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - ), - ), - 'ecommerce' => array( - 'default' => array( - 'jetpack' => array( - 'slug' => 'jetpack', - 'icon' => '--site-features-security', - 'title' => __( 'Security, Speed & Growth', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Jetpack', 'wp-module-onboarding' ), - 'desc' => __( 'Jetpack includes dozens of powerful, unique capabilities for your WordPress sites from Automattic.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'wpforms-lite' => array( - 'slug' => 'wpforms-lite', - 'icon' => '--site-features-form', - 'title' => __( 'Forms', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by WP Forms', 'wp-module-onboarding' ), - 'desc' => __( 'Five million people build smarter forms and surveys with WPForms from Awesome Motive.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'google-analytics-for-wordpress' => array( - 'slug' => 'google-analytics-for-wordpress', - 'icon' => '--site-features-analytics', - 'title' => __( 'Site Traffic', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by MonsterInsights', 'wp-module-onboarding' ), - 'desc' => __( 'See the opportunities in your website analytics traffic data using MonsterInsights from Awesome Motive.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'wordpress-seo' => array( - 'slug' => 'wordpress-seo', - 'icon' => '--site-features-share', - 'title' => __( 'Search Engine Optimization', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Yoast', 'wp-module-onboarding' ), - 'desc' => __( 'Get more traffic to your WordPress site with powerful analysis and tools from our colleagues at Yoast.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'creative-mail-by-constant-contact' => array( - 'slug' => 'creative-mail-by-constant-contact', - 'icon' => '--site-features-email', - 'title' => __( 'Email Newsletters', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Creative Email', 'wp-module-onboarding' ), - 'desc' => __( 'A professional logo builder, marketing automations with WooCommerce and social management -- CreativeMail is a whole lot more than mail from Constant Contact.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'optinmonster' => array( - 'slug' => 'optinmonster', - 'icon' => '--site-features-lead', - 'title' => __( 'Lead Generation', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by Optin Monster', 'wp-module-onboarding' ), - 'desc' => __( 'Connect with website visitors using a proven kit of tools for growth using this offering from Awesome Motive.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - ), - 'wc_standard' => array( - 'yith-woocommerce-ajax-search' => array( - 'slug' => 'yith-woocommerce-ajax-search', - 'icon' => '--site-features-search', - 'title' => __( 'Enhanced Product Search', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Give your visitors great search experiences with this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'nfd_slug_yith_woocommerce_ajax_product_filter' => array( - 'slug' => 'nfd_slug_yith_woocommerce_ajax_product_filter', - 'icon' => '--site-features-filter', - 'title' => __( 'Enhanced Product Filters', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Give your visitors powerful tools to discover your great products with this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'nfd_slug_yith_woocommerce_booking' => array( - 'slug' => 'nfd_slug_yith_woocommerce_booking', - 'icon' => '--site-features-bookingcalendar', - 'title' => __( 'Bookings & Appointments', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Have visitors book meetings and services with you, accepting payment and more using this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'nfd_slug_yith_woocommerce_wishlist' => array( - 'slug' => 'nfd_slug_yith_woocommerce_wishlist', - 'icon' => '--site-features-wishlist', - 'title' => __( 'Product Wishlists', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Let discerning shoppers curate their selections with a system of favorites using this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - ), - 'wc_premium' => array( - 'yith-woocommerce-ajax-search' => array( - 'slug' => 'yith-woocommerce-ajax-search', - 'icon' => '--site-features-search', - 'title' => __( 'Enhanced Product Search', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Give your visitors great search experiences with this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'nfd_slug_yith_woocommerce_ajax_product_filter' => array( - 'slug' => 'nfd_slug_yith_woocommerce_ajax_product_filter', - 'icon' => '--site-features-filter', - 'title' => __( 'Enhanced Product Filters', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Give your visitors powerful tools to discover your great products with this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'nfd_slug_yith_woocommerce_booking' => array( - 'slug' => 'nfd_slug_yith_woocommerce_booking', - 'icon' => '--site-features-bookingcalendar', - 'title' => __( 'Bookings & Appointments', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Have visitors book meetings and services with you, accepting payment and more using this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - 'nfd_slug_yith_woocommerce_wishlist' => array( - 'slug' => 'nfd_slug_yith_woocommerce_wishlist', - 'icon' => '--site-features-wishlist', - 'title' => __( 'Product Wishlists', 'wp-module-onboarding' ), - 'subtitle' => __( 'Powered by YITH', 'wp-module-onboarding' ), - 'desc' => __( 'Let discerning shoppers curate their selections with a system of favorites using this exclusive offering from our colleagues at YITH.', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'activate' => false, - ), - ), - 'wc_priority' => array(), - ), - ); - } - - /** - * Retrieves all the site features for a particular flow and plan. - * - * @return array - */ - public static function get() { - $plan_data = Data::current_plan(); - $plan_flow = $plan_data['flow']; - $plan_subtype = $plan_data['subtype']; - $site_features_flow_plan_map = self::get_site_features_flow_plan_map(); - - $site_features = array(); - if ( $plan_flow && isset( $site_features_flow_plan_map[ $plan_flow ] ) ) { - if ( isset( $site_features_flow_plan_map[ $plan_flow ]['default'] ) ) { - $site_features = array_merge( $site_features, $site_features_flow_plan_map[ $plan_flow ]['default'] ); - } - if ( 'default' !== $plan_subtype && isset( $site_features_flow_plan_map[ $plan_flow ][ $plan_subtype ] ) ) { - $site_features = array_merge( $site_features, $site_features_flow_plan_map[ $plan_flow ][ $plan_subtype ] ); - } - } - return $site_features; - } - - /** - * Retrieves all the site features for a particular flow and plan, marks - * each one as selected based on whether it has already been installed - * or is in the install queue. - * - * @return array - */ - public static function get_with_selections() { - $site_features = self::get(); - if ( empty( $site_features ) ) { - return array(); - } - - $installed_plugins = Plugins::get_init(); - foreach ( $installed_plugins as $installed_plugin ) { - if ( isset( $site_features[ $installed_plugin['slug'] ] ) ) { - $site_features[ $installed_plugin['slug'] ]['selected'] = true; - } - } - - return $site_features; - } - - /** - * Get the initial list of site features for a given plan. - * - * @return array - */ - public static function get_init() { - $site_features_init_list = array(); - $site_features = self::get(); - - foreach ( $site_features as $site_feature ) { - $site_features_init_list[] = array( - 'slug' => $site_feature['slug'], - 'activate' => $site_feature['activate'], - ); - } - - return $site_features_init_list; - } - - /** - * Filters out selected site features from a plugin list. - * - * @param array $plugins List of plugins. - * @return array - */ - public static function filter_selected( $plugins ) { - $selected_plugins = array(); - - $flow_data = FlowService::read_data_from_wp_option( false ); - if ( empty( $flow_data['data']['siteFeatures'] ) ) { - return $plugins; - } - - $flow_data_site_features = $flow_data['data']['siteFeatures']; - foreach ( $plugins as $plugin ) { - if ( ! isset( $flow_data_site_features[ $plugin['slug'] ] ) || true === $flow_data_site_features[ $plugin['slug'] ] ) { - $selected_plugins[] = $plugin; - } - } - - return $selected_plugins; - } - - /** - * Get only the selected plugins from site features init list. - * - * @return array - */ - public static function get_selected() { - return self::filter_selected( self::get_init() ); - } - -} diff --git a/includes/Data/Themes.php b/includes/Data/Themes.php deleted file mode 100644 index e786b75a3..000000000 --- a/includes/Data/Themes.php +++ /dev/null @@ -1,107 +0,0 @@ - 'yith-wonder', - 'ecommerce' => 'yith-wonder', - ); - - /** - * Key 'default' contains a list of default themes to be installed irrespective of the plan. - * Key contains a Key 'default' and a list of Key 's. - * Key => 'default' contains a list of default theme installs for . - * Key => contains a list of themes to be installed for a particular . - * - * The final queue of themes to be installed makes use of a max heap and hence the greater the number the earlier - * a theme will be placed for install in the queue. This will also allow us to - * prevent entering negative numbers when queueing a theme for earlier installs. - * - * @var array Initial themes to be installed classified based on the hosting plan. - */ - protected static $init_list = array( - 'default' => array(), - 'wp-setup' => array( - 'default' => array( - array( - 'slug' => 'nfd_slug_yith_wonder', - 'activate' => true, - 'priority' => 20, - ), - ), - ), - 'ecommerce' => array( - 'default' => array( - array( - 'slug' => 'nfd_slug_yith_wonder', - 'activate' => true, - 'priority' => 20, - ), - ), - ), - ); - - /** - * Get the number of previews that will be fetched in each step. - * This helps us show the number of necessary skeletons in the front end. - * - * @return array - */ - public static function step_preview_data() { - $theme_step_data = Patterns::get_count_of_patterns(); - $site_features = count( SiteFeatures::get() ); - $theme_step_data['site-features']['previewCount'] = $site_features; - return $theme_step_data; - } - - /** - * Get a list of initial themes to be installed for a particular hosting plan. - * - * @return array - */ - public static function get_init() { - $plan_data = Data::current_plan(); - $plan_flow = $plan_data['flow']; - $plan_subtype = $plan_data['subtype']; - $init_list = self::$init_list['default']; - if ( $plan_flow && isset( self::$init_list[ $plan_flow ] ) ) { - if ( isset( self::$init_list[ $plan_flow ]['default'] ) ) { - $init_list = array_merge( $init_list, self::$init_list[ $plan_flow ]['default'] ); - } - if ( 'default' !== $plan_subtype && isset( self::$init_list[ $plan_flow ][ $plan_subtype ] ) ) { - $init_list = array_merge( $init_list, self::$init_list[ $plan_flow ][ $plan_subtype ] ); - } - } - - return $init_list; - } - - /** - * Get the default necessary theme for a particular flow. - * This is temporary, as we implement theme selections we can remove this. - * - * @param string $flow The flow to get the theme for. - * @return string|boolean - */ - public static function get_flow_default_theme_slug( $flow ) { - return isset( self::$flow_default_theme_slugs[ $flow ] ) ? self::$flow_default_theme_slugs[ $flow ] : false; - } - - /** - * Get the active theme on the site. - * - * @return string - */ - public static function get_active_theme() { - return ( \wp_get_theme() )->get( 'TextDomain' ); - } -} diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php deleted file mode 100644 index 3755c163a..000000000 --- a/includes/Data/Themes/Colors.php +++ /dev/null @@ -1,175 +0,0 @@ - array( - 'tailored' => array( - 'calm' => array( - 'header-background' => '#1A4733', - 'header-foreground' => '#FFFFFF', - 'header-titles' => '#FFFFFF', - 'secondary-background' => '#1A4733', - 'secondary-foreground' => '#FFF', - 'tertiary' => '#C7DBFF', - 'secondary' => '#344A77', - 'primary' => '#1A4733', - 'base' => '#FFFFFF', - ), - 'cool' => array( - 'header-background' => '#C7DBFF', - 'header-foreground' => '#21447B', - 'header-titles' => '#21447B', - 'secondary-background' => '#C7DBFF', - 'secondary-foreground' => '#21447B', - 'tertiary' => '#C7DBFF', - 'secondary' => '#3764B4', - 'primary' => '#21447B', - 'base' => '#FFFFFF', - ), - 'warm' => array( - 'header-background' => '#FDE5D0', - 'header-foreground' => '#7A3921', - 'header-titles' => '#7A3921', - 'secondary-background' => '#FDE5D0', - 'secondary-foreground' => '#7A3921', - 'tertiary' => '#FFEDED', - 'secondary' => '#B97040', - 'primary' => '#7A3921', - 'base' => '#FFFFFF', - ), - 'radiant' => array( - 'header-background' => '#63156A', - 'header-foreground' => '#E3F7FF', - 'header-titles' => '#E3F7FF', - 'secondary-background' => '#781980', - 'secondary-foreground' => '#E3F7FF', - 'tertiary' => '#C7F0FF', - 'secondary' => '#64288C', - 'primary' => '#63156A', - 'base' => '#FFFFFF', - ), - 'bold' => array( - 'header-background' => '#FFD7F1', - 'header-foreground' => '#09857C', - 'header-titles' => '#09857C', - 'secondary-background' => '#ffddf3', - 'secondary-foreground' => '#09857C', - 'tertiary' => '#F2A3D6', - 'secondary' => '#076D66', - 'primary' => '#09857C', - 'base' => '#FFFFFF', - ), - 'retro' => array( - 'header-background' => '#096385', - 'header-foreground' => '#F2E6A2', - 'header-titles' => '#F2E6A2', - 'secondary-background' => '#096385', - 'secondary-foreground' => '#F2E6A2', - 'tertiary' => '#F2E6A2', - 'secondary' => '#BE9E00', - 'primary' => '#096385', - 'base' => '#FFFFFF', - ), - 'professional' => array( - 'header-background' => '#6D8258', - 'header-foreground' => '#F5FAFF', - 'header-titles' => '#D2E0F5', - 'secondary-background' => '#6D8258', - 'secondary-foreground' => '#F5FAFF', - 'tertiary' => '#d6e4f9', - 'secondary' => '#405F1C', - 'primary' => '#558320', - 'base' => '#FFFFFF', - ), - 'crisp' => array( - 'header-background' => '#ccc', - 'header-foreground' => '#333', - 'header-titles' => '#234', - 'secondary-background' => '#ccc', - 'secondary-foreground' => '#333', - 'tertiary' => '#777', - 'secondary' => '#17222E', - 'primary' => '#223344', - 'base' => '#FFFFFF', - ), - 'polished' => array( - 'header-background' => '#313131', - 'header-foreground' => '#fff', - 'header-titles' => '#6B69EA', - 'secondary-background' => '#444', - 'secondary-foreground' => '#ddd', - 'tertiary' => '#313131', - 'secondary' => '#6B69EA', - 'primary' => '#5100FA', - 'base' => '#FFFFFF', - ), - 'nightowl' => array( - 'header-background' => '#06080A', - 'header-foreground' => '#fff', - 'header-titles' => '#FAAA14', - 'secondary-background' => '#0A0C0E', - 'secondary-foreground' => '#fff', - 'tertiary' => '#FFDFA3', - 'secondary' => '#06080A', - 'primary' => '#B97900', - 'base' => '#FFFFFF', - ), - 'subtle' => array( - 'header-background' => '#C7ADBB', - 'header-foreground' => '#5A3C4B', - 'header-titles' => '#5A3C4B', - 'secondary-background' => '#C7ADBB', - 'secondary-foreground' => '#5A3C4B', - 'tertiary' => '#D4C9CF', - 'secondary' => '#57203c', - 'primary' => '#5A3C4B', - 'base' => '#FFFFFF', - ), - ), - 'custom-picker-grouping' => array( - 'base' => array( - 'header-foreground', - 'header-titles', - 'secondary-foreground', - ), - 'tertiary' => array( - 'header-background', - 'secondary-background', - ), - ), - ), - ); - - /** - * Retrieves the active theme color variations. - * - * @return array|\WP_Error - */ - public static function get_colors_from_theme() { - $active_theme = Themes::get_active_theme(); - $pattern_slugs = self::$theme_colors[ $active_theme ]; - - if ( ! isset( $pattern_slugs ) ) { - return new \WP_Error( - 'Theme Colors not found', - 'No WordPress Colors are available for this theme.', - array( 'status' => 404 ) - ); - } - - return $pattern_slugs; - } -} diff --git a/includes/Data/Themes/Fonts.php b/includes/Data/Themes/Fonts.php deleted file mode 100644 index 06944448d..000000000 --- a/includes/Data/Themes/Fonts.php +++ /dev/null @@ -1,223 +0,0 @@ - array( - 'modern-approachable' => array( - 'label' => 'Modern & approachable', - 'matches' => 'yith-wonder/theme-json', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--mulish)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--poppins)', - ), - ), - ), - ), - ), - 'strong-sleek' => array( - 'label' => 'Strong & sleek', - 'matches' => 'yith-wonder/styles/01-blue-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--raleway)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--oswald)', - ), - ), - ), - ), - ), - 'stately-elevated' => array( - 'label' => 'Stately & elevated', - 'matches' => 'yith-wonder/styles/02-pink-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--source-sans-pro)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--playfair)', - ), - ), - ), - ), - ), - 'typewriter-crisp-midcentury' => array( - 'label' => 'Typewriter & crisp midcentury', - 'matches' => 'yith-wonder/styles/03-orange-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--jost)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--solway)', - ), - ), - ), - ), - ), - 'refined-traditional-newsletter' => array( - 'label' => 'Refined traditional newsletter', - 'matches' => 'yith-wonder/styles/04-black-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--jost)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--merriweather)', - ), - ), - ), - ), - ), - 'bold-stamp-slab' => array( - 'label' => 'Bold stamp & slab', - 'matches' => 'yith-wonder/styles/05-red-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--changa-one)', - ), - ), - ), - ), - ), - 'fast-simple' => array( - 'label' => 'Fast & Simple', - 'matches' => 'newfold/onboarding-01', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--system)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--system)', - ), - ), - ), - ), - ), - 'timeless-traditional' => array( - 'label' => 'Timeless & Traditional', - 'matches' => 'newfold/onboarding-02', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--serif)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--serif)', - ), - ), - ), - ), - ), - 'sleek-sophisticated' => array( - 'label' => 'Sleek & Sophisticated', - 'matches' => 'newfold/onboarding-03', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--dm-sans)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--dm-sans)', - ), - ), - ), - ), - ), - 'clear-crisp' => array( - 'label' => 'Clear & Crisp', - 'matches' => 'newfold/onboarding-04', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--inter)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--inter)', - ), - ), - ), - ), - ), - 'retro-classy' => array( - 'label' => 'Retro & Classy', - 'matches' => 'newfold/onboarding-05', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--league-spartan)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--league-spartan)', - ), - ), - ), - ), - ), - 'defined-solid' => array( - 'label' => 'Defined & Solid', - 'matches' => 'newfold/onboarding-06', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)', - ), - ), - ), - ), - ), - ), - ); - - /** - * Retrieves the active theme font variations. - * - * @return array|\WP_Error - */ - public static function get_fonts_from_theme() { - $active_theme = Themes::get_active_theme(); - return isset( self::$theme_fonts[ $active_theme ] ) ? self::$theme_fonts[ $active_theme ] : false; - } -} diff --git a/includes/RestApi/FlowController.php b/includes/RestApi/FlowController.php index 6595af946..11f8701e1 100644 --- a/includes/RestApi/FlowController.php +++ b/includes/RestApi/FlowController.php @@ -2,7 +2,7 @@ namespace NewfoldLabs\WP\Module\Onboarding\RestApi; use NewfoldLabs\WP\Module\Onboarding\Permissions; -use NewfoldLabs\WP\Module\Onboarding\Services\FlowService; +use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService; /** diff --git a/includes/RestApi/SitePagesController.php b/includes/RestApi/SitePagesController.php index 8e81fd7e2..53038864e 100644 --- a/includes/RestApi/SitePagesController.php +++ b/includes/RestApi/SitePagesController.php @@ -5,7 +5,7 @@ use NewfoldLabs\WP\Module\Onboarding\Permissions; use NewfoldLabs\WP\Module\Onboarding\Data\Options; use NewfoldLabs\WP\Module\Onboarding\Data\Patterns; -use NewfoldLabs\WP\Module\Onboarding\Services\WonderBlocksService; +use NewfoldLabs\WP\Module\Onboarding\Data\Services\WonderBlocksService; /** * Class SitePagesController diff --git a/includes/Services/FlowService.php b/includes/Services/FlowService.php deleted file mode 100644 index db6794b42..000000000 --- a/includes/Services/FlowService.php +++ /dev/null @@ -1,394 +0,0 @@ -maybe_upgrade(); - if ( $upgrade_status ) { - $data = self::read_data_from_wp_option(); - $updated_data = self::update_data_recursive( $default_data, $data ); - // To update the options with the recent version of flow data - $updated_data['version'] = $default_data['version']; - return self::update_data_in_wp_option( $updated_data ); - } - - return false; - } - - /** - * Set Primary Type Site Classification Option. - * - * @return void - */ - public static function set_primary_type_for_ecommerce() { - $flow_type = Data::current_flow(); - if ( 'ecommerce' === $flow_type ) { - $primary_type = new PrimaryType( 'slug', 'business' ); - $primary_type->save(); - } - } - - /** - * Default Blueprint Data set based on the flow type. - * - * @return array - */ - public static function get_default_data() { - // check if data is available in the database if not then fetch the default dataset - $data = Flows::get_data(); - $data['createdAt'] = time(); - $data = self::update_data_for_ecommerce( $data ); - return $data; - } - - /** - * Get the Onboarding flow data. - * - * @return array - */ - public static function get_data() { - $result = self::read_data_from_wp_option( false ); - if ( ! $result ) { - $result = self::get_default_data(); - self::update_data_in_wp_option( $result ); - } - return $result; - } - - /** - * Update the Onboarding flow data. - * - * @param array $params The params to update in flow data. - * @return array - */ - public static function update_data( $params ) { - if ( empty( $params ) ) { - return new \WP_Error( - 'no_post_data', - 'No Data Provided', - array( 'status' => 404 ) - ); - } - - $default_data = self::get_default_data(); - // Removes the Data Version to align with the post call data. - unset( $default_data['version'] ); - $data = self::update_post_call_data_recursive( $params, $default_data ); - if ( is_wp_error( $data ) ) { - return $data; - } - - $options_data = self::read_data_from_wp_option(); - - /* - [TODO] Handle this and some of the site name, logo, description logic in a cleaner way. - At least the primary and secondary update does not run on every flow data request. - */ - if ( ! empty( $params['data']['siteType']['primary']['refers'] ) && - $options_data['data']['siteType']['primary']['value'] !== $params['data']['siteType']['primary']['value'] ) { - if ( class_exists( 'NewfoldLabs\WP\Module\Data\SiteClassification\PrimaryType' ) ) { - $primary_type = new PrimaryType( $params['data']['siteType']['primary']['refers'], $params['data']['siteType']['primary']['value'] ); - if ( ! $primary_type->save() ) { - return new \WP_Error( - 'wrong_param_provided', - __( 'Wrong Parameter Provided : primary => value', 'wp-module-onboarding' ), - array( 'status' => 404 ) - ); - } - } - } - - if ( ! empty( $params['data']['siteType']['secondary']['refers'] ) && - $options_data['data']['siteType']['secondary']['value'] !== $params['data']['siteType']['secondary']['value'] ) { - if ( class_exists( 'NewfoldLabs\WP\Module\Data\SiteClassification\SecondaryType' ) ) { - $secondary_type = new SecondaryType( $params['data']['siteType']['secondary']['refers'], $params['data']['siteType']['secondary']['value'] ); - if ( ! $secondary_type->save() ) { - return new \WP_Error( - 'wrong_param_provided', - __( 'Wrong Parameter Provided : secondary => value', 'wp-module-onboarding' ), - array( 'status' => 404 ) - ); - } - } - } - - // Update timestamp every time the Onboarding flow data is updated. - $data['updatedAt'] = time(); - - // Update Blog Information from Basic Info - if ( ( ! empty( $data['data']['blogName'] ) ) ) { - \update_option( Options::get_option_name( 'blog_name', false ), $data['data']['blogName'] ); - } - - if ( ( ! empty( $data['data']['blogDescription'] ) ) ) { - \update_option( Options::get_option_name( 'blog_description', false ), $data['data']['blogDescription'] ); - } - - if ( ( ! empty( $data['data']['siteLogo'] ) ) && ! empty( $data['data']['siteLogo']['id'] ) ) { - \update_option( Options::get_option_name( 'site_icon', false ), $data['data']['siteLogo']['id'] ); - \update_option( Options::get_option_name( 'site_logo', false ), $data['data']['siteLogo']['id'] ); - } else { - \update_option( Options::get_option_name( 'site_icon', false ), 0 ); - \delete_option( Options::get_option_name( 'site_logo', false ) ); - } - - // Add the version key to the $data before updating to options data. - $updated_data = array_merge( array( 'version' => $options_data['version'] ), $data ); - - if ( ! self::update_data_in_wp_option( $updated_data ) ) { - return new \WP_Error( - 'database_update_failed', - 'There was an error saving the data', - array( 'status' => 404 ) - ); - } - - return $data; - } - - /** - * Function to update the Flow Data (Blueprint) in an array recursively in comparison to Flows::get_data() (Database) - * - * @param array $default_data Blueprint Data - * @param array $data WP Options Data - * - * @return array - */ - private static function update_data_recursive( $default_data, $data ) { - $updated_data = array(); - - foreach ( $default_data as $key => $value ) { - // To align the new data OR datatype of the respective values with the one set in the blueprint - if ( ! array_key_exists( $key, $data ) || ( gettype( $value ) !== gettype( $data[ $key ] ) ) ) { - $updated_data[ $key ] = $value; - continue; - } - - // Accepts the value of non array OR empty array values from options - if ( ! is_array( $value ) || ( is_array( $value ) && count( $value ) === 0 ) ) { - $updated_data[ $key ] = $data[ $key ]; - continue; - } - - // To handle Indexed Arrays gracefully - if ( self::is_array_indexed( $value ) ) { - // To check if an Indexed Array is further Nested or Not - foreach ( $value as $index_key => $index_value ) { - // For Indexed Arrays having Non Associative Array Values - ( ! is_array( $index_value ) && isset( $data[ $key ] ) ) ? - $updated_data[ $key ] = $data[ $key ] - : $updated_data[ $key ] = $value; - } - continue; - } - - // To handle Associative Arrays gracefully - $updated_data[ $key ] = self::update_data_recursive( $value, $data[ $key ] ); - } - return $updated_data; - } - - /** - * Function to update the Database recursively based on Values opted or entered by the User - * - * @param array $params Params Data - * @param array $default_data Default Blueprint Data - * - * @return \WP_Error|array - */ - private static function update_post_call_data_recursive( $params, &$default_data ) { - $exception_list = Flows::get_exception_list(); - - foreach ( $default_data as $key => $value ) { - if ( ! array_key_exists( $key, $params ) ) { - return new \WP_Error( - 'param_not_provided', - 'Parameter Not Provided : ' . $key, - array( 'status' => 400 ) - ); - } - - // Verifies the value of Exception List keys from the database and options - if ( isset( $exception_list[ $key ] ) ) { - $default_data[ $key ] = $params[ $key ]; - continue; - } - - // Error thrown if the datatype of the parameter does not match - if ( gettype( $value ) !== gettype( $params[ $key ] ) ) { - return new \WP_Error( - 'wrong_param_type_provided', - 'Wrong Parameter Type Provided : ' . $key . ' => ' . gettype( $params[ $key ] ) . '. Expected: ' . gettype( $value ), - array( 'status' => 400 ) - ); - } - - // Accepts non-Array Values entered by the user or if the Database value is Empty/Indexed Array, to avoid Associative arrays to be overwritten (Eg: data) - if ( ! is_array( $value ) || self::is_array_indexed( $value ) ) { - $default_data[ $key ] = $params[ $key ]; - continue; - } - - // To handle Indexed Arrays gracefully - if ( self::is_array_indexed( $params[ $key ] ) && ! self::is_array_indexed( $value ) && count( $params[ $key ] ) > 0 ) { - // Verify if a value expected as an Associative Array is NOT an Indexed Array - return new \WP_Error( - 'wrong_param_type_provided', - 'Wrong Parameter Type Provided : ' . $key . ' => Indexed Array. Expected: Associative Array', - array( 'status' => 400 ) - ); - } - - // To handle Associative Arrays gracefully - $nested_data = self::update_post_call_data_recursive( $params[ $key ], $value ); - if ( is_wp_error( $nested_data ) ) { - return $nested_data; - } - $default_data[ $key ] = $nested_data; - } - return $default_data; - } - - /** - * Logic to check for an Indexed Array - * - * @param array $array To verify for an Indexed Array - * - * @return boolean - */ - private static function is_array_indexed( $array ) { - return count( array_filter( array_keys( $array ), 'is_string' ) ) === 0; - } - - /** - * Switch the Onboarding flow. - * - * @param string $flow A valid Onboarding flow for a brand. - * @return \WP_Error|boolean - */ - public static function switch_flow( $flow ) { - // Get all the enabled flows for a brand. - $enabled_flows = Flows::get_flows(); - // If the request flow does not exist or is not enabled then return an error. - if ( ! isset( $enabled_flows[ $flow ] ) || true !== $enabled_flows[ $flow ] ) { - return new \WP_Error( - 'nfd_onboarding_error', - 'Flow not enabled.', - array( 'status' => 400 ) - ); - } - - // Reset the Plugin Install Status and Queue. - PluginInstallTaskManager::reset_install_status(); - - // Get the pre requisites for a flow. - $pre_requisites = Preview::get_pre_requisites( $flow ); - if ( ! isset( $pre_requisites ) || ! isset( $pre_requisites['plugins'] ) ) { - return true; - } - - // Install and activate all the required plugins. - foreach ( $pre_requisites['plugins'] as $plugin => $active ) { - // Skip if the plugin installation if it is already active. - if ( 'activated' === $active ) { - continue; - } - - $plugin_install_task = new PluginInstallTask( $plugin, true ); - $status = $plugin_install_task->execute(); - - if ( \is_wp_error( $status ) ) { - return $status; - } - } - - return true; - } - - /** - * Read Onboarding flow data from the wp_option. - * - * @param boolean $include_version Condition to include the data version. - * - * @return array - */ - public static function read_data_from_wp_option( $include_version = true ) { - $data = \get_option( Options::get_option_name( 'flow' ), false ); - // Remove the version data from options for GET Call, refer get_data. - if ( ! $include_version && isset( $data['version'] ) ) { - unset( $data['version'] ); - } - return $data; - } - - /** - * Update flow data params if the current flow is ecommerce. - * - * @param array $data The flow data. - * - * @return array - */ - private static function update_data_for_ecommerce( $data ) { - // get current flow type - $flow_type = Data::current_flow(); - if ( 'ecommerce' === $flow_type ) { - // update default data with ecommerce data - $data['data']['topPriority']['priority1'] = 'selling'; - if ( empty( $data['data']['siteType']['primary']['value'] ) ) { - $data['data']['siteType']['primary']['refers'] = 'slug'; - $data['data']['siteType']['primary']['value'] = 'business'; - } - } - return $data; - } - - /** - * Update Onboarding flow data in the wp_option. - * - * @param array $data flow data. - * - * @return array - */ - private static function update_data_in_wp_option( $data ) { - return \update_option( Options::get_option_name( 'flow' ), $data ); - } -} diff --git a/includes/Services/WonderBlocksService.php b/includes/Services/WonderBlocksService.php deleted file mode 100644 index 39a2bf3e4..000000000 --- a/includes/Services/WonderBlocksService.php +++ /dev/null @@ -1,143 +0,0 @@ - 'templates', - 'slug' => $wonder_blocks_slug, - 'primary_type' => $primary_type->value, - 'secondary_type' => $secondary_type->value, - ) - ); - $template = WonderBlocks::fetch( $request ); - - if ( ! empty( $template ) ) { - $template['categories'] = array( $template['categories'], 'yith-wonder-pages' ); - $template['name'] = $template['slug']; - return array( - 'slug' => $template_slug, - 'title' => $template['title'], - 'content' => $template['content'], - 'name' => $template['name'], - 'meta' => Patterns::get_meta_from_slug( $template_slug ), - 'categories' => $template['categories'], - ); - } - - return false; - } - - /** - * Clear the cache for a template slug fetched via get_template_from_slug. - * - * @param string $template_slug Slug of the template previously fetched via get_template_from_slug. - * @return boolean - */ - public static function delete_templates_cache_from_slug( $template_slug ) { - $wonder_blocks_slug = self::strip_prefix_from_slug( $template_slug ); - - $primary_type = PrimaryType::instantiate_from_option(); - if ( ! $primary_type ) { - return false; - } - $secondary_type = SecondaryType::instantiate_from_option(); - if ( ! $secondary_type ) { - return false; - } - - $request = new WonderBlocksFetchRequest( - array( - 'endpoint' => 'templates', - 'slug' => $wonder_blocks_slug, - 'primary_type' => $primary_type->value, - 'secondary_type' => $secondary_type->value, - ) - ); - - return WonderBlocks::clear_cache( $request ); - } -} diff --git a/includes/WP_Admin.php b/includes/WP_Admin.php index 23f40fcc6..3881b6a2c 100644 --- a/includes/WP_Admin.php +++ b/includes/WP_Admin.php @@ -4,7 +4,7 @@ use NewfoldLabs\WP\Module\Onboarding\Data\Data; use NewfoldLabs\WP\Module\Onboarding\Services\PluginService; use NewfoldLabs\WP\Module\Onboarding\Services\ThemeService; -use NewfoldLabs\WP\Module\Onboarding\Services\FlowService; +use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService; /** * Register Admin Page, Assets & Admin functionality with WordPress. diff --git a/src/Brands/bluehost/step-intersitial.svg b/src/Brands/bluehost/step-intersitial.svg new file mode 100644 index 000000000..69d326ed5 --- /dev/null +++ b/src/Brands/bluehost/step-intersitial.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/OnboardingSPA/chapters/commerce.js b/src/OnboardingSPA/chapters/commerce.js new file mode 100644 index 000000000..e4331ef61 --- /dev/null +++ b/src/OnboardingSPA/chapters/commerce.js @@ -0,0 +1,30 @@ +import { __ } from "@wordpress/i18n"; + +import { CHAPTER_COMMERCE } from "../../constants"; +import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; +import { stepAddress } from "../steps/Ecommerce/StepAddress/step"; +import { stepProducts } from "../steps/Ecommerce/StepProducts/step"; +import { Chapter } from "../data/models/Chapter"; +import { Step } from "../data/models/Step"; +import { ECOMMERCE_FLOW } from "../data/flows/constants"; + +const interstitialStep = new Step( + { + path: `/${ECOMMERCE_FLOW}/step/interstitial`, + Component: ChapterInterstitialLoader + } +) + +const steps = [ + stepAddress, + stepProducts, +] + +export const commerce = new Chapter( + { + id: CHAPTER_COMMERCE, + name: __( 'Commerce', 'wp-module-onboarding' ), + steps, + interstitialSteps: [ interstitialStep ], + } +) diff --git a/src/OnboardingSPA/chapters/demographic.js b/src/OnboardingSPA/chapters/demographic.js new file mode 100644 index 000000000..a95975c32 --- /dev/null +++ b/src/OnboardingSPA/chapters/demographic.js @@ -0,0 +1,38 @@ + +import { __ } from "@wordpress/i18n"; + +import { CHAPTER_DEMOGRAPHIC } from "../../constants"; +import { stepBasicInfo } from "../steps/BasicInfo/step"; +import { stepExperience } from "../steps/GetStarted/GetStartedExperience/step"; +import { stepPrimarySetup } from "../steps/GetStarted/SiteTypeSetup/PrimarySite/step"; +import { stepSecondarySetup } from "../steps/GetStarted/SiteTypeSetup/SecondarySite/step"; +import { stepTopPriority } from "../steps/TopPriority/step"; +import { Chapter } from "../data/models/Chapter"; +import { Step } from "../data/models/Step"; +import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; +import { DEFAULT_FLOW } from "../data/flows/constants"; + +const interstitialStep = new Step( + { + path: `/${DEFAULT_FLOW}/step/interstitial/${CHAPTER_DEMOGRAPHIC}`, + Component: ChapterInterstitialLoader + } +) + +const steps = [ + stepExperience, + stepPrimarySetup, + stepSecondarySetup, + stepBasicInfo, + stepTopPriority, +] + +export const demographic = new Chapter( + { + id: CHAPTER_DEMOGRAPHIC, + name: __( 'Demographic', 'wp-module-onboarding' ), + steps, + interstitialSteps: [ interstitialStep ], + } +) + diff --git a/src/OnboardingSPA/chapters/design.js b/src/OnboardingSPA/chapters/design.js new file mode 100644 index 000000000..05678f7eb --- /dev/null +++ b/src/OnboardingSPA/chapters/design.js @@ -0,0 +1,51 @@ +import { __ } from "@wordpress/i18n"; +// eslint-disable-next-line import/no-extraneous-dependencies +import { filter } from "lodash"; + +import { CHAPTER_DESIGN } from "../../constants"; +import { stepDesignColors } from "../steps/DesignColors/step"; +import { stepDesignThemeStylesMenu } from "../steps/DesignThemeStyles/Menu/step.js"; +import { stepDesignThemeStylesPreview } from "../steps/DesignThemeStyles/Preview/step"; +import { stepDesignTypography } from "../steps/DesignTypography/step"; +import { Chapter } from "../data/models/Chapter"; +import { layoutContent } from "./layoutContent"; +import { Step } from "../data/models/Step"; +import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; +import { DEFAULT_FLOW } from "../data/flows/constants"; + +const interstitialStep = new Step( + { + path: `/${DEFAULT_FLOW}/step/interstitial/${CHAPTER_DESIGN}`, + Component: ChapterInterstitialLoader + } +) + +const steps = [ + stepDesignThemeStylesMenu, + stepDesignThemeStylesPreview, +] + +const conditionalSteps = [ + stepDesignColors, + stepDesignTypography +] + +const initialSteps = filter( [ ...steps, ...conditionalSteps, ...layoutContent.steps ], ( step ) => { + return ( + step.path.includes( '/step/design/' ) && + ! step.path.includes( '/theme-styles/preview' ) + ); +} ); + + + +export const design = new Chapter( + { + id: CHAPTER_DESIGN, + name: __( 'Design', 'wp-module-onboarding' ), + steps, + conditionalSteps, + initialSteps, + interstitialSteps: [ interstitialStep ], + } +) \ No newline at end of file diff --git a/src/OnboardingSPA/chapters/features.js b/src/OnboardingSPA/chapters/features.js new file mode 100644 index 000000000..d578a41fd --- /dev/null +++ b/src/OnboardingSPA/chapters/features.js @@ -0,0 +1,17 @@ +import { __ } from "@wordpress/i18n"; + +import { CHAPTER_FEATURES } from "../../constants"; +import { stepSiteFeatures } from "../steps/SiteFeatures/step"; +import { Chapter } from "../data/models/Chapter"; + +const steps = [ + stepSiteFeatures, +] + +export const features = new Chapter( + { + id: CHAPTER_FEATURES, + name: __( 'Features', 'wp-module-onboarding' ), + steps: steps, + } +) \ No newline at end of file diff --git a/src/OnboardingSPA/chapters/layoutContent.js b/src/OnboardingSPA/chapters/layoutContent.js new file mode 100644 index 000000000..df0e071c4 --- /dev/null +++ b/src/OnboardingSPA/chapters/layoutContent.js @@ -0,0 +1,32 @@ +import { __ } from "@wordpress/i18n"; + +import { CHAPTER_LAYOUT_AND_CONTENT } from "../../constants"; +import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; +import { stepDesignHeaderMenu } from "../steps/DesignHeaderMenu/step"; +import { stepDesignHomepageMenu } from "../steps/DesignHomepageMenu/step"; +import { stepSitePages } from "../steps/SitePages/step"; +import { Chapter } from "../data/models/Chapter"; +import { Step } from "../data/models/Step"; +import { DEFAULT_FLOW } from "../data/flows/constants"; + +const interstitialStep = new Step( + { + path: `/${DEFAULT_FLOW}/step/interstitial/${CHAPTER_LAYOUT_AND_CONTENT}`, + Component: ChapterInterstitialLoader + } +) + +const steps = [ + stepDesignHeaderMenu, + stepDesignHomepageMenu, + stepSitePages, +] + +export const layoutContent = new Chapter( + { + id: CHAPTER_LAYOUT_AND_CONTENT, + name: __( 'Layout & Content', 'wp-module-onboarding' ), + steps, + interstitialSteps: [ interstitialStep ], + } +) \ No newline at end of file diff --git a/src/OnboardingSPA/chapters/utils.js b/src/OnboardingSPA/chapters/utils.js new file mode 100644 index 000000000..9f3a75f16 --- /dev/null +++ b/src/OnboardingSPA/chapters/utils.js @@ -0,0 +1,90 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { filter } from "lodash"; + +import { addAfterChapter } from "../data/flows/utils"; +import { commerce } from "./commerce" +import { demographic } from "./demographic"; +import { design } from "./design" +import { features } from "./features"; +import { layoutContent } from "./layoutContent" + +const chapters = [ demographic, commerce, design, layoutContent, features ]; + +const getTopPriorityChapter = ( topPriority ) => { + const topPriorityToChapterMap = { + publishing: layoutContent, + selling: commerce, + designing: design + } + return topPriorityToChapterMap[ topPriority ]; +} + +export const getChaptersFromTopPriorityAndExperienceLevel = ( initialChapters, topPriority, experienceLevel ) => { + const topPriorityChapter = getTopPriorityChapter( topPriority ); + let finalChapters; + switch( experienceLevel ) { + case '1': + finalChapters = filter( initialChapters, ( chapter ) => { + return chapter.id !== topPriorityChapter.id + } ) + finalChapters = addAfterChapter( + finalChapters, + demographic, + topPriorityChapter + ) + break; + case '3': + finalChapters = filter( initialChapters, ( chapter ) => { + return ( chapter.id !== topPriorityChapter.id && ( chapter.id === features.id || chapter.id === demographic.id ) ) + } ) + finalChapters = addAfterChapter( + finalChapters, + demographic, + topPriorityChapter + ) + break; + case '5': + finalChapters = filter( initialChapters, ( chapter ) => { + return ( chapter.id !== topPriorityChapter.id && ( chapter.id === features.id || chapter.id === demographic.id ) ) + } ) + break; + default: + finalChapters = filter( initialChapters, ( chapter ) => { + return chapter.id !== topPriorityChapter.id + } ) + finalChapters = addAfterChapter( + finalChapters, + demographic, + topPriorityChapter + ) + } + + return finalChapters; +} + +export const getChapterFromId = ( id ) => { + return chapters.filter( (chapter) => { + return chapter.id === id + } ); +} + +export const stateToStore = ( state, store, currentStep ) => { + const dataToBeStored = {}; + state.forEach( ( chapter ) => { + if ( store[ chapter.id ] ) { + return ( dataToBeStored[ chapter.id ] = + store[ chapter.id ] ); + } + + return ( dataToBeStored[ chapter.id ] = { + completed: false, + firstStep: chapter.steps[ 0 ].path, + lastStep: + currentStep?.chapter === chapter.id && currentStep?.path + ? currentStep?.path + : '', + } ); + } ); + + return dataToBeStored; +}; diff --git a/src/OnboardingSPA/components/App/index.js b/src/OnboardingSPA/components/App/index.js index ae8342b6f..a93f7d57c 100644 --- a/src/OnboardingSPA/components/App/index.js +++ b/src/OnboardingSPA/components/App/index.js @@ -5,7 +5,7 @@ import Sidebar from '../Sidebar'; import classNames from 'classnames'; import { useLocation } from 'react-router-dom'; import { setFlow } from '../../utils/api/flow'; -import { conditionalSteps } from '../../data/routes'; +import { design as designChapter } from '../../chapters/design'; import { getSettings, setSettings } from '../../utils/api/settings'; import { isEmpty, updateWPSettings } from '../../utils/api/ecommerce'; import { store as nfdOnboardingStore } from '../../store'; @@ -24,12 +24,9 @@ import { OnboardingEvent, trackOnboardingEvent, } from '../../utils/analytics/hiive'; -import { injectInAllSteps } from '../../data/routes/allStepsHandler'; +import { injectInAllSteps } from '../../data/flows/utils'; import { ACTION_LOGO_ADDED, - ACTION_ONBOARDING_CHAPTER_COMPLETE, - ACTION_ONBOARDING_CHAPTER_STARTED, - ACTION_ONBOARDING_STARTED, ACTION_SITE_TITLE_SET, ACTION_SOCIAL_ADDED, ACTION_STARTER_PAGES_SELECTED, @@ -58,8 +55,6 @@ const App = () => { socialData, firstStep, allSteps, - currentChapter, - currentStep, } = useSelect( ( select ) => { return { @@ -73,9 +68,6 @@ const App = () => { select( nfdOnboardingStore ).getOnboardingSocialData(), firstStep: select( nfdOnboardingStore ).getFirstStep(), allSteps: select( nfdOnboardingStore ).getAllSteps(), - currentChapter: - select( nfdOnboardingStore ).getCurrentChapter(), - currentStep: select( nfdOnboardingStore ).getCurrentStep(), }; }, [ location.pathname ] @@ -92,7 +84,6 @@ const App = () => { enqueueRequest, setOnboardingSocialData, setCurrentOnboardingData, - setActiveChapter, } = useDispatch( nfdOnboardingStore ); async function syncSocialSettings() { @@ -168,7 +159,10 @@ const App = () => { location?.pathname.includes( 'colors' ) || location?.pathname.includes( 'typography' ) ) { - const updates = injectInAllSteps( allSteps, conditionalSteps ); + const updates = injectInAllSteps( + allSteps, + designChapter.conditionalSteps + ); updateAllSteps( updates.allSteps ); if ( ! currentData.data.customDesign ) { currentData.data.customDesign = true; @@ -292,36 +286,6 @@ const App = () => { } }, [ location.pathname, onboardingFlow ] ); - useEffect( () => { - if ( location.pathname === firstStep.path ) { - trackOnboardingEvent( - new OnboardingEvent( ACTION_ONBOARDING_STARTED ) - ); - } - - if ( currentChapter !== currentStep?.chapter ) { - if ( currentChapter ) { - trackOnboardingEvent( - new OnboardingEvent( - ACTION_ONBOARDING_CHAPTER_COMPLETE, - currentChapter - ) - ); - } - - if ( currentStep?.chapter ) { - trackOnboardingEvent( - new OnboardingEvent( - ACTION_ONBOARDING_CHAPTER_STARTED, - currentStep.chapter - ) - ); - } - - setActiveChapter( currentStep?.chapter ); - } - }, [ currentStep ] ); - return ( diff --git a/src/OnboardingSPA/components/Button/ButtonBlue/index.js b/src/OnboardingSPA/components/Button/ButtonBlue/index.js index e23231f49..880734681 100644 --- a/src/OnboardingSPA/components/Button/ButtonBlue/index.js +++ b/src/OnboardingSPA/components/Button/ButtonBlue/index.js @@ -1,14 +1,11 @@ import { Button } from '@wordpress/components'; +import classNames from 'classnames'; -const ButtonBlue = ( { - className = 'nfd-onboarding-button--blue', - text, - onClick = false, -} ) => { +const ButtonBlue = ( { className, text, onClick = false } ) => { return (
    - { designSteps.map( ( step ) => { + { designRoutes.map( ( step ) => { return (
  • { ) } state={ { origin: 'drawer-nav' } } onClick={ () => - setDrawerActiveView( step.VIEW ) + setDrawerActiveView( step.drawerView ) } > - + { step.title }
    • diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js index 5c72690e8..4114e1f65 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavGetStarted.js @@ -1,19 +1,16 @@ import { Icon, chevronLeft } from '@wordpress/icons'; -import { useDispatch, useSelect } from '@wordpress/data'; - +import { useDispatch } from '@wordpress/data'; import { Button } from '@wordpress/components'; import { NavLink } from 'react-router-dom'; -import { VIEW_NAV_PRIMARY } from '../../../../constants'; import { __ } from '@wordpress/i18n'; + +import { VIEW_NAV_PRIMARY } from '../../../../constants'; import { store as nfdOnboardingStore } from '../../../store'; import Animate from '../../Animate'; +import { demographic as demographicChapter } from '../../../chapters/demographic'; const NavGetStarted = () => { - const { getStartedSteps } = useSelect( ( select ) => { - return { - getStartedSteps: select( nfdOnboardingStore ).getGetStartedSteps(), - }; - }, [] ); + const getStartedSteps = demographicChapter.steps; const { setDrawerActiveView } = useDispatch( nfdOnboardingStore ); return ( @@ -39,10 +36,10 @@ const NavGetStarted = () => { className="nfd-onboarding-drawer__panel-menu-link" state={ { origin: 'drawer-nav' } } onClick={ () => - setDrawerActiveView( step.VIEW ) + setDrawerActiveView( step.drawerView ) } > - + { step.title } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js index e2842a36d..ad704082f 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js @@ -1,9 +1,9 @@ import { Tooltip } from '@wordpress/components'; import { NavLink, useLocation } from 'react-router-dom'; - import { Icon } from '@wordpress/icons'; -import { store as nfdOnboardingStore } from '../../../store'; import { useSelect, useDispatch } from '@wordpress/data'; + +import { store as nfdOnboardingStore } from '../../../store'; import classNames from 'classnames'; import Animate from '../../Animate'; @@ -24,14 +24,15 @@ const NavPrimary = () => { return (
  • { location.pathname === step.path || location.pathname.includes( - step?.primaryDrawerActiveLinkIncludes + step?.data + ?.primaryDrawerActiveLinkIncludes ), } ) } state={ { origin: 'drawer-nav' } } onClick={ () => - step?.VIEW && - setDrawerActiveView( step.VIEW ) + step?.drawerView && + setDrawerActiveView( + step.drawerView + ) } > - + { step.title }
    • diff --git a/src/OnboardingSPA/components/ExitToWordPress/index.js b/src/OnboardingSPA/components/ExitToWordPress/index.js index 57129c9e0..e6b4c6868 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -3,14 +3,15 @@ import { chevronLeft } from '@wordpress/icons'; import { Fragment, useState } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button, ButtonGroup, Modal } from '@wordpress/components'; - import { __, sprintf } from '@wordpress/i18n'; import classNames from 'classnames'; +import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics'; + import { setFlow } from '../../utils/api/flow'; import { store as nfdOnboardingStore } from '../../store'; import { getSettings, setSettings } from '../../utils/api/settings'; import { wpAdminPage, pluginDashboardPage } from '../../../constants'; -import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics'; + import { OnboardingEvent, trackOnboardingEvent, @@ -20,6 +21,7 @@ import { CATEGORY, } from '../../utils/analytics/hiive/constants'; import { activateInitialPlugins } from '../../utils/api/plugins'; +import { ECOMMERCE_FLOW } from '../../data/flows/constants'; /** * Self-contained button and confirmation modal for exiting Onboarding page. @@ -160,7 +162,7 @@ const ExitToWordPress = ( { * check if this is the last step */ const exitToWordpressForEcommerce = () => { - if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) { + if ( window.nfdOnboarding.currentFlow === ECOMMERCE_FLOW ) { return true; } return false; diff --git a/src/OnboardingSPA/components/Header/step-navigation.js b/src/OnboardingSPA/components/Header/step-navigation.js index 39a95a2d4..ab8a0ddb8 100644 --- a/src/OnboardingSPA/components/Header/step-navigation.js +++ b/src/OnboardingSPA/components/Header/step-navigation.js @@ -13,6 +13,7 @@ import { sendOnboardingEvent, } from '../../utils/analytics/hiive'; import { ACTION_ONBOARDING_COMPLETE } from '../../utils/analytics/hiive/constants'; +import { ECOMMERCE_FLOW } from '../../data/flows/constants'; /** * Back step Navigation button. @@ -157,7 +158,7 @@ const StepNavigation = () => { * check if this is the last step */ const exitToWordpressForEcommerce = () => { - if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) { + if ( window.nfdOnboarding.currentFlow === ECOMMERCE_FLOW ) { return true; } return false; diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js new file mode 100644 index 000000000..16415d5de --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js @@ -0,0 +1,35 @@ +import { __, sprintf } from '@wordpress/i18n'; +import { translations } from '../../../../utils/locales/translations'; + +const getContents = ( brandName ) => { + return { + heading: __( 'A great foundation to build from', 'wp-module-onboarding' ), + subheading: sprintf( + /* translators: Brand */ + __('with WordPress and %s', 'wp-module-onboarding'), + brandName + ), + content: { + heading: sprintf( + __('Would you like to enter your WordPress Dashboard or continue setting up your %s', 'wp-module-onboarding'), + translations( 'site' ) + ), + question1: __("You've made great progress! Would you like to keep going with the setup or take it from here?", 'wp-module-onboarding'), + question2: sprintf( + __('You can continue from your %s home page in the Next steps list.', 'wp-module-onboarding'), + brandName + ), + redirectMessage: __('Taking you to WordPress in...', 'wp-module-onboarding') + }, + buttons: { + button1: { + text: __('Enter WordPress', 'wp-module-onboarding'), + }, + button2: { + text: __('Continue Setup', 'wp-module-onboarding'), + } + } + } +} + +export default getContents; \ No newline at end of file diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js new file mode 100644 index 000000000..36a540dfd --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js @@ -0,0 +1,98 @@ +import { useSelect, useDispatch } from '@wordpress/data'; +import { useEffect, useState } from '@wordpress/element'; +import { useNavigate } from 'react-router-dom'; +import { Icon, chevronRight } from '@wordpress/icons'; + +import { store as nfdOnboardingStore } from '../../../../store'; +import CardHeader from "../../../CardHeader"; +import CommonLayout from "../../../Layouts/Common"; +import NewfoldLargeCard from "../../../NewfoldLargeCard"; +import getContents from "./contents"; +import ButtonBlue from '../../../Button/ButtonBlue'; +import ButtonWhite from '../../../Button/ButtonWhite'; +import { activateInitialPlugins } from '../../../../utils/api/plugins'; +import { OnboardingEvent, sendOnboardingEvent } from '../../../../utils/analytics/hiive'; +import { pluginDashboardPage, wpAdminPage } from '../../../../../constants'; +import { setFlow } from '../../../../utils/api/flow'; +import { ACTION_ONBOARDING_COMPLETE } from '../../../../utils/analytics/hiive/constants'; +import { ECOMMERCE_FLOW } from '../../../../data/flows/constants'; + +const ChapterInterstitialLoader = () => { + let [ countdown, setCountdown ] = useState( 15 ); + const [ countdownInterval, setCountdownInterval ] = useState(); + const navigate = useNavigate(); + const { + setIsDrawerSuppressed, + setSidebarActiveView, + } = useDispatch( nfdOnboardingStore ); + + async function saveDataAndExit() { + if ( currentData ) { + currentData.isComplete = new Date().getTime(); + setFlow( currentData ); + } + //Redirect to Admin Page for normal customers + // and Bluehost Dashboard for ecommerce customers + const exitLink = exitToWordpressForEcommerce() + ? pluginDashboardPage + : wpAdminPage; + activateInitialPlugins(); + sendOnboardingEvent( new OnboardingEvent( ACTION_ONBOARDING_COMPLETE ) ); + window.location.replace( exitLink ); + } + + const exitToWordpressForEcommerce = () => { + if ( window.nfdOnboarding.currentFlow === ECOMMERCE_FLOW ) { + return true; + } + return false; + }; + + useEffect(() => { + if ( 0 === countdown ) { + clearInterval( countdownInterval ); + // saveDataAndExit(); + } + }, [ countdown ]) + + useEffect(() => { + const interval = setInterval(() => { + countdown -= 1; + setCountdown( countdown ); + }, 1000) + setCountdownInterval( interval ); + setIsDrawerSuppressed( true ); + setSidebarActiveView( false ); + }, []) + const { brandName, nextStep, currentData } = useSelect((select) => { + return { + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + nextStep: select( nfdOnboardingStore ).getNextStep(), + currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), + } + }); + const content = getContents( brandName ); + return ( + + + +
    +
    +

    {content.content.heading}

    +

    {content.content.question1}

    +

    {content.content.question2}

    +

    {content.content.redirectMessage}
    {countdown}

    +
    +
    +
    +
    +
    + saveDataAndExit() } text={content.buttons.button1.text} className={'chapter-interstitial__buttons--blue'} /> + navigate( nextStep.path ) } text={<>{content.buttons.button2.text}} className={'chapter-interstitial__buttons--white'}/> +
    +     +     + ); +} + +export default ChapterInterstitialLoader; \ No newline at end of file diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss new file mode 100644 index 000000000..81a63f1c6 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss @@ -0,0 +1,83 @@ +.chapter-interstitial { + + padding: 32px 32px; + + &__content { + @media (max-width: #{ ($break-xlarge) }) { + flex-direction: column; + justify-content: center; + align-items: center; + } + display: flex; + width: 100%; + line-height: 1.5; + color: black; + flex-direction: row; + margin-top: 30px; + &__column-left { + padding: 0px 20px; + width: 50%; + @media (max-width: #{ ($break-xlarge) }) { + width: 100%; + } + + &__heading { + font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem); + font-weight: bold; + } + + &__question1, &__question2 { + font-size: clamp(0.625rem, 0.5795rem + 0.2273vw, 1.125rem); + line-height: 1.5; + } + + &__question2 { + font-weight: bold; + } + } + + &__column-right { + width: 50%; + @media (max-width: #{ ($break-xlarge) }) { + display: none; + } + min-height: 250px; + max-height: 250px; + padding: 20px; + background-image: var(--nfd-onboarding-step-interstitial-img); + } + } + + &__buttons { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + margin-top: 20px; + @media (max-width: #{ ($break-xlarge) }) { + flex-direction: column; + } + + &--blue, &--white { + height: 76px; + width: 50%; + margin: 0px 20px; + font-size: clamp(1rem, 0.9091rem + 0.4545vw, 2rem); + @media (max-width: #{ ($break-xlarge) }) { + margin: 10px 0px; + width: 100%; + } + } + + &--white { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + &__icon { + margin-left: 30px; + } + } + } +} diff --git a/src/OnboardingSPA/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js index d762a2014..2b78e5413 100644 --- a/src/OnboardingSPA/components/SkipButton/index.js +++ b/src/OnboardingSPA/components/SkipButton/index.js @@ -10,6 +10,7 @@ import { getSettings, setSettings } from '../../utils/api/settings'; import { wpAdminPage, pluginDashboardPage } from '../../../constants'; import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics'; import { CATEGORY } from '../../utils/analytics/hiive/constants'; +import { ECOMMERCE_FLOW } from '../../data/flows/constants'; const SkipButton = ( { callback = false } ) => { const navigate = useNavigate(); @@ -91,7 +92,7 @@ const SkipButton = ( { callback = false } ) => { * check if this is the last step */ const exitToWordpressForEcommerce = () => { - if ( window.nfdOnboarding.currentFlow === 'ecommerce' ) { + if ( window.nfdOnboarding.currentFlow === ECOMMERCE_FLOW ) { return true; } return false; diff --git a/src/OnboardingSPA/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js index d562e3845..8d7782a4a 100644 --- a/src/OnboardingSPA/components/StateHandlers/Flow/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Flow/index.js @@ -1,93 +1,174 @@ -import { useEffect, useState } from '@wordpress/element'; +import { useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; -import { getFirstEcommerceStep } from '../../../data/routes/ecommerce-flow'; -import EcommerceStepLoader from '../../Loaders/Step/Ecommerce'; import { switchFlow } from '../../../utils/api/flow'; -import { removeQueryParam } from '../../../utils'; import { MAX_RETRIES_FLOW_SWITCH } from '../../../../constants'; -import { getFragment } from '@wordpress/url'; +import { + getChapterFromId, + getChaptersFromTopPriorityAndExperienceLevel, + stateToStore, +} from '../../../chapters/utils'; +import { resolveGetDataForFlow, getInitialChapters } from '../../../data/flows'; +import { + OnboardingEvent, + trackOnboardingEvent, +} from '../../../utils/analytics/hiive'; +import { + ACTION_ONBOARDING_CHAPTER_COMPLETE, + ACTION_ONBOARDING_CHAPTER_STARTED, + ACTION_ONBOARDING_STARTED, +} from '../../../utils/analytics/hiive/constants'; +import { ECOMMERCE_FLOW } from '../../../data/flows/constants'; +import { getQueryParam } from '../../../utils'; const FlowStateHandler = ( { children } ) => { const location = useLocation(); - const [ newFlow, setNewFlow ] = useState( false ); - const { brandConfig } = useSelect( ( select ) => { + const { + brandConfig, + experienceLevel, + topPriority, + currentData, + currentStep, + lastChapter, + firstStep, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), + experienceLevel: select( nfdOnboardingStore ).getExperienceLevel(), + topPriority: select( nfdOnboardingStore ).getTopPriority(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + lastChapter: select( nfdOnboardingStore ).getCurrentChapter(), + currentStep: select( nfdOnboardingStore ).getCurrentStep(), + firstStep: select( nfdOnboardingStore ).getFirstStep(), }; }, [] ); const { - setIsDrawerOpened, - setIsDrawerSuppressed, - setIsHeaderNavigationEnabled, - setSidebarActiveView, + updateAllSteps, + updateRoutes, + updateTopSteps, + updateDesignRoutes, + setCurrentOnboardingData, + setActiveChapter, } = useDispatch( nfdOnboardingStore ); - const disableNavigation = () => { - setIsDrawerOpened( false ); - setIsDrawerSuppressed( true ); - setIsHeaderNavigationEnabled( false ); - setSidebarActiveView( false ); - }; - const handleCommerceFlow = async ( flow, retries = 0 ) => { if ( retries >= MAX_RETRIES_FLOW_SWITCH ) { - return setNewFlow( false ); + return; } - const response = await switchFlow( flow ); + const response = switchFlow( flow ); if ( response?.error ) { retries = retries + 1; return handleCommerceFlow( flow, retries ); } - const firstEcommerceStep = getFirstEcommerceStep(); - const fragment = getFragment( window.location.href ); - const redirect = removeQueryParam( - window.location.href, - 'flow' - ).replace( fragment, '' ); - window.location.replace( `${ redirect }#${ firstEcommerceStep.path }` ); - window.location.reload(); }; const switchToNewFlow = async ( flow ) => { const enabledFlows = brandConfig?.enabled_flows ?? {}; if ( ! ( flow in enabledFlows ) || enabledFlows[ flow ] !== true ) { - return setNewFlow( false ); + return; } switch ( flow ) { - case 'ecommerce': + case ECOMMERCE_FLOW: handleCommerceFlow( flow ); break; - default: - setNewFlow( false ); } }; + const prioritizeFlow = () => { + const currentFlow = window.nfdOnboarding.currentFlow; + const initialChapters = getInitialChapters( currentFlow ); + const chapterQueryArg = getQueryParam( 'chapter' ); + + let chapters; + if ( chapterQueryArg ) { + chapters = getChapterFromId( chapterQueryArg ); + } else { + chapters = getChaptersFromTopPriorityAndExperienceLevel( + initialChapters, + topPriority, + experienceLevel + ); + } + + const getData = resolveGetDataForFlow( currentFlow ); + const data = getData( chapters, chapterQueryArg ); + + currentData.data.chapters = stateToStore( + initialChapters, + currentData.data.chapters, + currentStep + ); + + setCurrentOnboardingData( currentData ); + updateAllSteps( data.steps ); + updateTopSteps( data.topSteps ); + updateRoutes( data.routes ); + updateDesignRoutes( data.designRoutes ); + }; + + const trackChapters = () => { + if ( location.pathname === firstStep.path ) { + trackOnboardingEvent( + new OnboardingEvent( ACTION_ONBOARDING_STARTED ) + ); + } + + const currentChapter = currentStep?.chapter; + + if ( lastChapter !== currentChapter ) { + if ( lastChapter ) { + currentData.data.chapters[ lastChapter ].completed = true; + trackOnboardingEvent( + new OnboardingEvent( + ACTION_ONBOARDING_CHAPTER_COMPLETE, + currentChapter + ) + ); + } + + if ( currentChapter ) { + currentData.data.chapters[ currentChapter ].completed = false; + trackOnboardingEvent( + new OnboardingEvent( + ACTION_ONBOARDING_CHAPTER_STARTED, + currentChapter + ) + ); + } + + setActiveChapter( currentChapter ); + } + + if ( currentChapter ) { + currentData.data.chapters[ currentChapter ].lastStep = + currentStep?.path ?? ''; + } + } + + useEffect( () => { + prioritizeFlow(); + }, [ experienceLevel, topPriority ] ); + + useEffect( () => { + trackChapters(); + }, [ currentStep ] ); + useEffect( () => { if ( window.nfdOnboarding?.newFlow ) { const flow = window.nfdOnboarding.newFlow; - disableNavigation(); - setNewFlow( flow ); switchToNewFlow( flow ); window.nfdOnboarding.newFlow = undefined; } }, [ location.pathname ] ); - const handleRender = () => { - switch ( newFlow ) { - case 'ecommerce': - return ; - default: - return children; - } - }; - return <>{ handleRender() }; + return <>{ children }; }; export default FlowStateHandler; diff --git a/src/OnboardingSPA/data/flows/constants.js b/src/OnboardingSPA/data/flows/constants.js new file mode 100644 index 000000000..d4bf6e8e4 --- /dev/null +++ b/src/OnboardingSPA/data/flows/constants.js @@ -0,0 +1,2 @@ +export const DEFAULT_FLOW = 'wp-setup'; +export const ECOMMERCE_FLOW = 'ecommerce'; diff --git a/src/OnboardingSPA/data/flows/default.js b/src/OnboardingSPA/data/flows/default.js new file mode 100644 index 000000000..5aa99a749 --- /dev/null +++ b/src/OnboardingSPA/data/flows/default.js @@ -0,0 +1,122 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { filter } from 'lodash'; +import { demographic } from '../../chapters/demographic'; +import { design } from '../../chapters/design'; +import { layoutContent } from '../../chapters/layoutContent'; +import { features } from '../../chapters/features'; +import { stepWelcome } from '../../steps/GetStarted/Welcome/step'; +import { stepComplete } from '../../steps/Complete/step'; +import { stepWhatNext } from '../../steps/WhatNext/step'; +import { errorPage } from '../../pages/ErrorPage/page'; +import { PseudoStep } from '../models/PseudoStep'; +import { indexPage } from '../../pages/IndexPage/page'; +import { brush } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +export const pages = [ indexPage, errorPage ]; + +export const initialChapters = [ demographic, design, layoutContent, features ]; + +export const getSteps = ( chapters = initialChapters ) => { + let steps = []; + steps.push( stepWelcome ); + chapters.forEach( ( chapter ) => { + steps = steps.concat( [ ...chapter.steps, ...chapter.interstitialSteps ] ); + } ); + steps = steps.concat( [ stepComplete, stepWhatNext ] ); + return steps; +}; + +export const getRoutes = ( chapters = initialChapters ) => { + let routes = [ ...pages ]; + routes.push( stepWelcome ); + chapters.forEach( ( chapter ) => { + routes = routes.concat( [ + ...chapter.steps, + ...chapter.conditionalSteps, + ...chapter.interstitialSteps + ] ); + } ); + routes = routes.concat( [ stepComplete, stepWhatNext ] ); + return routes; +}; + +const getPseudoStepForGetStarted = ( firstGetStartedStep ) => { + const firstGetStartedStepObject = { ...firstGetStartedStep }; + firstGetStartedStepObject.title = __( + 'Get Started', + 'wp-module-onboarding' + ) + firstGetStartedStepObject.data.tooltipText = __( + 'Get Started', + 'wp-module-onboarding' + ); + return new PseudoStep( firstGetStartedStepObject ); +}; + +const getPseudoStepForDesign = ( firstDesignStep ) => { + const firstDesignStepObject = { ...firstDesignStep }; + firstDesignStepObject.title = __( 'Design', 'wp-module-onboarding' ); + firstDesignStepObject.icon = brush; + return new PseudoStep( firstDesignStepObject ); +}; + +export const getTopSteps = ( steps ) => { + const topSteps = [ ...steps ]; + const firstGetStartedStepIndex = topSteps.findIndex( ( step ) => + step.path.includes( '/step/get-started' ) + ); + if ( -1 !== firstGetStartedStepIndex ) { + topSteps[ firstGetStartedStepIndex ] = getPseudoStepForGetStarted( + steps[ firstGetStartedStepIndex ] + ); + } + + const firstDesignStepIndex = topSteps.findIndex( ( step ) => + step.path.includes( '/step/design' ) + ); + if ( -1 !== firstDesignStepIndex ) { + topSteps[ firstDesignStepIndex ] = getPseudoStepForDesign( + topSteps[ firstDesignStepIndex ] + ); + } + + return filter( topSteps, ( step ) => { + return ( + step instanceof PseudoStep || + ( ! step.path.includes( '/step/get-started' ) && + ! step.path.includes( '/step/design' ) && + ! step.path.includes( '/step/complete' ) && + ! step.path.includes( '/step/interstitial' ) ) + ); + } ); +}; + +export const getDesignRoutes = ( routes ) => { + const designRoutes = [ ...routes ]; + return filter( designRoutes, ( route ) => { + return ( + route.path.includes( '/step/design/' ) && + ! route.path.includes( '/theme-styles/preview' ) + ); + } ); +}; + +export const getData = ( chapters = initialChapters, onlyChapterSteps = false ) => { + let steps = getSteps( chapters ); + let routes = getRoutes( chapters ); + if ( onlyChapterSteps ) { + steps = steps.filter(( step ) => { + return ( ! step.path.includes('/interstitial') ) + }) + routes = routes.filter(( route ) => { + return ( ! route.path.includes('/interstitial') ) + }) + } + return { + steps, + routes, + topSteps: getTopSteps( steps ), + designRoutes: getDesignRoutes( routes ), + }; +}; diff --git a/src/OnboardingSPA/data/flows/ecommerce.js b/src/OnboardingSPA/data/flows/ecommerce.js new file mode 100644 index 000000000..bbbb1ae45 --- /dev/null +++ b/src/OnboardingSPA/data/flows/ecommerce.js @@ -0,0 +1,91 @@ +import { commerce } from '../../chapters/commerce'; +import { demographic } from '../../chapters/demographic'; +import { design } from '../../chapters/design'; +import { features } from '../../chapters/features'; +import { stepComplete } from '../../steps/Complete/step'; +import { stepWhatNext } from '../../steps/WhatNext/step'; +import { errorPage } from '../../pages/ErrorPage/page'; +import { PseudoStep } from '../models/PseudoStep'; +import { stepWelcome } from '../../steps/GetStarted/Welcome/step'; +import { indexPage } from '../../pages/IndexPage/page'; + +import { + getTopSteps as defaultTopSteps, + getDesignRoutes as defaultDesignRoutes, +} from './default'; +import { layoutContent } from '../../chapters/layoutContent'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { filter } from 'lodash'; +import { store } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +export const pages = [ indexPage, errorPage ]; + +export const initialChapters = [ + demographic, + commerce, + design, + layoutContent, + features, +]; + +export const getSteps = ( chapters = initialChapters ) => { + let steps = []; + steps.push( stepWelcome ); + chapters.forEach( ( chapter ) => { + steps = steps.concat( [...chapter.steps, ...chapter.interstitialSteps] ); + } ); + steps = steps.concat( [ stepComplete, stepWhatNext ] ); + return steps; +}; + +export const getRoutes = ( chapters = initialChapters ) => { + let routes = [ ...pages ]; + routes.push( stepWelcome ); + chapters.forEach( ( chapter ) => { + routes = routes.concat( [ + ...chapter.steps, + ...chapter.conditionalSteps, + ...chapter.interstitialSteps + ] ); + } ); + routes = routes.concat( [ stepComplete, stepWhatNext ] ); + return routes; +}; + +const getPseudoStepForEcommerce = ( firstEcommerceStep ) => { + const firstEcommerceStepObject = { ...firstEcommerceStep }; + firstEcommerceStepObject.title = __( 'Store Info', 'wp-module-onboarding' ); + firstEcommerceStepObject.icon = store; + return new PseudoStep( firstEcommerceStepObject ); +}; + +export const getTopSteps = ( steps ) => { + steps = defaultTopSteps( steps ); + const firstEcommerceStepIndex = steps.findIndex( ( step ) => + step.path.includes( '/ecommerce/step' ) + ); + if ( -1 !== firstEcommerceStepIndex ) { + steps[ firstEcommerceStepIndex ] = getPseudoStepForEcommerce( + steps[ firstEcommerceStepIndex ] + ); + } + + return filter( steps, ( step ) => { + return ( + step instanceof PseudoStep || + ! step.path.includes( '/ecommerce/step' ) + ); + } ); +}; + +export const getData = ( chapters = initialChapters ) => { + const steps = getSteps( chapters ); + const routes = getRoutes( chapters ); + return { + steps, + routes, + topSteps: getTopSteps( steps ), + designRoutes: defaultDesignRoutes( routes ), + }; +}; diff --git a/src/OnboardingSPA/data/flows/index.js b/src/OnboardingSPA/data/flows/index.js new file mode 100644 index 000000000..e0bf4ee6d --- /dev/null +++ b/src/OnboardingSPA/data/flows/index.js @@ -0,0 +1,67 @@ +import { DEFAULT_FLOW, ECOMMERCE_FLOW } from './constants'; +import { + getRoutes as defaultGetRoutes, + getSteps as defaultGetSteps, + getTopSteps as defaultGetTopSteps, + initialChapters as defaultInitialChapters, + getData as defaultGetData, + getDesignRoutes as defaultGetDesignRoutes, +} from './default'; + +import { + getRoutes as ecommerceGetRoutes, + getSteps as ecommerceGetSteps, + getTopSteps as ecommerceGetTopSteps, + initialChapters as ecommerceInitialChapters, + getData as ecommerceGetData, +} from './ecommerce'; + +export const getCurrentFlow = () => { + return window.nfdOnboarding.currentFlow ?? DEFAULT_FLOW; +}; + +const routerMap = { + [ DEFAULT_FLOW ]: { + getRoutes: defaultGetRoutes, + getSteps: defaultGetSteps, + getTopSteps: defaultGetTopSteps, + chapters: defaultInitialChapters, + getData: defaultGetData, + getDesignRoutes: defaultGetDesignRoutes, + }, + [ ECOMMERCE_FLOW ]: { + getRoutes: ecommerceGetRoutes, + getSteps: ecommerceGetSteps, + getTopSteps: ecommerceGetTopSteps, + chapters: ecommerceInitialChapters, + getData: ecommerceGetData, + getDesignRoutes: defaultGetDesignRoutes, + }, +}; + +export const initialRoutes = routerMap[ getCurrentFlow() ].getRoutes(); + +export const initialSteps = routerMap[ getCurrentFlow() ].getSteps(); + +export const initialTopSteps = + routerMap[ getCurrentFlow() ].getTopSteps( initialSteps ); + +export const initialDesignRoutes = + routerMap[ getCurrentFlow() ].getDesignRoutes( initialRoutes ); + +export const getInitialChapters = ( flow ) => { + return routerMap[ flow ].chapters; +}; + +export const getRoutes = routerMap[ getCurrentFlow() ].getRoutes; + +export const getSteps = routerMap[ getCurrentFlow() ].getSteps; + +export const getTopSteps = routerMap[ getCurrentFlow() ].getTopSteps; + +export const resolveGetDataForFlow = ( flow ) => { + flow = flow ? flow : getCurrentFlow(); + return routerMap[ getCurrentFlow() ].getData; +} + +export const getDesignRoutes = routerMap[ getCurrentFlow() ].getDesignRoutes; diff --git a/src/OnboardingSPA/data/flows/utils.js b/src/OnboardingSPA/data/flows/utils.js new file mode 100644 index 000000000..a9367343b --- /dev/null +++ b/src/OnboardingSPA/data/flows/utils.js @@ -0,0 +1,44 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { filter } from 'lodash'; +import { stepDesignThemeStylesPreview } from '../../steps/DesignThemeStyles/Preview/step'; + +export const injectInAllSteps = ( allSteps, conditionalSteps ) => { + const updates = removeFromAllSteps( allSteps, conditionalSteps ); + const steps = [ ...conditionalSteps ]; + return { + allSteps: addAfter( + updates.allSteps, + stepDesignThemeStylesPreview, + steps + ), + }; +}; + +export const removeFromAllSteps = ( allSteps, conditionalSteps ) => { + const conditionalStepsPaths = new Set( + conditionalSteps.map( ( a ) => a.path ) + ); + + return { + allSteps: filter( + allSteps, + ( allStep ) => ! conditionalStepsPaths.has( allStep.path ) + ), + }; +}; + +export const addAfter = ( steps, stepOne, stepTwo ) => { + const position = steps.findIndex( ( step ) => { + return step.path === stepOne.path; + } ); + steps.splice( position + 1, 0, ...stepTwo ); + return steps; +}; + +export const addAfterChapter = ( chapters, chapterOne, chapterTwo ) => { + const position = chapters.findIndex( ( chapter ) => { + return chapter.id === chapterOne.id; + } ); + chapters.splice( position + 1, 0, chapterTwo ); + return chapters; +}; diff --git a/src/OnboardingSPA/data/models/Chapter.js b/src/OnboardingSPA/data/models/Chapter.js new file mode 100644 index 000000000..db962e433 --- /dev/null +++ b/src/OnboardingSPA/data/models/Chapter.js @@ -0,0 +1,14 @@ +export class Chapter { + constructor( { id, name, steps, conditionalSteps = [], initialSteps = [], topSteps = [], interstitialSteps = [] }) { + this.id = id; + this.name = name; + this.steps = steps.map((step) => { + step.chapter = this.id; + return step + }) + this.conditionalSteps = conditionalSteps; + this.initialSteps = initialSteps; + this.topSteps = topSteps; + this.interstitialSteps = interstitialSteps; + } +} diff --git a/src/OnboardingSPA/data/models/Flow.js b/src/OnboardingSPA/data/models/Flow.js new file mode 100644 index 000000000..8b014276e --- /dev/null +++ b/src/OnboardingSPA/data/models/Flow.js @@ -0,0 +1,8 @@ +export class Flow { + constructor( steps, routes, pages, topSteps ) { + this.steps = steps; + this.routes = routes; + this.pages = pages; + this.topSteps = topSteps; + } +} diff --git a/src/OnboardingSPA/data/models/Page.js b/src/OnboardingSPA/data/models/Page.js new file mode 100644 index 000000000..943220658 --- /dev/null +++ b/src/OnboardingSPA/data/models/Page.js @@ -0,0 +1,8 @@ +export class Page { + constructor( { path, title, Component, icon } ) { + this.path = path; + this.title = title; + this.Component = Component; + this.icon = icon; + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/models/PseudoStep.js b/src/OnboardingSPA/data/models/PseudoStep.js new file mode 100644 index 000000000..5dffc4032 --- /dev/null +++ b/src/OnboardingSPA/data/models/PseudoStep.js @@ -0,0 +1,7 @@ +import { Step } from "./Step"; + +export class PseudoStep extends Step { + constructor( { path, title, icon, drawerView, sidebars, data } ) { + super({ path, title, Component: null, icon, drawerView, sidebars, data } ) + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/models/Step.js b/src/OnboardingSPA/data/models/Step.js new file mode 100644 index 000000000..8b8be823e --- /dev/null +++ b/src/OnboardingSPA/data/models/Step.js @@ -0,0 +1,11 @@ +export class Step { + constructor( { path, title, Component, icon, drawerView, sidebars, data } ) { + this.path = path; + this.title = title; + this.Component = Component; + this.icon = icon; + this.drawerView = drawerView; + this.sidebars = sidebars; + this.data = data; + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/routes/allStepsHandler.js b/src/OnboardingSPA/data/routes/allStepsHandler.js deleted file mode 100644 index 02c95c125..000000000 --- a/src/OnboardingSPA/data/routes/allStepsHandler.js +++ /dev/null @@ -1,26 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { orderBy, filter } from 'lodash'; - -export const injectInAllSteps = ( allSteps, conditionalSteps ) => { - const updates = removeFromAllSteps( allSteps, conditionalSteps ); - const steps = [ ...conditionalSteps ]; - return { - allSteps: orderBy( - updates.allSteps.concat( steps ), - [ 'priority' ], - [ 'asc' ] - ), - }; -}; - -export const removeFromAllSteps = ( allSteps, conditionalSteps ) => { - const conditionalStepsPaths = new Set( - conditionalSteps.map( ( a ) => a.path ) - ); - return { - allSteps: filter( - allSteps, - ( allStep ) => ! conditionalStepsPaths.has( allStep.path ) - ), - }; -}; diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js deleted file mode 100644 index 5591972c6..000000000 --- a/src/OnboardingSPA/data/routes/default-flow.js +++ /dev/null @@ -1,516 +0,0 @@ -import { __, sprintf } from '@wordpress/i18n'; -import { lazy } from '@wordpress/element'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { filter, orderBy } from 'lodash'; -import IndexPage from '../../pages/index'; -import { translations } from '../../utils/locales/translations'; -import { - home, - copy, - info, - plugins, - styles, - navigation, - brush, - color, - typography, - header, - moveTo, - redo, - post, - pages as pagesIcon, -} from '@wordpress/icons'; -import { - VIEW_DESIGN_COLORS, - VIEW_DESIGN_HEADER_MENU, - VIEW_DESIGN_THEME_STYLES_PREVIEW, - VIEW_DESIGN_TYPOGRAPHY, - VIEW_NAV_GET_STARTED, - VIEW_NAV_DESIGN, - CHAPTER_DEMOGRAPHIC, - CHAPTER_DESIGN, - CHAPTER_LAYOUT_AND_CONTENT, - CHAPTER_FEATURES, -} from '../../../constants'; - -/** - * This application has two types of routes: pages and steps. - * - * Pages are intended to exist outside the onboarding. - * - * Steps are the stages of the onboarding flow, expressed via numerical priority. - * Steps increment by 10, allowing ample room for new steps to insert between. - */ - -const ErrorPage = lazy( () => import( '../../pages/ErrorPage' ) ); -const PageResources = lazy( () => import( '../../pages/Resources' ) ); -const PageWhatToExpect = lazy( () => import( '../../pages/WhatToExpect' ) ); - -const StepGetStartedWelcome = lazy( () => - import( '../../pages/Steps/GetStarted/Welcome' ) -); -const StepGetStartedWelcomeLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/GetStarted/Welcome/Sidebar/LearnMore' ) -); - -const StepGetStartedExperience = lazy( () => - import( '../../pages/Steps/GetStarted/GetStartedExperience' ) -); -const StepGetStartedExperienceLearnMoreSidebar = lazy( () => - import( - '../../pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore' - ) -); - -const StepGetStartedPrimarySetup = lazy( () => - import( '../../pages/Steps/GetStarted/SiteTypeSetup/PrimarySite' ) -); -const StepGetStartedPrimarySetupLearnMoreSidebar = lazy( () => - import( - '../../pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index' - ) -); - -const StepGetStartedSecondarySetup = lazy( () => - import( '../../pages/Steps/GetStarted/SiteTypeSetup/SecondarySite' ) -); -const StepGetStartedSecondarySetupLearnMoreSidebar = lazy( () => - import( - '../../pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index' - ) -); - -const StepTopPriority = lazy( () => import( '../../pages/Steps/TopPriority' ) ); - -const StepBasicInfo = lazy( () => import( '../../pages/Steps/BasicInfo' ) ); -const StepBasicInfoLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/BasicInfo/Sidebar/LearnMore' ) -); - -const StepDesignThemeStylesMenu = lazy( () => - import( '../../pages/Steps/DesignThemeStyles/Menu' ) -); -const StepDesignThemeStylesMenuLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore' ) -); - -const StepDesignThemeStylesPreview = lazy( () => - import( '../../pages/Steps/DesignThemeStyles/Preview' ) -); -const StepDesignThemeStylesPreviewLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore' ) -); - -const StepDesignColors = lazy( () => - import( '../../pages/Steps/DesignColors' ) -); -const StepDesignColorsLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/DesignColors/Sidebar/LearnMore' ) -); - -const StepDesignTypography = lazy( () => - import( '../../pages/Steps/DesignTypography' ) -); -const StepDesignTypographyLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/DesignTypography/Sidebar/LearnMore' ) -); - -const StepDesignHeaderMenu = lazy( () => - import( '../../pages/Steps/DesignHeaderMenu' ) -); -const StepDesignHeaderMenuLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/DesignHeaderMenu/Sidebar/LearnMore' ) -); - -const StepDesignHomepageMenu = lazy( () => - import( '../../pages/Steps/DesignHomepageMenu' ) -); -const StepDesignHomepageMenuLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/DesignHomepageMenu/Sidebar/LearnMore' ) -); - -const StepSitePages = lazy( () => import( '../../pages/Steps/SitePages' ) ); -const StepSitePagesLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/SitePages/Sidebar/LearnMore' ) -); - -const StepSiteFeatures = lazy( () => - import( '../../pages/Steps/SiteFeatures' ) -); -const StepSiteFeaturesLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/SiteFeatures/Sidebar/LearnMore' ) -); - -const StepComplete = lazy( () => import( '../../pages/Steps/Complete' ) ); - -const StepWhatNext = lazy( () => import( '../../pages/Steps/WhatNext' ) ); -const StepWhatNextLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/WhatNext/Sidebar/LearnMore' ) -); - -/** - * All information pages should be prefixed with `/page`. - * - * All redirect sub-routes like `/` and `/step` and `/design` are exceptions. - */ -export const pages = [ - { - path: '/', - title: '', - Component: IndexPage, - Icon: <>, - }, - { - path: '/page/resources', - title: __( 'Resources', 'wp-module-onboarding' ), - Component: PageResources, - Icon: post, - }, - { - path: '/page/what-to-expect', - title: __( 'What to Expect', 'wp-module-onboarding' ), - Component: PageWhatToExpect, - Icon: redo, - }, - { - path: '*', - title: __( 'Error 404', 'wp-module-onboarding' ), - Component: ErrorPage, - Icon: redo, - }, -]; - -/** - * All steps are registered in this array. - * - * Priorities should increment by 20 to leave ample space in-between for injection. - */ -export const steps = [ - { - path: '/wp-setup/step/get-started/welcome', - title: __( 'Welcome', 'wp-module-onboarding' ), - Component: StepGetStartedWelcome, - Icon: home, - priority: 20, - VIEW: VIEW_NAV_GET_STARTED, - sidebars: { - LearnMore: { - SidebarComponents: [ StepGetStartedWelcomeLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/get-started/experience', - title: __( 'WordPress Experience', 'wp-module-onboarding' ), - chapter: CHAPTER_DEMOGRAPHIC, - Component: StepGetStartedExperience, - Icon: home, - priority: 40, - VIEW: VIEW_NAV_GET_STARTED, - sidebars: { - LearnMore: { - SidebarComponents: [ StepGetStartedExperienceLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/get-started/site-primary', - title: sprintf( - /* translators: %s: website or store */ - __( 'Primary %s Setup', 'wp-module-onboarding' ), - translations( 'Site' ) - ), - chapter: CHAPTER_DEMOGRAPHIC, - Component: StepGetStartedPrimarySetup, - Icon: moveTo, - priority: 60, - sidebars: { - LearnMore: { - SidebarComponents: [ - StepGetStartedPrimarySetupLearnMoreSidebar, - ], - }, - }, - }, - { - path: '/wp-setup/step/get-started/site-secondary', - title: sprintf( - /* translators: %s: website or store */ - __( 'Secondary %s Setup', 'wp-module-onboarding' ), - translations( 'Site' ) - ), - chapter: CHAPTER_DEMOGRAPHIC, - Component: StepGetStartedSecondarySetup, - Icon: moveTo, - priority: 80, - sidebars: { - LearnMore: { - SidebarComponents: [ - StepGetStartedSecondarySetupLearnMoreSidebar, - ], - }, - }, - }, - { - path: '/wp-setup/step/top-priority', - title: __( 'Top Priority', 'wp-module-onboarding' ), - chapter: CHAPTER_DEMOGRAPHIC, - tooltipText: __( 'Tell us your top priority', 'wp-module-onboarding' ), - Component: StepTopPriority, - Icon: navigation, - priority: 100, - }, - { - path: '/wp-setup/step/basic-info', - title: __( 'Basic Info', 'wp-module-onboarding' ), - chapter: CHAPTER_DEMOGRAPHIC, - tooltipText: sprintf( - /* translators: %s: website or store */ - __( 'Introduce us to this %s', 'wp-module-onboarding' ), - translations( 'website' ) - ), - Component: StepBasicInfo, - Icon: info, - priority: 120, - sidebars: { - LearnMore: { - SidebarComponents: [ StepBasicInfoLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/design/theme-styles/menu', - title: __( 'Theme Styles', 'wp-module-onboarding' ), - chapter: CHAPTER_DESIGN, - Component: StepDesignThemeStylesMenu, - Icon: styles, - priority: 160, - designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', - VIEW: VIEW_NAV_DESIGN, - patternId: 'theme-styles', - sidebars: { - LearnMore: { - SidebarComponents: [ - StepDesignThemeStylesMenuLearnMoreSidebar, - ], - }, - }, - }, - { - path: '/wp-setup/step/design/theme-styles/preview', - title: __( 'Theme Styles', 'wp-module-onboarding' ), - chapter: CHAPTER_DESIGN, - Component: StepDesignThemeStylesPreview, - Icon: styles, - priority: 170, - VIEW: VIEW_DESIGN_THEME_STYLES_PREVIEW, - designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', - patternId: 'theme-styles', - sidebars: { - LearnMore: { - SidebarComponents: [ - StepDesignThemeStylesPreviewLearnMoreSidebar, - ], - }, - }, - }, - { - path: '/wp-setup/step/design/header-menu', - title: __( 'Header & Menu', 'wp-module-onboarding' ), - chapter: CHAPTER_LAYOUT_AND_CONTENT, - tooltipText: __( - "Let's make the right things visible", - 'wp-module-onboarding' - ), - Component: StepDesignHeaderMenu, - Icon: header, - priority: 220, - VIEW: VIEW_DESIGN_HEADER_MENU, - patternId: 'header-menu', - sidebars: { - LearnMore: { - SidebarComponents: [ StepDesignHeaderMenuLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/design/homepage-menu', - title: __( 'Homepage Layouts', 'wp-module-onboarding' ), - chapter: CHAPTER_LAYOUT_AND_CONTENT, - tooltipText: __( - 'There’s no place like a great home page', - 'wp-module-onboarding' - ), - Component: StepDesignHomepageMenu, - Icon: pagesIcon, - priority: 240, - VIEW: VIEW_NAV_DESIGN, - patternId: 'homepage-styles', - sidebars: { - LearnMore: { - SidebarComponents: [ StepDesignHomepageMenuLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/design/site-pages', - title: __( 'Page Layouts', 'wp-module-onboarding' ), - chapter: CHAPTER_LAYOUT_AND_CONTENT, - tooltipText: __( - 'You have ideas, we have page templates', - 'wp-module-onboarding' - ), - Component: StepSitePages, - Icon: copy, - priority: 260, - patternId: 'site-pages', - sidebars: { - LearnMore: { - SidebarComponents: [ StepSitePagesLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/site-features', - title: __( 'Features', 'wp-module-onboarding' ), - chapter: CHAPTER_FEATURES, - tooltipText: __( - 'Key features to supercharge your site', - 'wp-module-onboarding' - ), - Component: StepSiteFeatures, - Icon: plugins, - priority: 280, - patternId: 'site-features', - sidebars: { - LearnMore: { - SidebarComponents: [ StepSiteFeaturesLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/complete', - Component: StepComplete, - priority: 285, - }, - { - path: '/wp-setup/step/what-next', - title: __( 'What Next', 'wp-module-onboarding' ), - tooltipText: __( 'How else can we help?', 'wp-module-onboarding' ), - Component: StepWhatNext, - Icon: moveTo, - priority: 300, - sidebars: { - LearnMore: { - SidebarComponents: [ StepWhatNextLearnMoreSidebar ], - }, - }, - }, -]; - -export const conditionalSteps = [ - { - path: '/wp-setup/step/design/colors', - title: __( 'Colors', 'wp-module-onboarding' ), - chapter: CHAPTER_DESIGN, - tooltipText: __( "What's your color palette?", 'wp-module-onboarding' ), - Component: StepDesignColors, - Icon: color, - priority: 180, - VIEW: VIEW_DESIGN_COLORS, - patternId: 'theme-styles', - sidebars: { - LearnMore: { - SidebarComponents: [ StepDesignColorsLearnMoreSidebar ], - }, - }, - }, - { - path: '/wp-setup/step/design/typography', - title: __( 'Typography', 'wp-module-onboarding' ), - chapter: CHAPTER_DESIGN, - tooltipText: __( "What's your font style?", 'wp-module-onboarding' ), - Component: StepDesignTypography, - Icon: typography, - priority: 200, - VIEW: VIEW_DESIGN_TYPOGRAPHY, - patternId: 'theme-styles', - sidebars: { - LearnMore: { - SidebarComponents: [ StepDesignTypographyLearnMoreSidebar ], - }, - }, - }, -]; - -export const routes = [ ...pages, ...steps, ...conditionalSteps ]; - -/** - * Filter-out the design steps and register a fake step in their place. - * - * @return {Array} steps - */ -export const initialTopSteps = () => { - const topSteps = filter( steps, ( step ) => { - return ( - ! step.path.includes( '/step/get-started' ) && - ! step.path.includes( '/step/design' ) && - ! step.path.includes( '/step/complete' ) - ); - } ); - - const designStep = { - /* This is a fake step to stand-in for all Design steps and does not have a Component to render */ - path: '/wp-setup/step/design/theme-styles/menu', - title: __( 'Design', 'wp-module-onboarding' ), - chapter: CHAPTER_DESIGN, - tooltipText: __( 'Design', 'wp-module-onboarding' ), - Icon: brush, - VIEW: VIEW_NAV_DESIGN, - primaryDrawerActiveLinkIncludes: '/wp-setup/step/design/', - priority: 140 /* matches priority for first design step */, - }; - - const getStartedStep = { - path: '/wp-setup/step/get-started/welcome', - title: __( 'Get Started', 'wp-module-onboarding' ), - tooltipText: __( 'Get Started', 'wp-module-onboarding' ), - Icon: home, - VIEW: VIEW_NAV_GET_STARTED, - primaryDrawerActiveLinkIncludes: '/wp-setup/step/get-started/', - priority: 20, - }; - - topSteps.push( designStep ); - topSteps.push( getStartedStep ); - - return orderBy( topSteps, [ 'priority' ], [ 'asc' ] ); -}; - -/** - * Filter out all non-design steps. - * - * @return {Array} steps - */ -export const initialDesignSteps = () => { - let designSteps = orderBy( - steps.concat( conditionalSteps ), - [ 'priority' ], - [ 'asc' ] - ); - designSteps = filter( designSteps, ( step ) => { - return ( - step.path.includes( '/step/design/' ) && - ! step.path.includes( '/theme-styles/preview' ) - ); - } ); - return designSteps; -}; - -export const initialGetStartedSteps = () => { - const getStartedSteps = filter( steps, ( step ) => { - return step.path.includes( '/step/get-started' ); - } ); - - return getStartedSteps; -}; diff --git a/src/OnboardingSPA/data/routes/ecommerce-flow.js b/src/OnboardingSPA/data/routes/ecommerce-flow.js deleted file mode 100644 index 8b86999ef..000000000 --- a/src/OnboardingSPA/data/routes/ecommerce-flow.js +++ /dev/null @@ -1,144 +0,0 @@ -import { __ } from '@wordpress/i18n'; -import { store, shipping } from '@wordpress/icons'; -import { lazy } from '@wordpress/element'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { orderBy, filter } from 'lodash'; - -import { - pages as defaultInitialPages, - steps as defaultInitialSteps, - conditionalSteps as defaultConditionalSteps, - initialTopSteps as defaultInitialTopSteps, - initialGetStartedSteps as defaultInitialGetStartedSteps, -} from './default-flow'; - -const StepAddress = lazy( () => - import( '../../pages/Steps/Ecommerce/StepAddress' ) -); -const StepAddressLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/' ) -); - -// const StepTax = lazy( () => import( '../../pages/Steps/Ecommerce/StepTax' ) ); -// const StepTaxLearnMoreSidebar = lazy( () => -// import( '../../pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/' ) -// ); - -const StepProducts = lazy( () => - import( '../../pages/Steps/Ecommerce/StepProducts' ) -); -const StepProductsLearnMoreSidebar = lazy( () => - import( '../../pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore' ) -); - -import { - CHAPTER_COMMERCE, - VIEW_NAV_ECOMMERCE_STORE_INFO, -} from '../../../constants'; - -export const ecommerceSteps = [ - { - path: '/ecommerce/step/address', - title: __( 'Street Address', 'wp-module-onboarding' ), - chapter: CHAPTER_COMMERCE, - tooltipText: __( 'Street Address', 'wp-module-onboarding' ), - Component: StepAddress, - Icon: store, - priority: 85, - VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO, - sidebars: { - LearnMore: { - SidebarComponents: [ StepAddressLearnMoreSidebar ], - }, - }, - }, - // { - // path: '/ecommerce/step/tax', - // title: __( 'Tax Info', 'wp-module-onboarding' ), - // tooltipText: __( 'Tax Info', 'wp-module-onboarding' ), - // Component: StepTax, - // Icon: institution, - // priority: 90, - // VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO, - // sidebars: { - // LearnMore: { - // SidebarComponents: [ StepTaxLearnMoreSidebar ], - // }, - // }, - // }, - { - path: '/ecommerce/step/products', - title: __( 'Product Info', 'wp-module-onboarding' ), - chapter: CHAPTER_COMMERCE, - tooltipText: __( 'Product Info', 'wp-module-onboarding' ), - Component: StepProducts, - Icon: shipping, - priority: 95, - VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO, - sidebars: { - LearnMore: { - SidebarComponents: [ StepProductsLearnMoreSidebar ], - }, - }, - }, -]; - -export const steps = orderBy( - [ - ...filter( - defaultInitialSteps, - ( step ) => ! step.path.includes( '/step/top-priority' ) - ), - ...ecommerceSteps, - ], - [ 'priority' ], - [ 'asc' ] -); - -export const routes = orderBy( - [ ...steps, ...defaultConditionalSteps, ...defaultInitialPages ], - [ 'priority' ], - [ 'asc' ] -); - -export const initialTopSteps = () => { - const topSteps = filter( ecommerceSteps, ( step ) => { - return ! step.path.includes( '/ecommerce/step' ); - } ); - - const ecommerceStep = { - /* This is a pseudo step to stand-in for all StoreInfo steps and does not have a Component to render */ - path: '/ecommerce/step/address', - title: __( 'Store Info', 'wp-module-onboarding' ), - tooltipText: __( 'Street Address', 'wp-module-onboarding' ), - chapter: CHAPTER_COMMERCE, - Icon: store, - primaryDrawerActiveLinkIncludes: '/ecommerce/step/', - VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO, - priority: 41 /* matches priority for first store info step */, - }; - - topSteps.push( ecommerceStep ); - - const filteredSteps = filter( - defaultInitialTopSteps(), - ( step ) => ! step.path.includes( '/step/top-priority' ) - ); - - return orderBy( - [ ...filteredSteps, ...topSteps ], - [ 'priority' ], - [ 'asc' ] - ); -}; - -export const ecommerceGetStartedSteps = () => { - return filter( - defaultInitialGetStartedSteps(), - ( step ) => ! step.path.includes( '/step/get-started/site-primary' ) - ); -}; - -export const getFirstEcommerceStep = () => { - return ecommerceSteps[ 0 ]; -}; diff --git a/src/OnboardingSPA/data/routes/index.js b/src/OnboardingSPA/data/routes/index.js deleted file mode 100644 index dc21a7d8f..000000000 --- a/src/OnboardingSPA/data/routes/index.js +++ /dev/null @@ -1,65 +0,0 @@ -import { - routes as defaultInitialRoutes, - steps as defaultInitialSteps, - conditionalSteps as defaultInitialConditionalSteps, - initialDesignSteps as defaultInitialDesignSteps, - initialTopSteps as defaultInitialTopSteps, - initialGetStartedSteps as defaultInitialGetStartedSteps, -} from './default-flow'; - -import { - routes as ecommerceRoutes, - steps as ecommerceSteps, - initialTopSteps as ecommerceInitialTopSteps, - ecommerceGetStartedSteps as ecommerceDefaultGetStartedSteps, - ecommerceSteps as ecommerceInitialStoreInfoSteps, -} from './ecommerce-flow'; - -function getSelectedRoute() { - return window.nfdOnboarding.currentFlow ?? 'wp-setup'; -} - -const routerMap = { - 'wp-setup': { - routes: defaultInitialRoutes, - steps: defaultInitialSteps, - conditionalSteps: defaultInitialConditionalSteps, - initialTopSteps: defaultInitialTopSteps, - initialDesignSteps: defaultInitialDesignSteps, - initialGetStartedSteps: defaultInitialGetStartedSteps, - }, - ecommerce: { - routes: ecommerceRoutes, - steps: ecommerceSteps, - conditionalSteps: defaultInitialConditionalSteps, - initialTopSteps: ecommerceInitialTopSteps, - initialDesignSteps: defaultInitialDesignSteps, - initialGetStartedSteps: ecommerceDefaultGetStartedSteps, - initialStoreInfoSteps: ecommerceInitialStoreInfoSteps, - }, -}; - -export const routes = [ ...routerMap[ getSelectedRoute() ].routes ]; - -export const steps = [ ...routerMap[ getSelectedRoute() ].steps ]; - -export const conditionalSteps = - routerMap[ getSelectedRoute() ].conditionalSteps; - -export const initialTopSteps = () => { - return routerMap[ getSelectedRoute() ].initialTopSteps(); -}; - -export const initialDesignSteps = () => { - return routerMap[ getSelectedRoute() ].initialDesignSteps(); -}; - -export const initialGetStartedSteps = () => { - return routerMap[ getSelectedRoute() ].initialGetStartedSteps(); -}; - -export const initialStoreInfoSteps = () => { - return routerMap[ getSelectedRoute() ].initialStoreInfoSteps - ? routerMap[ getSelectedRoute() ].initialStoreInfoSteps - : []; -}; diff --git a/src/OnboardingSPA/data/translations/index.js b/src/OnboardingSPA/data/translations/index.js index 950d7bf71..585b6c1d6 100644 --- a/src/OnboardingSPA/data/translations/index.js +++ b/src/OnboardingSPA/data/translations/index.js @@ -1,20 +1,21 @@ import { _x } from '@wordpress/i18n'; +import { DEFAULT_FLOW, ECOMMERCE_FLOW } from '../flows/constants'; -export const translationMap = - { 'wp-setup': { - site: { - 'noun': _x( 'site', 'noun', 'wp-module-onboarding' ), - }, - website: { - 'noun': _x( 'website', 'noun', 'wp-module-onboarding' ), - } - }, - 'ecommerce': { - site: { - 'noun': _x( 'store', 'noun', 'wp-module-onboarding' ), - }, - website: { - 'noun': _x( 'store', 'noun', 'wp-module-onboarding' ) - } - } -} \ No newline at end of file +export const translationMap = { + [ DEFAULT_FLOW ]: { + site: { + noun: _x( 'site', 'noun', 'wp-module-onboarding' ), + }, + website: { + noun: _x( 'website', 'noun', 'wp-module-onboarding' ), + }, + }, + [ ECOMMERCE_FLOW ]: { + site: { + noun: _x( 'store', 'noun', 'wp-module-onboarding' ), + }, + website: { + noun: _x( 'store', 'noun', 'wp-module-onboarding' ), + }, + }, +}; diff --git a/src/OnboardingSPA/pages/ErrorPage/page.js b/src/OnboardingSPA/pages/ErrorPage/page.js new file mode 100644 index 000000000..62e83b4b0 --- /dev/null +++ b/src/OnboardingSPA/pages/ErrorPage/page.js @@ -0,0 +1,13 @@ +import { __ } from '@wordpress/i18n'; +import { redo } from "@wordpress/icons"; +import ErrorPage from "."; +import { Page } from "../../data/models/Page"; + +export const errorPage = new Page( + { + path: '*', + title: __( 'Error 404', 'wp-module-onboarding' ), + Component: ErrorPage, + Icon: redo, + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/index.js b/src/OnboardingSPA/pages/IndexPage/index.js similarity index 80% rename from src/OnboardingSPA/pages/index.js rename to src/OnboardingSPA/pages/IndexPage/index.js index 1ac6bab12..8b5db017d 100644 --- a/src/OnboardingSPA/pages/index.js +++ b/src/OnboardingSPA/pages/IndexPage/index.js @@ -1,10 +1,10 @@ import { Fragment, useEffect } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../store'; +import { store as nfdOnboardingStore } from '../../store'; import { useNavigate } from 'react-router-dom'; import { useSelect } from '@wordpress/data'; -const IndexRoute = () => { +const IndexPage = () => { const navigate = useNavigate(); const { firstStep } = useSelect((select) => { return { @@ -22,4 +22,4 @@ const IndexRoute = () => { return ; }; -export default IndexRoute; +export default IndexPage; diff --git a/src/OnboardingSPA/pages/IndexPage/page.js b/src/OnboardingSPA/pages/IndexPage/page.js new file mode 100644 index 000000000..74f027237 --- /dev/null +++ b/src/OnboardingSPA/pages/IndexPage/page.js @@ -0,0 +1,11 @@ +import IndexPage from "."; +import { Page } from "../../data/models/Page"; + +export const indexPage = new Page( + { + path: '/', + title: '', + Component: IndexPage, + Icon: <>, + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Resources/index.js b/src/OnboardingSPA/pages/Resources/index.js deleted file mode 100644 index dbdfef4c0..000000000 --- a/src/OnboardingSPA/pages/Resources/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import CommonLayout from '../../components/Layouts/Common'; -import { SIDEBAR_LEARN_MORE, VIEW_NAV_PAGE } from '../../../constants'; -import { store as nfdOnboardingStore } from '../../store'; -import { useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; - -const PageResources = () => { - const { setIsDrawerOpened, setSidebarActiveView } = - useDispatch( nfdOnboardingStore ); - - useEffect( () => { - setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerOpened( true ); - setDrawerActiveView( VIEW_NAV_PAGE ); - }, [] ); - - return {__( 'Resources Page.', 'wp-module-onboarding' ) }; -}; - -export default PageResources; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js deleted file mode 100644 index b36b97113..000000000 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js +++ /dev/null @@ -1,94 +0,0 @@ -import { useSelect } from '@wordpress/data'; -import { lazy } from '@wordpress/element'; - -import { store as nfdOnboardingStore } from '../../../../../../store'; -import getContents from './contents'; - -const IllustrationPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' - ) -); -const InfoPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) -); -const HelpPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) -); -const ButtonWhite = lazy( () => - import( '../../../../../../components/Button/ButtonWhite' ) -); -const SupportLink = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/SupportLink' - ) -); -const StepIntroPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' - ) -); - -const LearnMore = () => { - const { - brandName, - techSupportLink, - fullServiceCreativeTeamLink, - brandConfig, - } = useSelect( ( select ) => { - return { - brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: - select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), - }; - } ); - - const content = getContents( - brandName, - techSupportLink, - fullServiceCreativeTeamLink - ); - - return ( -
    - - { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( - - ) } - - - { content.help.fullService.link && ( - - window.open( - content.help.fullService.link, - '_blank' - ) - } - /> - ) } - - -
    - ); -}; - -export default LearnMore; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index.js deleted file mode 100644 index 6ab89b600..000000000 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index.js +++ /dev/null @@ -1,89 +0,0 @@ -import { useSelect } from '@wordpress/data'; -import { lazy } from '@wordpress/element'; - -import { store as nfdOnboardingStore } from '../../../../../../../store'; -import getContents from './contents'; - -const IllustrationPanel = lazy( () => - import( - '../../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' - ) -); -const InfoPanel = lazy( () => - import( - '../../../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) -); -const HelpPanel = lazy( () => - import( - '../../../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) -); -const ButtonWhite = lazy( () => - import( '../../../../../../../components/Button/ButtonWhite' ) -); -const SupportLink = lazy( () => - import( - '../../../../../../../components/Sidebar/components/LearnMore/SupportLink' - ) -); -const StepIntroPanel = lazy( () => - import( - '../../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' - ) -); - -const LearnMore = () => { - const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = - useSelect( ( select ) => { - return { - techSupportLink: - select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: - select( - nfdOnboardingStore - ).getfullServiceCreativeTeamUrl(), - brandConfig: - select( nfdOnboardingStore ).getNewfoldBrandConfig(), - }; - } ); - - const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); - - return ( -
    - - { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( - - ) } - - - { content.help.fullService.link && ( - - window.open( - content.help.fullService.link, - '_blank' - ) - } - /> - ) } - - -
    - ); -}; - -export default LearnMore; diff --git a/src/OnboardingSPA/pages/WhatToExpect/index.js b/src/OnboardingSPA/pages/WhatToExpect/index.js deleted file mode 100644 index 18c815fcc..000000000 --- a/src/OnboardingSPA/pages/WhatToExpect/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import CommonLayout from '../../components/Layouts/Common'; -import { SIDEBAR_LEARN_MORE, VIEW_NAV_PAGE } from '../../../constants'; -import { store as nfdOnboardingStore } from '../../store'; -import { useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; - -const PageWhatToExpect = () => { - const { setIsDrawerOpened, setDrawerActiveView, setSidebarActiveView } = - useDispatch( nfdOnboardingStore ); - - useEffect( () => { - setSidebarActiveView( SIDEBAR_LEARN_MORE ); - setIsDrawerOpened( true ); - setDrawerActiveView( VIEW_NAV_PAGE ); - }, [] ); - - return What To Expect; -}; - -export default PageWhatToExpect; diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/contents.js index eb2ea3a03..c414a7c71 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { info } from '@wordpress/icons'; const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js similarity index 74% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js index 8c5eb25e6..dd55e6424 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js @@ -1,35 +1,31 @@ -import { lazy } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; +import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../../components/Button/ButtonWhite' ) + import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); @@ -56,7 +52,7 @@ const LearnMore = () => { ); return ( -
    +
    { return { diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/index.js b/src/OnboardingSPA/steps/BasicInfo/index.js similarity index 78% rename from src/OnboardingSPA/pages/Steps/BasicInfo/index.js rename to src/OnboardingSPA/steps/BasicInfo/index.js index 75a27a930..4c73b3fc6 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/index.js +++ b/src/OnboardingSPA/steps/BasicInfo/index.js @@ -1,8 +1,8 @@ -import CommonLayout from '../../../components/Layouts/Common'; -import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; +import CommonLayout from '../../components/Layouts/Common'; +import HeadingWithSubHeading from '../../components/HeadingWithSubHeading'; import BasicInfoForm from './basicInfoForm'; -import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../../constants'; -import { store as nfdOnboardingStore } from '../../../store'; +import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../constants'; +import { store as nfdOnboardingStore } from '../../store'; import { useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; diff --git a/src/OnboardingSPA/steps/BasicInfo/step.js b/src/OnboardingSPA/steps/BasicInfo/step.js new file mode 100644 index 000000000..e98a0e37c --- /dev/null +++ b/src/OnboardingSPA/steps/BasicInfo/step.js @@ -0,0 +1,31 @@ +import { info } from "@wordpress/icons"; +import { Step } from "../../data/models/Step"; +import { lazy } from '@wordpress/element'; +import LearnMore from "./Sidebar/LearnMore"; +import { __, sprintf } from '@wordpress/i18n'; +import { translations } from "../../utils/locales/translations"; +import { VIEW_NAV_PRIMARY } from "../../../constants"; + +const StepBasicInfo = lazy( () => import( './index' ) ); + +export const stepBasicInfo = new Step( + { + path: '/wp-setup/step/basic-info', + title: __( 'Basic Info', 'wp-module-onboarding' ), + Component: StepBasicInfo, + icon: info, + drawerView: VIEW_NAV_PRIMARY, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: sprintf( + /* translators: %s: website or store */ + __( 'Introduce us to this %s', 'wp-module-onboarding' ), + translations( 'website' ) + ), + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/stylesheet.scss b/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/BasicInfo/stylesheet.scss rename to src/OnboardingSPA/steps/BasicInfo/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/Complete/contents.js b/src/OnboardingSPA/steps/Complete/contents.js similarity index 93% rename from src/OnboardingSPA/pages/Steps/Complete/contents.js rename to src/OnboardingSPA/steps/Complete/contents.js index 1fee43c2f..e8da92feb 100644 --- a/src/OnboardingSPA/pages/Steps/Complete/contents.js +++ b/src/OnboardingSPA/steps/Complete/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../utils/locales/translations'; +import { translations } from '../../utils/locales/translations'; const getContents = ( brandName ) => { return { diff --git a/src/OnboardingSPA/pages/Steps/Complete/index.js b/src/OnboardingSPA/steps/Complete/index.js similarity index 84% rename from src/OnboardingSPA/pages/Steps/Complete/index.js rename to src/OnboardingSPA/steps/Complete/index.js index 0971ea8f2..3e11cd3c0 100644 --- a/src/OnboardingSPA/pages/Steps/Complete/index.js +++ b/src/OnboardingSPA/steps/Complete/index.js @@ -1,14 +1,14 @@ -import { store as nfdOnboardingStore } from '../../../store'; +import { store as nfdOnboardingStore } from '../../store'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import { useNavigate } from 'react-router-dom'; import getContents from './contents'; -import { completeFlow } from '../../../utils/api/flow'; -import { StepLoader } from '../../../components/Loaders'; -import { StepErrorState } from '../../../components/ErrorState'; -import { DesignStateHandler } from '../../../components/StateHandlers'; -import { THEME_STATUS_INIT } from '../../../../constants'; +import { completeFlow } from '../../utils/api/flow'; +import { StepLoader } from '../../components/Loaders'; +import { StepErrorState } from '../../components/ErrorState'; +import { DesignStateHandler } from '../../components/StateHandlers'; +import { THEME_STATUS_INIT } from '../../../constants'; const StepComplete = () => { const { diff --git a/src/OnboardingSPA/steps/Complete/step.js b/src/OnboardingSPA/steps/Complete/step.js new file mode 100644 index 000000000..cee0bccc6 --- /dev/null +++ b/src/OnboardingSPA/steps/Complete/step.js @@ -0,0 +1,12 @@ +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../data/models/Step"; + +const StepComplete = lazy( () => import( './index' ) ); + +export const stepComplete = new Step( + { + path: '/wp-setup/step/complete', + Component: StepComplete, + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/contents.js similarity index 94% rename from src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/contents.js index 2544ac1b1..e0899f9d6 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { color } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js similarity index 77% rename from src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js index edadf24f7..058ade027 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js @@ -1,31 +1,31 @@ import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../components/Button/ButtonWhite' ) + import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/steps/DesignColors/index.js similarity index 79% rename from src/OnboardingSPA/pages/Steps/DesignColors/index.js rename to src/OnboardingSPA/steps/DesignColors/index.js index 27988c84c..68f2b0c10 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/steps/DesignColors/index.js @@ -2,32 +2,31 @@ import { useLocation } from 'react-router-dom'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { getPatterns } from '../../../utils/api/patterns'; -import { store as nfdOnboardingStore } from '../../../store'; -import CommonLayout from '../../../components/Layouts/Common'; -import { DesignStateHandler } from '../../../components/StateHandlers'; +import { getPatterns } from '../../utils/api/patterns'; +import { store as nfdOnboardingStore } from '../../store'; +import CommonLayout from '../../components/Layouts/Common'; +import { DesignStateHandler } from '../../components/StateHandlers'; import { LivePreview, GlobalStylesProvider, -} from '../../../components/LivePreview'; +} from '../../components/LivePreview'; import { SIDEBAR_LEARN_MORE, THEME_STATUS_ACTIVE, THEME_STATUS_INIT, VIEW_DESIGN_COLORS, -} from '../../../../constants'; +} from '../../../constants'; +import { initialDesignRoutes } from '../../data/flows'; const StepDesignColors = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - - const { currentStep, themeStatus, designSteps } = useSelect( ( select ) => { + const { currentStep, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - designSteps: select( nfdOnboardingStore ).getDesignSteps(), }; }, [] ); @@ -41,7 +40,8 @@ const StepDesignColors = () => { const getStylesAndPatterns = async () => { const patternResponse = await getPatterns( - currentStep?.patternId ?? designSteps[ 0 ].patternId, + currentStep?.data?.patternId ?? + initialDesignRoutes[ 0 ]?.data.patternId, true ); if ( patternResponse?.error ) { diff --git a/src/OnboardingSPA/steps/DesignColors/step.js b/src/OnboardingSPA/steps/DesignColors/step.js new file mode 100644 index 000000000..f440878b1 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignColors/step.js @@ -0,0 +1,27 @@ +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../data/models/Step"; +import { color } from '@wordpress/icons'; +import LearnMore from "./Sidebar/LearnMore"; +import { VIEW_DESIGN_COLORS } from '../../../constants'; + +const StepDesignColors = lazy( () => import( './index' ) ); + +export const stepDesignColors = new Step( + { + path: '/wp-setup/step/design/colors', + title: __( 'Colors', 'wp-module-onboarding' ), + Component: StepDesignColors, + icon: color, + drawerView: VIEW_DESIGN_COLORS, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( "What's your color palette?", 'wp-module-onboarding' ), + patternId: 'theme-styles', + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/steps/DesignColors/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss rename to src/OnboardingSPA/steps/DesignColors/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/utils.js b/src/OnboardingSPA/steps/DesignColors/utils.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignColors/utils.js rename to src/OnboardingSPA/steps/DesignColors/utils.js diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/contents.js similarity index 96% rename from src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/contents.js index 7769d396f..4a0d26769 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { header } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js similarity index 77% rename from src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js index 54a4be2e2..3ac23ef86 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js @@ -1,31 +1,31 @@ import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../components/Button/ButtonWhite' ) + import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/steps/DesignHeaderMenu/index.js similarity index 85% rename from src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js rename to src/OnboardingSPA/steps/DesignHeaderMenu/index.js index 43fd37b22..375d29a79 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/index.js @@ -1,18 +1,18 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect, useLayoutEffect } from '@wordpress/element'; -import CommonLayout from '../../../components/Layouts/Common'; -import { DesignStateHandler } from '../../../components/StateHandlers'; +import CommonLayout from '../../components/Layouts/Common'; +import { DesignStateHandler } from '../../components/StateHandlers'; import { LivePreview, GlobalStylesProvider, -} from '../../../components/LivePreview'; +} from '../../components/LivePreview'; import { SIDEBAR_LEARN_MORE, VIEW_DESIGN_HEADER_MENU, -} from '../../../../constants'; -import { store as nfdOnboardingStore } from '../../../store'; +} from '../../../constants'; +import { store as nfdOnboardingStore } from '../../store'; const StepDesignHeaderMenu = () => { const { headerMenu } = useSelect( ( select ) => { diff --git a/src/OnboardingSPA/steps/DesignHeaderMenu/step.js b/src/OnboardingSPA/steps/DesignHeaderMenu/step.js new file mode 100644 index 000000000..e9ec53489 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/step.js @@ -0,0 +1,30 @@ +import { header } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../data/models/Step"; +import LearnMore from "./Sidebar/LearnMore"; +import { VIEW_DESIGN_HEADER_MENU } from "../../../constants"; + +const StepDesignHeaderMenu= lazy( () => import( './index' ) ); + +export const stepDesignHeaderMenu = new Step( + { + path: '/wp-setup/step/design/header-menu', + title: __( 'Header & Menu', 'wp-module-onboarding' ), + Component: StepDesignHeaderMenu, + icon: header, + drawerView: VIEW_DESIGN_HEADER_MENU, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( + "Let's make the right things visible", + 'wp-module-onboarding' + ), + patternId: 'header-menu', + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/steps/DesignHeaderMenu/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss rename to src/OnboardingSPA/steps/DesignHeaderMenu/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/contents.js index d6d0d8497..c1300c157 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { home } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js new file mode 100644 index 000000000..84e01e198 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js @@ -0,0 +1,85 @@ +import { useSelect } from '@wordpress/data'; +import { lazy } from '@wordpress/element'; + +import { store as nfdOnboardingStore } from '../../../../store'; +import getContents from './contents'; + +const IllustrationPanel = lazy( () => + import( + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + ) +); +const InfoPanel = lazy( () => + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) +); +const HelpPanel = lazy( () => + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) +); +const ButtonWhite = lazy( () => + import( '../../../../components/Button/ButtonWhite' ) +); +const SupportLink = lazy( () => + import( + '../../../../components/Sidebar/components/LearnMore/SupportLink' + ) +); +const StepIntroPanel = lazy( () => + import( + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + ) +); + +const LearnMore = () => { + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = + useSelect( ( select ) => { + return { + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + brandConfig: + select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); + + const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); + + return ( +
    + + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } + + + { content.help.fullService.link && ( + + window.open( + content.help.fullService.link, + '_blank' + ) + } + /> + ) } + + +
    + ); +}; + +export default LearnMore; diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/contents.js b/src/OnboardingSPA/steps/DesignHomepageMenu/contents.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignHomepageMenu/contents.js rename to src/OnboardingSPA/steps/DesignHomepageMenu/contents.js diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js similarity index 86% rename from src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js rename to src/OnboardingSPA/steps/DesignHomepageMenu/index.js index c25e07242..129106ccd 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js @@ -2,28 +2,28 @@ import { useLocation } from 'react-router-dom'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { getPatterns } from '../../../utils/api/patterns'; -import { store as nfdOnboardingStore } from '../../../store'; -import CommonLayout from '../../../components/Layouts/Common'; +import { getPatterns } from '../../utils/api/patterns'; +import { store as nfdOnboardingStore } from '../../store'; +import CommonLayout from '../../components/Layouts/Common'; import { VIEW_NAV_DESIGN, THEME_STATUS_ACTIVE, THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, -} from '../../../../constants'; -import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; -import { DesignStateHandler } from '../../../components/StateHandlers'; +} from '../../../constants'; +import HeadingWithSubHeading from '../../components/HeadingWithSubHeading'; +import { DesignStateHandler } from '../../components/StateHandlers'; import { LivePreviewSelectableCard, LivePreviewSkeleton, GlobalStylesProvider, -} from '../../../components/LivePreview'; +} from '../../components/LivePreview'; import { OnboardingEvent, trackOnboardingEvent, -} from '../../../utils/analytics/hiive'; +} from '../../utils/analytics/hiive'; import getContents from './contents'; -import { ACTION_HOMEPAGE_LAYOUT_SELECTED } from '../../../utils/analytics/hiive/constants'; +import { ACTION_HOMEPAGE_LAYOUT_SELECTED } from '../../utils/analytics/hiive/constants'; const StepDesignHomepageMenu = () => { const location = useLocation(); @@ -69,7 +69,7 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternDataTemp = await getPatterns( - currentStep.patternId + currentStep?.data?.patternId ); if ( homepagePatternDataTemp?.error ) { @@ -147,8 +147,9 @@ const StepDesignHomepageMenu = () => { import( './index' ) ); + +export const stepDesignHomepageMenu = new Step( + { + path: '/wp-setup/step/design/homepage-menu', + title: __( 'Homepage Layouts', 'wp-module-onboarding' ), + Component: StepDesignHomepageMenu, + icon: pages, + drawerView: VIEW_NAV_DESIGN, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + patternId: 'homepage-styles', + tooltipText: __( + 'There’s no place like a great home page', + 'wp-module-onboarding' + ), + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss b/src/OnboardingSPA/steps/DesignHomepageMenu/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss rename to src/OnboardingSPA/steps/DesignHomepageMenu/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/contents.js index a8f84f284..97e89926c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../utils/locales/translations'; +import { translations } from '../../../../../utils/locales/translations'; import { brush } from '@wordpress/icons'; const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js similarity index 83% rename from src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js index cd9b5e74f..69a5b3010 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js @@ -10,10 +10,14 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/InfoPanel' + ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/HelpPanel' + ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) @@ -52,20 +56,14 @@ const LearnMore = () => { ); return ( -
    +
    { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( - + ) } { const content = getContents(); @@ -76,7 +76,7 @@ const StepDesignThemeStylesMenu = () => { const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( - currentStep.patternId, + currentStep?.data?.patternId, true ); if ( patternsResponse?.error ) { @@ -120,13 +120,16 @@ const StepDesignThemeStylesMenu = () => { const skiptoCustomPage = () => { // Add Custom Steps into the Flow - const updates = injectInAllSteps( allSteps, conditionalSteps ); + const updates = injectInAllSteps( + allSteps, + designChapter.conditionalSteps + ); updateAllSteps( updates.allSteps ); currentData.data.customDesign = true; setCurrentOnboardingData( currentData ); // Find the first Custom Conditional Step and navigate there - navigate( conditionalSteps[ 0 ].path ); + navigate( designChapter.conditionalSteps[ 0 ].path ); }; const buildPreviews = () => { @@ -166,7 +169,7 @@ const StepDesignThemeStylesMenu = () => { import( './index' ) ); + +export const stepDesignThemeStylesMenu = new Step( + { + path: '/wp-setup/step/design/theme-styles/menu', + title: __( 'Theme Styles', 'wp-module-onboarding' ), + Component: StepDesignThemeStylesMenu, + icon: styles, + drawerView: VIEW_NAV_DESIGN, + sidebars: { + LearnMore: { + SidebarComponents: [ + LearnMore, + ], + }, + }, + data: { + designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', + patternId: 'theme-styles', + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss rename to src/OnboardingSPA/steps/DesignThemeStyles/Menu/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/contents.js index a8f84f284..97e89926c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../utils/locales/translations'; +import { translations } from '../../../../../utils/locales/translations'; import { brush } from '@wordpress/icons'; const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js similarity index 78% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js index d00037937..f146cbdb2 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js @@ -1,35 +1,35 @@ import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/InfoPanel' + '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/HelpPanel' + '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../../components/Button/ButtonWhite' ) + import( '../../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js similarity index 83% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js rename to src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js index a94730d64..111ecbf0d 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js @@ -2,26 +2,26 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { useLocation, useNavigate } from 'react-router-dom'; import { CheckboxControl } from '@wordpress/components'; -import { conditionalSteps } from '../../../../data/routes'; +import { design as designChapter } from '../../../chapters/design'; import { LivePreview, GlobalStylesProvider, -} from '../../../../components/LivePreview'; +} from '../../../components/LivePreview'; import getContents from '../contents'; -import CommonLayout from '../../../../components/Layouts/Common'; +import CommonLayout from '../../../components/Layouts/Common'; import { VIEW_DESIGN_THEME_STYLES_PREVIEW, THEME_STATUS_ACTIVE, THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, -} from '../../../../../constants'; +} from '../../../../constants'; import { injectInAllSteps, removeFromAllSteps, -} from '../../../../data/routes/allStepsHandler'; -import { store as nfdOnboardingStore } from '../../../../store'; -import { getPatterns } from '../../../../utils/api/patterns'; -import { DesignStateHandler } from '../../../../components/StateHandlers'; +} from '../../../data/flows/utils'; +import { store as nfdOnboardingStore } from '../../../store'; +import { getPatterns } from '../../../utils/api/patterns'; +import { DesignStateHandler } from '../../../components/StateHandlers'; const StepDesignThemeStylesPreview = () => { const content = getContents(); @@ -61,7 +61,7 @@ const StepDesignThemeStylesPreview = () => { const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( - currentStep.patternId, + currentStep?.data?.patternId, true ); if ( patternsResponse?.error ) { @@ -78,10 +78,16 @@ const StepDesignThemeStylesPreview = () => { setCustomize( selected ); if ( selected ) { - const updates = injectInAllSteps( allSteps, conditionalSteps ); + const updates = injectInAllSteps( + allSteps, + designChapter.conditionalSteps + ); updateAllSteps( updates.allSteps ); } else { - const updates = removeFromAllSteps( allSteps, conditionalSteps ); + const updates = removeFromAllSteps( + allSteps, + designChapter.conditionalSteps + ); updateAllSteps( updates.allSteps ); } @@ -91,7 +97,7 @@ const StepDesignThemeStylesPreview = () => { } if ( selected && 'click' === context ) { - navigate( conditionalSteps[ 0 ].path ); + navigate( designChapter.conditionalSteps[ 0 ].path ); } }; diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js new file mode 100644 index 000000000..b4822ae90 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js @@ -0,0 +1,29 @@ +import { styles } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../../data/models/Step"; +import LearnMore from "./Sidebar/LearnMore"; +import { VIEW_DESIGN_THEME_STYLES_PREVIEW } from "../../../../constants"; + +const StepDesignThemeStylesPreview= lazy( () => import( './index' ) ); + +export const stepDesignThemeStylesPreview = new Step( + { + path: '/wp-setup/step/design/theme-styles/preview', + title: __( 'Theme Styles', 'wp-module-onboarding' ), + Component: StepDesignThemeStylesPreview, + icon: styles, + drawerView: VIEW_DESIGN_THEME_STYLES_PREVIEW, + sidebars: { + LearnMore: { + SidebarComponents: [ + LearnMore, + ], + }, + }, + data: { + designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', + patternId: 'theme-styles', + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss rename to src/OnboardingSPA/steps/DesignThemeStyles/Preview/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/contents.js b/src/OnboardingSPA/steps/DesignThemeStyles/contents.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/contents.js rename to src/OnboardingSPA/steps/DesignThemeStyles/contents.js diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/stylesheet.scss b/src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignThemeStyles/stylesheet.scss rename to src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/contents.js similarity index 94% rename from src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/contents.js index 4c4cf91a7..f48aeb014 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { typography } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js similarity index 77% rename from src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js index a663dfdb1..c8234f274 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js @@ -1,31 +1,31 @@ import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../components/Button/ButtonWhite' ) + import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/steps/DesignTypography/index.js similarity index 79% rename from src/OnboardingSPA/pages/Steps/DesignTypography/index.js rename to src/OnboardingSPA/steps/DesignTypography/index.js index e61c598fc..21737b9e7 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/steps/DesignTypography/index.js @@ -2,32 +2,33 @@ import { useLocation } from 'react-router-dom'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { getPatterns } from '../../../utils/api/patterns'; -import { store as nfdOnboardingStore } from '../../../store'; -import CommonLayout from '../../../components/Layouts/Common'; +import { getPatterns } from '../../utils/api/patterns'; +import { store as nfdOnboardingStore } from '../../store'; +import CommonLayout from '../../components/Layouts/Common'; import { SIDEBAR_LEARN_MORE, THEME_STATUS_INIT, VIEW_DESIGN_TYPOGRAPHY, THEME_STATUS_ACTIVE, -} from '../../../../constants'; -import { DesignStateHandler } from '../../../components/StateHandlers'; +} from '../../../constants'; +import { DesignStateHandler } from '../../components/StateHandlers'; import { LivePreview, GlobalStylesProvider, -} from '../../../components/LivePreview'; +} from '../../components/LivePreview'; + +import { initialDesignRoutes } from '../../data/flows'; const StepDesignTypography = () => { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentStep, themeStatus, designSteps } = useSelect( ( select ) => { + const { currentStep, themeStatus } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - designSteps: select( nfdOnboardingStore ).getDesignSteps(), }; }, [] ); @@ -41,7 +42,8 @@ const StepDesignTypography = () => { const getFontPatterns = async () => { const patternsResponse = await getPatterns( - currentStep?.patternId ?? designSteps[ 0 ].patternId, + currentStep?.data?.patternId ?? + initialDesignRoutes[ 0 ]?.data.patternId, true ); if ( patternsResponse?.error ) { diff --git a/src/OnboardingSPA/steps/DesignTypography/step.js b/src/OnboardingSPA/steps/DesignTypography/step.js new file mode 100644 index 000000000..e6181a013 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignTypography/step.js @@ -0,0 +1,27 @@ +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../data/models/Step"; +import { typography } from '@wordpress/icons'; +import LearnMore from "./Sidebar/LearnMore"; +import { VIEW_DESIGN_TYPOGRAPHY } from '../../../constants'; + +const StepDesignTypography = lazy( () => import( './index' ) ); + +export const stepDesignTypography = new Step( + { + path: '/wp-setup/step/design/typography', + title: __( 'Typography', 'wp-module-onboarding' ), + Component: StepDesignTypography, + icon: typography, + drawerView: VIEW_DESIGN_TYPOGRAPHY, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( "What's your font style?", 'wp-module-onboarding' ), + patternId: 'theme-styles', + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/steps/DesignTypography/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss rename to src/OnboardingSPA/steps/DesignTypography/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js similarity index 94% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js index 0931f294b..6537fbbab 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../utils/locales/translations'; +import { translations } from '../../../../../utils/locales/translations'; import { store } from '@wordpress/icons'; const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js similarity index 90% rename from src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js index 7496c841f..4c5636e00 100644 --- a/src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js @@ -1,5 +1,5 @@ -import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../../../store'; import getContents from './contents'; @@ -10,10 +10,14 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/InfoPanel' + ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/HelpPanel' + ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) @@ -52,7 +56,7 @@ const LearnMore = () => { ); return ( -
    +
    { const [ settings, setSettings ] = useState(); diff --git a/src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js new file mode 100644 index 000000000..f4827c994 --- /dev/null +++ b/src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js @@ -0,0 +1,26 @@ +import { store } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../../data/models/Step"; +import LearnMore from "./Sidebar/LearnMore"; +import { VIEW_NAV_ECOMMERCE_STORE_INFO } from "../../../../constants"; + +const StepAddress = lazy( () => import( './index' ) ); + +export const stepAddress = new Step( + { + path: '/ecommerce/step/address', + title: __( 'Street Address', 'wp-module-onboarding' ), + Component: StepAddress, + icon: store, + drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( 'Street Address', 'wp-module-onboarding' ), + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js similarity index 94% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js index 3a1ea0b86..05e5334b7 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../utils/locales/translations'; +import { translations } from '../../../../../utils/locales/translations'; import { box } from '@wordpress/icons'; const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js similarity index 90% rename from src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js index bd3a0a80b..990ed62ff 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js @@ -1,5 +1,5 @@ -import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../../../store'; import getContents from './contents'; @@ -10,10 +10,14 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/InfoPanel' + ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/HelpPanel' + ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) @@ -52,7 +56,7 @@ const LearnMore = () => { ); return ( -
    +
    { diff --git a/src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js b/src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js new file mode 100644 index 000000000..ca9bba189 --- /dev/null +++ b/src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js @@ -0,0 +1,26 @@ +import { shipping } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../../data/models/Step"; +import LearnMore from "./Sidebar/LearnMore"; +import { VIEW_NAV_ECOMMERCE_STORE_INFO } from "../../../../constants"; + +const StepProducts = lazy( () => import( './index' ) ); + +export const stepProducts = new Step( + { + path: '/ecommerce/step/products', + title: __( 'Product Info', 'wp-module-onboarding' ), + Component: StepProducts, + icon: shipping, + drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( 'Product Info', 'wp-module-onboarding' ), + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/contents.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/contents.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/contents.js rename to src/OnboardingSPA/steps/Ecommerce/StepTax/contents.js diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js rename to src/OnboardingSPA/steps/Ecommerce/StepTax/index.js diff --git a/src/OnboardingSPA/steps/Ecommerce/StepTax/step.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/step.js new file mode 100644 index 000000000..3fb535809 --- /dev/null +++ b/src/OnboardingSPA/steps/Ecommerce/StepTax/step.js @@ -0,0 +1,26 @@ +import { institution } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../../../data/models/Step"; +import LearnMore from "./Sidebar/LearnMore"; +import { VIEW_NAV_ECOMMERCE_STORE_INFO } from "../../../../../constants"; + +const StepTax = lazy( () => import( './index' ) ); + +export const stepTax = new Step( + { + path: '/ecommerce/step/tax', + title: __( 'Tax Info', 'wp-module-onboarding' ), + Component: StepTax, + icon: institution, + drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( 'Tax Info', 'wp-module-onboarding' ), + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/countries.json b/src/OnboardingSPA/steps/Ecommerce/countries.json similarity index 100% rename from src/OnboardingSPA/pages/Steps/Ecommerce/countries.json rename to src/OnboardingSPA/steps/Ecommerce/countries.json diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/currencies.json b/src/OnboardingSPA/steps/Ecommerce/currencies.json similarity index 100% rename from src/OnboardingSPA/pages/Steps/Ecommerce/currencies.json rename to src/OnboardingSPA/steps/Ecommerce/currencies.json diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/steps/Ecommerce/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss rename to src/OnboardingSPA/steps/Ecommerce/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/useWPSettings.js b/src/OnboardingSPA/steps/Ecommerce/useWPSettings.js similarity index 66% rename from src/OnboardingSPA/pages/Steps/Ecommerce/useWPSettings.js rename to src/OnboardingSPA/steps/Ecommerce/useWPSettings.js index c36d4abcf..6540ee751 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/useWPSettings.js +++ b/src/OnboardingSPA/steps/Ecommerce/useWPSettings.js @@ -1,4 +1,4 @@ -import { fetchWPSettings } from '../../../utils/api/ecommerce'; +import { fetchWPSettings } from '../../utils/api/ecommerce'; export async function useWPSettings() { const settings = await fetchWPSettings().catch( () => ( {} ) ); diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js similarity index 94% rename from src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js index 54a2966cd..82a790d17 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../utils/locales/translations'; +import { translations } from '../../../../../utils/locales/translations'; import { home } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js similarity index 89% rename from src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js index 3517ba2cf..25f68457b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js @@ -10,10 +10,14 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/InfoPanel' + ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( + '../../../../../components/Sidebar/components/LearnMore/HelpPanel' + ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) @@ -47,7 +51,7 @@ const LearnMore = () => { const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); return ( -
    +
    { return { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js similarity index 80% rename from src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js rename to src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js index a835fd089..93c26a97d 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js +++ b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js @@ -1,23 +1,23 @@ -import CommonLayout from '../../../../components/Layouts/Common'; -import NewfoldLargeCard from '../../../../components/NewfoldLargeCard'; -import CardHeader from '../../../../components/CardHeader'; -import NavCardButton from '../../../../components/Button/NavCardButton'; -import NeedHelpTag from '../../../../components/NeedHelpTag'; +import CommonLayout from '../../../components/Layouts/Common'; +import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; +import CardHeader from '../../../components/CardHeader'; +import NavCardButton from '../../../components/Button/NavCardButton'; +import NeedHelpTag from '../../../components/NeedHelpTag'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED, -} from '../../../../../constants'; -import { store as nfdOnboardingStore } from '../../../../store'; +} from '../../../../constants'; +import { store as nfdOnboardingStore } from '../../../store'; import { RadioControl } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import Animate from '../../../../components/Animate'; +import Animate from '../../../components/Animate'; import getContents from './contents'; import { OnboardingEvent, trackOnboardingEvent, -} from '../../../../utils/analytics/hiive'; -import { ACTION_EXPERIENCE_LEVEL_SET } from '../../../../utils/analytics/hiive/constants'; +} from '../../../utils/analytics/hiive'; +import { ACTION_EXPERIENCE_LEVEL_SET } from '../../../utils/analytics/hiive/constants'; const GetStartedExperience = () => { const [ wpComfortLevel, setWpComfortLevel ] = useState( '0' ); diff --git a/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js new file mode 100644 index 000000000..84ef932cc --- /dev/null +++ b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js @@ -0,0 +1,23 @@ +import { home } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import LearnMore from "./Sidebar/LearnMore"; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../../data/models/Step"; +import { VIEW_NAV_GET_STARTED } from "../../../../constants"; + +const GetStartedExperience = lazy( () => import( './index' ) ); + +export const stepExperience = new Step( + { + path: '/wp-setup/step/get-started/experience', + title: __( 'WordPress Experience', 'wp-module-onboarding' ), + Component: GetStartedExperience, + icon: home, + drawerView: VIEW_NAV_GET_STARTED, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss rename to src/OnboardingSPA/steps/GetStarted/GetStartedExperience/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/contents.js index 79ae87e61..4338f2b6c 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../../utils/locales/translations'; +import { translations } from '../../../../../../utils/locales/translations'; import { home } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js similarity index 77% rename from src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js index fd8ddcce8..051fc46b9 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js @@ -1,35 +1,35 @@ import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => import( - '../../../../../../../components/Sidebar/components/LearnMore/InfoPanel' + '../../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => import( - '../../../../../../../components/Sidebar/components/LearnMore/HelpPanel' + '../../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../../../components/Button/ButtonWhite' ) + import( '../../../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js similarity index 88% rename from src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js index 650023ebc..587a418b6 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js @@ -1,23 +1,23 @@ -import CommonLayout from '../../../../../components/Layouts/Common'; -import NewfoldLargeCard from '../../../../../components/NewfoldLargeCard'; +import CommonLayout from '../../../../components/Layouts/Common'; +import NewfoldLargeCard from '../../../../components/NewfoldLargeCard'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED, -} from '../../../../../../constants'; +} from '../../../../../constants'; import getContents from '../contents'; -import { store as nfdOnboardingStore } from '../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../store'; import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; -import CardHeader from '../../../../../components/CardHeader'; -import NavCardButton from '../../../../../components/Button/NavCardButton'; -import NeedHelpTag from '../../../../../components/NeedHelpTag'; -import Animate from '../../../../../components/Animate'; -import { getSiteClassification } from '../../../../../utils/api/siteClassification'; +import CardHeader from '../../../../components/CardHeader'; +import NavCardButton from '../../../../components/Button/NavCardButton'; +import NeedHelpTag from '../../../../components/NeedHelpTag'; +import Animate from '../../../../components/Animate'; +import { getSiteClassification } from '../../../../utils/api/siteClassification'; import { OnboardingEvent, trackOnboardingEvent, -} from '../../../../../utils/analytics/hiive'; -import { ACTION_PRIMARY_TYPE_SET } from '../../../../../utils/analytics/hiive/constants'; +} from '../../../../utils/analytics/hiive'; +import { ACTION_PRIMARY_TYPE_SET } from '../../../../utils/analytics/hiive/constants'; const StepPrimarySetup = () => { const { diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js new file mode 100644 index 000000000..99ba2ce5f --- /dev/null +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js @@ -0,0 +1,28 @@ +import { moveTo } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import LearnMore from "./Sidebar/LearnMore"; +import { __, sprintf } from '@wordpress/i18n'; +import { Step } from "../../../../data/models/Step"; +import { translations } from "../../../../utils/locales/translations"; + +const StepPrimarySetup = lazy( () => import( './index' ) ); + +export const stepPrimarySetup = new Step( + { + path: '/wp-setup/step/get-started/site-primary', + title: sprintf( + /* translators: %s: website or store */ + __( 'Primary %s Setup', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + Component: StepPrimarySetup, + icon: moveTo, + sidebars: { + LearnMore: { + SidebarComponents: [ + LearnMore, + ], + }, + }, + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/contents.js index d86e4ce0b..eafeaff81 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../../utils/locales/translations'; +import { translations } from '../../../../../../utils/locales/translations'; import { home } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index.js similarity index 99% rename from src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index.js index ccbd048e3..15169d22f 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/Sidebar/LearnMore/index.js @@ -51,7 +51,7 @@ const LearnMore = () => { const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); return ( -
    +
    { +const StepSecondaryStep = () => { const { setDrawerActiveView, setSidebarActiveView, @@ -326,4 +326,4 @@ const StepPrimarySetup = () => { ); }; -export default StepPrimarySetup; +export default StepSecondaryStep; diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js new file mode 100644 index 000000000..9ed7040aa --- /dev/null +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js @@ -0,0 +1,28 @@ +import { moveTo } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import LearnMore from "./Sidebar/LearnMore"; +import { __, sprintf } from '@wordpress/i18n'; +import { Step } from "../../../../data/models/Step"; +import { translations } from "../../../../utils/locales/translations"; + +const StepSecondaryStep = lazy( () => import( './index' ) ); + +export const stepSecondarySetup = new Step( + { + path: '/wp-setup/step/get-started/site-secondary', + title: sprintf( + /* translators: %s: website or store */ + __( 'Secondary %s Setup', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + Component: StepSecondaryStep, + icon: moveTo, + sidebars: { + LearnMore: { + SidebarComponents: [ + LearnMore, + ], + }, + }, + }, +) diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/contents.js similarity index 92% rename from src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js rename to src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/contents.js index ce3999914..bd9a8ae19 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/contents.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../utils/locales/translations'; +import { translations } from '../../../utils/locales/translations'; const getContents = () => { return { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/contents.js similarity index 96% rename from src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/contents.js index b4859e26c..7fde38169 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../utils/locales/translations'; +import { translations } from '../../../../../utils/locales/translations'; import { home } from '@wordpress/icons'; const getContents = ( brandName, expertsLink, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/index.js similarity index 79% rename from src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/index.js index 8ccafd08b..abddd1295 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/index.js @@ -1,38 +1,38 @@ import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/InfoPanel' + '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/HelpPanel' + '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonBlue = lazy( () => - import( '../../../../../../components/Button/ButtonBlue' ) + import( '../../../../../components/Button/ButtonBlue' ) ); const ButtonWhite = lazy( () => - import( '../../../../../../components/Button/ButtonWhite' ) + import( '../../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js b/src/OnboardingSPA/steps/GetStarted/Welcome/contents.js similarity index 96% rename from src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js rename to src/OnboardingSPA/steps/GetStarted/Welcome/contents.js index 4fb479fb7..1deac5108 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/contents.js +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../utils/locales/translations'; +import { translations } from '../../../utils/locales/translations'; const getContents = ( brandName ) => { return { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js similarity index 78% rename from src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js rename to src/OnboardingSPA/steps/GetStarted/Welcome/index.js index 06ebcea06..c7a0bbeda 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/index.js @@ -1,18 +1,18 @@ -import { store as nfdOnboardingStore } from '../../../../store'; +import { store as nfdOnboardingStore } from '../../../store'; import { useLocation } from 'react-router-dom'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import CommonLayout from '../../../../components/Layouts/Common'; -import NewfoldLargeCard from '../../../../components/NewfoldLargeCard'; -import CardHeader from '../../../../components/CardHeader'; -import NavCardButton from '../../../../components/Button/NavCardButton'; -import Tab from '../../../../components/Tab'; -import TabPanelHover from '../../../../components/TabPanelHover'; +import CommonLayout from '../../../components/Layouts/Common'; +import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; +import CardHeader from '../../../components/CardHeader'; +import NavCardButton from '../../../components/Button/NavCardButton'; +import Tab from '../../../components/Tab'; +import TabPanelHover from '../../../components/TabPanelHover'; import { VIEW_NAV_GET_STARTED, SIDEBAR_LEARN_MORE, -} from '../../../../../constants'; +} from '../../../../constants'; import getContents from './contents'; const StepWelcome = () => { diff --git a/src/OnboardingSPA/steps/GetStarted/Welcome/step.js b/src/OnboardingSPA/steps/GetStarted/Welcome/step.js new file mode 100644 index 000000000..7f32f172e --- /dev/null +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/step.js @@ -0,0 +1,26 @@ +import { home } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import LearnMore from "./Sidebar/LearnMore"; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../../data/models/Step"; +import { VIEW_NAV_GET_STARTED } from "../../../../constants"; + +const StepWelcome = lazy( () => import( './index' ) ); + +export const stepWelcome = new Step( + { + path: '/wp-setup/step/get-started/welcome', + title: __( 'Welcome', 'wp-module-onboarding' ), + Component: StepWelcome, + icon: home, + drawerView: VIEW_NAV_GET_STARTED, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( 'Welcome', 'wp-module-onboarding' ), + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/GetStarted/Welcome/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss rename to src/OnboardingSPA/steps/GetStarted/Welcome/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/index.js b/src/OnboardingSPA/steps/GetStarted/index.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/GetStarted/index.js rename to src/OnboardingSPA/steps/GetStarted/index.js diff --git a/src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/contents.js index f49f1c4e9..a20846964 100644 --- a/src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { plugins } from '@wordpress/icons'; const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/index.js similarity index 74% rename from src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/index.js index 67ebaf2cc..86416d468 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/index.js @@ -1,35 +1,31 @@ -import { lazy } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; +import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../../components/Button/ButtonWhite' ) + import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); @@ -56,7 +52,7 @@ const LearnMore = () => { ); return ( -
    +
    { const isLargeViewport = useViewportMatch( 'medium' ); @@ -108,7 +108,8 @@ const StepSiteFeatures = () => { { ! customPluginsList && ( ) } diff --git a/src/OnboardingSPA/steps/SiteFeatures/step.js b/src/OnboardingSPA/steps/SiteFeatures/step.js new file mode 100644 index 000000000..a62dcf1c2 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteFeatures/step.js @@ -0,0 +1,28 @@ +import { plugins } from "@wordpress/icons"; +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../data/models/Step"; +import LearnMore from "./Sidebar/LearnMore"; + +const StepSiteFeatures = lazy( () => import( './index' ) ); + +export const stepSiteFeatures = new Step( + { + path: '/wp-setup/step/site-features', + title: __( 'Features', 'wp-module-onboarding' ), + Component: StepSiteFeatures, + icon: plugins, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( + 'Key features to supercharge your site', + 'wp-module-onboarding' + ), + patternId: 'site-features', + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/SitePages/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/contents.js similarity index 95% rename from src/OnboardingSPA/pages/Steps/SitePages/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/contents.js index 95d70db6a..2880a7c54 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { copy } from '@wordpress/icons'; const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/pages/Steps/SitePages/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/index.js similarity index 77% rename from src/OnboardingSPA/pages/Steps/SitePages/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/index.js index f138551bf..a0ca7b5d0 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/index.js @@ -1,31 +1,31 @@ import { useSelect } from '@wordpress/data'; import { lazy } from '@wordpress/element'; -import { store as nfdOnboardingStore } from '../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../components/Button/ButtonWhite' ) + import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/pages/Steps/SitePages/contents.js b/src/OnboardingSPA/steps/SitePages/contents.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/SitePages/contents.js rename to src/OnboardingSPA/steps/SitePages/contents.js diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/steps/SitePages/index.js similarity index 87% rename from src/OnboardingSPA/pages/Steps/SitePages/index.js rename to src/OnboardingSPA/steps/SitePages/index.js index 7d26fc3db..d08891c57 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/steps/SitePages/index.js @@ -2,22 +2,22 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; -import { store as nfdOnboardingStore } from '../../../store'; -import CommonLayout from '../../../components/Layouts/Common'; -import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; -import { getPatterns } from '../../../utils/api/patterns'; +import { store as nfdOnboardingStore } from '../../store'; +import CommonLayout from '../../components/Layouts/Common'; +import HeadingWithSubHeading from '../../components/HeadingWithSubHeading'; +import { getPatterns } from '../../utils/api/patterns'; import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, VIEW_NAV_DESIGN, -} from '../../../../constants'; -import { DesignStateHandler } from '../../../components/StateHandlers'; +} from '../../../constants'; +import { DesignStateHandler } from '../../components/StateHandlers'; import { GlobalStylesProvider, LivePreviewSelectableCardWithInfo, -} from '../../../components/LivePreview'; -import LivePreviewSkeleton from '../../../components/LivePreview/LivePreviewSkeleton'; +} from '../../components/LivePreview'; +import LivePreviewSkeleton from '../../components/LivePreview/LivePreviewSkeleton'; import getContents from './contents'; const StepSitePages = () => { @@ -52,7 +52,9 @@ const StepSitePages = () => { }, [] ); const getSitePages = async () => { - const sitePagesResponse = await getPatterns( currentStep.patternId ); + const sitePagesResponse = await getPatterns( + currentStep?.data?.patternId + ); if ( sitePagesResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } @@ -163,8 +165,9 @@ const StepSitePages = () => { import( './index' ) ); + +export const stepSitePages = new Step( + { + path: '/wp-setup/step/design/site-pages', + title: __( 'Page Layouts', 'wp-module-onboarding' ), + Component: StepSitePages, + icon: copy, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( + 'You have ideas, we have page templates', + 'wp-module-onboarding' + ), + patternId: 'site-pages', + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss b/src/OnboardingSPA/steps/SitePages/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss rename to src/OnboardingSPA/steps/SitePages/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/contents.js b/src/OnboardingSPA/steps/TopPriority/contents.js similarity index 100% rename from src/OnboardingSPA/pages/Steps/TopPriority/contents.js rename to src/OnboardingSPA/steps/TopPriority/contents.js diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/index.js b/src/OnboardingSPA/steps/TopPriority/index.js similarity index 82% rename from src/OnboardingSPA/pages/Steps/TopPriority/index.js rename to src/OnboardingSPA/steps/TopPriority/index.js index 3e5ad24b1..9db3bb2c0 100644 --- a/src/OnboardingSPA/pages/Steps/TopPriority/index.js +++ b/src/OnboardingSPA/steps/TopPriority/index.js @@ -2,22 +2,23 @@ import { __ } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { useEffect, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { VIEW_NAV_PRIMARY } from '../../../../constants'; -import SkipButton from '../../../components/SkipButton'; -import { store as nfdOnboardingStore } from '../../../store'; -import CommonLayout from '../../../components/Layouts/Common'; -import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; -import SelectableCardList from '../../../components/SelectableCardList/selectable-card-list'; +import SkipButton from '../../components/SkipButton'; +import { store as nfdOnboardingStore } from '../../store'; +import CommonLayout from '../../components/Layouts/Common'; +import HeadingWithSubHeading from '../../components/HeadingWithSubHeading'; +import SelectableCardList from '../../components/SelectableCardList/selectable-card-list'; import getContents from './contents'; import { OnboardingEvent, trackOnboardingEvent, -} from '../../../utils/analytics/hiive'; +} from '../../utils/analytics/hiive'; import { ACTION_ONBOARDING_STEP_SKIPPED, ACTION_ONBOARDING_TOP_PRIORITY_SET, -} from '../../../utils/analytics/hiive/constants'; +} from '../../utils/analytics/hiive/constants'; +import { VIEW_NAV_PRIMARY } from '../../../constants'; +import { DEFAULT_FLOW, ECOMMERCE_FLOW } from '../../data/flows/constants'; const StepTopPriority = () => { const priorityTypes = { @@ -89,8 +90,9 @@ const StepTopPriority = () => { }, [ isLoaded ] ); const handleSelling = () => { - if ( 'ecommerce' !== window.nfdOnboarding.currentFlow ) { - window.nfdOnboarding.newFlow = 'ecommerce'; + if ( ECOMMERCE_FLOW !== window.nfdOnboarding.currentFlow ) { + window.nfdOnboarding.newFlow = ECOMMERCE_FLOW; + window.nfdOnboarding.currentFlow = ECOMMERCE_FLOW; } }; @@ -108,6 +110,7 @@ const StepTopPriority = () => { handleSelling(); } else { window.nfdOnboarding.newFlow = undefined; + window.nfdOnboarding.currentFlow = DEFAULT_FLOW; } }, [ selected ] ); diff --git a/src/OnboardingSPA/steps/TopPriority/step.js b/src/OnboardingSPA/steps/TopPriority/step.js new file mode 100644 index 000000000..422b0f548 --- /dev/null +++ b/src/OnboardingSPA/steps/TopPriority/step.js @@ -0,0 +1,16 @@ +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../data/models/Step"; +import { navigation } from '@wordpress/icons'; + +const StepTopPriority = lazy( () => import( './index' ) ); + +export const stepTopPriority = new Step( + { + path: '/wp-setup/step/top-priority', + title: __( 'Top Priority', 'wp-module-onboarding' ), + tooltipText: __( 'Tell us your top priority', 'wp-module-onboarding' ), + Component: StepTopPriority, + icon: navigation, + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss b/src/OnboardingSPA/steps/TopPriority/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/TopPriority/stylesheet.scss rename to src/OnboardingSPA/steps/TopPriority/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/contents.js similarity index 96% rename from src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/contents.js index d9eae3733..8071e5405 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../utils/locales/translations'; +import { translations } from '../../../../utils/locales/translations'; import { moveTo } from '@wordpress/icons'; const getContents = ( brandName, techSupportLink, fullServiceCreativeTeamLink ) => { diff --git a/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js new file mode 100644 index 000000000..10fa2e2b0 --- /dev/null +++ b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js @@ -0,0 +1,96 @@ +import { useSelect } from '@wordpress/data'; +import { lazy } from '@wordpress/element'; + +import { store as nfdOnboardingStore } from '../../../../store'; +import getContents from './contents'; + +const IllustrationPanel = lazy( () => + import( + '../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + ) +); +const InfoPanel = lazy( () => + import( '../../../../components/Sidebar/components/LearnMore/InfoPanel' ) +); +const HelpPanel = lazy( () => + import( '../../../../components/Sidebar/components/LearnMore/HelpPanel' ) +); +const ButtonWhite = lazy( () => + import( '../../../../components/Button/ButtonWhite' ) +); +const SupportLink = lazy( () => + import( + '../../../../components/Sidebar/components/LearnMore/SupportLink' + ) +); +const StepIntroPanel = lazy( () => + import( + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + ) +); + +const LearnMore = () => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { + return { + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); + + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); + + return ( +
    + + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } + + + { content.help.fullService.link && ( + + window.open( + content.help.fullService.link, + '_blank' + ) + } + /> + ) } + + +
    + ); +}; + +export default LearnMore; diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/stylesheet.scss b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/stylesheet.scss rename to src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/contents.js b/src/OnboardingSPA/steps/WhatNext/contents.js similarity index 96% rename from src/OnboardingSPA/pages/Steps/WhatNext/contents.js rename to src/OnboardingSPA/steps/WhatNext/contents.js index 632d7215b..916feea16 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/contents.js +++ b/src/OnboardingSPA/steps/WhatNext/contents.js @@ -1,4 +1,4 @@ -import { translations } from '../../../utils/locales/translations'; +import { translations } from '../../utils/locales/translations'; import { __, sprintf } from '@wordpress/i18n'; const getContents = ( brandName ) => { diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/index.js b/src/OnboardingSPA/steps/WhatNext/index.js similarity index 75% rename from src/OnboardingSPA/pages/Steps/WhatNext/index.js rename to src/OnboardingSPA/steps/WhatNext/index.js index 830907534..bcfda8bdc 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/index.js +++ b/src/OnboardingSPA/steps/WhatNext/index.js @@ -1,15 +1,15 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import CommonLayout from '../../../components/Layouts/Common'; -import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; -import CardHeader from '../../../components/CardHeader'; -import NavCardButton from '../../../components/Button/NavCardButton'; -import Tab from '../../../components/Tab'; -import TabPanelHover from '../../../components/TabPanelHover'; -import { store as nfdOnboardingStore } from '../../../store'; +import CommonLayout from '../../components/Layouts/Common'; +import NewfoldLargeCard from '../../components/NewfoldLargeCard'; +import CardHeader from '../../components/CardHeader'; +import NavCardButton from '../../components/Button/NavCardButton'; +import Tab from '../../components/Tab'; +import TabPanelHover from '../../components/TabPanelHover'; +import { store as nfdOnboardingStore } from '../../store'; -import { SIDEBAR_LEARN_MORE } from '../../../../constants'; +import { SIDEBAR_LEARN_MORE } from '../../../constants'; import getContents from './contents'; const StepWhatNext = () => { diff --git a/src/OnboardingSPA/steps/WhatNext/step.js b/src/OnboardingSPA/steps/WhatNext/step.js new file mode 100644 index 000000000..3911d9f98 --- /dev/null +++ b/src/OnboardingSPA/steps/WhatNext/step.js @@ -0,0 +1,24 @@ +import { lazy } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { Step } from "../../data/models/Step"; +import { moveTo } from '@wordpress/icons'; +import LearnMore from "./Sidebar/LearnMore"; + +const StepWhatNext = lazy( () => import( './index' ) ); + +export const stepWhatNext = new Step( + { + path: '/wp-setup/step/what-next', + title: __( 'What Next', 'wp-module-onboarding' ), + Component: StepWhatNext, + icon: moveTo, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], + }, + }, + data: { + tooltipText: __( 'How else can we help?', 'wp-module-onboarding' ), + } + }, +) \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/steps/WhatNext/stylesheet.scss similarity index 100% rename from src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss rename to src/OnboardingSPA/steps/WhatNext/stylesheet.scss diff --git a/src/OnboardingSPA/pages/Steps/index.js b/src/OnboardingSPA/steps/index.js similarity index 65% rename from src/OnboardingSPA/pages/Steps/index.js rename to src/OnboardingSPA/steps/index.js index bf1e41c3a..592fb72d3 100644 --- a/src/OnboardingSPA/pages/Steps/index.js +++ b/src/OnboardingSPA/steps/index.js @@ -1,4 +1,4 @@ -import CommonLayout from '../../components/Layouts/Common'; +import CommonLayout from '../components/Layouts/Common'; const StepBase = () => { return StepBase; diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js index a5f7dcaa1..482925ccc 100644 --- a/src/OnboardingSPA/store/actions.js +++ b/src/OnboardingSPA/store/actions.js @@ -1,3 +1,5 @@ +import { DEFAULT_FLOW } from '../data/flows/constants'; + /** * Receives `window.nfdOnboarding` and sets migrated: true. * @@ -11,7 +13,7 @@ export function setRuntime( runtime ) { buildUrl: runtime.buildUrl, siteUrl: runtime.siteUrl, migrated: true, - currentFlow: runtime.currentFlow ?? 'wp-setup', + currentFlow: runtime.currentFlow ?? DEFAULT_FLOW, stepPreviewData: runtime.previewSettings.stepPreviewData, }; return { @@ -187,10 +189,17 @@ export function updateAllSteps( allSteps ) { }; } -export function updateDesignSteps( designSteps ) { +export function updateTopSteps( topSteps ) { + return { + type: 'UPDATE_TOP_STEPS', + topSteps, + }; +} + +export function updateDesignRoutes( designRoutes ) { return { - type: 'UPDATE_DESIGN_STEPS', - designSteps, + type: 'UPDATE_DESIGN_ROUTES', + designRoutes, }; } diff --git a/src/OnboardingSPA/store/index.js b/src/OnboardingSPA/store/index.js index d65ea046c..53a54c71a 100644 --- a/src/OnboardingSPA/store/index.js +++ b/src/OnboardingSPA/store/index.js @@ -4,7 +4,6 @@ import * as selectors from './selectors'; import { createReduxStore, register } from '@wordpress/data'; import { STORE_NAME } from './constants'; -import { controls } from '@wordpress/data-controls'; import reducer from './reducer'; export const nfdOnboardingStoreConfig = { @@ -13,5 +12,5 @@ export const nfdOnboardingStoreConfig = { selectors, }; -export const store = createReduxStore(STORE_NAME, nfdOnboardingStoreConfig); -register(store); +export const store = createReduxStore( STORE_NAME, nfdOnboardingStoreConfig ); +register( store ); diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js index cec7b803a..f987fba16 100644 --- a/src/OnboardingSPA/store/reducer.js +++ b/src/OnboardingSPA/store/reducer.js @@ -3,27 +3,24 @@ import { combineReducers } from '@wordpress/data'; import { VIEW_NAV_PRIMARY, THEME_STATUS_INIT } from '../../constants'; import { - routes as initialRoutes, - steps as initialSteps, - initialDesignSteps, + initialDesignRoutes, + initialRoutes, + initialSteps, initialTopSteps, - initialGetStartedSteps, - initialStoreInfoSteps, -} from '../data/routes/index'; +} from '../data/flows/index'; import { sidebars } from '../data/sidebars/index'; import apiQueueExecutor from '../utils/api-queuer/api-queue-executor'; +import { DEFAULT_FLOW } from '../data/flows/constants'; export function flow( state = { - flow: 'wp-setup', + flow: DEFAULT_FLOW, steps: { routes: initialRoutes, allSteps: initialSteps, - topSteps: initialTopSteps(), - designSteps: initialDesignSteps(), - getStartedSteps: initialGetStartedSteps(), - storeInfoSteps: initialStoreInfoSteps(), - currentStep: initialSteps[ 0 ].path, + topSteps: initialTopSteps, + designRoutes: initialDesignRoutes, + currentStep: '', error: { showDialog: false, continuePath: '', @@ -63,12 +60,20 @@ export function flow( allSteps: action.allSteps, }, }; - case 'UPDATE_DESIGN_STEPS': + case 'UPDATE_TOP_STEPS': return { ...state, steps: { ...state.steps, - designSteps: action.designSteps, + topSteps: action.topSteps, + }, + }; + case 'UPDATE_DESIGN_ROUTES': + return { + ...state, + steps: { + ...state.steps, + designRoutes: action.designRoutes, }, }; case 'SHOW_NAV_ERROR_DIALOG': diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index 55c661c09..d362c1551 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -1,6 +1,7 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { filter, findIndex } from 'lodash'; import { addQueryArgs } from '@wordpress/url'; +import { DEFAULT_FLOW } from '../data/flows/constants'; /** * Get the currently active drawer view @@ -109,7 +110,7 @@ export function getOnboardingSocialData( state ) { * @return {string} Onboarding Flow */ export function getOnboardingFlow( state ) { - return state.runtime.currentFlow ?? 'wp-setup'; + return state.runtime.currentFlow ?? DEFAULT_FLOW; } export function getRoutes( state ) { @@ -130,24 +131,8 @@ export function getTopSteps( state ) { return state.flow.steps.topSteps; } -/** - * Gets design steps to display in drawer submenu. - * - * @param {*} state - * @return {Array} Design Steps - */ -export function getDesignSteps( state ) { - return state.flow.steps.designSteps; -} - -/** - * Gets get-started setup steps to display in drawer submenu. - * - * @param {*} state - * @return {Array} Get Started Steps - */ -export function getGetStartedSteps( state ) { - return state.flow.steps.getStartedSteps; +export function getDesignRoutes( state ) { + return state.flow.steps.designRoutes; } /** @@ -266,10 +251,6 @@ export function getThemeStatus( state ) { return state.settings.themeStatus; } -export function getStoreInfoSteps( state ) { - return state.flow.steps.storeInfoSteps; -} - export function getStepPreviewData( state ) { return state.runtime.previewSettings.stepPreviewData; } @@ -380,3 +361,11 @@ export function getShowErrorDialog( state ) { export function getNavErrorPath( state ) { return state.flow.steps.error.continuePath; } + +export function getExperienceLevel( state ) { + return state.data.flowData.data.wpComfortLevel; +} + +export function getTopPriority( state ) { + return state.data.flowData.data.topPriority.priority1; +} diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index a9d5bdb7b..6c567a147 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -87,6 +87,7 @@ body { --nfd-onboarding-step-what-next-img-3: url(../../Brands/bluehost/bluesky.png); --nfd-onboarding-step-what-next-img-1: url(../../Brands/bluehost/wp-admin.png); --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png); + --nfd-onboarding-step-interstitial-img: url(../../Brands/bluehost/step-intersitial.svg); --nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration: url(../../Brands/bluehost/learn-more-get-started-welcome.svg); --nfd-onboarding-sidebar-learn-more-get-started-wp-experience-illustration: url(../../Brands/bluehost/learn-more-get-started-wp-experience.svg); diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index b984a4dcb..66493ea01 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -28,10 +28,10 @@ @import "../components/Sidebar/stylesheet"; @import "../components/Sidebar/components/LearnMore/stylesheet"; @import "../components/LivePreview/stylesheet"; -@import "../pages/Steps/DesignColors/stylesheet"; -@import "../pages/Steps/GetStarted/GetStartedExperience/stylesheet"; +@import "../steps/DesignColors/stylesheet"; +@import "../steps/GetStarted/GetStartedExperience/stylesheet"; @import "../components/Button/NavCardButton/stylesheet"; -@import "../pages/Steps/Ecommerce/stylesheet"; +@import "../steps/Ecommerce/stylesheet"; @import "../components/ErrorState/stylesheet"; @import "../components/ErrorModal/stylesheet"; @import "../components/CheckboxTemplate/CheckboxItem/stylesheet"; @@ -40,19 +40,20 @@ @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet"; @import "../components/Animate/stylesheet"; @import "../components/NewfoldInterfaceSkeleton/style"; +@import "../components/Loaders/Chapter/Interstitial/stylesheet"; // CSS for Pages -@import "../pages/Steps/BasicInfo/stylesheet"; -@import "../pages/Steps/TopPriority/stylesheet"; -@import "../pages/Steps/DesignHomepageMenu/stylesheet"; -@import "../pages/Steps/GetStarted/Welcome/stylesheet"; -@import "../pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet"; -@import "../pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet"; -@import "../pages/Steps/DesignThemeStyles/stylesheet"; -@import "../pages/Steps/WhatNext/stylesheet"; -@import "../pages/Steps/SitePages/stylesheet"; -@import "../pages/Steps/DesignTypography/stylesheet"; -@import "../pages/Steps/DesignHeaderMenu/stylesheet"; +@import "../steps/BasicInfo/stylesheet"; +@import "../steps/TopPriority/stylesheet"; +@import "../steps/DesignHomepageMenu/stylesheet"; +@import "../steps/GetStarted/Welcome/stylesheet"; +@import "../steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet"; +@import "../steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet"; +@import "../steps/DesignThemeStyles/stylesheet"; +@import "../steps/WhatNext/stylesheet"; +@import "../steps/SitePages/stylesheet"; +@import "../steps/DesignTypography/stylesheet"; +@import "../steps/DesignHeaderMenu/stylesheet"; .nfd-onboarding-container { display: flex; diff --git a/src/OnboardingSPA/utils/locales/translations.js b/src/OnboardingSPA/utils/locales/translations.js index 9083b128c..b176867a3 100644 --- a/src/OnboardingSPA/utils/locales/translations.js +++ b/src/OnboardingSPA/utils/locales/translations.js @@ -1,15 +1,19 @@ +import { DEFAULT_FLOW } from '../../data/flows/constants'; import { translationMap } from '../../data/translations'; -/** - * Translation component according to the OnboardingFlow - * Pass any word and/or context which we want to swap and display on the UI - * - * @return translationMap word - */ -export const translations = ( word, context='noun' ) => { - const flow = window?.nfdOnboarding?.currentFlow || 'wp-setup'; - const translated_word = translationMap[flow][word.toLowerCase()][context]; - return (word==word.toUpperCase())? translated_word.toUpperCase() : - (word[0] == word[0].toUpperCase())? translated_word[0].toUpperCase()+translated_word.substring(1) : - translated_word; -} \ No newline at end of file +export const translations = ( word, context = 'noun' ) => { + const flow = window?.nfdOnboarding?.currentFlow || DEFAULT_FLOW; + const translatedWord = + translationMap[ flow ][ word.toLowerCase() ][ context ]; + if ( word === word.toUpperCase() ) { + return translatedWord.toUpperCase(); + } + + if ( word[ 0 ] === word[ 0 ].toUpperCase() ) { + return ( + translatedWord[ 0 ].toUpperCase() + translatedWord.substring( 1 ) + ); + } + + return translatedWord; +}; From 6d637d33055ec8e0ddeb09431d491e87bd604f08 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Sep 2023 15:19:36 +0530 Subject: [PATCH 04/18] uncomment exit --- .../Loaders/Chapter/Interstitial/index.js | 177 +++++++++++------- 1 file changed, 105 insertions(+), 72 deletions(-) diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js index 36a540dfd..a72f00e36 100644 --- a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js @@ -4,95 +4,128 @@ import { useNavigate } from 'react-router-dom'; import { Icon, chevronRight } from '@wordpress/icons'; import { store as nfdOnboardingStore } from '../../../../store'; -import CardHeader from "../../../CardHeader"; -import CommonLayout from "../../../Layouts/Common"; -import NewfoldLargeCard from "../../../NewfoldLargeCard"; -import getContents from "./contents"; +import CardHeader from '../../../CardHeader'; +import CommonLayout from '../../../Layouts/Common'; +import NewfoldLargeCard from '../../../NewfoldLargeCard'; +import getContents from './contents'; import ButtonBlue from '../../../Button/ButtonBlue'; import ButtonWhite from '../../../Button/ButtonWhite'; import { activateInitialPlugins } from '../../../../utils/api/plugins'; -import { OnboardingEvent, sendOnboardingEvent } from '../../../../utils/analytics/hiive'; +import { + OnboardingEvent, + sendOnboardingEvent, +} from '../../../../utils/analytics/hiive'; import { pluginDashboardPage, wpAdminPage } from '../../../../../constants'; import { setFlow } from '../../../../utils/api/flow'; import { ACTION_ONBOARDING_COMPLETE } from '../../../../utils/analytics/hiive/constants'; import { ECOMMERCE_FLOW } from '../../../../data/flows/constants'; const ChapterInterstitialLoader = () => { - let [ countdown, setCountdown ] = useState( 15 ); - const [ countdownInterval, setCountdownInterval ] = useState(); - const navigate = useNavigate(); - const { - setIsDrawerSuppressed, - setSidebarActiveView, - } = useDispatch( nfdOnboardingStore ); + let [ countdown, setCountdown ] = useState( 15 ); + const [ countdownInterval, setCountdownInterval ] = useState(); + const navigate = useNavigate(); + const { setIsDrawerSuppressed, setSidebarActiveView } = + useDispatch( nfdOnboardingStore ); - async function saveDataAndExit() { - if ( currentData ) { - currentData.isComplete = new Date().getTime(); - setFlow( currentData ); - } - //Redirect to Admin Page for normal customers - // and Bluehost Dashboard for ecommerce customers - const exitLink = exitToWordpressForEcommerce() - ? pluginDashboardPage - : wpAdminPage; - activateInitialPlugins(); - sendOnboardingEvent( new OnboardingEvent( ACTION_ONBOARDING_COMPLETE ) ); - window.location.replace( exitLink ); - } + async function saveDataAndExit() { + if ( currentData ) { + currentData.isComplete = new Date().getTime(); + setFlow( currentData ); + } + //Redirect to Admin Page for normal customers + // and Bluehost Dashboard for ecommerce customers + const exitLink = exitToWordpressForEcommerce() + ? pluginDashboardPage + : wpAdminPage; + activateInitialPlugins(); + sendOnboardingEvent( + new OnboardingEvent( ACTION_ONBOARDING_COMPLETE ) + ); + window.location.replace( exitLink ); + } - const exitToWordpressForEcommerce = () => { + const exitToWordpressForEcommerce = () => { if ( window.nfdOnboarding.currentFlow === ECOMMERCE_FLOW ) { return true; } return false; }; - - useEffect(() => { - if ( 0 === countdown ) { - clearInterval( countdownInterval ); - // saveDataAndExit(); - } - }, [ countdown ]) - useEffect(() => { - const interval = setInterval(() => { - countdown -= 1; - setCountdown( countdown ); - }, 1000) - setCountdownInterval( interval ); + useEffect( () => { + if ( 0 === countdown ) { + clearInterval( countdownInterval ); + saveDataAndExit(); + } + }, [ countdown ] ); + + useEffect( () => { + const interval = setInterval( () => { + countdown -= 1; + setCountdown( countdown ); + }, 1000 ); + setCountdownInterval( interval ); setIsDrawerSuppressed( true ); setSidebarActiveView( false ); - }, []) - const { brandName, nextStep, currentData } = useSelect((select) => { - return { - brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), - nextStep: select( nfdOnboardingStore ).getNextStep(), - currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), - } - }); - const content = getContents( brandName ); - return ( - - - -
    -
    -

    {content.content.heading}

    -

    {content.content.question1}

    -

    {content.content.question2}

    -

    {content.content.redirectMessage}
    {countdown}

    -
    -
    -
    -
    -
    - saveDataAndExit() } text={content.buttons.button1.text} className={'chapter-interstitial__buttons--blue'} /> - navigate( nextStep.path ) } text={<>{content.buttons.button2.text}} className={'chapter-interstitial__buttons--white'}/> -
    -     -     - ); -} + }, [] ); + const { brandName, nextStep, currentData } = useSelect( ( select ) => { + return { + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + nextStep: select( nfdOnboardingStore ).getNextStep(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + const content = getContents( brandName ); + return ( + + + +
    +
    +

    + { content.content.heading } +

    +

    + { content.content.question1 } +

    +

    + { content.content.question2 } +

    +

    + { content.content.redirectMessage } +
    { countdown } +

    +
    +
    +
    +
    + saveDataAndExit() } + text={ content.buttons.button1.text } + className={ 'chapter-interstitial__buttons--blue' } + /> + navigate( nextStep.path ) } + text={ + <> + + { content.buttons.button2.text } + + + + } + className={ 'chapter-interstitial__buttons--white' } + /> +
    +     +     + ); +}; -export default ChapterInterstitialLoader; \ No newline at end of file +export default ChapterInterstitialLoader; From b16622265477d85615d26c84a4072f85acced43e Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Sep 2023 15:31:11 +0530 Subject: [PATCH 05/18] lint fixes --- src/OnboardingSPA/chapters/commerce.js | 45 +++-- src/OnboardingSPA/chapters/demographic.js | 50 +++--- src/OnboardingSPA/chapters/design.js | 81 ++++----- src/OnboardingSPA/chapters/features.js | 24 ++- src/OnboardingSPA/chapters/layoutContent.js | 48 +++--- src/OnboardingSPA/chapters/utils.js | 161 ++++++++++-------- .../Loaders/Chapter/Interstitial/contents.js | 77 +++++---- .../components/StateHandlers/Flow/index.js | 2 +- src/OnboardingSPA/data/flows/default.js | 30 ++-- src/OnboardingSPA/data/flows/ecommerce.js | 7 +- src/OnboardingSPA/data/flows/index.js | 4 +- src/OnboardingSPA/data/models/Chapter.js | 32 ++-- src/OnboardingSPA/data/models/Flow.js | 12 +- src/OnboardingSPA/data/models/Page.js | 14 +- src/OnboardingSPA/data/models/PseudoStep.js | 18 +- src/OnboardingSPA/data/models/Step.js | 28 +-- src/OnboardingSPA/pages/ErrorPage/page.js | 20 +-- src/OnboardingSPA/pages/IndexPage/index.js | 14 +- src/OnboardingSPA/pages/IndexPage/page.js | 18 +- .../BasicInfo/Sidebar/LearnMore/index.js | 4 +- src/OnboardingSPA/steps/BasicInfo/step.js | 46 +++-- src/OnboardingSPA/steps/Complete/step.js | 13 +- .../DesignColors/Sidebar/LearnMore/index.js | 4 +- src/OnboardingSPA/steps/DesignColors/step.js | 34 ++-- .../Sidebar/LearnMore/index.js | 4 +- .../steps/DesignHeaderMenu/step.js | 46 +++-- .../Sidebar/LearnMore/index.js | 4 +- .../steps/DesignHomepageMenu/step.js | 44 +++-- .../Menu/Sidebar/LearnMore/index.js | 8 +- .../steps/DesignThemeStyles/Menu/step.js | 40 ++--- .../Preview/Sidebar/LearnMore/index.js | 8 +- .../steps/DesignThemeStyles/Preview/step.js | 42 +++-- .../Sidebar/LearnMore/index.js | 4 +- .../steps/DesignTypography/step.js | 34 ++-- .../StepAddress/Sidebar/LearnMore/index.js | 8 +- .../steps/Ecommerce/StepAddress/step.js | 36 ++-- .../StepProducts/Sidebar/LearnMore/index.js | 8 +- .../steps/Ecommerce/StepProducts/step.js | 36 ++-- .../StepTax/Sidebar/LearnMore/contents.js | 2 +- .../StepTax/Sidebar/LearnMore/index.js | 18 +- .../steps/Ecommerce/StepTax/index.js | 14 +- .../steps/Ecommerce/StepTax/step.js | 36 ++-- .../Sidebar/LearnMore/index.js | 8 +- .../GetStarted/GetStartedExperience/step.js | 30 ++-- .../SiteTypeSetup/PrimarySite/step.js | 38 ++--- .../SiteTypeSetup/SecondarySite/step.js | 38 ++--- .../Welcome/Sidebar/LearnMore/index.js | 8 +- .../steps/GetStarted/Welcome/step.js | 36 ++-- src/OnboardingSPA/steps/GetStarted/index.js | 29 ++-- .../SiteFeatures/Sidebar/LearnMore/index.js | 4 +- src/OnboardingSPA/steps/SiteFeatures/step.js | 40 +++-- .../SitePages/Sidebar/LearnMore/index.js | 4 +- src/OnboardingSPA/steps/SitePages/step.js | 40 +++-- src/OnboardingSPA/steps/TopPriority/step.js | 18 +- .../steps/WhatNext/Sidebar/LearnMore/index.js | 4 +- src/OnboardingSPA/steps/WhatNext/step.js | 30 ++-- 56 files changed, 718 insertions(+), 787 deletions(-) diff --git a/src/OnboardingSPA/chapters/commerce.js b/src/OnboardingSPA/chapters/commerce.js index e4331ef61..89a64a76f 100644 --- a/src/OnboardingSPA/chapters/commerce.js +++ b/src/OnboardingSPA/chapters/commerce.js @@ -1,30 +1,23 @@ -import { __ } from "@wordpress/i18n"; +import { __ } from '@wordpress/i18n'; -import { CHAPTER_COMMERCE } from "../../constants"; -import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; -import { stepAddress } from "../steps/Ecommerce/StepAddress/step"; -import { stepProducts } from "../steps/Ecommerce/StepProducts/step"; -import { Chapter } from "../data/models/Chapter"; -import { Step } from "../data/models/Step"; -import { ECOMMERCE_FLOW } from "../data/flows/constants"; +import { CHAPTER_COMMERCE } from '../../constants'; +import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial'; +import { stepAddress } from '../steps/Ecommerce/StepAddress/step'; +import { stepProducts } from '../steps/Ecommerce/StepProducts/step'; +import { Chapter } from '../data/models/Chapter'; +import { Step } from '../data/models/Step'; +import { ECOMMERCE_FLOW } from '../data/flows/constants'; -const interstitialStep = new Step( - { - path: `/${ECOMMERCE_FLOW}/step/interstitial`, - Component: ChapterInterstitialLoader - } -) +const interstitialStep = new Step( { + path: `/${ ECOMMERCE_FLOW }/step/interstitial`, + Component: ChapterInterstitialLoader, +} ); -const steps = [ - stepAddress, - stepProducts, -] +const steps = [ stepAddress, stepProducts ]; -export const commerce = new Chapter( - { - id: CHAPTER_COMMERCE, - name: __( 'Commerce', 'wp-module-onboarding' ), - steps, - interstitialSteps: [ interstitialStep ], - } -) +export const commerce = new Chapter( { + id: CHAPTER_COMMERCE, + name: __( 'Commerce', 'wp-module-onboarding' ), + steps, + interstitialSteps: [ interstitialStep ], +} ); diff --git a/src/OnboardingSPA/chapters/demographic.js b/src/OnboardingSPA/chapters/demographic.js index a95975c32..e1f226ef1 100644 --- a/src/OnboardingSPA/chapters/demographic.js +++ b/src/OnboardingSPA/chapters/demographic.js @@ -1,23 +1,20 @@ +import { __ } from '@wordpress/i18n'; -import { __ } from "@wordpress/i18n"; +import { CHAPTER_DEMOGRAPHIC } from '../../constants'; +import { stepBasicInfo } from '../steps/BasicInfo/step'; +import { stepExperience } from '../steps/GetStarted/GetStartedExperience/step'; +import { stepPrimarySetup } from '../steps/GetStarted/SiteTypeSetup/PrimarySite/step'; +import { stepSecondarySetup } from '../steps/GetStarted/SiteTypeSetup/SecondarySite/step'; +import { stepTopPriority } from '../steps/TopPriority/step'; +import { Chapter } from '../data/models/Chapter'; +import { Step } from '../data/models/Step'; +import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial'; +import { DEFAULT_FLOW } from '../data/flows/constants'; -import { CHAPTER_DEMOGRAPHIC } from "../../constants"; -import { stepBasicInfo } from "../steps/BasicInfo/step"; -import { stepExperience } from "../steps/GetStarted/GetStartedExperience/step"; -import { stepPrimarySetup } from "../steps/GetStarted/SiteTypeSetup/PrimarySite/step"; -import { stepSecondarySetup } from "../steps/GetStarted/SiteTypeSetup/SecondarySite/step"; -import { stepTopPriority } from "../steps/TopPriority/step"; -import { Chapter } from "../data/models/Chapter"; -import { Step } from "../data/models/Step"; -import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; -import { DEFAULT_FLOW } from "../data/flows/constants"; - -const interstitialStep = new Step( - { - path: `/${DEFAULT_FLOW}/step/interstitial/${CHAPTER_DEMOGRAPHIC}`, - Component: ChapterInterstitialLoader - } -) +const interstitialStep = new Step( { + path: `/${ DEFAULT_FLOW }/step/interstitial/${ CHAPTER_DEMOGRAPHIC }`, + Component: ChapterInterstitialLoader, +} ); const steps = [ stepExperience, @@ -25,14 +22,11 @@ const steps = [ stepSecondarySetup, stepBasicInfo, stepTopPriority, -] - -export const demographic = new Chapter( - { - id: CHAPTER_DEMOGRAPHIC, - name: __( 'Demographic', 'wp-module-onboarding' ), - steps, - interstitialSteps: [ interstitialStep ], - } -) +]; +export const demographic = new Chapter( { + id: CHAPTER_DEMOGRAPHIC, + name: __( 'Demographic', 'wp-module-onboarding' ), + steps, + interstitialSteps: [ interstitialStep ], +} ); diff --git a/src/OnboardingSPA/chapters/design.js b/src/OnboardingSPA/chapters/design.js index 05678f7eb..5b7309ba1 100644 --- a/src/OnboardingSPA/chapters/design.js +++ b/src/OnboardingSPA/chapters/design.js @@ -1,51 +1,42 @@ -import { __ } from "@wordpress/i18n"; +import { __ } from '@wordpress/i18n'; // eslint-disable-next-line import/no-extraneous-dependencies -import { filter } from "lodash"; - -import { CHAPTER_DESIGN } from "../../constants"; -import { stepDesignColors } from "../steps/DesignColors/step"; -import { stepDesignThemeStylesMenu } from "../steps/DesignThemeStyles/Menu/step.js"; -import { stepDesignThemeStylesPreview } from "../steps/DesignThemeStyles/Preview/step"; -import { stepDesignTypography } from "../steps/DesignTypography/step"; -import { Chapter } from "../data/models/Chapter"; -import { layoutContent } from "./layoutContent"; -import { Step } from "../data/models/Step"; -import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; -import { DEFAULT_FLOW } from "../data/flows/constants"; - -const interstitialStep = new Step( - { - path: `/${DEFAULT_FLOW}/step/interstitial/${CHAPTER_DESIGN}`, - Component: ChapterInterstitialLoader - } -) - -const steps = [ - stepDesignThemeStylesMenu, - stepDesignThemeStylesPreview, -] - -const conditionalSteps = [ - stepDesignColors, - stepDesignTypography -] - -const initialSteps = filter( [ ...steps, ...conditionalSteps, ...layoutContent.steps ], ( step ) => { - return ( - step.path.includes( '/step/design/' ) && - ! step.path.includes( '/theme-styles/preview' ) - ); +import { filter } from 'lodash'; + +import { CHAPTER_DESIGN } from '../../constants'; +import { stepDesignColors } from '../steps/DesignColors/step'; +import { stepDesignThemeStylesMenu } from '../steps/DesignThemeStyles/Menu/step.js'; +import { stepDesignThemeStylesPreview } from '../steps/DesignThemeStyles/Preview/step'; +import { stepDesignTypography } from '../steps/DesignTypography/step'; +import { Chapter } from '../data/models/Chapter'; +import { layoutContent } from './layoutContent'; +import { Step } from '../data/models/Step'; +import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial'; +import { DEFAULT_FLOW } from '../data/flows/constants'; + +const interstitialStep = new Step( { + path: `/${ DEFAULT_FLOW }/step/interstitial/${ CHAPTER_DESIGN }`, + Component: ChapterInterstitialLoader, } ); +const steps = [ stepDesignThemeStylesMenu, stepDesignThemeStylesPreview ]; +const conditionalSteps = [ stepDesignColors, stepDesignTypography ]; -export const design = new Chapter( - { - id: CHAPTER_DESIGN, - name: __( 'Design', 'wp-module-onboarding' ), - steps, - conditionalSteps, - initialSteps, - interstitialSteps: [ interstitialStep ], +const initialSteps = filter( + [ ...steps, ...conditionalSteps, ...layoutContent.steps ], + ( step ) => { + return ( + step.path.includes( '/step/design/' ) && + ! step.path.includes( '/theme-styles/preview' ) + ); } -) \ No newline at end of file +); + +export const design = new Chapter( { + id: CHAPTER_DESIGN, + name: __( 'Design', 'wp-module-onboarding' ), + steps, + conditionalSteps, + initialSteps, + interstitialSteps: [ interstitialStep ], +} ); diff --git a/src/OnboardingSPA/chapters/features.js b/src/OnboardingSPA/chapters/features.js index d578a41fd..f7798fa53 100644 --- a/src/OnboardingSPA/chapters/features.js +++ b/src/OnboardingSPA/chapters/features.js @@ -1,17 +1,13 @@ -import { __ } from "@wordpress/i18n"; +import { __ } from '@wordpress/i18n'; -import { CHAPTER_FEATURES } from "../../constants"; -import { stepSiteFeatures } from "../steps/SiteFeatures/step"; -import { Chapter } from "../data/models/Chapter"; +import { CHAPTER_FEATURES } from '../../constants'; +import { stepSiteFeatures } from '../steps/SiteFeatures/step'; +import { Chapter } from '../data/models/Chapter'; -const steps = [ - stepSiteFeatures, -] +const steps = [ stepSiteFeatures ]; -export const features = new Chapter( - { - id: CHAPTER_FEATURES, - name: __( 'Features', 'wp-module-onboarding' ), - steps: steps, - } -) \ No newline at end of file +export const features = new Chapter( { + id: CHAPTER_FEATURES, + name: __( 'Features', 'wp-module-onboarding' ), + steps, +} ); diff --git a/src/OnboardingSPA/chapters/layoutContent.js b/src/OnboardingSPA/chapters/layoutContent.js index df0e071c4..7e055527e 100644 --- a/src/OnboardingSPA/chapters/layoutContent.js +++ b/src/OnboardingSPA/chapters/layoutContent.js @@ -1,32 +1,24 @@ -import { __ } from "@wordpress/i18n"; +import { __ } from '@wordpress/i18n'; -import { CHAPTER_LAYOUT_AND_CONTENT } from "../../constants"; -import ChapterInterstitialLoader from "../components/Loaders/Chapter/Interstitial"; -import { stepDesignHeaderMenu } from "../steps/DesignHeaderMenu/step"; -import { stepDesignHomepageMenu } from "../steps/DesignHomepageMenu/step"; -import { stepSitePages } from "../steps/SitePages/step"; -import { Chapter } from "../data/models/Chapter"; -import { Step } from "../data/models/Step"; -import { DEFAULT_FLOW } from "../data/flows/constants"; +import { CHAPTER_LAYOUT_AND_CONTENT } from '../../constants'; +import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial'; +import { stepDesignHeaderMenu } from '../steps/DesignHeaderMenu/step'; +import { stepDesignHomepageMenu } from '../steps/DesignHomepageMenu/step'; +import { stepSitePages } from '../steps/SitePages/step'; +import { Chapter } from '../data/models/Chapter'; +import { Step } from '../data/models/Step'; +import { DEFAULT_FLOW } from '../data/flows/constants'; -const interstitialStep = new Step( - { - path: `/${DEFAULT_FLOW}/step/interstitial/${CHAPTER_LAYOUT_AND_CONTENT}`, - Component: ChapterInterstitialLoader - } -) +const interstitialStep = new Step( { + path: `/${ DEFAULT_FLOW }/step/interstitial/${ CHAPTER_LAYOUT_AND_CONTENT }`, + Component: ChapterInterstitialLoader, +} ); -const steps = [ - stepDesignHeaderMenu, - stepDesignHomepageMenu, - stepSitePages, -] +const steps = [ stepDesignHeaderMenu, stepDesignHomepageMenu, stepSitePages ]; -export const layoutContent = new Chapter( - { - id: CHAPTER_LAYOUT_AND_CONTENT, - name: __( 'Layout & Content', 'wp-module-onboarding' ), - steps, - interstitialSteps: [ interstitialStep ], - } -) \ No newline at end of file +export const layoutContent = new Chapter( { + id: CHAPTER_LAYOUT_AND_CONTENT, + name: __( 'Layout & Content', 'wp-module-onboarding' ), + steps, + interstitialSteps: [ interstitialStep ], +} ); diff --git a/src/OnboardingSPA/chapters/utils.js b/src/OnboardingSPA/chapters/utils.js index 9f3a75f16..580c90f65 100644 --- a/src/OnboardingSPA/chapters/utils.js +++ b/src/OnboardingSPA/chapters/utils.js @@ -1,90 +1,101 @@ // eslint-disable-next-line import/no-extraneous-dependencies -import { filter } from "lodash"; +import { filter } from 'lodash'; -import { addAfterChapter } from "../data/flows/utils"; -import { commerce } from "./commerce" -import { demographic } from "./demographic"; -import { design } from "./design" -import { features } from "./features"; -import { layoutContent } from "./layoutContent" +import { addAfterChapter } from '../data/flows/utils'; +import { commerce } from './commerce'; +import { demographic } from './demographic'; +import { design } from './design'; +import { features } from './features'; +import { layoutContent } from './layoutContent'; const chapters = [ demographic, commerce, design, layoutContent, features ]; const getTopPriorityChapter = ( topPriority ) => { - const topPriorityToChapterMap = { - publishing: layoutContent, - selling: commerce, - designing: design - } - return topPriorityToChapterMap[ topPriority ]; -} + const topPriorityToChapterMap = { + publishing: layoutContent, + selling: commerce, + designing: design, + }; + return topPriorityToChapterMap[ topPriority ]; +}; -export const getChaptersFromTopPriorityAndExperienceLevel = ( initialChapters, topPriority, experienceLevel ) => { - const topPriorityChapter = getTopPriorityChapter( topPriority ); - let finalChapters; - switch( experienceLevel ) { - case '1': - finalChapters = filter( initialChapters, ( chapter ) => { - return chapter.id !== topPriorityChapter.id - } ) - finalChapters = addAfterChapter( - finalChapters, - demographic, - topPriorityChapter - ) - break; - case '3': - finalChapters = filter( initialChapters, ( chapter ) => { - return ( chapter.id !== topPriorityChapter.id && ( chapter.id === features.id || chapter.id === demographic.id ) ) - } ) - finalChapters = addAfterChapter( - finalChapters, - demographic, - topPriorityChapter - ) - break; - case '5': - finalChapters = filter( initialChapters, ( chapter ) => { - return ( chapter.id !== topPriorityChapter.id && ( chapter.id === features.id || chapter.id === demographic.id ) ) - } ) - break; - default: - finalChapters = filter( initialChapters, ( chapter ) => { - return chapter.id !== topPriorityChapter.id - } ) - finalChapters = addAfterChapter( - finalChapters, - demographic, - topPriorityChapter - ) - } +export const getChaptersFromTopPriorityAndExperienceLevel = ( + initialChapters, + topPriority, + experienceLevel +) => { + const topPriorityChapter = getTopPriorityChapter( topPriority ); + let finalChapters; + switch ( experienceLevel ) { + case '1': + finalChapters = filter( initialChapters, ( chapter ) => { + return chapter.id !== topPriorityChapter.id; + } ); + finalChapters = addAfterChapter( + finalChapters, + demographic, + topPriorityChapter + ); + break; + case '3': + finalChapters = filter( initialChapters, ( chapter ) => { + return ( + chapter.id !== topPriorityChapter.id && + ( chapter.id === features.id || + chapter.id === demographic.id ) + ); + } ); + finalChapters = addAfterChapter( + finalChapters, + demographic, + topPriorityChapter + ); + break; + case '5': + finalChapters = filter( initialChapters, ( chapter ) => { + return ( + chapter.id !== topPriorityChapter.id && + ( chapter.id === features.id || + chapter.id === demographic.id ) + ); + } ); + break; + default: + finalChapters = filter( initialChapters, ( chapter ) => { + return chapter.id !== topPriorityChapter.id; + } ); + finalChapters = addAfterChapter( + finalChapters, + demographic, + topPriorityChapter + ); + } - return finalChapters; -} + return finalChapters; +}; export const getChapterFromId = ( id ) => { - return chapters.filter( (chapter) => { - return chapter.id === id - } ); -} + return chapters.filter( ( chapter ) => { + return chapter.id === id; + } ); +}; export const stateToStore = ( state, store, currentStep ) => { - const dataToBeStored = {}; - state.forEach( ( chapter ) => { - if ( store[ chapter.id ] ) { - return ( dataToBeStored[ chapter.id ] = - store[ chapter.id ] ); - } + const dataToBeStored = {}; + state.forEach( ( chapter ) => { + if ( store[ chapter.id ] ) { + return ( dataToBeStored[ chapter.id ] = store[ chapter.id ] ); + } - return ( dataToBeStored[ chapter.id ] = { - completed: false, - firstStep: chapter.steps[ 0 ].path, - lastStep: - currentStep?.chapter === chapter.id && currentStep?.path - ? currentStep?.path - : '', - } ); - } ); + return ( dataToBeStored[ chapter.id ] = { + completed: false, + firstStep: chapter.steps[ 0 ].path, + lastStep: + currentStep?.chapter === chapter.id && currentStep?.path + ? currentStep?.path + : '', + } ); + } ); - return dataToBeStored; + return dataToBeStored; }; diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js index 16415d5de..996164cbc 100644 --- a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js @@ -2,34 +2,51 @@ import { __, sprintf } from '@wordpress/i18n'; import { translations } from '../../../../utils/locales/translations'; const getContents = ( brandName ) => { - return { - heading: __( 'A great foundation to build from', 'wp-module-onboarding' ), - subheading: sprintf( - /* translators: Brand */ - __('with WordPress and %s', 'wp-module-onboarding'), - brandName - ), - content: { - heading: sprintf( - __('Would you like to enter your WordPress Dashboard or continue setting up your %s', 'wp-module-onboarding'), - translations( 'site' ) - ), - question1: __("You've made great progress! Would you like to keep going with the setup or take it from here?", 'wp-module-onboarding'), - question2: sprintf( - __('You can continue from your %s home page in the Next steps list.', 'wp-module-onboarding'), - brandName - ), - redirectMessage: __('Taking you to WordPress in...', 'wp-module-onboarding') - }, - buttons: { - button1: { - text: __('Enter WordPress', 'wp-module-onboarding'), - }, - button2: { - text: __('Continue Setup', 'wp-module-onboarding'), - } - } - } -} + return { + heading: __( + 'A great foundation to build from', + 'wp-module-onboarding' + ), + subheading: sprintf( + /* translators: Brand */ + __( 'with WordPress and %s', 'wp-module-onboarding' ), + brandName + ), + content: { + heading: sprintf( + /* translators: site or store */ + __( + 'Would you like to enter your WordPress Dashboard or continue setting up your %s', + 'wp-module-onboarding' + ), + translations( 'site' ) + ), + question1: __( + "You've made great progress! Would you like to keep going with the setup or take it from here?", + 'wp-module-onboarding' + ), + question2: sprintf( + /* translators: Brand */ + __( + 'You can continue from your %s home page in the Next steps list.', + 'wp-module-onboarding' + ), + brandName + ), + redirectMessage: __( + 'Taking you to WordPress in…', + 'wp-module-onboarding' + ), + }, + buttons: { + button1: { + text: __( 'Enter WordPress', 'wp-module-onboarding' ), + }, + button2: { + text: __( 'Continue Setup', 'wp-module-onboarding' ), + }, + }, + }; +}; -export default getContents; \ No newline at end of file +export default getContents; diff --git a/src/OnboardingSPA/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js index 8d7782a4a..b2814f09e 100644 --- a/src/OnboardingSPA/components/StateHandlers/Flow/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Flow/index.js @@ -150,7 +150,7 @@ const FlowStateHandler = ( { children } ) => { currentData.data.chapters[ currentChapter ].lastStep = currentStep?.path ?? ''; } - } + }; useEffect( () => { prioritizeFlow(); diff --git a/src/OnboardingSPA/data/flows/default.js b/src/OnboardingSPA/data/flows/default.js index 5aa99a749..5cd10c1ca 100644 --- a/src/OnboardingSPA/data/flows/default.js +++ b/src/OnboardingSPA/data/flows/default.js @@ -21,7 +21,10 @@ export const getSteps = ( chapters = initialChapters ) => { let steps = []; steps.push( stepWelcome ); chapters.forEach( ( chapter ) => { - steps = steps.concat( [ ...chapter.steps, ...chapter.interstitialSteps ] ); + steps = steps.concat( [ + ...chapter.steps, + ...chapter.interstitialSteps, + ] ); } ); steps = steps.concat( [ stepComplete, stepWhatNext ] ); return steps; @@ -34,7 +37,7 @@ export const getRoutes = ( chapters = initialChapters ) => { routes = routes.concat( [ ...chapter.steps, ...chapter.conditionalSteps, - ...chapter.interstitialSteps + ...chapter.interstitialSteps, ] ); } ); routes = routes.concat( [ stepComplete, stepWhatNext ] ); @@ -46,10 +49,10 @@ const getPseudoStepForGetStarted = ( firstGetStartedStep ) => { firstGetStartedStepObject.title = __( 'Get Started', 'wp-module-onboarding' - ) + ); firstGetStartedStepObject.data.tooltipText = __( - 'Get Started', - 'wp-module-onboarding' + 'Get Started', + 'wp-module-onboarding' ); return new PseudoStep( firstGetStartedStepObject ); }; @@ -102,16 +105,19 @@ export const getDesignRoutes = ( routes ) => { } ); }; -export const getData = ( chapters = initialChapters, onlyChapterSteps = false ) => { +export const getData = ( + chapters = initialChapters, + onlyChapterSteps = false +) => { let steps = getSteps( chapters ); let routes = getRoutes( chapters ); if ( onlyChapterSteps ) { - steps = steps.filter(( step ) => { - return ( ! step.path.includes('/interstitial') ) - }) - routes = routes.filter(( route ) => { - return ( ! route.path.includes('/interstitial') ) - }) + steps = steps.filter( ( step ) => { + return ! step.path.includes( '/interstitial' ); + } ); + routes = routes.filter( ( route ) => { + return ! route.path.includes( '/interstitial' ); + } ); } return { steps, diff --git a/src/OnboardingSPA/data/flows/ecommerce.js b/src/OnboardingSPA/data/flows/ecommerce.js index bbbb1ae45..7f2d7f747 100644 --- a/src/OnboardingSPA/data/flows/ecommerce.js +++ b/src/OnboardingSPA/data/flows/ecommerce.js @@ -33,7 +33,10 @@ export const getSteps = ( chapters = initialChapters ) => { let steps = []; steps.push( stepWelcome ); chapters.forEach( ( chapter ) => { - steps = steps.concat( [...chapter.steps, ...chapter.interstitialSteps] ); + steps = steps.concat( [ + ...chapter.steps, + ...chapter.interstitialSteps, + ] ); } ); steps = steps.concat( [ stepComplete, stepWhatNext ] ); return steps; @@ -46,7 +49,7 @@ export const getRoutes = ( chapters = initialChapters ) => { routes = routes.concat( [ ...chapter.steps, ...chapter.conditionalSteps, - ...chapter.interstitialSteps + ...chapter.interstitialSteps, ] ); } ); routes = routes.concat( [ stepComplete, stepWhatNext ] ); diff --git a/src/OnboardingSPA/data/flows/index.js b/src/OnboardingSPA/data/flows/index.js index e0bf4ee6d..ea7748d4d 100644 --- a/src/OnboardingSPA/data/flows/index.js +++ b/src/OnboardingSPA/data/flows/index.js @@ -61,7 +61,7 @@ export const getTopSteps = routerMap[ getCurrentFlow() ].getTopSteps; export const resolveGetDataForFlow = ( flow ) => { flow = flow ? flow : getCurrentFlow(); - return routerMap[ getCurrentFlow() ].getData; -} + return routerMap[ flow ].getData; +}; export const getDesignRoutes = routerMap[ getCurrentFlow() ].getDesignRoutes; diff --git a/src/OnboardingSPA/data/models/Chapter.js b/src/OnboardingSPA/data/models/Chapter.js index db962e433..ae6a693f4 100644 --- a/src/OnboardingSPA/data/models/Chapter.js +++ b/src/OnboardingSPA/data/models/Chapter.js @@ -1,14 +1,22 @@ export class Chapter { - constructor( { id, name, steps, conditionalSteps = [], initialSteps = [], topSteps = [], interstitialSteps = [] }) { - this.id = id; - this.name = name; - this.steps = steps.map((step) => { - step.chapter = this.id; - return step - }) - this.conditionalSteps = conditionalSteps; - this.initialSteps = initialSteps; - this.topSteps = topSteps; - this.interstitialSteps = interstitialSteps; - } + constructor( { + id, + name, + steps, + conditionalSteps = [], + initialSteps = [], + topSteps = [], + interstitialSteps = [], + } ) { + this.id = id; + this.name = name; + this.steps = steps.map( ( step ) => { + step.chapter = this.id; + return step; + } ); + this.conditionalSteps = conditionalSteps; + this.initialSteps = initialSteps; + this.topSteps = topSteps; + this.interstitialSteps = interstitialSteps; + } } diff --git a/src/OnboardingSPA/data/models/Flow.js b/src/OnboardingSPA/data/models/Flow.js index 8b014276e..c578ce61e 100644 --- a/src/OnboardingSPA/data/models/Flow.js +++ b/src/OnboardingSPA/data/models/Flow.js @@ -1,8 +1,8 @@ export class Flow { - constructor( steps, routes, pages, topSteps ) { - this.steps = steps; - this.routes = routes; - this.pages = pages; - this.topSteps = topSteps; - } + constructor( steps, routes, pages, topSteps ) { + this.steps = steps; + this.routes = routes; + this.pages = pages; + this.topSteps = topSteps; + } } diff --git a/src/OnboardingSPA/data/models/Page.js b/src/OnboardingSPA/data/models/Page.js index 943220658..4c3bfb3f2 100644 --- a/src/OnboardingSPA/data/models/Page.js +++ b/src/OnboardingSPA/data/models/Page.js @@ -1,8 +1,8 @@ export class Page { - constructor( { path, title, Component, icon } ) { - this.path = path; - this.title = title; - this.Component = Component; - this.icon = icon; - } -} \ No newline at end of file + constructor( { path, title, Component, icon } ) { + this.path = path; + this.title = title; + this.Component = Component; + this.icon = icon; + } +} diff --git a/src/OnboardingSPA/data/models/PseudoStep.js b/src/OnboardingSPA/data/models/PseudoStep.js index 5dffc4032..11895be8c 100644 --- a/src/OnboardingSPA/data/models/PseudoStep.js +++ b/src/OnboardingSPA/data/models/PseudoStep.js @@ -1,7 +1,15 @@ -import { Step } from "./Step"; +import { Step } from './Step'; export class PseudoStep extends Step { - constructor( { path, title, icon, drawerView, sidebars, data } ) { - super({ path, title, Component: null, icon, drawerView, sidebars, data } ) - } -} \ No newline at end of file + constructor( { path, title, icon, drawerView, sidebars, data } ) { + super( { + path, + title, + Component: null, + icon, + drawerView, + sidebars, + data, + } ); + } +} diff --git a/src/OnboardingSPA/data/models/Step.js b/src/OnboardingSPA/data/models/Step.js index 8b8be823e..6407a8586 100644 --- a/src/OnboardingSPA/data/models/Step.js +++ b/src/OnboardingSPA/data/models/Step.js @@ -1,11 +1,19 @@ export class Step { - constructor( { path, title, Component, icon, drawerView, sidebars, data } ) { - this.path = path; - this.title = title; - this.Component = Component; - this.icon = icon; - this.drawerView = drawerView; - this.sidebars = sidebars; - this.data = data; - } -} \ No newline at end of file + constructor( { + path, + title, + Component, + icon, + drawerView, + sidebars, + data, + } ) { + this.path = path; + this.title = title; + this.Component = Component; + this.icon = icon; + this.drawerView = drawerView; + this.sidebars = sidebars; + this.data = data; + } +} diff --git a/src/OnboardingSPA/pages/ErrorPage/page.js b/src/OnboardingSPA/pages/ErrorPage/page.js index 62e83b4b0..9e1c9f019 100644 --- a/src/OnboardingSPA/pages/ErrorPage/page.js +++ b/src/OnboardingSPA/pages/ErrorPage/page.js @@ -1,13 +1,11 @@ import { __ } from '@wordpress/i18n'; -import { redo } from "@wordpress/icons"; -import ErrorPage from "."; -import { Page } from "../../data/models/Page"; +import { redo } from '@wordpress/icons'; +import ErrorPage from '.'; +import { Page } from '../../data/models/Page'; -export const errorPage = new Page( - { - path: '*', - title: __( 'Error 404', 'wp-module-onboarding' ), - Component: ErrorPage, - Icon: redo, - }, -) \ No newline at end of file +export const errorPage = new Page( { + path: '*', + title: __( 'Error 404', 'wp-module-onboarding' ), + Component: ErrorPage, + Icon: redo, +} ); diff --git a/src/OnboardingSPA/pages/IndexPage/index.js b/src/OnboardingSPA/pages/IndexPage/index.js index 8b5db017d..bb196689a 100644 --- a/src/OnboardingSPA/pages/IndexPage/index.js +++ b/src/OnboardingSPA/pages/IndexPage/index.js @@ -6,18 +6,18 @@ import { useSelect } from '@wordpress/data'; const IndexPage = () => { const navigate = useNavigate(); - const { firstStep } = useSelect((select) => { + const { firstStep } = useSelect( ( select ) => { return { - firstStep: select(nfdOnboardingStore).getFirstStep(), + firstStep: select( nfdOnboardingStore ).getFirstStep(), }; - }, []); + }, [] ); - useEffect(() => { - navigate(firstStep.path, { + useEffect( () => { + navigate( firstStep.path, { replace: true, state: { origin: 'index-redirect' }, - }); - }); + } ); + } ); return ; }; diff --git a/src/OnboardingSPA/pages/IndexPage/page.js b/src/OnboardingSPA/pages/IndexPage/page.js index 74f027237..7e2c3e0a3 100644 --- a/src/OnboardingSPA/pages/IndexPage/page.js +++ b/src/OnboardingSPA/pages/IndexPage/page.js @@ -1,11 +1,9 @@ -import IndexPage from "."; -import { Page } from "../../data/models/Page"; +import IndexPage from '.'; +import { Page } from '../../data/models/Page'; -export const indexPage = new Page( - { - path: '/', - title: '', - Component: IndexPage, - Icon: <>, - }, -) \ No newline at end of file +export const indexPage = new Page( { + path: '/', + title: '', + Component: IndexPage, + Icon: <>, +} ); diff --git a/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js index dd55e6424..e0e88b71b 100644 --- a/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/BasicInfo/step.js b/src/OnboardingSPA/steps/BasicInfo/step.js index e98a0e37c..10eee8d2f 100644 --- a/src/OnboardingSPA/steps/BasicInfo/step.js +++ b/src/OnboardingSPA/steps/BasicInfo/step.js @@ -1,31 +1,29 @@ -import { info } from "@wordpress/icons"; -import { Step } from "../../data/models/Step"; +import { info } from '@wordpress/icons'; +import { Step } from '../../data/models/Step'; import { lazy } from '@wordpress/element'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; import { __, sprintf } from '@wordpress/i18n'; -import { translations } from "../../utils/locales/translations"; -import { VIEW_NAV_PRIMARY } from "../../../constants"; +import { translations } from '../../utils/locales/translations'; +import { VIEW_NAV_PRIMARY } from '../../../constants'; const StepBasicInfo = lazy( () => import( './index' ) ); -export const stepBasicInfo = new Step( - { - path: '/wp-setup/step/basic-info', - title: __( 'Basic Info', 'wp-module-onboarding' ), - Component: StepBasicInfo, - icon: info, - drawerView: VIEW_NAV_PRIMARY, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepBasicInfo = new Step( { + path: '/wp-setup/step/basic-info', + title: __( 'Basic Info', 'wp-module-onboarding' ), + Component: StepBasicInfo, + icon: info, + drawerView: VIEW_NAV_PRIMARY, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: sprintf( - /* translators: %s: website or store */ - __( 'Introduce us to this %s', 'wp-module-onboarding' ), - translations( 'website' ) - ), - } }, -) \ No newline at end of file + data: { + tooltipText: sprintf( + /* translators: %s: website or store */ + __( 'Introduce us to this %s', 'wp-module-onboarding' ), + translations( 'website' ) + ), + }, +} ); diff --git a/src/OnboardingSPA/steps/Complete/step.js b/src/OnboardingSPA/steps/Complete/step.js index cee0bccc6..3eca57840 100644 --- a/src/OnboardingSPA/steps/Complete/step.js +++ b/src/OnboardingSPA/steps/Complete/step.js @@ -1,12 +1,9 @@ import { lazy } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; +import { Step } from '../../data/models/Step'; const StepComplete = lazy( () => import( './index' ) ); -export const stepComplete = new Step( - { - path: '/wp-setup/step/complete', - Component: StepComplete, - }, -) \ No newline at end of file +export const stepComplete = new Step( { + path: '/wp-setup/step/complete', + Component: StepComplete, +} ); diff --git a/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js index 058ade027..3f2712876 100644 --- a/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/DesignColors/step.js b/src/OnboardingSPA/steps/DesignColors/step.js index f440878b1..b62e28129 100644 --- a/src/OnboardingSPA/steps/DesignColors/step.js +++ b/src/OnboardingSPA/steps/DesignColors/step.js @@ -1,27 +1,25 @@ import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; +import { Step } from '../../data/models/Step'; import { color } from '@wordpress/icons'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; import { VIEW_DESIGN_COLORS } from '../../../constants'; const StepDesignColors = lazy( () => import( './index' ) ); -export const stepDesignColors = new Step( - { - path: '/wp-setup/step/design/colors', - title: __( 'Colors', 'wp-module-onboarding' ), - Component: StepDesignColors, - icon: color, - drawerView: VIEW_DESIGN_COLORS, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepDesignColors = new Step( { + path: '/wp-setup/step/design/colors', + title: __( 'Colors', 'wp-module-onboarding' ), + Component: StepDesignColors, + icon: color, + drawerView: VIEW_DESIGN_COLORS, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( "What's your color palette?", 'wp-module-onboarding' ), - patternId: 'theme-styles', - } }, -) \ No newline at end of file + data: { + tooltipText: __( "What's your color palette?", 'wp-module-onboarding' ), + patternId: 'theme-styles', + }, +} ); diff --git a/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js index 3ac23ef86..53e0ba0fd 100644 --- a/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/DesignHeaderMenu/step.js b/src/OnboardingSPA/steps/DesignHeaderMenu/step.js index e9ec53489..7be48fab2 100644 --- a/src/OnboardingSPA/steps/DesignHeaderMenu/step.js +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/step.js @@ -1,30 +1,28 @@ -import { header } from "@wordpress/icons"; +import { header } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; -import { VIEW_DESIGN_HEADER_MENU } from "../../../constants"; +import { Step } from '../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; +import { VIEW_DESIGN_HEADER_MENU } from '../../../constants'; -const StepDesignHeaderMenu= lazy( () => import( './index' ) ); +const StepDesignHeaderMenu = lazy( () => import( './index' ) ); -export const stepDesignHeaderMenu = new Step( - { - path: '/wp-setup/step/design/header-menu', - title: __( 'Header & Menu', 'wp-module-onboarding' ), - Component: StepDesignHeaderMenu, - icon: header, - drawerView: VIEW_DESIGN_HEADER_MENU, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepDesignHeaderMenu = new Step( { + path: '/wp-setup/step/design/header-menu', + title: __( 'Header & Menu', 'wp-module-onboarding' ), + Component: StepDesignHeaderMenu, + icon: header, + drawerView: VIEW_DESIGN_HEADER_MENU, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( - "Let's make the right things visible", - 'wp-module-onboarding' - ), - patternId: 'header-menu', - } }, -) \ No newline at end of file + data: { + tooltipText: __( + "Let's make the right things visible", + 'wp-module-onboarding' + ), + patternId: 'header-menu', + }, +} ); diff --git a/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js index 84e01e198..c4fb3a65d 100644 --- a/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/DesignHomepageMenu/step.js b/src/OnboardingSPA/steps/DesignHomepageMenu/step.js index 1618dfcc5..85826337d 100644 --- a/src/OnboardingSPA/steps/DesignHomepageMenu/step.js +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/step.js @@ -1,30 +1,28 @@ -import { pages } from "@wordpress/icons"; +import { pages } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; -import { VIEW_NAV_DESIGN } from "../../../constants"; +import { Step } from '../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; +import { VIEW_NAV_DESIGN } from '../../../constants'; const StepDesignHomepageMenu = lazy( () => import( './index' ) ); -export const stepDesignHomepageMenu = new Step( - { - path: '/wp-setup/step/design/homepage-menu', - title: __( 'Homepage Layouts', 'wp-module-onboarding' ), - Component: StepDesignHomepageMenu, - icon: pages, - drawerView: VIEW_NAV_DESIGN, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepDesignHomepageMenu = new Step( { + path: '/wp-setup/step/design/homepage-menu', + title: __( 'Homepage Layouts', 'wp-module-onboarding' ), + Component: StepDesignHomepageMenu, + icon: pages, + drawerView: VIEW_NAV_DESIGN, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - patternId: 'homepage-styles', - tooltipText: __( - 'There’s no place like a great home page', - 'wp-module-onboarding' - ), - } }, -) \ No newline at end of file + data: { + patternId: 'homepage-styles', + tooltipText: __( + 'There’s no place like a great home page', + 'wp-module-onboarding' + ), + }, +} ); diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js index 69a5b3010..e478d061c 100644 --- a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js @@ -10,14 +10,10 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js index a9cf52262..3dcec580e 100644 --- a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js @@ -1,29 +1,25 @@ -import { styles } from "@wordpress/icons"; +import { styles } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; -import { VIEW_NAV_DESIGN } from "../../../../constants"; +import { Step } from '../../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; +import { VIEW_NAV_DESIGN } from '../../../../constants'; const StepDesignThemeStylesMenu = lazy( () => import( './index' ) ); -export const stepDesignThemeStylesMenu = new Step( - { - path: '/wp-setup/step/design/theme-styles/menu', - title: __( 'Theme Styles', 'wp-module-onboarding' ), - Component: StepDesignThemeStylesMenu, - icon: styles, - drawerView: VIEW_NAV_DESIGN, - sidebars: { - LearnMore: { - SidebarComponents: [ - LearnMore, - ], - }, +export const stepDesignThemeStylesMenu = new Step( { + path: '/wp-setup/step/design/theme-styles/menu', + title: __( 'Theme Styles', 'wp-module-onboarding' ), + Component: StepDesignThemeStylesMenu, + icon: styles, + drawerView: VIEW_NAV_DESIGN, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', - patternId: 'theme-styles', - } }, -) \ No newline at end of file + data: { + designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', + patternId: 'theme-styles', + }, +} ); diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js index f146cbdb2..092097b34 100644 --- a/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js @@ -10,14 +10,10 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js index b4822ae90..4e27e5db9 100644 --- a/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js @@ -1,29 +1,25 @@ -import { styles } from "@wordpress/icons"; +import { styles } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; -import { VIEW_DESIGN_THEME_STYLES_PREVIEW } from "../../../../constants"; +import { Step } from '../../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; +import { VIEW_DESIGN_THEME_STYLES_PREVIEW } from '../../../../constants'; -const StepDesignThemeStylesPreview= lazy( () => import( './index' ) ); +const StepDesignThemeStylesPreview = lazy( () => import( './index' ) ); -export const stepDesignThemeStylesPreview = new Step( - { - path: '/wp-setup/step/design/theme-styles/preview', - title: __( 'Theme Styles', 'wp-module-onboarding' ), - Component: StepDesignThemeStylesPreview, - icon: styles, - drawerView: VIEW_DESIGN_THEME_STYLES_PREVIEW, - sidebars: { - LearnMore: { - SidebarComponents: [ - LearnMore, - ], - }, +export const stepDesignThemeStylesPreview = new Step( { + path: '/wp-setup/step/design/theme-styles/preview', + title: __( 'Theme Styles', 'wp-module-onboarding' ), + Component: StepDesignThemeStylesPreview, + icon: styles, + drawerView: VIEW_DESIGN_THEME_STYLES_PREVIEW, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', - patternId: 'theme-styles', - } }, -) \ No newline at end of file + data: { + designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', + patternId: 'theme-styles', + }, +} ); diff --git a/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js index c8234f274..eb95c219c 100644 --- a/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/DesignTypography/step.js b/src/OnboardingSPA/steps/DesignTypography/step.js index e6181a013..a8b326940 100644 --- a/src/OnboardingSPA/steps/DesignTypography/step.js +++ b/src/OnboardingSPA/steps/DesignTypography/step.js @@ -1,27 +1,25 @@ import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; +import { Step } from '../../data/models/Step'; import { typography } from '@wordpress/icons'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; import { VIEW_DESIGN_TYPOGRAPHY } from '../../../constants'; const StepDesignTypography = lazy( () => import( './index' ) ); -export const stepDesignTypography = new Step( - { - path: '/wp-setup/step/design/typography', - title: __( 'Typography', 'wp-module-onboarding' ), - Component: StepDesignTypography, - icon: typography, - drawerView: VIEW_DESIGN_TYPOGRAPHY, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepDesignTypography = new Step( { + path: '/wp-setup/step/design/typography', + title: __( 'Typography', 'wp-module-onboarding' ), + Component: StepDesignTypography, + icon: typography, + drawerView: VIEW_DESIGN_TYPOGRAPHY, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( "What's your font style?", 'wp-module-onboarding' ), - patternId: 'theme-styles', - } }, -) \ No newline at end of file + data: { + tooltipText: __( "What's your font style?", 'wp-module-onboarding' ), + patternId: 'theme-styles', + }, +} ); diff --git a/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js index 4c5636e00..a106a974e 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js @@ -10,14 +10,10 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) diff --git a/src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js index f4827c994..57199263b 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js @@ -1,26 +1,24 @@ -import { store } from "@wordpress/icons"; +import { store } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; -import { VIEW_NAV_ECOMMERCE_STORE_INFO } from "../../../../constants"; +import { Step } from '../../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; +import { VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../constants'; const StepAddress = lazy( () => import( './index' ) ); -export const stepAddress = new Step( - { - path: '/ecommerce/step/address', - title: __( 'Street Address', 'wp-module-onboarding' ), - Component: StepAddress, - icon: store, - drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepAddress = new Step( { + path: '/ecommerce/step/address', + title: __( 'Street Address', 'wp-module-onboarding' ), + Component: StepAddress, + icon: store, + drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( 'Street Address', 'wp-module-onboarding' ), - } }, -) \ No newline at end of file + data: { + tooltipText: __( 'Street Address', 'wp-module-onboarding' ), + }, +} ); diff --git a/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js index 990ed62ff..153744fa2 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js @@ -10,14 +10,10 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) diff --git a/src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js b/src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js index ca9bba189..2a181937c 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js @@ -1,26 +1,24 @@ -import { shipping } from "@wordpress/icons"; +import { shipping } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; -import { VIEW_NAV_ECOMMERCE_STORE_INFO } from "../../../../constants"; +import { Step } from '../../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; +import { VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../constants'; const StepProducts = lazy( () => import( './index' ) ); -export const stepProducts = new Step( - { - path: '/ecommerce/step/products', - title: __( 'Product Info', 'wp-module-onboarding' ), - Component: StepProducts, - icon: shipping, - drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepProducts = new Step( { + path: '/ecommerce/step/products', + title: __( 'Product Info', 'wp-module-onboarding' ), + Component: StepProducts, + icon: shipping, + drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( 'Product Info', 'wp-module-onboarding' ), - } }, -) \ No newline at end of file + data: { + tooltipText: __( 'Product Info', 'wp-module-onboarding' ), + }, +} ); diff --git a/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js index e1060349a..21386830c 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js @@ -1,6 +1,6 @@ import { __, sprintf } from '@wordpress/i18n'; -import { translations } from '../../../../../../utils/locales/translations'; +import { translations } from '../../../../../utils/locales/translations'; import { institution } from '@wordpress/icons'; const getContents = ( diff --git a/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js index 4eb073fd9..23c0da509 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js @@ -1,35 +1,31 @@ import { lazy } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; -import { store as nfdOnboardingStore } from '../../../../../../store'; +import { store as nfdOnboardingStore } from '../../../../../store'; import getContents from './contents'; const IllustrationPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' + '../../../../../components/Sidebar/components/LearnMore/IllustrationPanel' ) ); const InfoPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => - import( '../../../../../../components/Button/ButtonWhite' ) + import( '../../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/SupportLink' + '../../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); diff --git a/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js index ca5656ca8..78e8d6b02 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepTax/index.js @@ -5,14 +5,14 @@ import { useNavigate } from 'react-router-dom'; import { SIDEBAR_LEARN_MORE, VIEW_NAV_ECOMMERCE_STORE_INFO, -} from '../../../../../constants'; -import CardHeader from '../../../../components/CardHeader'; -import CommonLayout from '../../../../components/Layouts/Common'; -import NeedHelpTag from '../../../../components/NeedHelpTag'; -import NewfoldLargeCard from '../../../../components/NewfoldLargeCard'; -import { store as nfdOnboardingStore } from '../../../../store'; +} from '../../../../constants'; +import CardHeader from '../../../components/CardHeader'; +import CommonLayout from '../../../components/Layouts/Common'; +import NeedHelpTag from '../../../components/NeedHelpTag'; +import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; +import { store as nfdOnboardingStore } from '../../../store'; import { useWPSettings as getWPSettings } from '../useWPSettings'; -import Animate from '../../../../components/Animate'; +import Animate from '../../../components/Animate'; import getContents from './contents'; function createReverseLookup( state ) { diff --git a/src/OnboardingSPA/steps/Ecommerce/StepTax/step.js b/src/OnboardingSPA/steps/Ecommerce/StepTax/step.js index 3fb535809..fdc4467da 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepTax/step.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepTax/step.js @@ -1,26 +1,24 @@ -import { institution } from "@wordpress/icons"; +import { institution } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; -import { VIEW_NAV_ECOMMERCE_STORE_INFO } from "../../../../../constants"; +import { Step } from '../../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; +import { VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../constants'; const StepTax = lazy( () => import( './index' ) ); -export const stepTax = new Step( - { - path: '/ecommerce/step/tax', - title: __( 'Tax Info', 'wp-module-onboarding' ), - Component: StepTax, - icon: institution, - drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepTax = new Step( { + path: '/ecommerce/step/tax', + title: __( 'Tax Info', 'wp-module-onboarding' ), + Component: StepTax, + icon: institution, + drawerView: VIEW_NAV_ECOMMERCE_STORE_INFO, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( 'Tax Info', 'wp-module-onboarding' ), - } }, -) \ No newline at end of file + data: { + tooltipText: __( 'Tax Info', 'wp-module-onboarding' ), + }, +} ); diff --git a/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js index 25f68457b..4c375d3e4 100644 --- a/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js @@ -10,14 +10,10 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) diff --git a/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js index 84ef932cc..a6c0824d4 100644 --- a/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js +++ b/src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js @@ -1,23 +1,21 @@ -import { home } from "@wordpress/icons"; +import { home } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../../data/models/Step"; -import { VIEW_NAV_GET_STARTED } from "../../../../constants"; +import { Step } from '../../../data/models/Step'; +import { VIEW_NAV_GET_STARTED } from '../../../../constants'; const GetStartedExperience = lazy( () => import( './index' ) ); -export const stepExperience = new Step( - { - path: '/wp-setup/step/get-started/experience', - title: __( 'WordPress Experience', 'wp-module-onboarding' ), - Component: GetStartedExperience, - icon: home, - drawerView: VIEW_NAV_GET_STARTED, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepExperience = new Step( { + path: '/wp-setup/step/get-started/experience', + title: __( 'WordPress Experience', 'wp-module-onboarding' ), + Component: GetStartedExperience, + icon: home, + drawerView: VIEW_NAV_GET_STARTED, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, }, -) \ No newline at end of file +} ); diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js index 99ba2ce5f..60d037b18 100644 --- a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js @@ -1,28 +1,24 @@ -import { moveTo } from "@wordpress/icons"; +import { moveTo } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; import { __, sprintf } from '@wordpress/i18n'; -import { Step } from "../../../../data/models/Step"; -import { translations } from "../../../../utils/locales/translations"; +import { Step } from '../../../../data/models/Step'; +import { translations } from '../../../../utils/locales/translations'; const StepPrimarySetup = lazy( () => import( './index' ) ); -export const stepPrimarySetup = new Step( - { - path: '/wp-setup/step/get-started/site-primary', - title: sprintf( - /* translators: %s: website or store */ - __( 'Primary %s Setup', 'wp-module-onboarding' ), - translations( 'Site' ) - ), - Component: StepPrimarySetup, - icon: moveTo, - sidebars: { - LearnMore: { - SidebarComponents: [ - LearnMore, - ], - }, +export const stepPrimarySetup = new Step( { + path: '/wp-setup/step/get-started/site-primary', + title: sprintf( + /* translators: %s: website or store */ + __( 'Primary %s Setup', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + Component: StepPrimarySetup, + icon: moveTo, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, }, -) \ No newline at end of file +} ); diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js index 9ed7040aa..11f823afb 100644 --- a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js @@ -1,28 +1,24 @@ -import { moveTo } from "@wordpress/icons"; +import { moveTo } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; import { __, sprintf } from '@wordpress/i18n'; -import { Step } from "../../../../data/models/Step"; -import { translations } from "../../../../utils/locales/translations"; +import { Step } from '../../../../data/models/Step'; +import { translations } from '../../../../utils/locales/translations'; const StepSecondaryStep = lazy( () => import( './index' ) ); -export const stepSecondarySetup = new Step( - { - path: '/wp-setup/step/get-started/site-secondary', - title: sprintf( - /* translators: %s: website or store */ - __( 'Secondary %s Setup', 'wp-module-onboarding' ), - translations( 'Site' ) - ), - Component: StepSecondaryStep, - icon: moveTo, - sidebars: { - LearnMore: { - SidebarComponents: [ - LearnMore, - ], - }, +export const stepSecondarySetup = new Step( { + path: '/wp-setup/step/get-started/site-secondary', + title: sprintf( + /* translators: %s: website or store */ + __( 'Secondary %s Setup', 'wp-module-onboarding' ), + translations( 'Site' ) + ), + Component: StepSecondaryStep, + icon: moveTo, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, }, -) +} ); diff --git a/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/index.js index abddd1295..4d71849c5 100644 --- a/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/Sidebar/LearnMore/index.js @@ -10,14 +10,10 @@ const IllustrationPanel = lazy( () => ) ); const InfoPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/InfoPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' ) ); const HelpPanel = lazy( () => - import( - '../../../../../components/Sidebar/components/LearnMore/HelpPanel' - ) + import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); const ButtonBlue = lazy( () => import( '../../../../../components/Button/ButtonBlue' ) diff --git a/src/OnboardingSPA/steps/GetStarted/Welcome/step.js b/src/OnboardingSPA/steps/GetStarted/Welcome/step.js index 7f32f172e..6a5a2f365 100644 --- a/src/OnboardingSPA/steps/GetStarted/Welcome/step.js +++ b/src/OnboardingSPA/steps/GetStarted/Welcome/step.js @@ -1,26 +1,24 @@ -import { home } from "@wordpress/icons"; +import { home } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../../data/models/Step"; -import { VIEW_NAV_GET_STARTED } from "../../../../constants"; +import { Step } from '../../../data/models/Step'; +import { VIEW_NAV_GET_STARTED } from '../../../../constants'; const StepWelcome = lazy( () => import( './index' ) ); -export const stepWelcome = new Step( - { - path: '/wp-setup/step/get-started/welcome', - title: __( 'Welcome', 'wp-module-onboarding' ), - Component: StepWelcome, - icon: home, - drawerView: VIEW_NAV_GET_STARTED, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepWelcome = new Step( { + path: '/wp-setup/step/get-started/welcome', + title: __( 'Welcome', 'wp-module-onboarding' ), + Component: StepWelcome, + icon: home, + drawerView: VIEW_NAV_GET_STARTED, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( 'Welcome', 'wp-module-onboarding' ), - } }, -) \ No newline at end of file + data: { + tooltipText: __( 'Welcome', 'wp-module-onboarding' ), + }, +} ); diff --git a/src/OnboardingSPA/steps/GetStarted/index.js b/src/OnboardingSPA/steps/GetStarted/index.js index 750bc8aca..946cffbf5 100644 --- a/src/OnboardingSPA/steps/GetStarted/index.js +++ b/src/OnboardingSPA/steps/GetStarted/index.js @@ -2,30 +2,29 @@ import { useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { useDispatch } from '@wordpress/data'; -import { store as nfdOnboardingStore } from '../../../store'; -import CommonLayout from '../../../components/Layouts/Common'; -import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; -import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED } from '../../../../constants'; +import { store as nfdOnboardingStore } from '../../store'; +import CommonLayout from '../../components/Layouts/Common'; +import NewfoldLargeCard from '../../components/NewfoldLargeCard'; +import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED } from '../../../constants'; const StepGetStarted = () => { const location = useLocation(); - const { setSidebarActiveView } = useDispatch(nfdOnboardingStore); + const { setSidebarActiveView } = useDispatch( nfdOnboardingStore ); - useEffect(() => { + useEffect( () => { setSidebarActiveView( SIDEBAR_LEARN_MORE ); - }, []); + }, [] ); - useEffect(() => {}, [location]); + useEffect( () => {}, [ location ] ); - const { setDrawerActiveView, setIsDrawerOpened } = useDispatch( - nfdOnboardingStore - ); + const { setDrawerActiveView, setIsDrawerOpened } = + useDispatch( nfdOnboardingStore ); - useEffect(() => { - setIsDrawerOpened(false); - setDrawerActiveView(VIEW_NAV_GET_STARTED); - }, []); + useEffect( () => { + setIsDrawerOpened( false ); + setDrawerActiveView( VIEW_NAV_GET_STARTED ); + }, [] ); return ( diff --git a/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/index.js index 86416d468..5e9ee8581 100644 --- a/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/SiteFeatures/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/SiteFeatures/step.js b/src/OnboardingSPA/steps/SiteFeatures/step.js index a62dcf1c2..1f563069f 100644 --- a/src/OnboardingSPA/steps/SiteFeatures/step.js +++ b/src/OnboardingSPA/steps/SiteFeatures/step.js @@ -1,28 +1,26 @@ -import { plugins } from "@wordpress/icons"; +import { plugins } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; +import { Step } from '../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; const StepSiteFeatures = lazy( () => import( './index' ) ); -export const stepSiteFeatures = new Step( - { - path: '/wp-setup/step/site-features', - title: __( 'Features', 'wp-module-onboarding' ), - Component: StepSiteFeatures, - icon: plugins, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepSiteFeatures = new Step( { + path: '/wp-setup/step/site-features', + title: __( 'Features', 'wp-module-onboarding' ), + Component: StepSiteFeatures, + icon: plugins, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( - 'Key features to supercharge your site', - 'wp-module-onboarding' - ), - patternId: 'site-features', - } }, -) \ No newline at end of file + data: { + tooltipText: __( + 'Key features to supercharge your site', + 'wp-module-onboarding' + ), + patternId: 'site-features', + }, +} ); diff --git a/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/index.js index a0ca7b5d0..eff637f2f 100644 --- a/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/SitePages/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/SitePages/step.js b/src/OnboardingSPA/steps/SitePages/step.js index 9b5d34f55..8bf0dc2e8 100644 --- a/src/OnboardingSPA/steps/SitePages/step.js +++ b/src/OnboardingSPA/steps/SitePages/step.js @@ -1,28 +1,26 @@ -import { copy } from "@wordpress/icons"; +import { copy } from '@wordpress/icons'; import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; -import LearnMore from "./Sidebar/LearnMore"; +import { Step } from '../../data/models/Step'; +import LearnMore from './Sidebar/LearnMore'; const StepSitePages = lazy( () => import( './index' ) ); -export const stepSitePages = new Step( - { - path: '/wp-setup/step/design/site-pages', - title: __( 'Page Layouts', 'wp-module-onboarding' ), - Component: StepSitePages, - icon: copy, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepSitePages = new Step( { + path: '/wp-setup/step/design/site-pages', + title: __( 'Page Layouts', 'wp-module-onboarding' ), + Component: StepSitePages, + icon: copy, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( - 'You have ideas, we have page templates', - 'wp-module-onboarding' - ), - patternId: 'site-pages', - } }, -) \ No newline at end of file + data: { + tooltipText: __( + 'You have ideas, we have page templates', + 'wp-module-onboarding' + ), + patternId: 'site-pages', + }, +} ); diff --git a/src/OnboardingSPA/steps/TopPriority/step.js b/src/OnboardingSPA/steps/TopPriority/step.js index 422b0f548..a7786a046 100644 --- a/src/OnboardingSPA/steps/TopPriority/step.js +++ b/src/OnboardingSPA/steps/TopPriority/step.js @@ -1,16 +1,14 @@ import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; +import { Step } from '../../data/models/Step'; import { navigation } from '@wordpress/icons'; const StepTopPriority = lazy( () => import( './index' ) ); -export const stepTopPriority = new Step( - { - path: '/wp-setup/step/top-priority', - title: __( 'Top Priority', 'wp-module-onboarding' ), - tooltipText: __( 'Tell us your top priority', 'wp-module-onboarding' ), - Component: StepTopPriority, - icon: navigation, - }, -) \ No newline at end of file +export const stepTopPriority = new Step( { + path: '/wp-setup/step/top-priority', + title: __( 'Top Priority', 'wp-module-onboarding' ), + tooltipText: __( 'Tell us your top priority', 'wp-module-onboarding' ), + Component: StepTopPriority, + icon: navigation, +} ); diff --git a/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js index 10fa2e2b0..3ba9bfc67 100644 --- a/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/index.js @@ -19,9 +19,7 @@ const ButtonWhite = lazy( () => import( '../../../../components/Button/ButtonWhite' ) ); const SupportLink = lazy( () => - import( - '../../../../components/Sidebar/components/LearnMore/SupportLink' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( diff --git a/src/OnboardingSPA/steps/WhatNext/step.js b/src/OnboardingSPA/steps/WhatNext/step.js index 3911d9f98..6aaaea0c5 100644 --- a/src/OnboardingSPA/steps/WhatNext/step.js +++ b/src/OnboardingSPA/steps/WhatNext/step.js @@ -1,24 +1,22 @@ import { lazy } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Step } from "../../data/models/Step"; +import { Step } from '../../data/models/Step'; import { moveTo } from '@wordpress/icons'; -import LearnMore from "./Sidebar/LearnMore"; +import LearnMore from './Sidebar/LearnMore'; const StepWhatNext = lazy( () => import( './index' ) ); -export const stepWhatNext = new Step( - { - path: '/wp-setup/step/what-next', - title: __( 'What Next', 'wp-module-onboarding' ), - Component: StepWhatNext, - icon: moveTo, - sidebars: { - LearnMore: { - SidebarComponents: [ LearnMore ], - }, +export const stepWhatNext = new Step( { + path: '/wp-setup/step/what-next', + title: __( 'What Next', 'wp-module-onboarding' ), + Component: StepWhatNext, + icon: moveTo, + sidebars: { + LearnMore: { + SidebarComponents: [ LearnMore ], }, - data: { - tooltipText: __( 'How else can we help?', 'wp-module-onboarding' ), - } }, -) \ No newline at end of file + data: { + tooltipText: __( 'How else can we help?', 'wp-module-onboarding' ), + }, +} ); From 16e078ad40e77b17eb2feeae38009612e7579bc0 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Sep 2023 15:37:14 +0530 Subject: [PATCH 06/18] sass lint fixes --- .../Chapter/Interstitial/stylesheet.scss | 168 +++++++++--------- .../steps/BasicInfo/stylesheet.scss | 78 ++++---- .../steps/DesignThemeStyles/stylesheet.scss | 4 +- .../steps/Ecommerce/stylesheet.scss | 81 +++++---- .../Sidebar/LearnMore/stylesheet.scss | 20 ++- 5 files changed, 191 insertions(+), 160 deletions(-) diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss index 81a63f1c6..033a99aa1 100644 --- a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss @@ -1,83 +1,91 @@ .chapter-interstitial { - padding: 32px 32px; - - &__content { - @media (max-width: #{ ($break-xlarge) }) { - flex-direction: column; - justify-content: center; - align-items: center; - } - display: flex; - width: 100%; - line-height: 1.5; - color: black; - flex-direction: row; - margin-top: 30px; - &__column-left { - padding: 0px 20px; - width: 50%; - @media (max-width: #{ ($break-xlarge) }) { - width: 100%; - } - - &__heading { - font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem); - font-weight: bold; - } - - &__question1, &__question2 { - font-size: clamp(0.625rem, 0.5795rem + 0.2273vw, 1.125rem); - line-height: 1.5; - } - - &__question2 { - font-weight: bold; - } - } - - &__column-right { - width: 50%; - @media (max-width: #{ ($break-xlarge) }) { - display: none; - } - min-height: 250px; - max-height: 250px; - padding: 20px; - background-image: var(--nfd-onboarding-step-interstitial-img); - } - } - - &__buttons { - display: flex; - flex-direction: row; - justify-content: center; - width: 100%; - margin-top: 20px; - @media (max-width: #{ ($break-xlarge) }) { - flex-direction: column; - } - - &--blue, &--white { - height: 76px; - width: 50%; - margin: 0px 20px; - font-size: clamp(1rem, 0.9091rem + 0.4545vw, 2rem); - @media (max-width: #{ ($break-xlarge) }) { - margin: 10px 0px; - width: 100%; - } - } - - &--white { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - - &__icon { - margin-left: 30px; - } - } - } + padding: 32px 32px; + + &__content { + + @media (max-width: #{ ($break-xlarge) }) { + flex-direction: column; + justify-content: center; + align-items: center; + } + display: flex; + width: 100%; + line-height: 1.5; + color: #000; + flex-direction: row; + margin-top: 30px; + + &__column-left { + padding: 0 20px; + width: 50%; + + @media (max-width: #{ ($break-xlarge) }) { + width: 100%; + } + + &__heading { + font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem); + font-weight: 700; + } + + &__question1, + &__question2 { + font-size: clamp(0.625rem, 0.5795rem + 0.2273vw, 1.125rem); + line-height: 1.5; + } + + &__question2 { + font-weight: 700; + } + } + + &__column-right { + width: 50%; + + @media (max-width: #{ ($break-xlarge) }) { + display: none; + } + min-height: 250px; + max-height: 250px; + padding: 20px; + background-image: var(--nfd-onboarding-step-interstitial-img); + } + } + + &__buttons { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + margin-top: 20px; + + @media (max-width: #{ ($break-xlarge) }) { + flex-direction: column; + } + + &--blue, + &--white { + height: 76px; + width: 50%; + margin: 0 20px; + font-size: clamp(1rem, 0.9091rem + 0.4545vw, 2rem); + + @media (max-width: #{ ($break-xlarge) }) { + margin: 10px 0; + width: 100%; + } + } + + &--white { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + &__icon { + margin-left: 30px; + } + } + } } diff --git a/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss b/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss index 5aafaf4cc..65f598f84 100644 --- a/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss +++ b/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss @@ -1,42 +1,44 @@ -.basic-info{ - display: flex; - align-items:center; - flex-direction: column; - justify-content: center; +.basic-info { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; - &-form { - width: 90vw; - display: flex; - padding-top: 20px; - flex-direction: column; - - &__left { - flex: 1; - margin: 3vw; - } - - &__right { - flex: 1; - margin: 3vw; - } - - @include break-xlarge() { - width: 70vw; - flex-direction: row; - justify-content: center; - } - } + &-form { + width: 90vw; + display: flex; + padding-top: 20px; + flex-direction: column; + + &__left { + flex: 1; + margin: 3vw; + } + + &__right { + flex: 1; + margin: 3vw; + } + + @include break-xlarge() { + width: 70vw; + flex-direction: row; + justify-content: center; + } + } } -.error{ - &__show{ - display: inline-block; - text-align: center; - border-radius: 6px; - padding: 20px; - background-color: rgba(255, 0, 0, 0.3); - } - &__hide{ - display: none; - } +.error { + + &__show { + display: inline-block; + text-align: center; + border-radius: 6px; + padding: 20px; + background-color: rgba(255, 0, 0, 0.3); + } + + &__hide { + display: none; + } } diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss b/src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss index f8df10451..7aedd10c6 100644 --- a/src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss +++ b/src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss @@ -1,2 +1,2 @@ -@import "./Menu/stylesheet.scss"; -@import "./Preview/stylesheet.scss"; +@import "./Menu/stylesheet"; +@import "./Preview/stylesheet"; diff --git a/src/OnboardingSPA/steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/steps/Ecommerce/stylesheet.scss index 4dd13e3ac..d7e1e4950 100644 --- a/src/OnboardingSPA/steps/Ecommerce/stylesheet.scss +++ b/src/OnboardingSPA/steps/Ecommerce/stylesheet.scss @@ -1,4 +1,5 @@ @media (max-width: #{ ($break-medium - 1) }) { + .sm\:col-layout { display: flex; flex-direction: column; @@ -8,6 +9,7 @@ } @media (min-width: #{ ($break-medium) }) { + .md\:row-layout { display: flex; flex-direction: row; @@ -16,19 +18,49 @@ } .ecommerce-step { + @media (max-width: 2200px) { height: fit-content; } } .onboarding-ecommerce-step { + .nfd-nav-card-button { min-height: 4vh; } } +.radio-control-tax-step { + + label { + padding: 10px 100px 10px 20px; + } + + @media (max-width: #{ ($break-medium - 1) }) { + + label { + padding-right: 15px; + } + } + + @media (max-width: 480px) { + + label { + padding: + clamp(10px, 1.5vh, 15px) clamp(10px, 5%, 13px) + clamp(10px, 5%, 13px); + width: unset; + height: fit-content; + line-height: 1.5; + white-space: normal; + } + } +} + .nfd-ecommerce-address-step { padding: 1rem 0; + label[data-required="true"]::after { content: " *"; } @@ -38,16 +70,19 @@ gap: min(1.5em, 24px); padding: 1em 0 4em; margin: 0 1em 0 1em; + label { display: block; font-weight: 500; font-size: 16px; line-height: 1; padding-bottom: 13px; + &[aria-required="true"]::after { content: " *"; } } + input, select { padding-left: 17px; @@ -61,32 +96,40 @@ } div[data-name="full-address"] { + select, input { min-width: 180px; } + &[data-state-empty="false"] { grid-template-columns: repeat(3, auto); + @media (max-width: #{ ($break-xlarge) }) { + input, select { min-width: 100px; } } } + &[data-state-empty="true"] { grid-template-columns: repeat(2, auto); } display: grid; gap: 24px 32px; + div[data-name="state"] { grid-column: 2; } @media (max-width: #{ ($break-large) }) { + &[data-state-empty] { grid-template-columns: auto; } + div[data-name="state"] { grid-column: 1; } @@ -95,6 +138,7 @@ @media (max-width: #{ ($break-large) }) { grid-template-columns: auto; + input, select { min-width: 100%; @@ -104,6 +148,7 @@ } } + div.onboarding-ecommerce-step { color: var(--nfd-onboarding-black); display: flex; @@ -123,6 +168,7 @@ div.onboarding-ecommerce-step { } div.step-product-numbers:nth-child(3) .components-v-stack { + @media (min-width: #{ ($break-mobile)}) { flex-direction: row !important; } @@ -134,6 +180,7 @@ div.onboarding-product-step { @media only screen and (min-width: 1921px) { width: 35vw; } + .nfd-card-need-help-tag { padding: 20px 0 0; } @@ -158,7 +205,7 @@ div.onboarding-product-step { background-color: #f0f0f0; @media (max-width: #{ ($break-small)}), - (max-height: #{ ($break-small)}) { + (max-height: #{ ($break-small)}) { padding: 5px; } @@ -172,17 +219,12 @@ div.onboarding-product-step { width: 100%; margin: 0.5em 0; - & > * { - align-self: center; - } + align-self: center; @media (min-width: #{ ($break-xlarge + 100)}) { gap: 1em; grid-template-columns: auto max-content; - - & > * { - align-self: baseline; - } + align-self: baseline; .components-radio-control { margin-left: auto; @@ -221,26 +263,3 @@ div.onboarding-product-step { } } } - -.radio-control-tax-step { - label { - padding: 10px 100px 10px 20px; - } - - @media (max-width: #{ ($break-medium - 1) }) { - label { - padding-right: 15px; - } - } - - @media (max-width: 480px) { - label { - padding: clamp(10px, 1.5vh, 15px) clamp(10px, 5%, 13px) - clamp(10px, 5%, 13px); - width: unset; - height: fit-content; - line-height: 1.5; - white-space: normal; - } - } -} diff --git a/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/stylesheet.scss b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/stylesheet.scss index 079e9dc2c..18d82abb5 100644 --- a/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/stylesheet.scss +++ b/src/OnboardingSPA/steps/WhatNext/Sidebar/LearnMore/stylesheet.scss @@ -1,12 +1,14 @@ .nfd-onboarding-sidebar-learn-more { - &__what-next { - &__container { - height: 232px; - &.is-opened { - padding: 0px; - } + &__what-next { - } - } -} \ No newline at end of file + &__container { + height: 232px; + + &.is-opened { + padding: 0; + } + + } + } +} From a863c8ebba4f34a64ebb8498f443228df535da35 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Sep 2023 18:04:52 +0530 Subject: [PATCH 07/18] delete unecessary files --- includes/Data/Patterns.php | 491 ---------------------------- includes/Data/Themes/Colors.php | 188 ----------- includes/Data/Themes/Fonts.php | 226 ------------- src/OnboardingSPA/chapters/utils.js | 5 +- 4 files changed, 4 insertions(+), 906 deletions(-) delete mode 100644 includes/Data/Patterns.php delete mode 100644 includes/Data/Themes/Colors.php delete mode 100644 includes/Data/Themes/Fonts.php diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php deleted file mode 100644 index 849a02d0f..000000000 --- a/includes/Data/Patterns.php +++ /dev/null @@ -1,491 +0,0 @@ - array( - 'theme-styles' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active' => true, - 'replace' => true, - ), - 'homepage-1' => array( - 'active' => true, - 'shown' => true, - 'combine' => true, - 'wonder_blocks' => 'home-1', - ), - 'site-footer' => array( - 'active' => true, - ), - ), - 'homepage-styles' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active' => true, - 'replace' => true, - ), - 'homepage-1' => array( - 'active' => true, - 'shown' => true, - 'wonder_blocks' => 'home-1', - ), - 'homepage-2' => array( - 'active' => true, - 'shown' => true, - 'wonder_blocks' => 'home-2', - ), - 'homepage-3' => array( - 'active' => true, - 'shown' => true, - 'wonder_blocks' => 'home-3', - ), - 'site-footer' => array( - 'active' => true, - ), - ), - 'site-pages' => array( - 'company-page' => array( - 'active' => true, - 'title' => __( 'About', 'wp-module-onboarding' ), - 'selected' => true, - 'shown' => true, - 'description' => __( 'Explain your company values or the history behind your brand.', 'wp-module-onboarding' ), - ), - 'contact-us' => array( - 'active' => true, - 'selected' => true, - 'title' => __( 'Contact', 'wp-module-onboarding' ), - 'shown' => true, - 'description' => __( 'Offer visitors a single page with a contact form, your street address and social media.', 'wp-module-onboarding' ), - ), - 'testimonials-page' => array( - 'active' => true, - 'title' => __( 'Testimonials', 'wp-module-onboarding' ), - 'selected' => false, - 'shown' => true, - 'description' => __( 'Highlight your success with testimonials from your fans.', 'wp-module-onboarding' ), - ), - 'blog-page' => array( - 'active' => true, - 'selected' => true, - 'title' => __( 'Blog', 'wp-module-onboarding' ), - 'shown' => true, - 'description' => __( 'A page for periodic news, announcements and ideas.', 'wp-module-onboarding' ), - ), - ), - 'header-menu' => array( - 'site-header-left-logo-navigation-inline' => array( - 'active' => true, - 'shown' => true, - ), - 'homepage-1' => array( - 'active' => true, - 'wonder_blocks' => 'home-1', - ), - 'site-footer' => array( - 'active' => true, - ), - 'site-header-left-logo-navigation-below' => array( - 'active' => true, - 'shown' => true, - ), - 'site-header-centered' => array( - 'active' => true, - 'shown' => true, - ), - 'site-header-splitted-menu' => array( - 'active' => true, - 'shown' => true, - ), - ), - ), - ); - } - - /** - * Define fallback patterns incase the primary ones cannot be found. - * - * @return array - */ - public static function get_fallbacks() { - return array( - 'wonder-blocks' => array( - 'home-1' => 'yith-wonder/homepage-1', - 'home-2' => 'yith-wonder/homepage-2', - 'home-3' => 'yith-wonder/homepage-3', - ), - ); - } - - /** - * Callback Functions for Theme Step. - * - * @return array - */ - protected static function get_theme_step_filters() { - return array( - 'yith-wonder' => array( - 'homepage-styles' => array( __CLASS__, 'filter_yith_wonder_homepage_patterns' ), - 'header-menu' => array( __CLASS__, 'filter_yith_wonder_headermenu_patterns' ), - ), - ); - } - - /** - * Get post metadata for a pattern. Ref: SitePagesController.php - * - * @return array - */ - public static function get_theme_patterns_meta() { - return array( - 'yith-wonder' => array( - 'company-page' => array( - 'nf_dc_page' => 'about', - ), - 'contact-us' => array( - 'nf_dc_page' => 'contact', - ), - 'homepage-1' => array( - 'nf_dc_page' => 'home', - ), - 'homepage-2' => array( - 'nf_dc_page' => 'home', - ), - 'homepage-3' => array( - 'nf_dc_page' => 'home', - ), - ), - 'wonder-blocks' => array( - 'home-1' => array( - 'nf_dc_page' => 'home', - ), - 'home-2' => array( - 'nf_dc_page' => 'home', - ), - 'home-3' => array( - 'nf_dc_page' => 'home', - ), - ), - ); - } - - /** - * Sanitize the content by cleaning wp_grammar. - * - * @param string $content Data to clean - * - * @return string - */ - private static function cleanup_wp_grammar( $content ) { - - // Remove template-part if that exists - $content = preg_replace( '/^$/m', '', $content ); - - // Create an array with the values you want to replace - $searches = array( "\n", "\t" ); - - // Replace the line breaks and tabs with a empty string - $content = str_replace( $searches, '', $content ); - - return $content; - } - - /** - * Get the post meta for a given slug. - * - * @param string $slug The slug (theme/kebab-cased-name). - * @return array|boolean - */ - public static function get_meta_from_slug( $slug ) { - $theme_pattern = explode( '/', $slug ); - if ( ! isset( $theme_pattern[0] ) || ! isset( $theme_pattern[1] ) ) { - return false; - } - $theme_patterns_meta = self::get_theme_patterns_meta(); - return isset( $theme_patterns_meta[ $theme_pattern [0] ][ $theme_pattern [1] ] ) - ? $theme_patterns_meta[ $theme_pattern [0] ][ $theme_pattern [1] ] - : false; - } - - /** - * Get the fallback slug for a given slug. - * - * @param string $pattern_slug The given slug. - * @return string|false - */ - public static function get_fallback_from_slug( $pattern_slug ) { - $theme_pattern = explode( '/', $pattern_slug ); - if ( ! isset( $theme_pattern[0] ) || ! isset( $theme_pattern[1] ) ) { - return false; - } - $fallbacks = self::get_fallbacks(); - return isset( $fallbacks[ $theme_pattern [0] ][ $theme_pattern [1] ] ) - ? $fallbacks[ $theme_pattern [0] ][ $theme_pattern [1] ] - : false; - } - - /** - * Fetches a pattern from the WP_Block_Patterns_Registry. - * - * @param string $pattern_slug The full slug of the pattern. - * @return array - */ - public static function get_pattern_from_block_patterns_registry( $pattern_slug ) { - $block_patterns_registry = \WP_Block_Patterns_Registry::get_instance(); - if ( $block_patterns_registry->is_registered( $pattern_slug ) ) { - $pattern = $block_patterns_registry->get_registered( $pattern_slug ); - return array( - 'slug' => $pattern_slug, - 'title' => $pattern['title'], - 'content' => self::cleanup_wp_grammar( $pattern['content'] ), - 'name' => $pattern['name'], - 'meta' => self::get_meta_from_slug( $pattern_slug ), - 'categories' => $pattern['categories'], - ); - } - return false; - } - - /** - * Retrieve pattern from slug. - * - * @param string $pattern_slug Pattern Slug Data - * - * @return array|boolean - */ - public static function get_pattern_from_slug( $pattern_slug ) { - if ( WonderBlocksService::is_valid_slug( $pattern_slug ) ) { - $pattern = WonderBlocksService::get_template_from_slug( $pattern_slug ); - if ( ! $pattern ) { - $fallback_pattern_slug = self::get_fallback_from_slug( $pattern_slug ); - if ( ! $fallback_pattern_slug ) { - return false; - } - - return self::get_pattern_from_block_patterns_registry( $fallback_pattern_slug ); - } - - return $pattern; - } - - return self::get_pattern_from_block_patterns_registry( $pattern_slug ); - } - - /** - * Retrieve the header menu slug from flow data. - * - * @return string|boolean - */ - private static function get_selected_header_from_flow_data() { - // fetch the selected header menu slug from DB - $flow_data = \get_option( Options::get_option_name( 'flow' ), false ); - if ( ! $flow_data ) { - return false; - } - - if ( ! empty( $flow_data['data']['partHeader'] ) ) { - return explode( '/', $flow_data['data']['partHeader'] )[1]; - } - - return false; - - } - - /** - * Replace the header menu slug in the patterns array - * - * @param array $pattern_content pattern grammar that is to be modified - * - * @return array - */ - private static function replace_split_menu_items( $pattern_content ) { - $dummy_menu_grammar = ''; - $menu_navigation_grammar = ''; - - foreach ( self::get_dummy_menu_items() as $item ) { - $dummy_menu_grammar = ''; - $pattern_content = preg_replace( $menu_navigation_grammar, $dummy_menu_grammar, $pattern_content, 1 ); - } - return $pattern_content; - } - - /** - * Retrieve Theme Step Patterns from chosen Theme in Previous Step - * - * @param string $step Step from which Theme Step Pattern is required - * @param boolean $squash Flag set to retrieve the block pattern - * - * @return array|string - */ - public static function get_theme_step_patterns_from_step( $step, $squash = false ) { - $active_theme = Themes::get_active_theme(); - - if ( ! isset( self::get_theme_step_patterns()[ $active_theme ][ $step ] ) ) { - return false; - } - - $pattern_slugs = self::get_theme_step_patterns()[ $active_theme ][ $step ]; - - foreach ( array_keys( $pattern_slugs ) as $pattern_slug ) { - if ( true !== $pattern_slugs[ $pattern_slug ]['active'] ) { - continue; - } - if ( isset( $pattern_slugs[ $pattern_slug ]['replace'] ) && true === $pattern_slugs[ $pattern_slug ]['replace'] ) { - $pattern_slug_data = $pattern_slugs[ $pattern_slug ]; - $header_menu_slug = self::get_selected_header_from_flow_data(); - $pattern_slug = ( ! empty( $header_menu_slug ) ) ? $header_menu_slug : $pattern_slug; - $pattern_slugs[ $pattern_slug ] = $pattern_slug_data; - } - - if ( isset( $pattern_slugs[ $pattern_slug ]['wonder_blocks'] ) && WonderBlocksService::is_enabled() ) { - $pattern_full_slug = WonderBlocksService::add_prefix_to_name( $pattern_slugs[ $pattern_slug ]['wonder_blocks'] ); - } else { - $pattern_full_slug = $active_theme . '/' . $pattern_slug; - } - - $pattern = self::get_pattern_from_slug( $pattern_full_slug ); - if ( ! $pattern ) { - continue; - } - - if ( false !== stripos( $pattern_slug, 'split' ) ) { - $pattern['content'] = self::replace_split_menu_items( $pattern['content'] ); - } - - if ( ! $squash ) { - $block_patterns[] = array_merge( - $pattern, - $pattern_slugs[ $pattern_slug ] - ); - continue; - } - $block_patterns .= self::cleanup_wp_grammar( $pattern['content'] ); - } - - if ( isset( self::get_theme_step_filters()[ $active_theme ][ $step ] ) ) { - $step_filter = self::get_theme_step_filters()[ $active_theme ][ $step ]; - $theme_step_callback = isset( $step_filter ) ? $step_filter : false; - if ( is_callable( $theme_step_callback ) ) { - return $theme_step_callback( $block_patterns ); - } - } - - return $block_patterns; - } - - /** - * Retrieve Homepage Menu Step Patterns - * - * @param array $patterns Step Patterns Data - * @return array - */ - private static function filter_yith_wonder_homepage_patterns( $patterns ) { - $header_content = ''; - $homepage_style_slugs = array(); - $footer_content = ''; - - foreach ( $patterns as $index_key => $slug ) { - if ( in_array( 'yith-wonder-site-header', $slug['categories'], true ) ) { - $header_content = $slug['content']; - continue; - } - if ( in_array( 'yith-wonder-pages', $slug['categories'], true ) ) { - array_push( $homepage_style_slugs, $slug ); - } - if ( in_array( 'yith-wonder-site-footer', $slug['categories'], true ) ) { - $footer_content = $slug['content']; - continue; - } - } - - foreach ( $homepage_style_slugs as $key => $homepage_style ) { - $homepage_style_slugs[ $key ]['content'] = $header_content . $homepage_style['content'] . $footer_content; - } - - return $homepage_style_slugs; - } - - /** - * Retrieve Header Menu Step Patterns - * - * @param array $patterns Step Patterns Data - * @return array - */ - private static function filter_yith_wonder_headermenu_patterns( $patterns ) { - $body_content = ''; - $header_menu_slugs = array(); - foreach ( $patterns as $pattern_details ) { - if ( in_array( 'yith-wonder-site-header', $pattern_details['categories'], true ) ) { - $header_menu_slugs['pageHeaders'][] = $pattern_details; - } else { - $body_content .= $pattern_details['content']; - $header_menu_slugs['pageBody'] = $body_content; - } - } - return $header_menu_slugs; - } - - /** - * Retrieve Pattern Count. - * - * @return array - */ - public static function get_count_of_patterns() { - $active_theme = Themes::get_active_theme(); - $theme_step_patterns = self::get_theme_step_patterns(); - $active_theme_patterns = isset( $theme_step_patterns[ $active_theme ] ) ? $theme_step_patterns[ $active_theme ] : array(); - - $theme_pattern_count = array(); - foreach ( $active_theme_patterns as $theme_step => $patterns ) { - $theme_step_count = 0; - $combine_styles = 1; - foreach ( $patterns as $pattern => $pattern_data ) { - if ( isset( $pattern_data['shown'] ) && true === $pattern_data['shown'] ) { - ++$theme_step_count; - } - if ( isset( $pattern_data['combine'] ) && true === $pattern_data['combine'] ) { - $combine_styles = count( \WP_Theme_JSON_Resolver::get_style_variations() ) + 1; - } - } - - $theme_pattern_count[ $theme_step ] = array( - 'previewCount' => $combine_styles * $theme_step_count, - ); - } - return $theme_pattern_count; - } - -} diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php deleted file mode 100644 index 1d84c0741..000000000 --- a/includes/Data/Themes/Colors.php +++ /dev/null @@ -1,188 +0,0 @@ - array( - 'tailored' => array( - 'calm' => array( - 'header-background' => '#1A4733', - 'header-foreground' => '#FFFFFF', - 'header-titles' => '#FFFFFF', - 'secondary-background' => '#1A4733', - 'secondary-foreground' => '#FFF', - 'tertiary' => '#C7DBFF', - 'secondary' => '#344A77', - 'primary' => '#1A4733', - 'base' => '#FFFFFF', - 'name' => __( 'Calm', 'wp-module-onboarding' ), - ), - 'cool' => array( - 'header-background' => '#C7DBFF', - 'header-foreground' => '#21447B', - 'header-titles' => '#21447B', - 'secondary-background' => '#C7DBFF', - 'secondary-foreground' => '#21447B', - 'tertiary' => '#C7DBFF', - 'secondary' => '#3764B4', - 'primary' => '#21447B', - 'base' => '#FFFFFF', - 'name' => __( 'Cool', 'wp-module-onboarding' ), - ), - 'warm' => array( - 'header-background' => '#FDE5D0', - 'header-foreground' => '#7A3921', - 'header-titles' => '#7A3921', - 'secondary-background' => '#FDE5D0', - 'secondary-foreground' => '#7A3921', - 'tertiary' => '#FFEDED', - 'secondary' => '#B97040', - 'primary' => '#7A3921', - 'base' => '#FFFFFF', - 'name' => __( 'Warm', 'wp-module-onboarding' ), - ), - 'radiant' => array( - 'header-background' => '#63156A', - 'header-foreground' => '#E3F7FF', - 'header-titles' => '#E3F7FF', - 'secondary-background' => '#781980', - 'secondary-foreground' => '#E3F7FF', - 'tertiary' => '#C7F0FF', - 'secondary' => '#64288C', - 'primary' => '#63156A', - 'base' => '#FFFFFF', - 'name' => __( 'Radiant', 'wp-module-onboarding' ), - ), - 'bold' => array( - 'header-background' => '#FFD7F1', - 'header-foreground' => '#09857C', - 'header-titles' => '#09857C', - 'secondary-background' => '#ffddf3', - 'secondary-foreground' => '#09857C', - 'tertiary' => '#F2A3D6', - 'secondary' => '#076D66', - 'primary' => '#09857C', - 'base' => '#FFFFFF', - 'name' => __( 'Bold', 'wp-module-onboarding' ), - ), - 'retro' => array( - 'header-background' => '#096385', - 'header-foreground' => '#F2E6A2', - 'header-titles' => '#F2E6A2', - 'secondary-background' => '#096385', - 'secondary-foreground' => '#F2E6A2', - 'tertiary' => '#F2E6A2', - 'secondary' => '#BE9E00', - 'primary' => '#096385', - 'base' => '#FFFFFF', - 'name' => __( 'Retro', 'wp-module-onboarding' ), - ), - 'professional' => array( - 'header-background' => '#6D8258', - 'header-foreground' => '#F5FAFF', - 'header-titles' => '#D2E0F5', - 'secondary-background' => '#6D8258', - 'secondary-foreground' => '#F5FAFF', - 'tertiary' => '#d6e4f9', - 'secondary' => '#405F1C', - 'primary' => '#558320', - 'base' => '#FFFFFF', - 'name' => __( 'Professional', 'wp-module-onboarding' ), - ), - 'crisp' => array( - 'header-background' => '#ccc', - 'header-foreground' => '#333', - 'header-titles' => '#234', - 'secondary-background' => '#ccc', - 'secondary-foreground' => '#333', - 'tertiary' => '#777', - 'secondary' => '#17222E', - 'primary' => '#223344', - 'base' => '#FFFFFF', - 'name' => __( 'Crisp', 'wp-module-onboarding' ), - ), - 'polished' => array( - 'header-background' => '#313131', - 'header-foreground' => '#fff', - 'header-titles' => '#6B69EA', - 'secondary-background' => '#444', - 'secondary-foreground' => '#ddd', - 'tertiary' => '#313131', - 'secondary' => '#6B69EA', - 'primary' => '#5100FA', - 'base' => '#FFFFFF', - 'name' => __( 'Polished', 'wp-module-onboarding' ), - ), - 'nightowl' => array( - 'header-background' => '#06080A', - 'header-foreground' => '#fff', - 'header-titles' => '#FAAA14', - 'secondary-background' => '#0A0C0E', - 'secondary-foreground' => '#fff', - 'tertiary' => '#FFDFA3', - 'secondary' => '#06080A', - 'primary' => '#B97900', - 'base' => '#FFFFFF', - 'name' => __( 'Nightowl', 'wp-module-onboarding' ), - ), - 'subtle' => array( - 'header-background' => '#C7ADBB', - 'header-foreground' => '#5A3C4B', - 'header-titles' => '#5A3C4B', - 'secondary-background' => '#C7ADBB', - 'secondary-foreground' => '#5A3C4B', - 'tertiary' => '#D4C9CF', - 'secondary' => '#57203c', - 'primary' => '#5A3C4B', - 'base' => '#FFFFFF', - 'name' => __( 'Subtle', 'wp-module-onboarding' ), - ), - ), - 'custom-picker-grouping' => array( - 'base' => array( - 'header-foreground', - 'header-titles', - 'secondary-foreground', - ), - 'tertiary' => array( - 'header-background', - 'secondary-background', - ), - ), - ), - ); - } - - /** - * Retrieves the active theme color variations. - * - * @return array|\WP_Error - */ - public static function get_colors_from_theme() { - $active_theme = Themes::get_active_theme(); - $pattern_slugs = self::get_theme_colors()[ $active_theme ]; - - if ( ! isset( $pattern_slugs ) ) { - return new \WP_Error( - 'Theme Colors not found', - 'No WordPress Colors are available for this theme.', - array( 'status' => 404 ) - ); - } - - return $pattern_slugs; - } -} diff --git a/includes/Data/Themes/Fonts.php b/includes/Data/Themes/Fonts.php deleted file mode 100644 index c3205ff77..000000000 --- a/includes/Data/Themes/Fonts.php +++ /dev/null @@ -1,226 +0,0 @@ - array( - 'modern-approachable' => array( - 'label' => __( 'Modern & approachable', 'wp-module-onboarding' ), - 'matches' => 'yith-wonder/theme-json', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--mulish)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--poppins)', - ), - ), - ), - ), - ), - 'strong-sleek' => array( - 'label' => __( 'Strong & sleek', 'wp-module-onboarding' ), - 'matches' => 'yith-wonder/styles/01-blue-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--raleway)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--oswald)', - ), - ), - ), - ), - ), - 'stately-elevated' => array( - 'label' => __( 'Stately & elevated', 'wp-module-onboarding' ), - 'matches' => 'yith-wonder/styles/02-pink-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--source-sans-pro)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--playfair)', - ), - ), - ), - ), - ), - 'typewriter-crisp-midcentury' => array( - 'label' => __( 'Typewriter & crisp midcentury', 'wp-module-onboarding' ), - 'matches' => 'yith-wonder/styles/03-orange-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--jost)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--solway)', - ), - ), - ), - ), - ), - 'refined-traditional-newsletter' => array( - 'label' => __( 'Refined traditional newsletter', 'wp-module-onboarding' ), - 'matches' => 'yith-wonder/styles/04-black-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--jost)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--merriweather)', - ), - ), - ), - ), - ), - 'bold-stamp-slab' => array( - 'label' => __( 'Bold stamp & slab', 'wp-module-onboarding' ), - 'matches' => 'yith-wonder/styles/05-red-shades', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--changa-one)', - ), - ), - ), - ), - ), - 'fast-simple' => array( - 'label' => __( 'Fast & Simple', 'wp-module-onboarding' ), - 'matches' => 'newfold/onboarding-01', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--system)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--system)', - ), - ), - ), - ), - ), - 'timeless-traditional' => array( - 'label' => __( 'Timeless & Traditional', 'wp-module-onboarding' ), - 'matches' => 'newfold/onboarding-02', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--serif)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--serif)', - ), - ), - ), - ), - ), - 'sleek-sophisticated' => array( - 'label' => __( 'Sleek & Sophisticated', 'wp-module-onboarding' ), - 'matches' => 'newfold/onboarding-03', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--dm-sans)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--dm-sans)', - ), - ), - ), - ), - ), - 'clear-crisp' => array( - 'label' => __( 'Clear & Crisp', 'wp-module-onboarding' ), - 'matches' => 'newfold/onboarding-04', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--inter)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--inter)', - ), - ), - ), - ), - ), - 'retro-classy' => array( - 'label' => __( 'Retro & Classy', 'wp-module-onboarding' ), - 'matches' => 'newfold/onboarding-05', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--league-spartan)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--league-spartan)', - ), - ), - ), - ), - ), - 'defined-solid' => array( - 'label' => __( 'Defined & Solid', 'wp-module-onboarding' ), - 'matches' => 'newfold/onboarding-06', - 'styles' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)', - ), - 'blocks' => array( - 'core/heading' => array( - 'typography' => array( - 'fontFamily' => 'var(--wp--preset--font-family--roboto-slab)', - ), - ), - ), - ), - ), - ), - ); - } - - /** - * Retrieves the active theme font variations. - * - * @return array|\WP_Error - */ - public static function get_fonts_from_theme() { - $active_theme = Themes::get_active_theme(); - $theme_fonts = self::get_theme_fonts(); - return isset( $theme_fonts[ $active_theme ] ) ? $theme_fonts[ $active_theme ] : false; - } -} diff --git a/src/OnboardingSPA/chapters/utils.js b/src/OnboardingSPA/chapters/utils.js index 580c90f65..7c21c1ae8 100644 --- a/src/OnboardingSPA/chapters/utils.js +++ b/src/OnboardingSPA/chapters/utils.js @@ -16,7 +16,10 @@ const getTopPriorityChapter = ( topPriority ) => { selling: commerce, designing: design, }; - return topPriorityToChapterMap[ topPriority ]; + + return topPriorityToChapterMap[ topPriority ] + ? topPriorityToChapterMap[ topPriority ] + : layoutContent; }; export const getChaptersFromTopPriorityAndExperienceLevel = ( From 8466bb037f864ccd7faa1343247d34b4df0be04c Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 11 Sep 2023 11:51:27 +0530 Subject: [PATCH 08/18] re-queue plugins, CR bug fixes --- includes/RestApi/FlowController.php | 9 ++++- .../index.js | 6 +-- .../stylesheet.scss | 2 +- .../components/Button/stylesheet.scss | 2 +- .../Drawer/DrawerPanel/NavDesign.js | 3 +- .../Loaders/Chapter/Interstitial/index.js | 38 +++++++------------ src/OnboardingSPA/data/flows/default.js | 4 ++ src/OnboardingSPA/data/flows/ecommerce.js | 2 + .../PrimarySite/Sidebar/LearnMore/index.js | 2 +- .../SecondarySite/Sidebar/LearnMore/index.js | 2 +- .../Welcome/Sidebar/LearnMore/index.js | 6 +-- 11 files changed, 39 insertions(+), 37 deletions(-) rename src/OnboardingSPA/components/Button/{ButtonBlue => ButtonWithBackground}/index.js (53%) rename src/OnboardingSPA/components/Button/{ButtonBlue => ButtonWithBackground}/stylesheet.scss (92%) diff --git a/includes/RestApi/FlowController.php b/includes/RestApi/FlowController.php index 11f8701e1..e03baeed6 100644 --- a/includes/RestApi/FlowController.php +++ b/includes/RestApi/FlowController.php @@ -3,7 +3,7 @@ use NewfoldLabs\WP\Module\Onboarding\Permissions; use NewfoldLabs\WP\Module\Onboarding\Data\Services\FlowService; - +use NewfoldLabs\WP\Module\Onboarding\Services\PluginService; /** * Class FlowController @@ -162,6 +162,13 @@ public function switch( \WP_REST_Request $request ) { return $status; } + if ( ! PluginService::initialize() ) { + return new \WP_REST_Response( + array(), + 500 + ); + } + return new \WP_REST_Response( array(), 200 diff --git a/src/OnboardingSPA/components/Button/ButtonBlue/index.js b/src/OnboardingSPA/components/Button/ButtonWithBackground/index.js similarity index 53% rename from src/OnboardingSPA/components/Button/ButtonBlue/index.js rename to src/OnboardingSPA/components/Button/ButtonWithBackground/index.js index 880734681..3cac81288 100644 --- a/src/OnboardingSPA/components/Button/ButtonBlue/index.js +++ b/src/OnboardingSPA/components/Button/ButtonWithBackground/index.js @@ -1,11 +1,11 @@ import { Button } from '@wordpress/components'; import classNames from 'classnames'; -const ButtonBlue = ( { className, text, onClick = false } ) => { +const ButtonWithBackground = ( { className, text, onClick = false } ) => { return (
    - saveDataAndExit() } text={ content.buttons.button1.text } className={ 'chapter-interstitial__buttons--blue' } diff --git a/src/OnboardingSPA/data/flows/default.js b/src/OnboardingSPA/data/flows/default.js index 5cd10c1ca..8536d4caa 100644 --- a/src/OnboardingSPA/data/flows/default.js +++ b/src/OnboardingSPA/data/flows/default.js @@ -54,6 +54,8 @@ const getPseudoStepForGetStarted = ( firstGetStartedStep ) => { 'Get Started', 'wp-module-onboarding' ); + firstGetStartedStepObject.data.primaryDrawerActiveLinkIncludes = + '/wp-setup/step/get-started/'; return new PseudoStep( firstGetStartedStepObject ); }; @@ -61,6 +63,8 @@ const getPseudoStepForDesign = ( firstDesignStep ) => { const firstDesignStepObject = { ...firstDesignStep }; firstDesignStepObject.title = __( 'Design', 'wp-module-onboarding' ); firstDesignStepObject.icon = brush; + firstDesignStepObject.data.primaryDrawerActiveLinkIncludes = + '/wp-setup/step/design/'; return new PseudoStep( firstDesignStepObject ); }; diff --git a/src/OnboardingSPA/data/flows/ecommerce.js b/src/OnboardingSPA/data/flows/ecommerce.js index 7f2d7f747..3bf928c36 100644 --- a/src/OnboardingSPA/data/flows/ecommerce.js +++ b/src/OnboardingSPA/data/flows/ecommerce.js @@ -60,6 +60,8 @@ const getPseudoStepForEcommerce = ( firstEcommerceStep ) => { const firstEcommerceStepObject = { ...firstEcommerceStep }; firstEcommerceStepObject.title = __( 'Store Info', 'wp-module-onboarding' ); firstEcommerceStepObject.icon = store; + firstEcommerceStepObject.data.primaryDrawerActiveLinkIncludes = + '/ecommerce/step/'; return new PseudoStep( firstEcommerceStepObject ); }; diff --git a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js index 051fc46b9..ad9211213 100644 --- a/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/Sidebar/LearnMore/index.js @@ -51,7 +51,7 @@ const LearnMore = () => { const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); return ( -
    +
    { const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); return ( -
    +
    const HelpPanel = lazy( () => import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' ) ); -const ButtonBlue = lazy( () => - import( '../../../../../components/Button/ButtonBlue' ) +const ButtonWithBackground = lazy( () => + import( '../../../../../components/Button/ButtonWithBackground' ) ); const ButtonWhite = lazy( () => import( '../../../../../components/Button/ButtonWhite' ) @@ -74,7 +74,7 @@ const LearnMore = () => { /> { content.help.experts.link && ( - window.open( content.help.experts.link, '_blank' ) From 861b42d1db72a59dc53da4a1854d76601a88c649 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 11 Sep 2023 11:53:52 +0530 Subject: [PATCH 09/18] Fix lint --- .../components/Button/ButtonWithBackground/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Button/ButtonWithBackground/index.js b/src/OnboardingSPA/components/Button/ButtonWithBackground/index.js index 3cac81288..3a7d315e2 100644 --- a/src/OnboardingSPA/components/Button/ButtonWithBackground/index.js +++ b/src/OnboardingSPA/components/Button/ButtonWithBackground/index.js @@ -5,7 +5,10 @@ const ButtonWithBackground = ( { className, text, onClick = false } ) => { return (
    -
    +
    +
    +
    Date: Mon, 11 Sep 2023 13:09:29 +0530 Subject: [PATCH 11/18] update composer --- composer.json | 2 +- composer.lock | 230 +++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 201 insertions(+), 31 deletions(-) diff --git a/composer.json b/composer.json index 60ad5472a..adf61c511 100644 --- a/composer.json +++ b/composer.json @@ -34,7 +34,7 @@ "require": { "mustache/mustache": "^2.14", "wp-cli/wp-config-transformer": "^1.3", - "newfold-labs/wp-module-onboarding-data": "^1.0.0" + "newfold-labs/wp-module-onboarding-data": "^0.0.1" }, "require-dev": { "wp-phpunit/wp-phpunit": "^6.2", diff --git a/composer.lock b/composer.lock index 1c529f4ff..602fabace 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "e2871ceb4b4af6359310eb3307a3daba", + "content-hash": "cec9b3a87cd40cb3c34b5b028a20f995", "packages": [ { "name": "mustache/mustache", @@ -56,6 +56,101 @@ }, "time": "2022-08-23T13:07:01+00:00" }, + { + "name": "newfold-labs/wp-module-customer-bluehost", + "version": "1.6.0", + "source": { + "type": "git", + "url": "https://github.com/newfold-labs/wp-module-customer-bluehost.git", + "reference": "c0b205c9619c657264e0eb7efa29fba191102045" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/newfold-labs/wp-module-customer-bluehost/zipball/c0b205c9619c657264e0eb7efa29fba191102045", + "reference": "c0b205c9619c657264e0eb7efa29fba191102045", + "shasum": "" + }, + "require": { + "newfold-labs/wp-module-data": "^2.2.2" + }, + "type": "library", + "autoload": { + "psr-4": { + "NewfoldLabs\\WP\\Module\\CustomerBluehost\\": "includes" + }, + "files": [ + "bootstrap.php", + "includes/AccessToken.php", + "includes/CustomerBluehost.php", + "includes/ResponseUtilities.php", + "includes/SiteMeta.php" + ] + }, + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Evan Mullins", + "homepage": "https://evanmullins.com" + } + ], + "description": "Customer module to interface with bluehost and the data module.", + "support": { + "source": "https://github.com/newfold-labs/wp-module-customer-bluehost/tree/1.6.0", + "issues": "https://github.com/newfold-labs/wp-module-customer-bluehost/issues" + }, + "time": "2023-05-30T21:27:34+00:00" + }, + { + "name": "newfold-labs/wp-module-data", + "version": "2.4.3", + "source": { + "type": "git", + "url": "https://github.com/newfold-labs/wp-module-data.git", + "reference": "3bacb2ae6610d25b1920fa1289bf0438f5673d05" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/newfold-labs/wp-module-data/zipball/3bacb2ae6610d25b1920fa1289bf0438f5673d05", + "reference": "3bacb2ae6610d25b1920fa1289bf0438f5673d05", + "shasum": "" + }, + "require": { + "wp-forge/wp-query-builder": "^1.0", + "wp-forge/wp-upgrade-handler": "^1.0", + "wpscholar/url": "^1.2" + }, + "require-dev": { + "newfold-labs/wp-php-standards": "^1.2" + }, + "type": "library", + "autoload": { + "psr-4": { + "NewfoldLabs\\WP\\Module\\Data\\": "src/" + }, + "files": [ + "bootstrap.php" + ] + }, + "scripts": { + "fix": [ + "vendor/bin/phpcbf . --standard=phpcs.xml" + ], + "lint": [ + "vendor/bin/phpcs . --standard=phpcs.xml -s" + ] + }, + "license": [ + "GPL-2.0-or-later" + ], + "description": "Newfold Data Module", + "support": { + "source": "https://github.com/newfold-labs/wp-module-data/tree/2.4.3", + "issues": "https://github.com/newfold-labs/wp-module-data/issues" + }, + "time": "2023-08-08T20:32:34+00:00" + }, { "name": "newfold-labs/wp-module-installer", "version": "1.1.1", @@ -99,54 +194,46 @@ "time": "2023-08-10T10:59:26+00:00" }, { - "name": "newfold-labs/wp-module-patterns", - "version": "0.1.2", + "name": "newfold-labs/wp-module-onboarding-data", + "version": "0.0.1", "source": { "type": "git", - "url": "https://github.com/newfold-labs/wp-module-patterns.git", - "reference": "55c0bfcc09f9e16c6f4c04dc343910d61ae08e44" + "url": "https://github.com/newfold-labs/wp-module-onboarding-data.git", + "reference": "02e4a1b64a0942eaae03cc7a7400bbcb5ee57f14" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/newfold-labs/wp-module-patterns/zipball/55c0bfcc09f9e16c6f4c04dc343910d61ae08e44", - "reference": "55c0bfcc09f9e16c6f4c04dc343910d61ae08e44", + "url": "https://api.github.com/repos/newfold-labs/wp-module-onboarding-data/zipball/02e4a1b64a0942eaae03cc7a7400bbcb5ee57f14", + "reference": "02e4a1b64a0942eaae03cc7a7400bbcb5ee57f14", "shasum": "" }, + "require": { + "newfold-labs/wp-module-customer-bluehost": "^1.6.0", + "newfold-labs/wp-module-data": "^2.4.3", + "newfold-labs/wp-module-installer": "^1.1", + "wp-forge/wp-upgrade-handler": "^1.0" + }, "require-dev": { "newfold-labs/wp-php-standards": "^1.2" }, "type": "library", "autoload": { "psr-4": { - "NewfoldLabs\\WP\\Module\\Patterns\\": "includes" - }, - "files": [ - "bootstrap.php" - ] - }, - "scripts": { - "lint": [ - "vendor/bin/phpcs . --standard=Newfold" - ], - "clean": [ - "vendor/bin/phpcbf . --standard=Newfold" - ] + "NewfoldLabs\\WP\\Module\\Onboarding\\Data\\": "includes/" + } }, - "license": [ - "GPL-2.0-or-later" - ], "authors": [ { - "name": "Hristina Conjic", - "email": "hristina.conjic@newfold.com" + "name": "arunshenoy99", + "email": "devarunshenoy99@gmail.com" } ], - "description": "WordPress Cloud Patterns", + "description": "A non-toggleable module containing a standardized interface for interacting with Onboarding data.", "support": { - "source": "https://github.com/newfold-labs/wp-module-patterns/tree/0.1.2", - "issues": "https://github.com/newfold-labs/wp-module-patterns/issues" + "source": "https://github.com/newfold-labs/wp-module-onboarding-data/tree/0.0.1", + "issues": "https://github.com/newfold-labs/wp-module-onboarding-data/issues" }, - "time": "2023-08-01T18:51:50+00:00" + "time": "2023-09-11T06:46:44+00:00" }, { "name": "wp-cli/wp-config-transformer", @@ -192,6 +279,51 @@ }, "time": "2023-04-26T19:51:31+00:00" }, + { + "name": "wp-forge/wp-query-builder", + "version": "1.0.3", + "source": { + "type": "git", + "url": "https://github.com/wp-forge/wp-query-builder.git", + "reference": "34959e5618969afd8350a8206744a7810d9f253b" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/wp-forge/wp-query-builder/zipball/34959e5618969afd8350a8206744a7810d9f253b", + "reference": "34959e5618969afd8350a8206744a7810d9f253b", + "shasum": "" + }, + "require": { + "php": ">=5.4" + }, + "type": "library", + "autoload": { + "psr-4": { + "WP_Forge\\QueryBuilder\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Micah Wood", + "email": "micah@wpscholar.com" + } + ], + "description": "A lightweight and efficient SQL query builder for WordPress.", + "keywords": [ + "database", + "query builder", + "wordpress" + ], + "support": { + "issues": "https://github.com/wp-forge/wp-query-builder/issues", + "source": "https://github.com/wp-forge/wp-query-builder/tree/1.0.3" + }, + "time": "2023-04-29T19:26:54+00:00" + }, { "name": "wp-forge/wp-upgrade-handler", "version": "1.0", @@ -228,6 +360,44 @@ "source": "https://github.com/wp-forge/wp-upgrade-handler/tree/1.0" }, "time": "2020-05-21T00:04:44+00:00" + }, + { + "name": "wpscholar/url", + "version": "1.2.2", + "source": { + "type": "git", + "url": "https://github.com/wpscholar/url.git", + "reference": "c339972ed8e6876f1cfacbc512c6205db63645d0" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/wpscholar/url/zipball/c339972ed8e6876f1cfacbc512c6205db63645d0", + "reference": "c339972ed8e6876f1cfacbc512c6205db63645d0", + "shasum": "" + }, + "type": "library", + "autoload": { + "psr-4": { + "wpscholar\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "GPL-2.0+" + ], + "authors": [ + { + "name": "Micah Wood", + "email": "micah@wpscholar.com", + "homepage": "http://wpscholar.com" + } + ], + "description": "A PHP class for parsing and manipulating URLs.", + "support": { + "issues": "https://github.com/wpscholar/url/issues", + "source": "https://github.com/wpscholar/url/tree/1.2.2" + }, + "time": "2020-10-27T20:10:04+00:00" } ], "packages-dev": [ @@ -2476,5 +2646,5 @@ "prefer-lowest": false, "platform": [], "platform-dev": [], - "plugin-api-version": "2.3.0" + "plugin-api-version": "2.6.0" } From 9d7061cd9c1b876978fcd834735de14f505307be Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 11 Sep 2023 13:12:39 +0530 Subject: [PATCH 12/18] re-add wp-module-patterns --- composer.json | 3 ++- composer.lock | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/composer.json b/composer.json index adf61c511..1cd073ac0 100644 --- a/composer.json +++ b/composer.json @@ -34,7 +34,8 @@ "require": { "mustache/mustache": "^2.14", "wp-cli/wp-config-transformer": "^1.3", - "newfold-labs/wp-module-onboarding-data": "^0.0.1" + "newfold-labs/wp-module-onboarding-data": "^0.0.1", + "newfold-labs/wp-module-patterns": "^0.1.2" }, "require-dev": { "wp-phpunit/wp-phpunit": "^6.2", diff --git a/composer.lock b/composer.lock index 602fabace..80f7159e8 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "cec9b3a87cd40cb3c34b5b028a20f995", + "content-hash": "6d4176cbc927c4be1d8a5a7b80c50085", "packages": [ { "name": "mustache/mustache", @@ -235,6 +235,56 @@ }, "time": "2023-09-11T06:46:44+00:00" }, + { + "name": "newfold-labs/wp-module-patterns", + "version": "0.1.4", + "source": { + "type": "git", + "url": "https://github.com/newfold-labs/wp-module-patterns.git", + "reference": "789a8fc80ff82ea71604a121e197ff9f3d733799" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/newfold-labs/wp-module-patterns/zipball/789a8fc80ff82ea71604a121e197ff9f3d733799", + "reference": "789a8fc80ff82ea71604a121e197ff9f3d733799", + "shasum": "" + }, + "require-dev": { + "newfold-labs/wp-php-standards": "^1.2" + }, + "type": "library", + "autoload": { + "psr-4": { + "NewfoldLabs\\WP\\Module\\Patterns\\": "includes" + }, + "files": [ + "bootstrap.php" + ] + }, + "scripts": { + "lint": [ + "vendor/bin/phpcs . --ignore=*/build/* --standard=Newfold -d error_reporting=\"E_ALL&~E_DEPRECATED\"" + ], + "clean": [ + "vendor/bin/phpcbf . --ignore=*/build/* --standard=Newfold -d error_reporting=\"E_ALL&~E_DEPRECATED\"" + ] + }, + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Hristina Conjic", + "email": "hristina.conjic@newfold.com" + } + ], + "description": "WordPress Cloud Patterns", + "support": { + "source": "https://github.com/newfold-labs/wp-module-patterns/tree/0.1.4", + "issues": "https://github.com/newfold-labs/wp-module-patterns/issues" + }, + "time": "2023-08-22T15:34:41+00:00" + }, { "name": "wp-cli/wp-config-transformer", "version": "v1.3.3", From 35300c483bc4c2b6668d4d7424acb823a5fd5738 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 11 Sep 2023 14:45:34 +0530 Subject: [PATCH 13/18] add ? --- .../components/Loaders/Chapter/Interstitial/contents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js index 996164cbc..092a374ae 100644 --- a/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js @@ -16,7 +16,7 @@ const getContents = ( brandName ) => { heading: sprintf( /* translators: site or store */ __( - 'Would you like to enter your WordPress Dashboard or continue setting up your %s', + 'Would you like to enter your WordPress Dashboard or continue setting up your %s?', 'wp-module-onboarding' ), translations( 'site' ) From 28ae1c27a2063e0e3e49b1e055fd146398630a2b Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 12 Sep 2023 20:20:23 +0530 Subject: [PATCH 14/18] remove DesignStateHandler from step Complete --- src/OnboardingSPA/steps/Complete/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/steps/Complete/index.js b/src/OnboardingSPA/steps/Complete/index.js index 3e11cd3c0..719559678 100644 --- a/src/OnboardingSPA/steps/Complete/index.js +++ b/src/OnboardingSPA/steps/Complete/index.js @@ -7,7 +7,6 @@ import getContents from './contents'; import { completeFlow } from '../../utils/api/flow'; import { StepLoader } from '../../components/Loaders'; import { StepErrorState } from '../../components/ErrorState'; -import { DesignStateHandler } from '../../components/StateHandlers'; import { THEME_STATUS_INIT } from '../../../constants'; const StepComplete = () => { @@ -64,8 +63,12 @@ const StepComplete = () => { else flushQueue(); }, [ isQueueEmpty ] ); + useEffect( () => { + setNavigationState(); + }, [] ); + return ( - + <> { isError ? ( { subtitle={ contents.loader.subtitle } /> ) } - + ); }; From 6c9069e19424c42af8d2ab40e326781d77acd1e1 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 12 Sep 2023 20:37:33 +0530 Subject: [PATCH 15/18] use a more flexible approach with the refresh prop --- .../components/StateHandlers/Design/index.js | 11 ++++++++--- src/OnboardingSPA/steps/Complete/index.js | 8 ++++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js index c5e68b3b9..686bd4de7 100644 --- a/src/OnboardingSPA/components/StateHandlers/Design/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Design/index.js @@ -25,6 +25,7 @@ import ExitToWordPress from '../../ExitToWordPress'; const DesignStateHandler = ( { children, navigationStateCallback = false, + refresh = true, } ) => { const isLargeViewport = useViewportMatch( 'medium' ); @@ -54,7 +55,7 @@ const DesignStateHandler = ( { const expediteInstall = async () => { const status = await expedite( DESIGN_STEPS_THEME ); - if ( ! status.error ) { + if ( ! status.error && true === refresh ) { window.location.reload(); return; } @@ -100,7 +101,9 @@ const DesignStateHandler = ( { expediteInstall(); break; case THEME_STATUS_ACTIVE: - window.location.reload(); + if ( true === refresh ) { + window.location.reload(); + } break; default: updateThemeStatus( themeStatus ); @@ -126,7 +129,9 @@ const DesignStateHandler = ( { return updateThemeStatus( THEME_STATUS_FAILURE ); } - return window.location.reload(); + if ( true === refresh ) { + window.location.reload(); + } }; const handleRender = () => { diff --git a/src/OnboardingSPA/steps/Complete/index.js b/src/OnboardingSPA/steps/Complete/index.js index 719559678..f941b7d9f 100644 --- a/src/OnboardingSPA/steps/Complete/index.js +++ b/src/OnboardingSPA/steps/Complete/index.js @@ -8,6 +8,7 @@ import { completeFlow } from '../../utils/api/flow'; import { StepLoader } from '../../components/Loaders'; import { StepErrorState } from '../../components/ErrorState'; import { THEME_STATUS_INIT } from '../../../constants'; +import { DesignStateHandler } from '../../components/StateHandlers'; const StepComplete = () => { const { @@ -68,7 +69,10 @@ const StepComplete = () => { }, [] ); return ( - <> + { isError ? ( { subtitle={ contents.loader.subtitle } /> ) } - + ); }; From c0ebb549cc2adf4616933097267bf87e18e9c4b8 Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 21 Sep 2023 16:51:11 +0530 Subject: [PATCH 16/18] Update defensive check in Patterns --- includes/Data/Patterns.php | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/includes/Data/Patterns.php b/includes/Data/Patterns.php index 8a587788b..c0950b65e 100644 --- a/includes/Data/Patterns.php +++ b/includes/Data/Patterns.php @@ -358,6 +358,7 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false } $pattern_slugs = self::get_theme_step_patterns()[ $active_theme ][ $step ]; + $block_patterns = $squash ? '' : array(); foreach ( array_keys( $pattern_slugs ) as $pattern_slug ) { if ( true !== $pattern_slugs[ $pattern_slug ]['active'] ) { @@ -392,11 +393,7 @@ public static function get_theme_step_patterns_from_step( $step, $squash = false ); continue; } - if ( isset( $block_patterns ) ) { - $block_patterns .= self::cleanup_wp_grammar( $pattern['content'] ); - } else { - $block_patterns = self::cleanup_wp_grammar( $pattern['content'] ); - } + $block_patterns .= self::cleanup_wp_grammar( $pattern['content'] ); } if ( isset( self::get_theme_step_filters()[ $active_theme ][ $step ] ) ) { From be8abb2a115550ba84b3f5dfaa074a1ff380e076 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 26 Sep 2023 16:32:15 +0530 Subject: [PATCH 17/18] Disable Prioritization via flag for now --- composer.json | 2 +- composer.lock | 14 +++++++------- .../components/StateHandlers/Flow/index.js | 6 ++++-- src/OnboardingSPA/data/flows/default.js | 4 ++-- src/OnboardingSPA/data/flows/ecommerce.js | 4 ++-- src/OnboardingSPA/data/models/Chapter.js | 5 ++++- src/OnboardingSPA/index.js | 7 +++++++ .../steps/DesignHomepageMenu/index.js | 4 ++-- .../steps/DesignThemeStyles/Menu/index.js | 6 +++--- src/OnboardingSPA/steps/SitePages/index.js | 2 +- 10 files changed, 33 insertions(+), 21 deletions(-) diff --git a/composer.json b/composer.json index ba9aa7d53..bb3cb7115 100644 --- a/composer.json +++ b/composer.json @@ -34,7 +34,7 @@ "require": { "mustache/mustache": "^2.14", "wp-cli/wp-config-transformer": "^1.3", - "newfold-labs/wp-module-onboarding-data": "^0.0.1", + "newfold-labs/wp-module-onboarding-data": "^0.0.2", "newfold-labs/wp-module-patterns": "^0.1.2" }, "require-dev": { diff --git a/composer.lock b/composer.lock index 1a3efdeef..702e4dbb8 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "f94a6e6bb18bb0006e5a2b7d5c4e7a82", + "content-hash": "9f124f5577e66f736d3e41724d691488", "packages": [ { "name": "mustache/mustache", @@ -195,16 +195,16 @@ }, { "name": "newfold-labs/wp-module-onboarding-data", - "version": "0.0.1", + "version": "0.0.2", "source": { "type": "git", "url": "https://github.com/newfold-labs/wp-module-onboarding-data.git", - "reference": "02e4a1b64a0942eaae03cc7a7400bbcb5ee57f14" + "reference": "3076e11442cc358105df6f563e6e0b31e51690fd" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/newfold-labs/wp-module-onboarding-data/zipball/02e4a1b64a0942eaae03cc7a7400bbcb5ee57f14", - "reference": "02e4a1b64a0942eaae03cc7a7400bbcb5ee57f14", + "url": "https://api.github.com/repos/newfold-labs/wp-module-onboarding-data/zipball/3076e11442cc358105df6f563e6e0b31e51690fd", + "reference": "3076e11442cc358105df6f563e6e0b31e51690fd", "shasum": "" }, "require": { @@ -230,10 +230,10 @@ ], "description": "A non-toggleable module containing a standardized interface for interacting with Onboarding data.", "support": { - "source": "https://github.com/newfold-labs/wp-module-onboarding-data/tree/0.0.1", + "source": "https://github.com/newfold-labs/wp-module-onboarding-data/tree/0.0.2", "issues": "https://github.com/newfold-labs/wp-module-onboarding-data/issues" }, - "time": "2023-09-11T06:46:44+00:00" + "time": "2023-09-26T10:52:25+00:00" }, { "name": "newfold-labs/wp-module-patterns", diff --git a/src/OnboardingSPA/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js index b2814f09e..e78933dca 100644 --- a/src/OnboardingSPA/components/StateHandlers/Flow/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Flow/index.js @@ -128,7 +128,7 @@ const FlowStateHandler = ( { children } ) => { trackOnboardingEvent( new OnboardingEvent( ACTION_ONBOARDING_CHAPTER_COMPLETE, - currentChapter + lastChapter ) ); } @@ -153,7 +153,9 @@ const FlowStateHandler = ( { children } ) => { }; useEffect( () => { - prioritizeFlow(); + if ( false !== brandConfig?.prioritization ) { + return prioritizeFlow(); + } }, [ experienceLevel, topPriority ] ); useEffect( () => { diff --git a/src/OnboardingSPA/data/flows/default.js b/src/OnboardingSPA/data/flows/default.js index 8536d4caa..4cee09c68 100644 --- a/src/OnboardingSPA/data/flows/default.js +++ b/src/OnboardingSPA/data/flows/default.js @@ -23,7 +23,7 @@ export const getSteps = ( chapters = initialChapters ) => { chapters.forEach( ( chapter ) => { steps = steps.concat( [ ...chapter.steps, - ...chapter.interstitialSteps, + // ...chapter.interstitialSteps, ] ); } ); steps = steps.concat( [ stepComplete, stepWhatNext ] ); @@ -37,7 +37,7 @@ export const getRoutes = ( chapters = initialChapters ) => { routes = routes.concat( [ ...chapter.steps, ...chapter.conditionalSteps, - ...chapter.interstitialSteps, + // ...chapter.interstitialSteps, ] ); } ); routes = routes.concat( [ stepComplete, stepWhatNext ] ); diff --git a/src/OnboardingSPA/data/flows/ecommerce.js b/src/OnboardingSPA/data/flows/ecommerce.js index 3bf928c36..17576caa5 100644 --- a/src/OnboardingSPA/data/flows/ecommerce.js +++ b/src/OnboardingSPA/data/flows/ecommerce.js @@ -35,7 +35,7 @@ export const getSteps = ( chapters = initialChapters ) => { chapters.forEach( ( chapter ) => { steps = steps.concat( [ ...chapter.steps, - ...chapter.interstitialSteps, + // ...chapter.interstitialSteps, ] ); } ); steps = steps.concat( [ stepComplete, stepWhatNext ] ); @@ -49,7 +49,7 @@ export const getRoutes = ( chapters = initialChapters ) => { routes = routes.concat( [ ...chapter.steps, ...chapter.conditionalSteps, - ...chapter.interstitialSteps, + // ...chapter.interstitialSteps, ] ); } ); routes = routes.concat( [ stepComplete, stepWhatNext ] ); diff --git a/src/OnboardingSPA/data/models/Chapter.js b/src/OnboardingSPA/data/models/Chapter.js index ae6a693f4..96684aab1 100644 --- a/src/OnboardingSPA/data/models/Chapter.js +++ b/src/OnboardingSPA/data/models/Chapter.js @@ -14,7 +14,10 @@ export class Chapter { step.chapter = this.id; return step; } ); - this.conditionalSteps = conditionalSteps; + this.conditionalSteps = conditionalSteps.map( ( step ) => { + step.chapter = this.id; + return step; + } ); this.initialSteps = initialSteps; this.topSteps = topSteps; this.interstitialSteps = interstitialSteps; diff --git a/src/OnboardingSPA/index.js b/src/OnboardingSPA/index.js index bf10de421..1348ab20f 100644 --- a/src/OnboardingSPA/index.js +++ b/src/OnboardingSPA/index.js @@ -11,6 +11,8 @@ import App from './components/App'; import { HashRouter } from 'react-router-dom'; import { dispatch } from '@wordpress/data'; import { render } from '@wordpress/element'; +import { getInitialChapters } from './data/flows'; +import { stateToStore } from './chapters/utils'; /** * Component passed to wp.element.render(). @@ -26,6 +28,11 @@ const NFDOnboarding = () => ( const initializeFlowData = ( currentData ) => { currentData.hasExited = 0; currentData.isComplete = 0; + const currentFlow = window.nfdOnboarding.currentFlow; + currentData.data.chapters = stateToStore( + getInitialChapters( currentFlow ), + currentData.data.chapters + ); return currentData; }; diff --git a/src/OnboardingSPA/steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js index fc88d0ff8..6e804ae59 100644 --- a/src/OnboardingSPA/steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js @@ -23,8 +23,8 @@ import { trackOnboardingEvent, } from '../../utils/analytics/hiive'; import getContents from './contents'; -import { ACTION_HOMEPAGE_LAYOUT_SELECTED } from '../../../utils/analytics/hiive/constants'; -import Grid from '../../../components/Grid'; +import { ACTION_HOMEPAGE_LAYOUT_SELECTED } from '../../utils/analytics/hiive/constants'; +import Grid from '../../components/Grid'; const StepDesignHomepageMenu = () => { const location = useLocation(); diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js index b79b1938c..1399570e2 100644 --- a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js @@ -25,9 +25,9 @@ import { injectInAllSteps } from '../../../data/flows/utils'; import { OnboardingEvent, trackOnboardingEvent, -} from '../../../../utils/analytics/hiive'; -import { ACTION_THEME_STYLE_SELECTED } from '../../../../utils/analytics/hiive/constants'; -import Grid from '../../../../components/Grid'; +} from '../../../utils/analytics/hiive'; +import { ACTION_THEME_STYLE_SELECTED } from '../../../utils/analytics/hiive/constants'; +import Grid from '../../../components/Grid'; const StepDesignThemeStylesMenu = () => { const content = getContents(); diff --git a/src/OnboardingSPA/steps/SitePages/index.js b/src/OnboardingSPA/steps/SitePages/index.js index a18c2797a..c2e0d4469 100644 --- a/src/OnboardingSPA/steps/SitePages/index.js +++ b/src/OnboardingSPA/steps/SitePages/index.js @@ -19,7 +19,7 @@ import { } from '../../components/LivePreview'; import LivePreviewSkeleton from '../../components/LivePreview/LivePreviewSkeleton'; import getContents from './contents'; -import Grid from '../../../components/Grid'; +import Grid from '../../components/Grid'; const StepSitePages = () => { const location = useLocation(); From bb4257c464d7e5ae6d3975bf8b143bdf53a3f589 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 26 Sep 2023 16:53:48 +0530 Subject: [PATCH 18/18] Lint fixes --- src/OnboardingSPA/steps/Complete/index.js | 11 ++- src/OnboardingSPA/steps/DesignColors/index.js | 4 +- .../steps/DesignTypography/index.js | 4 +- .../steps/Ecommerce/StepAddress/index.js | 72 ++++++++-------- .../steps/Ecommerce/StepProducts/index.js | 4 +- .../SiteTypeSetup/SecondarySite/index.js | 84 +++++++++---------- src/OnboardingSPA/steps/SiteFeatures/index.js | 6 +- src/OnboardingSPA/steps/SitePages/index.js | 18 ++-- 8 files changed, 108 insertions(+), 95 deletions(-) diff --git a/src/OnboardingSPA/steps/Complete/index.js b/src/OnboardingSPA/steps/Complete/index.js index f941b7d9f..51f964852 100644 --- a/src/OnboardingSPA/steps/Complete/index.js +++ b/src/OnboardingSPA/steps/Complete/index.js @@ -49,7 +49,9 @@ const StepComplete = () => { async function completeFlowRequest() { const flowCompletionResponse = await completeFlow(); - if ( flowCompletionResponse?.error ) return false; + if ( flowCompletionResponse?.error ) { + return false; + } return true; } @@ -60,8 +62,11 @@ const StepComplete = () => { }; useEffect( () => { - if ( isQueueEmpty ) checkFlowComplete(); - else flushQueue(); + if ( isQueueEmpty ) { + checkFlowComplete(); + } else { + flushQueue(); + } }, [ isQueueEmpty ] ); useEffect( () => { diff --git a/src/OnboardingSPA/steps/DesignColors/index.js b/src/OnboardingSPA/steps/DesignColors/index.js index 68f2b0c10..91b2e3447 100644 --- a/src/OnboardingSPA/steps/DesignColors/index.js +++ b/src/OnboardingSPA/steps/DesignColors/index.js @@ -51,7 +51,9 @@ const StepDesignColors = () => { }; useEffect( () => { - if ( THEME_STATUS_ACTIVE === themeStatus ) getStylesAndPatterns(); + if ( THEME_STATUS_ACTIVE === themeStatus ) { + getStylesAndPatterns(); + } }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/steps/DesignTypography/index.js b/src/OnboardingSPA/steps/DesignTypography/index.js index 21737b9e7..09930b842 100644 --- a/src/OnboardingSPA/steps/DesignTypography/index.js +++ b/src/OnboardingSPA/steps/DesignTypography/index.js @@ -53,7 +53,9 @@ const StepDesignTypography = () => { }; useEffect( () => { - if ( THEME_STATUS_ACTIVE === themeStatus ) getFontPatterns(); + if ( THEME_STATUS_ACTIVE === themeStatus ) { + getFontPatterns(); + } }, [ themeStatus ] ); return ( diff --git a/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js index 3a081d056..b188a74b0 100644 --- a/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js +++ b/src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js @@ -301,43 +301,43 @@ const StepAddress = () => { />
    { states.length === 0 || - address === undefined ? null : ( -
    - - - ) ) } - -
    - ) } + key={ '' } + value={ '' } + selected + /> + { states.map( ( state ) => ( + + ) ) } + +
    + ) }
    diff --git a/src/OnboardingSPA/steps/SiteFeatures/index.js b/src/OnboardingSPA/steps/SiteFeatures/index.js index 4b71739d9..2bf116ae1 100644 --- a/src/OnboardingSPA/steps/SiteFeatures/index.js +++ b/src/OnboardingSPA/steps/SiteFeatures/index.js @@ -77,9 +77,11 @@ const StepSiteFeatures = () => { async function getCustomPlugins() { const customPlugins = await getSiteFeatures(); - if ( isEmpty( currentData?.data?.siteFeatures ) ) + if ( isEmpty( currentData?.data?.siteFeatures ) ) { changeToStoreSchema( customPlugins.body, true ); - else setSelectedPlugins( { ...currentData?.data?.siteFeatures } ); + } else { + setSelectedPlugins( { ...currentData?.data?.siteFeatures } ); + } setCustomPluginsList( customPlugins.body ); } diff --git a/src/OnboardingSPA/steps/SitePages/index.js b/src/OnboardingSPA/steps/SitePages/index.js index c2e0d4469..2cc3bec5e 100644 --- a/src/OnboardingSPA/steps/SitePages/index.js +++ b/src/OnboardingSPA/steps/SitePages/index.js @@ -86,13 +86,13 @@ const StepSitePages = () => { const stateToFlowData = ( selectedPages, pages ) => { return pages !== false ? pages?.reduce( ( newSitePages, sitePage ) => { - return selectedPages.includes( sitePage.slug ) - ? newSitePages.concat( { - slug: sitePage.slug, - title: sitePage.title, - } ) - : newSitePages; - }, [] ) + return selectedPages.includes( sitePage.slug ) + ? newSitePages.concat( { + slug: sitePage.slug, + title: sitePage.title, + } ) + : newSitePages; + }, [] ) : undefined; }; @@ -148,7 +148,9 @@ const StepSitePages = () => { }; useEffect( () => { - if ( themeStatus === THEME_STATUS_ACTIVE ) getSitePages(); + if ( themeStatus === THEME_STATUS_ACTIVE ) { + getSitePages(); + } }, [ themeStatus ] ); const content = getContents();