fix: invite email placeholder (#3045)

- **fix: interpolate inviterEmail in invite email mailto link**
- **fix: add alt attributes to email template images**

packages/email/template-components/template-document-completed.tsx

@@ -28,7 +28,11 @@ export const TemplateDocumentCompleted = ({
         <Section className="mb-4">
           <Column align="center">
             <Text className="font-semibold text-base text-foreground">
-              <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
+              <Img
+                src={getAssetUrl('/static/completed.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+                alt=""
+              />
               <Trans>Completed</Trans>
             </Text>
           </Column>
@@ -47,7 +51,7 @@ export const TemplateDocumentCompleted = ({
             className="rounded-lg border border-border border-solid px-4 py-2 text-center font-medium text-foreground text-sm no-underline"
             href={downloadLink}
           >
-            <Img src={getAssetUrl('/static/download.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
+            <Img src={getAssetUrl('/static/download.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" alt="" />
             <Trans>Download</Trans>
           </Button>
         </Section>

packages/email/template-components/template-document-pending.tsx

@@ -21,7 +21,7 @@ export const TemplateDocumentPending = ({ documentName, assetBaseUrl }: Template
         <Section className="mb-4">
           <Column align="center">
             <Text className="font-semibold text-base text-foreground">
-              <Img src={getAssetUrl('/static/clock.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
+              <Img src={getAssetUrl('/static/clock.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" alt="" />
               <Trans>Waiting for others</Trans>
             </Text>
           </Column>

packages/email/template-components/template-document-recipient-signed.tsx

@@ -30,7 +30,11 @@ export const TemplateDocumentRecipientSigned = ({
         <Section className="mb-4">
           <Column align="center">
             <Text className="font-semibold text-base text-foreground">
-              <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
+              <Img
+                src={getAssetUrl('/static/completed.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+                alt=""
+              />
               <Trans>Completed</Trans>
             </Text>
           </Column>

packages/email/template-components/template-document-self-signed.tsx

@@ -26,7 +26,11 @@ export const TemplateDocumentSelfSigned = ({ documentName, assetBaseUrl }: Templ
         <Section>
           <Column align="center">
             <Text className="font-semibold text-base text-foreground">
-              <Img src={getAssetUrl('/static/completed.png')} className="-mt-0.5 mr-2 inline h-7 w-7 align-middle" />
+              <Img
+                src={getAssetUrl('/static/completed.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+                alt=""
+              />
               <Trans>Completed</Trans>
             </Text>
           </Column>
@@ -51,7 +55,11 @@ export const TemplateDocumentSelfSigned = ({ documentName, assetBaseUrl }: Templ
             href={signUpUrl}
             className="mr-4 rounded-lg border border-border border-solid px-4 py-2 text-center font-medium text-foreground text-sm no-underline"
           >
-            <Img src={getAssetUrl('/static/user-plus.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
+            <Img
+              src={getAssetUrl('/static/user-plus.png')}
+              className="mr-2 mb-0.5 inline h-5 w-5 align-middle"
+              alt=""
+            />
             <Trans>Create account</Trans>
           </Button>
 
@@ -59,7 +67,7 @@ export const TemplateDocumentSelfSigned = ({ documentName, assetBaseUrl }: Templ
             className="rounded-lg border border-border border-solid px-4 py-2 text-center font-medium text-foreground text-sm no-underline"
             href="https://documenso.com/pricing"
           >
-            <Img src={getAssetUrl('/static/review.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" />
+            <Img src={getAssetUrl('/static/review.png')} className="mr-2 mb-0.5 inline h-5 w-5 align-middle" alt="" />
             <Trans>View plans</Trans>
           </Button>
         </Section>

packages/email/template-components/template-image.tsx

@@ -11,7 +11,7 @@ export const TemplateImage = ({ assetBaseUrl, className, staticAsset }: Template
     return new URL(path, assetBaseUrl).toString();
   };
 
-  return <Img className={className} src={getAssetUrl(`/static/${staticAsset}`)} />;
+  return <Img className={className} src={getAssetUrl(`/static/${staticAsset}`)} alt="" />;
 };
 
 export default TemplateImage;

packages/email/templates/document-invite.tsx

@@ -85,7 +85,7 @@ export const DocumentInviteEmailTemplate = ({
                 <Text className="my-4 font-semibold text-base">
                   <Trans>
                     {inviterName}{' '}
-                    <Link className="font-normal text-muted-foreground" href="mailto:{inviterEmail}">
+                    <Link className="font-normal text-muted-foreground" href={`mailto:${inviterEmail}`}>
                       ({inviterEmail})
                     </Link>
                   </Trans>