From 3cc460b68ad1005a02f7488e5156ae06fc14393c Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 6 Mar 2023 16:11:32 +0530 Subject: [PATCH 1/2] hide crazy domains sidebar illustrations, add dynamic brand config to handle sidebar views --- includes/Data/Brands.php | 14 +++- .../bluehost}/learn-more-basic-info.svg | 0 .../bluehost}/learn-more-design-colors.svg | 0 .../learn-more-design-header-menu.svg | 0 .../bluehost}/learn-more-design-homepage.svg | 0 .../learn-more-design-theme-styles.svg | 0 .../learn-more-design-typography.svg | 0 .../learn-more-ecommerce-address.svg | 0 .../learn-more-ecommerce-products.svg | 0 .../learn-more-ecommerce-tax-info.svg | 0 .../learn-more-get-started-site-type.svg | 0 .../learn-more-get-started-welcome.svg | 0 .../learn-more-get-started-wp-experience.svg | 0 .../bluehost}/learn-more-pages.svg | 0 .../bluehost}/learn-more-site-features.svg | 0 .../bluehost}/learn-more-what-next.svg | 0 .../LearnMore/IllustrationPanel/index.js | 8 ++- .../LearnMore/Skeleton/SidebarSkeleton.js | 26 ++++++-- .../BasicInfo/Sidebar/LearnMore/index.js | 8 ++- .../DesignColors/Sidebar/LearnMore/index.js | 7 +- .../Sidebar/LearnMore/index.js | 7 +- .../Sidebar/LearnMore/index.js | 7 +- .../Menu/Sidebar/LearnMore/index.js | 6 +- .../Preview/Sidebar/LearnMore/index.js | 6 +- .../Sidebar/LearnMore/index.js | 6 +- .../StepAddress/Sidebar/LearnMore/index.js | 8 ++- .../StepProducts/Sidebar/LearnMore/index.js | 8 ++- .../StepTax/Sidebar/LearnMore/index.js | 6 +- .../Sidebar/LearnMore/index.js | 6 +- .../PrimarySite/Sidebar/LearnMore/index.js | 7 +- .../SecondarySite/Sidebar/LearnMore/index.js | 10 +-- .../Welcome/Sidebar/LearnMore/index.js | 6 +- .../SiteFeatures/Sidebar/LearnMore/index.js | 6 +- .../SitePages/Sidebar/LearnMore/index.js | 6 +- .../Steps/WhatNext/Sidebar/LearnMore/index.js | 9 +-- src/OnboardingSPA/store/selectors.js | 66 +++++++++++-------- src/OnboardingSPA/styles/_branding.scss | 16 +++++ src/OnboardingSPA/styles/_icons.scss | 16 ----- 38 files changed, 164 insertions(+), 101 deletions(-) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-basic-info.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-design-colors.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-design-header-menu.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-design-homepage.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-design-theme-styles.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-design-typography.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-ecommerce-address.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-ecommerce-products.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-ecommerce-tax-info.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-get-started-site-type.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-get-started-welcome.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-get-started-wp-experience.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-pages.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-site-features.svg (100%) rename src/{OnboardingSPA/static/icons => Brands/bluehost}/learn-more-what-next.svg (100%) diff --git a/includes/Data/Brands.php b/includes/Data/Brands.php index bc00db949..068de2e6f 100644 --- a/includes/Data/Brands.php +++ b/includes/Data/Brands.php @@ -66,6 +66,7 @@ public static function get_brands() { 'utm_medium' => 'brand-plugin', ), ), + 'config' => array(), ), 'bluehost-india' => array( 'brand' => 'bluehost-india', @@ -112,6 +113,7 @@ public static function get_brands() { 'utm_medium' => 'brand-plugin', ), ), + 'config' => array(), ), 'webcom' => array( 'brand' => 'webcom', @@ -163,8 +165,9 @@ public static function get_brands() { 'utm_medium' => '', ), ), + 'config' => array(), ), - 'crazy-domains' => array( + 'crazy-domains' => array( 'brand' => 'crazy-domains', 'name' => 'Crazy Domains', 'url' => 'https://www.crazydomains.com', @@ -213,6 +216,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' } + /> } Date: Mon, 6 Mar 2023 16:16:54 +0530 Subject: [PATCH 2/2] fix list issues --- .../Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js | 2 +- src/OnboardingSPA/store/selectors.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js index 5b2603b21..0788b88e6 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/Sidebar/LearnMore/index.js @@ -56,7 +56,7 @@ const LearnMore = () => { subheading={ content.introduction.subheading } icon={ content.introduction.icon } /> - { brandConfig?.views?.sidebar?.illustration?.shown !== false && + { brandConfig?.views?.sidebar?.illustration?.shown !== false && }