Home Header

The Home Header is responsible for displaying links to the manager interface when appropriate, linking to authentication for users, displaying links for account and profile pages for authenticated users, as well as school logos on the home page.

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.

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>
  )
}