Updated Saleor Provider (#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 <patrys@room-303.com>
Co-authored-by: royderks <10717410+royderks@users.noreply.github.com>

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>
 }