diff --git a/packages/lib/server-only/pdf/render-certificate.ts b/packages/lib/server-only/pdf/render-certificate.ts index 43209b9c7..339c65f75 100644 --- a/packages/lib/server-only/pdf/render-certificate.ts +++ b/packages/lib/server-only/pdf/render-certificate.ts @@ -78,6 +78,7 @@ const getDevice = (userAgent?: string | null): string => { const textMutedForegroundLight = '#929DAE'; const textForeground = '#000'; const textMutedForeground = '#64748B'; +const textRejectedRed = '#dc2626'; const textBase = 10; const textSm = 9; const textXs = 8; @@ -97,6 +98,8 @@ type RenderLabelAndTextOptions = { text: string; width: number; y?: number; + labelFill?: string; + valueFill?: string; }; const renderLabelAndText = (options: RenderLabelAndTextOptions) => { @@ -106,13 +109,16 @@ const renderLabelAndText = (options: RenderLabelAndTextOptions) => { y, }); + const labelFill = options.labelFill ?? textMutedForeground; + const valueFill = options.valueFill ?? textMutedForeground; + const label = new Konva.Text({ x: 0, y: 0, text: `${options.label}: `, fontStyle: fontMedium, fontFamily: 'Inter', - fill: textMutedForeground, + fill: labelFill, fontSize: textSm, }); @@ -124,7 +130,7 @@ const renderLabelAndText = (options: RenderLabelAndTextOptions) => { width: width - label.width(), fontFamily: 'Inter', text: options.text, - fill: textMutedForeground, + fill: valueFill, wrap: 'char', fontSize: textSm, }); @@ -269,6 +275,8 @@ const renderColumnTwo = (options: RenderColumnOptions) => { const columnWidth = width - columnPadding; + const isRejected = Boolean(recipient.logs.rejected); + if (recipient.signatureField?.secondaryId) { // Signature container with green border const signatureContainer = new Konva.Group({ x: 0, y: 0 }); @@ -313,7 +321,10 @@ const renderColumnTwo = (options: RenderColumnOptions) => { signatureContainer.add(typedSig); } - column.add(signatureContainer); + // Do not add the signature container for rejected recipients. + if (!isRejected) { + column.add(signatureContainer); + } const signatureHeight = Math.max(signatureContainer.getClientRect().height, minSignatureHeight); @@ -342,7 +353,7 @@ const renderColumnTwo = (options: RenderColumnOptions) => { // Signature ID const sigIdLabel = new Konva.Text({ x: 0, - y: signatureHeight + 10, + y: isRejected ? 0 : signatureHeight + 10, text: `${i18n._(msg`Signature ID`)}:`, fill: textMutedForeground, width: columnWidth, @@ -400,7 +411,14 @@ const renderColumnThree = (options: RenderColumnOptions) => { const column = new Konva.Group(); - const itemsToRender = [ + type DetailItem = { + label: string; + value: string; + labelFill?: string; + valueFill?: string; + }; + + const itemsToRender: DetailItem[] = [ { label: i18n._(msg`Sent`), value: recipient.logs.emailed @@ -429,6 +447,8 @@ const renderColumnThree = (options: RenderColumnOptions) => { value: DateTime.fromJSDate(recipient.logs.rejected.createdAt) .setLocale(APP_I18N_OPTIONS.defaultLocale) .toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)'), + labelFill: textRejectedRed, + valueFill: textRejectedRed, }); } else { itemsToRender.push({ @@ -459,6 +479,8 @@ const renderColumnThree = (options: RenderColumnOptions) => { text: item.value, width, y: column.getClientRect().height + (index === 0 ? 0 : 8), + labelFill: item.labelFill, + valueFill: item.valueFill, }); column.add(labelAndText); }