feat: show payment portal information

packages/web/src/components/PaymentInformation/index.ee.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+import PageTitle from 'components/PageTitle';
+import { generateExternalLink } from 'helpers/translation-values';
+import usePaymentPortalUrl from 'hooks/usePaymentPortalUrl.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+export default function PaymentInformation() {
+  const paymentPortal = usePaymentPortalUrl();
+  const formatMessage = useFormatMessage();
+
+  return (
+    <React.Fragment>
+      <PageTitle
+        gutterBottom
+      >
+        {formatMessage('billingAndUsageSettings.paymentInformation')}
+      </PageTitle>
+
+      <Typography>
+        {formatMessage(
+          'billingAndUsageSettings.paymentPortalInformation',
+          { link: generateExternalLink(paymentPortal.url) })}
+      </Typography>
+    </React.Fragment>
+  );
+}