diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index f91cd73b7..d7bd5702e 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -38,6 +38,7 @@
"@types/react": "^16.14.28",
"@types/react-body-classname": "^1.1.7",
"@types/react-dom": "^16.9.16",
+ "@types/react-helmet": "^6.1.11",
"@types/react-redux": "^7.1.24",
"@types/react-router-dom": "^5.3.3",
"@types/react-transition-group": "^4.4.5",
@@ -60,6 +61,7 @@
"fast-deep-equal": "^3.1.3",
"flat": "^5.0.2",
"formik": "^2.2.5",
+ "helmet": "^3.21.0",
"history": "4.10.1",
"http-proxy-middleware": "^1.0.0",
"jest": "24.9.0",
@@ -88,6 +90,7 @@
"react-dropzone-esm": "^15.0.1",
"react-error-boundary": "^3.0.2",
"react-error-overlay": "^6.0.9",
+ "react-helmet": "^6.1.0",
"react-hotkeys-hook": "^3.0.3",
"react-intl-universal": "^2.4.7",
"react-loadable": "^5.5.0",
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
index a2cc12cdd..213cdcfc8 100644
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
@@ -1,10 +1,11 @@
import { useParams } from 'react-router-dom';
-import { PaymentPortal } from './PaymentPortal';
-import { PaymentPortalBoot } from './PaymentPortalBoot';
+import { Helmet } from 'react-helmet';
import BodyClassName from 'react-body-classname';
-import styles from './PaymentPortal.module.scss';
+import { PaymentPortal } from './PaymentPortal';
+import { PaymentPortalBoot, usePaymentPortalBoot } from './PaymentPortalBoot';
import { PaymentInvoicePreviewDrawer } from './drawers/PaymentInvoicePreviewDrawer/PaymentInvoicePreviewDrawer';
import { DRAWERS } from '@/constants/drawers';
+import styles from './PaymentPortal.module.scss';
export default function PaymentPortalPage() {
const { linkId } = useParams<{ linkId: string }>();
@@ -12,9 +13,26 @@ export default function PaymentPortalPage() {
return (
+
);
}
+
+/**
+ * Renders the document title of the current payment page.
+ * @returns {React.ReactNode}
+ */
+function PaymentPortalHelmet() {
+ const { sharableLinkMeta } = usePaymentPortalBoot();
+
+ return (
+
+
+ {sharableLinkMeta?.invoiceNo} | {sharableLinkMeta?.organization?.name}
+
+
+ );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5abfc7bc..85d5332e4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -583,6 +583,9 @@ importers:
'@types/react-dom':
specifier: ^16.9.16
version: 16.9.24
+ '@types/react-helmet':
+ specifier: ^6.1.11
+ version: 6.1.11
'@types/react-redux':
specifier: ^7.1.24
version: 7.1.33
@@ -649,6 +652,9 @@ importers:
formik:
specifier: ^2.2.5
version: 2.4.6(react@18.3.1)
+ helmet:
+ specifier: ^3.21.0
+ version: 3.23.3
history:
specifier: 4.10.1
version: 4.10.1
@@ -733,6 +739,9 @@ importers:
react-error-overlay:
specifier: ^6.0.9
version: 6.0.11
+ react-helmet:
+ specifier: ^6.1.0
+ version: 6.1.0(react@18.3.1)
react-hotkeys-hook:
specifier: ^3.0.3
version: 3.4.7(react-dom@18.3.1)(react@18.3.1)
@@ -6930,6 +6939,12 @@ packages:
'@types/react': 16.14.60
dev: false
+ /@types/react-helmet@6.1.11:
+ resolution: {integrity: sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==}
+ dependencies:
+ '@types/react': 16.14.60
+ dev: false
+
/@types/react-redux@7.1.33:
resolution: {integrity: sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==}
dependencies:
@@ -21933,6 +21948,18 @@ packages:
resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
dev: false
+ /react-helmet@6.1.0(react@18.3.1):
+ resolution: {integrity: sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==}
+ peerDependencies:
+ react: '>=16.3.0'
+ dependencies:
+ object-assign: 4.1.1
+ prop-types: 15.8.1
+ react: 18.3.1
+ react-fast-compare: 3.2.2
+ react-side-effect: 2.1.2(react@18.3.1)
+ dev: false
+
/react-hotkeys-hook@3.4.7(react-dom@18.3.1)(react@18.3.1):
resolution: {integrity: sha512-+bbPmhPAl6ns9VkXkNNyxlmCAIyDAcWbB76O4I0ntr3uWCRuIQf/aRLartUahe9chVMPj+OEzzfk3CQSjclUEQ==}
peerDependencies: