Merge pull request #695 from bigcapitalhq/feat-change-document-title-of-payment-page

feat: Change the document title of the payment page

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",

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 (
     <BodyClassName className={styles.rootBodyPage}>
       <PaymentPortalBoot linkId={linkId}>
+        <PaymentPortalHelmet />
         <PaymentPortal />
         <PaymentInvoicePreviewDrawer name={DRAWERS.PAYMENT_INVOICE_PREVIEW} />
       </PaymentPortalBoot>
     </BodyClassName>
   );
 }
+
+/**
+ * Renders the document title of the current payment page.
+ * @returns {React.ReactNode}
+ */
+function PaymentPortalHelmet() {
+  const { sharableLinkMeta } = usePaymentPortalBoot();
+
+  return (
+    <Helmet>
+      <title>
+        {sharableLinkMeta?.invoiceNo} | {sharableLinkMeta?.organization?.name}
+      </title>
+    </Helmet>
+  );
+}

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: