Updated Saleor Provider (vercel#356)

* Initial work, copied from the Shopify provider

* Added basis setup and type generation for the products queries

* refactor: adjust the types

* task: relax the Node.js constraint

* fix: page/product properties

* disable unknown fields

* mention Saleor in the README

* setup debugging for Next.js

* Check nextjs-commerce bug if no images are added for a product

* fix: client/server pecularities for env visibility

Must prefix with `NEXT_PUBLIC_` so that the API URL is
visible on the client

* re: make search work with Saleor API (WIP)

* task: update deps

* task: move to Webpack 5.x

* saleor: initial cart integration

* update deps

* saleor: shall the cart appear!

* task: remove deprecated packages

* saleor: adding/removing from the cart

* saleor: preliminary signup process

* saleor: fix the prices in the cart

* update deps

* update deps

* Added the options for a variant to the product page

* Mapped options to variants

* Mapped options to variants

* saleor: refine the auth process

* saleor: remove unused code

* saleor: handle customer find via refresh

temporary solution

* saleor: update deps

* saleor: fix the session handling

* saleor: fix the variants

* saleor: simplify the naming for GraphQL statements

* saleor: fix the type for collection

* saleor: arrange the error codes

* saleor: integrate collections

* saleor: fix product sorting

* saleor: set cookie location

* saleor: update the schema

* saleor: attach checkout to customer

* saleor: fix the checkout flow

* saleor: unify GraphQL naming approach

* task: update deps

* Add the env variables for saleor to the template

* task: prettier

* saleor: stub API for build/typescript compilation

thanks @cond0r

* task: temporarily disable for the `build`

* saleor: refactor GraphQL queries

* saleor: adjust the config

* task: update dependencies

* revert: Next.js to `10.0.9`

* saleor: fix the checkout fetch query

* task: update dependencies

* saleor: adapt for displaying featured products

* saleor: update the provider structure

* saleor: make the home page representable

* feature/cart: display the variant name (cond)

Co-authored-by: Patryk Zawadzki <[email protected]>
Co-authored-by: royderks <[email protected]>

.env.template

@@ -13,3 +13,6 @@ 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=

.prettierrc

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

README.md

@@ -11,6 +11,7 @@ Demo live at: [demo.vercel.store](https://demo.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
 
@@ -26,7 +27,7 @@ Demo live at: [demo.vercel.store](https://demo.vercel.store/)
 
 ## Integrations
 
-Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan to support all major ecommerce backends.
+Next.js Commerce integrates out-of-the-box with BigCommerce, Shopify and Saleor. We plan to support all major ecommerce backends.
 
 ## Considerations
 

assets/base.css

@@ -127,4 +127,3 @@ a {
     opacity: 1;
   }
 }
-

assets/components.css

@@ -1,3 +1,3 @@
 .fit {
   min-height: calc(100vh - 88px);
-}
+}

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

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

components/cart/CartItem/CartItem.tsx

@@ -108,10 +108,14 @@ const CartItem = ({
       <div className="flex-1 flex flex-col text-base">
         <Link href={`/product/${item.path}`}>
           <span
-            className="font-bold text-lg cursor-pointer leading-6"
             onClick={() => closeSidebarIfPresent()}
           >
-            {item.name}
+            <div
+              className="font-bold text-lg cursor-pointer leading-6"
+            >
+              {item.name}
+            </div>
+            {item.variant ? <span> {item.variant.name}</span> : ""}
           </span>
         </Link>
         {options && options.length > 0 ? (

components/common/Layout/Layout.tsx

@@ -49,13 +49,8 @@ const Layout: FC<Props> = ({
   children,
   pageProps: { categories = [], ...pageProps },
 }) => {
-  const {
-    displaySidebar,
-    displayModal,
-    closeSidebar,
-    closeModal,
-    modalView,
-  } = useUI()
+  const { displaySidebar, displayModal, closeSidebar, closeModal, modalView } =
+    useUI()
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
 

components/product/ProductCard/ProductCard.tsx

@@ -10,7 +10,7 @@ interface Props {
   className?: string
   product: Product
   variant?: 'slim' | 'simple'
-  imgProps?: Omit<ImageProps, 'src'>
+  imgProps?: Omit<any, 'src'>
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
@@ -38,7 +38,7 @@ const ProductCard: FC<Props> = ({
               alt={product.name || 'Product Image'}
               height={320}
               width={320}
-              layout="fixed"
+              layout="fixed" 
               {...imgProps}
             />
           )}

components/product/ProductView/ProductView.tsx

@@ -32,10 +32,11 @@ const ProductView: FC<Props> = ({ product }) => {
 
   useEffect(() => {
     // Selects the default option
-    product.variants[0].options?.forEach((v) => {
+    const options = product.variants[0].options || []
+    options.forEach((v) => {
       setChoices((choices) => ({
         ...choices,
-        [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
+        [v.displayName.toLowerCase()]: v.values[0]?.label.toLowerCase(),
       }))
     })
   }, [])
@@ -126,7 +127,8 @@ const ProductView: FC<Props> = ({ product }) => {
                           setChoices((choices) => {
                             return {
                               ...choices,
-                              [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
+                              [opt.displayName.toLowerCase()]:
+                                v.label.toLowerCase(),
                             }
                           })
                         }}

components/ui/Container/Container.tsx

@@ -13,9 +13,8 @@ const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
     '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>
 }

framework/commerce/config.js

@@ -7,7 +7,7 @@ const fs = require('fs')
 const merge = require('deepmerge')
 const prettier = require('prettier')
 
-const PROVIDERS = ['bigcommerce', 'shopify', 'swell', 'vendure']
+const PROVIDERS = ['bigcommerce', 'shopify', 'swell', 'vendure', 'saleor']
 
 function getProviderName() {
   return (
@@ -18,6 +18,8 @@ function getProviderName() {
       ? 'shopify'
       : process.env.NEXT_PUBLIC_SWELL_STORE_ID
       ? 'swell'
+      : process.env.NEXT_PUBLIC_SALEOR_API_URL
+      ? 'saleor'
       : null)
   )
 }

framework/commerce/new-provider.md

@@ -3,6 +3,7 @@
 A commerce provider is a headless e-commerce platform that integrates with the [Commerce Framework](./README.md). Right now we have the following providers:
 
 - BigCommerce ([framework/bigcommerce](../bigcommerce))
+- Saleor ([framework/saleor](../saleor))
 - Shopify ([framework/shopify](../shopify))
 
 Adding a commerce provider means adding a new folder in `framework` with a folder structure like the next one:
@@ -156,24 +157,26 @@ export const handler: SWRHook<
     const data = cartId ? await fetch(options) : null
     return data && normalizeCart(data)
   },
-  useHook: ({ useData }) => (input) => {
-    const response = useData({
-      swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
-    })
+  useHook:
+    ({ useData }) =>
+    (input) => {
+      const response = useData({
+        swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
+      })
 
-    return useMemo(
-      () =>
-        Object.create(response, {
-          isEmpty: {
-            get() {
-              return (response.data?.lineItems.length ?? 0) <= 0
+      return useMemo(
+        () =>
+          Object.create(response, {
+            isEmpty: {
+              get() {
+                return (response.data?.lineItems.length ?? 0) <= 0
+              },
+              enumerable: true,
             },
-            enumerable: true,
-          },
-        }),
-      [response]
-    )
-  },
+          }),
+        [response]
+      )
+    },
 }
 ```
 
@@ -217,18 +220,20 @@ export const handler: MutationHook<Cart, {}, CartItemBody> = {
 
     return normalizeCart(data)
   },
-  useHook: ({ fetch }) => () => {
-    const { mutate } = useCart()
-
-    return useCallback(
-      async function addItem(input) {
-        const data = await fetch({ input })
-        await mutate(data, false)
-        return data
-      },
-      [fetch, mutate]
-    )
-  },
+  useHook:
+    ({ fetch }) =>
+    () => {
+      const { mutate } = useCart()
+
+      return useCallback(
+        async function addItem(input) {
+          const data = await fetch({ input })
+          await mutate(data, false)
+          return data
+        },
+        [fetch, mutate]
+      )
+    },
 }
 ```
 

framework/commerce/utils/define-property.ts

@@ -11,18 +11,16 @@ type InferValue<Prop extends PropertyKey, Desc> = Desc extends {
   ? Record<Prop, T>
   : never
 
-type DefineProperty<
-  Prop extends PropertyKey,
-  Desc extends PropertyDescriptor
-> = Desc extends { writable: any; set(val: any): any }
-  ? never
-  : Desc extends { writable: any; get(): any }
-  ? never
-  : Desc extends { writable: false }
-  ? Readonly<InferValue<Prop, Desc>>
-  : Desc extends { writable: true }
-  ? InferValue<Prop, Desc>
-  : Readonly<InferValue<Prop, Desc>>
+type DefineProperty<Prop extends PropertyKey, Desc extends PropertyDescriptor> =
+  Desc extends { writable: any; set(val: any): any }
+    ? never
+    : Desc extends { writable: any; get(): any }
+    ? never
+    : Desc extends { writable: false }
+    ? Readonly<InferValue<Prop, Desc>>
+    : Desc extends { writable: true }
+    ? InferValue<Prop, Desc>
+    : Readonly<InferValue<Prop, Desc>>
 
 export default function defineProperty<
   Obj extends object,

framework/saleor/.env.template

@@ -0,0 +1,4 @@
+COMMERCE_PROVIDER=saleor
+
+NEXT_SALEOR_API_URL=
+NEXT_SALEOR_CHANNEL=

framework/saleor/README.md

@@ -0,0 +1,19 @@
+## Saleor Provider
+
+**Demo:** TBD
+
+Before getting starter, a [Saleor](https://saleor.io/) account and store is required before using the provider.
+
+Next, copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):
+
+```bash
+cp framework/saleor/.env.template .env.local
+```
+
+Then, set the environment variables in `.env.local` to match the ones from your store.
+
+## Contribute
+
+Our commitment to Open Source can be found [here](https://vercel.com/oss).
+
+If you find an issue with the provider or want a new feature, feel free to open a PR or [create a new issue](https://github.com/vercel/commerce/issues).

framework/saleor/api/cart.ts

@@ -0,0 +1 @@
+export default function () {}

framework/saleor/api/catalog/products.ts

@@ -0,0 +1 @@
+export default function () {}

framework/saleor/api/checkout.ts

@@ -0,0 +1 @@
+export default function () {}

framework/saleor/api/customers/index.ts

@@ -0,0 +1 @@
+export default function () {}

framework/saleor/api/customers/login.ts

@@ -0,0 +1 @@
+export default function () {}

framework/saleor/api/customers/logout.ts

@@ -0,0 +1 @@
+export default function () {}

framework/saleor/api/customers/signup.ts

@@ -0,0 +1 @@
+export default function () {}

framework/saleor/api/endpoints/cart.ts

@@ -0,0 +1 @@
+export default function (_commerce: any) {}

framework/saleor/api/endpoints/catalog/products.ts

@@ -0,0 +1 @@
+export default function (_commerce: any) {}