From 5517ccbd07873f569a35fbad823399a955cb50c3 Mon Sep 17 00:00:00 2001
From: tedraykov <tedraykov@gmail.com>
Date: Fri, 21 Jun 2024 18:58:58 +0300
Subject: [PATCH] add logout button

---
 components/button.tsx          | 58 +++++++++++++++++++---------------
 components/cart/modal.tsx      | 19 ++++++++++-
 components/profile/popover.tsx | 25 +++++++++++++--
 lib/shopify/auth.ts            |  2 +-
 4 files changed, 74 insertions(+), 30 deletions(-)

diff --git a/components/button.tsx b/components/button.tsx
index 27fe38708..0750b652f 100644
--- a/components/button.tsx
+++ b/components/button.tsx
@@ -31,8 +31,23 @@ const buttonVariants = tv({
         root: 'text-base px-4 py-2.5'
       }
     },
+    color: {
+      primary: {},
+      content: {}
+    },
     variant: {
-      primary: {
+      solid: {},
+      outlined: {
+        root: 'border bg-white'
+      },
+      text: {}
+    }
+  },
+  compoundVariants: [
+    {
+      color: 'primary',
+      variant: 'solid',
+      class: {
         root: [
           // border
           'border-transparent',
@@ -44,48 +59,41 @@ const buttonVariants = tv({
           'hover:bg-primary-empahsis',
           // disabled
           'disabled:bg-primary-muted',
-          'hover:bg-primary-emphasis',
           'pressed:bg-primary-emphasis/80'
         ]
-      },
-      secondary: {
+      }
+    },
+    {
+      color: 'primary',
+      variant: 'outlined',
+      class: {
         root: [
           // border
-          'border-gray-300',
+          'border-primary',
           // text color
-          'text-gray-900',
+          'text-primary',
           // background color
-          ' bg-white',
-          //hover color
-          'hover:bg-gray-50',
-          // disabled
-          'disabled:text-gray-400'
-        ]
-      },
-      text: {
-        root: [
-          // border
-          'border-transparent',
-          // text color
-          'text-tremor-brand',
-          // background color
-          'bg-transparent',
+          'bg-white',
           // hover color
-          'disabled:text-gray-400'
+          'hover:bg-primary/10',
+          // disabled
+          'disabled:border-primary-muted disabled:text-primary-muted'
         ]
       }
     }
-  },
+  ],
   defaultVariants: {
-    variant: 'primary',
+    variant: 'solid',
+    color: 'primary',
     size: 'md'
   }
 });
 
-interface ButtonProps extends ButtonBaseProps, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends Omit<ButtonBaseProps, 'color'>, VariantProps<typeof buttonVariants> {
   isLoading?: boolean;
   loadingText?: string;
   className?: string;
+  disabled?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index f67d70129..2e55b3507 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -14,12 +14,15 @@ import CloseCart from './close-cart';
 import LineItem from './line-item';
 import OpenCart from './open-cart';
 import VehicleDetails, { VehicleFormSchema, vehicleFormSchema } from './vehicle-details';
+import useAuth from 'hooks/use-auth';
 
 export default function CartModal({ cart }: { cart: Cart | undefined }) {
+  const { isAuthenticated } = useAuth();
   const [isOpen, setIsOpen] = useState(false);
   const quantityRef = useRef(cart?.totalQuantity);
   const openCart = () => setIsOpen(true);
   const closeCart = () => setIsOpen(false);
+  const [checkoutUrl, setCheckoutUrl] = useState<string | undefined>(cart?.checkoutUrl);
   const { control, handleSubmit } = useForm<VehicleFormSchema>({
     resolver: zodResolver(vehicleFormSchema),
     defaultValues: {
@@ -45,6 +48,20 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
     }
   }, [isOpen, cart?.totalQuantity, quantityRef]);
 
+  useEffect(() => {
+    if (!cart) return;
+    if (isAuthenticated) {
+      const newCheckoutUrl = new URL(cart.checkoutUrl);
+      newCheckoutUrl.searchParams.append('logged_in', 'true');
+
+      return setCheckoutUrl(newCheckoutUrl.toString());
+    }
+
+    if (checkoutUrl !== cart.checkoutUrl) {
+      setCheckoutUrl(cart.checkoutUrl);
+    }
+  }, [cart, isAuthenticated, checkoutUrl]);
+
   const onSubmit = async (data: VehicleFormSchema) => {
     if (!cart) return;
 
@@ -136,7 +153,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                         />
                       </div>
                     </div>
-                    <a href={cart.checkoutUrl} ref={linkRef} className="hidden">
+                    <a href={checkoutUrl} ref={linkRef} className="hidden">
                       Proceed to Checkout
                     </a>
                     <button
diff --git a/components/profile/popover.tsx b/components/profile/popover.tsx
index 7f969a433..463a2729c 100644
--- a/components/profile/popover.tsx
+++ b/components/profile/popover.tsx
@@ -2,13 +2,14 @@
 import { CloseButton, Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react';
 import { ArrowRightIcon } from '@heroicons/react/16/solid';
 import { Menu } from 'lib/shopify/types';
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import OpenProfile from './open-profile';
 import { useFormState, useFormStatus } from 'react-dom';
 import { doLogin } from 'components/auth/actions';
 import { Button } from 'components/button';
 import useAuth from 'hooks/use-auth';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 type ProfilePopoverProps = {
   menu: Menu[];
@@ -35,8 +36,10 @@ function SubmitButton(props: any) {
   );
 }
 const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
-  const [message] = useFormState(doLogin, null);
+  const [message, action] = useFormState(doLogin, null);
   const { isAuthenticated, loading } = useAuth();
+  const [loggingOut, setLoggingOut] = useState(false);
+  const router = useRouter();
 
   return (
     <Popover className="relative">
@@ -55,7 +58,11 @@ const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
         <PopoverPanel className="absolute -right-10 z-50 mt-2 w-72 max-w-lg px-4 sm:px-0 lg:right-0">
           <div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 text-black shadow-xl ring-1 ring-black/5">
             <span className="text-sm font-medium">My Account</span>
-            {!isAuthenticated && !loading && <SubmitButton message={message} />}
+            {!isAuthenticated && !loading && (
+              <form action={action}>
+                <SubmitButton message={message} />
+              </form>
+            )}
             {menu.length ? (
               <ul className="flex w-full flex-col divide-y text-sm">
                 {isAuthenticated && (
@@ -82,6 +89,18 @@ const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
                 ))}
               </ul>
             ) : null}
+            {isAuthenticated && !loading && (
+              <Button
+                disabled={loggingOut}
+                onClick={() => {
+                  setLoggingOut(true);
+                  router.push('/logout');
+                }}
+                variant="outlined"
+              >
+                {loggingOut ? 'Logging Out...' : 'Log Out'}
+              </Button>
+            )}
           </div>
         </PopoverPanel>
       </Transition>
diff --git a/lib/shopify/auth.ts b/lib/shopify/auth.ts
index b29024857..37dcfca58 100644
--- a/lib/shopify/auth.ts
+++ b/lib/shopify/auth.ts
@@ -493,7 +493,7 @@ export async function logout(request: NextRequest, origin: string) {
   //if there is no idToken, then sending to logout url will redirect shopify, so just
   //redirect to login here and delete cookies (presumably they don't even exist)
   if (!idTokenValue) {
-    const logoutUrl = new URL(`${origin}/login`);
+    const logoutUrl = new URL(`${origin}`);
     const response = NextResponse.redirect(`${logoutUrl}`);
     return removeAllCookies(response);
   }