Update types (#831)

* Update product types

* Cart types progress, add zod & initial schema validator

* Update normalize.ts

* Update with-schema-parser.ts

* Updated types, schemas & providers

* Fix providers after schema parse errors

* Fix paths

* More provider fixes

* Fix kibocommerce & commercejs

* Add customer updated types & fixes

* Add checkout & customer types

* Import core types only from commerce

* Update tsconfig.json

* Convert hooks interfaces to types

* Requested changes

* Change to relative paths

* Move Zod dependency

packages/shopify/src/api/endpoints/catalog/products.ts

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

packages/shopify/src/api/endpoints/catalog/products/get-products.ts

@@ -0,0 +1,26 @@
+import { ProductsEndpoint } from '.'
+
+const SORT: { [key: string]: string | undefined } = {
+  latest: 'id',
+  trending: 'total_sold',
+  price: 'price',
+}
+
+const LIMIT = 12
+
+// Return current cart info
+const getProducts: ProductsEndpoint['handlers']['getProducts'] = async ({
+  res,
+  body: { search, categoryId, brandId, sort },
+  config,
+  commerce,
+}) => {
+  res.status(200).json({
+    data: {
+      products: [],
+      found: false,
+    },
+  })
+}
+
+export default getProducts

packages/shopify/src/api/endpoints/catalog/products/index.ts

@@ -0,0 +1,19 @@
+import { GetAPISchema, createEndpoint } from '@vercel/commerce/api'
+import productsEndpoint from '@vercel/commerce/api/endpoints/catalog/products'
+import type { ProductsSchema } from '@vercel/commerce/types/product'
+import type { ShopifyAPI } from '../../..'
+
+import getProducts from './get-products'
+
+export type ProductsAPI = GetAPISchema<ShopifyAPI, ProductsSchema>
+
+export type ProductsEndpoint = ProductsAPI['endpoint']
+
+export const handlers: ProductsEndpoint['handlers'] = { getProducts }
+
+const productsApi = createEndpoint<ProductsAPI>({
+  handler: productsEndpoint,
+  handlers,
+})
+
+export default productsApi

packages/shopify/src/api/endpoints/checkout/index.ts

@@ -1,6 +1,6 @@
 import { GetAPISchema, createEndpoint } from '@vercel/commerce/api'
 import checkoutEndpoint from '@vercel/commerce/api/endpoints/checkout'
-import type { CheckoutSchema } from '../../../types/checkout'
+import type { CheckoutSchema } from '@vercel/commerce/types/checkout'
 import type { ShopifyAPI } from '../..'
 import getCheckout from './get-checkout'
 

packages/shopify/src/api/index.ts

@@ -13,7 +13,13 @@ import {
 
 import fetchGraphqlApi from './utils/fetch-graphql-api'
 
-import * as operations from './operations'
+import getAllPages from './operations/get-all-pages'
+import getPage from './operations/get-page'
+import getAllProducts from './operations/get-all-products'
+import getAllProductPaths from './operations/get-all-product-paths'
+import getProduct from './operations/get-product'
+import getSiteInfo from './operations/get-site-info'
+import login from './operations/login'
 
 if (!API_URL) {
   throw new Error(
@@ -41,7 +47,15 @@ const config: ShopifyConfig = {
 
 export const provider = {
   config,
-  operations,
+  operations: {
+    login,
+    getSiteInfo,
+    getAllPages,
+    getPage,
+    getAllProducts,
+    getAllProductPaths,
+    getProduct,
+  },
 }
 
 export type Provider = typeof provider

packages/shopify/src/api/operations/get-all-pages.ts

@@ -9,7 +9,7 @@ import {
 } from '../../../schema'
 import { normalizePages } from '../../utils'
 import type { ShopifyConfig, Provider } from '..'
-import type { GetAllPagesOperation, Page } from '../../types/page'
+import type { GetAllPagesOperation, Page } from '@vercel/commerce/types/page'
 import getAllPagesQuery from '../../utils/queries/get-all-pages-query'
 
 export default function getAllPagesOperation({

packages/shopify/src/api/operations/get-all-product-paths.ts

@@ -2,7 +2,7 @@ import type {
   OperationContext,
   OperationOptions,
 } from '@vercel/commerce/api/operations'
-import { GetAllProductPathsOperation } from '../../types/product'
+import { GetAllProductPathsOperation } from '@vercel/commerce/types/product'
 import {
   GetAllProductPathsQuery,
   GetAllProductPathsQueryVariables,

packages/shopify/src/api/operations/get-all-products.ts

@@ -2,7 +2,7 @@ import type {
   OperationContext,
   OperationOptions,
 } from '@vercel/commerce/api/operations'
-import { GetAllProductsOperation } from '../../types/product'
+import { GetAllProductsOperation } from '@vercel/commerce/types/product'
 import {
   GetAllProductsQuery,
   GetAllProductsQueryVariables,

packages/shopify/src/api/operations/get-page.ts

@@ -9,7 +9,7 @@ import {
   GetPageQueryVariables,
   Page as ShopifyPage,
 } from '../../../schema'
-import { GetPageOperation } from '../../types/page'
+import { GetPageOperation } from '@vercel/commerce/types/page'
 import getPageQuery from '../../utils/queries/get-page-query'
 
 export default function getPageOperation({

packages/shopify/src/api/operations/get-product.ts

@@ -2,7 +2,7 @@ import type {
   OperationContext,
   OperationOptions,
 } from '@vercel/commerce/api/operations'
-import { GetProductOperation } from '../../types/product'
+import { GetProductOperation } from '@vercel/commerce/types/product'
 import { normalizeProduct, getProductQuery } from '../../utils'
 import type { ShopifyConfig, Provider } from '..'
 import {

packages/shopify/src/api/operations/get-site-info.ts

@@ -4,9 +4,9 @@ import type {
 } from '@vercel/commerce/api/operations'
 import { GetSiteInfoQueryVariables } from '../../../schema'
 import type { ShopifyConfig, Provider } from '..'
-import { GetSiteInfoOperation } from '../../types/site'
+import { GetSiteInfoOperation } from '@vercel/commerce/types/site'
 
-import { getCategories, getBrands, getSiteInfoQuery } from '../../utils'
+import { getCategories, getBrands } from '../../utils'
 
 export default function getSiteInfoOperation({
   commerce,
@@ -24,9 +24,7 @@ export default function getSiteInfoOperation({
   ): Promise<T['data']>
 
   async function getSiteInfo<T extends GetSiteInfoOperation>({
-    query = getSiteInfoQuery,
     config,
-    variables,
   }: {
     query?: string
     config?: Partial<ShopifyConfig>
@@ -37,24 +35,15 @@ export default function getSiteInfoOperation({
 
     const categoriesPromise = getCategories(cfg)
     const brandsPromise = getBrands(cfg)
-    /*
-    const { fetch, locale } = cfg
-    const { data } = await fetch<GetSiteInfoQuery, GetSiteInfoQueryVariables>(
-      query,
-      { variables },
-      {
-        ...(locale && {
-          headers: {
-            'Accept-Language': locale,
-          },
-        }),
-      }
-    )
-    */
+
+    const [categories, brands] = await Promise.all([
+      categoriesPromise,
+      brandsPromise,
+    ])
 
     return {
-      categories: await categoriesPromise,
-      brands: await brandsPromise,
+      categories,
+      brands,
     }
   }
 

packages/shopify/src/api/operations/index.ts

@@ -1,7 +0,0 @@
-export { default as getAllPages } from './get-all-pages'
-export { default as getPage } from './get-page'
-export { default as getAllProducts } from './get-all-products'
-export { default as getAllProductPaths } from './get-all-product-paths'
-export { default as getProduct } from './get-product'
-export { default as getSiteInfo } from './get-site-info'
-export { default as login } from './login'

packages/shopify/src/api/operations/login.ts

@@ -1,6 +1,6 @@
 import type { ServerResponse } from 'http'
 import type { OperationContext } from '@vercel/commerce/api/operations'
-import type { LoginOperation } from '../../types/login'
+import type { LoginOperation } from '@vercel/commerce/types/login'
 import type { ShopifyConfig, Provider } from '..'
 import {
   customerAccessTokenCreateMutation,

packages/shopify/src/api/utils/fetch-graphql-api.ts

@@ -35,7 +35,7 @@ const fetchGraphqlApi: GraphQLFetcher = async (
     throw getError(
       [
         {
-          message: `${err} \n Most likely related to an unexpected output. e.g the store might be protected with password or not available.`,
+          message: `${err} \n Most likely related to an unexpected output. E.g: NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN & NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN might be incorect.`,
         },
       ],
       500

packages/shopify/src/auth/use-login.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@vercel/commerce/utils/types'
 import { CommerceError } from '@vercel/commerce/utils/errors'
-import useLogin, { UseLogin } from '@vercel/commerce/auth/use-login'
-import type { LoginHook } from '../types/login'
+import useLogin, { type UseLogin } from '@vercel/commerce/auth/use-login'
+import type { LoginHook } from '@vercel/commerce/types/login'
 import useCustomer from '../customer/use-customer'
 
 import {

packages/shopify/src/auth/use-logout.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@vercel/commerce/utils/types'
 import useLogout, { UseLogout } from '@vercel/commerce/auth/use-logout'
-import type { LogoutHook } from '../types/logout'
+import type { LogoutHook } from '@vercel/commerce/types/logout'
 import useCustomer from '../customer/use-customer'
 import customerAccessTokenDeleteMutation from '../utils/mutations/customer-access-token-delete'
 import { getCustomerToken, setCustomerToken } from '../utils/customer-token'

packages/shopify/src/auth/use-signup.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 import type { MutationHook } from '@vercel/commerce/utils/types'
 import { CommerceError } from '@vercel/commerce/utils/errors'
-import useSignup, { UseSignup } from '@vercel/commerce/auth/use-signup'
-import type { SignupHook } from '../types/signup'
+import useSignup, { type UseSignup } from '@vercel/commerce/auth/use-signup'
+import type { SignupHook } from '@vercel/commerce/types/signup'
 import useCustomer from '../customer/use-customer'
 import { Mutation, MutationCustomerCreateArgs } from '../../schema'
 

packages/shopify/src/cart/use-add-item.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import type { MutationHook } from '@vercel/commerce/utils/types'
 import { CommerceError } from '@vercel/commerce/utils/errors'
 import useAddItem, { UseAddItem } from '@vercel/commerce/cart/use-add-item'
-import type { AddItemHook } from '../types/cart'
+import type { AddItemHook } from '@vercel/commerce/types/cart'
 import useCart from './use-cart'
 
 import {

packages/shopify/src/cart/use-cart.tsx

@@ -1,10 +1,11 @@
-import { useMemo } from 'react'
-import useCommerceCart, { UseCart } from '@vercel/commerce/cart/use-cart'
+import type { SWRHook } from '@vercel/commerce/utils/types'
+import type { GetCartHook } from '@vercel/commerce/types/cart'
+
+import { useMemo } from 'react'
+import useCommerceCart, { type UseCart } from '@vercel/commerce/cart/use-cart'
 
-import { SWRHook } from '@vercel/commerce/utils/types'
 import { checkoutToCart } from '../utils'
 import getCheckoutQuery from '../utils/queries/get-checkout-query'
-import { GetCartHook } from '../types/cart'
 import Cookies from 'js-cookie'
 
 import {

packages/shopify/src/cart/use-remove-item.tsx

@@ -7,7 +7,11 @@ import { ValidationError } from '@vercel/commerce/utils/errors'
 import useRemoveItem, {
   UseRemoveItem,
 } from '@vercel/commerce/cart/use-remove-item'
-import type { Cart, LineItem, RemoveItemHook } from '../types/cart'
+import type {
+  Cart,
+  LineItem,
+  RemoveItemHook,
+} from '@vercel/commerce/types/cart'
 import useCart from './use-cart'
 
 export type RemoveItemFn<T = any> = T extends LineItem

packages/shopify/src/cart/use-update-item.tsx

@@ -1,23 +1,26 @@
-import { useCallback } from 'react'
-import debounce from 'lodash.debounce'
+import type { UpdateItemHook, LineItem } from '@vercel/commerce/types/cart'
+import type {
+  Mutation,
+  MutationCheckoutLineItemsUpdateArgs,
+} from '../../schema'
 import type {
   HookFetcherContext,
   MutationHookContext,
 } from '@vercel/commerce/utils/types'
+
+import { useCallback } from 'react'
+import debounce from 'lodash.debounce'
 import { ValidationError } from '@vercel/commerce/utils/errors'
 import useUpdateItem, {
-  UseUpdateItem,
+  type UseUpdateItem,
 } from '@vercel/commerce/cart/use-update-item'
-
 import useCart from './use-cart'
 import { handler as removeItemHandler } from './use-remove-item'
-import type { UpdateItemHook, LineItem } from '../types/cart'
 import {
   getCheckoutId,
   checkoutLineItemUpdateMutation,
   checkoutToCart,
 } from '../utils'
-import { Mutation, MutationCheckoutLineItemsUpdateArgs } from '../../schema'
 
 export type UpdateItemActionInput<T = any> = T extends LineItem
   ? Partial<UpdateItemHook['actionInput']>

packages/shopify/src/customer/use-customer.tsx

@@ -1,10 +1,10 @@
-import useCustomer, {
-  UseCustomer,
-} from '@vercel/commerce/customer/use-customer'
-import type { CustomerHook } from '../types/customer'
-import { SWRHook } from '@vercel/commerce/utils/types'
+import type { SWRHook } from '@vercel/commerce/utils/types'
+import type { CustomerHook } from '@vercel/commerce/types/customer'
+import type { GetCustomerQuery, GetCustomerQueryVariables } from '../../schema'
 import { getCustomerQuery, getCustomerToken } from '../utils'
-import { GetCustomerQuery, GetCustomerQueryVariables } from '../../schema'
+import useCustomer, {
+  type UseCustomer,
+} from '@vercel/commerce/customer/use-customer'
 
 export default useCustomer as UseCustomer<typeof handler>
 
@@ -14,14 +14,28 @@ export const handler: SWRHook<CustomerHook> = {
   },
   async fetcher({ options, fetch }) {
     const customerAccessToken = getCustomerToken()
+
     if (customerAccessToken) {
-      const data = await fetch<GetCustomerQuery, GetCustomerQueryVariables>({
+      const { customer } = await fetch<
+        GetCustomerQuery,
+        GetCustomerQueryVariables
+      >({
         ...options,
         variables: { customerAccessToken: getCustomerToken() },
       })
-      return data.customer
+
+      if (!customer) {
+        return null
+      }
+
+      return {
+        id: customer.id,
+        firstName: customer.firstName ?? 'N/A',
+        lastName: customer.lastName ?? '',
+        ...(customer.email && { email: customer.email }),
+        ...(customer.phone && { phone: customer.phone }),
+      }
     }
-    return null
   },
   useHook:
     ({ useData }) =>

packages/shopify/src/product/use-search.tsx

@@ -16,7 +16,7 @@ import {
   normalizeProduct,
 } from '../utils'
 
-import type { SearchProductsHook } from '../types/product'
+import type { SearchProductsHook } from '@vercel/commerce/types/product'
 
 export type SearchProductsInput = {
   search?: string

packages/shopify/src/types/cart.ts

@@ -1,32 +0,0 @@
-import * as Core from '@vercel/commerce/types/cart'
-
-export * from '@vercel/commerce/types/cart'
-
-export type ShopifyCart = {}
-
-/**
- * Extend core cart types
- */
-
-export type Cart = Core.Cart & {
-  lineItems: Core.LineItem[]
-  url?: string
-}
-
-export type CartTypes = Core.CartTypes
-
-export type CartHooks = Core.CartHooks<CartTypes>
-
-export type GetCartHook = CartHooks['getCart']
-export type AddItemHook = CartHooks['addItem']
-export type UpdateItemHook = CartHooks['updateItem']
-export type RemoveItemHook = CartHooks['removeItem']
-
-export type CartSchema = Core.CartSchema<CartTypes>
-
-export type CartHandlers = Core.CartHandlers<CartTypes>
-
-export type GetCartHandler = CartHandlers['getCart']
-export type AddItemHandler = CartHandlers['addItem']
-export type UpdateItemHandler = CartHandlers['updateItem']
-export type RemoveItemHandler = CartHandlers['removeItem']

packages/shopify/src/types/checkout.ts

@@ -1 +0,0 @@
-export * from '@vercel/commerce/types/checkout'

packages/shopify/src/types/common.ts

@@ -1 +0,0 @@
-export * from '@vercel/commerce/types/common'

packages/shopify/src/types/customer.ts

@@ -1,5 +0,0 @@
-import * as Core from '@vercel/commerce/types/customer'
-
-export * from '@vercel/commerce/types/customer'
-
-export type CustomerSchema = Core.CustomerSchema

packages/shopify/src/types/index.ts

@@ -1,25 +0,0 @@
-import * as Cart from './cart'
-import * as Checkout from './checkout'
-import * as Common from './common'
-import * as Customer from './customer'
-import * as Login from './login'
-import * as Logout from './logout'
-import * as Page from './page'
-import * as Product from './product'
-import * as Signup from './signup'
-import * as Site from './site'
-import * as Wishlist from './wishlist'
-
-export type {
-  Cart,
-  Checkout,
-  Common,
-  Customer,
-  Login,
-  Logout,
-  Page,
-  Product,
-  Signup,
-  Site,
-  Wishlist,
-}

packages/shopify/src/types/login.ts

@@ -1,8 +0,0 @@
-import * as Core from '@vercel/commerce/types/login'
-import type { CustomerAccessTokenCreateInput } from '../../schema'
-
-export * from '@vercel/commerce/types/login'
-
-export type LoginOperation = Core.LoginOperation & {
-  variables: CustomerAccessTokenCreateInput
-}

packages/shopify/src/types/logout.ts

@@ -1 +0,0 @@
-export * from '@vercel/commerce/types/logout'

packages/shopify/src/types/page.ts

@@ -1,11 +0,0 @@
-import * as Core from '@vercel/commerce/types/page'
-export * from '@vercel/commerce/types/page'
-
-export type Page = Core.Page
-
-export type PageTypes = {
-  page: Page
-}
-
-export type GetAllPagesOperation = Core.GetAllPagesOperation<PageTypes>
-export type GetPageOperation = Core.GetPageOperation<PageTypes>

packages/shopify/src/types/product.ts

@@ -1 +0,0 @@
-export * from '@vercel/commerce/types/product'

packages/shopify/src/types/signup.ts

@@ -1 +0,0 @@
-export * from '@vercel/commerce/types/signup'

packages/shopify/src/types/site.ts

@@ -1 +0,0 @@
-export * from '@vercel/commerce/types/site'

packages/shopify/src/types/wishlist.ts

@@ -1 +0,0 @@
-export * from '@vercel/commerce/types/wishlist'

packages/shopify/src/utils/checkout-to-cart.ts

@@ -1,4 +1,4 @@
-import type { Cart } from '../types/cart'
+import type { Cart } from '@vercel/commerce/types/cart'
 import { CommerceError } from '@vercel/commerce/utils/errors'
 
 import {

packages/shopify/src/utils/get-brands.ts

@@ -5,19 +5,7 @@ import {
 import { ShopifyConfig } from '../api'
 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 getBrands = async (config: ShopifyConfig): Promise<BrandEdge[]> => {
+const getBrands = async (config: ShopifyConfig) => {
   const { data } = await config.fetch<
     GetAllProductVendorsQuery,
     GetAllProductVendorsQueryVariables
@@ -32,11 +20,10 @@ const getBrands = async (config: ShopifyConfig): Promise<BrandEdge[]> => {
   return [...new Set(vendorsStrings)].map((v) => {
     const id = v.replace(/\s+/g, '-').toLowerCase()
     return {
-      node: {
-        entityId: id,
-        name: v,
-        path: `brands/${id}`,
-      },
+      id,
+      name: v,
+      slug: id,
+      path: `/${id}`,
     }
   })
 }

packages/shopify/src/utils/get-categories.ts

@@ -1,6 +1,6 @@
-import type { Category } from '../types/site'
-import { ShopifyConfig } from '../api'
-import { CollectionEdge } from '../../schema'
+import type { Category } from '@vercel/commerce/types/site'
+import type { ShopifyConfig } from '../api'
+import type { CollectionEdge } from '../../schema'
 import { normalizeCategory } from './normalize'
 import getSiteCollectionsQuery from './queries/get-all-collections-query'
 

packages/shopify/src/utils/get-search-variables.ts

@@ -1,5 +1,5 @@
 import getSortVariables from './get-sort-variables'
-import { SearchProductsBody } from '../types/product'
+import { SearchProductsBody } from '@vercel/commerce/types/product'
 
 export const getSearchVariables = ({
   brandId,

packages/shopify/src/utils/normalize.ts

@@ -1,9 +1,9 @@
-import type { Page } from '../types/page'
-import type { Product } from '../types/product'
-import type { Cart, LineItem } from '../types/cart'
-import type { Category } from '../types/site'
+import type { Page } from '@vercel/commerce/types/page'
+import type { Product } from '@vercel/commerce/types/product'
+import type { Cart, LineItem } from '@vercel/commerce/types/cart'
+import type { Category } from '@vercel/commerce/types/site'
 
-import {
+import type {
   Product as ShopifyProduct,
   Checkout,
   CheckoutLineItemEdge,
@@ -16,6 +16,7 @@ import {
   PageEdge,
   Collection,
 } from '../../schema'
+
 import { colorMap } from './colors'
 
 const money = ({ amount, currencyCode }: MoneyV2) => {
@@ -75,7 +76,7 @@ const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
       return {
         id,
         name: title,
-        sku: sku ?? id,
+        sku,
         price: +priceV2.amount,
         listPrice: +compareAtPriceV2?.amount,
         requiresShipping,
@@ -122,7 +123,7 @@ export function normalizeProduct({
           .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 }),
+    description: description || '',
     ...(descriptionHtml && { descriptionHtml }),
     ...rest,
   }
@@ -180,6 +181,7 @@ export const normalizePage = (
   ...page,
   url: `/${locale}/${handle}`,
   name,
+  body: page.body ?? '',
 })
 
 export const normalizePages = (edges: PageEdge[], locale?: string): Page[] =>