diff --git a/framework/shopify/customer/use-customer.tsx b/framework/shopify/customer/use-customer.tsx index 6f956d2c2..652188bbe 100644 --- a/framework/shopify/customer/use-customer.tsx +++ b/framework/shopify/customer/use-customer.tsx @@ -1,40 +1,4 @@ -import type { HookFetcher } from '@commerce/utils/types' -import type { SwrOptions } from '@commerce/utils/use-data' -import useCommerceCustomer from '@commerce/use-customer' -import getCustomerQuery from '@framework/utils/queries/get-customer-query' -import { getCustomerToken } from '@framework/utils/customer-token' +import useCustomer, { UseCustomer } from '@commerce/customer/use-customer' +import type { ShopifyProvider } from '..' -const defaultOpts = { - query: getCustomerQuery, -} - -export const fetcher: HookFetcher = async (options, _, fetch) => { - const customerAccessToken = getCustomerToken() - if (customerAccessToken) { - const data = await fetch({ - ...defaultOpts, - ...options, - variables: { customerAccessToken }, - }) - return data?.customer ?? null - } - return null -} - -export function extendHook( - customFetcher: typeof fetcher, - swrOptions?: SwrOptions -) { - const useCustomer = () => { - return useCommerceCustomer(defaultOpts, [], customFetcher, { - revalidateOnFocus: false, - ...swrOptions, - }) - } - - useCustomer.extend = extendHook - - return useCustomer -} - -export default extendHook(fetcher) +export default useCustomer as UseCustomer diff --git a/framework/shopify/product/use-search.tsx b/framework/shopify/product/use-search.tsx index ba833e517..4f83baa63 100644 --- a/framework/shopify/product/use-search.tsx +++ b/framework/shopify/product/use-search.tsx @@ -1,72 +1,4 @@ -import useCommerceSearch from '@commerce/products/use-search' -import { getAllProductsQuery } from '@framework/utils/queries' +import useSearch, { UseSearch } from '@commerce/products/use-search' +import type { ShopifyProvider } from '..' -import type { Product } from 'framework/bigcommerce/schema' -import type { HookFetcher } from '@commerce/utils/types' -import type { SwrOptions } from '@commerce/utils/use-data' -import type { ProductConnection, ProductEdge } from '@framework/schema' - -import getSearchVariables from '@framework/utils/get-search-variables' - -import { normalizeProduct } from '@framework/lib/normalize' - -export type SearchProductsInput = { - search?: string - categoryId?: string - brandId?: string - sort?: string -} - -export type SearchRequestProductsData = { - products?: ProductEdge[] -} - -export type SearchProductsData = { - products: Product[] - found: boolean -} - -export const fetcher: HookFetcher< - SearchProductsData, - SearchProductsInput -> = async (options, input, fetch) => { - const resp = await fetch({ - query: options?.query, - method: options?.method, - variables: getSearchVariables(input), - }) - const edges = resp.products?.edges - return { - products: edges?.map(({ node: p }: ProductEdge) => normalizeProduct(p)), - found: !!edges?.length, - } -} - -export function extendHook( - customFetcher: typeof fetcher, - swrOptions?: SwrOptions -) { - const useSearch = (input: SearchProductsInput = {}) => { - const response = useCommerceSearch( - { - query: getAllProductsQuery, - }, - [ - ['search', input.search], - ['categoryId', input.categoryId], - ['brandId', input.brandId], - ['sort', input.sort], - ], - customFetcher, - { revalidateOnFocus: false, ...swrOptions } - ) - - return response - } - - useSearch.extend = extendHook - - return useSearch -} - -export default extendHook(fetcher) +export default useSearch as UseSearch diff --git a/framework/shopify/provider.tsx b/framework/shopify/provider.tsx index e8770ac97..4a1f01525 100644 --- a/framework/shopify/provider.tsx +++ b/framework/shopify/provider.tsx @@ -9,12 +9,23 @@ import { } from './const' import { Cart } from './types' -import { normalizeCart } from './lib/normalize' -import handleFetchResponse from './utils/handle-fetch-response' -import getCheckoutQuery from './utils/queries/get-checkout-query' -import { FetchCartInput, UseCartInput } from '@commerce/cart/use-cart' +import { Customer } from '@commerce/types' +import { normalizeCart, normalizeProduct } from './lib/normalize' +import { FetchCartInput } from '@commerce/cart/use-cart' import { checkoutCreate, checkoutToCart } from './cart/utils' +import { + getAllProductsQuery, + getCustomerQuery, + getCheckoutQuery, + handleFetchResponse, + getSearchVariables, +} from './utils' + +import { ProductEdge } from './schema' +import { SearchProductsInput } from 'framework/bigcommerce/provider' +import { SearchProductsData } from 'framework/bigcommerce/api/catalog/products' + const fetcher: Fetcher = async ({ method = 'POST', variables, query }) => { return handleFetchResponse( await fetch(API_URL, { @@ -55,16 +66,13 @@ export const cartFetcher: HookFetcherFn = async ({ const useCart: HookHandler< Cart | null, {}, - any, - any, - any, + FetchCartInput, { isEmpty?: boolean } > = { fetchOptions: { query: getCheckoutQuery, }, fetcher: cartFetcher, - normalizer: normalizeCart, useHook({ input, useData }) { const response = useData({ swrOptions: { revalidateOnFocus: false, ...input.swrOptions }, @@ -85,6 +93,60 @@ const useCart: HookHandler< }, } +const useSearch: HookHandler< + SearchProductsData, + SearchProductsInput, + SearchProductsInput +> = { + fetchOptions: { + query: getAllProductsQuery, + }, + async fetcher({ input, options, fetch }) { + const resp = await fetch({ + query: options?.query, + method: options?.method, + variables: getSearchVariables(input), + }) + const edges = resp.products?.edges + return { + products: edges?.map(({ node: p }: ProductEdge) => normalizeProduct(p)), + found: !!edges?.length, + } + }, + useHook({ input, useData }) { + return useData({ + input: [ + ['search', input.search], + ['categoryId', input.categoryId], + ['brandId', input.brandId], + ['sort', input.sort], + ], + swrOptions: { + revalidateOnFocus: false, + ...input.swrOptions, + }, + }) + }, +} + +const useCustomerHandler: HookHandler = { + fetchOptions: { + query: getCustomerQuery, + }, + async fetcher({ options, fetch }) { + const data = await fetch(options) + return data?.customer ?? null + }, + useHook({ input, useData }) { + return useData({ + swrOptions: { + revalidateOnFocus: false, + ...input.swrOptions, + }, + }) + }, +} + export const shopifyProvider = { locale: 'en-us', cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE, @@ -92,6 +154,8 @@ export const shopifyProvider = { fetcher, cartNormalizer: normalizeCart, cart: { useCart }, + customer: { useCustomer: useCustomerHandler }, + products: { useSearch }, } export type ShopifyProvider = typeof shopifyProvider diff --git a/framework/shopify/utils/index.ts b/framework/shopify/utils/index.ts new file mode 100644 index 000000000..cecf06fd1 --- /dev/null +++ b/framework/shopify/utils/index.ts @@ -0,0 +1,9 @@ +export { default as handleFetchResponse } from './handle-fetch-response' +export { default as getSearchVariables } from './get-search-variables' +export { default as getSortVariables } from './get-sort-variables' +export { default as getVendors } from './get-vendors' +export { default as getCategories } from './get-categories' + +export * from './customer-token' +export * from './queries' +export * from './mutations'