New Feature Updates, more coverage. (#385)

* Shouldn't be there.

* Removing

* Removing old libraries

* Updating

* Feature Changes and updates

* Update README.md

README.md

@@ -66,14 +66,20 @@ Every provider defines the features that it supports under `framework/{provider}
 
 #### Features Available
 
+The following features can be enabled or disabled. This means that the UI will remove all code related to the feature.
+For example: Turning `cart` off will disable Cart capabilities.
+
+- cart
+- search
 - wishlist
+- customerAuth
 - customCheckout
 
 #### How to turn Features on and off
 
 > NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)
 
-- Open `commerce.config.json`
+- Open `commerce.config.json` 
 - You'll see a config file like this:
   ```json
   {
@@ -83,7 +89,7 @@ Every provider defines the features that it supports under `framework/{provider}
     }
   }
   ```
-- Turn wishlist on by setting wishlist to true.
+- Turn `wishlist` on by setting `wishlist` to `true`.
 - Run the app and the wishlist functionality should be back on.
 
 ### How to create a new provider

commerce.config.json

@@ -1,6 +1,9 @@
 {
   "features": {
+    "cart": true,
+    "search": true,
     "wishlist": false,
+    "customerAuth": false,
     "customCheckout": false
   }
 }

components/common/Navbar/Navbar.module.css

@@ -1,5 +1,6 @@
 .root {
   @apply sticky top-0 bg-primary z-40 transition-all duration-150;
+  min-height: 74px;
 }
 
 .nav {

components/common/Navbar/Navbar.tsx

@@ -34,9 +34,11 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
             ))}
           </nav>
         </div>
-        <div className="justify-center flex-1 hidden lg:flex">
+        {process.env.COMMERCE_SEARCH_ENABLED && (
-          <Searchbar />
+          <div className="justify-center flex-1 hidden lg:flex">
-        </div>
+            <Searchbar />
+          </div>
+        )}
         <div className="flex items-center justify-end flex-1 space-x-8">
           <UserNav />
         </div>

components/common/UserNav/UserNav.tsx

@@ -25,10 +25,12 @@ const UserNav: FC<Props> = ({ className }) => {
   return (
     <nav className={cn(s.root, className)}>
       <ul className={s.list}>
-        <li className={s.item} onClick={toggleSidebar}>
+        {process.env.COMMERCE_CART_ENABLED && (
-          <Bag />
+          <li className={s.item} onClick={toggleSidebar}>
-          {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+            <Bag />
-        </li>
+            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+          </li>
+        )}
         {process.env.COMMERCE_WISHLIST_ENABLED && (
           <li className={s.item}>
             <Link href="/wishlist">
@@ -38,7 +40,7 @@ const UserNav: FC<Props> = ({ className }) => {
             </Link>
           </li>
         )}
-        {process.env.COMMERCE_CUSTOMER_ENABLED && (
+        {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
           <li className={s.item}>
             {customer ? (
               <DropdownMenu />

components/product/ProductSidebar/ProductSidebar.tsx

@@ -56,18 +56,20 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
         <div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
       </div>
       <div>
-        <Button
+        {process.env.COMMERCE_CART_ENABLED && (
-          aria-label="Add to Cart"
+          <Button
-          type="button"
+            aria-label="Add to Cart"
-          className={s.button}
+            type="button"
-          onClick={addToCart}
+            className={s.button}
-          loading={loading}
+            onClick={addToCart}
-          disabled={variant?.availableForSale === false}
+            loading={loading}
-        >
+            disabled={variant?.availableForSale === false}
-          {variant?.availableForSale === false
+          >
-            ? 'Not Available'
+            {variant?.availableForSale === false
-            : 'Add To Cart'}
+              ? 'Not Available'
-        </Button>
+              : 'Add To Cart'}
+          </Button>
+        )}
       </div>
       <div className="mt-6">
         <Collapse title="Care">

framework/bigcommerce/commerce.config.json

@@ -1,6 +1,7 @@
 {
   "provider": "bigcommerce",
   "features": {
-    "wishlist": true
+    "wishlist": true,
+    "customerAuth": true
   }
 }

framework/local/commerce.config.json

@@ -1,6 +1,9 @@
 {
   "provider": "local",
   "features": {
-    "wishlist": false
+    "wishlist": false,
+    "cart": false,
+    "search": false,
+    "customerAuth": false
   }
 }

package.json

@@ -28,7 +28,7 @@
     "email-validator": "^2.0.4",
     "immutability-helper": "^3.1.1",
     "js-cookie": "^2.2.1",
-    "keen-slider": "^5.4.1",
+    "keen-slider": "^5.5.1",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",