fix: pro flow stripe integration refinements (#1149)

frontend/src/component/admin/billing/Billing.tsx

@@ -1,6 +1,6 @@
 import AdminMenu from '../menu/AdminMenu';
 import { PageContent } from 'component/common/PageContent/PageContent';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import AccessContext from 'contexts/AccessContext';
@@ -12,14 +12,28 @@ import { BillingHistory } from './BillingHistory/BillingHistory';
 import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
 
 export const Billing = () => {
-    const { instanceStatus, isBilling } = useInstanceStatus();
+    const {
+        instanceStatus,
+        isBilling,
+        refetchInstanceStatus,
+        refresh,
+        loading,
+    } = useInstanceStatus();
     const { invoices } = useInvoices();
     const { hasAccess } = useContext(AccessContext);
 
+    useEffect(() => {
+        const hardRefresh = async () => {
+            await refresh();
+            refetchInstanceStatus();
+        };
+        hardRefresh();
+    }, [refetchInstanceStatus, refresh]);
+
     return (
         <div>
             <AdminMenu />
-            <PageContent header="Billing">
+            <PageContent header="Billing" isLoading={loading}>
                 <ConditionallyRender
                     condition={isBilling}
                     show={

frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx

@@ -40,7 +40,7 @@ export const BillingInformation: FC<IBillingInformationProps> = ({
     return (
         <Grid item xs={12} md={5}>
             <StyledInfoBox>
-                <StyledTitle variant="body1">Billing Information</StyledTitle>
+                <StyledTitle variant="body1">Billing information</StyledTitle>
                 <ConditionallyRender
                     condition={inactive}
                     show={
@@ -54,7 +54,7 @@ export const BillingInformation: FC<IBillingInformationProps> = ({
                 <StyledInfoLabel>
                     {inactive
                         ? 'Once we have received your billing information we will upgrade your trial within 1 business day'
-                        : 'These changes may take up to 1 business day and they will be visible on your next invoice'}
+                        : 'Update your credit card and business information and change which email address we send invoices to'}
                 </StyledInfoLabel>
                 <StyledDivider />
                 <StyledInfoLabel>

frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap

@@ -480,7 +480,7 @@ exports[`returns all baseRoutes 1`] = `
     },
     "parent": "/admin",
     "path": "/admin-invoices",
-    "title": "Invoices",
+    "title": "Billing & invoices",
     "type": "protected",
   },
   {

frontend/src/component/menu/routes.ts

@@ -518,7 +518,7 @@ export const routes: IRoute[] = [
     {
         path: '/admin-invoices',
         parent: '/admin',
-        title: 'Invoices',
+        title: 'Billing & invoices',
         component: FlaggedBillingRedirect,
         type: 'protected',
         menu: { adminSettings: true, isEnterprise: true },

frontend/src/hooks/api/getters/useInstanceStatus/useInstanceStatus.ts

@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 export interface IUseInstanceStatusOutput {
     instanceStatus?: IInstanceStatus;
     refetchInstanceStatus: () => void;
+    refresh: () => Promise<void>;
     isBilling: boolean;
     loading: boolean;
     error?: Error;
@@ -33,9 +34,14 @@ export const useInstanceStatus = (): IUseInstanceStatusOutput => {
         InstancePlan.TEAM,
     ];
 
+    const refresh = async (): Promise<void> => {
+        await fetch(formatApiPath('api/instance/refresh'));
+    };
+
     return {
         instanceStatus: data,
         refetchInstanceStatus: refetch,
+        refresh,
         isBilling: billingPlans.includes(data?.plan ?? InstancePlan.UNKNOWN),
         loading,
         error,