145 lines
3.9 KiB
TypeScript
145 lines
3.9 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useState } from '@wordpress/element';
|
|
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
|
|
import { Icon, commentAuthorAvatar, external, linkOff } from '@wordpress/icons';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './header-account.scss';
|
|
import { getAdminSetting } from '../../../utils/admin-settings';
|
|
import HeaderAccountModal from './header-account-modal';
|
|
import { MARKETPLACE_URL } from '../constants';
|
|
|
|
export default function HeaderAccount(): JSX.Element {
|
|
const [ isModalOpen, setIsModalOpen ] = useState( false );
|
|
const openModal = () => setIsModalOpen( true );
|
|
|
|
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
|
|
const isConnected = wccomSettings?.isConnected ?? false;
|
|
const connectionURL = wccomSettings?.connectURL ?? '';
|
|
const userEmail = wccomSettings?.userEmail;
|
|
const avatarURL = wccomSettings?.userAvatar ?? commentAuthorAvatar;
|
|
|
|
// This is a hack to prevent TypeScript errors. The MenuItem component passes these as an href prop to the underlying button
|
|
// component. That component is either an anchor with href if provided or a button that won't accept an href if no href is provided.
|
|
// Due to early erroring of TypeScript, it only takes the button version into account which doesn't accept href.
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const accountURL: any = MARKETPLACE_URL + '/my-dashboard/';
|
|
const accountOrConnect = isConnected ? accountURL : connectionURL;
|
|
|
|
const avatar = () => {
|
|
if ( ! isConnected ) {
|
|
return commentAuthorAvatar;
|
|
}
|
|
|
|
return (
|
|
<img
|
|
src={ avatarURL }
|
|
alt=""
|
|
className="woocommerce-marketplace__menu-avatar-image"
|
|
/>
|
|
);
|
|
};
|
|
|
|
const connectionStatusText = isConnected
|
|
? __( 'Connected', 'woocommerce' )
|
|
: __( 'Not Connected', 'woocommerce' );
|
|
|
|
const connectionDetails = () => {
|
|
if ( isConnected ) {
|
|
return (
|
|
<>
|
|
<Icon
|
|
icon={ commentAuthorAvatar }
|
|
size={ 24 }
|
|
className="woocommerce-marketplace__menu-icon"
|
|
/>
|
|
<span className="woocommerce-marketplace__main-text">
|
|
{ userEmail }
|
|
</span>
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<Icon
|
|
icon={ commentAuthorAvatar }
|
|
size={ 24 }
|
|
className="woocommerce-marketplace__menu-icon"
|
|
/>
|
|
<div className="woocommerce-marketplace__menu-text">
|
|
{ __( 'Connect account', 'woocommerce' ) }
|
|
<span className="woocommerce-marketplace__sub-text">
|
|
{ __(
|
|
'Manage your subscriptions, get updates and support for your extensions and themes.',
|
|
'woocommerce'
|
|
) }
|
|
</span>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenu
|
|
className="woocommerce-marketplace__user-menu"
|
|
icon={ avatar() }
|
|
label={ __( 'User options', 'woocommerce' ) }
|
|
>
|
|
{ () => (
|
|
<>
|
|
<MenuGroup
|
|
className="woocommerce-layout__homescreen-display-options"
|
|
label={ connectionStatusText }
|
|
>
|
|
<MenuItem
|
|
className="woocommerce-marketplace__menu-item"
|
|
href={ accountOrConnect }
|
|
>
|
|
{ connectionDetails() }
|
|
</MenuItem>
|
|
<MenuItem href={ accountURL }>
|
|
<Icon
|
|
icon={ external }
|
|
size={ 24 }
|
|
className="woocommerce-marketplace__menu-icon"
|
|
/>
|
|
{ __(
|
|
'WooCommerce.com account',
|
|
'woocommerce'
|
|
) }
|
|
</MenuItem>
|
|
</MenuGroup>
|
|
{ isConnected && (
|
|
<MenuGroup className="woocommerce-layout__homescreen-display-options">
|
|
<MenuItem onClick={ openModal }>
|
|
<Icon
|
|
icon={ linkOff }
|
|
size={ 24 }
|
|
className="woocommerce-marketplace__menu-icon"
|
|
/>
|
|
{ __(
|
|
'Disconnect account',
|
|
'woocommerce'
|
|
) }
|
|
</MenuItem>
|
|
</MenuGroup>
|
|
) }
|
|
</>
|
|
) }
|
|
</DropdownMenu>
|
|
{ isModalOpen && (
|
|
<HeaderAccountModal
|
|
setIsModalOpen={ setIsModalOpen }
|
|
disconnectURL={ connectionURL }
|
|
/>
|
|
) }
|
|
</>
|
|
);
|
|
}
|