Add swell provider folder

framework/swell/.env.template

@@ -0,0 +1,2 @@
+SHOPIFY_STORE_DOMAIN=
+SHOPIFY_STOREFRONT_ACCESS_TOKEN=

framework/swell/README.md

@@ -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,
+})
+```

framework/swell/api/cart/index.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/catalog/index.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/catalog/products.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/checkout/index.ts

@@ -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, {}, {})

framework/swell/api/customer.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/customers/index.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/customers/login.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/customers/logout.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/customers/signup.ts

@@ -0,0 +1 @@
+export default function () {}

framework/swell/api/index.ts

@@ -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)
+}

framework/swell/api/operations/get-all-collections.ts

@@ -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

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

@@ -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

framework/swell/api/utils/create-api-handler.ts

@@ -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)
+    }
+  }
+}

framework/swell/api/utils/fetch-all-products.ts

@@ -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

framework/swell/api/utils/fetch-graphql-api.ts

@@ -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

framework/swell/api/utils/fetch.ts

@@ -0,0 +1,2 @@
+import zeitFetch from '@vercel/fetch'
+export default zeitFetch()

framework/swell/api/utils/is-allowed-method.ts

@@ -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
+}

framework/swell/api/wishlist/index.tsx

@@ -0,0 +1,2 @@
+export type WishlistItem = { product: any; id: number }
+export default function () {}

framework/swell/auth/use-login.tsx

@@ -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]
+    )
+  },
+}

framework/swell/auth/use-logout.tsx

@@ -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]
+    )
+  },
+}

framework/swell/auth/use-signup.tsx

@@ -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]
+    )
+  },
+}

framework/swell/cart/index.ts

@@ -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'

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

@@ -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]
+    )
+  },
+}

framework/swell/cart/use-cart.tsx

@@ -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]
+    )
+  },
+}

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

@@ -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])
+  },
+}

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

@@ -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]
+    )
+  },
+}

framework/swell/cart/utils/checkout-create.ts

@@ -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

framework/swell/cart/utils/checkout-to-cart.ts

@@ -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

framework/swell/cart/utils/fetcher.ts

@@ -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

framework/swell/cart/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as checkoutToCart } from './checkout-to-cart'
+export { default as checkoutCreate } from './checkout-create'

framework/swell/commerce.config.json

@@ -0,0 +1,6 @@
+{
+  "provider": "shopify",
+  "features": {
+    "wishlist": false
+  }
+}

framework/swell/common/get-all-pages.ts

@@ -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

framework/swell/common/get-page.ts

@@ -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

framework/swell/common/get-site-info.ts

@@ -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

framework/swell/const.ts

@@ -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

framework/swell/customer/get-customer-id.ts

@@ -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

framework/swell/customer/index.ts

@@ -0,0 +1 @@
+export { default as useCustomer } from './use-customer'

framework/swell/customer/use-customer.tsx

@@ -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,
+      },
+    })
+  },
+}

framework/swell/fetcher.ts

@@ -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

framework/swell/index.tsx

@@ -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()

framework/swell/next.config.js

@@ -0,0 +1,8 @@
+const commerce = require('./commerce.config.json')
+
+module.exports = {
+  commerce,
+  images: {
+    domains: ['cdn.shopify.com'],
+  },
+}

framework/swell/product/get-all-collections.ts

@@ -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

framework/swell/product/get-all-product-paths.ts

@@ -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

framework/swell/product/get-all-products.ts

@@ -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

framework/swell/product/get-product.ts

@@ -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

framework/swell/product/use-price.tsx

@@ -0,0 +1,2 @@
+export * from '@commerce/product/use-price'
+export { default } from '@commerce/product/use-price'

framework/swell/product/use-search.tsx

@@ -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,
+      },
+    })
+  },
+}

framework/swell/provider.ts

@@ -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

framework/swell/types.ts

@@ -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

framework/swell/utils/customer-token.ts

@@ -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,
+      }
+    )
+  }
+}

framework/swell/utils/get-categories.ts

@@ -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

framework/swell/utils/get-checkout-id.ts

@@ -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

framework/swell/utils/get-search-variables.ts

@@ -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

framework/swell/utils/get-sort-variables.ts

@@ -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

framework/swell/utils/get-vendors.ts

@@ -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

framework/swell/utils/handle-fetch-response.ts

@@ -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

framework/swell/utils/handle-login.ts

@@ -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

framework/swell/utils/index.ts

@@ -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'

framework/swell/utils/mutations/associate-customer-with-checkout.ts

@@ -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

framework/swell/utils/mutations/checkout-create.ts

@@ -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

framework/swell/utils/mutations/checkout-line-item-add.ts

@@ -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

framework/swell/utils/mutations/checkout-line-item-remove.ts

@@ -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

framework/swell/utils/mutations/checkout-line-item-update.ts

@@ -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

framework/swell/utils/mutations/customer-access-token-create.ts

@@ -0,0 +1,16 @@
+const customerAccessTokenCreateMutation = /* GraphQL */ `
+  mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
+    customerAccessTokenCreate(input: $input) {
+      customerAccessToken {
+        accessToken
+        expiresAt
+      }
+      customerUserErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+`
+export default customerAccessTokenCreateMutation

framework/swell/utils/mutations/customer-access-token-delete.ts

@@ -0,0 +1,14 @@
+const customerAccessTokenDeleteMutation = /* GraphQL */ `
+  mutation customerAccessTokenDelete($customerAccessToken: String!) {
+    customerAccessTokenDelete(customerAccessToken: $customerAccessToken) {
+      deletedAccessToken
+      deletedCustomerAccessTokenId
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`
+
+export default customerAccessTokenDeleteMutation

framework/swell/utils/mutations/customer-create.ts

@@ -0,0 +1,15 @@
+const customerCreateMutation = /* GraphQL */ `
+  mutation customerCreate($input: CustomerCreateInput!) {
+    customerCreate(input: $input) {
+      customerUserErrors {
+        code
+        field
+        message
+      }
+      customer {
+        id
+      }
+    }
+  }
+`
+export default customerCreateMutation

framework/swell/utils/mutations/index.ts

@@ -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'

framework/swell/utils/normalize.ts

@@ -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,
+      },
+    ],
+  }
+}

framework/swell/utils/queries/get-all-collections-query.ts

@@ -0,0 +1,14 @@
+const getSiteCollectionsQuery = /* GraphQL */ `
+  query getSiteCollections($first: Int!) {
+    collections(first: $first) {
+      edges {
+        node {
+          id
+          title
+          handle
+        }
+      }
+    }
+  }
+`
+export default getSiteCollectionsQuery

framework/swell/utils/queries/get-all-pages-query.ts

@@ -0,0 +1,14 @@
+export const getAllPagesQuery = /* GraphQL */ `
+  query getAllPages($first: Int = 250) {
+    pages(first: $first) {
+      edges {
+        node {
+          id
+          title
+          handle
+        }
+      }
+    }
+  }
+`
+export default getAllPagesQuery

framework/swell/utils/queries/get-all-product-vendors-query.ts

@@ -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

framework/swell/utils/queries/get-all-products-paths-query.ts

@@ -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

framework/swell/utils/queries/get-all-products-query.ts

@@ -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

framework/swell/utils/queries/get-checkout-query.ts

@@ -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

framework/swell/utils/queries/get-collection-products-query.ts

@@ -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

framework/swell/utils/queries/get-customer-id-query.ts

@@ -0,0 +1,8 @@
+export const getCustomerQuery = /* GraphQL */ `
+  query getCustomerId($customerAccessToken: String!) {
+    customer(customerAccessToken: $customerAccessToken) {
+      id
+    }
+  }
+`
+export default getCustomerQuery

framework/swell/utils/queries/get-customer-query.ts

@@ -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

framework/swell/utils/queries/get-page-query.ts

@@ -0,0 +1,14 @@
+export const getPageQuery = /* GraphQL */ `
+  query($id: ID!) {
+    node(id: $id) {
+      id
+      ... on Page {
+        title
+        handle
+        body
+        bodySummary
+      }
+    }
+  }
+`
+export default getPageQuery

framework/swell/utils/queries/get-product-query.ts

@@ -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

framework/swell/utils/queries/index.ts

@@ -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'

framework/swell/utils/storage.ts

@@ -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 + '')
+  }
+}

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

@@ -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

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

@@ -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

framework/swell/wishlist/use-wishlist.tsx

@@ -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)