Merge pull request #96 from newfold-labs/add/PRESS2-254-257-260-ecom-…

…steps-sidebars

Learn more sidebar: Ecommerce

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

@@ -13,10 +13,21 @@ import {
 const StepAddress = lazy( () =>
 	import( '../../pages/Steps/Ecommerce/StepAddress' )
 );
+const StepAddressLearnMoreSidebar = lazy( () =>
+	import( '../../pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/' )
+);
+
 const StepTax = lazy( () => import( '../../pages/Steps/Ecommerce/StepTax' ) );
+const StepTaxLearnMoreSidebar = lazy( () =>
+	import( '../../pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/' )
+);
+
 const StepProducts = lazy( () =>
 	import( '../../pages/Steps/Ecommerce/StepProducts' )
 );
+const StepProductsLearnMoreSidebar = lazy( () =>
+	import( '../../pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore' )
+);
 
 import { VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../constants';
 
@@ -37,6 +48,11 @@ export const ecommerceSteps = [
 		Icon: store,
 		priority: 85,
 		VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO,
+		sidebars: {
+			LearnMore: {
+				SidebarComponents: [ StepAddressLearnMoreSidebar ],
+			},
+		},
 	},
 	{
 		path: '/ecommerce/step/tax',
@@ -54,6 +70,11 @@ export const ecommerceSteps = [
 		Icon: institution,
 		priority: 90,
 		VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO,
+		sidebars: {
+			LearnMore: {
+				SidebarComponents: [ StepTaxLearnMoreSidebar ],
+			},
+		},
 	},
 	{
 		path: '/ecommerce/step/products',
@@ -71,6 +92,11 @@ export const ecommerceSteps = [
 		Icon: box,
 		priority: 95,
 		VIEW: VIEW_NAV_ECOMMERCE_STORE_INFO,
+		sidebars: {
+			LearnMore: {
+				SidebarComponents: [ StepProductsLearnMoreSidebar ],
+			},
+		},
 	},
 ];
 

src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/Sidebar/LearnMore/contents.js

@@ -0,0 +1,53 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { translations } from '../../../../../../utils/locales/translations';
+import { store } from '@wordpress/icons';
+
+const getContents = ( brandName ) => {
+	return {
+		introduction: {
+			heading: __( 'Street Address', 'wp-module-onboarding' ),
+			subheading: __(
+				'Whether this is where the magic happens or the mail goes, tell us where your business is located.'
+			),
+			icon: store,
+		},
+		illustration: {
+			icon: 'nfd-onboarding-sidebar-learn-more-ecommerce-address-illustration',
+		},
+		information: {
+			headingWithDescriptions: [
+				{
+					heading: __(
+						'Whether it’s a storefront or a PO Box, we’re proud to help you connect your real-world and online businesses',
+						'wp-module-onboarding'
+					),
+					description: sprintf(
+						/* translators: 1: Brand 2: Site */
+						__(
+							`We use this address to setup WooCommerce, your payment provider, Contact Page and more so you can start stocking the shelves of your %s Online %s.`,
+							'wp-module-onboarding'
+						),
+						brandName,
+						translations( 'Site' )
+					),
+				},
+			],
+		},
+		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/Ecommerce/StepAddress/Sidebar/LearnMore/index.js

@@ -0,0 +1,74 @@
+import { lazy } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+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__ecommerce-address">
+			<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/pages/Steps/Ecommerce/StepProducts/Sidebar/LearnMore/contents.js

@@ -0,0 +1,53 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { translations } from '../../../../../../utils/locales/translations';
+import { box } from '@wordpress/icons';
+
+const getContents = ( brandName ) => {
+	return {
+		introduction: {
+			heading: __( 'Products Info', 'wp-module-onboarding' ),
+			subheading: __(
+				'Whether you call it a menu, catalog, portfolio or project, we’d love to hear more about your offerings.'
+			),
+			icon: box,
+		},
+		illustration: {
+			icon: 'nfd-onboarding-sidebar-learn-more-ecommerce-products-illustration',
+		},
+		information: {
+			headingWithDescriptions: [
+				{
+					heading: __(
+						'Go from multiple sizes to multiple locations to multiple online channels',
+						'wp-module-onboarding'
+					),
+					description: sprintf(
+						/* translators: 1: Brand 2: Website */
+						__(
+							`Tell us a little about how and what you’re planning to sell and we’ll bring the power of WooCommerce and unique %s %s solutions to elevate your business and enhance your capabilities.`,
+							'wp-module-onboarding'
+						),
+						brandName,
+						translations( 'site' )
+					),
+				},
+			],
+		},
+		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/Ecommerce/StepProducts/Sidebar/LearnMore/index.js

@@ -0,0 +1,74 @@
+import { lazy } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+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__ecommerce-products">
+			<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/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/contents.js

@@ -0,0 +1,58 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { translations } from '../../../../../../utils/locales/translations';
+import { institution } from '@wordpress/icons';
+
+const getContents = ( brandName ) => {
+	return {
+		introduction: {
+			heading: __( 'Tax Info', 'wp-module-onboarding' ),
+			subheading: sprintf(
+				/* translators: 1: Site 2: Brand 3: Site */
+				__(
+					'A %s that does taxes in one click. That’s pretty novel. That’s a %s Online %s.'
+				),
+				translations( 'site' ),
+				brandName,
+				translations( 'Site' )
+			),
+			icon: institution,
+		},
+		illustration: {
+			icon: 'nfd-onboarding-sidebar-learn-more-ecommerce-tax-info-illustration',
+		},
+		information: {
+			headingWithDescriptions: [
+				{
+					heading: __(
+						'Let us crunch the tax rates and receipts, while you expand the business and the boldness',
+						'wp-module-onboarding'
+					),
+					description: sprintf(
+						/* translators: %s: Site */
+						__(
+							`We can take the frustration out of calculating taxes for purchases your visitors make! Let us auto-calculate taxes and worry about the math, you focus on your %s’s mission.`,
+							'wp-module-onboarding'
+						),
+						translations( 'site' )
+					),
+				},
+			],
+		},
+		help: {
+			fullService: {
+				text: __(
+					'Hire Our Full-Service Creative Studio',
+					'wp-module-onboarding'
+				),
+				link: '#',
+			},
+			support: {
+				text: __( 'Technical Support', 'wp-module-onboarding' ),
+				link: '#',
+			},
+		},
+	};
+};
+
+export default getContents;