From f559b1382034884310a44d8d07462f7d7749a1a1 Mon Sep 17 00:00:00 2001
From: Jesse van der Poel <jessevdpoel@hotmail.com>
Date: Fri, 5 Jan 2024 12:08:56 +0100
Subject: [PATCH] Added AddProductsToCartForm to DemoRecentlyViewedProducts

---
 examples/magento-graphcms/pages/p/[url].tsx   | 12 ++++-----
 .../demo/DemoRecentlyViewedProducts.tsx       | 25 +++++++++++--------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/examples/magento-graphcms/pages/p/[url].tsx b/examples/magento-graphcms/pages/p/[url].tsx
index 44ab510eec..73de53907b 100644
--- a/examples/magento-graphcms/pages/p/[url].tsx
+++ b/examples/magento-graphcms/pages/p/[url].tsx
@@ -187,13 +187,11 @@ function ProductPage(props: Props) {
           }}
         />
       )}
-      <AddProductsToCartForm>
-        <RecentlyViewedProducts
-          title={<Trans id='Recently viewed products' />}
-          exclude={[product.sku]}
-          productListRenderer={productListRenderer}
-        />
-      </AddProductsToCartForm>
+      <RecentlyViewedProducts
+        title={<Trans id='Recently viewed products' />}
+        exclude={[product.sku]}
+        productListRenderer={productListRenderer}
+      />
     </>
   )
 }
diff --git a/packages/demo-magento-graphcommerce/plugins/demo/DemoRecentlyViewedProducts.tsx b/packages/demo-magento-graphcommerce/plugins/demo/DemoRecentlyViewedProducts.tsx
index 949008baa8..b7f0a0918a 100644
--- a/packages/demo-magento-graphcommerce/plugins/demo/DemoRecentlyViewedProducts.tsx
+++ b/packages/demo-magento-graphcommerce/plugins/demo/DemoRecentlyViewedProducts.tsx
@@ -1,3 +1,4 @@
+import { AddProductsToCartForm } from '@graphcommerce/magento-product'
 import {
   useRecentlyViewedProducts,
   useRecentlyViewedSkus,
@@ -41,17 +42,19 @@ function DemoRecentlyViewedProducts(props: PluginProps<RecentlyViewedProductsPro
   return (
     <>
       <div ref={ref} />
-      <SidebarSlider sidebar={<Typography variant='h2'>{title}</Typography>}>
-        {filterNonNullableKeys([...loadingProducts, ...productList.products]).map((item) => (
-          <RenderType
-            key={item.uid ?? ''}
-            renderer={productListRenderer}
-            sizes={responsiveVal(200, 400)}
-            titleComponent='h3'
-            {...item}
-          />
-        ))}
-      </SidebarSlider>
+      <AddProductsToCartForm>
+        <SidebarSlider sidebar={<Typography variant='h2'>{title}</Typography>}>
+          {filterNonNullableKeys([...loadingProducts, ...productList.products]).map((item) => (
+            <RenderType
+              key={item.uid ?? ''}
+              renderer={productListRenderer}
+              sizes={responsiveVal(200, 400)}
+              titleComponent='h3'
+              {...item}
+            />
+          ))}
+        </SidebarSlider>
+      </AddProductsToCartForm>
     </>
   )
 }