Adding initial files for elastipath - not working

commerce.config.json

@@ -1,6 +1,9 @@
 {
   "features": {
-    "wishlist": false,
+    "cart": false,
+    "search": false,
+    "wishlist": true,
+    "customerAuth": true,
     "customCheckout": false
   }
 }

framework/commerce/config.js

@@ -14,6 +14,7 @@ const PROVIDERS = [
   'swell',
   'vendure',
   'local',
+  'elasticpath'
 ]
 
 function getProviderName() {

framework/elasticpath/.env.template

@@ -0,0 +1,6 @@
+# Available providers: bigcommerce, shopify, swell
+COMMERCE_PROVIDER=elasticpath
+NEXT_PUBLIC_ELASTICPATH_BASE=
+NEXT_PUBLIC_ELASTICPATH_STOREID=
+NEXT_PUBLIC_ELASTICPATH_CLIENTID=
+NEXT_PUBLIC_ELASTICPATH_SECRET=

framework/elasticpath/api/endpoints/login/index.ts

@@ -0,0 +1,18 @@
+import { GetAPISchema, createEndpoint } from '@commerce/api'
+import loginEndpoint from '@commerce/api/endpoints/login'
+import type { LoginSchema } from '../../../types/login'
+import type { ElasticpathAPI } from '../..'
+import login from './login'
+
+export type LoginAPI = GetAPISchema<ElasticpathAPI, LoginSchema>
+
+export type LoginEndpoint = LoginAPI['endpoint']
+
+export const handlers: LoginEndpoint['handlers'] = { login }
+
+const loginApi = createEndpoint<LoginAPI>({
+  handler: loginEndpoint,
+  handlers,
+})
+
+export default loginApi

framework/elasticpath/api/endpoints/login/login.ts

@@ -0,0 +1,49 @@
+import { FetcherError } from '@commerce/utils/errors'
+import type { LoginEndpoint } from '.'
+
+const invalidCredentials = /invalid credentials/i
+
+const login: LoginEndpoint['handlers']['login'] = async ({
+  res,
+  body: { email, password },
+  config,
+  commerce,
+}) => {
+  // TODO: Add proper validations with something like Ajv
+  if (!(email && password)) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+  // TODO: validate the password and email
+  // Passwords must be at least 7 characters and contain both alphabetic
+  // and numeric characters.
+
+  try {
+    await commerce.login({ variables: { email, password }, config, res })
+  } catch (error) {
+    // Check if the email and password didn't match an existing account
+    if (
+      error instanceof FetcherError &&
+      invalidCredentials.test(error.message)
+    ) {
+      return res.status(401).json({
+        data: null,
+        errors: [
+          {
+            message:
+              'Cannot find an account that matches the provided credentials',
+            code: 'invalid_credentials',
+          },
+        ],
+      })
+    }
+
+    throw error
+  }
+
+  res.status(200).json({ data: null })
+}
+
+export default login

framework/elasticpath/api/index.ts

@@ -0,0 +1,59 @@
+import type { RequestInit } from '@vercel/fetch'
+import {
+  CommerceAPI,
+  CommerceAPIConfig,
+  getCommerceApi as commerceApi,
+} from '@commerce/api'
+import createFetcher from './utils/fetch-local'
+
+import type { LoginAPI } from './endpoints/login'
+import login from './operations/login'
+
+const API_URL = process.env.NEXT_PUBLIC_ELASTICPATH_BASE
+const STOREID = process.env.NEXT_PUBLIC_ELASTICPATH_STOREID
+const SECRET = process.env.NEXT_PUBLIC_ELASTICPATH_SECRET
+const CLIENTID = process.env.NEXT_PUBLIC_ELASTICPATH_CLIENTID
+
+if (!API_URL) {
+  throw new Error(
+    `The environment variable BIGCOMMERCE_STOREFRONT_API_URL is missing and it's required to access your store`
+  )
+}
+
+
+const ONE_DAY = 60 * 60 * 24
+
+const config: any = {
+  commerceUrl: API_URL,
+  customerCookie: 'SHOP_TOKEN',
+  cartCookie: process.env.BIGCOMMERCE_CART_COOKIE ?? 'bc_cartId',
+  cartCookieMaxAge: ONE_DAY * 30,
+  applyLocale: true,
+
+  // REST API only
+  storeApiUrl: API_URL,
+  fetch: createFetcher(() => getCommerceApi().getConfig()),
+}
+
+const operations = {
+  login
+}
+
+export interface ElasticpathConfig extends CommerceAPIConfig {
+  fetch: any
+}
+
+export const provider = { config, operations }
+
+export type Provider = typeof provider
+
+export type APIs =
+  | LoginAPI
+
+export type ElasticpathAPI<P extends Provider = Provider> = CommerceAPI<P>
+
+export function getCommerceApi<P extends Provider>(
+  customProvider: P = provider as any
+): ElasticpathAPI<P> {
+  return commerceApi(customProvider)
+}

framework/elasticpath/api/operations/login.ts

@@ -0,0 +1,46 @@
+import type { ServerResponse } from 'http'
+import type {
+  OperationContext,
+  OperationOptions,
+} from '@commerce/api/operations'
+import type { LoginOperation } from '../../types/login'
+import { Provider, ElasticpathConfig } from '..'
+
+export default function loginOperation({
+  commerce,
+}: OperationContext<Provider>) {
+  async function login<T extends LoginOperation>(opts: {
+    variables: T['variables']
+    config?: Partial<ElasticpathConfig>
+    res: ServerResponse
+  }): Promise<T['data']>
+
+  async function login<T extends LoginOperation>(
+    opts: {
+      variables: T['variables']
+      config?: Partial<ElasticpathConfig>
+      res: ServerResponse
+    } & OperationOptions
+  ): Promise<T['data']>
+
+  async function login<T extends LoginOperation>({
+    variables,
+    res: response,
+    config: cfg,
+  }: {
+    query?: string
+    variables: T['variables']
+    res: ServerResponse
+    config?: Partial<ElasticpathConfig>
+  }): Promise<T['data']> {
+    const config = commerce.getConfig(cfg)
+
+    const { data } = await config.fetch('account', 'login', [variables])
+
+    return {
+      result: data,
+    }
+  }
+
+  return login
+}

framework/elasticpath/api/utils/fetch-local.ts

@@ -0,0 +1,34 @@
+import { FetcherError } from '@commerce/utils/errors'
+import type { GraphQLFetcher } from '@commerce/api'
+import type { ElasticpathConfig } from '../index'
+import fetch from './fetch'
+
+const fetchGraphqlApi: (getConfig: () => ElasticpathConfig) => GraphQLFetcher =
+  (getConfig) =>
+  async (query: string, { variables, preview } = {}, fetchOptions) => {
+    const config = getConfig()
+    const res = await fetch(config.commerceUrl, {
+      ...fetchOptions,
+      method: 'POST',
+      headers: {
+        ...fetchOptions?.headers,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query,
+        variables,
+      }),
+    })
+
+    const json = await res.json()
+    if (json.errors) {
+      throw new FetcherError({
+        errors: json.errors ?? [{ message: 'Failed to fetch for API' }],
+        status: res.status,
+      })
+    }
+
+    return { data: json.data, res }
+  }
+
+export default fetchGraphqlApi

framework/elasticpath/api/utils/fetch.ts

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

framework/elasticpath/auth/index.ts

@@ -0,0 +1,3 @@
+export { default as useLogin } from './use-login'
+export { default as useLogout } from './use-logout'
+export { default as useSignup } from './use-signup'

framework/elasticpath/auth/use-login.tsx

@@ -0,0 +1,16 @@
+import { MutationHook } from '@commerce/utils/types'
+import useLogin, { UseLogin } from '@commerce/auth/use-login'
+
+export default useLogin as UseLogin<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return null
+  },
+  useHook: () => () => {
+    return async function () {}
+  },
+}

framework/elasticpath/auth/use-logout.tsx

@@ -0,0 +1,17 @@
+import { MutationHook } from '@commerce/utils/types'
+import useLogout, { UseLogout } from '@commerce/auth/use-logout'
+
+export default useLogout as UseLogout<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return null
+  },
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => {},
+}

framework/elasticpath/auth/use-signup.tsx

@@ -0,0 +1,19 @@
+import { useCallback } from 'react'
+import useCustomer from '../customer/use-customer'
+import { MutationHook } from '@commerce/utils/types'
+import useSignup, { UseSignup } from '@commerce/auth/use-signup'
+
+export default useSignup as UseSignup<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return null
+  },
+  useHook:
+    ({ fetch }) =>
+    () =>
+    () => {},
+}

framework/elasticpath/cart/index.ts

@@ -0,0 +1,4 @@
+export { default as useCart } from './use-cart'
+export { default as useAddItem } from './use-add-item'
+export { default as useRemoveItem } from './use-remove-item'
+export { default as useUpdateItem } from './use-update-item'

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

@@ -0,0 +1,17 @@
+import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () => {
+      return async function addItem() {
+        return {}
+      }
+    },
+}

framework/elasticpath/cart/use-cart.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+import { SWRHook } from '@commerce/utils/types'
+import useCart, { UseCart } from '@commerce/cart/use-cart'
+
+export default useCart as UseCart<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher() {
+    return {
+      id: '',
+      createdAt: '',
+      currency: { code: '' },
+      taxesIncluded: '',
+      lineItems: [],
+      lineItemsSubtotalPrice: '',
+      subtotalPrice: 0,
+      totalPrice: 0,
+    }
+  },
+  useHook:
+    ({ useData }) =>
+    (input) => {
+      return useMemo(
+        () =>
+          Object.create(
+            {},
+            {
+              isEmpty: {
+                get() {
+                  return true
+                },
+                enumerable: true,
+              },
+            }
+          ),
+        []
+      )
+    },
+}

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

@@ -0,0 +1,18 @@
+import { MutationHook } from '@commerce/utils/types'
+import useRemoveItem, { UseRemoveItem } from '@commerce/cart/use-remove-item'
+
+export default useRemoveItem as UseRemoveItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () => {
+      return async function removeItem(input) {
+        return {}
+      }
+    },
+}

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

@@ -0,0 +1,18 @@
+import { MutationHook } from '@commerce/utils/types'
+import useUpdateItem, { UseUpdateItem } from '@commerce/cart/use-update-item'
+
+export default useUpdateItem as UseUpdateItem<any>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () => {
+      return async function addItem() {
+        return {}
+      }
+    },
+}

framework/elasticpath/commerce.config.json

@@ -0,0 +1,9 @@
+{
+  "features": {
+    "cart": true,
+    "search": true,
+    "wishlist": true,
+    "customerAuth": true,
+    "customCheckout": true
+  }
+}

framework/elasticpath/customer/index.ts

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

framework/elasticpath/customer/use-customer.tsx

@@ -0,0 +1,15 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
+
+export default useCustomer as UseCustomer<typeof handler>
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook: () => () => {
+    return async function addItem() {
+      return {}
+    }
+  },
+}

framework/elasticpath/data.json

@@ -0,0 +1,235 @@
+{
+  "products": [
+    {
+      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "New Short Sleeve T-Shirt",
+      "vendor": "Next.js",
+      "path": "/new-short-sleeve-t-shirt",
+      "slug": "new-short-sleeve-t-shirt",
+      "price": { "value": 25, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/drop-shirt-0.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-1.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-2.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9ksdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "Lightweight Jacket",
+      "vendor": "Next.js",
+      "path": "/lightweight-jacket",
+      "slug": "lightweight-jacket",
+      "price": { "value": 249.99, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/lightweight-jacket-0.png",
+          "altText": "Lightweight Jacket",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/lightweight-jacket-1.png",
+          "altText": "Lightweight Jacket",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/lightweight-jacket-2.png",
+          "altText": "Lightweight Jacket",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOid8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Z2lkOis8vc2hvcGlmsddeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "Shirt",
+      "vendor": "Next.js",
+      "path": "/shirt",
+      "slug": "shirt",
+      "price": { "value": 25, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/t-shirt-0.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-1.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-2.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-3.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/t-shirt-4.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOi8vc2hvcGlmeS9Qcms9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

framework/elasticpath/fetcher.ts

@@ -0,0 +1,50 @@
+import { Fetcher } from '@commerce/utils/types'
+import { FetcherError } from '@commerce/utils/errors'
+
+async function getText(res: Response) {
+  try {
+    return (await res.text()) || res.statusText
+  } catch (error) {
+    return res.statusText
+  }
+}
+
+async function getError(res: Response) {
+  if (res.headers.get('Content-Type')?.includes('application/json')) {
+    const data = await res.json()
+    return new FetcherError({ errors: data.errors, status: res.status })
+  }
+  return new FetcherError({ message: await getText(res), status: res.status })
+}
+
+export const fetcher: Fetcher = async ({
+  url,
+  method = 'POST',
+  variables,
+  query,
+  body: bodyObj,
+}) => {
+  const shopApiUrl =
+    process.env.NEXT_PUBLIC_ELASTICPATH_BASE
+  if (!shopApiUrl) {
+    throw new Error(
+      'The Vendure Shop API url has not been provided. Please define NEXT_PUBLIC_VENDURE_SHOP_API_URL in .env.local'
+    )
+  }
+  const hasBody = Boolean(variables || query)
+  const body = hasBody ? JSON.stringify({ query, variables }) : undefined
+  const headers = hasBody ? { 'Content-Type': 'application/json' } : undefined
+  const res = await fetch(shopApiUrl, {
+    method,
+    body,
+    headers,
+    credentials: 'include',
+  })
+
+  if (res.ok) {
+    const { data } = await res.json()
+    return data
+  }
+
+  throw await getError(res)
+}

framework/elasticpath/index.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+import {
+  CommerceConfig,
+  CommerceProvider as CoreCommerceProvider,
+  useCommerce as useCoreCommerce,
+} from '@commerce'
+import { elasticpathProvider } from './provider'
+import type { ElasticpathProvider } from './provider'
+
+export { elasticpathProvider }
+export type { ElasticpathProvider }
+
+export const elasticpathConfig: CommerceConfig = {
+  locale: 'en-us',
+  cartCookie: 'bc_cartId',
+}
+
+export type ElasticpathConfig = Partial<CommerceConfig>
+
+export type ElasticpathProps = {
+  children?: ReactNode
+  locale: string
+} & ElasticpathConfig
+
+export function CommerceProvider({ children, ...config }: ElasticpathProps) {
+  return (
+    <CoreCommerceProvider
+      provider={elasticpathProvider}
+      config={{ ...elasticpathConfig, ...config }}
+    >
+      {children}
+    </CoreCommerceProvider>
+  )
+}
+
+export const useCommerce = () => useCoreCommerce<ElasticpathProvider>()

framework/elasticpath/product/index.ts

@@ -0,0 +1,2 @@
+export { default as usePrice } from './use-price'
+export { default as useSearch } from './use-search'

framework/elasticpath/product/use-price.tsx

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

framework/elasticpath/product/use-search.tsx

@@ -0,0 +1,17 @@
+import { SWRHook } from '@commerce/utils/types'
+import useSearch, { UseSearch } from '@commerce/product/use-search'
+export default useSearch as UseSearch<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook: () => () => {
+    return {
+      data: {
+        products: [],
+      },
+    }
+  },
+}

framework/elasticpath/provider.ts

@@ -0,0 +1,34 @@
+import { handler as useCart } from './cart/use-cart'
+import { handler as useAddItem } from './cart/use-add-item'
+import { handler as useUpdateItem } from './cart/use-update-item'
+import { handler as useRemoveItem } from './cart/use-remove-item'
+
+import { handler as useWishlist } from './wishlist/use-wishlist'
+import { handler as useWishlistAddItem } from './wishlist/use-add-item'
+import { handler as useWishlistRemoveItem } from './wishlist/use-remove-item'
+
+import { handler as useCustomer } from './customer/use-customer'
+import { handler as useSearch } from './product/use-search'
+
+import { handler as useLogin } from './auth/use-login'
+import { handler as useLogout } from './auth/use-logout'
+import { handler as useSignup } from './auth/use-signup'
+
+import {fetcher} from './fetcher'
+
+export const elasticpathProvider = {
+  locale: 'en-us',
+  cartCookie: 'ep_cartId',
+  fetcher,
+  cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
+  wishlist: {
+    useWishlist,
+    useAddItem: useWishlistAddItem,
+    useRemoveItem: useWishlistRemoveItem,
+  },
+  customer: { useCustomer },
+  products: { useSearch },
+  auth: { useLogin, useLogout, useSignup },
+}
+
+export type ElasticpathProvider = typeof elasticpathProvider

framework/elasticpath/types/login.ts

@@ -0,0 +1,10 @@
+import * as Core from '@commerce/types/login'
+
+export * from '@commerce/types/login'
+
+export type LoginOperation = Core.LoginOperation & {
+  variables: {
+    email: string
+    password: string
+  }
+}

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

@@ -0,0 +1,19 @@
+import { CommerceError } from '@commerce/utils/errors'
+
+type ElasticpathFetchResponse = {
+  error: {
+    message: string
+    code?: string
+  }
+}
+
+const handleFetchResponse = async (res: ElasticpathFetchResponse) => {
+  if (res) {
+    if (res.error) {
+      throw new CommerceError(res.error)
+    }
+    return res
+  }
+}
+
+export default handleFetchResponse

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

@@ -0,0 +1,36 @@
+import { useCallback } from 'react'
+import type { MutationHook } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useAddItem, { UseAddItem } from '@commerce/wishlist/use-add-item'
+import useCustomer from '../customer/use-customer'
+import useWishlist from './use-wishlist'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    url: '/api/wishlist',
+    method: 'POST',
+  },
+  useHook: ({ fetch }) => () => {
+    const { data: customer } = useCustomer()
+    const { revalidate } = useWishlist()
+
+    return useCallback(
+      async function addItem(item) {
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        // TODO: add validations before doing the fetch
+        const data = await fetch({ input: { item } })
+        await revalidate()
+        return data
+      },
+      [fetch, revalidate, customer]
+    )
+  },
+}

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

@@ -0,0 +1,37 @@
+import { useCallback } from 'react'
+import type { MutationHook } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useRemoveItem, {
+  UseRemoveItem,
+} from '@commerce/wishlist/use-remove-item'
+import useCustomer from '../customer/use-customer'
+import useWishlist from './use-wishlist'
+
+export default useRemoveItem as UseRemoveItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    url: '/api/wishlist',
+    method: 'DELETE',
+  },
+  useHook: ({ fetch }) => ({ wishlist } = {}) => {
+    const { data: customer } = useCustomer()
+    const { revalidate } = useWishlist(wishlist)
+
+    return useCallback(
+      async function removeItem(input) {
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        const data = await fetch({ input: { itemId: String(input.id) } })
+        await revalidate()
+        return data
+      },
+      [fetch, revalidate, customer]
+    )
+  },
+}

framework/elasticpath/wishlist/use-wishlist.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+import { SWRHook } from '@commerce/utils/types'
+import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
+import useCustomer from '../customer/use-customer'
+
+export default useWishlist as UseWishlist<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input: { customerId, includeProducts }, options, fetch }) {
+    if (!customerId) return null
+
+    // Use a dummy base as we only care about the relative path
+    const url = new URL(options.url!, 'http://a')
+
+    if (includeProducts) url.searchParams.set('products', '1')
+
+    return fetch({
+      url: url.pathname + url.search,
+      method: options.method,
+    })
+  },
+  useHook: ({ useData }) => (input) => {
+    const { data: customer } = useCustomer()
+    const response = useData({
+      input: [
+        ['customerId', customer?.entityId],
+        ['includeProducts', input?.includeProducts],
+      ],
+      swrOptions: {
+        revalidateOnFocus: false,
+        ...input?.swrOptions,
+      },
+    })
+
+    return useMemo(
+      () =>
+        Object.create(response, {
+          isEmpty: {
+            get() {
+              return (response.data?.items?.length || 0) <= 0
+            },
+            enumerable: true,
+          },
+        }),
+      [response]
+    )
+  },
+}

tsconfig.json

@@ -22,8 +22,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["framework/commerce"],
       "@commerce/*": ["framework/commerce/*"],
-      "@framework": ["framework/local"],
+      "@framework": ["framework/elasticpath"],
-      "@framework/*": ["framework/local/*"]
+      "@framework/*": ["framework/elasticpath/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],