Function Vertical Support via search-core/headless upgrade

THIRD-PARTY-NOTICES

@@ -1138,7 +1138,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/search-core@2.6.0-beta.2
+ - @yext/search-core@2.6.0-beta.3
 
 This package contains the following license and notice below:
 
@@ -1182,7 +1182,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/search-headless-react@2.5.0-beta.4
+ - @yext/search-headless-react@2.5.0-beta.5
 
 This package contains the following license and notice below:
 
@@ -1226,7 +1226,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM package may be included in this product:
 
- - @yext/search-headless@2.6.0-beta.4
+ - @yext/search-headless@2.6.0-beta.5
 
 This package contains the following license and notice below:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.7.0-beta.7",
+  "version": "1.7.0-beta.8",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "slapshot@yext.com",
   "license": "BSD-3-Clause",
@@ -85,7 +85,7 @@
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
     "@yext/eslint-config-slapshot": "^0.5.0",
-    "@yext/search-headless-react": "^2.5.0-beta.4",
+    "@yext/search-headless-react": "^2.5.0-beta.5",
     "axe-core": "^4.8.2",
     "axe-playwright": "^1.2.3",
     "babel-jest": "^29.7.0",
@@ -108,7 +108,7 @@
     "util": "^0.12.5"
   },
   "peerDependencies": {
-    "@yext/search-headless-react": "^2.5.0-beta.4",
+    "@yext/search-headless-react": "^2.5.0-beta.5",
     "react": "^16.14 || ^17 || ^18",
     "react-dom": "^16.14 || ^17 || ^18"
   },

test-site/src/App.tsx

@@ -4,6 +4,7 @@ import { PeoplePage } from './pages/PeoplePage';
 import { ProductsPage } from './pages/ProductsPage';
 import { LocationsPage } from './pages/LocationsPage';
 import UniversalPage from './pages/UniversalPage';
+import { FunctionPage } from './pages/FunctionPage';
 import {
   BrowserRouter,
   Route,
@@ -31,6 +32,7 @@ function App() {
               <Route path='people' element={<PeoplePage />} />
               <Route path='products' element={<ProductsPage />} />
               <Route path='locations' element={<LocationsPage />} />
+              <Route path='function' element={<FunctionPage/>} />
             </Routes>
           </BrowserRouter>
         </AnalyticsProvider>
@@ -39,4 +41,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

test-site/src/components/FunctionCard.tsx

@@ -0,0 +1,22 @@
+import { CardProps, useCardAnalyticsCallback, useCardFeedbackCallback } from '@yext/search-ui-react';
+import { useCallback } from 'react';
+
+interface CustomRawDataType {
+  name: string,
+  uppercased_input: string
+}
+
+export function FunctionCard(props: CardProps<CustomRawDataType>): JSX.Element {
+  const { result } = props;
+  const onClickTitle = useCardAnalyticsCallback(result, 'TITLE_CLICK');
+
+  return (
+    <div className='flex flex-col justify-between border rounded-lg mb-4 p-4 shadow-sm'>
+      <p className='text-red-600'>Function Vertical Custom Card</p>
+      <button onClick={onClickTitle}>UpperCased Input: {result.rawData.uppercased_input}</button>
+      <p>Name: {result.rawData.name}</p>
+      <p>Source: {result.source}</p>
+      <p>index: {result.index}</p>
+    </div>
+  );
+}

test-site/src/components/Navbar.tsx

@@ -10,6 +10,8 @@ export function Navbar() {
       <Link className='text-blue-500 hover:underline p-2' to='./products'>Products Page</Link>
       <div className='border-l-2 border-indigo-400 h-6 mt-2'></div>
       <Link className='text-blue-500 hover:underline p-2' to='./locations'>Locations Page</Link>
+      <div className='border-l-2 border-indigo-400 h-6 mt-2'></div>
+      <Link className='text-blue-500 hover:underline p-2' to='./function'>Functions Page</Link>
     </nav>
   );
 }

test-site/src/pages/FunctionPage.tsx

@@ -0,0 +1,32 @@
+import { useLayoutEffect } from 'react';
+import { useSearchActions } from '@yext/search-headless-react';
+import {
+  ResultsCount,
+  SearchBar,
+  VerticalResults,
+  Pagination,
+} from '@yext/search-ui-react';
+import { FunctionCard } from '../components/FunctionCard';
+
+export function FunctionPage() {
+  const searchActions = useSearchActions();
+  useLayoutEffect(() => {
+    searchActions.setVertical('function_vertical');
+    searchActions.executeVerticalQuery();
+  });
+
+  return (
+    <div>
+      <SearchBar />
+      <div className='flex'>
+        <div className='flex-grow'>
+        <ResultsCount />
+        <VerticalResults
+        CardComponent={FunctionCard}
+        />
+        <Pagination />
+        </div>
+      </div>
+    </div>
+  );
+}