Agnostic UI (#199)

* changes

* Progress

* Normalized Products output

* Progress

* Restored Index Agnostic

* Progress

* Reordering

* Moved normalizer to BC function

* Removed Futures

* More Types

* More Types

* More Types

* Fix useCallback

* Progress, Changes types, readme and restoring functionality

* Changes

* TS Issues

* Changes

* Normalizer

* Normalizing more operations

* Normalizing more operations

* changes

* Merge Issues

* Cleanup

* change

* changes

* index.ts broke my tree shaking

* slug

* Normalized Options and Swatches

* Restored Add to cart

* Correct Variant Added to Cart

* Normalizing Cart Responses

* Changes

* changes breaking

* Adding immutable normalizer for Product

* Cart Normalized

* changes

* Progress

* More updates

* Removed some comments

* Add loading state for data hooks

* Bug fix

* Changed the way isEmpty works

* Improve navbar performance

* Added useResponse hook

* added useResponse to useWhishlist

* Added husky and lint-staged

* Ran prettier fix

* Added more cart types

* Moved types.d.ts to the commerce folder

* Minor changes

* Moved normalizer to happen after fetch

* updated useCart types

* Updated normalizer for useData

* Added new normalizer for the cart to the UI

* More corrections for useCart

* Updated cart update hooks

* Removed import

* Progress

* Switch away from global types

* Making multiple changes

* Improved types for operations

* Moved and updated cart types

* Updated the useAddItem and useRemoveItem hooks

* Minor life improvement

* Minor change

* Implement Shopify Provider

* Update README.md

* Update README.md

* normalizations & missing files

* Update index.ts

* fixes

* Update normalize.ts

* fix: cart error on first load

* shopify checkout redirect & api handler

* Update get-checkout-id.ts

* userAvatar

* Fix: color option

* Update normalize.ts

* changes

* Update next.config.js

* start customer auth & signup

* Update config.ts

* Login, Sign Up, Log Out, and checkout & customer association

* Automatic login after sign-up

* Update handle-login.ts

* MOving stuff around and adding temporal new files

* changes

* Replace use-cart with the new hook

* Removed old hook

* Improved HookHandler type

* Moved types

* Simplified useData types

* Updated Fetcher type

* Moved SwrOptions type

* Removed duplicated fetcher

* Moved provider to its own file

* Added proper type for fetch input

* Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"

This reverts commit 23c8ed7c2d, reversing
changes made to bf50965a39.

* change readme

* Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic"

This reverts commit bf50965a39, reversing
changes made to 0dad4ddedb.

* Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic""

This reverts commit c9a43f1bce.

* align with upstream changes

* Updated how the hook input is handled

* Add more options to the hook handler

* Final touches to the hook handler type

* Moved useWishlist to use new handler

* Move useCustomer to the new hook

* Added a default fetcher

* query all products for vendors & paths, improve search

* Update use-search.tsx

* fix cart after upstream changes

* Shopify Provider (#186)

* Start of Shopify provider

* add missing comment to documentation

* add missing env vars to documentation

* update reference to types file

* Moved useSearch to the new hook

* Removed old use-data lib

* Removed generics for result and body

* Removed normalizr

* Wishlist

* New changes and initial Features API

* Fixed some types

* Fixed more types

* fixes after upstream changes

* Fixed product types

* Fixed another product type

* Updated type

* Fixed remaining issues with types

* Added a MutationHandler

* Moved the handlers to each hook

* Moved the fetcher to its own file

* Moved handler to each hook

* Added initial version of useAddItem

* Added better mutation types, and moved some hooks

* Removed use-cart-actions

* Added initial version of useAddItem

* Updated types

* Update use-add-item.tsx

* changes

* Changes

* Reordering and changes

* Adding Features APO

* Adding wishlist api

* Implementing FeaturesAPI with Wishlist

* Removing bug with touchstart

* Adding tyni typing

* moved use-remove-item

* Removed MutationHandler type

* Moved more hooks and updated types to make them smaller

* Moved data hooks to new format

* Removed no longer required types

* Removed useResponse helper

* Updated useData type

* Moved wishlist use-add-item

* Moved wishlist use-remove-item to provider

* Moved use-login and use-logout

* Update use-signup

* Removed use-action helper

* Moved auth & cart hooks + several fixes

* Updated cart item, fixed deprecations

* Update next.config.js

* Updates to wishlist feature

* Moved the features to be environment variable only

* More changes for wishlist config

* Disable wishlist

* Removed useWishlistActions

* Updated readme

* updates

* typos

* Updated the way the provider config is set

* Removed features.ts

* Removed bootstrap.js

* Aligned with upstream changes

* Updates

* shopify: changes

* shopify: changes

* Update next.config.js

* Shopify Provider Updates (#209)

* Implement Shopify Provider

* Update README.md

* Update README.md

* normalizations & missing files

* Update index.ts

* fixes

* Update normalize.ts

* fix: cart error on first load

* shopify checkout redirect & api handler

* Update get-checkout-id.ts

* Fix: color option

* Update normalize.ts

* changes

* Update next.config.js

* start customer auth & signup

* Update config.ts

* Login, Sign Up, Log Out, and checkout & customer association

* Automatic login after sign-up

* Update handle-login.ts

* changes

* Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic"

This reverts commit 23c8ed7c2d, reversing
changes made to bf50965a39.

* change readme

* Revert "Merge branch 'master' of https://github.com/vercel/commerce into agnostic"

This reverts commit bf50965a39, reversing
changes made to 0dad4ddedb.

* Revert "Revert "Merge branch 'agnostic' of https://github.com/vercel/commerce into agnostic""

This reverts commit c9a43f1bce.

* align with upstream changes

* query all products for vendors & paths, improve search

* Update use-search.tsx

* fix cart after upstream changes

* fixes after upstream changes

* Moved handler to each hook

* Added initial version of useAddItem

* Updated types

* Update use-add-item.tsx

* Moved auth & cart hooks + several fixes

* Updated cart item, fixed deprecations

* Update next.config.js

* Aligned with upstream changes

* Updates

* Update next.config.js

* Updated the commerce config structure

* Removed @framework imports within framework providers

* Fixed types

* changes

* Adding extra config

* Adding shopify commit

* Adding env templates to the providers

* Ignore some types

* Adding link for Cart

* Adding customCheckout

* multiple changes to fix the wishlist

* Shopify Provier Updates (#212)

* changes

* Adding shopify commit

* Changed to query page by id

* Fixed page query, Changed use-search GraphQl query

* Update use-search.tsx

* remove unused util

* Changed cookie expiration

* Update tsconfig.json

Co-authored-by: okbel <curciobel@gmail.com>

* Bump and adding dependency

* Adding color checks

* Now colors work with lighter colors

* Stable commerce.config.json

* Updated main readme

* Readme changes

* Default to bigcommerce

Co-authored-by: bc <bc@bcs-MacBook-Pro.fibertel.com.ar>
Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: cond0r <pinte_catalin@yahoo.com>
Co-authored-by: Peter Mekhaeil <4616064+petermekhaeil@users.noreply.github.com>

framework/shopify/api/cart/index.ts

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

framework/shopify/api/catalog/index.ts

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

framework/shopify/api/catalog/products.ts

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

framework/shopify/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/shopify/api/customer.ts

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

framework/shopify/api/customers/index.ts

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

framework/shopify/api/customers/login.ts

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

framework/shopify/api/customers/logout.ts

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

framework/shopify/api/customers/signup.ts

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

framework/shopify/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/shopify/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/shopify/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/shopify/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/shopify/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/shopify/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/shopify/api/utils/fetch.ts

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

framework/shopify/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/shopify/api/wishlist/index.tsx

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