Run a deadline

Suppose you sell a concert shirt at a preorder price until a set time, then show the standard offer. Plandalf's promo supplies the countdown and active tier. You decide whether the deadline changes a price inside one offer or switches the button to a different offer.

1. Configure the sale

Create a promo with the slug concert-merch. Set a fixed deadline, then add tiers labeled Preorder and Standard. These exact labels are used in the code below. Tier setup explains prices and windows.
For an HTML-only page, publish one concert-shirt offer and connect its prices to those promo tiers.
To switch checkouts in JavaScript or React, publish two offers: concert-shirt-preorder and concert-shirt-standard. Set each offer's price and completion behavior. The promo's active tier will choose which one the next click opens.
Test both offers separately before adding the countdown. Replace the example organization host with yours.

2. Put the countdown beside the buy button

The browser bundle renders the countdown and applies the active promo tier price to the same offer. HTML attributes alone do not switch offer slugs.

merch.html

<script defer
  src="https://your-org.plandalf.dev/js/plandalf-sdk.js"></script>
<div data-plandalf-promo="concert-merch"></div>
<button
  data-plandalf-present="concert-shirt"
  data-plandalf-apply-promo="concert-merch"
>Buy the shirt</button>

The declarative promo monitor may follow a redirect URL configured on an active tier. Check that tier's redirect setting if the page unexpectedly navigates.

The promo handle resolves with the current tier and continues sending tier-change events. Disable its automatic redirects because this page selects the next offer itself.

merch.js

import { Plandalf } from '@plandalf/sdk'

const sdk = new Plandalf({
  apiBase: 'https://your-org.plandalf.dev',
})
const button = document.querySelector('#buy-shirt')
let selectedOffer = null

const monitor = sdk.promo('concert-merch', {
  target: '#countdown', redirect: false,
})

function selectTier(label) {
  if (label === 'Preorder') {
    selectedOffer = 'concert-shirt-preorder'
    button.textContent = 'Preorder the shirt'
  } else if (label === 'Standard') {
    selectedOffer = 'concert-shirt-standard'
    button.textContent = 'Buy the shirt'
  } else {
    selectedOffer = null
    button.textContent = 'Merch unavailable'
  }
  button.disabled = !selectedOffer
}

void monitor.then(
  (promo) => selectTier(promo?.activeTier?.label),
  () => selectTier(null),
)
void (async () => {
  for await (const event of monitor.events) {
    if (event.type === 'tier-change') selectTier(event.to)
  }
})()

button.addEventListener('click', async () => {
  if (!selectedOffer) return
  const result = await sdk.present(selectedOffer)
  if (result.status === 'complete') {
    // Confirm the order on your server before promising shipment.
  }
})
// Call monitor.close() if this page is removed without navigation.

merch.html

<div id="countdown"></div>
<button id="buy-shirt" disabled>Checking offer…</button>

Subscribe to the same promo handle in an effect and close it when the component unmounts.

MerchPage.tsx

import { useEffect, useRef, useState } from 'react'
import {
  PlandalfProvider, usePlandalf, usePresent,
} from '@plandalf/react'

function MerchButton() {
  const sdk = usePlandalf()
  const { present, presenting } = usePresent()
  const countdown = useRef<HTMLDivElement>(null)
  const [tier, setTier] = useState<string | null>()
  const offer = tier === 'Preorder' ? 'concert-shirt-preorder'
    : tier === 'Standard' ? 'concert-shirt-standard' : null

  useEffect(() => {
    if (!countdown.current) return
    let active = true
    const monitor = sdk.promo('concert-merch', {
      target: countdown.current, redirect: false,
    })
    void monitor.then(
      (promo) => {
        if (active) setTier(promo?.activeTier?.label ?? null)
      },
      () => { if (active) setTier(null) },
    )
    void (async () => {
      for await (const event of monitor.events) {
        if (active && event.type === 'tier-change') setTier(event.to)
      }
    })()
    return () => { active = false; monitor.close() }
  }, [sdk])

  async function buy() {
    if (!offer) return
    const result = await present(offer)
    if (result.status === 'complete') {
      // Confirm the order on your server before promising shipment.
    }
  }

  const label = tier === undefined ? 'Checking offer…'
    : tier === 'Preorder' ? 'Preorder the shirt'
    : offer ? 'Buy the shirt' : 'Merch unavailable'

  return <>
    <div ref={countdown} />
    <button disabled={!offer || presenting} onClick={buy}>
      {label}
    </button>
  </>
}

export function MerchPage() {
  return (
    <PlandalfProvider apiBase="https://your-org.plandalf.dev">
      <MerchButton />
    </PlandalfProvider>
  )
}

3. Test both sides of the deadline

Preview the Preorder tier and confirm the countdown, checkout name, and price. Then test with the Standard tier active and confirm the next click opens the standard checkout. A change in tier does not replace a checkout that is already open. Before testing payment, confirm both offers and their integration are explicitly configured for sandbox use; a mode: 'test' override can fall back to live for public visitors. Complete a provider-supported sandbox purchase on each side and confirm the orders on your server.

The page switch does not disable an old preorder link. If late purchases must be rejected, enforce the cutoff in your checkout or server configuration. The full event merch example explains the two-offer pattern; promo() and PromoHandle describe the live state and events.