CCM-12776: init

Author: alexnuttall

frontend/package.json

@@ -7,6 +7,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "jsonwebtoken": "^9.0.2",
+    "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^13.0.2",
     "markdown-to-jsx": "^7.7.10",

frontend/src/app/create-and-submit-templates/page.tsx

@@ -1,3 +1,4 @@
+import DocxExtract from '@atoms/DocxExtract/DocxExtract';
 import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import content from '@content/content';
@@ -17,25 +18,9 @@ export default function HomePage() {
           <h1 className='nhsuk-heading-xl' data-testid='page-heading'>
             {homePageContent.pageHeading}
           </h1>
-
-          <p>{homePageContent.text1}</p>
-          <p>{homePageContent.text2}</p>
-
-          <ul className='nhsuk-list nhsuk-list--bullet'>
-            {homePageContent.channelList.map((channel, i) => (
-              <li key={`template${i + 1}`}>{channel}</li>
-            ))}
-          </ul>
-
-          <p>{homePageContent.text3}</p>
-          <h2 className='nhsuk-heading-l' data-testid='page-sub-heading'>
-            {homePageContent.pageSubHeading}
-          </h2>
-          <p>{homePageContent.text4}</p>
-          <p>{homePageContent.text5}</p>
-          <p>{homePageContent.text6}</p>
-          <p>{homePageContent.text7}</p>
-
+          <DocxExtract />
+          <br />
+          <br />
           <NHSNotifyButton
             href={homePageContent.linkButton.url}
             data-testid='start-now-button'

frontend/src/components/atoms/DocxExtract/DocxExtract.tsx

@@ -0,0 +1,93 @@
+'use client';
+import React, { useState } from 'react';
+import { loadAsync } from 'jszip';
+
+function normalizePath(p: string): string {
+  // Remove any array-style indices like users[0].name -> users.name (we only care about field names)
+  return (
+    p
+      // strip any embedded XML tags that may have been captured across DOCX text runs
+      // eslint-disable-next-line sonarjs/slow-regex
+      .replaceAll(/<[^>]+>/g, '')
+      // remove array indices
+      // eslint-disable-next-line sonarjs/slow-regex
+      .replaceAll(/\[[^\]]*]/g, '')
+      // collapse whitespace
+      .replaceAll(/\s+/g, '')
+      // collapse multiple dots
+      .replaceAll(/\.+/g, '.')
+      // trim leading/trailing dots
+      .replace(/^\./, '')
+      .replace(/\.$/, '')
+  );
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+async function extractMarkersFromDocx(templateSource: File): Promise<string[]> {
+  try {
+    const ab = await templateSource.arrayBuffer();
+
+    // eslint-disable-next-line sonarjs/no-unsafe-unzip
+    const zip = await loadAsync(ab);
+
+    const dataMarkers = new Set<string>();
+
+    for (const [name, entry] of Object.entries(zip.files)) {
+      if (!/\.xml$/i.test(name)) continue;
+
+      const isWord = name.startsWith('word/');
+      if (!isWord) continue;
+
+      let xml = '';
+      try {
+        xml = await entry.async('string');
+      } catch {
+        continue;
+      }
+
+      const directRe = /{([^{]+?)}/g;
+      let m: RegExpExecArray | null;
+
+      while ((m = directRe.exec(xml)) !== null) {
+        const rawPath = m[1];
+        if (rawPath) {
+          const path = normalizePath(rawPath);
+          if (!path.startsWith('d.')) continue;
+
+          dataMarkers.add(path.replace(/^d\./, ''));
+        }
+      }
+    }
+
+    const markers = [...dataMarkers].filter(Boolean).sort();
+    return markers;
+  } catch {
+    return [];
+  }
+}
+
+const DocxExtract: React.FC = () => {
+  const [params, setParams] = useState<string[]>([]);
+
+  const handleFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const markers = await extractMarkersFromDocx(file);
+
+    setParams(markers);
+  };
+
+  return (
+    <>
+      <input type='file' accept='.docx' onChange={handleFile} />
+      <br />
+      <ul>
+        {params.map((p, i) => (
+          <li key={i}>{p}</li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default DocxExtract;