diff --git a/examples/algolia/e2e/product-list-page.spec.ts b/examples/algolia/e2e/product-list-page.spec.ts index 0d0bd2a6..bc315b94 100644 --- a/examples/algolia/e2e/product-list-page.spec.ts +++ b/examples/algolia/e2e/product-list-page.spec.ts @@ -18,9 +18,8 @@ test("should be able to use quick view to view full product details", async ({ /* Get the cart id from the cookie */ const allCookies = await page.context().cookies(); - const cartId = allCookies.find( - (cookie) => cookie.name === "_store_ep_cart" - )?.value; + const cartId = allCookies.find((cookie) => cookie.name === "_store_ep_cart") + ?.value; /* Mobile - open hamburger menu */ if (isMobile) { @@ -44,6 +43,6 @@ test("should be able to use quick view to view full product details", async ({ /* Check to make sure the page has navigated to the product details page for Simple T-Shirt */ await page.waitForURL("/products/2f435914-03b5-4b9e-80cb-08d3baa4c1d3"); await expect(page).toHaveURL( - "/products/2f435914-03b5-4b9e-80cb-08d3baa4c1d3" + "/products/2f435914-03b5-4b9e-80cb-08d3baa4c1d3", ); }); diff --git a/examples/algolia/src/components/header/Header.tsx b/examples/algolia/src/components/header/Header.tsx index 030a698a..1f7bddff 100644 --- a/examples/algolia/src/components/header/Header.tsx +++ b/examples/algolia/src/components/header/Header.tsx @@ -1,5 +1,5 @@ import { NavigationNode } from "../../lib/build-site-navigation"; - +import SearchModal from "../search/SearchModal"; import MobileNavBar from "./navigation/MobileNavBar"; import EpIcon from "../../../public/icons/ep-icon.svg"; import NavBar from "./navigation/NavBar"; @@ -30,7 +30,7 @@ const Header = ({ nav }: IHeader): JSX.Element => {
- +
diff --git a/examples/algolia/src/components/header/cart/CartMenu.tsx b/examples/algolia/src/components/header/cart/CartMenu.tsx index ae7dfa52..bc315b94 100644 --- a/examples/algolia/src/components/header/cart/CartMenu.tsx +++ b/examples/algolia/src/components/header/cart/CartMenu.tsx @@ -1,125 +1,48 @@ -import Link from "next/link"; -import ModalCartItems from "./ModalCartItem"; -import { - CartState, - getPresentCartState, - RefinedCartItem, - useCart, -} from "@elasticpath/react-shopper-hooks"; -import { Popover, Transition } from "@headlessui/react"; -import { Fragment } from "react"; -import { ReadonlyNonEmptyArray } from "@elasticpath/react-shopper-hooks/dist/shared/types/read-only-non-empty-array"; -import CartUpdatingSpinner from "./CartUpdatingSpinner"; +import { test, expect } from "@playwright/test"; +import { gateway } from "@moltin/sdk"; -export default function CartMenu(): JSX.Element { - const { state } = useCart(); +const host = process.env.NEXT_PUBLIC_EPCC_ENDPOINT_URL; +const client_id = process.env.NEXT_PUBLIC_EPCC_CLIENT_ID; - const stateItems = resolveStateCartItems(state); +const client = gateway({ + client_id, + host, +}); - function resolveStateCartItems( - state: CartState, - ): ReadonlyNonEmptyArray | undefined { - const presentCartState = getPresentCartState(state); - return presentCartState && presentCartState.items; +test("should be able to use quick view to view full product details", async ({ + page, + isMobile, +}) => { + /* Go to home page */ + await page.goto("/"); + + /* Get the cart id from the cookie */ + const allCookies = await page.context().cookies(); + const cartId = allCookies.find((cookie) => cookie.name === "_store_ep_cart") + ?.value; + + /* Mobile - open hamburger menu */ + if (isMobile) { + await page.getByRole("button", { name: "Menu" }).click(); } - return ( -
- {/* Headless */} - - {({ close }) => ( - <> - - {(state.kind === "updating-cart-state" || - state.kind === "loading-cart-state" || - state.kind === "uninitialised-cart-state") && ( -
- -
- )} - {state.kind === "present-cart-state" && ( - - {stateItems?.length} - - )} - - - - + /* Select the Men's / T-Shirts menu option */ + await page.getByRole("button", { name: "Men's", exact: true }).click(); + await page.getByRole("menuitem", { name: "T-Shirts", exact: true }).click(); - - -
-
- -
-
-
- -
-
- - - - )} - -
- ); -} + /* Check to make sure the page has navigated to the product list page for Men's / T-Shirts */ + await expect(page).toHaveURL("/search/menswear/shirts/t-shirts"); -function CartPopoverFooter({ - state, - onClose, -}: { - state: CartState; - onClose: () => void; -}): JSX.Element { - const checkoutHref = - state.kind === "present-cart-state" ? `/checkout/${state.id}` : "#"; - const hasCartItems = state.kind === "present-cart-state"; - return ( -
- - - - - - -
- ); -} + await page + .getByTestId("2f435914-03b5-4b9e-80cb-08d3baa4c1d3") + .getByRole("button", { name: "Quick View" }) + .click(); + + await page.getByRole("link", { name: "View full details" }).click(); + /* Check to make sure the page has navigated to the product details page for Simple T-Shirt */ + await page.waitForURL("/products/2f435914-03b5-4b9e-80cb-08d3baa4c1d3"); + await expect(page).toHaveURL( + "/products/2f435914-03b5-4b9e-80cb-08d3baa4c1d3", + ); +}); diff --git a/examples/algolia/src/components/search/CustomHierarchicalMenu.tsx b/examples/algolia/src/components/search/CustomHierarchicalMenu.tsx index 3544195f..616cb368 100644 --- a/examples/algolia/src/components/search/CustomHierarchicalMenu.tsx +++ b/examples/algolia/src/components/search/CustomHierarchicalMenu.tsx @@ -51,14 +51,14 @@ function HierarchicalItem({ className={clsx( "ais-HierarchicalMenu-item cursor-pointer", item.data && clsx("ais-HierarchicalMenu-item--parent"), - item.isRefined && clsx("ais-HierarchicalMenu-item--selected") + item.isRefined && clsx("ais-HierarchicalMenu-item--selected"), )} > { if (isModifierClick(event)) return; @@ -117,7 +117,7 @@ type CustomUseHierarchicalMenuProps = UseHierarchicalMenuProps & { }; export default function CustomHierarchicalMenu( - props: CustomUseHierarchicalMenuProps + props: CustomUseHierarchicalMenuProps, ): JSX.Element { const { items, canRefine, refine, createURL } = useHierarchicalMenu(props); @@ -127,7 +127,7 @@ export default function CustomHierarchicalMenu( "ais-HierarchicalMenu", !canRefine && clsx("ais-HierarchicalMenu--noRefinement"), "none", - items?.length > 0 && "block" + items?.length > 0 && "block", )} > isRefined) || {}; diff --git a/examples/algolia/src/components/search/MobileFilters.tsx b/examples/algolia/src/components/search/MobileFilters.tsx index 1dc1958c..6c563eaa 100644 --- a/examples/algolia/src/components/search/MobileFilters.tsx +++ b/examples/algolia/src/components/search/MobileFilters.tsx @@ -2,10 +2,10 @@ import CustomHierarchicalMenu from "./CustomHierarchicalMenu"; import { hierarchicalAttributes } from "../../lib/hierarchical-attributes"; import { BreadcrumbLookup } from "../../lib/types/breadcrumb-lookup"; import { -InstantSearch, -usePagination, -useSearchBox, -useSortBy, + InstantSearch, + usePagination, + useSearchBox, + useSortBy, } from "react-instantsearch-hooks-web"; import { searchClient } from "../../lib/search-client"; import { algoliaEnvData } from "../../lib/resolve-algolia-env"; @@ -14,96 +14,96 @@ import { Dispatch, Fragment, SetStateAction } from "react"; import { XMarkIcon } from "@heroicons/react/24/solid"; interface IMobileFilters { -lookup?: BreadcrumbLookup; -NextRouterHandler: any; -showFilterMenu: boolean; -setShowFilterMenu: Dispatch>; - } + lookup?: BreadcrumbLookup; + NextRouterHandler: any; + showFilterMenu: boolean; + setShowFilterMenu: Dispatch>; +} - export default function MobileFilters({ +export default function MobileFilters({ lookup, NextRouterHandler, showFilterMenu, setShowFilterMenu, - }: IMobileFilters): JSX.Element { +}: IMobileFilters): JSX.Element { const VirtualSearchBox = () => { - useSearchBox(); - return null; + useSearchBox(); + return null; }; const VirtualPagination = () => { - usePagination(); - return null; + usePagination(); + return null; }; const VirtualSortBy = () => { - useSortBy({ items: [] }); - return null; + useSortBy({ items: [] }); + return null; }; return ( - - setShowFilterMenu(false)} - > - -
- -
-
-
- - -
- -
+
+ +
-
- - - - - - Category - - -
- - +
+ + + + + + Category + + +
+ + +
+
-
- - - + + ); - } +} diff --git a/examples/algolia/src/components/search/NoResults.tsx b/examples/algolia/src/components/search/NoResults.tsx index 4b6d5652..22276594 100644 --- a/examples/algolia/src/components/search/NoResults.tsx +++ b/examples/algolia/src/components/search/NoResults.tsx @@ -20,4 +20,4 @@ export const NoResults = ({ ); }; -export default NoResults; \ No newline at end of file +export default NoResults; diff --git a/examples/algolia/src/components/search/Pagination.tsx b/examples/algolia/src/components/search/Pagination.tsx index 2972327d..77231f6e 100644 --- a/examples/algolia/src/components/search/Pagination.tsx +++ b/examples/algolia/src/components/search/Pagination.tsx @@ -13,7 +13,7 @@ export const Pagination = (): JSX.Element => { className={clsx( currentRefinement === page ? "bg-brand-primary" : "bg-gray-100", currentRefinement === page ? "text-white" : "text-black", - "primary-btn w-fit cursor-pointer" + "primary-btn w-fit cursor-pointer", )} key={page} onClick={() => refine(page)} diff --git a/examples/algolia/src/components/search/SearchBox.tsx b/examples/algolia/src/components/search/SearchBox.tsx index f675ddbb..7fbf39f7 100644 --- a/examples/algolia/src/components/search/SearchBox.tsx +++ b/examples/algolia/src/components/search/SearchBox.tsx @@ -14,7 +14,7 @@ export default function SearchBox(): JSX.Element { } }, 400, - [search] + [search], ); return ( diff --git a/examples/algolia/src/components/search/SearchModal.tsx b/examples/algolia/src/components/search/SearchModal.tsx index 483c2e46..19de1ff9 100644 --- a/examples/algolia/src/components/search/SearchModal.tsx +++ b/examples/algolia/src/components/search/SearchModal.tsx @@ -35,7 +35,7 @@ const SearchBox = ({ } }, 400, - [search] + [search], ); return ( @@ -60,7 +60,7 @@ const SearchBox = ({
- - - - -
- ); -} + await page + .getByTestId("2f435914-03b5-4b9e-80cb-08d3baa4c1d3") + .getByRole("button", { name: "Quick View" }) + .click(); + + await page.getByRole("link", { name: "View full details" }).click(); + /* Check to make sure the page has navigated to the product details page for Simple T-Shirt */ + await page.waitForURL("/products/2f435914-03b5-4b9e-80cb-08d3baa4c1d3"); + await expect(page).toHaveURL( + "/products/2f435914-03b5-4b9e-80cb-08d3baa4c1d3", + ); +}); diff --git a/examples/basic/src/lib/resolve-ep-stripe-env.ts b/examples/basic/src/lib/resolve-ep-stripe-env.ts index 35c2df40..66f8e0bc 100644 --- a/examples/basic/src/lib/resolve-ep-stripe-env.ts +++ b/examples/basic/src/lib/resolve-ep-stripe-env.ts @@ -11,7 +11,7 @@ function retrieveStripePublishableKey(): string { const stripePublishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY; if (!stripePublishableKey) { throw new Error( - `Failed to get stripe instance. Make sure you have set NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` + `Failed to get stripe instance. Make sure you have set NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`, ); } return stripePublishableKey; @@ -21,7 +21,7 @@ function retrieveStripeAccountId(): string { const stripeAccountId = process.env.NEXT_PUBLIC_STRIPE_ACCOUNT_ID; if (!stripeAccountId) { throw new Error( - `Failed to get stripe instance. Make sure you have set NEXT_PUBLIC_STRIPE_ACCOUNT_ID` + `Failed to get stripe instance. Make sure you have set NEXT_PUBLIC_STRIPE_ACCOUNT_ID`, ); } return stripeAccountId; diff --git a/examples/basic/src/lib/sort-alphabetically.ts b/examples/basic/src/lib/sort-alphabetically.ts index 35118174..a69ce476 100644 --- a/examples/basic/src/lib/sort-alphabetically.ts +++ b/examples/basic/src/lib/sort-alphabetically.ts @@ -1,4 +1,4 @@ export const sortAlphabetically = ( a: { name: string }, - b: { name: string } + b: { name: string }, ): number => a.name.localeCompare(b.name); diff --git a/examples/basic/src/services/checkout.ts b/examples/basic/src/services/checkout.ts index 2dbed4b4..2bfeeb60 100644 --- a/examples/basic/src/services/checkout.ts +++ b/examples/basic/src/services/checkout.ts @@ -13,7 +13,7 @@ export function checkout( customer: CheckoutCustomerObject, billing: Partial
, shipping: Partial
, - client?: EPCCClient + client?: EPCCClient, ): Promise<{ data: Order }> { return (client ?? getEpccImplicitClient()) .Cart(id) @@ -23,7 +23,7 @@ export function checkout( export function makePayment( payment: PaymentRequestBody, orderId: string, - client?: EPCCClient + client?: EPCCClient, ): Promise { return (client ?? getEpccImplicitClient()).Orders.Payment(orderId, payment); } @@ -31,11 +31,11 @@ export function makePayment( export function confirmOrder( orderId: string, transactionId: string, - client?: EPCCClient + client?: EPCCClient, ): Promise { return (client ?? getEpccImplicitClient()).Orders.Confirm( orderId, transactionId, - { data: {} } + { data: {} }, ); }