From 1af7cf7f30b9efd97ad62e1401db0440c1cabd60 Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Mon, 9 Dec 2024 14:42:52 +0530 Subject: [PATCH 01/11] add: post connect modal --- modules/settings/assets/js/app.js | 5 +- .../settings/assets/js/components/index.js | 1 + .../js/components/post-connect-modal/index.js | 83 +++++ .../assets/js/contexts/plugin-settings.js | 6 + modules/settings/assets/js/icons/index.js | 1 + .../js/icons/post-connect-modal-icon.js | 286 ++++++++++++++++++ modules/settings/classes/settings.php | 3 +- 7 files changed, 383 insertions(+), 2 deletions(-) create mode 100644 modules/settings/assets/js/components/post-connect-modal/index.js create mode 100644 modules/settings/assets/js/icons/post-connect-modal-icon.js 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 && } { + const { isOpen, close } = useModal(); + const { save } = useStorage(); + + const onClose = async () => { + await save({ + ea11y_close_post_connect_modal: true, + }); + close(); + }; + + return ( + + + + + + {__('Awesome! Your site can now send emails', 'site-mailer')} + + + {__( + 'By default, emails from your site will be sent via:', + 'site-mailer', + )} +
+ xyz@gmail.com +
+ {__( + 'You can change this address by adding a custom domain in the settings tab.', + 'site-mailer', + )} + + + + + + ); +}; + +export default PostConnectModal; 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/index.js b/modules/settings/assets/js/icons/index.js index 287cba6..b0303cb 100644 --- a/modules/settings/assets/js/icons/index.js +++ b/modules/settings/assets/js/icons/index.js @@ -17,3 +17,4 @@ 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'; 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..fec9a77 --- /dev/null +++ b/modules/settings/assets/js/icons/post-connect-modal-icon.js @@ -0,0 +1,286 @@ +import SvgIcon from '@elementor/ui/SvgIcon'; + +const PostConnectModalIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default PostConnectModalIcon; diff --git a/modules/settings/classes/settings.php b/modules/settings/classes/settings.php index 1ef1d25..4732ed0 100644 --- a/modules/settings/classes/settings.php +++ b/modules/settings/classes/settings.php @@ -7,6 +7,7 @@ } class Settings { + public const CLOSE_POST_CONNECT_MODAL = 'ea11y_close_post_connect_modal'; /** * Returns plugin settings data by option name typecasted to an appropriate data type. @@ -14,7 +15,7 @@ class Settings { * @param string $option_name * @return mixed */ - public static function get( string $option_name ) { + public static function get( string $option_name ) :mixed { $data = get_option( $option_name ); switch ( $option_name ) { From 92bd4b0dab5254806f938f83cab5a877f30cc1ac Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Mon, 9 Dec 2024 14:43:06 +0530 Subject: [PATCH 02/11] update: settings prefix --- modules/settings/module.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/modules/settings/module.php b/modules/settings/module.php index 588c004..a2cec50 100644 --- a/modules/settings/module.php +++ b/modules/settings/module.php @@ -6,14 +6,15 @@ use EA11y\Classes\Utils; use EA11y\Modules\Connect\Module as Connect; use Throwable; +use EA11y\Modules\Settings\Classes\Settings; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } class Module extends Module_Base { - const SETTING_PREFIX = 'a11y_'; - const SETTING_GROUP = 'a11y_settings'; + const SETTING_PREFIX = 'ea11y_'; + const SETTING_GROUP = 'ea11y_settings'; const SETTING_BASE_SLUG = 'accessibility-settings-2'; //TODO: Change this later const SETTING_CAPABILITY = 'manage_options'; @@ -90,6 +91,7 @@ public static function get_plugin_settings(): array { return [ 'isConnected' => Connect::is_connected(), + 'closePostConnectModal' => Settings::get( Settings::CLOSE_POST_CONNECT_MODAL ), 'isRTL' => is_rtl(), ]; } From c24fe2ef5e395415c4c8a828f9e1d056a4b98c80 Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Thu, 26 Dec 2024 17:40:27 +0530 Subject: [PATCH 03/11] fix: connect modal design --- .../connect-modal/connect-modal-icon.js | 289 ++---------------- .../js/components/connect-modal/index.js | 93 ++++-- 2 files changed, 93 insertions(+), 289 deletions(-) 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 ce023c7..ef2054b 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 @@ -4,290 +4,37 @@ const ConnectModalIcon = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js index eb9befd..fd73984 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 { __ } from '@wordpress/i18n'; +import ConnectModalIcon from './connect-modal-icon'; 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', + )} + + + + + + + + + + + + + + + + + + + + + + + + ); From a7066749e1634c0edf2b4aef7fd32b1ebc21c8df Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Thu, 26 Dec 2024 17:45:05 +0530 Subject: [PATCH 04/11] update: connect modal text --- modules/settings/assets/js/components/connect-modal/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js index fd73984..86bfcc3 100644 --- a/modules/settings/assets/js/components/connect-modal/index.js +++ b/modules/settings/assets/js/components/connect-modal/index.js @@ -54,7 +54,7 @@ function ConnectModal() { {__( - 'Make your site more inclusive with One Click Accessibility', + 'Make your site more inclusive with One Click Accessibility.', 'pojo-accessibility', )} @@ -102,7 +102,7 @@ function ConnectModal() { fullWidth sx={{ marginTop: 5 }} > - {__('Get Started', 'pojo-accessibility')} + {__('Get started', 'pojo-accessibility')} From db4672ac18655d050aae9cacbe0cb9cc508093c1 Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Fri, 27 Dec 2024 13:14:08 +0530 Subject: [PATCH 05/11] add: connect modal graphics --- .../connect-modal-icon.js | 0 .../js/icons/post-connect-modal-icon.js | 282 ++---------------- 2 files changed, 20 insertions(+), 262 deletions(-) rename modules/settings/assets/js/{components/connect-modal => icons}/connect-modal-icon.js (100%) diff --git a/modules/settings/assets/js/components/connect-modal/connect-modal-icon.js b/modules/settings/assets/js/icons/connect-modal-icon.js similarity index 100% rename from modules/settings/assets/js/components/connect-modal/connect-modal-icon.js rename to modules/settings/assets/js/icons/connect-modal-icon.js diff --git a/modules/settings/assets/js/icons/post-connect-modal-icon.js b/modules/settings/assets/js/icons/post-connect-modal-icon.js index fec9a77..a8a1262 100644 --- a/modules/settings/assets/js/icons/post-connect-modal-icon.js +++ b/modules/settings/assets/js/icons/post-connect-modal-icon.js @@ -3,280 +3,38 @@ import SvgIcon from '@elementor/ui/SvgIcon'; const PostConnectModalIcon = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - From 99fb39cab65f6630ad9f480070dfe35453f7849b Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Fri, 27 Dec 2024 13:14:30 +0530 Subject: [PATCH 06/11] update: connect modal icon --- modules/settings/assets/js/components/connect-modal/index.js | 2 +- modules/settings/assets/js/icons/index.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js index 86bfcc3..243db86 100644 --- a/modules/settings/assets/js/components/connect-modal/index.js +++ b/modules/settings/assets/js/components/connect-modal/index.js @@ -9,8 +9,8 @@ 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'; -import ConnectModalIcon from './connect-modal-icon'; function ConnectModal() { const { isOpen } = useModal(); diff --git a/modules/settings/assets/js/icons/index.js b/modules/settings/assets/js/icons/index.js index b0303cb..d67c047 100644 --- a/modules/settings/assets/js/icons/index.js +++ b/modules/settings/assets/js/icons/index.js @@ -18,3 +18,4 @@ 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'; From 482581a6b91a3aae8e517b9ee6e6e7e1ace834c5 Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Fri, 27 Dec 2024 13:14:43 +0530 Subject: [PATCH 07/11] update: post connect modal --- .../js/components/post-connect-modal/index.js | 52 ++++++++----------- 1 file changed, 22 insertions(+), 30 deletions(-) diff --git a/modules/settings/assets/js/components/post-connect-modal/index.js b/modules/settings/assets/js/components/post-connect-modal/index.js index 71f4d67..25fd98d 100644 --- a/modules/settings/assets/js/components/post-connect-modal/index.js +++ b/modules/settings/assets/js/components/post-connect-modal/index.js @@ -21,9 +21,9 @@ const PostConnectModal = () => { { height: 530, backgroundColor: 'background.paper', boxShadow: 24, - p: '40px 20px', + p: '20px', textAlign: 'center', borderRadius: '4px', }} > - - - {__('Awesome! Your site can now send emails', 'site-mailer')} - - - {__( - 'By default, emails from your site will be sent via:', - 'site-mailer', - )} -
- xyz@gmail.com -
- {__( - 'You can change this address by adding a custom domain in the settings tab.', - 'site-mailer', - )} - - + {__("You're all set", 'site-mailer')} + + + {__( + 'The One Click Accessibility widget is now active and ready to use on your site!', + 'site-mailer', + )} + From 85df41057219620a853806fff6401c761a94cc2e Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Fri, 27 Dec 2024 13:21:09 +0530 Subject: [PATCH 08/11] update: sidebar menu text --- .../settings/assets/js/components/sidebar-menu/menu.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js index 1b618df..180e9bf 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: , From b847c558a97484357167f6325eb304c05105a6b9 Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Fri, 27 Dec 2024 13:24:17 +0530 Subject: [PATCH 09/11] update: text of icon settings --- modules/settings/assets/js/layouts/icon-design-settings.js | 2 +- modules/settings/assets/js/layouts/position-settings.js | 2 +- modules/settings/assets/js/pages/icon-settings.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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/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')} From c2a4b07c5863d56db388607db556abbc41c9cbcf Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Fri, 27 Dec 2024 13:27:13 +0530 Subject: [PATCH 10/11] update: text --- modules/settings/assets/js/components/sidebar-menu/menu.js | 2 +- modules/settings/assets/js/layouts/menu-settings.js | 4 ++-- modules/settings/assets/js/pages/menu.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js index 180e9bf..5372ff8 100644 --- a/modules/settings/assets/js/components/sidebar-menu/menu.js +++ b/modules/settings/assets/js/components/sidebar-menu/menu.js @@ -10,7 +10,7 @@ export const MenuItems = { icon: , children: { iconSettings: { - name: __('Design & Position', 'pojo-accessibility'), + name: __('Design & position', 'pojo-accessibility'), key: 'icon-settings', page: , }, 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/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')} From 53be23ceafa4fb895552d370ad992bfa201c4740 Mon Sep 17 00:00:00 2001 From: Nirbhay Date: Mon, 30 Dec 2024 10:36:28 +0530 Subject: [PATCH 11/11] update: php compatibility with return types --- modules/settings/classes/settings.php | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/modules/settings/classes/settings.php b/modules/settings/classes/settings.php index 2813625..ff77904 100644 --- a/modules/settings/classes/settings.php +++ b/modules/settings/classes/settings.php @@ -13,19 +13,24 @@ class Settings { 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 ) :mixed { - $data = get_option( $option_name ); - - switch ( $option_name ) { - default: - return $data; - } + public static function get( string $option_name ) { + 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 ); }