Improved Categories (#339)

* Improved Categories

* Improved Categories

* Improved Categories

* Improved Categories

* Improved Categories

* Improved Categories

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

@@ -3,6 +3,8 @@ import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
 import filterEdges from '../api/utils/filter-edges'
 import { BigcommerceConfig, getConfig } from '../api'
 import { categoryTreeItemFragment } from '../api/fragments/category-tree'
+import { Category } from '@commerce/types'
+import getSlug from '@lib/get-slug'
 
 // Get 3 levels of categories
 export const getSiteInfoQuery = /* GraphQL */ `
@@ -56,7 +58,7 @@ export type Brands = BrandEdge[]
 
 export type GetSiteInfoResult<
   T extends { categories: any[]; brands: any[] } = {
-    categories: CategoriesTree
+    categories: Category[]
     brands: Brands
   }
 > = T
@@ -68,7 +70,7 @@ async function getSiteInfo(opts?: {
 }): Promise<GetSiteInfoResult>
 
 async function getSiteInfo<
-  T extends { categories: any[]; brands: any[] },
+  T extends { categories: Category[]; brands: any[] },
   V = any
 >(opts: {
   query: string
@@ -94,11 +96,20 @@ async function getSiteInfo({
     query,
     { variables }
   )
-  const categories = data.site?.categoryTree
+
+  let categories = data!.site!.categoryTree?.map(
+    ({ entityId, name, path }: any) => ({
+      id: `${entityId}`,
+      name,
+      slug: getSlug(path),
+      path,
+    })
+  )
+
   const brands = data.site?.brands?.edges
 
   return {
-    categories: (categories as RecursiveRequired<typeof categories>) ?? [],
+    categories: categories ?? [],
     brands: filterEdges(brands as RecursiveRequired<typeof brands>),
   }
 }

framework/bigcommerce/product/use-search.tsx

@@ -6,7 +6,7 @@ export default useSearch as UseSearch<typeof handler>
 
 export type SearchProductsInput = {
   search?: string
-  categoryId?: number
+  categoryId?: number | string
   brandId?: number
   sort?: string
 }

framework/commerce/types.ts

@@ -151,6 +151,15 @@ export type RemoveCartItemHandlerBody = Partial<RemoveCartItemBody> & {
   cartId?: string
 }
 
+export type Category = {
+  id: string
+  name: string
+  slug: string
+  path: string
+}
+
+export type Page = any
+
 /**
  * Temporal types
  */

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

@@ -1,7 +1,7 @@
-import getCategories, { Category } from '../utils/get-categories'
-import getVendors, { Brands } from '../utils/get-vendors'
-
+import { Category } from '@commerce/types'
 import { getConfig, ShopifyConfig } from '../api'
+import getCategories from '../utils/get-categories'
+import getVendors, { Brands } from '../utils/get-vendors'
 
 export type GetSiteInfoResult<
   T extends { categories: any[]; brands: any[] } = {

framework/shopify/utils/get-categories.ts

@@ -1,12 +1,7 @@
 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
-}
+import { Category } from '@commerce/types'
 
 const getCategories = async (config: ShopifyConfig): Promise<Category[]> => {
   const { data } = await config.fetch(getSiteCollectionsQuery, {
@@ -17,9 +12,10 @@ const getCategories = async (config: ShopifyConfig): Promise<Category[]> => {
 
   return (
     data.collections?.edges?.map(
-      ({ node: { id: entityId, title: name, handle } }: CollectionEdge) => ({
-        entityId,
+      ({ node: { id, title: name, handle } }: CollectionEdge) => ({
+        id,
         name,
+        slug: handle,
         path: `/${handle}`,
       })
     ) ?? []

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

@@ -1,6 +1,6 @@
-import getCategories, { Category } from '../utils/get-categories'
+import getCategories from '../utils/get-categories'
 import getVendors, { Brands } from '../utils/get-vendors'
-
+import { Category } from '@commerce/types'
 import { getConfig, SwellConfig } from '../api'
 
 export type GetSiteInfoResult<

framework/swell/utils/get-categories.ts

@@ -1,17 +1,13 @@
 import { SwellConfig } from '../api'
-
-export type Category = {
-  entityId: string
-  name: string
-  path: string
-}
+import { Category } from '@commerce/types'
 
 const getCategories = async (config: SwellConfig): Promise<Category[]> => {
   const data = await config.fetch('categories', 'get')
   return (
-    data.results.map(({ id: entityId, name, slug }: any) => ({
-      entityId,
+    data.results.map(({ id, name, slug }: any) => ({
+      id,
       name,
+      slug,
       path: `/${slug}`,
     })) ?? []
   )

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

@@ -2,13 +2,7 @@ import { getConfig, VendureConfig } from '../api'
 import { GetCollectionsQuery } from '../schema'
 import { arrayToTree } from '../lib/array-to-tree'
 import { getCollectionsQuery } from '../lib/queries/get-collections-query'
-
-export type Category = {
-  entityId: string
-  name: string
-  path: string
-  productCount: number
-}
+import { Category } from '@commerce/types'
 
 export type GetSiteInfoResult<
   T extends { categories: any[]; brands: any[] } = {