astm-member-app-my-account-header/src/components/my-account-header.js

The component is to show My Account Header Menu options when user logged in member app.

import React from 'react';
import { Dropdown, DropdownButton } from 'react-bootstrap';
import { Link } from "react-router-dom";

const MyAccountHeader = ({ isMemberApp, userName, globalLinksURL, signout }) => {

   // Cap the count to 15 characters
   if (userName && userName.length > 15) {
      userName = userName.substring(0, 15) + '...';
   }

   return <DropdownButton
      variant="primary"
      alignRight
      className="profileOptionMenu"
      bsPrefix="astm-btn astm-btn--small btn-primary"
      title={<span data-testid="usernameBtn"><i className="fas fa-user-circle mr5 astm-icon"></i><span>{userName}</span></span>}
      id="dropdown-menu-align-right"
   >
      <Dropdown.Item eventKey="1" href={globalLinksURL.profile}>MyAccount</Dropdown.Item>
      {isMemberApp ? <>
         <Dropdown.Item eventKey="2" as={Link}
            to={globalLinksURL.membership}>Membership</Dropdown.Item>
         {globalLinksURL.myCommitteesUrl && <Dropdown.Item eventKey="3" as={Link} to={globalLinksURL.myCommitteesUrl}>
            MyCommittees</Dropdown.Item>}</> : <>
         <Dropdown.Item eventKey="2" href={globalLinksURL.membership}>Membership</Dropdown.Item>
         {globalLinksURL.myCommitteesUrl && <Dropdown.Item eventKey="3" href={globalLinksURL.myCommitteesUrl}>
            MyCommittees</Dropdown.Item>
         }</>
      }

      {globalLinksURL.meetingsSymposia &&
         <Dropdown.Item eventKey="4" href={globalLinksURL.meetingsSymposia}>Meetings & Symposia</Dropdown.Item>
      }
      <Dropdown.Item eventKey="5" href={globalLinksURL.orders}>Orders</Dropdown.Item>
      <Dropdown.Item eventKey="6" href={globalLinksURL.compass}>Compass</Dropdown.Item>
      <Dropdown.Item eventKey="7" href={globalLinksURL.tracker}>Tracker</Dropdown.Item>
      <Dropdown.Item eventKey="8" href={globalLinksURL.elearning}>eLearning</Dropdown.Item>
      {globalLinksURL.specbuilder && <Dropdown.Item
         eventKey="9" href={globalLinksURL.specbuilder}>SpecBuilder</Dropdown.Item>
      }
      <Dropdown.Divider />
      <Dropdown.Item as="button" eventKey="10" onClick={signout}>Sign Out</Dropdown.Item>
   </DropdownButton>
}

export default MyAccountHeader;