diff --git a/composer.json b/composer.json index 345ddeb54..bb3cb7115 100644 --- a/composer.json +++ b/composer.json @@ -34,8 +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-onboarding-data": "^0.0.2", "newfold-labs/wp-module-patterns": "^0.1.2" }, "require-dev": { diff --git a/composer.lock b/composer.lock index 866ed2b79..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", @@ -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.2", @@ -98,18 +193,60 @@ }, "time": "2023-09-18T06:42:43+00:00" }, + { + "name": "newfold-labs/wp-module-onboarding-data", + "version": "0.0.2", + "source": { + "type": "git", + "url": "https://github.com/newfold-labs/wp-module-onboarding-data.git", + "reference": "3076e11442cc358105df6f563e6e0b31e51690fd" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/newfold-labs/wp-module-onboarding-data/zipball/3076e11442cc358105df6f563e6e0b31e51690fd", + "reference": "3076e11442cc358105df6f563e6e0b31e51690fd", + "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\\Onboarding\\Data\\": "includes/" + } + }, + "authors": [ + { + "name": "arunshenoy99", + "email": "devarunshenoy99@gmail.com" + } + ], + "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.2", + "issues": "https://github.com/newfold-labs/wp-module-onboarding-data/issues" + }, + "time": "2023-09-26T10:52:25+00:00" + }, { "name": "newfold-labs/wp-module-patterns", - "version": "0.1.2", + "version": "0.1.4", "source": { "type": "git", "url": "https://github.com/newfold-labs/wp-module-patterns.git", - "reference": "55c0bfcc09f9e16c6f4c04dc343910d61ae08e44" + "reference": "789a8fc80ff82ea71604a121e197ff9f3d733799" }, "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-patterns/zipball/789a8fc80ff82ea71604a121e197ff9f3d733799", + "reference": "789a8fc80ff82ea71604a121e197ff9f3d733799", "shasum": "" }, "require-dev": { @@ -126,10 +263,10 @@ }, "scripts": { "lint": [ - "vendor/bin/phpcs . --standard=Newfold" + "vendor/bin/phpcs . --ignore=*/build/* --standard=Newfold -d error_reporting=\"E_ALL&~E_DEPRECATED\"" ], "clean": [ - "vendor/bin/phpcbf . --standard=Newfold" + "vendor/bin/phpcbf . --ignore=*/build/* --standard=Newfold -d error_reporting=\"E_ALL&~E_DEPRECATED\"" ] }, "license": [ @@ -143,10 +280,10 @@ ], "description": "WordPress Cloud Patterns", "support": { - "source": "https://github.com/newfold-labs/wp-module-patterns/tree/0.1.2", + "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-01T18:51:50+00:00" + "time": "2023-08-22T15:34:41+00:00" }, { "name": "wp-cli/wp-config-transformer", @@ -192,6 +329,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 +410,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": [ diff --git a/includes/Data/Brands.php b/includes/Data/Brands.php deleted file mode 100644 index a8653657a..000000000 --- a/includes/Data/Brands.php +++ /dev/null @@ -1,381 +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, - ), - ), - ), - ), - ), - 'hostgator-br' => array( - 'brand' => 'hostgator-br', - 'name' => 'HostGator', - 'url' => 'https://www.hostgator.com.br', - 'knowledgeBaseUrl' => 'https://suporte.hostgator.com.br/hc/pt-br', - 'helpUrl' => 'https://cliente.hostgator.com.br/suporte', - 'blogUrl' => 'https://www.hostgator.com.br/blog/', - 'facebookUrl' => 'https://www.facebook.com/HostgatorBrasil/', - 'twitterName' => '@hostgatorbrasil', - 'twitterUrl' => 'https://twitter.com/hostgatorbrasil', - 'youtubeUrl' => 'https://www.youtube.com/c/HostGatorBrasil', - 'linkedinUrl' => 'https://www.linkedin.com/company/hostgator-latam/', - 'accountUrl' => 'https://financeiro.hostgator.com.br/', - 'domainsUrl' => 'https://cliente.hostgator.com.br/dominios', - 'emailUrl' => 'https://cliente.hostgator.com.br/emails-list', - 'pluginDashboardPage' => \admin_url( 'admin.php?page=hostgator' ), - 'phoneNumbers' => array( - 'support' => '', - ), - 'hireExpertsInfo' => array( - 'defaultLink' => 'https://suporte.hostgator.com.br/hc/pt-br', - 'fragment' => '', - 'queryParameters' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - 'utm_campaign' => 'wp-setup', - ), - ), - 'expertsInfo' => array( - 'defaultLink' => 'https://suporte.hostgator.com.br/hc/pt-br', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'fullServiceCreativeTeamInfo' => array( - 'defaultLink' => 'https://suporte.hostgator.com.br/hc/pt-br', - 'fragment' => '', - 'queryParams' => array( - 'utm_source' => 'wp-onboarding', - 'utm_medium' => 'brand-plugin', - ), - ), - 'techSupportInfo' => array( - 'defaultLink' => 'https://suporte.hostgator.com.br/hc/pt-br', - '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 string - */ - public static function set_current_brand( $container ) { - if ( ! defined( 'NFD_ONBOARDING_PLUGIN_BRAND' ) ) { - $brand = $container->plugin()->brand; - if ( empty( $brand ) ) { - $brand = 'wordpress'; - } - - if ( false !== strpos( $brand, 'hostgator' ) ) { - $region = strtolower( $container->plugin()->region ); - $brand = "hostgator-{$region}"; - } - - $brand = sanitize_title_with_dashes( str_replace( '_', '-', $brand ) ); - - define( 'NFD_ONBOARDING_PLUGIN_BRAND', $brand ); - - return $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 c0950b65e..000000000 --- a/includes/Data/Patterns.php +++ /dev/null @@ -1,492 +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 ]; - $block_patterns = $squash ? '' : array(); - - 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 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/includes/RestApi/FlowController.php b/includes/RestApi/FlowController.php index 6595af946..e03baeed6 100644 --- a/includes/RestApi/FlowController.php +++ b/includes/RestApi/FlowController.php @@ -2,8 +2,8 @@ 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; +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/includes/RestApi/SitePagesController.php b/includes/RestApi/SitePagesController.php index a928a1aba..d839bf89b 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 21737af99..1f6c94c1e 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; use NewfoldLabs\WP\Module\Onboarding\Services\I18nService; /** diff --git a/src/Brands/bluehost/step-interstitial.png b/src/Brands/bluehost/step-interstitial.png new file mode 100644 index 000000000..6efab3bf5 Binary files /dev/null and b/src/Brands/bluehost/step-interstitial.png differ diff --git a/src/OnboardingSPA/chapters/commerce.js b/src/OnboardingSPA/chapters/commerce.js new file mode 100644 index 000000000..89a64a76f --- /dev/null +++ b/src/OnboardingSPA/chapters/commerce.js @@ -0,0 +1,23 @@ +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..e1f226ef1 --- /dev/null +++ b/src/OnboardingSPA/chapters/demographic.js @@ -0,0 +1,32 @@ +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..5b7309ba1 --- /dev/null +++ b/src/OnboardingSPA/chapters/design.js @@ -0,0 +1,42 @@ +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 ], +} ); diff --git a/src/OnboardingSPA/chapters/features.js b/src/OnboardingSPA/chapters/features.js new file mode 100644 index 000000000..f7798fa53 --- /dev/null +++ b/src/OnboardingSPA/chapters/features.js @@ -0,0 +1,13 @@ +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, +} ); diff --git a/src/OnboardingSPA/chapters/layoutContent.js b/src/OnboardingSPA/chapters/layoutContent.js new file mode 100644 index 000000000..7e055527e --- /dev/null +++ b/src/OnboardingSPA/chapters/layoutContent.js @@ -0,0 +1,24 @@ +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 ], +} ); diff --git a/src/OnboardingSPA/chapters/utils.js b/src/OnboardingSPA/chapters/utils.js new file mode 100644 index 000000000..7c21c1ae8 --- /dev/null +++ b/src/OnboardingSPA/chapters/utils.js @@ -0,0 +1,104 @@ +// 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 ] + ? topPriorityToChapterMap[ topPriority ] + : layoutContent; +}; + +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 deleted file mode 100644 index e23231f49..000000000 --- a/src/OnboardingSPA/components/Button/ButtonBlue/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import { Button } from '@wordpress/components'; - -const ButtonBlue = ( { - className = 'nfd-onboarding-button--blue', - text, - onClick = false, -} ) => { - return ( - - ); -}; - -export default ButtonBlue; diff --git a/src/OnboardingSPA/components/Button/ButtonWhite/index.js b/src/OnboardingSPA/components/Button/ButtonWhite/index.js index 4118b7505..5fc778b57 100644 --- a/src/OnboardingSPA/components/Button/ButtonWhite/index.js +++ b/src/OnboardingSPA/components/Button/ButtonWhite/index.js @@ -1,13 +1,13 @@ import { Button } from '@wordpress/components'; +import classNames from 'classnames'; -const ButtonWhite = ( { - className = 'nfd-onboarding-button--white', - text, - onClick = false, -} ) => { +const ButtonWhite = ( { className, text, onClick = false } ) => { return ( + ); +}; + +export default ButtonWithBackground; diff --git a/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss b/src/OnboardingSPA/components/Button/ButtonWithBackground/stylesheet.scss similarity index 92% rename from src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss rename to src/OnboardingSPA/components/Button/ButtonWithBackground/stylesheet.scss index 564e6f551..d91314f32 100644 --- a/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/ButtonWithBackground/stylesheet.scss @@ -1,7 +1,7 @@ .nfd-onboarding-button { - &--blue { + &--background { justify-content: center; align-items: center; width: 100%; diff --git a/src/OnboardingSPA/components/Button/stylesheet.scss b/src/OnboardingSPA/components/Button/stylesheet.scss index d899a8e23..a6a734f08 100644 --- a/src/OnboardingSPA/components/Button/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/stylesheet.scss @@ -1,4 +1,4 @@ -@import "./ButtonBlue/stylesheet"; +@import "./ButtonWithBackground/stylesheet"; @import "./ButtonWhite/stylesheet"; .nfd-card-button { diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 35a2f4608..6fe244b1e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -17,7 +17,7 @@ import { stateToStore, storeToState, findIndexInPalette, -} from '../../../pages/Steps/DesignColors/utils'; +} from '../../../steps/DesignColors/utils'; import ColorPickerButton from '../../ColorPickerButton'; import { ACTION_COLORS_SELECTED } from '../../../utils/analytics/hiive/constants'; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 8f0144967..51daa932f 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -41,7 +41,7 @@ const DesignHeaderMenu = () => { const getPatternsData = async () => { const headerMenuPreviewResponse = await getPatterns( - currentStep.patternId + currentStep?.data?.patternId ); if ( headerMenuPreviewResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); @@ -133,7 +133,8 @@ const DesignHeaderMenu = () => { return ( { setSelectedStyle( selectedGlobalStyle ); const patternResponse = await getPatterns( - currentStep.patternId, + currentStep?.data?.patternId, true ); if ( patternResponse?.error ) { @@ -144,7 +144,8 @@ const DesignThemeStylesPreview = () => { className={ 'theme-styles-preview--drawer__list__item' } watch={ globalStyles && pattern } count={ - themeVariations[ currentStep?.patternId ]?.previewCount + themeVariations[ currentStep?.data?.patternId ] + ?.previewCount } callback={ buildPreviews } viewportWidth={ 900 } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js index dafeaa490..b329c672a 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js @@ -1,5 +1,5 @@ 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'; @@ -7,13 +7,10 @@ import { VIEW_NAV_PRIMARY } from '../../../../../constants'; import { __ } from '@wordpress/i18n'; import { store as nfdOnboardingStore } from '../../../../store'; import Animate from '../../../Animate'; +import { commerce as commerceChapter } from '../../../../chapters/commerce'; const NavStoreInfo = () => { - const { storeInfoSteps } = useSelect( ( select ) => { - return { - storeInfoSteps: select( nfdOnboardingStore ).getStoreInfoSteps(), - }; - }, [] ); + const storeInfoSteps = commerceChapter.steps; const { setDrawerActiveView } = useDispatch( nfdOnboardingStore ); return ( @@ -39,10 +36,10 @@ const NavStoreInfo = () => { 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/NavDesign.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js index eeaeba7cf..28745a047 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavDesign.js @@ -10,9 +10,9 @@ import classNames from 'classnames'; import Animate from '../../Animate'; const NavDesign = () => { - const { designSteps } = useSelect( ( select ) => { + const { designRoutes } = useSelect( ( select ) => { return { - designSteps: select( nfdOnboardingStore ).getDesignSteps(), + designRoutes: select( nfdOnboardingStore ).getDesignRoutes(), }; }, [] ); const { setDrawerActiveView } = useDispatch( nfdOnboardingStore ); @@ -31,7 +31,7 @@ const NavDesign = () => {
    - { designSteps.map( ( step ) => { + { designRoutes.map( ( step ) => { return (
  • { location.pathname === step.path || location.pathname.includes( - step?.designDrawerActiveLinkIncludes + step?.data + ?.designDrawerActiveLinkIncludes ), } ) } 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 1eb353d50..4b36f6d6b 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -3,14 +3,14 @@ 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 { pluginDashboardPage } from '../../../constants'; -import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics'; import { OnboardingEvent, trackOnboardingEvent, diff --git a/src/OnboardingSPA/components/Header/step-navigation.js b/src/OnboardingSPA/components/Header/step-navigation.js index 0ff7d5e97..9e8371a23 100644 --- a/src/OnboardingSPA/components/Header/step-navigation.js +++ b/src/OnboardingSPA/components/Header/step-navigation.js @@ -2,8 +2,8 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useNavigate } from 'react-router-dom'; import { Button, ButtonGroup } from '@wordpress/components'; import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; - import { __ } from '@wordpress/i18n'; + import { setFlow } from '../../utils/api/flow'; import { store as nfdOnboardingStore } from '../../store'; import { pluginDashboardPage } from '../../../constants'; 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..092a374ae --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/contents.js @@ -0,0 +1,52 @@ +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( + /* 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; 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..d59bc65bf --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js @@ -0,0 +1,121 @@ +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 ButtonWithBackground from '../../../Button/ButtonWithBackground'; +import ButtonWhite from '../../../Button/ButtonWhite'; +import { activateInitialPlugins } from '../../../../utils/api/plugins'; +import { + OnboardingEvent, + sendOnboardingEvent, +} from '../../../../utils/analytics/hiive'; +import { pluginDashboardPage } from '../../../../../constants'; +import { setFlow } from '../../../../utils/api/flow'; +import { ACTION_ONBOARDING_COMPLETE } from '../../../../utils/analytics/hiive/constants'; + +const ChapterInterstitialLoader = () => { + const [ countdown, setCountdown ] = useState( 15 ); + const navigate = useNavigate(); + const { setIsDrawerSuppressed, setSidebarActiveView } = + useDispatch( nfdOnboardingStore ); + + async function saveDataAndExit() { + if ( currentData ) { + currentData.isComplete = new Date().getTime(); + setFlow( currentData ); + } + + activateInitialPlugins(); + sendOnboardingEvent( + new OnboardingEvent( ACTION_ONBOARDING_COMPLETE ) + ); + window.location.replace( pluginDashboardPage ); + } + + useEffect( () => { + const interval = setInterval( () => { + setCountdown( countdown - 1 ); + }, 1000 ); + if ( 0 === countdown ) { + clearInterval( interval ); + saveDataAndExit(); + } + return () => { + clearInterval( interval ); + }; + }, [ countdown ] ); + + useEffect( () => { + 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; 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..bfc2a0bac --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Chapter/Interstitial/stylesheet.scss @@ -0,0 +1,103 @@ +.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: #000; + flex-direction: row; + margin-top: 30px; + + &__column-left { + padding: 0 20px; + width: 45%; + + @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: 55%; + + @media (max-width: #{ ($break-xlarge) }) { + display: none; + } + + min-height: 250px; + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + + &__img { + background-image: var(--nfd-onboarding-step-interstitial-img); + background-color: var(--nfd-onboarding-tertiary); + overflow: hidden; + background-size: cover; + background-repeat: no-repeat; + height: 100%; + width: 100%; + } + } + } + + &__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/components/SkipButton/index.js b/src/OnboardingSPA/components/SkipButton/index.js index a43b3046b..0e0826675 100644 --- a/src/OnboardingSPA/components/SkipButton/index.js +++ b/src/OnboardingSPA/components/SkipButton/index.js @@ -3,12 +3,12 @@ import { memo } from '@wordpress/element'; import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { useLocation, useNavigate } from 'react-router-dom'; +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 { pluginDashboardPage } from '../../../constants'; -import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics'; import { CATEGORY } from '../../utils/analytics/hiive/constants'; const SkipButton = ( { callback = false } ) => { 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/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js index d562e3845..e78933dca 100644 --- a/src/OnboardingSPA/components/StateHandlers/Flow/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Flow/index.js @@ -1,93 +1,176 @@ -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, + lastChapter + ) + ); + } + + 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( () => { + if ( false !== brandConfig?.prioritization ) { + return 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..4cee09c68 --- /dev/null +++ b/src/OnboardingSPA/data/flows/default.js @@ -0,0 +1,132 @@ +// 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' + ); + firstGetStartedStepObject.data.primaryDrawerActiveLinkIncludes = + '/wp-setup/step/get-started/'; + return new PseudoStep( firstGetStartedStepObject ); +}; + +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 ); +}; + +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..17576caa5 --- /dev/null +++ b/src/OnboardingSPA/data/flows/ecommerce.js @@ -0,0 +1,96 @@ +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; + firstEcommerceStepObject.data.primaryDrawerActiveLinkIncludes = + '/ecommerce/step/'; + 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..ea7748d4d --- /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[ flow ].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..96684aab1 --- /dev/null +++ b/src/OnboardingSPA/data/models/Chapter.js @@ -0,0 +1,25 @@ +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.map( ( step ) => { + step.chapter = this.id; + return step; + } ); + 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..c578ce61e --- /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..4c3bfb3f2 --- /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; + } +} diff --git a/src/OnboardingSPA/data/models/PseudoStep.js b/src/OnboardingSPA/data/models/PseudoStep.js new file mode 100644 index 000000000..11895be8c --- /dev/null +++ b/src/OnboardingSPA/data/models/PseudoStep.js @@ -0,0 +1,15 @@ +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, + } ); + } +} diff --git a/src/OnboardingSPA/data/models/Step.js b/src/OnboardingSPA/data/models/Step.js new file mode 100644 index 000000000..6407a8586 --- /dev/null +++ b/src/OnboardingSPA/data/models/Step.js @@ -0,0 +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; + } +} 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/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/pages/ErrorPage/page.js b/src/OnboardingSPA/pages/ErrorPage/page.js new file mode 100644 index 000000000..9e1c9f019 --- /dev/null +++ b/src/OnboardingSPA/pages/ErrorPage/page.js @@ -0,0 +1,11 @@ +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, +} ); diff --git a/src/OnboardingSPA/pages/IndexPage/index.js b/src/OnboardingSPA/pages/IndexPage/index.js new file mode 100644 index 000000000..bb196689a --- /dev/null +++ b/src/OnboardingSPA/pages/IndexPage/index.js @@ -0,0 +1,25 @@ +import { Fragment, useEffect } from '@wordpress/element'; + +import { store as nfdOnboardingStore } from '../../store'; +import { useNavigate } from 'react-router-dom'; +import { useSelect } from '@wordpress/data'; + +const IndexPage = () => { + const navigate = useNavigate(); + const { firstStep } = useSelect( ( select ) => { + return { + firstStep: select( nfdOnboardingStore ).getFirstStep(), + }; + }, [] ); + + useEffect( () => { + navigate( firstStep.path, { + replace: true, + state: { origin: 'index-redirect' }, + } ); + } ); + + return ; +}; + +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..7e2c3e0a3 --- /dev/null +++ b/src/OnboardingSPA/pages/IndexPage/page.js @@ -0,0 +1,9 @@ +import IndexPage from '.'; +import { Page } from '../../data/models/Page'; + +export const indexPage = new Page( { + path: '/', + title: '', + Component: IndexPage, + Icon: <>, +} ); 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/BasicInfo/stylesheet.scss b/src/OnboardingSPA/pages/Steps/BasicInfo/stylesheet.scss deleted file mode 100644 index 5aafaf4cc..000000000 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/stylesheet.scss +++ /dev/null @@ -1,42 +0,0 @@ -.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; - } - } -} - -.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/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/DesignThemeStyles/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/stylesheet.scss deleted file mode 100644 index f8df10451..000000000 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/stylesheet.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "./Menu/stylesheet.scss"; -@import "./Preview/stylesheet.scss"; 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/Steps/GetStarted/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/index.js deleted file mode 100644 index 750bc8aca..000000000 --- a/src/OnboardingSPA/pages/Steps/GetStarted/index.js +++ /dev/null @@ -1,37 +0,0 @@ -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'; - -const StepGetStarted = () => { - const location = useLocation(); - - const { setSidebarActiveView } = useDispatch(nfdOnboardingStore); - - useEffect(() => { - setSidebarActiveView( SIDEBAR_LEARN_MORE ); - }, []); - - useEffect(() => {}, [location]); - - const { setDrawerActiveView, setIsDrawerOpened } = useDispatch( - nfdOnboardingStore - ); - - useEffect(() => { - setIsDrawerOpened(false); - setDrawerActiveView(VIEW_NAV_GET_STARTED); - }, []); - - return ( - - - - ); -}; - -export default StepGetStarted; diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/stylesheet.scss deleted file mode 100644 index 079e9dc2c..000000000 --- a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/stylesheet.scss +++ /dev/null @@ -1,12 +0,0 @@ -.nfd-onboarding-sidebar-learn-more { - &__what-next { - &__container { - height: 232px; - - &.is-opened { - padding: 0px; - } - - } - } -} \ No newline at end of file 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/index.js b/src/OnboardingSPA/pages/index.js deleted file mode 100644 index 1ac6bab12..000000000 --- a/src/OnboardingSPA/pages/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import { Fragment, useEffect } from '@wordpress/element'; - -import { store as nfdOnboardingStore } from '../store'; -import { useNavigate } from 'react-router-dom'; -import { useSelect } from '@wordpress/data'; - -const IndexRoute = () => { - const navigate = useNavigate(); - const { firstStep } = useSelect((select) => { - return { - firstStep: select(nfdOnboardingStore).getFirstStep(), - }; - }, []); - - useEffect(() => { - navigate(firstStep.path, { - replace: true, - state: { origin: 'index-redirect' }, - }); - }); - - return ; -}; - -export default IndexRoute; diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/contents.js b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/contents.js similarity index 94% rename from src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/contents.js rename to src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/contents.js index 211e9d54e..ddff27db2 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 = ( 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..e0e88b71b 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/BasicInfo/Sidebar/LearnMore/index.js @@ -1,35 +1,29 @@ -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' - ) + import( '../../../../components/Sidebar/components/LearnMore/SupportLink' ) ); const StepIntroPanel = lazy( () => import( - '../../../../../../components/Sidebar/components/LearnMore/StepIntroPanel' + '../../../../components/Sidebar/components/LearnMore/StepIntroPanel' ) ); @@ -56,7 +50,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..10eee8d2f --- /dev/null +++ b/src/OnboardingSPA/steps/BasicInfo/step.js @@ -0,0 +1,29 @@ +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' ) + ), + }, +} ); diff --git a/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss b/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss new file mode 100644 index 000000000..65f598f84 --- /dev/null +++ b/src/OnboardingSPA/steps/BasicInfo/stylesheet.scss @@ -0,0 +1,44 @@ +.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; + } + } +} + +.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/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 0a94ea8c3..b1df9a7a8 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 74% rename from src/OnboardingSPA/pages/Steps/Complete/index.js rename to src/OnboardingSPA/steps/Complete/index.js index 0971ea8f2..51f964852 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 { THEME_STATUS_INIT } from '../../../constants'; +import { DesignStateHandler } from '../../components/StateHandlers'; const StepComplete = () => { const { @@ -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,12 +62,22 @@ const StepComplete = () => { }; useEffect( () => { - if ( isQueueEmpty ) checkFlowComplete(); - else flushQueue(); + if ( isQueueEmpty ) { + checkFlowComplete(); + } else { + flushQueue(); + } }, [ isQueueEmpty ] ); + useEffect( () => { + setNavigationState(); + }, [] ); + return ( - + { isError ? ( import( './index' ) ); + +export const stepComplete = new Step( { + path: '/wp-setup/step/complete', + Component: StepComplete, +} ); 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 e7057beba..7d5fbc0ee 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..3f2712876 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignColors/Sidebar/LearnMore/index.js @@ -1,31 +1,29 @@ 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' - ) + import( '../../../../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 76% rename from src/OnboardingSPA/pages/Steps/DesignColors/index.js rename to src/OnboardingSPA/steps/DesignColors/index.js index 27988c84c..91b2e3447 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 ) { @@ -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/DesignColors/step.js b/src/OnboardingSPA/steps/DesignColors/step.js new file mode 100644 index 000000000..b62e28129 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignColors/step.js @@ -0,0 +1,25 @@ +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', + }, +} ); 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 e12959adb..53e220fc0 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..53e0ba0fd 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/Sidebar/LearnMore/index.js @@ -1,31 +1,29 @@ 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' - ) + import( '../../../../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..7be48fab2 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignHeaderMenu/step.js @@ -0,0 +1,28 @@ +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', + }, +} ); 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 3801dfc96..7961aeaa0 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..c4fb3a65d --- /dev/null +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/Sidebar/LearnMore/index.js @@ -0,0 +1,83 @@ +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 87% rename from src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js rename to src/OnboardingSPA/steps/DesignHomepageMenu/index.js index 0d0c63644..6e804ae59 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js @@ -2,29 +2,29 @@ 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 Grid from '../../../components/Grid'; +import { ACTION_HOMEPAGE_LAYOUT_SELECTED } from '../../utils/analytics/hiive/constants'; +import Grid from '../../components/Grid'; const StepDesignHomepageMenu = () => { const location = useLocation(); @@ -70,7 +70,7 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternDataTemp = await getPatterns( - currentStep.patternId + currentStep?.data?.patternId ); if ( homepagePatternDataTemp?.error ) { diff --git a/src/OnboardingSPA/steps/DesignHomepageMenu/step.js b/src/OnboardingSPA/steps/DesignHomepageMenu/step.js new file mode 100644 index 000000000..85826337d --- /dev/null +++ b/src/OnboardingSPA/steps/DesignHomepageMenu/step.js @@ -0,0 +1,28 @@ +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'; + +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 ], + }, + }, + data: { + patternId: 'homepage-styles', + tooltipText: __( + 'There’s no place like a great home page', + 'wp-module-onboarding' + ), + }, +} ); 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 d9b3254a3..550b927f6 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 = ( diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js similarity index 89% rename from src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js index cd9b5e74f..e478d061c 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js @@ -52,20 +52,14 @@ const LearnMore = () => { ); return ( -
    +
    { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( - + ) } { const content = getContents(); @@ -77,7 +77,7 @@ const StepDesignThemeStylesMenu = () => { const getStylesAndPatterns = async () => { const patternsResponse = await getPatterns( - currentStep.patternId, + currentStep?.data?.patternId, true ); if ( patternsResponse?.error ) { @@ -121,13 +121,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 = () => { diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js new file mode 100644 index 000000000..3dcec580e --- /dev/null +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js @@ -0,0 +1,25 @@ +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'; + +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 ], + }, + }, + data: { + designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/', + patternId: 'theme-styles', + }, +} ); 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 d9b3254a3..550b927f6 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 = ( 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 77% 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..092097b34 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,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/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..4e27e5db9 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js @@ -0,0 +1,25 @@ +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', + }, +} ); 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/steps/DesignThemeStyles/stylesheet.scss b/src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss new file mode 100644 index 000000000..7aedd10c6 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignThemeStyles/stylesheet.scss @@ -0,0 +1,2 @@ +@import "./Menu/stylesheet"; +@import "./Preview/stylesheet"; 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 63ce9d0d8..c7d9825ed 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..eb95c219c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/steps/DesignTypography/Sidebar/LearnMore/index.js @@ -1,31 +1,29 @@ 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' - ) + import( '../../../../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 77% rename from src/OnboardingSPA/pages/Steps/DesignTypography/index.js rename to src/OnboardingSPA/steps/DesignTypography/index.js index e61c598fc..09930b842 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 ) { @@ -51,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/DesignTypography/step.js b/src/OnboardingSPA/steps/DesignTypography/step.js new file mode 100644 index 000000000..a8b326940 --- /dev/null +++ b/src/OnboardingSPA/steps/DesignTypography/step.js @@ -0,0 +1,25 @@ +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', + }, +} ); 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 18a72d520..f67320105 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 = ( diff --git a/src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/index.js b/src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js similarity index 96% rename from src/OnboardingSPA/pages/Steps/SiteFeatures/Sidebar/LearnMore/index.js rename to src/OnboardingSPA/steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js index 7496c841f..a106a974e 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'; @@ -52,7 +52,7 @@ const LearnMore = () => { ); return ( -
    +
    { const [ settings, setSettings ] = useState(); @@ -301,43 +301,43 @@ const StepAddress = () => { />
    { states.length === 0 || - address === undefined ? null : ( -
    - - - ) ) } - -
    - ) } + key={ '' } + value={ '' } + selected + /> + { states.map( ( state ) => ( + + ) ) } + +
    + ) }