Feature/organization logo

cypress/integration/IconLogo.spec.py.js

@@ -0,0 +1,26 @@
+describe('Icon Logo', () => {
+  Cypress.on('uncaught:exception', (err, runnable) => {
+    // returning false here prevents Cypress from
+    // failing the tests due to uncaught errors
+    return false;
+  });
+
+  it('Displays the organization logo when the user belongs to an organization', () => {
+    cy.visit('http://localhost:3001/login');
+    cy.get('#userName').type('test1');
+    cy.get('#password').type('EoCAyCPpW0');
+    cy.contains(/log/i).click();
+    cy.contains(/earnings/i).click();
+    cy.wait(100);
+    cy.get('img').should('have.attr', 'alt', 'organization logo');
+  });
+  it('Displays the Greenstand logo when the user does not belongs to an organization', () => {
+    cy.visit('http://localhost:3001/login');
+    cy.get('#userName').type('admin');
+    cy.get('#password').type('8pzPdcZAG6&Q');
+    cy.contains(/log/i).click();
+    cy.contains(/earnings/i).click();
+    cy.wait(100);
+    cy.get('img').should('have.attr', 'alt', 'greenstand logo');
+  });
+});

src/components/IconLogo.js

@@ -1,22 +1,47 @@
 import { Link } from 'react-router-dom';
 import logo from './images/logo.svg';
+import { AppContext } from '../context/AppContext';
+import { React, useContext } from 'react';
 
 /*
  * Just a logo icon
  */
-import React from 'react';
 
 export default function IconLogo() {
+  const appContext = useContext(AppContext);
+  const { logoPath, user } = appContext;
+
+  // Hide logo if the logo URL hasn't been loaded or if the Greenstand logo is loaded
+  // and the user has an organization
+  function isVisible() {
+    if (!user) {
+      return 'visible';
+    }
+    if (logoPath === '') {
+      return 'hidden';
+    } else return 'visible';
+  }
+
+  // Logo styling objects for both org and Greenstand logos to be applied to img
+  const greenstandLogoStyle = {
+    maxWidth: 149,
+    maxHeight: 32,
+    marginBottom: '-6px',
+    visibility: isVisible(),
+  };
+
+  const orgLogoStyle = {
+    maxHeight: 50,
+    marginBottom: '-15px',
+    visibility: isVisible(),
+  };
+
   return (
     <Link to="/">
       <img
-        style={{
-          maxWidth: 149,
-          maxHeight: 32,
-          marginBottom: '-6px',
-        }}
-        src={logo}
-        alt="Greenstand logo"
+        style={logoPath === logo ? greenstandLogoStyle : orgLogoStyle}
+        src={logoPath}
+        alt={logoPath === logo ? 'greenstand logo' : 'organization logo'}
       />
     </Link>
   );

src/context/AppContext.js

@@ -32,6 +32,7 @@ import CompareIcon from '@material-ui/icons/Compare';
 import CreditCardIcon from '@material-ui/icons/CreditCard';
 import InboxRounded from '@material-ui/icons/InboxRounded';
 import MapIcon from '@material-ui/icons/Map';
+import logo from '../components/images/logo.svg';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import { session, hasPermission, POLICIES } from '../models/auth';
 import api from '../api/treeTrackerApi';
@@ -220,6 +221,7 @@ export const AppProvider = (props) => {
   const [userHasOrg, setUserHasOrg] = useState(false);
   const [orgList, setOrgList] = useState([]);
   const [orgId, setOrgId] = useState(undefined);
+  const [logoPath, setlogoPath] = useState('');
 
   // TODO: The below `selectedFilters` state would be better placed under a
   // separate FilterContext in the future iterations when the need to share
@@ -241,6 +243,20 @@ export const AppProvider = (props) => {
     }
   }, [orgList]);
 
+  // Gets organization logo url from the API
+  useEffect(() => {
+    if (user && user.policy.organization) {
+      const STAKEHOLDER_API = process.env.REACT_APP_STAKEHOLDER_API_ROOT;
+      const orgID = user.policy.organization.id;
+      fetch(`${STAKEHOLDER_API}/stakeholders/${orgID}`)
+        .then((response) => response.json())
+        .then((data) => {
+          const orgLogo = data.stakeholders[0].logo_url;
+          orgLogo ? setlogoPath(orgLogo) : setlogoPath(logo);
+        });
+    } else setlogoPath(logo);
+  }, [user, login]);
+
   function checkSession() {
     const localToken = JSON.parse(localStorage.getItem('token'));
     const localUser = JSON.parse(localStorage.getItem('user'));
@@ -339,6 +355,7 @@ export const AppProvider = (props) => {
     routes,
     orgId,
     orgList,
+    logoPath,
     userHasOrg,
     selectedFilters,
     updateSelectedFilter,