[APP-837] Add post connect modal (#120)

* add: post connect modal

* update: settings prefix

* fix: connect modal design

* update: connect modal text

* add: connect modal graphics

* update: connect modal icon

* update: post connect modal

* update: sidebar menu text

* update: text of icon settings

* update: text

* update: php compatibility with return types

modules/settings/assets/js/app.js

@@ -8,6 +8,7 @@ import {
 	Notifications,
 	MenuItems,
 	AdminTopBar,
+	PostConnectModal,
 } from '@ea11y/components';
 import {
 	useNotificationSettings,
@@ -19,7 +20,8 @@ import { usePluginSettingsContext } from './contexts/plugin-settings';
 
 const App = () => {
 	useSavedSettings();
-	const { isConnected, isRTL } = usePluginSettingsContext();
+	const { isConnected, isRTL, closePostConnectModal } =
+		usePluginSettingsContext();
 	const { notificationMessage, notificationType } = useNotificationSettings();
 	const { selectedMenu } = useSettings();
 
@@ -32,6 +34,7 @@ const App = () => {
 		<DirectionProvider rtl={isRTL}>
 			<ThemeProvider colorScheme="light">
 				{!isConnected && <ConnectModal />}
+				{isConnected && !closePostConnectModal && <PostConnectModal />}
 				<Grid display="flex" flexDirection="row" height="100%">
 					<Sidebar />
 					<Box

modules/settings/assets/js/components/connect-modal/index.js

@@ -1,20 +1,30 @@
+import { CircleCheckFilledIcon } from '@elementor/icons';
 import Box from '@elementor/ui/Box';
 import Button from '@elementor/ui/Button';
 import Grid from '@elementor/ui/Grid';
+import List from '@elementor/ui/List';
+import ListItem from '@elementor/ui/ListItem';
+import ListItemIcon from '@elementor/ui/ListItemIcon';
+import ListItemText from '@elementor/ui/ListItemText';
 import Modal from '@elementor/ui/Modal';
 import Typography from '@elementor/ui/Typography';
 import { useAuth, useModal } from '@ea11y/hooks';
+import { ConnectModalIcon } from '@ea11y/icons';
 import { __ } from '@wordpress/i18n';
 
 function ConnectModal() {
 	const { isOpen } = useModal();
 	const { redirectToConnect } = useAuth();
 
+	const ListItemStyle = { margin: '8px', padding: 0 };
+	const ListItemTextStyle = { color: 'text.secondary', margin: 0, padding: 0 };
+	const listIconColor = 'info.main';
+
 	return (
 		<Modal open={isOpen}>
 			<Grid
 				container
-				gap={2}
+				gap={0}
 				direction="column"
 				justifyContent="start"
 				alignItems="center"
@@ -25,29 +35,76 @@ function ConnectModal() {
 					transform: 'translate(-50%, -50%)',
 					width: 600,
 					maxWidth: '95%',
-					height: 400,
-					bgcolor: 'background.paper',
+					height: 552,
+					backgroundColor: 'background.paper',
 					boxShadow: 24,
-					paddingBottom: 5,
+					p: 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}
+				<ConnectModalIcon />
+				<Typography
+					variant="h5"
+					color="text.primary"
+					marginTop={5}
+					marginBottom={1}
 				>
-					{__('Connect', 'pojo-accessibility')}
-				</Button>
+					{__("Let's improve your site's accessibility", 'pojo-accessibility')}
+				</Typography>
+				<Typography variant="body2" color="text.primary" width={400}>
+					{__(
+						'Make your site more inclusive with One Click Accessibility.',
+						'pojo-accessibility',
+					)}
+				</Typography>
+				<Box>
+					<List dense={true}>
+						<ListItem disableGutters sx={ListItemStyle}>
+							<ListItemIcon sx={{ color: listIconColor }}>
+								<CircleCheckFilledIcon width={20} />
+							</ListItemIcon>
+							<ListItemText
+								sx={ListItemTextStyle}
+								primary={__('Fully customizable design', 'pojo-accessibility')}
+							/>
+						</ListItem>
+						<ListItem disableGutters sx={ListItemStyle}>
+							<ListItemIcon sx={{ color: listIconColor }}>
+								<CircleCheckFilledIcon width={20} />
+							</ListItemIcon>
+							<ListItemText
+								sx={ListItemTextStyle}
+								primary={__(
+									'Feature management & control',
+									'pojo-accessibility',
+								)}
+							/>
+						</ListItem>
+						<ListItem disableGutters sx={ListItemStyle}>
+							<ListItemIcon sx={{ color: listIconColor }}>
+								<CircleCheckFilledIcon width={20} />
+							</ListItemIcon>
+							<ListItemText
+								sx={ListItemTextStyle}
+								primary={__(
+									'Accessibility statement generator',
+									'pojo-accessibility',
+								)}
+							/>
+						</ListItem>
+					</List>
+					<Button
+						variant="contained"
+						color="info"
+						size="large"
+						onClick={redirectToConnect}
+						fullWidth
+						sx={{ marginTop: 5 }}
+					>
+						{__('Get started', 'pojo-accessibility')}
+					</Button>
+				</Box>
 			</Grid>
 		</Modal>
 	);

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

@@ -11,3 +11,4 @@ export { default as PositionControl } from './position-control';
 export { MenuItems } from '../components/sidebar-menu/menu';
 export { default as AdminTopBar } from './admin-top-bar';
 export { default as BottomBar } from './bottom-bar';
+export { default as PostConnectModal } from './post-connect-modal';

modules/settings/assets/js/components/post-connect-modal/index.js

@@ -0,0 +1,75 @@
+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 { useModal, useStorage } from '@ea11y/hooks';
+import { PostConnectModalIcon } from '@ea11y/icons';
+import { __ } from '@wordpress/i18n';
+
+const PostConnectModal = () => {
+	const { isOpen, close } = useModal();
+	const { save } = useStorage();
+
+	const onClose = async () => {
+		await save({
+			ea11y_close_post_connect_modal: true,
+		});
+		close();
+	};
+
+	return (
+		<Modal open={isOpen}>
+			<Grid
+				container
+				direction="column"
+				alignItems="center"
+				justifyContent="center"
+				sx={{
+					position: 'absolute',
+					top: '50%',
+					left: '50%',
+					transform: 'translate(-50%, -50%)',
+					width: 600,
+					maxWidth: '100%',
+					height: 530,
+					backgroundColor: 'background.paper',
+					boxShadow: 24,
+					p: '20px',
+					textAlign: 'center',
+					borderRadius: '4px',
+				}}
+			>
+				<PostConnectModalIcon />
+				<Typography
+					variant="h5"
+					color="text.primary"
+					marginTop={5}
+					marginBottom={1}
+				>
+					{__("You're all set", 'site-mailer')}
+				</Typography>
+				<Typography
+					variant="body2"
+					sx={{ width: '500px', maxWidth: '100%' }}
+					color="text.primary"
+					marginBottom={5}
+				>
+					{__(
+						'The One Click Accessibility widget is now active and ready to use on your site!',
+						'site-mailer',
+					)}
+				</Typography>
+				<Button
+					variant="contained"
+					sx={{ padding: '8px 22px', width: '300px' }}
+					onClick={onClose}
+					color="info"
+				>
+					{__('Done', 'pojo-accessibility')}
+				</Button>
+			</Grid>
+		</Modal>
+	);
+};
+
+export default PostConnectModal;

modules/settings/assets/js/components/sidebar-menu/menu.js

@@ -5,24 +5,24 @@ import { __ } from '@wordpress/i18n';
 
 export const MenuItems = {
 	widget: {
-		name: __('Widget', 'pojo-accessibility'),
+		name: __('Accessibility Widget', 'pojo-accessibility'),
 		key: 'widget',
 		icon: <WidgetIcon />,
 		children: {
 			iconSettings: {
-				name: __('Icon Settings', 'pojo-accessibility'),
+				name: __('Design & position', 'pojo-accessibility'),
 				key: 'icon-settings',
 				page: <IconSettings />,
 			},
 			menu: {
-				name: __('Menu', 'pojo-accessibility'),
+				name: __('Feature management', 'pojo-accessibility'),
 				key: 'menu',
 				page: <Menu />,
 			},
 		},
 	},
 	accessibilityStatement: {
-		name: __('Accessibility Statement', 'pojo-accessibility'),
+		name: __('Accessibility statement', 'pojo-accessibility'),
 		key: 'accessibility-statement',
 		page: <AccessibilityStatement />,
 		icon: <PagesIcon />,

modules/settings/assets/js/contexts/plugin-settings.js

@@ -23,6 +23,12 @@ export const PluginSettingsProvider = ({ children }) => {
 					settings.isConnected = Boolean(settings.isConnected);
 				}
 
+				if ('closePostConnectModal' in settings) {
+					settings.closePostConnectModal = Boolean(
+						settings.closePostConnectModal,
+					);
+				}
+
 				setPluginSettings(settings);
 				setLoaded(true);
 			})

modules/settings/assets/js/icons/index.js

@@ -17,3 +17,5 @@ export { default as ReadingPanelIcon } from './reading-panel';
 export { default as HideImagesIcon } from './hide-images';
 export { default as PauseAnimationsIcon } from './pause-animations';
 export { default as ReadableFontIcon } from './readable-font';
+export { default as PostConnectModalIcon } from './post-connect-modal-icon';
+export { default as ConnectModalIcon } from './connect-modal-icon';

modules/settings/assets/js/layouts/icon-design-settings.js

@@ -13,7 +13,7 @@ const IconDesignSettings = (props) => {
 				</Typography>
 				<Typography variant="body2">
 					{__(
-						'Customize the design of the button that visitors use to open the widget.',
+						"Customize your accessibility button's color, icon, and size to match your brand.",
 						'pojo-accessibility',
 					)}
 				</Typography>

modules/settings/assets/js/layouts/menu-settings.js

@@ -88,9 +88,9 @@ const MenuSettings = () => {
 	return (
 		<Card variant="outlined">
 			<CardHeader
-				title={__('Menu Items', 'pojo-accessibility')}
+				title={__('Feature Menu', 'pojo-accessibility')}
 				subheader={__(
-					'Select below the items that you want to appear in the widget.',
+					'Choose which accessibility features and capabilities you want to include.',
 					'pojo-accessibility',
 				)}
 			/>

modules/settings/assets/js/layouts/position-settings.js

@@ -34,7 +34,7 @@ export const PositionSettings = (props) => {
 				</Typography>
 				<Typography variant="body2">
 					{__(
-						'Set where the widget appears on your site. This applies to all pages.',
+						'Decide where you want your accessibility button to appear across every page of your site so visitors can easily find it.',
 						'pojo-accessibility',
 					)}
 				</Typography>

modules/settings/assets/js/pages/icon-settings.js

@@ -9,7 +9,7 @@ const IconSettings = () => {
 		<>
 			<Container p={1} sx={{ overflow: 'auto', maxHeight: '100%', padding: 4 }}>
 				<Typography variant="h4" fontWeight="400" marginBottom={4}>
-					{__('Icon Settings', 'pojo-accessibility')}
+					{__('Design & position', 'pojo-accessibility')}
 				</Typography>
 				<IconDesignSettings marginBottom={4} />
 				<PositionSettings />

modules/settings/assets/js/pages/menu.js

@@ -8,7 +8,7 @@ const Menu = () => {
 	return (
 		<Container sx={{ overflow: 'auto', maxHeight: '100%', p: 5 }}>
 			<Typography variant="h4" fontWeight="400" marginBottom={4}>
-				{__('Menu', 'pojo-accessibility')}
+				{__('Feature management', 'pojo-accessibility')}
 			</Typography>
 			<Box display="grid" gridTemplateColumns="repeat(2, 1fr)" gap={4}>
 				<MenuSettings />

modules/settings/classes/settings.php

@@ -7,24 +7,30 @@
 }
 
 class Settings {
+	public const CLOSE_POST_CONNECT_MODAL = 'ea11y_close_post_connect_modal';
 
 	public const IS_VALID_PLAN_DATA = 'ea11y_is_valid_plan_data';
 	public const PLAN_DATA = 'ea11y_plan_data';
 
 	/**
-	 * Returns plugin settings data by option name typecasted to an appropriate data type.
+	 * Returns plugin settings data by option name
+	 * type cast 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;
-		}
+		return get_option( $option_name );
 	}
+
+	/**
+	 * Update the settings data by option name.
+	 *
+	 * @param string $option_name
+	 * @param $value
+	 *
+	 * @return bool
+	 */
 	public static function set( string $option_name, $value ): bool {
 		return update_option( $option_name, $value, false );
 	}

modules/settings/module.php

@@ -102,6 +102,7 @@ public static function get_plugin_settings(): array {
 
 		return [
 			'isConnected' => Connect::is_connected(),
+			'closePostConnectModal' => Settings::get( Settings::CLOSE_POST_CONNECT_MODAL ),
 			'isRTL' => is_rtl(),
 		];
 	}