feat: Change the document title of the payment page

This commit is contained in:
Ahmed Bouhuolia
2024-10-06 22:21:12 +02:00
parent 3cd54653a8
commit 3358ce58bc
3 changed files with 51 additions and 3 deletions

View File

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

View File

@@ -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>
);
}