Merge branch 'master' of github.com:okbel/e-comm-example

components/product/ProductCard/ProductCard.tsx

@@ -1,30 +1,24 @@
 import cn from 'classnames'
 import s from './ProductCard.module.css'
 import { FC, ReactNode, Component } from 'react'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import { Heart } from '@components/icon'
 import Link from 'next/link'
 
 interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
-  node: ProductData
+  product: ProductNode
   variant?: 'slim' | 'simple'
 }
 
-interface ProductData {
-  name: string
-  images: any
-  prices: any
-  path: string
-}
-
-const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
+const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
   if (variant === 'slim') {
     return (
       <div className="relative overflow-hidden box-border">
         <img
           className="object-scale-down h-48"
-          src={p.images.edges[0].node.urlSmall}
+          src={p.images.edges?.[0]?.node.urlSmall}
         />
         <div className="absolute inset-0 flex items-center justify-end mr-8">
           <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
@@ -41,7 +35,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
             className="w-full object-cover"
-            src={p.images.edges[0].node.urlXL}
+            src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>
         <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
@@ -50,7 +44,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
             <p className={s.productTitle}>
               <span>{p.name}</span>
             </p>
-            <span className={s.productPrice}>${p.prices.price.value}</span>
+            <span className={s.productPrice}>${p.prices?.price.value}</span>
           </div>
           <div className={s.wishlistButton}>
             <Heart />

components/product/ProductView/ProductView.tsx

@@ -1,17 +1,17 @@
 import { NextSeo } from 'next-seo'
 import { FC, useState } from 'react'
-import s from './ProductView.module.css'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
-import type { Product } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
+import s from './ProductView.module.css'
 
 interface Props {
   className?: string
   children?: any
-  product: Product
+  product: ProductNode
 }
 
 const ProductView: FC<Props> = ({ product, className }) => {

components/product/helpers.ts

@@ -1,6 +1,6 @@
-import type { Product } from '@lib/bigcommerce/api/operations/get-product'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 
-export function getProductOptions(product: Product) {
+export function getProductOptions(product: ProductNode) {
   // console.log(product)
   const options = product.productOptions.edges?.map(({ node }: any) => ({
     displayName: node.displayName.toLowerCase(),