Version Components

Two components for telling users the app is in a pre-release stage. VersionMarquee shows a scrolling banner at the top of the page. VersionModal shows a one-time welcome dialog on first visit.

Both live in @phpcreation/frontend-components-react-nextjs-bundle.

VersionMarquee

A full-width scrolling ticker. Shows the current version stage and a note to report issues via the feedback button.

Props


type VersionMarqueeProps = {
  version?: string; // defaults to "Alpha"
};

Usage


import { VersionMarquee } from "@phpcreation/frontend-components-react-nextjs-bundle/components";
 
<VersionMarquee version="Beta" />

Screenshot

VersionModal

A one-time welcome dialog. Opens automatically on the user’s first visit. Shows the version stage badge, a link to the legacy version, and a prompt to submit feedback. Dismissed state is saved in localStorage under the key version_modal_shown.

Props


type VersionModalProps = {
  tenant: string;   // used to build the legacy version URL
  version?: string; // defaults to "Alpha"
};

Environment Variables

Variable	Purpose
`NEXT_PUBLIC_LEGACY_VERSION`	Full legacy URL — overrides the auto-built URL
`NEXT_PUBLIC_API_PHPR_ENV`	Environment suffix for the fallback legacy URL
`NEXT_PUBLIC_LEGACY_VERSION_PATH`	Path appended to the fallback legacy URL

If NEXT_PUBLIC_LEGACY_VERSION is set it is used directly. Otherwise the URL is built as:


https://{tenant}{NEXT_PUBLIC_API_PHPR_ENV}phpreaction.com/{NEXT_PUBLIC_LEGACY_VERSION_PATH}

Usage


import { VersionModal } from "@phpcreation/frontend-components-react-nextjs-bundle/components";
 
<VersionModal tenant={tenant} version="Beta" />

Resetting (Development)


localStorage.removeItem("version_modal_shown");

Screenshot

Version Modal

Using Both Together

Both components go in the client-side Layout component alongside Navbar. No dynamic() wrapper needed — the Layout is already a Client Component.


"use client";
 
import {
  VersionMarquee,
  VersionModal,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components";
 
export default function Layout({ children, tenant }) {
  return (
    <>
      {/* Outside the section so it overlays the full viewport */}
      <VersionModal tenant={tenant} version="Alpha" />
 
      <section className="flex-1 min-w-0 overflow-hidden">
        {/* Above the Navbar */}
        <VersionMarquee version="Alpha" />
        <Navbar {/* ...props */} />
        <main>{children}</main>
      </section>
    </>
  );
}

Version Marquee and Modal

Both components use useLocale() and localStorage — they must be rendered inside a Client Component. Never place them directly in a Next.js Server Component or the root layout.tsx.

Removing

Once the app leaves the pre-release stage, remove both components from the Layout and delete the three env variables if they are not used elsewhere.