Fix auth & wishlist (#918)

* Fix auth & wishlist

* Revert files

* Update signup.ts

* Update signup.ts

* Requested changes

* Revert fetch options

site/components/auth/LoginView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { Logo, Button, Input } from '@components/ui'
 import useLogin from '@framework/auth/use-login'
 import { useUI } from '@components/ui/context'
@@ -31,7 +31,6 @@ const LoginView: React.FC = () => {
         email,
         password,
       })
-      setLoading(false)
       closeModal()
     } catch ({ errors }) {
       if (errors instanceof Array) {
@@ -39,15 +38,15 @@ const LoginView: React.FC = () => {
       } else {
         setMessage('Unexpected error')
       }
-      setLoading(false)
       setDisabled(false)
+    } finally {
+      setLoading(false)
     }
   }
 
   const handleValidation = useCallback(() => {
     // Test for Alphanumeric password
     const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
-
     // Unable to send form unless fields are valid.
     if (dirty) {
       setDisabled(!validate(email) || password.length < 7 || !validPassword)

site/components/auth/SignUpView.tsx

@@ -38,7 +38,6 @@ const SignUpView: FC<Props> = () => {
         lastName,
         password,
       })
-      setLoading(false)
       closeModal()
     } catch ({ errors }) {
       console.error(errors)
@@ -47,8 +46,9 @@ const SignUpView: FC<Props> = () => {
       } else {
         setMessage('Unexpected error')
       }
-      setLoading(false)
       setDisabled(false)
+    } finally {
+      setLoading(false)
     }
   }
 

site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.module.css

@@ -4,7 +4,6 @@
   z-index: 10;
   height: 100vh;
   min-width: 100vw;
-  transition: none;
 }
 
 @media screen(lg) {
@@ -18,8 +17,7 @@
 .link {
   @apply text-primary flex cursor-pointer px-6 py-3
     transition ease-in-out duration-150 leading-6
-    font-medium items-center capitalize w-full box-border
-    outline-0;
+    font-medium items-center capitalize w-full box-border outline-0;
 }
 
 .link:hover {

site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx

@@ -35,13 +35,7 @@ export default function CustomerMenuContent() {
   }
 
   return (
-    <DropdownContent
-      asChild
-      side="bottom"
-      sideOffset={10}
-      className={s.root}
-      id="CustomerMenuContent"
-    >
+    <DropdownContent sideOffset={10} id="CustomerMenuContent">
       {LINKS.map(({ name, href }) => (
         <DropdownMenuItem key={href}>
           <a

site/components/common/UserNav/UserNav.module.css

@@ -7,12 +7,15 @@
 }
 
 .item {
-  @apply ml-6 cursor-pointer relative transition ease-in-out
-  duration-100 flex items-center outline-none text-primary;
+  @apply ml-6 flex items-center relative;
 }
 
-.item:hover {
-  @apply text-accent-6 transition scale-110 duration-100;
+.item > button {
+  @apply cursor-pointer transition ease-in-out duration-100 outline-none text-primary;
+}
+
+.item > button:hover {
+  @apply text-accent-6 transition scale-110 outline-none;
 }
 
 .item:first-child {

site/components/common/UserNav/UserNav.tsx

@@ -23,13 +23,8 @@ const UserNav: React.FC<{
 }> = ({ className }) => {
   const { data } = useCart()
   const { data: isCustomerLoggedIn } = useCustomer()
-  const {
-    toggleSidebar,
-    closeSidebarIfPresent,
-    openModal,
-    setSidebarView,
-    openSidebar,
-  } = useUI()
+  const { closeSidebarIfPresent, openModal, setSidebarView, openSidebar } =
+    useUI()
 
   const itemsCount = data?.lineItems?.reduce(countItem, 0) ?? 0
   const DropdownTrigger = isCustomerLoggedIn
@@ -59,10 +54,10 @@ const UserNav: React.FC<{
         )}
         {process.env.COMMERCE_WISHLIST_ENABLED && (
           <li className={s.item}>
-            <Link href="/wishlist" legacyBehavior>
-              <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
+            <Link href="/wishlist">
+              <button onClick={closeSidebarIfPresent} aria-label="Wishlist">
                 <Heart />
-              </a>
+              </button>
             </Link>
           </li>
         )}

site/components/wishlist/WishlistButton/WishlistButton.tsx

@@ -30,7 +30,7 @@ const WishlistButton: FC<Props> = ({
   // @ts-ignore Wishlist is not always enabled
   const itemInWishlist = data?.items?.find(
     // @ts-ignore Wishlist is not always enabled
-    (item) => item.product_id === productId && item.variant_id === variant.id
+    (item) => item.productId === productId && item.variantId === variant.id
   )
 
   const handleWishlistChange = async (e: any) => {

site/components/wishlist/WishlistCard/WishlistCard.tsx

@@ -19,6 +19,7 @@ const WishlistCard: React.FC<{
   item: WishlistItem
 }> = ({ item }) => {
   const product: Product = item.product
+
   const { price } = usePrice({
     amount: product.price?.value,
     baseAmount: product.price?.retailPrice,