Fixed product types

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'
@@ -8,8 +9,7 @@ import { getCategoryPath, getDesignerPath } from '@lib/search'
 interface Props {
   categories?: any
   brands?: any
-  // TODO: use the product type here
-  products?: any[]
+  products?: Product[]
 }
 
 const Head: FC<Props> = ({ categories, brands, products = [] }) => {

components/product/ProductCard/ProductCard.tsx

@@ -1,14 +1,14 @@
 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'
 
 interface Props {
   className?: string
-  // TODO: use the product type here
-  product: any
+  product: Product
   variant?: 'slim' | 'simple'
   imgProps?: Omit<ImageProps, 'src'>
 }

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,7 +42,7 @@ const ProductView: FC<Props> = ({ product }) => {
     setLoading(true)
     try {
       await addItem({
-        productId: product.id,
+        productId: String(product.id),
         variantId: variant ? variant.id : product.variants[0].id,
       })
       openSidebar()

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)

framework/bigcommerce/api/catalog/handlers/get-products.ts

@@ -1,4 +1,4 @@
-import { Product } from 'framework/types'
+import { Product } from '@commerce/types'
 import getAllProducts, { ProductEdge } from '../../../product/get-all-products'
 import type { ProductsHandlers } from '../products'
 

framework/bigcommerce/api/catalog/products.ts

@@ -1,3 +1,4 @@
+import type { Product } from '@commerce/types'
 import isAllowedMethod from '../utils/is-allowed-method'
 import createApiHandler, {
   BigcommerceApiHandler,
@@ -5,7 +6,6 @@ import createApiHandler, {
 } from '../utils/create-api-handler'
 import { BigcommerceApiError } from '../utils/errors'
 import getProducts from './handlers/get-products'
-import { Product } from 'framework/types'
 
 export type SearchProductsData = {
   products: Product[]

framework/bigcommerce/api/wishlist/index.ts

@@ -11,6 +11,7 @@ import type {
 import getWishlist from './handlers/get-wishlist'
 import addItem from './handlers/add-item'
 import removeItem from './handlers/remove-item'
+import type { Product, ProductVariant, Customer } from '@commerce/types'
 
 export type { Wishlist, WishlistItem }
 
@@ -24,7 +25,7 @@ export type AddItemBody = { item: ItemBody }
 export type RemoveItemBody = { itemId: Product['id'] }
 
 export type WishlistBody = {
-  customer_id: Customer['id']
+  customer_id: Customer['entityId']
   is_public: number
   name: string
   items: any[]

framework/bigcommerce/lib/normalize.ts

@@ -1,3 +1,4 @@
+import type { Product } from '@commerce/types'
 import type { Cart, BigcommerceCart, LineItem } from '../types'
 import update from './immutability'
 

framework/bigcommerce/product/get-all-products.ts

@@ -2,6 +2,7 @@ import type {
   GetAllProductsQuery,
   GetAllProductsQueryVariables,
 } from '../schema'
+import type { Product } from '@commerce/types'
 import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
 import filterEdges from '../api/utils/filter-edges'
 import setProductLocaleMeta from '../api/utils/set-product-locale-meta'
@@ -94,6 +95,7 @@ async function getAllProducts({
   variables?: ProductVariables
   config?: BigcommerceConfig
   preview?: boolean
+  // TODO: fix the product type here
 } = {}): Promise<{ products: Product[] | any[] }> {
   config = getConfig(config)
 

framework/commerce/types.d.ts

@@ -1,75 +0,0 @@
-interface Entity {
-  id: string | number
-  [prop: string]: any
-}
-
-interface Product extends Entity {
-  name: string
-  description: string
-  slug?: string
-  path?: string
-  images: ProductImage[]
-  variants: ProductVariant[]
-  price: ProductPrice
-  options: ProductOption[]
-  sku?: string
-}
-
-interface ProductOption extends Entity {
-  displayName: string
-  values: ProductOptionValues[]
-}
-
-interface ProductOptionValues {
-  label: string
-  hexColors?: string[]
-}
-
-interface ProductImage {
-  url: string
-  alt?: string
-}
-
-interface ProductVariant {
-  id: string | number
-  options: ProductOption[]
-}
-
-interface ProductPrice {
-  value: number
-  currencyCode: 'USD' | 'ARS' | string | undefined
-  retailPrice?: number
-  salePrice?: number
-  listPrice?: number
-  extendedSalePrice?: number
-  extendedListPrice?: number
-}
-
-interface CartItem extends Entity {
-  quantity: number
-  productId: Product['id']
-  variantId: ProductVariant['id']
-  images: ProductImage[]
-}
-
-interface Wishlist extends Entity {
-  products: Pick<Product, 'id' | 'name' | 'prices'>[]
-}
-
-interface Order {}
-
-interface Customer extends Entity {}
-
-type UseCustomerResponse = {
-  customer: Customer
-} | null
-
-interface Category extends Entity {
-  name: string
-}
-
-interface Brand extends Entity {
-  name: string
-}
-
-type Features = 'wishlist' | 'customer'

framework/commerce/types.ts

@@ -148,3 +148,54 @@ export interface RemoveCartItemBody {
 export interface RemoveCartItemHandlerBody extends Partial<RemoveCartItemBody> {
   cartId?: string
 }
+
+/**
+ * Temporal types
+ */
+
+interface Entity {
+  id: string | number
+  [prop: string]: any
+}
+
+export interface Product extends Entity {
+  name: string
+  description: string
+  slug?: string
+  path?: string
+  images: ProductImage[]
+  variants: ProductVariant2[]
+  price: ProductPrice
+  options: ProductOption[]
+  sku?: string
+}
+
+interface ProductOption extends Entity {
+  displayName: string
+  values: ProductOptionValues[]
+}
+
+interface ProductOptionValues {
+  label: string
+  hexColors?: string[]
+}
+
+interface ProductImage {
+  url: string
+  alt?: string
+}
+
+interface ProductVariant2 {
+  id: string | number
+  options: ProductOption[]
+}
+
+interface ProductPrice {
+  value: number
+  currencyCode: 'USD' | 'ARS' | string | undefined
+  retailPrice?: number
+  salePrice?: number
+  listPrice?: number
+  extendedSalePrice?: number
+  extendedListPrice?: number
+}