Merge pull request #249 from swiftss-org/staging

Localisation changes for different branding on different sites
swiftss-org · May 7, 2024 · b3b0692 · b3b0692
2 parents 7b92d49 + 52e3b91
commit b3b0692
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,31 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>TMH Registry</title>
+    <title>eRegistry</title>
+    <script>
+      window.onload = function() {
+        var domain = window.location.hostname;
+        // If domain is not recognised, default to Tanzania
+        var title = "eRegistry Tz";
+        if (window.location.hostname === 'tmh-registry-client.herokuapp.com') {
+          // Tanzania
+          title = "eRegistry Tz";
+        } else if (window.location.hostname === 'tmh-registry-client-gh-6a64e51863f6.herokuapp.com') {
+          // Ghana
+          title = "eRegistry Gh";
+        } else if (window.location.hostname === 'tmh-registry-client-sl.herokuapp.com') {
+          // Sierra Leone
+          title = "eRegistry SL";
+        } else if (window.location.hostname === 'tmh-registry-client-staging.herokuapp.com') {
+          // Staging site
+          title = "eRegistry TEST SITE";
+        } else if (window.location.hostname === 'localhost') {
+          // Localhost
+          title = "eRegistry LOCALHOST";
+        }
+        document.title = title;
+      };
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/assets/gh-logo.png b/src/assets/gh-logo.png
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -1,7 +1,15 @@
+import GHLogo from 'assets/gh-logo.png'
+import SLLogo from 'assets/sl-logo.png';
 import SwiftSSLogo from 'assets/swiftss-logo.png';
+import TSALogoLocal from 'assets/tsa-logo-local.png';
+import TSALogoTest from 'assets/tsa-logo-test.png';
 import TSALogo from 'assets/tsa-logo.png';
 
 export default {
+  GHLogo,
+  SLLogo,
   TSALogo,
   SwiftSSLogo,
+  TSALogoLocal,
+  TSALogoTest,
 };
diff --git a/src/assets/sl-logo.png b/src/assets/sl-logo.png
diff --git a/src/assets/tsa-logo-local.png b/src/assets/tsa-logo-local.png
diff --git a/src/assets/tsa-logo-test.png b/src/assets/tsa-logo-test.png
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -3,7 +3,11 @@ import React from 'react';
 import { Button, useBreakpoints } from '@orfium/ictinus';
 import { useHistory } from 'react-router-dom';
 
+import GHLogo from '../../assets/gh-logo.png'
+import SLLogo from '../../assets/sl-logo.png';
 import SwiftSSLogo from '../../assets/swiftss-logo.png';
+import TSALogoLocal from '../../assets/tsa-logo-local.png';
+import TSALogoTest from '../../assets/tsa-logo-test.png';
 import TSALogo from '../../assets/tsa-logo.png';
 import { useIsLoggedIn } from '../../hooks/useIsLoggedIn';
 import urls from '../../routing/urls';
@@ -29,6 +33,26 @@ export type Props = {
   handleClick?: () => void;
 };
 
+let SiteLogo: string;
+// If domain is not recognised, default to Tanzania
+SiteLogo = TSALogo;
+if (window.location.hostname === 'tmh-registry-client.herokuapp.com') {
+  // Tanzania
+  SiteLogo = TSALogo;
+} else if (window.location.hostname === 'tmh-registry-client-gh-6a64e51863f6.herokuapp.com') {
+  // Ghana
+  SiteLogo = GHLogo;
+} else if (window.location.hostname === 'tmh-registry-client-sl.herokuapp.com') {
+  // Sierra Leone
+  SiteLogo = SLLogo;
+} else if (window.location.hostname === 'tmh-registry-client-staging.herokuapp.com') {
+  // Staging site
+  SiteLogo = TSALogoTest;
+} else if (window.location.hostname === 'localhost') {
+  // Localhost
+  SiteLogo = TSALogoLocal;
+}
+
 const Drawer: React.FC<Props> = (props) => {
   const breakpoints = useBreakpoints();
   const isSmallDesktop = breakpoints.des1200 && !breakpoints.des1440;
@@ -52,6 +76,102 @@ const Drawer: React.FC<Props> = (props) => {
   const isDesktop =
     breakpoints.des1200 || breakpoints.des1440 || breakpoints.des1366 || breakpoints.des1920;
 
+  const getLocalisedFooterText = () => {
+    if (window.location.hostname === 'tmh-registry-client.herokuapp.com') {
+      // Tanzania
+      return (
+        <div>The Tanzania National Mesh Hernia Project is an original collaboration between SWIFTSS
+          and the TSA (and the forerunner of the Affordable Mesh Hernia Surgery Initiative). For
+          more information visit <a href="https://swiftss.org/">www.swiftss.org</a>.</div>
+      );
+    } else if (window.location.hostname === 'tmh-registry-client-gh-6a64e51863f6.herokuapp.com') {
+      // Ghana
+      return (
+        <div>The Affordable Mesh Hernia Surgery Initiative is a collaboration between SWIFTSS and
+          the Ghanaian AMHSI working group. For more information
+          visit <a href="https://swiftss.org/">www.swiftss.org</a>.</div>
+      );
+    } else if (window.location.hostname === 'tmh-registry-client-sl.herokuapp.com') {
+      // Sierra Leone
+      return (
+        <div>The Affordable Mesh Hernia Surgery Initiative is a collaboration between SWIFTSS and
+          the Sierra Leone AMHSI working group.  For more information
+          visit <a href="https://swiftss.org/">www.swiftss.org</a>.</div>
+      );
+    } else if (window.location.hostname === 'tmh-registry-client-staging.herokuapp.com') {
+      // Staging site
+      return (
+        <div>This is the test site for the AMHSI. Please enjoy the freedom to try it out. Look
+          around and create some fake patients, episodes, discharges and follow ups. PLEASE DO NOT
+          USE ANY REAL DATA ON THIS SITE.</div>
+      );
+    } else if (window.location.hostname === 'localhost') {
+      // Localhost
+      return (
+        <div>The Tanzania National Mesh Hernia Project is an original collaboration between SWIFTSS
+          and the TSA (and the forerunner of the Affordable Mesh Hernia Surgery Initiative). For
+          more information visit <a href="https://swiftss.org/">www.swiftss.org</a>.</div>
+      )
+    } else {
+      // If domain is not recognised, default to Tanzania
+      return (
+        <div>The Tanzania National Mesh Hernia Project is an original collaboration between SWIFTSS
+          and the TSA (and the forerunner of the Affordable Mesh Hernia Surgery Initiative). For
+          more information visit <a href="https://swiftss.org/">www.swiftss.org</a>.</div>
+      );
+    }
+  };
+
+  const footerText= getLocalisedFooterText();
+
+  const getLocalisedHeaderText = () => {
+    if (window.location.hostname === 'tmh-registry-client.herokuapp.com') {
+      // Tanzania
+      return (
+        <div>Tanzania National<br />
+          Mesh Hernia Project<br />
+          eRegistry</div>
+      );
+    } else if (window.location.hostname === 'tmh-registry-client-gh-6a64e51863f6.herokuapp.com') {
+      // Ghana
+      return (
+        <div>Ghana Affordable<br />
+          Mesh Hernia Project<br />
+          eRegistry</div>
+      );
+    } else if (window.location.hostname === 'tmh-registry-client-sl.herokuapp.com') {
+      // Sierra Leone
+      return (
+        <div>Sierra Leone Affordable<br />
+          Mesh Hernia Project<br />
+          eRegistry</div>
+      );
+    } else if (window.location.hostname === 'tmh-registry-client-staging.herokuapp.com') {
+      // Staging site
+      return (
+        <div>Affordable Mesh<br />
+          Hernia Surgery Initiative<br />
+          eRegistry TEST SITE</div>
+      );
+    } else if (window.location.hostname === 'localhost') {
+      // Localhost
+      return (
+        <div>Tanzania National<br />
+          Mesh Hernia Project<br />
+          eRegistry</div>
+      )
+    } else {
+      // If domain is not recognised, default to Tanzania
+      return (
+        <div>Tanzania National<br />
+          Mesh Hernia Project<br />
+          eRegistry</div>
+      );
+    }
+  };
+
+  const headerText = getLocalisedHeaderText();
+
   return (
     <Container
       expanded={props.expanded}
@@ -84,20 +204,19 @@ const Drawer: React.FC<Props> = (props) => {
           </UserContainer>
         )}
         <HeaderText>
-          Tanzania <br />
-          NMHP Registry
+          {headerText}
         </HeaderText>
       </Header>
       <Navigation handleClick={handleClick} {...props} />
 
       <Footer>
         <div style={{ display: 'flex', gap: '12px' }}>
           <img width={44} src={SwiftSSLogo} />
-          <img width={52} src={TSALogo} />
+          <img width={52} src={SiteLogo} />
         </div>
 
         <FooterText>
-          The Tanzania Mesh Hernia Project Registry is a joint project between Swiftss and the TSA.
+          {footerText}
         </FooterText>
       </Footer>
     </Container>