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: