Updated Shopify Provider Structure

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'

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

@@ -11,7 +11,7 @@ import CartSidebarView from '@components/cart/CartSidebarView'
 
 import LoginView from '@components/auth/LoginView'
 import { CommerceProvider } from '@framework'
-import type { Page } from '@framework/common/get-all-pages'
+import type { Page } from '@commerce/types/page'
 
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">

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

@@ -52,4 +52,4 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
   )
 }
 
-export default Swatch
+export default Swatch

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'
@@ -18,14 +18,17 @@ interface Props {
 
 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()
 

framework/bigcommerce/api/endpoints/cart/add-item.ts

@@ -1,4 +1,4 @@
-import { normalizeCart } from '@framework/lib/normalize'
+import { normalizeCart } from '../../../lib/normalize'
 import { parseCartItem } from '../../utils/parse-item'
 import getCartCookie from '../../utils/get-cart-cookie'
 import type { CartEndpoint } from '.'

framework/bigcommerce/api/endpoints/cart/get-cart.ts

@@ -1,7 +1,7 @@
-import { normalizeCart } from '@framework/lib/normalize'
+import { normalizeCart } from '../../../lib/normalize'
 import { BigcommerceApiError } from '../../utils/errors'
 import getCartCookie from '../../utils/get-cart-cookie'
-import type { BigcommerceCart } from '../../../types'
+import type { BigcommerceCart } from '../../../types/cart'
 import type { CartEndpoint } from '.'
 
 // Return current cart info

framework/bigcommerce/api/endpoints/cart/remove-item.ts

@@ -1,4 +1,4 @@
-import { normalizeCart } from '@framework/lib/normalize'
+import { normalizeCart } from '../../../lib/normalize'
 import getCartCookie from '../../utils/get-cart-cookie'
 import type { CartEndpoint } from '.'
 

framework/bigcommerce/api/endpoints/cart/update-item.ts

@@ -1,4 +1,4 @@
-import { normalizeCart } from '@framework/lib/normalize'
+import { normalizeCart } from '../../../lib/normalize'
 import { parseCartItem } from '../../utils/parse-item'
 import getCartCookie from '../../utils/get-cart-cookie'
 import type { CartEndpoint } from '.'

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

@@ -25,10 +25,10 @@ const getProducts: ProductsEndpoint['handlers']['getProducts'] = async ({
   if (search) url.searchParams.set('keyword', search)
 
   if (categoryId && Number.isInteger(Number(categoryId)))
-    url.searchParams.set('categories:in', categoryId)
+    url.searchParams.set('categories:in', String(categoryId))
 
   if (brandId && Number.isInteger(Number(brandId)))
-    url.searchParams.set('brand_id', brandId)
+    url.searchParams.set('brand_id', String(brandId))
 
   if (sort) {
     const [_sort, direction] = sort.split('-')

framework/bigcommerce/api/operations/get-all-product-paths.ts

@@ -32,12 +32,12 @@ export default function getAllProductPathsOperation({
     config?: BigcommerceConfig
   }): Promise<T['data']>
 
-  async function getAllProductPaths<
-    T extends GetAllProductPathsOperation
-  >(opts: {
-    variables?: T['variables']
-    config?: BigcommerceConfig
-  } & OperationOptions): Promise<T['data']>
+  async function getAllProductPaths<T extends GetAllProductPathsOperation>(
+    opts: {
+      variables?: T['variables']
+      config?: BigcommerceConfig
+    } & OperationOptions
+  ): Promise<T['data']>
 
   async function getAllProductPaths<T extends GetAllProductPathsOperation>({
     query = getAllProductPathsQuery,

framework/bigcommerce/api/operations/get-page.ts

@@ -5,6 +5,7 @@ import type {
 import type { GetPageOperation, Page } from '../../types/page'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import type { BigcommerceConfig, Provider } from '..'
+import { normalizePage } from '../../lib/normalize'
 
 export default function getPageOperation({
   commerce,
@@ -44,7 +45,7 @@ export default function getPageOperation({
     const page = firstPage as RecursiveRequired<typeof firstPage>
 
     if (preview || page?.is_visible) {
-      return { page }
+      return { page: normalizePage(page as any) }
     }
     return {}
   }

framework/bigcommerce/api/utils/parse-item.ts

@@ -1,5 +1,5 @@
-import type { ItemBody as WishlistItemBody } from '../wishlist'
-import type { CartItemBody, OptionSelections } from '../../types'
+import type { WishlistItemBody } from '../../types/wishlist'
+import type { CartItemBody, OptionSelections } from '../../types/cart'
 
 type BCWishlistItemBody = {
   product_id: number

framework/bigcommerce/cart/use-add-item.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
 import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
-import type { AddItemHook } from '../types/cart'
+import type { AddItemHook } from '@commerce/types/cart'
 import useCart from './use-cart'
 
 export default useAddItem as UseAddItem<typeof handler>

framework/bigcommerce/cart/use-cart.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { SWRHook } from '@commerce/utils/types'
 import useCart, { UseCart } from '@commerce/cart/use-cart'
-import type { GetCartHook } from '../types/cart'
+import type { GetCartHook } from '@commerce/types/cart'
 
 export default useCart as UseCart<typeof handler>
 

framework/bigcommerce/cart/use-remove-item.tsx

@@ -5,11 +5,11 @@ import type {
 } from '@commerce/utils/types'
 import { ValidationError } from '@commerce/utils/errors'
 import useRemoveItem, { UseRemoveItem } from '@commerce/cart/use-remove-item'
-import type { Cart, LineItem, RemoveItemHook } from '../types/cart'
+import type { Cart, LineItem, RemoveItemHook } from '@commerce/types/cart'
 import useCart from './use-cart'
 
 export type RemoveItemFn<T = any> = T extends LineItem
-  ? (input?: RemoveItemActionInput<T>) => Promise<Cart | null>
+  ? (input?: RemoveItemActionInput<T>) => Promise<Cart | null | undefined>
   : (input: RemoveItemActionInput<T>) => Promise<Cart | null>
 
 export type RemoveItemActionInput<T = any> = T extends LineItem

framework/bigcommerce/cart/use-update-item.tsx

@@ -6,7 +6,7 @@ import type {
 } from '@commerce/utils/types'
 import { ValidationError } from '@commerce/utils/errors'
 import useUpdateItem, { UseUpdateItem } from '@commerce/cart/use-update-item'
-import type { LineItem, UpdateItemHook } from '../types/cart'
+import type { LineItem, UpdateItemHook } from '@commerce/types/cart'
 import { handler as removeItemHandler } from './use-remove-item'
 import useCart from './use-cart'
 

framework/bigcommerce/lib/normalize.ts

@@ -1,6 +1,8 @@
-import type { Product } from '@commerce/types'
-import type { Cart, BigcommerceCart, LineItem } from '../types'
+import type { Product } from '../types/product'
+import type { Cart, BigcommerceCart, LineItem } from '../types/cart'
+import type { Page } from '../types/page'
 import update from './immutability'
+import { definitions } from '../api/definitions/store-content'
 
 function normalizeProductOption(productOption: any) {
   const {
@@ -69,6 +71,16 @@ export function normalizeProduct(productNode: any): Product {
   })
 }
 
+export function normalizePage(page: definitions['page_Full']): Page {
+  return {
+    id: String(page.id),
+    name: page.name,
+    is_visible: page.is_visible,
+    sort_order: page.sort_order,
+    body: page.body,
+  }
+}
+
 export function normalizeCart(data: BigcommerceCart): Cart {
   return {
     id: data.id,

framework/bigcommerce/product/use-search.tsx

@@ -9,6 +9,7 @@ export type SearchProductsInput = {
   categoryId?: number
   brandId?: number
   sort?: string
+  locale?: string
 }
 
 export const handler: SWRHook<SearchProductsHook> = {

framework/bigcommerce/types/page.ts

@@ -1,9 +1,7 @@
 import * as Core from '@commerce/types/page'
-import { definitions } from '../api/definitions/store-content'
-
 export * from '@commerce/types/page'
 
-export type Page = definitions['page_Full']
+export type Page = Core.Page
 
 export type PageTypes = {
   page: Page

framework/commerce/api/index.ts

@@ -148,6 +148,7 @@ export const createEndpoint = <API extends GetAPISchema<any, any>>(
 
 export interface CommerceAPIConfig {
   locale?: string
+  locales?: string[]
   commerceUrl: string
   apiToken: string
   cartCookie: string

framework/commerce/index.tsx

@@ -6,35 +6,44 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import { Fetcher, SWRHook, MutationHook } from './utils/types'
-import type { FetchCartInput } from './cart/use-cart'
-import type { Cart, Wishlist, Customer, SearchProductsData } from './types'
+
+import type {
+  Customer,
+  Wishlist,
+  Cart,
+  Product,
+  Signup,
+  Login,
+  Logout,
+} from '@commerce/types'
+
+import type { Fetcher, SWRHook, MutationHook } from './utils/types'
 
 const Commerce = createContext<CommerceContextValue<any> | {}>({})
 
 export type Provider = CommerceConfig & {
   fetcher: Fetcher
   cart?: {
-    useCart?: SWRHook<Cart | null, any, FetchCartInput>
-    useAddItem?: MutationHook<any, any, any>
-    useUpdateItem?: MutationHook<any, any, any>
-    useRemoveItem?: MutationHook<any, any, any>
+    useCart?: SWRHook<Cart.GetCartHook>
+    useAddItem?: MutationHook<Cart.AddItemHook>
+    useUpdateItem?: MutationHook<Cart.UpdateItemHook>
+    useRemoveItem?: MutationHook<Cart.RemoveItemHook>
   }
   wishlist?: {
-    useWishlist?: SWRHook<Wishlist | null, any, any>
-    useAddItem?: MutationHook<any, any, any>
-    useRemoveItem?: MutationHook<any, any, any>
+    useWishlist?: SWRHook<Wishlist.GetWishlistHook>
+    useAddItem?: MutationHook<Wishlist.AddItemHook>
+    useRemoveItem?: MutationHook<Wishlist.RemoveItemHook>
   }
   customer?: {
-    useCustomer?: SWRHook<Customer | null, any, any>
+    useCustomer?: SWRHook<Customer.CustomerHook>
   }
   products?: {
-    useSearch?: SWRHook<SearchProductsData, any, any>
+    useSearch?: SWRHook<Product.SearchProductsHook>
   }
   auth?: {
-    useSignup?: MutationHook<any, any, any>
-    useLogin?: MutationHook<any, any, any>
-    useLogout?: MutationHook<any, any, any>
+    useSignup?: MutationHook<Signup.SignupHook>
+    useLogin?: MutationHook<Login.LoginHook>
+    useLogout?: MutationHook<Logout.LogoutHook>
   }
 }