Skip to content

Commit

Permalink
feat: product quick view removal (#139)
Browse files Browse the repository at this point in the history 
* feat: remove quick view

* chore: changeset
  • Loading branch information
@field123
field123 authored Nov 21, 2023
1 parent 31048bc commit 3ae082b
Show file tree
Hide file tree
Showing 10 changed files with 10 additions and 658 deletions.
5 changes: 5 additions & 0 deletions .changeset/clever-wolves-learn.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@elasticpath/d2c-schematics": patch
---

Remove quick view from product list pages
56 changes: 0 additions & 56 deletions examples/algolia/src/components/product-modal/Product.tsx
View file

This file was deleted.

92 changes: 1 addition & 91 deletions examples/algolia/src/components/search/Hit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down Expand Up @@ -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>
</>
);
}
56 changes: 0 additions & 56 deletions examples/payments/src/components/product-modal/Product.tsx
View file

This file was deleted.

85 changes: 1 addition & 84 deletions examples/payments/src/components/search/Hit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,16 @@ 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({
hit,
}: {
hit: ShopperProduct;
}): JSX.Element {
const { client } = useStore();
const {
main_image,
response: {
Expand All @@ -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 (
<>
Expand Down Expand Up @@ -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>
</>
);
}
Loading

1 comment on commit 3ae082b

@vercel
Copy link

@vercel vercel bot commented on 3ae082b Nov 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

composable-frontend-simple – ./examples/simple

composable-frontend-simple.vercel.app
composable-frontend-simple-ep-it-admin-s-team.vercel.app
composable-frontend-simple-git-main-ep-it-admin-s-team.vercel.app

Please sign in to comment.