Merge branch 'trunk' into enhance/PRESS2-563-replace-hex-rgb-values

newfold-labs · May 10, 2023 · df6fb35 · df6fb35
2 parents 9571a7c + e37050a
commit df6fb35
Show file tree

Hide file tree

Showing 23 changed files with 489 additions and 486 deletions.
diff --git a/src/OnboardingSPA/components/MiniPreview/contents.js b/src/OnboardingSPA/components/MiniPreview/contents.js
@@ -0,0 +1,22 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { translations } from '../../utils/locales/translations';
+
+const getContents = () => {
+	return {
+		defaultTitle: sprintf(
+			/* translators: %s: Site */
+			__( 'WordPress %s', 'wp-module-onboarding' ),
+			translations( 'Site' )
+		),
+		defaultDesc: sprintf(
+			/* translators: %s: Site */
+			__( 'Just another WordPress %s', 'wp-module-onboarding' ),
+			translations( 'Site' )
+		),
+		defaultIcon: '--default-logo-icon',
+		defaultUrl: 'https://bluehost.com',
+	};
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/components/MiniPreview/index.js b/src/OnboardingSPA/components/MiniPreview/index.js
@@ -1,21 +1,7 @@
-import { __, sprintf } from '@wordpress/i18n';
 import { memo, useState, useEffect } from '@wordpress/element';
 
-import content from './miniPreview.json';
-import { translations } from '../../utils/locales/translations';
+import getContents from './contents';
 
-/**
- * A Mini Preview Section.
- *
- * @param  root0
- * @param  root0.title
- * @param  root0.desc
- * @param  root0.icon
- * @param  root0.socialData
- * @param  root0.isSocialFormOpen
- * @param  root0.setIsSocialFormOpen
- * @return
- */
 const MiniPreview = ( {
 	title,
 	desc,
@@ -24,22 +10,12 @@ const MiniPreview = ( {
 	isSocialFormOpen,
 	setIsSocialFormOpen,
 } ) => {
-	const iconPreview = icon == '' || icon == undefined ? content.icon : icon;
-	const titlePreview =
-		title == ''
-			? sprintf(
-					__( content.title, 'wp-module-onboarding' ),
-					translations( 'Site' )
-			  )
-			: title;
-	const descPreview =
-		desc == ''
-			? sprintf(
-					__( content.desc, 'wp-module-onboarding' ),
-					translations( 'Site' )
-			  )
-			: desc;
-	const urlPreview = title == '' ? content.url : titleToUrl( title );
+	const content = getContents();
+	const iconPreview =
+		icon === '' || icon === undefined ? content.defaultIcon : icon;
+	const titlePreview = title === '' ? content.defaultTitle : title;
+	const descPreview = desc === '' ? content.defaultDesc : desc;
+	const urlPreview = title === '' ? content.defaultUrl : titleToUrl();
 
 	const [ facebook, setFacebook ] = useState( '' );
 	const [ twitter, setTwitter ] = useState( '' );
@@ -91,19 +67,22 @@ const MiniPreview = ( {
 		{ url: tiktok, image: 'var(--tiktok-colored-icon)' },
 	];
 
-	function titleToUrl( title ) {
+	function titleToUrl() {
 		return `https://${ title
 			?.toLowerCase()
 			.replace( /\s/g, '' )
 			.replace( /\W/g, '' ) }.com`;
 	}
 
 	function socialIconList() {
-		return socialDataset.map( ( socialInfo ) => {
+		return socialDataset.map( ( socialInfo, idx ) => {
 			return (
 				<div
 					key={ socialInfo.image }
-					onClick={ ( e ) =>
+					tabIndex={ idx + 1 }
+					role="button"
+					onClick={ () => setIsSocialFormOpen( ! isSocialFormOpen ) }
+					onKeyDown={ () =>
 						setIsSocialFormOpen( ! isSocialFormOpen )
 					}
 					className={ `browser-content_social_icon ${
@@ -143,26 +122,23 @@ const MiniPreview = ( {
 							<div className="browser-row-title_bar_before-curve"></div>
 						</div>
 						<div className="browser-row-title_bar_main">
-							{ ( icon == 0 || icon == undefined ) && (
+							{ ( icon === 0 || icon === undefined ) && (
 								<div
 									className="browser-icon-title"
 									style={ {
 										content: 'var(--default-logo-icon)',
 									} }
 								></div>
 							) }
-							{ icon != 0 && icon != undefined && (
+							{ icon !== 0 && icon !== undefined && (
 								<img
 									className="browser-icon-title"
 									src={ iconPreview.url }
 									alt="Thumb"
 								/>
 							) }
 							<div className="browser-row-title_bar_main-text">
-								{ __(
-									titlePreview?.substring( 0, 20 ),
-									'wp-module-onboarding'
-								) }
+								{ titlePreview?.substring( 0, 20 ) }
 							</div>
 							<div className="browser-row-title_bar_main-cross">
 								x
@@ -192,8 +168,8 @@ const MiniPreview = ( {
 						<input
 							className="browser-row-search__search-box_input"
 							type="text"
-							onChange={ ( e ) => {} }
-							value={ __( urlPreview, 'wp-module-onboarding' ) }
+							onChange={ () => {} }
+							value={ urlPreview }
 						></input>
 					</div>
 					<div className="browser-row-search__more">
@@ -206,15 +182,13 @@ const MiniPreview = ( {
 				<div className="browser-content">
 					<div className="browser-content_top-row">
 						<h4 className="browser-content_top-row-name">
-							{ __( titlePreview, 'wp-module-onboarding' ) }
+							{ titlePreview }
 						</h4>
-						<a className="browser-content_top-row-link">
-							{ __( urlPreview, 'wp-module-onboarding' ) }
-						</a>
+						<span className="browser-content_top-row-link">
+							{ urlPreview }
+						</span>
 					</div>
-					<h5 className="browser-content_desc">
-						{ __( descPreview, 'wp-module-onboarding' ) }
-					</h5>
+					<h5 className="browser-content_desc">{ descPreview }</h5>
 					<div className="browser-content_social">
 						{ socialIconList() }
 					</div>

diff --git a/src/OnboardingSPA/components/MiniPreview/miniPreview.json b/src/OnboardingSPA/components/MiniPreview/miniPreview.json
diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js
@@ -189,12 +189,6 @@ export const steps = [
 	{
 		path: '/wp-setup/step/get-started/welcome',
 		title: __( 'Welcome', 'wp-module-onboarding' ),
-		heading: sprintf(
-			/* translators: %s: website or store */
-			__( 'Make your %s dreams a reality!', 'wp-module-onboarding' ),
-			translations( 'website' )
-		),
-		subheading: __( 'with WordPress and ', 'wp-module-onboarding' ),
 		description: __(
 			"We'll use this to personalize this onboarding and future recommendations",
 			'wp-module-onboarding'
@@ -212,18 +206,6 @@ export const steps = [
 	{
 		path: '/wp-setup/step/get-started/experience',
 		title: __( 'WordPress Experience', 'wp-module-onboarding' ),
-		heading: sprintf(
-			/* translators: %s: website or store */
-			__(
-				'Help us tailor this setup to your %s',
-				'wp-module-onboarding'
-			),
-			translations( 'site' )
-		),
-		subheading: __(
-			'What is your experience with WordPress?',
-			'wp-module-onboarding'
-		),
 		description: __(
 			"We'll use this to personalize this onboarding and future recommendations",
 			'wp-module-onboarding'
@@ -245,27 +227,6 @@ export const steps = [
 			__( 'Primary %s Setup', 'wp-module-onboarding' ),
 			translations( 'Site' )
 		),
-		heading: sprintf(
-			/* translators: %s: website or store */
-			__(
-				'Help us tailor this setup to your %s',
-				'wp-module-onboarding'
-			),
-			translations( 'site' )
-		),
-		subheading: sprintf(
-			/* translators: %s: website or store */
-			__( 'What type of %s is it?', 'wp-module-onboarding' ),
-			translations( 'site' )
-		),
-		description: sprintf(
-			/* translators: %s: website or store */
-			__(
-				"Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.",
-				'wp-module-onboarding'
-			),
-			translations( 'site' )
-		),
 		Component: StepGetStartedPrimarySetup,
 		Icon: moveTo,
 		priority: 60,
@@ -284,27 +245,6 @@ export const steps = [
 			__( 'Secondary %s Setup', 'wp-module-onboarding' ),
 			translations( 'Site' )
 		),
-		heading: sprintf(
-			/* translators: %s: website or store */
-			__(
-				'Help us tailor this setup to your %s',
-				'wp-module-onboarding'
-			),
-			translations( 'site' )
-		),
-		subheading: sprintf(
-			/* translators: %s: website or store */
-			__( 'What type of %s is it?', 'wp-module-onboarding' ),
-			translations( 'site' )
-		),
-		description: sprintf(
-			/* translators: %s: website or store */
-			__(
-				"Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.",
-				'wp-module-onboarding'
-			),
-			translations( 'site' )
-		),
 		Component: StepGetStartedSecondarySetup,
 		Icon: moveTo,
 		priority: 80,
@@ -361,23 +301,6 @@ export const steps = [
 			},
 		},
 	},
-	// {
-	// 	path: '/wp-setup/step/design/themes',
-	// 	title: __( 'Themes', 'wp-module-onboarding' ),
-	// 	heading: __( "Let's make you look your best", 'wp-module-onboarding' ),
-	// 	subheading: __(
-	// 		'Find a WordPress Theme to present polished and compelling.',
-	// 		'wp-module-onboarding'
-	// 	),
-	// 	description: __(
-	// 		'Your Theme is the starting place for layout and design, setting the tone for your site. Keep it for years or change and swap as you grow.',
-	// 		'wp-module-onboarding'
-	// 	),
-	// 	Component: StepDesignThemes,
-	// 	Icon: brush,
-	// 	priority: 140,
-	// 	VIEW: VIEW_DESIGN_THEMES,
-	// },
 	{
 		path: '/wp-setup/step/design/theme-styles/menu',
 		title: __( 'Theme Styles', 'wp-module-onboarding' ),
@@ -591,9 +514,6 @@ export const conditionalSteps = {
 	},
 };
 
-/**
- * Top-level registration of all routes.
- */
 export const routes = [ ...pages, ...steps ];
 
 /**

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js
@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __(
+			'Confirm your business or store address',
+			'wp-module-onboarding'
+		),
+		subheading: __(
+			'We’ll use this information to help you setup your online store',
+			'wp-module-onboarding'
+		),
+		countryInputLabel: __(
+			'Where is your store based?',
+			'wp-module-onboarding'
+		),
+		addressInputLabel: __( 'Address', 'wp-module-onboarding' ),
+		cityInputLabel: __( 'City', 'wp-module-onboarding' ),
+		stateInputLabel: __( 'State', 'wp-module-onboarding' ),
+		postalCodeInputLabel: __( 'Postal Code', 'wp-module-onboarding' ),
+		emailInputLabel: __( 'Email', 'wp-module-onboarding' ),
+		currencyInputLabel: __(
+			'What currency do you want to display in your store?',
+			'wp-module-onboarding'
+		),
+		requiredText: __( '* required', 'wp-module-onboarding' ),
+		buttonText: __( 'Continue Setup', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;