From b8b7d078d129db1a9018e01861419745e3d10240 Mon Sep 17 00:00:00 2001
From: Steve Tsala <45661418+SteveGT96@users.noreply.github.com>
Date: Wed, 20 Sep 2023 10:16:24 +0100
Subject: [PATCH] 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
---
 .../accessories/hospitalInfo/HospitalInfo.tsx | 42 ++++++++++++++++++
 .../accessories/hospitalInfo/styles.scss      | 44 +++++++++++++++++++
 .../accessories/hospitalInfo/types.ts         |  8 ++++
 .../laboratoryActivity/LaboratoryActivity.tsx |  2 +
 .../PatientDetailsActivity.tsx                |  2 +
 .../visitsActivity/VisitsActivity.tsx         |  2 +
 6 files changed, 100 insertions(+)
 create mode 100644 src/components/accessories/hospitalInfo/HospitalInfo.tsx
 create mode 100644 src/components/accessories/hospitalInfo/styles.scss
 create mode 100644 src/components/accessories/hospitalInfo/types.ts

diff --git a/src/components/accessories/hospitalInfo/HospitalInfo.tsx b/src/components/accessories/hospitalInfo/HospitalInfo.tsx
new file mode 100644
index 000000000..49ced74a0
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/accessories/hospitalInfo/styles.scss b/src/components/accessories/hospitalInfo/styles.scss
new file mode 100644
index 000000000..6ae93acba
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/accessories/hospitalInfo/types.ts b/src/components/accessories/hospitalInfo/types.ts
new file mode 100644
index 000000000..07c3c3315
--- /dev/null
+++ b/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;
diff --git a/src/components/activities/laboratoryActivity/LaboratoryActivity.tsx b/src/components/activities/laboratoryActivity/LaboratoryActivity.tsx
index fd02b2399..1d49be518 100644
--- a/src/components/activities/laboratoryActivity/LaboratoryActivity.tsx
+++ b/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>
diff --git a/src/components/activities/patientDetailsActivity/PatientDetailsActivity.tsx b/src/components/activities/patientDetailsActivity/PatientDetailsActivity.tsx
index 021565f26..23867823b 100644
--- a/src/components/activities/patientDetailsActivity/PatientDetailsActivity.tsx
+++ b/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
diff --git a/src/components/activities/visitsActivity/VisitsActivity.tsx b/src/components/activities/visitsActivity/VisitsActivity.tsx
index 7eb1404c8..dea34ec7b 100644
--- a/src/components/activities/visitsActivity/VisitsActivity.tsx
+++ b/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>