From 76f8631b856537e4836b1832cb37f4ae630abc63 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 4 Jan 2023 18:59:18 +0530
Subject: [PATCH 1/5] Added Classes and CSS

---
 .../pages/Steps/Ecommerce/StepAddress/index.js            | 3 +--
 src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss   | 8 ++++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 3c376b28b..31cc890cb 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -148,9 +148,8 @@ const StepAddress = () => {
 									'wp-module-onboarding'
 								)}
 							/>
-							{settings === null && <p>Loading your details...</p>}
 						</div>
-						<div className='store-address-form'>
+							<div className={`store-address-form ${settings ? 'store-address-form--visible' : 'store-address-form--blank'}`}>
 							<div data-name='country'>
 								<label aria-required>
 									{__('Where is your store based?', 'wp-module-onboarding')}
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
index 4dd13e3ac..62ae53e8e 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
@@ -101,6 +101,14 @@
 				width: 100%;
 			}
 		}
+
+		&--visible {
+			animation: fadeIn 500ms ease-in;
+		}
+
+		&--blank {
+			opacity: 0;
+		}
 	}
 }
 

From de8bdd2b5337f19fe416e4f686f20d715dd167c7 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 5 Jan 2023 13:17:58 +0530
Subject: [PATCH 2/5] Added a Step State Handler for Generic use

---
 .../StateHandlers/StepStateHandler/index.js   |  29 +++
 .../StepStateHandler/stylesheet.scss          |  12 +
 .../Steps/Ecommerce/StepAddress/index.js      | 205 +++++++++---------
 .../pages/Steps/Ecommerce/stylesheet.scss     |   7 -
 src/OnboardingSPA/styles/_utilities.scss      |  12 +
 src/OnboardingSPA/styles/app.scss             |   1 +
 6 files changed, 158 insertions(+), 108 deletions(-)
 create mode 100644 src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js
 create mode 100644 src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss

diff --git a/src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js b/src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js
new file mode 100644
index 000000000..ece7a1d04
--- /dev/null
+++ b/src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * A State Handler to manage Steps
+ *
+ * @param {string} children          The children to be rendered out.
+ * @param {number} watch             The variable to be awaited for to be fetched.
+ *
+ */
+const StepStateHandler = ({ watch, children }) => {
+    const [rerender, doRerender] = useState(0);
+
+    useEffect(() => doRerender(1), [watch]);
+
+    return !watch ? (
+        <div className='step-state-handler--blank'>
+            { children }
+        </div>
+    ) : (
+        <>
+            {<div style={{ display: 'none' }}>{rerender}</div>}
+                <div className='step-state-handler--visible'>
+                {children}
+            </div>
+        </>
+    );
+};
+
+export default StepStateHandler;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss b/src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss
new file mode 100644
index 000000000..daec9a071
--- /dev/null
+++ b/src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss
@@ -0,0 +1,12 @@
+.step-state-handler {
+    
+    &--blank {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &--visible {
+       animation: fadeInWithDisabledClicks 500ms ease-in;
+    }
+    
+}
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 31cc890cb..07a33bc93 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -14,6 +14,7 @@ import countries from '../countries.json';
 import currencies from '../currencies.json';
 import { useWPSettings } from '../useWPSettings';
 import { EcommerceStateHandler } from '../../../../components/StateHandlers';
+import StepStateHandler from '../../../../components/StateHandlers/StepStateHandler';
 
 const StepAddress = () => {
 	const isLargeViewport = useViewportMatch('medium');
@@ -149,129 +150,131 @@ const StepAddress = () => {
 								)}
 							/>
 						</div>
-							<div className={`store-address-form ${settings ? 'store-address-form--visible' : 'store-address-form--blank'}`}>
-							<div data-name='country'>
-								<label aria-required>
-									{__('Where is your store based?', 'wp-module-onboarding')}
-								</label>
-								{settings === null ? (
-									<input type='text' disabled />
-								) : (
-									<select
-										type='text'
-										name='country'
-										required
-										defaultValue={selectedCountry}
-										{...fieldProps}
-									>
-										{countries.map((country) => (
-											<option key={country.code} value={country.code}>
-												{country.name}
-											</option>
-										))}
-									</select>
-								)}
-							</div>
-							<div data-name='woocommerce_store_address'>
-								<label aria-required>
-									{__('Address', 'wp-module-onboarding')}
-								</label>
-								<input
-									name='woocommerce_store_address'
-									type='text'
-									required
-									defaultValue={address?.woocommerce_store_address}
-									{...fieldProps}
-								/>
-							</div>
-							<div
-								data-name='full-address'
-								data-state-empty={states.length === 0}
-							>
-								<div data-name='woocommerce_store_city'>
+						<StepStateHandler watch={ settings }>
+							<div className={'store-address-form'}>
+								<div data-name='country'>
 									<label aria-required>
-										{__('City', 'wp-module-onboarding')}
+										{__('Where is your store based?', 'wp-module-onboarding')}
+									</label>
+									{settings === null ? (
+										<input type='text' disabled />
+									) : (
+										<select
+											type='text'
+											name='country'
+											required
+											defaultValue={selectedCountry}
+											{...fieldProps}
+										>
+											{countries.map((country) => (
+												<option key={country.code} value={country.code}>
+													{country.name}
+												</option>
+											))}
+										</select>
+									)}
+								</div>
+								<div data-name='woocommerce_store_address'>
+									<label aria-required>
+										{__('Address', 'wp-module-onboarding')}
 									</label>
 									<input
-										name='woocommerce_store_city'
+										name='woocommerce_store_address'
 										type='text'
 										required
-										defaultValue={address?.woocommerce_store_city}
+										defaultValue={address?.woocommerce_store_address}
 										{...fieldProps}
 									/>
 								</div>
-								{states.length === 0 || settings === null ? null : (
-									<div data-name='state'>
+								<div
+									data-name='full-address'
+									data-state-empty={states.length === 0}
+								>
+									<div data-name='woocommerce_store_city'>
 										<label aria-required>
-											{__('State', 'wp-module-onboarding')}
+											{__('City', 'wp-module-onboarding')}
 										</label>
-										<select
+										<input
+											name='woocommerce_store_city'
 											type='text'
-											name='state'
 											required
-											defaultValue={
-												selectedCountry == defaultCountry ? defaultState : ''
-											}
+											defaultValue={address?.woocommerce_store_city}
 											{...fieldProps}
-										>
-											<option key={''} value={''} selected />
-											{states.map((state) => (
-												<option key={state.code} value={state.code}>
-													{state.name}
-												</option>
-											))}
-										</select>
+										/>
 									</div>
-								)}
-								<div data-name='woocommerce_store_postcode'>
+									{states.length === 0 || settings === null ? null : (
+										<div data-name='state'>
+											<label aria-required>
+												{__('State', 'wp-module-onboarding')}
+											</label>
+											<select
+												type='text'
+												name='state'
+												required
+												defaultValue={
+													selectedCountry == defaultCountry ? defaultState : ''
+												}
+												{...fieldProps}
+											>
+												<option key={''} value={''} selected />
+												{states.map((state) => (
+													<option key={state.code} value={state.code}>
+														{state.name}
+													</option>
+												))}
+											</select>
+										</div>
+									)}
+									<div data-name='woocommerce_store_postcode'>
+										<label aria-required>
+											{__('Postal Code', 'wp-module-onboarding')}
+										</label>
+										<input
+											name='woocommerce_store_postcode'
+											type='text'
+											required
+											defaultValue={address?.woocommerce_store_postcode}
+											{...fieldProps}
+										/>
+									</div>
+								</div>
+								<div>
 									<label aria-required>
-										{__('Postal Code', 'wp-module-onboarding')}
+										{__('Email', 'wp-module-onboarding')}
 									</label>
 									<input
-										name='woocommerce_store_postcode'
-										type='text'
+										name='woocommerce_email_from_address'
+										type='email'
 										required
-										defaultValue={address?.woocommerce_store_postcode}
+										defaultValue={address?.woocommerce_email_from_address}
 										{...fieldProps}
 									/>
 								</div>
+								<div>
+									<label>
+										{__(
+											'What currency do you want to display in your store?',
+											'wp-module-onboarding'
+										)}
+									</label>
+									<select
+										type='text'
+										name='woocommerce_currency'
+										value={address?.woocommerce_currency}
+										{...fieldProps}
+									>
+										{Object.entries(currencies).map(([code, currency]) => (
+											<option
+												key={code}
+												value={code}
+												dangerouslySetInnerHTML={{ __html: currency }}
+											/>
+										))}
+									</select>
+								</div>
+								<em style={{ display: 'inline' }}>* required</em>
 							</div>
-							<div>
-								<label aria-required>
-									{__('Email', 'wp-module-onboarding')}
-								</label>
-								<input
-									name='woocommerce_email_from_address'
-									type='email'
-									required
-									defaultValue={address?.woocommerce_email_from_address}
-									{...fieldProps}
-								/>
-							</div>
-							<div>
-								<label>
-									{__(
-										'What currency do you want to display in your store?',
-										'wp-module-onboarding'
-									)}
-								</label>
-								<select
-									type='text'
-									name='woocommerce_currency'
-									value={address?.woocommerce_currency}
-									{...fieldProps}
-								>
-									{Object.entries(currencies).map(([code, currency]) => (
-										<option
-											key={code}
-											value={code}
-											dangerouslySetInnerHTML={{ __html: currency }}
-										/>
-									))}
-								</select>
-							</div>
-							<em style={{ display: 'inline' }}>* required</em>
-						</div>
+						</StepStateHandler>
 						<button
 							className='nfd-nav-card-button nfd-card-button'
 							disabled={settings === null}
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
index 62ae53e8e..ed5a3e83e 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
@@ -102,13 +102,6 @@
 			}
 		}
 
-		&--visible {
-			animation: fadeIn 500ms ease-in;
-		}
-
-		&--blank {
-			opacity: 0;
-		}
 	}
 }
 
diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss
index 2a88fb833..b916ae7d5 100644
--- a/src/OnboardingSPA/styles/_utilities.scss
+++ b/src/OnboardingSPA/styles/_utilities.scss
@@ -9,6 +9,18 @@
 	}
 }
 
+@keyframes fadeInWithDisabledClicks {
+
+	from {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
 @keyframes fadeInRight {
 	from {
 		opacity: 0;
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 5c8161be8..80daf57c0 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/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/StateHandlers/StepStateHandler/stylesheet";
 @import "../components/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";

From 706f02a0dedfb8d9b4e1e56540b98a0ab0ffdf82 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 13 Jan 2023 18:48:19 +0530
Subject: [PATCH 3/5] Refactored Code to use an Animate component

---
 src/OnboardingSPA/components/Animate/index.js | 43 +++++++++++++++++++
 .../components/Animate/stylesheet.scss        | 11 +++++
 .../StateHandlers/StepStateHandler/index.js   | 29 -------------
 .../StepStateHandler/stylesheet.scss          | 12 ------
 .../Steps/Ecommerce/StepAddress/index.js      |  6 +--
 src/OnboardingSPA/styles/app.scss             |  2 +-
 6 files changed, 58 insertions(+), 45 deletions(-)
 create mode 100644 src/OnboardingSPA/components/Animate/index.js
 create mode 100644 src/OnboardingSPA/components/Animate/stylesheet.scss
 delete mode 100644 src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js
 delete mode 100644 src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss

diff --git a/src/OnboardingSPA/components/Animate/index.js b/src/OnboardingSPA/components/Animate/index.js
new file mode 100644
index 000000000..68e0acdf8
--- /dev/null
+++ b/src/OnboardingSPA/components/Animate/index.js
@@ -0,0 +1,43 @@
+/**
+ * A Animator to show animation
+ *
+ * @param {string} type              The Animation to be shown.
+ * @param {string} children          The children to be rendered out.
+ * @param {number} after             The variable to look after for before showing the animation, by default true to show the children right away.
+ *
+ */
+const Animate = ({ type, after = true, children }) => {
+
+    /**
+     * @param {GetAnimateOptions} options
+     *
+     * @return {string | void} ClassName that applies the animations
+    */
+    function getAnimateClassName() {
+
+        let classname = '';
+        const prefix = 'animate';
+
+        switch ( type ) {
+
+            // Add animation types and appropriate CSS
+            case 'fade-in':
+                classname = prefix.concat('__fade-in');
+                break;
+        }
+
+        return classname;
+    }
+
+    return !after ? (
+        <div className='animate__blank'>
+            {children}
+        </div>
+    ) : (
+        <div className={getAnimateClassName()}>
+            {children}
+        </div>
+    );
+};
+
+export default Animate;
diff --git a/src/OnboardingSPA/components/Animate/stylesheet.scss b/src/OnboardingSPA/components/Animate/stylesheet.scss
new file mode 100644
index 000000000..04c4e89ba
--- /dev/null
+++ b/src/OnboardingSPA/components/Animate/stylesheet.scss
@@ -0,0 +1,11 @@
+.animate {
+    
+    &__blank {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__fade-in {
+        animation: fadeInWithDisabledClicks 500ms ease-in;
+    }
+}
diff --git a/src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js b/src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js
deleted file mode 100644
index ece7a1d04..000000000
--- a/src/OnboardingSPA/components/StateHandlers/StepStateHandler/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * A State Handler to manage Steps
- *
- * @param {string} children          The children to be rendered out.
- * @param {number} watch             The variable to be awaited for to be fetched.
- *
- */
-const StepStateHandler = ({ watch, children }) => {
-    const [rerender, doRerender] = useState(0);
-
-    useEffect(() => doRerender(1), [watch]);
-
-    return !watch ? (
-        <div className='step-state-handler--blank'>
-            { children }
-        </div>
-    ) : (
-        <>
-            {<div style={{ display: 'none' }}>{rerender}</div>}
-                <div className='step-state-handler--visible'>
-                {children}
-            </div>
-        </>
-    );
-};
-
-export default StepStateHandler;
\ No newline at end of file
diff --git a/src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss b/src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss
deleted file mode 100644
index daec9a071..000000000
--- a/src/OnboardingSPA/components/StateHandlers/StepStateHandler/stylesheet.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.step-state-handler {
-    
-    &--blank {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    &--visible {
-       animation: fadeInWithDisabledClicks 500ms ease-in;
-    }
-    
-}
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 07a33bc93..809b5fb63 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -13,8 +13,8 @@ import content from '../content.json';
 import countries from '../countries.json';
 import currencies from '../currencies.json';
 import { useWPSettings } from '../useWPSettings';
+import Animate from '../../../../components/Animate';
 import { EcommerceStateHandler } from '../../../../components/StateHandlers';
-import StepStateHandler from '../../../../components/StateHandlers/StepStateHandler';
 
 const StepAddress = () => {
 	const isLargeViewport = useViewportMatch('medium');
@@ -150,7 +150,7 @@ const StepAddress = () => {
 								)}
 							/>
 						</div>
-						<StepStateHandler watch={ settings }>
+						<Animate type={"fade-in"} after={ settings }>
 							<div className={'store-address-form'}>
 								<div data-name='country'>
 									<label aria-required>
@@ -274,7 +274,7 @@ const StepAddress = () => {
 								</div>
 								<em style={{ display: 'inline' }}>* required</em>
 							</div>
-						</StepStateHandler>
+						</Animate>
 						<button
 							className='nfd-nav-card-button nfd-card-button'
 							disabled={settings === null}
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 80daf57c0..49c025c99 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -36,10 +36,10 @@
 @import "../components/ErrorState/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxItem/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxList/stylesheet";
-@import "../components/StateHandlers/StepStateHandler/stylesheet";
 @import "../components/RadioControl/RadioControlSkeleton/stylesheet";
 @import "../components/CheckboxTemplate/CheckboxListSkeleton/stylesheet";
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";
+@import "../components/Animate/stylesheet";
 
 // CSS for Pages
 @import "../pages/Steps/BasicInfo/stylesheet";

From 26a3ba95c3f3e5ae09889e93c77235948a4e4c32 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 13 Jan 2023 19:58:29 +0530
Subject: [PATCH 4/5] Code Refactor

---
 src/OnboardingSPA/components/Animate/index.js | 58 +++++++++----------
 .../Steps/Ecommerce/StepAddress/index.js      |  2 +-
 2 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/OnboardingSPA/components/Animate/index.js b/src/OnboardingSPA/components/Animate/index.js
index 68e0acdf8..29b530ab3 100644
--- a/src/OnboardingSPA/components/Animate/index.js
+++ b/src/OnboardingSPA/components/Animate/index.js
@@ -1,43 +1,37 @@
 /**
  * A Animator to show animation
  *
- * @param {string} type              The Animation to be shown.
- * @param {string} children          The children to be rendered out.
- * @param {number} after             The variable to look after for before showing the animation, by default true to show the children right away.
+ * @param {string}             type  The name of Animation to be shown.
+ * @param { object | boolean } after The variable to look after for before showing the animation, by default true to show the children right away.
  *
  */
-const Animate = ({ type, after = true, children }) => {
+const Animate = ( { type, after = true, children } ) => {
+	const prefix = 'animate';
 
-    /**
-     * @param {GetAnimateOptions} options
-     *
-     * @return {string | void} ClassName that applies the animations
-    */
-    function getAnimateClassName() {
+	/**
+	 * Returns the appropriate classNames
+	 *
+	 * @return {string | void} ClassName that applies the animations
+	 */
+	function getAnimateClassName() {
+		if ( type ) {
+			let classname = '';
 
-        let classname = '';
-        const prefix = 'animate';
+			switch ( type ) {
+				// Add animation types and appropriate CSS
+				case 'fade-in':
+					classname = prefix.concat( '__fade-in' );
+					break;
+			}
+			return classname;
+		}
+	}
 
-        switch ( type ) {
-
-            // Add animation types and appropriate CSS
-            case 'fade-in':
-                classname = prefix.concat('__fade-in');
-                break;
-        }
-
-        return classname;
-    }
-
-    return !after ? (
-        <div className='animate__blank'>
-            {children}
-        </div>
-    ) : (
-        <div className={getAnimateClassName()}>
-            {children}
-        </div>
-    );
+	return ! after ? (
+		<div className={ `${ prefix }__blank` }>{ children }</div>
+	) : (
+		<div className={ getAnimateClassName() }>{ children }</div>
+	);
 };
 
 export default Animate;
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 809b5fb63..deb7bebc5 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -150,7 +150,7 @@ const StepAddress = () => {
 								)}
 							/>
 						</div>
-						<Animate type={"fade-in"} after={ settings }>
+						<Animate type="fade-in" after={ settings }>
 							<div className={'store-address-form'}>
 								<div data-name='country'>
 									<label aria-required>

From c8c0c7f21d1c184b40c2d2e131f2114c59525144 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 13 Jan 2023 20:00:10 +0530
Subject: [PATCH 5/5] Typos Fixed

---
 src/OnboardingSPA/components/Animate/index.js           | 2 +-
 src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/components/Animate/index.js b/src/OnboardingSPA/components/Animate/index.js
index 29b530ab3..fb9b58d18 100644
--- a/src/OnboardingSPA/components/Animate/index.js
+++ b/src/OnboardingSPA/components/Animate/index.js
@@ -9,7 +9,7 @@ const Animate = ( { type, after = true, children } ) => {
 	const prefix = 'animate';
 
 	/**
-	 * Returns the appropriate classNames
+	 * Returns the appropriate className
 	 *
 	 * @return {string | void} ClassName that applies the animations
 	 */
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
index ed5a3e83e..4dd13e3ac 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
@@ -101,7 +101,6 @@
 				width: 100%;
 			}
 		}
-
 	}
 }