Add trust center references

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2025-09-19 17:26:17 +02:00
parent 8b7b1cadf7
commit c56563a850
33 changed files with 6187 additions and 56 deletions

View File

@@ -0,0 +1,83 @@
import {
Button,
Dialog,
DialogContent,
DialogFooter,
IconTrashCan,
Spinner,
useDialogRef,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { sprintf } from "@probo/helpers";
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
import { deleteTrustCenterReferenceMutation } from "/hooks/graph/TrustCenterReferenceGraph";
type Props = {
children: React.ReactNode;
referenceId: string;
referenceName: string;
connectionId: string;
onSuccess?: () => void;
};
export function DeleteTrustCenterReferenceDialog({
children,
referenceId,
referenceName,
connectionId,
onSuccess,
}: Props) {
const { __ } = useTranslate();
const ref = useDialogRef();
const [mutate, isDeleting] = useMutationWithToasts(deleteTrustCenterReferenceMutation, {
successMessage: __("Reference deleted successfully"),
errorMessage: __("Failed to delete reference"),
});
const handleDelete = async () => {
await mutate({
variables: {
input: {
id: referenceId,
},
connections: [connectionId],
},
});
onSuccess?.();
ref.current?.close();
};
return (
<Dialog
ref={ref}
trigger={children}
title={__("Delete Reference")}
className="max-w-md"
>
<DialogContent padded>
<p className="text-txt-secondary">
{sprintf(
__("Are you sure you want to delete the reference \"%s\"?"),
referenceName
)}
</p>
<p className="text-txt-secondary mt-2">
{__("This action cannot be undone.")}
</p>
</DialogContent>
<DialogFooter>
<Button
variant="danger"
onClick={handleDelete}
disabled={isDeleting}
icon={isDeleting ? Spinner : IconTrashCan}
>
{isDeleting ? __("Deleting...") : __("Delete")}
</Button>
</DialogFooter>
</Dialog>
);
}

View File

@@ -0,0 +1,262 @@
import { useTranslate } from "@probo/i18n";
import {
Button,
Dialog,
DialogContent,
DialogFooter,
Dropzone,
Field,
Spinner,
Textarea,
useDialogRef,
} from "@probo/ui";
import { type ReactNode, useState, useImperativeHandle, forwardRef } from "react";
import { z } from "zod";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import {
useCreateTrustCenterReferenceMutation,
useUpdateTrustCenterReferenceMutation
} from "/hooks/graph/TrustCenterReferenceGraph";
const referenceSchema = z.object({
name: z.string().min(1, "Name is required"),
description: z.string(),
websiteUrl: z.string().url("Please enter a valid URL"),
});
type ReferenceFormData = z.infer<typeof referenceSchema>;
export type TrustCenterReferenceDialogRef = {
openCreate: (trustCenterId: string, connectionId: string) => void;
openEdit: (reference: {
id: string;
name: string;
description: string;
websiteUrl: string;
}) => void;
};
type Reference = {
id: string;
name: string;
description: string;
websiteUrl: string;
};
export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogRef, { children?: ReactNode }>(
function TrustCenterReferenceDialog({ children }, ref) {
const { __ } = useTranslate();
const dialogRef = useDialogRef();
const [mode, setMode] = useState<'create' | 'edit'>('create');
const [trustCenterId, setTrustCenterId] = useState<string>("");
const [connectionId, setConnectionId] = useState<string>("");
const [editReference, setEditReference] = useState<Reference | null>(null);
const [uploadedFile, setUploadedFile] = useState<File | null>(null);
const [createReference, isCreating] = useCreateTrustCenterReferenceMutation();
const [updateReference, isUpdating] = useUpdateTrustCenterReferenceMutation();
const { register, handleSubmit, formState: { errors }, reset } = useFormWithSchema(
referenceSchema,
{
defaultValues: {
name: "",
description: "",
websiteUrl: "",
},
}
);
useImperativeHandle(ref, () => ({
openCreate: (tId: string, cId: string) => {
setMode('create');
setTrustCenterId(tId);
setConnectionId(cId);
setEditReference(null);
setUploadedFile(null);
reset({
name: "",
description: "",
websiteUrl: "",
});
dialogRef.current?.open();
},
openEdit: (reference: Reference) => {
setMode('edit');
setEditReference(reference);
setUploadedFile(null);
reset({
name: reference.name,
description: reference.description,
websiteUrl: reference.websiteUrl,
});
dialogRef.current?.open();
},
}));
const handleDrop = (files: File[]) => {
if (files.length > 0) {
const file = files[0];
setUploadedFile(file);
}
};
const onSubmit = handleSubmit(async (data: ReferenceFormData) => {
if (mode === 'create') {
if (!uploadedFile) {
return;
}
await createReference({
variables: {
input: {
trustCenterId,
name: data.name,
description: data.description,
websiteUrl: data.websiteUrl,
logoFile: null,
},
connections: [connectionId],
},
uploadables: {
"input.logoFile": uploadedFile,
},
onSuccess: () => {
reset();
setUploadedFile(null);
dialogRef.current?.close();
},
});
} else if (editReference) {
const input: {
id: string;
name: string;
description: string;
websiteUrl: string;
logoFile?: null;
} = {
id: editReference.id,
name: data.name,
description: data.description,
websiteUrl: data.websiteUrl,
};
const uploadables: Record<string, File> = {};
if (uploadedFile) {
input.logoFile = null;
uploadables["input.logoFile"] = uploadedFile;
}
await updateReference({
variables: { input },
uploadables: Object.keys(uploadables).length > 0 ? uploadables : undefined,
onSuccess: () => {
reset();
setUploadedFile(null);
dialogRef.current?.close();
},
});
}
});
const handleClose = () => {
reset();
setUploadedFile(null);
};
const isSubmitting = isCreating || isUpdating;
const title = mode === 'create' ? __("Add Reference") : __("Edit Reference");
return (
<>
{children && (
<span onClick={() => mode === 'create' && dialogRef.current?.open()}>
{children}
</span>
)}
<Dialog
ref={dialogRef}
title={title}
className="max-w-2xl"
onClose={handleClose}
>
<form onSubmit={onSubmit}>
<DialogContent padded className="space-y-6">
<Field
{...register("name")}
label={__("Reference Name")}
type="text"
required
error={errors.name?.message}
placeholder={__("Company or organization name")}
/>
<Field label={__("Description")} error={errors.description?.message}>
<Textarea
{...register("description")}
placeholder={__("Brief description of the reference")}
rows={3}
/>
</Field>
<Field
{...register("websiteUrl")}
label={__("Website URL")}
type="url"
required
error={errors.websiteUrl?.message}
placeholder={__("https://example.com")}
/>
<Field label={__("Logo")}>
<Dropzone
description={__("Upload logo image (PNG, JPG, WEBP up to 5MB)")}
isUploading={isSubmitting}
onDrop={handleDrop}
accept={{
"image/png": [".png"],
"image/jpeg": [".jpg", ".jpeg"],
"image/webp": [".webp"],
}}
maxSize={5}
/>
{uploadedFile && (
<div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
<p className="text-sm font-medium">{__("Selected file")}:</p>
<p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
</div>
)}
{mode === 'edit' && !uploadedFile && (
<div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
<p className="text-sm text-txt-secondary">
{__("Current logo will be kept if no new file is uploaded")}
</p>
</div>
)}
{mode === 'create' && !uploadedFile && (
<div className="mt-2 p-3 bg-warning-subtle rounded-lg">
<p className="text-sm">
{__("Logo is required for new references")}
</p>
</div>
)}
</Field>
</DialogContent>
<DialogFooter>
<Button
type="submit"
disabled={isSubmitting || (mode === 'create' && !uploadedFile)}
icon={isSubmitting ? Spinner : undefined}
>
{mode === 'create' ? __("Add Reference") : __("Update Reference")}
</Button>
</DialogFooter>
</form>
</Dialog>
</>
);
}
);

View File

@@ -0,0 +1,164 @@
import { useTranslate } from "@probo/i18n";
import { safeOpenUrl } from "@probo/helpers";
import {
Avatar,
Button,
Card,
IconPlusLarge,
IconTrashCan,
IconPencil,
} from "@probo/ui";
import { type ReactNode, useRef } from "react";
import {
useTrustCenterReferences,
} from "/hooks/graph/TrustCenterReferenceGraph";
import { TrustCenterReferenceDialog, type TrustCenterReferenceDialogRef } from "./TrustCenterReferenceDialog";
import { DeleteTrustCenterReferenceDialog } from "./DeleteTrustCenterReferenceDialog";
type Props = {
trustCenterId: string;
children?: ReactNode;
};
type Reference = {
id: string;
name: string;
description: string;
websiteUrl: string;
logoUrl: string;
createdAt: string;
updatedAt: string;
};
export function TrustCenterReferencesSection({ trustCenterId }: Props) {
const { __ } = useTranslate();
const dialogRef = useRef<TrustCenterReferenceDialogRef>(null);
const data = useTrustCenterReferences(trustCenterId);
const trustCenterNode = data?.node;
const references = trustCenterNode?.references?.edges?.map((edge) => edge.node) || [];
const referencesConnectionId = trustCenterNode?.references?.__id || "";
const handleCreate = () => {
if (referencesConnectionId) {
dialogRef.current?.openCreate(trustCenterId, referencesConnectionId);
}
};
const handleEdit = (reference: Reference) => {
dialogRef.current?.openEdit(reference);
};
const handleVisitWebsite = (websiteUrl: string) => {
safeOpenUrl(websiteUrl);
};
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h2 className="text-base font-medium">{__("Trusted by")}</h2>
<p className="text-sm text-txt-tertiary">
{__("Showcase your customers and partners on your trust center")}
</p>
</div>
<Button
variant="secondary"
icon={IconPlusLarge}
onClick={handleCreate}
>
{__("Add Reference")}
</Button>
</div>
<Card padded>
{references.length === 0 ? (
<div className="text-center py-12">
<div className="mx-auto w-12 h-12 bg-tertiary rounded-lg flex items-center justify-center mb-4">
<IconPlusLarge size={24} className="text-txt-tertiary" />
</div>
<h3 className="text-lg font-medium text-txt-primary mb-2">
{__("No references yet")}
</h3>
<p className="text-txt-tertiary mb-4">
{__("Add customer testimonials and partner references to build trust")}
</p>
</div>
) : (
<div className="space-y-4">
{references.map((reference: Reference) => (
<ReferenceRow
key={reference.id}
reference={reference}
onEdit={() => handleEdit(reference)}
connectionId={referencesConnectionId}
onVisitWebsite={() => handleVisitWebsite(reference.websiteUrl)}
/>
))}
</div>
)}
</Card>
<TrustCenterReferenceDialog ref={dialogRef} />
</div>
);
}
type ReferenceRowProps = {
reference: Reference;
onEdit: () => void;
connectionId: string;
onVisitWebsite: () => void;
};
function ReferenceRow({ reference, onEdit, connectionId, onVisitWebsite }: ReferenceRowProps) {
return (
<div className="flex items-center justify-between p-4 bg-level-1 rounded-lg">
<div className="flex items-center space-x-4 flex-1">
<Avatar
src={reference.logoUrl}
name={reference.name}
size="l"
/>
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-2 mb-1">
<button
type="button"
onClick={onVisitWebsite}
className="font-medium text-txt-primary truncate hover:text-primary hover:underline text-left cursor-pointer"
>
{reference.name}
</button>
</div>
<p className="text-sm text-txt-secondary line-clamp-2 mb-2">
{reference.description}
</p>
</div>
</div>
<div className="flex items-center justify-center space-x-2 ml-4">
<Button
variant="tertiary"
icon={IconPencil}
onClick={onEdit}
aria-label="Edit reference"
/>
<DeleteTrustCenterReferenceDialog
referenceId={reference.id}
referenceName={reference.name}
connectionId={connectionId}
>
<Button
variant="danger"
icon={IconTrashCan}
aria-label="Delete reference"
/>
</DeleteTrustCenterReferenceDialog>
</div>
</div>
);
}

View File

@@ -16,6 +16,19 @@ export const trustCenterQuery = graphql`
ndaFileUrl
createdAt
updatedAt
references(first: 100, orderBy: { field: CREATED_AT, direction: DESC }) {
edges {
node {
id
name
description
websiteUrl
logoUrl
createdAt
updatedAt
}
}
}
}
documents(first: 100) {
edges {
@@ -112,4 +125,3 @@ export function useDeleteTrustCenterNDAMutation() {
}
);
}

View File

@@ -0,0 +1,133 @@
import { graphql } from 'react-relay';
import { useLazyLoadQuery } from 'react-relay';
import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
import type {
TrustCenterReferenceGraphQuery,
TrustCenterReferenceGraphQuery$data
} from "./__generated__/TrustCenterReferenceGraphQuery.graphql";
import type { TrustCenterReferenceGraphCreateMutation } from "./__generated__/TrustCenterReferenceGraphCreateMutation.graphql";
import type { TrustCenterReferenceGraphUpdateMutation } from "./__generated__/TrustCenterReferenceGraphUpdateMutation.graphql";
import type { TrustCenterReferenceGraphDeleteMutation } from "./__generated__/TrustCenterReferenceGraphDeleteMutation.graphql";
export const trustCenterReferencesQuery = graphql`
query TrustCenterReferenceGraphQuery($trustCenterId: ID!) {
node(id: $trustCenterId) {
... on TrustCenter {
id
references(first: 100, orderBy: { field: CREATED_AT, direction: DESC })
@connection(key: "TrustCenterReferencesSection_references") {
__id
pageInfo {
hasNextPage
hasPreviousPage
startCursor
endCursor
}
edges {
cursor
node {
id
name
description
websiteUrl
logoUrl
createdAt
updatedAt
}
}
}
}
}
}
`;
export const createTrustCenterReferenceMutation = graphql`
mutation TrustCenterReferenceGraphCreateMutation(
$input: CreateTrustCenterReferenceInput!
$connections: [ID!]!
) {
createTrustCenterReference(input: $input) {
trustCenterReferenceEdge @prependEdge(connections: $connections) {
cursor
node {
id
name
description
websiteUrl
logoUrl
createdAt
updatedAt
}
}
}
}
`;
export const updateTrustCenterReferenceMutation = graphql`
mutation TrustCenterReferenceGraphUpdateMutation(
$input: UpdateTrustCenterReferenceInput!
) {
updateTrustCenterReference(input: $input) {
trustCenterReference {
id
name
description
websiteUrl
logoUrl
createdAt
updatedAt
}
}
}
`;
export const deleteTrustCenterReferenceMutation = graphql`
mutation TrustCenterReferenceGraphDeleteMutation(
$input: DeleteTrustCenterReferenceInput!
$connections: [ID!]!
) {
deleteTrustCenterReference(input: $input) {
deletedTrustCenterReferenceId @deleteEdge(connections: $connections)
}
}
`;
export function useTrustCenterReferences(trustCenterId: string): TrustCenterReferenceGraphQuery$data | null {
const data = useLazyLoadQuery<TrustCenterReferenceGraphQuery>(
trustCenterReferencesQuery,
{ trustCenterId: trustCenterId || "" },
{ fetchPolicy: 'network-only' }
);
return trustCenterId ? data : null;
}
export function useCreateTrustCenterReferenceMutation() {
return useMutationWithToasts<TrustCenterReferenceGraphCreateMutation>(
createTrustCenterReferenceMutation,
{
successMessage: "Reference created successfully",
errorMessage: "Failed to create reference",
}
);
}
export function useUpdateTrustCenterReferenceMutation() {
return useMutationWithToasts<TrustCenterReferenceGraphUpdateMutation>(
updateTrustCenterReferenceMutation,
{
successMessage: "Reference updated successfully",
errorMessage: "Failed to update reference",
}
);
}
export function useDeleteTrustCenterReferenceMutation() {
return useMutationWithToasts<TrustCenterReferenceGraphDeleteMutation>(
deleteTrustCenterReferenceMutation,
{
successMessage: "Reference deleted successfully",
errorMessage: "Failed to delete reference",
}
);
}

View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<9dbea87f398ce8189cb2431d7c03912c>>
* @generated SignedSource<<241faf24f6f9e1ca0e5f8171e40e5cd3>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -39,6 +39,19 @@ export type TrustCenterGraphQuery$data = {
readonly id: string;
readonly ndaFileName: string | null | undefined;
readonly ndaFileUrl: string | null | undefined;
readonly references: {
readonly edges: ReadonlyArray<{
readonly node: {
readonly createdAt: any;
readonly description: string;
readonly id: string;
readonly logoUrl: string;
readonly name: string;
readonly updatedAt: any;
readonly websiteUrl: string;
};
}>;
};
readonly slug: string;
readonly updatedAt: any;
} | null | undefined;
@@ -94,6 +107,25 @@ v4 = {
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
v6 = {
"kind": "Literal",
"name": "first",
"value": 100
},
v7 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
v8 = {
"alias": null,
"args": null,
"concreteType": "TrustCenter",
@@ -131,24 +163,76 @@ v5 = {
"storageKey": null
},
(v4/*: any*/),
(v5/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
"args": [
(v6/*: any*/),
{
"kind": "Literal",
"name": "orderBy",
"value": {
"direction": "DESC",
"field": "CREATED_AT"
}
}
],
"concreteType": "TrustCenterReferenceConnection",
"kind": "LinkedField",
"name": "references",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "TrustCenterReferenceEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "TrustCenterReference",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v7/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "logoUrl",
"storageKey": null
},
(v4/*: any*/),
(v5/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": "references(first:100,orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
}
],
"storageKey": null
},
v6 = [
{
"kind": "Literal",
"name": "first",
"value": 100
}
v9 = [
(v6/*: any*/)
],
v7 = {
v10 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -175,10 +259,10 @@ return {
"selections": [
(v2/*: any*/),
(v3/*: any*/),
(v5/*: any*/),
(v8/*: any*/),
{
"alias": null,
"args": (v6/*: any*/),
"args": (v9/*: any*/),
"concreteType": "DocumentConnection",
"kind": "LinkedField",
"name": "documents",
@@ -217,7 +301,7 @@ return {
},
{
"alias": null,
"args": (v6/*: any*/),
"args": (v9/*: any*/),
"concreteType": "AuditConnection",
"kind": "LinkedField",
"name": "audits",
@@ -256,7 +340,7 @@ return {
},
{
"alias": null,
"args": (v6/*: any*/),
"args": (v9/*: any*/),
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
@@ -330,10 +414,10 @@ return {
"kind": "InlineFragment",
"selections": [
(v3/*: any*/),
(v5/*: any*/),
(v8/*: any*/),
{
"alias": null,
"args": (v6/*: any*/),
"args": (v9/*: any*/),
"concreteType": "DocumentConnection",
"kind": "LinkedField",
"name": "documents",
@@ -371,7 +455,7 @@ return {
"name": "documentType",
"storageKey": null
},
(v7/*: any*/),
(v10/*: any*/),
{
"alias": null,
"args": [
@@ -430,7 +514,7 @@ return {
},
{
"alias": null,
"args": (v6/*: any*/),
"args": (v9/*: any*/),
"concreteType": "AuditConnection",
"kind": "LinkedField",
"name": "audits",
@@ -488,7 +572,7 @@ return {
"name": "state",
"storageKey": null
},
(v7/*: any*/),
(v10/*: any*/),
(v4/*: any*/)
],
"storageKey": null
@@ -501,7 +585,7 @@ return {
},
{
"alias": null,
"args": (v6/*: any*/),
"args": (v9/*: any*/),
"concreteType": "VendorConnection",
"kind": "LinkedField",
"name": "vendors",
@@ -532,14 +616,8 @@ return {
"name": "category",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
(v7/*: any*/),
(v10/*: any*/),
(v4/*: any*/)
],
"storageKey": null
@@ -560,16 +638,16 @@ return {
]
},
"params": {
"cacheID": "8dff30a639470418ba7151cb5743d3cc",
"cacheID": "d08519f604d27066ddaabb667d234552",
"id": null,
"metadata": {},
"name": "TrustCenterGraphQuery",
"operationKind": "query",
"text": "query TrustCenterGraphQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n name\n trustCenter {\n id\n active\n slug\n ndaFileName\n ndaFileUrl\n createdAt\n updatedAt\n }\n documents(first: 100) {\n edges {\n node {\n id\n ...TrustCenterDocumentsCardFragment\n }\n }\n }\n audits(first: 100) {\n edges {\n node {\n id\n ...TrustCenterAuditsCardFragment\n }\n }\n }\n vendors(first: 100) {\n edges {\n node {\n id\n ...TrustCenterVendorsCardFragment\n }\n }\n }\n }\n id\n }\n}\n\nfragment TrustCenterAuditsCardFragment on Audit {\n id\n name\n framework {\n name\n id\n }\n validFrom\n validUntil\n state\n showOnTrustCenter\n createdAt\n}\n\nfragment TrustCenterDocumentsCardFragment on Document {\n id\n title\n createdAt\n documentType\n showOnTrustCenter\n versions(first: 1) {\n edges {\n node {\n id\n status\n }\n }\n }\n}\n\nfragment TrustCenterVendorsCardFragment on Vendor {\n id\n name\n category\n description\n showOnTrustCenter\n createdAt\n}\n"
"text": "query TrustCenterGraphQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n id\n name\n trustCenter {\n id\n active\n slug\n ndaFileName\n ndaFileUrl\n createdAt\n updatedAt\n references(first: 100, orderBy: {field: CREATED_AT, direction: DESC}) {\n edges {\n node {\n id\n name\n description\n websiteUrl\n logoUrl\n createdAt\n updatedAt\n }\n }\n }\n }\n documents(first: 100) {\n edges {\n node {\n id\n ...TrustCenterDocumentsCardFragment\n }\n }\n }\n audits(first: 100) {\n edges {\n node {\n id\n ...TrustCenterAuditsCardFragment\n }\n }\n }\n vendors(first: 100) {\n edges {\n node {\n id\n ...TrustCenterVendorsCardFragment\n }\n }\n }\n }\n id\n }\n}\n\nfragment TrustCenterAuditsCardFragment on Audit {\n id\n name\n framework {\n name\n id\n }\n validFrom\n validUntil\n state\n showOnTrustCenter\n createdAt\n}\n\nfragment TrustCenterDocumentsCardFragment on Document {\n id\n title\n createdAt\n documentType\n showOnTrustCenter\n versions(first: 1) {\n edges {\n node {\n id\n status\n }\n }\n }\n}\n\nfragment TrustCenterVendorsCardFragment on Vendor {\n id\n name\n category\n description\n showOnTrustCenter\n createdAt\n}\n"
}
};
})();
(node as any).hash = "21b2915ae5002dd54c990013e94adf5d";
(node as any).hash = "4d70dd23cdcdac7cd715b3eb9020ed37";
export default node;

View File

@@ -0,0 +1,218 @@
/**
* @generated SignedSource<<216f3e7b4510c3d1127c3910bebc8b95>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type CreateTrustCenterReferenceInput = {
description: string;
logoFile: any;
name: string;
trustCenterId: string;
websiteUrl: string;
};
export type TrustCenterReferenceGraphCreateMutation$variables = {
connections: ReadonlyArray<string>;
input: CreateTrustCenterReferenceInput;
};
export type TrustCenterReferenceGraphCreateMutation$data = {
readonly createTrustCenterReference: {
readonly trustCenterReferenceEdge: {
readonly cursor: any;
readonly node: {
readonly createdAt: any;
readonly description: string;
readonly id: string;
readonly logoUrl: string;
readonly name: string;
readonly updatedAt: any;
readonly websiteUrl: string;
};
};
};
};
export type TrustCenterReferenceGraphCreateMutation = {
response: TrustCenterReferenceGraphCreateMutation$data;
variables: TrustCenterReferenceGraphCreateMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"concreteType": "TrustCenterReferenceEdge",
"kind": "LinkedField",
"name": "trustCenterReferenceEdge",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "TrustCenterReference",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "logoUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterReferenceGraphCreateMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateTrustCenterReferencePayload",
"kind": "LinkedField",
"name": "createTrustCenterReference",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "TrustCenterReferenceGraphCreateMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "CreateTrustCenterReferencePayload",
"kind": "LinkedField",
"name": "createTrustCenterReference",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "prependEdge",
"key": "",
"kind": "LinkedHandle",
"name": "trustCenterReferenceEdge",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "17a206ba4702d641ffd7631cb8e3e03b",
"id": null,
"metadata": {},
"name": "TrustCenterReferenceGraphCreateMutation",
"operationKind": "mutation",
"text": "mutation TrustCenterReferenceGraphCreateMutation(\n $input: CreateTrustCenterReferenceInput!\n) {\n createTrustCenterReference(input: $input) {\n trustCenterReferenceEdge {\n cursor\n node {\n id\n name\n description\n websiteUrl\n logoUrl\n createdAt\n updatedAt\n }\n }\n }\n}\n"
}
};
})();
(node as any).hash = "e0a76c3f5582bf1ed5def08db36d9e25";
export default node;

View File

@@ -0,0 +1,132 @@
/**
* @generated SignedSource<<1f4c8af006c90496e08b285944c83eac>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type DeleteTrustCenterReferenceInput = {
id: string;
};
export type TrustCenterReferenceGraphDeleteMutation$variables = {
connections: ReadonlyArray<string>;
input: DeleteTrustCenterReferenceInput;
};
export type TrustCenterReferenceGraphDeleteMutation$data = {
readonly deleteTrustCenterReference: {
readonly deletedTrustCenterReferenceId: string;
};
};
export type TrustCenterReferenceGraphDeleteMutation = {
response: TrustCenterReferenceGraphDeleteMutation$data;
variables: TrustCenterReferenceGraphDeleteMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "deletedTrustCenterReferenceId",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterReferenceGraphDeleteMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteTrustCenterReferencePayload",
"kind": "LinkedField",
"name": "deleteTrustCenterReference",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "TrustCenterReferenceGraphDeleteMutation",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteTrustCenterReferencePayload",
"kind": "LinkedField",
"name": "deleteTrustCenterReference",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "deleteEdge",
"key": "",
"kind": "ScalarHandle",
"name": "deletedTrustCenterReferenceId",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "6d22b36eb6ce9b568bfc091741a63ea8",
"id": null,
"metadata": {},
"name": "TrustCenterReferenceGraphDeleteMutation",
"operationKind": "mutation",
"text": "mutation TrustCenterReferenceGraphDeleteMutation(\n $input: DeleteTrustCenterReferenceInput!\n) {\n deleteTrustCenterReference(input: $input) {\n deletedTrustCenterReferenceId\n }\n}\n"
}
};
})();
(node as any).hash = "31a0fcb302daa8f42bc5ecb74fadfd0b";
export default node;

View File

@@ -0,0 +1,333 @@
/**
* @generated SignedSource<<f53f001d217e4c6f5b353f2243f700f2>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type TrustCenterReferenceGraphQuery$variables = {
trustCenterId: string;
};
export type TrustCenterReferenceGraphQuery$data = {
readonly node: {
readonly id?: string;
readonly references?: {
readonly __id: string;
readonly edges: ReadonlyArray<{
readonly cursor: any;
readonly node: {
readonly createdAt: any;
readonly description: string;
readonly id: string;
readonly logoUrl: string;
readonly name: string;
readonly updatedAt: any;
readonly websiteUrl: string;
};
}>;
readonly pageInfo: {
readonly endCursor: any | null | undefined;
readonly hasNextPage: boolean;
readonly hasPreviousPage: boolean;
readonly startCursor: any | null | undefined;
};
};
};
};
export type TrustCenterReferenceGraphQuery = {
response: TrustCenterReferenceGraphQuery$data;
variables: TrustCenterReferenceGraphQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "trustCenterId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "trustCenterId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v3 = {
"kind": "Literal",
"name": "orderBy",
"value": {
"direction": "DESC",
"field": "CREATED_AT"
}
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v5 = [
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasPreviousPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "startCursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "TrustCenterReferenceEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "TrustCenterReference",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "logoUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
(v4/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
v6 = [
{
"kind": "Literal",
"name": "first",
"value": 100
},
(v3/*: any*/)
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterReferenceGraphQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
(v2/*: any*/),
{
"alias": "references",
"args": [
(v3/*: any*/)
],
"concreteType": "TrustCenterReferenceConnection",
"kind": "LinkedField",
"name": "__TrustCenterReferencesSection_references_connection",
"plural": false,
"selections": (v5/*: any*/),
"storageKey": "__TrustCenterReferencesSection_references_connection(orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
}
],
"type": "TrustCenter",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "TrustCenterReferenceGraphQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v4/*: any*/),
(v2/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v6/*: any*/),
"concreteType": "TrustCenterReferenceConnection",
"kind": "LinkedField",
"name": "references",
"plural": false,
"selections": (v5/*: any*/),
"storageKey": "references(first:100,orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
},
{
"alias": null,
"args": (v6/*: any*/),
"filters": [
"orderBy"
],
"handle": "connection",
"key": "TrustCenterReferencesSection_references",
"kind": "LinkedHandle",
"name": "references"
}
],
"type": "TrustCenter",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "8e9fd111488feb14deeedf47bfa4a0f0",
"id": null,
"metadata": {
"connection": [
{
"count": null,
"cursor": null,
"direction": "forward",
"path": [
"node",
"references"
]
}
]
},
"name": "TrustCenterReferenceGraphQuery",
"operationKind": "query",
"text": "query TrustCenterReferenceGraphQuery(\n $trustCenterId: ID!\n) {\n node(id: $trustCenterId) {\n __typename\n ... on TrustCenter {\n id\n references(first: 100, orderBy: {field: CREATED_AT, direction: DESC}) {\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n edges {\n cursor\n node {\n id\n name\n description\n websiteUrl\n logoUrl\n createdAt\n updatedAt\n __typename\n }\n }\n }\n }\n id\n }\n}\n"
}
};
})();
(node as any).hash = "8b62ed10055cff04e117a31dd598eee4";
export default node;

View File

@@ -0,0 +1,157 @@
/**
* @generated SignedSource<<3b02f7734c467adddc8f8abe1c18c4e5>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type UpdateTrustCenterReferenceInput = {
description?: string | null | undefined;
id: string;
logoFile?: any | null | undefined;
name?: string | null | undefined;
websiteUrl?: string | null | undefined;
};
export type TrustCenterReferenceGraphUpdateMutation$variables = {
input: UpdateTrustCenterReferenceInput;
};
export type TrustCenterReferenceGraphUpdateMutation$data = {
readonly updateTrustCenterReference: {
readonly trustCenterReference: {
readonly createdAt: any;
readonly description: string;
readonly id: string;
readonly logoUrl: string;
readonly name: string;
readonly updatedAt: any;
readonly websiteUrl: string;
};
};
};
export type TrustCenterReferenceGraphUpdateMutation = {
response: TrustCenterReferenceGraphUpdateMutation$data;
variables: TrustCenterReferenceGraphUpdateMutation$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"concreteType": "UpdateTrustCenterReferencePayload",
"kind": "LinkedField",
"name": "updateTrustCenterReference",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "TrustCenterReference",
"kind": "LinkedField",
"name": "trustCenterReference",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "description",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "logoUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
}
],
"storageKey": null
}
],
"storageKey": null
}
];
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "TrustCenterReferenceGraphUpdateMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "TrustCenterReferenceGraphUpdateMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "e5fa3bdb21897523c1491d6cfbf816cf",
"id": null,
"metadata": {},
"name": "TrustCenterReferenceGraphUpdateMutation",
"operationKind": "mutation",
"text": "mutation TrustCenterReferenceGraphUpdateMutation(\n $input: UpdateTrustCenterReferenceInput!\n) {\n updateTrustCenterReference(input: $input) {\n trustCenterReference {\n id\n name\n description\n websiteUrl\n logoUrl\n createdAt\n updatedAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "2340a9c559d302025df08a5748c18b80";
export default node;

View File

@@ -222,6 +222,17 @@ const TRUST_CENTER_QUERY = `
}
}
}
references(first: 100) {
edges {
node {
id
name
description
websiteUrl
logoUrl
}
}
}
}
}
`;

View File

@@ -21,6 +21,7 @@ import type { TrustCenterGraphQuery } from "/hooks/graph/__generated__/TrustCent
import { useState } from "react";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { Outlet, useLocation, Link } from "react-router";
import { TrustCenterReferencesSection } from "/components/trustCenter/TrustCenterReferencesSection";
type Props = {
queryRef: PreloadedQuery<TrustCenterGraphQuery>;
@@ -328,6 +329,10 @@ export default function TrustCenterPage({ queryRef }: Props) {
</Card>
</div>
{organization.trustCenter?.id && (
<TrustCenterReferencesSection trustCenterId={organization.trustCenter.id} />
)}
<div className="space-y-4">
<Tabs>
<TabItem