Press 2 458 Loader for Radio label controls

src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js

@@ -0,0 +1,14 @@
+/**
+ * Renders Skeletons for Radio Control.
+ *
+ * @param {number} options       The options to be renedered
+ *
+ */
+const RadioControlSkeleton = ({ options }) => {
+
+    return <div className="radio-control-skeleton">
+            {options.map((option) => (<div className="radio-control-skeleton-item" />))}
+        </div>;
+};
+
+export default RadioControlSkeleton;

src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss

@@ -0,0 +1,22 @@
+/*COLOR VARIABLES*/
+$white-offset: rgb(224, 224, 224);
+$main-color-light: var(--nfd-onboarding-white);
+
+.radio-control {
+
+    &-main {
+        animation: fadeIn 300ms ease-in;
+    }
+
+    &-skeleton {
+        margin: 30px;
+
+        &-item {
+            height: 32px;
+            margin: 12px;
+            padding: 10px;
+            background: transparent;
+        }
+    }
+
+}

src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from '@wordpress/element';
+import RadioControlSkeleton from '../RadioControlSkeleton';
+
+/**
+ * A State Handler to manage Radio Control
+ *
+ * @param {number} options           The options to be renedered.
+ * @param {string} children          The children to be rendered out.
+ * @param {number} watch             The variable to be awaited for to be fetched.
+ *
+ */
+const RadioControlStateHandler = ({ options, watch, children }) => {
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch]);
+
+    return !watch ? (
+        <RadioControlSkeleton options={options} />
+    ) : (
+        <>
+            {<div style={{ display: 'none' }}>{rerender}</div>}
+            {children}
+        </>
+    );
+};
+
+export default RadioControlStateHandler;

src/OnboardingSPA/components/RadioControl/index.js

@@ -0,0 +1,2 @@
+export { default as RadioControlSkeleton } from './RadioControlSkeleton';
+export { default as RadioControlStateHandler } from './RadioControlStateHandler';

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

@@ -3,15 +3,17 @@ import { __, sprintf } from '@wordpress/i18n';
 import { translations } from '../../../../../../utils/locales/translations';
 import { institution } from '@wordpress/icons';
 
-const getContents = ( brandName,  techSupportLink, fullServiceCreativeTeamLink ) => {
+const getContents = (
+	brandName,
+	techSupportLink,
+	fullServiceCreativeTeamLink
+) => {
 	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.'
-				),
+				__( 'A %s that does taxes in one click. That’s pretty novel.' ),
 				translations( 'site' ),
 				brandName,
 				translations( 'Site' )

src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/Sidebar/LearnMore/index.js

@@ -34,15 +34,24 @@ const StepIntroPanel = lazy( () =>
 );
 
 const LearnMore = () => {
-	const { brandName, techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => {
-		return {
-			brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
-			techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(),
-			fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(),
-		};
-	} );
+	const { brandName, techSupportLink, fullServiceCreativeTeamLink } =
+		useSelect( ( select ) => {
+			return {
+				brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+				techSupportLink:
+					select( nfdOnboardingStore ).getTechSupportUrl(),
+				fullServiceCreativeTeamLink:
+					select(
+						nfdOnboardingStore
+					).getfullServiceCreativeTeamUrl(),
+			};
+		} );
 
-	const content = getContents( brandName, techSupportLink, fullServiceCreativeTeamLink );
+	const content = getContents(
+		brandName,
+		techSupportLink,
+		fullServiceCreativeTeamLink
+	);
 
 	return (
 		<div className="nfd-onboarding-sidebar-learn-more__ecommerce-tax-info">
@@ -61,7 +70,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

src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js

@@ -13,6 +13,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 import { useWPSettings } from '../useWPSettings';
+import { RadioControlStateHandler } from '../../../../components/RadioControl';
 
 function createReverseLookup(state) {
 	return (option) =>
@@ -74,6 +75,22 @@ const StepTax = () => {
 		navigate('/ecommerce/step/products');
 	};
 
+	const selectOption = (value) => {
+		let selectedOption = content.stepTaxOptions.find(
+			(option) => option.value === value
+		);
+		setCurrentOnboardingData({
+			storeDetails: {
+				...currentData.storeDetails,
+				tax: {
+					...selectedOption.data,
+					option: selectedOption.value,
+					isStoreDetailsFilled: tax?.isStoreDetailsFilled
+				},
+			},
+		});
+	}
+
 	return (
         <EcommerceStateHandler>
 		<CommonLayout isBgPrimary isCentered>
@@ -85,33 +102,33 @@ const StepTax = () => {
 							subHeading={__(content.stepTaxSubHeading, 'wp-module-onboarding')}
 							question={__(content.question, 'wp-module-onboarding')}
 						/>
-						{settings === null && <p>Loading...</p>}
 					</div>
-					<RadioControl
-						className='nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step'
-						selected={tax?.option}
-						options={content.stepTaxOptions.map((option) => {
-							return {
-								label: __(option.content, 'wp-module-onboarding'),
-								value: option.value,
-							};
-						})}
-						onChange={(value) => {
-							let selectedOption = content.stepTaxOptions.find(
-								(option) => option.value === value
-							);
-							setCurrentOnboardingData({
-								storeDetails: {
-									...currentData.storeDetails,
-									tax: {
-										...selectedOption.data,
-										option: selectedOption.value,
-										isStoreDetailsFilled: tax?.isStoreDetailsFilled
-									},
-								},
-							});
-						}}
-					/>
+					<RadioControlStateHandler
+						watch={ settings }
+						options={ content.stepTaxOptions }
+					>
+						<RadioControl
+							className={
+								'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step radio-control-main'
+							}
+							selected={ tax?.option }
+							options={ content.stepTaxOptions.map(
+								( option ) => {
+									return {
+										label: __(
+											option.content,
+											'wp-module-onboarding'
+										),
+										value: __(
+											option.value,
+											'wp-module-onboarding'
+										),
+									};
+								}
+							)}
+							onChange={( value ) => selectOption( value )}
+						/>
+					</RadioControlStateHandler>
 					<button
 						className='nfd-nav-card-button nfd-card-button'
 						disabled={settings === null || tax?.option === undefined}

src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss

@@ -224,7 +224,7 @@ div.onboarding-product-step {
 
 .radio-control-tax-step {
 	label {
-		padding: 10px 190px 10px 15px;
+		padding: 10px 100px 10px 20px;
 	}
 
 	@media (max-width: #{ ($break-medium - 1) }) {

src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/contents.js

@@ -4,7 +4,6 @@ import { translations } from '../../../../../../utils/locales/translations';
 import { home } from '@wordpress/icons';
 
 const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => {
-
 	return {
 		introduction: {
 			heading: __( 'WordPress Experience', 'wp-module-onboarding' ),
@@ -24,10 +23,7 @@ const getContents = ( techSupportLink, fullServiceCreativeTeamLink ) => {
 		information: {
 			headingWithDescriptions: [
 				{
-					heading: __(
-						'Why we ask',
-						'wp-module-onboarding'
-					),
+					heading: __( 'Why we ask', 'wp-module-onboarding' ),
 					description: __(
 						`We use this to help offer the best WordPress setup, features and suggestions for your site.`,
 						'wp-module-onboarding'

src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/Sidebar/LearnMore/index.js

@@ -34,13 +34,18 @@ const StepIntroPanel = lazy( () =>
 );
 
 const LearnMore = () => {
-
-	const { techSupportLink, fullServiceCreativeTeamLink } = useSelect( ( select ) => {
-		return {
-			techSupportLink: select( nfdOnboardingStore ).getTechSupportUrl(),
-			fullServiceCreativeTeamLink: select( nfdOnboardingStore ).getfullServiceCreativeTeamUrl(),
-		};
-	} );
+	const { techSupportLink, fullServiceCreativeTeamLink } = useSelect(
+		( select ) => {
+			return {
+				techSupportLink:
+					select( nfdOnboardingStore ).getTechSupportUrl(),
+				fullServiceCreativeTeamLink:
+					select(
+						nfdOnboardingStore
+					).getfullServiceCreativeTeamUrl(),
+			};
+		}
+	);
 
 	const content = getContents( techSupportLink, fullServiceCreativeTeamLink );
 
@@ -61,7 +66,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

src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js

@@ -13,6 +13,7 @@ import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { RadioControlStateHandler } from '../../../../components/RadioControl';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -80,23 +81,32 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioControl
-						className="nfd-onboarding-experience-step-tabs components-radio-control__input"
-						selected={ wpComfortLevel }
-						options={ content.options.map( ( option ) => {
-							return {
-								label: __(
-									option.content,
-									'wp-module-onboarding'
-								),
-								value: __(
-									option.value,
-									'wp-module-onboarding'
-								),
-							};
-						} ) }
-						onChange={ ( value ) => setWpComfortLevel( value ) }
-					/>
+					<RadioControlStateHandler
+						watch={ wpComfortLevel }
+						options={ content.options }
+					>
+						<RadioControl
+							className={
+								'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-main'
+							}
+							selected={ wpComfortLevel }
+							options={ content.options.map(
+								( option ) => {
+									return {
+										label: __(
+											option.content,
+											'wp-module-onboarding'
+										),
+										value: __(
+											option.value,
+											'wp-module-onboarding'
+										),
+									};
+								}
+							)}
+							onChange={( value ) => setWpComfortLevel( value )}
+						/>
+					</RadioControlStateHandler>
 					<NavCardButton
 						text={ __(
 							content.buttonText,

src/OnboardingSPA/styles/app.scss

@@ -36,6 +36,7 @@
 @import "../components/ErrorState/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxItem/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxList/stylesheet";
+@import "../components/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";