feat(ui): confirmation modal (#11271)

There are nearly a dozen independent implementations of the same modal
spread throughout the admin panel and various plugins. These modals are
used to confirm or cancel an action, such as deleting a document, bulk
publishing, etc. Each of these instances is nearly identical, leading to
unnecessary development efforts when creating them, inconsistent UI, and
duplicative stylesheets.

Everything is now standardized behind a new `ConfirmationModal`
component. This modal comes with a standard API that is flexible enough
to replace nearly every instance. This component has also been exported
for reuse.

Here is a basic example of how to use it:

```tsx
'use client'
import { ConfirmationModal, useModal } from '@payloadcms/ui'
import React, { Fragment } from 'react'

const modalSlug = 'my-confirmation-modal'

export function MyComponent() {
  const { openModal } = useModal()

  return (
    <Fragment>
      <button
        onClick={() => {
          openModal(modalSlug)
        }}
        type="button"
      >
        Do something
      </button>
      <ConfirmationModal
        heading="Are you sure?"
        body="Confirm or cancel before proceeding."
        modalSlug={modalSlug}
        onConfirm={({ closeConfirmationModal, setConfirming }) => {
          // do something
          setConfirming(false)
          closeConfirmationModal()
        }}
      />
    </Fragment>
  )
}
```

Author: jacobsfletch

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

@@ -1,11 +1,10 @@
 'use client'
+import type { OnConfirm } from '@payloadcms/ui'
 import type { User } from 'payload'
 
-import { Button, LoadingOverlay, toast, useModal, useTranslation } from '@payloadcms/ui'
+import { Button, ConfirmationModal, toast, useModal, useTranslation } from '@payloadcms/ui'
 import * as qs from 'qs-esm'
-import { Fragment, useCallback, useState } from 'react'
-
-import { ConfirmResetModal } from './ConfirmResetModal/index.js'
+import { Fragment, useCallback } from 'react'
 
 const confirmResetModalSlug = 'confirm-reset-modal'
 
@@ -16,51 +15,54 @@ export const ResetPreferences: React.FC<{
   const { openModal } = useModal()
   const { t } = useTranslation()
 
-  const [loading, setLoading] = useState(false)
-
-  const handleResetPreferences = useCallback(async () => {
-    if (!user || loading) {
-      return
-    }
-    setLoading(true)
+  const handleResetPreferences: OnConfirm = useCallback(
+    async ({ closeConfirmationModal, setConfirming }) => {
+      if (!user) {
+        setConfirming(false)
+        closeConfirmationModal()
+        return
+      }
 
-    const stringifiedQuery = qs.stringify(
-      {
-        depth: 0,
-        where: {
-          user: {
-            id: {
-              equals: user.id,
+      const stringifiedQuery = qs.stringify(
+        {
+          depth: 0,
+          where: {
+            user: {
+              id: {
+                equals: user.id,
+              },
             },
           },
         },
-      },
-      { addQueryPrefix: true },
-    )
+        { addQueryPrefix: true },
+      )
 
-    try {
-      const res = await fetch(`${apiRoute}/payload-preferences${stringifiedQuery}`, {
-        credentials: 'include',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        method: 'DELETE',
-      })
+      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
+        const json = await res.json()
+        const message = json.message
 
-      if (res.ok) {
-        toast.success(message)
-      } else {
-        toast.error(message)
+        if (res.ok) {
+          toast.success(message)
+        } else {
+          toast.error(message)
+        }
+      } catch (_err) {
+        // swallow error
+      } finally {
+        setConfirming(false)
+        closeConfirmationModal()
       }
-    } catch (e) {
-      // swallow error
-    } finally {
-      setLoading(false)
-    }
-  }, [apiRoute, loading, user])
+    },
+    [apiRoute, user],
+  )
 
   return (
     <Fragment>
@@ -69,8 +71,13 @@ export const ResetPreferences: React.FC<{
           {t('general:resetPreferences')}
         </Button>
       </div>
-      <ConfirmResetModal onConfirm={handleResetPreferences} slug={confirmResetModalSlug} />
-      {loading && <LoadingOverlay loadingText={t('general:resettingPreferences')} />}
+      <ConfirmationModal
+        body={t('general:resetPreferencesDescription')}
+        confirmingLabel={t('general:resettingPreferences')}
+        heading={t('general:resetPreferences')}
+        modalSlug={confirmResetModalSlug}
+        onConfirm={handleResetPreferences}
+      />
     </Fragment>
   )
 }

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

@@ -1,11 +1,10 @@
 'use client'
+import type { OnConfirm } from '@payloadcms/ui'
+
 import { getTranslation } from '@payloadcms/translations'
 import {
   Button,
-  ChevronIcon,
-  Modal,
-  Pill,
-  Popup,
+  ConfirmationModal,
   PopupList,
   useConfig,
   useModal,
@@ -45,7 +44,6 @@ const Restore: React.FC<Props> = ({
   const collectionConfig = getEntityConfig({ collectionSlug })
 
   const { toggleModal } = useModal()
-  const [processing, setProcessing] = useState(false)
   const router = useRouter()
   const { i18n, t } = useTranslation()
   const [draft, setDraft] = useState(false)
@@ -77,23 +75,27 @@ const Restore: React.FC<Props> = ({
     })
   }
 
-  const handleRestore = useCallback(async () => {
-    setProcessing(true)
-
-    const res = await requests.post(fetchURL, {
-      headers: {
-        'Accept-Language': i18n.language,
-      },
-    })
-
-    if (res.status === 200) {
-      const json = await res.json()
-      toast.success(json.message)
-      startRouteTransition(() => router.push(redirectURL))
-    } else {
-      toast.error(t('version:problemRestoringVersion'))
-    }
-  }, [fetchURL, redirectURL, t, i18n, router, startRouteTransition])
+  const handleRestore: OnConfirm = useCallback(
+    async ({ closeConfirmationModal, setConfirming }) => {
+      const res = await requests.post(fetchURL, {
+        headers: {
+          'Accept-Language': i18n.language,
+        },
+      })
+
+      setConfirming(false)
+      closeConfirmationModal()
+
+      if (res.status === 200) {
+        const json = await res.json()
+        toast.success(json.message)
+        startRouteTransition(() => router.push(redirectURL))
+      } else {
+        toast.error(t('version:problemRestoringVersion'))
+      }
+    },
+    [fetchURL, redirectURL, t, i18n, router, startRouteTransition],
+  )
 
   return (
     <Fragment>
@@ -118,27 +120,13 @@ const Restore: React.FC<Props> = ({
           {t('version:restoreThisVersion')}
         </Button>
       </div>
-      <Modal className={`${baseClass}__modal`} slug={modalSlug}>
-        <div className={`${baseClass}__wrapper`}>
-          <div className={`${baseClass}__content`}>
-            <h1>{t('version:confirmVersionRestoration')}</h1>
-            <p>{restoreMessage}</p>
-          </div>
-          <div className={`${baseClass}__controls`}>
-            <Button
-              buttonStyle="secondary"
-              onClick={processing ? undefined : () => toggleModal(modalSlug)}
-              size="large"
-              type="button"
-            >
-              {t('general:cancel')}
-            </Button>
-            <Button onClick={processing ? undefined : () => void handleRestore()}>
-              {processing ? t('version:restoring') : t('general:confirm')}
-            </Button>
-          </div>
-        </div>
-      </Modal>
+      <ConfirmationModal
+        body={restoreMessage}
+        confirmingLabel={t('version:restoring')}
+        heading={t('version:confirmVersionRestoration')}
+        modalSlug={modalSlug}
+        onConfirm={handleRestore}
+      />
     </Fragment>
   )
 }