import React from 'react'; import { ArchiveSummary, BillingSummaryBadge, Button, CancellationSummary, Card, CycleProgressCard, DetailHeader, PaymentTimeline, Stack, StatusBadge, StatusTimeline, Tabs, Text, VizMarkPreview } from '@oods/components-react'; import '@oods/component-styles/css'; import './oods-brand-aquex.css'; import { formatReferenceLabel } from '@oods/component-contracts'; import { formatReadOnlyValue } from '@oods/component-contracts'; export interface GeneratedUIActions { /* @oods-domain-action handleCancel sha256:6b38facf9a5444017d5ec9c9512afa85cd529766082f4083efbf78a828756dea */ /* @oods-domain-source sha256:96dd13d3bceda46750b6ffb99e7fb056eb02b88cf021245be6983ceaf015d17b */ handleCancel: () => void; /* @oods-domain-action handleDelete sha256:221fdee3330ccb3c003961fa632660ca61b4f1713ca9b67d2612c45fe63a1f43 */ /* @oods-domain-source sha256:74252fa49ed24d37978bced342336a0b2aac9bed23e8fa0d6d3db7f99f0fe9fc */ handleDelete: () => void; /* @oods-domain-action handleEdit sha256:8d06ae954d1e16d46333996b5945dbfef37c642e52d7bc1f68ece666c760d9b2 */ /* @oods-domain-source sha256:c0d990cc2989feb07786ba35c93b878e524cccf8ecc11583869e8f3344f87f48 */ handleEdit: () => void; /* @oods-domain-action handleViewTimeline sha256:71b845bd5c850e444bda9b61a19589b098d52255006045a1c1979efd3844a6b1 */ /* @oods-domain-source sha256:67df05e1fca7b25d68f0c064be69dd0ac5d61fc1682331b45d695c043e2a4dda */ handleViewTimeline: () => void; } export interface PageProps { svg?: string; svgNarrow?: string; svgWide?: string; svgDark?: string; svgDarkNarrow?: string; svgDarkWide?: string; svgHc?: string; svgHcNarrow?: string; svgHcWide?: string; actions: GeneratedUIActions; /** Materialized list of valid next states from the current status, computed from the transitionRules parameter. When transitionRules is null (open model), this contains all states except the current one. Used by StatusSelector to disable invalid options and by StatusBadge to indicate available paths. */ allowedTransitions?: string[]; /** Recurring price expressed in minor units (e.g., cents). */ amount: number; /** Structured metadata about the archival action for compliance and audit purposes. Properties: - method: "manual" | "automated" | "policy" — how the archive was triggered - compliance_tags: string[] — regulatory labels (e.g., ["GDPR", "SOX", "HIPAA"]) - retention_policy_id: string — reference to the retention policy that triggered archival - original_status: string — the Stateful status before archival - related_entity_count: number — count of related entities also archived (cascade) */ archiveMetadata?: Record; /** Human-readable narrative describing why the entity was archived. */ archiveReason?: string; /** Timestamp for when the entity entered the archived state. */ archivedAt?: string | null; /** User ID or system identifier of the actor who archived this entity. Set to "system" for automated/policy-driven archival. Supports audit trail queries like "show all entities archived by user X" or "show all auto-archived entities". */ archivedBy?: string; /** Recurrence cadence (monthly, yearly, quarterly, etc.). */ billingInterval?: string; /** Whether the subscription will cancel at the natural billing period end. */ cancelAtPeriodEnd: boolean; /** Free-form explanation captured during cancellation workflows. */ cancellationReason?: string; /** Structured reason code chosen from the allowedReasons parameter. */ cancellationReasonCode?: string; /** Timestamp when cancellation was initiated. */ cancellationRequestedAt?: string; /** Timestamp recording when the entity was first created. */ createdAt: string; /** ISO 4217 currency code used for billing. */ currency: string; /** End timestamp of the current billing cycle. */ currentPeriodEnd: string; /** Decimal progress (0-1) through the active billing cycle. */ currentPeriodProgress?: number; /** Start timestamp of the current billing cycle. */ currentPeriodStart: string; /** Billing contact email address. */ customerEmail?: string; /** Customer or account name associated with the subscription. */ customerName?: string; /** Flag indicating whether the entity is currently archived (soft-deleted). */ isArchived: boolean; /** Lifecycle event associated with the most recent timestamp mutation. */ lastEvent: 'billing_cycle_started' | 'billing_cycle_completed' | 'payment_received' | 'cancellation_requested'; /** Timestamp for the lifecycle event captured in last_event. */ lastEventAt?: string; /** Timestamp of the most recent successful payment. */ lastPaymentAt?: string; /** Timestamp when the next payment attempt should occur. */ nextPaymentDueAt?: string; /** Recorded payments, oldest first, each with its time and amount in minor units. Drawn by the payment chart. */ paymentHistory?: unknown[]; /** Payment instrument category used for collection. */ paymentMethodType?: 'card' | 'ach' | 'wire' | 'invoice' | 'other'; /** Outcome of the most recent collection attempt. Distinct from subscription lifecycle status — a subscription can be "active" with payment_status "retrying". */ paymentStatus?: 'pending' | 'succeeded' | 'failed' | 'retrying' | 'refunded'; /** Internal plan code or price identifier. */ planCode?: string; /** Billing interval descriptor (monthly, yearly, etc.). */ planInterval?: string; /** Human-readable plan label shown in headers. */ planName: string; /** Prorated credit or charge in minor currency units generated by a mid-cycle plan change. Positive values are charges; negative values are credits. Only populated when the supportProration parameter is true. */ prorationAmount?: number; /** Unix timestamp (epoch SECONDS) at which proration is calculated. Pinned when an upcoming-invoice PREVIEW is requested and MUST be passed identically on commit so the committed charge equals the previewed amount. The preview is read-only and does NOT mutate the subscription. Stored as an integer (not a datetime) so the value round-trips byte-identically between preview and commit — an ISO string normalization could shift it and desync the previewed vs charged amount. Only populated when supportProration is true. Source: docs.stripe.com/billing/subscriptions/prorations. */ prorationDate?: number; /** Metadata about the most recent restoration action. Properties: - restored_by: string — user ID or "system" - restored_fields: string[] — when partial restore, which fields were restored - restoration_reason: string — why the entity was restored - restored_from_snapshot: boolean — whether restored from a point-in-time snapshot */ restorationMetadata?: Record; /** Timestamp for when the entity was most recently restored from an archived state. */ restoredAt?: string | null; /** Chronological log of state transitions. Each entry records the before/after states, timestamp, and (when governance is enabled) the actor, reason, and transition metadata. Rendered by StatusTimeline in the detail and timeline views. Entry structure: - from: string (previous state) - to: string (new state) - timestamp: ISO 8601 datetime - actor_id: string (user/system who triggered the transition, optional) - reason: string (human-readable justification, required when requireTransitionReason is true) - transition_metadata: Record (arbitrary context, optional) */ stateHistory?: unknown[]; /** Current lifecycle status of the subscription. */ status: 'future' | 'trialing' | 'active' | 'paused' | 'pending_cancellation' | 'past_due' | 'unpaid' | 'terminated'; /** Primary identifier used across billing and lifecycle systems. */ subscriptionId: string; /** Timestamp for the most recent modification, when available. */ updatedAt?: string; } export const GeneratedUI: React.FC = ({ actions, allowedTransitions, amount, archiveReason, archivedAt, billingInterval, cancelAtPeriodEnd, cancellationReason, cancellationReasonCode, cancellationRequestedAt, createdAt, currency, currentPeriodEnd, currentPeriodProgress, currentPeriodStart, customerEmail, customerName, isArchived, lastEvent, lastEventAt, lastPaymentAt, nextPaymentDueAt, paymentMethodType, paymentStatus, planCode, planInterval, planName, stateHistory, status, subscriptionId, updatedAt, svg, svgNarrow, svgWide, svgDark, svgDarkNarrow, svgDarkWide, svgHc, svgHcNarrow, svgHcWide }) => { if (!actions || !Object.prototype.hasOwnProperty.call(actions, 'handleCancel') || typeof actions.handleCancel !== 'function') { throw new Error('GeneratedUI requires actions.handleCancel.'); } if (!actions || !Object.prototype.hasOwnProperty.call(actions, 'handleDelete') || typeof actions.handleDelete !== 'function') { throw new Error('GeneratedUI requires actions.handleDelete.'); } if (!actions || !Object.prototype.hasOwnProperty.call(actions, 'handleEdit') || typeof actions.handleEdit !== 'function') { throw new Error('GeneratedUI requires actions.handleEdit.'); } if (!actions || !Object.prototype.hasOwnProperty.call(actions, 'handleViewTimeline') || typeof actions.handleViewTimeline !== 'function') { throw new Error('GeneratedUI requires actions.handleViewTimeline.'); } /* @oods-domain-binding handleCancel */ const handleCancel = () => { actions.handleCancel(); }; /* @oods-domain-binding handleDelete */ const handleDelete = () => { actions.handleDelete(); }; /* @oods-domain-binding handleEdit */ const handleEdit = () => { actions.handleEdit(); }; /* @oods-domain-binding handleViewTimeline */ const handleViewTimeline = () => { actions.handleViewTimeline(); }; return (
{['future', 'trialing', 'active', 'paused', 'past_due', 'unpaid'].includes(String(status)) && !isArchived && ( )}
Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgNarrow={svgNarrow ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgWide={svgWide ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgDark={svgDark ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgDarkNarrow={svgDarkNarrow ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgDarkWide={svgDarkWide ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgHc={svgHc ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgHcNarrow={svgHcNarrow ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} svgHcWide={svgHcWide ?? "Payments recorded for this subscription, in EUR.Payments recorded for this subscription, in EUR.Jan 15, 2026Feb 15, 2026Mar 15, 2026Apr 15, 2026May 17, 2026Jun 15, 2026Jul 15, 2026Aug 15, 2026Aug 16, 2026Aug 19, 2026Sep 15, 2026Payment date−€20−€10€0€10€20Amount"} description="Payments recorded for this subscription, in its currency." height={240} title="Payment amounts" width={720} /> ) }, { ...{"id":"detail-tabs-9-read-fields","label":"Details"}, panel: ( {formatReadOnlyValue(subscriptionId, "string", false)} {formatReferenceLabel(planCode, (Object.entries({"plan_starter_monthly":"plan_starter_monthly","plan_team_monthly":"plan_team_monthly","plan_business_monthly":"plan_business_monthly","plan_team_annual":"plan_team_annual","plan_enterprise_annual":"plan_enterprise_annual","plan_analytics_addon_monthly":"plan_analytics_addon_monthly","plan_pro_monthly_2025":"plan_pro_monthly_2025","plan_business_plus_monthly":"plan_business_plus_monthly"}).find(([key]) => key === String(planCode))?.[1]), 'Plan code')} {formatReadOnlyValue(planInterval, "string", true)} {formatReadOnlyValue(customerName, "string", false)} {formatReadOnlyValue(customerEmail, "email", false)} {formatReadOnlyValue(createdAt, "datetime", false)} {formatReadOnlyValue(updatedAt, "datetime", false)} {formatReadOnlyValue(lastEvent, "string", true)} {formatReadOnlyValue(lastEventAt, "datetime", false)} ) } ]} />
Reference details
Plan code
{String(planCode ?? 'Not available')}
); };