Changes

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -8,10 +8,10 @@ import { getCategoryPath, getDesignerPath } from '@lib/search'
 interface Props {
   categories?: any
   brands?: any
-  newestProducts?: any
+  products?: Product[]
 }
 
-const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
+const Head: FC<Props> = ({ categories, brands, products = [] }) => {
   return (
     <div className={s.root}>
       <div className={s.asideWrapper}>
@@ -48,10 +48,10 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
       </div>
       <div className="flex-1">
         <Grid layout="normal">
-          {newestProducts.map(({ node }: any) => (
+          {products.map((product) => (
             <ProductCard
-              key={node.path}
-              product={node}
+              key={product.path}
+              product={product}
               variant="simple"
               imgProps={{
                 width: 480,

components/product/ProductCard/ProductCard.tsx

@@ -46,9 +46,9 @@ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
                   <span>{product.name}</span>
                 </h3>
                 <span className={s.productPrice}>
-                  {product.prices[0].value}
+                  {product.price.value}
                   &nbsp;
-                  {product.prices[0].currencyCode}
+                  {product.price.currencyCode}
                 </span>
               </div>
               <WishlistButton

components/product/ProductView/ProductView.tsx

@@ -1,16 +1,16 @@
-import { FC, useState } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-
+import { FC, useState } from 'react'
 import s from './ProductView.module.css'
-import { useUI } from '@components/ui/context'
+
+import { useUI } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text } from '@components/ui'
 
-import usePrice from '@framework/product/use-price'
-import useAddItem from '@framework/cart/use-add-item'
-import type { ProductNode } from '@framework/api/operations/get-product'
+import { usePrice } from '@framework/product'
+import { useAddItem } from '@framework/cart'
+
 import {
   getCurrentVariant,
   getProductOptions,
@@ -21,15 +21,15 @@ import WishlistButton from '@components/wishlist/WishlistButton'
 interface Props {
   className?: string
   children?: any
-  product: ProductNode
+  product: Product
 }
 
 const ProductView: FC<Props> = ({ product }) => {
   const addItem = useAddItem()
   const { price } = usePrice({
-    amount: product.prices?.price?.value,
-    baseAmount: product.prices?.retailPrice?.value,
-    currencyCode: product.prices?.price?.currencyCode!,
+    amount: product.price.value,
+    baseAmount: product.price.retailValue,
+    currencyCode: product.price.currencyCode!,
   })
   const { openSidebar } = useUI()
   const options = getProductOptions(product)
@@ -38,15 +38,15 @@ const ProductView: FC<Props> = ({ product }) => {
     size: null,
     color: null,
   })
-  const variant =
-    getCurrentVariant(product, choices) || product.variants.edges?.[0]
+
+  const variant = getCurrentVariant(product, choices) || product.variants[0]
 
   const addToCart = async () => {
     setLoading(true)
     try {
       await addItem({
-        productId: product.entityId,
-        variantId: product.variants.edges?.[0]?.node.entityId!,
+        productId: Number(product.id),
+        variantId: Number(product.variants[0].id),
       })
       openSidebar()
       setLoading(false)
@@ -66,7 +66,7 @@ const ProductView: FC<Props> = ({ product }) => {
           description: product.description,
           images: [
             {
-              url: product.images.edges?.[0]?.node.urlOriginal!,
+              url: product.images[0]?.url!,
               width: 800,
               height: 600,
               alt: product.name,
@@ -81,18 +81,18 @@ const ProductView: FC<Props> = ({ product }) => {
             <div className={s.price}>
               {price}
               {` `}
-              {product.prices?.price.currencyCode}
+              {product.price?.currencyCode}
             </div>
           </div>
 
           <div className={s.sliderContainer}>
-            <ProductSlider key={product.entityId}>
-              {product.images.edges?.map((image, i) => (
-                <div key={image?.node.urlOriginal} className={s.imageContainer}>
+            <ProductSlider key={product.id}>
+              {product.images.map((image, i) => (
+                <div key={image.url} className={s.imageContainer}>
                   <Image
                     className={s.img}
-                    src={image?.node.urlOriginal!}
-                    alt={image?.node.altText || 'Product Image'}
+                    src={image.url!}
+                    alt={image.alt || 'Product Image'}
                     width={1050}
                     height={1050}
                     priority={i === 0}
@@ -152,11 +152,10 @@ const ProductView: FC<Props> = ({ product }) => {
             </Button>
           </div>
         </div>
-
         <WishlistButton
           className={s.wishlistButton}
-          productId={product.entityId}
-          variant={product.variants.edges?.[0]!}
+          productId={product.id}
+          variant={product.variants[0]!}
         />
       </div>
     </Container>

framework/bigcommerce/api/operations/get-all-products.ts

@@ -34,12 +34,10 @@ function productsNormalizer(arr: any[]): Product[] {
       ),
       variants: variants.edges.map(({ node }: any) => node),
       productOptions: productOptions.edges.map(({ node }: any) => node),
-      prices: [
-        {
-          value: prices.price.value,
-          currencyCode: prices.price.currencyCode,
-        },
-      ],
+      price: {
+        value: prices.price.value,
+        currencyCode: prices.price.currencyCode,
+      },
       ...rest,
     })
   )

framework/types.d.ts

@@ -6,7 +6,7 @@ interface Product {
   path?: string
   images: ProductImage[]
   variants: ProductVariant[]
-  prices: ProductPrice[]
+  price: ProductPrice
 }
 interface ProductImage {
   url: string
@@ -18,9 +18,10 @@ interface ProductVariant {
 }
 
 interface ProductPrice {
-  value: number | string
+  value: number
   currencyCode: 'USD' | 'ARS'
-  type?: 'price' | 'retail' | 'sale' | string
+  retailValue?: number
+  saleValue?: number
 }
 
 interface Cart {

pages/index.tsx

@@ -41,7 +41,7 @@ export default function Home({
   categories,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <div>
+    <>
       <Grid>
         {products.slice(0, 3).map((product, i) => (
           <ProductCard
@@ -102,12 +102,12 @@ export default function Home({
           />
         ))}
       </Marquee>
-      {/* <HomeAllProductsGrid
-        newestProducts={newestProducts}
+      <HomeAllProductsGrid
+        newestProducts={products}
         categories={categories}
         brands={brands}
-      /> */}
-    </div>
+      />
+    </>
   )
 }