Merge pull request #190 from newfold-labs/enhance/crazydomains-hide-s…

…idebar-illustrations Add dynamic brand configuration to hide sidebar illustrations for crazy domains
newfold-labs · Mar 8, 2023 · 2fbf1a8 · 2fbf1a8
2 parents 0363c7b + 5981cf0
commit 2fbf1a8
Show file tree

Hide file tree

Showing 38 changed files with 164 additions and 100 deletions.
diff --git 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/...PA/static/icons/learn-more-basic-info.svg → ...Brands/bluehost/learn-more-basic-info.svg b/...PA/static/icons/learn-more-basic-info.svg → ...Brands/bluehost/learn-more-basic-info.svg
diff --git a/...static/icons/learn-more-design-colors.svg → ...nds/bluehost/learn-more-design-colors.svg b/...static/icons/learn-more-design-colors.svg → ...nds/bluehost/learn-more-design-colors.svg
diff --git a/...c/icons/learn-more-design-header-menu.svg → ...luehost/learn-more-design-header-menu.svg b/...c/icons/learn-more-design-header-menu.svg → ...luehost/learn-more-design-header-menu.svg
diff --git a/...atic/icons/learn-more-design-homepage.svg → ...s/bluehost/learn-more-design-homepage.svg b/...atic/icons/learn-more-design-homepage.svg → ...s/bluehost/learn-more-design-homepage.svg
diff --git a/.../icons/learn-more-design-theme-styles.svg → ...uehost/learn-more-design-theme-styles.svg b/.../icons/learn-more-design-theme-styles.svg → ...uehost/learn-more-design-theme-styles.svg
diff --git a/...ic/icons/learn-more-design-typography.svg → ...bluehost/learn-more-design-typography.svg b/...ic/icons/learn-more-design-typography.svg → ...bluehost/learn-more-design-typography.svg
diff --git a/...ic/icons/learn-more-ecommerce-address.svg → ...bluehost/learn-more-ecommerce-address.svg b/...ic/icons/learn-more-ecommerce-address.svg → ...bluehost/learn-more-ecommerce-address.svg
diff --git a/...c/icons/learn-more-ecommerce-products.svg → ...luehost/learn-more-ecommerce-products.svg b/...c/icons/learn-more-ecommerce-products.svg → ...luehost/learn-more-ecommerce-products.svg
diff --git a/...c/icons/learn-more-ecommerce-tax-info.svg → ...luehost/learn-more-ecommerce-tax-info.svg b/...c/icons/learn-more-ecommerce-tax-info.svg → ...luehost/learn-more-ecommerce-tax-info.svg
diff --git a/...cons/learn-more-get-started-site-type.svg → ...host/learn-more-get-started-site-type.svg b/...cons/learn-more-get-started-site-type.svg → ...host/learn-more-get-started-site-type.svg
diff --git a/.../icons/learn-more-get-started-welcome.svg → ...uehost/learn-more-get-started-welcome.svg b/.../icons/learn-more-get-started-welcome.svg → ...uehost/learn-more-get-started-welcome.svg
diff --git a/.../learn-more-get-started-wp-experience.svg → .../learn-more-get-started-wp-experience.svg b/.../learn-more-get-started-wp-experience.svg → .../learn-more-get-started-wp-experience.svg
diff --git a/...dingSPA/static/icons/learn-more-pages.svg → src/Brands/bluehost/learn-more-pages.svg b/...dingSPA/static/icons/learn-more-pages.svg → src/Brands/bluehost/learn-more-pages.svg
diff --git a/...static/icons/learn-more-site-features.svg → ...nds/bluehost/learn-more-site-features.svg b/...static/icons/learn-more-site-features.svg → ...nds/bluehost/learn-more-site-features.svg
diff --git a/...SPA/static/icons/learn-more-what-next.svg → src/Brands/bluehost/learn-more-what-next.svg b/...SPA/static/icons/learn-more-what-next.svg → 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
@@ -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 (
-		<PanelBody
+		iconExists && <PanelBody
 			className={ `${ baseClassName }__container` }
 			initialOpen={ true }
 		>
@@ -18,7 +20,7 @@ const IllustrationPanel = ( {
 					height: '100%',
 					backgroundSize: 'contain',
 					backgroundRepeat: 'no-repeat',
-					backgroundPosition: backgroundPosition,
+					backgroundPosition,
 				} }
 			></div>
 		</PanelBody>

diff --git 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 (
 		<div className="sidebar-skeleton">
 			<div className="sidebar-skeleton-header">
@@ -27,13 +37,15 @@ const SidebarSkeleton = () => {
 				</div>
 			</div>
 			<div className="sidebar-skeleton-divider" />
-			<div className="sidebar-skeleton-body">
-				<Animate
-					type={ 'shine-placeholder' }
-					className="shimmer sidebar-skeleton-body-image"
-				/>
-			</div>
-			<div className="sidebar-skeleton-divider" />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false && <Fragment>
+				<div className="sidebar-skeleton-body">
+					<Animate
+						type={ 'shine-placeholder' }
+						className="shimmer sidebar-skeleton-body-image"
+					/>
+				</div>
+				<div className="sidebar-skeleton-divider" />
+			</Fragment> }
 			<div className="sidebar-skeleton-footer">
 				<Animate
 					type={ 'shine-placeholder' }

diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js
@@ -30,11 +30,12 @@ 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(),
+			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
 		};
 	} );
 
@@ -47,7 +48,8 @@ const LearnMore = () => {
 				subheading={ content.introduction.subheading }
 				icon={ content.introduction.icon }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions
@@ -57,7 +59,7 @@ const LearnMore = () => {
 				<ButtonWhite
 					text={ content.help.fullService.text }
 					onClick={ () =>
-						( window.open( content.help.fullService.link, '_blank') )
+						( window.open( content.help.fullService.link, '_blank' ) )
 					}
 				/>
 				<SupportLink

diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/Sidebar/LearnMore/index.js
@@ -30,11 +30,11 @@ const StepIntroPanel = lazy( () =>
 );
 
 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 }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions

diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/Sidebar/LearnMore/index.js
@@ -30,11 +30,11 @@ const StepIntroPanel = lazy( () =>
 );
 
 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 }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions

diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/Sidebar/LearnMore/index.js
@@ -30,11 +30,11 @@ const StepIntroPanel = lazy( () =>
 );
 
 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 }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions

diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/Sidebar/LearnMore/index.js
@@ -34,11 +34,12 @@ 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(),
+			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
 		};
 	} );
 
@@ -51,7 +52,8 @@ const LearnMore = () => {
 				subheading={ content.introduction.subheading }
 				icon={ content.introduction.icon }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions

diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/Sidebar/LearnMore/index.js
@@ -34,11 +34,12 @@ 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(),
+			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
 		};
 	} );
 
@@ -51,7 +52,8 @@ const LearnMore = () => {
 				subheading={ content.introduction.subheading }
 				icon={ content.introduction.icon }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions

diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/Sidebar/LearnMore/index.js
@@ -30,10 +30,11 @@ const StepIntroPanel = lazy( () =>
 );
 
 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 }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/index.js
@@ -34,11 +34,12 @@ 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(),
+			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
 		};
 	} );
 
@@ -51,7 +52,8 @@ const LearnMore = () => {
 				subheading={ content.introduction.subheading }
 				icon={ content.introduction.icon }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions
@@ -61,7 +63,7 @@ const LearnMore = () => {
 				<ButtonWhite
 					text={ content.help.fullService.text }
 					onClick={ () =>
-						( window.open( content.help.fullService.link, '_blank') )
+						( window.open( content.help.fullService.link, '_blank' ) )
 					}
 				/>
 				<SupportLink

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/index.js
@@ -34,11 +34,12 @@ 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(),
+			brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(),
 		};
 	} );
 
@@ -51,7 +52,8 @@ const LearnMore = () => {
 				subheading={ content.introduction.subheading }
 				icon={ content.introduction.icon }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions
@@ -61,7 +63,7 @@ const LearnMore = () => {
 				<ButtonWhite
 					text={ content.help.fullService.text }
 					onClick={ () =>
-						( window.open( content.help.fullService.link, '_blank') )
+						( window.open( content.help.fullService.link, '_blank' ) )
 					}
 				/>
 				<SupportLink

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js
@@ -34,7 +34,7 @@ const StepIntroPanel = lazy( () =>
 );
 
 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 }
 			/>
-			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			{ brandConfig?.views?.sidebar?.illustration?.shown !== false &&
+				<IllustrationPanel cssIcon={ content.illustration.icon } /> }
 			<InfoPanel
 				headingWithDescriptions={
 					content.information.headingWithDescriptions