@nextsparkjs/core 0.1.0-beta.83 → 0.1.0-beta.85

package/templates/app/dashboard/settings/layout.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { notFound } from 'next/navigation'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { SettingsSidebar } from '@nextsparkjs/core/components/settings/layouts/SettingsSidebar'
+import { MobileTopBar } from '@nextsparkjs/core/components/dashboard/mobile/MobileTopBar'
+import { MobileBottomNav } from '@nextsparkjs/core/components/dashboard/mobile/MobileBottomNav'
+import { ArrowLeft } from 'lucide-react'
+import { useState, useCallback, useEffect } from 'react'
+import { sel } from '@nextsparkjs/core/selectors'
+import { useTranslations } from 'next-intl'
+import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
+import { isSettingsPageEnabled } from '@nextsparkjs/core/lib/config/config-sync'
+
+/**
+ * Map of URL paths to settings page keys for validation
+ */
+const PATH_TO_PAGE_KEY: Record<string, string> = {
+  '/dashboard/settings/profile': 'profile',
+  '/dashboard/settings/security': 'security',
+  '/dashboard/settings/password': 'password',
+  '/dashboard/settings/notifications': 'notifications',
+  '/dashboard/settings/api-keys': 'api-keys',
+  '/dashboard/settings/billing': 'billing',
+  '/dashboard/settings/teams': 'teams',
+  '/dashboard/settings/teams/permissions': 'teams',
+  '/dashboard/settings/invoices': 'billing',
+}
+
+function SettingsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [statusMessage, setStatusMessage] = useState('')
+  const pathname = usePathname()
+  const t = useTranslations('settings')
+
+  // Validate if the current settings page is enabled
+  // This prevents access to disabled pages via direct URL
+  useEffect(() => {
+    const pageKey = PATH_TO_PAGE_KEY[pathname]
+
+    // If we have a page key mapping, check if it's enabled
+    if (pageKey) {
+      const enabled = isSettingsPageEnabled(pageKey)
+      if (!enabled) {
+        notFound()
+      }
+    }
+    // For paths not in the mapping (like /dashboard/settings itself), allow access
+  }, [pathname])
+
+  const handleBackToDashboard = useCallback(() => {
+    setStatusMessage(t('navigation.backToDashboard'))
+  }, [t])
+
+  return (
+    <>
+      {/* MANDATORY: Screen reader announcements */}
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {statusMessage}
+      </div>
+
+      {/* Mobile only - TopBar */}
+      <MobileTopBar />
+
+      {/* Mobile only - BottomNav */}
+      <MobileBottomNav />
+
+      <div
+        className="min-h-screen bg-gradient-to-b from-background to-muted/20"
+        data-cy={sel('settings.sidebar.layout.main')}
+      >
+        <div className="max-w-7xl mx-auto p-4 lg:p-6 pt-16 pb-24 lg:pt-6 lg:pb-6">
+          {/* Back Button - Desktop only */}
+          <nav
+            className="mb-6 hidden lg:block"
+            aria-label={t('navigation.ariaLabel')}
+            data-cy={sel('settings.sidebar.nav.container')}
+          >
+            <Link href="/dashboard">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="gap-2"
+                onClick={handleBackToDashboard}
+                aria-label={t('navigation.backToDashboard')}
+                data-cy={sel('settings.sidebar.backButton')}
+              >
+                <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+                {t('navigation.backButton')}
+              </Button>
+            </Link>
+          </nav>
+
+          {/* Header - Desktop only */}
+          <header
+            className="mb-8 hidden lg:block"
+            data-cy={sel('settings.sidebar.layout.header')}
+          >
+            <h1
+              className="text-3xl font-bold"
+              id="settings-main-heading"
+            >
+              {t('layout.title')}
+            </h1>
+            <p
+              className="text-muted-foreground text-sm mt-1"
+            >
+              {t('layout.description')}
+            </p>
+          </header>
+
+          {/* Main Content */}
+          <main
+            className="flex flex-col lg:flex-row gap-0 lg:gap-8"
+            aria-labelledby="settings-main-heading"
+            data-cy={sel('settings.sidebar.layout.contentArea')}
+          >
+            {/* Settings Sidebar - Desktop only */}
+            <aside
+              className="w-64 hidden lg:block"
+              aria-label={t('layout.sidebarLabel')}
+              data-cy={sel('settings.sidebar.container')}
+            >
+              <SettingsSidebar />
+            </aside>
+
+            {/* Content Area */}
+            <section
+              className="flex-1 w-full"
+              aria-label={t('layout.contentLabel')}
+              data-cy={sel('settings.sidebar.layout.pageContent')}
+            >
+              {children}
+            </section>
+          </main>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default getTemplateOrDefaultClient('app/dashboard/settings/layout.tsx', SettingsLayout)

package/templates/app/dashboard/settings/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonSettingsOverview } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function SettingsLoading() {
+  return <SkeletonSettingsOverview />
+}

package/templates/app/dashboard/settings/notifications/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonNotificationsPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function NotificationsLoading() {
+  return <SkeletonNotificationsPage />
+}

package/templates/app/dashboard/settings/notifications/page.tsx

@@ -0,0 +1,462 @@
+'use client'
+
+
+import { useState, useCallback, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import { Switch } from '@nextsparkjs/core/components/ui/switch'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { toast } from 'sonner'
+import { 
+  Mail, 
+  Smartphone, 
+  MessageSquare, 
+  Shield,
+  Zap,
+  Save,
+  Loader2
+} from 'lucide-react'
+import { sel } from '@nextsparkjs/core/selectors'
+import { useTranslations } from 'next-intl'
+import { useUserWithMetaSettings } from '@nextsparkjs/core/hooks/useUserSettings'
+import { NotificationsPageSkeleton } from '@nextsparkjs/core/components/settings/SettingsPageSkeleton'
+import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
+
+function NotificationsPage() {
+  const t = useTranslations('settings')
+  
+  // Hook para manejar user metadata con autenticación de sesión
+  const { 
+    data: userData, 
+    isLoading: isLoadingUser,
+    updateEntity: updateUserMeta,
+    isUpdating 
+  } = useUserWithMetaSettings()
+  
+  // Estado para el master switch de push notifications
+  const [pushNotificationsEnabled, setPushNotificationsEnabled] = useState(true)
+  
+  // Estados individuales para cada notificación
+  const [notificationSettings, setNotificationSettings] = useState({
+    login_alerts: { email: true, push: true },
+    password_changes: { email: true, push: true },
+    suspicious_activity: { email: true, push: true },
+    mentions: { email: true, push: true },
+    project_updates: { email: true, push: false },
+    team_invites: { email: true, push: true },
+    newsletter: { email: false, push: false },
+    promotions: { email: false, push: false },
+    feature_announcements: { email: true, push: false },
+  })
+
+  const [statusMessage, setStatusMessage] = useState('')
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
+
+  // Cargar configuraciones desde metadata al montar el componente
+  useEffect(() => {
+    if (userData?.meta?.notificationsPreferences) {
+      const notifPrefs = userData.meta.notificationsPreferences as Record<string, unknown>
+      
+      // Cargar configuración de push notifications
+      if (notifPrefs.pushEnabled !== undefined) {
+        setPushNotificationsEnabled(notifPrefs.pushEnabled as boolean)
+      }
+      
+      // Cargar configuraciones individuales de notificaciones
+      setNotificationSettings({
+        login_alerts: { 
+          email: (notifPrefs.loginAlertsEmail as boolean) ?? true, 
+          push: (notifPrefs.loginAlertsPush as boolean) ?? true 
+        },
+        password_changes: { 
+          email: (notifPrefs.passwordChangesEmail as boolean) ?? true, 
+          push: (notifPrefs.passwordChangesPush as boolean) ?? true 
+        },
+        suspicious_activity: { 
+          email: (notifPrefs.suspiciousActivityEmail as boolean) ?? true, 
+          push: (notifPrefs.suspiciousActivityPush as boolean) ?? true 
+        },
+        mentions: { 
+          email: (notifPrefs.mentionsEmail as boolean) ?? true, 
+          push: (notifPrefs.mentionsPush as boolean) ?? true 
+        },
+        project_updates: { 
+          email: (notifPrefs.projectUpdatesEmail as boolean) ?? true, 
+          push: (notifPrefs.projectUpdatesPush as boolean) ?? false 
+        },
+        team_invites: { 
+          email: (notifPrefs.teamInvitesEmail as boolean) ?? true, 
+          push: (notifPrefs.teamInvitesPush as boolean) ?? true 
+        },
+        newsletter: { 
+          email: (notifPrefs.newsletterEmail as boolean) ?? false, 
+          push: (notifPrefs.newsletterPush as boolean) ?? false 
+        },
+        promotions: { 
+          email: (notifPrefs.promotionsEmail as boolean) ?? false, 
+          push: (notifPrefs.promotionsPush as boolean) ?? false 
+        },
+        feature_announcements: { 
+          email: (notifPrefs.featureAnnouncementsEmail as boolean) ?? true, 
+          push: (notifPrefs.featureAnnouncementsPush as boolean) ?? false 
+        }
+      })
+      setHasUnsavedChanges(false)
+    }
+  }, [userData?.meta])
+
+  const notificationTypes = [
+    {
+      category: t('notifications.categories.security.title'),
+      icon: <Shield className="h-5 w-5 text-red-500" />,
+      description: t('notifications.categories.security.description'),
+      notifications: [
+        {
+          id: 'login_alerts',
+          title: t('notifications.types.loginAlerts.title'),
+          description: t('notifications.types.loginAlerts.description'),
+          email: notificationSettings.login_alerts.email,
+          push: notificationSettings.login_alerts.push,
+          required: true,
+        },
+        {
+          id: 'password_changes',
+          title: t('notifications.types.passwordChanges.title'),
+          description: t('notifications.types.passwordChanges.description'),
+          email: notificationSettings.password_changes.email,
+          push: notificationSettings.password_changes.push,
+          required: true,
+        },
+        {
+          id: 'suspicious_activity',
+          title: t('notifications.types.suspiciousActivity.title'),
+          description: t('notifications.types.suspiciousActivity.description'),
+          email: notificationSettings.suspicious_activity.email,
+          push: notificationSettings.suspicious_activity.push,
+          required: true,
+        },
+      ]
+    },
+    {
+      category: t('notifications.categories.activity.title'),
+      icon: <Zap className="h-5 w-5 text-blue-500" />,
+      description: t('notifications.categories.activity.description'),
+      notifications: [
+        {
+          id: 'mentions',
+          title: t('notifications.types.mentions.title'),
+          description: t('notifications.types.mentions.description'),
+          email: notificationSettings.mentions.email,
+          push: notificationSettings.mentions.push,
+          required: false,
+        },
+        {
+          id: 'project_updates',
+          title: t('notifications.types.projectUpdates.title'),
+          description: t('notifications.types.projectUpdates.description'),
+          email: notificationSettings.project_updates.email,
+          push: notificationSettings.project_updates.push,
+          required: false,
+        },
+        {
+          id: 'team_invites',
+          title: t('notifications.types.teamInvites.title'),
+          description: t('notifications.types.teamInvites.description'),
+          email: notificationSettings.team_invites.email,
+          push: notificationSettings.team_invites.push,
+          required: false,
+        },
+      ]
+    },
+    {
+      category: t('notifications.categories.marketing.title'),
+      icon: <MessageSquare className="h-5 w-5 text-green-500" />,
+      description: t('notifications.categories.marketing.description'),
+      notifications: [
+        {
+          id: 'newsletter',
+          title: t('notifications.types.newsletter.title'),
+          description: t('notifications.types.newsletter.description'),
+          email: notificationSettings.newsletter.email,
+          push: notificationSettings.newsletter.push,
+          required: false,
+        },
+        {
+          id: 'promotions',
+          title: t('notifications.types.promotions.title'),
+          description: t('notifications.types.promotions.description'),
+          email: notificationSettings.promotions.email,
+          push: notificationSettings.promotions.push,
+          required: false,
+        },
+        {
+          id: 'feature_announcements',
+          title: t('notifications.types.featureAnnouncements.title'),
+          description: t('notifications.types.featureAnnouncements.description'),
+          email: notificationSettings.feature_announcements.email,
+          push: notificationSettings.feature_announcements.push,
+          required: false,
+        },
+      ]
+    }
+  ]
+
+  const handleNotificationToggle = useCallback((notificationId: string, type: 'email' | 'push') => {
+    setNotificationSettings(prev => ({
+      ...prev,
+      [notificationId]: {
+        ...prev[notificationId as keyof typeof prev],
+        [type]: !prev[notificationId as keyof typeof prev][type]
+      }
+    }))
+    
+    const currentValue = notificationSettings[notificationId as keyof typeof notificationSettings][type]
+    const status = currentValue ? t('notifications.labels.disabled') : t('notifications.labels.enabled')
+    setStatusMessage(t('notifications.messages.notificationToggled', { type: type, notification: notificationId, status: status }))
+    setHasUnsavedChanges(true)
+  }, [notificationSettings, t])
+
+  // Función para guardar configuraciones como metadata
+  const handleSaveSettings = useCallback(async () => {
+    try {
+      // Crear metadata en formato anidado
+      const notificationsPreferences = {
+        pushEnabled: pushNotificationsEnabled,
+        loginAlertsEmail: notificationSettings.login_alerts.email,
+        loginAlertsPush: notificationSettings.login_alerts.push,
+        passwordChangesEmail: notificationSettings.password_changes.email,
+        passwordChangesPush: notificationSettings.password_changes.push,
+        suspiciousActivityEmail: notificationSettings.suspicious_activity.email,
+        suspiciousActivityPush: notificationSettings.suspicious_activity.push,
+        mentionsEmail: notificationSettings.mentions.email,
+        mentionsPush: notificationSettings.mentions.push,
+        projectUpdatesEmail: notificationSettings.project_updates.email,
+        projectUpdatesPush: notificationSettings.project_updates.push,
+        teamInvitesEmail: notificationSettings.team_invites.email,
+        teamInvitesPush: notificationSettings.team_invites.push,
+        newsletterEmail: notificationSettings.newsletter.email,
+        newsletterPush: notificationSettings.newsletter.push,
+        promotionsEmail: notificationSettings.promotions.email,
+        promotionsPush: notificationSettings.promotions.push,
+        featureAnnouncementsEmail: notificationSettings.feature_announcements.email,
+        featureAnnouncementsPush: notificationSettings.feature_announcements.push,
+      }
+
+      await updateUserMeta({
+        meta: {
+          notificationsPreferences
+        }
+      })
+
+      setHasUnsavedChanges(false)
+      toast.success(t('notifications.messages.saveSuccess'), {
+        description: t('notifications.messages.saveSuccessDescription'),
+      })
+    } catch (error) {
+      console.error('Error saving notification settings:', error)
+      toast.error(t('notifications.messages.saveError'), {
+        description: t('notifications.messages.saveErrorDescription'),
+      })
+    }
+  }, [pushNotificationsEnabled, notificationSettings, updateUserMeta, t])
+
+  // Mostrar skeleton mientras cargan los datos
+  if (isLoadingUser) {
+    return <NotificationsPageSkeleton />
+  }
+
+  return (
+    <>
+      {/* MANDATORY: Screen reader announcements */}
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {statusMessage}
+      </div>
+
+      <div
+        className="max-w-4xl"
+        data-cy={sel('settings.notifications.container')}
+      >
+        <div className="space-y-6">
+          {/* Header */}
+          <header>
+            <h1
+              className="text-2xl font-bold"
+              id="notifications-heading"
+            >
+              {t('notifications.title')}
+            </h1>
+            <p className="text-muted-foreground mt-1">
+              {t('notifications.description')}
+            </p>
+          </header>
+
+        {/* Main Configuration Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('notifications.main.title')}</CardTitle>
+            <CardDescription>
+              {t('notifications.main.description')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-8">
+            {/* Canales de Notificación */}
+            <div className="space-y-6">
+              <h3 className="text-lg font-semibold flex items-center gap-2">
+                <Smartphone className="h-5 w-5" />
+                {t('notifications.channels.title')}
+              </h3>
+              
+              {/* Push Notifications Master Switch */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-3">
+                    <Smartphone className="h-5 w-5" />
+                    <h4 className="font-medium">{t('notifications.channels.push.title')}</h4>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {t('notifications.channels.push.description')}
+                  </p>
+                </div>
+                <div className="flex justify-end">
+                  <div className="flex items-center gap-3">
+                    <Badge variant={pushNotificationsEnabled ? 'default' : 'secondary'}>
+                      {pushNotificationsEnabled ? t('notifications.channels.push.enabled') : t('notifications.channels.push.disabled')}
+                    </Badge>
+                    <Switch
+                      checked={pushNotificationsEnabled}
+                      onCheckedChange={(checked: boolean) => {
+                        setPushNotificationsEnabled(checked)
+                        setStatusMessage(checked ? t('notifications.messages.pushEnabled') : t('notifications.messages.pushDisabled'))
+                        setHasUnsavedChanges(true)
+                      }}
+                      aria-label={pushNotificationsEnabled ? t('notifications.channels.push.ariaEnabled') : t('notifications.channels.push.ariaDisabled')}
+                      data-cy={sel('settings.notifications.pushToggle')}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Email Notifications Info */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-3">
+                    <Mail className="h-5 w-5" />
+                    <h4 className="font-medium">{t('notifications.channels.email.title')}</h4>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {t('notifications.channels.email.description')}
+                  </p>
+                </div>
+                <div className="flex justify-end">
+                  <Badge variant="outline">{t('notifications.channels.email.alwaysEnabled')}</Badge>
+                </div>
+              </div>
+            </div>
+
+            {/* Divisor */}
+            <hr className="border-muted" />
+
+            {/* Tipos de Notificaciones */}
+            {notificationTypes.map((type, index) => (
+              <div
+                key={index}
+                className="space-y-6"
+                data-cy={sel('settings.notifications.category.container', { category: type.category.toLowerCase().replace(/\s+/g, '-') })}
+              >
+                <h3 className="text-lg font-semibold flex items-center gap-2">
+                  {type.icon}
+                  {type.category}
+                </h3>
+                
+                <div className="space-y-6">
+                  {type.notifications.map((notification) => (
+                    <div
+                      key={notification.id}
+                      className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center"
+                    >
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          <h4 className="font-medium">{notification.title}</h4>
+                          {notification.required && (
+                            <Badge variant="outline" className="text-xs">
+                              {t('notifications.labels.required')}
+                            </Badge>
+                          )}
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          {notification.description}
+                        </p>
+                      </div>
+                      
+                      <div className="flex justify-end">
+                        <div className="flex items-center gap-6">
+                          {/* Email Toggle */}
+                          <div className="flex items-center gap-2">
+                            <Mail className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm">{t('notifications.labels.email')}</span>
+                            <Switch
+                              checked={notification.email}
+                              disabled={notification.required}
+                              onCheckedChange={() => handleNotificationToggle(notification.id, 'email')}
+                              aria-label={t('notifications.labels.emailAriaLabel', { title: notification.title, status: notification.email ? t('notifications.labels.enabled') : t('notifications.labels.disabled') })}
+                            />
+                          </div>
+                          
+                          {/* Push Toggle */}
+                          <div className="flex items-center gap-2">
+                            <Smartphone className="h-4 w-4 text-muted-foreground" />
+                            <span className="text-sm">{t('notifications.labels.push')}</span>
+                            <Switch
+                              checked={notification.push && pushNotificationsEnabled}
+                              disabled={notification.required || !pushNotificationsEnabled}
+                              onCheckedChange={() => handleNotificationToggle(notification.id, 'push')}
+                              aria-label={t('notifications.labels.pushAriaLabel', { title: notification.title, status: (notification.push && pushNotificationsEnabled) ? t('notifications.labels.enabled') : t('notifications.labels.disabled') })}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Divisor entre secciones (excepto la última) */}
+                {index < notificationTypes.length - 1 && (
+                  <hr className="border-muted" />
+                )}
+              </div>
+            ))}
+
+            {/* Botón de Guardar */}
+            <div className="flex justify-end pt-6 border-t border-muted">
+              <Button
+                onClick={handleSaveSettings}
+                disabled={!hasUnsavedChanges || isUpdating || isLoadingUser}
+                className="min-w-[120px]"
+                data-cy={sel('settings.notifications.submitButton')}
+              >
+                {isUpdating ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    {t('notifications.buttons.saving')}
+                  </>
+                ) : (
+                  <>
+                    <Save className="h-4 w-4 mr-2" />
+                    {t('notifications.buttons.save')}
+                  </>
+                )}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default getTemplateOrDefaultClient('app/dashboard/settings/notifications/page.tsx', NotificationsPage)