Handle document list state + API payload

Signed-off-by: Émile Ré <nemile.re@gmail.com>

packages/coredata/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@probo/coredata",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/index.ts",
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "format": "prettier --write ./src"
+  },
+  "prettier": "@probo/prettier",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@probo/prettier": "1.0.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.3"
+  }
+}

packages/coredata/src/TrustCenterAccess.ts

@@ -0,0 +1,14 @@
+import type { TrustCenterDocumentAccess } from "./TrustCenterDocumentAccess";
+
+export interface TrustCenterAccess {
+  id: string;
+  email: string;
+  name: string;
+  active: boolean;
+  hasAcceptedNonDisclosureAgreement: boolean;
+  createdAt: string;
+  lastTokenExpiresAt: string | null;
+  pendingRequestCount: number;
+  activeCount: number;
+  documentAccesses?: TrustCenterDocumentAccess[];
+};

packages/coredata/src/TrustCenterDocumentAccess.ts

@@ -0,0 +1,34 @@
+export const trustCenterDocumentAccessStatus = {
+  REQUESTED: "REQUESTED",
+  GRANTED: "GRANTED",
+  REJECTED: "REJECTED",
+  REVOKED: "REVOKED",
+} as const;
+
+export type TrustCenterDocumentAccessStatus = (typeof trustCenterDocumentAccessStatus)[keyof typeof trustCenterDocumentAccessStatus];
+
+export type TrustCenterDocumentAccess = {
+  active: boolean;
+  status: TrustCenterDocumentAccessStatus;
+  requested: boolean;
+  document?: {
+    id: string;
+    title: string;
+    documentType: string;
+  } | null;
+  report?: {
+    id: string;
+    filename: string;
+    audit?: {
+      id: string;
+      framework: {
+        name: string;
+      };
+    } | null;
+  } | null;
+  trustCenterFile?: {
+    id: string;
+    name: string;
+    category: string;
+  } | null;
+};

packages/coredata/src/index.ts

@@ -0,0 +1,2 @@
+export type { TrustCenterAccess } from "./TrustCenterAccess";
+export type { TrustCenterDocumentAccess, TrustCenterDocumentAccessStatus } from "./TrustCenterDocumentAccess";

packages/coredata/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["ES2021", "dom"],
+  }
+}

packages/helpers/package.json

@@ -17,5 +17,8 @@
     "prettier": "^3.5.3",
     "typescript": "^5.8.3",
     "vitest": "^3.1.3"
+  },
+  "dependencies": {
+    "@probo/coredata": "^1.0.0"
   }
 }

packages/helpers/src/index.ts

@@ -66,3 +66,8 @@ export { formatDatetime, formatDate } from "./date";
 export { getLogoUrl, getTrustCenterUrl } from "./trustCenter";
 export { formatError, type GraphQLError } from "./error";
 export { Role, getAssignableRoles } from "./roles";
+export {
+    getTrustCenterDocumentAccessInfo,
+    getTrustCenterDocumentAccessStatusBadgeVariant,
+    type TrustCenterDocumentAccessInfo,
+} from "./trustCenterDocumentAccess";

packages/helpers/src/trustCenterDocumentAccess.ts

@@ -0,0 +1,92 @@
+import type { TrustCenterDocumentAccess, TrustCenterDocumentAccessStatus } from "@probo/coredata";
+
+export function getTrustCenterDocumentAccessStatusBadgeVariant(status: TrustCenterDocumentAccessStatus) {
+  switch (status) {
+    case "REQUESTED":
+      return "warning" as const;
+    case "GRANTED":
+      return "success" as const;
+    case "REJECTED":
+    case "REVOKED":
+      return "danger" as const;
+  }
+}
+
+export type TrustCenterDocumentAccessInfo = {
+  variant: "info",
+  name: string,
+  type: "document",
+  typeLabel: string,
+  category: string;
+  id: string;
+  requested: boolean;
+  active: boolean;
+  status: TrustCenterDocumentAccessStatus;
+} | {
+  variant: "success",
+  name: string,
+  type: "report",
+  typeLabel: string,
+  category: string;
+  id: string;
+  requested: boolean;
+  active: boolean;
+  status: TrustCenterDocumentAccessStatus;
+} | {
+  variant: "highlight",
+  name: string,
+  type: "file",
+  typeLabel: string,
+  category: string;
+  id: string;
+  requested: boolean;
+  active: boolean;
+  status: TrustCenterDocumentAccessStatus;
+}
+
+export function getTrustCenterDocumentAccessInfo(
+  docAccess: TrustCenterDocumentAccess,
+  __: (key: string) => string
+): TrustCenterDocumentAccessInfo {
+  if (docAccess.document) {
+    return {
+      variant: "info" as const,
+      name: docAccess.document.title,
+      type: "document",
+      typeLabel: __("Document"),
+      category: docAccess.document.documentType,
+      id: docAccess.document.id,
+      requested: docAccess.requested,
+      active: docAccess.active,
+      status: docAccess.status,
+    };
+  }
+  if (docAccess.report) {
+    return {
+      variant: "success" as const,
+      name: docAccess.report.filename,
+      type: "report",
+      typeLabel: __("Report"),
+      category: docAccess.report.audit?.framework.name ?? "",
+      id: docAccess.report.id,
+      requested: docAccess.requested,
+      active: docAccess.active,
+      status: docAccess.status,
+    };
+  }
+  if (docAccess.trustCenterFile) {
+    return {
+      variant: "highlight" as const,
+      name: docAccess.trustCenterFile.name,
+      type: "file",
+      typeLabel: __("File"),
+      category: docAccess.trustCenterFile.category,
+      id: docAccess.trustCenterFile.id,
+      requested: docAccess.requested,
+      active: docAccess.active,
+      status: docAccess.status,
+    };
+  }
+
+  throw new Error("Unknown trust center access document type");
+}

packages/ui/src/Atoms/Button/Button.tsx

@@ -21,6 +21,7 @@ export const button = tv({
             quaternary:
                 "bg-highlight text-txt-primary hover:bg-highlight-hover active:bg-highlight-pressed",
             danger: "bg-danger-plain text-txt-invert hover:bg-danger-hover shadow-base hover:shadow-hover active:bg-danger-pressed border border-border-danger",
+            success: "bg-success-plain text-txt-invert hover:text-invert hover:bg-success-hover shadow-base hover:shadow-hover active:bg-success-pressed border border-border-success",
         },
         disabled: {
             true: "opacity-60 cursor-default",
@@ -47,7 +48,8 @@ type Props = PropsWithChildren<
             | "secondary"
             | "tertiary"
             | "quaternary"
-            | "danger";
+            | "danger"
+            | "success";
         to?: string;
         asChild?: boolean;
     } & VariantProps<typeof button>

packages/ui/src/theme.css

@@ -61,6 +61,7 @@
     --color-subtle-hover: #0027000d;
     --color-highlight-hover: #022a0213;
     --color-accent-hover: #1e2c1c;
+    --color-success-hover: #1e2c1c;
     --color-active-hover: #d7f2b0;
     --color-danger-hover: #cf393f;
 
@@ -72,6 +73,7 @@
     --color-subtle-pressed: #022a0213;
     --color-highlight-pressed: #02210219;
     --color-accent-pressed: #293a25;
+    --color-success-pressed: #293a25;
     --color-active-pressed: #c9e894;
     --color-danger-pressed: #c6373c;
 
@@ -197,6 +199,7 @@
         --color-highlight: rgba(214, 251, 196, 0.06);
         --color-active: rgba(239, 254, 226, 0.08);
         --color-accent: #c4f042;
+        --color-success-plain: #c4f042;
         --color-danger: rgba(254, 58, 61, 0.13);
         --color-danger-plain: rgba(254, 58, 61, 0.13);
         --color-danger-dark: rgba(255, 89, 95, 0.94);
@@ -225,6 +228,7 @@
         --color-subtle-hover: rgba(214, 251, 196, 0.06);
         --color-highlight-hover: rgba(233, 254, 223, 0.1);
         --color-accent-hover: rgba(183, 255, 50, 0.82);
+        --color-success-hover: rgba(183, 255, 50, 0.82);
         --color-active-hover: rgba(233, 254, 223, 0.1);
         --color-danger-hover: rgba(254, 58, 61, 0.7);
 
@@ -236,6 +240,7 @@
         --color-subtle-pressed: rgba(239, 254, 226, 0.08);
         --color-highlight-pressed: rgba(236, 254, 229, 0.13);
         --color-accent-pressed: rgba(209, 255, 70, 0.94);
+        --color-success-pressed: rgba(209, 255, 70, 0.94);
         --color-active-pressed: rgba(236, 254, 229, 0.13);
         --color-danger-pressed: rgba(254, 58, 61, 0.5);
     }