feat(pdc): support temp link to form from product page

apps/pdc-dashboard/src/api/product/content-types/product/schema.json

@@ -50,7 +50,8 @@
         "components.utrecht-multi-columns-button",
         "components.utrecht-accordion",
         "components.utrecht-image",
-        "components.utrecht-link"
+        "components.utrecht-link",
+        "components.open-forms-embed"
       ],
       "required": false
     },

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

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import React from 'react';
+import { useTranslation } from '@/app/i18n';
+import { Breadcrumbs } from '@/components';
+import { OpenFormsEmbed } from '@/components/OpenFormsEmbed/OpenFormsEmbed';
+
+type FormPageProps = {
+  params: {
+    locale: string;
+    slug: string;
+  };
+};
+
+const FormPage = async ({ params: { locale, slug } }: FormPageProps) => {
+  const { t } = await useTranslation(locale, 'common');
+
+  return (
+    <>
+      <Breadcrumbs
+        links={[
+          {
+            href: 'https://www.utrecht.nl/',
+            label: t('components.breadcrumbs.label.home'),
+            current: false,
+          },
+          {
+            href: '/',
+            label: t('components.breadcrumbs.label.online-loket'),
+            current: false,
+          },
+        ]}
+        backLink={{
+          href: '/',
+          label: t('components.breadcrumbs.label.products'),
+          current: false,
+        }}
+        Link={Link}
+      />
+      <OpenFormsEmbed basePath={`/${locale}/form/${slug}/`} slug={slug} />
+    </>
+  );
+};
+
+export default FormPage;

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

@@ -1,8 +1,16 @@
 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 {
+  AdvancedLink,
+  Breadcrumbs,
+  Grid,
+  GridCell,
+  Heading,
+  Heading2,
+  IndexCharNav,
+  ScrollToTopButton,
+  UtrechtIconChevronUp,
+} from '@/components';
 import { TopTask, TopTaskDataTypes } from '@/components/Toptask';
 import { CHECK_ALPHABETICALLY_PRODUCTS_AVAILABILITY, GIT_PDC_HOME_PAGE } from '@/query';
 import { alphabet } from '@/util';
@@ -96,7 +104,6 @@ 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/app/[locale]/products/[slug]/page.tsx

@@ -220,6 +220,12 @@ const Sections = ({ sections, locale, priceData }: SectionsProps) => {
                   </AdvancedLink>
                 )
               );
+            case 'ComponentComponentsOpenFormsEmbed':
+              return (
+                component?.openFormsId && (
+                  <Link href={`/${locale}/form/${component.openFormsId}`}>Ga naar formulier</Link>
+                )
+              );
             default:
               return <></>;
           }

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

@@ -1,20 +1,24 @@
 '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';
+import React, { useRef } from 'react';
 
-export const OpenFormsEmbed = () => {
+export type OpenFormsEmbedProps = {
+  basePath: string;
+  slug: string;
+};
+
+export const OpenFormsEmbed = ({ basePath, slug }: OpenFormsEmbedProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const onLoadOpenForms = () => {
     if (!containerRef.current) {
       return;
     }
 
-    const form = new OpenForm(containerRef.current, containerRef.current.dataset);
+    // @ts-ignore
+    const form = new window.OpenForms.OpenForm(containerRef.current, containerRef.current.dataset);
     form.init();
   };
 
@@ -23,12 +27,13 @@ export const OpenFormsEmbed = () => {
       <div
         ref={containerRef}
         data-base-url="http://localhost:8000/api/v2/"
-        data-form-id="voorbeeld-formulier"
-        data-base-path="/en"
+        data-form-id={slug}
+        data-base-path={basePath}
       ></div>
+      <link rel="stylesheet" href="http://localhost:8000/static/sdk/open-forms-sdk.css" />
       <Script
         strategy={'afterInteractive'}
-        src="@open-formulieren/sdk/dist/open-forms-sdk.js"
+        src="http://localhost:8000/static/sdk/open-forms-sdk.js"
         onLoad={onLoadOpenForms}
       />
     </div>

apps/pdc-frontend/src/query/index.ts

@@ -202,6 +202,10 @@ export const GET_PRODUCT_BY_SLUG = gql(`
               body
             }
           }
+          ... on ComponentComponentsOpenFormsEmbed {
+            __typename
+            openFormsId
+          }
         }
         price {
           data {