From c440ff06d43f8959d46f1789c9d1d8949c566f0a Mon Sep 17 00:00:00 2001
From: Vinicius Zucatti <viniciuszucatti@gmail.com>
Date: Thu, 23 Sep 2021 19:32:17 -0300
Subject: [PATCH] Fix next/link should be used with anchor as children #330
 (#482)

---
 components/cart/CartItem/CartItem.tsx         | 34 +++++++++++--------
 .../cart/CartSidebarView/CartSidebarView.tsx  |  8 +++--
 .../CheckoutSidebarView.tsx                   |  4 ++-
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 4453e0c08..334761b54 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -85,25 +85,29 @@ const CartItem = ({
       <div className="flex flex-row space-x-4 py-4">
         <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
           <Link href={`/product/${item.path}`}>
-            <Image
-              onClick={() => closeSidebarIfPresent()}
-              className={s.productImage}
-              width={150}
-              height={150}
-              src={item.variant.image!.url}
-              alt={item.variant.image!.altText}
-              unoptimized
-            />
+            <a>
+              <Image
+                onClick={() => closeSidebarIfPresent()}
+                className={s.productImage}
+                width={150}
+                height={150}
+                src={item.variant.image!.url}
+                alt={item.variant.image!.altText}
+                unoptimized
+              />
+            </a>
           </Link>
         </div>
         <div className="flex-1 flex flex-col text-base">
           <Link href={`/product/${item.path}`}>
-            <span
-              className={s.productName}
-              onClick={() => closeSidebarIfPresent()}
-            >
-              {item.name}
-            </span>
+            <a>
+              <span
+                className={s.productName}
+                onClick={() => closeSidebarIfPresent()}
+              >
+                {item.name}
+              </span>
+            </a>
           </Link>
           {options && options.length > 0 && (
             <div className="flex items-center pb-1">
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 128b928a8..2fa7980f2 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -74,9 +74,11 @@ const CartSidebarView: FC = () => {
         <>
           <div className="px-4 sm:px-6 flex-1">
             <Link href="/cart">
-              <Text variant="sectionHeading" onClick={handleClose}>
-                My Cart
-              </Text>
+              <a>
+                <Text variant="sectionHeading" onClick={handleClose}>
+                  My Cart
+                </Text>
+              </a>
             </Link>
             <ul className={s.lineItemsList}>
               {data!.lineItems.map((item: any) => (
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
index 13a523288..9d8661bfa 100644
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -44,7 +44,9 @@ const CheckoutSidebarView: FC = () => {
     >
       <div className="px-4 sm:px-6 flex-1">
         <Link href="/cart">
-          <Text variant="sectionHeading">Checkout</Text>
+          <a>
+            <Text variant="sectionHeading">Checkout</Text>
+          </a>
         </Link>
 
         <PaymentWidget