diff --git a/.changeset/thin-spiders-smash.md b/.changeset/thin-spiders-smash.md new file mode 100644 index 000000000..2ac176eda --- /dev/null +++ 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 index c04f3ed53..ac256b6b8 100644 --- 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 ; @@ -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 = { eidas: 'eIDAS', digid: 'DigiD', eherkenning: 'eHerkenning', without_logo: null, }; + return (
- {item?.label && {item.label}} + {item?.label && {item.label}}
- {item?.logo && {mappingIcon[item?.logo as keyof typeof mappingIcon]}}{' '} + {item?.logo && {iconLabelMap[item.logo]}} {item?.href && item?.textContent && {item.textContent}}
); }; -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 ( -
- {item?.label} -
- - - {item?.textContent || openFormsEmbed.textContent} - -
-
- ); - } +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 (
- {item?.label} + {finalLabel}
- - - {item?.textContent} + + + {finalText}
); } - if (openFormsEmbed) { - return ( - - ); - } - return ; -}; -export const convertLogoButtonToHTML = (item: any) => { - return renderToString(); + return ( + + ); }; + +export const convertLogoButtonToHTML = (item: LogoButtonItemType) => renderToString(); diff --git a/apps/overige-objecten-api/src/utils/processData.test.ts b/apps/overige-objecten-api/src/utils/processData.test.ts index 9e28e89ff..fa2ba4e8a 100644 --- 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,6 +150,7 @@ 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', @@ -157,8 +158,7 @@ describe('processData', () => { 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 index 6718181ec..708c524c0 100644 --- 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 index 25d1587f7..c2b79ea1d 100644 --- 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 index c39899983..bc79a2ef8 100644 --- 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 index d88c23684..e14cf5e43 100644 --- 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} >