Merge pull request #978 from automatisch/expose-payment-portal

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

packages/web/src/contexts/AutomatischInfo.tsx

@@ -20,15 +20,16 @@ export const AutomatischInfoProvider = (
   props: AutomatischInfoProviderProps
 ): React.ReactElement => {
   const { children } = props;
-  const { data } = useQuery(GET_AUTOMATISCH_INFO);
+  const { data, loading } = useQuery(GET_AUTOMATISCH_INFO);
 
-  const isCloud = data?.getAutomatischInfo?.isCloud || false;
+  const isCloud = data?.getAutomatischInfo?.isCloud;
 
   const value = React.useMemo(() => {
     return {
       isCloud,
+      loading
     };
-  }, [isCloud]);
+  }, [isCloud, loading]);
 
   return (
     <AutomatischInfoContext.Provider value={value}>

packages/web/src/graphql/queries/get-payment-portal-url.ee.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const GET_PAYMENT_PORTAL_URL = gql`
+  query GetPaymentPortalUrl {
+    getPaymentPortalUrl {
+      url
+    }
+  }
+`;
+

packages/web/src/helpers/translation-values.tsx

@@ -1,6 +1,8 @@
+import Link from '@mui/material/Link';
+
 export const generateExternalLink = (link: string) => (str: string) =>
   (
-    <a href={link} target="_blank">
+    <Link href={link} target="_blank">
       {str}
-    </a>
+    </Link>
   );

packages/web/src/hooks/usePaymentPortalUrl.ee.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@apollo/client';
+import { GET_PAYMENT_PORTAL_URL } from 'graphql/queries/get-payment-portal-url.ee';
+
+type UsePaymentPortalUrlReturn = {
+  url: string;
+  loading: boolean;
+};
+
+export default function usePaymentPortalUrl(): UsePaymentPortalUrlReturn {
+  const { data, loading } = useQuery(GET_PAYMENT_PORTAL_URL);
+
+  return {
+    url: data?.getPaymentPortalUrl?.url,
+    loading
+  };
+}

packages/web/src/locales/en.json

@@ -98,6 +98,8 @@
   "profileSettings.deleteAccountResult3": "All your connections",
   "profileSettings.deleteAccountResult4": "All execution history",
   "billingAndUsageSettings.title": "Billing and usage",
+  "billingAndUsageSettings.paymentInformation": "Payment information",
+  "billingAndUsageSettings.paymentPortalInformation": "To manage your subscription, click <link>here</link> to go to the payment portal.",
   "deleteAccountDialog.title": "Delete account?",
   "deleteAccountDialog.description": "This will permanently delete your account and all the associated data with it.",
   "deleteAccountDialog.cancel": "Cancel?",

packages/web/src/pages/BillingAndUsageSettings/index.ee.tsx

@@ -3,6 +3,7 @@ import { Navigate } from 'react-router-dom';
 import Grid from '@mui/material/Grid';
 
 import * as URLS from 'config/urls'
+import PaymentInformation from 'components/PaymentInformation/index.ee';
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -12,10 +13,15 @@ function BillingAndUsageSettings() {
   const isCloud = useCloud();
   const formatMessage = useFormatMessage();
 
-  if (!isCloud) {
+  // redirect to the initial settings page
+  if (isCloud === false) {
     return (<Navigate to={URLS.SETTINGS} replace={true} />)
   }
 
+  // render nothing until we know if it's cloud or not
+  // here, `isCloud` is not `false`, but `undefined`
+  if (!isCloud) return <React.Fragment />
+
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={9} md={8} lg={6}>
@@ -23,7 +29,8 @@ function BillingAndUsageSettings() {
           <PageTitle>{formatMessage('billingAndUsageSettings.title')}</PageTitle>
         </Grid>
 
-        <Grid item xs={12} justifyContent="flex-end" sx={{pt: 5 }}>
+        <Grid item xs={12} justifyContent="flex-end" sx={{ mt: 2 }}>
+          <PaymentInformation />
         </Grid>
       </Grid>
     </Container>