add logout button

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',
+          'hover:bg-primary/10',
           // disabled
-          'disabled:text-gray-400'
+          'disabled:border-primary-muted disabled:text-primary-muted'
-        ]
-      },
-      text: {
-        root: [
-          // border
-          'border-transparent',
-          // text color
-          'text-tremor-brand',
-          // background color
-          'bg-transparent',
-          // hover color
-          'disabled:text-gray-400'
         ]
       }
     }
-  },
+  ],
   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>(

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

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>

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);
   }