[CI 3213] Create zero results page (#70)

* create zero results page

* lint

* code review changes

* lint

* import fix

* lint fix

Author: VincentGalloro

src/components/SearchResults/ZeroResults.css

@@ -0,0 +1,11 @@
+.cio-zero-results-header {
+    font-weight: 700;
+    font-size: 20px;
+}
+
+.cio-zero-results-option-list {
+    font-weight: 400;
+    font-size: 16px;
+    padding-left: 18px;
+    padding-top: 6px;
+}

src/components/SearchResults/ZeroResults.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import useRequestConfigs from '../../hooks/useRequestConfigs';
+import './ZeroResults.css';
+
+/**
+ * Renders the 'no results' component if search results returns no items.
+ *
+ * @component
+ * @returns {JSX.Element} The 'no results' component
+ */
+export default function ZeroResults() {
+  const config = useRequestConfigs();
+  const { query } = config.requestConfigs;
+
+  return (
+    <>
+      <div className='cio-zero-results-header'>Sorry, we didn’t find: “{query}”</div>
+      <ul className='cio-zero-results-option-list'>
+        <li>Check for typos</li>
+        <li>Use fewer keywords</li>
+        <li>Broaden your search terms</li>
+      </ul>
+    </>
+  );
+}

src/components/SearchResults/index.tsx

@@ -4,6 +4,7 @@ import { IncludeRenderProps, PlpSearchRedirectResponse, PlpSearchResponse } from
 import ProductCard from '../ProductCard';
 import { useCioPlpContext } from '../../hooks/useCioPlpContext';
 import '../../styles.css';
+import ZeroResults from './ZeroResults';
 
 /**
  * Props for the SearchResults component.
@@ -55,18 +56,18 @@ export default function SearchResults(props: SearchResultsWithRenderProps = {})
         children({ status, data, pagination, refetch })
       ) : (
         <>
-          <div>Search Results</div>
-          <>
-            {data.response?.results?.length ? (
+          {data.response?.results?.length ? (
+            <>
+              <div>Search Results</div>
               <div className='cio-results data-results-search' data-cnstrc-search>
                 {data.response?.results.map((item) => (
                   <ProductCard item={item} key={item.itemId} />
                 ))}
               </div>
-            ) : (
-              "Can't find matching items. Please try something else"
-            )}
-          </>
+            </>
+          ) : (
+            <ZeroResults />
+          )}
         </>
       )}
     </>

src/stories/components/SearchResults/SearchResults.stories.tsx

@@ -38,3 +38,23 @@ export const Primary: Story = {
     },
   ],
 };
+
+export const ZeroResults: Story = {
+  render: (args) => (
+    <CioPlp apiKey={DEMO_API_KEY}>
+      <div>Example Url: https://www.example.com?q=cvwdacoknqeauosd1</div>
+      <br />
+      <SearchResults {...args} />
+    </CioPlp>
+  ),
+  decorators: [
+    (Story) => {
+      const url = new URL(window.location as any);
+      /* cspell:disable-next-line */
+      url.searchParams.set('q', 'cvwdacoknqeauosd1');
+      window.history.pushState({}, '', url);
+
+      return <Story />;
+    },
+  ],
+};