From 25ed87bf3637b43373e4f0c4ec78128da7a68ec9 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 28 Oct 2022 12:25:54 +0530
Subject: [PATCH 01/18] Added a POST endpoint for saving Styles

---
 includes/Data/Options.php                     |  1 +
 .../Themes/ThemeVariationsController.php      | 34 ++++++++++++++++++-
 src/OnboardingSPA/utils/api/themes.js         | 10 ++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/includes/Data/Options.php b/includes/Data/Options.php
index 07aa59b0d..73c47d471 100644
--- a/includes/Data/Options.php
+++ b/includes/Data/Options.php
@@ -38,6 +38,7 @@ final class Options {
 		'site_icon'                     => 'site_icon',
 		'show_on_front'                 => 'show_on_front',
 		'page_on_front'                 => 'page_on_front',
+		'custom_theme_styles'           => 'custom_theme_styles',
 	);
 
 	protected static $initialization_options = array(
diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index 5504b1412..801b8260e 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -2,6 +2,7 @@
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
 
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
+use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 
 /**
  * Class ThemeVariationsController
@@ -43,6 +44,11 @@ public function register_routes() {
 					'callback' => array( $this, 'get_theme_variations' ),
 					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 				),
+				array(
+					'methods'  => \WP_REST_Server::EDITABLE,
+					'callback' => array($this, 'set_theme_variation'),
+					'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
+				),
 			)
 		);
 	}
@@ -50,9 +56,14 @@ public function register_routes() {
 	/**
 	 * Retrieves the active themes variations.
 	 *
-	 * @return \WP_REST_Response|\WP_Error
+	 * @return \array|\WP_Error
 	 */
 	public function get_theme_variations( \WP_REST_Request $request ) {
+
+		// If there exists an old Custom Theme then return that
+		if( false !== \get_option(Options::get_option_name('custom_theme_styles')) )
+			return \get_option(Options::get_option_name('custom_theme_styles'));
+
 		$active_variation              = \WP_Theme_JSON_Resolver::get_merged_data( 'theme' )->get_raw_data();
 		$active_variation_global_style = array(
             'title'    => 'Default',
@@ -67,4 +78,25 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 		);
 	}
 
+	/**
+	 * Saves the custom active theme variations.
+	 *
+	 * @return \WP_REST_Response|\WP_Error
+	 */
+	public function set_theme_variation(\WP_REST_Request $request)
+	{
+		// The theme data with the new Colors and Fonts
+		$theme_data = json_decode($request->get_body());
+		
+		if($theme_data){
+			// Save the new Theme style into the db
+			\update_option(Options::get_option_name('custom_theme_styles'), $theme_data);
+		}
+
+		return new \WP_REST_Response(
+			$theme_data,
+			200
+		);
+	}
+
 }
diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index 8c1484e49..f1e20e85e 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -24,6 +24,16 @@ const getGlobalStyles = async () => {
 	);
 };
 
+const setGlobalStyles = async ( data ) => {
+	return await resolve(
+		apiFetch({
+			url: onboardingRestURL('themes/variations'),
+			method: 'POST',
+			data
+		}).then()
+	);
+};
+
 const getThemeStatus = async ( theme ) => {
 	return await resolve(
 		apiFetch( {

From 62b52240c0387fda3600531921958c819c565750 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 28 Oct 2022 12:28:02 +0530
Subject: [PATCH 02/18] Exported setGlobalStyles func

---
 src/OnboardingSPA/utils/api/themes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index f1e20e85e..5b8701fb0 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -52,4 +52,4 @@ const getThemeColors = async (theme) => {
 	);
 };
 
-export { init, getGlobalStyles, getThemeStatus, getThemeColors };
+export { init, getGlobalStyles, setGlobalStyles, getThemeStatus, getThemeColors };

From 5d904e0b43049bd390de31dd5567f9a705757905 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 28 Oct 2022 14:40:13 +0530
Subject: [PATCH 03/18] Checks to use store styles

---
 ..._components_Button_ButtonWhite_index_js.js |  35 +++++
 ...ponents_Button_ButtonWhite_index_js.js.map |   1 +
 ...components_LearnMore_HelpPanel_index_js.js |  30 ++++
 ...onents_LearnMore_HelpPanel_index_js.js.map |   1 +
 ...components_LearnMore_InfoPanel_index_js.js |  71 +++++++++
 ...onents_LearnMore_InfoPanel_index_js.js.map |   1 +
 ...Sidebar_components_LearnMore_Sidebar_js.js | 142 ++++++++++++++++++
 ...bar_components_LearnMore_Sidebar_js.js.map |   1 +
 ...nents_LearnMore_StepIntroPanel_index_js.js |  49 ++++++
 ...s_LearnMore_StepIntroPanel_index_js.js.map |   1 +
 ...mponents_LearnMore_SupportLink_index_js.js |  32 ++++
 ...ents_LearnMore_SupportLink_index_js.js.map |   1 +
 .../Themes/ThemeVariationsController.php      |   4 +-
 .../Drawer/DrawerPanel/DesignColors.js        |   4 +-
 .../pages/Steps/DesignColors/index.js         |   8 +-
 .../pages/Steps/DesignHomepageMenu/index.js   |   7 +-
 16 files changed, 381 insertions(+), 7 deletions(-)
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js
 create mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map

diff --git a/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js
new file mode 100644
index 000000000..32a7ef842
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js
@@ -0,0 +1,35 @@
+"use strict";
+(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Button_ButtonWhite_index_js"],{
+
+/***/ "./src/OnboardingSPA/components/Button/ButtonWhite/index.js":
+/*!******************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Button/ButtonWhite/index.js ***!
+  \******************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
+
+
+
+const ButtonWhite = _ref => {
+  let {
+    className = 'nfd-onboarding-button--white',
+    text,
+    onClick = false
+  } = _ref;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
+    className: className,
+    onClick: typeof onClick === 'function' && onClick
+  }, text);
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (ButtonWhite);
+
+/***/ })
+
+}]);
+//# sourceMappingURL=src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
new file mode 100644
index 000000000..4fec7541c
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"src_OnboardingSPA_components_Button_ButtonWhite_index_js.js","mappings":";;;;;;;;;;;;;;;AAAA;;AAEA,MAAMC,WAAW,GAAG,QAIb;AAAA,MAJe;AACrBC,IAAAA,SAAS,GAAG,8BADS;AAErBC,IAAAA,IAFqB;AAGrBC,IAAAA,OAAO,GAAG;AAHW,GAIf;AACN,SACC,kEAAC,yDAAD;AACC,aAAS,EAAGF,SADb;AAEC,WAAO,EAAG,OAAOE,OAAP,KAAmB,UAAnB,IAAiCA;AAF5C,KAIGD,IAJH,CADD;AAQA,CAbD;;AAeA,+DAAeF,WAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Button/ButtonWhite/index.js"],"sourcesContent":["import { Button } from '@wordpress/components';\n\nconst ButtonWhite = ( {\n\tclassName = 'nfd-onboarding-button--white',\n\ttext,\n\tonClick = false,\n} ) => {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ className }\n\t\t\tonClick={ typeof onClick === 'function' && onClick }\n\t\t>\n\t\t\t{ text }\n\t\t</Button>\n\t);\n};\n\nexport default ButtonWhite;\n"],"names":["Button","ButtonWhite","className","text","onClick"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js
new file mode 100644
index 000000000..e790da0bb
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js
@@ -0,0 +1,30 @@
+"use strict";
+(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js"],{
+
+/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/index.js":
+/*!**************************************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/index.js ***!
+  \**************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+
+
+const HelpPanel = _ref => {
+  let {
+    children,
+    baseClassName = 'nfd-onboarding-sidebar-learn-more--help-panel'
+  } = _ref;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: `${baseClassName}__links`
+  }, children);
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (HelpPanel);
+
+/***/ })
+
+}]);
+//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
new file mode 100644
index 000000000..13d90fdf8
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js","mappings":";;;;;;;;;;;;;;AAAA,MAAMA,SAAS,GAAG,QAGX;AAAA,MAHa;AACnBC,IAAAA,QADmB;AAEnBC,IAAAA,aAAa,GAAG;AAFG,GAGb;AACN,SAAO;AAAK,aAAS,EAAI,GAAGA,aAAe;AAApC,KAAiDD,QAAjD,CAAP;AACA,CALD;;AAOA,+DAAeD,SAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/index.js"],"sourcesContent":["const HelpPanel = ( {\n\tchildren,\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--help-panel',\n} ) => {\n\treturn <div className={ `${ baseClassName }__links` }>{ children }</div>;\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","children","baseClassName"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js
new file mode 100644
index 000000000..8ffcf6cb2
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js
@@ -0,0 +1,71 @@
+"use strict";
+(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js"],{
+
+/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js":
+/*!***************************************************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js ***!
+  \***************************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+
+
+
+const HeadingWithDescription = _ref => {
+  let {
+    heading,
+    description,
+    baseClassName = 'nfd-onboarding-sidebar-learn-more--heading-with-description'
+  } = _ref;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", {
+    className: `${baseClassName}__heading`
+  }, heading), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
+    className: `${baseClassName}__description`
+  }, description));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (HeadingWithDescription);
+
+/***/ }),
+
+/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js":
+/*!**************************************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js ***!
+  \**************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _HeadingWithDescription__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../HeadingWithDescription */ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js");
+
+
+
+
+const InfoPanel = _ref => {
+  let {
+    baseClassName = 'nfd-onboarding-sidebar-learn-more--info-panel',
+    headingWithDescriptions
+  } = _ref;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelBody, {
+    className: baseClassName,
+    initialOpen: true
+  }, headingWithDescriptions.map((headingWithDescription, idx) => {
+    return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_HeadingWithDescription__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      key: idx,
+      heading: headingWithDescription === null || headingWithDescription === void 0 ? void 0 : headingWithDescription.heading,
+      description: headingWithDescription === null || headingWithDescription === void 0 ? void 0 : headingWithDescription.description
+    });
+  }));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (InfoPanel);
+
+/***/ })
+
+}]);
+//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
new file mode 100644
index 000000000..ad7ec4b3b
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js","mappings":";;;;;;;;;;;;;AAAA;;AAEA,MAAMC,sBAAsB,GAAG,QAIxB;AAAA,MAJ0B;AAChCC,IAAAA,OADgC;AAEhCC,IAAAA,WAFgC;AAGhCC,IAAAA,aAAa,GAAG;AAHgB,GAI1B;AACN,SACC,kEAAC,wDAAD,QACC;AAAI,aAAS,EAAI,GAAGA,aAAe;AAAnC,KAAkDF,OAAlD,CADD,EAEC;AAAG,aAAS,EAAI,GAAGE,aAAe;AAAlC,KACGD,WADH,CAFD,CADD;AAQA,CAbD;;AAeA,+DAAeF,sBAAf;;;;;;;;;;;;;;;;;ACjBA;AAEA;;AAEA,MAAMK,SAAS,GAAG,QAGX;AAAA,MAHa;AACnBF,IAAAA,aAAa,GAAG,+CADG;AAEnBG,IAAAA;AAFmB,GAGb;AACN,SACC,kEAAC,4DAAD;AAAW,aAAS,EAAGH,aAAvB;AAAuC,eAAW,EAAG;AAArD,KACGG,uBAAuB,CAACC,GAAxB,CAA6B,CAAEC,sBAAF,EAA0BC,GAA1B,KAAmC;AACjE,WACC,kEAAC,+DAAD;AACC,SAAG,EAAGA,GADP;AAEC,aAAO,EAAGD,sBAAH,aAAGA,sBAAH,uBAAGA,sBAAsB,CAAEP,OAFnC;AAGC,iBAAW,EAAGO,sBAAH,aAAGA,sBAAH,uBAAGA,sBAAsB,CAAEN;AAHvC,MADD;AAOA,GARC,CADH,CADD;AAaA,CAjBD;;AAmBA,+DAAeG,SAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js"],"sourcesContent":["import { Fragment } from '@wordpress/element';\n\nconst HeadingWithDescription = ( {\n\theading,\n\tdescription,\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--heading-with-description',\n} ) => {\n\treturn (\n\t\t<Fragment>\n\t\t\t<h3 className={ `${ baseClassName }__heading` }>{ heading }</h3>\n\t\t\t<p className={ `${ baseClassName }__description` }>\n\t\t\t\t{ description }\n\t\t\t</p>\n\t\t</Fragment>\n\t);\n};\n\nexport default HeadingWithDescription;\n","import { PanelBody } from '@wordpress/components';\n\nimport HeadingWithDescription from '../HeadingWithDescription';\n\nconst InfoPanel = ( {\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--info-panel',\n\theadingWithDescriptions,\n} ) => {\n\treturn (\n\t\t<PanelBody className={ baseClassName } initialOpen={ true }>\n\t\t\t{ headingWithDescriptions.map( ( headingWithDescription, idx ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<HeadingWithDescription\n\t\t\t\t\t\tkey={ idx }\n\t\t\t\t\t\theading={ headingWithDescription?.heading }\n\t\t\t\t\t\tdescription={ headingWithDescription?.description }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</PanelBody>\n\t);\n};\n\nexport default InfoPanel;\n"],"names":["Fragment","HeadingWithDescription","heading","description","baseClassName","PanelBody","InfoPanel","headingWithDescriptions","map","headingWithDescription","idx"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js
new file mode 100644
index 000000000..bb21975c9
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js
@@ -0,0 +1,142 @@
+"use strict";
+(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js"],{
+
+/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js":
+/*!******************************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js ***!
+  \******************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/close-small.js");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../store */ "./src/OnboardingSPA/store/index.js");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../constants */ "./src/constants.js");
+/* harmony import */ var _Skeleton_SidebarSkeleton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Skeleton/SidebarSkeleton */ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js");
+
+
+
+
+
+
+
+
+
+
+const LearnMoreSidebar = () => {
+  var _currentStep$sidebars, _currentStep$sidebars2;
+
+  const {
+    currentStep
+  } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useSelect)(select => {
+    return {
+      currentStep: select(_store__WEBPACK_IMPORTED_MODULE_4__.store).getCurrentStep()
+    };
+  });
+  const {
+    setIsSidebarOpened
+  } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useDispatch)(_store__WEBPACK_IMPORTED_MODULE_4__.store);
+
+  const closeSideBar = () => {
+    setIsSidebarOpened(false);
+  };
+
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Fill, {
+    name: `${_constants__WEBPACK_IMPORTED_MODULE_5__.SIDEBAR_SLOTFILL_PREFIX}/${_constants__WEBPACK_IMPORTED_MODULE_5__.SIDEBAR_LEARN_MORE}`
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelBody, {
+    className: "nfd-onboarding-sidebar-learn-more",
+    initialOpen: true
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
+    fallback: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_Skeleton_SidebarSkeleton__WEBPACK_IMPORTED_MODULE_6__["default"], null)
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, {
+    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Learn More', 'wp-module-onboarding')
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "nfd-onboarding-sidebar-learn-more__header"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
+    className: "nfd-onboarding-sidebar-learn-more__header__icon",
+    onClick: closeSideBar,
+    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"]
+  }))), (currentStep === null || currentStep === void 0 ? void 0 : (_currentStep$sidebars = currentStep.sidebars) === null || _currentStep$sidebars === void 0 ? void 0 : _currentStep$sidebars.LearnMore) && (currentStep === null || currentStep === void 0 ? void 0 : (_currentStep$sidebars2 = currentStep.sidebars) === null || _currentStep$sidebars2 === void 0 ? void 0 : _currentStep$sidebars2.LearnMore.SidebarComponents.map((SidebarComponent, index) => {
+    return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
+      key: index
+    }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SidebarComponent, null));
+  })))));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (LearnMoreSidebar);
+
+/***/ }),
+
+/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js":
+/*!***********************************************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js ***!
+  \***********************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+
+
+/** Skeleton Structure for the SideBar */
+const SidebarSkeleton = () => {
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-header"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-header-top"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-header-top-profile"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-header-top-header"
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-header-below"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-header-below-subheading-1"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-header-below-subheading-2"
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-divider"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-body"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-body-image"
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-divider"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-footer"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-footer-line-1"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-footer-line-2"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-footer-line-3"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-footer-line-4"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer sidebar-skeleton-footer-line-5"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-footer-buttons"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "sidebar-skeleton-footer-buttons-button-1"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer-1 sidebar-skeleton-footer-buttons-button-2"
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "shimmer-1 sidebar-skeleton-footer-buttons-button-3"
+  }))));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (SidebarSkeleton);
+
+/***/ })
+
+}]);
+//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
new file mode 100644
index 000000000..2d0b3ffba
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAIA;;AAEA,MAAMe,gBAAgB,GAAG,MAAM;AAAA;;AAC9B,QAAM;AAAEC,IAAAA;AAAF,MAAkBR,0DAAS,CAAIS,MAAF,IAAc;AAChD,WAAO;AACND,MAAAA,WAAW,EAAEC,MAAM,CAAEN,yCAAF,CAAN,CAA6BO,cAA7B;AADP,KAAP;AAGA,GAJgC,CAAjC;AAMA,QAAM;AAAEC,IAAAA;AAAF,MAAyBZ,4DAAW,CAAEI,yCAAF,CAA1C;;AAEA,QAAMS,YAAY,GAAG,MAAM;AAC1BD,IAAAA,kBAAkB,CAAE,KAAF,CAAlB;AACA,GAFD;;AAGA,SACC,kEAAC,uDAAD;AAAM,QAAI,EAAI,GAAGN,+DAAyB,IAAID,0DAAoB;AAAlE,KACC,kEAAC,4DAAD;AACC,aAAS,EAAC,mCADX;AAEC,eAAW,EAAG;AAFf,KAIC,kEAAC,wDAAD;AAAU,YAAQ,EAAG,kEAAC,iEAAD;AAArB,KACC,kEAAC,8DAAD;AACC,SAAK,EAAGH,mDAAE,CAAE,YAAF,EAAgB,sBAAhB;AADX,KAGC;AAAK,aAAS,EAAC;AAAf,KACC,kEAAC,yDAAD;AACC,aAAS,EAAC,iDADX;AAEC,WAAO,EAAGW,YAFX;AAGC,QAAI,EAAGd,wDAAUA;AAHlB,IADD,CAHD,CADD,EAYG,CAAAU,WAAW,SAAX,IAAAA,WAAW,WAAX,qCAAAA,WAAW,CAAEK,QAAb,gFAAuBC,SAAvB,MACDN,WADC,aACDA,WADC,iDACDA,WAAW,CAAEK,QADZ,2DACD,uBAAuBC,SAAvB,CAAiCC,iBAAjC,CAAmDC,GAAnD,CACC,CAAEC,gBAAF,EAAoBC,KAApB,KAA+B;AAC9B,WACC,kEAAC,wDAAD;AAAU,SAAG,EAAGA;AAAhB,OACC,kEAAC,gBAAD,OADD,CADD;AAKA,GAPF,CADC,CAZH,CAJD,CADD,CADD;AAgCA,CA5CD;;AA8CA,+DAAeX,gBAAf;;;;;;;;;;;;;;;AC3DA;AACA,MAAMD,eAAe,GAAG,MAAM;AAC7B,SACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,EAEC;AAAK,aAAS,EAAC;AAAf,IAFD,CADD,EAKC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,EAEC;AAAK,aAAS,EAAC;AAAf,IAFD,CALD,CADD,EAWC;AAAK,aAAS,EAAC;AAAf,IAXD,EAYC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,CAZD,EAeC;AAAK,aAAS,EAAC;AAAf,IAfD,EAgBC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,EAEC;AAAK,aAAS,EAAC;AAAf,IAFD,EAGC;AAAK,aAAS,EAAC;AAAf,IAHD,EAIC;AAAK,aAAS,EAAC;AAAf,IAJD,EAKC;AAAK,aAAS,EAAC;AAAf,IALD,EAOC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,CADD,EAIC;AAAK,aAAS,EAAC;AAAf,IAJD,CAPD,CAhBD,CADD;AAiCA,CAlCD;;AAoCA,+DAAeA,eAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js"],"sourcesContent":["import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components';\nimport { Fragment, Suspense } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\nimport { store as nfdOnboardingStore } from '../../../../store';\nimport {\n\tSIDEBAR_LEARN_MORE,\n\tSIDEBAR_SLOTFILL_PREFIX,\n} from '../../../../../constants';\nimport SidebarSkeleton from './Skeleton/SidebarSkeleton';\n\nconst LearnMoreSidebar = () => {\n\tconst { currentStep } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tcurrentStep: select( nfdOnboardingStore ).getCurrentStep(),\n\t\t};\n\t} );\n\n\tconst { setIsSidebarOpened } = useDispatch( nfdOnboardingStore );\n\n\tconst closeSideBar = () => {\n\t\tsetIsSidebarOpened( false );\n\t};\n\treturn (\n\t\t<Fill name={ `${ SIDEBAR_SLOTFILL_PREFIX }/${ SIDEBAR_LEARN_MORE }` }>\n\t\t\t<PanelBody\n\t\t\t\tclassName=\"nfd-onboarding-sidebar-learn-more\"\n\t\t\t\tinitialOpen={ true }\n\t\t\t>\n\t\t\t\t<Suspense fallback={ <SidebarSkeleton /> }>\n\t\t\t\t\t<PanelHeader\n\t\t\t\t\t\tlabel={ __( 'Learn More', 'wp-module-onboarding' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"nfd-onboarding-sidebar-learn-more__header\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"nfd-onboarding-sidebar-learn-more__header__icon\"\n\t\t\t\t\t\t\t\tonClick={ closeSideBar }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</PanelHeader>\n\t\t\t\t\t{ currentStep?.sidebars?.LearnMore &&\n\t\t\t\t\t\tcurrentStep?.sidebars?.LearnMore.SidebarComponents.map(\n\t\t\t\t\t\t\t( SidebarComponent, index ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Fragment key={ index }>\n\t\t\t\t\t\t\t\t\t\t<SidebarComponent />\n\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t</Suspense>\n\t\t\t</PanelBody>\n\t\t</Fill>\n\t);\n};\n\nexport default LearnMoreSidebar;\n","/** Skeleton Structure for the SideBar */\nconst SidebarSkeleton = () => {\n\treturn (\n\t\t<div className=\"sidebar-skeleton\">\n\t\t\t<div className=\"sidebar-skeleton-header\">\n\t\t\t\t<div className=\"sidebar-skeleton-header-top\">\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-top-profile\" />\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-top-header\" />\n\t\t\t\t</div>\n\t\t\t\t<div className=\"sidebar-skeleton-header-below\">\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-below-subheading-1\" />\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-below-subheading-2\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"sidebar-skeleton-divider\" />\n\t\t\t<div className=\"sidebar-skeleton-body\">\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-body-image\" />\n\t\t\t</div>\n\t\t\t<div className=\"sidebar-skeleton-divider\" />\n\t\t\t<div className=\"sidebar-skeleton-footer\">\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-1\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-2\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-3\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-4\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-5\" />\n\n\t\t\t\t<div className=\"sidebar-skeleton-footer-buttons\">\n\t\t\t\t\t<div className=\"sidebar-skeleton-footer-buttons-button-1\">\n\t\t\t\t\t\t<div className=\"shimmer-1 sidebar-skeleton-footer-buttons-button-2\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"shimmer-1 sidebar-skeleton-footer-buttons-button-3\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default SidebarSkeleton;\n"],"names":["Fill","PanelBody","PanelHeader","Button","Fragment","Suspense","closeSmall","useDispatch","useSelect","__","store","nfdOnboardingStore","SIDEBAR_LEARN_MORE","SIDEBAR_SLOTFILL_PREFIX","SidebarSkeleton","LearnMoreSidebar","currentStep","select","getCurrentStep","setIsSidebarOpened","closeSideBar","sidebars","LearnMore","SidebarComponents","map","SidebarComponent","index"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js
new file mode 100644
index 000000000..438a242b7
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js
@@ -0,0 +1,49 @@
+"use strict";
+(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js"],{
+
+/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/index.js":
+/*!*******************************************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/index.js ***!
+  \*******************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/icon/index.js");
+
+
+
+
+const StepIntroPanel = _ref => {
+  let {
+    baseClassName = 'nfd-onboarding-sidebar-learn-more--step-intro-panel',
+    heading,
+    subheading,
+    icon
+  } = _ref;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelBody, {
+    className: baseClassName
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: `${baseClassName}__container`
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: `${baseClassName}__container__icon`
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_icons__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    icon: icon
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: `${baseClassName}__container__text`
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
+    className: `${baseClassName}__container__text__heading`
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("strong", null, heading)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
+    className: `${baseClassName}__container__text__subheading`
+  }, subheading)))));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (StepIntroPanel);
+
+/***/ })
+
+}]);
+//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
new file mode 100644
index 000000000..b4c882c65
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js","mappings":";;;;;;;;;;;;;;;;AAAA;AAEA;;AAEA,MAAMG,cAAc,GAAG,QAKhB;AAAA,MALkB;AACxBC,IAAAA,aAAa,GAAG,qDADQ;AAExBC,IAAAA,OAFwB;AAGxBC,IAAAA,UAHwB;AAIxBC,IAAAA;AAJwB,GAKlB;AACN,SACC,kEAAC,4DAAD;AAAW,aAAS,EAAGH;AAAvB,KACC,kEAAC,2DAAD,QACC;AAAK,aAAS,EAAI,GAAGA,aAAe;AAApC,KACC;AAAK,aAAS,EAAI,GAAGA,aAAe;AAApC,KACG,kEAAC,wDAAD;AAAM,QAAI,EAAGG;AAAb,IADH,CADD,EAIC;AAAK,aAAS,EAAI,GAAGH,aAAe;AAApC,KACC;AACC,aAAS,EAAI,GAAGA,aAAe;AADhC,KAGC,kFAAUC,OAAV,CAHD,CADD,EAMC;AACC,aAAS,EAAI,GAAGD,aAAe;AADhC,KAGGE,UAHH,CAND,CAJD,CADD,CADD,CADD;AAuBA,CA7BD;;AA+BA,+DAAeH,cAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/index.js"],"sourcesContent":["import { PanelBody, PanelRow } from '@wordpress/components';\n\nimport { Icon } from '@wordpress/icons';\n\nconst StepIntroPanel = ( {\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--step-intro-panel',\n\theading,\n\tsubheading,\n\ticon,\n} ) => {\n\treturn (\n\t\t<PanelBody className={ baseClassName }>\n\t\t\t<PanelRow>\n\t\t\t\t<div className={ `${ baseClassName }__container` }>\n\t\t\t\t\t<div className={ `${ baseClassName }__container__icon` }>\n\t\t\t\t\t\t{ <Icon icon={ icon } /> }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={ `${ baseClassName }__container__text` }>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__container__text__heading` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<strong>{ heading }</strong>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__container__text__subheading` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ subheading }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</PanelRow>\n\t\t</PanelBody>\n\t);\n};\n\nexport default StepIntroPanel;\n"],"names":["PanelBody","PanelRow","Icon","StepIntroPanel","baseClassName","heading","subheading","icon"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js
new file mode 100644
index 000000000..b791cc064
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js
@@ -0,0 +1,32 @@
+"use strict";
+(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js"],{
+
+/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/index.js":
+/*!****************************************************************************************!*\
+  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/index.js ***!
+  \****************************************************************************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+
+
+const SupportLink = _ref => {
+  let {
+    baseClassName = 'nfd-onboarding-sidebar-learn-more--support-link',
+    link = '#',
+    text
+  } = _ref;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", {
+    href: link,
+    className: baseClassName
+  }, text);
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (SupportLink);
+
+/***/ })
+
+}]);
+//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map
new file mode 100644
index 000000000..0a1d413f1
--- /dev/null
+++ b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js","mappings":";;;;;;;;;;;;;;AAAA,MAAMA,WAAW,GAAG,QAIb;AAAA,MAJe;AACrBC,IAAAA,aAAa,GAAG,iDADK;AAErBC,IAAAA,IAAI,GAAG,GAFc;AAGrBC,IAAAA;AAHqB,GAIf;AACN,SACC;AAAG,QAAI,EAAGD,IAAV;AAAiB,aAAS,EAAGD;AAA7B,KACGE,IADH,CADD;AAKA,CAVD;;AAYA,+DAAeH,WAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/index.js"],"sourcesContent":["const SupportLink = ( {\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--support-link',\n\tlink = '#',\n\ttext,\n} ) => {\n\treturn (\n\t\t<a href={ link } className={ baseClassName }>\n\t\t\t{ text }\n\t\t</a>\n\t);\n};\n\nexport default SupportLink;\n"],"names":["SupportLink","baseClassName","link","text"],"sourceRoot":""}
\ No newline at end of file
diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index 801b8260e..2335beb9f 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -62,7 +62,9 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 
 		// If there exists an old Custom Theme then return that
 		if( false !== \get_option(Options::get_option_name('custom_theme_styles')) )
-			return \get_option(Options::get_option_name('custom_theme_styles'));
+			return array(
+				\get_option(Options::get_option_name('custom_theme_styles'))
+			);
 
 		$active_variation              = \WP_Theme_JSON_Resolver::get_merged_data( 'theme' )->get_raw_data();
 		$active_variation_global_style = array(
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index cf1587994..20f13d2f9 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -152,7 +152,9 @@ const DesignColors = () => {
 		const globalStyles = await getGlobalStyles();
 		setColorPalettes(colorPalettes?.body);
 		let selectedGlobalStyle;
-		if (currentData?.data?.theme?.variation) {
+		if (storedPreviewSettings?.title)
+			selectedGlobalStyle = storedPreviewSettings;
+		else if (currentData?.data?.theme?.variation) {
 			selectedGlobalStyle = globalStyles.body.filter(
 				(globalStyle) =>
 					globalStyle.title === currentData.data.theme.variation
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index 72953ddd3..e29e2f2e0 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -5,13 +5,12 @@ import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../../utils/api/patterns';
-import { getGlobalStyles } from '../../../utils/api/themes';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
 import { VIEW_DESIGN_COLORS } from '../../../../constants';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
+import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
 
 const StepDesignColors = () => {
 	const location = useLocation();
@@ -56,7 +55,9 @@ const StepDesignColors = () => {
 		const pattern = await getPatterns(currentStep.patternId, true);
 		const globalStyles = await getGlobalStyles();
 		let selectedGlobalStyle;
-		if (currentData.data.theme.variation) {
+		if (storedPreviewSettings?.title)
+			selectedGlobalStyle = storedPreviewSettings;
+		else if (currentData.data.theme.variation) {
 			selectedGlobalStyle = globalStyles.body.filter(
 				(globalStyle) =>
 					globalStyle.title === currentData.data.theme.variation
@@ -64,6 +65,7 @@ const StepDesignColors = () => {
 		} else {
 			selectedGlobalStyle = globalStyles.body[0];
 		}
+		setGlobalStyles(selectedGlobalStyle);
 		setPattern(pattern?.body);
 		setIsLoaded(true);
 	};
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
index 08912e579..95244c0c1 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -4,9 +4,9 @@ import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../../utils/api/patterns';
-import { getGlobalStyles } from '../../../utils/api/themes';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
+import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
 import {
 	VIEW_DESIGN_HOMEPAGE_MENU,
 	THEME_STATUS_ACTIVE,
@@ -108,7 +108,9 @@ const StepDesignHomepageMenu = () => {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
 		let selectedGlobalStyle;
-		if ( currentData.data.theme.variation ) {
+		if (storedPreviewSettings?.title)
+			selectedGlobalStyle = storedPreviewSettings;
+		else if ( currentData.data.theme.variation ) {
 			selectedGlobalStyle = globalStyles.body.filter(
 				( globalStyle ) =>
 					globalStyle.title === currentData.data.theme.variation
@@ -116,6 +118,7 @@ const StepDesignHomepageMenu = () => {
 		} else {
 			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
+		setGlobalStyles(selectedGlobalStyle);
 		updatePreviewSettings(
 			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
 		);

From bfac6eea00898a8330e065e34337a1ca91c18163 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 28 Oct 2022 14:51:06 +0530
Subject: [PATCH 04/18] Added option to override and get default value

---
 includes/RestApi/Themes/ThemeVariationsController.php         | 4 +++-
 .../components/Drawer/DrawerPanel/DesignThemeStylesPreview.js | 2 +-
 src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js | 2 +-
 src/OnboardingSPA/utils/api/themes.js                         | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index 2335beb9f..d4b95ea9b 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -60,8 +60,10 @@ public function register_routes() {
 	 */
 	public function get_theme_variations( \WP_REST_Request $request ) {
 
+		$default = $request->get_param('defaultValue');
+
 		// If there exists an old Custom Theme then return that
-		if( false !== \get_option(Options::get_option_name('custom_theme_styles')) )
+		if( !$default && false !== \get_option(Options::get_option_name('custom_theme_styles')) )
 			return array(
 				\get_option(Options::get_option_name('custom_theme_styles'))
 			);
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
index fe817eec7..eaef14371 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
@@ -44,7 +44,7 @@ const DesignThemeStylesPreview = () => {
 		if ( patternResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStylesResponse = await getGlobalStyles();
+		const globalStylesResponse = await getGlobalStyles(true);
 		if ( globalStylesResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
index 621514018..e32cb85f5 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
@@ -75,7 +75,7 @@ const StepDesignThemeStylesMenu = () => {
 		if ( patternsResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStylesResponse = await getGlobalStyles();
+		const globalStylesResponse = await getGlobalStyles(true);
 		if ( globalStylesResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index 5b8701fb0..2420d0a79 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -18,9 +18,9 @@ const init = () => {
 	} );
 };
 
-const getGlobalStyles = async () => {
+const getGlobalStyles = async ( defaultValue = false ) => {
 	return await resolve(
-		apiFetch( { url: onboardingRestURL( 'themes/variations' ) } ).then()
+		apiFetch({ url: onboardingRestURL('themes/variations&defaultValue=' + defaultValue ) } ).then()
 	);
 };
 

From 11dce97bdc3af40016c7aac514a9f129e30b0e8d Mon Sep 17 00:00:00 2001
From: Allen Benny <48691514+officiallygod@users.noreply.github.com>
Date: Fri, 28 Oct 2022 14:53:53 +0530
Subject: [PATCH 05/18] Delete build/0.2.5 directory

---
 ..._components_Button_ButtonWhite_index_js.js |  35 -----
 ...ponents_Button_ButtonWhite_index_js.js.map |   1 -
 ...components_LearnMore_HelpPanel_index_js.js |  30 ----
 ...onents_LearnMore_HelpPanel_index_js.js.map |   1 -
 ...components_LearnMore_InfoPanel_index_js.js |  71 ---------
 ...onents_LearnMore_InfoPanel_index_js.js.map |   1 -
 ...Sidebar_components_LearnMore_Sidebar_js.js | 142 ------------------
 ...bar_components_LearnMore_Sidebar_js.js.map |   1 -
 ...nents_LearnMore_StepIntroPanel_index_js.js |  49 ------
 ...s_LearnMore_StepIntroPanel_index_js.js.map |   1 -
 ...mponents_LearnMore_SupportLink_index_js.js |  32 ----
 ...ents_LearnMore_SupportLink_index_js.js.map |   1 -
 12 files changed, 365 deletions(-)
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js
 delete mode 100644 build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map

diff --git a/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js
deleted file mode 100644
index 32a7ef842..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js
+++ /dev/null
@@ -1,35 +0,0 @@
-"use strict";
-(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Button_ButtonWhite_index_js"],{
-
-/***/ "./src/OnboardingSPA/components/Button/ButtonWhite/index.js":
-/*!******************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Button/ButtonWhite/index.js ***!
-  \******************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
-
-
-
-const ButtonWhite = _ref => {
-  let {
-    className = 'nfd-onboarding-button--white',
-    text,
-    onClick = false
-  } = _ref;
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
-    className: className,
-    onClick: typeof onClick === 'function' && onClick
-  }, text);
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (ButtonWhite);
-
-/***/ })
-
-}]);
-//# sourceMappingURL=src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
deleted file mode 100644
index 4fec7541c..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Button_ButtonWhite_index_js.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"src_OnboardingSPA_components_Button_ButtonWhite_index_js.js","mappings":";;;;;;;;;;;;;;;AAAA;;AAEA,MAAMC,WAAW,GAAG,QAIb;AAAA,MAJe;AACrBC,IAAAA,SAAS,GAAG,8BADS;AAErBC,IAAAA,IAFqB;AAGrBC,IAAAA,OAAO,GAAG;AAHW,GAIf;AACN,SACC,kEAAC,yDAAD;AACC,aAAS,EAAGF,SADb;AAEC,WAAO,EAAG,OAAOE,OAAP,KAAmB,UAAnB,IAAiCA;AAF5C,KAIGD,IAJH,CADD;AAQA,CAbD;;AAeA,+DAAeF,WAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Button/ButtonWhite/index.js"],"sourcesContent":["import { Button } from '@wordpress/components';\n\nconst ButtonWhite = ( {\n\tclassName = 'nfd-onboarding-button--white',\n\ttext,\n\tonClick = false,\n} ) => {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ className }\n\t\t\tonClick={ typeof onClick === 'function' && onClick }\n\t\t>\n\t\t\t{ text }\n\t\t</Button>\n\t);\n};\n\nexport default ButtonWhite;\n"],"names":["Button","ButtonWhite","className","text","onClick"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js
deleted file mode 100644
index e790da0bb..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js
+++ /dev/null
@@ -1,30 +0,0 @@
-"use strict";
-(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js"],{
-
-/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/index.js":
-/*!**************************************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/index.js ***!
-  \**************************************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-
-
-const HelpPanel = _ref => {
-  let {
-    children,
-    baseClassName = 'nfd-onboarding-sidebar-learn-more--help-panel'
-  } = _ref;
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: `${baseClassName}__links`
-  }, children);
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (HelpPanel);
-
-/***/ })
-
-}]);
-//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
deleted file mode 100644
index 13d90fdf8..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_HelpPanel_index_js.js","mappings":";;;;;;;;;;;;;;AAAA,MAAMA,SAAS,GAAG,QAGX;AAAA,MAHa;AACnBC,IAAAA,QADmB;AAEnBC,IAAAA,aAAa,GAAG;AAFG,GAGb;AACN,SAAO;AAAK,aAAS,EAAI,GAAGA,aAAe;AAApC,KAAiDD,QAAjD,CAAP;AACA,CALD;;AAOA,+DAAeD,SAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/HelpPanel/index.js"],"sourcesContent":["const HelpPanel = ( {\n\tchildren,\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--help-panel',\n} ) => {\n\treturn <div className={ `${ baseClassName }__links` }>{ children }</div>;\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","children","baseClassName"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js
deleted file mode 100644
index 8ffcf6cb2..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js
+++ /dev/null
@@ -1,71 +0,0 @@
-"use strict";
-(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js"],{
-
-/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js":
-/*!***************************************************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js ***!
-  \***************************************************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-
-
-
-const HeadingWithDescription = _ref => {
-  let {
-    heading,
-    description,
-    baseClassName = 'nfd-onboarding-sidebar-learn-more--heading-with-description'
-  } = _ref;
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", {
-    className: `${baseClassName}__heading`
-  }, heading), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
-    className: `${baseClassName}__description`
-  }, description));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (HeadingWithDescription);
-
-/***/ }),
-
-/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js":
-/*!**************************************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js ***!
-  \**************************************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _HeadingWithDescription__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../HeadingWithDescription */ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js");
-
-
-
-
-const InfoPanel = _ref => {
-  let {
-    baseClassName = 'nfd-onboarding-sidebar-learn-more--info-panel',
-    headingWithDescriptions
-  } = _ref;
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelBody, {
-    className: baseClassName,
-    initialOpen: true
-  }, headingWithDescriptions.map((headingWithDescription, idx) => {
-    return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_HeadingWithDescription__WEBPACK_IMPORTED_MODULE_2__["default"], {
-      key: idx,
-      heading: headingWithDescription === null || headingWithDescription === void 0 ? void 0 : headingWithDescription.heading,
-      description: headingWithDescription === null || headingWithDescription === void 0 ? void 0 : headingWithDescription.description
-    });
-  }));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (InfoPanel);
-
-/***/ })
-
-}]);
-//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
deleted file mode 100644
index ad7ec4b3b..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_InfoPanel_index_js.js","mappings":";;;;;;;;;;;;;AAAA;;AAEA,MAAMC,sBAAsB,GAAG,QAIxB;AAAA,MAJ0B;AAChCC,IAAAA,OADgC;AAEhCC,IAAAA,WAFgC;AAGhCC,IAAAA,aAAa,GAAG;AAHgB,GAI1B;AACN,SACC,kEAAC,wDAAD,QACC;AAAI,aAAS,EAAI,GAAGA,aAAe;AAAnC,KAAkDF,OAAlD,CADD,EAEC;AAAG,aAAS,EAAI,GAAGE,aAAe;AAAlC,KACGD,WADH,CAFD,CADD;AAQA,CAbD;;AAeA,+DAAeF,sBAAf;;;;;;;;;;;;;;;;;ACjBA;AAEA;;AAEA,MAAMK,SAAS,GAAG,QAGX;AAAA,MAHa;AACnBF,IAAAA,aAAa,GAAG,+CADG;AAEnBG,IAAAA;AAFmB,GAGb;AACN,SACC,kEAAC,4DAAD;AAAW,aAAS,EAAGH,aAAvB;AAAuC,eAAW,EAAG;AAArD,KACGG,uBAAuB,CAACC,GAAxB,CAA6B,CAAEC,sBAAF,EAA0BC,GAA1B,KAAmC;AACjE,WACC,kEAAC,+DAAD;AACC,SAAG,EAAGA,GADP;AAEC,aAAO,EAAGD,sBAAH,aAAGA,sBAAH,uBAAGA,sBAAsB,CAAEP,OAFnC;AAGC,iBAAW,EAAGO,sBAAH,aAAGA,sBAAH,uBAAGA,sBAAsB,CAAEN;AAHvC,MADD;AAOA,GARC,CADH,CADD;AAaA,CAjBD;;AAmBA,+DAAeG,SAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/index.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/InfoPanel/index.js"],"sourcesContent":["import { Fragment } from '@wordpress/element';\n\nconst HeadingWithDescription = ( {\n\theading,\n\tdescription,\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--heading-with-description',\n} ) => {\n\treturn (\n\t\t<Fragment>\n\t\t\t<h3 className={ `${ baseClassName }__heading` }>{ heading }</h3>\n\t\t\t<p className={ `${ baseClassName }__description` }>\n\t\t\t\t{ description }\n\t\t\t</p>\n\t\t</Fragment>\n\t);\n};\n\nexport default HeadingWithDescription;\n","import { PanelBody } from '@wordpress/components';\n\nimport HeadingWithDescription from '../HeadingWithDescription';\n\nconst InfoPanel = ( {\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--info-panel',\n\theadingWithDescriptions,\n} ) => {\n\treturn (\n\t\t<PanelBody className={ baseClassName } initialOpen={ true }>\n\t\t\t{ headingWithDescriptions.map( ( headingWithDescription, idx ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<HeadingWithDescription\n\t\t\t\t\t\tkey={ idx }\n\t\t\t\t\t\theading={ headingWithDescription?.heading }\n\t\t\t\t\t\tdescription={ headingWithDescription?.description }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</PanelBody>\n\t);\n};\n\nexport default InfoPanel;\n"],"names":["Fragment","HeadingWithDescription","heading","description","baseClassName","PanelBody","InfoPanel","headingWithDescriptions","map","headingWithDescription","idx"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js
deleted file mode 100644
index bb21975c9..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js
+++ /dev/null
@@ -1,142 +0,0 @@
-"use strict";
-(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js"],{
-
-/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js":
-/*!******************************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js ***!
-  \******************************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/close-small.js");
-/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
-/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../store */ "./src/OnboardingSPA/store/index.js");
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../constants */ "./src/constants.js");
-/* harmony import */ var _Skeleton_SidebarSkeleton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Skeleton/SidebarSkeleton */ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js");
-
-
-
-
-
-
-
-
-
-
-const LearnMoreSidebar = () => {
-  var _currentStep$sidebars, _currentStep$sidebars2;
-
-  const {
-    currentStep
-  } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useSelect)(select => {
-    return {
-      currentStep: select(_store__WEBPACK_IMPORTED_MODULE_4__.store).getCurrentStep()
-    };
-  });
-  const {
-    setIsSidebarOpened
-  } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useDispatch)(_store__WEBPACK_IMPORTED_MODULE_4__.store);
-
-  const closeSideBar = () => {
-    setIsSidebarOpened(false);
-  };
-
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Fill, {
-    name: `${_constants__WEBPACK_IMPORTED_MODULE_5__.SIDEBAR_SLOTFILL_PREFIX}/${_constants__WEBPACK_IMPORTED_MODULE_5__.SIDEBAR_LEARN_MORE}`
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelBody, {
-    className: "nfd-onboarding-sidebar-learn-more",
-    initialOpen: true
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
-    fallback: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_Skeleton_SidebarSkeleton__WEBPACK_IMPORTED_MODULE_6__["default"], null)
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, {
-    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Learn More', 'wp-module-onboarding')
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "nfd-onboarding-sidebar-learn-more__header"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Button, {
-    className: "nfd-onboarding-sidebar-learn-more__header__icon",
-    onClick: closeSideBar,
-    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"]
-  }))), (currentStep === null || currentStep === void 0 ? void 0 : (_currentStep$sidebars = currentStep.sidebars) === null || _currentStep$sidebars === void 0 ? void 0 : _currentStep$sidebars.LearnMore) && (currentStep === null || currentStep === void 0 ? void 0 : (_currentStep$sidebars2 = currentStep.sidebars) === null || _currentStep$sidebars2 === void 0 ? void 0 : _currentStep$sidebars2.LearnMore.SidebarComponents.map((SidebarComponent, index) => {
-    return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-      key: index
-    }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SidebarComponent, null));
-  })))));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (LearnMoreSidebar);
-
-/***/ }),
-
-/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js":
-/*!***********************************************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js ***!
-  \***********************************************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-
-
-/** Skeleton Structure for the SideBar */
-const SidebarSkeleton = () => {
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-header"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-header-top"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-header-top-profile"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-header-top-header"
-  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-header-below"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-header-below-subheading-1"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-header-below-subheading-2"
-  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-divider"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-body"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-body-image"
-  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-divider"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-footer"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-footer-line-1"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-footer-line-2"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-footer-line-3"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-footer-line-4"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer sidebar-skeleton-footer-line-5"
-  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-footer-buttons"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "sidebar-skeleton-footer-buttons-button-1"
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer-1 sidebar-skeleton-footer-buttons-button-2"
-  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: "shimmer-1 sidebar-skeleton-footer-buttons-button-3"
-  }))));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (SidebarSkeleton);
-
-/***/ })
-
-}]);
-//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
deleted file mode 100644
index 2d0b3ffba..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_Sidebar_js.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAIA;;AAEA,MAAMe,gBAAgB,GAAG,MAAM;AAAA;;AAC9B,QAAM;AAAEC,IAAAA;AAAF,MAAkBR,0DAAS,CAAIS,MAAF,IAAc;AAChD,WAAO;AACND,MAAAA,WAAW,EAAEC,MAAM,CAAEN,yCAAF,CAAN,CAA6BO,cAA7B;AADP,KAAP;AAGA,GAJgC,CAAjC;AAMA,QAAM;AAAEC,IAAAA;AAAF,MAAyBZ,4DAAW,CAAEI,yCAAF,CAA1C;;AAEA,QAAMS,YAAY,GAAG,MAAM;AAC1BD,IAAAA,kBAAkB,CAAE,KAAF,CAAlB;AACA,GAFD;;AAGA,SACC,kEAAC,uDAAD;AAAM,QAAI,EAAI,GAAGN,+DAAyB,IAAID,0DAAoB;AAAlE,KACC,kEAAC,4DAAD;AACC,aAAS,EAAC,mCADX;AAEC,eAAW,EAAG;AAFf,KAIC,kEAAC,wDAAD;AAAU,YAAQ,EAAG,kEAAC,iEAAD;AAArB,KACC,kEAAC,8DAAD;AACC,SAAK,EAAGH,mDAAE,CAAE,YAAF,EAAgB,sBAAhB;AADX,KAGC;AAAK,aAAS,EAAC;AAAf,KACC,kEAAC,yDAAD;AACC,aAAS,EAAC,iDADX;AAEC,WAAO,EAAGW,YAFX;AAGC,QAAI,EAAGd,wDAAUA;AAHlB,IADD,CAHD,CADD,EAYG,CAAAU,WAAW,SAAX,IAAAA,WAAW,WAAX,qCAAAA,WAAW,CAAEK,QAAb,gFAAuBC,SAAvB,MACDN,WADC,aACDA,WADC,iDACDA,WAAW,CAAEK,QADZ,2DACD,uBAAuBC,SAAvB,CAAiCC,iBAAjC,CAAmDC,GAAnD,CACC,CAAEC,gBAAF,EAAoBC,KAApB,KAA+B;AAC9B,WACC,kEAAC,wDAAD;AAAU,SAAG,EAAGA;AAAhB,OACC,kEAAC,gBAAD,OADD,CADD;AAKA,GAPF,CADC,CAZH,CAJD,CADD,CADD;AAgCA,CA5CD;;AA8CA,+DAAeX,gBAAf;;;;;;;;;;;;;;;AC3DA;AACA,MAAMD,eAAe,GAAG,MAAM;AAC7B,SACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,EAEC;AAAK,aAAS,EAAC;AAAf,IAFD,CADD,EAKC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,EAEC;AAAK,aAAS,EAAC;AAAf,IAFD,CALD,CADD,EAWC;AAAK,aAAS,EAAC;AAAf,IAXD,EAYC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,CAZD,EAeC;AAAK,aAAS,EAAC;AAAf,IAfD,EAgBC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,EAEC;AAAK,aAAS,EAAC;AAAf,IAFD,EAGC;AAAK,aAAS,EAAC;AAAf,IAHD,EAIC;AAAK,aAAS,EAAC;AAAf,IAJD,EAKC;AAAK,aAAS,EAAC;AAAf,IALD,EAOC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAK,aAAS,EAAC;AAAf,IADD,CADD,EAIC;AAAK,aAAS,EAAC;AAAf,IAJD,CAPD,CAhBD,CADD;AAiCA,CAlCD;;AAoCA,+DAAeA,eAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js"],"sourcesContent":["import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components';\nimport { Fragment, Suspense } from '@wordpress/element';\nimport { closeSmall } from '@wordpress/icons';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\nimport { store as nfdOnboardingStore } from '../../../../store';\nimport {\n\tSIDEBAR_LEARN_MORE,\n\tSIDEBAR_SLOTFILL_PREFIX,\n} from '../../../../../constants';\nimport SidebarSkeleton from './Skeleton/SidebarSkeleton';\n\nconst LearnMoreSidebar = () => {\n\tconst { currentStep } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tcurrentStep: select( nfdOnboardingStore ).getCurrentStep(),\n\t\t};\n\t} );\n\n\tconst { setIsSidebarOpened } = useDispatch( nfdOnboardingStore );\n\n\tconst closeSideBar = () => {\n\t\tsetIsSidebarOpened( false );\n\t};\n\treturn (\n\t\t<Fill name={ `${ SIDEBAR_SLOTFILL_PREFIX }/${ SIDEBAR_LEARN_MORE }` }>\n\t\t\t<PanelBody\n\t\t\t\tclassName=\"nfd-onboarding-sidebar-learn-more\"\n\t\t\t\tinitialOpen={ true }\n\t\t\t>\n\t\t\t\t<Suspense fallback={ <SidebarSkeleton /> }>\n\t\t\t\t\t<PanelHeader\n\t\t\t\t\t\tlabel={ __( 'Learn More', 'wp-module-onboarding' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"nfd-onboarding-sidebar-learn-more__header\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"nfd-onboarding-sidebar-learn-more__header__icon\"\n\t\t\t\t\t\t\t\tonClick={ closeSideBar }\n\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</PanelHeader>\n\t\t\t\t\t{ currentStep?.sidebars?.LearnMore &&\n\t\t\t\t\t\tcurrentStep?.sidebars?.LearnMore.SidebarComponents.map(\n\t\t\t\t\t\t\t( SidebarComponent, index ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Fragment key={ index }>\n\t\t\t\t\t\t\t\t\t\t<SidebarComponent />\n\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t</Suspense>\n\t\t\t</PanelBody>\n\t\t</Fill>\n\t);\n};\n\nexport default LearnMoreSidebar;\n","/** Skeleton Structure for the SideBar */\nconst SidebarSkeleton = () => {\n\treturn (\n\t\t<div className=\"sidebar-skeleton\">\n\t\t\t<div className=\"sidebar-skeleton-header\">\n\t\t\t\t<div className=\"sidebar-skeleton-header-top\">\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-top-profile\" />\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-top-header\" />\n\t\t\t\t</div>\n\t\t\t\t<div className=\"sidebar-skeleton-header-below\">\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-below-subheading-1\" />\n\t\t\t\t\t<div className=\"shimmer sidebar-skeleton-header-below-subheading-2\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"sidebar-skeleton-divider\" />\n\t\t\t<div className=\"sidebar-skeleton-body\">\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-body-image\" />\n\t\t\t</div>\n\t\t\t<div className=\"sidebar-skeleton-divider\" />\n\t\t\t<div className=\"sidebar-skeleton-footer\">\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-1\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-2\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-3\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-4\" />\n\t\t\t\t<div className=\"shimmer sidebar-skeleton-footer-line-5\" />\n\n\t\t\t\t<div className=\"sidebar-skeleton-footer-buttons\">\n\t\t\t\t\t<div className=\"sidebar-skeleton-footer-buttons-button-1\">\n\t\t\t\t\t\t<div className=\"shimmer-1 sidebar-skeleton-footer-buttons-button-2\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"shimmer-1 sidebar-skeleton-footer-buttons-button-3\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default SidebarSkeleton;\n"],"names":["Fill","PanelBody","PanelHeader","Button","Fragment","Suspense","closeSmall","useDispatch","useSelect","__","store","nfdOnboardingStore","SIDEBAR_LEARN_MORE","SIDEBAR_SLOTFILL_PREFIX","SidebarSkeleton","LearnMoreSidebar","currentStep","select","getCurrentStep","setIsSidebarOpened","closeSideBar","sidebars","LearnMore","SidebarComponents","map","SidebarComponent","index"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js
deleted file mode 100644
index 438a242b7..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js
+++ /dev/null
@@ -1,49 +0,0 @@
-"use strict";
-(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js"],{
-
-/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/index.js":
-/*!*******************************************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/index.js ***!
-  \*******************************************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/icon/index.js");
-
-
-
-
-const StepIntroPanel = _ref => {
-  let {
-    baseClassName = 'nfd-onboarding-sidebar-learn-more--step-intro-panel',
-    heading,
-    subheading,
-    icon
-  } = _ref;
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelBody, {
-    className: baseClassName
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: `${baseClassName}__container`
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: `${baseClassName}__container__icon`
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_icons__WEBPACK_IMPORTED_MODULE_2__["default"], {
-    icon: icon
-  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
-    className: `${baseClassName}__container__text`
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
-    className: `${baseClassName}__container__text__heading`
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("strong", null, heading)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
-    className: `${baseClassName}__container__text__subheading`
-  }, subheading)))));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (StepIntroPanel);
-
-/***/ })
-
-}]);
-//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
deleted file mode 100644
index b4c882c65..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_StepIntroPanel_index_js.js","mappings":";;;;;;;;;;;;;;;;AAAA;AAEA;;AAEA,MAAMG,cAAc,GAAG,QAKhB;AAAA,MALkB;AACxBC,IAAAA,aAAa,GAAG,qDADQ;AAExBC,IAAAA,OAFwB;AAGxBC,IAAAA,UAHwB;AAIxBC,IAAAA;AAJwB,GAKlB;AACN,SACC,kEAAC,4DAAD;AAAW,aAAS,EAAGH;AAAvB,KACC,kEAAC,2DAAD,QACC;AAAK,aAAS,EAAI,GAAGA,aAAe;AAApC,KACC;AAAK,aAAS,EAAI,GAAGA,aAAe;AAApC,KACG,kEAAC,wDAAD;AAAM,QAAI,EAAGG;AAAb,IADH,CADD,EAIC;AAAK,aAAS,EAAI,GAAGH,aAAe;AAApC,KACC;AACC,aAAS,EAAI,GAAGA,aAAe;AADhC,KAGC,kFAAUC,OAAV,CAHD,CADD,EAMC;AACC,aAAS,EAAI,GAAGD,aAAe;AADhC,KAGGE,UAHH,CAND,CAJD,CADD,CADD,CADD;AAuBA,CA7BD;;AA+BA,+DAAeH,cAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/StepIntroPanel/index.js"],"sourcesContent":["import { PanelBody, PanelRow } from '@wordpress/components';\n\nimport { Icon } from '@wordpress/icons';\n\nconst StepIntroPanel = ( {\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--step-intro-panel',\n\theading,\n\tsubheading,\n\ticon,\n} ) => {\n\treturn (\n\t\t<PanelBody className={ baseClassName }>\n\t\t\t<PanelRow>\n\t\t\t\t<div className={ `${ baseClassName }__container` }>\n\t\t\t\t\t<div className={ `${ baseClassName }__container__icon` }>\n\t\t\t\t\t\t{ <Icon icon={ icon } /> }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={ `${ baseClassName }__container__text` }>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__container__text__heading` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<strong>{ heading }</strong>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={ `${ baseClassName }__container__text__subheading` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ subheading }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</PanelRow>\n\t\t</PanelBody>\n\t);\n};\n\nexport default StepIntroPanel;\n"],"names":["PanelBody","PanelRow","Icon","StepIntroPanel","baseClassName","heading","subheading","icon"],"sourceRoot":""}
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js
deleted file mode 100644
index b791cc064..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js
+++ /dev/null
@@ -1,32 +0,0 @@
-"use strict";
-(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js"],{
-
-/***/ "./src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/index.js":
-/*!****************************************************************************************!*\
-  !*** ./src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/index.js ***!
-  \****************************************************************************************/
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-
-
-const SupportLink = _ref => {
-  let {
-    baseClassName = 'nfd-onboarding-sidebar-learn-more--support-link',
-    link = '#',
-    text
-  } = _ref;
-  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", {
-    href: link,
-    className: baseClassName
-  }, text);
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (SupportLink);
-
-/***/ })
-
-}]);
-//# sourceMappingURL=src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map
\ No newline at end of file
diff --git a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map b/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map
deleted file mode 100644
index 0a1d413f1..000000000
--- a/build/0.2.5/src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"src_OnboardingSPA_components_Sidebar_components_LearnMore_SupportLink_index_js.js","mappings":";;;;;;;;;;;;;;AAAA,MAAMA,WAAW,GAAG,QAIb;AAAA,MAJe;AACrBC,IAAAA,aAAa,GAAG,iDADK;AAErBC,IAAAA,IAAI,GAAG,GAFc;AAGrBC,IAAAA;AAHqB,GAIf;AACN,SACC;AAAG,QAAI,EAAGD,IAAV;AAAiB,aAAS,EAAGD;AAA7B,KACGE,IADH,CADD;AAKA,CAVD;;AAYA,+DAAeH,WAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/Sidebar/components/LearnMore/SupportLink/index.js"],"sourcesContent":["const SupportLink = ( {\n\tbaseClassName = 'nfd-onboarding-sidebar-learn-more--support-link',\n\tlink = '#',\n\ttext,\n} ) => {\n\treturn (\n\t\t<a href={ link } className={ baseClassName }>\n\t\t\t{ text }\n\t\t</a>\n\t);\n};\n\nexport default SupportLink;\n"],"names":["SupportLink","baseClassName","link","text"],"sourceRoot":""}
\ No newline at end of file

From 54a9979854481cebdf64c9e5d87f6b310c16e87b Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 14 Nov 2022 16:54:53 +0530
Subject: [PATCH 06/18] Added Common Component to Colors

---
 .../Themes/ThemeVariationsController.php      |  6 +-
 .../Drawer/DrawerPanel/DesignColors.js        | 48 +++++--------
 .../components/GlobalStyleParent/index.js     | 69 +++++++++++++++++++
 .../pages/Steps/DesignColors/index.js         | 60 ++++++----------
 4 files changed, 111 insertions(+), 72 deletions(-)
 create mode 100644 src/OnboardingSPA/components/GlobalStyleParent/index.js

diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index d4b95ea9b..0270e6f6f 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -63,10 +63,12 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 		$default = $request->get_param('defaultValue');
 
 		// If there exists an old Custom Theme then return that
-		if( !$default && false !== \get_option(Options::get_option_name('custom_theme_styles')) )
+		if( 'false' === $default && false !== \get_option(Options::get_option_name('custom_theme_styles')) )
+		{
 			return array(
 				\get_option(Options::get_option_name('custom_theme_styles'))
 			);
+		}
 
 		$active_variation              = \WP_Theme_JSON_Resolver::get_merged_data( 'theme' )->get_raw_data();
 		$active_variation_global_style = array(
@@ -90,7 +92,7 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 	public function set_theme_variation(\WP_REST_Request $request)
 	{
 		// The theme data with the new Colors and Fonts
-		$theme_data = json_decode($request->get_body());
+		$theme_data = json_decode($request->get_body(), true);
 		
 		if($theme_data){
 			// Save the new Theme style into the db
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index 20f13d2f9..063d79b3e 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -4,13 +4,13 @@ import { useState, useEffect } from '@wordpress/element';
 import { Popover, ColorPicker } from '@wordpress/components';
 
 import { store as nfdOnboardingStore } from '../../../store';
-import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
+import { getGlobalStyles, getThemeColors, setGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
+import GlobalStyleParent from '../../GlobalStyleParent';
 
 const DesignColors = () => {
 
 	const [isLoaded, setIsLoaded] = useState(false);
-	const [globalStyles, setGlobalStyles] = useState();
 	const [selectedColors, setSelectedColors] = useState();
 	const [showColorPicker, setShowColorPicker] = useState(false);
 	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
@@ -69,7 +69,7 @@ const DesignColors = () => {
 		}
 	}
 
-	async function saveThemeColorPalette(colorStyle, colorPalettesTemp = colorPalettes, selectedColorsLocalTemp = selectedColors, globalStylesTemp = globalStyles) {
+	async function saveThemeColorPalette(colorStyle, colorPalettesTemp = colorPalettes, selectedColorsLocalTemp = selectedColors, globalStylesTemp = storedPreviewSettings) {
 		const isCustomStyle = colorStyle === 'custom';
 		let selectedGlobalStyle = globalStylesTemp;
 		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
@@ -104,7 +104,6 @@ const DesignColors = () => {
 			}
 
 			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
-			setGlobalStyles(selectedGlobalStyle);
 			updatePreviewSettings(
 				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
 			);
@@ -114,7 +113,7 @@ const DesignColors = () => {
 	}
 
 	async function saveCustomColors() {
-		let selectedGlobalStyle = globalStyles;
+		let selectedGlobalStyle = storedPreviewSettings;
 		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
 
 		if (selectedThemeColorPalette) {
@@ -140,7 +139,6 @@ const DesignColors = () => {
 			}
 
 			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
-			setGlobalStyles(selectedGlobalStyle);
 			updatePreviewSettings(
 				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
 			);
@@ -149,20 +147,7 @@ const DesignColors = () => {
 
 	const getColorStylesAndPatterns = async () => {
 		const colorPalettes = await getThemeColors();
-		const globalStyles = await getGlobalStyles();
 		setColorPalettes(colorPalettes?.body);
-		let selectedGlobalStyle;
-		if (storedPreviewSettings?.title)
-			selectedGlobalStyle = storedPreviewSettings;
-		else if (currentData?.data?.theme?.variation) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				(globalStyle) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[0];
-		} else {
-			selectedGlobalStyle = globalStyles.body[0];
-		}
-		setGlobalStyles(selectedGlobalStyle);
 		let selectedColors;
 		let selectedColorsLocal;
 		if (!currentData?.data?.palette?.slug === '') {
@@ -180,7 +165,7 @@ const DesignColors = () => {
 			}
 		} 
 		setSelectedColors(selectedColors);
-		saveThemeColorPalette(currentData?.data?.palette['slug'], colorPalettes?.body, selectedColorsLocal, selectedGlobalStyle);
+		saveThemeColorPalette(currentData?.data?.palette['slug'], colorPalettes?.body, selectedColorsLocal, storedPreviewSettings);
 		setIsLoaded(true);
 
 	};
@@ -231,7 +216,6 @@ const DesignColors = () => {
 		} else {
 			selectedGlobalStyle = globalStyles.body[0];
 		}
-		setGlobalStyles(selectedGlobalStyle);
 		updatePreviewSettings(
 			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
 		);
@@ -333,16 +317,18 @@ const DesignColors = () => {
 	}
 
 	return (
-		<div className='theme-colors--drawer'>
-			<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
-			{/* {selectedColors?.slug && 
-				<div className='theme-colors--drawer--reset' onClick={resetColors}>
-					<div>Reset Button</div>
-				</div>
-			} */}
-			{ colorPalettes && buildPalettes() }
-			{ colorPalettes && buildCustomPalette() }
-		</div>
+		<GlobalStyleParent>
+			<div className='theme-colors--drawer'>
+				<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
+				{/* {selectedColors?.slug && 
+					<div className='theme-colors--drawer--reset' onClick={resetColors}>
+						<div>Reset Button</div>
+					</div>
+				} */}
+				{ colorPalettes && buildPalettes() }
+				{ colorPalettes && buildCustomPalette() }
+			</div>
+		</GlobalStyleParent>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/GlobalStyleParent/index.js b/src/OnboardingSPA/components/GlobalStyleParent/index.js
new file mode 100644
index 000000000..7c866b465
--- /dev/null
+++ b/src/OnboardingSPA/components/GlobalStyleParent/index.js
@@ -0,0 +1,69 @@
+import { useSelect, useDispatch } from '@wordpress/data'; 
+import { useState, useEffect } from '@wordpress/element'; 
+
+import { store as nfdOnboardingStore } from '../../store';
+import { getGlobalStyles, setGlobalStyles } from '../../utils/api/themes';
+import { useGlobalStylesOutput } from '../../utils/global-styles/use-global-styles-output';
+
+/**
+ * Global Style Parent Component
+ * The Fetching of Global Style Object from either store or API is 
+ * common to a lot many places and this component does the trick import { useState, useEffect } from '@wordpress/element';for us.
+ *
+ * @returns Global Style Parent
+ */
+
+const GlobalStyleParent = ({ children }) => {
+
+    const [isLoaded, setIsLoaded] = useState(false);
+
+    const {
+        currentData,
+        storedPreviewSettings,
+    } = useSelect((select) => {
+        return {
+            currentData:
+                select(nfdOnboardingStore).getCurrentOnboardingData(),
+            storedPreviewSettings:
+                select(nfdOnboardingStore).getPreviewSettings(),
+        };
+    }, []);
+
+    const { updatePreviewSettings } =
+        useDispatch(nfdOnboardingStore);
+
+    const getStylesAndPatterns = async () => {
+        const globalStyles = await getGlobalStyles();
+        let selectedGlobalStyle;
+        if (storedPreviewSettings?.title)
+            selectedGlobalStyle = storedPreviewSettings;
+        else if (currentData.data.theme.variation) {
+            selectedGlobalStyle = globalStyles.body.filter(
+                (globalStyle) =>
+                    globalStyle.title === currentData.data.theme.variation
+            )[0];
+        } else {
+            selectedGlobalStyle = globalStyles.body[0];
+        }
+        
+        setGlobalStyles({
+            ...selectedGlobalStyle,
+            'title': currentData.data.theme.variation,
+            'version': 2
+        });
+        updatePreviewSettings(
+            useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+        );
+        setIsLoaded(true);
+    };
+
+    useEffect(() => {
+        if (!isLoaded) getStylesAndPatterns();
+    }, [isLoaded]);
+
+    return (
+        children
+    );
+};
+
+export default GlobalStyleParent;
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index e29e2f2e0..cbba82990 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -9,6 +9,7 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
 import { VIEW_DESIGN_COLORS } from '../../../../constants';
+import GlobalStyleParent from '../../../components/GlobalStyleParent';
 import { DesignStateHandler } from '../../../components/StateHandlers';
 import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
 
@@ -20,17 +21,11 @@ const StepDesignColors = () => {
 	const isLargeViewport = useViewportMatch('medium');
 	const {
 		currentStep,
-		currentData,
-		storedPreviewSettings,
 	} = useSelect((select) => {
 		return {
 			currentStep: select(nfdOnboardingStore).getStepFromPath(
 				location.pathname
-			),
-			currentData:
-				select(nfdOnboardingStore).getCurrentOnboardingData(),
-			storedPreviewSettings:
-				select(nfdOnboardingStore).getPreviewSettings(),
+			)
 		};
 	}, []);
 
@@ -39,7 +34,6 @@ const StepDesignColors = () => {
 		setIsDrawerOpened,
 		setIsSidebarOpened,
 		setIsDrawerSuppressed,
-		updatePreviewSettings,
 	} = useDispatch(nfdOnboardingStore);
 
 	useEffect(() => {
@@ -53,48 +47,36 @@ const StepDesignColors = () => {
 
 	const getStylesAndPatterns = async () => {
 		const pattern = await getPatterns(currentStep.patternId, true);
-		const globalStyles = await getGlobalStyles();
-		let selectedGlobalStyle;
-		if (storedPreviewSettings?.title)
-			selectedGlobalStyle = storedPreviewSettings;
-		else if (currentData.data.theme.variation) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				(globalStyle) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[0];
-		} else {
-			selectedGlobalStyle = globalStyles.body[0];
-		}
-		setGlobalStyles(selectedGlobalStyle);
 		setPattern(pattern?.body);
 		setIsLoaded(true);
 	};
 
-	
 	useEffect(() => {
 		if (!isLoaded) getStylesAndPatterns();
 	}, [isLoaded]);
 
 	return (
 		<DesignStateHandler>
-			<CommonLayout className="theme-colors-preview">
-				<div className="theme-colors-preview__title-bar">
-					<div className="theme-colors-preview__title-bar__browser">
-						<span className="theme-colors-preview__title-bar__browser__dot"></span>
-						<span className="theme-colors-preview__title-bar__browser__dot"></span>
-						<span className="theme-colors-preview__title-bar__browser__dot"></span>
+			<GlobalStyleParent>
+				<CommonLayout className="theme-colors-preview">
+					<div className="theme-colors-preview__title-bar">
+						<div className="theme-colors-preview__title-bar__browser">
+							<span className="theme-colors-preview__title-bar__browser__dot"></span>
+							<span className="theme-colors-preview__title-bar__browser__dot"></span>
+							<span className="theme-colors-preview__title-bar__browser__dot"></span>
+						</div>
+					</div>
+					<div className="theme-colors-preview__live-preview-container">
+						{pattern && (
+							<LivePreview
+								blockGrammer={pattern}
+								styling={'custom'}
+								viewportWidth={1300}
+							/>
+						)}
 					</div>
-				</div>
-				<div className="theme-colors-preview__live-preview-container">
-					{pattern && (
-						<LivePreview
-							blockGrammer={pattern}
-							styling={'custom'}
-							viewportWidth={1300}
-						/>
-					)}
-				</div>
-			</CommonLayout>
+				</CommonLayout>
+			</GlobalStyleParent>
 		</DesignStateHandler>
 	);
 };

From b64ea5e8c6aa8950471ce78bf954c377c303baf1 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 14 Nov 2022 16:59:56 +0530
Subject: [PATCH 07/18] Added Support for HomePage Step

---
 .../components/GlobalStyleParent/index.js     |  5 +-
 .../pages/Steps/DesignHomepageMenu/index.js   | 48 ++++++-------------
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/src/OnboardingSPA/components/GlobalStyleParent/index.js b/src/OnboardingSPA/components/GlobalStyleParent/index.js
index 7c866b465..cd5147f4f 100644
--- a/src/OnboardingSPA/components/GlobalStyleParent/index.js
+++ b/src/OnboardingSPA/components/GlobalStyleParent/index.js
@@ -29,11 +29,14 @@ const GlobalStyleParent = ({ children }) => {
         };
     }, []);
 
-    const { updatePreviewSettings } =
+    const { updateThemeStatus, updatePreviewSettings } =
         useDispatch(nfdOnboardingStore);
 
     const getStylesAndPatterns = async () => {
         const globalStyles = await getGlobalStyles();
+        if (globalStyles?.error) {
+            return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
+        }
         let selectedGlobalStyle;
         if (storedPreviewSettings?.title)
             selectedGlobalStyle = storedPreviewSettings;
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
index 95244c0c1..433c771f8 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -16,6 +16,7 @@ import { LivePreviewSelectableCard } from '../../../components/LivePreview';
 import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
 import { DesignStateHandler } from '../../../components/StateHandlers';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
+import GlobalStyleParent from '../../../components/GlobalStyleParent';
 
 const StepDesignHomepageMenu = () => {
 	const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ];
@@ -40,7 +41,6 @@ const StepDesignHomepageMenu = () => {
 
 	const location = useLocation();
 	const [ isLoaded, setisLoaded ] = useState( false );
-	const [ globalStyle, setGlobalStyle ] = useState();
 	const [ homepagePattern, setHomepagePattern ] = useState();
 	const [ selectedHomepage, setSelectedHomepage ] = useState( 0 );
 
@@ -103,28 +103,6 @@ const StepDesignHomepageMenu = () => {
 		if ( homepagePatternData?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStyles = await getGlobalStyles();
-		if ( globalStyles?.error ) {
-			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
-		}
-		let selectedGlobalStyle;
-		if (storedPreviewSettings?.title)
-			selectedGlobalStyle = storedPreviewSettings;
-		else if ( currentData.data.theme.variation ) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				( globalStyle ) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[ 0 ];
-		} else {
-			selectedGlobalStyle = globalStyles.body[ 0 ];
-		}
-		setGlobalStyles(selectedGlobalStyle);
-		updatePreviewSettings(
-			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
-		);
-		if ( selectedGlobalStyle ) {
-			setGlobalStyle( selectedGlobalStyle );
-		}
 
 		setHomepagePattern( refactorPatterns( homepagePatternData ) );
 
@@ -170,7 +148,7 @@ const StepDesignHomepageMenu = () => {
 							blockGrammer={ homepage }
 							viewportWidth={ 1200 }
 							styling={ 'custom' }
-							previewSettings={ globalStyle }
+							previewSettings={ storedPreviewSettings }
 							overlay={ false }
 							onClick={ () => saveDataForHomepage( idx ) }
 						/>
@@ -182,17 +160,19 @@ const StepDesignHomepageMenu = () => {
 
 	return (
 		<DesignStateHandler>
-			<CommonLayout>
-				<div className="homepage_preview">
-					<HeadingWithSubHeading
-						title={ currentStep?.heading }
-						subtitle={ currentStep?.subheading }
-					/>
-					<div className="theme-styles-menu__list">
-						{ globalStyle && buildHomepagePreviews() }
+			<GlobalStyleParent>
+				<CommonLayout>
+					<div className="homepage_preview">
+						<HeadingWithSubHeading
+							title={currentStep?.heading}
+							subtitle={currentStep?.subheading}
+						/>
+						<div className="theme-styles-menu__list">
+							{storedPreviewSettings && buildHomepagePreviews()}
+						</div>
 					</div>
-				</div>
-			</CommonLayout>
+				</CommonLayout>
+			</GlobalStyleParent>
 		</DesignStateHandler>
 	);
 };

From 62a7982db7cfaa56d8c4bb4c165d301b329451c6 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 15 Nov 2022 12:45:50 +0530
Subject: [PATCH 08/18] Added Component to Preview Style page

---
 .../components/GlobalStyleParent/index.js     | 12 ++-
 .../Steps/DesignThemeStyles/Preview/index.js  | 95 ++++++++-----------
 2 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/src/OnboardingSPA/components/GlobalStyleParent/index.js b/src/OnboardingSPA/components/GlobalStyleParent/index.js
index cd5147f4f..3632426f5 100644
--- a/src/OnboardingSPA/components/GlobalStyleParent/index.js
+++ b/src/OnboardingSPA/components/GlobalStyleParent/index.js
@@ -49,11 +49,13 @@ const GlobalStyleParent = ({ children }) => {
             selectedGlobalStyle = globalStyles.body[0];
         }
         
-        setGlobalStyles({
-            ...selectedGlobalStyle,
-            'title': currentData.data.theme.variation,
-            'version': 2
-        });
+        if(selectedGlobalStyle)
+            setGlobalStyles({
+                ...selectedGlobalStyle,
+                'title': currentData.data.theme.variation,
+                'version': 2
+            });
+
         updatePreviewSettings(
             useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
         );
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
index 6b44e9889..5f99780c0 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
@@ -15,10 +15,9 @@ import {
 } from '../../../../../constants';
 import { store as nfdOnboardingStore } from '../../../../store';
 import { getPatterns } from '../../../../utils/api/patterns';
-import { getGlobalStyles } from '../../../../utils/api/themes';
-import { useGlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output';
 import { conditionalSteps } from '../../../../data/routes/';
 import { DesignStateHandler } from '../../../../components/StateHandlers';
+import GlobalStyleParent from '../../../../components/GlobalStyleParent';
 
 const StepDesignThemeStylesPreview = () => {
 	const location = useLocation();
@@ -82,22 +81,6 @@ const StepDesignThemeStylesPreview = () => {
 		if ( patternsResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStylesResponse = await getGlobalStyles();
-		if ( globalStylesResponse?.error ) {
-			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
-		}
-		let selectedGlobalStyle;
-		if ( currentData.data.theme.variation ) {
-			selectedGlobalStyle = globalStylesResponse.body.filter(
-				( globalStyle ) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[ 0 ];
-		} else {
-			selectedGlobalStyle = globalStylesResponse.body[ 0 ];
-		}
-		updatePreviewSettings(
-			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
-		);
 		setPattern( patternsResponse?.body );
 		setIsLoaded( true );
 	};
@@ -189,46 +172,48 @@ const StepDesignThemeStylesPreview = () => {
 
 	return (
 		<DesignStateHandler>
-			<CommonLayout className="theme-styles-preview">
-				<div className="theme-styles-preview__checkbox">
-					<CheckboxControl
-						label={
-							<div className="theme-styles-preview__checkbox__label">
-								<span className="theme-styles-preview__checkbox__label__question">
-									{ __(
-										'Customize Colors & Fonts?',
-										'wp-module-onboarding'
-									) }
-									<span className="theme-styles-preview__checkbox__label__hint">
-										{ __(
-											'Check to customize in the next few steps (or leave empty and use the Site Editor later)',
+			<GlobalStyleParent>
+				<CommonLayout className="theme-styles-preview">
+					<div className="theme-styles-preview__checkbox">
+						<CheckboxControl
+							label={
+								<div className="theme-styles-preview__checkbox__label">
+									<span className="theme-styles-preview__checkbox__label__question">
+										{__(
+											'Customize Colors & Fonts?',
 											'wp-module-onboarding'
-										) }
+										)}
+										<span className="theme-styles-preview__checkbox__label__hint">
+											{__(
+												'Check to customize in the next few steps (or leave empty and use the Site Editor later)',
+												'wp-module-onboarding'
+											)}
+										</span>
 									</span>
-								</span>
-							</div>
-						}
-						checked={ customize }
-						onChange={ () => handleCheckbox( ! customize ) }
-					/>
-				</div>
-				<div className="theme-styles-preview__title-bar">
-					<div className="theme-styles-preview__title-bar__browser">
-						<span className="theme-styles-preview__title-bar__browser__dot"></span>
-						<span className="theme-styles-preview__title-bar__browser__dot"></span>
-						<span className="theme-styles-preview__title-bar__browser__dot"></span>
-					</div>
-				</div>
-				<div className="theme-styles-preview__live-preview-container">
-					{ pattern && (
-						<LivePreview
-							blockGrammer={ pattern }
-							styling={ 'custom' }
-							viewportWidth={ 1300 }
+								</div>
+							}
+							checked={customize}
+							onChange={() => handleCheckbox(!customize)}
 						/>
-					) }
-				</div>
-			</CommonLayout>
+					</div>
+					<div className="theme-styles-preview__title-bar">
+						<div className="theme-styles-preview__title-bar__browser">
+							<span className="theme-styles-preview__title-bar__browser__dot"></span>
+							<span className="theme-styles-preview__title-bar__browser__dot"></span>
+							<span className="theme-styles-preview__title-bar__browser__dot"></span>
+						</div>
+					</div>
+					<div className="theme-styles-preview__live-preview-container">
+						{pattern && storedPreviewSettings && (
+							<LivePreview
+								blockGrammer={pattern}
+								styling={'custom'}
+								viewportWidth={1300}
+							/>
+						)}
+					</div>
+				</CommonLayout>
+			</GlobalStyleParent>
 		</DesignStateHandler>
 	);
 };

From 0fd2da65086a1de04decc320b2889098749a53c1 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 15 Nov 2022 19:13:23 +0530
Subject: [PATCH 09/18] Added Typography Support

---
 .../Drawer/DrawerPanel/DesignTypography.js    | 58 +++++++------------
 .../pages/Steps/DesignColors/index.js         |  6 +-
 .../pages/Steps/DesignTypography/index.js     | 49 ++++++++--------
 3 files changed, 49 insertions(+), 64 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 4bce0513f..64cf0ef22 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
+import GlobalStyleParent from '../../GlobalStyleParent';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
@@ -11,7 +12,6 @@ const DesignTypography = () => {
 	const [ rerender, doRerender ] = useState( 0 );
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ selectedFont, setSelectedFont ] = useState();
-	const [ globalStyles, setGlobalStyles ] = useState();
 	const [ fontPalettes, setFontPalettes ] = useState();
 	const [ isAccordionClosed, setIsAccordionClosed ] = useState( true );
 
@@ -29,35 +29,16 @@ const DesignTypography = () => {
 
 	const getFontStylesAndPatterns = async () => {
 		const fontPalettes = await getThemeFonts();
-		const globalStyles = await getGlobalStyles();
 		setFontPalettes( fontPalettes?.body );
 
-		let selectedGlobalStyle;
-		if ( currentData?.data?.theme?.variation ) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				( globalStyle ) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[ 0 ];
-		} else {
-			selectedGlobalStyle = globalStyles.body[ 0 ];
-		}
-		setGlobalStyles( selectedGlobalStyle );
-
 		if ( currentData?.data?.typography?.slug !== '' ) {
 			handleClick(
 				currentData?.data?.typography?.slug,
-				selectedGlobalStyle,
+				storedPreviewSettings,
 				fontPalettes?.body
 			);
-		} else {
-			updatePreviewSettings(
-				useGlobalStylesOutput(
-					selectedGlobalStyle,
-					storedPreviewSettings
-				)
-			);
 		}
-		const stylesCustom = selectedGlobalStyle?.settings?.styles[ 0 ]?.css;
+		const stylesCustom = storedPreviewSettings?.settings?.styles[ 0 ]?.css;
 		if ( stylesCustom ) {
 			// Loads in all CSS variables related to fontFamily
 			const regex = /--wp--preset--font-family.*;/;
@@ -75,20 +56,20 @@ const DesignTypography = () => {
 
 	const handleClick = async (
 		fontStyle,
-		selectedGlobalStyle = globalStyles,
+		selectedGlobalStyle = storedPreviewSettings,
 		fontPalettesCopy = fontPalettes
 	) => {
 		setSelectedFont( fontStyle );
 
 		// Changes the Global Styles to Recompute css properties
 		const globalStylesCopy = selectedGlobalStyle;
-		globalStylesCopy.styles.typography.fontFamily =
-			fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily;
-		globalStylesCopy.styles.blocks[ 'core/heading' ].typography.fontFamily =
-			fontPalettesCopy[ fontStyle ]?.styles.blocks[
-				'core/heading'
-			].typography.fontFamily;
-		setGlobalStyles( globalStylesCopy );
+
+		// globalStylesCopy.styles.typography.fontFamily =
+		// 	fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily;
+		// globalStylesCopy.styles.blocks[ 'core/heading' ].typography.fontFamily =
+		// 	fontPalettesCopy[ fontStyle ]?.styles.blocks[
+		// 		'core/heading'
+		// 	].typography.fontFamily;
 
 		// Saves the data to the Store
 		currentData.data.typography.slug = fontStyle;
@@ -136,7 +117,6 @@ const DesignTypography = () => {
 		} else {
 			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
-		setGlobalStyles( selectedGlobalStyle );
 		updatePreviewSettings(
 			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
 		);
@@ -222,17 +202,19 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<div ref={ drawerFontOptions } className="theme-fonts--drawer">
-			<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
-			{ /* { selectedFont && 
+		<GlobalStyleParent>
+			<div ref={drawerFontOptions} className="theme-fonts--drawer">
+				<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
+				{ /* { selectedFont && 
 				<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
 					<div>Reset Button</div>
 				</div>
 			} */ }
-			{ fontPalettes && buildPalettes() }
-			{ fontPalettes && buildCustomPalette() }
-			<div className="custom-font-palette--hidden">{ rerender }</div>
-		</div>
+				{fontPalettes && buildPalettes()}
+				{fontPalettes && buildCustomPalette()}
+				<div className="custom-font-palette--hidden">{rerender}</div>
+			</div>
+		</GlobalStyleParent>
 	);
 };
 export default DesignTypography;
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index cbba82990..8cd4f8341 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -8,10 +8,9 @@ import { getPatterns } from '../../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
-import { VIEW_DESIGN_COLORS } from '../../../../constants';
 import GlobalStyleParent from '../../../components/GlobalStyleParent';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
+import { THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_COLORS } from '../../../../constants';
 
 const StepDesignColors = () => {
 	const location = useLocation();
@@ -47,6 +46,9 @@ const StepDesignColors = () => {
 
 	const getStylesAndPatterns = async () => {
 		const pattern = await getPatterns(currentStep.patternId, true);
+		if (pattern?.error) {
+			return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
+		}
 		setPattern(pattern?.body);
 		setIsLoaded(true);
 	};
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 7b2061b03..9f3e6ff21 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -4,7 +4,6 @@ import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../../utils/api/patterns';
-import { getGlobalStyles } from '../../../utils/api/themes';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
@@ -12,6 +11,8 @@ import {
 	THEME_STATUS_NOT_ACTIVE,
 	VIEW_DESIGN_TYPOGRAPHY,
 } from '../../../../constants';
+import { DesignStateHandler } from '../../../components/StateHandlers';
+import GlobalStyleParent from '../../../components/GlobalStyleParent';
 
 const StepDesignTypography = () => {
 	const location = useLocation();
@@ -52,10 +53,6 @@ const StepDesignTypography = () => {
 		if ( patternsResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStylesResponse = await getGlobalStyles();
-		if ( globalStylesResponse?.error ) {
-			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
-		}
 		setPattern( patternsResponse?.body );
 		setIsLoaded( true );
 	};
@@ -65,25 +62,29 @@ const StepDesignTypography = () => {
 	}, [ isLoaded ] );
 
 	return (
-		<CommonLayout className="theme-fonts-preview">
-			<div className="theme-fonts-preview__title-bar">
-				<div className="theme-fonts-preview__title-bar__browser">
-					<span className="theme-fonts-preview__title-bar__browser__dot"></span>
-					<span className="theme-fonts-preview__title-bar__browser__dot"></span>
-					<span className="theme-fonts-preview__title-bar__browser__dot"></span>
-				</div>
-			</div>
-			<div className="theme-fonts-preview__live-preview-container">
-				{ pattern && (
-					<LivePreview
-						blockGrammer={ pattern }
-						styling={ 'custom' }
-						viewportWidth={ 1300 }
-						skeletonLoadingTime={ false }
-					/>
-				) }
-			</div>
-		</CommonLayout>
+		<DesignStateHandler>
+			<GlobalStyleParent>
+				<CommonLayout className="theme-fonts-preview">
+					<div className="theme-fonts-preview__title-bar">
+						<div className="theme-fonts-preview__title-bar__browser">
+							<span className="theme-fonts-preview__title-bar__browser__dot"></span>
+							<span className="theme-fonts-preview__title-bar__browser__dot"></span>
+							<span className="theme-fonts-preview__title-bar__browser__dot"></span>
+						</div>
+					</div>
+					<div className="theme-fonts-preview__live-preview-container">
+						{pattern && (
+							<LivePreview
+								blockGrammer={pattern}
+								styling={'custom'}
+								viewportWidth={1300}
+								skeletonLoadingTime={false}
+							/>
+						)}
+					</div>
+				</CommonLayout>
+			</GlobalStyleParent>
+		</DesignStateHandler>
 	);
 };
 

From 7b2f6dd28024fe4d1b73b7d9cc075371a96f61a2 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 17 Nov 2022 12:38:10 +0530
Subject: [PATCH 10/18] Review Comments addressed

---
 includes/Data/Options.php                                  | 2 +-
 includes/RestApi/Themes/ThemeVariationsController.php      | 6 +++---
 .../components/Drawer/DrawerPanel/DesignColors.js          | 6 +++---
 .../components/Drawer/DrawerPanel/DesignTypography.js      | 6 +++---
 src/OnboardingSPA/components/GlobalStyleParent/index.js    | 6 +++---
 src/OnboardingSPA/pages/Steps/DesignColors/index.js        | 6 +++---
 src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js  | 7 +++----
 .../pages/Steps/DesignThemeStyles/Preview/index.js         | 6 +++---
 src/OnboardingSPA/pages/Steps/DesignTypography/index.js    | 6 +++---
 9 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/includes/Data/Options.php b/includes/Data/Options.php
index 73c47d471..b216e7f1b 100644
--- a/includes/Data/Options.php
+++ b/includes/Data/Options.php
@@ -38,7 +38,7 @@ final class Options {
 		'site_icon'                     => 'site_icon',
 		'show_on_front'                 => 'show_on_front',
 		'page_on_front'                 => 'page_on_front',
-		'custom_theme_styles'           => 'custom_theme_styles',
+		'theme_settings'                => 'theme_settings',
 	);
 
 	protected static $initialization_options = array(
diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index 0270e6f6f..3b9496765 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -63,10 +63,10 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 		$default = $request->get_param('defaultValue');
 
 		// If there exists an old Custom Theme then return that
-		if( 'false' === $default && false !== \get_option(Options::get_option_name('custom_theme_styles')) )
+		if( 'false' === $default && false !== \get_option(Options::get_option_name('theme_settings')) )
 		{
 			return array(
-				\get_option(Options::get_option_name('custom_theme_styles'))
+				\get_option(Options::get_option_name('theme_settings'))
 			);
 		}
 
@@ -96,7 +96,7 @@ public function set_theme_variation(\WP_REST_Request $request)
 		
 		if($theme_data){
 			// Save the new Theme style into the db
-			\update_option(Options::get_option_name('custom_theme_styles'), $theme_data);
+			\update_option(Options::get_option_name('theme_settings'), $theme_data);
 		}
 
 		return new \WP_REST_Response(
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index 063d79b3e..7156f1a98 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -6,7 +6,7 @@ import { Popover, ColorPicker } from '@wordpress/components';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeColors, setGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import GlobalStyleParent from '../../GlobalStyleParent';
+import GlobalStyleProvider from '../../GlobalStyleProvider';
 
 const DesignColors = () => {
 
@@ -317,7 +317,7 @@ const DesignColors = () => {
 	}
 
 	return (
-		<GlobalStyleParent>
+		<GlobalStyleProvider>
 			<div className='theme-colors--drawer'>
 				<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
 				{/* {selectedColors?.slug && 
@@ -328,7 +328,7 @@ const DesignColors = () => {
 				{ colorPalettes && buildPalettes() }
 				{ colorPalettes && buildCustomPalette() }
 			</div>
-		</GlobalStyleParent>
+		</GlobalStyleProvider>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 64cf0ef22..c68cbf40c 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -2,7 +2,7 @@ import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
-import GlobalStyleParent from '../../GlobalStyleParent';
+import GlobalStyleProvider from '../../GlobalStyleProvider';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
@@ -202,7 +202,7 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<GlobalStyleParent>
+		<GlobalStyleProvider>
 			<div ref={drawerFontOptions} className="theme-fonts--drawer">
 				<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
 				{ /* { selectedFont && 
@@ -214,7 +214,7 @@ const DesignTypography = () => {
 				{fontPalettes && buildCustomPalette()}
 				<div className="custom-font-palette--hidden">{rerender}</div>
 			</div>
-		</GlobalStyleParent>
+		</GlobalStyleProvider>
 	);
 };
 export default DesignTypography;
diff --git a/src/OnboardingSPA/components/GlobalStyleParent/index.js b/src/OnboardingSPA/components/GlobalStyleParent/index.js
index 3632426f5..5ece835e1 100644
--- a/src/OnboardingSPA/components/GlobalStyleParent/index.js
+++ b/src/OnboardingSPA/components/GlobalStyleParent/index.js
@@ -13,7 +13,7 @@ import { useGlobalStylesOutput } from '../../utils/global-styles/use-global-styl
  * @returns Global Style Parent
  */
 
-const GlobalStyleParent = ({ children }) => {
+const GlobalStyleProvider = ({ children }) => {
 
     const [isLoaded, setIsLoaded] = useState(false);
 
@@ -38,7 +38,7 @@ const GlobalStyleParent = ({ children }) => {
             return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
         }
         let selectedGlobalStyle;
-        if (storedPreviewSettings?.title)
+        if (storedPreviewSettings?.title && storedPreviewSettings?.settings)
             selectedGlobalStyle = storedPreviewSettings;
         else if (currentData.data.theme.variation) {
             selectedGlobalStyle = globalStyles.body.filter(
@@ -71,4 +71,4 @@ const GlobalStyleParent = ({ children }) => {
     );
 };
 
-export default GlobalStyleParent;
+export default GlobalStyleProvider;
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index 8cd4f8341..1d2cf738e 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -8,7 +8,7 @@ import { getPatterns } from '../../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../../store';
 import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
-import GlobalStyleParent from '../../../components/GlobalStyleParent';
+import GlobalStyleProvider from '../../../components/GlobalStyleProvider';
 import { DesignStateHandler } from '../../../components/StateHandlers';
 import { THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_COLORS } from '../../../../constants';
 
@@ -59,7 +59,7 @@ const StepDesignColors = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleParent>
+			<GlobalStyleProvider>
 				<CommonLayout className="theme-colors-preview">
 					<div className="theme-colors-preview__title-bar">
 						<div className="theme-colors-preview__title-bar__browser">
@@ -78,7 +78,7 @@ const StepDesignColors = () => {
 						)}
 					</div>
 				</CommonLayout>
-			</GlobalStyleParent>
+			</GlobalStyleProvider>
 		</DesignStateHandler>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
index 433c771f8..97f68fe50 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -15,8 +15,7 @@ import {
 import { LivePreviewSelectableCard } from '../../../components/LivePreview';
 import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import GlobalStyleParent from '../../../components/GlobalStyleParent';
+import GlobalStyleProvider from '../../../components/GlobalStyleProvider';
 
 const StepDesignHomepageMenu = () => {
 	const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ];
@@ -160,7 +159,7 @@ const StepDesignHomepageMenu = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleParent>
+			<GlobalStyleProvider>
 				<CommonLayout>
 					<div className="homepage_preview">
 						<HeadingWithSubHeading
@@ -172,7 +171,7 @@ const StepDesignHomepageMenu = () => {
 						</div>
 					</div>
 				</CommonLayout>
-			</GlobalStyleParent>
+			</GlobalStyleProvider>
 		</DesignStateHandler>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
index 5f99780c0..8bca8ef5d 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
@@ -17,7 +17,7 @@ import { store as nfdOnboardingStore } from '../../../../store';
 import { getPatterns } from '../../../../utils/api/patterns';
 import { conditionalSteps } from '../../../../data/routes/';
 import { DesignStateHandler } from '../../../../components/StateHandlers';
-import GlobalStyleParent from '../../../../components/GlobalStyleParent';
+import GlobalStyleProvider from '../../../../components/GlobalStyleProvider';
 
 const StepDesignThemeStylesPreview = () => {
 	const location = useLocation();
@@ -172,7 +172,7 @@ const StepDesignThemeStylesPreview = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleParent>
+			<GlobalStyleProvider>
 				<CommonLayout className="theme-styles-preview">
 					<div className="theme-styles-preview__checkbox">
 						<CheckboxControl
@@ -213,7 +213,7 @@ const StepDesignThemeStylesPreview = () => {
 						)}
 					</div>
 				</CommonLayout>
-			</GlobalStyleParent>
+			</GlobalStyleProvider>
 		</DesignStateHandler>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 9f3e6ff21..564b2f922 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -12,7 +12,7 @@ import {
 	VIEW_DESIGN_TYPOGRAPHY,
 } from '../../../../constants';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import GlobalStyleParent from '../../../components/GlobalStyleParent';
+import GlobalStyleProvider from '../../../components/GlobalStyleProvider';
 
 const StepDesignTypography = () => {
 	const location = useLocation();
@@ -63,7 +63,7 @@ const StepDesignTypography = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleParent>
+			<GlobalStyleProvider>
 				<CommonLayout className="theme-fonts-preview">
 					<div className="theme-fonts-preview__title-bar">
 						<div className="theme-fonts-preview__title-bar__browser">
@@ -83,7 +83,7 @@ const StepDesignTypography = () => {
 						)}
 					</div>
 				</CommonLayout>
-			</GlobalStyleParent>
+			</GlobalStyleProvider>
 		</DesignStateHandler>
 	);
 };

From 8eaba0999e33e1c5e0ef79d7bf1274c94bf9e0ec Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 17 Nov 2022 12:40:15 +0530
Subject: [PATCH 11/18] Changed name to GlobalStyleProvider

---
 .../{GlobalStyleParent => GlobalStyleProvider}/index.js           | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/OnboardingSPA/components/{GlobalStyleParent => GlobalStyleProvider}/index.js (100%)

diff --git a/src/OnboardingSPA/components/GlobalStyleParent/index.js b/src/OnboardingSPA/components/GlobalStyleProvider/index.js
similarity index 100%
rename from src/OnboardingSPA/components/GlobalStyleParent/index.js
rename to src/OnboardingSPA/components/GlobalStyleProvider/index.js

From 34f6e2b56a36cf97685724cf14898ee44d356348 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 17 Nov 2022 13:10:29 +0530
Subject: [PATCH 12/18] Review Comments 2.0

---
 .../RestApi/Themes/ThemeVariationsController.php     |  3 ++-
 .../components/Drawer/DrawerPanel/DesignColors.js    |  8 ++++----
 .../Drawer/DrawerPanel/DesignTypography.js           |  8 ++++----
 .../{ => LivePreview}/GlobalStyleProvider/index.js   | 12 ++++++------
 src/OnboardingSPA/components/LivePreview/index.js    |  1 +
 src/OnboardingSPA/pages/Steps/DesignColors/index.js  |  7 +++----
 .../pages/Steps/DesignHomepageMenu/index.js          |  7 +++----
 .../pages/Steps/DesignThemeStyles/Preview/index.js   |  6 +++---
 .../pages/Steps/DesignTypography/index.js            |  7 +++----
 src/OnboardingSPA/utils/api/themes.js                |  2 +-
 10 files changed, 30 insertions(+), 31 deletions(-)
 rename src/OnboardingSPA/components/{ => LivePreview}/GlobalStyleProvider/index.js (84%)

diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index 3b9496765..fe80c9075 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -60,7 +60,7 @@ public function register_routes() {
 	 */
 	public function get_theme_variations( \WP_REST_Request $request ) {
 
-		$default = $request->get_param('defaultValue');
+		$default = $request->get_param('variations');
 
 		// If there exists an old Custom Theme then return that
 		if( 'false' === $default && false !== \get_option(Options::get_option_name('theme_settings')) )
@@ -72,6 +72,7 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 
 		$active_variation              = \WP_Theme_JSON_Resolver::get_merged_data( 'theme' )->get_raw_data();
 		$active_variation_global_style = array(
+			'id'       => 0,
             'title'    => 'Default',
 			'version'  => $active_variation['version'],
 			'settings' => $active_variation['settings'],
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index 7156f1a98..38a532cf8 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -6,7 +6,7 @@ import { Popover, ColorPicker } from '@wordpress/components';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeColors, setGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import GlobalStyleProvider from '../../GlobalStyleProvider';
+import { GlobalStylesProvider } from '../../LivePreview';
 
 const DesignColors = () => {
 
@@ -213,7 +213,7 @@ const DesignColors = () => {
 				(globalStyle) =>
 					globalStyle.title === currentData.data.theme.variation
 			)[0];
-		} else {
+		} else if (globalStyles.body[0]?.id === 0) {
 			selectedGlobalStyle = globalStyles.body[0];
 		}
 		updatePreviewSettings(
@@ -317,7 +317,7 @@ const DesignColors = () => {
 	}
 
 	return (
-		<GlobalStyleProvider>
+		<GlobalStylesProvider>
 			<div className='theme-colors--drawer'>
 				<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
 				{/* {selectedColors?.slug && 
@@ -328,7 +328,7 @@ const DesignColors = () => {
 				{ colorPalettes && buildPalettes() }
 				{ colorPalettes && buildCustomPalette() }
 			</div>
-		</GlobalStyleProvider>
+		</GlobalStylesProvider>
 	);
 };
 
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index c68cbf40c..a8ef7c670 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -2,8 +2,8 @@ import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
-import GlobalStyleProvider from '../../GlobalStyleProvider';
 import { store as nfdOnboardingStore } from '../../../store';
+import { GlobalStylesProvider } from '../../../components/LivePreview';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
@@ -114,7 +114,7 @@ const DesignTypography = () => {
 				( globalStyle ) =>
 					globalStyle.title === currentData.data.theme.variation
 			)[ 0 ];
-		} else {
+		} else if (globalStyles.body[0]?.id === 0) {
 			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
 		updatePreviewSettings(
@@ -202,7 +202,7 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<GlobalStyleProvider>
+		<GlobalStylesProvider>
 			<div ref={drawerFontOptions} className="theme-fonts--drawer">
 				<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
 				{ /* { selectedFont && 
@@ -214,7 +214,7 @@ const DesignTypography = () => {
 				{fontPalettes && buildCustomPalette()}
 				<div className="custom-font-palette--hidden">{rerender}</div>
 			</div>
-		</GlobalStyleProvider>
+		</GlobalStylesProvider>
 	);
 };
 export default DesignTypography;
diff --git a/src/OnboardingSPA/components/GlobalStyleProvider/index.js b/src/OnboardingSPA/components/LivePreview/GlobalStyleProvider/index.js
similarity index 84%
rename from src/OnboardingSPA/components/GlobalStyleProvider/index.js
rename to src/OnboardingSPA/components/LivePreview/GlobalStyleProvider/index.js
index 5ece835e1..6a85840d1 100644
--- a/src/OnboardingSPA/components/GlobalStyleProvider/index.js
+++ b/src/OnboardingSPA/components/LivePreview/GlobalStyleProvider/index.js
@@ -1,9 +1,9 @@
 import { useSelect, useDispatch } from '@wordpress/data'; 
 import { useState, useEffect } from '@wordpress/element'; 
 
-import { store as nfdOnboardingStore } from '../../store';
-import { getGlobalStyles, setGlobalStyles } from '../../utils/api/themes';
-import { useGlobalStylesOutput } from '../../utils/global-styles/use-global-styles-output';
+import { store as nfdOnboardingStore } from '../../../store';
+import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
+import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
 /**
  * Global Style Parent Component
@@ -13,7 +13,7 @@ import { useGlobalStylesOutput } from '../../utils/global-styles/use-global-styl
  * @returns Global Style Parent
  */
 
-const GlobalStyleProvider = ({ children }) => {
+const GlobalStylesProvider = ({ children }) => {
 
     const [isLoaded, setIsLoaded] = useState(false);
 
@@ -45,7 +45,7 @@ const GlobalStyleProvider = ({ children }) => {
                 (globalStyle) =>
                     globalStyle.title === currentData.data.theme.variation
             )[0];
-        } else {
+        } else if (globalStyles.body[0]?.id === 0) {
             selectedGlobalStyle = globalStyles.body[0];
         }
         
@@ -71,4 +71,4 @@ const GlobalStyleProvider = ({ children }) => {
     );
 };
 
-export default GlobalStyleProvider;
+export default GlobalStylesProvider;
diff --git a/src/OnboardingSPA/components/LivePreview/index.js b/src/OnboardingSPA/components/LivePreview/index.js
index 545215b0a..5c2acc6e2 100644
--- a/src/OnboardingSPA/components/LivePreview/index.js
+++ b/src/OnboardingSPA/components/LivePreview/index.js
@@ -1,2 +1,3 @@
 export { default as LivePreview } from './BlockPreview';
 export { default as LivePreviewSelectableCard } from './SelectableCard';
+export { default as GlobalStylesProvider } from './GlobalStylesProvider';
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index 1d2cf738e..bcfda6d18 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -6,10 +6,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../../store';
-import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
-import GlobalStyleProvider from '../../../components/GlobalStyleProvider';
 import { DesignStateHandler } from '../../../components/StateHandlers';
+import { LivePreview, GlobalStylesProvider } from '../../../components/LivePreview';
 import { THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_COLORS } from '../../../../constants';
 
 const StepDesignColors = () => {
@@ -59,7 +58,7 @@ const StepDesignColors = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleProvider>
+			<GlobalStylesProvider>
 				<CommonLayout className="theme-colors-preview">
 					<div className="theme-colors-preview__title-bar">
 						<div className="theme-colors-preview__title-bar__browser">
@@ -78,7 +77,7 @@ const StepDesignColors = () => {
 						)}
 					</div>
 				</CommonLayout>
-			</GlobalStyleProvider>
+			</GlobalStylesProvider>
 		</DesignStateHandler>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
index 97f68fe50..cf18da6fa 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -12,10 +12,9 @@ import {
 	THEME_STATUS_ACTIVE,
 	THEME_STATUS_NOT_ACTIVE,
 } from '../../../../constants';
-import { LivePreviewSelectableCard } from '../../../components/LivePreview';
 import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import GlobalStyleProvider from '../../../components/GlobalStyleProvider';
+import { LivePreviewSelectableCard, GlobalStylesProvider } from '../../../components/LivePreview';
 
 const StepDesignHomepageMenu = () => {
 	const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ];
@@ -159,7 +158,7 @@ const StepDesignHomepageMenu = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleProvider>
+			<GlobalStylesProvider>
 				<CommonLayout>
 					<div className="homepage_preview">
 						<HeadingWithSubHeading
@@ -171,7 +170,7 @@ const StepDesignHomepageMenu = () => {
 						</div>
 					</div>
 				</CommonLayout>
-			</GlobalStyleProvider>
+			</GlobalStylesProvider>
 		</DesignStateHandler>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
index 8bca8ef5d..fa97f8b33 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
@@ -16,8 +16,8 @@ import {
 import { store as nfdOnboardingStore } from '../../../../store';
 import { getPatterns } from '../../../../utils/api/patterns';
 import { conditionalSteps } from '../../../../data/routes/';
+import { GlobalStylesProvider } from '../../../../components/LivePreview';
 import { DesignStateHandler } from '../../../../components/StateHandlers';
-import GlobalStyleProvider from '../../../../components/GlobalStyleProvider';
 
 const StepDesignThemeStylesPreview = () => {
 	const location = useLocation();
@@ -172,7 +172,7 @@ const StepDesignThemeStylesPreview = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleProvider>
+			<GlobalStylesProvider>
 				<CommonLayout className="theme-styles-preview">
 					<div className="theme-styles-preview__checkbox">
 						<CheckboxControl
@@ -213,7 +213,7 @@ const StepDesignThemeStylesPreview = () => {
 						)}
 					</div>
 				</CommonLayout>
-			</GlobalStyleProvider>
+			</GlobalStylesProvider>
 		</DesignStateHandler>
 	);
 };
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 564b2f922..2756c8347 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -5,14 +5,13 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../../store';
-import { LivePreview } from '../../../components/LivePreview';
 import CommonLayout from '../../../components/Layouts/Common';
 import {
 	THEME_STATUS_NOT_ACTIVE,
 	VIEW_DESIGN_TYPOGRAPHY,
 } from '../../../../constants';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import GlobalStyleProvider from '../../../components/GlobalStyleProvider';
+import { LivePreview, GlobalStylesProvider } from '../../../components/LivePreview';
 
 const StepDesignTypography = () => {
 	const location = useLocation();
@@ -63,7 +62,7 @@ const StepDesignTypography = () => {
 
 	return (
 		<DesignStateHandler>
-			<GlobalStyleProvider>
+			<GlobalStylesProvider>
 				<CommonLayout className="theme-fonts-preview">
 					<div className="theme-fonts-preview__title-bar">
 						<div className="theme-fonts-preview__title-bar__browser">
@@ -83,7 +82,7 @@ const StepDesignTypography = () => {
 						)}
 					</div>
 				</CommonLayout>
-			</GlobalStyleProvider>
+			</GlobalStylesProvider>
 		</DesignStateHandler>
 	);
 };
diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index 811ff9037..f29b186ec 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -20,7 +20,7 @@ const init = () => {
 
 const getGlobalStyles = async ( defaultValue = false ) => {
 	return await resolve(
-		apiFetch({ url: onboardingRestURL('themes/variations&defaultValue=' + defaultValue ) } ).then()
+		apiFetch({ url: onboardingRestURL('themes/variations&variations=' + defaultValue ) } ).then()
 	);
 };
 

From 97b2977e4365041d34a55b2f578ad99b2159fda2 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 17 Nov 2022 13:11:26 +0530
Subject: [PATCH 13/18] Renamed to GlobalStylesProvider

---
 .../{GlobalStyleProvider => GlobalStylesProvider}/index.js        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/OnboardingSPA/components/LivePreview/{GlobalStyleProvider => GlobalStylesProvider}/index.js (100%)

diff --git a/src/OnboardingSPA/components/LivePreview/GlobalStyleProvider/index.js b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js
similarity index 100%
rename from src/OnboardingSPA/components/LivePreview/GlobalStyleProvider/index.js
rename to src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js

From 6247150196bab3574a5e9588a6e82813d6d97e09 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 17 Nov 2022 13:33:40 +0530
Subject: [PATCH 14/18] Added Checks and args method

---
 .../Themes/ThemeVariationsController.php      | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index fe80c9075..4cc693503 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -41,6 +41,7 @@ public function register_routes() {
 			array(
 				array(
 					'methods'  => \WP_REST_Server::READABLE,
+					'args'     => $this->get_pattern_args(),
 					'callback' => array( $this, 'get_theme_variations' ),
 					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 				),
@@ -53,6 +54,18 @@ public function register_routes() {
 		);
 	}
 
+	public function get_pattern_args()
+     {
+		// These variable return the orginal numerous variations if true
+		// Else sends the recently saved theme settings in db
+          return array(
+               'variations'   => array(
+                    'type' => 'boolean',
+					'default' => false,
+               )
+          );
+     }
+
 	/**
 	 * Retrieves the active themes variations.
 	 *
@@ -95,14 +108,21 @@ public function set_theme_variation(\WP_REST_Request $request)
 		// The theme data with the new Colors and Fonts
 		$theme_data = json_decode($request->get_body(), true);
 		
-		if($theme_data){
+		if($theme_data && isset($theme_data['settings'])){
+			
 			// Save the new Theme style into the db
 			\update_option(Options::get_option_name('theme_settings'), $theme_data);
+			
+			return new \WP_REST_Response(
+				$theme_data,
+				200
+			);
 		}
 
-		return new \WP_REST_Response(
-			$theme_data,
-			200
+		return new \WP_Error(
+			500,
+			'Missing important parameters',
+			'Settings parameter is found to be missing'
 		);
 	}
 

From c0a381bdadd8d3b2988c79b310579b0c0255127e Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 18 Nov 2022 10:31:21 +0530
Subject: [PATCH 15/18] Update themes.js

---
 src/OnboardingSPA/utils/api/themes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index f29b186ec..92555d721 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -18,9 +18,9 @@ const init = () => {
 	} );
 };
 
-const getGlobalStyles = async ( defaultValue = false ) => {
+const getGlobalStyles = async ( variations = false ) => {
 	return await resolve(
-		apiFetch({ url: onboardingRestURL('themes/variations&variations=' + defaultValue ) } ).then()
+		apiFetch({ url: onboardingRestURL('themes/variations&variations=' + variations ) } ).then()
 	);
 };
 

From e1dd1a35c9d5018e84e50bb16897f47fae980e48 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 18 Nov 2022 11:05:29 +0530
Subject: [PATCH 16/18] Update ThemeVariationsController.php

---
 .../Themes/ThemeVariationsController.php       | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index 4cc693503..09ac4455e 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -47,6 +47,7 @@ public function register_routes() {
 				),
 				array(
 					'methods'  => \WP_REST_Server::EDITABLE,
+					'args'     => $this->set_pattern_args(),
 					'callback' => array($this, 'set_theme_variation'),
 					'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
 				),
@@ -66,6 +67,21 @@ public function get_pattern_args()
           );
      }
 
+	 public function set_pattern_args()
+     {
+		// This is the latest modified Global Style to be saved in the db
+          return array(
+               'title'   => array(
+                    'type'     => 'string',
+					'required' => true,
+ 			   ),
+			   'settings'   => array(
+                    'type'     => 'array',
+					'required' => true,
+               )
+          );
+     }
+
 	/**
 	 * Retrieves the active themes variations.
 	 *
@@ -108,7 +124,7 @@ public function set_theme_variation(\WP_REST_Request $request)
 		// The theme data with the new Colors and Fonts
 		$theme_data = json_decode($request->get_body(), true);
 		
-		if($theme_data && isset($theme_data['settings'])){
+		if($theme_data){
 			
 			// Save the new Theme style into the db
 			\update_option(Options::get_option_name('theme_settings'), $theme_data);

From 2d37959feb9b3e75d4f8da73c8249e44de941132 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 18 Nov 2022 16:27:54 +0530
Subject: [PATCH 17/18] Lint on JS

---
 .../Drawer/DrawerPanel/DesignColors.js        | 545 +++++++++++-------
 .../DrawerPanel/DesignThemeStylesPreview.js   |   2 +-
 .../Drawer/DrawerPanel/DesignTypography.js    |  12 +-
 .../LivePreview/GlobalStylesProvider/index.js | 100 ++--
 .../pages/Steps/DesignColors/index.js         |  68 ++-
 .../pages/Steps/DesignHomepageMenu/index.js   |  11 +-
 .../Steps/DesignThemeStyles/Menu/index.js     |   2 +-
 .../Steps/DesignThemeStyles/Preview/index.js  |  22 +-
 .../pages/Steps/DesignTypography/index.js     |  17 +-
 src/OnboardingSPA/utils/api/themes.js         |  23 +-
 10 files changed, 483 insertions(+), 319 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index 38a532cf8..e477e65ae 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -4,108 +4,140 @@ import { useState, useEffect } from '@wordpress/element';
 import { Popover, ColorPicker } from '@wordpress/components';
 
 import { store as nfdOnboardingStore } from '../../../store';
-import { getGlobalStyles, getThemeColors, setGlobalStyles } from '../../../utils/api/themes';
+import {
+	getGlobalStyles,
+	getThemeColors,
+	setGlobalStyles,
+} from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { GlobalStylesProvider } from '../../LivePreview';
 
 const DesignColors = () => {
-
-	const [isLoaded, setIsLoaded] = useState(false);
-	const [selectedColors, setSelectedColors] = useState();
-	const [showColorPicker, setShowColorPicker] = useState(false);
-	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
-	const [selectedColorsLocal, setSelectedColorsLocal] = useState();
-
-	const [customColors, setCustomColors] = useState();
-	const [colorPalettes, setColorPalettes] = useState();
-	const [colorPickerCalledBy, setColorPickerCalledBy] = useState('');
-
-	const { storedPreviewSettings, currentData } = useSelect(
-		(select) => {
-			return {
-				storedPreviewSettings:
-					select(nfdOnboardingStore).getPreviewSettings(),
-				currentData:
-					select(nfdOnboardingStore).getCurrentOnboardingData(),
-			};
-		},
-		[]
-	);
+	const [ isLoaded, setIsLoaded ] = useState( false );
+	const [ selectedColors, setSelectedColors ] = useState();
+	const [ showColorPicker, setShowColorPicker ] = useState( false );
+	const [ isAccordionClosed, setIsAccordionClosed ] = useState( true );
+	const [ selectedColorsLocal, setSelectedColorsLocal ] = useState();
+
+	const [ customColors, setCustomColors ] = useState();
+	const [ colorPalettes, setColorPalettes ] = useState();
+	const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' );
+
+	const { storedPreviewSettings, currentData } = useSelect( ( select ) => {
+		return {
+			storedPreviewSettings:
+				select( nfdOnboardingStore ).getPreviewSettings(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+		};
+	}, [] );
 
 	const { updatePreviewSettings, setCurrentOnboardingData } =
-		useDispatch(nfdOnboardingStore);
+		useDispatch( nfdOnboardingStore );
 
-	function stateToLocal(selectedColors) {
-		if (selectedColors) {
-			let selectedColorsLocalTemp = {};
-			selectedColors?.color?.forEach(color => {
-				selectedColorsLocalTemp[color.slug] = color.color;
-			});
+	function stateToLocal( selectedColors ) {
+		if ( selectedColors ) {
+			const selectedColorsLocalTemp = {};
+			selectedColors?.color?.forEach( ( color ) => {
+				selectedColorsLocalTemp[ color.slug ] = color.color;
+			} );
 
-			setSelectedColorsLocal(selectedColorsLocalTemp);
+			setSelectedColorsLocal( selectedColorsLocalTemp );
 			return selectedColorsLocalTemp;
 		}
 	}
 
-	function LocalToState(selectedColorsLocalTemp, colorStyle) {
-		if (selectedColorsLocalTemp && colorStyle) {
+	function LocalToState( selectedColorsLocalTemp, colorStyle ) {
+		if ( selectedColorsLocalTemp && colorStyle ) {
 			selectedColors.slug = colorStyle;
-			selectedColors.name = colorStyle?.charAt(0).toUpperCase() + colorStyle?.slice(1);
-
-			let colorsArray = [];
-			for (let colorName in selectedColorsLocalTemp) {
-				colorsArray.push({
-					'slug': colorName,
-					'name': colorName?.charAt(0).toUpperCase() + colorName?.slice(1),
-					'color': selectedColorsLocalTemp[colorName]
-				});
+			selectedColors.name =
+				colorStyle?.charAt( 0 ).toUpperCase() + colorStyle?.slice( 1 );
+
+			const colorsArray = [];
+			for ( const colorName in selectedColorsLocalTemp ) {
+				colorsArray.push( {
+					slug: colorName,
+					name:
+						colorName?.charAt( 0 ).toUpperCase() +
+						colorName?.slice( 1 ),
+					color: selectedColorsLocalTemp[ colorName ],
+				} );
 			}
-			
+
 			selectedColors.color = colorsArray;
-			setSelectedColors(selectedColors);
+			setSelectedColors( selectedColors );
 			currentData.data.palette = selectedColors;
-			setCurrentOnboardingData(currentData);
+			setCurrentOnboardingData( currentData );
 			return selectedColors;
 		}
 	}
 
-	async function saveThemeColorPalette(colorStyle, colorPalettesTemp = colorPalettes, selectedColorsLocalTemp = selectedColors, globalStylesTemp = storedPreviewSettings) {
+	async function saveThemeColorPalette(
+		colorStyle,
+		colorPalettesTemp = colorPalettes,
+		selectedColorsLocalTemp = selectedColors,
+		globalStylesTemp = storedPreviewSettings
+	) {
 		const isCustomStyle = colorStyle === 'custom';
-		let selectedGlobalStyle = globalStylesTemp;
-		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
-		if (colorPalettesTemp && colorStyle && selectedThemeColorPalette) {
-			for (let idx = 0; idx < selectedThemeColorPalette.length; idx++) {
-				switch (selectedThemeColorPalette[idx]?.slug) {
+		const selectedGlobalStyle = globalStylesTemp;
+		const selectedThemeColorPalette =
+			selectedGlobalStyle?.settings?.color?.palette?.theme;
+		if ( colorPalettesTemp && colorStyle && selectedThemeColorPalette ) {
+			for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) {
+				switch ( selectedThemeColorPalette[ idx ]?.slug ) {
 					case 'primary':
-						if (isCustomStyle && selectedColorsLocalTemp?.primary != '')
-							selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.primary;
-						else if (!isCustomStyle)
-							selectedThemeColorPalette[idx].color = colorPalettesTemp[colorStyle].primary;
+						if (
+							isCustomStyle &&
+							selectedColorsLocalTemp?.primary != ''
+						)
+							selectedThemeColorPalette[ idx ].color =
+								selectedColorsLocalTemp.primary;
+						else if ( ! isCustomStyle )
+							selectedThemeColorPalette[ idx ].color =
+								colorPalettesTemp[ colorStyle ].primary;
 						break;
 					case 'secondary':
-						if (isCustomStyle && selectedColorsLocalTemp?.secondary != '')
-							selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.secondary;
-						else if (!isCustomStyle)
-							selectedThemeColorPalette[idx].color = colorPalettesTemp[colorStyle].secondary;
+						if (
+							isCustomStyle &&
+							selectedColorsLocalTemp?.secondary != ''
+						)
+							selectedThemeColorPalette[ idx ].color =
+								selectedColorsLocalTemp.secondary;
+						else if ( ! isCustomStyle )
+							selectedThemeColorPalette[ idx ].color =
+								colorPalettesTemp[ colorStyle ].secondary;
 						break;
 					case 'tertiary':
-						if (isCustomStyle && selectedColorsLocalTemp?.tertiary != '')
-							selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.tertiary;
-						else if (!isCustomStyle)
-							selectedThemeColorPalette[idx].color = colorPalettesTemp[colorStyle].tertiary;
+						if (
+							isCustomStyle &&
+							selectedColorsLocalTemp?.tertiary != ''
+						)
+							selectedThemeColorPalette[ idx ].color =
+								selectedColorsLocalTemp.tertiary;
+						else if ( ! isCustomStyle )
+							selectedThemeColorPalette[ idx ].color =
+								colorPalettesTemp[ colorStyle ].tertiary;
 						break;
 					case 'background':
-						if (isCustomStyle && selectedColorsLocalTemp?.background != '')
-							selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.background;
-						else if (!isCustomStyle)
-							selectedThemeColorPalette[idx].color = '#ffffff';
+						if (
+							isCustomStyle &&
+							selectedColorsLocalTemp?.background != ''
+						)
+							selectedThemeColorPalette[ idx ].color =
+								selectedColorsLocalTemp.background;
+						else if ( ! isCustomStyle )
+							selectedThemeColorPalette[ idx ].color = '#ffffff';
 						break;
 				}
 			}
 
-			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
+			selectedGlobalStyle.settings.color.palette.theme =
+				selectedThemeColorPalette;
 			updatePreviewSettings(
-				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+				useGlobalStylesOutput(
+					selectedGlobalStyle,
+					storedPreviewSettings
+				)
 			);
 
 			return selectedGlobalStyle;
@@ -113,139 +145,180 @@ const DesignColors = () => {
 	}
 
 	async function saveCustomColors() {
-		let selectedGlobalStyle = storedPreviewSettings;
-		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
+		const selectedGlobalStyle = storedPreviewSettings;
+		const selectedThemeColorPalette =
+			selectedGlobalStyle?.settings?.color?.palette?.theme;
 
-		if (selectedThemeColorPalette) {
-			for (let idx = 0; idx < selectedThemeColorPalette.length; idx++) {
-				switch (selectedThemeColorPalette[idx]?.slug) {
+		if ( selectedThemeColorPalette ) {
+			for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) {
+				switch ( selectedThemeColorPalette[ idx ]?.slug ) {
 					case 'background':
-						if (colorPickerCalledBy == 'background' && customColors?.background)
-							selectedThemeColorPalette[idx].color = customColors?.background;
+						if (
+							colorPickerCalledBy == 'background' &&
+							customColors?.background
+						)
+							selectedThemeColorPalette[ idx ].color =
+								customColors?.background;
 						break;
 					case 'primary':
-						if (colorPickerCalledBy == 'primary' && customColors?.primary)
-							selectedThemeColorPalette[idx].color = customColors?.primary;
+						if (
+							colorPickerCalledBy == 'primary' &&
+							customColors?.primary
+						)
+							selectedThemeColorPalette[ idx ].color =
+								customColors?.primary;
 						break;
 					case 'secondary':
-						if (colorPickerCalledBy == 'secondary' && customColors?.secondary)
-							selectedThemeColorPalette[idx].color = customColors?.secondary;
+						if (
+							colorPickerCalledBy == 'secondary' &&
+							customColors?.secondary
+						)
+							selectedThemeColorPalette[ idx ].color =
+								customColors?.secondary;
 						break;
 					case 'tertiary':
-						if (colorPickerCalledBy == 'tertiary' && customColors?.tertiary)
-							selectedThemeColorPalette[idx].color = customColors?.tertiary;
+						if (
+							colorPickerCalledBy == 'tertiary' &&
+							customColors?.tertiary
+						)
+							selectedThemeColorPalette[ idx ].color =
+								customColors?.tertiary;
 						break;
 				}
 			}
 
-			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
+			selectedGlobalStyle.settings.color.palette.theme =
+				selectedThemeColorPalette;
 			updatePreviewSettings(
-				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+				useGlobalStylesOutput(
+					selectedGlobalStyle,
+					storedPreviewSettings
+				)
 			);
 		}
 	}
 
 	const getColorStylesAndPatterns = async () => {
 		const colorPalettes = await getThemeColors();
-		setColorPalettes(colorPalettes?.body);
+		setColorPalettes( colorPalettes?.body );
 		let selectedColors;
 		let selectedColorsLocal;
-		if (!currentData?.data?.palette?.slug === '') {
+		if ( ! currentData?.data?.palette?.slug === '' ) {
 			selectedColors = currentData.data.palette;
-			selectedColorsLocal = stateToLocal(selectedColors);
-			setCustomColors(selectedColorsLocal);
-			setCurrentOnboardingData(currentData);
-		}
-		else {
+			selectedColorsLocal = stateToLocal( selectedColors );
+			setCustomColors( selectedColorsLocal );
+			setCurrentOnboardingData( currentData );
+		} else {
 			selectedColors = currentData.data.palette;
-			selectedColorsLocal = stateToLocal(selectedColors);
+			selectedColorsLocal = stateToLocal( selectedColors );
 
-			if(selectedColors.slug === 'custom') {
-				setCustomColors(selectedColorsLocal);
+			if ( selectedColors.slug === 'custom' ) {
+				setCustomColors( selectedColorsLocal );
 			}
-		} 
-		setSelectedColors(selectedColors);
-		saveThemeColorPalette(currentData?.data?.palette['slug'], colorPalettes?.body, selectedColorsLocal, storedPreviewSettings);
-		setIsLoaded(true);
-
+		}
+		setSelectedColors( selectedColors );
+		saveThemeColorPalette(
+			currentData?.data?.palette.slug,
+			colorPalettes?.body,
+			selectedColorsLocal,
+			storedPreviewSettings
+		);
+		setIsLoaded( true );
 	};
 
-	useEffect(() => {
-		if (!isLoaded) getColorStylesAndPatterns();
-	}, [isLoaded]);
+	useEffect( () => {
+		if ( ! isLoaded ) getColorStylesAndPatterns();
+	}, [ isLoaded ] );
 
-	const handleClick = (colorStyle) => {
+	const handleClick = ( colorStyle ) => {
+		const customColorsTemp = customColors;
+		for ( const custom in customColorsTemp )
+			customColorsTemp[ custom ] = '';
 
-		let customColorsTemp = customColors;
-		for(let custom in customColorsTemp)
-			customColorsTemp[custom] = '';
-		
-		setCustomColors(customColorsTemp);
-		saveThemeColorPalette(colorStyle);
-		setSelectedColorsLocal(colorPalettes[colorStyle]);
-		LocalToState(colorPalettes[colorStyle], colorStyle);
+		setCustomColors( customColorsTemp );
+		saveThemeColorPalette( colorStyle );
+		setSelectedColorsLocal( colorPalettes[ colorStyle ] );
+		LocalToState( colorPalettes[ colorStyle ], colorStyle );
 	};
 
-	const changeCustomPickerColor = async (color) => {
-		let selectedColorsLocalCopy = { ...selectedColorsLocal };
-		selectedColorsLocalCopy[colorPickerCalledBy] = color;
+	const changeCustomPickerColor = async ( color ) => {
+		const selectedColorsLocalCopy = { ...selectedColorsLocal };
+		selectedColorsLocalCopy[ colorPickerCalledBy ] = color;
 
 		saveCustomColors();
-		LocalToState(selectedColorsLocalCopy, 'custom');
-		setSelectedColorsLocal(selectedColorsLocalCopy);
-		setCustomColors(selectedColorsLocalCopy);
-	}
+		LocalToState( selectedColorsLocalCopy, 'custom' );
+		setSelectedColorsLocal( selectedColorsLocalCopy );
+		setCustomColors( selectedColorsLocalCopy );
+	};
 
-	const selectCustomColor = (colorType) => {
-		setShowColorPicker(!showColorPicker);
+	const selectCustomColor = ( colorType ) => {
+		setShowColorPicker( ! showColorPicker );
 
-		if (!showColorPicker)
-			setColorPickerCalledBy(colorType);
-		else
-			setColorPickerCalledBy('');
-	}
+		if ( ! showColorPicker ) setColorPickerCalledBy( colorType );
+		else setColorPickerCalledBy( '' );
+	};
 
 	async function resetColors() {
 		const globalStyles = await getGlobalStyles();
 		let selectedGlobalStyle;
-		if (currentData?.data?.theme?.variation) {
+		if ( currentData?.data?.theme?.variation ) {
 			selectedGlobalStyle = globalStyles.body.filter(
-				(globalStyle) =>
+				( globalStyle ) =>
 					globalStyle.title === currentData.data.theme.variation
-			)[0];
-		} else if (globalStyles.body[0]?.id === 0) {
-			selectedGlobalStyle = globalStyles.body[0];
+			)[ 0 ];
+		} else if ( globalStyles.body[ 0 ]?.id === 0 ) {
+			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
 		updatePreviewSettings(
-			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
 		);
 		selectedColors.slug = '';
 		selectedColors.name = '';
-		for (let colorVal in selectedColors?.color)
-			selectedColors.color[colorVal].color = '';
-		setCustomColors(stateToLocal(selectedColors));
+		for ( const colorVal in selectedColors?.color )
+			selectedColors.color[ colorVal ].color = '';
+		setCustomColors( stateToLocal( selectedColors ) );
 		currentData.data.palette = selectedColors;
 
-		setSelectedColors(selectedColors)
-		setCurrentOnboardingData(currentData);
+		setSelectedColors( selectedColors );
+		setCurrentOnboardingData( currentData );
 	}
 
-	function buildPalettes () {
-		let paletteRenderedList = [];
-		for (const colorStyle in colorPalettes) {
+	function buildPalettes() {
+		const paletteRenderedList = [];
+		for ( const colorStyle in colorPalettes ) {
 			paletteRenderedList.push(
-				<div key={colorStyle} className={`color-palette ${colorStyle == selectedColors?.slug ? 'color-palette-selected' : ''} `}
-					onClick={(e) => handleClick(colorStyle)}>
-					<div className='color-palette__colors'>
-						<div className='color-palette__colors--tertiary'
-							style={{ backgroundColor: `${colorPalettes[colorStyle]?.tertiary}` }}/>
-						<div className='color-palette__colors--secondary'
-							style={{ backgroundColor: `${colorPalettes[colorStyle]?.secondary}` }}/>
-						<div className='color-palette__colors--primary'
-							style={{ backgroundColor: `${colorPalettes[colorStyle]?.primary}` }} />
+				<div
+					key={ colorStyle }
+					className={ `color-palette ${
+						colorStyle == selectedColors?.slug
+							? 'color-palette-selected'
+							: ''
+					} ` }
+					onClick={ ( e ) => handleClick( colorStyle ) }
+				>
+					<div className="color-palette__colors">
+						<div
+							className="color-palette__colors--tertiary"
+							style={ {
+								backgroundColor: `${ colorPalettes[ colorStyle ]?.tertiary }`,
+							} }
+						/>
+						<div
+							className="color-palette__colors--secondary"
+							style={ {
+								backgroundColor: `${ colorPalettes[ colorStyle ]?.secondary }`,
+							} }
+						/>
+						<div
+							className="color-palette__colors--primary"
+							style={ {
+								backgroundColor: `${ colorPalettes[ colorStyle ]?.primary }`,
+							} }
+						/>
 					</div>
-					<div className='color-palette__name'>
-						{colorStyle?.charAt(0).toUpperCase() + colorStyle?.slice(1) }
+					<div className="color-palette__name">
+						{ colorStyle?.charAt( 0 ).toUpperCase() +
+							colorStyle?.slice( 1 ) }
 					</div>
 				</div>
 			);
@@ -254,77 +327,153 @@ const DesignColors = () => {
 		return paletteRenderedList;
 	}
 
-	function buildCustomPalette () {
-
-		let primaryColorTemp = customColors && customColors?.primary != '' ? customColors?.primary : selectedColorsLocal?.primary ?? '#fff';
-		let secondaryColorTemp = customColors && customColors?.secondary != '' ? customColors?.secondary : selectedColorsLocal?.secondary ?? '#fff';
-		let tertiaryColorTemp = customColors && customColors?.tertiary != '' ? customColors?.tertiary : selectedColorsLocal?.tertiary ?? '#fff';
+	function buildCustomPalette() {
+		const primaryColorTemp =
+			customColors && customColors?.primary != ''
+				? customColors?.primary
+				: selectedColorsLocal?.primary ?? '#fff';
+		const secondaryColorTemp =
+			customColors && customColors?.secondary != ''
+				? customColors?.secondary
+				: selectedColorsLocal?.secondary ?? '#fff';
+		const tertiaryColorTemp =
+			customColors && customColors?.tertiary != ''
+				? customColors?.tertiary
+				: selectedColorsLocal?.tertiary ?? '#fff';
 
 		return (
-			<div className='custom-palette'>
-				<div className='custom-palette__top'
-					onClick={(e) => setIsAccordionClosed(!isAccordionClosed)}>
-					<div className='custom-palette__top-text'>SELECT CUSTOM COLORS</div>
-					{isAccordionClosed && <div className='custom-palette__top-icon'>+</div> }
-					{!isAccordionClosed && <div className='custom-palette__top-icon'>-</div> }
+			<div className="custom-palette">
+				<div
+					className="custom-palette__top"
+					onClick={ ( e ) =>
+						setIsAccordionClosed( ! isAccordionClosed )
+					}
+				>
+					<div className="custom-palette__top-text">
+						SELECT CUSTOM COLORS
+					</div>
+					{ isAccordionClosed && (
+						<div className="custom-palette__top-icon">+</div>
+					) }
+					{ ! isAccordionClosed && (
+						<div className="custom-palette__top-icon">-</div>
+					) }
 				</div>
-				<div className={`custom-palette__below ${isAccordionClosed ? 'custom-palette_acc_closed' : 'custom-palette_acc_opened' }`}>
-					<div className='custom-palette__below-row'
-						onClick={(e) => selectCustomColor('background')}>
-						<div className={`custom-palette__below-row-icon ${customColors?.background && 'custom-palette__below-row-icon_selected_border'}`}
-							style={{ backgroundColor: `${customColors?.background ?? '#FFF'}` }}>
-							{customColors?.background ? <div>&#10003;</div> : null}
-							</div>
-						<div className='custom-palette__below-row-text'>Background</div>
+				<div
+					className={ `custom-palette__below ${
+						isAccordionClosed
+							? 'custom-palette_acc_closed'
+							: 'custom-palette_acc_opened'
+					}` }
+				>
+					<div
+						className="custom-palette__below-row"
+						onClick={ ( e ) => selectCustomColor( 'background' ) }
+					>
+						<div
+							className={ `custom-palette__below-row-icon ${
+								customColors?.background &&
+								'custom-palette__below-row-icon_selected_border'
+							}` }
+							style={ {
+								backgroundColor: `${
+									customColors?.background ?? '#FFF'
+								}`,
+							} }
+						>
+							{ customColors?.background ? (
+								<div>&#10003;</div>
+							) : null }
+						</div>
+						<div className="custom-palette__below-row-text">
+							Background
+						</div>
 					</div>
-					<div className='custom-palette__below-row'
-						onClick={(e) => selectCustomColor('primary')}>
-						<div className={`custom-palette__below-row-icon ${customColors?.primary && 'custom-palette__below-row-icon_selected_border'}`}
-							style={{ backgroundColor: `${primaryColorTemp}` }}>
-							{customColors?.primary ? <>&#10003;</> : null}
+					<div
+						className="custom-palette__below-row"
+						onClick={ ( e ) => selectCustomColor( 'primary' ) }
+					>
+						<div
+							className={ `custom-palette__below-row-icon ${
+								customColors?.primary &&
+								'custom-palette__below-row-icon_selected_border'
+							}` }
+							style={ {
+								backgroundColor: `${ primaryColorTemp }`,
+							} }
+						>
+							{ customColors?.primary ? <>&#10003;</> : null }
+						</div>
+						<div className="custom-palette__below-row-text">
+							Primary
 						</div>
-						<div className='custom-palette__below-row-text'>Primary</div>
 					</div>
-					<div className='custom-palette__below-row'
-						onClick={(e) => selectCustomColor('secondary')}>
-						<div className={`custom-palette__below-row-icon ${customColors?.secondary && 'custom-palette__below-row-icon_selected_border'}`}
-							style={{ backgroundColor: `${secondaryColorTemp}` }}>
-							{customColors?.secondary ? <>&#10003;</> : null}
-							</div>
-						<div className='custom-palette__below-row-text'>Secondary</div>
+					<div
+						className="custom-palette__below-row"
+						onClick={ ( e ) => selectCustomColor( 'secondary' ) }
+					>
+						<div
+							className={ `custom-palette__below-row-icon ${
+								customColors?.secondary &&
+								'custom-palette__below-row-icon_selected_border'
+							}` }
+							style={ {
+								backgroundColor: `${ secondaryColorTemp }`,
+							} }
+						>
+							{ customColors?.secondary ? <>&#10003;</> : null }
+						</div>
+						<div className="custom-palette__below-row-text">
+							Secondary
+						</div>
 					</div>
-					<div className='custom-palette__below-row'
-						onClick={(e) => selectCustomColor('tertiary')}>
-						<div className={`custom-palette__below-row-icon ${customColors?.tertiary && 'custom-palette__below-row-icon_selected_border'}`}
-							style={{ backgroundColor: `${tertiaryColorTemp}` }}>
-							{customColors?.tertiary ? <>&#10003;</> : null}
-							</div>
-						<div className='custom-palette__below-row-text'>Tertiary</div>
+					<div
+						className="custom-palette__below-row"
+						onClick={ ( e ) => selectCustomColor( 'tertiary' ) }
+					>
+						<div
+							className={ `custom-palette__below-row-icon ${
+								customColors?.tertiary &&
+								'custom-palette__below-row-icon_selected_border'
+							}` }
+							style={ {
+								backgroundColor: `${ tertiaryColorTemp }`,
+							} }
+						>
+							{ customColors?.tertiary ? <>&#10003;</> : null }
+						</div>
+						<div className="custom-palette__below-row-text">
+							Tertiary
+						</div>
 					</div>
 				</div>
-				{showColorPicker && (
+				{ showColorPicker && (
 					<Popover>
-						<div className='custom-palette__picker-close-icon'
-							onClick={() => setShowColorPicker(false)}>X</div>
+						<div
+							className="custom-palette__picker-close-icon"
+							onClick={ () => setShowColorPicker( false ) }
+						>
+							X
+						</div>
 						<ColorPicker
-							onChange={changeCustomPickerColor}
+							onChange={ changeCustomPickerColor }
 							defaultValue="#874141"
 						/>
 					</Popover>
-				)}
+				) }
 			</div>
 		);
 	}
 
 	return (
 		<GlobalStylesProvider>
-			<div className='theme-colors--drawer'>
-				<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
-				{/* {selectedColors?.slug && 
+			<div className="theme-colors--drawer">
+				<h2>{ __( 'Color Palettes', 'wp-module-onboarding' ) }</h2>
+				{ /* {selectedColors?.slug && 
 					<div className='theme-colors--drawer--reset' onClick={resetColors}>
 						<div>Reset Button</div>
 					</div>
-				} */}
+				} */ }
 				{ colorPalettes && buildPalettes() }
 				{ colorPalettes && buildCustomPalette() }
 			</div>
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
index eaef14371..db972007b 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
@@ -44,7 +44,7 @@ const DesignThemeStylesPreview = () => {
 		if ( patternResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStylesResponse = await getGlobalStyles(true);
+		const globalStylesResponse = await getGlobalStyles( true );
 		if ( globalStylesResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index a8ef7c670..8a958ae4f 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -114,7 +114,7 @@ const DesignTypography = () => {
 				( globalStyle ) =>
 					globalStyle.title === currentData.data.theme.variation
 			)[ 0 ];
-		} else if (globalStyles.body[0]?.id === 0) {
+		} else if ( globalStyles.body[ 0 ]?.id === 0 ) {
 			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
 		updatePreviewSettings(
@@ -203,16 +203,16 @@ const DesignTypography = () => {
 
 	return (
 		<GlobalStylesProvider>
-			<div ref={drawerFontOptions} className="theme-fonts--drawer">
-				<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
+			<div ref={ drawerFontOptions } className="theme-fonts--drawer">
+				<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
 				{ /* { selectedFont && 
 				<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
 					<div>Reset Button</div>
 				</div>
 			} */ }
-				{fontPalettes && buildPalettes()}
-				{fontPalettes && buildCustomPalette()}
-				<div className="custom-font-palette--hidden">{rerender}</div>
+				{ fontPalettes && buildPalettes() }
+				{ fontPalettes && buildCustomPalette() }
+				<div className="custom-font-palette--hidden">{ rerender }</div>
 			</div>
 		</GlobalStylesProvider>
 	);
diff --git a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js
index 6a85840d1..436da015f 100644
--- a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js
+++ b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js
@@ -1,5 +1,5 @@
-import { useSelect, useDispatch } from '@wordpress/data'; 
-import { useState, useEffect } from '@wordpress/element'; 
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
@@ -7,68 +7,62 @@ import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-s
 
 /**
  * Global Style Parent Component
- * The Fetching of Global Style Object from either store or API is 
+ * The Fetching of Global Style Object from either store or API is
  * common to a lot many places and this component does the trick import { useState, useEffect } from '@wordpress/element';for us.
  *
- * @returns Global Style Parent
+ * @return Global Style Parent
  */
 
-const GlobalStylesProvider = ({ children }) => {
+const GlobalStylesProvider = ( { children } ) => {
+	const [ isLoaded, setIsLoaded ] = useState( false );
 
-    const [isLoaded, setIsLoaded] = useState(false);
+	const { currentData, storedPreviewSettings } = useSelect( ( select ) => {
+		return {
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			storedPreviewSettings:
+				select( nfdOnboardingStore ).getPreviewSettings(),
+		};
+	}, [] );
 
-    const {
-        currentData,
-        storedPreviewSettings,
-    } = useSelect((select) => {
-        return {
-            currentData:
-                select(nfdOnboardingStore).getCurrentOnboardingData(),
-            storedPreviewSettings:
-                select(nfdOnboardingStore).getPreviewSettings(),
-        };
-    }, []);
+	const { updateThemeStatus, updatePreviewSettings } =
+		useDispatch( nfdOnboardingStore );
 
-    const { updateThemeStatus, updatePreviewSettings } =
-        useDispatch(nfdOnboardingStore);
+	const getStylesAndPatterns = async () => {
+		const globalStyles = await getGlobalStyles();
+		if ( globalStyles?.error ) {
+			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
+		}
+		let selectedGlobalStyle;
+		if ( storedPreviewSettings?.title && storedPreviewSettings?.settings )
+			selectedGlobalStyle = storedPreviewSettings;
+		else if ( currentData.data.theme.variation ) {
+			selectedGlobalStyle = globalStyles.body.filter(
+				( globalStyle ) =>
+					globalStyle.title === currentData.data.theme.variation
+			)[ 0 ];
+		} else if ( globalStyles.body[ 0 ]?.id === 0 ) {
+			selectedGlobalStyle = globalStyles.body[ 0 ];
+		}
 
-    const getStylesAndPatterns = async () => {
-        const globalStyles = await getGlobalStyles();
-        if (globalStyles?.error) {
-            return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
-        }
-        let selectedGlobalStyle;
-        if (storedPreviewSettings?.title && storedPreviewSettings?.settings)
-            selectedGlobalStyle = storedPreviewSettings;
-        else if (currentData.data.theme.variation) {
-            selectedGlobalStyle = globalStyles.body.filter(
-                (globalStyle) =>
-                    globalStyle.title === currentData.data.theme.variation
-            )[0];
-        } else if (globalStyles.body[0]?.id === 0) {
-            selectedGlobalStyle = globalStyles.body[0];
-        }
-        
-        if(selectedGlobalStyle)
-            setGlobalStyles({
-                ...selectedGlobalStyle,
-                'title': currentData.data.theme.variation,
-                'version': 2
-            });
+		if ( selectedGlobalStyle )
+			setGlobalStyles( {
+				...selectedGlobalStyle,
+				title: currentData.data.theme.variation,
+				version: 2,
+			} );
 
-        updatePreviewSettings(
-            useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
-        );
-        setIsLoaded(true);
-    };
+		updatePreviewSettings(
+			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
+		);
+		setIsLoaded( true );
+	};
 
-    useEffect(() => {
-        if (!isLoaded) getStylesAndPatterns();
-    }, [isLoaded]);
+	useEffect( () => {
+		if ( ! isLoaded ) getStylesAndPatterns();
+	}, [ isLoaded ] );
 
-    return (
-        children
-    );
+	return children;
 };
 
 export default GlobalStylesProvider;
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index bcfda6d18..e0dd2de5b 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -8,53 +8,57 @@ import { getPatterns } from '../../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import { LivePreview, GlobalStylesProvider } from '../../../components/LivePreview';
-import { THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_COLORS } from '../../../../constants';
+import {
+	LivePreview,
+	GlobalStylesProvider,
+} from '../../../components/LivePreview';
+import {
+	THEME_STATUS_NOT_ACTIVE,
+	VIEW_DESIGN_COLORS,
+} from '../../../../constants';
 
 const StepDesignColors = () => {
 	const location = useLocation();
-	const [isLoaded, setIsLoaded] = useState(false);
-	const [pattern, setPattern] = useState();
+	const [ isLoaded, setIsLoaded ] = useState( false );
+	const [ pattern, setPattern ] = useState();
 
-	const isLargeViewport = useViewportMatch('medium');
-	const {
-		currentStep,
-	} = useSelect((select) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const { currentStep } = useSelect( ( select ) => {
 		return {
-			currentStep: select(nfdOnboardingStore).getStepFromPath(
+			currentStep: select( nfdOnboardingStore ).getStepFromPath(
 				location.pathname
-			)
+			),
 		};
-	}, []);
+	}, [] );
 
 	const {
 		setDrawerActiveView,
 		setIsDrawerOpened,
 		setIsSidebarOpened,
 		setIsDrawerSuppressed,
-	} = useDispatch(nfdOnboardingStore);
+	} = useDispatch( nfdOnboardingStore );
 
-	useEffect(() => {
-		if (isLargeViewport) {
-			setIsDrawerOpened(true);
+	useEffect( () => {
+		if ( isLargeViewport ) {
+			setIsDrawerOpened( true );
 		}
-		setIsSidebarOpened(false);
-		setIsDrawerSuppressed(false);
-		setDrawerActiveView(VIEW_DESIGN_COLORS);
-	}, []);
+		setIsSidebarOpened( false );
+		setIsDrawerSuppressed( false );
+		setDrawerActiveView( VIEW_DESIGN_COLORS );
+	}, [] );
 
 	const getStylesAndPatterns = async () => {
-		const pattern = await getPatterns(currentStep.patternId, true);
-		if (pattern?.error) {
-			return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
+		const pattern = await getPatterns( currentStep.patternId, true );
+		if ( pattern?.error ) {
+			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		setPattern(pattern?.body);
-		setIsLoaded(true);
+		setPattern( pattern?.body );
+		setIsLoaded( true );
 	};
 
-	useEffect(() => {
-		if (!isLoaded) getStylesAndPatterns();
-	}, [isLoaded]);
+	useEffect( () => {
+		if ( ! isLoaded ) getStylesAndPatterns();
+	}, [ isLoaded ] );
 
 	return (
 		<DesignStateHandler>
@@ -68,13 +72,13 @@ const StepDesignColors = () => {
 						</div>
 					</div>
 					<div className="theme-colors-preview__live-preview-container">
-						{pattern && (
+						{ pattern && (
 							<LivePreview
-								blockGrammer={pattern}
-								styling={'custom'}
-								viewportWidth={1300}
+								blockGrammer={ pattern }
+								styling={ 'custom' }
+								viewportWidth={ 1300 }
 							/>
-						)}
+						) }
 					</div>
 				</CommonLayout>
 			</GlobalStylesProvider>
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
index cf18da6fa..73667a5ba 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -14,7 +14,10 @@ import {
 } from '../../../../constants';
 import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import { LivePreviewSelectableCard, GlobalStylesProvider } from '../../../components/LivePreview';
+import {
+	LivePreviewSelectableCard,
+	GlobalStylesProvider,
+} from '../../../components/LivePreview';
 
 const StepDesignHomepageMenu = () => {
 	const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ];
@@ -162,11 +165,11 @@ const StepDesignHomepageMenu = () => {
 				<CommonLayout>
 					<div className="homepage_preview">
 						<HeadingWithSubHeading
-							title={currentStep?.heading}
-							subtitle={currentStep?.subheading}
+							title={ currentStep?.heading }
+							subtitle={ currentStep?.subheading }
 						/>
 						<div className="theme-styles-menu__list">
-							{storedPreviewSettings && buildHomepagePreviews()}
+							{ storedPreviewSettings && buildHomepagePreviews() }
 						</div>
 					</div>
 				</CommonLayout>
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
index e32cb85f5..e0e5744c3 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
@@ -75,7 +75,7 @@ const StepDesignThemeStylesMenu = () => {
 		if ( patternsResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStylesResponse = await getGlobalStyles(true);
+		const globalStylesResponse = await getGlobalStyles( true );
 		if ( globalStylesResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
index fa97f8b33..fe7ab7200 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
@@ -179,21 +179,21 @@ const StepDesignThemeStylesPreview = () => {
 							label={
 								<div className="theme-styles-preview__checkbox__label">
 									<span className="theme-styles-preview__checkbox__label__question">
-										{__(
+										{ __(
 											'Customize Colors & Fonts?',
 											'wp-module-onboarding'
-										)}
+										) }
 										<span className="theme-styles-preview__checkbox__label__hint">
-											{__(
+											{ __(
 												'Check to customize in the next few steps (or leave empty and use the Site Editor later)',
 												'wp-module-onboarding'
-											)}
+											) }
 										</span>
 									</span>
 								</div>
 							}
-							checked={customize}
-							onChange={() => handleCheckbox(!customize)}
+							checked={ customize }
+							onChange={ () => handleCheckbox( ! customize ) }
 						/>
 					</div>
 					<div className="theme-styles-preview__title-bar">
@@ -204,13 +204,13 @@ const StepDesignThemeStylesPreview = () => {
 						</div>
 					</div>
 					<div className="theme-styles-preview__live-preview-container">
-						{pattern && storedPreviewSettings && (
+						{ pattern && storedPreviewSettings && (
 							<LivePreview
-								blockGrammer={pattern}
-								styling={'custom'}
-								viewportWidth={1300}
+								blockGrammer={ pattern }
+								styling={ 'custom' }
+								viewportWidth={ 1300 }
 							/>
-						)}
+						) }
 					</div>
 				</CommonLayout>
 			</GlobalStylesProvider>
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index 2756c8347..8da31e330 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -11,7 +11,10 @@ import {
 	VIEW_DESIGN_TYPOGRAPHY,
 } from '../../../../constants';
 import { DesignStateHandler } from '../../../components/StateHandlers';
-import { LivePreview, GlobalStylesProvider } from '../../../components/LivePreview';
+import {
+	LivePreview,
+	GlobalStylesProvider,
+} from '../../../components/LivePreview';
 
 const StepDesignTypography = () => {
 	const location = useLocation();
@@ -72,14 +75,14 @@ const StepDesignTypography = () => {
 						</div>
 					</div>
 					<div className="theme-fonts-preview__live-preview-container">
-						{pattern && (
+						{ pattern && (
 							<LivePreview
-								blockGrammer={pattern}
-								styling={'custom'}
-								viewportWidth={1300}
-								skeletonLoadingTime={false}
+								blockGrammer={ pattern }
+								styling={ 'custom' }
+								viewportWidth={ 1300 }
+								skeletonLoadingTime={ false }
 							/>
-						)}
+						) }
 					</div>
 				</CommonLayout>
 			</GlobalStylesProvider>
diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js
index 92555d721..06abec7d3 100644
--- a/src/OnboardingSPA/utils/api/themes.js
+++ b/src/OnboardingSPA/utils/api/themes.js
@@ -20,17 +20,21 @@ const init = () => {
 
 const getGlobalStyles = async ( variations = false ) => {
 	return await resolve(
-		apiFetch({ url: onboardingRestURL('themes/variations&variations=' + variations ) } ).then()
+		apiFetch( {
+			url: onboardingRestURL(
+				'themes/variations&variations=' + variations
+			),
+		} ).then()
 	);
 };
 
 const setGlobalStyles = async ( data ) => {
 	return await resolve(
-		apiFetch({
-			url: onboardingRestURL('themes/variations'),
+		apiFetch( {
+			url: onboardingRestURL( 'themes/variations' ),
 			method: 'POST',
-			data
-		}).then()
+			data,
+		} ).then()
 	);
 };
 
@@ -60,4 +64,11 @@ const getThemeColors = async ( theme ) => {
 	);
 };
 
-export { init, getGlobalStyles, setGlobalStyles, getThemeStatus, getThemeColors, getThemeFonts };
+export {
+	init,
+	getGlobalStyles,
+	setGlobalStyles,
+	getThemeStatus,
+	getThemeColors,
+	getThemeFonts,
+};

From e99feddad5425138576cf68227ec10ee16d3b20e Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 18 Nov 2022 16:30:30 +0530
Subject: [PATCH 18/18] PHP Formatting

---
 .../Themes/ThemeVariationsController.php      | 82 +++++++++----------
 1 file changed, 39 insertions(+), 43 deletions(-)

diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php
index 09ac4455e..df0e12aad 100644
--- a/includes/RestApi/Themes/ThemeVariationsController.php
+++ b/includes/RestApi/Themes/ThemeVariationsController.php
@@ -40,47 +40,45 @@ public function register_routes() {
 			$this->rest_base . $this->rest_extended_base,
 			array(
 				array(
-					'methods'  => \WP_REST_Server::READABLE,
-					'args'     => $this->get_pattern_args(),
-					'callback' => array( $this, 'get_theme_variations' ),
+					'methods'             => \WP_REST_Server::READABLE,
+					'args'                => $this->get_pattern_args(),
+					'callback'            => array( $this, 'get_theme_variations' ),
 					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 				),
 				array(
-					'methods'  => \WP_REST_Server::EDITABLE,
-					'args'     => $this->set_pattern_args(),
-					'callback' => array($this, 'set_theme_variation'),
-					'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
+					'methods'             => \WP_REST_Server::EDITABLE,
+					'args'                => $this->set_pattern_args(),
+					'callback'            => array( $this, 'set_theme_variation' ),
+					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 				),
 			)
 		);
 	}
 
-	public function get_pattern_args()
-     {
+	public function get_pattern_args() {
 		// These variable return the orginal numerous variations if true
 		// Else sends the recently saved theme settings in db
-          return array(
-               'variations'   => array(
-                    'type' => 'boolean',
-					'default' => false,
-               )
-          );
-     }
-
-	 public function set_pattern_args()
-     {
+		  return array(
+			  'variations' => array(
+				  'type'    => 'boolean',
+				  'default' => false,
+			  ),
+		  );
+	}
+
+	public function set_pattern_args() {
 		// This is the latest modified Global Style to be saved in the db
-          return array(
-               'title'   => array(
-                    'type'     => 'string',
-					'required' => true,
- 			   ),
-			   'settings'   => array(
-                    'type'     => 'array',
-					'required' => true,
-               )
-          );
-     }
+		 return array(
+			 'title'    => array(
+				 'type'     => 'string',
+				 'required' => true,
+			 ),
+			 'settings' => array(
+				 'type'     => 'array',
+				 'required' => true,
+			 ),
+		 );
+	}
 
 	/**
 	 * Retrieves the active themes variations.
@@ -89,20 +87,19 @@ public function set_pattern_args()
 	 */
 	public function get_theme_variations( \WP_REST_Request $request ) {
 
-		$default = $request->get_param('variations');
+		$default = $request->get_param( 'variations' );
 
 		// If there exists an old Custom Theme then return that
-		if( 'false' === $default && false !== \get_option(Options::get_option_name('theme_settings')) )
-		{
+		if ( 'false' === $default && false !== \get_option( Options::get_option_name( 'theme_settings' ) ) ) {
 			return array(
-				\get_option(Options::get_option_name('theme_settings'))
+				\get_option( Options::get_option_name( 'theme_settings' ) ),
 			);
 		}
 
 		$active_variation              = \WP_Theme_JSON_Resolver::get_merged_data( 'theme' )->get_raw_data();
 		$active_variation_global_style = array(
 			'id'       => 0,
-            'title'    => 'Default',
+			'title'    => 'Default',
 			'version'  => $active_variation['version'],
 			'settings' => $active_variation['settings'],
 			'styles'   => $active_variation['styles'],
@@ -119,16 +116,15 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 	 *
 	 * @return \WP_REST_Response|\WP_Error
 	 */
-	public function set_theme_variation(\WP_REST_Request $request)
-	{
+	public function set_theme_variation( \WP_REST_Request $request ) {
 		// The theme data with the new Colors and Fonts
-		$theme_data = json_decode($request->get_body(), true);
-		
-		if($theme_data){
-			
+		$theme_data = json_decode( $request->get_body(), true );
+
+		if ( $theme_data ) {
+
 			// Save the new Theme style into the db
-			\update_option(Options::get_option_name('theme_settings'), $theme_data);
-			
+			\update_option( Options::get_option_name( 'theme_settings' ), $theme_data );
+
 			return new \WP_REST_Response(
 				$theme_data,
 				200