add the PayloadRequest props to beforeDocumentControls custom component

[quentinhermiteau]

Let's say you have a page localized in different language. And you want to create a button that redirects you to the published version of this page on your frontend.
If your page's slug is "test" for the local fr then your front URL would look like http://my-front-domain.com/fr/test
However, when you want to build this URL from the beforeDocumentControls, you can't, because you have no possibility to know which locale you are at.

'use server'

import { Wallpaper } from 'lucide-react'
import { BeforeDocumentControlsServerProps } from 'payload'

export default async function PageLinkButton({ id, payload }: BeforeDocumentControlsServerProps) {
  // const locale = req.locale // TODO: get locale from server props
  const locale = 'fr'

  const page = await payload.findByID({
    collection: 'pages',
    id: id as string,
    select: {
      slug: true,
      breadcrumbs: true,
    },
    locale,
  })

  if (!page || !page.breadcrumbs) {
    return null
  }

  const breadcrumb = (page.breadcrumbs as { url: string }[]).pop()?.url

  if (!breadcrumb) {
    return null
  }

  return (
    <a title="See front page" href={`${process.env.FRONT_URL}/${locale}/${breadcrumb}`}>
      <Wallpaper size={20} />
    </a>
  )
}