Removed Futures

components/product/ProductCard/FUTURE_ProductCard.tsx

@@ -1,81 +0,0 @@
-import { FC } from 'react'
-import cn from 'classnames'
-import Link from 'next/link'
-import s from './ProductCard.module.css'
-import Image, { ImageProps } from 'next/image'
-import WishlistButton from '@components/wishlist/WishlistButton'
-
-interface Props {
-  className?: string
-  product: Product
-  variant?: 'slim' | 'simple'
-  imgProps?: Omit<ImageProps, 'src'>
-}
-
-const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
-  return (
-    <Link href={`product/${product.slug}`}>
-      <a
-        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
-      >
-        {variant === 'slim' ? (
-          <div className="relative overflow-hidden box-border">
-            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
-                {product.name}
-              </span>
-            </div>
-            {product.images[0] && (
-              <Image
-                quality="85"
-                alt={product.name}
-                src={product.images[0].url}
-                height={320}
-                width={320}
-                layout="fixed"
-                {...imgProps}
-              />
-            )}
-          </div>
-        ) : (
-          <>
-            <div className={s.squareBg} />
-            <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-              <div className="absolute top-0 left-0 pr-16 max-w-full">
-                <h3 className={s.productTitle}>
-                  <span>{product.name}</span>
-                </h3>
-                <span className={s.productPrice}>
-                  {product.prices[0].value}
-                  &nbsp;
-                  {product.prices[0].currencyCode}
-                </span>
-              </div>
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0]!}
-              />
-            </div>
-            <div className={s.imageContainer}>
-              {product.images[0] && (
-                <Image
-                  alt={product.name}
-                  className={s.productImage}
-                  src={product.images[0].url}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
-                />
-              )}
-            </div>
-          </>
-        )}
-      </a>
-    </Link>
-  )
-}
-
-export default ProductCard

components/product/ProductCard/ProductCard.tsx

@@ -1,45 +1,20 @@
+import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import Image from 'next/image'
-import type { FC } from 'react'
 import s from './ProductCard.module.css'
+import Image, { ImageProps } from 'next/image'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
-import usePrice from '@framework/product/use-price'
-import type { ProductNode } from '@framework/api/operations/get-all-products'
-
 interface Props {
   className?: string
-  product: ProductNode
+  product: Product
   variant?: 'slim' | 'simple'
-  imgWidth: number | string
-  imgHeight: number | string
-  imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
-  imgPriority?: boolean
-  imgLoading?: 'eager' | 'lazy'
-  imgSizes?: string
+  imgProps?: Omit<ImageProps, 'src'>
 }
 
-const ProductCard: FC<Props> = ({
-  className,
-  product: p,
-  variant,
-  imgWidth,
-  imgHeight,
-  imgPriority,
-  imgLoading,
-  imgSizes,
-  imgLayout = 'responsive',
-}) => {
-  const src = p.images.edges?.[0]?.node?.urlOriginal!
-  const { price } = usePrice({
-    amount: p.prices?.price?.value,
-    baseAmount: p.prices?.retailPrice?.value,
-    currencyCode: p.prices?.price?.currencyCode!,
-  })
-
+const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
   return (
-    <Link href={`/product${p.path}`}>
+    <Link href={`product/${product.slug}`}>
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >
@@ -47,20 +22,20 @@ const ProductCard: FC<Props> = ({
           <div className="relative overflow-hidden box-border">
             <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
               <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
-                {p.name}
+                {product.name}
               </span>
             </div>
-            <Image
-              quality="85"
-              width={imgWidth}
-              sizes={imgSizes}
-              height={imgHeight}
-              layout={imgLayout}
-              loading={imgLoading}
-              priority={imgPriority}
-              src={p.images.edges?.[0]?.node.urlOriginal!}
-              alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
-            />
+            {product.images[0] && (
+              <Image
+                quality="85"
+                alt={product.name}
+                src={product.images[0].url}
+                height={320}
+                width={320}
+                layout="fixed"
+                {...imgProps}
+              />
+            )}
           </div>
         ) : (
           <>
@@ -68,29 +43,33 @@ const ProductCard: FC<Props> = ({
             <div className="flex flex-row justify-between box-border w-full z-20 absolute">
               <div className="absolute top-0 left-0 pr-16 max-w-full">
                 <h3 className={s.productTitle}>
-                  <span>{p.name}</span>
+                  <span>{product.name}</span>
                 </h3>
-                <span className={s.productPrice}>{price}</span>
+                <span className={s.productPrice}>
+                  {product.prices[0].value}
+                  &nbsp;
+                  {product.prices[0].currencyCode}
+                </span>
               </div>
               <WishlistButton
                 className={s.wishlistButton}
-                productId={p.entityId}
-                variant={p.variants.edges?.[0]!}
+                productId={product.id}
+                variant={product.variants[0]!}
               />
             </div>
             <div className={s.imageContainer}>
-              <Image
-                quality="85"
-                src={src}
-                alt={p.name}
-                className={s.productImage}
-                width={imgWidth}
-                sizes={imgSizes}
-                height={imgHeight}
-                layout={imgLayout}
-                loading={imgLoading}
-                priority={imgPriority}
-              />
+              {product.images[0] && (
+                <Image
+                  alt={product.name}
+                  className={s.productImage}
+                  src={product.images[0].url}
+                  height={540}
+                  width={540}
+                  quality="85"
+                  layout="responsive"
+                  {...imgProps}
+                />
+              )}
             </div>
           </>
         )}

pages/index.tsx

@@ -1,7 +1,6 @@
-import rangeMap from '@lib/range-map'
 import { Layout } from '@components/common'
-import ProductCard from '@components/product/ProductCard/FUTURE_ProductCard'
 import { Grid, Marquee, Hero } from '@components/ui'
+import { ProductCard } from '@components/product'
 import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'