forked from crowetic/commerce
Add swell provider folder
This commit is contained in:
parent
394efd9e81
commit
753234dc51
2
framework/swell/.env.template
Normal file
2
framework/swell/.env.template
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
SHOPIFY_STORE_DOMAIN=
|
||||||
|
SHOPIFY_STOREFRONT_ACCESS_TOKEN=
|
260
framework/swell/README.md
Normal file
260
framework/swell/README.md
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
- [Getting Started](#getting-started)
|
||||||
|
- [Modifications](#modifications)
|
||||||
|
- [Adding item to Cart](#adding-item-to-cart)
|
||||||
|
- [Proceed to Checkout](#proceed-to-checkout)
|
||||||
|
- [General Usage](#general-usage)
|
||||||
|
- [CommerceProvider](#commerceprovider)
|
||||||
|
- [useCommerce](#usecommerce)
|
||||||
|
- [Hooks](#hooks)
|
||||||
|
- [usePrice](#useprice)
|
||||||
|
- [useAddItem](#useadditem)
|
||||||
|
- [useRemoveItem](#useremoveitem)
|
||||||
|
- [useUpdateItem](#useupdateitem)
|
||||||
|
- [APIs](#apis)
|
||||||
|
- [getProduct](#getproduct)
|
||||||
|
- [getAllProducts](#getallproducts)
|
||||||
|
- [getAllCollections](#getallcollections)
|
||||||
|
- [getAllPages](#getallpages)
|
||||||
|
|
||||||
|
# Shopify Storefront Data Hooks
|
||||||
|
|
||||||
|
Collection of hooks and data fetching functions to integrate Shopify in a React application. Designed to work with [Next.js Commerce](https://demo.vercel.store/).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
|
||||||
|
```
|
||||||
|
yarn install shopify-buy
|
||||||
|
yarn install -D @types/shopify-buy
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Environment variables need to be set:
|
||||||
|
|
||||||
|
```
|
||||||
|
SHOPIFY_STORE_DOMAIN=
|
||||||
|
SHOPIFY_STOREFRONT_ACCESS_TOKEN=
|
||||||
|
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
|
||||||
|
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Point the framework to `shopify` by updating `tsconfig.json`:
|
||||||
|
|
||||||
|
```
|
||||||
|
"@framework/*": ["framework/shopify/*"],
|
||||||
|
"@framework": ["framework/shopify"]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Modifications
|
||||||
|
|
||||||
|
These modifications are temporarily until contributions are made to remove them.
|
||||||
|
|
||||||
|
#### Adding item to Cart
|
||||||
|
|
||||||
|
```js
|
||||||
|
// components/product/ProductView/ProductView.tsx
|
||||||
|
const ProductView: FC<Props> = ({ product }) => {
|
||||||
|
const addToCart = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
await addItem({
|
||||||
|
productId: product.id,
|
||||||
|
variantId: variant ? variant.id : product.variants[0].id,
|
||||||
|
})
|
||||||
|
openSidebar()
|
||||||
|
setLoading(false)
|
||||||
|
} catch (err) {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Proceed to Checkout
|
||||||
|
|
||||||
|
```js
|
||||||
|
// components/cart/CartSidebarView/CartSidebarView.tsx
|
||||||
|
import { useCommerce } from '@framework'
|
||||||
|
|
||||||
|
const CartSidebarView: FC = () => {
|
||||||
|
const { checkout } = useCommerce()
|
||||||
|
return (
|
||||||
|
<Button href={checkout.webUrl} Component="a" width="100%">
|
||||||
|
Proceed to Checkout
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## General Usage
|
||||||
|
|
||||||
|
### CommerceProvider
|
||||||
|
|
||||||
|
Provider component that creates the commerce context for children.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { CommerceProvider } from '@framework'
|
||||||
|
|
||||||
|
const App = ({ children }) => {
|
||||||
|
return <CommerceProvider locale={locale}>{children}</CommerceProvider>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
|
```
|
||||||
|
|
||||||
|
### useCommerce
|
||||||
|
|
||||||
|
Returns the configs that are defined in the nearest `CommerceProvider`. Also provides access to Shopify's `checkout` and `shop`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { useCommerce } from 'nextjs-commerce-shopify'
|
||||||
|
|
||||||
|
const { checkout, shop } = useCommerce()
|
||||||
|
```
|
||||||
|
|
||||||
|
- `checkout`: The information required to checkout items and pay ([Documentation](https://shopify.dev/docs/storefront-api/reference/checkouts/checkout)).
|
||||||
|
- `shop`: Represents a collection of the general settings and information about the shop ([Documentation](https://shopify.dev/docs/storefront-api/reference/online-store/shop/index)).
|
||||||
|
|
||||||
|
## Hooks
|
||||||
|
|
||||||
|
### usePrice
|
||||||
|
|
||||||
|
Display the product variant price according to currency and locale.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import usePrice from '@framework/product/use-price'
|
||||||
|
|
||||||
|
const { price } = usePrice({
|
||||||
|
amount,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Takes in either `amount` or `variant`:
|
||||||
|
|
||||||
|
- `amount`: A price value for a particular item if the amount is known.
|
||||||
|
- `variant`: A shopify product variant. Price will be extracted from the variant.
|
||||||
|
|
||||||
|
### useAddItem
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { useAddItem } from '@framework/cart'
|
||||||
|
|
||||||
|
const AddToCartButton = ({ variantId, quantity }) => {
|
||||||
|
const addItem = useAddItem()
|
||||||
|
|
||||||
|
const addToCart = async () => {
|
||||||
|
await addItem({
|
||||||
|
variantId,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return <button onClick={addToCart}>Add To Cart</button>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### useRemoveItem
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { useRemoveItem } from '@framework/cart'
|
||||||
|
|
||||||
|
const RemoveButton = ({ item }) => {
|
||||||
|
const removeItem = useRemoveItem()
|
||||||
|
|
||||||
|
const handleRemove = async () => {
|
||||||
|
await removeItem({ id: item.id })
|
||||||
|
}
|
||||||
|
|
||||||
|
return <button onClick={handleRemove}>Remove</button>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### useUpdateItem
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { useUpdateItem } from '@framework/cart'
|
||||||
|
|
||||||
|
const CartItem = ({ item }) => {
|
||||||
|
const [quantity, setQuantity] = useState(item.quantity)
|
||||||
|
const updateItem = useUpdateItem(item)
|
||||||
|
|
||||||
|
const updateQuantity = async (e) => {
|
||||||
|
const val = e.target.value
|
||||||
|
await updateItem({ quantity: val })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
max={99}
|
||||||
|
min={0}
|
||||||
|
value={quantity}
|
||||||
|
onChange={updateQuantity}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## APIs
|
||||||
|
|
||||||
|
Collections of APIs to fetch data from a Shopify store.
|
||||||
|
|
||||||
|
The data is fetched using the [Shopify JavaScript Buy SDK](https://github.com/Shopify/js-buy-sdk#readme). Read the [Shopify Storefront API reference](https://shopify.dev/docs/storefront-api/reference) for more information.
|
||||||
|
|
||||||
|
### getProduct
|
||||||
|
|
||||||
|
Get a single product by its `handle`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import getProduct from '@framework/product/get-product'
|
||||||
|
import { getConfig } from '@framework/api'
|
||||||
|
|
||||||
|
const config = getConfig()
|
||||||
|
|
||||||
|
const product = await getProduct({
|
||||||
|
variables: { slug },
|
||||||
|
config,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### getAllProducts
|
||||||
|
|
||||||
|
```js
|
||||||
|
import getAllProducts from '@framework/product/get-all-products'
|
||||||
|
import { getConfig } from '@framework/api'
|
||||||
|
|
||||||
|
const config = getConfig()
|
||||||
|
|
||||||
|
const { products } = await getAllProducts({
|
||||||
|
variables: { first: 12 },
|
||||||
|
config,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### getAllCollections
|
||||||
|
|
||||||
|
```js
|
||||||
|
import getAllCollections from '@framework/product/get-all-collections'
|
||||||
|
import { getConfig } from '@framework/api'
|
||||||
|
|
||||||
|
const config = getConfig()
|
||||||
|
|
||||||
|
const collections = await getAllCollections({
|
||||||
|
config,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### getAllPages
|
||||||
|
|
||||||
|
```js
|
||||||
|
import getAllPages from '@framework/common/get-all-pages'
|
||||||
|
import { getConfig } from '@framework/api'
|
||||||
|
|
||||||
|
const config = getConfig()
|
||||||
|
|
||||||
|
const pages = await getAllPages({
|
||||||
|
variables: { first: 12 },
|
||||||
|
config,
|
||||||
|
})
|
||||||
|
```
|
1
framework/swell/api/cart/index.ts
Normal file
1
framework/swell/api/cart/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
1
framework/swell/api/catalog/index.ts
Normal file
1
framework/swell/api/catalog/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
1
framework/swell/api/catalog/products.ts
Normal file
1
framework/swell/api/catalog/products.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
46
framework/swell/api/checkout/index.ts
Normal file
46
framework/swell/api/checkout/index.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import isAllowedMethod from '../utils/is-allowed-method'
|
||||||
|
import createApiHandler, {
|
||||||
|
ShopifyApiHandler,
|
||||||
|
} from '../utils/create-api-handler'
|
||||||
|
|
||||||
|
import {
|
||||||
|
SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
|
SHOPIFY_CHECKOUT_URL_COOKIE,
|
||||||
|
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||||
|
} from '../../const'
|
||||||
|
|
||||||
|
import { getConfig } from '..'
|
||||||
|
import associateCustomerWithCheckoutMutation from '../../utils/mutations/associate-customer-with-checkout'
|
||||||
|
|
||||||
|
const METHODS = ['GET']
|
||||||
|
|
||||||
|
const checkoutApi: ShopifyApiHandler<any> = async (req, res, config) => {
|
||||||
|
if (!isAllowedMethod(req, res, METHODS)) return
|
||||||
|
|
||||||
|
config = getConfig()
|
||||||
|
|
||||||
|
const { cookies } = req
|
||||||
|
const checkoutUrl = cookies[SHOPIFY_CHECKOUT_URL_COOKIE]
|
||||||
|
const customerCookie = cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE]
|
||||||
|
|
||||||
|
if (customerCookie) {
|
||||||
|
try {
|
||||||
|
await config.fetch(associateCustomerWithCheckoutMutation, {
|
||||||
|
variables: {
|
||||||
|
checkoutId: cookies[SHOPIFY_CHECKOUT_ID_COOKIE],
|
||||||
|
customerAccessToken: cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (checkoutUrl) {
|
||||||
|
res.redirect(checkoutUrl)
|
||||||
|
} else {
|
||||||
|
res.redirect('/cart')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default createApiHandler(checkoutApi, {}, {})
|
1
framework/swell/api/customer.ts
Normal file
1
framework/swell/api/customer.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
1
framework/swell/api/customers/index.ts
Normal file
1
framework/swell/api/customers/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
1
framework/swell/api/customers/login.ts
Normal file
1
framework/swell/api/customers/login.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
1
framework/swell/api/customers/logout.ts
Normal file
1
framework/swell/api/customers/logout.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
1
framework/swell/api/customers/signup.ts
Normal file
1
framework/swell/api/customers/signup.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function () {}
|
62
framework/swell/api/index.ts
Normal file
62
framework/swell/api/index.ts
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import type { CommerceAPIConfig } from '@commerce/api'
|
||||||
|
|
||||||
|
import {
|
||||||
|
API_URL,
|
||||||
|
API_TOKEN,
|
||||||
|
SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
|
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||||
|
SHOPIFY_COOKIE_EXPIRE,
|
||||||
|
} from '../const'
|
||||||
|
|
||||||
|
if (!API_URL) {
|
||||||
|
throw new Error(
|
||||||
|
`The environment variable NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN is missing and it's required to access your store`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!API_TOKEN) {
|
||||||
|
throw new Error(
|
||||||
|
`The environment variable NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN is missing and it's required to access your store`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
import fetchGraphqlApi from './utils/fetch-graphql-api'
|
||||||
|
|
||||||
|
export interface ShopifyConfig extends CommerceAPIConfig {}
|
||||||
|
|
||||||
|
export class Config {
|
||||||
|
private config: ShopifyConfig
|
||||||
|
|
||||||
|
constructor(config: ShopifyConfig) {
|
||||||
|
this.config = config
|
||||||
|
}
|
||||||
|
|
||||||
|
getConfig(userConfig: Partial<ShopifyConfig> = {}) {
|
||||||
|
return Object.entries(userConfig).reduce<ShopifyConfig>(
|
||||||
|
(cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
|
||||||
|
{ ...this.config }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
setConfig(newConfig: Partial<ShopifyConfig>) {
|
||||||
|
Object.assign(this.config, newConfig)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = new Config({
|
||||||
|
locale: 'en-US',
|
||||||
|
commerceUrl: API_URL,
|
||||||
|
apiToken: API_TOKEN!,
|
||||||
|
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
|
cartCookieMaxAge: SHOPIFY_COOKIE_EXPIRE,
|
||||||
|
fetch: fetchGraphqlApi,
|
||||||
|
customerCookie: SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||||
|
})
|
||||||
|
|
||||||
|
export function getConfig(userConfig?: Partial<ShopifyConfig>) {
|
||||||
|
return config.getConfig(userConfig)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setConfig(newConfig: Partial<ShopifyConfig>) {
|
||||||
|
return config.setConfig(newConfig)
|
||||||
|
}
|
21
framework/swell/api/operations/get-all-collections.ts
Normal file
21
framework/swell/api/operations/get-all-collections.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import Client from 'shopify-buy'
|
||||||
|
import { ShopifyConfig } from '../index'
|
||||||
|
|
||||||
|
type Options = {
|
||||||
|
config: ShopifyConfig
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAllCollections = async (options: Options) => {
|
||||||
|
const { config } = options
|
||||||
|
|
||||||
|
const client = Client.buildClient({
|
||||||
|
storefrontAccessToken: config.apiToken,
|
||||||
|
domain: config.commerceUrl,
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = await client.collection.fetchAllWithProducts()
|
||||||
|
|
||||||
|
return JSON.parse(JSON.stringify(res))
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getAllCollections
|
25
framework/swell/api/operations/get-page.ts
Normal file
25
framework/swell/api/operations/get-page.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { Page } from '../../schema'
|
||||||
|
import { ShopifyConfig, getConfig } from '..'
|
||||||
|
|
||||||
|
export type GetPageResult<T extends { page?: any } = { page?: Page }> = T
|
||||||
|
|
||||||
|
export type PageVariables = {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPage({
|
||||||
|
url,
|
||||||
|
variables,
|
||||||
|
config,
|
||||||
|
preview,
|
||||||
|
}: {
|
||||||
|
url?: string
|
||||||
|
variables: PageVariables
|
||||||
|
config?: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}): Promise<GetPageResult> {
|
||||||
|
config = getConfig(config)
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getPage
|
58
framework/swell/api/utils/create-api-handler.ts
Normal file
58
framework/swell/api/utils/create-api-handler.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
|
||||||
|
import { ShopifyConfig, getConfig } from '..'
|
||||||
|
|
||||||
|
export type ShopifyApiHandler<
|
||||||
|
T = any,
|
||||||
|
H extends ShopifyHandlers = {},
|
||||||
|
Options extends {} = {}
|
||||||
|
> = (
|
||||||
|
req: NextApiRequest,
|
||||||
|
res: NextApiResponse<ShopifyApiResponse<T>>,
|
||||||
|
config: ShopifyConfig,
|
||||||
|
handlers: H,
|
||||||
|
// Custom configs that may be used by a particular handler
|
||||||
|
options: Options
|
||||||
|
) => void | Promise<void>
|
||||||
|
|
||||||
|
export type ShopifyHandler<T = any, Body = null> = (options: {
|
||||||
|
req: NextApiRequest
|
||||||
|
res: NextApiResponse<ShopifyApiResponse<T>>
|
||||||
|
config: ShopifyConfig
|
||||||
|
body: Body
|
||||||
|
}) => void | Promise<void>
|
||||||
|
|
||||||
|
export type ShopifyHandlers<T = any> = {
|
||||||
|
[k: string]: ShopifyHandler<T, any>
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ShopifyApiResponse<T> = {
|
||||||
|
data: T | null
|
||||||
|
errors?: { message: string; code?: string }[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function createApiHandler<
|
||||||
|
T = any,
|
||||||
|
H extends ShopifyHandlers = {},
|
||||||
|
Options extends {} = {}
|
||||||
|
>(
|
||||||
|
handler: ShopifyApiHandler<T, H, Options>,
|
||||||
|
handlers: H,
|
||||||
|
defaultOptions: Options
|
||||||
|
) {
|
||||||
|
return function getApiHandler({
|
||||||
|
config,
|
||||||
|
operations,
|
||||||
|
options,
|
||||||
|
}: {
|
||||||
|
config?: ShopifyConfig
|
||||||
|
operations?: Partial<H>
|
||||||
|
options?: Options extends {} ? Partial<Options> : never
|
||||||
|
} = {}): NextApiHandler {
|
||||||
|
const ops = { ...operations, ...handlers }
|
||||||
|
const opts = { ...defaultOptions, ...options }
|
||||||
|
|
||||||
|
return function apiHandler(req, res) {
|
||||||
|
return handler(req, res, getConfig(config), ops, opts)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
41
framework/swell/api/utils/fetch-all-products.ts
Normal file
41
framework/swell/api/utils/fetch-all-products.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import { ProductEdge } from '../../schema'
|
||||||
|
import { ShopifyConfig } from '..'
|
||||||
|
|
||||||
|
const fetchAllProducts = async ({
|
||||||
|
config,
|
||||||
|
query,
|
||||||
|
variables,
|
||||||
|
acc = [],
|
||||||
|
cursor,
|
||||||
|
}: {
|
||||||
|
config: ShopifyConfig
|
||||||
|
query: string
|
||||||
|
acc?: ProductEdge[]
|
||||||
|
variables?: any
|
||||||
|
cursor?: string
|
||||||
|
}): Promise<ProductEdge[]> => {
|
||||||
|
const { data } = await config.fetch(query, {
|
||||||
|
variables: { ...variables, cursor },
|
||||||
|
})
|
||||||
|
|
||||||
|
const edges: ProductEdge[] = data.products?.edges ?? []
|
||||||
|
const hasNextPage = data.products?.pageInfo?.hasNextPage
|
||||||
|
acc = acc.concat(edges)
|
||||||
|
|
||||||
|
if (hasNextPage) {
|
||||||
|
const cursor = edges.pop()?.cursor
|
||||||
|
if (cursor) {
|
||||||
|
return fetchAllProducts({
|
||||||
|
config,
|
||||||
|
query,
|
||||||
|
variables,
|
||||||
|
acc,
|
||||||
|
cursor,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc
|
||||||
|
}
|
||||||
|
|
||||||
|
export default fetchAllProducts
|
34
framework/swell/api/utils/fetch-graphql-api.ts
Normal file
34
framework/swell/api/utils/fetch-graphql-api.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import type { GraphQLFetcher } from '@commerce/api'
|
||||||
|
import fetch from './fetch'
|
||||||
|
|
||||||
|
import { API_URL, API_TOKEN } from '../../const'
|
||||||
|
import { getError } from '../../utils/handle-fetch-response'
|
||||||
|
|
||||||
|
const fetchGraphqlApi: GraphQLFetcher = async (
|
||||||
|
query: string,
|
||||||
|
{ variables } = {},
|
||||||
|
fetchOptions
|
||||||
|
) => {
|
||||||
|
const res = await fetch(API_URL, {
|
||||||
|
...fetchOptions,
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-Shopify-Storefront-Access-Token': API_TOKEN!,
|
||||||
|
...fetchOptions?.headers,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
query,
|
||||||
|
variables,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data, errors, status } = await res.json()
|
||||||
|
|
||||||
|
if (errors) {
|
||||||
|
throw getError(errors, status)
|
||||||
|
}
|
||||||
|
|
||||||
|
return { data, res }
|
||||||
|
}
|
||||||
|
export default fetchGraphqlApi
|
2
framework/swell/api/utils/fetch.ts
Normal file
2
framework/swell/api/utils/fetch.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import zeitFetch from '@vercel/fetch'
|
||||||
|
export default zeitFetch()
|
28
framework/swell/api/utils/is-allowed-method.ts
Normal file
28
framework/swell/api/utils/is-allowed-method.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||||
|
|
||||||
|
export default function isAllowedMethod(
|
||||||
|
req: NextApiRequest,
|
||||||
|
res: NextApiResponse,
|
||||||
|
allowedMethods: string[]
|
||||||
|
) {
|
||||||
|
const methods = allowedMethods.includes('OPTIONS')
|
||||||
|
? allowedMethods
|
||||||
|
: [...allowedMethods, 'OPTIONS']
|
||||||
|
|
||||||
|
if (!req.method || !methods.includes(req.method)) {
|
||||||
|
res.status(405)
|
||||||
|
res.setHeader('Allow', methods.join(', '))
|
||||||
|
res.end()
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (req.method === 'OPTIONS') {
|
||||||
|
res.status(200)
|
||||||
|
res.setHeader('Allow', methods.join(', '))
|
||||||
|
res.setHeader('Content-Length', '0')
|
||||||
|
res.end()
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
2
framework/swell/api/wishlist/index.tsx
Normal file
2
framework/swell/api/wishlist/index.tsx
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export type WishlistItem = { product: any; id: number }
|
||||||
|
export default function () {}
|
76
framework/swell/auth/use-login.tsx
Normal file
76
framework/swell/auth/use-login.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
|
import type { MutationHook } from '@commerce/utils/types'
|
||||||
|
import { CommerceError, ValidationError } from '@commerce/utils/errors'
|
||||||
|
import useCustomer from '../customer/use-customer'
|
||||||
|
import createCustomerAccessTokenMutation from '../utils/mutations/customer-access-token-create'
|
||||||
|
import {
|
||||||
|
CustomerAccessTokenCreateInput,
|
||||||
|
CustomerUserError,
|
||||||
|
Mutation,
|
||||||
|
MutationCheckoutCreateArgs,
|
||||||
|
} from '../schema'
|
||||||
|
import useLogin, { UseLogin } from '@commerce/auth/use-login'
|
||||||
|
import { setCustomerToken } from '../utils'
|
||||||
|
|
||||||
|
export default useLogin as UseLogin<typeof handler>
|
||||||
|
|
||||||
|
const getErrorMessage = ({ code, message }: CustomerUserError) => {
|
||||||
|
switch (code) {
|
||||||
|
case 'UNIDENTIFIED_CUSTOMER':
|
||||||
|
message = 'Cannot find an account that matches the provided credentials'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return message
|
||||||
|
}
|
||||||
|
|
||||||
|
export const handler: MutationHook<null, {}, CustomerAccessTokenCreateInput> = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: createCustomerAccessTokenMutation,
|
||||||
|
},
|
||||||
|
async fetcher({ input: { email, password }, options, fetch }) {
|
||||||
|
if (!(email && password)) {
|
||||||
|
throw new CommerceError({
|
||||||
|
message:
|
||||||
|
'A first name, last name, email and password are required to login',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const { customerAccessTokenCreate } = await fetch<
|
||||||
|
Mutation,
|
||||||
|
MutationCheckoutCreateArgs
|
||||||
|
>({
|
||||||
|
...options,
|
||||||
|
variables: {
|
||||||
|
input: { email, password },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const errors = customerAccessTokenCreate?.customerUserErrors
|
||||||
|
|
||||||
|
if (errors && errors.length) {
|
||||||
|
throw new ValidationError({
|
||||||
|
message: getErrorMessage(errors[0]),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const customerAccessToken = customerAccessTokenCreate?.customerAccessToken
|
||||||
|
const accessToken = customerAccessToken?.accessToken
|
||||||
|
|
||||||
|
if (accessToken) {
|
||||||
|
setCustomerToken(accessToken)
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
useHook: ({ fetch }) => () => {
|
||||||
|
const { revalidate } = useCustomer()
|
||||||
|
|
||||||
|
return useCallback(
|
||||||
|
async function login(input) {
|
||||||
|
const data = await fetch({ input })
|
||||||
|
await revalidate()
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
[fetch, revalidate]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
36
framework/swell/auth/use-logout.tsx
Normal file
36
framework/swell/auth/use-logout.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
|
import type { MutationHook } from '@commerce/utils/types'
|
||||||
|
import useLogout, { UseLogout } from '@commerce/auth/use-logout'
|
||||||
|
import useCustomer from '../customer/use-customer'
|
||||||
|
import customerAccessTokenDeleteMutation from '../utils/mutations/customer-access-token-delete'
|
||||||
|
import { getCustomerToken, setCustomerToken } from '../utils/customer-token'
|
||||||
|
|
||||||
|
export default useLogout as UseLogout<typeof handler>
|
||||||
|
|
||||||
|
export const handler: MutationHook<null> = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: customerAccessTokenDeleteMutation,
|
||||||
|
},
|
||||||
|
async fetcher({ options, fetch }) {
|
||||||
|
await fetch({
|
||||||
|
...options,
|
||||||
|
variables: {
|
||||||
|
customerAccessToken: getCustomerToken(),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
setCustomerToken(null)
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
useHook: ({ fetch }) => () => {
|
||||||
|
const { mutate } = useCustomer()
|
||||||
|
|
||||||
|
return useCallback(
|
||||||
|
async function logout() {
|
||||||
|
const data = await fetch()
|
||||||
|
await mutate(null, false)
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
[fetch, mutate]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
74
framework/swell/auth/use-signup.tsx
Normal file
74
framework/swell/auth/use-signup.tsx
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
|
import type { MutationHook } from '@commerce/utils/types'
|
||||||
|
import { CommerceError } from '@commerce/utils/errors'
|
||||||
|
import useSignup, { UseSignup } from '@commerce/auth/use-signup'
|
||||||
|
import useCustomer from '../customer/use-customer'
|
||||||
|
import { CustomerCreateInput } from '../schema'
|
||||||
|
|
||||||
|
import {
|
||||||
|
customerCreateMutation,
|
||||||
|
customerAccessTokenCreateMutation,
|
||||||
|
} from '../utils/mutations'
|
||||||
|
import handleLogin from '../utils/handle-login'
|
||||||
|
|
||||||
|
export default useSignup as UseSignup<typeof handler>
|
||||||
|
|
||||||
|
export const handler: MutationHook<
|
||||||
|
null,
|
||||||
|
{},
|
||||||
|
CustomerCreateInput,
|
||||||
|
CustomerCreateInput
|
||||||
|
> = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: customerCreateMutation,
|
||||||
|
},
|
||||||
|
async fetcher({
|
||||||
|
input: { firstName, lastName, email, password },
|
||||||
|
options,
|
||||||
|
fetch,
|
||||||
|
}) {
|
||||||
|
if (!(firstName && lastName && email && password)) {
|
||||||
|
throw new CommerceError({
|
||||||
|
message:
|
||||||
|
'A first name, last name, email and password are required to signup',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const data = await fetch({
|
||||||
|
...options,
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
firstName,
|
||||||
|
lastName,
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
const loginData = await fetch({
|
||||||
|
query: customerAccessTokenCreateMutation,
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
handleLogin(loginData)
|
||||||
|
} catch (error) {}
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
useHook: ({ fetch }) => () => {
|
||||||
|
const { revalidate } = useCustomer()
|
||||||
|
|
||||||
|
return useCallback(
|
||||||
|
async function signup(input) {
|
||||||
|
const data = await fetch({ input })
|
||||||
|
await revalidate()
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
[fetch, revalidate]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
3
framework/swell/cart/index.ts
Normal file
3
framework/swell/cart/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export { default as useCart } from './use-cart'
|
||||||
|
export { default as useAddItem } from './use-add-item'
|
||||||
|
export { default as useRemoveItem } from './use-remove-item'
|
58
framework/swell/cart/use-add-item.tsx
Normal file
58
framework/swell/cart/use-add-item.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import type { MutationHook } from '@commerce/utils/types'
|
||||||
|
import { CommerceError } from '@commerce/utils/errors'
|
||||||
|
import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
|
||||||
|
import useCart from './use-cart'
|
||||||
|
import { Cart, CartItemBody } from '../types'
|
||||||
|
import { checkoutLineItemAddMutation, getCheckoutId } from '../utils'
|
||||||
|
import { checkoutToCart } from './utils'
|
||||||
|
import { Mutation, MutationCheckoutLineItemsAddArgs } from '../schema'
|
||||||
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
|
export default useAddItem as UseAddItem<typeof handler>
|
||||||
|
|
||||||
|
export const handler: MutationHook<Cart, {}, CartItemBody> = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: checkoutLineItemAddMutation,
|
||||||
|
},
|
||||||
|
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 { checkoutLineItemsAdd } = await fetch<
|
||||||
|
Mutation,
|
||||||
|
MutationCheckoutLineItemsAddArgs
|
||||||
|
>({
|
||||||
|
...options,
|
||||||
|
variables: {
|
||||||
|
checkoutId: getCheckoutId(),
|
||||||
|
lineItems: [
|
||||||
|
{
|
||||||
|
variantId: item.variantId,
|
||||||
|
quantity: item.quantity ?? 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// TODO: Fix this Cart type here
|
||||||
|
return checkoutToCart(checkoutLineItemsAdd) as any
|
||||||
|
},
|
||||||
|
useHook: ({ fetch }) => () => {
|
||||||
|
const { mutate } = useCart()
|
||||||
|
|
||||||
|
return useCallback(
|
||||||
|
async function addItem(input) {
|
||||||
|
const data = await fetch({ input })
|
||||||
|
await mutate(data, false)
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
[fetch, mutate]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
59
framework/swell/cart/use-cart.tsx
Normal file
59
framework/swell/cart/use-cart.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { useMemo } from 'react'
|
||||||
|
import useCommerceCart, {
|
||||||
|
FetchCartInput,
|
||||||
|
UseCart,
|
||||||
|
} from '@commerce/cart/use-cart'
|
||||||
|
|
||||||
|
import { Cart } from '../types'
|
||||||
|
import { SWRHook } from '@commerce/utils/types'
|
||||||
|
import { checkoutCreate, checkoutToCart } from './utils'
|
||||||
|
import getCheckoutQuery from '../utils/queries/get-checkout-query'
|
||||||
|
|
||||||
|
export default useCommerceCart as UseCart<typeof handler>
|
||||||
|
|
||||||
|
export const handler: SWRHook<
|
||||||
|
Cart | null,
|
||||||
|
{},
|
||||||
|
FetchCartInput,
|
||||||
|
{ isEmpty?: boolean }
|
||||||
|
> = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: getCheckoutQuery,
|
||||||
|
},
|
||||||
|
async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
|
||||||
|
let checkout
|
||||||
|
if (checkoutId) {
|
||||||
|
const data = await fetch({
|
||||||
|
...options,
|
||||||
|
variables: {
|
||||||
|
checkoutId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
checkout = data.node
|
||||||
|
}
|
||||||
|
|
||||||
|
if (checkout?.completedAt || !checkoutId) {
|
||||||
|
checkout = await checkoutCreate(fetch)
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Fix this type
|
||||||
|
return checkoutToCart({ checkout } as any)
|
||||||
|
},
|
||||||
|
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]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
72
framework/swell/cart/use-remove-item.tsx
Normal file
72
framework/swell/cart/use-remove-item.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
|
import type {
|
||||||
|
MutationHookContext,
|
||||||
|
HookFetcherContext,
|
||||||
|
} from '@commerce/utils/types'
|
||||||
|
|
||||||
|
import { ValidationError } from '@commerce/utils/errors'
|
||||||
|
|
||||||
|
import useRemoveItem, {
|
||||||
|
RemoveItemInput as RemoveItemInputBase,
|
||||||
|
UseRemoveItem,
|
||||||
|
} from '@commerce/cart/use-remove-item'
|
||||||
|
|
||||||
|
import useCart from './use-cart'
|
||||||
|
import { checkoutLineItemRemoveMutation, getCheckoutId } from '../utils'
|
||||||
|
import { checkoutToCart } from './utils'
|
||||||
|
import { Cart, LineItem } from '../types'
|
||||||
|
import { Mutation, MutationCheckoutLineItemsRemoveArgs } from '../schema'
|
||||||
|
import { RemoveCartItemBody } from '@commerce/types'
|
||||||
|
|
||||||
|
export type RemoveItemFn<T = any> = T extends LineItem
|
||||||
|
? (input?: RemoveItemInput<T>) => Promise<Cart | null>
|
||||||
|
: (input: RemoveItemInput<T>) => Promise<Cart | null>
|
||||||
|
|
||||||
|
export type RemoveItemInput<T = any> = T extends LineItem
|
||||||
|
? Partial<RemoveItemInputBase>
|
||||||
|
: RemoveItemInputBase
|
||||||
|
|
||||||
|
export default useRemoveItem as UseRemoveItem<typeof handler>
|
||||||
|
|
||||||
|
export const handler = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: checkoutLineItemRemoveMutation,
|
||||||
|
},
|
||||||
|
async fetcher({
|
||||||
|
input: { itemId },
|
||||||
|
options,
|
||||||
|
fetch,
|
||||||
|
}: HookFetcherContext<RemoveCartItemBody>) {
|
||||||
|
const data = await fetch<Mutation, MutationCheckoutLineItemsRemoveArgs>({
|
||||||
|
...options,
|
||||||
|
variables: { checkoutId: getCheckoutId(), lineItemIds: [itemId] },
|
||||||
|
})
|
||||||
|
return checkoutToCart(data.checkoutLineItemsRemove)
|
||||||
|
},
|
||||||
|
useHook: ({
|
||||||
|
fetch,
|
||||||
|
}: MutationHookContext<Cart | null, RemoveCartItemBody>) => <
|
||||||
|
T extends LineItem | undefined = undefined
|
||||||
|
>(
|
||||||
|
ctx: { item?: T } = {}
|
||||||
|
) => {
|
||||||
|
const { item } = ctx
|
||||||
|
const { mutate } = useCart()
|
||||||
|
const removeItem: RemoveItemFn<LineItem> = async (input) => {
|
||||||
|
const itemId = input?.id ?? item?.id
|
||||||
|
|
||||||
|
if (!itemId) {
|
||||||
|
throw new ValidationError({
|
||||||
|
message: 'Invalid input used for this operation',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await fetch({ input: { itemId } })
|
||||||
|
await mutate(data, false)
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
return useCallback(removeItem as RemoveItemFn<T>, [fetch, mutate])
|
||||||
|
},
|
||||||
|
}
|
107
framework/swell/cart/use-update-item.tsx
Normal file
107
framework/swell/cart/use-update-item.tsx
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
|
import debounce from 'lodash.debounce'
|
||||||
|
import type {
|
||||||
|
HookFetcherContext,
|
||||||
|
MutationHookContext,
|
||||||
|
} from '@commerce/utils/types'
|
||||||
|
import { ValidationError } from '@commerce/utils/errors'
|
||||||
|
import useUpdateItem, {
|
||||||
|
UpdateItemInput as UpdateItemInputBase,
|
||||||
|
UseUpdateItem,
|
||||||
|
} from '@commerce/cart/use-update-item'
|
||||||
|
|
||||||
|
import useCart from './use-cart'
|
||||||
|
import { handler as removeItemHandler } from './use-remove-item'
|
||||||
|
import type { Cart, LineItem, UpdateCartItemBody } from '../types'
|
||||||
|
import { checkoutToCart } from './utils'
|
||||||
|
import { getCheckoutId, checkoutLineItemUpdateMutation } from '../utils'
|
||||||
|
import { Mutation, MutationCheckoutLineItemsUpdateArgs } from '../schema'
|
||||||
|
|
||||||
|
export type UpdateItemInput<T = any> = T extends LineItem
|
||||||
|
? Partial<UpdateItemInputBase<LineItem>>
|
||||||
|
: UpdateItemInputBase<LineItem>
|
||||||
|
|
||||||
|
export default useUpdateItem as UseUpdateItem<typeof handler>
|
||||||
|
|
||||||
|
export const handler = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: checkoutLineItemUpdateMutation,
|
||||||
|
},
|
||||||
|
async fetcher({
|
||||||
|
input: { itemId, item },
|
||||||
|
options,
|
||||||
|
fetch,
|
||||||
|
}: HookFetcherContext<UpdateCartItemBody>) {
|
||||||
|
if (Number.isInteger(item.quantity)) {
|
||||||
|
// Also allow the update hook to remove an item if the quantity is lower than 1
|
||||||
|
if (item.quantity! < 1) {
|
||||||
|
return removeItemHandler.fetcher({
|
||||||
|
options: removeItemHandler.fetchOptions,
|
||||||
|
input: { itemId },
|
||||||
|
fetch,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else if (item.quantity) {
|
||||||
|
throw new ValidationError({
|
||||||
|
message: 'The item quantity has to be a valid integer',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const { checkoutLineItemsUpdate } = await fetch<
|
||||||
|
Mutation,
|
||||||
|
MutationCheckoutLineItemsUpdateArgs
|
||||||
|
>({
|
||||||
|
...options,
|
||||||
|
variables: {
|
||||||
|
checkoutId: getCheckoutId(),
|
||||||
|
lineItems: [
|
||||||
|
{
|
||||||
|
id: itemId,
|
||||||
|
quantity: item.quantity,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return checkoutToCart(checkoutLineItemsUpdate)
|
||||||
|
},
|
||||||
|
useHook: ({
|
||||||
|
fetch,
|
||||||
|
}: MutationHookContext<Cart | null, UpdateCartItemBody>) => <
|
||||||
|
T extends LineItem | undefined = undefined
|
||||||
|
>(
|
||||||
|
ctx: {
|
||||||
|
item?: T
|
||||||
|
wait?: number
|
||||||
|
} = {}
|
||||||
|
) => {
|
||||||
|
const { item } = ctx
|
||||||
|
const { mutate } = useCart() as any
|
||||||
|
|
||||||
|
return useCallback(
|
||||||
|
debounce(async (input: UpdateItemInput<T>) => {
|
||||||
|
const itemId = input.id ?? item?.id
|
||||||
|
const productId = input.productId ?? item?.productId
|
||||||
|
const variantId = input.productId ?? item?.variantId
|
||||||
|
if (!itemId || !productId || !variantId) {
|
||||||
|
throw new ValidationError({
|
||||||
|
message: 'Invalid input used for this operation',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await fetch({
|
||||||
|
input: {
|
||||||
|
item: {
|
||||||
|
productId,
|
||||||
|
variantId,
|
||||||
|
quantity: input.quantity,
|
||||||
|
},
|
||||||
|
itemId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
await mutate(data, false)
|
||||||
|
return data
|
||||||
|
}, ctx.wait ?? 500),
|
||||||
|
[fetch, mutate]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
29
framework/swell/cart/utils/checkout-create.ts
Normal file
29
framework/swell/cart/utils/checkout-create.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import {
|
||||||
|
SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
|
SHOPIFY_CHECKOUT_URL_COOKIE,
|
||||||
|
SHOPIFY_COOKIE_EXPIRE,
|
||||||
|
} from '../../const'
|
||||||
|
|
||||||
|
import checkoutCreateMutation from '../../utils/mutations/checkout-create'
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
|
export const checkoutCreate = async (fetch: any) => {
|
||||||
|
const data = await fetch({
|
||||||
|
query: checkoutCreateMutation,
|
||||||
|
})
|
||||||
|
|
||||||
|
const checkout = data.checkoutCreate?.checkout
|
||||||
|
const checkoutId = checkout?.id
|
||||||
|
|
||||||
|
if (checkoutId) {
|
||||||
|
const options = {
|
||||||
|
expires: SHOPIFY_COOKIE_EXPIRE,
|
||||||
|
}
|
||||||
|
Cookies.set(SHOPIFY_CHECKOUT_ID_COOKIE, checkoutId, options)
|
||||||
|
Cookies.set(SHOPIFY_CHECKOUT_URL_COOKIE, checkout?.webUrl, options)
|
||||||
|
}
|
||||||
|
|
||||||
|
return checkout
|
||||||
|
}
|
||||||
|
|
||||||
|
export default checkoutCreate
|
42
framework/swell/cart/utils/checkout-to-cart.ts
Normal file
42
framework/swell/cart/utils/checkout-to-cart.ts
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { Cart } from '../../types'
|
||||||
|
import { CommerceError, ValidationError } from '@commerce/utils/errors'
|
||||||
|
|
||||||
|
import {
|
||||||
|
CheckoutLineItemsAddPayload,
|
||||||
|
CheckoutLineItemsRemovePayload,
|
||||||
|
CheckoutLineItemsUpdatePayload,
|
||||||
|
Maybe,
|
||||||
|
} from '../../schema'
|
||||||
|
import { normalizeCart } from '../../utils'
|
||||||
|
|
||||||
|
export type CheckoutPayload =
|
||||||
|
| CheckoutLineItemsAddPayload
|
||||||
|
| CheckoutLineItemsUpdatePayload
|
||||||
|
| CheckoutLineItemsRemovePayload
|
||||||
|
|
||||||
|
const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
|
||||||
|
if (!checkoutPayload) {
|
||||||
|
throw new CommerceError({
|
||||||
|
message: 'Invalid response from Shopify',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkout = checkoutPayload?.checkout
|
||||||
|
const userErrors = checkoutPayload?.userErrors
|
||||||
|
|
||||||
|
if (userErrors && userErrors.length) {
|
||||||
|
throw new ValidationError({
|
||||||
|
message: userErrors[0].message,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!checkout) {
|
||||||
|
throw new CommerceError({
|
||||||
|
message: 'Invalid response from Shopify',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return normalizeCart(checkout)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default checkoutToCart
|
31
framework/swell/cart/utils/fetcher.ts
Normal file
31
framework/swell/cart/utils/fetcher.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { HookFetcherFn } from '@commerce/utils/types'
|
||||||
|
import { Cart } from '@commerce/types'
|
||||||
|
import { checkoutCreate, checkoutToCart } from '.'
|
||||||
|
import { FetchCartInput } from '@commerce/cart/use-cart'
|
||||||
|
|
||||||
|
const fetcher: HookFetcherFn<Cart | null, FetchCartInput> = async ({
|
||||||
|
options,
|
||||||
|
input: { cartId: checkoutId },
|
||||||
|
fetch,
|
||||||
|
}) => {
|
||||||
|
let checkout
|
||||||
|
|
||||||
|
if (checkoutId) {
|
||||||
|
const data = await fetch({
|
||||||
|
...options,
|
||||||
|
variables: {
|
||||||
|
checkoutId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
checkout = data.node
|
||||||
|
}
|
||||||
|
|
||||||
|
if (checkout?.completedAt || !checkoutId) {
|
||||||
|
checkout = await checkoutCreate(fetch)
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Fix this type
|
||||||
|
return checkoutToCart({ checkout } as any)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default fetcher
|
2
framework/swell/cart/utils/index.ts
Normal file
2
framework/swell/cart/utils/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { default as checkoutToCart } from './checkout-to-cart'
|
||||||
|
export { default as checkoutCreate } from './checkout-create'
|
6
framework/swell/commerce.config.json
Normal file
6
framework/swell/commerce.config.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"provider": "shopify",
|
||||||
|
"features": {
|
||||||
|
"wishlist": false
|
||||||
|
}
|
||||||
|
}
|
42
framework/swell/common/get-all-pages.ts
Normal file
42
framework/swell/common/get-all-pages.ts
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
import { PageEdge } from '../schema'
|
||||||
|
import { getAllPagesQuery } from '../utils/queries'
|
||||||
|
|
||||||
|
type Variables = {
|
||||||
|
first?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReturnType = {
|
||||||
|
pages: Page[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Page = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
url: string
|
||||||
|
sort_order?: number
|
||||||
|
body: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAllPages = async (options?: {
|
||||||
|
variables?: Variables
|
||||||
|
config: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}): Promise<ReturnType> => {
|
||||||
|
let { config, variables = { first: 250 } } = options ?? {}
|
||||||
|
config = getConfig(config)
|
||||||
|
const { locale } = config
|
||||||
|
const { data } = await config.fetch(getAllPagesQuery, { variables })
|
||||||
|
|
||||||
|
const pages = data.pages?.edges?.map(
|
||||||
|
({ node: { title: name, handle, ...node } }: PageEdge) => ({
|
||||||
|
...node,
|
||||||
|
url: `/${locale}/${handle}`,
|
||||||
|
name,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
return { pages }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getAllPages
|
37
framework/swell/common/get-page.ts
Normal file
37
framework/swell/common/get-page.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
import getPageQuery from '../utils/queries/get-page-query'
|
||||||
|
import { Page } from './get-all-pages'
|
||||||
|
|
||||||
|
type Variables = {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GetPageResult<T extends { page?: any } = { page?: Page }> = T
|
||||||
|
|
||||||
|
const getPage = async (options: {
|
||||||
|
variables: Variables
|
||||||
|
config: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}): Promise<GetPageResult> => {
|
||||||
|
let { config, variables } = options ?? {}
|
||||||
|
|
||||||
|
config = getConfig(config)
|
||||||
|
const { locale } = config
|
||||||
|
|
||||||
|
const { data } = await config.fetch(getPageQuery, {
|
||||||
|
variables,
|
||||||
|
})
|
||||||
|
const page = data.node
|
||||||
|
|
||||||
|
return {
|
||||||
|
page: page
|
||||||
|
? {
|
||||||
|
...page,
|
||||||
|
name: page.title,
|
||||||
|
url: `/${locale}/${page.handle}`,
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getPage
|
31
framework/swell/common/get-site-info.ts
Normal file
31
framework/swell/common/get-site-info.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import getCategories, { Category } from '../utils/get-categories'
|
||||||
|
import getVendors, { Brands } from '../utils/get-vendors'
|
||||||
|
|
||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
|
||||||
|
export type GetSiteInfoResult<
|
||||||
|
T extends { categories: any[]; brands: any[] } = {
|
||||||
|
categories: Category[]
|
||||||
|
brands: Brands
|
||||||
|
}
|
||||||
|
> = T
|
||||||
|
|
||||||
|
const getSiteInfo = async (options?: {
|
||||||
|
variables?: any
|
||||||
|
config: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}): Promise<GetSiteInfoResult> => {
|
||||||
|
let { config } = options ?? {}
|
||||||
|
|
||||||
|
config = getConfig(config)
|
||||||
|
|
||||||
|
const categories = await getCategories(config)
|
||||||
|
const brands = await getVendors(config)
|
||||||
|
|
||||||
|
return {
|
||||||
|
categories,
|
||||||
|
brands,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getSiteInfo
|
13
framework/swell/const.ts
Normal file
13
framework/swell/const.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
export const SHOPIFY_CHECKOUT_ID_COOKIE = 'shopify_checkoutId'
|
||||||
|
|
||||||
|
export const SHOPIFY_CHECKOUT_URL_COOKIE = 'shopify_checkoutUrl'
|
||||||
|
|
||||||
|
export const SHOPIFY_CUSTOMER_TOKEN_COOKIE = 'shopify_customerToken'
|
||||||
|
|
||||||
|
export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
|
||||||
|
|
||||||
|
export const SHOPIFY_COOKIE_EXPIRE = 30
|
||||||
|
|
||||||
|
export const API_URL = `https://${STORE_DOMAIN}/api/2021-01/graphql.json`
|
||||||
|
|
||||||
|
export const API_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
|
24
framework/swell/customer/get-customer-id.ts
Normal file
24
framework/swell/customer/get-customer-id.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
import getCustomerIdQuery from '../utils/queries/get-customer-id-query'
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
|
async function getCustomerId({
|
||||||
|
customerToken: customerAccesToken,
|
||||||
|
config,
|
||||||
|
}: {
|
||||||
|
customerToken: string
|
||||||
|
config?: ShopifyConfig
|
||||||
|
}): Promise<number | undefined> {
|
||||||
|
config = getConfig(config)
|
||||||
|
|
||||||
|
const { data } = await config.fetch(getCustomerIdQuery, {
|
||||||
|
variables: {
|
||||||
|
customerAccesToken:
|
||||||
|
customerAccesToken || Cookies.get(config.customerCookie),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return data.customer?.id
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getCustomerId
|
1
framework/swell/customer/index.ts
Normal file
1
framework/swell/customer/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default as useCustomer } from './use-customer'
|
27
framework/swell/customer/use-customer.tsx
Normal file
27
framework/swell/customer/use-customer.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
|
||||||
|
import { Customer } from '@commerce/types'
|
||||||
|
import { SWRHook } from '@commerce/utils/types'
|
||||||
|
import { getCustomerQuery, getCustomerToken } from '../utils'
|
||||||
|
|
||||||
|
export default useCustomer as UseCustomer<typeof handler>
|
||||||
|
|
||||||
|
export const handler: SWRHook<Customer | null> = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: getCustomerQuery,
|
||||||
|
},
|
||||||
|
async fetcher({ options, fetch }) {
|
||||||
|
const data = await fetch<any | null>({
|
||||||
|
...options,
|
||||||
|
variables: { customerAccessToken: getCustomerToken() },
|
||||||
|
})
|
||||||
|
return data.customer ?? null
|
||||||
|
},
|
||||||
|
useHook: ({ useData }) => (input) => {
|
||||||
|
return useData({
|
||||||
|
swrOptions: {
|
||||||
|
revalidateOnFocus: false,
|
||||||
|
...input?.swrOptions,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
18
framework/swell/fetcher.ts
Normal file
18
framework/swell/fetcher.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { Fetcher } from '@commerce/utils/types'
|
||||||
|
import { API_TOKEN, API_URL } from './const'
|
||||||
|
import { handleFetchResponse } from './utils'
|
||||||
|
|
||||||
|
const fetcher: Fetcher = async ({ method = 'POST', variables, query }) => {
|
||||||
|
return handleFetchResponse(
|
||||||
|
await fetch(API_URL, {
|
||||||
|
method,
|
||||||
|
body: JSON.stringify({ query, variables }),
|
||||||
|
headers: {
|
||||||
|
'X-Shopify-Storefront-Access-Token': API_TOKEN!,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default fetcher
|
40
framework/swell/index.tsx
Normal file
40
framework/swell/index.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import * as React from 'react'
|
||||||
|
import { ReactNode } from 'react'
|
||||||
|
|
||||||
|
import {
|
||||||
|
CommerceConfig,
|
||||||
|
CommerceProvider as CoreCommerceProvider,
|
||||||
|
useCommerce as useCoreCommerce,
|
||||||
|
} from '@commerce'
|
||||||
|
|
||||||
|
import { shopifyProvider, ShopifyProvider } from './provider'
|
||||||
|
import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
|
||||||
|
|
||||||
|
export { shopifyProvider }
|
||||||
|
export type { ShopifyProvider }
|
||||||
|
|
||||||
|
export const shopifyConfig: CommerceConfig = {
|
||||||
|
locale: 'en-us',
|
||||||
|
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ShopifyConfig = Partial<CommerceConfig>
|
||||||
|
|
||||||
|
export type ShopifyProps = {
|
||||||
|
children?: ReactNode
|
||||||
|
locale: string
|
||||||
|
} & ShopifyConfig
|
||||||
|
|
||||||
|
export function CommerceProvider({ children, ...config }: ShopifyProps) {
|
||||||
|
return (
|
||||||
|
<CoreCommerceProvider
|
||||||
|
// TODO: Fix this type
|
||||||
|
provider={shopifyProvider as any}
|
||||||
|
config={{ ...shopifyConfig, ...config }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</CoreCommerceProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useCommerce = () => useCoreCommerce()
|
8
framework/swell/next.config.js
Normal file
8
framework/swell/next.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
const commerce = require('./commerce.config.json')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
commerce,
|
||||||
|
images: {
|
||||||
|
domains: ['cdn.shopify.com'],
|
||||||
|
},
|
||||||
|
}
|
29
framework/swell/product/get-all-collections.ts
Normal file
29
framework/swell/product/get-all-collections.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { CollectionEdge } from '../schema'
|
||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
import getAllCollectionsQuery from '../utils/queries/get-all-collections-query'
|
||||||
|
|
||||||
|
const getAllCollections = async (options?: {
|
||||||
|
variables?: any
|
||||||
|
config: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}) => {
|
||||||
|
let { config, variables = { first: 250 } } = options ?? {}
|
||||||
|
config = getConfig(config)
|
||||||
|
|
||||||
|
const { data } = await config.fetch(getAllCollectionsQuery, { variables })
|
||||||
|
const edges = data.collections?.edges ?? []
|
||||||
|
|
||||||
|
const categories = edges.map(
|
||||||
|
({ node: { id: entityId, title: name, handle } }: CollectionEdge) => ({
|
||||||
|
entityId,
|
||||||
|
name,
|
||||||
|
path: `/${handle}`,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
return {
|
||||||
|
categories,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getAllCollections
|
42
framework/swell/product/get-all-product-paths.ts
Normal file
42
framework/swell/product/get-all-product-paths.ts
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { Product } from '@commerce/types'
|
||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
import fetchAllProducts from '../api/utils/fetch-all-products'
|
||||||
|
import { ProductEdge } from '../schema'
|
||||||
|
import getAllProductsPathsQuery from '../utils/queries/get-all-products-paths-query'
|
||||||
|
|
||||||
|
type ProductPath = {
|
||||||
|
path: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ProductPathNode = {
|
||||||
|
node: ProductPath
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReturnType = {
|
||||||
|
products: ProductPathNode[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAllProductPaths = async (options?: {
|
||||||
|
variables?: any
|
||||||
|
config?: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}): Promise<ReturnType> => {
|
||||||
|
let { config, variables = { first: 250 } } = options ?? {}
|
||||||
|
config = getConfig(config)
|
||||||
|
|
||||||
|
const products = await fetchAllProducts({
|
||||||
|
config,
|
||||||
|
query: getAllProductsPathsQuery,
|
||||||
|
variables,
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
products: products?.map(({ node: { handle } }: ProductEdge) => ({
|
||||||
|
node: {
|
||||||
|
path: `/${handle}`,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getAllProductPaths
|
40
framework/swell/product/get-all-products.ts
Normal file
40
framework/swell/product/get-all-products.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { GraphQLFetcherResult } from '@commerce/api'
|
||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
import { ProductEdge } from '../schema'
|
||||||
|
import { getAllProductsQuery } from '../utils/queries'
|
||||||
|
import { normalizeProduct } from '../utils/normalize'
|
||||||
|
import { Product } from '@commerce/types'
|
||||||
|
|
||||||
|
type Variables = {
|
||||||
|
first?: number
|
||||||
|
field?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReturnType = {
|
||||||
|
products: Product[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAllProducts = async (options: {
|
||||||
|
variables?: Variables
|
||||||
|
config?: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}): Promise<ReturnType> => {
|
||||||
|
let { config, variables = { first: 250 } } = options ?? {}
|
||||||
|
config = getConfig(config)
|
||||||
|
|
||||||
|
const { data }: GraphQLFetcherResult = await config.fetch(
|
||||||
|
getAllProductsQuery,
|
||||||
|
{ variables }
|
||||||
|
)
|
||||||
|
|
||||||
|
const products =
|
||||||
|
data.products?.edges?.map(({ node: p }: ProductEdge) =>
|
||||||
|
normalizeProduct(p)
|
||||||
|
) ?? []
|
||||||
|
|
||||||
|
return {
|
||||||
|
products,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getAllProducts
|
32
framework/swell/product/get-product.ts
Normal file
32
framework/swell/product/get-product.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { GraphQLFetcherResult } from '@commerce/api'
|
||||||
|
import { getConfig, ShopifyConfig } from '../api'
|
||||||
|
import { normalizeProduct, getProductQuery } from '../utils'
|
||||||
|
|
||||||
|
type Variables = {
|
||||||
|
slug: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReturnType = {
|
||||||
|
product: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const getProduct = async (options: {
|
||||||
|
variables: Variables
|
||||||
|
config: ShopifyConfig
|
||||||
|
preview?: boolean
|
||||||
|
}): Promise<ReturnType> => {
|
||||||
|
let { config, variables } = options ?? {}
|
||||||
|
config = getConfig(config)
|
||||||
|
|
||||||
|
const { data }: GraphQLFetcherResult = await config.fetch(getProductQuery, {
|
||||||
|
variables,
|
||||||
|
})
|
||||||
|
|
||||||
|
const { productByHandle: product } = data
|
||||||
|
|
||||||
|
return {
|
||||||
|
product: product ? normalizeProduct(product) : null,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getProduct
|
2
framework/swell/product/use-price.tsx
Normal file
2
framework/swell/product/use-price.tsx
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from '@commerce/product/use-price'
|
||||||
|
export { default } from '@commerce/product/use-price'
|
77
framework/swell/product/use-search.tsx
Normal file
77
framework/swell/product/use-search.tsx
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import { SWRHook } from '@commerce/utils/types'
|
||||||
|
import useSearch, { UseSearch } from '@commerce/product/use-search'
|
||||||
|
|
||||||
|
import { ProductEdge } from '../schema'
|
||||||
|
import {
|
||||||
|
getAllProductsQuery,
|
||||||
|
getCollectionProductsQuery,
|
||||||
|
getSearchVariables,
|
||||||
|
normalizeProduct,
|
||||||
|
} from '../utils'
|
||||||
|
|
||||||
|
import { Product } from '@commerce/types'
|
||||||
|
|
||||||
|
export default useSearch as UseSearch<typeof handler>
|
||||||
|
|
||||||
|
export type SearchProductsInput = {
|
||||||
|
search?: string
|
||||||
|
categoryId?: string
|
||||||
|
brandId?: string
|
||||||
|
sort?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SearchProductsData = {
|
||||||
|
products: Product[]
|
||||||
|
found: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const handler: SWRHook<
|
||||||
|
SearchProductsData,
|
||||||
|
SearchProductsInput,
|
||||||
|
SearchProductsInput
|
||||||
|
> = {
|
||||||
|
fetchOptions: {
|
||||||
|
query: getAllProductsQuery,
|
||||||
|
},
|
||||||
|
async fetcher({ input, options, fetch }) {
|
||||||
|
const { categoryId, brandId } = input
|
||||||
|
|
||||||
|
const data = await fetch({
|
||||||
|
query: categoryId ? getCollectionProductsQuery : options.query,
|
||||||
|
method: options?.method,
|
||||||
|
variables: getSearchVariables(input),
|
||||||
|
})
|
||||||
|
|
||||||
|
let edges
|
||||||
|
|
||||||
|
if (categoryId) {
|
||||||
|
edges = data.node?.products?.edges ?? []
|
||||||
|
if (brandId) {
|
||||||
|
edges = edges.filter(
|
||||||
|
({ node: { vendor } }: ProductEdge) => vendor === brandId
|
||||||
|
)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
edges = data.products?.edges ?? []
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
products: edges.map(({ node }: ProductEdge) => normalizeProduct(node)),
|
||||||
|
found: !!edges.length,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
useHook: ({ useData }) => (input = {}) => {
|
||||||
|
return useData({
|
||||||
|
input: [
|
||||||
|
['search', input.search],
|
||||||
|
['categoryId', input.categoryId],
|
||||||
|
['brandId', input.brandId],
|
||||||
|
['sort', input.sort],
|
||||||
|
],
|
||||||
|
swrOptions: {
|
||||||
|
revalidateOnFocus: false,
|
||||||
|
...input.swrOptions,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
31
framework/swell/provider.ts
Normal file
31
framework/swell/provider.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { SHOPIFY_CHECKOUT_ID_COOKIE, STORE_DOMAIN } from './const'
|
||||||
|
|
||||||
|
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 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 shopifyProvider = {
|
||||||
|
locale: 'en-us',
|
||||||
|
cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
|
||||||
|
storeDomain: STORE_DOMAIN,
|
||||||
|
fetcher,
|
||||||
|
cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
|
||||||
|
customer: { useCustomer },
|
||||||
|
products: { useSearch },
|
||||||
|
auth: { useLogin, useLogout, useSignup },
|
||||||
|
features: {
|
||||||
|
wishlist: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ShopifyProvider = typeof shopifyProvider
|
4985
framework/swell/schema.d.ts
vendored
Normal file
4985
framework/swell/schema.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load Diff
9631
framework/swell/schema.graphql
Normal file
9631
framework/swell/schema.graphql
Normal file
File diff suppressed because it is too large
Load Diff
45
framework/swell/types.ts
Normal file
45
framework/swell/types.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import * as Core from '@commerce/types'
|
||||||
|
import { CheckoutLineItem } from './schema'
|
||||||
|
|
||||||
|
export type ShopifyCheckout = {
|
||||||
|
id: string
|
||||||
|
webUrl: string
|
||||||
|
lineItems: CheckoutLineItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Cart extends Core.Cart {
|
||||||
|
id: string
|
||||||
|
lineItems: LineItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LineItem extends Core.LineItem {
|
||||||
|
options: any[]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cart mutations
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type OptionSelections = {
|
||||||
|
option_id: number
|
||||||
|
option_value: number | string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type CartItemBody = Core.CartItemBody & {
|
||||||
|
productId: string // The product id is always required for BC
|
||||||
|
optionSelections?: OptionSelections
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GetCartHandlerBody = Core.GetCartHandlerBody
|
||||||
|
|
||||||
|
export type AddCartItemBody = Core.AddCartItemBody<CartItemBody>
|
||||||
|
|
||||||
|
export type AddCartItemHandlerBody = Core.AddCartItemHandlerBody<CartItemBody>
|
||||||
|
|
||||||
|
export type UpdateCartItemBody = Core.UpdateCartItemBody<CartItemBody>
|
||||||
|
|
||||||
|
export type UpdateCartItemHandlerBody = Core.UpdateCartItemHandlerBody<CartItemBody>
|
||||||
|
|
||||||
|
export type RemoveCartItemBody = Core.RemoveCartItemBody
|
||||||
|
|
||||||
|
export type RemoveCartItemHandlerBody = Core.RemoveCartItemHandlerBody
|
21
framework/swell/utils/customer-token.ts
Normal file
21
framework/swell/utils/customer-token.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import Cookies, { CookieAttributes } from 'js-cookie'
|
||||||
|
import { SHOPIFY_COOKIE_EXPIRE, SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
|
||||||
|
|
||||||
|
export const getCustomerToken = () => Cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
|
||||||
|
|
||||||
|
export const setCustomerToken = (
|
||||||
|
token: string | null,
|
||||||
|
options?: CookieAttributes
|
||||||
|
) => {
|
||||||
|
if (!token) {
|
||||||
|
Cookies.remove(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
|
||||||
|
} else {
|
||||||
|
Cookies.set(
|
||||||
|
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
|
||||||
|
token,
|
||||||
|
options ?? {
|
||||||
|
expires: SHOPIFY_COOKIE_EXPIRE,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
29
framework/swell/utils/get-categories.ts
Normal file
29
framework/swell/utils/get-categories.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { ShopifyConfig } from '../api'
|
||||||
|
import { CollectionEdge } from '../schema'
|
||||||
|
import getSiteCollectionsQuery from './queries/get-all-collections-query'
|
||||||
|
|
||||||
|
export type Category = {
|
||||||
|
entityId: string
|
||||||
|
name: string
|
||||||
|
path: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCategories = async (config: ShopifyConfig): Promise<Category[]> => {
|
||||||
|
const { data } = await config.fetch(getSiteCollectionsQuery, {
|
||||||
|
variables: {
|
||||||
|
first: 250,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
data.collections?.edges?.map(
|
||||||
|
({ node: { id: entityId, title: name, handle } }: CollectionEdge) => ({
|
||||||
|
entityId,
|
||||||
|
name,
|
||||||
|
path: `/${handle}`,
|
||||||
|
})
|
||||||
|
) ?? []
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getCategories
|
8
framework/swell/utils/get-checkout-id.ts
Normal file
8
framework/swell/utils/get-checkout-id.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import Cookies from 'js-cookie'
|
||||||
|
import { SHOPIFY_CHECKOUT_ID_COOKIE } from '../const'
|
||||||
|
|
||||||
|
const getCheckoutId = (id?: string) => {
|
||||||
|
return id ?? Cookies.get(SHOPIFY_CHECKOUT_ID_COOKIE)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getCheckoutId
|
27
framework/swell/utils/get-search-variables.ts
Normal file
27
framework/swell/utils/get-search-variables.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import getSortVariables from './get-sort-variables'
|
||||||
|
import type { SearchProductsInput } from '../product/use-search'
|
||||||
|
|
||||||
|
export const getSearchVariables = ({
|
||||||
|
brandId,
|
||||||
|
search,
|
||||||
|
categoryId,
|
||||||
|
sort,
|
||||||
|
}: SearchProductsInput) => {
|
||||||
|
let query = ''
|
||||||
|
|
||||||
|
if (search) {
|
||||||
|
query += `product_type:${search} OR title:${search} OR tag:${search}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (brandId) {
|
||||||
|
query += `${search ? ' AND ' : ''}vendor:${brandId}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
categoryId,
|
||||||
|
query,
|
||||||
|
...getSortVariables(sort, !!categoryId),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getSearchVariables
|
32
framework/swell/utils/get-sort-variables.ts
Normal file
32
framework/swell/utils/get-sort-variables.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
const getSortVariables = (sort?: string, isCategory = false) => {
|
||||||
|
let output = {}
|
||||||
|
switch (sort) {
|
||||||
|
case 'price-asc':
|
||||||
|
output = {
|
||||||
|
sortKey: 'PRICE',
|
||||||
|
reverse: false,
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'price-desc':
|
||||||
|
output = {
|
||||||
|
sortKey: 'PRICE',
|
||||||
|
reverse: true,
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'trending-desc':
|
||||||
|
output = {
|
||||||
|
sortKey: 'BEST_SELLING',
|
||||||
|
reverse: false,
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'latest-desc':
|
||||||
|
output = {
|
||||||
|
sortKey: isCategory ? 'CREATED' : 'CREATED_AT',
|
||||||
|
reverse: true,
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return output
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getSortVariables
|
36
framework/swell/utils/get-vendors.ts
Normal file
36
framework/swell/utils/get-vendors.ts
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { ShopifyConfig } from '../api'
|
||||||
|
import fetchAllProducts from '../api/utils/fetch-all-products'
|
||||||
|
import getAllProductVendors from './queries/get-all-product-vendors-query'
|
||||||
|
|
||||||
|
export type BrandNode = {
|
||||||
|
name: string
|
||||||
|
path: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type BrandEdge = {
|
||||||
|
node: BrandNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Brands = BrandEdge[]
|
||||||
|
|
||||||
|
const getVendors = async (config: ShopifyConfig): Promise<BrandEdge[]> => {
|
||||||
|
const vendors = await fetchAllProducts({
|
||||||
|
config,
|
||||||
|
query: getAllProductVendors,
|
||||||
|
variables: {
|
||||||
|
first: 250,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
let vendorsStrings = vendors.map(({ node: { vendor } }) => vendor)
|
||||||
|
|
||||||
|
return [...new Set(vendorsStrings)].map((v) => ({
|
||||||
|
node: {
|
||||||
|
entityId: v,
|
||||||
|
name: v,
|
||||||
|
path: `brands/${v}`,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export default getVendors
|
27
framework/swell/utils/handle-fetch-response.ts
Normal file
27
framework/swell/utils/handle-fetch-response.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { FetcherError } from '@commerce/utils/errors'
|
||||||
|
|
||||||
|
export function getError(errors: any[], status: number) {
|
||||||
|
errors = errors ?? [{ message: 'Failed to fetch Shopify API' }]
|
||||||
|
return new FetcherError({ errors, status })
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAsyncError(res: Response) {
|
||||||
|
const data = await res.json()
|
||||||
|
return getError(data.errors, res.status)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFetchResponse = async (res: Response) => {
|
||||||
|
if (res.ok) {
|
||||||
|
const { data, errors } = await res.json()
|
||||||
|
|
||||||
|
if (errors && errors.length) {
|
||||||
|
throw getError(errors, res.status)
|
||||||
|
}
|
||||||
|
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
throw await getAsyncError(res)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default handleFetchResponse
|
39
framework/swell/utils/handle-login.ts
Normal file
39
framework/swell/utils/handle-login.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { ValidationError } from '@commerce/utils/errors'
|
||||||
|
import { setCustomerToken } from './customer-token'
|
||||||
|
|
||||||
|
const getErrorMessage = ({
|
||||||
|
code,
|
||||||
|
message,
|
||||||
|
}: {
|
||||||
|
code: string
|
||||||
|
message: string
|
||||||
|
}) => {
|
||||||
|
switch (code) {
|
||||||
|
case 'UNIDENTIFIED_CUSTOMER':
|
||||||
|
message = 'Cannot find an account that matches the provided credentials'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return message
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogin = (data: any) => {
|
||||||
|
const response = data.customerAccessTokenCreate
|
||||||
|
const errors = response?.customerUserErrors
|
||||||
|
|
||||||
|
if (errors && errors.length) {
|
||||||
|
throw new ValidationError({
|
||||||
|
message: getErrorMessage(errors[0]),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const customerAccessToken = response?.customerAccessToken
|
||||||
|
const accessToken = customerAccessToken?.accessToken
|
||||||
|
|
||||||
|
if (accessToken) {
|
||||||
|
setCustomerToken(accessToken)
|
||||||
|
}
|
||||||
|
|
||||||
|
return customerAccessToken
|
||||||
|
}
|
||||||
|
|
||||||
|
export default handleLogin
|
10
framework/swell/utils/index.ts
Normal file
10
framework/swell/utils/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
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 { default as getCheckoutId } from './get-checkout-id'
|
||||||
|
export * from './queries'
|
||||||
|
export * from './mutations'
|
||||||
|
export * from './normalize'
|
||||||
|
export * from './customer-token'
|
@ -0,0 +1,18 @@
|
|||||||
|
const associateCustomerWithCheckoutMutation = /* GraphQl */ `
|
||||||
|
mutation associateCustomerWithCheckout($checkoutId: ID!, $customerAccessToken: String!) {
|
||||||
|
checkoutCustomerAssociateV2(checkoutId: $checkoutId, customerAccessToken: $customerAccessToken) {
|
||||||
|
checkout {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
checkoutUserErrors {
|
||||||
|
code
|
||||||
|
field
|
||||||
|
message
|
||||||
|
}
|
||||||
|
customer {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default associateCustomerWithCheckoutMutation
|
16
framework/swell/utils/mutations/checkout-create.ts
Normal file
16
framework/swell/utils/mutations/checkout-create.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { checkoutDetailsFragment } from '../queries/get-checkout-query'
|
||||||
|
|
||||||
|
const checkoutCreateMutation = /* GraphQL */ `
|
||||||
|
mutation {
|
||||||
|
checkoutCreate(input: {}) {
|
||||||
|
userErrors {
|
||||||
|
message
|
||||||
|
field
|
||||||
|
}
|
||||||
|
checkout {
|
||||||
|
${checkoutDetailsFragment}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default checkoutCreateMutation
|
16
framework/swell/utils/mutations/checkout-line-item-add.ts
Normal file
16
framework/swell/utils/mutations/checkout-line-item-add.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { checkoutDetailsFragment } from '../queries/get-checkout-query'
|
||||||
|
|
||||||
|
const checkoutLineItemAddMutation = /* GraphQL */ `
|
||||||
|
mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
|
||||||
|
checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) {
|
||||||
|
userErrors {
|
||||||
|
message
|
||||||
|
field
|
||||||
|
}
|
||||||
|
checkout {
|
||||||
|
${checkoutDetailsFragment}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default checkoutLineItemAddMutation
|
19
framework/swell/utils/mutations/checkout-line-item-remove.ts
Normal file
19
framework/swell/utils/mutations/checkout-line-item-remove.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { checkoutDetailsFragment } from '../queries/get-checkout-query'
|
||||||
|
|
||||||
|
const checkoutLineItemRemoveMutation = /* GraphQL */ `
|
||||||
|
mutation($checkoutId: ID!, $lineItemIds: [ID!]!) {
|
||||||
|
checkoutLineItemsRemove(
|
||||||
|
checkoutId: $checkoutId
|
||||||
|
lineItemIds: $lineItemIds
|
||||||
|
) {
|
||||||
|
userErrors {
|
||||||
|
message
|
||||||
|
field
|
||||||
|
}
|
||||||
|
checkout {
|
||||||
|
${checkoutDetailsFragment}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default checkoutLineItemRemoveMutation
|
16
framework/swell/utils/mutations/checkout-line-item-update.ts
Normal file
16
framework/swell/utils/mutations/checkout-line-item-update.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { checkoutDetailsFragment } from '../queries/get-checkout-query'
|
||||||
|
|
||||||
|
const checkoutLineItemUpdateMutation = /* GraphQL */ `
|
||||||
|
mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemUpdateInput!]!) {
|
||||||
|
checkoutLineItemsUpdate(checkoutId: $checkoutId, lineItems: $lineItems) {
|
||||||
|
userErrors {
|
||||||
|
message
|
||||||
|
field
|
||||||
|
}
|
||||||
|
checkout {
|
||||||
|
${checkoutDetailsFragment}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default checkoutLineItemUpdateMutation
|
@ -0,0 +1,16 @@
|
|||||||
|
const customerAccessTokenCreateMutation = /* GraphQL */ `
|
||||||
|
mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
|
||||||
|
customerAccessTokenCreate(input: $input) {
|
||||||
|
customerAccessToken {
|
||||||
|
accessToken
|
||||||
|
expiresAt
|
||||||
|
}
|
||||||
|
customerUserErrors {
|
||||||
|
code
|
||||||
|
field
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default customerAccessTokenCreateMutation
|
@ -0,0 +1,14 @@
|
|||||||
|
const customerAccessTokenDeleteMutation = /* GraphQL */ `
|
||||||
|
mutation customerAccessTokenDelete($customerAccessToken: String!) {
|
||||||
|
customerAccessTokenDelete(customerAccessToken: $customerAccessToken) {
|
||||||
|
deletedAccessToken
|
||||||
|
deletedCustomerAccessTokenId
|
||||||
|
userErrors {
|
||||||
|
field
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default customerAccessTokenDeleteMutation
|
15
framework/swell/utils/mutations/customer-create.ts
Normal file
15
framework/swell/utils/mutations/customer-create.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const customerCreateMutation = /* GraphQL */ `
|
||||||
|
mutation customerCreate($input: CustomerCreateInput!) {
|
||||||
|
customerCreate(input: $input) {
|
||||||
|
customerUserErrors {
|
||||||
|
code
|
||||||
|
field
|
||||||
|
message
|
||||||
|
}
|
||||||
|
customer {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default customerCreateMutation
|
7
framework/swell/utils/mutations/index.ts
Normal file
7
framework/swell/utils/mutations/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export { default as customerCreateMutation } from './customer-create'
|
||||||
|
export { default as checkoutCreateMutation } from './checkout-create'
|
||||||
|
export { default as checkoutLineItemAddMutation } from './checkout-line-item-add'
|
||||||
|
export { default as checkoutLineItemUpdateMutation } from './checkout-line-item-update'
|
||||||
|
export { default as checkoutLineItemRemoveMutation } from './checkout-line-item-remove'
|
||||||
|
export { default as customerAccessTokenCreateMutation } from './customer-access-token-create'
|
||||||
|
export { default as customerAccessTokenDeleteMutation } from './customer-access-token-delete'
|
152
framework/swell/utils/normalize.ts
Normal file
152
framework/swell/utils/normalize.ts
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
import { Product } from '@commerce/types'
|
||||||
|
|
||||||
|
import {
|
||||||
|
Product as ShopifyProduct,
|
||||||
|
Checkout,
|
||||||
|
CheckoutLineItemEdge,
|
||||||
|
SelectedOption,
|
||||||
|
ImageConnection,
|
||||||
|
ProductVariantConnection,
|
||||||
|
MoneyV2,
|
||||||
|
ProductOption,
|
||||||
|
} from '../schema'
|
||||||
|
|
||||||
|
import type { Cart, LineItem } from '../types'
|
||||||
|
|
||||||
|
const money = ({ amount, currencyCode }: MoneyV2) => {
|
||||||
|
return {
|
||||||
|
value: +amount,
|
||||||
|
currencyCode,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizeProductOption = ({
|
||||||
|
id,
|
||||||
|
name: displayName,
|
||||||
|
values,
|
||||||
|
}: ProductOption) => {
|
||||||
|
return {
|
||||||
|
__typename: 'MultipleChoiceOption',
|
||||||
|
id,
|
||||||
|
displayName,
|
||||||
|
values: values.map((value) => {
|
||||||
|
let output: any = {
|
||||||
|
label: value,
|
||||||
|
}
|
||||||
|
if (displayName === 'Color') {
|
||||||
|
output = {
|
||||||
|
...output,
|
||||||
|
hexColors: [value],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return output
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizeProductImages = ({ edges }: ImageConnection) =>
|
||||||
|
edges?.map(({ node: { originalSrc: url, ...rest } }) => ({
|
||||||
|
url,
|
||||||
|
...rest,
|
||||||
|
}))
|
||||||
|
|
||||||
|
const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
|
||||||
|
return edges?.map(
|
||||||
|
({
|
||||||
|
node: { id, selectedOptions, sku, title, priceV2, compareAtPriceV2 },
|
||||||
|
}) => ({
|
||||||
|
id,
|
||||||
|
name: title,
|
||||||
|
sku: sku ?? id,
|
||||||
|
price: +priceV2.amount,
|
||||||
|
listPrice: +compareAtPriceV2?.amount,
|
||||||
|
requiresShipping: true,
|
||||||
|
options: selectedOptions.map(({ name, value }: SelectedOption) =>
|
||||||
|
normalizeProductOption({
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
values: [value],
|
||||||
|
})
|
||||||
|
),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function normalizeProduct(productNode: ShopifyProduct): Product {
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
title: name,
|
||||||
|
vendor,
|
||||||
|
images,
|
||||||
|
variants,
|
||||||
|
description,
|
||||||
|
handle,
|
||||||
|
priceRange,
|
||||||
|
options,
|
||||||
|
...rest
|
||||||
|
} = productNode
|
||||||
|
|
||||||
|
const product = {
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
vendor,
|
||||||
|
description,
|
||||||
|
path: `/${handle}`,
|
||||||
|
slug: handle?.replace(/^\/+|\/+$/g, ''),
|
||||||
|
price: money(priceRange?.minVariantPrice),
|
||||||
|
images: normalizeProductImages(images),
|
||||||
|
variants: variants ? normalizeProductVariants(variants) : [],
|
||||||
|
options: options ? options.map((o) => normalizeProductOption(o)) : [],
|
||||||
|
...rest,
|
||||||
|
}
|
||||||
|
|
||||||
|
return product
|
||||||
|
}
|
||||||
|
|
||||||
|
export function normalizeCart(checkout: Checkout): Cart {
|
||||||
|
return {
|
||||||
|
id: checkout.id,
|
||||||
|
customerId: '',
|
||||||
|
email: '',
|
||||||
|
createdAt: checkout.createdAt,
|
||||||
|
currency: {
|
||||||
|
code: checkout.totalPriceV2?.currencyCode,
|
||||||
|
},
|
||||||
|
taxesIncluded: checkout.taxesIncluded,
|
||||||
|
lineItems: checkout.lineItems?.edges.map(normalizeLineItem),
|
||||||
|
lineItemsSubtotalPrice: +checkout.subtotalPriceV2?.amount,
|
||||||
|
subtotalPrice: +checkout.subtotalPriceV2?.amount,
|
||||||
|
totalPrice: checkout.totalPriceV2?.amount,
|
||||||
|
discounts: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeLineItem({
|
||||||
|
node: { id, title, variant, quantity },
|
||||||
|
}: CheckoutLineItemEdge): LineItem {
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
variantId: String(variant?.id),
|
||||||
|
productId: String(variant?.id),
|
||||||
|
name: `${title}`,
|
||||||
|
quantity,
|
||||||
|
variant: {
|
||||||
|
id: String(variant?.id),
|
||||||
|
sku: variant?.sku ?? '',
|
||||||
|
name: variant?.title!,
|
||||||
|
image: {
|
||||||
|
url: variant?.image?.originalSrc,
|
||||||
|
},
|
||||||
|
requiresShipping: variant?.requiresShipping ?? false,
|
||||||
|
price: variant?.priceV2?.amount,
|
||||||
|
listPrice: variant?.compareAtPriceV2?.amount,
|
||||||
|
},
|
||||||
|
path: '',
|
||||||
|
discounts: [],
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: variant?.title,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
14
framework/swell/utils/queries/get-all-collections-query.ts
Normal file
14
framework/swell/utils/queries/get-all-collections-query.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
const getSiteCollectionsQuery = /* GraphQL */ `
|
||||||
|
query getSiteCollections($first: Int!) {
|
||||||
|
collections(first: $first) {
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
handle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getSiteCollectionsQuery
|
14
framework/swell/utils/queries/get-all-pages-query.ts
Normal file
14
framework/swell/utils/queries/get-all-pages-query.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export const getAllPagesQuery = /* GraphQL */ `
|
||||||
|
query getAllPages($first: Int = 250) {
|
||||||
|
pages(first: $first) {
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
handle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getAllPagesQuery
|
@ -0,0 +1,17 @@
|
|||||||
|
const getAllProductVendors = /* GraphQL */ `
|
||||||
|
query getAllProductVendors($first: Int = 250, $cursor: String) {
|
||||||
|
products(first: $first, after: $cursor) {
|
||||||
|
pageInfo {
|
||||||
|
hasNextPage
|
||||||
|
hasPreviousPage
|
||||||
|
}
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
vendor
|
||||||
|
}
|
||||||
|
cursor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getAllProductVendors
|
@ -0,0 +1,17 @@
|
|||||||
|
const getAllProductsPathsQuery = /* GraphQL */ `
|
||||||
|
query getAllProductPaths($first: Int = 250, $cursor: String) {
|
||||||
|
products(first: $first, after: $cursor) {
|
||||||
|
pageInfo {
|
||||||
|
hasNextPage
|
||||||
|
hasPreviousPage
|
||||||
|
}
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
handle
|
||||||
|
}
|
||||||
|
cursor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getAllProductsPathsQuery
|
57
framework/swell/utils/queries/get-all-products-query.ts
Normal file
57
framework/swell/utils/queries/get-all-products-query.ts
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
export const productConnection = `
|
||||||
|
pageInfo {
|
||||||
|
hasNextPage
|
||||||
|
hasPreviousPage
|
||||||
|
}
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
vendor
|
||||||
|
handle
|
||||||
|
description
|
||||||
|
priceRange {
|
||||||
|
minVariantPrice {
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
images(first: 1) {
|
||||||
|
pageInfo {
|
||||||
|
hasNextPage
|
||||||
|
hasPreviousPage
|
||||||
|
}
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
originalSrc
|
||||||
|
altText
|
||||||
|
width
|
||||||
|
height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
|
||||||
|
export const productsFragment = `
|
||||||
|
products(
|
||||||
|
first: $first
|
||||||
|
sortKey: $sortKey
|
||||||
|
reverse: $reverse
|
||||||
|
query: $query
|
||||||
|
) {
|
||||||
|
${productConnection}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const getAllProductsQuery = /* GraphQL */ `
|
||||||
|
query getAllProducts(
|
||||||
|
$first: Int = 250
|
||||||
|
$query: String = ""
|
||||||
|
$sortKey: ProductSortKeys = RELEVANCE
|
||||||
|
$reverse: Boolean = false
|
||||||
|
) {
|
||||||
|
${productsFragment}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getAllProductsQuery
|
62
framework/swell/utils/queries/get-checkout-query.ts
Normal file
62
framework/swell/utils/queries/get-checkout-query.ts
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
export const checkoutDetailsFragment = `
|
||||||
|
id
|
||||||
|
webUrl
|
||||||
|
subtotalPriceV2{
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
totalTaxV2 {
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
totalPriceV2 {
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
completedAt
|
||||||
|
createdAt
|
||||||
|
taxesIncluded
|
||||||
|
lineItems(first: 250) {
|
||||||
|
pageInfo {
|
||||||
|
hasNextPage
|
||||||
|
hasPreviousPage
|
||||||
|
}
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
variant {
|
||||||
|
id
|
||||||
|
sku
|
||||||
|
title
|
||||||
|
image {
|
||||||
|
originalSrc
|
||||||
|
altText
|
||||||
|
width
|
||||||
|
height
|
||||||
|
}
|
||||||
|
priceV2{
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
compareAtPriceV2{
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
quantity
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const getCheckoutQuery = /* GraphQL */ `
|
||||||
|
query($checkoutId: ID!) {
|
||||||
|
node(id: $checkoutId) {
|
||||||
|
... on Checkout {
|
||||||
|
${checkoutDetailsFragment}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getCheckoutQuery
|
@ -0,0 +1,24 @@
|
|||||||
|
import { productConnection } from './get-all-products-query'
|
||||||
|
|
||||||
|
const getCollectionProductsQuery = /* GraphQL */ `
|
||||||
|
query getProductsFromCollection(
|
||||||
|
$categoryId: ID!
|
||||||
|
$first: Int = 250
|
||||||
|
$sortKey: ProductCollectionSortKeys = RELEVANCE
|
||||||
|
$reverse: Boolean = false
|
||||||
|
) {
|
||||||
|
node(id: $categoryId) {
|
||||||
|
id
|
||||||
|
... on Collection {
|
||||||
|
products(
|
||||||
|
first: $first
|
||||||
|
sortKey: $sortKey
|
||||||
|
reverse: $reverse
|
||||||
|
) {
|
||||||
|
${productConnection}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getCollectionProductsQuery
|
8
framework/swell/utils/queries/get-customer-id-query.ts
Normal file
8
framework/swell/utils/queries/get-customer-id-query.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export const getCustomerQuery = /* GraphQL */ `
|
||||||
|
query getCustomerId($customerAccessToken: String!) {
|
||||||
|
customer(customerAccessToken: $customerAccessToken) {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getCustomerQuery
|
16
framework/swell/utils/queries/get-customer-query.ts
Normal file
16
framework/swell/utils/queries/get-customer-query.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
export const getCustomerQuery = /* GraphQL */ `
|
||||||
|
query getCustomer($customerAccessToken: String!) {
|
||||||
|
customer(customerAccessToken: $customerAccessToken) {
|
||||||
|
id
|
||||||
|
firstName
|
||||||
|
lastName
|
||||||
|
displayName
|
||||||
|
email
|
||||||
|
phone
|
||||||
|
tags
|
||||||
|
acceptsMarketing
|
||||||
|
createdAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getCustomerQuery
|
14
framework/swell/utils/queries/get-page-query.ts
Normal file
14
framework/swell/utils/queries/get-page-query.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export const getPageQuery = /* GraphQL */ `
|
||||||
|
query($id: ID!) {
|
||||||
|
node(id: $id) {
|
||||||
|
id
|
||||||
|
... on Page {
|
||||||
|
title
|
||||||
|
handle
|
||||||
|
body
|
||||||
|
bodySummary
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
export default getPageQuery
|
69
framework/swell/utils/queries/get-product-query.ts
Normal file
69
framework/swell/utils/queries/get-product-query.ts
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
const getProductQuery = /* GraphQL */ `
|
||||||
|
query getProductBySlug($slug: String!) {
|
||||||
|
productByHandle(handle: $slug) {
|
||||||
|
id
|
||||||
|
handle
|
||||||
|
title
|
||||||
|
productType
|
||||||
|
vendor
|
||||||
|
description
|
||||||
|
descriptionHtml
|
||||||
|
options {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
values
|
||||||
|
}
|
||||||
|
priceRange {
|
||||||
|
maxVariantPrice {
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
minVariantPrice {
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
variants(first: 250) {
|
||||||
|
pageInfo {
|
||||||
|
hasNextPage
|
||||||
|
hasPreviousPage
|
||||||
|
}
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
sku
|
||||||
|
selectedOptions {
|
||||||
|
name
|
||||||
|
value
|
||||||
|
}
|
||||||
|
priceV2 {
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
compareAtPriceV2 {
|
||||||
|
amount
|
||||||
|
currencyCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
images(first: 250) {
|
||||||
|
pageInfo {
|
||||||
|
hasNextPage
|
||||||
|
hasPreviousPage
|
||||||
|
}
|
||||||
|
edges {
|
||||||
|
node {
|
||||||
|
originalSrc
|
||||||
|
altText
|
||||||
|
width
|
||||||
|
height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export default getProductQuery
|
10
framework/swell/utils/queries/index.ts
Normal file
10
framework/swell/utils/queries/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export { default as getSiteCollectionsQuery } from './get-all-collections-query'
|
||||||
|
export { default as getProductQuery } from './get-product-query'
|
||||||
|
export { default as getAllProductsQuery } from './get-all-products-query'
|
||||||
|
export { default as getAllProductsPathtsQuery } from './get-all-products-paths-query'
|
||||||
|
export { default as getAllProductVendors } from './get-all-product-vendors-query'
|
||||||
|
export { default as getCollectionProductsQuery } from './get-collection-products-query'
|
||||||
|
export { default as getCheckoutQuery } from './get-checkout-query'
|
||||||
|
export { default as getAllPagesQuery } from './get-all-pages-query'
|
||||||
|
export { default as getPageQuery } from './get-page-query'
|
||||||
|
export { default as getCustomerQuery } from './get-customer-query'
|
13
framework/swell/utils/storage.ts
Normal file
13
framework/swell/utils/storage.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
export const getCheckoutIdFromStorage = (token: string) => {
|
||||||
|
if (window && window.sessionStorage) {
|
||||||
|
return window.sessionStorage.getItem(token)
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
export const setCheckoutIdInStorage = (token: string, id: string | number) => {
|
||||||
|
if (window && window.sessionStorage) {
|
||||||
|
return window.sessionStorage.setItem(token, id + '')
|
||||||
|
}
|
||||||
|
}
|
13
framework/swell/wishlist/use-add-item.tsx
Normal file
13
framework/swell/wishlist/use-add-item.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
|
export function emptyHook() {
|
||||||
|
const useEmptyHook = async (options = {}) => {
|
||||||
|
return useCallback(async function () {
|
||||||
|
return Promise.resolve()
|
||||||
|
}, [])
|
||||||
|
}
|
||||||
|
|
||||||
|
return useEmptyHook
|
||||||
|
}
|
||||||
|
|
||||||
|
export default emptyHook
|
17
framework/swell/wishlist/use-remove-item.tsx
Normal file
17
framework/swell/wishlist/use-remove-item.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { useCallback } from 'react'
|
||||||
|
|
||||||
|
type Options = {
|
||||||
|
includeProducts?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function emptyHook(options?: Options) {
|
||||||
|
const useEmptyHook = async ({ id }: { id: string | number }) => {
|
||||||
|
return useCallback(async function () {
|
||||||
|
return Promise.resolve()
|
||||||
|
}, [])
|
||||||
|
}
|
||||||
|
|
||||||
|
return useEmptyHook
|
||||||
|
}
|
||||||
|
|
||||||
|
export default emptyHook
|
46
framework/swell/wishlist/use-wishlist.tsx
Normal file
46
framework/swell/wishlist/use-wishlist.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
// TODO: replace this hook and other wishlist hooks with a handler, or remove them if
|
||||||
|
// Shopify doesn't have a wishlist
|
||||||
|
|
||||||
|
import { HookFetcher } from '@commerce/utils/types'
|
||||||
|
import { Product } from '../schema'
|
||||||
|
|
||||||
|
const defaultOpts = {}
|
||||||
|
|
||||||
|
export type Wishlist = {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
product_id: number
|
||||||
|
variant_id: number
|
||||||
|
id: number
|
||||||
|
product: Product
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseWishlistOptions {
|
||||||
|
includeProducts?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UseWishlistInput extends UseWishlistOptions {
|
||||||
|
customerId?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export const fetcher: HookFetcher<Wishlist | null, UseWishlistInput> = () => {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function extendHook(
|
||||||
|
customFetcher: typeof fetcher,
|
||||||
|
// swrOptions?: SwrOptions<Wishlist | null, UseWishlistInput>
|
||||||
|
swrOptions?: any
|
||||||
|
) {
|
||||||
|
const useWishlist = ({ includeProducts }: UseWishlistOptions = {}) => {
|
||||||
|
return { data: null }
|
||||||
|
}
|
||||||
|
|
||||||
|
useWishlist.extend = extendHook
|
||||||
|
|
||||||
|
return useWishlist
|
||||||
|
}
|
||||||
|
|
||||||
|
export default extendHook(fetcher)
|
Loading…
x
Reference in New Issue
Block a user