Adding feature flag

mitodl · Jan 9, 2025 · ac5c806 · ac5c806
1 parent 7ab9403
commit ac5c806
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 10 deletions.
diff --git a/frontend/public/scss/top-app-bar.scss b/frontend/public/scss/top-app-bar.scss
@@ -129,8 +129,29 @@ header.site-header {
   border-left: 1px solid $home-page-border-grey;
 }
 
+.shopping-cart-line {
+  background-image: url("/static/images/shopping-cart-line.svg");
+  width: 21px;
+  height: 21px;
+  border: none;
+  background-color: unset;
+}
+
+#cart-count {
+  border-radius: 12px;
+  font-size: 12px;
+  background: #A9081A;
+  color: #fff;
+  padding: 3px 6px;
+  vertical-align: top;
+  margin-left: -8px;
+  margin-top: -14px;
+  font-weight: 400;
+}
+
 .full-screen-top-menu {
-  display: block;
+  display: flex;
+  align-items: center;
   font-size: 14px;
   line-height: 21px;
 

diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js
@@ -10,6 +10,7 @@ import NotificationContainer from "./NotificationContainer"
 
 import type { CurrentUser } from "../flow/authTypes"
 import MixedLink from "./MixedLink"
+import { checkFeatureFlag } from "../lib/util"
 
 type Props = {
   currentUser: CurrentUser,
@@ -28,6 +29,7 @@ const TopBar = ({ currentUser }: Props) => {
     return () => clearTimeout(timeout)
   }, [])
 
+  const newCartDesign = checkFeatureFlag("new-cart-design", currentUser)
   return (
     <header className="site-header d-flex d-flex flex-column">
       {showComponent ? (
@@ -65,15 +67,35 @@ const TopBar = ({ currentUser }: Props) => {
           <div className="full-screen-top-menu">
             {currentUser.is_authenticated ? (
               <>
-                <i className="ri-shopping-cart-line"></i>
-                <MixedLink
-                  id="catalog"
-                  dest={routes.catalog}
-                  className="top-nav-link border-left-top-bar"
-                  aria-label="Catalog"
-                >
-                  Catalog
-                </MixedLink>
+                {newCartDesign ?
+                  (<>
+                    <button
+                      className="shopping-cart-line"
+                      onClick={() => (
+                        window.location = routes.cart
+                      )}
+                      aria-label="Cart"
+                    />
+                    {cartCount ? <span className='badge' id="cart-count">{cartCount}</span> : null}
+                    <MixedLink
+                      id="catalog"
+                      dest={routes.catalog}
+                      className="top-nav-link border-left-top-bar"
+                      aria-label="Catalog"
+                    >
+                        Catalog
+                    </MixedLink></>
+                  ) : (
+                    <MixedLink
+                      id="catalog"
+                      dest={routes.catalog}
+                      className="top-nav-link"
+                      aria-label="Catalog"
+                    >
+                    Catalog
+                    </MixedLink>
+                  )
+                }
                 <UserMenu currentUser={currentUser} useScreenOverlay={false}/>
               </>
             ) : (