Revert changes from original project

composable-ui/package.json

@@ -28,9 +28,6 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@hookform/resolvers": "^2.9.7",
-    "@klevu/core": "4.0.1",
-    "@klevu/ui": "^0.10.4",
-    "@klevu/ui-react": "0.10.4",
     "@stripe/react-stripe-js": "^1.16.4",
     "@stripe/stripe-js": "^1.46.0",
     "@tanstack/react-query": "^4.22.0",
@@ -74,6 +71,6 @@
     "jest": "^29.4.0",
     "jest-environment-jsdom": "^29.4.0",
     "tsconfig": "workspace:*",
-    "typescript": "^5.3.2"
+    "typescript": "^4.9.5"
   }
 }

composable-ui/src/components/layout/header.tsx

@@ -10,8 +10,6 @@ import {
   Grid,
   Link,
 } from '@chakra-ui/react'
-import { QuickSearch } from 'components/klevu/klevu'
-
 import { LoginAction } from './login-action'
 import { cmsNavLinks } from './_data'
 import { HamburgerIcon } from '@chakra-ui/icons'
@@ -30,7 +28,7 @@ export const Header = () => {
     <Box as="header" borderBottomWidth="1px" height={'4rem'}>
       <Container maxW="container.xl">
         <Grid
-          templateColumns={{ base: '1fr 2fr 1fr', md: 'repeat(4, 1fr)' }}
+          templateColumns={'repeat(3, 1fr)'}
           justifyContent={'center'}
           height={'4rem'}
         >
@@ -53,7 +51,6 @@ export const Header = () => {
           </Box>
           <Flex
             alignItems={'center'}
-            display={{ base: 'none', md: 'flex' }}
             justifyContent={{ base: 'center', md: 'left' }}
           >
             <Link as={NextLink} href="/">
@@ -79,9 +76,6 @@ export const Header = () => {
               )
             })}
           </Box>
-          <Box display={'flex'} alignItems={'center'} width={'100%'}>
-            <QuickSearch />
-          </Box>
           <Box
             display="flex"
             alignItems={'center'}

composable-ui/src/components/product-listing-page/product-listing-page.tsx

@@ -43,8 +43,6 @@ export const ProductListingPage = ({
   const [productsGridOption, setProductsGridOption] =
     useState<CategoryPageProductGrid>('comfortable')
 
-  return null
-  /*
   return (
     <InstantSearchSSRProvider {...serverState}>
       <InstantSearch searchClient={searchClient} indexName={ALGOLIA_INDEX_NAME}>
@@ -118,5 +116,4 @@ export const ProductListingPage = ({
       </InstantSearch>
     </InstantSearchSSRProvider>
   )
-  */
 }

composable-ui/src/pages/_app.tsx

@@ -10,9 +10,6 @@ import { Composable } from 'components/composable'
 import { Layout } from 'components/layout/layout'
 import { GOOGLE_TAG_MANAGER_ID } from 'utils/constants'
 
-import '@composable/klevu/node_modules/@klevu/ui-react/dist/klevu-ui.css'
-import '@composable/klevu/style.css'
-
 const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
   return (
     <StrictMode>

composable-ui/src/pages/category/[slug].tsx

@@ -1,17 +1,71 @@
-import { GetServerSideProps } from 'next'
+import { GetStaticPaths, GetStaticProps } from 'next'
 import { createServerApp } from 'server/isr/server-app'
-import { KlevuCategoryPage } from '../../components/klevu/klevu'
+import { CategoryPage, CategoryPageProps } from 'components/category-page'
+import { getServerState } from 'react-instantsearch-hooks-server'
+import { renderToString } from 'react-dom/server'
+import { IntlProvider } from 'react-intl'
+import {
+  ALGOLIA_API_SEARCH_KEY,
+  ALGOLIA_APP_ID,
+  ALGOLIA_INDEX_NAME,
+} from '../../utils/constants'
 
-export const getServerSideProps: GetServerSideProps<any> = async (context) => {
+const ALGOLIA_KEYS = [
+  ALGOLIA_APP_ID,
+  ALGOLIA_API_SEARCH_KEY,
+  ALGOLIA_INDEX_NAME,
+]
+
+export const getStaticPaths: GetStaticPaths = async (context) => {
+  const { ssg } = await createServerApp({ context })
+  const categories = await ssg.commerce.getCategories.fetch()
+  const paths =
+    categories?.map((category) => ({ params: { slug: category.slug } })) || []
+  return {
+    paths,
+    fallback: 'blocking',
+  }
+}
+
+export const getStaticProps: GetStaticProps<CategoryPageProps> = async (
+  context
+) => {
   const { ssg } = await createServerApp({ context })
   const slug = `${context?.params?.slug?.toString()}`
+  await ssg.commerce.getCategoryBy.prefetch({ slug })
+
+  const algoliaKeysMissing = ALGOLIA_KEYS.some((key) => !key)
+
+  if (algoliaKeysMissing) {
+    return {
+      props: {
+        trpcState: ssg.dehydrate(),
+        algoliaKeysSet: !algoliaKeysMissing,
+        query: slug,
+      },
+      revalidate: 60,
+    }
+  }
+
+  const intlConfig = await ssg.config.intl.fetch()
+  const messages = intlConfig?.find((el) => el.locale === context.locale)
+
+  const serverState = await getServerState(
+    <IntlProvider locale={context.locale ?? ''} messages={messages?.keys ?? {}}>
+      <CategoryPage query={slug} algoliaKeysSet={!algoliaKeysMissing} />
+    </IntlProvider>,
+    { renderToString }
+  )
 
   return {
     props: {
       trpcState: ssg.dehydrate(),
-      category: slug,
+      algoliaKeysSet: !algoliaKeysMissing,
+      query: slug,
+      serverState,
     },
+    revalidate: 60,
   }
 }
 
-export default KlevuCategoryPage
+export default CategoryPage

composable-ui/src/utils/constants.ts

@@ -31,6 +31,3 @@ export const GOOGLE_TAG_MANAGER_ID =
   process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
 export const PASSWORD_MIN_LENGTH = 8
 export const LAZY_LOAD_BATCH_SIZE = 3
-
-export const KLEVU_API_KEY = process.env.NEXT_PUBLIC_KLEVU_API_KEY ?? ''
-export const KLEVU_API_URL = process.env.NEXT_PUBLIC_KLEVU_API_URL ?? ''

package.json

@@ -18,11 +18,11 @@
     "ts": "turbo run ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
+    "@babel/core": "^7.0.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.5.0",
-    "prettier": "^2.8.8",
-    "turbo": "^1.10.16"
+    "lint-staged": "^12.4.1",
+    "prettier": "^2.8.3",
+    "turbo": "^1.7.0"
   },
   "engines": {
     "npm": ">=7.0.0",