Merge pull request #872 from boxwise/feature/add_breadcrumb_to_transfers

Add Breadcrumbs and menus transfer views

react/.eslintignore

@@ -4,9 +4,8 @@ coverage
 node_modules
 # temporarily disable eslint on the current code
 src/types
-src/components/BTBreadcrumbNavigation.tsx
 src/components/HeaderMenu
-!src/components/HeaderMenu/HeaderMenuDeskop.tsx
+!src/components/HeaderMenu/HeaderMenuDesktop.tsx
 !src/components/HeaderMenu/HeaderMenuMobile.tsx
 !src/components/HeaderMenu/HeaderMenuContainer.tsx
 !src/components/QrReader

react/.prettierignore

@@ -4,9 +4,8 @@ coverage
 node_modules
 # temporarily disable eslint on the current code
 src/types
-src/components/BTBreadcrumbNavigation.tsx
 src/components/HeaderMenu
-!src/components/HeaderMenu/HeaderMenuDeskop.tsx
+!src/components/HeaderMenu/HeaderMenuDesktop.tsx
 !src/components/HeaderMenu/HeaderMenuMobile.tsx
 !src/components/HeaderMenu/HeaderMenuContainer.tsx
 !src/components/QrReader

react/src/components/BoxReconciliationOverlay/BoxReconciliationOverlay.test.tsx

@@ -77,9 +77,9 @@ it("4.7.1 - Query for shipment, box, available products, sizes and locations is
     globalPreferences: {
       dispatch: jest.fn(),
       globalPreferences: {
-        selectedOrganisationId: organisation1.id,
+        organisation: { id: organisation1.id, name: organisation1.name },
         availableBases: organisation1.bases,
-        selectedBaseId: organisation1.bases[0].id,
+        selectedBase: organisation1.bases[0],
       },
     },
   });
@@ -131,9 +131,9 @@ it("4.7.2 - Query for shipment, box, available products, sizes and locations ret
     globalPreferences: {
       dispatch: jest.fn(),
       globalPreferences: {
-        selectedOrganisationId: organisation1.id,
+        organisation: { id: organisation1.id, name: organisation1.name },
         availableBases: organisation1.bases,
-        selectedBaseId: organisation1.bases[0].id,
+        selectedBase: organisation1.bases[0],
       },
     },
   });

react/src/components/BoxReconciliationOverlay/BoxReconciliationOverlay.tsx

@@ -34,7 +34,7 @@ export function BoxReconciliationOverlay({
   const { createToast } = useNotification();
   const { triggerError } = useErrorHandling();
   const { globalPreferences } = useContext(GlobalPreferencesContext);
-  const baseId = globalPreferences.selectedBaseId;
+  const baseId = globalPreferences.selectedBase?.id;
   const boxReconciliationOverlayState = useReactiveVar(boxReconciliationOverlayVar);
   const navigate = useNavigate();
 

react/src/components/BreadcrumbNavigation.tsx

@@ -0,0 +1,60 @@
+import { useContext } from "react";
+import { GlobalPreferencesContext } from "providers/GlobalPreferencesProvider";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button } from "@chakra-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { Link } from "react-router-dom";
+
+interface IBreadcrumbItemData {
+  label: string;
+  // eslint-disable-next-line react/require-default-props
+  linkPath?: string;
+}
+
+interface IBreadcrumbNavigationProps {
+  items: IBreadcrumbItemData[];
+}
+
+export function MobileBreadcrumbButton({ label, linkPath }: IBreadcrumbItemData) {
+  return (
+    <Button
+      variant="outline"
+      color="black"
+      borderColor="black"
+      as={Link}
+      to={linkPath ?? "#"}
+      border="2px"
+      borderRadius={0}
+      mb={4}
+      leftIcon={<ChevronLeftIcon />}
+    >
+      {label}
+    </Button>
+  );
+}
+
+export function BreadcrumbNavigation({ items }: IBreadcrumbNavigationProps) {
+  const { globalPreferences } = useContext(GlobalPreferencesContext);
+  const orgName = globalPreferences.organisation?.name;
+  const baseName = globalPreferences.selectedBase?.name;
+  return (
+    <Breadcrumb separator={<ChevronRightIcon />} fontSize="md" mb={4}>
+      <BreadcrumbItem>
+        <BreadcrumbLink as={Link} to="#">
+          {orgName}
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <BreadcrumbLink as={Link} to="#">
+          {baseName}
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      {items.map((item) => (
+        <BreadcrumbItem key={`breadcrumb${item.label}`}>
+          <BreadcrumbLink as={Link} to={item.linkPath ?? "#"}>
+            {item.label}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+      ))}
+    </Breadcrumb>
+  );
+}

react/src/components/HeaderMenu/HeaderMenu.tsx

@@ -1,5 +1,5 @@
 import { LayoutProps, useMediaQuery } from "@chakra-ui/react";
-import HeaderMenuDeskop from "./HeaderMenuDeskop";
+import HeaderMenuDesktop from "./HeaderMenuDesktop";
 import HeaderMenuMobile from "./HeaderMenuMobile";
 
 export interface MenuItemData {
@@ -51,7 +51,7 @@ const HeaderMenu = (props: HeaderMenuProps) => {
   if (isSmallScreen) {
     return <HeaderMenuMobile {...props} />;
   } else {
-    return <HeaderMenuDeskop {...props} />;
+    return <HeaderMenuDesktop {...props} />;
   }
 };
 export default HeaderMenu;

react/src/components/HeaderMenu/HeaderMenuContainer.tsx

@@ -9,7 +9,7 @@ import { useReactiveVar } from "@apollo/client";
 const HeaderMenuContainer = () => {
   const auth0 = useAuth0();
   const { globalPreferences } = useContext(GlobalPreferencesContext);
-  const baseId = globalPreferences.selectedBaseId!;
+  const baseId = globalPreferences.selectedBase?.id!;
   const qrReaderOverlayState = useReactiveVar(qrReaderOverlayVar);
 
   const menuItems: MenuItemsGroupData[] = useMemo(
@@ -27,6 +27,19 @@ const HeaderMenuContainer = () => {
           },
         ],
       },
+      {
+        text: "Transfers",
+        links: [
+          {
+            link: "/transfers/shipments",
+            name: "Manage Shipments",
+          },
+          {
+            link: "/transfers/agreements",
+            name: "Manage Agreements",
+          },
+        ],
+      },
       // {
       //   text: "Boxes",
       //   links: [

react/src/components/HeaderMenu/HeaderMenuDeskop.tsx → react/src/components/HeaderMenu/HeaderMenuDesktop.tsx

@@ -99,7 +99,7 @@ const MenuItemsGroupDesktop = ({ ...props }: MenuItemsGroupProps) => {
   const { globalPreferences } = useContext(GlobalPreferencesContext);
 
   function renderMenuItem(link: MenuItemData, i: number) {
-    const baseId = globalPreferences.selectedBaseId;
+    const baseId = globalPreferences.selectedBase?.id;
     let { qrCode, labelIdentifier } = useParams();
 
     if (link.link.includes(`${process.env.REACT_APP_OLD_APP_BASE_URL}`)) {
@@ -183,7 +183,7 @@ const HeaderMenuDesktopContainer = ({ children, ...props }) => {
   );
 };
 
-const HeaderMenuDeskop = (props: HeaderMenuProps) => {
+const HeaderMenuDesktop = (props: HeaderMenuProps) => {
   return (
     <HeaderMenuDesktopContainer>
       <Flex w="100%" justifyContent="space-between" alignItems="center">
@@ -205,4 +205,4 @@ const HeaderMenuDeskop = (props: HeaderMenuProps) => {
   );
 };
 
-export default HeaderMenuDeskop;
+export default HeaderMenuDesktop;

react/src/components/HeaderMenu/HeaderMenuMobile.tsx

@@ -175,7 +175,7 @@ const MenuItemsGroupMobile = ({
   const { isOpen, onToggle } = useDisclosure();
 
   function renderLinkBoxes(link: MenuItemData, i: number) {
-    const baseId = globalPreferences.selectedBaseId;
+    const baseId = globalPreferences.selectedBase?.id;
     let { qrCode, labelIdentifier } = useParams();
 
     if (link.link.includes(`${process.env.REACT_APP_OLD_APP_BASE_URL}`)) {

react/src/components/QrReader/QrReaderContainer.tsx

@@ -19,7 +19,7 @@ interface IQrReaderContainerProps {
 
 function QrReaderContainer({ onSuccess }: IQrReaderContainerProps) {
   const { globalPreferences } = useContext(GlobalPreferencesContext);
-  const baseId = globalPreferences.selectedBaseId;
+  const baseId = globalPreferences.selectedBase?.id;
   const navigate = useNavigate();
   const { triggerError } = useErrorHandling();
   const { resolveQrCode } = useQrResolver();

react/src/components/QrReader/components/QrReaderMultiBoxContainer.tsx

@@ -38,7 +38,7 @@ interface IQrReaderMultiBoxContainerProps {
 function QrReaderMultiBoxContainer({ onSuccess }: IQrReaderMultiBoxContainerProps) {
   const navigate = useNavigate();
   const { globalPreferences } = useContext(GlobalPreferencesContext);
-  const currentBaseId = globalPreferences.selectedBaseId;
+  const currentBaseId = globalPreferences.selectedBase?.id;
   // selected radio button
   const [multiBoxAction, setMultiBoxAction] = useState<IMultiBoxAction>(IMultiBoxAction.moveBox);
 

react/src/hooks/hooks.ts

@@ -12,7 +12,7 @@ export interface INotificationProps extends UseToastOptions {
 
 export const useGetUrlForResourceHelpers = () => {
   const { globalPreferences } = useContext(GlobalPreferencesContext);
-  const baseId = globalPreferences.selectedBaseId;
+  const baseId = globalPreferences.selectedBase?.id;
   if (baseId == null) {
     throw new Error("Could not extract baseId from URL");
   }
@@ -47,7 +47,7 @@ export const useToggle = (initialValue = false) => {
 
 export const useGlobalSiteState = () => {
   const { globalPreferences } = useContext(GlobalPreferencesContext);
-  const currentBaseId = globalPreferences.selectedBaseId!;
+  const currentBaseId = globalPreferences.selectedBase?.id!;
   const navigate = useNavigate();
 
   return {

react/src/hooks/useLoadAndSetGlobalPreferences.ts

@@ -4,7 +4,7 @@ import { gql, useLazyQuery } from "@apollo/client";
 import { useLocation, useNavigate } from "react-router-dom";
 import { GlobalPreferencesContext } from "providers/GlobalPreferencesProvider";
 import { ApolloAuth0WrapperContext } from "providers/ApolloAuth0Provider";
-import { BasesQuery } from "types/generated/graphql";
+import { OrganisationAndBasesQuery } from "types/generated/graphql";
 
 export const useLoadAndSetGlobalPreferences = () => {
   const { user } = useAuth0();
@@ -14,40 +14,42 @@ export const useLoadAndSetGlobalPreferences = () => {
   const { isAccessTokenInHeader } = useContext(ApolloAuth0WrapperContext);
   const [error, setError] = useState<string>();
 
-  // set organisation id
-  useEffect(() => {
-    if (user) {
-      const organisationId = user["https://www.boxtribute.com/organisation_id"];
-      dispatch({
-        type: "setOrganisationId",
-        payload: organisationId,
-      });
-    }
-  }, [dispatch, user]);
-
   // load available bases
-  const BASES_QUERY = gql`
-    query Bases {
+  const ORGANISATION_AND_BASES_QUERY = gql`
+    query OrganisationAndBases($organisationId: ID!) {
       bases {
         id
         name
       }
+      organisation(id: $organisationId) {
+        id
+        name
+      }
     }
   `;
-  const [runBaseQuery, { loading: isBasesQueryLoading, data }] =
-    useLazyQuery<BasesQuery>(BASES_QUERY);
+  const [runOrganisationAndBasesQuery, { loading: isOrganisationAndBasesQueryLoading, data }] =
+    useLazyQuery<OrganisationAndBasesQuery>(ORGANISATION_AND_BASES_QUERY);
 
   useEffect(() => {
     // run query only if the access token is in the request header from the apollo client
-    if (isAccessTokenInHeader) {
-      runBaseQuery();
+    if (isAccessTokenInHeader && user) {
+      runOrganisationAndBasesQuery({
+        variables: { organisationId: user["https://www.boxtribute.com/organisation_id"] },
+      });
     }
-  }, [runBaseQuery, globalPreferences.availableBases, isAccessTokenInHeader]);
+  }, [runOrganisationAndBasesQuery, globalPreferences.availableBases, isAccessTokenInHeader, user]);
 
   // set available bases
   useEffect(() => {
-    if (!isBasesQueryLoading && data != null) {
-      const { bases } = data;
+    if (!isOrganisationAndBasesQueryLoading && data != null) {
+      const { bases, organisation } = data;
+      if (organisation) {
+        dispatch({
+          type: "setOrganisation",
+          payload: organisation,
+        });
+      }
+
       if (bases.length > 0) {
         dispatch({
           type: "setAvailableBases",
@@ -58,11 +60,12 @@ export const useLoadAndSetGlobalPreferences = () => {
         const baseId = location.pathname.match(/\/bases\/(\d+)(\/)?/);
         // validate if requested base is in the array of available bases
         if (baseId != null) {
-          if (bases.some((base) => base.id === baseId[1])) {
+          const matchingBase = bases.find((base) => base.id === baseId[1]);
+          if (matchingBase) {
             // set selected base
             dispatch({
-              type: "setSelectedBaseId",
-              payload: baseId[1],
+              type: "setSelectedBase",
+              payload: matchingBase,
             });
           } else {
             // this error is set if the requested base is not part of the available bases
@@ -71,7 +74,7 @@ export const useLoadAndSetGlobalPreferences = () => {
         } else {
           // handle the case if the url does not start with "/bases/<number>"
           // prepend /bases/<newBaseId>
-          const newBaseId = globalPreferences?.selectedBaseId ?? bases[0].id;
+          const newBaseId = globalPreferences?.selectedBase?.id ?? bases[0].id;
           navigate(`/bases/${newBaseId}${location.pathname}`);
         }
       } else {
@@ -81,14 +84,14 @@ export const useLoadAndSetGlobalPreferences = () => {
     }
   }, [
     data,
-    isBasesQueryLoading,
+    isOrganisationAndBasesQueryLoading,
     dispatch,
     location.pathname,
-    globalPreferences?.selectedBaseId,
+    globalPreferences?.selectedBase?.id,
     navigate,
   ]);
 
-  const isLoading = !globalPreferences.availableBases || !globalPreferences.selectedBaseId;
+  const isLoading = !globalPreferences.availableBases || !globalPreferences.selectedBase?.id;
 
   return { isLoading, error };
 };