diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx index a8abf656f..7a53e6730 100644 --- a/components/grid/tile.tsx +++ b/components/grid/tile.tsx @@ -1,10 +1,52 @@ import { ArrowRightIcon, PhotoIcon } from '@heroicons/react/24/solid'; import clsx from 'clsx'; import Price from 'components/price'; -import { Product } from 'lib/shopify/types'; +import { CONDITIONS } from 'lib/constants'; +import { Product, ProductVariant } from 'lib/shopify/types'; import Image from 'next/image'; import Link from 'next/link'; +const PriceSection = ({ variants }: { variants: ProductVariant[] }) => { + const usedVariants = variants.filter((variant) => variant.condition === CONDITIONS.Used); + + const minUsedVariantPrice = usedVariants.length + ? usedVariants.reduce( + (min, variant) => Math.min(min, Number(variant.price.amount)), + Number(usedVariants[0]?.price.amount) + ) + : null; + + const remanVariants = variants.filter( + (variant) => variant.condition === CONDITIONS.Remanufactured + ); + + const minRemanufacturedPrice = remanVariants.length + ? remanVariants.reduce( + (min, variant) => Math.min(min, Number(variant.price.amount)), + Number(remanVariants[0]?.price.amount) + ) + : null; + + const currencyCode = variants[0]?.price.currencyCode || 'USD'; + + return ( + <div className="flex w-full flex-col gap-1"> + {typeof minUsedVariantPrice === 'number' && ( + <div className="flex flex-row items-center justify-between"> + <span className="text-sm">{CONDITIONS.Used}</span> + <Price amount={String(minUsedVariantPrice)} currencyCode={currencyCode} /> + </div> + )} + {typeof minRemanufacturedPrice === 'number' && ( + <div className="flex flex-row items-center justify-between"> + <span className="text-sm">{CONDITIONS.Remanufactured}</span> + <Price amount={String(minRemanufacturedPrice)} currencyCode={currencyCode} /> + </div> + )} + </div> + ); +}; + export function GridTileImage({ active, product, @@ -17,7 +59,7 @@ export function GridTileImage({ } & React.ComponentProps<typeof Image>) { const metafieldKeys = ['engineCylinders', 'fuelType'] as Partial<keyof Product>[]; const shouldShowDescription = metafieldKeys.some((key) => product[key]); - + const variantsWithCondition = product.variants.filter((variant) => variant.condition !== null); return ( <div className="flex h-full flex-col rounded-b border bg-white"> <div className="grow"> @@ -76,12 +118,16 @@ export function GridTileImage({ ) : null} </div> )} - <div className="flex justify-end border-t py-2"> - <Price - className="text-lg font-medium text-gray-900" - amount={product.priceRange.minVariantPrice.amount} - currencyCode={product.priceRange.minVariantPrice.currencyCode} - /> + <div className="flex justify-end border-t py-3"> + {variantsWithCondition.length ? ( + <PriceSection variants={variantsWithCondition} /> + ) : ( + <Price + className="text-lg font-medium text-gray-900" + amount={product.priceRange.minVariantPrice.amount} + currencyCode={product.priceRange.minVariantPrice.currencyCode} + /> + )} </div> </div> diff --git a/lib/constants.ts b/lib/constants.ts index 33fd75c8c..81e896f7f 100644 --- a/lib/constants.ts +++ b/lib/constants.ts @@ -46,3 +46,8 @@ export const MODEL_FILTER_ID = 'filter.p.m.custom.make_model_composite'; export const YEAR_FILTER_ID = 'filter.p.m.custom.make_model_year_composite'; export const PRODUCT_METAFIELD_PREFIX = 'filter.p.m'; export const VARIANT_METAFIELD_PREFIX = 'filter.v.m'; + +export const CONDITIONS = { + Used: 'Used', + Remanufactured: 'Remanufactured' +};