[WIP] Node.js provider for the API (#252)

* Adding multiple initial files

* Updated the default cart endpoint

* Fixes

* Updated CommerceAPI class for better usage

* Adding more migration changes

* Taking multiple steps into better API types

* Adding more experimental types

* Removed many testing types

* Adding types, fixes and other updates

* Updated commerce types

* Updated types for hooks now using the API

* Updated mutation types

* Simplified cart types for the provider

* Updated cart hooks

* Remove normalizers from the hooks

* Updated cart endpoint

* Removed cart handlers

* bug fixes

* Improve quantity input behavior in cart item

* Removed endpoints folder

* Making progress on api operations

* Moved method

* Moved types

* Changed the way ops are created

* Added customer endpoint

* Login endpoint

* Added logout endpoint

* Add missing logout files

* Added signup endpoint

* Removed customers old endpoints

* Moved endpoints to nested folder

* Removed old customer endpoint builders

* Updated login operation

* Updated login operation

* Added getAllPages operation

* Renamed endpoint operations to handlers

* Changed import

* Renamed operations to handlers in usage

* Moved getAllPages everywhere

* Moved getPage

* Updated getPage usage

* Moved getSiteInfo

* Added def types for product

* Updated type

* moved products catalog endpoint

* removed old catalog endpoint

* Moved wishlist

* Removed commerce.endpoint

* Replaced references to commerce.endpoint

* Updated catalog products

* Moved checkout api

* Added the get customer wishlist operation

* Removed old wishlist stuff

* Added getAllProductPaths operation

* updated reference to operation

* Moved getAllProducts

* Updated getProduct operation

* Removed old getConfig and references

* Removed is-allowed-method from BC

* Updated types for auth hooks

* Updated useCustomer and core types

* Updated useData and util hooks

* Updated useSearch hook

* Updated types for useWishlist

* Added index for types

* Fixes

* Updated urls to the API

* Renamed fetchInput to fetcherInput

* Updated fetch type

* Fixes in search hook

* Updated Shopify Provider Structure (#340)

* Add codegen, update fragments & schemas

* Update checkout-create.ts

* Update checkout-create.ts

* Update README.md

* Update product mutations & queries

* Uptate customer fetch types

* Update schemas

* Start updates

* Moved Page, AllPages & Site Info

* Moved product, all products (paths)

* Add translations, update operations & fixes

* Update api endpoints, types & fixes

* Add api checkout endpoint

* Updates

* Fixes

* Update commerce.config.json

Co-authored-by: B <curciobelen@gmail.com>

* Added category type and normalizer

* updated init script to exclude other providers

* Excluded swell and venture temporarily

* Fix category & color normalization

* Fixed category normalizer in shopify

* Don't use getSlug for category on /search

* Update colors.ts

Co-authored-by: cond0r <pinte_catalin@yahoo.com>
Co-authored-by: B <curciobelen@gmail.com>

pages/[...pages].tsx

@@ -3,29 +3,31 @@ import type {
   GetStaticPropsContext,
   InferGetStaticPropsType,
 } from 'next'
+import commerce from '@lib/api/commerce'
 import { Text } from '@components/ui'
 import { Layout } from '@components/common'
 import getSlug from '@lib/get-slug'
 import { missingLocaleInPages } from '@lib/usage-warns'
-import { getConfig } from '@framework/api'
-import getPage from '@framework/common/get-page'
-import getAllPages from '@framework/common/get-all-pages'
-import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   params,
   locale,
+  locales,
 }: GetStaticPropsContext<{ pages: string[] }>) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ preview, config })
-  const { categories } = await getSiteInfo({ config, preview })
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { categories } = await commerce.getSiteInfo({ config, preview })
   const path = params?.pages.join('/')
   const slug = locale ? `${locale}/${path}` : path
   const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
   const data =
     pageItem &&
-    (await getPage({ variables: { id: pageItem.id! }, config, preview }))
+    (await commerce.getPage({
+      variables: { id: pageItem.id! },
+      config,
+      preview,
+    }))
   const page = data?.page
 
   if (!page) {
@@ -40,7 +42,8 @@ export async function getStaticProps({
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  const { pages } = await getAllPages()
+  const config = { locales }
+  const { pages } = await commerce.getAllPages({ config })
   const [invalidPaths, log] = missingLocaleInPages()
   const paths = pages
     .map((page) => page.url)

pages/api/bigcommerce/cart.ts

@@ -1,3 +0,0 @@
-import cartApi from '@framework/api/cart'
-
-export default cartApi()

pages/api/bigcommerce/catalog/products.ts

@@ -1,3 +0,0 @@
-import catalogProductsApi from '@framework/api/catalog/products'
-
-export default catalogProductsApi()

pages/api/bigcommerce/checkout.ts

@@ -1,3 +0,0 @@
-import checkoutApi from '@framework/api/checkout'
-
-export default checkoutApi()

pages/api/bigcommerce/customers/index.ts

@@ -1,3 +0,0 @@
-import customersApi from '@framework/api/customers'
-
-export default customersApi()

pages/api/bigcommerce/customers/login.ts

@@ -1,3 +0,0 @@
-import loginApi from '@framework/api/customers/login'
-
-export default loginApi()

pages/api/bigcommerce/customers/logout.ts

@@ -1,3 +0,0 @@
-import logoutApi from '@framework/api/customers/logout'
-
-export default logoutApi()

pages/api/bigcommerce/customers/signup.ts

@@ -1,3 +0,0 @@
-import signupApi from '@framework/api/customers/signup'
-
-export default signupApi()

pages/api/bigcommerce/wishlist.ts

@@ -1,3 +0,0 @@
-import wishlistApi from '@framework/api/wishlist'
-
-export default wishlistApi()

pages/api/cart.ts

@@ -0,0 +1,4 @@
+import cartApi from '@framework/api/endpoints/cart'
+import commerce from '@lib/api/commerce'
+
+export default cartApi(commerce)

pages/api/catalog/products.ts

@@ -0,0 +1,4 @@
+import productsApi from '@framework/api/endpoints/catalog/products'
+import commerce from '@lib/api/commerce'
+
+export default productsApi(commerce)

pages/api/checkout.ts

@@ -0,0 +1,4 @@
+import checkoutApi from '@framework/api/endpoints/checkout'
+import commerce from '@lib/api/commerce'
+
+export default checkoutApi(commerce)

pages/api/customer.ts

@@ -0,0 +1,4 @@
+import customerApi from '@framework/api/endpoints/customer'
+import commerce from '@lib/api/commerce'
+
+export default customerApi(commerce)

pages/api/login.ts

@@ -0,0 +1,4 @@
+import loginApi from '@framework/api/endpoints/login'
+import commerce from '@lib/api/commerce'
+
+export default loginApi(commerce)

pages/api/logout.ts

@@ -0,0 +1,4 @@
+import logoutApi from '@framework/api/endpoints/logout'
+import commerce from '@lib/api/commerce'
+
+export default logoutApi(commerce)

pages/api/signup.ts

@@ -0,0 +1,4 @@
+import singupApi from '@framework/api/endpoints/signup'
+import commerce from '@lib/api/commerce'
+
+export default singupApi(commerce)

pages/api/wishlist.ts

@@ -0,0 +1,4 @@
+import wishlistApi from '@framework/api/endpoints/wishlist'
+import commerce from '@lib/api/commerce'
+
+export default wishlistApi(commerce)

pages/cart.tsx

@@ -1,21 +1,20 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/common/get-all-pages'
 import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
+import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
 import { Button, Text } from '@components/ui'
 import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
 import { CartItem } from '@components/cart'
-import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   locale,
+  locales,
 }: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { categories } = await getSiteInfo({ config, preview })
-  const { pages } = await getAllPages({ config, preview })
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { categories } = await commerce.getSiteInfo({ config, preview })
   return {
     props: { pages, categories },
   }

pages/index.tsx

@@ -1,32 +1,29 @@
+import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
 import { ProductCard } from '@components/product'
 import { Grid, Marquee, Hero } from '@components/ui'
 // import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-import { getConfig } from '@framework/api'
-import getAllProducts from '@framework/product/get-all-products'
-import getSiteInfo from '@framework/common/get-site-info'
-import getAllPages from '@framework/common/get-all-pages'
 
 export async function getStaticProps({
   preview,
   locale,
+  locales,
 }: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  const { categories } = await getSiteInfo({ config, preview })
-
-  const { products } = await getAllProducts({
+  const config = { locale, locales }
+  const { products } = await commerce.getAllProducts({
     variables: { first: 12 },
     config,
     preview,
   })
+  const { categories, brands } = await commerce.getSiteInfo({ config, preview })
+  const { pages } = await commerce.getAllPages({ config, preview })
 
   return {
     props: {
       products,
       categories,
-      brands: [],
+      brands,
       pages,
     },
     revalidate: 14400,

pages/orders.tsx

@@ -1,18 +1,17 @@
 import type { GetStaticPropsContext } from 'next'
+import commerce from '@lib/api/commerce'
 import { Bag } from '@components/icons'
-import { getConfig } from '@framework/api'
 import { Layout } from '@components/common'
 import { Container, Text } from '@components/ui'
-import getAllPages from '@framework/common/get-all-pages'
-import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   locale,
+  locales,
 }: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { categories } = await getSiteInfo({ config, preview })
-  const { pages } = await getAllPages({ config, preview })
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { categories } = await commerce.getSiteInfo({ config, preview })
 
   return {
     props: { pages, categories },

pages/product/[slug].tsx

@@ -4,28 +4,24 @@ import type {
   InferGetStaticPropsType,
 } from 'next'
 import { useRouter } from 'next/router'
+import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
 import { ProductView } from '@components/product'
 
-import { getConfig } from '@framework/api'
-import getProduct from '@framework/product/get-product'
-import getAllPages from '@framework/common/get-all-pages'
-import getAllProductPaths from '@framework/product/get-all-product-paths'
-import getSiteInfo from '@framework/common/get-site-info'
-
 export async function getStaticProps({
   params,
   locale,
+  locales,
   preview,
 }: GetStaticPropsContext<{ slug: string }>) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  const { product } = await getProduct({
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { product } = await commerce.getProduct({
     variables: { slug: params!.slug },
     config,
     preview,
   })
-  const { categories } = await getSiteInfo({ config, preview })
+  const { categories } = await commerce.getSiteInfo({ config, preview })
 
   if (!product) {
     throw new Error(`Product with slug '${params!.slug}' not found`)
@@ -42,18 +38,18 @@ export async function getStaticProps({
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  const { products } = await getAllProductPaths()
+  const { products } = await commerce.getAllProductPaths()
 
   return {
     paths: locales
       ? locales.reduce<string[]>((arr, locale) => {
           // Add a product path for every locale
           products.forEach((product) => {
-            arr.push(`/${locale}/product${product.node.path}`)
+            arr.push(`/${locale}/product${product.path}`)
           })
           return arr
         }, [])
-      : products.map((product) => `/product${product.node.path}`),
+      : products.map((product) => `/product${product.path}`),
     fallback: 'blocking',
   }
 }

pages/profile.tsx

@@ -1,18 +1,18 @@
 import type { GetStaticPropsContext } from 'next'
-import { getConfig } from '@framework/api'
-import getAllPages from '@framework/common/get-all-pages'
 import useCustomer from '@framework/customer/use-customer'
+import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
 import { Container, Text } from '@components/ui'
-import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   locale,
+  locales,
 }: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { categories } = await getSiteInfo({ config, preview })
-  const { pages } = await getAllPages({ config, preview })
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { categories } = await commerce.getSiteInfo({ config, preview })
+
   return {
     props: { pages, categories },
   }

pages/search.tsx

@@ -6,16 +6,23 @@ import { useRouter } from 'next/router'
 
 import { Layout } from '@components/common'
 import { ProductCard } from '@components/product'
+import type { Product } from '@commerce/types/product'
 import { Container, Grid, Skeleton } from '@components/ui'
 
-import { getConfig } from '@framework/api'
 import useSearch from '@framework/product/use-search'
-import getAllPages from '@framework/common/get-all-pages'
-import getSiteInfo from '@framework/common/get-site-info'
-
-import getSlug from '@lib/get-slug'
+import commerce from '@lib/api/commerce'
 import rangeMap from '@lib/range-map'
 
+import {
+  filterQuery,
+  getCategoryPath,
+  getDesignerPath,
+  useSearchMeta,
+} from '@lib/search'
+
+// TODO(bc) Remove this. This should come from the API
+import getSlug from '@lib/get-slug'
+
 const SORT = Object.entries({
   'latest-desc': 'Latest arrivals',
   'trending-desc': 'Trending',
@@ -23,21 +30,14 @@ const SORT = Object.entries({
   'price-desc': 'Price: High to low',
 })
 
-import {
-  filterQuery,
-  getCategoryPath,
-  getDesignerPath,
-  useSearchMeta,
-} from '@lib/search'
-import { Product } from '@commerce/types'
-
 export async function getStaticProps({
   preview,
   locale,
+  locales,
 }: GetStaticPropsContext) {
-  const config = getConfig({ locale })
-  const { pages } = await getAllPages({ config, preview })
-  const { categories, brands } = await getSiteInfo({ config, preview })
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { categories, brands } = await commerce.getSiteInfo({ config, preview })
   return {
     props: {
       pages,
@@ -55,7 +55,7 @@ export default function Search({
   const [toggleFilter, setToggleFilter] = useState(false)
 
   const router = useRouter()
-  const { asPath } = router
+  const { asPath, locale } = router
   const { q, sort } = router.query
   // `q` can be included but because categories and designers can't be searched
   // in the same way of products, it's better to ignore the search input if one
@@ -63,9 +63,7 @@ export default function Search({
   const query = filterQuery({ sort })
 
   const { pathname, category, brand } = useSearchMeta(asPath)
-  const activeCategory = categories.find(
-    (cat) => getSlug(cat.path) === category
-  )
+  const activeCategory = categories.find((cat) => cat.slug === category)
   const activeBrand = brands.find(
     (b) => getSlug(b.node.path) === `brands/${brand}`
   )?.node
@@ -75,6 +73,7 @@ export default function Search({
     categoryId: activeCategory?.id,
     brandId: (activeBrand as any)?.entityId,
     sort: typeof sort === 'string' ? sort : '',
+    locale,
   })
 
   const handleClick = (event: any, filter: string) => {

pages/wishlist.tsx

@@ -1,17 +1,16 @@
 import type { GetStaticPropsContext } from 'next'
+import commerce from '@lib/api/commerce'
 import { Heart } from '@components/icons'
-import { getConfig } from '@framework/api'
 import { Layout } from '@components/common'
 import { Text, Container } from '@components/ui'
 import { useCustomer } from '@framework/customer'
 import { WishlistCard } from '@components/wishlist'
 import useWishlist from '@framework/wishlist/use-wishlist'
-import getAllPages from '@framework/common/get-all-pages'
-import getSiteInfo from '@framework/common/get-site-info'
 
 export async function getStaticProps({
   preview,
   locale,
+  locales,
 }: GetStaticPropsContext) {
   // Disabling page if Feature is not available
   if (!process.env.COMMERCE_WISHLIST_ENABLED) {
@@ -20,9 +19,10 @@ export async function getStaticProps({
     }
   }
 
-  const config = getConfig({ locale })
-  const { categories } = await getSiteInfo({ config, preview })
-  const { pages } = await getAllPages({ config, preview })
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { categories } = await commerce.getSiteInfo({ config, preview })
+
   return {
     props: {
       pages,