OH2-228 | Add hospital info on print (#518)

* update(OH2-228): Add hospital info on print

* fix: Fix e2e tests failing

* refactor: Remove unused imports

src/components/accessories/hospitalInfo/HospitalInfo.tsx

@@ -0,0 +1,42 @@
+import React, { FC, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import logo from "../../../assets/logo-color.svg";
+import "./styles.scss";
+import { TProps } from "./types";
+import { IState } from "../../../types";
+import { useDispatch, useSelector } from "react-redux";
+import { getHospital } from "../../../state/hospital/actions";
+import { HospitalDTO } from "../../../generated";
+
+export const HospitalInfo: FC<TProps> = ({}) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  useEffect(() => {
+    dispatch(getHospital());
+  }, [dispatch, getHospital]);
+
+  const hospital = useSelector<IState>(
+    (state) => state.hospital.getHospital.data
+  ) as HospitalDTO;
+
+  return (
+    <div className="hospitalInfo">
+      <div className="hospitalInfo__background">
+        <div className="hospitalInfo__logo">
+          <img src={logo} alt="Open Hospital" height="45px" />
+        </div>
+        <div className="hospitalInfo__main">
+          <div className="hospitalInfo__main__headline">
+            {hospital?.description ?? t("common.hospitalname")}
+          </div>
+          <div className="hospitalInfo__main__details">
+            {hospital?.city && <div>{hospital.city}</div>}
+            {hospital?.address && <div>{hospital.address}</div>}
+            {hospital?.fax && <div>{hospital.fax}</div>}
+            {hospital?.email && <div>{hospital.email}</div>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/accessories/hospitalInfo/styles.scss

@@ -0,0 +1,44 @@
+@import "../../../styles/variables";
+@import "../../../../node_modules/susy/sass/susy";
+
+.hospitalInfo {
+  display: none;
+  box-shadow: 0 4px 8px 0 rgba(48, 49, 51, 0.1);
+  width: 100%;
+  margin-bottom: 32px;
+  .hospitalInfo__background {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    background-color: $c-white;
+    padding: 30px 30px 20px 30px;
+    width: 100%;
+  }
+
+  .hospitalInfo__logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 30px;
+  }
+  .hospitalInfo__main {
+    display: flex;
+    flex-flow: wrap column;
+    align-items: end;
+    .hospitalInfo__main__headline {
+      font-size: x-large;
+      font-weight: bolder;
+      margin-bottom: 5px;
+    }
+    .hospitalInfo__main__details {
+      display: flex;
+      font-size: small;
+      font-weight: 300;
+      color: $c-grey-light;
+      column-gap: 24px;
+    }
+  }
+  @media print {
+    display: flex;
+  }
+}

src/components/accessories/hospitalInfo/types.ts

@@ -0,0 +1,8 @@
+import { TUserCredentials } from "../../../state/main/types";
+import { TAPIResponseStatus } from "../../../state/types";
+
+export type TBreadcrumbMap = Record<string, string>;
+
+export interface IOwnProps {}
+
+export type TProps = IOwnProps;

src/components/activities/laboratoryActivity/LaboratoryActivity.tsx

@@ -8,6 +8,7 @@ import { TUserCredentials } from "../../../state/main/types";
 import { IState } from "../../../types";
 import AppHeader from "../../accessories/appHeader/AppHeader";
 import Footer from "../../accessories/footer/Footer";
+import { HospitalInfo } from "../../accessories/hospitalInfo/HospitalInfo";
 import { Exams } from "../../accessories/laboratory/Exams";
 import "./styles.scss";
 
@@ -42,6 +43,7 @@ const LaboratoryActivity: FC = () => {
       />
       <div className="labs__background">
         <div className="labs__content">
+          <HospitalInfo />
           <Permission require="laboratory.access">
             <Exams />
           </Permission>

src/components/activities/patientDetailsActivity/PatientDetailsActivity.tsx

@@ -27,6 +27,7 @@ import {
 import AppHeader from "../../accessories/appHeader/AppHeader";
 import Button from "../../accessories/button/Button";
 import Footer from "../../accessories/footer/Footer";
+import { HospitalInfo } from "../../accessories/hospitalInfo/HospitalInfo";
 import { ProfilePicture } from "../../accessories/profilePicture/ProfilePicture";
 import InPatientDashboardMenu from "./InPatientDashboardMenu";
 import OutPatientDashboardMenu from "./OutPatientDashboardMenu";
@@ -343,6 +344,7 @@ const PatientDetailsActivity: FunctionComponent<TProps> = ({
                   </div>
                 </div>
                 <div className="patientDetails__content">
+                  <HospitalInfo />
                   <div className="patientDetails__profilePictureContainer_wrapper">
                     <div className="patientDetails__profilePictureContainer">
                       <ProfilePicture

src/components/activities/visitsActivity/VisitsActivity.tsx

@@ -7,6 +7,7 @@ import { TUserCredentials } from "../../../state/main/types";
 import { IState } from "../../../types";
 import AppHeader from "../../accessories/appHeader/AppHeader";
 import Footer from "../../accessories/footer/Footer";
+import { HospitalInfo } from "../../accessories/hospitalInfo/HospitalInfo";
 import { Opds } from "../../accessories/opds/Opds";
 import "./styles.scss";
 
@@ -29,6 +30,7 @@ const VisitsActivity: FC = () => {
       />
       <div className="visits__background">
         <div className="visits__content">
+          <HospitalInfo />
           <Permission require="visit.access">
             <Opds />
           </Permission>