Add trust center references
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user