>
->
-
-export type UseAddItem = Partial<
- UseAddItemInput
-> extends UseAddItemInput
- ? (input?: UseAddItemInput
) => (input: Input) => UseAddItemResult
- : (input: UseAddItemInput
) => (input: Input) => UseAddItemResult
+export type UseAddItem<
+ H extends MutationHook = MutationHook
+> = ReturnType
export const fetcher: HookFetcherFn<
Cart,
AddCartItemBody
-> = async ({ options, input, fetch }) => {
- return fetch({ ...options, body: input })
+> = mutationFetcher
+
+const fn = (provider: Provider) => provider.cart?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+ const hook = useHook(fn)
+ return useMutationHook({ fetcher, ...hook })(...args)
}
-type X = UseAddItemResult
-
-export default function useAddItem(
- input: UseAddItemInput
-) {
- const { providerRef, fetcherRef } = useCommerce
()
-
- const provider = providerRef.current
- const opts = provider.cart?.useAddItem
-
- const fetcherFn = opts?.fetcher ?? fetcher
- const useHook = opts?.useHook ?? (() => () => {})
- const fetchFn = provider.fetcher ?? fetcherRef.current
- const action = useHook({ input })
-
- return useCallback(
- function addItem(input: Input) {
- return action({
- input,
- fetch({ input }) {
- return fetcherFn({
- input,
- options: opts!.fetchOptions,
- fetch: fetchFn,
- })
- },
- })
- },
- [input, fetchFn, opts?.fetchOptions]
- )
-}
+export default useAddItem
diff --git a/framework/commerce/cart/use-cart-actions.tsx b/framework/commerce/cart/use-cart-actions.tsx
deleted file mode 100644
index 3ba4b2e1a..000000000
--- a/framework/commerce/cart/use-cart-actions.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { HookFetcher, HookFetcherOptions } from '../utils/types'
-import useAddItem from './use-add-item'
-import useRemoveItem from './use-remove-item'
-import useUpdateItem from './use-update-item'
-
-// This hook is probably not going to be used, but it's here
-// to show how a commerce should be structuring it
-export default function useCartActions(
- options: HookFetcherOptions,
- fetcher: HookFetcher
-) {
- const addItem = useAddItem(options, fetcher)
- const updateItem = useUpdateItem(options, fetcher)
- const removeItem = useRemoveItem(options, fetcher)
-
- return { addItem, updateItem, removeItem }
-}
diff --git a/framework/commerce/cart/use-cart.tsx b/framework/commerce/cart/use-cart.tsx
index f7b384047..fbed715c8 100644
--- a/framework/commerce/cart/use-cart.tsx
+++ b/framework/commerce/cart/use-cart.tsx
@@ -1,34 +1,21 @@
import Cookies from 'js-cookie'
+import { useHook, useSWRHook } from '../utils/use-hook'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Cart } from '../types'
-import type {
- Prop,
- HookFetcherFn,
- UseHookInput,
- UseHookResponse,
-} from '../utils/types'
-import useData from '../utils/use-data'
import { Provider, useCommerce } from '..'
export type FetchCartInput = {
cartId?: Cart['id']
}
-export type UseCartHandler = Prop<
- Prop,
- 'useCart'
->
-
-export type UseCartInput = UseHookInput>
-
-export type CartResponse = UseHookResponse<
- UseCartHandler
->
-
-export type UseCart
= Partial<
- UseCartInput
-> extends UseCartInput
- ? (input?: UseCartInput
) => CartResponse
- : (input: UseCartInput
) => CartResponse
+export type UseCart<
+ H extends SWRHook = SWRHook<
+ Cart | null,
+ {},
+ FetchCartInput,
+ { isEmpty?: boolean }
+ >
+> = ReturnType
export const fetcher: HookFetcherFn = async ({
options,
@@ -38,32 +25,17 @@ export const fetcher: HookFetcherFn = async ({
return cartId ? await fetch({ ...options }) : null
}
-export default function useCart(
- input: UseCartInput
= {}
-) {
- const { providerRef, fetcherRef, cartCookie } = useCommerce
()
-
- const provider = providerRef.current
- const opts = provider.cart?.useCart
-
- const fetcherFn = opts?.fetcher ?? fetcher
- const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
+const fn = (provider: Provider) => provider.cart?.useCart!
+const useCart: UseCart = (input) => {
+ const hook = useHook(fn)
+ const { cartCookie } = useCommerce()
+ const fetcherFn = hook.fetcher ?? fetcher
const wrapper: typeof fetcher = (context) => {
context.input.cartId = Cookies.get(cartCookie)
return fetcherFn(context)
}
-
- return useHook({
- input,
- useData(ctx) {
- const response = useData(
- { ...opts!, fetcher: wrapper },
- ctx?.input ?? [],
- provider.fetcher ?? fetcherRef.current,
- ctx?.swrOptions ?? input.swrOptions
- )
- return response
- },
- })
+ return useSWRHook({ ...hook, fetcher: wrapper })(input)
}
+
+export default useCart
diff --git a/framework/commerce/cart/use-remove-item.tsx b/framework/commerce/cart/use-remove-item.tsx
index 8a63b1b73..a9d1b37d2 100644
--- a/framework/commerce/cart/use-remove-item.tsx
+++ b/framework/commerce/cart/use-remove-item.tsx
@@ -1,10 +1,35 @@
-import useAction from '../utils/use-action'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Cart, LineItem, RemoveCartItemBody } from '../types'
+import type { Provider } from '..'
-// Input expected by the action returned by the `useRemoveItem` hook
-export interface RemoveItemInput {
+/**
+ * Input expected by the action returned by the `useRemoveItem` hook
+ */
+export type RemoveItemInput = {
id: string
}
-const useRemoveItem = useAction
+export type UseRemoveItem<
+ H extends MutationHook = MutationHook<
+ Cart | null,
+ { item?: LineItem },
+ RemoveItemInput,
+ RemoveCartItemBody
+ >
+> = ReturnType
+
+export const fetcher: HookFetcherFn<
+ Cart | null,
+ RemoveCartItemBody
+> = mutationFetcher
+
+const fn = (provider: Provider) => provider.cart?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+ const hook = useHook(fn)
+ return useMutationHook({ fetcher, ...hook })(input)
+}
export default useRemoveItem
diff --git a/framework/commerce/cart/use-update-item.tsx b/framework/commerce/cart/use-update-item.tsx
index e1adcb5fb..f8d0f1a40 100644
--- a/framework/commerce/cart/use-update-item.tsx
+++ b/framework/commerce/cart/use-update-item.tsx
@@ -1,11 +1,38 @@
-import useAction from '../utils/use-action'
-import type { CartItemBody } from '../types'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Cart, CartItemBody, LineItem, UpdateCartItemBody } from '../types'
+import type { Provider } from '..'
-// Input expected by the action returned by the `useUpdateItem` hook
+/**
+ * Input expected by the action returned by the `useUpdateItem` hook
+ */
export type UpdateItemInput = T & {
id: string
}
-const useUpdateItem = useAction
+export type UseUpdateItem<
+ H extends MutationHook = MutationHook<
+ Cart | null,
+ {
+ item?: LineItem
+ wait?: number
+ },
+ UpdateItemInput,
+ UpdateCartItemBody
+ >
+> = ReturnType
+
+export const fetcher: HookFetcherFn<
+ Cart | null,
+ UpdateCartItemBody
+> = mutationFetcher
+
+const fn = (provider: Provider) => provider.cart?.useUpdateItem!
+
+const useUpdateItem: UseUpdateItem = (input) => {
+ const hook = useHook(fn)
+ return useMutationHook({ fetcher, ...hook })(input)
+}
export default useUpdateItem
diff --git a/framework/commerce/config.js b/framework/commerce/config.js
new file mode 100644
index 000000000..dc016d47a
--- /dev/null
+++ b/framework/commerce/config.js
@@ -0,0 +1,68 @@
+/**
+ * This file is expected to be used in next.config.js only
+ */
+
+const path = require('path')
+const fs = require('fs')
+const merge = require('deepmerge')
+const prettier = require('prettier')
+
+const PROVIDERS = ['bigcommerce', 'shopify', 'swell', 'vendure']
+
+function getProviderName() {
+ return (
+ process.env.COMMERCE_PROVIDER ||
+ (process.env.BIGCOMMERCE_STOREFRONT_API_URL
+ ? 'bigcommerce'
+ : process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+ ? 'shopify'
+ : process.env.NEXT_PUBLIC_SWELL_STORE_ID
+ ? 'swell'
+ : null)
+ )
+}
+
+function withCommerceConfig(nextConfig = {}) {
+ const commerce = nextConfig.commerce || {}
+ const name = commerce.provider || getProviderName()
+
+ if (!name) {
+ throw new Error(
+ `The commerce provider is missing, please add a valid provider name or its environment variables`
+ )
+ }
+ if (!PROVIDERS.includes(name)) {
+ throw new Error(
+ `The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
+ ', '
+ )}"`
+ )
+ }
+
+ const commerceNextConfig = require(path.join('../', name, 'next.config'))
+ const config = merge(commerceNextConfig, nextConfig)
+
+ config.env = config.env || {}
+
+ Object.entries(config.commerce.features).forEach(([k, v]) => {
+ if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
+ })
+
+ // Update paths in `tsconfig.json` to point to the selected provider
+ if (config.commerce.updateTSConfig !== false) {
+ const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
+ const tsconfig = require(tsconfigPath)
+
+ tsconfig.compilerOptions.paths['@framework'] = [`framework/${name}`]
+ tsconfig.compilerOptions.paths['@framework/*'] = [`framework/${name}/*`]
+
+ fs.writeFileSync(
+ tsconfigPath,
+ prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
+ )
+ }
+
+ return config
+}
+
+module.exports = { withCommerceConfig, getProviderName }
diff --git a/framework/commerce/customer/use-customer.tsx b/framework/commerce/customer/use-customer.tsx
index 25112128e..5d6416a4b 100644
--- a/framework/commerce/customer/use-customer.tsx
+++ b/framework/commerce/customer/use-customer.tsx
@@ -1,56 +1,20 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Customer } from '../types'
-import type {
- Prop,
- HookFetcherFn,
- UseHookInput,
- UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
+import { Provider } from '..'
-export type UseCustomerHandler = Prop<
- Prop,
- 'useCustomer'
->
+export type UseCustomer<
+ H extends SWRHook = SWRHook
+> = ReturnType
-export type UseCustomerInput = UseHookInput<
- UseCustomerHandler
->
+export const fetcher: HookFetcherFn = SWRFetcher
-export type CustomerResponse = UseHookResponse<
- UseCustomerHandler
->
+const fn = (provider: Provider) => provider.customer?.useCustomer!
-export type UseCustomer
= Partial<
- UseCustomerInput
-> extends UseCustomerInput
- ? (input?: UseCustomerInput
) => CustomerResponse
- : (input: UseCustomerInput
) => CustomerResponse
-
-export const fetcher = defaultFetcher as HookFetcherFn
-
-export default function useCustomer(
- input: UseCustomerInput
= {}
-) {
- const { providerRef, fetcherRef } = useCommerce
()
-
- const provider = providerRef.current
- const opts = provider.customer?.useCustomer
-
- const fetcherFn = opts?.fetcher ?? fetcher
- const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
- return useHook({
- input,
- useData(ctx) {
- const response = useData(
- { ...opts!, fetcher: fetcherFn },
- ctx?.input ?? [],
- provider.fetcher ?? fetcherRef.current,
- ctx?.swrOptions ?? input.swrOptions
- )
- return response
- },
- })
+const useCustomer: UseCustomer = (input) => {
+ const hook = useHook(fn)
+ return useSWRHook({ fetcher, ...hook })(input)
}
+
+export default useCustomer
diff --git a/framework/commerce/index.tsx b/framework/commerce/index.tsx
index 243fba2db..07bf74a22 100644
--- a/framework/commerce/index.tsx
+++ b/framework/commerce/index.tsx
@@ -6,7 +6,7 @@ import {
useMemo,
useRef,
} from 'react'
-import { Fetcher, HookHandler, MutationHandler } from './utils/types'
+import { Fetcher, SWRHook, MutationHook } from './utils/types'
import type { FetchCartInput } from './cart/use-cart'
import type { Cart, Wishlist, Customer, SearchProductsData } from './types'
@@ -15,17 +15,26 @@ const Commerce = createContext | {}>({})
export type Provider = CommerceConfig & {
fetcher: Fetcher
cart?: {
- useCart?: HookHandler
- useAddItem?: MutationHandler
+ useCart?: SWRHook
+ useAddItem?: MutationHook
+ useUpdateItem?: MutationHook
+ useRemoveItem?: MutationHook
}
wishlist?: {
- useWishlist?: HookHandler
+ useWishlist?: SWRHook
+ useAddItem?: MutationHook
+ useRemoveItem?: MutationHook
}
- customer: {
- useCustomer?: HookHandler
+ customer?: {
+ useCustomer?: SWRHook
}
- products: {
- useSearch?: HookHandler
+ products?: {
+ useSearch?: SWRHook
+ }
+ auth?: {
+ useSignup?: MutationHook
+ useLogin?: MutationHook
+ useLogout?: MutationHook
}
}
diff --git a/framework/commerce/new-provider.md b/framework/commerce/new-provider.md
new file mode 100644
index 000000000..4051c0f01
--- /dev/null
+++ b/framework/commerce/new-provider.md
@@ -0,0 +1,239 @@
+# Adding a new Commerce Provider
+
+A commerce provider is a headless e-commerce platform that integrates with the [Commerce Framework](./README.md). Right now we have the following providers:
+
+- BigCommerce ([framework/bigcommerce](../bigcommerce))
+- Shopify ([framework/shopify](../shopify))
+
+Adding a commerce provider means adding a new folder in `framework` with a folder structure like the next one:
+
+- `api`
+ - index.ts
+- `product`
+ - usePrice
+ - useSearch
+ - getProduct
+ - getAllProducts
+- `wishlist`
+ - useWishlist
+ - useAddItem
+ - useRemoveItem
+- `auth`
+ - useLogin
+ - useLogout
+ - useSignup
+- `customer`
+ - useCustomer
+ - getCustomerId
+ - getCustomerWistlist
+- `cart`
+ - useCart
+ - useAddItem
+ - useRemoveItem
+ - useUpdateItem
+- `env.template`
+- `index.ts`
+- `provider.ts`
+- `commerce.config.json`
+- `next.config.js`
+- `README.md`
+
+`provider.ts` exports a provider object with handlers for the [Commerce Hooks](./README.md#commerce-hooks) and `api/index.ts` exports a Node.js provider for the [Commerce API](./README.md#commerce-api)
+
+> **Important:** We use TypeScript for every provider and expect its usage for every new one.
+
+The app imports from the provider directly instead of the core commerce folder (`framework/commerce`), but all providers are interchangeable and to achieve it every provider always has to implement the core types and helpers.
+
+The provider folder should only depend on `framework/commerce` and dependencies in the main `package.json`. In the future we'll move the `framework` folder to a package that can be shared easily for multiple apps.
+
+## Adding the provider hooks
+
+Using BigCommerce as an example. The first thing to do is export a `CommerceProvider` component that includes a `provider` object with all the handlers that can be used for hooks:
+
+```tsx
+import type { ReactNode } from 'react'
+import {
+ CommerceConfig,
+ CommerceProvider as CoreCommerceProvider,
+ useCommerce as useCoreCommerce,
+} from '@commerce'
+import { bigcommerceProvider, BigcommerceProvider } from './provider'
+
+export { bigcommerceProvider }
+export type { BigcommerceProvider }
+
+export const bigcommerceConfig: CommerceConfig = {
+ locale: 'en-us',
+ cartCookie: 'bc_cartId',
+}
+
+export type BigcommerceConfig = Partial
+
+export type BigcommerceProps = {
+ children?: ReactNode
+ locale: string
+} & BigcommerceConfig
+
+export function CommerceProvider({ children, ...config }: BigcommerceProps) {
+ return (
+
+ {children}
+
+ )
+}
+
+export const useCommerce = () => useCoreCommerce()
+```
+
+The exported types and components extend from the core ones exported by `@commerce`, which refers to `framework/commerce`.
+
+The `bigcommerceProvider` object looks like this:
+
+```tsx
+import { handler as useCart } from './cart/use-cart'
+import { handler as useAddItem } from './cart/use-add-item'
+import { handler as useUpdateItem } from './cart/use-update-item'
+import { handler as useRemoveItem } from './cart/use-remove-item'
+
+import { handler as useWishlist } from './wishlist/use-wishlist'
+import { handler as useWishlistAddItem } from './wishlist/use-add-item'
+import { handler as useWishlistRemoveItem } from './wishlist/use-remove-item'
+
+import { handler as useCustomer } from './customer/use-customer'
+import { handler as useSearch } from './product/use-search'
+
+import { handler as useLogin } from './auth/use-login'
+import { handler as useLogout } from './auth/use-logout'
+import { handler as useSignup } from './auth/use-signup'
+
+import fetcher from './fetcher'
+
+export const bigcommerceProvider = {
+ locale: 'en-us',
+ cartCookie: 'bc_cartId',
+ fetcher,
+ cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
+ wishlist: {
+ useWishlist,
+ useAddItem: useWishlistAddItem,
+ useRemoveItem: useWishlistRemoveItem,
+ },
+ customer: { useCustomer },
+ products: { useSearch },
+ auth: { useLogin, useLogout, useSignup },
+}
+
+export type BigcommerceProvider = typeof bigcommerceProvider
+```
+
+The provider object, in this case `bigcommerceProvider`, has to match the `Provider` type defined in [framework/commerce](./index.ts).
+
+A hook handler, like `useCart`, looks like this:
+
+```tsx
+import { useMemo } from 'react'
+import { SWRHook } from '@commerce/utils/types'
+import useCart, { UseCart, FetchCartInput } from '@commerce/cart/use-cart'
+import { normalizeCart } from '../lib/normalize'
+import type { Cart } from '../types'
+
+export default useCart as UseCart
+
+export const handler: SWRHook<
+ Cart | null,
+ {},
+ FetchCartInput,
+ { isEmpty?: boolean }
+> = {
+ fetchOptions: {
+ url: '/api/bigcommerce/cart',
+ method: 'GET',
+ },
+ async fetcher({ input: { cartId }, options, fetch }) {
+ const data = cartId ? await fetch(options) : null
+ return data && normalizeCart(data)
+ },
+ useHook: ({ useData }) => (input) => {
+ const response = useData({
+ swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
+ })
+
+ return useMemo(
+ () =>
+ Object.create(response, {
+ isEmpty: {
+ get() {
+ return (response.data?.lineItems.length ?? 0) <= 0
+ },
+ enumerable: true,
+ },
+ }),
+ [response]
+ )
+ },
+}
+```
+
+In the case of data fetching hooks like `useCart` each handler has to implement the `SWRHook` type that's defined in the core types. For mutations it's the `MutationHook`, e.g for `useAddItem`:
+
+```tsx
+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 { normalizeCart } from '../lib/normalize'
+import type {
+ Cart,
+ BigcommerceCart,
+ CartItemBody,
+ AddCartItemBody,
+} from '../types'
+import useCart from './use-cart'
+
+export default useAddItem as UseAddItem
+
+export const handler: MutationHook = {
+ fetchOptions: {
+ url: '/api/bigcommerce/cart',
+ method: 'POST',
+ },
+ async fetcher({ input: item, options, fetch }) {
+ if (
+ item.quantity &&
+ (!Number.isInteger(item.quantity) || item.quantity! < 1)
+ ) {
+ throw new CommerceError({
+ message: 'The item quantity has to be a valid integer greater than 0',
+ })
+ }
+
+ const data = await fetch({
+ ...options,
+ body: { item },
+ })
+
+ return normalizeCart(data)
+ },
+ useHook: ({ fetch }) => () => {
+ const { mutate } = useCart()
+
+ return useCallback(
+ async function addItem(input) {
+ const data = await fetch({ input })
+ await mutate(data, false)
+ return data
+ },
+ [fetch, mutate]
+ )
+ },
+}
+```
+
+## Adding the Node.js provider API
+
+TODO
+
+> The commerce API is currently going through a refactor in https://github.com/vercel/commerce/pull/252 - We'll update the docs once the API is released.
diff --git a/framework/commerce/use-price.tsx b/framework/commerce/product/use-price.tsx
similarity index 97%
rename from framework/commerce/use-price.tsx
rename to framework/commerce/product/use-price.tsx
index 9a3fc4b6e..9c09e3487 100644
--- a/framework/commerce/use-price.tsx
+++ b/framework/commerce/product/use-price.tsx
@@ -1,5 +1,5 @@
import { useMemo } from 'react'
-import { useCommerce } from '.'
+import { useCommerce } from '..'
export function formatPrice({
amount,
diff --git a/framework/commerce/product/use-search.tsx b/framework/commerce/product/use-search.tsx
index 1f887f5fe..d2b782045 100644
--- a/framework/commerce/product/use-search.tsx
+++ b/framework/commerce/product/use-search.tsx
@@ -1,57 +1,20 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { SearchProductsData } from '../types'
-import type {
- Prop,
- HookFetcherFn,
- UseHookInput,
- UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
-import { BigcommerceProvider } from '@framework'
+import { Provider } from '..'
-export type UseSearchHandler = Prop<
- Prop,
- 'useSearch'
->
+export type UseSearch<
+ H extends SWRHook = SWRHook
+> = ReturnType
-export type UseSeachInput = UseHookInput<
- UseSearchHandler
->
+export const fetcher: HookFetcherFn = SWRFetcher
-export type SearchResponse = UseHookResponse<
- UseSearchHandler
->
+const fn = (provider: Provider) => provider.products?.useSearch!
-export type UseSearch
= Partial<
- UseSeachInput
-> extends UseSeachInput
- ? (input?: UseSeachInput
) => SearchResponse
- : (input: UseSeachInput
) => SearchResponse
-
-export const fetcher = defaultFetcher as HookFetcherFn
-
-export default function useSearch(
- input: UseSeachInput
= {}
-) {
- const { providerRef, fetcherRef } = useCommerce
()
-
- const provider = providerRef.current
- const opts = provider.products?.useSearch
-
- const fetcherFn = opts?.fetcher ?? fetcher
- const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
- return useHook({
- input,
- useData(ctx) {
- const response = useData(
- { ...opts!, fetcher: fetcherFn },
- ctx?.input ?? [],
- provider.fetcher ?? fetcherRef.current,
- ctx?.swrOptions ?? input.swrOptions
- )
- return response
- },
- })
+const useSearch: UseSearch = (input) => {
+ const hook = useHook(fn)
+ return useSWRHook({ fetcher, ...hook })(input)
}
+
+export default useSearch
diff --git a/framework/commerce/types.ts b/framework/commerce/types.ts
index 0ae766095..86361fd9f 100644
--- a/framework/commerce/types.ts
+++ b/framework/commerce/types.ts
@@ -1,10 +1,6 @@
-import type { Wishlist as BCWishlist } from '@framework/api/wishlist'
-import type { Customer as BCCustomer } from '@framework/api/customers'
-import type { SearchProductsData as BCSearchProductsData } from '@framework/api/catalog/products'
-
-export type CommerceProviderConfig = {
- features: Record
-}
+import type { Wishlist as BCWishlist } from '../bigcommerce/api/wishlist'
+import type { Customer as BCCustomer } from '../bigcommerce/api/customers'
+import type { SearchProductsData as BCSearchProductsData } from '../bigcommerce/api/catalog/products'
export type Discount = {
// The value of the discount, can be an amount or percentage
@@ -167,6 +163,7 @@ interface Entity {
export interface Product extends Entity {
name: string
description: string
+ descriptionHtml?: string
slug?: string
path?: string
images: ProductImage[]
diff --git a/framework/commerce/use-login.tsx b/framework/commerce/use-login.tsx
deleted file mode 100644
index 2a251fea3..000000000
--- a/framework/commerce/use-login.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import useAction from './utils/use-action'
-
-const useLogin = useAction
-
-export default useLogin
diff --git a/framework/commerce/use-logout.tsx b/framework/commerce/use-logout.tsx
deleted file mode 100644
index ef3fc4135..000000000
--- a/framework/commerce/use-logout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import useAction from './utils/use-action'
-
-const useLogout = useAction
-
-export default useLogout
diff --git a/framework/commerce/use-signup.tsx b/framework/commerce/use-signup.tsx
deleted file mode 100644
index 08ddb22c0..000000000
--- a/framework/commerce/use-signup.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import useAction from './utils/use-action'
-
-const useSignup = useAction
-
-export default useSignup
diff --git a/framework/commerce/utils/default-fetcher.ts b/framework/commerce/utils/default-fetcher.ts
index 8dc9def75..493a9b5f9 100644
--- a/framework/commerce/utils/default-fetcher.ts
+++ b/framework/commerce/utils/default-fetcher.ts
@@ -1,6 +1,12 @@
import type { HookFetcherFn } from './types'
-const defaultFetcher: HookFetcherFn = ({ options, fetch }) =>
+export const SWRFetcher: HookFetcherFn = ({ options, fetch }) =>
fetch(options)
-export default defaultFetcher
+export const mutationFetcher: HookFetcherFn = ({
+ input,
+ options,
+ fetch,
+}) => fetch({ ...options, body: input })
+
+export default SWRFetcher
diff --git a/framework/commerce/utils/features.ts b/framework/commerce/utils/features.ts
deleted file mode 100644
index d84321967..000000000
--- a/framework/commerce/utils/features.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import commerceProviderConfig from '@framework/config.json'
-import type { CommerceProviderConfig } from '../types'
-import memo from 'lodash.memoize'
-
-type FeaturesAPI = {
- isEnabled: (desideredFeature: string) => boolean
-}
-
-function isFeatureEnabled(config: CommerceProviderConfig) {
- const features = config.features
- return (desideredFeature: string) =>
- Object.keys(features)
- .filter((k) => features[k])
- .includes(desideredFeature)
-}
-
-function boostrap(): FeaturesAPI {
- const basis = {
- isEnabled: () => false,
- }
-
- if (!commerceProviderConfig) {
- console.log('No config.json found - Please add a config.json')
- return basis
- }
-
- if (commerceProviderConfig.features) {
- return {
- ...basis,
- isEnabled: memo(isFeatureEnabled(commerceProviderConfig)),
- }
- }
-
- return basis
-}
-
-export default boostrap()
diff --git a/framework/commerce/utils/types.ts b/framework/commerce/utils/types.ts
index 1d3adef81..852afb208 100644
--- a/framework/commerce/utils/types.ts
+++ b/framework/commerce/utils/types.ts
@@ -2,13 +2,18 @@ import type { ConfigInterface } from 'swr'
import type { CommerceError } from './errors'
import type { ResponseState } from './use-data'
+/**
+ * Returns the properties in T with the properties in type K, overriding properties defined in T
+ */
export type Override = Omit & K
/**
* Returns the properties in T with the properties in type K changed from optional to required
*/
export type PickRequired = Omit &
- Required>
+ {
+ [P in K]-?: NonNullable
+ }
/**
* Core fetcher added by CommerceProvider
@@ -31,16 +36,15 @@ export type HookFetcher = (
fetch: (options: FetcherOptions) => Promise
) => Data | Promise
-export type HookFetcherFn<
- Data,
- Input = never,
- Result = any,
- Body = any
-> = (context: {
+export type HookFetcherFn = (
+ context: HookFetcherContext
+) => Data | Promise
+
+export type HookFetcherContext = {
options: HookFetcherOptions
input: Input
fetch: (options: FetcherOptions) => Promise
-}) => Data | Promise
+}
export type HookFetcherOptions = { method?: string } & (
| { query: string; url?: string }
@@ -49,13 +53,20 @@ export type HookFetcherOptions = { method?: string } & (
export type HookInputValue = string | number | boolean | undefined
-export type HookSwrInput = [string, HookInputValue][]
+export type HookSWRInput = [string, HookInputValue][]
export type HookFetchInput = { [k: string]: HookInputValue }
-export type HookInput = {}
+export type HookFunction<
+ Input extends { [k: string]: unknown } | null,
+ T
+> = keyof Input extends never
+ ? () => T
+ : Partial extends Input
+ ? (input?: Input) => T
+ : (input: Input) => T
-export type HookHandler<
+export type SWRHook<
// Data obj returned by the hook and fetch operation
Data,
// Input expected by the hook
@@ -65,58 +76,56 @@ export type HookHandler<
// Custom state added to the response object of SWR
State = {}
> = {
- useHook?(context: {
- input: Input & { swrOptions?: SwrOptions }
- useData(context?: {
- input?: HookFetchInput | HookSwrInput
- swrOptions?: SwrOptions
- }): ResponseState
- }): ResponseState & State
+ useHook(
+ context: SWRHookContext
+ ): HookFunction<
+ Input & { swrOptions?: SwrOptions },
+ ResponseState & State
+ >
fetchOptions: HookFetcherOptions
fetcher?: HookFetcherFn
}
-export type MutationHandler<
+export type SWRHookContext<
+ Data,
+ FetchInput extends { [k: string]: unknown } = {}
+> = {
+ useData(context?: {
+ input?: HookFetchInput | HookSWRInput
+ swrOptions?: SwrOptions
+ }): ResponseState
+}
+
+export type MutationHook<
// Data obj returned by the hook and fetch operation
Data,
// Input expected by the hook
Input extends { [k: string]: unknown } = {},
+ // Input expected by the action returned by the hook
+ ActionInput extends { [k: string]: unknown } = {},
// Input expected before doing a fetch operation
- FetchInput extends { [k: string]: unknown } = {}
+ FetchInput extends { [k: string]: unknown } = ActionInput
> = {
- useHook?(context: {
- input: Input
- }): (context: {
- input: FetchInput
- fetch: (context: { input: FetchInput }) => Data | Promise
- }) => Data | Promise
+ useHook(
+ context: MutationHookContext
+ ): HookFunction>>
fetchOptions: HookFetcherOptions
fetcher?: HookFetcherFn
}
+export type MutationHookContext<
+ Data,
+ FetchInput extends { [k: string]: unknown } | null = {}
+> = {
+ fetch: keyof FetchInput extends never
+ ? () => Data | Promise
+ : Partial extends FetchInput
+ ? (context?: { input?: FetchInput }) => Data | Promise
+ : (context: { input: FetchInput }) => Data | Promise
+}
+
export type SwrOptions = ConfigInterface<
Data,
CommerceError,
HookFetcher
>
-
-/**
- * Returns the property K from type T excluding nullables
- */
-export type Prop = NonNullable
-
-export type HookHandlerType =
- | HookHandler
- | MutationHandler
-
-export type UseHookParameters = Parameters<
- Prop
->
-
-export type UseHookResponse = ReturnType<
- Prop
->
-
-export type UseHookInput<
- H extends HookHandlerType
-> = UseHookParameters[0]['input']
diff --git a/framework/commerce/utils/use-action.tsx b/framework/commerce/utils/use-action.tsx
deleted file mode 100644
index 24593383f..000000000
--- a/framework/commerce/utils/use-action.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useCallback } from 'react'
-import type { HookFetcher, HookFetcherOptions } from './types'
-import { useCommerce } from '..'
-
-export default function useAction(
- options: HookFetcherOptions,
- fetcher: HookFetcher
-) {
- const { fetcherRef } = useCommerce()
-
- return useCallback(
- (input: Input) => fetcher(options, input, fetcherRef.current),
- [fetcher]
- )
-}
diff --git a/framework/commerce/utils/use-data.tsx b/framework/commerce/utils/use-data.tsx
index 94679a0c6..9224b612c 100644
--- a/framework/commerce/utils/use-data.tsx
+++ b/framework/commerce/utils/use-data.tsx
@@ -1,11 +1,11 @@
import useSWR, { responseInterface } from 'swr'
import type {
- HookHandler,
- HookSwrInput,
+ HookSWRInput,
HookFetchInput,
- PickRequired,
Fetcher,
SwrOptions,
+ HookFetcherOptions,
+ HookFetcherFn,
} from './types'
import defineProperty from './define-property'
import { CommerceError } from './errors'
@@ -14,13 +14,12 @@ export type ResponseState = responseInterface & {
isLoading: boolean
}
-export type UseData = <
- Data = any,
- Input extends { [k: string]: unknown } = {},
- FetchInput extends HookFetchInput = {}
->(
- options: PickRequired, 'fetcher'>,
- input: HookFetchInput | HookSwrInput,
+export type UseData = (
+ options: {
+ fetchOptions: HookFetcherOptions
+ fetcher: HookFetcherFn
+ },
+ input: HookFetchInput | HookSWRInput,
fetcherFn: Fetcher,
swrOptions?: SwrOptions
) => ResponseState
diff --git a/framework/commerce/utils/use-hook.ts b/framework/commerce/utils/use-hook.ts
new file mode 100644
index 000000000..da3431e3c
--- /dev/null
+++ b/framework/commerce/utils/use-hook.ts
@@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+import { Provider, useCommerce } from '..'
+import type { MutationHook, PickRequired, SWRHook } from './types'
+import useData from './use-data'
+
+export function useFetcher() {
+ const { providerRef, fetcherRef } = useCommerce()
+ return providerRef.current.fetcher ?? fetcherRef.current
+}
+
+export function useHook<
+ P extends Provider,
+ H extends MutationHook | SWRHook
+>(fn: (provider: P) => H) {
+ const { providerRef } = useCommerce()
+ const provider = providerRef.current
+ return fn(provider)
+}
+
+export function useSWRHook>(
+ hook: PickRequired
+) {
+ const fetcher = useFetcher()
+
+ return hook.useHook({
+ useData(ctx) {
+ const response = useData(hook, ctx?.input ?? [], fetcher, ctx?.swrOptions)
+ return response
+ },
+ })
+}
+
+export function useMutationHook>(
+ hook: PickRequired
+) {
+ const fetcher = useFetcher()
+
+ return hook.useHook({
+ fetch: useCallback(
+ ({ input } = {}) => {
+ return hook.fetcher({
+ input,
+ options: hook.fetchOptions,
+ fetch: fetcher,
+ })
+ },
+ [fetcher, hook.fetchOptions]
+ ),
+ })
+}
diff --git a/framework/commerce/utils/use-response.tsx b/framework/commerce/utils/use-response.tsx
deleted file mode 100644
index de1b5088c..000000000
--- a/framework/commerce/utils/use-response.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useMemo } from 'react'
-import { responseInterface } from 'swr'
-import { CommerceError } from './errors'
-import { Override } from './types'
-
-export type UseResponseOptions<
- D,
- R extends responseInterface
-> = {
- descriptors?: PropertyDescriptorMap
- normalizer?: (data: R['data']) => D
-}
-
-export type UseResponse = >(
- response: R,
- options: UseResponseOptions
-) => D extends object ? Override : R
-
-const useResponse: UseResponse = (response, { descriptors, normalizer }) => {
- const memoizedResponse = useMemo(
- () =>
- Object.create(response, {
- ...descriptors,
- ...(normalizer
- ? {
- data: {
- get() {
- return response.data && normalizer(response.data)
- },
- enumerable: true,
- },
- }
- : {}),
- }),
- [response]
- )
- return memoizedResponse
-}
-
-export default useResponse
diff --git a/framework/commerce/wishlist/use-add-item.tsx b/framework/commerce/wishlist/use-add-item.tsx
index d9b513694..11c8cc241 100644
--- a/framework/commerce/wishlist/use-add-item.tsx
+++ b/framework/commerce/wishlist/use-add-item.tsx
@@ -1,12 +1,19 @@
-import useAction from '../utils/use-action'
-import type { CartItemBody } from '../types'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { MutationHook } from '../utils/types'
+import type { Provider } from '..'
-// Input expected by the action returned by the `useAddItem` hook
-// export interface AddItemInput {
-// includeProducts?: boolean
-// }
-export type AddItemInput = T
+export type UseAddItem<
+ H extends MutationHook = MutationHook
+> = ReturnType
-const useAddItem = useAction
+export const fetcher = mutationFetcher
+
+const fn = (provider: Provider) => provider.wishlist?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+ const hook = useHook(fn)
+ return useMutationHook({ fetcher, ...hook })(...args)
+}
export default useAddItem
diff --git a/framework/commerce/wishlist/use-remove-item.tsx b/framework/commerce/wishlist/use-remove-item.tsx
index dfa60c363..c8c34a5af 100644
--- a/framework/commerce/wishlist/use-remove-item.tsx
+++ b/framework/commerce/wishlist/use-remove-item.tsx
@@ -1,5 +1,28 @@
-import useAction from '../utils/use-action'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Provider } from '..'
-const useRemoveItem = useAction
+export type RemoveItemInput = {
+ id: string | number
+}
+
+export type UseRemoveItem<
+ H extends MutationHook = MutationHook<
+ any | null,
+ { wishlist?: any },
+ RemoveItemInput,
+ {}
+ >
+> = ReturnType
+
+export const fetcher: HookFetcherFn = mutationFetcher
+
+const fn = (provider: Provider) => provider.wishlist?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+ const hook = useHook(fn)
+ return useMutationHook({ fetcher, ...hook })(input)
+}
export default useRemoveItem
diff --git a/framework/commerce/wishlist/use-wishlist.tsx b/framework/commerce/wishlist/use-wishlist.tsx
index dc912bc98..7a93b20b1 100644
--- a/framework/commerce/wishlist/use-wishlist.tsx
+++ b/framework/commerce/wishlist/use-wishlist.tsx
@@ -1,56 +1,25 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
import type { Wishlist } from '../types'
-import type {
- Prop,
- HookFetcherFn,
- UseHookInput,
- UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
+import type { Provider } from '..'
-export type UseWishlistHandler