Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic

components/cart/CartItem/CartItem.tsx

@@ -75,6 +75,8 @@ const CartItem = ({
       setRemoving(false)
     }
   }
+  // TODO: Add a type for this
+  const options = (item as any).options
 
   useEffect(() => {
     // Reset the quantity state if the item quantity changes
@@ -95,8 +97,8 @@ const CartItem = ({
           className={s.productImage}
           width={150}
           height={150}
-          src={item.variant.image.url}
-          alt={item.variant.image.altText}
+          src={item.variant.image!.url}
+          alt={item.variant.image!.altText}
           unoptimized
         />
       </div>
@@ -109,15 +111,15 @@ const CartItem = ({
             {item.name}
           </span>
         </Link>
-        {item.options && item.options.length > 0 ? (
+        {options && options.length > 0 ? (
           <div className="">
-            {item.options.map((option: ItemOption, i: number) => (
+            {options.map((option: ItemOption, i: number) => (
               <span
                 key={`${item.id}-${option.name}`}
                 className="text-sm font-semibold text-accents-7"
               >
                 {option.value}
-                {i === item.options.length - 1 ? '' : ', '}
+                {i === options.length - 1 ? '' : ', '}
               </span>
             ))}
           </div>

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
+import type { Product } from '@commerce/types'
 import { Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import s from './HomeAllProductsGrid.module.css'

components/product/ProductCard/ProductCard.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
+import type { Product } from '@commerce/types'
 import s from './ProductCard.module.css'
 import Image, { ImageProps } from 'next/image'
 // import WishlistButton from '@components/wishlist/WishlistButton'

components/product/ProductView/ProductView.tsx

@@ -8,6 +8,7 @@ import { useUI } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text } from '@components/ui'
 
+import type { Product } from '@commerce/types'
 import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 
@@ -41,8 +42,8 @@ const ProductView: FC<Props> = ({ product }) => {
     setLoading(true)
     try {
       await addItem({
-        productId: product.id,
-        variantId: variant ? variant.id : product.variants[0].id,
+        productId: String(product.id),
+        variantId: String(variant ? variant.id : product.variants[0].id),
       })
       openSidebar()
       setLoading(false)

components/product/helpers.ts

@@ -1,3 +1,5 @@
+import type { Product } from '@commerce/types'
+
 export type SelectedOptions = {
   size: string | null
   color: string | null

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames'
 import { Heart } from '@components/icons'
 
 import { useUI } from '@components/ui'
+import type { Product, ProductVariant } from '@commerce/types'
 import useCustomer from '@framework/customer/use-customer'
 import useAddItem from '@framework/wishlist/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -7,6 +7,7 @@ import { Trash } from '@components/icons'
 import { Button, Text } from '@components/ui'
 
 import { useUI } from '@components/ui/context'
+import type { Product } from '@commerce/types'
 import usePrice from '@framework/product/use-price'
 import useAddItem from '@framework/cart/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
@@ -42,8 +43,8 @@ const WishlistCard: FC<Props> = ({ product }) => {
     setLoading(true)
     try {
       await addItem({
-        productId: product.id,
-        variantId: product.variants[0].id,
+        productId: String(product.id),
+        variantId: String(product.variants[0].id),
       })
       openSidebar()
       setLoading(false)