diff --git a/includes/Data/Brands.php b/includes/Data/Brands.php index 58506d68c..4e8620fd6 100644 --- a/includes/Data/Brands.php +++ b/includes/Data/Brands.php @@ -29,6 +29,7 @@ public static function get_brands() { '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' ), 'phoneNumbers' => array( 'sales' => '844-303-1730', 'support' => '888-401-4678', @@ -66,6 +67,9 @@ public static function get_brands() { 'utm_medium' => 'brand-plugin', ), ), + 'config' => array( + 'net_new_signup_date_threshold' => '2022-08-18T15:30:00.000Z', + ), ), 'bluehost-india' => array( 'brand' => 'bluehost-india', @@ -82,6 +86,7 @@ public static function get_brands() { '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' ), 'phoneNumbers' => array( 'support' => '1800-419-4426', ), @@ -115,6 +120,9 @@ public static function get_brands() { 'utm_medium' => 'brand-plugin', ), ), + 'config' => array( + 'net_new_signup_date_threshold' => '2022-08-18T15:30:00.000Z', + ), ), 'webcom' => array( 'brand' => 'webcom', @@ -166,7 +174,87 @@ public static function get_brands() { 'utm_medium' => '', ), ), + 'config' => array( + 'net_new_signup_date_threshold' => '2022-08-18T15:30:00.000Z', + ), + ), + '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( + 'net_new_signup_date_threshold' => '2022-08-18T15:30:00.000Z', + 'views' => array( + 'sidebar' => array( + 'illustration' => array( + 'shown' => false, + ), + ), + ), + ), ), ); } + + /** + * Sets the hosting brand for which Onboarding is active. + * + * @param array $container The brand plugin container. + * @return void + */ + public static function set_current_brand( $container ) { + if ( ! defined( 'NFD_ONBOARDING_PLUGIN_BRAND' ) ) { + $brand = $container->plugin()->brand; + if ( empty( $brand ) ) { + $brand = 'newfold'; + } + define( 'NFD_ONBOARDING_PLUGIN_BRAND', sanitize_title_with_dashes( str_replace( '_', '-', $brand ) ) ); + } + } } diff --git a/includes/Data/Data.php b/includes/Data/Data.php index 8a29b2143..ea316b139 100644 --- a/includes/Data/Data.php +++ b/includes/Data/Data.php @@ -31,22 +31,14 @@ public static function runtime() { /** * Establish brand to apply to Onboarding experience. * - * [TODO]: Pull brand from container. - * * @return array */ public static function current_brand() { - - $brand = \get_option( Options::get_option_name( 'brand', false ), 'newfold' ); - // This case arises when the option mm_brand exists but has an empty string as it's value. - if ( empty( $brand ) ) { - $brand = 'newfold'; - } - $brand = \apply_filters( 'nfd_module_onboarding_brand', sanitize_title_with_dashes( str_replace( '_', '-', $brand ) ) ); - $brands = Brands::get_brands(); - return array_key_exists( $brand, $brands ) ? $brands[ $brand ] : array( 'brand' => $brand ); + return array_key_exists( NFD_ONBOARDING_PLUGIN_BRAND, $brands ) ? + $brands[ NFD_ONBOARDING_PLUGIN_BRAND ] : + array( 'brand' => NFD_ONBOARDING_PLUGIN_BRAND ); } @@ -60,11 +52,11 @@ public static function current_plan() { $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'], - ); + return array( + 'flow' => $current_flow, + 'subtype' => $customer_data['plan_subtype'], + 'type' => $customer_data['plan_type'], + ); } $current_flow = Flows::get_flow_from_params(); @@ -128,9 +120,9 @@ public static function current_flow() { */ public static function customer_data() { if ( class_exists( 'NewfoldLabs\WP\Module\CustomerBluehost\CustomerBluehost' ) ) { - return CustomerBluehost::collect(); + return CustomerBluehost::collect(); } - return array(); + return array(); } -} // END \NewfoldLabs\WP\Module\Onboarding\Data() +} diff --git a/includes/Data/Plugins.php b/includes/Data/Plugins.php index 546653bc1..3b759f5b7 100644 --- a/includes/Data/Plugins.php +++ b/includes/Data/Plugins.php @@ -284,6 +284,20 @@ final class Plugins { ), 'wc_priority' => array(), ), + 'crazy-domains' => array( + 'wc_priority' => array( + array( + 'slug' => 'nfd_slug_yith_shippo_shippings_for_woocommerce', + 'activate' => true, + 'priority' => 259, + ), + array( + 'slug' => 'nfd_slug_yith_paypal_payments_for_woocommerce', + 'activate' => true, + 'priority' => 258, + ), + ), + ), ), ); diff --git a/includes/ModuleController.php b/includes/ModuleController.php index 49b93584c..5ec609efd 100644 --- a/includes/ModuleController.php +++ b/includes/ModuleController.php @@ -3,10 +3,12 @@ use NewfoldLabs\WP\Module\Onboarding\Data\Data; use NewfoldLabs\WP\Module\Onboarding\Data\Flows; - +use NewfoldLabs\WP\Module\Onboarding\Data\Options; +use NewfoldLabs\WP\Module\Onboarding\Data\Brands; use NewfoldLabs\WP\ModuleLoader\ModuleRegistry; use function NewfoldLabs\WP\ModuleLoader\activate; use function NewfoldLabs\WP\ModuleLoader\deactivate; +use function NewfoldLabs\WP\ModuleLoader\container; /** @@ -18,24 +20,23 @@ class ModuleController { * Initialize the Module Controller functionality. */ public static function init() { - // Check the conditions after the step_theme loads as only after that the moudle had been registered prior - add_action( 'after_setup_theme', array( __CLASS__, 'module_switcher' ), 10, 0 ); + // Enable/Disable the module after_setup_theme. + \add_action( 'after_setup_theme', array( __CLASS__, 'module_switcher' ), 10, 0 ); } /** - * Check if the user is a valid Ecommerce and subsequently enable/disable modules + * Enable/Disable Onboarding based on certain checks. */ public static function module_switcher() { - $module_name = 'onboarding'; - $customer_data = Data::customer_data(); + $module_name = 'onboarding'; - // Sample data for Testing - // $customer_data['plan_subtype'] = 'wc_standard'; - // $customer_data['signup_date'] = '2022-08-18T15:30:00.000Z'; + // Set brand context for the module. + Brands::set_current_brand( container() ); + $customer_data = Data::customer_data(); // Check if he is a Non-Ecom Cust and Disable Redirect and Module - if ( ! self::is_ecom_customer( $customer_data ) ) { + if ( ! self::is_new_commerce_signup( $customer_data ) ) { // Check if the Module Does Exist if ( ModuleRegistry::get( $module_name ) ) { @@ -59,43 +60,79 @@ public static function module_switcher() { } /** - * Get the current customer data using the Bluehost customer data module. + * Get signup date of the install. * - * @param array $customer_data The customer data to be parsed. - * @return boolean + * @param array $customer_data The customer data to be checked for signup date. + * @return string|boolean */ - public static function is_ecom_customer( $customer_data ) { + public static function get_signup_date( $customer_data ) { + // Get the signup_date from customer data. + if ( isset( $customer_data['signup_date'] ) ) { + return gmdate( 'Y-m-d H:i:s', strtotime( $customer_data['signup_date'] ) ); + } + + // Get the signup_date from the container's install_date. + if ( ! empty( container()->plugin()->install_date ) ) { + return gmdate( 'Y-m-d H:i:s', container()->plugin()->install_date ); + } + + // Get the signup_date from the mm_install_date option. + $install_date = \get_option( Options::get_option_name( 'install_date', false ), false ); + if ( false !== $install_date ) { + return gmdate( 'Y-m-d H:i:s', strtotime( $install_date ) ); + } + return false; + } + + /** + * Determine if the install is a new commerce signup + * + * @param array $customer_data The site's customer data. + * @return boolean + */ + public static function is_new_commerce_signup( $customer_data ) { + // Determine if the flow=ecommerce param is set. if ( isset( $_GET['flow'] ) && 'ecommerce' === \sanitize_text_field( $_GET['flow'] ) ) { return true; } - // August 18 - $new_cust_date = gmdate( 'Y-m-d H:i:s', strtotime( '2022-08-18T15:30:00.000Z' ) ); - - if ( isset( $customer_data['signup_date'] ) ) { + // Determine if the install is on a commerce plan (or) has Woocommerce active (commerce priority). + $is_commerce = false; + if ( isset( $customer_data['plan_subtype'] ) ) { + $is_commerce = Flows::is_ecommerce_plan( $customer_data['plan_subtype'] ); + } + if ( ! $is_commerce ) { + $is_commerce = Flows::is_commerce_priority(); + } + if ( ! $is_commerce ) { + return false; + } - // Convert the Customer Signup Date to a Php known format - $cust_signup_date = gmdate( 'Y-m-d H:i:s', strtotime( $customer_data['signup_date'] ) ); + /* + Get the net new signup date threshold from the brand configuration. + As a safety measure, return false if a threshold is not set for a particular brand. + */ + $current_brand = Data::current_brand(); + if ( ! isset( $current_brand['config']['net_new_signup_date_threshold'] ) ) { + return false; + } + $net_new_signup_date_threshold = gmdate( 'Y-m-d H:i:s', strtotime( $current_brand['config']['net_new_signup_date_threshold'] ) ); - // Check if the Customer is a new Customer - $is_new_cust = $cust_signup_date >= $new_cust_date; + // Get the actual signup date of the install. + $signup_date = self::get_signup_date( $customer_data ); - // Check if the Customer has an Ecom Plan - $has_ecom_plan = false; - if ( isset( $customer_data['plan_subtype'] ) ) { - $has_ecom_plan = Flows::is_ecommerce_plan( $customer_data['plan_subtype'] ); - } - if ( ! $has_ecom_plan ) { - $has_ecom_plan = Flows::is_commerce_priority(); - } + // As a safety measure, return false if a signup date cannot be determined. + if ( false === $signup_date ) { + return false; + } - if ( $has_ecom_plan && $is_new_cust ) { - return true; - } + // Determine whether the commerce install is a net new signup. + $is_net_new_signup = $signup_date >= $net_new_signup_date_threshold; + if ( ! $is_net_new_signup ) { + return false; } - // If the Customer is not a Ecommerce Customer or is an Old Customer - return false; + return true; } } diff --git a/src/OnboardingSPA/static/images/bluesky.png b/src/Brands/bluehost/bluesky.png similarity index 100% rename from src/OnboardingSPA/static/images/bluesky.png rename to src/Brands/bluehost/bluesky.png diff --git a/src/OnboardingSPA/static/icons/learn-more-basic-info.svg b/src/Brands/bluehost/learn-more-basic-info.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-basic-info.svg rename to src/Brands/bluehost/learn-more-basic-info.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-design-colors.svg b/src/Brands/bluehost/learn-more-design-colors.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-design-colors.svg rename to src/Brands/bluehost/learn-more-design-colors.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-design-header-menu.svg b/src/Brands/bluehost/learn-more-design-header-menu.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-design-header-menu.svg rename to src/Brands/bluehost/learn-more-design-header-menu.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-design-homepage.svg b/src/Brands/bluehost/learn-more-design-homepage.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-design-homepage.svg rename to src/Brands/bluehost/learn-more-design-homepage.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-design-theme-styles.svg b/src/Brands/bluehost/learn-more-design-theme-styles.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-design-theme-styles.svg rename to src/Brands/bluehost/learn-more-design-theme-styles.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-design-typography.svg b/src/Brands/bluehost/learn-more-design-typography.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-design-typography.svg rename to src/Brands/bluehost/learn-more-design-typography.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-ecommerce-address.svg b/src/Brands/bluehost/learn-more-ecommerce-address.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-ecommerce-address.svg rename to src/Brands/bluehost/learn-more-ecommerce-address.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-ecommerce-products.svg b/src/Brands/bluehost/learn-more-ecommerce-products.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-ecommerce-products.svg rename to src/Brands/bluehost/learn-more-ecommerce-products.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-ecommerce-tax-info.svg b/src/Brands/bluehost/learn-more-ecommerce-tax-info.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-ecommerce-tax-info.svg rename to src/Brands/bluehost/learn-more-ecommerce-tax-info.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-get-started-site-type.svg b/src/Brands/bluehost/learn-more-get-started-site-type.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-get-started-site-type.svg rename to src/Brands/bluehost/learn-more-get-started-site-type.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-get-started-welcome.svg b/src/Brands/bluehost/learn-more-get-started-welcome.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-get-started-welcome.svg rename to src/Brands/bluehost/learn-more-get-started-welcome.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-get-started-wp-experience.svg b/src/Brands/bluehost/learn-more-get-started-wp-experience.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-get-started-wp-experience.svg rename to src/Brands/bluehost/learn-more-get-started-wp-experience.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-pages.svg b/src/Brands/bluehost/learn-more-pages.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-pages.svg rename to src/Brands/bluehost/learn-more-pages.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-site-features.svg b/src/Brands/bluehost/learn-more-site-features.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-site-features.svg rename to src/Brands/bluehost/learn-more-site-features.svg diff --git a/src/OnboardingSPA/static/icons/learn-more-what-next.svg b/src/Brands/bluehost/learn-more-what-next.svg similarity index 100% rename from src/OnboardingSPA/static/icons/learn-more-what-next.svg rename to src/Brands/bluehost/learn-more-what-next.svg diff --git a/src/OnboardingSPA/static/images/wp-admin.png b/src/Brands/bluehost/wp-admin.png similarity index 100% rename from src/OnboardingSPA/static/images/wp-admin.png rename to src/Brands/bluehost/wp-admin.png diff --git a/src/Brands/crazy-domains/full-service.png b/src/Brands/crazy-domains/full-service.png new file mode 100644 index 000000000..76a53dd82 Binary files /dev/null and b/src/Brands/crazy-domains/full-service.png differ diff --git a/src/Brands/crazy-domains/icon-empty.svg b/src/Brands/crazy-domains/icon-empty.svg new file mode 100644 index 000000000..e69de29bb diff --git a/src/Brands/crazy-domains/icon.svg b/src/Brands/crazy-domains/icon.svg new file mode 100644 index 000000000..b39ce0458 --- /dev/null +++ b/src/Brands/crazy-domains/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Brands/crazy-domains/logo.svg b/src/Brands/crazy-domains/logo.svg new file mode 100644 index 000000000..4f4a5cdcc --- /dev/null +++ b/src/Brands/crazy-domains/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Brands/crazy-domains/step-error-logo.svg b/src/Brands/crazy-domains/step-error-logo.svg new file mode 100644 index 000000000..f554b5ba5 --- /dev/null +++ b/src/Brands/crazy-domains/step-error-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Brands/crazy-domains/step-loader-logo.svg b/src/Brands/crazy-domains/step-loader-logo.svg new file mode 100644 index 000000000..0c5ca0e5e --- /dev/null +++ b/src/Brands/crazy-domains/step-loader-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Brands/crazy-domains/wp-admin.png b/src/Brands/crazy-domains/wp-admin.png new file mode 100644 index 000000000..591a570f9 Binary files /dev/null and b/src/Brands/crazy-domains/wp-admin.png differ diff --git a/src/OnboardingSPA/components/Button/NavCardButton/index.js b/src/OnboardingSPA/components/Button/NavCardButton/index.js index 3872897af..b99d4c537 100644 --- a/src/OnboardingSPA/components/Button/NavCardButton/index.js +++ b/src/OnboardingSPA/components/Button/NavCardButton/index.js @@ -4,7 +4,7 @@ import { store as nfdOnboardingStore } from '../../../store'; import Button from '../../Button'; import { setFlow } from '../../../utils/api/flow'; -import { wpAdminPage, bluehostDashboardPage } from '../../../../constants'; +import { wpAdminPage, pluginDashboardPage } from '../../../../constants'; /** * Navigation Button Component on Card @@ -37,7 +37,7 @@ const NavCardButton = ( { text, disabled } ) => { //Redirect to Admin Page for normal customers // and Bluehost Dashboard for ecommerce customers const exitLink = exitToWordpressForEcommerce() - ? bluehostDashboardPage + ? pluginDashboardPage : wpAdminPage; window.location.replace( exitLink ); } diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js index b2c91c1b1..1b905e405 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js @@ -23,6 +23,7 @@ const CheckboxItem = ( { desc, subtitle, callback, + tabIndex = 0, isSelectedDefault, className = 'checkbox-item', } ) => { @@ -91,17 +92,19 @@ const CheckboxItem = ( {
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index 5a607410f..fa438ee21 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -7,6 +7,11 @@ $main-border-main: var(--nfd-onboarding-primary-alt); $box-shadow: var(--nfd-onboarding-light-gray-highlighted); .checkbox-item { + + .highlighted { + fill: var(--wp-admin-theme-color-darker-10); + } + margin: 12px; padding: 16px; margin-top: 16px; @@ -80,7 +85,12 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); } &-help { - cursor: pointer; + fill: #666; + + &:hover { + cursor: pointer; + fill: var(--wp-admin-theme-color-darker-10); + } } } @@ -121,6 +131,6 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); border-left: 1px solid rgba($main-color, 0.1); border-right: 1px solid rgba($main-color, 0.1); border-bottom: 1px solid rgba($main-color, 0.1); - box-shadow: 0 11px 8px -3px rgba($main-color, 0.2); + box-shadow: 0 11px 8px -3px rgba($main-color, 0.37); } } diff --git a/src/OnboardingSPA/components/ExitToWordPress/index.js b/src/OnboardingSPA/components/ExitToWordPress/index.js index a68bae7b6..26525314e 100644 --- a/src/OnboardingSPA/components/ExitToWordPress/index.js +++ b/src/OnboardingSPA/components/ExitToWordPress/index.js @@ -9,7 +9,7 @@ import classNames from 'classnames'; import { setFlow } from '../../utils/api/flow'; import { store as nfdOnboardingStore } from '../../store'; import { getSettings, setSettings } from '../../utils/api/settings'; -import { wpAdminPage, bluehostDashboardPage } from '../../../constants'; +import { wpAdminPage, pluginDashboardPage } from '../../../constants'; /** * Self-contained button and confirmation modal for exiting Onboarding page. @@ -94,7 +94,7 @@ const ExitToWordPress = ( { //Redirect to Admin Page for normal customers // and Bluehost Dashboard for ecommerce customers const exitLink = exitToWordpressForEcommerce() - ? bluehostDashboardPage + ? pluginDashboardPage : wpAdminPage; window.location.replace( exitLink ); } diff --git a/src/OnboardingSPA/components/Header/step-navigation.js b/src/OnboardingSPA/components/Header/step-navigation.js index 6ac1fc434..dc71ec939 100644 --- a/src/OnboardingSPA/components/Header/step-navigation.js +++ b/src/OnboardingSPA/components/Header/step-navigation.js @@ -6,13 +6,14 @@ import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { setFlow } from '../../utils/api/flow'; import { store as nfdOnboardingStore } from '../../store'; -import { wpAdminPage, bluehostDashboardPage } from '../../../constants'; +import { wpAdminPage, pluginDashboardPage } from '../../../constants'; /** * Back step Navigation button. * * @param {*} param0 - * @return + * + * @return {WPComponent} Back Component */ const Back = ( { path } ) => { const navigate = useNavigate(); @@ -34,7 +35,8 @@ const Back = ( { path } ) => { * Next step naigation button * * @param {*} param0 - * @return + * + * @return {WPComponent} Next Component */ const Next = ( { path } ) => { /* [TODO]: some sense of isStepComplete to enable/disable */ @@ -61,7 +63,7 @@ async function saveDataAndExit( currentData ) { //Redirect to Admin Page for normal customers // and Bluehost Dashboard for ecommerce customers const exitLink = exitToWordpressForEcommerce() - ? bluehostDashboardPage + ? pluginDashboardPage : wpAdminPage; window.location.replace( exitLink ); } @@ -69,14 +71,13 @@ async function saveDataAndExit( currentData ) { /** * Finish step navigation button. * - * @param root0 - * @param root0.currentData - * @param root0.saveDataAndExit - * @return + * @param {*} param0 + * + * @return {WPComponent} Finish Component */ -const Finish = ( { currentData, saveDataAndExit } ) => ( +const Finish = ( { currentData, saveDataAndExitFunc } ) => ( diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js index ed2bee360..0895d15d5 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js @@ -30,15 +30,26 @@ const StepIntroPanel = lazy( () => ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -47,7 +58,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank') ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = + useSelect( ( select ) => { + return { + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + brandConfig: + select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -47,7 +53,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = + useSelect( ( select ) => { + return { + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + brandConfig: + select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -47,7 +53,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = + useSelect( ( select ) => { + return { + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + brandConfig: + select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -47,7 +53,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -51,7 +62,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -51,7 +62,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + 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 ( @@ -45,7 +52,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -51,7 +62,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank') ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -51,7 +62,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank') ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = - useSelect( ( select ) => { - return { - brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), - techSupportLink: - select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: - select( - nfdOnboardingStore - ).getfullServiceCreativeTeamUrl(), - }; - } ); + 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, @@ -60,7 +62,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } ); const LearnMore = () => { - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( - ( select ) => { + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = + useSelect( ( select ) => { return { techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), @@ -43,9 +43,10 @@ const LearnMore = () => { select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: + select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; - } - ); + } ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -56,7 +57,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } ); const LearnMore = () => { - - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = + useSelect( ( select ) => { + return { + techSupportLink: + select( nfdOnboardingStore ).getTechSupportUrl(), + fullServiceCreativeTeamLink: + select( + nfdOnboardingStore + ).getfullServiceCreativeTeamUrl(), + brandConfig: + select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); const content = getContents( techSupportLink, fullServiceCreativeTeamLink ); @@ -51,7 +57,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } ); const LearnMore = () => { - - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + 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 (
{ subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank') ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { brandName, expertsLink, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + expertsLink, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), expertsLink: select( nfdOnboardingStore ).getExpertsUrl(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, expertsLink, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + expertsLink, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -55,7 +68,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.experts.link, '_blank' ) ) + window.open( content.help.experts.link, '_blank' ) } /> - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -47,7 +58,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { - return { - techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), - }; - } ); + 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 ( @@ -45,7 +52,9 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> ); const LearnMore = () => { - - const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => { + const { + brandName, + techSupportLink, + fullServiceCreativeTeamLink, + brandConfig, + } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), - fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + fullServiceCreativeTeamLink: + select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); - const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink ); + const content = getContents( + brandName, + techSupportLink, + fullServiceCreativeTeamLink + ); return (
@@ -48,11 +58,15 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && ( + + ) } { - ( window.open( content.help.fullService.link, '_blank' ) ) + window.open( content.help.fullService.link, '_blank' ) } /> { + return { + heading: __( + 'Nice work: Your site is ready 🎉', + 'wp-module-onboarding' + ), + subheading: __( + "Move-in day begins! Let us know if you'd like a hand.", + 'wp-module-onboarding' + ), + buttonText: __( 'Complete Setup', 'wp-module-onboarding' ), + tabs: [ + { + name: __( 'tab1', 'wp-module-onboarding' ), + title: __( 'WHATS NEXT', 'wp-module-onboarding' ), + subtitle: __( + 'Add content, organize your menu and launch.', + 'wp-module-onboarding' + ), + text: sprintf( + /* translators: %s: Brand */ + __( + "✅ Theme created, features added and Coming Soon mode activated. Thank you for building your site with %s, we're always here to help!", + 'wp-module-onboarding' + ), + brandName + ), + imgType: 'img-1', + animationName: 'fade-in-right', + }, + { + name: __( 'tab2', 'wp-module-onboarding' ), + title: __( 'HELP & RESOURCES', 'wp-module-onboarding' ), + subtitle: __( + "Next step or next level, we're your partner.", + 'wp-module-onboarding' + ), + text: sprintf( + /* translators: %s: Site */ + __( + 'WordPress make it easy to grow your %s. Send a newsletter, broadcast a podcast, create courses and trainings. Dream it, build it.', + 'wp-module-onboarding' + ), + translations( 'site' ) + ), + imgType: 'img-2', + animationName: 'fade-in-up', + }, + { + name: __( 'tab3', 'wp-module-onboarding' ), + title: __( 'HIRE OUR EXPERTS', 'wp-module-onboarding' ), + subtitle: __( + 'Make our great people your people.', + 'wp-module-onboarding' + ), + text: __( + 'Looking for personalized WordPress assistance, or someone to take-over from here? Go beyond support with our professional services.', + 'wp-module-onboarding' + ), + imgType: 'img-3', + animationName: 'fade-in-left', + }, + ], + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/index.js b/src/OnboardingSPA/pages/Steps/WhatNext/index.js index 1ee8e805e..830907534 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/index.js +++ b/src/OnboardingSPA/pages/Steps/WhatNext/index.js @@ -1,22 +1,23 @@ -import CommonLayout from '../../../components/Layouts/Common'; -import { store as nfdOnboardingStore } from '../../../store'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; -import { __ } from '@wordpress/i18n'; -import {translations} from '../../../utils/locales/translations'; +import CommonLayout from '../../../components/Layouts/Common'; +import NewfoldLargeCard from '../../../components/NewfoldLargeCard'; import CardHeader from '../../../components/CardHeader'; import NavCardButton from '../../../components/Button/NavCardButton'; - import Tab from '../../../components/Tab'; -import tabContent from './tabContent.json'; import TabPanelHover from '../../../components/TabPanelHover'; +import { store as nfdOnboardingStore } from '../../../store'; + import { SIDEBAR_LEARN_MORE } from '../../../../constants'; +import getContents from './contents'; const StepWhatNext = () => { - const { setIsDrawerOpened, setSidebarActiveView, setIsHeaderNavigationEnabled } = - useDispatch( nfdOnboardingStore ); + const { + setIsDrawerOpened, + setSidebarActiveView, + setIsHeaderNavigationEnabled, + } = useDispatch( nfdOnboardingStore ); useEffect( () => { setIsDrawerOpened( false ); @@ -24,36 +25,45 @@ const StepWhatNext = () => { setIsHeaderNavigationEnabled( true ); }, [] ); + const { brandName } = useSelect( ( select ) => { + return { + brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), + }; + } ); + + const content = getContents( brandName ); + return ( - -
+ +
- + heading={ content.heading } + subHeading={ content.subheading } + > { + tabs={ content.tabs.map( ( tab ) => { return { - name: __( tab.name , 'wp-module-onboarding'), - title: __( tab.title , 'wp-module-onboarding'), - content: + name: tab.name, + title: tab.title, + content: ( + + ), }; - } )} + } ) } > - {( tab ) =>
{tab.content}
} - + { ( tab ) =>
{ tab.content }
} - +
- ); }; diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss index 0c990399c..a69f91d6e 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss @@ -1,137 +1,150 @@ @import "./Sidebar/LearnMore/stylesheet"; + .nfd-onboarding-overview { - width: 100%; - max-width: 960px; - background-color: var(--nfd-onboarding-light); - padding: 20px; - &__header { - display: flex; - align-items: center; - column-gap: 1rem; - &-icon { - display: flex; - place-items: center; - svg { - fill: var(--nfd-onboarding-primary); - } - } - &-heading { - margin: 0 0 6px 0; - color: var(--nfd-onboarding-dark); - } - &-subheading { - color: var(--nfd-onboarding-dark); - } - } - - &__tab-panel { - width: 90%; - padding-bottom: 40px; - color: var(--nfd-onboarding-dark); - } + width: 100%; + max-width: 960px; + background-color: var(--nfd-onboarding-light); + padding: 20px; + + &__header { + display: flex; + align-items: center; + column-gap: 1rem; + + &-icon { + display: flex; + place-items: center; + + svg { + fill: var(--nfd-onboarding-primary); + } + } + + &-heading { + margin: 0 0 6px 0; + color: var(--nfd-onboarding-dark); + } + + &-subheading { + color: var(--nfd-onboarding-dark); + } + } + + &__tab-panel { + width: 90%; + padding-bottom: 40px; + color: var(--nfd-onboarding-dark); + } } .nfd-step-card-subheading { - display: flex; - justify-content: space-around; + display: flex; + justify-content: space-around; } .components-tab-panel__tabs { - justify-content: space-around; + justify-content: space-around; + @media screen and ( max-width: 480px ) { - width: 100%; - } + width: 100%; + } } .components-tab-panel__tabs > .components-button:focus:not(:disabled), .components-tab-panel__tabs > .components-button.is-pressed:focus:not(:disabled) { - box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); + box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); } .components-tab-panel__tabs-item { - justify-content: center; - border-bottom: 1px solid #CCCCCC; - width: 100%; - font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem); - line-height: 1.5; - - &.is-active { - color: var(--wp-admin-theme-color); - box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); - } - - &.is-not-active { - box-shadow: none !important; - } + justify-content: center; + border-bottom: 1px solid #ccc; + width: 100%; + font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem); + line-height: 1.5; + + &.is-active { + color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); + } + + &.is-not-active { + box-shadow: none !important; + } } -.tab-data{ - width: 100%; - padding-top: 40px; - display: flex; - flex-direction: row; - align-items: stretch; - justify-content: space-between; - +.tab-data { + width: 100%; + padding-top: 40px; + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: space-between; + } -.content-text{ - padding-right: 10px; - font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem); - line-height: 1.6; +.content-text { + padding-right: 10px; + font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem); + line-height: 1.6; } .content-image { - background-color: var(--nfd-onboarding-tertiary); - overflow: hidden; + background-color: var(--nfd-onboarding-tertiary); + overflow: hidden; } -.whatsnext-image { - background-size: contain; - background-repeat: no-repeat; - height: 228px; - width: clamp(180px, 50vw, 400px); +%whatsnext-image { + background-size: contain; + background-repeat: no-repeat; + height: 228px; + width: clamp(180px, 50vw, 400px); } -.wpadmin-img { - @extend .whatsnext-image; - background-image: var(--what-next-wp-admin-img); +.img-1 { + + @extend %whatsnext-image; + background-image: var(--nfd-onboarding-step-what-next-img-1); } -.help-img { - @extend .whatsnext-image; - background-image: var(--what-next-help-img); +.img-2 { + + @extend %whatsnext-image; + background-image: var(--nfd-onboarding-step-what-next-img-2); } -.bluesky-img { - @extend .whatsnext-image; - background-image: var(--what-next-bluesky-img); +.img-3 { + + @extend %whatsnext-image; + background-image: var(--nfd-onboarding-step-what-next-img-3); } .whatnext-card { display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - height: clamp(600px, 59vh, 800px) !important; - width: 100%; - padding-bottom: 10px; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: clamp(600px, 59vh, 800px) !important; + width: 100%; + padding-bottom: 10px; } @media screen and ( max-width: #{ ($break-medium)} ) { - .tab-data { - flex-direction: column-reverse; - align-items: center; - } - - .content-text { - text-align: center; - width: 100%; - min-height: 10px; - } - - .wpadmin-img, .help-img, .bluesky-img { - max-height: 100px; - } + + .tab-data { + flex-direction: column-reverse; + align-items: center; + } + + .content-text { + text-align: center; + width: 100%; + min-height: 10px; + } + + .wpadmin-img, + .help-img, + .bluesky-img { + max-height: 100px; + } } diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json b/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json deleted file mode 100644 index 45f0a20e5..000000000 --- a/src/OnboardingSPA/pages/Steps/WhatNext/tabContent.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "tabs": [ - { - "name": "tab1", - "title": "WHATS NEXT", - "subtitle": "Add content, organize your menu and launch.", - "text": "✅ Theme created, features added and Coming Soon mode activated. Thank you for building your site with Bluehost, we're always here to help!", - "imgType": "wpadmin-img", - "animationName": "fade-in-right" - }, - { - "name": "tab2", - "title": "HELP & RESOURCES", - "subtitle": "Next step or next level, we're your partner.", - "text": "WordPress make it easy to grow your %s. Send a newsletter, broadcast a podcast, create courses and trainings. Dream it, build it.", - "imgType": "help-img", - "animationName": "fade-in-up" - }, - { - "name": "tab3", - "title": "HIRE OUR EXPERTS", - "subtitle": "Make our great people your people.", - "text": "Looking for personalized WordPress assistance, or someone to take-over from here? Go beyond support with our professional services.", - "imgType": "bluesky-img", - "animationName": "fade-in-left" - } - ] -} diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index d8516960a..94a3f17d1 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line import/no-extraneous-dependencies import { filter, findIndex } from 'lodash'; import { addQueryArgs } from '@wordpress/url'; @@ -55,6 +56,16 @@ export function getNewfoldBrandName( state ) { return state.runtime.currentBrand.name; } +/** + * Gets the current Newfold Brand's Onboarding Configuration. + * + * @param {*} state + * @return {Object} Brand Onboarding Configuration. + */ +export function getNewfoldBrandConfig( state ) { + return state.runtime.currentBrand.config; +} + /** * Gets dynamic Hire Experts URL for Need Help Tag per brand * diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 61b324678..feb4d6d1e 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -33,6 +33,25 @@ body { --nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary); --nfd-onboarding-step-loader-icon: url(../../Brands/bluehost/step-loader-logo.svg); --nfd-onboarding-step-error-icon: url(../../Brands/bluehost/step-error-logo.svg); + --nfd-onboarding-step-what-next-img-3: url(../../Brands/bluehost/bluesky.png); + --nfd-onboarding-step-what-next-img-1: url(../../Brands/bluehost/wp-admin.png); + --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png); + + --nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration: url(../../Brands/bluehost/learn-more-get-started-welcome.svg); + --nfd-onboarding-sidebar-learn-more-get-started-wp-experience-illustration: url(../../Brands/bluehost/learn-more-get-started-wp-experience.svg); + --nfd-onboarding-sidebar-learn-more-get-started-site-type-illustration: url(../../Brands/bluehost/learn-more-get-started-site-type.svg); + --nfd-onboarding-sidebar-learn-more-ecommerce-address-illustration: url(../../Brands/bluehost/learn-more-ecommerce-address.svg); + --nfd-onboarding-sidebar-learn-more-ecommerce-tax-info-illustration: url(../../Brands/bluehost/learn-more-ecommerce-tax-info.svg); + --nfd-onboarding-sidebar-learn-more-ecommerce-products-illustration: url(../../Brands/bluehost/learn-more-ecommerce-products.svg); + --nfd-onboarding-sidebar-learn-more-basic-info-illustration: url(../../Brands/bluehost/learn-more-basic-info.svg); + --nfd-onboarding-sidebar-learn-more-design-theme-styles-illustration: url(../../Brands/bluehost/learn-more-design-theme-styles.svg); + --nfd-onboarding-sidebar-learn-more-design-colors-illustration: url(../../Brands/bluehost/learn-more-design-colors.svg); + --nfd-onboarding-sidebar-learn-more-design-typography-illustration: url(../../Brands/bluehost/learn-more-design-typography.svg); + --nfd-onboarding-sidebar-learn-more-design-header-menu-illustration: url(../../Brands/bluehost/learn-more-design-header-menu.svg); + --nfd-onboarding-sidebar-learn-more-design-homepage-illustration: url(../../Brands/bluehost/learn-more-design-homepage.svg); + --nfd-onboarding-sidebar-learn-more-pages-illustration: url(../../Brands/bluehost/learn-more-pages.svg); + --nfd-onboarding-sidebar-learn-more-site-features-illustration: url(../../Brands/bluehost/learn-more-site-features.svg); + --nfd-onboarding-sidebar-learn-more-what-next-illustration: url(../../Brands/bluehost/learn-more-what-next.svg); } &.nfd-brand-hostgator { @@ -96,4 +115,111 @@ body { --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); --nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary); } + + &.nfd-brand-crazy-domains { + --wp-admin-theme-color: #548224; + --wp-admin-theme-color--rgb: 84, 130, 36; + --wp-admin-theme-color-darker-10: #4c7520; + --wp-admin-theme-color-darker-10--rgb: 76, 117, 32; + --wp-admin-theme-color-darker-20: #43681d; + --wp-admin-theme-color-darker-20--rgb: 67, 104, 29; + --nfd-onboarding-dark-icon: url(../../Brands/crazy-domains/icon-empty.svg); + --nfd-onboarding-icon: url(../../Brands/crazy-domains/icon.svg); + --nfd-onboarding-logo: url(../../Brands/crazy-domains/logo.svg); + --nfd-onboarding-primary: var(--wp-admin-theme-color); + --nfd-onboarding-highlighted--rgb: var(--wp-admin-theme-color-darker-10--rgb); + --nfd-onboarding-primary-alt: var(--wp-admin-theme-color-darker-10); + --nfd-onboarding-secondary: #c3cbd8; + --nfd-onboarding-secondary-alt: #1d2a3b; + --nfd-onboarding-tertiary: #196bde; + --nfd-onboarding-tertiary-alt: #c77d1c; + --nfd-onboarding-light: #fff; + --nfd-onboarding-light-gray: #fcfff9; + --nfd-onboarding-light-gray-2: #fcfff9; + --nfd-onboarding-light-gray-3: #fcfff9; + --nfd-onboarding-light-gray-4: #5c5c5c; + --nfd-onboarding-light-gray-5: var(--nfd-onboarding-light); + --nfd-onboarding-light-gray-highlighted: #e2e9f4; + --nfd-onboarding-dark: #1d2a3b; + --nfd-onboarding-border: 219, 219, 219; + --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-light-gray-4); + --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-primary); + --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); + --nfd-onboarding-loader-end: var(--nfd-onboarding-secondary); + --nfd-onboarding-step-loader-icon: url(../../Brands/crazy-domains/step-loader-logo.svg); + --nfd-onboarding-step-error-icon: url(../../Brands/crazy-domains/step-error-logo.svg); + --nfd-onboarding-step-what-next-img-3: url(../../Brands/crazy-domains/full-service.png); + --nfd-onboarding-step-what-next-img-1: url(../../Brands/crazy-domains/wp-admin.png); + --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png); + + --nfd-onboarding-drawer-bg: var(--nfd-onboarding-light); + --nfd-onboarding-drawer-fg: var(--nfd-onboarding-dark); + --nfd-onboarding-content-bg: var(--nfd-onboarding-light); + + .nfd-onboarding-drawer__toggle { + background-color: transparent; + + &-button { + background-color: transparent; + } + + border-bottom: 1px solid #e0e0e0; + + &.is-open { + border-bottom: none; + } + } + + .nfd-onboarding-drawer__panel { + + &-scroll-container { + border-right: 1px solid #e0e0e0; // mirror header border. + } + + &-site-title { + color: var(--nfd-onboarding-light-gray-4); + } + + &-menu-link { + color: var(--nfd-onboarding-light-gray-4); + + &.active { + background-color: var(--nfd-onboarding-drawer-bg); + color: var(--nfd-onboarding-primary); + border-color: var(--nfd-onboarding-primary); + } + } + + .custom-palette { + color: var(--nfd-onboarding-light); + } + + .drawer-palette--button { + border: 1px solid var(--nfd-onboarding-secondary); + + &:hover { + background-color: var(--nfd-onboarding-primary); + + * { + color: var(--nfd-onboarding-light); + } + } + } + } + + .nfd-onboarding-layout { + + &.is-bg-primary { + background-color: var(--nfd-onboarding-light); + } + + .checkbox-item--selected { + background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.05); + } + + .tab-img { + background-color: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2); + } + } + } } diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 0057b5b62..994d4f4c8 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -1,118 +1,59 @@ body { - --nfd-publish-icon: url("../static/icons/publish.svg"); - --nfd-selling-icon: url("../static/icons/sell.svg"); - --nfd-design-icon: url("../static/icons/design.svg"); - --more-icon: url("../static/icons/more.svg"); - --reload-icon: url("../static/icons/reload.svg"); - --forward-icon: url("../static/icons/forward.svg"); - --back-icon: url("../static/icons/back.svg"); - --chevron-up-icon: url("../static/icons/chevron-up.svg"); - --chevron-down-icon: url("../static/icons/chevron-down.svg"); - --default-logo-icon: url("../static/icons/default-logo.svg"); - --facebook-icon: url("../static/icons/social/facebook.svg"); - --facebook-colored-icon: url("../static/icons/social/facebook-colored.svg"); - --twitter-icon: url("../static/icons/social/twitter.svg"); - --twitter-colored-icon: url("../static/icons/social/twitter-colored.svg"); - --instagram-icon: url("../static/icons/social/instagram.svg"); - --instagram-colored-icon: url("../static/icons/social/instagram-colored.svg"); - --linkedin-icon: url("../static/icons/social/linkedin.svg"); - --linkedin-colored-icon: url("../static/icons/social/linkedin-colored.svg"); - --yelp-icon: url("../static/icons/social/yelp.svg"); - --yelp-colored-icon: url("../static/icons/social/yelp-colored.svg"); - --youtube-icon: url("../static/icons/social/youtube.svg"); - --youtube-colored-icon: url("../static/icons/social/youtube-colored.svg"); - --tiktok-icon: url("../static/icons/social/tiktok.svg"); - --tiktok-colored-icon: url("../static/icons/social/tiktok-colored.svg"); - - --get-started-content-img: url("../static/images/content.png"); - --get-started-design-img: url("../static/images/design.png"); - --get-started-features-img: url("../static/images/features.png"); - --what-next-bluesky-img: url("../static/images/bluesky.png"); - --what-next-wp-admin-img: url("../static/images/wp-admin.png"); - --what-next-help-img: url("../static/images/help.png"); - - - --chevron-left-icon: url("../static/icons/chevron-left.svg"); - --chevron-right-icon: url("../static/icons/chevron-right.svg"); - - --business-icon: url("../static/icons/business.svg"); - --business-white-icon: url("../static/icons/business-white.svg"); - --nfd-onboarding-step-error-icon: url("../../Brands/bluehost/step-error-logo.svg"); - - --nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration: url("../static/icons/learn-more-get-started-welcome.svg"); - --nfd-onboarding-sidebar-learn-more-get-started-wp-experience-illustration: url("../static/icons/learn-more-get-started-wp-experience.svg"); - --nfd-onboarding-sidebar-learn-more-get-started-site-type-illustration: url("../static/icons/learn-more-get-started-site-type.svg"); - --nfd-onboarding-sidebar-learn-more-ecommerce-address-illustration: url("../static/icons/learn-more-ecommerce-address.svg"); - --nfd-onboarding-sidebar-learn-more-ecommerce-tax-info-illustration: url("../static/icons/learn-more-ecommerce-tax-info.svg"); - --nfd-onboarding-sidebar-learn-more-ecommerce-products-illustration: url("../static/icons/learn-more-ecommerce-products.svg"); - --nfd-onboarding-sidebar-learn-more-basic-info-illustration: url("../static/icons/learn-more-basic-info.svg"); - --nfd-onboarding-sidebar-learn-more-design-theme-styles-illustration: url("../static/icons/learn-more-design-theme-styles.svg"); - --nfd-onboarding-sidebar-learn-more-design-colors-illustration: url("../static/icons/learn-more-design-colors.svg"); - --nfd-onboarding-sidebar-learn-more-design-typography-illustration: url("../static/icons/learn-more-design-typography.svg"); - --nfd-onboarding-sidebar-learn-more-design-header-menu-illustration: url("../static/icons/learn-more-design-header-menu.svg"); - --nfd-onboarding-sidebar-learn-more-design-homepage-illustration: url("../static/icons/learn-more-design-homepage.svg"); - --nfd-onboarding-sidebar-learn-more-pages-illustration: url("../static/icons/learn-more-pages.svg"); - --nfd-onboarding-sidebar-learn-more-site-features-illustration: url("../static/icons/learn-more-site-features.svg"); - --nfd-onboarding-sidebar-learn-more-what-next-illustration: url("../static/icons/learn-more-what-next.svg"); - - --site-features-analytics: url("../static/icons/site-features/analytics.svg"); - --site-features-analytics--light: url("../static/icons/site-features/analytics_light.svg"); - --site-features-bookingcalendar: url("../static/icons/site-features/bookingcalendar.svg"); - --site-features-bookingcalendar--light: url("../static/icons/site-features/bookingcalendar_light.svg"); - --site-features-email: url("../static/icons/site-features/email.svg"); - --site-features-email--light: url("../static/icons/site-features/email_light.svg"); - --site-features-filter: url("../static/icons/site-features/filter.svg"); - --site-features-filter--light: url("../static/icons/site-features/filter_light.svg"); - --site-features-form: url("../static/icons/site-features/form.svg"); - --site-features-form--light: url("../static/icons/site-features/form_light.svg"); - --site-features-lead: url("../static/icons/site-features/lead.svg"); - --site-features-lead--light: url("../static/icons/site-features/lead_light.svg"); - --site-features-search: url("../static/icons/site-features/search.svg"); - --site-features-search--light: url("../static/icons/site-features/search_light.svg"); - --site-features-security: url("../static/icons/site-features/security.svg"); - --site-features-security--light: url("../static/icons/site-features/security_light.svg"); - --site-features-share: url("../static/icons/site-features/share.svg"); - --site-features-share--light: url("../static/icons/site-features/share_light.svg"); - --site-features-wishlist: url("../static/icons/site-features/wishlist.svg"); - --site-features-wishlist--light: url("../static/icons/site-features/wishlist_light.svg"); - - /* - * Below Icons are commented because they get added to the CSS bundle and - * CSS bundle created exceeded the permissible size. - * Need to find a solution how do we deal with below icons or do we split page wise CSS bundles - * Or can using these icon paths in background-image in pages's CSS help? - */ - - // --dog-icon: url("../static/icons/dog.svg"); - // --dog-white-icon: url("../static/icons/dog-white.svg"); - - // --education-icon: url("../static/icons/education.svg"); - // --education-white-icon: url("../static/icons/education-white.svg"); - - // --entertainment-icon: url("../static/icons/entertainment.svg"); - // --entertainment-white-icon: url("../static/icons/entertainment-white.svg"); - - // --food-icon: url("../static/icons/food.svg"); - // --food-white-icon: url("../static/icons/food-white.svg"); - - // --group-icon: url("../static/icons/group-team.svg"); - // --group-white-icon: url("../static/icons/group-team-white.svg"); - - // --health-icon: url("../static/icons/health.svg"); - // --health-white-icon: url("../static/icons/health-white.svg"); - - // --news-icon: url("../static/icons/news.svg"); - // --news-white-icon: url("../static/icons/news-white.svg"); - - // --creative-icon: url("../static/icons/creative.svg"); - // --creative-white-icon: url("../static/icons/creative-white.svg"); - - // --heart-icon: url("../static/icons/heart.svg"); - // --heart-white-icon: url("../static/icons/heart-white.svg"); - - // --tech-icon: url("../static/icons/tech.svg"); - // --tech-white-icon: url("../static/icons/tech-white.svg"); - - // --politics-icon: url("../static/icons/politics.svg"); - // --politics-white-icon: url("../static/icons/politics-white.svg"); + --nfd-publish-icon: url(../static/icons/publish.svg); + --nfd-selling-icon: url(../static/icons/sell.svg); + --nfd-design-icon: url(../static/icons/design.svg); + --more-icon: url(../static/icons/more.svg); + --reload-icon: url(../static/icons/reload.svg); + --forward-icon: url(../static/icons/forward.svg); + --back-icon: url(../static/icons/back.svg); + --chevron-up-icon: url(../static/icons/chevron-up.svg); + --chevron-down-icon: url(../static/icons/chevron-down.svg); + --default-logo-icon: url(../static/icons/default-logo.svg); + --facebook-icon: url(../static/icons/social/facebook.svg); + --facebook-colored-icon: url(../static/icons/social/facebook-colored.svg); + --twitter-icon: url(../static/icons/social/twitter.svg); + --twitter-colored-icon: url(../static/icons/social/twitter-colored.svg); + --instagram-icon: url(../static/icons/social/instagram.svg); + --instagram-colored-icon: url(../static/icons/social/instagram-colored.svg); + --linkedin-icon: url(../static/icons/social/linkedin.svg); + --linkedin-colored-icon: url(../static/icons/social/linkedin-colored.svg); + --yelp-icon: url(../static/icons/social/yelp.svg); + --yelp-colored-icon: url(../static/icons/social/yelp-colored.svg); + --youtube-icon: url(../static/icons/social/youtube.svg); + --youtube-colored-icon: url(../static/icons/social/youtube-colored.svg); + --tiktok-icon: url(../static/icons/social/tiktok.svg); + --tiktok-colored-icon: url(../static/icons/social/tiktok-colored.svg); + + --get-started-content-img: url(../static/images/content.png); + --get-started-design-img: url(../static/images/design.png); + --get-started-features-img: url(../static/images/features.png); + + + --chevron-left-icon: url(../static/icons/chevron-left.svg); + --chevron-right-icon: url(../static/icons/chevron-right.svg); + + --business-icon: url(../static/icons/business.svg); + --business-white-icon: url(../static/icons/business-white.svg); + --nfd-onboarding-step-error-icon: url(../../Brands/bluehost/step-error-logo.svg); + + --site-features-analytics: url(../static/icons/site-features/analytics.svg); + --site-features-analytics--light: url(../static/icons/site-features/analytics_light.svg); + --site-features-bookingcalendar: url(../static/icons/site-features/bookingcalendar.svg); + --site-features-bookingcalendar--light: url(../static/icons/site-features/bookingcalendar_light.svg); + --site-features-email: url(../static/icons/site-features/email.svg); + --site-features-email--light: url(../static/icons/site-features/email_light.svg); + --site-features-filter: url(../static/icons/site-features/filter.svg); + --site-features-filter--light: url(../static/icons/site-features/filter_light.svg); + --site-features-form: url(../static/icons/site-features/form.svg); + --site-features-form--light: url(../static/icons/site-features/form_light.svg); + --site-features-lead: url(../static/icons/site-features/lead.svg); + --site-features-lead--light: url(../static/icons/site-features/lead_light.svg); + --site-features-search: url(../static/icons/site-features/search.svg); + --site-features-search--light: url(../static/icons/site-features/search_light.svg); + --site-features-security: url(../static/icons/site-features/security.svg); + --site-features-security--light: url(../static/icons/site-features/security_light.svg); + --site-features-share: url(../static/icons/site-features/share.svg); + --site-features-share--light: url(../static/icons/site-features/share_light.svg); + --site-features-wishlist: url(../static/icons/site-features/wishlist.svg); + --site-features-wishlist--light: url(../static/icons/site-features/wishlist_light.svg); } diff --git a/src/constants.js b/src/constants.js index 36d2121d0..75b5df22d 100644 --- a/src/constants.js +++ b/src/constants.js @@ -10,7 +10,9 @@ export const onboardingRestRoute = 'newfold-onboarding/v1'; export const wpRestBase = `${ wpRestURL }/${ wpRestRoute }`; export const onboardingRestBase = `${ wpRestURL }/${ onboardingRestRoute }`; export const wpAdminPage = `${ wpAdminUrl }index.php`; -export const bluehostDashboardPage = `${ wpAdminPage }?page=bluehost`; +export const pluginDashboardPage = `${ + window.nfdOnboarding.currentBrand?.pluginDashboardPage ?? wpAdminPage +}`; export const NFD_ONBOARDING_EVENT_PREFIX = 'nfd-module-onboarding-event'; export const VIEW_NAV_PRIMARY = 'nav-primary'; export const VIEW_NAV_DESIGN = 'nav-design'; @@ -39,14 +41,14 @@ export const THEME_STATUS_NOT_ACTIVE = 'inactive'; export const THEME_STATUS_INSTALLING = 'installing'; export const THEME_STATUS_ACTIVE = 'activated'; export const THEME_STATUS_FAILURE = 'failed'; -export const THEME_INSTALL_WAIT_TIMEOUT = 30000 +export const THEME_INSTALL_WAIT_TIMEOUT = 30000; -export const ECOMMERCE_STEPS_PLUGIN = 'woocommerce' +export const ECOMMERCE_STEPS_PLUGIN = 'woocommerce'; export const PLUGIN_STATUS_INIT = 'init'; export const PLUGIN_STATUS_NOT_ACTIVE = 'inactive'; export const PLUGIN_STATUS_INSTALLING = 'installing'; export const PLUGIN_STATUS_ACTIVE = 'activated'; -export const PLUGIN_INSTALL_WAIT_TIMEOUT = 30000 +export const PLUGIN_INSTALL_WAIT_TIMEOUT = 30000; /** * All views for the component.