feat: enable prequery suggestions only for variant group (#377)

openedx · Mar 5, 2024 · fbee42a · fbee42a
1 parent 45d9db9
commit fbee42a
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 25 deletions.
diff --git a/packages/catalog-search/src/PrequerySearchSuggestionItem.jsx b/packages/catalog-search/src/PrequerySearchSuggestionItem.jsx
@@ -4,13 +4,13 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 const PrequerySearchSuggestionItem = ({
-  url, hit, optimizelyPrequerySuggestionClickHandler,
+  url, hit, optimizelySuggestionClickHandler,
 }) => (
   <Link
     to={url}
     key={hit.title}
     className="prequery-item pr-4 d-flex flex-column"
-    onClick={() => optimizelyPrequerySuggestionClickHandler(hit.key)}
+    onClick={() => optimizelySuggestionClickHandler(hit.key)}
   >
     <div className="d-flex align-items-center justify-content-start">
       <Image className="prequery-image mr-2" src={hit.card_image_url} />
@@ -43,7 +43,7 @@ PrequerySearchSuggestionItem.propTypes = {
     ),
     learning_type: PropTypes.string,
   }).isRequired,
-  optimizelyPrequerySuggestionClickHandler: PropTypes.func.isRequired,
+  optimizelySuggestionClickHandler: PropTypes.func.isRequired,
 };
 
 export default PrequerySearchSuggestionItem;
diff --git a/packages/catalog-search/src/SearchBox.jsx b/packages/catalog-search/src/SearchBox.jsx
@@ -45,7 +45,7 @@ export const SearchBoxBase = ({
   suggestionSubmitOverride,
   disableSuggestionRedirect,
   isPreQueryEnabled,
-  optimizelyPrequerySuggestionClickHandler,
+  optimizelySuggestionClickHandler,
 }) => {
   const { dispatch, trackingName } = useContext(SearchContext);
 
@@ -190,7 +190,7 @@ export const SearchBoxBase = ({
           handleSubmit={() => handleSubmit(searchQuery)}
           handleSuggestionClickSubmit={hit => handleSuggestionSubmit(hit)}
           disableSuggestionRedirect={disableSuggestionRedirect}
-          optimizelyPrequerySuggestionClickHandler={optimizelyPrequerySuggestionClickHandler}
+          optimizelySuggestionClickHandler={optimizelySuggestionClickHandler}
         />
       )}
     </div>
@@ -209,7 +209,7 @@ SearchBoxBase.propTypes = {
   suggestionSubmitOverride: PropTypes.func,
   disableSuggestionRedirect: PropTypes.bool,
   isPreQueryEnabled: PropTypes.bool,
-  optimizelyPrequerySuggestionClickHandler: PropTypes.func,
+  optimizelySuggestionClickHandler: PropTypes.func,
 };
 
 SearchBoxBase.defaultProps = {
@@ -224,7 +224,7 @@ SearchBoxBase.defaultProps = {
   suggestionSubmitOverride: undefined,
   disableSuggestionRedirect: false,
   isPreQueryEnabled: false,
-  optimizelyPrequerySuggestionClickHandler: undefined,
+  optimizelySuggestionClickHandler: undefined,
 };
 
 export default connectSearchBox(SearchBoxBase);
diff --git a/packages/catalog-search/src/SearchHeader.jsx b/packages/catalog-search/src/SearchHeader.jsx
@@ -21,9 +21,10 @@ const SearchHeader = ({
   index,
   filters,
   suggestionSubmitOverride,
-  enterpriseConfig: { slug, enablePathways, enterpriseFeatures },
+  enterpriseConfig: { slug, enablePathways },
   disableSuggestionRedirect,
-  optimizelyPrequerySuggestionClickHandler,
+  optimizelySuggestionClickHandler,
+  isPreQueryEnabled,
 }) => {
   const { refinements } = useContext(SearchContext);
   let searchQueryFromRefinements;
@@ -58,8 +59,8 @@ const SearchHeader = ({
               enterpriseSlug={slug}
               suggestionSubmitOverride={suggestionSubmitOverride}
               disableSuggestionRedirect={disableSuggestionRedirect}
-              isPreQueryEnabled={enterpriseFeatures.featurePrequerySearchSuggestions}
-              optimizelyPrequerySuggestionClickHandler={optimizelyPrequerySuggestionClickHandler}
+              isPreQueryEnabled={isPreQueryEnabled}
+              optimizelySuggestionClickHandler={optimizelySuggestionClickHandler}
             />
           </Col>
           <Col
@@ -85,7 +86,8 @@ SearchHeader.defaultProps = {
   suggestionSubmitOverride: undefined,
   disableSuggestionRedirect: false,
   index: undefined,
-  optimizelyPrequerySuggestionClickHandler: undefined,
+  optimizelySuggestionClickHandler: undefined,
+  isPreQueryEnabled: false,
 };
 
 SearchHeader.propTypes = {
@@ -106,7 +108,8 @@ SearchHeader.propTypes = {
   ),
   suggestionSubmitOverride: PropTypes.func,
   disableSuggestionRedirect: PropTypes.bool,
-  optimizelyPrequerySuggestionClickHandler: PropTypes.func,
+  optimizelySuggestionClickHandler: PropTypes.func,
+  isPreQueryEnabled: PropTypes.bool,
 };
 
 export default SearchHeader;
diff --git a/packages/catalog-search/src/SearchSuggestionItem.jsx b/packages/catalog-search/src/SearchSuggestionItem.jsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 const SearchSuggestionItem = ({
-  url, suggestionItemHandler, hit, disableSuggestionRedirect,
+  url, suggestionItemHandler, hit, disableSuggestionRedirect, optimizelySuggestionClickHandler,
 }) => {
   const authoringOrganization = hit.key && hit.key.split('+')[0];
   // If the disable redirect bool is provided, prevent the redirect from happening and instead call the provided submit
@@ -13,6 +13,7 @@ const SearchSuggestionItem = ({
       e.preventDefault();
       suggestionItemHandler(hit);
     }
+    optimizelySuggestionClickHandler(hit.key || hit.course_keys);
   };
   return (
     <Link to={url} key={hit.title} className="suggestion-item" onClick={handleLinkDisable}>
@@ -43,6 +44,7 @@ SearchSuggestionItem.propTypes = {
   suggestionItemHandler: PropTypes.func,
   hit: PropTypes.shape({
     key: PropTypes.string,
+    course_keys: PropTypes.arrayOf(PropTypes.string),
     title: PropTypes.string,
     program_type: PropTypes.string,
     _highlightResult: PropTypes.shape({ title: PropTypes.shape({ value: PropTypes.string }) }),
@@ -55,10 +57,12 @@ SearchSuggestionItem.propTypes = {
     learning_type: PropTypes.string,
   }).isRequired,
   disableSuggestionRedirect: PropTypes.bool.isRequired,
+  optimizelySuggestionClickHandler: PropTypes.func,
 };
 
 SearchSuggestionItem.defaultProps = {
   suggestionItemHandler: undefined,
+  optimizelySuggestionClickHandler: undefined,
 };
 
 export default SearchSuggestionItem;
diff --git a/packages/catalog-search/src/SearchSuggestions.jsx b/packages/catalog-search/src/SearchSuggestions.jsx
@@ -16,7 +16,7 @@ const SearchSuggestions = ({
   handleSubmit,
   handleSuggestionClickSubmit,
   disableSuggestionRedirect,
-  optimizelyPrequerySuggestionClickHandler,
+  optimizelySuggestionClickHandler,
 }) => {
   const getLinkToCourse = (course) => {
     const { learning_type: learningType } = course;
@@ -63,10 +63,10 @@ const SearchSuggestions = ({
                 };
                 return (
                   <PrequerySearchSuggestionItem
-                    key={hit.key}
+                    key={hit.title}
                     url={getUrl(hit)}
                     hit={hit}
-                    optimizelyPrequerySuggestionClickHandler={optimizelyPrequerySuggestionClickHandler}
+                    optimizelySuggestionClickHandler={optimizelySuggestionClickHandler}
                   />
                 );
               })
@@ -87,6 +87,7 @@ const SearchSuggestions = ({
                   hit={hit}
                   disableSuggestionRedirect={disableSuggestionRedirect}
                   suggestionItemHandler={handleSuggestionClickSubmit}
+                  optimizelySuggestionClickHandler={optimizelySuggestionClickHandler}
                 />
               ))
           }
@@ -106,6 +107,7 @@ const SearchSuggestions = ({
                   hit={hit}
                   disableSuggestionRedirect={disableSuggestionRedirect}
                   suggestionItemHandler={handleSuggestionClickSubmit}
+                  optimizelySuggestionClickHandler={optimizelySuggestionClickHandler}
                 />
               ))
           }
@@ -125,6 +127,7 @@ const SearchSuggestions = ({
                   hit={hit}
                   disableSuggestionRedirect={disableSuggestionRedirect}
                   suggestionItemHandler={handleSuggestionClickSubmit}
+                  optimizelySuggestionClickHandler={optimizelySuggestionClickHandler}
                 />
               ))
           }
@@ -148,7 +151,7 @@ SearchSuggestions.propTypes = {
   handleSuggestionClickSubmit: PropTypes.func,
   disableSuggestionRedirect: PropTypes.bool,
   preQueryHits: PropTypes.arrayOf(PropTypes.shape()),
-  optimizelyPrequerySuggestionClickHandler: PropTypes.func,
+  optimizelySuggestionClickHandler: PropTypes.func,
 };
 
 SearchSuggestions.defaultProps = {
@@ -157,7 +160,7 @@ SearchSuggestions.defaultProps = {
   handleSuggestionClickSubmit: undefined,
   disableSuggestionRedirect: false,
   preQueryHits: undefined,
-  optimizelyPrequerySuggestionClickHandler: undefined,
+  optimizelySuggestionClickHandler: undefined,
 };
 
 export default SearchSuggestions;
diff --git a/packages/catalog-search/src/tests/PrequerySearchSuggestionItem.test.jsx b/packages/catalog-search/src/tests/PrequerySearchSuggestionItem.test.jsx
@@ -9,7 +9,7 @@ describe('<PrequerySearchSuggestionItem />', () => {
   test('sends optimizely event on prequery click', () => {
     const mockData = {
       url: '/test-enterprise/course/edX+courseX',
-      optimizelyPrequerySuggestionClickHandler: jest.fn(),
+      optimizelySuggestionClickHandler: jest.fn(),
       hit: {
         partners: [{
           name: 'edX',
@@ -25,12 +25,12 @@ describe('<PrequerySearchSuggestionItem />', () => {
 
     renderWithRouter(<PrequerySearchSuggestionItem
       url={mockData.url}
-      optimizelyPrequerySuggestionClickHandler={mockData.optimizelyPrequerySuggestionClickHandler}
+      optimizelySuggestionClickHandler={mockData.optimizelySuggestionClickHandler}
       hit={mockData.hit}
     />);
     expect(screen.getByRole('link', { name: 'basket weaving edX | course' }))
       .toHaveAttribute('href', '/test-enterprise/course/edX+courseX');
     userEvent.click(screen.getByText('basket weaving'));
-    expect(mockData.optimizelyPrequerySuggestionClickHandler.mock.calls.length).toBe(1);
+    expect(mockData.optimizelySuggestionClickHandler.mock.calls.length).toBe(1);
   });
 });
diff --git a/packages/catalog-search/src/tests/SearchBox.test.jsx b/packages/catalog-search/src/tests/SearchBox.test.jsx
@@ -131,7 +131,7 @@ describe('<SearchBox />', () => {
   });
   test('search box renders search suggestion and can override redirect', async () => {
     const suggestionSubmitOverride = jest.fn();
-
+    const optimizelySuggestionClickHandler = jest.fn();
     SearchBoxBase.handleSuggestionSubmit = jest.fn();
     const hits = [
       { learning_type: 'course', _highlightResult: { title: { value: 'test-title' } } },
@@ -150,6 +150,7 @@ describe('<SearchBox />', () => {
         index={index}
         suggestionSubmitOverride={suggestionSubmitOverride}
         disableSuggestionRedirect
+        optimizelySuggestionClickHandler={optimizelySuggestionClickHandler}
       />,
     );
 
@@ -158,7 +159,7 @@ describe('<SearchBox />', () => {
     await waitFor(() => expect(screen.queryByTestId('suggestions')).not.toBeNull());
     await waitFor(() => expect(screen.getByText('test-title')).toBeInTheDocument());
     userEvent.click(screen.getByText('test-title'));
-
+    expect(optimizelySuggestionClickHandler).toHaveBeenCalled();
     expect(suggestionSubmitOverride).toHaveBeenCalledWith(
       { learning_type: 'course', _highlightResult: { title: { value: 'test-title' } } },
     );

diff --git a/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx b/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx
@@ -17,6 +17,7 @@ describe('<SeachSuggestionItem />', () => {
           title: 'test-course',
           _highlightResult: { title: { value: '<em>course</em> <em>catalog</em>' } },
         },
+        optimizelySuggestionClickHandler: jest.fn(),
       },
     };
 
@@ -25,6 +26,7 @@ describe('<SeachSuggestionItem />', () => {
       suggestionItemHandler={mockData.course.suggestionItemHandler}
       hit={mockData.course.hit}
       disableSuggestionRedirect={mockData.course.disableSuggestionRedirect}
+      optimizelySuggestionClickHandler={mockData.optimizelySuggestionClickHandler}
     />);
     expect(screen.getByRole('link', { name: 'course catalog edX' })).not.toBeNull();
     expect(screen.getByText('course')).not.toBeNull();
@@ -46,13 +48,15 @@ describe('<SeachSuggestionItem />', () => {
           _highlightResult: { title: { value: '<em>program</em> <em>catalog</em>' } },
         },
       },
+      optimizelySuggestionClickHandler: jest.fn(),
     };
 
     renderWithRouter(<SearchSuggestionItem
       url={mockData.program.url}
       suggestionItemHandler={mockData.program.suggestionItemHandler}
       hit={mockData.program.hit}
       disableSuggestionRedirect={mockData.program.disableSuggestionRedirect}
+      optimizelySuggestionClickHandler={mockData.optimizelySuggestionClickHandler}
     />);
     expect(screen.getByRole('link', { name: 'program catalog edX Professional Program' })).not.toBeNull();
     expect(screen.getByText('program')).not.toBeNull();
@@ -75,16 +79,19 @@ describe('<SeachSuggestionItem />', () => {
           _highlightResult: { title: { value: '<em>program</em> <em>catalog</em>' } },
         },
       },
+      optimizelySuggestionClickHandler: jest.fn(),
     };
 
     const { container } = renderWithRouter(<SearchSuggestionItem
       url={mockData.program.url}
       suggestionItemHandler={mockData.program.suggestionItemHandler}
       hit={mockData.program.hit}
       disableSuggestionRedirect={mockData.program.disableSuggestionRedirect}
+      optimizelySuggestionClickHandler={mockData.optimizelySuggestionClickHandler}
     />);
     userEvent.click(container.getElementsByClassName('suggestion-item')[0]);
     expect(window.location.pathname).toBe(mockData.program.url);
+    expect(mockData.optimizelySuggestionClickHandler.mock.calls.length).toBe(1);
   });
 
   test('fires callback on click if disableSuggestionRedirect is true', () => {
@@ -101,15 +108,18 @@ describe('<SeachSuggestionItem />', () => {
           _highlightResult: { title: { value: '<em>program</em> <em>catalog</em>' } },
         },
       },
+      optimizelySuggestionClickHandler: jest.fn(),
     };
 
     const { container } = renderWithRouter(<SearchSuggestionItem
       url={mockData.program.url}
       suggestionItemHandler={mockData.program.suggestionItemHandler}
       hit={mockData.program.hit}
       disableSuggestionRedirect={mockData.program.disableSuggestionRedirect}
+      optimizelySuggestionClickHandler={mockData.optimizelySuggestionClickHandler}
     />);
     userEvent.click(container.getElementsByClassName('suggestion-item')[0]);
     expect(mockData.program.suggestionItemHandler).toHaveBeenCalledWith(mockData.program.hit);
+    expect(mockData.optimizelySuggestionClickHandler.mock.calls.length).toBe(1);
   });
 });