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": [
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 (
+
);
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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+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..8ea7f9c
--- /dev/null
+++ b/modules/settings/assets/js/components/connect-modal/index.js
@@ -0,0 +1,51 @@
+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 { useAuth, useModal } from '../../hooks';
+
+function ConnectModal() {
+ const { isOpen } = useModal();
+ const { redirectToConnect } = useAuth();
+
+ return (
+
+
+
+
+ { __( 'Connect plugin on your site!', 'pojo-accessibility' ) }
+
+
+
+
+ );
+}
+
+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';
diff --git a/modules/settings/assets/js/hooks/index.js b/modules/settings/assets/js/hooks/index.js
index e69de29..0d9d628 100644
--- a/modules/settings/assets/js/hooks/index.js
+++ b/modules/settings/assets/js/hooks/index.js
@@ -0,0 +1,2 @@
+export { useAuth } from './use-auth';
+export { 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 4ce5914..791ec33 100644
--- a/modules/settings/assets/js/hooks/use-auth.js
+++ b/modules/settings/assets/js/hooks/use-auth.js
@@ -1,7 +1,7 @@
import API from '../api';
import { UPGRADE_LINK } from '../constants';
-const useAuth = () => {
+export const useAuth = () => {
const { subscriptionId } = 123;
const redirectToConnect = async () => {
@@ -28,5 +28,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..65c79c1 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 = () => {
@@ -19,4 +19,3 @@ const useModal = ( defaultIsOpen = true ) => {
};
};
-export default useModal;