From 628060a9236f13e3fdf5a0c3e3a78c40e5063c9c Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 26 Dec 2022 17:12:39 +0530
Subject: [PATCH] Revert "Added State Handler"

This reverts commit 91bdda1b05b5984a5f3a702bccb73104d7fedfa5.
---
 .../RadioControlSkeleton/index.js             |  20 ---
 .../RadioControl/RadioControlState/index.js   |  27 ---
 .../components/RadioControl/index.js          |   2 -
 .../RadioControlWithSkeleton/index.js         |  68 ++++++++
 .../stylesheet.scss                           |   0
 .../pages/Steps/Ecommerce/StepTax/index.js    | 161 +++++++-----------
 .../GetStarted/GetStartedExperience/index.js  |  32 +---
 src/OnboardingSPA/styles/app.scss             |   2 +-
 8 files changed, 138 insertions(+), 174 deletions(-)
 delete mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
 delete mode 100644 src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
 delete mode 100644 src/OnboardingSPA/components/RadioControl/index.js
 create mode 100644 src/OnboardingSPA/components/RadioControlWithSkeleton/index.js
 rename src/OnboardingSPA/components/{RadioControl/RadioControlSkeleton => RadioControlWithSkeleton}/stylesheet.scss (100%)

diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
deleted file mode 100644
index 944938f11..000000000
--- a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Renders Skeletons for Radio Control.
- *
- * @param {number} data       The options to be renedered
- *
- */
-const RadioControlSkeleton = ( { data } ) => {
-	const buildDummyRadioControls = () => {
-		const 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>;
-	};
-
-	return buildDummyRadioControls();
-};
-
-export default RadioControlSkeleton;
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js b/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
deleted file mode 100644
index 73466b071..000000000
--- a/src/OnboardingSPA/components/RadioControl/RadioControlState/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState, useEffect } from '@wordpress/element';
-import RadioControlSkeleton from '../RadioControlSkeleton';
-
-/**
- * A State Handler to manage Radio Control
- *
- * @param {number} data           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 RadioControlState = ( { data, watch, children } ) => {
-	const [ rerender, doRerender ] = useState( 0 );
-
-	useEffect( () => doRerender( 1 ), [ watch ] );
-
-	return ! watch ? (
-		<RadioControlSkeleton data={ data } />
-	) : (
-		<>
-			{ <div style={ { display: 'none' } }>{ rerender }</div> }
-			{ children }
-		</>
-	);
-};
-
-export default RadioControlState;
diff --git a/src/OnboardingSPA/components/RadioControl/index.js b/src/OnboardingSPA/components/RadioControl/index.js
deleted file mode 100644
index 7d22b59a8..000000000
--- a/src/OnboardingSPA/components/RadioControl/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as RadioCtrlSkeleton } from './RadioControlSkeleton';
-export { default as RadioCtrlStateHandler } from './RadioControlState';
diff --git a/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js b/src/OnboardingSPA/components/RadioControlWithSkeleton/index.js
new file mode 100644
index 000000000..7859dc781
--- /dev/null
+++ b/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;
diff --git a/src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss b/src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss
similarity index 100%
rename from src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/stylesheet.scss
rename to src/OnboardingSPA/components/RadioControlWithSkeleton/stylesheet.scss
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
index 0bfe39445..67ce0708e 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
+++ b/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,44 +28,43 @@ 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;
@@ -78,86 +72,55 @@ const StepTax = () => {
 		// 	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>
 	);
 };
 
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
index 0ff86564b..9f89bf88c 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js
+++ b/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,
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 5c8161be8..d7383b41f 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/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";