fix: integrate price field into internal collection

frameless · Jan 15, 2025 · 7d3d594 · 7d3d594
1 parent a86232d
commit 7d3d594
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 19 deletions.
diff --git a/.changeset/healthy-pens-stare.md b/.changeset/healthy-pens-stare.md
@@ -0,0 +1,5 @@
+---
+"@frameless/overige-objecten-api": patch
+---
+
+Zorg ervoor dat het kosten-veld beschikbaar is in de interne-veld-/overige-objecten-API.
diff --git a/apps/overige-objecten-api/src/utils/createHTMLFiles.tsx b/apps/overige-objecten-api/src/utils/createHTMLFiles.tsx
@@ -4,93 +4,105 @@ import path from 'node:path';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { Markdown } from '../components/Markdown';
+import type { Price } from '../strapi-product-type';
 
 const categoryStyle = { border: '1px solid #ccc', padding: '10px', marginBottom: '10px' };
-const Category = ({ data }: { data: any }) => {
+interface CategoryTypes {
+  [key: string]: string;
+}
+
+interface CategoryProps {
+  data: CategoryTypes;
+  priceData: Price[];
+}
+
+const Category = ({ data, priceData }: CategoryProps) => {
   return (
     <>
       {data?.tekst && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Tekst</Heading>
           <Separator />
-          <Markdown>{data?.tekst}</Markdown>
+          <Markdown priceData={priceData}>{data?.tekst}</Markdown>
         </div>
       )}
       {data?.procedureBeschrijving && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Procedure Beschrijving</Heading>
           <Separator />
-          <Markdown>{data?.procedureBeschrijving}</Markdown>
+          <Markdown priceData={priceData}>{data?.procedureBeschrijving}</Markdown>
         </div>
       )}
       {data?.bewijs && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Bewijs</Heading>
           <Separator />
-          <Markdown>{data?.bewijs}</Markdown>
+          <Markdown priceData={priceData}>{data?.bewijs}</Markdown>
         </div>
       )}
       {data?.uitvoeringsinstructies && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Uitvoeringsinstructies</Heading>
           <Separator />
-          <Markdown>{data?.uitvoeringsinstructies}</Markdown>
+          <Markdown priceData={priceData}>{data?.uitvoeringsinstructies}</Markdown>
         </div>
       )}
       {data?.bezwaarEnBeroep && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Bezwaar</Heading>
           <Separator />
-          <Markdown>{data?.bezwaarEnBeroep}</Markdown>
+          <Markdown priceData={priceData}>{data?.bezwaarEnBeroep}</Markdown>
         </div>
       )}
       {data?.vereisten && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Vereisten</Heading>
           <Separator />
-          <Markdown>{data?.vereisten}</Markdown>
+          <Markdown priceData={priceData}>{data?.vereisten}</Markdown>
         </div>
       )}
       {data?.kostenEnBetaalmethoden && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Kosten en betaalmethoden</Heading>
           <Separator />
-          <Markdown>{data?.kostenEnBetaalmethoden}</Markdown>
+          <Markdown priceData={priceData}>{data?.kostenEnBetaalmethoden}</Markdown>
         </div>
       )}
       {data?.contact && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Contact</Heading>
           <Separator />
-          <Markdown>{data?.contact}</Markdown>
+          <Markdown priceData={priceData}>{data?.contact}</Markdown>
         </div>
       )}
       {data?.wtdBijGeenReactie && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - WTD Bij Geen Reactie</Heading>
           <Separator />
-          <Markdown>{data?.wtdBijGeenReactie}</Markdown>
+          <Markdown priceData={priceData}>{data?.wtdBijGeenReactie}</Markdown>
         </div>
       )}
       {data?.notice && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Notice</Heading>
           <Separator />
-          <Markdown>{data?.notice}</Markdown>
+          <Markdown priceData={priceData}>{data?.notice}</Markdown>
         </div>
       )}
       {data?.deskMemo && (
         <div style={categoryStyle}>
           <Heading level={2}>Categorie - Desk Memo (Interne velden)</Heading>
           <Separator />
-          <Markdown>{data?.deskMemo}</Markdown>
+          <Markdown priceData={priceData}>{data?.deskMemo}</Markdown>
         </div>
       )}
     </>
   );
 };
 
-const PageComponent = ({ data }: { data: any }) => (
+interface PageComponentProps extends CategoryProps {}
+
+const PageComponent = ({ data, priceData }: PageComponentProps) => (
   <html lang="nl">
     <head>
       <meta charSet="utf-8" />
@@ -121,20 +133,20 @@ const PageComponent = ({ data }: { data: any }) => (
           <PageContent>
             <Heading level={1}>Kennisartikelen Categories</Heading>
             <Separator />
-            <Category data={data} />
+            <Category data={data} priceData={priceData} />
           </PageContent>
         </Page>
       </Document>
     </body>
   </html>
 );
 
-export const createHTMLFiles = (data: any) => {
+export const createHTMLFiles = (data: CategoryTypes, priceData: Price[]) => {
   const outputDir = './tmp/output-html';
 
   if (!fs.existsSync(outputDir)) {
     fs.mkdirSync(outputDir, { recursive: true });
   }
   const filePath = path.join(outputDir, `preview.html`);
-  fs.writeFileSync(filePath, renderToString(<PageComponent data={data} />), 'utf8');
+  fs.writeFileSync(filePath, renderToString(<PageComponent data={data} priceData={priceData} />), 'utf8');
 };
diff --git a/apps/overige-objecten-api/src/utils/generateKennisartikelObject.ts b/apps/overige-objecten-api/src/utils/generateKennisartikelObject.ts
@@ -1,5 +1,11 @@
 import { concatenateFieldValues } from './concatenateFieldValues';
-import { combineSimilarCategories, createHTMLFiles, normalizeCategories, processData } from './index';
+import {
+  combineSimilarCategories,
+  createHTMLFiles,
+  normalizeCategories,
+  processData,
+  renderMarkdownToString,
+} from './index';
 import { Attributes } from '../strapi-product-type';
 import { components } from '../types/openapi';
 interface GenerateKennisartikelObjectTypes {
@@ -26,11 +32,11 @@ export const generateKennisartikelObject = ({ attributes, url, id }: GenerateKen
   );
 
   const bothContentBlock = { ...sections, deskMemo };
-  createHTMLFiles(bothContentBlock);
+  createHTMLFiles(bothContentBlock, priceData);
   const vertalingen = [
     {
       ...bothContentBlock,
-      deskMemo,
+      deskMemo: renderMarkdownToString({ priceData, children: deskMemo }),
       trefwoorden,
       taal: attributes?.locale,
       titel: attributes?.title,

diff --git a/apps/overige-objecten-api/src/utils/index.ts b/apps/overige-objecten-api/src/utils/index.ts
@@ -18,3 +18,4 @@ export { processData } from './processData';
 export { convertSpotlightToHTML } from './convertSpotlightToHTML';
 export { convertMultiColumnsButtonToHTML } from './convertMultiColumnsButtonToHTML';
 export { createHTMLFiles } from './createHTMLFiles';
+export { renderMarkdownToString } from './renderMarkdownToString';
diff --git a/apps/overige-objecten-api/src/utils/renderMarkdownToString.tsx b/apps/overige-objecten-api/src/utils/renderMarkdownToString.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { Markdown, type MarkdownProps } from '../components/Markdown';
+
+export interface RenderMarkdownToStringProps extends MarkdownProps {}
+
+export const renderMarkdownToString = ({ children, priceData }: RenderMarkdownToStringProps) =>
+  renderToString(<Markdown priceData={priceData}>{children}</Markdown>);