add logout button

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