feat: update contact form to use npm package

next.config.js

@@ -7,7 +7,7 @@ const orgId = process.env.NEXT_PUBLIC_PLANNER_ORG_ID;
  */
 const nextConfig = {
   output: 'standalone',
-  transpilePackages: ['@atb-as/mapbox-shared'],
+  transpilePackages: ['@atb-as/mapbox-shared', '@mrfylke/contact-form'],
   async headers() {
     return [
       {

package.json

@@ -48,6 +48,7 @@
     "@isaacs/ttlcache": "^1.4.1",
     "@leile/lobo-t": "^1.0.5",
     "@mapbox/polyline": "^1.2.1",
+    "@mrfylke/contact-form": "^0.1.24",
     "@react-aria/focus": "^3.21.0",
     "@react-hook/resize-observer": "^2.0.2",
     "@resvg/resvg-js": "^2.6.2",

pnpm-workspace.yaml

@@ -8,3 +8,4 @@ allowBuilds:
   unrs-resolver: true
 minimumReleaseAgeExclude:
   - "@atb-as/*"
+  - '@mrfylke/contact-form'

src/components/contact-form/index.ts

@@ -0,0 +1 @@
+export { ContactFormWrapper } from './wrapper';

src/components/contact-form/wrapper.tsx

@@ -0,0 +1,34 @@
+import {
+  ContactFormRoot,
+  Language as ContactFormLanguage,
+} from '@mrfylke/contact-form';
+import { contactFormConfig } from '@atb/config/contact-form-config';
+import { Language, useLanguageSettings } from '@atb/translations';
+import { useDarkMode } from '@atb/modules/theme';
+import { PropsWithChildren } from 'react';
+
+export function ContactFormWrapper({ children }: PropsWithChildren) {
+  const { language } = useLanguageSettings();
+  const [isDarkMode] = useDarkMode();
+
+  return (
+    <ContactFormRoot
+      config={contactFormConfig}
+      language={toContactFormLanguage(language)}
+      theme={isDarkMode ? 'dark' : 'light'}
+    >
+      {children}
+    </ContactFormRoot>
+  );
+}
+
+function toContactFormLanguage(language: Language): ContactFormLanguage {
+  switch (language) {
+    case Language.English:
+      return ContactFormLanguage.English;
+    case Language.Norwegian:
+      return ContactFormLanguage.Norwegian;
+    case Language.Nynorsk:
+      return ContactFormLanguage.Nynorsk;
+  }
+}