feat: add email sender

.env.example

@@ -1,3 +1,8 @@
+# CONTACT FORM
+DATAJEGER_EMAIL_ADDRESS=datajegeren.staging@norge.no
+FDK_MAIL_SERVICE_ENDPOINT=mail-sender-service.staging.fellesdatakatalog.digdir.no/api/sendmail
+FDK_MAIL_SERVICE_API_KEY=
 FDK_BASE_URI=https://staging.fellesdatakatalog.digdir.no
 FDK_COMMUNITY_BASE_URI=https://community.staging.fellesdatakatalog.digdir.no
 FDK_REGISTRATION_BASE_URI=https://registrering.staging.fellesdatakatalog.digdir.no
+#

apps/contact-form/app/[lang]/contact-form.tsx

@@ -78,6 +78,7 @@ const ContactForm = ({ dictionary }: Props) => {
       <Textfield
         name='organizationNumber'
         required
+        type='number'
         className={styles.textFieldHalfWith}
         error={extractErrorMessages('organizationNumber', state, dictionary)}
         label={

apps/contact-form/app/[lang]/utils.ts

@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import { SchemaType } from './schema';
+
+const getEmailContent = (emailData: SchemaType) => ({
+  subject: 'Takk for din forespørsel til Datajegeren',
+  body: `Når en av våre datajegere starter søket etter datasettet du ønsker tilgang på, får du en epost fra oss. I perioder med stor pågang kan det ta lenger tid før du hører fra oss igjen.
+
+  Vi gjør vårt ytterste for å hjelpe deg, men vi kan ikke garantere vi finner dataene du ønsker. Vi har heller ikke kontroll på datakvaliteten på det forespurte datasettet.
+
+  Under er kopi av forespørselen din. Dersom du har ytterligere informasjon å legge til, er det bare å svare på denne e-posten.
+
+  Med vennlig hilsen
+  Datafabrikken
+
+  Hvilket datasett trenger du?
+  ${_.escape(emailData.dataset)}
+
+  Vet du hvor datasettet befinner seg?
+  ${_.escape(emailData.location)}
+
+  Har du forsøkt å få tak i dette datasettet selv?
+  ${_.escape(emailData.efforts)}
+
+  Ditt navn
+  ${_.escape(emailData.name)}
+
+  E-postadresse
+  ${_.escape(emailData.email)}
+
+  Telefonnummer
+  ${_.escape(emailData.phoneNumber)}
+
+  Organisasjonsnummer
+  ${_.escape(emailData.organizationNumber)}
+  `,
+});
+
+export const sendEmail = async (emailData: SchemaType) => {
+  const { DATAJEGER_EMAIL_ADDRESS, FDK_MAIL_SERVICE_ENDPOINT, FDK_MAIL_SERVICE_API_KEY } = process.env;
+  const emailContent = getEmailContent(emailData);
+  const mail = {
+    from: DATAJEGER_EMAIL_ADDRESS,
+    to: emailData.email,
+    bcc: DATAJEGER_EMAIL_ADDRESS,
+    subject: emailContent.subject,
+    body: emailContent.body,
+  };
+  const fetchOptions = {
+    headers: {
+      'X-API-KEY': FDK_MAIL_SERVICE_API_KEY ?? '',
+    },
+    method: 'POST',
+    body: JSON.stringify(mail),
+  };
+
+  try {
+    if (!FDK_MAIL_SERVICE_ENDPOINT) {
+      throw new Error('Missing FDK_MAIL_SERVICE_ENDPOINT');
+    }
+    return await fetch(FDK_MAIL_SERVICE_ENDPOINT, fetchOptions);
+  } catch (e) {
+    return e;
+  }
+};

apps/contact-form/app/actions.ts

@@ -4,7 +4,15 @@
 import { revalidatePath } from 'next/cache';
 import { extractFormEntries, FormState, FormStatusEnum, getFormState } from '@fdk-frontend/utils';
 import { schema } from './[lang]/schema';
+import { sendEmail } from './[lang]/utils';
 
+/**
+ * This server action sends an email using the provided form data.
+ *
+ * @param prevState - The previous state of the form.
+ * @param formData - The form data to be sent.
+ * @returns A promise that resolves to the updated form state.
+ */
 export const sendEmailAction = async (prevState: FormState, formData: FormData) => {
   const parse = schema.safeParse(extractFormEntries(formData));
 
@@ -13,16 +21,19 @@ export const sendEmailAction = async (prevState: FormState, formData: FormData)
   }
 
   try {
-    // TODO: Send email with form data
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    // const data = parse.data;
-
+    const response = await sendEmail(parse.data);
+    if (response instanceof Error) {
+      throw new Error(response.message);
+    } else if (response instanceof Response && !response.ok) {
+      throw new Error(response.statusText);
+    }
     revalidatePath('/');
     return getFormState(FormStatusEnum.SUCCESS, 'Mail was sent successfully');
   } catch (e) {
     // TODO: Log error to some error tracking service, not logging out to console because of security reasons
     // eslint-disable-next-line no-console
     console.error('Sending email for Contact Form failed');
+    console.error(e);
     return getFormState(FormStatusEnum.ERROR, 'Sending email failed');
   }
 };

libs/types/src/index.ts

@@ -1,2 +1 @@
 // Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
-export * from './lib/forms';

libs/ui/src/lib/header/header.module.css

@@ -35,6 +35,7 @@
 }
 
 .logo * {
+  width: auto;
   height: 45px;
   margin-left: 0.75rem;
 }

libs/utils/src/lib/functions/value-extractors/index.ts

@@ -1,5 +1,5 @@
 import { Dictionary } from "@fdk-frontend/dictionaries";
-import { FormState } from "@fdk-frontend/types";
+import { FormState } from "../../form-utils/types";
 
 /**
  * This method extracts error messages from the form state and returns them as a string array.

package.json

@@ -69,6 +69,7 @@
     "@swc/helpers": "~0.5.8",
     "@testing-library/react": "^15.0.1",
     "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.0",
     "@types/negotiator": "^0.6.3",
     "@types/node": "20.12.7",
     "@types/react": "18.2.76",

yarn.lock

@@ -3470,6 +3470,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.17.0":
+  version: 4.17.0
+  resolution: "@types/lodash@npm:4.17.0"
+  checksum: 10c0/4c5b41c9a6c41e2c05d08499e96f7940bcf194dcfa84356235b630da920c2a5e05f193618cea76006719bec61c76617dff02defa9d29934f9f6a76a49291bd8f
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:^1":
   version: 1.3.5
   resolution: "@types/mime@npm:1.3.5"
@@ -7098,6 +7105,7 @@ __metadata:
     "@swc/helpers": "npm:~0.5.8"
     "@testing-library/react": "npm:^15.0.1"
     "@types/jest": "npm:^29.5.12"
+    "@types/lodash": "npm:^4.17.0"
     "@types/negotiator": "npm:^0.6.3"
     "@types/node": "npm:20.12.7"
     "@types/react": "npm:18.2.76"