@flamingo-stack/openframe-frontend-core 0.0.719 → 0.0.721

package/src/components/help-center-pages/download-apps-page.tsx

@@ -0,0 +1,364 @@
+'use client';
+
+/**
+ * `<DownloadAppsPage>`: every way to install OpenFrame, on one page.
+ *
+ *   - The desktop app: every system at once, one card each (a download page
+ *     lists its platforms; it does not hide them behind tabs, so nothing moves
+ *     when a visitor looks for another system). In a card the installer is THE
+ *     action (the other architecture is a quieter button) and each package
+ *     manager is one line under it, with its copy button.
+ *   - The mobile app: the store badges, and the install QR code beside them.
+ *   - `footer`: the host's own last word (the website's "start on the web" card).
+ *
+ * DATA: all of it is the server's answer (`DownloadsPublic`), read by
+ * `useDownloads` against `endpoint` (default `DOWNLOADS_API_PATH`; embedders
+ * pass their `/content` proxy path), the one request every download button on
+ * the page shares. `initialData` (hub SSR) is the answer, with no fetch. The
+ * lib holds no link of its own and no fallback: the page ADAPTS, so a system
+ * with no installer and no command has no card, a store with no listing has no
+ * badge, and a section with nothing to offer is not drawn.
+ *
+ * A HOST DECIDES `showDesktop`: the website shows the desktop app only to a
+ * visitor whose main action is the download; the desktop shell hides it (it is
+ * the app already running).
+ *
+ * The chrome is the canonical `PageShell` + frozen `PageLayout`.
+ */
+
+import { useEffect, type ComponentType, type ReactNode } from 'react';
+import { useRouter } from '../../embed-shims/next-navigation';
+import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
+import { useDownloads } from '../../hooks/use-downloads';
+import {
+  DESKTOP_OS_LABELS,
+  DOWNLOAD_ARCHITECTURE_LABELS,
+  DOWNLOADS_API_PATH,
+  DOWNLOADS_MOBILE_TAGLINE,
+  DOWNLOADS_MOBILE_TITLE,
+  DOWNLOADS_TAGLINE,
+  DOWNLOADS_TITLE,
+  type AppDownload,
+  type DownloadActionEvent,
+  type DownloadsPublic,
+  type MobileAppLinks,
+} from '../../types/downloads';
+import { cn } from '../../utils/cn';
+import { DOWNLOAD_PAGE_STORE_PARAM, MOBILE_APP_INSTALL_HOST_PATH, resolveMobileStoreUrl } from '../../utils/mobile-app';
+import { DESKTOP_OSES, type DesktopOs } from '../../utils/visitor-os';
+import { CommandBox } from '../features/command-box';
+import { AppleLogoIcon } from '../icons-v2-generated/brand-logos/apple-logo-icon';
+import { WindowsLogoGreyIcon } from '../icons-v2-generated/brand-logos/windows-logo-grey-icon';
+import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
+import { PageShell } from '../layout/article-detail-layout';
+import { PageLayout } from '../layout/page-layout';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from '../ui/button/button';
+import { LoadError } from '../ui/error-state';
+import { MobileAppQr } from '../ui/mobile-app-qr';
+import { StoreBadgeLinks } from '../ui/store-badges';
+
+export interface DownloadAppsPageProps {
+  /** GET endpoint for the public projection. Default `DOWNLOADS_API_PATH`. */
+  endpoint?: string;
+  /** Optional SSR hydrate (hub server-read): skips the initial client fetch. */
+  initialData?: DownloadsPublic;
+  /** Render the standalone `<PageShell>`. Default true. Pass false when the host
+   *  layout already provides the page container (e.g. openframe-frontend). */
+  shell?: boolean;
+  /** Back-button config. Default: none. */
+  backButton?: { label?: string; href?: string } | false;
+  /** Page title. Default by what is offered (`DOWNLOADS_TITLE` / `DOWNLOADS_MOBILE_TITLE`). */
+  title?: string;
+  /** Page subtitle. Default by what is offered. */
+  subtitle?: string;
+  /** Offer the desktop app. Default true. False: the mobile app only. */
+  showDesktop?: boolean;
+  /** Open the store listings in a new tab. Default true. */
+  openStoresInNewTab?: boolean;
+  /** Called when a visitor downloads an installer or copies an install command (the host's analytics). */
+  onDownloadAction?: (event: DownloadActionEvent) => void;
+  /** The host's own closing block, under the mobile app. */
+  footer?: ReactNode;
+}
+
+const SECTIONS_CLASS = 'flex flex-col gap-[var(--spacing-system-xlf)]';
+const SECTION_CLASS = 'flex flex-col gap-[var(--spacing-system-lf)]';
+const CARDS_GRID_CLASS = 'grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-2';
+/** One card takes the row; two or more share it. */
+const cardsGridClass = (cards: number) => (cards > 1 ? CARDS_GRID_CLASS : 'grid grid-cols-1');
+const CARD_CLASS =
+  'flex flex-col gap-[var(--spacing-system-lf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]';
+const CARD_HEADER_CLASS = 'flex items-center gap-[var(--spacing-system-sf)]';
+const BUTTONS_CLASS = 'flex flex-wrap gap-[var(--spacing-system-sf)]';
+const COMMANDS_CLASS = 'flex flex-col gap-[var(--spacing-system-mf)]';
+
+const OS_ICONS: Partial<Record<DesktopOs, ComponentType<{ className?: string }>>> = {
+  mac: AppleLogoIcon,
+  windows: WindowsLogoGreyIcon,
+};
+
+/** A card's heading row: a small logo, the name, and one quiet line of detail at the far end. */
+function CardHeader({
+  icon: Icon,
+  title,
+  detail,
+}: {
+  icon?: ComponentType<{ className?: string }>;
+  title: string;
+  detail?: string;
+}) {
+  return (
+    <div className={CARD_HEADER_CLASS}>
+      {Icon && <Icon className="h-6 w-6 shrink-0 text-ods-text-secondary" />}
+      <h3 className="m-0 text-ods-text-primary text-h3">{title}</h3>
+      {detail && <p className="m-0 ml-auto text-right text-ods-text-secondary text-h6">{detail}</p>}
+    </div>
+  );
+}
+
+interface SystemRows {
+  os: DesktopOs;
+  installers: AppDownload[];
+  commands: AppDownload[];
+}
+
+/**
+ * The rows per system, in the order they arrived. The page adapts to what the
+ * deployment names: a system is offered when it has an installer OR a package
+ * manager command, and a system with neither has no card at all.
+ */
+function rowsBySystem(downloads: readonly AppDownload[]): SystemRows[] {
+  return DESKTOP_OSES.map(os => ({
+    os,
+    installers: downloads.filter(d => d.os === os && d.kind === 'binary' && d.url),
+    commands: downloads.filter(d => d.os === os && d.kind === 'command' && d.command),
+  })).filter(system => system.installers.length > 0 || system.commands.length > 0);
+}
+
+function installerLabel(download: AppDownload, siblings: number): string {
+  if (download.label) return download.label;
+  const label = `Download for ${DESKTOP_OS_LABELS[download.os]}`;
+  const architecture = download.architecture ? DOWNLOAD_ARCHITECTURE_LABELS[download.architecture] : null;
+  // One installer for a system needs no qualifier; two are told apart by their architecture.
+  return siblings > 1 && architecture ? `${label} (${architecture})` : label;
+}
+
+/** One system's card: its logo and name, its installers side by side, then each package manager as one line. */
+function SystemCard({
+  system,
+  onDownloadAction,
+}: {
+  system: SystemRows;
+  onDownloadAction?: DownloadAppsPageProps['onDownloadAction'];
+}) {
+  const { copy } = useCopyToClipboard({
+    successTitle: 'Copied',
+    successDescription: 'Paste it into your terminal and press Return.',
+  });
+  const requirements = [...new Set(system.installers.map(d => d.minOsLabel).filter((l): l is string => !!l))];
+  const report = (action: DownloadActionEvent['action'], row: AppDownload) =>
+    onDownloadAction?.({ action, id: row.id, os: row.os, architecture: row.architecture });
+  return (
+    <div className={CARD_CLASS}>
+      <CardHeader
+        icon={OS_ICONS[system.os]}
+        title={DESKTOP_OS_LABELS[system.os]}
+        detail={requirements.length > 0 ? `Requires ${requirements.join(' or ')}` : undefined}
+      />
+      {system.installers.length > 0 && (
+        <div className={BUTTONS_CLASS}>
+          {system.installers.map((download, index) => (
+            <Button
+              key={download.id}
+              variant={index === 0 ? 'accent' : 'outline'}
+              href={download.url ?? undefined}
+              download
+              leftIcon={<Download01Icon className="h-5 w-5" />}
+              onClick={() => report('installer', download)}
+            >
+              {installerLabel(download, system.installers.length)}
+            </Button>
+          ))}
+        </div>
+      )}
+      {system.commands.length > 0 && (
+        <div className={COMMANDS_CLASS}>
+          {system.commands.map(row =>
+            row.command ? (
+              <CommandBox
+                key={row.id}
+                title={row.label ?? undefined}
+                command={row.command}
+                maxLines={1}
+                commandClassName="text-ods-accent"
+                copyAriaLabel={`Copy the ${row.label ?? 'install'} command`}
+                onCopy={() => {
+                  void copy(row.command as string);
+                  report('command', row);
+                }}
+              />
+            ) : null,
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** A section's cards while the server's answer loads: the same grid and card frame, a button's box in each. */
+function CardsSkeleton({ label }: { label: string }) {
+  return (
+    <div className={CARDS_GRID_CLASS} aria-busy="true" aria-label={label}>
+      {[0, 1].map(card => (
+        <div key={card} className={CARD_CLASS}>
+          <UnifiedSkeleton className="h-6 w-32 rounded" />
+          <UnifiedSkeleton className="h-12 w-56 rounded-md" />
+          <UnifiedSkeleton className="h-14 w-full rounded-md" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Section({ id, title, children }: { id: string; title: string; children: ReactNode }) {
+  return (
+    <section aria-labelledby={id} className={SECTION_CLASS}>
+      <h2 id={id} className="m-0 text-ods-text-primary text-h2">
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
+/** Which devices the store card names: only the stores the server has a listing for. */
+function storeCardTitle(links: MobileAppLinks): string {
+  if (links.appStoreUrl && links.googlePlayUrl) return 'iPhone, iPad and Android';
+  return links.appStoreUrl ? 'iPhone and iPad' : 'Android';
+}
+
+export function DownloadAppsPage({
+  endpoint = DOWNLOADS_API_PATH,
+  initialData,
+  shell = true,
+  backButton = false,
+  title,
+  subtitle,
+  showDesktop = true,
+  openStoresInNewTab = true,
+  onDownloadAction,
+  footer,
+}: DownloadAppsPageProps) {
+  const { data, isLoading, error, reload } = useDownloads({ endpoint, initialData });
+  // The page adapts to the server's answer: a section exists only for what it names.
+  const systems = showDesktop && data ? rowsBySystem(data.desktop) : [];
+  const mobile = data?.mobile ?? null;
+  const hasMobile = !!mobile && (!!mobile.appStoreUrl || !!mobile.googlePlayUrl);
+  // Until the answer lands, a host that offers the desktop app is titled for it.
+  const offersDesktop = showDesktop && (!data || systems.length > 0);
+
+  useEffect(() => {
+    // The install QR code arrives with this parameter: a phone or a tablet goes
+    // straight on to its store. `replace`, so Back returns to whatever sent the
+    // visitor here. Anyone else who opens the page on a phone reads it.
+    if (!mobile || !new URLSearchParams(window.location.search).has(DOWNLOAD_PAGE_STORE_PARAM)) return;
+    const storeUrl = resolveMobileStoreUrl(mobile, navigator.userAgent, navigator.maxTouchPoints);
+    if (storeUrl) window.location.replace(storeUrl);
+  }, [mobile]);
+
+  let body: ReactNode;
+  if (error && !data) {
+    body = <LoadError message="Could not load the downloads" onRetry={reload} />;
+  } else if (!data) {
+    body = isLoading ? (
+      <>
+        {showDesktop && (
+          <Section id="download-desktop" title="Desktop app">
+            <CardsSkeleton label="Loading the installers" />
+          </Section>
+        )}
+        <Section id="download-mobile" title="Mobile app">
+          <CardsSkeleton label="Loading the mobile app" />
+        </Section>
+      </>
+    ) : null;
+  } else {
+    body = (
+      <>
+        {systems.length > 0 && (
+          <Section id="download-desktop" title="Desktop app">
+            <div className={cardsGridClass(systems.length)}>
+              {systems.map(system => (
+                <SystemCard key={system.os} system={system} onDownloadAction={onDownloadAction} />
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {mobile && hasMobile && (
+          <Section id="download-mobile" title="Mobile app">
+            <div className={CARDS_GRID_CLASS}>
+              <div className={CARD_CLASS}>
+                <CardHeader title={storeCardTitle(mobile)} />
+                <p className="m-0 text-ods-text-secondary text-h4">Get alerts and respond to tickets on the go.</p>
+                <StoreBadgeLinks
+                  appStoreUrl={mobile.appStoreUrl}
+                  googlePlayUrl={mobile.googlePlayUrl}
+                  openInNewTab={openStoresInNewTab}
+                />
+              </div>
+              <div className={cn(CARD_CLASS, 'content-md:flex-row content-md:items-center content-md:justify-between')}>
+                <div className="flex flex-col gap-[var(--spacing-system-sf)]">
+                  <CardHeader title="Scan with your phone" />
+                  <p className="m-0 text-ods-text-secondary text-h4">
+                    Point your camera at the code, or open {MOBILE_APP_INSTALL_HOST_PATH} on your phone.
+                  </p>
+                </div>
+                {/* The plate is light on purpose: a QR code is read dark on light. */}
+                <div className="w-fit shrink-0 rounded-md bg-ods-bg-inverted p-[var(--spacing-system-sf)]">
+                  <MobileAppQr className="h-[120px] w-[120px]" />
+                </div>
+              </div>
+            </div>
+          </Section>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <DownloadAppsChrome
+      shell={shell}
+      backButton={backButton}
+      title={title ?? (offersDesktop ? DOWNLOADS_TITLE : DOWNLOADS_MOBILE_TITLE)}
+      subtitle={subtitle ?? (offersDesktop ? DOWNLOADS_TAGLINE : DOWNLOADS_MOBILE_TAGLINE)}
+    >
+      <div className={SECTIONS_CLASS}>
+        {body}
+        {footer}
+      </div>
+    </DownloadAppsChrome>
+  );
+}
+
+/** The page's chrome: the standalone `PageShell` or the host's padded box, and the frozen `PageLayout` header. */
+function DownloadAppsChrome({
+  shell,
+  title,
+  subtitle,
+  backButton,
+  children,
+}: Required<Pick<DownloadAppsPageProps, 'shell' | 'title' | 'subtitle' | 'backButton'>> & { children: ReactNode }) {
+  const router = useRouter();
+  const backCfg =
+    backButton === false
+      ? undefined
+      : { label: backButton.label ?? 'Back to home', onClick: () => router.push(backButton.href ?? '/') };
+  const inner = (
+    <PageLayout title={title} subtitle={subtitle} backButton={backCfg} titleSize="h1" titleWrap>
+      {children}
+    </PageLayout>
+  );
+  return shell ? <PageShell>{inner}</PageShell> : <div className="page-shell-content">{inner}</div>;
+}

package/src/components/help-center-pages/index.ts

@@ -22,6 +22,7 @@ export { ProductReleasesListPage, type ProductReleasesListPageProps } from './pr
 export { DeliveryPage, type DeliveryPageProps } from './delivery-page';
 export { OnboardingGuidesCatalogPage, type OnboardingGuidesCatalogPageProps } from './onboarding-guides-catalog-page';
 export { TrustCenterPage, TrustCenterPageSkeleton, type TrustCenterPageProps } from './trust-center-page';
+export { DownloadAppsPage, type DownloadAppsPageProps } from './download-apps-page';
 
 // Existing full-pages re-exported for a single Help Center import site.
 export { FaqDocumentPage, type FaqDocumentPageProps } from '../faq';

package/src/components/help-center-pages/trust-center-page.tsx

@@ -45,7 +45,7 @@ import {
 } from '../../types/trust-center';
 import { STICKY_HEADER_OFFSET_PX } from '../../utils/same-page-hash-nav';
 import { useScrollSpy } from '../docs/use-scroll-spy';
-import { FaqSection } from '../faq/faq-section';
+import { FaqSection, type FaqSectionProps } from '../faq/faq-section';
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
 import { StickySectionNav } from '../navigation/sticky-section-nav';
@@ -83,6 +83,8 @@ export interface TrustCenterPageProps {
   title?: string;
   /** Page subtitle. Default the brand-neutral `TRUST_CENTER_TAGLINE` (a host adds its brand here). */
   subtitle?: string;
+  /** The FAQ section's "ask the assistant" card (`FaqSection`'s `ask`): the host states its topic. Absent: no card. */
+  ask?: FaqSectionProps['ask'];
 }
 
 /** One section's page content. Its `h2` is the `TRUST_CENTER_SECTIONS` label — never a literal here. */
@@ -149,6 +151,7 @@ export function TrustCenterPage({
   backButton = false,
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE,
+  ask,
 }: TrustCenterPageProps) {
   const { data, isLoading, error, reload } = useSelfFetch<TrustCenterPublic>(endpoint, {
     initialData,
@@ -232,7 +235,7 @@ export function TrustCenterPage({
       lead: TRUST_SECTION_LEADS.subprocessors,
       render: d => <SubprocessorsSection subprocessors={d.subprocessors} />,
     },
-    faq: { render: d => <FaqSection initialFaqs={d.faqs} heading={null} /> },
+    faq: { render: d => <FaqSection initialFaqs={d.faqs} heading={null} ask={ask} /> },
     contact: { render: () => <ContactSection onContact={() => openRequest(null)} /> },
   };
 

package/src/components/navigation/mingo-ai-button.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import type React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import { useAssistantRuntime } from '../../contexts/assistant-runtime-context';
 import { useVisitorOs } from '../../hooks/ui/use-visitor-os';
 import { cn } from '../../utils';
 import { shortcutLabel, usesCommandKey } from '../../utils/visitor-os';
@@ -78,8 +79,8 @@ export function openAskAi(source?: string, options?: { prompt?: string }): void
  */
 export function MingoAiButton({
   source,
-  icon,
-  label = 'Mingo AI',
+  icon: iconProp,
+  label: labelProp,
   shortcutHint = false,
   variant = 'inline',
   className,
@@ -93,6 +94,22 @@ export function MingoAiButton({
   const inPage = variant === 'button';
 
   const commandKey = visitor.known && usesCommandKey(visitor.os);
+  // The launcher is the assistant's: its name, glyph and the chat it opens are
+  // the assistant runtime's (the host's server-resolved identity and its own
+  // opener), so no launcher types a name or assumes which chat exists. A prop
+  // still wins (a header given its own). The lib holds no name of its own:
+  // with none from either, there is no launcher to render (below). With no
+  // runtime opener the open is the `ask-ai:open` event of `source`.
+  const assistant = useAssistantRuntime();
+  const label = labelProp ?? assistant?.name;
+  const icon = iconProp ?? assistant?.icon;
+  const runtimeOpen = assistant?.open;
+  const eventSource = source ?? assistant?.source;
+  // The latest opener, for the shortcut listener: a host's inline callback must not re-bind it every render.
+  const openRef = useRef<() => void>(() => undefined);
+  useEffect(() => {
+    openRef.current = () => (runtimeOpen ? runtimeOpen({}) : openAskAi(eventSource));
+  });
 
   // The shortcut the key cap shows opens the same chat the click opens.
   useEffect(() => {
@@ -105,11 +122,14 @@ export function MingoAiButton({
       const modifier = commandKey ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
       if (event.key.toLowerCase() !== 'k' || !modifier) return;
       event.preventDefault();
-      openAskAi(source);
+      openRef.current();
     };
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [shortcutHint, source, commandKey]);
+  }, [shortcutHint, commandKey]);
+
+  // No name from the host or the runtime: nothing to launch under. The lib invents none.
+  if (!label) return null;
 
   return (
     <Button
@@ -121,7 +141,8 @@ export function MingoAiButton({
       aria-label={label}
       aria-keyshortcuts={shortcutHint && visitor.known ? (commandKey ? 'Meta+K' : 'Control+K') : undefined}
       onClick={e => {
-        openAskAi(source);
+        if (runtimeOpen) runtimeOpen({});
+        else openAskAi(eventSource);
         onClick?.(e);
       }}
       className={cn(

package/src/components/ui/button/button.tsx

@@ -339,6 +339,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
           download={download}
           prefetch={false}
           className={cn(shellClasses, isDisabled && 'pointer-events-none')}
+          // The click still reaches the caller (a download is what analytics counts).
+          onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
           aria-label={props['aria-label']}
         >
           {splitContent}
@@ -423,6 +425,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
         download={download}
         prefetch={false}
         className={cn(classes, isDisabled && 'pointer-events-none')}
+        onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
         aria-label={props['aria-label']}
       >
         {content}

package/src/components/ui/index.ts

@@ -73,6 +73,7 @@ export * from './status-badge';
 export * from './palette-badge';
 export * from './department-badge';
 export * from './store-badges';
+export * from './mobile-app-qr';
 export * from './status-indicator';
 export * from './toaster';
 // TODO: Add other UI components as they are moved to ui-kit

package/src/components/ui/mobile-app-qr.tsx

@@ -0,0 +1,40 @@
+import { MOBILE_APP_QR_PATH, MOBILE_APP_QR_VIEWBOX_SIZE } from '../../assets/mobile-app-qr';
+import { cn } from '../../utils/cn';
+import { MOBILE_APP_INSTALL_URL } from '../../utils/mobile-app';
+
+export interface MobileAppQrProps {
+  /** Sizes the code; the caller owns its footprint. */
+  className?: string;
+}
+
+/**
+ * The install QR code, drawn inline rather than loaded from `/public` so the
+ * modules take their colour from the surface they sit on.
+ *
+ * Dark modules, and the caller supplies a light plate. Decoders binarize the
+ * image and expect dark-on-light; inverting that is one of the two things they
+ * reliably fail on. The other is a missing quiet zone, which is why the 4-module
+ * margin is baked into the viewBox — keep it even when the plate is larger.
+ *
+ * That polarity holds only under the dark theme, where `text-ods-bg` is the dark
+ * value and `bg-ods-bg-inverted` the light one; both flip under `.theme-light`.
+ * Do not render this inside a light-theme scope: an inverted code is silently
+ * unscannable rather than visibly broken.
+ *
+ * The artwork is the asset `MOBILE_APP_QR_PATH` (`assets/mobile-app-qr`), which
+ * encodes {@link MOBILE_APP_INSTALL_URL}; the regeneration note lives there.
+ */
+export function MobileAppQr({ className }: MobileAppQrProps) {
+  return (
+    <svg
+      viewBox={`0 0 ${MOBILE_APP_QR_VIEWBOX_SIZE} ${MOBILE_APP_QR_VIEWBOX_SIZE}`}
+      fill="none"
+      shapeRendering="crispEdges"
+      role="img"
+      aria-label={`QR code for ${MOBILE_APP_INSTALL_URL}`}
+      className={cn('h-[120px] w-[120px] text-ods-bg', className)}
+    >
+      <path stroke="currentColor" d={MOBILE_APP_QR_PATH} />
+    </svg>
+  );
+}

package/src/components/ui/store-badges.tsx

@@ -299,32 +299,40 @@ export function GooglePlayBadge({ className }: StoreBadgeProps) {
 }
 
 export interface StoreBadgeLinksProps {
-  appStoreUrl: string;
-  googlePlayUrl: string;
+  /** The App Store listing. Absent or null: that badge is not drawn. */
+  appStoreUrl?: string | null;
+  /** The Google Play listing. Absent or null: that badge is not drawn. */
+  googlePlayUrl?: string | null;
   /** Opens both listings in a new tab. */
   openInNewTab?: boolean;
   className?: string;
 }
 
 /**
- * The pair of store badges as links — the canonical "get our mobile app" row.
+ * The store badges as links — the canonical "get our mobile app" row. A store
+ * with no listing has no badge, and with neither the row is not rendered.
  *
  * Both are rendered at the same height because Apple and Google each require
  * their badge to be no smaller than any other store's badge beside it, which is
  * only satisfiable by drawing them equal.
  */
 export function StoreBadgeLinks({ appStoreUrl, googlePlayUrl, openInNewTab = true, className }: StoreBadgeLinksProps) {
+  if (!appStoreUrl && !googlePlayUrl) return null;
   return (
     <div className={cn('flex flex-wrap items-center gap-[var(--spacing-system-lf)]', className)}>
       {/* `rel` on both branches: `noopener` is inert without a target, but `noreferrer` is
           not — dropping it on the same-window branch sent the tenant's hostname to Apple
           and Google as a Referer. */}
-      <a href={appStoreUrl} target={openInNewTab ? '_blank' : undefined} rel="noopener noreferrer">
-        <AppStoreBadge className="h-12 w-auto" />
-      </a>
-      <a href={googlePlayUrl} target={openInNewTab ? '_blank' : undefined} rel="noopener noreferrer">
-        <GooglePlayBadge className="h-12 w-auto" />
-      </a>
+      {appStoreUrl && (
+        <a href={appStoreUrl} target={openInNewTab ? '_blank' : undefined} rel="noopener noreferrer">
+          <AppStoreBadge className="h-12 w-auto" />
+        </a>
+      )}
+      {googlePlayUrl && (
+        <a href={googlePlayUrl} target={openInNewTab ? '_blank' : undefined} rel="noopener noreferrer">
+          <GooglePlayBadge className="h-12 w-auto" />
+        </a>
+      )}
     </div>
   );
 }