diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js index d2c0980..070f395 100644 --- a/modules/settings/assets/js/app.js +++ b/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 = () => { {!isConnected && } + {isConnected && !closePostConnectModal && } { - 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 index eb9befd..243db86 100644 --- a/modules/settings/assets/js/components/connect-modal/index.js +++ b/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 ( - - - {__('Connect plugin on your site!', 'pojo-accessibility')} - - + {__("Let's improve your site's accessibility", 'pojo-accessibility')} + + + {__( + 'Make your site more inclusive with One Click Accessibility.', + 'pojo-accessibility', + )} + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/modules/settings/assets/js/components/index.js b/modules/settings/assets/js/components/index.js index 7c5d25f..963b0a5 100644 --- a/modules/settings/assets/js/components/index.js +++ b/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'; diff --git a/modules/settings/assets/js/components/post-connect-modal/index.js b/modules/settings/assets/js/components/post-connect-modal/index.js new file mode 100644 index 0000000..25fd98d --- /dev/null +++ b/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 ( + + + + + {__("You're all set", 'site-mailer')} + + + {__( + 'The One Click Accessibility widget is now active and ready to use on your site!', + 'site-mailer', + )} + + + + + ); +}; + +export default PostConnectModal; diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js index 1b618df..5372ff8 100644 --- a/modules/settings/assets/js/components/sidebar-menu/menu.js +++ b/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: , children: { iconSettings: { - name: __('Icon Settings', 'pojo-accessibility'), + name: __('Design & position', 'pojo-accessibility'), key: 'icon-settings', page: , }, menu: { - name: __('Menu', 'pojo-accessibility'), + name: __('Feature management', 'pojo-accessibility'), key: 'menu', page: , }, }, }, accessibilityStatement: { - name: __('Accessibility Statement', 'pojo-accessibility'), + name: __('Accessibility statement', 'pojo-accessibility'), key: 'accessibility-statement', page: , icon: , diff --git a/modules/settings/assets/js/contexts/plugin-settings.js b/modules/settings/assets/js/contexts/plugin-settings.js index d668664..804ca03 100644 --- a/modules/settings/assets/js/contexts/plugin-settings.js +++ b/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); }) diff --git a/modules/settings/assets/js/icons/connect-modal-icon.js b/modules/settings/assets/js/icons/connect-modal-icon.js new file mode 100644 index 0000000..ef2054b --- /dev/null +++ b/modules/settings/assets/js/icons/connect-modal-icon.js @@ -0,0 +1,44 @@ +import SvgIcon from '@elementor/ui/SvgIcon'; + +const ConnectModalIcon = () => { + return ( + + + + + + + + + + ); +}; + +export default ConnectModalIcon; diff --git a/modules/settings/assets/js/icons/index.js b/modules/settings/assets/js/icons/index.js index 287cba6..d67c047 100644 --- a/modules/settings/assets/js/icons/index.js +++ b/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'; diff --git a/modules/settings/assets/js/icons/post-connect-modal-icon.js b/modules/settings/assets/js/icons/post-connect-modal-icon.js new file mode 100644 index 0000000..a8a1262 --- /dev/null +++ b/modules/settings/assets/js/icons/post-connect-modal-icon.js @@ -0,0 +1,44 @@ +import SvgIcon from '@elementor/ui/SvgIcon'; + +const PostConnectModalIcon = () => { + return ( + + + + + + + + + + ); +}; + +export default PostConnectModalIcon; diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js index ba005f1..34103e4 100644 --- a/modules/settings/assets/js/layouts/icon-design-settings.js +++ b/modules/settings/assets/js/layouts/icon-design-settings.js @@ -13,7 +13,7 @@ const IconDesignSettings = (props) => { {__( - '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', )} diff --git a/modules/settings/assets/js/layouts/menu-settings.js b/modules/settings/assets/js/layouts/menu-settings.js index 67e0405..8b867f4 100644 --- a/modules/settings/assets/js/layouts/menu-settings.js +++ b/modules/settings/assets/js/layouts/menu-settings.js @@ -88,9 +88,9 @@ const MenuSettings = () => { return ( diff --git a/modules/settings/assets/js/layouts/position-settings.js b/modules/settings/assets/js/layouts/position-settings.js index 07fdd1a..5490ba6 100644 --- a/modules/settings/assets/js/layouts/position-settings.js +++ b/modules/settings/assets/js/layouts/position-settings.js @@ -34,7 +34,7 @@ export const PositionSettings = (props) => { {__( - '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', )} diff --git a/modules/settings/assets/js/pages/icon-settings.js b/modules/settings/assets/js/pages/icon-settings.js index 0b9211e..fe2e143 100644 --- a/modules/settings/assets/js/pages/icon-settings.js +++ b/modules/settings/assets/js/pages/icon-settings.js @@ -9,7 +9,7 @@ const IconSettings = () => { <> - {__('Icon Settings', 'pojo-accessibility')} + {__('Design & position', 'pojo-accessibility')} diff --git a/modules/settings/assets/js/pages/menu.js b/modules/settings/assets/js/pages/menu.js index 062105b..9cf4600 100644 --- a/modules/settings/assets/js/pages/menu.js +++ b/modules/settings/assets/js/pages/menu.js @@ -8,7 +8,7 @@ const Menu = () => { return ( - {__('Menu', 'pojo-accessibility')} + {__('Feature management', 'pojo-accessibility')} diff --git a/modules/settings/classes/settings.php b/modules/settings/classes/settings.php index e566c14..ff77904 100644 --- a/modules/settings/classes/settings.php +++ b/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 ); } diff --git a/modules/settings/module.php b/modules/settings/module.php index 4708559..2a85bc3 100644 --- a/modules/settings/module.php +++ b/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(), ]; }