Merge pull request #98 from newfold-labs/PRESS2-263-learn-more-sideba…

…r-basic-info

Learn more sidebar: Basic Info

src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js

@@ -12,8 +12,8 @@ const InfoPanel = ( {
 				return (
 					<HeadingWithDescription
 						key={ idx }
-						heading={ headingWithDescription.heading }
-						description={ headingWithDescription.description }
+						heading={ headingWithDescription?.heading }
+						description={ headingWithDescription?.description }
 					/>
 				);
 			} ) }

src/OnboardingSPA/data/routes/default-flow.js

@@ -78,7 +78,11 @@ const StepGetStartedSecondarySetupLearnMoreSidebar = lazy( () =>
 );
 
 const StepTopPriority = lazy( () => import( '../../pages/Steps/TopPriority' ) );
+
 const StepBasicInfo = lazy( () => import( '../../pages/Steps/BasicInfo' ) );
+const StepBasicInfoLearnMoreSidebar = lazy( () =>
+	import( '../../pages/Steps/BasicInfo/Sidebar/LearnMore' )
+);
 
 const StepDesignThemes = lazy( () =>
 	import( '../../pages/Steps/DesignThemes' )
@@ -319,6 +323,11 @@ export const steps = [
 		Component: StepBasicInfo,
 		Icon: info,
 		priority: 120,
+		sidebars: {
+			LearnMore: {
+				SidebarComponents: [ StepBasicInfoLearnMoreSidebar ],
+			},
+		},
 	},
 	{
 		path: '/wp-setup/step/design/themes',

src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/contents.js

@@ -0,0 +1,68 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { translations } from '../../../../../utils/locales/translations';
+import { info } from '@wordpress/icons';
+
+const getContents = ( brandName ) => {
+	return {
+		introduction: {
+			heading: __( 'Basic Info', 'wp-module-onboarding' ),
+			subheading: sprintf(
+				/* translators: %s: site */
+				__(
+					`Setup how your %s will present to the public, search engines and visitors’ web browsers.`,
+					'wp-module-onboarding'
+				),
+				translations( 'site' )
+			),
+			icon: info,
+		},
+		illustration: {
+			icon: 'nfd-onboarding-sidebar-learn-more-basic-info-illustration',
+		},
+		information: {
+			headingWithDescriptions: [
+				{
+					heading: __(
+						'Present in tip-top shape to web browsers and search engine results',
+						'wp-module-onboarding'
+					),
+					description: sprintf(
+						/* translators: 1: Brand 2: Site */
+						__(
+							`Enter the best way for WordPress, web browsers and search engines to identify your %s %s by entering your Title, Description and Logo.`,
+							'wp-module-onboarding'
+						),
+						brandName,
+						translations( 'Site' )
+					),
+				},
+				{
+					description: sprintf(
+						/* translators: %s: website */
+						__(
+							'Tell us your social media accounts, and we’ll make sure visitors can find them and tell search engines these accounts are related to this %s.',
+							'wp-module-onboarding'
+						),
+						translations( 'website' )
+					),
+				},
+			],
+		},
+		help: {
+			fullService: {
+				text: __(
+					'Hire Our Full-Service Creative Studio',
+					'wp-module-onboarding'
+				),
+				link: '#',
+			},
+			support: {
+				text: __( 'Technical Support', 'wp-module-onboarding' ),
+				link: '#',
+			},
+		},
+	};
+};
+
+export default getContents;

src/OnboardingSPA/pages/Steps/BasicInfo/Sidebar/LearnMore/index.js

@@ -0,0 +1,70 @@
+import { useSelect } from '@wordpress/data';
+import { lazy } from '@wordpress/element';
+
+import { store as nfdOnboardingStore } from '../../../../../store';
+import getContents from './contents';
+
+const IllustrationPanel = lazy( () =>
+	import(
+		'../../../../../components/Sidebar/components/LearnMore/IllustrationPanel'
+	)
+);
+const InfoPanel = lazy( () =>
+	import( '../../../../../components/Sidebar/components/LearnMore/InfoPanel' )
+);
+const HelpPanel = lazy( () =>
+	import( '../../../../../components/Sidebar/components/LearnMore/HelpPanel' )
+);
+const ButtonWhite = lazy( () =>
+	import( '../../../../../components/Button/ButtonWhite' )
+);
+const SupportLink = lazy( () =>
+	import(
+		'../../../../../components/Sidebar/components/LearnMore/SupportLink'
+	)
+);
+const StepIntroPanel = lazy( () =>
+	import(
+		'../../../../../components/Sidebar/components/LearnMore/StepIntroPanel'
+	)
+);
+
+const LearnMore = () => {
+	const { brandName } = useSelect( ( select ) => {
+		return {
+			brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+		};
+	} );
+
+	const content = getContents( brandName );
+
+	return (
+		<div className="nfd-onboarding-sidebar-learn-more__basic-info">
+			<StepIntroPanel
+				heading={ content.introduction.heading }
+				subheading={ content.introduction.subheading }
+				icon={ content.introduction.icon }
+			/>
+			<IllustrationPanel cssIcon={ content.illustration.icon } />
+			<InfoPanel
+				headingWithDescriptions={
+					content.information.headingWithDescriptions
+				}
+			/>
+			<HelpPanel>
+				<ButtonWhite
+					text={ content.help.fullService.text }
+					onClick={ () =>
+						( window.location.href = content.help.fullService.link )
+					}
+				/>
+				<SupportLink
+					text={ content.help.support.text }
+					link={ content.help.support.link }
+				/>
+			</HelpPanel>
+		</div>
+	);
+};
+
+export default LearnMore;

src/OnboardingSPA/styles/_icons.scss

@@ -41,6 +41,7 @@ body {
 	--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");
 
 	/*
   * Below Icons are commented because they get added to the CSS bundle and