feat: Add fromName to notifications

apps/admin-server/src/pages/projects/[project]/settings/notifications.tsx

@@ -6,7 +6,7 @@ import { useForm } from 'react-hook-form';
 import { Button } from '@/components/ui/button';
 import {
   Form,
-  FormControl,
+  FormControl, FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -25,6 +25,7 @@ import InfoDialog from '@/components/ui/info-hover';
 const formSchema = z.object({
   fromAddress: z.string().email(),
   projectmanagerAddress: z.string().email(),
+  fromName: z.string().optional(),
 });
 
 export default function ProjectSettingsNotifications() {
@@ -36,6 +37,7 @@ export default function ProjectSettingsNotifications() {
   const defaults = useCallback(
     () => ({
       fromAddress: data?.emailConfig?.[category]?.fromAddress || null,
+      fromName: data?.emailConfig?.[category]?.fromName || '',
       projectmanagerAddress:
         data?.emailConfig?.[category]?.projectmanagerAddress || null,
     }),
@@ -57,6 +59,7 @@ export default function ProjectSettingsNotifications() {
         [category]: {
           fromAddress: values.fromAddress,
           projectmanagerAddress: values.projectmanagerAddress,
+          fromName: values.fromName,
         },
       });
       if (project) {
@@ -110,6 +113,23 @@ export default function ProjectSettingsNotifications() {
                   </FormItem>
                 )}
               />
+              <FormField
+                control={form.control}
+                name="fromName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Wil je een naam toevoegen aan het e-mailadres waarvandaan de notificaties worden verstuurd?
+                      <InfoDialog content={'Let op: dit werkt alleen als de domeininstellingen voor dit e-mailadres correct geconfigureerd zijn. Tip: maak hiervoor gebruik van Flowmailer of Sendgrid.'} />
+                    </FormLabel>
+                    <FormDescription>Als je hier een naam invult komt dit voor het e-mailadres van de afzender te staan, bijvoorbeeld: OpenStad site &#60;[email protected]&#62;</FormDescription>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={form.control}
                 name="projectmanagerAddress"

apps/api-server/src/models/Notification.js

@@ -63,6 +63,10 @@ module.exports = ( db, sequelize, DataTypes ) => {
           instance.from = project.emailConfig?.notifications?.fromAddress;
         }
 
+        if ( project.emailConfig?.notifications?.fromName && !!project.emailConfig?.notifications?.fromName ) {
+          instance.from = `"${project.emailConfig.notifications.fromName}" <${instance.from}>`;
+        }
+
         // to
         let user;
         if (!instance.to) {