From 5ee712c962c6b0dda903172660d70cf433321b7e Mon Sep 17 00:00:00 2001 From: Giovanni Schroevers Date: Tue, 28 May 2024 16:48:35 +0200 Subject: [PATCH 1/3] fix(GCOM-1395): prevent checkout on looping back and forth with the cart overlay when navigating directly to the checkout --- .changeset/moody-eggs-vanish.md | 7 +++++++ examples/magento-graphcms/pages/cart.tsx | 1 + packages/framer-next-pages/components/Pages.tsx | 11 ++++++++++- packages/next-ui/Overlay/components/OverlayBase.tsx | 1 + 4 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 .changeset/moody-eggs-vanish.md diff --git a/.changeset/moody-eggs-vanish.md b/.changeset/moody-eggs-vanish.md new file mode 100644 index 0000000000..40349a28d8 --- /dev/null +++ b/.changeset/moody-eggs-vanish.md @@ -0,0 +1,7 @@ +--- +"@graphcommerce/framer-next-pages": minor +"@graphcommerce/magento-graphcms": minor +"@graphcommerce/next-ui": minor +--- + +Add page blacklists to overlays, prevent checkout on looping back and forth with the cart overlay when navigating directly to the checkout. diff --git a/examples/magento-graphcms/pages/cart.tsx b/examples/magento-graphcms/pages/cart.tsx index 500d0b776a..2f78b416b2 100644 --- a/examples/magento-graphcms/pages/cart.tsx +++ b/examples/magento-graphcms/pages/cart.tsx @@ -109,6 +109,7 @@ const pageOptions: PageOptions = { sizeMd: 'floating', sizeSm: 'full', justifyMd: 'start', + blacklistedPages: ['/checkout'], }, } CartPage.pageOptions = pageOptions diff --git a/packages/framer-next-pages/components/Pages.tsx b/packages/framer-next-pages/components/Pages.tsx index 40308f1c85..ea2a2d67a7 100644 --- a/packages/framer-next-pages/components/Pages.tsx +++ b/packages/framer-next-pages/components/Pages.tsx @@ -102,8 +102,17 @@ export function FramerNextPages(props: PagesProps) { let renderItems = [...items.current] + /** Removes the page if included in the blacklist of the overlay. **/ + const overlayBlacklist: string[] = renderItems.at(-1)?.layoutProps?.blacklistedPages as string[] + if ( + renderItems.length > 1 && + overlayBlacklist?.includes(renderItems.at(0)?.routerContext.pageInfo.asPath ?? '') + ) { + renderItems = renderItems.slice(1) + } + /** We need to render back to the last item that isn't an overlay. */ - const plainIdx = findPlainIdx(items.current) + const plainIdx = findPlainIdx(renderItems) const shouldLoadFb = plainIdx === -1 && typeof window !== 'undefined' && !fb diff --git a/packages/next-ui/Overlay/components/OverlayBase.tsx b/packages/next-ui/Overlay/components/OverlayBase.tsx index 001ff22d67..01fe361a4f 100644 --- a/packages/next-ui/Overlay/components/OverlayBase.tsx +++ b/packages/next-ui/Overlay/components/OverlayBase.tsx @@ -53,6 +53,7 @@ export type LayoutOverlayBaseProps = { safeToRemove?: (() => void) | null | undefined overlayPaneProps?: MotionProps disableInert?: boolean + blacklistedPages?: string[] /* For `variantSm='left|right' */ widthSm?: string | false From 83984b8bc4e286921b7ca61cbd623f991155c936 Mon Sep 17 00:00:00 2001 From: Giovanni Schroevers Date: Tue, 28 May 2024 17:02:24 +0200 Subject: [PATCH 2/3] fix(GCOM-1395): omit blacklistedPages from LayoutOverlayState --- packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx b/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx index 9f4679bba2..1006b8c002 100644 --- a/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx +++ b/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx @@ -12,6 +12,7 @@ export type LayoutOverlayState = Omit< | 'disableInert' | 'widthMd' | 'widthSm' + | 'blacklistedPages' > export function useLayoutState() { From 60de918734bde0b4a2b2337cf28e8b67b7f2d07f Mon Sep 17 00:00:00 2001 From: Giovanni Schroevers Date: Fri, 7 Jun 2024 15:42:37 +0200 Subject: [PATCH 3/3] fix(GCOM-1395): use the page up path instead of the blacklist to determine if it should be excuded from the renderItems --- .changeset/moody-eggs-vanish.md | 6 ++---- examples/magento-graphcms/pages/cart.tsx | 1 - packages/framer-next-pages/components/Pages.tsx | 12 ++++++++---- .../next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx | 1 - packages/next-ui/Overlay/components/OverlayBase.tsx | 1 - 5 files changed, 10 insertions(+), 11 deletions(-) diff --git a/.changeset/moody-eggs-vanish.md b/.changeset/moody-eggs-vanish.md index 40349a28d8..a52b3cd9b5 100644 --- a/.changeset/moody-eggs-vanish.md +++ b/.changeset/moody-eggs-vanish.md @@ -1,7 +1,5 @@ --- -"@graphcommerce/framer-next-pages": minor -"@graphcommerce/magento-graphcms": minor -"@graphcommerce/next-ui": minor +'@graphcommerce/framer-next-pages': minor --- -Add page blacklists to overlays, prevent checkout on looping back and forth with the cart overlay when navigating directly to the checkout. +Prevent checkout on looping back and forth with the cart overlay when navigating directly to the checkout. diff --git a/examples/magento-graphcms/pages/cart.tsx b/examples/magento-graphcms/pages/cart.tsx index 2f78b416b2..500d0b776a 100644 --- a/examples/magento-graphcms/pages/cart.tsx +++ b/examples/magento-graphcms/pages/cart.tsx @@ -109,7 +109,6 @@ const pageOptions: PageOptions = { sizeMd: 'floating', sizeSm: 'full', justifyMd: 'start', - blacklistedPages: ['/checkout'], }, } CartPage.pageOptions = pageOptions diff --git a/packages/framer-next-pages/components/Pages.tsx b/packages/framer-next-pages/components/Pages.tsx index ea2a2d67a7..562da5ad43 100644 --- a/packages/framer-next-pages/components/Pages.tsx +++ b/packages/framer-next-pages/components/Pages.tsx @@ -102,11 +102,15 @@ export function FramerNextPages(props: PagesProps) { let renderItems = [...items.current] - /** Removes the page if included in the blacklist of the overlay. **/ - const overlayBlacklist: string[] = renderItems.at(-1)?.layoutProps?.blacklistedPages as string[] + /** Removes the page if the up path equls the path of a overlay and there is no history present **/ + const upPath = (renderItems.at(0)?.pageProps?.up as { href: string; title: string })?.href + const overlayPath = renderItems.at(-1)?.routerContext.pageInfo.asPath if ( - renderItems.length > 1 && - overlayBlacklist?.includes(renderItems.at(0)?.routerContext.pageInfo.asPath ?? '') + renderItems.length === 2 && + upPath && + overlayPath && + upPath === overlayPath && + renderItems.at(-1)?.overlayGroup ) { renderItems = renderItems.slice(1) } diff --git a/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx b/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx index 1006b8c002..9f4679bba2 100644 --- a/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx +++ b/packages/next-ui/LayoutOverlay/test/LayoutOverlayDemo.tsx @@ -12,7 +12,6 @@ export type LayoutOverlayState = Omit< | 'disableInert' | 'widthMd' | 'widthSm' - | 'blacklistedPages' > export function useLayoutState() { diff --git a/packages/next-ui/Overlay/components/OverlayBase.tsx b/packages/next-ui/Overlay/components/OverlayBase.tsx index 01fe361a4f..001ff22d67 100644 --- a/packages/next-ui/Overlay/components/OverlayBase.tsx +++ b/packages/next-ui/Overlay/components/OverlayBase.tsx @@ -53,7 +53,6 @@ export type LayoutOverlayBaseProps = { safeToRemove?: (() => void) | null | undefined overlayPaneProps?: MotionProps disableInert?: boolean - blacklistedPages?: string[] /* For `variantSm='left|right' */ widthSm?: string | false