[WIP] Node.js provider for the API

components/cart/CartItem/CartItem.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import s from './CartItem.module.css'
 import { Trash, Plus, Minus } from '@components/icons'
 import { useUI } from '@components/ui/context'
-import type { LineItem } from '@framework/types'
+import type { LineItem } from '@commerce/types/cart'
 import usePrice from '@framework/product/use-price'
 import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
@@ -35,18 +35,18 @@ const CartItem = ({
 
   const updateItem = useUpdateItem({ item })
   const removeItem = useRemoveItem()
-  const [quantity, setQuantity] = useState(item.quantity)
+  const [quantity, setQuantity] = useState<number | ''>(item.quantity)
   const [removing, setRemoving] = useState(false)
 
   const updateQuantity = async (val: number) => {
     await updateItem({ quantity: val })
   }
 
   const handleQuantity = (e: ChangeEvent<HTMLInputElement>) => {
-    const val = Number(e.target.value)
+    const val = !e.target.value ? '' : Number(e.target.value)
 
-    if (Number.isInteger(val) && val >= 0) {
-      setQuantity(Number(e.target.value))
+    if (!val || (Number.isInteger(val) && val >= 0)) {
+      setQuantity(val)
     }
   }
   const handleBlur = () => {

components/common/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import type { Page } from '@framework/common/get-all-pages'
+import type { Page } from '@commerce/types/page'
 import getSlug from '@lib/get-slug'
 import { Github, Vercel } from '@components/icons'
 import { Logo, Container } from '@components/ui'

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

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

components/common/Layout/Layout.tsx

@@ -1,16 +1,17 @@
-import cn from 'classnames'
-import dynamic from 'next/dynamic'
-import s from './Layout.module.css'
-import { useRouter } from 'next/router'
 import React, { FC } from 'react'
+import { useRouter } from 'next/router'
+import dynamic from 'next/dynamic'
+import cn from 'classnames'
+import type { Page } from '@commerce/types/page'
+import type { Category } from '@commerce/types/site'
+import { CommerceProvider } from '@framework'
+import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { useUI } from '@components/ui/context'
 import { Navbar, Footer } from '@components/common'
-import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
 import CartSidebarView from '@components/cart/CartSidebarView'
-import type { Page, Category } from '@commerce/types'
 import LoginView from '@components/auth/LoginView'
-import { CommerceProvider } from '@framework'
+import s from './Layout.module.css'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">

components/common/Navbar/Navbar.tsx

@@ -27,13 +27,11 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
             <Link href="/search">
               <a className={s.link}>All</a>
             </Link>
-            {links
-              ? links.map((l) => (
-                  <Link href={l.href}>
-                    <a className={s.link}>{l.label}</a>
-                  </Link>
-                ))
-              : null}
+            {links?.map((l) => (
+              <Link href={l.href} key={l.href}>
+                <a className={s.link}>{l.label}</a>
+              </Link>
+            ))}
           </nav>
         </div>
 

components/common/UserNav/UserNav.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import cn from 'classnames'
-import type { LineItem } from '@framework/types'
+import type { LineItem } from '@commerce/types/cart'
 import useCart from '@framework/cart/use-cart'
 import useCustomer from '@framework/customer/use-customer'
 import { Avatar } from '@components/common'

components/product/ProductCard/ProductCard.tsx

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

components/product/ProductView/ProductView.tsx

@@ -5,7 +5,7 @@ import { FC, useEffect, useState } from 'react'
 import s from './ProductView.module.css'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text, useUI } from '@components/ui'
-import type { Product } from '@commerce/types'
+import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
 import { getVariant, SelectedOptions } from '../helpers'
@@ -18,6 +18,8 @@ interface Props {
 }
 
 const ProductView: FC<Props> = ({ product }) => {
+  // TODO: fix this missing argument issue
+  /* @ts-ignore */
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
@@ -146,8 +148,11 @@ const ProductView: FC<Props> = ({ product }) => {
               className={s.button}
               onClick={addToCart}
               loading={loading}
+              disabled={variant?.availableForSale === false}
             >
-              Add to Cart
+              {variant?.availableForSale === false
+                ? 'Not Available'
+                : 'Add To Cart'}
             </Button>
           </div>
         </div>

components/product/Swatch/Swatch.tsx

@@ -44,14 +44,15 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
       className={swatchClassName}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
+      {...(label && color && { title: label })}
       {...props}
     >
-      {variant === 'color' && active && (
+      {color && active && (
         <span>
           <Check />
         </span>
       )}
-      {variant !== 'color' ? label : null}
+      {!color ? label : null}
     </Button>
   )
 }

components/product/helpers.ts

@@ -1,4 +1,4 @@
-import type { Product } from '@commerce/types'
+import type { Product } from '@commerce/types/product'
 export type SelectedOptions = Record<string, string | null>
 
 export function getVariant(product: Product, opts: SelectedOptions) {

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -6,7 +6,7 @@ import useAddItem from '@framework/wishlist/use-add-item'
 import useCustomer from '@framework/customer/use-customer'
 import useWishlist from '@framework/wishlist/use-wishlist'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
-import type { Product, ProductVariant } from '@commerce/types'
+import type { Product, ProductVariant } from '@commerce/types/product'
 
 type Props = {
   productId: Product['id']

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -7,7 +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 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'
@@ -20,14 +20,17 @@ const placeholderImg = '/product-img-placeholder.svg'
 
 const WishlistCard: FC<Props> = ({ product }) => {
   const { price } = usePrice({
-    amount: product.prices?.price?.value,
-    baseAmount: product.prices?.retailPrice?.value,
-    currencyCode: product.prices?.price?.currencyCode!,
+    amount: product.price?.value,
+    baseAmount: product.price?.retailPrice,
+    currencyCode: product.price?.currencyCode!,
   })
   // @ts-ignore Wishlist is not always enabled
   const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
   const [loading, setLoading] = useState(false)
   const [removing, setRemoving] = useState(false)
+
+  // TODO: fix this missing argument issue
+  /* @ts-ignore */
   const addItem = useAddItem()
   const { openSidebar } = useUI()