CSV WIP

.env.template

@@ -10,3 +10,5 @@ BIGCOMMERCE_CHANNEL_ID=
 
 NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
 NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
+
+NEXT_PUBLIC_CSV_URL=

framework/commerce/config.js

@@ -7,7 +7,7 @@ const fs = require('fs')
 const merge = require('deepmerge')
 const prettier = require('prettier')
 
-const PROVIDERS = ['bigcommerce', 'shopify']
+const PROVIDERS = ['bigcommerce', 'shopify', 'csv']
 
 function getProviderName() {
   return (

framework/csv/.env.template

@@ -0,0 +1,3 @@
+COMMERCE_PROVIDER=csv
+
+NEXT_PUBLIC_CSV_URL=

framework/csv/README.md

@@ -0,0 +1,3 @@
+## CSV Provider
+
+_work in progress_

framework/csv/api/cart/index.ts

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

framework/csv/api/catalog/index.ts

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

framework/csv/api/catalog/products.ts

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

framework/csv/api/checkout/index.ts

@@ -0,0 +1,7 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+const checkoutApi = async (_req: NextApiRequest, res: NextApiResponse) => {
+  res.redirect(`https://wa.me/5491141634695`)
+}
+
+export default checkoutApi

framework/csv/api/index.ts

@@ -0,0 +1,42 @@
+import type { CommerceAPIConfig } from '@commerce/api'
+
+import { CSV_URL } from '../const'
+
+if (!CSV_URL) {
+  throw new Error(
+    `The environment variable NEXT_PUBLIC_CSV_URL is missing and it's required to access your store`
+  )
+}
+
+export interface CSVConfig extends CommerceAPIConfig {}
+
+export class Config {
+  private config: CSVConfig
+
+  constructor(config: CSVConfig) {
+    this.config = config
+  }
+
+  getConfig(userConfig: Partial<CSVConfig> = {}) {
+    return Object.entries(userConfig).reduce<CSVConfig>(
+      (cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
+      { ...this.config }
+    )
+  }
+
+  setConfig(newConfig: Partial<CSVConfig>) {
+    Object.assign(this.config, newConfig)
+  }
+}
+
+const config = new Config({
+  locale: 'en-US',
+})
+
+export function getConfig(userConfig?: Partial<CSVConfig>) {
+  return config.getConfig(userConfig)
+}
+
+export function setConfig(newConfig: Partial<CSVConfig>) {
+  return config.setConfig(newConfig)
+}

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

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

framework/csv/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/csv/auth/use-login.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from 'react'
+import type { MutationHook } from '@commerce/utils/types'
+import useCustomer from '../customer/use-customer'
+import useLogin, { UseLogin } from '@commerce/auth/use-login'
+
+export default useLogin as UseLogin<typeof handler>
+
+export const handler: MutationHook<null, {}, any> = {
+  fetchOptions: {
+    query: ``,
+  },
+  async fetcher() {
+    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/csv/auth/use-logout.tsx

@@ -0,0 +1,27 @@
+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'
+
+export default useLogout as UseLogout<typeof handler>
+
+export const handler: MutationHook<null> = {
+  fetchOptions: {
+    query: ``,
+  },
+  async fetcher() {
+    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/csv/auth/use-signup.tsx

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

framework/csv/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 useUpdateItem } from './use-update-item'
+export { default as useRemoveItem } from './use-remove-item'

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

@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import type { MutationHook } from '@commerce/utils/types'
+import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
+import useCart from './use-cart'
+import { Cart, CartItemBody } from '../types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<Cart, {}, CartItemBody> = {
+  fetchOptions: {
+    query: ``,
+  },
+  async fetcher() {
+    return {} as Promise<Cart>
+  },
+  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/csv/cart/use-cart.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react'
+import useCommerceCart, {
+  FetchCartInput,
+  UseCart,
+} from '@commerce/cart/use-cart'
+
+import { Cart } from '../types'
+import { SWRHook } from '@commerce/utils/types'
+
+export default useCommerceCart as UseCart<typeof handler>
+
+export const handler: SWRHook<
+  Cart | null,
+  {},
+  FetchCartInput,
+  { isEmpty?: boolean }
+> = {
+  fetchOptions: {
+    query: ``,
+  },
+  async fetcher({ input: { cartId: checkoutId }, options, fetch }) {
+    return null
+  },
+  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/csv/cart/use-remove-item.tsx

@@ -0,0 +1,57 @@
+import { useCallback } from 'react'
+import type {
+  MutationHookContext,
+  HookFetcherContext,
+} from '@commerce/utils/types'
+import { RemoveCartItemBody } from '@commerce/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 { Cart, LineItem } from '../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: ``,
+  },
+  async fetcher({ input: { itemId } }: HookFetcherContext<RemoveCartItemBody>) {
+    return { itemId }
+  },
+  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/csv/cart/use-update-item.tsx

@@ -0,0 +1,76 @@
+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'
+
+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: ``,
+  },
+  async fetcher({
+    input: { itemId, item },
+  }: HookFetcherContext<UpdateCartItemBody>) {
+    return {
+      item,
+      itemId,
+    }
+  },
+  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/csv/commerce.config.json

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

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

@@ -0,0 +1,17 @@
+import mock from './mock'
+import { Page, CSVConfig } from './types'
+
+interface GetAllPages {
+  pages: Page[]
+}
+
+interface Parameters {
+  config: CSVConfig
+  preview?: boolean
+}
+
+const getAllPages = async (_parameters: Parameters): Promise<GetAllPages> => {
+  return { pages: [mock.page.full] }
+}
+
+export default getAllPages

framework/csv/common/get-page.ts

@@ -0,0 +1,12 @@
+import mock from './mock'
+import { Page } from './types'
+
+export interface GetPage {
+  page: Page
+}
+
+const getPage = async (): Promise<GetPage> => {
+  return { page: mock.page.full }
+}
+
+export default getPage

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

@@ -0,0 +1,26 @@
+import mock from './mock'
+import { Brand, Category, CSVConfig } from './types'
+
+interface GetSiteInfo {
+  categories: Category[]
+  brands: {
+    node: Brand
+  }[]
+}
+
+interface Parameters {
+  config: CSVConfig
+  preview?: boolean
+}
+
+const getSiteInfo = async (_parameters: Parameters): Promise<GetSiteInfo> => {
+  const categories: Category[] = [mock.category.full]
+  const brands: Brand[] = [mock.brand.full]
+
+  return {
+    categories,
+    brands: brands.map((brand) => ({ node: brand })),
+  }
+}
+
+export default getSiteInfo

framework/csv/common/mock.ts

@@ -0,0 +1,33 @@
+import { Page, Category, Brand } from './types'
+
+export default {
+  page: {
+    get full(): Page {
+      return {
+        id: 'some-page',
+        body: 'page body',
+        name: 'page name',
+        url: '/page-url',
+        sort_order: 1,
+      }
+    },
+  },
+  category: {
+    get full(): Category {
+      return {
+        entityId: 'category-id',
+        name: 'Some category',
+        path: 'some-category-path',
+      }
+    },
+  },
+  brand: {
+    get full(): Brand {
+      return {
+        entityId: 'brand-id',
+        name: 'Some brand',
+        path: 'some-brand-path',
+      }
+    },
+  },
+}

framework/csv/common/types.ts

@@ -0,0 +1,23 @@
+import { CommerceConfig } from '@commerce'
+
+export type CSVConfig = Partial<CommerceConfig>
+
+export interface Page {
+  id: string
+  name: string
+  url: string
+  sort_order?: number
+  body: string
+}
+
+export interface Category {
+  entityId: string
+  name: string
+  path: string
+}
+
+export interface Brand {
+  entityId: string
+  name: string
+  path: string
+}

framework/csv/const.ts

@@ -0,0 +1,2 @@
+export const CSV_URL = process.env.NEXT_PUBLIC_CSV_URL
+export const API_URL = '/'

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

@@ -0,0 +1,5 @@
+async function getCustomerId(): Promise<number | undefined> {
+  return undefined
+}
+
+export default getCustomerId

framework/csv/customer/index.ts

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

framework/csv/customer/use-customer.tsx

@@ -0,0 +1,22 @@
+import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
+import { Customer } from '@commerce/types'
+import { SWRHook } from '@commerce/utils/types'
+
+export default useCustomer as UseCustomer<typeof handler>
+
+export const handler: SWRHook<Customer | null> = {
+  fetchOptions: {
+    query: ``,
+  },
+  async fetcher() {
+    return null
+  },
+  useHook: ({ useData }) => (input) => {
+    return useData({
+      swrOptions: {
+        revalidateOnFocus: false,
+        ...input?.swrOptions,
+      },
+    })
+  },
+}

framework/csv/index.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+import {
+  CommerceConfig,
+  CommerceProvider as CoreCommerceProvider,
+  useCommerce as useCoreCommerce,
+} from '@commerce'
+
+import { csvProvider, CSVProvider } from './provider'
+import { CSVConfig } from './common/types'
+
+export { csvProvider }
+export type { CSVProvider }
+
+export const csvConfig: CommerceConfig = {
+  locale: 'en-us',
+}
+
+export type CSVProps = {
+  children?: React.ReactNode
+  locale: string
+} & CSVConfig
+
+export function CommerceProvider({ children, ...config }: CSVProps) {
+  return (
+    <CoreCommerceProvider
+      provider={csvProvider}
+      config={{ ...csvConfig, ...config }}
+    >
+      {children}
+    </CoreCommerceProvider>
+  )
+}
+
+export const useCommerce = () => useCoreCommerce()

framework/csv/next.config.js

@@ -0,0 +1,8 @@
+const commerce = require('./commerce.config.json')
+
+module.exports = {
+  commerce,
+  images: {
+    domains: ['placehold.it', 'picsum.photos'],
+  },
+}

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

@@ -0,0 +1,17 @@
+interface CollectionEdge {
+  entityId: string
+  name: string
+  path: string
+}
+
+interface GetAllCollections {
+  categories: CollectionEdge[]
+}
+
+const getAllCollections = async (): Promise<GetAllCollections> => {
+  return {
+    categories: [],
+  }
+}
+
+export default getAllCollections

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

@@ -0,0 +1,17 @@
+interface ProductPath {
+  node: {
+    path: string
+  }
+}
+
+interface GetAllProductPaths {
+  products: ProductPath[]
+}
+
+const getAllProductPaths = async (): Promise<GetAllProductPaths> => {
+  return {
+    products: [],
+  }
+}
+
+export default getAllProductPaths

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

@@ -0,0 +1,26 @@
+import { Product } from '@commerce/types'
+import { CSVConfig } from '../index'
+
+import mock from './mock'
+
+interface GetAllProducts {
+  products: Product[]
+}
+
+interface Parameters {
+  variables: {
+    first: number
+  }
+  config: CSVConfig
+  preview?: boolean
+}
+
+const getAllProducts = async (
+  _parameters: Parameters
+): Promise<GetAllProducts> => {
+  return {
+    products: [mock.full],
+  }
+}
+
+export default getAllProducts

framework/csv/product/get-product.ts

@@ -0,0 +1,25 @@
+import { Product } from '@commerce/types'
+
+import { CSVConfig } from '../index'
+
+import mock from './mock'
+
+interface GetProduct {
+  product: Product | null
+}
+
+interface Parameters {
+  variables: {
+    slug?: string
+  }
+  config: CSVConfig
+  preview?: boolean
+}
+
+const getProduct = async (_parameters: Parameters): Promise<GetProduct> => {
+  return {
+    product: mock.full,
+  }
+}
+
+export default getProduct

framework/csv/product/mock.ts

@@ -0,0 +1,68 @@
+import { Product } from '@commerce/types'
+
+export default {
+  get full(): Product {
+    return {
+      id: 'some-product',
+      name: 'Some product',
+      description: 'Some description',
+      descriptionHtml: `<p>Some HTML description</p>`,
+      slug: 'some-product',
+      path: '/product',
+      images: [
+        {
+          url: 'https://picsum.photos/640/480',
+          alt: 'placeholder',
+        },
+        {
+          url: 'https://picsum.photos/640/480',
+          alt: 'placeholder',
+        },
+      ],
+      variants: [
+        {
+          id: 'variant-1',
+          options: [
+            {
+              id: 'product-1',
+              displayName: 'Product',
+              values: [
+                {
+                  label: 'Product color 1',
+                  hexColors: ['#333', '#121'],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      price: {
+        currencyCode: 'ARS',
+        value: 100,
+      },
+      options: [
+        {
+          id: 'option-1',
+          displayName: 'Option 1',
+          values: [
+            {
+              label: 'Product color 1',
+              hexColors: ['#333', '#121'],
+            },
+          ],
+        },
+        {
+          id: 'option-2',
+          displayName: 'Option 2',
+          values: [
+            {
+              label: 'Product color 2',
+              hexColors: ['#FF0000'],
+            },
+          ],
+        },
+      ],
+      sku: 'sku-product',
+    }
+  },
+}

framework/csv/product/use-price.tsx

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

framework/csv/product/use-search.tsx

@@ -0,0 +1,48 @@
+import { SWRHook } from '@commerce/utils/types'
+import useSearch, { UseSearch } from '@commerce/product/use-search'
+
+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: ``,
+  },
+  async fetcher() {
+    return {
+      products: [],
+      found: false,
+    }
+  },
+  useHook: ({ useData }) => (input = {}) => {
+    return useData({
+      input: [
+        ['search', input.search],
+        ['categoryId', input.categoryId],
+        ['brandId', input.brandId],
+        ['sort', input.sort],
+      ],
+      swrOptions: {
+        revalidateOnFocus: false,
+        ...input.swrOptions,
+      },
+    })
+  },
+}

framework/csv/provider.ts

@@ -0,0 +1,21 @@
+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'
+
+export const csvProvider = {
+  locale: 'en-us',
+  cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
+  customer: { useCustomer },
+  products: { useSearch },
+  auth: { useLogin, useLogout, useSignup },
+}
+
+export type CSVProvider = typeof csvProvider

framework/csv/types.ts

@@ -0,0 +1,36 @@
+import * as Core from '@commerce/types'
+
+export type Cart = Core.Cart & {
+  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/csv/utils/checkout-create.ts

@@ -0,0 +1,5 @@
+export const checkoutCreate = async (): Promise<void> => {
+  return Promise.resolve()
+}
+
+export default checkoutCreate

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

@@ -0,0 +1,48 @@
+import { Cart } from '../types'
+import { CommerceError } from '@commerce/utils/errors'
+
+import {
+  CheckoutLineItemsAddPayload,
+  CheckoutLineItemsRemovePayload,
+  CheckoutLineItemsUpdatePayload,
+  CheckoutCreatePayload,
+  CheckoutUserError,
+  Checkout,
+  Maybe,
+} from '../schema'
+
+import { normalizeCart } from './normalize'
+import throwUserErrors from './throw-user-errors'
+
+export type CheckoutQuery = {
+  checkout: Checkout
+  checkoutUserErrors?: Array<CheckoutUserError>
+}
+
+export type CheckoutPayload =
+  | CheckoutLineItemsAddPayload
+  | CheckoutLineItemsUpdatePayload
+  | CheckoutLineItemsRemovePayload
+  | CheckoutCreatePayload
+  | CheckoutQuery
+
+const checkoutToCart = (checkoutPayload?: Maybe<CheckoutPayload>): Cart => {
+  if (!checkoutPayload) {
+    throw new CommerceError({
+      message: 'Missing checkout payload from response',
+    })
+  }
+
+  const checkout = checkoutPayload?.checkout
+  throwUserErrors(checkoutPayload?.checkoutUserErrors)
+
+  if (!checkout) {
+    throw new CommerceError({
+      message: 'Missing checkout object from response',
+    })
+  }
+
+  return normalizeCart(checkout)
+}
+
+export default checkoutToCart

framework/csv/utils/customer-token.ts

@@ -0,0 +1,2 @@
+export const getCustomerToken = () => null
+export const setCustomerToken = () => null

framework/csv/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/csv/utils/get-checkout-id.ts

@@ -0,0 +1,5 @@
+const getCheckoutId = (id?: string) => {
+  return id
+}
+
+export default getCheckoutId

framework/csv/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/csv/utils/get-sort-variables.ts

@@ -0,0 +1,32 @@
+const getSortVariables = (sort?: string, isCategory: boolean = 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/csv/utils/get-vendors.ts

@@ -0,0 +1,40 @@
+import { ShopifyConfig } from '../api'
+import fetchAllProducts from '../api/utils/fetch-all-products'
+import getAllProductVendors from './queries/get-all-product-vendors-query'
+
+export type Brand = {
+  entityId: string
+  name: string
+  path: string
+}
+
+export type BrandEdge = {
+  node: Brand
+}
+
+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) => {
+    const id = v.replace(/\s+/g, '-').toLowerCase()
+    return {
+      node: {
+        entityId: id,
+        name: v,
+        path: `brands/${id}`,
+      },
+    }
+  })
+}
+
+export default getVendors

framework/csv/utils/handle-account-activation.ts

@@ -0,0 +1,30 @@
+import { FetcherOptions } from '@commerce/utils/types'
+import throwUserErrors from './throw-user-errors'
+
+import {
+  MutationCustomerActivateArgs,
+  MutationCustomerActivateByUrlArgs,
+} from '../schema'
+import { Mutation } from '../schema'
+import { customerActivateByUrlMutation } from './mutations'
+
+const handleAccountActivation = async (
+  fetch: <T = any, B = Body>(options: FetcherOptions<B>) => Promise<T>,
+  input: MutationCustomerActivateByUrlArgs
+) => {
+  try {
+    const { customerActivateByUrl } = await fetch<
+      Mutation,
+      MutationCustomerActivateArgs
+    >({
+      query: customerActivateByUrlMutation,
+      variables: {
+        input,
+      },
+    })
+
+    throwUserErrors(customerActivateByUrl?.customerUserErrors)
+  } catch (error) {}
+}
+
+export default handleAccountActivation

framework/csv/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/csv/utils/handle-login.ts

@@ -0,0 +1,36 @@
+import { FetcherOptions } from '@commerce/utils/types'
+import { CustomerAccessTokenCreateInput } from '../schema'
+import { setCustomerToken } from './customer-token'
+import { customerAccessTokenCreateMutation } from './mutations'
+import throwUserErrors from './throw-user-errors'
+
+const handleLogin = (data: any) => {
+  const response = data.customerAccessTokenCreate
+  throwUserErrors(response?.customerUserErrors)
+
+  const customerAccessToken = response?.customerAccessToken
+  const accessToken = customerAccessToken?.accessToken
+
+  if (accessToken) {
+    setCustomerToken(accessToken)
+  }
+
+  return customerAccessToken
+}
+
+export const handleAutomaticLogin = async (
+  fetch: <T = any, B = Body>(options: FetcherOptions<B>) => Promise<T>,
+  input: CustomerAccessTokenCreateInput
+) => {
+  try {
+    const loginData = await fetch({
+      query: customerAccessTokenCreateMutation,
+      variables: {
+        input,
+      },
+    })
+    handleLogin(loginData)
+  } catch (error) {}
+}
+
+export default handleLogin

framework/csv/utils/index.ts

@@ -0,0 +1,15 @@
+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 { default as checkoutCreate } from './checkout-create'
+export { default as checkoutToCart } from './checkout-to-cart'
+export { default as handleLogin, handleAutomaticLogin } from './handle-login'
+export { default as handleAccountActivation } from './handle-account-activation'
+export { default as throwUserErrors } from './throw-user-errors'
+export * from './queries'
+export * from './mutations'
+export * from './normalize'
+export * from './customer-token'

framework/csv/utils/normalize.ts

@@ -0,0 +1,165 @@
+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.match(/colou?r/gi)) {
+        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 },
+    }) => {
+      return {
+        id,
+        name: title,
+        sku: sku ?? id,
+        price: +priceV2.amount,
+        listPrice: +compareAtPriceV2?.amount,
+        requiresShipping: true,
+        options: selectedOptions.map(({ name, value }: SelectedOption) => {
+          const options = normalizeProductOption({
+            id,
+            name,
+            values: [value],
+          })
+          return options
+        }),
+      }
+    }
+  )
+}
+
+export function normalizeProduct(productNode: ShopifyProduct): Product {
+  const {
+    id,
+    title: name,
+    vendor,
+    images,
+    variants,
+    description,
+    descriptionHtml,
+    handle,
+    priceRange,
+    options,
+    ...rest
+  } = productNode
+
+  const product = {
+    id,
+    name,
+    vendor,
+    path: `/${handle}`,
+    slug: handle?.replace(/^\/+|\/+$/g, ''),
+    price: money(priceRange?.minVariantPrice),
+    images: normalizeProductImages(images),
+    variants: variants ? normalizeProductVariants(variants) : [],
+    options: options
+      ? options
+          .filter((o) => o.name !== 'Title') // By default Shopify adds a 'Title' name when there's only one option. We don't need it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
+          .map((o) => normalizeProductOption(o))
+      : [],
+    ...(description && { description }),
+    ...(descriptionHtml && { descriptionHtml }),
+    ...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, ...rest },
+}: 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 ?? '/product-img-placeholder.svg',
+      },
+      requiresShipping: variant?.requiresShipping ?? false,
+      price: variant?.priceV2?.amount,
+      listPrice: variant?.compareAtPriceV2?.amount,
+    },
+    path: String(variant?.product?.handle),
+    discounts: [],
+    options:
+      // By default Shopify adds a default variant with default names, we're removing it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
+      variant?.title == 'Default Title'
+        ? []
+        : [
+            {
+              value: variant?.title,
+            },
+          ],
+  }
+}

framework/csv/utils/throw-user-errors.ts

@@ -0,0 +1,38 @@
+import { ValidationError } from '@commerce/utils/errors'
+
+import {
+  CheckoutErrorCode,
+  CheckoutUserError,
+  CustomerErrorCode,
+  CustomerUserError,
+} from '../schema'
+
+export type UserErrors = Array<CheckoutUserError | CustomerUserError>
+
+export type UserErrorCode =
+  | CustomerErrorCode
+  | CheckoutErrorCode
+  | null
+  | undefined
+
+const getCustomMessage = (code: UserErrorCode, message: string) => {
+  switch (code) {
+    case 'UNIDENTIFIED_CUSTOMER':
+      message = 'Cannot find an account that matches the provided credentials'
+      break
+  }
+  return message
+}
+
+export const throwUserErrors = (errors?: UserErrors) => {
+  if (errors && errors.length) {
+    throw new ValidationError({
+      errors: errors.map(({ code, message }) => ({
+        code: code ?? 'validation_error',
+        message: getCustomMessage(code, message),
+      })),
+    })
+  }
+}
+
+export default throwUserErrors

framework/csv/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/csv/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/csv/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 { Product } from '@commerce/types'
+import { HookFetcher } from '@commerce/utils/types'
+
+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)

tsconfig.json

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