Merge pull request #1483 from NYPL/MLN-1304

Added inactive school message in all the tabs

app/controllers/holds_controller.rb

@@ -22,7 +22,8 @@ def show
     render json: {
       hold: @hold.as_json,
       teacher_set: @hold.teacher_set.as_json,
-      teacher_set_notes: @hold.teacher_set.teacher_set_notes
+      teacher_set_notes: @hold.teacher_set.teacher_set_notes,
+      is_school_active: current_user.present? ? current_user.is_school_active? : nil
     }
   end
 
@@ -43,7 +44,8 @@ def cancel_details
     render json: {
       hold: @hold.as_json,
       teacher_set: @hold.teacher_set.as_json,
-      teacher_set_notes: @hold.teacher_set.teacher_set_notes
+      teacher_set_notes: @hold.teacher_set.teacher_set_notes,
+      is_school_active: current_user.present? ? current_user.is_school_active? : nil
     }
   end
 

app/controllers/settings_controller.rb

@@ -92,7 +92,8 @@ def index
                         end.flatten, :current_password => User.default_password.to_s}
     end
     orders_not_present_msg = @holds.length <= 0 ? "You have not yet placed any orders." : ""
-    render json: { accountdetails: resp, ordersNotPresentMsg: orders_not_present_msg }
+    render json: { accountdetails: resp, ordersNotPresentMsg: orders_not_present_msg,
+                   is_school_active: current_user.present? ? current_user.is_school_active? : nil }
   end
 
   def acccount_details

app/javascript/components/Accounts/Accounts.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import AppBreadcrumbs from "../AppBreadcrumbs";
 import HaveQuestions from "../HaveQuestions/HaveQuestions";
 import axios from "axios";
-
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 import {
   TextInput,
   Form,
@@ -41,6 +41,7 @@ export default function Accounts() {
   const [altEmailIsvalid, setAltEmailIsvalid] = useState(false);
   const [notificationType, setNotificationType] = useState("neutral");
   const [displayNotification, setDisplayNotification] = useState("");
+  const [isSchoolActive, setIsSchoolActive] = useState("");
   const tableHeaderBgColor = useColorModeValue(
     "ui.bg.default",
     "dark.ui.bg.default"
@@ -77,6 +78,7 @@ export default function Accounts() {
           setPassword(accountDetails.current_password);
           setTotalPages(accountDetails.total_pages);
           setOrdersNotPresentMsg(accountDetails.ordersNotPresentMsg);
+          setIsSchoolActive(res.data.is_school_active)
         }
       })
       .catch(function (error) {
@@ -328,7 +330,10 @@ export default function Accounts() {
   return (
     <TemplateAppContainer
       breakout={<AppBreadcrumbs />}
-      contentTop={AccountUpdatedMessage()}
+      contentTop={<>
+        {renderInactiveSchoolMessage(isSchoolActive)}
+        {AccountUpdatedMessage()}
+      </>}
       contentPrimary={
         <>
           <Heading

app/javascript/components/AppBreadcrumbs.jsx

@@ -4,7 +4,6 @@ import {
   Heading,
   Hero,
   useColorModeValue,
-  Banner
 } from "@nypl/design-system-react-components";
 
 export default function AppBreadcrumbs(props) {
@@ -83,15 +82,6 @@ export default function AppBreadcrumbs(props) {
     }
   };
 
-  const inactiveSchoolMessage = () => {
-    console.log(props.is_school_active)
-    if (props.is_school_active === false) {
-      return (<Banner className="inactiveSchool" content={<>
-        Your school is inactive, so your account is restricted. Please contact [email protected].
-      </>} type="warning"/>)
-    }
-  }
-
   const HeroDataValue = (levelString) => {
     switch (levelString) {
       case "participating-schools":
@@ -146,7 +136,6 @@ export default function AppBreadcrumbs(props) {
           />
         }
       />
-      {inactiveSchoolMessage()}
     </>
   );
 }

app/javascript/components/CancelOrderDetails/CancelTeacherSetOrder.jsx

@@ -14,6 +14,7 @@ import {
   useColorMode,
 } from "@nypl/design-system-react-components";
 import { useParams, useNavigate } from "react-router-dom";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 
 export default function TeacherSetOrder() {
   const params = useParams();
@@ -24,6 +25,7 @@ export default function TeacherSetOrder() {
   const [comment, setComment] = useState("");
   const { colorMode } = useColorMode();
   const [disabledButton, setDisabledButton] = useState(false);
+  const [isSchoolActive, setIsSchoolActive] = useState("");
 
   useEffect(() => {
     document.title = "Cancel Order | MyLibraryNYC";
@@ -34,6 +36,7 @@ export default function TeacherSetOrder() {
       .then((res) => {
         setTeacherSet(res.data.teacher_set);
         setHold(res.data.hold);
+        setIsSchoolActive(res.data.is_school_active);
       })
       .catch(function (error) {
         console.log(error);
@@ -129,6 +132,7 @@ export default function TeacherSetOrder() {
   return (
     <TemplateAppContainer
       breakout={<AppBreadcrumbs />}
+      contentTop={renderInactiveSchoolMessage(isSchoolActive)}
       contentPrimary={
         <>
           <Heading

app/javascript/components/Contact/Contact.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import AppBreadcrumbs from "./../AppBreadcrumbs";
 import HaveQuestions from "./../HaveQuestions/HaveQuestions";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 import {
   TemplateAppContainer,
   Heading,
@@ -33,7 +34,8 @@ function Contact() {
 
   return (
     <TemplateAppContainer
-      breakout={<AppBreadcrumbs is_school_active={isSchoolActive}/>}
+      breakout={<AppBreadcrumbs />}
+      contentTop={renderInactiveSchoolMessage(isSchoolActive)}
       contentPrimary={
         <div id="contacts-page">
           <Heading

app/javascript/components/Faqs/Faqs.jsx

@@ -3,6 +3,7 @@ import AppBreadcrumbs from "./../AppBreadcrumbs";
 import HaveQuestions from "./../HaveQuestions/HaveQuestions";
 import SignedInMsg from "./../SignedInMsg";
 import axios from "axios";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 import {
   Accordion,
   TemplateAppContainer,
@@ -54,8 +55,12 @@ export default function Faqs(props) {
 
   return (
     <TemplateAppContainer
-      breakout={<AppBreadcrumbs is_school_active={isSchoolActive} />}
-      contentTop={<SignedInMsg signInDetails={props} />}
+      breakout={<AppBreadcrumbs />}
+      contentTop={
+        <>
+          {renderInactiveSchoolMessage(isSchoolActive)}
+          {<SignedInMsg signInDetails={props} />} 
+        </>}
       contentPrimary={
         <>
           {skeletonLoaderForFaqs()}

app/javascript/components/ParticipatingSchools/ParticipatingSchools.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import AppBreadcrumbs from "./../AppBreadcrumbs";
 import HaveQuestions from "./../HaveQuestions/HaveQuestions";
 import SignedInMsg from "./../SignedInMsg";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 import axios from "axios";
 import {
   TextInput,
@@ -199,8 +200,12 @@ export default function ParticipatingSchools(props) {
 
   return (
     <TemplateAppContainer
-      breakout={<AppBreadcrumbs is_school_active={isSchoolActive} />}
-      contentTop={<SignedInMsg signInDetails={props} />}
+      breakout={<AppBreadcrumbs />}
+      contentTop={ <>
+          {renderInactiveSchoolMessage(isSchoolActive)}
+          {<SignedInMsg signInDetails={props} />}
+        </>
+      }
       contentPrimary={
         <>
           <Heading

app/javascript/components/SearchTeacherSets/SearchTeacherSets.jsx

@@ -4,7 +4,9 @@ import SignedInMsg from "./../SignedInMsg";
 import SignUpMsg from "./../SignUp/SignUpMsg";
 import axios from "axios";
 import { titleCase } from "title-case";
-import { capitalizeFirstLetter } from "./../Utils";
+import { capitalizeFirstLetter } from "../Utils/Utils";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
+
 import {
   Button,
   ButtonGroup,
@@ -1263,10 +1265,11 @@ export default function SearchTeacherSets(props) {
 
   return (
     <TemplateAppContainer
-      breakout={<AppBreadcrumbs is_school_active={isSchoolActive} />}
+      breakout={<AppBreadcrumbs />}
       contentTop={
         <>
           {<SignedInMsg signInDetails={props} />}
+          {renderInactiveSchoolMessage(isSchoolActive)}
           {<SignUpMsg signUpDetails={props} />}
           <Heading
             id="search-and-find-teacher-sets-header"

app/javascript/components/SignedInMsg.jsx

@@ -16,6 +16,7 @@ export default function SignedInMsg(props) {
           content="You have signed in successfully!"
           type="informative"
           mb="l"
+          marginBottom="s"
         />
       );
     } else {

app/javascript/components/TeacherSetBooks/TeacherSetBooks.jsx

@@ -3,6 +3,7 @@ import HaveQuestions from "./../HaveQuestions/HaveQuestions";
 import { Link as ReactRouterLink, useParams, useLocation } from "react-router-dom";
 import axios from "axios";
 import { titleCase } from "title-case";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 import {
   Card,
   CardHeading,
@@ -231,15 +232,6 @@ export default function TeacherSetBooks() {
     );
   };
 
-  const inactiveSchoolMessage = () => {
-    console.log(isSchoolActive === false)
-    if (isSchoolActive === false) {
-      return (<Banner className="inactiveSchool" content={<>
-        Your school is inactive, so your account is restricted. Please contact [email protected].
-      </>} type="warning"/>)
-    }
-  }
-
   const BookImage = (data) => {
     if (isLoading) {
       return (
@@ -313,9 +305,9 @@ export default function TeacherSetBooks() {
             />
           }
         />
-          {inactiveSchoolMessage()}
-        </>
+      </>
       }
+      contentTop={renderInactiveSchoolMessage(isSchoolActive)}
       contentPrimary={
         <>
           <Flex alignItems="baseline">

app/javascript/components/TeacherSetDetails/TeacherSetDetails.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import HaveQuestions from "./../HaveQuestions/HaveQuestions";
 import ShowBookImage from "./../ShowBookImage";
 import BookTitles from "./../BookTitles";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 import {
   Link as ReactRouterLink,
   useParams,
@@ -533,14 +534,6 @@ export default function TeacherSetDetails(props) {
     }
   };
 
-  const inactiveSchoolMessage = () => {
-    if (currentUserStatus && isSchoolActive === false) {
-      return (<Banner className="inactiveSchool" content={<>
-        Your school is inactive, so your account is restricted. Please contact [email protected].
-      </>} type="warning" />)
-    }
-  }
-
   const teacherSetAvailability = () => {
     if (isLargerThanMobile && teacherSet.availability !== undefined) {
       return (
@@ -802,11 +795,10 @@ export default function TeacherSetDetails(props) {
               />
             }
           />
-          {inactiveSchoolMessage()}
         </>
       }
       contentTop={
-        <>
+        <>{renderInactiveSchoolMessage(isSchoolActive)}
           {errorMsg()}
         </>
       }

app/javascript/components/TeacherSetOrder/TeacherSetOrder.jsx

@@ -4,6 +4,7 @@ import HaveQuestions from "./../HaveQuestions/HaveQuestions";
 import TeacherSetOrderDetails from "./../TeacherSetOrderDetails";
 import axios from "axios";
 import { useParams, useNavigate } from "react-router-dom";
+import { renderInactiveSchoolMessage } from '../Utils/SchoolStatusMessage';
 
 import {
   Button,
@@ -21,6 +22,7 @@ export default function TeacherSetOrder(props) {
   const [hold, setHold] = useState(props.holddetails);
   const [teacherSet, setTeacherSet] = useState(props.teachersetdetails);
   const { colorMode } = useColorMode();
+  const [isSchoolActive, setIsSchoolActive] = useState("");
 
   useEffect(() => {
     if (env.RAILS_ENV !== "test") {
@@ -40,6 +42,7 @@ export default function TeacherSetOrder(props) {
           } else {
             setTeacherSet(res.data.teacher_set);
             setHold(res.data.hold);
+            setIsSchoolActive(res.data.is_school_active)
             if (res.data.hold && res.data.hold.status === "cancelled") {
               document.title = "Order Cancelled | MyLibraryNYC";
             } else {
@@ -98,6 +101,7 @@ export default function TeacherSetOrder(props) {
   return (
     <TemplateAppContainer
       breakout={<AppBreadcrumbs />}
+      contentTop={renderInactiveSchoolMessage(isSchoolActive)}
       contentPrimary={
         <>
           <Heading

app/javascript/components/Utils/SchoolStatusMessage.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Banner } from "@nypl/design-system-react-components";
+
+export const renderInactiveSchoolMessage = (isSchoolActive) => {
+  if (isSchoolActive === false) {
+    return (
+      <Banner
+        content={<>
+          Your school is inactive, so your account is restricted. Please contact [email protected].
+        </>}
+        type="warning"
+      />
+    );
+  }
+  return null;  // Return null if the school is active
+};
+