@cratis/showrunner.boxoffice.react 0.0.0-stage → 1.9.0

package/Portal/PortalButton.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Button, ButtonProps } from '@cratis/components/Common';
+import { Guid } from '@cratis/fundamentals';
+import { PortalIntent } from '@cratis/showrunner.boxoffice';
+import { useState } from 'react';
+import { useBoxOfficeContext } from '../Provider/BoxOfficeContext.js';
+import { useEntitlementsContext } from '../Entitlements/EntitlementsContext.js';
+
+/**
+ * Props for {@link PortalButton}.
+ */
+export interface PortalButtonProps extends Pick<ButtonProps, 'variant' | 'tone' | 'size' | 'className' | 'icon'> {
+    /** What the user wants to do in the customer portal. */
+    intent: PortalIntent;
+
+    /** The text of the button. */
+    label: string;
+
+    /** The offer the user looked at, when they did. */
+    offer?: Guid;
+}
+
+/**
+ * A button that opens the operator's customer portal with a signed link, to buy, try or change plan. It is not shown
+ * when the product has no customer portal.
+ */
+export const PortalButton = ({ intent, label, offer, variant = 'solid', ...rest }: PortalButtonProps) => {
+    const { openPortal } = useBoxOfficeContext();
+    const { canOpenPortal } = useEntitlementsContext();
+    const [isOpening, setIsOpening] = useState(false);
+
+    if (!canOpenPortal) {
+        return null;
+    }
+
+    const open = async () => {
+        setIsOpening(true);
+        try {
+            await openPortal(intent, offer);
+        } finally {
+            setIsOpening(false);
+        }
+    };
+
+    return <Button {...rest} variant={variant} label={label} loading={isOpening} onClick={() => void open()} />;
+};

package/Portal/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './portalLinks.js';
+export * from './PortalButton.js';

package/Portal/portalLinks.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ArcConfiguration } from '@cratis/arc.react';
+import { Guid } from '@cratis/fundamentals';
+import { LinkToPortal, PortalIntent } from '@cratis/showrunner.boxoffice';
+
+/**
+ * Asks the backend for a signed link that opens the customer portal for what the user wants to do there.
+ * @param arc The Arc configuration the application runs with.
+ * @param intent What the user wants to do.
+ * @param offer The offer the user looked at, when they did.
+ * @returns The link; undefined when the backend gave none.
+ */
+export async function linkToPortal(arc: ArcConfiguration, intent: PortalIntent, offer?: Guid): Promise<string | undefined> {
+    const query = new LinkToPortal();
+    query.setMicroservice(arc.microservice);
+    query.setApiBasePath(arc.apiBasePath ?? '');
+    query.setOrigin(arc.origin ?? '');
+    query.setHttpHeadersCallback(arc.httpHeadersCallback ?? (() => ({})));
+
+    const result = await query.perform({ intent, offer });
+    return result.isSuccess && result.data?.url ? result.data.url : undefined;
+}
+
+/**
+ * Opens a link in a new tab, without letting the page it opens reach back to this one.
+ * @param url The link.
+ */
+export function openInNewTab(url: string): void {
+    window.open(url, '_blank', 'noopener,noreferrer');
+}

package/Provider/BoxOfficeContext.ts

@@ -0,0 +1,67 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Guid } from '@cratis/fundamentals';
+import { PortalIntent, SeatStanding } from '@cratis/showrunner.boxoffice';
+import { createContext, useContext } from 'react';
+import { BoxOfficeLabels, resolveLabels } from '../Labels/index.js';
+
+/**
+ * What {@link BoxOfficeProvider} gives the Box Office components.
+ */
+export interface BoxOfficeContextValue {
+    /** Whether a {@link BoxOfficeProvider} provides the value; the defaults otherwise. */
+    readonly isProvided: boolean;
+
+    /** The labels to show. */
+    readonly labels: BoxOfficeLabels;
+
+    /** The locale to format dates and numbers for; the browser's when not given. */
+    readonly locale?: string;
+
+    /** Where the signed-in user stands with the tenant's seats; nothing while it loads. */
+    readonly seat?: SeatStanding;
+
+    /**
+     * Opens the customer portal for what the user wants to do there. Reports a failure with a toast.
+     * @param intent What the user wants to do.
+     * @param offer The offer the user looked at, when they did.
+     */
+    openPortal(intent: PortalIntent, offer?: Guid): Promise<void>;
+
+    /**
+     * Asks the backend again what the tenant may do, for after something changed it.
+     */
+    refresh(): void;
+}
+
+const noop = () => {
+    /* Without a BoxOfficeProvider there is nothing to refresh. */
+};
+
+/**
+ * The value without a {@link BoxOfficeProvider}: English labels, and no portal to open.
+ */
+export const defaultBoxOfficeContextValue: BoxOfficeContextValue = {
+    isProvided: false,
+    labels: resolveLabels(),
+    openPortal: () => Promise.resolve(),
+    refresh: noop
+};
+
+/**
+ * The React context {@link BoxOfficeProvider} provides.
+ */
+export const BoxOfficeContext = createContext<BoxOfficeContextValue>(defaultBoxOfficeContextValue);
+
+/**
+ * Gets what {@link BoxOfficeProvider} provides, or the defaults outside one.
+ * @returns The {@link BoxOfficeContextValue}.
+ */
+export const useBoxOfficeContext = (): BoxOfficeContextValue => useContext(BoxOfficeContext);
+
+/**
+ * Gets the labels to show.
+ * @returns The {@link BoxOfficeLabels}.
+ */
+export const useBoxOfficeLabels = (): BoxOfficeLabels => useContext(BoxOfficeContext).labels;

package/Provider/BoxOfficeProvider.tsx

@@ -0,0 +1,96 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ArcContext } from '@cratis/arc.react';
+import { toast } from '@cratis/components/Notifications';
+import { Guid } from '@cratis/fundamentals';
+import { CurrentEntitlements, EntitlementSummary, Mine, PortalIntent, SeatStanding } from '@cratis/showrunner.boxoffice';
+import { ReactNode, useContext, useMemo } from 'react';
+import { entitlementsOf } from '../Entitlements/entitlementModel.js';
+import { EntitlementsContext } from '../Entitlements/EntitlementsContext.js';
+import { BoxOfficeLabelOverrides, resolveLabels } from '../Labels/index.js';
+import { linkToPortal, openInNewTab } from '../Portal/portalLinks.js';
+import { BoxOfficeContext, BoxOfficeContextValue } from './BoxOfficeContext.js';
+
+/**
+ * Props for {@link BoxOfficeProvider}.
+ */
+export interface BoxOfficeProviderProps {
+    /** The labels that replace the English defaults, for instance to localize them. */
+    labels?: BoxOfficeLabelOverrides;
+
+    /** The locale to format dates and numbers for; the browser's when not given. */
+    locale?: string;
+
+    /**
+     * The entitlements to use instead of asking the backend. For stories, specifications and previews; leave it out in
+     * the application.
+     */
+    entitlements?: EntitlementSummary;
+
+    /**
+     * Where the user stands with the tenant's seats, to use instead of asking the backend. For stories,
+     * specifications and previews; leave it out in the application.
+     */
+    seat?: SeatStanding;
+
+    /** Opens a link to the customer portal. Defaults to opening it in a new tab. */
+    openLink?: (url: string) => void;
+
+    /**
+     * Gets the link that opens the customer portal, instead of asking the backend for a signed one. For stories and
+     * specifications; leave it out in the application.
+     */
+    portalLink?: (intent: PortalIntent, offer?: Guid) => Promise<string | undefined>;
+
+    /** The application. */
+    children?: ReactNode;
+}
+
+/**
+ * Slots Box Office into an application: asks the backend what the signed-in user's tenant may do and where the user
+ * stands with its seats, and gives {@link useEntitlements}, {@link RequiresModule}, the banners and the pages what they
+ * need. Render it inside `<Arc>` and a `CratisComponentsProvider` with a toaster, once, around the shell.
+ */
+export const BoxOfficeProvider = ({ labels, locale, entitlements: preloaded, seat: preloadedSeat, openLink = openInNewTab, portalLink, children }: BoxOfficeProviderProps) => {
+    const arc = useContext(ArcContext);
+    const resolvedLabels = useMemo(() => resolveLabels(labels), [labels]);
+    const [summaryResult, refreshSummary] = CurrentEntitlements.when(preloaded === undefined).use();
+    const [seatResult, refreshSeat] = Mine.when(preloadedSeat === undefined).use();
+
+    const summary = preloaded ?? (summaryResult.isSuccess && summaryResult.data?.modules ? summaryResult.data : undefined);
+    const seat = preloadedSeat ?? (seatResult.isSuccess && seatResult.data?.status !== undefined ? seatResult.data : undefined);
+    const entitlements = useMemo(() => entitlementsOf(summary), [summary]);
+
+    const value = useMemo<BoxOfficeContextValue>(() => ({
+        isProvided: true,
+        labels: resolvedLabels,
+        locale,
+        seat,
+        openPortal: async (intent: PortalIntent, offer?: Guid) => {
+            try {
+                const url = await (portalLink ? portalLink(intent, offer) : linkToPortal(arc, intent, offer));
+                if (url) {
+                    openLink(url);
+                    return;
+                }
+            } catch {
+                /* The toast below says what went wrong; the details are of no use to the user. */
+            }
+
+            toast.error({ title: resolvedLabels.common.portalFailed });
+        },
+        refresh: () => {
+            void refreshSummary();
+            void refreshSeat();
+        }
+    }), [resolvedLabels, locale, seat, arc, openLink, portalLink, refreshSummary, refreshSeat]);
+
+    return (
+        <BoxOfficeContext.Provider value={value}>
+            <EntitlementsContext.Provider value={entitlements}>
+                {children}
+            </EntitlementsContext.Provider>
+        </BoxOfficeContext.Provider>
+    );
+};

package/Provider/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './BoxOfficeContext.js';
+export * from './BoxOfficeProvider.js';

package/README.md

@@ -1,3 +1,72 @@
-# Temporary Holding Version
+# Showrunner
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> Showrunner is a set of ready-made product parts for applications built on [Cratis](https://www.cratis.io) — drop-in backend and frontend packages, built as Arc and Chronicle vertical slices.
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Build](https://github.com/Cratis/Showrunner/actions/workflows/build.yml/badge.svg)](https://github.com/Cratis/Showrunner/actions/workflows/build.yml)
+[![Publish](https://github.com/Cratis/Showrunner/actions/workflows/publish.yml/badge.svg)](https://github.com/Cratis/Showrunner/actions/workflows/publish.yml)
+[![Discord](https://img.shields.io/discord/1182595891576717413?label=Discord&logo=discord&logoColor=white)](https://discord.gg/kt4AMpV8WV)
+
+## Usher
+
+**Usher** is the support part: it lets the users of an application report issues and hold support conversations with the people running it. It is a library an application hosts, not a service of its own — the backend package adds Usher's commands, queries and events to the host's Arc application and Chronicle event store, and the frontend packages give the host's React UI the generated proxies and components to drive them.
+
+Usher is in its earliest stage: the packages are scaffolded and published, but carry no behavior yet. See [Documentation](./Documentation/index.md).
+
+**Box Office** is the licensing part: trials, seats, modules, compute allowances and suspension, decided by the operator of a managed product and honored by the product. Its event contracts, its catalog of offers and prices, and a product's offering declaration and compute metering are in place; see [Documentation](./Documentation/BoxOffice/index.md).
+
+**Marquee** is the announcements part: the people running a product write an announcement with an audience, a display and an exact window, and the product shows it to the people it reaches, as a banner or a dialog. Drop `<Marquee />` into the application shell and it brings its own queries and commands; see [Documentation](./Documentation/Marquee/index.md).
+
+## Packages
+
+| Package | Registry | What it is |
+| --- | --- | --- |
+| `Cratis.Showrunner.BoxOffice.Catalog` | NuGet | Box Office's catalog — offers (seat plans, modules, compute packs), prices and the pricing arithmetic, published to products |
+| `Cratis.Showrunner.BoxOffice.Offering` | NuGet | Box Office for a product — declares what the product sells (modules, meters, seat licensing) and measures its compute per tenant and day |
+| `Cratis.Showrunner.BoxOffice.Contracts` | NuGet | Box Office's event contracts: what an operator decides about a tenant and what a product reports back |
+| `Cratis.Showrunner.Usher.Contracts` | NuGet | Usher's event contracts, for hosts that react to what Usher records |
+| `Cratis.Showrunner.Marquee.Contracts` | NuGet | Marquee's event contracts: the public events a product receives announcements through |
+| `Cratis.Showrunner.Marquee.Authoring` | NuGet | Marquee's authoring backend — commands, query and outbox for writing announcements, built on Arc and Chronicle |
+| `Cratis.Showrunner.Marquee` | NuGet | Marquee's backend for products — receives announcements once, shows each tenant what its audience matches and records acknowledgements |
+| `Cratis.Showrunner.Usher` | NuGet | Usher's backend — Arc commands and queries over Chronicle |
+| `@cratis/showrunner.marquee` | npm | The generated TypeScript proxies for Marquee's receiving commands and queries; no UI framework dependency |
+| `@cratis/showrunner.marquee.authoring` | npm | The generated TypeScript proxies for Marquee's authoring commands and query; no UI framework dependency |
+| `@cratis/showrunner.marquee.react` | npm | The Marquee drop-in React component: banners and dialogs for a product's announcements, built on `@cratis/arc.react` and `@cratis/components` |
+| `@cratis/showrunner.usher` | npm | The generated TypeScript proxies for Usher's commands and queries; no UI framework dependency |
+| `@cratis/showrunner.usher.react` | npm | React components for Usher, built on `@cratis/arc.react` and `@cratis/components` |
+
+## Building
+
+Prerequisites: the .NET SDK from [`global.json`](./global.json) (10.0.400 or later) and Node.js 20 or later with Corepack enabled (`corepack enable`); Yarn itself is checked in under `.yarn/releases`.
+
+```shell
+# Backend: Debug builds compile the inline specs and regenerate the TypeScript proxies
+dotnet build Showrunner.slnx --configuration Debug
+dotnet test Showrunner.slnx --configuration Debug --no-build
+
+# Release is warnings-as-errors; clearing CratisProxiesOutputPath skips proxy generation
+dotnet build Showrunner.slnx --configuration Release -p:CratisProxiesOutputPath=
+
+# Frontend
+yarn install
+yarn lint:ci
+yarn compile
+yarn test
+yarn build
+```
+
+Specifications live beside the code they specify — `for_*/when_*/` folders compiled into Debug builds only for .NET, and Vitest specs in the same layout for TypeScript.
+
+The end-to-end specifications in [`Integration`](./Integration) run Usher and a desk against a real Chronicle kernel in a container, so `dotnet test Showrunner.slnx` needs Docker. Set `USHER_CHRONICLE_IMAGE` to run them against another kernel image, and `USHER_INTEGRATION_LOG` to a file path to keep the application's log.
+
+## Releasing
+
+Every pull request carries exactly one of the `major`, `minor`, `patch` or `no-release` labels. Merging a version-labelled pull request to `main` releases all four packages under one semantic version through [`cratis/release-action`](https://github.com/Cratis/release-action) — NuGet packages through NuGet trusted publishing and npm packages through npm trusted publishing with provenance. The packages are built and packed in jobs without publishing rights; separate jobs that run no build or install script hold the short-lived OIDC token and only push what was packed.
+
+## Part of the Cratis ecosystem
+
+Showrunner is a [Cratis](https://www.cratis.io) project, built on event sourcing with [Chronicle](https://github.com/Cratis/Chronicle) and CQRS with [Arc](https://github.com/Cratis/Arc), with frontends on [`@cratis/components`](https://github.com/Cratis/Components). Join the community on [Discord](https://discord.gg/kt4AMpV8WV).
+
+## License
+
+Showrunner is licensed under the [MIT License](LICENSE) and free to use.

package/Seats/AssignSeatDialog.tsx

@@ -0,0 +1,73 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogResult } from '@cratis/arc.react/dialogs';
+import { TextInput } from '@cratis/components/Common';
+import { Dialog, DialogInitialFocus } from '@cratis/components/Dialogs';
+import { useState } from 'react';
+import { useBoxOfficeLabels } from '../Provider/BoxOfficeContext.js';
+import { emptySeatPerson, isValidSeatPerson, SeatPersonInput } from './seatModels.js';
+
+/**
+ * Props for {@link AssignSeatDialog}.
+ */
+export interface AssignSeatDialogProps {
+    /** Whether the dialog is open. */
+    visible: boolean;
+
+    /** Whether the seat is being assigned. */
+    isBusy?: boolean;
+
+    /** Called when the user confirms, with the person to give a seat. */
+    onAssign: (person: SeatPersonInput) => void;
+
+    /** Called when the user closes the dialog. */
+    onClose: () => void;
+}
+
+/**
+ * Asks who to give a seat.
+ */
+export const AssignSeatDialog = ({ visible, isBusy, onAssign, onClose }: AssignSeatDialogProps) => {
+    const labels = useBoxOfficeLabels();
+    const [person, setPerson] = useState<SeatPersonInput>(emptySeatPerson);
+    const change = (field: keyof SeatPersonInput) => (value: string) => setPerson(current => ({ ...current, [field]: value }));
+
+    return (
+        <Dialog
+            title={labels.seats.assignTitle}
+            visible={visible}
+            okLabel={labels.seats.assignConfirm}
+            cancelLabel={labels.common.cancel}
+            closeAriaLabel={labels.common.close}
+            initialFocus={DialogInitialFocus.Content}
+            isValid={isValidSeatPerson(person)}
+            isBusy={isBusy}
+            onConfirm={() => onAssign(person)}
+            onClose={result => {
+                if (result !== DialogResult.Ok) {
+                    setPerson(emptySeatPerson);
+                    onClose();
+                }
+            }}>
+            <form className='boxoffice-seat-form' onSubmit={event => event.preventDefault()}>
+                <label className='boxoffice-field'>
+                    <span>{labels.seats.name}</span>
+                    <TextInput value={person.name} onChange={change('name')} autoComplete='off' />
+                </label>
+                <label className='boxoffice-field'>
+                    <span>{labels.seats.email}</span>
+                    <TextInput type='email' value={person.email} onChange={change('email')} autoComplete='off' />
+                </label>
+                <label className='boxoffice-field'>
+                    <span>{labels.seats.identityProvider}</span>
+                    <TextInput value={person.identityProvider} onChange={change('identityProvider')} autoComplete='off' />
+                </label>
+                <label className='boxoffice-field'>
+                    <span>{labels.seats.subject}</span>
+                    <TextInput value={person.subject} onChange={change('subject')} autoComplete='off' />
+                </label>
+            </form>
+        </Dialog>
+    );
+};

package/Seats/SeatsPage.tsx

@@ -0,0 +1,85 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DialogButtons, DialogResult, useConfirmationDialog } from '@cratis/arc.react/dialogs';
+import { toastCommandResult } from '@cratis/components/Notifications';
+import { AssignSeat, CurrentRoster, ReleaseSeat, SeatHolder, SeatHolding } from '@cratis/showrunner.boxoffice';
+import { useState } from 'react';
+import { useEntitlementsContext } from '../Entitlements/EntitlementsContext.js';
+import { format } from '../Labels/index.js';
+import { useBoxOfficeContext } from '../Provider/BoxOfficeContext.js';
+import { AssignSeatDialog } from './AssignSeatDialog.js';
+import { personOf, seatRows, seatSummary, SeatPersonInput } from './seatModels.js';
+import { SeatsView } from './SeatsView.js';
+
+/**
+ * The seats page: who holds the tenant's seats, with buttons to assign and release them. For the people who maintain
+ * the product; the backend refuses everyone else. Render it inside a {@link BoxOfficeProvider}, the `DialogComponents`
+ * registration and a `CratisComponentsProvider` with a toaster.
+ */
+export const SeatsPage = () => {
+    const { labels, refresh } = useBoxOfficeContext();
+    const entitlements = useEntitlementsContext();
+    const [roster, performRoster] = CurrentRoster.use();
+    const [assignSeat] = AssignSeat.use();
+    const [releaseSeat] = ReleaseSeat.use();
+    const [confirm] = useConfirmationDialog();
+    const [isAssigning, setIsAssigning] = useState(false);
+    const [isBusy, setIsBusy] = useState(false);
+
+    const rows = seatRows(roster.isSuccess ? roster.data : undefined, entitlements.seats);
+    const changed = () => {
+        void performRoster();
+        refresh();
+    };
+
+    const assign = async (input: SeatPersonInput) => {
+        setIsBusy(true);
+        try {
+            assignSeat.holder = personOf(input);
+            if (toastCommandResult(await assignSeat.execute(), { successTitle: labels.seats.assignConfirm })) {
+                setIsAssigning(false);
+                changed();
+            }
+        } finally {
+            setIsBusy(false);
+        }
+    };
+
+    const release = async (holding: SeatHolding) => {
+        const answer = await confirm(
+            labels.seats.releaseTitle,
+            format(labels.seats.releaseMessage, { name: holding.holder.name }),
+            DialogButtons.YesNo);
+        if (answer !== DialogResult.Yes) {
+            return;
+        }
+
+        const holder = new SeatHolder();
+        holder.identityProvider = holding.holder.identityProvider;
+        holder.subject = holding.holder.identityProviderSubject;
+        releaseSeat.holder = holder;
+        if (toastCommandResult(await releaseSeat.execute(), { showSuccess: false })) {
+            changed();
+        }
+    };
+
+    return (
+        <>
+            <SeatsView
+                rows={rows}
+                summary={seatSummary(rows, entitlements.seats)}
+                isReadOnly={entitlements.isReadOnly}
+                isLoading={roster.isPerforming && !roster.isSuccess}
+                isUnauthorized={!roster.isAuthorized}
+                hasFailed={!roster.isPerforming && roster.isAuthorized && !roster.isSuccess}
+                onAssign={() => setIsAssigning(true)}
+                onRelease={holding => void release(holding)} />
+            <AssignSeatDialog
+                visible={isAssigning}
+                isBusy={isBusy}
+                onAssign={input => void assign(input)}
+                onClose={() => setIsAssigning(false)} />
+        </>
+    );
+};

package/Seats/SeatsView.tsx

@@ -0,0 +1,108 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Button } from '@cratis/components/Common';
+import { Column, DataTableCore, DataTableStatus } from '@cratis/components/DataTables';
+import { Message, Tag } from '@cratis/components/Display';
+import { SeatHolding } from '@cratis/showrunner.boxoffice';
+import { formatDay } from '../formatting.js';
+import { format } from '../Labels/index.js';
+import { useBoxOfficeContext } from '../Provider/BoxOfficeContext.js';
+import { SeatRow, SeatSummary } from './seatModels.js';
+
+/**
+ * Props for {@link SeatsView}.
+ */
+export interface SeatsViewProps {
+    /** The seats, oldest first. */
+    rows: readonly SeatRow[];
+
+    /** What to summarize. */
+    summary: SeatSummary;
+
+    /** Whether the tenant is read-only, so seats cannot be changed. */
+    isReadOnly: boolean;
+
+    /** Whether the seats are still loading. */
+    isLoading?: boolean;
+
+    /** Whether the seats could not be loaded because the user may not see them. */
+    isUnauthorized?: boolean;
+
+    /** Whether the seats could not be loaded. */
+    hasFailed?: boolean;
+
+    /** Called when the user wants to assign a seat. */
+    onAssign: () => void;
+
+    /** Called when the user wants to release a seat. */
+    onRelease: (holding: SeatHolding) => void;
+}
+
+const statusOf = (isLoading?: boolean, isUnauthorized?: boolean, hasFailed?: boolean) => {
+    if (isUnauthorized) {
+        return DataTableStatus.Unauthorized;
+    }
+
+    if (hasFailed) {
+        return DataTableStatus.Failed;
+    }
+
+    return isLoading ? DataTableStatus.Loading : DataTableStatus.Ready;
+};
+
+/**
+ * The seats of the tenant: how many are used, who holds them, and buttons to assign and release.
+ */
+export const SeatsView = ({ rows, summary, isReadOnly, isLoading, isUnauthorized, hasFailed, onAssign, onRelease }: SeatsViewProps) => {
+    const { labels, locale } = useBoxOfficeContext();
+
+    return (
+        <section className='boxoffice-seats' aria-labelledby='boxoffice-seats-title'>
+            <header className='boxoffice-page__header'>
+                <h2 id='boxoffice-seats-title' className='boxoffice-page__title'>{labels.seats.title}</h2>
+                <Button label={labels.seats.assign} disabled={isReadOnly || summary.capacity === 0} onClick={onAssign} />
+            </header>
+
+            <p className='boxoffice-seats__summary'>
+                {summary.capacity === 0
+                    ? labels.seats.noCapacity
+                    : format(labels.seats.summary, { held: summary.held, capacity: summary.capacity })}
+            </p>
+            {summary.over > 0 && <Message severity='warn'>{format(labels.seats.overCapacity, { over: summary.over })}</Message>}
+            {isReadOnly && <Message severity='info'>{labels.seats.readOnly}</Message>}
+
+            <DataTableCore<SeatRow>
+                data={[...rows]}
+                dataKey='holding.holder.identityProviderSubject'
+                status={statusOf(isLoading, isUnauthorized, hasFailed)}
+                emptyMessage={labels.seats.empty}
+                loadingMessage={labels.common.loading}
+                failureMessage={labels.common.failed}
+                unauthorizedMessage={labels.common.unauthorized}>
+                <Column<SeatRow> header={labels.seats.holderColumn} body={row => row.holding.holder.name} />
+                <Column<SeatRow> header={labels.seats.emailColumn} body={row => row.holding.holder.email} />
+                <Column<SeatRow> header={labels.seats.assignedColumn} body={row => formatDay(row.holding.assignedAt, locale)} />
+                <Column<SeatRow>
+                    header={labels.seats.statusColumn}
+                    body={row => (
+                        <Tag
+                            severity={row.coverage === 'licensed' ? 'success' : 'warn'}
+                            value={row.coverage === 'licensed' ? labels.seats.licensed : labels.seats.overCapacityStatus} />
+                    )} />
+                <Column<SeatRow>
+                    header=''
+                    body={row => (
+                        <Button
+                            variant='ghost'
+                            tone='critical'
+                            size='small'
+                            label={labels.seats.releaseShort}
+                            aria-label={format(labels.seats.release, { name: row.holding.holder.name })}
+                            disabled={isReadOnly}
+                            onClick={() => onRelease(row.holding)} />
+                    )} />
+            </DataTableCore>
+        </section>
+    );
+};

package/Seats/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './AssignSeatDialog.js';
+export * from './seatModels.js';
+export * from './SeatsPage.js';
+export * from './SeatsView.js';