@flamingo-stack/openframe-frontend-core 0.0.720 → 0.0.722

package/dist/components/help-center-pages/index.d.ts

@@ -17,6 +17,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, type DownloadAppsWebOption } from './download-apps-page';
 export { FaqDocumentPage, type FaqDocumentPageProps } from '../faq';
 export { LegalDocumentPage, type LegalDocumentPageProps } from '../shared/legal-document';
 export { ReleaseDetailPage, type ReleaseDetailPageProps, type VideoDisplaySectionProps, } from '../shared/product-release';

package/dist/components/help-center-pages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAIH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,KAAK,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAC1G,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,KAAK,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AACtH,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG1G,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC1F,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,GAC9B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,KAAK,8BAA8B,EAAE,MAAM,sBAAsB,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/help-center-pages/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAIH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,KAAK,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAC1G,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,2BAA2B,EAAE,KAAK,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AACtH,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAGhH,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC1F,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,GAC9B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,KAAK,8BAA8B,EAAE,MAAM,sBAAsB,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/help-center-pages/index.js

@@ -6,62 +6,67 @@ import {
   ProductReleasesView,
   ReleaseDetailPage,
   RoadmapView
-} from "../../chunk-Q5327DXK.js";
+} from "../../chunk-F33RMJOL.js";
 import {
   DocsHubPage
-} from "../../chunk-VYZCKY5K.js";
-import "../../chunk-LO3KCLEF.js";
-import "../../chunk-B2N4YX66.js";
+} from "../../chunk-IF72N4PE.js";
+import "../../chunk-BUDZWXRG.js";
+import "../../chunk-6YBUQAOH.js";
 import {
   FaqDocumentPage,
   FaqSection
-} from "../../chunk-TORERAXD.js";
+} from "../../chunk-HA2ASGJM.js";
 import {
   StickySectionNav,
   useScrollSpy
-} from "../../chunk-XW3Q623Q.js";
+} from "../../chunk-VSYQJCNR.js";
 import {
   HelpCenterList
-} from "../../chunk-VBHGJFA3.js";
+} from "../../chunk-SZ3CBFSH.js";
 import {
   ContactForm
-} from "../../chunk-6W46LVK4.js";
+} from "../../chunk-ETQVXIYW.js";
 import {
   DevSectionPage,
   ListEmptyState
-} from "../../chunk-7HYEQKN6.js";
-import "../../chunk-URW23QUM.js";
-import "../../chunk-AZRI4XBP.js";
+} from "../../chunk-65C4WHG4.js";
+import "../../chunk-K76ACBR3.js";
+import "../../chunk-I3UUMRO7.js";
 import {
   OnboardingGuideDetailView,
   OnboardingGuidesCatalogView
-} from "../../chunk-VYVPII4W.js";
-import "../../chunk-B5LNX4GZ.js";
-import "../../chunk-O3MKJU6A.js";
+} from "../../chunk-AWWLEYAU.js";
+import "../../chunk-NMGWNUKB.js";
+import "../../chunk-SZF7ENIW.js";
 import {
+  CommandBox,
   ComplianceLogo,
   DataAttribution,
   LoadError,
+  MobileAppQr,
   PageShell,
   SearchInput,
   StackedRowsPanel,
   StatusIndicator,
+  StoreBadgeLinks,
   TabNavigation
-} from "../../chunk-7IOU6BJE.js";
-import "../../chunk-ILNN6QRW.js";
+} from "../../chunk-KBPGSPXQ.js";
+import "../../chunk-KS3YLYVL.js";
 import "../../chunk-LQYXMEYF.js";
 import "../../chunk-4JPLYOS6.js";
 import {
   EntityImage,
   PageLayout
-} from "../../chunk-YK3X74SF.js";
+} from "../../chunk-UYMTAFHG.js";
 import {
+  useCopyToClipboard,
+  useDownloads,
   useScrollToHash
-} from "../../chunk-3HZ6XSZC.js";
+} from "../../chunk-2TXGR7IK.js";
 import "../../chunk-3K5ZLZE7.js";
 import "../../chunk-HFL2F4RM.js";
 import "../../chunk-YYYVS7CX.js";
-import "../../chunk-WSDT7LYL.js";
+import "../../chunk-3UBWDR65.js";
 import "../../chunk-PLWMIU72.js";
 import {
   ScrollShadow,
@@ -69,21 +74,29 @@ import {
   UnifiedSkeleton,
   getFlagFromCountryName,
   useIsHydrated
-} from "../../chunk-PXAKSPLZ.js";
-import "../../chunk-2NASBO7O.js";
+} from "../../chunk-E7NIZXDT.js";
+import "../../chunk-5D2K7TFT.js";
 import "../../chunk-AFTRPEXO.js";
 import {
   Modal,
   ModalContent,
   ModalHeader,
   ModalTitle
-} from "../../chunk-ZPHOQDAE.js";
-import "../../chunk-P3JMAMHP.js";
+} from "../../chunk-WY4SLTMZ.js";
+import "../../chunk-REETLEL5.js";
 import {
+  DESKTOP_OSES,
+  DESKTOP_OS_LABELS,
+  DOWNLOADS_API_PATH,
+  DOWNLOADS_MOBILE_TAGLINE,
+  DOWNLOADS_MOBILE_TITLE,
+  DOWNLOADS_TAGLINE,
+  DOWNLOADS_TITLE,
+  DOWNLOAD_ARCHITECTURE_LABELS,
   RESCUE_FORMS,
   STICKY_HEADER_OFFSET_PX,
   useDebounce
-} from "../../chunk-CMZ3QTFQ.js";
+} from "../../chunk-4I3K6LEH.js";
 import "../../chunk-34I6XI3N.js";
 import {
   useRouter
@@ -104,12 +117,14 @@ import {
   trustFrameworkBadge,
   trustFrameworkMonitoringEntry,
   useSelfFetch
-} from "../../chunk-GANIUMRU.js";
+} from "../../chunk-7UZ2JZJY.js";
 import "../../chunk-H3PKYE4N.js";
 import {
   brandLogoForName
-} from "../../chunk-742BGXNX.js";
-import "../../chunk-IYVFSLWJ.js";
+} from "../../chunk-EWED6ISQ.js";
+import {
+  formatUrlForDisplay
+} from "../../chunk-KZQO5EJQ.js";
 import "../../chunk-FBZMAPWO.js";
 import "../../chunk-FSQQZFVG.js";
 import "../../chunk-E4ABZWTJ.js";
@@ -117,12 +132,15 @@ import "../../chunk-KEKCQENI.js";
 import "../../chunk-ADBE7QF3.js";
 import "../../chunk-N45D4ZXQ.js";
 import {
+  AppleLogoIcon,
   BrainAIIcon,
   CheckIcon,
+  Download01Icon,
   FileIcon,
   FileShieldIcon,
   LockIcon,
-  ShieldCheckIcon
+  ShieldCheckIcon,
+  WindowsLogoGreyIcon
 } from "../../chunk-NCPTID44.js";
 import "../../chunk-OSIKGEBU.js";
 import "../../chunk-CMGFZHCN.js";
@@ -130,13 +148,15 @@ import "../../chunk-WI6FHKD7.js";
 import "../../chunk-INS7KZJB.js";
 import {
   Button
-} from "../../chunk-YDPKUAP4.js";
+} from "../../chunk-DJ4IFQNQ.js";
 import "../../chunk-DAAVMYUT.js";
 import "../../chunk-V3JFVKHV.js";
 import "../../chunk-WMNCVLES.js";
 import "../../chunk-4R2L3DSA.js";
 import "../../chunk-FYEJTF5Y.js";
-import "../../chunk-7RXWKTAP.js";
+import {
+  cn
+} from "../../chunk-7RXWKTAP.js";
 import "../../chunk-62GWEYJ5.js";
 
 // src/components/help-center-pages/roadmap-page.tsx
@@ -844,9 +864,219 @@ function TrustCenterPageSkeleton({
 }) {
   return /* @__PURE__ */ jsx6(TrustCenterChrome, { shell, title, subtitle, backButton, children: /* @__PURE__ */ jsx6(TrustCenterSkeleton, {}) });
 }
+
+// src/components/help-center-pages/download-apps-page.tsx
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var SECTIONS_CLASS = "flex flex-col gap-[var(--spacing-system-xlf)]";
+var SECTION_CLASS = "flex flex-col gap-[var(--spacing-system-lf)]";
+var CARDS_GRID_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-2";
+var cardsGridClass = (cards) => cards > 1 ? CARDS_GRID_CLASS : "grid grid-cols-1";
+var CARD_CLASS = "flex flex-col gap-[var(--spacing-system-lf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]";
+var CARD_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-sf)]";
+var BUTTONS_CLASS = "flex flex-wrap gap-[var(--spacing-system-sf)]";
+var COMMANDS_CLASS = "flex flex-col gap-[var(--spacing-system-mf)]";
+var OS_ICONS = {
+  mac: AppleLogoIcon,
+  windows: WindowsLogoGreyIcon
+};
+function CardHeader({
+  icon: Icon,
+  title,
+  detail
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: CARD_HEADER_CLASS, children: [
+    Icon && /* @__PURE__ */ jsx7(Icon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+    /* @__PURE__ */ jsx7("h3", { className: "m-0 text-ods-text-primary text-h3", children: title }),
+    detail && /* @__PURE__ */ jsx7("p", { className: "m-0 ml-auto text-right text-ods-text-secondary text-h6", children: detail })
+  ] });
+}
+function rowsBySystem(downloads) {
+  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, siblings) {
+  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;
+  return siblings > 1 && architecture ? `${label} (${architecture})` : label;
+}
+function SystemCard({
+  system,
+  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))];
+  const report = (action, row) => onDownloadAction?.({ action, id: row.id, os: row.os, architecture: row.architecture });
+  return /* @__PURE__ */ jsxs7("div", { className: CARD_CLASS, children: [
+    /* @__PURE__ */ jsx7(
+      CardHeader,
+      {
+        icon: OS_ICONS[system.os],
+        title: DESKTOP_OS_LABELS[system.os],
+        detail: requirements.length > 0 ? `Requires ${requirements.join(" or ")}` : void 0
+      }
+    ),
+    system.installers.length > 0 && /* @__PURE__ */ jsx7("div", { className: BUTTONS_CLASS, children: system.installers.map((download, index) => /* @__PURE__ */ jsx7(
+      Button,
+      {
+        variant: index === 0 ? "accent" : "outline",
+        href: download.url ?? void 0,
+        download: true,
+        leftIcon: /* @__PURE__ */ jsx7(Download01Icon, { className: "h-5 w-5" }),
+        onClick: () => report("installer", download),
+        children: installerLabel(download, system.installers.length)
+      },
+      download.id
+    )) }),
+    system.commands.length > 0 && /* @__PURE__ */ jsx7("div", { className: COMMANDS_CLASS, children: system.commands.map(
+      (row) => row.command ? /* @__PURE__ */ jsx7(
+        CommandBox,
+        {
+          title: row.label ?? void 0,
+          command: row.command,
+          maxLines: 1,
+          commandClassName: "text-ods-accent",
+          copyAriaLabel: `Copy the ${row.label ?? "install"} command`,
+          onCopy: () => {
+            void copy(row.command);
+            report("command", row);
+          }
+        },
+        row.id
+      ) : null
+    ) })
+  ] });
+}
+function WebCard({ web }) {
+  return /* @__PURE__ */ jsxs7(
+    "section",
+    {
+      "aria-labelledby": "download-web",
+      className: cn(CARD_CLASS, "content-md:flex-row content-md:items-center content-md:justify-between"),
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-[var(--spacing-system-xsf)]", children: [
+          /* @__PURE__ */ jsx7("h2", { id: "download-web", className: "m-0 text-ods-text-primary text-h3", children: web.title }),
+          /* @__PURE__ */ jsx7("p", { className: "m-0 text-ods-text-secondary text-h4", children: web.description })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { className: "shrink-0", children: web.action })
+      ]
+    }
+  );
+}
+function CardsSkeleton({ label }) {
+  return /* @__PURE__ */ jsx7("div", { className: CARDS_GRID_CLASS, "aria-busy": "true", "aria-label": label, children: [0, 1].map((card) => /* @__PURE__ */ jsxs7("div", { className: CARD_CLASS, children: [
+    /* @__PURE__ */ jsx7(UnifiedSkeleton, { className: "h-6 w-32 rounded" }),
+    /* @__PURE__ */ jsx7(UnifiedSkeleton, { className: "h-12 w-56 rounded-md" }),
+    /* @__PURE__ */ jsx7(UnifiedSkeleton, { className: "h-14 w-full rounded-md" })
+  ] }, card)) });
+}
+function Section({ id, title, children }) {
+  return /* @__PURE__ */ jsxs7("section", { "aria-labelledby": id, className: SECTION_CLASS, children: [
+    /* @__PURE__ */ jsx7("h2", { id, className: "m-0 text-ods-text-primary text-h2", children: title }),
+    children
+  ] });
+}
+function storeCardTitle(links) {
+  if (links.appStoreUrl && links.googlePlayUrl) return "iPhone, iPad and Android";
+  return links.appStoreUrl ? "iPhone and iPad" : "Android";
+}
+function DownloadAppsPage({
+  endpoint = DOWNLOADS_API_PATH,
+  initialData,
+  shell = true,
+  backButton = false,
+  title,
+  subtitle,
+  showDesktop = true,
+  openStoresInNewTab = true,
+  onDownloadAction,
+  web
+}) {
+  const { data, isLoading, error, reload } = useDownloads({ endpoint, initialData });
+  const systems = showDesktop && data ? rowsBySystem(data.desktop) : [];
+  const mobile = data?.mobile ?? null;
+  const hasMobile = !!mobile && (!!mobile.appStoreUrl || !!mobile.googlePlayUrl);
+  const offersDesktop = showDesktop && (!data || systems.length > 0);
+  let body;
+  if (error && !data) {
+    body = /* @__PURE__ */ jsx7(LoadError, { message: "Could not load the downloads", onRetry: reload });
+  } else if (!data) {
+    body = isLoading ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      showDesktop && /* @__PURE__ */ jsx7(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx7(CardsSkeleton, { label: "Loading the installers" }) }),
+      /* @__PURE__ */ jsx7(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsx7(CardsSkeleton, { label: "Loading the mobile app" }) })
+    ] }) : null;
+  } else {
+    body = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      systems.length > 0 && /* @__PURE__ */ jsx7(Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ jsx7("div", { className: cardsGridClass(systems.length), children: systems.map((system) => /* @__PURE__ */ jsx7(SystemCard, { system, onDownloadAction }, system.os)) }) }),
+      mobile && hasMobile && /* @__PURE__ */ jsx7(Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ jsxs7("div", { className: cardsGridClass(mobile.install ? 2 : 1), children: [
+        /* @__PURE__ */ jsxs7("div", { className: CARD_CLASS, children: [
+          /* @__PURE__ */ jsx7(CardHeader, { title: storeCardTitle(mobile) }),
+          /* @__PURE__ */ jsx7("p", { className: "m-0 text-ods-text-secondary text-h4", children: "Get alerts and respond to tickets on the go." }),
+          /* @__PURE__ */ jsx7(
+            StoreBadgeLinks,
+            {
+              appStoreUrl: mobile.appStoreUrl,
+              googlePlayUrl: mobile.googlePlayUrl,
+              openInNewTab: openStoresInNewTab
+            }
+          )
+        ] }),
+        mobile.install && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: cn(CARD_CLASS, "content-md:flex-row content-md:items-center content-md:justify-between"),
+            children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
+                /* @__PURE__ */ jsx7(CardHeader, { title: "Scan with your phone" }),
+                /* @__PURE__ */ jsxs7("p", { className: "m-0 text-ods-text-secondary text-h4", children: [
+                  "Point your camera at the code, or open ",
+                  formatUrlForDisplay(mobile.install.url),
+                  " on your phone."
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx7(MobileAppQr, { install: mobile.install, className: "h-[144px] w-[144px] shrink-0" })
+            ]
+          }
+        )
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx7(
+    DownloadAppsChrome,
+    {
+      shell,
+      backButton,
+      title: title ?? (offersDesktop ? DOWNLOADS_TITLE : DOWNLOADS_MOBILE_TITLE),
+      subtitle: subtitle ?? (offersDesktop ? DOWNLOADS_TAGLINE : DOWNLOADS_MOBILE_TAGLINE),
+      children: /* @__PURE__ */ jsxs7("div", { className: SECTIONS_CLASS, children: [
+        body,
+        web && /* @__PURE__ */ jsx7(WebCard, { web })
+      ] })
+    }
+  );
+}
+function DownloadAppsChrome({
+  shell,
+  title,
+  subtitle,
+  backButton,
+  children
+}) {
+  const router = useRouter();
+  const backCfg = backButton === false ? void 0 : { label: backButton.label ?? "Back to home", onClick: () => router.push(backButton.href ?? "/") };
+  const inner = /* @__PURE__ */ jsx7(PageLayout, { title, subtitle, backButton: backCfg, titleSize: "h1", titleWrap: true, children });
+  return shell ? /* @__PURE__ */ jsx7(PageShell, { children: inner }) : /* @__PURE__ */ jsx7("div", { className: "page-shell-content", children: inner });
+}
 export {
   DeliveryPage,
   DocsHubPage,
+  DownloadAppsPage,
   FaqDocumentPage,
   HelpCenterList,
   LegalDocumentPage,