Merge pull request #2 from joelvarty/vercel-main

Vercel main

.env.template

@@ -1,5 +1,18 @@
+# Available providers: bigcommerce, shopify, swell
+COMMERCE_PROVIDER=
+
 BIGCOMMERCE_STOREFRONT_API_URL=
 BIGCOMMERCE_STOREFRONT_API_TOKEN=
 BIGCOMMERCE_STORE_API_URL=
 BIGCOMMERCE_STORE_API_TOKEN=
 BIGCOMMERCE_STORE_API_CLIENT_ID=
+BIGCOMMERCE_CHANNEL_ID=
+
+NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
+
+NEXT_PUBLIC_SWELL_STORE_ID=
+NEXT_PUBLIC_SWELL_PUBLIC_KEY=
+
+NEXT_PUBLIC_SALEOR_API_URL=
+NEXT_PUBLIC_SALEOR_CHANNEL=

.gitignore

@@ -18,6 +18,7 @@ out/
 # misc
 .DS_Store
 *.pem
+.idea
 
 # debug
 npm-debug.log*
@@ -25,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": ["framework/saleor/**/*"],
+      "options": {
+        "printWidth": 120
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

README.md

@@ -7,7 +7,11 @@ Start right now at [nextjs.org/commerce](https://nextjs.org/commerce)
 
 Demo live at: [demo.vercel.store](https://demo.vercel.store/)
 
-This project is currently <b>under development</b>.
+- Shopify Demo: https://shopify.vercel.store/
+- Swell Demo: https://swell.vercel.store/
+- BigCommerce Demo: https://bigcommerce.vercel.store/
+- Vendure Demo: https://vendure.vercel.store
+- Saleor Demo: https://saleor.vercel.store/
 
 ## Features
 
@@ -21,23 +25,88 @@ This project is currently <b>under development</b>.
 - Integrations - Integrate seamlessly with the most common ecommerce platforms.
 - Dark Mode Support
 
-## Work in progress
-We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
-
 ## Integrations
-Next.js Commerce integrates out-of-the-box with BigCommerce. We plan to support all major ecommerce backends.
 
+Next.js Commerce integrates out-of-the-box with BigCommerce, Shopify, Swell, Saleor and Vendure. We plan to support all major ecommerce backends.
 
-## Goals
+## Considerations
 
-* **Next.js Commerce** should have a completely data **agnostic** UI
-* **Aware of schema**: should ship with the right data schemas and types.
-* All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
-* `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._
+- `framework/commerce` contains all types, helpers and functions to be used as base to build a new **provider**.
+- **Providers** live under `framework`'s root folder and they will extend Next.js Commerce types and functionality (`framework/commerce`).
+- We have a **Features API** to ensure feature parity between the UI and the Provider. The UI should update accordingly and no extra code should be bundled. All extra configuration for features will live under `features` in `commerce.config.json` and if needed it can also be accessed programatically.
+- Each **provider** should add its corresponding `next.config.js` and `commerce.config.json` adding specific data related to the provider. For example in case of BigCommerce, the images CDN and additional API routes.
+- **Providers don't depend on anything that's specific to the application they're used in**. They only depend on `framework/commerce`, on their own framework folder and on some dependencies included in `package.json`
 
-There is a `framework` folder in the root folder that will contain multiple ecommerce providers.
+## Configuration
 
-Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) we will also have to build a feature API to disable/enable features in the UI.
+### How to change providers
+
+Open `.env.local` and change the value of `COMMERCE_PROVIDER` to the provider you would like to use, then set the environment variables for that provider (use `.env.template` as the base).
+
+The setup for Shopify would look like this for example:
+
+```
+COMMERCE_PROVIDER=shopify
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com
+```
+
+And check that the `tsconfig.json` resolves to the chosen provider:
+
+```
+  "@framework": ["framework/shopify"],
+  "@framework/*": ["framework/shopify/*"]
+```
+
+That's it!
+
+### Features
+
+Every provider defines the features that it supports under `framework/{provider}/commerce.config.json`
+
+#### Features Available
+
+- wishlist
+- 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`
+- You'll see a config file like this:
+  ```json
+  {
+    "features": {
+      "wishlist": false,
+      "customCheckout": 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
+
+Follow our docs for [Adding a new Commerce Provider](framework/commerce/new-provider.md).
+
+If you succeeded building a provider, submit a PR with a valid demo and we'll review it asap.
+
+## Contribute
+
+Our commitment to Open Source can be found [here](https://vercel.com/oss).
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Create a new branch `git checkout -b MY_BRANCH_NAME`
+3. Install yarn: `npm install -g yarn`
+4. Install the dependencies: `yarn`
+5. Duplicate `.env.template` and rename it to `.env.local`
+6. Add proper store values to `.env.local`
+7. Run `yarn dev` to build and watch for code changes
+
+## Work in progress
+
+We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
 
 People actively working on this project: @okbel & @lfades.
 
@@ -57,6 +126,7 @@ BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
 BIGCOMMERCE_STORE_API_URL=<>
 BIGCOMMERCE_STORE_API_TOKEN=<>
 BIGCOMMERCE_STORE_API_CLIENT_ID=<>
+BIGCOMMERCE_CHANNEL_ID=<>
 ```
 
 If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.
@@ -77,22 +147,3 @@ After Email confirmation, Checkout should be manually enabled through BigCommerc
 <br>
 BigCommerce team has been notified and they plan to add more detailed about this subject.
 </details>
-
-## Contribute
-
-Our commitment to Open Source can be found [here](https://vercel.com/oss).
-
-1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
-2. Create a new branch `git checkout -b MY_BRANCH_NAME`
-3. Install yarn: `npm install -g yarn`
-4. Install the dependencies: `yarn`
-5. Duplicate `.env.template` and rename it to `.env.local`.
-6. Add proper store values to `.env.local`.
-7. Run `yarn dev` to build and watch for code changes
-8. The development branch is `development` (this is the branch pull requests should be made against).
-   On a release, `develop` branch is rebased into `master`.
-
-
-
-
-

assets/base.css

@@ -3,7 +3,6 @@
   --primary-2: #f1f3f5;
   --secondary: #000000;
   --secondary-2: #111;
-
   --selection: var(--cyan);
 
   --text-base: #000000;
@@ -13,28 +12,31 @@
   --hover: rgba(0, 0, 0, 0.075);
   --hover-1: rgba(0, 0, 0, 0.15);
   --hover-2: rgba(0, 0, 0, 0.25);
-
   --cyan: #22b8cf;
   --green: #37b679;
   --red: #da3c3c;
-  --pink: #e64980;
   --purple: #f81ce5;
-
   --blue: #0070f3;
 
-  --violet-light: #7048e8;
-  --violet: #5f3dc4;
+  --pink: #ff0080;
+  --pink-light: #ff379c;
+
+  --magenta: #eb367f;
+
+  --violet: #7928ca;
+  --violet-dark: #4c2889;
+
+  --accent-0: #fff;
+  --accent-1: #fafafa;
+  --accent-2: #eaeaea;
+  --accent-3: #999999;
+  --accent-4: #888888;
+  --accent-5: #666666;
+  --accent-6: #444444;
+  --accent-7: #333333;
+  --accent-8: #111111;
+  --accent-9: #000;
 
-  --accents-0: #f8f9fa;
-  --accents-1: #f1f3f5;
-  --accents-2: #e9ecef;
-  --accents-3: #dee2e6;
-  --accents-4: #ced4da;
-  --accents-5: #adb5bd;
-  --accents-6: #868e96;
-  --accents-7: #495057;
-  --accents-8: #343a40;
-  --accents-9: #212529;
   --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
     'Helvetica', sans-serif;
 }
@@ -53,16 +55,16 @@
   --text-primary: white;
   --text-secondary: black;
 
-  --accents-0: #212529;
-  --accents-1: #343a40;
-  --accents-2: #495057;
-  --accents-3: #868e96;
-  --accents-4: #adb5bd;
-  --accents-5: #ced4da;
-  --accents-6: #dee2e6;
-  --accents-7: #e9ecef;
-  --accents-8: #f1f3f5;
-  --accents-9: #f8f9fa;
+  --accent-9: #fff;
+  --accent-8: #fafafa;
+  --accent-7: #eaeaea;
+  --accent-6: #999999;
+  --accent-5: #888888;
+  --accent-4: #666666;
+  --accent-3: #444444;
+  --accent-2: #333333;
+  --accent-1: #111111;
+  --accent-0: #000;
 }
 
 *,
@@ -89,6 +91,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--primary);
   color: var(--text-primary);
+  overscroll-behavior-x: none;
 }
 
 body {
@@ -102,8 +105,6 @@ a {
 }
 
 .animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;

codegen.bigcommerce.json

@@ -0,0 +1,27 @@
+{
+  "schema": {
+    "https://buybutton.store/graphql": {
+      "headers": {
+        "Authorization": "Bearer xzy"
+      }
+    }
+  },
+  "documents": [
+    {
+      "./framework/bigcommerce/api/**/*.ts": {
+        "noRequire": true
+      }
+    }
+  ],
+  "generates": {
+    "./framework/bigcommerce/schema.d.ts": {
+      "plugins": ["typescript", "typescript-operations"]
+    },
+    "./framework/bigcommerce/schema.graphql": {
+      "plugins": ["schema-ast"]
+    }
+  },
+  "hooks": {
+    "afterAllFileWrite": ["prettier --write"]
+  }
+}

codegen.json

@@ -1,23 +1,29 @@
 {
   "schema": {
-    "https://buybutton.store/graphql": {
-      "headers": {
-        "Authorization": "Bearer xzy"
-      }
-    }
+    "https://master.staging.saleor.cloud/graphql/": {}
   },
   "documents": [
     {
-      "./framework/bigcommerce/api/**/*.ts": {
+      "./framework/saleor/utils/queries/get-all-products-query.ts": {
+        "noRequire": true
+      }
+    },
+    {
+      "./framework/saleor/utils/queries/get-all-products-paths-query.ts": {
+        "noRequire": true
+      }
+    },
+    {
+      "./framework/saleor/utils/queries/get-products.ts": {
         "noRequire": true
       }
     }
   ],
   "generates": {
-    "./framework/bigcommerce/schema.d.ts": {
+    "./framework/saleor/schema.d.ts": {
       "plugins": ["typescript", "typescript-operations"]
     },
-    "./framework/bigcommerce/schema.graphql": {
+    "./framework/saleor/schema.graphql": {
       "plugins": ["schema-ast"]
     }
   },

commerce.config.json

@@ -0,0 +1,6 @@
+{
+  "features": {
+    "wishlist": false,
+    "customCheckout": false
+  }
+}

components/agility-global/AgilityPage.tsx

@@ -1,6 +1,6 @@
 import pageTemplates from "components/agility-pageTemplates"
 
-const AgilityPage = ({ header, agilityProps, error, revalidate }: {header:any, agilityProps: any, error?: any, revalidate?: any}) => {
+const AgilityPage = ({ agilityProps, error, revalidate }: { agilityProps: any, error?: any, revalidate?: any}) => {
 
 	if (!agilityProps) {
 		console.error(`Page object or template was not found.`)

components/agility-modules/BestsellingProducts.tsx

@@ -5,7 +5,7 @@ import { Grid, Marquee, Hero } from '@components/ui'
 import { ModuleWithInit } from '@agility/nextjs'
 
 interface ICustomData {
-	bestSelling: any
+	products: any
 }
 
 interface IModule {
@@ -14,21 +14,14 @@ interface IModule {
 
 const BestsellingProducts: ModuleWithInit<IModule, ICustomData> = ({ customData }) => {
 
-	const bestSelling = customData.bestSelling
+	const products = customData.products
 
 	return (
 		<Marquee variant="secondary">
-			{bestSelling.slice(0, 12).map(({ node }: any) => (
-				<ProductCard
-					key={node.path}
-					product={node}
-					variant="slim"
-					imgWidth={320}
-					imgHeight={320}
-					imgLayout="fixed"
-				/>
-			))}
-		</Marquee>
+        {products.slice(0, 3).map((product: any, i: number) => (
+          <ProductCard key={product.id} product={product} variant="slim" />
+        ))}
+      </Marquee>
 	)
 }
 

components/agility-modules/Cart.tsx

@@ -1,13 +1,12 @@
 import React, { FC } from 'react'
 
-import { ProductCard } from '@components/product'
-import { Grid, Marquee, Hero } from '@components/ui'
 import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/use-price'
-import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
+import usePrice from '@framework/product/use-price'
+import commerce from '@lib/api/commerce'
+import { Layout } from '@components/common'
+import { Button, Text } from '@components/ui'
+import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
-import { Text } from '@components/ui'
 
 interface Fields {
 }
@@ -18,39 +17,37 @@ interface Props {
 }
 
 const Cart: FC<Props> = ({ fields, customData }) => {
-	const { data, isEmpty } = useCart()
+	const error = null
+	const success = null
+	const { data, isLoading, isEmpty } = useCart()
+
 	const { price: subTotal } = usePrice(
 		data && {
-			amount: data.base_amount,
+			amount: Number(data.subtotalPrice),
 			currencyCode: data.currency.code,
 		}
 	)
 	const { price: total } = usePrice(
 		data && {
-			amount: data.cart_amount,
+			amount: Number(data.totalPrice),
 			currencyCode: data.currency.code,
 		}
 	)
 
-	const items = data?.line_items.physical_items ?? []
-
-	const error = null
-	const success = null
-
 	return (
-		<div className="grid lg:grid-cols-12">
+		<div className="grid lg:grid-cols-12 w-full max-w-7xl mx-auto">
 			<div className="lg:col-span-8">
-				{isEmpty ? (
+				{isLoading || isEmpty ? (
 					<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
 						<span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
 							<Bag className="absolute" />
 						</span>
 						<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
 							Your cart is empty
-			  </h2>
-						<p className="text-accents-6 px-10 text-center pt-2">
+						</h2>
+						<p className="text-accent-6 px-10 text-center pt-2">
 							Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-			  </p>
+						</p>
 					</div>
 				) : error ? (
 					<div className="flex-1 px-4 flex flex-col justify-center items-center">
@@ -60,7 +57,7 @@ const Cart: FC<Props> = ({ fields, customData }) => {
 						<h2 className="pt-6 text-xl font-light text-center">
 							We couldn’t process the purchase. Please check your card
 							information and try again.
-			  </h2>
+						</h2>
 					</div>
 				) : success ? (
 					<div className="flex-1 px-4 flex flex-col justify-center items-center">
@@ -69,14 +66,14 @@ const Cart: FC<Props> = ({ fields, customData }) => {
 						</span>
 						<h2 className="pt-6 text-xl font-light text-center">
 							Thank you for your order.
-			  </h2>
+						</h2>
 					</div>
 				) : (
 					<div className="px-4 sm:px-6 flex-1">
 						<Text variant="pageHeading">My Cart</Text>
 						<Text variant="sectionHeading">Review your Order</Text>
-						<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-b border-accents-2">
-							{items.map((item) => (
+						<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-b border-accent-2">
+							{data!.lineItems.map((item: any) => (
 								<CartItem
 									key={item.id}
 									item={item}
@@ -91,7 +88,10 @@ const Cart: FC<Props> = ({ fields, customData }) => {
 							</Text>
 							<div className="flex py-6 space-x-6">
 								{[1, 2, 3, 4, 5, 6].map((x) => (
-									<div className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75" />
+									<div
+										key={x}
+										className="border border-accent-3 w-full h-24 bg-accent-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75"
+									/>
 								))}
 							</div>
 						</div>
@@ -100,7 +100,36 @@ const Cart: FC<Props> = ({ fields, customData }) => {
 			</div>
 			<div className="lg:col-span-4">
 				<div className="flex-shrink-0 px-4 py-24 sm:px-6">
-					<div className="border-t border-accents-2">
+					{process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
+						<>
+							{/* Shipping Address */}
+							{/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+							<div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
+								<div className="mr-5">
+									<MapPin />
+								</div>
+								<div className="text-sm text-center font-medium">
+									<span className="uppercase">+ Add Shipping Address</span>
+									{/* <span>
+                    1046 Kearny Street.<br/>
+                    San Franssisco, California
+                  </span> */}
+								</div>
+							</div>
+							{/* Payment Method */}
+							{/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+							<div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
+								<div className="mr-5">
+									<CreditCard />
+								</div>
+								<div className="text-sm text-center font-medium">
+									<span className="uppercase">+ Add Payment Method</span>
+									{/* <span>VISA #### #### #### 2345</span> */}
+								</div>
+							</div>
+						</>
+					)}
+					<div className="border-t border-accent-2">
 						<ul className="py-3">
 							<li className="flex justify-between py-1">
 								<span>Subtotal</span>
@@ -115,7 +144,7 @@ const Cart: FC<Props> = ({ fields, customData }) => {
 								<span className="font-bold tracking-wide">FREE</span>
 							</li>
 						</ul>
-						<div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10">
+						<div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-10">
 							<span>Total</span>
 							<span>{total}</span>
 						</div>
@@ -127,10 +156,10 @@ const Cart: FC<Props> = ({ fields, customData }) => {
 									Continue Shopping
 								</Button>
 							) : (
-									<Button href="/checkout" Component="a" width="100%">
-										Proceed to Checkout
-									</Button>
-								)}
+								<Button href="/checkout" Component="a" width="100%">
+									Proceed to Checkout
+								</Button>
+							)}
 						</div>
 					</div>
 				</div>

components/agility-modules/FeaturedProducts.tsx

@@ -4,7 +4,7 @@ import { ProductCard } from '@components/product'
 import { ModuleWithInit } from "@agility/nextjs"
 
 interface ICustomData {
-	featured: any
+	products: any
 }
 
 interface IModule {
@@ -17,16 +17,18 @@ const FeaturedProducts: ModuleWithInit<IModule, ICustomData> = ({ customData })
 		return <div>No featured products returned.</div>
 	}
 
-	const featured:any = customData.featured
+	const products:any = customData.products
 
 	return (
-		<Grid layout="B">
-        {featured.map(({ node }:any, i:number) => (
+		<Grid variant="filled">
+        {products.slice(0, 3).map((product: any, i: number) => (
           <ProductCard
-            key={node.path}
-            product={node}
-            imgWidth={i === 1 ? 1080 : 540}
-            imgHeight={i === 1 ? 1080 : 540}
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
           />
         ))}
       </Grid>

components/agility-modules/Hero.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from 'react'
 import { Hero } from '@components/ui'
-import * as AgilityTypes from "@agility/types"
+import { URLField } from "@agility/nextjs"
 import { Module } from '@agility/nextjs'
 
 
 interface Fields {
 	title:string,
 	description:string
-	cTA?:AgilityTypes.URLField
+	cTA?:URLField
 }
 
 const HeroModule:Module<Fields> = ({ module: {fields }}) => {
@@ -16,8 +16,8 @@ const HeroModule:Module<Fields> = ({ module: {fields }}) => {
 		<Hero
 			headline={fields.title}
 			description={fields.description}
-			linkText={fields.cTA?.text}
-			linkUrl={fields.cTA?.href}
+			ctaText={fields.cTA?.text || ""}
+			ctaUrl={fields.cTA?.href || ""}
       />
 	)
 }

components/agility-modules/HomeAllProductsGrid.tsx

@@ -1,13 +1,14 @@
 import React, { FC } from 'react'
 import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 import { ModuleWithInit } from '@agility/nextjs'
-
+import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
 
 
 interface ICustomData {
-	categories: any
-	newestProducts: any
-	brands: any
+
+	products: any
+
 }
 
 interface IModule {
@@ -16,19 +17,25 @@ interface IModule {
 
 const HomeAllProductsGridModule: ModuleWithInit<IModule, ICustomData> = ({ customData }) => {
 
-	const categories  = customData.categories
-	const newestProducts  = customData.newestProducts
-	const brands  = customData.brands
 
-	if (!categories) return <div>No data</div>
+	const products = customData.products
 
 	return (
-		<HomeAllProductsGrid
-			categories={categories}
-			brands={brands}
-			newestProducts={newestProducts}
-      />
+		<Grid layout="B" variant="filled">
+        {products.slice(0, 3).map((product: any, i: number) => (
+          <ProductCard
+            key={product.id}
+            product={product}
+            imgProps={{
+              width: i === 0 ? 1080 : 540,
+              height: i === 0 ? 1080 : 540,
+            }}
+          />
+        ))}
+      </Grid>
 	)
+
+
 }
 
 export default HomeAllProductsGridModule

components/agility-modules/Orders.tsx

@@ -8,7 +8,7 @@ import { Module } from '@agility/nextjs'
 interface Fields {
 }
 
-const Orders: Module<Fields> = ({  }) => {
+const Orders: Module<Fields> = ({ }) => {
 	return (
 		<Container>
 			<Text variant="pageHeading">My Orders</Text>
@@ -19,8 +19,8 @@ const Orders: Module<Fields> = ({  }) => {
 				<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
 					No orders found
 				</h2>
-				<p className="text-accents-6 px-10 text-center pt-2">
-					Orders coming soon!
+				<p className="text-accent-6 px-10 text-center pt-2">
+					Orders coming soon.
 				</p>
 			</div>
 		</Container>

components/agility-modules/ProductDetails.tsx

@@ -1,20 +1,25 @@
 import React, { FC } from 'react'
-import { Hero } from '@components/ui'
-import * as AgilityTypes from "@agility/types"
-import { GetProductResult } from '@framework/api/operations/get-product'
-import { ProductView } from '@components/product'
-import { Module } from '@agility/nextjs'
 
-interface Fields {
+import { ProductView } from '@components/product'
+import { Module, ModuleWithInit } from '@agility/nextjs'
+
+interface IFields {
+}
+interface ICustomData {
+	products: any
 }
 
 
-const HeroModule:Module<Fields> = ({ dynamicPageItem }) => {
+const ProductDetails:ModuleWithInit<IFields, ICustomData> = ({ dynamicPageItem, customData }) => {
 	const product:any = dynamicPageItem
+
+	const relatedProducts:[] = customData.products
+
+
 	return (
-		<ProductView product={product} />
+		<ProductView product={product} relatedProducts={relatedProducts} />
 	)
 }
 
-export default HeroModule
+export default ProductDetails
 

components/agility-modules/ProductSearch.tsx

@@ -1,31 +1,7 @@
 import React, { FC } from 'react'
-import cn from 'classnames'
-import Link from 'next/link'
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import useSearch from '@framework/products/use-search'
-import { ProductCard } from '@components/product'
-import { Container, Grid, Skeleton } from '@components/ui'
-
-import rangeMap from '@lib/range-map'
-import getSlug from '@lib/get-slug'
-import {
-	filterQuery,
-	getCategoryPath,
-	getDesignerPath,
-	useSearchMeta,
-} from '@lib/search'
+import Search from '@components/search'
 import { ModuleWithInit } from '@agility/nextjs'
 
-
-const SORT = Object.entries({
-	'latest-desc': 'Latest arrivals',
-	'trending-desc': 'Trending',
-	'price-asc': 'Price: Low to high',
-	'price-desc': 'Price: High to low',
-  })
-
-
 interface ICustomData {
 	categories: any
 	brands: any
@@ -40,416 +16,8 @@ const ProductSearch: ModuleWithInit<IModule, ICustomData> = ({ customData }) =>
 	const categories:[any]  = customData.categories
 	const brands:[any]  = customData.brands
 
-	const [activeFilter, setActiveFilter] = useState('')
-	const [toggleFilter, setToggleFilter] = useState(false)
+	return <Search brands={brands} categories={categories} pages={[]} />
 
-
-  const router = useRouter()
-  const { asPath } = router
-  const { q, sort } = router.query
-  // `q` can be included but because categories and designers can't be searched
-  // in the same way of products, it's better to ignore the search input if one
-  // of those is selected
-  const query = filterQuery({ sort })
-
-  const { pathname, category, brand } = useSearchMeta(asPath)
-  const activeCategory = categories.find(
-	(cat) => getSlug(cat.path) === category
-  )
-  const activeBrand = brands.find(
-	(b) => getSlug(b.node.path) === `brands/${brand}`
-  )?.node
-
-  const { data } = useSearch({
-	search: typeof q === 'string' ? q : '',
-	categoryId: activeCategory?.entityId,
-	brandId: activeBrand?.entityId,
-	sort: typeof sort === 'string' ? sort : '',
-  })
-
-  const handleClick = (event: any, filter: string) => {
-	if (filter !== activeFilter) {
-	  setToggleFilter(true)
-	} else {
-	  setToggleFilter(!toggleFilter)
-	}
-
-	setActiveFilter(filter)
-  }
-
-  return (
-	<Container>
-	  <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
-		<div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
-		  {/* Categories */}
-		  <div className="relative inline-block w-full">
-			<div className="lg:hidden">
-			  <span className="rounded-md shadow-sm">
-				<button
-				  type="button"
-				  onClick={(e) => handleClick(e, 'categories')}
-				  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
-				  id="options-menu"
-				  aria-haspopup="true"
-				  aria-expanded="true"
-				>
-				  {activeCategory?.name
-					? `Category: ${activeCategory?.name}`
-					: 'All Categories'}
-				  <svg
-					className="-mr-1 ml-2 h-5 w-5"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-				  >
-					<path
-					  fillRule="evenodd"
-					  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-					  clipRule="evenodd"
-					/>
-				  </svg>
-				</button>
-			  </span>
-			</div>
-			<div
-			  className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-				activeFilter !== 'categories' || toggleFilter !== true
-				  ? 'hidden'
-				  : ''
-			  }`}
-			>
-			  <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
-				<div
-				  role="menu"
-				  aria-orientation="vertical"
-				  aria-labelledby="options-menu"
-				>
-				  <ul>
-					<li
-					  className={cn(
-						'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-						{
-						  underline: !activeCategory?.name,
-						}
-					  )}
-					>
-					  <Link
-						href={{ pathname: getCategoryPath('', brand), query }}
-					  >
-						<a
-						  onClick={(e) => handleClick(e, 'categories')}
-						  className={
-							'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-						  }
-						>
-						  All Categories
-						</a>
-					  </Link>
-					</li>
-					{categories.map((cat) => (
-					  <li
-						key={cat.path}
-						className={cn(
-						  'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-						  {
-							underline:
-							  activeCategory?.entityId === cat.entityId,
-						  }
-						)}
-					  >
-						<Link
-						  href={{
-							pathname: getCategoryPath(cat.path, brand),
-							query,
-						  }}
-						>
-						  <a
-							onClick={(e) => handleClick(e, 'categories')}
-							className={
-							  'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-							}
-						  >
-							{cat.name}
-						  </a>
-						</Link>
-					  </li>
-					))}
-				  </ul>
-				</div>
-			  </div>
-			</div>
-		  </div>
-
-		  {/* Designs */}
-		  <div className="relative inline-block w-full">
-			<div className="lg:hidden mt-3">
-			  <span className="rounded-md shadow-sm">
-				<button
-				  type="button"
-				  onClick={(e) => handleClick(e, 'brands')}
-				  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
-				  id="options-menu"
-				  aria-haspopup="true"
-				  aria-expanded="true"
-				>
-				  {activeBrand?.name
-					? `Design: ${activeBrand?.name}`
-					: 'All Designs'}
-				  <svg
-					className="-mr-1 ml-2 h-5 w-5"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-				  >
-					<path
-					  fillRule="evenodd"
-					  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-					  clipRule="evenodd"
-					/>
-				  </svg>
-				</button>
-			  </span>
-			</div>
-			<div
-			  className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-				activeFilter !== 'brands' || toggleFilter !== true
-				  ? 'hidden'
-				  : ''
-			  }`}
-			>
-			  <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
-				<div
-				  role="menu"
-				  aria-orientation="vertical"
-				  aria-labelledby="options-menu"
-				>
-				  <ul>
-					<li
-					  className={cn(
-						'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-						{
-						  underline: !activeBrand?.name,
-						}
-					  )}
-					>
-					  <Link
-						href={{
-						  pathname: getDesignerPath('', category),
-						  query,
-						}}
-					  >
-						<a
-						  onClick={(e) => handleClick(e, 'brands')}
-						  className={
-							'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-						  }
-						>
-						  All Designers
-						</a>
-					  </Link>
-					</li>
-					{brands.flatMap(({ node }) => (
-					  <li
-						key={node.path}
-						className={cn(
-						  'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-						  {
-							underline: activeBrand?.entityId === node.entityId,
-						  }
-						)}
-					  >
-						<Link
-						  href={{
-							pathname: getDesignerPath(node.path, category),
-							query,
-						  }}
-						>
-						  <a
-							onClick={(e) => handleClick(e, 'brands')}
-							className={
-							  'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-							}
-						  >
-							{node.name}
-						  </a>
-						</Link>
-					  </li>
-					))}
-				  </ul>
-				</div>
-			  </div>
-			</div>
-		  </div>
-		</div>
-		{/* Products */}
-		<div className="col-span-8 order-3 lg:order-none">
-		  {(q || activeCategory || activeBrand) && (
-			<div className="mb-12 transition ease-in duration-75">
-			  {data ? (
-				<>
-				  <span
-					className={cn('animated', {
-					  fadeIn: data.found,
-					  hidden: !data.found,
-					})}
-				  >
-					Showing {data.products.length} results{' '}
-					{q && (
-					  <>
-						for "<strong>{q}</strong>"
-					  </>
-					)}
-				  </span>
-				  <span
-					className={cn('animated', {
-					  fadeIn: !data.found,
-					  hidden: data.found,
-					})}
-				  >
-					{q ? (
-					  <>
-						There are no products that match "<strong>{q}</strong>"
-					  </>
-					) : (
-					  <>
-						There are no products that match the selected category &
-						designer
-					  </>
-					)}
-				  </span>
-				</>
-			  ) : q ? (
-				<>
-				  Searching for: "<strong>{q}</strong>"
-				</>
-			  ) : (
-				<>Searching...</>
-			  )}
-			</div>
-		  )}
-
-		  {data ? (
-			<Grid layout="normal">
-			  {data.products.map(({ node }) => (
-				<ProductCard
-				  variant="simple"
-				  key={node.path}
-				  className="animated fadeIn"
-				  product={node}
-				  imgWidth={480}
-				  imgHeight={480}
-				/>
-			  ))}
-			</Grid>
-		  ) : (
-			<Grid layout="normal">
-			  {rangeMap(12, (i) => (
-				<Skeleton
-				  key={i}
-				  className="w-full animated fadeIn"
-				  height={325}
-				/>
-			  ))}
-			</Grid>
-		  )}
-		</div>
-
-		{/* Sort */}
-		<div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
-		  <div className="relative inline-block w-full">
-			<div className="lg:hidden">
-			  <span className="rounded-md shadow-sm">
-				<button
-				  type="button"
-				  onClick={(e) => handleClick(e, 'sort')}
-				  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
-				  id="options-menu"
-				  aria-haspopup="true"
-				  aria-expanded="true"
-				>
-				  {sort ? `Sort: ${sort}` : 'Relevance'}
-				  <svg
-					className="-mr-1 ml-2 h-5 w-5"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 20 20"
-					fill="currentColor"
-				  >
-					<path
-					  fillRule="evenodd"
-					  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-					  clipRule="evenodd"
-					/>
-				  </svg>
-				</button>
-			  </span>
-			</div>
-			<div
-			  className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
-				activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
-			  }`}
-			>
-			  <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
-				<div
-				  role="menu"
-				  aria-orientation="vertical"
-				  aria-labelledby="options-menu"
-				>
-				  <ul>
-					<li
-					  className={cn(
-						'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-						{
-						  underline: !sort,
-						}
-					  )}
-					>
-					  <Link href={{ pathname, query: filterQuery({ q }) }}>
-						<a
-						  onClick={(e) => handleClick(e, 'sort')}
-						  className={
-							'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-						  }
-						>
-						  Relevance
-						</a>
-					  </Link>
-					</li>
-					{SORT.map(([key, text]) => (
-					  <li
-						key={key}
-						className={cn(
-						  'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
-						  {
-							underline: sort === key,
-						  }
-						)}
-					  >
-						<Link
-						  href={{
-							pathname,
-							query: filterQuery({ q, sort: key }),
-						  }}
-						>
-						  <a
-							onClick={(e) => handleClick(e, 'sort')}
-							className={
-							  'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
-							}
-						  >
-							{text}
-						  </a>
-						</Link>
-					  </li>
-					))}
-				  </ul>
-				</div>
-			  </div>
-			</div>
-		  </div>
-		</div>
-	  </div>
-	</Container>
-  )
 }
 
 

components/agility-modules/Profile.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 
-import useCustomer from '@framework/use-customer'
+import useCustomer from '@framework/customer/use-customer'
 import { Container, Text } from '@components/ui'
 import { Module } from '@agility/nextjs'
 
@@ -12,34 +12,30 @@ interface Fields {
 }
 
 
-const ProfileModule:Module<Fields> = ({ module: {fields}}) => {
+const ProfileModule: Module<Fields> = ({ module: { fields } }) => {
 
 	const { data } = useCustomer()
-  return (
-    <Container>
-      <Text variant="pageHeading">{fields.heading}</Text>
-      {data && (
-        <div className="grid lg:grid-cols-12">
-          <div className="lg:col-span-8 pr-4">
-            <div>
-              <Text variant="sectionHeading">{fields.fullNameLabel}</Text>
-              <span>
-                {data.firstName} {data.lastName}
-              </span>
-            </div>
-            <div className="mt-5">
-              <Text variant="sectionHeading">{fields.emailLabel}</Text>
-              <span>{data.email}</span>
-            </div>
-          </div>
-        </div>
-      )}
-
-	  { !data &&
-	  	<Text variant="body">{fields.notLoggedInMessage}</Text>
-	  }
-    </Container>
-  )
+	return (
+		<Container>
+			<Text variant="pageHeading">My Profile</Text>
+			{data && (
+				<div className="grid lg:grid-cols-12">
+					<div className="lg:col-span-8 pr-4">
+						<div>
+							<Text variant="sectionHeading">Full Name</Text>
+							<span>
+								{data.firstName} {data.lastName}
+							</span>
+						</div>
+						<div className="mt-5">
+							<Text variant="sectionHeading">Email</Text>
+							<span>{data.email}</span>
+						</div>
+					</div>
+				</div>
+			)}
+		</Container>
+	)
 }
 
 export default ProfileModule

components/agility-modules/Wishlist.tsx

@@ -1,11 +1,12 @@
 import React, { FC } from 'react'
 
-import useWishlist from '@framework/wishlist/use-wishlist'
-
-import { Heart } from '@components/icons'
-import { Text, Container } from '@components/ui'
-import { WishlistCard } from '@components/wishlist'
 import { Module } from '@agility/nextjs'
+import { Heart } from '@components/icons'
+import { Layout } from '@components/common'
+import { Text, Container } from '@components/ui'
+import { useCustomer } from '@framework/customer'
+import { WishlistCard } from '@components/wishlist'
+import useWishlist from '@framework/wishlist/use-wishlist'
 
 
 interface Fields {
@@ -15,35 +16,41 @@ interface Fields {
 }
 
 const Wishlist: Module<Fields> = ({ module: { fields } }) => {
-	const { data, isEmpty } = useWishlist({ includeProducts: true })
 
-	return (
-		<Container>
-			<div className="mt-3 mb-20">
-				<Text variant="pageHeading">{fields.heading}</Text>
-				<div className="group flex flex-col">
-					{isEmpty ? (
-						<div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
-							<span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
-								<Heart className="absolute" />
-							</span>
-							<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
-								{fields.emptyMessage}
-							</h2>
-							<p className="text-accents-6 px-10 text-center pt-2">
-								{fields.addItemsMessage}
-							</p>
-						</div>
-					) : (
-						data &&
-						data.items?.map((item) => (
-							<WishlistCard key={item.id} item={item} />
-						))
-					)}
-				</div>
-			</div>
-		</Container>
-	)
+	const { data: customer } = useCustomer()
+  // @ts-ignore Shopify - Fix this types
+  const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
+
+  return (
+    <Container>
+      <div className="mt-3 mb-20">
+        <Text variant="pageHeading">My Wishlist</Text>
+        <div className="group flex flex-col">
+          {isLoading || isEmpty ? (
+            <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
+              <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
+                <Heart className="absolute" />
+              </span>
+              <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
+                Your wishlist is empty
+              </h2>
+              <p className="text-accent-6 px-10 text-center pt-2">
+                Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+              </p>
+            </div>
+          ) : (
+            data &&
+            // @ts-ignore Shopify - Fix this types
+            data.items?.map((item) => (
+              <WishlistCard key={item.id} product={item.product! as any} />
+            ))
+          )}
+        </div>
+      </div>
+    </Container>
+  )
+
+
 }
 
 export default Wishlist

components/agility-modules/index.ts

@@ -1,5 +1,3 @@
-import { FC } from "react"
-import * as AgilityTypes from "@agility/types"
 import RichTextArea from "./RichTextArea"
 import BestsellingProducts from "./BestsellingProducts"
 import ProductDetails from "./ProductDetails"

components/auth/ForgotPassword.tsx

@@ -61,7 +61,7 @@ const ForgotPassword: FC<Props> = () => {
         </div>
 
         <span className="pt-3 text-center text-sm">
-          <span className="text-accents-7">Do you have an account?</span>
+          <span className="text-accent-7">Do you have an account?</span>
           {` `}
           <a
             className="text-accent-9 font-bold hover:underline cursor-pointer"

components/auth/LoginView.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { Logo, Button, Input } from '@components/ui'
-import useLogin from '@framework/use-login'
+import useLogin from '@framework/auth/use-login'
 import { useUI } from '@components/ui/context'
 import { validate } from 'email-validator'
 
@@ -87,7 +87,7 @@ const LoginView: FC<Props> = () => {
           Log In
         </Button>
         <div className="pt-1 text-center text-sm">
-          <span className="text-accents-7">Don't have an account?</span>
+          <span className="text-accent-7">Don't have an account?</span>
           {` `}
           <a
             className="text-accent-9 font-bold hover:underline cursor-pointer"

components/auth/SignUpView.tsx

@@ -3,7 +3,7 @@ import { validate } from 'email-validator'
 import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
-import useSignup from '@framework/use-signup'
+import useSignup from '@framework/auth/use-signup'
 
 interface Props {}
 
@@ -76,7 +76,7 @@ const SignUpView: FC<Props> = () => {
         <Input placeholder="Last Name" onChange={setLastName} />
         <Input type="email" placeholder="Email" onChange={setEmail} />
         <Input type="password" placeholder="Password" onChange={setPassword} />
-        <span className="text-accents-8">
+        <span className="text-accent-8">
           <span className="inline-block align-middle ">
             <Info width="15" height="15" />
           </span>{' '}
@@ -97,7 +97,7 @@ const SignUpView: FC<Props> = () => {
         </div>
 
         <span className="pt-1 text-center text-sm">
-          <span className="text-accents-7">Do you have an account?</span>
+          <span className="text-accent-7">Do you have an account?</span>
           {` `}
           <a
             className="text-accent-9 font-bold hover:underline cursor-pointer"

components/cart/CartItem/CartItem.module.css

@@ -1,6 +1,14 @@
+.root {
+  @apply flex flex-col py-4;
+}
+
+.root:first-child {
+  padding-top: 0;
+}
+
 .quantity {
   appearance: textfield;
-  @apply w-8 border-accents-2 border mx-3 rounded text-center text-sm text-black;
+  @apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black;
 }
 
 .quantity::-webkit-outer-spin-button,
@@ -15,4 +23,10 @@
   height: 100%;
   left: 30% !important;
   top: 30% !important;
+  z-index: 1;
+}
+
+.productName {
+  @apply font-medium cursor-pointer pb-1;
+  margin-top: -4px;
 }

components/cart/CartItem/CartItem.tsx

@@ -1,66 +1,70 @@
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Trash, Plus, Minus } from '@components/icons'
-import usePrice from '@framework/use-price'
+import s from './CartItem.module.css'
+import { Trash, Plus, Minus, Cross } from '@components/icons'
+import { useUI } from '@components/ui/context'
+import type { LineItem } from '@commerce/types/cart'
+import usePrice from '@framework/product/use-price'
 import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
-import s from './CartItem.module.css'
+import Quantity from '@components/ui/Quantity'
+
+type ItemOption = {
+  name: string
+  nameId: number
+  value: string
+  valueId: number
+}
 
 const CartItem = ({
   item,
+  variant = 'default',
   currencyCode,
+  ...rest
 }: {
-  item: any
+  variant?: 'default' | 'display'
+  item: LineItem
   currencyCode: string
 }) => {
+  const { closeSidebarIfPresent } = useUI()
+  const [removing, setRemoving] = useState(false)
+  const [quantity, setQuantity] = useState<number>(item.quantity)
+  const removeItem = useRemoveItem()
+  const updateItem = useUpdateItem({ item })
+
   const { price } = usePrice({
-    amount: item.extended_sale_price,
-    baseAmount: item.extended_list_price,
+    amount: item.variant.price * item.quantity,
+    baseAmount: item.variant.listPrice * item.quantity,
     currencyCode,
   })
-  const updateItem = useUpdateItem(item)
-  const removeItem = useRemoveItem()
-  const [quantity, setQuantity] = useState(item.quantity)
-  const [removing, setRemoving] = useState(false)
-  const updateQuantity = async (val: number) => {
+
+  const handleChange = async ({
+    target: { value },
+  }: ChangeEvent<HTMLInputElement>) => {
+    setQuantity(Number(value))
+    await updateItem({ quantity: Number(value) })
+  }
+
+  const increaseQuantity = async (n = 1) => {
+    const val = Number(quantity) + n
+    setQuantity(val)
     await updateItem({ quantity: val })
   }
-  const handleQuantity = (e: ChangeEvent<HTMLInputElement>) => {
-    const val = Number(e.target.value)
 
-    if (Number.isInteger(val) && val >= 0) {
-      setQuantity(e.target.value)
-    }
-  }
-  const handleBlur = () => {
-    const val = Number(quantity)
-
-    if (val !== item.quantity) {
-      updateQuantity(val)
-    }
-  }
-  const increaseQuantity = (n = 1) => {
-    const val = Number(quantity) + n
-
-    if (Number.isInteger(val) && val >= 0) {
-      setQuantity(val)
-      updateQuantity(val)
-    }
-  }
   const handleRemove = async () => {
     setRemoving(true)
-
     try {
-      // If this action succeeds then there's no need to do `setRemoving(true)`
-      // because the component will be removed from the view
-      await removeItem({ id: item.id })
+      await removeItem(item)
     } catch (error) {
       setRemoving(false)
     }
   }
 
+  // TODO: Add a type for this
+  const options = (item as any).options
+
   useEffect(() => {
     // Reset the quantity state if the item quantity changes
     if (item.quantity !== Number(quantity)) {
@@ -70,55 +74,76 @@ const CartItem = ({
 
   return (
     <li
-      className={cn('flex flex-row space-x-8 py-8', {
-        'opacity-75 pointer-events-none': removing,
+      className={cn(s.root, {
+        'opacity-50 pointer-events-none': removing,
       })}
+      {...rest}
     >
-      <div className="w-16 h-16 bg-violet relative overflow-hidden">
-        <Image
-          className={s.productImage}
-          src={item.image_url}
-          width={150}
-          height={150}
-          alt="Product Image"
-          // The cart item image is already optimized and very small in size
-          unoptimized
-        />
-      </div>
-      <div className="flex-1 flex flex-col text-base">
-        {/** TODO: Replace this. No `path` found at Cart */}
-        <Link href={`/product/${item.url.split('/')[3]}`}>
-          <span className="font-bold mb-5 text-lg cursor-pointer">
-            {item.name}
-          </span>
-        </Link>
-
-        <div className="flex items-center">
-          <button type="button" onClick={() => increaseQuantity(-1)}>
-            <Minus width={18} height={18} />
-          </button>
-          <label>
-            <input
-              type="number"
-              max={99}
-              min={0}
-              className={s.quantity}
-              value={quantity}
-              onChange={handleQuantity}
-              onBlur={handleBlur}
+      <div className="flex flex-row space-x-4 py-4">
+        <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
+          <Link href={`/product/${item.path}`}>
+            <Image
+              onClick={() => closeSidebarIfPresent()}
+              className={s.productImage}
+              width={150}
+              height={150}
+              src={item.variant.image!.url}
+              alt={item.variant.image!.altText}
+              unoptimized
             />
-          </label>
-          <button type="button" onClick={() => increaseQuantity(1)}>
-            <Plus width={18} height={18} />
-          </button>
+          </Link>
+        </div>
+        <div className="flex-1 flex flex-col text-base">
+          <Link href={`/product/${item.path}`}>
+            <span
+              className={s.productName}
+              onClick={() => closeSidebarIfPresent()}
+            >
+              {item.name}
+            </span>
+          </Link>
+          {options && options.length > 0 && (
+            <div className="flex items-center pb-1">
+              {options.map((option: ItemOption, i: number) => (
+                <div
+                  key={`${item.id}-${option.name}`}
+                  className="text-sm font-semibold text-accent-7 inline-flex items-center justify-center"
+                >
+                  {option.name}
+                  {option.name === 'Color' ? (
+                    <span
+                      className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden"
+                      style={{
+                        backgroundColor: `${option.value}`,
+                      }}
+                    ></span>
+                  ) : (
+                    <span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden">
+                      {option.value}
+                    </span>
+                  )}
+                  {i === options.length - 1 ? '' : <span className="mr-3" />}
+                </div>
+              ))}
+            </div>
+          )}
+          {variant === 'display' && (
+            <div className="text-sm tracking-wider">{quantity}x</div>
+          )}
+        </div>
+        <div className="flex flex-col justify-between space-y-2 text-sm">
+          <span>{price}</span>
         </div>
       </div>
-      <div className="flex flex-col justify-between space-y-2 text-base">
-        <span>{price}</span>
-        <button className="flex justify-end" onClick={handleRemove}>
-          <Trash />
-        </button>
-      </div>
+      {variant === 'default' && (
+        <Quantity
+          value={quantity}
+          handleRemove={handleRemove}
+          handleChange={handleChange}
+          increase={() => increaseQuantity(1)}
+          decrease={() => increaseQuantity(-1)}
+        />
+      )}
     </li>
   )
 }

components/cart/CartSidebarView/CartSidebarView.module.css

@@ -1,15 +1,11 @@
 .root {
-  @apply h-full flex flex-col;
+  min-height: 100vh;
 }
 
 .root.empty {
   @apply bg-secondary text-secondary;
 }
 
-.root.success {
-  @apply bg-green text-white;
-}
-
-.root.error {
-  @apply bg-red text-white;
+.lineItemsList {
+  @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2;
 }

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,62 +1,45 @@
-import { FC } from 'react'
 import cn from 'classnames'
-import { UserNav } from '@components/common'
-import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/use-price'
-import CartItem from '../CartItem'
+import Link from 'next/link'
+import { FC } from 'react'
 import s from './CartSidebarView.module.css'
+import CartItem from '../CartItem'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import { Bag, Cross, Check } from '@components/icons'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
+import SidebarLayout from '@components/common/SidebarLayout'
 
 const CartSidebarView: FC = () => {
-  const { closeSidebar } = useUI()
-  const { data, isEmpty } = useCart()
+  const { closeSidebar, setSidebarView } = useUI()
+  const { data, isLoading, isEmpty } = useCart()
+
   const { price: subTotal } = usePrice(
     data && {
-      amount: data.base_amount,
+      amount: Number(data.subtotalPrice),
       currencyCode: data.currency.code,
     }
   )
   const { price: total } = usePrice(
     data && {
-      amount: data.cart_amount,
+      amount: Number(data.totalPrice),
       currencyCode: data.currency.code,
     }
   )
   const handleClose = () => closeSidebar()
-
-  const items = data?.line_items.physical_items ?? []
+  const goToCheckout = () => setSidebarView('CHECKOUT_VIEW')
 
   const error = null
   const success = null
 
   return (
-    <div
-      className={cn(s.root, {
-        [s.empty]: error,
-        [s.empty]: success,
-        [s.empty]: isEmpty,
+    <SidebarLayout
+      className={cn({
+        [s.empty]: error || success || isLoading || isEmpty,
       })}
+      handleClose={handleClose}
     >
-      <header className="px-4 pt-6 pb-4 sm:px-6">
-        <div className="flex items-start justify-between space-x-3">
-          <div className="h-7 flex items-center">
-            <button
-              onClick={handleClose}
-              aria-label="Close panel"
-              className="hover:text-gray-500 transition ease-in-out duration-150"
-            >
-              <Cross className="h-6 w-6" />
-            </button>
-          </div>
-          <div className="space-y-1">
-            <UserNav className="" />
-          </div>
-        </div>
-      </header>
-
-      {isEmpty ? (
+      {isLoading || isEmpty ? (
         <div className="flex-1 px-4 flex flex-col justify-center items-center">
           <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
             <Bag className="absolute" />
@@ -64,7 +47,7 @@ const CartSidebarView: FC = () => {
           <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
             Your cart is empty
           </h2>
-          <p className="text-accents-3 px-10 text-center pt-2">
+          <p className="text-accent-3 px-10 text-center pt-2">
             Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
           </p>
         </div>
@@ -90,48 +73,56 @@ const CartSidebarView: FC = () => {
       ) : (
         <>
           <div className="px-4 sm:px-6 flex-1">
-            <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
-              My Cart
-            </h2>
-            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
-              {items.map((item: any) => (
+            <Link href="/cart">
+              <Text variant="sectionHeading" onClick={handleClose}>
+                My Cart
+              </Text>
+            </Link>
+            <ul className={s.lineItemsList}>
+              {data!.lineItems.map((item: any) => (
                 <CartItem
                   key={item.id}
                   item={item}
-                  currencyCode={data?.currency.code!}
+                  currencyCode={data!.currency.code}
                 />
               ))}
             </ul>
           </div>
 
-          <div className="flex-shrink-0 px-4  py-5 sm:px-6">
-            <div className="border-t border-accents-3">
-              <ul className="py-3">
-                <li className="flex justify-between py-1">
-                  <span>Subtotal</span>
-                  <span>{subTotal}</span>
-                </li>
-                <li className="flex justify-between py-1">
-                  <span>Taxes</span>
-                  <span>Calculated at checkout</span>
-                </li>
-                <li className="flex justify-between py-1">
-                  <span>Estimated Shipping</span>
-                  <span className="font-bold tracking-wide">FREE</span>
-                </li>
-              </ul>
-              <div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">
-                <span>Total</span>
-                <span>{total}</span>
-              </div>
+          <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
+            <ul className="pb-2">
+              <li className="flex justify-between py-1">
+                <span>Subtotal</span>
+                <span>{subTotal}</span>
+              </li>
+              <li className="flex justify-between py-1">
+                <span>Taxes</span>
+                <span>Calculated at checkout</span>
+              </li>
+              <li className="flex justify-between py-1">
+                <span>Shipping</span>
+                <span className="font-bold tracking-wide">FREE</span>
+              </li>
+            </ul>
+            <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
+              <span>Total</span>
+              <span>{total}</span>
+            </div>
+            <div>
+              {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? (
+                <Button Component="a" width="100%" onClick={goToCheckout}>
+                  Proceed to Checkout ({total})
+                </Button>
+              ) : (
+                <Button href="/checkout" Component="a" width="100%">
+                  Proceed to Checkout
+                </Button>
+              )}
             </div>
-            <Button href="/checkout" Component="a" width="100%">
-              Proceed to Checkout
-            </Button>
           </div>
         </>
       )}
-    </div>
+    </SidebarLayout>
   )
 }
 

components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css

@@ -0,0 +1,7 @@
+.root {
+  min-height: calc(100vh - 322px);
+}
+
+.lineItemsList {
+  @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2;
+}

components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -0,0 +1,89 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { FC } from 'react'
+import CartItem from '@components/cart/CartItem'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
+import ShippingWidget from '../ShippingWidget'
+import PaymentWidget from '../PaymentWidget'
+import SidebarLayout from '@components/common/SidebarLayout'
+import s from './CheckoutSidebarView.module.css'
+
+const CheckoutSidebarView: FC = () => {
+  const { setSidebarView } = useUI()
+  const { data } = useCart()
+
+  const { price: subTotal } = usePrice(
+    data && {
+      amount: Number(data.subtotalPrice),
+      currencyCode: data.currency.code,
+    }
+  )
+  const { price: total } = usePrice(
+    data && {
+      amount: Number(data.totalPrice),
+      currencyCode: data.currency.code,
+    }
+  )
+
+  return (
+    <SidebarLayout
+      className={s.root}
+      handleBack={() => setSidebarView('CART_VIEW')}
+    >
+      <div className="px-4 sm:px-6 flex-1">
+        <Link href="/cart">
+          <Text variant="sectionHeading">Checkout</Text>
+        </Link>
+
+        <PaymentWidget onClick={() => setSidebarView('PAYMENT_VIEW')} />
+        <ShippingWidget onClick={() => setSidebarView('SHIPPING_VIEW')} />
+
+        <ul className={s.lineItemsList}>
+          {data!.lineItems.map((item: any) => (
+            <CartItem
+              key={item.id}
+              item={item}
+              currencyCode={data!.currency.code}
+              variant="display"
+            />
+          ))}
+        </ul>
+      </div>
+
+      <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
+        <ul className="pb-2">
+          <li className="flex justify-between py-1">
+            <span>Subtotal</span>
+            <span>{subTotal}</span>
+          </li>
+          <li className="flex justify-between py-1">
+            <span>Taxes</span>
+            <span>Calculated at checkout</span>
+          </li>
+          <li className="flex justify-between py-1">
+            <span>Shipping</span>
+            <span className="font-bold tracking-wide">FREE</span>
+          </li>
+        </ul>
+        <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
+          <span>Total</span>
+          <span>{total}</span>
+        </div>
+        <div>
+          {/* Once data is correcly filled */}
+          {/* <Button Component="a" width="100%">
+                Confirm Purchase
+              </Button> */}
+          <Button Component="a" width="100%" variant="ghost" disabled>
+            Continue
+          </Button>
+        </div>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default CheckoutSidebarView

components/checkout/CheckoutSidebarView/index.ts

@@ -0,0 +1 @@
+export { default } from './CheckoutSidebarView'

components/checkout/PaymentMethodView/PaymentMethodView.module.css

@@ -0,0 +1,17 @@
+.fieldset {
+  @apply flex flex-col my-3;
+}
+
+.fieldset .label {
+  @apply text-accent-7 uppercase text-xs font-medium mb-2;
+}
+
+.fieldset .input,
+.fieldset .select {
+  @apply p-2 border border-accent-2 w-full text-sm font-normal;
+}
+
+.fieldset .input:focus,
+.fieldset .select:focus {
+  @apply outline-none shadow-outline-normal;
+}

components/checkout/PaymentMethodView/PaymentMethodView.tsx

@@ -0,0 +1,84 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import s from './PaymentMethodView.module.css'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+const PaymentMethodView: FC = () => {
+  const { setSidebarView } = useUI()
+
+  return (
+    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+      <div className="px-4 sm:px-6 flex-1">
+        <Text variant="sectionHeading"> Payment Method</Text>
+        <div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Cardholder Name</label>
+            <input className={s.input} />
+          </div>
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-7')}>
+              <label className={s.label}>Card Number</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-3')}>
+              <label className={s.label}>Expires</label>
+              <input className={s.input} placeholder="MM/YY" />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-2')}>
+              <label className={s.label}>CVC</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <hr className="border-accent-2 my-6" />
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>First Name</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Last Name</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Company (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Street and House Number</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Postal Code</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>City</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Country/Region</label>
+            <select className={s.select}>
+              <option>Hong Kong</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+        <Button Component="a" width="100%" variant="ghost">
+          Continue
+        </Button>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default PaymentMethodView

components/checkout/PaymentMethodView/index.ts

@@ -0,0 +1 @@
+export { default } from './PaymentMethodView'

components/checkout/PaymentWidget/PaymentWidget.module.css

@@ -0,0 +1,4 @@
+.root {
+  @apply border border-accent-2 px-6 py-5 mb-4 text-center
+  flex items-center cursor-pointer hover:border-accent-4;
+}

components/checkout/PaymentWidget/PaymentWidget.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import s from './PaymentWidget.module.css'
+import { ChevronRight, CreditCard } from '@components/icons'
+
+interface ComponentProps {
+  onClick?: () => any
+}
+
+const PaymentWidget: FC<ComponentProps> = ({ onClick }) => {
+  /* Shipping Address 
+  Only available with checkout set to true - 
+  This means that the provider does offer checkout functionality. */
+  return (
+    <div onClick={onClick} className={s.root}>
+      <div className="flex flex-1 items-center">
+        <CreditCard className="w-5 flex" />
+        <span className="ml-5 text-sm text-center font-medium">
+          Add Payment Method
+        </span>
+        {/* <span>VISA #### #### #### 2345</span> */}
+      </div>
+      <div>
+        <ChevronRight />
+      </div>
+    </div>
+  )
+}
+
+export default PaymentWidget

components/checkout/PaymentWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './PaymentWidget'

components/checkout/ShippingView/ShippingView.module.css

@@ -0,0 +1,21 @@
+.fieldset {
+  @apply flex flex-col my-3;
+}
+
+.fieldset .label {
+  @apply text-accent-7 uppercase text-xs font-medium mb-2;
+}
+
+.fieldset .input,
+.fieldset .select {
+  @apply p-2 border border-accent-2 w-full text-sm font-normal;
+}
+
+.fieldset .input:focus,
+.fieldset .select:focus {
+  @apply outline-none shadow-outline-normal;
+}
+
+.radio {
+  @apply bg-black;
+}

components/checkout/ShippingView/ShippingView.tsx

@@ -0,0 +1,78 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import s from './ShippingView.module.css'
+import Button from '@components/ui/Button'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+const PaymentMethodView: FC = () => {
+  const { setSidebarView } = useUI()
+
+  return (
+    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+      <div className="px-4 sm:px-6 flex-1">
+        <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
+          Shipping
+        </h2>
+        <div>
+          <div className="flex flex-row my-3 items-center">
+            <input className={s.radio} type="radio" />
+            <span className="ml-3 text-sm">Same as billing address</span>
+          </div>
+          <div className="flex flex-row my-3 items-center">
+            <input className={s.radio} type="radio" />
+            <span className="ml-3 text-sm">
+              Use a different shipping address
+            </span>
+          </div>
+          <hr className="border-accent-2 my-6" />
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>First Name</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Last Name</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Company (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Street and House Number</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Postal Code</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>City</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Country/Region</label>
+            <select className={s.select}>
+              <option>Hong Kong</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+        <Button Component="a" width="100%" variant="ghost">
+          Continue
+        </Button>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default PaymentMethodView

components/checkout/ShippingView/index.ts

@@ -0,0 +1 @@
+export { default } from './ShippingView'

components/checkout/ShippingWidget/ShippingWidget.module.css

@@ -0,0 +1,4 @@
+.root {
+  @apply border border-accent-2 px-6 py-5 mb-4 text-center
+  flex items-center cursor-pointer hover:border-accent-4;
+}

components/checkout/ShippingWidget/ShippingWidget.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import s from './ShippingWidget.module.css'
+import { ChevronRight, MapPin } from '@components/icons'
+import cn from 'classnames'
+
+interface ComponentProps {
+  onClick?: () => any
+}
+
+const ShippingWidget: FC<ComponentProps> = ({ onClick }) => {
+  /* Shipping Address 
+  Only available with checkout set to true - 
+  This means that the provider does offer checkout functionality. */
+  return (
+    <div onClick={onClick} className={s.root}>
+      <div className="flex flex-1 items-center">
+        <MapPin className="w-5 flex" />
+        <span className="ml-5 text-sm text-center font-medium">
+          Add Shipping Address
+        </span>
+        {/* <span>
+          1046 Kearny Street.<br/>
+          San Franssisco, California
+        </span> */}
+      </div>
+      <div>
+        <ChevronRight />
+      </div>
+    </div>
+  )
+}
+
+export default ShippingWidget

components/checkout/ShippingWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './ShippingWidget'

components/common/Avatar/Avatar.tsx

@@ -1,6 +1,5 @@
-import cn from 'classnames'
-import { FC, useState, useMemo, useRef, useEffect } from 'react'
-import { getRandomPairOfColors } from '@lib/colors'
+import { FC, useRef, useEffect } from 'react'
+import { useUserAvatar } from '@lib/hooks/useUserAvatar'
 
 interface Props {
   className?: string
@@ -8,19 +7,14 @@ interface Props {
 }
 
 const Avatar: FC<Props> = ({}) => {
-  const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-
-  useEffect(() => {
-    if (ref && ref.current) {
-      ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
-    }
-  }, [bg])
+  let { userAvatar } = useUserAvatar()
 
   return (
     <div
       ref={ref}
-      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
+      style={{ backgroundImage: userAvatar }}
+      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition-colors ease-linear"
     >
       {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
     </div>

components/common/Footer/Footer.module.css

@@ -1,3 +1,7 @@
+.root {
+  @apply border-t border-accent-2;
+}
+
 .link {
   & > svg {
     @apply transform duration-75 ease-linear;

components/common/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import type { Page } from '@framework/api/operations/get-all-pages'
+import type { Page } from '@commerce/types/page'
 import getSlug from '@lib/get-slug'
 import { Github, Vercel } from '@components/icons'
 import { Logo, Container } from '@components/ui'
@@ -15,79 +15,50 @@ interface Props {
   pages?: Page[]
 }
 
-const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
+const links = [
+  {
+    name: 'Home',
+    url: '/',
+  },
+]
 
 const Footer: FC<Props> = ({ className, pages }) => {
-  const { sitePages, legalPages } = usePages(pages)
-  const rootClassName = cn(className)
+  const { sitePages } = usePages(pages)
+  const rootClassName = cn(s.root, className)
 
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
-                <span className="rounded-full border border-gray-700 mr-2">
+                <span className="rounded-full border border-accent-6 mr-2">
                   <Logo />
                 </span>
                 <span>ACME</span>
               </a>
             </Link>
           </div>
-          <div className="col-span-1 lg:col-span-2">
-            <ul className="flex flex-initial flex-col md:flex-1">
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/">
-                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Home
-                  </a>
-                </Link>
-              </li>
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/about">
-                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    About
-                  </a>
-                </Link>
-              </li>
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/blog">
-                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Blog
-                  </a>
-                </Link>
-              </li>
-              {sitePages.map((page) => (
-                <li key={page.url} className="py-3 md:py-0 md:pb-4">
+          <div className="col-span-1 lg:col-span-8">
+            <div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
+              {[...links, ...sitePages].map((page) => (
+                <span key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
+                    <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
-                </li>
+                </span>
               ))}
-            </ul>
+            </div>
           </div>
-          <div className="col-span-1 lg:col-span-2">
-            <ul className="flex flex-initial flex-col md:flex-1">
-              {legalPages.map((page) => (
-                <li key={page.url} className="py-3 md:py-0 md:pb-4">
-                  <Link href={page.url!}>
-                    <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                      {page.name}
-                    </a>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
+          <div className="col-span-1 lg:col-span-2 flex items-start lg:justify-end text-primary">
             <div className="flex space-x-6 items-center h-10">
               <a
+                className={s.link}
                 aria-label="Github Repository"
                 href="https://github.com/vercel/commerce"
-                className={s.link}
               >
                 <Github />
               </a>
@@ -95,12 +66,12 @@ const Footer: FC<Props> = ({ className, pages }) => {
             </div>
           </div>
         </div>
-        <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
+        <div className="pt-6 pb-10 flex flex-col md:flex-row justify-between items-center space-y-4 text-accent-6 text-sm">
           <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
-          <div className="flex items-center text-primary">
-            <span className="text-primary">Crafted by</span>
+          <div className="flex items-center text-primary text-sm">
+            <span className="text-primary">Created by</span>
             <a
               rel="noopener"
               href="https://vercel.com"
@@ -109,7 +80,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               className="text-primary"
             >
               <Vercel
-                className="inline-block h-6 ml-4 text-primary"
+                className="inline-block h-6 ml-3 text-primary"
                 alt="Vercel.com Logo"
               />
             </a>
@@ -123,34 +94,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
 function usePages(pages?: Page[]) {
   const { locale } = useRouter()
   const sitePages: Page[] = []
-  const legalPages: Page[] = []
 
   if (pages) {
     pages.forEach((page) => {
       const slug = page.url && getSlug(page.url)
-
       if (!slug) return
       if (locale && !slug.startsWith(`${locale}/`)) return
-
-      if (isLegalPage(slug, locale)) {
-        legalPages.push(page)
-      } else {
-        sitePages.push(page)
-      }
+      sitePages.push(page)
     })
   }
 
   return {
     sitePages: sitePages.sort(bySortOrder),
-    legalPages: legalPages.sort(bySortOrder),
   }
 }
 
-const isLegalPage = (slug: string, locale?: string) =>
-  locale
-    ? LEGAL_PAGES.some((p) => `${locale}/${p}` === slug)
-    : LEGAL_PAGES.includes(slug)
-
 // Sort pages by the sort order assigned in the BC dashboard
 function bySortOrder(a: Page, b: Page) {
   return (a.sort_order ?? 0) - (b.sort_order ?? 0)

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
+import type { Product } from '@commerce/types/product'
 import { Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import s from './HomeAllProductsGrid.module.css'
@@ -8,10 +9,14 @@ import { getCategoryPath, getDesignerPath } from '@lib/search'
 interface Props {
   categories?: any
   brands?: any
-  newestProducts?: any
+  products?: Product[]
 }
 
-const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
+const HomeAllProductsGrid: FC<Props> = ({
+  categories,
+  brands,
+  products = [],
+}) => {
   return (
     <div className={s.root}>
       <div className={s.asideWrapper}>
@@ -23,7 +28,7 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
               </Link>
             </li>
             {categories.map((cat: any) => (
-              <li key={cat.path} className="py-1 text-accents-8 text-base">
+              <li key={cat.path} className="py-1 text-accent-8 text-base">
                 <Link href={getCategoryPath(cat.path)}>
                   <a>{cat.name}</a>
                 </Link>
@@ -37,7 +42,7 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
               </Link>
             </li>
             {brands.flatMap(({ node }: any) => (
-              <li key={node.path} className="py-1 text-accents-8 text-base">
+              <li key={node.path} className="py-1 text-accent-8 text-base">
                 <Link href={getDesignerPath(node.path)}>
                   <a>{node.name}</a>
                 </Link>
@@ -48,13 +53,15 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
       </div>
       <div className="flex-1">
         <Grid layout="normal">
-          {newestProducts.map(({ node }: any) => (
+          {products.map((product) => (
             <ProductCard
-              key={node.path}
-              product={node}
+              key={product.path}
+              product={product}
               variant="simple"
-              imgWidth={480}
-              imgHeight={480}
+              imgProps={{
+                width: 480,
+                height: 480,
+              }}
             />
           ))}
         </Grid>
@@ -63,4 +70,4 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
   )
 }
 
-export default Head
+export default HomeAllProductsGrid

components/common/I18nWidget/I18nWidget.module.css

@@ -3,11 +3,11 @@
 }
 
 .button {
-  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
+  @apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear;
 }
 
 .button:hover {
-  @apply border-accents-4 shadow-sm;
+  @apply border-accent-3 shadow-sm;
 }
 
 .button:focus {
@@ -18,7 +18,7 @@
   @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
 
   @screen lg {
-    @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
+    @apply absolute border border-accent-1 shadow-lg w-56 h-auto;
   }
 }
 
@@ -29,14 +29,18 @@
 }
 
 .item {
-  @apply flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
+  @apply flex cursor-pointer px-6 py-3 transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
   text-transform: capitalize;
 }
 
 .item:hover {
-  @apply bg-accents-1;
+  @apply bg-accent-1;
 }
 
 .icon {
+  transition: transform 0.2s ease;
+}
+
+.icon.active {
   transform: rotate(180deg);
 }

components/common/I18nWidget/I18nWidget.tsx

@@ -21,7 +21,7 @@ const LOCALES_MAP: Record<string, LOCALE_DATA> = {
       alt: 'Bandera Colombiana',
     },
   },
-  'en-US': {
+  'en-us': {
     name: 'English',
     img: {
       filename: 'flag-en-us.svg',
@@ -43,7 +43,7 @@ const I18nWidget: FC = () => {
   const currentLocale = locale || defaultLocale
 
   return (
-    <ClickOutside active={display} onClick={() => setDisplay(false)} >
+    <ClickOutside active={display} onClick={() => setDisplay(false)}>
       <nav className={s.root}>
         <div
           className="flex items-center relative"
@@ -59,7 +59,7 @@ const I18nWidget: FC = () => {
             />
             {options && (
               <span className="cursor-pointer">
-                <ChevronUp className={cn({ [s.icon]: display })} />
+                <ChevronUp className={cn(s.icon, { [s.active]: display })} />
               </span>
             )}
           </button>

components/common/Layout/Layout.tsx

@@ -1,18 +1,21 @@
 import cn from 'classnames'
-import dynamic from 'next/dynamic'
-import s from './Layout.module.css'
-import { useRouter } from 'next/router'
 import React, { FC } from 'react'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import { CommerceProvider } from '@framework'
 import { useUI } from '@components/ui/context'
+import type { Page } from '@commerce/types/page'
 import { Navbar, Footer } from '@components/common'
+import type { Category } from '@commerce/types/site'
+import ShippingView from '@components/checkout/ShippingView'
+import CartSidebarView from '@components/cart/CartSidebarView'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
-import { CartSidebarView } from '@components/cart'
+import PaymentMethodView from '@components/checkout/PaymentMethodView'
+import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
 
 import LoginView from '@components/auth/LoginView'
-import { CommerceProvider } from '@framework'
-import type { Page } from '@framework/api/operations/get-all-pages'
-
+import s from './Layout.module.css'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
@@ -28,10 +31,12 @@ const SignUpView = dynamic(
   () => import('@components/auth/SignUpView'),
   dynamicProps
 )
+
 const ForgotPassword = dynamic(
   () => import('@components/auth/ForgotPassword'),
   dynamicProps
 )
+
 const FeatureBar = dynamic(
   () => import('@components/common/FeatureBar'),
   dynamicProps
@@ -40,37 +45,70 @@ const FeatureBar = dynamic(
 interface Props {
   pageProps: {
     pages?: Page[]
+    categories: Category[]
   }
 }
 
-const Layout: FC<Props> = ({ children, pageProps }) => {
-  const {
-    displaySidebar,
-    displayModal,
-    closeSidebar,
-    closeModal,
-    modalView,
-  } = useUI()
+const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
+  modalView,
+  closeModal,
+}) => {
+  return (
+    <Modal onClose={closeModal}>
+      {modalView === 'LOGIN_VIEW' && <LoginView />}
+      {modalView === 'SIGNUP_VIEW' && <SignUpView />}
+      {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
+    </Modal>
+  )
+}
+
+const ModalUI: FC = () => {
+  const { displayModal, closeModal, modalView } = useUI()
+  return displayModal ? (
+    <ModalView modalView={modalView} closeModal={closeModal} />
+  ) : null
+}
+
+const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
+  sidebarView,
+  closeSidebar,
+}) => {
+  return (
+    <Sidebar onClose={closeSidebar}>
+      {sidebarView === 'CART_VIEW' && <CartSidebarView />}
+      {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
+      {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
+      {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
+    </Sidebar>
+  )
+}
+
+const SidebarUI: FC = () => {
+  const { displaySidebar, closeSidebar, sidebarView } = useUI()
+  return displaySidebar ? (
+    <SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
+  ) : null
+}
+
+const Layout: FC<Props> = ({
+  children,
+  pageProps: { categories = [], ...pageProps },
+}) => {
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
+  const navBarlinks = categories.slice(0, 2).map((c) => ({
+    label: c.name,
+    href: `/search/${c.slug}`,
+  }))
 
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
-        <Navbar />
+        <Navbar links={navBarlinks} />
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
-
-        <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView />
-        </Sidebar>
-
-        <Modal open={displayModal} onClose={closeModal}>
-          {modalView === 'LOGIN_VIEW' && <LoginView />}
-          {modalView === 'SIGNUP_VIEW' && <SignUpView />}
-          {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
-        </Modal>
-
+        <ModalUI />
+        <SidebarUI />
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}

components/common/Navbar/Navbar.module.css

@@ -2,16 +2,26 @@
   @apply sticky top-0 bg-primary z-40 transition-all duration-150;
 }
 
+.nav {
+  @apply relative flex flex-row justify-between py-4 md:py-4;
+}
+
+.navMenu {
+  @apply hidden ml-6 space-x-4 lg:block;
+}
+
 .link {
-  @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
+  @apply inline-flex items-center leading-6
+  transition ease-in-out duration-75 cursor-pointer
+  text-accent-5;
 }
 
 .link:hover {
-  @apply text-accents-9;
+  @apply text-accent-9;
 }
 
 .link:focus {
-  @apply outline-none text-accents-8;
+  @apply outline-none text-accent-8;
 }
 
 .logo {

components/common/Navbar/Navbar.tsx

@@ -1,66 +1,51 @@
-import { FC, useState, useEffect } from 'react'
+import { FC } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
+import NavbarRoot from './NavbarRoot'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
-import cn from 'classnames'
-import throttle from 'lodash.throttle'
 
-const Navbar: FC = () => {
-  const [hasScrolled, setHasScrolled] = useState(false)
-
-  useEffect(() => {
-    const handleScroll = throttle(() => {
-      const offset = 0
-      const { scrollTop } = document.documentElement
-      const scrolled = scrollTop > offset
-      setHasScrolled(scrolled)
-    }, 200)
-
-    document.addEventListener('scroll', handleScroll)
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
-
-  return (
-    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
-      <Container>
-        <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
-          <div className="flex items-center flex-1">
-            <Link href="/">
-              <a className={s.logo} aria-label="Logo">
-                <Logo />
-              </a>
-            </Link>
-            <nav className="hidden ml-6 space-x-4 lg:block">
-              <Link href="/search">
-                <a className={s.link}>All</a>
-              </Link>
-              <Link href="/search?q=clothes">
-                <a className={s.link}>Clothes</a>
-              </Link>
-              <Link href="/search?q=accessories">
-                <a className={s.link}>Accessories</a>
-              </Link>
-            </nav>
-          </div>
-
-          <div className="justify-center flex-1 hidden lg:flex">
-            <Searchbar />
-          </div>
-
-          <div className="flex justify-end flex-1 space-x-8">
-            <UserNav />
-          </div>
-        </div>
-
-        <div className="flex pb-4 lg:px-6 lg:hidden">
-          <Searchbar id="mobile-search" />
-        </div>
-      </Container>
-    </div>
-  )
+interface Link {
+  href: string
+  label: string
+}
+interface NavbarProps {
+  links?: Link[]
 }
 
+const Navbar: FC<NavbarProps> = ({ links }) => (
+  <NavbarRoot>
+    <Container>
+      <div className={s.nav}>
+        <div className="flex items-center flex-1">
+          <Link href="/">
+            <a className={s.logo} aria-label="Logo">
+              <Logo />
+            </a>
+          </Link>
+          <nav className={s.navMenu}>
+            <Link href="/search">
+              <a className={s.link}>All</a>
+            </Link>
+            {links?.map((l) => (
+              <Link href={l.href} key={l.href}>
+                <a className={s.link}>{l.label}</a>
+              </Link>
+            ))}
+          </nav>
+        </div>
+        <div className="justify-center flex-1 hidden lg:flex">
+          <Searchbar />
+        </div>
+        <div className="flex items-center justify-end flex-1 space-x-8">
+          <UserNav />
+        </div>
+      </div>
+      <div className="flex pb-4 lg:px-6 lg:hidden">
+        <Searchbar id="mobile-search" />
+      </div>
+    </Container>
+  </NavbarRoot>
+)
+
 export default Navbar

components/common/Navbar/NavbarRoot.tsx

@@ -0,0 +1,33 @@
+import { FC, useState, useEffect } from 'react'
+import throttle from 'lodash.throttle'
+import cn from 'classnames'
+import s from './Navbar.module.css'
+
+const NavbarRoot: FC = ({ children }) => {
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = throttle(() => {
+      const offset = 0
+      const { scrollTop } = document.documentElement
+      const scrolled = scrollTop > offset
+
+      if (hasScrolled !== scrolled) {
+        setHasScrolled(scrolled)
+      }
+    }, 200)
+
+    document.addEventListener('scroll', handleScroll)
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [hasScrolled])
+
+  return (
+    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
+      {children}
+    </div>
+  )
+}
+
+export default NavbarRoot

components/common/Searchbar/Searchbar.module.css

@@ -1,13 +1,17 @@
+.root {
+  @apply relative text-sm bg-accent-0 text-base w-full transition-colors duration-150 border border-accent-2;
+}
+
 .input {
   @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
+}
 
-  @screen sm {
-    min-width: 300px;
-  }
+.input::placeholder {
+  @apply text-accent-3;
 }
 
 .input:focus {
-  @apply outline-none shadow-outline-2;
+  @apply outline-none shadow-outline-normal;
 }
 
 .iconContainer {
@@ -17,3 +21,9 @@
 .icon {
   @apply h-5 w-5;
 }
+
+@screen sm {
+  .input {
+    min-width: 300px;
+  }
+}

components/common/Searchbar/Searchbar.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo } from 'react'
+import { FC, InputHTMLAttributes, useEffect, useMemo } from 'react'
 import cn from 'classnames'
 import s from './Searchbar.module.css'
 import { useRouter } from 'next/router'
@@ -15,14 +15,26 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
     router.prefetch('/search')
   }, [])
 
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.preventDefault()
+
+    if (e.key === 'Enter') {
+      const q = e.currentTarget.value
+
+      router.push(
+        {
+          pathname: `/search`,
+          query: q ? { q } : {},
+        },
+        undefined,
+        { shallow: true }
+      )
+    }
+  }
+
   return useMemo(
     () => (
-      <div
-        className={cn(
-          'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
-          className
-        )}
-      >
+      <div className={cn(s.root, className)}>
         <label className="hidden" htmlFor={id}>
           Search
         </label>
@@ -31,22 +43,7 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
           className={s.input}
           placeholder="Search for products..."
           defaultValue={router.query.q}
-          onKeyUp={(e) => {
-            e.preventDefault()
-
-            if (e.key === 'Enter') {
-              const q = e.currentTarget.value
-
-              router.push(
-                {
-                  pathname: `/search`,
-                  query: q ? { q } : {},
-                },
-                undefined,
-                { shallow: true }
-              )
-            }
-          }}
+          onKeyUp={handleKeyUp}
         />
         <div className={s.iconContainer}>
           <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">

components/common/SidebarLayout/SidebarLayout.module.css

@@ -0,0 +1,20 @@
+.root {
+  @apply relative h-full flex flex-col;
+}
+
+.header {
+  @apply sticky top-0 pl-4 py-4 pr-6
+  flex items-center justify-between 
+  bg-accent-0 box-border w-full z-10;
+  min-height: 66px;
+}
+
+.container {
+  @apply flex flex-col flex-1 box-border;
+}
+
+@screen lg {
+  .header {
+    min-height: 74px;
+  }
+}

components/common/SidebarLayout/SidebarLayout.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react'
+import { Cross, ChevronLeft } from '@components/icons'
+import { UserNav } from '@components/common'
+import cn from 'classnames'
+import s from './SidebarLayout.module.css'
+
+type ComponentProps = { className?: string } & (
+  | { handleClose: () => any; handleBack?: never }
+  | { handleBack: () => any; handleClose?: never }
+)
+
+const SidebarLayout: FC<ComponentProps> = ({
+  children,
+  className,
+  handleClose,
+  handleBack,
+}) => {
+  return (
+    <div className={cn(s.root, className)}>
+      <header className={s.header}>
+        {handleClose && (
+          <button
+            onClick={handleClose}
+            aria-label="Close"
+            className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
+          >
+            <Cross className="h-6 w-6 hover:text-accent-3" />
+            <span className="ml-2 text-accent-7 text-sm ">Close</span>
+          </button>
+        )}
+        {handleBack && (
+          <button
+            onClick={handleBack}
+            aria-label="Go back"
+            className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
+          >
+            <ChevronLeft className="h-6 w-6 hover:text-accent-3" />
+            <span className="ml-2 text-accent-7 text-xs">Back</span>
+          </button>
+        )}
+        <span className={s.nav}>
+          <UserNav />
+        </span>
+      </header>
+      <div className={s.container}>{children}</div>
+    </div>
+  )
+}
+
+export default SidebarLayout

components/common/SidebarLayout/index.ts

@@ -0,0 +1 @@
+export { default } from './SidebarLayout'

components/common/UserNav/DropdownMenu.module.css

@@ -2,7 +2,7 @@
   @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
 
   @screen lg {
-    @apply absolute top-10 border border-accents-1 shadow-lg w-56 h-auto;
+    @apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto;
   }
 }
 
@@ -12,11 +12,11 @@
 }
 
 .link:hover {
-  @apply bg-accents-1;
+  @apply bg-accent-1;
 }
 
 .link.active {
-  @apply font-bold bg-accents-2;
+  @apply font-bold bg-accent-2;
 }
 
 .off {

components/common/UserNav/DropdownMenu.tsx

@@ -8,6 +8,7 @@ import { Avatar } from '@components/common'
 import { Moon, Sun } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import ClickOutside from '@lib/click-outside'
+import useLogout from '@framework/auth/use-logout'
 
 import {
   disableBodyScroll,
@@ -15,8 +16,6 @@ import {
   clearAllBodyScrollLocks,
 } from 'body-scroll-lock'
 
-import useLogout from '@framework/use-logout'
-
 interface DropdownMenuProps {
   open?: boolean
 }
@@ -110,7 +109,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
             </li>
             <li>
               <a
-                className={cn(s.link, 'border-t border-accents-2 mt-4')}
+                className={cn(s.link, 'border-t border-accent-2 mt-4')}
                 onClick={() => logout()}
               >
                 Logout

components/common/UserNav/UserNav.module.css

@@ -10,7 +10,7 @@
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
 
   &:hover {
-    @apply text-accents-6 transition scale-110 duration-100;
+    @apply text-accent-6 transition scale-110 duration-100;
   }
 
   &:last-child {
@@ -24,7 +24,11 @@
 }
 
 .bagCount {
-  @apply border border-accents-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
+  @apply border border-accent-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
+  padding-left: 2.5px;
+  padding-right: 2.5px;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .avatarButton {

components/common/UserNav/UserNav.tsx

@@ -1,36 +1,35 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import cn from 'classnames'
+import type { LineItem } from '@commerce/types/cart'
 import useCart from '@framework/cart/use-cart'
-import useCustomer from '@framework/use-customer'
+import useCustomer from '@framework/customer/use-customer'
+import { Avatar } from '@components/common'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
-import { Avatar } from '@components/common'
 
 interface Props {
   className?: string
 }
 
-const countItem = (count: number, item: any) => count + item.quantity
-const countItems = (count: number, items: any[]) =>
-  items.reduce(countItem, count)
+const countItem = (count: number, item: LineItem) => count + item.quantity
 
-const UserNav: FC<Props> = ({ className, children, ...props }) => {
+const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
   const { data: customer } = useCustomer()
   const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
-  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
+  const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
 
   return (
     <nav className={cn(s.root, className)}>
-      <div className={s.mainContainer}>
-        <ul className={s.list}>
-          <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
-          </li>
+      <ul className={s.list}>
+        <li className={s.item} onClick={toggleSidebar}>
+          <Bag />
+          {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+        </li>
+        {process.env.COMMERCE_WISHLIST_ENABLED && (
           <li className={s.item}>
             <Link href="/wishlist">
               <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
@@ -38,6 +37,8 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
               </a>
             </Link>
           </li>
+        )}
+        {process.env.COMMERCE_CUSTOMER_ENABLED && (
           <li className={s.item}>
             {customer ? (
               <DropdownMenu />
@@ -51,8 +52,8 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
               </button>
             )}
           </li>
-        </ul>
-      </div>
+        )}
+      </ul>
     </nav>
   )
 }

components/icons/ArrowRight.tsx

@@ -1,23 +1,22 @@
-const RightArrow = ({ ...props }) => {
+const ArrowRight = ({ ...props }) => {
   return (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
       fill="none"
+      stroke="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M5 12H19"
-        stroke="white"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M12 5L19 12L12 19"
-        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -26,4 +25,4 @@ const RightArrow = ({ ...props }) => {
   )
 }
 
-export default RightArrow
+export default ArrowRight

components/icons/ChevronDown.tsx

@@ -0,0 +1,20 @@
+const ChevronDown = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  )
+}
+
+export default ChevronDown

components/icons/ChevronLeft.tsx

@@ -0,0 +1,20 @@
+const ChevronLeft = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M15 18l-6-6 6-6" />
+    </svg>
+  )
+}
+
+export default ChevronLeft

components/icons/ChevronRight.tsx

@@ -0,0 +1,20 @@
+const ChevronUp = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  )
+}
+
+export default ChevronUp

components/icons/CreditCard.tsx

@@ -0,0 +1,21 @@
+const CreditCard = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+      {...props}
+    >
+      <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+      <path d="M1 10h22" />
+    </svg>
+  )
+}
+
+export default CreditCard

components/icons/MapPin.tsx

@@ -0,0 +1,20 @@
+const MapPin = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  )
+}
+
+export default MapPin

components/icons/Star.tsx

@@ -0,0 +1,16 @@
+const Star = ({ ...props }) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12.43 8L10 0L7.57 8H0L6.18 12.41L3.83 20L10 15.31L16.18 20L13.83 12.41L20 8H12.43Z" />
+    </svg>
+  )
+}
+
+export default Star

components/icons/Vercel.tsx

@@ -1,15 +1,39 @@
 const Vercel = ({ ...props }) => {
-    return (
-  <svg width="89" height="20" viewBox="0 0 89 20" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
-      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor"/>
-      <path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" fill="currentColor"/>
-      <path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" fill="currentColor"/>
-      <path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" fill="currentColor"/>
-      <path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" fill="currentColor"/>
-      <path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" fill="currentColor"/>
-      <path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" fill="currentColor"/>
-  </svg>
-
+  return (
+    <svg
+      width="89"
+      height="20"
+      viewBox="0 0 89 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor" />
+      <path
+        d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z"
+        fill="currentColor"
+      />
+      <path
+        d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z"
+        fill="currentColor"
+      />
+      <path
+        d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z"
+        fill="currentColor"
+      />
+      <path
+        d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z"
+        fill="currentColor"
+      />
+    </svg>
   )
 }
 

components/icons/index.ts

@@ -2,15 +2,21 @@ export { default as Bag } from './Bag'
 export { default as Heart } from './Heart'
 export { default as Trash } from './Trash'
 export { default as Cross } from './Cross'
-export { default as ArrowLeft } from './ArrowLeft'
 export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
 export { default as Check } from './Check'
 export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
 export { default as Github } from './Github'
-export { default as DoubleChevron } from './DoubleChevron'
-export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
-export { default as ChevronUp } from './ChevronUp'
 export { default as Vercel } from './Vercel'
+export { default as MapPin } from './MapPin'
+export { default as Star } from './Star'
+export { default as ArrowLeft } from './ArrowLeft'
+export { default as ArrowRight } from './ArrowRight'
+export { default as CreditCard } from './CreditCard'
+export { default as ChevronUp } from './ChevronUp'
+export { default as ChevronLeft } from './ChevronLeft'
+export { default as ChevronDown } from './ChevronDown'
+export { default as ChevronRight } from './ChevronRight'
+export { default as DoubleChevron } from './DoubleChevron'

components/product/ProductCard/ProductCard.module.css

@@ -1,136 +1,114 @@
 .root {
   @apply relative max-h-full w-full box-border overflow-hidden
   bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer;
+  ease-linear cursor-pointer inline-block bg-accent-1;
   height: 100% !important;
+}
 
-  &:hover {
-    & .squareBg:before {
-      transform: scale(0.98);
-    }
-
-    & .productImage {
-      transform: scale(1.2625);
-    }
-
-    & .productTitle > span,
-    & .productPrice,
-    & .wishlistButton {
-      @apply bg-secondary text-secondary;
-    }
-
-    &:nth-child(6n + 1) .productTitle > span,
-    &:nth-child(6n + 1) .productPrice,
-    &:nth-child(6n + 1) .wishlistButton {
-      @apply bg-violet text-white;
-    }
-
-    &:nth-child(6n + 5) .productTitle > span,
-    &:nth-child(6n + 5) .productPrice,
-    &:nth-child(6n + 5) .wishlistButton {
-      @apply bg-blue text-white;
-    }
-
-    &:nth-child(6n + 3) .productTitle > span,
-    &:nth-child(6n + 3) .productPrice,
-    &:nth-child(6n + 3) .wishlistButton {
-      @apply bg-pink text-white;
-    }
-
-    &:nth-child(6n + 6) .productTitle > span,
-    &:nth-child(6n + 6) .productPrice,
-    &:nth-child(6n + 6) .wishlistButton {
-      @apply bg-cyan text-white;
-    }
+.root:hover {
+  & .productImage {
+    transform: scale(1.2625);
   }
 
-  &:nth-child(6n + 1) .squareBg {
-    @apply bg-violet;
+  & .header .name span,
+  & .header .price,
+  & .wishlistButton {
+    @apply bg-secondary text-secondary;
   }
 
-  &:nth-child(6n + 5) .squareBg {
-    @apply bg-blue;
+  &:nth-child(6n + 1) .header .name span,
+  &:nth-child(6n + 1) .header .price,
+  &:nth-child(6n + 1) .wishlistButton {
+    @apply bg-violet text-white;
   }
 
-  &:nth-child(6n + 3) .squareBg {
-    @apply bg-pink;
+  &:nth-child(6n + 5) .header .name span,
+  &:nth-child(6n + 5) .header .price,
+  &:nth-child(6n + 5) .wishlistButton {
+    @apply bg-blue text-white;
   }
 
-  &:nth-child(6n + 6) .squareBg {
-    @apply bg-cyan;
+  &:nth-child(6n + 3) .header .name span,
+  &:nth-child(6n + 3) .header .price,
+  &:nth-child(6n + 3) .wishlistButton {
+    @apply bg-pink text-white;
+  }
+
+  &:nth-child(6n + 6) .header .name span,
+  &:nth-child(6n + 6) .header .price,
+  &:nth-child(6n + 6) .wishlistButton {
+    @apply bg-cyan text-white;
   }
 }
 
-.squareBg,
-.productTitle > span,
-.productPrice,
-.wishlistButton {
-  @apply transition-colors ease-in-out duration-500;
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
 }
 
-.squareBg {
-  @apply transition-colors absolute inset-0 z-0;
-  background-color: #212529;
-}
-
-.squareBg:before {
-  @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
-  background-image: url('/bg-products.svg');
-  content: '';
-}
-
-.simple {
-  & .squareBg {
-    @apply bg-accents-0 !important;
-    background-image: url('/bg-products.svg');
-  }
-
-  & .productTitle {
-    @apply pt-2;
-    font-size: 1rem;
-
-    & span {
-      @apply leading-extra-loose;
-    }
-  }
-
-  & .productPrice {
-    @apply text-sm;
-  }
-}
-
-.productTitle {
-  @apply pt-0 max-w-full w-full leading-extra-loose;
+.header .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose
+  transition-colors ease-in-out duration-500;
   font-size: 2rem;
   letter-spacing: 0.4px;
-
-  & span {
-    @apply py-4 px-6 bg-primary text-primary font-bold;
-    font-size: inherit;
-    letter-spacing: inherit;
-    box-decoration-break: clone;
-    -webkit-box-decoration-break: clone;
-  }
 }
 
-.productPrice {
-  @apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
-  letter-spacing: 0.4px;
+.header .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold
+  transition-colors ease-in-out duration-500;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
 }
 
-.wishlistButton {
-  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide
+  transition-colors ease-in-out duration-500;
 }
 
 .imageContainer {
-  @apply flex items-center justify-center;
-  overflow: hidden;
-
-  & > div {
-    min-width: 100%;
-  }
+  @apply flex items-center justify-center overflow-hidden;
 }
 
-.productImage {
-  @apply transform transition-transform duration-500 object-cover scale-120;
+.imageContainer > div {
+  min-width: 100%;
+}
+
+.imageContainer .productImage {
+  @apply transform transition-transform duration-500
+  object-cover scale-120;
+}
+
+.root .wishlistButton {
+  @apply top-0 right-0 z-30 absolute;
+}
+
+/* Variant Simple */
+.simple .header .name {
+  @apply pt-2 text-lg leading-10 -mt-1;
+}
+
+.simple .header .price {
+  @apply text-sm;
+}
+
+/* Variant Slim */
+.slim {
+  @apply bg-transparent relative overflow-hidden
+  box-border;
+}
+
+.slim .header {
+  @apply absolute inset-0 flex items-center justify-end mr-8 z-20;
+}
+
+.slim span {
+  @apply bg-accent-9 text-accent-0 inline-block p-3
+  font-bold text-xl break-words;
+}
+
+.root:global(.secondary) .header span {
+  @apply bg-accent-0 text-accent-9;
 }

components/product/ProductCard/ProductCard.tsx

@@ -1,96 +1,126 @@
+import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import Image from 'next/image'
-import type { FC } from 'react'
+import type { Product } from '@commerce/types/product'
 import s from './ProductCard.module.css'
+import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
-
-import usePrice from '@framework/use-price'
-import type { ProductNode } from '@framework/api/operations/get-all-products'
-
+import usePrice from '@framework/product/use-price'
+import ProductTag from '../ProductTag'
 interface Props {
   className?: string
-  product: ProductNode
-  variant?: 'slim' | 'simple'
-  imgWidth: number | string
-  imgHeight: number | string
-  imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
-  imgPriority?: boolean
-  imgLoading?: 'eager' | 'lazy'
-  imgSizes?: string
+  product: Product
+  noNameTag?: boolean
+  imgProps?: Omit<ImageProps, 'src'>
+  variant?: 'default' | 'slim' | 'simple'
 }
 
+const placeholderImg = '/product-img-placeholder.svg'
+
 const ProductCard: FC<Props> = ({
+  product,
+  imgProps,
   className,
-  product: p,
-  variant,
-  imgWidth,
-  imgHeight,
-  imgPriority,
-  imgLoading,
-  imgSizes,
-  imgLayout = 'responsive',
+  noNameTag = false,
+  variant = 'default',
+  ...props
 }) => {
-  const src = p.images.edges?.[0]?.node?.urlOriginal!
   const { price } = usePrice({
-    amount: p.prices?.price?.value,
-    baseAmount: p.prices?.retailPrice?.value,
-    currencyCode: p.prices?.price?.currencyCode!,
+    amount: product.price.value,
+    baseAmount: product.price.retailPrice,
+    currencyCode: product.price.currencyCode!,
   })
 
+  const rootClassName = cn(
+    s.root,
+    { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
+    className
+  )
+
   return (
-    <Link href={`/product${p.path}`}>
-      <a
-        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
-      >
-        {variant === 'slim' ? (
-          <div className="relative overflow-hidden box-border">
-            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
-                {p.name}
-              </span>
-            </div>
-            <Image
-              quality="85"
-              width={imgWidth}
-              sizes={imgSizes}
-              height={imgHeight}
-              layout={imgLayout}
-              loading={imgLoading}
-              priority={imgPriority}
-              src={p.images.edges?.[0]?.node.urlOriginal!}
-              alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
-            />
-          </div>
-        ) : (
+    <Link href={`/product/${product.slug}`} {...props}>
+      <a className={rootClassName}>
+        {variant === 'slim' && (
           <>
-            <div className={s.squareBg} />
-            <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-              <div className="absolute top-0 left-0 pr-16 max-w-full">
-                <h3 className={s.productTitle}>
-                  <span>{p.name}</span>
-                </h3>
-                <span className={s.productPrice}>{price}</span>
-              </div>
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={p.entityId}
-                variant={p.variants.edges?.[0]!}
-              />
+            <div className={s.header}>
+              <span>{product.name}</span>
             </div>
-            <div className={s.imageContainer}>
+            {product?.images && (
               <Image
                 quality="85"
-                src={src}
-                alt={p.name}
-                className={s.productImage}
-                width={imgWidth}
-                sizes={imgSizes}
-                height={imgHeight}
-                layout={imgLayout}
-                loading={imgLoading}
-                priority={imgPriority}
+                src={product.images[0]?.url || placeholderImg}
+                alt={product.name || 'Product Image'}
+                height={320}
+                width={320}
+                layout="fixed"
+                {...imgProps}
               />
+            )}
+          </>
+        )}
+
+        {variant === 'simple' && (
+          <>
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={product.id}
+                variant={product.variants[0]}
+              />
+            )}
+            {!noNameTag && (
+              <div className={s.header}>
+                <h3 className={s.name}>
+                  <span>{product.name}</span>
+                </h3>
+                <div className={s.price}>
+                  {`${price} ${product.price?.currencyCode}`}
+                </div>
+              </div>
+            )}
+            <div className={s.imageContainer}>
+              {product?.images && (
+                <Image
+                  alt={product.name || 'Product Image'}
+                  className={s.productImage}
+                  src={product.images[0].url || placeholderImg}
+                  height={540}
+                  width={540}
+                  quality="85"
+                  layout="responsive"
+                  {...imgProps}
+                />
+              )}
+            </div>
+          </>
+        )}
+
+        {variant === 'default' && (
+          <>
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={product.id}
+                variant={product.variants[0] as any}
+              />
+            )}
+            <ProductTag
+              name={product.name}
+              price={`${price} ${product.price?.currencyCode}`}
+            />
+            <div className={s.imageContainer}>
+              {product?.images && (
+                <Image
+                  alt={product.name || 'Product Image'}
+                  className={s.productImage}
+                  src={product.images[0]?.url || placeholderImg}
+                  height={540}
+                  width={540}
+                  quality="85"
+                  layout="responsive"
+                  {...imgProps}
+                />
+              )}
             </div>
           </>
         )}

components/product/ProductOptions/ProductOptions.tsx

@@ -0,0 +1,50 @@
+import { Swatch } from '@components/product'
+import type { ProductOption } from '@commerce/types/product'
+import { SelectedOptions } from '../helpers'
+import React from 'react'
+interface ProductOptionsProps {
+  options: ProductOption[]
+  selectedOptions: SelectedOptions
+  setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedOptions>>
+}
+
+const ProductOptions: React.FC<ProductOptionsProps> = React.memo(
+  ({ options, selectedOptions, setSelectedOptions }) => {
+    return (
+      <div>
+        {options.map((opt) => (
+          <div className="pb-4" key={opt.displayName}>
+            <h2 className="uppercase font-medium text-sm tracking-wide">
+              {opt.displayName}
+            </h2>
+            <div className="flex flex-row py-4">
+              {opt.values.map((v, i: number) => {
+                const active = selectedOptions[opt.displayName.toLowerCase()]
+                return (
+                  <Swatch
+                    key={`${opt.id}-${i}`}
+                    active={v.label.toLowerCase() === active}
+                    variant={opt.displayName}
+                    color={v.hexColors ? v.hexColors[0] : ''}
+                    label={v.label}
+                    onClick={() => {
+                      setSelectedOptions((selectedOptions) => {
+                        return {
+                          ...selectedOptions,
+                          [opt.displayName.toLowerCase()]:
+                            v.label.toLowerCase(),
+                        }
+                      })
+                    }}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+)
+
+export default ProductOptions

components/product/ProductOptions/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductOptions'

components/product/ProductSidebar/ProductSidebar.module.css

@@ -0,0 +1,84 @@
+.root {
+  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
+  min-height: auto;
+}
+
+.main {
+  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
+  min-height: 500px;
+}
+
+.header {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
+}
+
+.header .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
+}
+
+.header .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.header .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
+}
+
+.sidebar {
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
+}
+
+.sliderContainer {
+  @apply flex items-center justify-center overflow-x-hidden bg-violet;
+}
+
+.imageContainer {
+  @apply text-center;
+}
+
+.imageContainer > div,
+.imageContainer > div > div {
+  @apply h-full;
+}
+
+.sliderContainer .img {
+  @apply w-full h-auto max-h-full object-cover;
+}
+
+.button {
+  width: 100%;
+}
+
+.wishlistButton {
+  @apply absolute z-30 top-0 right-0;
+}
+
+.relatedProductsGrid {
+  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
+}
+
+@screen lg {
+  .root {
+    @apply grid-cols-12;
+  }
+
+  .main {
+    @apply mx-0 col-span-8;
+  }
+
+  .sidebar {
+    @apply col-span-4 py-6;
+  }
+
+  .imageContainer {
+    max-height: 600px;
+  }
+}

components/product/ProductSidebar/ProductSidebar.tsx

@@ -0,0 +1,87 @@
+import s from './ProductSidebar.module.css'
+import { useAddItem } from '@framework/cart'
+import { FC, useEffect, useState } from 'react'
+import { ProductOptions } from '@components/product'
+import type { Product } from '@commerce/types/product'
+import { Button, Text, Rating, Collapse, useUI } from '@components/ui'
+import {
+  getProductVariant,
+  selectDefaultOptionFromProduct,
+  SelectedOptions,
+} from '../helpers'
+
+interface ProductSidebarProps {
+  product: Product
+  className?: string
+}
+
+const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
+  const addItem = useAddItem()
+  const { openSidebar } = useUI()
+  const [loading, setLoading] = useState(false)
+  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
+
+  useEffect(() => {
+    selectDefaultOptionFromProduct(product, setSelectedOptions)
+  }, [])
+
+  const variant = getProductVariant(product, selectedOptions)
+  const addToCart = async () => {
+    setLoading(true)
+    try {
+      await addItem({
+        productId: String(product.id),
+        variantId: String(variant ? variant.id : product.variants[0].id),
+      })
+      openSidebar()
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className={className}>
+      <ProductOptions
+        options={product.options}
+        selectedOptions={selectedOptions}
+        setSelectedOptions={setSelectedOptions}
+      />
+      <Text
+        className="pb-4 break-words w-full max-w-xl"
+        html={product.descriptionHtml || product.description}
+      />
+      <div className="flex flex-row justify-between items-center">
+        <Rating value={4} />
+        <div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
+      </div>
+      <div>
+        <Button
+          aria-label="Add to Cart"
+          type="button"
+          className={s.button}
+          onClick={addToCart}
+          loading={loading}
+          disabled={variant?.availableForSale === false}
+        >
+          {variant?.availableForSale === false
+            ? 'Not Available'
+            : 'Add To Cart'}
+        </Button>
+      </div>
+      <div className="mt-6">
+        <Collapse title="Care">
+          This is a limited edition production run. Printing starts when the
+          drop ends.
+        </Collapse>
+        <Collapse title="Details">
+          This is a limited edition production run. Printing starts when the
+          drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days due
+          to COVID-19.
+        </Collapse>
+      </div>
+    </div>
+  )
+}
+
+export default ProductSidebar

components/product/ProductSidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductSidebar'

components/product/ProductSlider/ProductSlider.module.css

@@ -1,82 +1,64 @@
 .root {
-  @apply relative w-full h-full;
+  @apply relative w-full h-full select-none;
+  overflow: hidden;
+}
+
+.slider {
+  @apply relative h-full transition-opacity duration-150;
+  opacity: 0;
+}
+
+.slider.show {
+  opacity: 1;
+}
+
+.thumb {
+  @apply transition-transform transition-colors
+  ease-linear duration-75 overflow-hidden inline-block
+  cursor-pointer h-full;
+  width: 125px;
+  width: calc(100% / 3);
+}
+
+.thumb.selected {
+  @apply bg-white;
+}
+
+.thumb img {
+  height: 85% !important;
+}
+
+.album {
+  width: 100%;
+  height: 100%;
+  @apply bg-violet-dark;
+  box-sizing: content-box;
   overflow-y: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+  height: 125px;
+  scrollbar-width: none;
 }
 
-.leftControl,
-.rightControl {
-  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
+/* Hide scrollbar for Chrome, Safari and Opera */
+.album::-webkit-scrollbar {
+  display: none;
 }
 
-.leftControl:hover,
-.rightControl:hover {
-  @apply bg-hover-2;
-}
+@screen md {
+  .thumb:hover {
+    transform: scale(1.02);
+    background-color: rgba(255, 255, 255, 0.08);
+  }
 
-.leftControl:hover,
-.rightControl:hover {
-  @apply outline-none shadow-outline-blue;
-}
+  .thumb.selected {
+    @apply bg-white;
+  }
 
-.leftControl {
-  @apply bg-cover left-10;
-  background-image: url('public/cursor-left.png');
-
-  @screen md {
-    @apply left-6;
+  .album {
+    height: 182px;
+  }
+  .thumb {
+    width: 235px;
   }
 }
-
-.rightControl {
-  @apply bg-cover right-10;
-  background-image: url('public/cursor-right.png');
-
-  @screen md {
-    @apply right-6;
-  }
-}
-
-.control {
-  @apply opacity-0 transition duration-150;
-}
-
-.root:hover .control {
-  @apply opacity-100;
-}
-
-.positionIndicatorsContainer {
-  @apply hidden;
-
-  @screen sm {
-    @apply block absolute bottom-6 left-1/2;
-    transform: translateX(-50%);
-  }
-}
-
-.positionIndicator {
-  @apply rounded-full p-2;
-}
-
-.dot {
-  @apply bg-hover-1 transition w-3 h-3 rounded-full;
-}
-
-.positionIndicator:hover .dot {
-  @apply bg-hover-2;
-}
-
-.positionIndicator:focus {
-  @apply outline-none;
-}
-
-.positionIndicator:focus .dot {
-  @apply shadow-outline-blue;
-}
-
-.positionIndicatorActive .dot {
-  @apply bg-white;
-}
-
-.positionIndicatorActive:hover .dot {
-  @apply bg-white;
-}

components/product/ProductSlider/ProductSlider.tsx

@@ -1,20 +1,49 @@
 import { useKeenSlider } from 'keen-slider/react'
-import React, { Children, FC, isValidElement, useState, useRef, useEffect } from 'react'
+import React, {
+  Children,
+  FC,
+  isValidElement,
+  useState,
+  useRef,
+  useEffect,
+} from 'react'
 import cn from 'classnames'
-
+import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
+import ProductSliderControl from '../ProductSliderControl'
 
-const ProductSlider: FC = ({ children }) => {
+interface ProductSliderProps {
+  children: React.ReactNode[]
+  className?: string
+}
+
+const ProductSlider: React.FC<ProductSliderProps> = ({
+  children,
+  className = '',
+}) => {
   const [currentSlide, setCurrentSlide] = useState(0)
   const [isMounted, setIsMounted] = useState(false)
   const sliderContainerRef = useRef<HTMLDivElement>(null)
+  const thumbsContainerRef = useRef<HTMLDivElement>(null)
 
   const [ref, slider] = useKeenSlider<HTMLDivElement>({
     loop: true,
     slidesPerView: 1,
     mounted: () => setIsMounted(true),
     slideChanged(s) {
-      setCurrentSlide(s.details().relativeSlide)
+      const slideNumber = s.details().relativeSlide
+      setCurrentSlide(slideNumber)
+
+      if (thumbsContainerRef.current) {
+        const $el = document.getElementById(
+          `thumb-${s.details().relativeSlide}`
+        )
+        if (slideNumber >= 3) {
+          thumbsContainerRef.current.scrollLeft = $el!.offsetLeft
+        } else {
+          thumbsContainerRef.current.scrollLeft = 0
+        }
+      }
     },
   })
 
@@ -33,35 +62,35 @@ const ProductSlider: FC = ({ children }) => {
       if (
         touchXPosition - touchXRadius < 10 ||
         touchXPosition + touchXRadius > window.innerWidth - 10
-      ) event.preventDefault()
+      )
+        event.preventDefault()
     }
 
-    sliderContainerRef.current!
-      .addEventListener('touchstart', preventNavigation)
+    sliderContainerRef.current!.addEventListener(
+      'touchstart',
+      preventNavigation
+    )
 
     return () => {
-      sliderContainerRef.current!
-      .removeEventListener('touchstart', preventNavigation)
+      if (sliderContainerRef.current) {
+        sliderContainerRef.current!.removeEventListener(
+          'touchstart',
+          preventNavigation
+        )
+      }
     }
   }, [])
 
+  const onPrev = React.useCallback(() => slider.prev(), [slider])
+  const onNext = React.useCallback(() => slider.next(), [slider])
+
   return (
-    <div className={s.root} ref={sliderContainerRef}>
-      <button
-        className={cn(s.leftControl, s.control)}
-        onClick={slider?.prev}
-        aria-label="Previous Product Image"
-      />
-      <button
-        className={cn(s.rightControl, s.control)}
-        onClick={slider?.next}
-        aria-label="Next Product Image"
-      />
+    <div className={cn(s.root, className)} ref={sliderContainerRef}>
       <div
         ref={ref}
-        className="keen-slider h-full transition-opacity duration-150"
-        style={{ opacity: isMounted ? 1 : 0 }}
+        className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
       >
+        {slider && <ProductSliderControl onPrev={onPrev} onNext={onNext} />}
         {Children.map(children, (child) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {
@@ -78,26 +107,28 @@ const ProductSlider: FC = ({ children }) => {
           return child
         })}
       </div>
-      {slider && (
-        <div className={cn(s.positionIndicatorsContainer)}>
-          {[...Array(slider.details().size).keys()].map((idx) => {
-            return (
-              <button
-                aria-label="Position indicator"
-                key={idx}
-                className={cn(s.positionIndicator, {
-                  [s.positionIndicatorActive]: currentSlide === idx,
-                })}
-                onClick={() => {
-                  slider.moveToSlideRelative(idx)
-                }}
-              >
-                <div className={s.dot} />
-              </button>
-            )
+
+      <a.div className={s.album} ref={thumbsContainerRef}>
+        {slider &&
+          Children.map(children, (child, idx) => {
+            if (isValidElement(child)) {
+              return {
+                ...child,
+                props: {
+                  ...child.props,
+                  className: cn(child.props.className, s.thumb, {
+                    [s.selected]: currentSlide === idx,
+                  }),
+                  id: `thumb-${idx}`,
+                  onClick: () => {
+                    slider.moveToSlideRelative(idx)
+                  },
+                },
+              }
+            }
+            return child
           })}
-        </div>
-      )}
+      </a.div>
     </div>
   )
 }

components/product/ProductSliderControl/ProductSliderControl.module.css

@@ -0,0 +1,29 @@
+.control {
+  @apply bg-violet absolute bottom-10 right-10 flex flex-row
+  border-accent-0 border text-accent-0 z-30 shadow-xl select-none;
+  height: 48px;
+}
+
+.leftControl,
+.rightControl {
+  @apply px-9 cursor-pointer;
+  transition: background-color 0.2s ease;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  background-color: var(--violet-dark);
+}
+
+.leftControl:focus,
+.rightControl:focus {
+  @apply outline-none;
+}
+
+.rightControl {
+  @apply border-l border-accent-0;
+}
+
+.leftControl {
+  margin-right: -1px;
+}

components/product/ProductSliderControl/ProductSliderControl.tsx

@@ -0,0 +1,31 @@
+import cn from 'classnames'
+import React from 'react'
+import s from './ProductSliderControl.module.css'
+import { ArrowLeft, ArrowRight } from '@components/icons'
+
+interface ProductSliderControl {
+  onPrev: React.MouseEventHandler<HTMLButtonElement>
+  onNext: React.MouseEventHandler<HTMLButtonElement>
+}
+
+const ProductSliderControl: React.FC<ProductSliderControl> = React.memo(
+  ({ onPrev, onNext }) => (
+    <div className={s.control}>
+      <button
+        className={cn(s.leftControl)}
+        onClick={onPrev}
+        aria-label="Previous Product Image"
+      >
+        <ArrowLeft />
+      </button>
+      <button
+        className={cn(s.rightControl)}
+        onClick={onNext}
+        aria-label="Next Product Image"
+      >
+        <ArrowRight />
+      </button>
+    </div>
+  )
+)
+export default ProductSliderControl

components/product/ProductSliderControl/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductSliderControl'

components/product/ProductTag/ProductTag.module.css

@@ -0,0 +1,30 @@
+.root {
+  @apply transition-colors ease-in-out duration-500
+  absolute top-0 left-0 z-20 pr-16;
+}
+
+.root .name {
+  @apply pt-0 max-w-full w-full leading-extra-loose;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
+  line-height: 2.2em;
+}
+
+.root .name span {
+  @apply py-4 px-6 bg-primary text-primary font-bold;
+  min-height: 70px;
+  font-size: inherit;
+  letter-spacing: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.root .name span.fontsizing {
+  display: flex;
+  padding-top: 1.5rem;
+}
+
+.root .price {
+  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
+  font-semibold inline-block tracking-wide;
+}

components/product/ProductTag/ProductTag.tsx

@@ -0,0 +1,36 @@
+import cn from 'classnames'
+import { inherits } from 'util'
+import s from './ProductTag.module.css'
+
+interface ProductTagProps {
+  className?: string
+  name: string
+  price: string
+  fontSize?: number
+}
+
+const ProductTag: React.FC<ProductTagProps> = ({
+  name,
+  price,
+  className = '',
+  fontSize = 32,
+}) => {
+  return (
+    <div className={cn(s.root, className)}>
+      <h3 className={s.name}>
+        <span
+          className={cn({ [s.fontsizing]: fontSize < 32 })}
+          style={{
+            fontSize: `${fontSize}px`,
+            lineHeight: `${fontSize}px`,
+          }}
+        >
+          {name}
+        </span>
+      </h3>
+      <div className={s.price}>{price}</div>
+    </div>
+  )
+}
+
+export default ProductTag

components/product/ProductTag/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductTag'

components/product/ProductView/ProductView.module.css

@@ -1,96 +1,60 @@
 .root {
-  @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
-
-  @screen lg {
-    @apply grid-cols-12;
-  }
+  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
+  min-height: auto;
 }
 
-.productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
-  min-height: 600px;
-
-  @screen md {
-    min-height: 700px;
-  }
-
-  @screen lg {
-    margin-right: -2rem;
-    margin-left: -2rem;
-    @apply mx-0 col-span-6;
-    min-height: 100%;
-    height: 100%;
-  }
-}
-
-.squareBg {
-  @apply absolute inset-0 bg-violet z-0 h-full;
-}
-
-.nameBox {
-  @apply absolute top-6 left-0 z-20 pr-16;
-
-  @screen lg {
-    @apply left-6 pr-16;
-  }
-
-  & .name {
-    @apply px-6 py-2 bg-primary text-primary font-bold;
-    font-size: 2rem;
-    letter-spacing: 0.4px;
-  }
-
-  & .price {
-    @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
-  }
-
-  @screen lg {
-    & .name,
-    & .price {
-      @apply bg-violet-light text-white;
-    }
-  }
+.main {
+  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
+  min-height: 500px;
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
-
-  @screen lg {
-    @apply col-span-6 py-24 justify-between;
-  }
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
 }
 
 .sliderContainer {
-  @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
+  @apply flex items-center justify-center overflow-x-hidden bg-violet;
 }
 
 .imageContainer {
-  & > div {
-    @apply h-full;
-    & > div {
-      @apply h-full;
-    }
-  }
+  @apply text-center;
 }
 
-.img {
+.imageContainer > div,
+.imageContainer > div > div {
+  @apply h-full;
+}
+
+.sliderContainer .img {
   @apply w-full h-auto max-h-full object-cover;
 }
 
 .button {
-  text-align: center;
   width: 100%;
-  max-width: 300px;
-
-  @screen sm {
-    min-width: 300px;
-  }
 }
 
 .wishlistButton {
-  @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+  @apply absolute z-30 top-0 right-0;
+}
 
-  @screen lg {
-    @apply right-12 text-white bg-violet;
+.relatedProductsGrid {
+  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
+}
+
+@screen lg {
+  .root {
+    @apply grid-cols-12;
+  }
+
+  .main {
+    @apply mx-0 col-span-8;
+  }
+
+  .sidebar {
+    @apply col-span-4 py-6;
+  }
+
+  .imageContainer {
+    max-height: 600px;
   }
 }

components/product/ProductView/ProductView.tsx

@@ -1,62 +1,90 @@
-import { FC, useState } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-
 import s from './ProductView.module.css'
-import { useUI } from '@components/ui/context'
-import { Swatch, ProductSlider } from '@components/product'
-import { Button, Container, Text } from '@components/ui'
-
-import usePrice from '@framework/use-price'
-import useAddItem from '@framework/cart/use-add-item'
-import type { ProductNode } from '@framework/api/operations/get-product'
-import {
-  getCurrentVariant,
-  getProductOptions,
-  SelectedOptions,
-} from '../helpers'
-import WishlistButton from '@components/wishlist/WishlistButton'
-
-interface Props {
-  className?: string
-  children?: any
-  product: ProductNode
+import { FC } from 'react'
+import type { Product } from '@commerce/types/product'
+import usePrice from '@framework/product/use-price'
+import { WishlistButton } from '@components/wishlist'
+import { ProductSlider, ProductCard } from '@components/product'
+import { Container, Text } from '@components/ui'
+import ProductSidebar from '../ProductSidebar'
+import ProductTag from '../ProductTag'
+interface ProductViewProps {
+  product: Product
+  relatedProducts: Product[]
 }
 
-const ProductView: FC<Props> = ({ product }) => {
-  const addItem = useAddItem()
+const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
   const { price } = usePrice({
-    amount: product.prices?.price?.value,
-    baseAmount: product.prices?.retailPrice?.value,
-    currencyCode: product.prices?.price?.currencyCode!,
+    amount: product.price.value,
+    baseAmount: product.price.retailPrice,
+    currencyCode: product.price.currencyCode!,
   })
-  const { openSidebar } = useUI()
-  const options = getProductOptions(product)
-  const [loading, setLoading] = useState(false)
-  const [choices, setChoices] = useState<SelectedOptions>({
-    size: null,
-    color: null,
-  })
-  const variant =
-    getCurrentVariant(product, choices) || product.variants.edges?.[0]
-
-  const addToCart = async () => {
-    setLoading(true)
-    try {
-      await addItem({
-        productId: product.entityId,
-        variantId: product.variants.edges?.[0]?.node.entityId!,
-      })
-      openSidebar()
-      setLoading(false)
-    } catch (err) {
-      setLoading(false)
-    }
-  }
 
   return (
-    <Container className="max-w-none w-full" clean>
+    <>
+      <Container className="max-w-none w-full" clean>
+        <div className={cn(s.root, 'fit')}>
+          <div className={cn(s.main, 'fit')}>
+            <ProductTag
+              name={product.name}
+              price={`${price} ${product.price?.currencyCode}`}
+              fontSize={32}
+            />
+            <div className={s.sliderContainer}>
+              <ProductSlider key={product.id}>
+                {product.images.map((image, i) => (
+                  <div key={image.url} className={s.imageContainer}>
+                    <Image
+                      className={s.img}
+                      src={image.url!}
+                      alt={image.alt || 'Product Image'}
+                      width={600}
+                      height={600}
+                      priority={i === 0}
+                      quality="85"
+                    />
+                  </div>
+                ))}
+              </ProductSlider>
+            </div>
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={product.id}
+                variant={product.variants[0]}
+              />
+            )}
+          </div>
+
+          <ProductSidebar product={product} className={s.sidebar} />
+        </div>
+        <hr className="mt-7 border-accent-2" />
+        <section className="py-12 px-6 mb-10">
+          <Text variant="sectionHeading">Related Products</Text>
+          <div className={s.relatedProductsGrid}>
+            {relatedProducts.map((p) => (
+              <div
+                key={p.path}
+                className="animated fadeIn bg-accent-0 border border-accent-2"
+              >
+                <ProductCard
+                  noNameTag
+                  product={p}
+                  key={p.path}
+                  variant="simple"
+                  className="animated fadeIn"
+                  imgProps={{
+                    width: 300,
+                    height: 300,
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        </section>
+      </Container>
       <NextSeo
         title={product.name}
         description={product.description}
@@ -66,7 +94,7 @@ const ProductView: FC<Props> = ({ product }) => {
           description: product.description,
           images: [
             {
-              url: product.images.edges?.[0]?.node.urlOriginal!,
+              url: product.images[0]?.url!,
               width: 800,
               height: 600,
               alt: product.name,
@@ -74,92 +102,7 @@ const ProductView: FC<Props> = ({ product }) => {
           ],
         }}
       />
-      <div className={cn(s.root, 'fit')}>
-        <div className={cn(s.productDisplay, 'fit')}>
-          <div className={s.nameBox}>
-            <h1 className={s.name}>{product.name}</h1>
-            <div className={s.price}>
-              {price}
-              {` `}
-              {product.prices?.price.currencyCode}
-            </div>
-          </div>
-
-          <div className={s.sliderContainer}>
-            <ProductSlider key={product.entityId}>
-              {product.images.edges?.map((image, i) => (
-                <div key={image?.node.urlOriginal} className={s.imageContainer}>
-                  <Image
-                    className={s.img}
-                    src={image?.node.urlOriginal!}
-                    alt={image?.node.altText || 'Product Image'}
-                    width={1050}
-                    height={1050}
-                    priority={i === 0}
-                    quality="85"
-                  />
-                </div>
-              ))}
-            </ProductSlider>
-          </div>
-        </div>
-
-        <div className={s.sidebar}>
-          <section>
-            {options?.map((opt: any) => (
-              <div className="pb-4" key={opt.displayName}>
-                <h2 className="uppercase font-medium">{opt.displayName}</h2>
-                <div className="flex flex-row py-4">
-                  {opt.values.map((v: any, i: number) => {
-                    const active = (choices as any)[opt.displayName]
-
-                    return (
-                      <Swatch
-                        key={`${v.entityId}-${i}`}
-                        active={v.label === active}
-                        variant={opt.displayName}
-                        color={v.hexColors ? v.hexColors[0] : ''}
-                        label={v.label}
-                        onClick={() => {
-                          setChoices((choices) => {
-                            return {
-                              ...choices,
-                              [opt.displayName]: v.label,
-                            }
-                          })
-                        }}
-                      />
-                    )
-                  })}
-                </div>
-              </div>
-            ))}
-
-            <div className="pb-14 break-words w-full max-w-xl">
-              <Text html={product.description} />
-            </div>
-          </section>
-          <div>
-            <Button
-              aria-label="Add to Cart"
-              type="button"
-              className={s.button}
-              onClick={addToCart}
-              loading={loading}
-              disabled={!variant}
-            >
-              Add to Cart
-            </Button>
-          </div>
-        </div>
-
-        <WishlistButton
-          className={s.wishlistButton}
-          productId={product.entityId}
-          variant={product.variants.edges?.[0]!}
-        />
-      </div>
-    </Container>
+    </>
   )
 }
 

components/product/Swatch/Swatch.module.css

@@ -1,32 +1,54 @@
-.root {
-  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
+.swatch {
+  box-sizing: border-box;
+  composes: root from '@components/ui/Button/Button.module.css';
+  @apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-150 ease-in-out
-  p-0 shadow-none border-gray-200 border box-border;
+  p-0 shadow-none border-accent-3 border box-border select-none;
+  margin-right: calc(0.75rem - 1px);
+  overflow: hidden;
+  width: 48px;
+  height: 48px;
+}
 
-  & > span {
-    @apply absolute;
-  }
+.swatch::before,
+.swatch::after {
+  box-sizing: border-box;
+}
 
-  &:hover {
-    @apply transform scale-110 bg-hover;
-  }
+.swatch:hover {
+  @apply transform scale-110 bg-hover;
+}
+
+.swatch > span {
+  @apply absolute;
 }
 
 .color {
   @apply text-black transition duration-150 ease-in-out;
+}
 
-  &:hover {
-    @apply text-black;
-  }
+.color :hover {
+  @apply text-black;
+}
 
-  &.dark,
-  &.dark:hover {
-    color: white !important;
-  }
+.color.dark,
+.color.dark:hover {
+  color: white !important;
 }
 
 .active {
-  &.size {
-    @apply border-accents-9 border-2;
-  }
+  @apply border-accent-9 border-2;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
+.textLabel {
+  @apply w-auto px-4;
+  min-width: 3rem;
+}
+
+.active.textLabel {
+  @apply border-accent-9 border-2;
+  padding-right: calc(1rem - 1px);
+  padding-left: calc(1rem - 1px);
 }

components/product/Swatch/Swatch.tsx

@@ -1,55 +1,62 @@
 import cn from 'classnames'
-import { FC } from 'react'
+import React from 'react'
 import s from './Swatch.module.css'
 import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
-interface Props {
+interface SwatchProps {
   active?: boolean
   children?: any
   className?: string
-  label?: string
   variant?: 'size' | 'color' | string
   color?: string
+  label?: string | null
 }
 
-const Swatch: FC<Props & ButtonProps> = ({
-  className,
-  color = '',
-  label,
-  variant = 'size',
-  active,
-  ...props
-}) => {
-  variant = variant?.toLowerCase()
-  label = label?.toLowerCase()
+const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = React.memo(
+  ({
+    active,
+    className,
+    color = '',
+    label = null,
+    variant = 'size',
+    ...props
+  }) => {
+    variant = variant?.toLowerCase()
 
-  const rootClassName = cn(
-    s.root,
-    {
-      [s.active]: active,
-      [s.size]: variant === 'size',
-      [s.color]: color,
-      [s.dark]: color ? isDark(color) : false,
-    },
-    className
-  )
+    if (label) {
+      label = label?.toLowerCase()
+    }
 
-  return (
-    <Button
-      className={rootClassName}
-      style={color ? { backgroundColor: color } : {}}
-      aria-label="Variant Swatch"
-      {...props}
-    >
-      {variant === 'color' && active && (
-        <span>
-          <Check />
-        </span>
-      )}
-      {variant === 'size' ? label : null}
-    </Button>
-  )
-}
+    const swatchClassName = cn(
+      s.swatch,
+      {
+        [s.color]: color,
+        [s.active]: active,
+        [s.size]: variant === 'size',
+        [s.dark]: color ? isDark(color) : false,
+        [s.textLabel]: !color && label && label.length > 3,
+      },
+      className
+    )
+
+    return (
+      <Button
+        aria-label="Variant Swatch"
+        className={swatchClassName}
+        {...(label && color && { title: label })}
+        style={color ? { backgroundColor: color } : {}}
+        {...props}
+      >
+        {color && active && (
+          <span>
+            <Check />
+          </span>
+        )}
+        {!color ? label : null}
+      </Button>
+    )
+  }
+)
 
 export default Swatch

components/product/helpers.ts

@@ -1,51 +1,32 @@
-import type { ProductNode } from '@framework/api/operations/get-product'
-
-export type SelectedOptions = {
-  size: string | null
-  color: string | null
-}
-
-export type ProductOption = {
-  displayName: string
-  values: any
-}
-
-// Returns the available options of a product
-export function getProductOptions(product: ProductNode) {
-  const options = product.productOptions.edges?.reduce<ProductOption[]>(
-    (arr, edge) => {
-      if (edge?.node.__typename === 'MultipleChoiceOption') {
-        arr.push({
-          displayName: edge.node.displayName.toLowerCase(),
-          values: edge.node.values.edges?.map((edge) => edge?.node),
-        })
-      }
-      return arr
-    },
-    []
-  )
-
-  return options
-}
-
-// Finds a variant in the product that matches the selected options
-export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
-  const variant = product.variants.edges?.find((edge) => {
-    const { node } = edge ?? {}
+import type { Product } from '@commerce/types/product'
+export type SelectedOptions = Record<string, string | null>
+import { Dispatch, SetStateAction } from 'react'
 
+export function getProductVariant(product: Product, opts: SelectedOptions) {
+  const variant = product.variants.find((variant) => {
     return Object.entries(opts).every(([key, value]) =>
-      node?.productOptions.edges?.find((edge) => {
+      variant.options.find((option) => {
         if (
-          edge?.node.__typename === 'MultipleChoiceOption' &&
-          edge.node.displayName.toLowerCase() === key
+          option.__typename === 'MultipleChoiceOption' &&
+          option.displayName.toLowerCase() === key.toLowerCase()
         ) {
-          return edge.node.values.edges?.find(
-            (valueEdge) => valueEdge?.node.label === value
-          )
+          return option.values.find((v) => v.label.toLowerCase() === value)
         }
       })
     )
   })
-
   return variant
 }
+
+export function selectDefaultOptionFromProduct(
+  product: Product,
+  updater: Dispatch<SetStateAction<SelectedOptions>>
+) {
+  // Selects the default option
+  product.variants[0].options?.forEach((v) => {
+    updater((choices) => ({
+      ...choices,
+      [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
+    }))
+  })
+}

components/product/index.ts

@@ -2,3 +2,4 @@ export { default as Swatch } from './Swatch'
 export { default as ProductView } from './ProductView'
 export { default as ProductCard } from './ProductCard'
 export { default as ProductSlider } from './ProductSlider'
+export { default as ProductOptions } from './ProductOptions'

components/search.tsx

@@ -0,0 +1,439 @@
+import cn from 'classnames'
+import type { SearchPropsType } from '@lib/search-props'
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+import { Layout } from '@components/common'
+import { ProductCard } from '@components/product'
+import type { Product } from '@commerce/types/product'
+import { Container, Grid, Skeleton } from '@components/ui'
+
+import useSearch from '@framework/product/use-search'
+
+import getSlug from '@lib/get-slug'
+import rangeMap from '@lib/range-map'
+
+const SORT = Object.entries({
+  'trending-desc': 'Trending',
+  'latest-desc': 'Latest arrivals',
+  'price-asc': 'Price: Low to high',
+  'price-desc': 'Price: High to low',
+})
+
+import {
+  filterQuery,
+  getCategoryPath,
+  getDesignerPath,
+  useSearchMeta,
+} from '@lib/search'
+
+export default function Search({ categories, brands }: SearchPropsType) {
+  const [activeFilter, setActiveFilter] = useState('')
+  const [toggleFilter, setToggleFilter] = useState(false)
+
+  const router = useRouter()
+  const { asPath, locale } = router
+  const { q, sort } = router.query
+  // `q` can be included but because categories and designers can't be searched
+  // in the same way of products, it's better to ignore the search input if one
+  // of those is selected
+  const query = filterQuery({ sort })
+
+  const { pathname, category, brand } = useSearchMeta(asPath)
+  const activeCategory = categories.find((cat: any) => cat.slug === category)
+  const activeBrand = brands.find(
+    (b: any) => getSlug(b.node.path) === `brands/${brand}`
+  )?.node
+
+  const { data } = useSearch({
+    search: typeof q === 'string' ? q : '',
+    categoryId: activeCategory?.id,
+    brandId: (activeBrand as any)?.entityId,
+    sort: typeof sort === 'string' ? sort : '',
+    locale,
+  })
+
+  const handleClick = (event: any, filter: string) => {
+    if (filter !== activeFilter) {
+      setToggleFilter(true)
+    } else {
+      setToggleFilter(!toggleFilter)
+    }
+    setActiveFilter(filter)
+  }
+
+  return (
+    <Container>
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
+        <div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
+          {/* Categories */}
+          <div className="relative inline-block w-full">
+            <div className="lg:hidden">
+              <span className="rounded-md shadow-sm">
+                <button
+                  type="button"
+                  onClick={(e) => handleClick(e, 'categories')}
+                  className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
+                  id="options-menu"
+                  aria-haspopup="true"
+                  aria-expanded="true"
+                >
+                  {activeCategory?.name
+                    ? `Category: ${activeCategory?.name}`
+                    : 'All Categories'}
+                  <svg
+                    className="-mr-1 ml-2 h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
+                activeFilter !== 'categories' || toggleFilter !== true
+                  ? 'hidden'
+                  : ''
+              }`}
+            >
+              <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
+                <div
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="options-menu"
+                >
+                  <ul>
+                    <li
+                      className={cn(
+                        'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
+                        {
+                          underline: !activeCategory?.name,
+                        }
+                      )}
+                    >
+                      <Link
+                        href={{ pathname: getCategoryPath('', brand), query }}
+                      >
+                        <a
+                          onClick={(e) => handleClick(e, 'categories')}
+                          className={
+                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                          }
+                        >
+                          All Categories
+                        </a>
+                      </Link>
+                    </li>
+                    {categories.map((cat: any) => (
+                      <li
+                        key={cat.path}
+                        className={cn(
+                          'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
+                          {
+                            underline: activeCategory?.id === cat.id,
+                          }
+                        )}
+                      >
+                        <Link
+                          href={{
+                            pathname: getCategoryPath(cat.path, brand),
+                            query,
+                          }}
+                        >
+                          <a
+                            onClick={(e) => handleClick(e, 'categories')}
+                            className={
+                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                            }
+                          >
+                            {cat.name}
+                          </a>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Designs */}
+          <div className="relative inline-block w-full">
+            <div className="lg:hidden mt-3">
+              <span className="rounded-md shadow-sm">
+                <button
+                  type="button"
+                  onClick={(e) => handleClick(e, 'brands')}
+                  className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-8 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
+                  id="options-menu"
+                  aria-haspopup="true"
+                  aria-expanded="true"
+                >
+                  {activeBrand?.name
+                    ? `Design: ${activeBrand?.name}`
+                    : 'All Designs'}
+                  <svg
+                    className="-mr-1 ml-2 h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
+                activeFilter !== 'brands' || toggleFilter !== true
+                  ? 'hidden'
+                  : ''
+              }`}
+            >
+              <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
+                <div
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="options-menu"
+                >
+                  <ul>
+                    <li
+                      className={cn(
+                        'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
+                        {
+                          underline: !activeBrand?.name,
+                        }
+                      )}
+                    >
+                      <Link
+                        href={{
+                          pathname: getDesignerPath('', category),
+                          query,
+                        }}
+                      >
+                        <a
+                          onClick={(e) => handleClick(e, 'brands')}
+                          className={
+                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                          }
+                        >
+                          All Designers
+                        </a>
+                      </Link>
+                    </li>
+                    {brands.flatMap(({ node }: { node: any }) => (
+                      <li
+                        key={node.path}
+                        className={cn(
+                          'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
+                          {
+                            // @ts-ignore Shopify - Fix this types
+                            underline: activeBrand?.entityId === node.entityId,
+                          }
+                        )}
+                      >
+                        <Link
+                          href={{
+                            pathname: getDesignerPath(node.path, category),
+                            query,
+                          }}
+                        >
+                          <a
+                            onClick={(e) => handleClick(e, 'brands')}
+                            className={
+                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                            }
+                          >
+                            {node.name}
+                          </a>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Products */}
+        <div className="col-span-8 order-3 lg:order-none">
+          {(q || activeCategory || activeBrand) && (
+            <div className="mb-12 transition ease-in duration-75">
+              {data ? (
+                <>
+                  <span
+                    className={cn('animated', {
+                      fadeIn: data.found,
+                      hidden: !data.found,
+                    })}
+                  >
+                    Showing {data.products.length} results{' '}
+                    {q && (
+                      <>
+                        for "<strong>{q}</strong>"
+                      </>
+                    )}
+                  </span>
+                  <span
+                    className={cn('animated', {
+                      fadeIn: !data.found,
+                      hidden: data.found,
+                    })}
+                  >
+                    {q ? (
+                      <>
+                        There are no products that match "<strong>{q}</strong>"
+                      </>
+                    ) : (
+                      <>
+                        There are no products that match the selected category.
+                      </>
+                    )}
+                  </span>
+                </>
+              ) : q ? (
+                <>
+                  Searching for: "<strong>{q}</strong>"
+                </>
+              ) : (
+                <>Searching...</>
+              )}
+            </div>
+          )}
+          {data ? (
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {data.products.map((product: Product) => (
+                <ProductCard
+                  variant="simple"
+                  key={product.path}
+                  className="animated fadeIn"
+                  product={product}
+                  imgProps={{
+                    width: 480,
+                    height: 480,
+                  }}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {rangeMap(12, (i) => (
+                <Skeleton key={i}>
+                  <div className="w-60 h-60" />
+                </Skeleton>
+              ))}
+            </div>
+          )}{' '}
+        </div>
+
+        {/* Sort */}
+        <div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
+          <div className="relative inline-block w-full">
+            <div className="lg:hidden">
+              <span className="rounded-md shadow-sm">
+                <button
+                  type="button"
+                  onClick={(e) => handleClick(e, 'sort')}
+                  className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
+                  id="options-menu"
+                  aria-haspopup="true"
+                  aria-expanded="true"
+                >
+                  {sort ? `Sort: ${sort}` : 'Relevance'}
+                  <svg
+                    className="-mr-1 ml-2 h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
+                activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
+              }`}
+            >
+              <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
+                <div
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="options-menu"
+                >
+                  <ul>
+                    <li
+                      className={cn(
+                        'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
+                        {
+                          underline: !sort,
+                        }
+                      )}
+                    >
+                      <Link href={{ pathname, query: filterQuery({ q }) }}>
+                        <a
+                          onClick={(e) => handleClick(e, 'sort')}
+                          className={
+                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                          }
+                        >
+                          Relevance
+                        </a>
+                      </Link>
+                    </li>
+                    {SORT.map(([key, text]) => (
+                      <li
+                        key={key}
+                        className={cn(
+                          'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
+                          {
+                            underline: sort === key,
+                          }
+                        )}
+                      >
+                        <Link
+                          href={{
+                            pathname,
+                            query: filterQuery({ q, sort: key }),
+                          }}
+                        >
+                          <a
+                            onClick={(e) => handleClick(e, 'sort')}
+                            className={
+                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                            }
+                          >
+                            {text}
+                          </a>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  )
+}
+
+Search.Layout = Layout

components/ui/Button/Button.module.css

@@ -1,32 +1,48 @@
 .root {
-  @apply bg-secondary text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6  transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 border border-transparent items-center;
+  @apply bg-accent-9 text-accent-0 cursor-pointer inline-flex
+  px-10 py-5 leading-6 transition ease-in-out duration-150
+  shadow-sm text-center justify-center uppercase
+  border border-transparent items-center text-sm font-semibold
+  tracking-wide;
+  max-height: 64px;
 }
 
 .root:hover {
-  @apply bg-accents-0 text-primary border border-secondary;
+  @apply border-accent-9 bg-accent-6;
 }
 
 .root:focus {
-  @apply shadow-outline outline-none;
+  @apply shadow-outline-normal outline-none;
 }
 
 .root[data-active] {
-  @apply bg-gray-600;
+  @apply bg-accent-6;
 }
 
 .loading {
-  @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
+  @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
 }
 
 .slim {
   @apply py-2 transform-none normal-case;
 }
 
+.ghost {
+  @apply border border-accent-2 bg-accent-0 text-accent-9 text-sm;
+}
+
+.ghost:hover {
+  @apply border-accent-9 bg-accent-9 text-accent-0;
+}
+
 .disabled,
 .disabled:hover {
-  @apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed;
+  @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;
   filter: grayscale(1);
   -webkit-transform: translateZ(0);
   -webkit-perspective: 1000;
   -webkit-backface-visibility: hidden;
 }
+
+.progress {
+}

components/ui/Button/Button.tsx

@@ -12,7 +12,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'flat' | 'slim'
+  variant?: 'flat' | 'slim' | 'ghost'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -39,6 +39,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const rootClassName = cn(
     s.root,
     {
+      [s.ghost]: variant === 'ghost',
       [s.slim]: variant === 'slim',
       [s.loading]: loading,
       [s.disabled]: disabled,

components/ui/Collapse/Collapse.module.css

@@ -0,0 +1,25 @@
+.root {
+  @apply border-b border-accent-2 py-4 flex flex-col outline-none;
+}
+
+.header {
+  @apply flex flex-row items-center;
+}
+
+.header .label {
+  @apply text-base font-medium;
+}
+
+.content {
+  @apply pt-3 overflow-hidden pl-8;
+}
+
+.icon {
+  @apply mr-3 text-accent-6;
+  margin-left: -6px;
+  transition: transform 0.2s ease;
+}
+
+.icon.open {
+  transform: rotate(90deg);
+}

components/ui/Collapse/Collapse.tsx

@@ -0,0 +1,46 @@
+import cn from 'classnames'
+import React, { FC, ReactNode, useState } from 'react'
+import s from './Collapse.module.css'
+import { ChevronRight } from '@components/icons'
+import { useSpring, a } from '@react-spring/web'
+import useMeasure from 'react-use-measure'
+
+export interface CollapseProps {
+  title: string
+  children: ReactNode
+}
+
+const Collapse: FC<CollapseProps> = React.memo(({ title, children }) => {
+  const [isActive, setActive] = useState(false)
+  const [ref, { height: viewHeight }] = useMeasure()
+
+  const animProps = useSpring({
+    height: isActive ? viewHeight : 0,
+    config: { tension: 250, friction: 32, clamp: true, duration: 150 },
+    opacity: isActive ? 1 : 0,
+  })
+
+  const toggle = () => setActive((x) => !x)
+
+  return (
+    <div
+      className={s.root}
+      role="button"
+      tabIndex={0}
+      aria-expanded={isActive}
+      onClick={toggle}
+    >
+      <div className={s.header}>
+        <ChevronRight className={cn(s.icon, { [s.open]: isActive })} />
+        <span className={s.label}>{title}</span>
+      </div>
+      <a.div style={{ overflow: 'hidden', ...animProps }}>
+        <div ref={ref} className={s.content}>
+          {children}
+        </div>
+      </a.div>
+    </div>
+  )
+})
+
+export default Collapse

components/ui/Collapse/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Collapse'
+export * from './Collapse'

components/ui/Container/Container.tsx

@@ -1,21 +1,25 @@
 import cn from 'classnames'
 import React, { FC } from 'react'
 
-interface Props {
+interface ContainerProps {
   className?: string
   children?: any
   el?: HTMLElement
   clean?: boolean
 }
 
-const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
+const Container: FC<ContainerProps> = ({
+  children,
+  className,
+  el = 'div',
+  clean,
+}) => {
   const rootClassName = cn(className, {
     'mx-auto max-w-8xl px-6': !clean,
   })
 
-  let Component: React.ComponentType<React.HTMLAttributes<
-    HTMLDivElement
-  >> = el as any
+  let Component: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> =
+    el as any
 
   return <Component className={rootClassName}>{children}</Component>
 }

components/ui/Grid/Grid.module.css

@@ -1,7 +1,5 @@
 .root {
-  --row-height: calc(100vh - 88px);
   @apply grid grid-cols-1 gap-0;
-  min-height: var(--row-height);
 
   @screen lg {
     @apply grid-cols-3 grid-rows-2;
@@ -27,9 +25,17 @@
 
 .layoutNormal {
   @apply gap-3;
+}
 
-  & > * {
-    min-height: 325px;
+@screen md {
+  .layoutNormal > * {
+    max-height: min-content !important;
+  }
+}
+
+@screen lg {
+  .layoutNormal > * {
+    max-height: 400px;
   }
 }
 
@@ -45,13 +51,12 @@
   }
 
   &.filled {
-    & > *:nth-child(6n + 1),
-    & > *:nth-child(6n + 5) {
+    & > *:nth-child(6n + 1) {
       @apply bg-violet;
     }
 
-    & > *:nth-child(6n + 5) {
-      @apply bg-blue;
+    & > *:nth-child(6n + 2) {
+      @apply bg-accent-8;
     }
 
     & > *:nth-child(6n + 3) {
@@ -76,12 +81,12 @@
   }
 
   &.filled {
-    & > *:nth-child(6n + 2) {
-      @apply bg-blue;
+    & > *:nth-child(6n + 1) {
+      @apply bg-violet;
     }
 
-    & > *:nth-child(6n + 4) {
-      @apply bg-violet;
+    & > *:nth-child(6n + 2) {
+      @apply bg-accent-8;
     }
 
     & > *:nth-child(6n + 3) {