Update types (#831)

* Update product types

* Cart types progress, add zod & initial schema validator

* Update normalize.ts

* Update with-schema-parser.ts

* Updated types, schemas & providers

* Fix providers after schema parse errors

* Fix paths

* More provider fixes

* Fix kibocommerce & commercejs

* Add customer updated types & fixes

* Add checkout & customer types

* Import core types only from commerce

* Update tsconfig.json

* Convert hooks interfaces to types

* Requested changes

* Change to relative paths

* Move Zod dependency

site/components/cart/CartItem/CartItem.tsx

@@ -93,7 +93,7 @@ const CartItem = ({
                 width={150}
                 height={150}
                 src={item.variant.image?.url || placeholderImg}
-                alt={item.variant.image?.altText || "Product Image"}
+                alt={item.variant.image?.alt || 'Product Image'}
                 unoptimized
               />
             </a>

site/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -5,10 +5,11 @@ import { Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import s from './HomeAllProductsGrid.module.css'
 import { getCategoryPath, getDesignerPath } from '@lib/search'
+import { Brand, Category } from '@commerce/types/site'
 
 interface Props {
-  categories?: any
-  brands?: any
+  categories?: Category[]
+  brands?: Brand[]
   products?: Product[]
 }
 
@@ -27,7 +28,7 @@ const HomeAllProductsGrid: FC<Props> = ({
                 <a>All Categories</a>
               </Link>
             </li>
-            {categories.map((cat: any) => (
+            {categories?.map((cat: any) => (
               <li key={cat.path} className="py-1 text-accent-8 text-base">
                 <Link href={getCategoryPath(cat.path)}>
                   <a>{cat.name}</a>
@@ -41,10 +42,10 @@ const HomeAllProductsGrid: FC<Props> = ({
                 <a>All Designers</a>
               </Link>
             </li>
-            {brands.flatMap(({ node }: any) => (
-              <li key={node.path} className="py-1 text-accent-8 text-base">
-                <Link href={getDesignerPath(node.path)}>
-                  <a>{node.name}</a>
+            {brands?.map(({ path, name }) => (
+              <li key={path} className="py-1 text-accent-8 text-base">
+                <Link href={getDesignerPath(path)}>
+                  <a>{name}</a>
                 </Link>
               </li>
             ))}

site/components/search.tsx

@@ -4,9 +4,11 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
 
+import type { Brand } from '@commerce/types/site'
+import type { Product } from '@commerce/types/product'
+
 import { Layout } from '@components/common'
 import { ProductCard } from '@components/product'
-import type { Product } from '@commerce/types/product'
 import { Container, Skeleton } from '@components/ui'
 
 import useSearch from '@framework/product/use-search'
@@ -41,19 +43,22 @@ export default function Search({ categories, brands }: SearchPropsType) {
   const query = filterQuery({ sort })
 
   const { pathname, category, brand } = useSearchMeta(asPath)
-  const activeCategory = categories.find((cat: any) => cat.slug === category)
-  const activeBrand = brands.find(
-    (b: any) => getSlug(b.node.path) === `brands/${brand}`
-  )?.node
 
-  const { data } = useSearch({
+  const activeCategory = categories.find((cat: any) => cat.slug === category)
+  const activeBrand = brands.find((b: Brand) => b.slug === brand)
+
+  const { data, error } = useSearch({
     search: typeof q === 'string' ? q : '',
     categoryId: activeCategory?.id,
-    brandId: (activeBrand as any)?.entityId,
+    brandId: (activeBrand as any)?.id,
     sort: typeof sort === 'string' ? sort : '',
     locale,
   })
 
+  if (error) {
+    return <div>Failed to load</div>
+  }
+
   const handleClick = (event: any, filter: string) => {
     if (filter !== activeFilter) {
       setToggleFilter(true)
@@ -233,20 +238,19 @@ export default function Search({ categories, brands }: SearchPropsType) {
                         </a>
                       </Link>
                     </li>
-                    {brands.flatMap(({ node }: { node: any }) => (
+                    {brands.map(({ path, name, id }: Brand) => (
                       <li
-                        key={node.path}
+                        key={path}
                         className={cn(
                           'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
                           {
-                            // @ts-ignore Shopify - Fix this types
-                            underline: activeBrand?.entityId === node.entityId,
+                            underline: activeBrand?.id === id,
                           }
                         )}
                       >
                         <Link
                           href={{
-                            pathname: getDesignerPath(node.path, category),
+                            pathname: getDesignerPath(path, category),
                             query,
                           }}
                         >
@@ -256,7 +260,7 @@ export default function Search({ categories, brands }: SearchPropsType) {
                               'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
                             }
                           >
-                            {node.name}
+                            {name}
                           </a>
                         </Link>
                       </li>

site/components/wishlist/WishlistButton/WishlistButton.tsx

@@ -30,9 +30,7 @@ const WishlistButton: FC<Props> = ({
   // @ts-ignore Wishlist is not always enabled
   const itemInWishlist = data?.items?.find(
     // @ts-ignore Wishlist is not always enabled
-    (item) =>
-      item.product_id === Number(productId) &&
-      item.variant_id === Number(variant.id)
+    (item) => item.product_id === productId && item.variant_id === variant.id
   )
 
   const handleWishlistChange = async (e: any) => {

site/components/wishlist/WishlistCard/WishlistCard.tsx

@@ -11,12 +11,12 @@ import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
 import useAddItem from '@framework/cart/use-add-item'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
-import type { Wishlist } from '@commerce/types/wishlist'
+import type { WishlistItem } from '@commerce/types/wishlist'
 
 const placeholderImg = '/product-img-placeholder.svg'
 
 const WishlistCard: React.FC<{
-  item: Wishlist
+  item: WishlistItem
 }> = ({ item }) => {
   const product: Product = item.product
   const { price } = usePrice({