FEAT: ORV2-2064 shopping cart header icon (#1248)

Co-authored-by: Praveen Raju <[email protected]>

frontend/src/common/components/header/Header.tsx

@@ -111,7 +111,6 @@ export const Header = () => {
   const { companyId } = useContext(OnRouteBCContext);
   const username = getLoginUsernameFromSession();
   const isIdir = user?.profile?.identity_provider === IDPS.IDIR;
-
   const shouldDisplayNavBar = Boolean(companyId);
 
   const toggleMenu = () => {

frontend/src/common/components/header/components/ShoppingCartButton.scss

@@ -0,0 +1,19 @@
+@import "../../../../themes/orbcStyles";
+
+.shopping-cart-button {
+    padding: 0 30px 0 20px;
+
+    &__badge {
+        & .MuiBadge-badge {
+            right: -15px;
+            top: 15px;
+            padding: 0 4px;
+            background-color: transparent;
+            color: white;
+        }    
+    }
+
+    &__icon {
+        color: white;
+    }
+}

frontend/src/common/components/header/components/ShoppingCartButton.tsx

@@ -0,0 +1,22 @@
+import { faShoppingCart } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Badge from '@mui/material/Badge';
+import { IconButton } from "@mui/material";
+import "./ShoppingCartButton.scss";
+
+export const ShoppingCartButton = ({cartItemCount} : {cartItemCount: number}) => {
+
+  const onClick = () => {
+    // TODO: useNavigate to the /shopping-cart
+  }
+
+  return (
+    <div className={"shopping-cart-button"}>
+      <IconButton aria-label="cart" onClick={onClick}>
+        <Badge badgeContent={cartItemCount} color="secondary" className={"shopping-cart-button__badge"}>
+          <FontAwesomeIcon icon={faShoppingCart} className={"shopping-cart-button__icon"} />
+        </Badge>
+      </IconButton>
+    </div>
+  );
+};

frontend/src/common/components/header/components/UserSection.tsx

@@ -1,11 +1,16 @@
 import "./UserSection.scss";
 import { LogoutButton } from "./LogoutButton";
 import { UserSectionInfo } from "./UserSectionInfo";
+import { ShoppingCartButton } from "./ShoppingCartButton";
+import { useFeatureFlagsQuery } from "../../../hooks/hooks";
 
 export const UserSection = ({ username }: { username: string }) => {
+  const { data: featureFlags } = useFeatureFlagsQuery();
+
   return (
     <div className="user-section">
       <UserSectionInfo username={username} />
+      {featureFlags?.["SHOPPING_CART"] === "ENABLED" && <ShoppingCartButton cartItemCount={4} />}
       <LogoutButton />
     </div>
   );