From 1e85ae9d036ac5d1f70704593c3453a1d9dc244d Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Fri, 16 Sep 2022 18:02:34 -0400
Subject: [PATCH 1/9] CARDS-1741: Add a PageStart extension point to the
 patient UI

---
 modules/demo-banner/pom.xml                   |  1 +
 .../SurveyPageStart/WarningBanner.json        |  6 +++++
 modules/downtime-warning-banner/pom.xml       |  1 +
 .../DowntimeWarningBanner.json                |  6 +++++
 .../frontend/src/patient-portal/index.jsx     | 26 ++++++++++++-------
 .../ExtensionPoints/SurveyPageStart.json      |  5 ++++
 6 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 modules/demo-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/WarningBanner.json
 create mode 100644 modules/downtime-warning-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/DowntimeWarningBanner.json
 create mode 100644 modules/patient-portal/src/main/resources/SLING-INF/content/apps/cards/ExtensionPoints/SurveyPageStart.json

diff --git a/modules/demo-banner/pom.xml b/modules/demo-banner/pom.xml
index ffffa37d11..89ef2e76e2 100644
--- a/modules/demo-banner/pom.xml
+++ b/modules/demo-banner/pom.xml
@@ -45,6 +45,7 @@
             <Sling-Initial-Content>
               SLING-INF/content/Extensions/PageStart/;path:=/Extensions/PageStart/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/LoginPageStart/;path:=/Extensions/LoginPageStart/;overwriteProperties:=true;uninstall:=true,
+              SLING-INF/content/Extensions/SurveyPageStart/;path:=/Extensions/SurveyPageStart/;overwriteProperties:=true;uninstall:=true
             </Sling-Initial-Content>
           </instructions>
         </configuration>
diff --git a/modules/demo-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/WarningBanner.json b/modules/demo-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/WarningBanner.json
new file mode 100644
index 0000000000..78cfb2c562
--- /dev/null
+++ b/modules/demo-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/WarningBanner.json
@@ -0,0 +1,6 @@
+{
+  "jcr:primaryType": "cards:Extension",
+  "cards:extensionPointId": "patient-portal/surveyPageStart",
+  "cards:extensionName": "Demo Warning Banner",
+  "cards:extensionRenderURL": "asset:cards-demo-banner.demoBanner.js"
+}
diff --git a/modules/downtime-warning-banner/pom.xml b/modules/downtime-warning-banner/pom.xml
index 0cd2f2e8a5..af8f301e1c 100644
--- a/modules/downtime-warning-banner/pom.xml
+++ b/modules/downtime-warning-banner/pom.xml
@@ -43,6 +43,7 @@
               SLING-INF/content/apps/cards/config/;path:=/apps/cards/config/;overwrite:=false,
               SLING-INF/content/Extensions/PageStart/;path:=/Extensions/PageStart/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/LoginPageStart/;path:=/Extensions/LoginPageStart/;overwriteProperties:=true;uninstall:=true,
+              SLING-INF/content/Extensions/SurveyPageStart/;path:=/Extensions/SurveyPageStart/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/AdminDashboard/;path:=/Extensions/AdminDashboard/;overwriteProperties:=true;uninstall:=true,
               SLING-INF/content/Extensions/Views/;path:=/Extensions/Views/;overwriteProperties:=true;uninstall:=true,
             </Sling-Initial-Content>
diff --git a/modules/downtime-warning-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/DowntimeWarningBanner.json b/modules/downtime-warning-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/DowntimeWarningBanner.json
new file mode 100644
index 0000000000..7bab47f214
--- /dev/null
+++ b/modules/downtime-warning-banner/src/main/resources/SLING-INF/content/Extensions/SurveyPageStart/DowntimeWarningBanner.json
@@ -0,0 +1,6 @@
+{
+  "jcr:primaryType": "cards:Extension",
+  "cards:extensionPointId": "patient-portal/surveyPageStart",
+  "cards:extensionName": "Downtime Warning Banner",
+  "cards:extensionRenderURL": "asset:cards-downtime-warning-banner.downtimeBanner.js"
+}
diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
index ff79ad8828..208ad71ec1 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
@@ -26,6 +26,7 @@ import QuestionnaireSet from "./QuestionnaireSet.jsx";
 import PatientIdentification from "./PatientIdentification.jsx";
 import Footer from "./Footer.jsx";
 import ErrorPage from "../components/ErrorPage.jsx";
+import PageStart from '../PageStart';
 
 import { DEFAULT_INSTRUCTIONS, SURVEY_INSTRUCTIONS_PATH } from "./SurveyInstructionsConfiguration.jsx"
 
@@ -113,16 +114,21 @@ function PatientPortalHomepage (props) {
 const hist = createBrowserHistory();
 hist.listen(({action, location}) => window.dispatchEvent(new Event("beforeunload")));
 ReactDOM.render(
-  <StyledEngineProvider injectFirst>
-    <ThemeProvider theme={appTheme}>
-      <Router history={hist}>
-        <Switch color="secondary">
-          <Route path="/Survey.html/" component={PatientPortalHomepage} />
-          <Redirect from="/Survey" to="/Survey.html/"/>
-        </Switch>
-      </Router>
-    </ThemeProvider>
-  </StyledEngineProvider>,
+  <React.Fragment>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={appTheme}>
+        <PageStart
+      extensionsName="SurveyPageStart"
+    />
+        <Router history={hist}>
+          <Switch color="secondary">
+            <Route path="/Survey.html/" component={PatientPortalHomepage} />
+            <Redirect from="/Survey" to="/Survey.html/"/>
+          </Switch>
+        </Router>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  </React.Fragment>,
   document.querySelector('#patient-portal-container')
 );
 
diff --git a/modules/patient-portal/src/main/resources/SLING-INF/content/apps/cards/ExtensionPoints/SurveyPageStart.json b/modules/patient-portal/src/main/resources/SLING-INF/content/apps/cards/ExtensionPoints/SurveyPageStart.json
new file mode 100644
index 0000000000..67605a3c82
--- /dev/null
+++ b/modules/patient-portal/src/main/resources/SLING-INF/content/apps/cards/ExtensionPoints/SurveyPageStart.json
@@ -0,0 +1,5 @@
+{
+  "jcr:primaryType": "cards:ExtensionPoint",
+  "cards:extensionPointId": "patient-portal/surveyPageStart",
+  "cards:extensionPointName": "Content to be displayed on the top of the Patient Portal"
+}

From 180af7ab6dab51eb673017a6cd2e876ada15d586 Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Mon, 19 Sep 2022 22:46:00 -0400
Subject: [PATCH 2/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Better codestyle

---
 .../frontend/src/patient-portal/index.jsx     | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
index 208ad71ec1..ac5fec5a38 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
@@ -114,21 +114,17 @@ function PatientPortalHomepage (props) {
 const hist = createBrowserHistory();
 hist.listen(({action, location}) => window.dispatchEvent(new Event("beforeunload")));
 ReactDOM.render(
-  <React.Fragment>
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={appTheme}>
-        <PageStart
-      extensionsName="SurveyPageStart"
-    />
-        <Router history={hist}>
-          <Switch color="secondary">
-            <Route path="/Survey.html/" component={PatientPortalHomepage} />
-            <Redirect from="/Survey" to="/Survey.html/"/>
-          </Switch>
-        </Router>
-      </ThemeProvider>
-    </StyledEngineProvider>
-  </React.Fragment>,
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={appTheme}>
+      <PageStart extensionsName="SurveyPageStart" />
+      <Router history={hist}>
+        <Switch color="secondary">
+          <Route path="/Survey.html/" component={PatientPortalHomepage} />
+          <Redirect from="/Survey" to="/Survey.html/"/>
+        </Switch>
+      </Router>
+    </ThemeProvider>
+  </StyledEngineProvider>,
   document.querySelector('#patient-portal-container')
 );
 

From ebaaceb202df0993779416d4d29c8b8e24bb875f Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Wed, 21 Sep 2022 14:08:50 -0400
Subject: [PATCH 3/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Fixed the banner alignment

---
 .../frontend/src/patient-portal/index.jsx     | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
index ac5fec5a38..f565915fcd 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
@@ -42,6 +42,7 @@ function PatientPortalHomepage (props) {
   const [ surveyInstructions, setSurveyInstructions ] = useState();
   const [ accessConfig, setAccessConfig ] = useState({});
   const [ unableToProceed, setUnableToProceed ] = useState();
+  const [ contentOffset, setContentOffset ] = useState(0);
 
   // Fetch saved settings for Patient Portal Survey Instructions
   useEffect(() => {
@@ -100,13 +101,35 @@ function PatientPortalHomepage (props) {
 
   if (!subject) {
     return (<>
-      <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText}/>
+      <PageStart
+        extensionsName="SurveyPageStart"
+        setTotalHeight={(th) => {
+              if (contentOffset != th) {
+                setContentOffset(th);
+              }
+            }
+        }
+      />
+        <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+          <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText}/>
+        </div>
       <Footer />
     </>);
   }
 
   return (<>
-    <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
+    <PageStart
+      extensionsName="SurveyPageStart"
+      setTotalHeight={(th) => {
+              if (contentOffset != th) {
+                setContentOffset(th);
+              }
+            }
+      }
+    />
+      <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+        <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
+      </div>
     <Footer />
   </>);
 }
@@ -116,7 +139,6 @@ hist.listen(({action, location}) => window.dispatchEvent(new Event("beforeunload
 ReactDOM.render(
   <StyledEngineProvider injectFirst>
     <ThemeProvider theme={appTheme}>
-      <PageStart extensionsName="SurveyPageStart" />
       <Router history={hist}>
         <Switch color="secondary">
           <Route path="/Survey.html/" component={PatientPortalHomepage} />

From 9816a728574df2fc88d74ac8ba4a6eb68d5f26bf Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Wed, 21 Sep 2022 22:52:34 -0400
Subject: [PATCH 4/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Fixed the  the Terms of Use position; Banner should disappear on
 user survey scroll in mobile mode

---
 modules/demo-banner/src/main/frontend/src/demoBanner.jsx      | 2 +-
 .../src/main/frontend/src/downtimeBanner.jsx                  | 2 +-
 .../src/main/frontend/src/patient-portal/index.jsx            | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/demo-banner/src/main/frontend/src/demoBanner.jsx b/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
index 9acfe37446..f239f9897f 100644
--- a/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
+++ b/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
@@ -40,7 +40,7 @@ export default function DemoBanner(props) {
   const StyledAppBar = withStyles(appbarStyle)(AppBar);
 
   return (
-    <StyledAppBar position="fixed" style={props.style} ref={props.onRender}>
+    <StyledAppBar position="absolute" style={props.style} ref={props.onRender}>
       <Toolbar>
       <Grid container spacing={1} direction="row" justifyContent="center" alignItems="center" wrap="nowrap">
         <Grid item><WarningIcon/></Grid>
diff --git a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
index c9bf4acc6c..0387f514a9 100644
--- a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
+++ b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
@@ -85,7 +85,7 @@ export default function DowntimeWarning(props) {
   }
 
   return (
-    <StyledAppBar position="fixed" style={props.style} ref={props.onRender}>
+    <StyledAppBar position="absolute" style={props.style} ref={props.onRender}>
       <Toolbar>
       {error && <Typography color='error'>{errorText}</Typography>}
       <Grid container spacing={1} direction="row" alignItems="center" wrap="nowrap">
diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
index f565915fcd..7c27012831 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
@@ -112,8 +112,8 @@ function PatientPortalHomepage (props) {
       />
         <div style={ { position: 'relative', top: contentOffset + 'px' } }>
           <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText}/>
+          <Footer />
         </div>
-      <Footer />
     </>);
   }
 
@@ -129,8 +129,8 @@ function PatientPortalHomepage (props) {
     />
       <div style={ { position: 'relative', top: contentOffset + 'px' } }>
         <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
+        <Footer />
       </div>
-    <Footer />
   </>);
 }
 

From deadbb5e6e327ee47a3927fbae6e041b04d32309 Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Fri, 23 Sep 2022 05:40:27 -0400
Subject: [PATCH 5/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Made banner dissaper on scroll; Removed shade from banner style;
 Reverted fixed position changes; Added banner to the error page;

---
 .../src/main/frontend/src/demoBanner.jsx      |  5 ++-
 .../src/main/frontend/src/downtimeBanner.jsx  |  5 ++-
 .../src/main/frontend/src/PageStart.jsx       | 11 ++++-
 .../frontend/src/patient-portal/index.jsx     | 43 ++++++++++++-------
 4 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/modules/demo-banner/src/main/frontend/src/demoBanner.jsx b/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
index f239f9897f..3d8a7eef2e 100644
--- a/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
+++ b/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
@@ -32,7 +32,8 @@ import WarningIcon from '@mui/icons-material/Warning';
 
 const appbarStyle = theme => ({
   root: {
-    backgroundColor: theme.palette.warning.main
+    backgroundColor: theme.palette.warning.main,
+    boxShadow: "none",
   }
 });
 
@@ -40,7 +41,7 @@ export default function DemoBanner(props) {
   const StyledAppBar = withStyles(appbarStyle)(AppBar);
 
   return (
-    <StyledAppBar position="absolute" style={props.style} ref={props.onRender}>
+    <StyledAppBar position="fixed" style={props.style} ref={props.onRender}>
       <Toolbar>
       <Grid container spacing={1} direction="row" justifyContent="center" alignItems="center" wrap="nowrap">
         <Grid item><WarningIcon/></Grid>
diff --git a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
index 0387f514a9..01e82d731f 100644
--- a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
+++ b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
@@ -34,6 +34,7 @@ import BuildIcon from '@mui/icons-material/Build';
 const appbarStyle = theme => ({
   root: {
     backgroundColor: theme.palette.info.main,
+    boxShadow: "none",
     "& .MuiAvatar-root" : {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.info.main
@@ -85,10 +86,10 @@ export default function DowntimeWarning(props) {
   }
 
   return (
-    <StyledAppBar position="absolute" style={props.style} ref={props.onRender}>
+    <StyledAppBar position="fixed" style={props.style} ref={props.onRender}>
       <Toolbar>
       {error && <Typography color='error'>{errorText}</Typography>}
-      <Grid container spacing={1} direction="row" alignItems="center" wrap="nowrap">
+      <Grid container spacing={1} direction="row" justifyContent="center" alignItems="center" wrap="nowrap">
         <Grid item><Avatar><BuildIcon/></Avatar></Grid>
         <Grid item>
         <Typography variant="body2">
diff --git a/modules/page-start-header/src/main/frontend/src/PageStart.jsx b/modules/page-start-header/src/main/frontend/src/PageStart.jsx
index 3fb28563b1..b0317df272 100644
--- a/modules/page-start-header/src/main/frontend/src/PageStart.jsx
+++ b/modules/page-start-header/src/main/frontend/src/PageStart.jsx
@@ -19,6 +19,7 @@
 
 import React, { useEffect, useState } from "react";
 import { loadExtensions } from "./uiextension/extensionManager";
+import { Collapse, useScrollTrigger } from '@mui/material';
 
 export default function PageStart(props) {
 
@@ -33,6 +34,12 @@ export default function PageStart(props) {
   const [ pageStartHeight, setPageStartHeight ] = useState(0);
 
   const extensionsName = props.extensionsName || "PageStart";
+  
+  const fullBannerTrigger = useScrollTrigger({
+    target: window,
+    disableHysteresis: true,
+    threshold: 100,
+  });
 
   useEffect(() => {
     props.setTotalHeight && props.setTotalHeight(pageStartHeight);
@@ -104,13 +111,14 @@ export default function PageStart(props) {
 
   return (
     <React.Fragment>
+    <Collapse in={!fullBannerTrigger}>
     {
       visualComponents.map((ThisComp, index) => {
         return (
           <ThisComp
             {...props}
             key={index}
-            style={{ top: (componentPositions[index]) + 'px' }}
+            style={{ top: (componentPositions[index]) + 'px', zIndex: props.zIndex || "1301" }}
             onRender={(node) => {
                 if (node != null) {
                   let n = node.getBoundingClientRect().height;
@@ -126,6 +134,7 @@ export default function PageStart(props) {
         );
       })
     }
+    </Collapse>
     </React.Fragment>
   );
 }
diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
index 7c27012831..15c2ddf43a 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
@@ -90,19 +90,32 @@ function PatientPortalHomepage (props) {
     let appName = document.querySelector('meta[name="title"]')?.content;
     let message = surveyInstructions?.welcomeMessage?.replaceAll("APP_NAME", appName) || '';
     message = `${message}\n\n### To fill out surveys, please follow the personalized link that was emailed to you.`;
-    return (
-      <ErrorPage
-        sx={{maxWidth: 500, margin: "0 auto"}}
-        title=""
-        message={message}
-        messageColor="textPrimary"
-      />)
+    return (<>
+      <PageStart
+        extensionsName="SurveyPageStart"
+        setTotalHeight={(th) => {
+              if (contentOffset != th) {
+                setContentOffset(th);
+              }
+            }
+        }
+      />
+      <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+        <ErrorPage
+          sx={{maxWidth: 500, margin: "0 auto"}}
+          title=""
+          message={message}
+          messageColor="textPrimary"
+        />
+      </div>
+    </>)
   }
 
   if (!subject) {
     return (<>
       <PageStart
         extensionsName="SurveyPageStart"
+        zIndex="1300"
         setTotalHeight={(th) => {
               if (contentOffset != th) {
                 setContentOffset(th);
@@ -110,10 +123,10 @@ function PatientPortalHomepage (props) {
             }
         }
       />
-        <div style={ { position: 'relative', top: contentOffset + 'px' } }>
-          <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText}/>
-          <Footer />
-        </div>
+      <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+        <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText} />
+        <Footer />
+      </div>
     </>);
   }
 
@@ -127,10 +140,10 @@ function PatientPortalHomepage (props) {
             }
       }
     />
-      <div style={ { position: 'relative', top: contentOffset + 'px' } }>
-        <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
-        <Footer />
-      </div>
+    <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+      <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
+      <Footer />
+    </div>
   </>);
 }
 

From acd03d5d3d00cc7bca8f34ae07522bc13f78a7f1 Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Sat, 24 Sep 2022 21:29:29 -0400
Subject: [PATCH 6/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Addressed codereview comments

---
 .../src/questionnaire/ResourceHeader.jsx      |  6 +-
 .../src/main/frontend/src/demoBanner.jsx      |  3 +
 .../src/main/frontend/src/downtimeBanner.jsx  |  3 +
 .../src/main/frontend/src/PageStart.jsx       | 11 +---
 .../main/frontend/src/PageStartWrapper.jsx    | 55 +++++++++++++++++++
 .../frontend/src/patient-portal/Header.jsx    |  5 +-
 .../frontend/src/patient-portal/index.jsx     | 43 +++------------
 7 files changed, 78 insertions(+), 48 deletions(-)
 create mode 100644 modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/ResourceHeader.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/ResourceHeader.jsx
index 83c29c9026..2b77cc9697 100644
--- a/modules/data-entry/src/main/frontend/src/questionnaire/ResourceHeader.jsx
+++ b/modules/data-entry/src/main/frontend/src/questionnaire/ResourceHeader.jsx
@@ -33,6 +33,8 @@ import makeStyles from '@mui/styles/makeStyles';
 import { grey } from '@mui/material/colors';
 
 import { GRID_SPACE_UNIT } from "./QuestionnaireStyle";
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 
 const useStyles = makeStyles(theme => ({
     resourceHeader: {
@@ -100,6 +102,8 @@ function ResourceHeader (props) {
   let { title, breadcrumbs, separator, tags, action, children } = props;
 
   const classes = useStyles();
+  const theme = useTheme();
+  const appbarExpanded = useMediaQuery(theme.breakpoints.up('md'));
 
   // Scroll trigger for collapsing the Title and action into the breadcrumbs
   const fullBreadcrumbTrigger = useScrollTrigger({
@@ -110,7 +114,7 @@ function ResourceHeader (props) {
 
   return (
     <>
-    <Grid item xs={12} className={classes.resourceHeader} style={{top: props.contentOffset}} id="cards-resource-header">
+    <Grid item xs={12} className={classes.resourceHeader} style={ { top: appbarExpanded ? props.contentOffset: 0 }} id="cards-resource-header">
       <Grid container direction="row" justifyContent="space-between" alignItems="center" wrap="nowrap">
         <Grid item>
           <Breadcrumbs separator={separator}>
diff --git a/modules/demo-banner/src/main/frontend/src/demoBanner.jsx b/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
index 3d8a7eef2e..f8e0654ce5 100644
--- a/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
+++ b/modules/demo-banner/src/main/frontend/src/demoBanner.jsx
@@ -34,6 +34,9 @@ const appbarStyle = theme => ({
   root: {
     backgroundColor: theme.palette.warning.main,
     boxShadow: "none",
+    [theme.breakpoints.down('md')]: {
+      position: 'absolute',
+    },
   }
 });
 
diff --git a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
index 01e82d731f..14ffe6ebc1 100644
--- a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
+++ b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
@@ -35,6 +35,9 @@ const appbarStyle = theme => ({
   root: {
     backgroundColor: theme.palette.info.main,
     boxShadow: "none",
+    [theme.breakpoints.down('md')]: {
+      position: 'absolute',
+    },
     "& .MuiAvatar-root" : {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.info.main
diff --git a/modules/page-start-header/src/main/frontend/src/PageStart.jsx b/modules/page-start-header/src/main/frontend/src/PageStart.jsx
index b0317df272..3fb28563b1 100644
--- a/modules/page-start-header/src/main/frontend/src/PageStart.jsx
+++ b/modules/page-start-header/src/main/frontend/src/PageStart.jsx
@@ -19,7 +19,6 @@
 
 import React, { useEffect, useState } from "react";
 import { loadExtensions } from "./uiextension/extensionManager";
-import { Collapse, useScrollTrigger } from '@mui/material';
 
 export default function PageStart(props) {
 
@@ -34,12 +33,6 @@ export default function PageStart(props) {
   const [ pageStartHeight, setPageStartHeight ] = useState(0);
 
   const extensionsName = props.extensionsName || "PageStart";
-  
-  const fullBannerTrigger = useScrollTrigger({
-    target: window,
-    disableHysteresis: true,
-    threshold: 100,
-  });
 
   useEffect(() => {
     props.setTotalHeight && props.setTotalHeight(pageStartHeight);
@@ -111,14 +104,13 @@ export default function PageStart(props) {
 
   return (
     <React.Fragment>
-    <Collapse in={!fullBannerTrigger}>
     {
       visualComponents.map((ThisComp, index) => {
         return (
           <ThisComp
             {...props}
             key={index}
-            style={{ top: (componentPositions[index]) + 'px', zIndex: props.zIndex || "1301" }}
+            style={{ top: (componentPositions[index]) + 'px' }}
             onRender={(node) => {
                 if (node != null) {
                   let n = node.getBoundingClientRect().height;
@@ -134,7 +126,6 @@ export default function PageStart(props) {
         );
       })
     }
-    </Collapse>
     </React.Fragment>
   );
 }
diff --git a/modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx b/modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx
new file mode 100644
index 0000000000..647c271d3e
--- /dev/null
+++ b/modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx
@@ -0,0 +1,55 @@
+//
+//  Licensed to the Apache Software Foundation (ASF) under one
+//  or more contributor license agreements.  See the NOTICE file
+//  distributed with this work for additional information
+//  regarding copyright ownership.  The ASF licenses this file
+//  to you under the Apache License, Version 2.0 (the
+//  "License"); you may not use this file except in compliance
+//  with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing,
+//  software distributed under the License is distributed on an
+//  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+//  KIND, either express or implied.  See the License for the
+//  specific language governing permissions and limitations
+//  under the License.
+//
+
+import React, { useState } from "react";
+import PropTypes from 'prop-types';
+import PageStart from './PageStart';
+
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
+
+let PageStartWrapper = (props) => {
+  let { children, extensionsName } = {...props};
+  const [ contentOffset, setContentOffset ] = useState(0);
+
+  const theme = useTheme();
+  const appbarExpanded = useMediaQuery(theme.breakpoints.up('md'));
+
+  return (<>
+      <PageStart
+        extensionsName={extensionsName}
+        setTotalHeight={(th) => {
+              if (contentOffset != th) {
+                setContentOffset(th);
+              }
+            }
+        }
+      />
+      <div style={ { position: appbarExpanded ? 'relative' : 'absolute', top: contentOffset + 'px' } }>
+       { children }
+     </div>
+   </>
+  );
+}
+
+PageStartWrapper.propTypes = {
+  extensionsName: PropTypes.string,
+};
+
+export default PageStartWrapper;
diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx
index a1e884469d..76836232c6 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx
@@ -16,7 +16,7 @@
 //  specific language governing permissions and limitations
 //  under the License.
 //
-import React, { useState } from "react";
+import React from "react";
 import {
   AppBar,
   Breadcrumbs,
@@ -34,6 +34,9 @@ import makeStyles from '@mui/styles/makeStyles';
 const useStyles = makeStyles(theme => ({
   appbar : {
     margin: theme.spacing(-1, -1, 4),
+    [theme.breakpoints.down('md')]: {
+      margin: theme.spacing(0, -1),
+    },
     padding: theme.spacing(0, 1),
     boxSizing: "content-box",
     background: "transparent",
diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
index 15c2ddf43a..5316155e9a 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/index.jsx
@@ -26,7 +26,7 @@ import QuestionnaireSet from "./QuestionnaireSet.jsx";
 import PatientIdentification from "./PatientIdentification.jsx";
 import Footer from "./Footer.jsx";
 import ErrorPage from "../components/ErrorPage.jsx";
-import PageStart from '../PageStart';
+import PageStartWrapper from '../PageStartWrapper';
 
 import { DEFAULT_INSTRUCTIONS, SURVEY_INSTRUCTIONS_PATH } from "./SurveyInstructionsConfiguration.jsx"
 
@@ -42,7 +42,6 @@ function PatientPortalHomepage (props) {
   const [ surveyInstructions, setSurveyInstructions ] = useState();
   const [ accessConfig, setAccessConfig ] = useState({});
   const [ unableToProceed, setUnableToProceed ] = useState();
-  const [ contentOffset, setContentOffset ] = useState(0);
 
   // Fetch saved settings for Patient Portal Survey Instructions
   useEffect(() => {
@@ -91,59 +90,31 @@ function PatientPortalHomepage (props) {
     let message = surveyInstructions?.welcomeMessage?.replaceAll("APP_NAME", appName) || '';
     message = `${message}\n\n### To fill out surveys, please follow the personalized link that was emailed to you.`;
     return (<>
-      <PageStart
-        extensionsName="SurveyPageStart"
-        setTotalHeight={(th) => {
-              if (contentOffset != th) {
-                setContentOffset(th);
-              }
-            }
-        }
-      />
-      <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+      <PageStartWrapper extensionsName="SurveyPageStart">
         <ErrorPage
           sx={{maxWidth: 500, margin: "0 auto"}}
           title=""
           message={message}
           messageColor="textPrimary"
         />
-      </div>
+      </PageStartWrapper>
     </>)
   }
 
   if (!subject) {
     return (<>
-      <PageStart
-        extensionsName="SurveyPageStart"
-        zIndex="1300"
-        setTotalHeight={(th) => {
-              if (contentOffset != th) {
-                setContentOffset(th);
-              }
-            }
-        }
-      />
-      <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+      <PageStartWrapper extensionsName="SurveyPageStart">
         <PatientIdentification onSuccess={onPatientIdentified} displayText={displayText} />
         <Footer />
-      </div>
+      </PageStartWrapper>
     </>);
   }
 
   return (<>
-    <PageStart
-      extensionsName="SurveyPageStart"
-      setTotalHeight={(th) => {
-              if (contentOffset != th) {
-                setContentOffset(th);
-              }
-            }
-      }
-    />
-    <div style={ { position: 'relative', top: contentOffset + 'px' } }>
+    <PageStartWrapper extensionsName="SurveyPageStart">
       <QuestionnaireSet subject={subject} username={username} displayText={displayText} config={{...accessConfig, enableStartScreen: surveyInstructions?.enableStartScreen}} />
       <Footer />
-    </div>
+    </PageStartWrapper>
   </>);
 }
 

From 4580fc78ce2bebfb6f6d5311cd40d40faa7fe3a8 Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Tue, 27 Sep 2022 15:08:55 -0400
Subject: [PATCH 7/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Fixed Survey header

---
 .../src/main/frontend/src/downtimeBanner.jsx              | 4 ++--
 .../src/main/frontend/src/PageStartWrapper.jsx            | 2 +-
 .../src/main/frontend/src/patient-portal/Header.jsx       | 8 +++++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
index 14ffe6ebc1..8e4c5edfed 100644
--- a/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
+++ b/modules/downtime-warning-banner/src/main/frontend/src/downtimeBanner.jsx
@@ -72,11 +72,11 @@ export default function DowntimeWarning(props) {
         setEnabled(json.enabled == 'true');
         if (json.fromDate) {
           let date = new Date(json.fromDate);
-          setFromDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
+          (date != "Invalid Date") && setFromDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
         }
         if (json.toDate) {
           let date = new Date(json.toDate);
-          setToDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
+          (date != "Invalid Date") && setToDate(date.toDateString() + " " + date.toLocaleTimeString().replace(":00 ", " "));
         }
       })
       .catch((error) => {
diff --git a/modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx b/modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx
index 647c271d3e..7fbcca1d37 100644
--- a/modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx
+++ b/modules/page-start-header/src/main/frontend/src/PageStartWrapper.jsx
@@ -41,7 +41,7 @@ let PageStartWrapper = (props) => {
             }
         }
       />
-      <div style={ { position: appbarExpanded ? 'relative' : 'absolute', top: contentOffset + 'px' } }>
+      <div id="page-start-wrapper-content" style={ { position: appbarExpanded ? 'relative' : 'absolute', top: contentOffset + 'px' } }>
        { children }
      </div>
    </>
diff --git a/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx b/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx
index 76836232c6..3c7108e6cb 100644
--- a/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx
+++ b/modules/patient-portal/src/main/frontend/src/patient-portal/Header.jsx
@@ -29,6 +29,8 @@ import {
   useScrollTrigger,
 } from "@mui/material";
 
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(theme => ({
@@ -88,6 +90,10 @@ function Header (props) {
     threshold: 250,
   });
 
+  const theme = useTheme();
+  const appbarExpanded = useMediaQuery(theme.breakpoints.up('md'));
+  const contentOffset = document?.getElementById('page-start-wrapper-content')?.style.top || 0;
+
   let subtitleBar = subtitle ?
     <Toolbar variant="dense" className={classes.toolbar}>
       <Typography variant="h6" color="textPrimary">{ subtitle }</Typography>
@@ -97,7 +103,7 @@ function Header (props) {
 
   return (
     <>
-    <AppBar position="sticky" className={classes.appbar}>
+    <AppBar position="sticky" className={classes.appbar} style={ { top: appbarExpanded ? contentOffset: 0 }}>
       <Collapse in={!subtitle || !(scrollTrigger)}>
         <Toolbar variant="dense" className={classes.toolbar}>
           <div className={classes.titleLine}>

From bb6ff2f1f98542a02d3c795bb5f5944e45197075 Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Tue, 27 Sep 2022 17:30:35 -0400
Subject: [PATCH 8/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Moved login header down

---
 modules/login/src/main/frontend/src/styling/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/login/src/main/frontend/src/styling/styles.js b/modules/login/src/main/frontend/src/styling/styles.js
index 20a558a3bb..9ade9db560 100644
--- a/modules/login/src/main/frontend/src/styling/styles.js
+++ b/modules/login/src/main/frontend/src/styling/styles.js
@@ -33,7 +33,7 @@ const styles = theme => ({
     padding: theme.spacing(2, 3, 3),
   },
   selfContained: {
-    marginTop: theme.spacing(10),
+    marginTop: theme.spacing(14),
     marginBottom: theme.spacing(2),
   },
   logo: {

From a38749fa17cfe4abbe61d9468971e735a5b05cb0 Mon Sep 17 00:00:00 2001
From: veronikaslc <veronika.koltunov@gmail.com>
Date: Tue, 27 Sep 2022 18:13:39 -0400
Subject: [PATCH 9/9] CARDS-1741: Add a PageStart extension point to the
 patient UI Fixed the height of the sidebar panel

---
 .../src/main/frontend/src/themePage/Sidebar/sidebar.jsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/homepage/src/main/frontend/src/themePage/Sidebar/sidebar.jsx b/modules/homepage/src/main/frontend/src/themePage/Sidebar/sidebar.jsx
index 2572fb9934..10cf112094 100644
--- a/modules/homepage/src/main/frontend/src/themePage/Sidebar/sidebar.jsx
+++ b/modules/homepage/src/main/frontend/src/themePage/Sidebar/sidebar.jsx
@@ -144,7 +144,7 @@ const Sidebar = ({ ...props }) => {
           PaperProps={ { style: { top: contentOffset + 'px', height: 'calc(100% - ' + contentOffset + 'px)' } } }
         >
           {brand}
-          <div className={classes.sidebarWrapper}>
+          <div className={classes.sidebarWrapper} style={ { height: 'calc(100vh - ' + (75 + contentOffset) + 'px)' } }>
             <AdminNavbarLinks closeSidebar={props.handleDrawerToggle}/>
             {links}
             {adminLinks}