feat(next): adds support for resetting preferences

packages/next/src/views/Account/ResetPreferences/ConfirmResetModal/index.scss

@@ -0,0 +1,40 @@
+@import '../../../../scss/styles.scss';
+
+@layer payload-default {
+  .reset-preferences-modal {
+    @include blur-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(2);
+      padding: base(2);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(1);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
+
+      .btn {
+        margin: 0;
+        margin-block: 0;
+      }
+    }
+  }
+}

packages/next/src/views/Account/ResetPreferences/ConfirmResetModal/index.tsx

@@ -0,0 +1,42 @@
+'use client'
+import { Button, Modal, useModal, useTranslation } from '@payloadcms/ui'
+
+import './index.scss'
+
+const baseClass = 'reset-preferences-modal'
+
+export const ConfirmResetModal: React.FC<{
+  readonly onConfirm: () => void
+  readonly slug: string
+}> = ({ slug, onConfirm }) => {
+  const { closeModal } = useModal()
+  const { t } = useTranslation()
+
+  const handleClose = () => closeModal(slug)
+
+  const handleConfirm = () => {
+    handleClose()
+    if (typeof onConfirm === 'function') {
+      onConfirm()
+    }
+  }
+
+  return (
+    <Modal className={baseClass} slug={slug}>
+      <div className={`${baseClass}__wrapper`}>
+        <div className={`${baseClass}__content`}>
+          <h1>{t('general:resetPreferences')}?</h1>
+          <p>{t('general:resetPreferencesDescription')}</p>
+        </div>
+        <div className={`${baseClass}__controls`}>
+          <Button buttonStyle="secondary" onClick={handleClose} size="large">
+            {t('general:cancel')}
+          </Button>
+          <Button onClick={handleConfirm} size="large">
+            {t('general:confirm')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

packages/next/src/views/Account/ResetPreferences/index.tsx

@@ -0,0 +1,74 @@
+'use client'
+import type { User } from 'payload'
+
+import { Button, LoadingOverlay, toast, useModal, useTranslation } from '@payloadcms/ui'
+import * as qs from 'qs-esm'
+import { useCallback, useState } from 'react'
+
+import { ConfirmResetModal } from './ConfirmResetModal/index.js'
+
+const confirmResetModalSlug = 'confirm-reset-modal'
+
+export const ResetPreferencesButton: React.FC<{
+  readonly apiRoute: string
+  readonly user?: User
+}> = ({ apiRoute, user }) => {
+  const { openModal } = useModal()
+  const { t } = useTranslation()
+
+  const [loading, setLoading] = useState(false)
+
+  const handleResetPreferences = useCallback(async () => {
+    if (!user || loading) {
+      return
+    }
+    setLoading(true)
+
+    const stringifiedQuery = qs.stringify(
+      {
+        depth: 0,
+        where: {
+          user: {
+            id: {
+              equals: user.id,
+            },
+          },
+        },
+      },
+      { addQueryPrefix: true },
+    )
+
+    try {
+      const res = await fetch(`${apiRoute}/payload-preferences${stringifiedQuery}`, {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'DELETE',
+      })
+
+      const json = await res.json()
+      const message = json.message
+
+      if (res.ok) {
+        toast.success(message)
+      } else {
+        toast.error(message)
+      }
+    } catch (e) {
+      // swallow error
+    } finally {
+      setLoading(false)
+    }
+  }, [apiRoute, loading, user])
+
+  return (
+    <div>
+      <Button buttonStyle="secondary" onClick={() => openModal(confirmResetModalSlug)}>
+        {t('general:resetPreferences')}
+      </Button>
+      <ConfirmResetModal onConfirm={handleResetPreferences} slug={confirmResetModalSlug} />
+      {loading && <LoadingOverlay loadingText={t('general:resettingPreferences')} />}
+    </div>
+  )
+}

packages/next/src/views/Account/Settings/index.tsx

@@ -1,11 +1,12 @@
 import type { I18n } from '@payloadcms/translations'
-import type { Config, LanguageOptions } from 'payload'
+import type { BasePayload, Config, LanguageOptions, User } from 'payload'
 
 import { FieldLabel } from '@payloadcms/ui'
 import React from 'react'
 
-import { ToggleTheme } from '../ToggleTheme/index.js'
+import { ResetPreferencesButton } from '../ResetPreferences/index.js'
 import './index.scss'
+import { ToggleTheme } from '../ToggleTheme/index.js'
 import { LanguageSelector } from './LanguageSelector.js'
 
 const baseClass = 'payload-settings'
@@ -14,9 +15,14 @@ export const Settings: React.FC<{
   readonly className?: string
   readonly i18n: I18n
   readonly languageOptions: LanguageOptions
+  readonly payload: BasePayload
   readonly theme: Config['admin']['theme']
+  readonly user?: User
 }> = (props) => {
-  const { className, i18n, languageOptions, theme } = props
+  const { className, i18n, languageOptions, payload, theme, user } = props
+
+  let apiRoute = payload.config?.routes?.api || '/api'
+  apiRoute = apiRoute.endsWith('/') ? apiRoute.slice(0, -1) : apiRoute
 
   return (
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
@@ -26,6 +32,7 @@ export const Settings: React.FC<{
         <LanguageSelector languageOptions={languageOptions} />
       </div>
       {theme === 'all' && <ToggleTheme />}
+      <ResetPreferencesButton apiRoute={apiRoute} user={user} />
     </div>
   )
 }

packages/next/src/views/Account/index.tsx

@@ -111,7 +111,15 @@ export const Account: React.FC<AdminViewProps> = async ({
 
     return (
       <DocumentInfoProvider
-        AfterFields={<Settings i18n={i18n} languageOptions={languageOptions} theme={theme} />}
+        AfterFields={
+          <Settings
+            i18n={i18n}
+            languageOptions={languageOptions}
+            payload={payload}
+            theme={theme}
+            user={user}
+          />
+        }
         apiURL={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`}
         collectionSlug={userSlug}
         currentEditor={currentEditor}

packages/translations/src/clientKeys.ts

@@ -236,6 +236,9 @@ export const clientTranslationKeys = createClientTranslationKeys([
   'general:reindexingAll',
   'general:remove',
   'general:reset',
+  'general:resetPreferences',
+  'general:resetPreferencesDescription',
+  'general:resettingPreferences',
   'general:row',
   'general:rows',
   'general:save',

packages/translations/src/languages/ar.ts

@@ -295,6 +295,10 @@ export const arTranslations: DefaultTranslationsObject = {
     reindexingAll: 'جاري إعادة فهرسة جميع {{collections}}.',
     remove: 'إزالة',
     reset: 'إعادة تعيين',
+    resetPreferences: 'إعادة تعيين التفضيلات',
+    resetPreferencesDescription:
+      'سيؤدي ذلك إلى إعادة تعيين جميع تفضيلاتك إلى الإعدادات الافتراضية.',
+    resettingPreferences: 'إعادة تعيين التفضيلات.',
     row: 'سطر',
     rows: 'أسطُر',
     save: 'حفظ',

packages/translations/src/languages/az.ts

@@ -299,6 +299,9 @@ export const azTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Bütün {{collections}} yenidən indekslənir.',
     remove: 'Sil',
     reset: 'Yenidən başlat',
+    resetPreferences: 'Təhlükəsizlik parametrlərini sıfırlamaq',
+    resetPreferencesDescription: 'Bu, bütün parametrlərinizi standart vəziyyətlərinə sıfırlayacaq.',
+    resettingPreferences: 'Təhlükəsizlik parametrləri sıfırlanır.',
     row: 'Sətir',
     rows: 'Sətirlər',
     save: 'Saxla',

packages/translations/src/languages/bg.ts

@@ -298,6 +298,10 @@ export const bgTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Преиндексиране на всички {{collections}}.',
     remove: 'Премахни',
     reset: 'Нулиране',
+    resetPreferences: 'Нулиране на предпочитанията',
+    resetPreferencesDescription:
+      'Това ще нулира всички ваши предпочитания до техните настройки по подразбиране.',
+    resettingPreferences: 'Нулиране на предпочитанията.',
     row: 'ред',
     rows: 'Редове',
     save: 'Запази',

packages/translations/src/languages/ca.ts

@@ -299,6 +299,10 @@ export const caTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Reindexa tots el {{collections}}.',
     remove: 'Elimina',
     reset: 'Restableix',
+    resetPreferences: 'Restablir les preferències',
+    resetPreferencesDescription:
+      'Això restablirà totes les teves preferències a les configuracions per defecte.',
+    resettingPreferences: 'Restablint les preferències.',
     row: 'Fila',
     rows: 'Files',
     save: 'Desa',

packages/translations/src/languages/cs.ts

@@ -297,6 +297,9 @@ export const csTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Přeindexování všech {{collections}}.',
     remove: 'Odstranit',
     reset: 'Resetovat',
+    resetPreferences: 'Obnovit nastavení',
+    resetPreferencesDescription: 'Toto obnoví všechna vaše nastavení na výchozí hodnoty.',
+    resettingPreferences: 'Obnovování nastavení.',
     row: 'Řádek',
     rows: 'Řádky',
     save: 'Uložit',

packages/translations/src/languages/da.ts

@@ -297,6 +297,10 @@ export const daTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Genindekserer alle {{collections}}.',
     remove: 'Fjern',
     reset: 'Nulstil',
+    resetPreferences: 'Nulstil præferencer',
+    resetPreferencesDescription:
+      'Dette vil nulstille alle dine præferencer til standardindstillingerne.',
+    resettingPreferences: 'Nulstiller præferencer.',
     row: 'Række',
     rows: 'Rækker',
     save: 'Gem',

packages/translations/src/languages/de.ts

@@ -303,6 +303,9 @@ export const deTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Alle {{collections}} werden neu indiziert.',
     remove: 'Entfernen',
     reset: 'Zurücksetzen',
+    resetPreferences: 'Präferenzen zurücksetzen',
+    resetPreferencesDescription: 'Dies setzt alle Ihre Präferenzen auf die Standardwerte zurück.',
+    resettingPreferences: 'Präferenzen werden zurückgesetzt.',
     row: 'Zeile',
     rows: 'Zeilen',
     save: 'Speichern',

packages/translations/src/languages/en.ts

@@ -299,6 +299,10 @@ export const enTranslations = {
     reindexingAll: 'Reindexing all {{collections}}.',
     remove: 'Remove',
     reset: 'Reset',
+    resetPreferences: 'Reset Preferences',
+    resetPreferencesDescription:
+      'This will reset all of your preferences to their default settings.',
+    resettingPreferences: 'Resetting Preferences.',
     row: 'Row',
     rows: 'Rows',
     save: 'Save',

packages/translations/src/languages/es.ts

@@ -303,6 +303,10 @@ export const esTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Reindexando todas las {{collections}}.',
     remove: 'Remover',
     reset: 'Reiniciar',
+    resetPreferences: 'Restablecer preferencias',
+    resetPreferencesDescription:
+      'Esto restablecerá todas tus preferencias a la configuración predeterminada.',
+    resettingPreferences: 'Restableciendo preferencias.',
     row: 'Fila',
     rows: 'Filas',
     save: 'Guardar',

packages/translations/src/languages/et.ts

@@ -296,6 +296,9 @@ export const etTranslations = {
     reindexingAll: 'Indekseerin uuesti kõik {{collections}}.',
     remove: 'Eemalda',
     reset: 'Lähtesta',
+    resetPreferences: 'Lähtesta eelistused',
+    resetPreferencesDescription: 'See lähtestab kõik teie eelistused vaikeväärtustele.',
+    resettingPreferences: 'Lähtestan eelistusi.',
     row: 'Rida',
     rows: 'Read',
     save: 'Salvesta',

packages/translations/src/languages/fa.ts

@@ -297,6 +297,9 @@ export const faTranslations: DefaultTranslationsObject = {
     reindexingAll: 'در حال بازایندکس همه {{collections}}.',
     remove: 'برداشتن',
     reset: 'بازنشانی',
+    resetPreferences: 'بازنشانی تنظیمات',
+    resetPreferencesDescription: 'این تمام تنظیمات شما را به تنظیمات پیش‌فرض بازنشانی خواهد کرد.',
+    resettingPreferences: 'در حال بازنشانی تنظیمات.',
     row: 'ردیف',
     rows: 'ردیف‌ها',
     save: 'ذخیره',

packages/translations/src/languages/fr.ts

@@ -306,6 +306,10 @@ export const frTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Réindexation de toutes les {{collections}}.',
     remove: 'Retirer',
     reset: 'Réinitialiser',
+    resetPreferences: 'Réinitialiser les préférences',
+    resetPreferencesDescription:
+      'Cela réinitialisera toutes vos préférences aux paramètres par défaut.',
+    resettingPreferences: 'Réinitialisation des préférences.',
     row: 'Ligne',
     rows: 'Lignes',
     save: 'Sauvegarder',

packages/translations/src/languages/he.ts

@@ -292,6 +292,9 @@ export const heTranslations: DefaultTranslationsObject = {
     reindexingAll: 'החזרת אינדקס לכל {{collections}}.',
     remove: 'הסר',
     reset: 'איפוס',
+    resetPreferences: 'איפוס העדפות',
+    resetPreferencesDescription: 'זאת תאפס את כל ההעדפות שלך להגדרות ברירת המחדל.',
+    resettingPreferences: 'מאפס העדפות.',
     row: 'שורה',
     rows: 'שורות',
     save: 'שמירה',

packages/translations/src/languages/hr.ts

@@ -299,6 +299,9 @@ export const hrTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Ponovno indeksiranje svih {{collections}}.',
     remove: 'Ukloni',
     reset: 'Ponovno postavi',
+    resetPreferences: 'Ponovno postavljanje postavki',
+    resetPreferencesDescription: 'Ovo će vratiti sve vaše postavke na zadane vrijednosti.',
+    resettingPreferences: 'Ponovno postavljanje postavki.',
     row: 'Red',
     rows: 'Redovi',
     save: 'Spremi',

packages/translations/src/languages/hu.ts

@@ -301,6 +301,10 @@ export const huTranslations: DefaultTranslationsObject = {
     reindexingAll: 'Az összes {{collections}} újraindexálása folyamatban.',
     remove: 'Törlés',
     reset: 'Visszaállítás',
+    resetPreferences: 'Beállítások visszaállítása',
+    resetPreferencesDescription:
+      'Ez visszaállítja az összes beállítást az alapértelmezett értékekre.',
+    resettingPreferences: 'Beállítások visszaállítása.',
     row: 'Sor',
     rows: 'Sorok',
     save: 'Mentés',

packages/translations/src/languages/it.ts

@@ -302,6 +302,10 @@ export const itTranslations: DefaultTranslationsObject = {
     reindexingAll: "Rifacendo l'indice di tutte le {{collections}}.",
     remove: 'Rimuovi',
     reset: 'Ripristina',
+    resetPreferences: 'Ripristina le preferenze',
+    resetPreferencesDescription:
+      'Questo ripristinerà tutte le tue preferenze alle impostazioni predefinite.',
+    resettingPreferences: 'Ripristinando le preferenze.',
     row: 'Riga',
     rows: 'Righe',
     save: 'Salva',