[APP-834] Update account menu buttons

modules/settings/assets/js/api/index.js

@@ -127,6 +127,15 @@ class API {
 			path: `${v1Prefix}/settings/get-settings`,
 		});
 	}
+
+	/**
+	 * Go to connect service
+	 * @return {Promise<void>} redirect
+	 */
+	static async redirectToConnect() {
+		const link = await this.initConnect();
+		window.open(link, '_self').focus();
+	}
 }
 
 export default API;

modules/settings/assets/js/components/my-account-menu/index.js

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, UserIcon } from '@elementor/icons';
+import { ChevronDownIcon, UserIcon, ExternalLinkIcon } from '@elementor/icons';
 import Avatar from '@elementor/ui/Avatar';
 import Box from '@elementor/ui/Box';
 import List from '@elementor/ui/List';
@@ -13,16 +13,34 @@ import {
 	bindTrigger,
 	usePopupState,
 } from '@elementor/ui/usePopupState';
-import { useSettings } from '@ea11y/hooks';
+import { useSettings, useToastNotification } from '@ea11y/hooks';
 import { CreditCardIcon, UserArrowIcon } from '@ea11y/icons';
 import { __ } from '@wordpress/i18n';
+import API from '../../api';
+import { BILLING_LINK } from '../../constants';
 
 const MyAccountMenu = () => {
 	const { openSidebar } = useSettings();
+	const { error } = useToastNotification();
 	const accountMenuState = usePopupState({
 		variant: 'popover',
 		popupId: 'myAccountMenu',
 	});
+	const onDeactivateAndDisconnect = async () => {
+		try {
+			await API.disconnect();
+			await API.redirectToConnect();
+		} catch (e) {
+			error(
+				__('Failed to switch account. Please try again.', 'pojo-accessibility'),
+			);
+			console.error(e);
+		}
+	};
+
+	const redirectToBilling = () => {
+		window.open(BILLING_LINK, '_blank').focus();
+	};
 	return (
 		<>
 			<List>
@@ -72,17 +90,21 @@ const MyAccountMenu = () => {
 						</Typography>
 					</Box>
 				</MenuItem>
-				<MenuItem onClick={accountMenuState.close}>
+				<MenuItem onClick={onDeactivateAndDisconnect}>
 					<UserArrowIcon sx={{ color: 'common.white' }} />
 					<Typography color="common.white" marginLeft={1}>
 						{__('Switch account', 'pojo-accessibility')}
 					</Typography>
 				</MenuItem>
-				<MenuItem onClick={accountMenuState.close}>
+				<MenuItem onClick={redirectToBilling}>
 					<CreditCardIcon sx={{ color: 'common.white' }} />
 					<Typography color="common.white" marginLeft={1}>
 						{__('Billing', 'pojo-accessibility')}
 					</Typography>
+					<ExternalLinkIcon
+						fontSize="small"
+						sx={{ color: 'common.white', marginLeft: 1 }}
+					/>
 				</MenuItem>
 			</Menu>
 		</>

modules/settings/assets/js/constants/index.js

@@ -1,2 +1,3 @@
 export const HELP_LINK = 'https://go.elementor.com/';
 export const UPGRADE_LINK = 'https://go.elementor.com/';
+export const BILLING_LINK = 'https://my.elementor.com/';

modules/settings/module.php

@@ -12,8 +12,8 @@
 }
 
 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';
 

package.json

@@ -37,7 +37,7 @@
 		"prettier": "^3.4.1"
 	},
 	"dependencies": {
-		"@elementor/icons": "^1.17.0",
+		"@elementor/icons": "^1.20.0",
 		"@elementor/ui": "^1.21.2",
 		"@wordpress/api-fetch": "^7.10.0",
 		"@wordpress/core-data": "^7.10.0",