frameless · AliKdhim87 · Jun 18, 2025
diff --git a/.changeset/thin-spiders-smash.md b/.changeset/thin-spiders-smash.md
@@ -0,0 +1,8 @@
+---
+"@frameless/strapi-plugin-open-forms-embed": patch
+"@frameless/overige-objecten-api": patch
+"@frameless/pdc-dashboard": patch
+---
+
+Oude openformulieren zijn nu weer zichtbaar in het Kissdashboard.
+Voorheen waren sommige oudere formulieren niet zichtbaar. Dat is nu opgelost. Je hoeft hiervoor niets aan te passen—de formulieren verschijnen automatisch weer.
diff --git a/apps/overige-objecten-api/src/utils/convertLogoButtonToHTML.tsx b/apps/overige-objecten-api/src/utils/convertLogoButtonToHTML.tsx
@@ -4,11 +4,22 @@ import kebabCase from 'lodash.kebabcase';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 
-interface IconProps {
+export interface LogoButtonItemType {
   logo?: string;
+  href?: string;
+  appearance?: string;
+  label?: string;
+  openFormsEmbed?: string | null;
+  textContent?: string | null;
+}
+
+export interface LogoButtonProps {
+  item: LogoButtonItemType;
+  headingLevel?: number;
+  withDesignSystem?: boolean;
 }
 
-export const Icon = ({ logo }: IconProps) => {
+export const Icon = ({ logo }: { logo?: string }) => {
   switch (logo) {
     case 'eidas':
       return <UtrechtEidasLogo />;
@@ -20,96 +31,75 @@ export const Icon = ({ logo }: IconProps) => {
       return null;
   }
 };
-export type LogoButtonItemType = {
-  logo?: string;
-  href?: string;
-  appearance?: string;
-  label?: string;
-  openFormsEmbed?: string | null;
-  textContent?: string | null;
+
+const parseOpenFormsEmbed = (
+  openFormsEmbed: string | null | undefined,
+): { href: string; textContent: string } | null => {
+  if (!openFormsEmbed) return null;
+
+  const params = new URLSearchParams(openFormsEmbed);
+  const slug = params.get('slug');
+  const label = params.get('label');
+
+  if (!slug || !process.env?.FRONTEND_PUBLIC_URL) return null;
+
+  return {
+    href: new URL(`/form/${slug}`, process.env.FRONTEND_PUBLIC_URL).href,
+    textContent: label || '',
+  };
 };
-export interface LogoButtonProps {
-  item: LogoButtonItemType;
-  headingLevel?: number;
-  withDesignSystem?: boolean;
-}
-export interface BasicLogoButtonProps {
-  item: LogoButtonItemType;
-  headingLevel?: number;
-}
-export const BasicLogoButton = ({ item, headingLevel }: BasicLogoButtonProps) => {
-  const HeadingComponent = `h${headingLevel || 3}` as keyof React.JSX.IntrinsicElements;
-  const mappingIcon = {
+
+export const BasicLogoButton = ({ item, headingLevel = 3 }: { item: LogoButtonItemType; headingLevel?: number }) => {
+  const HeadingTag = `h${headingLevel}` as keyof React.JSX.IntrinsicElements;
+  const iconLabelMap: Record<string, string | null> = {
     eidas: 'eIDAS',
     digid: 'DigiD',
     eherkenning: 'eHerkenning',
     without_logo: null,
   };
+
   return (
     <div>
-      {item?.label && <HeadingComponent>{item.label}</HeadingComponent>}
+      {item?.label && <HeadingTag>{item.label}</HeadingTag>}
       <div>
-        {item?.logo && <span>{mappingIcon[item?.logo as keyof typeof mappingIcon]}</span>}{' '}
+        {item?.logo && <span>{iconLabelMap[item.logo]}</span>}
         {item?.href && item?.textContent && <a href={item.href}>{item.textContent}</a>}
       </div>
     </div>
   );
 };
-export const LogoButton = ({ item, headingLevel, withDesignSystem = false }: LogoButtonProps) => {
-  const getOpenFormsEmbed = (openFormsEmbed: any) => {
-    if (!openFormsEmbed) return null;
-    const parsOpenFormsEmbedData = new URLSearchParams(openFormsEmbed);
-    const slug = parsOpenFormsEmbedData.get('slug');
-    const label = parsOpenFormsEmbedData.get('label');
-    const embed_url = parsOpenFormsEmbedData.get('embed_url');
-    return {
-      href: embed_url ? new URL(`/form/${slug}`, embed_url).href : '',
-      textContent: label,
-    };
-  };
-  const openFormsEmbed = getOpenFormsEmbed(item?.openFormsEmbed);
-  if (withDesignSystem) {
-    if (openFormsEmbed) {
-      return (
-        <div>
-          <Heading level={headingLevel || 3}>{item?.label}</Heading>
-          <div className="utrecht-logo-button">
-            <Icon logo={item?.logo} />
-            <ButtonLink href={openFormsEmbed.href} appearance={kebabCase(item?.appearance)}>
-              {item?.textContent || openFormsEmbed.textContent}
-            </ButtonLink>
-          </div>
-        </div>
-      );
-    }
 
+export const LogoButton = ({ item, headingLevel = 3, withDesignSystem = false }: LogoButtonProps) => {
+  const embedData = parseOpenFormsEmbed(item.openFormsEmbed);
+  const finalHref = embedData?.href || item.href || '';
+  const finalText = item?.textContent || embedData?.textContent || '';
+  const finalLabel = item?.label || embedData?.textContent || '';
+
+  if (withDesignSystem) {
     return (
       <div>
-        <Heading level={headingLevel || 3}>{item?.label}</Heading>
+        <Heading level={headingLevel}>{finalLabel}</Heading>
         <div className="utrecht-logo-button">
-          <Icon logo={item?.logo} />
-          <ButtonLink href={item?.href} appearance={kebabCase(item?.appearance)}>
-            {item?.textContent}
+          <Icon logo={item.logo} />
+          <ButtonLink href={finalHref} appearance={kebabCase(item.appearance)}>
+            {finalText}
           </ButtonLink>
         </div>
       </div>
     );
   }
-  if (openFormsEmbed) {
-    return (
-      <BasicLogoButton
-        item={{
-          ...item,
-          href: openFormsEmbed.href,
-          textContent: item?.textContent || openFormsEmbed.textContent,
-        }}
-        headingLevel={headingLevel}
-      />
-    );
-  }
-  return <BasicLogoButton item={item} headingLevel={headingLevel} />;
-};
 
-export const convertLogoButtonToHTML = (item: any) => {
-  return renderToString(<LogoButton item={item} />);
+  return (
+    <BasicLogoButton
+      item={{
+        ...item,
+        href: finalHref,
+        textContent: finalText,
+        label: finalLabel,
+      }}
+      headingLevel={headingLevel}
+    />
+  );
 };
+
+export const convertLogoButtonToHTML = (item: LogoButtonItemType) => renderToString(<LogoButton item={item} />);
diff --git a/apps/overige-objecten-api/src/utils/processData.test.ts b/apps/overige-objecten-api/src/utils/processData.test.ts
@@ -1,7 +1,7 @@
+import { setEnv } from '@frameless/utils';
 import { JSDOM } from 'jsdom';
 import { processData } from './processData';
 import type { Price } from '../strapi-product-type';
-
 describe('processData', () => {
   describe('ComponentComponentsUtrechtRichText', () => {
     it('should process basic rich text content and mapped the category correctly', () => {
@@ -150,15 +150,15 @@ describe('processData', () => {
       expect(h3Element.textContent).toBe('DigiD');
     });
     it('should render logo button with openFormsEmbed when the value is provided', () => {
+      setEnv('FRONTEND_PUBLIC_URL', 'http://localhost:3000/');
       const data = [
         {
           component: 'ComponentComponentsUtrechtLogoButton',
           appearance: 'primary_action_button',
           href: null,
           label: null,
           logo: 'digid',
-          openFormsEmbed:
-            'uuid=7e6cc160-a3b5-4cca-9d88-f8a361df2e3f&slug=paspoort-aanvraag&label=Paspoort+aanvraag&embed_url=http%3A%2F%2Flocalhost%3A3000',
+          openFormsEmbed: 'uuid=7e6cc160-a3b5-4cca-9d88-f8a361df2e3f&slug=paspoort-aanvraag&label=Paspoort+aanvraag',
           textContent: null,
           categorie: 'contact',
         },

diff --git a/apps/pdc-dashboard/config/plugins.ts b/apps/pdc-dashboard/config/plugins.ts
@@ -99,7 +99,6 @@ export default ({ env }) => ({
     config: {
       api_url: env('OPEN_FORMS_API_URL'),
       token: env('OPEN_FORMS_API_TOKEN'),
-      embed_url: env('FRONTEND_PUBLIC_URL'),
     },
   },
   'flo-legal-embed': {

diff --git a/docker-compose.pdc.dev.yml b/docker-compose.pdc.dev.yml
@@ -122,6 +122,7 @@ services:
       STRAPI_PRIVATE_URL: ${STRAPI_PRIVATE_URL}
       OVERIGE_OBJECTEN_API_PORT: ${OVERIGE_OBJECTEN_API_PORT}
       OVERIGE_OBJECTEN_API_CORS: ${OVERIGE_OBJECTEN_API_CORS}
+      FRONTEND_PUBLIC_URL: ${FRONTEND_PUBLIC_URL}
     ports:
       - "4001:4001"
     networks:

diff --git a/docker-compose.pdc.prod.yml b/docker-compose.pdc.prod.yml
@@ -109,6 +109,7 @@ services:
       STRAPI_PRIVATE_URL: ${STRAPI_PRIVATE_URL}
       OVERIGE_OBJECTEN_API_PORT: ${OVERIGE_OBJECTEN_API_PORT}
       OVERIGE_OBJECTEN_API_CORS: ${OVERIGE_OBJECTEN_API_CORS}
+      FRONTEND_PUBLIC_URL: ${FRONTEND_PUBLIC_URL}
     ports:
       - "4001:4001"
     networks:

diff --git a/packages/strapi-plugin-open-forms-embed/admin/src/components/CustomCombobox/index.tsx b/packages/strapi-plugin-open-forms-embed/admin/src/components/CustomCombobox/index.tsx
@@ -24,7 +24,6 @@ type OpenFormsDataParams = {
   uuid: string;
   slug: string;
   label?: string;
-  embed_url: string;
   name?: string;
 };
 
@@ -83,7 +82,6 @@ function CustomCombobox({
         uuid: form.uuid,
         slug: form.slug,
         label: form?.label || form?.name,
-        embed_url: config.embed_url,
       }),
     )
     .some((optionValue: string) => optionValue === value);
@@ -132,7 +130,6 @@ function CustomCombobox({
                 uuid,
                 slug,
                 label: name,
-                embed_url: config.embed_url,
               })}
               key={uuid}
             >