changes

components/product/ProductCard/ProductCard.tsx

@@ -12,9 +12,15 @@ interface Props {
   imgProps?: Omit<ImageProps, 'src'>
 }
 
-const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
+const ProductCard: FC<Props> = ({
+  className,
+  product,
+  variant,
+  imgProps,
+  ...props
+}) => {
   return (
-    <Link href={`product/${product.slug}`}>
+    <Link href={`product/${product.slug}`} {...props}>
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >
@@ -25,11 +31,11 @@ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
                 {product.name}
               </span>
             </div>
-            {product.images?[0] && (
+            {product?.images && (
               <Image
                 quality="85"
                 alt={product.name}
-                src={product.images[0].url}
+                src={product.images[0].url!}
                 height={320}
                 width={320}
                 layout="fixed"
@@ -54,11 +60,11 @@ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
               <WishlistButton
                 className={s.wishlistButton}
                 productId={product.id}
-                variant={product.variants?[0]}
+                variant={product.variant[0]!}
               />
             </div>
             <div className={s.imageContainer}>
-              {product.images?[0] && (
+              {product?.images && (
                 <Image
                   alt={product.name}
                   className={s.productImage}

components/ui/Marquee/Marquee.tsx

@@ -9,7 +9,7 @@ interface Props {
   variant?: 'primary' | 'secondary'
 }
 
-const Maquee: FC<Props> = ({
+const Marquee: FC<Props> = ({
   className = '',
   children,
   variant = 'primary',
@@ -32,4 +32,4 @@ const Maquee: FC<Props> = ({
   )
 }
 
-export default Maquee
+export default Marquee

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -47,7 +47,7 @@ const WishlistButton: FC<Props> = ({
       } else {
         await addItem({
           productId,
-          variantId: variant?.id,
+          variantId: variant?.id!,
         })
       }
 

framework/bigcommerce/lib/normalize.ts

@@ -1,21 +1,23 @@
-import { ProductNode } from '@framework/api/operations/get-all-products'
+import { ProductEdge } from '@framework/schema'
 
-export function normalizeProduct(productNode: ProductNode | any): Product {
+export function normalizeProduct(productNode: ProductEdge): Product {
+  // console.log(productNode)
   const {
-    entityId: id,
+    node: {
-    images,
+      entityId: id,
-    variants,
+      images,
-    productOptions,
+      variants,
-    prices,
+      productOptions,
-    path,
+      prices,
-    ...rest
+      path,
+      ...rest
+    },
   } = productNode
 
   return {
-    id,
     path,
-    slug: path.slice(1, -1),
+    slug: path?.slice(1, -1),
-    images: images.edges?.map(
+    images: images?.edges?.map(
       ({ node: { urlOriginal, altText, ...rest } }: any) => ({
         url: urlOriginal,
         alt: altText,

framework/bigcommerce/scripts/generate-definitions.js

@@ -0,0 +1,49 @@
+/**
+ * Generates definitions for REST API endpoints that are being
+ * used by ../api using https://github.com/drwpow/swagger-to-ts
+ */
+const { readFileSync, promises } = require('fs')
+const path = require('path')
+const fetch = require('node-fetch')
+const swaggerToTS = require('@manifoldco/swagger-to-ts').default
+
+async function getSchema(filename) {
+  const url = `https://next-api.stoplight.io/projects/8433/files/${filename}`
+  const res = await fetch(url)
+
+  if (!res.ok) {
+    throw new Error(`Request failed with ${res.status}: ${res.statusText}`)
+  }
+
+  return res.json()
+}
+
+const schemas = Object.entries({
+  '../api/definitions/catalog.ts':
+    'BigCommerce_Catalog_API.oas2.yml?ref=version%2F20.930',
+  '../api/definitions/store-content.ts':
+    'BigCommerce_Store_Content_API.oas2.yml?ref=version%2F20.930',
+  '../api/definitions/wishlist.ts':
+    'BigCommerce_Wishlist_API.oas2.yml?ref=version%2F20.930',
+  // swagger-to-ts is not working for the schema of the cart API
+  // '../api/definitions/cart.ts':
+  //   'BigCommerce_Server_to_Server_Cart_API.oas2.yml',
+})
+
+async function writeDefinitions() {
+  const ops = schemas.map(async ([dest, filename]) => {
+    const destination = path.join(__dirname, dest)
+    const schema = await getSchema(filename)
+    const definition = swaggerToTS(schema.content, {
+      prettierConfig: 'package.json',
+    })
+
+    await promises.writeFile(destination, definition)
+
+    console.log(`✔️ Added definitions for: ${dest}`)
+  })
+
+  await Promise.all(ops)
+}
+
+writeDefinitions()

package.json

@@ -8,7 +8,7 @@
     "analyze": "BUNDLE_ANALYZE=both yarn build",
     "find:unused": "next-unused",
     "generate": "graphql-codegen",
-    "generate:definitions": "node framework/bigcommerce/lib/generate-definitions.js"
+    "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
   },
   "prettier": {
     "semi": false,
@@ -46,7 +46,9 @@
   "dependencies": {
     "@reach/portal": "^0.11.2",
     "@tailwindcss/ui": "^0.6.2",
+    "@types/node-fetch": "2",
     "@vercel/fetch": "^6.1.0",
+    "@vercel/fetch-cached-dns": "^2.0.1",
     "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
@@ -60,12 +62,14 @@
     "next": "^10.0.5-canary.11",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
+    "node-fetch": "^2.6.1",
     "postcss-nesting": "^7.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-merge-refs": "^1.1.0",
     "react-ticker": "^1.2.2",
-    "swr": "^0.3.11",
+    "swr": "^0.4.0",
+    "tabbable": "^5.1.5",
     "tailwindcss": "^1.9"
   },
   "devDependencies": {

pages/index.tsx

@@ -102,11 +102,11 @@ export default function Home({
           />
         ))}
       </Marquee>
-      <HomeAllProductsGrid
+      {/* <HomeAllProductsGrid
         newestProducts={products}
         categories={categories}
         brands={brands}
-      />
+      /> */}
     </>
   )
 }