feat: non algolia search

package.json

@@ -23,7 +23,6 @@
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@types/react-stripe-elements": "^6.0.6",
-    "algoliasearch": "^4.14.2",
     "braintree-web": "^3.87.0",
     "braintree-web-drop-in": "^1.33.4",
     "clsx": "^1.2.1",
@@ -37,8 +36,6 @@
     "react": "^18.2.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-instantsearch-hooks-server": "^6.32.0",
-    "react-instantsearch-hooks-web": "^6.32.0",
     "rxjs": "^7.5.7",
     "yup": "^1.0.0-beta.7",
     "zlib": "^1.0.5"

src/components/product/Price.tsx

@@ -9,6 +9,7 @@ interface IPriceProps {
 const Price = ({ price, currency, size = "2xl" }: IPriceProps): JSX.Element => {
   return (
     <Text
+      as="span"
       color={useColorModeValue("gray.900", "gray.400")}
       fontWeight={300}
       marginTop="15px"

src/components/product/StrikePrice.tsx

@@ -8,6 +8,7 @@ interface IPrice {
 const StrikePrice = ({ price, currency }: IPrice): JSX.Element => {
   return (
     <Text
+      as="span"
       color={useColorModeValue("red.500", "red.200")}
       fontWeight={300}
       marginTop="15px"

src/components/search/Hit.tsx

@@ -1,4 +1,4 @@
-import { SearchHit } from "./SearchHit";
+import { ProductSearchResultItems } from "./search-hit-types";
 import {
   Button,
   Center,
@@ -19,7 +19,11 @@ import StrikePrice from "../product/StrikePrice";
 import { useDisclosure } from "@chakra-ui/react";
 import { ProductModalContainer } from "../product-modal/ProductModalContainer";
 
-export default function HitComponent({ hit }: { hit: SearchHit }): JSX.Element {
+export default function HitComponent({
+  hit,
+}: {
+  hit: ProductSearchResultItems;
+}): JSX.Element {
   const { ep_price, ep_name, objectID, ep_main_image_url, ep_description } =
     hit;
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -64,21 +68,24 @@ export default function HitComponent({ hit }: { hit: SearchHit }): JSX.Element {
         >
           {ep_description}
         </Text>
-        <Text fontSize="md" fontWeight="semibold" mt="1">
-          {ep_price && (
-            <Flex alignItems="center">
-              <Price price={ep_price["USD"].formatted_price} currency="USD" />
-              {ep_price["USD"].sale_prices && (
-                <StrikePrice
-                  price={
-                    ep_price["USD"].sale_prices.original_price.formatted_price
-                  }
-                  currency="USD"
-                />
-              )}
-            </Flex>
-          )}
-        </Text>
+        <Flex alignItems="center">
+          <Text fontSize="md" fontWeight="semibold" mt="1">
+            {ep_price && (
+              <Price
+                price={ep_price["USD"]?.formatted_price || ""}
+                currency="USD"
+              />
+            )}
+            {ep_price["USD"].sale_prices && (
+              <StrikePrice
+                price={
+                  ep_price["USD"].sale_prices.original_price.formatted_price
+                }
+                currency="USD"
+              />
+            )}
+          </Text>
+        </Flex>
         <Button
           rounded="md"
           w="full"

src/components/search/Hits.tsx

@@ -1,12 +1,13 @@
 import { Grid, GridItem } from "@chakra-ui/react";
-import { useHits } from "react-instantsearch-hooks-web";
-import { SearchHit } from "./SearchHit";
 import NoResults from "./NoResults";
 import HitComponent from "./Hit";
+import { ProductSearchResultItems } from "./search-hit-types";
 
-export default function Hits(): JSX.Element {
-  const { hits } = useHits<SearchHit>();
+interface IHitsProps {
+  hits: ProductSearchResultItems[];
+}
 
+export default function Hits({ hits }: IHitsProps): JSX.Element {
   if (hits.length) {
     return (
       <Grid

src/components/search/HitsProvider.tsx

@@ -0,0 +1,10 @@
+import Hits from "./Hits";
+import { ProductSearchResultItems } from "./search-hit-types";
+
+export interface IHitsProps {
+  hits?: ProductSearchResultItems[];
+}
+
+export default function HitsProvider({ hits = [] }: IHitsProps) {
+  return <Hits hits={hits} />;
+}

src/components/search/MobileFilters.tsx

@@ -7,46 +7,13 @@ import {
   DrawerContent,
   DrawerHeader,
   DrawerOverlay,
-  Heading,
   useDisclosure,
 } from "@chakra-ui/react";
-import CustomHierarchicalMenu from "./CustomHierarchicalMenu";
-import { hierarchicalAttributes } from "../../lib/hierarchical-attributes";
-import { BreadcrumbLookup } from "../../lib/types/breadcrumb-lookup";
-import {
-  InstantSearch,
-  usePagination,
-  useSearchBox,
-  useSortBy,
-} from "react-instantsearch-hooks-web";
-import { searchClient } from "../../lib/search-client";
-import { algoliaEnvData } from "../../lib/resolve-algolia-env";
 import { ChevronDownIcon } from "@chakra-ui/icons";
 
-interface IMobileFilters {
-  lookup?: BreadcrumbLookup;
-  NextRouterHandler: any;
-}
-
-export default function MobileFilters({
-  lookup,
-  NextRouterHandler,
-}: IMobileFilters): JSX.Element {
+export default function MobileFilters(): JSX.Element {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const VirtualSearchBox = () => {
-    useSearchBox();
-    return null;
-  };
-  const VirtualPagination = () => {
-    usePagination();
-    return null;
-  };
-  const VirtualSortBy = () => {
-    useSortBy({ items: [] });
-    return null;
-  };
-
   return (
     <Box display={{ base: "block", md: "none" }}>
       <Button variant="ghost" rightIcon={<ChevronDownIcon />} onClick={onOpen}>
@@ -58,24 +25,7 @@ export default function MobileFilters({
           <DrawerCloseButton />
           <DrawerHeader>Filters</DrawerHeader>
 
-          <DrawerBody>
-            <InstantSearch
-              searchClient={searchClient}
-              indexName={algoliaEnvData.indexName}
-            >
-              <VirtualSearchBox />
-              <VirtualPagination />
-              <VirtualSortBy />
-              <NextRouterHandler />
-              <Heading as="h3" size="sm" pb={2}>
-                Category
-              </Heading>
-              <CustomHierarchicalMenu
-                lookup={lookup}
-                attributes={hierarchicalAttributes}
-              />
-            </InstantSearch>
-          </DrawerBody>
+          <DrawerBody></DrawerBody>
         </DrawerContent>
       </Drawer>
     </Box>