MT-2823 Search (#34)

* Added search bar, facets, pagination

* Updated search page for mobile

* Updated header

* TS error fix

* Code Cleanup

* - README update

* - update README for mentioning Shopkit and JS-SDK

* Fixed issues mentioned in PR Comments

* Removed unused tags

* Fixed PR comments. Updated search styles.

* - set demo link to https, fix Product.tsx

* Mobile styles updates

Co-authored-by: Shaun Maharaj <Shaun.Maharaj@elasticpath.com>

Author: rostyk-kanafotskyy

README.md

@@ -13,9 +13,11 @@
 
 The Elastic Path Commerce Cloud REACT PWA Reference Storefront is a flexible e-commerce website built on Elastic Path’s RESTful e-commerce API. The storefront uses the e-commerce capabilities provided by Elastic Path Commerce Cloud and gets data in a RESTful manner.
 
+The storefront uses the [Elastic Path Commerce Cloud JavaScript SDK](https://github.com/moltin/js-sdk) for all Elastic Path Commerce Cloud API requests, and [Elastic Path Commerce Cloud Embeddable Cart + Checkout](https://github.com/moltin/shopkit) for the Cart and Checkout experiences.
+
 > 💳 Use the test card 4242 4242 4242 4242, any future expiry date, and any CVC below to checkout.
 
-[Demo](http://epcc-reference.elasticpath.com/)
+[Demo](https://epcc-reference.elasticpath.com/)
 
 ## Documentation 📖
 
@@ -24,7 +26,8 @@ The Elastic Path Commerce Cloud REACT PWA Reference Storefront is a flexible e-c
 Before you begin, ensure that you have the following accounts set up:
 
 - [Elastic Path Commerce Cloud account](https://dashboard.elasticpath.com/login)
-- [Stripe account](https://dashboard.stripe.com/) - Stripe is used as the payment gateway. From your [Dashboard](https://dashboard.elasticpath.com), configure Stripe as the payment gateway from your.
+- [Stripe account](https://dashboard.stripe.com/) - Stripe is used as the payment gateway. From your [Dashboard](https://dashboard.elasticpath.com), configure Stripe as the payment gateway.
+- [Algolia account](https://www.algolia.com/) - Algolia is used for search functionality to display search results, facets, and filtering.
 
 ### Start Building the Storefront
 
@@ -62,6 +65,9 @@ Parameters that require configuration are in the `./src/config.ts` file:
 |`stripeKey`| Required| String| Stripe publishable API key.|
 |`categoryPageSize`| Required| String| Maximum number of products to display on a category page.|
 |`maxCompareProducts`| Required| String| Maximum number of products to display in compare view.|
+|`algoliaAppId`| Required| String| Algolia application identifier.|
+|`algoliaApiKey`| Required| String| Algolia API key used to read records.|
+|`algoliaIndexName`| Required| String| Name of Algolia index used for search functions.|
 
 ## Contributors ✨
 

package.json

@@ -7,7 +7,9 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-instantsearch-dom": "^6.3.0",
     "@types/react-router-dom": "^5.1.5",
+    "algoliasearch": "^4.3.0",
     "app-localizer": "^1.2.2",
     "constate": "^2.0.0",
     "css-reset-and-normalize": "^2.1.0",
@@ -19,6 +21,7 @@
     "react-cool-onclickoutside": "^1.5.2",
     "react-detect-offline": "^2.4.0",
     "react-dom": "^16.13.1",
+    "react-instantsearch-dom": "^6.6.0",
     "react-responsive-modal": "^4.0.1",
     "react-router-dom": "^5.2.0",
     "react-script-hook": "^1.1.1",

src/App.scss

@@ -26,3 +26,11 @@
     padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
   }
 }
+
+@media (max-width: $mobileWidth - 1px) {
+  .app {
+    &__header {
+      padding: 0;
+    }
+  }
+}

src/App.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import useScript from 'react-script-hook';
+import algoliasearch from 'algoliasearch/lite';
+import { Configure, InstantSearch } from 'react-instantsearch-dom';
 import { routes } from './routes';
 import { config } from './config';
 import { AppStateProvider } from './app-state';
@@ -16,10 +18,17 @@ const App: React.FC = () => {
     'data-moltin-stripe-publishable-key': config.stripeKey
   });
 
+  const searchClient = algoliasearch(
+    config.algoliaAppId,
+    config.algoliaApiKey
+  );
+
   return (
     <Router>
       <AppStateProvider>
-        <div className="app">
+        <InstantSearch searchClient={searchClient} indexName={config.algoliaIndexName}>
+          <Configure hitsPerPage={8}/>
+          <div className="app">
           <header className="app__header">
             <AppHeader />
           </header>
@@ -39,6 +48,7 @@ const App: React.FC = () => {
             <CompareOverlay />
           </aside>
         </div>
+        </InstantSearch>
       </AppStateProvider>
     </Router>
   );

src/AppHeader.scss

@@ -12,21 +12,27 @@
   }
 
   &__logo {
+    padding:  0 20px 0 60px;
+  }
+
+  &__search {
     flex: 1;
-    padding-left: 40px;
   }
 
-  &__account {
+  &__account, &__language, &__moltincartcontainer {
     margin-right: 20px;
   }
 
   &__language {
     margin-right: 20px;
   }
 
+  &__container {
+    width: 100%;
+  }
+
   &__moltincartcontainer {
     flex: 0 0 auto;
-    padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
   }
 
   .toggle-btn {
@@ -38,16 +44,6 @@
     width: 100%
   }
 
-  @media(max-width: $tabletWidth) {
-    .toggle-btn {
-      display: inline-block;
-    }
-
-    &__logo {
-      padding-left: 50px;
-    }
-  }
-
   &__networkoffline {
     width: 50%;
     padding: 15px;
@@ -61,4 +57,32 @@
     background-color: adjust-color($color: $secondAccentColor, $lightness: 65%);
     border: 1px solid adjust-color($color: $secondAccentColor, $lightness: 60%);
   }
+
+  @media(max-width: $tabletWidth) {
+    .toggle-btn {
+      display: inline-block;
+    }
+
+    &__logo {
+      padding-left: 50px;
+    }
+  }
+
+  @media (max-width: $mobileWidth) {
+    &__search {
+      flex: 0;
+    }
+
+    &__logo {
+      flex: 1px;
+    }
+
+    &__accountm,
+    &__search,
+    &__language,
+    &__moltincartcontainer,
+    &__account {
+      margin-right: 10px;
+    }
+  }
 }

src/AppHeader.tsx

@@ -5,10 +5,14 @@ import { Offline } from 'react-detect-offline';
 import { ImageContainer } from './ImageContainer';
 import { useTranslation } from './app-state';
 import { LanguageDropdown } from './LanguageDropdown';
-import './AppHeader.scss';
+import { SearchBar } from './SearchBar';
 import { AccountDropdown } from './AccountDropdown';
-import headerLogo from './images/site-images/Company-Logo.svg';
 import { Navigation } from "./Navigation";
+
+import headerLogo from './images/site-images/Company-Logo.svg';
+
+import './AppHeader.scss';
+
 export const AppHeader: React.FC = () => {
   const { t } = useTranslation();
   return (
@@ -19,15 +23,18 @@ export const AppHeader: React.FC = () => {
             <ImageContainer imgUrl={headerLogo} imgClassName="logo-image" alt="logoImage"/>
           </Link>
         </div>
-        <div className="appheader__account">
-          <AccountDropdown />
+        <div className="appheader__search">
+          <SearchBar />
         </div>
         <div className="appheader__language">
           <LanguageDropdown />
         </div>
         <div className="appheader__moltincartcontainer">
           <span className="moltin-cart-button"></span>
         </div>
+        <div className="appheader__account">
+          <AccountDropdown />
+        </div>
       </div>
       <div className="appheader__navigation">
         <Navigation />

src/Availability.scss

@@ -0,0 +1,9 @@
+.availability {
+  display: inline-block;
+  margin-top: 10px;
+  text-transform: uppercase;
+  font-size: 10px;
+  padding: 5px 10px;
+  border: 1px solid hsl(0, 0, 80%);
+  border-radius: 16px;
+}

src/Availability.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTranslation } from './app-state';
+
+import './Availability.scss';
+
+
+interface AvailabilityProps {
+  available: boolean,
+}
+
+export const Availability: React.FC<AvailabilityProps> = (props) => {
+  const { available } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div className="availability">
+      {available ? t('available') : t('out-of-stock')}
+    </div>
+  );
+};

src/CompareProducts.scss

@@ -53,17 +53,6 @@
           margin-top: 10px;
         }
 
-        #{$block}__availability {
-          margin-top: 10px;
-          display: inline-block;
-          margin-top: 10px;
-          text-transform: uppercase;
-          font-size: 10px;
-          padding: 5px 10px;
-          border: 1px solid hsl(0, 0, 80%);
-          border-radius: 16px;
-        }
-
         #{$block}__addtocart {
           margin-top: 16px;
         }

src/CompareProducts.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useCompareProducts, useTranslation } from './app-state';
 import { ProductMainImage } from './ProductMainImage';
+import { Availability } from './Availability';
 import { Product } from './service';
 import { isProductAvailable } from './helper';
 import { ReactComponent as RecycleBinIcon } from './images/icons/ic_trash.svg';
@@ -43,7 +44,7 @@ export const CompareProducts: React.FC = () => {
                 <td key={product.id}>
                   <div className="compareproducts__name">{product.name}</div>
                   <div className="compareproducts__price">{product.meta.display_price.without_tax.formatted}</div>
-                  <div className="compareproducts__availability">{isProductAvailable(product) ? t('available') : t('out-of-stock')}</div>
+                  <Availability available={isProductAvailable(product)} />
                   <div className="compareproducts__addtocart">
                     <span
                       className="moltin-buy-button"