Added Cassie

oncokb · Jan 27, 2025 · fd292a0 · fd292a0
1 parent 93b7566
commit fd292a0
Show file tree

Hide file tree

Showing 9 changed files with 282 additions and 39 deletions.
diff --git a/src/main/webapp/app/components/Footer.module.scss b/src/main/webapp/app/components/Footer.module.scss
@@ -8,21 +8,45 @@
   position: absolute;
   bottom: 0;
 
-  a {
+  a,
+  button {
     color: white;
   }
 
-  a:hover {
+  a:hover,
+  button:hover {
     color: white;
   }
+
+  button {
+    background: none;
+  }
 }
 
-.footerAList > a {
+.footerAList > a,
+.footerAList > button {
   line-height: 1rem;
   border-right: 0.5px solid #fff;
   padding: 0 0.5rem;
 
   &:last-child {
     border: 0;
   }
+  @media (min-width: 1050px) {
+    & > :not(:global(.d-lg-none)):last-of-type {
+      border: 0;
+    }
+  }
+}
+.footerAList > button:hover {
+  text-decoration: underline;
+}
+
+.internalLinks {
+  text-align: center;
+  @media (min-width: 1050px) {
+    & {
+      text-align: right;
+    }
+  }
 }
diff --git a/src/main/webapp/app/components/Footer.tsx b/src/main/webapp/app/components/Footer.tsx
@@ -16,9 +16,34 @@ import {
   LinkedInLink,
   UserGoogleGroupLink,
 } from 'app/shared/links/SocialMediaLinks';
+import { notifyError } from 'app/shared/utils/NotificationUtils';
+
+function Privacy({ childClassName }: { childClassName: string }) {
+  return (
+    <>
+      <Link className={childClassName} to={PAGE_ROUTE.PRIVACY}>
+        Privacy
+      </Link>
+      <button
+        className={childClassName}
+        onClick={() => {
+          const widget = (window as any)?.CassieWidgetLoader?.Widget;
+          const openModal = widget?.showModal as unknown;
+          if (typeof openModal === 'function') {
+            openModal.bind(widget)();
+          } else {
+            notifyError(new Error('Failed to load cookie settings'));
+          }
+        }}
+      >
+        Cookie Settings
+      </button>
+    </>
+  );
+}
 
 class Footer extends React.Component<{ lastDataUpdate: string }> {
-  public get externalLinks() {
+  public get top() {
     return (
       <>
         <div className={'mb-2'}>
@@ -50,41 +75,14 @@ class Footer extends React.Component<{ lastDataUpdate: string }> {
     );
   }
 
-  public get internalLinks() {
-    return (
-      <>
-        <div className={classnames(styles.footerAList)}>
-          <Link to={PAGE_ROUTE.TERMS}>Terms of Use</Link>
-          <ContactLink emailSubject={'Contact us'}>Contact Us</ContactLink>
-          <LinkedInLink short />
-          <Linkout link={API_DOCUMENT_LINK}>API</Linkout>
-        </div>
-        <div className={classnames(styles.footerAList)}>
-          <Link to={PAGE_ROUTE.NEWS}>
-            Last data update: {this.props.lastDataUpdate}
-          </Link>
-        </div>
-      </>
-    );
-  }
-
   public render() {
     return (
       <footer className={classnames('footer', styles.footer)}>
         <Container>
           <Row className="text-center mb-2">
-            <Col>{this.externalLinks}</Col>
+            <Col>{this.top}</Col>
           </Row>
           <Row className="text-center">
-            <Col
-              lg
-              md={12}
-              className={
-                'd-flex flex-column justify-content-center align-items-center my-1'
-              }
-            >
-              {this.internalLinks}
-            </Col>
             <Col
               lg
               md={12}
@@ -95,16 +93,63 @@ class Footer extends React.Component<{ lastDataUpdate: string }> {
               <MskccLogo imageHeight={50} />
             </Col>
             <Col
-              lg
+              lg={8}
               md={12}
               className={
                 'd-flex flex-column justify-content-center align-items-center my-1'
               }
             >
-              <div>
-                &copy; {new Date().getFullYear()} Memorial Sloan Kettering
-                Cancer Center
-              </div>
+              <Container>
+                <Row>
+                  <Col
+                    lg
+                    md={12}
+                    className={
+                      'd-flex flex-column justify-content-center align-items-left my-1'
+                    }
+                  >
+                    <div
+                      className={classnames(
+                        styles.footerAList,
+                        styles.internalLinks
+                      )}
+                    >
+                      <Link to={PAGE_ROUTE.TERMS}>Terms of Use</Link>
+                      <ContactLink emailSubject={'Contact us'}>
+                        Contact Us
+                      </ContactLink>
+                      <LinkedInLink short />
+                      <Linkout link={API_DOCUMENT_LINK}>API</Linkout>
+                      <Privacy childClassName={classnames('d-inline')} />
+                    </div>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col>
+                    <div
+                      className={classnames(styles.footerAList, styles.news)}
+                    >
+                      <Link to={PAGE_ROUTE.NEWS}>
+                        Last data update: {this.props.lastDataUpdate}
+                      </Link>
+                    </div>
+                  </Col>
+                  <Col
+                    lg
+                    md={12}
+                    className={
+                      'd-flex flex-column justify-content-center align-items-center my-1'
+                    }
+                  >
+                    <div className={classnames(styles.footerAList)}>
+                      <div>
+                        &copy; {new Date().getFullYear()} Memorial Sloan
+                        Kettering Cancer Center
+                      </div>
+                    </div>
+                  </Col>
+                </Row>
+              </Container>
             </Col>
           </Row>
         </Container>

diff --git a/src/main/webapp/app/config/constants.tsx b/src/main/webapp/app/config/constants.tsx
@@ -564,6 +564,7 @@ export enum PAGE_TITLE {
   LOGIN = 'Log in',
   NEWS = 'Latest News',
   ONCOLOGY_TX = 'FDA-Approved Oncology Therapies',
+  PRIVACY = 'OncoKB™ Digital Tracker Governance Privacy Policy',
   REGISTER = 'Register',
   TEAM = 'OncoKB™ Team',
   TERMS = 'Terms of Use',
@@ -581,6 +582,7 @@ export enum PAGE_DESCRIPTION {
   FDA_RECOGNITION = 'As the first somatic human variant database to be recognized by the FDA, OncoKB™ is dedicated to providing curated, evidence-based information on cancer gene mutations.',
   HOME = 'OncoKB™ is a precision oncology knowledge base developed at Memorial Sloan Kettering Cancer Center that contains biological and clinical information about genomic alterations in cancer.',
   LEVELS = 'To communicate the clinical utility of individual mutant alleles consistently, OncoKB developed a levels of evidence classification system. It takes into account the site of tumor origin, by recognizing that the effects of targeted inhibitors vary by tumor lineage, even in cancers that share the same mutant allele',
+  PRIVACY = "OncoKB's Digital Tracker Governance Privacy Policy",
   ONCOLOGY_TX = 'OncoKB™ Oncology Therapies list includes US Food and Drug Administration (FDA)-approved oncology drugs post June 1998 which are categorized by drug class and mechanism of action. Each drug is further classified as to whether it qualifies as a targeted therapy or precision oncology therapy based on Suehnholz et al., Cancer Discovery 2023.',
   TEAM = 'OncoKB™ is developed and maintained by the Knowledge Systems group in the Marie Josée and Henry R. Kravis Center for Molecular Oncology at Memorial Sloan Kettering Cancer Center.',
   TERMS = 'OncoKB™ provides different license models for academic research and commercial usages.',
@@ -613,6 +615,7 @@ export enum PAGE_ROUTE {
   HOME = '/',
   ABOUT = '/about',
   TERMS = '/terms',
+  PRIVACY = '/privacy',
   SOP = '/sop',
   TEAM = '/team',
   YEAR_END_SUMMARY = '/year-end-summary',

diff --git a/src/main/webapp/app/layout.scss b/src/main/webapp/app/layout.scss
@@ -37,7 +37,7 @@ $view-wrapper-default-p-y: 2rem !default;
 }
 
 @include media-breakpoint-up(xs) {
-  $footer-height: 22rem;
+  $footer-height: 26rem;
   $header-height: 4.5rem;
   @include sticky-footer(1rem, $footer-height);
   @include sticky-panel-under-header($header-height);
@@ -70,7 +70,7 @@ $view-wrapper-default-p-y: 2rem !default;
 }
 
 @include media-breakpoint-up(sm) {
-  $footer-height: 17rem;
+  $footer-height: 19rem;
   @include sticky-footer($view-wrapper-default-p-y, $footer-height);
 }
 

diff --git a/src/main/webapp/app/pages/PrivacyPage.module.scss b/src/main/webapp/app/pages/PrivacyPage.module.scss
@@ -0,0 +1,5 @@
+.trackerList {
+  & > section {
+    margin-top: 32px;
+  }
+}
diff --git a/src/main/webapp/app/pages/PrivacyPage.tsx b/src/main/webapp/app/pages/PrivacyPage.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { Row, Col } from 'react-bootstrap';
+import { getPageTitle } from 'app/shared/utils/Utils';
+import { PAGE_TITLE, PAGE_DESCRIPTION, ONCOKB_TM } from 'app/config/constants';
+import styles from './PrivacyPage.module.scss';
+import classNames from 'classnames';
+
+const tempText = `Lorem ipsum odor amet, consectetuer adipiscing elit. Erat montes dolor faucibus vehicula nec consectetur habitasse per. Suspendisse per ligula per eros blandit nunc amet. Montes nisi ultricies primis finibus malesuada natoque. Dictumst amet cras egestas sodales lectus. Est cubilia est fermentum augue id arcu. Magna dolor dui lorem class tincidunt auctor. Nulla lectus commodo non per quisque ante maecenas platea. Mollis etiam sollicitudin id cras himenaeos aliquet.`;
+
+export default function PrivacyPage() {
+  return (
+    <>
+      <Helmet>
+        <title>{getPageTitle(PAGE_TITLE.PRIVACY)}</title>
+        <meta name="description" content={PAGE_DESCRIPTION.PRIVACY}></meta>
+      </Helmet>
+      <Row>
+        <Col className={classNames(styles.trackerList)}>
+          <h2 className="mt-1">
+            {ONCOKB_TM} Digital Tracker Governance Privacy Policy
+          </h2>
+          <section>
+            <h3>1. Introduction</h3>
+            <p>{tempText}</p>
+          </section>
+          <section>
+            <h3>2. Applicability</h3>
+            <p>{tempText}</p>
+          </section>
+          <section>
+            <h3>3. Policy</h3>
+            <section>
+              <h4>A. Minimum Legal Requirements</h4>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+              <section>
+                <h5>User in the United States</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Users visiting from outside the United States</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Exception for Strictly Necessary Trackers</h5>
+                <p>{tempText}</p>
+              </section>
+            </section>
+            <section>
+              <h4>B. Minimum Required Platform Capabilities</h4>
+              <p>{tempText}</p>
+              <section>
+                <h5>Banner/Notice Functionality</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Tracker Classification</h5>
+                <p>{tempText}</p>
+                <ul>
+                  <li>
+                    <b>
+                      <em>Strictly Necessary: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                  <li>
+                    <b>
+                      <em>Performance: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                  <li>
+                    <b>
+                      <em>Functionality: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                  <li>
+                    <b>
+                      <em>Marketing: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                </ul>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Cross-Domain Consent Tracking</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Ongoing Scanning and Monitoring</h5>
+                <p>{tempText}</p>
+              </section>
+            </section>
+            <section>
+              <h4>C. Ownership</h4>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>D. Deployment and Monitoring</h4>
+              <p>{tempText}</p>
+              <section>
+                <h5>MSK Properties</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Detecting and Controlling Trackers</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Ongoing Human Oversight</h5>
+                <p>{tempText}</p>
+              </section>
+            </section>
+            <section>
+              <h4>E. Authenticated MSK Properties</h4>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>F. Unauthenticated MSK Properties</h4>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>G. Privacy Policies</h4>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>H. Consultation with Privacy-Legal Team</h4>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+            </section>
+          </section>
+          <section>
+            <h3>4. Reference &amp; Related Policies</h3>
+            <ul>
+              <li>{tempText}</li>
+              <li>{tempText}</li>
+              <li>{tempText}</li>
+            </ul>
+          </section>
+        </Col>
+      </Row>
+    </>
+  );
+}