+
+
+
+ );
+}
+
+export default FileUploadPage;
diff --git a/containers/frontend/src/Pages/History.js b/containers/frontend/src/Pages/History.js
new file mode 100644
index 0000000..6568381
--- /dev/null
+++ b/containers/frontend/src/Pages/History.js
@@ -0,0 +1,143 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useBackendAPIClient } from "../api/BackendAPIClient";
+import AIFeedback from "../components/AIfeedback";
+
+const ITEMS_PER_PAGE = 10;
+
+function History() {
+ const backendAPIClient = useBackendAPIClient();
+ const [allFiles, setAllFiles] = useState([]);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [isLoading, setLoading] = useState(false);
+ const [feedback, setFeedback] = useState(null);
+
+ const fetchAllFiles = useCallback(async () => {
+ setLoading(true);
+ try {
+ const response = await backendAPIClient.get("/s3/history");
+ const files = response.data;
+ setAllFiles(files);
+ } catch (error) {
+ console.error("Error fetching files:", error);
+ } finally {
+ setLoading(false);
+ }
+ }, [backendAPIClient]);
+
+ useEffect(() => {
+ fetchAllFiles();
+ }, [fetchAllFiles]);
+
+ const fetchAndShowFileContent = async (fileName) => {
+ setLoading(true);
+ setFeedback(null);
+ try {
+ const response = await backendAPIClient.get("/s3/download", {
+ params: {
+ file_name: fileName,
+ },
+ });
+
+ const fileData = response.data;
+
+ if (fileData && fileData.prompt_output && fileData.prompt_output.body) {
+ const bodyData = JSON.parse(fileData.prompt_output.body);
+ setFeedback(bodyData);
+ }
+ } catch (error) {
+ console.error("Error fetching file content:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+ const currentFiles = allFiles.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+ const totalPages = Math.ceil(allFiles.length / ITEMS_PER_PAGE);
+
+ const handlePageChange = (page) => {
+ setCurrentPage(page);
+ };
+
+ const paginationButtons = [];
+ for (let i = 1; i <= totalPages; i++) {
+ paginationButtons.push(
+ ,
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default History;
diff --git a/containers/frontend/src/__tests__/components/Costingtool.test.js b/containers/frontend/src/__tests__/components/Costingtool.test.js
new file mode 100644
index 0000000..74392b3
--- /dev/null
+++ b/containers/frontend/src/__tests__/components/Costingtool.test.js
@@ -0,0 +1,199 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import RoyalMailCalculator from "../../components/Costingtool";
+
+describe("RoyalMailCalculator", () => {
+ test("renders with default props and displays correct initial values", () => {
+ render(
+
+
+
+
+ | File Name | +Date Uploaded | +Action | +
|---|---|---|
| + Loading files... + | +||
| {file.name.split("|~")[1] || ""} | +{file.last_modified} | ++ + | +
| + No assessment files found. + | +||
+ {totalPages > 1 && (
+
+
+
+ {paginationButtons}
+
+
+ )}
+
+
+ );
+ }
+ if (
+ typeof feedbackObj === "string" &&
+ feedbackObj.includes(
+ "not an acceptable input prompt and has been rejected.",
+ )
+ ) {
+ return (
+ + AI Guardrails have rejected this letter, please edit and resubmit +
+ ); + } + if (feedbackObj === null) { + returnNo file uploaded yet.
; + } + if (feedbackObj === undefined) { + returnUndefined response
; + } + if ( + typeof feedbackObj === "object" && + Object.keys(feedbackObj).length > 0 + ) { + const cleanedFeedback = processObject(feedbackObj); + return ( +
+
+ );
+ }
+ return Assessment:
+
+ Description:
+
+ + {cleanedFeedback.description || cleanedFeedback.Description || ""} + +
+
+ Rating:{" "} + + {cleanedFeedback.rating} + +
+
+ Reason: +
+ {cleanedFeedback.reason || cleanedFeedback.Reason || ""}
+
+
+ Advice: +
+ {cleanedFeedback.advice || cleanedFeedback.Advice || ""}
+
+
+ + + {cleanedFeedback.description || cleanedFeedback.Description || ""} + +
+
+ Rating:{" "} + + {cleanedFeedback.rating} + +
+
+ Reason: +
+ Advice: +
No file uploaded yet.
; + }; + + return ( +
+
+ );
+}
diff --git a/containers/frontend/src/components/AuthContext.js b/containers/frontend/src/components/AuthContext.js
new file mode 100644
index 0000000..6f84dd8
--- /dev/null
+++ b/containers/frontend/src/components/AuthContext.js
@@ -0,0 +1,177 @@
+import {
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ useCallback,
+} from "react";
+import {
+ CognitoIdentityProviderClient,
+ InitiateAuthCommand,
+ GlobalSignOutCommand,
+ RespondToAuthChallengeCommand,
+} from "@aws-sdk/client-cognito-identity-provider";
+
+const AuthContext = createContext();
+const cognitoClient = new CognitoIdentityProviderClient({
+ region: "eu-west-2",
+});
+const CLIENT_ID =
+ window.env?.REACT_APP_COGNITO_ID || process.env.REACT_APP_COGNITO_ID;
+const USER_POOL_ID =
+ window.env?.REACT_APP_COGNITO_USER_POOL_ID ||
+ process.env.REACT_APP_COGNITO_USER_POOL_ID;
+
+export function AuthProvider({ children }) {
+ const [user, setUser] = useState(null);
+ const [error, setError] = useState(null);
+ const [isAuthReady, setIsAuthReady] = useState(false);
+
+ useEffect(() => {
+ try {
+ const idToken = sessionStorage.getItem("idToken");
+ const accessToken = sessionStorage.getItem("accessToken");
+ const userEmail = sessionStorage.getItem("userEmail");
+ const refreshToken = sessionStorage.getItem("refreshToken");
+
+ if (idToken && accessToken && userEmail) {
+ setUser({
+ email: userEmail,
+ idToken,
+ accessToken,
+ refreshToken,
+ });
+ }
+ } catch (initError) {
+ console.error(
+ "Failed to initialize auth from session storage",
+ initError,
+ );
+ setUser(null);
+ } finally {
+ setIsAuthReady(true);
+ }
+ }, []);
+
+ const refreshSession = useCallback(async () => {
+ try {
+ const refreshToken = sessionStorage.getItem("refreshToken");
+ if (!refreshToken) throw new Error("No refresh token available");
+
+ const command = new InitiateAuthCommand({
+ AuthFlow: "REFRESH_TOKEN_AUTH",
+ ClientId: CLIENT_ID,
+ AuthParameters: {
+ REFRESH_TOKEN: refreshToken,
+ },
+ });
+
+ const response = await cognitoClient.send(command);
+ const newIdToken = response.AuthenticationResult.IdToken;
+ const newAccessToken = response.AuthenticationResult.AccessToken;
+
+ // Update session storage with new tokens
+ sessionStorage.setItem("idToken", newIdToken);
+ sessionStorage.setItem("accessToken", newAccessToken);
+ sessionStorage.setItem("refreshToken", refreshToken);
+ setUser((prev) => ({
+ ...prev,
+ idToken: newIdToken,
+ accessToken: newAccessToken,
+ refreshToken,
+ }));
+ setError(null);
+ return newIdToken;
+ } catch (err) {
+ setError(err.message || "Failed to refresh token");
+ setUser(null);
+ sessionStorage.removeItem("idToken");
+ sessionStorage.removeItem("accessToken");
+ sessionStorage.removeItem("refreshToken");
+ sessionStorage.removeItem("userEmail");
+ throw err;
+ }
+ }, []);
+
+ const login = useCallback(async (username, password) => {
+ let loginResponse = null;
+ try {
+ setError(null);
+ const command = new InitiateAuthCommand({
+ AuthFlow: "USER_PASSWORD_AUTH",
+ ClientId: CLIENT_ID,
+ AuthParameters: {
+ USERNAME: username,
+ PASSWORD: password,
+ },
+ });
+ loginResponse = await cognitoClient.send(command);
+ if (loginResponse.ChallengeName === "NEW_PASSWORD_REQUIRED") {
+ const challengeInput = {
+ ChallengeName: "NEW_PASSWORD_REQUIRED",
+ ClientId: CLIENT_ID,
+ UserPoolId: USER_POOL_ID,
+ ChallengeResponses: {
+ USERNAME: username,
+ NEW_PASSWORD: password,
+ },
+ Session: loginResponse.Session,
+ };
+ const challengeConfirm = new RespondToAuthChallengeCommand(
+ challengeInput,
+ );
+ const challengeConfirmResponse =
+ await cognitoClient.send(challengeConfirm);
+ loginResponse = challengeConfirmResponse;
+ }
+ const { AccessToken, IdToken, RefreshToken } =
+ loginResponse.AuthenticationResult;
+ sessionStorage.setItem("accessToken", AccessToken);
+ sessionStorage.setItem("refreshToken", RefreshToken);
+ sessionStorage.setItem("idToken", IdToken);
+ sessionStorage.setItem("userEmail", username); // NOSONAR jssecurity:S8475 - email extracted from verified Cognito
+ setUser({
+ email: username,
+ idToken: IdToken,
+ accessToken: AccessToken,
+ refreshToken: RefreshToken,
+ });
+ return true;
+ } catch (err) {
+ setError(err.message || "Failed to sign in");
+ return false;
+ }
+ }, []);
+
+ const logout = async () => {
+ try {
+ const accessToken = sessionStorage.getItem("accessToken");
+ if (accessToken) {
+ const command = new GlobalSignOutCommand({
+ AccessToken: accessToken,
+ });
+ await cognitoClient.send(command);
+ }
+ sessionStorage.removeItem("idToken");
+ sessionStorage.removeItem("userEmail");
+ sessionStorage.removeItem("accessToken");
+ sessionStorage.removeItem("refreshToken");
+ setUser(null);
+ setError(null);
+ } catch (err) {
+ setError(err.message || "Failed to sign out");
+ }
+ };
+
+ return (
+ {returnContent()}
+
+ {/* Input Parameters Section */}
+
+ );
+}
diff --git a/containers/frontend/src/components/FileUpload.css b/containers/frontend/src/components/FileUpload.css
new file mode 100644
index 0000000..688cca4
--- /dev/null
+++ b/containers/frontend/src/components/FileUpload.css
@@ -0,0 +1,51 @@
+.file-upload {
+ padding: 16px;
+}
+
+.file-upload h2 {
+ font-size: 24px;
+ font-weight: 600;
+ margin-bottom: 16px;
+}
+
+.file-upload input[type="file"] {
+ display: block;
+ width: 100%;
+ font-size: 14px;
+ color: #111827;
+ border: 1px solid #d1d5db;
+ border-radius: 8px;
+ padding: 8px;
+ background-color: #f9fafb;
+ cursor: pointer;
+}
+
+.file-upload input[type="file"]::file-selector-button {
+ width: 150px;
+ height: 44px;
+ background-color: #007f3b;
+ border: 1px solid #d8dde0;
+ border-radius: 4px;
+ color: #f9fafb;
+
+ font-family: Arial, sans-serif;
+ font-size: 16px;
+ font-weight: 700;
+ padding: 10px 20px;
+ cursor: pointer;
+ box-shadow: 0 2px 4px #00411d;
+ transition:
+ background-color 0.2s,
+ box-shadow 0.2s;
+}
+
+.file-upload input[type="file"]:focus {
+ outline: none;
+ border-color: #3b82f6;
+}
+
+.file-upload .success-message {
+ margin-top: 8px;
+ color: #16a34a;
+ font-weight: 500;
+}
diff --git a/containers/frontend/src/components/FileUpload.js b/containers/frontend/src/components/FileUpload.js
new file mode 100644
index 0000000..f819740
--- /dev/null
+++ b/containers/frontend/src/components/FileUpload.js
@@ -0,0 +1,99 @@
+import { useState } from "react";
+import "./FileUpload.css";
+
+const SUPPORTED_EXTENSIONS = ["docx", "md", "txt", "odt", "pdf"];
+
+export default function FileUpload({ handleLoading, onFileUpload }) {
+ const [uploadStatus, setUploadStatus] = useState("");
+
+ const acceptString = SUPPORTED_EXTENSIONS.map((ext) => `.${ext}`).join(",");
+
+ const handleFileChange = async (event) => {
+ const file = event.target.files[0];
+ if (!file) {
+ setUploadStatus("No file selected");
+ setTimeout(() => setUploadStatus(""), 2000);
+ return;
+ }
+
+ const fileExtension = file.name.split(".").pop().toLowerCase();
+ if (!SUPPORTED_EXTENSIONS.includes(fileExtension)) {
+ setUploadStatus(`Error: .${fileExtension} files are not supported.`);
+ setTimeout(() => setUploadStatus(""), 4000);
+ event.target.value = null;
+ return;
+ }
+
+ setUploadStatus("Uploading...");
+ handleLoading(true);
+ try {
+ const fr = new FileReader();
+ fr.readAsDataURL(file);
+ fr.addEventListener("load", (_evt) =>
+ onFileUpload({ extracted_text: fr.result, file_name: file.name }),
+ );
+
+ setUploadStatus("Successfully Uploaded");
+ setTimeout(() => setUploadStatus(""), 2000);
+ } catch (error) {
+ console.error("Upload failed:", error);
+ setUploadStatus(error.message || "Upload Failed");
+ setTimeout(() => setUploadStatus(""), 2000);
+ handleLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ {/* Apply 1st Class */}
+ Costing tool
++ See how much you could save the NHS if your letter is suitable for + Admail. +
+Input Parameters
+ {letter === "pdf" &&Your uploaded PDF letter has {pages} pages
} + {letter === "docx" && ( +note: Please check your uploaded docx for page numbers
+ )} + {/* Pages per letter */} +
+
+
+ {/* Number of letters */}
+
+
+ {
+ const val = e.target.value;
+ if (val === "") {
+ setLetterPages(1);
+ } else {
+ setLetterPages(
+ Math.max(1, Math.min(5, Number.parseInt(val, 10))),
+ );
+ }
+ }}
+ className="value editableValue"
+ />
+
+
+
+ setLetterPages(Number.parseInt(e.target.value, 10))
+ }
+ className="slider"
+ style={{
+ background: `linear-gradient(to right, #ef4444 0%, #ef4444 ${
+ ((letterPages - 1) / (5 - 1)) * 100
+ }%, #e5e7eb ${
+ ((letterPages - 1) / (5 - 1)) * 100
+ }%, #e5e7eb 100%)`,
+ }}
+ />
+
+
+ 1
+ 5
+
+
+
+
+
+ {
+ const val = e.target.value;
+ if (val === "") {
+ setItems(1);
+ } else {
+ setItems(
+ Math.max(1, Math.min(2000000, Number.parseInt(val, 10))),
+ );
+ }
+ }}
+ className="value editableValue"
+ />
+
+
+ setItems(Number.parseInt(e.target.value, 10))}
+ className="slider"
+ style={{
+ background: `linear-gradient(to right, #ef4444 0%, #ef4444 ${
+ ((items - 100) / 1999900) * 100
+ }%, #e5e7eb ${((items - 100) / 1999900) * 100}%, #e5e7eb 100%)`,
+ }}
+ />
+
+
+ 1
+ 2000000
+
+
+ setFirstClass(e.target.checked)}
+ className="checkbox"
+ />
+
+
+
+ {/* Cost Comparison Section */}
+
+
+
+ {/* Disclaimer */}
+ Cost Comparison
+ +
+ {/* Advertising Mail Cost */}
+
+
+
+
+ {/* Business Mail Cost */}
+
+
+ Advertising Mail Cost
+
+ {formatCurrency(costs.advertising)}
+
+
+
+
+ {/* Savings */}
+
+
+ {firstClass && (
+ + Mail Cost {firstClass ? " / First Class" : " / Business"} +
+First Class applied
+ )}
+ {formatCurrency(costs.business)}
+
+
+
+
+ Savings
+
+ -{formatCurrency(costs.savings)}
+
+
+
+ + Disclaimer: This app uses + simplified calculations based on selected parameters from the{" "} + NHS Notify letters{" "} + agreed business rates. The advertising mailing rate is taken from the + currently approved supplier. Contact NHS Notify for the latest mailing + rates. +
+
+
+ );
+}
diff --git a/containers/frontend/src/components/Header.css b/containers/frontend/src/components/Header.css
new file mode 100644
index 0000000..61c86d7
--- /dev/null
+++ b/containers/frontend/src/components/Header.css
@@ -0,0 +1,18 @@
+header {
+ background-color: #005eb8;
+ height: 120px;
+ color: white;
+ padding: 0px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+}
+
+header h1 {
+ font-size: 24px;
+ font-weight: bold;
+ margin: 0;
+}
+
+/* Removed fake .nhsuk-header-logo to rely on design system */
diff --git a/containers/frontend/src/components/Header.js b/containers/frontend/src/components/Header.js
new file mode 100644
index 0000000..6cf9e66
--- /dev/null
+++ b/containers/frontend/src/components/Header.js
@@ -0,0 +1,101 @@
+import "./Header.css";
+import "./Shared.css";
+import { Link } from "react-router-dom";
+import { useAuth } from "./AuthContext";
+
+export default function Header() {
+ const { logout } = useAuth();
+ return (
+ + Admail Eligibility Checker +
+
+ Upload your template to have the letter content assessed. This service
+ will provide feedback and suggest the most appropriate Royal Mail
+ service to send the letters. NotifAI will provide you a reason for
+ choosing the returned rating and provide some advice on improving your
+ template to tailor it to better suit Admail or Business Mail mailtype.
+
+
+
+ Rating Description:
+
+
+
+ BUSINESS:
+ Use a Business Mail product for this mail.
+
+
+ UNSURE: It
+ is unclear as to whether this letter should be sent as Admail or
+ Business Mail.
+
+
+
+ ADVERTISING
+
+ : This letter is suitable for Admail.
+
+ {uploadStatus} +
+ )} +
+ 
+
+
+ + Notify AI +
+
+
+
+
+
+
+ );
+}
diff --git a/containers/frontend/src/components/Shared.css b/containers/frontend/src/components/Shared.css
new file mode 100644
index 0000000..961b67a
--- /dev/null
+++ b/containers/frontend/src/components/Shared.css
@@ -0,0 +1 @@
+/* Removed fake .nhsuk-button to rely on design system */
diff --git a/containers/frontend/src/index.css b/containers/frontend/src/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/containers/frontend/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/containers/frontend/src/index.js b/containers/frontend/src/index.js
new file mode 100644
index 0000000..a656127
--- /dev/null
+++ b/containers/frontend/src/index.js
@@ -0,0 +1,20 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "nhsuk-frontend/dist/nhsuk.css";
+import App from "./App.js";
+import reportWebVitals from "./reportWebVitals.js";
+import { AuthProvider } from "./components/AuthContext.js";
+
+const root = ReactDOM.createRoot(document.querySelector("#root"));
+root.render(
+
+
+
+