Update KMC connection, fix click and update react demo

klevultd · Apr 20, 2022 · e6d66b4 · e6d66b4
1 parent 4ec6c63
commit e6d66b4
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 145 deletions.
diff --git a/examples/react/src/components/product.tsx b/examples/react/src/components/product.tsx
@@ -66,7 +66,9 @@ export function Product(props: {
     <Link
       to={`/products/${p.id}`}
       onClick={(event) => {
-        props.onClick()
+        if (props.onClick) {
+          props.onClick()
+        }
       }}
       css={containerCss}
     >

diff --git a/examples/react/src/components/quicksearch.tsx b/examples/react/src/components/quicksearch.tsx
@@ -1,17 +1,18 @@
 import {
   KlevuDomEvents,
   KlevuFetch,
+  KlevuKMCSettings,
   KlevuLastSearches,
   KlevuResultEvent,
   KlevuTypeOfRecord,
+  personalisation,
   search,
   suggestions,
   trendingProducts,
 } from "@klevu/core"
-import type { KlevuRecord, KlevuLastSearch } from "@klevu/core"
+import type { KlevuRecord, KlevuLastSearch, KMCRootObject } from "@klevu/core"
 import {
   Grid,
-  IconButton,
   InputAdornment,
   Paper,
   Popper,
@@ -20,14 +21,13 @@ import {
 } from "@mui/material"
 import debounce from "lodash.debounce"
 import {
-  bindMenu,
-  bindTrigger,
+  bindPopper,
+  bindFocus,
   usePopupState,
 } from "material-ui-popup-state/hooks"
-import { useNavigate } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router-dom"
 import React, { useEffect, useMemo, useState } from "react"
 import { Product } from "./product"
-import { Close } from "@mui/icons-material"
 import SearchIcon from "@mui/icons-material/Search"
 
 let clickManager: ReturnType<KlevuResultEvent["getSearchClickSendEvent"]>
@@ -44,8 +44,17 @@ export function QuickSearch() {
   const popupState = usePopupState({
     variant: "popper",
     popupId: "searchPopup",
+    disableAutoFocus: true,
   })
 
+  const [kmcSettings, setKmcSettings] = useState<KMCRootObject>()
+
+  let location = useLocation()
+  React.useEffect(() => {
+    popupState.close()
+    setProducts([])
+  }, [location])
+
   const doSearch = async (term: string) => {
     if (term.length < 3) {
       setProducts([])
@@ -54,10 +63,14 @@ export function QuickSearch() {
     }
 
     const result = await KlevuFetch(
-      search(term, {
-        limit: 9,
-        typeOfRecords: [KlevuTypeOfRecord.Product],
-      }),
+      search(
+        term,
+        {
+          limit: 6,
+          typeOfRecords: [KlevuTypeOfRecord.Product],
+        },
+        personalisation()
+      ),
       suggestions(term)
     )
 
@@ -73,8 +86,7 @@ export function QuickSearch() {
   }
 
   const fetchEmptySuggestions = async () => {
-    popupState.open()
-    setLastSearches(KlevuLastSearches.get())
+    handleLastSearchesUpdate()
 
     if (trendProducts.length > 0) {
       return
@@ -91,6 +103,7 @@ export function QuickSearch() {
   const onKeydown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (event.key === "Enter") {
       navigate("/search?q=" + encodeURIComponent(searchValue))
+      popupState.close()
     }
   }
 
@@ -101,20 +114,20 @@ export function QuickSearch() {
 
   const debouncedChangeHandler: any = useMemo(() => debounce(doSearch, 300), [])
 
-  const clickOnSearch = (suggestion: string) => {
-    const raw = suggestion.replace(/<[^>]*>?/gm, "")
-    setSearchValue(raw)
-    doSearch(raw)
+  const fetchKMCSettings = async () => {
+    const settings = await KlevuKMCSettings()
+    setKmcSettings(settings.root)
   }
 
   useEffect(() => {
+    fetchKMCSettings()
     return () => {
       debouncedChangeHandler.cancel()
     }
   }, [])
 
-  const handleLastSearchesUpdate = (event) => {
-    setLastSearches(KlevuLastSearches.get())
+  const handleLastSearchesUpdate = () => {
+    setLastSearches(Array.from(KlevuLastSearches.get()).reverse())
   }
 
   React.useEffect(() => {
@@ -132,6 +145,15 @@ export function QuickSearch() {
     }
   }, [])
 
+  const focusParams = bindFocus(popupState)
+  const params = {
+    ...focusParams,
+    onFocus: (event) => {
+      focusParams.onFocus(event)
+      fetchEmptySuggestions()
+    },
+  }
+
   return (
     <React.Fragment>
       <TextField
@@ -158,10 +180,10 @@ export function QuickSearch() {
             </InputAdornment>
           ),
         }}
-        {...bindTrigger(popupState)}
+        {...params}
       />
       <Popper
-        {...bindMenu(popupState)}
+        {...bindPopper(popupState)}
         popperOptions={{
           placement: "bottom-end",
         }}
@@ -173,22 +195,21 @@ export function QuickSearch() {
           elevation={8}
           style={{
             padding: "12px",
-            width: "780px",
+            width: "792px",
             display: "flex",
             position: "relative",
             marginTop: "16px",
           }}
         >
-          <IconButton
-            style={{ position: "absolute", top: "6px", right: "6px" }}
-            onClick={() => {
-              popupState.close()
-              setSearchValue("")
+          <div
+            style={{
+              width: "160px",
+              flexShrink: 0,
+              borderRight: "1px solid #d1d1d1",
+              paddingRight: "8px",
+              marginRight: "8px",
             }}
           >
-            <Close />
-          </IconButton>
-          <div style={{ width: "160px", flexShrink: 0 }}>
             {sugs.length > 0 ? (
               <React.Fragment>
                 <Typography variant="h6">Suggestions</Typography>
@@ -198,26 +219,43 @@ export function QuickSearch() {
                   {sugs.map((s, i) => (
                     <li
                       key={i}
-                      onClick={() => clickOnSearch(s)}
-                      style={{ padding: 0, cursor: "pointer" }}
+                      style={{ padding: 0 }}
                       dangerouslySetInnerHTML={{ __html: s }}
                     ></li>
                   ))}
                 </ul>
               </React.Fragment>
-            ) : null}
+            ) : (
+              <React.Fragment>
+                {kmcSettings &&
+                  kmcSettings.klevu_webstorePopularTerms.length > 0 && (
+                    <React.Fragment>
+                      <Typography variant="h6">Popular searches</Typography>
+                      <ul
+                        style={{
+                          margin: 0,
+                          listStyleType: "none",
+                          padding: "12px",
+                        }}
+                      >
+                        {kmcSettings.klevu_webstorePopularTerms.map((s, i) => (
+                          <li key={i} style={{ padding: 0 }}>
+                            {s}
+                          </li>
+                        ))}
+                      </ul>
+                    </React.Fragment>
+                  )}
+              </React.Fragment>
+            )}
             {lastSearches.length > 0 ? (
               <React.Fragment>
                 <Typography variant="h6">Last searches</Typography>
                 <ul
                   style={{ margin: 0, listStyleType: "none", padding: "12px" }}
                 >
                   {lastSearches.map((s, i) => (
-                    <li
-                      key={i}
-                      style={{ padding: 0, cursor: "pointer" }}
-                      onClick={() => clickOnSearch(s.term)}
-                    >
+                    <li key={i} style={{ padding: 0 }}>
                       {s.term}
                     </li>
                   ))}
@@ -235,8 +273,7 @@ export function QuickSearch() {
                       <Product
                         product={p}
                         onClick={() => {
-                          clickManager(p.id)
-                          popupState.close()
+                          clickManager(p.id, p.itemGroupId)
                         }}
                       />
                     </Grid>

diff --git a/examples/react/src/index.tsx b/examples/react/src/index.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import { KlevuConfig } from "@klevu/core"
+import { KlevuConfig, KlevuKMCSettings } from "@klevu/core"
 import { App } from "./app"
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import { HomePage } from "./routes/HomePage"
@@ -15,6 +15,8 @@ KlevuConfig.init({
   apiKey: "klevu-164651914788114877",
 })
 
+KlevuKMCSettings()
+
 ReactDOM.render(
   <BrowserRouter>
     <Routes>

diff --git a/examples/react/src/routes/CheckoutPage.tsx b/examples/react/src/routes/CheckoutPage.tsx
@@ -4,6 +4,7 @@ import {
   KlevuFetch,
   KlevuRecord,
   kmcRecommendation,
+  personalisation,
   trendingProducts,
 } from "@klevu/core"
 import { Button, Container, Grid, Typography } from "@mui/material"
@@ -32,7 +33,8 @@ export function CheckoutPage() {
           id: "alsobought",
           cartProductIds: cart.items.map((p) => p.id),
         },
-        fallback(trendingProducts())
+        fallback(trendingProducts()),
+        personalisation()
       )
     )
 

diff --git a/examples/react/src/routes/HomePage.tsx b/examples/react/src/routes/HomePage.tsx
@@ -2,6 +2,7 @@ import {
   KlevuFetch,
   KlevuRecord,
   kmcRecommendation,
+  personalisation,
   sendRecommendationViewEvent,
 } from "@klevu/core"
 import { Container, Typography } from "@mui/material"
@@ -22,7 +23,8 @@ export function HomePage() {
         },
         sendRecommendationViewEvent(
           "Trending recommendations using KMC builder"
-        )
+        ),
+        personalisation()
       )
     )
 

diff --git a/examples/react/src/routes/SearchResultPage.tsx b/examples/react/src/routes/SearchResultPage.tsx
@@ -6,6 +6,9 @@ import {
   KlevuDomEvents,
   FilterManager,
   search,
+  KlevuResultEvent,
+  sendSearchEvent,
+  personalisation
 } from "@klevu/core"
 import type {
   KlevuRecord,
@@ -40,6 +43,7 @@ import FilterIcon from "@mui/icons-material/FilterAlt"
 const drawerWidth = 240
 const manager = new FilterManager()
 let prevRes: KlevuFetchResponse
+let clickManager: ReturnType<KlevuResultEvent["getSearchClickSendEvent"]>
 
 function useQuery() {
   const { search } = useLocation()
@@ -87,7 +91,9 @@ export function SearchResultPage() {
           ],
           filterManager: manager,
         }),
-        applyFilterWithManager(manager)
+        applyFilterWithManager(manager),
+        sendSearchEvent(),
+        personalisation()
       ),
     ]
     const res = await KlevuFetch(...functions)
@@ -98,6 +104,8 @@ export function SearchResultPage() {
       return
     }
 
+    clickManager = searchResult.getSearchClickSendEvent()
+
     setShowMore(Boolean(res.next))
     setOptions(manager.options)
     setSliders(manager.sliders)
@@ -257,7 +265,12 @@ export function SearchResultPage() {
         >
           {products.map((p, i) => (
             <Grid item key={i}>
-              <Product product={p} />
+              <Product
+                product={p}
+                onClick={() => {
+                  clickManager(p.id, p.itemGroupId)
+                }}
+              />
             </Grid>
           ))}
         </Grid>

diff --git a/package-lock.json b/package-lock.json