mirror of
https://github.com/documenso/documenso.git
synced 2025-11-12 07:43:16 +10:00
## Description Currently certificate translations on production sometimes does not show the required language. This could not be replicated when creating certificates on staging (Browserless.io) and local development (Chromium), which means this fix ultimately cannot be tested unless on live. This is an attempt to fix it by isolating the certificate generation into it's own context, and applying a cookie to define the required language. This fix is based on the assumption that there is some sort of error which pushes the certificate to be generated on the client side, which ultimately will render in English due to constraints on nextjs. ## Changes Made - Apply language into cookie instead purely dynamically on SSR - Minor unrelated fixes ## Testing Performed Tested to ensure certificates could still be generated
90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { Trans, msg } from '@lingui/macro';
|
|
import { useLingui } from '@lingui/react';
|
|
import { DownloadIcon } from 'lucide-react';
|
|
|
|
import { DocumentStatus } from '@documenso/prisma/client';
|
|
import { trpc } from '@documenso/trpc/react';
|
|
import { cn } from '@documenso/ui/lib/utils';
|
|
import { Button } from '@documenso/ui/primitives/button';
|
|
import { useToast } from '@documenso/ui/primitives/use-toast';
|
|
|
|
export type DownloadCertificateButtonProps = {
|
|
className?: string;
|
|
documentId: number;
|
|
documentStatus: DocumentStatus;
|
|
teamId?: number;
|
|
};
|
|
|
|
export const DownloadCertificateButton = ({
|
|
className,
|
|
documentId,
|
|
documentStatus,
|
|
teamId,
|
|
}: DownloadCertificateButtonProps) => {
|
|
const { toast } = useToast();
|
|
const { _ } = useLingui();
|
|
|
|
const { mutateAsync: downloadCertificate, isLoading } =
|
|
trpc.document.downloadCertificate.useMutation();
|
|
|
|
const onDownloadCertificatesClick = async () => {
|
|
try {
|
|
const { url } = await downloadCertificate({ documentId, teamId });
|
|
|
|
const iframe = Object.assign(document.createElement('iframe'), {
|
|
src: url,
|
|
});
|
|
|
|
Object.assign(iframe.style, {
|
|
position: 'fixed',
|
|
top: '0',
|
|
left: '0',
|
|
width: '0',
|
|
height: '0',
|
|
});
|
|
|
|
const onLoaded = () => {
|
|
if (iframe.contentDocument?.readyState === 'complete') {
|
|
iframe.contentWindow?.print();
|
|
|
|
iframe.contentWindow?.addEventListener('afterprint', () => {
|
|
document.body.removeChild(iframe);
|
|
});
|
|
}
|
|
};
|
|
|
|
// When the iframe has loaded, print the iframe and remove it from the dom
|
|
iframe.addEventListener('load', onLoaded);
|
|
|
|
document.body.appendChild(iframe);
|
|
|
|
onLoaded();
|
|
} catch (error) {
|
|
console.error(error);
|
|
|
|
toast({
|
|
title: _(msg`Something went wrong`),
|
|
description: _(
|
|
msg`Sorry, we were unable to download the certificate. Please try again later.`,
|
|
),
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
className={cn('w-full sm:w-auto', className)}
|
|
loading={isLoading}
|
|
variant="outline"
|
|
disabled={documentStatus !== DocumentStatus.COMPLETED}
|
|
onClick={() => void onDownloadCertificatesClick()}
|
|
>
|
|
{!isLoading && <DownloadIcon className="mr-1.5 h-4 w-4" />}
|
|
<Trans>Download Certificate</Trans>
|
|
</Button>
|
|
);
|
|
};
|