Revert "Added State Handler"

This reverts commit 91bdda1.

src/OnboardingSPA/components/RadioControlWithSkeleton/index.js

@@ -0,0 +1,68 @@
+import { __ } from '@wordpress/i18n';
+import { RadioControl } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Renders Skeletons for Radio Control.
+ *
+ * @property {number} data                      The options to be renedered
+ * @property {number} watch                     The variable to be awaited for
+ * @property {string} callback                  The Render function in parent to be called
+ * @property {string} className                 The class name for the Live Preview
+ * 
+ */
+const RadioControlWithSkeleton = ({
+    data,
+    watch,
+    selected,
+    callback,
+    className,
+}) => {
+
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch, selected]);
+
+    const buildDummyPreviews = () => {
+        var customItems = [];
+
+        for (let idx = 0; idx < data.length; idx++)
+            customItems.push(<div className="radio-control-skeleton-item" />);
+
+        return (
+            <div className='radio-control-skeleton'>
+                {customItems}
+           </div>
+        );
+    };
+
+    const buildRealPreview = () => {
+        return (
+            <RadioControl
+                className={`${className} radio-control-main`}
+                selected={selected}
+                options={data.map((option) => {
+                    return {
+                        label: __(
+                            option.content,
+                            'wp-module-onboarding'
+                        ),
+                        value: __(
+                            option.value,
+                            'wp-module-onboarding'
+                        ),
+                    };
+                })}
+                onChange={(value) => callback(value)}
+            />
+        );
+    };
+
+    return !watch ? buildDummyPreviews() :
+        <>
+            {watch ? <div style={{ display: 'none' }}>{rerender}</div> : null}
+            {buildRealPreview()}
+        </>;
+};
+
+export default RadioControlWithSkeleton;

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

@@ -1,13 +1,10 @@
 import { RadioControl } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch,useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
-import {
-	SIDEBAR_LEARN_MORE,
-	VIEW_NAV_ECOMMERCE_STORE_INFO,
-} from '../../../../../constants';
+import { SIDEBAR_LEARN_MORE, VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../../constants';
 import CardHeader from '../../../../components/CardHeader';
 import CommonLayout from '../../../../components/Layouts/Common';
 import NeedHelpTag from '../../../../components/NeedHelpTag';
@@ -16,13 +13,11 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 import { useWPSettings } from '../useWPSettings';
-import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
+import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton';
 
-function createReverseLookup( state ) {
-	return ( option ) =>
-		Object.entries( option.data ).every(
-			( [ key, value ] ) => state?.[ key ] === value
-		);
+function createReverseLookup(state) {
+	return (option) =>
+		Object.entries(option.data).every(([key, value]) => state?.[key] === value);
 }
 
 const StepTax = () => {
@@ -33,131 +28,99 @@ const StepTax = () => {
 		setIsDrawerSuppressed,
 		setSidebarActiveView,
 		setCurrentOnboardingData,
-	} = useDispatch( nfdOnboardingStore );
+	} = useDispatch(nfdOnboardingStore);
 	const navigate = useNavigate();
 
-	const currentData = useSelect( ( select ) =>
-		select( nfdOnboardingStore ).getCurrentOnboardingData()
+	let currentData = useSelect((select) =>
+		select(nfdOnboardingStore).getCurrentOnboardingData()
 	);
 
-	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
+	useEffect(() => {
+		if (isLargeViewport) {
+			setIsDrawerOpened(true);
 		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
-		setDrawerActiveView( VIEW_NAV_ECOMMERCE_STORE_INFO );
-	}, [] );
+		setIsDrawerSuppressed(false);
+		setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO);
+	}, []);
 
 	const settings = useWPSettings();
-	useEffect( () => {
-		if ( settings !== null && currentData.storeDetails.tax === undefined ) {
-			const selectedTaxOption = content.stepTaxOptions.find(
-				createReverseLookup( settings )
+	useEffect(() => {
+		if (settings !== null && currentData.storeDetails.tax === undefined) {
+			let selectedTaxOption = content.stepTaxOptions.find(
+				createReverseLookup(settings)
 			);
-			const tax = selectedTaxOption?.data ?? {};
-			setCurrentOnboardingData( {
+			let tax = selectedTaxOption?.data ?? {};
+			setCurrentOnboardingData({
 				storeDetails: {
 					...currentData.storeDetails,
 					tax: {
-						...( currentData.storeDetails.tax ?? {} ),
+						...(currentData.storeDetails.tax ?? {}),
 						...tax,
 						option: selectedTaxOption?.value,
-						isStoreDetailsFilled:
-							settings.woocommerce_store_postcode !== null,
+						isStoreDetailsFilled: settings.woocommerce_store_postcode !== null,
 					},
 				},
-			} );
+			});
 		}
-	}, [ settings, currentData.storeDetails ] );
-	const { tax } = currentData.storeDetails;
+	}, [settings, currentData.storeDetails]);
+	let { tax } = currentData.storeDetails;
 	const handleButtonClick = () => {
 		//Commented as auto-calculate tax option is removed for MMP
 		// let isAddressNeeded = tax?.option === "1" && !tax.isStoreDetailsFilled;
 		// navigate(
 		// 	isAddressNeeded ? '/ecommerce/step/address' : '/ecommerce/step/products'
 		// );
 
-		navigate( '/ecommerce/step/products' );
+		navigate('/ecommerce/step/products');
 	};
 
-	const selectOption = ( value ) => {
-		const selectedOption = content.stepTaxOptions.find(
-			( option ) => option.value === value
+	const selectOption = (value) => {
+		let selectedOption = content.stepTaxOptions.find(
+			(option) => option.value === value
 		);
-		setCurrentOnboardingData( {
+		setCurrentOnboardingData({
 			storeDetails: {
 				...currentData.storeDetails,
 				tax: {
 					...selectedOption.data,
 					option: selectedOption.value,
-					isStoreDetailsFilled: tax?.isStoreDetailsFilled,
+					isStoreDetailsFilled: tax?.isStoreDetailsFilled
 				},
 			},
-		} );
-	};
+		});
+	}
 
 	return (
-		<EcommerceStateHandler>
-			<CommonLayout isBgPrimary isCentered>
-				<NewfoldLargeCard className="ecommerce-step">
-					<div className="nfd-onboarding-experience-step onboarding-ecommerce-step">
-						<div className="nfd-card-heading center onboarding-ecommerce-step">
-							<CardHeader
-								heading={ __(
-									content.stepTaxHeading,
-									'wp-module-onboarding'
-								) }
-								subHeading={ __(
-									content.stepTaxSubHeading,
-									'wp-module-onboarding'
-								) }
-								question={ __(
-									content.question,
-									'wp-module-onboarding'
-								) }
-							/>
-						</div>
-						<RadioCtrlStateHandler
-							watch={ settings }
-							data={ 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 ) }
-							/>
-						</RadioCtrlStateHandler>
-						<button
-							className="nfd-nav-card-button nfd-card-button"
-							disabled={
-								settings === null || tax?.option === undefined
-							}
-							onClick={ handleButtonClick }
-						>
-							{ __( 'Continue Setup', 'wp-module-onboarding' ) }
-						</button>
-						<NeedHelpTag />
+        <EcommerceStateHandler>
+		<CommonLayout isBgPrimary isCentered>
+			<NewfoldLargeCard className='ecommerce-step' >
+				<div className='nfd-onboarding-experience-step onboarding-ecommerce-step'>
+					<div className='nfd-card-heading center onboarding-ecommerce-step'>
+						<CardHeader
+							heading={__(content.stepTaxHeading, 'wp-module-onboarding')}
+							subHeading={__(content.stepTaxSubHeading, 'wp-module-onboarding')}
+							question={__(content.question, 'wp-module-onboarding')}
+						/>
 					</div>
-				</NewfoldLargeCard>
-			</CommonLayout>
-		</EcommerceStateHandler>
+					<RadioControlWithSkeleton
+						className={"nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step"}
+						watch={settings}
+						selected={tax?.option}
+						data={content.stepTaxOptions}
+						callback={(value) => selectOption(value)} />
+					<button
+						className='nfd-nav-card-button nfd-card-button'
+						disabled={settings === null || tax?.option === undefined}
+						onClick={handleButtonClick}
+					>
+						{ __( 'Continue Setup', 'wp-module-onboarding') }
+					</button>
+					<NeedHelpTag/>
+				</div>
+			</NewfoldLargeCard>
+		</CommonLayout>
+        </EcommerceStateHandler>
 	);
 };
 

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

@@ -13,7 +13,7 @@ import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
+import RadioControlWithSkeleton from '../../../../components/RadioControlWithSkeleton';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -81,30 +81,12 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioCtrlStateHandler
-						watch={ wpComfortLevel }
-						data={ 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 ) }
-						/>
-					</RadioCtrlStateHandler>
+					<RadioControlWithSkeleton 
+						className={"nfd-onboarding-experience-step-tabs components-radio-control__input"}
+						data={content.options}
+						watch={wpComfortLevel}
+						selected={wpComfortLevel}
+						callback={(value) => setWpComfortLevel(value)}/>
 					<NavCardButton
 						text={ __(
 							content.buttonText,

src/OnboardingSPA/styles/app.scss

@@ -34,9 +34,9 @@
 @import "../components/Button/NavCardButton/stylesheet";
 @import "../pages/Steps/Ecommerce/stylesheet";
 @import "../components/ErrorState/stylesheet";
+@import "../components/RadioControlWithSkeleton/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";