From 3ae082bfb873e312432941125716112c30cacf79 Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Tue, 21 Nov 2023 18:40:41 +0000
Subject: [PATCH] feat: product quick view removal (#139)

* feat: remove quick view

* chore: changeset
---
 .changeset/clever-wolves-learn.md             |  5 +
 .../src/components/product-modal/Product.tsx  | 56 -----------
 .../algolia/src/components/search/Hit.tsx     | 92 +------------------
 .../src/components/product-modal/Product.tsx  | 56 -----------
 .../payments/src/components/search/Hit.tsx    | 85 +----------------
 .../src/components/product-modal/Product.tsx  | 56 -----------
 examples/simple/src/components/search/Hit.tsx | 85 +----------------
 .../src/components/search/Hit.tsx.template    | 92 +------------------
 .../src/components/search/Hit.tsx.template    | 85 +----------------
 .../product-modal/Product.tsx.template        | 56 -----------
 10 files changed, 10 insertions(+), 658 deletions(-)
 create mode 100644 .changeset/clever-wolves-learn.md
 delete mode 100644 examples/algolia/src/components/product-modal/Product.tsx
 delete mode 100644 examples/payments/src/components/product-modal/Product.tsx
 delete mode 100644 examples/simple/src/components/product-modal/Product.tsx
 delete mode 100644 packages/d2c-schematics/product-list-page/files/src/components/product-modal/Product.tsx.template

diff --git a/.changeset/clever-wolves-learn.md b/.changeset/clever-wolves-learn.md
new file mode 100644
index 00000000..1d721836
--- /dev/null
+++ b/.changeset/clever-wolves-learn.md
@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+Remove quick view from product list pages
diff --git a/examples/algolia/src/components/product-modal/Product.tsx b/examples/algolia/src/components/product-modal/Product.tsx
deleted file mode 100644
index 04eff161..00000000
--- a/examples/algolia/src/components/product-modal/Product.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { NextPage } from "next";
-import { useEffect, useState } from "react";
-import type { ShopperProduct } from "@elasticpath/react-shopper-hooks";
-import BundleProductDetail from "../product/bundles/BundleProduct";
-import SimpleProductDetail from "../product/SimpleProduct";
-import { VariationProductDetail } from "../product/variations/VariationProduct";
-import { ProductModalContext } from "../../lib/product-context";
-
-interface ModalProductProps {
-  onSkuIdChange: (id: string) => void;
-}
-
-export const Product: NextPage<ShopperProduct & ModalProductProps> = (
-  props: ShopperProduct & ModalProductProps,
-) => {
-  const [isChangingSku, setIsChangingSku] = useState(false);
-  const [changedSkuId, setChangedSkuId] = useState("");
-
-  const { response } = props;
-
-  useEffect(() => {
-    if (changedSkuId && props.onSkuIdChange) {
-      props.onSkuIdChange(changedSkuId);
-    }
-  }, [changedSkuId, props]);
-
-  return (
-    <div className="max-w-base-max-width" key={"page_" + response.id}>
-      <ProductModalContext.Provider
-        value={{
-          isChangingSku,
-          setIsChangingSku,
-          changedSkuId,
-          setChangedSkuId,
-        }}
-      >
-        {resolveProductDetailComponent(props)}
-      </ProductModalContext.Provider>
-    </div>
-  );
-};
-
-function resolveProductDetailComponent(product: ShopperProduct): JSX.Element {
-  switch (product.kind) {
-    case "base-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "child-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "simple-product":
-      return <SimpleProductDetail simpleProduct={product} />;
-    case "bundle-product":
-      return <BundleProductDetail bundleProduct={product} />;
-  }
-}
-
-export default Product;
diff --git a/examples/algolia/src/components/search/Hit.tsx b/examples/algolia/src/components/search/Hit.tsx
index 66facb80..7b9a618c 100644
--- a/examples/algolia/src/components/search/Hit.tsx
+++ b/examples/algolia/src/components/search/Hit.tsx
@@ -4,48 +4,13 @@ import Price from "../product/Price";
 import StrikePrice from "../product/StrikePrice";
 import { EP_CURRENCY_CODE } from "../../lib/resolve-ep-currency-code";
 import Image from "next/image";
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
-import Product from "../product-modal/Product";
-import { getProductById } from "../../services/products";
-import { EyeSlashIcon, XMarkIcon } from "@heroicons/react/24/solid";
-import {
-  parseProductResponse,
-  ShopperProduct,
-  useStore,
-} from "@elasticpath/react-shopper-hooks";
+import { EyeSlashIcon } from "@heroicons/react/24/solid";
 
 export default function HitComponent({ hit }: { hit: SearchHit }): JSX.Element {
-  const { client } = useStore();
   const { ep_price, ep_name, objectID, ep_main_image_url, ep_description } =
     hit;
 
   const currencyPrice = ep_price?.[EP_CURRENCY_CODE];
-  let [isOpen, setIsOpen] = useState(false);
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  const fetchProduct = async (id: string) => {
-    const product = await getProductById(id, client);
-    const retrievedResults = await parseProductResponse(product, client);
-    setProduct(retrievedResults);
-  };
-
-  const [product, setProduct] = useState<ShopperProduct>();
-
-  useEffect(() => {
-    isOpen && fetchProduct(objectID);
-  }, [objectID, isOpen]);
-
-  const onSkuIdChange = (id: string) => {
-    fetchProduct(id);
-  };
 
   return (
     <>
@@ -100,65 +65,10 @@ export default function HitComponent({ hit }: { hit: SearchHit }): JSX.Element {
                   )}
                 </div>
               )}
-              <button
-                className="primary-btn mt-6 p-4"
-                onClick={(e) => {
-                  e.preventDefault();
-                  openModal();
-                }}
-              >
-                Quick View
-              </button>
             </div>
           </div>
         </div>
       </Link>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-50" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="my-12 line-clamp-5 max-w-4xl transform flex-col overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  {product && (
-                    <div>
-                      <div className="flex justify-end">
-                        <div className="nav-button-container flex grow-0 cursor-pointer">
-                          <XMarkIcon
-                            onClick={() => closeModal()}
-                            height={24}
-                            width={24}
-                          />
-                        </div>
-                      </div>
-                      <Product {...product} onSkuIdChange={onSkuIdChange} />
-                    </div>
-                  )}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
     </>
   );
 }
diff --git a/examples/payments/src/components/product-modal/Product.tsx b/examples/payments/src/components/product-modal/Product.tsx
deleted file mode 100644
index 04eff161..00000000
--- a/examples/payments/src/components/product-modal/Product.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { NextPage } from "next";
-import { useEffect, useState } from "react";
-import type { ShopperProduct } from "@elasticpath/react-shopper-hooks";
-import BundleProductDetail from "../product/bundles/BundleProduct";
-import SimpleProductDetail from "../product/SimpleProduct";
-import { VariationProductDetail } from "../product/variations/VariationProduct";
-import { ProductModalContext } from "../../lib/product-context";
-
-interface ModalProductProps {
-  onSkuIdChange: (id: string) => void;
-}
-
-export const Product: NextPage<ShopperProduct & ModalProductProps> = (
-  props: ShopperProduct & ModalProductProps,
-) => {
-  const [isChangingSku, setIsChangingSku] = useState(false);
-  const [changedSkuId, setChangedSkuId] = useState("");
-
-  const { response } = props;
-
-  useEffect(() => {
-    if (changedSkuId && props.onSkuIdChange) {
-      props.onSkuIdChange(changedSkuId);
-    }
-  }, [changedSkuId, props]);
-
-  return (
-    <div className="max-w-base-max-width" key={"page_" + response.id}>
-      <ProductModalContext.Provider
-        value={{
-          isChangingSku,
-          setIsChangingSku,
-          changedSkuId,
-          setChangedSkuId,
-        }}
-      >
-        {resolveProductDetailComponent(props)}
-      </ProductModalContext.Provider>
-    </div>
-  );
-};
-
-function resolveProductDetailComponent(product: ShopperProduct): JSX.Element {
-  switch (product.kind) {
-    case "base-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "child-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "simple-product":
-      return <SimpleProductDetail simpleProduct={product} />;
-    case "bundle-product":
-      return <BundleProductDetail bundleProduct={product} />;
-  }
-}
-
-export default Product;
diff --git a/examples/payments/src/components/search/Hit.tsx b/examples/payments/src/components/search/Hit.tsx
index 8a4db6ba..8ec40e55 100644
--- a/examples/payments/src/components/search/Hit.tsx
+++ b/examples/payments/src/components/search/Hit.tsx
@@ -3,15 +3,9 @@ import Price from "../product/Price";
 import StrikePrice from "../product/StrikePrice";
 import { EP_CURRENCY_CODE } from "../../lib/resolve-ep-currency-code";
 import Image from "next/image";
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-import Product from "../product-modal/Product";
-import { getProductById } from "../../services/products";
-import { EyeSlashIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { EyeSlashIcon } from "@heroicons/react/24/solid";
 import {
-  parseProductResponse,
   ShopperProduct,
-  useStore,
 } from "@elasticpath/react-shopper-hooks";
 
 export default function HitComponent({
@@ -19,7 +13,6 @@ export default function HitComponent({
 }: {
   hit: ShopperProduct;
 }): JSX.Element {
-  const { client } = useStore();
   const {
     main_image,
     response: {
@@ -33,27 +26,6 @@ export default function HitComponent({
 
   // const currencyPrice = ep_price?.[EP_CURRENCY_CODE];
   const currencyPrice = display_price?.without_tax.formatted;
-  let [isOpen, setIsOpen] = useState(false);
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  const fetchProduct = async (id: string) => {
-    const product = await getProductById(id, client);
-    const retrievedResults = await parseProductResponse(product, client);
-    setProduct(retrievedResults);
-  };
-
-  const [product, setProduct] = useState<ShopperProduct>();
-
-  const onSkuIdChange = (id: string) => {
-    fetchProduct(id);
-  };
 
   return (
     <>
@@ -106,65 +78,10 @@ export default function HitComponent({
                   )}
                 </div>
               )}
-              <button
-                className="primary-btn mt-6 p-4"
-                onClick={(e) => {
-                  e.preventDefault();
-                  openModal();
-                }}
-              >
-                Quick View
-              </button>
             </div>
           </div>
         </div>
       </Link>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-50" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="my-12 line-clamp-5 max-w-4xl transform flex-col overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  {product && (
-                    <div>
-                      <div className="flex justify-end">
-                        <div className="nav-button-container flex grow-0 cursor-pointer">
-                          <XMarkIcon
-                            onClick={() => closeModal()}
-                            height={24}
-                            width={24}
-                          />
-                        </div>
-                      </div>
-                      <Product {...product} onSkuIdChange={onSkuIdChange} />
-                    </div>
-                  )}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
     </>
   );
 }
diff --git a/examples/simple/src/components/product-modal/Product.tsx b/examples/simple/src/components/product-modal/Product.tsx
deleted file mode 100644
index 04eff161..00000000
--- a/examples/simple/src/components/product-modal/Product.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { NextPage } from "next";
-import { useEffect, useState } from "react";
-import type { ShopperProduct } from "@elasticpath/react-shopper-hooks";
-import BundleProductDetail from "../product/bundles/BundleProduct";
-import SimpleProductDetail from "../product/SimpleProduct";
-import { VariationProductDetail } from "../product/variations/VariationProduct";
-import { ProductModalContext } from "../../lib/product-context";
-
-interface ModalProductProps {
-  onSkuIdChange: (id: string) => void;
-}
-
-export const Product: NextPage<ShopperProduct & ModalProductProps> = (
-  props: ShopperProduct & ModalProductProps,
-) => {
-  const [isChangingSku, setIsChangingSku] = useState(false);
-  const [changedSkuId, setChangedSkuId] = useState("");
-
-  const { response } = props;
-
-  useEffect(() => {
-    if (changedSkuId && props.onSkuIdChange) {
-      props.onSkuIdChange(changedSkuId);
-    }
-  }, [changedSkuId, props]);
-
-  return (
-    <div className="max-w-base-max-width" key={"page_" + response.id}>
-      <ProductModalContext.Provider
-        value={{
-          isChangingSku,
-          setIsChangingSku,
-          changedSkuId,
-          setChangedSkuId,
-        }}
-      >
-        {resolveProductDetailComponent(props)}
-      </ProductModalContext.Provider>
-    </div>
-  );
-};
-
-function resolveProductDetailComponent(product: ShopperProduct): JSX.Element {
-  switch (product.kind) {
-    case "base-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "child-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "simple-product":
-      return <SimpleProductDetail simpleProduct={product} />;
-    case "bundle-product":
-      return <BundleProductDetail bundleProduct={product} />;
-  }
-}
-
-export default Product;
diff --git a/examples/simple/src/components/search/Hit.tsx b/examples/simple/src/components/search/Hit.tsx
index 8a4db6ba..8ec40e55 100644
--- a/examples/simple/src/components/search/Hit.tsx
+++ b/examples/simple/src/components/search/Hit.tsx
@@ -3,15 +3,9 @@ import Price from "../product/Price";
 import StrikePrice from "../product/StrikePrice";
 import { EP_CURRENCY_CODE } from "../../lib/resolve-ep-currency-code";
 import Image from "next/image";
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-import Product from "../product-modal/Product";
-import { getProductById } from "../../services/products";
-import { EyeSlashIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { EyeSlashIcon } from "@heroicons/react/24/solid";
 import {
-  parseProductResponse,
   ShopperProduct,
-  useStore,
 } from "@elasticpath/react-shopper-hooks";
 
 export default function HitComponent({
@@ -19,7 +13,6 @@ export default function HitComponent({
 }: {
   hit: ShopperProduct;
 }): JSX.Element {
-  const { client } = useStore();
   const {
     main_image,
     response: {
@@ -33,27 +26,6 @@ export default function HitComponent({
 
   // const currencyPrice = ep_price?.[EP_CURRENCY_CODE];
   const currencyPrice = display_price?.without_tax.formatted;
-  let [isOpen, setIsOpen] = useState(false);
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  const fetchProduct = async (id: string) => {
-    const product = await getProductById(id, client);
-    const retrievedResults = await parseProductResponse(product, client);
-    setProduct(retrievedResults);
-  };
-
-  const [product, setProduct] = useState<ShopperProduct>();
-
-  const onSkuIdChange = (id: string) => {
-    fetchProduct(id);
-  };
 
   return (
     <>
@@ -106,65 +78,10 @@ export default function HitComponent({
                   )}
                 </div>
               )}
-              <button
-                className="primary-btn mt-6 p-4"
-                onClick={(e) => {
-                  e.preventDefault();
-                  openModal();
-                }}
-              >
-                Quick View
-              </button>
             </div>
           </div>
         </div>
       </Link>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-50" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="my-12 line-clamp-5 max-w-4xl transform flex-col overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  {product && (
-                    <div>
-                      <div className="flex justify-end">
-                        <div className="nav-button-container flex grow-0 cursor-pointer">
-                          <XMarkIcon
-                            onClick={() => closeModal()}
-                            height={24}
-                            width={24}
-                          />
-                        </div>
-                      </div>
-                      <Product {...product} onSkuIdChange={onSkuIdChange} />
-                    </div>
-                  )}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
     </>
   );
 }
diff --git a/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Hit.tsx.template b/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Hit.tsx.template
index 66facb80..7b9a618c 100644
--- a/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Hit.tsx.template
+++ b/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Hit.tsx.template
@@ -4,48 +4,13 @@ import Price from "../product/Price";
 import StrikePrice from "../product/StrikePrice";
 import { EP_CURRENCY_CODE } from "../../lib/resolve-ep-currency-code";
 import Image from "next/image";
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
-import Product from "../product-modal/Product";
-import { getProductById } from "../../services/products";
-import { EyeSlashIcon, XMarkIcon } from "@heroicons/react/24/solid";
-import {
-  parseProductResponse,
-  ShopperProduct,
-  useStore,
-} from "@elasticpath/react-shopper-hooks";
+import { EyeSlashIcon } from "@heroicons/react/24/solid";
 
 export default function HitComponent({ hit }: { hit: SearchHit }): JSX.Element {
-  const { client } = useStore();
   const { ep_price, ep_name, objectID, ep_main_image_url, ep_description } =
     hit;
 
   const currencyPrice = ep_price?.[EP_CURRENCY_CODE];
-  let [isOpen, setIsOpen] = useState(false);
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  const fetchProduct = async (id: string) => {
-    const product = await getProductById(id, client);
-    const retrievedResults = await parseProductResponse(product, client);
-    setProduct(retrievedResults);
-  };
-
-  const [product, setProduct] = useState<ShopperProduct>();
-
-  useEffect(() => {
-    isOpen && fetchProduct(objectID);
-  }, [objectID, isOpen]);
-
-  const onSkuIdChange = (id: string) => {
-    fetchProduct(id);
-  };
 
   return (
     <>
@@ -100,65 +65,10 @@ export default function HitComponent({ hit }: { hit: SearchHit }): JSX.Element {
                   )}
                 </div>
               )}
-              <button
-                className="primary-btn mt-6 p-4"
-                onClick={(e) => {
-                  e.preventDefault();
-                  openModal();
-                }}
-              >
-                Quick View
-              </button>
             </div>
           </div>
         </div>
       </Link>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-50" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="my-12 line-clamp-5 max-w-4xl transform flex-col overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  {product && (
-                    <div>
-                      <div className="flex justify-end">
-                        <div className="nav-button-container flex grow-0 cursor-pointer">
-                          <XMarkIcon
-                            onClick={() => closeModal()}
-                            height={24}
-                            width={24}
-                          />
-                        </div>
-                      </div>
-                      <Product {...product} onSkuIdChange={onSkuIdChange} />
-                    </div>
-                  )}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
     </>
   );
 }
diff --git a/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Hit.tsx.template b/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Hit.tsx.template
index 8a4db6ba..8ec40e55 100644
--- a/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Hit.tsx.template
+++ b/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Hit.tsx.template
@@ -3,15 +3,9 @@ import Price from "../product/Price";
 import StrikePrice from "../product/StrikePrice";
 import { EP_CURRENCY_CODE } from "../../lib/resolve-ep-currency-code";
 import Image from "next/image";
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
-import Product from "../product-modal/Product";
-import { getProductById } from "../../services/products";
-import { EyeSlashIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { EyeSlashIcon } from "@heroicons/react/24/solid";
 import {
-  parseProductResponse,
   ShopperProduct,
-  useStore,
 } from "@elasticpath/react-shopper-hooks";
 
 export default function HitComponent({
@@ -19,7 +13,6 @@ export default function HitComponent({
 }: {
   hit: ShopperProduct;
 }): JSX.Element {
-  const { client } = useStore();
   const {
     main_image,
     response: {
@@ -33,27 +26,6 @@ export default function HitComponent({
 
   // const currencyPrice = ep_price?.[EP_CURRENCY_CODE];
   const currencyPrice = display_price?.without_tax.formatted;
-  let [isOpen, setIsOpen] = useState(false);
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  const fetchProduct = async (id: string) => {
-    const product = await getProductById(id, client);
-    const retrievedResults = await parseProductResponse(product, client);
-    setProduct(retrievedResults);
-  };
-
-  const [product, setProduct] = useState<ShopperProduct>();
-
-  const onSkuIdChange = (id: string) => {
-    fetchProduct(id);
-  };
 
   return (
     <>
@@ -106,65 +78,10 @@ export default function HitComponent({
                   )}
                 </div>
               )}
-              <button
-                className="primary-btn mt-6 p-4"
-                onClick={(e) => {
-                  e.preventDefault();
-                  openModal();
-                }}
-              >
-                Quick View
-              </button>
             </div>
           </div>
         </div>
       </Link>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black bg-opacity-50" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="my-12 line-clamp-5 max-w-4xl transform flex-col overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  {product && (
-                    <div>
-                      <div className="flex justify-end">
-                        <div className="nav-button-container flex grow-0 cursor-pointer">
-                          <XMarkIcon
-                            onClick={() => closeModal()}
-                            height={24}
-                            width={24}
-                          />
-                        </div>
-                      </div>
-                      <Product {...product} onSkuIdChange={onSkuIdChange} />
-                    </div>
-                  )}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
     </>
   );
 }
diff --git a/packages/d2c-schematics/product-list-page/files/src/components/product-modal/Product.tsx.template b/packages/d2c-schematics/product-list-page/files/src/components/product-modal/Product.tsx.template
deleted file mode 100644
index 04eff161..00000000
--- a/packages/d2c-schematics/product-list-page/files/src/components/product-modal/Product.tsx.template
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { NextPage } from "next";
-import { useEffect, useState } from "react";
-import type { ShopperProduct } from "@elasticpath/react-shopper-hooks";
-import BundleProductDetail from "../product/bundles/BundleProduct";
-import SimpleProductDetail from "../product/SimpleProduct";
-import { VariationProductDetail } from "../product/variations/VariationProduct";
-import { ProductModalContext } from "../../lib/product-context";
-
-interface ModalProductProps {
-  onSkuIdChange: (id: string) => void;
-}
-
-export const Product: NextPage<ShopperProduct & ModalProductProps> = (
-  props: ShopperProduct & ModalProductProps,
-) => {
-  const [isChangingSku, setIsChangingSku] = useState(false);
-  const [changedSkuId, setChangedSkuId] = useState("");
-
-  const { response } = props;
-
-  useEffect(() => {
-    if (changedSkuId && props.onSkuIdChange) {
-      props.onSkuIdChange(changedSkuId);
-    }
-  }, [changedSkuId, props]);
-
-  return (
-    <div className="max-w-base-max-width" key={"page_" + response.id}>
-      <ProductModalContext.Provider
-        value={{
-          isChangingSku,
-          setIsChangingSku,
-          changedSkuId,
-          setChangedSkuId,
-        }}
-      >
-        {resolveProductDetailComponent(props)}
-      </ProductModalContext.Provider>
-    </div>
-  );
-};
-
-function resolveProductDetailComponent(product: ShopperProduct): JSX.Element {
-  switch (product.kind) {
-    case "base-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "child-product":
-      return <VariationProductDetail variationProduct={product} />;
-    case "simple-product":
-      return <SimpleProductDetail simpleProduct={product} />;
-    case "bundle-product":
-      return <BundleProductDetail bundleProduct={product} />;
-  }
-}
-
-export default Product;