Spree Commerce Provider

.env.template

@@ -1,4 +1,4 @@
-# Available providers: local, bigcommerce, shopify, swell, saleor
+# Available providers: local, bigcommerce, shopify, swell, saleor, spree
 COMMERCE_PROVIDER=
 
 BIGCOMMERCE_STOREFRONT_API_URL=

README.md

@@ -13,6 +13,7 @@ Demo live at: [demo.vercel.store](https://demo.vercel.store/)
 - Vendure Demo: https://vendure.vercel.store
 - Saleor Demo: https://saleor.vercel.store/
 - Ordercloud Demo: https://ordercloud.vercel.store/
+- Spree Demo: https://spree.vercel.store/
 
 ## Features
 
@@ -28,7 +29,7 @@ Demo live at: [demo.vercel.store](https://demo.vercel.store/)
 
 ## Integrations
 
-Next.js Commerce integrates out-of-the-box with BigCommerce, Shopify, Swell, Saleor and Vendure. We plan to support all major ecommerce backends.
+Next.js Commerce integrates out-of-the-box with BigCommerce, Shopify, Swell, Saleor, Vendure and Spree. We plan to support all major ecommerce backends.
 
 ## Considerations
 

framework/commerce/config.js

@@ -15,6 +15,7 @@ const PROVIDERS = [
   'swell',
   'vendure',
   'ordercloud',
+  'spree',
 ]
 
 function getProviderName() {

framework/spree/.env.template

@@ -0,0 +1,25 @@
+# Template to be used for creating .env* files (.env, .env.local etc.) in the project's root directory.
+
+COMMERCE_PROVIDER=spree
+
+{# - NEXT_PUBLIC_* are exposed to the web browser and the server #}
+NEXT_PUBLIC_SPREE_API_HOST=http://localhost:4000
+NEXT_PUBLIC_SPREE_DEFAULT_LOCALE=en-us
+NEXT_PUBLIC_SPREE_CART_COOKIE_NAME=spree_cart_token
+{# -- cookie expire in days #}
+NEXT_PUBLIC_SPREE_CART_COOKIE_EXPIRE=7
+NEXT_PUBLIC_SPREE_USER_COOKIE_NAME=spree_user_token
+NEXT_PUBLIC_SPREE_USER_COOKIE_EXPIRE=7
+NEXT_PUBLIC_SPREE_IMAGE_HOST=http://localhost:4000
+NEXT_PUBLIC_SPREE_ALLOWED_IMAGE_DOMAIN=localhost
+NEXT_PUBLIC_SPREE_CATEGORIES_TAXONOMY_PERMALINK=categories
+NEXT_PUBLIC_SPREE_BRANDS_TAXONOMY_PERMALINK=brands
+NEXT_PUBLIC_SPREE_ALL_PRODUCTS_TAXONOMY_ID=false
+NEXT_PUBLIC_SPREE_SHOW_SINGLE_VARIANT_OPTIONS=false
+NEXT_PUBLIC_SPREE_LAST_UPDATED_PRODUCTS_PRERENDER_COUNT=10
+NEXT_PUBLIC_SPREE_PRODUCT_PLACEHOLDER_IMAGE_URL=/product-img-placeholder.svg
+NEXT_PUBLIC_SPREE_LINE_ITEM_PLACEHOLDER_IMAGE_URL=/product-img-placeholder.svg
+NEXT_PUBLIC_SPREE_IMAGES_OPTION_FILTER=false
+NEXT_PUBLIC_SPREE_IMAGES_SIZE=1000x1000
+NEXT_PUBLIC_SPREE_IMAGES_QUALITY=100
+NEXT_PUBLIC_SPREE_LOGIN_AFTER_SIGNUP=true

framework/spree/README.md

@@ -0,0 +1,33 @@
+# [Spree Commerce][1] Provider
+
+![Screenshots of Spree Commerce and NextJS Commerce][5]
+
+An integration of [Spree Commerce](https://spreecommerce.org/) within NextJS Commerce. It supports browsing and searching Spree products and adding products to the cart.
+
+**Demo**: [https://spree.vercel.store/][6]
+
+## Installation
+
+1. Setup Spree - [follow the Getting Started guide](https://dev-docs.spreecommerce.org/getting-started/installation).
+
+1. Setup Nextjs Commerce - [instructions for setting up NextJS Commerce][2].
+
+1. Copy the `.env.template` file in this directory (`/framework/spree`) to `.env.local` in the main directory
+
+   ```bash
+   cp framework/spree/.env.template .env.local
+   ```
+
+1. Set `NEXT_PUBLIC_SPREE_CATEGORIES_TAXONOMY_PERMALINK` and `NEXT_PUBLIC_SPREE_BRANDS_TAXONOMY_PERMALINK` environment variables:
+
+   - They rely on [taxonomies'](https://dev-docs.spreecommerce.org/internals/products#taxons-and-taxonomies) permalinks in Spree.
+   - Go to the Spree admin panel and create `Categories` and `Brands` taxonomies if they don't exist and copy their permalinks into `.env.local` in NextJS Commerce.
+
+1. Finally, run `yarn dev` :tada:
+
+[1]: https://spreecommerce.org/
+[2]: https://github.com/vercel/commerce
+[3]: https://github.com/spree/spree_starter
+[4]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
+[5]: ./README-assets/screenshots.png
+[6]: https://spree.vercel.store/

framework/spree/api/endpoints/cart/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/catalog/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/catalog/products.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/checkout/get-checkout.ts

@@ -0,0 +1,44 @@
+import type { CheckoutEndpoint } from '.'
+
+const getCheckout: CheckoutEndpoint['handlers']['getCheckout'] = async ({
+  req: _request,
+  res: response,
+  config: _config,
+}) => {
+  try {
+    const html = `
+      <!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Checkout</title>
+        </head>
+        <body>
+          <div style='margin: 10rem auto; text-align: center; font-family: SansSerif, "Segoe UI", Helvetica; color: #888;'>
+             <svg xmlns="http://www.w3.org/2000/svg" style='height: 60px; width: 60px;' fill="none" viewBox="0 0 24 24" stroke="currentColor">
+               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+             </svg>
+             <h1>Checkout not yet implemented :(</h1>
+             <p>
+             See <a href='https://github.com/vercel/commerce/issues/64' target='_blank'>#64</a>
+             </p>
+          </div>
+        </body>
+      </html>
+    `
+
+    response.status(200)
+    response.setHeader('Content-Type', 'text/html')
+    response.write(html)
+    response.end()
+  } catch (error) {
+    console.error(error)
+
+    const message = 'An unexpected error ocurred'
+
+    response.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export default getCheckout

framework/spree/api/endpoints/checkout/index.ts

@@ -0,0 +1,22 @@
+import { createEndpoint } from '@commerce/api'
+import type { GetAPISchema, CommerceAPI } from '@commerce/api'
+import checkoutEndpoint from '@commerce/api/endpoints/checkout'
+import type { CheckoutSchema } from '@commerce/types/checkout'
+import getCheckout from './get-checkout'
+import type { SpreeApiProvider } from '../..'
+
+export type CheckoutAPI = GetAPISchema<
+  CommerceAPI<SpreeApiProvider>,
+  CheckoutSchema
+>
+
+export type CheckoutEndpoint = CheckoutAPI['endpoint']
+
+export const handlers: CheckoutEndpoint['handlers'] = { getCheckout }
+
+const checkoutApi = createEndpoint<CheckoutAPI>({
+  handler: checkoutEndpoint,
+  handlers,
+})
+
+export default checkoutApi

framework/spree/api/endpoints/customer/address.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/customer/card.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/customer/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

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

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/logout/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/signup/index.ts

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/endpoints/wishlist/index.tsx

@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}

framework/spree/api/index.ts

@@ -0,0 +1,45 @@
+import type { CommerceAPI, CommerceAPIConfig } from '@commerce/api'
+import { getCommerceApi as commerceApi } from '@commerce/api'
+import createApiFetch from './utils/create-api-fetch'
+
+import getAllPages from './operations/get-all-pages'
+import getPage from './operations/get-page'
+import getSiteInfo from './operations/get-site-info'
+import getCustomerWishlist from './operations/get-customer-wishlist'
+import getAllProductPaths from './operations/get-all-product-paths'
+import getAllProducts from './operations/get-all-products'
+import getProduct from './operations/get-product'
+
+export interface SpreeApiConfig extends CommerceAPIConfig {}
+
+const config: SpreeApiConfig = {
+  commerceUrl: '',
+  apiToken: '',
+  cartCookie: '',
+  customerCookie: '',
+  cartCookieMaxAge: 2592000,
+  fetch: createApiFetch(() => getCommerceApi().getConfig()),
+}
+
+const operations = {
+  getAllPages,
+  getPage,
+  getSiteInfo,
+  getCustomerWishlist,
+  getAllProductPaths,
+  getAllProducts,
+  getProduct,
+}
+
+export const provider = { config, operations }
+
+export type SpreeApiProvider = typeof provider
+
+export type SpreeApi<P extends SpreeApiProvider = SpreeApiProvider> =
+  CommerceAPI<P>
+
+export function getCommerceApi<P extends SpreeApiProvider>(
+  customProvider: P = provider as any
+): SpreeApi<P> {
+  return commerceApi(customProvider)
+}

framework/spree/api/operations/get-all-pages.ts

@@ -0,0 +1,82 @@
+import type {
+  OperationContext,
+  OperationOptions,
+} from '@commerce/api/operations'
+import type { GetAllPagesOperation, Page } from '@commerce/types/page'
+import { requireConfigValue } from '../../isomorphic-config'
+import normalizePage from '../../utils/normalizations/normalize-page'
+import type { IPages } from '@spree/storefront-api-v2-sdk/types/interfaces/Page'
+import type { SpreeSdkVariables } from '../../types'
+import type { SpreeApiConfig, SpreeApiProvider } from '../index'
+
+export default function getAllPagesOperation({
+  commerce,
+}: OperationContext<SpreeApiProvider>) {
+  async function getAllPages<T extends GetAllPagesOperation>(options?: {
+    config?: Partial<SpreeApiConfig>
+    preview?: boolean
+  }): Promise<T['data']>
+
+  async function getAllPages<T extends GetAllPagesOperation>(
+    opts: {
+      config?: Partial<SpreeApiConfig>
+      preview?: boolean
+    } & OperationOptions
+  ): Promise<T['data']>
+
+  async function getAllPages<T extends GetAllPagesOperation>({
+    config: userConfig,
+    preview,
+    query,
+    url,
+  }: {
+    url?: string
+    config?: Partial<SpreeApiConfig>
+    preview?: boolean
+    query?: string
+  } = {}): Promise<T['data']> {
+    console.info(
+      'getAllPages called. Configuration: ',
+      'query: ',
+      query,
+      'userConfig: ',
+      userConfig,
+      'preview: ',
+      preview,
+      'url: ',
+      url
+    )
+
+    const config = commerce.getConfig(userConfig)
+    const { fetch: apiFetch } = config
+
+    const variables: SpreeSdkVariables = {
+      methodPath: 'pages.list',
+      arguments: [
+        {
+          per_page: 500,
+          filter: {
+            locale_eq:
+              config.locale || (requireConfigValue('defaultLocale') as string),
+          },
+        },
+      ],
+    }
+
+    const { data: spreeSuccessResponse } = await apiFetch<
+      IPages,
+      SpreeSdkVariables
+    >('__UNUSED__', {
+      variables,
+    })
+
+    const normalizedPages: Page[] = spreeSuccessResponse.data.map<Page>(
+      (spreePage) =>
+        normalizePage(spreeSuccessResponse, spreePage, config.locales || [])
+    )
+
+    return { pages: normalizedPages }
+  }
+
+  return getAllPages
+}