Home Header

The Home Header is responsible for the navigational elements on the Home Page and Catalog Page. It controls the display of links to the manager interface when appropriate and linking to authentication for users who are not yet signed in. For authenticated users, it also displays links for account and profile pages alongside school logos.

Home Header Props

Prop	Description
company	Object The Company to which the current instance belongs.
currentUser	Object OR Boolean If authenticated, a CurrentUser object containing information regarding current user. If not authenticated, will pass false
headerBlock	Object Contains links and custom html configured for the instance header.
cart	Object Contains items the user has added to their cart.
origContext	Class The Thought Industries application context.
sendAction	Function Sends actions to the parent application.
openCartModal	String An action to open the parent application's cart modal.

Important Note: To use this atom, the file should be /atoms/HomeHeader.jsx. Below is the code. The example below is the base code of HomeHeader.jsx component which you can replace when you place the code in the file /atoms/HomeHeader.jsx.

Example

// HomeHeader.jsx
import React, { useEffect, useState } from 'react';

export default function HomeHeader({ company, currentUser }) {
  return (
    <div>
      <div>
        {company?.appearanceBlock?.logoAsset && (
          <img src={company.appearanceBlock.logoAsset} />
        )}
      </div>
      <div>
        {currentUser?.id && currentUser?.role?.hasManagerInterfaceAccess && (
          <div>
            <a href="/learn/manager">Manager Access</a>
          </div>
        )}
        {currentUser?.firstName ? (
          <div>
            <span>Hello, {currentUser.firstName}!</span>
          </div>
        ) : (
          <div>
            <a href="/learn/sign_in">Sign In</a>
          </div>
        )}
      </div>
    </div>
  );
}

Utilizing the sendAction, origContext, openCartModal props, we can add functionality for opening the parent application's Cart modal:

import React, { useEffect, useState } from 'react';

export default function HomeHeader({
  company,
  currentUser,
  sendAction,
  origContext,
  openCartModal
}) {
  const openCart = () => {
    sendAction.call(origContext, openCartModal);
  };

  return (
    <div>
      <div>
        {company?.appearanceBlock?.logoAsset && (
          <img src={company.appearanceBlock.logoAsset} />
        )}
      </div>
      <div>
        {currentUser?.id && currentUser?.role?.hasManagerInterfaceAccess && (
          <div>
            <a href="/learn/manager">Manager Access</a>
          </div>
        )}
        {currentUser?.firstName ? (
          <div>
            <span>Hello, {currentUser.firstName}!</span>
          </div>
        ) : (
          <div>
            <a href="/learn/sign_in">Sign In</a>
          </div>
        )}
      </div>
      <div>
        <button onClick={openCart}>Cart</button>
      </div>
    </div>
  );
}