Add social media links in notification (#1144)

Author: zhx828

screenshot-test/__baseline_snapshots__/About Page without Login-snap.png

@@ -12,6 +12,11 @@ import { API_DOCUMENT_LINK, PAGE_ROUTE } from 'app/config/constants';
 import { Linkout } from 'app/shared/links/Linkout';
 import ExternalLinkIcon from 'app/shared/icons/ExternalLinkIcon';
 import { OncoTreeLink } from 'app/shared/utils/UrlUtils';
+import {
+  LinkedInLink,
+  TwitterLink,
+  UserGoogleGroupLink,
+} from 'app/shared/links/SocialMediaLinks';
 
 class Footer extends React.Component<{ lastDataUpdate: string }> {
   public get externalLinks() {
@@ -61,13 +66,8 @@ class Footer extends React.Component<{ lastDataUpdate: string }> {
         <div className={classnames(styles.footerAList)}>
           <Link to={PAGE_ROUTE.TERMS}>Terms of Use</Link>
           <ContactLink emailSubject={'Contact us'}>Contact Us</ContactLink>
-          <a
-            href="https://twitter.com/OncoKB"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Twitter
-          </a>
+          <LinkedInLink short />
+          <TwitterLink short />
           <Linkout link={API_DOCUMENT_LINK}>API</Linkout>
         </div>
         <div className={classnames(styles.footerAList)}>

screenshot-test/__baseline_snapshots__/Account Settings Page without ROLE_API and not requested-snap.png

@@ -21,6 +21,11 @@ import { Link } from 'react-router-dom';
 import AppStore from 'app/store/AppStore';
 import { Linkout } from 'app/shared/links/Linkout';
 import { COLOR_BLACK, COLOR_DARK_BLUE, COLOR_WARNING } from 'app/config/theme';
+import {
+  LinkedInLink,
+  TwitterLink,
+  UserGoogleGroupLink,
+} from 'app/shared/links/SocialMediaLinks';
 
 export interface IUserMessage {
   dateStart?: number;
@@ -49,6 +54,22 @@ if (
     // ADD MESSAGE IN FOLLOWING FORMAT
     // UNIQUE ID IS IMPORTANT B/C WE REMEMBER A MESSAGE HAS BEEN SHOWN
     // BASED ON USERS LOCALSTORAGE
+    {
+      dateEnd: 1735689600000,
+      content: (
+        <div>
+          <div>
+            <span>
+              Follow us on <LinkedInLink /> and <TwitterLink />, or subscribe to
+              our{' '}
+              <UserGoogleGroupLink>low-volume email list</UserGoogleGroupLink>,
+              to stay updated on our latest data releases and new features!
+            </span>
+          </div>
+        </div>
+      ),
+      id: '2024-social-accounts-message',
+    },
     {
       dateEnd: 1705276800000,
       content: (
@@ -67,7 +88,7 @@ if (
       id: '2023-holiday-message',
     },
     {
-      dateEnd: 100000000000000,
+      dateEnd: 1,
       content: (
         <div>
           <span>Check out our latest publication in Cancer Discovery, </span>

screenshot-test/__baseline_snapshots__/Account Settings Page without ROLE_API and requested-snap.png

@@ -32,6 +32,11 @@ import { GenePageLink, SopPageLink } from 'app/shared/utils/UrlUtils';
 import { Row } from 'react-bootstrap';
 import { FdaApprovalLink } from 'app/pages/newsPage/Links';
 import { LevelOfEvidencePageLink } from 'app/shared/links/LevelOfEvidencePageLink';
+import {
+  LinkedInLink,
+  TwitterLink,
+  UserGoogleGroupLink,
+} from 'app/shared/links/SocialMediaLinks';
 
 @inject('routing')
 @observer
@@ -71,21 +76,9 @@ export default class NewsPage extends React.Component<{
             </p>
             <p>
               <b>Stay tuned</b> for future data updates (improved annotations,
-              new alterations), as well as new features. You can follow us on
-              Twitter (
-              <a
-                href="https://twitter.com/OncoKB"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                @OncoKB
-              </a>
-              ) or subscribe to our{' '}
-              <b>
-                <Linkout link={ONCOKB_NEWS_GROUP_SUBSCRIPTION_LINK}>
-                  low-volume email list
-                </Linkout>
-              </b>{' '}
+              new alterations), as well as new features. You can follow us on{' '}
+              <LinkedInLink /> and <TwitterLink />, or subscribe to our{' '}
+              <UserGoogleGroupLink>low-volume email list</UserGoogleGroupLink>{' '}
               for updates.
             </p>
             <CitationText />

screenshot-test/__baseline_snapshots__/Account Settings Page-snap.png

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Linkout } from 'app/shared/links/Linkout';
+import { ONCOKB_NEWS_GROUP_SUBSCRIPTION_LINK } from 'app/config/constants';
+
+export const TwitterLink: React.FunctionComponent<{
+  short?: boolean;
+}> = props => {
+  return (
+    <Linkout link={'https://twitter.com/OncoKB'}>
+      Twitter{props.short ? '' : ' (@OncoKB)'}
+    </Linkout>
+  );
+};
+
+export const LinkedInLink: React.FunctionComponent<{
+  short?: boolean;
+}> = props => {
+  return (
+    <Linkout link={'https://www.linkedin.com/company/oncokb/'}>
+      LinkedIn{props.short ? '' : ' (OncoKB)'}
+    </Linkout>
+  );
+};
+
+export const UserGoogleGroupLink: React.FunctionComponent = props => {
+  return (
+    <Linkout link={ONCOKB_NEWS_GROUP_SUBSCRIPTION_LINK}>
+      {props.children ? props.children : 'Email List'}
+    </Linkout>
+  );
+};