OCP-1082: Category List View, OCP-1055: [WIP] Order Confirmation Page, OCP-1043: Breadcrumbs, OCP-1050: show SalePrice in Product Detail

apps/storefront/package.json

@@ -24,7 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.22.2",
+    "react-router-dom": "^6.26.2",
     "universal-cookie": "^7.2.0"
   },
   "devDependencies": {

apps/storefront/src/AppProvider.tsx

@@ -1,7 +1,10 @@
 import { FC, useCallback } from "react";
 import routes from "./routes";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { IOrderCloudErrorContext, OrderCloudProvider } from "@rwatt451/ordercloud-react";
+import {
+  IOrderCloudErrorContext,
+  OrderCloudProvider,
+} from "@rwatt451/ordercloud-react";
 import {
   ALLOW_ANONYMOUS,
   BASE_API_URL,
@@ -12,6 +15,7 @@ import {
 import { useToast } from "@chakra-ui/react";
 import { OrderCloudError } from "ordercloud-javascript-sdk";
 import GlobalLoadingIndicator from "./components/GlobalLoadingIndicator";
+import { BreadCrumbItemsProvider } from "./hooks/useBreadcrumbItems";
 
 const basename = import.meta.env.VITE_APP_CONFIG_BASE;
 
@@ -20,15 +24,22 @@ const router = createBrowserRouter(routes, { basename });
 const AppProvider: FC = () => {
   const toast = useToast();
 
-  const defaultErrorHandler = useCallback((error: OrderCloudError, {logout}:IOrderCloudErrorContext) => {
-    if (error.status === 401) {
-      console.log('DEFAULT ERROR HANDLER', 401)
-      return logout()
-    }
-    if (!toast.isActive(error.errorCode)) {
-      toast({ id: error.errorCode, title: error.status === 403 ? 'Permission denied' : error.message, status: "error" });
-    }
-  }, [toast])
+  const defaultErrorHandler = useCallback(
+    (error: OrderCloudError, { logout }: IOrderCloudErrorContext) => {
+      if (error.status === 401) {
+        console.log("DEFAULT ERROR HANDLER", 401);
+        return logout();
+      }
+      if (!toast.isActive(error.errorCode)) {
+        toast({
+          id: error.errorCode,
+          title: error.status === 403 ? "Permission denied" : error.message,
+          status: "error",
+        });
+      }
+    },
+    [toast]
+  );
 
   return (
     <OrderCloudProvider
@@ -39,8 +50,9 @@ const AppProvider: FC = () => {
       allowAnonymous={ALLOW_ANONYMOUS}
       defaultErrorHandler={defaultErrorHandler}
     >
+      <BreadCrumbItemsProvider />
       <RouterProvider router={router} />
-      <GlobalLoadingIndicator/>
+      <GlobalLoadingIndicator />
     </OrderCloudProvider>
   );
 };

apps/storefront/src/Layout/Layout.tsx

@@ -10,6 +10,7 @@ import { FC, useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import LoginModal from "../components/Login/LoginModal";
 import MainMenu from "./MainMenu";
+import Breadcrumbs from "../components/shared/Breadcrumbs";
 
 const Layout: FC = () => {
   const { pathname } = useLocation();
@@ -29,6 +30,7 @@ const Layout: FC = () => {
     <>
       <LoginModal disclosure={loginDisclosure} />
       <MainMenu loginDisclosure={loginDisclosure} />
+      <Breadcrumbs/>
       <VStack
         alignItems="flex-start"
         w="full"

apps/storefront/src/Layout/MainMenu.tsx

@@ -89,7 +89,7 @@ const MainMenu: FC<MainMenuProps> = ({ loginDisclosure }) => {
                 key={catalog.ID}
                 onClick={() => setSelectedCatalog(catalog.ID || "")}
                 as={RouterLink}
-                to={`/shop/${selectedCatalog}/products`}
+                to={`/shop/${selectedCatalog}`}
               >
                 {catalog.Name}
               </MenuItem>
@@ -101,7 +101,7 @@ const MainMenu: FC<MainMenuProps> = ({ loginDisclosure }) => {
       return (
         <Button
           as={RouterLink}
-          to={`/shop/${catalogs[0].ID}/products`}
+          to={`/shop/${catalogs[0].ID}`}
           variant="ghost"
         >
           Shop All Products

apps/storefront/src/Layout/MegaMenu.tsx

@@ -96,7 +96,7 @@ const MegaMenu: FC<MegaMenuProps> = ({
     navigate(`/shop/${selectedCatalog}/categories/${categoryId}`);
     onClose();
   };
-  
+
   const handleViewAllCategoryClick = (categoryId: string | undefined) => {
     if (!categoryId || !selectedCatalog) return;
     navigate(`/shop/${selectedCatalog}/categories`);

apps/storefront/src/components/cart/OcCurrentOrderLineItemList.tsx

@@ -11,19 +11,20 @@ interface OcCurrentOrderLineItemListProps {
   tabIndex?: number
 }
 
-const OcCurrentOrderLineItemList: FunctionComponent<OcCurrentOrderLineItemListProps> = ({
+const OcCurrentOrderLineItemList: FunctionComponent<
+  OcCurrentOrderLineItemListProps
+> = ({
   emptyMessage,
   editable,
   productType,
   lineItems,
   onChange,
-  tabIndex
 }) => {
-  let productItems = lineItems
+  let productItems = lineItems;
   if (productType != null) {
     productItems = lineItems?.filter(function (p) {
-      return p.xp?.Type == productType
-    })
+      return p.xp?.Type == productType;
+    });
   }
 
   return (
@@ -32,9 +33,8 @@ const OcCurrentOrderLineItemList: FunctionComponent<OcCurrentOrderLineItemListPr
       editable={editable}
       lineItems={productItems}
       onChange={onChange}
-      tabIndex={tabIndex}
     />
-  )
-}
+  );
+};
 
 export default OcCurrentOrderLineItemList

apps/storefront/src/components/cart/OcLineItemCard.tsx

@@ -25,27 +25,24 @@ import React, {
   useState,
 } from "react";
 import { TbPhoto } from "react-icons/tb";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 import useDebounce from "../../hooks/useDebounce";
 import formatPrice from "../../utils/formatPrice";
 import OcQuantityInput from "./OcQuantityInput";
-import { TABS } from "./ShoppingCart";
 
 interface OcLineItemCardProps {
   lineItem: LineItem;
   editable?: boolean;
   onChange?: (newLi: LineItem) => void;
-  tabIndex?: number;
 }
 
 const OcLineItemCard: FunctionComponent<OcLineItemCardProps> = ({
   lineItem,
   editable,
   onChange,
-  tabIndex,
 }) => {
   const [quantity, _setQuantity] = useState(lineItem.Quantity);
-
+  const { pathname } = useLocation();
   const debouncedQuantity: number = useDebounce(quantity, 300);
 
   const product = useMemo(() => lineItem.Product, [lineItem]);
@@ -116,7 +113,7 @@ const OcLineItemCard: FunctionComponent<OcLineItemCardProps> = ({
               position="absolute"
             />
           </Center>
-          {tabIndex !== TABS.CONFIRMATION && (
+          {pathname !== "/order-confirmation" && (
             <Button
               size="xs"
               fontSize=".75rem"
@@ -128,7 +125,7 @@ const OcLineItemCard: FunctionComponent<OcLineItemCardProps> = ({
           )}
         </VStack>
         <VStack alignItems="flex-start" gap={3} flexGrow="1">
-          <Link as={RouterLink} to={`/products/${lineItem?.Product?.ID}`}>
+          <Link as={RouterLink} to={`/shop/${lineItem?.Product?.ID}`}>
             <Text fontSize="sm" lineHeight="1.3" display="inline-block">
               {lineItem.Product?.Name}
             </Text>

apps/storefront/src/components/cart/OcLineItemList.tsx

@@ -8,15 +8,13 @@ interface OcLineItemListProps {
   editable?: boolean;
   lineItems?: LineItem[];
   onChange: (newLineItem: LineItem) => void;
-  tabIndex?: number;
 }
 
 const OcLineItemList: FunctionComponent<OcLineItemListProps> = ({
   emptyMessage,
   editable,
   lineItems,
   onChange,
-  tabIndex
 }) => {
   return lineItems && lineItems.length ? (
     <VStack gap={6} alignItems="flex-start" w="full">
@@ -35,7 +33,6 @@ const OcLineItemList: FunctionComponent<OcLineItemListProps> = ({
               lineItem={li}
               editable={editable}
               onChange={onChange}
-              tabIndex={tabIndex}
             />
           ))}
         </CardBody>

apps/storefront/src/components/cart/OcQuantityInput.tsx

@@ -21,6 +21,7 @@ interface OcQuantityInputProps {
   disabled?: boolean
   quantity: number
   onChange: (quantity: number) => void
+  size?: string;
 }
 
 const OcQuantityInput: FunctionComponent<OcQuantityInputProps> = ({
@@ -30,6 +31,7 @@ const OcQuantityInput: FunctionComponent<OcQuantityInputProps> = ({
   disabled,
   quantity,
   onChange,
+  size
 }) => {
 
   const [ps, setPs] = useState(priceSchedule);
@@ -60,34 +62,28 @@ const OcQuantityInput: FunctionComponent<OcQuantityInputProps> = ({
   }
 
   return ps ? (
-    <VStack
-      alignItems="flex-start"
-      gap={0}
-    >
+    <VStack alignItems="flex-start" gap={0}>
       {/* <FormLabel>{label}</FormLabel> */}
       {ps?.RestrictedQuantity ? (
         <Select
           maxW="100"
-          size="sm"
+          size={size || "sm"}
           id={controlId}
           isDisabled={disabled}
           value={quantity}
           onChange={handleSelectChange}
         >
           {ps.PriceBreaks?.map((pb) => (
-            <option
-              key={pb.Quantity}
-              value={pb.Quantity}
-            >
+            <option key={pb.Quantity} value={pb.Quantity}>
               {pb.Quantity}
             </option>
           ))}
         </Select>
       ) : (
         <NumberInput
           maxW="100"
-          size="sm"
-          value={quantity || ''}
+          size={size || "sm"}
+          value={quantity || ""}
           defaultValue={quantity}
           onChange={handleNumberInputChange}
           isDisabled={disabled}