Add connect modal (#111)

* Initial refactor commit

* ✅ Added build and tests CI/CD

* update: add src for admin settings

* update: incorrect constant names

* update: namespace

* add: accessibility settings

* update: webpack to output files inside a folder

* update: build output folders

* update: removed commented code

* update: npm scripts

* add: webpack config

* add: hooks

* update: move admin setting to the module folder

* update: assets loading logic

* update: add rule to move jsx props to multiline imporving readability

* add: connect modal

* update: hooks import for better readability

* update: replace functions with hooks

* fix: alignment and style

* update: imports

* update: removed conflicting imports

* fix: add compatibility for mobile devices

---------

Co-authored-by: Ohad <[email protected]>

.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": [

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>
 	);

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 (
+		<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,
+					maxWidth: '95%',
+					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!', 'pojo-accessibility' ) }
+				</Typography>
+				<Button variant="contained"
+					color="info"
+					size="large"
+					onClick={ redirectToConnect }>
+					{ __( 'Connect', 'pojo-accessibility' ) }
+				</Button>
+			</Grid>
+		</Modal>
+	);
+}
+
+export default ConnectModal;

modules/settings/assets/js/components/index.js

@@ -0,0 +1 @@
+export { default as ConnectModal } from './connect-modal';

modules/settings/assets/js/hooks/index.js

@@ -0,0 +1,2 @@
+export { useAuth } from './use-auth';
+export { useModal } from './use-modal';

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;

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;