Thank You

Reusable thank-you page content from @workspace/bdmg-component. Handles access (URL email/buyer, optional token or cookie validation), UTM cookies, optional welcome email, and an optional ads section with UTM substitution in links. Must be used inside Suspense because it uses useSearchParams.

Installation

tsx

import { ThankYouContent } from "@workspace/bdmg-component"
import type { ThankYouContentProps, ThankYouAd } from "@workspace/bdmg-component"

Basic usage

Render ThankYouContent inside Suspense. Access is granted when email (or buyer) is in the URL; otherwise the user is redirected to redirectPath.

tsx

import { Suspense } from "react"
import { ThankYouContent } from "@workspace/bdmg-component"

export default function ThankYouPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ThankYouContent
        title="Thank you!"
        subtitle="Your request has been received."
        redirectPath="/"
      />
    </Suspense>
  )
}

With custom copy and no ads

Pass copy via props. Use showBuyerLogo=false and ads=[] for a minimal thank-you page.

tsx

<ThankYouContent
  title={THANKYOU_CONTENT.title}
  subtitle={THANKYOU_CONTENT.subtitle}
  showBuyerLogo={false}
  confirmationTitle={THANKYOU_CONTENT.confirmationTitle}
  confirmationDescription={THANKYOU_CONTENT.confirmationDescription}
  contactTitle={THANKYOU_CONTENT.contactTitle}
  contactPhoneLabel={THANKYOU_CONTENT.contactPhoneLabel}
  contactPhoneHref={THANKYOU_CONTENT.contactPhoneHref}
  redirectPath="/"
  sendWelcomeEmail={false}
  ads={[]}
/>

Ads with UTM substitution

Pass an ads array. Each link can use placeholders {{utm_source}}, {{utm_id}}, {{utm_s1}}; they are replaced with values from the URL or cookies.

tsx

const ads = [
  {
    image: "/nerdwallet.png",
    link: "https://example.com/offer?sub1={{utm_source}}&sub2={{utm_id}}&sub3={{utm_s1}}",
  },
]
<ThankYouContent ads={ads} adSectionTitle="More offers for you" />

ThankYouContent props

Prop	Type	Default	Description
title	string	"Thank you!"	Main heading.
subtitle	string	(receipt message)	Body text below the title.
showBuyerLogo	boolean	true	Show buyer logo when buyer param is in URL.
buyerLogoPath	(buyer: string) => string	(slugified path)	Function to build buyer logo image path.
confirmationTitle	string	(email sent title)	Confirmation box title.
confirmationDescription	string	(inbox/spam text)	Confirmation box description.
contactTitle	string	"For immediate assistance"	Contact section heading.
contactPhoneLabel	string	1-(866)-495-1543	Display text for phone number.
contactPhoneHref	string	tel:+18664951543	tel: link for the phone number.
redirectPath	string	"/"	Path to redirect when access is not authorized.
sendWelcomeEmail	boolean	false	Call send email API when page is authorized.
sendEmailApiPath	string	"/api/send-email"	API path for welcome email (POST with { email }).
validateAccessApiPath	string \| null	null	Optional API to validate access (cookie or token). POST with credentials or body.
useLocalStorageToken	boolean	false	Check thankyou_token / thankyou_expires in localStorage for access.
ads	ThankYouAd[]	[]	List of { image, link }. Use {{utm_source}}, {{utm_id}}, {{utm_s1}} in link.
adSectionTitle	string	-	Optional title for the ads section.
utmCookieNames	ThankYouUtmCookieNames	subid1/subid2/subid3	Cookie names for UTM source, id, s1.
formDataStorageKey	string	"form_data"	localStorage key for email fallback when sending welcome email.
loadingFallback	ReactNode	-	Custom loading UI instead of default spinner.

Preview

Live preview (access is granted with ?email=test@example.com in the URL; add it to see content).