Agnostic UI (vercel#199)

* changes * Progress * Normalized Products output * Progress * Restored Index Agnostic * Progress * Reordering * Moved normalizer to BC function * Removed Futures * More Types * More Types * More Types * Fix useCallback * Progress, Changes types, readme and restoring functionality * Changes * TS Issues * Changes * Normalizer * Normalizing more operations * Normalizing more operations * changes * Merge Issues * Cleanup * change * changes * index.ts broke my tree shaking * slug * Normalized Options and Swatches * Restored Add to cart * Correct Variant Added to Cart * Normalizing Cart Responses * Changes * changes breaking * Adding immutable normalizer for Product * Cart Normalized * changes * Progress * More updates * Removed some comments * Add loading state for data hooks * Bug fix * Changed the way isEmpty works * Improve navbar performance * Added useResponse hook * added useResponse to useWhishlist * Added husky and lint-staged * Ran prettier fix * Added more cart types * Moved types.d.ts to the commerce folder * Minor changes * Moved normalizer to happen after fetch * updated useCart types * Updated normalizer for useData * Added new normalizer for the cart to the UI * More corrections for useCart * Updated cart update hooks * Removed import * Progress * Switch away from global types * Making multiple changes * Improved types for operations * Moved and updated cart types * Updated the useAddItem and useRemoveItem hooks * Minor life improvement * Minor change * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * userAvatar * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * MOving stuff around and adding temporal new files * changes * Replace use-cart with the new hook * Removed old hook * Improved HookHandler type * Moved types * Simplified useData types * Updated Fetcher type * Moved SwrOptions type * Removed duplicated fetcher * Moved provider to its own file * Added proper type for fetch input * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7, reversing changes made to bf50965. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965, reversing changes made to 0dad4dd. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1. * align with upstream changes * Updated how the hook input is handled * Add more options to the hook handler * Final touches to the hook handler type * Moved useWishlist to use new handler * Move useCustomer to the new hook * Added a default fetcher * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * Shopify Provider (vercel#186) * Start of Shopify provider * add missing comment to documentation * add missing env vars to documentation * update reference to types file * Moved useSearch to the new hook * Removed old use-data lib * Removed generics for result and body * Removed normalizr * Wishlist * New changes and initial Features API * Fixed some types * Fixed more types * fixes after upstream changes * Fixed product types * Fixed another product type * Updated type * Fixed remaining issues with types * Added a MutationHandler * Moved the handlers to each hook * Moved the fetcher to its own file * Moved handler to each hook * Added initial version of useAddItem * Added better mutation types, and moved some hooks * Removed use-cart-actions * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * changes * Changes * Reordering and changes * Adding Features APO * Adding wishlist api * Implementing FeaturesAPI with Wishlist * Removing bug with touchstart * Adding tyni typing * moved use-remove-item * Removed MutationHandler type * Moved more hooks and updated types to make them smaller * Moved data hooks to new format * Removed no longer required types * Removed useResponse helper * Updated useData type * Moved wishlist use-add-item * Moved wishlist use-remove-item to provider * Moved use-login and use-logout * Update use-signup * Removed use-action helper * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Updates to wishlist feature * Moved the features to be environment variable only * More changes for wishlist config * Disable wishlist * Removed useWishlistActions * Updated readme * updates * typos * Updated the way the provider config is set * Removed features.ts * Removed bootstrap.js * Aligned with upstream changes * Updates * shopify: changes * shopify: changes * Update next.config.js * Shopify Provider Updates (vercel#209) * Implement Shopify Provider * Update README.md * Update README.md * normalizations & missing files * Update index.ts * fixes * Update normalize.ts * fix: cart error on first load * shopify checkout redirect & api handler * Update get-checkout-id.ts * Fix: color option * Update normalize.ts * changes * Update next.config.js * start customer auth & signup * Update config.ts * Login, Sign Up, Log Out, and checkout & customer association * Automatic login after sign-up * Update handle-login.ts * changes * Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic" This reverts commit 23c8ed7, reversing changes made to bf50965. * change readme * Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic" This reverts commit bf50965, reversing changes made to 0dad4dd. * Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"" This reverts commit c9a43f1. * align with upstream changes * query all products for vendors & paths, improve search * Update use-search.tsx * fix cart after upstream changes * fixes after upstream changes * Moved handler to each hook * Added initial version of useAddItem * Updated types * Update use-add-item.tsx * Moved auth & cart hooks + several fixes * Updated cart item, fixed deprecations * Update next.config.js * Aligned with upstream changes * Updates * Update next.config.js * Updated the commerce config structure * Removed @framework imports within framework providers * Fixed types * changes * Adding extra config * Adding shopify commit * Adding env templates to the providers * Ignore some types * Adding link for Cart * Adding customCheckout * multiple changes to fix the wishlist * Shopify Provier Updates (vercel#212) * changes * Adding shopify commit * Changed to query page by id * Fixed page query, Changed use-search GraphQl query * Update use-search.tsx * remove unused util * Changed cookie expiration * Update tsconfig.json Co-authored-by: okbel <[email protected]> * Bump and adding dependency * Adding color checks * Now colors work with lighter colors * Stable commerce.config.json * Updated main readme * Readme changes * Default to bigcommerce Co-authored-by: bc <[email protected]> Co-authored-by: Luis Alvarez <[email protected]> Co-authored-by: cond0r <[email protected]> Co-authored-by: Peter Mekhaeil <[email protected]>
birkmann · Mar 4, 2021 · 9b71bd7 · 9b71bd7
1 parent b121078
commit 9b71bd7
Show file tree

Hide file tree

Showing 232 changed files with 20,521 additions and 1,871 deletions.
diff --git a/.env.template b/.env.template
@@ -2,4 +2,8 @@ BIGCOMMERCE_STOREFRONT_API_URL=
 BIGCOMMERCE_STOREFRONT_API_TOKEN=
 BIGCOMMERCE_STORE_API_URL=
 BIGCOMMERCE_STORE_API_TOKEN=
-BIGCOMMERCE_STORE_API_CLIENT_ID=
+BIGCOMMERCE_STORE_API_CLIENT_ID=
+BIGCOMMERCE_CHANNEL_ID=
+
+SHOPIFY_STORE_DOMAIN=
+SHOPIFY_STOREFRONT_ACCESS_TOKEN=
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}
diff --git a/README.md b/README.md
@@ -7,7 +7,8 @@ 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.demo.vercel.store/
+- BigCommerce Demo: https://bigcommerce.demo.vercel.store/
 
 ## Features
 
@@ -21,26 +22,122 @@ 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 and Shopify. We plan to support all major ecommerce backends.
+
+## Considerations
+
+- `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.
+- **Features API** is 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`
+- We recommend that each **provider** ships with an `env.template` file and a `[readme.md](http://readme.md)` file.
+
+## Provider Structure
+
+Next.js Commerce provides a set of utilities and functions to create new providers. This is how a provider structure looks like.
+
+- `product`
+  - usePrice
+  - useSearch
+  - getProduct
+  - getAllProducts
+- `wishlist`
+  - useWishlist
+  - useAddItem
+  - useRemoveItem
+- `auth`
+  - useLogin
+  - useLogout
+  - useSignup
+- `customer`
+  - useCustomer
+  - getCustomerId
+  - getCustomerWistlist
+- `cart`
+  - useCart
+  - useAddItem
+  - useRemoveItem
+  - useUpdateItem
+- `env.template`
+- `provider.ts`
+- `commerce.config.json`
+- `next.config.js`
+- `README.md`
+
+## Configuration
+
+### How to change providers
+
+First, update the provider selected in `commerce.config.json`:
+
+```json
+{
+  "provider": "bigcommerce",
+  "features": {
+    "wishlist": true
+  }
+}
+```
+
+Then, change the paths defined in `tsconfig.json` and update the `@framework` paths to point to the right folder provider:
+
+```json
+"@framework": ["framework/bigcommerce"],
+"@framework/*": ["framework/bigcommerce/*"]
+```
 
-## Goals
+Make sure to add the environment variables required by the new provider.
 
-* **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._
+### Features
 
-There is a `framework` folder in the root folder that will contain multiple ecommerce providers.
+Every provider defines the features that it supports under `framework/{provider}/commerce.config.json`
 
-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 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
+  {
+    "provider": "bigcommerce",
+    "features": {
+      "wishlist": false
+    }
+  }
+  ```
+- 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
+
+We'd recommend to duplicate a provider folder and push your providers SDK.
+
+If you succeeded building a provider, submit a PR so we can all enjoy it.
+
+## 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.
 
+## 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 `canary` (this is the branch pull requests should be made against).
+   On a release, `canary` branch is rebased into `master`.
+
 ## Troubleshoot
 
 <details>
@@ -57,6 +154,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 +175,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 `canary` (this is the branch pull requests should be made against).
-   On a release, `canary` branch is rebased into `master`.
-
-
-
-
-
diff --git a/commerce.config.json b/commerce.config.json
@@ -0,0 +1,7 @@
+{
+  "provider": "bigcommerce",
+  "features": {
+    "wishlist": true,
+    "customCheckout": false
+  }
+}
diff --git a/components/auth/LoginView.tsx b/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'
 

diff --git a/components/auth/SignUpView.tsx b/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 {}
 

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
@@ -2,43 +2,51 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
+import s from './CartItem.module.css'
 import { Trash, Plus, Minus } from '@components/icons'
-import usePrice from '@framework/use-price'
+import { useUI } from '@components/ui/context'
+import type { LineItem } from '@framework/types'
+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'
 
 type ItemOption = {
-  name: string,
-  nameId: number,
-  value: string,
+  name: string
+  nameId: number
+  value: string
   valueId: number
 }
 
 const CartItem = ({
   item,
   currencyCode,
+  ...rest
 }: {
-  item: any
+  item: LineItem
   currencyCode: string
 }) => {
+  const { closeSidebarIfPresent } = useUI()
+
   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 updateItem = useUpdateItem({ item })
   const removeItem = useRemoveItem()
   const [quantity, setQuantity] = useState(item.quantity)
   const [removing, setRemoving] = useState(false)
+
   const updateQuantity = async (val: number) => {
     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)
+      setQuantity(Number(e.target.value))
     }
   }
   const handleBlur = () => {
@@ -62,11 +70,13 @@ const CartItem = ({
     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
@@ -80,32 +90,38 @@ const CartItem = ({
       className={cn('flex flex-row space-x-8 py-8', {
         'opacity-75 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
+          src={item.variant.image!.url}
+          alt={item.variant.image!.altText}
           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 text-lg cursor-pointer leading-6">
+        <Link href={`/product/${item.path}`}>
+          <span
+            className="font-bold text-lg cursor-pointer leading-6"
+            onClick={() => closeSidebarIfPresent()}
+          >
             {item.name}
           </span>
         </Link>
-        {item.options && item.options.length > 0 ? (
+        {options && options.length > 0 ? (
           <div className="">
-            {item.options.map((option:ItemOption, i: number) =>
-              <span key={`${item.id}-${option.name}`} className="text-sm font-semibold text-accents-7">
-                {option.value}{ i === item.options.length -1 ? "" : ", " }
+            {options.map((option: ItemOption, i: number) => (
+              <span
+                key={`${item.id}-${option.name}`}
+                className="text-sm font-semibold text-accents-7"
+              >
+                {option.value}
+                {i === options.length - 1 ? '' : ', '}
               </span>
-            )}
+            ))}
           </div>
         ) : null}
         <div className="flex items-center mt-3">
@@ -130,7 +146,10 @@ const CartItem = ({
       </div>
       <div className="flex flex-col justify-between space-y-2 text-base">
         <span>{price}</span>
-        <button className="flex justify-end" onClick={handleRemove}>
+        <button
+          className="flex justify-end outline-none"
+          onClick={handleRemove}
+        >
           <Trash />
         </button>
       </div>