DirectAnswer Component

- Added DirectAnswer component to display featured snippet and field value direct answer in universal and vertical search page.

J=SLAP-1725
TEST=manual

search for 'bryan phone number' and 'where/who is joe exotic' and see that both snippet and filterValue direct answer appears in universal and vertical page.

sample-app/src/components/DirectAnswer.tsx

@@ -0,0 +1,57 @@
+import { useAnswersState } from "@yext/answers-headless-react";
+import { FeaturedSnippetDirectAnswer, FieldValueDirectAnswer } from '@yext/answers-headless';
+import renderWithHighlighting from './utils/renderWithHighlighting';
+import classNames from "classnames";
+import '../sass/DirectAnswer.scss';
+
+interface DirectAnswerProps {
+  cssClasses?: {
+    container?: string,
+    title?: string,
+    content?: string,
+    description?: string
+  }
+}
+
+const defaultCSSClasses = {
+  container: 'DirectAnswer',
+  title: 'DirectAnswer__title',
+  content: 'DirectAnswer__content',
+  description: 'DirectAnswer__contentDescription'
+};
+
+function isFeaturedSnippetDirectAnswer(
+  answer: FeaturedSnippetDirectAnswer | FieldValueDirectAnswer
+): answer is FeaturedSnippetDirectAnswer {
+  return 'snippet' in answer;
+}
+
+export default function DirectAnswer(props: DirectAnswerProps): JSX.Element | null {
+  const directAnswerResult = useAnswersState(state => state.directAnswer.result);
+  const isLoading = useAnswersState(state => state.searchStatus.isLoading);
+  if (!directAnswerResult) {
+    return null;
+  }
+  const { cssClasses:customCssClasses } = props;
+  const cssClasses = Object.assign(defaultCSSClasses, customCssClasses);
+  const containerCssClasses = classNames(cssClasses.container, { [`${cssClasses.container}--loading`]: isLoading });
+
+  return (
+    <div className={containerCssClasses}>
+      <div className={cssClasses.title}>
+        {isFeaturedSnippetDirectAnswer(directAnswerResult)
+          ? directAnswerResult.value
+          : `${directAnswerResult.entityName} / ${directAnswerResult.fieldName}`}
+      </div>
+      <div className={cssClasses.content}>
+        <div className={cssClasses.description}>
+          {isFeaturedSnippetDirectAnswer(directAnswerResult) 
+            ? renderWithHighlighting(directAnswerResult.snippet)
+            : directAnswerResult.value}
+        </div>
+        {directAnswerResult.relatedResult.link 
+          && <a href={directAnswerResult.relatedResult.link}>View More</a>}
+      </div>
+    </div>
+  )
+}

sample-app/src/pages/UniversalSearchPage.tsx

@@ -1,4 +1,5 @@
 import UniversalResults from '../components/UniversalResults';
+import DirectAnswer from '../components/DirectAnswer';
 import { useLayoutEffect } from 'react';
 import { useAnswersActions } from '@yext/answers-headless-react';
 import { SearchIntent } from '@yext/answers-headless';
@@ -36,6 +37,7 @@ export default function UniversalSearchPage(props: { universalResultsConfig: Uni
 
   return (
     <div className='UniversalSearchPage'>
+      <DirectAnswer />
       <UniversalResults
         appliedFiltersConfig={universalResultsFilterConfig}
         verticalConfigs={universalResultsConfig}

sample-app/src/pages/VerticalSearchPage.tsx

@@ -1,6 +1,7 @@
 import ResultsCount from '../components/ResultsCount';
 import AlternativeVerticals from '../components/AlternativeVerticals';
 import DecoratedAppliedFilters from '../components/DecoratedAppliedFilters';
+import DirectAnswer from '../components/DirectAnswer';
 import StaticFilters from '../components/StaticFilters';
 import VerticalResults from '../components/VerticalResults';
 import SpellCheck from '../components/SpellCheck';
@@ -108,6 +109,7 @@ export default function VerticalSearchPage(props: {
         />
       </div>
       <div className='end'>
+        <DirectAnswer />
         <ResultsCount />
         <DecoratedAppliedFilters
           showFieldNames={true}

sample-app/src/sass/DirectAnswer.scss

@@ -0,0 +1,9 @@
+.DirectAnswer {
+
+  border: 1px solid #dcdcdc;
+  padding: 10px;
+
+  &--loading {
+    opacity: 0.5;
+  }
+}