Added framework folder

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

@@ -0,0 +1,57 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useWishlistAddItem from '@commerce/wishlist/use-add-item'
+import type { ItemBody, AddItemBody } from '../api/wishlist'
+import useCustomer from '../use-customer'
+import useWishlist, { UseWishlistOptions, Wishlist } from './use-wishlist'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlist',
+  method: 'POST',
+}
+
+export type AddItemInput = ItemBody
+
+export const fetcher: HookFetcher<Wishlist, AddItemBody> = (
+  options,
+  { item },
+  fetch
+) => {
+  // TODO: add validations before doing the fetch
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { item },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useAddItem = (opts?: UseWishlistOptions) => {
+    const { data: customer } = useCustomer()
+    const { revalidate } = useWishlist(opts)
+    const fn = useWishlistAddItem(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function addItem(input: AddItemInput) {
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        const data = await fn({ item: input })
+        await revalidate()
+        return data
+      },
+      [fn, revalidate, customer]
+    )
+  }
+
+  useAddItem.extend = extendHook
+
+  return useAddItem
+}
+
+export default extendHook(fetcher)

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

@@ -0,0 +1,61 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useWishlistRemoveItem from '@commerce/wishlist/use-remove-item'
+import type { RemoveItemBody } from '../api/wishlist'
+import useCustomer from '../use-customer'
+import useWishlist, { UseWishlistOptions, Wishlist } from './use-wishlist'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlist',
+  method: 'DELETE',
+}
+
+export type RemoveItemInput = {
+  id: string | number
+}
+
+export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
+  options,
+  { itemId },
+  fetch
+) => {
+  return fetch({
+    ...defaultOpts,
+    ...options,
+    body: { itemId },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useRemoveItem = (opts?: UseWishlistOptions) => {
+    const { data: customer } = useCustomer()
+    const { revalidate } = useWishlist(opts)
+    const fn = useWishlistRemoveItem<Wishlist | null, RemoveItemBody>(
+      defaultOpts,
+      customFetcher
+    )
+
+    return useCallback(
+      async function removeItem(input: RemoveItemInput) {
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        const data = await fn({ itemId: String(input.id) })
+        await revalidate()
+        return data
+      },
+      [fn, revalidate, customer]
+    )
+  }
+
+  useRemoveItem.extend = extendHook
+
+  return useRemoveItem
+}
+
+export default extendHook(fetcher)

framework/bigcommerce/wishlist/use-wishlist-actions.tsx

@@ -0,0 +1,11 @@
+import useAddItem from './use-add-item'
+import useRemoveItem from './use-remove-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 useWishlistActions() {
+  const addItem = useAddItem()
+  const removeItem = useRemoveItem()
+
+  return { addItem, removeItem }
+}

framework/bigcommerce/wishlist/use-wishlist.tsx

@@ -0,0 +1,76 @@
+import { HookFetcher } from '@commerce/utils/types'
+import { SwrOptions } from '@commerce/utils/use-data'
+import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
+import type { Wishlist } from '../api/wishlist'
+import useCustomer from '../use-customer'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlist',
+  method: 'GET',
+}
+
+export type { Wishlist }
+
+export interface UseWishlistOptions {
+  includeProducts?: boolean
+}
+
+export interface UseWishlistInput extends UseWishlistOptions {
+  customerId?: number
+}
+
+export const fetcher: HookFetcher<Wishlist | null, UseWishlistInput> = (
+  options,
+  { customerId, includeProducts },
+  fetch
+) => {
+  if (!customerId) return null
+
+  // Use a dummy base as we only care about the relative path
+  const url = new URL(options?.url ?? defaultOpts.url, 'http://a')
+
+  if (includeProducts) url.searchParams.set('products', '1')
+
+  return fetch({
+    url: url.pathname + url.search,
+    method: options?.method ?? defaultOpts.method,
+  })
+}
+
+export function extendHook(
+  customFetcher: typeof fetcher,
+  swrOptions?: SwrOptions<Wishlist | null, UseWishlistInput>
+) {
+  const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
+    const { data: customer } = useCustomer()
+    const response = useCommerceWishlist(
+      defaultOpts,
+      [
+        ['customerId', customer?.entityId],
+        ['includeProducts', includeProducts],
+      ],
+      customFetcher,
+      {
+        revalidateOnFocus: false,
+        ...swrOptions,
+      }
+    )
+
+    // Uses a getter to only calculate the prop when required
+    // response.data is also a getter and it's better to not trigger it early
+    Object.defineProperty(response, 'isEmpty', {
+      get() {
+        return (response.data?.items?.length || 0) <= 0
+      },
+      set: (x) => x,
+    })
+
+    return response
+  }
+
+  useWishlist.extend = extendHook
+
+  return useWishlist
+}
+
+export default extendHook(fetcher)