feat(pdc): add open-forms embed

apps/pdc-frontend/package.json

@@ -27,6 +27,7 @@
     "@utrecht/component-library-react": "3.0.1-alpha.4",
     "@utrecht/design-tokens": "1.0.0-alpha.617",
     "@utrecht/web-component-library-react": "1.0.3-alpha.4",
+    "@open-formulieren/sdk": "2.1.2",
     "accept-language": "3.0.18",
     "classnames": "2.3.2",
     "downshift": "7.6.0",

apps/pdc-frontend/src/app/[locale]/layout.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { dir } from 'i18next';
 import type { Metadata } from 'next';
-import { draftMode } from 'next/headers';
+import { draftMode, headers } from 'next/headers';
 import Link from 'next/link';
 import Script from 'next/script';
 import React from 'react';
@@ -124,6 +124,7 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
 }
 
 const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
+  const nonce = headers().get('x-nonce') || '';
   const { t } = await useTranslation(locale, ['layout', 'common']);
   const { isEnabled } = draftMode();
   const { data } = await fetchData<{ data: GetTemplateDataQuery }>({
@@ -220,7 +221,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
             <Footer data={footerData as FooterData} />
           </Surface>
         </QueryClientProvider>
-        <Script async src="https://siteimproveanalytics.com/js/siteanalyze_6006206.js"></Script>
+        <Script src="https://siteimproveanalytics.com/js/siteanalyze_6006206.js" nonce={nonce}></Script>
       </body>
     </html>
   );

apps/pdc-frontend/src/app/[locale]/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import Link from 'next/link';
 import { AdvancedLink, Breadcrumbs, Grid, GridCell, Heading, Heading2, IndexCharNav } from '@/components';
 import { ScrollToTopButton, UtrechtIconChevronUp } from '@/components';
+import { OpenFormsEmbed } from '@/components/OpenFormsEmbed/OpenFormsEmbed';
 import { TopTask, TopTaskDataTypes } from '@/components/Toptask';
 import { CHECK_ALPHABETICALLY_PRODUCTS_AVAILABILITY, GIT_PDC_HOME_PAGE } from '@/query';
 import { alphabet } from '@/util';
@@ -95,6 +96,7 @@ const Home = async ({ params: { locale } }: { params: any }) => {
         Link={Link}
       />
       <Heading level={1}>{t('h1')}</Heading>
+      <OpenFormsEmbed />
       <Grid>
         <>
           <GridCell md={10} lg={9}>

apps/pdc-frontend/src/components/OpenFormsEmbed/OpenFormsEmbed.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+// @ts-ignore
+import OpenForm from '@open-formulieren/sdk';
+import '@open-formulieren/sdk/styles.css';
+import Script from 'next/script';
+import { useRef } from 'react';
+
+export const OpenFormsEmbed = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onLoadOpenForms = () => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const form = new OpenForm(containerRef.current, containerRef.current.dataset);
+    form.init();
+  };
+
+  return (
+    <div>
+      <div
+        ref={containerRef}
+        data-base-url="http://localhost:8000/api/v2/"
+        data-form-id="f65657cb-2968-4a51-a576-2106e551e984"
+        data-base-path="/en"
+      ></div>
+      <Script
+        strategy={'afterInteractive'}
+        src="@open-formulieren/sdk/dist/open-forms-sdk.js"
+        onLoad={onLoadOpenForms}
+      />
+    </div>
+  );
+};

apps/pdc-frontend/src/middleware.ts

@@ -1,7 +1,7 @@
 import acceptLanguage from 'accept-language';
-import { NextResponse } from 'next/server';
-import { NextRequest } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { fallbackLng, languages } from './app/i18n/settings';
+
 acceptLanguage.languages(languages);
 
 export const config = {
@@ -11,6 +11,8 @@ export const config = {
 const cookieName = 'i18next';
 
 export function middleware(req: NextRequest) {
+  const requestHeaders = new Headers(req.headers);
+
   if (req.nextUrl.pathname.indexOf('icon') > -1 || req.nextUrl.pathname.indexOf('chrome') > -1)
     return NextResponse.next();
   let lng;
@@ -33,7 +35,9 @@ export function middleware(req: NextRequest) {
     if (lngInReferer) response.cookies.set(cookieName, lngInReferer);
     return response;
   }
-  const requestHeaders = new Headers(req.headers);
   requestHeaders.set('x-pathname', req.nextUrl.pathname);
-  return NextResponse.next();
+
+  return NextResponse.next({
+    request: { headers: requestHeaders },
+  });
 }