Change cookie consent behavior

src/app/[locale]/components/atoms/auth/LoginButton.tsx

@@ -23,21 +23,12 @@ const LoginButton = () => {
   const session = useSession()
   const data = session.data as Session | DefaultSession
 
-  const [consentGranted, setConsentGranted] = useState(false)
-
-  useEffect(() => {
-    const cookieValue = getCookieConsentValue('cookie-consent')
-    if (cookieValue === 'true') {
-      setConsentGranted(true)
-    }
-  }, [])
-
   const handleClick = () => {
     const cookieValue = getCookieConsentValue('cookie-consent')
 
     if (cookieValue === 'false') {
       resetCookieConsentValue('cookie-consent')
-      location.reload()
+      signIn()
       return
     }
 
@@ -47,8 +38,7 @@ const LoginButton = () => {
     }
   }
 
-  if (!consentGranted || !data)
-    return <Button handleClick={handleClick} text={t('signIn')} />
+  if (!data) return <Button handleClick={handleClick} text={t('signIn')} />
 
   return (
     <Button handleClick={() => signOut()} text={t('signOut')}>

src/app/[locale]/components/atoms/ui/Button.module.css

@@ -30,7 +30,6 @@
 .button {
     display: flex;
     width: 100%;
-    max-width: 132px;
     max-height: 37.14px;
     box-sizing: border-box;
     align-items: center;
@@ -88,3 +87,12 @@
     }
 }
 
+.button-provider {
+    /* min-width: 250px; */
+    max-width: 250px;
+    justify-content: start;
+
+    & .text {
+        width: 100%;
+    }
+}

src/app/[locale]/components/atoms/ui/Button.tsx

@@ -7,6 +7,7 @@ type Props = {
   textHover?: string
   text?: string
   children?: React.ReactNode
+  className?: string
 }
 
 const Button = ({
@@ -16,24 +17,27 @@ const Button = ({
   textHover,
   text,
   children,
+  className = '',
 }: Props) => {
   return (
-    <div className={styles['container']}>
+    <div className={`${styles['container']} ${styles[className]}`}>
       {textHover && disabled && (
         <div className={styles['before']}> {textHover} </div>
       )}
       <button
-        className={styles['button']}
+        className={`${styles['button']}`}
         disabled={disabled}
-        style={{ backgroundColor: color ? `var(${color})` : 'defaultColor' }}
+        style={{
+          backgroundColor: color ? `var(${color})` : 'defaultColor',
+        }}
         type="button"
         onClick={(event) => {
           event.preventDefault()
           handleClick(event)
         }}
       >
         {children}
-        {text && <span className={styles.text}>{text}</span>}
+        {text && <span className={styles['text']}>{text}</span>}
       </button>
     </div>
   )

src/app/[locale]/components/molecules/gdpr/Notice.jsx → src/app/[locale]/components/molecules/gdpr/Notice.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import toast from 'react-hot-toast'
 import { useTranslations } from 'next-intl'
 
 import CookieConsent from 'react-cookie-consent'
@@ -9,14 +8,11 @@ import Link from 'next/link'
 
 import styles from './Notice.module.css'
 
-import { toastStyle } from '@/libs/toast'
-
 const Notice = () => {
   const t = useTranslations('Notice')
 
   return (
     <CookieConsent
-      enableDeclineButton // Habilitar el botón de declinar
       buttonStyle={{
         color: '#F9FBFC',
         background: '#7E56DA',
@@ -25,12 +21,6 @@ const Notice = () => {
       }} // estilos del botón de aceptar
       buttonText={t('CookieConsent.Button.agree')} // Texto del botón de aceptar
       cookieName="cookie-consent" // Nombre de la cookie
-      declineButtonStyle={{
-        fontWeight: 'bold',
-        color: '#FFFFFF',
-        background: '#FF0000',
-      }}
-      declineButtonText={t('CookieConsent.Button.decline')} // Texto del botón de declinar
       expires={30} // Los días que dura para expirar la cookie
       hideOnDecline={true} // Ocultar al declinar
       location="bottom" // Ubicación - top, bottom
@@ -41,12 +31,6 @@ const Notice = () => {
         minHeight: '80px',
         fontSize: 'var(--font-size-sm)',
       }} // Estilo del banner
-      onDecline={() => {
-        toast(`${t('CookieConsent.Toast.onDecline')}.`, {
-          style: toastStyle,
-          duration: 5000,
-        })
-      }}
     >
       <strong>{`${t('CookieConsent.intro')}. `}</strong>
       {`${t('CookieConsent.notice')} `}

src/app/[locale]/components/organisms/login/Login.module.css

@@ -1,7 +1,8 @@
 .login-container {
     display: flex;
-    width: 100%;
-    height: 65vh;
+    max-width: 400px;
+    margin: 0 auto;
+    min-height: 65vh;
     flex-direction: column;
     justify-content: space-between;
     padding: var(--padding);
@@ -17,7 +18,6 @@
         font-size: var(--font-size-micro);
         line-height: 1.4;
 
-
         & .helper-text-link {
             color: var(--color-purple-500);
             text-decoration: none;
@@ -32,6 +32,7 @@
         display: flex;
         width: 100%;
         flex-direction: column;
+        justify-content: center;
         gap: 16px;
 
         /* Estos estilos serviran para cuando tengamos más de un provider */

src/app/[locale]/components/organisms/login/Login.jsx → src/app/[locale]/components/organisms/login/Login.tsx

@@ -8,25 +8,43 @@ import { useSearchParams } from 'next/navigation'
 
 import { useTranslations } from 'next-intl'
 
+import { useEffect, useState } from 'react'
+
+import { getCookieConsentValue } from 'react-cookie-consent'
+
 import styles from './Login.module.css'
 
+import Button from '@/components/atoms/ui/Button'
+
 const Login = () => {
   const t = useTranslations('Login')
 
   const searchParams = useSearchParams()
   const callbackUrl = searchParams?.get('callbackUrl') ?? '/'
 
+  const [consentGranted, setConsentGranted] = useState(false)
+
+  useEffect(() => {
+    const cookieValue = getCookieConsentValue('cookie-consent')
+    if (cookieValue === 'true') {
+      setConsentGranted(true)
+    }
+  }, [])
+
   return (
     <>
       <div className={styles['login-container']}>
         <div className="">
           <span className={styles['paragraph']}>{`${t('instructions')}.`}</span>
         </div>
-
         <div className={styles['providers-button']}>
-          <button
-            className={`${styles['provider']} ${styles['google-provider']}`}
-            onClick={() => signIn('google', { callbackUrl })}
+          <Button
+            className={'button-provider'}
+            color={'--color-btn-google'}
+            disabled={!consentGranted}
+            handleClick={() => signIn('google', { callbackUrl })}
+            text={t('Providers.Google.text')}
+            textHover={t('Providers.Google.hover')}
           >
             <Image
               alt={t('Providers.Google.altImg')}
@@ -35,12 +53,8 @@ const Login = () => {
               src="/img/auth/google.svg"
               width={32}
             />
-            <span className={styles['name-provider']}>
-              {t('Providers.Google.text')}
-            </span>
-          </button>
+          </Button>
         </div>
-
         <div className="">
           <span className={styles['helper-text']}>
             {t('HelperText.TermsOfUse.text')}{' '}

src/messages/en.json

@@ -106,6 +106,7 @@
     "Providers": {
       "Google": {
         "text": "Continue with Google",
+        "hover": "Cookies are required",
         "altImg": "Sign in with Google"
       }
     },
@@ -137,11 +138,7 @@
       "notice": "We use cookies to enhance your browsing experience and provide personalized content. To learn more about how we use cookies and your options, check out our ",
       "link": "Terms and conditions of Use",
       "Button": {
-        "agree": "Let's go!",
-        "decline": "I decline"
-      },
-      "Toast": {
-        "onDecline": "Sorry to hear that. If you change your mind and decide to use extra functions, we will ask you again"
+        "agree": "Let's go!"
       }
     }
   },

src/messages/es.json

@@ -106,6 +106,7 @@
     "Providers": {
       "Google": {
         "text": "Continuar con Google",
+        "hover": "Las cookies son requeridas",
         "altImg": "Iniciar sesión con Google"
       }
     },
@@ -137,11 +138,7 @@
       "notice": "Utilizamos cookies para mejorar tu experiencia de navegación y proporcionar contenido personalizado. Para obtener más información sobre cómo utilizamos las cookies y tus opciones, consulta nuestros ",
       "link": "Términos y Condiciones de Uso",
       "Button": {
-        "agree": "¡Claro que sí!",
-        "decline": "No acepto"
-      },
-      "Toast": {
-        "onDecline": "Lamentamos escuchar eso. Si cambias de opinión y decides utilizar las funciones extras, te lo volveremos a preguntar"
+        "agree": "¡Claro que sí!"
       }
     }
   },