From c5eeb1751013eb05dd7ed3742e89359dd6be50bc Mon Sep 17 00:00:00 2001
From: Ohad <ohad@elementor.com>
Date: Sun, 20 Oct 2024 13:30:56 +0300
Subject: [PATCH 01/65] Initial refactor commit

---
 classes/database/database-constants.php       |  73 ++
 classes/database/entry.php                    | 386 ++++++++++
 .../exceptions/missing-table-exception.php    |  18 +
 classes/database/table.php                    | 574 +++++++++++++++
 classes/logger.php                            |  37 +
 classes/module-base.php                       | 267 +++++++
 classes/rest/route.php                        | 387 ++++++++++
 classes/utils.php                             |  37 +
 classes/utils/assets.php                      | 142 ++++
 includes/manager.php                          |  57 ++
 includes/pojo-a11y-customizer.php             | 285 --------
 includes/pojo-a11y-settings.php               | 645 -----------------
 .../legacy/components/admin.php               |  24 +-
 modules/legacy/components/customizer.php      | 298 ++++++++
 .../legacy/components/elementor.php           |  11 +-
 .../legacy/components/frontend.php            | 112 +--
 modules/legacy/components/settings.php        | 671 ++++++++++++++++++
 modules/legacy/module.php                     |  67 ++
 plugin.php                                    | 111 +++
 pojo-accessibility.php                        | 100 +--
 20 files changed, 3241 insertions(+), 1061 deletions(-)
 create mode 100644 classes/database/database-constants.php
 create mode 100644 classes/database/entry.php
 create mode 100644 classes/database/exceptions/missing-table-exception.php
 create mode 100644 classes/database/table.php
 create mode 100644 classes/logger.php
 create mode 100644 classes/module-base.php
 create mode 100644 classes/rest/route.php
 create mode 100644 classes/utils.php
 create mode 100644 classes/utils/assets.php
 create mode 100644 includes/manager.php
 delete mode 100644 includes/pojo-a11y-customizer.php
 delete mode 100644 includes/pojo-a11y-settings.php
 rename includes/pojo-a11y-admin-ui.php => modules/legacy/components/admin.php (93%)
 create mode 100644 modules/legacy/components/customizer.php
 rename includes/pojo-a11y-elementor.php => modules/legacy/components/elementor.php (66%)
 rename includes/pojo-a11y-frontend.php => modules/legacy/components/frontend.php (89%)
 create mode 100644 modules/legacy/components/settings.php
 create mode 100644 modules/legacy/module.php
 create mode 100644 plugin.php

diff --git a/classes/database/database-constants.php b/classes/database/database-constants.php
new file mode 100644
index 0000000..1af5f37
--- /dev/null
+++ b/classes/database/database-constants.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace EA11y\Classes\Database;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class Database_Constants {
+	// column types
+	const INT = 'INT';
+	const VARCHAR = 'VARCHAR';
+	const TEXT = 'TEXT';
+	const LONGTEXT = 'LONGTEXT';
+	const DATETIME = 'DATETIME';
+	const TIMESTAMP = 'TIMESTAMP';
+	const ENUM = 'ENUM';
+	const BOOLEAN = 'BOOLEAN';
+	const TINYINT = 'TINYINT';
+
+	// Flags
+	const NOT_NULL = 'NOT NULL';
+	const NULL = 'NULL';
+	const DEFAULT = 'DEFAULT';
+	const AUTO_INCREMENT = 'AUTO_INCREMENT';
+	const COMMENT = 'COMMENT';
+	const UNSIGNED = 'UNSIGNED';
+	const ON_UPDATE = 'ON UPDATE';
+	const CURRENT_TIMESTAMP = 'CURRENT_TIMESTAMP';
+
+	const KEY = 'KEY';
+	const PRIMARY_KEY = 'PRIMARY KEY';
+	const UNIQUE = 'UNIQUE';
+
+	public static function get_col_type( $type, $length = null ) {
+		switch ( $type ) {
+			case self::INT:
+				return 'INT(' . $length . ')';
+			case self::VARCHAR:
+				return 'VARCHAR(' . $length . ')';
+			case self::TEXT:
+				return 'TEXT';
+			case self::LONGTEXT:
+				return 'LONGTEXT';
+			case self::DATETIME:
+				return 'DATETIME';
+			case self::TIMESTAMP:
+				return 'TIMESTAMP';
+			case self::ENUM:
+				return 'ENUM(' . $length . ')';
+			case self::BOOLEAN:
+				return 'BOOLEAN';
+			case self::TINYINT:
+				return 'TINYINT(' . $length . ')';
+			default:
+				return 'VARCHAR(255)';
+		}
+	}
+
+	public static function build_flags_string( $flags = [] ): string {
+		return implode( ' ', $flags );
+	}
+
+	public static function build_key_string( $key, $column, $key_name = null ): string {
+		$key_name = $ke_name ?? $column;
+
+		return $key . ' `' . $key_name . '` (`' . $column . '`)';
+	}
+
+	public static function get_primary_key_string( $column ): string {
+		return 'PRIMARY KEY (`' . $column . '`)';
+	}
+}
diff --git a/classes/database/entry.php b/classes/database/entry.php
new file mode 100644
index 0000000..af6a076
--- /dev/null
+++ b/classes/database/entry.php
@@ -0,0 +1,386 @@
+<?php
+
+namespace EA11y\Classes\Database;
+
+use EA11y\Classes\Database\Exceptions\Missing_Table_Exception;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class DB_Entry_Base
+ * This class represents a single row (or part of a record) from a database table
+ * @property int|mixed|null id
+ */
+class Entry {
+
+
+	/**
+	 * @var Table $db_table
+	 */
+	public $db_table = null;
+	protected $entry_data = [];
+
+	/**
+	 * This class should return the name of the /Table/ derivative class representing the database table holding this
+	 * entry
+	 * @return string - name of the class
+	 */
+	protected static function get_helper_class(): string {
+		return '';
+	}
+
+	/**
+	 * init_by
+	 *
+	 * Return the entry representing the first row in the table that satisfies the conditions set by the parameters
+	 * and its associated data.
+	 *
+	 * @param string       $by    The name of the field to compare the value parameter to in case the
+	 *                            /value/ parameter is a string, otherwise, ignored.
+	 * @param string|array $value If a string, the value to compare against the column specified
+	 *                            by the /by/ parameter.
+	 *                            If an array, can be either a list of column => value entries for direct comparison
+	 *                            joined with the AND logical operator, or in the format of column => [column =>
+	 *                            string, value =>string|int|array<string|array>, comparison operator => string,
+	 *                            relation_before=>string, optional, relation_after=>string, optional].
+	 *
+	 * @return Entry Returns the entry with the data found.
+	 */
+	private function init_by( string $by, $value ): Entry {
+		$data = static::get_by( $by, $value );
+
+		return $this->init_by_data( $data );
+	}
+
+	/**
+	 * get_by
+	 *
+	 * Returns the first row in the table that satisfies the conditions set by the parameters.
+	 *
+	 * @param string       $by    The name of the field to compare the value parameter to in case the
+	 *                            /value/ parameter is a string.
+	 *                            Optional.
+	 *                            Defaults to an empty string.
+	 * @param array|string $value If a string, the value to compare against the column specified
+	 *                            by the /by/ parameter.
+	 *                            If an array, can be either a list of column => value entries for direct comparison
+	 *                            joined with the AND logical operator, or in the format of column => [column =>
+	 *                            string, value =>string|int|array<string|array>, comparison operator => string,
+	 *                            relation_before=>string, optional, relation_after=>string, optional]. Optional.
+	 *                            Defaults to an empty string.
+	 *
+	 * @return mixed|\stdClass|null An object representing the row or NULL in case of an error.
+	 */
+	protected function get_by( string $by = '', $value = '' ) {
+		$fields = '*';
+		$where  = is_array( $value ) ? $value : [ $by => $value ];
+
+		return $this->db_table::first( $fields, $where );
+	}
+
+	/**
+	 * init_by_data
+	 *
+	 * Returns an Entry object with its data set to the data passed by the /data/ parameter.
+	 *
+	 * @param array|object $data The data to set the entry with.
+	 *
+	 * @return $this Returns an entry loaded with the data passes in the parameter, or en Empty entry (representing
+	 *               null) on error
+	 */
+	protected function init_by_data( $data ): Entry {
+		if ( ! $data || is_wp_error( $data ) ) {
+			return $this->return_empty();
+		}
+
+		return $this->set_data( $data );
+	}
+
+	/**
+	 * return_empty
+	 *
+	 * Returns an empty entry project, representing an empty set/null.
+	 *
+	 * NOTE: An empty entry cannot be saved in the database unless you either unset the
+	 * /id/ field or set it for a valid value for an update.
+	 *
+	 * @return Entry Returns the object back
+	 */
+	private function return_empty(): Entry {
+		$this->set_data( [] );
+
+		return $this->set( 'id', 0 );
+	}
+
+	/**
+	 * set_data
+	 *
+	 * Sets the data of this entry object
+	 *
+	 * @param array|object $data The data to set in the current object in the format of key => value
+	 *
+	 * @return $this Returns the object back
+	 */
+	public function set_data( $data ): Entry {
+		$this->entry_data = (array) $data;
+
+		return $this;
+	}
+
+	/**
+	 * init_by_id
+	 *
+	 * Loads the Entry with data from the database fetched by the /id/ column compared to the value passed with the
+	 * /id/ parameter.
+	 *
+	 * @param string $id The value of the /id/ field
+	 *
+	 * @return $this The Entry loaded with the data gotten from the database by the specified ID.
+	 */
+	protected function init_by_id( $id ): Entry {
+		$data = static::get_by( 'id', $id );
+
+		return $this->init_by_data( $data );
+	}
+
+	/**
+	 * __get
+	 * magic get properties
+	 *
+	 * Returns an Entry's data field by key name
+	 *
+	 * @param string $name The name of the field to return
+	 *
+	 * @return mixed|null The value of the field or null if it doesn't exist'
+	 */
+	public function __get( $name ) {
+		return $this->entry_data[ $name ] ?? null;
+	}
+
+	/**
+	 * __set
+	 * magic set properties
+	 *
+	 * Sets an Entry's data field value by the specified key
+	 *
+	 * @param string $name  The key of the field being set
+	 * @param mixed  $value The new value for the field
+	 *
+	 * @return $this Returns the current object back
+	 */
+	public function __set( string $name, $value ) {
+		return $this->set( $name, $value );
+	}
+
+	/**
+	 * set
+	 *
+	 * Sets and entry data field value by the specified key
+	 *
+	 * @param string $name  The key of the field being set
+	 * @param mixed  $value The new value for the field
+	 *
+	 * @return $this Returns the current object back
+	 */
+	public function set( string $name, $value ): Entry {
+		$this->entry_data[ $name ] = $value;
+
+		return $this;
+	}
+
+	/**
+	 * class_short_name
+	 *
+	 * Returns just the name of the class, without its namespace. Used for hooks.
+	 * Taken from https://coderwall.com/p/cpxxxw/php-get-class-name-without-namespace
+	 *
+	 * NOTE: Called on a class without a namespace will return the name of the class
+	 * without the first letter in the name
+	 * @return string The name of the current class
+	 */
+	private function class_short_name(): string {
+		$class_name = get_called_class();
+
+		return ( substr( $class_name, strrpos( $class_name, '\\' ) + 1 ) );
+	}
+
+	/**
+	 * trigger_change
+	 *
+	 * Raises action hooks following the create, delete and update operations.
+	 * Raises the hook [ea11y/db/class_name>/change]. If the /event/
+	 * parameter is not null, then it also raises the hook [ea11y/db/class_name/event].
+	 *
+	 * The parameters sent to both hooks is a reference to the current object and the value of the /data/ parameter.
+	 *
+	 * @param int|bool    $data  Numbers of rows changed or FALSE on database action failure
+	 * @param string|null $event The name of the custom event hook to raise in addition to the /changed/ event hook
+	 *                           Optional.
+	 *                           Defaults to null. In this case, will raise only the defaults /changed/ event.
+	 */
+	private function trigger_change( $data, string $event = null ): void {
+		if ( $event ) {
+			/**
+			 * event specific
+			 * @var Entry     $this
+			 * @var false|int $data
+			 */
+			do_action( 'ea11y/db/' . $this->class_short_name() . '/' . $event, $this, $data );
+		}
+
+		/**
+		 * entity change
+		 * @var Entry     $this
+		 * @var false|int $data
+		 */
+		do_action( 'ea11y/db/' . $this->class_short_name() . '/change', $this, $data );
+	}
+
+	/**
+	 * save
+	 *
+	 * Writes the entry to the database.
+	 * If the entry has a field called /id/ set, will
+	 * perform an update, if it doesn't, will perform an insert.
+	 * Update and create function triggers the change action hooks and the respective custom event
+	 * @return false|int The number of rows inserted or FALSE on error.
+	 */
+	public function save() {
+		if ( isset( $this->entry_data[ 'id' ] ) ) {
+			return $this->update( [ 'id' => $this->entry_data[ 'id' ] ] );
+		}
+
+		return $this->create();
+	}
+
+
+	/**
+	 * delete
+	 *
+	 * Delete entries from the table.
+	 * Bases on the field specified by the /by/ parameter and its current value.
+	 * Triggers change action hooks and raises the /delete/ custom event.
+	 *
+	 * @param string $by The field name to delete by.
+	 *                   Optional.
+	 *                   Defaults to 'id'.
+	 *
+	 * @return false|int The number of rows deleted or false on error.
+	 */
+	public function delete( string $by = 'id' ) {
+		$results = $this->db_table::delete( [ $by => $this->{$by} ] );
+
+		$this->trigger_change( $results, 'delete' );
+
+		return $results;
+	}
+
+	/**
+	 * update
+	 *
+	 * Updates the database with the data of this entry based on the conditions passed
+	 * by the /where/ parameter.
+	 * Triggers change action hooks and raises the /update/ custom event.
+	 *
+	 * NOTE: If no conditions are supplied, the update is going to be performed on all rows,
+	 *
+	 * @param array $where Array of column => (raw) values as a group of AND WHERE conditionals for the UPDATE
+	 *                     statement. Optional. Defaults to an empty array.
+	 *
+	 * @return false|int The number of rows updated or false on error.
+	 */
+	public function update( array $where = [] ) {
+		$results = $this->db_table::update( $this->entry_data, $where );
+
+		$this->trigger_change( $results, 'update' );
+
+		return $results;
+	}
+
+	/**
+	 * create
+	 *
+	 * Inserts the entry to the database table.
+	 * Trigger change action hooks and raises the /create/ custom event,
+	 *
+	 * @param string $id On successful insertion, will set the field passes in the /id/ parameter
+	 *                   ot the value of the last inserted ID as returned from the database.
+	 *                   Optional.
+	 *                   Defaults to 'id'
+	 *
+	 * @return false|int The numbers of rows affected or FALSE on error
+	 */
+	public function create( string $id = 'id' ) {
+		$results = $this->db_table::insert( $this->entry_data );
+		if ( $results ) {
+			// Set row id once created
+			$this->set( $id, $this->db_table::db()->insert_id );
+		}
+
+		$this->trigger_change( $results, 'create' );
+
+		return $results;
+	}
+
+	/**
+	 * reset
+	 *
+	 * Clears all of this entry's data.
+	 */
+	public function reset(): void {
+		$this->entry_data = [];
+	}
+
+	/**
+	 * @return bool
+	 */
+	public function exists(): bool {
+		return isset( $this->entry_data['id'] ) &&  0 < $this->entry_data['id'];
+	}
+
+	/**
+	 * DB_Entry_Base constructor.
+	 * Uses the passed on arguments to initialize/set the Entry.
+	 * Will through an exception in case the Entry's table property is not set correctly, and the /Table/ class
+	 * linking this entry to a database table is not found.
+	 *
+	 * @param array $args The arguments to set this Entry by.
+	 *                    If arguments /by/ and /value/ are set,
+	 *                    will fetch the data according to the column name specified by /by/ and the value(s) specified
+	 *                    by /value/. See doc for /init_by/ for details.
+	 *
+	 * if argument /data/ is set, will set the Entry's data with the data specified.
+	 * See doc for /init_by_data/ for details.
+	 *
+	 * if argument /id/ is specified, will load the data of the row whose /id/ column has the value specified by the
+	 * argument.
+	 *
+	 * Optional.
+	 * Defaults to an empty array which will make this entry as the Empty Entry representing null,
+	 * which cannot be saved unless properly modified to a non-null entry.
+	 *
+	 * @throws Missing_Table_Exception If the Entry table property is not found.
+	 */
+	public function __construct( array $args = [] ) {
+		$this->db_table = static::get_helper_class();
+
+		if ( empty( $this->db_table ) ) {
+			throw new Missing_Table_Exception();
+		}
+		if ( isset( $args[ 'by' ] ) && isset( $args[ 'value' ] ) ) {
+			return $this->init_by( $args[ 'by' ], $args[ 'value' ] );
+		}
+
+		if ( isset( $args[ 'data' ] ) ) {
+			return $this->init_by_data( $args[ 'data' ] );
+		}
+
+		if ( isset( $args[ 'id' ] ) ) {
+			return $this->init_by_id( $args[ 'id' ] );
+		}
+
+		return $this->return_empty();
+	}
+}
diff --git a/classes/database/exceptions/missing-table-exception.php b/classes/database/exceptions/missing-table-exception.php
new file mode 100644
index 0000000..5a9a249
--- /dev/null
+++ b/classes/database/exceptions/missing-table-exception.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace EA11y\Classes\Database\Exceptions;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Missing_Table_Exception
+ *
+ * represent the exception thrown when the Entry's get_helper_class() function is not properly overridden
+ * to return the Table-derivative class which represents the Entry's database representation.
+ */
+class Missing_Table_Exception extends \Exception {
+	protected $message = 'You must provide a PlatformCommon\Database\Table in extending class';
+	protected $code = 'missing_table';
+}
diff --git a/classes/database/table.php b/classes/database/table.php
new file mode 100644
index 0000000..5e5dcfa
--- /dev/null
+++ b/classes/database/table.php
@@ -0,0 +1,574 @@
+<?php
+
+namespace EA11y\Classes\Database;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Table
+ * This class represents a database table
+ */
+class Table {
+	/**
+	 * The current table version. Will be compared to the version installed in the database
+	 */
+	const DB_VERSION = '1';
+	/**
+	 * Should hold the name of the WordPress option to hold the database version
+	 */
+	const DB_VERSION_FLAG_NAME = '';
+
+	/**
+	 * @var string database table name
+	 */
+	public static $table_name = '';
+
+	/**
+	 * @var bool flag whether the table name is already prefixed or not
+	 */
+	protected static $table_prefixed = false;
+
+	/**
+	 * Get a reference to the WordPress database object.
+	 * @return \wpdb A reference to the WordPress database object
+	 */
+	public static function db(): \wpdb {
+		global $wpdb;
+		if ( ! static::$table_prefixed ) {
+			static::$table_prefixed = true;
+			static::set_table_prefix();
+		}
+		return $wpdb;
+	}
+
+	/**
+	 * table_name
+	 *
+	 * Returns the name of the table including the table prefix
+	 * @return string The full name of the table
+	 */
+	public static function table_name(): string {
+		return self::db()->prefix . static::$table_name;
+	}
+
+	/**
+	 * set_table_prefix
+	 *
+	 * Saves the table name as a property in the WP database object and
+	 * sets it value to the table name and its prefix.
+	 */
+	protected static function set_table_prefix(): void {
+		static::db()->{static::$table_name} = static::table_name();
+	}
+
+	/**
+	 * get_columns
+	 *
+	 * Should return an array of table columns details in the format of
+	 * column_name => [ type => db_type, key => key_data (optional), flags => other_modifiers (optional) ]
+	 *
+	 * NOTE: A primary key column named /id/ which is an auto-incremented int/big int is assumed to exist and must be one
+	 * of the columns this function returns.
+	 * @return array The table column data.
+	 */
+	public static function get_columns(): array {
+		return [];
+	}
+
+	/**
+	 * get_extra_keys
+	 *
+	 * Extra keys to the table definitions to be merged with column key definitions
+	 * @return string[] SQL table key definitions
+	 */
+	protected static function get_extra_keys(): array {
+		return [];
+	}
+
+	/**
+	 * get_keys
+	 *
+	 * Extracts the key definitions from the table's columns and merges with
+	 * any extra key definitions
+	 * @return string[] SQL table key definitions
+	 */
+	protected static function get_keys(): array {
+		$columns = static::get_columns();
+		$keys = [];
+		foreach ( $columns as $column ) {
+			if ( ! isset( $column['key'] ) ) {
+				continue;
+			}
+			$keys[] = $column['key'];
+		}
+		return array_merge( $keys, static::get_extra_keys() );
+	}
+
+	/**
+	 * install
+	 *
+	 * This function compares the version of the installed table and the current version as reported by
+	 * the class.
+	 * If the versions are different, the table will be installed or updated, and the option
+	 * will be set to the current version.
+	 */
+	public static function install(): void {
+		$installed_ver = get_option( static::DB_VERSION_FLAG_NAME, -1 );
+
+		if ( static::DB_VERSION !== $installed_ver ) {
+
+			$sql = static::get_create_table_sql();
+
+			require_once ABSPATH . 'wp-admin/includes/upgrade.php';
+			dbDelta( $sql );
+
+			update_option( static::DB_VERSION_FLAG_NAME, static::DB_VERSION, false );
+		}
+
+		static::set_table_prefix();
+	}
+
+	/**
+	 * get_create_table_sql
+	 *
+	 * Generates the SQL command to run in the database to create the table
+	 * based on the definitions of columns and keys.
+	 * @return string The SQL command to create the table
+	 */
+	protected static function get_create_table_sql(): string {
+		$table = static::table_name();
+		$keys = static::get_keys();
+		$charset_collate = static::db()->get_charset_collate();
+		$table_columns = [];
+		$sql = [];
+		$sql[] = 'CREATE TABLE ' . $table . ' (';
+		$columns = static::get_columns();
+		foreach ( $columns as $column_name => $column ) {
+			$table_columns[] = sprintf( '`%s` %s %s,',
+				$column_name,
+				$column['type'],
+				$column['flags'] ?? ''
+			);
+		}
+
+		$sql[] = "\t" . implode( "\n\t", $table_columns );
+		$sql[] = "\t" . implode( ",\n\t", $keys );
+		$sql[] = ") AUTO_INCREMENT=11 {$charset_collate};";
+		return implode( "\n", $sql );
+	}
+
+	/**
+	 * where
+	 *
+	 * Generates a proper WHERE clause for an SQL query.
+	 * @param string|array $where Either a string of where clause (returns as is) or an array of
+	 * conditions join with an AND, and in the format of column => (int|string) for exact value comparison
+	 * or in the format of column => [column => string, value =>string|int|array<string|array>,
+	 * comparison operator => string, relation_before=>string, optional, relation_after=>string, optional]
+	 *
+	 * @return string WHERE clause built from the function input
+	 */
+	public static function where( $where ): string {
+		if ( ! is_array( $where ) ) {
+			return $where;
+		}
+		$needs_relationship = false;
+		$where_string = '';
+		foreach ( $where as $key => $filter ) {
+			if ( ! is_array( $filter ) ) {
+				if ( $needs_relationship ) {
+					$where_string .= ' AND';
+				}
+				$where_string .= ' ' . self::get_where_string( $key, $filter );
+				$needs_relationship = true;
+				continue;
+			}
+
+			$where_string .= self::maybe_add_relation( $filter );
+			$where_string .= self::get_where_string( $filter['column'], $filter['value'], $filter['operator'] );
+			$where_string .= self::maybe_add_relation( $filter, false );
+
+		}
+		return $where_string;
+
+	}
+
+	/**
+	 * maybe_add_relation
+	 *
+	 * Adds a logical relation ship (AND, OR...) if exists, based on the position (before|after) related to the condition.
+	 * @param array $filter Object array describing the where condition that may contain the keys /relation_before/
+	 * or /relation_after/ containing the logical relationship to add to the main WHERE condition.
+	 * @param bool $is_before Whether the current position in the text is before the condition the object describes.
+	 * Optional.
+	 * Defaults to TRUE.
+	 *
+	 * @return string If the logical relationship exists, returns it. Otherwise - an empty string.
+	 */
+	private static function maybe_add_relation( array $filter, bool $is_before = true ): string {
+		$key_to_check = $is_before ? 'relation_before' : 'relation_after';
+		return isset( $filter[ $key_to_check ] ) ? ' ' . $filter[ $key_to_check ] : ' ';
+	}
+
+	/**
+	 * get_where_string
+	 *
+	 * @param string $key The column name in the condition
+	 * @param string|int|array $value The value being compared. If an array will be translated to a set.
+	 * @param string $operator The comparison operator.
+	 * Optional.
+	 * Defaults to '='.
+	 * @param null $format Unused.
+	 *
+	 * @return string An SQL condition based on the parameters.
+	 */
+	private static function get_where_string( string $key, $value, string $operator = '=', $format = null ): string {
+		$param_string = is_int( $value ) ? '%d' : '%s';
+		if ( is_array( $value ) ) {
+			$param_string = '(';
+			$count = count( $value );
+			for ( $i = 0; $i < $count; $i++ ) {
+				$param_string .= is_int( $value[ $i ] ) ? '%d' : '%s';
+				$param_string .= ( $i !== $count - 1 ) ? ', ' : '';
+			}
+			$param_string .= ')';
+		}
+		return static::db()->prepare( "$key $operator $param_string", $value );
+	}
+
+	/**
+	 * get_columns_for_insert
+	 * This function tries to get the column names for an INSERT operation based on the table column
+	 * definition, and if that fails based on the /data/ parameter.
+	 * The function will remove any column called /id/.
+	 * @param mixed $data If a two-dimensional array, where the elements are in the form of column => value,
+	 * the function will try to get the names of the columns off the first element.
+	 *
+	 * @return false|string A string representing the list of columns, comma separated and surrounded by parenthesis;
+	 * or false in case of function failure.
+	 */
+	private static function get_columns_for_insert( $data ) {
+		$cols = static::get_columns();
+		if ( count( $cols ) ) {
+			$columns = array_keys( $cols );
+		} elseif ( is_array( $data ) ) {
+			//try to get from data
+			$columns = array_keys( $data[0] );
+		}
+
+		if ( empty( $columns ) || ! is_array( $columns ) ) {
+			return false;
+		}
+
+		// remove id $column
+		if ( ! empty( $columns['id'] ) ) {
+			unset( $columns['id'] );
+		}
+		$index = array_search( 'id', $columns, true );
+		if ( false !== $index ) {
+			unset( $columns[ $index ] );
+		}
+
+		return ' (`' . implode( '`,`', $columns ) . '`) ';
+	}
+
+	/**
+	 * select_var
+	 *
+	 * Selects a single cell in the table and returns its value as string.
+	 * Will return the first cell of the first row in the result set.
+	 * @param string|array $fields A string of comma-separated list, or an array of columns from the table.
+	 * Optional.
+	 * Defaults to '*' (all table columns)
+	 * @param string|array $where A string of WHERE conditions or an array of column => value entries connected with the
+	 * AND logical operator. Or in the format of column => [column => string, value =>string|int|array<string|array>,
+	 * comparison operator => string, relation_before=>string, optional, relation_after=>string, optional]
+	 * Optional.
+	 * Defaults tp '1', which is evaluated to true and will bring all records (no condition).
+	 * @param int|null $limit Limit the number of results to return to this number, or NULL for no limit.
+	 * Optional.
+	 * Defaults to NULL (no limit)
+	 * @param int|null $offset Skip this number of results or NULL for no skip
+	 * Optional.
+	 * Defaults to NULL (no offset)
+	 * @param string $join JOIN table clause.
+	 * Optional.
+	 * Defaults to an empty string (no join)
+	 *
+	 * @return string|null The query result or NULL on error.
+	 */
+	public static function select_var( $fields = '*', $where = '1', int $limit = null, int $offset = null, string $join = '' ): ?string {
+		return static::db()->get_var( static::build_sql_string( $fields, $where, $limit, $offset, $join ) );
+	}
+
+	/**
+	 * build_sql_string
+	 *
+	 * Generates a SELECT query based on the function input.
+	 * @param string|array $fields A string of comma-separated list, or an array of columns from the table.
+	 * Optional.
+	 * Defaults to '*' (all table columns)
+	 * @param string|array $where A string of WHERE conditions or an array of column => value entries connected with
+	 * the AND logical operator. r in the format of column => [column => string, value =>string|int|array<string|array>,
+	 * comparison operator => string, relation_before=>string, optional, relation_after=>string, optional]
+	 * Optional.
+	 * Defaults to '1', which is evaluated to true and will bring all records (no condition).
+	 * @param int|null $limit Maximum number of results to return.
+	 * Optional.
+	 * Defaults to NULL (no limit)
+	 * @param int|null $offset Start the results from a certain ordinal position.
+	 * Optional.
+	 * Defaults to NULL (no offset)
+	 * @param string $join A table JOIN clause.
+	 * Optional.
+	 * Defaults to an empty string (no join)
+	 * @param array $order_by an array of column => direction (asc|desc) to sort the results by.
+	 * Optional.
+	 * Defaults to an empty array (Default sort).
+	 *
+	 * @return string The SQL SELECT statement built according to the function parameters.
+	 */
+	private static function build_sql_string( $fields = '*', $where = '1', int $limit = null, int $offset = null, string $join = '', array $order_by = [] ): string {
+		if ( is_array( $fields ) ) {
+			$fields = implode( ', ', $fields );
+		}
+
+		$db = static::db();
+		$query_string = 'SELECT %s FROM %s %s WHERE %s';
+		$query_string = sprintf( $query_string,
+			$fields,
+			static::table_name(),
+			$join,
+			static::where( $where )
+		);
+
+		if ( $order_by ) {
+			$query_string .= static::build_order_by_sql_string( $order_by );
+		}
+
+		if ( $limit ) {
+			$query_string .= $db->prepare( ' LIMIT %d', $limit );
+		}
+
+		if ( $offset ) {
+			$query_string .= $db->prepare( ' OFFSET %d', $offset );
+		}
+
+		return $query_string;
+	}
+
+	/**
+	 * build_order_by_sql_string
+	 *
+	 * Generates the ORDER BY clause of the query based on the passed on parameter
+	 * @param array<string, string> $order_by An array of column => direction (asc/desc) pairs
+	 *
+	 * @return string The ORDER BY clause for a query
+	 */
+	public static function build_order_by_sql_string( array $order_by ): string {
+		return ' ORDER BY ' . implode( ', ', array_map( function( $column, $direction ) {
+			return "{$column} {$direction}";
+		}, array_keys( $order_by ), $order_by ) );
+	}
+
+	/**
+	 * select
+	 *
+	 * Runs a SELECT query and returns the results as an array of objects, each object represents a row,
+	 * @param string|array $fields A string of comma-separated list, or an array of columns from the table.
+	 * Optional.
+	 * Defaults to '*' (all table columns)
+	 * @param string|array $where A string of WHERE conditions, or an array of column => value enteries
+	 * for direct comparison joined with the AND logical operator, or in the format of column => [column => string, value =>string|int|array<string|array>,
+	 * comparison operator => string, relation_before=>string, optional, relation_after=>string, optional]
+	 * Optional.
+	 * Defaults to '1', which is evaluated to true and will bring all records (no condition).
+	 * @param int|null $limit Maximum number of results to return.
+	 * Optional.
+	 * Defaults to NULL (no limit)
+	 * @param int|null $offset Start the results from a certain ordinal position.
+	 * Optional.
+	 * Defaults to NULL (no offset)
+	 * @param string|array $join A table JOIN clause.
+	 * Optional.
+	 * Defaults to an empty string (no join)
+	 * @param array $order_by an array of column => direction (asc|desc) to sort the results by.
+	 * Optional.
+	 * Defaults to an empty array (Default sort).
+	 *
+	 * @return array|object|\stdClass[]|null On success, an array of objects. Null on error.
+	 */
+	public static function select( $fields = '*', $where = '1', int $limit = null, int $offset = null, $join = '', array $order_by = [] ) {
+		// TODO: handle $wpdb->last_error
+		$query = static::build_sql_string( $fields, $where, $limit, $offset, $join, $order_by );
+		return static::db()->get_results( $query );
+	}
+
+	/**
+	 * get_col
+	 *
+	 * Returns the first column of the result set.
+	 * @param string $column The column to return.
+	 * Optional.
+	 * Defaults to an empty string.
+	 * @param string|array $where A string of WHERE conditions or an array of column => value entries
+	 * for direct comparison joined with the AND logical operator or in the format of column => [column => string, value =>string|int|array<string|array>,
+	 * comparison operator => string, relation_before=>string, optional, relation_after=>string, optional]
+	 * Optional.
+	 * Defaults to '1', which is evaluated to true and will bring all records (no condition).
+	 * @param int|null $limit Maximum number of results to return.
+	 * Optional.
+	 * Defaults to NULL (no limit)
+	 * @param int|null $offset Start the results from a certain ordinal position.
+	 * Optional.
+	 * Defaults to NULL (no offset)
+	 * @param string $join A table JOIN clause.
+	 * Optional.
+	 * Defaults to an empty string (no join)
+	 * @param array $order_by an array of column => direction (asc|desc) to sort the results by.
+	 * Optional.
+	 * Defaults to an empty array (Default sort).
+	 *
+	 * @return string[] Array of the values of the column as strings, or an empty one on error.
+	 */
+	public static function get_col( string $column = '', $where = '1', int $limit = null, int $offset = null, string $join = '', array $order_by = [] ) : array {
+		return static::db()->get_col( static::build_sql_string( $column, $where, $limit, $offset, $join, $order_by ) );
+	}
+
+	/**
+	 * first
+	 *
+	 * Returns the first row in the table according to the query filters.
+	 * @param string|array $fields A string of comma-separated list, or an array of columns from the table.
+	 * Optional.
+	 * Defaults to '*' (all table columns)
+	 * @param string|array $where A string of WHERE conditions or an array of column => value entries
+	 * for direct comparison joined with the logical AND operator,
+	 * or in the format of column => [column => string, value =>string|int|array<string|array>,
+	 * comparison operator => string, relation_before=>string, optional, relation_after=>string, optional]
+	 * Optional.
+	 * Defaults to '1', which is evaluated to true and will bring all records (no condition).
+	 * @param int $limit Unnecessary since we are only returning the first row.
+	 * Optional.
+	 * Defaults to 1.
+	 * @param null $offset Start the results from a certain ordinal position.
+	 * Optional.
+	 * Defaults to NULL (no offset)
+	 * @param string $join A table JOIN clause.
+	 * Optional.
+	 * Defaults to an empty string (no join)
+	 *
+	 * @return \stdClass|null An object representing the first row, or null on error
+	 */
+	public static function first( $fields = '*', $where = '1', int $limit = 1, $offset = null, string $join = '' ): ?\stdClass {
+		$result = static::select( $fields, $where, $limit, $offset, $join );
+		return ( ! empty( $result[0] ) ) ? $result[0] : null;
+	}
+
+	/**
+	 * replace
+	 *
+	 * Replace a row in a table if it exists or insert a new row in a table if the row does not already exist.
+	 * @param array $data Array of data in the form of column => (raw) value.
+	 * Optional.
+	 * Defaults to an empty array.
+	 *
+	 * @return false|int The number of rows affected or FALSE on error.
+	 */
+	public static function replace( array $data = [] ) {
+		return static::db()->replace( static::table_name(), $data );
+	}
+
+	/**
+	 * insert
+	 *
+	 * Insert a single row into the table.
+	 * @param array $data Array of data to insert in column => (raw) value format.
+	 * Optional, defaults to an empty array.
+	 *
+	 * @return false|int The number of rows affected or FALSE on error
+	 */
+	public static function insert( array $data = [] ) {
+		return static::db()->insert( static::table_name(), $data );
+	}
+
+	/**
+	 * insert_many
+	 * Performs a bulk INSERT of many datasets/rows to the table
+	 *
+	 * @param array $data Optional. Defaults to an empty array.
+	 * An array of datasets to be INSERTed into the table. Each value needs to be seperated by a comma,
+	 * each data set needs to be surrounded by parenthesis.
+	 * @param string|null $columns Optional. The columns being inserted. Defaults to NULL.
+	 * Either a string of comma-separated column names surrounded by parenthesis, or NULL for the
+	 * function to try guessing based on the data and column definitions.
+	 *
+	 * @return false|int Number of rows affected or false on error
+	 */
+	public static function insert_many( array $data = [], string $columns = null ) {
+		if ( null === $columns ) {
+			$columns = static::get_columns_for_insert( $data );
+			if ( ! $columns ) {
+				return false;
+			}
+		}
+		$insert_sql = 'INSERT INTO ' . static::table_name() . $columns . ' VALUES ' . implode( ",\n", $data ) . ';';
+		return static::db()->query( $insert_sql ); // no params so no need for `prepare`.
+	}
+
+	/**
+	 * update
+	 *
+	 * Updates data in the table, based on where conditionals
+	 * @param array<string, mixed> $data Optional. Array of column => (raw) values to be updated.
+	 * Defaults to an empty array.
+	 * @param array<string, mixed> $where Optional. Array of column => (raw) values as a group of AND
+	 * WHERE conditionals for the UPDATE statement. Defaults to an empty array.
+	 *
+	 * @return false|int The numbers of rows affected, or FALSE on error
+	 */
+	public static function update( array $data = [], array $where = [] ) {
+		return static::db()->update( static::table_name(), $data, $where );
+	}
+
+	/**
+	 * delete
+	 *
+	 * Delete rows from this table based on optional where conditions.
+	 *
+	 * @param array<string, mixed> $where Optional. And array of column => (raw) values
+	 * as a group of AND conditions for the DELETE statement. Defaults to an empty array.
+	 *
+	 * @return false|int The number of rows updated, or false on error.
+	 */
+	public static function delete( array $where = [] ) {
+		return static::db()->delete( static::table_name(), $where );
+	}
+
+	/**
+	 * query
+	 *
+	 * Execute any SQL query on the database.
+	 * It is best used when there is a need for specific,
+	 * custom, or otherwise complex SQL queries.
+	 * @param string $query The query to be executed. Defaults to an empty string
+	 *
+	 * @return false|int Boolean true for CREATE, ALTER, TRUNCATE and DROP queries.
+	 * Number of rows affected/selected for all other queries. Boolean false on error.
+	 */
+	public static function query( string $query = '' ) {
+		return static::db()->query( $query );
+	}
+
+	/**
+	 * get_class_name
+	 *
+	 * Returns the name of this /Table/ class (or its derivative)
+	 * @return string - The name of the current class
+	 */
+	public static function get_class_name(): string {
+		return get_called_class();
+	}
+}
diff --git a/classes/logger.php b/classes/logger.php
new file mode 100644
index 0000000..0216187
--- /dev/null
+++ b/classes/logger.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace EA11y\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Logger {
+	public const LEVEL_ERROR = 'error';
+	public const LEVEL_WARN = 'warn';
+	public const LEVEL_INFO = 'info';
+
+	private static function log( string $log_level, $message ): void {
+		$backtrace = debug_backtrace(); // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_debug_backtrace
+
+		$class    = $backtrace[2]['class'] ?? null;
+		$type     = $backtrace[2]['type'] ?? null;
+		$function = $backtrace[2]['function'];
+
+		if ( $class ) {
+			$message = '[Site Mailer]: ' . $log_level . ' in ' . "$class$type$function()" . ': ' . $message;
+		} else {
+			$message = '[Site Mailer]: ' . $log_level . ' in ' . "$function()" . ': ' . $message;
+		}
+
+		error_log( $message ); // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log
+	}
+
+	public static function error( $message ): void {
+		self::log( self::LEVEL_ERROR, $message );
+	}
+
+	public static function info( $message ): void {
+		self::log( self::LEVEL_INFO, $message );
+	}
+}
diff --git a/classes/module-base.php b/classes/module-base.php
new file mode 100644
index 0000000..4633240
--- /dev/null
+++ b/classes/module-base.php
@@ -0,0 +1,267 @@
+<?php
+
+namespace EA11y\Classes;
+
+use ReflectionClass;
+use ReflectionException;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Module Base.
+ *
+ * An abstract class providing the properties and methods needed to
+ * manage and handle modules in inheriting classes.
+ *
+ * @abstract
+ */
+abstract class Module_Base {
+
+	/**
+	 * Module class reflection.
+	 *
+	 * Holds the information about a class.
+	 * @access private
+	 *
+	 * @var ReflectionClass
+	 */
+	private $reflection = null;
+
+	/**
+	 * Module components.
+	 *
+	 * Holds the module components.
+	 * @access private
+	 *
+	 * @var array
+	 */
+	private $components = [];
+
+	/**
+	 * Module routes.
+	 *
+	 * Holds the module registered routes.
+	 * @access public
+	 *
+	 * @var array
+	 */
+	public $routes = [];
+
+	/**
+	 * Module instance.
+	 *
+	 * Holds the module instance.
+	 * @access protected
+	 *
+	 * @var Module_Base[]
+	 */
+	// @phpcs:ignore
+	protected static $_instances = [];
+
+	/**
+	 * Get module name.
+	 *
+	 * Retrieve the module name.
+	 * @access public
+	 * @abstract
+	 *
+	 * @return string Module name.
+	 */
+	abstract public function get_name();
+
+	/**
+	 * Instance.
+	 *
+	 * Ensures only one instance of the module class is loaded or can be loaded.
+	 * @access public
+	 * @static
+	 *
+	 * @return Module_Base An instance of the class.
+	 */
+	public static function instance() {
+		$class_name = static::class_name();
+
+		if ( empty( static::$_instances[ $class_name ] ) ) {
+			static::$_instances[ $class_name ] = new static(); // @codeCoverageIgnore
+		}
+
+		return static::$_instances[ $class_name ];
+	}
+
+	public static function set_instance( $instance ) {
+		$class_name = static::class_name();
+		static::$_instances[ $class_name ] = $instance;
+	}
+
+	/**
+	 * is_active
+	 * @access public
+	 * @static
+	 * @return bool
+	 */
+	public static function is_active() {
+		return true;
+	}
+
+	/**
+	 * Class name.
+	 *
+	 * Retrieve the name of the class.
+	 * @access public
+	 * @static
+	 */
+	public static function class_name() {
+		return get_called_class();
+	}
+
+	/**
+	 * Clone.
+	 *
+	 * Disable class cloning and throw an error on object clone.
+	 *
+	 * The whole idea of the singleton design pattern is that there is a single
+	 * object. Therefore, we don't want the object to be cloned.
+	 *
+	 * @access public
+	 */
+	public function __clone() {
+		// Cloning instances of the class is forbidden
+		_doing_it_wrong( __FUNCTION__, esc_html__( 'Something went wrong.', 'pojo-accessibility' ), '0.0.1' ); // @codeCoverageIgnore
+	}
+
+	/**
+	 * Wakeup.
+	 *
+	 * Disable un-serializing of the class.
+	 * @access public
+	 */
+	public function __wakeup() {
+		// un-serializing instances of the class is forbidden
+		_doing_it_wrong( __FUNCTION__, esc_html__( 'Something went wrong.', 'pojo-accessibility' ), '0.0.1' ); // @codeCoverageIgnore
+	}
+
+	/**
+	 * @access public
+	 */
+	public function get_reflection() {
+		if ( null === $this->reflection ) {
+			try {
+				$this->reflection = new ReflectionClass( $this );
+			} catch ( ReflectionException $e ) {
+				if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
+					// phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log
+					error_log( $e->getMessage() );
+				}
+			}
+		}
+
+		return $this->reflection;
+	}
+
+	/**
+	 * Add module component.
+	 *
+	 * Add new component to the current module.
+	 * @access public
+	 *
+	 * @param string $id       Component ID.
+	 * @param mixed  $instance An instance of the component.
+	 */
+	public function add_component( $id, $instance ) {
+		$this->components[ $id ] = $instance;
+	}
+
+	/**
+	 * Add module route.
+	 *
+	 * Add new route to the current module.
+	 * @access public
+	 *
+	 * @param string $id       Route ID.
+	 * @param mixed  $instance An instance of the route.
+	 */
+	public function add_route( string $id, $instance ) {
+		$this->routes[ $id ] = $instance;
+	}
+
+	/**
+	 * @access public
+	 * @return Module[]
+	 */
+	public function get_components() {
+		return $this->components;
+	}
+
+	/**
+	 * Get module component.
+	 *
+	 * Retrieve the module component.
+	 * @access public
+	 *
+	 * @param string $id Component ID.
+	 *
+	 * @return mixed An instance of the component, or `false` if the component
+	 *               doesn't exist.
+	 * @codeCoverageIgnore
+	 */
+	public function get_component( $id ) {
+		if ( isset( $this->components[ $id ] ) ) {
+			return $this->components[ $id ];
+		}
+
+		return false;
+	}
+
+	/**
+	 * Retrieve the namespace of the class
+	 *
+	 * @access public
+	 * @static
+	 */
+	public static function namespace_name() {
+		$class_name = static::class_name();
+		return substr( $class_name, 0, strrpos( $class_name, '\\' ) );
+	}
+
+
+
+	public static function routes_list() : array {
+		return [];
+	}
+
+	public static function component_list() : array {
+		return [];
+	}
+
+	/**
+	 * Adds an array of components.
+	 * Assumes namespace structure contains `\Components\`
+	 *
+	 * @param array $components_ids => component's class name.
+	 */
+	public function register_components( $components_ids = null ) {
+		$namespace = static::namespace_name();
+		$components_ids = $components_ids ?? static::component_list();
+		foreach ( $components_ids as $component_id ) {
+			$class_name = $namespace . '\\Components\\' . $component_id;
+			$this->add_component( $component_id, new $class_name() );
+		}
+	}
+
+	/**
+	 * Adds an array of routes.
+	 * Assumes namespace structure contains `\Rest\`
+	 */
+	public function register_routes() {
+		$namespace = static::namespace_name();
+		$routes_ids = static::routes_list();
+
+		foreach ( $routes_ids as $route_id ) {
+			$class_name = $namespace . '\\Rest\\' . $route_id;
+			$this->add_route( $route_id, new $class_name() );
+		}
+	}
+}
+
diff --git a/classes/rest/route.php b/classes/rest/route.php
new file mode 100644
index 0000000..921b8a4
--- /dev/null
+++ b/classes/rest/route.php
@@ -0,0 +1,387 @@
+<?php
+
+namespace EA11y\Classes\Rest;
+
+use ReflectionClass;
+use WP_Error;
+use WP_REST_Request;
+use WP_REST_Response;
+use WP_User;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+abstract class Route {
+
+	/**
+	 * Should the endpoint be validated for user authentication?
+	 * If set to TRUE, the default permission callback will make sure the user is logged in and has a valid user id
+	 * @var bool
+	 */
+	protected $auth = true;
+
+	/**
+	 * holds current authenticated user id
+	 * @var int
+	 */
+	protected $current_user_id;
+
+	/**
+	 * Rest Endpoint namespace
+	 * @var string
+	 */
+	protected $namespace = 'ea11y/v1';
+
+	/**
+	 * @var array The valid HTTP methods. The list represents the general REST methods. Do not modify.
+	 */
+	private $valid_http_methods = [
+		'GET',
+		'PATCH',
+		'POST',
+		'PUT',
+		'DELETE',
+	];
+
+	/**
+	 * Route_Base constructor.
+	 */
+	public function __construct() {
+		add_action( 'rest_api_init', [ $this, 'rest_api_init' ] );
+	}
+
+	/**
+	 * rest_api_init
+	 *
+	 * Registers REST endpoints.
+	 * Loops through the REST methods for this route, creates an endpoint configuration for
+	 * each of them and registers all the endpoints with the WordPress system.
+	 */
+	public function rest_api_init(): void {
+		$methods = $this->get_methods();
+		if ( empty( $methods ) ) {
+			return;
+		}
+
+		//$callbacks = false;
+		$callbacks = [];
+		foreach ( (array) $methods as $method ) {
+			if ( ! in_array( $method, $this->valid_http_methods, true ) ) {
+				continue;
+			}
+			$callbacks[] = $this->build_endpoint_method_config( $method );
+		}
+
+		$arguments = $this->get_arguments();
+
+		if ( ! $callbacks && empty( $arguments ) ) {
+			return;
+		}
+
+		$arguments = array_merge( $arguments, (array) $callbacks );
+		register_rest_route( $this->namespace, '/' . $this->get_endpoint() . '/', $arguments, $this->override );
+	}
+
+	/**
+	 * get_methods
+	 * Rest Endpoint methods
+	 *
+	 * Returns an array of the supported REST methods for this route
+	 * @return array<string> REST methods being configured for this route.
+	 */
+	abstract public function get_methods(): array;
+
+	/**
+	 * get_callback
+	 *
+	 * Returns a reference to the callback function to handle the REST method specified by the /method/ parameter.
+	 * @param string $method The REST method name
+	 *
+	 * @return callable A reference to a member function with the same name as the REST method being passed as a parameter,
+	 * or a reference to the default function /callback/.
+	 */
+	public function get_callback_method( string $method ): callable {
+		$method_name = strtolower( $method );
+		$callback = $this->method_exists_in_current_class( $method_name ) ? $method_name : 'callback';
+		return [ $this, $callback ];
+	}
+
+	/**
+	 * get_permission_callback_method
+	 *
+	 * Returns a reference to the permission callback for the method if exists or the default one if it doesn't.
+	 * @param string $method The REST method name
+	 *
+	 * @return callable If a method called (rest-method)_permission_callback exists, returns a reference to it, otherwise
+	 * returns a reference to the default member method /permission_callback/.
+	 */
+	public function get_permission_callback_method( string $method ): callable {
+		$method_name = strtolower( $method );
+		$permission_callback_method = $method_name . '_permission_callback';
+		$permission_callback = $this->method_exists_in_current_class( $permission_callback_method ) ? $permission_callback_method : 'permission_callback';
+		return [ $this, $permission_callback ];
+	}
+
+	/**
+	 * maybe_add_args_to_config
+	 *
+	 * Checks if the class has a method call (rest-method)_args.
+	 * If it does, the function calls it and adds its response to the config object passed to the function, under the /args/ key.
+	 * @param string $method The REST method name being configured
+	 * @param array $config The configuration object for the method
+	 *
+	 * @return array The configuration object for the method, possibly after being amended
+	 */
+	public function maybe_add_args_to_config( string $method, array $config ): array {
+		$method_name = strtolower( $method );
+		$method_args = $method_name . '_args';
+		if ( $this->method_exists_in_current_class( $method_args ) ) {
+			$config['args'] = $this->{$method_args}();
+		}
+		return $config;
+	}
+
+	/**
+	 * maybe_add_response_to_swagger
+	 *
+	 * If the function method /(rest-method)_response_callback/ exists, adds the filter
+	 * /swagger_api_response_(namespace with slashes replaced with underscores)_(endpoint with slashes replaced with underscores)/
+	 * with the aforementioned function method.
+	 * This filter is used with the WP API Swagger UI plugin to create documentation for the API.
+	 * The value being passed is an array: [
+	'200' => ['description' => 'OK'],
+	'404' => ['description' => 'Not Found'],
+	'400' => ['description' => 'Bad Request']
+	]
+	 * @param string $method REST method name
+	 */
+	public function maybe_add_response_to_swagger( string $method ): void {
+		$method_name = strtolower( $method );
+		$method_response_callback = $method_name . '_response_callback';
+		if ( $this->method_exists_in_current_class( $method_response_callback ) ) {
+			$response_filter = $method_name . '_' . str_replace(
+				'/',
+				'_',
+				$this->namespace . '/' . $this->get_endpoint()
+			);
+			add_filter( 'swagger_api_responses_' . $response_filter, [ $this, $method_response_callback ] );
+		}
+	}
+
+	/**
+	 * build_endpoint_method_config
+	 *
+	 * Builds a configuration array for the endpoint based on the presence of the callback, permission, additional parameters,
+	 * and response to Swagger member functions.
+	 * @param string $method The REST method for the endpoint
+	 *
+	 * @return array The endpoint configuration for the method specified by the parameter
+	 */
+	private function build_endpoint_method_config( string $method ): array {
+		$config = [
+			'methods' => $method,
+			'callback' => $this->get_callback_method( $method ),
+			'permission_callback' => $this->get_permission_callback_method( $method ),
+		];
+		$config = $this->maybe_add_args_to_config( $method, $config );
+		return $config;
+	}
+
+	/**
+	 * method_exists_in_current_class
+	 *
+	 * Uses reflection to check if this class has the /method/ method.
+	 * @param string $method The name of the method being checked.
+	 *
+	 * @return bool TRUE if the class has the /method/ method, FALSE otherwise.
+	 */
+	private function method_exists_in_current_class( string $method ): bool {
+		$class_name = get_class( $this );
+		try {
+			$reflection = new ReflectionClass( $class_name );
+		} catch ( \ReflectionException $e ) {
+			return false;
+		}
+		if ( ! $reflection->hasMethod( $method ) ) {
+			return false;
+		}
+		$method_ref = $reflection->getMethod( $method );
+
+		return ( $method_ref && $class_name === $method_ref->class );
+	}
+
+	/**
+	 * @param $data
+	 *
+	 * @return WP_REST_Response
+	 */
+	public function respond_success_json( $data = [] ): WP_REST_Response {
+		return new WP_REST_Response([
+			'success' => true,
+			'data' => $data,
+		]);
+	}
+
+	/**
+	 * @param array{message: string, code: string} $data
+	 *
+	 * @return WP_Error
+	 */
+	public function respond_error_json( array $data ): WP_Error {
+		if ( ! isset( $data['message'] ) || ! isset( $data['code'] ) ) {
+			_doing_it_wrong(
+				__FUNCTION__,
+				esc_html__( 'Both `message` and `code` keys must be provided', 'pojo-accessibility' ),
+				'1.0.0'
+			); // @codeCoverageIgnore
+		}
+
+		return new WP_Error(
+			$data['code'] ?? 'internal_server_error',
+			$data['message'] ?? esc_html__( 'Internal server error', 'pojo-accessibility' ),
+		);
+	}
+
+	public function verify_capability( $capability = 'manage_options' ) {
+		if ( ! current_user_can( $capability ) ) {
+			return $this->respond_error_json([
+				'message' => esc_html__( 'You do not have sufficient permissions to access this data.', 'pojo-accessibility' ),
+				'code' => '401 Unauthorized',
+			]);
+		}
+	}
+
+	/**
+	 * permission_callback
+	 * Permissions callback fallback for the endpoint
+	 * Gets the current user ID and sets the /current_user_id/ property.
+	 * If the /auth/ property is set to /true/ will make sure that the user is logged in (has an id greater than 0)
+	 *
+	 * @param WP_REST_Request $request unused
+	 *
+	 * @return bool TRUE, if permission granted, FALSE otherwise
+	 */
+	public function permission_callback( WP_REST_Request $request ): bool {
+		// try to get current user
+		$this->current_user_id = get_current_user_id();
+		if ( $this->auth ) {
+			return $this->current_user_id > 0;
+		}
+
+		return true;
+	}
+
+	/**
+	 * callback
+	 * Fallback callback function, returns a response consisting of the string /ok/.
+	 *
+	 * @param WP_REST_Request $request unused
+	 *
+	 * @return WP_REST_Response Default Response of the string 'ok'.
+	 */
+	public function callback( WP_REST_Request $request ): WP_REST_Response {
+		return rest_ensure_response( [ 'OK' ] );
+	}
+
+	/**
+	 * respond_wrong_method
+	 *
+	 * Creates a WordPress error object with the /rest_no_route/ code and the message and code supplied or the defaults.
+	 * @param null $message The error message for the wrong method.
+	 * Optional.
+	 * Defaults to null, which makes sets the message to /No route was found matching the URL and request method/
+	 * @param int $code The HTTP status code.
+	 * Optional.
+	 * Defaults to 404 (Not found).
+	 *
+	 * @return WP_Error The WordPress error object with the error message and status code supplied
+	 */
+	public function respond_wrong_method( $message = null, int $code = 404 ): WP_Error {
+		if ( null === $message ) {
+			$message = __( 'No route was found matching the URL and request method', 'pojo-accessibility' );
+		}
+
+		return new WP_Error( 'rest_no_route', $message, [ 'status' => $code ] );
+	}
+
+	/**
+	 * respond_with_code
+	 * Create a new /WP_REST_Response/ object with the specified data and HTTP response code.
+	 *
+	 * @param array|null $data The data to return in this response
+	 * @param int $code The HTTP response code.
+	 * Optional.
+	 * Defaults to 200 (OK).
+	 *
+	 * @return WP_REST_Response The WordPress response object loaded with the data and the response code.
+	 */
+	public function respond_with_code( ?array $data = null, int $code = 200 ): WP_REST_Response {
+		return new WP_REST_Response( $data, $code );
+	}
+
+	/**
+	 * get_user_from_request
+	 *
+	 * Returns the current user object.
+	 * Depends on the property /current_user_id/ to be set.
+	 * @return WP_User|false The user object or false if not found or on error.
+	 */
+	public function get_user_from_request() {
+		return get_user_by( 'id', $this->current_user_id );
+	}
+
+	/**
+	 * get_arguments
+	 * Rest Endpoint extra arguments
+	 * @return array Additional arguments for the route configuration
+	 */
+	public function get_arguments(): array {
+		return [];
+	}
+
+	/**
+	 * get_endpoint
+	 * Rest route Endpoint
+	 * @return string Endpoint uri component (comes after the route namespace)
+	 */
+	abstract public function get_endpoint(): string;
+
+	/**
+	 * get_name
+	 * @return string The name of the route
+	 */
+	abstract public function get_name(): string;
+
+	/**
+	 * get_self_url
+	 *
+	 * @param string $endpoint
+	 *
+	 * @return string
+	 */
+	public function get_self_url( string $endpoint = '' ): string {
+		return rest_url( $this->namespace . '/' . $endpoint );
+	}
+
+	public function verify_nonce( $nonce = '', $name = '' ) {
+		if ( ! wp_verify_nonce( sanitize_text_field( wp_unslash( $nonce ) ), $name ) ) {
+			return $this->respond_error_json([
+				'message' => esc_html__( 'Invalid nonce', 'pojo-accessibility' ),
+				'code' => 'bad_request',
+			]);
+		}
+	}
+
+	public function verify_nonce_and_capability( $nonce = '', $name = '', $capability = 'manage_options' ) {
+		$this->verify_nonce( $nonce, $name );
+
+		if ( ! current_user_can( $capability ) ) {
+			return $this->respond_error_json([
+				'message' => esc_html__( 'You do not have sufficient permissions to access this data.', 'pojo-accessibility' ),
+				'code' => 'bad_request',
+			]);
+		}
+	}
+
+}
diff --git a/classes/utils.php b/classes/utils.php
new file mode 100644
index 0000000..ee12487
--- /dev/null
+++ b/classes/utils.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace EA11y\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Utils {
+
+	public static function is_plugin_page(): bool {
+		$current_screen = get_current_screen();
+
+		return str_contains( $current_screen->id, 'ea11y-' );
+	}
+	public static function user_is_admin(): bool {
+		return current_user_can( 'manage_options' );
+	}
+	public static function is_wp_dashboard_page(): bool {
+		$current_screen = get_current_screen();
+
+		return str_contains( $current_screen->id, 'dashboard' );
+	}
+
+	public static function is_wp_settings_page(): bool {
+		$current_screen = get_current_screen();
+
+		return str_contains( $current_screen->id, 'options-' );
+	}
+
+	public static function is_elementor_installed() {
+		$file_path = 'elementor/elementor.php';
+		$installed_plugins = get_plugins();
+		return isset( $installed_plugins[ $file_path ] );
+	}
+
+}
diff --git a/classes/utils/assets.php b/classes/utils/assets.php
new file mode 100644
index 0000000..37aeec7
--- /dev/null
+++ b/classes/utils/assets.php
@@ -0,0 +1,142 @@
+<?php
+
+namespace EA11y\Classes\Utils;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Assets
+ */
+class Assets {
+	/**
+	 * enqueue_scripts
+	 *
+	 * @param string $handle
+	 * @param string $script_name
+	 * @param array $dependencies
+	 * @param string $version
+	 * @param bool $footer
+	 */
+	public static function enqueue_scripts( string $handle, string $script_name, array $dependencies = [], string $version = '', bool $footer = false ) : void {
+		$asset_data = self::get_asset_version_and_suffix( $version );
+		wp_enqueue_script(
+			$handle,
+			self::get_assets_path( $script_name, 'js', $asset_data['suffix'] ),
+			$dependencies,
+			$asset_data['version'],
+			$footer
+		);
+	}
+
+	/**
+	 * enqueue_styles
+	 *
+	 * @param string $handle
+	 * @param string $style_name
+	 * @param array $dependencies
+	 * @param string $version
+	 */
+	public static function enqueue_styles( string $handle, string $style_name, array $dependencies = [], string $version = '' ) {
+		$asset_data = self::get_asset_version_and_suffix( $version );
+		wp_enqueue_style(
+			$handle,
+			self::get_assets_path( $style_name, 'css', $asset_data['suffix'] ),
+			$dependencies,
+			$asset_data['version']
+		);
+	}
+
+	/**
+	 * get_assets_version
+	 *
+	 * @param string $version
+	 *
+	 * @return string
+	 */
+	private static function get_assets_version( string $version = '' ) : string {
+		return empty( $version ) ? \SITE_MAILER_VERSION : $version;
+	}
+
+	/**
+	 * get_assets_suffix
+	 * @return string
+	 */
+	private static function get_assets_suffix() : string {
+		return defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
+	}
+
+	/**
+	 * get_asset_version_and_suffix
+	 *
+	 * @param string $version
+	 *
+	 * @return array
+	 */
+	private static function get_asset_version_and_suffix( string $version = '' ) : array {
+		return [
+			'version' => self::get_assets_version( $version ),
+			'suffix' => self::get_assets_suffix(),
+		];
+	}
+
+	/**
+	 * get_assets_path
+	 *
+	 * @param string $asset_name
+	 * @param string $asset_type
+	 * @param string $suffix
+	 *
+	 * @return string
+	 */
+	private static function get_assets_path( string $asset_name, string $asset_type, string $suffix = '' ) : string {
+		return \SITE_MAILER_ASSETS_URL . '/build/' . $asset_name . $suffix . '.' . $asset_type;
+		//TODO: Check if we need this
+		//return \SITE_MAILER_ASSETS_URL . $asset_type . '/' . ( '' === $suffix ? 'dev/' : '' ) . $asset_name . $suffix . '.' . $asset_type;
+	}
+
+	/**
+	 * enqueue_app_assets
+	 *
+	 * @param string $handle
+	 * @param bool $with_css
+	 */
+	public static function enqueue_app_assets( string $handle = '', bool $with_css = true ) : void {
+		$dir = \SITE_MAILER_ASSETS_PATH . 'build/';
+		$url = \SITE_MAILER_ASSETS_URL . 'build/';
+
+		$script_asset_path = $dir . $handle . '.asset.php';
+		if ( ! file_exists( $script_asset_path ) ) {
+			throw new \Error(
+				'You need to run `npm start` or `npm run build` for the "' . esc_html( $handle ) . '" script first.'
+			);
+		}
+
+		// enqueue js
+		$script_asset = require $script_asset_path;
+		wp_enqueue_script(
+			$handle,
+			$url . $handle . '.js',
+			array_merge( $script_asset['dependencies'], [ 'wp-util' ] ),
+			$script_asset['version'],
+			true,
+		);
+
+		// add translation support
+		wp_set_script_translations( $handle, 'elementor-sw' );
+
+		if ( ! $with_css ) {
+			return;
+		}
+		// enqueue css
+		$css_file_name = 'style-' . $handle . '.css';
+		$css_version = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? filemtime( $dir . $css_file_name ) : \SITE_MAILER_VERSION;
+		wp_enqueue_style(
+			$handle,
+			$url . $css_file_name,
+			[ 'wp-components' ],
+			$css_version
+		);
+	}
+}
diff --git a/includes/manager.php b/includes/manager.php
new file mode 100644
index 0000000..a8b29d6
--- /dev/null
+++ b/includes/manager.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace EA11y;
+
+use EA11y\Classes\Module_Base;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+final class Manager {
+	/**
+	 * @var Module_Base[]
+	 */
+	private array $modules = [];
+
+	public static function get_module_list(): array {
+		return [
+			'Legacy',
+		];
+	}
+
+	/**
+	 * @codeCoverageIgnore
+	 */
+	public function __construct() {
+		$modules = self::get_module_list();
+
+		foreach ( $modules as $module_name ) {
+			$class_name = str_replace( '-', ' ', $module_name );
+			$class_name = str_replace( ' ', '', ucwords( $class_name ) );
+			$class_name = __NAMESPACE__ . '\\Modules\\' . $class_name . '\Module';
+
+			/** @var Module_Base $class_name */
+			if ( $class_name::is_active() ) {
+				$this->modules[ $module_name ] = $class_name::instance();
+			}
+		}
+	}
+
+	/**
+	 * @param string $module_name
+	 *
+	 * @return Module_Base|Module_Base[]
+	 */
+	public function get_modules( string $module_name ) {
+		if ( $module_name ) {
+			if ( isset( $this->modules[ $module_name ] ) ) {
+				return $this->modules[ $module_name ];
+			}
+
+			return null;
+		}
+
+		return $this->modules;
+	}
+}
diff --git a/includes/pojo-a11y-customizer.php b/includes/pojo-a11y-customizer.php
deleted file mode 100644
index ed8985f..0000000
--- a/includes/pojo-a11y-customizer.php
+++ /dev/null
@@ -1,285 +0,0 @@
-<?php
-if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
-
-class Pojo_A11y_Customizer {
-
-	private $css_rules = array();
-	private $css_code = '';
-
-	public function get_customizer_fields() {
-		$fields = array();
-
-		$fields[] = array(
-			'id' => 'a11y_toolbar_icon',
-			'title' => __( 'Toolbar Icon', 'pojo-accessibility' ),
-			'type' => 'select',
-			'choices' => array(
-				'one-click' => __( 'One Click', 'pojo-accessibility' ),
-				'wheelchair' => __( 'Wheelchair', 'pojo-accessibility' ),
-				'accessibility' => __( 'Accessibility', 'pojo-accessibility' ),
-			),
-			'std' => 'one-click',
-			'description' => __( 'Set Toolbar Icon', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_toolbar_position',
-			'title' => __( 'Toolbar Position', 'pojo-accessibility' ),
-			'type' => 'select',
-			'choices' => array(
-				'left' => __( 'Left', 'pojo-accessibility' ),
-				'right' => __( 'Right', 'pojo-accessibility' ),
-			),
-			'std' => is_rtl() ? 'right' : 'left',
-			'description' => __( 'Set Toolbar Position', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_toolbar_distance_top',
-			'title' => __( 'Offset from Top (Desktop)', 'pojo-accessibility' ),
-			'type' => 'text',
-			'std' => '100px',
-			'description' => __( 'Set Toolbar top offset (Desktop)', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_toolbar_distance_top_mobile',
-			'title' => __( 'Offset from Top (Mobile)', 'pojo-accessibility' ),
-			'type' => 'text',
-			'std' => '50px',
-			'description' => __( 'Set Toolbar top offset (Mobile)', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_bg_toolbar',
-			'title' => __( 'Toolbar Background', 'pojo-accessibility' ),
-			'type' => 'color',
-			'std' => '#ffffff',
-			'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay',
-			'change_type' => 'bg_color',
-			'description' => __( 'Set Toolbar background color', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_color_toolbar',
-			'title' => __( 'Toolbar Color', 'pojo-accessibility' ),
-			'type' => 'color',
-			'std' => '#333333',
-			'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a, #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title',
-			'change_type' => 'color',
-			'description' => __( 'Set Toolbar text color', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_toggle_button_bg_color',
-			'title' => __( 'Toggle Button Background', 'pojo-accessibility' ),
-			'type' => 'color',
-			'std' => '#4054b2',
-			'description' => __( 'Set Toolbar toggle button background color', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_toggle_button_color',
-			'title' => __( 'Toggle Button Color', 'pojo-accessibility' ),
-			'type' => 'color',
-			'std' => '#ffffff',
-			'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a',
-			'change_type' => 'color',
-			'description' => __( 'Set Toolbar toggle button icon color', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_bg_active',
-			'title' => __( 'Active Background', 'pojo-accessibility' ),
-			'type' => 'color',
-			'std' => '#4054b2',
-			'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active',
-			'change_type' => 'bg_color',
-			'description' => __( 'Set Toolbar active background color', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_color_active',
-			'title' => __( 'Active Color', 'pojo-accessibility' ),
-			'type' => 'color',
-			'std' => '#ffffff',
-			'selector' => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active',
-			'change_type' => 'color',
-			'description' => __( 'Set Toolbar active text color', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_focus_outline_style',
-			'title' => __( 'Focus Outline Style', 'pojo-accessibility' ),
-			'type' => 'select',
-			'choices' => array(
-				'solid' => __( 'Solid', 'pojo-accessibility' ),
-				'dotted' => __( 'Dotted', 'pojo-accessibility' ),
-				'dashed' => __( 'Dashed', 'pojo-accessibility' ),
-				'double' => __( 'Double', 'pojo-accessibility' ),
-				'groove' => __( 'Groove', 'pojo-accessibility' ),
-				'ridge' => __( 'Ridge', 'pojo-accessibility' ),
-				'outset' => __( 'Outset', 'pojo-accessibility' ),
-				'initial' => __( 'Initial', 'pojo-accessibility' ),
-			),
-			'std' => 'solid',
-			'description' => __( 'Set Focus outline style', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_focus_outline_width',
-			'title' => __( 'Focus Outline Width', 'pojo-accessibility' ),
-			'type' => 'select',
-			'choices' => array(
-				'1px' => '1px',
-				'2px' => '2px',
-				'3px' => '3px',
-				'4px' => '4px',
-				'5px' => '5px',
-				'6px' => '6px',
-				'7px' => '7px',
-				'8px' => '8px',
-				'9px' => '9px',
-				'10px' => '10px',
-			),
-			'std' => '1px',
-			'description' => __( 'Set Focus outline width', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'a11y_focus_outline_color',
-			'title' => __( 'Focus Outline Color', 'pojo-accessibility' ),
-			'type' => 'color',
-			'std' => '#FF0000',
-			'description' => __( 'Set Focus outline color', 'pojo-accessibility' ),
-		);
-
-		return $fields;
-	}
-
-	public function customize_a11y( $wp_customize ) {
-		$fields = $this->get_customizer_fields();
-
-		$section_description = '<p>' . __( 'Use the control below to customize the appearance and layout of the Accessibility Toolbar', 'pojo-accessibility' ) . '</p><p>' .
-			sprintf( __( 'Additional Toolbar settings can be configured at the %s page.', 'pojo-accessibility' ),
-				'<a href="' . admin_url( 'admin.php?page=accessibility-toolbar' ) . '" target="blank">' . __( 'Accessibility Toolbar', 'pojo-accessibility' ) . '</a>'
-			) . '</p>';
-
-		$wp_customize->add_section( 'accessibility', array(
-			'title' => __( 'Accessibility', 'pojo-accessibility' ),
-			'priority'   => 30,
-			'description' => $section_description,
-		) );
-
-		foreach ( $fields as $field ) {
-			$customizer_id = POJO_A11Y_CUSTOMIZER_OPTIONS . '[' . $field['id'] . ']';
-			$wp_customize->add_setting( $customizer_id, array(
-				'default' => $field['std'] ? $field['std'] : null,
-				'type' => 'option',
-			) );
-			switch ( $field['type'] ) {
-				case 'color':
-					$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $field['id'], array(
-						'label'    => $field['title'],
-						'section'  => 'accessibility',
-						'settings' => $customizer_id,
-						'description' => isset( $field['description'] ) ? $field['description'] : null,
-					) ) );
-					break;
-				case 'select':
-				case 'text':
-					$wp_customize->add_control( $field['id'], array(
-						'label'    => $field['title'],
-						'section'  => 'accessibility',
-						'settings' => $customizer_id,
-						'type'     => $field['type'],
-						'choices'  => isset( $field['choices'] ) ? $field['choices'] : null,
-						'description' => isset( $field['description'] ) ? $field['description'] : null,
-					) );
-					break;
-			}
-		}
-	}
-
-	public function get_custom_css_code() {
-		$options = $this->get_customizer_options();
-		$bg_color = $options['a11y_toggle_button_bg_color']; // get_theme_mod( 'a11y_toggle_button_bg_color', '#4054b2' );
-		if ( ! empty( $bg_color ) ) {
-			$this->add_css_rule( '#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a', 'background-color', $bg_color );
-			$this->add_css_rule( '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay, #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items.pojo-a11y-links', 'border-color', $bg_color );
-		}
-
-		$outline_style = $options['a11y_focus_outline_style']; //get_theme_mod( 'a11y_focus_outline_style', 'solid' );
-		if ( ! empty( $outline_style ) ) {
-			$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-style', $outline_style . ' !important' );
-		}
-
-		$outline_width = $options['a11y_focus_outline_width']; // get_theme_mod( 'a11y_focus_outline_width', '1px' );
-		if ( ! empty( $outline_width ) ) {
-			$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-width', $outline_width . ' !important' );
-		}
-
-		$outline_color = $options['a11y_focus_outline_color']; //get_theme_mod( 'a11y_focus_outline_color', '#FF0000' );
-		if ( ! empty( $outline_color ) ) {
-			$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-color', $outline_color . ' !important' );
-		}
-
-		$distance_top = $options['a11y_toolbar_distance_top']; //get_theme_mod( 'a11y_toolbar_distance_top', '100px' );
-		if ( ! empty( $distance_top ) ) {
-			$this->add_css_rule( '#pojo-a11y-toolbar', 'top', $distance_top . ' !important' );
-		}
-
-		$distance_top_mobile = $options['a11y_toolbar_distance_top_mobile']; // get_theme_mod( 'a11y_toolbar_distance_top_mobile', '50px' );
-		if ( ! empty( $distance_top_mobile ) ) {
-			$this->add_css_code( "@media (max-width: 767px) { #pojo-a11y-toolbar { top: {$distance_top_mobile} !important; } }" );
-		}
-
-		$fields = $this->get_customizer_fields();
-		foreach ( $fields as $field ) {
-			if ( empty( $field['selector'] ) || empty( $field['change_type'] ) ) {
-				continue;
-			}
-
-			$option = $options[ $field['id'] ];
-
-			if ( 'color' === $field['change_type'] ) {
-				$this->add_css_rule( $field['selector'], 'color', $option );
-			} elseif ( 'bg_color' === $field['change_type'] ) {
-				$this->add_css_rule( $field['selector'], 'background-color', $option );
-			}
-		}
-	}
-
-	private function get_customizer_options() {
-		static $options = false;
-		if ( false === $options ) {
-			$options = get_option( POJO_A11Y_CUSTOMIZER_OPTIONS );
-		}
-		return $options;
-	}
-
-	private function add_css_rule( $selector, $rule, $value ) {
-		if ( ! isset( $this->css_rules[ $selector ] ) ) {
-			$this->css_rules[ $selector ] = array();
-		}
-		$this->css_rules[ $selector ][] = $rule . ': ' . $value . ';';
-	}
-
-	private function add_css_code( $code ) {
-		$this->css_code .= "\n" . $code;
-	}
-
-	public function print_css_code() {
-		$this->get_custom_css_code();
-		$css = '';
-		foreach ( $this->css_rules as $selector => $css_rules ) {
-			$css .= "\n" . $selector . '{ ' . implode( "\t", $css_rules ) . '}';
-		}
-		echo '<style type="text/css">' . $css . $this->css_code . '</style>';
-	}
-
-	public function __construct() {
-		add_filter( 'customize_register', array( &$this, 'customize_a11y' ), 610 );
-		add_filter( 'wp_head', array( &$this, 'print_css_code' ) );
-	}
-}
\ No newline at end of file
diff --git a/includes/pojo-a11y-settings.php b/includes/pojo-a11y-settings.php
deleted file mode 100644
index f2e43c2..0000000
--- a/includes/pojo-a11y-settings.php
+++ /dev/null
@@ -1,645 +0,0 @@
-<?php
-if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
-
-class Pojo_A11y_Settings {
-
-	public $menu_slug = null;
-
-	const PAGE_ID = 'pojo-a11y';
-	const SETTINGS_PAGE = 'toplevel_page_accessibility-settings';
-	const TOOLBAR_PAGE = 'accessibility_page_accessibility-toolbar';
-	const FIELD_TEXT     = 'text';
-	const FIELD_SELECT   = 'select';
-	const FIELD_CHECKBOX_LIST = 'checkbox_list';
-
-	protected $_fields = array();
-
-	protected $_sections = array();
-	protected $_defaults = array();
-	protected $_pages    = array();
-
-
-	/**
-	 * Setup Toolbar fields
-	 *
-	 * @param array $sections
-	 *
-	 * @return array
-	 */
-	public function section_a11y_toolbar( $sections = array() ) {
-		$fields = array();
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar',
-			'title' => __( 'Display Toolbar', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'options' => array(
-				'enable' => __( 'Show on all devices', 'pojo-accessibility' ),
-				'visible-desktop' => __( 'Visible Desktop', 'pojo-accessibility' ),
-				'visible-tablet' => __( 'Visible Tablet', 'pojo-accessibility' ),
-				'visible-phone' => __( 'Visible Phone', 'pojo-accessibility' ),
-				'hidden-desktop' => __( 'Hidden Desktop', 'pojo-accessibility' ),
-				'hidden-tablet' => __( 'Hidden Tablet', 'pojo-accessibility' ),
-				'hidden-phone' => __( 'Hidden Phone', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$toolbar_options_classes = 'pojo-a11y-toolbar-button';
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_title',
-			'title' => __( 'Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'desc' => __( 'Title top of the toolbar (recommended).', 'pojo-accessibility' ),
-			'class' => $toolbar_options_classes,
-			'std' => __( 'Accessibility Tools', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_resize_font',
-			'title' => __( 'Resize Font', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'class' => $toolbar_options_classes,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_resize_font_add_title',
-			'title' => __( 'Increase Text', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row no-border',
-			'std' => __( 'Increase Text', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_resize_font_less_title',
-			'title' => __( 'Decrease Text', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => __( 'Decrease Text', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_grayscale',
-			'title' => __( 'Grayscale', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'class' => $toolbar_options_classes,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_grayscale_title',
-			'title' => __( 'Grayscale Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => __( 'Grayscale', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_high_contrast',
-			'title' => __( 'High Contrast', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'class' => $toolbar_options_classes,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_high_contrast_title',
-			'title' => __( 'High Contrast Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => __( 'High Contrast', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_negative_contrast',
-			'title' => __( 'Negative Contrast', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'class' => $toolbar_options_classes,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_negative_contrast_title',
-			'title' => __( 'Negative Contrast Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => __( 'Negative Contrast', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_light_bg',
-			'title' => __( 'Light Background', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'class' => $toolbar_options_classes,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_light_bg_title',
-			'title' => __( 'Light Background Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => __( 'Light Background', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_links_underline',
-			'title' => __( 'Links Underline', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'class' => $toolbar_options_classes,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_links_underline_title',
-			'title' => __( 'Links Underline Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => __( 'Links Underline', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_readable_font',
-			'title' => __( 'Readable Font', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'class' => $toolbar_options_classes,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_readable_font_title',
-			'title' => __( 'Readable Font Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => __( 'Readable Font', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_sitemap_title',
-			'title' => __( 'Sitemap Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes,
-			'std' => __( 'Sitemap', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_sitemap_link',
-			'title' => __( 'Sitemap Link', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'placeholder' => 'http://your-domain.com/sitemap',
-			'desc' => __( 'Link for sitemap page in your website. Leave blank to disable.', 'pojo-accessibility' ),
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => '',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_help_title',
-			'title' => __( 'Help Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes,
-			'std' => __( 'Help', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_help_link',
-			'title' => __( 'Help Link', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'placeholder' => 'http://your-domain.com/help',
-			'desc' => __( 'Link for help page in your website. Leave blank to disable.', 'pojo-accessibility' ),
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => '',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_feedback_title',
-			'title' => __( 'Feedback Title', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'class' => $toolbar_options_classes,
-			'std' => __( 'Feedback', 'pojo-accessibility' ),
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_toolbar_button_feedback_link',
-			'title' => __( 'Feedback Link', 'pojo-accessibility' ),
-			'type' => self::FIELD_TEXT,
-			'placeholder' => 'http://your-domain.com/feedback',
-			'desc' => __( 'Link for feedback page in your website. Leave blank to disable.', 'pojo-accessibility' ),
-			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
-			'std' => '',
-		);
-
-		$sections[] = array(
-			'id' => 'section-a11y-toolbar',
-			'page' => self::TOOLBAR_PAGE,
-			'title' => __( 'Toolbar Settings', 'pojo-accessibility' ),
-			'intro' => '',
-			'fields' => $fields,
-		);
-
-		$sections[] = array(
-			'id' => 'section-a11y-styles',
-			'page' => self::TOOLBAR_PAGE,
-			'title' => __( 'Style Settings', 'pojo-accessibility' ),
-			'intro' => sprintf( __( 'For style settings of accessibility tools go to > Customize > <a href="%s">Accessibility</a>.', 'pojo-accessibility' ), $this->get_admin_url( 'customizer' ) ),
-			'fields' => array(),
-		);
-
-		return $sections;
-	}
-
-	public function section_a11y_settings( $sections ) {
-		$fields = array();
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_focusable',
-			'title' => __( 'Add Outline Focus', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'desc' => __( 'Add outline to elements on keyboard focus.', 'pojo-accessibility' ),
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'disable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_skip_to_content_link',
-			'title' => __( 'Skip to Content link', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'desc' => __( 'Add skip to content link when using keyboard.', 'pojo-accessibility' ),
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_skip_to_content_link_element_id',
-			'title' => __( 'Skip to Content Element ID', 'pojo-accessibility' ),
-			'placeholder' => 'content',
-			'type' => self::FIELD_TEXT,
-			'std' => 'content',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_remove_link_target',
-			'title' => __( 'Remove target attribute from links', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'desc' => __( 'This option will reset all your target links to open in the same window or tab.', 'pojo-accessibility' ),
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'disable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_add_role_links',
-			'title' => __( 'Add landmark roles to all links', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'desc' => __( 'This option will add <code>role="link"</code> to all links on the page.', 'pojo-accessibility' ),
-            'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_save',
-			'title' => __( 'Sitewide Accessibility', 'pojo-accessibility' ),
-			'desc' => __( 'Consistent accessibility throughout your site visit. Site remembers you and stays accessible.', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'options' => array(
-				'enable' => __( 'Enable', 'pojo-accessibility' ),
-				'disable' => __( 'Disable', 'pojo-accessibility' ),
-			),
-			'std' => 'enable',
-		);
-
-		$fields[] = array(
-			'id' => 'pojo_a11y_save_expiration',
-			'title' => __( 'Remember user for', 'pojo-accessibility' ),
-			'type' => self::FIELD_SELECT,
-			'desc' => __( 'Define how long your toolbar settings will be remembered', 'pojo-accessibility' ),
-			'options' => array(
-				'1' => __( '1 Hour', 'pojo-accessibility' ),
-				'6' => __( '6 Hours', 'pojo-accessibility' ),
-				'12' => __( '12 Hours', 'pojo-accessibility' ),
-				'24' => __( '1 Day', 'pojo-accessibility' ),
-				'48' => __( '2 Days', 'pojo-accessibility' ),
-				'72' => __( '3 Days', 'pojo-accessibility' ),
-				'168' => __( '1 Week', 'pojo-accessibility' ),
-				'720' => __( '1 Month', 'pojo-accessibility' ),
-			),
-			'std' => '12',
-		);
-
-		$sections[] = array(
-			'id' => 'section-a11y-settings',
-			'page' => self::SETTINGS_PAGE,
-			'title' => __( 'General Settings', 'pojo-accessibility' ),
-			'intro' => '',
-			'fields' => $fields,
-		);
-
-		return $sections;
-	}
-
-	public function print_js() {
-		// TODO: Maybe need to move to other file
-		?>
-		<script>
-			jQuery( document ).ready( function( $ ) {
-				var $a11yToolbarOption = $( 'table.form-table #pojo_a11y_toolbar' ),
-					$a11yToolbarButtons = $( 'tr.pojo-a11y-toolbar-button' );
-				
-				$a11yToolbarOption.on( 'change', function() {
-					if ( 'disable' !== $( this ).val() ) {
-						$a11yToolbarButtons.fadeIn( 'fast' );
-					} else {
-						$a11yToolbarButtons.hide();
-					}
-				} );
-				$a11yToolbarOption.trigger( 'change' );
-			} );
-		</script>
-		<?php
-	}
-
-	public function get_settings_sections() {
-		$sections  = array();
-		$sections = $this->section_a11y_toolbar( $sections );
-		$sections = $this->section_a11y_settings( $sections );
-		$this->_sections = $sections;
-		return $this->_sections;
-	}
-
-	public function add_settings_section( $args = array() ) {
-		$args = wp_parse_args( $args, array(
-			'id' => '',
-			'title' => '',
-		) );
-
-		foreach ( $this->_sections as $section ) {
-			if ( $args['id'] !== $section['id'] ) {
-				continue;
-			}
-			if ( empty( $section['intro'] ) ) {
-				return;
-			}
-			printf( '<p>%s</p>', $section['intro'] );
-			break;
-		}
-	}
-
-	public function add_settings_field( $args = array() ) {
-		if ( empty( $args ) ) {
-			return;
-		}
-
-		$args = wp_parse_args( $args, array(
-			'id' => '',
-			'std' => '',
-			'type' => self::FIELD_TEXT,
-		) );
-
-		if ( empty( $args['id'] ) || empty( $args['type'] ) ) {
-			return;
-		}
-
-		$field_callback = 'render_' . $args['type'] . '_field';
-		if ( method_exists( $this, $field_callback ) ) {
-			call_user_func( array( $this, $field_callback ), $args );
-		}
-	}
-
-	public function render_select_field( $field ) {
-		$options = array();
-		foreach ( $field['options'] as $option_key => $option_value ) {
-			$options[] = sprintf(
-				'<option value="%1$s"%2$s>%3$s</option>',
-				esc_attr( $option_key ),
-				selected( get_option( $field['id'], $field['std'] ), $option_key, false ),
-				$option_value
-			);
-		}
-		?>
-        <select id="<?php echo $field['id']; ?>" name="<?php echo $field['id']; ?>">
-			<?php echo implode( '', $options ); ?>
-        </select>
-		<?php if ( ! empty( $field['sub_desc'] ) ) echo $field['sub_desc']; ?>
-		<?php if ( ! empty( $field['desc'] ) ) : ?>
-            <p class="description"><?php echo $field['desc']; ?></p>
-		<?php endif; ?>
-		<?php
-	}
-
-	public function render_text_field( $field ) {
-		if ( empty( $field['classes'] ) )
-			$field['classes'] = array( 'regular-text' );
-		?>
-        <input type="text" class="<?php echo implode( ' ', $field['classes'] ); ?>" id="<?php echo $field['id']; ?>" name="<?php echo $field['id']; ?>" value="<?php echo esc_attr( get_option( $field['id'], $field['std'] ) ); ?>"<?php echo ! empty( $field['placeholder'] ) ? ' placeholder="' . $field['placeholder'] . '"' : ''; ?> />
-		<?php if ( ! empty( $field['sub_desc'] ) ) echo $field['sub_desc']; ?>
-		<?php if ( ! empty( $field['desc'] ) ) : ?>
-            <p class="description"><?php echo $field['desc']; ?></p>
-		<?php endif; ?>
-		<?php
-	}
-
-	public function admin_init() {
-		foreach ( $this->get_settings_sections() as $section_key => $section ) {
-			add_settings_section(
-				$section['id'],
-				$section['title'],
-				array( &$this, 'add_settings_section' ),
-				$section['page']
-			);
-
-			if ( empty( $section['fields'] ) ) {
-				continue;
-			}
-
-			foreach ( $section['fields'] as $field ) {
-				add_settings_field(
-					$field['id'],
-					$field['title'],
-					array( &$this, 'add_settings_field' ),
-					$section['page'],
-					$section['id'],
-					$field
-				);
-
-				$sanitize_callback = array( $this, 'field_html' );
-				if ( ! empty( $field['type'] ) && self::FIELD_CHECKBOX_LIST === $field['type'] ) {
-					$sanitize_callback = array( $this, 'field_checkbox_list' );
-				}
-				if ( ! empty( $field['sanitize_callback'] ) ) {
-					$sanitize_callback = $field['sanitize_callback'];
-				}
-
-				register_setting( $section['page'], $field['id'], $sanitize_callback );
-			}
-		}
-	}
-
-	public static function field_html( $input ) {
-		return stripslashes( wp_filter_post_kses( addslashes( $input ) ) );
-	}
-
-	public static function field_checkbox_list( $input ) {
-		if ( empty( $input ) ) {
-			$input = array();
-		}
-
-		return $input;
-	}
-
-	public function display_settings_page() {
-		$screen = get_current_screen();
-		$screen_id = $screen->id;
-		if ( false !== strpos( $screen_id, 'toolbar' ) ) {
-			$screen_id = self::TOOLBAR_PAGE;
-		}
-		?>
-		<div class="wrap">
-			<h2><?php echo $this->_page_title; ?></h2>
-			<?php settings_errors( $screen_id ); ?>
-			<form method="post" action="options.php">
-				<?php
-				settings_fields( $screen_id );
-				do_settings_sections( $screen_id );
-
-				submit_button();
-				?>
-			</form>
-
-		</div><!-- /.wrap -->
-		<?php
-	}
-
-	public function admin_menu() {
-		$this->menu_slug = add_menu_page(
-			__( 'Accessibility', 'pojo-accessibility' ),
-			__( 'Accessibility', 'pojo-accessibility' ),
-			'manage_options',
-			'accessibility-settings',
-			array( &$this, 'display_settings_page' ),
-			'dashicons-universal-access-alt'
-		);
-		add_submenu_page(
-			'accessibility-settings',
-			__( 'Accessibility Settings', 'pojo-accessibility' ),
-			__( 'Settings', 'pojo-accessibility' ),
-			'manage_options',
-			'accessibility-settings',
-			array( &$this, 'display_settings_page' )
-		);
-		add_submenu_page(
-			'accessibility-settings',
-			__( 'Accessibility Toolbar', 'pojo-accessibility' ),
-			__( 'Toolbar', 'pojo-accessibility' ),
-			'manage_options',
-			'accessibility-toolbar',
-			array( &$this, 'display_settings_page' )
-		);
-		add_submenu_page(
-			'accessibility-settings',
-			__( 'Customize', 'pojo-accessibility' ),
-			__( 'Customize', 'pojo-accessibility' ),
-			'manage_options',
-			'/customize.php?autofocus[section]=accessibility'
-		);
-	}
-
-	public function plugin_action_links( $links, $plugin_file ) {
-		if ( POJO_A11Y_BASE === $plugin_file ) {
-			$settings = '<a href="' . $this->get_admin_url( 'general' ) . '" aria-label="' . esc_attr__( 'Set Accessibility settings', 'pojo-accessibility' ) . '">' . __( 'Settings', 'pojo-accessibility' ) . '</a>';
-			$toolbar = '<a href="' . $this->get_admin_url( 'toolbar' ) . '" aria-label="' . esc_attr__( 'Set Accessibility Toolbar Settings', 'pojo-accessibility' ) . '">' . __( 'Toolbar', 'pojo-accessibility' ) . '</a>';
-			$customizer = '<a href="' . $this->get_admin_url( 'customizer' ) . '" aria-label="' . esc_attr__( 'Customize Toolbar', 'pojo-accessibility' ) . '" target="_blank">' . __( 'Customize', 'pojo-accessibility' ) . '</a>';
-			array_unshift( $links, $customizer );
-			array_unshift( $links, $toolbar );
-			array_unshift( $links, $settings );
-		}
-		return $links;
-	}
-
-	private function get_admin_url( $type ) {
-		switch ( $type ) {
-			case 'customizer':
-				return admin_url( 'customize.php?autofocus[section]=accessibility' );
-				break;
-			case 'general':
-				return admin_url( 'admin.php?page=accessibility-settings' );
-				break;
-			case 'toolbar':
-				return admin_url( 'admin.php?page=accessibility-toolbar' );
-				break;
-		}
-	}
-
-	private function get_default_values() {
-		if ( empty( $this->_defaults ) ) {
-			if ( empty( $this->_sections ) ) {
-				$this->get_settings_sections();
-			}
-			$defaults = array();
-			foreach ( $this->_sections as $section ) {
-				foreach ( $section['fields'] as $field ) {
-					$defaults[ $field['id'] ] = isset( $field['std'] ) ? $field['std'] : '';
-				}
-			}
-			$this->_defaults = $defaults;
-		}
-	}
-
-	public function get_default_title_text( $option ) {
-		$this->get_default_values();
-		$default = isset( $this->_defaults[ $option ] ) ? $this->_defaults[ $option ] : '';
-
-		return get_option( $option, $default );
-	}
-
-	public function __construct() {
-		$this->_page_title = __( 'One Click Accessibility', 'pojo-accessibility' );
-		$this->_page_menu_title = __( 'One Click Accessibility', 'pojo-accessibility' );
-		$this->_menu_parent = 'themes.php';
-
-		add_action( 'admin_menu', array( &$this, 'admin_menu' ), 20 );
-		add_action( 'admin_init', array( &$this, 'admin_init' ), 20 );
-		add_action( 'admin_footer', array( &$this, 'print_js' ) );
-		add_filter( 'plugin_action_links_' . POJO_A11Y_BASE, [ $this, 'plugin_action_links' ], 10, 2 );
-	}
-}
\ No newline at end of file
diff --git a/includes/pojo-a11y-admin-ui.php b/modules/legacy/components/admin.php
similarity index 93%
rename from includes/pojo-a11y-admin-ui.php
rename to modules/legacy/components/admin.php
index 05c963a..ffc15fd 100644
--- a/includes/pojo-a11y-admin-ui.php
+++ b/modules/legacy/components/admin.php
@@ -1,23 +1,27 @@
 <?php
-if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
 
-class Pojo_A11y_Admin_UI {
+namespace EA11y\Modules\Legacy\Components;
+
+use EA11y\Classes\Utils;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Admin
+ */
+class Admin {
 
 	const SETTINGS_SLUG = 'toplevel_page_accessibility-settings';
 	const TOOLBAR_SLUG = 'accessibility_page_accessibility-toolbar';
 
-	private function _is_elementor_installed() {
-		$file_path = 'elementor/elementor.php';
-		$installed_plugins = get_plugins();
-		return isset( $installed_plugins[ $file_path ] );
-	}
-
 	public function ajax_a11y_install_elementor_set_admin_notice_viewed() {
 		update_user_meta( get_current_user_id(), '_a11y_elementor_install_notice', 'true' );
 	}
 
 	public function admin_notices() {
-		if ( ! current_user_can( 'install_plugins' ) || $this->_is_elementor_installed() ) {
+		if ( ! current_user_can( 'install_plugins' ) || Utils::is_elementor_installed() ) {
 			return;
 		}
 
@@ -152,7 +156,7 @@ public function admin_footer_text( $footer_text ) {
 		$current_screen = get_current_screen();
 		if ( in_array( $current_screen->id, array( self::SETTINGS_SLUG, self::TOOLBAR_SLUG ) ) ) {
 			$footer_text = sprintf(
-				/* translators: 1: One Click Accessibility, 2: Link to plugin review */
+			/* translators: 1: One Click Accessibility, 2: Link to plugin review */
 				__( 'Enjoyed %1$s? Please leave us a %2$s rating. We really appreciate your support!', 'pojo-accessibility' ),
 				'<strong>' . __( 'One Click Accessibility', 'pojo-accessibility' ) . '</strong>',
 				'<a href="https://wordpress.org/support/plugin/pojo-accessibility/reviews/?filter=5#new-post" target="_blank">&#9733;&#9733;&#9733;&#9733;&#9733;</a>'
diff --git a/modules/legacy/components/customizer.php b/modules/legacy/components/customizer.php
new file mode 100644
index 0000000..03f76a6
--- /dev/null
+++ b/modules/legacy/components/customizer.php
@@ -0,0 +1,298 @@
+<?php
+
+namespace EA11y\Modules\Legacy\Components;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Customizer
+ */
+class Customizer {
+
+	private $css_rules = [];
+	private $css_code = '';
+
+	public function get_customizer_fields() {
+		$fields = [];
+
+		$fields[] = [
+			'id'          => 'a11y_toolbar_icon',
+			'title'       => __( 'Toolbar Icon', 'pojo-accessibility' ),
+			'type'        => 'select',
+			'choices'     => [
+				'one-click'     => __( 'One Click', 'pojo-accessibility' ),
+				'wheelchair'    => __( 'Wheelchair', 'pojo-accessibility' ),
+				'accessibility' => __( 'Accessibility', 'pojo-accessibility' ),
+			],
+			'std'         => 'one-click',
+			'description' => __( 'Set Toolbar Icon', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_toolbar_position',
+			'title'       => __( 'Toolbar Position', 'pojo-accessibility' ),
+			'type'        => 'select',
+			'choices'     => [
+				'left'  => __( 'Left', 'pojo-accessibility' ),
+				'right' => __( 'Right', 'pojo-accessibility' ),
+			],
+			'std'         => is_rtl() ? 'right' : 'left',
+			'description' => __( 'Set Toolbar Position', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_toolbar_distance_top',
+			'title'       => __( 'Offset from Top (Desktop)', 'pojo-accessibility' ),
+			'type'        => 'text',
+			'std'         => '100px',
+			'description' => __( 'Set Toolbar top offset (Desktop)', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_toolbar_distance_top_mobile',
+			'title'       => __( 'Offset from Top (Mobile)', 'pojo-accessibility' ),
+			'type'        => 'text',
+			'std'         => '50px',
+			'description' => __( 'Set Toolbar top offset (Mobile)', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_bg_toolbar',
+			'title'       => __( 'Toolbar Background', 'pojo-accessibility' ),
+			'type'        => 'color',
+			'std'         => '#ffffff',
+			'selector'    => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay',
+			'change_type' => 'bg_color',
+			'description' => __( 'Set Toolbar background color', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_color_toolbar',
+			'title'       => __( 'Toolbar Color', 'pojo-accessibility' ),
+			'type'        => 'color',
+			'std'         => '#333333',
+			'selector'    => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a, #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title',
+			'change_type' => 'color',
+			'description' => __( 'Set Toolbar text color', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_toggle_button_bg_color',
+			'title'       => __( 'Toggle Button Background', 'pojo-accessibility' ),
+			'type'        => 'color',
+			'std'         => '#4054b2',
+			'description' => __( 'Set Toolbar toggle button background color', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_toggle_button_color',
+			'title'       => __( 'Toggle Button Color', 'pojo-accessibility' ),
+			'type'        => 'color',
+			'std'         => '#ffffff',
+			'selector'    => '#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a',
+			'change_type' => 'color',
+			'description' => __( 'Set Toolbar toggle button icon color', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_bg_active',
+			'title'       => __( 'Active Background', 'pojo-accessibility' ),
+			'type'        => 'color',
+			'std'         => '#4054b2',
+			'selector'    => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active',
+			'change_type' => 'bg_color',
+			'description' => __( 'Set Toolbar active background color', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_color_active',
+			'title'       => __( 'Active Color', 'pojo-accessibility' ),
+			'type'        => 'color',
+			'std'         => '#ffffff',
+			'selector'    => '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active',
+			'change_type' => 'color',
+			'description' => __( 'Set Toolbar active text color', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_focus_outline_style',
+			'title'       => __( 'Focus Outline Style', 'pojo-accessibility' ),
+			'type'        => 'select',
+			'choices'     => [
+				'solid'   => __( 'Solid', 'pojo-accessibility' ),
+				'dotted'  => __( 'Dotted', 'pojo-accessibility' ),
+				'dashed'  => __( 'Dashed', 'pojo-accessibility' ),
+				'double'  => __( 'Double', 'pojo-accessibility' ),
+				'groove'  => __( 'Groove', 'pojo-accessibility' ),
+				'ridge'   => __( 'Ridge', 'pojo-accessibility' ),
+				'outset'  => __( 'Outset', 'pojo-accessibility' ),
+				'initial' => __( 'Initial', 'pojo-accessibility' ),
+			],
+			'std'         => 'solid',
+			'description' => __( 'Set Focus outline style', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_focus_outline_width',
+			'title'       => __( 'Focus Outline Width', 'pojo-accessibility' ),
+			'type'        => 'select',
+			'choices'     => [
+				'1px'  => '1px',
+				'2px'  => '2px',
+				'3px'  => '3px',
+				'4px'  => '4px',
+				'5px'  => '5px',
+				'6px'  => '6px',
+				'7px'  => '7px',
+				'8px'  => '8px',
+				'9px'  => '9px',
+				'10px' => '10px',
+			],
+			'std'         => '1px',
+			'description' => __( 'Set Focus outline width', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'a11y_focus_outline_color',
+			'title'       => __( 'Focus Outline Color', 'pojo-accessibility' ),
+			'type'        => 'color',
+			'std'         => '#FF0000',
+			'description' => __( 'Set Focus outline color', 'pojo-accessibility' ),
+		];
+
+		return $fields;
+	}
+
+	public function customize_a11y( $wp_customize ) {
+		$fields = $this->get_customizer_fields();
+
+		$section_description = '<p>' . __( 'Use the control below to customize the appearance and layout of the Accessibility Toolbar',
+				'pojo-accessibility' ) . '</p><p>' .
+		                       sprintf( __( 'Additional Toolbar settings can be configured at the %s page.',
+			                       'pojo-accessibility' ),
+			                       '<a href="' . admin_url( 'admin.php?page=accessibility-toolbar' ) . '" target="blank">' . __( 'Accessibility Toolbar',
+				                       'pojo-accessibility' ) . '</a>'
+		                       ) . '</p>';
+
+		$wp_customize->add_section( 'accessibility', [
+			'title'       => __( 'Accessibility', 'pojo-accessibility' ),
+			'priority'    => 30,
+			'description' => $section_description,
+		] );
+
+		foreach ( $fields as $field ) {
+			$customizer_id = POJO_A11Y_CUSTOMIZER_OPTIONS . '[' . $field['id'] . ']';
+			$wp_customize->add_setting( $customizer_id, [
+				'default' => $field['std'] ? $field['std'] : null,
+				'type'    => 'option',
+			] );
+			switch ( $field['type'] ) {
+				case 'color':
+					$wp_customize->add_control( new \WP_Customize_Color_Control( $wp_customize, $field['id'], [
+						'label'       => $field['title'],
+						'section'     => 'accessibility',
+						'settings'    => $customizer_id,
+						'description' => isset( $field['description'] ) ? $field['description'] : null,
+					] ) );
+					break;
+				case 'select':
+				case 'text':
+					$wp_customize->add_control( $field['id'], [
+						'label'       => $field['title'],
+						'section'     => 'accessibility',
+						'settings'    => $customizer_id,
+						'type'        => $field['type'],
+						'choices'     => isset( $field['choices'] ) ? $field['choices'] : null,
+						'description' => isset( $field['description'] ) ? $field['description'] : null,
+					] );
+					break;
+			}
+		}
+	}
+
+	public function get_custom_css_code() {
+		$options  = $this->get_customizer_options();
+		$bg_color = $options['a11y_toggle_button_bg_color']; // get_theme_mod( 'a11y_toggle_button_bg_color', '#4054b2' );
+		if ( ! empty( $bg_color ) ) {
+			$this->add_css_rule( '#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a', 'background-color', $bg_color );
+			$this->add_css_rule( '#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay, #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items.pojo-a11y-links',
+				'border-color', $bg_color );
+		}
+
+		$outline_style = $options['a11y_focus_outline_style']; //get_theme_mod( 'a11y_focus_outline_style', 'solid' );
+		if ( ! empty( $outline_style ) ) {
+			$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-style', $outline_style . ' !important' );
+		}
+
+		$outline_width = $options['a11y_focus_outline_width']; // get_theme_mod( 'a11y_focus_outline_width', '1px' );
+		if ( ! empty( $outline_width ) ) {
+			$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-width', $outline_width . ' !important' );
+		}
+
+		$outline_color = $options['a11y_focus_outline_color']; //get_theme_mod( 'a11y_focus_outline_color', '#FF0000' );
+		if ( ! empty( $outline_color ) ) {
+			$this->add_css_rule( 'body.pojo-a11y-focusable a:focus', 'outline-color', $outline_color . ' !important' );
+		}
+
+		$distance_top = $options['a11y_toolbar_distance_top']; //get_theme_mod( 'a11y_toolbar_distance_top', '100px' );
+		if ( ! empty( $distance_top ) ) {
+			$this->add_css_rule( '#pojo-a11y-toolbar', 'top', $distance_top . ' !important' );
+		}
+
+		$distance_top_mobile = $options['a11y_toolbar_distance_top_mobile']; // get_theme_mod( 'a11y_toolbar_distance_top_mobile', '50px' );
+		if ( ! empty( $distance_top_mobile ) ) {
+			$this->add_css_code( "@media (max-width: 767px) { #pojo-a11y-toolbar { top: {$distance_top_mobile} !important; } }" );
+		}
+
+		$fields = $this->get_customizer_fields();
+		foreach ( $fields as $field ) {
+			if ( empty( $field['selector'] ) || empty( $field['change_type'] ) ) {
+				continue;
+			}
+
+			$option = $options[ $field['id'] ];
+
+			if ( 'color' === $field['change_type'] ) {
+				$this->add_css_rule( $field['selector'], 'color', $option );
+			} elseif ( 'bg_color' === $field['change_type'] ) {
+				$this->add_css_rule( $field['selector'], 'background-color', $option );
+			}
+		}
+	}
+
+	private function get_customizer_options() {
+		static $options = false;
+		if ( false === $options ) {
+			$options = get_option( POJO_A11Y_CUSTOMIZER_OPTIONS );
+		}
+
+		return $options;
+	}
+
+	private function add_css_rule( $selector, $rule, $value ) {
+		if ( ! isset( $this->css_rules[ $selector ] ) ) {
+			$this->css_rules[ $selector ] = [];
+		}
+		$this->css_rules[ $selector ][] = $rule . ': ' . $value . ';';
+	}
+
+	private function add_css_code( $code ) {
+		$this->css_code .= "\n" . $code;
+	}
+
+	public function print_css_code() {
+		$this->get_custom_css_code();
+		$css = '';
+		foreach ( $this->css_rules as $selector => $css_rules ) {
+			$css .= "\n" . $selector . '{ ' . implode( "\t", $css_rules ) . '}';
+		}
+		echo '<style type="text/css">' . $css . $this->css_code . '</style>';
+	}
+
+	public function __construct() {
+		add_filter( 'customize_register', [ $this, 'customize_a11y' ], 610 );
+		add_filter( 'wp_head', [ $this, 'print_css_code' ] );
+	}
+}
diff --git a/includes/pojo-a11y-elementor.php b/modules/legacy/components/elementor.php
similarity index 66%
rename from includes/pojo-a11y-elementor.php
rename to modules/legacy/components/elementor.php
index 819c1aa..a260e5c 100644
--- a/includes/pojo-a11y-elementor.php
+++ b/modules/legacy/components/elementor.php
@@ -1,8 +1,15 @@
 <?php
-if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
 
-final class Pojo_A11y_Elementor {
+namespace EA11y\Modules\Legacy\Components;
 
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Elementor
+ */
+class Elementor {
 	public function is_toolbar_active( $is_active ) {
 		if ( \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
 			$is_active = false;
diff --git a/includes/pojo-a11y-frontend.php b/modules/legacy/components/frontend.php
similarity index 89%
rename from includes/pojo-a11y-frontend.php
rename to modules/legacy/components/frontend.php
index 05a5659..456f9e3 100644
--- a/includes/pojo-a11y-frontend.php
+++ b/modules/legacy/components/frontend.php
@@ -1,8 +1,18 @@
 <?php
-if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
 
-final class Pojo_A11y_Frontend {
+namespace EA11y\Modules\Legacy\Components;
 
+use EA11y\Modules\Legacy\Module;
+use EA11y\Plugin;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Frontend
+ */
+class Frontend {
 	public $svg_icons = null;
 
 	public function is_toolbar_active() {
@@ -13,30 +23,32 @@ public function is_toolbar_active() {
 		return $is_active;
 	}
 
-	public function is_toolbar_button_active( $button_type ) {
+	public function is_toolbar_button_active( $button_type ): bool {
 		return 'disable' !== get_option( "pojo_a11y_toolbar_button_{$button_type}" );
 	}
 
 	public function get_toolbar_button_title( $button_type ) {
-		$title = Pojo_Accessibility::$instance->settings->get_default_title_text( "pojo_a11y_toolbar_button_{$button_type}_title" );
+		/**
+		 * @var Settings $settings
+		 */
+		$settings = Module::get_settings();
+		$title = $settings->get_default_title_text( "pojo_a11y_toolbar_button_{$button_type}_title" );
 		return '<span class="pojo-a11y-toolbar-icon">' . $this->get_toolbar_svg( $button_type, $title ) . '</span><span class="pojo-a11y-toolbar-text">' . $title . '</span>';
 	}
 
 	public function enqueue_scripts() {
 		wp_register_script(
 			'pojo-a11y',
-			POJO_A11Y_ASSETS_URL . 'js/app.min.js',
-			array(
-				'jquery',
-			),
+			EA11Y_ASSETS_URL . 'js/app.min.js',
+			[ 'jquery' ],
 			'1.0.0',
 			true
 		);
 
 		wp_register_style(
 			'pojo-a11y',
-			POJO_A11Y_ASSETS_URL . 'css/style.min.css',
-			array(),
+			EA11Y_ASSETS_URL . 'css/style.min.css',
+			[],
 			'1.0.0'
 		);
 
@@ -46,13 +58,13 @@ public function enqueue_scripts() {
 		wp_localize_script(
 			'pojo-a11y',
 			'PojoA11yOptions',
-			array(
+			[
 				'focusable' => ( 'enable' === get_option( 'pojo_a11y_focusable' ) ),
 				'remove_link_target' => ( 'enable' === get_option( 'pojo_a11y_remove_link_target' ) ),
 				'add_role_links' => ( 'enable' === get_option( 'pojo_a11y_add_role_links' ) ),
 				'enable_save' => ( 'enable' === get_option( 'pojo_a11y_save' ) ),
 				'save_expiration' => get_option( 'pojo_a11y_save_expiration' ),
-			)
+			]
 		);
 	}
 
@@ -77,16 +89,16 @@ public function print_toolbar() {
 		$customizer_options = get_option( POJO_A11Y_CUSTOMIZER_OPTIONS );
 
 		$toolbar_position = $customizer_options['a11y_toolbar_position'];
-		if ( empty( $toolbar_position ) || ! in_array( $toolbar_position, array( 'right', 'left' ) ) ) {
+		if ( empty( $toolbar_position ) || ! in_array( $toolbar_position, [ 'right', 'left' ] ) ) {
 			$toolbar_position = 'left';
 		}
-
-		$toolbar_title = Pojo_Accessibility::$instance->settings->get_default_title_text( 'pojo_a11y_toolbar_title' );
+		$settings = Module::get_settings();
+		$toolbar_title = $settings->get_default_title_text( 'pojo_a11y_toolbar_title' );
 		$toolbar_visibility = get_option( 'pojo_a11y_toolbar' );
 
-		$wrapper_classes = array(
+		$wrapper_classes = [
 			'pojo-a11y-toolbar-' . $toolbar_position,
-		);
+		];
 
 		if ( 'enable' !== $toolbar_visibility ) {
 			$wrapper_classes[] = 'pojo-a11y-' . $toolbar_visibility;
@@ -114,7 +126,7 @@ public function print_toolbar() {
 			<div class="pojo-a11y-toolbar-overlay">
 				<div class="pojo-a11y-toolbar-inner">
 					<p class="pojo-a11y-toolbar-title"><?php echo $toolbar_title; ?></p>
-					
+
 					<ul class="pojo-a11y-toolbar-items pojo-a11y-tools">
 						<?php do_action( 'pojo_a11y_toolbar_before_buttons' ); ?>
 						<?php if ( $this->is_toolbar_button_active( 'resize_font' ) ) : ?>
@@ -123,7 +135,7 @@ public function print_toolbar() {
 									<?php echo $this->get_toolbar_button_title( 'resize_font_add' ); ?>
 								</a>
 							</li>
-							
+
 							<li class="pojo-a11y-toolbar-item">
 								<a href="#" class="pojo-a11y-toolbar-link pojo-a11y-btn-resize-font pojo-a11y-btn-resize-minus" data-action="resize-minus" data-action-group="resize" tabindex="-1" role="button">
 									<?php echo $this->get_toolbar_button_title( 'resize_font_less' ); ?>
@@ -188,29 +200,29 @@ public function print_toolbar() {
 						</li>
 					</ul>
 					<?php if ( $has_custom_links ) : ?>
-					<ul class="pojo-a11y-toolbar-items pojo-a11y-links">
-						<?php if ( ! empty( $sitemap_link ) ) : ?>
-						<li class="pojo-a11y-toolbar-item">
-							<a href="<?php echo esc_attr( $sitemap_link ); ?>" class="pojo-a11y-toolbar-link pojo-a11y-link-sitemap" tabindex="-1" role="button">
-								<?php echo $this->get_toolbar_button_title( 'sitemap' ); ?>
-							</a>
-						</li>
-						<?php endif; ?>
-						<?php if ( ! empty( $help_link ) ) : ?>
-						<li class="pojo-a11y-toolbar-item">
-							<a href="<?php echo esc_attr( $help_link ); ?>" class="pojo-a11y-toolbar-link pojo-a11y-link-help" tabindex="-1" role="button">
-								<?php echo $this->get_toolbar_button_title( 'help' ); ?>
-							</a>
-						</li>
-						<?php endif; ?>
-						<?php if ( ! empty( $feedback_link ) ) : ?>
-						<li class="pojo-a11y-toolbar-item">
-							<a href="<?php echo esc_attr( $feedback_link ); ?>" class="pojo-a11y-toolbar-link pojo-a11y-link-feedback" tabindex="-1" role="button">
-								<?php echo $this->get_toolbar_button_title( 'feedback' ); ?>
-							</a>
-						</li>
-						<?php endif; ?>
-					</ul>
+						<ul class="pojo-a11y-toolbar-items pojo-a11y-links">
+							<?php if ( ! empty( $sitemap_link ) ) : ?>
+								<li class="pojo-a11y-toolbar-item">
+									<a href="<?php echo esc_attr( $sitemap_link ); ?>" class="pojo-a11y-toolbar-link pojo-a11y-link-sitemap" tabindex="-1" role="button">
+										<?php echo $this->get_toolbar_button_title( 'sitemap' ); ?>
+									</a>
+								</li>
+							<?php endif; ?>
+							<?php if ( ! empty( $help_link ) ) : ?>
+								<li class="pojo-a11y-toolbar-item">
+									<a href="<?php echo esc_attr( $help_link ); ?>" class="pojo-a11y-toolbar-link pojo-a11y-link-help" tabindex="-1" role="button">
+										<?php echo $this->get_toolbar_button_title( 'help' ); ?>
+									</a>
+								</li>
+							<?php endif; ?>
+							<?php if ( ! empty( $feedback_link ) ) : ?>
+								<li class="pojo-a11y-toolbar-item">
+									<a href="<?php echo esc_attr( $feedback_link ); ?>" class="pojo-a11y-toolbar-link pojo-a11y-link-feedback" tabindex="-1" role="button">
+										<?php echo $this->get_toolbar_button_title( 'feedback' ); ?>
+									</a>
+								</li>
+							<?php endif; ?>
+						</ul>
 					<?php endif; ?>
 				</div>
 			</div>
@@ -219,7 +231,7 @@ public function print_toolbar() {
 	}
 
 	private function get_toolbar_svg( $icon, $icon_title = '' ) {
-		$icons = array(
+		$icons = [
 			'resize_font_add'   => '<path fill="currentColor" d="M256 200v16c0 4.25-3.75 8-8 8h-56v56c0 4.25-3.75 8-8 8h-16c-4.25 0-8-3.75-8-8v-56h-56c-4.25 0-8-3.75-8-8v-16c0-4.25 3.75-8 8-8h56v-56c0-4.25 3.75-8 8-8h16c4.25 0 8 3.75 8 8v56h56c4.25 0 8 3.75 8 8zM288 208c0-61.75-50.25-112-112-112s-112 50.25-112 112 50.25 112 112 112 112-50.25 112-112zM416 416c0 17.75-14.25 32-32 32-8.5 0-16.75-3.5-22.5-9.5l-85.75-85.5c-29.25 20.25-64.25 31-99.75 31-97.25 0-176-78.75-176-176s78.75-176 176-176 176 78.75 176 176c0 35.5-10.75 70.5-31 99.75l85.75 85.75c5.75 5.75 9.25 14 9.25 22.5z"></path>',
 			'resize_font_less'  => '<path fill="currentColor" d="M256 200v16c0 4.25-3.75 8-8 8h-144c-4.25 0-8-3.75-8-8v-16c0-4.25 3.75-8 8-8h144c4.25 0 8 3.75 8 8zM288 208c0-61.75-50.25-112-112-112s-112 50.25-112 112 50.25 112 112 112 112-50.25 112-112zM416 416c0 17.75-14.25 32-32 32-8.5 0-16.75-3.5-22.5-9.5l-85.75-85.5c-29.25 20.25-64.25 31-99.75 31-97.25 0-176-78.75-176-176s78.75-176 176-176 176 78.75 176 176c0 35.5-10.75 70.5-31 99.75l85.75 85.75c5.75 5.75 9.25 14 9.25 22.5z"></path>',
 			'grayscale'         => '<path fill="currentColor" d="M15.75 384h-15.75v-352h15.75v352zM31.5 383.75h-8v-351.75h8v351.75zM55 383.75h-7.75v-351.75h7.75v351.75zM94.25 383.75h-7.75v-351.75h7.75v351.75zM133.5 383.75h-15.5v-351.75h15.5v351.75zM165 383.75h-7.75v-351.75h7.75v351.75zM180.75 383.75h-7.75v-351.75h7.75v351.75zM196.5 383.75h-7.75v-351.75h7.75v351.75zM235.75 383.75h-15.75v-351.75h15.75v351.75zM275 383.75h-15.75v-351.75h15.75v351.75zM306.5 383.75h-15.75v-351.75h15.75v351.75zM338 383.75h-15.75v-351.75h15.75v351.75zM361.5 383.75h-15.75v-351.75h15.75v351.75zM408.75 383.75h-23.5v-351.75h23.5v351.75zM424.5 383.75h-8v-351.75h8v351.75zM448 384h-15.75v-352h15.75v352z"></path>',
@@ -232,7 +244,7 @@ private function get_toolbar_svg( $icon, $icon_title = '' ) {
 			'sitemap' => '<path fill="currentColor" d="M448 312v80c0 13.25-10.75 24-24 24h-80c-13.25 0-24-10.75-24-24v-80c0-13.25 10.75-24 24-24h24v-48h-128v48h24c13.25 0 24 10.75 24 24v80c0 13.25-10.75 24-24 24h-80c-13.25 0-24-10.75-24-24v-80c0-13.25 10.75-24 24-24h24v-48h-128v48h24c13.25 0 24 10.75 24 24v80c0 13.25-10.75 24-24 24h-80c-13.25 0-24-10.75-24-24v-80c0-13.25 10.75-24 24-24h24v-48c0-17.5 14.5-32 32-32h128v-48h-24c-13.25 0-24-10.75-24-24v-80c0-13.25 10.75-24 24-24h80c13.25 0 24 10.75 24 24v80c0 13.25-10.75 24-24 24h-24v48h128c17.5 0 32 14.5 32 32v48h24c13.25 0 24 10.75 24 24z"></path>',
 			'help' => '<path fill="currentColor" d="M224 344v-48c0-4.5-3.5-8-8-8h-48c-4.5 0-8 3.5-8 8v48c0 4.5 3.5 8 8 8h48c4.5 0 8-3.5 8-8zM288 176c0-45.75-48-80-91-80-40.75 0-71.25 17.5-92.75 53.25-2.25 3.5-1.25 8 2 10.5l33 25c1.25 1 3 1.5 4.75 1.5 2.25 0 4.75-1 6.25-3 11.75-15 16.75-19.5 21.5-23 4.25-3 12.5-6 21.5-6 16 0 30.75 10.25 30.75 21.25 0 13-6.75 19.5-22 26.5-17.75 8-42 28.75-42 53v9c0 4.5 3.5 8 8 8h48c4.5 0 8-3.5 8-8v0c0-5.75 7.25-18 19-24.75 19-10.75 45-25.25 45-63.25zM384 224c0 106-86 192-192 192s-192-86-192-192 86-192 192-192 192 86 192 192z"></path>',
 			'feedback' => '<path fill="currentColor" d="M448 224c0 88.5-100.25 160-224 160-12.25 0-24.5-0.75-36.25-2-32.75 29-71.75 49.5-115 60.5-9 2.5-18.75 4.25-28.5 5.5-5.5 0.5-10.75-3.5-12-9.5v-0.25c-1.25-6.25 3-10 6.75-14.5 15.75-17.75 33.75-32.75 45.5-74.5-51.5-29.25-84.5-74.5-84.5-125.25 0-88.25 100.25-160 224-160s224 71.5 224 160z"></path>',
-		);
+		];
 
 		if ( isset( $icons[ $icon ] ) ) {
 			$icon_title_html = '';
@@ -248,11 +260,11 @@ private function get_toolbar_svg( $icon, $icon_title = '' ) {
 
 	private function get_svg_icon( $icon ) {
 		if ( null === $this->svg_icons ) {
-			$this->svg_icons = array(
+			$this->svg_icons = [
 				'wheelchair' => '<g><path d="M60.4,78.9c-2.2,4.1-5.3,7.4-9.2,9.8c-4,2.4-8.3,3.6-13,3.6c-6.9,0-12.8-2.4-17.7-7.3c-4.9-4.9-7.3-10.8-7.3-17.7c0-5,1.4-9.5,4.1-13.7c2.7-4.2,6.4-7.2,10.9-9.2l-0.9-7.3c-6.3,2.3-11.4,6.2-15.3,11.8C7.9,54.4,6,60.6,6,67.3c0,5.8,1.4,11.2,4.3,16.1s6.8,8.8,11.7,11.7c4.9,2.9,10.3,4.3,16.1,4.3c7,0,13.3-2.1,18.9-6.2c5.7-4.1,9.6-9.5,11.7-16.2l-5.7-11.4C63.5,70.4,62.5,74.8,60.4,78.9z"/><path d="M93.8,71.3l-11.1,5.5L70,51.4c-0.6-1.3-1.7-2-3.2-2H41.3l-0.9-7.2h22.7v-7.2H39.6L37.5,19c2.5,0.3,4.8-0.5,6.7-2.3c1.9-1.8,2.9-4,2.9-6.6c0-2.5-0.9-4.6-2.6-6.3c-1.8-1.8-3.9-2.6-6.3-2.6c-2,0-3.8,0.6-5.4,1.8c-1.6,1.2-2.7,2.7-3.2,4.6c-0.3,1-0.4,1.8-0.3,2.3l5.4,43.5c0.1,0.9,0.5,1.6,1.2,2.3c0.7,0.6,1.5,0.9,2.4,0.9h26.4l13.4,26.7c0.6,1.3,1.7,2,3.2,2c0.6,0,1.1-0.1,1.6-0.4L97,77.7L93.8,71.3z"/></g>',
 				'one-click' => '<path d="M50 .8c5.7 0 10.4 4.7 10.4 10.4S55.7 21.6 50 21.6s-10.4-4.7-10.4-10.4S44.3.8 50 .8zM92.2 32l-21.9 2.3c-2.6.3-4.6 2.5-4.6 5.2V94c0 2.9-2.3 5.2-5.2 5.2H60c-2.7 0-4.9-2.1-5.2-4.7l-2.2-24.7c-.1-1.5-1.4-2.5-2.8-2.4-1.3.1-2.2 1.1-2.4 2.4l-2.2 24.7c-.2 2.7-2.5 4.7-5.2 4.7h-.5c-2.9 0-5.2-2.3-5.2-5.2V39.4c0-2.7-2-4.9-4.6-5.2L7.8 32c-2.6-.3-4.6-2.5-4.6-5.2v-.5c0-2.6 2.1-4.7 4.7-4.7h.5c19.3 1.8 33.2 2.8 41.7 2.8s22.4-.9 41.7-2.8c2.6-.2 4.9 1.6 5.2 4.3v1c-.1 2.6-2.1 4.8-4.8 5.1z"/>',
 				'accessibility' => '<path d="M50 8.1c23.2 0 41.9 18.8 41.9 41.9 0 23.2-18.8 41.9-41.9 41.9C26.8 91.9 8.1 73.2 8.1 50S26.8 8.1 50 8.1M50 0C22.4 0 0 22.4 0 50s22.4 50 50 50 50-22.4 50-50S77.6 0 50 0zm0 11.3c-21.4 0-38.7 17.3-38.7 38.7S28.6 88.7 50 88.7 88.7 71.4 88.7 50 71.4 11.3 50 11.3zm0 8.9c4 0 7.3 3.2 7.3 7.3S54 34.7 50 34.7s-7.3-3.2-7.3-7.3 3.3-7.2 7.3-7.2zm23.7 19.7c-5.8 1.4-11.2 2.6-16.6 3.2.2 20.4 2.5 24.8 5 31.4.7 1.9-.2 4-2.1 4.7-1.9.7-4-.2-4.7-2.1-1.8-4.5-3.4-8.2-4.5-15.8h-2c-1 7.6-2.7 11.3-4.5 15.8-.7 1.9-2.8 2.8-4.7 2.1-1.9-.7-2.8-2.8-2.1-4.7 2.6-6.6 4.9-11 5-31.4-5.4-.6-10.8-1.8-16.6-3.2-1.7-.4-2.8-2.1-2.4-3.9.4-1.7 2.1-2.8 3.9-2.4 19.5 4.6 25.1 4.6 44.5 0 1.7-.4 3.5.7 3.9 2.4.7 1.8-.3 3.5-2.1 3.9z"/>',
-			);
+			];
 		}
 
 		if ( isset( $this->svg_icons[ $icon ] ) ) {
@@ -263,10 +275,8 @@ private function get_svg_icon( $icon ) {
 	}
 
 	public function __construct() {
-		add_action( 'wp_enqueue_scripts', array( &$this, 'enqueue_scripts' ) );
-
-		add_action( 'wp_footer', array( &$this, 'print_skip_to_content_link' ), 20 );
-		add_action( 'wp_footer', array( &$this, 'print_toolbar' ), 30 );
+		add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
+		add_action( 'wp_footer', [ $this, 'print_skip_to_content_link' ], 20 );
+		add_action( 'wp_footer', [ $this, 'print_toolbar' ], 30 );
 	}
-
 }
diff --git a/modules/legacy/components/settings.php b/modules/legacy/components/settings.php
new file mode 100644
index 0000000..6e86fb4
--- /dev/null
+++ b/modules/legacy/components/settings.php
@@ -0,0 +1,671 @@
+<?php
+
+namespace EA11y\Modules\Legacy\Components;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Settings
+ */
+class Settings {
+	public $menu_slug = null;
+
+	const PAGE_ID = 'pojo-a11y';
+	const SETTINGS_PAGE = 'toplevel_page_accessibility-settings';
+	const TOOLBAR_PAGE = 'accessibility_page_accessibility-toolbar';
+	const FIELD_TEXT = 'text';
+	const FIELD_SELECT = 'select';
+	const FIELD_CHECKBOX_LIST = 'checkbox_list';
+
+	protected $_fields = [];
+
+	protected $_sections = [];
+	protected $_defaults = [];
+	protected $_pages = [];
+
+
+	/**
+	 * Setup Toolbar fields
+	 *
+	 * @param array $sections
+	 *
+	 * @return array
+	 */
+	public function section_a11y_toolbar( $sections = [] ) {
+		$fields = [];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar',
+			'title'   => __( 'Display Toolbar', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'options' => [
+				'enable'          => __( 'Show on all devices', 'pojo-accessibility' ),
+				'visible-desktop' => __( 'Visible Desktop', 'pojo-accessibility' ),
+				'visible-tablet'  => __( 'Visible Tablet', 'pojo-accessibility' ),
+				'visible-phone'   => __( 'Visible Phone', 'pojo-accessibility' ),
+				'hidden-desktop'  => __( 'Hidden Desktop', 'pojo-accessibility' ),
+				'hidden-tablet'   => __( 'Hidden Tablet', 'pojo-accessibility' ),
+				'hidden-phone'    => __( 'Hidden Phone', 'pojo-accessibility' ),
+				'disable'         => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$toolbar_options_classes = 'pojo-a11y-toolbar-button';
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_title',
+			'title' => __( 'Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'desc'  => __( 'Title top of the toolbar (recommended).', 'pojo-accessibility' ),
+			'class' => $toolbar_options_classes,
+			'std'   => __( 'Accessibility Tools', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar_button_resize_font',
+			'title'   => __( 'Resize Font', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'class'   => $toolbar_options_classes,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_resize_font_add_title',
+			'title' => __( 'Increase Text', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row no-border',
+			'std'   => __( 'Increase Text', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_resize_font_less_title',
+			'title' => __( 'Decrease Text', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'   => __( 'Decrease Text', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar_button_grayscale',
+			'title'   => __( 'Grayscale', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'class'   => $toolbar_options_classes,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_grayscale_title',
+			'title' => __( 'Grayscale Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'   => __( 'Grayscale', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar_button_high_contrast',
+			'title'   => __( 'High Contrast', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'class'   => $toolbar_options_classes,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_high_contrast_title',
+			'title' => __( 'High Contrast Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'   => __( 'High Contrast', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar_button_negative_contrast',
+			'title'   => __( 'Negative Contrast', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'class'   => $toolbar_options_classes,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_negative_contrast_title',
+			'title' => __( 'Negative Contrast Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'   => __( 'Negative Contrast', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar_button_light_bg',
+			'title'   => __( 'Light Background', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'class'   => $toolbar_options_classes,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_light_bg_title',
+			'title' => __( 'Light Background Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'   => __( 'Light Background', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar_button_links_underline',
+			'title'   => __( 'Links Underline', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'class'   => $toolbar_options_classes,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_links_underline_title',
+			'title' => __( 'Links Underline Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'   => __( 'Links Underline', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_toolbar_button_readable_font',
+			'title'   => __( 'Readable Font', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'class'   => $toolbar_options_classes,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_readable_font_title',
+			'title' => __( 'Readable Font Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'   => __( 'Readable Font', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_sitemap_title',
+			'title' => __( 'Sitemap Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes,
+			'std'   => __( 'Sitemap', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'pojo_a11y_toolbar_button_sitemap_link',
+			'title'       => __( 'Sitemap Link', 'pojo-accessibility' ),
+			'type'        => self::FIELD_TEXT,
+			'placeholder' => 'http://your-domain.com/sitemap',
+			'desc'        => __( 'Link for sitemap page in your website. Leave blank to disable.',
+				'pojo-accessibility' ),
+			'class'       => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'         => '',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_help_title',
+			'title' => __( 'Help Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes,
+			'std'   => __( 'Help', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'pojo_a11y_toolbar_button_help_link',
+			'title'       => __( 'Help Link', 'pojo-accessibility' ),
+			'type'        => self::FIELD_TEXT,
+			'placeholder' => 'http://your-domain.com/help',
+			'desc'        => __( 'Link for help page in your website. Leave blank to disable.', 'pojo-accessibility' ),
+			'class'       => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'         => '',
+		];
+
+		$fields[] = [
+			'id'    => 'pojo_a11y_toolbar_button_feedback_title',
+			'title' => __( 'Feedback Title', 'pojo-accessibility' ),
+			'type'  => self::FIELD_TEXT,
+			'class' => $toolbar_options_classes,
+			'std'   => __( 'Feedback', 'pojo-accessibility' ),
+		];
+
+		$fields[] = [
+			'id'          => 'pojo_a11y_toolbar_button_feedback_link',
+			'title'       => __( 'Feedback Link', 'pojo-accessibility' ),
+			'type'        => self::FIELD_TEXT,
+			'placeholder' => 'http://your-domain.com/feedback',
+			'desc'        => __( 'Link for feedback page in your website. Leave blank to disable.',
+				'pojo-accessibility' ),
+			'class'       => $toolbar_options_classes . ' pojo-settings-child-row',
+			'std'         => '',
+		];
+
+		$sections[] = [
+			'id'     => 'section-a11y-toolbar',
+			'page'   => self::TOOLBAR_PAGE,
+			'title'  => __( 'Toolbar Settings', 'pojo-accessibility' ),
+			'intro'  => '',
+			'fields' => $fields,
+		];
+
+		$sections[] = [
+			'id'     => 'section-a11y-styles',
+			'page'   => self::TOOLBAR_PAGE,
+			'title'  => __( 'Style Settings', 'pojo-accessibility' ),
+			'intro'  => sprintf( __( 'For style settings of accessibility tools go to > Customize > <a href="%s">Accessibility</a>.', 'pojo-accessibility' ),
+				$this->get_admin_url( 'customizer' )
+			),
+			'fields' => [],
+		];
+
+		return $sections;
+	}
+
+	public function section_a11y_settings( $sections ) {
+		$fields = [];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_focusable',
+			'title'   => __( 'Add Outline Focus', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'desc'    => __( 'Add outline to elements on keyboard focus.', 'pojo-accessibility' ),
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'disable',
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_skip_to_content_link',
+			'title'   => __( 'Skip to Content link', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'desc'    => __( 'Add skip to content link when using keyboard.', 'pojo-accessibility' ),
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'          => 'pojo_a11y_skip_to_content_link_element_id',
+			'title'       => __( 'Skip to Content Element ID', 'pojo-accessibility' ),
+			'placeholder' => 'content',
+			'type'        => self::FIELD_TEXT,
+			'std'         => 'content',
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_remove_link_target',
+			'title'   => __( 'Remove target attribute from links', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'desc'    => __( 'This option will reset all your target links to open in the same window or tab.',
+				'pojo-accessibility' ),
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'disable',
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_add_role_links',
+			'title'   => __( 'Add landmark roles to all links', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'desc'    => __( 'This option will add <code>role="link"</code> to all links on the page.',
+				'pojo-accessibility' ),
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_save',
+			'title'   => __( 'Sitewide Accessibility', 'pojo-accessibility' ),
+			'desc'    => __( 'Consistent accessibility throughout your site visit. Site remembers you and stays accessible.',
+				'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'options' => [
+				'enable'  => __( 'Enable', 'pojo-accessibility' ),
+				'disable' => __( 'Disable', 'pojo-accessibility' ),
+			],
+			'std'     => 'enable',
+		];
+
+		$fields[] = [
+			'id'      => 'pojo_a11y_save_expiration',
+			'title'   => __( 'Remember user for', 'pojo-accessibility' ),
+			'type'    => self::FIELD_SELECT,
+			'desc'    => __( 'Define how long your toolbar settings will be remembered', 'pojo-accessibility' ),
+			'options' => [
+				'1'   => __( '1 Hour', 'pojo-accessibility' ),
+				'6'   => __( '6 Hours', 'pojo-accessibility' ),
+				'12'  => __( '12 Hours', 'pojo-accessibility' ),
+				'24'  => __( '1 Day', 'pojo-accessibility' ),
+				'48'  => __( '2 Days', 'pojo-accessibility' ),
+				'72'  => __( '3 Days', 'pojo-accessibility' ),
+				'168' => __( '1 Week', 'pojo-accessibility' ),
+				'720' => __( '1 Month', 'pojo-accessibility' ),
+			],
+			'std'     => '12',
+		];
+
+		$sections[] = [
+			'id'     => 'section-a11y-settings',
+			'page'   => self::SETTINGS_PAGE,
+			'title'  => __( 'General Settings', 'pojo-accessibility' ),
+			'intro'  => '',
+			'fields' => $fields,
+		];
+
+		return $sections;
+	}
+
+	public function print_js() {
+		// TODO: Maybe need to move to other file
+		?>
+		<script>
+			jQuery( document ).ready( function ( $ ) {
+				var $a11yToolbarOption = $( 'table.form-table #pojo_a11y_toolbar' ),
+					$a11yToolbarButtons = $( 'tr.pojo-a11y-toolbar-button' );
+
+				$a11yToolbarOption.on( 'change', function () {
+					if ( 'disable' !== $( this ).val() ) {
+						$a11yToolbarButtons.fadeIn( 'fast' );
+					} else {
+						$a11yToolbarButtons.hide();
+					}
+				} );
+				$a11yToolbarOption.trigger( 'change' );
+			} );
+		</script>
+		<?php
+	}
+
+	public function get_settings_sections() {
+		$sections        = [];
+		$sections        = $this->section_a11y_toolbar( $sections );
+		$sections        = $this->section_a11y_settings( $sections );
+		$this->_sections = $sections;
+
+		return $this->_sections;
+	}
+
+	public function add_settings_section( $args = [] ) {
+		$args = wp_parse_args( $args, [
+			'id'    => '',
+			'title' => '',
+		] );
+
+		foreach ( $this->_sections as $section ) {
+			if ( $args['id'] !== $section['id'] ) {
+				continue;
+			}
+			if ( empty( $section['intro'] ) ) {
+				return;
+			}
+			printf( '<p>%s</p>', $section['intro'] );
+			break;
+		}
+	}
+
+	public function add_settings_field( $args = [] ) {
+		if ( empty( $args ) ) {
+			return;
+		}
+
+		$args = wp_parse_args( $args, [
+			'id'   => '',
+			'std'  => '',
+			'type' => self::FIELD_TEXT,
+		] );
+
+		if ( empty( $args['id'] ) || empty( $args['type'] ) ) {
+			return;
+		}
+
+		$field_callback = 'render_' . $args['type'] . '_field';
+		if ( method_exists( $this, $field_callback ) ) {
+			call_user_func( [ $this, $field_callback ], $args );
+		}
+	}
+
+	public function render_select_field( $field ) {
+		$options = [];
+		foreach ( $field['options'] as $option_key => $option_value ) {
+			$options[] = sprintf(
+				'<option value="%1$s"%2$s>%3$s</option>',
+				esc_attr( $option_key ),
+				selected( get_option( $field['id'], $field['std'] ), $option_key, false ),
+				$option_value
+			);
+		}
+		?>
+		<select id="<?php echo $field['id']; ?>" name="<?php echo $field['id']; ?>">
+			<?php echo implode( '', $options ); ?>
+		</select>
+		<?php if ( ! empty( $field['sub_desc'] ) ) {
+			echo $field['sub_desc'];
+		} ?>
+		<?php if ( ! empty( $field['desc'] ) ) : ?>
+			<p class="description"><?php echo $field['desc']; ?></p>
+		<?php endif; ?>
+		<?php
+	}
+
+	public function render_text_field( $field ) {
+		if ( empty( $field['classes'] ) ) {
+			$field['classes'] = [ 'regular-text' ];
+		}
+		?>
+		<input type="text" class="<?php echo implode( ' ', $field['classes'] ); ?>" id="<?php echo $field['id']; ?>"
+			   name="<?php echo $field['id']; ?>" value="<?php echo esc_attr( get_option( $field['id'],
+			$field['std'] ) ); ?>"<?php echo ! empty( $field['placeholder'] ) ? ' placeholder="' . $field['placeholder'] . '"' : ''; ?> />
+		<?php if ( ! empty( $field['sub_desc'] ) ) {
+			echo $field['sub_desc'];
+		} ?>
+		<?php if ( ! empty( $field['desc'] ) ) : ?>
+			<p class="description"><?php echo $field['desc']; ?></p>
+		<?php endif; ?>
+		<?php
+	}
+
+	public function admin_init() {
+		foreach ( $this->get_settings_sections() as $section_key => $section ) {
+			add_settings_section(
+				$section['id'],
+				$section['title'],
+				[ &$this, 'add_settings_section' ],
+				$section['page']
+			);
+
+			if ( empty( $section['fields'] ) ) {
+				continue;
+			}
+
+			foreach ( $section['fields'] as $field ) {
+				add_settings_field(
+					$field['id'],
+					$field['title'],
+					[ &$this, 'add_settings_field' ],
+					$section['page'],
+					$section['id'],
+					$field
+				);
+
+				$sanitize_callback = [ $this, 'field_html' ];
+				if ( ! empty( $field['type'] ) && self::FIELD_CHECKBOX_LIST === $field['type'] ) {
+					$sanitize_callback = [ $this, 'field_checkbox_list' ];
+				}
+				if ( ! empty( $field['sanitize_callback'] ) ) {
+					$sanitize_callback = $field['sanitize_callback'];
+				}
+
+				register_setting( $section['page'], $field['id'], $sanitize_callback );
+			}
+		}
+	}
+
+	public static function field_html( $input ) {
+		return stripslashes( wp_filter_post_kses( addslashes( $input ) ) );
+	}
+
+	public static function field_checkbox_list( $input ) {
+		if ( empty( $input ) ) {
+			$input = [];
+		}
+
+		return $input;
+	}
+
+	public function display_settings_page() {
+		$screen    = get_current_screen();
+		$screen_id = $screen->id;
+		if ( false !== strpos( $screen_id, 'toolbar' ) ) {
+			$screen_id = self::TOOLBAR_PAGE;
+		}
+		?>
+		<div class="wrap">
+			<h2><?php echo $this->_page_title; ?></h2>
+			<?php settings_errors( $screen_id ); ?>
+			<form method="post" action="options.php">
+				<?php
+				settings_fields( $screen_id );
+				do_settings_sections( $screen_id );
+
+				submit_button();
+				?>
+			</form>
+
+		</div><!-- /.wrap -->
+		<?php
+	}
+
+	public function admin_menu() {
+		$this->menu_slug = add_menu_page(
+			__( 'Accessibility', 'pojo-accessibility' ),
+			__( 'Accessibility', 'pojo-accessibility' ),
+			'manage_options',
+			'accessibility-settings',
+			[ &$this, 'display_settings_page' ],
+			'dashicons-universal-access-alt'
+		);
+		add_submenu_page(
+			'accessibility-settings',
+			__( 'Accessibility Settings', 'pojo-accessibility' ),
+			__( 'Settings', 'pojo-accessibility' ),
+			'manage_options',
+			'accessibility-settings',
+			[ &$this, 'display_settings_page' ]
+		);
+		add_submenu_page(
+			'accessibility-settings',
+			__( 'Accessibility Toolbar', 'pojo-accessibility' ),
+			__( 'Toolbar', 'pojo-accessibility' ),
+			'manage_options',
+			'accessibility-toolbar',
+			[ &$this, 'display_settings_page' ]
+		);
+		add_submenu_page(
+			'accessibility-settings',
+			__( 'Customize', 'pojo-accessibility' ),
+			__( 'Customize', 'pojo-accessibility' ),
+			'manage_options',
+			'/customize.php?autofocus[section]=accessibility'
+		);
+	}
+
+	public function plugin_action_links( $links, $plugin_file ) {
+		if ( EA11Y_BASE === $plugin_file ) {
+			$settings   = '<a href="' . $this->get_admin_url( 'general' ) . '" aria-label="' . esc_attr__( 'Set Accessibility settings',
+					'pojo-accessibility' ) . '">' . __( 'Settings', 'pojo-accessibility' ) . '</a>';
+			$toolbar    = '<a href="' . $this->get_admin_url( 'toolbar' ) . '" aria-label="' . esc_attr__( 'Set Accessibility Toolbar Settings',
+					'pojo-accessibility' ) . '">' . __( 'Toolbar', 'pojo-accessibility' ) . '</a>';
+			$customizer = '<a href="' . $this->get_admin_url( 'customizer' ) . '" aria-label="' . esc_attr__( 'Customize Toolbar',
+					'pojo-accessibility' ) . '" target="_blank">' . __( 'Customize', 'pojo-accessibility' ) . '</a>';
+			array_unshift( $links, $customizer );
+			array_unshift( $links, $toolbar );
+			array_unshift( $links, $settings );
+		}
+
+		return $links;
+	}
+
+	private function get_admin_url( $type ) {
+		switch ( $type ) {
+			case 'customizer':
+				return admin_url( 'customize.php?autofocus[section]=accessibility' );
+				break;
+			case 'general':
+				return admin_url( 'admin.php?page=accessibility-settings' );
+				break;
+			case 'toolbar':
+				return admin_url( 'admin.php?page=accessibility-toolbar' );
+				break;
+		}
+	}
+
+	private function get_default_values() {
+		if ( empty( $this->_defaults ) ) {
+			if ( empty( $this->_sections ) ) {
+				$this->get_settings_sections();
+			}
+			$defaults = [];
+			foreach ( $this->_sections as $section ) {
+				foreach ( $section['fields'] as $field ) {
+					$defaults[ $field['id'] ] = isset( $field['std'] ) ? $field['std'] : '';
+				}
+			}
+			$this->_defaults = $defaults;
+		}
+	}
+
+	public function get_default_title_text( $option ) {
+		$this->get_default_values();
+		$default = isset( $this->_defaults[ $option ] ) ? $this->_defaults[ $option ] : '';
+
+		return get_option( $option, $default );
+	}
+
+	public function __construct() {
+		$this->_page_title      = __( 'One Click Accessibility', 'pojo-accessibility' );
+		$this->_page_menu_title = __( 'One Click Accessibility', 'pojo-accessibility' );
+		$this->_menu_parent     = 'themes.php';
+
+		add_action( 'admin_menu', [ &$this, 'admin_menu' ], 20 );
+		add_action( 'admin_init', [ &$this, 'admin_init' ], 20 );
+		add_action( 'admin_footer', [ &$this, 'print_js' ] );
+		add_filter( 'plugin_action_links_' . EA11Y_BASE, [ $this, 'plugin_action_links' ], 10, 2 );
+	}
+}
diff --git a/modules/legacy/module.php b/modules/legacy/module.php
new file mode 100644
index 0000000..3b04414
--- /dev/null
+++ b/modules/legacy/module.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace EA11y\Modules\Legacy;
+
+use EA11y\Classes\Module_Base;
+use EA11y\Modules\Legacy\Components\Customizer;
+use EA11y\Modules\Legacy\Components\Settings;
+use EA11y\Plugin;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Module extends Module_Base {
+	public function get_name(): string {
+		return 'legacy';
+	}
+
+	public static function component_list() : array {
+		return [
+			'Frontend',
+			'Customizer',
+			'Settings',
+			'Admin'
+		];
+	}
+
+	public function backwards_compatibility() {
+		if ( false === get_option( POJO_A11Y_CUSTOMIZER_OPTIONS, false ) ) {
+			/**
+			 * @var Customizer $customizer
+			 */
+			$customizer = $this->get_components( 'Customizer' );
+			$customizer_fields = $customizer->get_customizer_fields();
+			$options = [];
+			$mods = get_theme_mods();
+			foreach ( $customizer_fields as $field ) {
+				if ( isset( $mods[ $field['id'] ] ) ) {
+					$options[ $field['id'] ] = $mods[ $field['id'] ];
+				} else {
+					$options[ $field['id'] ] = $field['std'];
+				}
+			}
+			update_option( POJO_A11Y_CUSTOMIZER_OPTIONS, $options );
+		}
+	}
+
+	public function add_elementor_support() {
+		$this->register_components( [ 'Elementor'  ] );
+	}
+
+	public static function get_settings() {
+		/**
+		 * @var Settings $settings
+		 */
+		return Plugin::instance()->modules_manager->get_modules( 'Legacy' )->get_component( 'Settings' );
+	}
+
+	/**
+	 * Module constructor.
+	 */
+	public function __construct() {
+		$this->register_components();
+		add_action( 'admin_init', [ $this, 'backwards_compatibility' ] );
+		add_action( 'elementor/init', [ $this, 'add_elementor_support' ] );
+	}
+}
diff --git a/plugin.php b/plugin.php
new file mode 100644
index 0000000..d0f561b
--- /dev/null
+++ b/plugin.php
@@ -0,0 +1,111 @@
+<?php
+namespace EA11y;
+
+use Manager;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Class Plugin
+ * Main Plugin class
+ */
+class Plugin {
+	/**
+	 * Instance
+	 *
+	 * @access public
+	 * @static
+	 *
+	 * @var Plugin The single instance of the class.
+	 */
+	public static $instance = null;
+
+	/**
+	 * Modules Manager
+	 * @var null|Manager
+	 */
+	public $modules_manager = null;
+
+	/**
+	 * class aliases
+	 * @access private
+	 * @var array
+	 */
+	private array $classes_aliases = [];
+
+	/**
+	 * Instance
+	 *
+	 * Ensures only one instance of the class is loaded or can be loaded.
+	 *
+	 * @access public
+	 *
+	 * @return Plugin An instance of the class.
+	 */
+	public static function instance(): ?Plugin {
+		if ( is_null( self::$instance ) ) {
+			self::$instance = new self();
+		}
+
+		return self::$instance;
+	}
+
+	public function autoload( $class ) {
+		if ( 0 !== strpos( $class, __NAMESPACE__ ) ) {
+			return;
+		}
+
+		$has_class_alias = isset( $this->classes_aliases[ $class ] );
+
+		// Backward Compatibility: Save old class name for set an alias after the new class is loaded
+		if ( $has_class_alias ) {
+			$class_alias_name = $this->classes_aliases[ $class ];
+			$class_to_load = $class_alias_name;
+		} else {
+			$class_to_load = $class;
+		}
+
+		if ( ! class_exists( $class_to_load ) ) {
+			$filename = strtolower(
+				preg_replace(
+					[ '/^' . __NAMESPACE__ . '\\\/', '/([a-z])([A-Z])/', '/_/', '/\\\/' ],
+					[ '', '$1-$2', '-', DIRECTORY_SEPARATOR ],
+					$class_to_load
+				)
+			);
+			$filename = EA11Y_PATH . $filename . '.php';
+
+			if ( is_readable( $filename ) ) {
+				include $filename;
+			}
+		}
+
+		if ( $has_class_alias ) {
+			class_alias( $class_alias_name, $class );
+		}
+	}
+
+	private function includes() {
+		require_once  EA11Y_PATH . 'includes/manager.php';
+		$this->modules_manager = new \EA11y\Manager();
+	}
+
+	/**
+	 *  Plugin class constructor
+	 *
+	 * Register plugin action hooks and filters
+	 *
+	 * @access public
+	 */
+	public function __construct() {
+		static $autoloader_registered = false;
+		if ( ! $autoloader_registered ) {
+			$autoloader_registered = spl_autoload_register( [ $this, 'autoload' ] );
+		}
+		$this->includes();
+	}
+}
+// Instantiate Plugin Class
+Plugin::instance();
diff --git a/pojo-accessibility.php b/pojo-accessibility.php
index 54f0af1..b41e9e9 100644
--- a/pojo-accessibility.php
+++ b/pojo-accessibility.php
@@ -9,15 +9,21 @@
 Text Domain: pojo-accessibility
 Domain Path: /languages/
 */
-if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+} // Exit if accessed directly
 
-define( 'POJO_A11Y__FILE__', __FILE__ );
-define( 'POJO_A11Y_BASE', plugin_basename( POJO_A11Y__FILE__ ) );
-define( 'POJO_A11Y_URL', plugins_url( '/', POJO_A11Y__FILE__ ) );
-define( 'POJO_A11Y_ASSETS_PATH', plugin_dir_path( POJO_A11Y__FILE__ ) . 'assets/' );
-define( 'POJO_A11Y_ASSETS_URL', POJO_A11Y_URL . 'assets/' );
+// Legacy
 define( 'POJO_A11Y_CUSTOMIZER_OPTIONS', 'pojo_a11y_customizer_options' );
 
+define( 'EA11Y_VERSION', '2.1.0' );
+define( 'EA11Y_MAIN_FILE', __FILE__ );
+define( 'EA11Y_BASE', plugin_basename( EA11Y_MAIN_FILE ) );
+define( 'EA11Y_PATH', plugin_dir_path( __FILE__ ) );
+define( 'EA11Y_URL', plugins_url( '/', __FILE__ ) );
+define( 'EA11Y_ASSETS_PATH', EA11Y_PATH . 'assets/' );
+define( 'EA11Y_ASSETS_URL', EA11Y_URL . 'assets/' );
+
 final class Pojo_Accessibility {
 
 	/**
@@ -26,38 +32,16 @@ final class Pojo_Accessibility {
 	 */
 	public static $instance = null;
 
-	/**
-	 * @var Pojo_A11y_Frontend
-	 */
-	public $frontend;
-
-	/**
-	 * @var Pojo_A11y_Customizer
-	 */
-	public $customizer;
-
-	/**
-	 * @var Pojo_A11y_Settings
-	 */
-	public $settings;
-
-	/**
-	 * @var Pojo_A11y_Admin_UI
-	 */
-	public $admin_ui;
-
-	public function load_textdomain() {
+	public function i18n() {
 		load_plugin_textdomain( 'pojo-accessibility' );
 	}
 
 	/**
 	 * Throw error on object clone
-	 *
 	 * The whole idea of the singleton design pattern is that there is a single
 	 * object therefore, we don't want the object to be cloned.
-	 *
-	 * @since 1.0.0
 	 * @return void
+	 * @since 1.0.0
 	 */
 	public function __clone() {
 		// Cloning instances of the class is forbidden
@@ -66,9 +50,8 @@ public function __clone() {
 
 	/**
 	 * Disable unserializing of the class
-	 *
-	 * @since 1.0.0
 	 * @return void
+	 * @since 1.0.0
 	 */
 	public function __wakeup() {
 		// Unserializing instances of the class is forbidden
@@ -82,49 +65,30 @@ public static function instance() {
 		if ( is_null( self::$instance ) ) {
 			self::$instance = new self();
 		}
-		return self::$instance;
-	}
-
-	public function bootstrap() {
-		require( 'includes/pojo-a11y-frontend.php' );
-		require( 'includes/pojo-a11y-customizer.php' );
-		require( 'includes/pojo-a11y-settings.php' );
-		require( 'includes/pojo-a11y-admin-ui.php' );
 
-		$this->frontend   = new Pojo_A11y_Frontend();
-		$this->customizer = new Pojo_A11y_Customizer();
-		$this->settings = new Pojo_A11y_Settings();
-		$this->admin_ui = new Pojo_A11y_Admin_UI();
-	}
-
-	public function backwards_compatibility() {
-		if ( false === get_option( POJO_A11Y_CUSTOMIZER_OPTIONS, false ) ) {
-			$customizer_fields = $this->customizer->get_customizer_fields();
-			$options = array();
-			$mods = get_theme_mods();
-			foreach ( $customizer_fields as $field ) {
-				if ( isset( $mods[ $field['id'] ] ) ) {
-					$options[ $field['id'] ] = $mods[ $field['id'] ];
-				} else {
-					$options[ $field['id'] ] = $field['std'];
-				}
-			}
-			update_option( POJO_A11Y_CUSTOMIZER_OPTIONS, $options );
-		}
+		return self::$instance;
 	}
 
-	public function add_elementor_support() {
-		require( 'includes/pojo-a11y-elementor.php' );
-
-		new Pojo_A11y_Elementor();
+	/**
+	 * Initialize the plugin
+	 * Do your Validations here:
+	 * for example checks for basic plugin requirements, if one check fail don't continue,
+	 * if all check have passed include the plugin class.
+	 * Fired by `plugins_loaded` action hook.
+	 * @since 2.2.0
+	 * @access public
+	 */
+	public function init() {
+		// Once we get here, We have passed all validation checks, so we can safely include our plugin
+		require_once 'plugin.php';
 	}
 
 	private function __construct() {
-		add_action( 'init', array( &$this, 'bootstrap' ) );
-		add_action( 'admin_init', array( &$this, 'backwards_compatibility' ) );
-		add_action( 'plugins_loaded', array( &$this, 'load_textdomain' ) );
+		// Load translation
+		add_action( 'init', [ $this, 'i18n' ] );
 
-		add_action( 'elementor/init', array( $this, 'add_elementor_support' ) );
+		// Init Plugin
+		add_action( 'plugins_loaded', [ $this, 'init' ] );
 	}
 
 }

From c64149555e1778e3e16fbfbb7377595e08468fd4 Mon Sep 17 00:00:00 2001
From: Ohad <ohad@elementor.com>
Date: Tue, 22 Oct 2024 16:28:17 +0300
Subject: [PATCH 02/65] =?UTF-8?q?=E2=9C=85=20Added=20build=20and=20tests?=
 =?UTF-8?q?=20CI/CD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .build-rsync-exclude                          |  33 ++
 .eslintignore                                 |  10 +
 .eslintrc                                     |  52 +++
 .github/checkstyle-problem-matcher.json       |  23 ++
 .github/scripts/publish-to-wordpress-org.sh   |  65 ++++
 .github/scripts/update-version-in-files.js    |  63 ++++
 .github/scripts/validate-build-files.sh       |  49 +++
 .github/workflows/build.yml                   |  92 ++++++
 .github/workflows/js-ci.yml                   |  45 +++
 .github/workflows/php-coding-standards.yml    |  55 ++++
 .github/workflows/phpunit.yml                 | 146 +++++++++
 .gitignore                                    |   8 +
 .jshintrc                                     |  16 -
 .travis.yml                                   |  35 ---
 Gruntfile.js                                  | 297 ------------------
 composer.json                                 |  43 ++-
 .../legacy/assets}/css/style.css              |   0
 .../legacy/assets}/css/style.min.css          |   0
 .../legacy/assets}/js/app.dev.js              |   0
 .../legacy/assets}/js/app.min.js              |   0
 .../legacy/assets}/js/skip-link-focus-fix.js  |   0
 .../legacy/assets}/less/_background.less      |   0
 .../legacy/assets}/less/_high-contrast.less   |   0
 .../legacy/assets}/less/_mixing.less          |   0
 .../legacy/assets}/less/_toolbar.less         |   0
 .../legacy/assets}/less/_underline.less       |   0
 .../legacy/assets}/less/_visibility.less      |   0
 .../legacy/assets}/less/style.less            |   0
 modules/legacy/components/customizer.php      |  11 +-
 modules/legacy/components/frontend.php        |   4 +-
 package.json                                  |  54 ++--
 phpunit.xml.dist                              |  43 +++
 ruleset.xml                                   |  54 ++++
 tests/bootstrap.php                           |  54 ++--
 tests/phpunit/helpers/functions.php           |   8 +
 tests/phpunit/helpers/module-test-base.php    |  77 +++++
 tests/phpunit/helpers/route-test.php          |  31 ++
 tests/phpunit/helpers/test-base.php           |  40 +++
 .../plugin/modules/legacy/module-test.php     |  20 ++
 tests/test-base.php                           |  13 -
 webpack.config.js                             |  20 ++
 41 files changed, 1047 insertions(+), 414 deletions(-)
 create mode 100644 .build-rsync-exclude
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc
 create mode 100644 .github/checkstyle-problem-matcher.json
 create mode 100644 .github/scripts/publish-to-wordpress-org.sh
 create mode 100644 .github/scripts/update-version-in-files.js
 create mode 100644 .github/scripts/validate-build-files.sh
 create mode 100644 .github/workflows/build.yml
 create mode 100644 .github/workflows/js-ci.yml
 create mode 100644 .github/workflows/php-coding-standards.yml
 create mode 100644 .github/workflows/phpunit.yml
 delete mode 100755 .jshintrc
 delete mode 100644 .travis.yml
 delete mode 100644 Gruntfile.js
 rename {assets => modules/legacy/assets}/css/style.css (100%)
 rename {assets => modules/legacy/assets}/css/style.min.css (100%)
 rename {assets => modules/legacy/assets}/js/app.dev.js (100%)
 rename {assets => modules/legacy/assets}/js/app.min.js (100%)
 rename {assets => modules/legacy/assets}/js/skip-link-focus-fix.js (100%)
 rename {assets => modules/legacy/assets}/less/_background.less (100%)
 rename {assets => modules/legacy/assets}/less/_high-contrast.less (100%)
 rename {assets => modules/legacy/assets}/less/_mixing.less (100%)
 rename {assets => modules/legacy/assets}/less/_toolbar.less (100%)
 rename {assets => modules/legacy/assets}/less/_underline.less (100%)
 rename {assets => modules/legacy/assets}/less/_visibility.less (100%)
 rename {assets => modules/legacy/assets}/less/style.less (100%)
 create mode 100644 phpunit.xml.dist
 create mode 100644 ruleset.xml
 mode change 100755 => 100644 tests/bootstrap.php
 create mode 100644 tests/phpunit/helpers/functions.php
 create mode 100644 tests/phpunit/helpers/module-test-base.php
 create mode 100644 tests/phpunit/helpers/route-test.php
 create mode 100644 tests/phpunit/helpers/test-base.php
 create mode 100644 tests/phpunit/plugin/modules/legacy/module-test.php
 delete mode 100755 tests/test-base.php
 create mode 100644 webpack.config.js

diff --git a/.build-rsync-exclude b/.build-rsync-exclude
new file mode 100644
index 0000000..5a08744
--- /dev/null
+++ b/.build-rsync-exclude
@@ -0,0 +1,33 @@
+.bpg.json
+.babelrc
+ruleset.xml
+webpack.config.js
+phpunit.xml.dist
+.DS_Store
+node_modules/
+.git
+.gitignore
+.gitmodules
+.github/
+.editorconfig
+.gitattributes
+.eslintrc
+.eslintignore
+.phpcs.xml.dist
+.phpunit.xml.d
+coverage/
+assets/dev/
+.phpunit.result*
+bin/
+tests/
+package.json
+composer.json
+composer.lock
+package-lock.json
+jest.config.js
+
+.build-rsync-exclude
+one-click-accessibility/
+one-click-accessibility.zip
+.svn-assets/
+.husky/
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..9184afc
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,10 @@
+assets/lib/**/*.js
+assets/js/*.js
+**/*.min.js
+**/node_modules/**
+**/vendor/**
+build/**
+libraries/**
+coverage/**
+assets/build/**
+tests/**
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..bd2111c
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,52 @@
+{
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@wordpress/eslint-plugin/recommended-with-formatting",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/strict"
+  ],
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jquery": true
+  },
+  "globals": {
+    "jQuery": "writable"
+  },
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "sourceType": "module",
+    "requireConfigFile": false
+  },
+  "rules": {
+    "no-console": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "strict": [ "error", "global" ],
+    "curly": "warn",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type"
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": false
+        }
+      }
+    ]
+  },
+  "parser": "@babel/eslint-parser"
+}
diff --git a/.github/checkstyle-problem-matcher.json b/.github/checkstyle-problem-matcher.json
new file mode 100644
index 0000000..5c6ce66
--- /dev/null
+++ b/.github/checkstyle-problem-matcher.json
@@ -0,0 +1,23 @@
+{
+	"problemMatcher": [
+		{
+			"owner": "phpcs",
+			"severity": "error",
+			"pattern": [
+				{
+					"regexp": "^<file name=\"(?:\\/github\\/workspace\\/)?(.*)\">$",
+					"file": 1
+				},
+				{
+					"regexp": "<error line=\"(\\d*)\" column=\"(\\d*)\" severity=\"(error|warning)\" message=\"(.*)\" source=\"(.*)(\"\\/>+)$",
+					"line": 1,
+					"column": 2,
+					"severity": 3,
+					"message": 4,
+					"code": 5,
+					"loop": true
+				}
+			]
+		}
+	]
+}
diff --git a/.github/scripts/publish-to-wordpress-org.sh b/.github/scripts/publish-to-wordpress-org.sh
new file mode 100644
index 0000000..dcbed84
--- /dev/null
+++ b/.github/scripts/publish-to-wordpress-org.sh
@@ -0,0 +1,65 @@
+#!/bin/bash
+set -eo pipefail
+
+if [[ -z "$SVN_USERNAME" ]]; then
+	echo "Set the SVN_USERNAME secret"
+	exit 1
+fi
+
+if [[ -z "$SVN_PASSWORD" ]]; then
+	echo "Set the SVN_PASSWORD secret"
+	exit 1
+fi
+
+if [[ -z "$PLUGIN_VERSION" ]]; then
+	echo "Set the PLUGIN_VERSION env var"
+	exit 1
+fi
+
+if [[ -z "$PLUGIN_SLUG" ]]; then
+	echo "Set the PLUGIN_SLUG env var"
+	exit 1
+fi
+
+echo "Publish version: ${PLUGIN_VERSION}"
+
+PLUGIN_PATH="$GITHUB_WORKSPACE/${PLUGIN_SLUG}"
+SVN_PATH="$GITHUB_WORKSPACE/svn"
+
+cd $PLUGIN_PATH
+mkdir -p $SVN_PATH
+cd $SVN_PATH
+
+echo "Checkout from SVN"
+svn co https://plugins.svn.wordpress.org/${PLUGIN_SLUG}/trunk
+
+echo "Clean trunk folder"
+cd $SVN_PATH/trunk
+find . -maxdepth 1 -not -name ".svn" -not -name "." -not -name ".." -exec rm -rf {} +
+
+echo "Copy files"
+rsync -ah --progress $PLUGIN_PATH/* $SVN_PATH/trunk
+
+echo "Preparing files"
+cd $SVN_PATH/trunk
+
+echo "svn delete"
+svn status | grep -v '^.[ \t]*\\..*' | { grep '^!' || true; } | awk '{print $2}' | xargs -r svn delete;
+
+echo "svn add"
+svn status | grep -v '^.[ \t]*\\..*' | { grep '^?' || true; } | awk '{print $2}' | xargs -r svn add;
+
+svn status
+
+echo "Commit files to trunk"
+svn ci -m "Upload v${PLUGIN_VERSION}" --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD"
+
+echo "Copy files from trunk to tag ${PLUGIN_VERSION}"
+svn cp https://plugins.svn.wordpress.org/${PLUGIN_SLUG}/trunk https://plugins.svn.wordpress.org/${PLUGIN_SLUG}/tags/${PLUGIN_VERSION} --message "Tagged ${PLUGIN_VERSION}" --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD"
+svn update
+
+echo "Remove the SVN folder from the workspace (for multiple releases in the same Action)"
+#rm -rf $SVN_PATH
+
+echo "Back to the workspace root"
+cd $GITHUB_WORKSPACE
diff --git a/.github/scripts/update-version-in-files.js b/.github/scripts/update-version-in-files.js
new file mode 100644
index 0000000..03ede1b
--- /dev/null
+++ b/.github/scripts/update-version-in-files.js
@@ -0,0 +1,63 @@
+'use strict';
+
+const fs = require( "fs" );
+
+const { VERSION } = process.env;
+ if ( ! VERSION ) {
+	throw new Error( 'VERSION is not defined in the environment variables.' );
+}
+
+async function replaceInFileWithArray( filePath, replacementArray ) {
+	try {
+		let content = fs.readFileSync( filePath, { encoding: 'utf8' } );
+
+		for ( const replacement of replacementArray ) {
+			console.log( `Replacing ${ replacement.from } with ${ replacement.to } in ${ filePath }` );
+			content = content.replace( replacement.from, replacement.to );
+		}
+		console.log( content );
+		//fs.writeFileSync( filePath, content, { encoding: 'utf8' } );
+		console.log( `All replacements in ${ filePath } were successful.`);
+	} catch (error) {
+		console.error( `An error occurred in ${ filePath }:`, error );
+	}
+}
+
+const run = async () => {
+	try {
+		// update stable tag in readme.txt
+		await replaceInFileWithArray( './readme.txt',
+			[
+				{
+					from:  /Stable tag: (.*)/m,
+					to: `Stable tag: ${ VERSION }`,
+				},
+				{
+					from:  /= NEXT_VERSION =/m,
+					to: `= ${ VERSION } =`,
+				},
+			]
+		);
+
+		// update version in image-optimization.php
+		await replaceInFileWithArray( './image-optimization.php',
+			[
+				{
+					from:  /\* Version: (.*)/m,
+					to: `* Version: ${ VERSION }`,
+				},
+				{
+					from:  /define\( \'IMAGE_OPTIMIZER_VERSION\', \'(.*)\' \)\;/m,
+					to: `define( 'IMAGE_OPTIMIZER_VERSION', '${ VERSION }' );`,
+				},
+			]
+		);
+
+	} catch ( err ) {
+		// eslint-disable-next-line no-console
+		console.error( 'Error occurred:', err );
+		process.exit( 1 );
+	}
+};
+
+run();
diff --git a/.github/scripts/validate-build-files.sh b/.github/scripts/validate-build-files.sh
new file mode 100644
index 0000000..31fb621
--- /dev/null
+++ b/.github/scripts/validate-build-files.sh
@@ -0,0 +1,49 @@
+#!/bin/bash
+set -eo pipefail
+
+if [[ -z "$PLUGIN_SLUG" ]]; then
+	echo "Set the PLUGIN_SLUG env var"
+	exit 1
+fi
+
+if [[ -z "$PLUGIN_VERSION" ]]; then
+	echo "Set the PLUGIN_VERSION env var"
+	exit 1
+fi
+
+PLUGIN_PATH="$GITHUB_WORKSPACE/${PLUGIN_SLUG}"
+
+cd $PLUGIN_PATH
+
+PLUGIN_MAIN_FILE="${PLUGIN_SLUG}.php"
+
+if [ ! -f "${PLUGIN_MAIN_FILE}" ]; then
+	echo "${PLUGIN_MAIN_FILE} file does not exist"
+	exit 1
+fi
+
+if [ ! -f "readme.txt" ]; then
+	echo "readme.txt file does not exist"
+	exit 1
+fi
+
+if [[ $(grep -c "Version: $PLUGIN_VERSION" "$PLUGIN_MAIN_FILE") -eq 0 ]]; then
+	echo "${PLUGIN_MAIN_FILE} file does not contain the correct build version : $PLUGIN_VERSION"
+	EXISTING_VERSION=$(sed -n 's/.*Version: \(.*\)/\1/p' "$PLUGIN_MAIN_FILE")
+	echo "Existing version: $EXISTING_VERSION"
+	exit 1
+fi
+
+if [[ $(grep -c "Stable tag: $PLUGIN_VERSION" "readme.txt") -eq 0 ]]; then
+  echo "readme.txt file does not contain the correct stable tag version : $PLUGIN_VERSION"
+  EXISTING_VERSION=$(sed -n 's/.*Stable tag: \(.*\)/\1/p' "readme.txt")
+  echo "Existing version: $EXISTING_VERSION"
+  exit 1
+fi
+
+echo "validate-build-files Details:"
+echo "---"
+echo "SVN Tag name: $PLUGIN_VERSION"
+echo "Package Version: $PACKAGE_VERSION"
+echo "Trunk Files:"
+ls -la
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..bfe9bf8
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,92 @@
+name: Build
+on:
+  pull_request:
+  workflow_call:
+  workflow_dispatch:
+    inputs:
+      push_to_slack:
+        description: 'Push to Slack'
+        type: boolean
+        required: true
+        default: 'false'
+
+concurrency:
+  cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@a36e1e52ff4a1c9e9c9be31551ee4712a6cb6bd0 # 2.27.1
+        with:
+          php-version: '7.4'
+        env:
+          fail-fast: 'true'
+
+      - name: OAuth Composer Authentication
+        run:
+          composer config -g github-oauth.github.com ${{ secrets.DEVOPS_TOKEN }}
+
+      - name: Install Composer dependencies cache
+        uses: ramsey/composer-install@v2
+
+      - name: Install Composer dependencies
+        run:
+          composer install --no-dev
+
+      - name: Get current date
+        id: date
+        run: echo "::set-output name=date::$(date +'%Y-%m-%d')"
+
+      - name: "Debug info: show tooling versions"
+        continue-on-error: true
+        run: |
+          set +e
+          echo "Start debug Info"
+          echo "Date: ${{ steps.date.outputs.date }}"
+          echo "PHP Version: $(php -v)"
+          echo "Composer Version: $(composer --version)"
+          echo "Node Version: $(node --version)"
+          echo "NPM Version: $(npm --version)"
+          echo "GIT Version: $(git --version)"
+          echo "The github context is:"
+          echo "${{ toJson(github) }}"
+          echo "End debug Info"
+          echo "exitcode=$?" >> $GITHUB_OUTPUT
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Build Plugin
+        run: |
+          rsync -av --exclude-from=.build-rsync-exclude . one-click-accessibility
+          zip -r one-click-accessibility.zip one-click-accessibility
+
+      - name: Archive
+        uses: actions/upload-artifact@v4
+        with:
+          name: one-click-accessibility
+          path: one-click-accessibility.zip
+          retention-days: 14
+
+      - name: Push to Slack on PR merge
+        if: ${{ github.event.pull_request.merged == true }}
+        run: |
+          curl -F file=@one-click-accessibility.zip -F "initial_comment=One Click Accessibility - A new PR has been pushed to the master branch by ${{ github.actor }}."  title="${{ github.event.pull_request.title }}" -F channels=C07LFCFNGDB -H "Authorization: Bearer ${{ secrets.CLOUD_SLACK_BOT_TOKEN }}" https://slack.com/api/files.upload
+
+      - name: Push to Slack on Manual Trigger
+        if: ${{ github.event.inputs.push_to_slack == 'true'  }}
+        run: |
+          curl -F file=@one-click-accessibility.zip -F "initial_comment=One Click Accessibility - A new build was triggered by ${{ github.actor }}."  title="Manuall ${{ steps.date.outputs.date }}" -F channels=C07LFCFNGDB -H "Authorization: Bearer ${{ secrets.CLOUD_SLACK_BOT_TOKEN }}" https://slack.com/api/files.upload
diff --git a/.github/workflows/js-ci.yml b/.github/workflows/js-ci.yml
new file mode 100644
index 0000000..efcf141
--- /dev/null
+++ b/.github/workflows/js-ci.yml
@@ -0,0 +1,45 @@
+name: NPM CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+env:
+  token: ${{ secrets.CLOUD_DEVOPS_TOKEN }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Lint
+        run: npm run lint:js
+
+#      - name: Test
+#        run: npm run test
diff --git a/.github/workflows/php-coding-standards.yml b/.github/workflows/php-coding-standards.yml
new file mode 100644
index 0000000..26a91dc
--- /dev/null
+++ b/.github/workflows/php-coding-standards.yml
@@ -0,0 +1,55 @@
+name: PHP Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: read
+
+jobs:
+  PHP-Code-Standards:
+    name: Lint PHP files
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[skip PHPCS]') || !contains(github.event.head_commit.message, '[skip CI]')"
+    steps:
+      - name: Check out source code
+        uses: actions/checkout@v4
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@a36e1e52ff4a1c9e9c9be31551ee4712a6cb6bd0 # 2.27.1
+        with:
+          php-version: '7.4'
+          coverage: none
+          tools: composer, cs2pr, phpcs
+        env:
+          fail-fast: 'true'
+
+      - name: Log debug information
+        run: |
+          export PATH=$HOME/.composer/vendor/bin:$PATH
+          php --version
+          phpcs -i
+          composer --version
+
+      - name: Oauth Composer authentication
+        run: composer config -g github-oauth.github.com ${{ secrets.DEVOPS_TOKEN }}
+
+      - name: Install dependencies
+        uses: ramsey/composer-install@83af392bf5f031813d25e6fe4cd626cdba9a2df6 # 2.2.0
+
+      - name: Add error matcher
+        run: echo "::add-matcher::$(pwd)/.github/checkstyle-problem-matcher.json"
+
+      - name: Run style check
+        run: |
+          export PATH=$HOME/.composer/vendor/bin:$PATH
+          composer run lint -- --report=checkstyle
+
diff --git a/.github/workflows/phpunit.yml b/.github/workflows/phpunit.yml
new file mode 100644
index 0000000..2f9665c
--- /dev/null
+++ b/.github/workflows/phpunit.yml
@@ -0,0 +1,146 @@
+name: PHPUnit
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  cancel-in-progress: true
+  group: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: read
+
+jobs:
+  unit-tests:
+    name: "WP ${{ matrix.wp }}, multisite: ${{ matrix.ms }}, PHP: ${{ matrix.php }}"
+    if: "!contains(github.event.head_commit.message, '[ci skip]')"
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        php: [7.4, 8.0, 8.1, 8.2]
+        wp: [6.4.x, latest, nightly]
+        ms: [no, yes]
+        coverage: [no]
+        phpunit: [9]
+        include:
+          # PHP 7.4 is not supported by PHPUnit 9
+          - phpunit: 7
+            php: 7.4
+          # add coverage job
+          - coverage: yes
+            php: 8.0
+            wp: latest
+            ms: no
+            phpunit: 9
+
+    services:
+      mysql:
+        image: mariadb:latest
+        ports:
+          - "3306:3306"
+        env:
+          MYSQL_ROOT_PASSWORD: wordpress
+          MARIADB_INITDB_SKIP_TZINFO: 1
+          MYSQL_USER: wordpress
+          MYSQL_PASSWORD: wordpress
+          MYSQL_DATABASE: wordpress_test
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Matrix variables
+        id: matrix
+        run: |
+            echo "::group::Matrix variables"
+            echo "PHP version = ${{ matrix.php }}"
+            echo "WordPress = ${{ matrix.wp }}"
+            echo "Multisite = ${{ matrix.ms }}"
+            echo "Coverage = ${{ matrix.coverage }}"
+            echo "PHPUnit = ${{ matrix.phpunit }}"
+            echo "::endgroup::"
+
+      - name: Decide whether to enable coverage
+        id: coverage
+        run: |
+          if [ "${{ matrix.coverage }}" = "yes" ]; then
+            echo "coverage=pcov" >> $GITHUB_OUTPUT
+            echo 'ini=pcov.directory=inc, pcov.exclude="~/(vendor|tests|node_modules)/~"'
+          else
+            echo "coverage=none" >> $GITHUB_OUTPUT
+            echo "ini=opcache.enable_cli=1, opcache.jit=tracing, opcache.jit_buffer_size=64M" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@a36e1e52ff4a1c9e9c9be31551ee4712a6cb6bd0 # 2.27.1
+        with:
+          coverage: ${{ steps.coverage.outputs.coverage }}
+          ini-values: ${{ steps.coverage.outputs.ini }}
+          php-version: ${{ matrix.php }}
+        env:
+          fail-fast: 'true'
+
+      - name: Install PHPUnit
+        run: |
+          wget -q -O /usr/local/bin/phpunit "https://phar.phpunit.de/phpunit-${{ matrix.phpunit }}.phar"
+          chmod +x /usr/local/bin/phpunit
+
+      - name: Oauth Composer authentication
+        run:
+          composer config -g github-oauth.github.com ${{ secrets.DEVOPS_TOKEN }}
+
+      - name: Install dependencies
+        uses: ramsey/composer-install@83af392bf5f031813d25e6fe4cd626cdba9a2df6 # 2.2.0
+
+      #- name: Install Node.js
+       # uses: actions/setup-node@v2
+       # with:
+         # node-version: 18.x
+
+      #- name: Install dependencies
+      #  run: npm ci
+
+      #- name: Build assets
+      #  run: npm run build
+
+      - name: Set up WordPress and WordPress Test Library
+        uses: sjinks/setup-wordpress-test-library@dd7f8144e892b042e034d713b734f7a19446abe1 # 2.0.1
+        with:
+          version: ${{ matrix.wp }}
+
+      - name: Set up multisite mode
+        run: echo "WP_MULTISITE=1" >> $GITHUB_ENV
+        if: matrix.ms == 'yes'
+
+      - name: Update wp-test-config.php
+        run: |
+          if php -r 'exit(PHP_VERSION_ID < 80100);'; then
+            echo "Disabling WP_DEBUG in wp-test-config.php"
+            sed -i "s@define( 'WP_DEBUG', true );@// define( 'WP_DEBUG', true );@" /tmp/wordpress-tests-lib/wp-tests-config.php
+          fi
+
+      - name: Verify MariaDB connection
+        run: |
+          while ! mysqladmin ping -h 127.0.0.1 -P ${{ job.services.mysql.ports[3306] }} --silent; do
+            sleep 1
+          done
+        timeout-minutes: 1
+
+      - name: Run tests
+        run: |
+          OPTIONS=
+          if [ "${{ steps.coverage.outputs.coverage }}" != 'none' ]; then
+            OPTIONS="$OPTIONS --coverage-clover=clover.xml"
+          fi
+          phpunit --order-by=random ${OPTIONS}
+
+      - name: Upload coverage report
+        uses: codecov/codecov-action@eaaf4bedf32dbdc6b720b63067d99c4d77d6047d # v3.1.4
+        with:
+          files: clover.xml
+          flags: unittests
+        if: ${{ steps.coverage.outputs.coverage != 'none' }}
diff --git a/.gitignore b/.gitignore
index 26b1f11..4d1728c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,11 @@ composer.lock
 npm-debug.log
 .DS_Store
 package-lock.json
+bin/.env
+*/node_modules
+!assets/dev/*
+assets/js/
+coverage/
+.phpunit.result.cache
+.editorconfig
+.vscode
diff --git a/.jshintrc b/.jshintrc
deleted file mode 100755
index 1164285..0000000
--- a/.jshintrc
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-	"bitwise": true,
-	"browser": true,
-	"curly": true,
-	"eqeqeq": true,
-	"eqnull": true,
-	"esnext": true,
-	"immed": true,
-	"jquery": true,
-	"latedef": true,
-	"newcap": true,
-	"noarg": true,
-	"node": true,
-	"strict": false,
-	"trailing": true
-}
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 5ab28c5..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,35 +0,0 @@
-# Travis CI Configuration File
-
-sudo: false
-
-# Tell Travis CI we're using PHP
-language: php
-
-# PHP version used in first build configuration.
-php:
-    - 5.3
-    - 5.4
-    - 5.5
-    - 5.6
-    - 7.0
-
-# WordPress version used in first build configuration.
-env:
-    - WP_VERSION=latest WP_MULTISITE=0
-    - WP_VERSION=latest WP_MULTISITE=1
-    - WP_VERSION=4.0 WP_MULTISITE=0
-    - WP_VERSION=4.0 WP_MULTISITE=1
-    - WP_VERSION=4.1 WP_MULTISITE=0
-    - WP_VERSION=4.1 WP_MULTISITE=1
-    - WP_VERSION=4.2 WP_MULTISITE=0
-    - WP_VERSION=4.2 WP_MULTISITE=1
-    - WP_VERSION=4.3 WP_MULTISITE=0
-    - WP_VERSION=4.3 WP_MULTISITE=1
-
-before_script:
-  - bash bin/install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION
-
-after_success:
-  - bash <(curl -s https://codecov.io/bash)
-
-script: phpunit --coverage-clover=coverage.xml
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
deleted file mode 100644
index 6f76dca..0000000
--- a/Gruntfile.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/**
- * Pojo Makefile
- */
-'use strict';
-
-module.exports = function( grunt ) {
-
-	require( 'matchdep' ).filterDev( 'grunt-*' ).forEach( grunt.loadNpmTasks );
-
-	// Project configuration.
-	grunt.initConfig( {
-		pkg: grunt.file.readJSON( 'package.json' ),
-
-		banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
-			'<%= grunt.template.today("dd-mm-yyyy") %> */',
-		
-		checktextdomain: {
-			standard: {
-				options:{
-					text_domain: 'pojo-accessibility',
-					correct_domain: true,
-					keywords: [
-						// WordPress keywords
-						'__:1,2d',
-						'_e:1,2d',
-						'_x:1,2c,3d',
-						'esc_html__:1,2d',
-						'esc_html_e:1,2d',
-						'esc_html_x:1,2c,3d',
-						'esc_attr__:1,2d',
-						'esc_attr_e:1,2d',
-						'esc_attr_x:1,2c,3d',
-						'_ex:1,2c,3d',
-						'_n:1,2,4d',
-						'_nx:1,2,4c,5d',
-						'_n_noop:1,2,3d',
-						'_nx_noop:1,2,3c,4d'
-					]
-				},
-				files: [ {
-					src: [
-						'**/*.php',
-						'!node_modules/**',
-						'!build/**',
-						'!tests/**',
-						'!vendor/**',
-						'!*~'
-					],
-					expand: true
-				} ]
-			}
-		},
-
-		usebanner: {
-			dist: {
-				options: {
-					banner: '<%= banner %>'
-				},
-				files: {
-					src: [
-						'assets/js/app.min.js',
-						'assets/css/style.css',
-						'assets/css/style.min.css'
-					]
-				}
-			}
-		},
-
-		jshint: {
-			options: {
-				jshintrc: '.jshintrc'
-			},
-			all: [
-				'Gruntfile.js',
-				'assets/js/skip-link-focus-fix.js',
-				'assets/js/app.dev.js'
-			]
-		},
-
-		uglify: {
-			options: {},
-			dist: {
-				files: {
-					'assets/js/app.min.js': [
-						'assets/js/skip-link-focus-fix.js',
-						'assets/js/app.dev.js'
-					]
-				}
-			}
-		},
-
-		less: {
-			dist: {
-				options: {
-					//cleancss: true
-				},
-				files: {
-					'assets/css/style.css': 'assets/less/style.less'
-				}
-			},
-			
-			mincss: {
-				options: {
-					compress: true
-				},
-				files: {
-					'assets/css/style.min.css': 'assets/less/style.less'
-				}
-			}
-		},
-
-		watch: {
-			js: {
-				files: [
-					'**/*.js',
-					'!**/*.min.js'
-				],
-				tasks: [
-					'scripts'
-				],
-				options: {}
-			},
-
-			less: {
-
-				files: [
-					'**/*.less'
-				],
-				tasks: [
-					'styles'
-				],
-				options: {}
-			}
-		},
-
-		bumpup: {
-			options: {
-				updateProps: {
-					pkg: 'package.json'
-				}
-			},
-			file: 'package.json'
-		},
-
-		replace: {
-			plugin_main: {
-				src: [ 'pojo-accessibility.php' ],
-				overwrite: true,
-				replacements: [
-					{
-						from: /Version: \d{1,1}\.\d{1,2}\.\d{1,2}/g,
-						to: 'Version: <%= pkg.version %>'
-					}
-				]
-			},
-
-			readme: {
-				src: [ 'readme.txt' ],
-				overwrite: true,
-				replacements: [
-					{
-						from: /Stable tag: \d{1,1}\.\d{1,2}\.\d{1,2}/g,
-						to: 'Stable tag: <%= pkg.version %>'
-					}
-				]
-			}
-		},
-
-		shell: {
-			git_add_all : {
-				command: [
-					'git add --all',
-					'git commit -m "Bump to <%= pkg.version %>"'
-				].join( '&&' )
-			}
-		},
-
-		release: {
-			options: {
-				bump: false,
-				npm: false,
-				commit: false,
-				tagName: 'v<%= version %>',
-				commitMessage: 'released v<%= version %>',
-				tagMessage: 'Tagged as v<%= version %>'
-			}
-		},
-
-		wp_readme_to_markdown: {
-			github: {
-				options: {
-					screenshot_url: 'assets/{screenshot}.png',
-					wordpressPluginSlug: 'pojo-accessibility',
-					travisUrlRepo: 'https://travis-ci.org/pojome/one-click-accessibility',
-					gruntDependencyStatusUrl: 'https://david-dm.org/pojome/pojo-accessibility'
-				},
-				files: {
-					'README.md': 'readme.txt'
-				}
-			}
-		},
-
-		copy: {
-			main: {
-				src: [
-					'**',
-					'!node_modules/**',
-					'!build/**',
-					'!bin/**',
-					'!.git/**',
-					'!tests/**',
-					'!.travis.yml',
-					'!.jshintrc',
-					'!README.md',
-					'!phpunit.xml',
-					'!vendor/**',
-					'!Gruntfile.js',
-					'!package.json',
-					'!package-lock.json',
-					'!npm-debug.log',
-					'!composer.json',
-					'!composer.lock',
-					'!assets/less/**',
-					'!wp-assets/**',
-					'!.gitignore',
-					'!.gitmodules',
-					'!*~'
-				],
-				expand: true,
-				dest: 'build/'
-			}
-		},
-
-		clean: {
-			//Clean up build folder
-			main: [
-				'build'
-			]
-		},
-
-		wp_deploy: {
-			deploy:{
-				options: {
-					plugin_slug: '<%= pkg.slug %>',
-					svn_user: 'KingYes',
-					build_dir: 'build/',
-					assets_dir: 'wp-assets/'
-				}
-			}
-		},
-
-		phpunit: {
-			classes: {
-				dir: ''
-			},
-			options: {
-				bin: 'phpunit',
-				bootstrap: 'tests/bootstrap.php',
-				colors: true
-			}
-		}
-		
-	} );
-
-	// Default task(s).
-	grunt.registerTask( 'default', [
-		'checktextdomain',
-		'scripts',
-		'styles',
-		'usebanner',
-		'wp_readme_to_markdown',
-		//'phpunit'
-	] );
-
-	grunt.registerTask( 'build', [
-		'default',
-		'clean',
-		'copy'
-	] );
-
-	grunt.registerTask( 'scripts', [
-		'jshint',
-		'uglify'
-	] );
-	
-	grunt.registerTask( 'styles', [
-		'less'
-	] );
-
-	grunt.registerTask( 'publish', [
-		'default',
-		'bumpup',
-		'replace',
-		'shell:git_add_all',
-		'release'
-	] );
-};
diff --git a/composer.json b/composer.json
index d91f30d..97f699d 100644
--- a/composer.json
+++ b/composer.json
@@ -9,7 +9,44 @@
 			"email": "yakir@pojo.me"
 		}
 	],
-	"require": {
-		"phpunit/phpunit": "4.8.8"
-	}
+  "require-dev": {
+    "johnpbloch/wordpress-core": "^6.0",
+    "dealerdirect/phpcodesniffer-composer-installer": "^0.7.1",
+    "squizlabs/php_codesniffer": "^3.6",
+    "wp-coding-standards/wpcs": "2.3",
+    "php-stubs/wordpress-stubs": "^6.0",
+    "elementor/eunit": "^0.0.10",
+    "phpcompatibility/phpcompatibility-wp": "^2.1",
+    "phpunit/php-code-coverage": "^9.2",
+    "wildwolf/wordpress-test-library-stubs": "^6.0",
+    "wp-phpunit/wp-phpunit": "^6.0",
+    "yoast/phpunit-polyfills": "^2.0"
+  },
+  "scripts": {
+    "lint": "phpcs --standard=./ruleset.xml ./**/*.php"
+  },
+  "require": {
+    "firebase/php-jwt": "^6.10"
+  },
+  "config": {
+    "allow-plugins": {
+      "composer/installers": true,
+      "dealerdirect/phpcodesniffer-composer-installer": true
+    }
+  },
+  "extra": {
+    "imposter": {
+      "namespace": "...",
+      "excludes": [ "firebase/php-jwt"]
+    },
+    "installer-paths": {
+      "vendor/{$vendor}/{$name}/": [ "firebase/php-jwt"]
+    }
+  },
+  "repositories":[
+    {
+      "type": "vcs",
+      "url": "git@github.com:elementor/eunit.git"
+    }
+  ]
 }
diff --git a/assets/css/style.css b/modules/legacy/assets/css/style.css
similarity index 100%
rename from assets/css/style.css
rename to modules/legacy/assets/css/style.css
diff --git a/assets/css/style.min.css b/modules/legacy/assets/css/style.min.css
similarity index 100%
rename from assets/css/style.min.css
rename to modules/legacy/assets/css/style.min.css
diff --git a/assets/js/app.dev.js b/modules/legacy/assets/js/app.dev.js
similarity index 100%
rename from assets/js/app.dev.js
rename to modules/legacy/assets/js/app.dev.js
diff --git a/assets/js/app.min.js b/modules/legacy/assets/js/app.min.js
similarity index 100%
rename from assets/js/app.min.js
rename to modules/legacy/assets/js/app.min.js
diff --git a/assets/js/skip-link-focus-fix.js b/modules/legacy/assets/js/skip-link-focus-fix.js
similarity index 100%
rename from assets/js/skip-link-focus-fix.js
rename to modules/legacy/assets/js/skip-link-focus-fix.js
diff --git a/assets/less/_background.less b/modules/legacy/assets/less/_background.less
similarity index 100%
rename from assets/less/_background.less
rename to modules/legacy/assets/less/_background.less
diff --git a/assets/less/_high-contrast.less b/modules/legacy/assets/less/_high-contrast.less
similarity index 100%
rename from assets/less/_high-contrast.less
rename to modules/legacy/assets/less/_high-contrast.less
diff --git a/assets/less/_mixing.less b/modules/legacy/assets/less/_mixing.less
similarity index 100%
rename from assets/less/_mixing.less
rename to modules/legacy/assets/less/_mixing.less
diff --git a/assets/less/_toolbar.less b/modules/legacy/assets/less/_toolbar.less
similarity index 100%
rename from assets/less/_toolbar.less
rename to modules/legacy/assets/less/_toolbar.less
diff --git a/assets/less/_underline.less b/modules/legacy/assets/less/_underline.less
similarity index 100%
rename from assets/less/_underline.less
rename to modules/legacy/assets/less/_underline.less
diff --git a/assets/less/_visibility.less b/modules/legacy/assets/less/_visibility.less
similarity index 100%
rename from assets/less/_visibility.less
rename to modules/legacy/assets/less/_visibility.less
diff --git a/assets/less/style.less b/modules/legacy/assets/less/style.less
similarity index 100%
rename from assets/less/style.less
rename to modules/legacy/assets/less/style.less
diff --git a/modules/legacy/components/customizer.php b/modules/legacy/components/customizer.php
index 03f76a6..464c831 100644
--- a/modules/legacy/components/customizer.php
+++ b/modules/legacy/components/customizer.php
@@ -168,13 +168,10 @@ public function get_customizer_fields() {
 	public function customize_a11y( $wp_customize ) {
 		$fields = $this->get_customizer_fields();
 
-		$section_description = '<p>' . __( 'Use the control below to customize the appearance and layout of the Accessibility Toolbar',
-				'pojo-accessibility' ) . '</p><p>' .
-		                       sprintf( __( 'Additional Toolbar settings can be configured at the %s page.',
-			                       'pojo-accessibility' ),
-			                       '<a href="' . admin_url( 'admin.php?page=accessibility-toolbar' ) . '" target="blank">' . __( 'Accessibility Toolbar',
-				                       'pojo-accessibility' ) . '</a>'
-		                       ) . '</p>';
+		$section_description = '<p>' . __( 'Use the control below to customize the appearance and layout of the Accessibility Toolbar', 'pojo-accessibility' ) . '</p><p>' .
+			sprintf( __( 'Additional Toolbar settings can be configured at the %s page.', 'pojo-accessibility' ),
+			'<a href="' . admin_url( 'admin.php?page=accessibility-toolbar' ) . '" target="blank">' . __( 'Accessibility Toolbar', 'pojo-accessibility' ) . '</a>'
+			) . '</p>';
 
 		$wp_customize->add_section( 'accessibility', [
 			'title'       => __( 'Accessibility', 'pojo-accessibility' ),
diff --git a/modules/legacy/components/frontend.php b/modules/legacy/components/frontend.php
index 456f9e3..1e957e1 100644
--- a/modules/legacy/components/frontend.php
+++ b/modules/legacy/components/frontend.php
@@ -39,7 +39,7 @@ public function get_toolbar_button_title( $button_type ) {
 	public function enqueue_scripts() {
 		wp_register_script(
 			'pojo-a11y',
-			EA11Y_ASSETS_URL . 'js/app.min.js',
+			EA11Y_URL . 'modules/legacy/js/app.min.js',
 			[ 'jquery' ],
 			'1.0.0',
 			true
@@ -47,7 +47,7 @@ public function enqueue_scripts() {
 
 		wp_register_style(
 			'pojo-a11y',
-			EA11Y_ASSETS_URL . 'css/style.min.css',
+			EA11Y_URL . 'modules/legacy/assets/css/style.min.css',
 			[],
 			'1.0.0'
 		);
diff --git a/package.json b/package.json
index 8caef29..2ed5569 100644
--- a/package.json
+++ b/package.json
@@ -4,23 +4,41 @@
 	"homepage": "http://pojo.me/",
 	"description": "",
 	"version": "2.1.0",
+	"scripts": {
+		"build": "wp-scripts build",
+		"start": "wp-scripts start",
+		"format": "wp-scripts format",
+		"lint:js": "wp-scripts lint-js",
+		"prepare": "husky install",
+		"local:start": "wp-env start",
+		"local:stop": "wp-env stop",
+		"local:composer:dev": "wp-env run cli --env-cwd=wp-content/plugins/one-click-accessibility composer install",
+		"local:composer:build": "wp-env run cli --env-cwd=wp-content/plugins/one-click-accessibility composer install --no-dev",
+		"local:wp-cli": "wp-env run cli --env-cwd=wp-content/plugins/one-click-accessibility wp",
+		"local:phpunit": "wp-env run tests-cli --env-cwd=wp-content/plugins/one-click-accessibility ./vendor/bin/phpunit",
+		"local:phpunit:cov": "wp-env start --xdebug=coverage && wp-env run tests-cli --env-cwd=wp-content/plugins/one-click-accessibility ./vendor/bin/phpunit --coverage-html /var/www/html/wp-content/plugins/one-click-accessibility/coverage"
+	},
 	"devDependencies": {
-		"grunt": "~1.0.2",
-		"grunt-checktextdomain": "~1.0.1",
-		"grunt-phpunit": "~0.3.6",
-		"grunt-wp-readme-to-markdown-with-extra": "~2.2.0",
-		"grunt-contrib-jshint": "~1.1.0",
-		"grunt-contrib-watch": "~1.0.1",
-		"grunt-contrib-uglify": "~3.3.0",
-		"grunt-contrib-less": "~1.4.1",
-		"grunt-banner": "~0.6.0",
-		"grunt-bumpup": "~0.6.3",
-		"grunt-shell": "~2.1.0",
-		"grunt-text-replace": "~0.4.0",
-		"grunt-release": "~0.14.0",
-		"grunt-contrib-copy": "~1.0.0",
-		"grunt-contrib-clean": "~1.1.0",
-		"grunt-wp-deploy": "~1.2.1",
-		"matchdep": "~2.0.0"
+		"@eslint/js": "^9.13.0",
+		"@wordpress/dom-ready": "^4.10.0",
+		"@wordpress/env": "^10.10.0",
+		"@wordpress/eslint-plugin": "^21.3.0",
+		"@wordpress/scripts": "^30.3.0",
+		"eslint": "^8.57.1",
+		"eslint-plugin-babel": "^5.3.1",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-jsx-a11y": "^6.10.1",
+		"eslint-plugin-react": "^7.37.1"
+	},
+	"dependencies": {
+		"@elementor/icons": "^1.17.0",
+		"@elementor/ui": "^1.21.2",
+		"@wordpress/api-fetch": "^7.10.0",
+		"@wordpress/core-data": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/date": "^5.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/url": "^4.10.0"
 	}
-}
\ No newline at end of file
+}
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
new file mode 100644
index 0000000..24f5e89
--- /dev/null
+++ b/phpunit.xml.dist
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<phpunit
+        bootstrap="tests/bootstrap.php"
+        backupGlobals="false"
+        colors="true"
+        convertErrorsToExceptions="true"
+        convertNoticesToExceptions="true"
+        convertWarningsToExceptions="true"
+        processIsolation="false"
+>
+    <php>
+        <env name="PLUGIN_FILE" value="pojo-accessibility.php"/>
+        <env name="EUNIT_TEST_CASE_NAMESPACE" value="EA11y" />
+        <const name="WP_TESTS_PHPUNIT_POLYFILLS_PATH" value="vendor/yoast/phpunit-polyfills" />
+        <env name="WP_PHPUNIT__TESTS_CONFIG" value="/wordpress-tests/wp-tests-config.php" />
+    </php>
+
+    <testsuites>
+        <testsuite name="pojo-accessibility">
+            <directory suffix=".php">./tests/phpunit/plugin</directory>
+        </testsuite>
+    </testsuites>
+
+    <filter>
+        <whitelist>
+            <directory suffix=".php">./</directory>
+            <exclude>
+                <directory>.github</directory>
+                <directory>assets</directory>
+                <directory>bin</directory>
+                <directory>build</directory>
+                <directory>docs</directory>
+                <directory>node_modules</directory>
+                <directory>tests</directory>
+                <directory>includes/libraries</directory>
+                <directory>libraries</directory>
+                <directory>libraries/action-scheduler</directory>
+                <directory>vendor</directory>
+                <directory>coverage</directory>
+            </exclude>
+        </whitelist>
+    </filter>
+</phpunit>
diff --git a/ruleset.xml b/ruleset.xml
new file mode 100644
index 0000000..2f53acf
--- /dev/null
+++ b/ruleset.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0"?>
+<ruleset name="WordPress.Elementor">
+	<description>Elementor Coding Standard</description>
+
+	<arg name="parallel" value="8" />
+
+	<config name="text_domain" value="site-mailer" />
+
+	<exclude-pattern>vendor/</exclude-pattern>
+	<exclude-pattern>tmp/</exclude-pattern>
+	<exclude-pattern>build/</exclude-pattern>
+	<exclude-pattern>node_modules/</exclude-pattern>
+	<exclude-pattern>includes/libraries/</exclude-pattern>
+
+	<rule ref="WordPress.Security" />
+	<!-- Optional: enforce short arrays. -->
+	<rule ref="Generic.Arrays.DisallowLongArraySyntax"/>
+
+	<rule ref="WordPress-Extra">
+		<exclude name="Generic.Commenting.DocComment.MissingShort" />
+		<exclude name="Generic.Formatting.MultipleStatementAlignment" />
+		<exclude name="Generic.Arrays.DisallowShortArraySyntax.Found" />
+		<exclude name="Squiz.Commenting.ClassComment.Missing" />
+		<exclude name="Squiz.Commenting.FileComment.Missing" />
+		<exclude name="Squiz.Commenting.FunctionComment.Missing" />
+		<exclude name="Squiz.Commenting.FunctionComment.MissingParamComment" />
+		<exclude name="Squiz.Commenting.VariableComment.Missing" />
+		<exclude name="Squiz.PHP.EmbeddedPhp.ContentBeforeOpen" />
+		<exclude name="Squiz.PHP.EmbeddedPhp.ContentAfterOpen" />
+		<exclude name="Squiz.PHP.EmbeddedPhp.ContentBeforeEnd" />
+		<exclude name="Squiz.PHP.EmbeddedPhp.ContentAfterEnd" />
+		<exclude name="WordPress.Arrays.MultipleStatementAlignment" />
+		<exclude name="WordPress.Files.FileName.InvalidClassFileName" />
+		<exclude name="WordPress.WP.I18n.MissingTranslatorsComment" />
+		<exclude name="WordPress.WP.I18n.NonSingularStringLiteralSingle" />
+		<exclude name="WordPress.WP.I18n.NonSingularStringLiteralPlural" />
+		<exclude name="WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet" />
+		<exclude name="PEAR.Functions.FunctionCallSignature.ContentAfterOpenBracket" />
+		<exclude name="PEAR.Functions.FunctionCallSignature.MultipleArguments" />
+		<exclude name="PEAR.Functions.FunctionCallSignature.CloseBracketLine" />
+	</rule>
+
+	<rule ref="WordPress.WP.DeprecatedFunctions">
+		<properties>
+			<property name="minimum_supported_version" value="4.7" />
+		</properties>
+	</rule>
+
+	<rule ref="WordPress.NamingConventions.ValidHookName">
+		<properties>
+			<property name="additionalWordDelimiters" value="/-" />
+		</properties>
+	</rule>
+</ruleset>
diff --git a/tests/bootstrap.php b/tests/bootstrap.php
old mode 100755
new mode 100644
index 2b9ce1b..b239294
--- a/tests/bootstrap.php
+++ b/tests/bootstrap.php
@@ -1,32 +1,40 @@
 <?php
+
+require __DIR__ . '/../vendor/autoload.php';
+
 $_tests_dir = getenv( 'WP_TESTS_DIR' );
-if ( ! $_tests_dir )
-	$_tests_dir = '/tmp/wordpress-tests-lib';
 
-/**
- * change PLUGIN_FILE env in phpunit.xml
- */
-define( 'PLUGIN_FILE', getenv( 'PLUGIN_FILE' ) );
-define( 'PLUGIN_FOLDER', basename( dirname( __DIR__ ) ) );
-define( 'PLUGIN_PATH', PLUGIN_FOLDER . '/' . PLUGIN_FILE );
+if ( ! $_tests_dir ) {
+	$_tests_dir = rtrim( sys_get_temp_dir(), '/\\' ) . '/wordpress-tests-lib';
+}
 
-// Activates this plugin in WordPress so it can be tested.
-$GLOBALS['wp_tests_options'] = array(
-	'active_plugins' => array( PLUGIN_PATH ),
-);
+if ( ! file_exists( $_tests_dir . '/includes/functions.php' ) ) {
+	// phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped -- CLI
+	throw new Exception( "Could not find $_tests_dir/includes/functions.php, have you run bin/install-wp-tests.sh?" ); // NOSONAR
+}
 
+// Give access to tests_add_filter() function.
+/** @psalm-suppress UnresolvableInclude */
 require_once $_tests_dir . '/includes/functions.php';
 
-tests_add_filter(
-	'muplugins_loaded',
-	function() {
-		// Manually load plugin
-		require dirname( __DIR__ ) . '/' . PLUGIN_FILE;
-	}
-);
+function _manually_load_plugin(): void {
+	require dirname( __DIR__ ) . '/pojo-accessibility.php';
+}
+
+tests_add_filter( 'muplugins_loaded', '_manually_load_plugin' );
+
+// Start up the WP testing environment.
+/** @psalm-suppress UnresolvableInclude */
+require $_tests_dir . '/includes/bootstrap.php';
 
-// Removes all sql tables on shutdown
-// Do this action last
-tests_add_filter( 'shutdown', 'drop_tables', 999999 );
+// @phpcs:disable
 
-require $_tests_dir . '/includes/bootstrap.php';
\ No newline at end of file
+//module tests
+include_once dirname( __DIR__ ) . '/tests/phpunit/helpers/module-test-base.php';
+//rest tests
+include_once dirname( __DIR__ ) . '/tests/phpunit/helpers/route-test.php';
+//test base with factories
+include_once dirname( __DIR__ ) . '/tests/phpunit/helpers/test-base.php';
+// functions
+include_once dirname( __DIR__ ) . '/tests/phpunit/helpers/functions.php';
+// phpcs:enable
diff --git a/tests/phpunit/helpers/functions.php b/tests/phpunit/helpers/functions.php
new file mode 100644
index 0000000..979173d
--- /dev/null
+++ b/tests/phpunit/helpers/functions.php
@@ -0,0 +1,8 @@
+<?php
+/**
+ * wp_ajax_print_handler
+* @param $message
+ */
+function wp_ajax_print_handler( $message ): void {
+	echo esc_html( $message );
+}
diff --git a/tests/phpunit/helpers/module-test-base.php b/tests/phpunit/helpers/module-test-base.php
new file mode 100644
index 0000000..18b6657
--- /dev/null
+++ b/tests/phpunit/helpers/module-test-base.php
@@ -0,0 +1,77 @@
+<?php
+namespace EA11y\Tests\Helpers;
+
+use \Eunit\Cases\Module_Test;
+
+/**
+ * Class Module
+ */
+abstract class Module_Test_Base extends Module_Test {
+	public $name = '';
+
+	public $components = [];
+
+	public $routes = [];
+
+	public function test_routes() {
+		/**
+		 * @var Module_Base $module
+		 */
+		$module = $this->module;
+
+
+		if ( ! method_exists( $module, 'routes_list' ) || empty( $module::routes_list() ) ) {
+			$this->assertTrue( true, 'No routes to test' );
+			return;
+		}
+		$routes = $module::routes_list();
+
+		$this->assertTrue( is_array( $routes ),
+			'Test that the routes are returned as an array'
+		);
+
+		$this->assertCount( count( $this->routes ), $routes,
+			'Test that the number of routes are as expected'
+		);
+
+		foreach ( $this->routes as $route ) {
+			$this->assertContains( $route, $routes,
+				'Test that Route "' . $route . '" is registered'
+			);
+		}
+	}
+
+	public function test_components() {
+		/**
+		 * @var Module_Base $module
+		 */
+		$module = $this->module;
+		if ( method_exists( $module, 'component_list' ) === false || empty( $module::component_list() ) ) {
+			$this->assertTrue( true, 'No components to test' );
+			return;
+		}
+		$components = $module::component_list();
+
+		$this->assertTrue( is_array( $components ),
+			'Test that the components are returned as an array'
+		);
+
+		$this->assertCount( count( $this->components ), $components,
+			'Test that the number of components are as expected'
+		);
+
+		foreach ( $this->components as $component ) {
+			$this->assertContains( $component, $components,
+				'Test that component "' . $component . '" is registered'
+			);
+		}
+	}
+
+	/**
+	 * test_constructor
+	 */
+	public function test_constructor() {
+		$this->test_components();
+		$this->test_routes();
+	}
+}
diff --git a/tests/phpunit/helpers/route-test.php b/tests/phpunit/helpers/route-test.php
new file mode 100644
index 0000000..446ce0f
--- /dev/null
+++ b/tests/phpunit/helpers/route-test.php
@@ -0,0 +1,31 @@
+<?php
+namespace EA11y\Tests\Helpers;
+
+use Eunit\Cases\Rest_Route_Test;
+
+/**
+ * Class Module
+ */
+abstract class Rest_Route_Unit_Test extends Rest_Route_Test {
+	public $namespace = '/ea11y/v1';
+	public $namespaced_route = '/ea11y/v1';
+	public $endpoint = '';
+	public $name = '';
+	public $methods = [  ];
+	public $class_name = '';
+	public $module_name = '';
+
+	public function setUp() : void {
+		parent::setUp();
+		// We must set up $this->route with an actual instance of the route class we are testing
+		$this->route = $this->get_plugin_module( $this->module_name )->routes[ $this->class_name ];
+
+		/**
+		 * this includes automated unit tests for:
+		 * - Test that the route is registered
+		 * - Test route name is correct
+		 * - Test allowed methods are correct
+		 * - Test Endpoint is configured correctly
+		 */
+	}
+}
diff --git a/tests/phpunit/helpers/test-base.php b/tests/phpunit/helpers/test-base.php
new file mode 100644
index 0000000..fefffe4
--- /dev/null
+++ b/tests/phpunit/helpers/test-base.php
@@ -0,0 +1,40 @@
+<?php
+namespace SiteMailer\Tests\Helpers;
+
+use \Eunit\Cases\Unit_Test;
+
+/**
+ * Class Module
+ */
+abstract class Test_Base extends Unit_Test {
+	public function setUp() : void {
+		parent::setUp();
+		// Users
+		$this->subscriber = $this->factory->user->create( [ 'role' => 'subscriber' ] );
+		$this->editor = $this->factory->user->create( [ 'role' => 'editor' ] );
+		$this->administrator = $this->factory->user->create( [ 'role' => 'administrator' ] );
+
+		// Factories
+		$this->factory->log = new \WP_UnitTest_Factory_For_Log( $this->factory );
+	}
+
+
+	/**
+	 * tearDown
+	 */
+	public function tearDown() : void {
+		parent::tearDown();
+	}
+
+	public function get_plugin() {
+		return \EA11y\Plugin::instance();
+	}
+
+	public function get_plugin_module( $name ) {
+		/**
+		 * @var Module_Base $module
+		 */
+		$module = '\EA11y\\Modules\\' . $name . '\Module';
+		return $module::instance();
+	}
+}
diff --git a/tests/phpunit/plugin/modules/legacy/module-test.php b/tests/phpunit/plugin/modules/legacy/module-test.php
new file mode 100644
index 0000000..4f5af7a
--- /dev/null
+++ b/tests/phpunit/plugin/modules/legacy/module-test.php
@@ -0,0 +1,20 @@
+<?php
+namespace EA11y\Tests\Modules\Logs;
+
+use EA11y\Tests\Helpers\Module_Test_Base;
+
+/**
+ * Class Module
+ */
+class Module extends Module_Test_Base {
+	public $name = 'legacy';
+
+	public $components = [
+		'Frontend',
+		'Customizer',
+		'Settings',
+		'Admin'
+	];
+
+	public $routes = [];
+}
diff --git a/tests/test-base.php b/tests/test-base.php
deleted file mode 100755
index 62a9213..0000000
--- a/tests/test-base.php
+++ /dev/null
@@ -1,13 +0,0 @@
-<?php
-
-class Pojo_A11y_Test_Base extends WP_UnitTestCase {
-
-	public function test_plugin_activated() {
-		$this->assertTrue( is_plugin_active( PLUGIN_PATH ) );
-	}
-
-	public function test_getInstance() {
-		$this->assertInstanceOf( 'Pojo_Accessibility', Pojo_Accessibility::instance() );
-	}
-
-}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..7216c1c
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,20 @@
+const path = require( 'path' );
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+
+// add your entry points here
+const entryPoints = {
+	// admin: path.resolve(
+	// 	process.cwd(),
+	// 	'assets/dev/js',
+	// 	'admin.js',
+	// ),
+};
+
+module.exports = {
+	...defaultConfig,
+	entry: entryPoints,
+	output: {
+		...defaultConfig.output,
+		path: path.resolve( process.cwd(), 'assets/build' ),
+	},
+};

From c003cf74b1618cf3b3a7c6233981e815ca727363 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 25 Oct 2024 18:20:19 +0530
Subject: [PATCH 03/65] update: add src for admin settings

---
 webpack.config.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 7216c1c..3c31c7d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,11 +3,11 @@ const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
 // add your entry points here
 const entryPoints = {
-	// admin: path.resolve(
-	// 	process.cwd(),
-	// 	'assets/dev/js',
-	// 	'admin.js',
-	// ),
+	admin: path.resolve(
+		process.cwd(),
+		'assets/src/settings/js',
+		'admin.js',
+	),
 };
 
 module.exports = {

From 21987b44e1d7b0b55b4d5cd6530e05b7e4c94b81 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 25 Oct 2024 18:20:58 +0530
Subject: [PATCH 04/65] update: incorrect constant names

---
 classes/utils/assets.php | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/classes/utils/assets.php b/classes/utils/assets.php
index 37aeec7..d4ed171 100644
--- a/classes/utils/assets.php
+++ b/classes/utils/assets.php
@@ -56,7 +56,7 @@ public static function enqueue_styles( string $handle, string $style_name, array
 	 * @return string
 	 */
 	private static function get_assets_version( string $version = '' ) : string {
-		return empty( $version ) ? \SITE_MAILER_VERSION : $version;
+		return empty( $version ) ? \EA11Y_VERSION : $version;
 	}
 
 	/**
@@ -91,7 +91,7 @@ private static function get_asset_version_and_suffix( string $version = '' ) : a
 	 * @return string
 	 */
 	private static function get_assets_path( string $asset_name, string $asset_type, string $suffix = '' ) : string {
-		return \SITE_MAILER_ASSETS_URL . '/build/' . $asset_name . $suffix . '.' . $asset_type;
+		return \EA11Y_ASSETS_URL . '/build/' . $asset_name . $suffix . '.' . $asset_type;
 		//TODO: Check if we need this
 		//return \SITE_MAILER_ASSETS_URL . $asset_type . '/' . ( '' === $suffix ? 'dev/' : '' ) . $asset_name . $suffix . '.' . $asset_type;
 	}
@@ -103,8 +103,8 @@ private static function get_assets_path( string $asset_name, string $asset_type,
 	 * @param bool $with_css
 	 */
 	public static function enqueue_app_assets( string $handle = '', bool $with_css = true ) : void {
-		$dir = \SITE_MAILER_ASSETS_PATH . 'build/';
-		$url = \SITE_MAILER_ASSETS_URL . 'build/';
+		$dir = \EA11Y_ASSETS_PATH . 'build/';
+		$url = \EA11Y_ASSETS_URL . 'build/';
 
 		$script_asset_path = $dir . $handle . '.asset.php';
 		if ( ! file_exists( $script_asset_path ) ) {
@@ -131,7 +131,7 @@ public static function enqueue_app_assets( string $handle = '', bool $with_css =
 		}
 		// enqueue css
 		$css_file_name = 'style-' . $handle . '.css';
-		$css_version = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? filemtime( $dir . $css_file_name ) : \SITE_MAILER_VERSION;
+		$css_version = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? filemtime( $dir . $css_file_name ) : \EA11Y_VERSION;
 		wp_enqueue_style(
 			$handle,
 			$url . $css_file_name,

From 6333248d45303cdfc9b071202159da43f08f7138 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 25 Oct 2024 18:21:11 +0530
Subject: [PATCH 05/65] update: namespace

---
 tests/phpunit/helpers/test-base.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/phpunit/helpers/test-base.php b/tests/phpunit/helpers/test-base.php
index fefffe4..a9d165c 100644
--- a/tests/phpunit/helpers/test-base.php
+++ b/tests/phpunit/helpers/test-base.php
@@ -1,5 +1,5 @@
 <?php
-namespace SiteMailer\Tests\Helpers;
+namespace EA11y\Tests\Helpers;
 
 use \Eunit\Cases\Unit_Test;
 

From ebd2df1da6ba5c07b91e24576b31a48692eb0a6a Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 25 Oct 2024 18:23:52 +0530
Subject: [PATCH 06/65] add: accessibility settings

---
 assets/src/settings/css/style.css             | 39 ++++++++
 assets/src/settings/js/admin.js               | 26 +++++
 assets/src/settings/js/app.js                 | 14 +++
 .../js/components/admin-top-bar/index.js      | 35 +++++++
 assets/src/settings/js/constants/index.js     |  1 +
 .../src/settings/js/icons/elementor-logo.js   | 21 ++++
 includes/manager.php                          |  1 +
 modules/settings/module.php                   | 97 +++++++++++++++++++
 8 files changed, 234 insertions(+)
 create mode 100644 assets/src/settings/css/style.css
 create mode 100644 assets/src/settings/js/admin.js
 create mode 100644 assets/src/settings/js/app.js
 create mode 100644 assets/src/settings/js/components/admin-top-bar/index.js
 create mode 100644 assets/src/settings/js/constants/index.js
 create mode 100644 assets/src/settings/js/icons/elementor-logo.js
 create mode 100644 modules/settings/module.php

diff --git a/assets/src/settings/css/style.css b/assets/src/settings/css/style.css
new file mode 100644
index 0000000..ab54ef7
--- /dev/null
+++ b/assets/src/settings/css/style.css
@@ -0,0 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+body {
+	background: #fff;
+}
+.wrap {
+	margin-top: 0;
+}
+
+html:not([dir='rtl']) #ea11y-app {
+    margin-left: -20px;
+    background: white;
+}
+
+html[dir='rtl'] #ea11y-app {
+	margin-right: -20px;
+    background: white;
+}
+
+html:not([dir='rtl']) #ea11y-app-top-bar {
+	margin-left: -20px;
+	margin-bottom: 20px;
+}
+
+html[dir='rtl'] #ea11y-app-top-bar {
+	margin-right: -20px;
+	margin-bottom: 20px;
+}
+
+#ea11y-app * {
+	box-sizing: border-box;
+}
+
+.ea11y-textfield .MuiInputBase-input {
+	height: 40px;
+	padding: 8px 12px;
+	box-shadow: none;
+	border-color: rgba(12, 13, 14, 0.23);
+}
\ No newline at end of file
diff --git a/assets/src/settings/js/admin.js b/assets/src/settings/js/admin.js
new file mode 100644
index 0000000..4e51e3a
--- /dev/null
+++ b/assets/src/settings/js/admin.js
@@ -0,0 +1,26 @@
+import { ThemeProvider } from '@elementor/ui/styles';
+import { StrictMode, Fragment, createRoot } from '@wordpress/element';
+import App from './app';
+import AdminTopBar from './components/admin-top-bar';
+
+const rootNode = document.getElementById( 'ea11y-app' );
+const topBarNode = document.getElementById( 'ea11y-app-top-bar' );
+
+// Can't use the settings hook in the global scope so accessing directly
+const isDevelopment = window?.ea11ySettingsData?.isDevelopment;
+const AppWrapper = Boolean( isDevelopment ) ? StrictMode : Fragment;
+
+const root = createRoot( rootNode );
+const topBar = createRoot( topBarNode );
+
+topBar.render(
+	<ThemeProvider colorScheme="light">
+		<AdminTopBar />
+	</ThemeProvider>,
+);
+
+root.render(
+	<AppWrapper>
+		<App />
+	</AppWrapper>,
+);
diff --git a/assets/src/settings/js/app.js b/assets/src/settings/js/app.js
new file mode 100644
index 0000000..35d5bfb
--- /dev/null
+++ b/assets/src/settings/js/app.js
@@ -0,0 +1,14 @@
+import '../css/style.css';
+import DirectionProvider from '@elementor/ui/DirectionProvider';
+import { ThemeProvider } from '@elementor/ui/styles';
+
+const App = () => {
+	return (
+		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
+			<ThemeProvider colorScheme="light">
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+export default App;
diff --git a/assets/src/settings/js/components/admin-top-bar/index.js b/assets/src/settings/js/components/admin-top-bar/index.js
new file mode 100644
index 0000000..b789079
--- /dev/null
+++ b/assets/src/settings/js/components/admin-top-bar/index.js
@@ -0,0 +1,35 @@
+import HelpIcon from '@elementor/icons/HelpIcon';
+import AppBar from '@elementor/ui/AppBar';
+import Grid from '@elementor/ui/Grid';
+import Link from '@elementor/ui/Link';
+import Toolbar from '@elementor/ui/Toolbar';
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import { HELP_LINK } from '../../constants';
+import ElementorLogo from '../../icons/elementor-logo';
+
+const AdminTopBar = () => {
+	return (
+		<AppBar position="static" elevation={ 6 } sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
+			<Toolbar direction="row" sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } } padding={ 2 }>
+				<Grid container={ true } alignItems="center" gap={ 1 }>
+					<ElementorLogo size="large" />
+					<Typography color="text.primary">
+						{ __( 'Accessibility', 'pojo-accessibility' ) }
+					</Typography>
+				</Grid>
+
+				<Link color="secondary"
+					underline="hover"
+					href={ HELP_LINK }
+					target="_blank"
+					sx={ { display: 'inline-flex', alignItems: 'center', gap: 1 } }
+					aria-label={ __( 'Help', 'pojo-accessibility' ) }>
+					<HelpIcon />
+				</Link>
+			</Toolbar>
+		</AppBar>
+	);
+};
+
+export default AdminTopBar;
diff --git a/assets/src/settings/js/constants/index.js b/assets/src/settings/js/constants/index.js
new file mode 100644
index 0000000..edeb853
--- /dev/null
+++ b/assets/src/settings/js/constants/index.js
@@ -0,0 +1 @@
+export const HELP_LINK = 'https://go.elementor.com/';
diff --git a/assets/src/settings/js/icons/elementor-logo.js b/assets/src/settings/js/icons/elementor-logo.js
new file mode 100644
index 0000000..cc62ff4
--- /dev/null
+++ b/assets/src/settings/js/icons/elementor-logo.js
@@ -0,0 +1,21 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+const ElementorLogo = ( { size } ) => {
+	return (
+		<SvgIcon viewBox="0 0 24 24" fontSize={ size }>
+			<g clipPath="url(#a)">
+				<path fill="#0C0D0E" fillRule="evenodd"
+					d="M2.022 18.667A12 12 0 1 1 21.977 5.333 12 12 0 0 1 2.022 18.667ZM9 7H7v10h2V7Zm8 0h-6v2h6V7Zm0 3.999h-6v2h6v-2ZM17 15h-6v2h6v-2Z"
+					clipRule="evenodd" />
+			</g>
+
+			<defs>
+				<clipPath id="a">
+					<path fill="#fff" d="M0 0h24v24H0z" />
+				</clipPath>
+			</defs>
+		</SvgIcon>
+	);
+};
+
+export default ElementorLogo;
diff --git a/includes/manager.php b/includes/manager.php
index a8b29d6..b851757 100644
--- a/includes/manager.php
+++ b/includes/manager.php
@@ -17,6 +17,7 @@ final class Manager {
 	public static function get_module_list(): array {
 		return [
 			'Legacy',
+			'Settings'
 		];
 	}
 
diff --git a/modules/settings/module.php b/modules/settings/module.php
new file mode 100644
index 0000000..2cd3555
--- /dev/null
+++ b/modules/settings/module.php
@@ -0,0 +1,97 @@
+<?php
+
+namespace EA11y\Modules\Settings;
+
+use EA11y\Classes\Module_Base;
+use EA11y\Classes\Utils;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Module extends Module_Base {
+	const SETTING_PREFIX     = 'a11y_';
+	const SETTING_GROUP      = 'a11y_settings';
+	const SETTING_BASE_SLUG  = 'accessibility-settings-2'; //TODO: Change this later
+	const SETTING_CAPABILITY = 'manage_options';
+
+	public function get_name(): string {
+		return 'settings';
+	}
+
+	public function render_top_bar() {
+		if ( 'toplevel_page_accessibility-settings-2' !== get_current_screen()->id ) {
+			return;
+		}
+
+		?>
+		<div id="ea11y-app-top-bar"></div>
+		<?php
+	}
+
+	public function render_app() {
+		?>
+		<!-- The hack required to wrap WP notifications -->
+		<div class="wrap">
+			<h1 style="display: none;" role="presentation"></h1>
+		</div>
+
+		<div id="ea11y-app"></div>
+		<?php
+	}
+
+	public function register_page() {
+		add_menu_page(
+			__( 'Accessibility New', 'pojo-accessibility' ), //TODO: Change this later
+			__( 'Accessibility New', 'pojo-accessibility' ),
+			self::SETTING_CAPABILITY,
+			self::SETTING_BASE_SLUG,
+			[ $this, 'render_app' ],
+			'dashicons-universal-access-alt',
+		);
+
+		add_submenu_page(
+			self::SETTING_BASE_SLUG,
+			__( 'Accessibility Settings', 'pojo-accessibility' ),
+			__( 'Settings', 'pojo-accessibility' ),
+			self::SETTING_CAPABILITY,	
+			self::SETTING_BASE_SLUG,
+			[ $this, 'render_app' ],
+
+		);
+	}
+
+	/**
+	 * Enqueue Scripts and Styles
+	 */
+	public function enqueue_scripts( $hook ) {
+		if ( 'toplevel_page_accessibility-settings-2' !== $hook ) {
+			return;
+		}
+
+		wp_enqueue_style(
+			'ea11y-admin-fonts',
+			'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
+			[],
+			EA11Y_VERSION
+		);
+
+		Utils\Assets::enqueue_app_assets( 'admin' );
+
+		wp_localize_script(
+			'admin',
+			'ea11ySettingsData',
+			[ 'wpRestNonce' => wp_create_nonce( 'wp_rest' ) ]
+		);
+	}
+
+	/**
+	 * Module constructor.
+	 */
+	public function __construct() {
+		$this->register_components();
+		add_action( 'admin_menu', [ $this, 'register_page' ] );
+		add_action( 'in_admin_header', [ $this, 'render_top_bar' ] );
+		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
+	}
+}

From 9e3bc10631e7536160adcb50aa1149e5d467dfd9 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 28 Oct 2024 18:31:38 +0530
Subject: [PATCH 07/65] update: webpack to output files inside a folder

---
 webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack.config.js b/webpack.config.js
index 3c31c7d..367ae35 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,6 +15,7 @@ module.exports = {
 	entry: entryPoints,
 	output: {
 		...defaultConfig.output,
+		filename: '[name]/[name].js',
 		path: path.resolve( process.cwd(), 'assets/build' ),
 	},
 };

From 9757cda111ea4c86dd492076c711a747cd363f96 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 12:07:56 +0530
Subject: [PATCH 08/65] update: build output folders

---
 classes/utils/assets.php |  4 ++--
 package.json             |  6 ++++--
 webpack.config.js        | 21 ---------------------
 3 files changed, 6 insertions(+), 25 deletions(-)
 delete mode 100644 webpack.config.js

diff --git a/classes/utils/assets.php b/classes/utils/assets.php
index d4ed171..4064a48 100644
--- a/classes/utils/assets.php
+++ b/classes/utils/assets.php
@@ -103,8 +103,8 @@ private static function get_assets_path( string $asset_name, string $asset_type,
 	 * @param bool $with_css
 	 */
 	public static function enqueue_app_assets( string $handle = '', bool $with_css = true ) : void {
-		$dir = \EA11Y_ASSETS_PATH . 'build/';
-		$url = \EA11Y_ASSETS_URL . 'build/';
+		$dir = \EA11Y_ASSETS_PATH . 'build/' . $handle . '/';
+		$url = \EA11Y_ASSETS_URL . 'build/' . $handle . '/';
 
 		$script_asset_path = $dir . $handle . '.asset.php';
 		if ( ! file_exists( $script_asset_path ) ) {
diff --git a/package.json b/package.json
index 2ed5569..5684ef7 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,10 @@
 	"description": "",
 	"version": "2.1.0",
 	"scripts": {
-		"build": "wp-scripts build",
-		"start": "wp-scripts start",
+		"build": "npm run build:admin",
+		"build:admin": "wp-scripts build assets/src/settings/js/admin.js --output-path=assets/build/admin",
+		"start": "npm run start:admin",
+		"start:admin": "wp-scripts start assets/src/settings/js/admin.js --output-path=assets/build/admin",
 		"format": "wp-scripts format",
 		"lint:js": "wp-scripts lint-js",
 		"prepare": "husky install",
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 367ae35..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const path = require( 'path' );
-const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
-
-// add your entry points here
-const entryPoints = {
-	admin: path.resolve(
-		process.cwd(),
-		'assets/src/settings/js',
-		'admin.js',
-	),
-};
-
-module.exports = {
-	...defaultConfig,
-	entry: entryPoints,
-	output: {
-		...defaultConfig.output,
-		filename: '[name]/[name].js',
-		path: path.resolve( process.cwd(), 'assets/build' ),
-	},
-};

From b0dafef8177408d79642ea9a1a1a4bceded8b7a2 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 12:13:10 +0530
Subject: [PATCH 09/65] update: removed commented code

---
 classes/utils/assets.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/classes/utils/assets.php b/classes/utils/assets.php
index 4064a48..e2c7978 100644
--- a/classes/utils/assets.php
+++ b/classes/utils/assets.php
@@ -92,8 +92,6 @@ private static function get_asset_version_and_suffix( string $version = '' ) : a
 	 */
 	private static function get_assets_path( string $asset_name, string $asset_type, string $suffix = '' ) : string {
 		return \EA11Y_ASSETS_URL . '/build/' . $asset_name . $suffix . '.' . $asset_type;
-		//TODO: Check if we need this
-		//return \SITE_MAILER_ASSETS_URL . $asset_type . '/' . ( '' === $suffix ? 'dev/' : '' ) . $asset_name . $suffix . '.' . $asset_type;
 	}
 
 	/**

From 2ceabd381231a6402c5b003cb7cd448f5785a3db Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 14:53:03 +0530
Subject: [PATCH 10/65] update: npm scripts

---
 package.json | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 5684ef7..2ed5569 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,8 @@
 	"description": "",
 	"version": "2.1.0",
 	"scripts": {
-		"build": "npm run build:admin",
-		"build:admin": "wp-scripts build assets/src/settings/js/admin.js --output-path=assets/build/admin",
-		"start": "npm run start:admin",
-		"start:admin": "wp-scripts start assets/src/settings/js/admin.js --output-path=assets/build/admin",
+		"build": "wp-scripts build",
+		"start": "wp-scripts start",
 		"format": "wp-scripts format",
 		"lint:js": "wp-scripts lint-js",
 		"prepare": "husky install",

From 1a8756044e19ad09cd67dcd99a4924079854a9bf Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 14:53:13 +0530
Subject: [PATCH 11/65] add: webpack config

---
 webpack.config.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 webpack.config.js

diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..b40d4aa
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,20 @@
+const path = require( 'path' );
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+
+// add your entry points here
+const entryPoints = {
+	admin: path.resolve(
+		process.cwd(),
+		'modules/settings/assets/js',
+		'admin.js',
+	),
+};
+
+module.exports = {
+	...defaultConfig,
+	entry: entryPoints,
+	output: {
+		...defaultConfig.output,
+		path: path.resolve( process.cwd(), 'assets/build' ),
+	},
+};

From d0a1b8fd105ce24b6b88ba2bb34980486995b8d0 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 14:54:22 +0530
Subject: [PATCH 12/65] add: hooks

---
 .../assets/js/api/exceptions/APIError.js      |   9 ++
 modules/settings/assets/js/api/index.js       | 132 ++++++++++++++++++
 modules/settings/assets/js/hooks/index.js     |   0
 modules/settings/assets/js/hooks/use-auth.js  |  33 +++++
 modules/settings/assets/js/hooks/use-modal.js |  22 +++
 5 files changed, 196 insertions(+)
 create mode 100644 modules/settings/assets/js/api/exceptions/APIError.js
 create mode 100644 modules/settings/assets/js/api/index.js
 create mode 100644 modules/settings/assets/js/hooks/index.js
 create mode 100644 modules/settings/assets/js/hooks/use-auth.js
 create mode 100644 modules/settings/assets/js/hooks/use-modal.js

diff --git a/modules/settings/assets/js/api/exceptions/APIError.js b/modules/settings/assets/js/api/exceptions/APIError.js
new file mode 100644
index 0000000..f13a1f1
--- /dev/null
+++ b/modules/settings/assets/js/api/exceptions/APIError.js
@@ -0,0 +1,9 @@
+class APIError extends Error {
+	constructor( message ) {
+		super( message );
+
+		this.name = 'APIError';
+	}
+}
+
+export default APIError;
diff --git a/modules/settings/assets/js/api/index.js b/modules/settings/assets/js/api/index.js
new file mode 100644
index 0000000..f66dd2c
--- /dev/null
+++ b/modules/settings/assets/js/api/index.js
@@ -0,0 +1,132 @@
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import APIError from './exceptions/APIError';
+
+const wpV2Prefix = '/wp/v2';
+const v1Prefix = '/site-mailer/v1';
+
+class API {
+	static async request( { path, data, method = 'POST' } ) {
+		try {
+			if ( 'GET' === method && ! path.startsWith( wpV2Prefix ) ) {
+				path = addQueryArgs( path, { sb_time: new Date().getTime() } );
+			}
+
+			const response = await apiFetch( {
+				path,
+				method,
+				data,
+			} );
+
+			if ( path.startsWith( wpV2Prefix ) ) {
+				return response;
+			}
+
+			if ( ! response.success ) {
+				throw new APIError( response.data.message );
+			}
+
+			return response.data;
+		} catch ( e ) {
+			if ( e instanceof APIError ) {
+				throw e;
+			} else {
+				throw new APIError( e.message );
+			}
+		}
+	}
+
+	static async initConnect( context = 'new' ) {
+		const data = {
+			wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+		};
+
+		if ( 'update' === context ) {
+			data.update_redirect_uri = true;
+		}
+
+		return API.request( {
+			method: 'POST',
+			path: `${ v1Prefix }/connect/authorize`,
+			data,
+		} );
+	}
+
+	static async clearSession() {
+		return API.request( {
+			method: 'POST',
+			path: `${ v1Prefix }/connect/deactivate_and_disconnect`,
+			data: {
+				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+				clear_session: true,
+			},
+		} );
+	}
+
+	static async deactivateAndDisconnect() {
+		return API.request( {
+			method: 'POST',
+			path: `${ v1Prefix }/connect/deactivate_and_disconnect`,
+			data: {
+				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+			},
+		} );
+	}
+
+	static async deactivate() {
+		return API.request( {
+			method: 'POST',
+			path: `${ v1Prefix }/connect/deactivate`,
+			data: {
+				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+			},
+		} );
+	}
+
+	static async disconnect() {
+		return API.request( {
+			method: 'POST',
+			path: `${ v1Prefix }/connect/disconnect`,
+			data: {
+				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+			},
+		} );
+	}
+
+	static async reconnect() {
+		return API.request( {
+			method: 'POST',
+			path: `${ v1Prefix }/connect/reconnect`,
+			data: {
+				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+			},
+		} );
+	}
+
+	static async getSettings() {
+		return API.request( {
+			method: 'GET',
+			path: `${ wpV2Prefix }/settings`,
+		} );
+	}
+
+	static async updateSettings( data ) {
+		return API.request( {
+			method: 'PUT',
+			path: `${ wpV2Prefix }/settings`,
+			data,
+		} );
+	}
+
+	/**
+	 * @return {Promise<any>} {}
+	 */
+	static async getPluginSettings() {
+		return API.request( {
+			method: 'GET',
+			path: `${ v1Prefix }/settings/get-settings`,
+		} );
+	}
+}
+
+export default API;
diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/modules/settings/assets/js/hooks/use-auth.js b/modules/settings/assets/js/hooks/use-auth.js
new file mode 100644
index 0000000..22ae065
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-auth.js
@@ -0,0 +1,33 @@
+import API from '../api';
+import { UPGRADE_LINK } from '../constants';
+import { usePluginSettingsContext } from '../context/plugin-settings-context';
+
+const useAuth = () => {
+	const { subscriptionId } = 123;
+
+	const redirectToConnect = async () => {
+		const link = await getConnectLink();
+
+		window.open( link, '_self' ).focus();
+	};
+
+	const getConnectLink = async () => {
+		return API.initConnect();
+	};
+
+	const getUpgradeLink = () => {
+		const url = new URL( UPGRADE_LINK );
+
+		url.searchParams.append( 'subscription_id', subscriptionId );
+
+		return url.toString();
+	};
+
+	return {
+		redirectToConnect,
+		getConnectLink,
+		getUpgradeLink,
+	};
+};
+
+export default useAuth;
diff --git a/modules/settings/assets/js/hooks/use-modal.js b/modules/settings/assets/js/hooks/use-modal.js
new file mode 100644
index 0000000..6ae362b
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-modal.js
@@ -0,0 +1,22 @@
+import { useState } from '@wordpress/element';
+
+const useModal = ( defaultIsOpen = true ) => {
+	const [ isOpen, setIsOpen ] = useState( defaultIsOpen );
+
+	const open = () => {
+		setIsOpen( true );
+	};
+
+	const close = () => {
+		setIsOpen( false );
+	};
+
+	return {
+		isOpen,
+		setIsOpen,
+		open,
+		close,
+	};
+};
+
+export default useModal;

From 2566690defdf29218633ac7ba98dd04c42954590 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 14:55:05 +0530
Subject: [PATCH 13/65] update: move admin setting to the module folder

---
 assets/src/settings/js/constants/index.js                       | 1 -
 {assets/src/settings => modules/settings/assets}/css/style.css  | 0
 {assets/src/settings => modules/settings/assets}/js/admin.js    | 0
 {assets/src/settings => modules/settings/assets}/js/app.js      | 2 ++
 .../settings/assets}/js/components/admin-top-bar/index.js       | 0
 modules/settings/assets/js/constants/index.js                   | 2 ++
 .../settings/assets}/js/icons/elementor-logo.js                 | 0
 7 files changed, 4 insertions(+), 1 deletion(-)
 delete mode 100644 assets/src/settings/js/constants/index.js
 rename {assets/src/settings => modules/settings/assets}/css/style.css (100%)
 rename {assets/src/settings => modules/settings/assets}/js/admin.js (100%)
 rename {assets/src/settings => modules/settings/assets}/js/app.js (82%)
 rename {assets/src/settings => modules/settings/assets}/js/components/admin-top-bar/index.js (100%)
 create mode 100644 modules/settings/assets/js/constants/index.js
 rename {assets/src/settings => modules/settings/assets}/js/icons/elementor-logo.js (100%)

diff --git a/assets/src/settings/js/constants/index.js b/assets/src/settings/js/constants/index.js
deleted file mode 100644
index edeb853..0000000
--- a/assets/src/settings/js/constants/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export const HELP_LINK = 'https://go.elementor.com/';
diff --git a/assets/src/settings/css/style.css b/modules/settings/assets/css/style.css
similarity index 100%
rename from assets/src/settings/css/style.css
rename to modules/settings/assets/css/style.css
diff --git a/assets/src/settings/js/admin.js b/modules/settings/assets/js/admin.js
similarity index 100%
rename from assets/src/settings/js/admin.js
rename to modules/settings/assets/js/admin.js
diff --git a/assets/src/settings/js/app.js b/modules/settings/assets/js/app.js
similarity index 82%
rename from assets/src/settings/js/app.js
rename to modules/settings/assets/js/app.js
index 35d5bfb..047a209 100644
--- a/assets/src/settings/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -1,11 +1,13 @@
 import '../css/style.css';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import { ThemeProvider } from '@elementor/ui/styles';
+import ConnectModal from './components/connect-modal';
 
 const App = () => {
 	return (
 		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
+				<ConnectModal />
 			</ThemeProvider>
 		</DirectionProvider>
 	);
diff --git a/assets/src/settings/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
similarity index 100%
rename from assets/src/settings/js/components/admin-top-bar/index.js
rename to modules/settings/assets/js/components/admin-top-bar/index.js
diff --git a/modules/settings/assets/js/constants/index.js b/modules/settings/assets/js/constants/index.js
new file mode 100644
index 0000000..c4169b4
--- /dev/null
+++ b/modules/settings/assets/js/constants/index.js
@@ -0,0 +1,2 @@
+export const HELP_LINK = 'https://go.elementor.com/';
+export const UPGRADE_LINK = 'https://go.elementor.com/';
diff --git a/assets/src/settings/js/icons/elementor-logo.js b/modules/settings/assets/js/icons/elementor-logo.js
similarity index 100%
rename from assets/src/settings/js/icons/elementor-logo.js
rename to modules/settings/assets/js/icons/elementor-logo.js

From 96fec7c44c5067dad3fcc6bc93aabeb56f5d2a5f Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 14:57:08 +0530
Subject: [PATCH 14/65] update: assets loading logic

---
 classes/utils/assets.php          | 4 ++--
 modules/settings/assets/js/app.js | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/classes/utils/assets.php b/classes/utils/assets.php
index e2c7978..ef9107c 100644
--- a/classes/utils/assets.php
+++ b/classes/utils/assets.php
@@ -101,8 +101,8 @@ private static function get_assets_path( string $asset_name, string $asset_type,
 	 * @param bool $with_css
 	 */
 	public static function enqueue_app_assets( string $handle = '', bool $with_css = true ) : void {
-		$dir = \EA11Y_ASSETS_PATH . 'build/' . $handle . '/';
-		$url = \EA11Y_ASSETS_URL . 'build/' . $handle . '/';
+		$dir = \EA11Y_ASSETS_PATH . 'build/';
+		$url = \EA11Y_ASSETS_URL . 'build/';
 
 		$script_asset_path = $dir . $handle . '.asset.php';
 		if ( ! file_exists( $script_asset_path ) ) {
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 047a209..35d5bfb 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -1,13 +1,11 @@
 import '../css/style.css';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import { ThemeProvider } from '@elementor/ui/styles';
-import ConnectModal from './components/connect-modal';
 
 const App = () => {
 	return (
 		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
-				<ConnectModal />
 			</ThemeProvider>
 		</DirectionProvider>
 	);

From 32a2057c6d203029aa8c82ee9b89b07a5ef2956f Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 16:11:32 +0530
Subject: [PATCH 15/65] update: add rule to move jsx props to multiline
 imporving readability

---
 .eslintrc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc b/.eslintrc
index bd2111c..0ad9518 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -26,6 +26,7 @@
   "rules": {
     "no-console": "off",
     "react-hooks/exhaustive-deps": "off",
+    "react/jsx-max-props-per-line": [1, { "maximum": { "single": 2, "multi": 1 } }],
     "strict": [ "error", "global" ],
     "curly": "warn",
     "import/order": [

From dcb1245b02d8a89c5dd3cbeb21b533b6d51d8cda Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 16:11:57 +0530
Subject: [PATCH 16/65] add: connect modal

---
 modules/settings/assets/js/app.js             |  2 +
 .../connect-modal/connect-modal-icon.js       | 68 +++++++++++++++++++
 .../js/components/connect-modal/index.js      | 57 ++++++++++++++++
 .../settings/assets/js/components/index.js    |  1 +
 4 files changed, 128 insertions(+)
 create mode 100644 modules/settings/assets/js/components/connect-modal/connect-modal-icon.js
 create mode 100644 modules/settings/assets/js/components/connect-modal/index.js
 create mode 100644 modules/settings/assets/js/components/index.js

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 35d5bfb..2ca43d1 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -1,11 +1,13 @@
 import '../css/style.css';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import { ThemeProvider } from '@elementor/ui/styles';
+import { ConnectModal } from './components';
 
 const App = () => {
 	return (
 		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
+				<ConnectModal />
 			</ThemeProvider>
 		</DirectionProvider>
 	);
diff --git a/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js b/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js
new file mode 100644
index 0000000..98915a2
--- /dev/null
+++ b/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js
@@ -0,0 +1,68 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+const ConnectModalIcon = () => {
+	return (
+		<SvgIcon
+			viewBox="0 0 376 167"
+			sx={ { width: '367px', height: '167px', fill: 'none' } }
+			xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+		>
+			<g clipPath="url(#clip0_4586_17927)">
+				<path d="M260.135 124.169C272.348 115.941 281.79 100.886 279.712 85.5902C278.462 76.3975 273.222 68.2597 266.566 62.3974C259.909 56.5352 251.898 52.7376 243.796 49.6482C227.396 43.3791 209.747 39.702 192.459 42.4297C177.34 44.8107 179.478 48.1261 164.042 50.9744C132.237 56.8667 118.398 42.0529 101.471 52.5115C92.0441 58.3285 88.5805 68.8775 87.5263 72.2382C84.3187 82.3803 86.3367 91.1058 87.6167 96.7119C89.725 105.874 93.6103 112.249 95.583 115.414C98.1732 119.588 101.652 125.179 107.856 130.092C109.438 131.343 123.518 143.278 141.017 140.083C151.227 138.215 160.413 132.232 170.427 129.323C178.273 127.048 186.571 126.807 194.522 128.434C202.488 130.062 208.949 135.984 216.524 137.717C222.487 139.089 230.258 135.819 236.056 134.312C244.459 132.126 252.771 129.127 260.15 124.154L260.135 124.169Z" fill="#FAE8FF" />
+				<path d="M181.455 131.036C147.504 131.169 104.259 131.303 70.3078 131.451C69.6784 126.107 73.2676 120.576 78.6114 118.62C83.9685 116.652 90.6114 118.433 94.04 122.745C92.3525 115.647 94.6293 107.826 99.9194 102.482C100.589 101.812 101.299 101.183 102.049 100.594C111.919 92.8793 127.214 95.6382 133.241 106.272C134.848 109.111 135.022 111.924 135.049 112.741C135.236 118.634 131.567 122.799 130.442 123.991C134.594 121.527 140.915 118.607 149.058 117.669C154.174 117.08 162.678 116.089 171.009 120.723C176.835 123.964 179.995 128.518 181.455 131.036Z" fill="black" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M253.817 135.951L122.487 152.036L116.795 73.8079L248.018 63.04L253.817 135.951Z" fill="white" />
+				<path d="M122.486 152.692C122.339 152.692 122.192 152.639 122.071 152.545C121.937 152.438 121.844 152.264 121.83 152.089L116.125 73.8617C116.098 73.5001 116.366 73.1921 116.728 73.1653L247.951 62.3975C248.125 62.3975 248.299 62.4376 248.433 62.5582C248.567 62.6653 248.647 62.826 248.661 63.0001L254.46 135.911C254.486 136.259 254.232 136.567 253.884 136.621L122.567 152.692C122.567 152.692 122.513 152.692 122.486 152.692ZM117.491 74.4109L123.089 151.299L253.107 135.389L247.415 63.7501L117.491 74.4109Z" fill="black" />
+				<path d="M122.486 152.692C122.339 152.692 122.192 152.639 122.071 152.545C121.937 152.438 121.844 152.264 121.83 152.089L116.125 73.8617C116.098 73.5001 116.366 73.1921 116.728 73.1653L247.951 62.3975C248.125 62.3975 248.299 62.4376 248.433 62.5582C248.567 62.6653 248.647 62.826 248.661 63.0001L254.46 135.911C254.486 136.259 254.232 136.567 253.884 136.621L122.567 152.692C122.567 152.692 122.513 152.692 122.486 152.692ZM117.491 74.4109L123.089 151.299L253.107 135.389L247.415 63.7501L117.491 74.4109Z" fill="black" />
+				<rect x="169.268" y="83.6924" width="122.464" height="74.8929" fill="url(#pattern0_4586_17927)" />
+				<path d="M116.795 73.8079L190.322 114.978L248.018 63.04L116.795 73.8079Z" fill="white" />
+				<path d="M190.322 115.634C190.214 115.634 190.107 115.607 190 115.554L116.473 74.384C116.219 74.2367 116.085 73.9555 116.152 73.6742C116.219 73.393 116.447 73.1787 116.741 73.1653L247.964 62.3974C248.259 62.3707 248.514 62.5314 248.621 62.7858C248.728 63.0403 248.661 63.3483 248.46 63.5358L190.763 115.487C190.643 115.594 190.482 115.661 190.322 115.661V115.634ZM118.991 74.2769L190.228 114.174L246.13 63.8439L118.991 74.2769Z" fill="black" />
+				<path d="M234.035 152.21C234.624 143.384 240.37 135.094 248.432 131.464C256.495 127.835 266.513 129 273.517 134.397C269.272 127.045 271.736 116.585 278.807 111.897C285.879 107.21 296.473 109.018 301.589 115.795C300.705 106.969 304.508 97.8081 311.379 92.1965C318.249 86.5849 327.986 84.6965 336.464 87.3215" stroke="black" strokeWidth="0.98" strokeMiterlimit="10" />
+				<path d="M73.7629 84.469L74.0307 85.085C74.7673 87.6699 80.2852 89.5047 86.2048 88.8216C87.2897 88.7011 88.3879 88.4868 89.4727 88.1788C89.7539 88.0984 90.0218 88.0181 90.2896 87.9377C96.8521 85.8886 101.406 81.9913 100.575 79.0582L100.308 78.4422C99.437 75.3752 91.87 73.3663 84.8655 75.3484C77.8611 77.3306 72.8923 81.4154 73.7495 84.4824L73.7629 84.469Z" fill="white" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M86.2044 88.8215C87.2893 88.701 88.3875 88.4867 89.4723 88.1786C89.7535 88.0983 90.0214 88.0179 90.2893 87.9376C91.441 86.5313 91.95 84.134 91.4678 81.6161C90.7714 77.9599 88.2669 75.4152 85.883 75.9242C83.4857 76.4465 82.1062 79.8215 82.8026 83.4777C83.2714 86.009 84.6241 88.0045 86.191 88.8215H86.2044Z" fill="black" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M69.4368 70.3393L69.4636 70.7143C69.7716 72.1875 67.4948 74.5178 64.3743 75.6964C63.7984 75.9107 63.1957 76.0848 62.5797 76.2187C62.419 76.2455 62.2582 76.2857 62.1109 76.3125C58.3207 76.9821 55.0529 76.2187 54.7047 74.5446L54.6779 74.1696C54.3163 72.4285 57.5707 69.4821 61.5618 68.6652C65.5529 67.8482 69.0752 68.5982 69.4368 70.3527V70.3393Z" fill="white" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M64.3746 75.6968C63.7987 75.9111 63.196 76.0852 62.58 76.2191C62.4193 76.2459 62.2585 76.2861 62.1112 76.3129C61.1737 75.9111 60.3032 74.8531 59.9014 73.4736C59.2987 71.4781 59.9014 69.5629 61.2139 69.2147C62.5398 68.8531 64.0934 70.179 64.696 72.1879C65.1112 73.5674 64.9505 74.9066 64.388 75.7236L64.3746 75.6968Z" fill="black" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M166.709 49.7412C163 52.2189 161.165 57.0805 161.982 61.4734C162.799 65.8662 166.04 69.643 170.111 71.4644C174.183 73.2859 178.991 73.2323 183.183 71.6921C187.375 70.1519 190.977 67.2055 193.656 63.6296" fill="white" />
+				<path d="M166.709 49.7412C163 52.2189 161.165 57.0805 161.982 61.4734C162.799 65.8662 166.04 69.643 170.111 71.4644C174.183 73.2859 178.991 73.2323 183.183 71.6921C187.375 70.1519 190.977 67.2055 193.656 63.6296" stroke="black" strokeWidth="0.98" strokeMiterlimit="10" />
+				<path d="M231.504 99.4555L181.428 106.46L179.66 103.795L232.562 94.835L231.504 99.4555Z" fill="black" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M230.325 85.2587L231.798 98.7319L181.16 105.656L179.968 91.5399L185.62 90.7631C191.218 89.9997 199.133 87.6962 198.423 81.2542L195.169 51.4685L204.838 50.1426L208.16 80.5176C208.856 86.9462 213.53 87.5354 219.128 86.772L230.338 85.2453L230.325 85.2587Z" fill="#F3BAFD" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M206.914 74.8926C206.338 74.7988 204.222 74.5444 202.146 75.8435C199.468 77.5176 199.013 80.4238 198.946 80.839C198.638 78.5354 198.33 76.2185 198.021 73.9149L206.633 72.7363L206.901 74.8926H206.914Z" fill="black" />
+				<path d="M215.553 56.8658C215.566 56.9729 215.58 57.0667 215.593 57.1604C215.888 59.9461 215.044 62.4774 213.397 64.5801C213.357 64.6337 213.33 64.6738 213.276 64.714C210.906 67.6336 206.941 69.6961 202.307 70.3122C195.504 71.2363 189.504 69.1336 187.361 64.0176C187.227 63.6694 187.093 63.3211 186.986 62.9595C186.812 62.3703 186.678 61.7542 186.611 61.1113C185.941 55.0176 190.669 49.2319 197.486 47.3703C198.236 47.1694 198.986 47.0087 199.776 46.9015C201.464 46.6738 203.098 46.6872 204.651 46.9417C206.017 47.1426 207.29 47.531 208.482 48.0399C212.272 49.714 215.004 52.8881 215.553 56.8524V56.8658Z" fill="#F3BAFD" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M209.54 73.018L196.442 74.8127C195.504 74.9466 194.634 74.277 194.513 73.3395L194.326 71.8796C194.205 70.9421 194.875 70.0582 195.812 69.9377L208.91 68.143C209.848 68.0091 210.718 68.6788 210.839 69.6163L211.026 71.0761C211.147 72.0136 210.477 72.8975 209.54 73.018Z" fill="#F3BAFD" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M233.325 98.5042L179.66 105.83L178.146 91.6069L231.812 84.2676L233.325 98.5042Z" fill="#F3BAFD" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M233.325 98.5039L179.66 105.83L179.365 101.517L233.03 94.1914L233.325 98.5039Z" fill="black" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M197.677 57.7778C199.344 55.3424 199.419 52.4943 197.844 51.4164C196.269 50.3385 193.641 51.439 191.974 53.8744C190.307 56.3099 190.233 59.158 191.807 60.2358C193.382 61.3137 196.01 60.2132 197.677 57.7778Z" fill="white" />
+				<path d="M182.513 25.4198C174.718 24.5225 167.299 27.8037 163.749 33.8037C159.397 41.1832 162.839 49.3662 163.682 51.3886C166.026 56.9734 170.031 59.893 172.495 61.835C177.129 65.518 183.075 68.3841 188.848 67.0582C190.281 66.7234 191.7 66.1207 192.745 65.0761C193.79 64.0448 194.446 62.5314 194.205 61.0716C193.937 59.4243 192.665 58.1654 191.459 57.0136C188.687 54.3752 184.321 50.6788 178.602 44.7725" fill="white" />
+				<path d="M182.513 25.4198C174.718 24.5225 167.299 27.8037 163.749 33.8037C159.397 41.1832 162.839 49.3662 163.682 51.3886C166.026 56.9734 170.031 59.893 172.495 61.835C177.129 65.518 183.075 68.3841 188.848 67.0582C190.281 66.7234 191.7 66.1207 192.745 65.0761C193.79 64.0448 194.446 62.5314 194.205 61.0716C193.937 59.4243 192.665 58.1654 191.459 57.0136C188.687 54.3752 184.321 50.6788 178.602 44.7725" stroke="black" strokeWidth="0.98" strokeMiterlimit="10" />
+				<path d="M207.919 32.6784C208.642 31.6873 209.285 30.4016 208.776 29.29C208.2 28.0311 206.54 27.79 205.16 27.7498C200.901 27.6561 196.642 27.9641 192.45 28.6605C190.374 29.0088 188.272 29.4641 186.41 30.4686C184.549 31.473 182.941 33.107 182.392 35.1427C181.843 37.1516 182.486 39.4954 184.133 40.7945C186.584 42.723 193.535 40.8748 196.401 40.2186C200.955 39.1739 205.16 36.4954 207.932 32.6918L207.919 32.6784Z" fill="white" stroke="black" strokeWidth="0.98" strokeMiterlimit="10" />
+				<path d="M277.991 111.161C276.651 94.4195 257.674 76.0447 248.031 67.2456C244.642 64.1518 239.861 60.1339 232.816 57.7768C229.642 56.7188 228.008 56.1831 225.678 56.3706C217.629 57.0268 214.147 65.2768 209.834 63.817C207.919 63.1741 206.928 60.9643 206.647 59.6116C206.044 56.5581 208.294 53.8259 210.142 51.5357C219.45 39.9643 223.321 37.6741 222.624 35.6518C222.022 33.9241 218.754 34.0581 203.727 33.6831C194.044 33.4286 191.031 32.9465 190.241 34.6072C188.941 37.3125 194.62 43.567 197.54 50.8125C197.794 51.4554 198.276 53.0625 198.116 55.0714C197.995 56.5045 197.379 57.9509 196.214 58.8081C194.151 60.3081 191.232 59.4375 188.982 58.2322C180.424 53.6652 174.303 44.8125 173.044 35.1965C172.508 31.1518 173.406 28.9688 174.29 27.5491C176.232 24.4286 180.008 23.1965 180.892 22.9152C205.174 14.9732 223.776 17.6786 223.776 17.6786C260.205 22.9956 299.406 49.5536 305.808 53.9464" fill="url(#paint0_linear_4586_17927)" />
+				<path d="M277.991 111.161C276.651 94.4195 257.674 76.0447 248.031 67.2456C244.642 64.1518 239.861 60.134 232.816 57.7768C229.642 56.7188 228.008 56.1831 225.678 56.3706C217.629 57.0268 214.147 65.2768 209.834 63.817C207.919 63.1741 206.928 60.9643 206.647 59.6116C206.044 56.5581 208.294 53.8259 210.142 51.5357C219.45 39.9643 223.321 37.6741 222.624 35.6518C222.022 33.9241 218.754 34.0581 203.727 33.6831C194.044 33.4286 191.031 32.9465 190.241 34.6072C188.941 37.3125 194.62 43.567 197.54 50.8125C197.794 51.4554 198.276 53.0625 198.116 55.0714C197.995 56.5045 197.379 57.9509 196.214 58.8081C194.151 60.3081 191.232 59.4375 188.982 58.2322C180.424 53.6652 174.303 44.8125 173.044 35.1965C172.508 31.1518 173.406 28.9688 174.29 27.5491C176.232 24.4286 180.008 23.1965 180.892 22.9152C205.174 14.9732 223.776 17.6786 223.776 17.6786C260.205 22.9956 299.406 49.5536 305.808 53.9464" stroke="black" strokeWidth="0.98" strokeMiterlimit="10" strokeLinecap="round" />
+				<path d="M63.9731 51.924L64.6428 53.4374C66.4642 59.7722 81.5177 64.5937 97.8436 63.3079C100.83 63.0669 103.87 62.6249 106.884 61.9553C107.647 61.7812 108.411 61.607 109.161 61.4062C127.375 56.8526 140.178 47.7053 138.116 40.5133L137.446 38.9999C135.29 31.4999 114.611 26.1294 95.2052 30.482C75.8124 34.8347 61.8169 44.424 63.9731 51.924Z" fill="white" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M137.031 38.7188C134.875 31.2321 114.196 25.8482 94.7899 30.2009C75.3836 34.5536 61.4149 44.1429 63.5711 51.6429" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M72.7448 38.612L65.8877 34.0049" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M80.1782 34.9021L76.4951 29.1699" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M89.3125 26.8525L91.6429 31.1115" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M101.325 23.0625L101.941 29.0759" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M121.816 23.665L118.2 28.4329" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M134.339 25.5L128.888 30.9509" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path d="M105.274 62.5297C110.742 61.1043 113.315 52.8119 111.02 44.0082C108.725 35.2044 102.432 29.2231 96.9638 30.6486C91.4955 32.074 88.9228 40.3663 91.2177 49.17C93.5125 57.9738 99.8058 63.9551 105.274 62.5297Z" fill="black" stroke="black" strokeWidth="0.98" strokeLinecap="round" strokeLinejoin="round" />
+				<path fillRule="evenodd" clipRule="evenodd" d="M356.133 108.751C354.494 96.5202 343.219 87.0537 329.553 87.0537C314.759 87.0537 302.097 97.0984 302.097 114.509C302.097 115.574 302.174 116.607 302.322 117.606C298.757 112.82 293.473 109.822 288.035 109.822C278.419 109.822 271.963 116.947 271.963 126.563C271.963 129.567 272.855 132.589 274.374 135.325C274.323 135.334 274.273 135.344 274.222 135.354C270.063 132.098 264.516 130.112 258.422 130.112C249.083 129.29 237.226 137.593 235.29 148.132C234.888 149.089 234.611 150.152 234.463 151.339C234.205 153.399 235.142 155.195 237.083 156.754C238.272 158.119 239.949 158.961 242.023 159.477C254.385 164.445 280.303 166.071 308.356 166.071C348.17 166.071 357.678 130.081 357.678 121.205C357.678 118.483 357.354 113.673 356.133 108.751ZM306.43 127.174C306.48 127.168 306.53 127.162 306.581 127.155C306.514 127.074 306.447 126.992 306.381 126.909C306.398 126.997 306.414 127.085 306.43 127.174Z" fill="white" />
+			</g>
+			<defs>
+				<pattern id="pattern0_4586_17927" patternContentUnits="objectBoundingBox" width="1" height="1">
+					<use xlinkHref="#image0_4586_17927" transform="scale(0.00262467 0.00429185)" />
+				</pattern>
+				<linearGradient id="paint0_linear_4586_17927" x1="241.83" y1="62.9463" x2="288.705" y2="69.6428" gradientUnits="userSpaceOnUse">
+					<stop offset="0.291243" stopColor="white" />
+					<stop offset="0.986265" stopColor="white" stopOpacity="0" />
+				</linearGradient>
+				<clipPath id="clip0_4586_17927">
+					<rect width="375" height="166.071" fill="white" transform="translate(0.0888672)" />
+				</clipPath>
+				<image id="image0_4586_17927" width="381" height="233" xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAX0AAADpCAYAAADI+eewAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFUklEQVR4Xu3b0WrjVhRAUav0/39ZfSiCy0WyncROZO21oCSO5enAwPbx0c2yrusNgIZ/Hl0AwHWIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AO32+12W5ZlfXQNn29ZV//OABUmfYhalmWdp3vT/vWZ9IHb7fZ/8Nd1XR5dx2cz6UPYONkLfoPoQ5A1Tte/jy4Armee6k38HSZ9gBDRh7B1XRernhbRh4s7ivp4ZHNb6VjtXJ8jmxBw7zjm/KYg/NfmRi5c3Bh8gcd6BwKOYr+9IWz/7b+aKxF9uLAx6uP+fu/7+SvXZKcPF3K0u392p7+9CZj6r0v04SLmWO9N7M8e0RT967LegQuYb9aOj8evR1O8yHeIPnygLex7u/nt8d5XsN6BD7RN7Huhn6+bf/YMbxLXZdKHD3Q0yY+RHz8FHL2OHtGHDzQerxyDP8d8fuxYJn4jF07uXswfTfjizsxOH07s3pn5e0E/mvCfZf1zXSZ9OKmjUG9vBHtrnb0bvDAy6cMJ3Zvw966bw//odY888//mM7mRCydzL9rLcDZ/vm58TrQ5IvpwEmOwx2iPcd+ee/RJ4KfT/k9fz3mJPpzEM9P5fDJnfgN45s+gTfThpMZpe479/L0buDzLjVz4I0f793urmznur7x5O/Op4Zoc2YQ/8uxkPu/09z4BwLOsd+Bk5un96KYufIfowx/YW8+M+/nxOqHnlUQffsm8phmfm49i3rsWfkL04Y32pvR70/tR4IWfV3EjF95oL9ZHN2OPbuxa7/BKJn14o6OTN3uBF3d+g+jDG+3t7r9y5NJah1cTfXiDo739/LPtBu78/dH18FN+IxdeaDt9853nzxh4nzSuR/Thl8zHMY9u3P4lkb8+p3fgjb563v7dbwTP/B24NpM+vNjeRL/9/Og1r4q9qPOI6MMPjXv6MfhzyOf4fyf0os5PiT68yRz8vcd7nwjgnUQfXmxvehd0zkL04YtM5nwy0QcI8Ru5ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxDyH3IoUtUNxiZ6AAAAAElFTkSuQmCC" />
+			</defs>
+		</SvgIcon>
+	);
+};
+
+export default ConnectModalIcon;
diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
new file mode 100644
index 0000000..3d6019d
--- /dev/null
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -0,0 +1,57 @@
+import Box from '@elementor/ui/Box';
+import Button from '@elementor/ui/Button';
+import Grid from '@elementor/ui/Grid';
+import Modal from '@elementor/ui/Modal';
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import API from '../../api';
+import useModal from '../../hooks/use-modal';
+
+function ConnectModal() {
+	const { isOpen } = useModal();
+
+	const redirectToConnect = async () => {
+		const link = await getConnectLink();
+		window.open( link, '_self' ).focus();
+	};
+
+	const getConnectLink = async () => {
+		return API.initConnect();
+	};
+
+	return (
+		<Modal open={ isOpen }>
+			<Grid container
+				gap={ 2 }
+				direction="column"
+				justifyContent="start"
+				alignItems="center"
+				sx={ {
+					position: 'absolute',
+					top: '50%',
+					left: '50%',
+					transform: 'translate(-50%, -50%)',
+					width: 600,
+					height: 400,
+					bgcolor: 'background.paper',
+					boxShadow: 24,
+					paddingBottom: 5,
+					textAlign: 'center',
+					borderRadius: '4px',
+				} }>
+				<Box component="div" sx={ { background: '#000', width: '100%', height: '200px' } }></Box>
+				<Typography variant="subtitle1"
+					marginTop={ 5 }
+					marginBottom={ 3 }>
+					{ __( 'Connect plugin on your site!', 'site-mailer' ) }
+				</Typography>
+				<Button variant="contained"
+					color="secondary"
+					size="large"
+					onClick={ redirectToConnect }>{ __( 'Connect', 'pojo-accessibility' ) }</Button>
+			</Grid>
+		</Modal>
+	);
+}
+
+export default ConnectModal;
diff --git a/modules/settings/assets/js/components/index.js b/modules/settings/assets/js/components/index.js
new file mode 100644
index 0000000..a07d5ce
--- /dev/null
+++ b/modules/settings/assets/js/components/index.js
@@ -0,0 +1 @@
+export { default as ConnectModal } from './connect-modal';

From a1f7b68fdcdae58a75393239ef9202d74660ad6b Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 17:31:54 +0530
Subject: [PATCH 17/65] update: hooks import for better readability

---
 modules/settings/assets/js/hooks/index.js    | 2 ++
 modules/settings/assets/js/hooks/use-auth.js | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
index e69de29..2bbadea 100644
--- a/modules/settings/assets/js/hooks/index.js
+++ b/modules/settings/assets/js/hooks/index.js
@@ -0,0 +1,2 @@
+export { default as useAuth } from './use-auth';
+export { default as useModal } from './use-modal';
diff --git a/modules/settings/assets/js/hooks/use-auth.js b/modules/settings/assets/js/hooks/use-auth.js
index 22ae065..1eb666d 100644
--- a/modules/settings/assets/js/hooks/use-auth.js
+++ b/modules/settings/assets/js/hooks/use-auth.js
@@ -1,13 +1,12 @@
 import API from '../api';
 import { UPGRADE_LINK } from '../constants';
-import { usePluginSettingsContext } from '../context/plugin-settings-context';
 
 const useAuth = () => {
 	const { subscriptionId } = 123;
 
 	const redirectToConnect = async () => {
 		const link = await getConnectLink();
-
+		
 		window.open( link, '_self' ).focus();
 	};
 

From d6d1ab68a0d24ee746fd3f2de464221bc94699d5 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 29 Oct 2024 17:34:16 +0530
Subject: [PATCH 18/65] update: replace functions with hooks

---
 .../assets/js/components/connect-modal/index.js     | 13 ++-----------
 modules/settings/assets/js/hooks/use-auth.js        |  2 +-
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
index 3d6019d..d0fe566 100644
--- a/modules/settings/assets/js/components/connect-modal/index.js
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -4,20 +4,11 @@ import Grid from '@elementor/ui/Grid';
 import Modal from '@elementor/ui/Modal';
 import Typography from '@elementor/ui/Typography';
 import { __ } from '@wordpress/i18n';
-import API from '../../api';
-import useModal from '../../hooks/use-modal';
+import { useAuth, useModal } from '../../hooks';
 
 function ConnectModal() {
 	const { isOpen } = useModal();
-
-	const redirectToConnect = async () => {
-		const link = await getConnectLink();
-		window.open( link, '_self' ).focus();
-	};
-
-	const getConnectLink = async () => {
-		return API.initConnect();
-	};
+	const { redirectToConnect } = useAuth();
 
 	return (
 		<Modal open={ isOpen }>
diff --git a/modules/settings/assets/js/hooks/use-auth.js b/modules/settings/assets/js/hooks/use-auth.js
index 1eb666d..4ce5914 100644
--- a/modules/settings/assets/js/hooks/use-auth.js
+++ b/modules/settings/assets/js/hooks/use-auth.js
@@ -6,7 +6,7 @@ const useAuth = () => {
 
 	const redirectToConnect = async () => {
 		const link = await getConnectLink();
-		
+
 		window.open( link, '_self' ).focus();
 	};
 

From 8810af3f5e991f0725d9beda56d4cd84444e90c5 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 12:44:04 +0530
Subject: [PATCH 19/65] add: connect module

---
 includes/manager.php                          |   3 +-
 modules/connect/classes/basic-enum.php        |  35 ++
 modules/connect/classes/config.php            |  22 ++
 modules/connect/classes/data.php              | 357 ++++++++++++++++++
 .../classes/exceptions/service-exception.php  |  13 +
 modules/connect/classes/grant-types.php       |  16 +
 modules/connect/classes/route-base.php        |  43 +++
 modules/connect/classes/service.php           | 320 ++++++++++++++++
 modules/connect/classes/utils.php             | 125 ++++++
 modules/connect/components/handler.php        |  91 +++++
 modules/connect/module.php                    |  84 +++++
 modules/connect/rest/authorize.php            |  78 ++++
 .../rest/deactivate-and-disconnect.php        |  50 +++
 modules/connect/rest/deactivate.php           |  42 +++
 modules/connect/rest/disconnect.php           |  42 +++
 modules/connect/rest/reconnect.php            |  41 ++
 modules/connect/rest/switch-domain.php        |  54 +++
 17 files changed, 1415 insertions(+), 1 deletion(-)
 create mode 100644 modules/connect/classes/basic-enum.php
 create mode 100644 modules/connect/classes/config.php
 create mode 100644 modules/connect/classes/data.php
 create mode 100644 modules/connect/classes/exceptions/service-exception.php
 create mode 100644 modules/connect/classes/grant-types.php
 create mode 100644 modules/connect/classes/route-base.php
 create mode 100644 modules/connect/classes/service.php
 create mode 100644 modules/connect/classes/utils.php
 create mode 100644 modules/connect/components/handler.php
 create mode 100644 modules/connect/module.php
 create mode 100644 modules/connect/rest/authorize.php
 create mode 100644 modules/connect/rest/deactivate-and-disconnect.php
 create mode 100644 modules/connect/rest/deactivate.php
 create mode 100644 modules/connect/rest/disconnect.php
 create mode 100644 modules/connect/rest/reconnect.php
 create mode 100644 modules/connect/rest/switch-domain.php

diff --git a/includes/manager.php b/includes/manager.php
index b851757..247b9b2 100644
--- a/includes/manager.php
+++ b/includes/manager.php
@@ -17,7 +17,8 @@ final class Manager {
 	public static function get_module_list(): array {
 		return [
 			'Legacy',
-			'Settings'
+			'Connect',
+			'Settings',
 		];
 	}
 
diff --git a/modules/connect/classes/basic-enum.php b/modules/connect/classes/basic-enum.php
new file mode 100644
index 0000000..bf5c1aa
--- /dev/null
+++ b/modules/connect/classes/basic-enum.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes;
+
+use ReflectionClass;
+use ReflectionException;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+abstract class Basic_Enum {
+	private static array $entries = [];
+
+	/**
+	 * @throws ReflectionException
+	 */
+	public static function get_values(): array {
+		return array_values( self::get_entries() );
+	}
+
+	/**
+	 * @throws ReflectionException
+	 */
+	protected static function get_entries(): array {
+		$caller = get_called_class();
+
+		if ( ! array_key_exists( $caller, self::$entries ) ) {
+			$reflect = new ReflectionClass( $caller );
+			self::$entries[ $caller ] = $reflect->getConstants();
+		}
+
+		return self::$entries[ $caller ];
+	}
+}
diff --git a/modules/connect/classes/config.php b/modules/connect/classes/config.php
new file mode 100644
index 0000000..1c4daa9
--- /dev/null
+++ b/modules/connect/classes/config.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Config
+ */
+class Config {
+	const APP_NAME = 'once-click-accessibility';
+	const APP_PREFIX = 'ea11y';
+	const APP_REST_NAMESPACE = 'site_mailer';
+	const BASE_URL = 'https://my.elementor.com/connect';
+	const ADMIN_PAGE = 'accessibility-settings-2';
+	const APP_TYPE = 'app_mailer';
+	const SCOPES = 'openid offline_access';
+	const STATE_NONCE = 'site_mailer_auth_nonce';
+	const CONNECT_MODE = 'site';
+}
diff --git a/modules/connect/classes/data.php b/modules/connect/classes/data.php
new file mode 100644
index 0000000..91143a7
--- /dev/null
+++ b/modules/connect/classes/data.php
@@ -0,0 +1,357 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Data
+ */
+class Data {
+	const CLIENT_ID = '_client_id';
+	const CLIENT_SECRET = '_client_secret';
+	const ACCESS_TOKEN = '_access_token';
+	const REFRESH_TOKEN = '_refresh_token';
+	const TOKEN_ID = '_token_id';
+	const SUBSCRIPTION_ID = '_subscription_id';
+	const OPTION_OWNER_USER_ID = '_owner_user_id';
+	const HOME_URL = '_home_url';
+
+	/**
+	 * get_option
+	 * @param $option_name
+	 * @param $default
+	 *
+	 * @return false|mixed|null
+	 */
+	public static function get_option( $option_name, $default ) {
+		return get_option( Config::APP_PREFIX . $option_name, $default );
+	}
+
+	/**
+	 * set_option
+	 * @param $option_name
+	 * @param $option_value
+	 * @param $auto_load
+	 *
+	 * @return bool
+	 */
+	public static function set_option( $option_name, $option_value, $auto_load = false ): bool {
+		return update_option( Config::APP_PREFIX . $option_name, $option_value, $auto_load );
+	}
+
+	/**
+	 * delete_option
+	 * @param $option_name
+	 *
+	 * @return bool
+	 */
+	public static function delete_option( $option_name ) : bool {
+		return delete_option( Config::APP_PREFIX . $option_name );
+	}
+
+	/**
+	 * get_user_data
+	 * @param $user_id
+	 * @param $data_name
+	 * @param mixed|bool $default
+	 *
+	 * @return false|mixed
+	 */
+	public static function get_user_data( $user_id, $data_name, $default = false ) {
+		$data = get_user_meta( $user_id, Config::APP_PREFIX . $data_name, true );
+
+		return empty( $data ) ? $default : $data;
+	}
+
+	/**
+	 * set_user_data
+	 * @param $user_id
+	 * @param $data_name
+	 * @param $value
+	 *
+	 * @return bool|int
+	 */
+	public static function set_user_data( $user_id, $data_name, $value ) {
+		return update_user_meta( $user_id, Config::APP_PREFIX . $data_name, $value );
+	}
+
+	/**
+	 * delete_user_data
+	 * @param $user_id
+	 * @param $data_name
+	 *
+	 * @return bool
+	 */
+	public static function delete_user_data( $user_id, $data_name ): bool {
+		return delete_user_meta( $user_id, Config::APP_PREFIX . $data_name );
+	}
+
+	/**
+	 * get_connect_mode_data
+	 * @param ...$data
+	 *
+	 * @return false|mixed|null|string
+	 */
+	public static function get_connect_mode_data( ...$data ) {
+		if ( Config::CONNECT_MODE === 'site' ) {
+			return self::get_option( ...$data );
+		}
+		$user_id = get_current_user_id();
+		return self::get_user_data( ...( [ $user_id, ...$data ] ) );
+	}
+
+	/**
+	 * set_connect_mode_data
+	 * @param ...$data
+	 *
+	 * @return bool|int
+	 */
+	public static function set_connect_mode_data( ...$data ) {
+		if ( Config::CONNECT_MODE === 'site' ) {
+			return self::set_option( ...$data );
+		}
+		$user_id = get_current_user_id();
+		return self::set_user_data( ...( [ $user_id, ...$data ] ) );
+	}
+
+	/**
+	 * get_client_id
+	 *
+	 * @return string|bool|mixed
+	 */
+	public static function get_client_id() {
+		return self::get_connect_mode_data( self::CLIENT_ID, false );
+	}
+
+	/**
+	 * get_client_secret
+	 * @return false|mixed|string|null
+	 */
+	public static function get_client_secret() {
+		return self::get_connect_mode_data( self::CLIENT_SECRET, false );
+	}
+
+	/**
+	 * set_client_id
+	 * @param $value
+	 *
+	 * @return bool
+	 */
+	public static function set_client_id( $value ): bool {
+		return self::set_connect_mode_data( self::CLIENT_ID, $value );
+	}
+
+	public static function get_subscription_id() {
+		return self::get_connect_mode_data( self::SUBSCRIPTION_ID, false );
+	}
+
+	public static function set_subscription_id( $value ): bool {
+		return self::set_connect_mode_data( self::SUBSCRIPTION_ID, $value );
+	}
+
+	/**
+	 * set_client_secret
+	 * @param $value
+	 *
+	 * @return bool
+	 */
+	public static function set_client_secret( $value ): bool {
+		return self::set_connect_mode_data( self::CLIENT_SECRET, $value );
+	}
+
+	/**
+	 * get_access_token
+	 * @return false|mixed|string|null
+	 */
+	public static function get_access_token() {
+		return self::get_connect_mode_data( self::ACCESS_TOKEN, false );
+	}
+
+	public static function get_token_id() {
+		return self::get_connect_mode_data( self::TOKEN_ID, false );
+	}
+
+	/**
+	 * get_refresh_token
+	 * @return false|mixed|string|null
+	 */
+	public static function get_refresh_token() {
+		return self::get_connect_mode_data( self::REFRESH_TOKEN, false );
+	}
+
+	/**
+	 * get_home_url
+	 *
+	 * Return a plain text version of a based64 encoded home URL if its stored as base64 encoded
+	 * @return string|null
+	 */
+	public static function get_home_url() {
+		$raw = self::get_connect_mode_data( self::HOME_URL, false );
+		$is_base64 = base64_encode( base64_decode( $raw, true ) ) === $raw;
+		return $is_base64 ? base64_decode( $raw ) : $raw;
+	}
+
+	/**
+	 * set_home_url
+	 *
+	 * Stores home URL as a base64 string to avoid migration/stg tools from overriding value
+	 */
+	public static function set_home_url( ?string $home_url = null ): bool {
+		$home_url = $home_url ?? home_url();
+		return self::set_connect_mode_data( self::HOME_URL, base64_encode( $home_url ) );
+	}
+
+	/**
+	 * set_user_is_owner_option
+	 */
+	public static function set_user_is_owner_option( $value ) {
+		return self::set_connect_mode_data( self::OPTION_OWNER_USER_ID, $value );
+	}
+
+	/**
+	 * get_user_is_owner_option
+	 */
+	public static function get_user_is_owner_option() {
+		return self::get_connect_mode_data( self::OPTION_OWNER_USER_ID, false );
+	}
+
+	/**
+	 * fetch_option
+	 * direct query to avoid cache and race condition issues
+	 *
+	 * @param $option_name
+	 * @param $default
+	 *
+	 * @return mixed|null
+	 */
+	public static function fetch_option( $option_name, $default = null ) {
+		global $wpdb;
+		if ( ! self::is_option_whitelisted_for_direct_access( $option_name ) ) {
+			return $default;
+		}
+
+		$cache_buster = wp_generate_uuid4();
+		$option = $wpdb->get_col(
+			$wpdb->prepare(
+				"SELECT option_value
+								FROM $wpdb->options
+								WHERE option_name = %s
+								AND %s = %s
+								LIMIT 1",
+				$option_name,
+				$cache_buster,
+				$cache_buster
+			)
+		);
+		if ( ! empty( $option ) ) {
+			return $option[0];
+		}
+		return $default;
+	}
+
+	/**
+	 * insert_option_uniquely
+	 *
+	 * used to insert option if not there already
+	 * direct query to avoid cache and race condition issues
+	 *
+	 * @param $option_name
+	 * @param $option_value
+	 *
+	 * @return bool
+	 */
+	public static function insert_option_uniquely( $option_name, $option_value ): bool {
+		global $wpdb;
+		if ( ! self::is_option_whitelisted_for_direct_access( $option_name ) ) {
+			return false;
+		}
+		$cache_buster = wp_generate_uuid4();
+		$result = $wpdb->query(
+			$wpdb->prepare(
+				"INSERT INTO $wpdb->options (option_name, option_value, autoload)
+								SELECT * FROM (SELECT %s, %s, 'no') AS tmp
+								WHERE NOT EXISTS (
+									SELECT option_name
+									FROM $wpdb->options
+									WHERE option_name = %s
+								  	AND option_value = %s
+									AND %s = %s
+								) LIMIT 1",
+				$option_name,
+				$option_value,
+				$option_name,
+				$option_value,
+				$cache_buster,
+				$cache_buster
+			)
+		);
+
+		if ( false === $result || 0 === $result ) {
+			// false means query failed, 0 means no row inserted because it exists
+			return false;
+		}
+
+		return true;
+	}
+
+	/**
+	 * is_option_whitelisted_for_direct_access
+	 * allowed only list of option names
+	 *
+	 * @param string $option_name
+	 *
+	 * @return boolean
+	 */
+	public static function is_option_whitelisted_for_direct_access( string $option_name ): bool {
+		$options_whitelist = [
+			Config::APP_NAME . Service::REFRESH_TOKEN_LOCK,
+		];
+		return in_array( $option_name, $options_whitelist, true );
+	}
+
+	/**
+	 * User is subscription owner.
+	 *
+	 * Check if current user is subscription owner.
+	 *
+	 * @return boolean
+	 */
+	public static function user_is_subscription_owner(): bool {
+		$owner_id = (int) self::get_connect_mode_data( self::OPTION_OWNER_USER_ID, false );
+
+		return get_current_user_id() === $owner_id;
+	}
+
+	/**
+	 * clear_session
+	 */
+	public static function clear_session( $with_client = false ) {
+		if ( Config::CONNECT_MODE === 'site' ) {
+			if ( $with_client ) {
+				self::delete_option( self::CLIENT_ID );
+				self::delete_option( self::CLIENT_SECRET );
+			}
+			self::delete_option( self::ACCESS_TOKEN );
+			self::delete_option( self::REFRESH_TOKEN );
+			self::delete_option( self::TOKEN_ID );
+			self::delete_option( self::SUBSCRIPTION_ID );
+			self::delete_option( self::OPTION_OWNER_USER_ID );
+			self::delete_option( self::HOME_URL );
+		} else {
+			$user_id = get_current_user_id();
+			if ( $with_client ) {
+				self::delete_user_data( $user_id, self::CLIENT_ID );
+				self::delete_user_data( $user_id, self::CLIENT_SECRET );
+			}
+			self::delete_user_data( $user_id, self::ACCESS_TOKEN );
+			self::delete_user_data( $user_id, self::REFRESH_TOKEN );
+			self::delete_user_data( $user_id, self::TOKEN_ID );
+			self::delete_user_data( $user_id, self::SUBSCRIPTION_ID );
+			self::delete_user_data( $user_id, self::OPTION_OWNER_USER_ID );
+			self::delete_user_data( $user_id, self::HOME_URL );
+		}
+	}
+}
diff --git a/modules/connect/classes/exceptions/service-exception.php b/modules/connect/classes/exceptions/service-exception.php
new file mode 100644
index 0000000..ad0af38
--- /dev/null
+++ b/modules/connect/classes/exceptions/service-exception.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes\Exceptions;
+
+use Exception;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Service_Exception extends Exception {
+	protected $message = 'Service Exception';
+}
diff --git a/modules/connect/classes/grant-types.php b/modules/connect/classes/grant-types.php
new file mode 100644
index 0000000..19a5abb
--- /dev/null
+++ b/modules/connect/classes/grant-types.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class GrantTypes
+ */
+class GrantTypes extends Basic_Enum {
+	const CLIENT_CREDENTIALS = 'client_credentials';
+	const AUTHORIZATION_CODE = 'authorization_code';
+	const REFRESH_TOKEN = 'refresh_token';
+}
diff --git a/modules/connect/classes/route-base.php b/modules/connect/classes/route-base.php
new file mode 100644
index 0000000..8b57d96
--- /dev/null
+++ b/modules/connect/classes/route-base.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes;
+
+use EA11y\Classes\Rest\Route;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Route_Base
+ */
+class Route_Base extends Route {
+	protected bool $override = false;
+	protected $auth = true;
+	protected string $path = '';
+	public function get_methods(): array {
+		return [];
+	}
+
+	public function get_endpoint(): string {
+		return 'connect/' . $this->get_path();
+	}
+
+	public function get_path(): string {
+		return $this->path;
+	}
+
+	public function get_name(): string {
+		return '';
+	}
+
+	public function post_permission_callback( \WP_REST_Request $request ): bool {
+		return $this->get_permission_callback( $request );
+	}
+
+	public function get_permission_callback( \WP_REST_Request $request ): bool {
+		$valid = $this->permission_callback( $request );
+
+		return $valid && user_can( $this->current_user_id, 'manage_options' );
+	}
+}
diff --git a/modules/connect/classes/service.php b/modules/connect/classes/service.php
new file mode 100644
index 0000000..b38eca9
--- /dev/null
+++ b/modules/connect/classes/service.php
@@ -0,0 +1,320 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes;
+
+use EA11y\Classes\Logger;
+use EA11y\Modules\Connect\Classes\Exceptions\Service_Exception;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Class Service
+ */
+class Service {
+	const REFRESH_TOKEN_LOCK = '_connect_refresh_token';
+
+	/**
+	 * Registers new client and returns client ID
+	 *
+	 * @return string
+	 * @throws Service_Exception
+	 */
+	public static function register_client(): string {
+		$clients_url = Utils::get_clients_url();
+
+		if ( ! $clients_url ) {
+			throw new Service_Exception( 'Missing client registration URL' );
+		}
+
+		$client_data = self::request( $clients_url, [
+			'method' => 'POST',
+			'headers' => [
+				'Content-Type' => 'application/json',
+			],
+			'body' => wp_json_encode([
+				'redirect_uri' => Utils::get_redirect_uri(),
+				'app_type' => Config::APP_TYPE,
+			]),
+		], 201 );
+
+		$client_id = $client_data['client_id'] ?? null;
+		$client_secret = $client_data['client_secret'] ?? null;
+
+		Data::set_client_id( $client_id );
+		Data::set_client_secret( $client_secret );
+		Data::set_home_url();
+
+		return $client_id;
+	}
+
+	/**
+	 * Deactivate license
+	 *
+	 * @return void
+	 * @throws Service_Exception
+	 */
+	public static function deactivate_license(): void {
+		$client_id = Data::get_client_id();
+
+		if ( ! $client_id ) {
+			throw new Service_Exception( 'Missing client ID' );
+		}
+
+		$deactivation_url = Utils::get_deactivation_url( $client_id );
+
+		if ( ! $deactivation_url ) {
+			throw new Service_Exception( 'Missing deactivation URL' );
+		}
+
+		$access_token = Data::get_access_token();
+
+		if ( ! $access_token ) {
+			throw new Service_Exception( 'Missing access token' );
+		}
+
+		$refresh_token = Data::get_refresh_token();
+
+		if ( ! $refresh_token ) {
+			throw new Service_Exception( 'Missing refresh token' );
+		}
+
+		self::request($deactivation_url, [
+			'method' => 'DELETE',
+			'headers' => [
+				'Authorization' => "Bearer {$access_token}",
+			],
+		], 204);
+
+		self::get_token( 'refresh_token', $refresh_token );
+	}
+
+	/**
+	 * disconnect
+	 *
+	 * @return void
+	 * @throws Service_Exception
+	 */
+	public static function disconnect(): void {
+		$sessions_url = Utils::get_sessions_url();
+
+		if ( ! $sessions_url ) {
+			throw new Service_Exception( 'Missing sessions URL' );
+		}
+
+		$access_token = Data::get_access_token();
+
+		if ( ! $access_token ) {
+			throw new Service_Exception( 'Missing access token' );
+		}
+
+		self::request( $sessions_url, [
+			'method' => 'DELETE',
+			'headers' => [
+				'Content-Type' => 'application/json',
+				'Authorization' => "Bearer {$access_token}",
+			],
+		], 204 );
+
+		Data::clear_session();
+	}
+
+	/**
+	 * disconnect
+	 *
+	 * @return void
+	 * @throws Service_Exception
+	 */
+	public static function reconnect(): void {
+		$sessions_url = Utils::get_sessions_url();
+
+		if ( ! $sessions_url ) {
+			throw new Service_Exception( 'Missing sessions URL' );
+		}
+
+		Data::clear_session();
+	}
+
+	/**
+	 * Get token & optionally save to user
+	 *
+	 * @param string $grant_type
+	 *
+	 * @param string|null $credential
+	 * @param bool|null $update
+	 *
+	 * @return array
+	 * @throws Service_Exception
+	 */
+	public static function get_token( string $grant_type, ?string $credential = null, ?bool $update = true ): array {
+		$token_url = Utils::get_token_url();
+
+		if ( ! $token_url ) {
+			throw new Service_Exception( 'Missing token URL' );
+		}
+
+		$client_id = Data::get_client_id();
+		$client_secret = Data::get_client_secret();
+
+		if ( empty( $client_id ) || empty( $client_secret ) ) {
+			throw new Service_Exception( 'Missing client ID or secret' );
+		}
+
+		$body = [
+			'grant_type' => $grant_type,
+			'redirect_uri' => Utils::get_redirect_uri(),
+		];
+
+		switch ( $grant_type ) {
+			case GrantTypes::AUTHORIZATION_CODE:
+				$body['code'] = $credential;
+				break;
+			case GrantTypes::REFRESH_TOKEN:
+				$body[ GrantTypes::REFRESH_TOKEN ] = $credential;
+				break;
+			case GrantTypes::CLIENT_CREDENTIALS:
+				$body['redirect_uri'] = Utils::get_redirect_uri( Data::get_home_url() );
+
+				break;
+			default:
+				throw new Service_Exception( 'Invalid grant type' );
+		}
+
+		$data = self::request( $token_url, [
+			'method' => 'POST',
+			'headers' => [
+				'x-elementor-apps' => Config::APP_NAME,
+				'Authorization' => 'Basic ' . base64_encode( "{$client_id}:{$client_secret}" ), // phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.obfuscation_base64_encode
+			],
+			'body' => $body,
+		] );
+
+		if ( $update ) {
+			Data::set_connect_mode_data( Data::TOKEN_ID, $data['id_token'] ?? null );
+			Data::set_connect_mode_data( Data::ACCESS_TOKEN, $data['access_token'] ?? null );
+			Data::set_connect_mode_data( Data::REFRESH_TOKEN, $data['refresh_token'] ?? null );
+			Data::set_connect_mode_data( Data::OPTION_OWNER_USER_ID, get_current_user_id() ?? null );
+		}
+
+		return $data;
+	}
+
+	public static function jwt_decode( $payload ): string {
+		static $jwks = null;
+
+		$jwks_url = Utils::get_jwks_url();
+		if ( ! $jwks_url ) {
+			return __( 'Missing JWKS URL', 'site-mailer' );
+		}
+
+		if ( ! $jwks ) {
+			$jwks = self::request($jwks_url, [
+				'method' => 'GET',
+			]);
+		}
+		if ( ! class_exists( 'JWT' ) ) {
+			require_once SITE_MAILER_PATH . 'vendor/autoload.php';
+			if ( ! class_exists( 'JWT' ) ) {
+				return __( 'JWT class not found', 'site-mailer' );
+			}
+		}
+
+		try {
+			$decoded = \Firebase\JWT\JWT::decode( $payload, \Firebase\JWT\JWK::parseKeySet( $jwks ) );
+			return wp_json_encode( $decoded, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES );
+		} catch ( \Throwable $th ) {
+			if ( $th instanceof \Firebase\JWT\ExpiredException ) {
+				self::get_token( GrantTypes::REFRESH_TOKEN, Data::get_refresh_token() );
+				return self::jwt_decode( $payload );
+			}
+			return $th->getMessage();
+		}
+	}
+
+	/**
+	 * @param string $url
+	 * @param array $args
+	 * @param int $valid_response_code
+	 *
+	 * @return array|null
+	 * @throws Service_Exception
+	 */
+	public static function request( string $url, array $args, int $valid_response_code = 200 ): ?array {
+		$args['timeout'] = 30;
+
+		$response = wp_remote_request( $url, $args );
+
+		if ( is_wp_error( $response ) ) {
+			Logger::error( $response->get_error_message() );
+
+			throw new Service_Exception( esc_html( $response->get_error_message() ) );
+		}
+
+		if ( wp_remote_retrieve_response_code( $response ) !== $valid_response_code ) {
+			Logger::error( 'Invalid status code ' . wp_remote_retrieve_response_code( $response ) );
+
+			throw new Service_Exception( esc_html( wp_remote_retrieve_body( $response ) ) );
+		}
+
+		return json_decode( wp_remote_retrieve_body( $response ), true );
+	}
+
+	/**
+	 * @throws Service_Exception
+	 */
+	public static function refresh_token() {
+		$lock_key = Config::APP_NAME . self::REFRESH_TOKEN_LOCK;
+		$last_token = Data::fetch_option( $lock_key, '' );
+
+		$current_refresh_token = Data::get_refresh_token();
+
+		if ( ! empty( $last_token ) && $last_token === $current_refresh_token ) {
+			sleep( 1 );
+			return;
+		}
+
+		delete_option( $lock_key );
+		$locked = Data::insert_option_uniquely( $lock_key, $current_refresh_token );
+		if ( ! $locked ) {
+			sleep( 1 );
+			return;
+		}
+
+		self::get_token( GrantTypes::REFRESH_TOKEN, $current_refresh_token );
+	}
+
+	/**
+	 * @throws Service_Exception
+	 */
+	public static function update_redirect_uri(): void {
+		$client_id = Data::get_client_id();
+
+		if ( ! $client_id ) {
+			throw new Service_Exception( 'Missing client ID' );
+		}
+
+		$client_patch_url = Utils::get_clients_patch_url( $client_id );
+
+		[ 'access_token' => $access_token ] = self::get_token(
+			GrantTypes::CLIENT_CREDENTIALS,
+			null,
+			false
+		);
+
+		self::request( $client_patch_url, [
+			'method' => 'PATCH',
+			'headers' => [
+				'Content-Type' => 'application/json',
+				'Authorization' => "Bearer {$access_token}",
+			],
+			'body' => wp_json_encode( [
+				'redirect_uri' => Utils::get_redirect_uri(),
+			] ),
+		] );
+
+		self::refresh_token();
+
+		Data::set_home_url();
+	}
+}
diff --git a/modules/connect/classes/utils.php b/modules/connect/classes/utils.php
new file mode 100644
index 0000000..9eb9db1
--- /dev/null
+++ b/modules/connect/classes/utils.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace EA11y\Modules\Connect\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Utils
+ */
+class Utils {
+	/**
+	 * get_clients_url
+	 * @return string
+	 */
+	public static function get_clients_url(): string {
+		return self::get_base_url() . '/api/v1/clients';
+	}
+
+	/**
+	 * get_redirect_uri
+	 * @return string
+	 */
+	public static function get_redirect_uri( string $domain = '' ): string {
+		if ( false !== strpos( Config::ADMIN_PAGE, '?page=' ) ) {
+			$admin_url = admin_url( Config::ADMIN_PAGE );
+		} else {
+			$admin_url = admin_url( 'options-general.php?page=' . Config::ADMIN_PAGE );
+		}
+
+		if ( $domain ) {
+			$parsed_url = wp_parse_url( $admin_url );
+			$path = $parsed_url['path'] . ( isset( $parsed_url['query'] ) ? '?' . $parsed_url['query'] : '' );
+
+			return rtrim( $domain, '/' ) . $path;
+		}
+
+		return $admin_url;
+	}
+
+	public static function get_auth_url(): string {
+		return self::get_base_url() . '/v1/oauth2/auth';
+	}
+
+	/**
+	 * Get full authorization URL with all required parameters
+	 *
+	 * @param string $client_id
+	 *
+	 * @return string
+	 */
+	public static function get_authorize_url( string $client_id ): string {
+		return add_query_arg( [
+			'client_id' => $client_id,
+			'redirect_uri' => rawurlencode( self::get_redirect_uri() ),
+			'response_type' => 'code',
+			'scope' => Config::SCOPES,
+			'state' => wp_create_nonce( Config::STATE_NONCE ),
+		], self::get_auth_url() );
+	}
+
+	/**
+	 * get_deactivation_url
+	 * @param string $client_id
+	 *
+	 * @return string
+	 */
+	public static function get_deactivation_url( string $client_id ): string {
+		return self::get_base_url() . "/api/v1/clients/{$client_id}/activation";
+	}
+
+	public static function get_jwks_url(): string {
+		return self::get_base_url() . '/v1/.well-known/jwks.json';
+	}
+
+	/**
+	 * get_sessions_url
+	 * @return string
+	 */
+	public static function get_sessions_url(): string {
+		return self::get_base_url() . '/api/v1/session';
+	}
+
+	public static function get_token_url(): string {
+		return self::get_base_url() . '/api/v1/oauth2/token';
+	}
+
+	/**
+	 * Get clients URL
+	 *
+	 * @param string $client_id
+	 *
+	 * @return string
+	 */
+	public static function get_clients_patch_url( string $client_id ): string {
+		return Utils::get_base_url() . "/api/v1/clients/{$client_id}";
+	}
+
+	/**
+	 * get_base_url
+	 * @return string
+	 */
+	public static function get_base_url(): string {
+		return apply_filters( 'site_mailer_connect_get_base_url', Config::BASE_URL );
+	}
+
+	/**
+	 * is_valid_home_url
+	 * @return bool
+	 */
+	public static function is_valid_home_url(): bool {
+		static $valid = null;
+
+		if ( null === $valid ) {
+			if ( empty( Data::get_home_url() ) ) {
+				$valid = true;
+			} else {
+				$valid = Data::get_home_url() === home_url();
+			}
+		}
+
+		return $valid;
+	}
+}
diff --git a/modules/connect/components/handler.php b/modules/connect/components/handler.php
new file mode 100644
index 0000000..5eee71d
--- /dev/null
+++ b/modules/connect/components/handler.php
@@ -0,0 +1,91 @@
+<?php
+
+namespace EA11y\Modules\Connect\Components;
+
+use EA11y\Modules\Connect\Classes\{
+	Config,
+	Data,
+	GrantTypes,
+	Service,
+	Utils,
+};
+use EA11y\Classes\Logger;
+use Throwable;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Handler
+ */
+class Handler {
+	private function should_handle_auth_code(): bool {
+		global $plugin_page;
+
+		$page_slug = explode( 'page=', Config::ADMIN_PAGE );
+
+		$is_connect_admin_page = false;
+
+		if ( ! empty( $page_slug[1] ) && $page_slug[1] === $plugin_page ) {
+			$is_connect_admin_page = true;
+		}
+
+		if ( ! $is_connect_admin_page && Config::ADMIN_PAGE === $plugin_page ) {
+			$is_connect_admin_page = true;
+		}
+
+		if ( ! $is_connect_admin_page ) {
+			return false;
+		}
+
+		$code = $_GET['code'] ?? null;
+		$state = $_GET['state'] ?? null;
+
+		if ( empty( $code ) || empty( $state ) ) {
+			return false;
+		}
+
+		return true;
+	}
+
+	private function validate_nonce( $state ) {
+		if ( ! wp_verify_nonce( $state, Config::STATE_NONCE ) ) {
+			wp_die( 'Invalid state' );
+		}
+	}
+
+	public function handle_auth_code() {
+		if ( ! $this->should_handle_auth_code() ) {
+			return;
+		}
+
+		$code = sanitize_text_field( $_GET['code'] );
+		$state = sanitize_text_field( $_GET['state'] );
+
+		// Check if the state is valid
+		$this->validate_nonce( $state );
+
+		try {
+			// Exchange the code for an access token and store it
+			Service::get_token( GrantTypes::AUTHORIZATION_CODE, $code ); // Makes sure we won't stick in the mismatch limbo
+
+			Data::set_home_url();
+
+			do_action( 'on_connect_' . Config::APP_PREFIX . '_connected' ); // Redirect to the redirect URI
+		} catch ( Throwable $t ) {
+			Logger::error( 'Unable to handle auth code: ' . $t->getMessage() );
+		}
+
+		wp_redirect( Utils::get_redirect_uri() );
+
+		exit;
+	}
+
+	/**
+	 * Handler constructor.
+	 */
+	public function __construct() {
+		add_action( 'admin_init', [ $this, 'handle_auth_code' ] );
+	}
+}
diff --git a/modules/connect/module.php b/modules/connect/module.php
new file mode 100644
index 0000000..c226985
--- /dev/null
+++ b/modules/connect/module.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace EA11y\Modules\Connect;
+
+use EA11y\Classes\Module_Base;
+use EA11y\Modules\Connect\Classes\Data;
+use EA11y\Modules\Connect\Classes\Utils;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Module
+ */
+class Module extends Module_Base {
+
+	/**
+	 * Get module name.
+	 * Retrieve the module name.
+	 * @access public
+	 * @return string Module name.
+	 */
+	public function get_name() {
+		return 'connect';
+	}
+
+	/**
+	 * component_list
+	 * @return string[]
+	 */
+	public static function component_list() : array {
+		return [
+			'Handler',
+		];
+	}
+
+	/**
+	 * routes_list
+	 * @return string[]
+	 */
+	public static function routes_list() : array {
+		return [
+			'Authorize',
+			'Disconnect',
+			'Deactivate',
+			'Deactivate_And_Disconnect',
+			'Switch_Domain',
+			'Reconnect',
+		];
+	}
+
+	public static function is_connected() : bool {
+		return ! ! Data::get_access_token() && Utils::is_valid_home_url();
+	}
+
+	public function authorize_url( $authorize_url ) {
+		$utm_params = [];
+
+		$sm_campaign = get_transient( 'elementor_site_mailer_campaign' );
+		if ( false === $sm_campaign ) {
+			return $authorize_url;
+		}
+
+		foreach ( [ 'source', 'medium', 'campaign' ] as $key ) {
+			if ( ! empty( $sm_campaign[ $key ] ) ) {
+				$utm_params[ 'utm_' . $key ] = $sm_campaign[ $key ];
+			}
+		}
+
+		if ( ! empty( $utm_params ) ) {
+			$authorize_url = add_query_arg( $utm_params, $authorize_url );
+		}
+
+		return $authorize_url;
+	}
+
+	public function __construct() {
+		$this->register_components();
+		$this->register_routes();
+		add_filter( 'site_mailer_connect_authorize_url', [ $this, 'authorize_url' ] );
+	}
+}
+
diff --git a/modules/connect/rest/authorize.php b/modules/connect/rest/authorize.php
new file mode 100644
index 0000000..8437861
--- /dev/null
+++ b/modules/connect/rest/authorize.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace EA11y\Modules\Connect\Rest;
+
+use EA11y\Modules\Connect\Classes\{
+	Data,
+	Route_Base,
+	Service,
+	Utils
+};
+
+use EA11y\Modules\Connect\Module as Connect;
+use Throwable;
+use WP_REST_Request;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Authorize
+ */
+class Authorize extends Route_Base {
+	public string $path = 'authorize';
+	public const NONCE_NAME = 'wp_rest';
+
+	public function get_methods(): array {
+		return [ 'POST' ];
+	}
+
+	public function get_name(): string {
+		return 'authorize';
+	}
+
+	public function POST( WP_REST_Request $request ) {
+		$this->verify_nonce_and_capability(
+			$request->get_param( self::NONCE_NAME ),
+			self::NONCE_NAME
+		);
+
+		if ( Connect::is_connected() && Utils::is_valid_home_url() ) {
+			return $this->respond_error_json( [
+				'message' => esc_html__( 'You are already connected', 'site-mailer' ),
+				'code' => 'forbidden',
+			] );
+		}
+
+		try {
+			$client_id = Data::get_client_id();
+
+			if ( ! $client_id ) {
+				$client_id = Service::register_client();
+			}
+
+			if ( ! Utils::is_valid_home_url() ) {
+				if ( $request->get_param( 'update_redirect_uri' ) ) {
+					Service::update_redirect_uri();
+				} else {
+					return $this->respond_error_json( [
+						'message' => esc_html__( 'Connected domain mismatch', 'site-mailer' ),
+						'code'    => 'forbidden',
+					] );
+				}
+			}
+
+			$authorize_url = Utils::get_authorize_url( $client_id );
+
+			$authorize_url = apply_filters( 'site_mailer_connect_authorize_url', $authorize_url );
+
+			return $this->respond_success_json( $authorize_url );
+		} catch ( Throwable $t ) {
+			return $this->respond_error_json( [
+				'message' => $t->getMessage(),
+				'code' => 'internal_server_error',
+			] );
+		}
+	}
+}
diff --git a/modules/connect/rest/deactivate-and-disconnect.php b/modules/connect/rest/deactivate-and-disconnect.php
new file mode 100644
index 0000000..4b7dc87
--- /dev/null
+++ b/modules/connect/rest/deactivate-and-disconnect.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace EA11y\Modules\Connect\Rest;
+
+use EA11y\Modules\Connect\Classes\{
+	Data,
+	Route_Base,
+	Service,
+};
+
+use Throwable;
+use WP_REST_Request;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Disconnect
+ */
+class Deactivate_And_Disconnect extends Route_Base {
+	public string $path = 'deactivate_and_disconnect';
+
+	public function get_methods(): array {
+		return [ 'POST' ];
+	}
+
+	public function get_name(): string {
+		return 'deactivate_and_disconnect';
+	}
+
+	public function POST( WP_REST_Request $request ) {
+		try {
+			if ( $request->get_param( 'clear_session' ) ) {
+				Data::clear_session( true );
+				return $this->respond_success_json();
+			}
+
+			Service::deactivate_license();
+			Service::disconnect();
+
+			return $this->respond_success_json();
+		} catch ( Throwable $t ) {
+			return $this->respond_error_json( [
+				'message' => $t->getMessage(),
+				'code' => 'internal_server_error',
+			] );
+		}
+	}
+}
diff --git a/modules/connect/rest/deactivate.php b/modules/connect/rest/deactivate.php
new file mode 100644
index 0000000..01c9aec
--- /dev/null
+++ b/modules/connect/rest/deactivate.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace EA11y\Modules\Connect\Rest;
+
+use EA11y\Modules\Connect\Classes\{
+	Route_Base,
+	Service,
+};
+
+use Throwable;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Deactivate
+ */
+class Deactivate extends Route_Base {
+	public string $path = 'deactivate';
+
+	public function get_methods(): array {
+		return [ 'POST' ];
+	}
+
+	public function get_name(): string {
+		return 'deactivate';
+	}
+
+	public function POST() {
+		try {
+			Service::deactivate_license();
+
+			return $this->respond_success_json();
+		} catch ( Throwable $t ) {
+			return $this->respond_error_json( [
+				'message' => $t->getMessage(),
+				'code' => 'internal_server_error',
+			] );
+		}
+	}
+}
diff --git a/modules/connect/rest/disconnect.php b/modules/connect/rest/disconnect.php
new file mode 100644
index 0000000..303c477
--- /dev/null
+++ b/modules/connect/rest/disconnect.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace EA11y\Modules\Connect\Rest;
+
+use EA11y\Modules\Connect\Classes\{
+	Route_Base,
+	Service,
+};
+
+use Throwable;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Disconnect
+ */
+class Disconnect extends Route_Base {
+	public string $path = 'disconnect';
+
+	public function get_methods(): array {
+		return [ 'POST' ];
+	}
+
+	public function get_name(): string {
+		return 'disconnect';
+	}
+
+	public function POST() {
+		try {
+			Service::disconnect();
+
+			return $this->respond_success_json();
+		} catch ( Throwable $t ) {
+			return $this->respond_error_json( [
+				'message' => $t->getMessage(),
+				'code' => 'internal_server_error',
+			] );
+		}
+	}
+}
diff --git a/modules/connect/rest/reconnect.php b/modules/connect/rest/reconnect.php
new file mode 100644
index 0000000..0c43431
--- /dev/null
+++ b/modules/connect/rest/reconnect.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace EA11y\Modules\Connect\Rest;
+
+use EA11y\Modules\Connect\Classes\{
+	Route_Base,
+	Service,
+};
+
+use Throwable;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Reconnect
+ */
+class Reconnect extends Route_Base {
+	public string $path = 'reconnect';
+
+	public function get_methods(): array {
+		return [ 'POST' ];
+	}
+
+	public function get_name(): string {
+		return 'reconnect';
+	}
+
+	public function POST() {
+		try {
+			Service::reconnect();
+			return $this->respond_success_json();
+		} catch ( Throwable $t ) {
+			return $this->respond_error_json( [
+				'message' => $t->getMessage(),
+				'code' => 'internal_server_error',
+			] );
+		}
+	}
+}
diff --git a/modules/connect/rest/switch-domain.php b/modules/connect/rest/switch-domain.php
new file mode 100644
index 0000000..34f2cc2
--- /dev/null
+++ b/modules/connect/rest/switch-domain.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace EA11y\modules\connect\rest;
+
+use EA11y\Modules\Connect\Classes\{Data, Route_Base, Service, Utils};
+use Throwable;
+use WP_REST_Request;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Switch_Domain
+ */
+class Switch_Domain extends Route_Base {
+	public string $path = 'switch_domain';
+	public const NONCE_NAME = 'wp_rest';
+
+	public function get_methods(): array {
+		return [ 'POST' ];
+	}
+
+	public function get_name(): string {
+		return 'switch_domain';
+	}
+
+	public function POST( WP_REST_Request $request ) {
+		$this->verify_nonce_and_capability(
+			$request->get_param( self::NONCE_NAME ),
+			self::NONCE_NAME
+		);
+
+		try {
+			$client_id = Data::get_client_id();
+
+			if ( ! $client_id ) {
+				return $this->respond_error_json( [
+					'message' => __( 'Client ID not found', 'site-mailer' ),
+					'code' => 'ignore_error',
+				] );
+			}
+
+			Service::update_redirect_uri();
+
+			return $this->respond_success_json( [ 'message' => __( 'Domain updated!', 'site-mailer' ) ] );
+		} catch ( Throwable $t ) {
+			return $this->respond_error_json( [
+				'message' => $t->getMessage(),
+				'code' => 'internal_server_error',
+			] );
+		}
+	}
+}

From d6c4efcc9c1bf894e7c616b8f681d8ec7a893ff6 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 13:18:01 +0530
Subject: [PATCH 20/65] add: settings and get settings route

---
 modules/settings/classes/route-base.php | 39 +++++++++++++++++++
 modules/settings/classes/settings.php   | 25 +++++++++++++
 modules/settings/module.php             | 22 ++++++++++-
 modules/settings/rest/get-settings.php  | 50 +++++++++++++++++++++++++
 4 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 modules/settings/classes/route-base.php
 create mode 100644 modules/settings/classes/settings.php
 create mode 100644 modules/settings/rest/get-settings.php

diff --git a/modules/settings/classes/route-base.php b/modules/settings/classes/route-base.php
new file mode 100644
index 0000000..907a340
--- /dev/null
+++ b/modules/settings/classes/route-base.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace EA11y\Modules\Settings\Classes;
+
+use EA11y\Classes\Rest\Route;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+/**
+ * Class Route_Base
+ */
+class Route_Base extends Route {
+	protected bool $override = false;
+	protected $auth = true;
+	protected string $path = '';
+	public function get_methods(): array {
+		return [];
+	}
+
+	public function get_endpoint(): string {
+		return 'settings/' . $this->get_path();
+	}
+
+	public function get_path(): string {
+		return $this->path;
+	}
+
+	public function get_name(): string {
+		return '';
+	}
+
+	public function get_permission_callback( \WP_REST_Request $request ): bool {
+		$valid = $this->permission_callback( $request );
+
+		return $valid && user_can( $this->current_user_id, 'manage_options' );
+	}
+}
diff --git a/modules/settings/classes/settings.php b/modules/settings/classes/settings.php
new file mode 100644
index 0000000..44f08b2
--- /dev/null
+++ b/modules/settings/classes/settings.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace EA11y\Modules\Settings\Classes;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Settings {
+
+	/**
+	 * Returns plugin settings data by option name typecasted to an appropriate data type.
+	 *
+	 * @param string $option_name
+	 * @return mixed
+	 */
+	public static function get( string $option_name ) {
+		$data = get_option( $option_name );
+
+		switch ( $option_name ) {
+			default:
+				return $data;
+		}
+	}
+}
diff --git a/modules/settings/module.php b/modules/settings/module.php
index 2cd3555..73daa7f 100644
--- a/modules/settings/module.php
+++ b/modules/settings/module.php
@@ -4,6 +4,7 @@
 
 use EA11y\Classes\Module_Base;
 use EA11y\Classes\Utils;
+use EA11y\Modules\Connect\Module as Connect;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
@@ -54,10 +55,9 @@ public function register_page() {
 			self::SETTING_BASE_SLUG,
 			__( 'Accessibility Settings', 'pojo-accessibility' ),
 			__( 'Settings', 'pojo-accessibility' ),
-			self::SETTING_CAPABILITY,	
+			self::SETTING_CAPABILITY,
 			self::SETTING_BASE_SLUG,
 			[ $this, 'render_app' ],
-
 		);
 	}
 
@@ -85,10 +85,28 @@ public function enqueue_scripts( $hook ) {
 		);
 	}
 
+	public static function routes_list() : array {
+		return [
+			'Get_Settings',
+		];
+	}
+
+	/**
+	 * Get all plugin settings data
+	 * @return array
+	 */
+	public static function get_plugin_settings(): array {
+
+		return [
+			'isConnected' => Connect::is_connected(),
+		];
+	}
+
 	/**
 	 * Module constructor.
 	 */
 	public function __construct() {
+		$this->register_routes();
 		$this->register_components();
 		add_action( 'admin_menu', [ $this, 'register_page' ] );
 		add_action( 'in_admin_header', [ $this, 'render_top_bar' ] );
diff --git a/modules/settings/rest/get-settings.php b/modules/settings/rest/get-settings.php
new file mode 100644
index 0000000..4cdd581
--- /dev/null
+++ b/modules/settings/rest/get-settings.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace EA11y\Modules\Settings\Rest;
+
+use EA11y\Modules\Settings\Classes\Route_Base;
+use EA11y\Modules\Settings\Module as Settings;
+use Throwable;
+use WP_Error;
+use WP_REST_Response;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class Get_Settings extends Route_Base {
+	public string $path = 'get-settings';
+
+	public function get_methods(): array {
+		return [ 'GET' ];
+	}
+
+	public function get_name(): string {
+		return 'get-settings';
+	}
+
+	/**
+	 *
+	 * @return WP_Error|WP_REST_Response
+	 *
+	 */
+	public function GET() {
+		try {
+			$error = $this->verify_capability();
+
+			if ( $error ) {
+				return $error;
+			}
+
+			$data = Settings::get_plugin_settings();
+
+			return $this->respond_success_json( $data );
+
+		} catch ( Throwable $t ) {
+			return $this->respond_error_json( [
+				'message' => $t->getMessage(),
+				'code' => 'internal_server_error',
+			] );
+		}
+	}
+}

From c87250b35a5164efc93ff52fe61df0d8d7f4f521 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 13:18:31 +0530
Subject: [PATCH 21/65] add: hooks and contexts to get settings

---
 .../js/contexts/plugin-settings-context.js    | 40 ++++++++++++++
 .../settings/assets/js/hooks/use-settings.js  | 55 +++++++++++++++++++
 .../settings/assets/js/hooks/use-storage.js   | 14 +++++
 3 files changed, 109 insertions(+)
 create mode 100644 modules/settings/assets/js/contexts/plugin-settings-context.js
 create mode 100644 modules/settings/assets/js/hooks/use-settings.js
 create mode 100644 modules/settings/assets/js/hooks/use-storage.js

diff --git a/modules/settings/assets/js/contexts/plugin-settings-context.js b/modules/settings/assets/js/contexts/plugin-settings-context.js
new file mode 100644
index 0000000..3897052
--- /dev/null
+++ b/modules/settings/assets/js/contexts/plugin-settings-context.js
@@ -0,0 +1,40 @@
+import { createContext, useCallback, useContext, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import API from '../api';
+import { useToastNotification } from '../hooks/use-settings';
+
+const PluginSettingsContext = createContext( {} );
+
+export const PluginSettingsProvider = ( { children } ) => {
+	const { error } = useToastNotification();
+	const [ pluginSettings, setPluginSettings ] = useState();
+	const [ loaded, setLoaded ] = useState( false );
+
+	const refreshPluginSettings = useCallback( () => {
+		API.getPluginSettings().then( ( settings ) => {
+			if ( 'isConnected' in settings ) {
+				settings.isConnected = Boolean( settings.isConnected );
+			}
+
+			setPluginSettings( settings );
+			setLoaded( true );
+		} ).catch( () => {
+			error( __( 'An error occurred.', 'site-mailer' ) );
+			setLoaded( true );
+		} );
+	}, [] );
+
+	useEffect( () => {
+		refreshPluginSettings();
+	}, [ refreshPluginSettings ] );
+
+	return (
+		<PluginSettingsContext.Provider value={ { ...pluginSettings, loaded, refreshPluginSettings } }>
+			{ children }
+		</PluginSettingsContext.Provider>
+	);
+};
+
+export const usePluginSettingsContext = () => {
+	return useContext( PluginSettingsContext );
+};
diff --git a/modules/settings/assets/js/hooks/use-settings.js b/modules/settings/assets/js/hooks/use-settings.js
new file mode 100644
index 0000000..1578ec8
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-settings.js
@@ -0,0 +1,55 @@
+import { useState, createContext, useContext } from '@wordpress/element';
+
+/**
+ * Context Component.
+ */
+const SettingsContext = createContext( null );
+
+export function useSettings() {
+	return useContext( SettingsContext );
+}
+
+const SettingsProvider = ( { children } ) => {
+	// Notification
+	const [ showNotification, setShowNotification ] = useState( false );
+	const [ notificationMessage, setNotificationMessage ] = useState( '' );
+	const [ notificationType, setNotificationType ] = useState( '' );
+
+	return (
+		<SettingsContext.Provider
+			value={ {
+				showNotification,
+				setShowNotification,
+				notificationMessage,
+				setNotificationMessage,
+				notificationType,
+				setNotificationType,
+			} }
+		>
+			{ children }
+		</SettingsContext.Provider>
+	);
+};
+
+export const useToastNotification = () => {
+	const { setNotificationMessage, setNotificationType, setShowNotification } = useContext( SettingsContext );
+
+	const error = ( message ) => {
+		setNotificationMessage( message );
+		setNotificationType( 'error' );
+		setShowNotification( true );
+	};
+
+	const success = ( message ) => {
+		setNotificationMessage( message );
+		setNotificationType( 'success' );
+		setShowNotification( true );
+	};
+
+	return {
+		success,
+		error,
+	};
+};
+
+export default SettingsProvider;
diff --git a/modules/settings/assets/js/hooks/use-storage.js b/modules/settings/assets/js/hooks/use-storage.js
new file mode 100644
index 0000000..717ebd3
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-storage.js
@@ -0,0 +1,14 @@
+import { store as coreDataStore } from '@wordpress/core-data';
+import { dispatch } from '@wordpress/data';
+
+const useStorage = () => {
+	const save = async ( data ) => {
+		return await dispatch( coreDataStore ).saveEntityRecord( 'root', 'site', data );
+	};
+
+	return {
+		save,
+	};
+};
+
+export default useStorage;

From 7938003b623f8a97f862ab96adee032872e687f3 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 13:18:45 +0530
Subject: [PATCH 22/65] add: hooks

---
 modules/settings/assets/js/hooks/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
index 2bbadea..6bbb8ca 100644
--- a/modules/settings/assets/js/hooks/index.js
+++ b/modules/settings/assets/js/hooks/index.js
@@ -1,2 +1,6 @@
 export { default as useAuth } from './use-auth';
 export { default as useModal } from './use-modal';
+export { useSettings } from './use-settings';
+export { useToastNotification } from './use-settings';
+export { default as SettingsProvider } from './use-settings';
+export { default as useStorage } from './use-storage';

From 06e8323f91b83b6e2c8acdaa2274e083aebdb7f3 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 13:19:03 +0530
Subject: [PATCH 23/65] add: notification component

---
 .../settings/assets/js/components/index.js    |  1 +
 .../js/components/notifications/index.js      | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 modules/settings/assets/js/components/notifications/index.js

diff --git a/modules/settings/assets/js/components/index.js b/modules/settings/assets/js/components/index.js
index a07d5ce..ef0c049 100644
--- a/modules/settings/assets/js/components/index.js
+++ b/modules/settings/assets/js/components/index.js
@@ -1 +1,2 @@
 export { default as ConnectModal } from './connect-modal';
+export { default as Notifications } from './notifications';
diff --git a/modules/settings/assets/js/components/notifications/index.js b/modules/settings/assets/js/components/notifications/index.js
new file mode 100644
index 0000000..96c0b0a
--- /dev/null
+++ b/modules/settings/assets/js/components/notifications/index.js
@@ -0,0 +1,34 @@
+import Alert from '@elementor/ui/Alert';
+import Snackbar from '@elementor/ui/Snackbar';
+import { useSettings } from '../../hooks';
+
+const Notifications = ( { type, message } ) => {
+	const {
+		showNotification,
+		setShowNotification,
+		setNotificationMessage,
+		setNotificationType,
+	} = useSettings();
+
+	const closeNotification = () => {
+		setShowNotification( ! showNotification );
+		setNotificationMessage( '' );
+		setNotificationType( '' );
+	};
+
+	return (
+		<Snackbar
+			open={ showNotification }
+			autoHideDuration={ type === 'error' ? 10000 : 2000 }
+			onClose={ closeNotification }
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+			sx={ { zIndex: 99999 } }
+		>
+			<Alert onClose={ () => setShowNotification( ! showNotification ) } severity={ type } variant="filled" >
+				{ message }
+			</Alert>
+		</Snackbar>
+	);
+};
+
+export default Notifications;

From 3c8845e31d1fa104c0f9ba0b3583afadb14f2803 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 13:19:16 +0530
Subject: [PATCH 24/65] add: data api

---
 modules/settings/assets/js/api/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/modules/settings/assets/js/api/index.js b/modules/settings/assets/js/api/index.js
index f66dd2c..2648f10 100644
--- a/modules/settings/assets/js/api/index.js
+++ b/modules/settings/assets/js/api/index.js
@@ -3,7 +3,7 @@ import { addQueryArgs } from '@wordpress/url';
 import APIError from './exceptions/APIError';
 
 const wpV2Prefix = '/wp/v2';
-const v1Prefix = '/site-mailer/v1';
+const v1Prefix = '/ea11y/v1';
 
 class API {
 	static async request( { path, data, method = 'POST' } ) {
@@ -38,7 +38,7 @@ class API {
 
 	static async initConnect( context = 'new' ) {
 		const data = {
-			wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+			wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 		};
 
 		if ( 'update' === context ) {
@@ -57,7 +57,7 @@ class API {
 			method: 'POST',
 			path: `${ v1Prefix }/connect/deactivate_and_disconnect`,
 			data: {
-				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 				clear_session: true,
 			},
 		} );
@@ -68,7 +68,7 @@ class API {
 			method: 'POST',
 			path: `${ v1Prefix }/connect/deactivate_and_disconnect`,
 			data: {
-				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
 		} );
 	}
@@ -78,7 +78,7 @@ class API {
 			method: 'POST',
 			path: `${ v1Prefix }/connect/deactivate`,
 			data: {
-				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
 		} );
 	}
@@ -88,7 +88,7 @@ class API {
 			method: 'POST',
 			path: `${ v1Prefix }/connect/disconnect`,
 			data: {
-				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
 		} );
 	}
@@ -98,7 +98,7 @@ class API {
 			method: 'POST',
 			path: `${ v1Prefix }/connect/reconnect`,
 			data: {
-				wp_rest: window?.siteMailerSettingsData?.wpRestNonce,
+				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
 		} );
 	}

From b451dc57165e238d14e148db31048300dc3c148b Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 13:19:57 +0530
Subject: [PATCH 25/65] add: settings provider and connect settings

---
 modules/settings/assets/js/admin.js |  8 +++++++-
 modules/settings/assets/js/app.js   | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js
index 4e51e3a..b950bc1 100644
--- a/modules/settings/assets/js/admin.js
+++ b/modules/settings/assets/js/admin.js
@@ -2,6 +2,8 @@ import { ThemeProvider } from '@elementor/ui/styles';
 import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
 import AdminTopBar from './components/admin-top-bar';
+import { PluginSettingsProvider } from './contexts/plugin-settings-context';
+import { SettingsProvider } from './hooks';
 
 const rootNode = document.getElementById( 'ea11y-app' );
 const topBarNode = document.getElementById( 'ea11y-app-top-bar' );
@@ -21,6 +23,10 @@ topBar.render(
 
 root.render(
 	<AppWrapper>
-		<App />
+		<SettingsProvider>
+			<PluginSettingsProvider>
+				<App />
+			</PluginSettingsProvider>
+		</SettingsProvider>
 	</AppWrapper>,
 );
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 2ca43d1..d9c8caa 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -1,13 +1,23 @@
 import '../css/style.css';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal } from './components';
+import { ConnectModal, Notifications } from './components';
+import { usePluginSettingsContext } from './contexts/plugin-settings-context';
+import { useSettings } from './hooks';
 
 const App = () => {
+	const {
+		isConnected,
+	} = usePluginSettingsContext();
+	const {
+		notificationMessage,
+		notificationType,
+	} = useSettings();
 	return (
 		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
-				<ConnectModal />
+				{ ! isConnected && <ConnectModal /> }
+				<Notifications message={ notificationMessage } type={ notificationType } />
 			</ThemeProvider>
 		</DirectionProvider>
 	);

From d89b521599c263ef57ea930f1ad7f8c9f99eb6ed Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 1 Nov 2024 13:20:14 +0530
Subject: [PATCH 26/65] add: husky

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2ed5569..59821d2 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 		"@wordpress/date": "^5.10.0",
 		"@wordpress/element": "^6.10.0",
 		"@wordpress/i18n": "^5.10.0",
-		"@wordpress/url": "^4.10.0"
+		"@wordpress/url": "^4.10.0",
+		"husky": "^9.1.6"
 	}
 }

From 879b72e4bb9d7b5836f9ceea665f041ef89f197f Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 8 Nov 2024 13:26:54 +0530
Subject: [PATCH 27/65] fix: formatting and text-domain

---
 modules/connect/classes/service.php               |  6 +++---
 modules/connect/rest/authorize.php                |  6 +++---
 modules/connect/rest/switch-domain.php            | 15 ++++++++++-----
 modules/settings/assets/js/app.js                 |  4 +---
 .../assets/js/components/connect-modal/index.js   |  2 +-
 .../assets/js/contexts/plugin-settings-context.js |  2 +-
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/modules/connect/classes/service.php b/modules/connect/classes/service.php
index b38eca9..88180c4 100644
--- a/modules/connect/classes/service.php
+++ b/modules/connect/classes/service.php
@@ -205,7 +205,7 @@ public static function jwt_decode( $payload ): string {
 
 		$jwks_url = Utils::get_jwks_url();
 		if ( ! $jwks_url ) {
-			return __( 'Missing JWKS URL', 'site-mailer' );
+			return __( 'Missing JWKS URL', 'pojo-accessibility' );
 		}
 
 		if ( ! $jwks ) {
@@ -214,9 +214,9 @@ public static function jwt_decode( $payload ): string {
 			]);
 		}
 		if ( ! class_exists( 'JWT' ) ) {
-			require_once SITE_MAILER_PATH . 'vendor/autoload.php';
+			require_once EA11Y_PATH . 'vendor/autoload.php';
 			if ( ! class_exists( 'JWT' ) ) {
-				return __( 'JWT class not found', 'site-mailer' );
+				return __( 'JWT class not found', 'pojo-accessibility' );
 			}
 		}
 
diff --git a/modules/connect/rest/authorize.php b/modules/connect/rest/authorize.php
index 8437861..32b6899 100644
--- a/modules/connect/rest/authorize.php
+++ b/modules/connect/rest/authorize.php
@@ -40,7 +40,7 @@ public function POST( WP_REST_Request $request ) {
 
 		if ( Connect::is_connected() && Utils::is_valid_home_url() ) {
 			return $this->respond_error_json( [
-				'message' => esc_html__( 'You are already connected', 'site-mailer' ),
+				'message' => esc_html__( 'You are already connected', 'pojo-accessibility' ),
 				'code' => 'forbidden',
 			] );
 		}
@@ -57,7 +57,7 @@ public function POST( WP_REST_Request $request ) {
 					Service::update_redirect_uri();
 				} else {
 					return $this->respond_error_json( [
-						'message' => esc_html__( 'Connected domain mismatch', 'site-mailer' ),
+						'message' => esc_html__( 'Connected domain mismatch', 'pojo-accessibility' ),
 						'code'    => 'forbidden',
 					] );
 				}
@@ -65,7 +65,7 @@ public function POST( WP_REST_Request $request ) {
 
 			$authorize_url = Utils::get_authorize_url( $client_id );
 
-			$authorize_url = apply_filters( 'site_mailer_connect_authorize_url', $authorize_url );
+			$authorize_url = apply_filters( 'ea11y_connect_authorize_url', $authorize_url );
 
 			return $this->respond_success_json( $authorize_url );
 		} catch ( Throwable $t ) {
diff --git a/modules/connect/rest/switch-domain.php b/modules/connect/rest/switch-domain.php
index 34f2cc2..d4b54c0 100644
--- a/modules/connect/rest/switch-domain.php
+++ b/modules/connect/rest/switch-domain.php
@@ -1,8 +1,13 @@
 <?php
 
-namespace EA11y\modules\connect\rest;
-
-use EA11y\Modules\Connect\Classes\{Data, Route_Base, Service, Utils};
+namespace EA11y\Modules\Connect\Rest;
+
+use EA11y\Modules\Connect\Classes\{
+	Data, 
+	Route_Base, 
+	Service, 
+	Utils
+};
 use Throwable;
 use WP_REST_Request;
 
@@ -36,14 +41,14 @@ public function POST( WP_REST_Request $request ) {
 
 			if ( ! $client_id ) {
 				return $this->respond_error_json( [
-					'message' => __( 'Client ID not found', 'site-mailer' ),
+					'message' => __( 'Client ID not found', 'pojo-accessibility' ),
 					'code' => 'ignore_error',
 				] );
 			}
 
 			Service::update_redirect_uri();
 
-			return $this->respond_success_json( [ 'message' => __( 'Domain updated!', 'site-mailer' ) ] );
+			return $this->respond_success_json( [ 'message' => __( 'Domain updated!', 'pojo-accessibility' ) ] );
 		} catch ( Throwable $t ) {
 			return $this->respond_error_json( [
 				'message' => $t->getMessage(),
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index d9c8caa..b765bb8 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -6,9 +6,7 @@ import { usePluginSettingsContext } from './contexts/plugin-settings-context';
 import { useSettings } from './hooks';
 
 const App = () => {
-	const {
-		isConnected,
-	} = usePluginSettingsContext();
+	const { isConnected } = usePluginSettingsContext();
 	const {
 		notificationMessage,
 		notificationType,
diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
index d0fe566..3f85e71 100644
--- a/modules/settings/assets/js/components/connect-modal/index.js
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -34,7 +34,7 @@ function ConnectModal() {
 				<Typography variant="subtitle1"
 					marginTop={ 5 }
 					marginBottom={ 3 }>
-					{ __( 'Connect plugin on your site!', 'site-mailer' ) }
+					{ __( 'Connect plugin on your site!', 'pojo-accessibility' ) }
 				</Typography>
 				<Button variant="contained"
 					color="secondary"
diff --git a/modules/settings/assets/js/contexts/plugin-settings-context.js b/modules/settings/assets/js/contexts/plugin-settings-context.js
index 3897052..3285c70 100644
--- a/modules/settings/assets/js/contexts/plugin-settings-context.js
+++ b/modules/settings/assets/js/contexts/plugin-settings-context.js
@@ -19,7 +19,7 @@ export const PluginSettingsProvider = ( { children } ) => {
 			setPluginSettings( settings );
 			setLoaded( true );
 		} ).catch( () => {
-			error( __( 'An error occurred.', 'site-mailer' ) );
+			error( __( 'An error occurred.', 'pojo-accessibility' ) );
 			setLoaded( true );
 		} );
 	}, [] );

From 89e4927cb26c0ec39638cd00ad5684d85c3509bf Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 8 Nov 2024 13:27:16 +0530
Subject: [PATCH 28/65] update: filter names

---
 modules/connect/classes/config.php | 4 ++--
 modules/connect/classes/utils.php  | 2 +-
 modules/connect/module.php         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/connect/classes/config.php b/modules/connect/classes/config.php
index 1c4daa9..e1f565b 100644
--- a/modules/connect/classes/config.php
+++ b/modules/connect/classes/config.php
@@ -12,11 +12,11 @@
 class Config {
 	const APP_NAME = 'once-click-accessibility';
 	const APP_PREFIX = 'ea11y';
-	const APP_REST_NAMESPACE = 'site_mailer';
+	const APP_REST_NAMESPACE = 'ea11y';
 	const BASE_URL = 'https://my.elementor.com/connect';
 	const ADMIN_PAGE = 'accessibility-settings-2';
 	const APP_TYPE = 'app_mailer';
 	const SCOPES = 'openid offline_access';
-	const STATE_NONCE = 'site_mailer_auth_nonce';
+	const STATE_NONCE = 'ea11y_auth_nonce';
 	const CONNECT_MODE = 'site';
 }
diff --git a/modules/connect/classes/utils.php b/modules/connect/classes/utils.php
index 9eb9db1..9edfc19 100644
--- a/modules/connect/classes/utils.php
+++ b/modules/connect/classes/utils.php
@@ -102,7 +102,7 @@ public static function get_clients_patch_url( string $client_id ): string {
 	 * @return string
 	 */
 	public static function get_base_url(): string {
-		return apply_filters( 'site_mailer_connect_get_base_url', Config::BASE_URL );
+		return apply_filters( 'ea11y_connect_get_base_url', Config::BASE_URL );
 	}
 
 	/**
diff --git a/modules/connect/module.php b/modules/connect/module.php
index c226985..657e201 100644
--- a/modules/connect/module.php
+++ b/modules/connect/module.php
@@ -78,7 +78,7 @@ public function authorize_url( $authorize_url ) {
 	public function __construct() {
 		$this->register_components();
 		$this->register_routes();
-		add_filter( 'site_mailer_connect_authorize_url', [ $this, 'authorize_url' ] );
+		add_filter( 'ea11y_connect_authorize_url', [ $this, 'authorize_url' ] );
 	}
 }
 

From a25f125e02e05f685663335e18dc4672ba704900 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 8 Nov 2024 13:27:31 +0530
Subject: [PATCH 29/65] fix: hook import

---
 modules/settings/assets/js/hooks/use-auth.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/settings/assets/js/hooks/use-auth.js b/modules/settings/assets/js/hooks/use-auth.js
index 22ae065..231f62b 100644
--- a/modules/settings/assets/js/hooks/use-auth.js
+++ b/modules/settings/assets/js/hooks/use-auth.js
@@ -1,6 +1,6 @@
 import API from '../api';
 import { UPGRADE_LINK } from '../constants';
-import { usePluginSettingsContext } from '../context/plugin-settings-context';
+import { usePluginSettingsContext } from '../contexts/plugin-settings-context';
 
 const useAuth = () => {
 	const { subscriptionId } = 123;

From 87446dc40ef777331c39f7ef247bbdbedc0c27c3 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 8 Nov 2024 13:27:44 +0530
Subject: [PATCH 30/65] add: set function for settings

---
 modules/settings/classes/settings.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/modules/settings/classes/settings.php b/modules/settings/classes/settings.php
index 44f08b2..1ef1d25 100644
--- a/modules/settings/classes/settings.php
+++ b/modules/settings/classes/settings.php
@@ -22,4 +22,7 @@ public static function get( string $option_name ) {
 				return $data;
 		}
 	}
+	public static function set( string $option_name, $value ): bool {
+		return update_option( $option_name, $value, false );
+	}
 }

From 056464cc303378a70548072b84a9c2e6b54fec4a Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 8 Nov 2024 21:14:28 +0530
Subject: [PATCH 31/65] add: prop-types package

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 59821d2..d14b6c5 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"@wordpress/element": "^6.10.0",
 		"@wordpress/i18n": "^5.10.0",
 		"@wordpress/url": "^4.10.0",
-		"husky": "^9.1.6"
+		"husky": "^9.1.6",
+		"prop-types": "^15.8.1"
 	}
 }

From fc0f8857c96560bbbe2d6787972dcda536e3fd1b Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Sun, 10 Nov 2024 09:33:17 +0530
Subject: [PATCH 32/65] update: refactor notification component and context

---
 modules/settings/assets/js/admin.js           | 14 +++--
 modules/settings/assets/js/app.js             |  7 ++-
 .../js/components/notifications/index.js      |  8 ++-
 .../js/contexts/plugin-settings-context.js    |  2 +-
 modules/settings/assets/js/hooks/index.js     |  5 +-
 .../assets/js/hooks/use-notifications.js      | 55 +++++++++++++++++++
 .../settings/assets/js/hooks/use-settings.js  | 35 +-----------
 7 files changed, 80 insertions(+), 46 deletions(-)
 create mode 100644 modules/settings/assets/js/hooks/use-notifications.js

diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js
index b950bc1..a107d37 100644
--- a/modules/settings/assets/js/admin.js
+++ b/modules/settings/assets/js/admin.js
@@ -3,7 +3,7 @@ import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
 import AdminTopBar from './components/admin-top-bar';
 import { PluginSettingsProvider } from './contexts/plugin-settings-context';
-import { SettingsProvider } from './hooks';
+import { SettingsProvider, NotificationsProvider } from './hooks';
 
 const rootNode = document.getElementById( 'ea11y-app' );
 const topBarNode = document.getElementById( 'ea11y-app-top-bar' );
@@ -23,10 +23,12 @@ topBar.render(
 
 root.render(
 	<AppWrapper>
-		<SettingsProvider>
-			<PluginSettingsProvider>
-				<App />
-			</PluginSettingsProvider>
-		</SettingsProvider>
+		<NotificationsProvider>
+			<SettingsProvider>
+				<PluginSettingsProvider>
+					<App />
+				</PluginSettingsProvider>
+			</SettingsProvider>
+		</NotificationsProvider>
 	</AppWrapper>,
 );
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index b765bb8..e3d93e0 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -3,16 +3,17 @@ import DirectionProvider from '@elementor/ui/DirectionProvider';
 import { ThemeProvider } from '@elementor/ui/styles';
 import { ConnectModal, Notifications } from './components';
 import { usePluginSettingsContext } from './contexts/plugin-settings-context';
-import { useSettings } from './hooks';
+import { useNotificationSettings } from './hooks';
 
 const App = () => {
 	const { isConnected } = usePluginSettingsContext();
 	const {
 		notificationMessage,
 		notificationType,
-	} = useSettings();
+	} = useNotificationSettings();
+
 	return (
-		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
+		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
 				{ ! isConnected && <ConnectModal /> }
 				<Notifications message={ notificationMessage } type={ notificationType } />
diff --git a/modules/settings/assets/js/components/notifications/index.js b/modules/settings/assets/js/components/notifications/index.js
index 96c0b0a..367ee78 100644
--- a/modules/settings/assets/js/components/notifications/index.js
+++ b/modules/settings/assets/js/components/notifications/index.js
@@ -1,6 +1,6 @@
 import Alert from '@elementor/ui/Alert';
 import Snackbar from '@elementor/ui/Snackbar';
-import { useSettings } from '../../hooks';
+import { useNotificationSettings } from '../../hooks';
 
 const Notifications = ( { type, message } ) => {
 	const {
@@ -8,7 +8,7 @@ const Notifications = ( { type, message } ) => {
 		setShowNotification,
 		setNotificationMessage,
 		setNotificationType,
-	} = useSettings();
+	} = useNotificationSettings();
 
 	const closeNotification = () => {
 		setShowNotification( ! showNotification );
@@ -24,7 +24,9 @@ const Notifications = ( { type, message } ) => {
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 			sx={ { zIndex: 99999 } }
 		>
-			<Alert onClose={ () => setShowNotification( ! showNotification ) } severity={ type } variant="filled" >
+			<Alert onClose={ () => setShowNotification( ! showNotification ) }
+				severity={ type }
+				variant="filled" >
 				{ message }
 			</Alert>
 		</Snackbar>
diff --git a/modules/settings/assets/js/contexts/plugin-settings-context.js b/modules/settings/assets/js/contexts/plugin-settings-context.js
index 3285c70..54d028f 100644
--- a/modules/settings/assets/js/contexts/plugin-settings-context.js
+++ b/modules/settings/assets/js/contexts/plugin-settings-context.js
@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import API from '../api';
-import { useToastNotification } from '../hooks/use-settings';
+import { useToastNotification } from '../hooks';
 
 const PluginSettingsContext = createContext( {} );
 
diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
index 6bbb8ca..b1bb5f9 100644
--- a/modules/settings/assets/js/hooks/index.js
+++ b/modules/settings/assets/js/hooks/index.js
@@ -1,6 +1,9 @@
 export { default as useAuth } from './use-auth';
 export { default as useModal } from './use-modal';
 export { useSettings } from './use-settings';
-export { useToastNotification } from './use-settings';
 export { default as SettingsProvider } from './use-settings';
 export { default as useStorage } from './use-storage';
+export { useToastNotification } from './use-notifications';
+export { default as NotificationsProvider } from './use-notifications';
+export { useNotificationSettings } from './use-notifications';
+
diff --git a/modules/settings/assets/js/hooks/use-notifications.js b/modules/settings/assets/js/hooks/use-notifications.js
new file mode 100644
index 0000000..dcec1d8
--- /dev/null
+++ b/modules/settings/assets/js/hooks/use-notifications.js
@@ -0,0 +1,55 @@
+import { useState, createContext, useContext } from '@wordpress/element';
+
+const NotificationsContext = createContext( undefined );
+
+export function useNotificationSettings() {
+	return useContext( NotificationsContext );
+}
+
+export const NotificationsProvider = ( { children } ) => {
+	const [ showNotification, setShowNotification ] = useState( false );
+	const [ notificationMessage, setNotificationMessage ] = useState( '' );
+	const [ notificationType, setNotificationType ] = useState( '' );
+
+	return (
+		<NotificationsContext.Provider
+			value={ {
+				showNotification,
+				setShowNotification,
+				notificationMessage,
+				setNotificationMessage,
+				notificationType,
+				setNotificationType,
+			} }
+		>
+			{ children }
+		</NotificationsContext.Provider>
+	);
+};
+
+export const useToastNotification = () => {
+	const {
+		setNotificationMessage,
+		setNotificationType,
+		setShowNotification,
+	} = useContext( NotificationsContext );
+
+	const error = ( message ) => {
+		setNotificationMessage( message );
+		setNotificationType( 'error' );
+		setShowNotification( true );
+	};
+
+	const success = ( message ) => {
+		setNotificationMessage( message );
+		setNotificationType( 'success' );
+		setShowNotification( true );
+	};
+
+	return {
+		success,
+		error,
+	};
+};
+
+export default NotificationsProvider;
diff --git a/modules/settings/assets/js/hooks/use-settings.js b/modules/settings/assets/js/hooks/use-settings.js
index 1578ec8..8d36d93 100644
--- a/modules/settings/assets/js/hooks/use-settings.js
+++ b/modules/settings/assets/js/hooks/use-settings.js
@@ -10,20 +10,12 @@ export function useSettings() {
 }
 
 const SettingsProvider = ( { children } ) => {
-	// Notification
-	const [ showNotification, setShowNotification ] = useState( false );
-	const [ notificationMessage, setNotificationMessage ] = useState( '' );
-	const [ notificationType, setNotificationType ] = useState( '' );
-
+	const [ test, setTest ] = useState( 'Test' );
 	return (
 		<SettingsContext.Provider
 			value={ {
-				showNotification,
-				setShowNotification,
-				notificationMessage,
-				setNotificationMessage,
-				notificationType,
-				setNotificationType,
+				test,
+				setTest,
 			} }
 		>
 			{ children }
@@ -31,25 +23,4 @@ const SettingsProvider = ( { children } ) => {
 	);
 };
 
-export const useToastNotification = () => {
-	const { setNotificationMessage, setNotificationType, setShowNotification } = useContext( SettingsContext );
-
-	const error = ( message ) => {
-		setNotificationMessage( message );
-		setNotificationType( 'error' );
-		setShowNotification( true );
-	};
-
-	const success = ( message ) => {
-		setNotificationMessage( message );
-		setNotificationType( 'success' );
-		setShowNotification( true );
-	};
-
-	return {
-		success,
-		error,
-	};
-};
-
 export default SettingsProvider;

From e01148b4c09419596a1cf87a2466473b2a6592a5 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 11 Nov 2024 10:04:41 +0530
Subject: [PATCH 33/65] update: remove filter for authorize url

---
 modules/connect/module.php | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/modules/connect/module.php b/modules/connect/module.php
index 657e201..3c38df3 100644
--- a/modules/connect/module.php
+++ b/modules/connect/module.php
@@ -54,31 +54,9 @@ public static function is_connected() : bool {
 		return ! ! Data::get_access_token() && Utils::is_valid_home_url();
 	}
 
-	public function authorize_url( $authorize_url ) {
-		$utm_params = [];
-
-		$sm_campaign = get_transient( 'elementor_site_mailer_campaign' );
-		if ( false === $sm_campaign ) {
-			return $authorize_url;
-		}
-
-		foreach ( [ 'source', 'medium', 'campaign' ] as $key ) {
-			if ( ! empty( $sm_campaign[ $key ] ) ) {
-				$utm_params[ 'utm_' . $key ] = $sm_campaign[ $key ];
-			}
-		}
-
-		if ( ! empty( $utm_params ) ) {
-			$authorize_url = add_query_arg( $utm_params, $authorize_url );
-		}
-
-		return $authorize_url;
-	}
-
 	public function __construct() {
 		$this->register_components();
 		$this->register_routes();
-		add_filter( 'ea11y_connect_authorize_url', [ $this, 'authorize_url' ] );
 	}
 }
 

From d0f812615c0db931a59543f3f08e2a6a7c644c79 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 11 Nov 2024 13:36:48 +0530
Subject: [PATCH 34/65] update: imports and exports of hooks

---
 modules/settings/assets/js/hooks/index.js             | 11 +++++------
 modules/settings/assets/js/hooks/use-auth.js          |  4 +---
 modules/settings/assets/js/hooks/use-modal.js         |  4 +---
 modules/settings/assets/js/hooks/use-notifications.js |  2 --
 modules/settings/assets/js/hooks/use-settings.js      |  4 +---
 modules/settings/assets/js/hooks/use-storage.js       |  4 +---
 6 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
index b1bb5f9..1ae75e2 100644
--- a/modules/settings/assets/js/hooks/index.js
+++ b/modules/settings/assets/js/hooks/index.js
@@ -1,9 +1,8 @@
-export { default as useAuth } from './use-auth';
-export { default as useModal } from './use-modal';
+export { useAuth } from './use-auth';
+export { useModal } from './use-modal';
 export { useSettings } from './use-settings';
-export { default as SettingsProvider } from './use-settings';
-export { default as useStorage } from './use-storage';
+export { SettingsProvider } from './use-settings';
+export { useStorage } from './use-storage';
 export { useToastNotification } from './use-notifications';
-export { default as NotificationsProvider } from './use-notifications';
+export { NotificationsProvider } from './use-notifications';
 export { useNotificationSettings } from './use-notifications';
-
diff --git a/modules/settings/assets/js/hooks/use-auth.js b/modules/settings/assets/js/hooks/use-auth.js
index 231f62b..b46c7ce 100644
--- a/modules/settings/assets/js/hooks/use-auth.js
+++ b/modules/settings/assets/js/hooks/use-auth.js
@@ -2,7 +2,7 @@ import API from '../api';
 import { UPGRADE_LINK } from '../constants';
 import { usePluginSettingsContext } from '../contexts/plugin-settings-context';
 
-const useAuth = () => {
+export const useAuth = () => {
 	const { subscriptionId } = 123;
 
 	const redirectToConnect = async () => {
@@ -29,5 +29,3 @@ const useAuth = () => {
 		getUpgradeLink,
 	};
 };
-
-export default useAuth;
diff --git a/modules/settings/assets/js/hooks/use-modal.js b/modules/settings/assets/js/hooks/use-modal.js
index 6ae362b..19aaaaf 100644
--- a/modules/settings/assets/js/hooks/use-modal.js
+++ b/modules/settings/assets/js/hooks/use-modal.js
@@ -1,6 +1,6 @@
 import { useState } from '@wordpress/element';
 
-const useModal = ( defaultIsOpen = true ) => {
+export const useModal = ( defaultIsOpen = true ) => {
 	const [ isOpen, setIsOpen ] = useState( defaultIsOpen );
 
 	const open = () => {
@@ -18,5 +18,3 @@ const useModal = ( defaultIsOpen = true ) => {
 		close,
 	};
 };
-
-export default useModal;
diff --git a/modules/settings/assets/js/hooks/use-notifications.js b/modules/settings/assets/js/hooks/use-notifications.js
index dcec1d8..0ea7558 100644
--- a/modules/settings/assets/js/hooks/use-notifications.js
+++ b/modules/settings/assets/js/hooks/use-notifications.js
@@ -51,5 +51,3 @@ export const useToastNotification = () => {
 		error,
 	};
 };
-
-export default NotificationsProvider;
diff --git a/modules/settings/assets/js/hooks/use-settings.js b/modules/settings/assets/js/hooks/use-settings.js
index 8d36d93..69d5a77 100644
--- a/modules/settings/assets/js/hooks/use-settings.js
+++ b/modules/settings/assets/js/hooks/use-settings.js
@@ -9,7 +9,7 @@ export function useSettings() {
 	return useContext( SettingsContext );
 }
 
-const SettingsProvider = ( { children } ) => {
+export const SettingsProvider = ( { children } ) => {
 	const [ test, setTest ] = useState( 'Test' );
 	return (
 		<SettingsContext.Provider
@@ -22,5 +22,3 @@ const SettingsProvider = ( { children } ) => {
 		</SettingsContext.Provider>
 	);
 };
-
-export default SettingsProvider;
diff --git a/modules/settings/assets/js/hooks/use-storage.js b/modules/settings/assets/js/hooks/use-storage.js
index 717ebd3..2377512 100644
--- a/modules/settings/assets/js/hooks/use-storage.js
+++ b/modules/settings/assets/js/hooks/use-storage.js
@@ -1,7 +1,7 @@
 import { store as coreDataStore } from '@wordpress/core-data';
 import { dispatch } from '@wordpress/data';
 
-const useStorage = () => {
+export const useStorage = () => {
 	const save = async ( data ) => {
 		return await dispatch( coreDataStore ).saveEntityRecord( 'root', 'site', data );
 	};
@@ -10,5 +10,3 @@ const useStorage = () => {
 		save,
 	};
 };
-
-export default useStorage;

From 4b565359b1fb096c5e17a625168b0cbe7df346f4 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 11 Nov 2024 13:38:08 +0530
Subject: [PATCH 35/65] update: plugin settings context filename and relevant
 imports

---
 modules/settings/assets/js/admin.js                             | 2 +-
 modules/settings/assets/js/app.js                               | 2 +-
 .../contexts/{plugin-settings-context.js => plugin-settings.js} | 0
 modules/settings/assets/js/hooks/use-auth.js                    | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename modules/settings/assets/js/contexts/{plugin-settings-context.js => plugin-settings.js} (100%)

diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js
index a107d37..a40129e 100644
--- a/modules/settings/assets/js/admin.js
+++ b/modules/settings/assets/js/admin.js
@@ -2,7 +2,7 @@ import { ThemeProvider } from '@elementor/ui/styles';
 import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
 import AdminTopBar from './components/admin-top-bar';
-import { PluginSettingsProvider } from './contexts/plugin-settings-context';
+import { PluginSettingsProvider } from './contexts/plugin-settings';
 import { SettingsProvider, NotificationsProvider } from './hooks';
 
 const rootNode = document.getElementById( 'ea11y-app' );
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index e3d93e0..83ba765 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -2,7 +2,7 @@ import '../css/style.css';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import { ThemeProvider } from '@elementor/ui/styles';
 import { ConnectModal, Notifications } from './components';
-import { usePluginSettingsContext } from './contexts/plugin-settings-context';
+import { usePluginSettingsContext } from './contexts/plugin-settings';
 import { useNotificationSettings } from './hooks';
 
 const App = () => {
diff --git a/modules/settings/assets/js/contexts/plugin-settings-context.js b/modules/settings/assets/js/contexts/plugin-settings.js
similarity index 100%
rename from modules/settings/assets/js/contexts/plugin-settings-context.js
rename to modules/settings/assets/js/contexts/plugin-settings.js
diff --git a/modules/settings/assets/js/hooks/use-auth.js b/modules/settings/assets/js/hooks/use-auth.js
index b46c7ce..65c0fc5 100644
--- a/modules/settings/assets/js/hooks/use-auth.js
+++ b/modules/settings/assets/js/hooks/use-auth.js
@@ -1,6 +1,6 @@
 import API from '../api';
 import { UPGRADE_LINK } from '../constants';
-import { usePluginSettingsContext } from '../contexts/plugin-settings-context';
+import { usePluginSettingsContext } from '../contexts/plugin-settings';
 
 export const useAuth = () => {
 	const { subscriptionId } = 123;

From 511c99cce17801f856533509afb952ec033fda1c Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Wed, 13 Nov 2024 13:54:55 +0530
Subject: [PATCH 36/65] update: icons and icon imports

---
 .../assets/js/components/admin-top-bar/index.js   | 14 ++++++++++----
 .../settings/assets/js/icons/elementor-logo.js    |  7 +++----
 modules/settings/assets/js/icons/index.js         |  2 ++
 .../js/icons/square-rounded-chevrons-left.js      | 15 +++++++++++++++
 4 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 modules/settings/assets/js/icons/index.js
 create mode 100644 modules/settings/assets/js/icons/square-rounded-chevrons-left.js

diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
index b789079..ccdc7a2 100644
--- a/modules/settings/assets/js/components/admin-top-bar/index.js
+++ b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -6,13 +6,19 @@ import Toolbar from '@elementor/ui/Toolbar';
 import Typography from '@elementor/ui/Typography';
 import { __ } from '@wordpress/i18n';
 import { HELP_LINK } from '../../constants';
-import ElementorLogo from '../../icons/elementor-logo';
+import { ElementorLogo } from '../../icons';
 
 const AdminTopBar = () => {
 	return (
-		<AppBar position="static" elevation={ 6 } sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
-			<Toolbar direction="row" sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } } padding={ 2 }>
-				<Grid container={ true } alignItems="center" gap={ 1 }>
+		<AppBar position="static"
+			elevation={ 6 }
+			sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
+			<Toolbar direction="row"
+				sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } }
+				padding={ 2 }>
+				<Grid container={ true }
+					alignItems="center"
+					gap={ 1 }>
 					<ElementorLogo size="large" />
 					<Typography color="text.primary">
 						{ __( 'Accessibility', 'pojo-accessibility' ) }
diff --git a/modules/settings/assets/js/icons/elementor-logo.js b/modules/settings/assets/js/icons/elementor-logo.js
index cc62ff4..fbcf468 100644
--- a/modules/settings/assets/js/icons/elementor-logo.js
+++ b/modules/settings/assets/js/icons/elementor-logo.js
@@ -1,10 +1,11 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
 
-const ElementorLogo = ( { size } ) => {
+export const ElementorLogo = ( { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 24 24" fontSize={ size }>
 			<g clipPath="url(#a)">
-				<path fill="#0C0D0E" fillRule="evenodd"
+				<path fill="#0C0D0E"
+					fillRule="evenodd"
 					d="M2.022 18.667A12 12 0 1 1 21.977 5.333 12 12 0 0 1 2.022 18.667ZM9 7H7v10h2V7Zm8 0h-6v2h6V7Zm0 3.999h-6v2h6v-2ZM17 15h-6v2h6v-2Z"
 					clipRule="evenodd" />
 			</g>
@@ -17,5 +18,3 @@ const ElementorLogo = ( { size } ) => {
 		</SvgIcon>
 	);
 };
-
-export default ElementorLogo;
diff --git a/modules/settings/assets/js/icons/index.js b/modules/settings/assets/js/icons/index.js
new file mode 100644
index 0000000..d683d1c
--- /dev/null
+++ b/modules/settings/assets/js/icons/index.js
@@ -0,0 +1,2 @@
+export { ElementorLogo } from './elementor-logo';
+export { SquareRoundedChevronsLeft } from './square-rounded-chevrons-left';
diff --git a/modules/settings/assets/js/icons/square-rounded-chevrons-left.js b/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
new file mode 100644
index 0000000..6cbbed1
--- /dev/null
+++ b/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
@@ -0,0 +1,15 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+export const SquareRoundedChevronsLeft = ( props, { size } ) => {
+	return (
+		<SvgIcon viewBox="0 0 24 24"
+			fontSize={ size }
+			sx={ { ...props.sx } }
+			{ ...props }>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M5.33033 5.33033C4.21884 6.44182 3.75 8.39464 3.75 12C3.75 15.6054 4.21884 17.5582 5.33033 18.6697C6.44182 19.7812 8.39464 20.25 12 20.25C15.6054 20.25 17.5582 19.7812 18.6697 18.6697C19.7812 17.5582 20.25 15.6054 20.25 12C20.25 8.39464 19.7812 6.44182 18.6697 5.33033C17.5582 4.21884 15.6054 3.75 12 3.75C8.39464 3.75 6.44182 4.21884 5.33033 5.33033ZM4.26967 4.26967C5.85818 2.68116 8.40536 2.25 12 2.25C15.5946 2.25 18.1418 2.68116 19.7303 4.26967C21.3188 5.85818 21.75 8.40536 21.75 12C21.75 15.5946 21.3188 18.1418 19.7303 19.7303C18.1418 21.3188 15.5946 21.75 12 21.75C8.40536 21.75 5.85818 21.3188 4.26967 19.7303C2.68116 18.1418 2.25 15.5946 2.25 12C2.25 8.40536 2.68116 5.85818 4.26967 4.26967ZM11.5303 8.46967C11.8232 8.76256 11.8232 9.23744 11.5303 9.53033L9.06066 12L11.5303 14.4697C11.8232 14.7626 11.8232 15.2374 11.5303 15.5303C11.2374 15.8232 10.7626 15.8232 10.4697 15.5303L7.46967 12.5303C7.17678 12.2374 7.17678 11.7626 7.46967 11.4697L10.4697 8.46967C10.7626 8.17678 11.2374 8.17678 11.5303 8.46967ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L11.4697 12.5303C11.1768 12.2374 11.1768 11.7626 11.4697 11.4697L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z" />
+		</SvgIcon>
+	);
+};

From 1592e4f128aac9a7e68a0acf663417311ed2ec61 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Wed, 13 Nov 2024 13:55:33 +0530
Subject: [PATCH 37/65] add: sidebar(wip)

---
 modules/settings/assets/js/admin.js           |   6 -
 modules/settings/assets/js/app.js             |  10 +-
 modules/settings/assets/js/layouts/sidebar.js | 110 ++++++++++++++++++
 3 files changed, 119 insertions(+), 7 deletions(-)
 create mode 100644 modules/settings/assets/js/layouts/sidebar.js

diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js
index a40129e..bdcb911 100644
--- a/modules/settings/assets/js/admin.js
+++ b/modules/settings/assets/js/admin.js
@@ -15,12 +15,6 @@ const AppWrapper = Boolean( isDevelopment ) ? StrictMode : Fragment;
 const root = createRoot( rootNode );
 const topBar = createRoot( topBarNode );
 
-topBar.render(
-	<ThemeProvider colorScheme="light">
-		<AdminTopBar />
-	</ThemeProvider>,
-);
-
 root.render(
 	<AppWrapper>
 		<NotificationsProvider>
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 83ba765..61a4850 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -1,9 +1,12 @@
 import '../css/style.css';
+import Container from '@elementor/ui/Container';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
+import Grid from '@elementor/ui/Grid';
 import { ThemeProvider } from '@elementor/ui/styles';
 import { ConnectModal, Notifications } from './components';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
 import { useNotificationSettings } from './hooks';
+import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
 	const { isConnected } = usePluginSettingsContext();
@@ -15,7 +18,12 @@ const App = () => {
 	return (
 		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
-				{ ! isConnected && <ConnectModal /> }
+				{ isConnected && <ConnectModal /> }
+				<Grid display="flex"
+					flexDirection="row">
+					<Sidebar />
+					<Container>Page Content</Container>
+				</Grid>
 				<Notifications message={ notificationMessage } type={ notificationType } />
 			</ThemeProvider>
 		</DirectionProvider>
diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
new file mode 100644
index 0000000..19f402e
--- /dev/null
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -0,0 +1,110 @@
+import { CheckedCircleIcon, ChevronDownIcon, PagesIcon, UserIcon } from '@elementor/icons';
+import AppBar from '@elementor/ui/AppBar';
+import Box from '@elementor/ui/Box';
+import Container from '@elementor/ui/Container';
+import Drawer from '@elementor/ui/Drawer';
+import Grid from '@elementor/ui/Grid';
+import IconButton from '@elementor/ui/IconButton';
+import List from '@elementor/ui/List';
+import ListItem from '@elementor/ui/ListItem';
+import ListItemButton from '@elementor/ui/ListItemButton';
+import ListItemIcon from '@elementor/ui/ListItemIcon';
+import ListItemText from '@elementor/ui/ListItemText';
+import Paper from '@elementor/ui/Paper';
+import Toolbar from '@elementor/ui/Toolbar';
+import Typography from '@elementor/ui/Typography';
+import { styled } from '@elementor/ui/styles';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { ElementorLogo, SquareRoundedChevronsLeft } from '../icons';
+
+export const Sidebar = () => {
+	const [ showWidgetMenu, setShowWidgetMenu ] = useState( true );
+	const [ openDrawer, setOpenDrawer ] = useState( true );
+
+	const StyledDrawer = styled( Drawer )
+	` & .MuiDrawer-paper {
+    margin-left: 160px;
+    margin-top: 30px;
+    min-width: 80px;
+    max-width: 260px;
+    width: ${ openDrawer ? '100%' : '0' }px;
+    transition: all 0.3s;
+}`;
+
+	return (
+		<StyledDrawer variant="permanent"
+			open={ openDrawer }
+		>
+			<Box>
+				<AppBar position="static" color="transparent" >
+					<Toolbar disableGutters>
+						<Box display="flex"
+							alignItems="center"
+							justifyContent="center"
+							p={ 1 }>
+							<ElementorLogo />
+							<Typography variant="h6"
+								marginLeft={ 1 }
+								display={ ! openDrawer ? 'none' : 'inherit' }>
+								{ __( 'Accessibility', 'pojo-accessibility' ) }
+							</Typography>
+						</Box>
+						<IconButton color="inherit" onClick={ () => setOpenDrawer( ! openDrawer ) }>
+							<SquareRoundedChevronsLeft sx={ { rotate: ! openDrawer ? '180deg' : '0' } } />
+						</IconButton>
+					</Toolbar>
+				</AppBar>
+				<List>
+					<ListItem disableGutters>
+						<ListItemButton onClick={ () => setShowWidgetMenu( ! showWidgetMenu ) }>
+							<ListItemIcon>
+								<CheckedCircleIcon />
+							</ListItemIcon>
+							<ListItemText primary="Widget" hidden={ ! openDrawer } />
+							<ListItemIcon>
+								<ChevronDownIcon />
+							</ListItemIcon>
+						</ListItemButton>
+					</ListItem>
+					{
+						showWidgetMenu && (
+							<>
+								<ListItem sx={ { py: 0 } } hidden={ ! openDrawer }>
+									<ListItemButton sx={ { py: 0 } } hidden={ ! openDrawer }>
+										<ListItemText primary="Icon Settings" hidden={ ! openDrawer } />
+									</ListItemButton>
+								</ListItem>
+								<ListItem sx={ { py: 0 } } hidden={ ! openDrawer }>
+									<ListItemButton sx={ { py: 0 } } hidden={ ! openDrawer }>
+										<ListItemText primary="Menu" hidden={ ! openDrawer } />
+									</ListItemButton>
+								</ListItem>
+							</>
+						) }
+					<ListItem disableGutters>
+						<ListItemButton >
+							<ListItemIcon>
+								<PagesIcon />
+							</ListItemIcon>
+							<ListItemText primary="Accessibility Statement" hidden={ ! openDrawer } />
+						</ListItemButton>
+					</ListItem>
+				</List>
+				<List sx={ { position: 'absolute', bottom: 0 } }>
+					<ListItem>
+						<ListItemButton>
+							<ListItemIcon>
+								<UserIcon />
+							</ListItemIcon>
+							<ListItemText primary="My Account" hidden={ ! openDrawer } />
+							<ListItemIcon>
+								<ChevronDownIcon />
+							</ListItemIcon>
+						</ListItemButton>
+					</ListItem>
+				</List>
+			</Box>
+		</StyledDrawer>
+	);
+};

From aeb12f2da904a5b1142e6676fb996e6b4abffaed Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Wed, 13 Nov 2024 13:55:49 +0530
Subject: [PATCH 38/65] update: fix width of connect screen on mobile

---
 modules/settings/assets/js/components/connect-modal/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
index 3f85e71..2159b49 100644
--- a/modules/settings/assets/js/components/connect-modal/index.js
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -23,6 +23,7 @@ function ConnectModal() {
 					left: '50%',
 					transform: 'translate(-50%, -50%)',
 					width: 600,
+					maxWidth: '95%',
 					height: 400,
 					bgcolor: 'background.paper',
 					boxShadow: 24,

From f39d57d87c586df99257410e3e96937da136b51b Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Thu, 14 Nov 2024 11:52:35 +0530
Subject: [PATCH 39/65] update: sidebar layout

---
 modules/settings/assets/js/app.js             |  2 +-
 modules/settings/assets/js/icons/index.js     |  1 +
 modules/settings/assets/js/icons/widget.js    | 30 ++++++++++
 modules/settings/assets/js/layouts/sidebar.js | 57 ++++++++++++-------
 4 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 modules/settings/assets/js/icons/widget.js

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 61a4850..399490c 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -18,7 +18,7 @@ const App = () => {
 	return (
 		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
-				{ isConnected && <ConnectModal /> }
+				{ ! isConnected && <ConnectModal /> }
 				<Grid display="flex"
 					flexDirection="row">
 					<Sidebar />
diff --git a/modules/settings/assets/js/icons/index.js b/modules/settings/assets/js/icons/index.js
index d683d1c..85e89e2 100644
--- a/modules/settings/assets/js/icons/index.js
+++ b/modules/settings/assets/js/icons/index.js
@@ -1,2 +1,3 @@
 export { ElementorLogo } from './elementor-logo';
 export { SquareRoundedChevronsLeft } from './square-rounded-chevrons-left';
+export { WidgetIcon } from './widget';
diff --git a/modules/settings/assets/js/icons/widget.js b/modules/settings/assets/js/icons/widget.js
new file mode 100644
index 0000000..95455e8
--- /dev/null
+++ b/modules/settings/assets/js/icons/widget.js
@@ -0,0 +1,30 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+export const WidgetIcon = ( { size } ) => {
+	return (
+		<SvgIcon viewBox="0 0 20 20" fontSize={ size }>
+			<g id="widget">
+				<path id="Vector"
+					d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
+					fill="white"
+					stroke="black"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round" />
+				<path id="Vector_2"
+					d="M8.33333 13.75L10 11.25M10 11.25L11.6667 13.75M10 11.25V9.58333M10 9.58333L12.5 8.75M10 9.58333L7.5 8.75"
+					stroke="black"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round" />
+				<path id="Vector_3"
+					d="M9.9987 6.66683C10.2288 6.66683 10.4154 6.48028 10.4154 6.25016C10.4154 6.02004 10.2288 5.8335 9.9987 5.8335C9.76858 5.8335 9.58203 6.02004 9.58203 6.25016C9.58203 6.48028 9.76858 6.66683 9.9987 6.66683Z"
+					fill="black"
+					stroke="black"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round" />
+			</g>
+		</SvgIcon>
+	);
+};
diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
index 19f402e..b28429f 100644
--- a/modules/settings/assets/js/layouts/sidebar.js
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -11,25 +11,28 @@ import ListItemButton from '@elementor/ui/ListItemButton';
 import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
 import Paper from '@elementor/ui/Paper';
+import Popover from '@elementor/ui/Popover';
 import Toolbar from '@elementor/ui/Toolbar';
 import Typography from '@elementor/ui/Typography';
 import { styled } from '@elementor/ui/styles';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { ElementorLogo, SquareRoundedChevronsLeft } from '../icons';
+import { ElementorLogo, SquareRoundedChevronsLeft, WidgetIcon } from '../icons';
 
 export const Sidebar = () => {
 	const [ showWidgetMenu, setShowWidgetMenu ] = useState( true );
 	const [ openDrawer, setOpenDrawer ] = useState( true );
+	const [ openMyAccountMenu, setOpenMyAccountMenu ] = useState( false );
+	const anchorEl = useRef( null );
 
 	const StyledDrawer = styled( Drawer )
 	` & .MuiDrawer-paper {
-    margin-left: 160px;
-    margin-top: 30px;
-    min-width: 80px;
-    max-width: 260px;
-    width: ${ openDrawer ? '100%' : '0' }px;
-    transition: all 0.3s;
+		position: static;
+    	min-width: 90px;
+    	max-width: 260px;
+    	width: ${ openDrawer ? '100%' : '0' }px;
+    	transition: all 0.3s;
+		height: 600px;
 }`;
 
 	return (
@@ -38,7 +41,7 @@ export const Sidebar = () => {
 		>
 			<Box>
 				<AppBar position="static" color="transparent" >
-					<Toolbar disableGutters>
+					<Toolbar disableGutters sx={ { justifyContent: 'space-between' } } >
 						<Box display="flex"
 							alignItems="center"
 							justifyContent="center"
@@ -57,13 +60,13 @@ export const Sidebar = () => {
 				</AppBar>
 				<List>
 					<ListItem disableGutters>
-						<ListItemButton onClick={ () => setShowWidgetMenu( ! showWidgetMenu ) }>
+						<ListItemButton onClick={ () => setShowWidgetMenu( ! showWidgetMenu ) } sx={ { justifyContent: 'center' } } >
 							<ListItemIcon>
-								<CheckedCircleIcon />
+								<WidgetIcon />
 							</ListItemIcon>
 							<ListItemText primary="Widget" hidden={ ! openDrawer } />
-							<ListItemIcon>
-								<ChevronDownIcon />
+							<ListItemIcon sx={ { display: ! openDrawer ? 'none' : 'default' } }>
+								<ChevronDownIcon sx={ { rotate: showWidgetMenu ? '180deg' : '0' } } />
 							</ListItemIcon>
 						</ListItemButton>
 					</ListItem>
@@ -83,25 +86,41 @@ export const Sidebar = () => {
 							</>
 						) }
 					<ListItem disableGutters>
-						<ListItemButton >
+						<ListItemButton sx={ { justifyContent: 'center' } }>
 							<ListItemIcon>
-								<PagesIcon />
+								<PagesIcon sx={ { color: 'common.black' } } />
 							</ListItemIcon>
 							<ListItemText primary="Accessibility Statement" hidden={ ! openDrawer } />
 						</ListItemButton>
 					</ListItem>
 				</List>
-				<List sx={ { position: 'absolute', bottom: 0 } }>
+				<List sx={ { position: 'absolute', bottom: 0 } } ref={ anchorEl } >
 					<ListItem>
-						<ListItemButton>
+						<ListItemButton onClick={ () => setOpenMyAccountMenu( ! openMyAccountMenu ) }>
 							<ListItemIcon>
 								<UserIcon />
 							</ListItemIcon>
-							<ListItemText primary="My Account" hidden={ ! openDrawer } />
+							<ListItemText primary="My Account"
+								hidden={ ! openDrawer } />
 							<ListItemIcon>
-								<ChevronDownIcon />
+								<ChevronDownIcon sx={ { rotate: '180deg', display: ! openDrawer ? 'none' : 'inherit' } } />
 							</ListItemIcon>
 						</ListItemButton>
+						<Popover
+							open={ openMyAccountMenu }
+							anchorOrigin={ {
+								vertical: 'bottom',
+								horizontal: 'left',
+							} }
+							transformOrigin={ {
+								vertical: 'top',
+								horizontal: 'left',
+							} }
+							anchorEl={ anchorEl.current }
+							hideBackdrop={ true }
+							anchorReference="anchorEl">
+							Testing
+						</Popover>
 					</ListItem>
 				</List>
 			</Box>

From 4ef1c7fba01834593bb80f6110ed61567d13e98f Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Thu, 14 Nov 2024 19:10:17 +0530
Subject: [PATCH 40/65] add: credit card and user arrow icons

---
 .../settings/assets/js/icons/credit-card.js   | 14 ++++++++++++++
 modules/settings/assets/js/icons/index.js     |  2 ++
 .../settings/assets/js/icons/user-arrow.js    | 19 +++++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 modules/settings/assets/js/icons/credit-card.js
 create mode 100644 modules/settings/assets/js/icons/user-arrow.js

diff --git a/modules/settings/assets/js/icons/credit-card.js b/modules/settings/assets/js/icons/credit-card.js
new file mode 100644
index 0000000..a795dc3
--- /dev/null
+++ b/modules/settings/assets/js/icons/credit-card.js
@@ -0,0 +1,14 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+export const CreditCardIcon = ( props, { size } ) => {
+	return (
+		<SvgIcon viewBox="0 0 20 20"
+			fontSize={ size }
+			{ ...props }>
+			<path fillRule="evenodd"
+				clipRule="evenodd"
+				d="M5 4.79163C3.96447 4.79163 3.125 5.63109 3.125 6.66663V7.70829H16.875V6.66663C16.875 5.63109 16.0355 4.79163 15 4.79163H5ZM18.125 6.66663C18.125 4.94074 16.7259 3.54163 15 3.54163H5C3.27411 3.54163 1.875 4.94074 1.875 6.66663V13.3333C1.875 15.0592 3.27411 16.4583 5 16.4583H15C16.7259 16.4583 18.125 15.0592 18.125 13.3333V6.66663ZM16.875 8.95829H3.125V13.3333C3.125 14.3688 3.96447 15.2083 5 15.2083H15C16.0355 15.2083 16.875 14.3688 16.875 13.3333V8.95829ZM5.20833 12.5C5.20833 12.1548 5.48816 11.875 5.83333 11.875H5.84167C6.18684 11.875 6.46667 12.1548 6.46667 12.5C6.46667 12.8451 6.18684 13.125 5.84167 13.125H5.83333C5.48816 13.125 5.20833 12.8451 5.20833 12.5ZM8.54167 12.5C8.54167 12.1548 8.82149 11.875 9.16667 11.875H10.8333C11.1785 11.875 11.4583 12.1548 11.4583 12.5C11.4583 12.8451 11.1785 13.125 10.8333 13.125H9.16667C8.82149 13.125 8.54167 12.8451 8.54167 12.5Z" />
+
+		</SvgIcon>
+	);
+};
diff --git a/modules/settings/assets/js/icons/index.js b/modules/settings/assets/js/icons/index.js
index 85e89e2..95ae86c 100644
--- a/modules/settings/assets/js/icons/index.js
+++ b/modules/settings/assets/js/icons/index.js
@@ -1,3 +1,5 @@
 export { ElementorLogo } from './elementor-logo';
 export { SquareRoundedChevronsLeft } from './square-rounded-chevrons-left';
 export { WidgetIcon } from './widget';
+export { UserArrowIcon } from './user-arrow';
+export { CreditCardIcon } from './credit-card';
diff --git a/modules/settings/assets/js/icons/user-arrow.js b/modules/settings/assets/js/icons/user-arrow.js
new file mode 100644
index 0000000..57350a7
--- /dev/null
+++ b/modules/settings/assets/js/icons/user-arrow.js
@@ -0,0 +1,19 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+export const UserArrowIcon = ( props, { size } ) => {
+	return (
+		<SvgIcon viewBox="0 0 20 20"
+			fontSize={ size }
+			{ ...props }>
+			<path fillRule="evenodd"
+				clipRule="evenodd"
+				d="M8.95801 1.875C7.90819 1.875 6.90137 2.29204 6.15904 3.03437C5.41671 3.7767 4.99967 4.78352 4.99967 5.83333C4.99967 6.88315 5.41671 7.88997 6.15904 8.6323C6.90137 9.37463 7.90819 9.79167 8.95801 9.79167C10.0078 9.79167 11.0146 9.37463 11.757 8.6323C12.4993 7.88997 12.9163 6.88315 12.9163 5.83333C12.9163 4.78352 12.4993 3.7767 11.757 3.03437C11.0146 2.29204 10.0078 1.875 8.95801 1.875ZM7.04293 3.91825C7.55084 3.41034 8.23971 3.125 8.95801 3.125C9.6763 3.125 10.3652 3.41034 10.8731 3.91825C11.381 4.42616 11.6663 5.11504 11.6663 5.83333C11.6663 6.55163 11.381 7.2405 10.8731 7.74841C10.3652 8.25633 9.6763 8.54167 8.95801 8.54167C8.23971 8.54167 7.55084 8.25633 7.04293 7.74841C6.53502 7.2405 6.24967 6.55163 6.24967 5.83333C6.24967 5.11504 6.53502 4.42616 7.04293 3.91825Z"
+			/>
+			<path
+				d="M5.37626 13.9183C5.88417 13.4103 6.57305 13.125 7.29134 13.125H10.208C10.5532 13.125 10.833 12.8452 10.833 12.5C10.833 12.1548 10.5532 11.875 10.208 11.875H7.29134C6.24153 11.875 5.23471 12.292 4.49238 13.0344C3.75005 13.7767 3.33301 14.7835 3.33301 15.8333V17.5C3.33301 17.8452 3.61283 18.125 3.95801 18.125C4.30319 18.125 4.58301 17.8452 4.58301 17.5V15.8333C4.58301 15.115 4.86835 14.4262 5.37626 13.9183Z"
+			/>
+			<path
+				d="M16.2721 16.2781L13.775 18.7753C13.5309 19.0194 13.1351 19.0194 12.8911 18.7753C12.647 18.5312 12.647 18.1355 12.8911 17.8914L14.3241 16.4583H10.833C10.4878 16.4583 10.208 16.1785 10.208 15.8333C10.208 15.4882 10.4878 15.2083 10.833 15.2083H14.3241L12.8911 13.7753C12.647 13.5312 12.647 13.1355 12.8911 12.8914C13.1352 12.6473 13.5309 12.6473 13.775 12.8914L16.2732 15.3896C16.2801 15.3965 16.2868 15.4035 16.2934 15.4106C16.3909 15.5167 16.4451 15.6483 16.456 15.7827C16.4573 15.7996 16.458 15.8165 16.458 15.8333C16.458 15.9933 16.397 16.1532 16.275 16.2753L16.2721 16.2781Z" />
+		</SvgIcon>
+	);
+};

From 1cf6a2686ab56d2a4ce7c46f773a53652cf2357d Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Thu, 14 Nov 2024 19:10:49 +0530
Subject: [PATCH 41/65] update: hidden wpfooter and fixed sidebar height

---
 modules/settings/assets/css/style.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
index 72965c8..fa53674 100644
--- a/modules/settings/assets/css/style.css
+++ b/modules/settings/assets/css/style.css
@@ -1,6 +1,10 @@
 body {
 	background: #fff;
 }
+
+#wpfooter {
+	display: none;
+}
 .wrap {
 	margin-top: 0;
 }
@@ -8,11 +12,13 @@ body {
 html:not([dir='rtl']) #ea11y-app {
     margin-left: -20px;
     background: white;
+	height: 97vh;
 }
 
 html[dir='rtl'] #ea11y-app {
 	margin-right: -20px;
     background: white;
+	height: 97vh;
 }
 
 html:not([dir='rtl']) #ea11y-app-top-bar {
@@ -34,4 +40,4 @@ html[dir='rtl'] #ea11y-app-top-bar {
 	padding: 8px 12px;
 	box-shadow: none;
 	border-color: rgba(12, 13, 14, 0.23);
-}
\ No newline at end of file
+}

From d9bb34f0c8b3aabb37c3f70209c0d253b732c9a5 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Thu, 14 Nov 2024 19:11:15 +0530
Subject: [PATCH 42/65] update: sidebar layout

---
 modules/settings/assets/js/app.js             |   5 +-
 modules/settings/assets/js/layouts/sidebar.js | 114 +++++++++++-------
 2 files changed, 71 insertions(+), 48 deletions(-)

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 399490c..ea7c90c 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -20,9 +20,10 @@ const App = () => {
 			<ThemeProvider colorScheme="light">
 				{ ! isConnected && <ConnectModal /> }
 				<Grid display="flex"
-					flexDirection="row">
+					flexDirection="row"
+					height="100%">
 					<Sidebar />
-					<Container>Page Content</Container>
+					<Container>Page</Container>
 				</Grid>
 				<Notifications message={ notificationMessage } type={ notificationType } />
 			</ThemeProvider>
diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
index 6c3be10..36444c8 100644
--- a/modules/settings/assets/js/layouts/sidebar.js
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -1,5 +1,6 @@
 import { ChevronDownIcon, PagesIcon, UserIcon } from '@elementor/icons';
 import AppBar from '@elementor/ui/AppBar';
+import Avatar from '@elementor/ui/Avatar';
 import Box from '@elementor/ui/Box';
 import Drawer from '@elementor/ui/Drawer';
 import IconButton from '@elementor/ui/IconButton';
@@ -8,33 +9,35 @@ import ListItem from '@elementor/ui/ListItem';
 import ListItemButton from '@elementor/ui/ListItemButton';
 import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
-import Popover from '@elementor/ui/Popover';
+import Menu from '@elementor/ui/Menu';
+import MenuItem from '@elementor/ui/MenuItem';
 import Toolbar from '@elementor/ui/Toolbar';
 import Typography from '@elementor/ui/Typography';
-import { styled } from '@elementor/ui/styles';
-import { useState, useRef } from '@wordpress/element';
+import { usePopupState, bindTrigger, bindMenu } from '@elementor/ui/usePopupState';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { ElementorLogo, SquareRoundedChevronsLeft, WidgetIcon } from '../icons';
+import { CreditCardIcon, ElementorLogo, SquareRoundedChevronsLeft, UserArrowIcon, WidgetIcon } from '../icons';
 
 export const Sidebar = () => {
 	const [ showWidgetMenu, setShowWidgetMenu ] = useState( true );
 	const [ openDrawer, setOpenDrawer ] = useState( true );
-	const [ openMyAccountMenu, setOpenMyAccountMenu ] = useState( false );
-	const anchorEl = useRef( null );
 
-	const StyledDrawer = styled( Drawer )
-	` & .MuiDrawer-paper {
-		position: static;
-    	min-width: 90px;
-    	max-width: 260px;
-    	width: ${ openDrawer ? '100%' : '0' }px;
-    	transition: all 0.3s;
-		height: 600px;
-}`;
+	const accountMenuState = usePopupState( { variant: 'popover', popupId: 'demoMenu' } );
 
 	return (
-		<StyledDrawer variant="permanent"
+		<Drawer variant="permanent"
 			open={ openDrawer }
+			PaperProps={ {
+				sx: {
+					position: 'relative',
+					minWidth: '90px',
+					maxWidth: '260px',
+					width: openDrawer ? '100%' : '0',
+					transition: 'all 0.3s',
+					height: '100%',
+					justifyContent: 'space-between',
+				},
+			} }
 		>
 			<Box>
 				<AppBar position="static" color="transparent" >
@@ -91,36 +94,55 @@ export const Sidebar = () => {
 						</ListItemButton>
 					</ListItem>
 				</List>
-				<List sx={ { position: 'absolute', bottom: 0 } } ref={ anchorEl } >
-					<ListItem>
-						<ListItemButton onClick={ () => setOpenMyAccountMenu( ! openMyAccountMenu ) }>
-							<ListItemIcon>
-								<UserIcon />
-							</ListItemIcon>
-							<ListItemText primary="My Account"
-								hidden={ ! openDrawer } />
-							<ListItemIcon>
-								<ChevronDownIcon sx={ { rotate: '180deg', display: ! openDrawer ? 'none' : 'inherit' } } />
-							</ListItemIcon>
-						</ListItemButton>
-						<Popover
-							open={ openMyAccountMenu }
-							anchorOrigin={ {
-								vertical: 'bottom',
-								horizontal: 'left',
-							} }
-							transformOrigin={ {
-								vertical: 'top',
-								horizontal: 'left',
-							} }
-							anchorEl={ anchorEl.current }
-							hideBackdrop={ true }
-							anchorReference="anchorEl">
-							Testing
-						</Popover>
-					</ListItem>
-				</List>
 			</Box>
-		</StyledDrawer>
+			<List>
+				<ListItemButton { ...bindTrigger( accountMenuState ) }>
+					<ListItemIcon>
+						<UserIcon sx={ { color: 'common.black' } } />
+					</ListItemIcon>
+					<ListItemText primary="My Account" />
+					<ListItemIcon sx={ { display: ! openDrawer ? 'none' : 'default' } }>
+						<ChevronDownIcon />
+					</ListItemIcon>
+				</ListItemButton>
+			</List>
+			<Menu
+				{ ...bindMenu( accountMenuState ) }
+				anchorOrigin={ {
+					vertical: 'top',
+					horizontal: 'center',
+				} }
+				transformOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'center',
+				} }
+				PaperProps={ { sx: {
+					backgroundColor: 'text.primary',
+				},
+				} }
+			>
+				<MenuItem onClick={ accountMenuState.close } sx={ { gap: 1, width: '225px' } }>
+					<Avatar>JB</Avatar>
+					<Box display="flex"
+						flexDirection="column"
+						gap={ 0 }>
+						<Typography variant="subtitle2" color="common.white">Jack Baueuer</Typography>
+						<Typography variant="caption" color="common.white">jack@bauer.com</Typography>
+					</Box>
+				</MenuItem>
+				<MenuItem onClick={ accountMenuState.close }>
+					<UserArrowIcon sx={ { color: 'common.white' } } />
+					<Typography color="common.white" marginLeft={ 1 }>
+						{ __( 'Switch account', 'pojo-accessibility' ) }
+					</Typography>
+				</MenuItem>
+				<MenuItem onClick={ accountMenuState.close }>
+					<CreditCardIcon sx={ { color: 'common.white' } } />
+					<Typography color="common.white" marginLeft={ 1 }>
+						{ __( 'Billing', 'pojo-accessibility' ) }
+					</Typography>
+				</MenuItem>
+			</Menu>
+		</Drawer>
 	);
 };

From af014196bd48dbbc6159efc2bc91b94e569edab1 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 14:59:59 +0530
Subject: [PATCH 43/65] add: basic page layouts

---
 modules/settings/assets/js/pages/accessibility-statement.js | 3 +++
 modules/settings/assets/js/pages/icon-settings.js           | 3 +++
 modules/settings/assets/js/pages/index.js                   | 3 +++
 modules/settings/assets/js/pages/menu.js                    | 3 +++
 4 files changed, 12 insertions(+)
 create mode 100644 modules/settings/assets/js/pages/accessibility-statement.js
 create mode 100644 modules/settings/assets/js/pages/icon-settings.js
 create mode 100644 modules/settings/assets/js/pages/index.js
 create mode 100644 modules/settings/assets/js/pages/menu.js

diff --git a/modules/settings/assets/js/pages/accessibility-statement.js b/modules/settings/assets/js/pages/accessibility-statement.js
new file mode 100644
index 0000000..1146e3c
--- /dev/null
+++ b/modules/settings/assets/js/pages/accessibility-statement.js
@@ -0,0 +1,3 @@
+export const AccessibilityStatement = () => {
+	return ( <h1>AccessibilityStatement</h1> );
+};
diff --git a/modules/settings/assets/js/pages/icon-settings.js b/modules/settings/assets/js/pages/icon-settings.js
new file mode 100644
index 0000000..bfb5556
--- /dev/null
+++ b/modules/settings/assets/js/pages/icon-settings.js
@@ -0,0 +1,3 @@
+export const IconSettings = () => {
+	return ( <h1>IconSettings</h1> );
+};
diff --git a/modules/settings/assets/js/pages/index.js b/modules/settings/assets/js/pages/index.js
new file mode 100644
index 0000000..142329d
--- /dev/null
+++ b/modules/settings/assets/js/pages/index.js
@@ -0,0 +1,3 @@
+export { AccessibilityStatement } from './accessibility-statement';
+export { IconSettings } from './icon-settings';
+export { Menu } from './menu';
diff --git a/modules/settings/assets/js/pages/menu.js b/modules/settings/assets/js/pages/menu.js
new file mode 100644
index 0000000..f4bbf45
--- /dev/null
+++ b/modules/settings/assets/js/pages/menu.js
@@ -0,0 +1,3 @@
+export const Menu = () => {
+	return ( <h1>Menu</h1> );
+};

From 25af0853c4360ef9e17b213d2a222ddcbc7189d3 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 15:00:34 +0530
Subject: [PATCH 44/65] update: sidebar layout

---
 modules/settings/assets/js/layouts/sidebar.js | 133 ++----------------
 1 file changed, 8 insertions(+), 125 deletions(-)

diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
index 36444c8..aaf462a 100644
--- a/modules/settings/assets/js/layouts/sidebar.js
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -1,38 +1,20 @@
-import { ChevronDownIcon, PagesIcon, UserIcon } from '@elementor/icons';
-import AppBar from '@elementor/ui/AppBar';
-import Avatar from '@elementor/ui/Avatar';
 import Box from '@elementor/ui/Box';
 import Drawer from '@elementor/ui/Drawer';
-import IconButton from '@elementor/ui/IconButton';
-import List from '@elementor/ui/List';
-import ListItem from '@elementor/ui/ListItem';
-import ListItemButton from '@elementor/ui/ListItemButton';
-import ListItemIcon from '@elementor/ui/ListItemIcon';
-import ListItemText from '@elementor/ui/ListItemText';
-import Menu from '@elementor/ui/Menu';
-import MenuItem from '@elementor/ui/MenuItem';
-import Toolbar from '@elementor/ui/Toolbar';
-import Typography from '@elementor/ui/Typography';
-import { usePopupState, bindTrigger, bindMenu } from '@elementor/ui/usePopupState';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { CreditCardIcon, ElementorLogo, SquareRoundedChevronsLeft, UserArrowIcon, WidgetIcon } from '../icons';
+import { MyAccountMenu, SidebarAppBar, SidebarMenu } from '../components';
+import { useSettings } from '../hooks';
 
 export const Sidebar = () => {
-	const [ showWidgetMenu, setShowWidgetMenu ] = useState( true );
-	const [ openDrawer, setOpenDrawer ] = useState( true );
-
-	const accountMenuState = usePopupState( { variant: 'popover', popupId: 'demoMenu' } );
+	const { openSidebar } = useSettings();
 
 	return (
 		<Drawer variant="permanent"
-			open={ openDrawer }
+			open={ openSidebar }
 			PaperProps={ {
 				sx: {
 					position: 'relative',
 					minWidth: '90px',
 					maxWidth: '260px',
-					width: openDrawer ? '100%' : '0',
+					width: openSidebar ? '100%' : '0',
 					transition: 'all 0.3s',
 					height: '100%',
 					justifyContent: 'space-between',
@@ -40,109 +22,10 @@ export const Sidebar = () => {
 			} }
 		>
 			<Box>
-				<AppBar position="static" color="transparent" >
-					<Toolbar disableGutters sx={ { justifyContent: 'space-between' } } >
-						<Box display="flex"
-							alignItems="center"
-							justifyContent="center"
-							p={ 1 }>
-							<ElementorLogo />
-							<Typography variant="h6"
-								marginLeft={ 1 }
-								display={ ! openDrawer ? 'none' : 'inherit' }>
-								{ __( 'Accessibility', 'pojo-accessibility' ) }
-							</Typography>
-						</Box>
-						<IconButton color="inherit" onClick={ () => setOpenDrawer( ! openDrawer ) }>
-							<SquareRoundedChevronsLeft sx={ { rotate: ! openDrawer ? '180deg' : '0' } } />
-						</IconButton>
-					</Toolbar>
-				</AppBar>
-				<List>
-					<ListItem disableGutters>
-						<ListItemButton onClick={ () => setShowWidgetMenu( ! showWidgetMenu ) } sx={ { justifyContent: 'center' } } >
-							<ListItemIcon>
-								<WidgetIcon />
-							</ListItemIcon>
-							<ListItemText primary="Widget" hidden={ ! openDrawer } />
-							<ListItemIcon sx={ { display: ! openDrawer ? 'none' : 'default' } }>
-								<ChevronDownIcon sx={ { rotate: showWidgetMenu ? '180deg' : '0' } } />
-							</ListItemIcon>
-						</ListItemButton>
-					</ListItem>
-					{
-						showWidgetMenu && (
-							<>
-								<ListItem sx={ { py: 0 } } hidden={ ! openDrawer }>
-									<ListItemButton sx={ { py: 0 } } hidden={ ! openDrawer }>
-										<ListItemText primary="Icon Settings" hidden={ ! openDrawer } />
-									</ListItemButton>
-								</ListItem>
-								<ListItem sx={ { py: 0 } } hidden={ ! openDrawer }>
-									<ListItemButton sx={ { py: 0 } } hidden={ ! openDrawer }>
-										<ListItemText primary="Menu" hidden={ ! openDrawer } />
-									</ListItemButton>
-								</ListItem>
-							</>
-						) }
-					<ListItem disableGutters>
-						<ListItemButton sx={ { justifyContent: 'center' } }>
-							<ListItemIcon>
-								<PagesIcon sx={ { color: 'common.black' } } />
-							</ListItemIcon>
-							<ListItemText primary="Accessibility Statement" hidden={ ! openDrawer } />
-						</ListItemButton>
-					</ListItem>
-				</List>
+				<SidebarAppBar />
+				<SidebarMenu />
 			</Box>
-			<List>
-				<ListItemButton { ...bindTrigger( accountMenuState ) }>
-					<ListItemIcon>
-						<UserIcon sx={ { color: 'common.black' } } />
-					</ListItemIcon>
-					<ListItemText primary="My Account" />
-					<ListItemIcon sx={ { display: ! openDrawer ? 'none' : 'default' } }>
-						<ChevronDownIcon />
-					</ListItemIcon>
-				</ListItemButton>
-			</List>
-			<Menu
-				{ ...bindMenu( accountMenuState ) }
-				anchorOrigin={ {
-					vertical: 'top',
-					horizontal: 'center',
-				} }
-				transformOrigin={ {
-					vertical: 'bottom',
-					horizontal: 'center',
-				} }
-				PaperProps={ { sx: {
-					backgroundColor: 'text.primary',
-				},
-				} }
-			>
-				<MenuItem onClick={ accountMenuState.close } sx={ { gap: 1, width: '225px' } }>
-					<Avatar>JB</Avatar>
-					<Box display="flex"
-						flexDirection="column"
-						gap={ 0 }>
-						<Typography variant="subtitle2" color="common.white">Jack Baueuer</Typography>
-						<Typography variant="caption" color="common.white">jack@bauer.com</Typography>
-					</Box>
-				</MenuItem>
-				<MenuItem onClick={ accountMenuState.close }>
-					<UserArrowIcon sx={ { color: 'common.white' } } />
-					<Typography color="common.white" marginLeft={ 1 }>
-						{ __( 'Switch account', 'pojo-accessibility' ) }
-					</Typography>
-				</MenuItem>
-				<MenuItem onClick={ accountMenuState.close }>
-					<CreditCardIcon sx={ { color: 'common.white' } } />
-					<Typography color="common.white" marginLeft={ 1 }>
-						{ __( 'Billing', 'pojo-accessibility' ) }
-					</Typography>
-				</MenuItem>
-			</Menu>
+			<MyAccountMenu drawerState={ openSidebar } />
 		</Drawer>
 	);
 };

From c06e8552720235ed8d593159b7e375eb6d06fe08 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 15:03:57 +0530
Subject: [PATCH 45/65] add: sidebar menu, sidebar app bar and my account menu
 components

---
 .../settings/assets/js/components/index.js    |  4 +
 .../js/components/my-account-menu/index.js    | 76 +++++++++++++++++++
 .../js/components/sidebar-app-bar/index.js    | 34 +++++++++
 .../js/components/sidebar-menu/index.js       | 66 ++++++++++++++++
 .../assets/js/components/sidebar-menu/menu.js | 29 +++++++
 5 files changed, 209 insertions(+)
 create mode 100644 modules/settings/assets/js/components/my-account-menu/index.js
 create mode 100644 modules/settings/assets/js/components/sidebar-app-bar/index.js
 create mode 100644 modules/settings/assets/js/components/sidebar-menu/index.js
 create mode 100644 modules/settings/assets/js/components/sidebar-menu/menu.js

diff --git a/modules/settings/assets/js/components/index.js b/modules/settings/assets/js/components/index.js
index ef0c049..6a99e3a 100644
--- a/modules/settings/assets/js/components/index.js
+++ b/modules/settings/assets/js/components/index.js
@@ -1,2 +1,6 @@
 export { default as ConnectModal } from './connect-modal';
 export { default as Notifications } from './notifications';
+export { default as MyAccountMenu } from './my-account-menu';
+export { SidebarAppBar } from './sidebar-app-bar';
+export { SidebarMenu } from './sidebar-menu';
+export { MenuItems } from '../components/sidebar-menu/menu';
diff --git a/modules/settings/assets/js/components/my-account-menu/index.js b/modules/settings/assets/js/components/my-account-menu/index.js
new file mode 100644
index 0000000..24207b9
--- /dev/null
+++ b/modules/settings/assets/js/components/my-account-menu/index.js
@@ -0,0 +1,76 @@
+import { ChevronDownIcon, UserIcon } from '@elementor/icons';
+import Avatar from '@elementor/ui/Avatar';
+import Box from '@elementor/ui/Box';
+import List from '@elementor/ui/List';
+import ListItemButton from '@elementor/ui/ListItemButton';
+import ListItemIcon from '@elementor/ui/ListItemIcon';
+import ListItemText from '@elementor/ui/ListItemText';
+import Menu from '@elementor/ui/Menu';
+import MenuItem from '@elementor/ui/MenuItem';
+import Typography from '@elementor/ui/Typography';
+import { bindMenu, bindTrigger, usePopupState } from '@elementor/ui/usePopupState';
+import { __ } from '@wordpress/i18n';
+import { useSettings } from '../../hooks';
+import {
+	CreditCardIcon,
+	UserArrowIcon,
+} from '../../icons';
+
+const MyAccountMenu = () => {
+	const { openSidebar } = useSettings();
+	const accountMenuState = usePopupState( { variant: 'popover', popupId: 'demoMenu' } );
+	return (
+		<>
+			<List>
+				<ListItemButton { ...bindTrigger( accountMenuState ) } sx={ { justifyContent: 'center' } }>
+					<ListItemIcon>
+						<UserIcon sx={ { color: 'common.black' } } />
+					</ListItemIcon>
+					<ListItemText primary="My Account" hidden={ ! openSidebar } />
+					<ListItemIcon sx={ { display: ! openSidebar ? 'none' : 'default' } }>
+						<ChevronDownIcon />
+					</ListItemIcon>
+				</ListItemButton>
+			</List>
+			<Menu
+				{ ...bindMenu( accountMenuState ) }
+				anchorOrigin={ {
+					vertical: 'top',
+					horizontal: 'center',
+				} }
+				transformOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'center',
+				} }
+				PaperProps={ { sx: {
+					backgroundColor: 'text.primary',
+				},
+				} }
+			>
+				<MenuItem onClick={ accountMenuState.close } sx={ { gap: 1, width: '225px' } }>
+					<Avatar>JB</Avatar>
+					<Box display="flex"
+						flexDirection="column"
+						gap={ 0 }>
+						<Typography variant="subtitle2" color="common.white">Jack Baueuer</Typography>
+						<Typography variant="caption" color="common.white">jack@bauer.com</Typography>
+					</Box>
+				</MenuItem>
+				<MenuItem onClick={ accountMenuState.close }>
+					<UserArrowIcon sx={ { color: 'common.white' } } />
+					<Typography color="common.white" marginLeft={ 1 }>
+						{ __( 'Switch account', 'pojo-accessibility' ) }
+					</Typography>
+				</MenuItem>
+				<MenuItem onClick={ accountMenuState.close }>
+					<CreditCardIcon sx={ { color: 'common.white' } } />
+					<Typography color="common.white" marginLeft={ 1 }>
+						{ __( 'Billing', 'pojo-accessibility' ) }
+					</Typography>
+				</MenuItem>
+			</Menu>
+		</>
+	);
+};
+
+export default MyAccountMenu;
diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js
new file mode 100644
index 0000000..bbea8f4
--- /dev/null
+++ b/modules/settings/assets/js/components/sidebar-app-bar/index.js
@@ -0,0 +1,34 @@
+import AppBar from '@elementor/ui/AppBar';
+import Box from '@elementor/ui/Box';
+import IconButton from '@elementor/ui/IconButton';
+import Toolbar from '@elementor/ui/Toolbar';
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import { useSettings } from '../../hooks';
+import {
+	ElementorLogo,
+	SquareRoundedChevronsLeft,
+} from '../../icons';
+
+export const SidebarAppBar = () => {
+	const { openSidebar, setOpenSidebar } = useSettings();
+
+	return ( <AppBar position="static" color="transparent" >
+		<Toolbar disableGutters sx={ { justifyContent: 'space-between' } } >
+			<Box display="flex"
+				alignItems="center"
+				justifyContent="center"
+				p={ 1 }>
+				<ElementorLogo />
+				<Typography variant="h6"
+					marginLeft={ 1 }
+					display={ ! openSidebar ? 'none' : 'inherit' }>
+					{ __( 'Accessibility', 'pojo-accessibility' ) }
+				</Typography>
+			</Box>
+			<IconButton color="inherit" onClick={ () => setOpenSidebar( ! openSidebar ) }>
+				<SquareRoundedChevronsLeft sx={ { rotate: ! openSidebar ? '180deg' : '0' } } />
+			</IconButton>
+		</Toolbar>
+	</AppBar> );
+};
diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js
new file mode 100644
index 0000000..2b65e01
--- /dev/null
+++ b/modules/settings/assets/js/components/sidebar-menu/index.js
@@ -0,0 +1,66 @@
+import { ChevronDownIcon } from '@elementor/icons';
+import List from '@elementor/ui/List';
+import ListItem from '@elementor/ui/ListItem';
+import ListItemButton from '@elementor/ui/ListItemButton';
+import ListItemIcon from '@elementor/ui/ListItemIcon';
+import ListItemText from '@elementor/ui/ListItemText';
+import { useState } from '@wordpress/element';
+import { useSettings } from '../../hooks';
+import { MenuItems } from './menu';
+
+export const SidebarMenu = () => {
+	const { openSidebar, selectedMenu, setSelectedMenu } = useSettings();
+	const [ expandedItems, setExpandedItems ] = useState( {} );
+
+	const handleSelectedMenu = ( parentKey, childKey ) => {
+		if ( childKey ) {
+			setSelectedMenu( { parent: parentKey, child: childKey } );
+		} else {
+			setSelectedMenu( { parent: parentKey, child: null } );
+		}
+	};
+
+	const handleToggleItem = ( itemName ) => {
+		setExpandedItems( ( prev ) => ( {
+			...prev,
+			[ itemName ]: ! prev[ itemName ], // Toggle the expanded state for the clicked item
+		} ) );
+	};
+	return ( <List>
+		{ Object.entries( MenuItems ).map( ( [ key, item ] ) => (
+			<>
+				<ListItem key={ key } disableGutters>
+					<ListItemButton
+						onClick={ () => item.children ? handleToggleItem( key ) : handleSelectedMenu( key ) }
+						sx={ { justifyContent: 'center' } }
+						selected={ key === selectedMenu.parent && ( ! selectedMenu.child || ! openSidebar ) }
+					>
+						<ListItemIcon>{ item.icon }</ListItemIcon>
+						<ListItemText primary={ item.name } hidden={ ! openSidebar } />
+						{ item.children && (
+							<ListItemIcon sx={ { display: ! openSidebar ? 'none' : 'default' } }>
+								<ChevronDownIcon sx={ { rotate: expandedItems[ key ] ? '180deg' : '0' } } />
+							</ListItemIcon>
+						) }
+					</ListItemButton>
+				</ListItem>
+				{ item.children && expandedItems[ key ] && (
+					<List component="div" disablePadding>
+						{ Object.entries( item.children ).map( ( [ childKey, child ] ) => (
+							<ListItem key={ childKey }
+								sx={ { py: 0 } }
+								hidden={ ! openSidebar }>
+								<ListItemButton sx={ { py: 0 } }
+									hidden={ ! openSidebar }
+									selected={ childKey === selectedMenu.child && openSidebar }
+									onClick={ () => handleSelectedMenu( key, childKey ) }>
+									<ListItemText primary={ child.name } hidden={ ! openSidebar } />
+								</ListItemButton>
+							</ListItem>
+						) ) }
+					</List>
+				) }
+			</>
+		) ) }
+	</List> );
+};
diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js
new file mode 100644
index 0000000..7c50d3b
--- /dev/null
+++ b/modules/settings/assets/js/components/sidebar-menu/menu.js
@@ -0,0 +1,29 @@
+import { PagesIcon } from '@elementor/icons';
+import { WidgetIcon } from '../../icons';
+import { AccessibilityStatement, Menu, IconSettings } from '../../pages';
+
+export const MenuItems = {
+	widget: {
+		name: 'Widget',
+		key: 'widget',
+		icon: <WidgetIcon />,
+		children: {
+			iconSettings: {
+				name: 'Icon Settings',
+				key: 'icon-settings',
+				page: <IconSettings />,
+			},
+			menu: {
+				name: 'Menu',
+				key: 'menu',
+				page: <Menu />,
+			},
+		},
+	},
+	accessibilityStatement: {
+		name: 'Accessibility Statement',
+		key: 'accessibility-statement',
+		page: <AccessibilityStatement />,
+		icon: <PagesIcon />,
+	},
+};

From 7e63317fc56d0cbbf03b9a0e1ce999b6c688d59e Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 15:04:24 +0530
Subject: [PATCH 46/65] update: add sidebar and menu settings

---
 modules/settings/assets/js/hooks/use-settings.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/modules/settings/assets/js/hooks/use-settings.js b/modules/settings/assets/js/hooks/use-settings.js
index 69d5a77..7c58be8 100644
--- a/modules/settings/assets/js/hooks/use-settings.js
+++ b/modules/settings/assets/js/hooks/use-settings.js
@@ -10,12 +10,15 @@ export function useSettings() {
 }
 
 export const SettingsProvider = ( { children } ) => {
-	const [ test, setTest ] = useState( 'Test' );
+	const [ openSidebar, setOpenSidebar ] = useState( true );
+	const [ selectedMenu, setSelectedMenu ] = useState( { parent: 'widget', child: 'iconSettings' } );
 	return (
 		<SettingsContext.Provider
 			value={ {
-				test,
-				setTest,
+				openSidebar,
+				setOpenSidebar,
+				selectedMenu,
+				setSelectedMenu,
 			} }
 		>
 			{ children }

From d989770ead67fa4d4143c082335df56ae98b2576 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 15:04:40 +0530
Subject: [PATCH 47/65] update: add page layouts

---
 modules/settings/assets/js/app.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index ea7c90c..756388f 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -1,11 +1,11 @@
 import '../css/style.css';
-import Container from '@elementor/ui/Container';
+import Box from '@elementor/ui/Box';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import Grid from '@elementor/ui/Grid';
 import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal, Notifications } from './components';
+import { ConnectModal, Notifications, MenuItems } from './components';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
-import { useNotificationSettings } from './hooks';
+import { useNotificationSettings, useSettings } from './hooks';
 import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
@@ -14,7 +14,11 @@ const App = () => {
 		notificationMessage,
 		notificationType,
 	} = useNotificationSettings();
+	const { selectedMenu } = useSettings();
 
+	// Accessing the selected menu item
+	const selectedParent = MenuItems[ selectedMenu.parent ];
+	const selectedChild = selectedMenu.child ? selectedParent.children[ selectedMenu.child ] : null;
 	return (
 		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
@@ -23,7 +27,9 @@ const App = () => {
 					flexDirection="row"
 					height="100%">
 					<Sidebar />
-					<Container>Page</Container>
+					<Box>
+						{ selectedChild ? selectedChild.page : selectedParent?.page }
+					</Box>
 				</Grid>
 				<Notifications message={ notificationMessage } type={ notificationType } />
 			</ThemeProvider>

From 115b5a4e526e505243ac9b0492860792121c5153 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:24:16 +0530
Subject: [PATCH 48/65] update: admin top bar

---
 .../js/components/admin-top-bar/index.js      | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
index ccdc7a2..201f41d 100644
--- a/modules/settings/assets/js/components/admin-top-bar/index.js
+++ b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -1,30 +1,22 @@
 import HelpIcon from '@elementor/icons/HelpIcon';
 import AppBar from '@elementor/ui/AppBar';
-import Grid from '@elementor/ui/Grid';
 import Link from '@elementor/ui/Link';
 import Toolbar from '@elementor/ui/Toolbar';
-import Typography from '@elementor/ui/Typography';
 import { __ } from '@wordpress/i18n';
 import { HELP_LINK } from '../../constants';
-import { ElementorLogo } from '../../icons';
 
-const AdminTopBar = () => {
+export const AdminTopBar = () => {
 	return (
-		<AppBar position="static"
-			elevation={ 6 }
-			sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
+		<AppBar position="static">
 			<Toolbar direction="row"
-				sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } }
+				sx={ {
+					justifyContent: 'end',
+					alignItems: 'center',
+					backgroundColor: 'background.default',
+					gap: '10px',
+					borderBottom: '1px solid rgba(0, 0, 0, 0.12)\n',
+				} }
 				padding={ 2 }>
-				<Grid container={ true }
-					alignItems="center"
-					gap={ 1 }>
-					<ElementorLogo size="large" />
-					<Typography color="text.primary">
-						{ __( 'Accessibility', 'pojo-accessibility' ) }
-					</Typography>
-				</Grid>
-
 				<Link color="secondary"
 					underline="hover"
 					href={ HELP_LINK }
@@ -37,5 +29,3 @@ const AdminTopBar = () => {
 		</AppBar>
 	);
 };
-
-export default AdminTopBar;

From ab1550b0fdb43a6d0d312ac4d39f107a17400feb Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:24:29 +0530
Subject: [PATCH 49/65] add: bottom bar

---
 .../assets/js/components/bottom-bar/index.js        | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 modules/settings/assets/js/components/bottom-bar/index.js

diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
new file mode 100644
index 0000000..23eb969
--- /dev/null
+++ b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -0,0 +1,13 @@
+import Box from '@elementor/ui/Box';
+import Button from '@elementor/ui/Button';
+
+export const BottomBar = () => {
+	return (
+		<Box display="flex"
+			justifyContent="end"
+			p={ 2 }
+			width="100%">
+			<Button variant="contained" color="info">Save Changes</Button>
+		</Box>
+	);
+};

From 92e7de27098e9391dcfc503c2342a0856c6c6d78 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:24:41 +0530
Subject: [PATCH 50/65] add: bottom bar and top bar

---
 modules/settings/assets/js/components/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/modules/settings/assets/js/components/index.js b/modules/settings/assets/js/components/index.js
index 6a99e3a..b5be9a7 100644
--- a/modules/settings/assets/js/components/index.js
+++ b/modules/settings/assets/js/components/index.js
@@ -4,3 +4,5 @@ export { default as MyAccountMenu } from './my-account-menu';
 export { SidebarAppBar } from './sidebar-app-bar';
 export { SidebarMenu } from './sidebar-menu';
 export { MenuItems } from '../components/sidebar-menu/menu';
+export { AdminTopBar } from './admin-top-bar';
+export { BottomBar } from './bottom-bar';

From 042568d759bd439a48effec8040cce6f3e505aa6 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:24:48 +0530
Subject: [PATCH 51/65] add: bottom bar and top bar

---
 modules/settings/assets/js/app.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 756388f..f629cb6 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -3,7 +3,7 @@ import Box from '@elementor/ui/Box';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import Grid from '@elementor/ui/Grid';
 import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal, Notifications, MenuItems } from './components';
+import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from './components';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
 import { useNotificationSettings, useSettings } from './hooks';
 import { Sidebar } from './layouts/sidebar';
@@ -27,8 +27,10 @@ const App = () => {
 					flexDirection="row"
 					height="100%">
 					<Sidebar />
-					<Box>
+					<Box width="100%">
+						<AdminTopBar />
 						{ selectedChild ? selectedChild.page : selectedParent?.page }
+						<BottomBar />
 					</Box>
 				</Grid>
 				<Notifications message={ notificationMessage } type={ notificationType } />

From 399e6e0e0b1a59f0de6540a6b23b14a938987c75 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:44:27 +0530
Subject: [PATCH 52/65] update: page content styling

---
 modules/settings/assets/js/app.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index f629cb6..54d4648 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -27,9 +27,15 @@ const App = () => {
 					flexDirection="row"
 					height="100%">
 					<Sidebar />
-					<Box width="100%">
+					<Box width="100%"
+						display="flex"
+						flexDirection="column"
+						justifyContent="space-between"
+					>
 						<AdminTopBar />
-						{ selectedChild ? selectedChild.page : selectedParent?.page }
+						<Box p={ 1 } height="100%">
+							{ selectedChild ? selectedChild.page : selectedParent?.page }
+						</Box>
 						<BottomBar />
 					</Box>
 				</Grid>

From 28cff2d69ff6113503673af319a7111dabbc067e Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:44:44 +0530
Subject: [PATCH 53/65] fix: styling

---
 modules/settings/assets/js/components/admin-top-bar/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
index 201f41d..eeeec94 100644
--- a/modules/settings/assets/js/components/admin-top-bar/index.js
+++ b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -14,7 +14,7 @@ export const AdminTopBar = () => {
 					alignItems: 'center',
 					backgroundColor: 'background.default',
 					gap: '10px',
-					borderBottom: '1px solid rgba(0, 0, 0, 0.12)\n',
+					borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
 				} }
 				padding={ 2 }>
 				<Link color="secondary"

From e521973c4894eb431860e62fccd3f2807d6fe4a1 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:44:52 +0530
Subject: [PATCH 54/65] fix: styling

---
 modules/settings/assets/js/components/bottom-bar/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
index 23eb969..e749b1e 100644
--- a/modules/settings/assets/js/components/bottom-bar/index.js
+++ b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -6,7 +6,8 @@ export const BottomBar = () => {
 		<Box display="flex"
 			justifyContent="end"
 			p={ 2 }
-			width="100%">
+			width="100%"
+			borderTop="1px solid rgba(0, 0, 0, 0.12)">
 			<Button variant="contained" color="info">Save Changes</Button>
 		</Box>
 	);

From 4714c6239d675f9bd565fd45498c69874f5eeda3 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Fri, 15 Nov 2024 16:51:05 +0530
Subject: [PATCH 55/65] update: text domain

---
 .../settings/assets/js/components/bottom-bar/index.js    | 5 ++++-
 .../settings/assets/js/components/sidebar-menu/menu.js   | 9 +++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
index e749b1e..1e27212 100644
--- a/modules/settings/assets/js/components/bottom-bar/index.js
+++ b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -1,5 +1,6 @@
 import Box from '@elementor/ui/Box';
 import Button from '@elementor/ui/Button';
+import { __ } from '@wordpress/i18n';
 
 export const BottomBar = () => {
 	return (
@@ -8,7 +9,9 @@ export const BottomBar = () => {
 			p={ 2 }
 			width="100%"
 			borderTop="1px solid rgba(0, 0, 0, 0.12)">
-			<Button variant="contained" color="info">Save Changes</Button>
+			<Button variant="contained" color="info">
+				{ __( 'Save Changes', 'pojo-accessibility' ) }
+			</Button>
 		</Box>
 	);
 };
diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js
index 7c50d3b..81a8f07 100644
--- a/modules/settings/assets/js/components/sidebar-menu/menu.js
+++ b/modules/settings/assets/js/components/sidebar-menu/menu.js
@@ -1,27 +1,28 @@
 import { PagesIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
 import { WidgetIcon } from '../../icons';
 import { AccessibilityStatement, Menu, IconSettings } from '../../pages';
 
 export const MenuItems = {
 	widget: {
-		name: 'Widget',
+		name: __( 'Widget', 'pojo-accessibility' ),
 		key: 'widget',
 		icon: <WidgetIcon />,
 		children: {
 			iconSettings: {
-				name: 'Icon Settings',
+				name: __( 'Icon Settings', 'pojo-accessibility' ),
 				key: 'icon-settings',
 				page: <IconSettings />,
 			},
 			menu: {
-				name: 'Menu',
+				name: __( 'Menu', 'pojo-accessibility' ),
 				key: 'menu',
 				page: <Menu />,
 			},
 		},
 	},
 	accessibilityStatement: {
-		name: 'Accessibility Statement',
+		name: __( 'Accessibility Statement', 'pojo-accessibility' ),
 		key: 'accessibility-statement',
 		page: <AccessibilityStatement />,
 		icon: <PagesIcon />,

From cf060e1366ec3b8a1941d0a86cda7df0a0afa9ee Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 19 Nov 2024 19:43:54 +0530
Subject: [PATCH 56/65] update: added translations

---
 .../settings/assets/js/components/my-account-menu/index.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/settings/assets/js/components/my-account-menu/index.js b/modules/settings/assets/js/components/my-account-menu/index.js
index 24207b9..2ec1de2 100644
--- a/modules/settings/assets/js/components/my-account-menu/index.js
+++ b/modules/settings/assets/js/components/my-account-menu/index.js
@@ -18,7 +18,7 @@ import {
 
 const MyAccountMenu = () => {
 	const { openSidebar } = useSettings();
-	const accountMenuState = usePopupState( { variant: 'popover', popupId: 'demoMenu' } );
+	const accountMenuState = usePopupState( { variant: 'popover', popupId: 'myAccountMenu' } );
 	return (
 		<>
 			<List>
@@ -26,7 +26,7 @@ const MyAccountMenu = () => {
 					<ListItemIcon>
 						<UserIcon sx={ { color: 'common.black' } } />
 					</ListItemIcon>
-					<ListItemText primary="My Account" hidden={ ! openSidebar } />
+					<ListItemText primary={ __( 'My Account', 'pojo-accessibility' ) } hidden={ ! openSidebar } />
 					<ListItemIcon sx={ { display: ! openSidebar ? 'none' : 'default' } }>
 						<ChevronDownIcon />
 					</ListItemIcon>

From f2cfeac8362a2ec0dd0c552233752a7a2150c084 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 25 Nov 2024 19:01:07 +0530
Subject: [PATCH 57/65] fix: admin top bar layout

---
 .../js/components/admin-top-bar/index.js      | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
index fb5fd15..08417f7 100644
--- a/modules/settings/assets/js/components/admin-top-bar/index.js
+++ b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -6,25 +6,25 @@ import { __ } from '@wordpress/i18n';
 import { HELP_LINK } from '../../constants';
 
 export const AdminTopBar = () => {
+	const toolBarStyle = {
+		justifyContent: 'end',
+		alignItems: 'center',
+		backgroundColor: 'background.default',
+		gap: '10px',
+		borderBottom: '1px solid rgba(0, 0, 0, 0.12)' };
 	return (
 		<AppBar position="static">
 			<Toolbar direction="row"
-				sx={ {
-					justifyContent: 'end',
-					alignItems: 'center',
-					backgroundColor: 'background.default',
-					gap: '10px',
-					borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
-				} }
+				sx={ toolBarStyle }
 				padding={ 2 }>
-				<Grid container={ true }
-					alignItems="center"
-					gap={ 1 }>
-					<ElementorLogo size="large" />
-					<Typography color="text.primary">
-						{ __( 'Accessibility', 'pojo-accessibility' ) }
-					</Typography>
-				</Grid>
+				<Link color="secondary"
+					underline="hover"
+					href={ HELP_LINK }
+					target="_blank"
+					sx={ { display: 'inline-flex', alignItems: 'center', gap: 1 } }
+					aria-label={ __( 'Help', 'pojo-accessibility' ) }>
+					<HelpIcon />
+				</Link>
 			</Toolbar>
 		</AppBar>
 	);

From a1866aacfca1c84c6e3c42b361d7fe377bee7fdc Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 25 Nov 2024 19:04:29 +0530
Subject: [PATCH 58/65] update: exports of icons

---
 modules/settings/assets/js/icons/credit-card.js          | 4 +++-
 modules/settings/assets/js/icons/elementor-logo.js       | 4 +++-
 modules/settings/assets/js/icons/index.js                | 9 ++++-----
 .../assets/js/icons/square-rounded-chevrons-left.js      | 4 +++-
 modules/settings/assets/js/icons/user-arrow.js           | 4 +++-
 modules/settings/assets/js/icons/widget.js               | 4 +++-
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/modules/settings/assets/js/icons/credit-card.js b/modules/settings/assets/js/icons/credit-card.js
index a795dc3..4fb8b1c 100644
--- a/modules/settings/assets/js/icons/credit-card.js
+++ b/modules/settings/assets/js/icons/credit-card.js
@@ -1,6 +1,6 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
 
-export const CreditCardIcon = ( props, { size } ) => {
+const CreditCardIcon = ( props, { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 20 20"
 			fontSize={ size }
@@ -12,3 +12,5 @@ export const CreditCardIcon = ( props, { size } ) => {
 		</SvgIcon>
 	);
 };
+
+export default CreditCardIcon;
diff --git a/modules/settings/assets/js/icons/elementor-logo.js b/modules/settings/assets/js/icons/elementor-logo.js
index fbcf468..a9a6521 100644
--- a/modules/settings/assets/js/icons/elementor-logo.js
+++ b/modules/settings/assets/js/icons/elementor-logo.js
@@ -1,6 +1,6 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
 
-export const ElementorLogo = ( { size } ) => {
+const ElementorLogo = ( { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 24 24" fontSize={ size }>
 			<g clipPath="url(#a)">
@@ -18,3 +18,5 @@ export const ElementorLogo = ( { size } ) => {
 		</SvgIcon>
 	);
 };
+
+export default ElementorLogo;
diff --git a/modules/settings/assets/js/icons/index.js b/modules/settings/assets/js/icons/index.js
index a5d46c7..27fefa6 100644
--- a/modules/settings/assets/js/icons/index.js
+++ b/modules/settings/assets/js/icons/index.js
@@ -1,9 +1,8 @@
-export { ElementorLogo } from './elementor-logo';
-export { SquareRoundedChevronsLeft } from './square-rounded-chevrons-left';
-export { WidgetIcon } from './widget';
-export { UserArrowIcon } from './user-arrow';
-export { CreditCardIcon } from './credit-card';
 export { default as ElementorLogo } from './elementor-logo';
+export { default as SquareRoundedChevronsLeft } from './square-rounded-chevrons-left';
+export { default as WidgetIcon } from './widget';
+export { default as UserArrowIcon } from './user-arrow';
+export { default as CreditCardIcon } from './credit-card';
 export { default as AccessibilityPersonIcon } from './accessibility-person';
 export { default as AccessibilityEyeIcon } from './accessibility-eye';
 export { default as AccessibilityTextIcon } from './accessibility-text';
diff --git a/modules/settings/assets/js/icons/square-rounded-chevrons-left.js b/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
index 6cbbed1..fd48134 100644
--- a/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
+++ b/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
@@ -1,6 +1,6 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
 
-export const SquareRoundedChevronsLeft = ( props, { size } ) => {
+const SquareRoundedChevronsLeft = ( props, { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 24 24"
 			fontSize={ size }
@@ -13,3 +13,5 @@ export const SquareRoundedChevronsLeft = ( props, { size } ) => {
 		</SvgIcon>
 	);
 };
+
+export default SquareRoundedChevronsLeft;
diff --git a/modules/settings/assets/js/icons/user-arrow.js b/modules/settings/assets/js/icons/user-arrow.js
index 57350a7..0f2af52 100644
--- a/modules/settings/assets/js/icons/user-arrow.js
+++ b/modules/settings/assets/js/icons/user-arrow.js
@@ -1,6 +1,6 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
 
-export const UserArrowIcon = ( props, { size } ) => {
+const UserArrowIcon = ( props, { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 20 20"
 			fontSize={ size }
@@ -17,3 +17,5 @@ export const UserArrowIcon = ( props, { size } ) => {
 		</SvgIcon>
 	);
 };
+
+export default UserArrowIcon;
diff --git a/modules/settings/assets/js/icons/widget.js b/modules/settings/assets/js/icons/widget.js
index 95455e8..21ce357 100644
--- a/modules/settings/assets/js/icons/widget.js
+++ b/modules/settings/assets/js/icons/widget.js
@@ -1,6 +1,6 @@
 import SvgIcon from '@elementor/ui/SvgIcon';
 
-export const WidgetIcon = ( { size } ) => {
+const WidgetIcon = ( { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 20 20" fontSize={ size }>
 			<g id="widget">
@@ -28,3 +28,5 @@ export const WidgetIcon = ( { size } ) => {
 		</SvgIcon>
 	);
 };
+
+export default WidgetIcon;

From fa0a75f132afbcd0f72c71964a1e52676788fdfc Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 25 Nov 2024 19:06:12 +0530
Subject: [PATCH 59/65] update: exports of components

---
 modules/settings/assets/js/components/index.js                | 4 ++--
 .../settings/assets/js/components/sidebar-app-bar/index.js    | 4 +++-
 modules/settings/assets/js/components/sidebar-menu/index.js   | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/modules/settings/assets/js/components/index.js b/modules/settings/assets/js/components/index.js
index 319b360..455679a 100644
--- a/modules/settings/assets/js/components/index.js
+++ b/modules/settings/assets/js/components/index.js
@@ -1,8 +1,8 @@
 export { default as ConnectModal } from './connect-modal';
 export { default as Notifications } from './notifications';
 export { default as MyAccountMenu } from './my-account-menu';
-export { SidebarAppBar } from './sidebar-app-bar';
-export { SidebarMenu } from './sidebar-menu';
+export { default as SidebarAppBar } from './sidebar-app-bar';
+export { default as SidebarMenu } from './sidebar-menu';
 export { MenuItems } from '../components/sidebar-menu/menu';
 export { AdminTopBar } from './admin-top-bar';
 export { BottomBar } from './bottom-bar';
diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js
index bbea8f4..b7ceced 100644
--- a/modules/settings/assets/js/components/sidebar-app-bar/index.js
+++ b/modules/settings/assets/js/components/sidebar-app-bar/index.js
@@ -10,7 +10,7 @@ import {
 	SquareRoundedChevronsLeft,
 } from '../../icons';
 
-export const SidebarAppBar = () => {
+const SidebarAppBar = () => {
 	const { openSidebar, setOpenSidebar } = useSettings();
 
 	return ( <AppBar position="static" color="transparent" >
@@ -32,3 +32,5 @@ export const SidebarAppBar = () => {
 		</Toolbar>
 	</AppBar> );
 };
+
+export default SidebarAppBar;
diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js
index 2b65e01..52d2442 100644
--- a/modules/settings/assets/js/components/sidebar-menu/index.js
+++ b/modules/settings/assets/js/components/sidebar-menu/index.js
@@ -8,7 +8,7 @@ import { useState } from '@wordpress/element';
 import { useSettings } from '../../hooks';
 import { MenuItems } from './menu';
 
-export const SidebarMenu = () => {
+const SidebarMenu = () => {
 	const { openSidebar, selectedMenu, setSelectedMenu } = useSettings();
 	const [ expandedItems, setExpandedItems ] = useState( {} );
 
@@ -64,3 +64,5 @@ export const SidebarMenu = () => {
 		) ) }
 	</List> );
 };
+
+export default SidebarMenu;

From 9e388c20ce6659d11f43b3c659a6b59eb21ef583 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 25 Nov 2024 20:08:05 +0530
Subject: [PATCH 60/65] add: aliases for imports and fix exports

---
 .eslintrc                                     |  15 ++-
 modules/settings/assets/js/admin.js           |   2 +-
 modules/settings/assets/js/app.js             |   4 +-
 .../js/components/connect-modal/index.js      |   2 +-
 .../assets/js/components/icon-select/index.js |  27 +++--
 .../assets/js/components/icon-size/index.js   |   2 +-
 .../js/components/my-account-menu/index.js    |   6 +-
 .../js/components/notifications/index.js      |   2 +-
 .../js/components/sidebar-app-bar/index.js    |   7 +-
 .../js/components/sidebar-menu/index.js       |   2 +-
 .../assets/js/components/sidebar-menu/menu.js |   2 +-
 .../assets/js/layouts/icon-design-settings.js |   2 +-
 .../js/layouts/position-settings-desktop.js   |   2 +-
 .../assets/js/layouts/position-settings.js    |   2 +-
 modules/settings/assets/js/layouts/sidebar.js |   4 +-
 .../js/pages/accessibility-statement.js       |   4 +-
 .../settings/assets/js/pages/icon-settings.js |   4 +-
 modules/settings/assets/js/pages/index.js     |   6 +-
 modules/settings/assets/js/pages/menu.js      |   4 +-
 package-lock.json                             | 111 +++++++++++++++++-
 package.json                                  |   5 +-
 webpack.config.js                             |  10 ++
 22 files changed, 187 insertions(+), 38 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 0ad9518..a71f548 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -9,6 +9,16 @@
     "babel",
     "react"
   ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["node_modules"]
+      },
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  },
   "env": {
     "browser": true,
     "node": true,
@@ -47,7 +57,10 @@
           "caseInsensitive": false
         }
       }
-    ]
+    ],
+    "import/newline-after-import": ["error", {
+      "count": 1
+    }]
   },
   "parser": "@babel/eslint-parser"
 }
diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js
index 811e977..c3b2510 100644
--- a/modules/settings/assets/js/admin.js
+++ b/modules/settings/assets/js/admin.js
@@ -1,7 +1,7 @@
+import { SettingsProvider, NotificationsProvider } from '@ea11y/hooks';
 import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
 import { PluginSettingsProvider } from './contexts/plugin-settings';
-import { SettingsProvider, NotificationsProvider } from './hooks';
 
 const rootNode = document.getElementById( 'ea11y-app' );
 
diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index 54d4648..b794297 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -3,9 +3,9 @@ import Box from '@elementor/ui/Box';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import Grid from '@elementor/ui/Grid';
 import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from './components';
+import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from '@ea11y/components';
+import { useNotificationSettings, useSettings } from '@ea11y/hooks';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
-import { useNotificationSettings, useSettings } from './hooks';
 import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
index 8ea7f9c..1179e4d 100644
--- a/modules/settings/assets/js/components/connect-modal/index.js
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -3,8 +3,8 @@ import Button from '@elementor/ui/Button';
 import Grid from '@elementor/ui/Grid';
 import Modal from '@elementor/ui/Modal';
 import Typography from '@elementor/ui/Typography';
+import { useAuth, useModal } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
-import { useAuth, useModal } from '../../hooks';
 
 function ConnectModal() {
 	const { isOpen } = useModal();
diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js
index e5d1efd..cd6bd41 100644
--- a/modules/settings/assets/js/components/icon-select/index.js
+++ b/modules/settings/assets/js/components/icon-select/index.js
@@ -4,19 +4,29 @@ import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
 import Typography from '@elementor/ui/Typography';
+import { AccessibilityControlsIcon, AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '@ea11y/icons';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { AccessibilityControlsIcon, AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '../../icons';
 
 const IconSelect = ( props ) => {
 	const [ selectedValue, setSelectedValue ] = useState( 'person' );
-	const optionStyle = { color: 'info.main', fontSize: 44 };
+	const optionStyle = {
+		color: 'info.main', fontSize: 44,
+	};
 
 	const options = [
-		{ value: 'person', icon: <AccessibilityPersonIcon sx={ optionStyle } />, label: __( 'Accessibility Person Icon', 'pojo-accessibility' ) },
-		{ value: 'eye', icon: <AccessibilityEyeIcon sx={ optionStyle } />, label: __( 'Accessibility Eye Icon', 'pojo-accessibility' ) },
-		{ value: 'text', icon: <AccessibilityTextIcon sx={ optionStyle } />, label: __( 'Accessibility Text Badge Icon', 'pojo-accessibility' ) },
-		{ value: 'controls', icon: <AccessibilityControlsIcon sx={ optionStyle } />, label: __( 'Accessibility Controls Slider Icon', 'pojo-accessibility' ) },
+		{
+			value: 'person', icon: <AccessibilityPersonIcon sx={ optionStyle } />, label: __( 'Accessibility Person Icon', 'pojo-accessibility' ),
+		},
+		{
+			value: 'eye', icon: <AccessibilityEyeIcon sx={ optionStyle } />, label: __( 'Accessibility Eye Icon', 'pojo-accessibility' ),
+		},
+		{
+			value: 'text', icon: <AccessibilityTextIcon sx={ optionStyle } />, label: __( 'Accessibility Text Badge Icon', 'pojo-accessibility' ),
+		},
+		{
+			value: 'controls', icon: <AccessibilityControlsIcon sx={ optionStyle } />, label: __( 'Accessibility Controls Slider Icon', 'pojo-accessibility' ),
+		},
 	];
 
 	return (
@@ -59,7 +69,10 @@ const IconSelect = ( props ) => {
 							cursor: 'pointer',
 						} }
 					>{ option.icon }
-						<Radio value={ option.value } sx={ { opacity: 0, position: 'absolute' } } />
+						<Radio value={ option.value }
+							sx={ {
+								opacity: 0, position: 'absolute',
+							} } />
 					</Paper>
 				) ) }
 			</RadioGroup>
diff --git a/modules/settings/assets/js/components/icon-size/index.js b/modules/settings/assets/js/components/icon-size/index.js
index f8114d5..7f041a8 100644
--- a/modules/settings/assets/js/components/icon-size/index.js
+++ b/modules/settings/assets/js/components/icon-size/index.js
@@ -4,9 +4,9 @@ import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
 import Typography from '@elementor/ui/Typography';
+import { AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '@ea11y/icons';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '../../icons';
 
 const IconSize = ( props ) => {
 	const [ selectedValue, setSelectedValue ] = useState( 'medium' );
diff --git a/modules/settings/assets/js/components/my-account-menu/index.js b/modules/settings/assets/js/components/my-account-menu/index.js
index 2ec1de2..8e39d5d 100644
--- a/modules/settings/assets/js/components/my-account-menu/index.js
+++ b/modules/settings/assets/js/components/my-account-menu/index.js
@@ -9,12 +9,12 @@ import Menu from '@elementor/ui/Menu';
 import MenuItem from '@elementor/ui/MenuItem';
 import Typography from '@elementor/ui/Typography';
 import { bindMenu, bindTrigger, usePopupState } from '@elementor/ui/usePopupState';
-import { __ } from '@wordpress/i18n';
-import { useSettings } from '../../hooks';
+import { useSettings } from '@ea11y/hooks';
 import {
 	CreditCardIcon,
 	UserArrowIcon,
-} from '../../icons';
+} from '@ea11y/icons';
+import { __ } from '@wordpress/i18n';
 
 const MyAccountMenu = () => {
 	const { openSidebar } = useSettings();
diff --git a/modules/settings/assets/js/components/notifications/index.js b/modules/settings/assets/js/components/notifications/index.js
index 367ee78..6939475 100644
--- a/modules/settings/assets/js/components/notifications/index.js
+++ b/modules/settings/assets/js/components/notifications/index.js
@@ -1,6 +1,6 @@
 import Alert from '@elementor/ui/Alert';
 import Snackbar from '@elementor/ui/Snackbar';
-import { useNotificationSettings } from '../../hooks';
+import { useNotificationSettings } from '@ea11y/hooks';
 
 const Notifications = ( { type, message } ) => {
 	const {
diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js
index b7ceced..516ebb2 100644
--- a/modules/settings/assets/js/components/sidebar-app-bar/index.js
+++ b/modules/settings/assets/js/components/sidebar-app-bar/index.js
@@ -3,12 +3,9 @@ import Box from '@elementor/ui/Box';
 import IconButton from '@elementor/ui/IconButton';
 import Toolbar from '@elementor/ui/Toolbar';
 import Typography from '@elementor/ui/Typography';
+import { useSettings } from '@ea11y/hooks';
+import { ElementorLogo, SquareRoundedChevronsLeft } from '@ea11y/icons';
 import { __ } from '@wordpress/i18n';
-import { useSettings } from '../../hooks';
-import {
-	ElementorLogo,
-	SquareRoundedChevronsLeft,
-} from '../../icons';
 
 const SidebarAppBar = () => {
 	const { openSidebar, setOpenSidebar } = useSettings();
diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js
index 52d2442..5c9eb01 100644
--- a/modules/settings/assets/js/components/sidebar-menu/index.js
+++ b/modules/settings/assets/js/components/sidebar-menu/index.js
@@ -4,8 +4,8 @@ import ListItem from '@elementor/ui/ListItem';
 import ListItemButton from '@elementor/ui/ListItemButton';
 import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
+import { useSettings } from '@ea11y/hooks';
 import { useState } from '@wordpress/element';
-import { useSettings } from '../../hooks';
 import { MenuItems } from './menu';
 
 const SidebarMenu = () => {
diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js
index 81a8f07..9f82b18 100644
--- a/modules/settings/assets/js/components/sidebar-menu/menu.js
+++ b/modules/settings/assets/js/components/sidebar-menu/menu.js
@@ -1,6 +1,6 @@
 import { PagesIcon } from '@elementor/icons';
+import { WidgetIcon } from '@ea11y/icons';
 import { __ } from '@wordpress/i18n';
-import { WidgetIcon } from '../../icons';
 import { AccessibilityStatement, Menu, IconSettings } from '../../pages';
 
 export const MenuItems = {
diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js
index d0be542..3390d1d 100644
--- a/modules/settings/assets/js/layouts/icon-design-settings.js
+++ b/modules/settings/assets/js/layouts/icon-design-settings.js
@@ -1,8 +1,8 @@
 import Box from '@elementor/ui/Box';
 import Grid from '@elementor/ui/Grid';
 import Typography from '@elementor/ui/Typography';
+import { ColorPicker, IconSelect, IconSize } from '@ea11y/components';
 import { __ } from '@wordpress/i18n';
-import { ColorPicker, IconSelect, IconSize } from '../components';
 
 const IconDesignSettings = () => {
 	return (
diff --git a/modules/settings/assets/js/layouts/position-settings-desktop.js b/modules/settings/assets/js/layouts/position-settings-desktop.js
index ab129ba..52ef005 100644
--- a/modules/settings/assets/js/layouts/position-settings-desktop.js
+++ b/modules/settings/assets/js/layouts/position-settings-desktop.js
@@ -2,9 +2,9 @@ import Box from '@elementor/ui/Box';
 import FormControlLabel from '@elementor/ui/FormControlLabel';
 import Switch from '@elementor/ui/Switch';
 import Typography from '@elementor/ui/Typography';
+import { AlignmentMatrixControl, PositionControl } from '@ea11y/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { AlignmentMatrixControl, PositionControl } from '../components';
 
 const PositionSettingsDesktop = () => {
 	const [ hiddenOnDesktop, setHiddenOnDesktop ] = useState( false );
diff --git a/modules/settings/assets/js/layouts/position-settings.js b/modules/settings/assets/js/layouts/position-settings.js
index 8574cbe..56f5292 100644
--- a/modules/settings/assets/js/layouts/position-settings.js
+++ b/modules/settings/assets/js/layouts/position-settings.js
@@ -6,9 +6,9 @@ import TabPanel from '@elementor/ui/TabPanel';
 import Tabs from '@elementor/ui/Tabs';
 import Typography from '@elementor/ui/Typography';
 import useTabs from '@elementor/ui/useTabs';
+import { PositionSettingsDesktop } from '@ea11y/layouts';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { PositionSettingsDesktop } from '../layouts';
 
 const TABS = {
 	one: 'one',
diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
index aaf462a..1f81610 100644
--- a/modules/settings/assets/js/layouts/sidebar.js
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -1,7 +1,7 @@
 import Box from '@elementor/ui/Box';
 import Drawer from '@elementor/ui/Drawer';
-import { MyAccountMenu, SidebarAppBar, SidebarMenu } from '../components';
-import { useSettings } from '../hooks';
+import { MyAccountMenu, SidebarAppBar, SidebarMenu } from '@ea11y/components';
+import { useSettings } from '@ea11y/hooks';
 
 export const Sidebar = () => {
 	const { openSidebar } = useSettings();
diff --git a/modules/settings/assets/js/pages/accessibility-statement.js b/modules/settings/assets/js/pages/accessibility-statement.js
index 1146e3c..c4a0c85 100644
--- a/modules/settings/assets/js/pages/accessibility-statement.js
+++ b/modules/settings/assets/js/pages/accessibility-statement.js
@@ -1,3 +1,5 @@
-export const AccessibilityStatement = () => {
+const AccessibilityStatement = () => {
 	return ( <h1>AccessibilityStatement</h1> );
 };
+
+export default AccessibilityStatement;
diff --git a/modules/settings/assets/js/pages/icon-settings.js b/modules/settings/assets/js/pages/icon-settings.js
index bfb5556..bb8bb85 100644
--- a/modules/settings/assets/js/pages/icon-settings.js
+++ b/modules/settings/assets/js/pages/icon-settings.js
@@ -1,3 +1,5 @@
-export const IconSettings = () => {
+const IconSettings = () => {
 	return ( <h1>IconSettings</h1> );
 };
+
+export default IconSettings;
diff --git a/modules/settings/assets/js/pages/index.js b/modules/settings/assets/js/pages/index.js
index 142329d..e2531a2 100644
--- a/modules/settings/assets/js/pages/index.js
+++ b/modules/settings/assets/js/pages/index.js
@@ -1,3 +1,3 @@
-export { AccessibilityStatement } from './accessibility-statement';
-export { IconSettings } from './icon-settings';
-export { Menu } from './menu';
+export { default as AccessibilityStatement } from './accessibility-statement';
+export { default as IconSettings } from './icon-settings';
+export { default as Menu } from './menu';
diff --git a/modules/settings/assets/js/pages/menu.js b/modules/settings/assets/js/pages/menu.js
index f4bbf45..2b618ce 100644
--- a/modules/settings/assets/js/pages/menu.js
+++ b/modules/settings/assets/js/pages/menu.js
@@ -1,3 +1,5 @@
-export const Menu = () => {
+const Menu = () => {
 	return ( <h1>Menu</h1> );
 };
+
+export default Menu;
diff --git a/package-lock.json b/package-lock.json
index 6f980a2..aee1775 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,10 @@
 				"@wordpress/date": "^5.10.0",
 				"@wordpress/element": "^6.10.0",
 				"@wordpress/i18n": "^5.10.0",
-				"@wordpress/url": "^4.10.0"
+				"@wordpress/url": "^4.10.0",
+				"husky": "^9.1.6",
+				"prop-types": "^15.8.1",
+				"react-colorful": "^5.6.1"
 			},
 			"devDependencies": {
 				"@eslint/js": "^9.13.0",
@@ -25,6 +28,7 @@
 				"@wordpress/eslint-plugin": "^21.3.0",
 				"@wordpress/scripts": "^30.3.0",
 				"eslint": "^8.57.1",
+				"eslint-import-resolver-webpack": "^0.13.9",
 				"eslint-plugin-babel": "^5.3.1",
 				"eslint-plugin-import": "^2.31.0",
 				"eslint-plugin-jsx-a11y": "^6.10.1",
@@ -10782,6 +10786,104 @@
 				"ms": "^2.1.1"
 			}
 		},
+		"node_modules/eslint-import-resolver-webpack": {
+			"version": "0.13.9",
+			"resolved": "https://registry.npmjs.org/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.9.tgz",
+			"integrity": "sha512-yGngeefNiHXau2yzKKs2BNON4HLpxBabY40BGL/vUSKZtqzjlVsTTZm57jhHULhm+mJEwKsEIIN3NXup5AiiBQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^3.2.7",
+				"enhanced-resolve": "^0.9.1",
+				"find-root": "^1.1.0",
+				"hasown": "^2.0.0",
+				"interpret": "^1.4.0",
+				"is-core-module": "^2.13.1",
+				"is-regex": "^1.1.4",
+				"lodash": "^4.17.21",
+				"resolve": "^2.0.0-next.5",
+				"semver": "^5.7.2"
+			},
+			"engines": {
+				"node": ">= 6"
+			},
+			"peerDependencies": {
+				"eslint-plugin-import": ">=1.4.0",
+				"webpack": ">=1.11.0"
+			}
+		},
+		"node_modules/eslint-import-resolver-webpack/node_modules/debug": {
+			"version": "3.2.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+			"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.1"
+			}
+		},
+		"node_modules/eslint-import-resolver-webpack/node_modules/enhanced-resolve": {
+			"version": "0.9.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz",
+			"integrity": "sha512-kxpoMgrdtkXZ5h0SeraBS1iRntpTpQ3R8ussdb38+UAFnMGX5DDyJXePm+OCHOcoXvHDw7mc2erbJBpDnl7TPw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.2",
+				"memory-fs": "^0.2.0",
+				"tapable": "^0.1.8"
+			},
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
+		"node_modules/eslint-import-resolver-webpack/node_modules/interpret": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+			"integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/eslint-import-resolver-webpack/node_modules/resolve": {
+			"version": "2.0.0-next.5",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+			"integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-core-module": "^2.13.0",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/eslint-import-resolver-webpack/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
+		"node_modules/eslint-import-resolver-webpack/node_modules/tapable": {
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
+			"integrity": "sha512-jX8Et4hHg57mug1/079yitEKWGB3LCwoxByLsNim89LABq8NqgiX+6iYVOsq0vX8uJHkU+DZ5fnq95f800bEsQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
 		"node_modules/eslint-module-utils": {
 			"version": "2.12.0",
 			"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
@@ -15812,6 +15914,13 @@
 			"resolved": "https://registry.npmjs.org/memize/-/memize-2.1.0.tgz",
 			"integrity": "sha512-yywVJy8ctVlN5lNPxsep5urnZ6TTclwPEyigM9M3Bi8vseJBOfqNrGWN/r8NzuIt3PovM323W04blJfGQfQSVg=="
 		},
+		"node_modules/memory-fs": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
+			"integrity": "sha512-+y4mDxU4rvXXu5UDSGCGNiesFmwCHuefGMoPCO1WYucNYj7DsLqrFaa2fXVI0H+NNiPTwwzKwspn9yTZqUGqng==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/meow": {
 			"version": "9.0.0",
 			"resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
diff --git a/package.json b/package.json
index 5d8b204..e8767b2 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
 		"@wordpress/eslint-plugin": "^21.3.0",
 		"@wordpress/scripts": "^30.3.0",
 		"eslint": "^8.57.1",
+		"eslint-import-resolver-webpack": "^0.13.9",
 		"eslint-plugin-babel": "^5.3.1",
 		"eslint-plugin-import": "^2.31.0",
 		"eslint-plugin-jsx-a11y": "^6.10.1",
@@ -42,7 +43,7 @@
 		"@wordpress/i18n": "^5.10.0",
 		"@wordpress/url": "^4.10.0",
 		"husky": "^9.1.6",
-		"react-colorful": "^5.6.1",
-		"prop-types": "^15.8.1"
+		"prop-types": "^15.8.1",
+		"react-colorful": "^5.6.1"
 	}
 }
diff --git a/webpack.config.js b/webpack.config.js
index b40d4aa..ae6ffc0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,4 +17,14 @@ module.exports = {
 		...defaultConfig.output,
 		path: path.resolve( process.cwd(), 'assets/build' ),
 	},
+	resolve: {
+		alias: {
+			'@ea11y/hooks': path.resolve( __dirname, 'modules/settings/assets/js/hooks/' ),
+			'@ea11y/components': path.resolve( __dirname, 'modules/settings/assets/js/components/' ),
+			'@ea11y/icons': path.resolve( __dirname, 'modules/settings/assets/js/icons/' ),
+			'@ea11y/layouts': path.resolve( __dirname, 'modules/settings/assets/js/layouts/' ),
+			'@ea11y/pages': path.resolve( __dirname, 'modules/settings/assets/js/pages/' ),
+		},
+		extensions: [ '.js', '.jsx' ],
+	},
 };

From 8bc480fcebfa1982510448b7ee1b338a1d753f39 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 25 Nov 2024 21:00:30 +0530
Subject: [PATCH 61/65] fix: height and styling of the layout

---
 modules/settings/assets/css/style.css | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
index fa53674..988c40e 100644
--- a/modules/settings/assets/css/style.css
+++ b/modules/settings/assets/css/style.css
@@ -12,23 +12,13 @@ body {
 html:not([dir='rtl']) #ea11y-app {
     margin-left: -20px;
     background: white;
-	height: 97vh;
+	height: calc(100vh - 32px);
 }
 
 html[dir='rtl'] #ea11y-app {
 	margin-right: -20px;
     background: white;
-	height: 97vh;
-}
-
-html:not([dir='rtl']) #ea11y-app-top-bar {
-	margin-left: -20px;
-	margin-bottom: 20px;
-}
-
-html[dir='rtl'] #ea11y-app-top-bar {
-	margin-right: -20px;
-	margin-bottom: 20px;
+	height: calc(100vh - 32px);
 }
 
 #ea11y-app * {

From 27177fb35333d47a366e2b757552b1ea857be4af Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 25 Nov 2024 21:01:06 +0530
Subject: [PATCH 62/65] fix: unhide wp footer

---
 modules/settings/assets/css/style.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/modules/settings/assets/css/style.css b/modules/settings/assets/css/style.css
index 988c40e..8fa3d9b 100644
--- a/modules/settings/assets/css/style.css
+++ b/modules/settings/assets/css/style.css
@@ -2,9 +2,6 @@ body {
 	background: #fff;
 }
 
-#wpfooter {
-	display: none;
-}
 .wrap {
 	margin-top: 0;
 }

From 8d2565f447c7c2485e8bed4f79a2aae7ac7dad35 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Mon, 25 Nov 2024 21:08:33 +0530
Subject: [PATCH 63/65] update: keep widget menu open on page load (default)

---
 modules/settings/assets/js/components/sidebar-menu/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js
index 5c9eb01..9565437 100644
--- a/modules/settings/assets/js/components/sidebar-menu/index.js
+++ b/modules/settings/assets/js/components/sidebar-menu/index.js
@@ -10,7 +10,7 @@ import { MenuItems } from './menu';
 
 const SidebarMenu = () => {
 	const { openSidebar, selectedMenu, setSelectedMenu } = useSettings();
-	const [ expandedItems, setExpandedItems ] = useState( {} );
+	const [ expandedItems, setExpandedItems ] = useState( { widget: true } );
 
 	const handleSelectedMenu = ( parentKey, childKey ) => {
 		if ( childKey ) {

From eb92d9eaaa7ce279d2175ac74925db14a111d9c0 Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 26 Nov 2024 20:25:20 +0530
Subject: [PATCH 64/65] update: linter rules to move first prop to new line

---
 .eslintrc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc b/.eslintrc
index a71f548..e17cfe0 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -37,6 +37,7 @@
     "no-console": "off",
     "react-hooks/exhaustive-deps": "off",
     "react/jsx-max-props-per-line": [1, { "maximum": { "single": 2, "multi": 1 } }],
+    "react/jsx-first-prop-new-line": ["error", "multiline"],
     "strict": [ "error", "global" ],
     "curly": "warn",
     "import/order": [

From 435ab3d82e6da873ee9809ddc1e2ba7f0eac242b Mon Sep 17 00:00:00 2001
From: Nirbhay <nirbhayr@elementor.com>
Date: Tue, 26 Nov 2024 20:25:27 +0530
Subject: [PATCH 65/65] update: linter rules to move first prop to new line

---
 modules/settings/assets/js/app.js             |  6 +-
 .../js/components/admin-top-bar/index.js      |  6 +-
 .../alignment-matrix-control/index.js         |  6 +-
 .../assets/js/components/bottom-bar/index.js  |  3 +-
 .../js/components/color-picker/index.js       |  9 +-
 .../connect-modal/connect-modal-icon.js       | 96 ++++++++++++-------
 .../js/components/connect-modal/index.js      |  9 +-
 .../assets/js/components/icon-select/index.js |  3 +-
 .../js/components/my-account-menu/index.js    |  3 +-
 .../js/components/notifications/index.js      |  3 +-
 .../js/components/position-control/index.js   |  3 +-
 .../js/components/sidebar-app-bar/index.js    |  6 +-
 .../js/components/sidebar-menu/index.js       |  6 +-
 .../assets/js/icons/accessibility-controls.js |  6 +-
 .../assets/js/icons/accessibility-eye.js      |  9 +-
 .../assets/js/icons/accessibility-person.js   |  6 +-
 .../assets/js/icons/accessibility-text.js     |  9 +-
 .../settings/assets/js/icons/credit-card.js   |  6 +-
 .../assets/js/icons/elementor-logo.js         |  3 +-
 .../js/icons/square-rounded-chevrons-left.js  |  3 +-
 .../settings/assets/js/icons/user-arrow.js    |  6 +-
 modules/settings/assets/js/icons/widget.js    |  9 +-
 .../assets/js/layouts/icon-design-settings.js |  9 +-
 .../js/layouts/position-settings-desktop.js   |  9 +-
 .../assets/js/layouts/position-settings.js    |  3 +-
 modules/settings/assets/js/layouts/sidebar.js |  3 +-
 26 files changed, 160 insertions(+), 80 deletions(-)

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
index b794297..1a10f88 100644
--- a/modules/settings/assets/js/app.js
+++ b/modules/settings/assets/js/app.js
@@ -23,11 +23,13 @@ const App = () => {
 		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
 			<ThemeProvider colorScheme="light">
 				{ ! isConnected && <ConnectModal /> }
-				<Grid display="flex"
+				<Grid
+					display="flex"
 					flexDirection="row"
 					height="100%">
 					<Sidebar />
-					<Box width="100%"
+					<Box
+						width="100%"
 						display="flex"
 						flexDirection="column"
 						justifyContent="space-between"
diff --git a/modules/settings/assets/js/components/admin-top-bar/index.js b/modules/settings/assets/js/components/admin-top-bar/index.js
index 08417f7..ec97e36 100644
--- a/modules/settings/assets/js/components/admin-top-bar/index.js
+++ b/modules/settings/assets/js/components/admin-top-bar/index.js
@@ -14,10 +14,12 @@ export const AdminTopBar = () => {
 		borderBottom: '1px solid rgba(0, 0, 0, 0.12)' };
 	return (
 		<AppBar position="static">
-			<Toolbar direction="row"
+			<Toolbar
+				direction="row"
 				sx={ toolBarStyle }
 				padding={ 2 }>
-				<Link color="secondary"
+				<Link
+					color="secondary"
 					underline="hover"
 					href={ HELP_LINK }
 					target="_blank"
diff --git a/modules/settings/assets/js/components/alignment-matrix-control/index.js b/modules/settings/assets/js/components/alignment-matrix-control/index.js
index 0040c61..9153498 100644
--- a/modules/settings/assets/js/components/alignment-matrix-control/index.js
+++ b/modules/settings/assets/js/components/alignment-matrix-control/index.js
@@ -31,7 +31,8 @@ const AlignmentMatrixControl = () => {
 					{ __( 'Default Position', 'pojo-accessibility' ) }
 				</Typography>
 			</FormLabel>
-			<Box display="flex"
+			<Box
+				display="flex"
 				justifyContent="center"
 				padding={ 2 }
 				width="100%"
@@ -53,7 +54,8 @@ const AlignmentMatrixControl = () => {
 						width: '100px',
 					} }
 				>
-					{ options.map( ( option, i ) => <FormControlLabel sx={ { margin: 0 } }
+					{ options.map( ( option, i ) => <FormControlLabel
+						sx={ { margin: 0 } }
 						key={ i }
 						value={ option.value }
 						control={ <Radio color="secondary" /> } /> ) }
diff --git a/modules/settings/assets/js/components/bottom-bar/index.js b/modules/settings/assets/js/components/bottom-bar/index.js
index 1e27212..5ecc9ec 100644
--- a/modules/settings/assets/js/components/bottom-bar/index.js
+++ b/modules/settings/assets/js/components/bottom-bar/index.js
@@ -4,7 +4,8 @@ import { __ } from '@wordpress/i18n';
 
 export const BottomBar = () => {
 	return (
-		<Box display="flex"
+		<Box
+			display="flex"
 			justifyContent="end"
 			p={ 2 }
 			width="100%"
diff --git a/modules/settings/assets/js/components/color-picker/index.js b/modules/settings/assets/js/components/color-picker/index.js
index 5e3222c..a3cf6ca 100644
--- a/modules/settings/assets/js/components/color-picker/index.js
+++ b/modules/settings/assets/js/components/color-picker/index.js
@@ -18,7 +18,8 @@ const ColorPicker = () => {
 					{ __( 'Color', 'pojo-accessibility' ) }
 				</Typography>
 			</FormLabel>
-			<Grid padding={ 1 }
+			<Grid
+				padding={ 1 }
 				border={ 1 }
 				borderColor="divider"
 				borderRadius={ 1 }
@@ -30,11 +31,13 @@ const ColorPicker = () => {
 					className="widget-settings-color-picker"
 				/>
 				<Grid marginTop={ 2 } display="flex">
-					<Box padding={ 2 }
+					<Box
+						padding={ 2 }
 						sx={ { backgroundColor: color } }
 						borderRadius={ 1 }
 						marginRight={ 1 }></Box>
-					<HexColorInput color={ color }
+					<HexColorInput
+						color={ color }
 						onChange={ setColor }
 						style={ {
 							width: '100%',
diff --git a/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js b/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js
index ef488b8..8bc1367 100644
--- a/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js
+++ b/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js
@@ -10,7 +10,8 @@ const ConnectModalIcon = () => {
 		>
 			<g clipPath="url(#clip0_4586_17927)">
 				<path d="M260.135 124.169C272.348 115.941 281.79 100.886 279.712 85.5902C278.462 76.3975 273.222 68.2597 266.566 62.3974C259.909 56.5352 251.898 52.7376 243.796 49.6482C227.396 43.3791 209.747 39.702 192.459 42.4297C177.34 44.8107 179.478 48.1261 164.042 50.9744C132.237 56.8667 118.398 42.0529 101.471 52.5115C92.0441 58.3285 88.5805 68.8775 87.5263 72.2382C84.3187 82.3803 86.3367 91.1058 87.6167 96.7119C89.725 105.874 93.6103 112.249 95.583 115.414C98.1732 119.588 101.652 125.179 107.856 130.092C109.438 131.343 123.518 143.278 141.017 140.083C151.227 138.215 160.413 132.232 170.427 129.323C178.273 127.048 186.571 126.807 194.522 128.434C202.488 130.062 208.949 135.984 216.524 137.717C222.487 139.089 230.258 135.819 236.056 134.312C244.459 132.126 252.771 129.127 260.15 124.154L260.135 124.169Z" fill="#FAE8FF" />
-				<path d="M181.455 131.036C147.504 131.169 104.259 131.303 70.3078 131.451C69.6784 126.107 73.2676 120.576 78.6114 118.62C83.9685 116.652 90.6114 118.433 94.04 122.745C92.3525 115.647 94.6293 107.826 99.9194 102.482C100.589 101.812 101.299 101.183 102.049 100.594C111.919 92.8793 127.214 95.6382 133.241 106.272C134.848 109.111 135.022 111.924 135.049 112.741C135.236 118.634 131.567 122.799 130.442 123.991C134.594 121.527 140.915 118.607 149.058 117.669C154.174 117.08 162.678 116.089 171.009 120.723C176.835 123.964 179.995 128.518 181.455 131.036Z"
+				<path
+					d="M181.455 131.036C147.504 131.169 104.259 131.303 70.3078 131.451C69.6784 126.107 73.2676 120.576 78.6114 118.62C83.9685 116.652 90.6114 118.433 94.04 122.745C92.3525 115.647 94.6293 107.826 99.9194 102.482C100.589 101.812 101.299 101.183 102.049 100.594C111.919 92.8793 127.214 95.6382 133.241 106.272C134.848 109.111 135.022 111.924 135.049 112.741C135.236 118.634 131.567 122.799 130.442 123.991C134.594 121.527 140.915 118.607 149.058 117.669C154.174 117.08 162.678 116.089 171.009 120.723C176.835 123.964 179.995 128.518 181.455 131.036Z"
 					fill="black"
 					stroke="black"
 					strokeWidth="0.98"
@@ -19,78 +20,91 @@ const ConnectModalIcon = () => {
 				<path d="M253.817 135.951L122.487 152.036L116.795 73.8079L248.018 63.04L253.817 135.951Z" fill="white" />
 				<path d="M122.486 152.692C122.339 152.692 122.192 152.639 122.071 152.545C121.937 152.438 121.844 152.264 121.83 152.089L116.125 73.8617C116.098 73.5001 116.366 73.1921 116.728 73.1653L247.951 62.3975C248.125 62.3975 248.299 62.4376 248.433 62.5582C248.567 62.6653 248.647 62.826 248.661 63.0001L254.46 135.911C254.486 136.259 254.232 136.567 253.884 136.621L122.567 152.692C122.567 152.692 122.513 152.692 122.486 152.692ZM117.491 74.4109L123.089 151.299L253.107 135.389L247.415 63.7501L117.491 74.4109Z" fill="black" />
 				<path d="M122.486 152.692C122.339 152.692 122.192 152.639 122.071 152.545C121.937 152.438 121.844 152.264 121.83 152.089L116.125 73.8617C116.098 73.5001 116.366 73.1921 116.728 73.1653L247.951 62.3975C248.125 62.3975 248.299 62.4376 248.433 62.5582C248.567 62.6653 248.647 62.826 248.661 63.0001L254.46 135.911C254.486 136.259 254.232 136.567 253.884 136.621L122.567 152.692C122.567 152.692 122.513 152.692 122.486 152.692ZM117.491 74.4109L123.089 151.299L253.107 135.389L247.415 63.7501L117.491 74.4109Z" fill="black" />
-				<rect x="169.268"
+				<rect
+					x="169.268"
 					y="83.6924"
 					width="122.464"
 					height="74.8929"
 					fill="url(#pattern0_4586_17927)" />
 				<path d="M116.795 73.8079L190.322 114.978L248.018 63.04L116.795 73.8079Z" fill="white" />
 				<path d="M190.322 115.634C190.214 115.634 190.107 115.607 190 115.554L116.473 74.384C116.219 74.2367 116.085 73.9555 116.152 73.6742C116.219 73.393 116.447 73.1787 116.741 73.1653L247.964 62.3974C248.259 62.3707 248.514 62.5314 248.621 62.7858C248.728 63.0403 248.661 63.3483 248.46 63.5358L190.763 115.487C190.643 115.594 190.482 115.661 190.322 115.661V115.634ZM118.991 74.2769L190.228 114.174L246.13 63.8439L118.991 74.2769Z" fill="black" />
-				<path d="M234.035 152.21C234.624 143.384 240.37 135.094 248.432 131.464C256.495 127.835 266.513 129 273.517 134.397C269.272 127.045 271.736 116.585 278.807 111.897C285.879 107.21 296.473 109.018 301.589 115.795C300.705 106.969 304.508 97.8081 311.379 92.1965C318.249 86.5849 327.986 84.6965 336.464 87.3215"
+				<path
+					d="M234.035 152.21C234.624 143.384 240.37 135.094 248.432 131.464C256.495 127.835 266.513 129 273.517 134.397C269.272 127.045 271.736 116.585 278.807 111.897C285.879 107.21 296.473 109.018 301.589 115.795C300.705 106.969 304.508 97.8081 311.379 92.1965C318.249 86.5849 327.986 84.6965 336.464 87.3215"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeMiterlimit="10" />
-				<path d="M73.7629 84.469L74.0307 85.085C74.7673 87.6699 80.2852 89.5047 86.2048 88.8216C87.2897 88.7011 88.3879 88.4868 89.4727 88.1788C89.7539 88.0984 90.0218 88.0181 90.2896 87.9377C96.8521 85.8886 101.406 81.9913 100.575 79.0582L100.308 78.4422C99.437 75.3752 91.87 73.3663 84.8655 75.3484C77.8611 77.3306 72.8923 81.4154 73.7495 84.4824L73.7629 84.469Z"
+				<path
+					d="M73.7629 84.469L74.0307 85.085C74.7673 87.6699 80.2852 89.5047 86.2048 88.8216C87.2897 88.7011 88.3879 88.4868 89.4727 88.1788C89.7539 88.0984 90.0218 88.0181 90.2896 87.9377C96.8521 85.8886 101.406 81.9913 100.575 79.0582L100.308 78.4422C99.437 75.3752 91.87 73.3663 84.8655 75.3484C77.8611 77.3306 72.8923 81.4154 73.7495 84.4824L73.7629 84.469Z"
 					fill="white"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M86.2044 88.8215C87.2893 88.701 88.3875 88.4867 89.4723 88.1786C89.7535 88.0983 90.0214 88.0179 90.2893 87.9376C91.441 86.5313 91.95 84.134 91.4678 81.6161C90.7714 77.9599 88.2669 75.4152 85.883 75.9242C83.4857 76.4465 82.1062 79.8215 82.8026 83.4777C83.2714 86.009 84.6241 88.0045 86.191 88.8215H86.2044Z"
+				<path
+					d="M86.2044 88.8215C87.2893 88.701 88.3875 88.4867 89.4723 88.1786C89.7535 88.0983 90.0214 88.0179 90.2893 87.9376C91.441 86.5313 91.95 84.134 91.4678 81.6161C90.7714 77.9599 88.2669 75.4152 85.883 75.9242C83.4857 76.4465 82.1062 79.8215 82.8026 83.4777C83.2714 86.009 84.6241 88.0045 86.191 88.8215H86.2044Z"
 					fill="black"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M69.4368 70.3393L69.4636 70.7143C69.7716 72.1875 67.4948 74.5178 64.3743 75.6964C63.7984 75.9107 63.1957 76.0848 62.5797 76.2187C62.419 76.2455 62.2582 76.2857 62.1109 76.3125C58.3207 76.9821 55.0529 76.2187 54.7047 74.5446L54.6779 74.1696C54.3163 72.4285 57.5707 69.4821 61.5618 68.6652C65.5529 67.8482 69.0752 68.5982 69.4368 70.3527V70.3393Z"
+				<path
+					d="M69.4368 70.3393L69.4636 70.7143C69.7716 72.1875 67.4948 74.5178 64.3743 75.6964C63.7984 75.9107 63.1957 76.0848 62.5797 76.2187C62.419 76.2455 62.2582 76.2857 62.1109 76.3125C58.3207 76.9821 55.0529 76.2187 54.7047 74.5446L54.6779 74.1696C54.3163 72.4285 57.5707 69.4821 61.5618 68.6652C65.5529 67.8482 69.0752 68.5982 69.4368 70.3527V70.3393Z"
 					fill="white"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M64.3746 75.6968C63.7987 75.9111 63.196 76.0852 62.58 76.2191C62.4193 76.2459 62.2585 76.2861 62.1112 76.3129C61.1737 75.9111 60.3032 74.8531 59.9014 73.4736C59.2987 71.4781 59.9014 69.5629 61.2139 69.2147C62.5398 68.8531 64.0934 70.179 64.696 72.1879C65.1112 73.5674 64.9505 74.9066 64.388 75.7236L64.3746 75.6968Z"
+				<path
+					d="M64.3746 75.6968C63.7987 75.9111 63.196 76.0852 62.58 76.2191C62.4193 76.2459 62.2585 76.2861 62.1112 76.3129C61.1737 75.9111 60.3032 74.8531 59.9014 73.4736C59.2987 71.4781 59.9014 69.5629 61.2139 69.2147C62.5398 68.8531 64.0934 70.179 64.696 72.1879C65.1112 73.5674 64.9505 74.9066 64.388 75.7236L64.3746 75.6968Z"
 					fill="black"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
 				<path d="M166.709 49.7412C163 52.2189 161.165 57.0805 161.982 61.4734C162.799 65.8662 166.04 69.643 170.111 71.4644C174.183 73.2859 178.991 73.2323 183.183 71.6921C187.375 70.1519 190.977 67.2055 193.656 63.6296" fill="white" />
-				<path d="M166.709 49.7412C163 52.2189 161.165 57.0805 161.982 61.4734C162.799 65.8662 166.04 69.643 170.111 71.4644C174.183 73.2859 178.991 73.2323 183.183 71.6921C187.375 70.1519 190.977 67.2055 193.656 63.6296"
+				<path
+					d="M166.709 49.7412C163 52.2189 161.165 57.0805 161.982 61.4734C162.799 65.8662 166.04 69.643 170.111 71.4644C174.183 73.2859 178.991 73.2323 183.183 71.6921C187.375 70.1519 190.977 67.2055 193.656 63.6296"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeMiterlimit="10" />
-				<path d="M231.504 99.4555L181.428 106.46L179.66 103.795L232.562 94.835L231.504 99.4555Z"
+				<path
+					d="M231.504 99.4555L181.428 106.46L179.66 103.795L232.562 94.835L231.504 99.4555Z"
 					fill="black"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M230.325 85.2587L231.798 98.7319L181.16 105.656L179.968 91.5399L185.62 90.7631C191.218 89.9997 199.133 87.6962 198.423 81.2542L195.169 51.4685L204.838 50.1426L208.16 80.5176C208.856 86.9462 213.53 87.5354 219.128 86.772L230.338 85.2453L230.325 85.2587Z"
+				<path
+					d="M230.325 85.2587L231.798 98.7319L181.16 105.656L179.968 91.5399L185.62 90.7631C191.218 89.9997 199.133 87.6962 198.423 81.2542L195.169 51.4685L204.838 50.1426L208.16 80.5176C208.856 86.9462 213.53 87.5354 219.128 86.772L230.338 85.2453L230.325 85.2587Z"
 					fill="#F3BAFD"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
 				<path d="M206.914 74.8926C206.338 74.7988 204.222 74.5444 202.146 75.8435C199.468 77.5176 199.013 80.4238 198.946 80.839C198.638 78.5354 198.33 76.2185 198.021 73.9149L206.633 72.7363L206.901 74.8926H206.914Z" fill="black" />
-				<path d="M215.553 56.8658C215.566 56.9729 215.58 57.0667 215.593 57.1604C215.888 59.9461 215.044 62.4774 213.397 64.5801C213.357 64.6337 213.33 64.6738 213.276 64.714C210.906 67.6336 206.941 69.6961 202.307 70.3122C195.504 71.2363 189.504 69.1336 187.361 64.0176C187.227 63.6694 187.093 63.3211 186.986 62.9595C186.812 62.3703 186.678 61.7542 186.611 61.1113C185.941 55.0176 190.669 49.2319 197.486 47.3703C198.236 47.1694 198.986 47.0087 199.776 46.9015C201.464 46.6738 203.098 46.6872 204.651 46.9417C206.017 47.1426 207.29 47.531 208.482 48.0399C212.272 49.714 215.004 52.8881 215.553 56.8524V56.8658Z"
+				<path
+					d="M215.553 56.8658C215.566 56.9729 215.58 57.0667 215.593 57.1604C215.888 59.9461 215.044 62.4774 213.397 64.5801C213.357 64.6337 213.33 64.6738 213.276 64.714C210.906 67.6336 206.941 69.6961 202.307 70.3122C195.504 71.2363 189.504 69.1336 187.361 64.0176C187.227 63.6694 187.093 63.3211 186.986 62.9595C186.812 62.3703 186.678 61.7542 186.611 61.1113C185.941 55.0176 190.669 49.2319 197.486 47.3703C198.236 47.1694 198.986 47.0087 199.776 46.9015C201.464 46.6738 203.098 46.6872 204.651 46.9417C206.017 47.1426 207.29 47.531 208.482 48.0399C212.272 49.714 215.004 52.8881 215.553 56.8524V56.8658Z"
 					fill="#F3BAFD"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M209.54 73.018L196.442 74.8127C195.504 74.9466 194.634 74.277 194.513 73.3395L194.326 71.8796C194.205 70.9421 194.875 70.0582 195.812 69.9377L208.91 68.143C209.848 68.0091 210.718 68.6788 210.839 69.6163L211.026 71.0761C211.147 72.0136 210.477 72.8975 209.54 73.018Z"
+				<path
+					d="M209.54 73.018L196.442 74.8127C195.504 74.9466 194.634 74.277 194.513 73.3395L194.326 71.8796C194.205 70.9421 194.875 70.0582 195.812 69.9377L208.91 68.143C209.848 68.0091 210.718 68.6788 210.839 69.6163L211.026 71.0761C211.147 72.0136 210.477 72.8975 209.54 73.018Z"
 					fill="#F3BAFD"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M233.325 98.5042L179.66 105.83L178.146 91.6069L231.812 84.2676L233.325 98.5042Z"
+				<path
+					d="M233.325 98.5042L179.66 105.83L178.146 91.6069L231.812 84.2676L233.325 98.5042Z"
 					fill="#F3BAFD"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M233.325 98.5039L179.66 105.83L179.365 101.517L233.03 94.1914L233.325 98.5039Z"
+				<path
+					d="M233.325 98.5039L179.66 105.83L179.365 101.517L233.03 94.1914L233.325 98.5039Z"
 					fill="black"
 					stroke="black"
 					strokeWidth="0.98"
@@ -98,98 +112,116 @@ const ConnectModalIcon = () => {
 					strokeLinejoin="round" />
 				<path d="M197.677 57.7778C199.344 55.3424 199.419 52.4943 197.844 51.4164C196.269 50.3385 193.641 51.439 191.974 53.8744C190.307 56.3099 190.233 59.158 191.807 60.2358C193.382 61.3137 196.01 60.2132 197.677 57.7778Z" fill="white" />
 				<path d="M182.513 25.4198C174.718 24.5225 167.299 27.8037 163.749 33.8037C159.397 41.1832 162.839 49.3662 163.682 51.3886C166.026 56.9734 170.031 59.893 172.495 61.835C177.129 65.518 183.075 68.3841 188.848 67.0582C190.281 66.7234 191.7 66.1207 192.745 65.0761C193.79 64.0448 194.446 62.5314 194.205 61.0716C193.937 59.4243 192.665 58.1654 191.459 57.0136C188.687 54.3752 184.321 50.6788 178.602 44.7725" fill="white" />
-				<path d="M182.513 25.4198C174.718 24.5225 167.299 27.8037 163.749 33.8037C159.397 41.1832 162.839 49.3662 163.682 51.3886C166.026 56.9734 170.031 59.893 172.495 61.835C177.129 65.518 183.075 68.3841 188.848 67.0582C190.281 66.7234 191.7 66.1207 192.745 65.0761C193.79 64.0448 194.446 62.5314 194.205 61.0716C193.937 59.4243 192.665 58.1654 191.459 57.0136C188.687 54.3752 184.321 50.6788 178.602 44.7725"
+				<path
+					d="M182.513 25.4198C174.718 24.5225 167.299 27.8037 163.749 33.8037C159.397 41.1832 162.839 49.3662 163.682 51.3886C166.026 56.9734 170.031 59.893 172.495 61.835C177.129 65.518 183.075 68.3841 188.848 67.0582C190.281 66.7234 191.7 66.1207 192.745 65.0761C193.79 64.0448 194.446 62.5314 194.205 61.0716C193.937 59.4243 192.665 58.1654 191.459 57.0136C188.687 54.3752 184.321 50.6788 178.602 44.7725"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeMiterlimit="10" />
-				<path d="M207.919 32.6784C208.642 31.6873 209.285 30.4016 208.776 29.29C208.2 28.0311 206.54 27.79 205.16 27.7498C200.901 27.6561 196.642 27.9641 192.45 28.6605C190.374 29.0088 188.272 29.4641 186.41 30.4686C184.549 31.473 182.941 33.107 182.392 35.1427C181.843 37.1516 182.486 39.4954 184.133 40.7945C186.584 42.723 193.535 40.8748 196.401 40.2186C200.955 39.1739 205.16 36.4954 207.932 32.6918L207.919 32.6784Z"
+				<path
+					d="M207.919 32.6784C208.642 31.6873 209.285 30.4016 208.776 29.29C208.2 28.0311 206.54 27.79 205.16 27.7498C200.901 27.6561 196.642 27.9641 192.45 28.6605C190.374 29.0088 188.272 29.4641 186.41 30.4686C184.549 31.473 182.941 33.107 182.392 35.1427C181.843 37.1516 182.486 39.4954 184.133 40.7945C186.584 42.723 193.535 40.8748 196.401 40.2186C200.955 39.1739 205.16 36.4954 207.932 32.6918L207.919 32.6784Z"
 					fill="white"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeMiterlimit="10" />
 				<path d="M277.991 111.161C276.651 94.4195 257.674 76.0447 248.031 67.2456C244.642 64.1518 239.861 60.1339 232.816 57.7768C229.642 56.7188 228.008 56.1831 225.678 56.3706C217.629 57.0268 214.147 65.2768 209.834 63.817C207.919 63.1741 206.928 60.9643 206.647 59.6116C206.044 56.5581 208.294 53.8259 210.142 51.5357C219.45 39.9643 223.321 37.6741 222.624 35.6518C222.022 33.9241 218.754 34.0581 203.727 33.6831C194.044 33.4286 191.031 32.9465 190.241 34.6072C188.941 37.3125 194.62 43.567 197.54 50.8125C197.794 51.4554 198.276 53.0625 198.116 55.0714C197.995 56.5045 197.379 57.9509 196.214 58.8081C194.151 60.3081 191.232 59.4375 188.982 58.2322C180.424 53.6652 174.303 44.8125 173.044 35.1965C172.508 31.1518 173.406 28.9688 174.29 27.5491C176.232 24.4286 180.008 23.1965 180.892 22.9152C205.174 14.9732 223.776 17.6786 223.776 17.6786C260.205 22.9956 299.406 49.5536 305.808 53.9464" fill="url(#paint0_linear_4586_17927)" />
-				<path d="M277.991 111.161C276.651 94.4195 257.674 76.0447 248.031 67.2456C244.642 64.1518 239.861 60.134 232.816 57.7768C229.642 56.7188 228.008 56.1831 225.678 56.3706C217.629 57.0268 214.147 65.2768 209.834 63.817C207.919 63.1741 206.928 60.9643 206.647 59.6116C206.044 56.5581 208.294 53.8259 210.142 51.5357C219.45 39.9643 223.321 37.6741 222.624 35.6518C222.022 33.9241 218.754 34.0581 203.727 33.6831C194.044 33.4286 191.031 32.9465 190.241 34.6072C188.941 37.3125 194.62 43.567 197.54 50.8125C197.794 51.4554 198.276 53.0625 198.116 55.0714C197.995 56.5045 197.379 57.9509 196.214 58.8081C194.151 60.3081 191.232 59.4375 188.982 58.2322C180.424 53.6652 174.303 44.8125 173.044 35.1965C172.508 31.1518 173.406 28.9688 174.29 27.5491C176.232 24.4286 180.008 23.1965 180.892 22.9152C205.174 14.9732 223.776 17.6786 223.776 17.6786C260.205 22.9956 299.406 49.5536 305.808 53.9464"
+				<path
+					d="M277.991 111.161C276.651 94.4195 257.674 76.0447 248.031 67.2456C244.642 64.1518 239.861 60.134 232.816 57.7768C229.642 56.7188 228.008 56.1831 225.678 56.3706C217.629 57.0268 214.147 65.2768 209.834 63.817C207.919 63.1741 206.928 60.9643 206.647 59.6116C206.044 56.5581 208.294 53.8259 210.142 51.5357C219.45 39.9643 223.321 37.6741 222.624 35.6518C222.022 33.9241 218.754 34.0581 203.727 33.6831C194.044 33.4286 191.031 32.9465 190.241 34.6072C188.941 37.3125 194.62 43.567 197.54 50.8125C197.794 51.4554 198.276 53.0625 198.116 55.0714C197.995 56.5045 197.379 57.9509 196.214 58.8081C194.151 60.3081 191.232 59.4375 188.982 58.2322C180.424 53.6652 174.303 44.8125 173.044 35.1965C172.508 31.1518 173.406 28.9688 174.29 27.5491C176.232 24.4286 180.008 23.1965 180.892 22.9152C205.174 14.9732 223.776 17.6786 223.776 17.6786C260.205 22.9956 299.406 49.5536 305.808 53.9464"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeMiterlimit="10"
 					strokeLinecap="round" />
-				<path d="M63.9731 51.924L64.6428 53.4374C66.4642 59.7722 81.5177 64.5937 97.8436 63.3079C100.83 63.0669 103.87 62.6249 106.884 61.9553C107.647 61.7812 108.411 61.607 109.161 61.4062C127.375 56.8526 140.178 47.7053 138.116 40.5133L137.446 38.9999C135.29 31.4999 114.611 26.1294 95.2052 30.482C75.8124 34.8347 61.8169 44.424 63.9731 51.924Z"
+				<path
+					d="M63.9731 51.924L64.6428 53.4374C66.4642 59.7722 81.5177 64.5937 97.8436 63.3079C100.83 63.0669 103.87 62.6249 106.884 61.9553C107.647 61.7812 108.411 61.607 109.161 61.4062C127.375 56.8526 140.178 47.7053 138.116 40.5133L137.446 38.9999C135.29 31.4999 114.611 26.1294 95.2052 30.482C75.8124 34.8347 61.8169 44.424 63.9731 51.924Z"
 					fill="white"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M137.031 38.7188C134.875 31.2321 114.196 25.8482 94.7899 30.2009C75.3836 34.5536 61.4149 44.1429 63.5711 51.6429"
+				<path
+					d="M137.031 38.7188C134.875 31.2321 114.196 25.8482 94.7899 30.2009C75.3836 34.5536 61.4149 44.1429 63.5711 51.6429"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M72.7448 38.612L65.8877 34.0049"
+				<path
+					d="M72.7448 38.612L65.8877 34.0049"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M80.1782 34.9021L76.4951 29.1699"
+				<path
+					d="M80.1782 34.9021L76.4951 29.1699"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M89.3125 26.8525L91.6429 31.1115"
+				<path
+					d="M89.3125 26.8525L91.6429 31.1115"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M101.325 23.0625L101.941 29.0759"
+				<path
+					d="M101.325 23.0625L101.941 29.0759"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M121.816 23.665L118.2 28.4329"
+				<path
+					d="M121.816 23.665L118.2 28.4329"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M134.339 25.5L128.888 30.9509"
+				<path
+					d="M134.339 25.5L128.888 30.9509"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path d="M105.274 62.5297C110.742 61.1043 113.315 52.8119 111.02 44.0082C108.725 35.2044 102.432 29.2231 96.9638 30.6486C91.4955 32.074 88.9228 40.3663 91.2177 49.17C93.5125 57.9738 99.8058 63.9551 105.274 62.5297Z"
+				<path
+					d="M105.274 62.5297C110.742 61.1043 113.315 52.8119 111.02 44.0082C108.725 35.2044 102.432 29.2231 96.9638 30.6486C91.4955 32.074 88.9228 40.3663 91.2177 49.17C93.5125 57.9738 99.8058 63.9551 105.274 62.5297Z"
 					fill="black"
 					stroke="black"
 					strokeWidth="0.98"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path fillRule="evenodd"
+				<path
+					fillRule="evenodd"
 					clipRule="evenodd"
 					d="M356.133 108.751C354.494 96.5202 343.219 87.0537 329.553 87.0537C314.759 87.0537 302.097 97.0984 302.097 114.509C302.097 115.574 302.174 116.607 302.322 117.606C298.757 112.82 293.473 109.822 288.035 109.822C278.419 109.822 271.963 116.947 271.963 126.563C271.963 129.567 272.855 132.589 274.374 135.325C274.323 135.334 274.273 135.344 274.222 135.354C270.063 132.098 264.516 130.112 258.422 130.112C249.083 129.29 237.226 137.593 235.29 148.132C234.888 149.089 234.611 150.152 234.463 151.339C234.205 153.399 235.142 155.195 237.083 156.754C238.272 158.119 239.949 158.961 242.023 159.477C254.385 164.445 280.303 166.071 308.356 166.071C348.17 166.071 357.678 130.081 357.678 121.205C357.678 118.483 357.354 113.673 356.133 108.751ZM306.43 127.174C306.48 127.168 306.53 127.162 306.581 127.155C306.514 127.074 306.447 126.992 306.381 126.909C306.398 126.997 306.414 127.085 306.43 127.174Z"
 					fill="white" />
 			</g>
 			<defs>
-				<pattern id="pattern0_4586_17927"
+				<pattern
+					id="pattern0_4586_17927"
 					patternContentUnits="objectBoundingBox"
 					width="1"
 					height="1">
 					<use xlinkHref="#image0_4586_17927" transform="scale(0.00262467 0.00429185)" />
 				</pattern>
-				<linearGradient id="paint0_linear_4586_17927"
+				<linearGradient
+					id="paint0_linear_4586_17927"
 					x1="241.83"
 					y1="62.9463"
 					x2="288.705"
 					y2="69.6428"
 					gradientUnits="userSpaceOnUse">
 					<stop offset="0.291243" stopColor="white" />
-					<stop offset="0.986265"
+					<stop
+						offset="0.986265"
 						stopColor="white"
 						stopOpacity="0" />
 				</linearGradient>
 				<clipPath id="clip0_4586_17927">
-					<rect width="375"
+					<rect
+						width="375"
 						height="166.071"
 						fill="white"
 						transform="translate(0.0888672)" />
 				</clipPath>
-				<image id="image0_4586_17927"
+				<image
+					id="image0_4586_17927"
 					width="381"
 					height="233"
 					xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAX0AAADpCAYAAADI+eewAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFUklEQVR4Xu3b0WrjVhRAUav0/39ZfSiCy0WyncROZO21oCSO5enAwPbx0c2yrusNgIZ/Hl0AwHWIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AOEiD5AiOgDhIg+QIjoA4SIPkCI6AO32+12W5ZlfXQNn29ZV//OABUmfYhalmWdp3vT/vWZ9IHb7fZ/8Nd1XR5dx2cz6UPYONkLfoPoQ5A1Tte/jy4Armee6k38HSZ9gBDRh7B1XRernhbRh4s7ivp4ZHNb6VjtXJ8jmxBw7zjm/KYg/NfmRi5c3Bh8gcd6BwKOYr+9IWz/7b+aKxF9uLAx6uP+fu/7+SvXZKcPF3K0u392p7+9CZj6r0v04SLmWO9N7M8e0RT967LegQuYb9aOj8evR1O8yHeIPnygLex7u/nt8d5XsN6BD7RN7Huhn6+bf/YMbxLXZdKHD3Q0yY+RHz8FHL2OHtGHDzQerxyDP8d8fuxYJn4jF07uXswfTfjizsxOH07s3pn5e0E/mvCfZf1zXSZ9OKmjUG9vBHtrnb0bvDAy6cMJ3Zvw966bw//odY888//mM7mRCydzL9rLcDZ/vm58TrQ5IvpwEmOwx2iPcd+ee/RJ4KfT/k9fz3mJPpzEM9P5fDJnfgN45s+gTfThpMZpe479/L0buDzLjVz4I0f793urmznur7x5O/Op4Zoc2YQ/8uxkPu/09z4BwLOsd+Bk5un96KYufIfowx/YW8+M+/nxOqHnlUQffsm8phmfm49i3rsWfkL04Y32pvR70/tR4IWfV3EjF95oL9ZHN2OPbuxa7/BKJn14o6OTN3uBF3d+g+jDG+3t7r9y5NJah1cTfXiDo739/LPtBu78/dH18FN+IxdeaDt9853nzxh4nzSuR/Thl8zHMY9u3P4lkb8+p3fgjb563v7dbwTP/B24NpM+vNjeRL/9/Og1r4q9qPOI6MMPjXv6MfhzyOf4fyf0os5PiT68yRz8vcd7nwjgnUQfXmxvehd0zkL04YtM5nwy0QcI8Ru5ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxAi+gAhog8QIvoAIaIPECL6ACGiDxDyH3IoUtUNxiZ6AAAAAElFTkSuQmCC" />
diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
index 1179e4d..51ea0df 100644
--- a/modules/settings/assets/js/components/connect-modal/index.js
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -12,7 +12,8 @@ function ConnectModal() {
 
 	return (
 		<Modal open={ isOpen }>
-			<Grid container
+			<Grid
+				container
 				gap={ 2 }
 				direction="column"
 				justifyContent="start"
@@ -32,12 +33,14 @@ function ConnectModal() {
 					borderRadius: '4px',
 				} }>
 				<Box component="div" sx={ { background: '#000', width: '100%', height: '200px' } }></Box>
-				<Typography variant="subtitle1"
+				<Typography
+					variant="subtitle1"
 					marginTop={ 5 }
 					marginBottom={ 3 }>
 					{ __( 'Connect plugin on your site!', 'pojo-accessibility' ) }
 				</Typography>
-				<Button variant="contained"
+				<Button
+					variant="contained"
 					color="info"
 					size="large"
 					onClick={ redirectToConnect }>
diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js
index cd6bd41..e85c88f 100644
--- a/modules/settings/assets/js/components/icon-select/index.js
+++ b/modules/settings/assets/js/components/icon-select/index.js
@@ -69,7 +69,8 @@ const IconSelect = ( props ) => {
 							cursor: 'pointer',
 						} }
 					>{ option.icon }
-						<Radio value={ option.value }
+						<Radio
+							value={ option.value }
 							sx={ {
 								opacity: 0, position: 'absolute',
 							} } />
diff --git a/modules/settings/assets/js/components/my-account-menu/index.js b/modules/settings/assets/js/components/my-account-menu/index.js
index 8e39d5d..d35b0a1 100644
--- a/modules/settings/assets/js/components/my-account-menu/index.js
+++ b/modules/settings/assets/js/components/my-account-menu/index.js
@@ -49,7 +49,8 @@ const MyAccountMenu = () => {
 			>
 				<MenuItem onClick={ accountMenuState.close } sx={ { gap: 1, width: '225px' } }>
 					<Avatar>JB</Avatar>
-					<Box display="flex"
+					<Box
+						display="flex"
 						flexDirection="column"
 						gap={ 0 }>
 						<Typography variant="subtitle2" color="common.white">Jack Baueuer</Typography>
diff --git a/modules/settings/assets/js/components/notifications/index.js b/modules/settings/assets/js/components/notifications/index.js
index 6939475..28a6024 100644
--- a/modules/settings/assets/js/components/notifications/index.js
+++ b/modules/settings/assets/js/components/notifications/index.js
@@ -24,7 +24,8 @@ const Notifications = ( { type, message } ) => {
 			anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 			sx={ { zIndex: 99999 } }
 		>
-			<Alert onClose={ () => setShowNotification( ! showNotification ) }
+			<Alert
+				onClose={ () => setShowNotification( ! showNotification ) }
 				severity={ type }
 				variant="filled" >
 				{ message }
diff --git a/modules/settings/assets/js/components/position-control/index.js b/modules/settings/assets/js/components/position-control/index.js
index 88c2372..fcba18b 100644
--- a/modules/settings/assets/js/components/position-control/index.js
+++ b/modules/settings/assets/js/components/position-control/index.js
@@ -55,7 +55,8 @@ const PositionControl = ( { type, disabled }, props ) => {
 	const handlePositionChange = ( event ) => setPosition( event.target.value );
 
 	return (
-		<Box display="flex"
+		<Box
+			display="flex"
 			gap={ 1 }
 			marginTop={ 2 }>
 			<StyledTextField
diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js
index 516ebb2..b8ce254 100644
--- a/modules/settings/assets/js/components/sidebar-app-bar/index.js
+++ b/modules/settings/assets/js/components/sidebar-app-bar/index.js
@@ -12,12 +12,14 @@ const SidebarAppBar = () => {
 
 	return ( <AppBar position="static" color="transparent" >
 		<Toolbar disableGutters sx={ { justifyContent: 'space-between' } } >
-			<Box display="flex"
+			<Box
+				display="flex"
 				alignItems="center"
 				justifyContent="center"
 				p={ 1 }>
 				<ElementorLogo />
-				<Typography variant="h6"
+				<Typography
+					variant="h6"
 					marginLeft={ 1 }
 					display={ ! openSidebar ? 'none' : 'inherit' }>
 					{ __( 'Accessibility', 'pojo-accessibility' ) }
diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js
index 9565437..a2d1129 100644
--- a/modules/settings/assets/js/components/sidebar-menu/index.js
+++ b/modules/settings/assets/js/components/sidebar-menu/index.js
@@ -47,10 +47,12 @@ const SidebarMenu = () => {
 				{ item.children && expandedItems[ key ] && (
 					<List component="div" disablePadding>
 						{ Object.entries( item.children ).map( ( [ childKey, child ] ) => (
-							<ListItem key={ childKey }
+							<ListItem
+								key={ childKey }
 								sx={ { py: 0 } }
 								hidden={ ! openSidebar }>
-								<ListItemButton sx={ { py: 0 } }
+								<ListItemButton
+									sx={ { py: 0 } }
 									hidden={ ! openSidebar }
 									selected={ childKey === selectedMenu.child && openSidebar }
 									onClick={ () => handleSelectedMenu( key, childKey ) }>
diff --git a/modules/settings/assets/js/icons/accessibility-controls.js b/modules/settings/assets/js/icons/accessibility-controls.js
index 7299b45..6aa3b14 100644
--- a/modules/settings/assets/js/icons/accessibility-controls.js
+++ b/modules/settings/assets/js/icons/accessibility-controls.js
@@ -9,10 +9,12 @@ function AccessibilityControlsIcon( props ) {
 			sx={ { marginRight: 1 } }
 			{ ...props }
 		>
-			<circle cx="32"
+			<circle
+				cx="32"
 				cy="32"
 				r="32" />
-			<path d="M31.4998 25.4993C31.4998 26.1182 31.7457 26.7117 32.1833 27.1493C32.6208 27.5869 33.2143 27.8327 33.8332 27.8327C34.452 27.8327 35.0455 27.5869 35.4831 27.1493C35.9207 26.7117 36.1665 26.1182 36.1665 25.4993M31.4998 25.4993C31.4998 24.8805 31.7457 24.287 32.1833 23.8494C32.6208 23.4118 33.2143 23.166 33.8332 23.166C34.452 23.166 35.0455 23.4118 35.4831 23.8494C35.9207 24.287 36.1665 24.8805 36.1665 25.4993M31.4998 25.4993H22.1665M36.1665 25.4993H40.8332M24.4998 32.4993C24.4998 33.1182 24.7457 33.7117 25.1833 34.1493C25.6208 34.5869 26.2143 34.8327 26.8332 34.8327C27.452 34.8327 28.0455 34.5869 28.4831 34.1493C28.9207 33.7117 29.1665 33.1182 29.1665 32.4993M24.4998 32.4993C24.4998 31.8805 24.7457 31.287 25.1833 30.8494C25.6208 30.4118 26.2143 30.166 26.8332 30.166C27.452 30.166 28.0455 30.4118 28.4831 30.8494C28.9207 31.287 29.1665 31.8805 29.1665 32.4993M24.4998 32.4993H22.1665M29.1665 32.4993H40.8332M34.9998 39.4993C34.9998 40.1182 35.2457 40.7117 35.6833 41.1493C36.1208 41.5868 36.7143 41.8327 37.3332 41.8327C37.952 41.8327 38.5455 41.5868 38.9831 41.1493C39.4207 40.7117 39.6665 40.1182 39.6665 39.4993M34.9998 39.4993C34.9998 38.8805 35.2457 38.287 35.6833 37.8494C36.1208 37.4118 36.7143 37.166 37.3332 37.166C37.952 37.166 38.5455 37.4118 38.9831 37.8494C39.4207 38.287 39.6665 38.8805 39.6665 39.4993M34.9998 39.4993H22.1665M39.6665 39.4993H40.8332M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32Z"
+			<path
+				d="M31.4998 25.4993C31.4998 26.1182 31.7457 26.7117 32.1833 27.1493C32.6208 27.5869 33.2143 27.8327 33.8332 27.8327C34.452 27.8327 35.0455 27.5869 35.4831 27.1493C35.9207 26.7117 36.1665 26.1182 36.1665 25.4993M31.4998 25.4993C31.4998 24.8805 31.7457 24.287 32.1833 23.8494C32.6208 23.4118 33.2143 23.166 33.8332 23.166C34.452 23.166 35.0455 23.4118 35.4831 23.8494C35.9207 24.287 36.1665 24.8805 36.1665 25.4993M31.4998 25.4993H22.1665M36.1665 25.4993H40.8332M24.4998 32.4993C24.4998 33.1182 24.7457 33.7117 25.1833 34.1493C25.6208 34.5869 26.2143 34.8327 26.8332 34.8327C27.452 34.8327 28.0455 34.5869 28.4831 34.1493C28.9207 33.7117 29.1665 33.1182 29.1665 32.4993M24.4998 32.4993C24.4998 31.8805 24.7457 31.287 25.1833 30.8494C25.6208 30.4118 26.2143 30.166 26.8332 30.166C27.452 30.166 28.0455 30.4118 28.4831 30.8494C28.9207 31.287 29.1665 31.8805 29.1665 32.4993M24.4998 32.4993H22.1665M29.1665 32.4993H40.8332M34.9998 39.4993C34.9998 40.1182 35.2457 40.7117 35.6833 41.1493C36.1208 41.5868 36.7143 41.8327 37.3332 41.8327C37.952 41.8327 38.5455 41.5868 38.9831 41.1493C39.4207 40.7117 39.6665 40.1182 39.6665 39.4993M34.9998 39.4993C34.9998 38.8805 35.2457 38.287 35.6833 37.8494C36.1208 37.4118 36.7143 37.166 37.3332 37.166C37.952 37.166 38.5455 37.4118 38.9831 37.8494C39.4207 38.287 39.6665 38.8805 39.6665 39.4993M34.9998 39.4993H22.1665M39.6665 39.4993H40.8332M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32Z"
 				stroke="white"
 				strokeWidth="3"
 				strokeLinecap="round"
diff --git a/modules/settings/assets/js/icons/accessibility-eye.js b/modules/settings/assets/js/icons/accessibility-eye.js
index 58a66d9..cdeda1f 100644
--- a/modules/settings/assets/js/icons/accessibility-eye.js
+++ b/modules/settings/assets/js/icons/accessibility-eye.js
@@ -9,11 +9,13 @@ function AccessibilityEyeIcon( props ) {
 			sx={ { marginRight: 1 } }
 			{ ...props }
 		>
-			<circle cx="32"
+			<circle
+				cx="32"
 				cy="32"
 				r="32" />
 			<g clipPath="url(#clip0_3940_26698)">
-				<path d="M30.3492 30.3515C29.9116 30.7892 29.6659 31.3827 29.666 32.0016C29.6661 32.6204 29.9121 33.2139 30.3497 33.6514C30.7874 34.0889 31.381 34.3347 31.9998 34.3346C32.6187 34.3345 33.2121 34.0885 33.6497 33.6508M37.4612 37.4518C35.8246 38.4758 33.9304 39.0127 32 39C27.8 39 24.3 36.6667 21.5 32C22.984 29.5267 24.664 27.709 26.54 26.547M29.8767 25.21C30.5755 25.0685 31.2869 24.9982 32 25C36.2 25 39.7 27.3333 42.5 32C41.723 33.295 40.8912 34.4115 40.0057 35.3483M21.5 21.5L42.5 42.5M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32Z"
+				<path
+					d="M30.3492 30.3515C29.9116 30.7892 29.6659 31.3827 29.666 32.0016C29.6661 32.6204 29.9121 33.2139 30.3497 33.6514C30.7874 34.0889 31.381 34.3347 31.9998 34.3346C32.6187 34.3345 33.2121 34.0885 33.6497 33.6508M37.4612 37.4518C35.8246 38.4758 33.9304 39.0127 32 39C27.8 39 24.3 36.6667 21.5 32C22.984 29.5267 24.664 27.709 26.54 26.547M29.8767 25.21C30.5755 25.0685 31.2869 24.9982 32 25C36.2 25 39.7 27.3333 42.5 32C41.723 33.295 40.8912 34.4115 40.0057 35.3483M21.5 21.5L42.5 42.5M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32Z"
 					stroke="white"
 					strokeWidth="3"
 					strokeLinecap="round"
@@ -21,7 +23,8 @@ function AccessibilityEyeIcon( props ) {
 			</g>
 			<defs>
 				<clipPath id="clip0_3940_26698">
-					<rect width="48"
+					<rect
+						width="48"
 						height="48"
 						fill="white"
 						transform="translate(8 8)" />
diff --git a/modules/settings/assets/js/icons/accessibility-person.js b/modules/settings/assets/js/icons/accessibility-person.js
index 2aec5cc..051c77e 100644
--- a/modules/settings/assets/js/icons/accessibility-person.js
+++ b/modules/settings/assets/js/icons/accessibility-person.js
@@ -9,11 +9,13 @@ function AccessibilityPersonIcon( props ) {
 			sx={ { marginRight: 1 } }
 			{ ...props }
 		>
-			<circle cx="32"
+			<circle
+				cx="32"
 				cy="32"
 				r="32" />
 			<path d="M32 24C32.6904 24 33.25 23.4404 33.25 22.75C33.25 22.0596 32.6904 21.5 32 21.5C31.3096 21.5 30.75 22.0596 30.75 22.75C30.75 23.4404 31.3096 24 32 24Z" fill="white" />
-			<path d="M27 43.25L32 35.75M32 35.75L37 43.25M32 35.75V30.75M32 30.75L39.5 28.25M32 30.75L24.5 28.25M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32ZM33.25 22.75C33.25 23.4404 32.6904 24 32 24C31.3096 24 30.75 23.4404 30.75 22.75C30.75 22.0596 31.3096 21.5 32 21.5C32.6904 21.5 33.25 22.0596 33.25 22.75Z"
+			<path
+				d="M27 43.25L32 35.75M32 35.75L37 43.25M32 35.75V30.75M32 30.75L39.5 28.25M32 30.75L24.5 28.25M9.5 32C9.5 34.9547 10.082 37.8806 11.2127 40.6104C12.3434 43.3402 14.0008 45.8206 16.0901 47.9099C18.1794 49.9992 20.6598 51.6566 23.3896 52.7873C26.1194 53.918 29.0453 54.5 32 54.5C34.9547 54.5 37.8806 53.918 40.6104 52.7873C43.3402 51.6566 45.8206 49.9992 47.9099 47.9099C49.9992 45.8206 51.6566 43.3402 52.7873 40.6104C53.918 37.8806 54.5 34.9547 54.5 32C54.5 29.0453 53.918 26.1194 52.7873 23.3896C51.6566 20.6598 49.9992 18.1794 47.9099 16.0901C45.8206 14.0008 43.3402 12.3434 40.6104 11.2127C37.8806 10.082 34.9547 9.5 32 9.5C29.0453 9.5 26.1194 10.082 23.3896 11.2127C20.6598 12.3434 18.1794 14.0008 16.0901 16.0901C14.0008 18.1794 12.3434 20.6598 11.2127 23.3896C10.082 26.1194 9.5 29.0453 9.5 32ZM33.25 22.75C33.25 23.4404 32.6904 24 32 24C31.3096 24 30.75 23.4404 30.75 22.75C30.75 22.0596 31.3096 21.5 32 21.5C32.6904 21.5 33.25 22.0596 33.25 22.75Z"
 				stroke="white"
 				strokeWidth="3"
 				strokeLinecap="round"
diff --git a/modules/settings/assets/js/icons/accessibility-text.js b/modules/settings/assets/js/icons/accessibility-text.js
index 40c869d..57f075e 100644
--- a/modules/settings/assets/js/icons/accessibility-text.js
+++ b/modules/settings/assets/js/icons/accessibility-text.js
@@ -9,19 +9,22 @@ function AccessibilityTextIcon( props ) {
 			sx={ { marginRight: 1 } }
 			{ ...props }
 		>
-			<rect x="0.5"
+			<rect
+				x="0.5"
 				y="0.5"
 				width="233"
 				height="139"
 				rx="3.5"
 				stroke="black"
 				strokeOpacity="0.12" />
-			<rect x="55"
+			<rect
+				x="55"
 				y="38"
 				width="124"
 				height="64"
 				rx="4" />
-			<rect x="62.5"
+			<rect
+				x="62.5"
 				y="45.5"
 				width="109"
 				height="49"
diff --git a/modules/settings/assets/js/icons/credit-card.js b/modules/settings/assets/js/icons/credit-card.js
index 4fb8b1c..af62533 100644
--- a/modules/settings/assets/js/icons/credit-card.js
+++ b/modules/settings/assets/js/icons/credit-card.js
@@ -2,10 +2,12 @@ import SvgIcon from '@elementor/ui/SvgIcon';
 
 const CreditCardIcon = ( props, { size } ) => {
 	return (
-		<SvgIcon viewBox="0 0 20 20"
+		<SvgIcon
+			viewBox="0 0 20 20"
 			fontSize={ size }
 			{ ...props }>
-			<path fillRule="evenodd"
+			<path
+				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M5 4.79163C3.96447 4.79163 3.125 5.63109 3.125 6.66663V7.70829H16.875V6.66663C16.875 5.63109 16.0355 4.79163 15 4.79163H5ZM18.125 6.66663C18.125 4.94074 16.7259 3.54163 15 3.54163H5C3.27411 3.54163 1.875 4.94074 1.875 6.66663V13.3333C1.875 15.0592 3.27411 16.4583 5 16.4583H15C16.7259 16.4583 18.125 15.0592 18.125 13.3333V6.66663ZM16.875 8.95829H3.125V13.3333C3.125 14.3688 3.96447 15.2083 5 15.2083H15C16.0355 15.2083 16.875 14.3688 16.875 13.3333V8.95829ZM5.20833 12.5C5.20833 12.1548 5.48816 11.875 5.83333 11.875H5.84167C6.18684 11.875 6.46667 12.1548 6.46667 12.5C6.46667 12.8451 6.18684 13.125 5.84167 13.125H5.83333C5.48816 13.125 5.20833 12.8451 5.20833 12.5ZM8.54167 12.5C8.54167 12.1548 8.82149 11.875 9.16667 11.875H10.8333C11.1785 11.875 11.4583 12.1548 11.4583 12.5C11.4583 12.8451 11.1785 13.125 10.8333 13.125H9.16667C8.82149 13.125 8.54167 12.8451 8.54167 12.5Z" />
 
diff --git a/modules/settings/assets/js/icons/elementor-logo.js b/modules/settings/assets/js/icons/elementor-logo.js
index a9a6521..5f3ad30 100644
--- a/modules/settings/assets/js/icons/elementor-logo.js
+++ b/modules/settings/assets/js/icons/elementor-logo.js
@@ -4,7 +4,8 @@ const ElementorLogo = ( { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 24 24" fontSize={ size }>
 			<g clipPath="url(#a)">
-				<path fill="#0C0D0E"
+				<path
+					fill="#0C0D0E"
 					fillRule="evenodd"
 					d="M2.022 18.667A12 12 0 1 1 21.977 5.333 12 12 0 0 1 2.022 18.667ZM9 7H7v10h2V7Zm8 0h-6v2h6V7Zm0 3.999h-6v2h6v-2ZM17 15h-6v2h6v-2Z"
 					clipRule="evenodd" />
diff --git a/modules/settings/assets/js/icons/square-rounded-chevrons-left.js b/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
index fd48134..a753c86 100644
--- a/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
+++ b/modules/settings/assets/js/icons/square-rounded-chevrons-left.js
@@ -2,7 +2,8 @@ import SvgIcon from '@elementor/ui/SvgIcon';
 
 const SquareRoundedChevronsLeft = ( props, { size } ) => {
 	return (
-		<SvgIcon viewBox="0 0 24 24"
+		<SvgIcon
+			viewBox="0 0 24 24"
 			fontSize={ size }
 			sx={ { ...props.sx } }
 			{ ...props }>
diff --git a/modules/settings/assets/js/icons/user-arrow.js b/modules/settings/assets/js/icons/user-arrow.js
index 0f2af52..2adbdbe 100644
--- a/modules/settings/assets/js/icons/user-arrow.js
+++ b/modules/settings/assets/js/icons/user-arrow.js
@@ -2,10 +2,12 @@ import SvgIcon from '@elementor/ui/SvgIcon';
 
 const UserArrowIcon = ( props, { size } ) => {
 	return (
-		<SvgIcon viewBox="0 0 20 20"
+		<SvgIcon
+			viewBox="0 0 20 20"
 			fontSize={ size }
 			{ ...props }>
-			<path fillRule="evenodd"
+			<path
+				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M8.95801 1.875C7.90819 1.875 6.90137 2.29204 6.15904 3.03437C5.41671 3.7767 4.99967 4.78352 4.99967 5.83333C4.99967 6.88315 5.41671 7.88997 6.15904 8.6323C6.90137 9.37463 7.90819 9.79167 8.95801 9.79167C10.0078 9.79167 11.0146 9.37463 11.757 8.6323C12.4993 7.88997 12.9163 6.88315 12.9163 5.83333C12.9163 4.78352 12.4993 3.7767 11.757 3.03437C11.0146 2.29204 10.0078 1.875 8.95801 1.875ZM7.04293 3.91825C7.55084 3.41034 8.23971 3.125 8.95801 3.125C9.6763 3.125 10.3652 3.41034 10.8731 3.91825C11.381 4.42616 11.6663 5.11504 11.6663 5.83333C11.6663 6.55163 11.381 7.2405 10.8731 7.74841C10.3652 8.25633 9.6763 8.54167 8.95801 8.54167C8.23971 8.54167 7.55084 8.25633 7.04293 7.74841C6.53502 7.2405 6.24967 6.55163 6.24967 5.83333C6.24967 5.11504 6.53502 4.42616 7.04293 3.91825Z"
 			/>
diff --git a/modules/settings/assets/js/icons/widget.js b/modules/settings/assets/js/icons/widget.js
index 21ce357..c7c84e4 100644
--- a/modules/settings/assets/js/icons/widget.js
+++ b/modules/settings/assets/js/icons/widget.js
@@ -4,20 +4,23 @@ const WidgetIcon = ( { size } ) => {
 	return (
 		<SvgIcon viewBox="0 0 20 20" fontSize={ size }>
 			<g id="widget">
-				<path id="Vector"
+				<path
+					id="Vector"
 					d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
 					fill="white"
 					stroke="black"
 					strokeWidth="1.5"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path id="Vector_2"
+				<path
+					id="Vector_2"
 					d="M8.33333 13.75L10 11.25M10 11.25L11.6667 13.75M10 11.25V9.58333M10 9.58333L12.5 8.75M10 9.58333L7.5 8.75"
 					stroke="black"
 					strokeWidth="1.5"
 					strokeLinecap="round"
 					strokeLinejoin="round" />
-				<path id="Vector_3"
+				<path
+					id="Vector_3"
 					d="M9.9987 6.66683C10.2288 6.66683 10.4154 6.48028 10.4154 6.25016C10.4154 6.02004 10.2288 5.8335 9.9987 5.8335C9.76858 5.8335 9.58203 6.02004 9.58203 6.25016C9.58203 6.48028 9.76858 6.66683 9.9987 6.66683Z"
 					fill="black"
 					stroke="black"
diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js
index 3390d1d..3327300 100644
--- a/modules/settings/assets/js/layouts/icon-design-settings.js
+++ b/modules/settings/assets/js/layouts/icon-design-settings.js
@@ -6,17 +6,20 @@ import { __ } from '@wordpress/i18n';
 
 const IconDesignSettings = () => {
 	return (
-		<Grid padding={ 2 }
+		<Grid
+			padding={ 2 }
 			border={ 1 }
 			borderColor="divider">
 			<Box marginBottom={ 2 }>
 				<Typography variant="subtitle1">{ __( 'Design', 'pojo-accessibility' ) }</Typography>
 				<Typography variant="body2">{ __( 'Customize the design of the button that visitors use to open the widget.', 'pojo-accessibility' ) }</Typography>
 			</Box>
-			<Grid gridTemplateColumns="repeat(2, 1fr)"
+			<Grid
+				gridTemplateColumns="repeat(2, 1fr)"
 				display="grid"
 				gap={ 8 }>
-				<Box display="flex"
+				<Box
+					display="flex"
 					flexDirection="column"
 					gap={ 5 }>
 					<IconSelect />
diff --git a/modules/settings/assets/js/layouts/position-settings-desktop.js b/modules/settings/assets/js/layouts/position-settings-desktop.js
index 52ef005..66e5012 100644
--- a/modules/settings/assets/js/layouts/position-settings-desktop.js
+++ b/modules/settings/assets/js/layouts/position-settings-desktop.js
@@ -11,18 +11,21 @@ const PositionSettingsDesktop = () => {
 	const [ disableExactPosition, setDisableExactPosition ] = useState( true );
 	return (
 		<>
-			<FormControlLabel label={ <Typography variant="subtitle2">{ __( 'Hide on desktop', 'pojo-accessibility' ) }</Typography> }
+			<FormControlLabel
+				label={ <Typography variant="subtitle2">{ __( 'Hide on desktop', 'pojo-accessibility' ) }</Typography> }
 				labelPlacement="start"
 				control={ <Switch color="info" /> }
 				sx={ { marginLeft: 0, marginBottom: 3 } }
 				onChange={ () => setHiddenOnDesktop( ! hiddenOnDesktop ) } />
 			{ ! hiddenOnDesktop &&
-				<Box display="grid"
+				<Box
+					display="grid"
 					gridTemplateColumns="repeat(2,1fr)"
 					gap={ 3 }>
 					<AlignmentMatrixControl />
 					<Box>
-						<FormControlLabel label={ <Typography variant="subtitle2">{ __( 'Exact position', 'pojo-accessibility' ) }</Typography> }
+						<FormControlLabel
+							label={ <Typography variant="subtitle2">{ __( 'Exact position', 'pojo-accessibility' ) }</Typography> }
 							labelPlacement="start"
 							control={ <Switch color="info" /> }
 							sx={ { marginLeft: 0 } }
diff --git a/modules/settings/assets/js/layouts/position-settings.js b/modules/settings/assets/js/layouts/position-settings.js
index 56f5292..3639975 100644
--- a/modules/settings/assets/js/layouts/position-settings.js
+++ b/modules/settings/assets/js/layouts/position-settings.js
@@ -24,7 +24,8 @@ const PositionSettings = () => {
 	};
 
 	return (
-		<Grid padding={ 2 }
+		<Grid
+			padding={ 2 }
 			border={ 1 }
 			borderColor="divider">
 			<Box marginBottom={ 2 }>
diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
index 1f81610..1ff31c3 100644
--- a/modules/settings/assets/js/layouts/sidebar.js
+++ b/modules/settings/assets/js/layouts/sidebar.js
@@ -7,7 +7,8 @@ export const Sidebar = () => {
 	const { openSidebar } = useSettings();
 
 	return (
-		<Drawer variant="permanent"
+		<Drawer
+			variant="permanent"
 			open={ openSidebar }
 			PaperProps={ {
 				sx: {