diff --git a/includes/Data/Brands.php b/includes/Data/Brands.php index 45710a62a..c53d92605 100644 --- a/includes/Data/Brands.php +++ b/includes/Data/Brands.php @@ -67,6 +67,7 @@ public static function get_brands() { 'utm_medium' => 'brand-plugin', ), ), + 'config' => array(), ), 'bluehost-india' => array( 'brand' => 'bluehost-india', @@ -114,6 +115,7 @@ public static function get_brands() { 'utm_medium' => 'brand-plugin', ), ), + 'config' => array(), ), 'webcom' => array( 'brand' => 'webcom', @@ -165,6 +167,7 @@ public static function get_brands() { 'utm_medium' => '', ), ), + 'config' => array(), ), 'crazy-domains' => array( 'brand' => 'crazy-domains', @@ -216,6 +219,15 @@ public static function get_brands() { 'utm_medium' => 'brand-plugin', ), ), + 'config' => array( + 'views' => array( + 'sidebar' => array( + 'illustration' => array( + 'shown' => false, + ), + ), + ), + ), ), ); } 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/components/Sidebar/components/LearnMore/IllustrationPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/IllustrationPanel/index.js index 418c44f21..e7b3eb70e 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/IllustrationPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/IllustrationPanel/index.js @@ -3,10 +3,12 @@ import { PanelBody } from '@wordpress/components'; const IllustrationPanel = ( { cssIcon = 'nfd-onboarding-sidebar-learn-more-get-started-welcome-illustration', baseClassName = 'nfd-onboarding-sidebar-learn-more--illustration-panel', - backgroundPosition = 'center' + backgroundPosition = 'center', } ) => { + const iconExists = window.getComputedStyle( document.body ).getPropertyValue( `--${ cssIcon }` ) !== ''; + return ( - @@ -18,7 +20,7 @@ const IllustrationPanel = ( { height: '100%', backgroundSize: 'contain', backgroundRepeat: 'no-repeat', - backgroundPosition: backgroundPosition, + backgroundPosition, } } > diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js index 24434aa27..1f38fbc26 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js @@ -1,7 +1,17 @@ +import { useSelect } from '@wordpress/data'; +import { Fragment } from '@wordpress/element'; + import Animate from '../../../../Animate'; +import { store as nfdOnboardingStore } from '../../../../../store'; /** Skeleton Structure for the SideBar */ const SidebarSkeleton = () => { + const { brandConfig } = useSelect( ( select ) => { + return { + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), + }; + } ); + return (
@@ -27,13 +37,15 @@ const SidebarSkeleton = () => {
-
- -
-
+ { brandConfig?.views?.sidebar?.illustration?.shown !== false && +
+ +
+
+ }
); 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -47,7 +48,8 @@ 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 ) => { + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = useSelect( ( select ) => { return { techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(), fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -47,7 +47,8 @@ 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(), fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -47,7 +47,8 @@ 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(), fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -47,7 +47,8 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && + } ); 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -51,7 +52,8 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && + } ); 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -51,7 +52,8 @@ 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(), fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -45,7 +46,8 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && + } ); 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -51,7 +52,8 @@ 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -51,7 +52,8 @@ 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 } = + const { brandName, techSupportLink, fullServiceCreativeTeamLink, brandConfig } = useSelect( ( select ) => { return { brandName: select( nfdOnboardingStore ).getNewfoldBrandName(), @@ -44,6 +44,7 @@ const LearnMore = () => { select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -60,7 +61,8 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && + } ); const LearnMore = () => { - const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( + const { techSupportLink, fullServiceCreativeTeamLink, brandConfig } = useSelect( ( select ) => { return { techSupportLink: @@ -43,6 +43,7 @@ const LearnMore = () => { select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -56,7 +57,8 @@ 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(), fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -51,7 +51,8 @@ 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(), 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -55,7 +56,8 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && + } ); 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -47,7 +48,8 @@ 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(), fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -45,7 +46,8 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - + { brandConfig?.views?.sidebar?.illustration?.shown !== false && + } ); 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(), + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), }; } ); @@ -48,11 +48,12 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> + { brandConfig?.views?.sidebar?.illustration?.shown !== false && + backgroundPosition={ 'right bottom' } + /> }